/* ==========================================================
   02 · Mobile Story
   Sizes inside the phone use container units (cqw / cqh) so
   every card scales with the phone, not the browser window.
   ========================================================== */
html, body { height: 100%; }
body { overflow: hidden; overscroll-behavior: none; background: #0b0b0d; }

/* ---------- viewer (desktop backdrop) ---------- */
.viewer {
  position: fixed; inset: 0; display: grid; grid-template-columns: auto auto auto; justify-content: center; align-items: center; gap: 28px;
  background: #0b0b0d; transition: background .8s var(--ease);
}
.viewer[data-theme="light"] { background: #e8e5e0; }
.viewer[data-theme="red"] { background: #5e0b13; }
.viewer__bg { position: absolute; inset: 0; pointer-events: none; transition: opacity .8s;
  background: radial-gradient(40% 50% at 50% 50%, rgba(208,31,46,.35), transparent 70%); }
.viewer[data-theme="light"] .viewer__bg { background: radial-gradient(40% 50% at 50% 50%, rgba(208,31,46,.14), transparent 70%); }

.phone {
  position: relative; z-index: 1; container-type: size; overflow: hidden; isolation: isolate;
  height: min(calc(100vh - 104px), 880px); aspect-ratio: 9 / 17.5; border-radius: 30px; background: #fff;
  box-shadow: 0 50px 100px -30px rgba(0,0,0,.6), 0 0 0 8px #141418, 0 0 0 9px rgba(255,255,255,.12);
  touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}

.side { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ink); box-shadow: var(--shadow-md); transition: transform .3s var(--ease), opacity .3s; z-index: 1; }
.side svg { width: 22px; height: 22px; }
.side:hover { transform: scale(1.08); }
.side:disabled { opacity: 0; pointer-events: none; }
.kbd-hint { position: fixed; left: 0; right: 0; bottom: 14px; margin: 0; text-align: center; font-size: .74rem; color: rgba(255,255,255,.55); }
.viewer[data-theme="light"] .kbd-hint { color: var(--muted); }
kbd { font-family: var(--f-body); font-size: .7rem; padding: .1em .45em; border-radius: 5px; border: 1px solid currentColor; margin: 0 2px; }

/* full-screen on phones */
@media (max-width: 600px), (max-height: 560px) and (pointer: coarse) {
  .viewer { display: block; }
  .phone { width: 100vw; height: 100vh; height: 100dvh; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
  .side, .kbd-hint, .viewer__bg { display: none; }
}

/* ---------- progress bars + header ---------- */
.bars, .shead { --fg: #fff; color: var(--fg); }
.viewer[data-theme="light"] .bars, .viewer[data-theme="light"] .shead { --fg: var(--ink); }
.bars { position: absolute; z-index: 5; top: calc(env(safe-area-inset-top) + 2.4cqw); left: 2.6cqw; right: 2.6cqw; display: flex; gap: .8cqw; pointer-events: none; }
.bars i { flex: 1; height: 3px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--fg) 28%, transparent); }
.bars b { display: block; height: 100%; background: var(--fg); transform: scaleX(0); transform-origin: left; }

.shead { position: absolute; z-index: 5; top: calc(env(safe-area-inset-top) + 5.2cqw); left: 3cqw; right: 1.6cqw; display: flex; align-items: center; gap: 2.2cqw; }
.shead__av { width: 9.4cqw; height: 9.4cqw; max-width: 40px; max-height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: #fff; font-family: var(--f-display); font-weight: 900; font-size: min(2.8cqw, 12px); box-shadow: 0 0 0 2px #fff; }
.shead__tx { flex: 1; min-width: 0; line-height: 1.2; }
.shead__tx b { display: block; font-size: min(3.5cqw, 15px); font-weight: 700; }
.shead__tx span { display: block; font-size: min(3cqw, 13px); opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbtn { width: 10cqw; height: 10cqw; max-width: 42px; max-height: 42px; display: grid; place-items: center; border-radius: 50%; color: inherit; flex: none; }
.sbtn svg { width: min(5.4cqw, 22px); height: min(5.4cqw, 22px); }
.sbtn:hover { background: color-mix(in srgb, var(--fg) 12%, transparent); }

/* ---------- stories ---------- */
.stories { position: absolute; inset: 0; }
.st {
  position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden;
  padding-top: calc(env(safe-area-inset-top) + 18cqw); padding-bottom: calc(env(safe-area-inset-bottom) + 6cqw);
  opacity: 0; visibility: hidden;
}
.st.is-on { opacity: 1; visibility: visible; z-index: 1; }
.st.enter-next { animation: enterNext .55s var(--ease) both; }
.st.enter-prev { animation: enterPrev .55s var(--ease) both; }
@keyframes enterNext { from { opacity: 0; transform: translateX(7%) scale(.97); } }
@keyframes enterPrev { from { opacity: 0; transform: translateX(-7%) scale(.97); } }

.st--light { background: #fff; color: var(--ink); --accent: var(--red); --soft: var(--paper-2); --mut: var(--muted); }
.st--red { background: var(--red); color: #fff; --accent: #fff; --soft: rgba(255,255,255,.12); --mut: rgba(255,255,255,.78); }
.st--ink { background: #141418; color: #fff; --accent: #ff4757; --soft: rgba(255,255,255,.07); --mut: rgba(255,255,255,.62); }
.st--red { background: radial-gradient(120% 70% at 100% 0%, #e2283a 0%, var(--red) 40%, var(--red-deep) 100%); }
.st--ink { background: radial-gradient(100% 60% at 0% 0%, #2a1015 0%, #141418 55%); }

.st.is-on .in { animation: rise .75s var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes rise { from { opacity: 0; transform: translateY(4cqw); } }

.s-pad { position: relative; z-index: 1; padding-inline: 6cqw; }
.st--mid > .s-pad { margin-block: auto; }
.s-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }

.stripes { position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 22px); }
.stripes::before, .stripes::after { content: ''; position: absolute; width: 70cqw; height: 9cqw; transform: rotate(-45deg); }
.stripes::before { right: -24cqw; bottom: 34cqw; background: var(--ink); }
.stripes::after { left: -26cqw; bottom: 12cqw; background: rgba(255,255,255,.14); }

/* ---------- type ---------- */
.kick { margin: 0 0 2.4cqw; font-size: 2.9cqw; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.st--red .kick { color: rgba(255,255,255,.85); }
.kick--gold { color: var(--gold-2) !important; }
.h-xl { margin: 0; font-family: var(--f-display); font-weight: 900; font-size: 10.5cqw; line-height: .98; letter-spacing: -.02em; }
.h-lg { margin: 0 0 4cqw; font-family: var(--f-display); font-weight: 900; font-size: 8.6cqw; line-height: 1; letter-spacing: -.02em; }
.h-lg em { font-style: normal; color: var(--accent); }
.st--red .h-lg em { color: var(--ink); }
.h-md { margin: .6cqw 0; font-family: var(--f-display); font-weight: 800; font-size: 5.6cqw; line-height: 1.1; }
.st .banner { font-size: 6.4cqw; margin: 0 0 3.4cqw; }
.st--ink .banner span { background: #fff; color: var(--ink); }
.sub { margin: 0 0 4cqw; font-size: 3.3cqw; color: var(--mut); line-height: 1.5; }
.tag { display: inline-block; padding: .45em 1em; border-radius: 999px; background: var(--red); color: #fff; font-size: 2.6cqw; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.st--red .tag { background: #fff; color: var(--red); }
.hash { font-size: 6cqw; margin: 5cqw 0 0; color: var(--accent); transform: rotate(-3deg); }
.tip { margin: 3cqw 0 0; text-align: center; font-size: 2.9cqw; color: var(--mut); }
.tip--abs { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 6cqw); }

/* ---------- 1 cover ---------- */
.covercard { width: 54cqw; border-radius: 2cqw; overflow: hidden; transform: rotate(-4deg); margin-bottom: 7cqw;
  box-shadow: 0 6cqw 12cqw -4cqw rgba(0,0,0,.55), 0 0 0 1.4cqw rgba(255,255,255,.12); }
.st.is-on .covercard { animation-name: coverIn; animation-duration: 1.1s; }
@keyframes coverIn { from { opacity: 0; transform: rotate(-12deg) translateY(10cqw) scale(.85); } }
.covercard img { width: 100%; height: auto; }
.tap-hint { margin-top: 7cqw; display: inline-flex; align-items: center; gap: 2cqw; padding: 2.6cqw 5cqw; border-radius: 999px; background: #fff; color: var(--red); font-weight: 700; font-size: 3.4cqw; }
.tap-hint svg { width: 4.4cqw; height: 4.4cqw; animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(1.4cqw); } }

/* ---------- 2 awards ---------- */
.big43 b { display: block; font-family: var(--f-display); font-weight: 900; font-size: 34cqw; line-height: .9; letter-spacing: -.05em; color: var(--red); }
.big43 span { display: block; font-size: 3.2cqw; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; margin-top: 2cqw; }
.awards { list-style: none; padding: 0; margin: 8cqw 0 0; display: grid; gap: 3cqw; width: 100%; }
.awards li { display: flex; align-items: center; gap: 3.4cqw; padding: 3.6cqw 4cqw; border-radius: 4cqw; background: var(--soft); text-align: left; font-size: 3.6cqw; }
.awards svg { width: 8cqw; height: 8cqw; color: var(--red); flex: none; }
.awards b { display: block; font-family: var(--f-display); font-size: 4.6cqw; }

/* ---------- leaders ---------- */
.st:has(.ld-photo) { padding-top: 0; }
.ld-photo { position: relative; height: 52%; flex: none; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); }
.ld-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.ld-photo::before { content: ''; position: absolute; inset: 0 0 auto; height: 30%; z-index: 1; background: linear-gradient(rgba(255,255,255,.85), transparent); }
.ld-photo::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 12%; background: var(--red); clip-path: polygon(0 100%, 100% 0, 100% 22%, 0 122%); }
.ld-body { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 3cqw; }
.ld-quote { margin: 0; position: relative; font-family: var(--f-display); font-weight: 800; font-size: 5.4cqw; line-height: 1.22; letter-spacing: -.01em; }
.ld-quote::before { content: '“'; position: absolute; left: -1cqw; top: -9cqw; font-size: 18cqw; line-height: 1; color: var(--red); opacity: .2; }
.ld-name { margin: 0; font-size: 3.1cqw; color: var(--mut); }
.ld-name b { display: block; color: var(--ink); font-size: 4.2cqw; font-family: var(--f-display); }
.more { display: inline-flex; align-items: center; gap: 1.6cqw; color: var(--red); font-weight: 700; font-size: 3.2cqw; }
.more svg { width: 4.4cqw; height: 4.4cqw; animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-1cqw); } }

/* ---------- values ---------- */
.gg { width: 38cqw; aspect-ratio: 1; margin: 2cqw auto 6cqw; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: .6cqw; text-align: center;
  background: radial-gradient(circle at 30% 25%, #e8384a, var(--red-deep)); color: #fff; box-shadow: 0 0 0 2.6cqw var(--red-soft), 0 0 0 5.2cqw rgba(208,31,46,.05), var(--shadow-red); }
.gg svg { width: 8cqw; height: 8cqw; fill: #fff; stroke: none; }
.gg b { font-family: var(--f-display); font-weight: 900; font-size: 6.4cqw; line-height: 1; }
.gg small { font-size: 2.6cqw; opacity: .85; }
.st.is-on .gg { animation-name: pop; }
@keyframes pop { from { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.05); } }
.values { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2.6cqw; }
.values li { display: flex; align-items: center; gap: 2.4cqw; padding: 2.8cqw; border-radius: 3.4cqw; background: var(--soft); font-size: 3.2cqw; font-weight: 600; line-height: 1.2; }
.values span { width: 8.4cqw; height: 8.4cqw; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--red-soft); color: var(--red); }
.values svg { width: 4.6cqw; height: 4.6cqw; }

/* ---------- stats ---------- */
.ghost-word { position: absolute; right: -4cqw; bottom: 2cqw; font-family: var(--f-display); font-weight: 900; font-size: 30cqw; line-height: .8; letter-spacing: -.05em; color: rgba(20,20,24,.04); writing-mode: vertical-rl; transform: rotate(180deg); pointer-events: none; }
.stat-hero { display: flex; align-items: center; gap: 4.4cqw; margin-bottom: 4.6cqw; }
.stat-hero__ring { width: 26cqw; aspect-ratio: 1; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: #fff; box-shadow: 0 0 0 1.8cqw #fff, 0 0 0 2.2cqw var(--paper-3), var(--shadow-red); }
.stat-hero__ring svg { width: 11cqw; height: 11cqw; }
.stat-hero b { display: block; font-family: var(--f-display); font-weight: 900; font-size: 12cqw; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat-hero small { display: block; font-size: 3.2cqw; color: var(--mut); margin-top: 1cqw; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.stat { padding: 3.8cqw; border-radius: 4cqw; background: var(--paper-2); display: grid; gap: 1cqw; align-content: start; }
.stat svg { width: 6.4cqw; height: 6.4cqw; color: var(--red); }
.stat b { font-family: var(--f-display); font-weight: 900; font-size: 6cqw; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 1cqw; }
.stat small { font-size: 2.7cqw; color: var(--mut); line-height: 1.35; }
.stat.is-ink { background: var(--ink); color: #fff; }
.stat.is-ink svg { color: #ff5a67; }
.stat.is-ink small { color: rgba(255,255,255,.65); }

/* ---------- goals ---------- */
.goals { display: grid; grid-template-columns: 1fr 1fr; gap: 2.6cqw; }
.goal { background: #fff; color: var(--ink); border-radius: 3.6cqw; padding: 3.2cqw 3.6cqw; display: grid; gap: .4cqw; box-shadow: 0 2cqw 5cqw -2cqw rgba(0,0,0,.3); }
.goal svg { width: 5.6cqw; height: 5.6cqw; color: var(--red); }
.goal b { font-family: var(--f-display); font-weight: 900; font-size: 7.6cqw; line-height: 1; color: var(--red); letter-spacing: -.02em; }
.goal b i { font-style: normal; font-size: 4.2cqw; margin-left: .4cqw; }
.goal small { font-size: 2.7cqw; line-height: 1.3; color: var(--ink-2); font-weight: 500; }

/* ---------- vision ---------- */
.st:has(.vis-img) { padding-top: 0; }
.vis-img { height: 40%; flex: none; margin-bottom: 6cqw; position: relative; }
.vis-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.vis-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,.9), transparent 30%, transparent 70%, #fff); }
.vis-text { margin: 0; font-size: 5cqw; line-height: 1.45; font-weight: 500; letter-spacing: -.01em; }
.vis-text b { color: var(--red); font-weight: 700; }

/* ---------- achieve ---------- */
.achieve { list-style: none; margin: 0; padding: 0; }
.achieve li { display: grid; grid-template-columns: 9cqw 1fr; gap: 2cqw; padding: 2.7cqw 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.achieve i { font-style: normal; font-family: var(--f-display); font-weight: 900; color: var(--accent); font-size: 4cqw; line-height: 1.3; }
.achieve p { margin: 0; font-size: 3.4cqw; line-height: 1.45; color: rgba(255,255,255,.82); }
.achieve b { color: #fff; }
.grow { text-align: center; font-size: 7.4cqw; color: var(--accent); margin: 5cqw 0 0; transform: rotate(-3deg); }

/* ---------- team excel ---------- */
.st:has(.tx-img) { padding-top: 0; }
.tx-img { height: 46%; flex: none; overflow: hidden; position: relative; }
.tx-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.tx-img::after { content: ''; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(transparent, var(--red)); }
.tx-body { margin-top: -4cqw; }
.tx-body .h-lg { margin-bottom: 3cqw; }
.tx-body .script { color: #fff; font-weight: 400; margin-left: 1cqw; }
.roles { list-style: none; margin: 0; padding: 0; display: grid; gap: 2cqw; }
.roles button, .roles div { width: 100%; display: flex; align-items: center; gap: 3cqw; padding: 2.4cqw 3cqw; border-radius: 3.4cqw; background: rgba(255,255,255,.12); text-align: left; color: #fff; }
.roles button:hover { background: rgba(255,255,255,.2); }
.roles i { width: 9.4cqw; height: 9.4cqw; flex: none; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--red); font-style: normal; font-family: var(--f-display); font-weight: 900; font-size: 2.8cqw; }
.roles span { flex: 1; line-height: 1.2; }
.roles b { display: block; font-size: 3.7cqw; }
.roles small { font-size: 2.8cqw; opacity: .8; }
.roles svg { width: 4.4cqw; height: 4.4cqw; opacity: .7; }

/* ---------- gold pins ---------- */
.gold { background: linear-gradient(180deg, #fff3c9, #e8c873 45%, #b8862b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pins { display: grid; grid-template-columns: 1fr 1fr; gap: 5cqw; width: 100%; margin-top: 3cqw; }
.pin { display: grid; justify-items: center; gap: 1cqw; color: #fff; }
.pin__ph { width: 100%; aspect-ratio: .78; border-radius: 4cqw; overflow: hidden; margin-bottom: 2cqw; position: relative;
  box-shadow: 0 0 0 .8cqw #141418, 0 0 0 1.4cqw var(--gold), 0 4cqw 10cqw -2cqw rgba(232,200,115,.4); transition: transform .4s var(--ease); }
.pin:hover .pin__ph { transform: translateY(-1cqw); }
.pin__ph img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pin b { font-family: var(--f-display); font-size: 4cqw; }
.pin small { font-size: 2.8cqw; color: rgba(255,255,255,.6); }

/* ---------- member grids ---------- */
.grid { display: grid; gap: 3.4cqw 2.4cqw; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); gap: 2.8cqw 2cqw; }
.mem { display: grid; justify-items: center; gap: 1.2cqw; color: inherit; min-width: 0; }
.mem__ph { position: relative; width: 100%; max-width: 22cqw; aspect-ratio: 1; border-radius: 50%; padding: .7cqw; background: conic-gradient(from 210deg, var(--red), #ff8a5b, var(--red)); transition: transform .35s var(--ease); }
.st--red .mem__ph { background: #fff; }
.mem__ph img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: top; background: var(--paper-3); border: .6cqw solid #fff; }
.st--ink .mem__ph img { border-color: #141418; }
.st--red .mem__ph img { border-color: var(--red); }
.mem:hover .mem__ph, .mem:focus-visible .mem__ph { transform: scale(1.06); }
.mem em { position: absolute; right: -1cqw; bottom: -.6cqw; min-width: 6.4cqw; height: 6.4cqw; padding: 0 1cqw; border-radius: 999px; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 2.3cqw; background: var(--ink); color: #fff; box-shadow: 0 0 0 .6cqw #fff; }
.st--ink .mem em { background: var(--red); box-shadow: 0 0 0 .6cqw #141418; }
.mem b { font-size: 2.9cqw; font-weight: 600; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid--4 .mem__ph { max-width: 17cqw; }
.grid--4 .mem b { font-size: 2.6cqw; }

.team-word { margin: 0; font-family: var(--f-display); font-weight: 900; font-size: 20cqw; line-height: .85; letter-spacing: -.045em; color: var(--accent); }
.st--ink .team-word { color: #fff; -webkit-text-stroke: 0; }
.st--ink .team-word { background: linear-gradient(90deg, #fff 30%, #ff4757); -webkit-background-clip: text; background-clip: text; color: transparent; }
.team-tag { margin: 1.4cqw 0 5cqw; font-size: 3cqw; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mut); }

/* ---------- showcase marquee ---------- */
.mqs { display: grid; gap: 3cqw; margin-top: 2cqw; transform: rotate(-4deg) scale(1.08); }
.mq { overflow: hidden; }
.mq__track { display: flex; gap: 3cqw; width: max-content; animation: marq 46s linear infinite; }
.mq--rev .mq__track { animation-direction: reverse; animation-duration: 52s; }
.mq:hover .mq__track, .viewer.is-paused .mq__track { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(-50%); } }
.adt { width: 30cqw; flex: none; aspect-ratio: 421 / 594; border-radius: 2cqw; overflow: hidden; box-shadow: 0 2cqw 5cqw rgba(0,0,0,.4); transition: transform .3s var(--ease); }
.adt:hover { transform: translateY(-1.4cqw); }
.adt img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- sponsors ---------- */
.sp-head { display: flex; align-items: center; gap: 3.6cqw; margin-bottom: 4cqw; }
.sp-head img { width: 17cqw; height: 17cqw; border-radius: 3.4cqw; object-fit: cover; flex: none; }
.sp-head p { margin: 0; font-size: 3cqw; color: var(--mut); }
.poster { display: block; width: 100%; height: 34cqh; border-radius: 3.6cqw; overflow: hidden; box-shadow: 0 0 0 1px rgba(232,200,115,.4); }
.poster img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; transition: transform 6s linear; }
.st.is-on .poster img { transform: scale(1.08); }
.chips { list-style: none; margin: 3.6cqw 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.6cqw; }
.chips li { font-size: 2.7cqw; padding: .55em 1.1em; border-radius: 999px; background: var(--soft); }

.pacts { display: flex; gap: 2cqw; }
.pact { flex: 1; display: grid; justify-items: center; gap: 1cqw; padding: 2.6cqw 1cqw; border-radius: 3.4cqw; background: var(--soft, var(--paper-2)); color: inherit; font-size: 2.8cqw; font-weight: 600; transition: transform .25s var(--ease), background .2s; }
.pact svg { width: 5.4cqw; height: 5.4cqw; }
.pact:hover { transform: translateY(-.6cqw); }
.pact--wa { background: #25d366 !important; color: #fff !important; }

.cosp { display: flex; gap: 3.4cqw; padding: 3.4cqw; margin-bottom: 3.4cqw; border-radius: 4.4cqw; background: var(--paper-2); }
.cosp__ad { width: 26cqw; flex: none; align-self: flex-start; border-radius: 2cqw; overflow: hidden; box-shadow: var(--shadow-md); }
.cosp__ad img { width: 100%; height: auto; }
.cosp__tx { min-width: 0; display: grid; gap: .6cqw; align-content: start; }
.cosp__tx b { font-family: var(--f-display); font-size: 4.4cqw; line-height: 1.1; }
.cosp__tx small { font-size: 2.9cqw; color: var(--red); font-weight: 600; }
.cosp__tx p { margin: .6cqw 0 1.6cqw; font-size: 2.9cqw; line-height: 1.45; color: var(--ink-2); }
.cosp .pact { background: #fff; padding: 1.8cqw .6cqw; font-size: 2.4cqw; }
.cosp .pact svg { width: 4.4cqw; height: 4.4cqw; }

/* ---------- end ---------- */
.end { gap: 0; }
.end__lockup { font-size: 4.2cqw; margin-bottom: 8cqw; }
.end .h-xl { font-size: 11cqw; }
.end__acts { width: 100%; max-width: 76cqw; display: grid; gap: 2.8cqw; margin-top: 9cqw; }
.end .btn { min-height: 0; padding: 3.6cqw 4cqw; font-size: 3.5cqw; }
.end .btn svg { width: 4.8cqw; height: 4.8cqw; }
.btn--line { --bg: transparent; --fg: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); }
.btn--line:hover { box-shadow: inset 0 0 0 1.5px #fff; }
.end .link { margin-top: 1.6cqw; font-size: 3.2cqw; text-decoration: underline; text-underline-offset: .3em; opacity: .85; }

/* ---------- sheet ---------- */
.sheet { position: absolute; inset: 0; z-index: 20; visibility: hidden; }
.sheet.is-open { visibility: visible; }
.sheet__scrim { position: absolute; inset: 0; background: rgba(10,10,12,.55); opacity: 0; transition: opacity .35s; }
.sheet.is-open .sheet__scrim { opacity: 1; }
.sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 88%; display: flex; flex-direction: column;
  background: #fff; color: var(--ink); border-radius: 6cqw 6cqw 0 0; transform: translateY(102%); transition: transform .5s var(--ease);
  padding-bottom: env(safe-area-inset-bottom);
  --soft: var(--paper-2); --mut: var(--muted);
}
.sheet.is-open .sheet__panel { transform: none; }
.sheet__grip { width: 11cqw; height: 1.2cqw; border-radius: 9px; background: var(--paper-3); margin: 2.6cqw auto 0; flex: none; }
.sheet__x { position: absolute; top: 2.6cqw; right: 2.6cqw; width: 10cqw; height: 10cqw; max-width: 42px; max-height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); z-index: 1; }
.sheet__x svg { width: 5cqw; height: 5cqw; max-width: 20px; }
.sheet__body { overflow-y: auto; padding: 4cqw 6cqw 7cqw; overscroll-behavior: contain; user-select: text; -webkit-user-select: text; }
.sheet__body p { font-size: 3.5cqw; line-height: 1.65; color: var(--ink-2); }
.sheet .kick { color: var(--red); }
.sh-title { margin: 0; font-family: var(--f-display); font-weight: 800; font-size: 6.2cqw; line-height: 1.1; padding-right: 10cqw; }
.sh-sub { margin: 1cqw 0 0 !important; font-size: 3.2cqw !important; color: var(--muted) !important; }
.sh-co { margin: .4cqw 0 0 !important; font-weight: 700; color: var(--red) !important; font-size: 3.3cqw !important; }
.sh-quote { margin: 5cqw 0 4cqw; padding-left: 4cqw; border-left: 3px solid var(--red); font-family: var(--f-display); font-weight: 700; font-size: 4.4cqw; line-height: 1.35; }
.msheet { display: flex; gap: 4cqw; align-items: center; margin-top: 2cqw; }
.msheet__ph { width: 25cqw; aspect-ratio: .78; flex: none; border-radius: 3.6cqw; overflow: hidden; background: var(--paper-3); }
.msheet__ph img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.msheet .tag { margin-bottom: 2cqw; font-size: 2.3cqw; }
.msheet__info { list-style: none; padding: 0; margin: 5cqw 0 4cqw; display: grid; gap: 2cqw; font-size: 3.2cqw; word-break: break-word; }
.msheet__info li { display: flex; align-items: center; gap: 2.4cqw; }
.msheet__info svg { width: 4.6cqw; height: 4.6cqw; color: var(--red); flex: none; }
.btn--block { width: 100%; margin-top: 3.4cqw; min-height: 0; padding: 3.4cqw; font-size: 3.4cqw; }
.adfull { width: 100%; height: auto; border-radius: 2.4cqw; margin: 4cqw 0 3cqw; box-shadow: var(--shadow-md); }
.sheet .pacts { margin-top: 3cqw; }