/* THE A.I. WORKSHOPS PAGE — its whole stylesheet.
   Taken out of the page 2026-08-24 so the browser can cache it and a
   person can read it without scrolling past the markup. The page links
   it by name from its own folder. */

/* ============================================================
   A.I. WORKSHOPS — the whole page.

   THE ORDER
     I    the hero, as it was
     II   Envision · Strategize · Orchestrate — the three lines and
          the figure they build; this section takes the place the
          opening subject used to hold
     III  the seven subjects, each with its six dots crossing to the
          orbitron's outer orbit
     IV   the week · who it is for
     V    three kinds of work — `6-structure.html`, carried in whole
          with its own names and its own clock
     VI   what follows · registration

   THE FIGURE, IN ONE LINE. One core, sixty-three points in seven
   strands and one thread — the existing construction, copied. The
   three lines of section II carry it from the core alone to the
   scattered field, to the strands, to the web, to the spherical
   spiral; the seven subjects then expand it into the orbitron and
   gild it, one layer per subject.

   THE LAW OF THE GOLD. Gold is what a hand gave: the starting point, the line drawn from it, and the radials that line becomes.

   ONE BREAKPOINT, 760.
   ============================================================ */
:root{
  --void:#0D0D0D; --ground:#131313; --panel:#161616; --raised:#1C1C1C;
  /* the one surface: dark, a little open, and the figure felt through it */
  --glass:rgba(15,15,15,.62); --glass2:rgba(15,15,15,.44); --blur:blur(15px);
  --ink:#F0EDE8; --dim:#c4c4c4; --grey:#7a7a7a; --gold:#C9A84C;
  --core:#b4564f; --line:#262626;
  --head:'Smooch Sans','Helvetica Neue',Arial,sans-serif;
  --body:'Quicksand','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;}
/* THE SIZES AFTER ROBOTO (owner, 2026-10-19: "the workshop font size must be changed"). Every size here was set for
   Roboto Condensed, whose capitals stand .711 of the size; Smooch Sans's stand .62, so the same sizes read about a
   seventh smaller. font-size-adjust draws Smooch Sans at Roboto's capital height on every --head rule (and resets on
   every --body rule, Quicksand keeping its own size); the boxes, line heights and em lengths do not move. The site's
   header, footer and popups keep the other pages' sizes. */
.sc-hdr,.sc-ftr,.sc-pop{font-size-adjust:none;}
html{scroll-behavior:smooth; overflow-x:clip;}
body{margin:0; overflow-x:clip; background:var(--ground); color:var(--ink); font-family:var(--head); font-size-adjust:cap-height .711;
  -webkit-font-smoothing:antialiased;}
a{color:inherit;}
.pad{padding-left:6vw; padding-right:6vw;}
@media (min-width:1100px){ .pad{padding-left:5rem; padding-right:5rem;}}
.max{max-width:1500px; margin:0 auto;}

.eyebrow{display:flex; align-items:center; gap:12px; margin:0;
  font-size:11px; font-weight:600; letter-spacing:.32em; text-transform:uppercase;
  color:var(--grey);}
.eyebrow i{display:inline-block; width:5px; height:5px; background:var(--gold);
  transform:rotate(45deg);}

h1, h2, h3{margin:0; font-weight:600; letter-spacing:.01em; text-transform:uppercase;}
h1{font-size:clamp(2.4rem,6vw,5rem); line-height:.98;}
h2{font-size:clamp(1.8rem,4vw,3rem); line-height:1.02;}
h3{font-size:15px; letter-spacing:.10em;}
p{font-family:var(--body); font-size-adjust:none; font-size:15px; line-height:1.7; color:var(--dim); margin:0;}
.lead{font-size:clamp(1rem,1.5vw,1.2rem); color:#d8d5d0; max-width:44ch;}

/* THE STANDING MENU — the page's parts named down one column at the head
   of the screen, each with a mark that takes the gold while its part is
   the one on display. */
.vmenu{position:fixed; right:6vw; top:4.6vh; z-index:50; display:flex;
  flex-direction:column; align-items:flex-end; gap:10px; text-align:right;}
.mark{font-size:11px; text-align:right; letter-spacing:.28em; text-transform:uppercase;
  text-decoration:none; color:var(--ink); margin-bottom:6px;}
.mark b{color:var(--gold); font-weight:600;}
.vmenu a.lnk{display:flex; align-items:center; justify-content:flex-end; gap:11px;
  text-decoration:none;
  font-size:10.5px; letter-spacing:.20em; text-transform:uppercase; color:var(--grey);
  transition:color .3s ease;}
.vmenu i{width:5px; height:5px; border-radius:50%; background:var(--grey); opacity:.5;
  transition:background-color .35s ease, opacity .35s ease, box-shadow .35s ease;}
.vmenu a.lnk:hover, .vmenu a.lnk.at{color:var(--ink);}
.vmenu a.lnk.at i{background:var(--gold); opacity:1; box-shadow:0 0 0 4px rgba(201,168,76,.13);}
/* the seven subjects, kept under their own name; one takes the gold as it
   is the one on display */
.vdots{display:flex; gap:7px; margin:-3px 12px 3px 0;}
.vdots i{width:4px; height:4px; border-radius:50%; background:var(--grey); opacity:.32;
  transition:background-color .35s ease, opacity .35s ease;}
.vdots i.on{background:var(--gold); opacity:1;}

.stage{position:fixed; inset:0; z-index:0; width:100vw; height:100svh;
  pointer-events:none; overflow:visible;}
main{position:relative; z-index:10;}
.seed{margin:0 0 18px; width:min(182px,44%);}

.rise{opacity:0; transform:translateY(22px); filter:blur(9px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1), filter .9s ease;}
.rise.in{opacity:1; transform:none; filter:none;}
.rise.d1{transition-delay:.10s;} .rise.d2{transition-delay:.20s;} .rise.d3{transition-delay:.30s;}

/* THE SECOND LINE OF THE HEADING. It stands in the heading, on the column's
   own left edge and at the heading's own size, and the question mark that
   closes it is the figure — placed off this line's box, at its middle. */
/* THE SUBTITLE. It stands between the heading and the description, in the
   heading's own family at the description's size{font-family:var(--head); font-size-adjust:cap-height .711; font-weight:500; letter-spacing:.01em;
  font-size:clamp(17px,1.55vw,21px); line-height:1.45; color:var(--dim);
  margin-top:20px;}
/* THE THREE PHASES, IN A SQUARE. A thinking network settles into the words
   that name it, and the words are written again as code — the movement the
   subtitle beneath states in one line. The phase stands above the square. */
.triwrap{margin-top:22px; width:150px;}
.trilab{position:relative; height:17px; margin:0 0 9px;}
.trilab span{position:absolute; left:0; top:0; font-family:var(--head); font-size-adjust:cap-height .711;
  font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:#b4564f; white-space:nowrap; opacity:0;}
.tri{width:150px; height:150px; border:1px solid #565656; border-radius:8px;
  background:#000000; overflow:hidden;}
.trifig{display:block; width:100%; height:100%;}
.qL1{display:inline-block; white-space:nowrap;}
.hero h1 em{font-style:normal;}
.hred{color:#b4564f;}
/* the second line is given no room at first; the room opens in the mark's
   second phase, and the column, standing at the screen's middle, carries
   the first line up as it opens */
/* THE ROOM OPENS BY HEIGHT ALONE. Clipping the box cut the line at the
   column's right edge, which is why its last word went missing — the line
   fades in on its own, so no clipping is needed. */
.qL2{display:block; overflow:visible; height:0;}
.qline{display:inline-block; opacity:0; white-space:nowrap;}
.hero{min-height:100svh; display:flex; align-items:center;}
.hero .col{max-width:46rem; padding-top:5.5rem;}
.hero h1{margin-top:22px;}
.hero .gold{color:var(--gold);}
.hero p{margin-top:26px;}

/* ── II · THE THREE LINES ───────────────────────────────────────
   Three tall folds carry one continuous number; the lines stand
   tight, one under the other, and the running line opens to make
   room for its divider and subtitle, then closes as the next opens.
   The line drawn from the starting point is the only gold here. */
.s2{position:relative; height:230svh;}
/* the last fold runs longer: the three stand read together before they go */
#s2c{height:330svh;}
.s2words{position:fixed; inset:0; z-index:10; pointer-events:none;}
/* THE SECTION'S OWN HEADER — it stands still above the three while the
   column travels under it, and comes and goes with the section. */
.s2head{position:absolute; margin:0; font-family:var(--head); font-size-adjust:cap-height .711; font-weight:600;
  font-size:34px; letter-spacing:.02em; line-height:1.04; text-transform:uppercase;
  color:var(--ink); white-space:nowrap;}
@media(max-width:760px){
  .vmenu{right:5vw; top:3vh; gap:8px;}
  .vmenu a.lnk{font-size:9px; letter-spacing:.14em; gap:8px;}
  .vmenu i{width:4px; height:4px;} .mark{font-size:9.5px; letter-spacing:.20em;}}
/* THE SEVEN, WRITTEN DOWN AS THEY ARE PASSED. Each name arrives as its own
   subject takes the stage and stays, dimmed, so that by the seventh the whole
   run stands as one short index under the section's title. It is a record of
   a passage rather than a control: nothing here is clickable. */
.fsev{position:fixed; z-index:9; pointer-events:none; margin:0; padding:0;
  list-style:none; display:flex; flex-direction:column; gap:7px; opacity:0;
  will-change:transform;}
.fsev li{font-family:var(--head); font-size-adjust:cap-height .711; font-size:13px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink); opacity:0;
  white-space:nowrap; transition:opacity .55s ease;}
@media (max-width:760px){ .fsev{gap:6px;}}

/* THE SUBJECTS' HEADER — it arrives with the layers of the orbit, large, then holds at the top of the screen, small, for the whole run of seven. */
.fhead{position:fixed; z-index:9; pointer-events:none; margin:0; opacity:0;
  font-family:var(--head); font-size-adjust:cap-height .711; font-weight:600; text-transform:uppercase;
  line-height:1.04; white-space:nowrap; color:var(--ink); will-change:transform;}

.s2stack{position:absolute; width:44%; top:0; will-change:transform;
  border-left:1px solid var(--line);}
/* THE TAB FORM, TAKEN FROM THE LATER SECTIONS. The rail's line stands at the
   left of the three, and the one that is running carries a gold segment of it, exactly as the running name does on the two rails below — so the section
   speaks the page's own vocabulary instead of a second one of its own. */
.s2blk{position:relative; border-left:2px solid transparent; margin-left:-1px;
  padding:0 0 26px 22px; transition:border-color .45s ease;}
.s2blk.open{border-left-color:var(--gold);}
.s2blk:last-child{padding-bottom:0;}
/* THE ACCORDION — a line opens as its fold is read and closes as the next
   one opens; what it holds is the subtitle, a short description of that
   phase, and the small figure whose marks cross into the animation. */
/* THE OPENING IS THE BROWSER'S OWN. A grid of one row, zero fractions
   when closed and one when open, with the transition on the row itself —
   so no height is measured and none is written per frame, which is what
   makes it glide instead of stepping. Read from cuberto.com, 2026-08-15:
   1.2s on cubic-bezier(.16, 1, .3, 1), clipped on the vertical axis only. */
.s2blk .body{display:grid; grid-template-rows:0fr;
  transition:grid-template-rows 1.2s cubic-bezier(.16,1,.3,1),
             opacity .7s cubic-bezier(.16,1,.3,1);
  opacity:0;}
.s2blk.open .body{grid-template-rows:1fr; opacity:1;}
.s2blk .bodyin{overflow-y:clip; min-height:0;}
/* THE SAME ARRIVAL THE SEVEN SUBJECTS USE — opacity, a small rise, and a
   blur that clears, on the same durations and the same curve, so a tab
   and a subject read as one family. The three parts arrive in turn, as
   the eyebrow, the heading and the rows do below. */
.s2blk .sub, .s2blk .desc{opacity:0; transform:translateY(22px);
  filter:blur(9px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1), filter .9s ease;}
.s2blk.open .sub, .s2blk.open .desc{opacity:1; transform:none; filter:none;}
.s2blk.open .desc{transition-delay:.10s;}
.s2blk .sub{margin:12px 0 0; font-family:var(--head); font-size-adjust:cap-height .711; font-size:19px; font-weight:600;
  line-height:1.3; letter-spacing:.20em; text-transform:uppercase; color:var(--gold);}
.s2blk .desc{margin:10px 0 0; max-width:44ch; font-family:var(--body); font-size-adjust:none; font-size:15px;
  font-weight:400; line-height:1.7; letter-spacing:.02em; color:var(--dim);}
.s2blk .word{margin:0; font-family:var(--head); font-size-adjust:cap-height .711; font-size:clamp(1.7rem,3.2vw,2.9rem); font-weight:600;
  transition:font-size .9s cubic-bezier(.16,1,.3,1);
  line-height:1.02; letter-spacing:.01em; text-transform:uppercase; white-space:nowrap;}

/* ═══ THE SEVEN, ON ONE STAGE ═══════════════════════════════════════
   The seven were seven sections, and six different things measured six
   different rectangles to know where the reader was — which is why
   changing one height broke four of them. They are now one stage: the
   screen is held while a spacer of seven screens is scrolled behind
   it, and everything reads from a single number, how far through those
   seven you are. A subject is a panel on that stage; it arrives from
   the left, and the one it replaces stays where it is and fades. */
.subjects{position:relative; height:700svh; padding:0;}
.stagehold{position:sticky; top:0; height:100svh; overflow:hidden;}
/* THE SUBJECT STANDS AT THE FOOT OF THE SCREEN, so the figure behind it is
   seen rather than covered — on every width, and most of all on a phone, where the panel would otherwise take the whole display. */
.fold{position:absolute; inset:0; display:flex; align-items:flex-end;
  padding-bottom:9svh; opacity:0; pointer-events:none;}
.fold .hold{width:100%; display:flex; align-items:flex-end;}
/* THE SUBJECTS KEEP THE PAGE'S LEFT LINE (owner, 2026-10-21): on the desktop the
   panel is never centred in the 1500 column; it stands on the page's own padding,
   the line its title and index stand on, at every width. */
@media (min-width:761px){ .fold .pad.max{max-width:none; margin:0;} }
.fold .panel{max-width:34rem; transform:translateX(-56px);
  transition:transform 1.05s cubic-bezier(.16,1,.3,1);}
.fold{transition:opacity .78s ease;}
.fold.on{opacity:1; pointer-events:auto;}
.fold.on .panel{transform:none;}
/* the parts of the subject arrive one behind the other, quickly */
.fold .seed, .fold .ptxt > *{opacity:0; transform:translateY(14px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);}
.fold.on .seed, .fold.on .ptxt > *{opacity:1; transform:none;}
.fold.on .ptxt > *:nth-child(1){transition-delay:.12s;}
.fold.on .ptxt > *:nth-child(2){transition-delay:.20s;}
.fold.on .ptxt > *:nth-child(3){transition-delay:.28s;}
/* the words carry no ground at all — the figure behind them is the page */
@media(max-width:760px){
  .fold{padding-bottom:0; transform:translateY(60px);}
  .seed{margin:0 0 14px;}
}
.fold h2{margin-top:16px;}
.fold p{margin-top:18px; max-width:40ch;}
.pts{list-style:none; margin:22px 0 0; padding:0; max-width:40ch;}
.pts li{position:relative; padding:0 0 0 20px; margin-top:13px;
  font-family:var(--body); font-size-adjust:none; font-size:15px; line-height:1.65; color:var(--dim);}
.pts li::before{content:''; position:absolute; left:2px; top:.62em;
  width:5px; height:5px; border-radius:50%; background:var(--gold);}
.pts b{font-family:var(--body); font-size-adjust:none; font-weight:400; letter-spacing:.02em; color:var(--ink);}
/* the subject's number stands in front of its name, in the name's own
   hand and its own colour, a mid point between them */

/* the gold line under it holds to one line */

.rows{margin-top:34px; max-width:34rem;}
.rows div{display:flex; align-items:center; justify-content:space-between; gap:16px;
  border-bottom:1px solid var(--line); padding-bottom:11px; margin-top:11px;
  font-size:11px; letter-spacing:.20em; text-transform:uppercase; color:#a8a8a8;}
.rows span{color:var(--gold);}

.solid{background:transparent;}
section{padding:14vh 0;}
/* ═══ THE WEEK, AS ONE RUN ══════════════════════════════════════════
   Five parts on one wire. THE ALIGNMENT IS BUILT, NOT MEASURED: three
   columns of one height, the middle one a square, and the outer two
   stretched to it — so the theory's foot stands on the practice's foot
   and the conclusion's head on the practice's head, whatever the copy
   does. The wire then only has to leave a middle and arrive at a
   middle{margin-top:52px; overflow-x:auto;}
.wk{position:relative; display:flex; align-items:stretch; gap:54px;
  min-width:902px; padding:46px 1px;}
/* THE DRAWING STANDS OVER THE BOXES. It sat under them, which is why the
   contours and half of every wire were invisible: the box's own ground
   was painted on top of them. */

.wk [data-w]{position:relative; z-index:1; background:var(--glass2);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:0; border-radius:10px; padding:22px 22px 24px;}
/* the two ends are short and fixed; what stands between them takes the rest{flex:0 0 auto;}
/* the practice is the square one{width:100%; aspect-ratio:1/1; display:flex; flex-direction:column;}
@media(max-width:760px){
  .wk{min-width:0; flex-direction:column; gap:26px; padding:0;}}
.when{font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--gold);}

.two{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,96px); margin-top:44px;}
.list{list-style:none; margin:18px 0 0; padding:0; font-family:var(--body); font-size-adjust:none; font-size:15px;
  line-height:2; color:var(--dim);}
.list li{display:flex; gap:12px;}
.list li::before{content:'—'; color:var(--gold);}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:52px;}
.card{background:var(--glass2); backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur); border:1px solid var(--line); border-radius:10px;
  padding:30px 26px 32px;
  display:flex; flex-direction:column; transition:border-color .3s ease, transform .3s ease;}
.card:hover{border-color:#3d3d3d; transform:translateY(-3px);}
.card .tag{font-size:11px; font-weight:600; letter-spacing:.20em; text-transform:uppercase;
  color:var(--gold);}
.card h3{margin-top:14px; font-size:20px; letter-spacing:.03em;}
.card p{margin-top:14px; font-size:15px;}
.card .foot{margin-top:auto; padding-top:26px; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--grey);}

.ask{text-align:left; max-width:52rem;}
.ask h2{margin-top:18px;}
.ask p{margin-top:22px;}

/* ── REGISTRATION — rebuilt whole, 24 August ────────────────────────
   Self-contained: every rule is scoped to #register and uses no class
   the rest of the page owns, so nothing here inherits and nothing here
   leaks. The price, the button, the two conditions — nothing else. ── */
#register{background:transparent; padding:12vh 0 14vh;}
.rgwrap{width:min(1100px, 92%); margin:0 auto;}
.rgtitle{margin:16px 0 0; font-family:var(--head); font-size-adjust:cap-height .711; font-size:34px; font-weight:600;
  line-height:1.1; letter-spacing:.03em; text-transform:uppercase; color:var(--ink);}
/* THE HEADING'S OWN SEAT. The line is drawn on by the figure's core, which
   settles behind it as a red pill; the padding here is the pill's shape, and
   the pill is measured from this box, so the two cannot drift. It answers to
   the hand only once the core has arrived and given it `.on`. */
.rgbtn{display:inline-block; padding:11px 34px; color:inherit; text-decoration:none;
  border-radius:30px; cursor:default; pointer-events:none;
  transition:color .3s ease;}
.rgbtn.on{cursor:pointer; pointer-events:auto;}
.rgbtn.on:hover{color:#fff;}
/* the page's own panel — the same fill every card, tile and week box uses */
.rgbox{margin:36px auto 0 0; width:360px; height:360px; box-sizing:border-box;
  border:0; border-radius:0; background:var(--glass2);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); padding:26px 24px 0;
  overflow:hidden;
  text-align:left; display:flex; flex-direction:column;}
.rghead{display:flex; align-items:baseline; gap:14px;}
.rgprice{margin:0; font-family:var(--body); font-size-adjust:none; font-size:52px; font-weight:500; line-height:1;
  letter-spacing:.01em; color:var(--core);}
.rgseat{margin:0; font-family:var(--body); font-size-adjust:none; font-size:12px; letter-spacing:.04em;
  text-transform:none; color:var(--core);}

/* the button at the foot of the price square, flush to its edges */
.rgpay{display:flex; align-items:center; justify-content:center; margin-top:auto;
  flex:0 0 60px; width:360px; height:60px; margin-left:-24px; margin-right:-24px;
  box-sizing:border-box; padding:0;
  border-radius:10px; border:1px solid var(--gold);
  font-family:var(--head); font-size-adjust:cap-height .711; font-size:12px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); text-decoration:none; text-align:center;
  transition:background-color .25s ease, color .25s ease;}
.rgpay:hover{background:var(--gold); color:#131313;}
.rgtax{margin:8px 0 0; font-family:var(--body); font-size-adjust:none; font-size:12px; letter-spacing:.04em;
  text-transform:none; color:#a8a8a8;}

.rgcond{margin:14px 0 0; font-family:var(--body); font-size-adjust:none; font-size:15px; line-height:1.6;
  color:var(--gold);}
.rgcond + .rgcond{margin-top:6px;}

/* the small panel under the button — two subjects the page holds nowhere else */
.rgmore{display:block; width:max-content; margin-top:14px; font-family:var(--body); font-size-adjust:none; font-size:14px;
  line-height:1.5; color:#a8a8a8; text-decoration:none; border-bottom:1px solid #3a3a3a;
  padding-bottom:2px; cursor:pointer;}
.rgmore:hover{color:var(--gold); border-bottom-color:var(--gold);}
.rgpop{position:fixed; inset:0; z-index:60; display:none; align-items:center;
  justify-content:center; padding:5vw; background:rgba(8,8,8,.72);}
.rgpop.on{display:flex;}
.rgpop__in{position:relative; width:min(560px,100%); max-height:80svh; overflow-y:auto;
  background:#131313; border:1px solid var(--line); border-radius:10px; padding:34px 32px;}
.rgpop h3{margin:0; font-family:var(--head); font-size-adjust:cap-height .711; font-size:20px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink);}
.rgpop h3 + p{margin-top:14px;}
.rgpop h4{margin:28px 0 0; font-family:var(--head); font-size-adjust:cap-height .711; font-size:13px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold);}
.rgpop p{margin:10px 0 0; font-family:var(--body); font-size-adjust:none; font-size:15px; line-height:1.7; color:#c4c4c4;}
.rgpop__x{position:absolute; top:14px; right:16px; background:none; border:0; cursor:pointer;
  font-family:var(--head); font-size-adjust:cap-height .711; font-size:22px; line-height:1; color:#8e8e8e;}
.rgpop__x:hover{color:var(--gold);}

.rgnote{margin:12px 0 0; font-family:var(--body); font-size-adjust:none; font-size:15px; line-height:1.65;
  color:#c4c4c4; max-width:64ch;}
/* each stands on its own line: the two used to flow side by side once the
   paragraph that separated them moved below the button */
.rgcomp{display:flex; width:max-content; align-items:center; justify-content:center;
  margin-top:34px;
  width:360px; height:60px; padding:0; border:1px solid #3a3a3a; border-radius:10px;
  background:#0d0d0d;
  font-family:var(--head); font-size-adjust:cap-height .711; font-size:12px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink); text-decoration:none;
  transition:background-color .25s ease, color .25s ease, border-color .25s ease;}
.rgcomp.in{transition:background-color .25s ease, color .25s ease, border-color .25s ease;
  transition-delay:0s;}
.rgcomp:hover{background:var(--ink); border-color:var(--ink); color:#131313;}
/* TIB beside the companies button (2026-10-20): the row keeps the button's place and height; his canvas, larger than
   the row, overflows it evenly above and below, so nothing in the column moves; on the phone he steps away */
.rgtibrow{display:flex; align-items:center; gap:0; margin-top:34px; height:60px;}
.rgtibrow .rgcomp{margin-top:0; flex:none;}

@media (max-width:760px){
  /* the section is inside .pad (6vw) and .flow (34px left), so it is pulled
     back out to the screen's own edges before its own width is set */
  #register{padding:9vh 0 10vh; margin-left:calc(-6vw - 34px); margin-right:-6vw;
    width:100vw; max-width:100vw;}
  .rgwrap{width:95%;}
  .rgtitle{font-size:26px;}
  .rgbtn{padding:9px 22px;}}

footer{border-top:1px solid var(--line); background:var(--glass);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); padding:9vh 0 11vh;}
/* THE GROUND BELONGS TO THE READING, NOT TO THE SECTION. Held by the section
   it ran the whole height of a three-screen scroller and sealed the animation
   off for the length of it. Held by the reading it begins at the text's own
   left edge, ends where the reading ends, and leaves air above and below in
   which the figure behind the page keeps moving. */
.bdcard{width:100%; background:var(--glass); backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur); padding:46px 0 42px;}

footer p{font-size:15px; color:var(--dim);}
footer a{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--grey);
  text-decoration:none; margin-right:26px;}
footer a:hover{color:var(--ink);}

/* ── V · WHAT YOU CAN BUILD — three vertical tabs.
      One rail of three names, one panel beside it. The rail carries the
      order, the panel carries the reading, and only one reading stands at
      a time. Every name is prefixed `bd` so it cannot touch the rest of
      the page. ── */
/* THE SECTION IS SCROLLED THROUGH RATHER THAN CLICKED THROUGH. The section is
   three screens tall, the reading sticks for one of them, and the share of the
   scroll already passed chooses which of the three stands. The rail still
   answers a click and the arrow keys; the scroll simply also drives it. */
.bdscroll{position:relative; height:300vh;}
.bdstick{position:sticky; top:0; min-height:100svh; display:flex; align-items:center;}
.bdwrap{display:grid; grid-template-columns:minmax(230px,300px) 1fr; gap:44px;
  margin-top:40px; align-items:start;}
/* THE RAIL'S LINE STANDS ON ITS RIGHT, so the one line does two things: it
   marks which position is running, and it parts the rail from the reading. */
.bdtabs{display:flex; flex-direction:column; border-right:1px solid var(--line);}
.bdtab{appearance:none; background:none; border:0; border-right:2px solid transparent;
  margin-right:-1px; padding:20px 26px 20px 0; text-align:left; cursor:pointer;
  font-family:var(--head); font-size-adjust:cap-height .711; font-size:19px; font-weight:600; letter-spacing:.10em;
  text-transform:uppercase; color:var(--ink); opacity:.42; line-height:1.2;
  transition:opacity .45s ease, border-color .45s ease;}
.bdtab .bdno{display:block; font-family:var(--body); font-size-adjust:none; font-size:12.5px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold); opacity:1;
  margin-bottom:9px;}
/* the label keeps its full strength even where the name beside it is dimmed, because the label is what tells a reader which position this is */
.bdtab{opacity:1;}
.bdtab .bdnm{display:block; opacity:.42; transition:opacity .45s ease;}
.bdtab.on .bdnm{opacity:1;}
.bdtab:hover .bdnm{opacity:.72;}
.bdtab.on{border-right-color:var(--gold);}
/* THE READING STANDS ON THE GROUND ITSELF — no box, no border, no ground of
   its own. The line at the rail's edge is the only division the section needs. */
.bdpanel{padding:6px 0 0; min-height:300px;}
.bdp{display:none;}
.bdp.on{display:block; animation:bdin .5s ease both;}
@keyframes bdin{from{opacity:0; transform:translateY(9px);} to{opacity:1; transform:none;}}
/* the panel opens on the subtitle — the rail already carries the name */
/* SET IN CAPITALS, AND THEREFORE MEASURED FOR THEM: capitals carry no
   ascenders or descenders, so the line opens and the letters part, and the
   size comes down a step to keep a long line readable at that weight. */
.bdsub{font-family:var(--head); font-size-adjust:cap-height .711; font-size:16px; font-weight:600; line-height:1.62;
  text-transform:uppercase; color:var(--ink); margin:0; max-width:46ch;
  letter-spacing:.075em;}
.bddesc{font-family:var(--body); font-size-adjust:none; font-size:15px; font-weight:300; line-height:1.72;
  color:var(--dim); margin:20px 0 0; max-width:64ch; letter-spacing:.02em;}
.bdmakes{margin:24px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px;}
.bdmakes li{font-family:var(--body); font-size-adjust:none; font-size:13px; font-weight:300; letter-spacing:.04em;
  color:var(--dim); border:1px solid var(--line); border-radius:999px; padding:6px 14px;}

/* ── ONE BREAKPOINT, 760 ── */
@media (max-width:760px){
  .fold{min-height:auto;}
  .fold .hold{position:static; height:auto; padding:40vh 0 10vh;}
  .fold:not(:first-of-type) .hold{padding-top:14vh;}
  .cards,.two{grid-template-columns:1fr;}
  .hero{position:relative;}
  /* the mark stands above the heading, in the middle, where every later
     figure stands too */
  /* on a narrow screen the screen stands under the heading */
  .hero .col{padding-top:24svh; display:flex; flex-direction:column;}
  .hero .col h1{order:1;} .hero .col .lead{order:2;}
  .hero .col .triwrap{order:3; margin-top:22px;}
  /* every description holds to thirteen pixels here, the heading's own lead apart */
  /* the three stand closer together, and their gold line holds fifteen */
  .s2blk .sub{font-size:16px; margin-top:5px;}
  .s2blk .desc{margin-top:5px;}
  .s2blk .word{line-height:1;}
  /* every description holds fifteen pixels here as well — only headings and
     the small standing labels keep their own size */
  p, li, .s2blk .desc, .bddesc, .card p, .list li,  .rows, .pts li, .pts b, footer p, .hero .lead{font-size:15px;}
  /* the seven subjects stand on the page's own ground, with no panel behind */
  .fold .hold{background:none;}
  section.solid{background:transparent;}
  /* THE GROUND STARTS BELOW THE MARK. Covering the whole hero hid the
     question mark behind it on a narrow screen. */
  .hero{background:linear-gradient(to bottom, rgba(19,19,19,0) 0%,
    rgba(19,19,19,0) 26%, rgba(19,19,19,.92) 46%, rgba(19,19,19,.35));}
  /* the heading holds to the screen's width, each line whole */
  .hero h1{font-size:clamp(0.98rem,8.4vw - 10px,2.58rem);}
  footer{background:rgba(13,13,13,.96);}
  .s2{height:190svh;}
  /* THE THREE HOLD THE DISPLAY'S OWN EDGES, as the two rails below do, and
     they stand at the foot of the screen because the figure has the top. */
  .s2stack{width:calc(100vw - 32px); border-left-width:1px;}
  .s2blk{padding:0 0 16px 14px;}

  /* THE RAIL GOES ABOVE THE PANEL, and the reading pins with its own eyebrow
     flush to the top of the screen, so the turning begins only once the whole
     block is on screen. EVERYTHING HERE IS CUT TO FIT ONE SCREEN: a pinned
     block taller than the screen hides its own end while it is being read. */
  .bdscroll{height:360svh;}
  .bdstick{align-items:flex-start; padding-top:0; min-height:100svh;}
  /* THE READING TAKES THE WHOLE WIDTH HERE. On a phone the page's side inset
     costs a word a line, so these two sections keep only the margin a finger
     needs and the heading, the rail and the reading each run edge to edge. */
  .bdcard{padding:22px 0 20px;}
  .bdcard > .pad{padding-left:16px; padding-right:16px;}
  .bdstick .bdwrap, .bdstick .bdpanel{max-width:none;}
  .bdsub, .bddesc{max-width:none;}
  #who h2, #build h2, #who .lead, #build .lead{max-width:none;}
  .bdwrap{grid-template-columns:1fr; gap:14px; margin-top:18px;}
  .bdpanel{padding:0; min-height:0;}
  /* THE LINE TURNS AND BECOMES A MEASURE. Laid flat under the three names the
     same line can say two things at once — where the rail ends, and how far
     through it you are — so the gold marker leaves the individual name and
     becomes a third of the line, travelling to the position that is running.
     Nothing else marks the running name: the line is now the only signal. */
  .bdtabs{position:relative; border-right:0; border-bottom:0; padding-bottom:14px;}
  .bdtabs::before{content:''; position:absolute; left:0; right:0; bottom:0;
    height:1px; background:var(--line);}
  .bdtabs::after{content:''; position:absolute; left:0; bottom:0; height:2px;
    width:33.3333%; background:var(--gold);
    transform:translateX(calc(var(--i,0) * 100%)); transition:transform .45s ease;}
  .bdtab{border-right:0; border-left:0; margin-right:0;
    font-size:18px; padding:11px 0;}
  .bdtab.on{border-right-color:transparent;}
  .bdtab .bdno{font-size:11px; margin-bottom:5px;}
  /* the panel opens a little clear of the rail's own line, and its first
     line carries two pixels more than the body it introduces */
  .bdsub{font-size:15.5px; letter-spacing:.06em; line-height:1.5; padding-top:12px;}
  .bddesc{font-size:14px; line-height:1.62; margin-top:14px;}
  .bdmakes{margin-top:16px; gap:6px;}
  .bdmakes li{font-size:12px; padding:5px 11px;}
}

/* ── IV·b · THE BAND — a breathing space between the seven and the offer.
      It is deliberately secondary: no ground of its own, small type, one
      hairline above and below, and a row that never stops moving. Its
      slides carry what the workshop asks of the person rather than of the
      machine, taken from the teaching catalogue. Every name is prefixed
      `cx` so it cannot touch anything else on the page. ── */
.cxband{position:relative; padding:9vh 0 4vh; overflow:hidden;}
.cxband .cxhead{margin:0 0 26px; font-family:var(--head); font-size-adjust:cap-height .711; font-weight:600;
  font-size:clamp(9px,2.9vw,17px); letter-spacing:.10em; text-transform:uppercase;
  color:var(--dim); white-space:nowrap;}
/* THE ROW RUNS EDGE TO EDGE and fades at both ends, so a slide is never cut
   off sharply and the run reads as continuous rather than as a list that ends. */

/* THE ONLY DIVISION IS A SHORT LINE between one slide and the next, standing
   at the height of the name rather than the height of the slide. */

@media (max-width:760px){
  .cxband{padding:7vh 0 3vh;}
  /* TWO LINES ON A PHONE, broken where the sense breaks. */
  .cxband .cxhead{letter-spacing:.06em; margin-bottom:18px; white-space:normal;
    font-size:15px; line-height:1.35;}

  }

/* ── THE MAGNET — the pointer's own mark. A thin gold ring trails the hand, and over anything that opens by a click it is drawn a third of the way to
      that element's mark, opens out, and shows the same plus the panels carry.
      It is withheld from a touch screen and from a reduced-motion setting. ── */
.mag{position:fixed; left:0; top:0; z-index:60; pointer-events:none; width:24px; height:24px;
  margin:-12px 0 0 -12px; border:1px solid var(--gold); border-radius:50%; opacity:0;
  transition:opacity .35s ease, width .40s cubic-bezier(.22,1,.36,1),
             height .40s cubic-bezier(.22,1,.36,1), margin .40s cubic-bezier(.22,1,.36,1),
             background-color .4s ease;}
.mag.seen{opacity:0;}
/* THE CURSOR ITSELF IS WITHDRAWN WHERE THE MARK STANDS IN ITS PLACE. */
#more .phase{cursor:none;}
#more .phase.on{cursor:default;}
.mag.pull{width:58px; height:58px; margin:-29px 0 0 -29px; opacity:1;
  background:rgba(201,168,76,.07);}
.mag svg{position:absolute; inset:0; width:100%; height:100%; opacity:0;
  transition:opacity .35s ease, transform .35s cubic-bezier(.22,1,.36,1);}
.mag.pull svg{opacity:1;}
.mag svg line{stroke:var(--gold); stroke-width:1; stroke-linecap:round;
  transition:transform .35s cubic-bezier(.22,1,.36,1);}
/* the same two strokes, turned a quarter, close the panel they stand on */
.mag.cross svg{transform:rotate(45deg);}
.mag.open svg line.v{opacity:0;}
@media (pointer:coarse){ .mag{display:none;}}
@media (max-width:760px){ .mag{display:none;}
  #more .phase, #more .phase *, #more .phase .phtog{cursor:default;}}
@media (prefers-reduced-motion:reduce){ .mag{display:none;}}

/* ═══ WHAT FOLLOWS — the map, and the three services ═════════════════
   The map states the four movements every service runs. Under it stand
   the rows, taken WHOLE from the services piece — the same tab, the same
   parting rule and plus, the same carousel of squares — carrying this
   page's inks and its own opaque ground, so the figure behind is covered. */
/* ═══ THE POPUP — every subject, week by week ══════════════════════
   Its rules were lost when the station carousel was removed, which is
   why it stood unstyled at the head of the page. It is closed until the
   button opens it, it covers the page while open, and the side menu
   steps back so it cannot be read through the sheet. */
.wpop{position:fixed; inset:0; z-index:120; display:none;}
.wpop.on{display:block;}
.wpop .veil{position:absolute; inset:0; background:rgba(8,8,8,.88);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);}
.wpop .sheet{position:absolute; inset:5vh 50% auto auto; transform:translateX(50%);
  width:min(940px,90vw); max-height:90vh; overflow-y:auto; background:#141414;
  border:1px solid #3a3a3a; border-radius:12px; padding:52px 54px 60px;}
.wpop h3{margin:0; font-family:var(--head); font-size-adjust:cap-height .711; font-size:26px; font-weight:600; letter-spacing:.02em;
  text-transform:uppercase; color:var(--ink);}

.wpop h5{margin:10px 0 0; font-family:var(--head); font-size-adjust:cap-height .711; font-size:20px; font-weight:600; line-height:1.2;
  color:var(--ink);}
.wpop .sub{margin:6px 0 0; font-family:var(--body); font-size-adjust:none; font-size:14.5px; font-style:italic;
  line-height:1.6; color:var(--gold); opacity:.82;}

.wpop ul{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:8px;}
.wpop li{font-family:var(--body); font-size-adjust:none; font-size:14.5px; line-height:1.62; color:#c4c4c4;
  padding-left:18px; position:relative;}
.wpop li:before{content:''; position:absolute; left:0; top:9px; width:6px; height:1px;
  background:#6e6e6e;}
.wpop li b{font-weight:600; color:#e9e9e9;}
.wpop .shut{position:sticky; top:0; float:right; font-family:var(--head); font-size-adjust:cap-height .711; font-size:12px;
  font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:#9a9a9a;
  background:none; border:1px solid #3a3a3a; border-radius:2px; padding:8px 14px; cursor:pointer;}
.wpop .shut:hover{color:var(--ink); border-color:var(--gold);}
body.shut-menu .vmenu{opacity:0; pointer-events:none;}
@media(max-width:760px){
  .wpop .sheet{inset:3vh 50% auto auto; width:94vw; padding:30px 20px 40px; max-height:94vh;}
  .wpop h3{font-size:20px;}}
/* ═══ THE FLOW — the line every workshop walks, read downward ═══════
   Four parts stacked in their true order, with the workshop itself as
   the third of them, so the accordion is INSIDE the line rather than
   beside it. One rail runs the whole height and carries a mark at each
   part, which is the only thing joining them — no motion, no widget. */
.flow{position:relative; margin:48px 0 0; padding-left:58px;
  --bleedL:calc(6vw + 58px); --bleedR:6vw; --railx:calc(6vw + 5px);}
@media (min-width:1100px){ .flow{--bleedL:calc(5rem + 58px); --bleedR:5rem;
  --railx:calc(5rem + 5px);}}
@media(min-width:761px){ #more .phase.part + .phase.part{margin-top:22px;}
  #more .phase.part{margin-bottom:22px;}}

/* ONE CIRCLE, EVERYWHERE — an open ring, eleven across, one gold hairline, nothing inside it. The head lines and the phase heads carry the same mark
   at the same size{content:none; box-sizing:border-box; position:absolute; left:-58px; top:0;
  width:11px; height:11px; border-radius:50%; border:1px solid var(--gold);
  background:transparent;}
/* the format{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:22px;
  max-width:820px;}
/* the homework, inside the meeting before */
.ops{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;
  margin-top:20px; max-width:820px;}
.ops.one{grid-template-columns:1fr; max-width:64ch;}
.ops div{border:1px solid var(--line); border-radius:8px; padding:14px 15px 16px;
  background:var(--glass2); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);}
.ops b{display:block; font-family:var(--head); font-size-adjust:cap-height .711; font-size:10.5px; font-weight:500;
  letter-spacing:.20em; text-transform:uppercase; color:var(--grey);}
.ops span{display:block; margin-top:8px; font-family:var(--body); font-size-adjust:none; font-size:14px;
  line-height:1.6; color:var(--ink);}

/* THE BOXES ARE ONE LINE OF WORK, NOT THREE ITEMS: each step is numbered and a
   gold arrow stands between one box and the next. */
.ops.link{position:relative;}
.ops.link div{position:relative; counter-increment:opn;}
.ops.link{counter-reset:opn;}
.ops.link div b:before{content:counter(opn) " · "; color:var(--gold); font-weight:600;}
.ops.link div + div:before{content:''; position:absolute; left:-11px; top:50%;
  width:8px; height:8px; margin-top:-4px; border-right:1px solid var(--gold);
  border-top:1px solid var(--gold); transform:rotate(45deg); opacity:.85;}
@media (max-width:760px){
  .ops.link div + div:before{left:50%; top:-11px; margin:0 0 0 -4px;
    transform:rotate(135deg);}}
@media (max-width:760px){ .ops{grid-template-columns:1fr;}}
/* THE PREPARATION PARTS — six readings, three to a section, stacked one under
   the next like tabs: the header above, its description below, and a short gold
   dash standing at the left of each in place of any divider. */
.ops.rows{display:grid; grid-template-columns:1fr; grid-auto-rows:1fr; gap:0;
  max-width:900px; margin-top:20px;}
.ops.rows > div{display:block !important; position:relative; border:0; border-radius:0; background:none;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  padding:13px 0 14px 20px; counter-increment:opn;}
.ops.rows > div:before{content:''; position:absolute; left:0; top:14px; bottom:15px;
  width:2px; background:var(--gold);}
.ops.rows > div > b{display:block !important; width:auto; max-width:none; float:none; clear:both; font-family:var(--head); font-size-adjust:cap-height .711; font-size:15px;
  font-weight:500; letter-spacing:.10em; text-transform:uppercase;
  line-height:1.34; color:var(--ink);}

.ops.rows > div > span{display:block !important; width:auto; max-width:none; float:none; clear:both; margin-top:7px; font-family:var(--body); font-size-adjust:none;
  font-size:15px; line-height:1.6; letter-spacing:0; text-transform:none;
  font-variant:normal; color:var(--dim);}
@media (max-width:760px){
  .ops.rows > div{padding-left:16px;}
  .ops.rows > div > b{font-size:14px;}
  .ops.rows > div > span{font-size:14px;}}

/* ══ THE TWO PREPARATION SECTIONS — written on their own, outside the folding
   machinery of the six weeks. The title stands 10px above the rule, the
   description 10px below it, and the three readings under both{position:relative; margin:22px 0 0 calc(-1 * var(--bleedL));
  padding:40px var(--bleedR) 44px var(--bleedL);
  width:calc(100% + var(--bleedL) + var(--bleedR));
  border:0; border-radius:0; background:var(--glass2);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);}
.prep .pline{position:relative; height:3px;
  margin:0 calc(-1 * var(--bleedR)) 0 calc(-1 * var(--bleedL));
  background:linear-gradient(90deg,
    var(--gold) 0, var(--gold) calc(var(--vrx,170px) - 10px),
    transparent calc(var(--vrx,170px) - 10px), transparent calc(var(--vrx,170px) + 10px),
    var(--gold) calc(var(--vrx,170px) + 10px), var(--gold) 100%);}
.prep .pline:after{content:''; box-sizing:border-box; position:absolute;
  left:var(--vrx,170px); top:50%; width:13px; height:13px;
  margin:-6.5px 0 0 -6.5px; border-radius:50%; border:3px solid var(--gold);
  background:transparent;}
.prep .ops.rows{margin:26px 0 0 calc(var(--vrx,170px) - var(--bleedL));}
.prep.pwait > .ops{
  opacity:0; transform:translateY(8px);
  transition:opacity .8s ease .05s, transform .8s cubic-bezier(.22,1,.36,1) .05s;}
.prep.pwait > .pline{transform:scaleX(0); transform-origin:0 50%;
  transition:transform .9s cubic-bezier(.22,1,.36,1);}
.prep.pwait.seen > h3, .prep.pwait.seen > .pdesc, .prep.pwait.seen > .ops, .prep.pwait.seen > .pnote{opacity:1; transform:none;}
.prep.pwait.seen > .pline{transform:none;}
@media(max-width:1080px){ }
@media(max-width:760px){
  .prep .ops.rows{margin-left:0;}
  .prep .pline{background:var(--gold);}
  .prep .pline:after{display:none;}}
.hw{list-style:none; margin:20px 0 0; padding:0; counter-reset:hw; max-width:64ch;}
.hw li{counter-increment:hw; position:relative; padding-left:30px; margin-top:12px;
  font-family:var(--body); font-size-adjust:none; font-size:15px; line-height:1.7; color:var(--dim);}
.hw li:before{content:counter(hw,upper-roman); position:absolute; left:0; top:1px;
  font-family:var(--head); font-size-adjust:cap-height .711; font-size:11px; font-weight:600; letter-spacing:.14em;
  color:var(--gold);}
/* THE HOLDER — the accordion stands in the line with no label of its own, since the rows below already name themselves. It takes no mark on the
   rail, so the rail counts only the parts that are read as text. */

#more{--g1:#c4c4c4; --g2:#9a9a9a; --g3:#6e6e6e; --g4:#3a3a3a;}
/* the ground belongs to the rows alone — the heading above them keeps the
   page's own depth, and the three rows stand apart by thirty pixels */

#more .row{background:var(--glass2); backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur); border:0; border-radius:14px; padding:0 22px;
  display:grid; grid-template-rows:auto 0fr;
  transition:grid-template-rows .9s cubic-bezier(.22,1,.36,1);}
#more .row + .row{margin-top:60px;}

#more .row.on{grid-template-rows:auto 1fr;}
#more .tab{position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:start; column-gap:34px; row-gap:12px; padding:60px 0 64px 60px; width:100%;
  text-align:left; background:none; border:0; color:inherit; font:inherit; cursor:pointer;
  -webkit-tap-highlight-color:transparent; --gap:120px; --cx:calc(33.333% - 60px);}
#more .tab:focus-visible{outline:1px solid var(--g2); outline-offset:-6px;}
#more .head{grid-column:1; grid-row:1; font-family:var(--head); font-size-adjust:cap-height .711; font-weight:600;
  font-size:30px; line-height:1.1; letter-spacing:.02em; text-transform:uppercase; color:var(--ink);}
#more .say{grid-column:1; grid-row:2; max-width:820px; font-family:var(--body); font-size-adjust:none; font-size:15px;
  font-weight:400; line-height:1.6; color:var(--g1);}

#more .kind{font-family:var(--head); font-size-adjust:cap-height .711; font-size:12px; font-weight:400; letter-spacing:.10em;
  text-transform:uppercase; color:var(--g2); border:1px solid var(--g4); border-radius:2px;
  padding:5px 10px;}
/* the foot alone, in its two parts, exactly as the services piece draws it */
/* THE FOOT AND THE PLUS ARE THE SAME KIND OF MARK — both are strokes in an
   SVG, so both are drawn by the same rule and neither is crisper than the
   other. The plus is dropped to meet the foot's own line. */
#more .rule{position:absolute; bottom:0; height:3px; overflow:visible;
  transition:transform .9s cubic-bezier(.22,1,.36,1);}
#more .rule line{stroke:var(--g4); stroke-width:3; vector-effect:non-scaling-stroke;
  transition:stroke .4s ease;}
