/* StudyBuff — the sticker sheet.
   ---------------------------------------------------------------------------
   The app is one die-cut sticker: a coral plate, a blush brain, charcoal iron,
   cream laces, a fat white outline around the lot. Flat vector. No gradients,
   no glow, no glass. It is printed rather than lit, and it locks to light mode
   on the phone — so this site commits to the same single printed world and
   paints every colour explicitly rather than swapping tokens per theme.

   The three things that make it read as StudyBuff and not a landing page:
   colour blocking (whole bands of coral, ink, brass — never one polite ground),
   the hard un-blurred shadow four points below every raised thing, and type at
   poster scale that is allowed to break the grid. */

/* ---------- palette: the mascot's, and nothing else ---------- */
:root{
  --paper:#FDF6F1; --sand:#F5E8E1; --card:#FFFFFF; --cream:#FBF3E9;
  --ink:#1C1517; --ink-soft:#2E2528; --ink-deep:#0F0B0C;
  --graphite:#5A5457; --steel:#A9A4A6;
  --blush:#FBB3B6; --coral:#FF8D90; --rose:#EA827F; --crimson:#C93A46;
  --brass:#D79A55;

  --display:"Fredoka","Baloo 2","Avenir Next Rounded",system-ui,sans-serif;
  --body:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important; transition:none!important}
}

/* overflow-x lives on html, not body. On body it makes the computed overflow-y
   `auto`, which turns body into its own scroll container — that breaks
   IntersectionObserver and scrollIntoView in ways that are miserable to debug. */
html{overflow-x:hidden}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink); outline-offset:3px; border-radius:4px}

/* The paper has a tooth. You never see the dots; you just stop reading the
   background as a flat rectangle. */
.grain{position:relative}
.grain::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(currentColor 1px, transparent 1px);
  background-size:13px 13px; opacity:.05;
}

h1,h2,h3,h4{font-family:var(--display); font-weight:700; margin:0; letter-spacing:-.02em; line-height:.94}
p{margin:0 0 16px}

.wrap{max-width:1180px; margin:0 auto; padding:0 26px; position:relative}
.narrow{max-width:760px}

/* ---------- the signature: a sticker on a page ---------- */
.sticker{
  background:var(--card); border:3px solid var(--ink); border-radius:22px;
  box-shadow:6px 7px 0 var(--ink);
}

/* ---------- chunky controls: they drop onto their base when pressed ------- */
.btn{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--display); font-weight:600; font-size:19px; line-height:1;
  padding:17px 28px; border-radius:16px; text-decoration:none; cursor:pointer;
  background:var(--coral); color:var(--ink);
  border:3px solid var(--ink); box-shadow:0 6px 0 var(--ink);
  transition:transform .1s ease, box-shadow .1s ease;
}
.btn:hover{transform:translateY(2px); box-shadow:0 4px 0 var(--ink)}
.btn:active{transform:translateY(6px); box-shadow:0 0 0 var(--ink)}
.btn.cream{background:var(--cream)}
.btn.ink{background:var(--ink); color:var(--cream); border-color:var(--ink); box-shadow:0 6px 0 var(--ink-deep)}
.btn.ink:hover{box-shadow:0 4px 0 var(--ink-deep)}
.btn.ink:active{box-shadow:0 0 0 var(--ink-deep)}

.appstore{
  display:inline-flex; align-items:center; gap:13px; text-decoration:none; cursor:pointer;
  background:var(--ink); color:var(--cream);
  border:3px solid var(--ink); border-radius:16px; padding:12px 26px;
  box-shadow:0 6px 0 var(--ink-deep);
  transition:transform .1s ease, box-shadow .1s ease;
}
.appstore:hover{transform:translateY(2px); box-shadow:0 4px 0 var(--ink-deep)}
.appstore:active{transform:translateY(6px); box-shadow:0 0 0 var(--ink-deep)}
.appstore svg{width:28px; height:28px; flex:none; fill:currentColor}
.appstore .lines{display:flex; flex-direction:column; line-height:1.1; text-align:left}
.appstore .small{font-size:11px; letter-spacing:.06em; text-transform:uppercase; opacity:.8}
.appstore .big{font-family:var(--display); font-weight:600; font-size:21px}

