/* ==========================================================================
   Ives Street brand stylesheet
   Palette and rules per claude_business/reference_brand_colors.md (2026-08-17).
   Two hues only: slate (244°) and gold/parchment (85°). Overpass for display
   and functional text, Libre Caslon Text for body.
   ========================================================================== */

/* ---- Fonts (self-hosted, Latin subsets) ---------------------------------- */

@font-face {
  font-family: "Overpass";
  src: url("../fonts/Overpass-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Overpass";
  src: url("../fonts/Overpass-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Overpass";
  src: url("../fonts/Overpass-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Overpass";
  src: url("../fonts/Overpass-900.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "Libre Caslon Text";
  src: url("../fonts/LibreCaslonText-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Caslon Text";
  src: url("../fonts/LibreCaslonText-400i.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Libre Caslon Text";
  src: url("../fonts/LibreCaslonText-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Font Awesome Free 5 solid, subset to the 8 transport/service glyphs.
   Font files licensed under the SIL Open Font License (fontawesome.com/license/free). */
@font-face {
  font-family: "FA Icons";
  src: url("../fonts/fa-icons.woff2") format("woff2");
  font-weight: 900;
  font-display: block;
}

/* ---- Tokens -------------------------------------------------------------- */

:root {
  --ink: #22303B;         /* body text */
  --slate: #3D5467;       /* headings, rules, borders — display sizes */
  --light-slate: #E5EEF6; /* cool secondary ground */
  --parchment: #FBF3E1;   /* primary ground */
  --plate: #F4E1BA;       /* warm structural trim / hero + footer band */
  --gold: #EDB62B;        /* accent — shapes with mass, never small text */

  --serif: "Libre Caslon Text", "Georgia", serif;
  --sans: "Overpass", "Helvetica Neue", sans-serif;

  --container: 1080px;
  --gutter: 32px;

  /* Section-boundary treatment — see § Section boundaries. Slate as raw
     channels so alpha can vary; no new hues. Alphas are the test-page sketch
     values at 1.5x, the strength Taylor chose 2026-08-27. */
  --edge-rgb: 61 84 103;   /* brand slate — the sheet's cut edge */
  --shade-rgb: 34 48 59;   /* ink slate — cast shadow and gutter shading */
  --edge-alpha: 0.33;
  --cast-alpha: 0.36;
  --cast-depth: 16px;
  --fold-alpha: 0.083;
  --fold-height: 48px;

  /* Oxford rule — masthead and footer. Proportions follow the metal device:
     the trade's Oxford rule is a "3 pt 1 pt combination rule", i.e. the thick
     stroke is three times the thin, set close together so the pair reads as
     one rule rather than two lines. Thick:thin is therefore 3:1 (was 2:1).
     The gap is the one deliberate departure — period rules close to roughly
     the thin stroke, but gold on plate measures only 1.44:1, so a 2px gap
     collapses the rule back into the solid bar it replaced. 3px is the
     tightest gap that still reads at rest. Total height is unchanged at 11px,
     so no layout moves. Revised 2026-09-12; was 4/5/2. */
  --oxford-thick: 6px;
  --oxford-gap: 3px;
  --oxford-thin: 2px;
  --oxford-height: calc(var(--oxford-thick) + var(--oxford-gap) + var(--oxford-thin));
}

/* ---- Base ---------------------------------------------------------------- */

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

html { scroll-behavior: smooth; }

body {
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.65;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--slate);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-thickness: 2px; }

strong { font-weight: 700; }

emphatic {
  display: block;
  font-style: italic;
  font-size: 1.16em;
  margin: 1.2em 0;
}

h1, h2, h3, h4 {
  font-family: var(--sans);
  color: var(--slate);
  line-height: 1.15;
}

h2 { /* section titles */
  font-weight: 900;
  font-size: clamp(32px, 4vw, 44px);
  margin: 0 0 1em;
}

h3 { /* subheads inside sections */
  font-weight: 700;
  font-size: 22px;
  margin: 1.6em 0 0.6em;
}
h3:first-child { margin-top: 0; }

img { max-width: 100%; height: auto; }

/* ---- Masthead ------------------------------------------------------------ */

.masthead {
  padding-top: 26px;
  background: var(--parchment);
  position: sticky;
  top: 0;
  z-index: 50;

  /* Colour of the gap inside the Oxford rule below. It tracks the page
     currently passing under the sticky nav — set by the script in base.njk —
     so the rule reads as an opening rather than a third stripe. This is a
     matched colour, deliberately not a transparent window: a real window
     shows slivers of moving text through the gap. Plate is the at-rest value
     and the no-JS fallback, matching the hero directly below. */
  --nav-gap: var(--plate);
}

/* Keep anchor targets clear of the sticky masthead */
section[id] { scroll-margin-top: 120px; }

.masthead-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 30px;
  padding-bottom: 18px;
  flex-wrap: wrap;
}

.masthead .badge { height: 46px; width: auto; display: block; }

.masthead nav { max-width: 100%; min-width: 0; }
.masthead nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1em 2.4em;
}

.masthead nav a {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  text-decoration: none;
}
.masthead nav a:hover { color: var(--ink); }

/* Oxford rule under the nav: thick over thin, full bleed, with an open gap
   between the strokes. Replaced the solid 9px gold bar 2026-08-27; gold
   retained at Taylor's direction. Proportions tightened to the period 3:1
   stroke ratio 2026-09-12 — see the tokens block. The same rule is repeated
   at the top of the footer, where the gap shows the footer's plate. */
.gold-bar {
  height: var(--oxford-gap);
  box-sizing: content-box;
  background: var(--nav-gap);
  border-top: var(--oxford-thick) solid var(--gold);
  border-bottom: var(--oxford-thin) solid var(--gold);
}

/* ---- Hero (plate band) --------------------------------------------------- */

.hero {
  background: var(--plate);
  padding: 72px 0 110px;
}

.hero .hero-logo {
  height: 216px;
  width: auto;
  display: block;
}

/* Logo placement variants — set the class on section.hero */
.hero.logo-center .hero-logo { margin: 16px auto 88px; }

.hero.logo-right .hero-inner {
  display: flex;
  align-items: center;
  gap: 80px;
}
.hero.logo-right .hero-text { flex: 1; min-width: 0; }
.hero.logo-right .hero-logo { order: 2; flex: none; }
.hero.logo-right h1 { font-size: clamp(38px, 4.6vw, 60px); }

.hero h1 {
  font-weight: 700;
  font-size: clamp(40px, 5.4vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-align: center;
}

/* Rotating heading completion: "for <word>" on its own line in Caslon italic.
   2026-09-08: both tagline lines now brand slate, heading at 700 (not 900), italic
   at 1.08em — the slate/ink two-tone with a Black heading read as jarring on the
   business cards, and the same lockup is used there (claude_business/business_cards).
   Quiet crossfade handled by the inline script in index.njk */
.rotate-line {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--slate);
  font-size: 1.08em;
  line-height: 1.25;
  margin-top: 0.08em;
  /* balance the italic f's leftward swash */
  padding-left: 0.09em;
  white-space: nowrap;
}
.rotate-fade {
  display: inline-block;
  transition: opacity 0.32s ease, transform 0.32s ease;
}
.rotate-fade.is-swapping {
  opacity: 0;
  transform: translateY(0.12em);
}
.rotate-word {
  display: inline-block;
  border-bottom: 0.1em solid var(--gold);
}

/* ---- Sections ------------------------------------------------------------ */

.section { padding: 84px 0 96px; position: relative; }
.section.parchment { background: var(--parchment); }
.section.light-slate { background: var(--light-slate); }

/* ---- Section boundaries: a bound volume ----------------------------------
   Every section is a leaf in a binder of alternating-colour pages, so every
   section behaves the same way: its bottom is a cut edge that casts a soft
   shadow onto the page beneath, and its top carries a whisper of gutter
   shading, like light falling into the binding. No ground casts more than
   another — parchment, light slate and the plate hero are all just pages.

   All three layers are drawn at the TOP of the page that RECEIVES them, in one
   pseudo-element, rather than hung below the page that casts them. That looks
   identical and avoids the stacking problem: if each page cast downward from
   itself, every section would need a z-index higher than the one after it,
   since at equal z-index the painting order falls back to DOM order and the
   next section's background paints straight over the previous one's shadow.
   Drawing it inside the receiving page removes the question entirely. It also
   makes the footer boundary self-resolving: footer::before is the Oxford rule,
   so the last section simply has nothing to cast onto.

   Chosen 2026-08-27 from four candidates — see
   claude_business/memo_website_section_transitions.md (variant B at 1.5x).
   -------------------------------------------------------------------------- */

.section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--fold-height);
  pointer-events: none;
  /* First layer paints on top. Sized and pinned to the top edge, so the three
     depths are independent: 1px edge, 16px cast, 48px gutter. */
  background:
    /* the cut edge of the page above */
    linear-gradient(rgb(var(--edge-rgb) / var(--edge-alpha)) 0 0)
      0 0 / 100% 1px no-repeat,
    /* its shadow, falling onto this page. Stops approximate a Gaussian
       falloff rather than a flat linear ramp. A blurred box-shadow can't do
       this job: Chrome paints the blur roughly 1.17x the radius past the
       shadow rect, so it bleeds above the section as well as below, and
       pulling the spread in far enough to stop that fades the shadow out at
       the left and right screen edges. A sized gradient is exact. */
    linear-gradient(
      to bottom,
      rgb(var(--shade-rgb) / var(--cast-alpha)) 0,
      rgb(var(--shade-rgb) / calc(var(--cast-alpha) * 0.42)) 34%,
      rgb(var(--shade-rgb) / calc(var(--cast-alpha) * 0.12)) 64%,
      rgb(var(--shade-rgb) / 0) 100%
    ) 0 0 / 100% var(--cast-depth) no-repeat,
    /* light falling into the gutter of the binding */
    linear-gradient(
      to bottom,
      rgb(var(--shade-rgb) / var(--fold-alpha)),
      rgb(var(--shade-rgb) / 0)
    ) 0 0 / 100% var(--fold-height) no-repeat;
}

/* About: decorative column image on the right, as on the previous site */
.about-section .container { position: relative; }
.about-side-image {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  height: 62%;
  width: auto;
  opacity: 0.9;
  pointer-events: none;
}
.about-body { max-width: 42em; }

/* Connectome section figure — the interface screenshot at about two-thirds
   container width, centred, in a quiet inset box. The caption is a tooltip
   (title attribute) rather than written out, and there is deliberately no
   link to a larger version. The tag lives in src/content/connectome.md,
   under the "same scale" paragraph. */
.connectome-figure {
  display: block;
  width: 66.7%;
  height: auto;
  box-sizing: border-box;
  margin: 1.4em auto 1.8em;
  padding: 10px;
  background: rgb(255 255 255 / 0.5);
  border: 1px solid rgb(var(--edge-rgb) / 0.28);
}
@media (max-width: 640px) { .connectome-figure { width: 100%; } }

/* Services: icon column left (spread over full section height), text right */
.services-grid {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 56px;
  align-items: stretch;
}

.icon-grid {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.icon-grid .icon {
  flex: none;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--slate);
  color: var(--light-slate);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "FA Icons";
  font-weight: 900;
  font-size: 26px;
  font-style: normal;
}

.services-body { max-width: 44em; }

/* ---- Portfolio ----------------------------------------------------------- */

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 40px;
}

.portfolio-card .card-image { display: block; }
.portfolio-card .card-image img { display: block; width: 100%; }

.portfolio-card h3 {
  font-size: 19px;
  margin: 0.9em 0 0.4em;
}

.portfolio-card p { font-size: 16px; }

.actions { list-style: none; margin-top: 0.9em; display: flex; flex-wrap: wrap; gap: 10px; }

.button {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--parchment);
  border: 1.5px solid var(--slate);
  padding: 9px 14px 7px;
  text-decoration: none;
}
.button:hover { background: var(--slate); color: var(--parchment); }

/* Trusted by — its own section since 2026-08-27, so the h2 needs no offset */
.clients-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px 56px;
}
.clients-row img { height: 48px; width: auto; max-width: 170px; object-fit: contain; }

