/* The Dirtbag's Rag. Colors sampled from the Issue 01 cover (assets/issue-01/page-01.jpg). */

/* Hosted fonts (SIL Open Font License), so no visitor data goes to Google Fonts. Latin only. */
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 400 900; font-stretch: 62% 125%; font-display: swap;
  src: url("fonts/archivo-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Courier Prime"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/courier-prime-latin.woff2") format("woff2");
}

:root {
  --charcoal: #1a1819;
  --ink: #121112;
  --spine: #991e21;     /* the red down the cover's edge */
  --red: #d42a30;       /* the emblem's letters: fills, borders and big type */
  --red-text: #ee5258;  /* the same red, lightened a touch for small text on dark grounds (5:1 on charcoal; brand red is 3.5:1) */
  --paper: #f1eee8;
  --muted: #9a9592;
  --line: rgba(241, 238, 232, 0.14);
  --display: "Archivo", "Arial Narrow", sans-serif;
  --body: "Archivo", system-ui, sans-serif;
  --type: "Courier Prime", "Courier New", monospace;  /* the typewriter text in the issue */
  --spine-w: 10px;
  --gutter: clamp(16px, 5vw, 56px);

  /* Type scale. Every size on the site is one of these, fluid from a 375px phone to a 1440px screen.
     Roles: headings are Archivo condensed (one width, one weight), everything else is the typewriter.
     In a section nothing is bigger than its heading, and each section has at most one lead line. */
  --t-label: 0.75rem;                                   /* 12px  caps: labels, tags, nav, small print */
  --t-small: 0.875rem;                                  /* 14px  buttons, meta, credits, hints */
  --t-body: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);  /* 17-19px  reading text */
  --t-lead: clamp(1.25rem, 1.05rem + 0.85vw, 1.75rem);  /* 20-28px  the one lead line in a section */
  --t-h3: clamp(1.5rem, 1.2rem + 1.1vw, 2.25rem);       /* 24-36px  subheads, names in a list */
  --t-statement: clamp(2rem, 1.3rem + 3vw, 4rem);       /* 32-64px  a big line, always under its heading */
  --t-h2: clamp(2.75rem, 1.65rem + 4.7vw, 6rem);        /* 44-96px  section headings */
  --t-h1: clamp(3.25rem, 1.9rem + 5.8vw, 8rem);         /* 52-128px page titles */
  --t-display: clamp(4.5rem, 2.3rem + 9.4vw, 11rem);    /* 72-176px folios and dates only */
  --wdth: "wdth" 62;                                    /* the one heading width */
  --track-caps: 0.08em;                                 /* small caps text */
  --track-tight: -0.02em;                               /* big type */
  --measure: 62ch;                                      /* reading text */
  --measure-lead: 34ch;
  --measure-statement: 18ch;

  /* Spacing scale (8px steps). Tight inside a group, wider between groups, widest between sections. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: clamp(32px, 2rem + 1.5vw, 48px);               /* heading to its content */
  --s-7: clamp(48px, 2.5rem + 3vw, 80px);               /* between groups */
  --s-8: clamp(56px, 2.5rem + 6vw, 128px);              /* section padding */
}

* { box-sizing: border-box; }
html { background: var(--charcoal); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--charcoal);
  color: var(--paper);
  font: 400 var(--t-body)/1.6 var(--body);
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 800; font-variation-settings: var(--wdth); line-height: 0.9; letter-spacing: -0.01em; text-transform: uppercase; text-wrap: balance; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1; letter-spacing: 0; }
p { margin: 0; }
.eyebrow { margin: 0; font: 400 var(--t-label)/1.3 var(--type); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); }

/* Placeholder copy: dashed red underline and a DRAFT tag, so it can't pass for final. */
.draft {
  display: inline-block;
  font: 400 var(--t-small)/1.4 var(--type);
  color: var(--muted);
  text-decoration: underline dashed var(--red) 1px;
  text-underline-offset: 4px;
}
.draft::before {
  content: "DRAFT";
  margin-right: 0.5em;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--red);
  color: #fff;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  vertical-align: 1px;
}

/* The red spine from the cover, down the left edge of every page. */
.spine {
  position: fixed; inset: 0 auto 0 0; z-index: 30;
  width: calc(var(--spine-w) + env(safe-area-inset-left, 0px));
  background: var(--spine);
  pointer-events: none;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) var(--gutter) 10px calc(var(--gutter) + var(--spine-w));
  background: var(--charcoal);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
/* The header emblem waits until the cover's own emblem scrolls away. */
.brand { display: flex; align-items: center; min-height: 44px; line-height: 0; opacity: 0; transition: opacity 0.3s; }
.site-header.is-scrolled .brand { opacity: 1; }
.brand-mark { display: block; width: 96px; height: 33px; }   /* the logo is 1200 × 413 */
/* Each link is a small outlined button so it reads as something to tap. Shop is the filled red
   button, like the rest of the site's buttons. The page you're on is outlined in red. */
.site-nav { display: flex; align-items: center; gap: clamp(6px, 0.8vw, 10px); }
.site-nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 30px; padding: 0 9px;
  border: 1px solid rgba(241, 238, 232, 0.3); background: none; color: var(--paper); cursor: pointer;
  font: 400 var(--t-label)/1 var(--type); letter-spacing: var(--track-caps); text-transform: uppercase; text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
