/* ============================================================
   weeradach.com — Tablet & mobile editions
   Not a squeezed desktop: each width is re-imposed like a
   different print format.
   ============================================================ */

/* =========================================================
   TABLET · 768–1180px  — the "pocket edition"
   ========================================================= */
@media (max-width: 1180px) {

  .mag { grid-template-columns: minmax(0, 1fr); }
  .spine { display: none; }

  .sheet { padding: 0 clamp(1.1rem, 3vw, 2.2rem) 2.5rem; }

  /* -- masthead becomes a single banded strip -- */
  .masthead {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "logo  script search"
      "issue nav    nav";
    align-items: center;
    column-gap: 1rem;
    padding-top: 1.15rem;
  }
  .masthead__logo { font-size: clamp(2rem, 4.4vw, 2.9rem); }
  .masthead__tag  { display: none; }
  .stamp          { display: none; }

  .masthead__script { justify-self: end; }
  .masthead__script img { width: clamp(148px, 21vw, 248px); }

  .cover__script { top: 4%; right: 6%; }
  .cover__script img { width: clamp(104px, 13.5vw, 158px); }

  .masthead__search { display: grid; place-items: center; position: static; padding: .4rem; }

  /* issue marker moves out of the spine and onto the strip */
  .masthead::before {
    content: "ISSUE 003 · JAN 2026";
    grid-area: issue;
    font-family: var(--f-sans);
    font-size: var(--t-micro);
    letter-spacing: .2em;
    color: var(--muted);
    margin-top: 1rem;
    padding-top: .6rem;
    border-top: 1px solid var(--border);
    white-space: nowrap;
    padding-right: 1.4rem;
  }
  .masthead__nav {
    margin-top: 1rem;
    justify-content: flex-end;
    gap: clamp(.7rem, 1.8vw, 1.5rem);
    font-size: .72rem;
    letter-spacing: .1em;
  }

  /* -- the cover takes the whole page width, contents sits under it -- */
  .cover-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "cover    cover"
      "contents work"
      "contents lab"
      "panels   panels";
    min-height: 0;
    gap: clamp(.8rem, 1.6vw, 1.2rem);
  }
  .cover { aspect-ratio: 16 / 10; }
  .cover__text { right: 34%; }
  .cover__title { font-size: clamp(2.6rem, 6.6vw, 4.6rem); }
  .polaroid { width: clamp(118px, 16vw, 168px); bottom: 8%; right: 2%; }

  .contents-sheet { grid-row: span 2; }

  #work, #lab { min-height: clamp(140px, 19vw, 190px); }

  .panel-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel-row .panel { min-height: clamp(150px, 21vw, 200px); }
  .panel-row .panel:first-child { grid-column: span 2; }

  /* -- this issue -- */
  .this-issue { grid-template-columns: minmax(0, 1fr); }
  .this-issue__text { grid-template-columns: auto minmax(0, 1fr); }
  .strip { flex-wrap: wrap; }
  .strip li { width: clamp(78px, 11vw, 108px); }
}

/* =========================================================
   TABLET PORTRAIT · ≤ 900px
   ========================================================= */
@media (max-width: 900px) {
  .cover-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "cover    cover"
      "contents contents"
      "work     lab"
      "panels   panels";
  }
  .contents-sheet { grid-row: auto; }
  /* the card is no longer stretched by the grid, so the rows size to content */
  .toc li { flex: none; }
}

/* =========================================================
   MOBILE · ≤ 760px — a hand-held issue
   ========================================================= */
