/* ============================================================
   weeradach.com — Magazine layout
   Desktop: spine + three-column editorial canvas
   ============================================================ */

.mag {
  display: grid;
  grid-template-columns: var(--spine-w) minmax(0, 1fr);
  max-width: 1920px;
  margin: 0 auto;
  min-height: 100vh;
}

/* =========================================================
   1 · SPINE
   ========================================================= */
.spine {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  margin-left: 22px;
  padding: clamp(3rem, 10.5vh, 6.6rem) 0 7rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  background: linear-gradient(90deg, rgba(255,253,248,.75), rgba(250,246,238,.3) 55%, rgba(232,225,212,.45));
}

.spine__issue { text-align: center; line-height: 1; }
.spine__label {
  display: block;
  font-family: var(--f-sans);
  font-size: 12px;
  letter-spacing: .28em;
  color: var(--ink-soft);
  margin-bottom: .18rem;
}
.spine__num {
  font-family: var(--f-display);
  font-size: 2.9rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--orange);
}
.spine__rule { width: 76px; height: 1px; background: var(--border); }
.spine__date {
  font-family: var(--f-sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-align: center;
  color: var(--ink);
  line-height: 1.65;
}

.spine__nav {
  align-self: flex-start;
  margin: 1.6rem 0 0 9px;
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
  font-family: var(--f-sans-th);
  font-weight: 500;
  font-size: .95rem;
}
.spine__nav a {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--ink);
  transition: color .25s;
}
.spine__nav i {
  width: 6px; height: 6px; border-radius: 50%;
  background: transparent;
  flex: none;
  transition: background .25s, transform .25s;
}
.spine__nav a:hover { color: var(--ink); }
.spine__nav a.is-current { color: var(--orange); font-weight: 500; }
.spine__nav a.is-current i { background: var(--orange); transform: scale(1.1); }

/* barcode drawn with a repeating gradient of uneven bars */
.spine__barcode {
  margin-top: auto;
  width: 46px;
  height: 106px;
  /* bars run across, because the code is printed turned onto the spine */
  background:
    repeating-linear-gradient(180deg,
      var(--ink) 0 1px, transparent 1px 3px,
      var(--ink) 3px 5px, transparent 5px 6px,
      var(--ink) 6px 7px, transparent 7px 10px,
      var(--ink) 10px 12px, transparent 12px 13px);
  opacity: .82;
}

/* =========================================================
   2 · SHEET + MASTHEAD
   ========================================================= */
