:root{
  /* CMC institutional palette */
  --bg:           #ffffff;
  --bg-soft:      #f7f6f4;
  --bg-sunken:    #efedea;
  --ink:          #1c1c1e;
  --ink-soft:     #3d3d40;
  --ink-mute:     #6b6b70;
  --rule:         #e3e1dd;
  --rule-soft:    #ededea;

  --maroon:       #862633;
  --maroon-deep:  #5c1923;
  --maroon-soft:  #f5e8ea;
/*  --gold:         #c08a2c; */
  --gold:         #ffeb3b;
  --gold-soft:    #f5ecd5;

  --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --sans:  "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --maxw: 1240px;
  --shadow-sm: 0 1px 2px rgba(28,28,30,.05), 0 0 0 1px rgba(28,28,30,.05);
  --shadow-md: 0 4px 14px -4px rgba(28,28,30,.12), 0 0 0 1px rgba(28,28,30,.06);
  --shadow-lg: 0 20px 40px -20px rgba(28,28,30,.22), 0 0 0 1px rgba(28,28,30,.05);

  --paper:    var(--bg);
  --paper-2:  var(--bg-soft);
  --paper-3:  var(--bg-sunken);
  --red:      var(--maroon);
  --red-deep: var(--maroon-deep);
  --copper:   var(--gold);
  --glass:    #7a8794;
  --sage:     #4a7a55;
  --skylight: #e5edf2;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-weight:400; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
body{ min-height:100vh; overflow-x:hidden; }
img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; background:none; border:none; padding:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }

::selection{ background:var(--maroon); color:#fff; }
body::before{ content:none; }

/* page entry animation */
@keyframes viewIn{ from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform: none; } }

.chrome{
  position:sticky; top:0; z-index:60;
  background:color-mix(in oklab, #e9e7e4 90%, transparent);
  backdrop-filter: blur(10px) saturate(1.02);
  -webkit-backdrop-filter: blur(10px) saturate(1.02);
  border-bottom:1px solid var(--rule);
}
.chrome-inner{
  max-width:var(--maxw); margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{ display:flex; align-items:center; gap:14px; cursor:pointer; text-decoration:none; }
.brand-mark{
  position:relative; width:54px; height:38px; flex-shrink:0;
  background:var(--maroon); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-weight:600; font-size:14px; letter-spacing:.01em;
  line-height:1; padding: 0 6px;
  border-radius:3px;
}
.brand-mark::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--gold);
}
.brand-text{ display:flex; flex-direction:column; line-height:1.05; gap:3px; }
.brand-text .a{ font-family:var(--sans); font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-mute); font-weight:600; }
.brand-text .b{ font-family:var(--serif); font-size:19px; font-weight:500; color:var(--ink); }

