/* =========================================================================
   HALF BADGER AI PRODUCT LAB — Design System
   "We build the first half. You build the future."
   Visual language: steps · grids · arrows · circles · traces
   ========================================================================= */

/* ----- Fonts ----------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-italic.woff2") format("woff2");
}

/* ----- Design tokens --------------------------------------------------- */
:root {
  /* ---------------------------------------------------------------------
     The brand kit — Ink · Ivory · Moss · Honey. These four are the official
     logo colours, and this block is the only place in the file a colour is
     written down: every rule below reads a token, never a literal.
     --------------------------------------------------------------------- */
  --ink:        #111210;
  --paper:      #F7F3EA;
  --moss:       #4E5B34;
  --honey:      #E5A400;

  /* Warm neutrals — Ink stepped back towards Ivory */
  --ink-2:      #35372F;
  --ink-soft:   #585B4F;
  --ink-mute:   #66695D;   /* dark enough for 4.5:1 on --paper-2 as well */
  --paper-2:    #EFE9DB;
  --paper-3:    #E7DFCC;
  --white:      #FFFDF7;
  --line:       #DED6C3;
  --line-2:     #CFC6AF;

  /* Research Mode — moss (depth, focus, long-term thinking) */
  --moss-2:     #647243;
  --moss-deep:  #3A4427;
  --moss-tint:  #E3E7D8;
  --moss-tint2: #D4DBC2;

  /* Exploration Mode — honey (energy, learning, ideas to life) */
  --honey-2:    #F2B733;
  --honey-deep: #8A6600;
  --honey-tint: #FAEFCF;
  --honey-tint2:#F4E0A8;

  /* Dark surface — the footer and code blocks sit on Ink */
  --dark:        var(--ink);
  --dark-2:      #1B1D18;    /* a raised panel on the dark surface */
  --dark-line:   #2F3129;
  --dark-line-2: #3F423A;
  --dark-ink:    var(--paper);
  --dark-ink-2:  #D6D8CB;
  --dark-soft:   #B6B9AC;
  --dark-mute:   #93968A;

  /* Accent — swappable "mode" (defaults to Exploration) */
  --accent:      var(--honey);
  --accent-2:    var(--honey-2);
  --accent-deep: var(--honey-deep);
  --accent-tint: var(--honey-tint);
  --accent-tint2:var(--honey-tint2);
  --accent-ink:  var(--ink);   /* text color that sits on the accent */

  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Scale & rhythm */
  --container: 1200px;
  --container-narrow: 780px;
  --header-h: 66px;            /* sticky header height — one source */
  --radius: 4px;
  --radius-lg: 10px;
  --radius-xl: 18px;

  --shadow-sm: 0 1px 2px rgba(17,18,16,.06), 0 2px 8px rgba(17,18,16,.05);
  --shadow-md: 0 4px 14px rgba(17,18,16,.08), 0 12px 34px rgba(17,18,16,.09);
  --shadow-lg: 0 10px 30px rgba(17,18,16,.10), 0 30px 70px rgba(17,18,16,.13);

  --ease: cubic-bezier(.22,.61,.36,1);
}


/* ----- Reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv05" 1, "ss03" 1;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
ul, ol { list-style: none; padding: 0; }
::selection { background: var(--accent-tint2); color: var(--ink); }
:focus-visible { outline: 2.5px solid var(--accent-deep); outline-offset: 3px; border-radius: 2px; }

/* ----- Typography ------------------------------------------------------ */
h1, h2, h3, h4 { line-height: 1.08; letter-spacing: -0.028em; font-weight: 700; }
h1 { font-size: clamp(2.1rem, 4vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 2.9vw, 2.5rem); font-weight: 800; }
h3 { font-size: 1.12rem; letter-spacing: -0.015em; }
h4 { font-size: 1rem; letter-spacing: 0; }
p  { text-wrap: pretty; }

.display {
  font-size: clamp(2.7rem, 5.6vw, 4.5rem);
  line-height: .98;
  letter-spacing: -0.04em;
  font-weight: 800;
}
.lead { font-size: clamp(1.05rem, 1.35vw, 1.22rem); color: var(--ink-soft); line-height: 1.6; }
.small { font-size: .875rem; }
.muted { color: var(--ink-mute); }

.eyebrow {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 0;
  border-top: 2px solid var(--accent);
}
.eyebrow.no-rule::before { display: none; }

mark, .mark-hl {
  background: linear-gradient(transparent 58%, var(--accent-tint2) 58%);
  color: inherit;
  padding: 0 .06em;
}
.moss-text  { color: var(--moss); }

