/* ============================================================
   The FLR Archive — Mobile Optimization
   Loaded on top of base stylesheets.
   ============================================================ */

/* ============ iOS: prevent zoom on input focus ============ */
input, select, textarea, button {
  font-size: 16px;
}

/* ============ Touch targets: minimum 44px tall ============ */
button, .btn, .submit-btn, .tier-btn, .navlinks a,
.ck span, .chips label, label.fl {
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}

/* ============ Smooth scrolling on iOS ============ */
html { -webkit-text-size-adjust: 100%; }

/* ============================================================
   HAMBURGER MENU (mobile only)
   ============================================================ */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(243,237,226,.25);
  color: inherit;
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  position: absolute;
  left: 10px;
  right: 10px;
  height: 1.5px;
  background: currentColor;
  transition: transform .3s var(--ease), opacity .25s, top .3s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 28px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* ============================================================
   TABLET (max-width: 900px)
   ============================================================ */
@media (max-width: 900px) {
  /* Tighter section padding everywhere */
  section { padding-left: 0; padding-right: 0; }

  /* Hero typography shrinks */
  .h2 { font-size: clamp(1.7rem, 5.5vw, 2.6rem); }

  /* Sticky sidebars unstick */
  .lvl-sticky, .review-sticky { position: static; }

  /* Tier matrix narrower padding */
  .tier-matrix { padding: 1.6rem; }

  /* Agenda card */
  .agenda-card { padding: 1.4rem; box-shadow: 4px 4px 0 rgba(243,237,226,.18); }
  .agenda-card::before { font-size: .6rem; padding: .25rem .6rem; }

  /* Field notes & stats breathe easier */
  .fieldnotes { padding: 1.3rem; }
  .stat { padding: 1.2rem 1rem; }

  /* Lvl hover lift gone on touch */
  .lvl:hover { transform: none; box-shadow: none; }

  /* Pull quote */
  .pull { padding: .3rem 0 .3rem 1rem; font-size: clamp(1.05rem, 2.5vw, 1.4rem); }

  /* Dropcap a bit smaller */
  .dropcap::first-letter { font-size: 3.6em; }
}

/* ============================================================
   PHONE (max-width: 640px)
   ============================================================ */
@media (max-width: 640px) {

  /* ---- Global ---- */
  .wrap { width: 92vw; }
  body { font-size: 15.5px; line-height: 1.55; }
  section { scroll-margin-top: calc(var(--navh, 100px) + 8px); }

  /* ---- Top strip — simplify ---- */
  .strip .wrap { flex-direction: column; gap: .25rem; text-align: center; padding: .35rem 0; }
  .strip { font-size: .58rem; padding: 0; }
  .strip span { display: block; }
  .strip b { color: var(--brass-l); }

  /* ---- Header / Nav: stacked rows on mobile ---- */
  header.site { box-shadow: 0 4px 16px rgba(0,0,0,.35); }
  nav.top {
    flex-wrap: wrap;
    padding: .7rem 0;
    position: relative;
    row-gap: .65rem;
  }
  .brand { font-size: 1.05rem; flex: 1; }
  .brand .ast { font-size: .9rem; }
  .nav-toggle { display: none; }

  /* Confess CTA — own row, full width, above navlinks */
  header.site .btn {
    order: 2;
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: .85rem 1rem;
    margin: 0;
  }

  /* Nav links — always visible, below confess CTA, horizontal row */
  .navlinks {
    order: 3;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: .15rem;
    overflow: visible;
    max-height: none;
    padding: .7rem 0 0;
    border-top: 1px solid rgba(243,237,226,.1);
    margin-top: 0;
    transition: none;
  }
  .navlinks.open {
    max-height: none;
    padding: .7rem 0 0;
    overflow: visible;
  }
  .navlinks a {
    width: auto;
    flex: 1 1 auto;
    padding: .6rem .55rem;
    font-size: .72rem;
    letter-spacing: .12em;
    text-align: center;
    border: 1px solid rgba(243,237,226,.14);
    border-bottom: 1px solid rgba(243,237,226,.14);
    background: rgba(243,237,226,.03);
  }
  .navlinks a::after { display: none; }
  .navlinks a.active { color: var(--ox); border-color: var(--ox); }
  .navlinks a:active { background: var(--ox); color: var(--bone); }

  /* ---- Hero ---- */
  .hero { padding: 2rem 0 1.5rem; }
  .kicker { font-size: .62rem; gap: .8rem; margin-bottom: 1.4rem; }
  .hero-grid { gap: 1.6rem; }
  h1 { font-size: clamp(2rem, 8vw, 3rem); }

  /* ---- Definition / Dropcap ---- */
  .def-grid { gap: 1.6rem; }
  .dropcap::first-letter { font-size: 3em; padding: .04em .1em 0 0; }

  /* ---- Field notes ---- */
  .fieldnotes { padding: 1.1rem; }
  .fieldnotes li { font-size: .88rem; padding: .65rem 0; }

  /* ---- Stats: vertical stack ---- */
  .stats { grid-template-columns: 1fr; margin-top: 2.2rem; }
  .stat {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 1.1rem 1rem;
    text-align: left;
  }
  .stat:last-child { border-bottom: 0; }
  .stat .num { font-size: 2.1rem; }
  .stat p { font-size: .62rem; }

  /* ---- Levels ---- */
  .lvl { padding: 1.3rem; margin-bottom: 1.6rem; }
  .lvl-cols { grid-template-columns: 1fr; gap: 1rem; }
  .lvl h3 { font-size: 1.35rem; }
  .lvl-top { flex-direction: column; align-items: flex-start; gap: .3rem; }

  /* ---- Tier buttons ---- */
  .tier-matrix { padding: 1.2rem; margin-top: 1.6rem; }
  .tier-controls { gap: .35rem; }
  .tier-btn { padding: .55rem .85rem; font-size: .62rem; min-height: 36px; }
  .tier-display h4 { font-size: 1.2rem; }

  /* ---- Timeline ---- */
  .tl { padding-left: 1.4rem; margin-top: 2rem; }
  .tl-stop { padding: 0 0 2rem 1.6rem; }
  .tl-stop h3 { font-size: 1.15rem; }
  .tl-stop::before { width: 12px; height: 12px; }

  /* ---- FAQ ---- */
  .faq-q { font-size: 1.05rem; padding: 1.1rem 0; gap: 1rem; }
  .faq-a p { padding: 0 0 1.2rem 0; }

  /* ---- Footer ---- */
  footer { padding: 1.8rem 0; margin-top: 2.2rem; }
  .f-bottom { flex-direction: column; text-align: center; gap: .5rem; font-size: .58rem; }
}