.top-nav{ display:flex; align-items:center; gap:4px; }
.top-nav a, .top-nav button{
  font-family:var(--sans); font-size:14px; letter-spacing:.005em; font-weight:500;
  padding:9px 14px; border-radius:6px; color:var(--ink-soft);
  transition:background .15s ease, color .15s ease;
  display:inline-block; text-decoration:none;
}
.top-nav a:hover, .top-nav button:hover{ background:var(--bg-soft); color:var(--ink); }
.top-nav a.active, .top-nav button.active{ background:var(--maroon-soft); color:var(--maroon-deep); }
.top-nav .resume{
  background:var(--maroon); color:#fff;
  display:none;
  align-items:center; gap:8px;
  font-weight:600;
  padding:9px 16px;
}
.top-nav .resume.visible{ display:inline-flex; }
.top-nav .resume:hover{ background:var(--maroon-deep); color:#fff; }
.top-nav .resume.active{ background:var(--maroon); color:#fff; }
.top-nav .resume .dot{
  width:6px; height:6px; border-radius:999px; background:var(--gold);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.55; transform:scale(.85); } }

.top-nav .lang-switch{
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; font-weight:600;
  border:1px solid var(--rule); color:var(--ink-mute);
  padding:7px 12px; margin-left:4px;
}
.top-nav .lang-switch:hover{ border-color:var(--maroon); color:var(--maroon-deep); background:var(--bg-soft); }

@media (max-width:720px){
  .top-nav > a:nth-child(1), .top-nav > a:nth-child(2), .top-nav > a:nth-child(3){ display:none; }
}

.page{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:0 24px 0; animation: viewIn .55s cubic-bezier(.2,.7,.2,1); }

.hero{
  position:relative; padding:48px 0 56px; isolation:isolate;
}
.hero-grid{
  display:grid; grid-template-columns: 1.15fr .95fr; gap:48px; align-items:end;
}
@media (max-width:980px){ .hero-grid{ grid-template-columns: 1fr; gap:32px; } }

.hero-meta{
  font-family:var(--sans); font-size:13px; text-transform:uppercase; letter-spacing:.14em; color:var(--maroon); font-weight:600;
  display:flex; align-items:center; gap:12px; margin-bottom:22px;
}
.hero-meta .sep{ width:28px; height:1px; background:var(--rule); }

.hero h1{
  font-family:var(--serif); font-weight:500; font-style:normal;
  font-size: clamp(46px, 6.8vw, 88px);
  line-height:1.02; letter-spacing:-.018em;
  margin:0 0 26px; color:var(--ink);
  text-wrap: balance;
}
.hero h1 em{
  font-style:italic; font-weight:500; color:var(--maroon);
}
.hero h1 .stacked{
  display:inline-block; position:relative;
  color:var(--maroon);
  font-style:italic;
}
.hero h1 .stacked::before, .hero h1 .stacked::after{ content:none; }

.hero-lede{
  font-family:var(--serif); font-size: clamp(19px, 1.7vw, 22px); line-height:1.5;
  color:var(--ink-soft); max-width: 54ch;
  margin: 0 0 36px;
  font-weight:400;
}
.hero-lede em{ color:var(--maroon); font-style:italic; }

.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans); font-size:15px; letter-spacing:.005em; font-weight:600;
  padding:14px 24px; border-radius:8px;
  background:var(--maroon); color:#fff;
  transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
  box-shadow: var(--shadow-sm);
}
.btn:hover{ background:var(--maroon-deep); box-shadow: var(--shadow-md); }
.btn .arrow{ display:inline-block; transition: transform .25s ease; font-size:1.05em; }
.btn:hover .arrow{ transform: translateX(3px); }

.btn.ghost{
  background:transparent; color:var(--ink); border:1.5px solid var(--ink);
  box-shadow:none;
}
.btn.ghost:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }

.btn.tertiary{
  background:transparent; color:var(--ink-soft); padding:8px 0;
  box-shadow:none; border-radius:0; border-bottom:1.5px solid var(--rule);
  font-weight:500;
}
.btn.tertiary:hover{ color:var(--maroon); border-color:var(--maroon); background:transparent; }

.hero-photo{
  position:relative; aspect-ratio: 4/5; width:100%; max-width:560px; margin-left:auto;
  border-radius: 10px;
  overflow:hidden;
  background: var(--bg-soft);
  box-shadow: var(--shadow-lg);
}
.hero-photo img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  transition: transform 8s ease;
}
.hero-photo:hover img{ transform: scale(1.04); }

