/* ==========================================================================
   inat.dev — Adis Bacic
   Hand-written, no framework, no build step.
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

:root {
  --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --r: 14px;
  --r-sm: 10px;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
  --maxw: 1120px;
  --shadow: 5px 5px 0 var(--line);
  --shadow-sm: 3px 3px 0 var(--line);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Dark is the default: this is a .dev domain at heart. */
:root,
:root[data-theme='dark'] {
  --bg: #0a1024;
  --bg-2: #101a37;
  --bg-3: #16224a;
  --ink: #f2f0ea;
  --ink-dim: #9aa6c8;
  --line: #2b3a68;
  --line-strong: #405392;
  --gold: #f4b740;
  --blue: #6b93ff;
  --teal: #38d3b6;
  --dot: rgba(255, 255, 255, 0.07);
  --on-accent: #0a1024;
  --wordmark-end: #a9c4ff;
}

:root[data-theme='light'] {
  --bg: #fbfaf7;
  --bg-2: #ffffff;
  --bg-3: #f2efe6;
  --ink: #0a1024;
  --ink-dim: #55607f;
  --line: #0a1024;
  --line-strong: #0a1024;
  --gold: #e0980c;
  --blue: #1d4ed8;
  --teal: #0b8f7a;
  --dot: rgba(10, 16, 36, 0.09);
  --on-accent: #fbfaf7;
  --wordmark-end: #1d4ed8;
}

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

body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--bg);
  background-image: radial-gradient(var(--dot) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* A whisper of film grain so the flat colours are not quite flat. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; }

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

.mono { font-family: var(--font-mono); font-size: 0.85em; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--gold);
  color: var(--on-accent);
  font-weight: 600;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ── Buttons ─────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0.7rem 1.25rem;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
  cursor: pointer;
  background: var(--bg-2);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform 0.14s var(--ease), box-shadow 0.14s var(--ease);
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--line); }
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--line); }

.btn-primary {
  background: var(--gold);
  color: #0a1024;
  border-color: var(--line-strong);
}
.btn-ghost { background: transparent; }
.btn-sm { min-height: 38px; padding: 0.4rem 0.85rem; font-size: 0.85rem; }
.btn-block { width: 100%; }

.chip {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  min-height: 42px;
  padding: 0 0.6rem;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-2);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.14s var(--ease), background 0.14s var(--ease);
}
.chip:hover { transform: translateY(-2px); background: var(--bg-3); }

.theme-btn { color: var(--ink); }
.theme-btn .icon-sun,
.theme-btn .icon-moon { display: none; }
:root[data-theme='dark'] .theme-btn .icon-sun { display: block; color: var(--gold); }
:root[data-theme='light'] .theme-btn .icon-moon { display: block; }

#top-sentinel {
  position: absolute;
  top: 14px;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* ── Nav ─────────────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem var(--pad);
  border-bottom: 2px solid transparent;
  background: transparent;
  transition:
    padding 0.28s var(--ease),
    border-color 0.28s var(--ease),
    box-shadow 0.28s var(--ease);
}

/*
 * The blur gets a layer of its own and never sits on .nav itself.
 *
 * `backdrop-filter` makes an element the containing block for its
 * position: fixed descendants — and on mobile both the slide-in panel and the
 * scrim are fixed children of the nav. With the filter on .nav they resolved
 * against the bar instead of the viewport, so the moment the page was scrolled
 * the panel collapsed from full height to 120px and the scrim to 61px.
 */
.nav::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px) saturate(1.3);
  transition: opacity 0.28s var(--ease);
}
.nav.is-scrolled::before { opacity: 1; }

/* Only becomes a bar once you have left the top: at rest it floats over the
   hero, so the claim gets the full height of the screen. */
.nav.is-scrolled {
  padding-block: 0.6rem;
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px -18px rgba(0, 0, 0, 0.6);
}

/* Reading progress, drawn on the nav's own bottom edge. */
.nav-progress {
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--gold), var(--blue));
  transition: width 0.12s linear;
  pointer-events: none;
}

.brand {
  justify-self: start;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.045em;
  text-decoration: none;
  transition: font-size 0.28s var(--ease);
}
.nav.is-scrolled .brand { font-size: 1.15rem; }
/* Mono for the TLD: the word is the brand, the suffix is an address. */
.brand-dim {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.62em;
  letter-spacing: 0;
  color: var(--ink-dim);
}

.nav-links { display: flex; gap: 1.6rem; justify-self: center; }
.nav-links a {
  position: relative;
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--ink-dim);
  padding: 0.35rem 0;
  transition: color 0.15s;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after,
