/* Kyndai invite-only site: one stylesheet for the shell shared by every page (tokens, header,
   rule, footer) and each page's own rhythm. Latin-subset self-hosted faces; no font CDN. */

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('fonts/source-serif-4-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/source-sans-3-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/source-code-pro-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark; /* UA surfaces (scrollbar, caret) come from the plate, not the OS light default */
  --plate: #26231F;
  --line: #3a362f;
  --ink: #EDE9E2;
  --muted: #BEB7A9;
  --faint: #9a917f;
  --bronze: #C9A96A;
  --bronze-deep: #8A6F4D;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Source Code Pro', 'SF Mono', Menlo, Consolas, monospace;
  --gutter: 112px;
  --rule-x: 272px;
  --edge: 88px;
  --header-h: 96px;
  --footer-h: 73px;
  --mark-cx: calc(var(--gutter) + 24px); /* the monogram's centre; both mark forms share it */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--plate); }
body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--plate);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--bronze); color: var(--plate); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 5px; border-radius: 1px; }
/* keeps an in-page anchor target (#datenschutz today; any future one by construction) AND a
   keyboard-focused link clear of the fixed bars — scroll-padding on the scrolling root covers
   both scroll-into-view mechanisms (fragment navigation and Tab-driven focus) at once, so no
   focused element is ever obscured by the opaque header or footer (WCAG 2.4.11). */
html {
  scroll-padding-top: calc(var(--header-h) + 16px);
  /* +24, not +16: the footer may grow past --footer-h by a wrapped line (min-height on phones)
     and the focus ring extends 7px past the element box (2px outline at 5px offset) */
  scroll-padding-bottom: calc(var(--footer-h) + 24px);
}

/* Meedori ships only as inline SVG outlines (no webfont, no TTF): every mark instance below is
   one of these two path sets, sized by CSS width/height per placement. */
svg { display: block; fill: currentColor; }

/* header and footer are fixed: the plate's frame stays, the content moves between them.
   The head mark is one component carrying both forms: the landing page (body.landing) shows
   the KD monogram; every other page shows the kYNDAI wordmark, in the same place. Both forms
   share one centre (--mark-cx) via translate(-50%,-50%), so whichever is visible reads as the
   same mark, never as motion. */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2; height: var(--header-h);
  background: var(--plate); display: flex; align-items: center; padding-left: var(--rule-x);
}
.site-header .mark {
  position: absolute; left: var(--mark-cx); top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; min-height: 24px; /* target size floor, WCAG 2.5.8 */
  color: var(--ink); text-decoration: none;
}
.site-header .mark .mono { width: 40.95px; height: 22.53px; display: none; }
.site-header .mark .word { width: 164.37px; height: 22.53px; display: block; }
body.landing .site-header .mark .mono { display: block; }
body.landing .site-header .mark .word { display: none; }
/* forced-colors (Windows high contrast): a border, not a background image, so it survives. */
.site-header .rule-start {
  position: absolute; left: var(--rule-x); bottom: 0; width: 0; height: 28px;
  border-left: 1px solid var(--line);
}

/* main: fills the viewport between the bars; the rule runs its full height and passes under
   both bars; each page adds its own inner rhythm inside --inset-top/--inset-bottom. */
main {
  position: relative; min-height: 100vh; min-height: 100dvh;
  padding: calc(var(--header-h) + var(--inset-top, 0px)) var(--edge) calc(var(--footer-h) + var(--inset-bottom, 0px)) var(--rule-x);
}
main::before {
  content: ''; position: absolute; left: var(--rule-x); top: 0; bottom: 0; width: 0;
  border-left: 1px solid var(--line);
}

/* footer: one row, the statutory line at the edge, nothing else, on every page */
.site-footer {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 2; height: var(--footer-h);
  background: var(--plate); border-top: 1px solid var(--line);
  padding: 22px var(--edge) 0 var(--gutter);
  display: flex; align-items: baseline; justify-content: flex-end;
}
.site-footer .meta { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--faint); white-space: nowrap; }
.site-footer .meta a {
  color: var(--faint); text-decoration: underline; text-decoration-color: var(--line);
  text-underline-offset: 4px; display: inline-block; padding: 6px 0; /* target size floor */
}
.site-footer .meta a:hover { color: var(--bronze); }
.site-footer .meta .sep { padding: 0 .55em; }

