/* concordancegames.com. One stylesheet for every page; no build step. Brand: brand/BRAND.md.
   Type: four sizes (--t-lede, --t-body, --t-small, --t-fine). Colour: paper and ink, a dusk blue for the game's world,
   amber for the bars and one button, teal for a third item. Motion: CSS scroll-driven, calm, and a still page where
   it is not supported or the reader prefers reduced motion. Nothing here loads from another site. */
@font-face { font-family: 'Outfit'; font-weight: 400 600; font-display: swap; src: url(/fonts/outfit.woff2) format('woff2'); }
:root { --t-lede:clamp(1.1rem,1.7vw,1.25rem); --t-body:16px; --t-small:14.5px; --t-fine:13px; --ink:#141a33; --ink-2:#1c2342; --paper:#fbfaf7; --amber:#f3a93a; --amber-deep:#ec8f2a; --teal:#1f7fa3; --soft:#565c73; --line:#e4e2db; --ink-line:#2b3250; --on-ink:#c9cbd6; --muted-on-ink:#9a9fb4; --wrap:1160px; --g:clamp(20px,4vw,28px); --hdr:68px; }
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--hdr)}
body{margin:0;font-family:'Outfit',system-ui,sans-serif;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.02em}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--g)}
.barred::before{content:'';display:block;width:32px;height:6px;border-radius:1px;background:var(--amber);margin-bottom:16px;transform-origin:left}

