/* Spenser Wayne Interiors — design tokens
   The one place brand values are defined. Pages and components read these;
   they never hard-code color, type or spacing. Font: Switzer (Fontshare, free under its FFL),
   picked by Luke 2026-10-14 on the dials, a step lighter than General Sans was (Spenser 10/13:
   "something a little sleeker"; General Sans 9/30-10/14). Loaded as its one variable file (any
   weight 100 to 900). Served from fonts/ and preloaded in each page's <head>, so it's in
   before the first paint. */

@font-face {
  font-family: "Switzer";
  src: url("../fonts/switzer-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Type */
  --font-sans: "Switzer", "Helvetica Neue", Arial, sans-serif;
  --weight-book: 400;
  --weight-demi: 450; /* Luke 10/14: a step lighter with Switzer (was 500) */

  /* Hero type, tuned by Luke 9/30 with the ?tune panel (fourth round). */
  /* Display: the hero name */
  --text-display: 42px;
  /* Phones (600 and below): the name runs the screen's width less the gutters and the slide bars
     (its width is 10.7 times its size: Switzer 500 at -.025em, from the font's own advances,
     scaled as General Sans's measured in Safari 10/12), 32px on a 402 iPhone (Luke 10/12: 26
     was too close to the subline's 17) */
  --text-display-phone: clamp(24px, calc((100vw - 2 * var(--gutter) - 20px) / 10.8), 34px);
  --text-lede-phone: 16px; /* the hero's subline on phones, in the book weight: smaller and lighter than the name */
  --weight-display: 500; /* Luke 10/14: a step lighter with Switzer (was 600) */
  --tracking-display: -.025em;
  --leading-display: .75;
  /* Body: the subline under the name (and running text sizes) */
  --text-body: 17px;
  --weight-body: 400; /* Luke 10/14: a step lighter with Switzer (was 450) */
  --tracking-body: 0em;
  --leading-body: .95; /* one-line uses: the subline */
  /* Nav: the header links, their own style since 9/30 (Luke: a touch bigger and bolder than
     the subline) */
  --text-nav: 17px; /* Luke 9/30: back to 17 */
  --weight-nav: 450; /* Luke 10/14: a step lighter with Switzer (was 500) */
  --tracking-nav: 0em;
  --leading-text: 1.45; /* running text: paragraphs of more than one line */
  /* Switzer's capital height as text-box trims to it (the font's OS/2 cap height, .75em; its
     drawn capitals stand .68em, so every trimmed line's capitals sit the same .07em under the
     edge and the gaps stay even). The footer's logo is sized from it. */
  --cap: .75;
  /* A line of running text's box top to its capitals (its half-leading, plus the font's ascent
     above the trimmed capitals; content area 1.218em, ascent .97em, cap .75em: Switzer's
     metrics, .98 / .25 / .75, set against General Sans's (1.01 / .24 / .718) as Safari measured
     those 9/30). For the few things that can't be trimmed to their capitals (a flex line with
     an arrow in it), so a gap measured to the letters still comes out exact. Resolves at the
     size of whatever uses it. */
  --cap-gap: calc((var(--leading-text) - 1.218) / 2 * 1em + .220em);
  --descent-gap: calc((var(--leading-text) - 1.218) / 2 * 1em + .248em); /* its baseline to its box bottom */
  /* Buttons: the nav's size and weight (Luke 10/1: the nav reads bolder, match every button to
     it; were 14px at 500). Linked, so the nav dials move both. */
  --text-button: var(--text-nav);
  --weight-button: var(--weight-nav);
  --button-pad-y: 11px;
  --button-pad-x: 16px;
  /* Phones: the services' buttons, a size smaller */
  --button-pad-y-phone: 10px;
  --button-pad-x-phone: 14px;
  /* The menu (tablet and phone): its links in the statement style at this size, KOBU's large
     list. The old menu's 40px, growing to 56 on a tablet. Spaced as running text (Luke 10/12:
     at 1.2 the links read as one block; were 48px apart on a phone, now 58), which also puts
     the first link's capitals exactly the page top under the header (--cap-gap). */
  --text-menu: clamp(40px, 9.5vw, 56px);
  --leading-menu: var(--leading-text);
  /* The menu button (the compact header): three bars in the hairline's weight, this wide, the
     outer two this far apart (Luke 10/12: an icon in place of the word Menu). Sized by eye
     against the logo beside it (Luke 10/12: 24x14 read small, then 34x22 a touch large):
     under half the logo's height, on a tablet (logo 44) and a phone (logo 32). */
  --menu-icon-w: 31px;
  --menu-icon-h: 20px;
  --menu-icon-w-phone: 24px;
  --menu-icon-h-phone: 16px;
  /* Its turn into an X, after Apple's menu icon (Luke 10/12: the bars swung in all at once).
     Opening, the outer bars slide onto the middle one, then turn, the turn starting
     --menu-icon-overlap in, once they've all but met (sooner, they turned while apart and
     flashed a ">"); closing, the X turns back, then the bars slide apart. */
  --menu-icon-slide: .16s;
  --menu-icon-turn: .32s;
  --menu-icon-turn-back: .18s;
  --menu-icon-overlap: .13s;
  --ease-icon-slide: cubic-bezier(.52, .16, .52, .84);
  --ease-icon-turn: cubic-bezier(.04, .04, .12, .96);
  /* Statement: the large left-aligned intro text below the hero (KOBU's big paragraphs) */
  --text-statement: clamp(26px, 2.75vw, 42px); /* tops out at the hero name's size */
  --weight-statement: 400; /* Luke 10/14: a step lighter with Switzer (was 460) */
  --tracking-statement: -.02em;
  --leading-statement: 1.16;
  /* Caption: the one line under a photo (project tiles, Spenser's portrait). One style for the
     whole line: what it is at left, where (or who) at right. Luke 9/30: the large tile titles
     and the gray second line didn't fit the rest of the site. The body text, as on the hero
     caption (Luke picked it over medium and small, 10/9). */
  --text-caption: var(--text-body);
  --weight-caption: var(--weight-body);
  /* The photo's bottom edge to the caption's capitals. Luke 9/30 asked for closer (10); the
     tiles have shown 16 since their name got its arrow (the trim no longer reached it), and
     that's what was approved page after page, so 16 it is, on every caption (brand pass 10/12). */
  --space-caption: 16px;
  /* Small: eyebrows, meta lines */
  --text-small: 14px;
  /* A client's credit (the closing section): the name in the body size, then the title in the
     small size, its lines close so the two read as one (Luke 10/1: it was the body size and
     running leading, too big and too loose). The name to the title stays as it was. */
  --text-cite-role: var(--text-small);
  --leading-cite-role: 1.25; /* Luke's dial pick 10/1 */
  --space-cite-role: 14px; /* the name's baseline to the title's capitals (Luke 10/1: 12, a little more) */

  /* Logo (Brand/SWI - Logo.svg) on the light header. Its letters are hairlines, so a stroke
     (in the SVG's own units, 207.34 wide, 103.5 tall) thickens them to hold at this size (Luke
     9/30). Luke 10/1 redrew the art with clean edges and slightly finer letters;
     tools/inline-logo.py inlines it scaled to the old art's height, so these units are the old
     ones, with INTERIORS tracked in so its S doesn't run far past SPENSER. */
  --logo-height: 44px;
  --logo-height-phone: 32px; /* Luke 10/12: 36 made the phone's bar too tall */
  --logo-stroke: 1.45; /* Luke's dial pick 9/30 was 1 on the old art; ~1.45 gives the new art the same weight (locked 10/9) */

  /* Color */
  --paper: #fbf9f5;
  --ink: #1c1a17;
  --paper-rgb: 251, 249, 245; /* paper as rgb, for translucent paper */
  --ink-rgb: 28, 26, 23; /* ink as rgb, for translucent ink (hairlines, the light header's button hover) */
  --scrim: 20, 18, 15; /* ink as rgb, for gradients over photos */
  --stone: #77716a; /* the one warm gray: secondary text, the muted half of a two-tone statement. 4.6:1 on paper */
  /* Hairlines: the rules between sections and blocks. Luke 9/30: the first ones (ink at .14)
     read too faint and thin, so they're darker now; opacity and weight are on the dials. */
  --hairline-alpha: .34;
  --hairline-width: 1.5px; /* Luke's dial pick 9/30 */
  --hairline: rgba(var(--ink-rgb), var(--hairline-alpha));
  /* On the ink band: stone and hairlines turned around */
  --stone-on-ink: #a39d95; /* 6.5:1 on ink */
  --hairline-on-ink: rgba(var(--paper-rgb), calc(var(--hairline-alpha) * .9));
  /* The services' price line, all one color (Luke 10/14: the figure and its words alike, in stone) */
  --svc-price-color: var(--stone-on-ink);
  /* The lifestyle photo across the page (home), width to height (Luke 10/14: not so
     tall, closer to a panorama). Phones keep 16:9. */
  --lifestyle-ratio: 2.33;

  /* Space */
  --gutter: clamp(20px, 2.8vw, 40px);
  --hero-intro-y: 50%; /* where the middle of the name + subline block sits, down the hero's height (50% = centered) */
  --hero-intro-x: 9.5%; /* the hero name's distance from the left edge, desktop (Luke 9/30); phones sit it on the gutter */
  /* Top and bottom padding of every home section, tuned in the dials' own "Section spacing"
     panel. Luke 10/1: start from 180 (was clamp(80px, 9vw, 144px)). Selected works opens
     with a hairline, and this is measured from that rule to its eyebrow. */
  --space-section: clamp(96px, 12.5vw, 180px); /* 180 from 1440 wide */
  /* Either side of the services band: its top edge to "Our services", and its bottom edge to
     the closing's first line. Luke 10/1: about 20% less than the other sections, the two the same. */
  --band-edge: .8;
  --space-band: calc(var(--space-section) * var(--band-edge));
  --cta-top-share: .5; /* the closing's room above its content, as a share of above + below (css/cta.css; Luke 10/1: centered) */
  /* An eyebrow ("The studio") to the first thing under it: the capitals of a statement, or
     the top of a photo. The same in every section (Luke 9/30). */
  --space-eyebrow: 28px;
  --space-eyebrow-phone: 20px;
  /* An eyebrow's line runs on 5.6px under its baseline (Switzer at 14px, line height 1.45;
     5.3 in General Sans), so the gap you see under one, its baseline to the capitals below, is the eyebrow
     gap plus this. Selected works trims its eyebrow and uses that seen gap on both sides: the
     rule to its capitals, and its baseline to the photos (Luke 10/1: exactly "The studio" to
     the statement under it). */
  --eyebrow-tail: calc(var(--text-small) * .398);
  /* A rule to the capitals of the eyebrow that opens a section under it ("Selected works", "More
     projects", the closing's "Start a project"): the gap you see under an eyebrow, so the
     eyebrow sits evenly between the rule and what it labels. A cell's label (a field, the
     footer, a project's facts) sits tighter, --space-cell-top. */
  --space-rule-eyebrow: calc(var(--space-eyebrow) + var(--eyebrow-tail));
  /* A section's statement to the ruled content under it (the services list) */
  --space-head: clamp(64px, 7vw, 112px);
  /* A service's name to its price under it: the name's baseline to the price's capitals
     (Luke 9/30: was about 30px, a little tighter) */
  --space-svc-price: 20px;
  /* Cells: anything that sits under a hairline as a label and what it labels, the footer's
     title block first (Luke 9/30-10/1), then the closing's sheet, the contact details, the
     inquiry fields, a project's facts, the services' "what's included" and the notes legend
     (brand pass 10/12: these had four different gaps; now they're the footer's). Measured to
     the letters: the rule to the first capitals (Luke 10/1: the footer's titles sat too far
     under the rule at 20), a label's baseline to the capitals of what it labels, and the last
     baseline to the next rule, which is also the space between an upright and the text after
     it. Below 1080 the footer's middle column runs short of room, so the space is tighter
     there (the media query at the end). */
  --space-cell-top: 14px;
  --space-cell-label: 16px;
  --space-cell-wide: 20px;
  --space-cell-narrow: 16px;
  --space-cell-tight: 12px; /* the footer's upright to its text on phones under 375, so "Book a consultation" and "Terms & Conditions" keep one line each from 360 */
  --space-cell: var(--space-cell-wide);
  /* A note (components.css .note): a paragraph under a hairline, then its link. The rule to the
     text's capitals, and the text's baseline to the link's capitals. The eyebrow gap's size
     (brand pass 10/12: the same note opened 29 under its rule on the home page and About, 23
     on the project pages). */
  --space-note: 28px;
  /* The least room between two things on one line (a caption's name and place, a head's eyebrow
     and its link, a legend's number and label) */
  --space-inline: 16px;
  /* The measure: running text breaks to its next line at about 34 body-size characters' room
     (About's bio, a project's description and text notes, the legal pages) */
  --measure: calc(34 * var(--text-body));
  /* Between two paragraphs of running text: one line's height (About's bio, the legal pages) */
  --space-paragraph: calc(var(--leading-text) * 1em);
  /* Footer (css/components.css: the title block, Luke 9/30) */
  /* The paper above the footer's ink band (Luke 10/1: too much dead space; was
     clamp(72px, 8vw, 128px)) */
  --space-footer-top: clamp(56px, 5.5vw, 88px);
  /* Inside the band: its top edge to the titles' capitals, and the last baseline to its bottom
     edge (Luke 10/1: half what it had, about 70 and 54 at 1512 wide, when a rule ran along its
     top; the rule came back for a look, then went again) */
  --space-footer-band-top: clamp(28px, 2.4vw, 36px);
  --space-footer-band-bottom: clamp(20px, 1.8vw, 28px);
  /* The footer's rows and bottom line (Luke 10/1: the body's 17 read large here), their lines
     a little closer than running text (Luke 10/1: 1.3 was too close) */
  --text-footer: 16px;
  --leading-footer: 1.44;
  --leading-footer-phone: 1.75; /* on a phone each row is a link to tap: 28px apart */
  /* The footer logo's stroke, in the SVG's units, so it scales with the mark. Its own value
     since 10/1 (Luke: at footer size the header's 1.46 read too thick on the new art) */
  --footer-logo-stroke: 1.1;
  /* The footer's columns (css/components.css), which the closing section's sheet layouts share
     (Luke 10/1): the site's columns 1 to 4 | the middle | the logo's cell, at the right (Luke
     picked it over the logo at left or in the middle), a gap of the space, an upright and the
     space between them. The logo is as tall as the two rows of text beside it, less its own
     space above and below. A row is the rule-to-title gap, the title's capitals, the title gap,
     the first line's capitals, one line's height for each line after it, and the space; the
     logo's space takes back the two spaces, which leaves the two rule-to-title gaps. Contact
     (three lines) sets the first row, Pages (four) the second. Plus the rule between the two
     rows, which the logo runs past. */
  --footer-logo-h: calc(
    2 * (var(--text-small) * var(--cap) + var(--space-cell-label) + var(--text-footer) * var(--cap))
    + 5 * var(--text-footer) * var(--leading-footer) + 2 * var(--space-cell-top) + var(--hairline-width));
  --footer-logo-w: calc(var(--footer-logo-h) * 208.44 / 104.6); /* the logo's viewBox: the art plus half the stroke all round (tools/inline-logo.py prints it) */
  --footer-gap: calc(2 * var(--space-cell) + var(--hairline-width)); /* a cell's space, the upright, the next cell's space */
  --footer-third: calc((100% - 11 * var(--gutter)) / 3 + 3 * var(--gutter)); /* four of the site's columns */
  --footer-cols: var(--footer-third) minmax(0, 1fr) var(--footer-logo-w);
  /* Rows of project tiles (the portfolio): one row's captions to the next row's photos, and
     the page's statement to the first row (Luke 10/9: was 112, too loose) */
  --space-tiles: clamp(40px, 4.4vw, 64px);
  /* Things that belong together (Luke 10/9, the project page's head): a page's back link to
     the header, a title to the description under it */
  --space-near: clamp(24px, 2.8vw, 40px);
  /* Pages after the home: the header's bottom edge to the page's first line, its eyebrow's
     capitals. Luke 10/9: the same as the statement to the photos under it (was 96) */
  --space-page-top: var(--space-tiles);
  /* A page's last line to the footer's ink band (Luke 10/9: the portfolio's 180 was too much) */
  --space-page-end: clamp(72px, 7vw, 100px);
  --header-pad-y: 19px; /* the header's top/bottom padding (Luke 9/30: was 22, a little tighter) */
  --nav-gap: 28px; /* between the header's links */
  --header-pad-y-phone: 12px; /* the logo to the header's hairline, and the same above it (css/site.css) */

  /* Shape + motion */
  --radius-button: 2px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1); /* things that fade in and out in place: the menu (Luke 10/12: never linear) */
  --ease-fade: cubic-bezier(.2, .6, .35, 1); /* the page entrance's fade: shows at once and settles long (Luke 10/15: the old gentle start, .33 0 .2 1, read as a blank page) */
  --menu-duration: .5s; /* the menu's fade, and the header's colour with it */
  --duration: .52s; /* things that travel: an arrow's slide, the hero caption's flip, the copy link's roll */
  --duration-quick: .25s; /* a hover's color, opacity or fill */
  /* Keyboard focus: a 1px ring in the current color, this far out */
  --focus-offset: 4px;
  /* The glide down to a section of home, e.g. Services in the nav (js/site.js, Luke 10/12):
     eases in and out, this long from the top of home (shorter trips take less).
     --scroll-ease: sine | cubic | quart. From another page, home opens at the top already
     moving (Luke: no pause first) on --scroll-arrive-ease over --scroll-arrive-duration: a
     short ease in, so it's moving within a tenth of a second, and a long ease out (Luke 10/12:
     an ease-out alone read as linear). */
  --scroll-duration: 1.4s;
  --scroll-ease: cubic;
  --scroll-arrive-duration: 1.2s;
  --scroll-arrive-ease: cubic-bezier(.4, 0, .2, 1);
  /* Page entrance (css/site.css, js/enter.js; Luke 10/12, third pass: line by line, not a sweep).
     Each line on the screen rises --enter-rise over --enter-duration as it fades in over
     --enter-fade; each row starts --enter-stagger after the one above it, or closer, so that
     on a screen with many rows the last still starts by --enter-span. Luke 10/15: quicker, so
     the page never reads as blank (was 1.1s rise, .8s fade, 90ms apart, all started by 720ms). */
  --enter-duration: 900ms;
  --enter-ease: var(--ease-out);
  --enter-fade: 450ms;
  --enter-rise: 14px;
  --enter-stagger: 60ms;
  --enter-span: 360ms;
  /* Photo hover on a project tile: KOBU's gallery hover, copied exactly (Luke 9/30). Both
     run on --ease-out, which is KOBU's curve too. */
  --hover-photo-scale: 1.05;
  --hover-photo-opacity: .8;
  --hover-photo-zoom: 1.5s;
  --hover-photo-fade: .6s;
  --photo-backdrop: rgba(var(--ink-rgb), .04); /* shows through the faded photo; KOBU's #f4f4f4 is the same shade under its page */

  /* Hero slider motion lives in js/hero.js (a GSAP port of here-away.com). */

  /* Read-through (js/read.js, Luke 9/30): a statement's lead fills in letter by letter
     between two lines on the screen, in % of its height from the top. It starts when the
     lead's top reaches --read-start and is done when its bottom reaches --read-end (Luke's
     dial picks 9/30; realfood.gov's own is 85 / 85). */
  --read-start: 90;
  --read-end: 45;
  /* How much of that scroll the fill takes: 1 is all of it, .9 finishes after 90%. The closing
     quote's is quicker (Luke 10/1: 10% less scrolling to fill). */
  --read-pace: 1;
  --read-pace-closing: .9;
}

/* Narrow desktop and down: the footer's middle column runs short of room for its text */
@media (max-width: 1079px) {
  :root { --space-cell: var(--space-cell-narrow); }
}
/* Phones: the phone eyebrow gap */
@media (max-width: 600px) {
  :root { --space-rule-eyebrow: calc(var(--space-eyebrow-phone) + var(--eyebrow-tail)); }
}