/* ═══════════════════════════════════════════════════════════════
   SMASHED STUDIOS — one stylesheet for the whole site.

   Every page links this file. Change something here and it changes
   everywhere. You should never need a <style> block on a page.

   ONE typeface (the system sans). No webfonts. No radius. No shadows.
   The only gradient is the page background. If you add a second
   typeface or a rounded card, the site starts looking generated again.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── page gradient ──
     Clean paper at the top, warming to soft peach at the footer.
     To dial the warmth up or down, change --paper-warm only.
     Lighter = less orange.  #FFFEFB is no gradient at all. */
  --paper:      #FFFEFB;   /* top of the page */
  --paper-mid:  #FEF9F2;   /* 45% down */
  --paper-warm: #FCEEE2;   /* the footer */

  --ink:        #161613;   /* headings, list lines */
  --gray:       #55544C;   /* body copy */
  --mute:       #6B6A61;   /* labels, secondary. 4.8:1 on the warmest area */
  --faint:      #6D6C63;   /* row numbers, placeholders.
                              Nearly the same as --mute on purpose: anything
                              lighter fails AA against the warm end of the
                              gradient. Hierarchy here comes from size
                              (.74rem vs 1.06rem), not from colour. */
  --line:       #E3E1D9;   /* every rule and divider on the site */
  --orange:     #E8530A;   /* underlines, the mark */
  --orange-ink: #C74708;   /* orange used as text (passes contrast) */
  --chip:       #F3EFE8;

  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ── TYPE SCALE ──
   One typeface, ten steps. Use a step from this list. Don't invent
   .95rem because it "looks a bit big" — that's how a stylesheet ends
   up with .88 / .9 / .92 / .94 / .95 / .96 all on one page, which
   reads as sloppy rather than as hierarchy.

     2rem      legal page title
     clamp()   section headings (1.4 to 1.95)
     1.12rem   small headings: product name, intake, sec h3, legal h2
     1.06rem   the list blurb on the home page
     1rem      lead / intro paragraphs
     .94rem    all body copy
     .88rem    inline links, notes, nav
     .78rem    footer, form labels
     .74rem    list numbers
     .66rem    section labels, dates                                  */

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

/* html carries a flat colour so the body background does NOT propagate
   to the canvas — that's what lets the gradient span the real document
   height instead of just the viewport. */
html { scroll-behavior: smooth; background: var(--paper); }

body {
  min-height: 100vh;
  background-image: linear-gradient(to bottom,
    var(--paper)      0%,
    var(--paper-mid) 45%,
    var(--paper-warm) 100%);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

::selection { background: var(--orange); color: #fff; }

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 40px; }
.wrap-narrow { max-width: 720px; margin: 0 auto; padding: 0 40px; }

/* small caps-ish label, used for dates and meta */
.m { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; }

/* for headings that must exist for screen readers but not be seen */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── STICKY HEADER ────────────────────────────
   The same bar on every page. Logo left-justified, sticks to the top.
   The home page carries no links at all. build.html adds its section
   links on the right. */
.site-head {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 254, 251, .88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-head-in {
  max-width: 1060px; margin: 0 auto; padding: 15px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.wordmark { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: .94rem; letter-spacing: -.01em; }
.wordmark svg { width: 16px; height: 16px; flex-shrink: 0; }
.head-links { display: flex; gap: 20px; font-size: .88rem; align-items: baseline; }
.head-links a { color: var(--gray); }
.head-links a:hover { color: var(--ink); }
.head-links .cta { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--orange); padding-bottom: 1px; }
.head-links .cta:hover { color: var(--orange-ink); }

/* ── HERO (build.html and the leaf pages) ── */
.hero { padding: 76px 0 52px; }
.hero h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); font-weight: 700; letter-spacing: -.032em; line-height: 1.1; max-width: 20ch; }
.hero .intro { margin-top: 26px; font-size: 1rem; line-height: 1.62; color: var(--gray); max-width: 58ch; }
.hero .intro b { font-weight: 600; color: var(--ink); }
.hero .intro + .intro { margin-top: 14px; }

/* ── SECTION RULE ── */
.rule-h {
  font-size: .66rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--mute); font-weight: 600;
  padding: 30px 0 9px; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 16px;
}

/* ── EXPANDING LIST (home page) ───────────────
   Built on <details>/<summary>, so clicking a line expands it with
   zero JavaScript. Each line is a number and a blurb — the product
   name only appears once the line is open.
   A row with nothing to reveal uses .line instead, so the "+"
   appears only where there is something behind it. */