.about-strip{
  margin: 44px 0 24px;
  display:grid; grid-template-columns: 240px 1fr; gap:56px;
  padding: 56px;
  background: linear-gradient(135deg, var(--maroon) 0%, var(--maroon-deep) 100%);
  color: #fff;
  border-radius: 14px;
  position:relative; overflow:hidden;
  box-shadow: 0 30px 60px -28px color-mix(in oklab, var(--maroon) 50%, transparent);
}
.about-strip::before{
  content:""; position:absolute; right:-120px; bottom:-120px; width:380px; height:380px;
  border-radius:999px; pointer-events:none;
  background: radial-gradient(circle, color-mix(in oklab, var(--gold) 35%, transparent), transparent 70%);
}
.about-strip > *{ position:relative; z-index:1; }
@media (max-width:780px){ .about-strip{ grid-template-columns:1fr; gap:18px; padding: 36px 28px; } }
.about-strip .label{ font-family:var(--sans); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:700; }
.about-strip h2{
  font-family:var(--serif); font-weight:500; font-size: clamp(28px, 3.4vw, 44px); line-height:1.15;
  margin:0; color:#fff; max-width:32ch; text-wrap:balance; letter-spacing:-.01em;
}
.about-strip h2 em{ color:var(--gold); font-style:italic; font-weight:500; }
.about-strip p{ margin:18px 0 0; font-size:17px; color: color-mix(in oklab, #fff 84%, transparent); max-width:60ch; line-height:1.65; }

.quick-facts{
  margin-top:32px;
  display:grid; grid-template-columns: repeat(4, 1fr); gap:0;
  background: var(--gold-soft);
  border: 1px solid color-mix(in oklab, var(--gold) 35%, transparent);
  border-radius: 12px;
  overflow:hidden;
}
@media (max-width:780px){ .quick-facts{ grid-template-columns:repeat(2,1fr); } }
.qf{
  padding: 26px 22px 24px;
  border-right:1px solid color-mix(in oklab, var(--gold) 25%, transparent);
}
.qf:last-child{ border-right:none; }
@media (max-width:780px){
  .qf:nth-child(2){ border-right:none; }
  .qf:nth-child(1), .qf:nth-child(2){ border-bottom:1px solid color-mix(in oklab, var(--gold) 25%, transparent); }
}
.qf .k{ font-family:var(--sans); font-size:11.5px; letter-spacing:.10em; text-transform:uppercase; color:var(--maroon-deep); margin-bottom:14px; font-weight:700; }
.qf .v{ font-family:var(--serif); font-weight:500; font-size: clamp(28px, 3.4vw, 42px); line-height:1; color:var(--maroon); letter-spacing:-.01em; }
.qf .v small{ font-family:var(--sans); font-size:12px; letter-spacing:.02em; color: color-mix(in oklab, var(--ink) 75%, transparent); margin-left:8px; font-weight:500; text-transform:none; }

.about-vista{ margin: 36px 0 0; }
.about-vista .vista-slot{
  display:block; width:100%; height: clamp(220px, 34vw, 340px);
  object-fit: cover; border-radius: 12px;
  box-shadow: var(--shadow-md);
}


/* homepage welcome note */
.welcome{ margin-top:56px; background:var(--gold-soft); border:1px solid var(--rule); border-radius:14px; padding:34px 34px 30px; }
.welcome .w-kicker{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--maroon); margin-bottom:14px; }
.welcome h3{ font-family:var(--serif); font-weight:400; font-size:clamp(26px,3.4vw,38px); line-height:1.15; margin:0 0 20px; max-width:44ch; text-wrap:balance; }
.welcome h3 em{ font-style:italic; color:var(--maroon); }
.welcome h3 .w-name{ white-space:nowrap; }
@media (max-width:560px){ .welcome h3 .w-name{ white-space:normal; } }
.w-bar{ display:flex; align-items:center; gap:18px; padding:14px 18px; background:var(--paper); border:1px solid var(--rule); border-radius:999px; }
.w-play{ flex:none; width:52px; height:52px; border-radius:999px; background:var(--maroon); color:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; border:0; transition:background .18s ease; }
.w-play:hover{ background:var(--maroon-deep); }
.welcome.no-audio .w-play{ background:color-mix(in oklab, var(--maroon) 22%, transparent); color:var(--paper); cursor:default; }
.welcome.no-audio .w-seek{ cursor:default; opacity:.45; }
.w-play svg{ width:18px; height:18px; }
.w-seek{ flex:1 1 auto; position:relative; height:26px; cursor:pointer; }
.w-seek::before{ content:""; position:absolute; left:0; right:0; top:50%; height:3px; transform:translateY(-50%); border-radius:3px; background:color-mix(in oklab, var(--maroon) 16%, transparent); }
.w-seek > i{ position:absolute; left:0; top:50%; height:3px; width:0%; transform:translateY(-50%); border-radius:3px; background:var(--maroon); transition:width .12s linear; }
.w-seek > b{ position:absolute; top:50%; left:0%; width:12px; height:12px; border-radius:999px; background:var(--maroon); transform:translate(-50%,-50%); transition:left .12s linear; }
.w-time{ flex:none; font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--ink-mute); }
.w-tr-toggle{ margin-top:20px; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--maroon); cursor:pointer; background:none; border:0; padding:0; }
.w-tr-toggle:hover{ text-decoration:underline; }
.w-transcript{ margin-top:18px; padding-top:20px; border-top:1px solid var(--rule); font-size:16px; line-height:1.7; color:var(--ink-soft); max-width:66ch; }
.w-transcript p{ margin:0 0 14px; }
.w-transcript p:last-child{ margin-bottom:0; }
.welcome.tr-collapsed .w-transcript{ display:none; }
@media (max-width:560px){
  .welcome{ padding:26px 20px 24px; }
  .w-bar{ flex-wrap:wrap; border-radius:16px; gap:12px; }
  .w-seek{ order:3; flex-basis:100%; }
}

