/* Housewright · direction B2 "Drawing set" · site.css
   Each page is one sheet of working drawings: a ruled frame, a datum line at the wordmark's
   roofline, a drawing field on the left, a notes column on the right, a title block at the end.
   Every rule runs from one rule to another; nothing stops in mid-air.
   Colour has a job: coral = what your church ends up with (and the wordmark's dot),
   amber = still to be confirmed, Ateneo = annotation. Coral and amber are fills only. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("SchibstedGrotesk-Variable.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  --paper: #F0EEEB;   /* Magical Moonlight */
  --ink: #13181B;     /* Neverything, 15.44:1 on paper */
  --drift: #CCD5DA;   /* Polar Drift, hover only */
  --blue: #003A6C;    /* Ateneo Blue, annotation, 9.95:1 on paper */
  --coral: #FD8973;   /* Miami Coral, fills only on paper */
  --amber: #FFBF65;   /* Sea Buckthorn, fills only on paper */

  --sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;

  --t-lbl: 0.8125rem;
  --t-body: 1.0625rem;
  --t-lead: 1.1875rem;
  --t-act: 1.1875rem;
  --t-h3: 1.375rem;
  --t-h2: 1.875rem;
  --t-h1: clamp(2.25rem, 1.25rem + 4vw, 4.25rem);

  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem; --s7: 3rem;

  --line: 1px solid var(--ink);
  --line-heavy: 3px solid var(--ink);
  --frame: 0.5rem;          /* paper margin outside the sheet frame */
  --pad: 1rem;              /* inset of the drawing field */
  --notes: 20rem;           /* width of the notes column, wide screens only */
  --measure: 36rem;
  --cell: 3.25rem;          /* height of a ruled action cell */
  --anno: 2.25rem;          /* annotation band above the datum */
  --mark-max: 100cqi;       /* wordmark width; capped per page on wide screens */
}

@media (min-width: 60rem) {
  :root {
    --t-body: 1.125rem;
    --t-lead: 1.3125rem;
    --t-act: 1.25rem;
    --t-h3: 1.5rem;
    --t-h2: 2.5rem;
    --frame: 1rem;
    --pad: 2.5rem;
    --cell: 3.75rem;
    --anno: 2.75rem;
  }
  .home { --mark-max: 60rem; }
  .sub { --mark-max: 28rem; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 420;
  line-height: 1.55;
}
img { display: block; max-width: 100%; height: auto; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-weight: 640; text-wrap: balance; }
b { font-weight: 640; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--blue); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.skip {
  position: absolute; left: var(--s4); top: -10rem; z-index: 10;
  padding: var(--s3) var(--s4);
  background: var(--ink); color: var(--paper);
  font-weight: 640; text-decoration: none;
}
.skip:focus { top: var(--s4); color: var(--paper); }

/* annotation voice: system mono, Ateneo */
.lbl, .lvl, .tick, .base span, .num, .code, .opt, .c-ref, .sched th, .wk {
  font-family: var(--mono);
  letter-spacing: 0.02em;
}
.lbl {
  display: block;
  margin: 0 0 var(--s3);
  color: var(--blue);
  font-size: var(--t-lbl);
  font-weight: 600;
  line-height: 1.35;
}

/* ---------- the sheet ---------- */
.sheet {
  width: calc(100% - 2 * var(--frame));
  max-width: 90rem;
  margin: var(--frame) auto;
  border: var(--line);
}

/* ---------- head: the wordmark drawn as the subject ---------- */
.head { display: grid; grid-template-columns: minmax(0, 1fr); }

.anno {                     /* band above the datum; its bottom rule IS the datum */
  position: relative;
  height: var(--anno);
  border-bottom: var(--line);
}
.lvl {                      /* level label with a marker whose tip sits on the datum */
  position: absolute; left: var(--pad); bottom: 0.5rem;
  padding-left: 1.125rem;
  color: var(--blue);
  font-size: var(--t-lbl); font-weight: 600; line-height: 1;
}
.lvl::before {
  content: "";
  position: absolute; left: 0; bottom: -0.5rem;
  border-left: 0.375rem solid transparent;
  border-right: 0.375rem solid transparent;
  border-top: 0.5rem solid var(--ink);
}

.draw { container-type: inline-size; padding: 0 var(--pad) var(--s6); }
.mk {
  --mw: min(var(--mark-max), 100cqi);
  display: flow-root;
  position: relative;
  width: var(--mw);
}
.mark {                     /* pull the art up so its roofline lands on the datum */
  display: block;
  margin-top: calc(var(--mw) * -0.00339);
}
.mark img { width: 100%; }
.mark:focus-visible { outline-offset: 4px; }

.tick {                     /* the parts of the wordmark that stop on the roofline */
  position: absolute; bottom: 100%;
  transform: translateX(-50%);
  padding-bottom: 0.875rem;
  color: var(--blue);
  font-size: var(--t-lbl); font-weight: 600; line-height: 1;
  pointer-events: none;
}
.tick::after {
  content: "";
  position: absolute; left: 50%; bottom: 0;
  height: 0.625rem;
  border-left: 1px solid var(--blue);
}
.tk-h1 { left: 2.55%; }
.tk-dot { left: 72.37%; }
.tk-h2 { left: 85.95%; }
.tk-t { left: 96.29%; }
.tk-h1, .tk-h2 { display: none; }

.base {                     /* baseline, edge to edge of the field */
  position: absolute;
  top: calc(var(--mw) * 0.12713);
  left: calc(-1 * var(--pad));
  right: calc(var(--mw) - 100cqi - var(--pad));
  border-top: 1px dashed var(--blue);
  pointer-events: none;
}
.base span {
  position: absolute; left: var(--pad); top: 0.375rem;
  color: var(--blue);
  font-size: var(--t-lbl); font-weight: 600; line-height: 1;
}

/* nav: ruled cells */
.nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: var(--line); }
.nav a {
  display: flex; align-items: center;
  min-height: var(--cell);
  padding: 0 var(--pad);
  font-weight: 640;
  text-decoration: none;
}
.nav a + a { border-left: var(--line); }
.nav a:hover { background: var(--drift); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.nav a:focus-visible { outline-offset: -5px; }
.nav a[aria-current="page"]:focus-visible { outline-color: var(--amber); }

/* ---------- rows: field | notes ---------- */
.row { display: grid; grid-template-columns: minmax(0, 1fr); border-top: var(--line); }
.f { min-width: 0; padding: var(--s6) var(--pad); }
.n { min-width: 0; padding: var(--s5) var(--pad); border-top: var(--line); }
.n:empty { display: none; }
.f > :last-child, .n > :last-child { margin-bottom: 0; }

h2 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -0.02em; }
.f > h2 + * { margin-top: var(--s5); }
.n h2 { margin-bottom: var(--s3); font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.015em; }

/* sheet title cell */
.title .f { display: flex; flex-direction: column; gap: var(--s5); }
.title .lbl { margin: 0; }
h1 { max-width: 15em; font-size: var(--t-h1); line-height: 1.02; letter-spacing: -0.025em; }
.lead { font-size: var(--t-lead); line-height: 1.45; }

