/* Shared styling for the pages that are not the landing page: imprint,
 * privacy, 404. Same palette and typography as index.html, no stage, no card,
 * no scroll choreography.
 *
 * index.html keeps its own inline <style> untouched on purpose — its geometry
 * and choreography are tuned against the artwork and must not be refactored
 * into a shared file.
 */

:root{
  --char:#21211F;
  --cyan:#5CE1E6;
  --white:#FFFFFF;
  --violet:#CB6CE6;
  --font:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;

  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.55'/></svg>");
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--char);color:var(--white);
  font-family:var(--font);font-weight:500;
  position:relative;
  /* dvh, so a mobile URL bar sliding in does not clip the last line. vh first
     as the fallback for browsers without dvh. */
  min-height:100vh;
  min-height:100dvh;
}
/* the same paper grain as the landing page, at the same strength */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:var(--grain);opacity:.045;
}
a{color:var(--cyan)}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}

main{position:relative;z-index:1;padding:clamp(40px,7vh,72px) 24px clamp(40px,8vh,80px)}
.wrap{max-width:62ch;margin:0 auto}

/* the violet BCKDOOR block, doubling as the link home */
.mark{
  display:inline-block;background:var(--violet);color:var(--char);
  padding:6px 14px;font-weight:900;letter-spacing:-.05em;
  font-size:clamp(26px,6vw,44px);line-height:1;text-decoration:none;
}
.mark:hover{background:var(--cyan)}

h1{
  margin:22px 0 0;font-size:clamp(28px,7vw,56px);font-weight:900;
  letter-spacing:-.035em;line-height:1;color:var(--cyan);
}
h2{
  margin:0 0 4px;font-size:clamp(22px,4.4vw,34px);font-weight:900;
  letter-spacing:-.03em;line-height:1.05;color:var(--cyan);
}
h3{
  margin:24px 0 0;font-size:clamp(16px,2.6vw,19px);font-weight:900;
  letter-spacing:-.02em;color:var(--violet);
}
.rule{height:4px;background:var(--violet);margin:0 0 18px}
section{margin-top:clamp(36px,6vh,60px)}

/* long unbroken tokens in legal copy — email addresses, article references,
   code spans — must wrap rather than push the column sideways */
p,li,dd,dt,td,th,.todo{overflow-wrap:anywhere}
code{word-break:break-word}

p,li{font-size:clamp(15px,2.2vw,17px);line-height:1.65;color:rgba(255,255,255,.82)}
p{margin:14px 0 0}
ul,ol{margin:14px 0 0;padding-left:22px}
li{margin-top:6px}
strong{color:var(--white);font-weight:900}
dl{margin:16px 0 0}
dt{font-weight:900;font-size:clamp(16px,2.6vw,19px);letter-spacing:-.02em;margin-top:18px;color:var(--violet)}
dd{margin:4px 0 0;font-size:clamp(15px,2.2vw,17px);line-height:1.6;color:rgba(255,255,255,.82)}

.meta{font-size:13px;color:rgba(255,255,255,.62);margin-top:10px}

/* Unmissable on purpose: every one of these has to be filled in or deleted
   before the pages are fit to publish. */
.todo{
  display:inline-block;border:2px dashed var(--violet);
  padding:1px 7px;margin:2px 0;
  font-weight:900;font-size:.92em;letter-spacing:.02em;
  color:var(--violet);background:rgba(203,108,230,.1);
}
.todo-block{
  display:block;border:2px dashed var(--violet);background:rgba(203,108,230,.1);
  padding:14px 16px;margin-top:14px;
}
.todo-block p{margin:8px 0 0;color:rgba(255,255,255,.82)}
.todo-block p:first-child{margin-top:0}

/* the "this is not legal advice" box */
.notice{
  border:4px solid var(--violet);padding:clamp(18px,4vw,26px);
  margin-top:clamp(28px,5vh,44px);
}
.notice h2{font-size:clamp(18px,3.4vw,24px);color:var(--white);margin-bottom:8px}
.notice p{margin-top:8px}
.notice p:first-of-type{margin-top:0}

table{border-collapse:collapse;width:100%;margin-top:16px;font-size:clamp(14px,2vw,16px)}
/* .5 measured 2.28:1 against --char, under the 3:1 AA floor for a border that
   you need in order to read the table. .7 is 3.26:1. */
th,td{border:2px solid rgba(203,108,230,.7);padding:8px 10px;text-align:left;vertical-align:top;line-height:1.5}
th{color:var(--violet);font-weight:900}
td{color:rgba(255,255,255,.82)}
.scroller{overflow-x:auto}

/* padding on the element, rule on the inner .wrap, so the rule lines up with
   the body copy above it */
footer{position:relative;z-index:1;padding:0 24px clamp(28px,5vh,48px)}
footer .wrap{
  margin-top:clamp(36px,6vh,60px);
  border-top:4px solid var(--violet);padding-top:16px;
  font-size:13px;line-height:1.6;color:rgba(255,255,255,.62);
}
footer a{text-decoration:underline}
footer p{font-size:13px;color:inherit;margin:0 0 6px}

/* 404 */
.lost{min-height:78vh;min-height:78dvh;display:flex;flex-direction:column;justify-content:center}
.lost h1{font-size:clamp(40px,12vw,104px);color:var(--white);letter-spacing:-.05em}
.lost .sub{color:var(--cyan);font-weight:900;font-size:clamp(20px,4.5vw,32px);letter-spacing:-.03em;margin-top:10px}
.back{
  /* align-self, not display:inline-block — .lost is a flex column, so a block
     child would otherwise stretch the button across the whole measure */
  align-self:flex-start;margin-top:28px;
  border:2px solid var(--cyan);background:var(--cyan);color:var(--char);
  font-weight:900;font-size:16px;padding:14px 22px;text-decoration:none;
}
.back:hover{background:var(--violet);border-color:var(--violet);color:var(--char)}

/* ---------------- responsive ---------------- */

/* Phones. The 24px gutter is a lot of a 320px screen, and the boxed elements
   (.notice, .todo-block, table cells) each add their own padding on top. */
@media (max-width:520px){
  main{padding:clamp(28px,5vh,44px) 18px clamp(32px,6vh,56px)}
  footer{padding-left:18px;padding-right:18px}
  .notice{padding:16px 15px}
  .todo-block{padding:12px 13px}
  th,td{padding:7px 9px}
  section{margin-top:clamp(30px,5vh,44px)}
  ul,ol{padding-left:19px}
}
@media (max-width:360px){
  main{padding-left:14px;padding-right:14px}
  footer{padding-left:14px;padding-right:14px}
}

/* Landscape phones: ~390px of height, most of it eaten by browser chrome.
   Centring the 404 vertically in 78dvh stops making sense there. */
@media (max-height:520px) and (orientation:landscape){
  .lost{min-height:0;justify-content:flex-start}
  .lost h1{font-size:clamp(32px,8vw,56px)}
  main{padding-top:clamp(20px,4vh,32px)}
}

/* The dashed TODO markers are decorative. Their borders survive a printout as
   noise, and nobody prints a page to read a placeholder. */
@media print{
  body::before{display:none}
  body{background:#fff;color:#000}
  main,footer{padding:0}
  h1,h2,h3,dt,.mark{color:#000}
  p,li,dd,td{color:#000}
  .mark{background:none;border:2px solid #000}
  .todo,.todo-block{background:none;border-color:#000;color:#000}
  .notice{border-color:#000}
  th,td{border-color:#000}
  a{color:#000}
}