/* Fidelity Endeavor — the only rules that cannot be inline.
   Everything else is inline on the element, per the house system. */

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: var(--ink); text-decoration: none; }
a:hover { opacity: .7; }
::selection { background: var(--ink); color: var(--paper); }

/* Button */
.fe-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; padding: 0 22px; border: 1px solid transparent; border-radius: var(--radius-hair);
  font-family: var(--font-body); font-size: 15px; font-weight: 500; line-height: 1; cursor: pointer;
  background: var(--ink); color: var(--paper); border-color: var(--ink);
  transition: opacity var(--dur-base) var(--ease-physical), transform var(--dur-base) var(--ease-physical);
}
.fe-btn:hover { opacity: .86; }
.fe-btn:active { transform: translateY(1px); }
.fe-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Field */
.fe-lab { display: block; }
.fe-lab > span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.fe-field {
  width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--hairline-strong);
  background: transparent; font-family: var(--font-body); font-size: 17px; line-height: 1.5;
  color: var(--ink); padding: 8px 0; outline: none; border-radius: 0; resize: vertical;
  transition: border-color var(--dur-base) var(--ease-physical);
}
.fe-field:focus { border-bottom-color: var(--ink); }
.fe-field::placeholder { color: var(--ink-40); }

/* Disclosure */
.disc { border-top: 1px solid var(--hairline); }
.disc-t {
  all: unset; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; cursor: pointer; padding: 20px 0; font-family: var(--font-display); font-size: 20px; color: var(--ink);
}
.disc-m { font-family: var(--font-mono); font-size: 20px; color: var(--muted); transition: transform var(--dur-base) var(--ease-physical); }
.disc.is-open .disc-m { transform: rotate(45deg); }
.disc-p {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows var(--dur-slow) var(--ease-entrance), opacity var(--dur-base) var(--ease-physical);
}
.disc.is-open .disc-p { grid-template-rows: 1fr; opacity: 1; }
.disc-p > div { overflow: hidden; }
.disc-c { padding-bottom: 24px; color: var(--muted); font-size: 16px; line-height: 1.55; max-width: var(--measure); }

/* Image plate — replace the div with an <img> when real photography exists.
   See README. Background #EEEBE3 is the house paper plate. */
.plate {
  position: absolute; inset: 0; display: flex; align-items: flex-end;
  border: 1px solid var(--hairline);
}
.plate > span {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; line-height: 1.6;
  color: var(--ink-40); padding: 16px; max-width: 30ch;
}
[data-brand="folven"] .plate { border-color: var(--rule-inverse); }
[data-brand="folven"] .plate > span { color: var(--paper-40); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ── Motion layer ───────────────────────────────────────────────────────
   Everything here is transform and opacity. Colour stays ink, paper and the
   two brand accents; nothing glows. Reduced motion keeps the fades and drops
   the travel, at the bottom of this file. */

/* Headline words rise from behind their own line */
.fe-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.fe-w-i { display: inline-block; transform: translateY(108%); transition: transform 900ms var(--ease-entrance); }
[data-split].is-in .fe-w-i { transform: translateY(0); }

/* Counters roll like an odometer */
.fe-odo { display: inline-block; height: 1em; overflow: hidden; vertical-align: bottom; line-height: 1; }
.fe-odo-s { display: block; transform: translateY(0); transition: transform 1100ms var(--ease-entrance); }
.fe-odo-s > span { display: block; height: 1em; line-height: 1; font-variant-numeric: tabular-nums; }

/* The rail: where you are in the document, in the smallest useful type */
.fe-rail { position: fixed; left: 26px; top: 50%; transform: translateY(-50%); z-index: 40; display: none; }
.fe-rail ol { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 1px solid var(--hairline); position: relative; }
.fe-rail a { display: block; padding: 7px 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-40); transition: color var(--dur-base) var(--ease-physical), opacity var(--dur-base) var(--ease-physical); }
.fe-rail a.is-on { color: var(--ink); }
.fe-rail a:hover { color: var(--ink); }
.fe-rail-dot { position: absolute; left: -3px; top: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); transition: transform var(--dur-slow) var(--ease-entrance); }
/* The page column reaches 1120px. Between 1240 and 1400 the labels would sit on
   top of it, so the rail shows clickable dashes and keeps the words for wider
   screens, where there is real margin to hold them. */
