/* Layout: a press-kit portfolio. Sticky masthead nav, a single reading column,
   AP-style datelines and the PR "###" end mark as the recurring signature. */
:root{
  --paper:#EEF0F4;      /* cool blue-grey ground */
  --sheet:#FBFCFD;      /* raised surfaces */
  --ink:#121826;        /* text */
  --soft:#4A5363;       /* secondary text */
  --rule:rgba(18,24,38,.14);
  --navy:#1A4480;       /* Henry's brand accent */
  --navy-ink:#FFFFFF;
  --tint:rgba(26,68,128,.08);
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --measure:64ch;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0F141D;--sheet:#161D29;--ink:#E7EBF2;--soft:#A3ADBD;--rule:rgba(231,235,242,.14);
  --navy:#7EA6E0;--navy-ink:#0F141D;--tint:rgba(126,166,224,.10);color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0F141D;--sheet:#161D29;--ink:#E7EBF2;--soft:#A3ADBD;--rule:rgba(231,235,242,.14);
  --navy:#7EA6E0;--navy-ink:#0F141D;--tint:rgba(126,166,224,.10);color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.65}
img{max-width:100%;display:block}
a{color:var(--navy);text-underline-offset:3px;text-decoration-thickness:1px}
a:focus-visible,button:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:4px}
::selection{background:var(--navy);color:var(--navy-ink)}
.wrap{max-width:1080px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}

/* ── Masthead ── */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--paper)}
.mast{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--paper) 90%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.mast .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px 28px;flex-wrap:wrap;padding-block:16px}
.brand{display:flex;align-items:baseline;gap:12px;color:var(--ink);text-decoration:none}
.brand b{font-family:var(--display);font-weight:500;font-size:22px;letter-spacing:-.01em;font-variation-settings:"opsz" 72}
.brand span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px 26px;flex-wrap:wrap}
nav a{font-size:14px;font-weight:500;color:var(--soft);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
nav a:hover{color:var(--ink)}
nav a[aria-current="page"]{color:var(--ink);border-color:var(--navy)}

/* ── Shared type ── */
.dateline{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.02em;text-wrap:balance;margin:0;font-variation-settings:"opsz" 144}
h1{font-size:clamp(2.6rem,7vw,4.9rem);line-height:.98}
h1 em,h2 em{font-style:italic;color:var(--navy)}
h2{font-size:clamp(1.7rem,3.6vw,2.4rem);line-height:1.08}
h3{font-size:1.35rem;line-height:1.2;font-variation-settings:"opsz" 48}
p{margin:0}
.lede{font-size:clamp(1.12rem,2vw,1.3rem);line-height:1.6;max-width:var(--measure);color:var(--ink)}
.prose{display:grid;gap:1.1em;max-width:var(--measure)}
.prose p{color:var(--ink)}
.muted{color:var(--soft)}
.label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.endmark{font-family:var(--mono);letter-spacing:.4em;color:var(--soft);text-align:center;padding-block:56px 8px;font-size:14px}

/* ── Buttons ── */
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;text-decoration:none;border-radius:999px;
  padding:12px 22px;border:1px solid var(--navy);transition:background .2s,color .2s,transform .2s;cursor:pointer;font-family:var(--body)}
.btn.solid{background:var(--navy);color:var(--navy-ink)}
.btn.solid:hover{transform:translateY(-1px)}
.btn.line{background:transparent;color:var(--navy)}
.btn.line:hover{background:var(--tint)}

/* ── Page frame ── */
main{padding-block:56px 32px}
.page-head{display:grid;gap:18px;padding-bottom:40px;border-bottom:1px solid var(--rule);margin-bottom:44px}
section+section{margin-top:64px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}

/* ── About hero ── */
.hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:56px;align-items:end}
.hero-copy{display:grid;gap:24px;min-width:0}
.portrait{position:relative;max-width:100%}
.portrait img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:4px;filter:saturate(.85)}
.portrait figcaption{margin-top:10px}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-top:56px}
.fact{padding:22px 20px;display:grid;gap:4px;min-width:0}
.fact+.fact{border-left:1px solid var(--rule)}
.fact b{font-family:var(--display);font-weight:400;font-size:2.1rem;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.two-col{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:40px}
.beyond{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.beyond div{display:grid;gap:8px;align-content:start;border-top:2px solid var(--navy);padding-top:16px}

/* ── Résumé ── */
.resume{background:var(--sheet);border:1px solid var(--rule);border-radius:6px;padding:clamp(24px,5vw,56px);display:grid;gap:40px}
.r-top{display:flex;justify-content:space-between;align-items:end;gap:16px 32px;flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:20px}
.r-top h2{font-size:clamp(2rem,5vw,2.8rem)}
.r-contact{font-size:14px;color:var(--soft);display:grid;gap:2px;text-align:right}
.r-group{display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);gap:24px}
.r-group>h3{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--navy);padding-top:6px}
.r-items{display:grid;gap:26px;min-width:0}
.r-item{display:grid;gap:6px}
.r-row{display:flex;justify-content:space-between;gap:4px 16px;flex-wrap:wrap;align-items:baseline}
.r-row strong{font-size:1.05rem}
.r-row .when{font-family:var(--mono);font-size:12px;color:var(--soft);font-variant-numeric:tabular-nums;white-space:nowrap}
.r-org{font-size:15px;color:var(--soft)}
.r-item ul{margin:4px 0 0;padding-left:18px;display:grid;gap:6px;font-size:15.5px}
.r-item li::marker{color:var(--navy)}
.skills{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:13px;border:1px solid var(--rule);border-radius:999px;padding:5px 12px;color:var(--soft);background:var(--paper)}

