/* ============================================================
   SATOSHI BAE — product page styles (extends styles.css tokens)
   ============================================================ */

/* ---------- hero ---------- */
.bae-hero {
  position: relative; max-width: var(--maxw); margin: 0 auto;
  padding: clamp(50px,8vw,110px) clamp(18px,5vw,56px) clamp(30px,4vw,60px);
  text-align: center; overflow: visible;
}
/* large faint line-art backdrop behind the hero region (dark-yellow strokes) */
.bae-backdrop {
  position: absolute; left: 0; right: 0;
  top: clamp(40px, 3vw, 80px);
  height: clamp(820px, 104vw, 1700px);
  z-index: -1; pointer-events: none;
  overflow: hidden;          /* clip the spinning corners so no scrollbars appear */
  opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 84% 80% at 50% 36%, #000 66%, transparent 98%);
          mask-image: radial-gradient(ellipse 84% 80% at 50% 36%, #000 66%, transparent 98%);
}
/* the line-art fly: 0.8x smaller, spinning round and round (for the lols) */
.bae-backdrop::before {
  content: "";
  position: absolute;
  left: 50%; top: 33%;
  width: min(82vw, 1180px);
  aspect-ratio: 1 / 1;
  background: url(assets/bae-draw2.svg?v=5) center / contain no-repeat;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  animation: bae-spin 15s linear infinite;
}
@keyframes bae-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .bae-backdrop::before { animation: none; }
}
[data-theme="neon"] .bae-backdrop { opacity:.5; }
[data-theme="riso"] .bae-backdrop { opacity:.42; }
.bae-kicker {
  font-family: var(--mono); font-size: 13px; letter-spacing:.34em;
  text-transform: uppercase; color: var(--accent);
  display:flex; align-items:center; justify-content:center; gap:12px;
}
.bae-kicker::before, .bae-kicker::after { content:""; width:34px; height:1.5px; background: var(--accent); flex:0 0 auto; }
/* スマホ幅では飾り線とテキストが1行に収まらず文字が縦折れするため線を消して詰める */
@media (max-width: 540px){
  .bae-kicker { font-size: 11px; letter-spacing: .2em; }
  .bae-kicker::before, .bae-kicker::after { display: none; }
}
.bae-title {
  font-family: var(--display); font-weight: 900; line-height: .92;
  /* 最小値64pxだとスマホ幅で「SATOSHI BAE」が収まらず右が見切れるため42pxに */
  font-size: clamp(42px, 13vw, 190px); margin: 18px 0 0;
  text-transform: uppercase; letter-spacing: -.02em;
}
.bae-title .b { color: var(--accent); display: inline-block; }
[data-theme="neon"] .bae-title .b { color: transparent; -webkit-text-stroke: 3px var(--accent); }
[data-theme="riso"] .bae-title .b { color: var(--accent2); }
.bae-title .tilt1 { display:inline-block; transform: rotate(-4deg); }
.bae-title .tilt2 { display:inline-block; transform: rotate(3deg) translateY(-.04em); }
.bae-tagline {
  font-size: clamp(17px, 2.2vw, 26px); font-weight: 700; line-height: 1.8;
  margin: 26px auto 0; max-width: 30em;
}
.bae-tagline mark {
  background: var(--accent); color: var(--bg); padding: .05em .25em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* ---------- fly (single-color illustration) ---------- */
.fly { color: var(--accent); pointer-events: none; }
[data-theme="riso"] .fly { color: var(--ink); }
.fly .wing { transform-box: fill-box; transform-origin: 50% 70%; animation: flutter .12s linear infinite alternate; }
.fly .wing.w2 { animation-delay: .06s; }
@keyframes flutter { from { transform: rotate(-14deg); } to { transform: rotate(16deg); } }

.fly-buzz {
  position: absolute; width: clamp(54px, 7vw, 110px); height: auto; z-index: 3;
  top: 8%; left: 12%;
  animation: buzz 9s ease-in-out infinite;
}
@keyframes buzz {
  0%   { transform: translate(0,0) rotate(8deg); }
  12%  { transform: translate(16vw, 9vh) rotate(-32deg); }
  24%  { transform: translate(44vw, 2vh) rotate(24deg) scale(.8); }
  37%  { transform: translate(58vw, 16vh) rotate(-12deg); }
  50%  { transform: translate(30vw, 22vh) rotate(40deg) scale(1.1); }
  63%  { transform: translate(10vw, 14vh) rotate(-28deg); }
  75%  { transform: translate(38vw, 5vh) rotate(14deg) scale(.9); }
  88%  { transform: translate(20vw, 18vh) rotate(-8deg); }
  100% { transform: translate(0,0) rotate(8deg); }
}
.fly-static { width: clamp(40px, 5vw, 80px); height:auto; }

.buzz-note {
  position:absolute; font-family: var(--mono); font-size: 12px; letter-spacing:.3em;
  color: var(--muted); text-transform: uppercase; animation: noteFloat 3s ease-in-out infinite;
}
@keyframes noteFloat { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-10px) rotate(4deg); } }

