/* ============================================================
   FORMA - the print shop
   One paper, one ink. The ink changes with the material
   you browse: every token below is keyed off [data-ink].
   Shape system: all-sharp (radius 0) everywhere, like print.
   ============================================================ */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../assets/fonts/bricolage-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('../assets/fonts/spacemono-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('../assets/fonts/spacemono-700-latin.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* ---------- ink set (vivid for graphics, deep for text/buttons) ---------- */
[data-ink="all"]       { --ink:#0078bf; --ink-deep:#00568a; }
[data-ink="Ceramics"]  { --ink:#ff6c2f; --ink-deep:#b8430e; }
[data-ink="Baking"]    { --ink:#e8a200; --ink-deep:#7a5c05; }
[data-ink="Floristry"] { --ink:#00a95c; --ink-deep:#04693c; }
[data-ink="Painting"]  { --ink:#ff48b0; --ink-deep:#b5187c; }

:root {
  --paper:#f3f1ea;
  --paper-hi:#fbf9f3;
  --ink-text:#1e1d1b;
  --ink-mute:#57524c;
  --ink-faint:#8a847c;
  --hairline:color-mix(in srgb, #1e1d1b 16%, transparent);
  --header-h:76px;
  --font-display:'Bricolage Grotesque', 'Arial Black', sans-serif;
  --font-mono:'Space Mono', 'Courier New', monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}

* { box-sizing:border-box; margin:0; padding:0; }

[hidden] { display:none !important; }

html { scroll-behavior:smooth; }

body {
  background:var(--paper);
  color:var(--ink-text);
  font-family:var(--font-display);
  font-optical-sizing:auto;
  font-size:16px;
  line-height:1.5;
  min-height:100dvh;
  overflow-x:hidden;
  transition:background .3s;
}
body.dialog-open { overflow:hidden; }

::selection { background:var(--ink); color:var(--paper-hi); }

:focus-visible {
  outline:3px solid var(--ink-deep);
  outline-offset:2px;
}

img { display:block; max-width:100%; }

button, input, select { font:inherit; color:inherit; }

.skip {
  position:fixed;
  top:-60px;
  left:16px;
  z-index:100;
  background:var(--ink-text);
  color:var(--paper-hi);
  padding:10px 18px;
  font-family:var(--font-mono);
  font-size:13px;
  text-decoration:none;
  transition:top .2s;
}
.skip:focus { top:12px; }

/* ---------- re-inked atmosphere blobs ---------- */
.blob {
  position:fixed;
  z-index:0;
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(closest-side, var(--ink), transparent 72%);
  opacity:.13;
  transition:background .4s;
}
.blob-a { width:46vw; height:46vw; top:-12vw; right:-10vw; }
.blob-b { width:40vw; height:40vw; bottom:-16vw; left:-12vw; opacity:.10; }

/* ---------- masthead ---------- */
.masthead {
  position:sticky;
  top:0;
  z-index:40;
  height:var(--header-h);
  display:flex;
  align-items:center;
  gap:24px;
  padding-inline:clamp(20px, 4vw, 56px);
  background:var(--paper);
  border-bottom:2px solid var(--ink);
  transition:border-color .3s;
}
.wordmark {
  font-weight:800;
  font-size:30px;
  letter-spacing:-.03em;
  text-decoration:none;
  color:var(--ink-text);
  line-height:1;
}
.wordmark-dot { color:var(--ink); transition:color .3s; }
.masthead-tag {
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--ink-mute);
  letter-spacing:.02em;
}
.pin-count {
  margin-left:auto;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--ink-deep);
  transition:color .3s;
}

main { position:relative; z-index:1; }

/* ---------- hero ---------- */
.hero {
  display:grid;
  grid-template-columns:minmax(0, 6fr) minmax(0, 5fr);
  align-items:center;
  gap:clamp(24px, 4vw, 64px);
  padding:clamp(32px, 5vh, 64px) clamp(20px, 4vw, 56px) clamp(40px, 7vh, 80px);
  min-height:calc(100dvh - var(--header-h));
}
.hero-copy { max-width:760px; }
.hero-title {
  font-weight:800;
  font-size:clamp(2.9rem, 6.6vw, 6.4rem);
  line-height:1.04;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.ink-block {
  display:inline-block;
  background:var(--ink);
  color:var(--paper-hi);
  padding:.02em .14em .06em;
  transform:rotate(-1.5deg);
  transition:background .3s;
}
.hero-sub {
  margin-top:26px;
  font-size:clamp(1.05rem, 1.35vw, 1.25rem);
  font-weight:450;
  max-width:52ch;
  color:color-mix(in srgb, var(--ink-text) 86%, transparent);
}
.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:34px;
}
.btn {
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:2px solid var(--ink-deep);
  padding:15px 26px;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.06em;
  text-decoration:none;
  cursor:pointer;
  background:transparent;
  color:var(--ink-text);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s, color .18s, border-color .3s;
}
.btn:active { transform:translate(1px, 1px) scale(.985); }
.btn-solid {
  background:var(--ink-deep);
  color:var(--paper-hi);
}
.btn-solid:hover { transform:translate(-2px,-2px); box-shadow:5px 5px 0 color-mix(in srgb, var(--ink) 40%, transparent); }
.btn-ghost:hover { background:color-mix(in srgb, var(--ink) 12%, transparent); }

/* hero collage: one photo per material, taped to the paper */
.collage {
  position:relative;
  height:min(640px, 62vh);
}
.collage figure {
  position:absolute;
  padding:10px 10px 14px;
  background:var(--paper-hi);
  box-shadow:0 1px 0 color-mix(in srgb, #1e1d1b 10%, transparent);
  transition:transform .35s var(--ease);
}
.collage img { width:100%; height:100%; object-fit:cover; }
.collage .ph { overflow:hidden; position:relative; height:100%; }
.collage .ph img { filter:grayscale(1) contrast(1.05); }
.collage .wash {
  position:absolute;
  inset:0;
  background:var(--ink);
  mix-blend-mode:screen;
  opacity:.62;
  transition:opacity .35s;
}
.collage .dots {
  position:absolute;
  inset:0;
  background-image:radial-gradient(color-mix(in srgb, var(--paper-hi) 55%, transparent) 1px, transparent 1.4px);
  background-size:6px 6px;
  mix-blend-mode:screen;
  pointer-events:none;
}
.collage figure::before,
.collage figure::after {
  content:"";
  position:absolute;
  width:84px;
  height:24px;
  background:color-mix(in srgb, #e9e4d6 72%, transparent);
  border:1px solid color-mix(in srgb, #1e1d1b 8%, transparent);
  box-shadow:0 1px 2px color-mix(in srgb, #1e1d1b 12%, transparent);
}
.collage figure::before { top:-12px; left:18px; transform:rotate(-5deg); }
.collage figure::after { bottom:-12px; right:14px; transform:rotate(4deg); }

.collage .c1 { width:47%; aspect-ratio:4/3.4; top:0; left:0; transform:rotate(-4deg); z-index:2; }
.collage .c2 { width:44%; aspect-ratio:4/3; top:3%; right:1%; transform:rotate(3deg); }
.collage .c3 { width:43%; aspect-ratio:4/3.2; bottom:2%; left:3%; transform:rotate(2.5deg); }
.collage .c4 { width:46%; aspect-ratio:4/3.4; bottom:0; right:0; transform:rotate(-3deg); z-index:2; }
.collage .c1:hover { transform:rotate(-1deg) scale(1.02); z-index:5; }
.collage .c2:hover { transform:rotate(1deg) scale(1.02); z-index:5; }
.collage .c3:hover { transform:rotate(0deg) scale(1.02); z-index:5; }
.collage .c4:hover { transform:rotate(-1deg) scale(1.02); z-index:5; }
.collage figure:hover .wash { opacity:0; }
.collage figure:hover img { filter:none; }

/* ---------- marquee: the material roll call ---------- */
.marquee {
  overflow:hidden;
  border-block:2px solid var(--ink);
  background:var(--paper-hi);
  padding-block:12px;
  transition:border-color .3s;
}
.marquee-track {
  display:flex;
  gap:0;
  width:max-content;
  animation:roll 22s linear infinite;
}
.marquee-track span {
  font-family:var(--font-mono);
  font-weight:700;
  font-size:19px;
  letter-spacing:.14em;
  white-space:nowrap;
  padding-right:3.2em;
  color:var(--ink-deep);
}
@keyframes roll { to { transform:translateX(-50%); } }

/* ---------- console (search + material + shortlist) ---------- */
.console {
  position:sticky;
  top:var(--header-h);
  z-index:30;
  display:flex;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:clamp(16px, 2.5vw, 40px);
  padding:18px clamp(20px, 4vw, 56px);
  background:var(--paper);
  border-bottom:2px solid var(--ink);
  transition:border-color .3s;
}
.console-field {
  display:flex;
  flex-direction:column;
  gap:7px;
}
.console-field label {
  font-family:var(--font-mono);
  font-weight:700;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--ink-mute);
}
.console-field input,
.console-field select {
  appearance:none;
  -webkit-appearance:none;
  border:2px solid var(--ink-text);
  background:var(--paper-hi);
  padding:11px 14px;
  font-family:var(--font-mono);
  font-size:14px;
  min-width:220px;
  border-radius:0;
}
.console-field select {
  padding-right:38px;
  background-image:linear-gradient(45deg, transparent 49%, var(--ink-text) 50%, var(--ink-text) 58%, transparent 59%),
                   linear-gradient(-45deg, transparent 49%, var(--ink-text) 50%, var(--ink-text) 58%, transparent 59%);
  background-position:calc(100% - 22px) 55%, calc(100% - 15px) 55%;
  background-size:7px 7px;
  background-repeat:no-repeat;
  cursor:pointer;
}
.console-field input::placeholder { color:var(--ink-mute); }
.console-field input:focus,
.console-field select:focus { border-color:var(--ink-deep); }

.saved-btn {
  margin-left:auto;
  border:2px solid var(--ink-text);
  background:var(--paper-hi);
  padding:13px 22px;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.06em;
  cursor:pointer;
  border-radius:0;
  transition:background .18s, color .18s, border-color .18s;
}
.saved-btn[aria-pressed="true"] {
  background:var(--ink-text);
  color:var(--paper-hi);
  border-color:var(--ink-text);
}
.saved-btn:hover { border-color:var(--ink-deep); }

/* ---------- program ---------- */
.program {
  max-width:1280px;
  margin-inline:auto;
  padding:clamp(36px, 5vh, 64px) clamp(20px, 4vw, 56px) clamp(60px, 8vh, 110px);
}
.program-head {
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:18px;
  margin-bottom:30px;
}
.program-head h2 {
  font-weight:800;
  font-size:clamp(1.9rem, 3vw, 2.7rem);
  letter-spacing:-.03em;
  line-height:1.1;
}
.program-count {
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--ink-mute);
}

.grid {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:clamp(18px, 2vw, 30px);
}
.grid .t-wide { grid-column:span 2; }

.ticket {
  display:flex;
  flex-direction:column;
  background:var(--paper-hi);
  border:2px solid var(--ink-text);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.ticket:hover {
  transform:translate(-4px,-4px);
  box-shadow:9px 9px 0 color-mix(in srgb, var(--ink) 38%, transparent);
}
.ticket-photo {
  position:relative;
  overflow:hidden;
  aspect-ratio:4/3;
  border-bottom:2px solid var(--ink-text);
  flex-shrink:0;
}
.t-wide .ticket-photo { aspect-ratio:16/7; }
.ticket-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(.55) contrast(1.02);
  transition:filter .4s;
}
.ticket-photo .wash {
  position:absolute;
  inset:0;
  background:var(--ink);
  mix-blend-mode:screen;
  opacity:.34;
  transition:opacity .4s;
}
.ticket:hover .ticket-photo img { filter:none; }
.ticket:hover .ticket-photo .wash { opacity:0; }

.ticket-body {
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px 18px 18px;
  flex:1;
}
.ticket-topline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.stamp {
  font-family:var(--font-mono);
  font-weight:700;
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--ink-deep);
  transition:color .3s;
}
.pin-stamp {
  font-family:var(--font-mono);
  font-weight:700;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--ink-deep);
  border:2px solid var(--ink-deep);
  padding:2px 7px;
  transform:rotate(-6deg);
  transition:color .3s, border-color .3s;
}
.ticket-title {
  font-weight:800;
  font-size:clamp(1.25rem, 1.6vw, 1.5rem);
  line-height:1.12;
  letter-spacing:-.02em;
}
.ticket-facts {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 14px;
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--ink-mute);
  margin-top:auto;
}
.ticket-facts dt {
  font-family:var(--font-mono);
  font-size:9.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--ink-mute);
  margin-bottom:2px;
}
.ticket-facts b {
  font-weight:700;
  color:var(--ink-text);
}
.ticket-open {
  align-self:flex-start;
  background:none;
  border:none;
  padding:2px 0;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ink-deep);
  cursor:pointer;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:4px;
  transition:color .3s;
}
.ticket-open:hover { color:var(--ink-text); }

/* ---------- empty state ---------- */
.empty {
  border:2px dashed var(--ink-faint);
  padding:clamp(36px, 6vh, 72px) clamp(20px, 4vw, 56px);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  margin-top:8px;
}
.empty-title {
  font-weight:800;
  font-size:clamp(1.4rem, 2.2vw, 1.9rem);
  letter-spacing:-.02em;
}
.empty-note {
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--ink-mute);
  max-width:46ch;
}
.empty-actions {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin-top:14px;
}

/* ---------- detail dialog ---------- */
.dialog-root {
  position:fixed;
  inset:0;
  z-index:80;
  display:grid;
  place-items:center;
  padding:clamp(14px, 3vw, 48px);
}
.dialog-backdrop {
  position:absolute;
  inset:0;
  background:color-mix(in srgb, var(--ink-deep) 92%, black);
  transition:background .3s;
}
.dialog-card {
  position:relative;
  z-index:1;
  width:min(1060px, 100%);
  max-height:100%;
  overflow:auto;
  background:var(--paper-hi);
  border:2px solid var(--ink-text);
  box-shadow:14px 14px 0 color-mix(in srgb, black 30%, transparent);
  display:grid;
  grid-template-columns:minmax(0, 5fr) minmax(0, 6fr);
}
.dialog-close {
  position:absolute;
  top:14px;
  right:14px;
  z-index:2;
  border:2px solid var(--ink-text);
  background:var(--paper-hi);
  padding:9px 16px;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  cursor:pointer;
  border-radius:0;
}
.dialog-close:hover { background:var(--ink-text); color:var(--paper-hi); }
.dialog-photo {
  position:relative;
  overflow:hidden;
  min-height:320px;
  border-right:2px solid var(--ink-text);
}
.dialog-photo img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(.4);
}
.dialog-photo .wash {
  position:absolute;
  inset:0;
  background:var(--ink);
  mix-blend-mode:screen;
  opacity:.5;
  transition:opacity .4s;
}
.dialog-info {
  padding:clamp(22px, 3vw, 44px);
  display:flex;
  flex-direction:column;
  gap:16px;
}
.dialog-title {
  font-weight:800;
  font-size:clamp(1.8rem, 3vw, 2.6rem);
  line-height:1.06;
  letter-spacing:-.03em;
}
.dialog-body {
  font-weight:450;
  font-size:clamp(1rem, 1.2vw, 1.1rem);
  max-width:58ch;
}
.dialog-facts {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-block:6px;
}
.fact {
  border:2px solid var(--hairline);
  padding:10px 12px;
}
.fact dt {
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--ink-mute);
  margin-bottom:4px;
}
.fact dd {
  font-family:var(--font-mono);
  font-weight:700;
  font-size:14px;
}
.dialog-save {
  align-self:flex-start;
  margin-top:auto;
  padding:16px 26px;
}
.dialog-note {
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--ink-mute);
}
.dialog-save[aria-pressed="true"] {
  background:var(--paper-hi);
  color:var(--ink-deep);
}

