/* ============================================================
   PHEAN.PARIS — v2 · "Design studio desktop" metaphor
   Palette: deep purple / champagne gold / cream / rich black
   ============================================================ */

/* Eiffel tower cursor (hotspot at the tip — 16,2) */
@media (hover: hover) and (pointer: fine){
  html, body{
    cursor: url('cursors/eiffel.svg') 16 2, auto;
  }
  a, button, [role="button"], .row, [onclick], input, textarea, select, label{
    cursor: url('cursors/eiffel.svg') 16 2, pointer;
  }
}

:root {
  /* burgundy replaces purple — Gloria Osteria vibe: dark wood, wine, amber lamps */
  --burgundy: #6E1A18;
  --burgundy-2: #4A110F;
  --burgundy-deep: #2E0908;
  --chartreuse: #C8D147;
  --chartreuse-2: #b4bd35;
  --cream: #F4EFE6;
  --cream-2: #EFE7D7;
  --cream-3: #e5dcc7;
  --black: #0E0A12;
  --ink: #1a1014;

  /* chartreuse replaces all gold / brass across the site */
  --purple: var(--burgundy);
  --purple-2: var(--burgundy-2);
  --purple-deep: var(--burgundy-deep);
  --gold: var(--chartreuse);
  --gold-soft: var(--chartreuse-2);
  --brass: var(--chartreuse);
  --brass-soft: var(--chartreuse-2);

  --mute: rgba(26,16,20,0.55);
  --rule: rgba(200,209,71,0.6);
  --rule-ink: rgba(26,16,20,0.15);

  --serif: "PP Editorial New", "GT Sectra", "Tiempos Headline", Georgia, serif;
  --sans: "Inter", "Neue Haas Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  --pad-x: clamp(16px, 3vw, 36px);
}

* { box-sizing: border-box; }
html,body{margin:0;padding:0;}
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;}

/* tiny Eiffel Tower cursor — bespoke pointer across the whole page */
html, body{
  cursor: url('cursors/eiffel.svg') 10 2, auto;
}
a, button, [role="button"], [data-open], [data-close], [data-min], [data-max],
.folder, .row, .dock__btn, .mintray__chip, .mintray__chip .x, input, select, textarea, label{
  cursor: url('cursors/eiffel.svg') 10 2, pointer;
}
input[type="text"], input[type="email"], textarea{
  cursor: url('cursors/eiffel.svg') 10 2, text;
}

.mono{font-family:var(--mono);font-size:10.5px;letter-spacing:0.18em;text-transform:uppercase;}
.serif{font-family:var(--serif);}
.italic{font-style:italic;}

/* ===================== DESKTOP CHROME (always on top) ===================== */
.menubar{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  display:flex; align-items:center; justify-content:space-between;
  padding: 8px var(--pad-x);
  background: color-mix(in oklab, var(--cream) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--rule);
  font-size: 12px;
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.menubar__left{display:flex;align-items:center;gap:20px;}
.menubar__right{display:flex;align-items:center;gap:18px;}
.menubar__mark{
  font-family: var(--serif);
  font-size: 15px; letter-spacing: -0.01em;
  display:flex; align-items:baseline; gap:8px;
}
.menubar__mark em{color:var(--purple);font-style:italic;}
.menubar__mark .dot{width:4px;height:4px;border-radius:50%;background:var(--gold);display:inline-block;transform:translateY(-2px);}
.menubar__item{
  font-size:12px; letter-spacing:0.02em; color:var(--ink); opacity:.78;
  cursor: pointer; padding: 2px 6px; border-radius: 4px;
}
.menubar__item:hover{background: var(--purple); color: var(--cream); opacity:1;}
.menubar__clock{font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: var(--ink); opacity: .7;}
.menubar__battery{
  display:inline-flex; align-items:center; gap:4px;
  font-family: var(--mono); font-size: 10px; color: var(--mute);
}
.menubar__battery::before{
  content:""; display:inline-block;
  width:18px; height:8px; border:1px solid var(--ink); border-radius:2px;
  background: linear-gradient(to right, var(--gold) 76%, transparent 76%);
  box-shadow: 2px 0 0 var(--ink);
  opacity:.7;
}

@media (max-width: 720px){
  .menubar__right .menubar__item:nth-child(-n+2){display:none;}
}

/* ===================== DESKTOP SURFACE ===================== */
.desktop{
  min-height: 100vh;
  padding: 60px var(--pad-x) 140px;
  position: relative;
  background:
    radial-gradient(60% 50% at 70% 20%, rgba(201,162,101,0.08), transparent 70%),
    radial-gradient(50% 40% at 20% 80%, rgba(60,16,83,0.06), transparent 70%),
    var(--cream);
}

.desktop__header{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  padding: 20px 0 36px;
  align-items: end;
}
.desktop__title{
  font-family: var(--serif);
  font-size: clamp(72px, 11vw, 220px);
  line-height: 0.82;
  letter-spacing: -0.04em;
  margin: 0;
}
.desktop__title em{font-style:italic; color:var(--purple);}
.desktop__title .amp{font-style:italic; color:var(--gold); display:inline-block; padding: 0 .08em;}
.desktop__meta{
  text-align: right;
  display: flex; flex-direction: column; gap: 6px;
}
.desktop__meta .line{font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute);}
.desktop__meta .big{
  font-family: var(--serif); font-style: italic;
  font-size: clamp(22px, 2.2vw, 34px);
  color: var(--purple);
  line-height: 1;
}

.desktop__deck{
  max-width: 52ch;
  font-family: var(--serif);
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.4;
  padding: 18px 0 28px;
  border-top: 1px solid var(--rule);
}
.desktop__deck em{color: var(--purple); font-style: italic;}

.desktop__subhead{
  display:flex; justify-content:space-between; align-items:baseline;
  padding-bottom: 10px; margin-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.desktop__subhead .label{font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute);}

/* ===================== FOLDERS (desktop grid) ===================== */
.folders{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 28px clamp(16px, 2vw, 36px);
  padding: 10px 0 40px;
}
.folder{
  display:flex; flex-direction: column; align-items:center; text-align:center;
  gap: 8px;
  cursor: pointer;
  padding: 10px 6px;
  border-radius: 10px;
  transition: background .15s;
  position: relative;
}
.folder:hover{background: rgba(60,16,83,0.06);}
.folder:focus{outline: 2px dashed var(--purple); outline-offset: 2px; background: rgba(60,16,83,0.08);}
.folder__icon{
  width: 96px; height: 74px; position: relative;
  filter: drop-shadow(0 6px 12px rgba(14,10,18,0.12));
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.folder:hover .folder__icon{transform: translateY(-4px) rotate(-1.5deg);}
.folder__icon svg{width:100%;height:100%;display:block;}
.folder__name{
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.folder__name em{color: var(--purple); font-style: italic;}
.folder__count{
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--mute);
}
.folder__tag{
  position: absolute; top: 2px; right: 8px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .15em;
  padding: 2px 6px; border-radius: 999px;
  background: var(--gold); color: var(--purple-deep);
  text-transform: uppercase;
}
.folder.is-file .folder__icon{width: 64px; height: 80px;}

/* ===================== STICKY NOTE + TICKET on desktop ===================== */
.sticky{
  position: absolute;
  background: var(--gold);
  color: var(--purple-deep);
  padding: 18px 20px;
  width: 220px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.25;
  transform: rotate(-3deg);
  box-shadow: 0 10px 24px rgba(14,10,18,0.15);
  z-index: 3;
}
.sticky::before{
  content: ""; position: absolute; top: -8px; left: 50%;
  width: 60px; height: 16px; background: rgba(14,10,18,0.2);
  transform: translateX(-50%) rotate(1deg);
}
.sticky .mono{display:block; font-style: normal; color: var(--purple-deep); margin-bottom:6px;}

.ticket{
  position: absolute;
  background: var(--cream);
  border: 1px solid var(--ink);
  color: var(--ink);
  width: 260px;
  padding: 0;
  transform: rotate(2deg);
  box-shadow: 0 10px 24px rgba(14,10,18,0.12);
  z-index: 3;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.ticket__top{padding: 10px 14px; border-bottom: 1px dashed var(--ink);}
.ticket__big{
  font-family: var(--serif); font-style: italic;
  font-size: 34px; letter-spacing: -0.02em;
  color: var(--purple); text-transform: none; line-height: 1;
  padding: 12px 14px 6px;
}
.ticket__row{
  display:grid; grid-template-columns: 1fr 1fr;
  padding: 8px 14px;
  border-top: 1px dashed var(--rule-ink);
}
.ticket__row span:last-child{text-align:right;}
.ticket__bottom{
  padding: 12px 14px; background: var(--purple); color: var(--cream);
  display:flex; justify-content:space-between; align-items:baseline;
}
.ticket__bottom em{font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--gold); letter-spacing: -0.01em; text-transform: none;}

@media (max-width: 900px){
  .sticky, .ticket{ position: static; transform: none; margin: 12px 0; width: 100%; max-width: 360px; }
}

/* ===================== MODAL "WINDOW" (when you click a folder) ===================== */
.windowback{
  position: fixed; inset: 0; z-index: 60;
  background: rgba(14,10,18,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: flex-start; justify-content: center;
  padding: clamp(20px, 4vh, 56px) var(--pad-x);
  overflow-y: auto;
  opacity: 0;
  transition: opacity .25s ease;
}
.windowback.is-open{display:flex; opacity:1;}

.win{
  width: min(1100px, 100%);
  background: var(--cream);
  border: 1px solid var(--ink);
  box-shadow: 0 30px 80px rgba(14,10,18,0.4);
  border-radius: 6px;
  overflow: hidden;
  transform: translateY(24px) scale(0.98);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s;
  opacity: 0;
}
.windowback.is-open .win{transform: none; opacity: 1;}

.win__chrome{
  display:flex; align-items:center; gap: 10px;
  padding: 10px 14px;
  background: var(--cream-2);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.win__dots{display:flex; gap: 6px; position: relative; z-index: 1;}
.win__path{
  position: absolute; left: 0; right: 0;
  text-align: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mute);
  pointer-events: none;
}
.win__dots button{
  width: 12px; height: 12px; border-radius: 50%;
  display: inline-block; padding: 0;
  border: 1px solid rgba(0,0,0,0.1);
  cursor: pointer; position: relative;
  transition: transform .15s;
}
.win__dots button:hover{ transform: scale(1.1); }
.win__dots button:hover::after{
  position: absolute; inset: 0;
  display:flex; align-items:center; justify-content:center;
  font-size: 9px; font-weight: 700; color: rgba(0,0,0,0.6);
  font-family: var(--mono);
}
.win__dots .dot-close{ background:#E35D4E; }
.win__dots .dot-min{ background:#E6B94E; }
.win__dots .dot-max{ background:#66A86B; }
.win__dots .dot-close:hover::after{ content: "×"; font-size: 12px; }
.win__dots .dot-min:hover::after{ content: "–"; font-size: 12px; }
.win__dots .dot-max:hover::after{ content: "+"; font-size: 10px; }

/* window states */
.win.is-min{
  transform: translateY(60vh) scale(.12) translateX(-40vw) !important;
  opacity: 0 !important;
  transition: transform .5s cubic-bezier(.4,.1,.6,1.1), opacity .4s ease !important;
  pointer-events: none;
}
.windowback.is-hidden{ display:none !important; }
.win.is-max{
  width: 100% !important;
  max-width: none !important;
  height: 100vh !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  border-radius: 0 !important;
}
.windowback.is-max{
  padding: 0 !important;
}

/* Minimize tray — docked chips at the bottom of the viewport */
.mintray{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 78px;
  z-index: 80;
  display: flex; gap: 8px;
  pointer-events: none;
  max-width: calc(100vw - 40px);
  flex-wrap: wrap; justify-content: center;
}
.mintray__chip{
  pointer-events: auto;
  background: var(--cream);
  border: 1px solid var(--rule-ink);
  border-radius: 8px;
  padding: 8px 8px 8px 12px;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.25), 0 0 0 1px rgba(46,9,8,.08);
  animation: chipIn .45s cubic-bezier(.2,.8,.2,1);
  transition: transform .15s ease, box-shadow .15s ease;
}
.mintray__chip:hover{ transform: translateY(-2px); box-shadow: 0 14px 38px rgba(0,0,0,.3); }
.mintray__chip .ico{
  width: 14px; height: 14px; border-radius: 3px;
  background: var(--burgundy); color: var(--cream);
  display:grid; place-items:center;
  font-family: var(--serif); font-style: italic; font-size: 10px;
  letter-spacing: 0;
}
.mintray__chip .x{
  display:grid; place-items:center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: transparent;
  color: var(--mute);
  font-family: var(--sans); font-size: 14px; letter-spacing: 0;
  transition: background .15s ease, color .15s ease;
}
.mintray__chip .x:hover{ background: var(--burgundy); color: var(--cream); }
@keyframes chipIn{
  from{ transform: translateY(40px) scale(.7); opacity: 0;}
  to{ transform: none; opacity: 1;}
}
.win__path{
  flex:1; text-align: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mute);
}
.win__close{
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em;
  color: var(--ink); padding: 4px 10px; border: 1px solid var(--ink); border-radius: 999px;
}
.win__close:hover{background: var(--ink); color: var(--cream);}

.win__body{
  padding: clamp(24px, 4vw, 56px);
  max-height: calc(100vh - 160px);
  overflow-y: auto;
}
.win__head{
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: baseline; gap: 20px;
  padding-bottom: 12px; margin-bottom: 28px;
  border-bottom: 1px solid var(--rule);
}
.win__num{font-family: var(--mono); font-size: 11px; letter-spacing: .22em; color: var(--mute);}
.win__title{
  font-family: var(--serif);
  font-size: clamp(40px, 6vw, 80px);
  line-height: .95; letter-spacing: -0.02em; margin: 0;
}
.win__title em{color: var(--purple); font-style: italic;}
.win__folio{font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; color: var(--mute);}

/* ===================== WINDOW CONTENT STYLES ===================== */

/* STORY */
.w-story{
  display:grid; grid-template-columns: 5fr 7fr; gap: clamp(20px, 4vw, 56px);
  align-items: start;
}
.w-story figure{margin:0; aspect-ratio: 4/5; background:var(--purple-deep); overflow:hidden;}
.w-story figure img{width:100%;height:100%;object-fit:cover;}
.w-story p{
  font-family: var(--serif); font-size: 18px; line-height: 1.45; margin: 0 0 1em; max-width: 54ch;
}
.w-story p em{color: var(--purple); font-style: italic;}
.w-story .lede::first-letter{
  font-family: var(--serif); font-size: 4.6em;
  float: left; line-height: .85; padding: 4px 10px 0 0;
  color: var(--purple); font-style: italic;
}
@media (max-width: 800px){ .w-story{grid-template-columns: 1fr;} }

/* DAY */
.w-day{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,3vw,40px);}
.day-card{
  border: 1px solid var(--rule);
  padding: 24px;
  display:flex; flex-direction:column; gap: 12px;
  min-height: 320px;
  background: var(--cream-2);
  position: relative;
}
.day-card::before{
  content:""; position:absolute; top: 0; left: 24px; right: 24px; height: 1px; background: var(--gold);
}
.day-card .time{font-family:var(--mono); font-size:11px; letter-spacing:.22em; color: var(--purple);}
.day-card h3{
  font-family: var(--serif); font-size: clamp(32px, 3.4vw, 52px);
  line-height:.95; letter-spacing:-.02em; margin:0;
}
.day-card h3 em{font-style:italic; color: var(--purple);}
.day-card .venue{font-family:var(--serif); font-style:italic; font-size: 18px;}
.day-card .addr{font-family: var(--mono); font-size: 10.5px; line-height: 1.6; letter-spacing: .15em; color: var(--mute); text-transform: uppercase;}
.day-card .note{
  margin-top:auto; padding-top: 12px; border-top: 1px dashed var(--rule-ink);
  font-size: 14px; line-height: 1.5;
}
.day-card .note strong{color:var(--purple); font-weight: 500;}
@media (max-width: 720px){ .w-day{grid-template-columns: 1fr;} }

/* PARTY */
.w-party__intro{
  display:grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 36px;
}
.w-party__intro .lede{
  font-family: var(--serif); font-size: clamp(20px, 2vw, 26px); line-height: 1.25;
}
.w-party__intro .lede em{color: var(--purple); font-style: italic;}
.w-party__intro .body{font-size: 14.5px; line-height: 1.55; color: var(--ink); opacity: .82;}
.w-party__grid{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 44px) clamp(16px, 2vw, 28px);
}
.portrait{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap: 16px;
  position: relative;
}
.portrait__frame{
  position: relative; width: 100%; aspect-ratio: 1;
  border-radius: 50%; overflow: hidden;
  background: var(--cream-3);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.portrait__frame::before{
  content:""; position:absolute; inset: 8px; border-radius: 50%;
  border: 1px dashed rgba(201,162,101,0.4);
  opacity: 0; transition: opacity .3s; z-index: 2;
}
.portrait:hover .portrait__frame::before{opacity:1;}
.portrait__frame img{width:100%;height:100%;object-fit:cover; transition: transform 1s cubic-bezier(.2,.8,.2,1);}
.portrait:hover .portrait__frame img{transform: scale(1.04);}
.portrait__tag{
  position:absolute; top: -2px; left: 6px; z-index: 3;
  font-family:var(--mono); font-size: 9.5px; letter-spacing: .18em;
  background: var(--cream); padding: 0 6px; color: var(--mute);
}
.portrait__name{font-family: var(--serif); font-size: clamp(20px, 1.6vw, 26px); line-height: 1.05; letter-spacing: -0.01em;}
.portrait__role{font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--purple); font-weight: 500; margin-top: 6px;}
.portrait__desc{font-family: var(--serif); font-style: italic; font-size: 13.5px; line-height: 1.3; color: var(--ink); opacity: .78; max-width: 24ch; margin-top: 6px;}
@media (max-width: 900px){ .w-party__grid{grid-template-columns: repeat(3, 1fr);} }
@media (max-width: 600px){
  .w-party__intro{grid-template-columns: 1fr;}
  .w-party__grid{grid-template-columns: repeat(2, 1fr); gap: 28px 16px;}
}

/* FILE: single doc (how we got here / plan) */
.w-doc{
  max-width: 64ch;
  font-family: var(--serif); font-size: 18px; line-height: 1.5;
}
.w-doc p{margin: 0 0 1em;}
.w-doc p em{color: var(--purple); font-style: italic;}

/* MAP */
.w-map{
  display:grid; grid-template-columns: 5fr 7fr; gap: clamp(20px, 4vw, 44px);
  align-items: start;
}
.w-map p{font-family:var(--serif); font-size: 18px; line-height: 1.45; margin: 0 0 .9em; max-width: 40ch;}
.w-map p em{color:var(--purple); font-style: italic;}
.w-map .legend{margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); display:grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;}
.w-map .legend li{list-style: none; display:flex; align-items:baseline; gap: 10px; font-size: 12px;}
.w-map .legend .pin{width: 10px; height: 10px; border-radius: 50%;}
.w-map__frame{
  position: relative; aspect-ratio: 4/3;
  border: 1px solid var(--ink); overflow: hidden; background: var(--cream-2);
}
.w-map__frame iframe{width:100%; height:100%; border:0; display:block;}
.w-map__cta{
  display:inline-flex; align-items:center; gap: 10px;
  padding: 12px 22px; border: 1px solid var(--ink); border-radius: 999px;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500;
  margin-top: 16px;
}
.w-map__cta:hover{background: var(--ink); color: var(--cream);}
@media (max-width: 800px){ .w-map{grid-template-columns: 1fr;} }

