/* ===========================================================================
   地域みらい留学 STEPスライド 共通スタイル
   c-mirai.jp のトンマナ（ネイビー #1941A0 / 黄 #FFEF35 / オレンジ #F6A811 /
   淡青 #EBF8FF、Zen Maru Gothic + Noto Sans JP）に合わせています。

   スライドは 16:9 の枠に収まるよう、文字サイズ・余白をコンテナ幅の割合
   （cqw）で組んでいます。枠に対する倍率は中身の量に合わせて手で調整した
   もので、次の4つを使い分けています。

     .slide--intro   … 各ページの1枚目（動画つきの導入スライド）
     .slide--steps   … STEP01の2枚目（6ステップのフロー）
     .slide--events  … STEP02の2枚目（3つのイベント紹介）
     .slide--score   … STEP04の2枚目（点数のつけ方）

   文言を増減したときは、はみ出す／余りすぎる場合に該当クラスの
   --fs-* と --gap / --pad-box / --pad を少しずつ動かして合わせてください。
   はみ出した分は overflow:hidden で切れるので、必ず1枚全体を目視すること。
   画面幅 860px 以下では 16:9 をやめて縦積みに切り替わります。
   =========================================================================== */

/* ---------- baseline ---------- */
:root{color-scheme:light;}
html{-webkit-text-size-adjust:100%;}
img{max-width:100%;}

:root{
  --navy:#1941A0;
  --navy-deep:#102E76;
  --yellow:#FFEF35;
  --orange:#F6A811;
  --pale:#EBF8FF;
  --mist:#F5FAFF;
  --line:#CFE3F6;
  --ink:#333333;
  --ink-soft:#5A6474;
  --paper:#FFFFFF;

  --display:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
  --body:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
}

body{
  margin:0;
  background:var(--pale);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:clamp(18px,3.5vw,44px) clamp(14px,3vw,30px) clamp(36px,6vw,72px);
  display:flex;
  flex-direction:column;
  gap:clamp(16px,2.6vw,30px);
}

/* ---------- page masthead ---------- */
.masthead{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 14px;
}
.masthead .kicker{
  font-family:var(--display);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.14em;
  color:var(--navy);
  background:var(--yellow);
  padding:4px 13px;
  border-radius:999px;
}
.masthead .src{
  font-size:.78rem;
  color:var(--ink-soft);
}
.masthead .src a{color:var(--navy);}

/* ---------- slide shell ---------- */
.slide{
  container-type:inline-size;
  aspect-ratio:16/9;
  background:var(--paper);
  border-radius:20px;
  box-shadow:0 10px 32px rgba(16,46,118,.10);
  overflow:hidden;
  position:relative;

  --pad:3.4cqw;
  --fs-eyebrow:1.25cqw;
  --fs-h1:3.0cqw;
  --fs-lead:1.35cqw;
  --fs-body:1.14cqw;
  --fs-micro:1.02cqw;
  --fs-num:2.1cqw;
  --fs-stat:2.6cqw;
  --gap:1.5cqw;
  --pad-box:1.4cqw;
  --radius:1.1cqw;
}
.slide::before{
  content:"";
  position:absolute; inset:0 0 auto 0;
  height:.65cqw;
  background:linear-gradient(90deg,var(--navy) 0 62%,var(--orange) 62% 86%,var(--yellow) 86% 100%);
}
.slide-inner{
  height:100%;
  box-sizing:border-box;
  padding:calc(var(--pad) + .65cqw) var(--pad) var(--pad);
  display:flex;
  flex-direction:column;
  gap:var(--gap);
}

/* ---------- shared slide typography ---------- */
.eyebrow{
  display:flex;
  align-items:center;
  gap:.9cqw;
  font-family:var(--display);
  font-weight:700;
  font-size:var(--fs-eyebrow);
  letter-spacing:.12em;
  color:var(--navy);
  margin:0;
  line-height:1.4;
}
.eyebrow .step{
  color:var(--orange);
  font-size:calc(var(--fs-eyebrow) * 1.45);
  letter-spacing:.04em;
}
.eyebrow .rule{flex:1;height:1px;background:var(--line);}
.eyebrow .of{
  color:var(--ink-soft);
  font-weight:500;
  letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
}

