/* ═══════════════════════════════════════════════════════════════════
   THE WORKSHOP SHEET  ·  28 Oct 2026
   The seven set as a specimen sheet: type doing all the work, with the
   plate for the line being read standing beside it. Replaces the seven
   sisters of the Pleiades, which gave the page seven slots and a legend
   to explain them, and nothing else.

   The plates come from shared/workshop-plates.js. Each is the same
   chart wheel carrying only the feature that workshop teaches, so the
   image belongs to its entry and could not be moved to another.
   ═══════════════════════════════════════════════════════════════ */
:root { --ws-paper:#F4F1E9; --ws-rule:#E0D9C8; --ws-faint:#A0957F;
  --wp-gold:#9C7434; --wp-line:#4A4254; }
html[data-sect="nocturnal"] { --ws-paper:#241F2C; --ws-rule:#3C3448; --ws-faint:#8C8298;
  --wp-gold:#D8B978; --wp-line:#CFC6DC; }

/* ── the sheet ── */
.ws-sheet { background:var(--ws-paper); border:1px solid var(--ws-rule); border-radius:4px;
  padding:clamp(1.1rem,2.6vw,2.2rem); text-align:left; }
.ws-plateline { display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  font-family:var(--caps); font-size:var(--caps-xxs); letter-spacing:.26em; text-transform:uppercase;
  color:var(--ws-faint); padding-bottom:.9rem; margin-bottom:.3rem; border-bottom:1px solid var(--ws-rule); }
/* Both tracks need a zero floor. Without it the entry grid's own
   min-content, which the price and its format line set, pushed the whole
   sheet wider than its panel on a phone and everything spilled right. */
.ws-wrap { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,19rem);
  gap:clamp(1.3rem,3.6vw,2.8rem); align-items:start; }
.ws-list, .ws-frame { min-width:0; }

.ws-entry { display:grid; grid-template-columns:2.2rem minmax(0,1fr) auto; gap:1rem; align-items:baseline;
  min-width:0;
  padding:.9rem .5rem .9rem .65rem; border-bottom:1px solid var(--ws-rule);
  text-decoration:none; color:inherit; border-left:2px solid transparent;
  transition:border-color .3s ease, background .3s ease; }
.ws-entry:last-of-type { border-bottom:0; }
.ws-entry:hover, .ws-entry.is-on { border-left-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 7%, transparent); }
.ws-entry:focus-visible { outline:1px solid var(--accent); outline-offset:2px; }
.ws-entry .n { font-family:var(--caps); font-size:.56rem; letter-spacing:.14em; color:var(--ws-faint); }
.ws-entry .t { min-width:0; font-family:var(--display); font-weight:400; font-kerning:none;
  font-size:clamp(1.08rem,2.3vw,1.42rem); line-height:1.07; color:var(--ink); }
.ws-entry .t em { font-style:italic; color:var(--accent-text); }
.ws-entry .sub { display:block; font-family:var(--quote); font-style:italic; font-size:.8rem;
  color:var(--dim); margin-top:.2rem; max-width:30rem; }
.ws-entry .p { font-family:var(--display); font-size:1.12rem; white-space:nowrap; color:var(--ink);
  text-align:right; }
.ws-entry .fmt { display:block; font-family:var(--caps); font-size:.46rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ws-faint); margin-top:.22rem; }

/* ── the plate beside the sheet ── */
.ws-frame { position:sticky; top:4.5rem; border:1px solid var(--ws-rule); border-radius:3px;
  padding:1.1rem 1rem .9rem; text-align:center;
  background:color-mix(in srgb, var(--ws-paper) 55%, transparent); }
.ws-frame .no { font-family:var(--caps); font-size:.5rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ws-faint); margin:0; }
.ws-stage { height:16rem; display:grid; place-items:center; margin:.4rem 0 .2rem; }
.ws-stage svg { width:100%; height:100%; }
.ws-cap { font-family:var(--quote); font-style:italic; font-size:.8rem; color:var(--dim);
  min-height:2.6em; line-height:1.4; margin:0; }
.ws-teaches { font-family:var(--caps); font-size:.47rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ws-faint); margin:.55rem 0 0; line-height:1.75;
  border-top:1px solid var(--ws-rule); padding-top:.55rem; }
@media (max-width:820px) {
  .ws-wrap { grid-template-columns:minmax(0,1fr); }
  .ws-frame { position:static; order:-1; margin-bottom:1.1rem; }
  .ws-stage { height:12.5rem; }
}

.ws-sheetfoot { margin-top:1.4rem; padding-top:1rem; border-top:1px solid var(--ws-rule);
  display:flex; gap:1.4rem; flex-wrap:wrap; justify-content:space-between; align-items:center;
  font-family:var(--caps); font-size:var(--caps-xxs); letter-spacing:.18em;
  text-transform:uppercase; color:var(--ws-faint); }