.items { margin-bottom: 4px; }
.item { border-bottom: 1px solid var(--line); }
.item > summary, .items .line {
  display: grid; grid-template-columns: 42px 1fr 18px;
  gap: 18px; align-items: baseline; padding: 17px 0;
}
.items .line { border-bottom: 1px solid var(--line); }
.item > summary { cursor: pointer; list-style: none; }
.item > summary::-webkit-details-marker { display: none; }
.item > summary::after {
  content: '+'; font-size: .94rem; color: var(--orange-ink);
  text-align: right; line-height: 1;
}
.item[open] > summary::after { content: '\2013'; }
.item > summary:hover .blurb { color: var(--orange-ink); }
.items .no { font-size: .74rem; color: var(--faint); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.items .blurb { font-size: 1.06rem; letter-spacing: -.012em; line-height: 1.35; }

/* the panel revealed on click.
   Must be display:none when closed — setting any display value on a
   child of a closed <details> overrides the native hiding. */
.panel { display: none; }
.item[open] > .panel { display: grid; grid-template-columns: 330px 1fr; gap: 28px; padding: 2px 0 30px 60px; }
.item[open] > .panel.tall { grid-template-columns: 190px 1fr; }
/* .solo has no image, so the text takes the full width at a
   readable measure. Used by the 00 "about" line. */
.item[open] > .panel.solo { grid-template-columns: minmax(0, 62ch); }
.panel figure { margin: 0; border: 1px solid var(--line); }
/* height:auto is required — the width/height attributes on the <img>
   would otherwise force the intrinsic pixel height. */
.panel figure img { width: 100%; height: auto; display: block; }
/* Placeholder card for a product with no image yet. Unused right now,
   kept because the next product will need it before its art exists. */
.panel .ph {
  aspect-ratio: 1200 / 630; background: var(--chip);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: .66rem; letter-spacing: .02em; color: var(--faint); padding: 14px; line-height: 1.7;
}
.panel .why h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: 7px; }
.panel .why p { font-size: .94rem; line-height: 1.62; color: var(--gray); }
.panel .why p + p { margin-top: 10px; }
.panel .why .url {
  display: inline-block; margin-top: 14px; font-size: .88rem; font-weight: 600;
  border-bottom: 2px solid var(--orange); padding-bottom: 2px;
}
.panel .why .url:hover { color: var(--orange-ink); }

/* ── GENERIC SECTIONS ── */
.sec { padding: 52px 0 56px; border-top: 1px solid var(--line); margin-top: 46px; }
.sec-hard { border-top: 1px solid var(--line); }
.sec h2 { font-size: clamp(1.4rem, 3vw, 1.95rem); font-weight: 700; letter-spacing: -.028em; line-height: 1.16; max-width: 28ch; }
.sec p { margin-top: 14px; font-size: .94rem; line-height: 1.62; color: var(--gray); max-width: 58ch; }
.sec h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: 6px; }

.go { display: inline-block; margin-top: 20px; font-size: .88rem; font-weight: 600; border-bottom: 2px solid var(--orange); padding-bottom: 2px; }
.go:hover { color: var(--orange-ink); }
.lk { border-bottom: 1px solid var(--orange); }
.lk:hover { color: var(--orange-ink); }

/* ── PLAIN LIST ── */
.list li { font-size: .94rem; line-height: 1.6; color: var(--gray); padding: 13px 0; border-bottom: 1px solid var(--line); max-width: 70ch; }
.list li:last-child { border-bottom: none; }
.list li b { font-weight: 600; color: var(--ink); }

/* ── SPLIT LAYOUT (build page) ──
   Information on the left, intake form on the right. On desktop the
   two columns are stretched to equal height (align-items: stretch),
   and the form is compact enough that it never needs that full
   height on its own — the gap between its last field and the submit
   button absorbs the difference (.intake .form uses margin-top:auto
   on the button), so the button always lands flush with the bottom
   of the left column, however long that column happens to be.
   On mobile this whole mechanism is inert: a single-column grid gives
   each side its own row sized to its own content, so there's no
   extra height to distribute and the form just stacks normally. */
.split {
  display: grid; grid-template-columns: 1fr 380px;
  gap: 56px; align-items: stretch; padding: 50px 0 60px;
}
.split .info h1 { font-size: clamp(1.75rem, 3.4vw, 2.45rem); font-weight: 700; letter-spacing: -.032em; line-height: 1.12; }
.split .info .intro { margin-top: 20px; font-size: 1rem; line-height: 1.62; color: var(--gray); max-width: none; }
.split .info .intro + .intro { margin-top: 12px; }
.split .info .rule-h { padding-top: 34px; }