/* ---- Team ---------------------------------------------------------------- */

/* Single member: photo left, bio right; full-width note beneath both */
.team-single {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 56px;
  align-items: center;
}
.team-single .headshot {
  width: 100%;
  border: 1.5px solid var(--slate);
  display: block;
}
.team-single h3 { font-size: 24px; margin: 0; }
.team-single .pronouns {
  font-style: italic;
  font-size: 15px;
  margin: 0.1em 0 0.2em;
}
.team-single .role {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 1em;
}
.team-single .bio { font-size: 16px; }

.team-note { margin-top: 48px; }
.team-note:empty { display: none; }

/* ---- Contact ------------------------------------------------------------- */

.contact-section { text-align: center; }
.contact-section p { font-size: 21px; }

/* ---- Footer (plate band) ------------------------------------------------- */

footer {
  background: var(--plate);
  position: relative;
  padding: 56px 0 40px;
  font-size: 15px;
}

/* The Oxford rule again at the top of the footer, but *reversed* — thin over
   thick. This is the period convention: compositors set the rule one way up to
   open a page and "Oxford rule reversed" to close it, which puts the two heavy
   strokes on the outside so the page reads as enclosed rather than as two
   identical bands. Bibliographies of the period record the two orientations
   separately for exactly this reason.
   Replaced a 1.5px slate border 2026-08-27; the crisp edge is now supplied by
   the cut-edge hairline on the section above. */
footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--oxford-gap);
  box-sizing: content-box;
  border-top: var(--oxford-thin) solid var(--gold);
  border-bottom: var(--oxford-thick) solid var(--gold);
  pointer-events: none;
}

footer .acknowledgment { max-width: 46em; }

footer .copyright {
  list-style: none;
  margin-top: 2.4em;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}

/* ---- Responsive ---------------------------------------------------------- */

@media (max-width: 980px) {
  .about-side-image { display: none; }

  .services-grid { grid-template-columns: 1fr; gap: 40px; }
  .icon-grid { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 20px; }
  .icon-grid .icon { width: 72px; height: 72px; font-size: 30px; }

  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .team-single { grid-template-columns: 200px 1fr; gap: 36px; }
}

@media (max-width: 640px) {
  .masthead { padding-top: 12px; }
  .masthead .badge { display: none; }
  .masthead-row { justify-content: center; padding-bottom: 10px; }
  .masthead nav ul { gap: 1em; justify-content: center; }
  .masthead nav a { font-size: 12px; letter-spacing: 0.1em; }
  section[id] { scroll-margin-top: 100px; }

  .hero { padding: 56px 0 72px; }
  .hero .hero-logo { height: 150px; }
  .hero.logo-center .hero-logo { margin: 0 auto 44px; }
  .hero.logo-right .hero-inner { display: block; }
  .hero.logo-right .hero-logo { margin: 0 0 44px; }
  /* Allow wrap on small screens, reserving two lines so long rotating
     words don't reflow the page */
  .rotate-line { white-space: normal; min-height: 2.6em; }
  .section { padding: 60px 0 68px; }

  .portfolio-grid { grid-template-columns: 1fr; }
  .team-single { grid-template-columns: 1fr; gap: 28px; }
  .team-single .headshot { max-width: 230px; }
  .icon-grid { gap: 16px; }
  .icon-grid .icon { width: 64px; height: 64px; font-size: 26px; }
}