/* 01 cover */
.s-cover .tb { position: absolute; left: 0; right: 0; top: 54cqh; text-align: center; }
.s-cover .kicker { font: 300 max(.95cqw, 9px)/1 'Raleway', sans-serif; letter-spacing: .5em; padding-left: .5em; text-transform: uppercase; color: #bda577; margin-bottom: 1.4cqw; }
.s-cover .wtitle { font-size: 7.4cqw; letter-spacing: .16em; margin-right: -.16em; }
.codes { display: flex; align-items: center; justify-content: center; gap: 1cqw; margin-top: 1.3cqw; }
.codes i { display: block; width: 6cqw; height: 1px; background: linear-gradient(90deg, transparent, rgba(210,178,122,.6)); }
.codes i:last-child { transform: scaleX(-1); }
.codes svg { width: 13cqw; height: 1.3cqw; overflow: visible; }
.s-cover .sub { font: 300 max(1.3cqw, 11px)/1.3 'Raleway', sans-serif; letter-spacing: .38em; padding-left: .38em; text-transform: uppercase; color: #dcd8e2; margin-top: 1.3cqw; }
.s-cover .year { font: 400 max(1.7cqw, 13px)/1 var(--display); letter-spacing: .32em; padding-left: .32em; color: var(--gold); margin-top: 1.2cqw; }

/* 02 who */
.s-who .col { position: absolute; left: 8cqw; top: 12cqh; width: 44cqw; }
.s-who .wtitle { font-size: 3.4cqw; letter-spacing: .12em; margin-top: 2.4cqh; }
.s-who .body { margin-top: 2.4cqh; max-width: 40cqw; }
.s-who .fine { margin-top: 2.8cqh; max-width: 40cqw; }
.s-who .mission { position: absolute; left: 58cqw; top: 22cqh; width: 32cqw; font-size: max(2.3cqw, 16px); line-height: 1.35; color: var(--ivory);
  padding-left: 2.4cqw; border-left: 1px solid rgba(210,178,122,.35); }
.pillars { position: absolute; left: 8cqw; right: 8cqw; top: 72cqh; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3cqw; }
.pillars li { border-top: 1px solid rgba(210,178,122,.18); padding-top: 2cqh; }
.pillars b { display: block; font: 500 max(1.2cqw, 12px)/1 var(--display); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-pale); }
.pillars span { display: block; font: 300 max(1cqw, 11px)/1.6 'Raleway', sans-serif; color: var(--mute); margin-top: 1.2cqh; }

/* 03 offer: constellation */
.head { position: absolute; left: 0; right: 0; top: 11cqh; display: flex; flex-direction: column; align-items: center; text-align: center; }
.head .wtitle { font-size: 3.4cqw; letter-spacing: .12em; margin-top: 2.2cqh; }
.constellation { position: absolute; left: 6cqw; right: 6cqw; top: 34cqh; bottom: 12cqh; }
.constellation .links { position: absolute; inset: 0; width: 100%; height: 100%; }
.constellation polyline { fill: none; stroke: rgba(226,200,143,.45); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.constellation .port { display: none; }
.s-offer.is-active .constellation polyline, .s-offer.is-leaving .constellation polyline { animation: drawLine 1.5s cubic-bezier(.6,.1,.2,1) .35s forwards; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
/* the dot sits exactly on its vertex; labels hang below valleys and above peaks, so no line ever crosses a label */
.stars6 li { position: absolute; transform: translate(-50%, -.35cqw); display: flex; flex-direction: column; align-items: center; gap: 1.4cqh; width: 16cqw; text-align: center; }
.stars6 li:nth-child(even) { flex-direction: column-reverse; transform: translate(-50%, calc(-100% + .35cqw)); }
.stars6 li:nth-child(1) { left: 12%; top: 64%; } .stars6 li:nth-child(2) { left: 28%; top: 30%; } .stars6 li:nth-child(3) { left: 46%; top: 72%; }
.stars6 li:nth-child(4) { left: 60%; top: 32%; } .stars6 li:nth-child(5) { left: 76%; top: 66%; } .stars6 li:nth-child(6) { left: 90%; top: 36%; }
.stars6 i { flex: none; width: .7cqw; height: .7cqw; border-radius: 50%; background: var(--gold-pale); box-shadow: 0 0 1.2cqw rgba(239,223,184,.8); opacity: .2; transform: scale(.4); }
.stars6 span { font: 500 max(1.05cqw, 11px)/1.3 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--ivory); opacity: 0; text-wrap: balance; }
.s-offer.is-active .stars6 i, .s-offer.is-leaving .stars6 i { animation: starOn .6s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(.4s + var(--k) * .16s); }
.s-offer.is-active .stars6 span, .s-offer.is-leaving .stars6 span { animation: fadeIn .7s ease both; animation-delay: calc(.5s + var(--k) * .16s); }
@keyframes starOn { from { opacity: .2; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 04 experiences */
.xcols { position: absolute; left: 8cqw; right: 8cqw; top: 29cqh; bottom: 10cqh; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; }
.xcol { position: relative; overflow: hidden; border: 1px solid rgba(210,178,122,.18); outline: none; cursor: default; transition: border-color .4s ease; }
.xcol:focus-visible { border-color: rgba(226,200,143,.7); }
.xcol img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.55) brightness(.36) contrast(1.05); transform: scale(1.04); transition: filter 1s ease, transform 2.4s cubic-bezier(.2,.7,.2,1); }
.xcol::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,6,10,.95) 8%, rgba(5,6,10,.35) 60%, rgba(5,6,10,.55)); }
.xin { position: absolute; left: 2cqw; right: 2cqw; bottom: 3cqh; z-index: 1; }
.xin .rn { font: 400 max(.8cqw, 9px)/1 var(--display); letter-spacing: .4em; color: var(--gold); }
.xin h3 { font: 500 max(1.9cqw, 16px)/1.1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-pale); margin-top: 1.4cqh; }
.xin .season { font: 400 max(.8cqw, 9px)/1.5 'Raleway', sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--mute); margin-top: 1.2cqh; }
.xin .xsub { font: italic 300 max(1.2cqw, 12px)/1.35 'Cormorant Garamond', serif; color: var(--ivory); margin-top: 1.2cqh; }
.flow { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .9s cubic-bezier(.2,.7,.2,1), opacity .6s ease, margin .6s; margin-top: 0; }
.flow li { font: 300 max(.9cqw, 10px)/1.5 'Raleway', sans-serif; color: var(--mute); padding: .5cqh 0 .5cqh 1.2cqw; position: relative; }
.flow li::before { content: ''; position: absolute; left: 0; top: 1.25em; width: .5cqw; height: 1px; background: var(--gold); }
/* hover only where a mouse exists (on touch it sticks after a tap); keyboard focus uses :focus-visible (a tap focuses the card too) */
.xcol:focus-visible img, .xcol.open img { filter: saturate(.75) brightness(.5) contrast(1.05); transform: scale(1); }
.xcol:focus-visible .flow, .xcol.open .flow { max-height: 30cqh; opacity: 1; margin-top: 1.6cqh; }
@media (hover: hover) {
  .xcol:hover img { filter: saturate(.75) brightness(.5) contrast(1.05); transform: scale(1); }
  .xcol:hover .flow { max-height: 30cqh; opacity: 1; margin-top: 1.6cqh; }
}

