/*
  lukesummerfield.ai — homepage-only styling.

  The homepage now wears the /figma-cms design system. Every colour, face and
  radius comes from the `home` theme at the end of shared/themes.js, which is
  a copy of the `figma` block. Read that comment first — it explains why the
  values are duplicated rather than shared, and lists the three contrast
  corrections, two of which are implemented in this file.

  ── Why this file is now short ──────────────────────────────────────
  The previous two builds carried a whole Transformation Club layer here: an
  Instrument Serif italic emphasis device, Instrument Serif pull quotes, a
  --font-mono swap, Indigo window chrome bars, Indigo section inverts, a
  custom type scale. All of it is gone. On the Figma system the engine's own
  defaults are already right — .grad is gradient text, Inter has a real
  italic, mono belongs on eyebrows and metrics, the chrome bars are grey.
  Deleting the layer WAS most of the work of matching the page.

  What is left is only:
    1. Undoing board.css's headline weight (this page loads board.css and
       /figma-cms does not — that is the one structural difference between
       the two pages, and without this the headline is 800 instead of 560).
    2. Re-skinning the whiteboard, whose `bold`-theme hexes live in a file
       shared with /shopify and /clay and so cannot be edited there.
    3. Two contrast corrections.
    4. One scroll-margin bug fix.

  Loaded ONLY from the root index.html, and deliberately LAST, after both
  shared/style.css and board/board.css.

  ── Figma's five colours, for reading this file ─────────────────────
    red #F24E1E · coral #FF7262 · violet #A259FF · blue #1ABCFE · green #0ACF83
    accent #9040F8 (Figma's #9747FF, one step deeper — see themes.js)
    ink #1E1E1E · muted #5C5C5C · line #E6E6E6 · bgAlt #F5F5F5
*/


/* ==================================================================
   1. TYPE — one rule, and it exists only to undo another file
   ==================================================================

   board/board.css section 0 sets `#app .display { font-weight: 800;
   letter-spacing: -0.028em; font-variation-settings: normal }`. That was
   tuned for Figtree on the old `bold` theme, it is specificity (1,1,0), and
   the file is shared with /shopify and /clay so it cannot be edited.

   /figma-cms renders .display at the engine's own values — Space Grotesk,
   weight 560, letter-spacing -0.015em, font-variation-settings "opsz" 80
   (a Fraunces axis that Space Grotesk ignores harmlessly). Measured on that
   page, so these are its numbers rather than a guess. Restoring them is the
   single largest visual difference between the two pages. */
#app .display {
  font-weight: 560;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 80;
}


/* ==================================================================
   2. CONTRAST CORRECTIONS — the only two departures from /figma-cms
   ==================================================================

   Both are places where copying that page verbatim would ship text under the
   AA bar. Each is the smallest step that clears it and neither is visible as
   a colour change. Reverting either is one line.

   (a) The terminal accent. --accent is painted on the #1E1E1E terminal
       ground by .hbt-cmd-p (the `$`), .hbt-prompt-c, .hbt-cur, .wt-cmd::before
       and .mk-term .a. Figma's purple measures 3.7:1 there — /figma-cms
       ships it that way, and it is the same class of bug as the Lonely
       Planet accent-on-dark failure. #A55FFF is the same hue lifted two
       steps: 4.51:1. */