/* ── Work index ── */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.filters button{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:transparent;color:var(--soft);
  border:1px solid var(--rule);border-radius:999px;padding:8px 14px;cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tile{display:grid;grid-template-rows:auto 1fr;background:var(--sheet);border:1px solid var(--rule);border-radius:6px;overflow:hidden;
  color:var(--ink);text-decoration:none;transition:transform .25s,border-color .25s,box-shadow .25s}
.tile:hover{transform:translateY(-3px);border-color:var(--navy);box-shadow:0 18px 40px -24px rgba(18,24,38,.45)}
.cover{aspect-ratio:4/3;max-width:100%;background:var(--tint);position:relative;display:grid;place-items:center;overflow:hidden}
.cover .kind{position:absolute;top:14px;left:14px}
.cover .glyph{font-family:var(--display);font-style:italic;font-size:5.5rem;line-height:1;color:var(--navy);opacity:.9;font-variation-settings:"opsz" 144}
.cover.dark{background:var(--navy)}
.cover.dark .glyph,.cover.dark .label{color:var(--navy-ink)}
.tile-body{padding:20px;display:grid;gap:10px;align-content:start}
.tile-body p{font-size:15px;color:var(--soft)}
.tile .more{font-size:14px;font-weight:600;color:var(--navy);margin-top:4px}

/* ── Sample page ── */
.crumbs{font-size:14px}
.crumbs a{text-decoration:none}
.meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--rule);border-radius:6px;background:var(--sheet)}
.meta div{padding:16px 18px;display:grid;gap:4px;min-width:0}
.meta div+div{border-left:1px solid var(--rule)}
.meta dd{margin:0;font-size:15px}
.meta dt{margin:0}
.sample-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:48px;margin-top:44px}
.aside{display:grid;gap:14px;align-content:start;border-left:2px solid var(--navy);padding-left:20px}
.doc{margin-top:44px;border:1px dashed var(--rule);border-radius:6px;background:var(--sheet);padding:44px 24px;display:grid;gap:12px;justify-items:center;text-align:center}
.doc .glyph{font-family:var(--display);font-style:italic;font-size:3rem;color:var(--navy);line-height:1}
.pager{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:56px;padding-top:24px;border-top:1px solid var(--rule)}
.pager a{text-decoration:none;display:grid;gap:2px;max-width:48%}
.pager a.next{text-align:right;margin-left:auto}
.pager b{font-family:var(--display);font-weight:400;font-size:1.2rem;color:var(--ink)}

/* ── Contact ── */
.contact-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.c-box{background:var(--sheet);border:1px solid var(--rule);border-radius:6px;padding:28px;display:grid;gap:14px;align-content:start;min-width:0}
.c-box .addr{font-family:var(--display);font-size:clamp(1.25rem,3vw,1.7rem);word-break:break-word;color:var(--ink)}
.copied{font-size:13px;color:var(--navy);min-height:1.2em}

/* ── Footer ── */
footer{border-top:1px solid var(--rule);margin-top:40px}
footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:24px;font-size:13px;color:var(--soft)}
footer a{color:var(--soft)}

/* ── Load-in: content is visible at rest; this only adds a gentle rise ── */
@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise .7s cubic-bezier(.22,1,.36,1) both}
  .rise.d1{animation-delay:.08s}.rise.d2{animation-delay:.16s}.rise.d3{animation-delay:.24s}
  @keyframes rise{from{transform:translateY(14px)}to{transform:none}}
}

/* ── Responsive ── */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:32px}
  .portrait{max-width:340px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sample-body{grid-template-columns:1fr;gap:32px}
  .meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .meta div:nth-child(3){border-left:0}
  .meta div:nth-child(n+3){border-top:1px solid var(--rule)}
}
@media (max-width:640px){
  body{font-size:16px}
  main{padding-block:36px 24px}
  .facts{grid-template-columns:1fr}
  .fact+.fact{border-left:0;border-top:1px solid var(--rule)}
  .two-col,.r-group{grid-template-columns:1fr;gap:12px}
  .beyond,.grid,.contact-card{grid-template-columns:1fr}
  .r-contact{text-align:left}
  nav ul{gap:4px 18px}
  .brand span{display:none}
}
.facts+section{margin-top:56px}

/* ── Client story pages ── */
.story{display:grid;gap:36px;margin-top:48px}
.story-sec{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:32px;padding-top:24px;border-top:1px solid var(--rule)}
.story-sec .label{color:var(--navy);padding-top:4px}
.story-list{margin:0;padding-left:18px;display:grid;gap:.6em}
.story-list li::marker{color:var(--navy)}
.photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:48px}
.ph-slot{margin:0;display:grid;gap:8px}
.ph-box{aspect-ratio:4/3;max-width:100%;border:1px dashed var(--rule);border-radius:6px;background:var(--sheet);display:grid;place-items:center}
@media (max-width:640px){.story-sec{grid-template-columns:1fr;gap:10px}.photos{grid-template-columns:1fr}}

