/* 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:repeat(3,minmax(0,1fr));gap:14px}
.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:900px){
  .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:699px){
  .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} }