/* ---------- header ---------- */
.site-header{position:sticky; top:0; z-index:40; background:var(--ink); border-bottom:3px solid var(--ink)}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:18px; padding-block:12px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--cream)}
.brand img{width:38px}
.brand span{font-family:var(--display); font-weight:700; font-size:21px; letter-spacing:-.01em}
.brand .buff{color:var(--coral)}
.site-nav{display:flex; align-items:center; gap:26px}
.site-nav a{color:var(--cream); opacity:.78; text-decoration:none; font-weight:700; font-size:15px}
.site-nav a:hover{opacity:1; color:var(--coral)}
/* .site-nav a sets cream for the plain links; the button needs its ink label
   back or it is cream-on-coral. */
.site-nav .btn{color:var(--ink); opacity:1; padding:11px 20px; font-size:16px; box-shadow:0 4px 0 var(--ink-deep)}
.site-nav .btn:hover{color:var(--ink)}
@media (max-width:720px){ .site-nav a.hide-sm{display:none} }

/* ---------- hero: full-bleed coral, type at poster scale ---------- */
.hero{background:var(--coral); color:var(--ink); padding:78px 0 0; overflow:hidden}
.hero .wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:20px; align-items:end}
.kicker{
  display:inline-block; font-family:var(--display); font-weight:600; font-size:14px;
  letter-spacing:.14em; text-transform:uppercase;
  background:var(--cream); border:3px solid var(--ink); border-radius:999px;
  padding:8px 18px; box-shadow:0 4px 0 var(--ink); margin-bottom:26px;
  transform:rotate(-2deg);
}
.hero h1{
  font-size:clamp(58px,10.5vw,132px); font-weight:700;
  margin:0 0 24px; text-transform:uppercase; letter-spacing:-.035em;
}
.hero h1 em{font-style:normal; color:var(--cream); -webkit-text-stroke:3px var(--ink)}
.hero .sub{font-size:clamp(18px,2vw,22px); font-weight:600; max-width:34ch; margin-bottom:30px}
.hero-cta{display:flex; flex-wrap:wrap; gap:16px; align-items:center; padding-bottom:74px}
.hero-note{font-size:14.5px; font-weight:600; opacity:.72; margin:16px 0 0; flex-basis:100%}
.hero-art{align-self:end; justify-self:center; padding-bottom:0}
.hero-art img{
  width:min(460px,100%); transform:rotate(4deg);
  filter:drop-shadow(8px 10px 0 rgba(28,21,23,.22));
}
@media (max-width:900px){
  .hero{padding-top:52px}
  .hero .wrap{grid-template-columns:1fr; gap:0}
  .hero-art{order:-1; margin-bottom:22px}
  .hero-art img{width:min(300px,74%); transform:rotate(3deg)}
  .hero-cta{padding-bottom:54px}
}