/* ---------- colors lead（見出し＋パッケージ写真の重ね） ----------
   写真（背景透過の切り抜き）を背景色に沈め、前面にセクションタイトルを重ねる。
   沈め方は opacity: 背後がフラットな --bg なので、不透明度を下げる＝
   背景色と混ざる（＝黒スクリーンを被せたのと同じ見た目で、確実に効く）。 */
.colors-lead {
  display: grid;
  margin: 0 0 clamp(36px, 5vw, 64px);
}
.colors-lead > * { grid-area: 1 / 1; }
.colors-lead .lead-img {
  width: min(100%, 940px);
  height: auto;
  justify-self: center;
  align-self: center;
  display: block;
  opacity: .3;           /* ← 写真の沈み具合はここで調整（小さいほど背景に溶ける） */
  filter: saturate(.9);
}
.colors-lead .section-head {
  align-self: center;
  margin: 0;
}

/* ---------- color grid ----------
   5色なので PC は3列＝「上3・下2」で、あふれた最終行は中央寄せ
   （flex＋justify-content:center。grid だと左端に寄って不揃いに見える）。
   モバイルは下の media query が上書きするので 2列→1列はこのまま変わらない。 */
.colors-grid {
  --cg-gap: clamp(14px,1.8vw,24px);
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--cg-gap);
}
.colors-grid .color-card { width: calc((100% - 2*var(--cg-gap)) / 3); }
@media (max-width: 1020px){ .colors-grid .color-card { width: calc((100% - var(--cg-gap)) / 2); } }
@media (max-width: 520px){ .colors-grid .color-card { width: min(100%, 380px); } }

