/* ==========================================================================
   francisfonseca.com — responsive layer
   The core stylesheet is authored mobile-first (single column, full-bleed
   plates, stacked registers). Everything below re-composes those parts as
   space becomes available. Verified at 320 / 375 / 390 / 414 / 768 / 1024 /
   1280 / 1440 / 1920.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Small phones — 320px to 400px
   -------------------------------------------------------------------------- */

@media (max-width: 400px) {
  :root { --gutter: 1.05rem; --fs-meta: 0.68rem; }
  .wordmark__mark { display: none; }
  .hero__title { letter-spacing: -0.022em; }
  .footer__nav { columns: 1; }
  .social { gap: 0.45rem; }
  .social__item { width: 44px; height: 44px; }
  .lightbox__bar { flex-direction: column; align-items: stretch; }
  .lightbox__close { width: 100%; }
}

/* --------------------------------------------------------------------------
   Phones — navigation stays a drawer up to 900px
   -------------------------------------------------------------------------- */

@media (max-width: 899px) {
  .nav__list { display: none; }
  .burger { display: inline-flex; }
  .drawer__link { min-height: 56px; }
}

@media (min-width: 900px) {
  .drawer { display: none !important; }
}

/* --------------------------------------------------------------------------
   Large phones / small tablets — 560px
   -------------------------------------------------------------------------- */

@media (min-width: 560px) {
  .ledger__row      { grid-template-columns: 12.5rem minmax(0, 1fr); }
  .entry            { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .fields > div     { grid-template-columns: 9.5rem minmax(0, 1fr); }
  .chapter__head    { grid-template-columns: 5.5rem minmax(0, 1fr); align-items: baseline; }
  .contact-line     { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 0 1.5rem; align-items: baseline; }
  .contact-line dt  { margin-bottom: 0; padding-top: 0.5rem; }
  .datapoints       { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 2.5rem); }
  .gal-grid         { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plate__caption   { grid-template-columns: auto minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Tablets — 768px
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .opener__grid   { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; }
  .split          { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  .bio-open       { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .theme__grid    { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  .mstone__inner  { grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); align-items: start; }
  .contact-grid   { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .footer__top    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage__figure  { max-width: 380px; }
  .rail           { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); }
  .rail__item     { border-bottom: 1px solid var(--rule-invert); }
}

/* --------------------------------------------------------------------------
   Small laptops — 1024px
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .hero__grid      { grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); align-items: center; gap: clamp(2.5rem, 5vw, 4.5rem); }
  .hero__portrait  { position: -webkit-sticky; position: sticky; top: 108px; }

  .dossier__head   { grid-template-columns: 8.5rem minmax(0, 1fr); align-items: start; }
  .dossier__grid   { grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr); }
  .chapter__body   { grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); }
  .gal-feature     { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .gal-grid        { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .datapoints      { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer__top     { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .rail            { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mstone__inner   { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) minmax(0, 0.85fr); }

  /* Journey becomes a horizontal chronology on pointer-and-space devices */
  .chrono__track {
    grid-auto-flow: column;
    grid-auto-columns: minmax(340px, 27vw);
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1.5rem;
    scrollbar-width: thin;
  }
  .chrono__track::-webkit-scrollbar { height: 6px; }
  .chrono__track::-webkit-scrollbar-track { background: var(--rule-soft); }
  .chrono__track::-webkit-scrollbar-thumb { background: var(--copper); }

  .stage {
    scroll-snap-align: start;
    border-left: 0;
    border-top: 1px solid var(--rule);
    padding: 2.5rem clamp(1.5rem, 2.5vw, 2.5rem) 1rem 0;
    margin-right: clamp(1.5rem, 2.5vw, 2.5rem);
  }
  .stage::before { left: 0; top: -4.5px; }
  .stage:last-child::after { display: none; }
  .stage__body, .stage__more-body { max-width: none; }
  .stage__figure { max-width: none; }

  .chrono__hint { display: flex; }
}

/* --------------------------------------------------------------------------
   Desktop — 1280px
   -------------------------------------------------------------------------- */

@media (min-width: 1280px) {
  .nav__cta      { display: inline-flex; }
  .entry         { grid-template-columns: 6rem minmax(0, 1.5fr) minmax(0, 1.15fr); align-items: start; }
  .chapter__head { grid-template-columns: 8rem minmax(0, 1fr); }
  .theme__grid   { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr); }
  .opener__grid  { grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.9fr); }
  .ledger__row   { grid-template-columns: 16rem minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Large desktop — 1600px and up
   -------------------------------------------------------------------------- */

@media (min-width: 1600px) {
  :root { --shell: 1560px; --measure: 70ch; }
  .chrono__track { grid-auto-columns: minmax(360px, 23vw); }
}

/* --------------------------------------------------------------------------
   Coarse pointers — larger targets, no hover-dependent affordances
   -------------------------------------------------------------------------- */

@media (hover: none) {
  .plate__img { transition: none; }
  .gal-open:hover .plate__img { transform: none; }
  .nav__link::after { display: none; }
}

/* --------------------------------------------------------------------------
   Landscape phones — keep the drawer usable
   -------------------------------------------------------------------------- */

@media (max-width: 899px) and (max-height: 480px) and (orientation: landscape) {
  .drawer { padding-top: 84px; }
  .drawer__link { font-size: 1.35rem; padding: 0.65rem 0; min-height: 48px; }
  .drawer__foot { padding-top: 1.25rem; }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
  .masthead, .drawer, .lightbox, .gal-filters, .btn, .chrono__hint { display: none !important; }
  body { background: #fff; color: #000; }
  .band { padding-block: 1.5rem; }
  .band--ink, .band--aubergine, .band--deep { background: #fff !important; color: #000 !important; }
  .chrono__track { grid-auto-flow: row !important; overflow: visible !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}