/* ── the plate's ink: a small vocabulary, so seven read as one set ── */
.wp { overflow:visible; }
.wp .wp-rim { fill:none; stroke:var(--wp-line); stroke-width:1; opacity:.55; }
.wp .wp-rim2 { stroke-width:.5; opacity:.35; }
.wp .wp-hub { fill:none; stroke:var(--wp-line); stroke-width:.5; opacity:.28; }
.wp .wp-cusp { stroke:var(--wp-line); stroke-width:.5; opacity:.28; }
.wp .wp-deg { stroke:var(--wp-line); stroke-width:.5; opacity:.3; }
.wp .wp-deg30 { stroke-width:.9; opacity:.5; }
.wp .wp-axis { stroke:var(--wp-line); stroke-width:.9; opacity:.5; }
.wp .wp-faint { opacity:.28; }
.wp .wp-strong { stroke:var(--wp-gold); stroke-width:2; opacity:1; stroke-linecap:round; }
.wp .wp-hatch { fill:url(#wpHatch); opacity:.85; }
.wp .wp-sector { fill:none; stroke:var(--wp-gold); stroke-width:.8; opacity:.55; }
.wp .wp-house { font-family:var(--caps); font-size:9px; letter-spacing:1.4px; fill:var(--wp-gold); opacity:.9; }
.wp .wp-stem { stroke:var(--wp-gold); stroke-width:.6; opacity:.45; }
.wp .wp-dot { fill:var(--wp-gold); }
.wp .wp-gly { font-family:var(--body); font-size:17px; fill:var(--wp-gold); }
.wp .wp-note { font-family:var(--caps); font-size:6px; letter-spacing:1.1px;
  text-transform:uppercase; fill:var(--wp-line); opacity:.6; }
.wp .wp-angle { font-family:var(--caps); font-size:8px; letter-spacing:1.6px; fill:var(--wp-line); opacity:.7; }
.wp .wp-tie { stroke:var(--wp-gold); stroke-width:.65; opacity:.4; stroke-dasharray:2.5 3; }
.wp .wp-wall { fill:none; stroke:var(--wp-gold); stroke-width:1.8; stroke-dasharray:6 4; opacity:.75; }
.wp .wp-listen { fill:none; stroke:var(--wp-gold); stroke-width:.5; opacity:.3; stroke-dasharray:1.5 4; }
.wp .wp-gate { fill:none; stroke:var(--wp-gold); stroke-width:3.4; opacity:.85; stroke-linecap:round; }
.wp .wp-path { fill:none; stroke:var(--wp-line); stroke-width:.7; opacity:.4; }
.wp .wp-path2 { stroke:var(--wp-gold); opacity:.6; }
.wp .wp-middle { stroke:var(--wp-line); stroke-width:.7; opacity:.4; stroke-dasharray:4 4; }
.wp .wp-mid { opacity:.8; }
.wp .wp-float { fill:none; stroke:var(--wp-gold); stroke-width:.9; opacity:.6; stroke-dasharray:3 3; }
.wp .wp-fortune circle { fill:none; stroke:var(--wp-gold); stroke-width:1.2; }
.wp .wp-fort-x { stroke:var(--wp-gold); stroke-width:1.2; }
@media (prefers-reduced-motion:reduce) { .ws-entry { transition:none; } }

/* On a narrow screen the format line is the thing that will not shrink,
   so it steps down and the gutters close up rather than the sheet
   growing past the panel that holds it. */
@media (max-width:520px) {
  .ws-entry { grid-template-columns:1.5rem minmax(0,1fr) auto; gap:.6rem; padding:.85rem .2rem .85rem .5rem; }
  .ws-entry .fmt { font-size:.42rem; letter-spacing:.1em; }
  .ws-entry .p { font-size:1rem; }
  .ws-plateline { flex-direction:column; gap:.2rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   THE HERO  ·  28 Oct 2026
   The seven figures were tried here and taken out again: each one already
   opens its own sales page, so showing them twice was repetition without
   reward. In their place, one plate that belongs to the whole page rather
   than to any workshop in it, and which appears nowhere else on the site.

   Cellarius, Planisphaerium Arateum, Amsterdam 1661, from the Harmonia
   Macrocosmica. Public domain, the engraver dead since 1665. It is a
   chart of the heavens ringed by the twelve signs with astronomers
   reading it below, so it says what the page is before a word is read.
   Toned to a lavender and bone duotone so a hand coloured 1661 plate
   sits inside her palette.
   ═══════════════════════════════════════════════════════════════ */
.ws-hero { text-align:left; }
.ws-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  gap:clamp(1.6rem,4vw,3.4rem); align-items:center; }
.ws-hero-words .kicker { margin-bottom:1rem; }
.ws-hero h1 { font-size:clamp(2.2rem, 4.6vw, 3.6rem); line-height:1; margin:0 0 1.1rem; }
.ws-hero .stand { font-family:var(--quote); font-style:italic;
  font-size:clamp(1.02rem,1.9vw,1.18rem); margin:0 0 1rem; color:var(--body-ink); max-width:26rem; }
.ws-hero .lede { font-size:.95rem; color:var(--body-ink); max-width:26rem; }

.ws-plate-hero { margin:0; }
.ws-plate-hero img { display:block; width:100%; height:auto; border-radius:2px;
  box-shadow:0 22px 44px -28px rgba(60,48,40,.55); }
html[data-sect="nocturnal"] .ws-plate-hero img { filter:brightness(.82) contrast(1.04); }
.ws-plate-hero figcaption { margin-top:.7rem; text-align:right;
  font-family:var(--caps); font-size:.46rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ws-faint); }
.ws-plate-hero figcaption i { font-style:italic; text-transform:none; letter-spacing:.06em; }

@media (max-width:820px) {
  .ws-hero-grid { grid-template-columns:1fr; gap:1.6rem; }
  .ws-hero, .ws-hero .stand, .ws-hero .lede { text-align:center; }
  .ws-hero .stand, .ws-hero .lede { margin-inline:auto; }
  .ws-plate-hero { order:-1; }
  .ws-plate-hero figcaption { text-align:center; }
}

/* ── the four features ── Three of these were Chinese ideographs, left
   from the lunar mansion framing she retired when the page became
   Hellenistic. They are drawn marks now, in the plates' own ink. */
.ws-mark { width:2rem; height:2rem; display:block; margin:0 auto .7rem;
  fill:none; stroke:var(--wp-gold); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.ws-mark .thin { stroke-width:.8; opacity:.65; }
.ws-mark .solid { fill:var(--wp-gold); stroke:none; }
.sc-cell .ws-mark { margin-inline:0; }

/* the four features heading had fallen a step below every other section */
#how .sc-centre h2 { font-size:clamp(1.75rem, 4vw, 2.55rem); }

/* ── the index ring laid over Cellarius ── his plate has no way to say
   where the sun is tonight, so one is laid over it: a fine ring of the
   twelve with the sun marked at its true longitude. Drawn, never
   registered onto his own medallions, so the antique stays untouched.
   Set in the scan's own pixel space, so nothing needs aspect correction. */
.ws-plate-hero { position:relative; }
.ws-index { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
.ws-index .wi-circle { fill:none; stroke:var(--wp-gold); stroke-width:1.6; opacity:.42;
  stroke-dasharray:3 9; }
.ws-index .wi-tick { stroke:var(--wp-gold); stroke-width:2.2; opacity:.6; stroke-linecap:round; }
/* IM Fell and Perfectly Nineties carry no astrological glyphs, so the
   marks name their own stack and fall back to whatever the system has */
.ws-index .wi-gly, .ws-index-now .wi-g {
  font-family:'Apple Symbols','Segoe UI Symbol','Noto Sans Symbols 2',Georgia,serif; }
.ws-index .wi-gly { font-size:42px; fill:var(--wp-gold); opacity:.42;
  transition:opacity .6s ease; }
.ws-index .wi-gly.is-lit { opacity:1; font-size:56px; }
.ws-index .wi-arm { stroke:var(--wp-gold); stroke-width:2.6; opacity:.8; stroke-linecap:round; }
.ws-index .wi-halo { fill:var(--wp-gold); opacity:.18; animation:wi-breathe 6s ease-in-out infinite; }
.ws-index .wi-sun { fill:#FFF4D4; stroke:var(--wp-gold); stroke-width:2.4; }
@keyframes wi-breathe { 50% { opacity:.35; r:32px; } }
.ws-index-now { margin:.5rem 0 0; text-align:right;
  font-family:var(--quote); font-style:italic; font-size:.82rem; color:var(--dim); }
.ws-index-now .wi-g { font-style:normal; color:var(--wp-gold); }
@media (max-width:820px) { .ws-index-now { text-align:center; } }
@media (prefers-reduced-motion:reduce) { .ws-index .wi-halo { animation:none; } }

/* ── the closing bookend ── The page opened on a Cellarius plate and
   ended on type alone, the only section with nothing to look at, and
   the one asking for the sale. It closes on a second plate from the
   same atlas, mirrored: the plate leads from the left here, where it
   followed from the right above, so the two read as a pair. */
.ws-closing { text-align:left; }
.ws-closing-grid { display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3.2rem); align-items:center; }
.ws-plate-close { margin:0; }
.ws-plate-close img { display:block; width:100%; height:auto; border-radius:2px;
  box-shadow:0 22px 44px -28px rgba(60,48,40,.55); }
html[data-sect="nocturnal"] .ws-plate-close img { filter:brightness(.82) contrast(1.04); }
.ws-plate-close figcaption { margin-top:.7rem;
  font-family:var(--caps); font-size:.46rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ws-faint); }
.ws-plate-close figcaption i { font-style:italic; text-transform:none; letter-spacing:.06em; }
.ws-closing h2 { font-size:clamp(1.9rem, 3.8vw, 2.9rem); line-height:1.04; }
.ws-closing-words p { max-width:28rem; }
@media (max-width:820px) {
  .ws-closing-grid { grid-template-columns:1fr; gap:1.5rem; }
  .ws-closing, .ws-closing-words p { text-align:center; }
  .ws-closing-words p { margin-inline:auto; }
  .ws-plate-close figcaption { text-align:center; }
}