/* Figment blocks. The 12 column grid in .inner owns all horizontal placement.
   No block sets its own max-width; if something needs to be narrower it takes
   fewer columns. That is the whole layout system. */

.block{position:relative;padding:var(--space-section) var(--gutter)}
.block--tight{padding-block:var(--space-tight)}
/* Deliberately unused. Alternating section backgrounds contradict the light
   ramp: they put hard edges on a surface that is supposed to read as one
   continuous gradient from off-white down to warm clay. The only intentional
   colour break on the page is the terracotta turn. */
.block--alt{background:var(--dusk-alt)}
.inner{
  display:grid;
  grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));
  column-gap:var(--gutter);
  max-width:var(--grid-max);
  margin:0 auto;
}
/* the only four placements on the site */
.c-full   {grid-column:1 / -1}
.c-lead   {grid-column:1 / 9}     /* columns 1-8, display type */
.c-body   {grid-column:1 / 7}     /* columns 1-6, running copy */
.c-offset {grid-column:7 / -1}    /* columns 7-12, the deliberate void at left */
@media (max-width:900px){
  .c-lead,.c-body,.c-offset{grid-column:1 / -1}
}




/* ---------- 1 HERO ---------- */
.hero{
  /* Capped, not unbounded. A hero fills the screen on a normal window, but on
     a 2200px tall one a full-height hero is just a void with a headline in it.
     Above 960px the hero stops growing and the page below it starts. */
  min-height:min(100svh, 960px);
  display:flex;flex-direction:column;
  gap:clamp(14px, 2.8vh, 34px);
  padding-block:var(--space-tight);
  background-image:var(--hero-image);background-size:cover;background-position:center;
}
.hero::after{content:"";position:absolute;inset:0;background:var(--charcoal);
  opacity:var(--hero-scrim-opacity);pointer-events:none}
.hero > *{position:relative;z-index:2}
/* The FIGMENT logo. Milk Bar drawn to vector outlines, per 02_Brand_and_Design.
   currentColor so it inherits the dusk ink and stays correct at every point
   on the light ramp. */
/* .hero is a flex column and .inner carries margin:0 auto. Auto margins on a
   flex item override stretch, which collapses the grid to its content width.
   Regression: this was fixed once, then lost in the grid rewrite. */
.hero > .inner{width:100%}

.wordmark{display:block;justify-self:start;width:clamp(128px,13vw,196px);height:auto;color:var(--dusk-ink)}
.wordmark--foot{width:clamp(96px,8vw,132px)}
/* THE HERO'S VERTICAL LAYOUT.
   The wordmark block sits at the top of the screen. The content block centres
   in whatever height is left. That is it, and it holds at every width and
   height without a single breakpoint.
   What was here before: margin-bottom:auto on the first block AND
   margin-top:auto on the last. Those are two auto margins on opposite sides of
   the SAME gap, so every pixel of leftover height pooled into it. Measured:
   419px of dead space at 390x1200, 997px at 500x1700, 1355px at 684x2003, and
   714px at 1440x1600. It was never a mobile bug; it scaled with viewport
   height at every width.
   margin-block:auto on the last block alone gives it equal auto margins top
   and bottom, so it centres in the space the header does not use, and the
   header stays where it is put. */
.hero{justify-content:flex-start}
.hero > .inner:first-child{flex:0 0 auto}
.hero > .inner:last-child{margin-block:auto}

.hero__title{font-size:var(--t-hero);line-height:var(--lh-hero);letter-spacing:var(--tr-hero)}
/* the paradox, sitting between the hero line and the facts. A third step in
   the hierarchy rather than a second display size competing with the H1. */
.hero__sub{
  font-family:var(--font-display);
  font-size:clamp(24px, 2.8vw, 40px);
  line-height:1.1;
  letter-spacing:-0.018em;
  margin-top:var(--gap-after-display);   /* was 1.5x body, which broke the system */
  color:var(--burnt);
}
.hero__body{margin-top:var(--gap-after-display)}
.hero__body .u-lead + .u-lead{margin-top:calc(var(--t-body) * 1.1)}

/* the ethos, one line, sitting under the closing headline */
.ethos{
  font-family:var(--font-display);
  font-size:clamp(24px, 2.8vw, 40px);
  line-height:1.12;
  letter-spacing:-0.02em;
  margin-top:var(--gap-after-display);   /* even with the gap below it */
  color:var(--charcoal);
}
/* orientation. A cold visitor must be able to name the category, the place and
   the timing before reading a single line of display type. */
