/*
  Archival paper system
  - Cream ground (mounting-board, not Instagram beige)
  - Warm ink, soft paper grain, scarce accent
  - Hero: brand mark + wordmark as the figure
  - Avoid: terracotta/serif cliché, purple gradients, broadsheet density
*/

/*
  IBM Plex Sans variable (latin + latin-ext). Axis tops out at 700, which
  covers every weight the site uses.
*/
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-variable-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

:root {
  color-scheme: light;
  /* Canvas swatch colors — full hexes, not muted path derivatives. */
  --bg: #e7e1d4;
  --bg-deep: #ddd5c5;
  --fg: #1a1714;
  --fg-muted: #3f3a33;
  --fg-dim: #6a6358;
  --spurs-black: #000000;
  --spurs-silver: #c4ced4;
  --spurs-white: #ffffff;
  --fiesta-teal: #00b3b8;
  --fiesta-pink: #f9386a;
  --fiesta-orange: #f99f1c;
  /*
    Roles, not a rainbow: silver carries every structural rule, teal is the
    single interactive signal, black/white own the primary action, and the
    Fiesta trio appears once as a solid band referencing the 1990s arches.
  */
  --signal: var(--fiesta-teal);
  --accent: var(--signal);
  --rule: #1a1714;
  --rule-dim: var(--spurs-silver);
  --border: #1a1714;
  --border-strong: #1a1714;
  --surface: rgba(26, 23, 20, 0.04);
  --surface-hover: rgba(26, 23, 20, 0.065);
  --on-ink: var(--spurs-white);
  --font: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pad-x: clamp(1.25rem, 4vw, 3rem);
  --content-max: 72rem;
  --header-h: 4rem;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-family: var(--font);
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg);
  /* Soft paper grain + a faint falloff so the page reads as a sheet, not a fill. */
  background-image:
    radial-gradient(
      ellipse 120% 80% at 50% -10%,
      rgba(255, 252, 245, 0.55),
      transparent 55%
    ),
    radial-gradient(
      ellipse 90% 70% at 50% 110%,
      var(--bg-deep),
      transparent 50%
    ),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.09 0 0 0 0 0.07 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-attachment: fixed;
  color: var(--fg);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