@media (max-width: 760px) {
  :root { --gutter: 24px; --rule-x: 52px; --edge: 24px; --header-h: 76px; --footer-h: 64px; --mark-cx: 95px; }
  .site-header .mark .mono { width: 32.76px; height: 18.02px; }
  .site-header .mark .word { width: 131.50px; height: 18.02px; }
  .site-header .rule-start { display: none; }
  /* min-height, not height: a fixed bar has no scroll route to an overflowing third line
     (text-spacing overrides at 320px produce one), so the bar grows instead (finish-review fix 3) */
  .site-footer { height: auto; min-height: var(--footer-h); padding: 18px var(--edge) 0 var(--gutter); }
  .site-footer .meta { font-size: 12px; white-space: normal; text-align: right; line-height: 1.9; }
  .site-footer .meta .links { white-space: nowrap; display: inline-block; }
}

/* landing page: the name opens the ledger, three statements follow it down the rule */
body.landing main {
  --inset-top: 56px; --inset-bottom: 56px;
  display: flex; flex-direction: column; justify-content: center;
}
/* 53px, not the mock's 44px: the SVG box is the ink's cap-height box, ~9px shorter than the
   text box the mock measured from, so the optical interval to the first statement is preserved */
.name { position: relative; padding-left: 44px; margin-bottom: 53px; line-height: 1; }
.name svg { width: 186.29px; height: 25.53px; }
.name::before {
  content: ''; position: absolute; left: -8px; top: .5em; width: 24px; height: 0;
  border-top: 1px solid var(--line);
}
.statements { list-style: none; display: grid; gap: 30px; }
.statements li {
  position: relative; padding-left: 44px; font-size: 46px; line-height: 1.16; font-weight: 500;
  letter-spacing: -.005em; max-width: 21ch; text-wrap: balance;
}
.statements li::before {
  content: ''; position: absolute; left: -8px; top: .62em; width: 24px; height: 0;
  border-top: 1px solid var(--bronze);
}
.access { margin-top: 64px; padding-left: 44px; font-size: 22px; line-height: 1.3; color: var(--muted); font-weight: 400; position: relative; }
.access::before {
  content: ''; position: absolute; left: -8px; top: .62em; width: 24px; height: 0;
  border-top: 1px solid var(--line);
}
.write { margin-top: 18px; padding-left: 44px; font-family: var(--mono); font-size: 14px; letter-spacing: .02em; color: var(--muted); }
.write a {
  color: var(--bronze); text-decoration: underline; text-decoration-color: var(--bronze-deep);
  text-underline-offset: 5px; text-decoration-thickness: 1px; overflow-wrap: anywhere;
  display: inline-block; padding: 5px 0; /* target size floor */
}
.write a:hover { text-decoration-color: var(--bronze); }

@media (max-height: 719px) { body.landing main { justify-content: flex-start; } }
@media (max-width: 760px) {
  body.landing main { --inset-top: 40px; --inset-bottom: 40px; justify-content: flex-start; }
  .name { padding-left: 24px; margin-bottom: 38px; }
  .name svg { width: 131.50px; height: 18.02px; }
  .name::before { width: 16px; }
  .statements { gap: 22px; }
  .statements li { padding-left: 24px; font-size: 31px; }
  .statements li::before { width: 16px; top: .6em; }
  .access { margin-top: 44px; padding-left: 24px; font-size: 18px; }
  .access::before { width: 16px; }
  .write { padding-left: 24px; font-size: 13px; }
}

/* short phone viewports (the iPhone-SE band and landscape phones): a fixed footer here buries
   the route line under an opaque bar at first paint with no scroll cue — against the brief's
   own guarantee that nothing is ever hidden or clipped. The footer joins the flow (the header
   and its mark stay fixed), and the ledger's rhythm tightens so the whole column reads within
   one small screen's scroll. */