/* ---------- marquee: an ink band that keeps moving ---------- */
.marquee{
  background:var(--ink); color:var(--cream); border-block:3px solid var(--ink);
  overflow:hidden; padding:15px 0; white-space:nowrap;
}
.marquee-track{display:inline-flex; gap:34px; align-items:center; animation:slide 34s linear infinite}
.marquee span{
  font-family:var(--display); font-weight:600; font-size:19px;
  letter-spacing:.1em; text-transform:uppercase; flex:none;
}
.marquee .star{color:var(--coral); font-size:16px}
@keyframes slide{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ---------- generic band ---------- */
.band{padding:92px 0; position:relative}
.band.paper{background:var(--paper); color:var(--ink)}
.band.sand{background:var(--sand); color:var(--ink)}
.band.ink{background:var(--ink); color:var(--cream)}
.band.crimson{background:var(--crimson); color:var(--cream)}
.band.brass{background:var(--brass); color:var(--ink)}
.band + .band{border-top:3px solid var(--ink)}

/* The heading wants a short measure so it stacks like a poster; the body copy
   underneath wants a normal one. Constraining the shared parent squeezes both. */
.band-head{margin-bottom:52px}
.band h2{font-size:clamp(38px,5.6vw,68px); text-transform:uppercase; margin-bottom:20px; max-width:15ch}
.band-head.wide h2{max-width:20ch}
.band-head p{font-size:19px; max-width:54ch; opacity:.82; margin:0}
.tag{
  display:inline-block; font-family:var(--mono); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; margin-bottom:16px; opacity:.7;
}

/* ---------- the loop: index cards, dealt not stacked ---------- */
.loop{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.loop .beat{padding:30px 28px 34px; background:var(--card); position:relative}
.loop .beat:nth-child(1){transform:rotate(-1.4deg)}
.loop .beat:nth-child(2){transform:rotate(.8deg); margin-top:20px}
.loop .beat:nth-child(3){transform:rotate(-.6deg)}
.loop .n{
  font-family:var(--display); font-weight:700; font-size:74px; line-height:.8;
  color:var(--cream); -webkit-text-stroke:3px var(--ink); display:block; margin-bottom:14px;
}
.loop h3{font-size:26px; text-transform:uppercase; margin-bottom:10px}
.loop p{font-size:16px; margin:0; opacity:.78}
@media (max-width:820px){
  .loop{grid-template-columns:1fr; gap:22px}
  .loop .beat{transform:none!important; margin-top:0!important}
}

/* ---------- the demo: a real rep counter you can tap ---------- */
.demo{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center}
.demo-copy h2{color:var(--cream)}
.demo-copy p{opacity:.78; font-size:18px; max-width:40ch}
.rig{
  background:var(--ink-soft); border:3px solid var(--cream); border-radius:30px;
  padding:38px 30px 32px; text-align:center; box-shadow:8px 9px 0 var(--ink-deep);
  transform:rotate(-1deg);
}
.ring{position:relative; width:196px; height:196px; margin:0 auto 20px}
.ring svg{transform:rotate(-90deg); display:block}
.ring .track{fill:none; stroke:rgba(251,243,233,.18); stroke-width:14}
.ring .fill{fill:none; stroke:var(--coral); stroke-width:14; stroke-linecap:round; transition:stroke-dashoffset .25s ease}
.ring .count{
  position:absolute; inset:0; display:grid; place-content:center; gap:0;
  font-family:var(--display); font-weight:700; color:var(--cream);
}
.ring .count b{font-size:74px; line-height:.9; display:block}
.ring .count i{font-style:normal; font-size:15px; opacity:.66; display:block; margin-top:4px}
.rig .exercise{
  font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--coral); margin-bottom:18px;
}
.rig .tapbtn{width:100%; justify-content:center; font-size:18px}
.rig .hint{font-size:13.5px; color:rgba(251,243,233,.5); margin:14px 0 0}
.qcard{
  background:var(--cream); border:3px solid var(--ink); border-radius:20px;
  padding:24px 22px; text-align:left; box-shadow:0 6px 0 var(--ink-deep);
}
.qcard .lbl{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--crimson); display:block; margin-bottom:10px}
.qcard .q{font-family:var(--display); font-weight:600; font-size:23px; line-height:1.15; color:var(--ink); margin-bottom:18px}
.qcard .a{
  font-size:16px; color:var(--ink); background:var(--card);
  border:2px solid var(--ink); border-radius:12px; padding:12px 14px; margin-bottom:14px;
}
.qcard .a strong{color:var(--crimson)}
.qcard .again{font-family:var(--body); font-weight:700; font-size:14px; color:var(--graphite); background:none; border:0; cursor:pointer; text-decoration:underline; padding:0}
.hidden{display:none}
@media (max-width:900px){.demo{grid-template-columns:1fr; gap:34px} .rig{transform:none}}

/* ---------- phone cluster ---------- */
.cluster{display:flex; justify-content:center; align-items:flex-start; gap:0; margin-top:12px}
.cluster figure{margin:0; flex:none; width:270px}
.cluster img{border:3px solid var(--ink); border-radius:30px; box-shadow:7px 8px 0 var(--ink); background:var(--ink)}
.cluster figure:nth-child(1){transform:rotate(-6deg) translateY(18px); z-index:1}
.cluster figure:nth-child(2){transform:rotate(1deg); margin-inline:-32px; z-index:3}
.cluster figure:nth-child(3){transform:rotate(6deg) translateY(18px); z-index:1}
.cluster figcaption{
  font-family:var(--display); font-weight:600; font-size:14px; letter-spacing:.1em;
  text-transform:uppercase; text-align:center; margin-top:18px; opacity:.72;
}
@media (max-width:900px){
  .cluster{flex-direction:column; align-items:center; gap:34px}
  .cluster figure{transform:none!important; margin-inline:0!important; width:250px}
}

/* ---------- feature list: punchy, not paragraphs ---------- */
.facts{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:56px}
/* A card carries its own text colour. Inheriting the band's means a white card
   on the crimson or ink band renders cream text on white — invisible. */
.fact{padding:26px 26px 28px; background:var(--card); color:var(--ink)}
.fact h4{font-size:21px; text-transform:uppercase; margin-bottom:9px}
.fact p{font-size:15.5px; margin:0; opacity:.78}
.band.ink .fact{background:var(--ink-soft); color:var(--cream); border-color:var(--cream); box-shadow:6px 7px 0 var(--ink-deep)}
.band.ink .fact h4{color:var(--coral)}
.band.crimson .fact h4{color:var(--crimson)}
@media (max-width:760px){.facts{grid-template-columns:1fr}}

/* ---------- the arena: a scoreboard ---------- */
.versus{display:grid; grid-template-columns:1fr auto 1fr; gap:22px; align-items:center; margin-bottom:44px}
.side{
  background:var(--cream); color:var(--ink); border:3px solid var(--ink); border-radius:20px;
  padding:22px; text-align:center; box-shadow:0 6px 0 var(--ink-deep);
}
.side .who{font-family:var(--display); font-weight:700; font-size:26px; text-transform:uppercase}
.side .meta{font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; opacity:.6; margin-top:4px}
.vs{
  font-family:var(--display); font-weight:700; font-size:44px; color:var(--cream);
  -webkit-text-stroke:3px var(--ink); transform:rotate(-6deg);
}
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.tier{padding:24px 22px; background:var(--cream); color:var(--ink)}
.tier:nth-child(2){transform:translateY(14px)}
.tier .badge{
  display:inline-block; font-family:var(--display); font-weight:600; font-size:13px;
  letter-spacing:.1em; text-transform:uppercase; padding:5px 13px; border-radius:999px;
  border:2.5px solid var(--ink); margin-bottom:12px;
}
.tier h4{font-size:23px; text-transform:uppercase; margin-bottom:8px}
.tier p{font-size:15px; margin:0; opacity:.78}
@media (max-width:820px){
  .versus{grid-template-columns:1fr; gap:14px}
  .vs{justify-self:center; transform:rotate(-6deg)}
  .tiers{grid-template-columns:1fr}
  .tier:nth-child(2){transform:none}
}

/* ---------- privacy ---------- */
.pledge{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:46px}
.pledge li{
  list-style:none; display:flex; gap:14px; align-items:flex-start;
  background:var(--ink-soft); border:3px solid var(--cream); border-radius:18px;
  padding:22px 24px; box-shadow:6px 7px 0 var(--ink-deep);
}
.pledge ul{margin:0; padding:0; display:contents}
.pledge strong{display:block; font-family:var(--display); font-weight:600; font-size:18px; color:var(--coral); margin-bottom:6px; text-transform:uppercase}
.pledge span{font-size:15.5px; opacity:.82}
.tick{flex:none; width:26px; height:26px; margin-top:2px; fill:none; stroke:var(--coral); stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round}
@media (max-width:760px){.pledge{grid-template-columns:1fr}}

