/* ==========================================================================
   Progressive enhancement for tablet and desktop.
   Base styles in main.css target screens up to 768px.
   ========================================================================== */

@media (min-width: 768px) {
  :root { --header-h: 64px; --gutter: 32px; }

  body { padding-bottom: 0; } /* sticky bar is mobile-only */

  /* Header gains full nav and a text CTA */
  .site-header { gap: 22px; }
  .header-brand-icon { width: 38px; height: 38px; }
  .header-brand-name { font-size: 15.5px; }
  .header-brand-sub { font-size: 10px; }

  .header-nav { display: flex; align-items: center; gap: 4px; }
  .header-nav-link {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 12px;
    color: var(--ink); text-decoration: none;
    font-family: var(--font-display);
    font-size: 12.5px; font-weight: 700;
    letter-spacing: 0.11em; text-transform: uppercase;
    border-bottom: 2px solid transparent;
    transition: color 140ms ease, border-color 140ms ease;
  }
  .header-nav-link:hover { color: var(--verdigris); border-bottom-color: var(--verdigris); }
  .header-nav-link:active { color: var(--terracotta); border-bottom-color: var(--terracotta); }

  .header-cta { padding: 0 18px; }
  .header-cta-full { display: inline; }
  .header-cta-compact { display: none; }

  /* Hero: dossier column beside the specimen plate, ledger rail spanning above */
  .hero { padding: 46px var(--gutter) 60px; }
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    grid-template-areas:
      "rail rail"
      "dossier plate";
    gap: 26px 30px;
    align-items: start;
  }
  .ledger-rail { grid-area: rail; }
  .dossier { grid-area: dossier; padding: 34px 30px 36px; }
  .specimen-plate { grid-area: plate; position: sticky; top: calc(var(--header-h) + 26px); }

  .ledger-step { flex-direction: row; gap: 9px; padding: 12px 8px; }
  .ledger-num { font-size: 17px; }
  .ledger-label { font-size: 11.5px; }

  .dossier-icon { width: 88px; height: 88px; }
  .dossier-title { font-size: 46px; }
  .dossier-title-sub { font-size: 16px; }
  .dossier-lede { font-size: 17px; max-width: 46ch; }
  .dossier-question { font-size: 17px; }

  .specimen-plate { padding: 12px 12px 0; }
  .specimen-caption { font-size: 11px; padding: 12px 3px 13px; }

  /* Store buttons sit side by side once there is room */
  .store-row { flex-direction: row; flex-wrap: wrap; gap: 16px; }
  .store-btn { width: auto; min-width: 216px; flex: 0 1 auto; }

  /* Features: two-column catalogue */
  .features { padding: 68px var(--gutter) 72px; }
  .section-head { max-width: 640px; margin-bottom: 34px; }
  .section-title { font-size: 34px; }
  .section-lede { font-size: 16.5px; }
  .catalogue { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .catalogue-card { padding: 24px 22px; transition: transform 160ms ease, box-shadow 160ms ease; }
  .catalogue-card:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--rule-strong); }
  .catalogue-title { font-size: 19px; }
  .catalogue-text { font-size: 15px; }

  /* Download */
  .download { padding: 78px var(--gutter) 84px; text-align: center; }
  .download-title { font-size: 42px; }
  .download-lede { font-size: 17px; }
  .store-row-dark { justify-content: center; }

  /* About */
  .about { padding: 72px var(--gutter) 78px; }
  .about-icon { width: 72px; height: 72px; }
  .about-text { font-size: 16.5px; }

  /* Footer */
  .site-footer { padding: 44px var(--gutter) 48px; }

  /* The mobile-only sticky bar is removed entirely on wider screens */
  .sticky-cta { display: none; }
}

@media (min-width: 1024px) {
  :root { --gutter: 48px; }

  .hero { padding: 62px var(--gutter) 78px; }
  .hero-grid { gap: 30px 44px; }
  .dossier { padding: 42px 38px 44px; }
  .dossier-title { font-size: 58px; }
  .dossier-title-sub { font-size: 17px; letter-spacing: 0.26em; }

  .catalogue { grid-template-columns: repeat(3, 1fr); }
  .section-title { font-size: 38px; }
  .download-title { font-size: 50px; }
}

/* Very narrow phones: drop the secondary sticky-bar label so the CTA keeps its width. */
@media (max-width: 359px) {
  .sticky-cta-sub { display: none; }
  .sticky-cta-btn { padding: 0 12px; }
}