/* header, with the reading-progress bar along its foot */
.hdr{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;height:var(--hdr)}
.hdr .wrap>a{flex:none;display:block}
.hdr img{height:20px;width:auto}  /* whole-pixel height: (68 - 20) / 2 = 24, so the logo lands on whole pixels and stays sharp at 1x */
.nav{display:flex;gap:clamp(14px,2.6vw,28px);font-weight:500;font-size:16px}
.nav a{position:relative;text-decoration:none;padding:4px 0}
.nav a::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:3px;border-radius:1px;background:linear-gradient(90deg,var(--amber),var(--amber-deep));transform:scaleX(0);transform-origin:left;transition:transform .2s ease-out}
.nav a:hover::after{transform:scaleX(1)}
.progress{position:absolute;left:0;bottom:-1px;height:3px;width:100%;background:linear-gradient(90deg,rgba(243,169,58,0),var(--amber) 30%,var(--amber-deep));transform:scaleX(0);transform-origin:left}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:12px;font:600 16px/1 'Outfit',sans-serif;text-decoration:none}
.btn-amber{background:var(--amber);color:var(--ink)}.btn-amber:hover{background:var(--amber-deep)}
.btn-ghost{color:var(--paper);border:1px solid #3a4160}.btn-ghost:hover{border-color:var(--muted-on-ink)}
.link{font-weight:600;text-decoration:none;border-bottom:3px solid var(--amber);padding-bottom:2px}
.link:hover{color:var(--teal)}

/* 1. HERO: the painting gets the screen to itself first. As you scroll, a navy veil fades in and the studio's
   words rise onto it. Without scroll-driven animations (or with reduced motion) it is one still screen. */
.hero{position:relative;background:#1b2448}
.hero-sticky{position:relative;height:calc(100svh - var(--hdr));overflow:hidden}
.hero picture,.hero picture img{position:absolute;inset:0;width:100%;height:100%}
.hero picture img{object-fit:cover;object-position:60% 55%}
.fade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,36,72,0) 40%,rgba(27,36,72,.6) 68%,rgb(27,36,72) 100%)}
.veil{position:absolute;inset:0;background:rgba(27,36,72,.45);opacity:0}
.hero-copy{position:absolute;left:0;right:0;bottom:0;color:var(--paper)}
.hero-copy .wrap{padding-bottom:clamp(28px,6svh,56px)}
.hero-copy h1{font-size:clamp(2.2rem,5.4vw,4.3rem);line-height:1.02;max-width:17ch;text-wrap:balance;text-shadow:0 2px 24px rgba(20,26,51,.5)}
.hero-copy h1::before{content:'';display:block;width:40px;height:6px;border-radius:1px;background:var(--amber);margin-bottom:20px}
.more{max-width:560px;overflow:hidden}
.more p{margin-top:18px;text-wrap:pretty;font-size:var(--t-lede);line-height:1.5;color:#e3e5ee}
.more .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.cue{position:absolute;right:var(--g);bottom:clamp(36px,8svh,72px);color:rgba(255,255,255,.8);font-size:12px;letter-spacing:.12em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px}
.cue::after{content:'';width:2px;height:28px;border-radius:2px;background:linear-gradient(var(--amber),rgba(243,169,58,0))}
.cue{display:none}

/* 2. SPELLTRAILS: the pitch and Wren on the dusk blue */
/* the hero fades into #1b2448, so the section starts on exactly that colour and lifts to a dusk blue */
.st{background:linear-gradient(180deg,#1b2448 0%,#1f2a57 45%,#26346a 100%);color:var(--paper);position:relative}
.st .wrap{padding-top:clamp(24px,4vw,56px);padding-bottom:clamp(36px,5vw,56px)}
.st-top{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-template-areas:"copy wren" "actions wren";column-gap:clamp(28px,5vw,64px);align-items:center}
.st-copy{grid-area:copy;align-self:end}.wren-row{grid-area:wren}.st-actions{grid-area:actions;align-self:start}
.st-brand{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.st-brand img{width:56px;height:56px;border-radius:14px}
.st-brand strong{display:block;font-size:22px;font-weight:600;letter-spacing:-.01em}
.st-brand span{display:block;margin-top:2px;font-size:var(--t-body);color:var(--amber)}
.st h2{font-size:clamp(2rem,4vw,3rem);line-height:1.05;text-wrap:balance}
.st .sub{margin-top:16px;font-size:var(--t-lede);text-wrap:pretty;line-height:1.5;color:var(--on-ink);max-width:30em}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.chips span{font-size:var(--t-small);font-weight:500;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 12px}
.elsewhere{margin-top:14px;font-size:var(--t-small);line-height:1.5;color:var(--muted-on-ink)}
.st .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.signup{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;max-width:520px}
.field{position:relative;display:flex;flex:1 1 220px;min-width:0;border-radius:12px;box-shadow:0 0 0 1px rgba(243,169,58,.45)}
/* the glimmer: a soft light that runs once along the box's edge when it comes into view (motion block below) */
.field::before{content:'';position:absolute;inset:-1px;border-radius:13px;padding:1.5px;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 0 38%,rgba(255,226,170,.95) 50%,transparent 62% 100%) 120% 0/260% 100% no-repeat;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.signup input[type=email]{flex:1 1 auto;width:100%;min-width:0;min-height:52px;padding:0 16px;border-radius:12px;border:1px solid transparent;background:rgba(255,255,255,.06);color:var(--paper);font:500 var(--t-body)/1 'Outfit',sans-serif}
.signup input[type=email]::placeholder{color:var(--muted-on-ink)}
.signup input[type=email]:focus{outline:2px solid var(--amber);outline-offset:2px;border-color:transparent}
.signup button{border:0;cursor:pointer}
.signup-note{flex-basis:100%;font-size:var(--t-small);color:var(--muted-on-ink)}
/* Wren and his bubble sit side by side at every width; the bubble rides up by his head */
.wren-row{display:flex;align-items:flex-start;gap:clamp(10px,2vw,18px)}
.wren{width:clamp(120px,16.3vw,196px);aspect-ratio:327/448;flex:none;background:url(/img/spelltrails-wren-wave.webp) 0 0/500% 100% no-repeat;filter:drop-shadow(0 16px 26px rgba(0,0,0,.35))}
.bubble{position:relative;margin-top:clamp(14px,3.2vw,52px);max-width:30ch;background:var(--paper);color:var(--ink);border-radius:18px;padding:14px 18px;font-size:var(--t-lede);font-weight:500;line-height:1.35}
.bubble::after{content:'';position:absolute;left:-9px;top:28px;border:9px solid transparent;border-right-color:var(--paper);border-left:0}

/* 2b. what SpellTrails is like: white cards that start on the SpellTrails blue and step down onto the warm tint,
   so they read as part of it */
.sec.feats-sec{padding-top:0}  /* beats .sec's padding, which comes later in this file */
.feats-sec{background:linear-gradient(180deg,#26346a 0,#26346a 110px,#f4f2ec 110px)}
.feats{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}  /* one column; two from 700px (the quest card spans both) */
.feat{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;color:var(--ink);box-shadow:0 1px 0 rgba(20,26,51,.03),0 22px 44px -32px rgba(20,26,51,.28)}
.feat h3::before{content:'';display:block;width:28px;height:4px;border-radius:1px;background:var(--amber);margin-bottom:14px}
.feat.start h3::before{background:var(--teal)}
.feat.camp h3::before{background:var(--ink)}
.feat h3{font-size:19px}
.feat p{margin-top:8px;font-size:var(--t-body);line-height:1.5;color:var(--soft)}
.trail{list-style:none;margin:18px 0 0;padding:0}
.trail li{position:relative;padding:0 0 14px 28px;font-size:var(--t-body);line-height:1.35}
.trail li::before{content:'';position:absolute;left:2px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--amber)}
.trail li:not(:last-child)::after{content:'';position:absolute;left:7px;top:20px;bottom:0;border-left:2px dashed #d6d3ca}
.trail b{font-weight:600}
.trail span{display:block;color:var(--soft);font-size:var(--t-small)}
.trail li.on{padding-bottom:0}.trail li.on::before{background:none;border:2px solid var(--amber)}
.trail li.on span{color:var(--soft)}
.nos{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:22px;padding-top:4px;font-size:var(--t-body);font-weight:500;color:var(--ink)}
.nos span::before{content:'✓';color:var(--teal);margin-right:8px}

/* paper sections */
.sec{padding:clamp(52px,7vw,88px) 0}
#about{padding-top:clamp(36px,5vw,62px)}
.sec h2{font-size:clamp(1.8rem,3.6vw,2.6rem);line-height:1.08}
.lead{margin-top:12px;font-size:var(--t-lede);text-wrap:pretty;line-height:1.5;color:var(--soft);max-width:34em}
.entry{margin-top:28px;max-width:44em;padding:4px 0 4px 22px;border-left:3px solid var(--line)}
.entry .hw{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.entry dfn{font-style:normal;font-weight:600;font-size:clamp(1.5rem,2.6vw,1.9rem);letter-spacing:-.01em}
.entry .ipa{color:var(--soft);font-size:var(--t-body)}
.entry .pos{color:var(--soft);font-size:var(--t-small);letter-spacing:.06em}
.senses{margin:12px 0 0;padding-left:1.4em;color:var(--ink);font-size:var(--t-body);line-height:1.55}
.senses li+li{margin-top:4px}
.senses li::marker{font-weight:600;color:var(--soft)}
.entry .tie{margin-top:14px;font-size:var(--t-lede);line-height:1.5;color:var(--ink);text-wrap:pretty}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:44px}
.grid3 h3{font-size:19px}
.grid3 p{margin-top:8px;font-size:var(--t-body);line-height:1.55;color:var(--soft)}
.grid3 div::before{content:'';display:block;width:28px;height:4px;background:var(--amber);margin-bottom:14px;border-radius:1px}
.grid3 div:nth-child(2)::before{background:var(--teal)}.grid3 div:nth-child(3)::before{background:var(--ink)}
.quote p{font-size:var(--t-lede);line-height:1.55;margin-top:16px;max-width:34em;color:var(--ink)}
.quote{margin-top:clamp(40px,5vw,56px);padding-top:clamp(32px,4vw,44px);border-top:1px solid var(--line)}
.quote h3{font-size:clamp(1.5rem,2.6vw,1.9rem);line-height:1.1}
.quote .sig{margin-top:22px;font-weight:600}.sig span{display:block;font-weight:400;color:var(--soft)}
.mail{margin-top:22px;font-size:var(--t-lede)}
/* 4. Get in touch: a dusk band that deepens into the footer, so the page ends where it began */
#contact{padding-bottom:clamp(24px,3vw,36px);background:linear-gradient(180deg,#26346a 0%,#1b2448 55%,#141a33 100%);color:var(--paper)}
#contact .lead{color:var(--on-ink)}
#contact .link{color:var(--paper)}
#contact .link:hover{color:var(--amber)}

footer{background:var(--ink);color:var(--paper)}
footer .wrap{padding-top:36px;padding-bottom:30px;display:flex;flex-direction:column;gap:22px}
.ftop{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.ftop img{height:16px;width:auto}
.ftop nav{display:flex;gap:16px 22px;flex-wrap:wrap;font-size:var(--t-small)}.ftop nav a{color:var(--on-ink);text-decoration:none}.ftop nav a:hover{color:var(--amber)}
.fbase{border-top:1px solid var(--ink-line);padding-top:16px;font-size:var(--t-fine);color:var(--muted-on-ink)}

/* the quest card runs the full width over two half cards; on wide screens its trail runs left to right */
@media (min-width:700px){
  .feats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feat.quest{grid-column:1 / -1}
}
@media (min-width:901px){
  .feat.quest{padding:28px}
  .feat.quest p{max-width:40em}
  .quest .trail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:26px}
  .quest .trail li{padding:28px 16px 0 0}
  .quest .trail li::before{left:0;top:0}
  .quest .trail li:not(:last-child)::after{left:20px;right:6px;top:5px;bottom:auto;border-left:0;border-top:2px dashed #d6d3ca}
}
/* 5. INNER PAGES (privacy, 404): a dusk band for the title, then the text on paper */
.doc-hero{background:linear-gradient(180deg,#141a33 0%,#1f2a57 60%,#26346a 100%);color:var(--paper)}
.doc-hero .wrap{padding-top:clamp(48px,7vw,88px);padding-bottom:clamp(40px,6vw,64px)}
.doc-hero h1{font-size:clamp(2rem,4.2vw,3rem);line-height:1.05;max-width:18ch}
.doc-hero .updated{margin-top:14px;font-size:var(--t-small);color:var(--muted-on-ink)}
.doc-hero .lede{margin-top:18px;max-width:36em;font-size:var(--t-lede);line-height:1.5;color:var(--on-ink);text-wrap:pretty}
.doc-hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.doc .wrap{padding-top:clamp(40px,6vw,64px);padding-bottom:clamp(48px,7vw,88px)}
.doc article{max-width:42em}
.doc h2{font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.2;margin-top:44px}
.doc h2:first-child{margin-top:0}
.doc h2::before{content:'';display:block;width:28px;height:4px;border-radius:1px;background:var(--amber);margin-bottom:14px}
.doc p,.doc li{font-size:var(--t-body);line-height:1.65;color:var(--ink)}
.doc p{margin-top:12px;text-wrap:pretty}
.doc ul{list-style:none;margin:14px 0 0;padding:0}
.doc li{position:relative;padding-left:28px}.doc li+li{margin-top:8px}
.doc li::before{content:'✓';position:absolute;left:2px;color:var(--teal);font-weight:600}
.doc a:not(.btn){color:inherit;text-decoration:none;border-bottom:2px solid var(--amber)}
.doc a:not(.btn):hover{color:var(--teal)}
.doc .back{margin-top:44px}
.ftop nav a[aria-current]{color:var(--paper)}
/* 404: sad Wren (the game's own "sad" key pose, still) stands where a dotted trail gives out */
.nf-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;gap:clamp(24px,5vw,64px)}
.nf-art{position:relative;display:flex;align-items:flex-end;justify-content:flex-end}
.nf-art::after{content:'';position:absolute;right:clamp(10px,2vw,24px);bottom:-6px;width:clamp(120px,15vw,180px);height:18px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.35),transparent)}
.nf-wren{position:relative;z-index:1;width:clamp(150px,18vw,220px);height:auto;filter:drop-shadow(0 18px 24px rgba(0,0,0,.3))}
.nf-trail{list-style:none;display:flex;align-items:center;flex:1;max-width:260px;margin:0 6px 10px 0;padding:0}
.nf-trail li{position:relative;flex:1;height:12px}
.nf-trail li::before{content:'';position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;background:var(--amber)}
.nf-trail li:not(.end)::after{content:'';position:absolute;left:18px;right:6px;top:5px;border-top:2px dashed rgba(255,255,255,.35)}
.nf-trail li:nth-child(2){opacity:.75}.nf-trail li:nth-child(3){opacity:.5}
.nf-trail li.end{flex:0 0 12px}.nf-trail li.end::before{background:none;border:2px solid var(--amber);opacity:.6}
.fill .doc-hero{display:flex;align-items:center}.fill .doc-hero>.wrap{width:100%}
@media (max-width:700px){
  .nf-grid{grid-template-columns:minmax(0,1fr)}
  .nf-art{order:-1;justify-content:flex-start;margin-bottom:8px}
  .nf-wren{width:130px}
  .nf-art::after{right:auto;left:clamp(140px,40vw,200px);width:110px}
  .nf-trail{max-width:180px}
}
/* a short page (the 404) fills the screen: the dusk band grows so the footer sits at the bottom */
.fill{min-height:100svh;display:flex;flex-direction:column}.fill main{flex:1;display:flex;flex-direction:column}.fill .doc-hero{flex:1}
.skip{position:absolute;left:12px;top:-60px;z-index:30;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:10px;text-decoration:none}
.skip:focus{top:12px}

@media (max-width:900.98px){
  .st{background:linear-gradient(180deg,#1b2448 0%,#1f2a57 30%,#26346a 100%)}
  .st-top{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "wren" "actions"}
  .wren-row{margin-top:28px}
  .grid3{grid-template-columns:minmax(0,1fr)}
  .feats{gap:10px}
}
@media (max-width:699.98px){
  .feats{grid-template-columns:minmax(0,1fr)}
  .feats-sec{background:linear-gradient(180deg,#26346a 0,#26346a 80px,#f4f2ec 80px)}
}
@media (max-width:560px){
  :root{--hdr:60px}
  /* the logo never shrinks and its letters sit at the menu's size; the phone menu keeps its two key links */
  .hdr img{height:16px}.nav{font-size:15px;gap:18px}.nav a:nth-child(2){display:none}
  .cue{visibility:hidden}
  .hero picture img{object-position:90% 50%}
  .more .actions .btn,.st .actions .btn,.signup .field,.signup button{flex:1 1 100%}
  .wren{width:112px}
  .grid3{gap:22px;margin-top:24px}
  .grid3 div{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:12px}
  .grid3 div::before{grid-row:1;align-self:center;width:22px;margin:0}
  .grid3 h3,.grid3 p{grid-column:2}
}

@media (max-width:380px){ .hero-copy h1{font-size:2rem} }
@media (max-height:420px){ :root{--hdr:56px} .hero-copy h1{font-size:2.2rem} .more p{margin-top:10px} .more .actions{margin-top:14px} }

/* ---------- Motion: calm. Each section settles in once, as a whole. ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    .progress { animation: progress linear both; animation-timeline: scroll(root); }
    .hero{height:calc(135svh - var(--hdr))}
    .hero-sticky{position:sticky;top:var(--hdr)}
    .cue{display:flex}
    @keyframes veil-in { to { opacity: 1; } }
    .veil { animation: veil-in linear both; animation-timeline: scroll(root); animation-range: 4svh 30svh; }
    @keyframes more-in { 0% { max-height: 0; opacity: 0; transform: translateY(12px); } 55% { max-height: 320px; opacity: 0; } 100% { max-height: 320px; opacity: 1; transform: none; } }
    .more { animation: more-in linear both; animation-timeline: scroll(root); animation-range: 8svh 30svh; }
    @keyframes cue-out { to { opacity: 0; } }
    .cue { animation: cue-out linear both; animation-timeline: scroll(root); animation-range: 0 10svh; }
    @keyframes art-drift { to { transform: scale(1.08); } }
    .hero picture img { animation: art-drift linear both; animation-timeline: scroll(root); animation-range: 0 50svh; }
    @keyframes settle { from { opacity: 0; transform: translateY(36px); } }
    .settle { animation: settle linear both; animation-timeline: view(); animation-range: entry 0 entry 30svh; }
    @keyframes bar-in { from { transform: scaleX(0); } }
    .barred::before { animation: bar-in linear both; animation-timeline: view(); animation-range: entry 40% entry 90%; }
    /* Wren waves once as he arrives (owner's pick, A): poses 0, u2, u3, u4, u5 of the shipped greet@534 (u1's half-closed
       hand left out); up, rock the open hand twice, down; ticks 2,1,1,2,2,2,2,2,1,1 at 160 ms. */
    @keyframes inview { to { --inview: 1; } }
    .wren-row { animation: inview linear both; animation-timeline: view(); animation-range: cover 34% cover 44%; }  /* waves once he is well on screen, just below the middle */
    @keyframes wave { 0.00% { background-position: 0% 0; } 12.50% { background-position: 25% 0; } 18.75% { background-position: 50% 0; } 25.00% { background-position: 75% 0; } 37.50% { background-position: 100% 0; } 50.00% { background-position: 75% 0; } 62.50% { background-position: 100% 0; } 75.00% { background-position: 75% 0; } 87.50% { background-position: 50% 0; } 93.75% { background-position: 25% 0; } 100% { background-position: 0% 0; } }
    .signup { animation: inview linear both; animation-timeline: view(); animation-range: cover 30% cover 40%; }
    @keyframes glimmer { 0% { opacity: 0; background-position: 120% 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; background-position: -20% 0; } }
    @container style(--inview: 1) {
      .field::before { animation: glimmer 1.6s ease-in-out .5s 1 both; }
    }
    @container style(--inview: 1) {
      .wren { animation: wave 2.56s step-end .3s 1 both; }  /* Wren stands still and waves once he is on screen */
    }
  }
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

/* Phones on their side (short screens): no scroll reveal. The hero is one still screen, tall enough for its words,
   so the headline is never pushed up under the header. Last in the file so it wins over the motion block. */
@media (max-height:500px) and (orientation:landscape){
  :root{--hdr:52px}
  .hdr img{height:16px}
  .hero{height:auto}
  .hero-sticky{position:relative;top:auto;height:auto;min-height:calc(100svh - var(--hdr));display:flex;flex-direction:column;justify-content:flex-end}
  .hero-copy{position:relative;padding-top:clamp(24px,10svh,48px)}
  .hero-copy .wrap{padding-bottom:24px}
  .hero-copy h1{font-size:2rem}
  .more,.veil,.cue{animation:none}
  .more{max-height:none;opacity:1;transform:none}
  .more p{margin-top:10px}.more .actions{margin-top:14px}
  .veil{opacity:1}
  .cue{display:none}
}