/* Homepage wayfinding — draft 2026-09-29 (Option A: seven departments, one index, one night band).
   Each department = a numeral + a glyph + a title + one line on what it is, and one material of its own. */

.home .sec{scroll-margin-top:24px;}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth;}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;} .pageindex a,.rail a{transition:none;}}

/* ——— A1 · the numbered department head ——— */
.home .sh{align-items:center;gap:12px;border-top:1px solid var(--line-strong);padding-top:16px;}
.sh .num{flex:none;font-family:var(--util);font-size:.7rem;font-weight:600;letter-spacing:.14em;color:var(--navy);line-height:1;}
.sh .gl{flex:none;width:1.2em;text-align:center;font-family:var(--util);font-size:1.05rem;line-height:1;color:var(--navy);}
.sh .n{flex:1 1 auto;min-width:0;font-family:var(--text);font-style:normal;font-size:.96rem;line-height:1.35;color:var(--ink-soft);}
.sh .btn-2{margin-left:auto;align-self:center;flex:none;}
/* 01 · the essay carries the heaviest rule on the page — the only 3px rule */
.home #essay .sh{border-top:3px solid var(--navy);}

@media (max-width:720px){
  .home .sh{flex-wrap:wrap;gap:6px 10px;padding-top:14px;}
  .sh .n{flex-basis:100%;order:4;}
  .sh .btn-2{order:5;margin-left:0;margin-top:6px;}
}

/* ——— A2 · the in-page index ——— */
.pageindex{max-width:1160px;margin:0 auto;padding:6px clamp(22px,4.5vw,48px);display:flex;align-items:center;gap:22px;
  border-bottom:1px solid var(--line);}
.pageindex .lab{flex:none;font-family:var(--util);font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);}
.pageindex ol{list-style:none;display:flex;flex-wrap:wrap;gap:0 22px;min-width:0;}
.pageindex a,.rail a{display:inline-flex;align-items:center;gap:7px;font-family:var(--util);font-weight:600;
  color:var(--navy);text-decoration:none;white-space:nowrap;}
.pageindex a{min-height:44px;font-size:.78rem;}
.pageindex a b,.rail a b{font-weight:500;font-size:.66rem;letter-spacing:.12em;color:var(--ink-soft);}
.pageindex a:hover{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:5px;}
.pageindex a:focus-visible,.rail a:focus-visible{outline:2px solid var(--navy);outline-offset:2px;}
@media (max-width:720px){
  .pageindex{padding:4px 0 4px 22px;gap:14px;background:var(--paper);}
  .pageindex ol{flex:1 1 0;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    gap:0 18px;padding-right:22px;}
  .pageindex ol::-webkit-scrollbar{display:none;}
}

/* desktop rail: sticky in the left gutter; hidden wherever the gutter can't hold it without touching the column */
.rail{display:none;}
@media (min-width:1400px){
  .rail{display:block;position:sticky;top:calc(50vh - 150px);height:0;z-index:6;}
  .rail ol{position:absolute;left:clamp(12px,1.4vw,22px);top:0;width:max-content;max-width:158px;list-style:none;
    padding:8px 10px 8px 20px;background:rgba(255,255,255,.96);border:1px solid var(--line-strong);}
  .rail a{position:relative;min-height:34px;font-size:.7rem;color:var(--ink-soft);}
  .rail a::before{content:"\2726";position:absolute;left:-13px;font-size:.62rem;color:transparent;}
  .rail a:hover{color:var(--navy);}
  .rail a.is-here{color:var(--navy);}
  .rail a.is-here::before{color:var(--gold);}
}

/* ——— A3 · one material per department ——— */
/* 02 · the blog reads as a text index: its thumbnails lose the plate frame */
.home #blog .row .plate{border:0;background:transparent;}

/* 03 · the human sits in the page's one cream inset panel */
.home #who .who{background:var(--art-paper);border:1px solid #cfc4b2;padding:clamp(22px,3vw,40px);}
.home #who .who .plate{background:#ffffff;}

/* 04 · the work points off-site */
.home #work .offsite{display:block;margin-top:10px;font-family:var(--util);font-size:.78rem;font-weight:500;
  letter-spacing:.04em;color:var(--ink-soft);}

/* 05 · the newsletter is the one night band (the same navy-deep as the bylines, menu and footer) */
.home .sec#newsletter{max-width:none;background:var(--navy-deep);margin-top:clamp(52px,7svh,84px);
  padding:clamp(48px,7svh,80px) max(clamp(22px,4.5vw,48px),calc(50% - 580px + clamp(22px,4.5vw,48px))) clamp(56px,8svh,92px);}
#newsletter .sh{border-top-color:rgba(254,249,241,.4);}
#newsletter .sh .num,#newsletter .sh .s{color:#fef9f1;}
#newsletter .sh .gl{color:var(--star-gold);}
#newsletter .sh .n{color:rgba(254,249,241,.78);}
#newsletter .nl h2{color:#fef9f1;}
#newsletter .nl h2 .loop,#newsletter .nl h2 .dot{color:var(--star-gold);}
#newsletter .nl .lede{color:rgba(254,249,241,.82);}
#newsletter .depts,#newsletter .depts div{border-color:rgba(254,249,241,.18);}
#newsletter .depts .d{color:var(--star-gold);}
#newsletter .depts .w{color:rgba(254,249,241,.82);}
#newsletter .door .mark{width:40px;height:40px;margin-bottom:12px;}
@media (max-width:720px){
  .home .sec#newsletter{margin-top:42px;padding:40px 22px 48px;}
}

/* 06 · the Constellation: the one place plates are connected — a hairline chart over the three portraits */
.home #constellation .sh .gl{color:var(--gold);} /* decorative: the navy numeral beside it carries the meaning */
.stars{position:relative;}
.stars .chart{display:none;}
@media (min-width:861px){
  .home #constellation .stars{padding-top:34px;}
  .stars .chart{display:block;position:absolute;top:0;left:0;pointer-events:none;overflow:visible;}
  .stars .chart line{stroke:var(--navy);stroke-width:1;}
  .stars .chart circle{fill:var(--gold);}
}