/* ============================================================================
   Home page + Collection grids (2026-10-04).
   Order on the home page: cover → this month's two printed covers + contents →
   The Collection (the client houses, their own photographs) → the newsstand rack
   → The Wire → inside the issue → sketchbook → statement → patrons → newsletter.
   Loaded only by index.html and stays.html (head_extra).
   ========================================================================== */

/* ---- cover additions ---- */
/* NO TEXT OVER TEXT (2026-10-09): Bodoni's glyphs hang ~0.31em below the cover title's .9 line box,
   so the title gets that room before the 'On the cover:' line */
.cover__body .cover__title{margin-bottom:.36em}
.cover__house{margin:6px 0 10px;font-family:var(--sans);font-size:clamp(14px,1.15vw,16px);letter-spacing:.04em;color:rgba(251,250,247,.94)}
.cover__house a{color:var(--bone);border-bottom:1px solid rgba(251,250,247,.55);padding-bottom:1px}
.cover__house a:hover{border-color:var(--bone)}
.btn--line-light{background:transparent;border-color:rgba(251,250,247,.7);color:var(--bone)}
.btn--line-light:hover{background:var(--bone);border-color:var(--bone);color:var(--ink)}
.cover__actions{gap:14px 18px;flex-wrap:wrap}

/* ---- the nameplate + the reel (2026-10-11) ----
   One grid cell, two layers: the stage (pinned, the film) and the flow (the paper masthead, then empty scroll
   room). The film never moves on the screen: the masthead scrolls away over it and the clip on .reel__win opens
   from --reel-inset to full bleed as --rp goes 0 -> 1 (main.js). No transform and no animation on the video or
   on anything that holds it: a transformed playing video shakes. Without scripts --rp stays 1 (full bleed). */
.reel{--reel-inset:clamp(18px,6vw,120px);--reel-pad:clamp(14px,2vw,40px);--rp:1;
  position:relative;display:grid;background:var(--bone)}
.reel--js{--rp:0}
.reel__stage,.reel__flow{grid-area:1/1;min-width:0}
.reel__stage{position:sticky;top:0;align-self:start;height:100vh;height:100svh;overflow:hidden;
  background:var(--bone);color:var(--bone)}
.reel__win{position:absolute;inset:0;background:var(--ink);
  clip-path:inset(0 calc((1 - var(--rp)) * var(--reel-inset)))}
.reel__poster,.reel__poster img,.reel__vid{position:absolute;inset:0;width:100%;height:100%}
.reel__poster img,.reel__vid{object-fit:cover}
.reel__vid{opacity:0;transition:opacity .5s linear}
.reel__vid.is-on{opacity:1}
.reel__scrim{position:absolute;inset:0;pointer-events:none;transition:opacity .7s var(--ease);
  background:linear-gradient(90deg,rgba(14,14,14,.52) 0%,rgba(14,14,14,.24) 46%,rgba(14,14,14,0) 74%),
    linear-gradient(180deg,rgba(14,14,14,0) 12%,rgba(14,14,14,.5) 50%,rgba(14,14,14,.92) 100%)}
/* the film changes under the words every second, bright frames included: the words carry their own shade too */
.reel__body .cover__eyebrow,.reel__body .cover__title,.reel__body .cover__house,.reel__body .cover__dek{
  text-shadow:0 1px 22px rgba(14,14,14,.55),0 0 2px rgba(14,14,14,.35)}
.reel__body .cover__eyebrow{color:var(--bone)}
.reel__inner{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) clamp(40px,7vh,88px);pointer-events:none}
.reel__body{pointer-events:auto;transition:opacity .7s var(--ease)}
.reel--js .reel__body{opacity:0;pointer-events:none}
.reel--js .reel__scrim{opacity:0}
.reel--js.is-open .reel__body,.reel--js .reel__body:focus-within{opacity:1;pointer-events:auto}
.reel--js.is-open .reel__scrim{opacity:1}
.reel__toggle{position:absolute;z-index:3;bottom:clamp(14px,2.4vh,26px);
  right:calc((1 - var(--rp)) * var(--reel-inset) + clamp(14px,2vw,28px));
  font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;line-height:1;
  color:var(--bone);background:rgba(14,14,14,.6);border:1px solid rgba(251,250,247,.55);border-radius:2px;
  padding:10px 14px;cursor:pointer;transition:background .3s,color .3s}
