:root {
  color-scheme: light;
  --paper: #fff;
  --ink: #707070;
  --accent: #b7004a;
  --art-pink: #f11863;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
/* Desktop proportions follow the 1728px Figma artboard; cap on wide screens. */
.page { min-height: 100svh; max-width: 1728px; margin-inline: auto; padding: min(2.315vw, 40px) min(3.472vw, 60px) 150px; }
.masthead { display: flex; align-items: flex-start; gap: min(3.704vw, 64px); padding-right: min(2.257vw, 39px); }
.brand-mark { width: min(11.69vw, 202px); margin-top: min(1.678vw, 29px); flex: none; }
h1 { margin: 0; flex: 1; min-width: 0; }
.title-art { display: block; width: 100%; height: auto; }
.workshops { list-style: none; padding: 0; margin: min(8.102vw, 140px) 0 0 min(.637vw, 11px); width: min(100%, 780px); }
.workshop { position: relative; width: fit-content; margin-bottom: min(1.273vw, 22px); }
.workshop-link { display: inline-block; padding: 0; color: var(--ink); font-size: clamp(18px, 1.852vw, 32px); font-style: italic; line-height: 1.25; text-underline-offset: .16em; text-decoration-thickness: 1px; transition: color 140ms ease; }
.workshop[data-open] .workshop-link { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 7px; }
.notes { position: absolute; left: calc(100% + 32px); top: -28px; width: 400px; height: 124px; pointer-events: none; visibility: hidden; opacity: 0; transform: translateY(5px); transition: opacity 170ms ease, transform 170ms ease, visibility 170ms; color: var(--accent); font-family: 'Bradley Hand', 'Segoe Print', 'Comic Sans MS', cursive; font-size: 16px; line-height: 1.4; }
.workshop[data-open] .notes { visibility: visible; opacity: 1; transform: translateY(0); }
.note { position: absolute; margin: 0; white-space: nowrap; }
.note-day { left: 4px; top: 4px; transform: rotate(-7deg); }
.note-time { left: 67px; top: 30px; transform: rotate(3deg); }
.note-early { left: 180px; top: 2px; transform: rotate(-3deg); }
.note-regular { left: 203px; top: 34px; transform: rotate(2deg); }
.note-capacity { left: 90px; top: 77px; transform: rotate(-4deg); }
.workshop:nth-child(2) .note-day { transform: rotate(5deg); }
.workshop:nth-child(2) .note-capacity { transform: rotate(3deg); }
.tap-hint { display: none; font-size: 12px; line-height: 1.6; margin: 38px 0 0; }
/* Blend the artwork's white paper away when the floating home overlaps archive images. */
.home { mix-blend-mode: multiply; position: fixed; right: max(calc((100vw - 1728px) / 2 + 95px), 5.498vw); bottom: max(7.5svh, env(safe-area-inset-bottom)); width: clamp(58px, 7.234vw, 125px); color: var(--accent); transform: rotate(-5deg); transition: transform 160ms ease; }
.home svg, .home img { display: block; width: 100%; height: auto; }
/* One small nod per hover/focus; no continuous movement. */
@keyframes home-nod {
  0%, 100% { transform: rotate(-5deg); }
  40% { transform: rotate(4deg) translateY(-2px); }
  75% { transform: rotate(-7deg); }
}
.home:focus-visible { animation: home-nod 420ms ease-out; }
@media (hover: hover) {
  .home:hover { animation: home-nod 420ms ease-out; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 760px) {
  .page { padding: 30px 24px 125px; }
  .masthead { gap: 16px; padding-right: 0; align-items: center; }
  .brand-mark { width: 14%; margin-top: 0; }
  .workshops { margin: 82px 0 0; }
  .workshop-link { padding-block: 10px; }
  .home { right: 24px; bottom: max(28px, env(safe-area-inset-bottom)); width: 62px; }
  .workshop { width: 100%; margin-bottom: 12px; }
  .notes { position: relative; left: auto; top: auto; width: min(100%, 370px); height: 0; margin-top: 0; font-size: 14px; }
  .workshop[data-open] .notes { height: 130px; margin-top: 18px; }
  .note-day { left: 7px; top: 4px; }
  .note-time { left: 57px; top: 26px; }
  .note-early { left: 45%; top: 57px; }
  .note-regular { left: 49%; top: 84px; }
  .note-capacity { left: 8px; top: 99px; }
}
@media (hover: none), (pointer: coarse) { .tap-hint { display: block; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .notes, .home:hover, .home:focus-visible { transform: none; }
}

.home-label { position: absolute; left: 0; top: -12px; font: 12px cursive; transform: rotate(-35deg); }

/* A handwritten sold-out note keeps the full workshop visible as part of the zine. */
.workshop-sold-out .workshop-link { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px 22px; text-decoration: none; }
.workshop-sold-out .workshop-date { position: relative; display: inline-block; text-decoration: none; color: var(--ink); }
/* A translucent, uneven pencil scribble crosses the date without blocking its link. */
.workshop-sold-out .workshop-date::after { content: ""; position: absolute; inset: 0 -3px; background: url("sold-out-scribble.svg") center / 100% 100% no-repeat; opacity: .42; pointer-events: none; }
.sold-out-note { position: relative; top: -14px; display: inline-block; color: var(--accent); font-family: 'Bradley Hand', 'Segoe Print', 'Comic Sans MS', cursive; font-size: .78em; font-style: normal; line-height: 1.3; white-space: nowrap; transform: rotate(-8deg); }
.sold-out-note svg { position: absolute; left: -5%; bottom: -9px; width: 110%; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; }
@media (max-width: 760px) { .workshop-sold-out .workshop-link { gap: 8px 16px; } .sold-out-note { font-size: 16px; } }

/* A quiet handwritten update between the masthead and the archive piles. */
.workshop-message { margin: min(8.102vw, 140px) 0 0 min(.637vw, 11px); max-width: 100%; color: #111; font-family: 'Bradley Hand', 'Segoe Print', 'Comic Sans MS', cursive; font-size: calc(clamp(23px, 2.1vw, 34px) - 2pt); line-height: 1.5; }
.workshop-message p { margin: 0; }
.workshop-message p + p { margin-top: 18px; }
@media (max-width: 760px) {
  .workshop-message { margin: 72px 0 0; font-size: calc(clamp(22px, 5.4vw, 28px) - 2pt); }
  .desktop-break { display: none; }
}

/* A single red accent within the handwritten workshop reflection. */
.workshop-message .love-word { color: #c82535; animation: love-blink 2s ease-in-out infinite; }
@keyframes love-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .workshop-message .love-word { animation: none; } }

/* Keep the reflection together on desktop; allow natural wrapping on smaller screens. */
@media (min-width: 1024px) { .workshop-reflection { white-space: nowrap; } }
.workshop-message .december-word { font-weight: 700; }


/* Workshop news: one handwritten line and a circled link to the Shopify sign-up page. */
.notify { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; margin: 40px 0 0 min(.637vw, 11px); color: #111; font-family: 'Bradley Hand', 'Segoe Print', 'Comic Sans MS', cursive; }
.notify-lead { margin: 0; font-size: calc(clamp(20px, 1.6vw, 26px) - 2pt); line-height: 1.5; }
.notify-submit { position: relative; display: inline-block; padding: 10px 24px; color: var(--accent); font-size: 22px; text-decoration: none; transform: rotate(-3deg); transition: transform 160ms ease; }
.notify-submit svg { position: absolute; inset: -2px -6px; width: calc(100% + 12px); height: calc(100% + 4px); pointer-events: none; }
.notify-submit:hover, .notify-submit:focus-visible { transform: rotate(2deg) translateY(-1px); }
.notify-submit:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
@media (max-width: 760px) {
  .notify { margin: 36px 0 0; }
  .notify-lead { font-size: calc(clamp(19px, 4.8vw, 24px) - 2pt); }
  .notify-submit { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .notify-submit, .notify-submit:hover, .notify-submit:focus-visible { transition: none; transform: rotate(-3deg); } }