/* actions: ruled cells in the notes column */
.n-acts { display: flex; flex-direction: column; padding: 0; }
.n-acts .lead { margin: 0; padding: var(--s5) var(--pad); }
.acts { display: flex; flex-direction: column; margin: 0; margin-top: auto; }
.act {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  width: 100%;
  min-height: var(--cell);
  padding: var(--s3) var(--pad);
  border: 0;
  border-top: var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-act);
  font-weight: 640;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.act span { font-size: 1.75rem; font-weight: 420; line-height: 1; }
.act:hover { background: var(--ink); color: var(--paper); }
.act:focus-visible { outline-offset: -5px; }
.act:hover:focus-visible { outline-color: var(--amber); }
.n-hang .acts { margin-top: 0; }          /* cells hang from the rule above */
.n-hang .act { border-top: 0; }
.n-hang .act + .act { border-top: var(--line); }

/* ---------- schedule of work ---------- */
.sched { display: block; width: 100%; border-collapse: collapse; border-top: var(--line); }
.sched thead {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sched tbody { display: block; }
.sched tr { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); }
.sched tbody tr + tr { border-top: var(--line); }
.sched td { display: block; min-width: 0; padding: var(--s4) var(--pad); vertical-align: top; }
.sched .c-ref {
  grid-row: 1 / span 3;
  padding: var(--s4) var(--s3);
  border-right: var(--line);
  font-size: 0.9375rem;
  font-weight: 600;
}
.c-work, .c-time, .c-end { grid-column: 2; }
.c-time, .c-end { position: relative; border-top: var(--line); }
.c-time { font-weight: 600; }
.sched .c-time:empty { display: none; }
.c-time::before, .c-end::before {
  content: attr(data-label);
  display: block;
  margin-bottom: var(--s1);
  color: var(--blue);
  font-family: var(--mono);
  font-size: var(--t-lbl);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.c-end::before { padding-left: 1.125rem; }
.c-end::after {
  content: "";
  position: absolute; left: var(--pad); top: calc(var(--s4) + 0.3125rem);
  width: 0.625rem; height: 0.625rem;
  background: var(--coral);
}
.c-work h3 { font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.015em; }
.c-work h3 a {
  display: inline-flex; align-items: center;
  min-height: 2.75rem;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}
.c-work p { margin: var(--s1) 0 0; }
.sq {
  display: inline-block;
  width: 0.625rem; height: 0.625rem;
  margin-right: var(--s2);
  background: var(--coral);
  vertical-align: 0.05em;
}

/* ---------- keynote steps ---------- */
.row .st {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--s4);
  align-items: start;
  padding-block: var(--s5);
}
.num {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border: var(--line);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
}
.st p { max-width: var(--measure); margin: 0.25rem 0 0; }
.leader { display: none; }
.note { margin: 0; }
.note .lbl { display: inline; margin: 0 0.625em 0 0; }

/* ---------- AI Pilot: the six weeks drawn, weeks list, what you keep ---------- */
.bleed { margin-inline: calc(-1 * var(--pad)); }
.f.flush { padding-bottom: 0; }

.wk { max-width: 40rem; margin: var(--s5) 0 var(--s6); }
.wk-dim {
  position: relative;
  display: flex; justify-content: center;
  height: 1.5rem;
  margin: 0 0 var(--s2);
  border-inline: var(--line);
}
.wk-dim::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  border-top: var(--line);
}
.wk-dim span {
  position: relative;
  padding: 0 var(--s3);
  background: var(--paper);
  color: var(--blue);
  font-size: var(--t-lbl); font-weight: 600; line-height: 1.5rem;
}
.wk-cells { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: var(--line); }
.wk-cells li { padding: var(--s3) var(--s1); font-size: var(--t-lbl); font-weight: 600; text-align: center; }
.wk-cells li + li { border-left: var(--line); }
.wk-grp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: var(--s2) 0 0; }
.wk-grp span {
  position: relative;
  margin-inline: var(--s1);
  padding-top: var(--s2);
  border-top: var(--line);
  color: var(--blue);
  font-size: 0.75rem; font-weight: 600; line-height: 1.25;
  text-align: center;
}
.wk-grp span::before, .wk-grp span::after {
  content: "";
  position: absolute; top: 0;
  height: 0.375rem;
  border-left: var(--line);
}
.wk-grp span::before { left: 0; }
.wk-grp span::after { right: 0; }
.g1 { grid-column: 1; }
.g2 { grid-column: 2 / 6; }
.g3 { grid-column: 6; }

.wks li { padding: var(--s4) var(--pad); border-top: var(--line); }
.keeps li {
  position: relative;
  padding: var(--s4) var(--pad) var(--s4) calc(var(--pad) + 1.375rem);
  border-top: var(--line);
}
.keeps li::before {
  content: "";
  position: absolute; left: var(--pad); top: calc(var(--s4) + 0.5em);
  width: 0.625rem; height: 0.625rem;
  background: var(--coral);
}

/* ---------- draft markers ---------- */
.tbc {
  padding: 0.05em 0.4em;
  border: 1px dashed var(--ink);
  background: var(--amber);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.875em;
  font-weight: 600;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- form: ruled cells you fill in ---------- */
.f.fields { padding: 0; }
.cells { display: grid; grid-template-columns: minmax(0, 1fr); }
.fld { margin: 0; border-bottom: var(--line); }
.fld label {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s2);
  padding: var(--s3) var(--pad) 0;
  font-weight: 640;
}
.code { color: var(--blue); font-size: var(--t-lbl); font-weight: 600; }
.opt { color: var(--blue); font-size: var(--t-lbl); font-weight: 400; }
.fld input, .fld select, .fld textarea {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: var(--s2) var(--pad) var(--s3);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
}
.fld textarea { min-height: 8rem; resize: vertical; }
.fld:hover { background: var(--drift); }
.fld:focus-within { outline: 3px solid var(--blue); outline-offset: -3px; }
.fld :focus-visible { outline: none; }
.sel { position: relative; display: block; }
.sel select { -webkit-appearance: none; appearance: none; padding-right: 3rem; cursor: pointer; }
.sel::after {
  content: "";
  position: absolute; right: calc(var(--pad) + 0.25rem); top: 45%;
  width: 0.6rem; height: 0.6rem;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}
.fields .act { border-top: 0; }

