/* FreshLenny landing — intentionally framework-free. See docs/BRAND_SYSTEM.md */
:root {
  color-scheme: light only;
  --ink: #21160f;
  --tiger: #f47709;
  --red: #cf2d1e;
  --paper: #f7e8cf;
  --canvas: #fffaf0;
  --muted: #6c5142;
  /* Cream baked into the crest raster. The medallion plate uses it so the
     artwork's own background meets the page on a deliberate edge. */
  --crest-paper: #fdeed5;
  --body: "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
/* <main> is a programmatic focus target for the skip link only. Without this it
   draws a 3px outline around the whole page when the skip link is used. */
main[tabindex="-1"]:focus, main[tabindex="-1"]:focus-visible { outline: none; }

.skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 10;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 18px; background: var(--ink); color: var(--canvas);
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.top-stripe { height: 9px; background: repeating-linear-gradient(110deg, var(--ink) 0 18px, var(--tiger) 18px 38px); }
.page { min-height: calc(100svh - 9px); display: flex; flex-direction: column; }
/* <main> is the flex child of .page, so the growth has to live here. Putting
   `flex: 1` on .hero alone is inert — .hero is main > section, not a flex item
   of .page — which left a band of dead paper under the footer on any viewport
   taller than the content. */
main { display: flex; flex-direction: column; flex: 1; }
.wrap { width: min(100% - 72px, 1280px); margin-inline: auto; }

/* ---------- header ---------- */
.site-header {
  min-height: 96px; display: flex; flex-wrap: wrap; gap: 8px 24px;
  justify-content: space-between; align-items: center;
  border-bottom: 1.5px solid rgba(33, 22, 15, .22);
}
.brand {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: none; font-family: var(--display);
  font-size: clamp(1.95rem, 2.4vw, 2.6rem); font-weight: 900;
  line-height: 1; letter-spacing: -.02em;
}
.brand span { color: var(--red); }
.brand small { font: 800 .38em var(--body); letter-spacing: .04em; margin-left: 3px; }
.header-note {
  margin: 0; display: flex; align-items: center; gap: 12px;
  font-weight: 800; font-size: .68rem; letter-spacing: .14em;
}
.header-symbol { color: var(--red); font-size: 1.4rem; }

/* ---------- hero ---------- */
.hero {
  flex: 1; display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center; gap: clamp(24px, 4vw, 72px);
  padding-block: clamp(42px, 7vh, 96px) clamp(48px, 7vh, 92px);
  min-height: 600px;
}
.hero-copy { position: relative; z-index: 1; min-width: 0; }
.eyebrow {
  margin: 0 0 26px; display: flex; flex-wrap: wrap; gap: 11px; align-items: center;
  font-size: .76rem; letter-spacing: .17em; font-weight: 800;
}
.eyebrow-line { width: 27px; height: 5px; background: var(--red); flex: none; }
h1 {
  font-family: var(--display); font-weight: 900;
  /* "BIG ENERGY." measures ~4.77px of width per 1px of font-size in Barlow
     Condensed 900. The hero's left column is 57.5% of the container, so the
     cap is set to keep that line inside the column with clearance to the
     crest. Changing either number means re-running the overlap check. */
  font-size: clamp(3.5rem, 8.4vw, 8.5rem);
  letter-spacing: -.02em; line-height: .79; margin: 0; text-transform: uppercase;
}
h1 span { color: var(--red); }
.intro {
  max-width: 42ch; font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.65; font-weight: 500; color: #4e3828; margin: 34px 0 34px;
}

/* Deliberately NOT a button: no fill, no enclosing box, no arrow, nothing that
   affords a click. The weight comes from display type and a rule, the way the
   eyebrow does at the top of the stack. */
.status {
  display: flex; align-items: center; gap: 14px; margin: 0;
  max-width: 42ch; padding-top: 24px; border-top: 3px solid var(--ink);
  font: 900 clamp(1.25rem, 1.9vw, 1.7rem)/1 var(--display);
  text-transform: uppercase; letter-spacing: .045em; color: var(--ink);
}
.status-dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--tiger); box-shadow: 0 0 0 4px rgba(244, 119, 9, .22);
}

