/* ==========================================================================
   DIGITAL SOCKET — shared stylesheet for the legal documents
   (privacy.html, terms.html)

   The landing page is deliberately a single self-contained file; these two
   documents share this stylesheet instead, so there is one source of truth for
   both. Tokens are kept identical to index.html — if you change a colour or a
   typeface there, change it here too.

   Same register: warm paper, one vertical spine in the gutter between columns
   3 and 4, hairline rules, no cards, nothing centred.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, p, ul, ol, li, dl, dd { margin: 0; }

:root{
  color-scheme: light dark;

  --paper:      #F2F1ED;
  --paper-2:    #E9E8E3;
  --ink:        #121311;
  --ink-70:     #4A4C47;
  --ink-45:     #6E706A;
  --rule:       #B9B8B1;
  --signal:     #C33A0E;
  --band:       var(--paper);

  --gutter:     clamp(20px, 4vw, 56px);
  --maxw:       1320px;
  --gap:        24px;
  --content-w:  min(100% - (var(--gutter) * 2), var(--maxw));
  --col:        calc((var(--content-w) - (11 * var(--gap))) / 12);
  --pad-r:      calc((100% - var(--content-w)) / 2);
  --spine-x:    calc(((100% - var(--content-w)) / 2) + (3 * var(--col)) + (2.5 * var(--gap)) - 0.5px);
  --spine-c:    calc(var(--spine-x) + 0.5px);

  --sp-2: 16px; --sp-3: 24px; --sp-4: 40px;
  --sp-5: 64px; --sp-6: 96px; --sp-7: clamp(96px, 13vh, 176px);

  --ap: 15px;
  --conn: 56px;

  --ease:   cubic-bezier(.16, 1, .3, 1);
  --t-mid:  260ms;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#121310; --paper-2:#1A1B18; --ink:#ECEBE5;
    --ink-70:#A9AAA3; --ink-45:#8A8C85;
    --rule:#3F413A; --signal:#E4552A;
  }
}
:root[data-theme="dark"]{
  --paper:#121310; --paper-2:#1A1B18; --ink:#ECEBE5;
  --ink-70:#A9AAA3; --ink-45:#8A8C85;
  --rule:#3F413A; --signal:#E4552A;
}
:root[data-theme="light"]{
  --paper:#F2F1ED; --paper-2:#E9E8E3; --ink:#121311;
  --ink-70:#4A4C47; --ink-45:#6E706A;
  --rule:#B9B8B1; --signal:#C33A0E;
}

html{ background: var(--paper); }
body{
  background: var(--paper); color: var(--ink);
  font-family: "Newsreader", Georgia, serif;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

.grid{
  display: grid;
  width: var(--content-w);
  margin-inline: auto;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}

/* ---------- type ---------- */
.h2{
  font-family: "Archivo", sans-serif;
  font-variation-settings: "wdth" 104, "wght" 500;
  font-size: clamp(1.625rem, 1.1rem + 1.9vw, 3rem);
  line-height: .98; letter-spacing: -.022em; text-transform: uppercase;
}
.h3{
  font-family: "Archivo", sans-serif;
  font-variation-settings: "wdth" 102, "wght" 500;
  font-size: clamp(1.0625rem, .98rem + .38vw, 1.3125rem);
  line-height: 1.14; letter-spacing: -.012em;
}
.idx{
  font-family: "Archivo", sans-serif;
  font-variation-settings: "wdth" 84, "wght" 500;
  font-size: .75rem; line-height: 1; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-45);
  font-variant-numeric: tabular-nums;
}
.mono{
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 400; font-size: .6875rem; line-height: 1.3;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-45);
  font-variant-numeric: tabular-nums slashed-zero;
}
.mono--500{ font-weight: 500; color: var(--ink); }

.wordmark{
  font-family: "Archivo", sans-serif;
  font-variation-settings: "wdth" 96, "wght" 600;
  font-size: clamp(1rem, .92rem + .35vw, 1.25rem);
  letter-spacing: .18em; text-transform: uppercase; line-height: 1;
  display: inline-flex; align-items: center; white-space: nowrap;
}
.wm-o{ width: .66em; height: .66em; margin: 0 .1em 0 .04em; transform: translateY(.02em); overflow: visible; }

a{ color: inherit; text-decoration: none; }
.lnk{ position: relative; }
.lnk::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -.16em; height: 1px;
  background: var(--signal); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-mid) var(--ease);
}
.lnk:hover::after, .lnk:focus-visible::after{ transform: scaleX(1); }
:focus-visible{ outline: 1px solid var(--signal); outline-offset: 6px; }

/* ---------- the motif ---------- */
.ap{ display: block; overflow: visible; }
.ap .ap-ring{ fill: var(--band); stroke: var(--rule); stroke-width: 1; }
.ap .ap-pupil{ fill: var(--band); opacity: 0; }
.is-engaged .ap-ring{ fill: var(--signal); stroke: var(--signal); }
.is-engaged .ap-pupil{ opacity: 1; }

