/* Art direction: a portrait cover opening into a wider, collected zine. */
:root {
  --zine-paper: #f0eadf;
  --zine-ink: #1a1916;
  --zine-muted: #565046;
  --zine-accent: #b41970;
  --zine-highlight: #ef54ae;
  --zine-rule: #aaa08e;
  --zine-ground: #d9d0bf;
  --type-body: 1rem;
  --type-small: .875rem;
  --type-label: .75rem;
  --type-heading: clamp(2.5rem, 5.8vw, 4.25rem);
  --sheet-width: 1120px;
  --font-type: var(--font-mono);
  --focus: var(--zine-accent);
  --red: var(--zine-accent);
  --pink: var(--zine-accent);
}

body { font-size: var(--type-body); line-height: 1.6; }
body::after { opacity: .055; }
.site-sheet { background: var(--zine-ground); }
.file-label { font-size: var(--type-label); line-height: 1.5; letter-spacing: .055em; }
.paper-button { background: var(--zine-accent); border-color: var(--zine-accent); color: #fff9f1; }
.paper-button:hover { background: #8f1358; border-color: #8f1358; }

/* Navigation is a single quiet line; the cover is the first visual statement. */
.masthead {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  min-height: 64px;
  padding: .5rem clamp(.75rem, 4vw, 3rem);
  background: var(--zine-ground);
  border-bottom: 1px solid var(--zine-rule);
}
.masthead__nav { justify-content: flex-start; gap: clamp(.5rem, 3.5vw, 2.5rem); }
.masthead__nav a {
  min-width: 44px;
  min-height: 44px;
  padding: .35rem .25rem;
  font: var(--type-small)/1.3 var(--font-mono);
}
.masthead__nav a::before { content: none; }
.masthead__nav a::after { left: .2rem; right: .2rem; height: 2px; bottom: .25rem; background: var(--zine-ink); }
.masthead__nav a:last-child { color: var(--zine-accent); font-weight: 700; }
.masthead [data-motion-toggle] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  min-width: 64px;
  min-height: 44px;
  padding: .4rem .3rem;
  color: var(--zine-muted);
  background: transparent;
  border: 0;
  border-left: 1px solid var(--zine-rule);
  font: var(--type-label)/1.3 var(--font-mono);
}
.masthead [data-motion-toggle]::before { content: 'Ⅱ'; }
.masthead [data-motion-toggle][aria-pressed=true]::before { content: '▷'; }
.masthead [data-motion-toggle]:disabled::before { content: '–'; }
.masthead [data-motion-toggle]:hover { color: var(--zine-ink); text-decoration: underline; text-underline-offset: .25rem; }

.hero { width: min(100%, 760px); margin-inline: auto; background: transparent; padding-top: var(--space-3); }
.hero__cover { position: relative; width: min(100%, 560px); margin-inline: auto; container-type: inline-size; aspect-ratio: 720 / 920; overflow: hidden; }
.hero__art, .hero__continuation { width: min(100%, 560px); margin-inline: auto; }
.hero__art { box-shadow: 4px 0 0 #1a19160d, -4px 0 0 #1a19160d; }
.hero__continuation { box-shadow: 4px 4px 0 #1a19160d, -4px 0 0 #1a19160d; }

/* Apply only the imagegen-cleaned paper panel: original eyes stay pixel-aligned. */
.hero__art > .hero__clean-panel {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: #292a24;
  pointer-events: none;
  clip-path: polygon(55% 41.8%, 85% 41.8%, 85% 44.5%, 97.8% 44.5%, 97.8% 62.8%, 55% 62.8%);
}
/* A pasted title sheet replaces the wordmark printed into the original cover. */
.hero__brand {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  height: 21.8%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1cqw 5cqw 2.5cqw;
  background: var(--zine-paper);
  clip-path: polygon(0 0, 100% 0, 100% 98%, 95% 99%, 89% 97%, 82% 100%, 75% 98%, 68% 100%, 61% 98%, 53% 100%, 46% 97%, 38% 99%, 31% 98%, 24% 100%, 17% 98%, 9% 100%, 0 98%);
}
.hero__brand-intro {
  flex-shrink: 0;
  font: 3.3cqw/1.2 var(--font-hand);
  transform: rotate(-3deg);
}
.hero__brand img {
  display: block;
  width: 86%;
  height: 27.5cqw;
  min-height: 0;
  object-fit: contain;
  filter: drop-shadow(0 2px 1px #1a191620);
}
.hero__brand > .hero__brand-collage {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  filter: none;
}
.hero__identity {
  position: absolute;
  z-index: 2;
  left: 57.5%;
  top: 44.5%;
  width: 39%;
  margin: 0;
  display: grid;
  gap: 1.6cqw;
  color: var(--zine-ink);
  font: 6cqw/1.12 var(--font-marker);
  pointer-events: none;
}
.hero__identity span {
  justify-self: start;
  padding: .15em .2em;
  background: var(--zine-paper);
  transform: rotate(-1.5deg);
}
.hero__identity span:nth-child(2) { transform: rotate(1deg); }
.hero__identity span:nth-child(3) { transform: rotate(-2deg); }

/* Editable pasted notes replace the cover's one-off event lettering. */
.hero__event-note {
  position: absolute;
  z-index: 3;
  left: 20.5%;
  top: 21.2%;
  width: 66.5%;
  height: 6.4%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: .25em .4em;
  color: var(--zine-ink);
  background: var(--zine-paper);
  box-shadow: 1px 2px 0 #1a191630;
  font: 700 3.5cqw/1.2 var(--font-mono);
  text-decoration: underline;
  text-underline-offset: .25em;
  transform: rotate(-2deg);
}
.hero__event-note::after { content: '↗'; text-decoration: none; }
.hero__event-note:hover { color: var(--zine-accent); }
.hero__place-note {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 37.35%;
  width: 24%;
  height: 5.7%;
  margin: 0;
  display: grid;
  place-items: center;
  color: var(--zine-ink);
  background: var(--zine-ground);
  font: 5.3cqw/1 var(--font-marker);
  clip-path: polygon(0 0, 98% 4%, 100% 88%, 86% 96%, 67% 92%, 44% 100%, 23% 94%, 0 98%);
}
.hero__archive-note {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 55.8%;
  width: 54%;
  height: 34%;
  padding: 4cqw 2cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  color: var(--zine-ink);
  background: var(--zine-paper);
  border: 1px solid var(--zine-rule);
  box-shadow: 3px 2px 0 #1a191630;
  text-decoration: none;
  transform: rotate(-.5deg);
}
.hero__archive-title { font: 6cqw/1.1 var(--font-marker); }
.hero__archive-note img { width: 100%; height: auto; mix-blend-mode: multiply; }
.hero__archive-action { font: 700 clamp(.75rem, 2.6cqw, 1rem)/1.4 var(--font-mono); text-decoration: underline; text-underline-offset: .25em; }
.hero__archive-note:hover .hero__archive-action { color: var(--zine-accent); }
.hero__archive-note:focus-visible, .hero__event-note:focus-visible { outline: 3px solid var(--zine-accent); outline-offset: -3px; }

/* A compact paper ticket follows the complete artwork, not the other way round. */
.event-ticket {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .5rem 1rem;
  width: min(calc(100% - 2.5rem), 42rem);
  margin: 1.5rem auto 3.5rem;
  padding: 1rem 1.2rem .35rem;
  background: var(--zine-paper);
  border: 0;
  border-bottom: 1px dashed var(--zine-rule);
  box-shadow: 2px 3px 0 #1a191621;
}
.event-ticket::before { left: 39%; width: 4rem; height: .9rem; top: -.4rem; opacity: .8; }
.event-ticket h2 { margin: .3rem 0; font-size: clamp(1.1rem, 3.5vw, 1.5rem); line-height: 1.25; }
.event-ticket .file-label { margin-bottom: .2rem; color: var(--zine-muted); font-weight: 400; letter-spacing: .025em; }
.event-ticket__when { margin: 0; font-size: var(--type-small); }
.event-ticket__stub { padding-left: 1rem; border-left: 1px dashed var(--zine-rule); border-top: 0; }
.event-ticket__stub .paper-button { max-width: 11rem; min-height: 48px; padding: .65rem .8rem; font-size: var(--type-small); }
.event-details { padding: 0; border-color: var(--zine-rule); font-size: var(--type-small); }
.event-details summary { min-height: 44px; padding-block: .65rem; text-decoration: none; }
.event-details summary > span { display: inline-block; margin-left: .5rem; }
.event-details[open] summary { border-bottom: 1px solid #aaa08e66; margin-bottom: .8rem; }
.event-details[open] summary > span { transform: rotate(90deg); }
.event-ticket__note { margin: 1rem 0 .75rem; font-size: var(--type-small); line-height: 1.6; }
.event-ticket__where { font-size: var(--type-body); }

/* Readable copy on calm paper, with the eye wall as its own visual page. */
.bio { background: var(--zine-paper); }
.bio-file { padding: 3rem 8% 2rem; background: var(--zine-paper); border-top: 1px solid var(--zine-rule); }
.bio-file h2 { margin: .85rem 0 1.5rem; font-size: var(--type-heading); line-height: 1.12; letter-spacing: -.035em; }
.bio-file > p:not(.file-label) { max-width: 38ch; font: var(--type-body)/1.7 var(--font-mono); }
.bio-file a { font-size: var(--type-body); }
.eye-reel__sticky { background-color: var(--zine-paper); background-image: none; }
.bio { min-height: 0; }
.bio .eye-reel__sticky { height: 23rem; }
/* Hide the baked-in statistics footer without changing the stop-motion frames. */
.eye-reel__figure { display: flex; align-items: center; justify-content: center; height: 100%; }
.eye-reel__frame {
  position: relative;
  inset: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  clip-path: inset(0 0 8.5% 0);
}

.paper--vault { padding: 4.5rem 6% 3.5rem; background-color: var(--zine-paper); background-image: none; }
.vault-intro { margin-bottom: 2rem; }
.vault-heading { gap: var(--space-4); }
.vault-heading h2 { font-size: var(--type-heading); text-decoration: none; }
.vault-heading p { max-width: 38ch; font: var(--type-body)/1.65 var(--font-mono); }
.vault-frame { width: min(75%, 21rem); margin: 1rem auto; }
.vault-frame figcaption { font: var(--type-small)/1.5 var(--font-mono); }
.vault__after { font: var(--type-body)/1.6 var(--font-mono); }
.vault__ticket-link { margin-top: .65rem; padding: .5rem; color: var(--zine-accent); font: var(--type-body)/1.5 var(--font-mono); }

/* The contact sheet can breathe across the wider desktop page. */
.instagram-section { padding: 4rem 6% 4.5rem; background: var(--zine-ground); }
.instagram-section__inner { max-width: none; }
.instagram-heading h2 { font-size: var(--type-heading); line-height: 1.1; white-space: normal; }
.instagram-heading h2::after { height: 2px; width: 75%; margin-top: .75rem; background: var(--zine-ink); }
.instagram-heading__eyebrow { color: var(--zine-muted); font-size: var(--type-label); line-height: 1.5; letter-spacing: .04em; }
.instagram-heading__profile { padding-inline: .1rem; background: transparent; color: var(--zine-ink); box-shadow: none; font-size: var(--type-small); text-decoration: underline; text-underline-offset: .25rem; transform: none; }
.instagram-heading__profile:hover, .instagram-heading__profile:focus-visible { background: transparent; color: var(--zine-accent); transform: none; }
.instagram-section__intro { max-width: 48ch; margin-top: 1.5rem; font: var(--type-body)/1.65 var(--font-mono); }
.instagram-feed-status { margin: 1.25rem 0 0; padding: 0; border: 0; color: var(--zine-muted); font-size: var(--type-small); letter-spacing: 0; text-transform: none; transform: none; }
.instagram-feed-status.is-stale { color: var(--zine-muted); }
.instagram-feed-retry { margin: .15rem 0 0; padding: .35rem 0; border: 0; font-size: var(--type-small); text-decoration: underline; text-underline-offset: .25rem; }
.instagram-board { width: 100%; max-width: 60rem; margin-top: 2rem; box-shadow: 4px 5px 0 #1a191636; }
.instagram-board > figcaption { font-size: var(--type-small); padding: .8rem .4rem .5rem; }
.instagram-section__note { font: var(--type-small)/1.6 var(--font-mono); }
.instagram-viewer { max-width: 46rem; margin-inline: auto; }
.instagram-viewer__eyebrow { color: var(--zine-highlight); }
.instagram-viewer__status, .instagram-viewer__footer,
.instagram-viewer__close, .instagram-viewer__step, .instagram-viewer__retry { font-family: var(--font-mono); font-size: var(--type-small); }
.instagram-viewer__footer a:hover { color: var(--zine-highlight); }

@media (min-width: 900px) {
  .bio { display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 0; }
  .bio-file { border-top: 0; padding: 3rem 10% 3rem 12%; }
  .bio-file h2 { font-size: clamp(2.5rem, 4vw, 3.8rem); }
  .bio .eye-reel__sticky { height: 28rem; }
  .vault-intro { display: grid; grid-template-columns: 1fr .7fr; align-items: center; gap: 3rem; }
  .vault-heading { text-align: left; }
  .vault-heading h2, .vault-heading p { margin-left: 0; text-align: left; }
  .vault-frame { width: 100%; margin: 0; }
}

@media (max-width: 620px) {
  .masthead { min-height: 56px; gap: .35rem; padding: .3rem .5rem; }
  .masthead__nav { justify-content: space-between; gap: .1rem; }
  .masthead__nav a { min-width: 0; padding-inline: .25rem; font-size: .8125rem; }
  .masthead [data-motion-toggle] { min-width: 58px; font-size: .6875rem; padding-left: .5rem; }
  .hero { padding-top: 0; }
  .hero__art, .hero__continuation { width: 100%; }
  .event-ticket { width: calc(100% - 2rem); gap: .5rem .65rem; padding: .85rem .8rem .2rem; margin-bottom: 2.5rem; }
  .event-ticket__stub { padding-left: .65rem; }
  .event-ticket__stub .paper-button { width: auto; max-width: 7.5rem; font-size: var(--type-small); }
  .bio-file { padding: 2.5rem 7% 1.5rem; }
  .paper--vault { padding: 3.5rem 5% 2.5rem; }
  .vault-heading p { font-size: var(--type-body); }
  .instagram-section { padding-inline: 6%; }
  .instagram-heading { gap: .75rem; }
  .instagram-heading__profile { align-self: flex-start; }
  .instagram-board { width: 100%; }
  .instagram-board > figcaption { font-size: var(--type-label); }
  .instagram-viewer__step { padding-inline: .5rem; font-size: .75rem; }
  .mobile-ticket { min-height: 4.5rem; padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--zine-rule); }
  .mobile-ticket span { font-size: var(--type-label); letter-spacing: 0; }
  .mobile-ticket strong { font: var(--type-small)/1.25 var(--font-mono); }
  .mobile-ticket > a { color: #fff9f1; background: var(--zine-accent); font-size: var(--type-small); }
}