/* ============================================================
   JJ HELLERMAN — shared styles. Greyscale on warm paper.
   ============================================================ */
:root{
  --bg:#ffffff;--bg2:#f6f5f2;--ink:#111111;--muted:#6f6e69;--line:#e2e1dc;
  --display:'Archivo',sans-serif;--mono:'Inclusive Sans',system-ui,sans-serif;
  --serif:'Cardo',Georgia,'Times New Roman',serif;--menuw:182px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background-color:var(--bg);color:var(--ink);
  font-family:var(--serif);font-size:18px;line-height:1.62;-webkit-font-smoothing:antialiased;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");}
img{max-width:100%;display:block;}
a{color:inherit;}
.mono{font-family:var(--mono);}

/* ---------- right-side menu ---------- */
.sidemenu{position:fixed;top:0;right:0;bottom:0;width:var(--menuw);z-index:100;
  padding:30px 26px;display:flex;flex-direction:column;text-align:right;}
.sidemenu .brand{font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.01em;
  text-decoration:none;display:flex;align-items:center;justify-content:flex-end;gap:9px;margin-bottom:28px;}
.sidemenu ul{list-style:none;margin:0;padding:0;font-family:var(--mono);
  font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;}
.sidemenu li{margin:0 0 13px;}
.sidemenu a{color:var(--muted);text-decoration:none;display:flex;justify-content:flex-end;gap:9px;transition:color .18s;}
.sidemenu a:hover,.sidemenu a.active{color:var(--ink);}
@media(min-width:900px){ body.interior{padding-right:var(--menuw);} }

/* ---------- content wrapper ---------- */
.content{max-width:940px;margin:0 auto;padding:70px 44px 40px;}
h1.page-title{font-family:var(--display);font-weight:700;font-size:clamp(2.1rem,5vw,3.1rem);
  letter-spacing:-.02em;margin:.1rem 0 .5rem;line-height:1;}
.lede{color:var(--muted);font-style:italic;max-width:640px;margin:0 0 2.6rem;font-size:1.08rem;}
.backmap{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;display:inline-block;margin-bottom:1.6rem;}
.backmap:hover{color:var(--ink);}

/* ---------- portfolio: ledger + grid ---------- */
.work-toolbar{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:14px;margin-bottom:1.3rem;}
.viewtoggle{display:flex;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;}
.viewtoggle button{background:none;border:1px solid var(--ink);color:var(--ink);padding:7px 16px;cursor:pointer;font:inherit;letter-spacing:.08em;}
.viewtoggle button:first-child{border-right:none;}
.viewtoggle button.on{background:var(--ink);color:var(--bg);}
.ledger{width:100%;border-collapse:collapse;border-top:1px solid var(--ink);}
.ledger tr{border-bottom:1px solid var(--line);cursor:pointer;transition:background .15s;}
.ledger tr:hover{background:var(--ink);}
.ledger tr:hover td{color:var(--bg);}
.ledger td{padding:16px 12px;vertical-align:baseline;}
.ledger .ltitle{font-family:var(--display);font-weight:500;font-size:1.32rem;letter-spacing:-.01em;}
.ledger .lmed{font-family:var(--serif);font-size:.95rem;color:var(--muted);width:42%;}
.ledger tr:hover .lmed{color:#cfcec8;}
.ledger .lyr{font-family:var(--mono);font-size:.85rem;text-align:right;width:70px;}
@media(max-width:760px){.ledger .lmed{display:none;}}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:38px 26px;}
.work-grid.hidden,.ledger.hidden{display:none;}
.work-card{text-decoration:none;color:inherit;display:block;}
.work-card-img{aspect-ratio:4/5;overflow:hidden;background:var(--bg2);position:relative;}
.work-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease;}
.work-card:hover .work-card-img img{transform:scale(1.04);}
.work-card h3{font-family:var(--display);font-weight:500;font-size:1.08rem;margin:.85rem 0 .3rem;letter-spacing:-.01em;}
.work-card-meta{font-family:var(--mono);font-size:.72rem;line-height:1.5;color:var(--muted);display:flex;flex-direction:column;}
.work-card-meta span:first-child{color:var(--ink);}
@media(max-width:900px){.work-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.work-grid{grid-template-columns:1fr;}}