/* ============================================================
   SMALL PHONES (max-width: 400px)
   ============================================================ */
@media (max-width: 400px) {
  body { font-size: 14.5px; }
  .wrap { width: 90vw; }
  .brand { font-size: .95rem; gap: .4rem; }
  .strip { font-size: .54rem; letter-spacing: .12em; }
  h1 { font-size: clamp(1.7rem, 8.5vw, 2.4rem); }
  .h2 { font-size: 1.55rem; }
  .pull { font-size: 1.05rem; }
  .lvl h3 { font-size: 1.2rem; }
  .g-num { font-size: 3.4rem; }
}

/* ============================================================
   ARTICLES page tweaks
   ============================================================ */
@media (max-width: 640px) {
  .hero-sm h1 { font-size: clamp(1.7rem, 7vw, 2.4rem); }
  .toc-bar { gap: .7rem; }
  #tq { font-size: 1rem; padding: .65rem .9rem; min-width: 0; }
  .grp-h h3 { font-size: 1.15rem; }
  .grp-h .n { margin-left: 0; width: 100%; }
  .toc a.row {
    grid-template-columns: 1fr auto;
    gap: .5rem;
    padding: .75rem .3rem;
  }
  .toc a.row .tag { grid-column: 1; }
  .toc a.row .t { font-size: .95rem; grid-column: 1 / -1; }
  .toc a.row .ext { grid-column: 2; grid-row: 1; }
  .toc a.row:hover { padding-left: .6rem; }

  /* Article view on phone */
  .art-body { font-size: 16.5px; line-height: 1.65; }
  .art-body h1 { font-size: 1.7rem; }
  .art-body h2 { font-size: 1.4rem; }
  .art-body h3 { font-size: 1.15rem; }
  .art-body blockquote { padding: .3rem 0 .3rem 1rem; font-size: 1.05rem; }
  .art-body pre, .art-body code { font-size: .82rem; }
  .pn { grid-template-columns: 1fr; gap: 0; }
  .pn .prev, .pn .next { padding: 1rem; border: 1px solid var(--line); }
  .pn .prev { border-bottom: 0; }

  /* Hero search and count stacked */
  .toc-count { width: 100%; text-align: left; }
}

/* ============================================================
   STORIES page tweaks
   ============================================================ */
@media (max-width: 640px) {
  .sec { padding: 2rem 0; }
  .podium { grid-template-columns: 1fr; gap: .8rem; }
  .conf { padding: 1.1rem; }
  .conf h3 { font-size: 1.2rem; }
  .conf p { font-size: .92rem; }
  .backlink { display: none; }
  .ticker-wrap { overflow: hidden; }
  .tk { animation-duration: 28s; }   /* slightly slower on phones */
}

/* ============================================================
   CONFESS page tweaks
   ============================================================ */
@media (max-width: 640px) {
  .form-card { padding: 1.4rem 1.2rem; }
  .form-card::before { font-size: .52rem; letter-spacing: .18em; }
  .f-row input, .f-row select, .f-row textarea {
    font-size: 16px;       /* iOS zoom blocker */
    padding: .8rem .9rem;
  }
  .f-row textarea { min-height: 180px; }
  .chips label { padding: .65rem 1rem; font-size: .62rem; min-height: 40px; }
  .ck span { font-size: .9rem; line-height: 1.45; }
  .ck { align-items: flex-start; padding: .5rem 0; }
  .ck .box { margin-top: 3px; flex-shrink: 0; }
  .submit-btn { padding: 1.1rem; font-size: .72rem; letter-spacing: .18em; }
  .prompts { display: none; }
  .form-grid { gap: 1.4rem; }
  .podium { grid-template-columns: 1fr; gap: .8rem; }
  .prize-strip { grid-template-columns: 1fr; }
  .prize { padding: 1rem; }
  .hero h1 { font-size: clamp(1.7rem, 8vw, 2.3rem); }
}

/* ============================================================
   iPhone X+ safe areas (notched phones)
   ============================================================ */
@supports (padding: env(safe-area-inset-left)) {
  .wrap {
    padding-left:  max(env(safe-area-inset-left), 0);
    padding-right: max(env(safe-area-inset-right), 0);
  }
  header.site { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  footer { padding-bottom: max(env(safe-area-inset-bottom), 1.8rem); }
}

/* ============================================================
   Landscape phones — tighten vertical
   ============================================================ */
@media (max-width: 900px) and (orientation: landscape) {
  .hero { padding: 1.4rem 0; }
  .strip { display: none; }
}

/* ============================================================
   Reduced motion: kill all animations site-wide
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .tk { animation: none !important; }
  .navlinks { transition: none !important; }
}