/* ===========================================================================
   responsive.css — breakpoints only. Loaded AFTER style.css.

   Explicit breakpoints rather than auto-fill, so the column count is a design
   decision at every width instead of an emergent one:

       >= 1080px   3 columns
       680–1079px  2 columns
       <  680px    1 column

   Every grid track is minmax(0, 1fr) so a long monospace string can never
   widen a column and push the page into horizontal scroll.
   =========================================================================== */

/* --- 1080px: the 3 -> 2 column step -------------------------------------- */
@media (max-width: 1079px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s5);
    row-gap: var(--s6);
  }
}

/* --- 980px: the hero stops being two columns ----------------------------- */
@media (max-width: 979px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
  .hero__copy  { max-width: none; }
  .hero__plate { max-width: 460px; margin: 0 auto; }
}

/* --- 900px: header micro-nav, modal becomes a bottom sheet --------------- */
@media (max-width: 899px) {
  .hero       { padding: var(--s10) 0 var(--s12); }
  .collection { padding-block: var(--s12); }
  .collection:first-of-type { padding-top: var(--s11); }

  .brand__rule, .brand__tag { display: none; }

  /* The expanded view becomes a native-feeling bottom sheet. */
  .pdlg {
    width: 100vw;
    max-width: none;
    max-height: 92vh;
    margin: auto 0 0;
    border-radius: 20px 20px 0 0;
    border-bottom: 0;
    transform: translateY(28px);
  }
  .pdlg.is-open { transform: none; transition: opacity 280ms var(--e-out), transform 280ms var(--e-out); }

  .detail { grid-template-columns: minmax(0, 1fr); overflow-y: auto; overscroll-behavior: contain; }
  .detail__visual {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: var(--s5) var(--s5) var(--s5);
    overflow: visible;
  }
  .detail__info { padding: var(--s6) var(--s5) var(--s8); overflow: visible; }

  /* Grab handle + a sticky bar, so Close is always thumb-reachable no matter
     how far the reader has scrolled. */
  /* Absolutely positioned, so it never participates in the sheet's layout. */
  .pdlg__grab {
    display: block;
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    width: 36px; height: 4px;
    border-radius: 2px;
    background: var(--border);
    z-index: 3;
  }
  .pdlg__close { top: 10px; right: 12px; }
}

/* --- 680px: the 2 -> 1 column step --------------------------------------- */
@media (max-width: 679px) {
  .grid { grid-template-columns: minmax(0, 1fr); column-gap: var(--s4); row-gap: var(--s4); }
  .specs { grid-template-columns: 1fr 1fr; }
  /* At one column there is no hole to fill, so the ghost cell would just be
     an empty box at the end of the list. */
  .cell--ghost { display: none; }
}

/* --- 760px: nav links collapse to mono micro-labels (no hamburger) ------- */
@media (max-width: 759px) {
  .site-nav__list { gap: 14px; }
  .site-nav__link {
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .site-nav__link .site-nav__full { display: none; }
  .site-nav__link .site-nav__abbr { display: inline; }
  .nav-cursor { height: 2px; bottom: -20px; }
  .theme-toggle { margin-left: var(--s4); }
}

/* --- 560px: tighten the vertical rhythm --------------------------------- */
@media (max-width: 559px) {
  .hero       { padding: var(--s8) 0 var(--s10); }
  .collection { padding-block: var(--s10); }
  .collection:first-of-type { padding-top: var(--s9); }
  .collection__head { margin-bottom: var(--s7); }

  .hero__cta        { gap: var(--s3); }
  .hero__cta .btn   { flex: 1 1 auto; justify-content: center; }
  .readout          { gap: var(--s4); margin-top: var(--s7); }
  .readout__cell + .readout__cell { padding-left: var(--s4); }

  .site-foot__cols  { gap: var(--s8); }
  .site-foot__main  { gap: var(--s6); }

  .detail__links .btn { flex: 1 1 100%; justify-content: center; }
}

/* --- 460px: the wordmark drops its name --------------------------------- */
@media (max-width: 459px) {
  .brand__name { display: none; }
  .site-head__inner { gap: var(--s2); }
  .site-nav__list { gap: 12px; }
}

/* --- very small: 360px must still breathe -------------------------------- */
@media (max-width: 380px) {
  .wrap { padding-inline: 16px; }
  .card__body  { padding-inline: 16px; }
  .card__meta  { padding-inline: 16px; }
  .card__index { padding-inline: 12px; letter-spacing: .08em; }
  .detail__visual { padding: var(--s5) var(--s4) var(--s4); }
  .detail__info   { padding: var(--s5) var(--s4) var(--s7); }
}

/* --- wide screens: the sheet stays 1200px, the ground grows -------------- */
@media (min-width: 1440px) {
  .hero { padding-top: var(--s13); }
}

/* --- print: a clean plate ------------------------------------------------ */
@media print {
  .site-head, .pdlg, .site-foot__ruler, .scroll-progress { display: none !important; }
  body { background: #fff; color: #000; }

  /* Reveals never fire without scrolling, so without this every card below the
     fold would print blank. */
  [data-reveal] { opacity: 1 !important; transform: none !important; }

  /* .card is a flex row on screen. Un-hiding .detail for print would make it a
     flex SIBLING of .card__lift and split each card into two columns, so the
     card has to become a block first. */
  .cell, .card { display: block; }
  .card { break-inside: avoid; }
  .card__lift { box-shadow: none; }

  .detail, .detail[hidden] { display: block !important; break-inside: avoid; }
  .detail__visual, .detail__info { overflow: visible !important; }
}