/* ideatives.com page styles. Tokens come from tokens/ideatives.css (+ dna.css);
   this file uses only var(--role), var(--space-n) and var(--step-n). System C "Ledger". */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/inter-latin-400-600.woff2") format("woff2");
}
@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/bebas-neue-caps.woff2") format("woff2");
}

:root { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-text);
  font-feature-settings: var(--font-features);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

p { text-wrap: pretty; max-inline-size: var(--measure); }

::selection { background: var(--ink); color: var(--surface); }

.wrap {
  max-inline-size: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Skip link: first focusable, off-screen until focused. */
.skip-link {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  z-index: var(--z-skip);
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-min);
  padding-inline: var(--space-3);
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--space-4)));
  transition: transform var(--dur-ui) var(--ease);
}
.skip-link:focus { transform: none; }

/* ---------- Links and the one button ---------- */
.link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-min);
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--muted);
  transition: text-decoration-color var(--dur-ui) var(--ease);
}
.link:hover { text-decoration-color: currentColor; }

.btn {
  display: inline-flex;
  align-items: center;
  min-block-size: 3rem;
  padding-inline: var(--space-4);
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: background-color var(--dur-ui) var(--ease);
}
.btn:hover { background: var(--ink-2); }
.btn svg {
  inline-size: 1em;
  block-size: 1em;
  margin-inline-start: var(--space-2);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Wordmark (outlined Bebas, cut I) ---------- */
.wordmark { display: block; fill: currentColor; block-size: var(--wm-cap, 1rem); inline-size: auto; }

/* ---------- Ledger header and footer (wine band) ---------- */
.ledger > * {
  display: flex;
  align-items: center;
  min-block-size: 5rem;
  padding-inline: var(--space-3);
  font-size: var(--step--1);
}
.ledger > :first-child { padding-inline-start: 0; }
.ledger .link { min-block-size: 100%; white-space: nowrap; }
.site-header .ledger { border-block-start: 0; }
.site-header .wordmark { --wm-cap: 1.25rem; }

/* ---------- Sections ---------- */
section { padding-block: var(--space-7); }
.section-no { padding-block-start: var(--space-2); }

.statement h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-display);
  text-transform: uppercase;
  font-size: var(--step-6);
  text-wrap: balance;
}
.lead {
  margin-block-start: var(--space-5);
  max-inline-size: var(--measure-lead);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-2);
}
.founder {
  margin-block-start: var(--space-4);
  max-inline-size: var(--measure-lead);
  color: var(--ink-2);
}
.founder .link { margin-block-start: var(--space-1); }
.next { margin-block-start: var(--space-5); }

h2 {
  font-size: var(--step-3);
  font-weight: var(--weight-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
}

.facts {
  margin-block-start: var(--space-5);
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) 1fr;
  max-inline-size: 48rem;
  border-block-start: 1px solid var(--rule);
}
.facts dt, .facts dd {
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--rule);
}
.facts dt { color: var(--muted); padding-inline-end: var(--space-4); }
.facts dd .link { min-block-size: auto; padding-block: calc((var(--tap-min) - 1lh) / 2); margin-block: calc((1lh - var(--tap-min)) / 2); }

/* ---------- Footer band ---------- */
.site-footer .ledger > :last-child { grid-column: 2 / -1; }
.site-footer .wordmark { --wm-cap: 0.875rem; }

/* ---------- Small screens (dna.css flips --ledger-cols to "1fr auto" at 48rem) ---------- */
@media (max-width: 48rem) {
  .ledger .fact { display: none; }
  .ledger > * { min-block-size: 4rem; }
  .site-header .wordmark { --wm-cap: 1.125rem; }
  section { padding-block: var(--space-6); row-gap: var(--space-4); }
  .section-no { padding-block-start: 0; }
  .statement h1 { font-size: var(--step-4); }
  h2 { font-size: var(--step-2); }
  .facts { grid-template-columns: 1fr; }
  .facts dt { border-block-end: 0; padding-block-end: 0; }
  .facts dd { padding-block-start: var(--space-1); }
  .site-footer .ledger { grid-template-columns: 1fr; }
  .site-footer .ledger > * + * { border-inline-start: 0; border-block-start: 1px solid var(--ledger-line); }
  .site-footer .ledger > * { padding-inline: 0; }
  .site-footer .ledger > :last-child { grid-column: 1; padding-block: var(--space-3); }
}

/* ---------- Resilience ---------- */
@media (forced-colors: active) {
  .btn { border: 1px solid ButtonText; }
}
@media print {
  :root { color-scheme: light; }
  body, .band { background: #fff; color: #000; }
  .skip-link, .next { display: none; }
  .link { color: #000; }
}


/* ---------- Principles page (light surface, E-light) ---------- */
.umb{padding-block:var(--space-7)}

.card{display:block;border:1px solid var(--hair-strong,#555);padding:var(--space-4);max-inline-size:32rem;text-decoration:none;color:inherit;margin-block-start:var(--space-5)}
.card strong{display:block;font-size:1.25rem;margin-bottom:.25rem}
.card span{display:block;opacity:.8}
.card em{display:block;margin-top:var(--space-3);font-style:normal;text-decoration:underline}
.foot-line{margin:0;display:block !important;padding-block:1.9rem !important;max-inline-size:none}
.foot-line .link{display:inline;min-block-size:auto;padding:0;margin:0}
body{min-block-size:100svh;display:flex;flex-direction:column}
main{flex:1;display:flex;align-items:center}
main > .umb{inline-size:100%;padding-block:var(--space-6);border:0 !important}
:root{
  --surface:#f7f6f8; --surface-alt:#ecebef;
  --ink:#14131a; --ink-2:#3d3c47; --muted:#5b5a66; --rule:#d8d7de;
  --accent:#14131a; --on-accent:#f7f6f8; --focus:#651641;
}
.principles{list-style:none;padding:0;margin:var(--space-6) 0 var(--space-5);max-inline-size:44rem;border-block-start:1px solid var(--rule)}
.principles li{display:grid;grid-template-columns:3.5rem 1fr;gap:var(--space-3);padding-block:var(--space-4);border-block-end:1px solid var(--rule)}
.pn{font-family:var(--font-display);letter-spacing:var(--tracking-display);color:var(--muted);font-size:1.25rem;line-height:1.6}
.pt{font-family:var(--font-display);font-weight:400;letter-spacing:var(--tracking-display);text-transform:uppercase;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.05;margin:0 0 var(--space-2)}
.pg{margin:0;color:var(--ink-2)}
.pp{margin:var(--space-2) 0 0;font-size:var(--step--1);color:var(--muted)}
.pp b{font-weight:600;color:var(--ink-2)}
.content{grid-column:1 / -1 !important}
.principles{display:grid;grid-template-columns:repeat(3,1fr);max-inline-size:none;border:0;gap:0;border-block-start:1px solid var(--rule);border-inline-start:1px solid var(--rule)}
.principles li{display:block;padding:var(--space-4);border-block-end:1px solid var(--rule);border-inline-end:1px solid var(--rule)}
.principles .pn{display:block;margin-bottom:var(--space-2)}
.principles .cell-card{display:flex;padding:0}
.principles .cell-card .card{margin:0;border:0;max-inline-size:none;inline-size:100%;background:var(--band);color:var(--family-on);padding:var(--space-4)}
.principles .cell-card .card strong{font-family:var(--font-display);font-weight:400;letter-spacing:var(--tracking-display);text-transform:uppercase;font-size:1.75rem}
@media (max-width: 64rem){.principles{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 40rem){.principles{grid-template-columns:1fr}}