/* FierceGrow — grow.keatondalquist.com
 *
 * Implements FierceGrow.dc.html. The canvas file carried its styling as inline
 * attributes on every element, plus two canvas-only constructs: <sc-if> section
 * toggles (both default true, so both sections are simply present here) and
 * style-hover attributes (real :hover rules below).
 *
 * The palette is the canvas palette unchanged, lifted into custom properties so
 * a colour is stated once. Colours are oklch, as authored.
 *
 * What the canvas did not have, because a fixed-width artboard never needs it,
 * is any behaviour below 1000px. Every multi-column grid here collapses; see the
 * media queries at the bottom, which are the only place that happens.
 */

:root {
  --paper:     oklch(0.965 0.008 85);
  --ink:       oklch(0.20 0.012 150);
  --ink-2:     oklch(0.38 0.015 150);
  --meta:      oklch(0.52 0.015 150);

  --rust:      oklch(0.50 0.12 45);
  --rust-deep: oklch(0.42 0.12 45);
  --rust-lift: oklch(0.72 0.11 45);

  --rule:      oklch(0.87 0.01 85);
  --dark:      oklch(0.20 0.025 150);
  --dark-ink:  oklch(0.96 0.01 85);
  --dark-dim:  oklch(0.74 0.02 150);

  --serif: Newsreader, Georgia, 'Times New Roman', serif;
  --mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --pad: 48px;          /* the canvas gutter; narrows on small screens */
  --measure: 1080px;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.62;
  text-wrap: pretty;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--rust); text-decoration: none; border-bottom: 1px solid oklch(0.82 0.06 45); }
a:hover { color: oklch(0.38 0.10 45); border-bottom-color: var(--rust); }

::selection { background: oklch(0.88 0.06 45); }

:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }

img { max-width: 100%; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* The recurring small-caps monospace label. Six places use it. */
.masthead, .spec, .prose__rail, .quote__rail, .footer {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── Masthead ─────────────────────────────────────────────────────────────── */

.masthead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 24px var(--pad);
  color: var(--meta);
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  display: flex;
  height: 46vh;
  min-height: 300px;
  max-height: 620px;
  background: oklch(0.28 0.03 150);   /* holds the band while the JPEG decodes */
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The sow sits low-centre and the cubs ride the upper third; anchoring the
     crop below centre keeps all four in frame as the band shortens. */
  object-position: 50% 62%;
  display: block;
}

/* ── Intro ────────────────────────────────────────────────────────────────── */

.intro {
  padding: 44px var(--pad) 60px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.wordmark {
  margin: 0;
  font-weight: 400;
  font-size: clamp(64px, 12.5vw, 200px);
  line-height: 0.84;
  letter-spacing: -0.05em;
}

.intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 48px;
  border-top: 1px solid oklch(0.86 0.01 85);
  padding-top: 26px;
}

.lede {
  margin: 0;
  max-width: 640px;
  font-size: clamp(19px, 1.8vw, 26px);
  line-height: 1.45;
  font-weight: 300;
}

.spec {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  letter-spacing: 0.12em;
  color: var(--meta);
}

.spec__lead { color: var(--rust); }

/* ── Ingredients ──────────────────────────────────────────────────────────── */

.ingredients {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: oklch(0.88 0.012 150);   /* shows through as the hairline rules */
}

/* Square because these are photo wells, and they stay square so the space the
   photographs will occupy is the space they are designed into. */
.ingredient {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 22px;
  background-image: repeating-linear-gradient(135deg, var(--hatch-a) 0 7px, var(--hatch-b) 7px 14px);
}

.ingredient--salmon { --hatch-a: oklch(0.92 0.014 45);  --hatch-b: oklch(0.95 0.01 45); }
.ingredient--kelp   { --hatch-a: oklch(0.92 0.014 150); --hatch-b: oklch(0.95 0.01 150); }
.ingredient--bear   { --hatch-a: oklch(0.92 0.014 85);  --hatch-b: oklch(0.95 0.01 85); }

.ingredient__name {
  margin: 0;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* ── Numbered prose sections (01 Story, 02 Harvest) ───────────────────────── */

.prose {
  padding: 110px var(--pad);
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 40px;
  max-width: calc(var(--measure) + var(--pad) * 2);
  margin-inline: auto;
  width: 100%;
}

.prose__rail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  letter-spacing: 0.12em;
  color: var(--meta);
}

.prose__num { color: var(--rust); }

.prose__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 660px;
}