/* ---------- crest ---------- */
.hero-visual { position: relative; width: 100%; max-width: 620px; justify-self: center; }
.crest {
  border-radius: 50%;
  background: var(--crest-paper);
  padding: 2.6%;
  box-shadow: 0 0 0 1.5px rgba(33, 22, 15, .16);
}
.crest img { display: block; width: 100%; height: auto; border-radius: 50%; }
.art-stamp {
  position: absolute; right: -1%; bottom: 7%; transform: rotate(-9deg);
  background: var(--red); border: 2px solid var(--ink); color: var(--canvas);
  padding: 10px 14px; font: 900 clamp(1rem, 1.6vw, 1.4rem)/.9 var(--display);
  letter-spacing: .04em; box-shadow: 4px 4px 0 var(--ink);
}

/* ---------- ticker ---------- */
.ticker {
  margin: 0; background: var(--tiger); border-block: 2px solid var(--ink);
  padding: 13px 18px;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 4px 18px;
  font: 900 clamp(1.1rem, 1.7vw, 1.5rem)/1.22 var(--display);
  letter-spacing: .12em; text-transform: uppercase;
}
/* Pseudo-elements on a flex container are flex items, so the bookends wrap
   with the rest instead of hanging off a clipped single line. */
.ticker::before, .ticker::after { content: "✳"; font-size: 1.15em; line-height: 1; }
.ticker span { display: inline-flex; align-items: center; }
/* The separator hangs off the PRECEDING item, so a wrapped line ends with "/"
   rather than starting with one. */
.ticker span:not(:last-child)::after {
  content: "/"; margin-left: 18px; opacity: .5;
}

/* ---------- 404 ---------- */
.hero--narrow { display: block; min-height: 0; padding-block: clamp(56px, 12vh, 140px); }
.hero--narrow .hero-copy { max-width: 42ch; }
.status a { color: inherit; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.status a:hover { color: var(--red); }

/* ---------- footer ---------- */
/* Ink band under the orange ticker, mirroring the ink/orange stripe that opens
   the page, so the layout closes on a deliberate base rather than fading out. */
.site-footer {
  background: var(--ink); color: var(--canvas);
  width: 100%; max-width: none; margin: 0;
}
.footer-inner {
  min-height: 86px; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 10px 24px; padding-block: 20px;
}
.footer-mark {
  display: inline-flex; align-items: baseline; gap: 3px;
  font-family: var(--display); font-weight: 900; font-size: 1.5rem;
  line-height: 1; letter-spacing: -.015em; text-transform: uppercase;
}
.footer-mark b { font-weight: 900; color: var(--tiger); }
.footer-mark i { font: 800 .42em var(--body); font-style: normal; letter-spacing: .05em; }
.footer-note {
  display: flex; align-items: center; gap: 12px;
  font-size: .69rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
}
.footer-star { color: var(--tiger); font-size: 1.2rem; line-height: 1; }
.footer-legal { font-size: .64rem; font-weight: 700; letter-spacing: .1em; opacity: .62; }

/* ---------- responsive ---------- */
@media (max-width: 1050px) {
  .hero { gap: 28px; min-height: 520px; }
  .art-stamp { right: 0; }
}
@media (max-width: 1000px) {
  .hero {
    display: flex; flex-direction: column; align-items: stretch;
    min-height: 0; gap: 34px; padding-block: 52px 60px;
  }
  .hero-visual { width: min(100%, 520px); align-self: center; }
}
@media (max-width: 720px) {
  .wrap { width: min(100% - 36px, 1280px); }
  .site-header { min-height: 74px; }
  .header-note { display: none; }
  .hero { gap: 30px; padding-block: 44px 52px; }
  .eyebrow { margin-bottom: 20px; font-size: .7rem; }
  .intro { margin: 22px 0 22px; font-size: 1.03rem; }
  .hero-visual { width: min(100%, 460px); }
  .art-stamp { right: 1%; bottom: 6%; }
  .ticker { letter-spacing: .08em; gap: 2px 13px; }
  .ticker span:not(:last-child)::after { margin-left: 13px; }
  .footer-inner { min-height: 0; padding-block: 24px; gap: 14px; }
  .footer-note { font-size: .64rem; }
}
@media (max-width: 380px) {
  h1 { font-size: 13.4vw; }
  .eyebrow { letter-spacing: .11em; }
  .status { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }