/* ==========================================================================
   GRNDLVL — PARTNER DECK  ·  styles.css
   Palette sampled from the source deck. Asset paths are relative to THIS
   file, so styles.css and ./assets/ must stay side by side.
   Editable copy lives in index.html — search ##EDIT there.
   ========================================================================== */
/* ============================ 1. TOKENS ================================== */
:root{
  /* Palette — greys sampled directly from the asphalt plate in the source deck */
  --asphalt:#0B0B0A;      /* base black                     */
  --kerb:#161614;         /* raised charcoal panel          */
  --seam:#2A2A26;         /* hairline / divider             */
  --concrete:#7F7F7A;     /* sampled mid grey               */
  --dust:#A8A49A;         /* secondary text                 */
  --bone:#E9E5DB;         /* off-white, primary text        */
  --paint:#D9CE3F;        /* road-marking yellow — SOLE accent, used sparingly */

  /* Type roles */
  --display:'Helvetica Neue Condensed Bold','HelveticaNeue-CondensedBold',
            'Arial Narrow','Liberation Sans Narrow','Franklin Gothic Medium',
            Impact,'Haettenschweiler',sans-serif;
  --body:'Helvetica Neue',Helvetica,'Segoe UI',Roboto,Arial,sans-serif;
  --util:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;

  --gut:clamp(20px,3.2vw,56px);   /* page gutter */
  --ease:cubic-bezier(.2,.7,.2,1);

  /* iOS/Android safe areas — Dynamic Island, notch, home indicator, status bar.
     Fall back to 0px on anything that does not report insets. */
  --sat:env(safe-area-inset-top,0px);
  --sar:env(safe-area-inset-right,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);

  /* chrome bar height, excluding the bottom inset */
  --bar:clamp(56px,7vh,64px);
}

/* ============================ 2. RESET =================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--asphalt);
  color:var(--bone);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  overscroll-behavior-y:none;
  -webkit-text-size-adjust:100%;   /* stop iOS inflating type in landscape */
  text-size-adjust:100%;
}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--paint);outline-offset:3px}

/* ============================ 3. TEXTURE ================================= */
/* The real asphalt plate from the source deck, tiled + knocked back. */
.grain,.asphalt{position:absolute;inset:0;pointer-events:none}
.asphalt{
  background-image:url("./assets/grndlvl-asphalt.jpg");
  background-size:360px 360px;
  opacity:.14;
  mix-blend-mode:overlay;
}
/* Procedural grain — generated, not stock imagery. */
.grain{
  background-image:url("./assets/grndlvl-grain.svg");
  opacity:.05;
  z-index:3;
}

/* ============================ 4. DECK SHELL ============================== */
.deck{position:fixed;inset:0}
.slide{
  position:absolute;inset:0;
  display:none;
  padding-top:calc(clamp(52px,6vh,72px) + var(--sat));
  padding-right:calc(var(--gut) + var(--sar));
  padding-bottom:calc(clamp(64px,8vh,84px) + var(--sab));
  padding-left:calc(var(--gut) + var(--sal));
  overflow:hidden;
}
.slide.is-live{display:block}
.slide.is-live .layer{animation:rise .5s var(--ease) both}
.slide.is-live .layer:nth-child(2){animation-delay:.05s}
.slide.is-live .layer:nth-child(3){animation-delay:.1s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column}

/* ---- Slide chrome: eyebrow rail --------------------------------------- */
.rail{
  position:absolute;
  top:calc(clamp(20px,2.6vh,30px) + var(--sat));
  left:calc(var(--gut) + var(--sal));
  right:calc(var(--gut) + var(--sar));
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-family:var(--util);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--concrete);z-index:4;
}
.rail::before{
  content:"";position:absolute;left:0;right:0;top:-12px;height:1px;background:var(--seam);
}
.rail b{color:var(--dust);font-weight:400}

/* ---- Oversized slide number ------------------------------------------- */
.figure{
  position:absolute;
  right:calc(var(--gut) + var(--sar));
  bottom:calc(clamp(52px,7vh,74px) + var(--sab));
  font-family:var(--display);font-weight:700;font-stretch:condensed;
  font-size:clamp(90px,17vw,240px);line-height:.72;
  color:var(--bone);opacity:.045;letter-spacing:-.04em;z-index:1;
  user-select:none;
}