/* ---------- portfolio: split index (left) + photo preview (right) ---------- */
.content.pf{max-width:1300px;}
.pf-split{display:grid;grid-template-columns:minmax(300px,0.82fr) 1.18fr;gap:48px;align-items:start;}
.pf-col{min-width:0;}
.pf-index{border-top:1px solid var(--ink);margin-top:1.7rem;}
.pf-row{display:flex;justify-content:space-between;gap:18px;align-items:baseline;padding:15px 6px;
  border-bottom:1px solid var(--line);text-decoration:none;color:inherit;cursor:pointer;transition:color .15s;}
.pf-row .t{font-family:var(--display);font-weight:500;font-size:1.18rem;letter-spacing:-.01em;line-height:1.25;transition:color .15s;}
.pf-row .y{font-family:var(--mono);font-size:.74rem;color:var(--muted);flex:none;}
.pf-row:hover .t{color:var(--muted);}
.pf-row.active .t{color:var(--ink);font-weight:600;}
.pf-preview{position:sticky;top:70px;align-self:start;display:flex;align-items:flex-start;justify-content:center;min-height:200px;}
.pf-stage{position:relative;display:inline-flex;max-width:100%;max-height:62vh;}
.pf-photo{max-width:100%;max-height:62vh;width:auto;height:auto;object-fit:contain;display:block;cursor:pointer;
  box-shadow:0 8px 34px rgba(17,17,16,.12);}
.pf-arrow{position:absolute;top:50%;background:none;border:0;cursor:pointer;
  font-family:var(--mono);font-size:1.4rem;line-height:1;color:var(--muted);padding:10px;transition:color .15s;display:none;}
.pf-arrow:hover{color:var(--ink);}
.pf-prev{left:0;transform:translate(-190%,-50%);}
.pf-next{right:0;transform:translate(190%,-50%);}
@media(max-width:760px){
  .content.pf{max-width:940px;}
  .pf-split{grid-template-columns:1fr;}
  .pf-preview{display:none;}
}

/* ---------- research ---------- */
.rproj{border-top:1px solid var(--ink);padding:34px 0;}
.rproj:last-of-type{border-bottom:1px solid var(--ink);}
.rproj .ptag{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.rproj h2{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.01em;margin:.5rem 0 .7rem;}
.rproj .abstract{max-width:780px;margin:0 0 1.4rem;}
.sec-h{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin:1.4rem 0 .4rem;padding-bottom:.5rem;border-bottom:1px solid var(--line);max-width:780px;}
.mat{max-width:780px;border-bottom:1px solid var(--line);padding:13px 0;}
.mat a{font-family:var(--display);font-weight:500;font-size:1.12rem;text-decoration:none;}
.mat a:hover{text-decoration:underline;text-underline-offset:3px;}
.mat .desc{color:var(--muted);font-size:.95rem;margin-top:3px;}
.note{font-size:.95rem;color:var(--muted);font-style:italic;max-width:780px;margin:1rem 0 0;}
.relwriting{max-width:780px;}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:300px 1fr;gap:52px;align-items:start;}
.about-grid img{width:100%;border:1px solid var(--line);}
.bio p{margin:0 0 1.1rem;max-width:680px;}
.bio p:first-child{font-size:1.22rem;line-height:1.5;font-style:italic;}
@media(max-width:820px){.about-grid{grid-template-columns:1fr;gap:26px;}}
.cv-doc{border:1px solid var(--ink);padding:32px 36px;margin-top:3rem;background:var(--bg);}
.cv-doc h2{font-family:var(--display);font-weight:700;font-size:1.6rem;letter-spacing:-.01em;margin:0 0 1.4rem;}
.cv-block{margin-bottom:1.8rem;}
.cv-block:last-child{margin-bottom:0;}
.cv-block h3{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  margin:0 0 .7rem;padding-bottom:.5rem;border-bottom:1px solid var(--ink);}
.cv-row{display:grid;grid-template-columns:74px 1fr;gap:18px;padding:.5rem 0;border-bottom:1px solid var(--line);}
.cv-row:last-child{border-bottom:none;}
.cv-row .yr{font-family:var(--mono);color:var(--muted);font-size:.85rem;}
.cv-row .what{margin:0;font-size:1rem;}
.contact{margin-top:3rem;border-top:1px solid var(--ink);padding-top:1.8rem;}
.contact h2{font-family:var(--display);font-weight:700;font-size:1.5rem;margin:0 0 .4rem;}
.contact .clinks{display:flex;flex-wrap:wrap;gap:12px 34px;margin-top:1rem;font-family:var(--mono);font-size:.95rem;}
.contact .clinks a{text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:3px;}
.contact .clinks a:hover{border-color:var(--ink);}