@container deck (orientation: portrait) {
  .s-cover .tb { top: 44cqh; }
  .s-cover .kicker { font-size: max(2.3cqw, 9.5px); letter-spacing: .34em; padding-left: .34em; margin-bottom: 3cqw; }
  .s-cover .wtitle { font-size: 13cqw; letter-spacing: .08em; margin-right: -.08em; }
  .codes { margin-top: 3cqw; gap: 2cqw; } .codes svg { width: 38cqw; height: 3.8cqw; } .codes i { width: 12cqw; }
  .s-cover .sub { font-size: max(2.9cqw, 9px); letter-spacing: .22em; margin-right: 0; margin-top: 3.4cqw; line-height: 1.6; padding: 0 9cqw; }
  .s-cover .year { font-size: 4.6cqw; margin-top: 3.2cqw; }
  /* who flows as one centred column on phones, so nothing can overlap whatever the text wraps to */
  /* no padding on the screen itself: cq units inside resolve against its content box */
  .s-who { display: flex; flex-direction: column; justify-content: center; gap: 3cqh; }
  .s-who .col, .s-who .mission, .s-who .pillars { position: relative; left: auto; right: auto; top: auto; width: auto; margin-left: 8cqw; margin-right: 8cqw; }
  .s-who .wtitle { font-size: 6.2cqw; letter-spacing: .08em; margin-top: 1.6cqh; }
  .s-who .body { max-width: none; font-size: 3.2cqw; line-height: 1.55; margin-top: 1.6cqh; }
  .s-who .fine { max-width: none; font-size: max(2.5cqw, 9px); margin-top: 1.8cqh; }
  .s-who .mission { font-size: 4.4cqw; padding-left: 4cqw; }
  .pillars { grid-template-columns: 1fr; gap: 1.2cqh; }
  .pillars li { padding-top: .9cqh; } .pillars b { font-size: 3cqw; } .pillars span { font-size: max(2.85cqw, 9px); line-height: 1.45; margin-top: .5cqh; }
  .head { top: 9.5cqh; } .head .wtitle { font-size: 7cqw; letter-spacing: .08em; }
  .constellation { left: 8cqw; right: 8cqw; top: 24cqh; bottom: 8cqh; }
  .constellation .land { display: none; } .constellation .port { display: inline; }
  /* phones: a gently zigzagging spine of stars, labels on the outer side of each dot */
  .stars6 li { width: 38cqw; gap: 2.4cqw; flex-direction: row-reverse; text-align: right; transform: translate(calc(-100% + .9cqw), -50%); }
  .stars6 li:nth-child(even) { flex-direction: row; text-align: left; transform: translate(-.9cqw, -50%); }
  .stars6 li:nth-child(odd) { left: 44%; } .stars6 li:nth-child(even) { left: 56%; }
  .stars6 li:nth-child(1) { top: 9%; } .stars6 li:nth-child(2) { top: 24%; } .stars6 li:nth-child(3) { top: 40%; }
  .stars6 li:nth-child(4) { top: 56%; } .stars6 li:nth-child(5) { top: 72%; } .stars6 li:nth-child(6) { top: 88%; }
  .stars6 i { width: 1.8cqw; height: 1.8cqw; } .stars6 span { font-size: 3.1cqw; flex: 1 1 auto; min-width: 0; }
  .xcols { left: 8cqw; right: 8cqw; top: 20cqh; bottom: 6cqh; grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr); gap: 1.4cqh; }
  .xin { left: 5cqw; right: 5cqw; bottom: 1.6cqh; }
  .xin .rn { font-size: max(2cqw, 9.5px); } .xin h3 { font-size: 4.6cqw; margin-top: .6cqh; }
  .xin .season { font-size: max(2.2cqw, 9.5px); margin-top: .6cqh; } .xin .xsub { font-size: max(3.2cqw, 11px); margin-top: .5cqh; }
  .flow li { font-size: max(2.7cqw, 9px); padding: .2cqh 0 .2cqh 3cqw; } .flow li::before { width: 1.4cqw; top: calc(.2cqh + .78em); }
  .xcol.open .flow { max-height: 22cqh; margin-top: .8cqh; }
}