.nav-links a[aria-current='true']::after { transform: scaleX(1); }
.nav-links a[aria-current='true'] { color: var(--ink); }

.nav-actions { display: flex; align-items: center; gap: 0.5rem; justify-self: end; }
.menu-btn { display: none; }
.nav-scrim { display: none; }

/* Animated burger → close. */
.burger { display: grid; gap: 4px; width: 18px; }
.burger i {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.26s var(--ease), opacity 0.2s var(--ease);
}
[aria-expanded='true'] .burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
[aria-expanded='true'] .burger i:nth-child(2) { opacity: 0; }
[aria-expanded='true'] .burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav { grid-template-columns: 1fr auto; padding-block: 0.85rem; }
  .nav-cta { display: none; }
  .menu-btn { display: inline-grid; }

  /* A real panel rather than a dropdown: full height, slides in from the right,
     and the page behind it is dimmed and locked. */
  .nav-links {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(19rem, 82vw);
    flex-direction: column;
    align-content: start;
    gap: 0;
    padding: 5.5rem 1.5rem 2rem;
    background: var(--bg-2);
    border-left: 2px solid var(--line);
    box-shadow: -20px 0 50px -30px rgba(0, 0, 0, 0.7);
    transform: translateX(101%);
    transition: transform 0.32s var(--ease);
    z-index: 45;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    padding: 0.95rem 0;
    border-bottom: 1px dashed var(--line);
    color: var(--ink);
  }
  .nav-links a::after { display: none; }

  /* The nav has to outrank both the scrim and the panel, or the close button
     ends up underneath them and the menu can only be dismissed by tapping
     around it. */
  .nav { z-index: 46; }

  /* The panel is a positioned child of the nav, so inside the nav's own
     stacking context it paints over anything static — the burger included.
     Giving the action cluster a layer of its own keeps the close button on top
     while the menu is open. */
  .nav-actions { position: relative; z-index: 47; }

  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 44;
    background: rgba(4, 8, 20, 0.5);
    backdrop-filter: blur(2px);
    opacity: 0;
    /* Load-bearing. An element at opacity 0 still takes every tap, and this
       class selector overrides the `hidden` attribute the script sets — so
       without it the scrim sits invisibly over the whole page on mobile and
       swallows all input, the menu button included. */
    pointer-events: none;
    transition: opacity 0.28s var(--ease);
  }
  .nav-scrim.show { opacity: 1; pointer-events: auto; }
  .nav-scrim[hidden] { display: none; }
  body.menu-open { overflow: hidden; }
}

/* ── Layout ──────────────────────────────────────────────────────────── */

main { position: relative; z-index: 1; }

/* Anchor jumps must not park the heading underneath the sticky header. */
section[id] { scroll-margin-top: 6rem; }

.section {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(3.5rem, 9vw, 6.5rem) var(--pad);
}

.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-title { font-size: clamp(1.9rem, 4.6vw, 3.1rem); margin-bottom: 0.7rem; }
.section-sub { color: var(--ink-dim); font-size: 1.05rem; }

.badge {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.3rem 0.8rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--bg-2);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.prose { color: var(--ink-dim); margin-bottom: 1rem; max-width: 40rem; }

/* ── Hero ────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(3.5rem, 10vw, 7rem) var(--pad) clamp(3rem, 7vw, 5rem);
  display: grid;
  align-items: center;
  min-height: min(62svh, 520px);
  align-content: center;
  isolation: isolate;
}

/* The entry, recessed behind the claim: faded enough to read as backdrop,
   not so faded you cannot read it. Below 1040px there is no column to hide in,
   so it rejoins the flow at full strength rather than disappearing. */
.entry.hero-entry {
  position: absolute;
  right: var(--pad);
  top: 50%;
  width: min(27rem, 40%);
  transform: translateY(-50%);
  opacity: 0.55;
  z-index: -1;
  pointer-events: none;
  box-shadow: none;
  filter: saturate(0.6);
}

/* Hidden outright on phones: it is context, not the message, and the Inat
   section explains the word in prose anyway. */
@media (max-width: 899px) {
  .entry.hero-entry { display: none; }
}

@media (min-width: 900px) and (max-width: 1040px) {
  .entry.hero-entry {
    position: static;
    width: 100%;
    max-width: 34rem;
    transform: none;
    opacity: 1;
    z-index: auto;
    pointer-events: auto;
    box-shadow: var(--shadow);
    filter: none;
    margin-top: clamp(2rem, 6vw, 3rem);
  }
}

.hero-inner { max-width: 46rem; }

/* Above the breakpoint the entry is an absolutely positioned backdrop on the
   right, so the text column has to be told to stop before it — otherwise long
   rotation phrases run straight across the card. */