.hero__eyebrow{margin-top:calc(var(--t-body) * 1.1);opacity:.7}

/* ---------- 2 THE NIGHT ---------- */
.beat__h{font-size:var(--t-display)}
/* the closing line of the night: steps up out of the body so it lands as a
   statement rather than a fourth paragraph */
.beat__close{
  font-family:var(--font-display);
  font-size:var(--t-lead);
  line-height:1.18;
  letter-spacing:-0.018em;
  margin-top:var(--gap-after-display) !important;
  max-width:none !important;
}
/* The wordmark set inline, not the word typed in Birdie. Sized so Milk Bar's
   cap height (0.693em) matches Birdie's (0.596em), and dropped by the share of
   the SVG that sits below the baseline (200 of 980 units) so the baselines meet.
   Both values are derived, not eyeballed. */
.logo-inline{
  display:inline-block;
  height:0.843em;
  width:auto;
  vertical-align:-0.172em;
  color:inherit;
}
.beat__body{margin-top:var(--gap-after-display)}

/* The curtain. One discrete scrubbed move, used once. A band that opens from
   the centre as it enters view. Not a wipe transition between sections, and
   not decoration: it is the only object on the page that behaves the way the
   room behaves. Falls open with JS off and under reduced motion. */
.curtain{clip-path:inset(var(--curtain, 0%) 0 var(--curtain, 0%) 0)}

/* ---------- 3 NOT A BALLROOM ----------
   A full-bleed terracotta field carrying display type and nothing else.
   Charcoal on terracotta measures 4.21:1, which clears large text but not
   body, so every paragraph lives on the limewash block that follows. */
/* Burnt, not Terracotta, and the whole field is set in cream. Cream on Burnt
   measures 4.77:1, which clears the 3:1 bar for display type with room to
   spare and is the highest contrast this section has ever held: charcoal on
   the old Terracotta field was 4.21:1 and the script line was 3.20:1. */
.block--accent{background:var(--burnt);color:var(--cream)}
.turn{padding-block:var(--space-section)}   /* was a third padding value; the system is two */
.turn__kicker{font-size:var(--t-display)}
/* The answer to the two negations above it, in the script.
   Title case is load-bearing here, not a style choice: Taxi Driver's lowercase
   v reads as a u, so "venue" renders as "uenue". Its capital V is unambiguous,
   so "A Wedding Venue" is legible where "a wedding venue" is not.
   The field is set in cream throughout, so this line no longer needs its own
   colour; it is left declared so the rule survives a change of field colour. */
.turn__hand{display:block;margin-top:calc(var(--t-body) * 2.4);color:var(--cream)}
.turn__body{margin-top:0}

/* ---------- 7 THE ASK ---------- */
.form{margin-top:var(--gap-after-display)}
.form--hero{margin-top:calc(var(--t-body) * 1.9)}
.form__note{margin-top:calc(var(--t-body) * .9);opacity:.72}
.form__row{display:flex;flex-wrap:wrap;gap:12px;margin-top:calc(var(--t-body) * .7)}
.form__input{flex:1 1 17rem;font:inherit;color:var(--ink);background:var(--limewash);
  border:1px solid var(--rule);border-radius:var(--radius);padding:.9em 1em;letter-spacing:0}
.form__input::placeholder{color:var(--ink);opacity:.55}
.form__input:hover{border-color:var(--ink)}
/* Burnt Terracotta measures 4.68:1 with limewash text, the only value in the
   palette that clears 4.5:1 for a 19px label. Terracotta is 3.09 and Deep Sage
   is 4.13, so neither can carry button text. */
.form__button{font:inherit;font-weight:500;color:var(--limewash);background:var(--burnt);
  border:1px solid var(--burnt);border-radius:var(--radius);
  padding:.9em 1.6em .9em 1.4em;cursor:pointer;letter-spacing:0;
  transition:padding-right var(--dur-micro) var(--ease),background-color var(--dur-micro) var(--ease)}
.form__button:hover{padding-right:2em}
.form__pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__status:empty{display:none}

