/* ══════════════════════════════════════════════════════════════════════════
   craftworkshops.london

   A material archive rather than a directory. The organising idea: every
   surface on the site is a material — paper for pages, a photographed swatch
   for each category — and type is set directly onto it. No cards floating on
   grey, no rounded corners, no drop shadows, no gradient buttons.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. materials ───────────────────────────────────────────────────────── */
:root {
  --paper:      #f2eee6;
  --paper-sunk: #e7e0d2;
  --paper-rise: #f9f6f0;
  --ink:        #1b1815;
  --ink-soft:   #5f564b;
  --ink-faint:  #8c8173;
  --rule:       #cdc2af;
  --rule-soft:  #ded5c5;

  --madder:     #a63a2b;
  --indigo:     #2e4272;
  --verdigris:  #47786a;
  --brass:      #a8762f;

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --text:    "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Elevation. The page is still paper, but paper has thickness — each layer
     gets a contact shadow plus a wider, softer cast shadow. */
  --lift-1: 0 1px 1px rgba(40,32,22,.04), 0 2px 6px -3px rgba(40,32,22,.10);
  --lift-2: 0 1px 2px rgba(40,32,22,.05), 0 10px 24px -12px rgba(40,32,22,.24);
  --lift-3: 0 2px 6px rgba(40,32,22,.07), 0 26px 46px -22px rgba(40,32,22,.36);
  --edge:   inset 0 1px 0 rgba(255,253,248,.55);

  --bar-h: 3.25rem;
  --gutter: clamp(1rem, 3.5vw, 2.75rem);
  --wrap: 1240px;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #15130f; --paper-sunk: #0f0d0a; --paper-rise: #1e1b15;
    --ink: #ece4d4; --ink-soft: #a99e8b; --ink-faint: #7d7362;
    --rule: #3a352b; --rule-soft: #2a261e;
    --madder: #d9705c; --indigo: #8ba3d8; --verdigris: #79b39f; --brass: #d3a75f;
    --lift-1: 0 1px 1px rgba(0,0,0,.30), 0 2px 6px -3px rgba(0,0,0,.45);
    --lift-2: 0 1px 2px rgba(0,0,0,.35), 0 10px 24px -12px rgba(0,0,0,.65);
    --lift-3: 0 2px 6px rgba(0,0,0,.40), 0 26px 46px -22px rgba(0,0,0,.80);
    --edge:   inset 0 1px 0 rgba(255,246,230,.07);
  }
}
:root[data-theme="dark"] {
  --paper: #15130f; --paper-sunk: #0f0d0a; --paper-rise: #1e1b15;
  --ink: #ece4d4; --ink-soft: #a99e8b; --ink-faint: #7d7362;
  --rule: #3a352b; --rule-soft: #2a261e;
  --madder: #d9705c; --indigo: #8ba3d8; --verdigris: #79b39f; --brass: #d3a75f;
  --lift-1: 0 1px 1px rgba(0,0,0,.30), 0 2px 6px -3px rgba(0,0,0,.45);
  --lift-2: 0 1px 2px rgba(0,0,0,.35), 0 10px 24px -12px rgba(0,0,0,.65);
  --lift-3: 0 2px 6px rgba(0,0,0,.40), 0 26px 46px -22px rgba(0,0,0,.80);
  --edge:   inset 0 1px 0 rgba(255,246,230,.07);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: clamp(1rem, .96rem + .18vw, 1.06rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* the page itself is a sheet of paper */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: var(--paper) url("img/paper-ground.jpg") repeat;
  background-size: 900px;
  opacity: .38;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body::before { opacity: .10; }
}
:root[data-theme="dark"] body::before { opacity: .10; }

.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 9;
  opacity: .16; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .grain { mix-blend-mode: screen; opacity: .05; }
}
:root[data-theme="dark"] .grain { mix-blend-mode: screen; opacity: .05; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; }

a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: .22em; }
a:hover { text-decoration-color: var(--madder); }
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--madder); outline-offset: 3px;
}

/* all the drawn glyphs are line art — catch every *__mark class in one rule */
svg.mark, svg[class$="__mark"] {
  fill: none; stroke: currentColor; stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.eyebrow {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .7rem;
}
.eyebrow a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.poa { font-family: var(--mono); font-size: .8em; color: var(--ink-faint); }
.from { font-family: var(--mono); font-size: .78em; color: var(--ink-faint); }

/* ── 2. the bar — two rows: identity+tools, then categories ─────────────── */
.bar {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid var(--rule);
}
.bar__top {
  display: flex; align-items: center; gap: clamp(.6rem, 1.8vw, 1.5rem);
  padding: 0 var(--gutter); height: var(--bar-h);
}
.bar__mark {
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  font-variation-settings: "opsz" 40, "SOFT" 20, "WONK" 1;
  letter-spacing: -.02em; text-decoration: none; white-space: nowrap;
  display: flex; align-items: baseline; gap: .1em; flex: none;
}
.bar__mark em { font-style: italic; font-weight: 400; color: var(--ink-soft); }

/* ── search ─────────────────────────────────────────────────────────────── */
.search {
  position: relative; flex: 1 1 auto; min-width: 0; max-width: 30rem;
  margin-inline: auto; display: flex; align-items: center;
}
.search__in { min-width: 0; }
.search__icon {
  position: absolute; left: .65rem; width: 1rem; height: 1rem; pointer-events: none;
  fill: none; stroke: var(--ink-faint); stroke-width: 1.5; stroke-linecap: round;
}
.search__in {
  width: 100%; font: inherit; font-size: .85rem; color: var(--ink);
  background: var(--paper-rise); border: 1px solid var(--rule-soft);
  padding: .45em .5em .45em 2.1rem; border-radius: 0;
  box-shadow: var(--lift-1);
  transition: border-color .16s, box-shadow .16s;
  -webkit-appearance: none; appearance: none;
}
.search__in::-webkit-search-cancel-button { display: none; }
.search__in::placeholder { color: var(--ink-faint); }
.search__in:focus {
  outline: none; border-color: var(--ink); box-shadow: var(--lift-2);
}
.search__clear {
  position: absolute; right: .35rem; border: 0; background: none; cursor: pointer;
  color: var(--ink-faint); font-size: 1.15rem; line-height: 1; padding: .15em .3em;
}
.search__clear:hover { color: var(--madder); }

.results {
  position: absolute; top: calc(100% + .35rem); left: 0; right: 0; z-index: 40;
  max-height: min(60vh, 26rem); overflow-y: auto;
  background: var(--paper-rise); border: 1px solid var(--rule);
  box-shadow: var(--lift-3);
}
.result {
  display: grid; grid-template-columns: 5.2rem 1fr; gap: .1rem .7rem;
  grid-template-areas: "kind title" "kind sub";
  padding: .55rem .8rem; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--rule-soft);
}
.result:last-child { border-bottom: 0; }
.result:hover, .result.is-active { background: var(--paper-sunk); }
.result__k {
  grid-area: kind; align-self: center;
  font-family: var(--mono); font-size: .56rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint);
}
.result__t {
  grid-area: title; font-family: var(--display); font-weight: 500; font-size: .95rem;
  font-variation-settings: "opsz" 24, "SOFT" 22, "WONK" 0; line-height: 1.25;
}
.result__s {
  grid-area: sub; font-family: var(--mono); font-size: .66rem; color: var(--ink-faint);
  line-height: 1.45;
}
.result b { color: var(--madder); font-weight: 600; }
.results__none { margin: 0; padding: .9rem; font-size: .85rem; color: var(--ink-faint); }

.bar__cal {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; white-space: nowrap; text-decoration: none;
  color: var(--ink); border: 1px solid var(--ink); padding: .5em .8em; flex: none;
  transition: background-color .18s, color .18s;
}
.bar__cal:hover { background: var(--ink); color: var(--paper); }
.bar__navcal { display: none; }

/* ── burger ─────────────────────────────────────────────────────────────── */
.burger {
  display: none; flex: none; width: 2.2rem; height: 2.2rem; padding: 0;
  background: none; border: 1px solid var(--rule); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.burger span {
  display: block; width: 1.05rem; height: 1.25px; background: var(--ink);
  transition: transform .22s ease, opacity .18s ease;
}
body.nav-open .burger span:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { transform: translateY(-5.25px) rotate(-45deg); }

/* ── row two: the category buttons ──────────────────────────────────────── */
.bar__nav {
  display: flex; align-items: stretch; gap: clamp(.15rem, .9vw, .9rem);
  padding: 0 var(--gutter); height: 2.5rem;
  border-top: 1px solid var(--rule-soft);
}
.navitem { position: relative; display: flex; align-items: center; }
.navitem__top {
  font-size: .82rem; white-space: nowrap; text-decoration: none;
  color: var(--ink-soft); padding: .3em .5em; border-bottom: 2px solid transparent;
  transition: color .16s, border-color .16s;
}
.navitem:hover .navitem__top,
.navitem:focus-within .navitem__top { color: var(--ink); border-bottom-color: var(--madder); }

.navmenu {
  position: absolute; top: 100%; left: -.25rem; z-index: 40;
  padding-top: .2rem; min-width: 15.5rem;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.navitem:hover .navmenu,
.navitem:focus-within .navmenu { opacity: 1; visibility: visible; transform: none; }
.navmenu__in {
  display: flex; flex-direction: column;
  background: var(--paper-rise); border: 1px solid var(--rule);
  box-shadow: var(--lift-3);
}
.navmenu a {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .8rem; text-decoration: none; color: var(--ink-soft);
  font-size: .82rem; white-space: nowrap;
  border-bottom: 1px solid var(--rule-soft);
  transition: background-color .14s, color .14s;
}
.navmenu a:last-child { border-bottom: 0; }
.navmenu a:hover { background: var(--paper-sunk); color: var(--ink); }
.navmenu a span { margin-right: auto; }
.navmenu a i {
  font-style: normal; font-family: var(--mono); font-size: .66rem;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.navmenu__mark { width: 1.05rem; height: 1.05rem; flex: none; color: var(--verdigris); }
.navmenu__all {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; background: var(--paper-sunk);
}

/* ── narrow: row two collapses behind the burger ─────────────────────────── */
@media (max-width: 62rem) {
  .burger { display: flex; }
  .bar__cal { display: none; }
  .search { margin-inline: 0; }
  .bar__nav {
    display: none; height: auto; flex-direction: column; align-items: stretch;
    padding: .4rem var(--gutter) .8rem;
    max-height: calc(100dvh - var(--bar-h)); overflow-y: auto;
  }
  body.nav-open .bar__nav { display: flex; }
  .navitem { display: block; }
  .navitem__top {
    display: block; padding: .7rem .2rem; font-size: .95rem; color: var(--ink);
    border-bottom: 1px solid var(--rule-soft);
  }
  /* on a touch screen the sub-menu is always shown, indented under its parent */
  .navmenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    padding: 0 0 .5rem .9rem; min-width: 0;
  }
  .navmenu__in { border: 0; background: none; box-shadow: none; }
  .navmenu a { padding: .45rem .2rem; border-bottom: 0; font-size: .85rem; }
  .navmenu a.navmenu__all { display: none; }
  /* the calendar button is hidden up here, so it reappears in the panel */
  .bar__navcal {
    display: block; margin-top: .5rem; padding: .7rem .2rem;
    border-top: 1px solid var(--rule);
    font-family: var(--mono); font-size: .72rem; letter-spacing: .12em;
    text-transform: uppercase; text-decoration: none; color: var(--madder);
  }
}
@media (max-width: 40rem) {
  .search__in { font-size: 16px; }   /* iOS zooms anything under 16px on focus */
}

.crumb {
  width: min(100% - (var(--gutter) * 2), var(--wrap)); margin: 1.1rem auto 0;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
  display: flex; flex-wrap: wrap; gap: .5em;
}
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--ink); }
.crumb > * + *::before { content: "/ "; color: var(--rule); }

/* ── 3. home banner — a title and a line, not a splash ────────────────────── */
.banner {
  border-bottom: 1px solid var(--rule);
  padding: clamp(1.1rem, 2.4vw, 1.7rem) 0 clamp(.9rem, 1.8vw, 1.3rem);
  margin-bottom: clamp(1.3rem, 3vw, 2rem);
}
.banner__in {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .25rem 1.1rem;
}
.banner__h {
  font-family: var(--display); font-weight: 600;
  font-variation-settings: "opsz" 96, "SOFT" 20, "WONK" 1;
  font-size: clamp(1.35rem, 2.6vw, 1.95rem); line-height: 1.1;
  letter-spacing: -.02em; margin: 0;
}
.banner__sub {
  margin: 0; color: var(--ink-soft); font-size: .93rem; line-height: 1.5;
}
.banner__sub span {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--madder); white-space: nowrap;
  margin-left: .35rem;
}
@media (max-width: 40rem) { .banner__sub span { display: block; margin: .4rem 0 0; } }

/* ── 4. tiles ──────────────────────────────────────────────────────────── */
.shelf {
  display: grid;
  gap: clamp(.8rem, 1.5vw, 1.15rem);          /* real spacing, not hairline gaps */
  grid-template-columns: 1fr;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
@media (min-width: 34rem) { .shelf { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .shelf { grid-template-columns: repeat(4, 1fr); } }

/* every tile is the same size; the craft shelf just inherits the same grid */
.shelf--d { grid-template-columns: 1fr; }
@media (min-width: 34rem) { .shelf--d { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .shelf--d { grid-template-columns: repeat(4, 1fr); } }

.tile {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: .5rem;
  min-height: 14.5rem; padding: 1.2rem 1.15rem 1.05rem;
  background: var(--paper-rise); color: var(--ink);
  border: 1px solid var(--rule-soft);
  box-shadow: var(--lift-1);
  text-decoration: none;
  transition: box-shadow .3s cubic-bezier(.22,.61,.36,1),
              transform .3s cubic-bezier(.22,.61,.36,1),
              border-color .3s;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--lift-3); border-color: var(--rule); }

.tile--g, .tile--d {
  color: #f4f0e8; min-height: 15.5rem;
  background-color: #14120e; background-size: cover; background-position: center;
  border-color: rgba(20,18,14,.5);
}
/* a three-stop scrim reads with more depth than a two-stop one */
.tile--g::after, .tile--d::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(12,10,8,.92) 0%, rgba(12,10,8,.68) 34%,
                            rgba(12,10,8,.40) 62%, rgba(12,10,8,.26) 100%),
    radial-gradient(120% 90% at 50% 0%, rgba(255,246,230,.10) 0%, transparent 60%);
  transition: background .35s;
}
.tile--g:hover::after, .tile--d:hover::after {
  background:
    linear-gradient(to top, rgba(12,10,8,.94) 0%, rgba(12,10,8,.74) 36%,
                            rgba(12,10,8,.50) 64%, rgba(12,10,8,.34) 100%),
    radial-gradient(120% 90% at 50% 0%, rgba(255,246,230,.14) 0%, transparent 60%);
}
.tile--g > *, .tile--d > * { position: relative; z-index: 2; }

.tile__body { display: flex; flex-direction: column; gap: .35rem; }
.tile__name {
  font-family: var(--display); font-weight: 600;
  font-variation-settings: "opsz" 60, "SOFT" 22, "WONK" 1;
  font-size: clamp(1.1rem, 1.5vw, 1.32rem); line-height: 1.1;
  letter-spacing: -.016em;
  text-shadow: 0 1px 12px rgba(12,10,8,.55);
}
.tile--d .tile__name, .tile--g .tile__name { color: #fbf8f2; }
/* craft tiles carry no blurb, so a two-line name would otherwise ride higher
   than a one-line one across the row */
.tile--d .tile__name { min-height: calc(2 * 1.1em); }
.tile__blurb {
  font-size: .85rem; line-height: 1.45; opacity: .88;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(3 * 1.45em);        /* uniform tiles need a uniform text block */
}
.tile__list {
  font-family: var(--mono); font-size: .63rem; letter-spacing: .05em;
  opacity: .66; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.5em);
}
.tile__meta {
  font-family: var(--mono); font-size: .61rem; letter-spacing: .12em;
  text-transform: uppercase; opacity: .7;
  border-top: 1px solid rgba(244,240,232,.26); padding-top: .5rem; margin-top: .15rem;
}
.tile__mark {
  width: 1.5rem; height: 1.5rem; margin-bottom: .35rem;
  filter: drop-shadow(0 1px 6px rgba(12,10,8,.6));
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.tile--d:hover .tile__mark { transform: translateY(-2px); }

/* ── 5. page heads & page textures ───────────────────────────────────────── */
/* Category and craft pages carry their material as a full-page texture rather
   than a banded header, so the type sits on the material itself. */
.has-bg::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--page-bg);
  background-size: cover; background-position: center; background-attachment: fixed;
  opacity: .30;
}
.has-bg::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--paper) 72%, transparent) 0%,
    color-mix(in srgb, var(--paper) 88%, transparent) 38%,
    var(--paper) 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .has-bg::after { opacity: .18; }
}
:root[data-theme="dark"] .has-bg::after { opacity: .18; }

.phead {
  padding: clamp(1.1rem, 2.4vw, 1.7rem) 0 clamp(.8rem, 1.6vw, 1.2rem);
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(1.3rem, 3vw, 2rem);
}
/* title and count share a line; the blurb sits under them, capped at two lines.
   Same proportions as the home banner, so the two read as one system. */
.phead__top {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .3rem 1.4rem;
}
.phead h1 {
  font-family: var(--display); font-weight: 600;
  font-variation-settings: "opsz" 96, "SOFT" 20, "WONK" 1;
  font-size: clamp(1.35rem, 2.6vw, 1.95rem); line-height: 1.1;
  letter-spacing: -.02em; margin: 0;
}
.phead__blurb {
  margin: .4rem 0 0; font-size: .93rem; line-height: 1.5;
  color: var(--ink-soft); max-width: 78ch;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.phead__meta {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0; white-space: nowrap;
}

/* ── 6. discipline head ────────────────────────────────────────────────── */
.dhead {
  display: flex; gap: 1.3rem; align-items: flex-start;
  padding: clamp(1.6rem, 4vw, 2.8rem) 0 clamp(1.2rem, 3vw, 1.8rem);
}
.dhead__mark { width: 3.2rem; height: 3.2rem; flex: none; color: var(--verdigris); }
.dhead h1 {
  font-family: var(--display); font-weight: 600;
  font-variation-settings: "opsz" 144, "SOFT" 22, "WONK" 1;
  font-size: clamp(1.8rem, 4.6vw, 3rem); line-height: 1; letter-spacing: -.02em;
  margin: 0 0 .5rem;
}
.dhead__meta {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0;
}

.rule-h {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 500;
  margin: 0 0 1.1rem; display: flex; align-items: center; gap: 1rem;
}
.rule-h::after { content: ""; flex: 1; border-top: 1px solid var(--rule); order: 2; }
.rule-h i { font-style: normal; opacity: .7; order: 3; }

/* ── 7. workshop tiles ────────────────────────────────────────────────────── */
.wtiles {
  display: grid; gap: 1px; background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19.5rem), 1fr));
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
}
.wtile {
  background: var(--paper); padding: 1.15rem 1.2rem 1.1rem;
  display: flex; flex-direction: column; gap: .45rem;
  transition: background-color .22s;
}
.wtile:hover { background: var(--paper-rise); }
.wtile__top { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; min-height: 1.2rem; }
.wtile__craft {
  display: inline-flex; align-items: center; gap: .38em;
  font-family: var(--mono); font-size: .61rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-faint);
}
.wtile__mark { width: .95rem; height: .95rem; color: var(--verdigris); }
.wtile__title {
  font-family: var(--display); font-weight: 500;
  font-variation-settings: "opsz" 36, "SOFT" 22, "WONK" 0;
  font-size: 1.08rem; line-height: 1.22; letter-spacing: -.01em; margin: 0;
}
.wtile__title a { text-decoration: none; }
.wtile__title a:hover { text-decoration: underline; text-decoration-color: var(--madder); }
.wtile__maker { margin: 0; font-size: .85rem; color: var(--ink-soft); }
.wtile__maker a { text-decoration-color: var(--rule); }
.wtile__when {
  margin: 0; font-family: var(--mono); font-size: .71rem; color: var(--ink);
  line-height: 1.5;
}
.wtile__when .more, .dim { color: var(--ink-faint); }
.wtile__foot {
  display: flex; justify-content: space-between; align-items: baseline; gap: .8rem;
  margin-top: auto; padding-top: .7rem; border-top: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: .76rem; font-variant-numeric: tabular-nums;
}
.wtile__len { color: var(--ink-faint); }
.wtile__price { color: var(--ink); font-size: .9rem; }
.wtile__book {
  font-family: var(--mono); font-size: .63rem; letter-spacing: .11em;
  text-transform: uppercase; text-decoration: none; color: var(--ink-soft);
  border-top: 1px solid transparent; padding-top: .5rem;
  display: inline-flex; align-items: center; gap: .45em;
}
.wtile__book::after { content: "↗"; transition: transform .2s; }
.wtile__book:hover { color: var(--madder); }
.wtile__book:hover::after { transform: translate(2px, -2px); }