/* ============================ 5. TYPE SCALE ============================== */
.eyebrow{
  font-family:var(--util);font-size:clamp(9px,.72vw,11px);
  letter-spacing:.26em;text-transform:uppercase;color:var(--paint);
  display:flex;align-items:center;gap:10px;margin-bottom:clamp(14px,2.2vh,22px);
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--paint);flex:none}

h1,h2{
  font-family:var(--display);font-weight:700;font-stretch:condensed;
  text-transform:uppercase;letter-spacing:-.02em;line-height:.86;
  overflow-wrap:break-word;   /* no single word may exceed the viewport */
}
h2{font-size:clamp(34px,5.2vw,82px)}
h2 em{font-style:normal;color:var(--paint)}

.lede{
  font-size:clamp(14px,1.15vw,19px);line-height:1.5;color:var(--dust);
  max-width:56ch;
}
.lede strong{color:var(--bone);font-weight:600}

.note{
  font-family:var(--util);font-size:clamp(9px,.7vw,11px);line-height:1.6;
  letter-spacing:.05em;color:var(--concrete);
}

/* ---- Editable placeholder chip ---------------------------------------- */
.slot{
  font-family:var(--util);font-size:.82em;letter-spacing:.1em;text-transform:uppercase;
  color:var(--paint);border:1px dashed rgba(217,206,63,.5);
  padding:.28em .6em;display:inline-block;background:rgba(217,206,63,.05);
}


/* ============================ 6. COVER =================================== */
#s1{padding:0}
.cover{display:grid;grid-template-columns:1fr .78fr;height:100%}
.cover-l{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;
  padding-top:calc(clamp(30px,4.4vh,54px) + var(--sat));
  padding-bottom:calc(clamp(30px,4.4vh,54px) + var(--sab));
  padding-left:calc(clamp(24px,3.4vw,56px) + var(--sal));
  padding-right:clamp(24px,3.4vw,56px);
}
.cover-r{position:relative;overflow:hidden;border-left:1px solid var(--seam)}
/* Cover photograph — native 641x800 portrait, used at its own aspect so it
   is never upscaled. ##EDIT swap ./assets/grndlvl-hero.jpg to change it. */
.cover-img{
  position:absolute;inset:0;
  background-image:url("./assets/grndlvl-hero.jpg");
  background-size:cover;background-position:52% 42%;
  filter:grayscale(.55) contrast(1.14) brightness(.78);
}
.cover-r::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(100deg,var(--asphalt) 0%,rgba(11,11,10,.35) 34%,transparent 70%);
}

/* Wordmark — set as type. ##EDIT replace with the official logo artwork. */
.wordmark{
  font-family:var(--display);font-weight:700;font-stretch:condensed;
  font-size:clamp(44px,12.4vw,196px);overflow-wrap:break-word;line-height:.78;letter-spacing:-.045em;
  text-transform:uppercase;color:var(--bone);
}
.wordmark-sub{
  font-family:var(--display);font-weight:700;font-stretch:condensed;
  font-size:clamp(16px,2.5vw,38px);letter-spacing:.02em;text-transform:lowercase;
  color:var(--paint);margin-top:.1em;
}
.cover-meta{display:flex;flex-direction:column;gap:9px}
.cover-meta .k{
  font-family:var(--util);font-size:clamp(10px,.78vw,12px);letter-spacing:.2em;
  text-transform:uppercase;color:var(--dust);
}
.cover-rule{height:1px;background:var(--seam);margin:clamp(14px,2.4vh,24px) 0}
.credit{font-family:var(--util);font-size:9px;letter-spacing:.22em;color:var(--concrete);text-transform:uppercase}