.color-card {
  border: 1.5px solid var(--line); background: var(--card);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.color-card:hover { border-color: var(--accent); transform: translateY(-6px) rotate(-.6deg); }
[data-theme="riso"] .color-card:hover { transform: translate(-3px,-3px); box-shadow: 7px 7px 0 var(--ink); }
.color-card .shotbox { position: relative; aspect-ratio: 1/1; background: color-mix(in srgb, var(--ink) 4%, transparent); }
.color-card .shotbox image-slot { position:absolute; inset:0; width:100% !important; height:100% !important; display:block; }
.color-card .cnum {
  position:absolute; top:10px; left:10px; z-index: 2;
  font-family: var(--mono); font-size: 11px; letter-spacing:.2em;
  background: var(--accent); color: var(--bg); padding: 4px 9px;
}
.color-card .cbody { padding: 16px 18px 20px; }
.color-card .cname {
  font-family: var(--display); font-weight: 800; font-size: clamp(18px,1.6vw,22px);
  margin: 0 0 8px; text-transform: uppercase; line-height: 1.15;
}
/* サブタイトル＝キャッチコピー（アクセント色。カラーチャートmdの ### 行） */
.color-card .csub {
  color: var(--accent); font-size: 13px; font-weight: 700; line-height: 1.75;
  margin: 0 0 10px;
}
.color-card .cdesc { color: var(--muted); font-size: 13.5px; line-height: 1.8; margin: 0; min-height: 3.6em; }

/* ---------- videos ---------- */
/* 動画枠の共有スタイルは video.css に移動（index と BAE で共用）。 */

/* ---------- ending ---------- */
.bae-ending {
  position: relative; text-align: center; overflow: hidden;
  padding: clamp(90px,14vw,200px) clamp(18px,5vw,56px);
  border-top: 1.5px solid var(--line);
  background: var(--bg2);
}
.bae-ending h2 {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(34px, 6.8vw, 104px); line-height: 1.12; margin: 0;
  letter-spacing: -.01em; text-wrap: balance;
}
.bae-ending h2 .hot { color: var(--accent); display:inline-block; animation: hotShake 2.4s ease-in-out infinite; }
[data-theme="neon"] .bae-ending h2 .hot { color:transparent; -webkit-text-stroke: 2.5px var(--accent); }
@keyframes hotShake { 0%,100% { transform: rotate(0) scale(1); } 25% { transform: rotate(-2deg) scale(1.04); } 75% { transform: rotate(2deg) scale(1.04); } }

/* クリックでブルブル震える（bae.js の initHotShiver と連動）。
   .is-shiver の間だけ hotShake を高頻度ジッターの hot-shiver に差し替える
   （specificityが上なので一時的に勝ち、外れると元のゆらゆらに戻る）。 */
.bae-ending h2 .hot { cursor: pointer; }
.bae-ending h2 .hot.is-shiver { animation: hot-shiver .7s linear; }
@keyframes hot-shiver {
  0%, 100% { transform: translate(0,0) rotate(0) scale(1.04); }
  8%   { transform: translate(-5px, 2px) rotate(-2.4deg) scale(1.04); }
  16%  { transform: translate(5px, -2px) rotate(2deg)    scale(1.05); }
  24%  { transform: translate(-5px, -2px) rotate(-1.6deg) scale(1.04); }
  32%  { transform: translate(5px, 2px)  rotate(2.4deg)  scale(1.05); }
  40%  { transform: translate(-4px, 2px) rotate(-2deg)   scale(1.04); }
  48%  { transform: translate(4px, -2px) rotate(1.6deg)  scale(1.05); }
  56%  { transform: translate(-5px, -1px) rotate(-2.4deg) scale(1.04); }
  64%  { transform: translate(5px, 1px)  rotate(2deg)    scale(1.05); }
  72%  { transform: translate(-4px, 2px) rotate(-1.6deg) scale(1.04); }
  80%  { transform: translate(4px, -1px) rotate(2.4deg)  scale(1.05); }
  90%  { transform: translate(-2px, 1px) rotate(-1deg)   scale(1.04); }
}
@media (prefers-reduced-motion: reduce){
  .bae-ending h2 .hot.is-shiver { animation: none; }
}
.bae-ending .end-kicker {
  font-family: var(--mono); font-size: 13px; letter-spacing:.4em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 28px;
}
.bae-ending .fly-row { display:flex; justify-content:center; gap: clamp(16px,3vw,40px); margin-top: 44px; }
.bae-ending .fly-row .fly { animation: bob 1.8s ease-in-out infinite; }
.bae-ending .fly-row .fly:nth-child(2) { animation-delay: .3s; }
.bae-ending .fly-row .fly:nth-child(3) { animation-delay: .6s; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-14px) rotate(6deg); } }

/* ---------- ending flies: クリックで飛び去る（bae.js の initFlyAway と連動） ----------
   飛ぶ方向・距離・回転は JS がクリック毎にランダムで --fx/--fy/--frot に入れる。
   飛び去り→しばらくして同じ経路から戻ってくる。.bae-ending は overflow:hidden
   なのでセクション外にスクロールバーは出ない。 */