@media (min-width: 1240px) {
  .fe-rail { display: block; }
  .fe-rail a { width: 12px; overflow: hidden; white-space: nowrap; text-indent: -999px; position: relative; }
  .fe-rail a::before { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 1px; background: currentColor; }
}
@media (min-width: 1400px) {
  .fe-rail a { width: auto; text-indent: 0; }
  .fe-rail a::before { display: none; }
}

/* Plates: a slow settle as they cross the screen */
[data-plate] { will-change: transform; }
[data-plate] > div:first-child { overflow: hidden; }
[data-plate] img { transform: scale(1.02); }

/* A plate that holds while its text scrolls past */
@media (min-width: 900px) { .fe-hold { position: sticky; top: 14vh; } }

/* Method: the step number sits still and changes as you pass each step */
@media (min-width: 900px) { .fe-step-rail { position: sticky; top: 22vh; } }
.fe-step-now { font-family: var(--font-display); font-size: clamp(56px, 9vw, 128px); line-height: 0.9; color: var(--ink); letter-spacing: -0.02em; }
.fe-step-now.is-flip { animation: fe-flip 620ms var(--ease-entrance); }
@keyframes fe-flip { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
[data-step-item] { transition: opacity var(--dur-slow) var(--ease-physical); }
@media (min-width: 900px) { [data-step-item] { opacity: 0.45; } [data-step-item].is-near { opacity: 1; } }

/* Ink spotlight, the one light that reads on paper */
[data-spotlight] { position: relative; isolation: isolate; }
[data-spotlight]::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(23, 30, 42, 0.07), transparent 72%);
  transition: opacity var(--dur-base) var(--ease-physical);
}
[data-spotlight]:hover::after { opacity: 1; }
[data-brand="folven"] [data-spotlight]::after,
#record [data-spotlight]::after { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(251, 250, 247, 0.10), transparent 72%); }

/* The ring that trails the real cursor */
/* `scale` is its own property, so the ring can grow without touching the
   transform JS writes for its position — and without laying out. */
.fe-ring {
  position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; opacity: 0;
  width: 26px; height: 26px; border: 1px solid var(--hairline-strong); border-radius: 50%;
  scale: 1;
  transition: opacity var(--dur-base) var(--ease-physical), scale var(--dur-base) var(--ease-physical), border-color var(--dur-base) var(--ease-physical);
}
.fe-ring.is-on { opacity: 1; }
.fe-ring.is-wide { scale: 2; border-color: var(--ink); }

/* Ink sections arrive from behind a paper curtain */
[data-wipe] { position: relative; }
[data-wipe]::before {
  content: ""; position: absolute; inset: 0; z-index: 3; background: var(--paper); pointer-events: none;
  transform-origin: bottom; transition: transform 1100ms var(--ease-entrance);
}
[data-wipe].is-in::before { transform: scaleY(0); }

/* Buttons lean toward the cursor */
[data-magnet] { transition: transform var(--dur-base) var(--ease-physical), opacity var(--dur-base) var(--ease-physical); }

@media (prefers-reduced-motion: reduce) {
  .fe-w { overflow: visible; padding-bottom: 0; margin-bottom: 0; }
  .fe-w-i, [data-split].is-in .fe-w-i { transform: none; transition: none; }
  .fe-odo-s { transition: none; }
  [data-plate] { transform: none !important; }
  .fe-hold, .fe-step-rail { position: static; }
  [data-step-item] { opacity: 1; }
  .fe-step-now.is-flip { animation: none; }
  [data-wipe]::before { transition: opacity var(--dur-base) var(--ease-physical); transform: scaleY(0); opacity: 0; }
  .fe-ring { display: none; }
}

.fe-rail-wrap { position: relative; }
.fe-method-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: clamp(40px, 6vw, 72px); }
@media (min-width: 900px) { .fe-method-grid { grid-template-columns: 180px minmax(0, 1fr); } }