/* ============================ 7. LAYOUT PARTS ============================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,60px);flex:1;min-height:0;align-items:center}
.split-7{grid-template-columns:1.28fr 1fr}
.stack{display:flex;flex-direction:column;justify-content:center;gap:clamp(12px,1.9vh,20px);min-height:0}

/* Data ledger (scale slide) */
.ledger{border-top:1px solid var(--seam)}
.ledger-row{
  display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:16px;
  padding:clamp(9px,1.5vh,15px) 0;border-bottom:1px solid var(--seam);
}
.ledger-row .l{font-family:var(--util);font-size:clamp(9px,.74vw,11px);letter-spacing:.16em;text-transform:uppercase;color:var(--dust)}
.ledger-row .v{font-family:var(--display);font-weight:700;font-stretch:condensed;font-size:clamp(22px,2.5vw,38px);letter-spacing:-.02em}
.ledger-row.total .v{color:var(--paint)}
.ledger-row.total .l{color:var(--bone)}

/* Big stat */
.stat{font-family:var(--display);font-weight:700;font-stretch:condensed;
  font-size:clamp(96px,15vw,220px);line-height:.76;letter-spacing:-.05em}
.stat small{display:block;font-family:var(--util);font-size:clamp(9px,.74vw,11px);
  font-weight:400;letter-spacing:.24em;color:var(--dust);margin-top:1.1em;text-transform:uppercase}

/* Index list — used for reasons / benefits */
.index{display:flex;flex-direction:column;border-top:1px solid var(--seam)}
.index li{
  list-style:none;display:grid;grid-template-columns:34px 1fr;gap:clamp(10px,1.2vw,18px);
  align-items:start;padding:clamp(9px,1.5vh,15px) 0;border-bottom:1px solid var(--seam);
}
.index .n{font-family:var(--util);font-size:10px;letter-spacing:.1em;color:var(--paint);padding-top:.35em}
.index .t{font-family:var(--display);font-weight:700;font-stretch:condensed;
  font-size:clamp(17px,1.75vw,27px);text-transform:uppercase;letter-spacing:-.01em;line-height:1.02}
.index .d{font-size:clamp(11px,.82vw,13.5px);line-height:1.5;color:var(--concrete);margin-top:.35em}

/* Tag cloud — culture slide */
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags span{
  font-family:var(--display);font-weight:700;font-stretch:condensed;text-transform:uppercase;
  font-size:clamp(15px,1.7vw,27px);letter-spacing:-.01em;line-height:1;
  padding:.34em .55em;border:1px solid var(--seam);color:var(--dust);
}
.tags span.hot{color:var(--asphalt);background:var(--paint);border-color:var(--paint)}

/* ---- SIGNATURE: the street plan (zones) ------------------------------- */
.plan{position:relative;flex:1;min-height:0;display:flex;align-items:center}
.road{position:relative;width:100%;background:var(--kerb);border-block:1px solid var(--seam);
  height:clamp(74px,11vh,104px)}
.road::before{ /* centre line */
  content:"";position:absolute;top:50%;left:0;right:0;height:2px;transform:translateY(-50%);
  background:repeating-linear-gradient(90deg,var(--paint) 0 26px,transparent 26px 52px);
  opacity:.5;
}
.zone{
  position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;
  border-right:1px solid var(--seam);
}
.zone .lbl{
  position:absolute;left:8px;font-family:var(--util);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--paint);
}
.zone .nm{
  font-family:var(--display);font-weight:700;font-stretch:condensed;text-transform:uppercase;
  font-size:clamp(10px,.86vw,14px);letter-spacing:.01em;color:var(--dust);
  writing-mode:vertical-rl;transform:rotate(180deg);
}
.plan-ends{display:flex;justify-content:space-between;margin-top:14px}
.plan-ends span{font-family:var(--util);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--concrete)}

/* ---- Journey (weekend slide) ------------------------------------------ */
.journey{display:flex;align-items:stretch;gap:0;border:1px solid var(--seam)}
.leg{flex:1;padding:clamp(12px,2vh,20px) clamp(8px,1vw,14px);border-right:1px solid var(--seam);
  display:flex;flex-direction:column;gap:.5em}
.leg:last-child{border-right:0}
.leg.key{background:var(--paint);color:var(--asphalt)}
.leg .s{font-family:var(--util);font-size:9px;letter-spacing:.16em;color:var(--concrete)}
.leg.key .s{color:rgba(11,11,10,.6)}
.leg .m{font-family:var(--display);font-weight:700;font-stretch:condensed;text-transform:uppercase;
  font-size:clamp(12px,1.05vw,17px);letter-spacing:-.01em;line-height:1.05}

