/* The studio site's one stylesheet, shared by the home page and the About page. */

@font-face {
  font-family: "Montserrat";
  src: url("/assets/montserrat-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* Lora, the serif Conjecta's prose uses (copied from frontend/public/fonts), for the headline and every passage meant
   to be read; Montserrat, the wordmark's face, stays on the controls and labels. */
@font-face {
  font-family: "Lora";
  src: url("/assets/lora-normal-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("/assets/lora-italic-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

/* A pale sage ground (the user's pick, 2026-10-26, after a literary reference page), a light tint of the brand's own
   sage, under the brand's navy ink; in the dark, a deep sage-charcoal under a pale sage ink. The mark is one solid
   colour, black (white in the dark), like the lockups, which are the brand's black and white files. */
:root {
  color-scheme: light dark;
  --ground: #DADDD3;
  --ink: #293142;
  --ink-2: #545C6B;
  --rule: rgba(41, 49, 66, 0.16);
  --mark: #000000;
  --serif: "Lora", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #22261F;
    --ink: #ECEEE6;
    --ink-2: #A9AFA4;
    --rule: rgba(236, 238, 230, 0.16);
    --mark: #FFFFFF;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
a:hover { text-decoration-thickness: 2px; }
a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  border-radius: 2px;
}

.wrap {
  max-width: 70rem;
  margin: 0 auto;
  padding-inline: clamp(1rem, 5vw, 3rem);
}

/* The hero: the mark, drawn once, beside the statement. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.5rem, 7vw, 6rem);
  min-height: min(42rem, 84svh);
  padding-block: clamp(3rem, 9vh, 6rem);
}

.mark {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
/* ⚠️ No round line caps: a dash of zero length still paints its round cap, which showed as a dot at each hexagon's
   starting corner before it drew (the user, 2026-10-26: "it starts with dots and points"). A closed path has no caps,
   so the finished mark is unchanged. */
.mark .hexes path {
  fill: none;
  stroke: var(--mark);
  stroke-width: 6.6;
  stroke-linejoin: round;
}
/* The overlaps are invisible at rest, so the finished mark, and the reduced-motion one, is the three lines alone.
   The fills are the mark's own colour, thin: one layer on a two-way overlap, three on the centre. */
.mark .lenses path {
  fill: var(--mark);
  fill-opacity: 0.14;
  opacity: 0;
}

/* The mark arrives in three beats, Peirce's three categories (the user's idea, 2026-10-26): the top hexagon alone
   (firstness, a quality by itself), then the lower-left meeting it (secondness, the first overlap, a fact), then the
   lower-right closing the three-way overlap at the centre (thirdness, the relation that holds the other two). Each
   hexagon blooms from the corner nearest the centre (where its path starts, see index.html), its line growing both
   ways at once and meeting itself at the far side, fast out of the centre and slow into the corners; each beat starts
   as the one before is about two-thirds drawn, so it reads as a sequence, not a queue. The whole mark settles from
   98% to full size as the third closes.
   ⚠️ The paths' order in index.html IS the beats' order (top, left, right): the delays go by nth-child.
   ⚠️ The dash pattern's period is the path's own length (pathLength 1, dasharray "L (1-L)"), so it tiles the closed
   path exactly and an offset of L/2 centres the visible dash on the start corner. A pattern of any other period
   grows one way only.
   Since 2026-10-26 one more movement follows (the user's call, a richer arrival that keeps the three beats): each
   overlap fills as the hexagon that makes it closes, the top-left lens with the second, the other two with the third,
   the centre darkest where all three stack; they hold, then fall away together at 2.3 s. About 3 s in all, the text
   beside it there from the first frame. A bead of light running each hexagon's lines once followed, built the same
   day and cut the same day (the user's call: "lines going through the lines"). */
@media (prefers-reduced-motion: no-preference) {
  .mark {
    animation: settle 1.9s linear both;
  }
  .mark .hexes path {
    stroke-dasharray: 0 1;
    stroke-dashoffset: 0;
    opacity: 0;
    animation: bloom 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .mark .hexes path:nth-child(2) { animation-delay: 0.45s; }
  .mark .hexes path:nth-child(3) { animation-delay: 0.9s; }

  /* ⚠️ lens-out fills FORWARDS only: with "both", its backwards fill (opacity 1) would win over lens-in's (0) during
     its delay, the later animation in the list taking precedence, and every overlap would show from the first
     frame. Measured 2026-10-26. */
  .mark .lenses path {
    animation: lens-in 0.45s ease-out 1.45s both, lens-out 0.6s ease-in 2.3s forwards;
  }
  .mark .lenses path:nth-child(1) { animation-delay: 1s, 2.3s; }
}
@keyframes lens-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lens-out { from { opacity: 1; } to { opacity: 0; } }
/* The last frame drops the dash, so each hexagon ends as one closed path with a round join where its ends meet. */
@keyframes bloom {
  0% { stroke-dasharray: 0 1; stroke-dashoffset: 0; opacity: 0; }
  12% { opacity: 1; }
  99% { stroke-dasharray: 1 0; stroke-dashoffset: 0.5; opacity: 1; }
  100% { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 1; }
}
/* Held small through the first two beats; eases to full size over the third (from 1.25 s of 1.9 s). */
@keyframes settle {
  0%, 66% { transform: scale(0.98); animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
  100% { transform: scale(1); }
}

/* A one-sentence statement, sized for four balanced lines beside the mark (the short "Firstness is an AI studio."
   filled two at 5rem). */
h1 {
  margin: 0 0 1.75rem;
  max-width: 22ch;
  font-family: var(--serif);
  font-size: clamp(2rem, 1.3rem + 2.3vw, 3.2rem);
  text-wrap: balance;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.lede {
  margin: 0 0 2rem;
  max-width: 34ch;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem);
  line-height: 1.5;
}

/* The hero's two ways on: the About page as a button, the address as a plain link beside it. */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}

.button {
  display: inline-flex;
  align-items: center;
  padding: 0.8rem 1.4rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ground);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.button:hover { opacity: 0.88; }

.email {
  font-weight: 500;
  text-decoration-color: var(--rule);
}
.email:hover { text-decoration-color: currentColor; }

/* The products: one row each, the whole row opening the product's site. */
.products {
  padding-block: clamp(3rem, 8vw, 5.5rem);
}

.products h2 {
  margin: 0 0 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-2);
}

.product-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.product {
  position: relative;
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr) 9.5rem;
  align-items: center;
  gap: 0.75rem 3rem;
  padding-block: 2rem;
  border-bottom: 1px solid var(--rule);
}
/* The footer's rule closes the list, so the last row draws none of its own (two rules read as one doubled). */
.product:last-child { border-bottom: 0; }

/* 52px: the grid Conjecta's lockup is drawn on, so its edges land on whole pixels. */
.products .logo {
  display: block;
  height: 52px;
  width: auto;
}

.product p {
  margin: 0;
  max-width: 52ch;
  font-family: var(--serif);
}

.product .go {
  justify-self: end;
  text-align: right;
}

/* Each entry opens its product's site from anywhere on it, through the one link it holds. */
.products .domain {
  font-weight: 500;
  text-decoration-color: var(--rule);
}
.products .domain::after {
  content: "";
  position: absolute;
  inset: 0;
}
.product:hover .domain {
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

.status {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.875rem;
  color: var(--ink-2);
}

/* The About page: the lockup leading home, then the title and the text at a reading measure. */
.page-head {
  padding-block: 2rem 0;
}
.page-head a {
  display: inline-block;
}
.page-head .lockup {
  display: block;
  height: 3rem;
  width: auto;
  margin-left: -0.3rem;
}

.about-page {
  padding-block: clamp(3rem, 10vh, 6rem) clamp(4rem, 10vw, 7rem);
}
.about-page h1 {
  max-width: none;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
}
/* Every paragraph at one size and one measure. The first paragraph was set larger, as a lede, until 2026-10-27: once
   the hunch was folded into it, five lines of lede type over a body-sized second paragraph read as the second being
   smaller (the user's question), so the rule went. */
.about-page p {
  margin: 0 0 1.25rem;
  max-width: 45rem;
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.75;
}
.about-page p:last-child { margin-bottom: 0; }

/* The founder, under the statement: a labelled section at the same reading measure, opened by a rule, closed by
   the ways to his own pages. */
.founder {
  max-width: 45rem;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid var(--rule);
}
.founder h2 {
  margin: 0 0 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-2);
}
/* The portrait at the text's left, the text keeping the page's measure less the portrait's column. */
.founder-body {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}
.portrait {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}
/* Spaced like the footer's links, with no separator: a dot between flex items lands alone at a row's end when the
   row wraps on a phone. */
.about-page .founder-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 1.75rem;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.founder-links a {
  color: var(--ink);
  font-weight: 500;
  text-decoration-color: var(--rule);
}
.founder-links a:hover { text-decoration-color: currentColor; }

/* One row: the studio's lockup and legal line, then how to reach it. The rule sits on this inner box so it
   spans the content, not the page gutter. */
.site-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  padding-block: 2rem 2.5rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.foot-brand,
.foot-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 2rem;
}

.site-foot .lockup {
  display: block;
  height: 3rem;
  width: auto;
  margin-left: -0.3rem;
}

.site-foot .legal {
  margin: 0;
  font-size: 0.875rem;
}

.foot-contact > a { color: var(--ink); }
.foot-contact > a[aria-current="page"] { text-decoration: none; }

.social {
  list-style: none;
  display: flex;
  gap: 0.25rem;
  /* The icons' own boxes pad the glyphs, so the row reaches past them to meet the content's edges. */
  margin: 0 -0.6rem;
  padding: 0;
}
.social a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 6px;
  color: var(--ink-2);
}
.social a:hover { color: var(--ink); }
.social svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 47.99rem) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    gap: 2.25rem;
    padding-block: 3rem 3.5rem;
  }
  .mark { width: 8rem; }

  .product {
    grid-template-columns: minmax(0, 1fr);
    padding-block: 1.75rem;
  }
  .product .go {
    justify-self: start;
    text-align: left;
  }

  .founder-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
  .portrait { width: 7rem; }
}