/* Cull Ventures — static site
   Plain CSS, no build step. Tokens from assets/cull-tokens.css are inlined below. */

:root {
  /* — Color (sampled from the paintings) — */
  --ink:        #16140F;  /* primary text, the mark */
  --bone:       #ECE6D8;  /* page ground / "paper" */
  --ultramarine:#243C8F;  /* the one structural accent: fields, links, icon */
  --oxide:      #B8431F;  /* secondary mark / rare emphasis */
  --ochre:      #C99A2E;  /* secondary, warm */
  --kraft:      #B49A6F;  /* warm neutral: hairline rules, ticks */
  --lime:       #8FB23A;  /* the single loud note — ~2% coverage only */

  /* roles */
  --bg:         var(--bone);
  --text:       var(--ink);
  --text-muted: #5E574A;
  --rule:       rgba(22, 20, 15, 0.16);
  --accent:     var(--ultramarine);

  /* — Type — */
  --font-display: "Hanken Grotesk", system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", system-ui, sans-serif;
  --font-voice:   "Fraunces", Georgia, serif;
  --font-mono:    "Space Mono", ui-monospace, monospace;

  --w-regular: 400;
  --w-medium:  500;

  /* type scale (1.25) */
  --t-h1:      2.441rem;
  --t-h2:      1.953rem;
  --t-h3:      1.563rem;
  --t-body:    1.0625rem;
  --t-small:   0.875rem;
  --t-mono:    0.75rem;
  --leading-tight: 1.1;
  --leading-body:  1.6;
  --tracking-mono: 0.08em;

  /* — Space (8px base) — */
  --s1: 0.5rem;  --s2: 1rem;  --s3: 1.5rem;
  --s4: 2rem;    --s5: 3rem;  --s6: 4rem;  --s7: 6rem;

  /* — Geometry — */
  --radius: 0;
  --radius-icon: 22%;
  --stroke: 1px;
  --maxw: 64rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);
}

/* — Reset — */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--ultramarine); color: var(--bone); }
a { color: inherit; }
img, svg { display: block; }

/* — Layout shell — */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
main.wrap { padding-block: clamp(var(--s5), 9vw, var(--s7)); }

.section { position: relative; margin-bottom: clamp(var(--s5), 8vw, var(--s7)); }

/* Rotated margin tick — the blueprint "registration" labels */
.margin-tick {
  position: absolute;
  left: calc(var(--gutter) * -1);
  top: 0;
  transform: translateX(-100%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tracking-mono);
  color: var(--kraft);
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}
@media (max-width: 60rem) { .margin-tick { display: none; } }

/* — Shared type helpers — */
.mono {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tracking-mono);
  line-height: 1;
}
.voice { font-family: var(--font-voice); font-style: italic; }
.muted { color: var(--text-muted); }
.tape-bar { width: 6rem; height: 10px; background: var(--ink); }

/* — 1. Masthead — */
.masthead { display: flex; flex-direction: column; gap: var(--s3); }
.masthead__lockup { display: flex; align-items: center; gap: var(--s3); }
.mark-box {
  width: clamp(4rem, 12vw, 6rem);
  height: clamp(4rem, 12vw, 6rem);
  background: var(--ink);
  display: grid;
  place-items: center;
  flex: none;
}
.mark-box svg { width: 64%; height: 64%; }
/* hero mark reads bone on the ink box */
.mark-box svg path, .mark-box svg circle { stroke: var(--bone); }

.wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tracking-mono);
  color: var(--ultramarine);
  text-transform: uppercase;
}

/* — 2. What this is — */
.statement { max-width: 42rem; display: flex; flex-direction: column; gap: var(--s3); }
.statement p {
  margin: 0;
  font-size: var(--t-body);
  line-height: var(--leading-body);
}
.metaline { display: flex; align-items: center; gap: var(--s2); color: var(--text-muted); }
.metaline .dot { width: 3px; height: 3px; background: var(--rule); border-radius: 50%; }

/* — 3. Holdings — */
.holdings__head {
  display: flex; justify-content: space-between; align-items: end;
  padding-bottom: var(--s1);
  border-bottom: var(--stroke) solid var(--ink);
  margin-bottom: 0;
}
.holdings__head .eyebrow { color: var(--ink); }
.holdings__head .rec { color: var(--rule); }

.holdings__list { border-top: var(--stroke) solid var(--rule); }
.holding {
  display: flex; flex-direction: column; gap: var(--s1);
  padding-block: var(--s4);
  border-bottom: var(--stroke) solid var(--rule);
}
.holding__title { display: flex; align-items: baseline; gap: var(--s2); }
.holding__num {
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: var(--tracking-mono); color: var(--ultramarine);
  flex: none;
}
.holding__name {
  margin: 0;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: clamp(1.563rem, 4vw, 1.953rem); line-height: var(--leading-tight);
}
.holding__desc { margin: 0; max-width: 38rem; color: var(--text-muted); }

/* — 5. Correspondence — */
.correspondence { padding-top: var(--s4); border-top: var(--stroke) solid var(--rule); }
.correspondence .label { display: block; color: var(--text-muted); text-transform: uppercase; margin-bottom: var(--s2); }
.correspondence a {
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: clamp(1.563rem, 4vw, 1.953rem);
  text-decoration: none;
  border-bottom: var(--stroke) solid transparent;
}
.correspondence a:hover { color: var(--ultramarine); border-bottom-color: var(--ultramarine); }

/* — Footer — */
.site-footer { border-top: var(--stroke) solid var(--rule); }
.site-footer .wrap {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: var(--s2); padding-block: var(--s4);
}
.footer-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); color: var(--text-muted); }
.footer-meta a { text-decoration: none; }
.footer-meta a:hover { color: var(--ink); }
.footer-meta .sep { color: var(--rule); }
.footer-rev { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: 0.06em; color: var(--rule); text-transform: uppercase; }

/* — Focus (quiet, accessible) — */
:focus-visible { outline: 2px solid var(--ultramarine); outline-offset: 3px; }

/* — Quiet entrance settle — */
@media (prefers-reduced-motion: no-preference) {
  .settle { opacity: 0; transform: translateY(8px); animation: settle 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
  .settle-2 { animation-delay: 0.06s; }
  .settle-3 { animation-delay: 0.12s; }
  .settle-4 { animation-delay: 0.18s; }
  @keyframes settle { to { opacity: 1; transform: none; } }
}

/* — Legal pages (privacy / terms) — */
.legal { max-width: 44rem; }
.legal__back { display: inline-block; margin-bottom: var(--s5); text-decoration: none; color: var(--text-muted); }
.legal__back:hover { color: var(--ultramarine); }
.legal h1 {
  margin: 0 0 var(--s1); font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: clamp(2rem, 5vw, 2.441rem); line-height: var(--leading-tight);
}
.legal__updated { margin: 0 0 var(--s5); color: var(--text-muted); }
.legal section { padding-block: var(--s4); border-top: var(--stroke) solid var(--rule); }
.legal section:first-of-type { border-top: none; padding-top: 0; }
.legal h2 {
  margin: 0 0 var(--s2); display: flex; align-items: baseline; gap: var(--s2);
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: var(--t-h3); line-height: var(--leading-tight);
}
.legal h2 .n { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: var(--tracking-mono); color: var(--ultramarine); }
.legal p { margin: 0 0 var(--s2); }
.legal ul { margin: 0; padding-left: var(--s3); }
.legal li { margin-bottom: var(--s1); }
.legal .contact-card { border: var(--stroke) solid var(--rule); padding: var(--s4); margin-top: var(--s2); }
.legal .contact-card .tape-bar { margin-bottom: var(--s3); }