/* Shared styling for the public editorial and social pages. It intentionally
   consumes the portfolio tokens from style.css so every route feels related. */
.content-page { background: var(--brand-background); color: var(--brand-primary); display: flex; flex-direction: column; min-height: 100vh; }
.content-page main { min-width: 0; flex: 1 0 auto; }
.content-shell { width: min(1240px, calc(100% - (var(--gutter) * 2))); margin-inline: auto; }
.content-hero { padding: clamp(120px, 16vw, 210px) 0 clamp(62px, 9vw, 112px); border-bottom: 1px solid var(--brand-border); }
.content-hero__eyebrow { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 28px; color: var(--brand-muted); font-family: var(--mono-font); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.content-hero h1 { max-width: 900px; margin: 0; font-family: var(--display-font); font-size: clamp(58px, 10vw, 148px); font-weight: 600; letter-spacing: -.075em; line-height: .88; }
.content-hero h1 em { color: var(--brand-accent); font-style: normal; }
.content-hero__intro { max-width: 630px; margin: 32px 0 0; color: var(--brand-muted); font-size: clamp(17px, 1.7vw, 23px); line-height: 1.55; }
.content-hero__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 30px; margin-top: 30px; color: var(--brand-muted); font-family: var(--mono-font); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.content-main { padding: clamp(54px, 8vw, 105px) 0 clamp(90px, 12vw, 160px); }
.content-main__heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 32px; }
.content-main__heading h2 { margin: 0; font-family: var(--display-font); font-size: clamp(36px, 5vw, 64px); letter-spacing: -.06em; line-height: .95; }
.content-main__heading p { max-width: 330px; margin: 0; color: var(--brand-muted); font-size: 14px; line-height: 1.5; }
.content-filters { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(180px, 260px); gap: 12px; margin-bottom: 35px; }
.content-field { display: grid; gap: 8px; }
.content-field label { color: var(--brand-muted); font-family: var(--mono-font); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; }
.content-field input, .content-field select, .content-field textarea { width: 100%; border: 1px solid var(--brand-border); border-radius: 0; background: var(--brand-surface); color: var(--brand-primary); font: inherit; font-size: 15px; line-height: 1.4; padding: 13px 15px; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.content-field input::placeholder, .content-field textarea::placeholder { color: var(--brand-muted); opacity: .75; }
.content-field input:focus, .content-field select:focus, .content-field textarea:focus { outline: 2px solid transparent; border-color: var(--brand-accent); box-shadow: 0 0 0 3px rgba(3,160,153,.15); background: #fff; }
.content-result-status { min-height: 1.4em; margin: 0 0 18px; color: var(--brand-muted); font-family: var(--mono-font); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.article-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px) clamp(16px, 2vw, 26px); }
.article-card { grid-column: span 4; display: flex; min-width: 0; flex-direction: column; border: 1px solid var(--brand-border); background: var(--brand-surface); transition: transform .35s cubic-bezier(.2,.75,.25,1), border-color .25s ease, box-shadow .35s ease; }
.article-card:hover, .article-card:focus-within { border-color: var(--brand-accent); box-shadow: 0 22px 45px rgba(12,25,44,.11); transform: translateY(-5px); }
.article-card__link { display: flex; height: 100%; flex-direction: column; color: inherit; text-decoration: none; }
.article-card__image-wrap { overflow: hidden; aspect-ratio: 16/10; background: var(--brand-primary); }
.article-card__image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.75,.25,1); }
.article-card:hover .article-card__image, .article-card:focus-within .article-card__image { transform: scale(1.045); }
.article-card__body { display: flex; flex: 1; flex-direction: column; padding: clamp(20px, 2.5vw, 30px); }
.article-card__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-bottom: 18px; color: var(--brand-muted); font-family: var(--mono-font); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.article-card__meta strong { color: var(--brand-accent); font-weight: 700; }
.article-card h3 { margin: 0; font-family: var(--display-font); font-size: clamp(26px, 2.6vw, 38px); letter-spacing: -.055em; line-height: .98; }
.article-card p { margin: 16px 0 25px; color: var(--brand-muted); font-size: 14px; line-height: 1.55; }
.article-card__read { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; color: var(--brand-primary); font-family: var(--mono-font); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.article-card__read span { display: inline-grid; width: 25px; height: 25px; place-items: center; border: 1px solid currentColor; border-radius: 50%; transition: background .2s ease, color .2s ease, transform .2s ease; }
.article-card:hover .article-card__read span, .article-card:focus-within .article-card__read span { color: var(--brand-background); background: var(--brand-primary); transform: translateX(3px); }
.content-state { border: 1px dashed var(--brand-border); padding: 42px 28px; color: var(--brand-muted); text-align: center; }
.content-state[hidden] { display: none; }
.content-state h2 { margin: 0 0 10px; color: var(--brand-primary); font-family: var(--display-font); font-size: 30px; letter-spacing: -.04em; }
.content-state p { max-width: 500px; margin: 0 auto 22px; line-height: 1.6; }
.content-state .button { margin-top: 4px; }
.article-shell { max-width: 980px; }
.article-hero { padding: clamp(118px, 15vw, 190px) 0 48px; }
.article-hero__category { display: inline-flex; margin-bottom: 20px; color: var(--brand-accent); font-family: var(--mono-font); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.article-hero h1 { max-width: 920px; margin: 0; font-family: var(--display-font); font-size: clamp(48px, 8vw, 108px); letter-spacing: -.075em; line-height: .92; }
.article-hero__excerpt { max-width: 690px; margin: 26px 0 0; color: var(--brand-muted); font-size: clamp(17px, 1.8vw, 23px); line-height: 1.5; }
.article-hero__byline { display: flex; flex-wrap: wrap; gap: 9px 25px; margin-top: 27px; color: var(--brand-muted); font-family: var(--mono-font); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.article-featured { overflow: hidden; margin: 25px 0 0; border: 1px solid var(--brand-border); background: var(--brand-primary); }
.article-featured img { display: block; width: 100%; aspect-ratio: 2/1; object-fit: cover; }
.article-featured figcaption, .article-inline-media figcaption { padding: 11px 16px; color: var(--brand-muted); font-family: var(--mono-font); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px; align-items: start; gap: clamp(30px, 7vw, 90px); padding: 35px 0 115px; }
.article-body { min-width: 0; font-size: 17px; line-height: 1.78; }
.article-body > :first-child { margin-top: 0; }
.article-body p { margin: 0 0 24px; }
.article-body h2, .article-body h3, .article-body h4 { margin: 45px 0 16px; font-family: var(--display-font); letter-spacing: -.045em; line-height: 1.05; }
.article-body h2 { font-size: clamp(32px, 4vw, 48px); }
.article-body h3 { font-size: clamp(25px, 3vw, 34px); }
.article-body h4 { font-size: 22px; }
.article-body ul, .article-body ol { margin: 0 0 28px; padding-left: 1.35em; }
.article-body li { margin: 0 0 9px; padding-left: 5px; }
.article-body a { color: var(--brand-accent); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.article-body a:hover { color: var(--brand-primary); }
.article-body blockquote { margin: 35px 0; padding: 22px 25px; border-left: 3px solid var(--brand-accent); background: var(--brand-surface); color: var(--brand-primary); font-family: var(--display-font); font-size: clamp(22px, 2.7vw, 32px); letter-spacing: -.035em; line-height: 1.15; }
.article-body blockquote p { margin: 0; }
.article-body code { padding: 2px 5px; background: var(--brand-surface); font-family: var(--mono-font); font-size: .86em; }
.article-body pre { overflow-x: auto; margin: 28px 0; padding: 20px; background: var(--brand-primary); color: var(--brand-background); font-family: var(--mono-font); font-size: 13px; line-height: 1.55; }
.article-body table { width: 100%; margin: 28px 0; border-collapse: collapse; font-size: .92em; }
.article-body th, .article-body td { padding: 10px 12px; border: 1px solid var(--brand-border); text-align: left; }
.article-body th { background: var(--brand-surface); font-family: var(--mono-font); font-size: .8em; letter-spacing: .06em; text-transform: uppercase; }
.article-inline-media { overflow: hidden; margin: 26px 0 34px; border: 1px solid var(--brand-border); background: var(--brand-surface); }
.article-inline-media img { display: block; width: 100%; height: auto; }
.article-aside { position: sticky; top: 105px; display: grid; gap: 25px; }
.article-aside__label { margin: 0 0 10px; color: var(--brand-muted); font-family: var(--mono-font); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.article-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.article-tag { padding: 7px 9px; border: 1px solid var(--brand-border); color: var(--brand-muted); font-family: var(--mono-font); font-size: 9px; letter-spacing: .04em; }
.share-links { display: flex; flex-wrap: wrap; gap: 8px; }
.share-links a, .share-links button { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; padding: 8px; border: 1px solid var(--brand-border); background: transparent; color: var(--brand-primary); font: inherit; font-family: var(--mono-font); font-size: 9px; text-decoration: none; cursor: pointer; transition: color .2s ease, background .2s ease, border-color .2s ease; }
.share-links a:hover, .share-links a:focus-visible, .share-links button:hover, .share-links button:focus-visible { border-color: var(--brand-primary); color: var(--brand-background); background: var(--brand-primary); }
.related { padding: 75px 0 120px; border-top: 1px solid var(--brand-border); }
.related h2 { margin: 0 0 28px; font-family: var(--display-font); font-size: clamp(34px, 4vw, 55px); letter-spacing: -.055em; }
.related .article-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.related .article-card { grid-column: auto; }
.social-page-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 30px); }
.social-card { grid-column: span 4; min-width: 0; border: 1px solid var(--brand-border); background: var(--brand-surface); transition: transform .35s cubic-bezier(.2,.75,.25,1), border-color .2s ease, box-shadow .3s ease; }
.social-card:hover, .social-card:focus-within { border-color: var(--brand-accent); box-shadow: 0 18px 40px rgba(12,25,44,.1); transform: translateY(-5px); }
.social-card a { display: block; color: inherit; text-decoration: none; }
.social-card__media { position: relative; overflow: hidden; aspect-ratio: 9/12; background: var(--brand-primary); }
.social-card__media img, .social-card__media video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.75,.25,1); }
.social-card__media video { background: var(--brand-primary); }
.social-card:hover .social-card__media img, .social-card:focus-within .social-card__media img, .social-card:hover .social-card__media video, .social-card:focus-within .social-card__media video { transform: scale(1.05); }
.social-card__play { position: absolute; right: 16px; bottom: 16px; display: inline-grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(245,247,244,.6); border-radius: 50%; background: rgba(12,25,44,.65); color: #fff; font-size: 16px; }
.social-card__body { padding: 18px 20px 22px; }
.social-card__body p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--brand-muted); font-size: 14px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.social-card__meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 15px; color: var(--brand-muted); font-family: var(--mono-font); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.content-footer { border-top: 1px solid var(--brand-border); }
.content-footer .site-footer { min-height: 132px; }
.reveal-content { opacity: 0; transform: translateY(16px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.75,.25,1); }
.reveal-content.is-visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .article-card, .social-card { grid-column: span 6; }
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .article-aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 30px; }
  .related .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .content-shell { width: min(100% - 36px, 1240px); }
  .content-hero { padding-top: 112px; }
  .content-hero__eyebrow { align-items: flex-start; flex-direction: column; gap: 8px; }
  .content-main__heading { align-items: flex-start; flex-direction: column; gap: 14px; }
  .content-filters { grid-template-columns: 1fr; }
  .article-card, .social-card { grid-column: 1 / -1; }
  .article-hero { padding-top: 112px; }
  .article-layout { padding-bottom: 75px; }
  .article-aside { grid-template-columns: 1fr; }
  .related .article-grid { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
  .content-shell { width: calc(100% - 30px); }
  .content-hero h1, .article-hero h1 { font-size: 46px; }
  .article-body { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .article-card, .social-card, .article-card__image, .social-card__media img, .social-card__media video, .reveal-content { transition: none; }
  .reveal-content { opacity: 1; transform: none; }
}

/* Shared premium treatment for journal, articles and Instagram. */
.content-page::after { content: '</>  01 001  // system ready'; position: fixed; z-index: -1; right: 2vw; bottom: 3vh; color: var(--brand-border); font: 8px var(--mono-font); letter-spacing: .16em; writing-mode: vertical-rl; pointer-events: none; }
.content-hero { position: relative; padding: clamp(102px,12vw,158px) 0 clamp(52px,6.5vw,82px); overflow: hidden; }
.content-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(12,25,44,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(12,25,44,.035) 1px,transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(110deg,transparent 15%,#000 100%); }
.content-hero h1 { max-width: 1120px; font-size: clamp(54px,8vw,116px); line-height: .92; text-wrap: balance; }
.content-main { padding: clamp(48px,6.5vw,84px) 0 clamp(74px,9vw,120px); }
.article-card,.social-card,.content-state,.article-featured,.article-inline-media,.article-aside>div { position: relative; isolation: isolate; overflow: hidden; }
.article-card::before,.social-card::before,.content-state::before,.article-aside>div::before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(320px circle at var(--spot-x,50%) var(--spot-y,50%),rgba(3,160,153,.13),transparent 64%); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.article-card:hover::before,.social-card:hover::before,.content-state:hover::before,.article-aside>div:hover::before { opacity: 1; }
.article-card::after { content: attr(data-index); position: absolute; right: 14px; top: 12px; color: rgba(245,247,244,.65); font: 8px var(--mono-font); letter-spacing: .1em; pointer-events: none; }
.article-card__meta::before { content: '<article />'; color: var(--brand-accent-ink); }
.article-card__read span,.social-card__play { transition: transform .25s ease,background .25s ease,color .25s ease; }
.social-card:hover .social-card__play { transform: scale(1.08) rotate(-5deg); background: var(--brand-accent); }
.article-featured img,.article-inline-media img { transition: transform .7s cubic-bezier(.2,.75,.25,1); }
.article-featured:hover img,.article-inline-media:hover img { transform: scale(1.018); }
.article-aside>div { padding: 14px; border: 1px solid var(--brand-border); background: rgba(231,240,238,.55); }
.content-state { background-image: linear-gradient(rgba(12,25,44,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(12,25,44,.025) 1px,transparent 1px); background-size: 28px 28px; }
@media (max-width:700px) { .content-hero { padding-top: 98px; } .content-hero h1 { font-size: clamp(43px,13.5vw,67px); } .content-main { padding-block: 46px 76px; } }
@media (pointer:coarse),(prefers-reduced-motion:reduce) { .article-card::before,.social-card::before,.content-state::before,.article-aside>div::before { display:none; } }

.content-hero { padding-top: clamp(48px,6vw,82px); }
.content-hero h1 { font-size: clamp(43px,6.7vw,90px); line-height: 1.04; }
.content-hero__eyebrow { font-size: 11px; letter-spacing: .075em; }
.content-main__heading h2 { line-height: 1.1; font-size: clamp(32px,4vw,52px); }
.content-field { min-width: 0; }
.article-card h3 { font-size: clamp(24px,2.1vw,31px); line-height: 1.15; text-wrap: wrap; letter-spacing: -.04em; overflow-wrap: anywhere; }
.article-card__body { padding: 22px; }
.article-card__meta { font-size: 10px; gap: 10px; letter-spacing: .025em; }
.article-card__meta strong { color: var(--brand-accent-ink); border-bottom: 1px solid var(--brand-border); padding-bottom: 2px; }
.article-card__meta::before { content: none; }
.article-card__read { font-size: 11px; letter-spacing: .04em; }
.article-card__image-wrap { position: relative; }
.article-card__image-wrap::after { content: '</>'; position: absolute; bottom: 12px; right: 12px; padding: 4px 8px; background: var(--brand-primary); color: var(--brand-highlight); font: 11px var(--mono-font); opacity: 0; translate: 0 5px; transition: opacity .2s, translate .2s; }
.article-card:hover .article-card__image-wrap::after,.article-card:focus-within .article-card__image-wrap::after { opacity: 1; translate: 0 0; }
.article-hero { padding: clamp(46px,6vw,80px) 0 30px; }
.article-hero h1 { font-size: clamp(38px,5.3vw,72px); line-height: 1.08; letter-spacing: -.055em; }
.article-layout { gap: 40px; padding-top: 12px; padding-bottom: 64px; }
.article-body { overflow-wrap: anywhere; }
.article-body a { color: var(--brand-accent-ink); text-decoration: underline; }
.article-body h2 { font-size: clamp(29px,3vw,38px); line-height: 1.15; }
.article-body h3 { font-size: clamp(24px,2.6vw,31px); line-height: 1.2; }
.article-body h2,.article-body h3,.article-body h4 { margin-top: 32px; }
.article-body pre code { background: transparent; color: inherit; }
.article-body table { display: block; max-width: 100%; overflow-x: auto; }
.article-hero__category,.article-hero__byline,.article-aside__label,.article-tag,.article-featured figcaption,.article-inline-media figcaption { font-size: 11px; letter-spacing: .03em; }
.article-hero__category { color: var(--brand-accent-ink); }
.article-featured figcaption { background: var(--brand-surface); color: var(--brand-muted); }
.article-aside .form-status { grid-column: auto; margin-top: 12px; color: var(--brand-accent-ink); }
.share-links a,.share-links button { min-height: 44px; min-width: 44px; font-size: 11px; }
.related { padding: 48px 0 76px; }
.social-card__meta { flex-wrap: wrap; font-size: 11px; letter-spacing: .02em; }
.social-card__play { background: var(--brand-primary); }
.content-state { padding: 36px 24px; }
.content-state p:last-child { margin-bottom: 0; }
@media (max-width:700px) {
  .content-shell { width: calc(100% - var(--gutter) * 2); }
  .content-hero { padding-block: 40px 44px; }
  .content-hero h1 { font-size: clamp(39px,10.8vw,62px); }
  .content-hero__intro { margin-top: 22px; font-size: 17px; }
  .content-hero__meta { margin-top: 22px; font-size: 11px; gap: 12px; }
  .article-hero { padding-top: 40px; }
  .article-hero h1 { font-size: clamp(34px,9.5vw,52px); }
  .article-card h3 { font-size: 27px; }
  .article-card__body { padding: 20px; }
  .article-body { font-size: 16px; }
  .article-body blockquote { padding: 18px; font-size: 24px; }
  .content-field input,.content-field select,.content-field textarea { font-size: 16px; min-width: 0; }
  .social-card__media { aspect-ratio: 4/5; }
}
@media (pointer:coarse),(prefers-reduced-motion:reduce) { .article-card:hover,.social-card:hover { transform: none; } }

/* ---- Contact page layout (contact/index.html) ---- */
.inquiry-layout { display: grid; grid-template-columns: 1fr 1.7fr; gap: clamp(40px,7vw,100px); padding: clamp(60px,8vw,100px) 0 clamp(70px,10vw,130px); align-items: start; }
.inquiry-layout > aside { position: sticky; top: 110px; }
.inquiry-layout > aside h2 { margin: 0 0 18px; font-family: var(--display-font); font-size: clamp(30px,3.5vw,46px); letter-spacing: -.055em; line-height: 1.04; }
.inquiry-layout > aside > p { margin: 0 0 20px; color: var(--brand-muted); font-size: 15px; line-height: 1.65; }
.inquiry-layout > aside .text-link { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 14px; color: var(--brand-accent-ink); }
.inquiry-form-shell { background: var(--brand-primary); color: var(--brand-background); padding: clamp(28px,4vw,52px); border: 1px solid rgba(12,25,44,.18); border-radius: 6px; }
.inquiry-form-shell .contact-form { padding: 0; border: none; background: transparent; margin-top: 0; }
.inquiry-form-shell .contact-form__intro { padding-bottom: 20px; border-bottom: 1px solid rgba(178,203,200,.25); margin-bottom: 4px; }
.inquiry-form-shell .budget-note { display: block; margin-top: 6px; color: var(--brand-on-dark-muted); font-size: 11px; }
@media (max-width: 900px) { .inquiry-layout { grid-template-columns: 1fr; gap: 36px; } .inquiry-layout > aside { position: static; } }
@media (max-width: 700px) { .inquiry-layout { padding-block: 44px 68px; } .inquiry-form-shell { padding: 24px 18px; } }