.reel__toggle:hover{background:var(--bone);color:var(--ink)}
.reel__flow{position:relative;z-index:2;pointer-events:none}
.reel__flow::after{content:"";display:block;height:160vh;height:160svh}
.reel__mast{pointer-events:auto;background:var(--bone);color:var(--ink);
  padding:clamp(74px,6.4vw,118px) var(--reel-pad) 0}
.reel__plate{display:block;width:100%;height:auto}
.reel__line{display:flex;justify-content:space-between;gap:16px;margin:0;
  padding:clamp(12px,1.3vw,22px) 0 clamp(13px,1.4vw,24px);
  font-family:var(--sans);font-weight:600;font-size:clamp(10.5px,.82vw,12.5px);letter-spacing:.08em;
  text-transform:uppercase;line-height:1.3;color:var(--ink)}

/* home header: while the masthead is on screen it is a paper bar with ink links, and the big nameplate slides
   under it; main.js adds .is-past once the film reaches the top and the usual ink header takes over */
.page-home .hdr:not(.is-past){background:var(--bone)!important;border-bottom-color:transparent!important}
.page-home .hdr:not(.is-past)::before{opacity:0}
.page-home .hdr:not(.is-past) .nameplate{display:none}
.page-home .hdr:not(.is-past) .hdr__brand small{margin-top:0;color:var(--ink);font-size:11px;font-weight:600;letter-spacing:.08em}
.page-home .hdr:not(.is-past) .hdr__nav a{color:var(--ink)}
.page-home .hdr:not(.is-past) .hdr__nav a:hover{color:var(--accent)}
.page-home .hdr:not(.is-past) .hdr__cta{border-color:rgba(17,17,17,.45)}
.page-home .hdr:not(.is-past) .hdr__cta:hover{background:var(--ink);color:var(--bone)!important;border-color:var(--ink)}
.page-home .hdr:not(.is-past) .hdr__burger{filter:none}
.page-home .hdr:not(.is-past) .hdr__burger span{background:var(--ink)}
.page-home .hdr:not(.is-past) .hdr__sub{color:var(--ink);border-color:rgba(17,17,17,.5);filter:none}
.page-home .hdr:not(.is-past) .hdr__sub:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}

@media (max-width:980px){
  /* the burger header is 82 px tall here: the nameplate starts clear of it */
  .reel__mast{padding-top:96px}
}
@media (max-width:760px){
  .reel__inner{padding-bottom:70px}
  .reel__line{font-size:10px;letter-spacing:.07em}
}

/* ---- this month's issue: two big printed covers beside the contents ---- */
.hm-issue{padding-top:clamp(56px,7vw,104px)}
.hm-issue__grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(36px,5vw,92px);align-items:center}
.hm-issue__covers{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.2vw,34px);align-items:start;max-width:720px}
.hm-issue__copy{display:block;color:inherit}
.hm-issue__copy .copy{--rot:-1.2deg}
.hm-issue__copy--2{margin-top:clamp(28px,4vw,64px)}
.hm-issue__copy--2 .copy{--rot:1.1deg}
.hm-issue__cap{display:block;margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600}
.hm-issue__theme{margin-top:14px}
.hm-issue__strap{font-family:var(--text,var(--serif));font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:var(--ink-2,#2b2b2b);max-width:44ch;margin:18px 0 0}
.hm-issue__toc{margin-top:clamp(22px,2.6vw,34px)}
.hm-issue__actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:clamp(24px,3vw,36px)}

/* ---- the Collection: one big lead house, then a photo grid ---- */
.hm-coll{padding-top:clamp(40px,5vw,72px)}
.hm-coll__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,72px);align-items:end;margin-bottom:clamp(28px,3.6vw,48px)}
.hm-coll__lead{font-family:var(--text,var(--serif));font-size:clamp(17px,1.45vw,20px);line-height:1.55;color:var(--ink-2,#2b2b2b);max-width:52ch;margin:0}

.hm-lead{position:relative;display:block;color:var(--bone);overflow:hidden;border-radius:2px;aspect-ratio:16/7;background:var(--ink)}
.hm-lead__media,.hm-lead__media img{position:absolute;inset:0;width:100%;height:100%}
.hm-lead__media img{object-fit:cover;transition:transform 1.4s var(--slow)}
.hm-lead:hover .hm-lead__media img{transform:scale(1.035)}
.hm-lead::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(14,14,14,.82) 0%,rgba(14,14,14,.42) 34%,rgba(14,14,14,0) 62%)}
.hm-lead__body{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;gap:10px;padding:clamp(22px,3.4vw,52px);max-width:760px}
.hm-lead__t{font-size:clamp(34px,4.6vw,72px);font-weight:600;line-height:.98;letter-spacing:-.022em}
.hm-lead__d{font-family:var(--text,var(--serif));font-size:clamp(16px,1.35vw,19px);line-height:1.5;color:rgba(251,250,247,.92);max-width:56ch}
.hm-lead__more{font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;margin-top:4px;font-weight:600}

