/* The first action on Learn is an actual lesson, not another resource directory. */
.foundation-feature{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;border:1px solid var(--line);padding:48px;margin-bottom:48px;background:linear-gradient(125deg,var(--bg) 42%,#34dddd0c);overflow:hidden}
.foundation-feature h2{font:700 clamp(3rem,5vw,5.5rem)/.95 var(--head);text-transform:uppercase;margin:20px 0;letter-spacing:-.02em}
.foundation-feature p:not(.eyebrow):not(.fine){font-size:18px;line-height:1.6;max-width:480px;color:var(--muted)}
.foundation-feature .fine{margin:18px 0 0;max-width:390px;font-size:13px;line-height:1.6}
.foundation-feature-art{position:relative;min-height:400px;isolation:isolate}
.foundation-feature-art img{display:block;width:100%;height:auto;border-radius:8px;box-shadow:0 15px 35px #0005}
.foundation-feature-field{position:absolute;width:66%;right:0;top:12%;transform:rotate(6deg)}
.foundation-feature-unit{position:absolute;width:36%;left:6%;top:15%;transform:rotate(-9deg)}
.foundation-feature-point{position:absolute;right:5%;bottom:19%;display:flex;align-items:center;gap:14px;color:#f0c477;background:#172023;padding:12px 20px;border:1px solid #f0c47755;border-radius:6px}
.foundation-feature-point strong{font:600 54px/1 var(--body)}
.foundation-feature-point span{font:13px var(--mono);letter-spacing:.1em}
.foundation-feature-caption{position:absolute;bottom:0;left:0;right:0;text-align:center;font:13px var(--mono);letter-spacing:.1em;color:var(--muted)}
@media(max-width:800px){.foundation-feature{grid-template-columns:1fr;padding:28px;gap:24px}.foundation-feature-art{min-height:300px;max-width:460px;width:100%;margin:auto}.foundation-feature h2{font-size:52px}.foundation-feature p:not(.eyebrow):not(.fine){font-size:16px}}
@media(max-width:400px){.foundation-feature{padding:22px}.foundation-feature-art{min-height:235px}.foundation-feature-point{padding:10px;gap:8px}.foundation-feature-point strong{font-size:40px}.foundation-feature-point span{font-size:13px}}

/* The miniature board remains illustrative; its caption is still readable. */
.foundation-feature .fine{font-size:14px}
.foundation-feature-point span{font-size:13px;letter-spacing:.03em}
.foundation-feature-caption{font:13px/1.5 var(--body);letter-spacing:0}

/* The Riftwatch path: five stages, each lesson a step you can see. */
.learn-path{margin:0 0 56px}
.learn-path-head{max-width:760px;margin-bottom:28px}
.learn-path-head h2{font:700 clamp(2.4rem,4vw,3.6rem)/.95 var(--head);text-transform:uppercase;margin:10px 0 14px}
.learn-path-head p:not(.eyebrow){font-size:17px;line-height:1.6;color:var(--muted);margin:0}
.learn-path-count{color:var(--ink)}
.path-stages{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative}
.path-stage{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:28px;padding:26px 0;border-top:1px solid var(--line)}
.path-stage-head{display:flex;gap:18px;align-items:flex-start;position:sticky;top:calc(var(--top-bar,0px) + 90px);align-self:start}
.path-stage-n{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--soft);font:700 22px/1 var(--head);color:var(--muted)}
.path-stage.has-live .path-stage-n{border-color:var(--ac);color:var(--ac)}
.path-stage-head .eyebrow{margin:0 0 6px}
.path-stage-done{color:var(--ac)}
.path-stage-head h3{font:700 28px/1 var(--head);text-transform:uppercase;margin:0 0 8px}
.path-stage-head p:not(.eyebrow){margin:0;font-size:15px;line-height:1.5;color:var(--muted)}
.path-stage.is-upcoming .path-stage-head h3{color:var(--muted)}
.path-stage-planned{margin:0;align-self:center;font-size:15px;line-height:1.5;color:var(--muted)}
.path-lessons{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.path-lesson>a,.path-lesson>div{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:4px 14px;height:100%;padding:16px 18px;border:1px solid var(--soft);text-decoration:none;color:inherit;transition:border-color .2s,background .2s,transform .2s}
.path-lesson-n{grid-row:1/3;font:700 24px/1 var(--head);color:var(--muted);padding-top:2px}
.path-lesson-text{display:flex;flex-direction:column;gap:4px}
.path-lesson-text strong{font:600 20px/1.1 var(--head);text-transform:uppercase}
.path-lesson-text span{font-size:14px;line-height:1.45;color:var(--muted)}
.path-lesson-status{grid-column:2;font-size:14px;margin-top:8px;color:var(--muted)}
.path-lesson.is-live>a{border-color:var(--ac);background:var(--ac-soft)}
.path-lesson.is-live .path-lesson-n,.path-lesson.is-live .path-lesson-status{color:var(--ac)}
.path-lesson.is-live>a:hover{transform:translateY(-2px)}
.path-coming{margin-top:8px;padding:26px 0 6px;border-top:1px solid var(--line)}
.path-coming h3{font:700 28px/1 var(--head);text-transform:uppercase;margin:0 0 8px}
.path-coming>p{margin:0 0 18px;font-size:15px;color:var(--muted)}
.path-coming-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px 28px}
.path-coming h4{font:600 16px/1.3 var(--body);text-transform:none;letter-spacing:0;margin:0 0 8px}
.path-coming ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.path-coming li{font-size:15px;line-height:1.4;color:var(--ink)}
.path-coming li span{display:block;font-size:14px;color:var(--muted)}
.path-lesson.is-done>a{background:transparent}
.path-lesson.is-done .path-lesson-status{color:var(--ink)}
@media(max-width:800px){.path-stage{grid-template-columns:1fr;gap:16px}.path-stage-head{position:static}.path-lessons{grid-template-columns:1fr}}

/* The deck walkthrough sits in the path's language: square edges, one accent. */
.deck-feature{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:48px;align-items:center;margin:0 0 56px;padding:40px 44px;border:1px solid var(--line);background:linear-gradient(120deg,var(--bg) 40%,color-mix(in srgb,var(--chaos) 9%,transparent))}
.deck-feature h2{font:700 clamp(2.2rem,3.6vw,3.4rem)/.95 var(--head);text-transform:uppercase;margin:10px 0 14px}
.deck-feature p:not(.eyebrow){font-size:17px;line-height:1.6;color:var(--muted);max-width:520px}
.deck-feature .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.deck-feature-art{position:relative;height:300px}
.deck-feature-card{position:absolute;width:44%;height:auto;border-radius:8px;box-shadow:0 18px 40px #0007}
.deck-feature-card.is-0{left:4%;top:10%;transform:rotate(-8deg)}
.deck-feature-card.is-1{left:29%;top:0;z-index:2;transform:rotate(1deg)}
.deck-feature-card.is-2{left:54%;top:12%;transform:rotate(9deg)}
.learn-resources{margin:0 0 40px;padding-top:28px;border-top:1px solid var(--line)}
.learn-resources h2{font:700 28px/1 var(--head);text-transform:uppercase;margin:0 0 20px}
.learn-resources-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.learn-resources h3{font:600 15px var(--body);text-transform:none;letter-spacing:0;color:var(--muted);margin:0 0 10px}
.learn-resources ul{list-style:none;margin:0;padding:0;display:grid;gap:0;font-size:16px}
.learn-resources li{min-height:44px;display:flex;align-items:center}
.learn-resources a{color:var(--ink);display:inline-flex;align-items:center;min-height:44px}
.learn-resources a:hover{color:var(--ac)}
@media(max-width:800px){.deck-feature{grid-template-columns:1fr;padding:26px;gap:18px}.deck-feature-art{height:220px;max-width:360px}.learn-resources-grid{grid-template-columns:1fr;gap:22px}}

/* Written guide: the real cards beside the steps that introduce them. Its column and contents live in reference.css. */
.how-to-play{box-sizing:border-box}
.guide-step h4{text-wrap:balance}
.guide-cards{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 12px}
@media(min-width:720px){
  .guide-step:has(.guide-cards){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:28px;align-items:start}
  .guide-step:has(.guide-cards)>*{grid-column:1}
  .guide-step>.guide-cards{grid-column:2;grid-row:1/span 6;margin:0;max-width:300px;justify-content:flex-end}
}
.guide-card{margin:0;width:120px}
.guide-card.is-field{width:172px}
.guide-card img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 6px 16px #0006}
.guide-card figcaption{margin-top:6px;font-size:13px;line-height:1.3;color:var(--muted)}
@media(max-width:600px){.guide-card{width:96px}.guide-card.is-field{width:150px}}