/* Shared styles for veylo.cc's inner pages (press kit, privacy, terms). Same tokens, grid and type as index.html (DESIGN.md). */
:root {
  --bg: #e8e7e4;
  --fg: #111111;
  --muted: #545452;
  --line: rgb(17 17 17 / 0.09);
  --rule: #111111;
  --blue: #1d3df0;
  --on-blue: #ffffff;
  --on-bar: #e8e7e4;
  --field: #f3f2f0;
  --font: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.2,.7,.2,1);
  --cols: 4;
  --max: 1280px;
  color-scheme: light;
}
@media (min-width: 900px) { :root { --cols: 12; } }

* { box-sizing: border-box; }
html { scrollbar-color: color-mix(in srgb, var(--fg) 35%, var(--bg)) var(--bg); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0ms !important; } }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 1rem; line-height: 1.55; padding-inline: 16px; -webkit-font-smoothing: antialiased; caret-color: var(--blue); }
::selection { background: var(--blue); color: var(--on-blue); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--blue); }
h1, h2, h3, p, ul, ol { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
.muted { color: var(--muted); }

/* The grid */
.frame { position: relative; max-width: var(--max); margin-inline: auto; }
.lines { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); pointer-events: none; z-index: 0; border-right: 1px solid var(--line); }
.lines span { border-left: 1px solid var(--line); }
@media (max-width: 899px) { .lines span:nth-child(n+5) { display: none; } }
.g { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }

/* Header: the mark (decision #22) and the page's name */
.site-header { padding-block: 22px; align-items: center; }
.wordmark { grid-column: 1 / 3; justify-self: start; display: inline-flex; align-items: center; gap: 12px; color: var(--fg); text-decoration: none; }
.wordmark:hover { color: var(--fg); }
.wordmark svg { display: block; width: 26px; height: 26px; flex: none; }
.wordmark span { font-weight: 600; font-size: 17px; line-height: 1; letter-spacing: 0.2em; margin-right: -0.2em; }
.page-name { grid-column: 3 / -1; justify-self: end; font-size: 0.875rem; color: var(--muted); }

/* Page title */
.page-head { padding-top: clamp(64px, 9vw, 120px); }
.page-head h1 { grid-column: 1 / -1; font-weight: 300; font-size: clamp(2.5rem, 6.2vw, 5.25rem); line-height: 0.98; letter-spacing: -0.04em; padding-right: 14px; }
.page-head h1 b { font-weight: 600; }
.page-head .updated { grid-column: 1 / -1; margin-top: 18px; font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .page-head h1 { grid-column: 1 / 10; } }

/* Sections: head on columns 1 to 4, body on 5 to 12, each opening with an ink rule */
.main { padding-bottom: clamp(96px, 12vw, 160px); }
.section { padding-top: clamp(96px, 12vw, 160px); }
.section.tight { padding-top: clamp(56px, 7vw, 96px); }
.section > .head { grid-column: 1 / -1; border-top: 1px solid var(--rule); padding-top: 14px; }
.section h2 { font-weight: 300; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.04; letter-spacing: -0.04em; padding-right: 14px; }
.section h2 b { font-weight: 600; }
.section .head p { margin-top: 18px; font-size: 0.875rem; color: var(--muted); padding-right: 28px; }
.section > .body { grid-column: 1 / -1; margin-top: 28px; min-width: 0; }
@media (min-width: 900px) {
  .section > .head { grid-column: 1 / 5; }
  .section > .body { grid-column: 5 / -1; margin-top: 0; border-top: 1px solid var(--rule); padding-top: 14px; }
}
.lead { font-size: 1.1875rem; line-height: 1.5; max-width: 38rem; text-wrap: pretty; }
.label { font-size: 0.875rem; font-weight: 600; }

/* Prose for the legal pages */
.prose { max-width: 40rem; display: grid; gap: 14px; }
.prose h3 { margin-top: 14px; font-size: 1.375rem; font-weight: 600; line-height: 1.15; letter-spacing: -0.03em; }
.prose h3:first-child { margin-top: 0; }
.prose ul { padding: 0; list-style: none; display: grid; gap: 6px; }
.prose ul li { position: relative; padding-left: 16px; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 0.78em; width: 7px; height: 1px; background: currentColor; }
.prose b { font-weight: 600; }

/* Ruled rows (fact sheet) */
.rows { border-top: 0; }
.rows div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 14px 0 16px; border-bottom: 1px solid var(--line); }
.rows dt { color: var(--muted); font-size: 0.875rem; }
.rows dd { margin: 0; }
@media (min-width: 640px) { .rows div { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0; } .rows dt { grid-column: 1 / 3; font-size: 1rem; padding-right: 16px; } .rows dd { grid-column: 3 / -1; } }
.rows div:first-child { padding-top: 0; }

/* Buttons */
.ghost { position: relative; font: 500 0.75rem/1 var(--font); color: var(--fg); background: none; border: 1px solid var(--line); padding: 7px 10px; cursor: pointer; }
.ghost::after { content: ""; position: absolute; inset: -10px -8px; }
.ghost:hover { border-color: var(--fg); }

/* Exhibit tiles on the body's grid */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
.tiles > * { padding-right: 16px; min-width: 0; display: grid; gap: 10px; align-content: start; }
@media (min-width: 900px) { .tiles { grid-template-columns: repeat(8, minmax(0, 1fr)); } .tiles > * { grid-column: span 4; } .tiles.thirds > * { grid-column: span 2; } }
@media (max-width: 599px) { .tiles:not(.thirds) { grid-template-columns: minmax(0, 1fr); } }
.tile { height: 160px; background: var(--field); display: grid; place-items: center; padding: 20px; }
.tile.ink { background: var(--fg); }
.tile.blue { background: var(--blue); }
.tile.stone { background: var(--bg); outline: 1px solid var(--line); outline-offset: -1px; }
.tile img { display: block; max-width: 100%; height: auto; }
.tile-meta { display: flex; justify-content: space-between; gap: 12px; font-size: 0.875rem; }
.tile-meta a { font-weight: 600; text-decoration: none; white-space: nowrap; padding: 8px 0; margin: -8px 0; }
.tiles p { font-size: 0.875rem; color: var(--muted); }
.tiles p b { color: var(--fg); font-weight: 600; }
.swatch { height: 96px; }
.sw-name { font-weight: 600; }
.sw-code { font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.specimen { margin-top: 28px; background: var(--field); padding: 28px; display: grid; gap: 12px; }
.specimen p:first-child { font-weight: 300; font-size: clamp(2rem, 4.4vw, 3.5rem); line-height: 1; letter-spacing: -0.04em; }
.specimen b { font-weight: 600; }
.big-link { font-weight: 600; font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: -0.04em; line-height: 1.1; text-decoration: none; overflow-wrap: anywhere; }

/* Footer: one ink rule, the copyright, and the inner pages */
.site-footer { border-top: 1px solid var(--rule); padding: 14px 0 calc(40px + env(safe-area-inset-bottom, 0px)); row-gap: 10px; font-size: 0.875rem; color: var(--muted); }
.site-footer > span { grid-column: 1 / -1; }
.site-footer nav { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.site-footer a { color: var(--muted); text-decoration: none; padding: 11px 0; margin: -11px 0; }
.site-footer a:hover { color: var(--fg); }
.site-footer a[aria-current="page"] { color: var(--fg); }
@media (min-width: 900px) { .site-footer > span { grid-column: 1 / 5; } .site-footer nav { grid-column: 5 / -1; justify-content: flex-end; gap: 28px; } }