.hm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(30px,3.4vw,56px) clamp(18px,2.2vw,34px);margin-top:clamp(30px,3.6vw,52px)}
.hm-card{display:flex;flex-direction:column;color:var(--ink)}
.hm-card__media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:2px;background:var(--bone-2);line-height:0}
.hm-card__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--slow)}
.hm-card:hover .hm-card__media img{transform:scale(1.045)}
.hm-card__k{margin-top:16px;font-family:var(--sans);font-weight:600;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--moss)}
.hm-card__t{margin-top:8px;font-size:clamp(22px,1.9vw,30px);font-weight:600;line-height:1.08;letter-spacing:-.014em}
.hm-card:hover .hm-card__t{color:var(--moss)}
.hm-card__d{margin-top:6px;font-size:14px;color:var(--muted)}
.hm-card__d:empty{display:none}
.hm-grid--stays{margin-top:0}

.hm-coll__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;margin-top:clamp(36px,4.4vw,64px);padding-top:clamp(22px,2.6vw,32px);border-top:1px solid var(--line)}
.hm-coll__groups{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.hm-coll__groups a{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border:1px solid var(--line);border-radius:999px;font-size:14px;color:var(--ink)}
.hm-coll__groups a span{font-family:var(--mono);font-size:11px;color:var(--muted);font-weight:600}
.hm-coll__groups a:hover{border-color:var(--ink)}

/* ---- the newsstand rack, up near the top ---- */
.hm-stand__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,72px);align-items:end;margin-bottom:clamp(30px,4vw,56px)}
.hm-stand__head .lead{margin:0;max-width:46ch}
.hm-stand__rack{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(30px,3.4vw,56px) clamp(22px,3vw,48px);max-width:1240px;margin:0 auto}
.hm-issue__covers:has(> :only-child){grid-template-columns:minmax(0,400px);justify-content:center}
.hm-stand__rack .rack__item:nth-child(odd) .copy{--rot:-.9deg}
.hm-stand__rack .rack__item:nth-child(even) .copy{--rot:.8deg}

/* destinations list: bigger photographs, and a tag where the Collection has a house */
.index-list--lead .idx-row__thumb{width:clamp(120px,15vw,240px)}
.idx-row__stays{display:inline-block;margin-top:8px;font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--moss)}

/* inside-the-issue head: smaller now that the issue leads above */
#inside .fp-head{margin-bottom:clamp(24px,3vw,40px)}

@media (max-width:1180px){
  .hm-stand__rack{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hm-stand__rack .rack__item:nth-child(n+7){display:none}
}
@media (max-width:980px){
  .hm-issue__grid{grid-template-columns:1fr}
  .hm-issue__covers{max-width:560px;margin:0 auto;width:100%}
  .hm-coll__head,.hm-stand__head{grid-template-columns:1fr;align-items:start}
  .hm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-lead{aspect-ratio:4/3}
}
@media (max-width:600px){
  .hm-grid{grid-template-columns:1fr}
  .hm-stand__rack{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-lead{aspect-ratio:4/5}
  .hm-lead__body{padding:22px}
  .hm-coll__foot{flex-direction:column;align-items:flex-start}
  .index-list--lead .idx-row__thumb{width:88px}
}
@media (prefers-reduced-motion:reduce){
  .hm-lead__media img,.hm-card__media img{transition:none}
}