.intake { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; }
.intake h2 { font-size: 1.12rem; font-weight: 700; letter-spacing: -.02em; }
.intake > p { margin-top: 4px; font-size: .88rem; line-height: 1.55; color: var(--gray); }
.intake .form { margin-top: 10px; max-width: none; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
/* Name and Email share a row here (there's room in 380px), which is
   also what buys back the height the bottom-anchor needs to work
   with. Mobile reverts this to one field per row, same as any other
   .form-row on the site.

   The form's own content must stay SHORTER than the left column's
   text, or grid stretch inflates the left column with invisible
   trailing space to match, and the button ends up flush with that
   padding instead of the actual end of the text. Compressed field
   spacing here is what keeps that from happening. */
.intake .form-row { grid-template-columns: 1fr 1fr; gap: 14px; }
.intake .fg { margin-bottom: 5px; }
.intake .fg label { margin-bottom: 3px; }
.intake .fg input, .intake .fg select { padding: 7px 12px; }
.intake .fg textarea { min-height: 58px; }
.intake .form-note { margin-top: 6px; }
/* Pushes the button (and the note right after it) down to the
   bottom of the form's flex box. Only does anything on desktop,
   where .intake has been stretched taller than its own content. */
.intake .form button[type=submit] { margin-top: auto; }

/* Sticky only where the whole form fits between the header and the
   bottom of the window. Any lower and the submit button gets
   stranded off-screen with no way to scroll to it. */
@media (min-height: 900px) {
  .intake { position: sticky; top: 82px; }
}

/* ── FORMS ── */
.form { margin-top: 26px; max-width: 640px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fg { margin-bottom: 18px; }
.fg label { display: block; font-size: .78rem; font-weight: 600; margin-bottom: 6px; }
/* Required-field marker, driven by the `required` attribute itself,
   not by a separate class. Mark a field required or not in the HTML
   and this follows automatically, so the asterisk can't drift out of
   sync with what the browser actually enforces. */
.fg:has([required]) label::after { content: " *"; color: var(--orange-ink); }
.fg input, .fg select, .fg textarea {
  width: 100%; font-family: var(--sans); font-size: .94rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 0;
  padding: 10px 12px; -webkit-appearance: none; appearance: none;
}
.fg select {
  background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%), linear-gradient(135deg, var(--mute) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px;
}
.fg textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
.fg input:focus, .fg select:focus, .fg textarea:focus { outline: none; border-color: var(--ink); }
.fg input::placeholder, .fg textarea::placeholder { color: var(--faint); }
button[type=submit] {
  font-family: var(--sans); font-size: .88rem; font-weight: 600; color: #fff;
  background: var(--ink); border: none; border-radius: 0; padding: 12px 22px; cursor: pointer;
}
button[type=submit]:hover { background: var(--orange-ink); }
.form-note { margin-top: 12px; font-size: .78rem; color: var(--mute); }

/* ── LEGAL PAGES ── */
.legal { padding: 46px 0 60px; }
.legal h1 { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; }
.legal .eff { margin-top: 8px; color: var(--mute); }
.legal h2 { font-size: 1.12rem; font-weight: 700; letter-spacing: -.015em; margin: 32px 0 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.legal p { font-size: .94rem; line-height: 1.68; color: var(--gray); max-width: 68ch; }
.legal p + p { margin-top: 12px; }

/* ── FOOTER ── */
footer { border-top: 1px solid var(--line); padding: 26px 0 40px; margin-top: 20px; }
.foot-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot-top .c { font-size: .78rem; color: var(--mute); }
.socials { display: flex; gap: 14px; }
.socials a { color: var(--mute); display: flex; }
.socials a:hover { color: var(--ink); }
.socials svg { width: 17px; height: 17px; fill: currentColor; }
.foot-bottom { margin-top: 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.foot-links { display: flex; gap: 18px; }
.foot-links a { font-size: .78rem; color: var(--mute); }
.foot-links a:hover { color: var(--ink); }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  /* info stacks above the form. The bottom-anchor trick above only
     applies when the columns are stretched to match, so undo it here:
     one field per row, and the button sits right after the last one
     instead of being pushed to a shared bottom edge that no longer
     exists. */
  .split { grid-template-columns: 1fr; gap: 40px; padding-top: 36px; }
  .intake { position: static; }
  .intake .form-row { grid-template-columns: 1fr; }
  .intake .form button[type=submit] { margin-top: 0; }
}

@media (max-width: 860px) {
  .form-row { grid-template-columns: 1fr; }
  .item[open] > .panel,
  .item[open] > .panel.tall { grid-template-columns: 1fr; padding-left: 0; gap: 20px; }
  .panel figure { max-width: 380px; }
  .panel.tall figure { max-width: 190px; }
}

@media (max-width: 760px) {
  .wrap, .wrap-narrow { padding: 0 20px; }
  .site-head-in { padding: 13px 20px; flex-wrap: wrap; gap: 10px 16px; }
  .head-links { gap: 16px; flex-wrap: wrap; font-size: .78rem; }
  .hero { padding: 50px 0 40px; }
  .item > summary, .items .line { grid-template-columns: 30px 1fr 16px; gap: 12px; padding: 15px 0; }
  .items .blurb { font-size: 1rem; }
  .foot-top, .foot-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}