#more .tab:hover .rule line{stroke:var(--g2);}
/* AN SVG CARRIES ITS OWN INTRINSIC WIDTH — three hundred pixels — so setting
   both edges left it at that width instead of stretching; its width is stated. */
#more .rule.l{left:0; width:calc(100% - var(--cx) - var(--gap)); transform-origin:100% 50%;}
#more .rule.r{right:0; width:var(--cx); transform-origin:0 50%;}
#more .row.on .rule{transform:scaleX(0);}
/* the plus is moved half a pixel across, so its upright falls on whole pixels
   exactly as the foot's rule does — otherwise one is crisp and the other is not */
#more .cross{transform:translateX(.5px); position:absolute; bottom:-58.5px; right:var(--cx); width:var(--gap); height:120px;
  z-index:2; overflow:visible;}
#more .cross .bar, #more .cross .arm{stroke:var(--gold); stroke-width:3; stroke-linecap:round;
  fill:none; vector-effect:non-scaling-stroke; transition:transform .9s cubic-bezier(.22,1,.36,1), stroke .4s ease;}
#more .cross .up{transform-origin:60px 48px;}
#more .cross .dn{transform-origin:60px 72px;}
#more .row.on .cross .arm{transform:scaleY(0);}
#more .row.on .cross .bar{stroke:var(--g4);}      /* opened, it stands back */
#more .cross .dot{fill:var(--gold); opacity:0; transition:opacity .5s ease .35s, fill .4s ease;}
#more .row.on .cross .dot{opacity:1;}
/* the plus keeps its gold under the hand */
/* THE CENTRE OF THE MARK — one gold dot, standing whether the panel is
   shut or open, with the horizontal line interrupted around it. */