/* ---- Territory cards (partner brands) --------------------------------- */
.terr{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px);flex:1;min-height:0}
.card{border:1px solid var(--seam);padding:clamp(16px,2.6vh,28px);display:flex;flex-direction:column;
  gap:clamp(8px,1.3vh,14px);position:relative;background:var(--kerb);min-height:0}
.card .tag{font-family:var(--util);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--concrete)}
.card h3{font-family:var(--display);font-weight:700;font-stretch:condensed;text-transform:uppercase;
  font-size:clamp(18px,2.1vw,32px);letter-spacing:-.015em;line-height:1;color:var(--paint)}
.card ul{margin-top:auto;border-top:1px solid var(--seam);padding-top:clamp(8px,1.3vh,14px)}
.card li{list-style:none;font-size:clamp(11px,.82vw,13.5px);line-height:1.75;color:var(--dust)}
.card li::before{content:"— ";color:var(--concrete)}

/* ---- Model grid -------------------------------------------------------- */
.models{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--seam);
  border:1px solid var(--seam);flex:1;min-height:0}
.model{background:var(--asphalt);padding:clamp(12px,2.2vh,22px);display:flex;flex-direction:column;gap:.5em;min-height:0}
.model .a{font-family:var(--display);font-weight:700;font-stretch:condensed;font-size:clamp(24px,2.4vw,38px);
  color:var(--seam);line-height:.8}
.model .t{font-family:var(--display);font-weight:700;font-stretch:condensed;text-transform:uppercase;
  font-size:clamp(13px,1.2vw,19px);letter-spacing:-.01em;line-height:1.04}
.model .d{font-size:clamp(10px,.76vw,12.5px);line-height:1.5;color:var(--concrete)}

/* ---- Two-column value (success slide) --------------------------------- */
.value{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,44px);flex:1;min-height:0}
.value-col{display:flex;flex-direction:column;min-height:0}
.value-col > .h{font-family:var(--display);font-weight:700;font-stretch:condensed;text-transform:uppercase;
  font-size:clamp(15px,1.5vw,23px);letter-spacing:-.01em;padding-bottom:clamp(8px,1.2vh,13px);
  border-bottom:2px solid var(--paint);margin-bottom:clamp(8px,1.2vh,13px)}
.value-col.b > .h{border-bottom-color:var(--seam);color:var(--dust)}
.value-col li{list-style:none;font-size:clamp(11px,.85vw,14px);line-height:1.5;color:var(--dust);
  padding:clamp(6px,.95vh,10px) 0;border-bottom:1px solid var(--seam)}

/* ============================ 8. CLOSING ================================= */
#s15 .inner{justify-content:center;align-items:flex-start;gap:clamp(14px,2.4vh,26px)}
.close-h{font-family:var(--display);font-weight:700;font-stretch:condensed;text-transform:uppercase;overflow-wrap:break-word;
  font-size:clamp(30px,7.4vw,124px);line-height:.84;letter-spacing:-.03em;max-width:16ch}
.contact{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,56px);border-top:1px solid var(--seam);
  padding-top:clamp(14px,2.2vh,22px);margin-top:clamp(8px,1.6vh,18px)}
.contact div{display:flex;flex-direction:column;gap:5px}
.contact .k{font-family:var(--util);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--concrete)}
.contact .v{font-family:var(--util);font-size:clamp(11px,.85vw,13px);letter-spacing:.06em;color:var(--bone)}

/* ============================ 9. NAV CHROME ============================= */
/* SIGNATURE: the progress bar is a road centre line. The counter rides it
   like a distance marker. The street is the venue — and the navigation. */
.chrome{
  position:fixed;left:0;right:0;bottom:0;
  height:calc(var(--bar) + var(--sab));
  padding-bottom:var(--sab);            /* controls ride ABOVE the home indicator */
  padding-left:calc(var(--gut) + var(--sal));
  padding-right:calc(var(--gut) + var(--sar));
  display:flex;align-items:center;gap:clamp(10px,1.6vw,20px);
  background:linear-gradient(transparent,rgba(11,11,10,.94) 42%);
  z-index:20;
}
.track{position:relative;flex:1;height:2px;background:var(--seam)}
.track::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,var(--concrete) 0 14px,transparent 14px 28px);
  opacity:.35;
}
.track-fill{
  position:absolute;left:0;top:0;bottom:0;width:0;
  background:repeating-linear-gradient(90deg,var(--paint) 0 14px,transparent 14px 28px);
  transition:width .42s var(--ease);
}
.count{font-family:var(--util);font-size:11px;letter-spacing:.14em;color:var(--dust);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.count b{color:var(--paint);font-weight:400}
.ctrl{display:flex;gap:8px}
.ctrl button{
  /* 44x44 minimum touch target — WCAG 2.5.5 / Apple HIG */
  min-width:44px;min-height:44px;width:44px;height:44px;
  border:1px solid var(--seam);color:var(--dust);
  display:grid;place-items:center;font-family:var(--util);font-size:14px;
  transition:background .18s,color .18s,border-color .18s;
  touch-action:manipulation;          /* kill the 300ms tap delay */
  -webkit-tap-highlight-color:transparent;
}
.ctrl button:hover{background:var(--paint);color:var(--asphalt);border-color:var(--paint)}
.ctrl button[disabled]{opacity:.28;pointer-events:none}

/* ============================ 10. OVERVIEW =============================== */
.overview{
  position:fixed;inset:0;z-index:40;background:rgba(8,8,7,.97);
  padding-top:calc(clamp(24px,4vh,48px) + var(--sat));
  padding-bottom:calc(clamp(24px,4vh,48px) + var(--sab) + var(--bar));
  padding-left:calc(var(--gut) + var(--sal));
  padding-right:calc(var(--gut) + var(--sar));
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  display:none;
}
.overview.is-open{display:block}
.ov-head{display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:1px solid var(--seam);padding-bottom:14px;margin-bottom:clamp(16px,2.6vh,28px)}
.ov-head h4{font-family:var(--display);font-weight:700;font-stretch:condensed;text-transform:uppercase;
  font-size:clamp(18px,2vw,30px);letter-spacing:-.01em}
.ov-head span{font-family:var(--util);font-size:10px;letter-spacing:.2em;color:var(--concrete);text-transform:uppercase}
.ov-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:1px;background:var(--seam);border:1px solid var(--seam)}
.ov-item{background:var(--asphalt);padding:14px 14px 18px;text-align:left;
  display:flex;flex-direction:column;gap:8px;min-height:64px;
  transition:background .16s;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent}
.ov-item:hover,.ov-item:focus-visible{background:var(--kerb)}
.ov-item .n{font-family:var(--util);font-size:10px;letter-spacing:.14em;color:var(--concrete)}
.ov-item .t{font-family:var(--display);font-weight:700;font-stretch:condensed;text-transform:uppercase;
  font-size:15px;line-height:1.05;color:var(--dust)}
.ov-item.is-here .n{color:var(--paint)}
.ov-item.is-here .t{color:var(--bone)}


/* ============================ 12. MOTION ================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .slide.is-live .layer{animation:none!important}
}

/* ============================ 13. MOODBOARD ============================= */
/* Reference imagery. Mirrors the density of the original moodboard without
   copying its grid. ##EDIT files live in ./assets/mood-*.jpg */
.mood{
  flex:1;min-height:0;margin-top:clamp(14px,2.4vh,26px);
  display:grid;gap:clamp(6px,.7vw,11px);
  grid-template-columns:repeat(6,1fr);
  grid-template-rows:1.06fr .94fr;
}
.m{position:relative;overflow:hidden;background:var(--kerb);min-height:0}
.m picture,.shot picture{display:block;width:100%;height:100%}
.m img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:contrast(1.04) brightness(.94);
  transition:filter .3s var(--ease),transform .5s var(--ease);
}
.m::after{ /* hairline, keeps the mosaic reading as one plate */
  content:"";position:absolute;inset:0;border:1px solid rgba(233,229,219,.06);pointer-events:none;
}
.m1{grid-column:1;grid-row:1}
.m2{grid-column:2;grid-row:1}
.m3{grid-column:3/5;grid-row:1/3}      /* the street shot — the anchor */
.m4{grid-column:5/7;grid-row:1}
.m5{grid-column:1/3;grid-row:2}
.m6{grid-column:5;grid-row:2}
.m7{grid-column:6;grid-row:2}
.m3 img{filter:contrast(1.06) brightness(.97)}
.m3 figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(14px,2vh,22px) clamp(10px,1vw,15px) clamp(8px,1.2vh,12px);
  font-family:var(--util);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--paint);
  background:linear-gradient(transparent,rgba(11,11,10,.85));
}