/* ---------- blog list ---------- */
.year-label{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  margin:2.2rem 0 .3rem;padding-bottom:.5rem;border-bottom:1px solid var(--ink);}
.wlist{display:flex;flex-direction:column;}
.wlist a{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:baseline;text-decoration:none;color:inherit;
  padding:1rem 6px;border-bottom:1px solid var(--line);transition:background .15s;}
.wlist a:hover{background:var(--bg2);}
.wlist a .wd{font-family:var(--mono);font-size:.72rem;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;}
.wlist a .wt{font-family:var(--display);font-weight:500;font-size:1.14rem;line-height:1.3;}
.wlist a:hover .wt{text-decoration:underline;text-underline-offset:3px;}
@media(max-width:600px){.wlist a{grid-template-columns:1fr;gap:2px;}}

/* ---------- article / work-detail (restyled detail pages) ---------- */
.article{max-width:760px;margin:0 auto;padding:70px 44px 0;}
.article .meta{font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;color:var(--muted);
  margin:.2rem 0 2.2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--line);text-transform:uppercase;}
.article h1{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,4.5vw,2.9rem);
  letter-spacing:-.02em;line-height:1.08;margin:1.1rem 0 .5rem;}
.article p{margin:0 0 1.3rem;}
.article p.standfirst{font-size:1.25rem;line-height:1.5;font-style:italic;color:var(--ink);}
.article h2{font-family:var(--display);font-weight:600;font-size:1.5rem;letter-spacing:-.01em;margin:2.6rem 0 .8rem;}
.article h3{font-family:var(--display);font-weight:600;font-size:1.2rem;margin:2.1rem 0 .6rem;}
.article figure{margin:2.6rem 0;}
.article figure img{width:100%;height:auto;background:var(--bg2);}
.article .gallery{display:grid;gap:10px;margin:2.6rem 0;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.article .gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1;background:var(--bg2);}
.specs{display:grid;grid-template-columns:max-content 1fr;gap:.55rem 28px;margin:0 0 2.4rem;
  padding-bottom:1.7rem;border-bottom:1px solid var(--line);align-items:baseline;}
.specs dt{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--ink);}
.specs dd{margin:0;font-size:1.02rem;}
@media(max-width:520px){.specs{grid-template-columns:1fr;gap:.1rem 0;}.specs dd{margin-bottom:.7rem;}}
.embed{margin:2.4rem 0;}
.related-writing{margin:3.2rem 0 0;}
.related-writing h2{font-family:var(--display);font-weight:600;font-size:1.4rem;letter-spacing:-.01em;margin:0 0 .4rem;}
.related-writing .rel{display:grid;grid-template-columns:140px 1fr;gap:18px;align-items:baseline;
  border-top:1px solid var(--line);padding:.9rem 0;text-decoration:none;color:inherit;}
.related-writing .rel:last-child{border-bottom:1px solid var(--line);}
.related-writing .rel .d{color:var(--muted);font-size:.78rem;font-family:var(--mono);text-transform:uppercase;}
.related-writing .rel .t{font-family:var(--display);font-weight:500;font-size:1.08rem;}
.related-writing .rel:hover .t{text-decoration:underline;text-underline-offset:3px;}
@media(max-width:640px){.related-writing .rel{grid-template-columns:1fr;gap:2px;}}
.connect{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--line);}
.connect .sec-h{border:none;padding:0;margin:0 0 .7rem;}
.connect .tags{display:flex;flex-wrap:wrap;gap:8px 10px;}
.connect .tags a{font-family:var(--mono);font-size:.72rem;letter-spacing:.03em;text-decoration:none;
  color:var(--muted);border:1px solid var(--line);padding:5px 11px;border-radius:30px;transition:.15s;}