/* 05 temple of the oracle — typography first (PROTO v5 blocks, verbatim) */
/* ===== v5: typography first ===== */
.s-temple .thead { top: 11cqh; width: 60cqw; }
.elist { position: absolute; left: 8cqw; top: 39cqh; width: 44cqw; display: flex; flex-direction: column; }
.el-row { display: flex; align-items: baseline; gap: 1.6cqw; padding: 1.35cqh 0; background: none; border: 0; cursor: pointer; text-align: left; position: relative; color: var(--ivory); outline: none; }
.el-row .rn { width: 3cqw; flex: none; font: 400 max(.85cqw, 8px)/1 var(--display); letter-spacing: .2em; color: var(--dim); transition: color .5s; }
.el-row .word { font-family: var(--display); font-weight: var(--dw); font-size: calc(2.7cqw * var(--fs)); letter-spacing: .22em; text-transform: uppercase; line-height: 1.05; color: rgba(236,230,218,.34); transition: color .6s ease, letter-spacing .9s cubic-bezier(.2,.7,.2,1); }
.el-row .rule { position: absolute; left: 4.6cqw; right: 0; bottom: 0; height: 1px; background: rgba(210,178,122,.12); }
.el-row .rule::after { content: ''; position: absolute; left: 0; top: 0; height: 1px; width: 100%; background: linear-gradient(90deg, var(--gold-pale), rgba(210,178,122,0)); transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(.7,0,.2,1); }
.el-row:hover .word, .el-row:focus-visible .word { color: rgba(236,230,218,.55); }
.el-row.on .word { color: transparent; background-image: url(../assets/img/patina.jpg), linear-gradient(180deg, #f6ecd2 0%, #e2c88f 40%, #c4a064 72%, #8c6a36 100%); background-size: 460px 170px, 100% 100%; background-blend-mode: multiply, normal; -webkit-background-clip: text; background-clip: text; letter-spacing: .27em; }
.el-row.on .rn { color: var(--gold); }
.el-row.on .rule::after { transform: scaleX(1); }
.epanel { position: absolute; left: 60cqw; top: 41cqh; width: 28cqw; height: 44cqh; }
.ep .ico.big { display: block; width: 7cqw; height: 7cqw; color: var(--gold); filter: drop-shadow(0 0 .8cqw rgba(239,223,184,.22)); }
.ep .ico.big * { stroke-width: .6; }
.ep .ep-rn { font: 400 max(.8cqw, 8px)/1 var(--display); letter-spacing: .4em; text-transform: uppercase; color: var(--gold); margin-top: 3.4cqh; }
.ep p.txt { font: 300 max(1.32cqw, 10px)/1.8 'Raleway', sans-serif; color: var(--mute); margin-top: 2cqh; max-width: 27cqw; }
.ep p.txt em { font: italic 400 1.15em/1 'Cormorant Garamond', serif; color: var(--ivory); }
@container deck (orientation: portrait) {
  .s-temple .thead { top: 9.5cqh; width: auto; }
  .elist { left: 8cqw; right: 8cqw; width: auto; top: 31cqh; }
  .el-row { padding: 1.15cqh 0; gap: 3cqw; }
  .el-row .rn { width: 6cqw; font-size: max(2cqw, 9.5px); }
  .el-row .rule { left: 9cqw; }
  .el-row .word { font-size: calc(5.4cqw * var(--fs)); }
  .epanel { left: 8cqw; right: 8cqw; width: auto; top: 63cqh; height: 26cqh; }
  .ep .ico.big { width: 11cqw; height: 11cqw; }
  .ep .ep-rn { font-size: max(2cqw, 9.5px); margin-top: 2cqh; }
  .ep p.txt { font-size: 3.5cqw; max-width: none; margin-top: 1.2cqh; }
}
.dsc { position: absolute; inset: 0; opacity: 0; transform: translateY(1.2cqh); transition: opacity .8s ease, transform 1s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.dsc.on { opacity: 1; transform: none; transition-delay: .18s; }
.ico * { fill: none; stroke: currentColor; stroke-width: .8; stroke-linecap: round; stroke-linejoin: round; }
.ico .fill { fill: currentColor; stroke: none; }
.i-sound line { transform-box: fill-box; transform-origin: center; animation: eq 1.8s ease-in-out infinite; }
.i-sound line:nth-child(2) { animation-delay: -.3s; } .i-sound line:nth-child(3) { animation-delay: -.9s; } .i-sound line:nth-child(4) { animation-delay: -.5s; }
.i-sound line:nth-child(5) { animation-delay: -1.2s; } .i-sound line:nth-child(6) { animation-delay: -.2s; } .i-sound line:nth-child(7) { animation-delay: -.7s; }
@keyframes eq { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }
.i-eye .lid { transform-box: fill-box; transform-origin: center; animation: blink 6s ease-in-out infinite; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
.i-candle .flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker 2.6s ease-in-out infinite; }
@keyframes flicker { 0%, 100% { transform: scale(1, 1) rotate(0deg); } 25% { transform: scale(.94, 1.06) rotate(-3deg); } 50% { transform: scale(1.04, .95) rotate(2deg); } 75% { transform: scale(.97, 1.04) rotate(-1deg); } }
.i-spiral .sp { stroke-dasharray: .7 .3; animation: spiral 7s linear infinite; }
@keyframes spiral { to { stroke-dashoffset: -1; } }
.i-portal .star4 { transform-box: fill-box; transform-origin: center; animation: pulse 3s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(.93); opacity: .86; } 50% { transform: scale(1.06); opacity: 1; } }
.s-temple .thead { position: absolute; left: 8cqw; top: 11cqh; width: 60cqw; }
.s-temple .wtitle { font-size: 3.4cqw; letter-spacing: .12em; margin-top: 2.4cqh; }
.s-temple .lead { margin-top: 2.2cqh; max-width: 42cqw; }
.el-row .word { font-size: 3cqw; }
@container deck (orientation: portrait) {
  /* phones: heading, list and panel flow as one centred column (the panel keeps a fixed height: its descriptions are stacked) */
  .s-temple { display: flex; flex-direction: column; justify-content: center; gap: 3.4cqh; }
  .s-temple .thead, .s-temple .elist, .s-temple .epanel { position: relative; left: auto; right: auto; top: auto; width: auto; margin: 0 8cqw; }
  .s-temple .epanel { flex: none; height: 24cqh; }
  .s-temple .wtitle { font-size: 6.6cqw; letter-spacing: .08em; } .el-row .word { font-size: 5.8cqw; } .s-temple .lead { font-size: 4.3cqw; max-width: none; }
}

/* 06 journey */
.head.left { left: 8cqw; right: auto; align-items: flex-start; text-align: left; }
.path { position: absolute; left: 8cqw; right: 8cqw; top: 36cqh; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.6cqw; }
.path::before { content: ''; position: absolute; left: 1.3cqw; right: 1.3cqw; top: 1.3cqw; height: 1px; background: linear-gradient(90deg, rgba(210,178,122,.1), rgba(210,178,122,.6), rgba(210,178,122,.1)); transform: scaleX(0); transform-origin: left; }
.s-journey.is-active .path::before, .s-journey.is-leaving .path::before { animation: grow 1.4s cubic-bezier(.6,.1,.2,1) .3s forwards; }
@keyframes grow { to { transform: scaleX(1); } }
@keyframes growY { to { transform: scaleY(1); } }
.path li { position: relative; }
.pm { width: 2.6cqw; height: 2.6cqw; display: block; overflow: visible; background: var(--ink); border-radius: 50%; }
.pm circle { fill: #0b0d18; stroke: var(--gold); stroke-width: 1; stroke-opacity: .6; }
.pm .lit { fill: var(--gold-pale); opacity: 0; }
.s-journey.is-active .pm .lit, .s-journey.is-leaving .pm .lit { animation: fadeIn .6s ease both; animation-delay: calc(.4s + var(--k) * .18s); }
.path b { display: block; font: 500 max(1.2cqw, 12px)/1 var(--display); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-pale); margin-top: 2.4cqh; }
.path span { display: block; font: 300 max(.95cqw, 10px)/1.6 'Raleway', sans-serif; color: var(--mute); margin-top: 1.2cqh; padding-right: 1cqw; }
.formats { position: absolute; left: 8cqw; right: 8cqw; top: 68cqh; }
.flabel { font: 400 max(.8cqw, 9px)/1 'Raleway', sans-serif; letter-spacing: .48em; text-transform: uppercase; color: var(--gold); }
.formats ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3cqw; margin-top: 2.4cqh; }
.formats li { border-top: 1px solid rgba(210,178,122,.18); padding-top: 1.8cqh; }
.formats b { display: block; font: 500 max(1.2cqw, 12px)/1 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--ivory); }
.formats span { display: block; font: 300 max(.95cqw, 10px)/1.6 'Raleway', sans-serif; color: var(--mute); margin-top: 1.1cqh; }
@container deck (orientation: portrait) {
  .head.left { left: 8cqw; top: 9.5cqh; }
  .path { left: 8cqw; right: 8cqw; top: 22cqh; grid-template-columns: 1fr; gap: 1.4cqh; }
  .path::before { left: 3.1cqw; right: auto; top: 3cqw; bottom: 3cqw; width: 1px; height: auto; transform: scaleY(0); transform-origin: top; background: linear-gradient(180deg, rgba(210,178,122,.1), rgba(210,178,122,.6), rgba(210,178,122,.1)); }
  .s-journey.is-active .path::before, .s-journey.is-leaving .path::before { animation-name: growY; }
  .path li { display: grid; grid-template-columns: 6.2cqw 1fr; column-gap: 4cqw; align-items: start; }
  .pm { width: 6.2cqw; height: 6.2cqw; grid-row: span 2; }
  .path b { font-size: 3.2cqw; margin-top: .6cqh; } .path span { font-size: max(2.9cqw, 9px); margin-top: .4cqh; }
  .formats { left: 8cqw; right: 8cqw; top: 72cqh; } .flabel { font-size: max(2.1cqw, 9.5px); }
  .formats ul { grid-template-columns: 1fr; gap: 1cqh; margin-top: 1.2cqh; }
  .formats li { padding-top: .8cqh; } .formats b { font-size: 3cqw; } .formats span { font-size: max(2.7cqw, 9px); margin-top: .3cqh; }
}

