body{font-size:16px}
.hero-plate-slot{position:relative;overflow:hidden;border-radius:var(--radius)}
.hero-plate-slot > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

header{
  min-height:64px;
  padding:10px max(16px,calc((100vw - 1600px)/2 + 16px));
}
header nav a{font-size:14px;padding:8px 12px}
header .logo em{font-size:14px;letter-spacing:1.2px}

.sheet{max-width:1600px;margin:0 auto;padding:16px 16px 60px}

.grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:minmax(84px,auto);
  grid-auto-flow:dense;
  gap:12px;
}

.tile{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:0 12px 32px rgba(14,16,21,.045);
  transition:border-radius .3s ease,box-shadow .3s ease;
}
.tile.auto{grid-row:auto;height:auto;min-height:0}
.tile.hidden{display:none}

.s3{grid-column:span 3}.s4{grid-column:span 4}.s5{grid-column:span 5}
.s6{grid-column:span 6}.s7{grid-column:span 7}.s8{grid-column:span 8}
.s9{grid-column:span 9}.s12{grid-column:1/-1}
.r1{grid-row:span 1}.r2{grid-row:span 2}.r3{grid-row:span 3}
.r4{grid-row:span 4}.r5{grid-row:span 5}

#thesis,#story,#narrative,#media,#flywheel,#judgment,#lineage,#portfolio,#gp,#tedTalk{scroll-margin-top:88px}