/* ── Client work v2 ── */
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.cover.photo{background:var(--ink)}
.cover.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cover.photo .kind{z-index:1;background:var(--sheet);color:var(--ink);padding:5px 9px;border-radius:999px}
.gallery{display:grid;gap:14px;margin-top:40px}
.gallery.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.gallery.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gallery.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gallery figure{margin:0;display:grid;gap:8px;align-content:start;min-width:0}
.gallery img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px;background:var(--tint)}
.gallery.g3 img{aspect-ratio:4/3}
.gallery.empty .ph-box{aspect-ratio:4/3}
.exhibits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.exhibits figure{margin:0;display:grid;gap:8px;align-content:start;min-width:0}
.exhibits img{width:100%;border:1px solid var(--rule);border-radius:4px;box-shadow:0 14px 30px -22px rgba(18,24,38,.5);background:#fff}
@media (max-width:900px){.gallery.g4,.exhibits{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid.two,.gallery.g3,.gallery.g2{grid-template-columns:1fr}}
.story+section{margin-top:64px}
.team{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.team li{display:grid;gap:2px;padding:12px 14px;border:1px solid var(--rule);border-radius:6px;background:var(--sheet)}
.team li b{font-weight:600;font-size:15px}
.team li span{font-size:13px;color:var(--soft)}
.team li.me{border-color:var(--navy);background:var(--tint)}
.gallery.g2 img{aspect-ratio:3/2}
.kind-group+.kind-group{margin-top:36px}
.kind-head{color:var(--navy);margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
.previews{display:grid;gap:18px;margin-top:44px;align-items:start}
.previews.p1{grid-template-columns:minmax(0,640px);justify-content:center}
.previews.p2{grid-template-columns:repeat(2,minmax(0,1fr))}
.previews.p4{grid-template-columns:repeat(4,minmax(0,1fr))}
.previews figure{margin:0;display:grid;gap:8px;min-width:0}
.previews img{width:100%;border:1px solid var(--rule);border-radius:4px;background:#fff;box-shadow:0 18px 40px -28px rgba(18,24,38,.55);transition:transform .25s}
.previews a:hover img{transform:translateY(-3px)}
.sample-body .btns{margin-top:8px}
.cover.photo img{object-position:top}
@media (max-width:900px){.previews.p4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.previews.p2{grid-template-columns:1fr}}
.k-design .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.k-design .tile-body p{font-size:14px}
@media (max-width:900px){.k-design .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.k-design .grid{grid-template-columns:1fr}}
/* ── Work samples v3: jump nav + category heads ── */
.jump{display:flex;gap:8px;flex-wrap:wrap;margin:-4px 0 28px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 64px);z-index:5;padding-block:10px;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px)}
.jump a{display:inline-flex;gap:8px;align-items:center;font-size:14px;font-weight:600;text-decoration:none;color:var(--ink);border:1px solid var(--rule);border-radius:999px;padding:8px 16px;background:var(--sheet);transition:border-color .2s,color .2s}
.jump a:hover{border-color:var(--navy);color:var(--navy)}
.jump a span{font-family:var(--mono);font-size:11px;color:var(--soft)}
.kind-group{scroll-margin-top:140px}
.kind-group+.kind-group{margin-top:56px}
.kind-head{display:flex;justify-content:space-between;align-items:baseline;gap:6px 24px;flex-wrap:wrap;margin-bottom:18px;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.kind-head h3{font-size:1.7rem}
.kind-head p{font-size:15px}
.k-writing .grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.k-writing .tile-body{padding:16px}
.k-writing .tile-body h3{font-size:1.1rem}
.k-writing .tile-body p{font-size:13.5px}
.k-research .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.cover.photo{background:var(--tint)}
@media (max-width:1000px){.k-writing .grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.k-writing .grid,.k-research .grid{grid-template-columns:1fr}.jump{top:calc(env(safe-area-inset-top,0px) + 96px)}}
.gallery.tall img{aspect-ratio:4/5;object-position:center 30%}
.gallery.lead{grid-template-columns:2fr 1fr}
.gallery.lead figure:first-child img{aspect-ratio:auto;height:100%;max-height:520px}
.gallery.lead img{aspect-ratio:3/4;object-position:center 30%}
@media (max-width:640px){.gallery.lead{grid-template-columns:1fr}}
.gallery.g5.mosaic{grid-template-columns:1.5fr 1fr 1fr;align-items:start}
.gallery.mosaic figure:first-child{grid-row:span 2}
.gallery.mosaic figure:first-child img{aspect-ratio:4/5}
.gallery.mosaic figure:not(:first-child) img{aspect-ratio:4/3}
@media (max-width:640px){.gallery.g5.mosaic{grid-template-columns:1fr 1fr}.gallery.mosaic figure:first-child{grid-column:1/-1;grid-row:auto}}
/* ── Video ── */
.videos{display:grid;gap:18px;margin-top:44px}
.videos.wide{grid-template-columns:minmax(0,880px);justify-content:center}
.videos.short{grid-template-columns:repeat(5,minmax(0,1fr))}
.vid{margin:0;display:grid;gap:8px;min-width:0}
.vframe{position:relative;border-radius:8px;overflow:hidden;background:var(--navy);max-width:100%}
.vid.wide .vframe{aspect-ratio:16/9}
.vid.short .vframe{aspect-ratio:9/16}
.vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1}
.vfallback{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;color:var(--navy-ink);text-decoration:none;font-size:14px;font-weight:600}
.vfallback .play{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;border:2px solid currentColor;font-size:20px;padding-left:4px}
.vid figcaption a{font-size:13px;text-decoration:none}
@media (max-width:900px){.videos.short{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.videos.short{grid-template-columns:repeat(2,minmax(0,1fr))}}
.k-video .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.k-video .cover .glyph{font-style:normal;font-family:var(--mono);font-size:3.4rem}
@media (max-width:640px){.k-video .grid{grid-template-columns:1fr}}

/* ════════════════════════════════════════════════════════════════
   THEME: CONCRETE & STEEL
   Layout: warm board-formed concrete slabs, a charcoal panel set on
   the concrete, thin black "steel window" frames, square corners,
   wide uppercase sans headlines mixed with an italic serif.
   ════════════════════════════════════════════════════════════════ */
:root{
  --paper:#ECE8E1; --sheet:#F7F5F1; --ink:#1C1B19; --soft:#5F5A53; --rule:rgba(28,27,25,.18);
  --navy:#7A4A2E; --navy-ink:#FFFFFF; --tint:rgba(122,74,46,.08);
  --slab:#D2CBBF; --panel:#2A2826; --panel-ink:#EFEBE4; --panel-soft:#B9B2A8; --steel:#141414;
  --display:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --body:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#1B1A18;--sheet:#242220;--ink:#ECE7DF;--soft:#A8A198;--rule:rgba(236,231,223,.16);
  --navy:#D19B70;--navy-ink:#1B1A18;--tint:rgba(209,155,112,.1);
  --slab:#57514A;--panel:#121110;--panel-ink:#ECE7DF;--panel-soft:#A8A198;--steel:#0A0A0A;color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#1B1A18;--sheet:#242220;--ink:#ECE7DF;--soft:#A8A198;--rule:rgba(236,231,223,.16);
  --navy:#D19B70;--navy-ink:#1B1A18;--tint:rgba(209,155,112,.1);
  --slab:#57514A;--panel:#121110;--panel-ink:#ECE7DF;--panel-soft:#A8A198;--steel:#0A0A0A;color-scheme:dark}

html,body{overflow-x:clip}
body{font-family:var(--body);font-size:16.5px;line-height:1.65}
::selection{background:var(--ink);color:var(--paper)}

/* type */
h1{font-family:var(--display);font-stretch:125%;font-weight:600;text-transform:uppercase;letter-spacing:.005em;line-height:.98;font-size:clamp(2.1rem,5.6vw,4.4rem);font-variation-settings:normal}
h1 em,h2 em{font-family:var(--serif);font-stretch:100%;font-weight:400;font-style:italic;text-transform:none;letter-spacing:0;color:var(--navy)}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,4vw,2.7rem);letter-spacing:-.01em;line-height:1.05;font-variation-settings:normal}
h3{font-family:var(--serif);font-weight:400;font-size:1.45rem;letter-spacing:0;font-variation-settings:normal}
.dateline,.label{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.dateline{color:var(--navy)}
.label{color:var(--soft)}

/* masthead */
body::before{background:var(--paper)}
.mast{background:color-mix(in srgb,var(--paper) 94%,transparent);border-bottom:1px solid var(--ink)}
.brand b{font-family:var(--display);font-stretch:125%;font-weight:600;font-size:15px;letter-spacing:.08em;text-transform:uppercase;font-variation-settings:normal}
.brand span{font-family:var(--display);font-size:10px;letter-spacing:.2em}
nav a{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
nav a[aria-current="page"]{border-color:var(--ink)}

/* buttons: square, steel */
.btn{border-radius:0;font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:13px 20px;border-color:var(--ink)}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn.line{color:var(--ink)}
.btn.line:hover{background:var(--ink);color:var(--paper)}
a{color:var(--navy)}

/* full-bleed concrete slabs */
main{padding-block:0 32px}
.bleed{width:100vw;margin-left:calc(50% - 50vw)}
.slab{background-color:var(--slab);background-image:url("img/concrete.jpg");background-size:cover;background-position:center;background-blend-mode:multiply}
.page-head.slab{display:block;padding-block:clamp(44px,7vw,80px);margin-bottom:48px;border-bottom:1px solid var(--ink)}
.page-head .ph-in{display:grid;gap:16px}
.page-head .lede{max-width:60ch;color:var(--ink)}
.crumbs{margin-top:40px}

/* About hero: charcoal panel set on concrete, photo in a steel frame */
.hero.slab{display:block;padding-block:clamp(40px,7vw,88px);border-bottom:1px solid var(--ink)}
.hero-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:end}
.panel{position:relative;z-index:2;background:var(--panel);color:var(--panel-ink);padding:clamp(28px,4.5vw,60px);margin-right:-48px;display:grid;gap:22px}
.panel .dateline{color:var(--panel-soft)}
.panel h1{color:var(--panel-ink)}
.panel h1 em{color:#D8B596}
.panel .lede{color:var(--panel-ink);max-width:48ch;font-size:clamp(1.02rem,1.6vw,1.15rem)}
.panel .btn.solid{background:var(--panel-ink);color:var(--panel);border-color:var(--panel-ink)}
.panel .btn.line{color:var(--panel-ink);border-color:var(--panel-ink)}
.panel .btn.line:hover{background:var(--panel-ink);color:var(--panel)}
.portrait.frame{margin:0;position:relative;z-index:1}
.portrait img{border-radius:0;filter:none;border:3px solid var(--steel);aspect-ratio:4/5;object-fit:cover;object-position:center 20%}
.portrait figcaption{margin-top:10px;color:var(--ink)}

/* About body + directory */
.about-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);margin-top:64px;align-items:start}
.about-copy{display:grid;gap:16px}
.about-copy .lede{font-size:1.12rem}
.directory{display:grid;border-top:2px solid var(--ink)}
.directory .label{padding:12px 0 10px;border-bottom:1px solid var(--ink)}
.directory a{display:grid;grid-template-columns:40px minmax(0,1fr) 24px;grid-template-rows:auto auto;column-gap:4px;padding:14px 0;border-bottom:1px solid var(--ink);color:var(--ink);text-decoration:none;transition:padding .25s,background .25s}
.directory a span{grid-row:1/3;font-family:var(--mono);font-size:12px;color:var(--soft);padding-top:4px}
.directory a{font-family:var(--serif);font-size:1.45rem;line-height:1.15}
.directory a small{grid-column:2;font-family:var(--display);font-size:12px;color:var(--soft);letter-spacing:.02em}
.directory a i{grid-column:3;grid-row:1/3;align-self:center;font-style:normal;font-family:var(--display)}
.directory a:hover{padding-left:10px;background:var(--tint)}

/* facts / beyond */
.facts{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.fact+.fact{border-left:1px solid var(--ink)}
.fact b{font-family:var(--serif);font-size:2.6rem}
.beyond div{border-top:2px solid var(--ink)}

/* section + category heads */
.section-head{border-bottom:1px solid var(--ink);padding-bottom:12px}
.kind-head{border-bottom:1px solid var(--ink)}
.kind-head h3{font-family:var(--display);font-stretch:125%;font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:1.05rem}
.jump{background:color-mix(in srgb,var(--paper) 94%,transparent)}
.jump a{border-radius:0;border-color:var(--ink);font-family:var(--display);font-size:12px;letter-spacing:.12em;text-transform:uppercase;background:transparent}
.jump a:hover{background:var(--ink);color:var(--paper)}

/* tiles: steel-framed */
.tile{border-radius:0;border:1px solid var(--ink);background:var(--sheet)}
.tile:hover{transform:none;border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.tile .more{font-family:var(--display);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.cover{border-bottom:1px solid var(--ink)}
.cover.dark{background:var(--panel)}
.cover.dark .glyph,.cover.dark .label{color:var(--panel-ink)}
.cover .glyph{font-family:var(--serif)}
.cover.photo .kind{border-radius:0;background:var(--sheet);color:var(--ink);border:1px solid var(--ink)}

/* frames everywhere */
.resume,.meta,.c-box,.doc,.team li{border-radius:0}
.resume{border:1px solid var(--ink)}
.r-top{border-bottom:2px solid var(--ink)}
.r-top h2{font-family:var(--display);font-stretch:125%;font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(1.6rem,4vw,2.3rem)}
.r-group>h3{font-family:var(--display);font-weight:600;letter-spacing:.2em;color:var(--ink)}
.r-item li::marker{color:var(--ink)}
.chip{border-radius:0;border-color:var(--ink);color:var(--ink);background:transparent;font-size:12px}
.meta{border:1px solid var(--ink)}
.meta div+div{border-left:1px solid var(--ink)}
.aside{border-left:2px solid var(--ink)}
.story-sec{border-top:1px solid var(--ink)}
.story-sec .label{color:var(--ink)}
.story-list li::marker{color:var(--ink)}
.team li{border-color:var(--ink);background:var(--sheet)}
.team li.me{background:var(--panel);border-color:var(--panel)}
.team li.me b,.team li.me span{color:var(--panel-ink)}
.gallery img,.previews img,.exhibits img{border-radius:0;border:1px solid var(--ink);box-shadow:none}
.c-box{border:1px solid var(--ink)}
.c-box .addr{font-family:var(--serif)}
.pager{border-top:1px solid var(--ink)}
.pager b{font-family:var(--serif);font-size:1.3rem}
footer{border-top:1px solid var(--ink)}
.endmark{font-family:var(--display);letter-spacing:.6em}

@media (max-width:900px){
  .hero-in{grid-template-columns:1fr}
  .panel{margin-right:0;margin-bottom:-32px}
  .portrait.frame{max-width:420px;justify-self:end;width:85%}
  .about-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .portrait.frame{width:100%;justify-self:stretch}
  .meta div+div{border-left:0}
}

/* ════════════════════════════════════════════════════════════════
   THEME v2: CONCRETE, WALNUT & FOREST
   Poster-scale caps on a concrete slab (from Studio Poster), a walnut
   panel and steel-framed photo (from Concrete & Steel), a forest-green
   experience strip, and material tiles for wayfinding.
   ════════════════════════════════════════════════════════════════ */
:root{
  --paper:#E9E5DE; --sheet:#F4F1EB; --ink:#1C1A17; --soft:#5E5850; --rule:rgba(28,26,23,.18);
  --navy:#1F3B31; --navy-ink:#F4F1EB; --tint:rgba(31,59,49,.08);
  --slab:#CBC3B6; --slab-dark:#8C857B; --walnut:#4A3121; --walnut-ink:#F1E9DF; --forest:#1F3B31; --forest-ink:#E8EEE9;
  --sand:#D9CDB9; --panel:#4A3121; --panel-ink:#F1E9DF; --panel-soft:#CDB9A5; --steel:#141414; --poster-ink:#FBF9F6;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#181714;--sheet:#211F1C;--ink:#ECE6DD;--soft:#A79F95;--rule:rgba(236,230,221,.16);
  --navy:#8DB5A2;--navy-ink:#181714;--tint:rgba(141,181,162,.1);
  --slab:#5A544C;--slab-dark:#4A453F;--walnut:#3A271B;--walnut-ink:#F1E9DF;--forest:#18302A;--forest-ink:#E8EEE9;
  --sand:#4B4236;--panel:#3A271B;--panel-ink:#F1E9DF;--panel-soft:#C4AF9A;--steel:#0A0A0A;--poster-ink:#FBF9F6;color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#181714;--sheet:#211F1C;--ink:#ECE6DD;--soft:#A79F95;--rule:rgba(236,230,221,.16);
  --navy:#8DB5A2;--navy-ink:#181714;--tint:rgba(141,181,162,.1);
  --slab:#5A544C;--slab-dark:#4A453F;--walnut:#3A271B;--walnut-ink:#F1E9DF;--forest:#18302A;--forest-ink:#E8EEE9;
  --sand:#4B4236;--panel:#3A271B;--panel-ink:#F1E9DF;--panel-soft:#C4AF9A;--steel:#0A0A0A;--poster-ink:#FBF9F6;color-scheme:dark}

.btn.solid{background:var(--forest);color:var(--forest-ink);border-color:var(--forest)}
.btn.line{color:var(--ink);border-color:var(--ink)}
.btn.line:hover{background:var(--forest);border-color:var(--forest);color:var(--forest-ink)}
.dateline{color:var(--forest)}

/* page heads: darker concrete, poster caps in white */
.page-head.slab{background-color:var(--slab-dark);color:var(--poster-ink);border-bottom:0}
.page-head.slab .dateline{color:var(--poster-ink);opacity:.85}
.page-head.slab h1{color:var(--poster-ink);font-weight:700;font-size:clamp(2.2rem,6vw,4.8rem);line-height:.95}
.page-head.slab h1 em{color:var(--poster-ink);font-size:1.08em}
.page-head.slab .lede{color:var(--poster-ink)}

/* About hero */
.hero.poster{background-color:var(--slab-dark);color:var(--poster-ink);padding-block:clamp(40px,6vw,72px) 0;border-bottom:0;overflow:visible}
.poster .hero-in{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr);grid-template-rows:auto auto;column-gap:clamp(20px,4vw,48px);align-items:end}
.poster-type{grid-column:1;grid-row:1;display:grid;gap:18px;padding-bottom:clamp(24px,4vw,40px)}
.poster-type .dateline{color:var(--poster-ink);opacity:.85}
.poster-type h1{color:var(--poster-ink);font-weight:700;font-size:clamp(2.6rem,8.2vw,6.6rem);line-height:.9;letter-spacing:0}
.poster .portrait.frame{grid-column:2;grid-row:1/3;align-self:end;margin-bottom:-56px;z-index:3}
.poster .portrait img{aspect-ratio:3/4;border:3px solid var(--steel);box-shadow:0 30px 60px -30px rgba(0,0,0,.55)}
.poster .panel{grid-column:1;grid-row:2;margin:0 0 -56px;background:var(--walnut);color:var(--walnut-ink);display:grid;gap:20px;padding:clamp(22px,3.4vw,40px);max-width:640px}
.poster .panel .lede{color:var(--walnut-ink);font-size:clamp(1.02rem,1.6vw,1.18rem);max-width:50ch}
.poster .panel .btn.solid{background:var(--walnut-ink);color:var(--walnut);border-color:var(--walnut-ink)}
.poster .panel .btn.line{color:var(--walnut-ink);border-color:var(--walnut-ink)}
.poster .panel .btn.line:hover{background:var(--walnut-ink);color:var(--walnut)}

/* forest experience strip */
.exp-strip{background:var(--forest);color:var(--forest-ink);padding-block:96px 28px}
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.strip a{display:grid;gap:4px;padding:14px 16px 16px;color:var(--forest-ink);text-decoration:none;border-left:1px solid rgba(232,238,233,.18);transition:background .25s}
.strip a:first-child{border-left:0;padding-left:0}
.strip a:hover{background:rgba(232,238,233,.06)}
.strip img{aspect-ratio:16/10;object-fit:cover;width:100%;margin-bottom:10px;border:1px solid rgba(232,238,233,.25)}
.strip b{font-family:var(--display);font-stretch:125%;font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:13px}
.strip span{font-size:13px;opacity:.75}

/* material tiles */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tiles .t{min-height:150px;padding:18px;display:flex;flex-direction:column;justify-content:space-between;gap:10px;text-decoration:none;color:var(--ink);transition:outline-color .2s;outline:2px solid transparent;outline-offset:-2px}
.tiles .t:hover{outline-color:var(--ink)}
.tiles .t b{font-family:var(--display);font-stretch:125%;font-weight:700;text-transform:uppercase;font-size:clamp(1rem,1.8vw,1.25rem);letter-spacing:.03em;line-height:1.05}
.tiles .t small{font-size:12.5px;opacity:.8}
.tiles .t .label{color:inherit;opacity:.7}
.tiles .concrete{background-color:var(--slab)}
.tiles .walnut{background:var(--walnut);color:var(--walnut-ink)}
.tiles .forest{background:var(--forest);color:var(--forest-ink)}
.tiles .sand{background:var(--sand)}

/* accents: walnut panels, forest links */
.team li.me{background:var(--walnut);border-color:var(--walnut)}
.team li.me b,.team li.me span{color:var(--walnut-ink)}
.cover.dark{background:var(--walnut)}
.cover.dark .glyph,.cover.dark .label{color:var(--walnut-ink)}
.k-writing .cover.photo{background:var(--forest)}
.jump a:hover{background:var(--forest);border-color:var(--forest);color:var(--forest-ink)}
.directory a:hover{background:var(--tint)}

@media (max-width:900px){
  .poster .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,.62fr)}
  .poster .portrait.frame{grid-row:1;margin-bottom:24px;align-self:end}
  .poster .panel{grid-column:1/-1;max-width:none}
  .strip{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:12px}
  .strip a:nth-child(3){border-left:0;padding-left:0}
}
@media (max-width:640px){
  .poster .hero-in{grid-template-columns:1fr}
  .poster-type,.poster .portrait.frame,.poster .panel{grid-column:1;grid-row:auto}
  .poster .portrait.frame{max-width:300px;margin-bottom:24px}
  .tiles .t{min-height:120px}
}
.portrait img,.gallery img,.previews img{height:auto}
section.exp-strip{margin-top:0}
@media (min-width:901px){.poster .portrait.frame{max-width:340px;justify-self:end;width:100%}.poster .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,340px)}}
.strip a{padding:14px 16px 16px}
.strip a:first-child{padding-left:0}
.strip a:last-child{padding-right:0}
.about-grid{margin-top:72px}
.strip{gap:24px}
.strip a,.strip a:first-child,.strip a:last-child{padding:0;border-left:0}
.strip a:hover{background:none}
.strip a:hover img{outline:2px solid var(--forest-ink);outline-offset:-2px}
@media (max-width:900px){.strip a:nth-child(3){padding:0}}

@media (max-width:900px){
  .poster .hero-in{grid-template-columns:1fr;row-gap:0}
  .poster-type{grid-column:1;grid-row:1}
  .poster .portrait.frame{grid-column:1;grid-row:2;justify-self:start;width:min(320px,70%);margin:0 0 -40px auto;align-self:start}
  .poster .panel{grid-column:1;grid-row:3;margin:0 0 -48px}
  .poster-type h1{font-size:clamp(2.6rem,12vw,5rem)}
}
@media (max-width:640px){.poster .portrait.frame{width:72%;margin:0 0 -32px auto}}
@media (max-width:900px){.poster .portrait.frame{margin:0 0 18px auto}.poster .panel{position:relative;z-index:4}}
@media (max-width:640px){.poster .portrait.frame{margin:0 0 18px auto}}

/* ════════════════════════════════════════════════════════════════
   THEME v3: PALE CONCRETE
   Bone-white page; one pale concrete band per page carrying a poster
   headline in espresso; forest green only as hairlines, small squares
   and active underlines.
   ════════════════════════════════════════════════════════════════ */
:root{
  --paper:#F7F5F1; --sheet:#FFFFFF; --ink:#2B1D15; --soft:#6E645B; --rule:#E1DBD2;
  --navy:#2B1D15; --navy-ink:#F7F5F1; --tint:rgba(43,29,21,.04);
  --slab:#E6E1D9; --slab-dark:#E6E1D9; --fern:#2F5A47; --steel:#2B1D15; --poster-ink:#2B1D15;
  --walnut:#2B1D15; --walnut-ink:#F7F5F1; --forest:#2F5A47; --forest-ink:#F7F5F1; --panel:#2B1D15; --panel-ink:#F7F5F1;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#171513;--sheet:#1F1C19;--ink:#EDE6DC;--soft:#A89E93;--rule:#38322C;
  --navy:#EDE6DC;--navy-ink:#171513;--tint:rgba(237,230,220,.05);
  --slab:#2C2824;--slab-dark:#2C2824;--fern:#86B39D;--steel:#EDE6DC;--poster-ink:#EDE6DC;
  --walnut:#EDE6DC;--walnut-ink:#171513;--forest:#86B39D;--forest-ink:#171513;--panel:#2C2824;--panel-ink:#EDE6DC;color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#171513;--sheet:#1F1C19;--ink:#EDE6DC;--soft:#A89E93;--rule:#38322C;
  --navy:#EDE6DC;--navy-ink:#171513;--tint:rgba(237,230,220,.05);
  --slab:#2C2824;--slab-dark:#2C2824;--fern:#86B39D;--steel:#EDE6DC;--poster-ink:#EDE6DC;
  --walnut:#EDE6DC;--walnut-ink:#171513;--forest:#86B39D;--forest-ink:#171513;--panel:#2C2824;--panel-ink:#EDE6DC;color-scheme:dark}

/* hairlines, not heavy rules */
.mast{border-bottom:1px solid var(--rule)}
nav a[aria-current="page"]{border-color:var(--fern);color:var(--ink)}
.sq{display:inline-block;width:7px;height:7px;background:var(--fern);margin-right:10px;vertical-align:1px}
.dateline{color:var(--soft)}
a{color:var(--ink)}
.prose a,.r-contact a,.c-box a.addr{text-decoration-color:var(--fern)}

/* buttons: espresso */
.btn.solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.line{color:var(--ink);border-color:var(--ink)}
.btn.line:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* concrete bands: pale, espresso type */
.slab{background-color:var(--slab)}
.page-head.slab{background-color:var(--slab);color:var(--ink);border-bottom:0;padding-block:clamp(48px,8vw,96px)}
.page-head.slab .dateline{color:var(--soft);opacity:1}
.page-head.slab h1{color:var(--ink);font-weight:700}
.page-head.slab h1 em{color:var(--ink)}
.page-head.slab .lede{color:var(--soft)}
.page-head .dateline::before{content:"";display:inline-block;width:7px;height:7px;background:var(--fern);margin-right:10px;vertical-align:1px}

/* About hero */
.hero.poster{background-color:var(--slab);color:var(--ink);padding-block:clamp(48px,8vw,96px)}
@media (min-width:901px){.poster .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,280px)}.poster .portrait.frame{max-width:280px}}
.poster-type{padding-bottom:0}
.poster-type .dateline{color:var(--soft);opacity:1}
.poster-type h1{color:var(--ink);font-size:clamp(2.6rem,8vw,6.2rem)}
.poster .portrait.frame{grid-row:1;margin-bottom:0;align-self:end}
.poster .portrait img{border:1px solid var(--ink);box-shadow:none}
section.under{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:center;margin-top:0;padding-block:clamp(28px,4vw,44px);border-bottom:1px solid var(--rule)}
.under .lede{margin:0;color:var(--soft);max-width:60ch}

/* experience row on white */
section.exp-row{margin-top:clamp(48px,6vw,80px)}
.exp-row .section-head{border-bottom:1px solid var(--rule)}
.exp-row .section-head h2{font-family:var(--display);font-stretch:125%;font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:1rem}
.exp-row .strip{gap:clamp(16px,2.4vw,28px)}
.exp-row .strip a{color:var(--ink)}
.exp-row .strip img{border:0;border-top:2px solid var(--fern);margin-bottom:12px}
.exp-row .strip a:hover img{outline:1px solid var(--ink);outline-offset:3px}
.exp-row .strip span{color:var(--soft);opacity:1}

/* wayfinding tiles: outlined, light */
.tiles .t{background:var(--sheet);color:var(--ink);border:1px solid var(--rule);outline:0;transition:border-color .2s}
.tiles .t:hover{border-color:var(--ink)}
.tiles .t .label{color:var(--fern);opacity:1;font-family:var(--mono);letter-spacing:.04em}
.tiles .t small{color:var(--soft);opacity:1}

/* everything else: lighter lines */
.section-head,.kind-head{border-bottom:1px solid var(--rule)}
.kind-head h3{color:var(--ink)}
.tile,.resume,.meta,.c-box,.team li{border-color:var(--rule)}
.tile:hover{box-shadow:none;border-color:var(--ink)}
.cover{border-bottom:1px solid var(--rule)}
.cover.dark{background:var(--slab)}
.cover.dark .glyph,.cover.dark .label{color:var(--ink)}
.k-writing .cover.photo{background:var(--slab)}
.meta div+div{border-left:1px solid var(--rule)}
.story-sec{border-top:1px solid var(--rule)}
.story-sec .label{color:var(--fern)}
.aside{border-left:1px solid var(--fern)}
.team li.me{background:var(--sheet);border-color:var(--fern);box-shadow:inset 3px 0 0 var(--fern)}
.team li.me b,.team li.me span{color:var(--ink)}
.r-top{border-bottom:1px solid var(--ink)}
.r-group>h3{color:var(--fern)}
.r-item li::marker,.story-list li::marker{color:var(--fern)}
.chip{border-color:var(--rule)}
.gallery img,.previews img,.exhibits img{border-color:var(--rule)}
.facts,.fact+.fact,.pager,footer,.directory a,.directory{border-color:var(--rule)}
.jump{background:color-mix(in srgb,var(--paper) 94%,transparent)}
.jump a{border-color:var(--rule)}
.jump a:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.jump a span{color:var(--fern)}
.endmark{color:var(--fern)}
.tile .more{color:var(--ink)}

@media (max-width:900px){
  .poster .hero-in{grid-template-columns:1fr}
  .poster .portrait.frame{grid-row:2;width:min(260px,64%);margin:24px 0 0 auto}
  section.under{grid-template-columns:1fr}
}
.slab{background-image:linear-gradient(rgba(238,234,227,.5),rgba(238,234,227,.5)),url("img/concrete.jpg");background-blend-mode:normal,multiply}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .slab{background-image:linear-gradient(rgba(23,21,19,.72),rgba(23,21,19,.72)),url("img/concrete.jpg")}}
:root[data-theme="dark"] .slab{background-image:linear-gradient(rgba(23,21,19,.72),rgba(23,21,19,.72)),url("img/concrete.jpg")}
.tiles .t small{text-transform:none;letter-spacing:0;font-family:var(--body);font-size:13px}

