/* ======================================================================
   MOBILE & SMALL TABLETS  (<= 700px)
   One clear block for phone rules (no duplicates).
   ====================================================================== */
@media (max-width: 700px) {

  /* --------- Global / shared --------- */
  html, body {
    height: auto;
    min-height: 100%;
    overflow: auto;                     /* the page owns scrolling */
    overscroll-behavior: contain;
  }

  /* Many interior pages use this scaffold */
  .sec-root    { position: static; min-height: 100vh; }
  .sec-content { min-height: auto; }
  .sec-body    { padding: 10px; overflow: visible; }

  /* Keep background artwork pinned while the page scrolls */
  .sec-bg, .sec-veil { position: fixed; inset: 0; }

  /* Self page: keep the text inside the image “window” */
  .bioPanel {
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* --------- HOME (landing) --------- */

  .stage       { min-height: 100vh; }
  .stage-inner { min-height: 100vh; display: flex; flex-direction: column; }
  .frame       { position: relative; flex: 1 1 auto; min-height: 100vh; overflow-y: auto; }

  /* Top buttons row (SPEAK / SELF) */
  .frame-controls{
    position: static;                   /* don’t sit on top of the title */
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 14px 0;
    z-index: 2;
  }

  /* Header & title */
  .site-header{
    padding: 60px 14px 10px;            /* space under the buttons row */
    text-align: center;
  }

  /* Force “GAVIN WEALE” to be two tidy lines, centred, never crammed */
  .site-title{
    white-space: normal !important;     /* allow wrap at the space */
    overflow-wrap: anywhere;
    word-break: normal;
    max-width: 12ch;                    /* narrow block → wraps at the space */
    margin: 0 auto 8px;
    font-size: clamp(28px, 11vw, 56px);
    line-height: 1.12;                  /* avoid overlap between the two rows */
    letter-spacing: 0.01em;
  }
  /* neutralise per-letter transforms on phones */
  .site-title .letter{
    display: inline !important;
    transform: none !important;
  }

  .site-sub{ font-size: clamp(14px, 3.6vw, 18px); margin: 2px 0 10px; }

  /* CHAOS/STRUCTURE button sits directly under the title */
  .toolbar{ margin: 6px 0 14px; display:flex; justify-content:center; }

  /* Structure tiles: single column, page scrolls to reveal all four */
  .grid-wrap{ padding: 0 12px 28px; }
  .grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .grid .tile{
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: 16 / 10;              /* neat landscape cards */
    background-size: cover;
    background-position: center;
    border-radius: 18px;
  }

  /* CHAOS on phones: show floaters & sprites, but keep scrolling sane */
  .frame.chaos { overflow: hidden !important; }
  .frame.chaos .float-layer{
    position: absolute !important;
    inset: 0 !important;
    z-index: 40;
    display: block !important;
    pointer-events: none;               /* you can still scroll the page */
  }
  .frame.chaos .float-layer .float-tile{
    pointer-events: auto;               /* tiles remain tappable */
    z-index: 41;
  }
  .frame.chaos > .sprite-layer{
    position: absolute !important;
    inset: 0 !important;
    z-index: 35 !important;             /* under tiles, above background */
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
  }
  .frame.chaos > .sprite-layer .sprite{
    position: absolute !important;
    max-width: none !important;
    height: auto !important;
    animation-play-state: running !important;
    transform: translateZ(0);           /* mobile GPU hint */
  }

  /* --------- PAGER pages (Words / Weird / Werk) --------- */

  /* Support both .pager and .Pager variants */
  .pager, .Pager { padding: 8px 12px 16px; }

  /* One-column stack; the outer page scrolls (no inner scrollers) */
  .pager .items, .Pager .items{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    overflow: visible !important;
  }

  /* Kill carousel chrome on phones */
  .pager .arrow, .pager .dots,
  .Pager .arrow, .Pager .dots{ display: none !important; }

  /* Defensive: ensure cards don’t carry fixed desktop widths */
  .pager .items > *, .Pager .items > *,
  .pager .card, .Pager .card,
  .pager .item, .Pager .item{
    width: auto !important;
    max-width: 100% !important;
    min-height: auto;
  }
}

/* Ultra-narrow handsets (≤360px) */
@media (max-width: 360px){
  .site-header { padding-top: 66px; }
  .site-title{
    max-width: 11ch;
    font-size: clamp(24px, 9.6vw, 44px);
    line-height: 1.14;
    letter-spacing: 0;
  }
  .toolbar{ margin-top: 8px; }
}

/* Small spacing nudge for very narrow phones (Galaxy S8 etc.) */
@media (max-width: 370px) {
  .toolbar  { margin-bottom: 24px !important; }
  .grid-wrap { margin-top: 6px !important; }
}


/* ======================================================================
   DESKTOP / LARGE SCREENS  (>= 901px)
   Ensure CHAOS/STRUCTURE is visible and tiles sit *below* the header.
   ====================================================================== */
@media (min-width: 901px) {
  html, body { height: auto; overflow-y: auto; }

  /* Stack header above content */
  .frame {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-y: auto;
  }

  .site-header{
    position: relative;
    z-index: 2;
    margin: 0 auto;
    padding: 12px 0 8px;               /* space above & below the title block */
    text-align: center;
  }

  .toolbar{
    margin-top: 8px;                    /* small gap above the button */
  }

  /* Use padding (not margin) to avoid margin collapse into the header */
  .frame:not(.chaos) .grid-wrap{
    position: relative;
    z-index: 1;
    margin-top: 0 !important;          /* kill any stray theme margin */
    padding-top: clamp(28px, 3.5vh, 48px) !important;  /* reliable separation */
    box-sizing: border-box;
  }
}

/* A touch more air on very wide screens */
@media (min-width: 1200px) {
  .frame:not(.chaos) .grid-wrap {
    padding-top: clamp(36px, 4vh, 64px) !important;
  }
}
/* ---- SAFETY: phones/tablets must be allowed to scroll ---- */
@media (max-width: 900px) {
  html, body {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
  }
  /* make sure nothing is fixed/locking scroll */
  .stage,
  .stage-inner,
  .frame {
    position: relative !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Home: keep chaos layer visible but not blocking scroll */
  .frame.chaos { overflow: hidden !important; }
  .frame.chaos .float-layer {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none;
    display: block !important;
    z-index: 40;
  }
  .frame.chaos .float-layer .float-tile {
    pointer-events: auto;
    z-index: 41;
  }
  .frame.chaos > .sprite-layer {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    z-index: 35 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}
/* ---- DESKTOP: ensure header (incl. CHAOS button) clears the tiles ---- */
@media (min-width: 901px) {
  .frame {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-y: auto;
  }
  .site-header {
    position: relative;
    z-index: 2;
    padding-bottom: 8px;           /* a little air under the subtitle */
    text-align: center;
  }
  .toolbar {
    margin-top: 8px;
    margin-bottom: 28px;           /* << main fix: space under CHAOS/STRUCTURE */
  }
  .frame:not(.chaos) .grid-wrap {
    margin-top: 0 !important;      /* kill any negative/collapsed margins */
    padding-top: 36px !important;  /* extra gap so tiles never touch the button */
    box-sizing: border-box;
  }
}
/* ---- DESKTOP: give the header more breathing room above tiles ---- */
@media (min-width: 901px) {
  /* extra space right under CHAOS/STRUCTURE */
  .toolbar{
    margin-bottom: 44px !important;     /* was smaller; push tiles down */
  }

  /* and a little padding at the very top of the tile block */
  .frame:not(.chaos) .grid-wrap{
    padding-top: 52px !important;       /* ensures no overlap on wide screens */
  }
}
/* ===============================
   DESKTOP FIX — Werk only (≥901px)
   =============================== */
@media (min-width: 901px) {
  /* Let the page itself own scrolling */
  .sec-werk { position: relative; min-height: 100vh; overflow-y: auto; }

  /* Make Werk’s list behave like the others (2-up grid) */
  .sec-werk .pager .items,
  .sec-werk .Pager .items {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(420px, 1fr));
    gap: 24px !important;
    overflow: visible !important; /* no inner scrollbars */
    align-items: start;
  }

  /* Remove any fixed widths left from a carousel style */
  .sec-werk .pager .items > *,
  .sec-werk .Pager .items > * {
    width: auto !important;
    max-width: none !important;
  }

  /* If Werk had carousel chrome on desktop, hide it so it matches the others */
  .sec-werk .pager .arrow,
  .sec-werk .pager .dots,
  .sec-werk .Pager .arrow,
  .sec-werk .Pager .dots {
    display: none !important;
  }
}
/* ===============================
   DESKTOP — make WERK match WORDS
   =============================== */
@media (min-width: 901px) {

  /* Keep all of Werk inside the viewport like WORDS does */
  .sec-werk.sec-root {
    position: fixed;
    inset: 0;
    overflow: auto;
  }

  /* Same “deck” height behaviour as WORDS (8 cards visible, 4×2) */
  .sec-werk { --deckH: clamp(420px, 56vh, 620px); }

  /* Center the deck and pull it up a touch (same feel as WORDS) */
  .sec-werk .sec-body{
    padding: clamp(6px, 1.5vw, 20px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: -40px;
    text-shadow: 1px 1px 0 #000;
  }

  /* Pager frame: arrows | deck | arrows (clone of WORDS) */
  .sec-werk .pager{
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1200px) 56px;
    align-items: center;
    gap: 8px;
    margin: 10px auto 24px;
    max-width: calc(56px + 1200px + 56px);
  }

  /* The deck itself: 4×2 grid, fixed height, no vertical growth */
  .sec-werk .items{
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    grid-template-rows: repeat(2, 1fr);
    gap: 12px;
    height: var(--deckH);
    overflow: hidden; /* prevents the tall-rectangle stretch & vertical page scroll */
  }

  /* On narrower desktops, switch to 2×4 like WORDS does */
  @media (max-width: 1100px){
    .sec-werk .items{
      grid-template-columns: repeat(2, minmax(0,1fr));
      grid-template-rows: repeat(4, 1fr);
      height: clamp(560px, 72vh, 840px);
    }
  }

  /* Card internals scroll if content is long (same as WORDS) */
  .sec-werk .item,
  .sec-werk .card { /* include .card just in case Werk used that class */
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: auto;
    border: 1px solid rgba(255,255,255,.38);
    background: rgba(0,0,0,.35);
    padding: 10px 12px;
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
  }

  /* Arrow buttons (triangles, like WORDS) */
  .sec-werk .arrow{
    width: 56px; height: 56px;
    border-radius: 12px;
    border: 1px solid #ffffff40;
    background: rgba(0,0,0,.35);
    position: relative;
    cursor: pointer;
  }
  .sec-werk .arrow:disabled{ opacity: .35; cursor: default; }
  .sec-werk .arrow::before{
    content:"";
    position:absolute; top:50%; left:50%;
    width:0; height:0; transform:translate(-50%,-50%);
    border-top:10px solid transparent; border-bottom:10px solid transparent;
  }
  .sec-werk .arrow.left::before { border-right:14px solid #fff; margin-left:-2px; }
  .sec-werk .arrow.right::before{ border-left:14px solid #fff;  margin-left: 2px; }

  /* Dots under the deck, like WORDS */
  .sec-werk .dots{
    position: absolute;
    left: 50%;
    bottom: -18px;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
  }
  .sec-werk .dot{ width:8px; height:8px; border-radius:999px; background:#ffffff55; }
  .sec-werk .dot.active{ background:#fff; }
}
/* ===== SECTION PAGES — unified mobile behaviour (≤700px) ===== */
@media (max-width: 700px) {
  /* The outer page scrolls */
  .sec-root { position: static !important; min-height: 100vh !important; overflow: auto !important; }
  .sec-content { min-height: auto !important; }
  .sec-body { padding: 0 12px 28px !important; overflow: visible !important; }

  /* Small gap below the header / Home pill so it doesn’t overlap tiles */
  .sec-header { padding: 12px 14px 8px !important; text-align: center; }
  .sec-nav { margin-top: 8px !important; }

  /* Pager wrapper (Words/Weird/Werk/Work lists) */
  .pager, .Pager {
    display: block !important;
    margin: 0 0 24px !important;
    max-width: none !important;
  }

  /* One clean column of cards; kill any fixed deck heights/widths */
  .pager .items, .Pager .items {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    overflow: visible !important;
  }

  /* Cards fill the width and size to content (no stretching) */
  .pager .items > *,
  .pager .item, .pager .card,
  .Pager .items > *,
  .Pager .item, .Pager .card {
    width: auto !important;
    max-width: 100% !important;
    min-height: auto !important;
    height: auto !important;
  }

  /* Hide carousel chrome on phones */
  .pager .arrow, .pager .dots,
  .Pager .arrow, .Pager .dots {
    display: none !important;
  }
}
/* ===== Section header spacing (phones) ===== */
@media (max-width: 700px) {
  .sec-header {                      /* overall header block */
    padding: 16px 14px 0 !important;
    text-align: center;
  }
  .sec-title   { margin: 0 0 6px !important; }
  .sec-sub     { margin: 4px 0 10px !important; }

  /* “← Home” button row */
  .sec-nav { margin: 10px 0 14px !important; }
  .sec-link { display: inline-block; }  /* keeps margins reliable */

  /* start the tile stack with a bit of air */
  .sec-body { padding: 0 12px 28px !important; }
}
/* ===== Fix background to viewport on section pages (phones) ===== */
@media (max-width: 700px) {
  .sec-bg,
  .sec-veil {
    position: fixed !important;   /* stick to viewport */
    inset: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }
  .sec-veil { background: rgba(0,0,0,.45) !important; }

  /* place actual content above the fixed bg */
  .sec-content { position: relative !important; z-index: 1 !important; }
}
/* ==== Stop HOME button overlapping the first tile (phones) ==== */
@media (max-width: 700px) {
  /* some pages pull the grid upward for desktop; cancel on phones */
  .sec-body { margin-top: 0 !important; }
  .pager { margin-top: 0 !important; }
  .pager .items { margin-top: 0 !important; }

  /* give the HOME row a bit more breathing room */
  .sec-nav { margin-bottom: 18px !important; }
}