/* Haps — riso-deck web. Ink linework on a flat plate, hard colour plates for
   elevation, never a blur. Mirrors lib/theme/haps_tokens.dart. */

:root{
  --punch:#FF3E8A;   /* points, the leader, buttons that advance */
  --ruin:#2C3EF0;    /* straffen, only straffen */
  --lager:#FFC93C;   /* whose turn it is */
  --soda:#3FD3AE;    /* packs and purchases */
  --ink:#17121F;     /* every line, every letter */
  --news:#ECE7EF;    /* app background */
  --paper:#FFFFFF;

  --ink60:rgba(23,18,31,.60);
  --ink30:rgba(23,18,31,.30);

  --display:"Bricolage Grotesque", system-ui, -apple-system, sans-serif;
  --ui:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --scrawl:"Caveat", "Bricolage Grotesque", cursive;

  --edge:3px;        /* ink outline */
  --plate:5px;       /* hard elevation offset */
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

body{
  background:var(--news);
  color:var(--ink);
  font-family:var(--ui);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding:clamp(20px,5vw,56px) 20px 72px;
}

.wrap{max-width:660px;margin:0 auto}

/* ---- wordmark ---- */
.brand{
  display:inline-block;
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(30px,7vw,44px);
  letter-spacing:-.04em;
  line-height:1;
  color:var(--ink);
  text-decoration:none;
}
.brand .dot{color:var(--punch)}

.scrawl{
  font-family:var(--scrawl);
  font-weight:700;
  font-size:1.5em;
  color:var(--ruin);
  display:inline-block;
  transform:rotate(-3deg);
  line-height:1;
}

/* ---- hero / plates ---- */
.plate{
  background:var(--paper);
  border:var(--edge) solid var(--ink);
  border-radius:16px 22px 15px 20px / 20px 15px 22px 16px;
  box-shadow:var(--plate) var(--plate) 0 var(--ink);
  padding:clamp(22px,5vw,36px);
}
.plate + .plate{margin-top:36px}

.plate.punch{box-shadow:var(--plate) var(--plate) 0 var(--punch)}
.plate.ruin{box-shadow:var(--plate) var(--plate) 0 var(--ruin)}
.plate.lager{box-shadow:var(--plate) var(--plate) 0 var(--lager)}
.plate.soda{box-shadow:var(--plate) var(--plate) 0 var(--soda)}

header.top{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:36px;
}
nav.top-nav{display:flex;gap:18px;font-family:var(--ui);font-weight:600;font-size:15px}
nav.top-nav a{color:var(--ink60);text-decoration:none;border-bottom:2px solid transparent}
nav.top-nav a:hover,nav.top-nav a[aria-current]{color:var(--ink);border-bottom-color:var(--punch)}

h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(32px,8vw,52px);line-height:1.02;
  letter-spacing:-.045em;margin:.1em 0 .35em;
}
h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(21px,4.5vw,27px);letter-spacing:-.03em;
  line-height:1.1;margin:0 0 .5em;
}
h3{
  font-family:var(--ui);font-weight:600;font-size:17px;
  margin:1.4em 0 .3em;
}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
.lead{font-size:clamp(18px,2.6vw,21px);color:var(--ink);line-height:1.5}

a{color:var(--ruin);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:2px}
a:hover{color:var(--ink)}

.tag{
  display:inline-block;font-family:var(--ui);font-weight:600;font-size:13px;
  color:var(--ink);background:var(--lager);
  border:2px solid var(--ink);border-radius:8px 11px 7px 10px;
  padding:3px 10px;line-height:1.3;
}

/* ---- buttons ---- */
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ui);font-weight:600;font-size:16px;
  text-decoration:none;cursor:pointer;
  padding:12px 20px;
  border:var(--edge) solid var(--ink);
  border-radius:13px 17px 12px 16px / 16px 12px 17px 13px;
  background:var(--paper);color:var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .06s ease, box-shadow .06s ease;
}
.btn.primary{background:var(--punch);color:var(--paper)}
.btn:hover{transform:translate(1px,1px);box-shadow:3px 3px 0 var(--ink)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}

/* ---- lists / meta ---- */
ul.plain{list-style:none;margin:0 0 1em;padding:0}
ul.plain li{position:relative;padding-left:22px;margin-bottom:.5em}
ul.plain li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:9px;height:9px;background:var(--punch);
  border:2px solid var(--ink);border-radius:3px 4px 2px 4px;
}

.meta{font-size:14px;color:var(--ink60)}
.divider{height:var(--edge);background:var(--ink);border:0;margin:32px 0;
  border-radius:2px;opacity:.9}

.mail{font-family:var(--display);font-weight:800;font-size:clamp(20px,4vw,26px);
  letter-spacing:-.03em}

footer.foot{margin-top:48px;font-size:14px;color:var(--ink60);text-align:center;line-height:1.7}
footer.foot a{color:var(--ink60)}

/* prose spacing for the policy pages */
.prose h2{margin-top:1.6em}
.prose h2:first-child{margin-top:0}