#more .cross .core{fill:var(--gold); stroke:none; r:2.5;}

#more .inner{padding:56px 0 68px;}
#more .row.on .tab{padding-bottom:90px;}
#more .car{position:relative;}
#more .track{display:flex; gap:22px; overflow-x:auto; overflow-y:hidden; padding:0 0 10px;
  scrollbar-width:thin; scrollbar-color:var(--g4) transparent;}
#more .track::-webkit-scrollbar{height:6px;}
#more .track::-webkit-scrollbar-thumb{background:var(--g4); border-radius:3px;}
#more .slide{flex:0 0 320px;}

/* ═══ THE BOX, AND WHAT EACH ONE HOLDS ══════════════════════════════
   ONE FRAME, DIFFERENT INTERIORS. The six boxes of the workshop answer
   four different kinds of question — a statement, a set of terms, a
   sequence, a list of objects — so the frame is held constant and the
   INSIDE changes with what it holds. A paragraph where a sequence
   belongs loses exactly the information that distinguishes them. */
#more .card{border:1px solid var(--g4); border-radius:4px; background:#171717;
  padding:26px 24px 28px; min-height:430px; display:flex; flex-direction:column; gap:14px;}
#more .card h4{margin:0; font-family:var(--head); font-size-adjust:cap-height .711; font-size:19px; font-weight:600;
  line-height:1.24; letter-spacing:.01em; color:var(--ink);}
#more .card p{margin:0; font-family:var(--body); font-size-adjust:none; font-size:14.5px; line-height:1.68;
  color:var(--g1);}
/* a set of terms — each on its own line, held by a short gold tick */
#more .card ul{list-style:none; margin:0; padding:0; display:grid; gap:9px;}
#more .card ul li{position:relative; padding-left:16px; font-family:var(--body); font-size-adjust:none;
  font-size:14.5px; line-height:1.55; color:var(--g1);}
#more .card ul li:before{content:''; position:absolute; left:0; top:10px; width:7px; height:1px;
  background:var(--gold); opacity:.7;}
/* the sequence — six phases, numbered, read down */

#more .card .cap{margin-top:4px; font-family:var(--head); font-size-adjust:cap-height .711; font-size:10.5px; font-weight:500;
  letter-spacing:.20em; text-transform:uppercase; color:var(--g3);}
#more .card ul{margin-top:-2px;}
#more .card .more{margin-top:auto; align-self:flex-start; font-family:var(--head); font-size-adjust:cap-height .711; font-size:12px;
  font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
  background:none; border:0; border-bottom:1px solid var(--g4); padding:8px 0 5px;
  cursor:pointer; transition:border-color .4s ease;}
#more .card .more:hover{border-color:var(--gold);}

/* ═══ THE ONE-WEEK SLIDE — one workshop, the whole shelf ═════════════
   The four differ by their numeral and their key word, and they share
   everything else, so the shape is learned once and the differences
   are read after. The foot is pinned, because what you leave with is
   the constant across all four. The track snaps, since a slide the
   width of the shelf must never rest between two workshops. */
#more .row.wide .track{scroll-snap-type:x mandatory;}
#more .row.wide .slide{flex:0 0 100%; scroll-snap-align:start;}
#more .wk{border:1px solid var(--g4); border-radius:4px; background:#171717;
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:44px;
  padding:40px 38px 42px;}
#more .wk .naming{display:flex; flex-direction:column; min-height:100%;}

#more .wk h4{margin:18px 0 0; font-family:var(--head); font-size-adjust:cap-height .711; font-size:25px; font-weight:600;
  line-height:1.16; letter-spacing:.01em; text-transform:uppercase; color:var(--ink);}
#more .wk .fig{display:block; margin-top:14px; font-family:var(--body); font-size-adjust:none; font-size:15px;
  font-style:italic; line-height:1.6; color:var(--gold); opacity:.84;}
#more .wk .who{display:block; margin-top:20px; font-family:var(--body); font-size-adjust:none; font-size:14.5px;
  line-height:1.68; color:var(--g1);}
#more .wk .keep{display:block; margin-top:auto; padding-top:22px; border-top:1px solid var(--g4);
  font-family:var(--body); font-size-adjust:none; font-size:14.5px; line-height:1.66; color:var(--g1);}
#more .wk .keep b{display:block; font-family:var(--head); font-size-adjust:cap-height .711; font-size:11px; font-weight:500;
  letter-spacing:.20em; text-transform:uppercase; color:var(--g3); margin-bottom:8px;}
#more .wk ol{list-style:none; margin:0; padding:0; display:grid; gap:15px; align-content:start;}
#more .wk ol li{display:grid; grid-template-columns:26px minmax(0,1fr); column-gap:14px;}
#more .wk ol li i{font-style:normal; font-family:var(--head); font-size-adjust:cap-height .711; font-size:11px; font-weight:600;
  letter-spacing:.16em; color:var(--gold); padding-top:4px;}
#more .wk ol li strong{font-family:var(--head); font-size-adjust:cap-height .711; font-size:15px; font-weight:600; letter-spacing:.01em;
  color:var(--ink);}
#more .wk ol li span{display:block; margin-top:4px; font-family:var(--body); font-size-adjust:none; font-size:14px;
  line-height:1.6; color:var(--g1);}