/* ============================ 14. DRAWN DIAGRAMS ======================== */
/* Slides 05 and 06. Inline SVG, drawn in code — no image files, so there is
   nothing here that can 404 on a deploy. Colours inherit the deck tokens. */
.dia{
  position:relative;display:flex;flex-direction:column;height:100%;min-height:0;
  border:1px solid var(--seam);background:var(--kerb);
  padding:clamp(12px,2vh,20px) clamp(12px,1.6vw,22px) clamp(8px,1.2vh,12px);
}
.dia svg{flex:1;min-height:0;width:100%;height:100%;overflow:visible}
.dia figcaption{
  font-family:var(--util);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--concrete);padding-top:clamp(8px,1.2vh,12px);margin-top:clamp(8px,1.2vh,12px);
  border-top:1px solid var(--seam);
}
/* shared diagram primitives */
.dia text{font-family:var(--util);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  fill:var(--dust);text-anchor:middle}
.dia .d-sub{font-size:7.5px;letter-spacing:.14em;fill:var(--concrete)}
.d-link{stroke:var(--seam);stroke-width:1.5;stroke-dasharray:4 4}
.d-faint{opacity:.42}
.d-node circle{fill:var(--asphalt);stroke:var(--dust);stroke-width:1.5}
.d-here circle{fill:var(--paint);stroke:var(--paint)}
.d-here text{fill:var(--bone);font-size:12px;letter-spacing:.1em}
.d-here .d-sub{fill:var(--paint);font-size:7.5px}
.d-water{fill:var(--asphalt);opacity:.65}
.d-water-l{font-size:7.5px;fill:var(--concrete);text-anchor:start;letter-spacing:.2em}
/* street section */
.d-bldg{fill:var(--asphalt);stroke:var(--seam);stroke-width:1}
.d-win rect{fill:var(--seam)}
.d-front{fill:none;stroke:var(--paint);stroke-width:1;stroke-dasharray:3 3;opacity:.55}
.d-vert{font-size:7.5px;fill:var(--paint);letter-spacing:.14em}
.d-road{fill:var(--asphalt);stroke:var(--seam);stroke-width:1}
.d-centre{stroke:var(--paint);stroke-width:1.5;stroke-dasharray:9 9;opacity:.5}
.d-crowd circle{fill:var(--dust);opacity:.5}
.d-dim{stroke:var(--concrete);stroke-width:1}
.d-dim-l{font-size:7.5px;fill:var(--paint);letter-spacing:.16em}
.d-sky{font-size:7.5px;fill:var(--concrete);letter-spacing:.2em}

/* ---- Pull-quote panel (slide 10) -------------------------------------- */
.panel{
  border:1px solid var(--seam);background:var(--kerb);
  padding:clamp(16px,2.6vh,28px) clamp(14px,1.8vw,24px);
  display:flex;flex-direction:column;gap:clamp(10px,1.6vh,18px);justify-content:center;
}
.panel-q{
  font-family:var(--display);font-weight:700;font-stretch:condensed;text-transform:uppercase;
  font-size:clamp(19px,2.15vw,34px);line-height:1.02;letter-spacing:-.015em;color:var(--bone);
}
.panel-q em{font-style:normal;color:var(--paint)}


/* ============================ 15. PHOTOGRAPHY ========================== */
/* Full-bleed wash. Sits behind everything; the scrim protects the type.
   Deliberately heavy — these read as atmosphere, not as a record of an
   event that already happened. It also means the low source resolution
   never shows. ##EDIT the image per slide is set inline in index.html. */
.wash{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-repeat:no-repeat;
  filter:grayscale(.62) contrast(1.16) brightness(.6);
}
.wash::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,
    rgba(11,11,10,.96) 0%, rgba(11,11,10,.9) 34%,
    rgba(11,11,10,.62) 66%, rgba(11,11,10,.34) 100%);
}
/* the cover already has its own treatment — never double up */
#s1 .wash{display:none}

