/* Northgem Studios. Shared styles for the legal pages.
   Same system as the main site: Forest ground, Cream field, Rust accent at 5%. */
:root{
  --forest:#1F2B24;
  --forest-2:#18211B;
  --cream:#F3EEE4;
  --rust:#B0512B;
  --rust-ink:#A64C29;
  --line-l:rgba(31,43,36,.14);
  --dim-l:rgba(31,43,36,.68);
  --ease:cubic-bezier(.16,.84,.28,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--cream);color:var(--forest);font-family:'Jost',sans-serif;font-size:17px;line-height:1.72;-webkit-font-smoothing:antialiased}
::selection{background:var(--rust);color:var(--cream)}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--rust);outline-offset:4px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--rust-ink);color:var(--cream);padding:10px 16px;z-index:300;font-weight:600}
.skip:focus{left:16px;top:16px}
.wrap{max-width:760px;margin:0 auto;padding:0 clamp(20px,5vw,32px)}

/* header */
.top{border-bottom:1px solid var(--line-l);position:sticky;top:0;background:rgba(243,238,228,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:10}
.top .bar{max-width:760px;margin:0 auto;padding:16px clamp(20px,5vw,32px);display:flex;justify-content:space-between;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:12px;font-weight:600;letter-spacing:.3em;text-indent:.3em;font-size:15px;text-decoration:none;white-space:nowrap}
.brand svg{width:26px;flex:none;fill:var(--rust)}
.back{font-family:'Spline Sans Mono',monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim-l);text-decoration:none;white-space:nowrap}
.back:hover{color:var(--rust-ink)}

/* masthead */
.mast{padding:clamp(56px,9vw,104px) 0 clamp(32px,4.5vw,48px)}
.kicker{font-family:'Spline Sans Mono',monospace;font-size:11px;letter-spacing:.26em;color:var(--rust-ink);text-transform:uppercase;margin-bottom:20px;display:flex;align-items:center;gap:16px}
.kicker::after{content:"";height:1px;width:48px;background:currentColor;opacity:.4}
h1{font-weight:600;text-transform:uppercase;font-size:clamp(32px,6vw,60px);line-height:1.02;letter-spacing:-.01em;margin-bottom:20px}
.stand{font-size:clamp(17px,2vw,20px);color:var(--dim-l);max-width:54ch}
.updated{font-family:'Spline Sans Mono',monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim-l);margin-top:24px;padding-top:20px;border-top:1px solid var(--line-l)}

/* body */
main{padding-bottom:clamp(64px,10vw,120px)}
h2{font-weight:600;text-transform:uppercase;font-size:clamp(19px,2.6vw,26px);line-height:1.14;letter-spacing:.01em;margin:clamp(40px,6vw,64px) 0 16px;padding-top:clamp(24px,3.4vw,32px);border-top:1px solid var(--line-l);display:flex;gap:16px;align-items:baseline}
h2 .n{font-family:'Spline Sans Mono',monospace;font-size:12px;letter-spacing:.14em;color:var(--rust-ink);flex:none}
h3{font-weight:600;font-size:17px;margin:32px 0 8px;letter-spacing:.01em}
p{margin-bottom:16px;max-width:66ch}
ul,ol{margin:0 0 16px 0;padding-left:0;list-style:none;max-width:66ch}
li{margin-bottom:10px;padding-left:24px;position:relative}
li::before{content:"\25C6";position:absolute;left:0;top:0;font-size:8px;line-height:2.4;color:var(--rust-ink)}
ol{counter-reset:o}
ol li{counter-increment:o}
ol li::before{content:counter(o);font-family:'Spline Sans Mono',monospace;font-size:11px;line-height:1.9;color:var(--rust-ink)}
strong{font-weight:600}
a.inline{color:var(--forest);text-decoration:none;border-bottom:1.5px solid var(--rust);font-weight:500}
a.inline:hover{color:var(--rust-ink)}

/* callouts */
.note{border-left:2px solid var(--rust);padding:4px 0 4px 20px;margin:24px 0;color:var(--dim-l);font-size:16px}
.note p:last-child{margin-bottom:0}
.todo{border:1px solid var(--rust);border-radius:6px;padding:20px 24px;margin:24px 0;background:rgba(176,81,43,.06)}
.todo .lb{font-family:'Spline Sans Mono',monospace;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--rust-ink);display:block;margin-bottom:10px}
.todo p:last-child{margin-bottom:0}
.card{border:1px solid var(--line-l);border-radius:6px;padding:clamp(20px,3.4vw,32px);margin:24px 0;background:rgba(31,43,36,.025)}
.card p:last-child,.card ul:last-child,.card li:last-child{margin-bottom:0}
.card .h{font-family:'Spline Sans Mono',monospace;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--rust-ink);margin-bottom:16px}

/* definition rows */
.dl{border-top:1px solid var(--line-l);margin:24px 0}
.dl .r{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(16px,3vw,32px);padding:16px 0;border-bottom:1px solid var(--line-l)}
.dl .r dt{font-weight:600;font-size:16px}
.dl .r dd{color:var(--dim-l);font-size:16px}
@media(max-width:620px){.dl .r{grid-template-columns:1fr;gap:6px}}

/* footer: mark, wordmark, links, rule, fine print. Centred and symmetric,
   so the four links of unequal width read as one deliberate row. */
footer{background:var(--forest);color:var(--cream);padding:clamp(48px,7vw,80px) 0 clamp(32px,5vw,48px);text-align:center;position:relative;overflow:hidden}
/* the same wood grain as the studio boxes, quieter */
.terrain{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;opacity:.06;contain:paint}
.wood{position:absolute;inset:-10%}
.wood svg{width:100%;height:100%;display:block}
footer .wrap{max-width:760px;position:relative;z-index:1}
/* The global paragraph rule caps width at 66ch. Left in place, it boxes these
   at the left edge and centres their text inside that box rather than inside
   the footer, which reads as a misalignment. Opt them out. */
footer p{max-width:none;margin-left:auto;margin-right:auto;margin-bottom:0}
.f-mark{display:block;width:24px;margin:0 auto 16px;fill:var(--rust)}
.f-name{font-weight:600;font-size:12.5px;letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;color:var(--cream)}
.legal{display:flex;gap:clamp(16px,3.2vw,32px);justify-content:center;flex-wrap:wrap;margin-top:clamp(24px,4vw,32px);font-family:'Spline Sans Mono',monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase}
.legal a{color:rgba(243,238,228,.62);text-decoration:none;padding-bottom:4px;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.legal a:hover{color:var(--cream);border-bottom-color:var(--rust)}
.legal a[aria-current]{color:var(--cream);border-bottom-color:var(--rust)}
.f-rule{height:1px;background:rgba(243,238,228,.16);margin-top:clamp(24px,3.4vw,32px)}
.foot-row{margin-top:clamp(20px,3vw,24px);font-family:'Spline Sans Mono',monospace;font-size:10px;letter-spacing:.14em;color:rgba(243,238,228,.55);line-height:2.2}
.foot-row a{color:rgba(243,238,228,.72);text-decoration:none;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.foot-row a:hover{color:var(--cream);border-bottom-color:var(--rust)}
@media(max-width:520px){.legal{gap:16px 20px}.foot-row{line-height:2.4}}

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