.highlights{ margin-top:44px; }
.section-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  margin-bottom:28px;
}
.section-head h3{
  font-family:var(--serif); font-weight:500; font-size: clamp(28px, 3.2vw, 40px); margin:0; line-height:1.15; letter-spacing:-.01em;
}
.section-head h3 em{ color:var(--maroon); font-style:italic; font-weight:500; }
.hl-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
@media (max-width:880px){ .hl-grid{ grid-template-columns:1fr; } }
.hl{
  position:relative; border:1px solid var(--rule); border-radius:10px;
  background: var(--bg);
  overflow:hidden;
  cursor:pointer;
  display:flex; flex-direction:column;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  box-shadow: var(--shadow-sm);
  text-decoration:none;
}
.hl:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color:var(--maroon); }
.hl.a{ background: var(--maroon-soft); border-color: color-mix(in oklab, var(--maroon) 25%, var(--maroon-soft)); }
.hl.b{ background: linear-gradient(160deg, var(--maroon) 0%, var(--maroon-deep) 100%); border-color: var(--maroon-deep); color:#fff; }
.hl.b .num{ color:var(--gold); }
.hl.b h4{ color:#fff; }
.hl.b p{ color: color-mix(in oklab, #fff 82%, transparent); }
.hl.c{ background: var(--gold-soft); border-color: color-mix(in oklab, var(--gold) 35%, var(--gold-soft)); }
.hl .photo{
  position:relative; aspect-ratio: 4/3; overflow:hidden; background:var(--bg-soft);
  border-bottom:1px solid var(--rule);
}
.hl .photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition: transform .6s ease; }
.hl:hover .photo img{ transform: scale(1.05); }
.hl .body{ padding: 20px 22px 22px; }
.hl .num{ font-family:var(--sans); font-size:12px; letter-spacing:.08em; color:var(--maroon); font-weight:600; text-transform:uppercase; }
.hl h4{ font-family:var(--serif); font-weight:500; font-style:normal; font-size: 26px; line-height:1.15; margin:10px 0 10px; max-width:18ch; color:var(--ink); letter-spacing:-.005em; }
.hl p{ font-size:15px; color:var(--ink-soft); margin:0; max-width:36ch; }

.stops-head{
  margin-top:48px; margin-bottom:40px;
  display:grid; grid-template-columns: 1fr auto; gap:24px; align-items:end;
  padding: 36px 36px 32px; border-radius: 14px;
  background: var(--gold-soft);
  border:1px solid color-mix(in oklab, var(--gold) 35%, var(--gold-soft));
}
@media (max-width:780px){
  .stops-head{ padding: 28px; grid-template-columns: 1fr; align-items:start; }
  .stops-head .right{ width:100%; align-items:stretch; min-width:0; }
  .progress-card{ min-width:0; }
}
.stops-head .label{ font-family:var(--sans); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--maroon); font-weight:600; margin-bottom:18px; }
.stops-head h2{ font-family:var(--serif); font-weight:500; font-size: clamp(40px, 5.6vw, 76px); line-height:1.02; margin:0; letter-spacing:-.015em; }
.stops-head h2 em{ color:var(--maroon); font-style:italic; font-weight:500; }
.stops-head .right{ display:flex; flex-direction:column; gap:14px; align-items:flex-end; min-width:240px; }

.progress-card{
  width:100%; min-width:260px;
  border:1px solid var(--rule); border-radius:8px; padding:14px 16px; background:var(--bg);
  box-shadow: var(--shadow-sm);
}
.progress-card .pr-row{ display:flex; justify-content:space-between; align-items:baseline; font-family:var(--sans); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute); font-weight:600; }
.progress-card .pr-row strong{ color:var(--maroon); font-weight:700; font-family:var(--serif); font-size:18px; letter-spacing:normal; text-transform:none; }
.progress-card .bar{ position:relative; margin-top:10px; height:6px; background:var(--bg-sunken); border-radius:999px; overflow:hidden; }
.progress-card .bar > i{ position:absolute; inset:0 auto 0 0; background: var(--maroon); display:block; transition: width .45s ease; }

.timeline{
  position:relative; margin:8px 0 42px;
  display:flex; gap:6px;
  overflow-x:auto; padding-bottom:6px;
}
.timeline::-webkit-scrollbar{ height:6px; }
.timeline::-webkit-scrollbar-thumb{ background:var(--rule); border-radius:6px; }
.tl-step{
  flex: 1 0 auto; min-width:64px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute);
  padding: 8px 4px; cursor:pointer;
  border-top:1px solid var(--rule);
  transition: color .2s ease, border-color .2s ease;
  text-decoration:none;
}
.tl-step .marker{
  width:10px; height:10px; border-radius:0; border:1px solid var(--ink); background:var(--paper); margin-top:-15px;
  transition: background .2s ease, transform .2s ease;
}
.tl-step.done .marker{ background:var(--ink); }
.tl-step.current{ color:var(--red); border-top-color:var(--red); }
.tl-step.current .marker{ background:var(--red); border-color:var(--red); transform:rotate(45deg); }
.tl-step:hover{ color:var(--ink); }

