/* ============================================================================
   OFF — Privacy Policy page (pen.dev frame "OFF — Privacy Policy / privacy.html")

   Unlike the teaser, this is a document page: the root font size is FIXED at
   16px so the legal text keeps its reading size at every viewport width, while
   all the artboard measurements below are still the design's own values
   (design px -> px). At a 1440px viewport it renders pixel-for-pixel like the
   artboard: frame at x=240, 960 wide, y=56..1424, yellow band at y=1292..1493.
   ========================================================================= */

:root {
  --ink: #000000;
  --page: #08090b;
  --panel: #0b0c10;
  --yellow: #ffe000;
  --text: #f2f4f7;
  --muted: #9aa1ac;
  --grain: #ffd900;

  --font-display: 'Gabarito', system-ui, sans-serif;
  --font-sans: 'Inter Tight', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* artboard measurements (design px) */
  --frame-w: 960px;
  --frame-border: 2px;
  --bar-top: 18px 24px 18px;   /* + the 2px bottom rule = 66px tall */
  --bar-bottom: 26px 24px 20.5px;
  --doc-pad: 56px;
  --doc-text-w: 604.8px;      /* 63% of the frame */
  --band-h: 201px;
  --band-overhang: 69px;      /* how far the band hangs below the frame */
  --grain-inset: 12px;
}

* { box-sizing: border-box; }

html {
  background: var(--page);
  -webkit-text-size-adjust: 100%;
}

body {
  position: relative;
  margin: 0;
  min-height: 100svh;
  /* vertical padding only: the frame is centred by the stage, so the yellow
     band can bleed edge to edge */
  padding: 56px 0 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--page);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.75;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }

/* ------------------------------------------------------- glitch backdrop -- */
.glitch {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* pen node RWqLq: grain at x=12, opacity .3, blend screen.
   privacy.js extends the raster to the full viewport width. */
.glitch__grain {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  white-space: pre;
  font-variant-ligatures: none;
  color: var(--grain);
  mix-blend-mode: screen;
  opacity: 0.3;
}

/* pen node mTZzv, tied to the frame so it survives text reflow */
.ramp {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--band-overhang));
  height: var(--band-h);
  background: var(--yellow);
  z-index: 0;
}

/* ------------------------------------------------------------ the frame -- */
.stage {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.frame {
  position: relative;
  z-index: 1;
  width: var(--frame-w);
  max-width: calc(100% - 32px);
  background: var(--panel);
  /* the artboard's 2px stroke is drawn INSIDE the 960x1368 box, so it is a
     border with no extra padding: the content starts at y=58, not 60 */
  border: var(--frame-border) solid var(--yellow);
}

.frame__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: var(--bar-top);
  border-bottom: var(--frame-border) solid var(--yellow);
  line-height: 1;
}

.brand {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.56px;
  color: var(--text);
}

/* ---------------------------------------------------------- the document -- */
.doc {
  padding: var(--doc-pad);
}

.doc h1 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.8px;
  color: var(--text);
}

.doc h2 {
  margin: 48px 0 0;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.96px;
  color: var(--yellow);
}

.doc p {
  margin: 14px 0 0;
  max-width: var(--doc-text-w);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text);
}

/* .doc p sets font-size 14px, so the meta needs the higher specificity */
.doc .doc__meta {
  font-size: 12px;
  letter-spacing: 0.96px;
  color: var(--muted);
}

/* the design keeps the addresses as plain text; they stay invisible as links */
.doc a { color: inherit; }
.doc a:hover,
.doc a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------- back bar -- */
.frame__foot {
  padding: var(--bar-bottom);
  border-top: var(--frame-border) solid var(--yellow);
  font-size: 11px;
  line-height: 1;
}

.back {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.88px;
  color: var(--muted);
  transition: color 0.2s ease;
}
.back:hover,
.back:focus-visible { color: var(--yellow); }

/* ================================================================ small == */
@media (max-width: 720px) {
  body {
    padding: 24px 0 88px;
    font-size: 13px;
  }
  :root { --doc-pad: 28px; }
  .doc h1 { font-size: 28px; letter-spacing: -0.5px; }
  .doc h2 { margin-top: 36px; }
  .brand { font-size: 22px; }
  .glitch__grain { font-size: 7px; opacity: 0.22; }
  .ramp { height: 120px; bottom: -48px; }
}

@media print {
  .glitch,
  .ramp { display: none; }
  body { padding: 0; background: #fff; color: #000; }
  .frame { border-color: #000; background: #fff; }
  .doc h2 { color: #000; }
}