@media (min-width: 1041px) {
  .hero-inner { max-width: min(46rem, calc(100% - 31rem)); }
}

.kicker {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gold);
  margin-bottom: 0.6rem;
}

.hero-claim {
  font-size: clamp(2.1rem, 5.6vw, 4rem);
  line-height: 1.04;
  margin-bottom: 1.1rem;
}

/* Lead and rotation are separate rows, so the gold line always starts at the
   same x no matter how long the word before it is. Three rows are reserved
   (one lead + up to two wrapped rotation lines) so a long phrase cycling in
   cannot shove the rest of the page down. */
.hero-lead-word,
.hero-claim .rotator { display: block; }
.hero-claim .rotator {
  color: var(--gold);
  /* One line is enough for every phrase in the rotation — the widest, "for the
     long term", measures 467px against 544px available. Reserving two, as the
     longer phrases once needed, left a permanent empty row under the claim. */
  min-height: 1.14em;
}

/* The line that changes. Reserving min-height stops the page jumping as
   phrases of different lengths cycle through. */
.rotator-text { white-space: pre-wrap; }

.hero-lead-word {
  display: inline-block;
  transition: opacity 0.26s var(--ease), transform 0.26s var(--ease);
}
.hero-lead-word.is-swapping { opacity: 0; transform: translateY(-0.18em); }

.caret {
  display: inline-block;
  width: 0.06em;
  height: 0.82em;
  margin-left: 2px;
  vertical-align: -0.14em;
  background: var(--gold);
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.hero-thesis {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--ink-dim);
  max-width: 34rem;
  margin-bottom: 1.6rem;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 0.7rem; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── The dictionary entry, now inside the Inat section ───────────────── */

.entry {
  position: relative;
  padding: clamp(1.25rem, 3vw, 1.9rem);
  border: 2px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-2);
  box-shadow: var(--shadow);
}
.entry-inline { margin: 1.5rem 0; max-width: 34rem; }

.entry-top { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.entry-word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  letter-spacing: -0.05em;
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold) 42%, var(--wordmark-end) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.say { border: 0; background: none; padding: 0.2rem; cursor: pointer; color: var(--ink-dim); }
.ipa { font-family: var(--font-mono); font-size: 0.95rem; }
.say:hover { color: var(--gold); }

.entry-meta { font-size: 0.9rem; color: var(--ink-dim); margin-top: 0.15rem; }
.entry-rule { border: 0; border-top: 2px dashed var(--line); margin: 1rem 0; }

.entry-defs { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.6rem; }
.entry-defs li { color: var(--ink); }
.entry-defs li::marker { color: var(--gold); font-family: var(--font-mono); font-weight: 700; }

.entry-usage {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 2px dashed var(--line);
  color: var(--ink-dim);
  font-style: italic;
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  flex-wrap: wrap;
}
.usage-tag {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--bg-3);
  color: var(--ink-dim);
}

.aside {
  margin-top: 1.25rem;
  font-size: 0.9rem;
  color: var(--ink-dim);
  opacity: 0.75;
}

/* ── Cards ───────────────────────────────────────────────────────────── */

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.cards-2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 900px) { .cards, .cards-2 { grid-template-columns: 1fr; } }

.card {
  position: relative;
  padding: 1.5rem;
  border: 2px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-2);
  box-shadow: var(--shadow);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: var(--line-strong);
}
.card-blue::before { background: var(--blue); }
.card-gold::before { background: var(--gold); }
.card-teal::before { background: var(--teal); }

.card:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--line); }

.card h3 { font-size: 1.3rem; margin: 0.9rem 0 0.6rem; }
.card p { color: var(--ink-dim); font-size: 0.97rem; }

/* Services stay on mobile — they are the offer — but compact enough not to
   turn the page into three screens of prose. */
@media (max-width: 720px) {
  #services .cards { gap: 0.75rem; }
  #services .card { padding: 1.1rem 1.15rem; }
  #services .card h3 { font-size: 1.08rem; margin: 0.5rem 0 0.4rem; }
  #services .card p { font-size: 0.9rem; line-height: 1.55; }
  #services .card::before { height: 4px; }
  #services .section-head { margin-bottom: 1.25rem; }
}

.card-num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-dim);
  letter-spacing: 0.1em;
}

.card-link { text-decoration: none; display: block; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.card-head h3 { margin: 0 0 0.6rem; }
.arrow { font-size: 1.3rem; color: var(--gold); transition: transform 0.18s var(--ease); }
.card-link:hover .arrow { transform: translate(3px, -3px); }

.role {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--gold);
  margin-bottom: 0.6rem;
}