.tag {
  font-family: var(--mono); font-size: .57rem; letter-spacing: .1em;
  text-transform: uppercase; padding: .2em .45em;
  border: 1px solid currentColor; white-space: nowrap; display: inline-block;
}
.tag--sold { color: var(--madder); }
.tag--long { color: var(--brass); }
.tag--inferred { color: var(--indigo); }

/* ── 8. workshop page ──────────────────────────────────────────────────── */
.ws__head {
  padding: clamp(1.6rem, 4vw, 2.6rem) 0 clamp(1.2rem, 3vw, 1.8rem);
  border-bottom: 2.5px solid var(--ink); margin-bottom: clamp(1.6rem, 4vw, 2.4rem);
}
.ws__head h1 {
  font-family: var(--display); font-weight: 600;
  font-variation-settings: "opsz" 144, "SOFT" 22, "WONK" 1;
  font-size: clamp(1.75rem, 4.4vw, 3rem); line-height: 1.02; letter-spacing: -.022em;
  margin: 0 0 .5rem; max-width: 20ch; text-wrap: balance;
}
.ws__maker { margin: 0; color: var(--ink-soft); font-size: 1.02rem; }
.ws__maker b { color: var(--ink); font-weight: 600; }
.ws__tags { margin: .7rem 0 0; }
.ws__tags .tag { margin-left: 0; margin-right: .4em; }

.ws__grid { display: grid; gap: clamp(1.6rem, 4vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 58rem) { .ws__grid { grid-template-columns: 1.3fr .7fr; } }

.ws__note { margin: 0 0 1.6rem; font-size: 1.05rem; color: var(--ink-soft); max-width: 58ch; }
.ws__price {
  display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 1rem 0; margin-bottom: 1.4rem;
}
.ws__fig {
  font-family: var(--display); font-weight: 600;
  font-variation-settings: "opsz" 144, "SOFT" 10, "WONK" 0;
  font-size: clamp(2rem, 5vw, 3rem); line-height: 1; letter-spacing: -.03em;
}
.ws__per { font-family: var(--mono); font-size: .76rem; color: var(--ink-faint); }
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none;
  padding: .85em 1.3em; border: 1px solid var(--ink); color: var(--ink);
  transition: background-color .2s, color .2s;
}
.btn::after { content: "→"; transition: transform .2s; }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:hover::after { transform: translateX(3px); }
.ws__dis { font-size: .82rem; color: var(--ink-faint); margin: 1rem 0 0; max-width: 52ch; }
/* the check date is the one hard fact in the disclaimer — let it read as one */
.ws__checked { font-family: var(--mono); font-size: .95em;
               color: var(--ink-soft); white-space: nowrap; }

.ws__side { border-top: 1px solid var(--rule); padding-top: 1.2rem; }
.ws__mark { width: 2.6rem; height: 2.6rem; color: var(--verdigris); margin-bottom: 1rem; }
.facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; }
.facts dt {
  font-family: var(--mono); font-size: .63rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint); padding-top: .2em;
}
.facts dd { margin: 0; font-size: .9rem; }
.facts code { font-family: var(--mono); font-size: .86em; color: var(--ink-faint); }

.ws__more { margin-top: clamp(2.2rem, 5vw, 3.5rem); }
.minis {
  display: grid; gap: 1px; background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.mini {
  background: var(--paper); padding: 1.1rem 1.15rem; text-decoration: none;
  display: flex; flex-direction: column; gap: .4rem; transition: background-color .2s;
}
.mini:hover { background: var(--paper-rise); }
.mini__t {
  font-family: var(--display); font-weight: 500; font-size: .98rem; line-height: 1.24;
  font-variation-settings: "opsz" 24, "SOFT" 22, "WONK" 0;
}
.mini__m { font-family: var(--mono); font-size: .68rem; color: var(--ink-faint); line-height: 1.5; }

/* ── 9. bands & footer ─────────────────────────────────────────────────── */
.band {
  border-top: 1px solid var(--rule); padding: clamp(1.8rem, 4vw, 2.6rem) 0;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.band__h {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 500; margin: 0 0 1rem;
}
.band__grid {
  display: grid; gap: 1.4rem 2.4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.band__grid p { margin: 0; font-size: .93rem; color: var(--ink-soft); }
.band__grid b { color: var(--ink); }
.band__makers { margin: 0; color: var(--ink-soft); font-size: .93rem; }

.foot {
  --f-ink: #f2eee6;
  --f-dim: #a1978a;
  --f-rule: #37322a;
  margin-top: clamp(3rem, 7vw, 5rem);
  padding: clamp(2.2rem, 5vw, 3.4rem) 0 clamp(2rem, 4vw, 2.8rem);
  background: #14120e;
  color: var(--f-ink);
  border-top: 1px solid var(--f-rule);
}
.foot__grid {
  display: grid; gap: clamp(1.8rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 58rem) { .foot__grid { grid-template-columns: 1fr 1.15fr; } }

.foot__name {
  font-family: var(--display); font-weight: 700; font-size: 1.35rem;
  font-variation-settings: "opsz" 60, "SOFT" 20, "WONK" 1;
  letter-spacing: -.022em; margin: 0 0 .6rem; color: var(--f-ink);
}
.foot__name span { color: var(--madder); }
.foot__name em { font-style: italic; font-weight: 400; color: var(--f-dim); }
.foot__line { margin: 0; font-size: .88rem; color: var(--f-dim); max-width: 46ch; line-height: 1.65; }

.foot__cols {
  display: grid; gap: 1.6rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
}
.foot__cols h2 {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--f-dim); font-weight: 500;
  margin: 0 0 .7rem; padding-bottom: .5rem; border-bottom: 1px solid var(--f-rule);
}
.foot__cols a {
  display: block; font-size: .86rem; text-decoration: none; color: var(--f-ink);
  padding: .3rem 0; opacity: .82; transition: opacity .15s, color .15s;
}
.foot__cols a:hover { opacity: 1; color: var(--madder); }

/* ── 10. motion & print ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
  }
}
@media print {
  .grain, .bar, .foot__links, .btn { display: none; }
  body::before { display: none; }
  body { background: #fff; color: #000; }
}

/* ── 11. calendar ──────────────────────────────────────────────────────────── */
.calhead {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1rem 2.5rem; padding: clamp(1.4rem, 4vw, 2.4rem) 0 clamp(1rem, 2.5vw, 1.5rem);
  border-bottom: 2.5px solid var(--ink); margin-bottom: clamp(1.4rem, 3vw, 2rem);
}
.calhead h1 {
  font-family: var(--display); font-weight: 600;
  font-variation-settings: "opsz" 144, "SOFT" 22, "WONK" 1;
  font-size: clamp(1.9rem, 5vw, 3.1rem); line-height: 1; letter-spacing: -.024em; margin: 0;
}
.calhead__sub { margin: .6rem 0 0; color: var(--ink-soft); max-width: 58ch; font-size: .95rem; }
.calhead__jump { display: flex; flex-wrap: wrap; gap: .3rem; max-width: 34rem; }
.calhead__jump a {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-soft); border: 1px solid var(--rule-soft);
  padding: .4em .6em; transition: color .16s, border-color .16s;
}
.calhead__jump a:hover { color: var(--ink); border-color: var(--ink); }
.calhead__h2 {
  font-family: var(--display); font-weight: 600;
  font-variation-settings: "opsz" 96, "SOFT" 22, "WONK" 1;
  font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -.02em;
  margin: clamp(2rem, 5vw, 3.2rem) 0 .4rem;
}
.calhead__note { margin: 0 0 1.6rem; color: var(--ink-soft); font-size: .92rem; max-width: 62ch; }

.cal__month { margin-bottom: clamp(1.8rem, 4vw, 2.8rem); scroll-margin-top: 7rem; }
.cal__h {
  display: flex; align-items: baseline; gap: 1rem; margin: 0 0 .7rem;
  scroll-margin-top: 7rem;
}
.cal__h span {
  font-family: var(--display); font-weight: 600;
  font-variation-settings: "opsz" 72, "SOFT" 22, "WONK" 1;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem); letter-spacing: -.018em;
}
.cal__h i {
  font-style: normal; font-family: var(--mono); font-size: .63rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-faint);
}
.cal__h::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }

.cal__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.cal__row {
  display: grid; align-items: center; gap: .4rem 1.1rem;
  grid-template-columns: 3.6rem minmax(0, 1fr) 8.5rem 5.5rem 10rem;
  padding: .85rem .3rem; border-bottom: 1px solid var(--rule-soft);
  position: relative; transition: background-color .2s;
}
.cal__row:hover { background: var(--paper-rise); }
.cal__row.is-sold { opacity: .62; }
.cal__date {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid var(--rule); padding: .35rem .2rem; line-height: 1.1;
}
.cal__date b { font-family: var(--mono); font-size: .86rem; font-variant-numeric: tabular-nums; }
.cal__date i {
  font-style: normal; font-family: var(--mono); font-size: .56rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
}
.cal__body { min-width: 0; }
.cal__craft {
  display: inline-flex; align-items: center; gap: .35em;
  font-family: var(--mono); font-size: .58rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: .15rem;
}
.cal__mark { width: .85rem; height: .85rem; color: var(--verdigris); }
.cal__title {
  display: block; font-family: var(--display); font-weight: 500;
  font-variation-settings: "opsz" 30, "SOFT" 22, "WONK" 0;
  font-size: 1.02rem; line-height: 1.22; text-decoration: none;
}
.cal__title:hover { text-decoration: underline; text-decoration-color: var(--madder); }
.cal__maker { font-size: .82rem; color: var(--ink-soft); text-decoration-color: var(--rule); }
.cal__area { font-size: .82rem; color: var(--ink-faint); }
.cal__len, .cal__price {
  font-family: var(--mono); font-size: .74rem; font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
.cal__price { color: var(--ink); }
.cal__act { display: flex; align-items: center; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; }
.cal__book {
  font-family: var(--mono); font-size: .61rem; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: var(--ink); border: 1px solid var(--rule);
  padding: .45em .6em; white-space: nowrap; transition: background-color .18s, color .18s;
}
.cal__book:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (max-width: 68rem) {
  .cal__row {
    grid-template-columns: 3.6rem minmax(0, 1fr) auto;
    grid-template-areas: "date body body" ". meta act";
  }
  .cal__date { grid-area: date; align-self: start; }
  .cal__body { grid-area: body; }
  .cal__len { grid-area: meta; }
  .cal__price { grid-area: meta; justify-self: end; }
  .cal__act { grid-area: act; }
}
@media (max-width: 40rem) {
  .cal__row { grid-template-columns: 3.2rem minmax(0, 1fr); grid-template-areas: "date body" ". meta" ". act"; }
  .cal__price { justify-self: start; }
  .cal__act { justify-content: flex-start; }
}
.cal__standing { margin-bottom: clamp(1.6rem, 4vw, 2.4rem); }

/* dates list on a workshop page */
.dates { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.dates li {
  font-family: var(--mono); font-size: .82rem; padding: .45rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.dates li.is-sold { opacity: .62; }
.dates b { font-weight: 500; }

/* ── 12. maker page ────────────────────────────────────────────────────────── */
.mhead {
  display: grid; gap: clamp(1.2rem, 3vw, 2.6rem);
  grid-template-columns: 1fr; align-items: start;
  padding: clamp(1.4rem, 4vw, 2.4rem) 0 clamp(1.2rem, 3vw, 1.8rem);
  border-bottom: 2.5px solid var(--ink); margin-bottom: clamp(1.4rem, 3vw, 2rem);
}
@media (min-width: 58rem) { .mhead { grid-template-columns: 1.4fr .6fr; } }
.mhead h1 {
  font-family: var(--display); font-weight: 600;
  font-variation-settings: "opsz" 144, "SOFT" 22, "WONK" 1;
  font-size: clamp(1.8rem, 4.6vw, 2.9rem); line-height: 1.02; letter-spacing: -.022em;
  margin: 0 0 .6rem; text-wrap: balance;
}
.mhead__note { margin: 0 0 1.2rem; color: var(--ink-soft); max-width: 58ch; }
.mhead__side { border-top: 1px solid var(--rule); padding-top: 1rem; }