/* GALLERY LINK-OUT CARD (inside desktop surface) */
.linkout{
  grid-column: 1 / -1;
  margin-top: 16px;
  padding: 26px 28px;
  background: var(--purple);
  color: var(--cream);
  border-radius: 6px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.linkout h3{font-family: var(--serif); font-size: clamp(28px, 3.2vw, 48px); line-height: .95; letter-spacing: -0.02em; margin: 0 0 6px;}
.linkout h3 em{color: var(--gold); font-style: italic;}
.linkout p{font-family: var(--serif); font-style: italic; font-size: 15px; margin: 0; opacity: .85;}
.linkout__go{
  padding: 14px 22px; border-radius: 999px;
  background: var(--gold); color: var(--purple-deep);
  font-family: var(--sans); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500;
  white-space: nowrap;
}
.linkout__go:hover{background: var(--cream);}
@media (max-width: 600px){ .linkout{grid-template-columns: 1fr;} }

/* ===================== FILM ROLL (horizontal, continuous) ===================== */
.roll{
  margin-top: 24px;
  background: var(--black);
  overflow: hidden;
  border-radius: 6px;
  position: relative;
  padding: 26px 0;
  border: 1px solid rgba(244,239,230,0.08);
}
.roll::before, .roll::after{
  content:""; position:absolute; left:0; right:0; height:12px;
  background-image: radial-gradient(circle at 11px 6px, var(--cream) 0 3.5px, transparent 4.5px);
  background-size: 24px 12px; background-repeat: repeat-x; opacity: .9;
}
.roll::before{top:6px;} .roll::after{bottom:6px;}
.roll__track{
  display:flex; gap: 8px; padding: 24px 0; width: max-content;
  animation: rollx 120s linear infinite;
}
.roll:hover .roll__track{animation-play-state: paused;}
@keyframes rollx{
  0%{transform: translateX(0);}
  100%{transform: translateX(-50%);}
}
.roll__frame{
  flex: 0 0 auto;
  width: clamp(180px, 19vw, 260px);
  aspect-ratio: 3/2;
  background: #1a1420;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(201,162,101,0.15);
}
.roll__frame img{width:100%; height:100%; object-fit: cover; filter: saturate(.9) contrast(1.02);}
.roll__frame .num{position:absolute; top: 4px; right: 6px; font-family: var(--mono); font-size: 9px; letter-spacing: .15em; color: var(--gold); opacity: .7;}
.roll--slim{ padding: 14px 0; }
.roll--slim .roll__frame{ width: clamp(144px, 14vw, 200px); }

.roll__cap{
  display:flex; justify-content: space-between; padding: 8px 16px 0;
  color: rgba(244,239,230,0.55);
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
}

/* ===================== COUNTDOWN TAPE (motion) ===================== */
.tape{
  margin-top: 20px;
  background: var(--purple);
  color: var(--cream);
  border-radius: 6px;
  padding: 22px 28px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  position: relative;
  overflow: hidden;
}
.tape__nums{display:flex; gap: 28px; align-items: baseline; flex-wrap: wrap;}
.tape__cell{display:flex; flex-direction:column; align-items: flex-start; gap: 2px;}
.tape__val{
  font-family: var(--serif); font-style: italic;
  font-size: clamp(44px, 6vw, 80px); line-height: .9; letter-spacing: -0.02em;
  color: var(--gold); font-feature-settings: "tnum" 1;
  position: relative;
}
.tape__val.is-tick{animation: tick .4s ease;}
@keyframes tick{
  0%{transform: translateY(0); opacity: 1;}
  40%{transform: translateY(-6px); opacity: .6;}
  100%{transform: translateY(0); opacity: 1;}
}
.tape__lbl{font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: rgba(244,239,230,.7);}
.tape__side{font-family: var(--serif); font-style: italic; font-size: clamp(16px, 1.6vw, 22px); max-width: 22ch; color: var(--cream);}
.tape__side em{color: var(--gold);}

/* ===================== DOCK ===================== */
.dock{
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 80;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: color-mix(in oklab, var(--cream) 70%, transparent);
  border: 1px solid var(--rule);
  border-radius: 999px;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 12px 30px rgba(14,10,18,0.15);
  max-width: calc(100vw - 32px);
  overflow-x: auto;
}
.dock::-webkit-scrollbar{display:none;}
.dock{scrollbar-width:none;}
.dock__btn{
  display: inline-flex; align-items:center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink); opacity: .75; white-space: nowrap;
  transition: all .2s;
}
.dock__btn:hover{background: var(--ink); color: var(--cream); opacity: 1;}
.dock__btn.is-primary{background: var(--purple); color: var(--cream); opacity: 1;}
.dock__btn.is-primary:hover{background: var(--purple-2);}
.dock__btn.is-gold{background: var(--gold); color: var(--purple-deep); opacity: 1;}
.dock__btn.is-gold:hover{background: var(--cream);}
.dock__sep{width:1px; height: 20px; background: var(--rule-ink);}