/* Slim to look at, but the tap area still reaches 44px. */
.site-nav a::after { content: ""; position: absolute; inset: -7px -3px; }
.site-nav a:hover { border-color: var(--red); color: var(--red-text); }
.site-nav a[aria-current="page"] { border-color: var(--red); color: var(--red-text); }
.site-nav .nav-shop { border-color: var(--red); background: var(--red); color: #fff; }
.site-nav .nav-shop:hover { background-color: var(--red); color: #fff; }
.site-nav .nav-shop[aria-current="page"] { background: none; color: var(--red-text); }
/* The same links, in the same order, on every screen. On a phone "Share your work" says "Share"
   (the full name stays for screen readers), and the emblem and buttons shrink so all four fit on one row. */
.nav-short { display: none; }
@media (max-width: 520px) {
  .nav-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav-short { display: inline; }
  .site-header { gap: 8px; padding-left: calc(12px + var(--spine-w)); padding-right: 12px; }
  .brand-mark { width: 54px; height: 19px; }
  .site-nav { gap: 4px; }
  .site-nav a { padding: 0 6px; }
}
/* The smallest phones (iPhone SE): the emblem steps aside so the four links still fit. */
@media (max-width: 359px) { .brand { display: none; } .site-header { justify-content: flex-end; } }
.site-header { flex-wrap: wrap; }

/* Page turns: going to another page slides the old one away and the new one in, while the
   header and spine stay put. Browsers without view transitions just load the page. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.site-header { view-transition-name: header; }
.spine { view-transition-name: spine; }
::view-transition-old(root) { animation: turn-out 0.26s cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: turn-in 0.42s cubic-bezier(0, 0, 0.2, 1) both; }
@keyframes turn-out { to { opacity: 0; transform: translateX(-4%); } }
@keyframes turn-in { from { opacity: 0; transform: translateX(6%); } }

/* As you read down the page, a brighter red fills the spine from the top. */
.spine-fill { position: absolute; inset: 0; background: var(--red); transform-origin: top; transform: scaleY(0); }

/* ---------- Home: the opening screen ---------- */
/* One screen that says what this is: the emblem, the mission line, and Get the Rag. */
.is-home main { padding-top: calc(64px + env(safe-area-inset-top, 0px)); }
.opening {
  min-height: calc(100svh - 64px - env(safe-area-inset-top, 0px));
  max-width: 1400px; margin: 0 auto; padding-block: clamp(28px, 6vh, 64px);
  display: grid; align-content: start; align-items: start; gap: clamp(32px, 5vw, 64px);
}
.opening-text { display: grid; justify-items: start; gap: clamp(18px, 3vh, 28px); }

/* The title sits at the top, centred, with the logo centred under it. The mission and what follows stay left. */
.cover-kicker { justify-self: center; text-align: center; font: 400 var(--t-h3)/1.1 var(--type); letter-spacing: var(--track-caps); text-transform: uppercase; color: #fff; }
.cover-mark { display: block; justify-self: center; width: min(440px, 72vw); height: auto; }
/* The emblem just fades up once, softly. */
.motion .cover-mark { animation: mark-in 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; }
@keyframes mark-in { from { opacity: 0; transform: translateY(10px); } }
/* ---------- Sections ---------- */
main > section, main > .is-off > section { padding-inline: calc(var(--gutter) + var(--spine-w)) var(--gutter); }
.section-head { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
.meta { font: 400 var(--t-small)/1.5 var(--type); color: var(--muted); }

/* The mission in the issue's typewriter type. With motion on, it sets word by word as the page opens. */
.mission { margin: 0; font: 400 var(--t-statement)/1.1 var(--type); letter-spacing: var(--track-tight); }
.motion .mission .w { opacity: 0.16; transition: opacity 0.35s ease; }
.motion .mission .w.is-lit { opacity: 1; }
.intro-body { font: 400 var(--t-lead)/1.4 var(--type); max-width: var(--measure-lead); color: #d8d3cc; }
.source { font: 400 var(--t-small)/1.5 var(--type); color: var(--muted); }

figcaption, .credit { margin-top: var(--s-2); font: 400 var(--t-small)/1.5 var(--type); color: var(--muted); }
.credit { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }

.next { padding-block: clamp(96px, 14vw, 180px); max-width: 1400px; margin: 0 auto; }
.next-card {
  display: grid; gap: 12px; padding: clamp(28px, 5vw, 64px);
  background: var(--spine);
  color: #fff;
}
.next-card .eyebrow { color: rgba(255, 255, 255, 0.75); }
.next-where { font: 400 var(--t-body)/1.4 var(--type); }
.next-date { font-family: var(--display); font-weight: 800; font-variation-settings: var(--wdth); font-size: var(--t-h2); line-height: 0.9; text-transform: uppercase; }
.next-card .draft { color: rgba(255, 255, 255, 0.8); text-decoration-color: #fff; }
.next-card .draft::before { background: #fff; color: var(--spine); }


/* ---------- Shared bits ---------- */
.is-inner main { padding-top: calc(72px + env(safe-area-inset-top, 0px)); }
.is-inner .brand { opacity: 1; }
main > section > a.more, .more {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; margin-top: var(--s-4);
  font: 400 var(--t-small)/1 var(--type); letter-spacing: var(--track-caps); text-transform: uppercase; text-decoration: none; color: var(--red-text);
}
.more:hover { color: var(--paper); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-4); }
.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  background: var(--red); color: #fff; text-decoration: none;
  font: 400 var(--t-small)/1 var(--type); letter-spacing: var(--track-caps); text-transform: uppercase;
  transition: transform 0.2s, opacity 0.2s;
}
.button:hover { transform: translateY(-2px); }
.button-off { opacity: 0.45; cursor: not-allowed; }
.button-off:hover { transform: none; }
.price { font-family: var(--display); font-weight: 800; font-variation-settings: var(--wdth); font-size: var(--t-statement); line-height: 0.9; }
.tag { display: inline-block; padding: 2px 7px; border: 1px solid var(--line); font: 400 var(--t-label)/1.3 var(--type); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); }
.tag-draft { border-style: dashed; border-color: var(--red); }
.list-link { font-family: var(--display); font-weight: 800; font-variation-settings: var(--wdth); font-size: var(--t-h3); line-height: 1; text-transform: uppercase; }
.list-link a { text-decoration: none; }
.list-link a:hover { color: var(--red-text); }

/* Where a photo will go. */
.ph { display: grid; place-items: center; width: 100%; background: var(--ink); border: 1px dashed var(--line); }

/* Built but switched off: only seen in the local preview. */
.hidden-tag {
  margin: 0 calc(var(--gutter)) 12px calc(var(--gutter) + var(--spine-w)); padding: 6px 10px; display: inline-block;
  background: #e7c14a; color: #1a1819; font: 700 var(--t-label)/1.3 var(--type); letter-spacing: var(--track-caps); text-transform: uppercase;
}
.is-off { outline: 2px dashed #e7c14a; outline-offset: -2px; padding-top: 16px; }
.is-off .hidden-tag { margin-left: calc(var(--gutter) + var(--spine-w)); }
.nav-off { opacity: 0.45; text-decoration: line-through !important; }

/* Page tops on inner pages */
.page-head { max-width: 1400px; margin: 0 auto; padding-block: var(--s-6) var(--s-7); }

/* ---------- Home: numbered sections ---------- */
/* Every section opens the same way, like a line of the Rag's contents page: a rule, the number in
   red, the name, and a link onward on the right. */
.home-sec { max-width: 1400px; margin: 0 auto; padding-block: var(--s-8) 0; }
.home-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 6px 16px;
  padding-top: var(--s-3); margin-bottom: var(--s-6); border-top: 1px solid var(--line);
}
/* A short red dash in place of the old 01 / 02 numbers (Jameson and Ian, Nov 3). */
.home-no { display: block; width: 28px; height: 3px; background: var(--red); align-self: center; }
.home-head h2 { font-size: var(--t-h2); }
.home-head .more { margin-top: 0; min-height: 0; }
.home-head .draft { grid-column: 3; }
@media (max-width: 520px) {
  .home-head { grid-template-columns: auto minmax(0, 1fr); }
  .home-head > :nth-child(3) { grid-column: 2; }
}
.home-title { font-size: var(--t-h2); }
.home-title a { text-decoration: none; }
.home-title a:hover { color: var(--red-text); }
/* Inside: the pages from the issue, whole, in a plain grid with their credits under them. */
.home-pages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px) clamp(16px, 2.4vw, 32px); }
.home-page a { display: block; }
.home-page img { width: 100%; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45); }
@media (hover: hover) {
  .home-page img { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
  .home-page a:hover img { transform: translateY(-6px); }
}
@media (max-width: 760px) { .home-pages { grid-template-columns: 1fr; } }
/* Words on one side, a big photo on the other (stacked on a phone). They never share space. */
.home-split { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (min-width: 900px) { .home-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
/* A big photo that pulls in like a screen print (the wipe is further down, under Motion). */
.stencil { margin: 0; }
.stencil img { width: 100%; }
.home-share, .home-find { display: grid; gap: 22px; justify-items: start; container-type: inline-size; }
.home-big { font-family: var(--display); font-weight: 800; font-variation-settings: var(--wdth); font-size: var(--t-h2); line-height: 0.9; text-transform: uppercase; max-width: 12ch; }
/* Sized to its own column (container units), so a long word like @DIRTBAGSRAG never runs past it. */
@supports (font-size: 1cqi) { .home-big { font-size: min(var(--t-h2), 15cqi); } }
.home-big a { text-decoration: none; }
.home-big a:hover { color: var(--red-text); }
.home-find .meta a { color: var(--paper); }
.home-signoff { font: 400 var(--t-lead)/1.4 var(--type); color: #d8d3cc; padding-bottom: var(--s-8); }
.home-sec .next { padding: 0; max-width: none; }
/* A second, quieter button: outlined, fills red on hover. */
.button-line { background: none; border: 1px solid rgba(241, 238, 232, 0.5); color: var(--paper); }
.button-line:hover { border-color: var(--red); background: var(--red); color: #fff; }

/* ---------- Share: the invitation ---------- */
/* Pages from the Rag, whole and square, beside the words. */
.share-band { padding-block: clamp(96px, 14vw, 180px); }
.share-band > div { max-width: 1100px; margin: 0 auto; display: grid; gap: var(--s-4); justify-items: start; }
.share-band h2 { max-width: 16ch; }
.invite {
  display: grid; gap: clamp(36px, 6vw, 64px); align-items: center;
  max-width: 1400px; margin: 0 auto; padding-block: clamp(96px, 14vw, 180px);
}
.invite .invite-text { max-width: none; margin: 0; display: grid; gap: var(--s-4); justify-items: start; }
.invite h2 { max-width: 11ch; }
.invite-credit { margin: 0; font: 400 var(--t-small)/1.5 var(--type); color: var(--muted); }
/* The pages: a staggered row above the words on a phone, a column beside them on wide screens.
   The stagger is margin inside the grid, so the pages keep their own space. */
.invite .invite-pages { max-width: none; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 2vw, 22px); align-items: start; }
.invite-page img { width: 100%; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45); }
.invite-page:nth-child(2) { margin-top: 18%; }
.invite-page:nth-child(3) { margin-top: 8%; }
@media (min-width: 900px) {
  .invite { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .invite .invite-pages { grid-column: 2; grid-row: 1; }
  .invite .invite-text { grid-column: 1; grid-row: 1; }
  .invite-credit { grid-column: 1 / -1; }
}

/* ---------- Home: the Rag you can pick up ---------- */
/* Tap turns it over to the back cover. */
.rag { max-width: 420px; perspective: 1400px; }
.rag-flip {
  display: grid; width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.rag-flip[aria-pressed="true"] { transform: rotateY(180deg); }
.rag-face { grid-area: 1 / 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.rag-face img { width: 100%; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45); }
.rag-back { transform: rotateY(180deg); }
.rag-hint { margin-top: var(--s-3); font: 400 var(--t-label)/1.3 var(--type); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); }
.issue-head h2 a { text-decoration: none; }
.issue-head h2 a:hover { color: var(--red-text); }
@media (max-width: 760px) { .rag { max-width: 62%; } }

/* ---------- Home: artists as a show poster ---------- */
.poster {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.06em 0.4em;
  font-family: var(--display); font-weight: 800; font-variation-settings: var(--wdth);
  font-size: var(--t-h2); line-height: 0.95; text-transform: uppercase; text-align: center;
}
.poster a { text-decoration: none; transition: color 0.2s; }
.poster li:nth-child(even) a { color: transparent; -webkit-text-stroke: 1.5px var(--paper); }
.poster a:hover, .poster li:nth-child(even) a:hover { color: var(--red-text); -webkit-text-stroke: 0; }
.lineup-poster .section-head { justify-items: center; text-align: center; }
.lineup-poster > .more { display: flex; justify-content: center; }

/* ---------- Issue ---------- */
.issue-head { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: end; }
.issue-head .section-head { margin-bottom: 0; }
@media (max-width: 760px) { .issue-head { grid-template-columns: 1fr; } }
.toc a { text-decoration: none; }
.toc a:hover { color: var(--red-text); }

.stories, .more-stories, .shop-section, .shop-strip, .people, .lineup { max-width: 1400px; margin: 0 auto; padding-bottom: clamp(72px, 10vw, 140px); }
/* Slim like the nav buttons; the tap area still reaches 44px. */
.filters { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-2); margin-bottom: var(--s-4); }
.filter {
  position: relative; min-height: 30px; padding: 0 9px; border: 1px solid rgba(241, 238, 232, 0.3); background: none; color: var(--paper); cursor: pointer;
  font: 400 var(--t-label)/1 var(--type); letter-spacing: var(--track-caps); text-transform: uppercase;
}
.filter::after { content: ""; position: absolute; inset: -7px -3px; }
.filter:hover { border-color: var(--red); color: var(--red-text); }
.filter[aria-pressed="true"] { background: var(--paper); color: var(--charcoal); border-color: var(--paper); }
html:not(.js) .filters { display: none; }
.stories > .meta { margin-bottom: var(--s-5); }

/* The contents page: numbered rows like the printed one. The row mid-screen (or hovered)
   lights up and its photo peeks out, the same as the sections on the home page. */
.toc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.toc-row[hidden] { display: none; }
.toc-row a {
  position: relative; display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 4px 14px; align-items: baseline;
  padding: var(--s-4) 0; border-bottom: 1px solid var(--line); text-decoration: none;
}
.toc-no { font: 400 var(--t-small)/1 var(--type); color: var(--red-text); }
.toc-title {
  font-family: var(--display); font-weight: 800; font-variation-settings: var(--wdth);
  font-size: var(--t-statement); line-height: 0.9; text-transform: uppercase;
  transition: opacity 0.3s; opacity: 0.72;
}
.toc-meta { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.toc-row.is-active .toc-title { opacity: 1; }
@media (hover: hover) {
  .toc-row a:hover .toc-title { opacity: 1; }
}
html:not(.motion) .toc-title { opacity: 1; }

/* ---------- Issue: the magazine reader ---------- */
/* One page at a time, as big as the screen allows, in a row you swipe through (scroll-snap).
   The page number, story and credit sit beside the page on wide screens and under it on a phone. */
.reader-head { max-width: 1400px; margin: 0 auto; padding-block: var(--s-6) var(--s-5); display: grid; gap: var(--s-2); }
.reader { max-width: 1400px; margin: 0 auto; padding-bottom: clamp(64px, 10vw, 120px); scroll-margin-top: 84px; }
.reader-track {
  list-style: none; margin: 0; padding: 0; display: flex; gap: 80px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; outline-offset: 4px;
}
.reader-track::-webkit-scrollbar { display: none; }
.reader-page {
  flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always;
  display: grid; gap: 16px; align-content: start;
}
.reader-fig { margin: 0; }
.reader-fig img { display: block; width: 100%; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45); }
.reader-info { display: grid; gap: var(--s-3); align-content: start; justify-items: start; }
.reader-info .more { margin-top: var(--s-1); }
.reader-no { font-family: var(--display); font-weight: 800; font-variation-settings: var(--wdth); font-size: var(--t-statement); line-height: 0.9; text-transform: uppercase; color: var(--red-text); }
.reader-story { font-family: var(--display); font-weight: 800; font-variation-settings: var(--wdth); font-size: var(--t-h3); line-height: 1; text-transform: uppercase; }
.reader-story a { text-decoration: none; }
.reader-story a:hover { color: var(--red-text); }
@media (min-width: 761px) {
  .reader-page { grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: end; }
  .reader-fig img { width: auto; max-width: 100%; height: calc(100svh - 190px); min-height: 420px; }
  .reader-type { width: auto; height: calc(100svh - 190px); min-height: 420px; }
}
/* The controls stay quiet: two bare arrows and a count, and a thin line of segments, one per page,
   that you can tap to jump. The page you're on is the red segment. Tapping the page itself turns it. */
.reader-controls { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); }
.reader-btn {
  position: relative; display: inline-grid; place-items: center; width: 52px; height: 52px; padding: 0;
  border: 1.5px solid var(--paper); border-radius: 50%; background: none; color: var(--paper); cursor: pointer;
  font: 400 1.5rem/1 var(--type); isolation: isolate; transition: color 0.2s, border-color 0.2s, transform 0.2s;
}
/* Round, full-strength arrows that read as buttons at a glance; red fill on hover and focus. */
.reader-btn::before { content: ""; position: absolute; inset: -1.5px; z-index: -1; border-radius: 50%; background: var(--red); transform: scale(0); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.reader-btn:hover, .reader-btn:focus-visible { border-color: var(--red); color: #fff; }
.reader-btn:hover::before, .reader-btn:focus-visible::before { transform: scale(1); }
.reader-btn:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.reader-count { font: 400 var(--t-small)/1 var(--type); letter-spacing: var(--track-caps); color: var(--paper); min-width: 5em; text-align: center; }
.reader-jump { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; max-width: 560px; }
.reader-dot { position: relative; display: block; height: 24px; }
.reader-dot::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px;
  background: rgba(241, 238, 232, 0.22); transition: background-color 0.25s, transform 0.25s;
}
.reader-dot:hover::before { background: rgba(241, 238, 232, 0.6); }
.reader-dot[aria-current="page"]::before { background: var(--red); transform: scaleY(2); }
/* A story with no photo yet opens like a printed type page: its number outlined in red, its title set
   big at the foot. Same shape and size as a page photo, so every turn of the reader feels the same. */
.reader-fig > a:not(.reader-type) { display: block; }
.reader-info .toc-meta { grid-column: auto; }
.reader-type {
  display: grid; align-content: space-between; aspect-ratio: 943 / 1400; width: 100%; padding: clamp(18px, 4%, 36px);
  background: var(--ink); border: 1px solid var(--line); text-decoration: none; container-type: inline-size;
}
.reader-type-no {
  font-family: var(--display); font-weight: 800; font-variation-settings: var(--wdth); font-size: 38cqi; line-height: 0.8;
  color: transparent; -webkit-text-stroke: 2px var(--red);
}
.reader-type-title { font-family: var(--display); font-weight: 800; font-variation-settings: var(--wdth); font-size: 15cqi; line-height: 0.9; text-transform: uppercase; color: var(--paper); text-wrap: balance; }
.reader-dek { font: 400 var(--t-body)/1.6 var(--type); color: #d8d3cc; max-width: 46ch; }
.reader-more { margin-top: var(--s-4); }
.reader-more a { color: var(--paper); }

/* ---------- Story ---------- */
.story { padding-bottom: var(--s-8); }
.story-body, .story-type { max-width: 900px; margin: 0 auto; padding-inline: calc(var(--gutter) + var(--spine-w)) var(--gutter); }
.story .eyebrow a { text-decoration: none; color: var(--red-text); }
.story .meta a { color: var(--paper); }

/* With a photo: the whole page, uncropped and square, with the title under it. On wide screens
   the (portrait) page sits on the left at screen height and the title beside it. */
.story-hero { display: grid; margin-bottom: var(--s-7); }
.story-hero-photo { padding-left: var(--spine-w); }
.story-hero-photo img { width: 100%; }
.story-hero-text { display: grid; gap: var(--s-3); padding: var(--s-5) var(--gutter) 0 calc(var(--gutter) + var(--spine-w)); }
.story-hero-credit { font: 400 var(--t-small)/1.5 var(--type); color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 8px; }
@media (min-width: 900px) {
  .story-hero { grid-template-columns: auto minmax(0, 1fr); align-items: end; }
  .story-hero-photo { padding-left: calc(var(--gutter) + var(--spine-w)); }
  .story-hero-photo img { width: auto; max-width: 48vw; max-height: calc(100svh - 120px); }
  .story-hero-text { padding: 0 var(--gutter) 0 clamp(24px, 4vw, 56px); }
}

/* Without a photo: the opening is type. The title huge, the page number (or contents number)
   outlined in red behind it, like a folio. */
.story-type { position: relative; display: grid; gap: var(--s-3); align-content: end; min-height: 62svh; padding-top: clamp(40px, 8vw, 96px); padding-bottom: clamp(32px, 6vw, 72px); margin-bottom: clamp(24px, 4vw, 48px); border-bottom: 1px solid var(--line); }
.story-type h1 { position: relative; }
.story-folio {
  position: absolute; top: clamp(8px, 3vw, 40px); right: var(--gutter);
  font-family: var(--display); font-weight: 800; font-variation-settings: var(--wdth);
  font-size: var(--t-display); line-height: 0.8; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 2px var(--red); opacity: 0.85;
}
.story-body { display: grid; gap: 1.2em; font: 400 var(--t-body)/1.7 var(--type); color: #d8d3cc; }
.story-body figure { margin: 1em 0; }
.dek { font: 400 var(--t-body)/1.7 var(--type); color: var(--paper); max-width: var(--measure); }
.pull p { font-family: var(--display); font-weight: 800; font-variation-settings: var(--wdth); font-size: var(--t-statement); line-height: 0.95; text-transform: uppercase; color: var(--paper); }
.pull { margin: 0.5em 0; }
.q { color: var(--red-text); }
.read-rest { margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--line); }

/* ---------- Artists ---------- */
.person-head { position: relative; display: grid; gap: var(--s-3); min-height: 56svh; align-content: end; }
.person-name { font-size: var(--t-h1); }
/* Long names (or handles) get smaller so they never break mid-word. */
.person-name.is-long { font-size: var(--t-h2); }
.person-meta { display: grid; gap: var(--s-3); justify-items: start; }
.person-line { font: 400 var(--t-lead)/1.4 var(--type); color: #d8d3cc; max-width: var(--measure-lead); }
/* With a photo: name and details on one side, the photo big on the other (photo first on a phone).
   They sit in their own columns, so the huge name never runs over the picture. */
.person-head.has-photo { min-height: 0; align-items: end; gap: var(--s-7); }
.person-text { display: grid; gap: var(--s-3); container-type: inline-size; }
.person-head.has-photo .person-name { font-size: min(var(--t-h1), 16cqi); }
.person-head.has-photo .person-name.is-long { font-size: min(var(--t-h2), 10cqi); }
.person-photo { margin: 0; }
.person-photo img { width: 100%; }
@media (min-width: 900px) { .person-head.has-photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 899px) { .person-head.has-photo .person-photo { order: -1; } }
/* Instagram: the @handle, then a small square Instagram button. The whole row is one link. */
.ig-row { display: inline-flex; align-items: center; gap: var(--s-3); min-height: 44px; text-decoration: none; font: 400 var(--t-body)/1 var(--type); color: var(--paper); }
.ig-button { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(241, 238, 232, 0.3); isolation: isolate; }
.ig-button svg { width: 18px; height: 18px; }
.ig-row:hover { color: var(--red-text); }
.ig-row:hover .ig-button { border-color: var(--red); }
.person-words .pull { margin: 0 0 var(--s-6); max-width: var(--measure); }
.person-words .pull footer { margin-top: var(--s-2); text-transform: none; }
.person-words .pull p { font: 400 var(--t-lead)/1.4 var(--type); text-transform: none; letter-spacing: 0; }

/* ---------- Shop ---------- */
.product-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px) clamp(12px, 2vw, 24px); }
@media (max-width: 760px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.product-card { display: grid; gap: var(--s-2); align-content: start; }
.product-card-title { font-family: var(--display); font-weight: 800; font-variation-settings: var(--wdth); font-size: var(--t-h3); line-height: 1; text-transform: uppercase; }
.product-photo { position: relative; }
/* Every piece shows whole: the frame keeps the grid even, the photo fits inside it uncropped. */
.product-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; background: var(--ink); }
/* A second photo shows on hover. */
.product-alt { position: absolute; inset: 0; opacity: 0; transition: opacity 0.35s ease; }
@media (hover: hover) { .product-card:hover .product-alt { opacity: 1; } }
.product-card-price { font: 400 var(--t-small)/1.5 var(--type); color: var(--muted); }
.product-card.is-sold .product-photo img, .product-card.is-sold .ph { opacity: 0.4; }
/* SOLD OUT, stamped on at an angle like a rubber stamp. */
.stamp {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-14deg);
  padding: 6px 14px; border: 3px solid var(--red); border-radius: 4px; color: var(--red-text);
  font: 700 var(--t-lead)/1 var(--type); letter-spacing: var(--track-caps); text-transform: uppercase; white-space: nowrap;
}
.sold { font: 700 var(--t-label)/1 var(--type); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--red-text); }

/* ---------- Event ---------- */
.event-head { display: grid; gap: clamp(28px, 5vw, 72px); align-items: end; }
.event-head.has-poster { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.event-head > div { display: grid; gap: var(--s-3); }
.event-poster { max-width: 480px; }
@media (max-width: 760px) { .event-head.has-poster { grid-template-columns: 1fr; } }
.event-date {
  font-family: var(--display); font-weight: 800; font-variation-settings: var(--wdth);
  font-size: var(--t-display); line-height: 0.85; text-transform: uppercase; color: var(--red);
}
a.next-card { text-decoration: none; transition: transform 0.3s; }
a.next-card:hover { transform: translateY(-4px); }

/* ---------- Share ---------- */
.button-big { min-height: 60px; padding: 0 30px; font-size: var(--t-body); }
.share-door { min-height: calc(100svh - 72px); align-content: center; }
.share-door .invite-text { gap: 22px; }
.share-door .mission { margin: 0; font: 400 var(--t-statement)/1.1 var(--type); letter-spacing: var(--track-tight); text-transform: none; max-width: 15ch; }

/* ---------- Contact form (Share page) ----------
   Ian's block while Jameson works on home (Nov 3). Two numbered groups, small typewriter labels,
   square boxes, the guiding comet in Dirtbag red. Words beside the form on wide screens, above it
   on a phone. No photos in here. */
.contact {
  display: grid; gap: clamp(36px, 6vw, 72px); align-items: start;
  max-width: 1400px; margin: 0 auto; padding-block: clamp(72px, 10vw, 140px);
  scroll-margin-top: 72px;
}
.contact [hidden] { display: none !important; }
.contact-side { display: grid; gap: var(--s-4); justify-items: start; min-width: 0; }
.contact-side h2 { max-width: 9ch; }
.contact-direct { margin: 12px 0 0; display: grid; gap: 18px; }
.contact-direct dd { margin: var(--s-1) 0 0; font: 400 var(--t-body)/1.4 var(--type); overflow-wrap: anywhere; }
.contact-direct a { text-decoration: none; }
.contact-direct a:hover { color: var(--red-text); }
@media (min-width: 900px) {
  .contact { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .contact-form, .contact-sent { grid-column: 2; grid-row: 1; }
  .contact-side { position: sticky; top: 104px; }
}

.contact-form { display: grid; gap: var(--s-6); min-width: 0; }
.contact-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.contact-group { display: grid; gap: var(--s-5); }
.contact-group > legend {
  float: left; width: 100%; padding: 0 0 var(--s-3); margin-bottom: var(--s-1); border-bottom: 1px solid var(--line);
  font-family: var(--display); font-weight: 800; font-variation-settings: var(--wdth); font-size: var(--t-h3); line-height: 1; text-transform: uppercase;
}
.contact-group > legend + * { clear: both; }
.contact-no { color: var(--red-text); margin-right: 0.35em; }
.contact-label { display: block; padding: 0; margin-bottom: var(--s-2); font: 400 var(--t-label)/1.3 var(--type); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); }
.contact-hint { font: 400 var(--t-small)/1.5 var(--type); letter-spacing: 0; text-transform: none; color: var(--muted); }
legend .contact-hint { margin-left: 0.5em; }
.field { display: grid; gap: 0; min-width: 0; }
.field .contact-hint { margin-top: var(--s-2); }
.field-pair { display: grid; gap: var(--s-5); }
@media (min-width: 600px) { .field-pair { grid-template-columns: 1fr 1fr; } }

/* The boxes: square, ink on charcoal, a red edge when you're in one. */
.box { position: relative; }
.contact-form :is(input[type="text"], input[type="email"], textarea) {
  display: block; width: 100%; margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 0;
  background: var(--ink); color: var(--paper); font: 400 1rem/1.5 var(--body);  /* 16px: iPhone Safari doesn't zoom in */
  -webkit-appearance: none; appearance: none; transition: border-color 0.2s;
}
.contact-form textarea { min-height: 150px; resize: vertical; }
.contact-form :is(input, textarea)::placeholder { color: var(--muted); opacity: 0.6; }
.contact-form :is(input, textarea):focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(212, 42, 48, 0.25); }
.contact-form :is(input, textarea):focus-visible { outline: none; }

/* Dropdowns: the same square box, with our own arrow (the browser's looks different everywhere). */
.contact-form select {
  display: block; width: 100%; margin: 0; padding: 14px 44px 14px 16px; border: 1px solid var(--line); border-radius: 0;
  background: var(--ink); color: var(--paper); font: 400 1rem/1.5 var(--body); cursor: pointer;
  -webkit-appearance: none; appearance: none; transition: border-color 0.2s;
}
.contact-form select:invalid, .contact-form select:has(option[value=""]:checked) { color: var(--muted); }
.contact-form option { color: var(--charcoal); background: var(--paper); }
@media (hover: hover) { .contact-form select:hover { border-color: rgba(241, 238, 232, 0.5); } }
.contact-form select:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(212, 42, 48, 0.25); }
.select-arrow { position: absolute; right: 16px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--muted); pointer-events: none; }
.box-select:focus-within .select-arrow { color: var(--red-text); }

