/* ==========================================================================
   Ezana - ezana.ai
   Light theme only. Near-monochrome plus one accent (amber), in tiny doses.
   No framework, no build step, no JavaScript.
   ========================================================================== */

:root {
  --paper: #fcfbf8;
  --ink: #111418;
  --soft: #6b7280;
  --line: #e5e2da;
  --amber: #e8a020;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* The document column. Prose sits at a 66ch measure inside it; only the
     numbered rows use the full width. */
  --column: 760px;
  --measure: 36rem; /* = 66ch of 17.5px Inter, in a unit every element shares */
  --gutter: 24px;
}

/* --- fonts ---------------------------------------------------------------
   Self-hosted rather than loaded from the Google Fonts CDN. Two fewer origins
   to resolve means no render-blocking third-party stylesheet and no
   CSS-to-font request chain - which matters most on a slow connection.
   Latin subsets only, taken from the Google Fonts build.
   Inter and IBM Plex Mono are both licensed under the SIL Open Font License
   1.1; see fonts/OFL.txt.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/inter-latin-var.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 Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-400-latin.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;
}

/* --- reset ---------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17.5px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p,
ol,
ul,
figure {
  margin: 0;
}

/* --- layout -------------------------------------------------------------- */

.wrap {
  max-width: var(--column);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Running prose keeps a comfortable measure even where the column is wider. */
.measure {
  max-width: var(--measure);
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: var(--gutter);
  top: 10px;
  z-index: 10;
  padding: 8px 12px;
  background: var(--paper);
  border: 1px solid var(--ink);
}

/* --- type ---------------------------------------------------------------- */

h1 {
  font-size: clamp(2rem, 7vw, 2.75rem);
  line-height: 1.12;
  font-weight: 550;
  letter-spacing: -0.022em;
}

/* The hero headline only: set large and in capitals. text-transform rather
   than typed capitals, so the markup - and anything reading it aloud -
   still sees sentence case. */
.hero-title {
  font-size: clamp(2.5rem, 9vw, 4.5rem);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-wrap: balance;
  max-width: none;
}

h2 {
  font-size: clamp(1.5rem, 5vw, 1.875rem);
  line-height: 1.22;
  font-weight: 550;
  letter-spacing: -0.016em;
}

h3 {
  font-size: 1.3125rem;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.012em;
}

p + p {
  margin-top: 1.1em;
}

em {
  font-style: italic;
}


/* Mono metadata: kickers, numbering, bylines, footer meta. */
.meta,
.mono {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--soft);
  font-weight: 400;
}


/* A standalone claim, set slightly larger. */
.statement {
  font-size: 1.1875rem;
  line-height: 1.55;
  font-weight: 550;
  letter-spacing: -0.01em;
}

/* --- links --------------------------------------------------------------- */

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Every link underlines amber on hover - the only interactive feedback. */
.u {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: var(--line);
}

.u:hover {
  text-decoration-color: var(--amber);
}

/* --- header -------------------------------------------------------------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--paper);
}

.head-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.125rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  white-space: nowrap;
}

/* The mark, inline so it inherits the wordmark's colour through
   currentColor and needs no extra request. */
.wordmark .mark {
  flex: none;
  width: 2.625rem;
  height: auto;
}

.head-nav {
  display: flex;
  gap: 1.25rem;
}

/* Three nav items plus the wordmark do not fit on a phone, so the header is
   allowed to wrap rather than overflow. Tightening the gaps first means it
   only wraps on genuinely narrow screens. */
@media (max-width: 520px) {
  .head-inner {
    flex-wrap: wrap;
    gap: 0.625rem 1rem;
  }

  .head-nav {
    gap: 1rem;
  }
}

.head-nav a:hover {
  color: var(--ink);
}

/* --- sections ------------------------------------------------------------ */

main > section {
  padding-block: clamp(4rem, 12vw, 7.5rem);
  scroll-margin-top: 4.5rem;
}

main > section:first-child {
  padding-top: clamp(2.5rem, 8vw, 4.5rem);
}

/* The section heading is centred and set in capitals, echoing the hero; the
   columns beneath it stay left-aligned. Uppercase needs its tracking opened
   up - the tight negative fit that suits mixed case reads cramped here. */
.section-title {
  margin-inline: auto;
  max-width: var(--measure);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}

/* --- hero ---------------------------------------------------------------- */

/* The hero is the one centred block on the site; everything below it stays
   left-aligned and document-like. */
.hero {
  text-align: center;
}

.hero .measure {
  margin-inline: auto;
}

.hero-lede {
  margin-top: 1.5rem;
  font-size: 1.125rem;
}


/* --- hero figure ---------------------------------------------------------
   Two sets of thin ellipses, each progressively rotated, counter-turning at
   different speeds so they drift through each other into a slow moiré.

   It is drawn rather than filmed, which is the whole point: strokes on
   transparent ground sit on the paper the same way the type does, so there is
   no frame, no backdrop to match and no edge to hide. It also costs about 4 KB
   instead of 2.9 MB, stays crisp at any size, and has no colour to strip.
   -------------------------------------------------------------------------- */

.hero-figure {
  width: 100%;
  max-width: 560px;
  margin: clamp(1.5rem, 3.5vw, 2.25rem) auto 0;
  aspect-ratio: 1;
}