/* ---------- closer ---------- */
.closer{background:var(--coral); text-align:center; padding:96px 0 104px}
.closer img{width:210px; margin:0 auto 26px; transform:rotate(-3deg); filter:drop-shadow(7px 8px 0 rgba(28,21,23,.2))}
.closer h2{font-size:clamp(40px,6.6vw,80px); text-transform:uppercase; margin-bottom:20px}
.closer p{font-size:19px; font-weight:600; max-width:40ch; margin:0 auto 32px; opacity:.8}
.closer .row{display:flex; justify-content:center; flex-wrap:wrap; gap:16px}

/* ---------- footer ---------- */
.site-footer{background:var(--ink); color:var(--cream); padding:52px 0 58px; border-top:3px solid var(--ink)}
.footer-grid{display:flex; flex-wrap:wrap; gap:30px; justify-content:space-between; align-items:flex-start}
.footer-brand{display:flex; align-items:center; gap:13px}
.footer-brand img{width:52px}
.footer-brand .n{font-family:var(--display); font-weight:700; font-size:21px}
.footer-brand .t{font-size:14px; opacity:.6}
.footer-links{display:flex; flex-wrap:wrap; gap:28px}
.footer-links a{opacity:.78; text-decoration:none; font-weight:700; font-size:15px}
.footer-links a:hover{opacity:1; color:var(--coral)}
.colophon{margin-top:34px; font-size:13px; opacity:.45; max-width:70ch}

/* =========================================================================
   LEGAL PAGES
   Documents, not posters: same furniture and palette, dialled right down so
   they stay readable at length.
   ========================================================================= */
.legal-hero{background:var(--ink); color:var(--cream); padding:66px 0 58px}
.legal-hero h1{font-size:clamp(40px,7vw,78px); text-transform:uppercase; margin-bottom:14px}
.legal-hero .updated{font-family:var(--mono); font-size:13px; opacity:.6}
.legal-body{max-width:74ch; margin:0 auto; padding:60px 26px 40px}
.legal-body h2{font-size:27px; margin:52px 0 14px; scroll-margin-top:90px; text-transform:uppercase}
.legal-body h3{font-family:var(--display); font-weight:600; font-size:19px; margin:28px 0 8px}
.legal-body p,.legal-body li{opacity:.86}
.legal-body ul,.legal-body ol{padding-left:22px; margin:0 0 16px; display:grid; gap:9px}
/* Rose is only ~2.4:1 on paper. Crimson is the same hue further down the ramp
   and clears AA for body-size links. */