@media (max-width: 760px) {

  .sheet { padding: 0 0 2rem; }

  /* -- compact masthead, hamburger -- */
  .masthead {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "logo . burger";
    align-items: center;
    padding: .95rem clamp(1rem, 4.5vw, 1.4rem) .85rem;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(245,240,231,.93);
    backdrop-filter: saturate(1.1) blur(6px);
  }
  .masthead::before   { display: none; }
  .masthead__script   { display: none; }
  .masthead__search   { display: none; }
  .masthead__logo     { font-size: 1.75rem; }

  .burger {
    grid-area: burger;
    display: grid;
    gap: 5px;
    width: 30px;
    padding: 6px 2px;
    background: none;
    border: 0;
    cursor: pointer;
    justify-items: end;
  }
  .burger span {
    display: block; height: 1.6px; background: var(--ink);
    transition: transform .35s var(--ease), width .35s var(--ease);
  }
  .burger span:nth-child(1) { width: 26px; }
  .burger span:nth-child(2) { width: 17px; }
  body.nav-open .burger span:nth-child(1) { transform: translateY(3.3px) rotate(14deg); }
  body.nav-open .burger span:nth-child(2) { width: 26px; transform: translateY(-3.3px) rotate(-14deg); }

  .masthead__nav {
    grid-area: unset;
    position: fixed;
    inset: 58px 0 auto;
    z-index: 39;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    border-top: 0;
    background: var(--paper-warm);
    box-shadow: 0 18px 40px -22px rgba(24,24,24,.6);
    max-height: calc(100vh - 58px);
    overflow-y: auto;
    transform: translateY(-104%);
    visibility: hidden;
    transition: transform .42s var(--ease), visibility 0s linear .42s;
  }
  body.nav-open .masthead__nav {
    transform: translateY(0);
    visibility: visible;
    transition: transform .42s var(--ease), visibility 0s;
  }
  .masthead__nav a {
    padding: .95rem clamp(1rem, 4.5vw, 1.4rem);
    border-bottom: 1px solid var(--border);
    font-size: .78rem;
  }
  .masthead__nav a::after { display: none; }

  /* -- cover: full bleed -- */
  .cover-grid {
    display: block;
    margin-top: 0;
    min-height: 0;
  }
  .cover {
    aspect-ratio: 3 / 4;
    max-height: 86vh;
  }
  .cover__photo::after {
    background: linear-gradient(172deg, rgba(20,16,12,.12) 22%, rgba(18,14,10,.52) 62%, rgba(12,10,7,.88));
  }
  .cover__script { top: 2.4%; right: 5%; }
  .cover__script img { width: clamp(96px, 30vw, 142px); }
  .cover__text {
    left: clamp(1rem, 4.5vw, 1.4rem);
    right: clamp(1rem, 4.5vw, 1.4rem);
    bottom: 1.5rem;
  }
  .cover__text::before {
    content: "ISSUE 003 / JAN 2026";
    display: block;
    margin-bottom: .9rem;
    font-family: var(--f-sans);
    font-size: 9.5px;
    letter-spacing: .24em;
    color: rgba(255,255,255,.72);
  }
  .cover__title { font-size: clamp(2.7rem, 13.5vw, 4rem); }
  .cover__dek {
    font-size: .85rem;
    max-width: 30ch;
    margin-bottom: 1.3em;
  }
  .polaroid {
    width: 96px;
    right: 7%;
    bottom: auto;
    top: 44%;
    transform: rotate(-5.5deg);
  }
  .polaroid figcaption { font-size: .86rem; }

  /* -- contents -- */
  .contents-sheet {
    margin: 1.4rem clamp(1rem, 4.5vw, 1.4rem) 0;
    transform: rotate(-1.2deg);
  }
  .contents { padding: 1.7rem 1.2rem 1.3rem; }
  .clip { left: 58%; }
  .toc { columns: 1; }
  .toc a { font-size: .86rem; }

  /* -- stories, one big frame at a time -- */
  .panel-row { display: contents; }
  .panel {
    display: block;
    margin: 1rem clamp(1rem, 4.5vw, 1.4rem) 0;
    aspect-ratio: 5 / 4;
  }
  .panel-row .panel:first-child { grid-column: auto; }
  .panel__label { padding-bottom: 1rem; }
  /* the paint spatter is a desktop-scale detail; it reads as stray dots here */
  #work::before { display: none; }
  .panel__label h3 { font-size: 1.4rem; }
  .panel__label p  { font-size: .72rem; }
  .panel__go { width: 32px; right: 1rem; bottom: 1rem; }

  /* -- this issue -- */
  .this-issue {
    margin: 1.9rem clamp(1rem, 4.5vw, 1.4rem) 0;
    padding-top: 1.3rem;
  }
  .this-issue__text { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .this-issue__text p { font-size: .84rem; }
  .this-issue__text p br { display: none; }
  .strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .4rem;
    margin: 0 calc(clamp(1rem, 4.5vw, 1.4rem) * -1);
    padding-inline: clamp(1rem, 4.5vw, 1.4rem);
    scrollbar-width: none;
  }
  .strip::-webkit-scrollbar { display: none; }
  /* the scattered pile does not work in a snap row: tidy it into prints
     that still lean a little */
  .strip li:nth-child(n) {
    flex: 0 0 auto;
    width: 112px;
    margin-left: 0;
    scroll-snap-align: start;
    transform: rotate(-1.6deg);
  }
  .strip li:nth-child(even) { transform: rotate(1.4deg); }
  .strip li:last-child::after { display: none; }

  .colophon {
    margin: 2rem clamp(1rem, 4.5vw, 1.4rem) 0;
    flex-direction: column;
    align-items: flex-start;
    gap: .55rem;
  }
  .colophon__nav { margin-left: 0; flex-wrap: wrap; gap: .5rem .9rem; }
}

/* =========================================================
   SMALL PHONES · ≤ 400px
   ========================================================= */
@media (max-width: 400px) {
  .cover { aspect-ratio: 4 / 5.4; }
  .cover__title { font-size: 2.55rem; }
  .polaroid { width: 94px; top: 44%; }
  .panel__label h3 { font-size: 1.22rem; }
}