.opening{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:12px;
}
.opening > .hero-copy{grid-column:1/span 5;min-height:clamp(440px,42vw,520px)}
.opening > .hero-art,.opening > .hero-plate-slot{grid-column:6/-1;min-height:clamp(440px,42vw,520px)}
.opening > .media-feature{grid-column:6/-1}
.opening.has-featured-media{grid-template-rows:260px auto;align-items:stretch}
.opening.has-featured-media > .hero-copy{grid-row:1/3;min-height:520px}
.opening.has-featured-media > .hero-art{grid-row:1;min-height:260px}
.opening.has-featured-media > .media-feature{grid-row:2;padding-top:0}
.opening[data-layout="backdrop"]{
  width:100vw;margin-top:-16px;margin-left:calc(50% - 50vw);
  grid-template-rows:minmax(600px,calc(100svh - 64px)) auto;gap:0;
}
.opening[data-layout="backdrop"] > .hero-copy,
.opening[data-layout="backdrop"] > .hero-art,
.opening[data-layout="backdrop"] > .hero-plate-slot{
  grid-column:1/-1;grid-row:1;min-height:600px;border:0;border-radius:0;
}
.opening[data-layout="backdrop"] > .hero-art,
.opening[data-layout="backdrop"] > .hero-plate-slot{z-index:0}
.opening[data-layout="backdrop"] > .hero-art .cap{display:none}
.opening[data-layout="backdrop"] > .hero-copy{
  z-index:1;max-width:none;border-color:rgba(255,255,255,.18);
  padding-left:max(24px,calc((100vw - 1600px)/2 + 24px));
  padding-right:max(24px,calc((100vw - 1600px)/2 + 24px));
  background:linear-gradient(90deg,rgba(10,12,17,.88) 0%,rgba(10,12,17,.66) 38%,rgba(10,12,17,.06) 72%);
  box-shadow:none;color:#fff;
}
.opening[data-layout="backdrop"] > .hero-copy .kicker,
.opening[data-layout="backdrop"] > .hero-copy p{color:rgba(255,255,255,.78)}
.opening[data-layout="backdrop"] > .hero-copy .text-link{color:#fff}
.opening[data-layout="backdrop"] > .hero-copy h1,
.opening[data-layout="backdrop"] > .hero-copy p,
.opening[data-layout="backdrop"] > .hero-copy .hero-actions{max-width:610px}
.opening[data-layout="backdrop"] > .media-feature{grid-column:1/-1;grid-row:2}
.opening[data-layout="backdrop"].has-featured-media > .hero-copy,
.opening[data-layout="backdrop"].has-featured-media > .hero-art{grid-column:1/-1;grid-row:1;min-height:600px}
.opening[data-layout="backdrop"].has-featured-media > .media-feature{
  grid-column:1/-1;grid-row:2;padding:12px max(16px,calc((100vw - 1600px)/2 + 16px)) 0;
}
.hero-plate-slot,.gp-plate-slot{min-height:360px}
.gp-art{min-height:390px}

/* Angled chapter tape separates the interactive method from editorial sections. */
.band{
  grid-column:1/-1;
  display:flex;
  align-items:flex-end;
  gap:16px;
  padding:44px 2px 5px;
}
.band h2{
  font-family:var(--display);
  font-size:clamp(22px,2.4vw,32px);
  font-weight:var(--display-weight);
  letter-spacing:var(--display-tracking);
  line-height:1.1;
  transform:rotate(calc(-1.2deg + var(--tilt)));
  transform-origin:left bottom;
  padding:4px 13px;
  border-radius:4px;
}
.band p{
  max-width:58ch;
  padding-bottom:6px;
  color:var(--muted);
  font-family:var(--mono);
  font-size:14px;
  letter-spacing:.3px;
}
.band.b-cobalt h2{background:var(--cobalt);color:var(--on-strong)}
.band.b-teal h2{background:var(--teal);color:#0E1015}
.band.b-amber h2{background:var(--amber);color:#0E1015}
.band.b-magenta h2{background:var(--magenta);color:var(--on-strong)}
.band.b-violet h2{background:var(--violet);color:var(--on-strong)}
.band.b-white h2{background:var(--ink);color:var(--on-ink)}

.section-intro{
  display:grid;
  grid-template-columns:54px minmax(0,760px);
  gap:16px;
  align-items:start;
  margin-bottom:28px;
}
.section-intro.compact{margin-bottom:18px}
.section-index{
  display:grid;
  place-items:center;
  width:42px;height:42px;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--muted);
  font-family:var(--mono);
  font-size:14px;
}
.section-intro h2{
  font-family:var(--display);
  font-size:clamp(28px,4vw,52px);
  font-weight:var(--display-weight);
  letter-spacing:var(--display-tracking);
  line-height:1.04;
}
.section-intro .eyebrow{
  margin-bottom:6px;
  color:var(--muted);
  font-family:var(--mono);
  font-size:14px;
  letter-spacing:1.4px;
  text-transform:uppercase;
}
.section-dek{max-width:62ch;margin-top:12px;color:var(--muted);font-size:17px}

.story-section,.song-section,.judgment-section,.portfolio-section,.media-feature{padding-top:54px}
.story-section{
  display:grid;
  grid-template-columns:minmax(260px,5fr) minmax(440px,7fr);
  gap:40px;
  align-items:start;
}
.story-section .section-intro{grid-template-columns:54px minmax(0,1fr);margin:0}

.portfolio-section{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:12px;
}
.portfolio-section > *{grid-column:1/-1}
.portfolio-listing{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:12px;
}
.portfolio-listing:empty{display:none}
footer{font-size:14px}

@media (max-width:1024px){
  .grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(80px,auto)}
  .s3,.s4{grid-column:span 3}
  .s5,.s6,.s7,.s8,.s9,.s12{grid-column:1/-1}
  .opening > .hero-copy{grid-column:1/span 3}
  .opening > .hero-art,.opening > .hero-plate-slot{grid-column:4/-1}
  .opening > .media-feature{grid-column:1/-1}
  .opening.has-featured-media{grid-template-rows:auto auto}
  .opening.has-featured-media > .hero-copy{grid-column:1/span 3;grid-row:1;min-height:480px}
  .opening.has-featured-media > .hero-art{grid-column:4/-1;grid-row:1;min-height:480px}
  .opening.has-featured-media > .media-feature{grid-column:1/-1;grid-row:2}
  .story-section{grid-template-columns:1fr;gap:26px}
  .portfolio-listing{grid-template-columns:repeat(6,minmax(0,1fr))}
}

@media (max-width:700px){
  header{padding:8px 10px;gap:6px;min-height:54px}
  header .logo{font-size:16px;line-height:1}
  header .logo em{display:none}
  header nav{gap:0;margin-left:auto}
  header nav a{font-size:10px;padding:7px 6px}

  .sheet{padding:10px 10px 48px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(76px,auto);gap:9px}
  .s3,.s4,.s5,.s6,.s7,.s8,.s9,.s12{grid-column:1/-1}
  .opening{grid-template-columns:1fr;grid-template-rows:none;gap:9px}
  .opening > .hero-copy,.opening > .hero-art,.opening > .hero-plate-slot,.opening > .media-feature,
  .opening.has-featured-media > .hero-copy,.opening.has-featured-media > .hero-art,.opening.has-featured-media > .media-feature{
    grid-column:1;grid-row:auto;
  }
  .opening > .hero-copy{order:1;min-height:340px}
  .opening > .media-feature{order:2;padding-top:0}
  .opening > .hero-art,.opening > .hero-plate-slot{order:3;min-height:330px}
  .opening[data-layout="backdrop"]{
    width:100vw;margin-top:-10px;margin-left:-10px;
    grid-template-rows:minmax(560px,calc(100svh - 54px)) auto;
  }
  .opening[data-layout="backdrop"] > .hero-copy,
  .opening[data-layout="backdrop"] > .hero-art,
  .opening[data-layout="backdrop"] > .hero-plate-slot,
  .opening[data-layout="backdrop"].has-featured-media > .hero-copy,
  .opening[data-layout="backdrop"].has-featured-media > .hero-art{
    grid-column:1;grid-row:1;min-height:560px;order:initial;border-radius:0;
  }
  .opening[data-layout="backdrop"] > .hero-copy{
    padding:26px 20px;
    background:linear-gradient(0deg,rgba(10,12,17,.94) 0%,rgba(10,12,17,.6) 53%,rgba(10,12,17,.04) 82%);
  }
  .opening[data-layout="backdrop"] > .media-feature,
  .opening[data-layout="backdrop"].has-featured-media > .media-feature{grid-column:1;grid-row:2;order:initial;padding:10px}
  .gp-art{min-height:330px}
  .band{align-items:flex-start;flex-direction:column;gap:8px;padding-top:34px}
  .band p{padding:0 4px}
  .section-intro,.story-section .section-intro{grid-template-columns:1fr;gap:12px}
  .section-index{width:36px;height:36px}
  .story-section,.song-section,.judgment-section,.portfolio-section,.media-feature{padding-top:40px}
  .portfolio-listing{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  footer{padding:24px 14px 92px}
}