@media (max-width: 760px) and (max-height: 667px) {
  .site-footer { position: static; }
  main { min-height: 0; padding-bottom: var(--inset-bottom, 0px); }
  body.landing main { --inset-top: 28px; --inset-bottom: 28px; }
  .name { margin-bottom: 28px; }
  .statements { gap: 18px; }
  .access { margin-top: 32px; }
  .write { margin-top: 14px; }
}

/* the Impressum: the ledger's second page. Every rule below is scoped off body.landing, since
   the shared shell above already covers the header, footer, rule, and tokens for both pages. */
body:not(.landing) { font-family: var(--sans); }
body:not(.landing) main { --inset-top: 72px; --inset-bottom: 96px; }
body:not(.landing) h1 {
  position: relative; padding-left: 44px; font-family: var(--serif); font-size: 46px;
  line-height: 1.16; font-weight: 500; letter-spacing: -.005em;
}
body:not(.landing) h1::before {
  content: ''; position: absolute; left: -8px; top: .62em; width: 24px; height: 0;
  border-top: 1px solid var(--bronze);
}
body:not(.landing) h1 .en { display: block; font-size: 22px; line-height: 1.3; font-weight: 400; color: var(--muted); margin-top: 6px; }
.basis { padding-left: 44px; margin-top: 18px; font-family: var(--mono); font-size: 12.5px; line-height: 1.7; letter-spacing: .04em; color: var(--faint); max-width: 60ch; }

.entries { list-style: none; margin-top: 52px; display: grid; gap: 34px; }
.entries li { position: relative; padding-left: 44px; }
.entries li::before {
  content: ''; position: absolute; left: -8px; top: .55em; width: 24px; height: 0;
  border-top: 1px solid var(--line);
}
/* the label's English half recedes by reading order alone — no opacity: composited dimming
   drops 12px text under the AA floor and survives forced colors (finish-review fix 1) */
.entries .label { display: block; font-family: var(--mono); font-size: 12px; line-height: 1.6; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.entries .label .sep { padding: 0 .5em; }
.entries .value { font-size: 18px; line-height: 1.5; color: var(--ink); max-width: 52ch; }
.entries .value a {
  color: var(--bronze); text-decoration: underline; text-decoration-color: var(--bronze-deep);
  text-underline-offset: 5px; text-decoration-thickness: 1px; overflow-wrap: anywhere;
  display: inline-block; padding: 3px 0; /* target size floor */
}
.entries .value.small { font-size: 16px; color: var(--muted); max-width: 58ch; }
.entries .value.small + .value.small { margin-top: 10px; }
.entries address { font-style: normal; }

@media (max-width: 760px) {
  body:not(.landing) main { --inset-top: 36px; --inset-bottom: 56px; }
  body:not(.landing) h1 { padding-left: 24px; font-size: 31px; }
  body:not(.landing) h1::before { width: 16px; top: .6em; }
  body:not(.landing) h1 .en { font-size: 18px; }
  .basis { padding-left: 24px; font-size: 12px; }
  .entries { margin-top: 36px; gap: 26px; }
  .entries li { padding-left: 24px; }
  .entries li::before { width: 16px; }
  .entries .value { font-size: 17px; }
}

/* print: the paper treatment reserved for print, verified with backgrounds off. Every colour
   is a token redefinition, so every rule, tick, mark, and link recolours by construction from
   the tokens above — nothing below names a colour of its own. */
@media print {
  :root {
    --plate: #F4F1EB;
    --line: #d9d2c2;
    --ink: #2b2823;
    --muted: #55503f;
    --faint: #55503f;
    --bronze: #6E5530;
    --bronze-deep: #6E5530;
  }
  body, main { min-height: 0; }
  /* "unfixed (static)" per the brief: position: relative (not static) keeps the header a
     positioning context for its own absolutely-positioned mark and rule-start tick. */
  .site-header, .site-footer { position: relative; }
  main { padding-top: var(--inset-top, 0px); padding-bottom: var(--inset-bottom, 0px); }
}