/* Inline photo panel (slide 09) */
.shot{position:relative;overflow:hidden;border:1px solid var(--seam);
  height:clamp(78px,13vh,168px);flex:0 0 auto;margin-bottom:clamp(6px,1vh,12px)}
.shot img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.45) contrast(1.08) brightness(.82)}
.shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(transparent 55%,rgba(11,11,10,.6));pointer-events:none}

/* Photo behind a territory card (slide 13) */
.card.has-shot::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--shot);background-size:cover;background-position:50% 42%;
  filter:grayscale(.7) contrast(1.1) brightness(.4);opacity:.55;
}
.card.has-shot::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(22,22,20,.86),rgba(22,22,20,.96));
}
.card.has-shot > *{position:relative;z-index:1}


/* ============================ 16. IMAGE FALLBACK ======================== */
/* Applied by script.js only when a file fails to load. The real images ship
   in assets/ — this exists so a bad deploy degrades quietly to texture
   rather than showing broken-image icons. */
.image-error{
  background-image:repeating-linear-gradient(45deg,
    var(--kerb) 0 9px, var(--asphalt) 9px 18px) !important;
  background-size:auto !important;
  filter:none !important;
}
img.image-error{
  min-height:56px;object-fit:contain;
  font-family:var(--util);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--concrete);
}
/* a failed wash or cover simply steps aside — the type still reads */
.wash.image-error,.cover-img.image-error{opacity:.5}
.wash.image-error::after{background:rgba(11,11,10,.8)}
.card.has-shot.image-error::before{display:none}

/* ==========================================================================
   17. RESPONSIVE
   Breakpoints: 1200 / 900 / 768 / 480.
   Mobile is NOT a scaled-down desktop — below 900px the deck stops being a
   fixed viewport-locked stage and becomes a scrolling document, because slide
   content is routinely taller than a phone screen.
   ========================================================================== */

/* ---- 1200: narrow laptops -------------------------------------------- */
@media (max-width:1200px){
  .cover{grid-template-columns:1fr .68fr}
  .models{grid-template-columns:repeat(2,1fr)}
}

/* ---- 900: PHONES + SMALL TABLETS — the structural switch --------------
   .deck was position:fixed and .slide overflow:hidden, so tall content was
   clipped with no way to reach it. Here the page scrolls normally instead. */
@media (max-width:900px){
  html,body{height:auto;overflow:visible}
  body{-webkit-overflow-scrolling:touch}

  .deck{position:static}
  .slide{
    position:relative;inset:auto;height:auto;
    min-height:100vh;            /* fallback  */
    min-height:100svh;           /* small viewport — address bar shown */
    min-height:100dvh;           /* dynamic — tracks the bar as it hides */
    overflow:visible;
    padding-top:calc(58px + var(--sat));
    padding-bottom:calc(var(--bar) + var(--sab) + 26px);
  }
  .inner{height:auto;min-height:0}

  /* everything stacks */
  .split,.split-7,.value,.terr,.mood{grid-template-columns:1fr;align-items:start}
  .split,.split-7,.value,.terr{gap:clamp(16px,3vh,26px)}
  .cover{grid-template-columns:1fr;grid-template-rows:1fr .8fr}
  .cover-r{border-left:0;border-top:1px solid var(--seam)}
  .cover-r::after{background:linear-gradient(180deg,var(--asphalt) 0%,rgba(11,11,10,.3) 40%,transparent 78%)}
  .models{grid-template-columns:1fr}
  .figure{font-size:clamp(64px,22vw,120px);opacity:.035}

  /* body copy never drops below 16px on a phone */
  .lede{font-size:clamp(16px,4.1vw,18px);max-width:none}
  .note{font-size:11px}
  .index .d{font-size:14px}
  .card li,.value-col li{font-size:14px}
  .model .d{font-size:13px}

  /* the street plan turns into a readable vertical list */
  .plan{display:block}
  .road{height:auto;min-height:0}
  .road::before{display:none}
  .zone{position:relative;width:100%!important;left:auto!important;height:auto;
    border-right:0;border-bottom:1px solid var(--seam);
    padding:13px 12px 13px 46px;justify-content:flex-start;min-height:48px}
  .zone .nm{writing-mode:horizontal-tb;transform:none;font-size:15px}
  .zone .lbl{left:12px}

  /* the weekend journey — this was the worst offender, ~1950px clipped */
  .journey{flex-direction:column}
  .leg{border-right:0;border-bottom:1px solid var(--seam);
    flex-direction:row;align-items:baseline;gap:12px;padding:12px 14px}
  .leg:last-child{border-bottom:0}
  .leg .m{font-size:16px}

  .index li{grid-template-columns:26px 1fr}

  /* The road line runs the full width of the screen rather than being
     squeezed between the counter and the buttons. Counter left, controls
     right, road across the top edge of the bar. */
  .chrome{justify-content:space-between}
  .track{position:absolute;left:0;right:0;top:0;width:auto;flex:none;height:2px}
  .track-fill{height:2px}

  .wash{filter:grayscale(.62) contrast(1.16) brightness(.5)}
  .wash::after{background:linear-gradient(180deg,rgba(11,11,10,.92),rgba(11,11,10,.78))}
  .shot{height:clamp(120px,22vh,200px)}
  .dia{min-height:280px}
  .dia svg{min-height:230px}

  /* moodboard: simplified 2-col, tiles stay big enough to read */
  .mood{grid-template-columns:repeat(2,1fr);grid-template-rows:none;height:auto;gap:8px}
  .m{aspect-ratio:1/1}
  .m1,.m2,.m6,.m7{grid-column:auto}
  .m3{grid-column:1/3;grid-row:auto;aspect-ratio:4/5}
  .m4,.m5{grid-column:1/3;aspect-ratio:16/9}
}

