/* ==========================================================================
   FIELD DATA — The Glass Database house style
   Two modes from one token set:
     1. .fd-slide  → fixed 2160×2700 (4:5) canvas, 1:1 with the PNG carousel
     2. .fd-page   → fluid web layout for glassdatabase.org
   Fonts (put in <head>, before this sheet):
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,100..900,0..100,0..1;1,9..144,100..900,0..100,0..1&family=Archivo:wght@100..900&family=IBM+Plex+Mono:wght@400;500&display=swap">
   ========================================================================== */

:root {
  /* --- ground --------------------------------------------------------- */
  --fd-bg-top:    #0A0D11;
  --fd-bg-base:   #1A140F;
  --fd-rule:      #24221F;   /* hairlines between rows */
  --fd-rule-soft: #2A2824;   /* eyebrow underline */

  /* --- palette -------------------------------------------------------- */
  --fd-amber:  #E8A44A;   /* primary accent, CTA, eyebrow */
  --fd-teal:   #5EC8BD;   /* cool / affordable end of the data ramp */
  --fd-molten: #E25836;   /* hot / high end, warnings, constraints */
  --fd-violet: #967AD2;   /* independent pathways, standards */
  --fd-bone:   #EEE7DB;   /* primary text */
  --fd-dim:    #A8A29A;   /* body copy */
  --fd-faint:  #6E665C;   /* basis notes, handle, footnotes */

  /* data temperature ramp: teal → amber → molten */
  --fd-ramp-1: var(--fd-teal);
  --fd-ramp-2: var(--fd-amber);
  --fd-ramp-3: var(--fd-molten);

  /* --- type ----------------------------------------------------------- */
  --fd-serif: "Fraunces", Georgia, serif;          /* headlines only */
  --fd-sans:  "Archivo", system-ui, sans-serif;    /* body copy */
  --fd-mono:  "IBM Plex Mono", ui-monospace, monospace; /* eyebrow, labels, CTA */

  /* Fraunces axis order is [opsz, wght, SOFT, WONK].
     Keep opsz 40–70 — pushing toward 144 washes out thin horizontals
     (the capital-H crossbar) on the dark ground. */
  --fd-opsz: 52;
  --fd-wght: 310;

  /* --- geometry ------------------------------------------------------- */
  --fd-margin: 150px;   /* left margin, canonical */
  --fd-track:  0.16em;  /* mono letter-spacing */
}

/* ==========================================================================
   1. GROUND
   ========================================================================== */

