/* ==========================================================================
   Blue Fairy Digital
   Design language: warm paper, navy ink, engraved rules, one electric blue.
   ========================================================================== */

:root {
  /* Paper & ink */
  --paper:        #fbfaf6;
  --paper-warm:   #f5f1e8;
  --paper-edge:   #ece6d9;
  --ink:          #17203a;
  --ink-soft:     #4d5772;
  --ink-faint:    #7b849b;

  /* The one accent, pulled from the mark's gradients */
  --blue:         #1e6fd9;
  --blue-deep:    #14407e;
  --sky:          #7fc7f0;
  --brass:        #a9853f;

  --rule:         rgba(23, 32, 58, 0.13);
  --rule-strong:  rgba(23, 32, 58, 0.26);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;

  --measure: 34rem;      /* comfortable prose width */
  --shell:   68rem;      /* page gutter width       */
  --pad:     clamp(1.25rem, 5vw, 2.5rem);
}

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

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

body {
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Faint woven paper texture, costs nothing */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(0deg,   rgba(23,32,58,.014) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg,  rgba(23,32,58,.014) 0 1px, transparent 1px 3px);
}

body > * { position: relative; z-index: 1; }

/* --------------------------------------------------------------- typography */

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.011em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.65rem, 3.2vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 1.6vw, 1.45rem); }

p, ul, ol { max-width: var(--measure); }
p + p, p + ul, p + ol, ul + p, ol + p { margin-top: 1.05em; }

ul, ol { padding-left: 1.3em; }
li + li { margin-top: 0.45em; }

a {
  color: var(--blue-deep);
  text-decoration-color: rgba(30, 111, 217, 0.35);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color .18s ease, text-decoration-color .18s ease;
}
a:hover { color: var(--blue); text-decoration-color: currentColor; }

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

strong { font-weight: 650; }

/* Small-caps eyebrow label — the engraved-plate voice */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.9rem;
  display: block;
}
.eyebrow--blue { color: var(--blue); }
.eyebrow--sky  { color: var(--sky); }

.lede {
  font-size: clamp(1.15rem, 1.4vw, 1.4rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 38rem;
}

/* Same voice as .lede, but sitting under a section h2 rather than opening a
   page — so it needs its own top margin and stays a step smaller than the
   page-head version it must not compete with. */
.section-lede {
  font-size: clamp(1.05rem, 1.25vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 38rem;
  margin-top: 1.4rem;
}

/* A thin engraved rule with a brass diamond at centre */
.ornament {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 3.5rem 0;
  color: var(--rule-strong);
}
.ornament::before,
.ornament::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
}
.ornament span {
  width: 6px; height: 6px;
  transform: rotate(45deg);
  background: var(--brass);
  opacity: .7;
}

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

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 3.5rem); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: .7rem 1.1rem;
  font-family: var(--sans);
  font-size: .85rem;
  z-index: 200;
}
.skip-link:focus { left: 0; }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 250, 246, 0.88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rule);
}

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

/* Once the header stacks, `space-between` has nothing left to space and both
   rows go flush left, against a hero that is centred. Centre them instead so
   the narrow layout reads as one column. 37rem is measured, not guessed: the
   wordmark, the gap and the nav together need ~507px, which is where the row
   gives up and wraps. */
@media (max-width: 37rem) {
  .site-header .shell {
    justify-content: center;
    gap: 0.6rem 1.5rem;
    padding-block: 0.7rem;
  }
}

.wordmark {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  white-space: nowrap;
}
.wordmark:hover { color: var(--blue-deep); }
/* The wings mark, reusing the favicon — the browser has already fetched it,
   so it costs nothing extra. Square box, `contain` lets the wings letterbox
   inside it at their own aspect ratio. */
.wordmark::before {
  content: "";
  width: 22px; height: 22px;
  flex: none;
  background: url("favicon.png") center / contain no-repeat;
}