/* ---------- title block ---------- */
.tb-top { border-top: var(--line-heavy); }
.tb { display: grid; grid-template-columns: minmax(0, 1fr); border-top: var(--line-heavy); }
.tb.cont { border-top: var(--line); }
.tb-l { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.tb-c { min-width: 0; padding: var(--s5) var(--pad); }
.tb-id { grid-column: 1 / -1; border-bottom: var(--line); }
.tb-id img { width: 15rem; margin: var(--s2) 0 var(--s4); }
.tb-id p { margin: 0; }
.tb-l .tb-c + .tb-c + .tb-c { border-left: var(--line); }
.tb-key { border-top: var(--line); }
.tb ul a { display: flex; align-items: center; min-height: 2.75rem; }
.tb a[aria-current="page"] { font-weight: 640; text-decoration-thickness: 2px; }
.key li { display: flex; align-items: center; gap: var(--s3); min-height: 2.75rem; }
.key .sq { margin: 0; }

/* ---------- wide screens: the notes column opens ---------- */
@media (min-width: 60rem) {
  .head { grid-template-columns: minmax(0, 1fr) var(--notes); }
  .anno { grid-column: 1 / -1; }
  .lvl { left: auto; right: var(--s5); }
  .tk-h1, .tk-h2 { display: block; }
  .draw { padding-bottom: var(--s7); }
  .nav { grid-template-columns: minmax(0, 1fr); align-content: start; border-top: 0; border-left: var(--line); }
  .nav a { padding: 0 var(--s5); border-bottom: var(--line); }
  .nav a + a { border-left: 0; }

  .row { grid-template-columns: minmax(0, 1fr) var(--notes); }
  .f { padding: var(--s7) var(--pad); }
  .n { padding: var(--s7) var(--s5); border-top: 0; border-left: var(--line); }
  .n:empty { display: block; }

  .title .f { justify-content: space-between; gap: var(--s7); }
  .n-acts { padding: 0; }
  .n-acts .lead { padding: var(--s7) var(--s5) var(--s6); }
  .act { padding: var(--s3) var(--s5); }
  .n-hang .act:last-child { border-bottom: var(--line); }

  .sched thead {
    position: static;
    display: block;
    width: auto; height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    border-bottom: var(--line);
  }
  .sched tr { grid-template-columns: 7rem minmax(0, 1fr) 11rem var(--notes); }
  .sched th {
    display: block;
    padding: var(--s3) var(--s5);
    border-left: var(--line);
    color: var(--blue);
    font-size: var(--t-lbl);
    font-weight: 600;
    text-align: left;
  }
  .sched th:first-child { padding-left: var(--pad); border-left: 0; }
  .sched td { padding: var(--s5); }
  .sched .c-ref { grid-row: auto; padding: var(--s5) var(--s5) var(--s5) var(--pad); border-right: 0; }
  .c-work, .c-time, .c-end { grid-column: auto; border-left: var(--line); }
  .c-time, .c-end { border-top: 0; }
  .sched .c-time:empty { display: block; }
  .c-time::before, .c-end::before, .c-end::after { content: none; }
  .c-time { font-size: var(--t-lead); line-height: 1.3; }

  .row .st { grid-template-columns: 2.25rem minmax(0, var(--measure)) minmax(var(--s6), 1fr); }
  .leader {                 /* from the end of the step to the note in the column */
    display: block;
    position: relative;
    height: 1px;
    margin: calc(0.25rem + 0.775em) calc(-1 * var(--pad)) 0 0;
    background: var(--ink);
  }
  .leader::before {
    content: "";
    position: absolute; left: 0; top: -3px;
    width: 7px; height: 7px;
    background: var(--ink);
  }
  .row .sn { padding-block: var(--s5); }
  .sn .note { position: relative; margin-top: 0.25rem; }
  .sn .note::before {
    content: "";
    position: absolute; top: 0.775em; left: calc(-1 * var(--s5));
    width: calc(var(--s5) - var(--s2));
    height: 1px;
    background: var(--ink);
  }

  .wks li { display: grid; grid-template-columns: 9rem minmax(0, var(--measure)); gap: var(--s5); }
  .cells { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fld:nth-child(even) { border-left: var(--line); }
  .fld-wide { grid-column: 1 / -1; }

  .tb { grid-template-columns: minmax(0, 1fr) var(--notes); }
  .tb-l { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); }
  .tb-id { grid-column: auto; border-bottom: 0; }
  .tb-l .tb-c + .tb-c { border-left: var(--line); }
  .tb-key { padding-inline: var(--s5); border-top: 0; border-left: var(--line); }
}

/* =====================================================================
   B3 · editorial layer + motion (appended to B2's drawing set)
   Editorial: a running folio, display headlines that set themselves,
   detail-callout bubbles as section numbers, pull quotes on colour
   spreads, a black closing spread, drop caps.
   Motion is CSS only. Two gates:
     1. prefers-reduced-motion: no-preference  (else: static, finished)
     2. @supports (animation-timeline: view()) for anything scroll-linked
   Ateneo blue is the annotation layer, and the AI marks live in it.
   ===================================================================== */

:root {
  --t-h1: clamp(2.6rem, 0.9rem + 7.4vw, 7.25rem);
  --t-h2: clamp(2rem, 1.25rem + 3vw, 3.75rem);
  --t-pull: clamp(1.9rem, 0.9rem + 4.2vw, 5rem);
  --w-disp: 760;
  --ease-draw: cubic-bezier(.65, 0, .25, 1);
  --ease-set: cubic-bezier(.2, .75, .1, 1);
  --paper-dim: rgba(240, 238, 235, .55);   /* 4:1 on Ateneo, so the un-inked words still pass AA large */
}
.sub { --t-h1: clamp(2.4rem, 0.9rem + 5.6vw, 6rem); }

/* ---------- folio: the running head ---------- */
.folio {
  display: flex; justify-content: space-between; gap: var(--s4);
  margin: 0;
  padding: var(--s2) var(--pad);
  border-bottom: var(--line);
  color: var(--blue);
  font: 600 0.75rem/1.3 var(--mono);
  letter-spacing: 0.03em;
}
.fo-l, .fo-r { display: none; }

/* ---------- display type ---------- */
h1 {
  max-width: 13em;
  font-size: var(--t-h1);
  font-weight: var(--w-disp);
  line-height: 0.94;
  letter-spacing: -0.045em;
}
.w { position: relative; display: inline-block; white-space: nowrap; }
.w::before { content: attr(data-w); visibility: hidden; font-weight: var(--w-disp); }
.w > i { position: absolute; left: 0; top: 0; font-style: normal; font-weight: var(--w-disp); }
.kick { display: flex; align-items: baseline; gap: var(--s3); }
.sec { padding: 0.1em 0.45em; border: 1px solid var(--blue); }

.title .f { gap: var(--s6); }
.title .lead { font-size: clamp(1.2rem, 1rem + 0.6vw, 1.4rem); }

/* ---------- section numbers: detail callout bubbles ---------- */
.chap-h { display: flex; align-items: center; gap: var(--s4); }
.bub {
  position: relative; flex: none;
  display: grid; grid-template-rows: 1fr 1fr; place-items: center;
  width: 3.75rem; height: 3.75rem;
}
.bub svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bub circle, .bub path { fill: none; stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.bub b { align-self: end; font-size: 1.35rem; font-weight: 760; line-height: 1; padding-bottom: 0.15em; }
.bub small { align-self: start; padding-top: 0.3em; color: var(--blue); font: 600 0.625rem/1 var(--mono); }
h2 { font-size: var(--t-h2); font-weight: 720; line-height: 0.98; letter-spacing: -0.035em; }
.chap .body { margin-top: var(--s6); max-width: var(--measure); }
.chap .body > :last-child { margin-bottom: 0; }
.stand { font-size: var(--t-lead); line-height: 1.45; }

/* short TBC chips inside steps stay on one line */
.st .tbc, .ks .tbc { white-space: nowrap; }
.n .tbc { display: inline-block; }

/* keynote list (sub pages) and ruled lists */
.ks li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--s4); padding: var(--s4) 0; border-top: var(--line); }
.ks li:last-child { border-bottom: var(--line); }
.ks p { margin: 0.2rem 0 0; }
.rl li, .keeps li { position: relative; padding: var(--s3) 0 var(--s3) 1.5rem; border-top: var(--line); }
.rl li:last-child, .keeps li:last-child { border-bottom: var(--line); }
.rl li::before {
  content: ""; position: absolute; left: 0; top: calc(var(--s3) + 0.72em);
  width: 0.75rem; border-top: 1px solid var(--blue);
}
.keeps li { padding-left: 1.5rem; }
.keeps li::before { left: 0; top: calc(var(--s3) + 0.45em); }