.hero-figure svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ring-set {
  fill: none;
  stroke: var(--ink);
  stroke-width: 0.7;
  transform-origin: 0 0;
}

.ring-out {
  stroke-opacity: 0.32;
  animation: ring-turn 54s linear infinite;
}

.ring-in {
  stroke-opacity: 0.19;
  animation: ring-turn 38s linear infinite reverse;
}

@keyframes ring-turn {
  to {
    transform: rotate(360deg);
  }
}

/* The one moving thing on the site, so it is also the one thing that has to
   stop when someone asks for less motion. */
@media (prefers-reduced-motion: reduce) {
  .ring-out,
  .ring-in {
    animation: none;
  }
}

/* --- offerings -----------------------------------------------------------
   Editorial rows rather than three columns: drawing left, text right, each
   offering getting the full measure instead of a third of it. Titles fit on
   one line here, and the copy reads at a proper length.
   -------------------------------------------------------------------------- */

.stack {
  margin: 3.5rem 0 0;
  padding: 0;
  list-style: none;
}

.stack > li {
  display: grid;
  grid-template-columns: 236px 1fr;
  gap: 3rem;
  align-items: center;
  margin-top: 3.25rem;
}

.stack > li:first-child {
  margin-top: 0;
}

.stack figure {
  margin: 0;
}

.stack-num {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: var(--soft);
}

.stack h3 {
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: 0.9375rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stack p:last-child {
  max-width: 34rem;
  margin-top: 0.875rem;
  color: var(--soft);
  font-size: 1.0625rem;
  line-height: 1.65;
}

@media (max-width: 720px) {
  .stack > li {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 3.5rem;
  }

  .stack figure {
    max-width: 236px;
  }
}

/* Each offering is a line drawing, same ink as the hero figure and the type:
   strokes on transparent ground, so there is no tile and no edge. */
.dwg {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dwg .l1 {
  stroke-width: 1.1;
  stroke-opacity: 0.55;
}

.dwg .l2 {
  stroke-width: 1;
  stroke-opacity: 0.38;
}

.dwg .l3 {
  stroke-width: 0.8;
  stroke-opacity: 0.2;
}

.dwg .n {
  fill: var(--ink);
  fill-opacity: 0.42;
  stroke: none;
}

/* One amber accent per drawing, carrying the meaning: the traced path, the
   checkpoint held open. */
.dwg .mk {
  stroke: var(--amber);
  stroke-width: 1.4;
  stroke-opacity: 1;
}

.dwg .mkf {
  fill: var(--amber);
  stroke: none;
}

.dwg .dash {
  stroke-dasharray: 3 4;
}


/* --- essay --------------------------------------------------------------- */

.essay {
  padding-block: clamp(3rem, 10vw, 5rem) clamp(4rem, 11vw, 6rem);
}

.essay h1 {
  margin-top: 0.875rem;
}

.byline {
  margin-top: 1.5rem;
}

.essay p {
  max-width: var(--measure);
}

.essay > p:first-of-type,
.byline + p {
  margin-top: 3rem;
}

/* The five industries are a numbered list now. Mono numerals in the soft
   grey, matching how numbering reads everywhere else on the site. */
.essay ol {
  max-width: var(--measure);
  margin-top: 1.6em;
  padding-left: 2rem;
}

.essay li {
  margin-top: 1.1em;
  padding-left: 0.25rem;
}

.essay li::marker {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--soft);
}

.essay ol + p {
  margin-top: 1.6em;
}

.essay .statement {
  margin-top: 1.1em;
  max-width: var(--measure);
}



/* --- case studies --------------------------------------------------------
   A narrow reading column like the essay, but structured: a mono label per
   case, then groups introduced by mono headings. No rules anywhere - the two
   cases are separated by space, the same as every other section.
   -------------------------------------------------------------------------- */

.cases {
  max-width: var(--measure);
  margin-inline: auto;
  padding-block: clamp(3rem, 10vw, 5rem) clamp(4rem, 11vw, 6rem);
}

.cases-lede {
  margin-top: 1.5rem;
  color: var(--soft);
}

.case {
  margin-top: clamp(4rem, 9vw, 6.5rem);
}

.case-label {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--soft);
}

/* Deliberately NOT amber. At 13px on cream the accent gives 2.14:1, well
   under the 4.5:1 needed for text - amber works on this site as ornament
   (hover underlines, marks inside the drawings) and cannot carry a word or a
   number. The grey is 4.7:1 and passes. */
.case-num {
  margin-right: 0.75rem;
  color: var(--soft);
}

.case h2 {
  margin-top: 0.875rem;
  font-size: clamp(1.375rem, 4vw, 1.625rem);
  line-height: 1.25;
  letter-spacing: -0.014em;
}

.case > p {
  margin-top: 1.1em;
}

.case-head {
  margin-top: 2.25rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--soft);
}

.case-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-list li {
  margin-top: 0.875rem;
  color: var(--soft);
  font-size: 1.0625rem;
  line-height: 1.6;
}


/* --- footer -------------------------------------------------------------- */

.site-foot {
  padding-block: 4.5rem 3.5rem;
}


/* The footer is a single row now, so it needs no internal separation - its
   own padding does the work. */
.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}

.foot-nav {
  display: flex;
  gap: 0.75rem;
}

.foot-nav a:hover {
  color: var(--ink);
}

.sep {
  color: var(--line);
}