/* ═══ THE MASTERCLASSES — tiles, not a carousel ══════════════════════
   They are the shortest and the cheapest way in, so they are shown all
   at once rather than one at a time. Three crafts across, the open
   session beneath them across the whole width, and the way in as a bar
   at the foot. */
#more .tiles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px;}

/* the right column starts on the same line as the left one */
#more .ph-body > .cap{margin-top:16px;}
/* WHAT THE WEEK ALSO HOLDS — the subjects that are taken in the session or
   given as a short course{margin:20px 0 0; font-family:var(--body); font-size-adjust:none; font-size:12.5px; font-weight:300;
  line-height:1.75; letter-spacing:.02em; color:var(--g2); opacity:.78; max-width:64ch;}
#more .tile p{margin:0; font-family:var(--body); font-size-adjust:none; font-size:14.5px; line-height:1.66; color:var(--g1);}
#more .tile.open{grid-column:1/-1; background:transparent; border-style:dashed;}
#more .wayin{display:flex; align-items:center; justify-content:space-between; gap:26px;
  flex-wrap:wrap; margin-top:26px; padding-top:24px; border-top:1px solid var(--g4);}
@media(max-width:900px){
  #more .tiles{grid-template-columns:1fr 1fr;}}
@media(max-width:760px){
  #more .card{min-height:0; padding:22px 20px 24px;}
  #more .wk{grid-template-columns:1fr; gap:26px; padding:26px 22px 28px;}
  #more .wk .ix b{font-size:40px;}
  #more .wk h4{font-size:20px;}
  #more .wk .keep{margin-top:22px;}
  #more .tiles{grid-template-columns:1fr;}}

/* ═══ THE SIX PHASES ROLL ═════════════════════════════════════════
   All six stand in one display, each shut to its own naming line. The
   page's own scroll opens them in turn and shuts them again on the way
   back up: the roll is held on the screen while it runs, so the set is
   never lost while one of its parts is read. The track's height never
   changes — one panel takes whatever the other five give up — so nothing
   below it moves as the roll advances. */
#more .phroll{position:relative;}
#more .phstick{display:block;}
#more .phtrack{display:flex; flex-direction:column;}
#more .phprog{display:none;}
/* THE PANEL'S HEAD — the naming, a short upright rule, and the title, on one row of their own across the whole panel. A shut panel is this row
   and nothing else, so the title belongs to the week rather than to the
   subjects standing under it. */
#more .ph-head{grid-column:1 / -1; display:block;}
#more .ph-head .hrow{display:flex; gap:20px;}
/* THE HEADER AND ITS SUBTITLE STAND SIXTY PIXELS FURTHER IN than the naming
   beside them, which keeps the plus and the rule where they were. */
@media(min-width:761px){
  #more .phase .ph-head h4, #more .phase .ph-head .sci{margin-left:60px;}
}
#more .ph-head .hrow.up{align-items:flex-end; padding-bottom:0;}
/* THE HEAD DOES NOT MOVE. Its four lines keep one place whether the panel is
   open or shut, and the header is scaled to the room it has rather than wrapped. */
#more .phase > .ph-head{transition:none;}
#more .ph-head .hrow.dn{align-items:flex-start; padding-top:14px;}
#more .ph-head .who{flex:0 0 auto; min-width:150px;}
#more .ph-head .wk2{display:none; font-family:var(--head); font-size-adjust:cap-height .711; font-size:12px; font-weight:600;
  letter-spacing:.10em; text-transform:uppercase; color:var(--g3);}
@media(max-width:760px){ #more .ph-head .wk2{display:block; order:2; min-width:0;}}
#more .ph-head .hrow.dn .w{margin-top:0;}
#more .ph-head .sci{flex:1 1 auto; margin:0; max-width:none; font-family:var(--head); font-size-adjust:cap-height .711;
  font-size:13px; font-weight:600; line-height:1.5; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis;}
#more .ph-head .vr{flex:0 0 1px; align-self:stretch; min-height:34px;
  background:var(--g4);}
#more .phase.part .ph-head h4{text-transform:uppercase; letter-spacing:.06em;}
#more .ph-head h4{margin:0; flex:1 1 auto; text-transform:uppercase; letter-spacing:.04em;
  font-family:var(--head); font-size-adjust:cap-height .711; font-size:26px;
  font-weight:600; line-height:1.16; color:var(--ink);}
/* ONE LINE, SCALED TO THE ROOM — set after the plain rule so it is the one that
   holds, and above the width rules below, which no longer size this line. */
@media(min-width:761px){
  #more .phase .ph-head h4{white-space:nowrap; font-size:clamp(21px,1.35vw,26px);}
}
/* THE SUBJECT IS A QUESTION AND ITS FINDING — the question in the visitor's
   own words, the finding under it in one clause, and the week's concepts
   named as small tags at the foot. */
#more .ph-body li b{display:block; font-family:var(--head); font-size-adjust:cap-height .711; font-weight:400; font-size:17px;
  line-height:1.4; letter-spacing:.01em; color:var(--ink);}
#more .ph-body li span{display:block; margin-top:5px; font-family:var(--body); font-size-adjust:none; font-size:15px;
  line-height:1.6; color:var(--g1);}
/* THE SUBJECT NAMED INSIDE THE INSIGHT — it keeps the reading's own line and
   takes the gold, so the term is met where it is used rather than in a list
   beside it. */
#more .ph-body li span b{display:inline; font-family:inherit; font-size:inherit;
  font-weight:600; letter-spacing:inherit; color:var(--ink);}
#more .tags{display:flex; flex-wrap:wrap; align-items:center; gap:6px 6px; margin:18px 0 0;}
/* THE WEEK'S OWN TWO OR THREE — the subjects the phase turns on carry the gold;
   the rest stand beside them in the ordinary grey. */
#more .tags i.key{color:var(--gold); border-color:rgba(201,168,76,.45);}
/* the one the week turns on stands three pixels larger; what is taken only in
   session, or given afterwards as a short course, stands dimmer at the end */
#more .tags i.key.lead{font-size:13px; letter-spacing:.16em; padding:4px 11px;
  line-height:1.1; align-self:center;}
#more .tags i.dim{color:var(--g2); opacity:.9; border-color:rgba(255,255,255,.13);}
#more .tags i{font-style:normal; font-family:var(--head); font-size-adjust:cap-height .711; font-size:10px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--g1);
  border:1px solid var(--line); border-radius:20px; padding:4px 9px; line-height:1.1;
  align-self:center;}
@media(min-width:761px){
  /* THE PANEL OPENS TO ITS OWN CONTENT. Each one is measured once and
     carries its own open height, so a panel never cuts what it holds and
     the page below simply follows the column's true height. */
  /* THE RULE RUNS THROUGH THE PANEL RATHER THAN ALONG ITS TOP: the naming and
     the header stand above it, the week and the subtitle below it, and the
     ground is carried equally above and below the plus that sits on it. */
  #more .phase{margin:0 0 0 calc(-1 * var(--bleedL)); overflow:visible; align-items:start;
    row-gap:20px; height:var(--shutH,96px); padding-top:12px; padding-bottom:16px;
    transition:height .90s cubic-bezier(.30,0,.12,1);}
  #more .phase.on{height:var(--openH,auto);}
  #more .phase.on > .ph-body{margin-bottom:26px;}
  #more .phase{contain:layout; will-change:height;
    grid-template-rows:auto auto minmax(0,1fr);}
  /* THE HEAD KEEPS ITS OWN ROW AND ITS OWN HEIGHT — the fixed height of a
     panel is taken from the content beneath it, never from the naming. */
  #more .phase > .ph-head{grid-row:1; grid-column:1 / -1; overflow:visible; align-self:start;}
  /* THE TWO PARTS STACK: the description stands on top, across the whole
     width, and the inquiries run under it. */
  #more .phase > .ph-mark{grid-row:2; grid-column:1 / -1;}
  #more .phase > .ph-body{grid-row:3; grid-column:1 / -1; margin-top:30px;}
  #more .phase > .ph-head, #more .phase > .ph-mark, #more .phase > .ph-body{
    min-height:0; overflow:hidden;}
  /* NOTHING OF THE BODY SHOWS WHILE THE PANEL IS SHUT — the fixed height alone
     was clipping it mid-line, which left the tops of the questions visible. */
  #more .phase > .ph-mark, #more .phase > .ph-body{visibility:hidden;}
  #more .phase.on > .ph-mark, #more .phase.on > .ph-body{visibility:visible;}
  #more.mz .phase > .ph-mark, #more.mz .phase > .ph-body{visibility:visible;}
  #more .ph-head .vr{visibility:hidden;}
  /* THE TOP LINE AND ITS RING BELONG TO THE STATIONS ABOVE — a panel that
     opens carries its own mark instead, at its top left corner. */
  /* THE TOP LINE, IN ITS TWO PARTS — drawn as the rows below draw their
     foot: two segments meeting the plus, each retracting from it as the
     panel opens. */
  #more .phase:before, #more .phase:after{content:''; display:block; position:absolute;
    top:calc(var(--rulY,90px) - 1.5px); height:3px; background:var(--g4); border:0; border-radius:0; margin:0;
    transition:transform .9s cubic-bezier(.22,1,.36,1), background .4s ease;}
  #more .phase:before{left:0; width:calc(var(--vrx,170px) - 60px); transform-origin:100% 50%;}
  #more .phase:after{left:calc(var(--vrx,170px) + 60px); right:0; width:auto;
    transform-origin:0 50%;}
  #more .phase.on:before, #more .phase.on:after{transform:scaleX(0);}
  /* THE SAME PLUS THE SERVICES ROWS CARRY — same square, same strokes, same
     retraction — set at the panel's top left instead of its foot right. */
  #more .phase.part .phtog, #more .phase.part h4{cursor:pointer;}
  #more .phtog{position:absolute; top:calc(var(--rulY,90px) - 60px); left:calc(var(--vrx,170px) - 60px);
    width:120px; height:120px; padding:0; background:none; border:0; cursor:none; z-index:3;
    -webkit-tap-highlight-color:transparent;}
  #more .phtog .cross{transform:translateX(.5px); position:absolute; inset:0;
    width:120px; height:120px; overflow:visible;}
  #more .phtog .cross .bar, #more .phtog .cross .arm{stroke:var(--gold); stroke-width:3;
    stroke-linecap:round; fill:none; vector-effect:non-scaling-stroke;
    transition:transform .9s cubic-bezier(.22,1,.36,1), stroke .4s ease;}
  #more .phtog .cross .up{transform-origin:60px 48px;}
  #more .phtog .cross .dn{transform-origin:60px 72px;}
  #more .phase.on .phtog .cross .arm{transform:scaleY(0);}
  #more .phase.on .phtog .cross .bar{stroke:var(--g4);}
  #more .phtog .cross .dot{fill:var(--gold); opacity:0; transition:opacity .5s ease .35s;}
  #more .phase.on .phtog .cross .dot{opacity:1;}
  #more .phase{cursor:none;}
  #more .phase.on, #more .phase.on .phtog, #more .phase *{cursor:default;}
  #more .phase.on > .ph-head, #more .phase.on > .ph-head *{cursor:none;}
  #more .phase:not(.on), #more .phase:not(.on) *{cursor:none;}

  #more .ph-mark .did, #more .cap, #more .ph-body ul, #more .tags, #more .phase .ops{
    opacity:0; transition:opacity .70s ease .10s;}
  #more .phase.on .ph-mark .did, #more .phase.on .cap, #more .phase.on .ph-body ul, #more .phase.on .tags, #more .phase.on .ops{opacity:1;}
  /* the measuring passes — every panel is read at its true height, twice */
  #more.mz .phase{height:auto; transition:none;}
  #more.mz .phase > *{overflow:visible;}
  #more.mz-open .phase .did, #more.mz-open .phase .cap, #more.mz-open .phase ul, #more.mz-open .phase .tags, #more.mz-open .phase .ops{opacity:1;}
  #more.mz-shut .phase .did, #more.mz-shut .phase .cap, #more.mz-shut .phase ul, #more.mz-shut .phase .tags, #more.mz-shut .phase .ops{display:none;}}
@media(max-width:1080px) and (min-width:761px){
  #more .phase.part .ph-head h4{font-size:22px;}}
@media(max-width:760px){
  /* THE PHASE AND ITS WEEK STAND TOGETHER ON THE FIRST LINE, and the header and
     its subtitle follow under them, all three flush to the same left edge. */
  #more .ph-head{display:block;}
  #more .ph-head .vr{display:none;}
  #more .ph-head .hrow{display:block; padding:0;}
  #more .ph-head .hrow.up{display:flex; align-items:baseline; gap:10px;
  flex-wrap:wrap;}
  #more .ph-head .who{min-width:0;}
  #more .ph-head .hrow.up .who{order:1;}
  #more .ph-head .hrow.up h4{order:3; flex:1 1 100%; margin-top:10px; font-size:20px;
    white-space:normal;}
  #more .ph-head .hrow.dn{padding-top:8px;}
  #more .ph-head .hrow.dn .who{display:none;}
  #more .ph-head .sci{white-space:normal;}
  #more .ph-mark .did{line-height:1.66;}
  #more .tags{margin-top:30px;}}

/* ═══ THE PARTS ON THE TELEPHONE ══════════════════════════════════
   The three parts keep the panel's behaviour at every width: the mark on
   the top line, the head always visible, the fold beneath. The weeks keep
   their carousel there, so their own marks stand down. */
@media(max-width:760px){
  #more .phtrack .phtog{display:none;}
  #more .phase.part{--mx:90px; position:relative; overflow:visible;
    height:var(--shutH,120px); padding-top:12px; padding-bottom:18px;
    transition:height .9s cubic-bezier(.22,1,.36,1),
               padding-top .9s cubic-bezier(.22,1,.36,1),
               padding-bottom .9s cubic-bezier(.22,1,.36,1);
    grid-template-rows:auto auto minmax(0,1fr);}
  #more .phase.part.on{height:var(--openH,auto); padding-bottom:34px;}
  #more .phase.part > .ph-head{grid-row:1; overflow:visible; padding-left:0;}
  #more .phase.part > .ph-mark, #more .phase.part > .ph-body{grid-row:auto;
    min-height:0; overflow:hidden;}
  #more .phase.part .ph-mark .did, #more .phase.part .ops{
    opacity:0; transition:opacity .7s ease .1s;}
  #more .phase.part.on .ph-mark .did, #more .phase.part.on .ops{opacity:1;}
  /* ONE GREY LINE ACROSS THE TOP, PARTED AROUND THE GOLD CIRCLE, and the header
     standing above it — the four that open by themselves all read this way. */
  #more .phase.part:before{content:''; box-sizing:border-box; display:block;
    position:absolute; left:var(--vrx,170px); top:var(--rulY,90px); z-index:2;
    width:11px; height:11px; margin:-6px 0 0 -6px; border-radius:50%;
    border:1px solid var(--gold); background:transparent; transform:none;}
  #more .phase.part:after{content:''; display:block; position:absolute; left:0; right:0;
    top:var(--rulY,90px); height:1px; transform:none; background:linear-gradient(90deg,
      var(--g4) 0, var(--g4) calc(var(--vrx,170px) - 11px),
      transparent calc(var(--vrx,170px) - 11px), transparent calc(var(--vrx,170px) + 11px),
      var(--g4) calc(var(--vrx,170px) + 11px), var(--g4) 100%);}
  #more .phase.part.on:before, #more .phase.part.on:after{transform:none;}
  #more .phase.part .ph-head .hrow.up{height:calc(var(--rulY,90px) - 10px);
    align-items:flex-end;}

  #more .phase.part .phtog{display:block; position:absolute;
    top:calc(var(--rulY,90px) - 60px); left:calc(var(--vrx,170px) - 60px); width:120px; height:120px; padding:0; background:none;
    border:0; cursor:pointer; z-index:3;}
  #more .phase.part .phtog .cross{position:absolute; inset:0; width:120px; height:120px;
    overflow:visible; transform:translateX(.5px);}
  #more .phase.part .phtog .cross .bar, #more .phase.part .phtog .cross .arm{
    stroke:var(--gold); stroke-width:3; stroke-linecap:round; fill:none;
    vector-effect:non-scaling-stroke;
    transition:transform .9s cubic-bezier(.22,1,.36,1), stroke .4s ease;}
  #more .phase.part .phtog .cross .up{transform-origin:60px 48px;}
  #more .phase.part .phtog .cross .dn{transform-origin:60px 72px;}
  #more .phase.part.on .phtog .cross .arm{transform:scaleY(0);}
  #more .phase.part.on .phtog .cross .bar{stroke:var(--g4);}
  #more .phase.part .phtog .cross .dot{fill:var(--gold); opacity:0;
    transition:opacity .5s ease .35s;}
  #more .phase.part.on .phtog .cross .dot{opacity:1;}
  #more.mz .phase.part{height:auto; transition:none;}
  #more.mz .phase.part > *{overflow:visible;}
  #more.mz-open .phase.part .did, #more.mz-open .phase.part .ops{opacity:1;}
  #more.mz-shut .phase.part .did, #more.mz-shut .phase.part .ops{display:none;}
}
/* ═══ THE BIG WORKSHOP — stacked, not opened ══════════════════════
   It is the piece this page exists for, so it is not something a
   visitor has to open. Its head stands plain, and its six phases are
   read downward, each one a record: where you are, what it is called, what it means stated scientifically, what happens, and the subjects
   it carries. */

/* THE HEAD IS PINNED TO THE SPINE — the same ring the stations and the
   phases carry, on the same vertical line, level with the first line of
   the name, so the workshop reads as a part of the sequence rather than
   as something dropped between two parts. A short segment above it joins
   the rail coming down from the meeting before. */
/* the head is the same band as a phase — same bleed, same ground, same gold
   head line and ring; only its inside differs, since it holds a name rather
   than a grid */
#more .bighead{position:relative; padding:40px var(--bleedR) 40px var(--bleedL);
  margin:0 0 0 calc(-1 * var(--bleedL)); width:calc(100% + var(--bleedL) + var(--bleedR));
  background:var(--glass2); backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);}
#more .bighead:before{content:''; box-sizing:border-box; position:absolute; left:var(--railx);
  top:0; z-index:1; width:11px; height:11px; margin:-6px 0 0 -6px; border-radius:50%;
  border:1px solid var(--gold); background:transparent;}