/* 07 members (PROTO blocks, verbatim) */
.s-members .head { position: absolute; left: 0; right: 0; top: 12cqh; display: flex; flex-direction: column; align-items: center; text-align: center; }
.s-members .wtitle { font-size: 4.3cqw; letter-spacing: .05em; margin-top: 2.2cqh; }
.grid { position: absolute; left: 10cqw; right: 10cqw; top: 38cqh; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3cqw; }
.card { text-align: center; }
.portrait { position: relative; width: 11.5cqw; aspect-ratio: 1; margin: 0 auto; }
.portrait .clip { position: absolute; left: 7%; top: 7%; width: 86%; height: 86%; border-radius: 50%; overflow: hidden; background: #0c1018; }
.portrait .clip img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(1.03); transition: filter .8s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.card:hover .clip img { filter: saturate(1) contrast(1.03); transform: scale(1.04); }
.portrait svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.portrait .ring { fill: none; stroke: var(--gold); stroke-width: .5; stroke-opacity: .6; stroke-dasharray: 1; stroke-dashoffset: 1; }
.screen.is-active .portrait .ring, .screen.is-leaving .portrait .ring { animation: draw 1.2s ease forwards; animation-delay: calc(var(--base, 180ms) + var(--d, 0) * .55ms + 100ms); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.card b { display: block; font: 400 max(1.5cqw, 12px)/1.1 'Marcellus', serif; letter-spacing: .06em; color: var(--gold-pale); margin-top: 2.6cqh; }
.card .loc { display: block; font: 400 max(.7cqw, 8px)/1 'Raleway', sans-serif; letter-spacing: .34em; text-transform: uppercase; color: var(--dim); margin-top: 1.4cqh; }
.card p { font: 300 max(.92cqw, 9px)/1.55 'Raleway', sans-serif; color: var(--mute); margin-top: 1.6cqh; padding: 0 .4cqw; }
.s-members .foot { position: absolute; left: 0; right: 0; bottom: 9cqh; text-align: center; font: italic 300 max(1.45cqw, 11px)/1.3 'Cormorant Garamond', serif; color: #c9c2d4; }
@container deck (orientation: portrait) {
  .s-members .head { top: 9.5cqh; }
  .s-members .wtitle { font-size: 9.4cqw; }
  .grid { left: 6cqw; right: 6cqw; top: 27cqh; grid-template-columns: repeat(2, 1fr); gap: 5cqh 5cqw; }
  .portrait { width: 30cqw; }
  .card b { font-size: 5cqw; margin-top: 1.3cqh; }
  .card .loc { font-size: max(2cqw, 9.5px); letter-spacing: .26em; margin-top: .9cqh; }
  .card p { font-size: 3cqw; margin-top: 1cqh; }
  .s-members .foot { bottom: 5.5cqh; font-size: 4.1cqw; padding: 0 10cqw; }
}
.s-members .wtitle { font-size: 3.3cqw; letter-spacing: .12em; }
.card b { font-family: var(--display); font-weight: 500; text-transform: uppercase; letter-spacing: .14em; font-size: max(1.25cqw, 12px); }
@container deck (orientation: portrait) {
  /* phones: heading, 2×2 grid and closing line flow as one centred column */
  .s-members { display: flex; flex-direction: column; justify-content: center; gap: 3cqh; }
  .s-members .head, .s-members .grid, .s-members .foot { position: relative; left: auto; right: auto; top: auto; bottom: auto; }
  .s-members .grid { margin: 0 6cqw; gap: 3.6cqh 5cqw; }
  .portrait { width: 26cqw; }
  .s-members .wtitle { font-size: 6.6cqw; letter-spacing: .08em; } .card b { font-size: 3.6cqw; }
}

/* 08 moments */
.stats { position: absolute; left: 8cqw; top: 40cqh; width: 30cqw; display: grid; gap: 4cqh; }
.stats b { display: block; font: 400 max(3.6cqw, 26px)/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: transparent;
  background: linear-gradient(180deg, #f6ecd2, #e2c88f 45%, #a88550); -webkit-background-clip: text; background-clip: text; }
.stats span { display: block; font: 400 max(.8cqw, 9px)/1 'Raleway', sans-serif; letter-spacing: .4em; text-transform: uppercase; color: var(--gold); margin-top: 1.4cqh; }
.moments { position: absolute; left: 44cqw; right: 8cqw; top: 36cqh; display: grid; gap: 3.2cqh; }
.moments li { border-top: 1px solid rgba(210,178,122,.18); padding-top: 2cqh; }
.moments b { display: block; font: 500 max(1.3cqw, 13px)/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-pale); }
.moments span { display: block; font: 300 max(1.05cqw, 11px)/1.7 'Raleway', sans-serif; color: var(--mute); margin-top: 1.2cqh; }
@container deck (orientation: portrait) {
  .stats { left: 8cqw; right: 8cqw; width: auto; top: 24cqh; grid-template-columns: 1fr 1fr; gap: 4cqw; }
  .stats b { font-size: 7cqw; } .stats span { font-size: max(2cqw, 9.5px); }
  .moments { left: 8cqw; right: 8cqw; top: 40cqh; gap: 2cqh; }
  .moments b { font-size: 3.4cqw; } .moments span { font-size: 3cqw; margin-top: .6cqh; }
}

/* 09 clients */
.marquees { position: absolute; left: 0; right: 5cqw; top: 33cqh; display: grid; gap: 3.4cqh; } /* tracks stop short of the moon rail */
.mrow { display: grid; grid-template-columns: 20cqw 1fr; align-items: center; } /* wide enough for ORGANIZATIONS on one line */
.mlabel { font: 400 max(.72cqw, 9px)/1.3 'Raleway', sans-serif; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); padding-left: 8cqw; }
.mtrack { overflow: hidden; display: flex; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mline { flex: none; display: flex; align-items: center; gap: 1.6cqw; padding-right: 1.6cqw; animation: marquee var(--dur, 60s) linear infinite; white-space: nowrap; }
.mrow.rev .mline { animation-direction: reverse; }
.mtrack.paused .mline, .s-clients:not(.is-active):not(.is-leaving) .mline { animation-play-state: paused; } /* tap pauses on touch screens */
@media (hover: hover) { .mtrack:hover .mline { animation-play-state: paused; } }
.mline span { font: 500 max(1.05cqw, 11px)/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--ivory); }
.mline i { font-style: normal; font-size: .6cqw; color: rgba(210,178,122,.6); margin-left: 1.6cqw; vertical-align: .25em; letter-spacing: 0; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
/* 10 bespoke */
.s-bespoke .col { position: absolute; left: 8cqw; top: 12cqh; width: 46cqw; }
.s-bespoke .wtitle { font-size: 3.4cqw; letter-spacing: .12em; margin-top: 2.4cqh; }
.s-bespoke .body { margin-top: 2.2cqh; max-width: 42cqw; }
.steps { position: absolute; left: 60cqw; right: 8cqw; top: 22cqh; display: grid; gap: 3cqh; } /* clears the small moon in the corner */
.steps li { display: grid; grid-template-columns: 4cqw 1fr; column-gap: 1.2cqw; align-items: baseline; border-top: 1px solid rgba(210,178,122,.18); padding-top: 2cqh; }
.steps .rn { font: 400 max(.85cqw, 9px)/1 var(--display); letter-spacing: .3em; color: var(--gold); grid-row: span 2; }
.steps b { font: 500 max(1.4cqw, 13px)/1 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-pale); }
.steps b + span { font: 300 max(1cqw, 11px)/1.5 'Raleway', sans-serif; color: var(--mute); margin-top: .8cqh; }
.tech { position: absolute; left: 8cqw; right: 8cqw; top: 66cqh; border-top: 1px solid rgba(210,178,122,.3); padding-top: 2.4cqh; display: grid; grid-template-columns: 22cqw 1fr; column-gap: 3cqw; }
.tech b { font: 500 max(1.2cqw, 12px)/1.3 var(--display); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-pale); grid-row: span 2; }
.tech .body { margin: 0; max-width: 56cqw; } .tech .fine { margin-top: 1.4cqh; }
/* 11 join */
.jb { position: absolute; left: 0; right: 0; top: 50cqh; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2.2cqh; }
.s-join .wtitle { font-size: 3.2cqw; letter-spacing: .12em; max-width: 70cqw; }
.cta { display: flex; gap: 1.4cqw; flex-wrap: wrap; justify-content: center; }
.btn { display: inline-block; padding: 1.4cqh 2.2cqw; font: 500 max(.85cqw, 11px)/1 'Raleway', sans-serif; letter-spacing: .3em; text-transform: uppercase; text-decoration: none;
  color: #140f08; background: linear-gradient(180deg, #efdfb8, #c9a766); border-radius: 999px; transition: transform .3s, box-shadow .3s; }
.btn:hover, .btn:focus-visible { transform: translateY(-1px); box-shadow: 0 .8cqh 2.4cqh -1cqh rgba(210,178,122,.7); }
.btn:focus-visible { outline: 1px solid var(--gold-pale); outline-offset: 3px; }
.btn.ghost { background: none; color: var(--gold-pale); border: 1px solid rgba(210,178,122,.55); letter-spacing: .16em; text-transform: none; }
.mail { font: 300 max(.9cqw, 11px)/1 'Raleway', sans-serif; letter-spacing: .08em; color: var(--mute); }
.emblem { position: absolute; left: 50%; bottom: 5cqh; width: 7cqw; transform: translateX(-50%); opacity: .85; }
.s-join.is-active .emblem { animation: enterEmblem 1s ease .6s both; }
@keyframes enterEmblem { from { opacity: 0; transform: translateX(-50%) translateY(1.5cqh); } to { opacity: .85; transform: translateX(-50%); } }
@container deck (orientation: portrait) {
  .marquees { top: 30cqh; right: 7cqw; gap: 3.6cqh; } .mrow { grid-template-columns: 1fr; gap: .8cqh; } .mlabel { padding-left: 8cqw; font-size: max(2cqw, 9.5px); }
  .mline span { font-size: 3.2cqw; } .mline { gap: 4cqw; padding-right: 4cqw; } .mline i { font-size: 1.6cqw; margin-left: 4cqw; }
  .s-bespoke .col { left: 8cqw; right: 8cqw; width: auto; top: 9.5cqh; } .s-bespoke .wtitle { font-size: 6.6cqw; letter-spacing: .08em; }
  .s-bespoke .body { max-width: none; font-size: 3.2cqw; }
  .steps { left: 8cqw; right: 8cqw; top: 50cqh; gap: 1.4cqh; } .steps li { grid-template-columns: 7cqw 1fr; padding-top: 1cqh; }
  .steps b { font-size: 3.4cqw; } .steps .rn { font-size: max(2cqw, 9.5px); } .steps b + span { font-size: max(2.8cqw, 9px); }
  .tech { left: 8cqw; right: 8cqw; top: 73cqh; grid-template-columns: 1fr; padding-top: 1.4cqh; } .tech b { font-size: 3cqw; }
  .tech .body { font-size: max(2.9cqw, 9px); max-width: none; margin-top: .8cqh; } .tech .fine { font-size: max(2.5cqw, 9px); }
  .jb { top: 44cqh; gap: 1.8cqh; padding: 0 8cqw; } .s-join .wtitle { font-size: 6.4cqw; letter-spacing: .08em; max-width: none; }
  .btn { padding: 1.4cqh 5cqw; font-size: max(2.6cqw, 9px); } .mail { font-size: max(2.8cqw, 9px); } .emblem { width: 20cqw; bottom: 4cqh; }
}
/* reduced motion: every client list becomes static wrapped text (no slide, no edge fade), so the whole list stays readable */
@media (prefers-reduced-motion: reduce) {
  .mtrack { -webkit-mask-image: none; mask-image: none; }
  .mline { animation: none; flex: 1 1 auto; display: block; white-space: normal; padding-right: 0; font-size: max(1.05cqw, 11px); line-height: 1.9; } /* row font = name font, so line boxes follow it */
  .mline span { white-space: nowrap; text-transform: none; letter-spacing: .03em; } .mline i { margin: 0 .5em; } .mline > span:last-child i { display: none; }
  .mline[aria-hidden="true"] { display: none; }
  /* phones cannot hold all 66 names at once: each group shows what fits and ends with an ellipsis */
  @container deck (orientation: portrait) {
    .marquees { top: 23cqh; gap: 1.6cqh; } .mrow { gap: .2cqh; }
    .mline { font-size: max(2.7cqw, 9px); line-height: 1.4; padding-left: 8cqw; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden; } .mline span { font-size: max(2.7cqw, 9px); }
  }
  @container deck (orientation: landscape) and (max-height: 500px) {
    .mline { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
  }
}

/* phone on its side (short landscape): compact layouts; the screen canvas is full width here (see base.css) */
@container deck (orientation: landscape) and (max-height: 500px) {
  .eyebrow { font-size: 1.6cqh; }
  .s-cover .tb { top: 50cqh; } .s-cover .wtitle { font-size: 6cqw; } .s-cover .sub { font-size: max(1.1cqw, 9px); } .s-cover .kicker, .s-cover .year { font-size: max(1.1cqw, 9px); }
  .s-who .col, .s-bespoke .col, .s-temple .thead { top: 8cqh; }
  .s-who .body, .s-bespoke .body { font-size: max(1.05cqw, 10px); line-height: 1.55; margin-top: 1.4cqh; } /* never below 9–10 px on a phone */
  .s-who .fine, .card p, .formats span, .tech .fine, .xin .xsub { position: absolute !important; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* no room on a phone on its side: visually cut, still read by screen readers */
  .s-who .mission { top: 14cqh; font-size: 1.9cqw; }
  .pillars { top: 76cqh; } .pillars span { font-size: max(.9cqw, 9px); }
  .head { top: 7cqh; }
  .constellation { top: 28cqh; bottom: 6cqh; }
  .xcols { top: 25cqh; bottom: 6cqh; }
  .elist { top: 34cqh; } .el-row { padding: .9cqh 0; } .epanel { top: 36cqh; }
  .path { top: 30cqh; } .path span { font-size: max(.85cqw, 9px); line-height: 1.45; }
  .formats { top: 70cqh; }
  .grid { top: 34cqh; } .s-members .foot { bottom: 5cqh; }
  .stats { top: 34cqh; } .moments { top: 30cqh; gap: 2cqh; } .moments span { font-size: max(.95cqw, 9.5px); line-height: 1.5; }
  .marquees { top: 28cqh; gap: 2.4cqh; }
  .steps { top: 22cqh; gap: 2cqh; } .tech { top: 70cqh; }
  .mrow { grid-template-columns: 24cqw 1fr; } .mlabel { padding-left: 6cqw; }
  .jb { top: 48cqh; gap: 1.4cqh; } .emblem { width: 5cqw; bottom: 3cqh; }
}