.doc{ position: relative; }
.spine{
  position: absolute; left: var(--spine-x); top: 0; bottom: 0;
  width: 1px; background: var(--rule); z-index: 0; pointer-events: none;
}
.sec{ position: relative; --band: var(--paper); }
.sec > *{ position: relative; z-index: 1; }
.dock{
  position: absolute; top: 0; left: var(--spine-c);
  transform: translate(-50%, -50%); z-index: 2;
}
.head-rule{
  position: absolute; left: var(--spine-x); right: var(--pad-r);
  top: calc(var(--ap) / 2 + var(--conn));
  height: 1px; background: var(--rule); z-index: 1;
}
.terminus{
  position: absolute; bottom: 0; left: var(--spine-c);
  transform: translate(-50%, 50%); z-index: 2;
}

/* ---------- chrome ---------- */
.chrome{ position: sticky; top: 0; z-index: 5; background: var(--paper); height: 64px; }
.chrome-rule{ position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); }
.bar{
  display: flex; align-items: center; justify-content: space-between;
  height: 100%; width: var(--content-w); margin-inline: auto;
}
.nav{ display: flex; align-items: center; gap: var(--sp-3); }
.nav a{ padding-block: 15px; }

/* ---------- document body ---------- */
.sec-body{ padding-top: calc(var(--ap) / 2 + var(--conn) + 36px); padding-bottom: var(--sp-7); }
.c-eyebrow{ grid-column: 4 / 7; }
.c-main   { grid-column: 4 / 11; }
.c-full   { grid-column: 1 / -1; }
.sec-h2   { margin-top: 16px; }

.doc-meta{ margin-top: var(--sp-3); }

.prose{ margin-top: var(--sp-6); }
.prose > * + *{ margin-top: var(--sp-3); }
.prose h2{
  font-family: "Archivo", sans-serif;
  font-variation-settings: "wdth" 102, "wght" 500;
  font-size: clamp(1.0625rem, .98rem + .38vw, 1.3125rem);
  line-height: 1.14; letter-spacing: -.012em;
  margin-top: var(--sp-5); padding-top: var(--sp-3);
  border-top: 1px solid var(--rule);
}
.prose h2:first-child{ margin-top: 0; }
.prose p, .prose li{
  font-size: clamp(1rem, .94rem + .28vw, 1.0625rem);
  line-height: 1.6; color: var(--ink-70); max-width: 68ch;
}
.prose ul{ padding-left: 0; list-style: none; }
.prose li{ position: relative; padding-left: var(--sp-3); }
.prose li + li{ margin-top: var(--sp-2); }
/* an en dash rather than a bullet — the page has no round marks but the aperture */
.prose li::before{ content: "–"; position: absolute; left: 0; color: var(--ink-45); }
.prose strong{ color: var(--ink); font-weight: 500; }
.prose a{ color: var(--ink); }
.prose .mono{ display: block; }

/* ---------- footer ---------- */
.foot{ border-top: 1px solid var(--rule); padding-block: var(--sp-5) var(--sp-4); }
.foot-cell{ display: flex; flex-direction: column; gap: 8px; }
.foot-cell .mono--500{ line-height: 1.7; }
.foot-c1{ grid-column: 1 / 4; }
.foot-c2{ grid-column: 4 / 7; }
.foot-c3{ grid-column: 7 / 10; }
.foot-c4{ grid-column: 10 / -1; }
.foot-rule{ height: 1px; background: var(--rule); margin-top: var(--sp-4); }
.foot-end{
  padding-top: var(--sp-3); display: flex; align-items: baseline;
  justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap;
}
.foot-mark{
  font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 96, "wght" 600;
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink);
}

/* ---------- responsive: the spine leaves the grid, content clears it ------- */
@media (max-width: 1023px){
  :root{ --spine-x: 20px; --spine-c: 20px; --pad-r: 20px; --pad-l: 56px; }
  .grid{ width: auto; margin-left: var(--pad-l); margin-right: var(--pad-r);
         grid-template-columns: repeat(6, minmax(0,1fr)); }
  .bar{ width: auto; margin-left: var(--pad-l); margin-right: var(--pad-r); }
  .c-eyebrow, .c-main{ grid-column: 1 / -1; }
  .foot-c1, .foot-c2, .foot-c3, .foot-c4{ grid-column: span 3; }
  .foot-cell{ padding-bottom: var(--sp-3); }
}
@media (max-width: 639px){
  :root{ --pad-l: 44px; --gap: 16px; --conn: 36px; }
  .grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
  .foot-c1, .foot-c2, .foot-c3, .foot-c4{ grid-column: 1 / -1; }
  .foot-cell{ padding-bottom: var(--sp-4); border-bottom: 1px solid var(--rule); }
  .foot-cell:last-of-type{ border-bottom: 0; }
}