/* Workshop dumps: loose, staggered paper covers with generous white space. */
.zine-archive { margin-top: clamp(110px, 14vw, 220px); scroll-margin-top: 40px; }
.archive-intro { margin-bottom: 85px; }
.archive-intro h2, .session-heading h3 { color: var(--accent); font-family: "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive; font-weight: 400; }
.archive-intro h2 { font-size: clamp(30px, 4vw, 52px); margin: 0 0 10px; transform: rotate(-3deg); width: fit-content; }
.archive-intro p, .session-heading p { font-size: 13px; line-height: 1.6; margin: 8px 0; }
.archive-intro nav { margin-top: 18px; font-size: 14px; }
.archive-intro a { color: var(--accent); text-underline-offset: 5px; }
.archive-session { margin-bottom: clamp(100px, 12vw, 190px); scroll-margin-top: 40px; }
.session-heading { margin: 0 0 45px 4%; }
.session-heading h3 { font-size: clamp(22px, 2.5vw, 32px); margin: 0; transform: rotate(-3deg); width: fit-content; }
.zine-dump { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: clamp(45px, 7vw, 110px) 3%; padding: 20px 5% 45px; }
.zine-cover { position: relative; display: block; width: 75%; max-width: 275px; justify-self: center; color: var(--ink); text-decoration: none; transform: translateY(var(--offset, 0)) rotate(var(--angle, 0deg)); }
.dump-cover-1 { --angle: -9deg; --offset: 10px; width: 83%; }
.dump-cover-2 { --angle: 7deg; --offset: 42px; width: 72%; }
.dump-cover-3 { --angle: -4deg; --offset: -15px; width: 86%; }
.dump-cover-4 { --angle: 6deg; --offset: 15px; width: 68%; }
.dump-cover-5 { --angle: -7deg; --offset: 40px; width: 84%; }
.dump-cover-6 { --angle: 10deg; --offset: -10px; width: 73%; }
#workshop-02 .dump-cover-1 { --angle: 6deg; }
#workshop-02 .dump-cover-2 { --angle: -8deg; }
#workshop-02 .dump-cover-5 { --angle: 5deg; }
.zine-cover img { display: block; width: 100%; height: auto; transition: transform 200ms ease; }
.zine-cover > span { display: block; margin: 12px 0 0 18%; font-size: 14px; }
.zine-cover:hover, .zine-cover:focus-visible { color: var(--accent); }
.zine-cover:hover img { transform: translateY(-4px); }
.zine-cover:focus-visible, .zine-close:focus-visible, .archive-page a:focus-visible { outline: 2px solid var(--accent); outline-offset: 7px; }
/* Native dialog supplies keyboard focus containment and Escape handling. */
html.zine-open { overflow: hidden; scrollbar-gutter: stable; }
.zine-dialog { box-sizing: border-box; width: min(1000px, calc(100vw - 96px)); max-width: none; height: calc(100dvh - 64px); max-height: none; margin: auto; padding: 0 44px 44px; border: 0; border-radius: 24px; color: #333; background: #f3eddf; overscroll-behavior: contain; scrollbar-width: none; }
.zine-dialog::-webkit-scrollbar { display: none; width: 0; height: 0; }
.zine-dialog::backdrop { background: rgb(0 0 0 / 35%); }
.zine-dialog-toolbar { position: sticky; top: 0; z-index: 1; display: flex; justify-content: flex-end; padding: 12px 0; background: #f3eddf; }
.zine-close { display: block; width: 112px; min-height: 62px; border: 0; padding: 0; background: transparent; color: var(--accent); cursor: pointer; }
.zine-close svg { display: block; width: 100%; height: auto; transition: transform 180ms ease; }
.zine-close:hover svg { transform: rotate(4deg); }
.zine-dialog-content > p { line-height: 1.6; }
.zine-gallery { max-width: 1100px; margin: 0 auto; }
.zine-heading { margin: 8px 0 44px; }
.zine-heading h1 { margin: 18px 0; color: #171717; font-size: clamp(28px, 3vw, 42px); font-weight: 400; }
.zine-heading p { margin: 8px 0; font-size: 14px; color: #707070; }
.zine-gallery figure { margin: 0 0 48px; }
.zine-gallery img { display: block; width: 100%; height: auto; background: #f5f5f5; }
.zine-gallery figcaption { margin-top: 10px; font-size: 12px; color: #707070; text-align: right; }
.archive-page { margin: 0; padding: 0 40px; color: #333; }
.archive-page a { color: inherit; text-underline-offset: 4px; }
.archive-page-nav { max-width: 1100px; margin: 0 auto 40px; padding: 28px 0; display: flex; justify-content: space-between; gap: 24px; font-size: 14px; }
.archive-page-footer { max-width: 1100px; margin: 0 auto; padding: 12px 0 60px; }
@media (max-width: 760px) {
  .zine-archive { margin-top: 100px; }
  .archive-intro { margin-bottom: 60px; }
  .session-heading { margin-bottom: 28px; }
  .zine-dump { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 50px 7%; padding: 12px 3% 35px; }
  .zine-cover { width: 90%; max-width: 230px; --offset: 0px; }
  .dump-cover-2, .dump-cover-4, .dump-cover-6 { --offset: 28px; width: 82%; }
  .archive-session { margin-bottom: 100px; }
  .archive-page { padding: 0 18px; }
  .archive-page-nav { font-size: 12px; padding: 24px 0; margin-bottom: 28px; }
  .zine-heading { margin-bottom: 32px; }
  .zine-gallery figure { margin-bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) { .zine-cover img { transition: none; } .zine-cover:hover img { transform: none; } }

@media (prefers-reduced-motion: reduce) { .zine-close svg { transition: none; } .zine-close:hover svg { transform: none; } }

/* Paper piles: only enhanced pages collapse; without JS every link stays usable. */
.archive-session { position: relative; }
.dump-toggle { display: none; }
.piles-ready .archive-session:not(.is-open) { height: 350px; }
.piles-ready .archive-session:not(.is-open) .zine-dump { position: relative; height: 100%; display: block; padding: 0; }
.piles-ready .archive-session:not(.is-open) .zine-cover { position: absolute; width: 190px; max-width: 48%; top: 40px; left: clamp(40px, 12vw, 160px); transform: translate(var(--pile-x, 0px), var(--pile-y, 0px)) rotate(var(--pile-angle, 0deg)); pointer-events: none; }
.dump-cover-1 { --pile-x: 20px; --pile-y: -10px; --pile-angle: -13deg; }
.dump-cover-2 { --pile-x: 44px; --pile-y: 9px; --pile-angle: 8deg; }
.dump-cover-3 { --pile-x: -18px; --pile-y: 26px; --pile-angle: -4deg; }
.dump-cover-4 { --pile-x: 20px; --pile-y: 30px; --pile-angle: 16deg; }
.dump-cover-5 { --pile-x: -20px; --pile-y: 37px; --pile-angle: 1deg; }
.dump-cover-6 { --pile-x: 19px; --pile-y: 33px; --pile-angle: 18deg; }
.piles-ready .dump-toggle:not([hidden]) { display: block; position: absolute; z-index: 10; left: clamp(10px, 9vw, 130px); top: 0; width: 300px; max-width: 100%; height: 350px; border: 0; padding: 0; background: transparent; cursor: pointer; }
.dump-toggle:focus-visible { outline: 2px dashed var(--accent); outline-offset: 10px; }
.is-open .zine-cover { animation: unfold-paper 350ms ease-out both; }
@keyframes unfold-paper { from { opacity: .5; transform: translateY(24px) rotate(var(--pile-angle)); } to { opacity: 1; transform: translateY(var(--offset,0px)) rotate(var(--angle,0deg)); } }
@media (max-width: 760px) {
 .piles-ready .archive-session:not(.is-open) { height: 300px; }
 .piles-ready .archive-session:not(.is-open) .zine-cover { width: 155px; left: calc(50% - 90px); top: 30px; }
 .piles-ready .dump-toggle:not([hidden]) { left: 0; width: 100%; height: 300px; }
}
@media (prefers-reduced-motion: reduce) { .is-open .zine-cover { animation: none; } }

/* Newest workshop first; collapsed piles sit diagonally, expanded spreads use the full width. */
.zine-gallery .photo-rotated { transform: rotate(180deg); }
.piles-ready #workshop-02 { margin-bottom: 5px; }
.piles-ready #workshop-01 { --stack-left: 56%; }
.piles-ready #workshop-01:not(.is-open) .zine-cover { left: var(--stack-left); }
.piles-ready #workshop-01 .dump-toggle:not([hidden]) { left: calc(var(--stack-left) - 30px); }
@media (max-width: 760px) {
 .piles-ready #workshop-02:not(.is-open) .zine-cover { left: 10%; width: 130px; }
 .piles-ready #workshop-01 { --stack-left: calc(100% - 185px); }
 .piles-ready #workshop-01:not(.is-open) .zine-cover { width: 130px; }
 .piles-ready #workshop-01 .dump-toggle:not([hidden]) { width: 200px; max-width: calc(100% - var(--stack-left) + 30px); }
}

/* Normalize unfolded covers by visible paper height, including transparent margins. */
.archive-session.is-open .zine-cover { width: 100%; max-width: none; height: clamp(140px, 21vw, 270px); display: flex; align-items: center; justify-content: center; }
.archive-session.is-open .zine-cover img { width: auto; max-width: none; height: calc(100% * var(--paper-height-factor, 1)); }
@media (max-width: 760px) {
 .archive-session.is-open .zine-cover { width: 100%; height: clamp(105px, 32vw, 160px); }
}
.zine-cover img[src="eunjung-cover.webp"] { --paper-height-factor: 1.07373; }
.zine-cover img[src="jiwon-cover.webp"] { --paper-height-factor: 1.05810; }
.zine-cover img[src="jongho-cover.webp"] { --paper-height-factor: 1.07168; }
.zine-cover img[src="oilly-cover.webp"] { --paper-height-factor: 1.09769; }
.zine-cover img[src="seongyun-cover.webp"] { --paper-height-factor: 1.16751; }
.zine-cover img[src="session02-christel-cover.webp"] { --paper-height-factor: 1.01010; }
.zine-cover img[src="session02-jiyeon-cover.webp"] { --paper-height-factor: 1.03481; }
.zine-cover img[src="session02-laura-cover.webp"] { --paper-height-factor: 1.05465; }
.zine-cover img[src="session02-martina-cover.webp"] { --paper-height-factor: 1.04265; }
.zine-cover img[src="session02-mimoko-cover.webp"] { --paper-height-factor: 1.01289; }
.zine-cover img[src="session02-westley-cover.webp"] { --paper-height-factor: 1.00000; }
.zine-cover img[src="suju-cover.webp"] { --paper-height-factor: 1.08696; }

/* Artwork metadata within the gallery header. */
.zine-metadata { max-width: 760px; margin: 8px 0 40px; }
.zine-metadata h1 { font-size: clamp(28px, 3.5vw, 42px); line-height: 1.15; margin: 18px 0 12px; font-weight: 500; letter-spacing: -.025em; }
.zine-byline { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; font-size: 14px; line-height: 24px; }
.zine-byline a { color: var(--accent, #bd0050); text-underline-offset: 4px; }
.zine-byline .instagram-link { display: inline-flex; align-items: center; justify-content: center; position: relative; flex: 0 0 20px; width: 20px; height: 20px; text-decoration: none; }
.instagram-link svg { display: block; width: 20px; height: 20px; }
.instagram-link::after { content: ""; position: absolute; inset: -12px; }
.instagram-link:hover { color: #171717; }
.zine-contact-icons { display: flex; align-items: center; gap: 24px; }
.instagram-link:focus-visible { outline: 2px solid var(--accent, #bd0050); outline-offset: 2px; }
.zine-metadata .zine-description { margin: 18px 0 0; color: #555; font-size: 16px; line-height: 1.65; max-width: 65ch; }
.metadata-pending { color: #777; font-size: 12px; }
@media(max-width:760px){ .zine-metadata { margin-bottom: 30px; } .zine-metadata .zine-description { font-size: 15px; } }

/* September 25 leads the diagonal piles; unfolded galleries keep the shared grid. */
.piles-ready #workshop-sep25 { margin-bottom: 5px; }
.piles-ready #workshop-02 { --stack-left: 56%; }
.piles-ready #workshop-01 { --stack-left: clamp(40px, 12vw, 160px); }
.piles-ready #workshop-02:not(.is-open) .zine-cover { left: var(--stack-left); }
.piles-ready #workshop-02 .dump-toggle:not([hidden]) { left: calc(var(--stack-left) - 30px); }
@media (max-width: 760px) {
 .piles-ready #workshop-sep25:not(.is-open) .zine-cover { left: 10%; width: 130px; }
 .piles-ready #workshop-02 { --stack-left: calc(100% - 185px); }
 .piles-ready #workshop-02 .dump-toggle:not([hidden]) { width: 200px; max-width: calc(100% - var(--stack-left) + 30px); }
 .piles-ready #workshop-01 { --stack-left: 10%; }
 .piles-ready #workshop-01 .dump-toggle:not([hidden]) { left: 0; width: 100%; max-width: 100%; }
}

/* Balance the newest paper covers at 85% of their previous size on all screens. */
#workshop-sep25 .zine-cover img { width: 85%; margin-inline: auto; }
#workshop-sep25.is-open .zine-cover img { width: auto; height: 85%; }