/*
 * American Sciences: entry page.
 * Tokens follow docs/DESIGN-SYSTEM.md v2.0 (palette §01, type §02, controls §04,
 * glass §05, motion §06, layout §07). Self-contained: no external requests.
 */

@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/instrument-serif-normal-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/instrument-serif-italic-latin.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-normal-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

:root {
  --ink: #0d1b3d;
  --ink-2: #35415f;
  --deep: #071329;
  --cream: #f5f0e8;
  --sand: #f0e8d9;
  --orange: #ff6600;
  --orange-text: #b24700;
  --muted-text: #5a6a80;
  --rule: rgba(13, 27, 61, .16);
  --ease: cubic-bezier(0.2, 0.75, 0.2, 1);
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gutter: max(clamp(20px, 4vw, 64px), env(safe-area-inset-left), env(safe-area-inset-right));
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--orange-text); outline-offset: 2px; }

/* ---------- frame: one centred link-in-bio column on phones ---------- */
.en {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "art" "copy" "foot";
  justify-items: center;
}
.en > * { width: 100%; max-width: calc(440px + 2 * var(--gutter)); }

.en__head {
  grid-area: head;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: max(16px, env(safe-area-inset-top)) var(--gutter) 14px;
}
.en__mark { width: 30px; height: auto; }
.en__word { width: 196px; height: auto; }

/* The plate: a squared surface (law 3) with the hero's downward cast.
   Kept short on phones so the links sit high. */
.en__art {
  grid-area: art;
  margin: 0;
  padding: 0 var(--gutter);
}
.en__art img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: 50% 60%;
  background: var(--sand);
  box-shadow: 0 16px 34px -22px rgba(10, 25, 51, .4);
}

.en__copy {
  grid-area: copy;
  padding: 20px var(--gutter) 30px;
  text-align: center;
}

/* kicker: 11px 780 0.17em caps, words only (§02 amended 2026-10-04) */
.en__kicker {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--orange-text);
}

.en__title {
  margin: 0 auto;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.05rem, 8.6vw, 2.6rem);
  line-height: .98;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.en__title em { display: block; font-style: italic; color: var(--ink-2); }
/* Instrument Serif's hyphen sits wide at display tracking; pull it in so it
   reads as a hyphen, never a dash (owner direction 2026-10-03). */
.en__hy { margin: 0 -0.045em; }

.en__lede {
  margin: 10px auto 0;
  max-width: 34ch;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ---------- the links: full-width liquid pills (§04/§05) ---------- */
.en__links ul {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.en__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 56px;
  border-radius: 999px;
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: .01em;
  text-decoration: none;
  transition: transform 300ms var(--ease), background-color 250ms var(--ease), color 250ms var(--ease), box-shadow 250ms var(--ease);
}
.en__arrow {
  position: absolute;
  right: 22px;
  top: 50%;
  width: 18px; height: 18px;
  margin-top: -9px;
  transition: transform 300ms var(--ease);
}

/* primary orange: hotspot + burnt inner edge + top rim + side glints */
.en__btn--primary {
  background:
    radial-gradient(120% 90% at 28% -12%, rgba(255,255,255,.32), rgba(255,255,255,0) 55%),
    rgba(255, 102, 0, .86);
  background-color: var(--orange);
  -webkit-backdrop-filter: blur(20px) saturate(1.9);
  backdrop-filter: blur(20px) saturate(1.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -6px 10px -8px rgba(120,40,0,.22),
    inset 2px 0 3px -2px rgba(255,255,255,.26),
    inset -2px 0 3px -2px rgba(255,255,255,.26),
    0 10px 24px -12px rgba(178, 71, 0, .55);
}

/* quiet on light: white pour, light hotspot, dark thickness, hairline ring;
   floods ink on hover */
.en__btn--quiet,
.en__soc {
  background:
    radial-gradient(120% 90% at 28% -12%, rgba(255,255,255,.32), rgba(255,255,255,0) 55%),
    rgba(255, 255, 255, .52);
  -webkit-backdrop-filter: blur(18px) saturate(1.8);
  backdrop-filter: blur(18px) saturate(1.8);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -6px 10px -8px rgba(13,27,61,.11),
    inset 2px 0 3px -2px rgba(255,255,255,.26),
    inset -2px 0 3px -2px rgba(255,255,255,.26),
    0 0 0 1px rgba(13, 27, 61, .12),
    0 8px 18px -14px rgba(10, 25, 51, .35);
}

@media (hover: hover) {
  .en__btn:hover, .en__soc:hover { transform: scale(1.015); }
  .en__btn:hover .en__arrow { transform: translateX(4px); }
  .en__btn--quiet:hover, .en__soc:hover {
    background:
      radial-gradient(120% 90% at 28% -12%, rgba(255,255,255,.16), rgba(255,255,255,0) 55%),
      rgba(13, 27, 61, .92);
    color: var(--cream);
  }
}
.en__btn:active, .en__soc:active { transform: scale(.96); }
.en__btn:focus-visible, .en__soc:focus-visible { outline-offset: 3px; }

/* ---------- social row ---------- */
.en__social {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 14px;
}
.en__soc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  color: var(--ink);
  transition: transform 300ms var(--ease), color 250ms var(--ease);
}
.en__soc svg { width: 22px; height: 22px; }

.en__ticks {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  font-size: 10px;
  font-weight: 680;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.en__ticks li { display: inline-flex; align-items: center; gap: 8px; }
.en__ticks li::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--orange);
}