@media (max-width: 560px){
  .dock__btn{padding: 8px 10px; font-size: 9.5px; letter-spacing: .12em;}
}

/* ===================== REVEAL ===================== */
.reveal{opacity:0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);}
.reveal.is-in{opacity:1; transform:none;}

/* HIDE original long layout */
.legacy{display:none!important;}

/* ============================================================
   ROWS-FIRST STAGE (v3)
   ============================================================ */
.stage{
  position: relative;
  min-height: 100vh;
  height: 100vh;
  padding: 52px var(--pad-x) 40px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 24px;
  overflow: hidden;
  background:
    radial-gradient(60% 50% at 80% 15%, rgba(200,209,71,0.08), transparent 70%),
    radial-gradient(50% 40% at 10% 85%, rgba(92,24,32,0.06), transparent 70%),
    var(--cream);
}

/* top/bottom strips replace absolute corners */
.strip{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}
.strip--top{ align-items: end; }
.strip__side{
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .85;
}
.strip__side--right{ text-align: right; align-items: flex-end; }
.strip__line{
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
  font-style: normal;
}
.strip__line em{ color: var(--purple); font-style: italic; }

.corner{
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 5;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .9;
}
.corner--tl{ top: 60px; left: var(--pad-x); }
.corner--tr{ top: 60px; right: var(--pad-x); text-align: right; align-items: flex-end; }
.corner--bl{ bottom: 24px; left: var(--pad-x); }
.corner--br{ bottom: 24px; right: var(--pad-x); text-align: right; align-items: flex-end; }
.corner__line{
  font-family: var(--serif);
  font-style: normal;
  font-size: 18px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
}
.corner__line em{ color: var(--purple); font-style: italic; }

