/* Compact browsing, using only existing artwork and original posts. */
.hero-margins { display: none; }
/* The artwork remains 560px wide. These pieces occupy only its outer margins. */
@media (min-width: 740px) {
  .hero-margins { position: absolute; z-index: 2; top: 1rem; left: 50%; display: flex; justify-content: space-between; width: min(100vw, var(--sheet-width)); height: 715px; transform: translateX(-50%); pointer-events: none; }
  .hero-margin { position: relative; width: calc((100% - 560px) / 2); }
  .margin-note { position: absolute; display: grid; gap: .7rem; width: calc(100% - 64px); max-width: 200px; margin: 0; padding: 1.5rem 1rem 1.2rem; color: var(--zine-ink); background: var(--zine-paper); box-shadow: 2px 3px 0 #1a191612; }
  .margin-note::before { content: ''; position: absolute; top: -.6rem; left: 29%; width: 43%; height: 1.35rem; background: #b9aa86a6; transform: rotate(-5deg); clip-path: polygon(2% 0, 98% 5%, 100% 92%, 0 100%); }
  .margin-note__eyebrow { font: .6875rem/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: .055em; }
  .margin-note__hand { font: clamp(1.6rem, 2.7vw, 2rem)/1.22 var(--font-marker); }
  .margin-note__title { font: 1.55rem/1.2 var(--font-marker); }
  .margin-note__link { display: flex; align-items: center; justify-content: space-between; gap: .25rem; min-height: 44px; border-top: 1px dashed var(--zine-rule); font: .8125rem/1.35 var(--font-mono); text-decoration: underline; text-underline-offset: .2em; }
  a.margin-note { pointer-events: auto; text-decoration: none; }
  a.margin-note:hover .margin-note__link { color: var(--zine-accent); }
  a.margin-note:focus-visible { outline: 3px dashed var(--zine-accent); outline-offset: 6px; }
  .margin-note--origin { top: 65px; left: 28px; transform: rotate(-7deg); }
  .margin-note--archive { top: 430px; left: 34px; transform: rotate(4deg); }
  .margin-doodle { position: absolute; stroke: var(--zine-ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
  .margin-doodle--star { top: 272px; left: 24%; width: 105px; height: 112px; transform: rotate(-9deg); }
  .margin-scrawl { position: absolute; top: 92px; left: 36px; margin: 0; font: 1.35rem/1.6 var(--font-hand); transform: rotate(8deg); }
  .margin-doodle--arrow { top: 189px; left: 27px; width: 155px; height: 95px; }
  .margin-note--social { top: 320px; right: 29px; transform: rotate(6deg); }
  .margin-stamp { position: absolute; top: 568px; left: 42px; margin: 0; padding: .35rem .7rem; border-block: 3px solid currentColor; color: var(--zine-accent); font: 1.55rem/1.1 var(--font-marker); transform: rotate(-11deg); }
  .margin-note--origin { transform-origin: 50% 0; animation: margin-paper-rock 5s ease-in-out infinite; }
  .margin-doodle--star { top: 282px; left: 18%; width: 134px; height: 125px; }
  .margin-orbit-ring { stroke-width: 1.2; stroke-dasharray: 3 6; opacity: .45; }
  .margin-orbit { transform-origin: 75px 80px; animation: margin-orbit-spin 12s linear infinite; stroke: var(--zine-accent); fill: var(--zine-paper); }
  .margin-star-wobble { transform-origin: 75px 80px; animation: margin-star-rock 4s ease-in-out infinite; }
  .margin-doodle--arrow path { stroke-dasharray: 100; animation: margin-ink-draw 7s ease-in-out infinite; }
  .margin-stamp { animation: margin-stamp-nudge 6s ease-in-out infinite; }
  .margin-sound { position: absolute; top: 632px; left: 36px; width: calc(100% - 76px); max-width: 170px; color: var(--zine-accent); transform: rotate(-4deg); }
  .margin-sound svg { width: 100%; height: 55px; }
  .margin-sound span { display: block; margin-top: .35rem; color: var(--zine-ink); font: .6875rem/1.3 var(--font-mono); text-align: center; }
  .margin-sound path { transform-box: fill-box; transform-origin: center bottom; animation: margin-sound-bounce 1.4s ease-in-out infinite alternate; }
  .margin-sound path:nth-child(2n) { animation-duration: 1.1s; animation-delay: -.4s; }
  .margin-sound path:nth-child(3n) { animation-duration: 1.8s; animation-delay: -.9s; }
  .margin-sound path:nth-child(4n) { animation-delay: -.6s; }
  .margin-charm { position: absolute; top: -2px; right: 45px; width: 91px; height: 91px; color: var(--zine-ink); stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .margin-charm__paper { fill: var(--zine-paper); }
  .margin-charm g { transform-origin: 75px 6px; animation: margin-charm-swing 3.8s ease-in-out infinite; }
  .hero-margins [data-margin-motion] { animation-play-state: paused; }
  .hero-margins.is-playing [data-margin-motion] { animation-play-state: running; }
  html[data-motion-paused=true] .hero-margins [data-margin-motion] { animation-play-state: paused; }
}
/* Narrow desktop/tablet windows still have room for motion, but not full cards. */
@media (min-width: 740px) and (max-width: 999px) {
  .hero-margins .margin-note, .hero-margins .margin-scrawl { display: none; }
  .margin-doodle--star { top: 180px; left: 10px; width: calc(100% - 20px); height: 110px; }
  .margin-charm { top: 80px; right: 10px; width: calc(100% - 20px); max-width: 100px; height: 115px; }
  .margin-doodle--arrow { top: 325px; left: 10px; width: calc(100% - 20px); height: 90px; }
  .margin-sound { top: 480px; left: 12px; width: calc(100% - 24px); max-width: 140px; }
  .margin-sound span { font-size: .625rem; }
  .margin-stamp { top: 576px; left: 12px; padding-inline: .3rem; font-size: 1rem; }
}
@keyframes margin-paper-rock { 0%, 100% { rotate: -1deg; } 50% { rotate: 1.5deg; } }
@keyframes margin-orbit-spin { to { transform: rotate(360deg); } }
@keyframes margin-star-rock { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg); } }
@keyframes margin-ink-draw { 0%, 12% { stroke-dashoffset: 100; } 42%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -100; } }
@keyframes margin-stamp-nudge { 0%, 65%, 100% { translate: 0 0; rotate: 0deg; } 77% { translate: 0 -4px; rotate: 2deg; } 86% { translate: 0 1px; rotate: -1deg; } }
@keyframes margin-sound-bounce { from { transform: scaleY(.28); } to { transform: scaleY(1); } }
@keyframes margin-charm-swing { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(13deg); } }
@media (prefers-reduced-motion: reduce) { .hero-margins [data-margin-motion] { animation: none; } }
.event-ticket { margin-bottom: 2rem; }
.mobile-ticket.is-redundant { display: none; }
.bio-file { padding-block: 2rem; }
.bio-collage { align-self: center; margin: 0; padding: 1.5rem 6% 2rem; background: var(--zine-paper); }
.bio-collage img { display: block; width: 100%; height: auto; object-fit: contain; }
.bio-collage figcaption { margin-top: .8rem; color: var(--zine-muted); text-align: right; font: var(--type-small)/1.4 var(--font-mono); }
.night-kit { position: relative; isolation: isolate; overflow: hidden; }
.night-kit__layers { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.night-kit.is-ready .night-kit__layers { opacity: 1; }
.night-kit__record { transform-box: fill-box; transform-origin: center; animation: night-kit-spin 9s linear infinite; animation-play-state: paused; }
.night-kit.is-playing .night-kit__record { animation-play-state: running; }
html[data-motion-paused=true] .night-kit__record { animation-play-state: paused; }
@keyframes night-kit-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .night-kit__record { animation: none; } }
.paper--vault { padding-block: 3rem 2rem; }
.vault-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(5rem, .3fr); align-items: center; gap: 1rem; margin-bottom: 1rem; }
.vault-heading, .vault-heading h2, .vault-heading p { text-align: left; margin-left: 0; }
.vault-frame { width: 100%; max-width: 12rem; margin: 0; }
.vault-frame figcaption { display: none; }
.vault-replay { display: block; width: 100%; min-width: 44px; min-height: 44px; padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; }
.vault-replay:disabled { cursor: default; }
.vault-replay:focus-visible { outline: 3px dashed var(--zine-accent); outline-offset: 5px; }
.archive-files { margin-block: 2rem; gap: 2rem; }
.instagram-section { padding-block: 3rem; }
.instagram-browse { display: none; }
.contact-section { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding: 3rem 6%; background: var(--zine-paper); border-top: 1px dashed var(--zine-rule); color: var(--zine-ink); }
.contact-section h2 { margin: .75rem 0 0; font: var(--type-heading)/1.1 var(--font-marker); letter-spacing: -.03em; }
.contact-section__details { align-self: center; font: var(--type-body)/1.65 var(--font-mono); }
.contact-section__details > p { margin: 0 0 1rem; max-width: 42ch; }
.contact-section__link { display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; color: var(--zine-accent); font-weight: 700; text-underline-offset: .25em; overflow-wrap: anywhere; }
.contact-section__details .contact-section__hint { margin: .75rem 0 0; color: var(--zine-muted); font-size: var(--type-small); }
.contact-section__link:focus-visible { outline: 3px solid var(--zine-accent); outline-offset: 4px; }
.join { padding-top: 2.25rem; }
.join .signup-art { width: min(70%, 19rem); }
.join__heading { margin-block: 1rem 1.5rem; }

