/* ==========================================================================
   dlc.css : #dlc  (intro, pinned horizontal plates, artwork ink, season pass)
   Default layout is the vertical stack (touch, narrow, reduced motion, no JS).
   .dlc--h on #dlcStage switches to the pinned horizontal track.
   ========================================================================== */

#dlc { overflow-x: clip; }

/* ---------- intro ---------- */
.dlc__introgrid { align-items: end; row-gap: var(--s6); margin-bottom: var(--s9); }
.dlc__offer { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); border-top: 1px solid var(--line); padding-top: var(--s4); }
.dlc__offerline { font-family: var(--f-display); font-weight: 600; font-size: clamp(20px, 1.1vw + 14px, 30px); line-height: 1.25; color: var(--text); text-wrap: balance; }
.dlc__offerline b { color: var(--gold-hi); font-weight: 700; white-space: nowrap; }
.dlc__offer .link--arrow { margin-top: var(--s2); font-family: var(--f-label); font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }

/* ---------- stage: stacked default ---------- */
.dlc__stage { position: relative; }
.dlc__tints, .dlc__rail { display: none; }

.plate { --ink: hsl(var(--hue) 62% 68%); position: relative; padding-block: var(--s8); border-top: 1px solid var(--line-soft); }
.plate::before { content: ''; position: absolute; top: -1px; left: max(var(--gutter), calc((100% - var(--maxw)) / 2)); width: 72px; height: 1px; background: var(--ink); }
.plate__in { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); display: flex; flex-direction: column; gap: var(--s6); }
.plate__artwrap { order: -1; position: relative; }
.plate__main { min-width: 0; }

/* art frame */
.plate__art { position: relative; margin: 0; display: flex; flex-direction: column; aspect-ratio: 4 / 3.35; background: var(--ink1); border: 1px solid var(--line); overflow: hidden; color: var(--ink); }
.plate__art figcaption { position: relative; z-index: 2; flex: none; display: block; padding: var(--s3) var(--s4); border-top: 1px solid var(--line-soft); color: var(--ink); background: var(--ink1); letter-spacing: .2em; font-size: 11px; }
.plate__art .art { position: relative; z-index: 1; flex: 1 1 0; min-height: 0; width: 100%; height: 100%; }
.plate__ghost { position: absolute; z-index: 0; right: -3%; bottom: 8%; font-family: var(--f-display); font-weight: 900; font-size: clamp(200px, 52vw, 440px); line-height: .8; color: transparent; -webkit-text-stroke: 1px var(--ink); opacity: .13; pointer-events: none; user-select: none; }
.geo-on .plate__art[data-reveal="clip"] > .plate__ghost, .geo-on .plate__art[data-reveal="clip"] > figcaption { transform: none; }

/* text */
.plate__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); }
.plate__num { font-family: var(--f-display); font-weight: 900; font-size: clamp(84px, 22vw, 150px); line-height: .78; letter-spacing: .02em; color: transparent; -webkit-text-stroke: 1px var(--gold); }
.plate__meta { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s2); text-align: right; padding-bottom: 2px; }
.plate__q { font-size: clamp(20px, 1.4vw + 12px, 30px); color: var(--text); font-weight: 500; line-height: 1; }
.plate__kick { color: var(--ink); }
.plate__name { margin-top: var(--s5); font-family: var(--f-display); font-weight: 700; font-size: clamp(30px, 7.4vw, 52px); line-height: 1.04; letter-spacing: .01em; text-wrap: balance; }
.plate__tag { margin-top: var(--s2); font-size: var(--t-lead); color: var(--muted); line-height: 1.3; }
.plate__sum { margin-top: var(--s4); color: var(--muted); max-width: 34em; }
.feat { margin-top: var(--s5); border-top: 1px solid var(--line); }
.feat li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: var(--s3); align-items: center; padding-block: var(--s3); border-bottom: 1px solid var(--line-soft); }
.feat .ic { width: 22px; height: 22px; color: var(--ink); }
.feat span { font-size: 18px; line-height: 1.25; color: var(--text); }
.feat i { font-style: normal; font-size: 12px; color: var(--dim); }
.plate__ext { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); margin-top: var(--s4); }
.plate__ext ul { display: flex; flex-wrap: wrap; row-gap: var(--s2); }
.plate__ext li { font-family: var(--f-label); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--text); padding-inline: var(--s3); border-left: 1px solid var(--line); }
.plate__ext li:first-child { padding-left: 0; border-left: 0; }
.plate__buy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin-top: var(--s5); }
.plate__price { font-size: 30px; line-height: 1; color: var(--gold-hi); font-weight: 500; }
.plate__note { letter-spacing: .16em; }