/* ── lighter pass ── */
:root{--paper:#FCFBF9;--sheet:#FFFFFF;--slab:#F1EEE9;--rule:#ECE7E0;--soft:#7A7068}
.slab{background-color:#F1EEE9;background-image:linear-gradient(rgba(246,244,240,.78),rgba(246,244,240,.78)),url("img/concrete.jpg");background-blend-mode:normal,multiply}
.mast{background:color-mix(in srgb,#FFFFFF 94%,transparent)}
body::before{background:#FFFFFF}
.cover.dark,.k-writing .cover.photo,.cover{background-color:#F4F1EC}
.cover.photo{background:#F4F1EC}
.tile,.tiles .t,.resume,.meta,.c-box,.team li{background:#FFFFFF}
.poster .portrait img{border-color:#CFC7BD}
.exp-row .strip a:hover img{outline-color:#CFC7BD}
.chip{background:#FFFFFF}

/* ── match option 2: real concrete band, white open page ── */
:root{--paper:#FFFFFF;--slab:#E6E1D9}
.slab{background-color:#E6E1D9;background-image:url("img/concrete.jpg");background-blend-mode:multiply}
.hero.poster{padding-block:clamp(56px,9vw,110px)}
section.under{padding-block:clamp(36px,5vw,56px)}
section.exp-row{margin-top:clamp(64px,8vw,104px)}
.about-grid{margin-top:clamp(72px,9vw,112px)}

/* ── contrast fix: dark text everywhere, no light-on-light ── */
:root{--ink:#241913;--soft:#3F362F;--rule:#CFC6BA}
.slab .lede,.slab .dateline,.page-head.slab .lede,.page-head.slab .dateline,.poster-type .dateline{color:var(--ink);opacity:1}
.page-head.slab .lede{font-weight:500}
.under .lede{color:var(--ink)}
.label,.muted,.tile-body p,.r-org,.r-row .when,.strip span,.tiles .t small,.exp-row .strip span,.lede.muted{color:var(--soft)}
.section-head h2,.section-head h2 em{font-family:var(--display);font-stretch:125%;font-weight:600;font-style:normal;text-transform:uppercase;letter-spacing:.08em;font-size:1rem;color:var(--ink)}
.tile,.tiles .t,.resume,.meta,.c-box,.team li,.chip,.jump a{border-color:var(--rule)}
.cover.photo .kind{border-color:var(--ink)}

/* ── one look for everyone: the site is a fixed light design (concrete + white), even when the viewer's device is in dark mode ── */
:root,:root[data-theme="dark"]{
  --paper:#FFFFFF;--sheet:#FFFFFF;--ink:#241913;--soft:#3F362F;--rule:#CFC6BA;
  --navy:#241913;--navy-ink:#FFFFFF;--tint:rgba(36,25,19,.04);
  --slab:#E6E1D9;--slab-dark:#E6E1D9;--fern:#2F5A47;--steel:#241913;--poster-ink:#241913;
  --walnut:#241913;--walnut-ink:#FFFFFF;--forest:#2F5A47;--forest-ink:#FFFFFF;--panel:#241913;--panel-ink:#FFFFFF;--panel-soft:#CDB9A5;
  color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#FFFFFF;--sheet:#FFFFFF;--ink:#241913;--soft:#3F362F;--rule:#CFC6BA;
  --navy:#241913;--navy-ink:#FFFFFF;--tint:rgba(36,25,19,.04);
  --slab:#E6E1D9;--slab-dark:#E6E1D9;--fern:#2F5A47;--steel:#241913;--poster-ink:#241913;
  --walnut:#241913;--walnut-ink:#FFFFFF;--forest:#2F5A47;--forest-ink:#FFFFFF;--panel:#241913;--panel-ink:#FFFFFF;--panel-soft:#CDB9A5;
  color-scheme:light}
  :root:not([data-theme="light"]) .slab{background-image:url("img/concrete.jpg")}}
:root[data-theme="dark"] .slab{background-image:url("img/concrete.jpg")}

/* ── logos ── */
.logo{display:block;height:22px;width:auto;max-width:120px;object-fit:contain;object-position:left center}
.logo.lg-jps,.logo.lg-alphasights{height:24px}
.exp-row .strip .logo{margin:0 0 10px;border:0;outline:0}
.exp-row .strip a:hover .logo{outline:0}
.tile-body .logo{margin-bottom:2px}
.head-logo{display:flex;align-items:center;height:30px}
.head-logo .logo{height:30px;max-width:160px}
.head-logo .logo.lg-jps{height:34px}
.under-copy{display:grid;gap:16px;min-width:0}
.next{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:0;padding-bottom:14px;border-bottom:1px solid var(--rule)}
.next .logo{height:22px;display:inline-block}
.next b{font-family:var(--display);font-stretch:125%;font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:13px}
.next .muted{font-size:14px}
/* logos v2: whole logo, small, never cropped */
.logo{height:18px;width:auto;max-width:none;object-fit:initial;background:#fff}
.logo.lg-jps,.logo.lg-alphasights{height:20px}
.logo.lg-kestra,.logo.lg-roxo{height:16px}
.head-logo{height:auto}
.head-logo .logo{height:26px;max-width:none}
.head-logo .logo.lg-kestra,.head-logo .logo.lg-roxo{height:22px}
.next .logo{height:18px}
.strip img.logo,.exp-row .strip img.logo{width:auto;aspect-ratio:auto;object-fit:contain;height:18px;margin:0 0 8px;border:0;outline:0}
.strip img.logo.lg-kestra,.strip img.logo.lg-roxo{height:15px}
.strip img.logo.lg-jps{height:20px}
.exp-row .strip a:hover img.logo{outline:0}
.strip img.logo.lg-kestra,.strip img.logo.lg-roxo,.logo.lg-kestra,.logo.lg-roxo{height:20px}
.head-logo .logo.lg-kestra,.head-logo .logo.lg-roxo{height:26px}

/* ── home: hero stays put, the page slides over it ── */
.over{position:relative;z-index:2;background:var(--paper);width:100vw;margin-left:calc(50% - 50vw);padding-left:max(20px,env(safe-area-inset-left,0px),calc((100vw - 1080px)/2 + 20px));padding-right:max(20px,env(safe-area-inset-right,0px),calc((100vw - 1080px)/2 + 20px));box-shadow:0 -24px 40px -28px rgba(36,25,19,.35)}
.over>section.under{margin-top:0}
.endmark{position:relative;z-index:2;background:var(--paper);width:100vw;margin-left:calc(50% - 50vw);margin-bottom:0}
main{padding-bottom:0}
@media (min-width:901px){
  .hero.poster{position:sticky;top:calc(env(safe-area-inset-top,0px) + 60px);z-index:1}
}
@media (prefers-reduced-motion:reduce){.hero.poster{position:relative;top:auto}}
/* concrete band behind About Me */
section.about-band{margin-top:clamp(64px,8vw,104px);padding-block:clamp(48px,7vw,88px)}
.about-band .about-grid{margin-top:0}
.about-band .tiles .t{background:#FFFFFF}
.about-band .label{color:var(--ink)}
.about-band + .facts{margin-top:clamp(48px,6vw,72px)}

/* ── consistent: every concrete band is a window onto one fixed concrete wall; all content scrolls the same ── */
@media (min-width:901px){.hero.poster{position:relative;top:auto;z-index:auto}}
.over{box-shadow:none;background:transparent}
.slab,.hero.poster,.page-head.slab,.about-band{background-attachment:fixed;background-size:cover;background-position:center}
@media (hover:none){.slab,.hero.poster,.page-head.slab,.about-band{background-attachment:scroll}}

/* ── parallax: concrete drifts slower than the content (set by script) ── */
.slab,.hero.poster,.page-head.slab,.about-band{background-attachment:scroll;background-size:auto 140%;background-position:center var(--py,50%)}
.slab,.hero.poster,.page-head.slab,.about-band{background-size:max(100vw,1760px) auto}

/* ── one concrete wall behind the whole page, drifting slowly behind every section ── */
html{background:#E6E1D9}
body{background-color:#E6E1D9;background-image:url("img/concrete.jpg");background-repeat:repeat-y;background-size:max(100vw,1760px) auto;background-position:center var(--bgy,0px);background-blend-mode:multiply}
.slab,.hero.poster,.page-head.slab,.about-band,.over,.endmark{background:transparent!important}
.mast{background:color-mix(in srgb,#FFFFFF 92%,transparent)}
body::before{background:#FFFFFF}
footer{background:#FFFFFF}
/* section dividers read on concrete */
section.under,.section-head,.kind-head,.facts,.fact+.fact,.pager,.story-sec,.directory,.directory a{border-color:rgba(36,25,19,.28)}
.page-head{border-bottom:0}
body{background-color:#ECE8E2}
.logo{background:transparent}
.poster-type h1{font-size:clamp(3.2rem,11vw,8.6rem);line-height:.88}
.hero-sub{margin:6px 0 0;font-family:var(--display);font-stretch:125%;font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:clamp(11px,1.3vw,14px);color:var(--ink)}

/* hero: name · quick facts · photo */
@media (min-width:901px){
  .poster .hero-in{grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr) minmax(0,280px);column-gap:clamp(24px,3.5vw,48px);align-items:end}
  .poster-type{grid-column:1;grid-row:1}
  .poster .quick{grid-column:2;grid-row:1}
  .poster .portrait.frame{grid-column:3;grid-row:1}
}
.quick{margin:0;display:grid;border-top:1px solid rgba(36,25,19,.45)}
.quick div{display:grid;gap:2px;padding:12px 0;border-bottom:1px solid rgba(36,25,19,.3)}
.quick dt{font-family:var(--display);font-stretch:125%;font-weight:600;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--fern)}
.quick dd{margin:0;font-size:15px;line-height:1.4;color:var(--ink);font-weight:500}
@media (max-width:900px){
  .poster .quick{grid-column:1;grid-row:3;margin-top:28px}
  .poster .portrait.frame{grid-row:2}
}
@media (min-width:901px){
  .poster .hero-in{grid-template-columns:minmax(0,1.55fr) minmax(0,.8fr) minmax(0,260px)}
  .poster-type h1{font-size:clamp(3.4rem,7.2vw,6.6rem)}
  .poster .portrait.frame{max-width:260px}
}
@media (min-width:901px){
  .poster .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,360px)}
  .poster .portrait.frame{grid-column:2;max-width:360px}
  .poster-type h1{font-size:clamp(3.6rem,9vw,8rem)}
}
section.about-band{margin-top:0}
.over>section.about-band+section.under{margin-top:0}
.over>section.exp-row:first-child{margin-top:clamp(40px,5vw,64px)}
section.exp-row+section.about-band{margin-top:clamp(24px,3vw,40px)}
.over>section.about-band:first-child{margin-top:0}
section.about-band+section.exp-row{margin-top:clamp(48px,6vw,80px)}
.about-band .about-grid{align-items:center}