/* Niseko Unlocked — nisekounlocked.com
 *
 * The brand board is the source of truth:
 * ~/Desktop/niseko-unlocked-logo/niseko-unlocked-brand-board.pdf
 *
 * Two deliberate departures from the board, both because the board is written
 * for social layouts and this is a page you read:
 *
 * 1. Headlines are Archivo Expanded 800 SENTENCE CASE, not all caps. A 40px
 *    all-caps sentence is a hook on a reel and a wall of shouting on a page.
 *    All caps is kept for the things that are short and brand-level: the
 *    wordmark, the eyebrows, the section labels, the result base name.
 * 2. Coral appears more than once per layout, because here it's carrying
 *    function rather than decoration: the mark, the primary action, the
 *    progress you've made, and the answer you came for. Nothing else gets it.
 */

:root{
  /* Board palette, verbatim. */
  --night:#131C28;      /* Night Ink */
  --snow:#F6F8F9;       /* Snowpack */
  --powder:#9FB4C4;     /* Powder Shadow — support only: meta, rules, captions */
  --coral:#F4745B;      /* Akebono Coral — the accent */

  /* Derived from Night Ink. Not brand colours, just the two steps of lift a
     dark interface needs to separate a card from its ground. */
  --panel:#1b2634;
  --panel-edge:#2b3a4c;

  --sans:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* font-stretch maps onto Archivo's wdth axis. 125 is the Expanded the board
     specifies; 115 is what the long headlines take, because full Expanded at
     42px runs out of line before the sentence does on a phone. */
  --expanded:125%;
  --wide:115%;
}

*{box-sizing:border-box}
html{color-scheme:dark;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--night);color:var(--snow);
  font-family:var(--sans);font-size:16px;line-height:1.6;min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--coral)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
img{max-width:100%;height:auto}

.wrap{max-width:640px;margin:0 auto;padding:24px 20px 64px}

/* ---- masthead ---------------------------------------------------------- */
.masthead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0 28px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand img{display:block;width:34px;height:34px;border-radius:50%}
.brand .txt{
  font-weight:800;font-stretch:var(--expanded);font-size:13px;
  /* +13% tracking on the wordmark, per the board. */
  letter-spacing:.13em;text-transform:uppercase;line-height:1.2;
}
.brand .txt span{color:var(--coral);display:block}
.tagline{font-family:var(--mono);font-size:11px;color:var(--powder);letter-spacing:.06em;text-align:right}

/* ---- type -------------------------------------------------------------- */
h1,h2{font-weight:800;font-stretch:var(--wide);text-wrap:balance;letter-spacing:-.01em}
h1{font-size:clamp(30px,7vw,42px);line-height:1.12;margin:0 0 14px}
h2{font-size:clamp(22px,5.5vw,28px);line-height:1.25;margin:0 0 20px}
h3{font-weight:600;font-size:18px;margin:0 0 6px}
.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--powder);margin:0 0 10px;
}
.lede{color:var(--snow);margin:0 0 20px;max-width:50ch}
.punch{
  font-weight:600;font-size:clamp(17px,3.6vw,19px);line-height:1.35;
  margin:0 0 24px;max-width:40ch;text-wrap:balance;
}
.sub{color:var(--powder);margin:0 0 28px;max-width:46ch}
.fineprint{font-size:13px;color:var(--powder);margin:14px 0 0;line-height:1.55}

/* ---- controls ---------------------------------------------------------- */
.cta{
  font:inherit;font-weight:800;font-stretch:var(--wide);font-size:17px;letter-spacing:.02em;
  background:var(--coral);color:var(--night);
  border:none;border-radius:12px;padding:16px 28px;cursor:pointer;width:100%;
  display:block;text-align:center;text-decoration:none;
}
.cta:hover{filter:brightness(1.08)}
.cta:focus-visible{outline:2px solid var(--snow);outline-offset:2px}
.cta[disabled]{opacity:.6;cursor:default;filter:none}
.back{font:inherit;background:none;border:none;color:var(--powder);cursor:pointer;padding:8px 0;font-size:14px}
.back:hover{color:var(--coral)}

.card{background:var(--panel);border:1px solid var(--panel-edge);border-radius:14px;padding:20px 22px;margin:18px 0}
.card h3{
  margin:0 0 8px;font-size:12px;font-family:var(--mono);font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:var(--coral);
}
.card p{margin:0}

/* ---- footer ------------------------------------------------------------ */
.foot{
  margin-top:44px;border-top:1px solid var(--panel-edge);padding-top:16px;
  font-family:var(--mono);font-size:11.5px;color:var(--powder);line-height:1.9;
}
.foot a{color:var(--powder)}
.foot a:hover{color:var(--coral)}