@media (min-width: 900px) {
  .dlc__stage:not(.dlc--h) .plate__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s7); align-items: start; }
  .dlc__stage:not(.dlc--h) .plate__artwrap { order: 0; grid-column: 1; grid-row: 1; position: sticky; top: calc(var(--nav-h) + var(--s5)); }
  .dlc__stage:not(.dlc--h) .plate__main { grid-column: 2; grid-row: 1; }
}

/* ---------- artwork ink ---------- */
.art { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: square; stroke-linejoin: miter; overflow: hidden; }
.art .hair { stroke-width: 1; opacity: .5; }
.art .soft { opacity: .28; }
.art .f { fill: currentColor; stroke: none; }
.art .bgf { fill: var(--ink1); }
.art .dr { stroke-dasharray: 1; stroke-dashoffset: 0; }
.art .dash { stroke-dasharray: 3 4; }
.art .p { stroke: currentColor; stroke-width: .8; opacity: .45; }
.art text { font-family: var(--f-label); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; fill: currentColor; stroke: none; }
.art .t { opacity: .85; }
.art .big { font-family: var(--f-display); font-size: 26px; letter-spacing: .06em; font-weight: 700; }
.art .yr { font-family: var(--f-display); font-weight: 700; font-size: 44px; letter-spacing: .04em; text-anchor: middle; text-transform: none; }
.art .ghy { font-family: var(--f-display); font-weight: 900; font-size: 150px; fill: none; stroke: currentColor; stroke-width: 1; opacity: .09; text-transform: none; letter-spacing: .02em; }
/* 1 */
.art .rd { fill: currentColor; stroke: none; }
.art .scan path { stroke-width: 1.2; }
/* 2 */
.art .sh1 { stroke-width: 54; opacity: .05; stroke-linejoin: round; }
.art .sh2 { stroke-width: 26; opacity: .08; stroke-linejoin: round; }
.art .ln { stroke-width: 1.7; }
.art .lane { opacity: .75; }
.art .lanedots { stroke-dasharray: 1 11; stroke-width: 3.2; stroke-linecap: round; opacity: 0; }
.art .rg { stroke-dasharray: 5 7; stroke-width: 1.4; }
/* 3 */
.art .c { opacity: .45; stroke-width: .9; }
.art .c.major { opacity: .9; stroke-width: 1.4; }
.art .fx { stroke-width: 1.7; stroke-linejoin: round; }
.art .fr2 { opacity: .35; stroke-width: 1; }
.art .thr { stroke-dasharray: 4 3; opacity: .8; }
/* 5 */
.art .vol { fill: currentColor; stroke: none; opacity: .22; }
.art .ma { stroke-width: 1.7; }
.art .flow { stroke-dasharray: 7 5; stroke-width: 1.4; }
.art .blk { stroke-width: 2.6; }
/* 6 */
.art .claim { stroke-dasharray: 4 6; opacity: .8; }
.art .lp { stroke-width: 1.7; }
.art .orb { opacity: .6; }

/* ---------- season pass ---------- */
.dlc__passwrap { padding-top: var(--s9); }
.pass { border-top: 1px solid var(--line); padding-top: var(--s7); }
.pass__top { row-gap: var(--s7); align-items: start; }
.pass__h { margin-top: var(--s3); }
.pass__names { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s5); margin-top: var(--s5); border-top: 1px solid var(--line-soft); }
.pass__names li { display: flex; align-items: baseline; gap: var(--s3); padding-block: var(--s3); border-bottom: 1px solid var(--line-soft); font-size: 17px; }
.pass__names li i { flex: none; width: 14px; height: 1px; background: hsl(var(--hue) 62% 68%); align-self: center; }
.pass__names li span { flex: 1; min-width: 0; }
.pass__names li b { font-weight: 500; color: var(--muted); font-size: 15px; }
.pass__bars { display: grid; gap: var(--s4); }
.pass__bar { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; column-gap: var(--s4); }
.pass__bar .num { font-size: 18px; min-width: 64px; text-align: right; }
.pass__fill { display: block; height: 8px; transform-origin: 0 50%; transition: transform 1.6s var(--ease-io); }
.pass__fill--full { background: var(--line-strong); transform: scaleX(1); }
.pass__fill--pass { background: var(--gold); transform: scaleX(var(--r, .71)); transition-delay: .25s; }
.geo-on .pass:not(.is-in) .pass__fill { transform: scaleX(0); }
.pass__save { margin-top: var(--s5); font-size: var(--t-lead); line-height: 1.3; }
.pass__save b { color: var(--gold-hi); font-weight: 700; }
.pass__cta { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4); }

