/* =====================================================================
   FORGEDWEB — shared styles for the legal pages.

   The home page keeps its CSS inline so the first paint needs no second
   request. These three pages are read rarely and share one stylesheet
   instead, because three copies of the same rules is three places to
   forget when the palette changes.

   Same world as the home page: graphite ground, brushed grain, hairline
   edges, one hard orange. Set as prose rather than as a document dump —
   a terms page nobody can read is the same as no terms page.
   ===================================================================== */

:root{
  --void:#0b0c0e;
  --panel:#131619;
  --panel-2:#1b1f24;
  --line:#2b3138;
  --bone:#eeece8;
  --soft:#c4c9cf;
  --dim:#8f959d;
  --signal:#f24f1d;
  --signal-deep:#c73a10;

  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --display:'Anton','Archivo Narrow','Arial Narrow',Impact,system-ui,sans-serif;
  --body:'Archivo','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --cut:14px;
}

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--void);
  color:var(--bone);
  font-family:var(--body);
  font-size:1.02rem;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--signal); color:#fff; padding:.9rem 1.4rem;
  font-weight:600; text-decoration:none;
}
.skip:focus{ left:0 }

.mark{ display:block; flex:none; fill:currentColor }

/* --- header, identical in behaviour to the home page ---------------- */
.top{
  position:fixed; inset:0 0 auto 0; z-index:50;
  background:var(--panel); color:var(--bone);
  display:flex; align-items:center; gap:1rem;
  padding:.62rem clamp(.9rem,3vw,2rem);
  border-bottom:1px solid var(--line);
}
.top__id{ display:flex; align-items:center; gap:.62rem; text-decoration:none; color:inherit; margin-right:auto }
.top__id .mark{ width:26px; height:26px }
.top__name{
  font-family:var(--display); font-size:1.02rem; letter-spacing:.06em;
  text-transform:uppercase; line-height:1;
}
.top__where{
  display:none;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.2em;
  text-transform:uppercase; opacity:.62; margin-left:.3rem;
}
@media (min-width:660px){ .top__where{display:block} }

/* --- sheared buttons, never pills ----------------------------------- */
.btn{
  position:relative; z-index:0;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.85rem 1.7rem;
  font-family:var(--body); font-weight:700;
  font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; color:var(--bone);
  border:0; background:none; cursor:pointer;
  transition:transform 150ms var(--ease-out);
}
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--signal);
  clip-path:polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
  transition:background 150ms var(--ease-soft);
}
.btn:hover::before{ background:var(--signal-deep) }
.btn:active{ transform:scale(.97) }
.btn:focus-visible{ outline:3px solid var(--bone); outline-offset:3px }
.top .btn{ padding:.6rem 1.05rem; font-size:.74rem; --cut:9px }

/* --- the page ------------------------------------------------------- */
.wrap{
  width:min(860px,100%);
  margin-inline:auto;
  padding-inline:clamp(1.15rem,5vw,3rem);
}

.head{
  position:relative; overflow:hidden;
  background:var(--void);
  padding:clamp(6.5rem,15vh,8.5rem) 0 clamp(2rem,5vh,3rem);
}
.head::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(-45deg, rgba(255,255,255,.022) 0 2px, transparent 2px 6px),
    linear-gradient(152deg, rgba(242,79,29,.12), rgba(242,79,29,.03) 26%, transparent 52%);
}
.head .wrap{ position:relative; z-index:1 }

.stencil{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--signal); margin:0 0 1.2rem;
}
.stencil::after{ content:''; height:2px; flex:1; max-width:120px; background:currentColor; opacity:.35 }

h1{
  font-family:var(--display); text-transform:uppercase; font-weight:400;
  font-size:clamp(2.4rem,7vw,4.2rem); line-height:.92; letter-spacing:.005em;
  margin:0 0 1rem;
}
.updated{ font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; color:var(--dim); margin:0 }

.tape{
  height:26px; width:100%; position:relative;
  background:repeating-linear-gradient(-45deg, var(--panel-2) 0 10px, var(--void) 10px 20px);
  border-block:1px solid var(--line);
}
.tape::after{
  content:''; position:absolute; left:0; top:-1px; width:min(190px,34vw); height:1px;
  background:var(--signal);
}

main{ padding-block:clamp(2.5rem,7vh,4.5rem) }

h2{
  font-family:var(--display); text-transform:uppercase; font-weight:400;
  font-size:clamp(1.3rem,3vw,1.85rem); line-height:1; letter-spacing:.01em;
  margin:2.8rem 0 .9rem; padding-top:1.6rem;
  border-top:1px solid var(--line);
}
main > .wrap > h2:first-child{ margin-top:0; padding-top:0; border-top:0 }

h3{
  font-family:var(--body); font-weight:700; font-size:1rem;
  margin:1.6rem 0 .4rem; color:var(--bone);
}

p,li{ color:var(--soft) }
p{ margin:0 0 1rem }
ul{ margin:0 0 1rem; padding-left:1.15rem }
li{ margin:0 0 .5rem }
li::marker{ color:var(--signal) }

a{ color:var(--bone); text-decoration:underline; text-decoration-color:var(--signal); text-underline-offset:3px }
a:hover{ color:var(--signal) }

strong{ color:var(--bone) }

/* A plain-language summary at the top of each page. The legal text is
   the binding part, but nobody should have to read it to get the gist. */
.gist{
  background:var(--panel); border:1px solid var(--line);
  border-top:2px solid var(--signal);
  padding:clamp(1.2rem,3vw,1.8rem);
  margin:0 0 2.5rem;
}
.gist p:last-child{ margin-bottom:0 }
.gist strong{ color:var(--bone) }

.note{
  font-size:.86rem; color:var(--dim);
  border-left:2px solid var(--line); padding-left:1rem; margin:1.6rem 0;
}

/* --- footer --------------------------------------------------------- */
footer{
  background:var(--void); color:var(--dim);
  border-top:1px solid var(--line);
  padding:clamp(2.5rem,6vh,3.5rem) 0 clamp(2rem,5vh,3rem);
}
.foot{ display:flex; flex-wrap:wrap; gap:.8rem 1.6rem; align-items:center }
.foot .mark{ width:30px; height:30px; color:var(--bone) }
.foot__txt{ font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; margin-right:auto }
.foot a{ color:var(--dim); text-decoration:none; border-bottom:1px solid var(--line); font-size:.86rem }
.foot a:hover{ color:var(--bone) }

/* --- the notice bar -------------------------------------------------- */
/* Deliberately not a consent wall. This site sets no cookies and runs no
   analytics, so there is nothing to consent to — blocking the page to
   ask permission for nothing would be theatre. It states the fact once
   and gets out of the way. */
.notice{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--panel); border-top:1px solid var(--line);
  padding:.9rem clamp(.9rem,3vw,2rem);
  display:flex; flex-wrap:wrap; align-items:center; gap:.7rem 1.2rem;
  transform:translateY(0);
  transition:transform 320ms var(--ease-out), opacity 260ms var(--ease-soft);
}
.notice[hidden]{ display:none }
.notice.is-going{ transform:translateY(110%); opacity:0 }
.notice p{ margin:0; font-size:.84rem; color:var(--soft); flex:1 1 20rem }
.notice a{ color:var(--bone) }
.notice .btn{ padding:.5rem 1.1rem; font-size:.7rem; --cut:8px }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important }
}