@media (max-width: 699px) {
  .instagram-browse:not([hidden]) { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-top: 1rem; font: var(--type-small)/1.4 var(--font-mono); }
  .instagram-browse > div { display: flex; gap: .5rem; }
  .instagram-browse button { width: 44px; height: 44px; padding: 0; background: var(--zine-paper); border: 1px solid var(--zine-rule); color: var(--zine-ink); font: 1.25rem/1 var(--font-mono); cursor: pointer; }
  .instagram-browse button:disabled { opacity: .4; cursor: default; }
  .instagram-browse button:focus-visible { outline: 3px solid var(--zine-accent); outline-offset: 2px; }
  .instagram-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; gap: .75rem; padding: .5rem .5rem 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: .5rem; overscroll-behavior-x: contain; scrollbar-color: var(--zine-accent) var(--zine-paper); scrollbar-width: thin; }
  .instagram-post { aspect-ratio: 3 / 4; scroll-snap-align: start; scroll-snap-stop: normal; }
  .instagram-post > img { object-fit: contain; }
  .instagram-post::after { opacity: 1; transform: none; font-size: .75rem; min-height: 32px; }
  .instagram-board { margin-top: 1.5rem; }
  .contact-section { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-block: 2.5rem; }
  .join .signup-art { width: min(70%, 17rem); }
  .vault-heading h2 { font-size: clamp(2rem, 8vw, 3rem); }
}