a,
button,
input,
textarea,
select,
label,
span {
  font-family: inherit;
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

/*
  One content rail. Every primary column uses this left edge:
  (viewport - min(viewport, content-max)) / 2 + pad-x
*/
.site-shell,
.hero-content,
.section,
.page-intro {
  width: min(100%, var(--content-max));
  margin-inline: auto;
  padding-inline: var(--pad-x);
  box-sizing: border-box;
}

/* Solid bar, no backdrop blur: one less paint pass per scroll frame. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  height: var(--header-h);
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color 180ms var(--ease-out);
}

.site-header.is-scrolled {
  border-bottom-color: var(--rule);
}

.site-header .site-shell {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  line-height: 1;
}

.brand-link-mark {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
  flex-shrink: 0;
  filter: brightness(0);
}

.brand-link-name {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.25rem;
}

.site-nav a {
  color: var(--fg-dim);
  font-size: 0.9rem;
  line-height: 1;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 0.15rem;
  transition: color 160ms ease, border-color 160ms ease;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--signal);
  border-bottom-color: var(--signal);
}

/*
  Masthead: the wordmark is the composition, sized to run the content rail.
  Mark sits above it on the rail rather than competing at the same scale.
*/
.hero {
  position: relative;
  min-height: min(80dvh, 48rem);
  display: flex;
  align-items: center;
  padding-top: var(--header-h);
  background: transparent;
  border-bottom: 0;
}

/*
  Container query units size the wordmark to the content rail itself, so it
  fills the measure at every width instead of tracking the viewport and
  underfilling once the rail caps at --content-max.
*/
.hero-content {
  container-type: inline-size;
  padding-top: 3rem;
  padding-bottom: 3.5rem;
}

.brand-mark {
  width: clamp(2.25rem, 3.4vw, 3.25rem);
  height: clamp(2.25rem, 3.4vw, 3.25rem);
  object-fit: contain;
  filter: brightness(0);
}

.wordmark-text {
  margin: clamp(1rem, 2.5vw, 1.75rem) 0 0;
  color: var(--fg);
  font-size: 26cqw;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.86;
}

.wordmark-line {
  display: block;
}

/* Wide enough for one line: set on a single line, edge to edge */
@media (min-width: 700px) {
  .wordmark-text {
    font-size: 13.3cqw;
    white-space: nowrap;
  }

  .wordmark-line {
    display: inline;
  }
}

/* Rule + baseline row: tagline reads as the caption to the masthead */
.hero-base {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem 2.5rem;
  margin-top: clamp(1.75rem, 4vw, 3rem);
  padding-top: 1.35rem;
  border-top: 2px solid var(--spurs-silver);
}

.tagline {
  margin: 0;
  color: var(--fg);
  font-size: clamp(1.15rem, 2.1vw, 1.7rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.5rem;
}

@media (max-width: 640px) {
  .hero {
    min-height: min(88dvh, 44rem);
  }

  .hero-base {
    flex-direction: column;
    align-items: flex-start;
  }
}

.hero-cta a {
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  line-height: 1;
  transition:
    color 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease;
}

.hero-cta-primary {
  padding: 0.9rem 1.5rem;
  border: 1px solid var(--spurs-black);
  background: var(--spurs-black);
  color: var(--spurs-white);
  font-weight: 500;
}

.hero-cta-primary:hover {
  background: transparent;
  color: var(--spurs-black);
}

.hero-cta-secondary {
  padding: 0.9rem 0.1rem;
  color: var(--fg-muted);
  border-bottom: 2px solid var(--spurs-silver);
  font-weight: 400;
}

.hero-cta-secondary:hover {
  color: var(--fg);
  border-bottom-color: var(--signal);
}

/*
  The one chromatic block on the page: solid Fiesta bars over Spurs silver,
  full bleed, echoing the 1989-2002 logo arches. It also divides hero from
  the thesis, so no hairline rule competes with it.
*/
.fiesta-band {
  flex-shrink: 0;
  width: 100%;
}

.fiesta-band-silver {
  height: 0.5rem;
  background: var(--spurs-silver);
}

.fiesta-band-arches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 1.25rem;
}

.fiesta-band-arches > :nth-child(1) {
  background: var(--fiesta-teal);
}

.fiesta-band-arches > :nth-child(2) {
  background: var(--fiesta-pink);
}

.fiesta-band-arches > :nth-child(3) {
  background: var(--fiesta-orange);
}

.site-main {
  flex: 1 0 auto;
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--bg);
}

.section {
  padding-top: 4.5rem;
  padding-bottom: 1rem;
  border-top: 1px solid var(--border);
}

.section:first-child {
  border-top: 0;
  padding-top: 5.5rem;
}

/*
  Full-bleed band, but inner blocks use the same rail as .section — pad-x
  lives on the inner, not outside content-max (that was shifting thesis
  left of header/hero). No section border: the closing rule of
  .thesis-points already divides the block, and two near-parallel rules
  read as an accident.
*/
.section.thesis {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 5.5rem 0 3rem;
  background: var(--bg);
  border-top: 0;
  border-bottom: 0;
}

.section.thesis .thesis-intro,
.section.thesis .thesis-points {
  width: min(100%, var(--content-max));
  margin-inline: auto;
  padding-inline: var(--pad-x);
  box-sizing: border-box;
}

.section.thesis .thesis-points {
  margin-top: 3.25rem;
}

/* Do not put max-width + margin:auto on .thesis-intro — that centers
   a short block in the full-bleed section and breaks the shared rail. */

#companies.section {
  padding-top: 5rem;
  padding-bottom: 5rem;
  border-top: 0;
}

.eyebrow {
  margin: 0 0 0.85rem;
  color: var(--signal);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
}