#more .bighead:after{content:''; position:absolute; left:0; top:0; width:35%; height:1px;
  background:linear-gradient(90deg,
    var(--gold) 0, var(--gold) calc(var(--railx) - 11px),
    transparent calc(var(--railx) - 11px), transparent calc(var(--railx) + 11px),
    var(--gold) calc(var(--railx) + 11px), var(--gold) 100%);}
/* THE FOUR THAT OPEN BY THEMSELVES CARRY ONE LINE ACROSS THEIR TOP, grey, and
   parted around the gold circle that stands on the rail — the same circle, at
   the same place, as the station's head below them. */
#more .phase.part:before{content:''; box-sizing:border-box; position:absolute;
  left:var(--vrx,170px); top:var(--rulY,90px); z-index:2; width:11px; height:11px; margin:-6px 0 0 -6px;
  border-radius:50%; border:1px solid var(--gold); background:transparent;
  transform:none;}
#more .phase.part:after{content:''; position:absolute; left:0; top:var(--rulY,90px); right:0;
  width:auto; height:1px; transform:none;
  background:linear-gradient(90deg,
    var(--g4) 0, var(--g4) calc(var(--vrx,170px) - 11px),
    transparent calc(var(--vrx,170px) - 11px), transparent calc(var(--vrx,170px) + 11px),
    var(--g4) calc(var(--vrx,170px) + 11px), var(--g4) 100%);}
#more .phase.part.on:before, #more .phase.part.on:after{transform:none;}
/* the station's own line takes the same grey */
#more .bighead:after{background:linear-gradient(90deg,
    var(--g4) 0, var(--g4) calc(var(--bgx,170px) - 11px),
    transparent calc(var(--bgx,170px) - 11px), transparent calc(var(--bgx,170px) + 11px),
    var(--g4) calc(var(--bgx,170px) + 11px), var(--g4) 100%); width:100%;}
#more .bighead:before{left:var(--bgx,170px);}

/* THE STATION'S HEAD TAKES THE TAB'S OWN FORM — the same size, the same
   capitals, the same gold line under it, at the same left edge. */
#more .bighead .sub{display:block; margin-top:12px; margin-left:60px; font-family:var(--head); font-size-adjust:cap-height .711;
  font-size:13px; font-weight:600; line-height:1.5; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold);}
#more .bighead .s{margin-left:60px;}
/* ONE LEFT EDGE FOR THE FOUR — header, description and everything under it
   start where the six weeks' headers start. */
@media(min-width:761px){
  /* THE FOUR STAND FLUSH LEFT: the header above the rule, level with the circle,
     and the reading beneath it on the same edge. */
  #more .phase.part .ph-head h4, #more .phase.part .ph-mark .did,
  #more .phase.part .ph-body{margin-left:0;}
  #more .phase.part .ph-head .hrow.up{height:calc(var(--rulY,90px) - 10px);
    align-items:flex-end;}
  #more .phase.part .ph-head .hrow.dn{display:none;}
  #more .phase.part > .ph-mark{margin-top:14px;}
  #more .bighead .h, #more .bighead .s{margin-left:0;}
  /* the station's line drops to the same height, its title standing above it */
  #more .bighead{padding-top:12px;}
  #more .bighead:before, #more .bighead:after{top:var(--rulY,90px);}
  #more .bighead .h{display:flex; align-items:flex-end; margin:0;
    height:calc(var(--rulY,90px) - 10px);}
  #more .bighead .s{margin-top:26px;}
}
#more .bighead .h{margin-left:60px; text-transform:uppercase; letter-spacing:.04em;
  font-family:var(--head); font-size-adjust:cap-height .711; font-weight:600; font-size:26px; line-height:1.16;
  color:var(--ink);}
#more .bighead .s{display:block; margin-top:20px; max-width:62ch; font-family:var(--body); font-size-adjust:none;
  font-size:15px; font-weight:400; line-height:1.6; letter-spacing:.01em; color:var(--ink);}
/* THE PHASE, FULL WIDTH. The box runs past the page's side padding and
   past the rail's indent, so it uses the whole measure the screen gives.
   Its content stands in two columns: the naming on the left — number, week, title, what it means, what happens — and the subjects on the
   right, set in two files so they occupy the width rather than running
   as one long ribbon. */
#more .phase{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:58px;
  padding:40px var(--bleedR) 44px var(--bleedL); margin:22px 0 0 calc(-1 * var(--bleedL));
  width:calc(100% + var(--bleedL) + var(--bleedR));
  position:relative; border:0; border-radius:0;
  background:var(--glass2); backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);}
/* THE HEAD LINE runs a third of the box rather than its whole width, so it
   reads as a mark of where the box begins rather than as a frame. */

#more .ph-head .n, #more .ph-mark .n{display:block; font-family:var(--head); font-size-adjust:cap-height .711; font-size:11px; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase; color:var(--gold);}
#more .ph-head .w, #more .ph-mark .w{display:block; margin-top:8px; font-family:var(--head); font-size-adjust:cap-height .711; font-size:15px;
  font-weight:600; letter-spacing:.10em; text-transform:uppercase; color:var(--g3);}
#more .ph-mark h4{margin:14px 0 0; font-family:var(--head); font-size-adjust:cap-height .711; font-size:26px; font-weight:600;
  line-height:1.14; letter-spacing:.01em; color:var(--ink); max-width:26ch;}
#more .ph-mark .sci{display:block; margin-top:12px; max-width:52ch; font-family:var(--head); font-size-adjust:cap-height .711;
  font-size:13px; font-weight:600; line-height:1.5; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold);}
#more .ph-mark .did{margin:20px 0 0; max-width:62ch; font-family:var(--body); font-size-adjust:none; font-size:15px;
  font-weight:400; line-height:1.6; letter-spacing:.01em; color:var(--ink);}

#more .cap{margin:0 0 18px; font-family:var(--body); font-size-adjust:none; font-size:18px; font-weight:400;
  line-height:1.5; letter-spacing:.01em; text-transform:uppercase; color:var(--ink);}
/* the right column opens on the same line as the left one */
#more .ph-body > .cap{margin-top:16px;}
/* THE SUBJECT — its name stands as the header, and the sentence under it
   says in plain words what the name means. The name alone teaches nobody. */
#more .ph-body ul{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:1fr; gap:22px;}
#more .ph-body li{position:relative; padding-left:20px;}
#more .ph-body li:before{content:''; position:absolute; left:0; top:10px; width:9px; height:1px;
  background:var(--gold);}
/* THE SUBJECT IS ONE SENTENCE. Its name opens it in the heading face and
   the explanation continues on the same line, so the list closes to half
   the height a stacked head and body would take. */
#more .ph-body li{font-family:var(--body); font-size-adjust:none; font-size:15px; line-height:1.62; color:var(--g1);}
#more .ph-body li b{font-family:var(--head); font-size-adjust:cap-height .711; font-weight:400; font-size:16.5px;
  letter-spacing:.02em; color:var(--ink);}
#more .ph-body li span b{color:var(--ink); font-weight:600; letter-spacing:inherit;}
/* THE TWO COLUMNS HOLD AT EVERY DESKTOP WIDTH — the naming beside the
   subjects, never stacked. Only the air between them narrows, and the
   subjects fall to one file when two would leave a line of three words. */
@media(max-width:1080px){
  #more .phase{gap:36px; padding:34px var(--bleedR) 36px var(--bleedL);}
  #more .ph-mark h4{font-size:22px;}
}
@media(max-width:900px) and (min-width:761px){
  #more .phase{gap:28px;}
  #more .ph-body ul{grid-template-columns:1fr; gap:16px;}}
/* THE NAVIGATION belongs to the telephone alone — on the desktop the six
   phases are read downward and nothing is needed to reach them. Its rules
   were lost once already by a block rewrite; they live here, directly
   above the all-subjects link, and are cut by anchor rather than by range. */
#more .phnav{display:none;}
@media(max-width:760px){

  /* the six become one slider: a finger moves it, the arrows step it, and
     the dots say where it rests. The track keeps a little air at its head
     so the gold mark on each box is never cut in half. */
  /* the roll belongs to the wide screen; here the six slide sideways */
  #more .phstick{position:static; height:auto; display:block;}
  #more .phtrack{height:auto;}
  #more .phase{height:auto;}
  /* THE PROGRESS BAR TAKES THE HEAD LINE'S PLACE — it begins where the
     ring ends and runs to the edge, six pixels deep, filled to the phase
     the finger has reached. */
  #more .phase:after{display:none;}
  #more .phprog{display:block; position:relative; height:6px; box-sizing:border-box;
    margin:0 -6vw 12px calc(-6vw - 34px); width:100vw;
    padding-left:calc(var(--railx) + 11px); background:none; overflow:visible;}
  #more .phprog:before{content:''; position:absolute; left:calc(var(--railx) + 11px);
    right:0; top:0; height:6px; background:rgba(255,255,255,.14); border-radius:3px;}
  #more .phprog i{position:absolute; left:calc(var(--railx) + 11px); top:0; height:6px;
    width:calc((100vw - var(--railx) - 11px) * var(--pp,0.1667));
    background:var(--gold); border-radius:3px;
    transition:width .45s cubic-bezier(.33,0,.15,1);}
  #more .phtrack{display:flex; flex-direction:row; gap:0; overflow-x:auto; overflow-y:hidden; padding-top:8px;
    scroll-snap-type:x mandatory; scrollbar-width:none;
    margin-left:calc(-6vw - 34px); margin-right:-6vw;}
  #more .phtrack::-webkit-scrollbar{display:none;}
  #more .phtrack .phase{flex:0 0 100%; scroll-snap-align:center; margin:0;}
  #more .phnav{display:flex; align-items:center; gap:12px; margin-top:22px;}
  #more .phpips{order:-1; margin-right:auto;}
  #more .phar{width:38px; height:38px; padding:0; display:flex; align-items:center;
    justify-content:center; background:none; border:1px solid var(--g4); border-radius:50%;
    cursor:pointer;}
  #more .phar svg{width:16px; height:16px; fill:none; stroke:var(--g1); stroke-width:1.6;
    stroke-linecap:round; stroke-linejoin:round;}
  #more .phar[disabled]{opacity:.32;}
  #more .phpips{display:flex; gap:9px;}
  #more .phpip{width:7px; height:7px; padding:0; border:0; border-radius:50%; cursor:pointer;
    background:#ffffff; opacity:.26;}
  #more .phpip.on{background:var(--gold); opacity:1;}}
@media(max-width:760px){
  #more .bighead .h{font-size:22px;}
  #more .bighead{padding:26px 6vw 28px; margin-left:calc(-6vw - 34px);
    width:calc(100% + 12vw + 34px);}
  /* on the telephone a phase is the screen's whole width, with its ground
     alone — no frame, no corner, nothing between it and the edge */
  #more .phase{grid-template-columns:1fr; gap:16px; margin:14px 0 0; width:100%;
    padding:26px 6vw 28px;}
  /* the parts run the screen's whole width, as the weeks' slides do */
  #more .phase.part{margin:14px 0 0 calc(-6vw - 34px); width:calc(100% + 12vw + 34px);}
  #more .ph-mark h4{font-size:20px;}
  #more .ph-body ul{grid-template-columns:1fr; gap:16px;}
  #more .ph-body h4{font-size:19px;}}
#more .pips{display:flex; gap:9px; margin-top:20px;}

#more .price{font-family:var(--head); font-size-adjust:cap-height .711; font-size:34px; font-weight:500; letter-spacing:.02em;
  color:var(--ink);}
#more .price small{display:block; font-size:13px; font-weight:400; letter-spacing:.10em;
  text-transform:uppercase; color:var(--g3); margin-top:6px;}
#more .enter{align-self:flex-start; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--head); font-size-adjust:cap-height .711; font-size:13px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink); text-decoration:none;
  border:1px solid var(--gold); border-radius:2px; padding:12px 22px;
  transition:background .4s ease;}
#more .enter:hover{background:rgba(201,168,76,.10);}
@media(max-width:760px){
  .flow{margin-top:32px; padding-left:34px;}

  /* the rows run the screen's whole width here */
  /* THE ROWS BREAK OUT OF THE PAGE'S OWN SIDE PADDING. The section sits in
     `.pad`, which holds six percent of the screen on each side — that padding, not the row, was what kept them off the edges. */
  #more .row{margin-left:-6vw; margin-right:-6vw; padding:0 6vw; border-radius:0;}

  #more .tab{padding:34px 0 38px; --gap:70px; --cx:64px;}
  #more .head{font-size:22px;}
  #more .cross{bottom:-35px; height:70px;}
  #more .row.on .tab{padding-bottom:56px;}
  #more .inner{padding:34px 0 44px;}
  #more .slide{flex:0 0 82%;}}

/* the four that open by themselves — the two stacks, kept last so nothing
   below overrides them */
@media(min-width:761px){
  /* ── THE FOUR THAT OPEN BY THEMSELVES: two stacks. Across the top, the name at
        the left and the purpose at the right, parted by an upright line that
        falls from the gold circle; beneath them, the whole width, the boxes that
        carry the process itself. ── */
  #more .phase.part{grid-template-columns:calc(var(--vrx,170px) - var(--bleedL)) minmax(0,1fr);
    column-gap:0;}
  #more .phase.part > .ph-head{grid-row:1; grid-column:1;}
  #more .phase.part > .ph-mark{grid-row:1; grid-column:2; align-self:end;
    border-left:1px solid var(--g4); padding-left:30px; margin-left:0;}
  #more .phase.part > .ph-body{grid-row:2; grid-column:1 / -1; margin-top:26px;}
  #more .phase.part .ph-mark .did{margin:0; max-width:56ch;}
  /* THE NAME STANDS ABOVE THE LINE, to the right of the circle; the description
     runs under the line, close to it, in the same capitals. */
  #more .phase.part{grid-template-columns:minmax(0,1fr);}
  #more .phase.part > .ph-head{grid-row:1; grid-column:1;}
  #more .phase.part{row-gap:0;}
  #more .phase.part > .ph-mark{grid-row:2; grid-column:1; border:0; padding-left:0;
    margin-top:20px;}
  #more .phase.part > .ph-body{grid-row:3; grid-column:1; margin-top:26px;}
  #more .phase.part .ph-head .hrow.up{height:calc(var(--rulY,90px) - 10px);
    align-items:flex-end;}
  #more .phase.part .ph-head h4{margin-left:calc(var(--vrx,170px) - var(--bleedL) + 22px);}
  #more .phase.part .ph-body .ops.rows{margin-left:calc(var(--vrx,170px) - var(--bleedL));}
  #more .phase.part .ph-mark h4{margin:0 0 0 calc(var(--vrx,170px) - var(--bleedL) + 22px);
    line-height:1;}
  #more .phase.part .ph-mark .did{margin:20px 0 0 calc(var(--vrx,170px) - var(--bleedL) + 22px);
    max-width:74ch; text-transform:uppercase;
    font-family:var(--head); font-size-adjust:cap-height .711; font-size:15px; font-weight:600; letter-spacing:.10em;
    line-height:1.6; color:var(--g1);}
  /* the station's head reads the same way */
  #more .bighead{padding-top:12px;}
  #more .bighead:before, #more .bighead:after{top:var(--rulY,90px);}

}

/* ══ THE SIX ROLL SIDEWAYS AT EVERY WIDTH, inside their own tab ══ */
/* nothing of the roll may leave the tab that holds it */
#more .phase > .ph-body{overflow:hidden;}
#more .phroll{overflow:hidden; max-width:100%;}
#more .phtrack{max-width:100%;}
@media(min-width:761px){
  #more .phstick{position:static; height:auto; display:block;}
  #more .phtrack{height:auto; display:flex; flex-direction:row; gap:0;
    overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
    scrollbar-width:none; margin:0; padding-top:8px;}
  #more .phtrack::-webkit-scrollbar{display:none;}
  #more .phtrack .phase{flex:0 0 100%; scroll-snap-align:center; margin:0;
    height:auto !important; width:100%; padding:0; background:none;
    backdrop-filter:none; -webkit-backdrop-filter:none;}
  #more .phtrack .phase:before, #more .phtrack .phase:after{display:none;}
  #more .phtrack .phase .ph-body, #more .phtrack .phase .ph-mark{visibility:visible;}
  #more .phtrack .phase .did, #more .phtrack .phase .cap, #more .phtrack .phase ul, #more .phtrack .phase .tags{opacity:1;}
  #more .phnav{display:flex; align-items:center; gap:12px; margin-top:22px;}
  #more .phpips{order:-1; margin-right:auto; display:flex; gap:9px;}
  #more .phar{width:38px; height:38px; padding:0; display:flex; align-items:center;
    justify-content:center; background:none; border:1px solid var(--g4);
    border-radius:50%; cursor:pointer;}
  #more .phar svg{width:16px; height:16px; fill:none; stroke:var(--g1);
    stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
  #more .phar[disabled]{opacity:.32;}
  #more .phprog{display:block; position:relative; height:6px; margin:0 0 14px;
    background:rgba(255,255,255,.14); border-radius:3px; overflow:hidden;}
  #more .phprog i{position:absolute; left:0; top:0; height:6px;
    width:calc(100% * var(--pp,0.1667)); background:var(--gold); border-radius:3px;
    transition:width .45s cubic-bezier(.33,0,.15,1);}}

/* ═══════════ THE FOUR ACCORDION TABS ═══════════
   Each is a panel of the section's own ground: the title above a gold rule, the gold mark standing on that rule at the page's rail, the description
   under it, and the body opening beneath on the click. They are written
   whole here and share nothing with the machinery of the six weeks. */
#more .acc{position:relative; margin:22px 0 0 calc(-1 * var(--bleedL));
  padding:40px var(--bleedR) 44px var(--bleedL);
  width:calc(100% + var(--bleedL) + var(--bleedR));
  background:var(--glass2); backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);}

@media(max-width:760px){
  #more .acc{padding:30px var(--bleedR) 32px var(--bleedL);}

  
  }

/* ── the three written tabs sit closer to their head ── */
@media(min-width:761px){
  #more .phase > .ph-body.tight{margin-top:0;}
  #more .phase:has(> .ph-body.tight){row-gap:12px;}

}
/* ── the week's name and moment stand above the bar, not inside the card ── */
#more .phlabel{display:flex; align-items:baseline; gap:14px; margin:0 0 12px;}
#more .phlabel .pn{font-family:var(--head); font-size-adjust:cap-height .711; font-size:11px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold);}
#more .phlabel .pw{font-family:var(--head); font-size-adjust:cap-height .711; font-size:11px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--grey);}
/* ── inside a card: the subjects in a column at the left, the reading at the
      right, parted by one dim line ── */