/* the "you end up with" chapters carry the coral mark */
.ends-ch .bub circle { stroke: var(--ink); }
.ends-ch .bub b { position: relative; }
.ends-ch .chap-h h2::after {
  content: ""; display: inline-block;
  width: 0.16em; height: 0.16em; margin-left: 0.08em;
  background: var(--coral);
  vertical-align: 0;
}

/* ---------- pull quote: an Ateneo spread ---------- */
.pull {
  margin: 0;
  padding: var(--s7) var(--pad) var(--s6);
  border-top: var(--line);
  background: var(--blue);
  color: var(--paper);
}
.pq { margin: 0; }
.pq p {
  max-width: 19em; margin: 0;
  font-size: var(--t-pull); font-weight: 680; line-height: 1.02; letter-spacing: -0.035em;
  text-wrap: balance;
}
.pq-sq {
  display: inline-block;
  width: 0.36em; height: 0.36em; margin-right: 0.28em;
  background: var(--coral);
  vertical-align: 0.5em;
}
.pq-src { margin: var(--s6) 0 0; font: 600 var(--t-lbl)/1.3 var(--mono); letter-spacing: 0.03em; }
.pq-src a { display: inline-flex; align-items: center; gap: var(--s3); min-height: 2.75rem; color: var(--paper); }
.pq-src a span { font-size: 1.25rem; }
.pq-src a:hover { color: var(--amber); }
.pull :focus-visible { outline-color: var(--amber); }

/* ---------- closing spread: Neverything ---------- */
.close { background: var(--ink); color: var(--paper); border-top: var(--line-heavy); }
.close .lbl { color: var(--amber); }
.close h2 { margin: 0 0 var(--s5); font-size: clamp(2.4rem, 1rem + 5.5vw, 5.5rem); line-height: 0.94; letter-spacing: -0.045em; }
.close p { max-width: var(--measure); }
.close .n { border-color: var(--paper); }
.close .act { color: var(--paper); border-color: var(--paper); }
.close .act:hover { background: var(--coral); color: var(--ink); }
.close .act:focus-visible { outline-color: var(--amber); }
.close + .tb, .close ~ footer { border-top: 0; }
.tb { border-top: var(--line); }

/* ---------- Fig. 1: the redline ---------- */
.fig { margin: 0; }
.fig-cap { order: -1; border-top: 0; }
.fig-row > .fig { border-top: var(--line); }
.fig-cap .cap-h { font-size: var(--t-h3); }
.legend li { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); align-items: center; gap: var(--s3); padding: var(--s2) 0; font-size: 0.9375rem; line-height: 1.3; }
.legend .lg { justify-self: start; }
.lg { flex: none; width: 1.5rem; height: 1rem; }
.lg-ai { border: 2px solid var(--blue); }
.lg-no { border: 1px dashed var(--ink); background: repeating-linear-gradient(135deg, transparent 0 4px, rgba(19,24,27,.18) 4px 5px); }

.wkgrid { position: relative; overflow: clip; border: var(--line); background: var(--paper); }
.days { display: grid; grid-template-columns: minmax(0, 1fr); }
.day { display: grid; grid-template-columns: 3rem minmax(0, 1fr); }
.day + .day { border-top: var(--line); }
.dl {
  padding: var(--s3) var(--s2);
  border-right: var(--line);
  color: var(--blue);
  font: 600 var(--t-lbl)/1.2 var(--mono);
}
.day ul { display: flex; flex-wrap: wrap; gap: var(--s2); padding: var(--s2); }
.job {
  position: relative;
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--ink);
  background: var(--paper);
  font-size: 0.875rem; font-weight: 560; line-height: 1.2;
}
.job.ai { outline: 2px solid var(--blue); outline-offset: 2px; }
.job.no { border-style: dashed; background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(19,24,27,.12) 6px 7px), var(--paper); }
.tag {
  align-self: flex-start;
  padding: 0.1rem 0.35rem;
  background: var(--blue); color: var(--paper);
  font: 600 0.6875rem/1.2 var(--mono); font-style: normal;
  letter-spacing: 0.03em;
}
.job.no .tag { background: var(--ink); }
.chk, .lg-chk {
  align-self: flex-start;
  padding: 0.05rem 0.3rem;
  border: 1px solid var(--ink);
  background: var(--paper); color: var(--ink);
  font: 600 0.6875rem/1.2 var(--mono); font-style: normal;
  letter-spacing: 0.03em;
}
.chk::before, .lg-chk::before { content: "✓ "; }
.lg-chk { width: auto; height: auto; }
.job.ai > em { display: inline-block; }
.job.ai { flex-direction: row; flex-wrap: wrap; align-items: center; }
.job.ai > span { flex-basis: 100%; }
.scan {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
}
.scan::before {               /* the reading line: top edge on phones, left edge on wide screens */
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  border-top: 2px solid var(--blue);
}
.scan { right: auto; width: 3rem; }
.scan span { display: none; }
.scan span {
  position: absolute; right: var(--s2); top: 0.3rem;
  padding: 0.1rem 0.35rem;
  background: var(--blue); color: var(--paper);
  font: 600 0.6875rem/1.2 var(--mono);
}
.fig-sum {
  margin: var(--s5) 0 0;
  color: var(--blue);
  font: 600 clamp(1rem, 0.9rem + 0.5vw, 1.25rem)/1.45 var(--mono);
  letter-spacing: -0.01em;
  text-wrap: balance;
  max-width: 44ch;
}
.fig-sum::after {             /* the caret: only while the sentence is being written (motion block) */
  content: none;
  display: inline-block;
  width: 0.55em; height: 1.05em; margin-left: 0.2em;
  background: var(--blue);
  vertical-align: -0.18em;
}

/* Fig. 2 additions */
.wk { max-width: none; }
.wk-sum { max-width: 40rem; margin: var(--s4) 0 var(--s6); font-size: 0.9375rem; }

