/* FMJ Exports: shared styling layer.
   Tokens live in tw.js; this file holds the bits Tailwind utilities can't express. */

:root{
  --navy:#001C4B;
  --gold:#B48A3D;
  --ease:cubic-bezier(.22,.61,.36,1);
  --hdr:5.5rem;
}

html{ scroll-behavior:smooth; scroll-padding-top:var(--hdr); -webkit-text-size-adjust:100%; }
body{ overflow-x:hidden; }

/* ── Signature 1: the gold arc, lifted from the logo's swoosh ───────────── */
.arc-rule{ display:block; width:2rem; height:.6rem; overflow:visible; flex:none; }
.arc-rule path{ fill:none; stroke:var(--gold); stroke-width:2; stroke-linecap:round; }

.eyebrow{
  display:flex; align-items:center; gap:.75rem;
  font-family:'Cinzel',serif; font-size:.72rem; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase;
}

/* Hand-drawn underline for one word in a headline */
.swash{ position:absolute; left:0; bottom:-.28em; width:100%; height:.42em; overflow:visible; }
.swash path{
  fill:none; stroke:var(--gold); stroke-width:8; stroke-linecap:round;
  stroke-dasharray:520; stroke-dashoffset:520; animation:draw 1.6s .45s var(--ease) forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0 } }

/* ── Signature 2: the "spec sheet". This is an export house, so lean into
      the language of a shipping document: ruled rows, tabular figures,
      hairline keylines, numbered references. ──────────────────────────────── */
.spec{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.spec th, .spec td{ padding:.9rem 1rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--rule,#EAE2D4); }
.spec thead th{
  font-family:'Cinzel',serif; font-size:.66rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; border-bottom-width:2px;
  color:#7A5B22;                       /* 6.3:1 on white; brand gold only clears 3.2:1 at this size */
}
.spec--dark thead th{ color:var(--gold); }   /* 5.2:1 on navy, so the bright gold is fine here */
.spec tbody tr:last-child td{ border-bottom:0; }
.spec tbody tr:hover{ background:rgba(180,138,61,.05); }
.ref{ font-variant-numeric:tabular-nums; letter-spacing:.06em; }

/* Paper grain so the big navy fields don't read as flat digital blocks */
.grain::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Photography treatment: keeps 20 different photos looking like one shoot */
.duotone{ position:relative; overflow:hidden; background:var(--navy); }
.duotone > img{ width:100%; height:100%; object-fit:cover; }
.duotone::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,16,43,.10) 0%, rgba(0,16,43,.30) 55%, rgba(0,16,43,.88) 100%);
}
.duotone--soft::after{ background:linear-gradient(180deg, rgba(0,16,43,0) 40%, rgba(0,16,43,.62) 100%); }
.duotone--flat::after{ background:rgba(0,28,75,.28); }

/* Hero scrim. Three layers with three jobs: keep the fixed header legible over a
   bright sky, keep the headline column legible over a busy photo, and seat the
   bottom edge into the page. Photos vary; the scrim must not. */
.duotone--hero::after{
  background:
    linear-gradient(180deg, rgba(0,16,43,.78) 0%, rgba(0,16,43,.34) 18%, rgba(0,16,43,0) 42%),
    linear-gradient(97deg,  rgba(0,16,43,.92) 0%, rgba(0,16,43,.70) 42%, rgba(0,16,43,.18) 100%),
    linear-gradient(0deg,   rgba(0,16,43,.60) 0%, rgba(0,16,43,0) 38%);
}
/* On a phone the copy spans the full width, so the diagonal wash leaves the
   right-hand half of every line unprotected. Go vertical instead. */
@media (max-width:767px){
  .duotone--hero::after{
    background:linear-gradient(180deg,
      rgba(0,16,43,.88) 0%, rgba(0,16,43,.62) 24%, rgba(0,16,43,.80) 58%, rgba(0,16,43,.94) 100%);
  }
}

/* Ken-Burns drift on hero photography, slow enough to read as "alive" but not busy */
.drift{ animation:drift 26s ease-in-out infinite alternate; }
@keyframes drift{ from{ transform:scale(1.06) translate3d(0,0,0) } to{ transform:scale(1.14) translate3d(-1.5%,-1.5%,0) } }

/* ── Scroll reveal ──────────────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ── Focus, visible on both light and dark surfaces ─────────────────────── */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--gold); outline-offset:3px; border-radius:.25rem;
}
.on-navy :where(a,button,summary):focus-visible{ outline-color:#EFDCB6; }

/* ── Header ─────────────────────────────────────────────────────────────── */
#hdr{ transition:background-color .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }

/* Opaque once scrolled. A translucent bar lets dark hero photography through and
   the navy nav text disappears against it, and the blur edge reads as a stray
   border. Off-white, not pure white, so it still sits under the white cards. */
#hdr.scrolled{
  background:#FBF8F2;
  border-bottom:1px solid #EAE2D4;
  box-shadow:0 6px 24px rgba(0,28,75,.07);
}
.mark-dark{ display:none; }
#hdr.scrolled .mark-light{ display:none; }
#hdr.scrolled .mark-dark{ display:block; }
/* Pages whose hero is not a dark photo start in the solid state */
body[data-hdr="solid"] #hdr .mark-light{ display:none; }
body[data-hdr="solid"] #hdr .mark-dark{ display:block; }

.navlink{ position:relative; }
.navlink[aria-current="page"]::after{
  content:''; position:absolute; left:1rem; right:1rem; bottom:.35rem;
  height:2px; border-radius:2px; background:var(--gold);
}

/* ── Section sub-nav on the long division pages ─────────────────────────── */
.subnav a[aria-current="true"]{ color:#fff; background:var(--navy); border-color:var(--navy); }

/* ── Forms ──────────────────────────────────────────────────────────────── */
/* No background swap on invalid: these inputs sit on navy and a light fill
   would hide the white text. */
.field:user-invalid,
.show-errors .field:invalid{ border-color:#FF9A94; box-shadow:0 0 0 1px #FF9A94; }
.field:user-invalid ~ .err,
.show-errors .field:invalid ~ .err{ display:block; }
.err{ display:none; }

/* ── Filter chips ───────────────────────────────────────────────────────── */
.chip[aria-pressed="true"]{ background:var(--navy); color:#fff; border-color:var(--navy); }

/* ── Mobile menu ────────────────────────────────────────────────────────── */
dialog::backdrop{ background:rgba(0,18,43,.62); backdrop-filter:blur(4px); }
dialog[open]{ animation:slidein .28s var(--ease); }
@keyframes slidein{ from{ transform:translateX(100%) } to{ transform:none } }

/* ── Marquee ────────────────────────────────────────────────────────────── */
.marquee{ animation:scroll 38s linear infinite; }
@keyframes scroll{ to{ transform:translateX(-50%) } }
.marquee-mask{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none }
  .swash path{ stroke-dashoffset:0 }
  .drift{ animation:none; transform:scale(1.06) }
}

@media print{
  .no-print{ display:none !important }
  .duotone::after{ display:none }
}