.section h1,
.section h2 {
  margin: 0 0 1.25rem;
  color: var(--fg);
  font-size: clamp(2rem, 5.2vw, 3.9rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  max-width: 22ch;
}

.section h3 {
  margin: 0 0 0.6rem;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.lede,
.section p:not(.eyebrow) {
  margin: 0 0 1rem;
  max-width: 40rem;
  color: var(--fg-muted);
  font-size: 1.05rem;
}

/* Lead-in claims read as headings inside body copy: full ink, extra weight. */
.section p strong {
  color: var(--fg);
  font-weight: 650;
}

.section code {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
  color: var(--fg);
}

/* Row links manage their own edges, so they opt out of the text-link rule */
.section a:not(.company-row) {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 2px solid var(--signal);
}

.section a:not(.company-row):hover {
  border-bottom-color: var(--fg);
}

.thesis-intro {
  max-width: none;
}

.thesis h2 {
  max-width: 18ch;
  margin-bottom: 1.1rem;
}

/* Scoped past `.section p`, which otherwise wins on specificity */
.section .thesis-lede {
  margin: 0;
  max-width: 40rem;
  color: var(--fg-muted);
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  line-height: 1.4;
}

.thesis-points {
  display: grid;
  gap: 0;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
}

.thesis-point {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0.75rem 1.25rem;
  padding: 1.85rem 0;
  border-top: 1px solid var(--rule-dim);
  align-items: start;
  transition: border-color 500ms var(--ease-out);
}

.thesis-point:last-child {
  border-bottom: 1px solid var(--rule-dim);
}

/* Scroll response: the rule resolves to ink and the commitment gains weight */
.thesis-point.is-visible {
  border-top-color: var(--rule);
}

.thesis-point.is-visible:last-child {
  border-bottom-color: var(--rule);
}

.thesis-index {
  margin-top: -0.1rem;
  color: var(--fg);
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.thesis-point-body {
  display: grid;
  gap: 0.9rem;
  margin: 0;
}

.section .thesis-will-not,
.section .thesis-will {
  margin: 0;
  max-width: none;
  font-size: clamp(1.08rem, 1.55vw, 1.35rem);
  line-height: 1.4;
  letter-spacing: -0.015em;
}

.section .thesis-will-not {
  color: var(--fg-dim);
  font-weight: 400;
}

.section .thesis-will {
  color: var(--fg);
  font-variation-settings: "wght" 500;
  transition: font-variation-settings 600ms var(--ease-out);
}

.thesis-point.is-visible .thesis-will {
  font-variation-settings: "wght" 700;
}

.thesis-point .thesis-will {
  align-self: stretch;
}

@media (prefers-reduced-motion: reduce) {
  .thesis-point,
  .thesis-will {
    transition: none;
  }
}

@media (min-width: 800px) {
  .thesis-point {
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: 1rem 1.75rem;
    padding: 2.4rem 0;
  }

  .thesis-point-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    column-gap: 2.75rem;
    row-gap: 0;
    align-items: start;
  }

  .thesis-will {
    border-left: 1px solid var(--rule);
    padding-left: 2.5rem;
  }
}

.company-list {
  display: grid;
  gap: 0;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  background: var(--bg);
}

.company-item {
  margin: 0;
}

.company-row {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  gap: 1rem 1.35rem;
  align-items: center;
  /* No horizontal inset — logos share the section rail with headings */
  padding: 1.35rem 0;
  border-top: 1px solid var(--border);
  text-decoration: none;
  color: var(--fg);
  transition: background-color 160ms ease;
}

.company-item:first-child .company-row {
  border-top: 0;
}

/*
  Ink is the only accent, so the row inverts rather than tinting.
  The side shadows extend the fill past the text rail without shifting layout.
*/
.company-row:hover,
.company-row:focus-visible {
  background: var(--spurs-black);
  color: var(--spurs-white);
  box-shadow: -1rem 0 0 var(--spurs-black), 1rem 0 0 var(--spurs-black);
  outline: none;
}

.company-row:hover h3,
.company-row:hover p,
.company-row:hover .company-row-domain,
.company-row:focus-visible h3,
.company-row:focus-visible p,
.company-row:focus-visible .company-row-domain {
  color: var(--on-ink);
}

.company-row:hover .company-row-logo,
.company-row:focus-visible .company-row-logo {
  filter: brightness(0) invert(1);
}

.company-row-logo {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  filter: brightness(0);
  transition: filter 160ms ease;
}

.company-row-copy {
  min-width: 0;
}

.company-row h3 {
  margin: 0 0 0.35rem;
  color: var(--fg);
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
}

.company-list + p {
  margin-top: 1.75rem;
}

.company-row p {
  margin: 0;
  color: var(--fg-muted);
  font-size: 0.98rem;
  max-width: 36rem;
}

.company-row-domain {
  color: var(--fg-dim);
  font-size: 0.9rem;
  white-space: nowrap;
  line-height: 1.2;
}

/*
  Portraits are cut out and desaturated, so they sit directly on the page with
  no frame. The rule under each one carries the name, matching the section rules
  used elsewhere.
*/
.team-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 3rem 2.5rem;
  margin: 2.5rem 0 1rem;
  padding: 0;
  list-style: none;
}

.team-member {
  margin: 0;
}

.team-photo {
  display: block;
  width: 100%;
  max-width: 15rem;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center top;
}

.team-copy {
  max-width: 15rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.team-heading {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.3rem;
}

.section .team-name {
  margin: 0;
  max-width: none;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* Sized to the name's cap height so it reads as punctuation, not a button. */
.team-social {
  display: inline-flex;
  color: var(--fg-dim);
  transition: color 160ms ease;
}

.team-social svg {
  display: block;
  width: 0.95rem;
  height: 0.95rem;
  fill: currentColor;
}

.team-social:hover {
  color: var(--fg-dim);
}

.section .team-role {
  margin: 0;
  max-width: none;
  font-size: 0.95rem;
}

/*
  Relu has no public site of its own, so the IP row borrows the portfolio row's
  rail and rules without the link affordance or the hover inversion.
*/
.ip-list {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
}

.ip-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem 1.35rem;
  align-items: baseline;
  padding: 1.35rem 0;
}

.ip-row-copy {
  min-width: 0;
}

.section .ip-row h3 {
  margin: 0 0 0.35rem;
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
}

.section .ip-row p {
  margin: 0;
  max-width: 36rem;
  font-size: 0.98rem;
}

.ip-row-note {
  color: var(--fg-dim);
  font-size: 0.9rem;
  white-space: nowrap;
  line-height: 1.2;
}

.page-intro {
  padding-top: calc(var(--header-h) + 3.5rem);
  padding-bottom: 1rem;
}

.page-intro h1 {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.page-segments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin: 1.75rem 0 0;
}

.page-segments a {
  color: var(--fg-muted);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--spurs-silver);
  line-height: 1.3;
}

.page-segments a:hover {
  color: var(--fg);
  border-bottom-color: var(--signal);
}

.page-segment {
  scroll-margin-top: calc(var(--header-h) + 1.25rem);
}

.page-segment h3 {
  margin: 2rem 0 0.75rem;
}

.site-footer {
  flex-shrink: 0;
  width: 100%;
  margin: auto 0 0;
  padding: 2rem max(var(--pad-x), calc((100% - var(--content-max)) / 2 + var(--pad-x)))
    2.5rem;
  box-sizing: border-box;
  border-top: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--fg-dim);
  font-size: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}

.site-footer a {
  color: #000000;
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--fg);
}

@media (max-width: 720px) {
  .company-row {
    grid-template-columns: 2.5rem 1fr;
    gap: 0.75rem 1rem;
  }

  .company-row-domain {
    grid-column: 2;
  }

  .site-header .site-shell {
    gap: 0.75rem;
  }
}

/* Header must stay on one row: the mark carries the brand below this width */
@media (max-width: 560px) {
  .brand-link-name {
    display: none;
  }

  .site-nav {
    flex-wrap: nowrap;
    gap: 0.7rem;
  }

  .site-nav a {
    font-size: 0.82rem;
  }
}

/* The fifth nav item needs tighter tracking to hold one row on small phones. */
@media (max-width: 400px) {
  .site-nav {
    gap: 0.6rem;
  }

  .site-nav a {
    font-size: 0.78rem;
  }
}