.site-nav {
  display: flex;
  align-items: center;
  /* Must wrap. Every link is `white-space: nowrap`, so a non-wrapping row of
     four of them is wider than the shell below ~334px of viewport and pushes
     the document wider than the window. That overflow is invisible except for
     the band of dead paper it opens on the right, which makes every centered
     thing on the page — logo, buttons — look shifted off to the left. */
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem clamp(1rem, 2.5vw, 1.9rem);
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--rule-strong); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--blue); }

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

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: clamp(2.5rem, 7vw, 5rem) clamp(2rem, 5vw, 3.5rem);
}

#logo-container {
  max-width: 420px;
  width: min(85%, 420px);
  position: relative;
  perspective: 800px;
  /* Negative on purpose. The tagline is the last thing in the artwork, but the
     square viewBox keeps ~13% of empty height below it. Without this pull-up
     that dead band stacks on top of the buttons' own margin and the hero opens
     with a hole in it. */
  margin-bottom: -1.5rem;
  /* The logo is a drawing surface for the fairy dust: a swipe that starts
     here should trail sparks, not scroll. See the touch handlers in main.js —
     preventDefault alone won't hold iOS still, the browser commits to a
     scroll before the first touchmove arrives unless touch-action says no. */
  touch-action: none;
}

/* Anyone who asked for stillness gets no drawing surface, so they get the
   scroll back. main.js bails before binding any touch handler in this case. */
@media (prefers-reduced-motion: reduce) {
  #logo-container { touch-action: auto; }
}

.logo-layer { width: 100%; }
.logo-layer svg { width: 100%; height: auto; display: block; }

/* Wings layer stacks exactly on top of the text layer. The explicit width
   matters: it is out of flow, so without it the inner svg's `width: 100%`
   has no definite box to resolve against and browsers disagree. */
.wings-layer { position: absolute; top: 0; left: 0; width: 100%; }

/* Hide the wing groups inside the static text layer */
.hide-wing { visibility: hidden; }

/* Hide the text paths inside the animated wings layer */
.wings-only > g > path { visibility: hidden; }

.hero-tagline {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  color: var(--ink-soft);
  max-width: 30rem;
  margin-top: 1rem;
  text-wrap: balance;
}

.hero-sub {
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-faint);
  max-width: 32rem;
  margin-top: 0.9rem;
  text-wrap: balance;
}

/* ------------------------------------------------------------------ buttons */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
  justify-content: inherit;
}
.hero .actions { justify-content: center; }

.btn {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.8rem 1.5rem;
  border: 1px solid var(--ink);
  color: var(--paper);
  background: var(--ink);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
  display: inline-block;
}
.btn:hover { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn--ghost:hover { background: transparent; color: var(--blue-deep); border-color: var(--blue-deep); }

.btn--light {
  background: transparent;
  color: var(--paper);
  border-color: rgba(251, 250, 246, 0.4);
}
.btn--light:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* -------------------------------------------------------------- dark bands  */

.band {
  background: var(--ink);
  color: var(--paper);
  background-image: radial-gradient(
    120% 90% at 50% 0%, rgba(30, 111, 217, 0.35), transparent 62%);
}
.band a { color: var(--sky); text-decoration-color: rgba(127, 199, 240, .4); }
.band a:hover { color: #fff; }
.band .lede { color: rgba(251, 250, 246, 0.75); }
.band h2 { color: #fff; }

.thesis {
  font-size: clamp(1.4rem, 3.1vw, 2.15rem);
  line-height: 1.35;
  font-weight: 500;
  max-width: 30ch;
  text-wrap: balance;
}
.thesis em { font-style: italic; color: var(--sky); }

.thesis-note {
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(251, 250, 246, 0.68);
  max-width: 28rem;
}

.split {
  display: grid;
  gap: clamp(1.75rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 800px) {
  .split { grid-template-columns: 1.15fr 1fr; }
}

/* -------------------------------------------------------------------- cards */

.grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin-top: 2.5rem;
}

.card {
  background: linear-gradient(180deg, #fff, var(--paper-warm));
  border: 1px solid var(--paper-edge);
  padding: 1.75rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  position: relative;
}
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--blue), var(--sky)) 1;
  border-width: 2px 0 0 0;
  pointer-events: none;
}
/* Cards stacked in a column beside the sketch, instead of three across */
.grid--stack { grid-template-columns: 1fr; margin-top: 0; }

.card h3 { margin-bottom: 0.15rem; }
.card p { font-size: 0.98rem; color: var(--ink-soft); max-width: none; }

.tag {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--rule-strong);
  color: var(--ink-faint);
  align-self: flex-start;
  margin-top: auto;
}
.tag--live { color: var(--blue-deep); border-color: rgba(30,111,217,.4); background: rgba(30,111,217,.06); }