/* ---------- 8 FOOTER ---------- */
.foot{padding-block:var(--space-tight)}
.foot__row{display:flex;flex-wrap:wrap;align-items:center;gap:1.2em 2.4em;justify-content:space-between}
.rule{border:0;border-top:1px solid var(--rule);margin:0}

/* SLOT: artifact, rubric B1, open by decision D7 */
.artifact{width:var(--artifact-size);aspect-ratio:1/1;color:var(--ink)}

@media (max-height: 680px){ .hero{min-height:auto} }

/* ---------- 5 WHAT IS YOURS ---------- */
/* Birdie, at display scale. One weight only, so no synthetic bold: the lead-in
   is the first sentence rather than a bolded fragment. */
.offer{display:grid;gap:calc(var(--t-body) * 2.1)}
.offer li{
  font-family:var(--font-display);
  font-size:clamp(23px, 2.5vw, 33px);
  line-height:1.18;
  letter-spacing:-0.02em;
}
.offer li{padding-top:calc(var(--t-body) * 1.5);border-top:1px solid var(--rule)}


/* ---------- THE INNER SHADOW ----------
   The terracotta field is recessed into the page rather than laid on top of
   it: a soft inset at the top and bottom edge only, on the terracotta side of
   the boundary, never on the surface above or below. The colour is a darkened
   terracotta, not black; black over this hue goes grey. */
.block--accent{
  box-shadow:
    inset 0  var(--edge-blur) var(--edge-blur) calc(-1 * var(--edge-blur)) var(--edge-ink),
    inset 0 calc(-1 * var(--edge-blur)) var(--edge-blur) calc(-1 * var(--edge-blur)) var(--edge-ink);
}

/* ---------- THE CLOSING BUTTON ----------
   The ramp ends at full terracotta, and Burnt on Terracotta measures 1.52:1:
   the button would have no edge at all. Cream carries a 3.20:1 edge against
   the field and 13.44:1 for its own charcoal label, the highest contrast of
   any control on the page. The hero button stays burnt, because at the top of
   the ramp it sits on the sage wash, where burnt measures 3.93:1. */
.form__button--cream{
  color:var(--charcoal);
  background:var(--cream);
  border-color:var(--cream);
}

/* ---------- THE CLOSE ----------
   By the time the signup section and the footer are on screen the ramp has
   arrived at full terracotta, so both are set in cream and stay there. No ink
   ramp, no flipping. The form field keeps charcoal on limewash, and the button
   inverts to charcoal on cream so the one actionable object on the screen is
   the one thing that is not cream type.
   MEASURED: cream on terracotta is 3.20:1. That clears the 3:1 bar for the
   headline and does not clear it for the paragraph, the label or the footer
   line, which charcoal held at 4.32:1. Deliberate trade, Patrick 2026-08-19. */
#signup, .foot{color:var(--cream)}
#signup .rule, .foot .rule{border-top-color:var(--cream);opacity:.32}
#signup .form__input{color:var(--charcoal)}
#signup .form__input::placeholder{color:var(--charcoal);opacity:.55}
#signup .form__button--cream{color:var(--charcoal)}

/* ---------- OPTICAL LEFT ----------
   The grid aligns boxes. Type has to align to ink. Birdie carries a 106/1000
   em left sidebearing against Hanken's 72, so at display size its first stem
   landed 9.0px to the right of the paragraph directly beneath it while both
   boxes started on the same column. Measured in rendered pixels, not guessed:
   Birdie inset 10.5px at 86.4px, Hanken 1.5px at 19px, caps 1.0px at 13px.
   Each face is now pulled left by its own bearing, the same numbers recorded
   at the top of tokens.css, so every ink edge on the page sits on one line. */
.hero__title, .hero__sub, .beat__h, .beat__close, .ethos,
.turn__kicker, .offer li{margin-left:-0.106em}          /* Birdie */
.hero__eyebrow, .beat__body p, .beat__body > p,
.form__note, .form label, .foot__row, #signup p{margin-left:-0.072em}   /* Hanken */
.turn__hand{margin-left:0.019em}                         /* Taxi Driver, bearings are negative */

/* the offer rules stay on the box edge while the type overhangs it, so the
   list reads as ruled rather than as five indented lines */
.offer li{border-top:0;position:relative}
.offer li::before{content:"";position:absolute;top:0;left:0.106em;right:0;
  border-top:1px solid var(--rule)}

}

}