/* ============================================================================
   legal.css - privacy.html + cookies.html
   Aligned to the UrenTerug brand book 2026-09-02. Previously these pages ran a
   RoboNuggets-flavoured sheet: light-only, oversized display H1, and a Doto
   accent word in the headline. That last one is the signature move the brand
   book explicitly reserves for RoboNuggets - UrenTerug's accent word is Outfit
   800 in accent colour, and Doto is restricted to numerals. Token names below
   mirror index.html so the two stylesheets stay comparable.
   ========================================================================= */

/* ---- Tokens. Dark is the default layer, same as index.html. -------------- */
:root{
  --paper:#131311;
  --paper-2:#24221C;
  --ink:#E8E2D2;
  --ink-soft:#B8B2A2;
  --ink-faint:#8D8775;
  --rule:#332E27;
  --accent:#FF6B1A;
  --accent-text:#FF6B1A;
  --shadow-col:#000;
  --dot-color:rgba(255,146,84,.10);
  --grain:.05;
  --nav-bg:rgba(19,19,17,0);--nav-bg-solid:rgba(19,19,17,.92);
  --theme-color:#131311;
  /* Footer ground is fixed, not theme-relative - same rule as index.html, so
     both pages close on the same charcoal the main site does. */
  --foot-bg:#1C1A16;
  --foot-text:#FAF8F2;
  --foot-soft:#B8B2A2;
  --foot-rule:#332E27;
  --rad:8px;
  --max:1120px;
  --gutter:clamp(20px,5vw,64px);
  --display:'Outfit',sans-serif;
  --pixel:'Doto','Outfit',monospace;
}
[data-theme="light"]{
  --paper:#F2EFE8;
  --paper-2:#FAF8F2;
  --ink:#1C1A16;
  --ink-soft:#4A463C;
  --ink-faint:#6F6A5C;
  --rule:#D8D3C6;
  --shadow-col:#1C1A16;
  --dot-color:rgba(255,104,26,.16);
  --grain:.055;
  --nav-bg:rgba(242,239,232,0);--nav-bg-solid:rgba(242,239,232,.92);
  --theme-color:#F2EFE8;
}

/* ---- Base ---------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--display);font-size:17px;line-height:1.65;
  transition:background .2s,color .2s;
}
/* Two texture passes, both lifted from index.html: the orange dot field is the
   brand's recognisable ground, the grain sits on top to keep flat areas from
   reading as plastic. Fixed, so neither scrolls against the content. */
body::before,body::after{content:'';position:fixed;inset:0;pointer-events:none}
body::before{
  background-image:radial-gradient(circle,var(--dot-color) 1.3px,transparent 1.9px);
  background-size:26px 26px;opacity:.55;z-index:0;
}
body::after{
  opacity:var(--grain);z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
.wrap{width:min(var(--max),calc(100% - 2 * var(--gutter)));margin-inline:auto;position:relative;z-index:1}

/* ---- Headings. Brand book: Outfit 600 across H1/H2/H3, accent word 800. --- */
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.03em;line-height:1.04}

/* ---- Nav ----------------------------------------------------------------- */
.legal-nav{
  border-bottom:1px solid transparent;background:var(--nav-bg);
  position:sticky;top:0;z-index:5;backdrop-filter:blur(12px);
}

@media(prefers-reduced-motion:reduce){.legal-nav{transition:none}}
.nav-in{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{font-weight:800;font-size:1.15rem;text-decoration:none;color:var(--ink)}
.logo span{color:var(--accent);font-weight:400}
.nav-actions{display:flex;align-items:center;gap:12px}
.back{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);font-weight:600;transition:color .2s,border-color .2s}
.back:hover{color:var(--accent-text);border-color:var(--accent-text)}
.lang-switch{display:flex;border:1px solid var(--ink);border-radius:var(--rad);overflow:hidden}
.lang-switch button{border:0;background:transparent;padding:8px 10px;font:700 .72rem var(--display);color:var(--ink);cursor:pointer;transition:background .15s,color .15s}
.lang-switch button.on{background:var(--ink);color:var(--paper)}
.theme-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;flex:none;
  background:var(--paper-2);color:var(--ink);
  border:2px solid var(--ink);border-radius:var(--rad);
  font-size:1rem;line-height:1;cursor:pointer;
  transition:background .15s,color .15s,transform .12s,box-shadow .12s;
}
/* Touch targets (2026-09-11): 44px fingertip target on coarse pointers only.
   See the matching block in index.html for the reasoning. */