.rows{
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.row{
  all: unset;
  display: grid;
  grid-template-columns: minmax(120px, 14%) 1fr auto;
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  padding: 0 clamp(12px, 2vw, 28px);
  flex: 1 1 0;
  min-height: 0;
  cursor: pointer;
  border-top: 1px solid var(--ink);
  color: var(--ink);
  position: relative;
  overflow: hidden;
  transition: color .35s ease, padding-left .45s cubic-bezier(.2,.8,.2,1);
}
.row:last-child{ border-bottom: 1px solid var(--ink); }
.row::before{
  content: "";
  position: absolute; inset: 0;
  background: var(--purple);
  transform: translateX(-101%);
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
  z-index: 0;
}
.row > *{ position: relative; z-index: 1; }
.row:hover, .row:focus-visible{
  color: var(--cream);
  padding-left: clamp(24px, 4vw, 56px);
}
.row:hover::before, .row:focus-visible::before{
  transform: translateX(0);
}

.row__num{
  font-family: var(--serif);
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-feature-settings: "lnum" 1, "tnum" 1;
  color: var(--ink);
  transition: color .35s ease;
}
.row:hover .row__num{ color: var(--chartreuse); }

.row__name{
  font-family: var(--serif);
  font-size: clamp(38px, 5.4vw, 72px);
  line-height: 1.18;
  letter-spacing: -0.03em;
  padding-bottom: 0.22em;
}
.row__name em{
  font-style: italic;
  color: var(--purple);
  transition: color .35s ease;
}
.row:hover .row__name em{ color: var(--chartreuse); }

.row__side{
  display: inline-flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute);
  transition: color .35s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
.row:hover .row__side{
  color: var(--cream);
  transform: translateX(-8px);
}
.row__cap{ white-space: nowrap; }

.row__arrow{
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(28px, 3vw, 48px);
  color: var(--purple);
  display: inline-block;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), color .35s ease;
}
.row:hover .row__arrow{
  color: var(--gold);
  transform: translateX(10px);
}