.floor-group{ margin-bottom: 56px; }
.floor-head{
  display:grid; grid-template-columns: minmax(0, 220px) 1fr; gap:32px;
  align-items:start; margin-bottom: 22px;
}
@media (max-width:720px){ .floor-head{ grid-template-columns:1fr; gap:8px; } }
.floor-head .tag{
  font-family:var(--sans); font-size:12px; letter-spacing:.10em; text-transform:uppercase; color:var(--maroon); font-weight:600;
  display:flex; gap:10px; align-items:center;
}
.floor-head .tag .block{ width:14px; height:14px; border-radius:3px; display:inline-block; }
.floor-head .tag.ground .block{ background: var(--gold); }
.floor-head .tag.first  .block{ background: var(--maroon); }
.floor-head .tag.upper  .block{ background: #355a72; }
.floor-head .tag.intro  .block{ background: var(--ink); }
.floor-head .tag.reflect .block{ background: var(--ink-mute); }
.floor-head .tag.ground{ color: color-mix(in oklab, var(--gold) 65%, var(--ink) 35%); }
.floor-head .tag.upper{ color: #355a72; }
.floor-head .tag.intro{ color: var(--ink); }
.floor-head .tag.reflect{ color: var(--ink-mute); }
.floor-head h3{
  font-family:var(--serif); font-size: clamp(26px, 2.8vw, 36px); font-weight:500; margin:0; line-height:1.15;
  max-width: 60ch; letter-spacing:-.01em;
}
.floor-head h3 em{ color:var(--ink-mute); font-style:italic; font-size:.7em; vertical-align: middle; margin-left:14px; font-weight:400; }

.stop-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:18px; }
@media (max-width:740px){ .stop-grid{ grid-template-columns:1fr; } }

.stop-card{
  position:relative; background:var(--bg); border:1px solid var(--rule); border-radius:10px;
  padding: 18px;
  display:grid; grid-template-columns: 152px 1fr; gap:18px;
  cursor:pointer;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  box-shadow: var(--shadow-sm);
  text-decoration:none; color:inherit;
}
.stop-card:hover{ transform: translateY(-2px); border-color: var(--maroon); box-shadow: var(--shadow-md); }
.stop-card.done{ background: color-mix(in oklab, var(--bg) 92%, var(--sage) 8%); }

.stop-thumb{
  position:relative; aspect-ratio: 4/5; overflow:hidden;
  border:1px solid var(--rule); border-radius:6px;
  background: var(--bg-soft);
}
.stop-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition: transform .5s ease; }
.stop-card:hover .stop-thumb img{ transform: scale(1.06); }