.closing {
  max-width: 44rem;
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.45;
  color: var(--ink);
}

.stack { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.stack li {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--bg-3);
  color: var(--ink-dim);
}

/* ── Dark inat section ───────────────────────────────────────────────── */

.section-dark {
  max-width: none;
  background: var(--bg-3);
  border-block: 2px solid var(--line);
}
.section-dark > .inat-grid {
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) { .section-dark > .inat-grid { grid-template-columns: 1fr; } }

.badge-invert { background: var(--bg); }

.section-tight { padding-block: clamp(2.5rem, 6vw, 4rem); }
.inat-narrow { max-width: var(--maxw); margin-inline: auto; }
.inat-narrow .section-title { font-size: clamp(1.6rem, 3.4vw, 2.4rem); max-width: 24ch; }

/* Kept, but demoted: this is the story behind the name, not the pitch. */
.inat-note {
  max-width: 46rem;
  margin: 1rem 0 1.5rem;
  display: grid;
  gap: 0.7rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-dim);
}
.inat-day {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-dim);
  opacity: 0.7;
}

.principles-row {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-bottom: 1.5rem;
}
.principles-row li { font-size: 0.9rem; padding: 0.7rem 0.9rem; }

.principles { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.principles li {
  padding: 0.9rem 1.1rem;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-2);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
}
.principles li::before { content: '→'; color: var(--gold); margin-right: 0.6rem; }

.switch-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.8rem; }
.switch {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font-family: var(--font-display);
  font-weight: 700;
}
.switch-track {
  width: 56px;
  height: 32px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--bg-2);
  display: inline-block;
  position: relative;
  transition: background 0.2s var(--ease);
}
.switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink-dim);
  transition: transform 0.22s var(--ease), background 0.2s var(--ease);
}
.switch.is-on .switch-track { background: var(--gold); }
.switch.is-on .switch-knob { transform: translateX(24px); background: #0a1024; }
.switch.refuse { animation: refuse 0.4s var(--ease); }
@keyframes refuse {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
.switch-say { font-family: var(--font-mono); font-size: 0.85rem; color: var(--gold); min-height: 1.2em; }

/* ── Contact ─────────────────────────────────────────────────────────── */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  align-items: start;
}
@media (min-width: 901px) {
  .contact-grid > div:first-child { position: sticky; top: 6.5rem; }
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.mail-direct {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  padding: 0.9rem 1.1rem;
  border: 2px dashed var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-2);
}

.form {
  padding: clamp(1.25rem, 3vw, 1.9rem);
  border: 2px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-2);
  box-shadow: var(--shadow);
  display: grid;
  gap: 1rem;
}

.field { display: grid; gap: 0.4rem; }
.field label { font-weight: 600; font-size: 0.9rem; }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 1rem; /* >=16px so iOS does not zoom on focus */
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline-offset: 1px; }

.err { color: #ff8a8a; font-size: 0.82rem; min-height: 1em; }
:root[data-theme='light'] .err { color: #c02626; }
.field.invalid input,
.field.invalid textarea { border-color: #ff8a8a; }

.form-note { font-family: var(--font-mono); font-size: 0.82rem; color: var(--gold); min-height: 1.2em; }

/* ── Footer ──────────────────────────────────────────────────────────── */

.footer {
  position: relative;
  z-index: 1;
  border-top: 2px solid var(--line);
  padding: 2rem var(--pad);
  max-width: var(--maxw);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  color: var(--ink-dim);
}
.footer-links { display: flex; gap: 0.6rem; font-size: 0.9rem; }
.footer-links a { text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.footer-links a:hover { color: var(--gold); }

/* ── Toast ───────────────────────────────────────────────────────────── */

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: 60;
  transform: translate(-50%, 200%);
  padding: 0.7rem 1.1rem;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--gold);
  color: #0a1024;
  font-family: var(--font-display);
  font-weight: 700;
  box-shadow: var(--shadow);
  transition: transform 0.32s var(--ease);
}
.toast.show { transform: translate(-50%, 0); }

/* ── Reveal on scroll ────────────────────────────────────────────────
   Only hidden when JS is actually running. Without JS the page is simply
   visible — an animation must never be the reason content cannot be read. */

html.js .reveal { opacity: 0; transform: translateY(18px); }
html.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

/* ── Inat mode: the easter egg ───────────────────────────────────────── */

body.inat-mode { --line: var(--gold); --line-strong: var(--gold); }
body.inat-mode .card::before { background: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html.js .reveal { opacity: 1; transform: none; }
  .caret { animation: none; }
}