/* CTA row: pre-emphasized */
.row--cta{
  background: var(--cream-2);
}
.row--cta .row__num{ color: var(--purple); }
.row--cta .row__name{ color: var(--ink); }

/* Entrance animation */
.row{
  opacity: 0;
  transform: translateY(14px);
  animation: rowIn .8s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(120ms + var(--i, 0) * 80ms);
}
@keyframes rowIn{
  to{ opacity: 1; transform: none; }
}

/* Responsive */
@media (max-width: 820px){
  .stage{ padding: 96px var(--pad-x) 48px; height: auto; min-height: 100vh; }
  .corner--tl, .corner--tr, .corner--bl, .corner--br{ font-size: 9.5px; letter-spacing: .14em; }
  .corner--tl{ top: 56px; }
  .corner--tr{ top: 56px; }
  .corner__line{ font-size: 15px; }
  .rows{ margin: 60px auto 40px; }
  .row{
    grid-template-columns: auto 1fr auto;
    min-height: 88px;
    flex: 0 0 auto;
    gap: clamp(10px, 3vw, 20px);
    padding: 18px 10px;
  }
  .row__num{ font-size: clamp(26px, 7vw, 40px); }
  .row__name{ font-size: clamp(32px, 10vw, 56px); }
  .row__cap{ display: none; }
  .row__arrow{ font-size: 24px; }
  .row:hover{ padding-left: 20px; }
}

/* After-rows section (film + countdown) — appears on scroll only */
.after{
  padding: 60px 0 90px;
  background: var(--cream);
  border-top: 1px solid var(--rule);
}

/* hide old hero / folders / linkout / sticky / ticket / dock since we replaced them */
.desktop__header,
.desktop__deck,
.desktop__subhead:first-of-type,
.folders,
.linkout,
.sticky,
.ticket,
.dock{ display: none !important; }
/* show the subheads that live inside .after */
.after .desktop__subhead{ display: flex !important; }