.stop-body{ display:flex; flex-direction:column; min-width:0; }
.stop-meta{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute);
  margin-bottom:8px;
}
.stop-meta .num{ color:var(--ink); }
.stop-meta .done-check{
  display:none; align-items:center; gap:6px; color:var(--sage);
}
.stop-card.done .stop-meta .done-check{ display:inline-flex; }
.stop-meta .done-check svg{ width:12px; height:12px; }

.stop-card h4{
  font-family:var(--serif); font-weight:500; font-size: 24px; line-height:1.18;
  margin: 0 0 8px; color: var(--ink); letter-spacing:-.005em;
  max-width: 22ch; text-wrap: balance;
}
.stop-card.featured h4{ color: var(--maroon); }

.stop-card p{
  font-size: 14px; color: var(--ink-soft); margin:0 0 14px; max-width: 38ch;
  flex: 1 1 auto;
}

.stop-actions{
  display:flex; gap:8px; align-items:center; margin-top:auto;
}
.stop-play{
  display:inline-flex; align-items:center; gap:10px;
  padding:9px 14px 9px 11px; border-radius:999px;
  background: var(--ink); color: var(--paper);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  transition: background .2s ease;
}
.stop-play .glyph{
  width:22px; height:22px; border-radius:999px; background:var(--paper); color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center;
}
.stop-play .glyph svg{ width:9px; height:9px; }
.stop-card:hover .stop-play{ background: var(--red); }
.stop-open{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-mute); padding: 6px 4px;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.stop-card:hover .stop-open{ color:var(--ink); border-bottom-color:var(--ink); }

.stop-card.featured{
  border-color: var(--maroon);
  border-width: 1.5px;
}
.stop-card.featured::after{
  content: "★ Featured";
  position:absolute; top:12px; left:12px;
  background:var(--maroon); color:#fff;
  font-family:var(--sans); font-size:10.5px; letter-spacing:.08em; font-weight:600;
  padding:4px 10px; border-radius: 3px;
  z-index:2;
}
html[lang="es"] .stop-card.featured::after{
  content: "★ Destacado";
}

.detail{ margin-top: 28px; }
.breadcrumb{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  font-family:var(--mono); font-size:12px; letter-spacing:.02em; color:var(--ink-mute);
  margin-top: 36px;
  margin-bottom: 22px;
}
.breadcrumb a{ font:inherit; letter-spacing:inherit; color:var(--ink-mute); text-decoration:none; }
.breadcrumb a:hover{ color:var(--ink); }
.breadcrumb .sep{ opacity:.45; }
.breadcrumb .here{ color:var(--ink); font-weight:600; }

.detail-hero{
  position:relative; display:grid; grid-template-columns: 1.05fr 1fr; gap:42px; margin-bottom: 42px;
}
@media (max-width: 980px){ .detail-hero{ grid-template-columns:1fr; gap:24px; } }

.detail-img{
  position:relative; aspect-ratio: 5/6; min-height: 360px;
  border:1px solid var(--rule); border-radius:10px;
  background: var(--bg-soft);
  overflow:hidden;
  box-shadow: var(--shadow-md);
}
.detail-img img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}

.detail-side{ display:flex; flex-direction:column; }
.detail-side .crumbs{
  display:flex; gap:14px; align-items:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute);
  margin-bottom:18px;
}
.detail-side h1{
  font-family:var(--serif); font-weight:500; font-size: clamp(36px, 5vw, 58px); line-height:1.05;
  margin: 0 0 18px; letter-spacing:-.015em;
  text-wrap: balance;
}
.detail-side h1 em{ font-style:italic; color:var(--maroon); font-weight:500; }
.detail-side .floor-badge{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  margin: 0 0 22px; padding:7px 14px 7px 11px; border-radius:999px;
  background:var(--gold-soft); border:1px solid color-mix(in oklab, var(--gold) 35%, var(--gold-soft));
  font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--maroon-deep);
}
.detail-side .floor-badge svg{ width:14px; height:14px; color:var(--maroon); flex-shrink:0; }
.detail-side .lede{
  font-family:var(--serif); font-size: clamp(18px, 1.6vw, 22px); line-height:1.45; color:var(--ink-soft);
  margin: 0 0 26px;
}

