/* The privacy page: a legal document on the Chalkboard (the flagship's world, site/public/flagship/chalk.css).
   The board #0E1116 with fine chalk grain, chalk #E7EBF0, lavender #D2C2FF for the way in, a cyan chalk
   underline under the title, blue #4A8FE0 for rules. Display Cabin Sketch 700, body Atkinson Hyperlegible,
   both self-hosted with the flagship (OFL). No script draws anything here: the page is a plain document.
   This file lives beside the page, not under /flagship/, because tools/copy-flagship.cjs removes any file
   there that the candidate does not have. */

@font-face { font-family: "Cabin Sketch"; src: url("/flagship/fonts/CabinSketch-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/flagship/fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/flagship/fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

html {
  --stage: #0e1116; --paper: #e7ebf0; --lav: #d2c2ff; --cyan: #7cf3ff; --blue: #4a8fe0; --muted: #838c98; --rule: #3a414c;
  --gutter: clamp(16px, 3.6vw, 52px);
  --grain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22260%22%20height%3D%22260%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.8%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%201%200%200%200%200%201%200%200%200%200%201%200%200%200%20.075%200%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url(%23n)%22%2F%3E%3C%2Fsvg%3E");
  --chalkline: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2020%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M3%2013C60%206%20120%2015%20180%209s90%203%20114-2%22%20fill%3D%22none%22%20stroke%3D%22%237CF3FF%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.92%22%2F%3E%3Cpath%20d%3D%22M20%2017c70-5%20150-3%20250-7%22%20fill%3D%22none%22%20stroke%3D%22%237CF3FF%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.55%22%2F%3E%3C%2Fsvg%3E");
  color-scheme: dark;
  background: var(--stage); color: var(--paper);
  scrollbar-color: #2a313c var(--stage);
  overflow-x: clip;
}
body {
  margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow-x: clip;
  background: var(--grain), radial-gradient(1200px 500px at 20% 4%, rgba(255, 255, 255, 0.045), transparent 70%), radial-gradient(900px 420px at 85% 40%, rgba(255, 255, 255, 0.03), transparent 70%), var(--stage);
  font-family: "Atkinson Hyperlegible", "Segoe UI", sans-serif; font-weight: 400; font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; caret-color: var(--cyan);
}
[hidden] { display: none !important; }
h1, h2 { font-family: "Cabin Sketch", Georgia, serif; font-weight: 700; color: var(--paper); }
::selection { background: var(--lav); color: var(--stage); }
:focus-visible { outline: 2px dashed var(--cyan); outline-offset: 4px; border-radius: 6px; }
a { color: inherit; }
img { max-width: 100%; height: auto; }

/* The way in: lavender, a hand-cut edge, the flagship's one call to action. */
.cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; box-sizing: border-box;
  padding: 0.62em 1.15em; font-size: 0.95rem; font-weight: 700; line-height: 1.2; text-align: center;
  background: var(--lav); color: var(--stage); text-decoration: none; border-radius: 10px 14px 9px 13px;
  box-shadow: 0 0 0 2px rgba(210, 194, 255, 0.45), 3px 4px 0 0 rgba(231, 235, 240, 0.18);
  transition: background-color 0.2s ease, translate 0.2s ease, box-shadow 0.2s ease;
}
.cta-l { padding: 0.9em 1.6em; font-size: 1.05rem; }
@media (hover: hover) {
  .cta:hover { background: #e1d6ff; translate: -1px -1px; box-shadow: 0 0 0 2px rgba(210, 194, 255, 0.55), 4px 5px 0 0 rgba(231, 235, 240, 0.22); }
  .back:hover, .doc-body a:hover, .foot a:hover { text-decoration-color: var(--cyan); text-decoration-thickness: 2px; }
}
.cta:active { background: #c2adff; translate: 1px 1px; }
@media (prefers-reduced-motion: reduce) { .cta { transition: none; } }

/* A plain text route back, underlined the way the footer's links are. */
.back {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--paper);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em;
  text-decoration-color: rgba(231, 235, 240, 0.45);
}

/* The header: the house mark and the name, a way back and the way in. It scrolls with the page. */
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding: 18px var(--gutter); }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; text-decoration: none; font-family: "Cabin Sketch", Georgia, serif; font-weight: 700; font-size: 1.4rem; line-height: 1; }
.brand img { display: block; width: 34px; height: 30px; }
.top nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; font-size: 0.98rem; }