#more .phtrack .phase .ph-mark .n, #more .phtrack .phase .ph-mark .w{display:none;}
#more .phtrack .phase .ph-mark h4, #more .phtrack .phase .ph-mark .sci{margin-left:0;}
@media(min-width:761px){
  #more .phtrack .wcols{display:grid; grid-template-columns:minmax(200px,260px) minmax(0,1fr);
    gap:0; margin-top:18px;}
  #more .phtrack .wtags{padding-right:28px;}
  #more .phtrack .wtags .tags{display:block; margin:0;}
  #more .phtrack .wtags .tags i{display:block; margin:0 0 8px;}
  #more .phtrack .wmain{border-left:1px solid var(--g4); padding-left:28px;}
  #more .phtrack .wmain .did{margin:0; max-width:70ch;}
  #more .phtrack .wmain .cap{margin-top:20px;}}

/* ── a card's title and subtitle are written whole, over as many lines as they need ── */
#more .phtrack .phase .ph-mark h4, #more .phtrack .phase .ph-mark .sci{
  white-space:normal; overflow:visible; text-overflow:clip; max-width:none;}
/* ── the subjects stand as a plain list, without frames ── */
#more .phtrack .wtags .tags i{border:0; background:none; padding:0 0 0 16px;
  border-radius:0; position:relative;}
#more .phtrack .wtags .tags i:before{content:''; position:absolute; left:0; top:.62em;
  width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.7;}
/* ── the written tabs carry a short description above their readings ── */

/* ── on the four the pair is swapped whole: the moment above the rule in the
      lower line's own type, the stage below it in the upper line's ── */
#more .ph-head .n{color:var(--grey);}
#more .ph-head .w{color:var(--gold);}

/* A SHUT TAB SHOWS NOTHING OF ITS BODY — the panel holds a fixed height while it
   folds, so a tall body (the six weeks' roll above all) is taken out of the flow
   rather than merely clipped, which is what was painting over the sections below. */
#more .phase:not(.on):not(.phtrack .phase) > .ph-body{display:none;}
#more.mz .phase > .ph-body, #more.mz-open .phase > .ph-body{display:block !important;}

/* ── the body of a tab begins on the vertical of its mark ── */
@media(min-width:761px){
  #more .phase.part > .ph-body, #more .flow > .phase > .ph-body{
    margin-left:calc(var(--vrx,170px) - var(--bleedL));}
  #more .flow > .phase > .ph-body > .ops.rows{margin-left:0;}
}
/* ── on the phone the four run the full width ── */
@media(max-width:760px){
  #more .flow > .phase{margin-left:calc(-1 * var(--bleedL)); margin-right:calc(-1 * var(--bleedR));
    width:calc(100% + var(--bleedL) + var(--bleedR)); padding-left:var(--bleedL);
    padding-right:var(--bleedR);}
  #more .flow > .phase > .ph-body{margin-left:0;}
}

/* ── the subtitle of a tab is written whole, over two or three lines if it must, and the four keep one shut height, taken from the longest of them ── */
#more .flow > .phase .ph-head .sci{white-space:normal; overflow:visible;
  text-overflow:clip; max-width:70ch; font-weight:300;}

/* ── the bar and the dashes become one thing: six pieces, parted by gaps, filled
      up to the week the roll has reached ── */
#more .phprog{display:flex; gap:8px; height:6px; background:none; overflow:visible;}
#more .phprog:before{display:none !important;}
#more .phprog i{display:none;}
#more .phprog b{flex:1 1 0; height:6px; border-radius:3px; background:rgba(255,255,255,.14);
  transition:background .45s ease;}
#more .phprog b.on{background:var(--gold);}
#more .phpips{display:none !important;}

/* ── the centre of the accordion mark: red, nine across, shut and open alike ── */
#more .phtog .cross .core{fill:#b4564f; stroke:none; r:4.5;}

/* ══ THE FOUR ON THE PHONE — the desktop's own rule and mark, word for word, drawn from the vertical the script places a sixth of the panel in from the
   right; the same retraction, the same folding arms, the same greying bar. ══ */
@media(max-width:760px){
  #more .flow > .phase{position:relative; overflow:visible;}
  #more .flow > .phase:before, #more .flow > .phase:after{content:''; display:block;
    position:absolute; top:calc(var(--rulY,90px) - 1.5px); height:3px; background:var(--g4);
    border:0; border-radius:0; margin:0;
    transition:transform .9s cubic-bezier(.22,1,.36,1), background .4s ease;}
  #more .flow > .phase:before{left:0; width:calc(var(--vrx,170px) - 60px);
    transform-origin:100% 50%;}
  #more .flow > .phase:after{left:calc(var(--vrx,170px) + 60px); right:0; width:auto;
    transform-origin:0 50%;}
  #more .flow > .phase.on:before, #more .flow > .phase.on:after{transform:scaleX(0);}
  #more .flow > .phase .phtog{display:block; position:absolute; box-sizing:border-box;
    top:calc(var(--rulY,90px) - 60px); left:calc(var(--vrx,170px) - 60px);
    width:120px; height:120px; padding:0; margin:0; border:0; border-radius:0;
    background:none; -webkit-appearance:none; appearance:none; box-shadow:none;
    cursor:pointer; z-index:3; -webkit-tap-highlight-color:transparent;}
  #more .flow > .phase .phtog .cross{transform:translateX(.5px); position:absolute;
    inset:0; width:120px; height:120px; overflow:visible;}
  #more .flow > .phase .phtog .cross .bar,
  #more .flow > .phase .phtog .cross .arm{stroke:var(--gold); stroke-width:3;
    stroke-linecap:round; fill:none; vector-effect:non-scaling-stroke;
    transition:transform .9s cubic-bezier(.22,1,.36,1), stroke .4s ease;}
  #more .flow > .phase .phtog .cross .up{transform-origin:60px 48px;}
  #more .flow > .phase .phtog .cross .dn{transform-origin:60px 72px;}
  #more .flow > .phase.on .phtog .cross .arm{transform:scaleY(0);}
  #more .flow > .phase.on .phtog .cross .bar{stroke:var(--g4);}
  #more .flow > .phase .phtog .cross .dot{fill:var(--gold); opacity:0;
    transition:opacity .5s ease .35s;}
  #more .flow > .phase.on .phtog .cross .dot{opacity:1;}
  #more .flow > .phase .phtog .cross .core{fill:#b4564f; stroke:none; r:4.5;}
  #more .flow > .phase .ph-head .hrow.dn{padding-top:16px;}
  #more .flow > .phase .ph-head .sci{display:block; width:auto;
    max-width:calc(83.3% - 60px); font-size:11px;}
}

/* ══ THE CAROUSEL ON THE PHONE — the panel is the screen, the roll fills it and
   stands centred, the arrows sit at the right where a thumb reaches them, and
   every part of a card is parted by 35px ══ */
@media(max-width:760px){
  #more .flow > .phase{margin-left:-58px; margin-right:0; width:100vw;
    padding-left:24px; padding-right:24px;}
  #more .flow > .phase > .ph-body{margin-left:-24px; margin-right:-24px; width:auto;}
  #more .phnav{justify-content:flex-end; padding:0 33.3% 0 24px;}
  #more .phpips{margin-right:0;}
  #more .flow > .phase > .ph-body > .ops.rows{margin-left:24px; margin-right:24px;}
  #more .phtrack{margin-left:0; margin-right:0; padding-top:0;}
  #more .phtrack .phase{padding:0 24px;}
  #more .phprog{margin-left:0; margin-right:0; width:auto; padding-left:0;}
  #more .phtrack .wcols{display:block; margin-top:35px;}
  #more .phtrack .wtags{padding:0;}
  #more .phtrack .wtags .tags{display:block; columns:2; column-gap:18px; margin:0;}
  #more .phtrack .wtags .tags i{display:block; margin:0 0 10px; break-inside:avoid;}
  #more .phtrack .wmain{border:0; padding:0; margin-top:35px;}
  #more .phtrack .wmain .did{margin:0;}
  #more .phtrack .wmain .cap{margin-top:35px;}
  #more .phtrack .wmain ul{margin-top:35px;}
  #more .phtrack .phase .ph-mark h4{margin-bottom:15px; text-transform:uppercase;}
  #more .phtrack .phase .ph-mark .sci{margin-top:0; font-family:var(--head); font-size-adjust:cap-height .711;
    font-size:11px; font-weight:300; letter-spacing:.10em; line-height:1.6;
    text-transform:uppercase; color:var(--gold);}
}

/* ══ THE TWO NAMED BUTTONS UNDER THE ROLL — full width on the phone, 240 each on
   the desktop, both standing at the right, under the card ══ */
#more .phnav{display:flex; align-items:stretch; gap:0; margin-top:26px;
  justify-content:flex-end;}
#more .phar{display:flex; flex-direction:row; align-items:center; justify-content:center;
  gap:10px; width:240px; height:auto; padding:13px 16px; border:1px solid var(--g4);
  border-radius:0; background:none; cursor:pointer; text-align:center;
  transition:background .35s ease, color .35s ease, border-color .35s ease;}
#more .phar .chev{display:block; width:19px; height:19px; fill:none;
  stroke:var(--ink); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
#more .phar:hover:not([disabled]) .chev{stroke:#0d0d0d;}
#more .phar:hover:not([disabled]){background:var(--ink); color:#0d0d0d;
  border-color:var(--ink);}
#more .phar:hover:not([disabled]) .plab{color:#0d0d0d;}

#more .phar .plab{font-family:var(--head); font-size-adjust:cap-height .711; font-size:15px; font-weight:600;
  letter-spacing:.10em; text-transform:uppercase; color:var(--ink);}
#more .phar.next{border-left:0;}
#more .phar[disabled]{opacity:.32; cursor:default;}
@media(max-width:760px){
  #more .phnav{padding:0; gap:0;}
  #more .phar{flex:1 1 0; width:auto; border-left:0; border-right:0;}
  #more .phar.next{border-left:1px solid var(--g4);}}

/* ── the card of a week is drawn back to the left, so its dividing line falls on
      the same vertical as the accordion mark ── */
@media(min-width:761px){
  #more .flow > .phase:has(#phroll) > .ph-body{
    margin-left:calc(var(--vrx,170px) - var(--bleedL) - 260px);}
  #more .phtrack .wcols{grid-template-columns:260px minmax(0,1fr);}
  #more .phtrack .wtags{padding-right:28px;}
}

/* ── the two buttons stand thirty pixels under the roll, at every width ── */
#more .phnav{margin-top:30px !important;}

#more .phtrack .wtags .cap{margin:0 0 14px;}
#more .phtrack .wtags .tags{margin-top:0;}

/* ── inside the roll the pointer is the pointer again: the magnet belongs to the
      four tabs, so the cards must not hide the cursor it replaced ── */
#more .phtrack, #more .phtrack *{cursor:auto !important;}
#more .phtrack a, #more .phtrack button{cursor:pointer !important;}
#more .phnav, #more .phnav *{cursor:pointer !important;}

/* ── the four tabs carry a larger header, fifteen pixels over the week's own ── */
#more .flow > .phase .ph-head h4{font-size:41px;}
@media(max-width:1080px){ #more .flow > .phase .ph-head h4{font-size:37px;}}
@media(max-width:760px){ #more .flow > .phase .ph-head h4{font-size:35px;}}

/* ── a week's title stands in capitals on every display ── */
#more .phtrack .phase .ph-mark h4{text-transform:uppercase;}

/* ══ THE OFFER — the nine weeks drawn as nine dashes, parted into their four
   stages: the inquiry red, the preparation and the aftermath white, the six
   weeks of the workshop gold. The two meetings stand above the line, the
   inquiry and the subjects below it. ══ */
#offer{--o1:#c4c4c4; --o4:#3a3a3a; --red:#b4564f;
  min-height:0; display:flex; align-items:center;
  padding-top:9vh; padding-bottom:9vh;}
#offer > .pad{width:100%;}
/* ── THE OFFER — an ordinary section ────────────────────────────────
   The heading, the six lines read twice through their tabs, and the
   nine weeks as one line of dashes with the four stage names beneath.
   The nine-box ladder is kept as `13-the-offer-ladder.html`. ────── */
#offer h2{margin-top:18px; font-size:clamp(1.6rem,2.4vw,2.1rem); line-height:1.1;}
#offer h2 .brm{display:none;}

/* the nine weeks: nine dashes, and four names beneath, each in its own
   columns so no two names can ever share a place */
/* ── THE MEASURE, AND ITS OTHER SIDE ────────────────────────────────
   Four boxes, each in two parts: above, what the workshop is fixed at;
   below, what the same measure becomes when the form changes. The
   nine-dash line and the nine-box ladder are kept beside the page as
   `13-the-offer-ladder.html`. ─────────────────────────────────────── */
#offer .figs{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:34px;}
#offer .figs > div{display:flex; flex-direction:column; border:1px solid var(--line);
  border-radius:10px; background:var(--glass2); backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur); padding:16px 16px 0; overflow:hidden;}
/* the numeral and its words are one line, never two */
#offer .figs .top{display:flex; align-items:baseline; gap:8px; padding-bottom:12px;}
#offer .figs b{font-family:var(--head); font-size-adjust:cap-height .711; font-size:22px; font-weight:600; line-height:1;
  letter-spacing:.02em; color:var(--gold);}
#offer .figs span{font-family:var(--head); font-size-adjust:cap-height .711; font-size:14.5px; font-weight:400; letter-spacing:.02em;
  text-transform:none; line-height:1.3; color:var(--ink);}
#offer .figs em{display:block; margin:auto -16px 0; padding:12px 16px 14px;
  border-top:1px solid var(--line); font-family:var(--body); font-size-adjust:none; font-size:13px; font-style:normal;
  line-height:1.45; color:#8e8e8e;}
/* ══ THE OFFER — the section's own tabs, then the nine weeks ════════
   The rail is the page's own (`.bdwrap`), wired by the rails script, carrying two positions and nothing above their names; each panel is
   one list. Below them the nine weeks stand as nine dashes with the
   four stage names, each name in its own columns so no two overlap.
   The nine-box ladder is kept as `13-the-offer-ladder.html`. ══════ */
#offer{--o1:#c4c4c4; --o4:#3a3a3a; --red:#b4564f; padding:0;}
#offer .bdscroll{height:220vh;}
#offer .bdstick{padding-top:6svh; padding-bottom:6svh;}
#offer h2{margin-top:18px; font-size:clamp(1.6rem,2.4vw,2.1rem); line-height:1.1;}
#offer .bdpanel{min-height:0; padding-left:60px;}
/* ONE name stands: "What it is" never moves and only changes its colour, and the word "not" arrives after it when the second reading takes over.
   The second position keeps the whole phrase, its first words held
   invisible, so "not" lands exactly where it would have been written. */
#offer .bdtabs{position:relative; display:block; height:64px;
  border-right:0; border-bottom:0; padding-bottom:0;}
#offer .bdtabs::before, #offer .bdtabs::after{display:none;}
#offer .bdtab{position:absolute; left:0; top:0; width:100%; text-align:left;
  border:0; border-bottom:2px solid transparent; margin:0; padding:20px 0;
  transition:border-color .5s ease;}
#offer .bdtab .bdnm{opacity:1; transition:color .5s ease;}
#offer .bdtab:first-child .bdnm{color:var(--gold);}
#offer .bdtabs:has(.bdtab:last-child.on) .bdtab:first-child .bdnm{color:var(--red);}
#offer .bdtab:first-child{border-bottom-color:var(--gold);}
#offer .bdtabs:has(.bdtab:last-child.on) .bdtab:first-child{border-bottom-color:var(--red);}
#offer .bdtab:last-child{border-bottom:0; color:var(--red);}
#offer .bdtab:last-child .bdnm{color:var(--red);}
/* THE NAMES ARE WRITTEN, NOT DRAWN (2026-08-25): the circle alphabet is
   gone from these two and they are set in the page's body face, taking
   their colour from the tab as before. */
#offer .bdtab .bdnm{display:inline-flex; align-items:baseline; gap:9px;
  font-family:var(--body); font-size-adjust:none; font-size:33px; font-weight:500; line-height:1.1;
  letter-spacing:.01em; text-transform:uppercase;}

/* the glyphs are drawn in the alphabet's own coordinates and then scaled, so the stroke is held OUT of that scaling and stated in pixels — the
   same two the rule under the name is drawn with. */

#offer .bdtab .gh{visibility:hidden; font-style:normal; display:inline-block;}
#offer .bdtab .nw{display:inline-block; text-decoration:none; opacity:0;
  transform:translateY(6px); transition:opacity .45s ease, transform .45s ease;}
#offer .bdtab:last-child.on .nw{opacity:1; transform:none;}
/* on a wide screen the coloured rule stands upright at the rail's right;
   the phone keeps it under the name */
@media(min-width:761px){
  /* the rule belongs to the reading, not to the name: it stands upright at
     the left of the panel and runs its whole height, in the colour of the
     position that is running. */
  #offer .bdtabs{border-right:0;}
  #offer .bdtab{border-bottom:0; border-right:0;}
  #offer .bdwrap .bdpanel{border-left:2px solid var(--gold); padding-left:44px;
    margin-top:10px; transform:translateX(24px);
    transition:border-color .5s ease;}
  #offer .bdp{margin-top:-10px;}
  #offer .bdwrap:has(.bdtab:last-child.on) .bdpanel{border-left-color:var(--red);}
}
#offer .oflist{list-style:none; margin:0; padding:0;}
#offer .oflist li{position:relative; padding:10px 0 10px 20px; margin:0;
  border-bottom:1px solid rgba(240,237,232,.06);
  font-family:var(--body); font-size-adjust:none; font-size:16px; line-height:1.5; color:var(--ink);}
#offer .oflist li::before{content:''; position:absolute; left:0; top:1.25em; width:5px; height:5px;
  border-radius:50%; background:var(--gold);}
#offer .oflist.not li{color:var(--dim);}
#offer .oflist.not li::before{background:var(--red);}
#offer .nine{margin-top:54px;}
#offer .below{display:grid; grid-template-columns:repeat(9,minmax(0,1fr));
  gap:10px;
  margin-top:12px; align-items:start;}
#offer .below span{font-family:var(--head); font-size-adjust:cap-height .711; font-size:10.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--grey); line-height:1.35;}