.prose__body p { margin: 0; }

.prose__opener {
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.3;
  font-weight: 300;
  letter-spacing: -0.015em;
}

/* ── Quote ────────────────────────────────────────────────────────────────── */

.quote {
  background: var(--dark);
  color: var(--dark-ink);
  padding: 96px var(--pad);
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  max-width: calc(var(--measure) + var(--pad) * 2);
  margin-inline: auto;
  width: 100%;
}

/* The dark band is full-bleed even though its contents are measured. */
.quote { box-shadow: 0 0 0 100vmax var(--dark); clip-path: inset(0 -100vmax); }

.quote__rail { color: var(--rust-lift); }

.quote__text {
  margin: 0;
  max-width: 860px;
  font-size: clamp(26px, 3.4vw, 46px);
  line-height: 1.24;
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.02em;
}

/* ── Harvest cards ────────────────────────────────────────────────────────── */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.card {
  background: var(--paper);
  padding: 30px 26px 34px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card__num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--rust);
}

.card__title {
  margin: 0;
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -0.01em;
}

.card p {
  margin: 0;
  font-size: 17px;
  color: var(--ink-2);
}

/* ── Product ──────────────────────────────────────────────────────────────── */

.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border-top: 1px solid var(--rule);
}

/* The package-shot well. Empty until there is a package to photograph — the
   reserved space is the design, so it holds its height rather than collapsing. */
.product__well {
  min-height: 620px;
  background-image: repeating-linear-gradient(135deg, oklch(0.91 0.016 45) 0 7px, oklch(0.945 0.012 45) 7px 14px);
}

.product__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
  padding: 90px var(--pad) 90px 64px;
}

.prose__rail--inline { padding: 0; }

.product__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product__title {
  margin: 0;
  font-weight: 400;
  font-size: clamp(38px, 4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.product__price {
  font-size: 40px;
  line-height: 1.2;
  color: var(--rust-deep);
}

.product__note {
  margin: 0;
  max-width: 400px;
  font-size: 17px;
  color: var(--ink-2);
}

.product__status {
  margin: 0;
  max-width: 420px;
  padding-left: 18px;
  border-left: 2px solid var(--rust);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

.footer {
  background: var(--dark);
  color: var(--dark-dim);
  padding: 56px var(--pad);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
}

.footer__line { color: var(--dark-ink); }

/* ── Below the artboard ───────────────────────────────────────────────────── */

/* Three across is the whole point of the ingredient row and the harvest cards,
   so they hold as long as they can and then go straight to one. Two columns
   would leave an orphan in both. */
@media (max-width: 900px) {
  .ingredients, .cards { grid-template-columns: 1fr; }

  /* Three stacked squares is three full screens of scroll for three lines of
     type. The wells keep a generous band instead, and go back to square when
     there are photographs to hold. */
  .ingredient { aspect-ratio: 16 / 7; }

  .product { grid-template-columns: 1fr; }
  /* The empty well below the copy rather than above it: stacked, it would
     otherwise be the first thing on the section and say nothing. */
  .product__well { min-height: 220px; order: 2; }
  .product__copy { padding: 64px var(--pad); }

  .prose, .quote { grid-template-columns: 1fr; gap: 20px; padding-block: 76px; }

  /* Stacked, the rail reads as a heading rather than a margin note. */
  .prose__rail, .quote__rail { flex-direction: row; gap: 12px; }
}

@media (max-width: 620px) {
  :root { --pad: 22px; }

  body { font-size: 17px; }

  .masthead { flex-direction: column; gap: 4px; }

  .hero { height: 38vh; min-height: 240px; }

  .intro__grid { grid-template-columns: 1fr; gap: 28px; }

  .quote { padding-block: 64px; }

  .footer { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .hero { height: 240px; }
  .quote, .footer { box-shadow: none; clip-path: none; }
}