/* ---------------------------------------------------------- concept sketch */

/* The sketch is portrait and tall, so it pairs with a stacked column of cards
   rather than sitting alone across the full measure. */
.work-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
  margin-top: 2.5rem;
}
@media (min-width: 820px) {
  .work-split { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}

.sketch {
  margin: 0 auto;
  max-width: 340px;
  width: 100%;
}
.sketch video {
  width: 100%;
  height: auto;
  display: block;
  /* The drawing sits on cream paper already; the hairline keeps it a plate
     rather than a shape floating on the page background. */
  border: 1px solid var(--paper-edge);
  background: var(--paper-warm);
  cursor: pointer;                 /* click replays it — see main.js */
}
.sketch figcaption {
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-faint);
  text-align: center;
  margin-top: 0.7rem;
}

/* Numbered principles list */
.principles { list-style: none; padding: 0; max-width: none; margin-top: 2.5rem; }
.principles li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 0.5rem 1.25rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--rule);
  margin-top: 0;
  align-items: baseline;
}
.principles li:last-child { border-bottom: 1px solid var(--rule); }
.principles .num {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--brass);
}
.principles h3 { grid-column: 2; }
.principles p { grid-column: 2; color: var(--ink-soft); font-size: 1rem; margin-top: .4rem; }
@media (max-width: 34rem) {
  .principles li { grid-template-columns: 1fr; gap: .35rem; }
  .principles h3, .principles p { grid-column: 1; }
}

/* ------------------------------------------------------------- prose pages  */

.page-head {
  padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--rule);
}
.page-head p { margin-top: 1rem; }

.prose { padding-block: clamp(2.5rem, 5vw, 4rem); }
.prose h2 {
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
}
.prose h2:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }
.prose h3 { margin-top: 2rem; font-size: 1.1rem; }
.prose .updated {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--ink-faint);
  letter-spacing: .03em;
}

/* Definition-style contact rows */
.detail-list { list-style: none; padding: 0; max-width: none; }
.detail-list li {
  display: grid;
  grid-template-columns: minmax(7rem, 10rem) 1fr;
  gap: 0.35rem 1.5rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--rule);
  margin-top: 0;
  align-items: baseline;
}
.detail-list dt, .detail-list .label {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.detail-list .value { font-size: 1.02rem; }
.detail-list .value small {
  display: block;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin-top: 0.2rem;
}
@media (max-width: 34rem) {
  .detail-list li { grid-template-columns: 1fr; }
}

address { font-style: normal; }

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

.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--paper-warm);
  padding-block: 3rem 2.5rem;
  font-family: var(--sans);
  font-size: 0.86rem;
  color: var(--ink-soft);
  margin-top: auto;
}
.footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
.site-footer h4 {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.9rem;
}
.site-footer ul { list-style: none; padding: 0; max-width: none; }
.site-footer li + li { margin-top: 0.5rem; }
.site-footer a { color: var(--ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--blue-deep); text-decoration: underline; }
.site-footer p { max-width: 22rem; line-height: 1.6; }

.legal-line {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--ink-faint);
}
.legal-line p { max-width: none; }

/* Layout scaffold so the footer always sits at the bottom */
body { display: flex; flex-direction: column; }
main { flex: 1 0 auto; }

/* --------------------------------------------------------------- fairy dust */

#fairy-dust {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50;
}

/* ------------------------------------------------------------------- 404     */

.centered-page {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem var(--pad);
  gap: 1rem;
}

/* ------------------------------------------------------- reduced motion      */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #fairy-dust { display: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .site-header, .site-footer, #fairy-dust, body::before { display: none; }
  body { background: #fff; color: #000; }
}