.fd-ground {
  background-color: var(--fd-bg-top);
  background-image:
    /* warm reheat glow pooling low-left */
    radial-gradient(115% 62% at 28% 102%, rgba(232,164,74,0.10) 0%, rgba(232,164,74,0) 62%),
    linear-gradient(180deg, var(--fd-bg-top) 0%, #12100E 62%, var(--fd-bg-base) 100%);
  color: var(--fd-bone);
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   2. TYPE ROLES
   ========================================================================== */

.fd-eyebrow {
  font-family: var(--fd-mono);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: var(--fd-track);
  text-transform: uppercase;
  color: var(--fd-amber);
  padding-bottom: 34px;
  border-bottom: 1px solid var(--fd-rule-soft);
}

.fd-headline {
  font-family: var(--fd-serif);
  font-variation-settings: "opsz" var(--fd-opsz), "wght" var(--fd-wght), "SOFT" 0, "WONK" 0;
  font-weight: 300;               /* fallback for non-variable rendering */
  font-size: 118px;
  line-height: 1.20;
  letter-spacing: -0.005em;
  color: var(--fd-bone);
  text-wrap: balance;
  margin: 0;
}
.fd-headline--cover { font-size: 126px; line-height: 1.16; }

/* Accent words: colour and italic change, weight does not. */
.fd-headline em,
.fd-accent {
  font-style: italic;
  font-variation-settings: "opsz" var(--fd-opsz), "wght" var(--fd-wght), "SOFT" 0, "WONK" 0;
  color: var(--fd-amber);
}
.fd-accent--teal   { color: var(--fd-teal); }
.fd-accent--molten { color: var(--fd-molten); }
.fd-accent--violet { color: var(--fd-violet); }

.fd-body {
  font-family: var(--fd-sans);
  font-variation-settings: "wght" 380;
  font-size: 44px;
  line-height: 1.52;
  color: var(--fd-dim);
  max-width: 1740px;
  margin: 0;
}
.fd-lede {                       /* one emphasised line under the body */
  font-variation-settings: "wght" 500;
  color: var(--fd-bone);
  font-size: 46px;
}
.fd-label {                      /* row keys, step names */
  font-family: var(--fd-mono);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: var(--fd-track);
  text-transform: uppercase;
}
.fd-basis {                      /* transparency footnote on any estimate */
  font-family: var(--fd-mono);
  font-size: 24px;
  line-height: 1.8;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fd-faint);
}

/* ==========================================================================
   3. COMPONENTS
   ========================================================================== */

/* --- amber pill CTA. One per graphic; never restates the body copy. ----- */
.fd-cta {
  display: inline-flex;
  align-items: center;
  font-family: var(--fd-mono);
  font-weight: 500;
  font-size: 36px;
  letter-spacing: var(--fd-track);
  text-transform: uppercase;
  color: var(--fd-amber);
  text-decoration: none;
  padding: 28px 52px;
  border: 2.5px solid var(--fd-amber);
  border-radius: 999px;
  transition: background-color .18s ease, color .18s ease;
}
.fd-cta:hover,
.fd-cta:focus-visible {
  background-color: var(--fd-amber);
  color: var(--fd-bg-top);
  outline: none;
}

/* --- index rows: LABEL | description, hairline separated ---------------- */
.fd-rows { display: grid; gap: 0; }
.fd-row {
  display: grid;
  grid-template-columns: 340px 1fr;
  align-items: baseline;
  gap: 24px;
  padding: 0 0 30px;
  border-bottom: 1px solid var(--fd-rule);
  margin-bottom: 50px;
}
.fd-row:last-child { margin-bottom: 0; }
.fd-row .fd-label { color: var(--fd-amber); }
.fd-row p {
  font-family: var(--fd-sans);
  font-variation-settings: "wght" 360;
  font-size: 40px;
  color: var(--fd-dim);
  margin: 0;
}

/* --- marked blocks: coloured left rule, key over value ------------------ */
.fd-mark {
  border-left: 3px solid var(--fd-violet);
  padding-left: 34px;
  margin-bottom: 60px;
}
.fd-mark .fd-label { color: var(--fd-violet); display: block; margin-bottom: 12px; }
.fd-mark p {
  font-family: var(--fd-sans);
  font-size: 38px;
  color: var(--fd-dim);
  margin: 0;
}

/* --- process chain: node ─ node ─ node ---------------------------------- */
.fd-steps { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.fd-step  { display: inline-flex; align-items: center; gap: 20px; }
.fd-step::before {
  content: "";
  width: 22px; height: 22px;
  border: 3px solid currentColor;
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px currentColor, 0 0 18px -2px currentColor;
}
.fd-step--1 { color: var(--fd-teal); }
.fd-step--2 { color: var(--fd-amber); }
.fd-step--3 { color: var(--fd-bone); }
.fd-steps hr {
  width: 76px; height: 0;
  border: none; border-top: 2px solid #3E3A35;
  margin: 0;
}

/* --- bulleted list with glowing nodes ----------------------------------- */
.fd-list { list-style: none; padding: 0; margin: 0; }
.fd-list li {
  position: relative;
  padding-left: 44px;
  margin-bottom: 56px;
  font-family: var(--fd-sans);
  font-size: 42px;
  color: var(--fd-dim);
}
.fd-list li::before {
  content: "";
  position: absolute; left: 0; top: 0.55em;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--fd-teal);
  box-shadow: 0 0 16px -1px var(--fd-teal);
}
.fd-list strong {
  font-variation-settings: "wght" 580;
  color: var(--fd-bone);
  font-weight: normal;
}

/* --- footer handle ------------------------------------------------------ */
.fd-handle {
  font-family: var(--fd-mono);
  font-size: 28px;
  letter-spacing: 0.1em;
  color: var(--fd-faint);
  text-decoration: none;
}

/* ==========================================================================
   4. FILAMENT MOTIF
   Bezier threads converging on a glowing node. Put an inline <svg
   class="fd-filaments"> behind the content; screen blending does the rest.
   ========================================================================== */

.fd-filaments {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.9;
}
.fd-filaments path {
  fill: none;
  stroke: var(--fd-amber);
  stroke-width: 1.2;
  opacity: 0.11;
  filter: drop-shadow(0 0 6px currentColor);
}
.fd-filaments circle {           /* convergence node */
  fill: var(--fd-bone);
  filter: drop-shadow(0 0 22px var(--fd-amber)) drop-shadow(0 0 8px var(--fd-bone));
}

/* ==========================================================================
   5. SLIDE CANVAS (4:5, 1:1 with the PNG carousel)
   Wrap in .fd-stage and set --fd-zoom to fit the viewport.
   ========================================================================== */

.fd-stage { --fd-zoom: 0.36; width: calc(2160px * var(--fd-zoom)); }
.fd-stage > .fd-slide { transform: scale(var(--fd-zoom)); transform-origin: top left; }
.fd-stage { height: calc(2700px * var(--fd-zoom)); overflow: hidden; }

.fd-slide {
  position: relative;
  width: 2160px;
  height: 2700px;
  padding: 168px var(--fd-margin) 150px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fd-slide > * { position: relative; z-index: 1; }
.fd-slide__body   { margin-top: 260px; display: flex; flex-direction: column; gap: 90px; }
.fd-slide__footer {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}

/* ==========================================================================
   6. WEB MODE — same voice, fluid sizing
   ========================================================================== */

.fd-page {
  --fd-margin: clamp(24px, 6vw, 96px);
  padding-inline: var(--fd-margin);
  font-family: var(--fd-sans);
  color: var(--fd-dim);
}
.fd-page .fd-eyebrow { font-size: clamp(12px, 1.4vw, 15px); padding-bottom: 16px; }
.fd-page .fd-headline {
  font-size: clamp(34px, 6.2vw, 76px);
  --fd-opsz: 44;                      /* smaller optical size at web scale */
}
.fd-page .fd-body     { font-size: clamp(17px, 1.9vw, 21px); line-height: 1.62; max-width: 62ch; }
.fd-page .fd-lede     { font-size: clamp(19px, 2.1vw, 23px); }
.fd-page .fd-label,
.fd-page .fd-cta      { font-size: clamp(12px, 1.4vw, 15px); }
.fd-page .fd-cta      { padding: 14px 26px; border-width: 1.5px; }
.fd-page .fd-row      { grid-template-columns: minmax(120px, 180px) 1fr; padding-bottom: 14px; margin-bottom: 22px; }
.fd-page .fd-row p    { font-size: clamp(16px, 1.8vw, 19px); }
.fd-page .fd-list li  { font-size: clamp(16px, 1.8vw, 20px); margin-bottom: 22px; padding-left: 26px; }
.fd-page .fd-list li::before { width: 7px; height: 7px; }
.fd-page .fd-mark     { padding-left: 20px; margin-bottom: 26px; }
.fd-page .fd-mark p   { font-size: clamp(16px, 1.8vw, 19px); }
.fd-page .fd-basis    { font-size: clamp(11px, 1.2vw, 13px); }
.fd-page .fd-handle   { font-size: clamp(12px, 1.3vw, 14px); }
.fd-page .fd-steps hr { width: clamp(24px, 4vw, 48px); }

.fd-page a:not(.fd-cta):not(.fd-handle) {
  color: var(--fd-bone);
  text-decoration-color: var(--fd-amber);
  text-underline-offset: 3px;
}
.fd-page a:not(.fd-cta):not(.fd-handle):hover { color: var(--fd-amber); }

:where(.fd-page, .fd-slide) :focus-visible {
  outline: 2px solid var(--fd-amber);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}