.contact-send { justify-self: start; position: relative; }
.contact-send .button span[aria-hidden] { margin-left: 10px; display: inline-block; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
@media (hover: hover) { .motion .contact-send .button:hover span[aria-hidden] { transform: translateX(5px); } }
.contact-form.is-sending .button { opacity: 0.6; cursor: progress; }
.contact-error { padding: 14px 16px; border: 1px solid var(--red); background: rgba(212, 42, 48, 0.12); font: 400 var(--t-small)/1.5 var(--type); }
.contact-error a { color: #fff; overflow-wrap: anywhere; }
.contact-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Sent: takes the form's place. */
.contact-sent { position: relative; display: grid; gap: var(--s-3); align-content: start; padding: clamp(28px, 5vw, 48px); border: 1px solid var(--line); outline: none; }
.contact-sent h3 { font-size: var(--t-h2); line-height: 0.9; color: var(--red); }
.contact-sent p { font: 400 var(--t-body)/1.6 var(--type); }

/* The guide: a red comet circling the edge of the next box to fill in (or Send), right on its border,
   with a soft glow.
   Like the contact form on ianmalone.com. Without motion it's a still red edge. */
@property --orbit { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.is-guide::before, .contact-send::before {
  content: ""; position: absolute; inset: 0; z-index: 1; padding: 1.5px; pointer-events: none;
  background: rgba(212, 42, 48, 0.7);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.motion .is-guide::before, .motion .contact-send::before {
  background: conic-gradient(from var(--orbit), transparent 0deg 200deg, rgba(212, 42, 48, 0.5) 290deg, #ff6b3d 340deg, #ffc49a 355deg, transparent 360deg);
  animation: orbit 3.6s linear infinite;
}
.motion .is-guide::after, .motion .contact-send::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: 0 0 22px -4px rgba(212, 42, 48, 0.6); animation: guide-breathe 3.6s ease-in-out infinite;
}
/* Send always has its comet, whatever box the guide is on. Send is solid red, so a red comet on its edge
   disappears: on Send it runs in paper white instead, still right on the edge. Literal colours, since
   pages remap --paper (on Share it's near black). */
.contact-form .contact-send::before { padding: 2px; background: rgba(241, 238, 232, 0.85); }
.motion .contact-form .contact-send::before {
  background: conic-gradient(from var(--orbit), transparent 0deg 200deg, rgba(241, 238, 232, 0.35) 290deg, #f1eee8 340deg, #fff 355deg, transparent 360deg);
}
@keyframes orbit { to { --orbit: 360deg; } }
@keyframes guide-breathe { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

/* ---------- Footer ---------- */
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-1) var(--s-5); margin-bottom: var(--s-2); }
.footer-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 400 var(--t-label)/1 var(--type); letter-spacing: var(--track-caps); text-transform: uppercase; text-decoration: none;
}
.footer-nav a:hover, .footer-line a:hover { color: var(--red-text); }
.site-footer {
  display: grid; justify-items: center; gap: var(--s-3); text-align: center;
  padding: 64px var(--gutter) calc(40px + env(safe-area-inset-bottom, 0px)) calc(var(--gutter) + var(--spine-w));
  background: var(--charcoal);
}
.footer-mark { display: block; width: 120px; height: 41px; margin: 0 auto var(--s-2); }
.footer-line { font: 400 var(--t-small)/1.5 var(--type); color: var(--muted); }

/* Designer credit: "Website designed by" plus Ian's signature as the link. The signature is an
   inline SVG filled with currentColor, so it takes the link color like text. */
.footer-credit {
  margin-top: var(--s-5);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem 0.6rem;
  font: 400 var(--t-label)/1.3 var(--type); letter-spacing: var(--track-caps); text-transform: uppercase;
  color: rgba(241, 238, 232, 0.7);
}
.footer-sig {
  position: relative; display: inline-flex; align-items: center; padding-bottom: 0.3rem;
  color: rgba(241, 238, 232, 0.9); text-decoration: none; transition: color 0.2s;
}
.footer-sig-mark { display: block; flex: none; width: 8.16rem; height: 1.35rem; fill: currentColor; }  /* 5169 × 855 */
.footer-sig:hover, .footer-sig:focus-visible { color: #fff; }
.footer-name { white-space: nowrap; letter-spacing: var(--track-caps); color: rgba(241, 238, 232, 0.9); padding-bottom: 0.3rem; }
.footer-sig::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: 0;
  height: 1px; background: currentColor; opacity: 0.45;
  transition: left 0.25s, right 0.25s, opacity 0.25s;
}
.footer-sig:hover::after, .footer-sig:focus-visible::after { left: 0; right: 0; opacity: 0.9; }

/* ---------- Scroll reveal: transform and opacity only ---------- */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Motion: buttons, prints, the emblem ----------
   All of it hangs off html.motion, which main.js sets only when the visitor hasn't asked for reduced
   motion, so switching that on turns every piece of this off. Moving parts use transform and opacity;
   the flowing button colour moves a background, on hover only. */

/* Outlined buttons fill with red ink from the left on hover, like a squeegee pass. */
.site-nav a, .filter, .button-line { isolation: isolate; }
.motion .ig-button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--red); transform: scaleX(0); transform-origin: left center; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
@media (hover: hover) { .motion .ig-row:hover .ig-button { color: #fff; } .motion .ig-row:hover .ig-button::before { transform: scaleX(1); } }
.button-line { position: relative; }
.motion :is(.site-nav a, .filter, .button-line)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--red);
  transform: scaleX(0); transform-origin: left center; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.motion :is(.site-nav a, .filter, .button) { transition: transform 0.15s ease, color 0.2s, border-color 0.2s, background-color 0.2s; }
@media (hover: hover) {
  .motion :is(.site-nav a:not(.nav-shop), .site-nav .nav-shop[aria-current], .filter:not([aria-pressed="true"]), .button-line):hover { color: #fff; border-color: var(--red); background: none; }
  .motion :is(.site-nav a:not(.nav-shop), .site-nav .nav-shop[aria-current], .filter:not([aria-pressed="true"]), .button-line):hover::before { transform: scaleX(1); }
}

/* Filled red buttons: on hover a hotter red flows through them, left to right, over and over. */
.motion :is(.button:not(.button-off):not(.button-line), .site-nav .nav-shop:not([aria-current])) {
  background-image: linear-gradient(100deg, var(--red) 0%, var(--red) 30%, #ff6b3d 45%, #ff9a5c 50%, #ff6b3d 55%, var(--red) 70%, var(--red) 100%);
  background-size: 300% 100%; background-position: 100% 0;
}
@media (hover: hover) {
  .motion :is(.button:not(.button-off):not(.button-line), .site-nav .nav-shop:not([aria-current])):hover { animation: flow 1.4s linear infinite; color: #fff; }
}
@keyframes flow { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* Every button gives a little when pressed. */
.motion :is(.button:not(.button-off), .site-nav a, .filter, .reader-btn):active { transform: scale(0.96); }

/* Arrows lean the way they point. */
@media (hover: hover) { .motion .reader-prev:hover { transform: translateX(-4px); } .motion .reader-next:hover { transform: translateX(4px); } }
.more span[aria-hidden] { display: inline-block; }
.motion .more span[aria-hidden] { display: inline-block; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
@media (hover: hover) { .motion .more:hover span[aria-hidden] { transform: translateX(5px); } }

/* The header emblem lifts when you point at it. */
.motion .brand-mark { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
@media (hover: hover) { .motion .brand:hover .brand-mark { transform: translateY(-2px) scale(1.06); } }

/* Photos marked .stencil pull in like a screen print: a charcoal sheet slides off with a red squeegee edge. */
.stencil-print { position: relative; overflow: hidden; }
.motion .stencil-print::after {
  content: ""; position: absolute; inset: 0; background: var(--charcoal); box-shadow: -8px 0 0 var(--red);
  transform: translateX(0); transition: transform 1.1s cubic-bezier(0.7, 0, 0.2, 1) 0.2s;
}
.motion .stencil.is-in .stencil-print::after { transform: translateX(calc(100% + 10px)); }

/* The issue's pages on home arrive one after another. */
.motion .home-page.reveal:nth-child(even) { transition-delay: 0.1s; }
/* Artist names hop when you point at them. */
.motion .poster a { display: inline-block; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s; }
@media (hover: hover) { .motion .poster a:hover { transform: translateY(-4px); } }

/* Reader: the page's number, story and credit rise in as each page arrives. */
.motion .reader-info > * { transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.motion .reader-page:not(.is-current) .reader-info > * { opacity: 0; transform: translateY(14px); }
.motion .reader-page.is-current .reader-info > :nth-child(2) { transition-delay: 0.06s; }
.motion .reader-page.is-current .reader-info > :nth-child(3) { transition-delay: 0.12s; }
.motion .reader-page.is-current .reader-info > :nth-child(4) { transition-delay: 0.18s; }

/* ---------- Colour that moves on its own (not only on hover) ---------- */
/* The mission line: each word lands in red, then cools to off-white. */
.motion .mission .w.is-lit { animation: ink-cool 1.2s ease-out both; }
@keyframes ink-cool { from { color: #ff6b3d; } 35% { color: var(--red); } to { color: var(--paper); } }
/* Filled red buttons: a hot glint crosses every few seconds (hover makes it flow constantly). */
.motion :is(.button:not(.button-off):not(.button-line), .site-nav .nav-shop:not([aria-current])) { animation: glint 5s ease-in-out 2s infinite; }
@keyframes glint { 0% { background-position: 100% 0; } 30%, 100% { background-position: 0 0; } }
/* The spine: heat runs slowly down the red as you read. */
.motion .spine-fill {
  background: linear-gradient(180deg, var(--red) 0%, #ff6b3d 12%, var(--red) 24%, var(--red) 100%);
  background-size: 100% 300%; animation: spine-heat 6s linear infinite;
}
@keyframes spine-heat { from { background-position: 0 100%; } to { background-position: 0 0; } }
/* The reader's page number shimmers red to orange. */
.motion .reader-no {
  background: linear-gradient(100deg, var(--red) 0%, var(--red) 40%, #ff6b3d 50%, var(--red) 60%, var(--red) 100%);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: glint 4s ease-in-out infinite;
}

/* ---------- Phones: buttons show themselves before you touch them ----------
   There's no hover on a phone, so each button plays its hover look by itself as it comes into view
   (main.js adds .is-shown, staggered): red ink sweeps through the outlined ones, a hot flow runs through
   the red ones, the arrows nudge. Like the PHOTO / DESIGN buttons on ianmalone.com. A press is only a
   small give. */
a, button { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  :is(.button, .site-nav a, .filter, .reader-btn, .ig-button, .poster a) { transition: transform 0.15s ease; }
  :is(.button:not(.button-off), .site-nav a, .filter, .reader-btn, .ig-row .ig-button):active { transform: scale(0.96); }
  .more:active span[aria-hidden] { transform: translateX(5px); }

  .motion :is(.site-nav a:not(.nav-shop):not([aria-current]), .filter:not([aria-pressed="true"]), .button-line).is-shown { animation: ink-text 1.5s ease; }
  .motion :is(.site-nav a:not(.nav-shop):not([aria-current]), .filter:not([aria-pressed="true"]), .button-line).is-shown::before { animation: ink-pass 1.5s cubic-bezier(0.65, 0, 0.35, 1) both; }
  .motion .ig-row.is-shown .ig-button { animation: ink-text 1.5s ease; }
  .motion .ig-row.is-shown .ig-button::before { animation: ink-pass 1.5s cubic-bezier(0.65, 0, 0.35, 1) both; }
  .motion .reader-btn.is-shown::before { animation: ring-pass 1.4s cubic-bezier(0.65, 0, 0.35, 1) both; }
  .motion .reader-btn.is-shown { animation: ink-text 1.4s ease; }
  .motion :is(.button:not(.button-off):not(.button-line), .site-nav .nav-shop:not([aria-current])).is-shown { animation: flow 1.2s linear 2, glint 5s ease-in-out 4s infinite; }
  .motion .more.is-shown span[aria-hidden] { animation: nudge 1.2s ease-in-out 2; }
}
@keyframes ink-pass {
  0% { transform: scaleX(0); transform-origin: left center; }
  40%, 55% { transform: scaleX(1); transform-origin: left center; }
  56% { transform: scaleX(1); transform-origin: right center; }
  100% { transform: scaleX(0); transform-origin: right center; }
}
@keyframes ring-pass { 0%, 100% { transform: scale(0); } 45%, 60% { transform: scale(1); } }
@keyframes ink-text { 35%, 60% { color: #fff; } }
@keyframes nudge { 0%, 100% { transform: none; } 50% { transform: translateX(5px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rag-flip, .home-page img { transition: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}
.lineup-poster > .meta { text-align: center; }

/* ---------- Page grounds ----------
   Each page has a ground of its own, from the same palette (charcoal, red, paper), by remapping the colour
   variables. build.mjs puts data-page on <html>. */
html[data-page="issue-01"], html[data-page="story"] { --charcoal: #0e0d0e; }                                                  /* ink black */
html[data-page="artists"], html[data-page="artist"] { --red-text: #fff; --charcoal: #991e21; --paper: #fff; --muted: #f3d3d4; --line: rgba(255, 255, 255, 0.35); --red: #1a1819; }  /* spine red */
html[data-page="share"] { --red-text: #b01f25; --charcoal: #f1eee8; --paper: #121112; --muted: #5b5557; --line: rgba(18, 17, 18, 0.18); } /* paper */
html[data-page="support"], html[data-page="marketplace"] { --charcoal: #2b1112; --muted: #cfaeaf; --line: rgba(241, 238, 232, 0.2); }                          /* oxblood */
html[data-page], html[data-page] body { background: var(--charcoal); color: var(--paper); }
html[data-page] :is(.cover-kicker, .intro-body, .reader-dek, .story-body, .person-line, .home-signoff) { color: var(--paper); }
html[data-page="share"] :is(h1, h2, h3, .eyebrow) { color: var(--paper); }

/* Header: no background; every link sits on its own backing so it reads on any ground. */
html[data-page] .site-header { background: transparent; border-bottom-color: transparent !important; }
html[data-page] .site-nav a:not(.nav-shop) { background: color-mix(in srgb, var(--charcoal) 90%, transparent); border-color: color-mix(in srgb, var(--paper) 60%, transparent); color: var(--paper); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
html[data-page] .site-nav .nav-shop { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
/* Tab size on computers and tablets. Phones keep the site's own compact tabs (see the max-width: 520px rule above). */
@media (min-width: 521px) { html[data-page] .site-nav a { min-height: 34px; padding: 0 12px; } }
@media (max-width: 520px) { html[data-page] .site-nav a { min-height: 30px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3); } }
html[data-page="artists"] .site-nav .nav-shop, html[data-page="artist"] .site-nav .nav-shop, body.on-red .site-nav .nav-shop { background: #fff !important; border-color: #fff !important; color: #991e21 !important; }
body.on-paper .site-nav a:not(.nav-shop) { background: rgba(241, 238, 232, 0.92); border-color: rgba(18, 17, 18, 0.55); color: #121112; }
html[data-page="share"] .brand-mark, .brand-mark { filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.6)); }

/* Inner pages: roomy sections, each starting with a red rule; each page its own shape. */
html[data-page]:not([data-page="home"]) main > section > :is(.section-head, .home-head, header):first-child { border-top: 3px solid var(--red); padding-top: var(--s-4); }
html[data-page="artists"] main > section > :is(.section-head, .home-head, header):first-child, html[data-page="artist"] main > section > :is(.section-head, .home-head, header):first-child { border-top-color: #fff; }
html[data-page="issue-01"] .reader-head { min-height: 0; padding-bottom: 0; }
html[data-page="issue-01"] .stories { background: #181617; box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.5); }
html[data-page="artists"] main > section { text-align: center; }
html[data-page="artists"] .button, html[data-page="artist"] .button { background: #1a1819; color: #fff; border: 2px solid #fff; }
html[data-page="share"] .button { min-height: 60px; padding: 0 30px; font-size: var(--t-body); }
/* Ian's contact form on the paper ground: light boxes with dark text (its boxes are ink with paper text by default). */
html[data-page="share"] .contact-form :is(input[type="text"], input[type="email"], textarea, select) { background: #fff; color: #121112; border-color: rgba(18, 17, 18, 0.35); }
html[data-page="share"] .contact-form option { color: #121112; background: #fff; }
html[data-page="support"] main > section, html[data-page="marketplace"] main > section { border-top: 0; }
html[data-page="support"] main > section > :is(.section-head, .home-head, header):first-child, html[data-page="marketplace"] main > section > :is(.section-head, .home-head, header):first-child { border-top: 0; padding-top: 0; }
html[data-page] .site-footer { --charcoal: #0e0d0e; --paper: #f1eee8; --muted: #9a9592; --line: rgba(241, 238, 232, 0.14); background: #0e0d0e; color: #f1eee8; padding-block: clamp(48px, 7vw, 96px); }
html[data-page] .site-footer :is(a, p) { color: inherit; }

/* ---------- Home: the pinned hero and the sections that follow ---------- */
.hf-rail { position: fixed; right: clamp(10px, 1.6vw, 20px); top: 50%; transform: translateY(-50%); z-index: 22; display: grid; gap: 14px; pointer-events: none; filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.45)); }
.hf-rail i { display: block; width: 12px; height: 2px; background: #fff; opacity: 0.35; justify-self: end; transition: width 0.3s ease, opacity 0.3s ease; }
.hf-rail i[aria-current="true"] { width: 26px; opacity: 0.95; }
body.on-paper .hf-rail { filter: none; }
body.on-paper .hf-rail i { background: #121112; }
.hf-hero { position: sticky; top: 0; padding-inline: 0; height: 100svh; display: grid; grid-template-rows: auto minmax(0, 1fr); padding-top: calc(66px + env(safe-area-inset-top, 0px)); background: var(--charcoal); overflow: clip; }
.hf-top { display: grid; justify-items: center; gap: var(--s-3); padding: 14px var(--gutter) 20px calc(var(--gutter) + var(--spine-w)); will-change: transform, opacity; }
.hf-top img { width: min(150px, 34vw); height: auto; }
/* The masthead is the one exception to the scale: it sets the site's name as big as the screen allows. */
.hf-title { margin: 0; font: 400 clamp(2.2rem, 0.6rem + 7.4vw, 8rem)/1.05 var(--type); font-variation-settings: normal; text-transform: uppercase; letter-spacing: 0.04em; color: #fff; text-align: center; text-wrap: balance; }
.hf-photo { position: relative; overflow: clip; min-height: 0; }
.hf-photo img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; object-position: 50% 35%; will-change: transform; transform: translate3d(0, calc(var(--sy, 0) * 1%), 0) scale(1.05); }
.hf-sec { position: relative; z-index: 5; padding: var(--s-8) var(--gutter) var(--s-8) calc(var(--gutter) + var(--spine-w)); }
.hf-about { background: var(--charcoal); color: var(--paper); min-height: 72svh; display: grid; align-content: center; gap: var(--s-5); border-top: 3px solid var(--red); }
.hf-issue, .hf-find { background: var(--paper); color: #121112; box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.45); }
.hf-artists { background: var(--charcoal); color: var(--paper); }
.hf-share { background: var(--spine); color: #fff; }
.hf-eyebrow { margin: 0; font: 400 var(--t-label)/1.3 var(--type); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--red-text); }
.hf-quote { font: 400 var(--t-statement)/1.1 var(--type); letter-spacing: var(--track-tight); margin: 0; max-width: var(--measure-statement); }
.hf-body { font: 400 var(--t-lead)/1.4 var(--type); color: #d8d3cc; max-width: var(--measure-lead); margin: 0; }
.hf-break { display: grid; gap: var(--s-3); padding-top: var(--s-4); margin: 0 0 var(--s-6); border-top: 3px solid var(--red); }
.hf-share .hf-break { border-top-color: #fff; }
.hf-break h2 { margin: 0; }
.hf-facts { margin: 0; font: 400 var(--t-label)/1.3 var(--type); letter-spacing: var(--track-caps); text-transform: uppercase; opacity: 0.7; }
.hf-more { margin: var(--s-5) 0 0; font: 400 var(--t-small)/1.4 var(--type); }
.hf-more a { text-underline-offset: 4px; }
.hf-row { display: grid; grid-auto-flow: column; grid-auto-columns: min(62vw, 300px); gap: var(--s-4); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding: 14px var(--gutter) 18px calc(var(--gutter) + var(--spine-w)); margin: 0 calc(var(--gutter) * -1) 0 calc((var(--gutter) + var(--spine-w)) * -1); scroll-padding-inline: calc(var(--gutter) + var(--spine-w)); scrollbar-width: none; }
.hf-row::-webkit-scrollbar { display: none; }
.hf-card { scroll-snap-align: start; display: grid; gap: var(--s-2); align-content: start; color: inherit; text-decoration: none; }
.hf-card img { width: 100%; height: auto; aspect-ratio: 943 / 1400; }
.hf-card b { font: 800 var(--t-h3)/1 var(--display); font-variation-settings: var(--wdth); text-transform: uppercase; }
.hf-card small { color: #5b5557; font: 400 var(--t-small)/1.4 var(--type); }
.hf-names { font: 800 var(--t-statement)/0.95 var(--display); font-variation-settings: var(--wdth); text-transform: uppercase; display: flex; flex-wrap: wrap; gap: var(--s-1) 0.4em; margin: 0; padding: 0; list-style: none; }
.hf-names li { padding-block: var(--s-1); }
.hf-names a { text-decoration: none; }
.hf-names li:nth-child(even) { -webkit-text-stroke: 1.5px var(--paper); color: transparent; }
/* The one big line in a section: typewriter, sentence case, always under the heading. */
.hf-big { font: 400 var(--t-statement)/1.1 var(--type); letter-spacing: var(--track-tight); margin: 0 0 var(--s-6); max-width: var(--measure-statement); }
/* Find us: one group. The Instagram handle and the email, tight together, then the sign-off. */
.hf-contact { display: grid; gap: var(--s-2); justify-items: start; }
.hf-contact a { font: 400 var(--t-lead)/1.3 var(--type); text-underline-offset: 0.2em; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.hf-contact a:hover { color: var(--red-text); }
.hf-signoff { margin: var(--s-6) 0 0; font: 400 var(--t-body)/1.6 var(--type); color: #5b5557; }
.hf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); }
.hf-share .button { background: #1a1819; color: #fff; border: 2px solid #fff; min-height: 60px; padding: 0 30px; font-size: var(--t-body); }
.hf-share .button::after { content: " \2192"; white-space: pre; }
body.is-home main { padding-top: 0; }
/* The home does not react to the mouse. Scroll effects only. */
html body.is-home .site-nav a:not(.nav-shop):hover { border-color: color-mix(in srgb, var(--paper) 60%, transparent); color: var(--paper); background: color-mix(in srgb, var(--charcoal) 90%, transparent); animation: none; }
html body.is-home.on-paper .site-nav a:not(.nav-shop):hover { background: rgba(241, 238, 232, 0.92); border-color: rgba(18, 17, 18, 0.55); color: #121112; }
html body.is-home .site-nav .nav-shop:hover, html body.is-home .button:hover { animation: none; background-color: var(--red); color: #fff; }
html body.is-home.on-red .site-nav .nav-shop:hover { background: #fff; color: #991e21; }
html body.is-home .hf-share .button:hover { background: #1a1819; color: #fff; }
@media (max-width: 700px) {
  .hf-hero { padding-top: calc(100px + env(safe-area-inset-top, 0px)); }
  .hf-top img { width: min(120px, 30vw); }
  .hf-photo img { object-position: 50% 50%; }
  .hf-sec { padding-right: 44px; }
  .hf-row { margin-right: -44px; }
}

/* ---------- The tab for the page you're on ----------
   The page you're on is filled in the page's own text colour, with the page colour as its text, so it's the one
   solid tab in the bar on every page and ground. The other tabs stay outlined. On the red pages, Support turns
   charcoal so it can't be mistaken for the current tab. */
html[data-page] .site-nav a[aria-current="page"],
html[data-page] .site-nav a[aria-current="page"]:hover,
html[data-page] .site-nav .nav-shop[aria-current="page"] {
  background: var(--paper) !important; border-color: var(--paper) !important; color: var(--charcoal) !important;
  font-weight: 700; animation: none;
}
html[data-page="artists"] .site-nav .nav-shop:not([aria-current]), html[data-page="artist"] .site-nav .nav-shop:not([aria-current]),
body.on-red .site-nav .nav-shop:not([aria-current]) { background: #1a1819 !important; border-color: #fff !important; color: #fff !important; }

/* ---------- Issue 01: the heading flows straight into the reader ---------- */
.reader-intro { margin: var(--s-4) 0 0; max-width: 44ch; font: 400 var(--t-lead)/1.4 var(--type); color: var(--paper); }
html[data-page="issue-01"] main > section.reader-head { min-height: 0; padding-top: clamp(96px, 12vw, 150px); padding-bottom: clamp(20px, 3vw, 32px); }
html[data-page="issue-01"] main > section.reader { min-height: 0; padding-top: 0; padding-bottom: clamp(64px, 10vw, 120px); }

/* ---------- Phones: a burger that drops down the tabs (computers keep the row of tabs) ---------- */
.nav-burger { display: none; }
@media (max-width: 520px) {
  .nav-burger {
    display: inline-grid; align-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 11px; margin-left: auto; cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--paper) 60%, transparent); background: color-mix(in srgb, var(--charcoal) 90%, transparent);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3); -webkit-tap-highlight-color: transparent;
  }
  .nav-burger span { display: block; height: 2px; background: var(--paper); transition: transform 0.25s ease, opacity 0.2s ease; }
  .site-header.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-header.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
  .site-header.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .site-header .site-nav {
    display: none; position: absolute; top: calc(100% - 6px); right: 12px; width: min(280px, calc(100vw - 24px)); z-index: 25;
    flex-direction: column; align-items: stretch; gap: 8px; padding: 12px;
    background: var(--charcoal); border: 1px solid color-mix(in srgb, var(--paper) 30%, transparent); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  }
  .site-header.nav-open .site-nav { display: flex; }
  /* Full names in the dropdown, big tap targets, and the page you're on filled in. */
  html[data-page] .site-header .site-nav a { min-height: 48px; padding: 0 14px; font-size: var(--t-small); justify-content: flex-start; box-shadow: none; }
  .site-header .site-nav .nav-long { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .site-header .site-nav .nav-short { display: none; }
  html[data-page] .site-header .site-nav a:not([aria-current="page"]):not(.nav-shop) { background: transparent !important; color: var(--paper) !important; border-color: color-mix(in srgb, var(--paper) 45%, transparent) !important; }
  .site-header .site-nav a::after { inset: 0; }
}

/* ---------- iPhone and other phones: less empty space, the brand palette only, less crowding ----------
   Phones only (computers are untouched). The pages' roomy minimum heights were leaving screens of blank charcoal, so
   sections now take just the room their content needs. The orange heat accents become the palette reds (emblem red and
   spine red), and the preview-only yellow tags become plain outlined tags (the red DRAFT pills already match the palette). */
@media (max-width: 520px) {
  /* Space */
  html[data-page="issue-01"] main > section.reader-head { padding-top: 20px; padding-bottom: 16px; }
  html[data-page="issue-01"] main > section.reader { padding-bottom: 32px; }
  html[data-page] .site-footer { padding-block: 36px; }
  .hf-about { min-height: 0; }
  .hf-row { margin-right: calc(var(--gutter) * -1); }
  .hf-rail { display: none; }   /* the side dashes crowd a small screen */
  /* The palette only: no orange. */
  .motion :is(.button:not(.button-off):not(.button-line), .site-nav .nav-shop:not([aria-current])) {
    background-image: linear-gradient(100deg, var(--red) 0%, var(--red) 30%, var(--spine) 50%, var(--red) 70%, var(--red) 100%);
  }
  .motion .spine-fill { background: linear-gradient(180deg, var(--red) 0%, var(--spine) 12%, var(--red) 24%, var(--red) 100%); background-size: 100% 300%; }
  .motion .reader-no { background: linear-gradient(100deg, var(--red) 0%, var(--red) 40%, var(--spine) 50%, var(--red) 60%, var(--red) 100%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; }
  .motion .is-guide::before { background: conic-gradient(from var(--orbit), transparent 0deg 200deg, rgba(212, 42, 48, 0.5) 290deg, var(--red) 340deg, var(--paper) 355deg, transparent 360deg); }
  .hidden-tag { background: transparent; color: inherit; border: 1px solid currentColor; }   /* preview-only tag */
  .is-off { outline-color: var(--paper); }
}


/* ---------- Share page: title, tagline, the three photos, then the form. No repeats, no empty gaps. ---------- */
html[data-page="share"] main > section { min-height: 0; display: block; }
html[data-page="share"] main > section.share-top { max-width: 1400px; margin: 0 auto; padding-bottom: 0; display: grid; gap: var(--s-3); }
.share-title { margin: 0; }
.share-tagline { margin: 0; font: 400 var(--t-lead)/1.4 var(--type); max-width: var(--measure-lead); }
.share-welcome { margin: 0; font: 400 var(--t-body)/1.6 var(--type); color: var(--muted); max-width: var(--measure); }
.share-top .invite-pages { margin: var(--s-5) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 2vw, 22px); align-items: start; max-width: 900px; }
.share-top .invite-page:nth-child(n) { margin-top: 0; }
html[data-page="share"] main > section.contact { padding-top: var(--s-6); padding-bottom: var(--s-7); gap: var(--s-6); }
/* Just our Instagram and our email, centred, no labels. */
.reach { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-1) var(--s-6); width: 100%; }
.reach .ig-handle { min-width: 0; overflow-wrap: anywhere; }
.reach .ig-button { flex: none; }
/* The email: click the address to write to us, or the button beside it to copy it. */
.reach-mail { display: inline-flex; align-items: center; gap: var(--s-3); min-height: 44px; font: 400 var(--t-body)/1 var(--type); color: var(--paper); }
.reach-mail a { color: inherit; text-decoration: none; }
.reach-mail a:hover { color: var(--red-text); }
.reach-copy { padding: 0; background: none; color: inherit; cursor: pointer; }
.reach-copy svg + svg, .reach-copy.is-copied svg:first-child { display: none; }
.reach-copy.is-copied svg + svg { display: block; }
.reach-copy.is-copied { border-color: var(--red); color: var(--red-text); }
@media (hover: hover) {
  .reach-copy:hover { border-color: var(--red); }
  .motion .reach-copy:hover { color: #fff; }
  .motion .reach-copy:hover::before { transform: scaleX(1); }
}
/* Ian: the side doesn't stick, since stuck it slid over the form's labels as you scrolled. */
html[data-page="share"] .contact-side { position: static; }
@media (max-width: 520px) {
}

/* The contact section keeps its two columns on wide screens (Socials and Contact on the left, the form on the right). */
@media (min-width: 900px) { html[data-page="share"] main > section.contact { display: grid; } }


/* ---------- Home: About us ---------- */
.hf-aboutus { --muted: #5b5557; --red-text: #b01f25; background: var(--paper); color: #121112; box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.45); min-height: 0; }
.hf-message { margin: 0 0 var(--s-7); max-width: var(--measure-statement); font: 400 var(--t-statement)/1.1 var(--type); letter-spacing: var(--track-tight); }
.hf-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-7); max-width: 1100px; }
.hf-point { display: grid; gap: var(--s-3); align-content: start; padding-top: var(--s-3); border-top: 2px solid #121112; }
.hf-point h3 { margin: 0; }
.hf-point p { margin: 0; font: 400 var(--t-body)/1.6 var(--type); max-width: 44ch; }
.hf-point .button { margin-top: 6px; }
@media (max-width: 700px) {
  .hf-points { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* The tagline animation on phones: red, then off-white (no orange, to stay on the palette). */
@media (max-width: 520px) { @keyframes ink-cool { from { color: var(--red); } 35% { color: var(--red); } to { color: var(--paper); } } }

/* The home line (Ian, Nov 4): each word waits in grey, fills red as the scroll reaches it, then turns white. */
.motion .hf-quote .w.is-lit { animation: ink-red-white 1.2s ease-out both; }
@keyframes ink-red-white { 0%, 35% { color: var(--red); } to { color: var(--paper); } }

/* A short description under a story's title (it doesn't give the story away). */
.story-teaser { margin: var(--s-2) 0 0; max-width: var(--measure-lead); font: 400 var(--t-lead)/1.4 var(--type); color: var(--paper); }
.story-type .story-teaser { margin-top: var(--s-2); }


/* ---------- One tight flow on every inner page (all widths) ----------
   No tall minimum heights, small even gaps between sections. The first section only clears the fixed tabs. */
html[data-page]:not([data-page="home"]) main > section,
html[data-page="share"] main > section { min-height: 0; padding-top: var(--s-6); padding-bottom: var(--s-6); }
html[data-page]:not([data-page="home"]) main > section:first-child,
html[data-page="issue-01"] main > section.reader-head { padding-top: clamp(84px, 8vw, 112px); }
html[data-page="issue-01"] main > section.reader { padding-top: 0; }
html[data-page]:not([data-page="home"]) main > section > :is(.section-head, .home-head, header):first-child { padding-top: var(--s-4); }
html[data-page="share"] main > section { display: block; }
@media (min-width: 900px) { html[data-page="share"] main > section.contact { display: grid; } }
.story-type, .person-head { min-height: 0; padding-top: 0; padding-bottom: var(--s-5); margin-bottom: 0; }
.page-head { padding-block: 0 var(--s-5); }
.stories, .more-stories, .shop-section, .shop-strip, .people, .lineup { padding-bottom: var(--s-6); }
html[data-page]:not([data-page="home"]) :is(h1, h2) { margin-bottom: var(--s-3); }
html[data-page]:not([data-page="home"]) .section-head { margin-bottom: var(--s-5); }
html[data-page]:not([data-page="home"]) .pull { margin-bottom: var(--s-5); }

/* Home: Share and Find us are compact, sized to their content */
.hf-share, .hf-find { min-height: 0; }

/* Ian: one column at every width. Instagram and email sit centred above the form, not in a column on the left. */
/* From the photos down, one centred column as wide as the photos: Instagram and email, then the form,
   its boxes filling the column, and Send centred under them. */
html[data-page="share"] .share-top .invite-pages { width: 100%; margin-inline: auto; }
html[data-page="share"] main > section.contact > * { width: 100%; max-width: 900px; margin-inline: auto; }
html[data-page="share"] .contact-side { justify-items: center; }
html[data-page="share"] .contact-send { justify-self: center; }

/* Artist pages: embedded music videos, whole 16:9 frames */
.watch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 360px)); justify-content: start; gap: var(--s-4); }
.watch-item { aspect-ratio: 16 / 9; background: #000; }
.watch-item iframe { display: block; width: 100%; height: 100%; border: 0; }

.person-meta a.rag-ref { text-decoration: none; }

/* Artist pages: previous and next artist, small buttons with an arrow so it reads as clickable */
.artist-pager { padding-inline: calc(var(--gutter) + var(--spine-w)) var(--gutter); padding-block: 0 var(--s-6); }
.artist-pager-inner { display: flex; justify-content: space-between; gap: var(--s-3); max-width: 1400px; margin: 0 auto; padding-top: var(--s-4); border-top: 1px solid var(--line); }
.artist-pager a { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 14px; border: 1px solid var(--line); text-decoration: none; color: var(--paper); transition: background 0.2s, color 0.2s; }
.artist-pager-text { display: grid; gap: 2px; }
.artist-next { text-align: right; margin-left: auto; }
.artist-pager-name { font: 400 var(--t-small)/1.2 var(--type); letter-spacing: var(--track-caps); text-transform: uppercase; }
.artist-arrow { font: 400 1.25rem/1 var(--type); }
@media (hover: hover) { .artist-pager a:hover { background: var(--paper); color: var(--charcoal); } .artist-pager a:hover .meta { color: inherit; } }
@media (max-width: 520px) { .artist-pager a { padding: 6px 10px; gap: var(--s-2); } }


/* Header logo: black and white until you point at it, then the red version */
.brand-mark { filter: grayscale(1) brightness(1.3) drop-shadow(0 1px 6px rgba(0, 0, 0, 0.6)); transition: filter 0.25s ease; }
.motion .brand-mark { transition: filter 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.brand:hover .brand-mark, .brand:focus-visible .brand-mark, .brand:active .brand-mark { filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.6)); }

/* Hero title in Carol Gothic (Adobe Fonts web project zqx4jzq). It is a blackletter, so mixed case, no capitals, a little tighter. */
.hf-title { font-family: "carol-gothic", var(--display); font-size: clamp(2.6rem, 0.8rem + 7vw, 8rem); line-height: 1; text-transform: none; letter-spacing: 0.01em; }

/* Every page's top heading in Carol Gothic (mixed case, since it is a blackletter) */
html[data-page] h1, .person-name, .story-hero h1, .story-type h1, .share-title { font-family: "carol-gothic", var(--display); text-transform: none; letter-spacing: 0.01em; line-height: 1; font-weight: 400; }
html[data-page]:not([data-page="home"]) h1 { font-size: clamp(3.4rem, 1.8rem + 10vw, 11rem); }
.person-name { font-size: clamp(3.4rem, 1.8rem + 10vw, 10rem); }
.person-name.is-long, .person-head.has-photo .person-name.is-long { font-size: clamp(3rem, 1.6rem + 8vw, 8rem); }
.person-head.has-photo .person-name { font-size: clamp(3rem, 1.6rem + 9vw, 9rem); }

/* Home: sections are separated by a red line, no shadow (same line that sets the tagline off) */
.hf-sec, .hf-issue, .hf-find, .hf-aboutus { box-shadow: none; }
.hf-aboutus, .hf-issue, .hf-artists, .hf-find { border-top: 3px solid var(--red); }

/* Phones: the burger is just three lines, and the opened menu has no box behind the tabs */
@media (max-width: 520px) {
  .site-header .nav-burger { background: transparent; border: 0; box-shadow: none; }
  .site-header .nav-burger span { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
  .site-header .site-nav { background: transparent; border: 0; box-shadow: none; padding: 0; }
  .site-header .site-nav a { text-shadow: none; }
}

/* Phones: every tab in the opened menu is a red box with white text, easy to read over anything */
@media (max-width: 520px) {
  html[data-page] .site-header .site-nav a,
  html[data-page] .site-header .site-nav a:not([aria-current="page"]):not(.nav-shop),
  html[data-page] .site-header .site-nav a.nav-shop { background: #d42a30 !important; background-image: none !important; color: #fff !important; border: 2px solid #d42a30 !important; text-shadow: none !important; box-shadow: none !important; }
  html[data-page] .site-header .site-nav a[aria-current="page"] { border-color: #fff !important; }
}

/* Home: a hairline at the foot of the hero that draws itself downward and fades, a quiet hint to scroll */
.hf-cue { position: absolute; left: 50%; bottom: 20px; width: 3px; height: 84px; margin-left: -1.5px; z-index: 4; pointer-events: none; background: #d42a30; box-shadow: 0 0 8px rgba(0, 0, 0, 0.55); transform-origin: top; transform: scaleY(0.35); opacity: 0.8; will-change: transform, opacity; }
@media (prefers-reduced-motion: no-preference) { .hf-cue { animation: hf-cue 2.8s cubic-bezier(0.45, 0, 0.2, 1) 1.2s infinite; } }
@keyframes hf-cue { 0% { transform: scaleY(0); opacity: 0; transform-origin: top; } 35% { opacity: 1; } 60% { transform: scaleY(1); transform-origin: top; opacity: 1; } 61% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; } }

/* The red wall at the left: half the original width (10px to 5px). Layout spacing still uses --spine-w. */
.spine { width: calc(5px + env(safe-area-inset-left, 0px)); }

/* Home: the wings logo sits a little higher and a little bigger */
.hf-hero { padding-top: calc(48px + env(safe-area-inset-top, 0px)); }
.hf-top img { width: min(190px, 42vw); }
@media (max-width: 520px) { .hf-hero { padding-top: calc(78px + env(safe-area-inset-top, 0px)); } .hf-top img { width: min(150px, 38vw); } }

/* The wings logo that appears in the header on scroll: a bit bigger (the logo is 1200 x 413) */
.brand-mark { width: 120px; height: 41px; }
@media (max-width: 520px) { .brand-mark { width: 70px; height: 24px; } }

/* Home: one red line only, the one that separates the sections. The heading sits right under it. */
.hf-break { border-top: 0; padding-top: 0; }
.hf-share .hf-break { border-top: 0; }
.hf-sec { padding-top: clamp(28px, 4vw, 48px); }
.hf-about { align-content: start; }

/* Issue 01: the description sits beside a page from the Rag, so the right of the screen is not empty (not on phones) */
.reader-head-photo { display: none; margin: 0; }
@media (min-width: 900px) {
  html[data-page="issue-01"] main > section.reader-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: clamp(24px, 4vw, 64px); align-items: end; }
  .reader-head-photo { display: block; }
  .reader-head-photo img { display: block; width: 100%; height: auto; }
  .reader-head-photo .meta { margin: 8px 0 0; }
}

/* Small icons beside the Instagram handle and the email (Find us and the footer) */
.with-ico { display: inline-flex; align-items: center; gap: 0.5em; }
.with-ico .ico { width: 1.1em; height: 1.1em; flex: none; }
.footer-line .with-ico { gap: 0.4em; }

/* Home, Share your work: three steps, with icons */
.hf-steps { list-style: none; margin: var(--s-6) 0 var(--s-6); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 3vw, 40px); max-width: 860px; }
.hf-steps li { display: grid; gap: var(--s-2); align-content: start; justify-items: start; color: #fff; font: 400 1rem/1.35 var(--type); }
.hf-steps .ico { width: clamp(36px, 5.5vw, 60px); height: auto; aspect-ratio: 1; }
.hf-step-no { font: 400 var(--t-label)/1 var(--type); letter-spacing: var(--track-caps, 0.12em); opacity: 0.75; }
.hf-steps li:not(:first-child) { border-left: 1px solid rgba(255, 255, 255, 0.35); padding-left: clamp(12px, 2.4vw, 28px); }
@media (max-width: 520px) { .hf-steps { gap: 10px; } .hf-steps li { font-size: var(--t-label); } .hf-steps li:not(:first-child) { padding-left: 10px; } }

/* ---------- Accessibility and legal ---------- */
/* Skip link: the first thing a keyboard user reaches; it appears only while it has focus. */
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 1000; padding: 12px 18px;
  background: #fff; color: #121112; font: 400 var(--t-small)/1 var(--type); letter-spacing: var(--track-caps); text-transform: uppercase; text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; outline: 3px solid var(--red); outline-offset: 2px; }
main:focus { outline: none; }

/* Privacy, Terms, Cookies and Refunds: plain reading pages. */
.legal { max-width: 820px; margin-inline: 0; padding-block: clamp(32px, 6vw, 72px) clamp(48px, 8vw, 96px); }
.legal h1 { font-size: var(--t-h1); margin-bottom: var(--s-3); }
.legal .meta { margin-bottom: var(--s-4); }
.legal-banner { margin: 0 0 var(--s-5); padding: var(--s-3); border: 1px dashed var(--muted); font: 400 var(--t-small)/1.5 var(--type); }
.legal-section, .legal-biz { margin-top: var(--s-5); }
.legal h2 { font-size: var(--t-h3); line-height: 1; margin-bottom: var(--s-2); }
.legal p { margin: 0 0 var(--s-2); font: 400 var(--t-body)/1.55 var(--type); max-width: 62ch; }
.legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--red-text); }
.legal-links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-6); padding-top: var(--s-3); border-top: 1px solid var(--line); font: 400 var(--t-small)/1.4 var(--type); }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px var(--s-3); font: 400 var(--t-label)/1.4 var(--type); letter-spacing: var(--track-caps); text-transform: uppercase; }
.footer-legal a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.footer-legal a:hover, .footer-legal a:focus-visible { color: var(--paper); }

/* The form's agree box: a real checkbox with a big tap area, then a link to the policy. */
.contact-consent { display: grid; gap: var(--s-1); margin-top: var(--s-3); }
.consent-label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font: 400 var(--t-small)/1.45 var(--type); }
.consent-label input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--red); cursor: pointer; }
.consent-label input:focus-visible { outline: 3px solid var(--red-text); outline-offset: 3px; }
.consent-link { margin-left: 36px; font: 400 var(--t-small)/1.4 var(--type); color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* A video waits behind a play button, so nothing is sent to YouTube until it is pressed. */
.watch-play {
  display: grid; place-content: center; justify-items: center; gap: 8px; width: 100%; height: 100%; padding: 16px;
  border: 1px solid var(--line); background: #0e0d0e; color: #f1eee8; text-align: center; cursor: pointer; font: inherit;
}
.watch-play:hover { border-color: var(--red); }
.watch-play:focus-visible { outline: 3px solid var(--red-text); outline-offset: 3px; }
.watch-play-icon { width: 0; height: 0; border-left: 22px solid #f1eee8; border-top: 14px solid transparent; border-bottom: 14px solid transparent; }
.watch-play-title { font: 400 var(--t-small)/1.3 var(--type); }
.watch-play-note { font: 400 var(--t-label)/1.3 var(--type); letter-spacing: var(--track-caps); text-transform: uppercase; color: #bdb8b4; }
.watch-item noscript a { color: #f1eee8; padding: 16px; display: block; }