/* ---------- ink splats ---------- */
.splat-layer {
  position:fixed;
  inset:0;
  z-index:60;
  pointer-events:none;
}
.splat {
  position:absolute;
  background:var(--ink);
  border-radius:50%;
  transform:translate(-50%,-50%) scale(0);
  animation:splat .85s var(--ease) forwards;
}
.splat.s0 { border-radius:58% 42% 55% 45% / 52% 48% 52% 48%; }
.splat.s1 { border-radius:45% 55% 40% 60% / 60% 40% 55% 45%; }
.splat.s2 { border-radius:52% 48% 60% 40% / 42% 58% 45% 55%; }
@keyframes splat {
  0%   { transform:translate(-50%,-50%) scale(0); opacity:0; }
  18%  { transform:translate(-50%,-50%) scale(1); opacity:.75; }
  100% { transform:translate(-38%,-42%) scale(1.25); opacity:0; }
}

/* ---------- footer ---------- */
.site-foot {
  border-top:2px solid var(--ink);
  padding:clamp(30px, 4vh, 52px) clamp(20px, 4vw, 56px);
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:10px 40px;
  transition:border-color .3s;
}
.site-foot .wordmark { font-size:22px; }
.site-foot p {
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--ink-mute);
  max-width:64ch;
}
.site-foot .foot-note { margin-left:auto; color:var(--ink-mute); }

