/* Brinkworks — minimal home page styles
   Standalone stylesheet for the minimal (hero + footer only) variant.
   Loads alongside tokens.css only — it does not load or depend on
   site.css, and site.css does not depend on this file. Some component
   rules below (buttons, the drafting diagram, the theme toggle, the
   logo mark) are intentionally duplicated from site.css rather than
   shared, so each variant's stylesheet stays a complete, independent
   unit — see README "Home-page variants". Both files reference the
   same tokens.css custom properties, so no colour or spacing value is
   duplicated, only the selectors/rules that use them. */

/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.55;
  font-size: 1.0625rem;
}

img,
svg {
  max-width: 100%;
  display: block;
}

h1,
h2,
p {
  margin: 0 0 var(--space-2);
}

a {
  color: inherit;
}

h1,
h2 {
  font-family: var(--font-display);
  font-weight: 600;
}

h2 {
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.75rem);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* Layout */
.container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-3);
  width: 100%;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-2);
  z-index: 100;
  background: var(--color-text);
  color: var(--color-bg);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
  font-weight: 600;
}

.skip-link:focus {
  top: 0;
}

/* Focus visibility */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Page composition — no fixed/100vh + overflow:hidden. min-height on
   body (above) lets content grow past one viewport naturally on short
   screens; the grid just gives the hero the full first row and lets
   the footer take only the height its content needs, in the second. */
#main {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Logo — text wordmark plus a small optional geometric mark. Same
   prototype-only mark as the full variant: a self-contained <svg>,
   safe to delete without other changes. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  text-decoration: none;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.logo-mark {
  width: 20px;
  height: 20px;
  flex: none;
}

.logo-mark .m-ink {
  stroke: var(--color-text);
}

.logo-mark .m-brass {
  stroke: var(--color-accent);
}

/* Theme toggle — hidden until JS confirms it will actually work.
   Identical rules to site.css's toggle; it just lives in the hero's
   top row here instead of a <header>. */
.theme-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  flex: none;
}

html.js .theme-toggle {
  display: inline-flex;
}

.theme-toggle:hover {
  border-color: var(--color-border-strong);
  color: var(--color-accent);
}

.theme-toggle .icon {
  width: 20px;
  height: 20px;
}

.theme-toggle .icon-moon {
  display: block;
}

.theme-toggle .icon-sun {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}

/* Hero */
.minimal-hero {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding-block: var(--space-4);
  overflow: hidden;
}

/* .minimal-top-row and .hero-body are children of .container, not of
   .minimal-hero directly — without this, .hero-body's flex/grid
   alignment properties below have no effect, because flex/grid
   properties on an element only apply if its own parent participates
   in that layout, and a plain .container is neither. */
.minimal-hero > .container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.minimal-top-row {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-block-end: var(--space-4);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.hero-body {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--space-5);
  align-items: center;
  align-content: center;
  min-height: 0;
}

.hero-copy h1 {
  font-size: clamp(2.2rem, 1.6rem + 2.8vw, 3.6rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 17ch;
  margin-bottom: var(--space-3);
}

.hero-lede {
  font-size: clamp(1.02rem, 1rem + 0.3vw, 1.15rem);
  color: var(--color-text-muted);
  max-width: 50ch;
  margin-bottom: var(--space-4);
}

.hero-diagram {
  width: 100%;
  height: auto;
}

/* Diagram theming */
.d-ink {
  stroke: var(--color-text);
  fill: none;
}

.d-brass {
  stroke: var(--color-accent);
  fill: none;
}

.d-brass-fill {
  fill: var(--color-accent);
}

.d-pine-fill {
  fill: var(--color-secondary);
}

.d-soft {
  stroke: var(--color-text-soft);
  fill: none;
  opacity: 0.4;
}

.d-label {
  fill: var(--color-text-soft);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
}

/* Hero draw-on sequence — a small, one-time, load-triggered animation.
   No scroll trigger, no IntersectionObserver: it just plays once when
   the hero paints. Reduced-motion turns it off below. */
.draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  animation: draw-in 0.8s var(--ease) forwards;
  animation-delay: var(--d, 0s);
}

.fade-mark {
  opacity: 0;
  animation: fade-in 0.5s var(--ease) forwards;
  animation-delay: var(--d, 0s);
}

@keyframes draw-in {
  0% {
    stroke-dashoffset: 1;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes fade-in {
  to {
    opacity: 1;
  }
}

/* Delay steps for the sequence above — named classes rather than an
   inline `style="--d:...".` — a CSP with no `'unsafe-inline'` in
   style-src blocks inline style attributes, so the delay has to be set
   from the stylesheet instead. */
.d-delay-1 {
  --d: 0.05s;
}
.d-delay-2 {
  --d: 0.15s;
}
.d-delay-3 {
  --d: 0.45s;
}
.d-delay-4 {
  --d: 0.55s;
}
.d-delay-5 {
  --d: 0.7s;
}
.d-delay-6 {
  --d: 0.95s;
}
.d-delay-7 {
  --d: 1s;
}
.d-delay-8 {
  --d: 1.3s;
}
.d-delay-9 {
  --d: 1.4s;
}

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  border: 1px solid transparent;
}

.button-primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-color: var(--color-accent);
}

.button-primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* Ghost variant — used for the header's persistent CTA. Deliberately
   more compact than the primary hero button (still >=44px tall). */
.button-ghost {
  min-height: 2.75rem;
  padding: 0.6rem 1.25rem;
  font-size: 0.9rem;
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.button-ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Footer */
.minimal-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-3);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}

.footer-inner p {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-bottom: 0;
}

.footer-inner a {
  text-decoration: none;
}

.footer-inner a:hover {
  color: var(--color-accent);
}

/* Theme transitions — only once the page has settled (see site.js),
   so the very first paint never animates, and only colour-ish
   properties ever transition (never layout, size or type). */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  html.theme-ready body,
  html.theme-ready .theme-toggle,
  html.theme-ready .button,
  html.theme-ready .minimal-footer {
    transition: background-color 0.15s ease, border-color 0.15s ease,
      color 0.15s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }

  .draw,
  .fade-mark {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

/* Medium screens — stack copy above diagram, same threshold as the
   full variant's hero */
@media (max-width: 56rem) {
  .hero-body {
    grid-template-columns: 1fr;
  }

  .hero-diagram {
    max-width: 20rem;
    margin-inline: auto;
  }
}

/* Small screens */
@media (max-width: 30rem) {
  .minimal-hero {
    padding-block: var(--space-3);
  }
}