@media (pointer:coarse){
  .theme-btn{width:44px;height:44px;font-size:1.15rem}
  .lang-switch button{padding:14px 17px}
}

.theme-btn:hover{background:var(--accent);color:#1C1A16;transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--shadow-col)}
.theme-btn:active{transform:translate(1px,1px);box-shadow:0 0 0 var(--shadow-col)}

/* ---- Page head ----------------------------------------------------------- */
main{padding:clamp(64px,9vw,112px) 0 100px;position:relative;z-index:1}
.eyebrow{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:18px}
/* The section number is a numeral, so Doto is correct here - this is the one
   place on these pages the pixel face belongs. */
.eyebrow b{font-family:var(--pixel);font-variation-settings:'ROND' 0,'wght' 900;color:var(--accent-text);margin-right:12px}
h1{font-size:clamp(2.4rem,3.5vw,3.1rem);letter-spacing:-.02em;line-height:1.06;max-width:18ch;margin-bottom:28px}
/* Accent word: Outfit 800, accent colour. NOT Doto - see file header. */
h1 em{font-family:var(--display);font-style:normal;font-weight:800;color:var(--accent-text)}
.intro{font-size:clamp(1.08rem,1.7vw,1.28rem);color:var(--ink-soft);max-width:62ch;margin-bottom:52px}
.notice{
  border:1.5px solid var(--ink);background:var(--paper-2);border-radius:var(--rad);
  padding:20px 22px;box-shadow:5px 5px 0 var(--shadow-col);max-width:72ch;margin-bottom:58px
}
.notice strong{display:block;margin-bottom:4px}
.notice a{color:inherit}

/* ---- Body sections ------------------------------------------------------- */
.legal-grid{display:grid;grid-template-columns:minmax(170px,.34fr) minmax(0,1fr);gap:44px;border-top:1px solid var(--rule);padding:34px 0}
.legal-grid h2{font-size:1.2rem;line-height:1.25}
.legal-copy{max-width:70ch;color:var(--ink-soft)}
.legal-copy p+p,.legal-copy ul+p,.legal-copy p+ul{margin-top:14px}
.legal-copy ul{padding-left:20px}
.legal-copy li+li{margin-top:7px}
.legal-copy li::marker{color:var(--accent-text)}
.legal-copy strong{color:var(--ink)}
.legal-copy a{color:var(--ink);text-decoration-color:var(--accent);text-underline-offset:3px}
.legal-copy a:hover{color:var(--accent-text)}
.meta{font-size:.82rem;color:var(--ink-faint);border-top:1px solid var(--rule);padding-top:24px;margin-top:30px}

/* ---- Footer -------------------------------------------------------------- */
footer{background:var(--foot-bg);color:var(--foot-soft);border-top:1px solid var(--foot-rule);padding:28px 0 44px;font-size:.82rem;position:relative;z-index:1}
.foot{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.foot a{color:var(--foot-text);text-underline-offset:3px;transition:color .2s}
.foot a:hover{color:var(--accent-text)}

[data-lang][hidden]{display:none}

/* ---- Pointer-only affordances. Same reasoning as index.html: a lift that
   sticks after a tap reads as broken, not as feedback. -------------------- */
@media (hover:none),(pointer:coarse){
  .theme-btn:hover{transform:none;box-shadow:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

@media(max-width:680px){
  .nav-in{min-height:64px}
  .back{font-size:.82rem}
  .legal-grid{grid-template-columns:1fr;gap:12px}
  .legal-grid h2{font-size:1.05rem}
  .nav-actions{gap:8px}
  main{padding-top:54px}
}