@media(max-width:760px){
  #offer .bdscroll{height:240svh;}
  #offer h2 .brm{display:inline;}
  #offer .bdpanel{padding-left:0;}
  #offer .oflist li{font-size:14px;}
  #offer .below{gap:5px;}
  /* one box a row, full width, and each as short as its two lines allow */
  #offer .figs{grid-template-columns:1fr; gap:8px; margin-top:26px;}
  #offer .figs > div{padding:12px 14px 0;}
  #offer .figs b{font-size:18px;}
  /* the two readings run on one row, parted by a point, so the box holds
     only a single line of height */
  #offer .figs > div{flex-direction:row; align-items:baseline; justify-content:space-between;
    gap:10px; padding:11px 14px;}
  #offer .figs .top{padding-bottom:0;}
  #offer .figs span{font-size:13.5px;}
  #offer .figs em{margin:0; padding:0; border-top:0; font-size:12.5px; text-align:right;}}

/* ── THE ARCHES TAKE OVER THE TABS' GREY LINES ──────────────────────
   (journey, 2026-08-24) Once the arches have laid themselves along the
   tabs' top lines, the page's own segments give way, so the rule a reader
   sees is the one the figure drew. Winding back returns them. */
/* THE TABS' OWN GREY SEGMENTS ARE GONE (owner's ruling, 2026-08-24): the
   arches that fly out of the figure ARE the rule now, so a second one drawn
   underneath them only doubled the line. */
#more .phase:before, #more .phase:after{display:none;}

/* ── REGISTRATION HOLDS THE SCREEN while the ring becomes the mark ──
   (2026-08-24) Two screens of scroll belong to the section, and the reading
   sticks through them, so the figure's last change is watched rather than
   passed. The phone keeps the same shape at a shorter length. */
/* THE PIN, now that registration stands as its own section: two screens of
   scroll belong to it and the reading sticks through them, so the ring's
   change into the mark is watched rather than passed. */
/* THE PAGE IS NEVER HELD (owner, 2026-10-21): the section scrolls as the others do */
#register .rgpin{position:relative; height:auto;}
#register .rgstick{position:static; min-height:0; display:flex;
  align-items:center;}
#register .rgstick > .rgwrap{width:100%;}
@media(max-width:760px){
  #register .rgpin{height:auto;}
  /* ON A TELEPHONE THE READING SITS AT THE FOOT of the held screen, so the
     figure has the whole top of it to grow into and to become the mark. */
  #register .rgstick{align-items:flex-end; padding-bottom:5svh;}
  /* (the heading placement asked for on 25 August was undone at the owner's
     word; the section stands as it did) */
}

/* ══════════════════════════════════════════════════════════════════
   THE ONE-WEEK WORKSHOPS — 25 August
   The row IS the workshop tab: the crafts roll in a `.phtrack`, so every
   rule the six weeks are given holds here unchanged. Only two things are
   this row's own — the four phases standing on one line above the roll,
   and the two notes that close each craft's column.
   ────────────────────────────────────────────────────────────────── */

#more .owstep{display:flex; flex-direction:column; border:1px solid var(--line);
  background:#171717; padding:14px 14px 0;}
#more .owstep .owtop{display:flex; align-items:baseline; gap:8px; padding-bottom:8px;}
#more .owstep .owtop b{font-family:var(--head); font-size-adjust:cap-height .711; font-size:19px; font-weight:600; line-height:1;
  letter-spacing:.04em; color:var(--gold);}
#more .owstep .owtop span{font-family:var(--head); font-size-adjust:cap-height .711; font-size:13px; font-weight:400;
  letter-spacing:.02em; text-transform:uppercase; color:var(--ink);}
#more .owstep p{margin:0 0 14px; font-family:var(--body); font-size-adjust:none; font-size:13px; line-height:1.55;
  color:var(--g1);}
#more .owstep em{display:block; margin:auto -14px 0; padding:9px 14px 11px;
  border-top:1px solid var(--line); font-style:normal; font-family:var(--head); font-size-adjust:cap-height .711;
  font-size:10px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--g2);}

/* the two notes that close a craft, under its inquiries */

/* ── THE FOUR BOXES: four across while there is room, a slider below it ──
   They keep a true width rather than shrinking to nothing, so where four
   no longer fit the row becomes a track the finger moves. */
#more .owsteps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px; margin:0 0 40px;}
@media(max-width:1180px){
  #more .owsteps{display:flex; gap:12px; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:4px;}
  #more .owsteps::-webkit-scrollbar{display:none;}
  #more .owstep{flex:0 0 clamp(230px,62%,290px); scroll-snap-align:start;}}

/* ── ONE GREY LINE ON THE OFFERS, AND NO MOVEMENT IN IT ──
   The stages part their rule around the plus as they open; an offer keeps a
   single unbroken line that neither parts nor retracts. */

/* ── THE ONE-WEEK SECTION'S OWN HEAD ────────────────────────────────
   It is a section rather than a panel, so it takes the page's ordinary
   header and lead, standing in the flow's column above the six tabs. */
#more .owhead{margin:96px 0 40px;}
/* the header holds one line at every width */
#more .owhead h2{margin-top:20px; max-width:none; white-space:nowrap;
  font-size:clamp(22px, 4.4vw, 41px); transition:color .55s ease;}
/* once the gold band lies under it, the words are read in ink */
#more .owhead h2.ongold{color:#0d0d0d;}
#more .owhead .lead{margin-top:22px; max-width:62ch;}
/* the line that heads the four boxes */
#more .owhead .owlead{text-transform:uppercase; letter-spacing:.06em;}
#more .owhead .owsteps{margin-top:16px; margin-bottom:0;}

@media(max-width:760px){
  #more .owhead{margin:56px 0 30px;}
  }

/* the head of the one-week section stands in the page's own column */
#more .owhead{margin-left:-58px;}

@media(max-width:760px){
  #more .owhead{margin-left:-34px;}}

/* ══════════════════════════════════════════════════════════════════
   THE CRAFTS' ACCORDION — self-contained, 25 August
   Own markup, own names, own rules. It inherits nothing from the stage
   panels: no shared rule height, no bleed hidden inside a padding
   shorthand, no measuring script.

   ONE NUMBER GOVERNS IT: `--ow-col`, the width of the subjects' column.
   The red dot sits on that line, the head's rule begins sixty past it,
   and the content's vertical falls on it. Change it once and the three
   move together.

   THE HEAD IS SYMMETRIC ABOUT ITS OWN RULE, which is why the dot and the
   number are centred without a single measurement:
     18 above · a 28 title · 16 · [the rule] · 16 · an 18 subtitle · 28
     below = 124, and the rule at 18 + 28 + 16 = 62, which is 124/2.
   The room below is the room above plus the difference between the two
   lines (28 − 18 = 10). Keep that relation and it stays centred.
   ────────────────────────────────────────────────────────────────── */
.owacc{--ow-col:230px; --ow-gap:34px; --ow-line:rgba(255,255,255,.24);
  /* the tab runs the screen's whole width, as the stage panels do: the flow
     declares the bleed on each side and the accordion gives it back */
  margin-left:calc(-1 * var(--bleedL, 58px));
  margin-right:calc(-1 * var(--bleedR, 0px));}
.owacc + .owacc{margin-top:10px;}
.owtab{position:relative; background:rgba(255,255,255,.055);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);}
.owtab + .owtab{margin-top:10px;}

/* ── the head ── */
.owtab__head{position:relative; display:grid;
  grid-template-columns:var(--ow-col) minmax(0,1fr);
  align-items:center; width:100%; margin:0; padding:0; border:0;
  background:none; text-align:left; cursor:pointer; color:inherit;
  -webkit-tap-highlight-color:transparent;}
.owtab__head:focus-visible{outline:1px solid var(--g2); outline-offset:-4px;}
.owtab__no{grid-column:1; justify-self:start; padding-left:30px;
  font-family:var(--body); font-size-adjust:none; font-size:48px; font-weight:500; line-height:1;
  letter-spacing:.02em; color:var(--g1);}
.owtab__name{grid-column:2; display:block; padding:18px 0 28px 60px;}
.owtab__title{display:block; padding-bottom:16px; font-family:var(--head); font-size-adjust:cap-height .711;
  font-size:23px; font-weight:600; line-height:28px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink); white-space:nowrap;}
.owtab__sub{display:block; padding-top:16px; font-family:var(--head); font-size-adjust:cap-height .711;
  font-size:11.5px; font-weight:600; line-height:18px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold);}
/* the rule: one segment, right of the dot, retracting as the tab opens */
.owtab__rule{position:absolute; left:calc(var(--ow-col) + 60px); right:0;
  top:50%; height:2px; margin-top:-1px; background:var(--ow-line);
  transform-origin:0 50%;
  transition:transform .9s cubic-bezier(.22,1,.36,1);}
.owtab.on .owtab__rule{transform:scaleX(0);}
/* the mark, centred on the same line and on the same vertical */
.owtab__mark{position:absolute; left:var(--ow-col); top:50%;
  width:120px; height:120px; margin:-60px 0 0 -60px; pointer-events:none;}
.owx{display:block; width:120px; height:120px; overflow:visible;}
.owx .bar, .owx .arm{stroke:var(--gold); stroke-width:3; stroke-linecap:round;
  fill:none; vector-effect:non-scaling-stroke;
  transition:transform .9s cubic-bezier(.22,1,.36,1), stroke .4s ease;}
.owx .up{transform-origin:60px 48px;}
.owx .dn{transform-origin:60px 72px;}
.owtab.on .owx .arm{transform:scaleY(0);}
.owtab.on .owx .bar{stroke:var(--g4);}
.owx .core{fill:#b4564f; stroke:none; r:4.5;}
.owx .dot{fill:var(--gold); opacity:0; transition:opacity .5s ease .35s;}
.owtab.on .owx .dot{opacity:1;}

/* ── the body: it opens on its own height, measured by nothing ── */
.owtab__wrap{display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .8s cubic-bezier(.22,1,.36,1);}
.owtab.on .owtab__wrap{grid-template-rows:1fr;}
.owtab__wrap > .owtab__body{min-height:0; overflow:hidden;
  opacity:0; transition:opacity .45s ease;}
.owtab.on .owtab__wrap > .owtab__body{opacity:1; transition:opacity .6s ease .18s;}
.owtab__body{display:grid; grid-template-columns:var(--ow-col) minmax(0,1fr);}

.owtab__subs{grid-column:1; padding:0 var(--ow-gap) 34px 30px;}
.owtab__read{grid-column:2; border-left:1px solid var(--g4);
  padding:0 0 34px var(--ow-gap);}
.owtab__cap{margin:0 0 18px; font-family:var(--body); font-size-adjust:none; font-size:18px;
  font-weight:400; line-height:1.5; letter-spacing:.01em;
  text-transform:uppercase; color:var(--ink);}
.owtab__list{list-style:none; margin:0; padding:0;}
.owtab__list li{position:relative; margin:0 0 9px; padding-left:16px;
  font-family:var(--head); font-size-adjust:cap-height .711; font-size:10px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--g1);}
.owtab__list li:before{content:''; position:absolute; left:0; top:.62em;
  width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.7;}
.owtab__list li.key{color:var(--gold);}
.owtab__list li.key.lead{font-size:13px; letter-spacing:.16em;}
.owtab__list li.dim{color:var(--g2); opacity:.9;}
.owtab__next{margin-top:26px; padding:14px 16px;
  border:1px dashed rgba(255,255,255,.16); border-radius:3px;}
.owtab__next b{display:block; font-family:var(--head); font-size-adjust:cap-height .711; font-size:11px;
  font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--g2);}
.owtab__next span{display:block; margin-top:6px; font-family:var(--body); font-size-adjust:none;
  font-size:13.5px; line-height:1.5; color:var(--g3);}
.owtab__next .owtab__price{margin-top:12px; font-family:var(--body); font-size-adjust:none; font-size:26px;
  font-weight:500; line-height:1; letter-spacing:.01em; color:var(--core);}
.owtab__next .owtab__price em{display:block; margin-top:5px; font-style:normal;
  font-family:var(--body); font-size-adjust:none; font-size:11px; letter-spacing:.10em;
  text-transform:uppercase; color:var(--g2);}
.owtab__did{margin:0; font-family:var(--body); font-size-adjust:none; font-size:15px; font-weight:400;
  line-height:1.6; letter-spacing:.01em; color:var(--ink);}
.owtab__read .owtab__cap{margin:26px 0 18px;}
.owtab__q{list-style:none; margin:0; padding:0; display:grid; gap:22px;}
.owtab__q li{position:relative; padding-left:20px; font-family:var(--head); font-size-adjust:cap-height .711;
  font-weight:400; font-size:17px; line-height:1.4; letter-spacing:.01em;
  color:var(--ink);}
.owtab__q li:before{content:''; position:absolute; left:0; top:12px;
  width:9px; height:1px; background:var(--gold);}
.owtab__pair{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:0 46px; margin-top:30px;}
.owtab__note{margin:0; max-width:44ch; font-family:var(--body); font-size-adjust:none; font-size:14px;
  line-height:1.6; color:var(--g1);}
.owtab__note b{display:block; margin-bottom:6px; font-family:var(--head); font-size-adjust:cap-height .711;
  font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--g2);}

/* ── THE PHONE: THE BIG WORKSHOP'S OWN MOBILE TAB, RULE FOR RULE ──
   There, a tab reads as one column inset by the bleed: the naming, the
   title under it, then ONE grey line across the whole width parted around
   a small gold ring standing at `--vrx` — a sixth of the panel in from the
   right — and the subtitle below the line. This is that, with the line
   placed in the flow between the two so nothing has to be measured, and
   the ring drawn on the line itself. */
@media(max-width:760px){
  /* THE TAB IS EXACTLY THE SCREEN'S WIDTH. The bleed variable is 58px wider
     than the indent this column actually has on the phone, which was
     carrying the tab 24px off the left edge; the two real insets — the
     page's 6vw and the flow's 34px — are given back instead. */
  /* THE MARK STANDS ON THE BIG WORKSHOP'S OWN VERTICAL. That one sits at
     83.3% of the screen; this tab is the screen's width but holds 5% of
     padding, so within its content box the same point is (83.3 − 5) / 0.9. */
  .owacc{--ow-col:87%; --ow-gap:0px;
    margin-left:calc(-6vw - 34px); margin-right:-6vw;}
  /* ninety per cent, head and body alike */
  .owtab{padding-left:5%; padding-right:5%;}

  /* THE HEAD IS A FOUR-ROW GRID: the number, the title, the line, the
     subtitle — and the mark is placed IN THE LINE'S OWN ROW, centred on it.
     That is why neither of them can drift from the other: they are not two
     things measured against each other, they are one cell. The mark itself
     is the page's own — the same drawing every tab on this page carries,
     at its own size, arms, bars, red core and gold ends. */
  /* THE LINE AND THE MARK ARE NOT PLACED BY THE ROWS ABOVE AND BELOW THEM.
     A title that wraps, or a subtitle that runs to two lines, makes the two
     halves of a head unequal — which is the whole reason the mark has never
     sat still. They are taken out of the flow and set at the head's own
     fifty per cent, so they are at the tab's exact centre whatever the type
     does; the rows keep only their own spacing. */
  .owtab__head{position:relative; display:grid; grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto auto; padding:16px 0 14px;}
  .owtab__name{display:contents;}
  /* THE NUMBER STANDS ON THE TITLE'S OWN LINE, at the right of the mark and
     above the rule — which takes a whole row out of the head and shortens
     the tab by it. Same size as the title, and the grey the desktop number
     carries. */
  /* the number keeps the title's own line box, so its size adds no height
     to the head — it overflows that line rather than growing the row */
  .owtab__no{grid-row:2; grid-column:1; justify-self:end; align-self:start;
    padding:5px 0 0; font-family:var(--body); font-size-adjust:none; font-size:32px;
    font-weight:500; line-height:27px; letter-spacing:.02em; color:var(--g1);}
  /* the title sits ten pixels above the line and the subtitle sixteen below
     it — the distances the big workshop's tabs keep here */
  /* EVERY HEAD IS THE SAME HEIGHT. A title or a subtitle that runs to two
     lines would otherwise make its tab taller than its neighbours, so both
     are given the room for two lines whether they use it or not. */
  /* ONE LINE, ALWAYS. The limit that held it to seventy-two per cent is
     what forced the longest titles onto a second line; it takes the head's
     width now, and its size falls with the screen so even the longest
     stands on one line on a small phone. */
  .owtab__title{grid-row:2; grid-column:1; max-width:none; padding:5px 0 4px;
    font-size:clamp(15px, 5vw, 21px); line-height:1.3; white-space:nowrap;
    min-height:calc(1.3em);}
  /* THE LINE IS TWO SEGMENTS, one each side of the mark, and each retracts
     into it as the tab opens — the way the wide screen's does. */
  .owtab__rule{position:absolute; left:0; right:0; top:50%; margin-top:-1px;
    width:auto; height:2px; background:none; transform:none; z-index:1;}
  .owtab__rule:before, .owtab__rule:after{content:''; position:absolute; top:0;
    height:2px; background:var(--g4);
    transition:transform .9s cubic-bezier(.22,1,.36,1);}
  .owtab__rule:before{left:0; width:calc(var(--ow-col) - 48px);
    transform-origin:100% 50%;}
  /* no segment to the right of the mark */
  .owtab__rule:after{display:none;}
  /* the container itself does not move — the wide screen's rule for it would
     sweep the whole line sideways here; only its two segments retract, each
     into the gold end of the mark */
  .owtab.on .owtab__rule{transform:none;}
  .owtab.on .owtab__rule:before{transform:scaleX(0);}
  .owtab__mark{position:absolute; left:var(--ow-col); top:50%;
    width:120px; height:120px; margin:-60px 0 0 -60px; z-index:2;}
  .owtab__mark .owx{position:static;}
  /* the same subtitle the big workshop's tabs carry here: eleven pixels,
     weight three hundred, and stopping where the mark begins */
  .owtab__sub{grid-row:3; grid-column:1; padding-top:16px; font-size:11px;
    font-weight:300; letter-spacing:.14em; line-height:1.5;
    max-width:calc(var(--ow-col) - 60px); min-height:calc(2 * 1.5em);}

  /* A SHUT PANEL IS A ZERO-HEIGHT ROW, BUT ITS PADDING STILL DRAWS — which
     is why every tab stood taller than its own head and the mark, centred
     on the head, sat above the tab's middle. The body keeps no padding of
     its own; its last child carries the room instead. */
  /* ON THE PHONE THE TWO CLOSING PARTS AND THE NEXT WORKSHOP TRADE PLACES:
     who it is for and what you leave with come up under the subjects, and
     the next workshop with its price closes the panel. The two columns give
     up their own boxes so their children can be ordered as one run. */
  .owtab__body{display:flex; flex-direction:column; padding:0;}

  .owtab__subs, .owtab__read{display:contents;}
  .owtab__subs > .owtab__cap{order:1;}
  .owtab__list{order:2;}
  .owtab__pair{order:3; margin-top:30px;}
  .owtab__did{order:4; margin-top:32px;}
  .owtab__read > .owtab__cap{order:5;}
  .owtab__q{order:6;}
  .owtab__next{order:7; margin-bottom:28px;}
  .owtab__subs{padding:0;}
  .owtab__list{columns:2; column-gap:18px;}
  .owtab__list li{break-inside:avoid;}
  .owtab__read{grid-column:auto; border:0; padding:0; margin-top:32px;}
  .owtab__pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 20px;}}