/* ---- 768: tablet portrait -------------------------------------------- */
@media (max-width:768px){
  .terr{gap:14px}
  .ov-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}

/* ---- 480: small phones ----------------------------------------------- */
@media (max-width:480px){
  .rail b{display:none}
  .count{font-size:12px}
  .ctrl{gap:8px}
  .mood{grid-template-columns:1fr}      /* 1 col — no unreadable tiles */
  .m,.m3,.m4,.m5{grid-column:auto;aspect-ratio:4/3}
  .m3{aspect-ratio:4/5}
  .ov-grid{grid-template-columns:1fr}
  .journey .leg .s{min-width:22px}
}

/* ---- LANDSCAPE PHONES ------------------------------------------------
   Short and wide. Keep more of the original two-column layout, and pull the
   vertical rhythm in so browser UI does not eat the slide. */
@media (max-width:900px) and (orientation:landscape) and (max-height:520px){
  .slide{
    min-height:100dvh;
    padding-top:calc(44px + var(--sat));
    padding-bottom:calc(var(--bar) + var(--sab) + 14px);
  }
  .split,.split-7,.value,.terr{grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,22px)}
  .cover{grid-template-columns:1fr .66fr;grid-template-rows:none}
  .cover-r{border-left:1px solid var(--seam);border-top:0}
  .models{grid-template-columns:repeat(3,1fr)}
  .mood{grid-template-columns:repeat(4,1fr)}
  .m,.m3,.m4,.m5{aspect-ratio:1/1;grid-column:auto}
  .m3{grid-column:span 2;aspect-ratio:2/1}
  .lede{font-size:14px}
  .figure{font-size:clamp(48px,12vh,90px)}
  .journey{flex-direction:row}
  .leg{border-right:1px solid var(--seam);border-bottom:0;flex-direction:column;padding:10px 8px}
  .leg .m{font-size:13px}
  .zone{padding:9px 10px 9px 40px;min-height:40px}
}

/* ---- hover is a desktop luxury; never depend on it -------------------- */
@media (hover:hover) and (pointer:fine){
  .m:hover img{filter:contrast(1.1) brightness(1.04);transform:scale(1.03)}
}
/* touch devices get the same affordance on tap-and-hold, no layout shift */
@media (hover:none){
  .m:active img{filter:contrast(1.1) brightness(1.04)}
  .ctrl button:active{background:var(--paint);color:var(--asphalt);border-color:var(--paint)}
  .ov-item:active{background:var(--kerb)}
}