/* The document: one reading column set off the left edge, never a centred stack. */
.doc { flex: 1 0 auto; box-sizing: border-box; width: 100%; padding: clamp(40px, 8vh, 96px) var(--gutter) clamp(56px, 10vh, 120px); }
.doc > * { max-width: 40rem; margin-left: clamp(0px, 8vw, 160px); }
.doc-head { margin-bottom: clamp(40px, 6vh, 64px); }
.doc-head h1 { margin: 0 0 0.45em; font-size: clamp(3rem, 2rem + 4.5vw, 5.25rem); line-height: 0.95; letter-spacing: 0; }
.u { background: var(--chalkline) left 100% / 100% 0.2em no-repeat; padding-bottom: 0.12em; }
.lede { margin: 0 0 0.6rem; font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem); line-height: 1.45; color: var(--paper); }
.updated { margin: 0; font-size: 0.9rem; color: var(--muted); }

.doc-body section { padding-top: clamp(36px, 5vh, 52px); }
.doc-body section + section { margin-top: clamp(36px, 5vh, 52px); border-top: 2px dashed rgba(74, 143, 224, 0.45); }
.doc-body h2 { margin: 0 0 0.7rem; font-size: clamp(1.55rem, 1.3rem + 0.9vw, 2rem); line-height: 1.1; letter-spacing: 0; }
.doc-body p { margin: 0 0 1rem; max-width: 68ch; }
.doc-body p:last-child { margin-bottom: 0; }
.doc-body a { text-decoration-thickness: 1px; text-underline-offset: 0.25em; text-decoration-color: rgba(124, 243, 255, 0.7); }
.doc-body .mail { overflow-wrap: anywhere; font-weight: 700; }
.address { font-weight: 700; }

/* Where it goes: three short entries, a label over its text. */
.where { margin: 0.4rem 0 0; display: grid; gap: 1.4rem; }
.where div { min-width: 0; }
.where dt { margin: 0 0 0.25rem; font-weight: 700; color: var(--lav); }
.where dd { margin: 0; max-width: 68ch; }

.doc-next { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: clamp(56px, 9vh, 96px); }

/* The board's chalk tray above the footer, as on the homepage. */
.tray { position: relative; height: 34px; margin: 0 var(--gutter); border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, #8a6440, #5e4129 60%, #4a3220); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.18); }
.tray i { position: absolute; top: -9px; height: 13px; border-radius: 3px 6px 6px 3px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12); }
.tray .s1 { left: 8%; width: 70px; background: #e7ebf0; }
.tray .s2 { left: calc(8% + 82px); width: 54px; background: #d2c2ff; transform: rotate(-4deg); }
.tray .s3 { left: calc(8% + 148px); width: 62px; background: #7cf3ff; }
.tray .s4 { left: calc(8% + 222px); width: 44px; background: #4a8fe0; transform: rotate(3deg); }
.tray .e { top: -20px; right: 70px; width: 120px; height: 24px; border-radius: 4px; background: linear-gradient(180deg, #3f3a36 0 40%, #c9b79c 40%); }
@media (max-width: 479px) {
  .tray .s1 { width: 35px; } .tray .s2 { left: calc(8% + 43px); width: 27px; }
  .tray .s3 { left: calc(8% + 78px); width: 31px; } .tray .s4 { left: calc(8% + 117px); width: 22px; }
  .tray .e { right: 24px; width: 90px; }
}

/* The footer, the same as the homepage's. */
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: 36px var(--gutter) 40px; border-top: 1px solid var(--rule); background: var(--stage); font-size: 0.875rem; line-height: 1.5; color: var(--muted); }
.foot p { margin: 0; }
.foot .foot-name { font-family: "Cabin Sketch", Georgia, serif; font-weight: 700; color: var(--paper); }
.foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--paper); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; text-decoration-color: rgba(231, 235, 240, 0.45); }

@media (max-width: 720px) {
  .doc > * { margin-left: 0; }
  .foot { flex-direction: column; align-items: flex-start; gap: 16px; padding: 32px var(--gutter); }
}
@media (max-width: 520px) {
  .top { padding-top: 12px; padding-bottom: 12px; }
  .brand { font-size: 1.2rem; gap: 0.45rem; }
  .brand img { width: 28px; height: 25px; }
  .top nav { gap: 0.25rem 1.25rem; font-size: 0.92rem; }
  .doc-next .cta { width: 100%; }
}