.hi-terminal,
.wall-terminal,
.mock .mk-term { --accent: #A55FFF; }

/*  (b) Two terminal strings that /figma-cms ships effectively invisible.
       .hbt-title sits on .hbt-chrome (a #616161 grey) at 30% white — 1.94:1,
       for a real sentence ("AI-Pilled Examples"). .hbt-ttext is the typed
       input line at 35% white on the #1E1E1E ground — 3.22:1.
       80% and 62% measure 4.65:1 and 7.18:1. */
.hbt-title { color: color-mix(in srgb, var(--bg) 80%, transparent); }
.hbt-ttext { color: color-mix(in srgb, var(--bg) 62%, transparent); }

/*  (c) The board's "3 collaborators" label. figma.css sets #7A7A80 on the
       #FCFCFD board, which measures 4.16:1 at 11.5px. #6E6E75 is the same
       neutral one step down: 4.94:1. */
.fig-board-editing { color: #6E6E75; }

/*  (d) .wt-sidebar-count, the "6" chip beside EXAMPLES in the wall terminal.
       The engine builds it from color-mix(--accent 90%, --bg) on a
       color-mix(--accent 14%) ground, which lands at 4.37:1 at 10px/700.
       Lifting the text side of the mix to the full accent clears it. */
.wall-terminal .wt-sidebar-count { color: #C49AFF; }


/* ==================================================================
   3. THE WHITEBOARD  (#fit)
   ==================================================================

   board/board.css paints this section for the old `bold` theme: warm brown
   dot grid, pink/orange/amber corner washes, an amber frame, a #1A1033
   purple-black note ink. Every one of those is a literal hex in a file shared
   with /shopify and /clay, so they are re-declared here rather than edited
   there. The values below are figma-cms/figma.css's, measured from the
   rendered page.

   Note fills, marker strokes, cursor colours and stamps are set INLINE by
   board.js and cannot be reached from CSS at all. Those go through
   window.BOARD_PALETTE in home/home.js. */

section#fit {
  background-color: #FBFBFC;
  background-image: radial-gradient(circle, rgba(30, 30, 30, .05) 1.2px, transparent 1.2px);
}
/* Figma's four brand colours, at figma.css's own alphas. */
section#fit::before {
  background:
    radial-gradient(340px 300px at 12% 16%, rgba(162, 89, 255, .11), transparent 70%),
    radial-gradient(320px 280px at 88% 10%, rgba(26, 188, 254, .11), transparent 70%),
    radial-gradient(360px 320px at 84% 90%, rgba(10, 207, 131, .10), transparent 70%),
    radial-gradient(300px 300px at 6% 92%, rgba(242, 78, 30, .08), transparent 70%);
}

.fig-board {
  border-top-color: #E1E1E6;
  border-bottom-color: #E1E1E6;
  background-color: #FCFCFD;
  background-image: radial-gradient(circle, rgba(30, 30, 30, .09) 1.4px, transparent 1.4px);
  /* figma.css keeps this shadow; the previous build removed it to satisfy the
     Transformation Club "no drop shadows" rule, which no longer applies. */
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 26px 60px -40px rgba(30, 30, 30, .30);
}

.fig-board-bar {
  background: #FCFCFD;
  border-bottom-color: #ECECF0;
}
.fig-board-filename { color: #1E1E1E; }
.fig-board-fileicon { box-shadow: 0 1px 2px rgba(0, 0, 0, .14); border: none; }
/* .fig-board-editing is figma.css's #7A7A80 minus one step; see correction
   (c) in section 2. Declared there and NOT repeated here — it was set in both
   places for a while and the later copy silently won. */

/* Note ink. board.css uses #1A1033 (the old purple-black); figma.css uses the
   theme ink. Ink on all six Figma note fills measures 12.9:1 or better. */
.fig-board .bring-grid > .bring-card,
.fig-board .bring-grid > .bring-card h4,
.fig-board .bring-grid > .bring-card:hover h4,
.fig-board .bring-grid > .bring-card.selected h4 { color: #1E1E1E; }
.fig-board .bring-grid > .bring-card p { color: rgba(30, 30, 30, .72); }

/* figma.css's own shadows, which board.css matches already — restated because
   the previous build flattened them. */
.fig-board .bring-grid > .bring-card {
  box-shadow: 2px 6px 16px rgba(0, 0, 0, .14), 0 0 1px rgba(0, 0, 0, .06);
}
.fig-board .bring-grid > .bring-card:hover,
.fig-board .bring-grid > .bring-card.selected {
  box-shadow: 4px 16px 38px rgba(0, 0, 0, .2), 0 2px 6px rgba(0, 0, 0, .08);
}

.fig-board .bring-grid > .bring-card .bring-tag {
  background: rgba(0, 0, 0, .09); color: rgba(0, 0, 0, .62);
}
.fig-board .bring-grid > .bring-card:hover .bring-tag,
.fig-board .bring-grid > .bring-card.selected .bring-tag {
  background: rgba(0, 0, 0, .14); color: rgba(0, 0, 0, .78);
}

.fig-comment-bubble { color: #1E1E1E; box-shadow: 0 3px 10px rgba(0, 0, 0, .14); }

/* Stamps are emoji again (home.js), so the box sizing the previous build
   added for inline SVG has to go back to figma.css's text sizing. */
.fig-stamp {
  width: auto; height: auto;
  font-size: 23px; line-height: 1;
  color: inherit;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .18));
}
@media (max-width: 560px) { .fig-stamp { font-size: 20px; } }

/* figma.css tints the hero dot grid back; board.css does not carry this. */
.hero::before { opacity: .5; }


/* ==================================================================
   4. ENGINE BUG FIX (not a theme change)
   ==================================================================

   shared/style.css sets NO scroll-margin anywhere, and .nav is
   `position: fixed` at 71px tall, so every nav link lands its target section
   underneath the nav and the section headline is invisible on arrival. This
   is engine-wide rather than homepage-specific — /figma-cms has it too —
   so fixing it at the source would touch all 22 targets. Scoped here. */
#top, #fit, #arc, #wall, #endorsements, #close { scroll-margin-top: 84px; }