/* Interior pages — work · studio · inquire. Shell + primitives live in brand.css */

/* ── page hero ──────────────────────────────────────────── */
.phero{position:relative;padding:clamp(138px,19vw,200px) 0 clamp(52px,8vw,82px);background:radial-gradient(120% 100% at 16% 0%,#16203a 0%,var(--navy) 46%,var(--navy-deep) 100%);border-bottom:1px solid var(--rule-soft)}
.phero.slim{padding-bottom:clamp(40px,6vw,60px)}
.phero .label{display:block;color:var(--gold);opacity:.9;margin-bottom:22px;font-size:12px;letter-spacing:.3em}
.phero h1{font-family:var(--display);font-weight:400;font-size:clamp(34px,7vw,62px);line-height:1.08;letter-spacing:-.018em;text-wrap:balance;max-width:17ch}
.phero h1 em{font-family:var(--edit);font-style:italic;font-weight:300}
.phero .lede{font-family:var(--edit);font-size:clamp(18px,4.2vw,24px);font-weight:300;line-height:1.55;color:var(--mute);max-width:46ch;margin-top:26px}
.phero-foot{display:flex;flex-wrap:wrap;gap:12px 34px;margin-top:38px;padding-top:24px;border-top:1px solid var(--rule-soft);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}

/* ── work: project rows ─────────────────────────────────── */
.works{display:grid;gap:clamp(62px,9vw,108px)}
.wrow{display:grid;gap:clamp(26px,4vw,44px);align-items:center}
.wrow .meta{display:grid;gap:14px;align-content:start}
.wrow .meta .label{color:var(--gold)}
.cream .wrow .meta .label{color:rgba(28,36,52,.66)}
.wrow h2{font-family:var(--display);font-weight:400;font-size:clamp(24px,5.2vw,36px);line-height:1.18;letter-spacing:-.01em;text-wrap:balance}
.wrow .say{font-family:var(--edit);font-size:clamp(17px,3.6vw,20px);line-height:1.5;color:var(--mute);max-width:44ch}
.cream .wrow .say{color:var(--mute-dark)}
.spec-list{list-style:none;display:grid;margin-top:8px;border-top:1px solid var(--rule-soft)}
.cream .spec-list{border-top-color:var(--rule-dark)}
.spec-list li{display:grid;grid-template-columns:9.5em 1fr;gap:16px;padding:11px 0;border-bottom:1px solid var(--rule-soft);font-size:14px;line-height:1.5;color:var(--mute)}
.cream .spec-list li{border-bottom-color:var(--rule-dark);color:var(--mute-dark)}
.spec-list b{font-family:var(--ui);font-weight:400;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);padding-top:3px}
.cream .spec-list b{color:#8f6512}
.wrow .go{margin-top:12px;justify-self:start}

/* ── browser frame around a real screenshot ─────────────── */
a.frame{display:block;color:inherit}
.frame{background:linear-gradient(#0a0e18,#05070d);border:1px solid rgba(216,182,90,.18);box-shadow:0 24px 58px rgba(0,0,0,.32);overflow:hidden;transition:transform .8s var(--ease),border-color .5s ease}
a.frame:hover{color:inherit;transform:translateY(-6px);border-color:var(--rule)}
.frame .bar{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid rgba(250,247,242,.08)}
.frame .dots{display:flex;gap:6px;flex:none}
.frame .dots i{display:block;width:8px;height:8px;border-radius:50%;background:rgba(250,247,242,.16)}
.frame .url{flex:1;text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;letter-spacing:.1em;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frame .view{display:block;overflow:hidden;background:#0a0e18;aspect-ratio:924/540}
.frame .view img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}

/* ── work: inside-the-build pair ────────────────────────── */
.tools{display:grid;gap:clamp(40px,6vw,56px)}
.tool{display:grid;gap:18px;align-content:start}
.tool .label{color:rgba(28,36,52,.66)}
.tool h3{font-family:var(--display);font-weight:400;font-size:clamp(20px,4.2vw,26px);line-height:1.24}
.tool p{font-family:var(--edit);font-size:17px;line-height:1.5;color:var(--mute-dark);max-width:40ch}
.tool .tlink{color:var(--ink)}

/* ── closing band ───────────────────────────────────────── */
.band{background:var(--navy-deep);padding:clamp(64px,9vw,104px) 0;border-top:1px solid var(--rule-soft)}
.band-in{display:grid;gap:24px;justify-items:start}
.band h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,5.6vw,42px);line-height:1.14;letter-spacing:-.012em;text-wrap:balance;max-width:20ch}
.band p{font-family:var(--edit);font-size:clamp(17px,3.8vw,21px);line-height:1.5;color:var(--mute);max-width:46ch}

/* ── studio ─────────────────────────────────────────────── */
.about{display:grid;gap:clamp(32px,5vw,64px);align-items:center}
.stmt{font-family:var(--display);font-weight:400;font-size:clamp(23px,4.6vw,36px);line-height:1.26;letter-spacing:-.01em;text-wrap:pretty;max-width:21ch}
.stmt em{font-family:var(--edit);font-style:italic;font-weight:300}
.prose{display:grid;gap:18px}
.prose p{font-family:var(--edit);font-size:clamp(17px,3.6vw,20px);line-height:1.6;color:var(--mute-dark);max-width:48ch}
.deep .prose p,.inc .prose p{color:var(--mute)}
.figure{position:relative;background:linear-gradient(180deg,#f2ece1,#e5dcca);border:1px solid var(--rule-dark);overflow:hidden}
.figure img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.figure figcaption{position:absolute;left:20px;bottom:16px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint-dark)}
.creed{display:grid;gap:1px;background:var(--rule-soft)}
.creed div{background:var(--navy);padding:clamp(26px,3.6vw,36px) clamp(20px,3vw,28px);display:grid;gap:12px;align-content:start}
.creed b{font-family:var(--ui);font-weight:400;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.creed h3{font-family:var(--display);font-weight:400;font-size:clamp(19px,3.8vw,23px);line-height:1.28}
.creed p{font-family:var(--edit);font-size:16px;line-height:1.5;color:var(--mute)}
.figs{display:grid;gap:1px;background:var(--rule-dark);margin-top:clamp(46px,7vw,72px)}
.figs div{background:var(--cream);padding:clamp(24px,3.4vw,34px) clamp(18px,2.6vw,26px);display:grid;gap:8px;align-content:start}
.figs b{font-family:var(--display);font-weight:400;font-size:clamp(34px,7vw,52px);line-height:1;color:var(--ink)}
.figs span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint-dark)}
.figs small{font-family:var(--edit);font-size:16px;line-height:1.45;color:var(--mute-dark)}

/* ── inquire ────────────────────────────────────────────── */
.nextup{list-style:none;display:grid;margin-top:32px;border-top:1px solid var(--rule-soft)}
.nextup li{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--rule-soft)}
.nextup b{font-family:var(--ui);font-weight:400;font-size:11px;letter-spacing:.18em;color:var(--gold);padding-top:5px}
.nextup i{font-style:normal;display:block;font-family:var(--display);font-size:17px;line-height:1.3;margin-bottom:5px;color:var(--cream)}
.nextup span{display:block;font-size:14px;line-height:1.6;color:var(--mute)}
.qa{display:grid;border-top:1px solid var(--rule-dark)}
.qa div{padding:clamp(22px,3vw,30px) 0;border-bottom:1px solid var(--rule-dark);display:grid;gap:12px}
.qa h3{font-family:var(--display);font-weight:400;font-size:clamp(19px,3.8vw,23px);line-height:1.3}
.qa p{font-family:var(--edit);font-size:clamp(16px,3.4vw,19px);line-height:1.55;color:var(--mute-dark);max-width:64ch}

/* ── breakpoints ────────────────────────────────────────── */
@media (max-width:559px){.spec-list li{grid-template-columns:1fr;gap:4px}}
@media (min-width:760px){
.wrow{grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,64px)}
.wrow.flip .frame{order:2}
.tools{grid-template-columns:1fr 1fr;gap:clamp(34px,4.5vw,54px)}
.creed{grid-template-columns:1fr 1fr}
.figs{grid-template-columns:repeat(3,1fr)}
.about{grid-template-columns:.92fr 1.08fr}
.about.flip .figure{order:2}
}
@media (min-width:1000px){
.wrow{grid-template-columns:1.15fr .85fr}
.creed{grid-template-columns:repeat(4,1fr)}
.tools{grid-template-columns:repeat(3,1fr)}
}

/* ── journal: the index (a lead story, then 2-up and 3-up rows of photo cards) and a single post
   (a cover, the article, and on desktop a side column with the contents and an inquiry card) ── */
.jgrid{display:grid;gap:clamp(40px,5vw,56px) clamp(22px,2.6vw,32px)}
.jcard{display:grid;gap:18px;align-content:start;color:var(--ink)}
.jcov{position:relative;overflow:hidden;aspect-ratio:3/2;background:#efe8dc}
.jcov img,.jcov .ph{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.jcard:hover .jcov img,.jcard:hover .jcov .ph{transform:scale(1.03)}
.jtext{display:grid;gap:10px;align-content:start}
.jtext p.label{font-family:var(--ui);font-weight:400;font-size:11px;line-height:1.6;letter-spacing:.24em;color:#8f6512}
.jtext .label s{text-decoration:none;color:rgba(28,36,52,.4);padding:0 .5em}
.jtext h2{font-family:var(--display);font-weight:400;font-size:clamp(21px,2.3vw,26px);line-height:1.24;text-wrap:balance;color:var(--ink);transition:color .3s}
.jtext p{font-family:var(--edit);font-weight:400;font-size:clamp(17px,1.6vw,19px);line-height:1.5;color:rgba(28,36,52,.78)}
.jtext .tlink{justify-self:start;margin-top:4px;color:var(--ink);border-bottom-color:rgba(165,118,26,.5)}
.jcard:hover h2{color:#8f6512}
.jcard.lead h2{font-size:clamp(26px,3.6vw,40px);line-height:1.14;max-width:22ch}
.jcard.lead p:not(.label){font-size:clamp(18px,1.9vw,21px);max-width:44ch}
@media (min-width:700px){
.jgrid{grid-template-columns:repeat(6,1fr)}
.jcard{grid-column:span 3}
.jcard.lead{grid-column:1/-1}
}
@media (min-width:1000px){
.jcard.lead{grid-template-columns:1.35fr 1fr;gap:clamp(32px,4vw,56px);align-items:center;padding-bottom:clamp(40px,5vw,56px);border-bottom:1px solid var(--rule-dark)}
.jcard.three{grid-column:span 2}
}

.pcov{position:relative;overflow:hidden;aspect-ratio:3/2;background:#efe8dc;margin-bottom:clamp(40px,6vw,72px)}
.pcov img,.pcov .ph{display:block;width:100%;height:100%;object-fit:cover}
@media (min-width:700px){.pcov{aspect-ratio:21/9}}
.pgrid{display:grid;gap:56px}
@media (min-width:1000px){.pgrid{grid-template-columns:minmax(0,68ch) minmax(220px,300px);justify-content:space-between;align-items:start}}
.paside{display:none}
@media (min-width:1000px){.paside{display:grid;gap:34px;position:sticky;top:110px}}
.toc{display:grid;gap:4px;padding-left:18px;border-left:1px solid var(--rule-dark)}
.toc .label,.pask .label{font-family:var(--ui);font-size:11px;line-height:1.6;letter-spacing:.24em;color:rgba(28,36,52,.66);margin-bottom:8px}
.toc a{font-family:var(--edit);font-size:18px;line-height:1.35;color:rgba(28,36,52,.8);padding:4px 0}
.toc a:hover{color:#8f6512}
.pask{display:grid;gap:12px;padding:24px;background:var(--navy);color:var(--cream)}
.pask .label{color:var(--gold)}
.pask p{font-family:var(--edit);font-size:18px;line-height:1.45;color:var(--mute)}
.pask .tlink{justify-self:start}

.post{max-width:68ch}
.post .quick{padding:24px 26px;margin-bottom:44px;background:#f2ebdf;border-left:2px solid var(--gold-deep)}
.post .quick b{display:block;font-family:var(--ui);font-size:11px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:#7a560f;margin-bottom:10px}
.post .quick p{font-family:var(--edit);font-weight:400;font-size:clamp(19px,4vw,23px);line-height:1.5;color:var(--ink)}
.post h2{font-family:var(--display);font-weight:400;font-size:clamp(23px,4.8vw,30px);line-height:1.22;margin:48px 0 14px;color:var(--ink);text-wrap:balance;scroll-margin-top:100px}
.post p,.post li{font-family:var(--edit);font-weight:400;font-size:clamp(18px,3.6vw,20px);line-height:1.62;color:rgba(28,36,52,.88)}
.post p+p{margin-top:16px}
.post ul{margin:14px 0 0 1.1em;display:grid;gap:8px}
.post ul+p{margin-top:16px}
.post li::marker{color:var(--gold-deep)}
.post strong{font-weight:600;color:var(--ink)}
.post a{border-bottom:1px solid rgba(165,118,26,.5)}
.post a:hover{color:var(--p-gold-text-deep,#8f6512)}

.pmore{margin-top:clamp(64px,8vw,96px);padding-top:clamp(36px,4vw,48px);border-top:1px solid var(--rule-dark)}
.pmore>.label{font-family:var(--ui);font-size:11px;line-height:1.6;letter-spacing:.28em;color:rgba(28,36,52,.66);margin-bottom:28px}
.pmore .jgrid{gap:40px clamp(22px,2.6vw,32px)}
.pmore .jtext h2{font-size:clamp(19px,2vw,22px)}
@media (min-width:700px){.pmore .jcard{grid-column:span 2}}
@media (max-width:699px){
.pmore .jcard{grid-template-columns:112px 1fr;gap:16px;align-items:start}
.pmore .jcov{aspect-ratio:1}
.pmore .jcov .ph span{display:none}
}