.connect .tags a:hover{color:var(--ink);border-color:var(--ink);}
@media(max-width:899px){.article{padding:30px 22px 0;}}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--ink);padding:32px 44px;margin-top:3rem;}
footer.site .inner{max-width:940px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:300;display:none;background:rgba(17,17,16,.95);
  align-items:center;justify-content:center;cursor:zoom-out;padding:30px;}
.lightbox.open{display:flex;}
.lightbox img{max-width:94%;max-height:92%;object-fit:contain;}
.lightbox .lb-close{position:absolute;top:16px;right:24px;color:#fff;font-size:2rem;background:none;border:0;cursor:pointer;}

/* ---------- reels video-wall group page (dark, self-contained) ---------- */
body.reels-page{background:#000;color:#fff;}
.reels-bg{position:fixed;inset:0;z-index:0;display:flex;}
.reels-bg video{flex:1 1 0;width:33.3333%;height:100%;object-fit:cover;display:block;}
.reels-scrim{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.55)0%,rgba(0,0,0,.42)35%,rgba(0,0,0,.62)100%);}
.reels-page .sidemenu .brand,.reels-page .sidemenu a.active{color:#fff;}
.reels-page .sidemenu a{color:rgba(255,255,255,.66);}
.reels-page .group-page,.reels-page footer.site{position:relative;z-index:2;}
.group-page{max-width:1100px;margin:0 auto;padding:70px 44px 0;text-align:center;}
.group-page h1{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,4.5vw,2.9rem);margin:1.1rem 0 .35rem;}
.group-page .meta{font-family:var(--mono);font-size:.85rem;color:rgba(255,255,255,.75);margin-bottom:1.6rem;}
.group-desc{max-width:680px;margin:0 auto 2.6rem;color:rgba(255,255,255,.92);}
.reels-page .work-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:34px 26px;}
.reels-page .work-card{flex:0 1 calc((100% - 52px)/3);background:rgba(0,0,0,.34);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.16);padding:10px 10px 16px;transition:transform .35s,border-color .35s;}
.reels-page .work-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.34);}
.reels-page .work-card h3{color:#fff;}
.reels-page .work-card-meta{color:rgba(255,255,255,.66);}
.reels-page .work-card-meta span:first-child{color:#fff;}
.reels-page footer.site{border-top:1px solid rgba(255,255,255,.14);}
.reels-page footer.site .inner{color:rgba(255,255,255,.7);}
@media(max-width:820px){.reels-page .work-card{flex-basis:calc((100% - 26px)/2);}}
@media(max-width:520px){.reels-page .work-card{flex-basis:100%;}}

/* ---------- video hero detail page ---------- */
.video-hero{position:relative;min-height:100vh;width:100%;overflow:hidden;display:flex;align-items:center;padding:96px 0 70px;}
.video-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.video-hero .hero-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.55)0%,rgba(0,0,0,.42)45%,rgba(0,0,0,.62)100%);}
.video-hero .hero-inner{position:relative;z-index:2;max-width:760px;margin:0 auto;padding:0 44px;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.6);}
.video-hero h1{font-family:var(--display);font-weight:700;color:#fff;font-size:clamp(2.2rem,6vw,3.6rem);line-height:1.05;margin:1rem 0 .35rem;}
.video-hero .meta{font-family:var(--mono);color:rgba(255,255,255,.82);font-size:.85rem;text-transform:uppercase;margin-bottom:1.4rem;}
.video-hero .hero-desc p{margin:0 0 1rem;color:#fff;}
.video-hero .scroll-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:2;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.8);}

/* ---------- mobile: menu becomes a sticky top bar ---------- */
@media(max-width:899px){
  .sidemenu{position:sticky;top:0;right:auto;bottom:auto;width:100%;height:auto;flex-direction:row;
    align-items:center;justify-content:flex-start;text-align:left;flex-wrap:wrap;gap:8px 18px;
    padding:12px 20px;background:rgba(255,255,255,.93);backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--line);}
  .sidemenu .brand{margin:0 12px 0 0;}
  .sidemenu ul{display:flex;flex-wrap:wrap;gap:8px 16px;}
  .sidemenu li{margin:0;}
  body.interior{padding-right:0;}
  .content{padding:30px 22px 30px;}
  footer.site{padding:28px 22px;}
}