.player{
  position:relative;
  background: linear-gradient(180deg, var(--maroon) 0%, var(--maroon-deep) 100%);
  color: #fff;
  padding: 24px 24px 22px;
  border-radius: 10px;
  margin-bottom: 26px;
  box-shadow: 0 24px 48px -22px color-mix(in oklab, var(--maroon) 55%, transparent), var(--shadow-md);
  overflow:hidden;
}
.player::before{
  content:""; position:absolute; right:-80px; top:-80px; width:280px; height:280px;
  border-radius:999px; pointer-events:none;
  background: radial-gradient(circle, color-mix(in oklab, var(--gold) 38%, transparent), transparent 70%);
}
.player > *{ position:relative; z-index:1; }
.player-top{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-family:var(--sans); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color: color-mix(in oklab, #fff 78%, transparent); font-weight:600;
  margin-bottom: 18px;
}
.player-top .now-tag{ display:flex; align-items:center; gap:8px; }
.player-top .now-tag .eq{
  display:inline-flex; align-items:flex-end; gap:2px; height:12px;
}
.player-top .now-tag .eq i{
  width:2px; background:var(--gold); display:inline-block; animation: eq 1.2s ease-in-out infinite;
}
.player.paused .player-top .now-tag .eq i{ animation-play-state: paused; height: 4px !important; }
.player-top .now-tag .eq i:nth-child(1){ height: 10px; animation-delay: -.4s; }
.player-top .now-tag .eq i:nth-child(2){ height:  6px; animation-delay: -.1s; }
.player-top .now-tag .eq i:nth-child(3){ height: 11px; animation-delay: -.7s; }
.player-top .now-tag .eq i:nth-child(4){ height:  4px; animation-delay: -.3s; }
@keyframes eq{ 0%,100%{ height:3px;} 50%{ height:11px;} }

.player-controls{
  display:grid; grid-template-columns: auto auto 1fr auto; gap:18px; align-items:center;
}
.player .rwd, .player .ffw{
  width:42px; height:42px; border-radius:999px; border:1px solid color-mix(in oklab, var(--paper) 30%, transparent);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--paper);
  transition: background .15s ease;
  position:relative;
}
.player .rwd:hover, .player .ffw:hover{ background: color-mix(in oklab, var(--paper) 8%, transparent); }
.player .rwd .lbl, .player .ffw .lbl{
  position:absolute; bottom:-2px; left:50%; transform: translate(-50%, 100%);
  font-family:var(--mono); font-size: 9px; letter-spacing:.12em; color: color-mix(in oklab, var(--paper) 55%, transparent);
}
.player .pp{
  width:68px; height:68px; border-radius:999px; background:var(--gold); color:var(--maroon-deep);
  display:inline-flex; align-items:center; justify-content:center;
  transition: background .2s ease, box-shadow .2s ease;
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--gold) 22%, transparent);
}
.player .pp:hover{ background:#fff; color:var(--maroon); box-shadow: 0 0 0 8px color-mix(in oklab, #fff 22%, transparent); }
.player .pp svg{ width:22px; height:22px; }

.player-track{
  display:flex; flex-direction:column; gap:8px;
}
.player-track .bar{
  position:relative; height: 30px; cursor:pointer;
}
.player-track .bar::before{
  content:""; position:absolute; left:0; right:0; top:50%; height:2px; transform: translateY(-50%);
  background: color-mix(in oklab, var(--paper) 22%, transparent);
}
.player-track .bar > i{
  position:absolute; left:0; top:50%; height:2px; transform: translateY(-50%);
  background:var(--paper); width:0%;
  transition: width .12s linear;
}
.player-track .bar > b{
  position:absolute; top:50%; transform: translate(-50%, -50%);
  width:12px; height:12px; border-radius:999px; background:var(--paper);
  left:0%;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--paper) 12%, transparent);
  transition: left .12s linear;
}
.player-times{
  display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:color-mix(in oklab, var(--paper) 65%, transparent);
}