/* ---------- glass fallbacks (§05): solid fills when the material is off ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .en__btn--quiet, .en__soc { background: rgba(255,255,255,.94); }
  .en__btn--primary { background: var(--orange); }
}
@media (prefers-reduced-transparency: reduce) {
  .en__btn--quiet, .en__soc { background: rgba(255,255,255,.94); }
  .en__btn--primary { background: var(--orange); }
}
@media (prefers-reduced-transparency: reduce) and (hover: hover) {
  .en__btn--quiet:hover, .en__soc:hover { background: var(--ink); }
}

/* ---------- regulatory footer: ink on paper, never animates (law 7) ---------- */
.en__foot {
  grid-area: foot;
  padding: 0 var(--gutter);
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted-text);
  text-align: center;
}
.en__foot-in {
  border-top: 1px solid var(--rule);
  padding: 18px 0 max(20px, env(safe-area-inset-bottom));
}
.en__fda { margin: 0 auto; max-width: 62ch; text-wrap: pretty; }
.en__legal {
  margin: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 6px;
}
.en__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
  transition: text-decoration-color 250ms var(--ease);
}
@media (hover: hover) { .en__legal a:hover { text-decoration-color: var(--ink); } }
.en__legal span { padding: 0 8px; }

@media (max-width: 360px) {
  .en__word { width: 170px; }
  .en__btn { padding: 0 48px; font-size: 15px; }
}

/* ---------- desktop: the same stack in the left column, photo on the right ---------- */
@media (min-width: 900px) {
  .en {
    height: 100svh;
    min-height: 720px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "head art"
      "copy art"
      "foot art";
    justify-items: stretch;
  }
  .en > * { max-width: none; }
  .en__head {
    justify-content: flex-start;
    padding: 36px 0 0 max(var(--gutter), 88px);
  }
  .en__mark { width: 38px; }
  .en__word { width: 240px; }
  .en__art { padding: 0; height: 100%; }
  .en__art img {
    height: 100%;
    aspect-ratio: auto;
    object-position: 50% 70%;
    box-shadow: -18px 0 40px -28px rgba(10, 25, 51, .35);
  }
  .en__copy {
    align-self: center;
    text-align: left;
    padding: 20px max(var(--gutter), 56px) 20px max(var(--gutter), 88px);
  }
  .en__copy > * { max-width: 460px; }
  .en__kicker { margin-bottom: 12px; }
  .en__title { margin: 0; font-size: clamp(2.9rem, 3.9vw, 4.2rem); line-height: .95; }
  .en__lede { margin: 14px 0 0; font-size: 16px; }
  .en__links ul { margin-top: 28px; }
  .en__social { justify-content: flex-start; margin-top: 20px; }
  .en__ticks { justify-content: flex-start; }
  .en__foot { padding: 0 max(var(--gutter), 56px) 0 max(var(--gutter), 88px); text-align: left; }
  .en__fda { margin: 0; max-width: 72ch; }
  .en__legal { justify-content: flex-start; margin: 4px 0 0 -8px; }
}

/* A low desktop window: let the page scroll rather than crush the stack. */
@media (min-width: 900px) and (max-height: 720px) {
  .en { height: auto; min-height: 100svh; }
}

/* Arrival: one gentle rise on the house curve; off under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .en__copy > * { animation: en-rise 800ms var(--ease) both; }
  .en__copy > :nth-child(2) { animation-delay: 50ms; }
  .en__copy > :nth-child(3) { animation-delay: 100ms; }
  .en__copy > :nth-child(4) { animation-delay: 150ms; }
  .en__copy > :nth-child(5) { animation-delay: 200ms; }
  .en__copy > :nth-child(6) { animation-delay: 250ms; }
}
@keyframes en-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- 404 ---------- */
.nf__code {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: clamp(5rem, 22vw, 12rem);
  line-height: .9;
  letter-spacing: -0.05em;
  color: rgba(13, 27, 61, .075);
}
.nf {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "head" "copy" "foot";
}
.nf .en__head { justify-content: center; padding-left: var(--gutter); padding-right: var(--gutter); }
.nf .en__copy { align-self: center; text-align: center; }
.nf .en__title { margin: 0 auto; font-size: clamp(2.6rem, 9vw, 4.4rem); }
.nf .en__btn { display: inline-flex; margin-top: 28px; padding: 0 58px 0 32px; }
.nf .en__foot { max-width: none; }
.nf .en__legal { justify-content: center; margin: 0; }