h1{
  font-family:var(--display);
  font-weight:900;
  font-size:var(--fs-h1);
  line-height:1.3;
  color:var(--navy);
  margin:0;
  text-wrap:balance;
  word-break:auto-phrase;
}
h1 .mark{
  background:linear-gradient(transparent 60%,var(--yellow) 60%);
  padding:0 .08em;
}
.lead{
  font-size:var(--fs-lead);
  line-height:1.7;
  margin:0;
}

/* ---------- hero: copy + video ---------- */
.hero{
  display:grid;
  grid-template-columns:1fr 30cqw;
  grid-template-rows:auto auto;
  column-gap:1.9cqw;
  row-gap:var(--gap);
  align-items:start;
}
.hero-copy{
  grid-column:1;
  grid-row:1;
  display:flex;
  flex-direction:column;
  gap:calc(var(--gap) * .8);
}
.hero .video{grid-column:2;grid-row:1 / span 2;}
.hero .stats{grid-column:1;grid-row:2;align-self:end;}

.video{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:.6cqw;
}
.video-poster{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16/9;
  padding:0;
  border:0;
  text-decoration:none;
  border-radius:var(--radius);
  overflow:hidden;
  cursor:pointer;
  background:var(--navy-deep);
  box-shadow:0 .5cqw 1.5cqw rgba(16,46,118,.22);
}
.video-poster img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.video-poster .play{
  position:absolute;
  inset:0;
  margin:auto;
  width:5.4cqw;
  height:5.4cqw;
  border-radius:50%;
  background:var(--orange);
  display:grid;
  place-items:center;
  box-shadow:0 0 0 .35cqw var(--paper),0 .3cqw .9cqw rgba(16,46,118,.4);
  transition:transform .18s ease,background .18s ease;
}
.video-poster .play::before{
  content:"";
  width:0;height:0;
  border-style:solid;
  border-width:1.1cqw 0 1.1cqw 1.8cqw;
  border-color:transparent transparent transparent var(--paper);
  margin-left:.4cqw;
}
.video-poster:hover .play{transform:scale(1.07);background:#E39400;}
.video-poster:focus-visible{outline:3px solid var(--orange);outline-offset:3px;}
.video-frame{
  width:100%;
  aspect-ratio:16/9;
  border:0;
  border-radius:var(--radius);
  display:block;
  background:#000;
  box-shadow:0 .5cqw 1.5cqw rgba(16,46,118,.22);
}
.video figcaption{
  font-size:var(--fs-micro);
  color:var(--ink-soft);
  line-height:1.6;
}
.video figcaption a{
  color:var(--navy);
  font-weight:700;
  text-underline-offset:.2em;
  text-decoration-color:var(--orange);
}
.video figcaption a:hover{color:var(--orange);}

/* ---------- stat strip ---------- */
.stats{
  margin:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  background:var(--mist);
  border-radius:var(--radius);
  padding:.7cqw 1.3cqw;
}
.stat{
  display:flex;
  flex-direction:column;
  gap:.1cqw;
  padding-left:1.3cqw;
  border-left:1px solid var(--line);
}
.stat:first-child{border-left:0;padding-left:0;}
.stat dt{
  font-size:var(--fs-micro);
  color:var(--ink-soft);
  font-weight:500;
  letter-spacing:.04em;
  white-space:nowrap;
}
.stat dd{
  margin:0;
  font-family:var(--display);
  font-weight:900;
  font-size:var(--fs-stat);
  line-height:1.15;
  color:var(--navy);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.stat dd .u{font-size:.46em;font-weight:700;margin-left:.12em;}

/* ---------- three features ---------- */
.features{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.2cqw;
}
.feature{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--pad-box);
  display:flex;
  flex-direction:column;
  gap:.55cqw;
}
.feature .n{
  font-family:var(--display);
  font-weight:900;
  font-size:var(--fs-num);
  line-height:1;
  color:var(--orange);
  font-variant-numeric:tabular-nums;
}
.feature h2{
  font-family:var(--display);
  font-weight:700;
  font-size:calc(var(--fs-body) * 1.32);
  line-height:1.45;
  color:var(--navy);
  margin:0;
  text-wrap:balance;
  word-break:auto-phrase;
}
.feature p{
  margin:0;
  font-size:var(--fs-body);
  line-height:1.7;
}

/* ---------- callout ---------- */
.callout{
  background:var(--navy);
  color:var(--paper);
  border-radius:var(--radius);
  padding:calc(var(--pad-box) * .78) calc(var(--pad-box) * 1.05);
  font-size:var(--fs-body);
  line-height:1.65;
  display:flex;
  align-items:baseline;
  gap:1.2cqw;
}
.callout .tag{
  font-family:var(--display);
  font-weight:700;
  font-size:var(--fs-micro);
  letter-spacing:.1em;
  color:var(--navy-deep);
  background:var(--yellow);
  padding:.2cqw .95cqw;
  border-radius:999px;
  white-space:nowrap;
}
.callout p{margin:0;}

/* ---------- flow (6 steps) ---------- */
.flow{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:.85cqw;
}
.node{
  border-radius:var(--radius);
  border:1px solid var(--line);
  padding:calc(var(--pad-box) * .85) calc(var(--pad-box) * .8);
  display:flex;
  flex-direction:column;
  gap:.45cqw;
}
.node.now{
  border-color:var(--navy);
  background:var(--mist);
  box-shadow:0 0 0 .3cqw rgba(25,65,160,.12);
}
.node .n{
  font-family:var(--display);
  font-weight:900;
  font-size:calc(var(--fs-num) * .9);
  line-height:1;
  color:var(--orange);
  font-variant-numeric:tabular-nums;
}
.node.now .n{color:var(--navy);}
.node h2{
  margin:0;
  font-family:var(--display);
  font-weight:700;
  font-size:var(--fs-body);
  line-height:1.45;
  color:var(--navy);
  word-break:auto-phrase;
}
.node p{
  margin:0;
  font-size:var(--fs-micro);
  line-height:1.6;
  color:var(--ink-soft);
}
.node .badge,
.node .when{
  align-self:flex-start;
  margin-top:auto;
  font-family:var(--display);
  font-weight:700;
  font-size:var(--fs-micro);
  letter-spacing:.05em;
  border-radius:999px;
  padding:.18cqw .85cqw;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.node .badge{color:var(--paper);background:var(--navy);}
.node .when{color:var(--navy);background:var(--pale);}

/* ---------- six hints (slide 1) ---------- */
.hints{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.1cqw;
}
.hint{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:calc(var(--pad-box) * .9) var(--pad-box);
  display:flex;
  align-items:center;
  gap:1cqw;
}
.hint .n{
  flex:none;
  width:2.9cqw;
  height:2.9cqw;
  border-radius:50%;
  background:var(--yellow);
  color:var(--navy);
  font-family:var(--display);
  font-weight:900;
  font-size:calc(var(--fs-body) * 1.15);
  display:grid;
  place-items:center;
  font-variant-numeric:tabular-nums;
}
.hint p{
  margin:0;
  font-family:var(--display);
  font-weight:700;
  font-size:calc(var(--fs-body) * 1.12);
  line-height:1.45;
  color:var(--navy);
  word-break:auto-phrase;
}

/* ---------- prep strip (slide 1) ---------- */
.prep{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.6cqw 1.6cqw;
  background:var(--mist);
  border-radius:var(--radius);
  padding:.9cqw 1.3cqw;
}
.prep .label{
  font-family:var(--display);
  font-weight:700;
  font-size:var(--fs-micro);
  letter-spacing:.06em;
  color:var(--paper);
  background:var(--navy);
  border-radius:999px;
  padding:.2cqw .9cqw;
  white-space:nowrap;
}
.prep span.item{
  font-size:var(--fs-body);
  color:var(--ink);
}
.prep span.item b{
  font-family:var(--display);
  font-weight:700;
  color:var(--navy);
}

/* ---------- three-step mini flow (slide 2) ---------- */
.flow--three{grid-template-columns:repeat(3,1fr);}
.flow--three .node{flex-direction:row;align-items:center;gap:1cqw;}
.flow--three .node .n{flex:none;}
.flow--three .node .body{display:flex;flex-direction:column;gap:.15cqw;}
.flow--three .node .when{margin-top:.2cqw;}

/* ---------- work duration chip ---------- */
.feature .mins{
  align-self:flex-start;
  font-family:var(--display);
  font-weight:700;
  font-size:var(--fs-micro);
  letter-spacing:.04em;
  color:var(--navy);
  background:var(--pale);
  border-radius:999px;
  padding:.18cqw .85cqw;
  white-space:nowrap;
}

/* ---------- scoring example (slide 2) ---------- */
.score{
  display:grid;
  grid-template-columns:repeat(3,1fr) .8fr;
  gap:1.1cqw;
}
.score-item{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--pad-box);
  display:flex;
  flex-direction:column;
  gap:.5cqw;
}
.score-item .pri{
  align-self:flex-start;
  font-family:var(--display);
  font-weight:700;
  font-size:var(--fs-micro);
  letter-spacing:.05em;
  color:var(--navy);
  background:var(--pale);
  border-radius:999px;
  padding:.18cqw .85cqw;
  white-space:nowrap;
}
.score-item h3{
  margin:0;
  font-family:var(--display);
  font-weight:700;
  font-size:calc(var(--fs-body) * 1.25);
  line-height:1.4;
  color:var(--navy);
}
.score-item .calc{
  margin:0;
  font-size:var(--fs-micro);
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
  display:flex;
  align-items:baseline;
  gap:.35cqw;
  flex-wrap:wrap;
}
.score-item .calc b{
  font-family:var(--display);
  font-weight:900;
  font-size:1.7em;
  line-height:1;
  color:var(--ink);
}
.score-item .calc b.out{color:var(--orange);}
.score-total{
  border-radius:var(--radius);
  background:var(--navy);
  color:var(--paper);
  padding:var(--pad-box);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.25cqw;
}
.score-total .lbl{
  font-family:var(--display);
  font-weight:700;
  font-size:var(--fs-micro);
  letter-spacing:.1em;
  color:var(--yellow);
}
.score-total p{
  margin:0;
  font-family:var(--display);
  font-weight:900;
  font-size:2.9cqw;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.score-total p span{font-size:.42em;margin-left:.12em;}

/* ---------- next actions ---------- */
.next{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1.4cqw;
  align-items:start;
  background:var(--mist);
  border-radius:var(--radius);
  padding:var(--pad-box);
}
.next .label{
  font-family:var(--display);
  font-weight:900;
  font-size:calc(var(--fs-body) * 1.3);
  color:var(--navy);
  line-height:1.4;
  white-space:nowrap;
}
.next ol{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.2cqw;
}
.next li{
  display:flex;
  flex-direction:column;
  gap:.25cqw;
  font-size:var(--fs-micro);
  line-height:1.65;
  color:var(--ink-soft);
  border-left:.3cqw solid var(--yellow);
  padding-left:.9cqw;
}
.next li b{
  font-family:var(--display);
  font-weight:700;
  font-size:var(--fs-body);
  color:var(--navy);
}
.next a{
  color:var(--navy);
  font-weight:700;
  text-underline-offset:.2em;
  text-decoration-color:var(--orange);
}
.next a:hover{color:var(--orange);}

.note{
  font-size:var(--fs-micro);
  color:var(--ink-soft);
  margin:0;
  line-height:1.7;
}
.note b{color:var(--navy);}


/* ---------- next step ---------- */
.nextstep{
  background:var(--paper);
  border-radius:20px;
  box-shadow:0 10px 32px rgba(16,46,118,.10);
  padding:clamp(20px,3vw,30px) clamp(20px,3.5vw,38px);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:18px 30px;
}
.nextstep-copy{
  flex:1 1 300px;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.ns-eyebrow{
  align-self:flex-start;
  font-family:var(--display);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.16em;
  color:var(--navy);
  background:var(--yellow);
  padding:3px 12px;
  border-radius:999px;
}
.ns-title{
  margin:0;
  display:flex;
  align-items:baseline;
  gap:12px;
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(1.1rem,2.1vw,1.45rem);
  line-height:1.35;
  color:var(--navy);
  text-wrap:balance;
}
.ns-num{
  font-size:1.55em;
  line-height:1;
  color:var(--orange);
  font-variant-numeric:tabular-nums;
}
.ns-desc{
  margin:0;
  font-size:.88rem;
  line-height:1.7;
  color:var(--ink-soft);
  max-width:40em;
}
.cta--lg{
  box-sizing:border-box;
  font-size:1rem;
  padding:15px 30px;
  flex:none;
}
.cta--lg .arrow{
  width:24px;
  height:24px;
  font-size:.9rem;
  line-height:1;
}

/* ---------- page footer ---------- */
.pagefoot{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  align-items:center;
  justify-content:space-between;
  font-size:.8rem;
  color:var(--ink-soft);
}
.pagefoot a{
  color:var(--navy);
  font-weight:700;
  text-underline-offset:.2em;
  text-decoration-color:var(--orange);
}
.pagefoot a:hover{color:var(--orange);}
.cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--navy);
  color:var(--paper);
  font-family:var(--display);
  font-weight:700;
  text-decoration:none;
  padding:11px 24px;
  border-radius:999px;
  font-size:.92rem;
}
.cta .arrow{
  display:grid;
  place-items:center;
  width:21px;height:21px;
  border-radius:50%;
  background:var(--orange);
  color:var(--paper);
  font-size:.65rem;
}
.cta:hover{background:var(--navy-deep);}

a:focus-visible{
  outline:3px solid var(--orange);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- per-slide scale (content fills its 16:9 frame) ---------- */
.slide--intro{
  --pad:3.4cqw;
  --fs-eyebrow:1.3cqw;
  --fs-h1:2.9cqw;
  --fs-lead:1.4cqw;
  --fs-body:1.16cqw;
  --fs-micro:1.03cqw;
  --fs-num:2.15cqw;
  --fs-stat:2.5cqw;
  --gap:1.5cqw;
  --pad-box:1.45cqw;
}
.slide--events{
  --pad:3.4cqw;
  --fs-eyebrow:1.3cqw;
  --fs-h1:3.0cqw;
  --fs-body:1.17cqw;
  --fs-micro:1.04cqw;
  --fs-num:2.2cqw;
  --gap:1.5cqw;
  --pad-box:1.45cqw;
}

.slide--steps{
  --pad:3.8cqw;
  --fs-eyebrow:1.32cqw;
  --fs-h1:3.35cqw;
  --fs-body:1.33cqw;
  --fs-micro:1.17cqw;
  --fs-num:2.5cqw;
  --gap:2.35cqw;
  --pad-box:1.7cqw;
}
.slide--score{
  --pad:3.8cqw;
  --fs-eyebrow:1.32cqw;
  --fs-h1:3.3cqw;
  --fs-body:1.3cqw;
  --fs-micro:1.15cqw;
  --fs-num:2.5cqw;
  --gap:1.95cqw;
  --pad-box:1.65cqw;
}

/* ---------- narrow screens: stop being a 16:9 slide ---------- */
@media (max-width:860px){
  .slide{
    aspect-ratio:auto;
    --pad:20px;
    --fs-eyebrow:.72rem;
    --fs-h1:1.4rem;
    --fs-lead:.95rem;
    --fs-body:.9rem;
    --fs-micro:.8rem;
    --fs-num:1.4rem;
    --gap:15px;
    --radius:12px;
  }
  .slide::before{height:6px;}
  .slide-inner{height:auto;padding:26px 20px 20px;}
  .hero{display:flex;flex-direction:column;gap:16px;}
  .hero .stats{align-self:stretch;}
  .hero-copy{gap:12px;}
  .video{gap:7px;}
  .video-poster{box-shadow:0 6px 18px rgba(16,46,118,.2);}
  .video-poster .play{width:58px;height:58px;box-shadow:0 0 0 4px var(--paper),0 4px 12px rgba(16,46,118,.4);}
  .video-poster .play::before{border-width:11px 0 11px 18px;margin-left:4px;}
  .video-frame{box-shadow:0 6px 18px rgba(16,46,118,.2);}
  .stats{grid-template-columns:1fr;padding:12px 14px;gap:8px;}
  .stat{padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:8px;flex-direction:row;align-items:baseline;gap:10px;}
  .stat:first-child{border-top:0;padding-top:0;}
  .stat dd{font-size:1.5rem;}
  .features{grid-template-columns:1fr;gap:12px;}
  .feature{padding:14px;gap:6px;}
  .callout{flex-direction:column;gap:8px;padding:14px;}
  .callout .tag{align-self:flex-start;padding:2px 11px;}
  .feature .mins{padding:2px 11px;margin-top:2px;}
  .score{grid-template-columns:1fr;gap:10px;}
  .score-item{padding:14px;gap:5px;}
  .score-item .pri{padding:2px 11px;}
  .score-total{padding:14px;}
  .score-total p{font-size:1.5rem;}
  .hints{grid-template-columns:1fr;gap:10px;}
  .hint{padding:12px 14px;gap:10px;}
  .hint .n{width:28px;height:28px;}
  .prep{padding:12px 14px;gap:8px 14px;}
  .prep .label{padding:2px 11px;}
  .flow--three{grid-template-columns:1fr;}
  .flow--three .node{gap:12px;}
  .flow{grid-template-columns:1fr;gap:10px;}
  .node{padding:14px;gap:5px;}
  .node.now{box-shadow:0 0 0 3px rgba(25,65,160,.12);}
  .node .badge,.node .when{margin-top:6px;padding:2px 11px;}
  .next{grid-template-columns:1fr;padding:14px;gap:12px;}
  .next ol{grid-template-columns:1fr;gap:12px;}
  .next li{border-left-width:3px;padding-left:10px;gap:2px;}
  .nextstep{gap:16px;}
  .cta--lg{width:100%;justify-content:center;}
}

@media print{
  @page{size:A4 landscape;margin:0;}
  body{background:#fff;}
  .wrap{max-width:none;padding:0;gap:0;}
  .masthead,.pagefoot,.nextstep{display:none;}
  .slide{
    border-radius:0;
    box-shadow:none;
    width:100%;
    aspect-ratio:16/9;
    break-after:page;
    page-break-after:always;
  }
  .slide:last-of-type{break-after:auto;page-break-after:auto;}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
}

/* ---------- index page ---------- */
.page-head{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.page-title{
  margin:0;
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(1.5rem,4vw,2.2rem);
  line-height:1.35;
  color:var(--navy);
  text-wrap:balance;
}
.page-lead{
  margin:0;
  font-size:.95rem;
  line-height:1.8;
  color:var(--ink);
  max-width:44em;
}
.deck-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:20px;
}
.deck{
  display:flex;
  flex-direction:column;
  background:var(--paper);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 32px rgba(16,46,118,.10);
  text-decoration:none;
  color:inherit;
  transition:transform .18s ease,box-shadow .18s ease;
}
.deck:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(16,46,118,.16);
}
.deck img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
}
.deck-body{
  padding:18px 20px 22px;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.deck-step{
  align-self:flex-start;
  font-family:var(--display);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.16em;
  color:var(--navy);
  background:var(--yellow);
  padding:3px 12px;
  border-radius:999px;
}
.deck h2{
  margin:0;
  font-family:var(--display);
  font-weight:900;
  font-size:1.12rem;
  line-height:1.4;
  color:var(--navy);
  text-wrap:balance;
}
.deck p{
  margin:0;
  font-size:.85rem;
  line-height:1.7;
  color:var(--ink-soft);
}
.deck .mins{
  font-size:.78rem;
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}