/* ============================================================
   CH 2026 Catalogue — web / phone layer
   Loads AFTER deck.css. Desktop is untouched; below 900px the
   fixed 1280x720 slide unlocks and every block reflows so the
   text is read at real size instead of being scaled to 4px.
   ============================================================ */

/* ---------- shared web behaviour ---------- */
html { scroll-behavior: smooth; }
img { -webkit-user-drag: none; }

/* a thin reading-progress bar */
#progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--spectrum); z-index: 200; transition: width .12s linear;
}

/* floating slide counter */
#count {
  position: fixed; left: 14px; bottom: 14px; z-index: 200;
  background: rgba(7,6,15,.82); border: 1px solid var(--stroke);
  color: #C9C4E4; font-size: 12px; letter-spacing: .1em;
  padding: 7px 13px; border-radius: 99px; direction: ltr;
  backdrop-filter: blur(8px);
}

/* ============================================================
   PHONE / NARROW TABLET
   ============================================================ */
@media (max-width: 900px) {

  body { overflow: auto; }
  #deck { display: block; padding: 0; gap: 0; }
  #nav { display: none !important; }

  /* the slide stops being a fixed canvas and becomes a section */
  .slide {
    width: 100% !important; height: auto !important; min-height: 0;
    border-radius: 0; box-shadow: none; margin: 0;
    contain: none; overflow: visible;
    border-bottom: 1px solid rgba(255,255,255,.07);
    padding-bottom: 34px;
  }
  .slide::after { height: 4px; }

  .head { margin: 34px 18px 0; gap: 13px; }
  .head .bar { width: 5px; height: 46px; }
  .head .txt h2 { font-size: 26px; line-height: 1.35; }
  .head .txt .en { font-size: 10.5px; letter-spacing: .16em; }

  .body { margin: 18px 18px 0; overflow: visible; }
  .lede { font-size: 15px; line-height: 1.8; max-width: none; }

  /* every multi-column grid becomes a single column — including the
     two-column splits written as inline styles on individual slides */
  .grid { gap: 11px; }
  .g2, .g3, .g4, .g5, .g6 { grid-template-columns: 1fr; }
  .body[style*="grid-template-columns"],
  .body [style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 14px !important; }
  /* …except picture grids, which stay two-up so they still read as a gallery */
  .grid.g4:has(> .ph), .grid.g3:has(> .ph) { grid-template-columns: 1fr 1fr; }
  .grid > .ph[style*="span 2"], .ph[style*="grid-column"] { grid-column: auto !important; }

  .card { padding: 15px 16px; }
  .card h3 { font-size: 17px; }
  .card p { font-size: 14px; line-height: 1.75; }
  .ico { width: 36px; height: 36px; font-size: 18px; margin-bottom: 10px; }

  /* The deck holds 27 different image shapes (0.70 to 4.05). Forcing them into
     one frame ratio crops something every time, so on a phone each picture
     simply sizes to its own aspect and is shown whole. */
  .ph { height: auto !important; aspect-ratio: auto !important; }
  .ph img { width: 100%; height: auto !important; object-fit: contain; }
  .ph.portrait { width: 100% !important; max-width: 250px; aspect-ratio: auto !important;
                 margin: 0 auto 12px !important; }
  .ph .cap { padding: 22px 13px 11px !important; font-size: 12.5px !important; }

  .vid .thumb, .doc .thumb { height: auto !important; aspect-ratio: auto !important; }
  .vid .thumb img, .doc .thumb img { height: auto !important; object-fit: contain; }

  .stat { padding: 16px 10px; }
  .stat .n { font-size: 38px; }
  .pill { font-size: 12.5px; padding: 7px 13px; }

  /* the 6-step rail stacks */
  .rail { flex-direction: column; gap: 15px; }
  .step { padding: 0 0 0 0; }
  .step::after { display: none; }
  .step .dot { margin-bottom: 9px; }
  .step .when { margin-top: 6px; }

  /* all four columns fit; the contract value must never be the bit that
     falls off-screen, so let the name wrap instead of scrolling sideways */
  .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tablewrap table { min-width: 0; margin-bottom: 0 !important; }
  table { font-size: 11.5px; }
  thead th, tbody td { padding: 7px 6px; line-height: 1.5; }
  td.idx, th.idx { width: 22px; }
  td.num, th.num { font-size: 10.5px; }
  td.val, th.val { font-size: 11.5px; }
  tr.total td { font-size: 13px; padding: 11px 6px; }

  /* Section dividers: on a phone a full-bleed 1.94-wide photo would be cropped
     to ~0.7 and lose most of its width. Stack instead — the picture whole on
     top, the title underneath — so nothing is cut. */
  .div-slide { min-height: 0; padding: 0 0 30px; display: block; }
  .div-slide .bleed { position: relative; inset: auto; height: auto; z-index: 0; }
  .div-slide .bleed img { width: 100%; height: auto !important; object-fit: contain; }
  .div-slide .bleed .scrim { display: none; }
  .div-slide .ghost { display: none; }
  .div-slide .kicker { margin: 20px 22px 14px; }
  .div-slide h1, .div-slide .sub, .div-slide .rule { margin-left: 22px; margin-right: 22px; }
  .div-slide h1 { text-shadow: none; }
  .div-slide .sub { text-shadow: none; }
  .div-slide .rule { margin-top: 20px; }
  .div-slide h1 { font-size: 40px; line-height: 1.3; }
  .div-slide .sub { font-size: 15.5px; margin-top: 13px; }
  .div-slide .ghost { font-size: 108px; left: 22px; bottom: 26px; }
  .div-slide .kicker { font-size: 10.5px; padding: 6px 14px; margin-bottom: 18px; }

  .cover { min-height: 88vh; padding: 0 22px; }
  .cover .logo { height: 62px; margin-bottom: 24px; }
  .cover h1 { font-size: 33px; line-height: 1.35; }
  .cover .tag { font-size: 15px; }
  .cover .en { font-size: 10px; letter-spacing: .2em; }
  .cover .meta { position: static; margin-top: 26px; font-size: 11px; gap: 8px; padding: 0; }

  /* stat / caption bars wrap */
  .munibar { flex-direction: column; align-items: flex-start; gap: 11px;
             padding: 14px 16px; margin-left: 0 !important; }
  .munibar .sep { display: none; }
  .munibar .v { font-size: 22px; }
  .munibar .k { font-size: 12.5px; }

  /* the document + concept-library cards */
  .ndrow { gap: 8px; }
  .nd { min-width: 0; flex: 1 1 46%; padding: 10px 13px; }
  .nd .t { font-size: 13.5px; }
  .nd.tier { min-width: 0; flex: 1 1 30%; }

  .person { flex-direction: column; }
  .person .pic { width: 100%; height: auto; aspect-ratio: 4/5; }

  .big-quote { font-size: 22px; line-height: 1.6; }
  .note { font-size: 11.5px; }

  /* footer mark sits inline at the end of each slide */
  .mark { position: static; margin: 22px 18px 0; display: inline-flex; }

  /* comfortable tap targets */
  a { -webkit-tap-highlight-color: rgba(34,211,238,.25); }
  .nd, .vid, .doc { min-height: 44px; }

  /* the contact row carries an inline width:1000px for the desktop deck —
     it must not force a horizontal scroll on a phone */
  .cover > div[style*="1000px"] { width: 100% !important; flex-wrap: wrap; gap: 10px !important; }
  .cover > div[style*="1000px"] > .card { flex: 1 1 100% !important; }

  /* belt and braces: nothing may push the page sideways */
  html, body { overflow-x: hidden; }
  .slide { max-width: 100vw; }

  #count { font-size: 11px; padding: 6px 11px; }
}

@media (max-width: 430px) {
  .head .txt h2 { font-size: 23px; }
  .div-slide h1 { font-size: 34px; }
  .cover h1 { font-size: 28px; }
  .grid.g4:has(> .ph), .grid.g3:has(> .ph) { grid-template-columns: 1fr; }
  .nd, .nd.tier { flex: 1 1 100%; }
  .stat .n { font-size: 34px; }
}

/* print from the web page = the same deck geometry as the PDF */
@media print {
  #progress, #count { display: none !important; }
}