.bae-ending .fly-row .fly { pointer-events: auto; cursor: pointer; }
.bae-ending .fly-row .fly.is-flying {
  animation: fly-away 1.3s cubic-bezier(.3,.1,.7,.4) forwards;
}
.bae-ending .fly-row .fly.is-flying .wing { animation-duration: .05s; } /* 羽ばたき高速化 */
@keyframes fly-away {
  0%   { transform: translate(0,0) rotate(0deg); opacity: 1; }
  25%  { transform: translate(calc(var(--fx) * .18), calc(var(--fy) * .1 - 30px)) rotate(calc(var(--frot) * .3)); }
  55%  { transform: translate(calc(var(--fx) * .5), calc(var(--fy) * .45 - 15px)) rotate(calc(var(--frot) * .7)); opacity: 1; }
  100% { transform: translate(var(--fx), var(--fy)) rotate(var(--frot)) scale(.5); opacity: 0; }
}
.bae-ending .fly-row .fly.is-returning {
  animation: fly-return .8s cubic-bezier(.2,.7,.3,1);
}
@keyframes fly-return {
  from { transform: translate(var(--fx), var(--fy)) rotate(var(--frot)) scale(.5); opacity: 0; }
  to   { transform: translate(0,0) rotate(0deg) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
  .bae-ending .fly-row .fly.is-flying,
  .bae-ending .fly-row .fly.is-returning { animation: none; }
}

/* ---------- intro (logo/title first, cascade down) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .bae-hero .bae-title   { opacity:0; animation: introUp 1s cubic-bezier(.2,.7,.2,1) .12s forwards; }
  .bae-hero .bae-kicker  { opacity:0; animation: introUp .8s cubic-bezier(.2,.7,.2,1) .8s forwards; }
  .bae-hero .bae-tagline { opacity:0; animation: introUp .8s cubic-bezier(.2,.7,.2,1) .98s forwards; }
  .bae-hero .fly-buzz    { opacity:0; animation: introUp .6s ease 1.2s forwards, buzz 9s ease-in-out 1.2s infinite; }
}

/* ---------- hero fly: クリックでにっこり＆ヒーローを飛び回る（bae.js initHeroFly） ----------
   クリックで .is-happy が付き、目が「＾＾」＋口がにっこりに切り替わって
   buzz-happy（大きく速い周回。開始/終了姿勢は buzz の0%と同じ）を2周して定位置に戻る。 */
.fly-buzz { pointer-events: auto; cursor: pointer; }
.fly-buzz .fly-eyes, .fly-buzz .fly-happy { transition: opacity .2s; }
.fly-buzz .fly-happy { opacity: 0; }            /* 通常時はにっこり顔を隠す（属性でなくCSSで管理） */
.fly-buzz.is-happy .fly-eyes { opacity: 0; }
.fly-buzz.is-happy .fly-happy { opacity: 1; }
.bae-hero .fly-buzz.is-happy {
  opacity: 1; /* intro の opacity:0 を打ち消す（animation差し替えでforwardsが外れるため） */
  animation: buzz-happy 3.2s linear infinite;
}
.fly-buzz.is-happy .wing { animation-duration: .05s; } /* 喜びの高速羽ばたき */
@keyframes buzz-happy {
  0%   { transform: translate(0,0) rotate(8deg) scale(1); }
  14%  { transform: translate(30vw, -4vh) rotate(50deg) scale(1.12); }
  28%  { transform: translate(56vw, 10vh) rotate(-25deg) scale(.92); }
  42%  { transform: translate(60vw, 32vh) rotate(30deg) scale(1.08); }
  58%  { transform: translate(34vw, 40vh) rotate(-40deg) scale(1); }
  72%  { transform: translate(6vw, 30vh) rotate(25deg) scale(.9); }
  86%  { transform: translate(-4vw, 12vh) rotate(-15deg) scale(1.05); }
  100% { transform: translate(0,0) rotate(8deg) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .bae-hero .fly-buzz.is-happy { animation: none; } /* にっこりだけ（飛ばない） */
}

/* ---------- back link ---------- */
.back-strip {
  display:flex; justify-content:center; padding: 0 0 70px;
}

@media (prefers-reduced-motion: reduce){
  .fly-buzz, .fly .wing, .bae-ending h2 .hot, .bae-ending .fly-row .fly, .buzz-note { animation: none; }
}

/* ---------- product photo slot (static replacement for <image-slot>) ----------
   Drop a real shot in by replacing the .shot-ph div with:
   <img class="shot-img" src="assets/your-photo.jpg" alt="カラー名" />
*/
.color-card .shotbox .shot-img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}

/* ---------- 表裏2枚のクロスフェード（BOYS & GIRLS） ----------
   同じ .shotbox に .shot-img.swap を2枚重ね、4秒周期の shot-swap を
   2枚目だけ半周期ずらして再生 → 2秒ごとに入れ替わる。切替は
   opacity＋blur（＋わずかにscale。blurで縁が滲むのを隠す）のトランジション。 */
.color-card .shotbox .shot-img.swap {
  animation: shot-swap 4s ease-in-out infinite;
}
.color-card .shotbox .shot-img.swap-b { animation-delay: -2s; }
@keyframes shot-swap {
  0%     { opacity: 1; filter: blur(0);    transform: scale(1); }
  37.5%  { opacity: 1; filter: blur(0);    transform: scale(1); }      /* 〜1.5s 表示 */
  50%    { opacity: 0; filter: blur(12px); transform: scale(1.04); }   /* 0.5sかけてブラーアウト */
  87.5%  { opacity: 0; filter: blur(12px); transform: scale(1.04); }   /* 裏面の表示中は消えたまま */
  100%   { opacity: 1; filter: blur(0);    transform: scale(1); }      /* 0.5sかけてブラーイン */
}
@media (prefers-reduced-motion: reduce){
  .color-card .shotbox .shot-img.swap { animation: none; }
  .color-card .shotbox .shot-img.swap-b { opacity: 0; } /* 切替なし＝表面だけ表示 */
}
.color-card .shotbox .shot-ph {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px; text-align:center; padding:16px;
  color: var(--muted); font-family: var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; box-sizing:border-box;
}
.color-card .shotbox .shot-ph svg { opacity:.45; }
.color-card .shotbox .shot-ph .ph-name { font-weight:700; letter-spacing:.04em; }
.color-card:hover .shotbox .shot-ph { color: var(--ink); }

/* ---------- FLY CATCH（写真ボックスの隠しクソゲー） ----------
   #colors の .shotbox クリックで bae.js の startFlyGame() が中に生成する。
   ドット絵は低解像度canvasを image-rendering:pixelated で拡大して表現。 */
#colors .shotbox { cursor: pointer; }
.flygame {
  position: absolute; inset: 0; z-index: 6;
  background: #0b0e09; overflow: hidden;
  cursor: none;                       /* カーソルの代わりに網が付いてくる */
  user-select: none; -webkit-user-select: none;
}
.flygame canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  image-rendering: pixelated;
  touch-action: none;                 /* プレイ中のスクロール暴発防止 */
}
.flygame .fg-hud {
  position: absolute; top: 8px; left: 10px; right: 34px;
  display: flex; justify-content: space-between; pointer-events: none;
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em;
  color: var(--accent);
}
.flygame .fg-quit {
  position: absolute; top: 3px; right: 3px; z-index: 2;
  background: none; border: 0; padding: 6px; cursor: pointer;
  color: var(--muted); font: 700 13px/1 var(--mono);
}
.flygame .fg-quit:hover { color: var(--ink); }
.flygame .fg-msg {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; font: 900 32px var(--mono); color: var(--accent);
  letter-spacing: .2em; text-indent: .2em;
  animation: fg-go .9s ease forwards;
}
@keyframes fg-go {
  0%   { opacity: 0; transform: scale(.4); }
  25%  { opacity: 1; transform: scale(1.15); }
  55%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
/* 捕獲時の「+1」ポップ */
.flygame .fg-pop {
  position: absolute; pointer-events: none;
  font: 700 12px var(--mono); color: var(--accent);
  transform: translate(-50%, -50%);
  animation: fg-pop .6s ease forwards;
}
@keyframes fg-pop {
  to { transform: translate(-50%, calc(-50% - 18px)); opacity: 0; }
}
/* リザルト画面 */
.flygame.is-over { cursor: auto; }
.flygame .fg-result {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; background: rgba(5, 8, 4, .88); cursor: auto;
  font-family: var(--mono); text-align: center; padding: 12px; box-sizing: border-box;
}
.flygame .fg-res-title { font-size: 11px; letter-spacing: .3em; text-indent: .3em; color: var(--muted); }
.flygame .fg-res-count { font-size: 44px; font-weight: 900; color: var(--ink); line-height: 1; }
.flygame .fg-res-count span { font-size: 15px; margin-left: 4px; font-weight: 700; }
.flygame .fg-res-rank { font-size: 12px; color: var(--accent); letter-spacing: .08em; }
.flygame .fg-res-btns { display: flex; gap: 10px; margin-top: 8px; }
.flygame .fg-res-btns button {
  font: 700 11px var(--mono); letter-spacing: .14em;
  padding: 9px 14px; background: transparent;
  border: 1px solid var(--accent); color: var(--accent); cursor: pointer;
}
.flygame .fg-res-btns button:hover { background: var(--accent); color: #0b0e09; }

/* ---------- origin sketch: a card that floats above the background ---------- */
.origin-shot {
  aspect-ratio: auto;        /* let the image set its own height */
  overflow: visible;          /* so the shadow isn't clipped */
  display: flex;
  justify-content: center;
  align-items: center;
  transform: none;            /* parent only fades in; the img does the motion */
}
.aged-wrap {
  position: relative;
  width: min(100%, 460px);
  margin: 0;
  line-height: 0;
}
/* the sketch sits ON TOP of the bg as a bright rounded card with a soft shadow */
.aged-wrap .figure-img.aged {
  position: static;           /* override the cover-crop layout */
  width: 100%;
  height: auto;
  border-radius: 10px;
  filter: brightness(.98) contrast(1.05) saturate(.96);
  opacity: 1;
  mix-blend-mode: normal;
  box-shadow: 0 16px 30px rgba(0,0,0,.5), 0 6px 12px rgba(0,0,0,.38);
}
/* on reveal: a little bounce in, then a slow continuous hover (shadow breathes) */
.origin-shot.in .figure-img.aged {
  animation:
    card-pop .85s cubic-bezier(.34,1.56,.64,1) both,
    card-float 4.5s ease-in-out 1s infinite;
}
@keyframes card-pop {
  0%   { transform: translateY(48px) scale(.94); }
  100% { transform: translateY(0)    scale(1);   }
}
@keyframes card-float {
  0%, 100% { transform: translateY(0);    box-shadow: 0 16px 30px rgba(0,0,0,.5),  0 6px 12px rgba(0,0,0,.38); }
  50%      { transform: translateY(-9px); box-shadow: 0 28px 46px rgba(0,0,0,.46), 0 11px 20px rgba(0,0,0,.32); }
}
@media (prefers-reduced-motion: reduce) {
  .origin-shot.in .figure-img.aged { animation: none; }
}
/* riso: cream paper bg — same floating card, just a touch flatter */
[data-theme="riso"] .aged-wrap .figure-img.aged {
  filter: contrast(1.06) saturate(.92);
  box-shadow: 0 14px 26px rgba(0,0,0,.28), 5px 5px 0 var(--ink);
}
/* small caption / certification note under the sketch card */
.aged-wrap .aged-cap {
  margin: 14px 4px 0;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.75;
  letter-spacing: .02em;
  color: var(--muted);
  text-align: left;
}

/* ---------- origin copy: big & loud ---------- */
.showcase .big-quote {
  font-size: clamp(46px, 7.6vw, 104px);
  line-height: 1.0;
  letter-spacing: -.01em;
}
.showcase .big-quote em {
  text-shadow: 0 0 26px color-mix(in srgb, var(--accent) 55%, transparent);
}
.showcase .sub {
  font-size: clamp(19px, 2.6vw, 30px);
  line-height: 1.6;
  color: var(--ink);
  max-width: 28ch;
  margin-top: 22px;
}