/* ══════════════════════════════════════════════════════════════════
   THE MASTERCLASSES — their own section, and a carousel
   Self-contained: own names, own rules, nothing shared with the tabs
   above. One track the finger moves, one slide at a time on a phone and
   three on a wide screen, with the pips marking where it rests.
   ────────────────────────────────────────────────────────────────── */
#more .owhead--mc{margin-top:110px;}
#more .mccar{position:relative; margin-left:-58px;}
#more .mctrack{display:flex; gap:22px; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scrollbar-width:none; padding:0 0 6px;}
#more .mctrack::-webkit-scrollbar{display:none;}
/* ── THE RUN IS A TIMELINE ──
   Each square hangs from its own date on one line that crosses the whole
   run, so the six read in the order they are held; the line carries into
   the gap after each mark, which is what joins one date to the next square. */
#more .mcitem{position:relative; flex:0 0 360px; scroll-snap-align:start;
  padding-top:82px;}
/* the mark stands in front of the date, and both sit in from the square's
   own left edge; no line is drawn between them */
#more .mchead{position:absolute; left:22px; top:6px;}
#more .mctime{display:flex; align-items:baseline; gap:12px;}
#more .mctime:before{content:''; flex:0 0 auto; width:9px; height:9px;
  border-radius:50%; background:var(--gold); transform:translateY(-2px);}
#more .mctime b{font-family:var(--head); font-size-adjust:cap-height .711; font-size:14px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink);}
#more .mctime span{font-family:var(--body); font-size-adjust:none; font-size:13px; letter-spacing:.02em;
  color:var(--g2);}
/* TWELVE SEATS, ONE MARK EACH. A ring is free and a filled one is taken;
   the count is carried on the row itself, so whatever settles the payment
   need only set `data-taken` and add `is-taken` to that many. */
#more .mcseats{display:flex; align-items:center; gap:5px; margin-top:10px;
  padding-left:21px;}
#more .mcleft{margin-left:10px; font-family:var(--head); font-size-adjust:cap-height .711; font-size:10.5px;
  font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--g2);}
#more .mcseats i{width:7px; height:7px; border-radius:50%;
  border:1px solid var(--gold); background:transparent;
  transition:background-color .3s ease, border-color .3s ease;}

/* the slide is a square, always — 360 by 360, whatever it holds */
#more .mcslide{width:360px; height:360px; box-sizing:border-box;
  overflow:hidden;
  display:flex; flex-direction:column;
  border:1px solid var(--g4); border-radius:4px; background:var(--glass2);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  padding:22px 22px 20px;}
/* the subtitle in its ordinary case, one description at fifteen, and the
   subjects standing as tags at the foot */
/* the name, the subtitle in its ordinary case, one description at fifteen,
   and the subjects standing as tags at the foot */
/* the name at the left, the price at the right, on one line and one size */
#more .mctop{display:flex; align-items:baseline; justify-content:space-between;
  gap:14px;}
#more .mcprice{flex:0 0 auto; font-family:var(--head); font-size-adjust:cap-height .711; font-size:22px;
  font-weight:600; line-height:1.2; letter-spacing:.02em; color:var(--gold);
  white-space:nowrap;}
#more .mcslide h4{margin:0; font-family:var(--head); font-size-adjust:cap-height .711; font-size:22px; font-weight:600;
  line-height:1.2; letter-spacing:.02em; text-transform:uppercase; color:var(--ink);}
/* the subtitle holds two lines' room and closes on a rule, so the four
   squares carry their description from the same horizontal */
/* a stated height, not a minimum: a subtitle of one line and one of two
   must still close on the same horizontal */
#more .mcfig{margin:10px 0 0; padding-bottom:14px; height:calc(2 * 1.45em);
  overflow:hidden;
  border-bottom:1px solid var(--g4);
  font-family:var(--body); font-size-adjust:none; font-size:15px;
  font-weight:400; letter-spacing:.01em; line-height:1.45; text-transform:none;
  color:var(--ink);}
#more .mcbody{margin:14px 0 0; font-family:var(--body); font-size-adjust:none; font-size:15px;
  font-weight:400; line-height:1.6; letter-spacing:.01em; color:var(--g1);}
/* THE TAGS ARE SHOWN. `#more .tags` is faded to nothing by the rule that
   opens a phase's contents, and that selector is not scoped to a phase —
   so anything carrying the class outside one starts invisible. */
#more .mcslide .tags{opacity:1; margin:auto 0 0; padding-top:16px;}
/* the way in, at the foot of each subject's own square */
#more .mcgo{display:flex; align-items:center; justify-content:center;
  margin-top:14px; height:44px; border:1px solid var(--gold); border-radius:10px;
  font-family:var(--head); font-size-adjust:cap-height .711; font-size:11px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink); text-decoration:none;
  background:var(--core); border-color:var(--core);
  transition:background-color .25s ease, color .25s ease;}
#more .mcgo:hover{background:transparent; color:var(--core);}
/* one size for all three, whatever their rank */
#more .mcslide .tags i, #more .mcslide .tags i.key.lead{font-size:10px;
  letter-spacing:.14em; padding:4px 9px; line-height:1.1;}
#more .mcpips{display:flex; gap:9px; margin-top:22px;}
#more .mcpips button{width:9px; height:9px; padding:0; border:0; border-radius:50%;
  background:var(--g4); cursor:pointer;}
#more .mcpips button.on{background:var(--gold);}
@media(max-width:760px){
  #more .owhead--mc{margin-top:64px;}
  #more .mccar{margin-left:calc(-6vw - 34px); margin-right:-6vw; padding:0 5%;}
  #more .mctrack{gap:14px;}
  #more .mcitem{flex:0 0 min(360px, 88%); padding-top:52px;}
  #more .mcslide{width:100%; height:min(360px, 88vw); padding:18px 16px;}
  #more .mctime{display:block;}
  #more .mctime b{font-size:12.5px;}
  #more .mctime span{display:block; margin-top:2px; font-size:12px;}
  #more .mchead{left:16px; top:4px;}
  #more .mcitem{padding-top:76px;}
  #more .mcseats{gap:5px; padding-left:0;}}

/* ── THE STAGE'S NAME AT THE HEADER'S OWN SIZE (desktop only) ──
   "Stage I" to "Stage IV" stand as large as the titles beside them; the
   column widens with the type so the rule and the plus keep their place,
   and the rule's own height is measured from this row, so it follows. */
@media(min-width:761px){
  /* the size lives on the span itself — `.n` carries its own rule, which
     the wrapper's cannot override */
  #more .ph-head .who{min-width:210px;}
  #more .ph-head .n{font-size:41px; line-height:1.16; letter-spacing:.02em;
    color:#5a5a5a;}
}
@media(max-width:760px){
  /* ten pixels larger than whatever it inherits, so it grows without a
     second number to keep in step with the rest */
  #more .ph-head .n{font-size:21px; line-height:1.2; color:#5a5a5a;}
}

/* ── THE RING TAKES THE CRAFTS' TABS TOO ──
   Where the magnet runs — a fine pointer on a wide screen — the hand is
   put away and the ring stands between it and the tab's own mark, exactly
   as it does on the four stages. Everywhere else the pointer returns. */
@media(pointer:fine){
  .owtab, .owtab *, .owtab__head{cursor:none;}
  #more .flow > .phase, #more .flow > .phase *{cursor:none;}
}

/* ── WHAT EVERY MASTERCLASS HOLDS ──
   The same four-box row the week uses, in a shorter form: no numeral, and
   the fact that matters standing as the box's own header. */
#more .owsteps--mc .owstep{padding:13px 14px 15px;}
#more .owsteps--mc .owstep > b{display:block; font-family:var(--head); font-size-adjust:cap-height .711;
  font-size:16px; font-weight:600; line-height:1.24; letter-spacing:.03em;
  text-transform:uppercase; color:var(--gold);}
#more .owsteps--mc .owstep > p{margin:9px 0 0; font-size:12.5px; line-height:1.5;}
@media(max-width:900px){
  #more .owsteps--mc .owstep{flex:0 0 clamp(200px,58%,250px); padding:11px 12px 13px;}
  #more .owsteps--mc .owstep > b{font-size:14.5px;}}
/* the fourth box is the sitting's own order, three headers and nothing else */

/* ── TWO BOXES, EACH A SHORT HEADER OVER ITS OWN THREE ──
   The sitting's order on one side, the seat's terms on the other. */

#more .owsteps--mc .owstep ul{list-style:none; margin:11px 0 0; padding:0;}
#more .owsteps--mc .owstep li{position:relative; margin:0 0 6px; padding-left:15px;
  font-family:var(--body); font-size-adjust:none; font-size:13.5px; line-height:1.5; color:var(--g1);}
#more .owsteps--mc .owstep li:before{content:''; position:absolute; left:0; top:.62em;
  width:5px; height:5px; border-radius:50%; background:var(--gold); opacity:.8;}

/* ── ONE BOX, ONE HEADER, TWO COLUMNS OF ITS OWN ──
   The sitting's order and the seat's terms are the same subject, so they
   stand under one header rather than in two panels. */
#more .owsteps--one{display:block; grid-template-columns:none;}
#more .owsteps--one .owstep{display:block;}
/* the two runs stand close, and keep their two columns at every width */
#more .owpair2{display:grid; grid-template-columns:auto auto; justify-content:start;
  gap:0 26px; margin-top:11px;}
#more .owsteps--mc .owpair2 ul{margin:0;}

/* ══ THE FACILITATOR — the portrait at the left, the account at the right ══ */
#facilitator .fac{display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:44px; align-items:start; margin-top:34px;}
#facilitator .facpic{margin:0;}
#facilitator .facpic img{display:block; width:100%; height:auto; border-radius:4px;
  border:1px solid var(--line);}
#facilitator .facsay .lead{margin:0; max-width:60ch;}
@media(max-width:760px){
  #facilitator .fac{grid-template-columns:1fr; gap:26px; margin-top:26px;}
  #facilitator .facpic{max-width:260px;}}

/* ── MORE INFO, AND THE SHEET IT OPENS ── */
#more .mcmore{margin-left:6px; padding:0; border:0; background:none;
  font-family:var(--body); font-size-adjust:none; font-size:15px; line-height:1.6; color:var(--gold);
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px; cursor:pointer;}
.mcpop{display:none;}
.mcpop.on{display:block;}
.mcpop .mcpopbody p{margin:0 0 16px; font-family:var(--body); font-size-adjust:none; font-size:15.5px;
  line-height:1.75; color:var(--g1);}
.mcpop .mcpopbody p:last-child{margin-bottom:0;}
.mcpop h3{margin:0 0 22px;}

/* the portrait is cut to a circle and read in grey */
#facilitator .facpic img{border-radius:50%; aspect-ratio:1/1; object-fit:cover;
  filter:grayscale(1) contrast(1.02);}

/* ═══ THE UNIFIED PAGE — THE COLOUR LAW (2026-09-17) ═══════════════════
   Gold is the human part, white the digital part, red only what connects
   them. Self-contained: these rules are this page's, appended last. */
.hu{color:var(--gold);}
.di{color:#ffffff;}
.cx{color:var(--core);}
.tags i.hu{color:var(--gold);}
.tags i.di{color:#ffffff;}
#more .phase li.hu b{color:var(--gold);}
#more .phase li.di b{color:#ffffff;}

.bdmakes li.hu{color:var(--gold);}
.bdmakes li.di{color:#ffffff;}
/* the digital name stands under the human one, smaller, in the rail */
.bdtab .bdnm small.di{display:block; margin-top:6px; font-size:.62em; letter-spacing:.14em; opacity:.85;}
/* the section heading's digital line: one small line under the human two */
.h2sub{display:block; margin-top:14px; font-family:var(--head); font-size-adjust:cap-height .711; font-size:15px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;}
/* the stage: the fundamental as a small eyebrow, the human header, the digital subtitle */
.sey{margin:0 0 10px; font-family:var(--body); font-size-adjust:none; font-size:11px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--dim);}
.ptxt h2.hu{color:var(--gold);}

/* the three lines: the digital verb under the human one */
.s2blk .sub.di{color:#ffffff;}
/* a slide names its intelligence above its title */
#more .mckind{margin:0 0 8px; font-family:var(--body); font-size-adjust:none; font-size:10.5px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;}

/* the digital motion stands on its own line under the human one, smaller */
.s2blk .sub .di{display:block; margin-top:4px; font-size:.72em; letter-spacing:.08em;}

/* ═══ REVISION 2 (2026-09-17) ═══════════════════════════════════════════ */
/* the subject in two halves: each its header, at one size, and its two lines */
.sdual .shalf + .shalf{margin-top:26px;}
.sdual .shalf h2{margin-top:0;}
.sdual .pts{margin-top:10px;}
.sdual .pts li{margin-top:8px;}
.ptxt h2.di{color:#ffffff;}
@media(max-width:760px){ .sdual .shalf + .shalf{margin-top:16px;} .sdual .pts li{font-size:14px; line-height:1.5;} }
/* the build rail's contrast: the bold line human, the second digital */
.bdsub.hu{color:var(--gold);}
.bddesc.di{color:#ffffff;}
/* the weeks: human subjects as tags, the digital ones as one plain line under them */

/* a tab names its intelligence above its title */
.owtab__kind{display:block; margin-bottom:6px; font-family:var(--body); font-size-adjust:none; font-size:10.5px;
  font-weight:500; letter-spacing:.22em; text-transform:uppercase;}
/* THE BAND OF SUBJECTS — four rows, each gliding against the one above,
   faded at both ends; read in passing, never stopped on */
.cxrows{position:relative; overflow:hidden; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.cxrow{overflow:hidden; padding:7px 0;}
.cxline{display:inline-flex; white-space:nowrap; will-change:transform;}
.cxline span{flex:none; margin-right:44px; font-family:var(--head); font-size-adjust:cap-height .711; font-weight:600;
  font-size:clamp(15px,1.7vw,24px); letter-spacing:.06em; text-transform:uppercase; color:var(--dim);}
.cxrow:nth-child(1) .cxline span{color:var(--gold);}
.cxrow:nth-child(2) .cxline span{color:#ffffff; opacity:.75;}
.cxrow:nth-child(3) .cxline span{color:var(--dim);}
.cxrow:nth-child(4) .cxline span{color:var(--gold); opacity:.6;}

/* ═══ REVISION 3 (2026-09-17) ═══════════════════════════════════════════ */
/* the three lines: the description is the digital side of the stage */
.s2blk .desc.di{color:#ffffff;}
/* the weeks: each human subject a tag — the canon's chip, made smaller —
   and its digital partner written directly under it, without a frame */
#more .tpairs{display:flex; flex-direction:column; gap:10px; margin:0;}

@media(max-width:760px){ #more .tpairs{display:grid; grid-template-columns:1fr 1fr; gap:10px 14px;} }
/* revision 4: tags two pixels smaller, each on one line, the partner closer */

/* revision 5: the week's subjects in two groups, one column — gold tags, then white tags of the same size */
#more .tpairs{display:flex; flex-direction:column; gap:15px;}
#more .tgrp{display:flex; flex-direction:column; align-items:flex-start; gap:3px;}
#more .tgrp .tg{display:inline-block; font-style:normal; font-family:var(--head); font-size-adjust:cap-height .711; font-size:8.5px;
  font-weight:500; letter-spacing:.14em; text-transform:uppercase; line-height:1.1; white-space:nowrap;
  border-radius:6px; padding:3px 9px; border:1px solid;}
#more .tgrp.hu .tg{color:var(--gold); border-color:rgba(201,168,76,.45);}
#more .tgrp.di .tg{color:#ffffff; border-color:rgba(255,255,255,.30);}
#more .tgrp .tg.lead{font-size:10px; padding:4px 11px;}
#more .tgrp.hu .tg.lead{border-color:var(--gold);}
#more .tgrp.di .tg.lead{border-color:rgba(255,255,255,.7);}
@media(max-width:760px){ #more .tpairs{display:grid; grid-template-columns:1fr 1fr; gap:0 15px;} }

/* revision 9 (2026-09-17): nothing flies to the four stages, so their own
   grey dividers stand from the start again (the twin hid them for the arches) */
@media(min-width:761px){ #more .flow > .phase:before, #more .flow > .phase:after{display:block;} }

/* THE DOT (2026-10-19) — the blog's one pointer (8. BLOG/assets/dot.js, blog canon §11) stands on this page: it leaves
   where the page's own mark (.mag) replaces the pointer, over the four stages and the crafts' tabs, and the run of
   cards is a surface moved sideways */
@media (min-width:761px) and (prefers-reduced-motion:no-preference){
  #more .flow > .phase:not(.on), .owtab:not(.on), #more .flow > .phase.on > .ph-head, .owtab.on .owtab__head{--dot-mode:off;}
}

/* THE TWO STRIPS, ONCE MADE (owner, 2026-10-21): in the page, behind the figure,
   in their own colours at the tabs' .44 */
.rgstrips{position:absolute; left:0; top:0; width:100%; height:0; z-index:0; pointer-events:none;}
.rgstrips i{position:absolute; display:none;}
.rgstrips .rs-red{left:0; width:100%; background:rgba(180,86,79,.44);}
.rgstrips .rs-gold{background:rgba(201,168,76,.44);}