/* ---------- title block extras ---------- */
.k-ai { display: inline-block; width: 1rem; height: 0.7rem; border: 2px solid var(--blue); }
.tb-sheet { margin: var(--s4) 0 0; color: var(--blue); font: 600 var(--t-lbl)/1.3 var(--mono); }
.fine { margin: var(--s4) 0 0; font-size: 0.9375rem; }
.form-ch .body { max-width: none; }
.form-ch form { border-top: var(--line); }
.form-ch .fld label { padding-inline: 0; }
.form-ch .fld input, .form-ch .fld select, .form-ch .fld textarea { padding-inline: 0; }
.form-ch .act { padding-inline: 0; border-top: 0; border-bottom: var(--line); }
.form-ch .act:hover { padding-inline: var(--s3); }

/* ---------- wide screens ---------- */
@media (min-width: 60rem) {
  .fo-l, .fo-r { display: inline; }
  .folio { padding-inline: var(--pad) var(--s5); }
  .title .f { padding-top: var(--s7); padding-bottom: var(--s7); }
  .bub { width: 5.5rem; height: 5.5rem; }
  .bub b { font-size: 1.9rem; }
  .bub small { font-size: 0.6875rem; }
  .chap-h { gap: var(--s5); }
  .chap > .f { padding-block: var(--s7) calc(var(--s7) + var(--s4)); }
  .chap .body { margin-left: calc(5.5rem + var(--s5)); }
  .pull { padding: calc(var(--s7) * 2) var(--pad) var(--s7); }
  .close .f { padding-block: calc(var(--s7) * 1.5); }
  .close .n { border-left: 1px solid var(--paper); }
  .close .n-hang .act:last-child { border-bottom: 1px solid var(--paper); }

  .days { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .day { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .day + .day { border-top: 0; border-left: var(--line); }
  .dl { border-right: 0; border-bottom: var(--line); padding: var(--s3); }
  .day ul { flex-direction: column; flex-wrap: nowrap; gap: var(--s3); padding: var(--s3) var(--s3) var(--s5); min-height: 15rem; }
  .job { font-size: 0.9375rem; }
  .scan { right: 0; width: auto; }
  .scan span { display: block; }
  .scan::before { right: auto; bottom: 0; border-top: 0; border-left: 2px solid var(--blue); }
  .scan span { right: auto; left: 0.4rem; top: auto; bottom: 0.5rem; }
  .fig-row > .f { padding-top: var(--s6); }
  .fig-cap { order: 0; }
  .nav a:last-child { border-bottom: 0; box-shadow: 0 1px 0 var(--ink); }
  .wk-grp .g3 { display: flex; justify-content: flex-end; white-space: nowrap; }
  .sub .nav { align-content: stretch; grid-auto-rows: minmax(var(--cell), 1fr); }
  .sub .nav a:last-child { box-shadow: none; }
  .form-ch .fld:nth-child(even) label, .form-ch .fld:nth-child(even) input, .form-ch .fld:nth-child(even) select { padding-left: var(--s4); }
  .form-ch .fld:nth-child(even) .sel::after { right: var(--s4); }
  .fig-row > .fig { border-top: 0; }
}

/* =====================================================================
   MOTION
   ===================================================================== */
@property --seen { syntax: "<integer>"; inherits: true; initial-value: 0; }

@keyframes draw-x   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes draw-y   { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes hang     { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes drop     { from { opacity: 0; transform: translateY(-0.6rem); } to { opacity: 1; transform: none; } }
@keyframes rise     { from { opacity: 0.12; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }
@keyframes set {
  from { font-weight: 400; opacity: 0.12; transform: translateY(0.18em); }
  60%  { opacity: 1; }
  to   { font-weight: var(--w-disp); opacity: 1; transform: none; }
}
@keyframes caret    { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes stroke   { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ink      { from { color: var(--paper-dim); } to { color: var(--paper); } }
@keyframes cue      { from { --seen: 0; } to { --seen: 1; } }
@keyframes tok      { from { opacity: 0; } to { opacity: 1; } }
@keyframes scan-x   { from { opacity: 1; transform: translateX(0); } 92% { opacity: 1; } to { opacity: 0; transform: translateX(100%); } }
@keyframes scan-y   { from { opacity: 1; transform: translateY(0); } 92% { opacity: 1; } to { opacity: 0; transform: translateY(100%); } }
@keyframes mark     { from { outline-color: transparent; outline-offset: 8px; } to { outline-color: var(--blue); outline-offset: 2px; } }
@keyframes stamp    { from { opacity: 0; transform: scale(1.6); } to { opacity: 1; transform: none; } }
@keyframes typein   { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: no-preference) {

  /* --- 1. on load: the sheet is drafted --- */
  .anno { border-bottom-color: transparent; }
  .anno::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
    border-bottom: var(--line);
    transform-origin: left;
    animation: draw-x 0.9s var(--ease-draw) both;
  }
  .lvl { animation: drop 0.4s 0.7s ease-out both; }
  .mark img { animation: hang 1s 0.35s var(--ease-draw) both; }
  .tick { animation: drop 0.35s ease-out both; }
  .tk-h1 { animation-delay: 1.15s; } .tk-dot { animation-delay: 1.25s; }
  .tk-h2 { animation-delay: 1.35s; } .tk-t { animation-delay: 1.45s; }
  .base { transform-origin: left; animation: draw-x 0.8s 1.1s var(--ease-draw) both; }
  .folio > span { animation: typein 0.6s steps(18, end) both; }
  .folio .fo-c { animation-delay: 0.15s; } .folio .fo-r { animation-delay: 0.3s; }

  /* --- 2. the headline sets itself: light to heavy, word by word --- */
  .w > i { animation: set 0.9s var(--ease-set) both; animation-delay: calc(0.25s + var(--i) * 0.07s); }
  .home .w > i { animation-delay: calc(0.3s + var(--i) * 0.06s); }
  .title .n > * { animation: rise 0.6s var(--ease-set) both; animation-delay: 0.5s; }


  /* --- 4. Fig. 1 + Fig. 2 compose themselves once seen; scrub-free, so they read as alive --- */
  @supports (animation-timeline: view()) {
    .cue {
      animation: cue linear both;
      animation-timeline: view();
      animation-range: entry 85% entry 86%;
    }

    @container style(--seen: 0) {
      .wkgrid, .dl, .job, .tok, .tag, .chk, .wk-cells li, .wk-grp span, .wk-dim { opacity: 0; }
    }
    @container style(--seen: 1) {
      .wkgrid { animation: rise 0.5s var(--ease-set) both; }
      .dl { animation: typein 0.35s steps(3, end) both; animation-delay: calc(0.15s + var(--d) * 0.08s); }
      .job { animation: drop 0.35s var(--ease-set) both; animation-delay: calc(0.45s + var(--j) * 0.07s); }
      .scan { animation: scan-y 2s linear 1.6s both; }
      .job.ai { animation: drop 0.35s var(--ease-set) both, mark 0.3s ease-out both;
                animation-delay: calc(0.45s + var(--j) * 0.07s), calc(1.75s + var(--d) * 0.38s); }
      .tag { animation: typein 0.4s steps(8, end) both; animation-delay: calc(1.85s + var(--d) * 0.38s); }
      .job.no .tag { animation: stamp 0.3s ease-out both; animation-delay: calc(1.85s + var(--d) * 0.38s); }
      .fig-sum .tok { animation: tok 0.01s linear both; animation-delay: calc(4.6s + var(--k) * 0.075s); }
      .fig-sum::after { content: ""; opacity: 0; animation: caret 1s steps(1) 4 forwards;
                        animation-delay: calc(4.7s + var(--n) * 0.075s); }
      .chk { animation: stamp 0.3s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(3.6s + var(--a) * 0.18s); }

      .wk-dim { animation: rise 0.4s ease-out both; }
      .wk-cells li { animation: drop 0.3s var(--ease-set) both; animation-delay: calc(0.2s + var(--c) * 0.12s); }
      .wk-grp span { transform-origin: left; animation: draw-x 0.5s var(--ease-draw) both; }
      .wk-grp .g1 { animation-delay: 1s; } .wk-grp .g2 { animation-delay: 1.3s; } .wk-grp .g3 { animation-delay: 1.8s; }
      .wk-sum .tok { animation: tok 0.01s linear both; animation-delay: calc(2.3s + var(--k) * 0.07s); }
      .wk-sum::after { animation-delay: calc(2.4s + var(--n) * 0.07s); }
    }

    /* --- 5. scroll-linked: drawn as you read --- */
    .bub circle, .bub path {
      stroke-dasharray: 1; stroke-dashoffset: 0;
      animation: stroke linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }

    .pw {
      animation: ink linear both;
      animation-timeline: view();
      animation-range: cover calc(18% + var(--k) * 1.6%) cover calc(26% + var(--k) * 1.6%);
    }
    .pq-sq { animation: stamp linear both; animation-timeline: view(); animation-range: entry 40% cover 25%; }

    .c-end::after, .c-end .sq { animation: stamp linear both; animation-timeline: view(); animation-range: entry 50% cover 30%; }

    .leader { transform-origin: left; animation: draw-x linear both; animation-timeline: view(); animation-range: entry 60% cover 45%; }
  }

  @media (min-width: 60rem) {
    @supports (animation-timeline: view()) {
      .cue { animation-range: entry 60% entry 61%; }
      @container style(--seen: 1) { .scan { animation-name: scan-x; } }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .scan { display: none; }
}

@media print {
  .pull, .close { background: none; color: var(--ink); }
  .scan, .fig-sum::after { display: none; }
}

/* =====================================================================
   V2 LAYER (2026-11-06): taste pass fixes (reviews/CRITIQUE-v2.md) + Notes series
   ===================================================================== */

/* nav: About | Notes | Enquire, three equal cells on phones; the desktop stack from B3 is kept */
@media (max-width: 59.99rem) { .nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* fix 6: legibility of Fig. 1 at phone width */
@media (max-width: 59.99rem) {
  .tag, .chk { font-size: 0.75rem; }
  .bub small { font-size: 0.6875rem; }
  /* fix 7: tight tracking made letters touch at ~43px */
  h1, .close h2 { letter-spacing: -0.03em; }
  .lvl { display: none; }
}

/* fix 4: sub pages use the field on desktop: side-heads beside a reading column */
@media (min-width: 60rem) {
  .sub .chap > .f {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--measure));
    column-gap: var(--s7);
    align-items: start;
  }
  .sub .chap .body { margin: 0; }
  .sub .chap h2 { font-size: clamp(2rem, 1rem + 1.6vw, 2.75rem); }
}

/* fix 2: a face (renders only once Matt's photo is in src/matt.jpg) */
.plate { margin: var(--s5) 0 0; max-width: 20rem; }
.plate img { aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1); border: var(--line); width: 100%; }
.plate figcaption { margin-top: var(--s2); }
.plate-s { max-width: none; margin: 0; padding: var(--s4) var(--pad); border-bottom: var(--line); }
.plate-s img { width: 8rem; height: 8rem; aspect-ratio: 1; }

/* visually hidden heading (keeps the outline h1 > h2 > h3) */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Notes: index ---------- */
.notes { list-style: none; margin: 0; padding: 0; border-top: var(--line); }
.nl {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  border-bottom: var(--line);
}
.nl > * { min-width: 0; margin: 0; }
.nl-ref {
  grid-row: 1 / span 3;
  padding: var(--s4) var(--pad);
  border-right: var(--line);
  color: var(--blue);
  font: 600 var(--t-lbl)/1.3 var(--mono);
}
.nl-t { padding: var(--s4) var(--pad) var(--s2); }
.nl-t h3 { font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.015em; font-weight: 680; }
.nl-t h3 a { color: inherit; text-decoration: none; }
.nl-t h3 a::after { content: ""; position: absolute; inset: 0; }
.nl-t h3 a:focus-visible { outline: none; }
.nl:has(a:focus-visible) { outline: 3px solid var(--blue); outline-offset: -3px; }
.nl-t p { margin: var(--s2) 0 0; max-width: var(--measure); }
.nl-date, .nl-m { padding: 0 var(--pad) var(--s4); color: var(--blue); font: 600 var(--t-lbl)/1.4 var(--mono); }
.nl-date { grid-column: 2; padding-bottom: 0; }
.nl-m { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0 var(--s3); }
.nl-m span + span::before { content: "· "; }
.nl:hover { background: var(--drift); }
.nl:first-child .nl-t h3 { font-size: var(--t-h2); line-height: 1.05; letter-spacing: -0.025em; }

@media (min-width: 60rem) {
  .nl { grid-template-columns: 7rem minmax(0, 1fr) 11rem var(--notes); }
  .nl-ref { grid-row: auto; padding: var(--s5) var(--pad); }
  .nl-t { padding: var(--s5) var(--pad); }
  .nl-date { grid-column: 3; padding: var(--s5) var(--s4); border-left: var(--line); }
  .nl-m { grid-column: 4; display: block; padding: var(--s5) var(--pad); border-left: var(--line); }
  .nl-m span { display: block; }
  .nl-m span + span::before { content: none; }
}

/* ---------- Notes: post ---------- */
.post { --t-h1: clamp(2.25rem, 1rem + 4.2vw, 4.5rem); }
.post h1 { max-width: 18em; letter-spacing: -0.03em; }
.post .title .lead { max-width: 34rem; }

.prose { font-size: 1.0625rem; line-height: 1.6; font-weight: 420; counter-reset: s; }
.prose > * { max-width: 38rem; }
.prose p { margin: 0 0 1em; }
.prose a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose b { font-weight: 640; }
.prose h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 720;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 2.5em 0 0.6em;
  padding-top: var(--s4);
  border-top: var(--line);
  scroll-margin-top: var(--s5);
}
.prose > h2:first-child { margin-top: 0; }
.prose h2::before {
  counter-increment: s;
  content: counter(s, decimal-leading-zero);
  display: block;
  margin-bottom: var(--s2);
  font: 600 var(--t-lbl)/1.3 var(--mono);
  color: var(--blue);
  letter-spacing: 0;
}
.prose .ks, .prose .rl { margin: 0 0 1.25em; padding: 0; list-style: none; }
.prose .ks p { margin: 0; }
.prose .pn { margin: 1.5em 0; padding: var(--s4) 0 var(--s4) var(--s5); border-left: 3px solid var(--blue); font-weight: 560; }
.prose .pn p { margin: 0; }

.post-n { display: flex; flex-direction: column; gap: var(--s6); padding: 0; }
.meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.meta > div { padding: var(--s3) var(--pad); border-bottom: var(--line); }
.meta > div:nth-child(odd) { border-right: var(--line); }
.meta > div:last-child { grid-column: 1 / -1; border-right: 0; }
.meta dt { color: var(--blue); font: 600 var(--t-lbl)/1.3 var(--mono); }
.meta dd { margin: var(--s1) 0 0; font-size: 1rem; font-weight: 560; line-height: 1.35; }
.meta dd a { color: inherit; }
.toc { display: none; }

@media (max-width: 59.99rem) {
  .post-body { display: flex; flex-direction: column; }
  .post-body > .post-n { order: -1; border-top: 0; }
}

@media (min-width: 60rem) {
  .prose { font-size: 1.1875rem; }
  .post-body > .f { padding-block: var(--s7); }
  .meta { grid-template-columns: minmax(0, 1fr); }
  .meta > div:nth-child(odd) { border-right: 0; }
  .meta > div { padding: var(--s3) var(--pad); }
  .toc { display: block; position: sticky; top: var(--s5); padding: 0 var(--pad) var(--s5); }
  .toc ol { list-style: none; margin: var(--s2) 0 0; padding: 0; counter-reset: t; }
  .toc li { counter-increment: t; display: grid; grid-template-columns: 2rem minmax(0, 1fr); padding: var(--s2) 0; border-top: var(--line); font-size: 0.9375rem; line-height: 1.35; }
  .toc li::before { content: counter(t, decimal-leading-zero); color: var(--blue); font: 600 var(--t-lbl)/1.6 var(--mono); }
  .toc a { color: inherit; text-decoration: none; }
  .toc a:hover { text-decoration: underline; }
}

/* previous / next */
.pn-row { grid-template-columns: minmax(0, 1fr); }
.pn-row .act { border-top: 0; align-items: center; }
.pn-row .act + .act { border-top: var(--line); }
.pn-l { display: flex; flex-direction: column; gap: var(--s1); font-size: 1.0625rem; font-weight: 600; line-height: 1.25; }
.pn-l .lbl { font-size: var(--t-lbl); }
@media (min-width: 60rem) {
  .pn-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pn-row .act + .act { border-top: 0; border-left: var(--line); }
  .pn-row .act { min-height: 6rem; padding-block: var(--s4); }
}

@media print {
  .toc, .pn-row, .nav, .close, .folio { display: none; }
  .prose a::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #444; word-break: break-all; }
}

/* critic v2b: own-numbered posts (N01's seven questions), shorter desktop nav cells */
.prose.own h2::before { content: none; }
.post-own .toc li::before { content: none; }
.post-own .toc li { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) { .head .nav a { min-height: 2.75rem; } }

/* =====================================================================
   V3 LAYER (2026-11-07, Matt): "lines animating on scroll ... gradients with shine on
   accented colours. Almost like the drawings/plans write in front of you."
   CSS only, same two gates as B3: reduced motion -> static, finished drawing;
   no scroll timelines (older Firefox) -> static, finished drawing.
   Lines are drawn with border-image, so hover backgrounds never erase them.
   ===================================================================== */
@property --draw  { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --glint { syntax: "<percentage>"; inherits: false; initial-value: -30%; }
@keyframes rule-draw { from { --draw: 0%; } to { --draw: 100%; } }
@keyframes glint     { from { --glint: -30%; } to { --glint: 130%; } }
@keyframes sheen     { from { background-position: 160% 0, 0 0; } to { background-position: -60% 0, 0 0; } }

/* accents: coral marks become a coral-to-amber fill (static everywhere) */
.sq, .keeps li::before, .c-end::after, .pq-sq, .ends-ch .chap-h h2::after {
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .85) 50%, transparent 70%) 160% 0 / 300% 100% no-repeat,
              linear-gradient(135deg, var(--coral) 15%, var(--amber));
}
.close .act:hover { background: linear-gradient(100deg, var(--coral), var(--amber)); }
/* the Ateneo spread gets depth: a dusk-blue gradient under the quote */
.pull {
  background: linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, .09) 45%, rgba(255, 255, 255, .16) 50%, rgba(255, 255, 255, .09) 55%, transparent 75%) 160% 0 / 250% 100% no-repeat,
              linear-gradient(125deg, #00284D 0%, var(--blue) 45%, #0A4F8A 100%);
}
/* the close band's top edge: the brand's dusk line, Ateneo to coral to amber */
.close { border-top: 3px solid transparent; border-image: linear-gradient(90deg, var(--blue), var(--coral) 60%, var(--amber)) 1; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* 1. horizontal rules draw left to right as their row rises into the lower screen */
    :is(.chap, .fig-row, .chap-wide, .sched tbody tr + tr, .row .st, .wks li, .keeps li, .prose h2, .tb) {
      border-image: linear-gradient(90deg, var(--ink) var(--draw), transparent 0) 1;
      animation: rule-draw linear both;
      animation-timeline: view();
      animation-range: cover 4vh cover 42vh;
    }
    .tb { border-image-source: linear-gradient(90deg, var(--ink) var(--draw), transparent 0); }
    .nl, .fld, .meta > div {
      border-image: linear-gradient(90deg, var(--ink) var(--draw), transparent 0) 1;
      animation: rule-draw linear both; animation-timeline: view(); animation-range: cover 10vh cover 48vh;
    }

    /* 2. the sheet frame is inked down the page just ahead of the bottom of the screen */
    .sheet {
      border-image: linear-gradient(180deg, var(--ink) var(--draw), transparent 0) 1;
      animation: rule-draw linear both;
      animation-timeline: view();
      animation-range: cover 8vh cover calc(100% - 92vh);
    }

    /* 3. the dusk line on the close band draws with a bright amber tip */
    .close {
      border-image: linear-gradient(90deg, var(--blue), var(--coral) calc(var(--draw) * .6), var(--amber) var(--draw), transparent 0) 1;
      animation: rule-draw linear both; animation-timeline: view();
      animation-range: cover 0vh cover 45vh;
    }

    /* 4. light runs across the accents as they pass through the screen */
    .sq, .keeps li::before, .ends-ch .chap-h h2::after, .pull {
      animation: sheen linear both;
      animation-timeline: view();
      animation-range: cover 15vh cover 85vh;
    }
  }

  @media (min-width: 60rem) {
    @supports (animation-timeline: view()) {
      /* vertical rules draw top to bottom, the pen tip about 60% down the screen */
      :is(.chap, .fig-row, .chap-wide) > .n,
      :is(.c-work, .c-time, .c-end),
      .tb :is(.tb-key, .tb-l .tb-c + .tb-c),
      .nl :is(.nl-date, .nl-m) {
        border-image: linear-gradient(180deg, var(--ink) var(--draw), transparent 0) 1;
        animation: rule-draw linear both;
        animation-timeline: view();
        animation-range: cover 30vh cover calc(100% - 55vh);
      }
    }
  }
}

@media print {
  .sheet, .chap, .fig-row, .close, .tb, .nl, .fld, .n, .c-work, .c-time, .c-end { border-image: none !important; }
  .pull { background: none; }
}

/* v9 (2026-11-07): dictionary-entry byline under the wordmark, every page (Matt: "a byline in the header ... which
   gives a definition of the word 'housewright'"). One sense, from the dictionaries (sense 2 cut, ledger 2026-11-07-6c22). */
.def {
  margin: var(--s3) 0 0; max-width: 46rem;
  color: var(--ink); font-size: 0.8125rem; line-height: 1.4; font-weight: 450;
  text-wrap: pretty;
}
.def .dw { font-weight: 700; }
.def .dp, .def .dn { color: var(--blue); }
.def .dn { font-style: italic; }
@media (min-width: 60rem) { .def { max-width: none; font-size: 0.9375rem; } }

/* ---------- generated by make_site.py: stagger indices (no inline styles) ---------- */
.w:nth-child(1) { --i: 0; }
.w:nth-child(2) { --i: 1; }
.w:nth-child(3) { --i: 2; }
.w:nth-child(4) { --i: 3; }
.w:nth-child(5) { --i: 4; }
.w:nth-child(6) { --i: 5; }
.w:nth-child(7) { --i: 6; }
.w:nth-child(8) { --i: 7; }
.w:nth-child(9) { --i: 8; }
.w:nth-child(10) { --i: 9; }
.w:nth-child(11) { --i: 10; }
.w:nth-child(12) { --i: 11; }
.w:nth-child(13) { --i: 12; }
.w:nth-child(14) { --i: 13; }
.w:nth-child(15) { --i: 14; }
.w:nth-child(16) { --i: 15; }
.tok:nth-child(1) { --k: 0; }
.tok:nth-child(2) { --k: 1; }
.tok:nth-child(3) { --k: 2; }
.tok:nth-child(4) { --k: 3; }
.tok:nth-child(5) { --k: 4; }
.tok:nth-child(6) { --k: 5; }
.tok:nth-child(7) { --k: 6; }
.tok:nth-child(8) { --k: 7; }
.tok:nth-child(9) { --k: 8; }
.tok:nth-child(10) { --k: 9; }
.tok:nth-child(11) { --k: 10; }
.tok:nth-child(12) { --k: 11; }
.tok:nth-child(13) { --k: 12; }
.tok:nth-child(14) { --k: 13; }
.tok:nth-child(15) { --k: 14; }
.tok:nth-child(16) { --k: 15; }
.tok:nth-child(17) { --k: 16; }
.tok:nth-child(18) { --k: 17; }
.tok:nth-child(19) { --k: 18; }
.tok:nth-child(20) { --k: 19; }
.tok:nth-child(21) { --k: 20; }
.tok:nth-child(22) { --k: 21; }
.tok:nth-child(23) { --k: 22; }
.tok:nth-child(24) { --k: 23; }
.tok:nth-child(25) { --k: 24; }
.tok:nth-child(26) { --k: 25; }
.tok:nth-child(27) { --k: 26; }
.tok:nth-child(28) { --k: 27; }
.tok:nth-child(29) { --k: 28; }
.tok:nth-child(30) { --k: 29; }
.tok:nth-child(31) { --k: 30; }
.tok:nth-child(32) { --k: 31; }
.tok:nth-child(33) { --k: 32; }
.tok:nth-child(34) { --k: 33; }
.tok:nth-child(35) { --k: 34; }
.tok:nth-child(36) { --k: 35; }
.tok:nth-child(37) { --k: 36; }
.tok:nth-child(38) { --k: 37; }
.tok:nth-child(39) { --k: 38; }
.tok:nth-child(40) { --k: 39; }
.pw:nth-child(2) { --k: 0; }
.pw:nth-child(3) { --k: 1; }
.pw:nth-child(4) { --k: 2; }
.pw:nth-child(5) { --k: 3; }
.pw:nth-child(6) { --k: 4; }
.pw:nth-child(7) { --k: 5; }
.pw:nth-child(8) { --k: 6; }
.pw:nth-child(9) { --k: 7; }
.pw:nth-child(10) { --k: 8; }
.pw:nth-child(11) { --k: 9; }
.pw:nth-child(12) { --k: 10; }
.pw:nth-child(13) { --k: 11; }
.pw:nth-child(14) { --k: 12; }
.pw:nth-child(15) { --k: 13; }
.pw:nth-child(16) { --k: 14; }
.pw:nth-child(17) { --k: 15; }
.pw:nth-child(18) { --k: 16; }
.pw:nth-child(19) { --k: 17; }
.pw:nth-child(20) { --k: 18; }
.pw:nth-child(21) { --k: 19; }
.day:nth-child(1) { --d: 0; }
.day:nth-child(2) { --d: 1; }
.day:nth-child(3) { --d: 2; }
.day:nth-child(4) { --d: 3; }
.day:nth-child(5) { --d: 4; }
.sched tbody tr:nth-child(1) { --r: 0; }
.sched tbody tr:nth-child(2) { --r: 1; }
.sched tbody tr:nth-child(3) { --r: 2; }
.sched tbody tr:nth-child(4) { --r: 3; }
.sched tbody tr:nth-child(5) { --r: 4; }
.sched tbody tr:nth-child(6) { --r: 5; }
.wk-cells li:nth-child(1) { --c: 0; }
.wk-cells li:nth-child(2) { --c: 1; }
.wk-cells li:nth-child(3) { --c: 2; }
.wk-cells li:nth-child(4) { --c: 3; }
.wk-cells li:nth-child(5) { --c: 4; }
.wk-cells li:nth-child(6) { --c: 5; }
.day:nth-child(1) .job:nth-child(1) { --j: 0; }
.day:nth-child(1) .job:nth-child(1) .chk { --a: 0; }
.day:nth-child(1) .job:nth-child(2) { --j: 1; }
.day:nth-child(1) .job:nth-child(3) { --j: 2; }
.day:nth-child(1) .job:nth-child(3) .chk { --a: 1; }
.day:nth-child(2) .job:nth-child(1) { --j: 3; }
.day:nth-child(2) .job:nth-child(2) { --j: 4; }
.day:nth-child(2) .job:nth-child(2) .chk { --a: 2; }
.day:nth-child(2) .job:nth-child(3) { --j: 5; }
.day:nth-child(3) .job:nth-child(1) { --j: 6; }
.day:nth-child(3) .job:nth-child(2) { --j: 7; }
.day:nth-child(3) .job:nth-child(2) .chk { --a: 3; }
.day:nth-child(3) .job:nth-child(3) { --j: 8; }
.day:nth-child(4) .job:nth-child(1) { --j: 9; }
.day:nth-child(4) .job:nth-child(2) { --j: 10; }
.day:nth-child(4) .job:nth-child(2) .chk { --a: 4; }
.day:nth-child(5) .job:nth-child(1) { --j: 11; }
.day:nth-child(5) .job:nth-child(2) { --j: 12; }
.redline { --n: 17; }
.wk-sum { --n: 23; }