/* srilankaspacerecon.com — one stylesheet for every page.
   World: a domain record slip. Cool grey ground, ink type, one moss accent, ruled record.
   :WHY? NO THEME TOGGLE AND NO SCRIPT. The page follows prefers-color-scheme only, so it ships
   no JavaScript and writes nothing to the visitor's browser; the privacy page can then say so
   without a caveat. */
@font-face{font-family:"Atkinson Next";src:url("/assets/fonts/atkinson-next-var-latin.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Atkinson Mono";src:url("/assets/fonts/atkinson-mono-var-latin.woff2") format("woff2");font-weight:200 800;font-display:swap}

:root{
  color-scheme:light;
  --ground:#E9ECEF;
  --sheet:#F6F7F8;
  --ink:#14181D;
  --ink-2:#47505A;
  --rule:#C3CAD1;
  --accent:#2C6A4D;
  --accent-ink:#F6F7F8;
  --sel:#CFE3D7;
  --sans:"Atkinson Next",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Atkinson Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --ground:#101418;
    --sheet:#171C21;
    --ink:#E5E9ED;
    --ink-2:#A2ACB6;
    --rule:#2E363E;
    --accent:#86C9A6;
    --accent-ink:#101418;
    --sel:#2B4A3B;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* :WHY? THE GROUND IS PAINTED ON html AND ON EACH LANDMARK, not only on body: a reader (or the
   design detector) that skips the body background still sees the text on its real colour. */
html{background:var(--ground);color:var(--ink)}
.top,main,footer{background:var(--ground)}
body{
  margin:0;min-height:100vh;display:flex;flex-direction:column;
  background:var(--ground);color:var(--ink);
  font:400 1.0625rem/1.6 var(--sans);
  font-kerning:normal;text-rendering:optimizeLegibility;
}
::selection{background:var(--sel);color:var(--ink)}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.mono{font-family:var(--mono);font-variant-ligatures:none}

.wrap{width:min(68rem,100% - 2.5rem);margin-inline:auto}

/* top line: the mark and the address, nothing else */
.top{padding-block:1.5rem}
.top .wrap{display:flex;align-items:center;gap:.75rem}
.top a{display:inline-flex;align-items:center;gap:.7rem;color:var(--ink);text-decoration:none;font-family:var(--mono);font-size:.95rem}
.top svg{width:28px;height:28px;flex:none}

/* the slip */
main{flex:1;padding-block:clamp(1.5rem,6vw,4.5rem) clamp(3rem,8vw,6rem)}
.slip{
  background:var(--sheet);
  border:1px solid var(--rule);
  border-radius:6px;
  box-shadow:0 1px 2px rgb(20 24 29 / .05),0 12px 32px -18px rgb(20 24 29 / .22);
  padding:clamp(1.5rem,5vw,4rem);
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(2rem,5vw,4.5rem);
}
@media (prefers-color-scheme:dark){.slip{box-shadow:0 1px 2px rgb(0 0 0 / .3),0 14px 36px -18px rgb(0 0 0 / .6)}}

.statement h1{
  margin:0 0 1.5rem;
  font-size:clamp(1.75rem,1.1rem + 2.6vw,2.9rem);
  line-height:1.16;font-weight:650;letter-spacing:-.018em;
  text-wrap:balance;max-width:22ch;
}
.statement{container-type:inline-size}
/* :WHY? THE DOMAIN SITS ON ITS OWN LINE, SIZED TO THE COLUMN. It is one 22-character word in a
   monospace face (~13.2em wide), so at the H1 size it broke mid-word ("srilankaspacereco / n.com").
   7.4cqi keeps it whole at every column width; overflow-wrap stays only as a last resort. */
.statement h1 .domain{
  display:block;font-size:min(1em,7.4cqi);
  font-family:var(--mono);font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;overflow-wrap:anywhere;
}
.statement p{margin:0 0 1rem;max-width:58ch;color:var(--ink);font-size:1.125rem}
.statement p.quiet{color:var(--ink-2);font-size:1.0625rem}
.next{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--rule)}
.next p{margin:0;font-size:1.0625rem;max-width:52ch}
.next a{font-weight:600}

/* the record */
.record h2{margin:0 0 .75rem;font-size:1rem;font-weight:700;color:var(--ink)}
.record dl{margin:0}
.record div{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:.75rem;padding:.85rem 0;border-bottom:1px solid var(--rule)}
.record div:first-child{border-top:1px solid var(--ink)}
.record dt{font-family:var(--mono);font-size:.875rem;color:var(--ink-2);padding-top:.12rem}
.record dd{margin:0;font-size:1rem;line-height:1.5;overflow-wrap:break-word}
.record dd .mono{font-size:.95rem}

/* footer */
footer{border-top:1px solid var(--rule);padding-block:1.75rem 2.5rem;font-size:.9375rem;color:var(--ink-2)}
footer .wrap{display:grid;gap:.9rem}
footer p{margin:0;max-width:80ch}
footer nav{display:flex;flex-wrap:wrap;gap:.35rem 1.4rem}
footer nav a{color:var(--ink)}

/* document pages (privacy, terms, 404) */
.doc{max-width:44rem}
.doc h1{font-size:clamp(1.7rem,1.3rem + 1.6vw,2.4rem);line-height:1.2;letter-spacing:-.015em;margin:0 0 .6rem;font-weight:650;text-wrap:balance}
.doc h2{font-size:1.15rem;margin:2.2rem 0 .5rem;font-weight:700}
.doc p,.doc li{max-width:68ch}
.doc .meta{color:var(--ink-2);font-size:.95rem;margin-bottom:1.5rem}
.doc ul{padding-left:1.2rem}
.doc li+li{margin-top:.35rem}
.doc code{font-family:var(--mono);font-size:.9em;overflow-wrap:anywhere}
.back{display:inline-block;margin-bottom:1.75rem;font-size:.95rem}

@media (max-width:820px){
  .slip{grid-template-columns:minmax(0,1fr)}
  .record div{grid-template-columns:1fr;gap:.2rem}
}
@media print{
  body{background:#fff}
  .slip{box-shadow:none}
}