/* ----- Layout ---------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }
.narrow { max-width: var(--container-narrow); }
.section { padding-block: clamp(3.2rem, 6.5vw, 6rem); }
.section-sm { padding-block: clamp(1.75rem, 3vw, 2.75rem); }
.center { text-align: center; }
.stack > * + * { margin-top: .65rem; }
.grid { display: grid; gap: clamp(.85rem, 1.5vw, 1.25rem); }
.cols-1 { grid-template-columns: minmax(0, 1fr); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
}

.section-head { max-width: 62ch; margin-bottom: clamp(1rem, 1.8vw, 1.6rem); }
.section-head .lead { margin-top: .5rem; }
.section-head.center { margin-inline: auto; }

/* ----- Buttons --------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--white);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6em 1.15em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .005em;
  border: 1.5px solid var(--btn-bg);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn .arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.btn-accent { --btn-bg: var(--accent); --btn-fg: var(--accent-ink); border-color: var(--accent); }
.btn-outline {
  --btn-bg: transparent; --btn-fg: var(--ink);
  border-color: var(--line-2);
}
.btn-outline:hover { border-color: var(--ink); background: var(--white); }
.btn-ghost {
  --btn-bg: transparent; --btn-fg: var(--ink);
  border-color: transparent; padding-inline: .35em;
}
.btn-ghost:hover { transform: none; box-shadow: none; color: var(--accent-deep); }
.btn-lg { padding: .72em 1.35em; font-size: .95rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; color: var(--ink);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
  transition: gap .2s var(--ease), color .2s var(--ease);
}
.link-arrow:hover { gap: .75rem; color: var(--accent-deep); }

/* ----- Header / nav ---------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.site-header.scrolled { border-bottom-color: var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; }
.brand-logo { height: 30px; width: auto; display: block; }
@media (max-width: 400px) { .brand-logo { height: 27px; } }
/* One item, so no menu button: the nav sits beside the logo at every width. */
.nav-links { display: flex; align-items: center; gap: .3rem; }
.nav-links a {
  padding: .5rem .85rem; border-radius: var(--radius);
  font-weight: 500; font-size: .95rem; color: var(--ink-2);
  position: relative; transition: color .18s var(--ease), background .18s var(--ease);
}
.nav-links a:hover { color: var(--ink); background: var(--paper-2); }
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .28rem;
  height: 2px; background: var(--accent); border-radius: 2px;
}

/* ----- Marquee (home hero) --------------------------------------------- */
/* The headline is the whole hero: no illustration, no label above it. */
.marquee { padding-block: clamp(.75rem, 1vw, 1rem); }
.marquee-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; }
@media (max-width: 820px) { .marquee-grid { grid-template-columns: minmax(0, 1fr); } }
/* Compact on purpose: two lines on a laptop, beside a three-line intro, so
   the first project row shows without scrolling. Small enough that the
   longest word ("Experiments") never has to break, even on a phone. */
.marquee-title {
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  line-height: .95;
  letter-spacing: -0.04em;
  font-weight: 800;
  text-wrap: balance;
  overflow-wrap: break-word;
  min-width: 0;
}
.marquee .lead { font-size: 1rem; line-height: 1.5; }

/* ----- Project panels -------------------------------------------------- */
/* The projects, edge to edge on the home page: every one a full-width row,
   its words beside a picture of it. The rows alternate Moss and Ink so no
   two of one colour touch; the status chip, not the colour, says whether a
   project is live. */
.panels:last-child { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.project-card {
  display: flex; flex-direction: column; gap: 1rem;
  min-height: clamp(15rem, 30vw, 22rem);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  color: var(--paper);
  transition: background .2s var(--ease);
}
.project-card.moss { background: var(--moss); }
.project-card.moss:hover { background: var(--moss-deep); }
.project-card.ink { background: var(--ink); }
.project-card.ink:hover { background: var(--ink-2); }
.project-card h2 { font-size: clamp(1.75rem, 3.2vw, 2.6rem); color: var(--paper); }
.project-card p { color: var(--dark-ink-2); max-width: 38ch; font-size: 1.05rem; }
.project-card .meta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.project-card .go { transition: transform .2s var(--ease); }
.project-card:hover .go { transform: translateX(4px); }
.project-card:focus-visible { outline-color: var(--honey-2); outline-offset: -6px; }
.project-list { gap: 0; }
/* The colour runs edge to edge, but the words and the picture sit inside
   the same 1200px column as the header and the headline, split evenly.
   That keeps the picture from growing with the window, which is what made
   each row taller than a laptop screen. */
.project-card.wide {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem);
  min-height: 0;
  padding-inline: max(clamp(1.25rem, 4vw, 3rem), calc((100% - var(--container)) / 2 + clamp(1.25rem, 4vw, 3rem)));
}
.project-copy { display: flex; flex-direction: column; gap: .75rem; align-self: stretch; }
.project-shot {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  transition: transform .2s var(--ease);
}
.project-card:hover .project-shot { transform: translateY(-3px); }
@media (max-width: 760px) { .project-card.wide { grid-template-columns: minmax(0, 1fr); } }

/* Status chip — the brand's own square, in moss, on a moss-tint pill.
   A full square reads "Live"; the half-filled one reads "Private for now",
   so the half-built mark sits on the thing that is actually half built. */
.status-dot {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  color: var(--moss-deep);
  background: var(--moss-tint);
  border: 1px solid var(--moss-tint2);
  border-radius: 999px;
  padding: .3em .8em;
}
.status-dot::before {
  content: ""; width: 11px; height: 11px; flex: none;
  border: 1.5px solid var(--moss); border-radius: 2px;
  background: var(--moss);
}
.status-dot.draft::before {
  background: linear-gradient(to right, var(--moss) 50%, transparent 50%);
}
/* On a Moss or Ink panel the chip drops its pill and the square turns Honey,
   so the mark still reads against the colour block. */
