/* ============================================================================
   The Snow World — the landing page at the-snow-world.com

   Self-contained on purpose: its own font, its own tokens, no ../ references
   into the trip site. It is deployed separately (wrangler.hub.jsonc) and may
   move to its own repository later, exactly as the whiskey site did.

   This is the FAMILY page, not an Ireland page — the Irish identity (tricolour,
   street-sign plaques, Irish-language labels) belongs to the trip site behind
   the first card, not to this hallway. The hub's identity is the family name:
   snow-white paper, slate ink, deep winter blue. Colours are tokens; dark mode
   redefines the same names.
   ========================================================================== */
@font-face{
  font-family:'Fraunces';src:url('fraunces-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}

:root{
  --paper:#F6F8FA;          /* fresh snow, a cool cast */
  --card:#FFFFFF;
  --ink:#1B2430;            /* winter-evening slate */
  --ink-2:#5B6875;
  --accent:#2C5E9E;         /* deep winter blue */
  --locked:#8A5A18;         /* lamplight amber, for the sign-in badge */
  --line:#DCE2E8;
  --shadow:0 1px 2px rgba(27,36,48,.05), 0 6px 20px rgba(27,36,48,.06);
  --display:'Fraunces',Georgia,serif;
  --read:Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --step-0:clamp(.95rem,.92rem + .15vw,1.02rem);
  --step-1:clamp(1.15rem,1.08rem + .35vw,1.35rem);
  --step-2:clamp(1.5rem,1.3rem + 1vw,2.1rem);
  --step-3:clamp(2.1rem,1.6rem + 2.4vw,3.4rem);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0F141A; --card:#171E26; --ink:#E7ECF1; --ink-2:#98A5B1;
    --accent:#7FADE0; --locked:#E5B36A; --line:#26303A;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 22px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --paper:#0F141A; --card:#171E26; --ink:#E7ECF1; --ink-2:#98A5B1;
  --accent:#7FADE0; --locked:#E5B36A; --line:#26303A;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 22px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--read);font-size:var(--step-0);line-height:1.62;
  -webkit-text-size-adjust:100%;
  padding:0 20px calc(48px + env(safe-area-inset-bottom));
}

/* ------------------------------------------------------------- header bar */
.bar{
  max-width:720px;margin:0 auto;padding:14px 0 0;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--sans);
}
.bar .brand{font-size:13px;font-weight:600;color:var(--ink-2);letter-spacing:.02em}
.signin{
  display:inline-block;padding:7px 16px;border-radius:999px;text-decoration:none;
  font-size:13px;font-weight:600;color:#fff;background:var(--accent);
  transition:filter .15s ease;
}
.signin:hover,.signin:focus-visible{filter:brightness(1.12)}
.whoami{font-size:12px;color:var(--ink-2)}
.whoami a{color:var(--accent)}
.card.soon{cursor:default}
.card.soon:hover{transform:none;border-color:var(--line);box-shadow:var(--shadow)}

/* ---------------------------------------------------------------- header */
.top{max-width:720px;margin:0 auto;padding:clamp(48px,10vw,88px) 0 8px;text-align:center}
.eyebrow{
  margin:0 0 10px;font-family:var(--sans);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);font-weight:600;
}
h1{
  margin:0;font-family:var(--display);font-weight:600;font-size:var(--step-3);
  line-height:1.04;letter-spacing:-.015em;
}
h1::after{
  content:"";display:block;width:76px;height:3px;margin:18px auto 0;border-radius:2px;
  background:var(--accent);
}
.lede{
  max-width:52ch;margin:22px auto 0;color:var(--ink-2);font-size:var(--step-1);
  line-height:1.55;
}

/* ---------------------------------------------------------------- splash */
/* The intro film, full screen on arrival. Plays once and dissolves. */
.noscroll{overflow:hidden}
.splash{
  position:fixed;inset:0;z-index:50;background:#0d1420;
  opacity:1;transition:opacity .6s ease;
}
.splash.bye{opacity:0;pointer-events:none}
/* contain, not cover: the whole widescreen frame, letterboxed into the
   phone's portrait screen — the film's midnight ground blends into ours */
.splash video{width:100%;height:100%;object-fit:contain}
.splash #snd,.splash #skip{
  position:absolute;bottom:calc(22px + env(safe-area-inset-bottom));border:0;
  cursor:pointer;background:rgba(10,16,24,.55);color:#E7ECF1;
  backdrop-filter:blur(4px);font-family:var(--sans);
}
.splash #snd{left:20px;width:42px;height:42px;border-radius:50%;font-size:17px;line-height:1}
.splash #skip{right:20px;padding:10px 20px;border-radius:999px;font-size:13px;font-weight:600;
  letter-spacing:.04em}
.splash #play-big{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:76px;height:76px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(10,16,24,.6);color:#E7ECF1;font-size:26px;padding-left:6px;
  backdrop-filter:blur(4px);box-shadow:0 4px 24px rgba(0,0,0,.4);
}

/* ----------------------------------------------------------------- group */
main{max-width:720px;margin:0 auto}
.group{margin-top:clamp(38px,7vw,58px)}
.label{
  display:flex;align-items:center;gap:14px;margin:0 0 18px;
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);
}
.label::after{content:"";flex:1;height:1px;background:var(--line)}

/* ------------------------------------------------------------------ card */
.card{
  display:block;position:relative;margin:0 0 16px;padding:22px 22px 20px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);text-decoration:none;color:inherit;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover,.card:focus-visible{
  transform:translateY(-2px);border-color:var(--accent);
  box-shadow:0 2px 4px rgba(27,36,48,.06), 0 12px 30px rgba(27,36,48,.10);
}
.card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.card h3{
  margin:0 0 4px;font-family:var(--display);font-weight:600;
  font-size:var(--step-2);line-height:1.12;letter-spacing:-.01em;
}
.when{
  margin:0 0 10px;font-family:var(--sans);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);
}
.blurb{margin:0 0 16px;color:var(--ink-2);line-height:1.6}
.go{
  font-family:var(--sans);font-size:13px;font-weight:600;color:var(--accent);
  letter-spacing:.01em;
}
.badge{
  display:inline-block;margin:0 0 12px;padding:4px 10px 5px;border-radius:999px;
  font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;
}
.badge.open{background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent)}
.badge.locked{background:color-mix(in srgb,var(--locked) 16%,transparent);color:var(--locked)}

/* ---------------------------------------------------- sign-in attempts */
.attempts{
  max-width:720px;margin:clamp(38px,7vw,58px) auto 0;padding:18px 20px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
}
.attempts .small{margin:0 0 10px;font-family:var(--sans);font-size:12px;color:var(--ink-2)}
.attempts ul{margin:0;padding-left:20px;font-family:var(--sans);font-size:13px}
.attempts li{margin:4px 0}

/* ---------------------------------------------------------------- footer */
footer{
  max-width:720px;margin:clamp(46px,8vw,72px) auto 0;padding-top:22px;
  border-top:1px solid var(--line);
  font-family:var(--sans);font-size:11.5px;color:var(--ink-2);line-height:1.65;
}
footer p{margin:0 0 6px}
footer .small{max-width:46ch}

@media (prefers-reduced-motion:reduce){
  .card{transition:none}
  .card:hover,.card:focus-visible{transform:none}
}