/* ---------- entrance ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * {
    animation:rise .7s var(--ease) backwards;
  }
  .hero-copy > :nth-child(2) { animation-delay:.08s; }
  .hero-copy > :nth-child(3) { animation-delay:.16s; }
  .collage figure { animation:pin .6s var(--ease) backwards; }
  .collage .c2 { animation-delay:.07s; }
  .collage .c3 { animation-delay:.14s; }
  .collage .c4 { animation-delay:.21s; }
}
@keyframes rise {
  from { opacity:0; transform:translateY(22px); }
  to   { opacity:1; transform:none; }
}
@keyframes pin {
  from { opacity:0; transform:translateY(14px) rotate(0deg) scale(.96); }
  to   { opacity:1; }
}

/* ---------- responsive ---------- */
@media (max-width:1120px) {
  .grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:900px) {
  .hero {
    grid-template-columns:1fr;
    min-height:0;
    padding-bottom:48px;
  }
  .collage { height:auto; display:grid; grid-template-columns:1fr 1fr; gap:18px 14px; padding-top:8px; }
  .collage figure { position:static; width:auto; aspect-ratio:4/3; }
  .masthead-tag { display:none; }
  .console { position:static; }
  .console-field,
  .console-field input,
  .console-field select { width:100%; min-width:0; }
  .console { flex-direction:column; align-items:stretch; }
  .saved-btn { margin-left:0; }
  .dialog-card { grid-template-columns:1fr; }
  .dialog-photo { min-height:230px; border-right:none; border-bottom:2px solid var(--ink-text); }
  .dialog-facts { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:560px) {
  .grid { grid-template-columns:1fr; }
  .grid .t-wide { grid-column:auto; }
  .t-wide .ticket-photo { aspect-ratio:4/3; }
  .pin-count { font-size:11px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .marquee-track { animation:none; }
  .splat { animation:none; opacity:0; }
  .ticket, .collage figure, .btn, .ticket-photo img, .ticket-photo .wash, .collage .wash { transition:none; }
  .ticket:hover { transform:none; }
  .collage figure:hover { transform:none; }
}