.project-card .status-dot { color: var(--paper); background: transparent; border-color: transparent; padding-inline: 0; }
.project-card .status-dot::before { border-color: var(--honey-2); background: var(--honey-2); }
.project-card .status-dot.draft::before { background: linear-gradient(to right, var(--honey-2) 50%, transparent 50%); }

/* ----- Prose (article body) ------------------------------------- */
.prose { max-width: 70ch; }
.prose > * + * { margin-top: .9rem; }
.prose h2 { margin-top: 1.8rem; font-size: clamp(1.45rem, 2.1vw, 1.9rem); }
.prose h3 { margin-top: 1.35rem; }
.prose p, .prose li { color: var(--ink-2); line-height: 1.6; }
.prose ul, .prose ol { display: grid; gap: .5rem; padding-left: 1.3rem; }
.prose ul li { list-style: disc; }
.prose ol { counter-reset: li; }
.prose ol li { list-style: decimal; }
.prose a:not(.btn) { color: var(--accent-deep); border-bottom: 1.5px solid var(--accent-tint2); }
.prose a:not(.btn):hover { border-bottom-color: var(--accent); }
.prose blockquote {
  border-left: 3px solid var(--accent); padding: .3rem 0 .3rem 1.4rem;
  font-size: 1.2rem; color: var(--ink); font-style: italic;
}
.prose code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .88em;
  background: var(--paper-2); padding: .12em .4em; border-radius: 4px; border: 1px solid var(--line);
}
.prose pre {
  background: var(--dark); color: var(--dark-ink); padding: 1.2rem 1.4rem; border-radius: var(--radius-lg);
  overflow-x: auto; font-size: .9rem; line-height: 1.6;
}
.prose pre code { background: none; border: none; padding: 0; color: inherit; }
.prose figure { margin: 1.5rem 0; }
.prose > figure:first-child { margin-top: 0; }
.prose figure img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.prose figcaption { font-size: .85rem; color: var(--ink-mute); margin-top: .6rem; text-align: center; }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 2.5rem 0; }
.callout {
  background: var(--accent-tint); border: 1px solid var(--accent-tint2);
  border-radius: var(--radius-lg); padding: 1.3rem 1.5rem;
  display: flex; gap: 1rem; align-items: flex-start;
}
.callout .ic { color: var(--accent-deep); flex: none; margin-top: .1rem; }
.callout p { color: var(--ink-2); }

/* ----- Article header -------------------------------------------------- */
.article-head { max-width: 72ch; }
.article-head .glance { display: flex; flex-wrap: wrap; gap: .6rem; }
.article-head .meta { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; margin-top: 1.4rem; color: var(--ink-mute); font-size: .9rem; }

/* ----- Breadcrumb ------------------------------------------------------ */
.crumbs { display: flex; align-items: center; gap: .55rem; font-size: .85rem; color: var(--ink-mute); margin-bottom: 1.2rem; }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { opacity: .6; }

/* ----- Filter bar ------------------------------------------------------ */
.filterbar { display: flex; flex-wrap: wrap; gap: .5rem; }
.filterbar button {
  padding: .5em 1em; border-radius: 999px; border: 1.5px solid var(--line-2);
  font-size: .88rem; font-weight: 600; color: var(--ink-2); background: var(--white);
  transition: all .16s var(--ease);
}
.filterbar button:hover { border-color: var(--ink); }
.filterbar button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ----- Footer ---------------------------------------------------------- */
.site-footer { background: var(--dark); color: var(--dark-ink); padding-block: clamp(1.5rem, 2.5vw, 2rem) 1.5rem; }
.site-footer a { color: var(--dark-ink-2); transition: color .16s var(--ease); }
.site-footer a:hover { color: var(--dark-ink); }
/* One row: the logo and the copyright. The nav above already lists the pages. */
.footer-row { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; font-size: .86rem; color: var(--dark-mute); }
.footer-logo { height: 28px; width: auto; display: block; }

/* ----- Reveal on scroll (JS-gated so content shows without JS) --------- */
.reveal { transition: opacity .6s var(--ease), transform .6s var(--ease); }
html.js .reveal { opacity: 0; transform: translateY(18px); }
html.js .reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .06s; }
.reveal.d2 { transition-delay: .12s; }
.reveal.d3 { transition-delay: .18s; }
.reveal.d4 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; } }

/* ----- Misc helpers ---------------------------------------------------- */
.divider { border: none; border-top: 1px solid var(--line); }

.skip-link {
  position: absolute; left: 1rem; top: -60px; z-index: 200;
  background: var(--ink); color: var(--paper); padding: .7em 1.1em; border-radius: var(--radius);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* The header is sticky, so anything the skip link (or any fragment) jumps to
   has to clear it — same single source as the header's own height. */
main, :target { scroll-margin-top: calc(var(--header-h) + 1rem); }