@media (max-width: 899px) {
  .pass__top { row-gap: var(--s6); }
  .pass__cta .btn { width: 100%; }
  .pass__cta .btn > .btn__t { flex: 1; }
}
@media (max-width: 599px) {
  .pass__names { grid-template-columns: minmax(0, 1fr); }
  .pass__bar { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s2); }
  .pass__bar .pass__fill { grid-column: 1 / -1; grid-row: 2; }
  .pass__bar .num { grid-column: 2; grid-row: 1; }
  .dlc__introgrid { margin-bottom: var(--s8); }
}

/* ==========================================================================
   Horizontal pinned mode
   ========================================================================== */
.dlc--h { --rail: 92px; height: 100vh; overflow: hidden; background: var(--bg); }
.dlc--h .dlc__tints { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.dlc--h .dlc__tints i { position: absolute; inset: 0; background: hsl(var(--hue) 24% 6.2%); opacity: 0; }
.dlc--h .dlc__viewport { position: relative; z-index: 1; height: 100%; overflow: hidden; }
.dlc--h .dlc__track { display: flex; height: 100%; width: max-content; will-change: transform; }
.dlc--h .plate { flex: none; width: var(--vw, 100vw); height: 100%; padding: calc(var(--nav-h) + var(--s4)) 0 var(--rail); border-top: 0; display: flex; }
.dlc--h .plate::before { display: none; }
.dlc--h .plate__in { height: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.dlc--h .plate__main { grid-column: 1 / span 5; grid-row: 1; align-self: center; will-change: transform; }
.dlc--h .plate__artwrap { order: 0; grid-column: 6 / -1; grid-row: 1; align-self: center; padding-left: var(--s6); width: 100%; }
.dlc--h .plate__art { aspect-ratio: 800 / 634; max-height: calc(100vh - var(--nav-h) - var(--rail) - var(--s7)); margin-inline: auto; }
.dlc--h .plate__ghost { font-size: clamp(260px, 46vh, 520px); right: -6%; bottom: 14%; opacity: .12; will-change: transform; }
.dlc--h .plate__sum { display: none; }
.dlc--h .plate__num { font-size: clamp(84px, 15.5vh, 156px); }
.dlc--h .plate__name { margin-top: var(--s4); font-size: clamp(28px, min(2.5vw, 4.8vh), 52px); }
.dlc--h .plate__tag { font-size: clamp(17px, 1.8vh + 3px, 22px); }
.dlc--h .feat { margin-top: clamp(12px, 2.2vh, 24px); }
.dlc--h .feat li { padding-block: clamp(5px, 1vh, 12px); will-change: transform, opacity; }
.dlc--h .feat span { font-size: clamp(15px, 1.2vh + 6px, 18px); }
.dlc--h .plate__ext { margin-top: clamp(10px, 1.8vh, 16px); }
.dlc--h .plate__buy { margin-top: clamp(12px, 2vh, 24px); }
.dlc--h .plate__artwrap, .dlc--h .plate__main { transition: none; }

/* progress rail */
.dlc--h .dlc__rail { display: flex; position: absolute; z-index: 3; bottom: var(--s5); left: 0; right: 0; width: min(100% - var(--gutter) * 2, var(--maxw)); margin-inline: auto; height: 48px; border-top: 1px solid var(--line-soft); }
.dlc__railfill { position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: var(--gold); transform-origin: 0 50%; transform: scaleX(0); }
.rail__b { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: var(--s3); padding: var(--s2) 0 0; text-align: left; color: var(--dim); transition: color .35s var(--ease); }
.rail__b::before { content: ''; position: absolute; top: -1px; left: 0; width: 100%; height: 1px; background: hsl(var(--hue) 62% 68%); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease); opacity: .0; }
.rail__b .num { font-size: 15px; letter-spacing: .12em; }
.rail__n { display: none; font-family: var(--f-label); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail__b:hover { color: var(--text); }
.rail__b.is-on, .rail__b.is-past { color: var(--text); }
.rail__b.is-on::before { transform: scaleX(1); opacity: 1; }
@media (min-width: 1280px) { .rail__n { display: inline; } }

@media (min-width: 1100px) and (max-height: 820px) {
  .dlc--h { --rail: 80px; }
  .dlc--h .plate__tag { display: none; }
  .dlc--h .plate__name { margin-top: var(--s3); }
}