.legal-body a{color:var(--crimson); text-decoration-thickness:2px; text-underline-offset:3px}
.callout{background:var(--sand); border:3px solid var(--ink); border-left-width:9px; border-radius:16px; padding:20px 24px; margin:26px 0; box-shadow:0 5px 0 var(--ink)}
.callout p{margin:0; opacity:1}
.callout.warn{border-left-color:var(--crimson); background:#FBEDEA}
.toc{background:var(--cream); border:3px solid var(--ink); border-radius:20px; box-shadow:6px 7px 0 var(--ink); padding:26px 30px; margin:34px 0 10px}
.toc h4{font-size:17px; text-transform:uppercase; margin-bottom:14px}
.toc ol{margin:0; padding-left:22px; gap:7px}
.toc a{text-decoration:none; font-weight:700; color:var(--ink); opacity:.8}
.toc a:hover{color:var(--rose); opacity:1; text-decoration:underline}
.tablewrap{overflow-x:auto; margin:22px 0}
table{border-collapse:collapse; width:100%; font-size:15.5px; min-width:460px}
th,td{text-align:left; padding:12px 14px; border-bottom:2px solid rgba(28,21,23,.12); vertical-align:top}
th{font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase; opacity:.55}
td:first-child{font-weight:800; white-space:nowrap}
code{font-family:var(--mono); font-size:.88em; background:var(--sand); padding:2px 6px; border-radius:5px}
.legal-body a.backlink{display:inline-block; margin-top:44px; font-weight:800; text-decoration:none; color:var(--ink); border-bottom:3px solid var(--coral)}

/* =========================================================================
   PASS 2 — depth, texture, and arrival
   ========================================================================= */

/* --- Screens arrive rather than appear ----------------------------------
   The reveal is driven entirely from JS using inline styles (see index.html).
   Doing it with a class here meant fighting the cascade: the tilted cards carry
   `.loop .beat:nth-child(n){transform:rotate(...)}` at a higher specificity, and
   a reveal that loses that fight leaves a section permanently invisible. Inline
   styles cannot lose, and clearing them restores the element exactly. */

/* --- the game layer, scattered as stickers ------------------------------- */
.badge-sticker{
  position:absolute; z-index:3; pointer-events:none; white-space:nowrap;
  font-family:var(--display); font-weight:600; font-size:15px;
  letter-spacing:.07em; text-transform:uppercase;
  padding:10px 18px; border-radius:999px;
  border:3px solid var(--ink); box-shadow:0 5px 0 var(--ink); color:var(--ink);
}
@media (max-width:900px){ .badge-sticker{display:none} }

/* --- let things cross the band boundary ---------------------------------- */
.bleed{position:relative; z-index:4; margin-bottom:-118px}
.band.pad-bleed{padding-top:150px}
@media (max-width:900px){ .bleed{margin-bottom:-70px} .band.pad-bleed{padding-top:104px} }

/* --- numbers, in the app's own numeric voice ----------------------------- */
.numbers{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:8px}
.num{text-align:center}
.num .v{
  display:block; font-family:var(--display); font-weight:700;
  font-size:clamp(54px,7vw,88px); line-height:.82;
  color:var(--cream); -webkit-text-stroke:3px var(--ink); margin-bottom:12px;
}
.num .l{font-family:var(--display); font-weight:500; font-size:15px; letter-spacing:.08em; text-transform:uppercase; opacity:.75}
.band.ink .num .v{color:var(--ink); -webkit-text-stroke:3px var(--cream)}
@media (max-width:760px){ .numbers{grid-template-columns:repeat(2,1fr); gap:34px} }

/* --- deck tiles, straight off the shelf in the app ----------------------- */
.decks{display:flex; flex-wrap:wrap; gap:20px; margin-top:8px}
.deckchip{
  display:flex; align-items:center; gap:15px; padding:15px 24px 15px 15px;
  background:var(--cream); color:var(--ink);
  border:3px solid var(--ink); border-radius:22px; box-shadow:0 6px 0 var(--ink);
}
.deckchip .em{
  width:58px; height:58px; flex:none; border-radius:17px; border:3px solid var(--ink);
  display:grid; place-content:center; font-size:27px; line-height:1;
}
.deckchip .t{font-family:var(--display); font-weight:600; font-size:20px; line-height:1.1}
.deckchip .s{font-size:13.5px; opacity:.6; font-weight:700}
.deckchip.ghost{background:transparent; border-style:dashed; box-shadow:none; opacity:.7}
.deckchip:nth-child(1){transform:rotate(-1.6deg)}
.deckchip:nth-child(2){transform:rotate(1.1deg)}
.deckchip:nth-child(3){transform:rotate(-.7deg)}
.deckchip:nth-child(4){transform:rotate(1.4deg)}
.deckchip:nth-child(5){transform:rotate(-1.2deg)}
@media (max-width:600px){ .deckchip{transform:none!important; width:100%} }

/* --- second marquee, running the other way ------------------------------- */
.marquee.reverse .marquee-track{animation-direction:reverse; animation-duration:40s}
.marquee.paper{background:var(--cream); color:var(--ink); border-block:3px solid var(--ink)}
.marquee.paper .star{color:var(--crimson)}

/* --- hero polish --------------------------------------------------------- */
.hero{position:relative}
.hero .wrap{position:relative; z-index:2}
.hero-art{position:relative}

/* --- a closing end-cap --------------------------------------------------- */
.closer{position:relative; overflow:hidden}
.closer .row{position:relative; z-index:2}