.sheet {
  padding: 0 clamp(.9rem, 1.5vw, 1.6rem) 2.5rem;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.masthead {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "logo tag .      stamp"
    "nav  nav nav    nav";
  align-items: center;
  column-gap: clamp(.9rem, 1.5vw, 2rem);
  padding-top: clamp(.5rem, .85vw, 1rem);
}

/* the reference masthead carries no horizontal menu — the spine is the menu */
@media (min-width: 1181px) {
  body[data-page="cover"] .masthead__nav { display: none; }
}

.masthead__logo {
  grid-area: logo;
  font-style: italic;
  padding-left: clamp(0px, 1.1vw, 20px);
  font-size: clamp(2.3rem, .4rem + 6.1vw, 7.1rem);
  letter-spacing: -.028em;
  line-height: .82;
  white-space: nowrap;
}
.masthead__logo .dot {
  color: var(--orange);
  font-style: normal;
  font-size: 1.12em;
  letter-spacing: -.02em;
}

.masthead__tag {
  grid-area: tag;
  position: relative;
  margin: 0;
  font-family: var(--f-sans);
  font-size: clamp(.7rem, .55rem + .36vw, 1rem);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.75;
  white-space: nowrap;
}
.masthead__tag::after {
  content: "";
  position: absolute; left: 1%; bottom: -2.05em;
  width: 116%; aspect-ratio: 168 / 34;
  background: url("../img/hand/tag-swash.png") no-repeat left center/100% 100%;
}


/* The lettered pieces are scans of real ink, cut out of the sheet they were
   written on, so the stock underneath shows through the strokes. */

.masthead__nav {
  grid-area: nav;
  display: flex;
  gap: clamp(1rem, 1.9vw, 2.3rem);
  margin-top: 1.25rem;
  padding: .62rem 0 0;
  border-top: 1px solid var(--border);
  font-family: var(--f-sans);
  font-size: var(--t-small);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.masthead__nav a { position: relative; padding-bottom: 2px; }
.masthead__nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1.5px; background: var(--orange);
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.masthead__nav a:hover { color: var(--ink); }
.masthead__nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.masthead__search {
  position: absolute; right: 0; top: 0;
  background: none; border: 0; color: var(--ink-soft); cursor: pointer;
  display: none;
}

/* ---- franked stamp ---- */
.stamp {
  grid-area: stamp;
  margin: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--ink-soft);
}
.stamp__paper {
  width: clamp(58px, 6vw, 112px);
  aspect-ratio: 1 / 1.02;
  padding: 4px;
  background-color: var(--paper-warm);
  background-image: url("../img/tex/paper-fibre.png");
  background-size: 160px 160px;
  background-blend-mode: multiply;
  transform: rotate(-3deg);
  /* perforated edge */
  -webkit-mask-image: radial-gradient(circle at 50% 0, transparent 2.2px, #000 2.3px),
                      radial-gradient(circle at 50% 100%, transparent 2.2px, #000 2.3px),
                      linear-gradient(#000, #000);
  -webkit-mask-size: 8px 8px, 8px 8px, 100% calc(100% - 10px);
  -webkit-mask-position: 0 0, 0 100%, 0 5px;
  -webkit-mask-repeat: repeat-x, repeat-x, no-repeat;
  mask-image: radial-gradient(circle at 50% 0, transparent 2.2px, #000 2.3px),
              radial-gradient(circle at 50% 100%, transparent 2.2px, #000 2.3px),
              linear-gradient(#000, #000);
  mask-size: 8px 8px, 8px 8px, 100% calc(100% - 10px);
  mask-position: 0 0, 0 100%, 0 5px;
  mask-repeat: repeat-x, repeat-x, no-repeat;
  box-shadow: 0 2px 10px -6px rgba(24,24,24,.5);
}
.stamp__paper img { width: 100%; height: 100%; object-fit: cover; }
.stamp__mark {
  width: clamp(46px, 4.6vw, 86px);
  margin-left: -1.6rem;
  aspect-ratio: 1;
  border: 1.4px solid currentColor;
  border-radius: 50%;
  display: grid;
  place-items: center;
  gap: 0;
  transform: rotate(7deg);
  opacity: .62;
}
.stamp__mark span {
  font-family: var(--f-sans);
  font-size: clamp(6px, .52vw, 9px);
  letter-spacing: .16em;
}
.stamp__mark svg { margin: -2px 0; }
.stamp__wave { width: clamp(54px, 5.4vw, 96px); height: 48px; opacity: .45; order: -1; }

.burger { display: none; }

/* =========================================================
   3 · COVER GRID
   ========================================================= */
.cover-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.82fr) minmax(0, 1fr) minmax(0, 1.51fr);
  grid-template-rows: minmax(0, 1.145fr) minmax(0, 1fr) minmax(0, 1.117fr);
  grid-template-areas:
    "cover contents work"
    "cover contents lab"
    "cover panels   panels";
  gap: clamp(.62rem, .85vw, 1.2rem);
  margin-top: clamp(.35rem, .6vw, .75rem);
  min-height: clamp(488px, 37.1vw, 715px);
}
/* photos must never dictate a row's height — they fill whatever the grid gives */
.cover-grid .photo img { position: absolute; inset: 0; }

/* ---- 3.1 cover story ---- */
.cover { grid-area: cover; position: relative; }

/* The cover is a page torn out of the issue: the photograph is masked along a
   ragged edge, and a second copy of that edge sits just below it in the pale
   colour of paper fibre, so the tear shows its core. */
.cover__photo {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: clamp(6px, .72vw, 14px);
  z-index: 2;
  width: 100%; height: 100%;
  -webkit-mask: url("../img/tex/tear-cover.svg") no-repeat center/100% 100%;
  mask: url("../img/tex/tear-cover.svg") no-repeat center/100% 100%;
}
.cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(177deg, #F3EADC 88%, #FBF6ED 95%, #F7F0E3);
  -webkit-mask: url("../img/tex/tear-cover-fringe.svg") no-repeat center/100% 100%;
  mask: url("../img/tex/tear-cover-fringe.svg") no-repeat center/100% 100%;
  filter: drop-shadow(0 3px 4px rgba(44,35,24,.3)) drop-shadow(0 10px 16px rgba(44,35,24,.22));
  pointer-events: none;
}
.cover__photo::after {
  background: linear-gradient(175deg, rgba(20,16,12,.015) 34%, rgba(18,14,10,.5) 70%, rgba(14,11,8,.84));
}

.cover__script {
  position: absolute;
  top: 4%; right: 11%;
  margin: 0;
  z-index: 3;
  line-height: 0;
}
/* the ink is dark, so the sky behind it gets a little sunlight to sit on */
.cover__script::before {
  content: "";
  position: absolute;
  inset: -22% -18%;
  background: radial-gradient(62% 58% at 50% 52%, rgba(255,247,236,.42), rgba(255,247,236,.17) 52%, transparent 78%);
}
.cover__script img {
  position: relative;
  width: clamp(124px, 12.2vw, 218px);
  height: auto;
  filter: drop-shadow(0 1px 5px rgba(255,248,238,.85)) drop-shadow(0 0 14px rgba(255,246,232,.6));
}

.cover__text {
  position: absolute;
  left: clamp(1.1rem, 2.9vw, 3.1rem);
  bottom: clamp(1.1rem, 2.1vw, 2.3rem);
  right: 26%;
  z-index: 3;
  color: #fff;
}
.cover__title {
  margin: 0 0 .38em;
  font-size: clamp(2.35rem, .5rem + 4.25vw, 4.9rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  color: #fff;
  text-shadow: 0 3px 22px rgba(0,0,0,.35);
}
.cover__title .num { font-family: var(--f-display); font-weight: 800; }
.cover__dek {
  margin: 0 0 .95em;
  font-size: clamp(.82rem, .7rem + .3vw, 1.05rem);
  line-height: 1.65;
  color: rgba(255,255,255,.88);
  max-width: 34ch;
}
.cover .btn-read { color: #fff; }

/* polaroid snapshot */
.polaroid {
  position: absolute;
  right: .5%;
  bottom: -1%;
  z-index: 4;
  width: clamp(108px, 12.8vw, 216px);
  margin: 0;
  padding: 6px 6px clamp(1.05rem, 1.42vw, 1.5rem);
  background-color: var(--paper-warm);
  background-image: url("../img/tex/paper-fibre.png"), url("../img/tex/paper-mottle.png");
  background-size: 240px 240px, 620px 620px;
  background-blend-mode: multiply, multiply;
  transform: rotate(-6.5deg);
  box-shadow: 0 2px 4px rgba(20,16,12,.15), 0 18px 34px -16px rgba(20,16,12,.65);
  transition: transform .5s var(--ease);
}
.polaroid:hover { transform: rotate(-3deg) translateY(-5px); }
.polaroid .photo { aspect-ratio: 4 / 3; }
.polaroid figcaption {
  position: absolute;
  left: 0; right: 0; bottom: .42rem;
  text-align: center;
  font-size: clamp(.74rem, .55rem + .22vw, .92rem);
  color: var(--ink-soft);
}
.tape {
  position: absolute;
  width: 62px; height: 20px;
  background: rgba(234,218,186,.62);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
}
.tape--tl { top: -10px; left: -14px; transform: rotate(-32deg); }

/* ---- 3.2 contents ---- */
/* The sheet is cocked on the page and torn at the edges; the clip has to live
   outside that clip-path or it gets cut off, so the tilt sits on a wrapper. */
.contents-sheet {
  grid-area: contents;
  position: relative;
  transform: rotate(-2deg);
  /* light falls from the upper left, so the sheet throws its shadow down-right */
  filter:
    drop-shadow(1px 3px 2px rgba(44,35,24,.36))
    drop-shadow(4px 8px 8px rgba(44,35,24,.22))
    drop-shadow(8px 19px 26px rgba(44,35,24,.22));
}

.contents {
  position: relative;
  height: 100%;
  padding: clamp(1.15rem, 1.45vw, 1.65rem) clamp(.95rem, 1.35vw, 1.6rem) clamp(.8rem, 1.1vw, 1.25rem);
  display: flex;
  flex-direction: column;
  /* Measured against the reference sheet (242,232,218): the fibre multiplies
     onto the stock, then a wash of white dilutes it back to that tone. */
  background-color: #F3EADC;
  background-image:
    linear-gradient(157deg, rgba(255,253,249,.42), rgba(255,253,249,0) 46%, rgba(163,146,122,.15)),
    linear-gradient(rgba(255,255,255,.38), rgba(255,255,255,.38)),
    url("../img/tex/paper-fibre.png");
  background-size: 100% 100%, 100% 100%, 290px 290px;
  background-blend-mode: normal, normal, multiply;
  /* no box-shadow here — clip-path would cut it off; see .contents-sheet */
  /* a polygon gives a saw-tooth; the mask carries a real torn bottom edge */
  -webkit-mask: url("../img/tex/tear-contents.svg") no-repeat center/100% 100%;
  mask: url("../img/tex/tear-contents.svg") no-repeat center/100% 100%;
  overflow: hidden;
}
/* a gem clip, drawn as wire so it keeps its highlight at any size */
.clip {
  position: absolute;
  top: -2.2%;
  left: 61%;
  z-index: 6;
  width: clamp(17px, 1.95vw, 34px);
  aspect-ratio: 36 / 92;
  transform: rotate(9deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 92'%3E%3Cpath d='M23 13V75a8 8 0 0 1-16 0V19a11 11 0 0 1 22 0v49' fill='none' stroke='%234f4f4f' stroke-width='3.4' stroke-linecap='round'/%3E%3Cpath d='M23 13V75a8 8 0 0 1-16 0V19a11 11 0 0 1 22 0v49' fill='none' stroke='%23a9a9a9' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  filter: drop-shadow(1.5px 2.5px 1.5px rgba(40,34,26,.42));
}

.contents__head {
  margin: 0 0 .45rem;
  line-height: 0;
  align-self: flex-start;
  flex: none;
}
.contents__head img { width: clamp(118px, 10.6vw, 190px); height: auto; }

.toc {
  list-style: none; margin: 0; padding: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.toc li {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: .35rem;
  align-items: center;
  padding: .42rem 0;
  border-top: 1px solid #CFC6B7;
}
.toc li:first-child { border-top: 0; padding-top: 0; flex: 0 1 auto; }
.toc__p {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(.88rem, .7rem + .45vw, 1.22rem);
  padding-top: .05em;
}
.toc a {
  font-family: var(--f-sans-th);
  font-size: clamp(.78rem, .58rem + .58vw, 1.02rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
  transition: color .22s;
}
.toc a:hover { color: var(--orange); }

/* ---- 3.3 panels ---- */
.panel {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: clamp(6px, .72vw, 14px);
  background: var(--paper-deep);
}
#work { grid-area: work; }
#lab  { grid-area: lab; }
.panel-row {
  grid-area: panels;
  display: grid;
  grid-template-columns: 1.05fr 1fr 1.03fr;
  gap: clamp(.62rem, .85vw, 1.2rem);
  min-width: 0;
}
.panel .photo { width: 100%; height: 100%; }
.panel .photo::after {
  background: linear-gradient(180deg, rgba(20,16,12,.02) 28%, rgba(18,14,10,.52) 62%, rgba(14,11,8,.88));
}

.panel__label {
  position: absolute;
  left: 0; bottom: 0;
  z-index: 3;
  padding: 0 clamp(.9rem, 1.2vw, 1.3rem) clamp(.85rem, 1.1vw, 1.15rem);
  max-width: calc(100% - 3rem);
  color: #fff;
}
.panel__label h3 {
  margin: 0;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.15rem, .5rem + 1.75vw, 2.45rem);
  letter-spacing: -.012em;
  line-height: 1.12;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,.45);
}
.panel__label p {
  margin: .18rem 0 0;
  font-family: var(--f-sans-th);
  font-weight: 500;
  font-size: clamp(.68rem, .55rem + .28vw, .92rem);
  line-height: 1.45;
  text-wrap: balance;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 12px rgba(0,0,0,.5);
}

/* The Work carries the issue accent: a brushed band of orange paint */
#work .panel__label {
  width: 54%;
  max-width: none;
  padding: clamp(.6rem, 1.1vw, 1.2rem) clamp(.9rem, 1.2vw, 1.3rem) clamp(.9rem, 1.2vw, 1.25rem);
  background: var(--orange);
  clip-path: polygon(
    0% 12%, 9% 5%, 19% 11%, 30% 4%, 41% 10%, 52% 3%, 63% 11%, 73% 5%,
    82% 14%, 90% 7%, 96% 17%, 100% 11%,
    96% 33%, 100% 54%, 93% 73%, 99% 90%, 88% 100%, 0% 100%
  );
}
#work .panel__label h3,
#work .panel__label p { text-shadow: none; }
#work .panel__label p { color: rgba(255,255,255,.94); }
/* a little spatter thrown off the torn edge (outside the band's clip-path) */
#work::before {
  content: "";
  position: absolute;
  left: 53%; bottom: 0;
  width: 13%; height: 38%;
  z-index: 4;
  background:
    radial-gradient(circle 3.5px at 12% 34%, var(--orange) 98%, transparent),
    radial-gradient(circle 2px   at 30% 62%, var(--orange) 98%, transparent),
    radial-gradient(circle 4.5px at 22% 84%, var(--orange) 98%, transparent),
    radial-gradient(circle 1.6px at 48% 46%, var(--orange) 98%, transparent),
    radial-gradient(circle 2.6px at 44% 92%, var(--orange) 98%, transparent),
    radial-gradient(circle 1.4px at 64% 74%, var(--orange) 98%, transparent);
  background-repeat: no-repeat;
  pointer-events: none;
}

.panel__go {
  position: absolute;
  right: clamp(.6rem, 1vw, 1.05rem);
  bottom: clamp(.8rem, 1.4vw, 1.5rem);
  z-index: 5;
  width: clamp(26px, 2.3vw, 38px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.4px solid rgba(255,255,255,.85);
  color: #fff;
  display: grid; place-items: center;
  transition: background .3s, color .3s, transform .4s var(--ease);
}
.panel:hover .panel__go { background: #fff; color: var(--ink); transform: translateX(3px); }

/* film-strip sprockets on the travel panel */
.panel--film::before,
.panel--film::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(13px, 1.15vw, 19px);
  z-index: 4;
  background-color: #141414;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 28'%3E%3Crect x='4' y='7' width='12' height='14' rx='3.6' fill='%23E9E2D6'/%3E%3C/svg%3E");
  background-size: 100% 28px;
  background-position: center 6px;
  background-repeat: repeat-y;
}
.panel--film::before { left: 0; }
.panel--film::after  { right: 0; }
.panel--film .panel__label { padding-left: clamp(1.5rem, 2vw, 2.2rem); }

/* the bottom row is narrow — the caption runs up to the arrow, never under it */
.panel-row .panel__label {
  max-width: calc(100% - 3.4rem);
  padding-right: .1rem;
  padding-left: clamp(.75rem, 1vw, 1.05rem);
}
.panel-row .panel__label h3 { font-size: clamp(1.05rem, .52rem + 1.3vw, 1.9rem); }
.panel-row .panel__label p  { font-size: clamp(.58rem, .5rem + .17vw, .74rem); }
.panel-row .panel--film .panel__label { padding-left: clamp(1.4rem, 1.9vw, 2.1rem); }

/* =========================================================
   4 · THIS ISSUE
   ========================================================= */
.this-issue {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.5rem);
  margin-top: clamp(.55rem, .95vw, 1.3rem);
  padding-top: 0;
}
.this-issue__text {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 2vw, 2.4rem);
}
.this-issue__hand {
  margin: 0;
  line-height: 0;
}
.this-issue__hand img { width: clamp(132px, 11.8vw, 204px); height: auto; }
.this-issue__text p {
  margin: 0;
  font-size: clamp(.78rem, .7rem + .22vw, .95rem);
  line-height: 1.6;
  text-wrap: pretty;
  color: var(--ink);
}

.strip {
  display: flex;
  align-items: center;
  align-self: end;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Prints dropped on the page rather than filed in a row: each one has its own
   angle, sits at its own height, and laps over the one before it. */
.strip li {
  flex: none;
  width: clamp(70px, 8.4vw, 143px);
  margin-left: clamp(-.8rem, -.55vw, -.35rem);
  /* photographic paper is brighter than the page it lies on, and the border
     is wide enough to read as a border */
  padding: clamp(3px, .27vw, 5px) clamp(3px, .27vw, 5px) clamp(4px, .4vw, 7px);
  background-color: #FCFAF4;
  background-image: url("../img/tex/paper-fibre.png");
  background-size: 190px 190px;
  background-blend-mode: soft-light;
  box-shadow:
    0 1px 1px rgba(32,26,18,.2),
    0 3px 5px -1px rgba(44,35,24,.22),
    0 12px 24px -12px rgba(44,35,24,.55);
  transition: transform .45s var(--ease);
}
.strip li:first-child { margin-left: 0; }
.strip li .photo { aspect-ratio: 4 / 3; border-radius: 2px; }
/* these are prints on a table, not darkened plates — no wash over them */
.strip li .photo::after { background: none; }

.strip li:nth-child(1) { width: clamp(70px, 8.5vw, 145px); transform: rotate(-5.2deg) translateY(-2px);  z-index: 1; }
.strip li:nth-child(2) { width: clamp(59px, 7.1vw, 121px); transform: rotate(1.4deg)  translateY(6px);   z-index: 2; }
.strip li:nth-child(3) { width: clamp(55px, 6.6vw, 112px); transform: rotate(-1.9deg) translateY(-5px);  z-index: 3; }
.strip li:nth-child(4) { width: clamp(68px, 8.2vw, 140px); transform: rotate(.9deg)   translateY(4px);   z-index: 4; }
.strip li:nth-child(5) { width: clamp(63px, 7.6vw, 129px); transform: rotate(-3.4deg) translateY(-3px);  z-index: 5; }

/* a strip of tape holding the last print down */
.strip li:last-child::after {
  content: "";
  position: absolute;
  top: -9px; right: -12px;
  width: 46px; height: 17px;
  transform: rotate(-38deg);
  background: rgba(234,218,186,.6);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.32);
}
.strip li:last-child { position: relative; }

.strip li:hover { transform: rotate(0) translateY(-7px); z-index: 6; }

/* =========================================================
   5 · COLOPHON
   ========================================================= */
.colophon {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .8rem clamp(1rem, 2vw, 2rem);
  margin-top: 0;
  padding-top: 1.05rem;
  border-top: 1px solid var(--border);
}
.colophon__logo { margin: 0; font-size: 1.35rem; letter-spacing: -.03em; }
.colophon__logo .dot { color: var(--orange); }
.colophon__line { margin: 0; font-size: var(--t-small); color: var(--muted); }
.colophon__nav { margin-left: auto; display: flex; gap: 1.1rem; }
.colophon__nav a {
  font-family: var(--f-sans);
  font-size: var(--t-micro);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.colophon__nav a:hover { color: var(--orange); }

/* =========================================================
   6 · FULL-SCREEN READING
   The spread is built to fit one screen, so the button only
   appears once the script confirms the browser can do it.
   ========================================================= */
.fs-toggle {
  position: fixed;
  right: clamp(.75rem, 1.3vw, 1.5rem);
  bottom: clamp(.75rem, 1.3vw, 1.5rem);
  z-index: 60;
  display: none;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: rgba(250,247,240,.9);
  -webkit-backdrop-filter: saturate(1.1) blur(5px);
  backdrop-filter: saturate(1.1) blur(5px);
  color: var(--ink-soft);
  cursor: pointer;
  box-shadow: 0 2px 5px -2px rgba(40,32,22,.3), 0 10px 22px -14px rgba(40,32,22,.6);
  transition: color .25s, border-color .25s, transform .35s var(--ease);
}
body.can-fs .fs-toggle { display: grid; }
.fs-toggle:hover { color: var(--orange); border-color: var(--orange); transform: translateY(-2px); }
.fs-toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.fs-i--out { display: none; }
body.is-fs .fs-i--in  { display: none; }
body.is-fs .fs-i--out { display: block; }