.player-actions{
  display:flex; align-items:center; gap:10px;
}
.player .speed{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  padding:8px 12px; border:1px solid color-mix(in oklab, var(--paper) 30%, transparent); border-radius:999px;
  color:var(--paper);
}
.player .speed:hover{ background: color-mix(in oklab, var(--paper) 10%, transparent); }

@media (max-width:560px){
  .player-controls{ grid-template-columns: auto auto auto; grid-template-rows: auto auto; row-gap: 14px; }
  .player-track{ grid-column: 1 / -1; order:3; }
  .player-actions{ grid-column: 1 / -1; order:4; justify-content:flex-end; }
}

.detail-under-player{
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 18px;
}
.ch{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
  padding:9px 14px; border-radius: 999px; border:1px solid var(--rule);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  cursor:pointer;
}
.ch:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.ch.done{ background:var(--sage); color:var(--paper); border-color:var(--sage); }
.ch.primary{ background:var(--maroon); color:#fff; border-color:var(--maroon); }
.ch.primary:hover{ background:var(--maroon-deep); border-color:var(--maroon-deep); color:#fff; }
.ch.primary[hidden]{ display:none; }

.transcript{
  margin-top: 14px; padding-top: 22px; border-top:1px solid var(--rule);
}
.transcript .tr-head{
  display:flex; justify-content:space-between; align-items:center; cursor:pointer;
  margin-bottom: 14px;
}
.transcript h3{
  font-family:var(--serif); font-weight:400; font-style:italic; font-size: 26px; margin:0;
}
.transcript .toggle{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute);
}
.transcript .body{
  columns: 2; column-gap: 36px;
  font-size: 16px; color: var(--ink-soft);
}
@media (max-width:760px){ .transcript .body{ columns:1; } }
.transcript .body p{ margin: 0 0 14px; break-inside: avoid; }
.transcript .body p:first-child::first-letter{
  font-family:var(--serif); font-size: 3.2em; line-height:.85; float:left; padding: 6px 10px 0 0; color:var(--red);
}
.transcript.collapsed .body{ max-height: 0; overflow:hidden; }

.detail-nav{
  margin-top: 56px; padding-top: 30px; border-top:1px solid var(--rule);
  display:grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
@media (max-width:680px){ .detail-nav{ grid-template-columns:1fr; } }
.dn{
  display:flex; gap:18px; align-items:center; padding: 20px;
  background: var(--paper-2); border:1px solid var(--rule);
  cursor:pointer; text-decoration:none; color:inherit;
  transition: background .2s ease, transform .2s ease;
}
.dn:hover{ background: var(--paper-3); transform: translateY(-2px); }
.dn.next{ flex-direction:row-reverse; text-align:right; }
.dn .arrow{
  width:36px; height:36px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; background:var(--ink); color:var(--paper);
  transition: background .2s ease, transform .2s ease;
}
.dn:hover .arrow{ background: var(--red); }
.dn.next:hover .arrow{ transform: translateX(4px); }
.dn.prev:hover .arrow{ transform: translateX(-4px); }
.dn .meta{ font-family:var(--mono); font-size: 10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); margin-bottom: 4px; }
.dn .ttl{ font-family:var(--serif); font-size: 20px; line-height:1.15; color:var(--ink); }
.dn.disabled{ opacity:.45; pointer-events:none; }

.mini{ display:none !important; }

.foot{
  position:relative; z-index:1; padding: 44px 24px 44px;
  border-top:1px solid var(--rule); margin-top: 48px;
  background: #3a3a3d;
}
.foot-grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns: 1fr 1fr 1fr; gap:48px; }
@media (max-width:760px){ .foot-grid{ grid-template-columns:1fr; gap:24px; } }
.foot h5{ font-family:var(--sans); font-size:12px; letter-spacing:.10em; text-transform:uppercase; color:var(--gold); font-weight:700; margin: 0 0 16px; }
.foot p, .foot li{ font-size: 15px; color: color-mix(in oklab, #fff 78%, transparent); line-height:1.6; }
.foot ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.foot a:hover{ color:#fff; }

button:focus-visible, [role="button"]:focus-visible, a:focus-visible{
  outline: 2px solid var(--maroon); outline-offset: 3px;
}