/* Guild: design.md as tokens, then the shared parts (nav, buttons, receipts, footer). */
:root { --navy:#13294b; --paper:#e8edf2; --ink:#0f1d33; --slate:#4a5a70; --frost:#eef2f7; --mist:#a9b8cc;
        --saffron:#f2b84b; --saffron-ink:#8a5a00; --rule:rgb(15 29 51 / .18); --rule-n:rgb(238 242 247 / .16);
        --ease:cubic-bezier(.16,1,.3,1); --wrap:1240px; }
* { box-sizing:border-box; margin:0; }
html { background:var(--paper); color:var(--ink); font:400 19px/1.5 "Newsreader", Georgia, serif; -webkit-font-smoothing:antialiased; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
body { overflow-x:clip; }
.wrap { width:min(var(--wrap), 100% - 48px); margin-inline:auto; }
h1, h2, h3, .display { font-family:"Gloock", Georgia, serif; font-weight:400; letter-spacing:-.02em; line-height:1.02; }
.mono { font:400 12px/1.5 "Martian Mono", ui-monospace, monospace; letter-spacing:.04em; }
.dark { background:var(--navy); color:var(--frost); --rule:var(--rule-n); }
.dark .muted, .dark .mono { color:var(--mist); }
.muted { color:var(--slate); }
a { color:inherit; }

/* buttons: square, ink on paper, saffron on navy; magnetic via motion.js */
.btn { display:inline-flex; align-items:center; gap:12px; padding:15px 24px; border-radius:2px; background:var(--ink); color:var(--paper);
       font:500 17px/1 "Newsreader", serif; text-decoration:none; border:0; cursor:pointer; transition:background .15s, color .15s; will-change:transform; }
.btn::after { content:"\2192"; transition:transform .25s var(--ease); }
.btn:hover::after { transform:translateX(4px); }
.btn:hover { background:var(--saffron-ink); }
.dark .btn { background:var(--saffron); color:var(--ink); }
.dark .btn:hover { background:var(--frost); }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline:2px solid var(--saffron); outline-offset:3px; }

/* nav */
.nav { position:absolute; inset:0 0 auto; z-index:5; padding:22px 0; }
.nav .wrap { display:flex; align-items:baseline; gap:32px; border-bottom:1px solid var(--rule); padding-bottom:14px; }
.nav .logo { font:400 26px "Gloock", serif; text-decoration:none; letter-spacing:-.02em; }
.nav .links { display:flex; gap:26px; margin-left:auto; }
.nav .links a { text-decoration:none; font-size:16px; position:relative; }
.nav .links a::after { content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.nav .links a:hover::after, .nav .links a[aria-current]::after { transform:none; }
.nav .apply { color:var(--saffron); }
:not(.dark) > .nav .apply, .nav.on-paper .apply { color:var(--saffron-ink); }

/* receipts: claims carry a source mark; the margin counter rises as they pass */
.claim { background:linear-gradient(transparent 62%, rgb(242 184 75 / .32) 62%) no-repeat; background-size:0 100%; transition:background-size .9s var(--ease); position:relative; cursor:help; }
.claim.seen { background-size:100% 100%; }
.claim sup { font:500 11px "Martian Mono", monospace; color:var(--saffron-ink); margin-left:2px; }
.dark .claim sup { color:var(--saffron); }
.claim .src { position:absolute; left:0; bottom:calc(100% + 8px); width:max-content; max-width:260px; padding:8px 10px; background:var(--ink); color:var(--frost);
              font:400 12px/1.4 "Martian Mono", monospace; opacity:0; transform:translateY(4px); pointer-events:none; transition:opacity .15s, transform .15s; z-index:4; text-align:left; letter-spacing:.02em; }
.dark .claim .src { background:var(--frost); color:var(--ink); }
.claim:hover .src, .claim:focus .src { opacity:1; transform:none; }
#receipts-meter { position:fixed; left:18px; top:50%; transform:translateY(-50%); z-index:6; display:grid; gap:10px; justify-items:center;
                  padding:12px 8px; background:var(--paper); color:var(--ink); border:1px solid var(--rule); text-decoration:none;
                  transition:opacity .4s var(--ease), visibility .4s; }
#receipts-meter.away { opacity:0; visibility:hidden; }
#receipts-meter .n { font:400 22px "Gloock", serif; }
#receipts-meter .ticks { display:grid; gap:4px; }
#receipts-meter i { width:14px; height:3px; background:var(--rule); transition:background .4s var(--ease), transform .4s var(--ease); }
#receipts-meter i.on { background:var(--saffron-ink); transform:scaleX(1.4); }
#receipts-meter .mono { writing-mode:vertical-rl; transform:rotate(180deg); font-size:12px; color:var(--slate); }

/* footer */
footer { background:var(--ink); color:var(--mist); padding:80px 0 36px; font-size:16px; }
footer .cols { display:grid; grid-template-columns:2fr repeat(3, 1fr); gap:40px; padding-bottom:56px; border-bottom:1px solid var(--rule-n); }
footer .brand { font:400 56px/1 "Gloock", serif; color:var(--frost); letter-spacing:-.02em; }
footer h4 { font:400 11px "Martian Mono", monospace; letter-spacing:.06em; color:var(--frost); margin-bottom:14px; }
footer ul { list-style:none; padding:0; display:grid; gap:8px; }
footer a { text-decoration:none; color:var(--mist); transition:color .15s; }
footer a:hover { color:var(--saffron); }
footer .small { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:24px; font-size:14px; }

/* page header for the extra pages */
.page-head { padding:170px 0 90px; }
.page-head h1 { font-size:clamp(3rem, 8vw, 7.5rem); max-width:12ch; }
.page-head p { font-size:1.25rem; max-width:38ch; margin-top:24px; }

@media (max-width:860px) {
  .nav .links a:not(.apply) { display:none; }
  #receipts-meter { left:auto; right:12px; top:auto; bottom:12px; transform:none; grid-auto-flow:column; align-items:center; padding:8px 12px; gap:10px; }
  #receipts-meter .ticks { grid-auto-flow:column; }
  #receipts-meter i { width:3px; height:12px; }
  #receipts-meter i.on { transform:scaleY(1.3); }
  #receipts-meter .mono { writing-mode:horizontal-tb; transform:none; }
  #receipts-meter .n { font-size:18px; }
  footer .cols { grid-template-columns:1fr 1fr; }
  footer .brand { grid-column:1 / -1; }
}