/* ==================================================================
   idinsayit  ongoing editorial publication

   Vertical rhythm is one system: every top-level module is .mod and
   carries symmetric --flow padding, so the space between any two
   modules is always 2 x --flow. Nothing sets ad-hoc section margins.

   Bylines are OFF by default (architecture doc, non-negotiable 3).
   Three modes are demonstrated: hidden, byline, clinician.
   ================================================================== */
:root{
  --paper:#FFFCF7; --tint:#F5F0E6; --tint2:#EFE8DA;
  --ink:#0F0D0B; --ink-soft:#55504A; --ink-faint:#6E6860; /* 4.5:1 on every paper tint; #8A847A was 3.3:1 */
  --ink-press:#3A3631; /* held. One step darker than the hover grey, lighter than ink, so a button answers the finger as well as the pointer. */
  --rule:#E2DBCD; --rule-ink:#0F0D0B;
  --accent:#7B2D26;   /* deep oxblood. Reserved for rubrics, the end mark and focus. */
  --dark:#141210; --on-dark:#F6F2EA; --on-dark-soft:#B2ABA0;

  --display:"Bodoni Moda","Didot",Georgia,serif;
  --text:"Libre Caslon Text","Adobe Caslon Pro",Georgia,serif;
  --sans:"Jost","Futura","Century Gothic",-apple-system,Helvetica,sans-serif;

  /* ---- the one spacing scale ---- */
  --flow:      var(--s7);   /* module padding-block; gap between = 2x */
  --flow-in:   var(--s8);   /* inside full-bleed panels */
  --gap-hdr:   var(--s5);   /* band title -> its content */
  --gap-grid:  var(--s6);   /* between cards */
  --gap-tight: var(--s4);

  /* ---- ONE spacing scale. Every margin, padding and gap snaps to a step.
     32 different hand-picked values were what made the site look uneven. ---- */
  --s1:6px;                        /* hairline separation */
  --s2:10px;                       /* inside a control */
  --s3:14px;                       /* label to field */
  --s4:clamp(18px,2vw,22px);       /* element to element */
  --s5:clamp(24px,2.8vw,32px);     /* group to group */
  --s6:clamp(34px,4vw,46px);       /* block to block */
  --s7:clamp(46px,5.6vw,68px);     /* module to module */
  --s8:clamp(64px,8vw,96px);       /* section to section */
  --chrome-gap:var(--s4);  /* above the wordmark, under it, and under the nav */
  --gutter:clamp(18px,4vw,54px);
  --max:1280px; --measure:60ch;
  /* The same measure as a length: ch is read in each element's own type, so a box set
     in 13.5px Jost took 60ch as 470px, narrower than the 614px text column around it. */
  --measure-len:38.4rem;
}
*{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%;
  /* An in-page link, a skip link or a #fragment in the address lands its target one
     --s4 below the sticky bar instead of under it. site.js writes the bar's real
     height to --bar; the value here is the measured height, for a reader without script. */
  --bar:64px;scroll-padding-top:calc(var(--bar) + var(--chrome,0px) + var(--s4))}
@media(max-width:860px){html{--bar:53px}}
/* Smooth for in-page jumps only. Nothing here touches the wheel or the trackpad. */
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);
  font-size:12pt;line-height:1.62;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:700;line-height:1.08;
  letter-spacing:-.012em;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
canvas{display:block;width:100%;height:100%}
/* A summary is a control here too, the who box on the practice page and the folds in the
   portal and the dashboard, and it reached no ring at all until it was named in this list. */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.screen[hidden]{display:none}
.art{position:relative;overflow:hidden;background:var(--tint)}

/* ---- THE RHYTHM ---- */
.mod{padding-block:var(--flow)}
.mod + .mod{border-top:1px solid var(--rule)}
.mod--flush{padding-block:0}
.slab,.photoband,.fiction{padding-block:0}

/* ---- type furniture ---- */
.rubric{display:block;font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent)}
/* default meta line: section and reading time. No author. */
.stamp{display:block;font-family:var(--sans);font-size:10.5px;font-weight:300;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-faint);margin-top:var(--gap-tight)}
/* only when byline_mode is switched on for a post */
.byline{display:block;font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);margin-top:var(--gap-tight)}
.byline .sub{display:block;font-weight:300;letter-spacing:.13em;color:var(--ink-faint);margin-top:var(--s1)}
.dek{font-family:var(--text);color:var(--ink-soft);line-height:1.5}
/* A dek that ends on one word leaves that word alone under a full line, on cards,
   leads and band notes alike. pretty moves a word down to keep it company. A centred
   dek or note is balanced instead, so its lines share one centre and one length. */
.hdr .sub,.sechero .sub,.p-head .dek,.opener .dek,.photoband .dek{text-wrap:balance}
.dek,.idz-sec-hdr .sub,.idz-portal .hdr .sub{text-wrap:pretty}
/* On a phone every heading and dek runs as full as its line allows. balance evened a
   heading's lines, so the first stopped well short of the edge ("If you would rather /
   read something first"); Safari's pretty re-sets a whole dek for an even rag, which
   broke its lines early too; and widths set in ch held some short of the column. A
   last word is still kept off a line of its own: site.js ties the last two words of
   each together. Measured on every public page at 390 and 412. */
@media(max-width:767px){
  *{text-wrap-style:auto!important}
  :is(h1,h2,h3,h4,h5,h6,.dek,.sub):not(.idz-share-h,.screen-reader-text){text-wrap:wrap!important}
  :is(h1,h2,h3,h4,h5,h6,.dek,.sub,.paywall p,.promo-body,.promo-copy):not(.idz-share-h,.screen-reader-text){max-width:none!important}
}
.on-dark .rubric{color:#E0A32E}
.on-dark .byline{color:var(--on-dark)}
.on-dark .stamp,.on-dark .dek{color:var(--on-dark-soft)}

/* band header */
.hdr{text-align:center;padding-block:0 var(--gap-hdr)}
.hdr .mark{display:flex;justify-content:center;margin-bottom:var(--s3)}
.hdr .mark svg{height:19px;width:auto;color:var(--ink-faint)}
.hdr h2{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1rem,1.45vw,1.28rem);letter-spacing:.2em;font-variation-settings:'opsz' 14}
.hdr .sub{font-family:var(--text);font-style:italic;color:var(--ink-soft);font-size:15px;margin-top:var(--s2)}
/* A header that opens on its heading starts at the heading's capitals, so the module's
   rule is var(--flow) from the letters on both sides. The heading's half-leading put
   the rule 71.1px over the capitals and 68 under the ink above it on a desktop. */
.hdr > h2:first-child{text-box:trim-start cap alphabetic}

/* ---- 1. OPENER ---- */
.opener{position:relative;background:var(--dark);color:var(--on-dark);overflow:hidden;
  min-height:clamp(430px,74vh,680px);display:grid;place-items:center;text-align:center}
.opener .art{position:absolute;inset:0;background:var(--dark)}
.opener .veil{position:absolute;inset:0;background:
  radial-gradient(ellipse at 50% 46%,rgba(20,18,16,.26) 0%,rgba(20,18,16,.70) 60%,rgba(20,18,16,.93) 100%)}
.opener .inner{position:relative;padding:var(--s8) var(--gutter);max-width:920px}
.opener .rubric{color:#E0A32E;margin-bottom:var(--s4)}
.opener h1{font-size:clamp(2.4rem,6.1vw,4.8rem);line-height:1;letter-spacing:-.021em;
  color:var(--on-dark);font-variation-settings:'opsz' 96}
.opener .dek{color:var(--on-dark-soft);font-size:clamp(1rem,1.5vw,1.24rem);margin:var(--s4) auto 0;
  max-width:52ch;font-style:italic}

/* ---- nav ---- */
.navbar{border-bottom:1px solid var(--rule);background:var(--paper)}
.nav{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--s1) var(--s5);
  padding-block:calc(var(--chrome-gap) - 5px);font-family:var(--sans);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}
.nav a{color:var(--ink-soft);padding-block:3px;border-block:2px solid transparent}
.nav a:hover{color:var(--ink)}
.nav a[aria-current=page]{color:var(--ink);border-bottom-color:var(--accent)}
.standing{text-align:center;padding-block:var(--s2);border-bottom:1px solid var(--rule);
  font-family:var(--sans);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}
.mast{display:flex;justify-content:center;padding-block:var(--chrome-gap) 0}
.mast svg{height:clamp(14px,2.2vw,25px);width:auto;color:var(--ink)}
.mast-rule{border:0;border-top:2px solid var(--rule-ink);margin:0}

/* ---- asymmetric lead grid: one dominant + two supporting ---- */
.mix{display:grid;gap:var(--gap-grid)}
@media(min-width:900px){.mix{grid-template-columns:1.42fr 1fr;align-items:start}}
.mix .stack{display:grid;gap:var(--gap-grid)}
.mix .big .art{aspect-ratio:16/10;margin-bottom:var(--gap-tight)}
.mix .big h3{font-size:clamp(1.7rem,2.9vw,2.35rem);font-variation-settings:'opsz' 40}
.mix .big .dek{font-size:clamp(1rem,1.2vw,1.08rem);margin-top:var(--s2);max-width:48ch}
.mix .small{display:grid;grid-template-columns:88px 1fr;gap:var(--gap-tight);align-items:start}
@media(min-width:520px){.mix .small{grid-template-columns:132px 1fr;gap:var(--s4)}}
.mix .small .art{aspect-ratio:1/1}
.mix .small h3{font-size:clamp(1.06rem,1.4vw,1.24rem)}
.mix .small .dek{font-size:14px;margin-top:var(--s1)}

/* ---- even card grids ---- */
.grid{display:grid;gap:var(--gap-grid)}
.g3{grid-template-columns:repeat(2,1fr)}
@media(min-width:780px){.g3{grid-template-columns:repeat(3,1fr)}}
/* Read next (single.php) fetches four pieces. Three across, the fourth stays out. Two
   across, all four print, or two when a third would sit alone in its row. Stacked in
   one column, on a narrow phone, three print, as they did before it fetched four. */
@media(min-width:780px){.idz-next > .card:nth-child(4){display:none}}
@media(min-width:401px) and (max-width:779px){.idz-next > .card:nth-child(3):last-child{display:none}}
@media(max-width:400px){.idz-next > .card:nth-child(4){display:none}}
/* Fewer cards than the row has columns sit under the centre of the centred heading
   over them, each at the width it has in a full row, rather than pinned left under a
   heading centred on the whole page. */
@media(min-width:780px){
  .hdr + .g3:has(> :nth-child(1):last-child){grid-template-columns:calc((100% - 2 * var(--gap-grid)) / 3);justify-content:center}
  .hdr + .g3:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,calc((100% - 2 * var(--gap-grid)) / 3));justify-content:center}
}
@media(min-width:401px) and (max-width:779px){
  .hdr + .g3:has(> :nth-child(1):last-child){grid-template-columns:calc((100% - var(--gap-grid)) / 2);justify-content:center}
}
.card .art{aspect-ratio:4/3;margin-bottom:var(--gap-tight)}
.card .rubric{margin-bottom:var(--s1)}
.card h3{font-size:clamp(1.14rem,1.5vw,1.32rem);font-variation-settings:'opsz' 22;transition:color .14s ease}
.card .dek{font-size:14.5px;margin-top:var(--s1)}
/* A card's closing line of small capitals ends at its baseline. On its 17px line it
   left 7px of leading under the letters, so a module that ends in cards had 7px more
   space under its last line than over its first. */
.card > .stamp:last-child,.rail a > .stamp:last-child{text-box:trim-end cap alphabetic}
.card:hover h3,.mix a:hover h3,.tail a:hover h3{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em}

/* ---- dark slab ---- */
.slab{background:var(--dark);color:var(--on-dark)}
.slab-in{display:grid;align-items:stretch}
@media(min-width:820px){.slab-in{grid-template-columns:1.12fr .88fr}}
.slab .copy{padding:var(--flow-in) var(--s6);display:flex;flex-direction:column;justify-content:center}
.slab h2{font-size:clamp(1.75rem,3.4vw,2.85rem);color:var(--on-dark);text-transform:uppercase;
  line-height:1.06;letter-spacing:.005em;font-variation-settings:'opsz' 60}
.slab .dek{margin-top:var(--s3);font-size:clamp(.98rem,1.25vw,1.08rem);max-width:44ch}
.slab .art{min-height:280px;background:#1B1815}
@media(max-width:819px){.slab .art{aspect-ratio:16/10;min-height:0;order:-1}
  /* Stacked, the words sit under an artwork that runs from gutter to gutter. The side
     padding was for the panel beside the art, and indented them 34px off the grid
     every other block on the page starts on. */
  .slab .copy{padding-inline:0}}
.slab--rev .slab-in{direction:rtl}
.slab--rev .slab-in>*{direction:ltr}

/* ---- full-bleed band ---- */
.photoband{position:relative;overflow:hidden;background:var(--dark);color:var(--on-dark);
  min-height:clamp(300px,46vh,450px);display:grid;place-items:center;text-align:center}
.photoband .art{position:absolute;inset:0;background:var(--dark)}
.photoband .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,16,14,.52),rgba(18,16,14,.84))}
.photoband .inner{position:relative;padding:var(--flow-in) var(--gutter);max-width:780px}
.photoband h2{font-size:clamp(1.6rem,3.4vw,2.6rem);text-transform:uppercase;letter-spacing:.04em;
  color:var(--on-dark);font-variation-settings:'opsz' 60}
.photoband .dek{color:var(--on-dark-soft);margin-top:var(--s3);font-size:1.02rem;font-style:italic}

/* ---- rail ---- */
.rail{display:flex;gap:var(--gap-grid);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:var(--s3);scrollbar-width:thin}
/* The room kept for the scrollbar is handed back to the module below, so a rail that
   does not scroll ends as far above the next rule as its heading sits below the last
   one. A rail that does scroll draws its bar inside that same room. */
.rail{margin-bottom:calc(-1 * var(--s3))}
/* A rail with fewer pieces than the row holds sits under the centre of its centred
   heading, rather than pinned left under it. Auto margins fall to zero as soon as the
   rail overflows, so a rail that scrolls still starts at its left edge. */
.rail>article:first-child{margin-left:auto}
.rail>article:last-child{margin-right:auto}
.rail::-webkit-scrollbar{height:3px}
.rail::-webkit-scrollbar-thumb{background:var(--rule)}
.rail>article{flex:0 0 clamp(206px,24vw,262px);scroll-snap-align:start}
.rail .art{aspect-ratio:1/1;margin-bottom:var(--s2)}
.rail h3{font-size:1.06rem}
.rail .dek{font-size:13.5px;margin-top:var(--s1)}

/* ---- fiction panel ---- */
.fiction{background:var(--tint);border-block:1px solid var(--rule)}
.fiction-in{display:grid;gap:var(--s6);padding-block:var(--flow-in);align-items:center}
@media(min-width:860px){.fiction-in{grid-template-columns:.9fr 1.1fr}}
.fiction .plate{text-align:center}
.fiction .plate .art{aspect-ratio:3/4;max-width:320px;margin-inline:auto;border:1px solid var(--rule-ink)}
.fiction .plate .cap{font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:var(--s2)}
.fiction .rubric,.fiction h2,.fiction .byline{text-align:center}
.fiction h2{font-size:clamp(1.9rem,3.4vw,2.7rem);margin-top:var(--s2);font-variation-settings:'opsz' 60}
.fiction .byline{margin-bottom:var(--gap-hdr)}
.fiction .open{font-size:clamp(1rem,1.3vw,1.1rem);line-height:1.72}
.fiction .open::first-letter{font-family:var(--display);font-weight:700;float:left;font-size:3.5em;
  line-height:.78;padding:.04em .09em 0 0}
.fiction .more{color:var(--accent);font-style:italic}

/* ---- notes strip ---- */
.ngrid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--rule)}
@media(min-width:780px){.ngrid{grid-template-columns:repeat(4,1fr)}}
.ngrid a{padding:var(--s4);border-bottom:1px solid var(--rule);border-right:1px solid var(--rule)}
.ngrid a:nth-child(2n){border-right:0}
@media(min-width:780px){.ngrid a:nth-child(2n){border-right:1px solid var(--rule)}.ngrid a:nth-child(4n){border-right:0}}
.ngrid .rubric{font-size:9.5px;margin-bottom:var(--s1)}
.ngrid h3{font-family:var(--text);font-weight:700;font-size:.97rem;line-height:1.32;letter-spacing:0}
.ngrid .stamp{font-size:9.5px;margin-top:var(--s2)}

/* ---- section page ---- */
.sechero{position:relative;overflow:hidden;background:var(--dark);color:var(--on-dark);
  min-height:clamp(250px,36vh,360px);display:grid;place-items:center;text-align:center}
.sechero .art{position:absolute;inset:0;background:var(--dark)}
.sechero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,16,14,.48),rgba(18,16,14,.86))}
.sechero .inner{position:relative;padding:var(--flow-in) var(--gutter);max-width:780px}
.sechero h1{font-size:clamp(2.2rem,5vw,3.6rem);text-transform:uppercase;letter-spacing:.03em;
  color:var(--on-dark);font-variation-settings:'opsz' 72}
.sechero .sub{color:var(--on-dark-soft);margin-top:var(--s3);font-style:italic;font-size:1.02rem}
.lead2{display:grid;gap:var(--s5);align-items:center}
@media(min-width:880px){.lead2{grid-template-columns:1.08fr .92fr}}
.lead2 .art{aspect-ratio:3/2}
.lead2 h2{font-size:clamp(1.9rem,3.4vw,2.7rem);margin-top:var(--s2);font-variation-settings:'opsz' 60}
.lead2 .dek{margin-top:var(--s3);font-size:1.05rem;max-width:46ch}
.tail{list-style:none;margin:0;padding:0}
.tail li{border-bottom:1px solid var(--rule)}
.tail li:first-child{border-top:1px solid var(--rule)}
.tail a{display:grid;grid-template-columns:76px 1fr;gap:var(--s3);padding-block:var(--s4);align-items:center}
@media(min-width:700px){.tail a{grid-template-columns:124px 1fr;gap:var(--s4)}}
/* With the small thumbnail the words run taller than the picture, and centring hung
   the picture beside the dek. The picture starts on the title's line instead. */
@media(max-width:699px){.tail a{align-items:start}}
.tail .art{aspect-ratio:1/1}
.tail h3{font-size:clamp(1.12rem,1.7vw,1.38rem);transition:color .14s ease}
.tail .dek{font-size:14.5px;margin-top:var(--s1);max-width:60ch}

/* ---- piece ---- */
.measure{max-width:var(--measure);margin-inline:auto}
.p-head{text-align:center}
/* The title keeps its own measure, 17ch below. Held to the text measure as well, a
   title a few pixels too long for 60ch dropped its last word alone onto a second
   centred line. Everything else in the head sets its own narrower width. The form
   pages narrow their head further down, and win by coming later. */
.p-head.measure{max-width:none}
.p-head .rubric{margin-bottom:var(--s3)}
.p-head h1{font-size:clamp(2.3rem,5.5vw,4.1rem);max-width:17ch;margin-inline:auto;
  letter-spacing:-.018em;font-variation-settings:'opsz' 96}
.p-head .dek{font-size:clamp(1.02rem,1.5vw,1.3rem);margin:var(--s4) auto 0;max-width:46ch;font-style:italic}
.p-art{margin-block:var(--s6) var(--s1);aspect-ratio:16/9}
.p-cap{font-family:var(--sans);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);text-align:right;margin-bottom:var(--s5)}
.body{font-size:12pt;line-height:1.7}

.body p+p{margin-top:1.2em}
.single-post .body>p:first-of-type::first-letter{font-family:var(--display);font-weight:700;float:left;
  font-size:4em;line-height:.76;padding:.03em .09em 0 0}
.single-post .body>p:first-of-type::first-line{font-variant:small-caps;letter-spacing:.05em}
.marginal{font-family:var(--sans);font-size:12.5px;font-weight:300;line-height:1.55;color:var(--ink-soft);
  border-top:1px solid var(--rule-ink);padding-top:var(--s2);margin-block:1.6em}
@media(min-width:1200px){.marginal{float:right;width:14rem;margin:.5em -16.5rem 1.2em 2.5rem}}
.pull{margin-block:2.3rem;padding-block:var(--s5);border-top:2px solid var(--rule-ink);
  border-bottom:1px solid var(--rule);font-family:var(--display);font-weight:400;font-style:italic;
  font-size:clamp(1.35rem,2.4vw,1.78rem);line-height:1.3;text-align:center;font-variation-settings:'opsz' 40}
.brk{display:flex;justify-content:center;padding-block:1.8rem}
.brk svg{height:14px;width:auto;color:var(--ink-faint)}
.endmark{display:flex;justify-content:center;padding-top:var(--s5)}
.endmark svg{height:24px;width:auto;color:var(--accent)}
/* clinician byline mode: credentials + reviewed date */
.creds{background:var(--tint);border-left:3px solid var(--rule-ink);padding:var(--s3) var(--s4);margin-top:var(--s5);
  font-family:var(--sans);font-size:13.5px;font-weight:300;line-height:1.6;color:var(--ink-soft)}
.creds strong{color:var(--ink);font-weight:500}
.crisis{font-family:var(--sans);font-size:13.5px;font-weight:300;line-height:1.6;background:var(--tint);
  border-left:3px solid var(--accent);padding:var(--s4);margin-top:var(--s4);color:var(--ink-soft)}
.crisis strong{color:var(--ink);font-weight:500}
/* The same words in the client's pages arrive as .idz-crisis alone, and set as plain
   body copy the full width of the page. They are the same box, held to the text
   measure where the page runs wider than it. */
.idz-crisis{font-family:var(--sans);font-size:13.5px;font-weight:300;line-height:1.6;background:var(--tint);
  border-left:3px solid var(--accent);padding:var(--s4);color:var(--ink-soft);max-width:var(--measure-len)}
.idz-crisis strong{color:var(--ink);font-weight:500}
.idz-crisis p{margin:0}
/* .signup's rule and its space above and below: see "sections in a page", further down. */
.signup p{color:var(--ink-soft);font-size:15.5px;line-height:1.6;margin-top:var(--s3)}
.signup form{margin-top:var(--s3)}
/* The small line under the field. It is a .stamp, but .signup p outranks .stamp
   and set it at 15.5px, the size of the paragraph above it, in capitals. */
.signup .stamp{font-size:10.5px;line-height:1.7;margin-top:var(--s3)}
/* The paragraph and the note under the field run the block's full width, as the field
   and its button do. Held to 52ch they broke early, on a desktop into two uneven lines
   each. The confirmation screens set their own centred measure. */
/* One button: 11.5px capitals on a 1.6 line, var(--s2) by var(--s4), 40.4px tall
   wherever it stands. The line height is stated rather than inherited, because the
   inherited one differed by page and a link, a sign-in form and a checkout each set
   their own, which gave standalone buttons of 33.5, 34, 40.6 and 42px. */
.btn{font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;line-height:1.6;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:0;padding:var(--s2) var(--s4);cursor:pointer;
  transition:background .12s,border-color .12s,color .12s}
.btn:hover{background:var(--ink-soft);border-color:var(--ink-soft)}

/* ---- dark footer ---- */
.foot{background:var(--dark);color:var(--on-dark-soft);padding-block:var(--flow-in) var(--s6)}
.foot .fmark{display:flex;justify-content:center;padding-bottom:var(--flow)}
.foot .fmark svg{height:26px;width:auto;color:var(--on-dark);display:block}
/* The wordmark is a link home and looks the same touched, pressed or hovered: no tap
   flash, and a finger-sized box around it, drawn in place with negative margins. */
.foot .fmark a,.foot .fmark a:hover,.foot .fmark a:active{display:block;padding:8px 12px;margin:-8px -12px;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.fcols{display:grid;gap:var(--s5);grid-template-columns:repeat(2,1fr)}
@media(min-width:780px){.fcols{grid-template-columns:repeat(4,1fr)}}
.fcols h2{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--on-dark)}
.fcols ul{list-style:none;margin:var(--s2) 0 0;padding:0;display:grid;gap:var(--s2)}
.fcols a{font-family:var(--sans);font-size:12.5px;font-weight:300;color:var(--on-dark-soft)}
/* The item takes the link's size, so a link that wraps keeps its two lines 18.75px
   apart against 28.75px between items. On the body's 26px line they were 26 apart
   against 32, and the second line read as a link of its own. */
.fcols li{font-size:12.5px;line-height:1.5}
.fcols a:hover{color:var(--on-dark)}
.fbot{margin-top:var(--flow);padding-top:var(--s4);border-top:1px solid #2E2822;font-family:var(--sans);
  font-size:10.5px;letter-spacing:.1em;color:#7B746A;text-align:center;line-height:1.8}

/* ---- mobile ---- */
@media(max-width:680px){
  :root{--gutter:20px;--flow:clamp(30px,7vw,42px);--flow-in:clamp(34px,8vw,48px)}
      .opener{min-height:auto}
  .opener .inner{padding-block:var(--s7)}
  .opener h1{font-size:2.25rem}
  .opener .dek{font-size:1rem;margin-top:var(--s3)}
  .nav{gap:var(--s1) var(--s3);font-size:10.5px;padding-block:var(--s3)}
  .mix .big h3{font-size:1.65rem}
  .card .art{aspect-ratio:16/10}
  .slab h2{font-size:1.7rem}
  .photoband{min-height:auto}
  .photoband h2{font-size:1.55rem}
  .rail>article{flex-basis:196px}
  .fiction .plate .art{max-width:242px}
  .fiction h2{font-size:1.85rem}
  .sechero{min-height:auto}
  .sechero h1{font-size:2.1rem}
  .lead2 h2{font-size:1.8rem}
  .tail a{grid-template-columns:70px 1fr;gap:var(--s3)}
  .p-head h1{font-size:2.15rem;max-width:none}
  .p-art{aspect-ratio:4/3}
  .body{font-size:12pt;line-height:1.66}
  .single-post .body>p:first-of-type::first-letter{font-size:3.4em}
  .pull{margin-block:2rem;padding-block:var(--s4);font-size:1.28rem}
  .btn{flex:1 1 100%}
}
@media(max-width:400px){
  :root{--gutter:17px}
  .opener h1{font-size:2rem}
  .p-head h1,.sechero h1{font-size:1.95rem}
  .g3{grid-template-columns:1fr}
}
/* ---- sticky sections bar ---- */
.navbar{position:sticky;top:var(--chrome,0px);z-index:70;border-bottom:1px solid var(--rule);
  background:var(--paper);transition:box-shadow .32s ease}
.navbar.is-stuck{box-shadow:0 10px 26px -22px rgba(15,13,11,.75)}
.navbar-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s2)}
.navbar .nav{grid-column:2}
.nav-tag{grid-column:3;justify-self:end;font-family:var(--sans);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}

/* the small wordmark in the sticky bar: identity once the masthead scrolls away */
.nav-mark{grid-column:3;justify-self:end;display:none;line-height:0}
.nav-mark svg{height:15px;width:auto;color:var(--ink);display:block}


/* ---- burger ---- */
.burger{grid-column:1;justify-self:start;display:none;flex-direction:column;justify-content:center;gap:var(--s1);
  width:42px;height:42px;margin-left:-10px;padding:0;background:none;border:0;cursor:pointer}
.burger span{display:block;width:21px;height:1.5px;background:var(--ink);border-radius:2px;
  transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .2s ease,width .45s cubic-bezier(.16,1,.3,1)}
.burger span:nth-child(2){width:15px}
.burger:hover span:nth-child(2){width:21px}

/* ---- mobile menu ---- */
.menu[hidden]{display:none}
.menu{position:fixed;inset:0;z-index:200}
.menu-scrim{position:absolute;inset:0;background:rgba(15,13,11,.55);opacity:0;
  transition:opacity .45s cubic-bezier(.16,1,.3,1);backdrop-filter:blur(2px)}
.menu-panel{position:absolute;top:0;right:0;height:100%;width:90vw;max-width:560px;
  background:var(--dark);color:var(--on-dark);display:flex;flex-direction:column;
  padding:var(--s4) var(--s5) var(--s5);overflow-y:auto;
  transform:translateX(101%);transition:transform .58s cubic-bezier(.16,1,.3,1);
  box-shadow:-24px 0 60px -30px rgba(0,0,0,.9)}
.menu.is-open .menu-scrim{opacity:1}
.menu.is-open .menu-panel{transform:none}
.menu-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s5)}
.menu-mark svg{height:26px;width:auto;color:#E0A32E;display:block}
/* The mark is a link home and looks the same touched, pressed or hovered: no tap flash,
   and a finger-sized box around the thin stroke, drawn in place with negative margins. */
.menu-mark,.menu-mark:hover,.menu-mark:active{display:block;padding:8px 14px;margin:-8px -14px;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.menu-close{position:relative;width:42px;height:42px;margin-right:-10px;background:none;border:0;cursor:pointer}
.menu-close span{position:absolute;left:11px;top:20px;width:20px;height:1.5px;background:var(--on-dark);
  border-radius:2px;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.menu-close span:nth-child(1){transform:rotate(45deg)}
.menu-close span:nth-child(2){transform:rotate(-45deg)}
.menu-close:hover span:nth-child(1){transform:rotate(135deg)}
.menu-close:hover span:nth-child(2){transform:rotate(45deg)}
.menu-nav{display:flex;flex-direction:column}
.menu-nav a{font-family:var(--display);font-weight:700;font-variation-settings:'opsz' 40;
  font-size:clamp(1.75rem,7.5vw,2.5rem);line-height:1.14;letter-spacing:-.015em;color:var(--on-dark);
  padding-block:var(--s2)}
.menu-nav a:hover{color:#E0A32E}
/* Two by two. Four links wrapping as they fell left Search alone on a second row. */
.menu-more{display:grid;grid-template-columns:repeat(3,max-content);gap:var(--s2) var(--s5);margin-top:auto;padding-top:var(--s5)}
/* Three max-content columns take 261px with the usual gap; a 320px phone gives the panel 240px
   between its edges, the width of the rules above and below, so the columns sit 10px apart there. */
@media(max-width:359px){.menu-more{column-gap:var(--s2)}}
.menu-more a{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-soft)}
.menu-more a:hover{color:var(--on-dark)}
.menu-foot{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid #2E2822;
  font-family:var(--sans);font-size:11px;font-weight:300;letter-spacing:.1em;line-height:1.9;color:#7B746A}
/* staggered entrance */
.menu-panel .menu-nav a,.menu-panel .menu-more a,.menu-panel .menu-foot,.menu-panel .menu-mark{
  opacity:0;transform:translateY(16px)}
.menu.is-open .menu-panel .menu-nav a,.menu.is-open .menu-panel .menu-more a,
.menu.is-open .menu-panel .menu-foot,.menu.is-open .menu-panel .menu-mark{
  opacity:1;transform:none;
  transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(150ms + var(--i,0)*42ms)}
body.menu-open{overflow:hidden}

/* ---- lazy pictures, embeds and artwork fade in as they are reached ----
   Only when site.js has put idz-lazy on <html>, which it never does under reduced
   motion, so with no script every picture shows at once. Opacity alone: the box is
   already the size it will be, so nothing moves. */
.idz-lazy .lz{opacity:0}
.idz-lazy .lz.lz-in{opacity:1;transition:opacity .3s ease}
@media(prefers-reduced-motion:reduce){.idz-lazy .lz{opacity:1;transition:none}}
/* A printed page has no reader scrolling it: every picture prints. */
@media print{.idz-lazy .lz{opacity:1!important;transition:none}}

/* ---- scroll reveal (added by JS only, so no-JS shows everything) ---- */
.js-reveal{opacity:0;transform:translateY(22px)}
.js-reveal.is-in{opacity:1;transform:none;
  transition:opacity .8s ease,transform .85s cubic-bezier(.16,1,.3,1)}

@media(max-width:860px){
  .navbar .nav{display:none}
  .burger{display:flex}
  .navbar-in{grid-template-columns:auto 1fr}
  .nav-tag{grid-column:2}
}
@media(prefers-reduced-motion:reduce){
  .js-reveal,.menu-panel .menu-nav a,.menu-panel .menu-more a,.menu-panel .menu-foot,.menu-panel .menu-mark{
    opacity:1!important;transform:none!important}
  .menu-panel{transition:none}
  .menu-scrim{transition:none}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* ------------------------------------------------------------------
   The sign-in form. WordPress emits its own admin markup and classes;
   these bring it into the publication's type without touching core.
   ------------------------------------------------------------------ */
.idz-login{max-width:24rem;margin-block-start:var(--gap-hdr)}
/* The form aligns to the text column it sits in. Centring it independently of the
   paragraph above put three different alignments on one page. */
.idz-login p{margin-block:0 var(--gap-tight)}
.idz-login p:last-child{margin-bottom:0}
.idz-login label{display:block;font-family:var(--sans);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:var(--s2)}
.idz-login input[type=text],.idz-login input[type=password],.idz-login input[type=email]{
  width:100%;font-family:var(--sans);font-size:15px;padding:0 var(--s2);height:46px;box-sizing:border-box;
  background:var(--paper);border:1px solid var(--ink);border-radius:0;color:var(--ink)}
.idz-login .button,.idz-login input[type=submit],.idz-login button[type=submit]{
  font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:0;
  /* The same height as the fields above it, the label centred in it. */
  padding:0 var(--s4);cursor:pointer;box-shadow:none;text-shadow:none;height:46px;box-sizing:border-box;line-height:44px}
/* The rule above paints all three forms of the submit; the hover named only two, so a
   <button type=submit> would hold full ink under the pointer while its neighbours lightened.
   The press is a step darker again, and restates the label the base rule sets. */
.idz-login .button:hover,.idz-login input[type=submit]:hover,.idz-login button[type=submit]:hover{
  background:var(--ink-soft);border-color:var(--ink-soft)}
.idz-login .button:active,.idz-login input[type=submit]:active,.idz-login button[type=submit]:active{
  background:var(--ink-press);border-color:var(--ink-press);color:var(--paper)}
.idz-login .forgetmenot{font-family:var(--sans);font-size:13px;color:var(--ink-soft)}
.idz-login .forgetmenot label{display:inline;text-transform:none;letter-spacing:0;font-size:13px}
.idz-login a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:.15em;font-family:var(--sans);font-size:13px}
.idz-login a:hover{color:var(--ink)}

/* the consent reopen link sits in a list; it is a control, not a bullet */
.idz-consent-reopen,.idz-consent-open{list-style:none}
.foot li,.fcols li{list-style:none}
.fbot li,.fbot ul{list-style:none;margin:0;padding:0}

/* ---- own the base: Hello Elementor's reset is no longer loaded ---- */
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0}
img,svg,video{max-width:100%;height:auto}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,ul,ol{margin:0}
ul,ol{padding:0}
.body ul,.body ol{padding-left:1.25em;margin-block:1.15em}
.body li{margin-block:.35em}
.body ul{list-style:disc}
.body ol{list-style:decimal}
.body h2,.body h3{margin-block:1.6em .5em;font-variation-settings:'opsz' 28}
.body h2{font-size:clamp(1.5rem,2.6vw,1.9rem)}
.body h3{font-size:clamp(1.25rem,2vw,1.45rem)}
.body a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em}
.body a:hover{text-decoration-thickness:2px}
.body blockquote{margin-block:1.6em;padding-left:1.1em;border-left:2px solid var(--rule)}
.body strong{font-weight:700}

/* ---- vertical rhythm the base reset stripped out ----------------------
   Zeroing default margins is right, but the space has to come back
   deliberately. A page title needs air before its text; a .body that
   follows a caption already has it and must not double up. */
.p-head + .body{margin-top:var(--s5)}
.p-cap + .body{margin-top:0}
/* The lead image keeps only a caption's width of space under it, var(--s1). With no
   caption printed, the text below took that 6px and the drop cap sat on the picture's
   edge, under a picture with 46px above it. The text takes the same var(--s6). */
.p-art + .body{margin-top:var(--s6)}
/* Open with no image (single.php prints article.p-bare): the headline and text alone.
   The head closes on its last line, the stamp's baseline, and the text's first capitals,
   the drop cap, stand as far under that baseline as the rule over the head stands above
   its first capitals: var(--flow), plus the 4.65px the rubric's line keeps above its
   capitals, less the 0.9px the drop cap sits inside the text's box. Measured equal within
   1px from 1440 to 360 wide. Only the bare opening is touched, so a piece with a picture
   or its artwork opens exactly as before. */
.p-bare .p-head > .stamp:last-child{text-box:trim-end cap alphabetic}
.p-bare .p-head + .body{margin-top:calc(var(--flow) + 3.75px)}
/* A free piece's head opens on the Free to read badge, whose edge is its top, so the rule
   stands var(--flow) over it and the text takes var(--flow) less the drop cap's 0.9px. */
.p-bare .p-head:has(> .idz-free:first-child) + .body{margin-top:calc(var(--flow) - .9px)}
.body > * + *{margin-top:1.15em}
.body > p + p{margin-top:1.15em}
.body > h2 + p,.body > h3 + p{margin-top:.55em}
/* Tables in page content. They had no style of their own, so every cell was set at
   body size, 16px, and the cookie names in 16px monospace, which would not break: on
   the cookie policy the name column took 267px, the purpose was squeezed into 121px,
   and the table ran 3,476px tall on a desktop and 612px wide on a 375px phone. The
   contents are set a step down, and a cookie name stays on one line. */
.body .wp-block-table th,.body .wp-block-table td{font-size:13.5px;line-height:1.45;padding:.5em .6em;vertical-align:top}
.body .wp-block-table th{font-size:12.5px}
.body .wp-block-table code{font-size:12px;white-space:nowrap}
@media(max-width:600px){
  .body .wp-block-table th,.body .wp-block-table td{font-size:12.5px;padding:.45em .4em}
  .body .wp-block-table th{font-size:11.5px}
}
/* The cookie list on a phone. Four columns do not fit 341px readably: the purpose
   came down to 93px and ran up to 18 lines a row. So each cookie is a short entry
   between two rules: its name, then who sets it and how long it lasts side by side,
   then what it is for across the full width. The header row stays for screen
   readers; the two labels repeat its words. A wrapped value keeps its own left edge
   rather than going back under its label. */
@media(max-width:600px){
  .body .idz-cookie-table table,.body .idz-cookie-table tbody{display:block;width:100%}
  .body .idz-cookie-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .body .idz-cookie-table tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"name name" "set life" "purp purp";column-gap:var(--s3);row-gap:.3em;
    border-top:1px solid var(--rule-ink);padding:.65em 0}
  .body .idz-cookie-table tr:last-child{border-bottom:1px solid var(--rule-ink)}
  .body .idz-cookie-table td{display:block;border:0;padding:0;font-size:13px;line-height:1.45}
  .body .idz-cookie-table td:nth-child(1){grid-area:name}
  .body .idz-cookie-table td:nth-child(2){grid-area:set}
  .body .idz-cookie-table td:nth-child(3){grid-area:purp}
  .body .idz-cookie-table td:nth-child(4){grid-area:life}
  .body .idz-cookie-table td:first-child code{font-size:12px;font-weight:600;color:var(--ink)}
  .body .idz-cookie-table td:nth-child(2),.body .idz-cookie-table td:nth-child(4){display:grid;
    grid-template-columns:auto minmax(0,1fr);column-gap:.5em;align-items:baseline}
  .body .idz-cookie-table td:nth-child(2)::before,.body .idz-cookie-table td:nth-child(4)::before{
    font-family:var(--sans);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
  .body .idz-cookie-table td:nth-child(2)::before{content:"Set by"}
  .body .idz-cookie-table td:nth-child(4)::before{content:"Lifetime"}
}
/* A heading sits the same distance above whatever it heads. Only a paragraph was
   reset, so a list, a table, a quotation or the clinician block brought its own larger
   top margin and hung further below its heading than a paragraph did, and an h3 right
   under an h2 floated halfway between the two. The heading's own .5em is the gap. */
.body > :is(h2,h3,h4) + *{margin-top:0}

/* ---- sections in a page ---------------------------------------------------------
   A section that opens with a rule (the Letter signup, the feedback form, the replies,
   the intake form, the paywall) has the rule var(--flow) under the last line above it
   and var(--flow) over its own first line: the same distance either side, and the same
   token as the rule between two modules. It keeps nothing at its foot. What follows it
   brings var(--flow) of its own, and when it is the last thing on the page, the
   module's own var(--flow) is what lies between its last line and the next rule. So
   the space is the same above and below every such rule, the page ends as deep as any
   other page, and a phone gets the smaller --flow with no rule of its own.
   The .body rules at the end of this group carry two classes, so they outrank
   .body > * + * above. */
.signup,.idz-feedback-form,.idz-comments,.idz-intake,.paywall{margin-top:var(--flow);
  padding-block:var(--flow) 0;border-top:2px solid var(--rule-ink)}
/* The first line starts at the rule's distance to its capitals, not to its line box,
   and a closing line of small capitals ends at its baseline. */
:is(.signup,.idz-feedback-form,.idz-comments,.paywall) > :is(h2,h3,p):first-child{text-box:trim-start cap alphabetic;margin-top:0}
:is(.signup,.paywall) > :is(p,span):last-child:not(:has(.btn)){text-box:trim-end cap alphabetic}
/* And the running text over the rule ends at its baseline, so the rule is var(--flow)
   from the letters on both sides. The last line kept the half-leading under it, and the
   rule stood 8px further from the text above it than from the heading below it: 76
   against 68 on a desktop. The account's cards open on the same rule. A line that
   holds a button is left alone, because the button hangs below the baseline. */
:is(p,ul,ol):not(:has(.btn,.idz-btn)):has(+ :is(.signup,.idz-feedback-form,.idz-comments,.idz-intake,.paywall,.idz-account)){text-box:trim-end cap alphabetic}

/* ---- things set in the run of the text ------------------------------------------
   The end mark closes the text, var(--s5) under its last line, and a callout that
   follows keeps the same var(--s5) above it, so the mark sits between the two rather
   than on the box below it. */
.body > .endmark{margin-top:0}
/* The text ends at its baseline, so var(--s5) is all that lies between its letters and
   the mark. Its last line's half-leading put the mark 40px under the text and 32px over
   what follows. */
.body > :is(p,ul,ol):not(:has(.btn,.idz-btn)):has(+ .endmark){text-box:trim-end cap alphabetic}
/* A book ends on its note, one level down, and the same holds: on its own page over the
   end mark, and on the shelf over the rule between two books. The note's half-leading
   stood the rule 74.1px under it against 68 over the next title on a desktop. */
.idz-book .idz-book-body > p:last-child{text-box:trim-end cap alphabetic}
.body > * + :is(.crisis,.idz-crisis){margin-top:var(--s5)}
/* A separator in the text stands var(--s6) from the letters on both sides: the text
   over it ends at its baseline, and whatever follows starts at its capitals. Nothing
   reached it before, so it took the paragraph rhythm's 1.15em over it and the
   heading's 1.6em under it, 26.6px against 52.8 on a desktop. */
.body > hr.wp-block-separator{margin-block:var(--s6) 0}
.body > hr.wp-block-separator + *{margin-top:var(--s6)}
.body > :is(p,ul,ol):not(:has(.btn,.idz-btn)):has(+ hr.wp-block-separator){text-box:trim-end cap alphabetic}
.body > hr.wp-block-separator + :is(h2,h3,h4,p){text-box:trim-start cap alphabetic}
/* Last, so a callout after a section takes the section's var(--flow). */
.body > * + :is(.signup,.idz-feedback-form,.idz-comments,.idz-intake,.paywall),
.body > :is(.signup,.idz-feedback-form,.idz-comments,.idz-intake,.paywall) + *{margin-top:var(--flow)}
.page-template-default .p-head h1{margin-bottom:0}
/* a form or shortcode page reads better left-aligned throughout */
.page-template-default .p-head{text-align:center}

/* ---- row rhythm: the row owns its spacing, children never add to it -------
   Every listed item (a section listing, read-next) uses the
   same symmetric padding. Child margins are zeroed so a stamp or a dek cannot
   make one row taller on one side than the other. */
.tail a,.sec-list a{padding-block:var(--row-pad)}
/* A page body's last line ends on its baseline, as every other ruled block does,
   so the space from its letters to the band that follows is the site's one flow.
   A line of buttons or an image is not a line of text, and is left whole.
   Only page.php's own body, when it is the last thing before the band: a body
   nested inside a module (the portal lesson) is followed by more of the page, and
   the session deck and the worksheet page keep their own endings. */
main > .mod:last-child > article:last-child:not(.idz-deck,.idz-ws-page) > .measure.body:last-child > p:last-child:not(:has(.btn,.idz-btn,img,svg,iframe)){text-box:trim-end cap alphabetic}
:root{--row-pad:var(--s5)}
.tail a > *:first-child,.sec-list a > *:first-child{margin-top:0}
.tail a > *:last-child,.sec-list a > *:last-child{margin-bottom:0}
.tail .stamp,.sec-list .stamp{margin-top:var(--s2)}
/* A row that closes on its stamp ends at the stamp's baseline, so the rule under it is
   var(--row-pad) from those letters, as the rule over it is from the next row's. Where
   the text runs lower than the picture, on a phone, the stamp's leading stood the rule
   29px under it against 24 over the next row. A section's lead closes on its stamp the
   same way, over the band under it: 51 against 46 at 768. */
.tail a > div > .stamp:last-child,
.lead2 > div > .stamp:last-child{text-box:trim-end cap alphabetic}
.tail .dek,.sec-list .dek{margin-top:var(--s1)}

/* ==================================================================
   The client's workspace. Read by someone in recovery, often on a phone,
   often not at their best. It has to be calm, legible and obvious.
   ================================================================== */
.idz-portal{--row-pad:var(--s4)}
.idz-portal .hdr{text-align:left;padding-block:0 var(--gap-hdr)}
.idz-portal .hdr h2{font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.01em;text-transform:none;
  font-variation-settings:'opsz' 40}
.idz-portal .hdr .sub{font-style:normal;font-size:1rem;color:var(--ink-soft);max-width:60ch;margin-top:var(--s2)}
.idz-portal .pc-duration{font-size:15.5px;max-width:62ch;margin-bottom:var(--gap-hdr)}

/* a module: its name, its blurb, then its sessions */
.idz-portal .measure > .rubric{margin-top:var(--flow);padding-top:var(--flow);
  border-top:1px solid var(--rule)}
.idz-portal .measure > .rubric:first-of-type{margin-top:0;padding-top:0;border-top:0}
.idz-portal h4{font-family:var(--display);font-weight:700;font-size:clamp(1.25rem,2.2vw,1.5rem);
  margin-top:var(--s2);font-variation-settings:'opsz' 32}
.idz-portal h4 + .dek{margin-top:var(--s2);font-size:15.5px;max-width:62ch}

/* the sessions themselves */
.idz-portal ul{list-style:none;margin:var(--gap-hdr) 0 0;padding:0;border-top:1px solid var(--rule)}
.idz-portal li{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  padding-block:var(--row-pad);border-bottom:1px solid var(--rule);
  font-family:var(--text);font-size:1.02rem;line-height:1.4}
.idz-portal li a{color:var(--ink);text-decoration:none;font-weight:700;flex:1 1 auto}
.idz-portal li a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em}
/* a session not yet opened: present, legible, plainly not a door */
.idz-portal li:not(:has(a)){color:var(--ink-faint)}
.idz-portal li .stamp{flex:0 0 auto;margin:0;text-align:right;white-space:nowrap}
@media(max-width:560px){
  .idz-portal li{flex-direction:column;align-items:flex-start;gap:var(--s1)}
  .idz-portal li .stamp{text-align:left}
}
.idz-portal .idz-crisis{margin-top:var(--flow)}

/* ==================================================================
   Cookie choices. A dialog, because a choice deserves to be asked for
   plainly rather than tucked into a footer link.
   ================================================================== */
.idz-consent[hidden]{display:none!important}
.idz-consent{position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  padding:var(--gutter)}
.idz-consent::before{content:"";position:absolute;inset:0;background:rgba(15,13,11,.55);
  backdrop-filter:blur(2px);opacity:0;transition:opacity .38s cubic-bezier(.16,1,.3,1)}
.idz-consent.is-open::before{opacity:1}
.idz-consent-panel{position:relative;width:min(30rem,100%);background:var(--paper);
  border:1px solid var(--rule-ink);padding:var(--s5);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.8);
  transform:translateY(14px) scale(.985);opacity:0;
  transition:transform .42s cubic-bezier(.16,1,.3,1),opacity .34s ease}
.idz-consent.is-open .idz-consent-panel{transform:none;opacity:1}
.idz-consent h2{font-family:var(--display);font-weight:700;font-size:1.35rem;
  font-variation-settings:'opsz' 28;margin-bottom:var(--s2)}
.idz-consent p{font-family:var(--text);font-size:15px;line-height:1.6;color:var(--ink-soft)}
.idz-consent p + p{margin-top:var(--s2)}
.idz-consent a{color:var(--ink);text-decoration:underline;text-underline-offset:.16em}
.idz-consent-actions{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s4)}
/* One basis for both, wide enough for the longer label. Grown from their own labels,
   the two buttons in the row came out 170 and 234px wide. Where two 12rem buttons do
   not fit, a phone, each takes the full row. */
.idz-consent-actions .btn{flex:1 1 12rem;white-space:nowrap}
.idz-consent .btn--quiet{background:transparent;color:var(--ink);border:1px solid var(--ink)}
/* It filled to full ink on hover, a step past the filled button standing beside it in the
   same row. It takes the quiet button's grey now, and the same press as its neighbour. */
.idz-consent .btn--quiet:hover{background:var(--ink-soft);border-color:var(--ink-soft);color:var(--paper)}
.idz-consent .btn--quiet:active{background:var(--ink-press);border-color:var(--ink-press);color:var(--paper)}
/* Two classes: .idz-consent p outranks one, and had set this note in 15px Caslon
   capitals, larger than the buttons above it. */
.idz-consent .idz-consent-note{margin-top:var(--s3);font-family:var(--sans);font-size:11px;letter-spacing:.1em;line-height:1.6;
  text-transform:uppercase;color:var(--ink-faint)}
body.idz-consent-open{overflow:hidden}
@media(prefers-reduced-motion:reduce){
  .idz-consent::before,.idz-consent-panel{transition:none}
  .idz-consent-panel{transform:none;opacity:1}
}

/* ==================================================================
   Messages  a client and their clinician, in writing.
   Deliberately not a chat bubble UI: this is correspondence, and it
   should read like a file of letters rather than a phone screen.
   ================================================================== */
.idz-msg-who-note{font-family:var(--sans);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 var(--s2)}
.idz-msg-slow{font-family:var(--text);font-size:11.5pt;line-height:1.6;
  color:var(--ink-faint);margin:0 0 var(--s5);max-width:60ch}
/* The page's own lines under its centred title are centred with it, as the account's
   are. Set left, they were two short blocks on a different axis from the title. */
.idz-msg-who-note,.idz-msg-slow{text-align:center;margin-inline:auto;text-wrap:balance}
.idz-msg-none{font-family:var(--text);font-size:12pt;color:var(--ink-soft);
  padding:var(--s5) 0;border-top:1px solid var(--rule);margin:0 0 var(--s4)}
.idz-msg-list{list-style:none;margin:0 0 var(--flow);padding:0}
.idz-msg-item{list-style:none;padding:var(--s4) 0;border-top:1px solid var(--rule)}
.idz-msg-item:first-child{border-top:0}
.idz-msg-item.is-staff{padding-left:var(--s4);border-left:2px solid var(--accent)}
.idz-msg-who{font-family:var(--sans);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 var(--s2)}
.idz-msg-item.is-mine .idz-msg-who{color:var(--ink)}
.idz-msg-body{font-family:var(--text);font-size:12pt;line-height:1.7;color:var(--ink);max-width:62ch}
.idz-msg-body p{margin:0 0 var(--s3)}
.idz-msg-body p:last-child{margin-bottom:0}
.idz-msg-label{display:block;font-family:var(--sans);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 var(--s2)}
.idz-msg-form textarea{width:100%;resize:vertical;font-family:var(--text);font-size:12pt;
  line-height:1.7;color:var(--ink);background:var(--paper);border:1px solid var(--rule-ink);
  border-radius:0;padding:var(--s3)}
.idz-msg-form textarea:focus{outline:2px solid var(--accent);outline-offset:2px}
.idz-msg-actions{display:flex;gap:var(--s2);margin-top:var(--s3)}
.idz-dash-panel--wide{grid-column:1/-1}

/* ==================================================================
   The journal  what the client writes between sessions.
   No prompt, no marking, no length. The page should feel like a
   notebook that happens to be on a screen, not like a form.
   ================================================================== */
.idz-journal-said{font-family:var(--sans);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin:0 0 var(--s4)}
.idz-journal-h{font-family:var(--display);font-weight:700;
  font-size:clamp(1.35rem,2.4vw,1.8rem);line-height:1.2;margin:0 0 var(--s4)}
.idz-journal-h--past{margin-top:var(--flow);padding-top:var(--s5);
  border-top:1px solid var(--rule-ink)}
.idz-journal-label{display:block;font-family:var(--sans);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 var(--s2)}
.idz-journal-form input[type=text]{width:100%;font-family:var(--text);font-size:12pt;
  padding:var(--s2) var(--s3);background:var(--paper);border:1px solid var(--rule-ink);
  border-radius:0;margin-bottom:var(--s4)}
.idz-journal-form textarea{width:100%;min-height:16rem;resize:vertical;
  font-family:var(--text);font-size:12.5pt;line-height:1.75;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule-ink);border-radius:0;padding:var(--s3)}
.idz-journal-form input[type=text]:focus,.idz-journal-form textarea:focus{
  outline:2px solid var(--accent);outline-offset:2px}
.idz-journal-actions{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s4)}
.idz-journal-who{margin-top:var(--s5);font-family:var(--sans);font-size:10.5px;
  line-height:1.7;letter-spacing:.04em;color:var(--ink-faint);max-width:56ch}
.idz-journal-list{list-style:none;margin:0;padding:0}
.idz-journal-item{list-style:none;padding:var(--s4) 0;border-top:1px solid var(--rule)}
.idz-journal-item:first-child{border-top:0}
.idz-journal-item h3{font-family:var(--display);font-weight:700;
  font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.3;margin:0 0 var(--s1)}
.idz-journal-item h3 a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule-ink)}
/* The title rests in ink on its hairline, so the pointer leaves it where it is and the
   press is what the reader feels: the hairline doubles under the finger. */
.idz-journal-item h3 a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.idz-journal-item h3 a:active{border-bottom-width:2px}
.idz-journal-when{font-family:var(--sans);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 var(--s2)}
.idz-journal-peek{font-family:var(--text);font-size:11.5pt;line-height:1.65;
  color:var(--ink-soft);margin:0;max-width:62ch}
/* The page runs the full width of the .wrap now. One column keeps the measure it had
   and sits under the centre of the page title, crisis line included; that is the whole
   page below 1000px, and the page on any screen before anything has been written. */
.idz-journal{max-width:var(--measure);margin-inline:auto}
.idz-journal + .idz-crisis{max-width:var(--measure-len);margin-inline:auto}
/* .body ul outranks a single class, so the list took the article indent and stood
   1.25em to the right of its own heading. */
.idz-journal .idz-journal-list{padding-left:0;margin-block:0}
/* From 1000px, with entries: the writing on the left, no wider than the measure, and
   what has been written beside it. The entries keep 18rem: at 1024px they had 272px
   and the writing gives up the difference, 614px to 598px, not the list. The two
   headings open their columns at one height, so the rule over the entries goes, and
   the crisis line stays under the writing, at the writing's width: it sits outside
   the grid, so it is given the same sum as the first column, or at 1000px it ran 37px
   past the column above it. */
@media(min-width:1000px){
  .idz-journal--split{max-width:none;display:grid;column-gap:var(--s6);align-items:start;
    grid-template-columns:minmax(0,var(--measure)) minmax(18rem,1fr)}
  .idz-journal--split > .idz-journal-said{grid-column:1/-1}
  .idz-journal--split .idz-journal-h--past{padding-top:0;border-top:0}
  .idz-journal--split + .idz-crisis{margin-inline:0;max-width:min(var(--measure-len),calc(100% - var(--s6) - 18rem))}
}

/* ==================================================================
   The deck  the lesson, one idea to a screen.
   Read before the writing opens. Each slide is its own page load,
   so the position survives a closed tab, a flat battery and a week.
   ================================================================== */
.idz-slide{min-height:34vh}
.idz-slide-title{font-family:var(--display);font-weight:700;
  font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.2;margin:0 0 var(--s4)}
.idz-slide p{font-family:var(--text);font-size:12.5pt;line-height:1.75;margin:0 0 var(--s4)}
.idz-slide p:last-child{margin-bottom:0}
.idz-slide ul,.idz-slide ol{font-family:var(--text);font-size:12.5pt;line-height:1.75;
  margin:0 0 var(--s4);padding-left:1.3em}
.idz-slide li{margin-bottom:var(--s2)}
.idz-slide blockquote{margin:0 0 var(--s4);padding-left:var(--s4);
  border-left:2px solid var(--accent);font-style:italic;color:var(--ink-soft)}

.idz-deck-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  margin-top:var(--flow);padding-top:var(--s4);border-top:1px solid var(--rule)}
.idz-deck-count{font-family:var(--sans);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-faint);flex:0 0 auto}
.idz-btn{display:inline-block;font-family:var(--sans);font-size:11.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;padding:var(--s2) var(--s4);
  border:1px solid var(--ink);color:var(--ink);background:transparent;text-decoration:none;
  line-height:1.6;cursor:pointer;transition:background .12s,color .12s,border-color .12s}
/* The outline button fills on hover like every other quiet button on the site, and the
   label has to flip with it: ink left on the hover grey is 2.43:1 and cannot be read. */
.idz-btn:hover{background:var(--ink-soft);border-color:var(--ink-soft);color:var(--paper)}
.idz-btn:active{background:var(--ink-press);border-color:var(--ink-press);color:var(--paper)}
.idz-btn--primary{background:var(--ink);color:var(--paper)}
.idz-btn--primary:hover{background:var(--ink-soft);border-color:var(--ink-soft);color:var(--paper)}
.idz-btn--primary:active{background:var(--ink-press);border-color:var(--ink-press);color:var(--paper)}
.idz-btn--off{border-color:var(--rule);color:var(--ink-faint);cursor:default}
/* Off and done both declare cursor:default: they are not offering anything, so the
   pointer and the press must find them exactly as they rest. Now that .idz-btn:hover
   floods and flips the label, each has to restate its own paint at the same weight. */
.idz-btn--off:hover,.idz-btn--off:active{background:transparent;border-color:var(--rule);color:var(--ink-faint)}
.idz-btn--done{border-color:var(--accent);color:var(--accent);cursor:default}
.idz-btn--done:hover,.idz-btn--done:active{background:transparent;border-color:var(--accent);color:var(--accent)}
/* .body a underlines every link in the text, a button included. */
.body a.idz-btn{text-decoration:none}
/* .body a sets ink on every link in the text. The flood's paper label is named against
   it here as well, the way the primary button's is below, so nothing the text column
   says about link colour can strand an ink label on the grey. The inert done button is
   held at the same weight on the line under, as it is at rest further down. */
.body a.idz-btn:hover,.body a.idz-btn:active{color:var(--paper)}
.body a.idz-btn--done:hover,.body a.idz-btn--done:active{color:var(--accent)}
/* .body a already claims var(--ink) at a higher specificity than a modifier
   class, so a primary button rendered as a link came out black on black and its
   label vanished. These three restate the colour where they can win. */
.body a.idz-btn--primary,a.idz-btn--primary{color:var(--paper)}
.body a.idz-btn--primary:hover,a.idz-btn--primary:hover{color:var(--paper)}
.body span.idz-btn--off,.idz-btn--off{color:var(--ink-faint);border-color:var(--rule)}
.body span.idz-btn--done,.idz-btn--done{color:var(--accent)}

.idz-deck-dots{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:var(--s4) 0 0;padding:0}
.idz-deck-dots li{list-style:none;margin:0}
.idz-dot{display:flex;align-items:center;justify-content:center;width:1.9rem;height:1.9rem;
  border:1px solid var(--rule);font-family:var(--sans);font-size:10.5px;color:var(--ink-faint);
  text-decoration:none;transition:border-color .12s,background .12s,color .12s}
.idz-dot:hover{border-color:var(--rule-ink);color:var(--ink)}
.idz-dot.is-read{border-color:var(--rule-ink);color:var(--ink)}
.idz-dot.is-here{background:var(--ink);border-color:var(--ink);color:var(--paper)}

.idz-deck-next{margin-top:var(--flow);padding-top:var(--s5);border-top:1px solid var(--rule-ink)}
.idz-deck-next h2{font-family:var(--display);font-weight:700;
  font-size:clamp(1.1rem,1.7vw,1.35rem);margin:0 0 var(--s3)}
.idz-deck-next .idz-ws-list{list-style:none;margin:0;padding:0}
.idz-deck-next .idz-ws-item{list-style:none;display:flex;gap:var(--s3);align-items:baseline;
  flex-wrap:wrap;padding:var(--s2) 0;border-top:1px solid var(--rule)}
.idz-deck-next .idz-ws-item:first-child{border-top:0}
.idz-deck-next .idz-ws-title{flex:1 1 16rem;font-family:var(--text);font-size:12pt;
  line-height:1.5;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule-ink)}
.idz-deck-next a.idz-ws-title:hover{border-bottom-color:var(--ink);color:var(--ink)}
.idz-deck-next a.idz-ws-title:active{border-bottom-width:2px}
.idz-deck-locked{margin-top:var(--flow);padding:var(--s4);background:var(--tint);
  font-family:var(--sans);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft)}
.idz-deck-actions{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--flow)}
.idz-deck-note{margin-top:var(--s4);font-family:var(--sans);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.idz-deck-terms{margin-top:var(--s3);font-family:var(--sans);font-size:10px;
  letter-spacing:.06em;line-height:1.6;color:var(--ink-faint);max-width:52ch}

/* The programme is the practice's own work.
   A screenshot cannot be prevented in a browser: no CSS, no script and no header
   stops a phone pointed at a screen. What can be done is to make the material
   unhelpful to take and traceable when taken. Selection and the browser's own
   print are both stood down, and the name of whoever opened the screen sits
   faintly across it, so any copy that leaves says who made it. */
.idz-deck{position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}
.idz-deck a,.idz-deck button{-webkit-user-select:auto;user-select:auto}
/* The clip happens on the untransformed box, so the rotated layer inside can be
   oversized without pushing the page sideways. It did, the first time. */
.idz-mark{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.idz-mark-in{position:absolute;inset:-30%;display:flex;flex-wrap:wrap;
  align-content:space-around;justify-content:space-around;
  gap:clamp(50px,11vh,130px) clamp(30px,7vw,90px);
  transform:rotate(-24deg);transform-origin:center}
.idz-mark span{font-family:var(--sans);font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ink);opacity:.032;white-space:nowrap}
.idz-deck > *:not(.idz-mark){position:relative;z-index:1}

/* ==================================================================
   The workspace  the client's own filing cabinet.
   Programme, then session, then the worksheets in that session, in
   the order the programme runs. A flat list sorted by whenever a
   file was last touched is not a filing system.
   ================================================================== */
.idz-workspace .idz-prog{margin-bottom:var(--s7)}
.idz-workspace .idz-prog-name{font-family:var(--display);font-weight:700;
  font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.15;margin:0 0 var(--s2)}
.idz-workspace .idz-prog-count,.idz-workspace .idz-prog-rest{
  font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 var(--s5)}
.idz-workspace .idz-prog-rest{margin:var(--s4) 0 0}
.idz-workspace .idz-sessions{list-style:none;margin:0;padding:0}
.idz-workspace .idz-session{list-style:none;margin:0 0 var(--s5);padding:0 0 var(--s5);
  border-bottom:1px solid var(--rule)}
.idz-workspace .idz-session:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.idz-workspace .idz-session h3{font-family:var(--display);font-weight:700;
  font-size:clamp(1.05rem,1.5vw,1.22rem);line-height:1.3;margin:0 0 var(--s3)}
.idz-workspace .idz-session-n{color:var(--ink-faint);font-weight:400}
.idz-workspace .idz-session-n::after{content:". "}
.idz-workspace .idz-session--shut h3{color:var(--ink-faint)}
.idz-workspace .idz-ws-list{list-style:none;margin:0;padding:0}
.idz-workspace .idz-ws-item{list-style:none;display:flex;gap:var(--s3);align-items:baseline;
  flex-wrap:wrap;padding:var(--s2) 0;border-top:1px solid var(--rule)}
.idz-workspace .idz-ws-item:first-child{border-top:0}
.idz-workspace .idz-ws-title{flex:1 1 16rem;font-family:var(--text);font-size:12pt;
  line-height:1.5;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule-ink)}
.idz-workspace a.idz-ws-title:hover{border-bottom-color:var(--ink);color:var(--ink)}
.idz-workspace a.idz-ws-title:active{border-bottom-width:2px}
.idz-workspace .idz-ws-title--shut{border-bottom:0;color:var(--ink-faint)}
.idz-workspace .idz-ws-when{font-family:var(--sans);font-size:10.5px;letter-spacing:.1em;
  color:var(--ink-faint);flex:0 0 auto}
.idz-workspace .idz-chip{font-family:var(--sans);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;padding:3px 9px;border:1px solid var(--rule);color:var(--ink-soft);
  flex:0 0 auto;white-space:nowrap}
.idz-workspace .idz-chip--assigned{border-color:var(--rule-ink);color:var(--ink)}
.idz-workspace .idz-chip--in_progress{border-color:var(--accent);color:var(--accent)}
.idz-workspace .idz-chip--submitted{background:var(--tint);border-color:var(--tint)}
.idz-workspace .idz-chip--reviewed{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.idz-workspace .idz-chip--shut,.idz-workspace .idz-chip--read{border-color:transparent;color:var(--ink-faint);padding-left:0}
.idz-workspace a.idz-chip--slides{border-color:var(--accent);color:var(--accent);text-decoration:none}
/* The rest is oxblood because the chip is reporting a state. The hover is a gesture, so
   it answers in the grey every other control answers in. */
.idz-workspace a.idz-chip--slides:hover{background:var(--ink-soft);border-color:var(--ink-soft);color:var(--paper)}
.idz-workspace .idz-ws-item--deck .idz-ws-title{font-style:italic}
.idz-workspace .idz-meta{margin-top:var(--s7);font-family:var(--sans);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase}

/* ==================================================================
   The worksheet  where a client actually writes.
   Secure Custom Fields renders an admin form; none of that chrome
   belongs here. The prompt should read like a question in a book and
   the answer should look like paper, not like a database field.
   ================================================================== */
.idz-worksheet{max-width:none}
.idz-worksheet .idz-instructions{font-family:var(--text);font-size:12pt;line-height:1.7;
  color:var(--ink-soft);max-width:62ch;margin-bottom:var(--flow)}

/* strip the plugin's furniture */
.idz-worksheet .acf-form,.idz-worksheet .acf-fields,.idz-worksheet .acf-field,
.idz-worksheet .acf-row,.idz-worksheet .acf-table,.idz-worksheet .acf-input{
  border:0!important;background:none!important;padding:0!important;margin:0!important;box-shadow:none!important}
.idz-worksheet .acf-repeater > table,.idz-worksheet .acf-table > tbody,
.idz-worksheet .acf-table tr,.idz-worksheet .acf-table td{display:block;width:100%;border:0!important}
.idz-worksheet .acf-repeater .acf-actions,.idz-worksheet .acf-row-handle,
.idz-worksheet .acf-th,.idz-worksheet thead,.idz-worksheet .acf-hl.acf-tbody{display:none!important}
/* The question now IS the answer field's label, so labels cannot be hidden
   wholesale any more: that would hide the questions. Every other label goes. */
.idz-worksheet .acf-label{display:none!important}
.idz-worksheet .acf-field[data-name="answer"] > .acf-label{display:block!important;margin:0 0 var(--s3)!important}
.idz-worksheet .acf-field[data-name="answer"] > .acf-label label{
  display:block;font-family:var(--display);font-weight:700;font-variation-settings:'opsz' 24;
  font-size:clamp(1.12rem,1.7vw,1.3rem);line-height:1.35;color:var(--ink);
  text-transform:none;letter-spacing:0}
.idz-worksheet .acf-label .description,.idz-worksheet .acf-label .acf-required{display:none}
.idz-worksheet .acf-notice{display:none}

/* Choices read as choices, not as a bulleted list with a control in front. */
.idz-worksheet .acf-radio-list,.idz-worksheet .acf-checkbox-list{
  list-style:none!important;margin:0!important;padding:0!important}
.idz-worksheet .acf-radio-list li,.idz-worksheet .acf-checkbox-list li{
  list-style:none!important;margin:0 0 var(--s1)!important;padding:0!important}
.idz-worksheet .acf-radio-list li label{
  display:flex;gap:var(--s2);align-items:flex-start;cursor:pointer;
  font-family:var(--text);font-size:12pt;line-height:1.6;color:var(--ink);
  padding:var(--s2) var(--s3);border:1px solid transparent;transition:border-color .12s,background .12s}
.idz-worksheet .acf-radio-list li label:hover{background:var(--tint);border-color:var(--rule)}
.idz-worksheet .acf-radio-list li label:has(input:checked){background:var(--tint2);border-color:var(--rule-ink)}
.idz-worksheet .acf-radio-list input[type=radio]{margin:.42em 0 0 0;flex:0 0 auto;accent-color:var(--accent)}
.idz-worksheet .acf-radio-list input[type=radio]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* one question, then room to answer it */
.idz-worksheet .acf-row{padding-block:var(--s6)!important;
  border-top:1px solid var(--rule)!important}
.idz-worksheet .acf-row:first-of-type{border-top:0!important}
.idz-worksheet .acf-field[data-name="prompt"] input,
.idz-worksheet .acf-field[data-name="prompt_text"] input{
  width:100%;border:0;background:transparent;padding:0;
  font-family:var(--display);font-weight:700;font-variation-settings:'opsz' 24;
  font-size:clamp(1.12rem,1.7vw,1.3rem);line-height:1.35;color:var(--ink);
  pointer-events:none;-webkit-user-select:none;user-select:none}
.idz-worksheet .acf-field[data-name="answer"]{margin-top:var(--s3)!important}
.idz-worksheet textarea{width:100%;min-height:8.5rem;resize:vertical;
  font-family:var(--text);font-size:12pt;line-height:1.7;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule-ink);border-radius:0;padding:var(--s3)}
.idz-worksheet textarea:focus{outline:2px solid var(--accent);outline-offset:2px}
.idz-worksheet input[type=text]:not([readonly]),.idz-worksheet input[type=number]{
  font-family:var(--text);font-size:12pt;padding:var(--s2);background:var(--paper);
  border:1px solid var(--rule-ink);border-radius:0;max-width:22rem}
.idz-worksheet .acf-field[data-name="scale"] input[type=number]{max-width:6rem}

/* A scale row: the statement, then ten squares. The free-text box that belongs to
   every other row is hidden here, not removed, so its stored value still posts. */
.idz-worksheet .acf-field.idz-answer-mute{display:none!important}

/* ---- the note beside a marked answer -------------------------------------------
   Offered under a question that has options, and only there. Hidden rather than
   taken off the form, because a field off the form posts nothing and the save would
   write that nothing over what was stored. A hidden box still posts what is in it.
   Shut until an answer is marked, and a box that already holds words is never shut. */
.idz-worksheet .acf-field.idz-note--none,
.idz-worksheet .acf-field.idz-note--shut{display:none!important}
.idz-worksheet .acf-field.idz-note{margin-top:var(--s3)!important;padding-left:var(--s4);
  border-left:1px solid var(--rule)}
.idz-worksheet .acf-field.idz-note > .acf-label{display:block!important;margin:0 0 var(--s2)!important}
.idz-worksheet .acf-field.idz-note > .acf-label label{font-family:var(--sans)!important;
  font-size:11px!important;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft)!important}
.idz-worksheet .acf-field.idz-note textarea{min-height:5.5rem;font-size:11.5pt}

/* The repeater's hidden template row.
   The rule two blocks up sets display:block on every tr in the table, and beats
   ACF's own .acf-clone{display:none} on specificity, so the template row was
   drawn on the end of every worksheet: a raw Prompt, prompt_type, scale, answer
   and options form, six hundred pixels of it, under the client's last question. */
.idz-worksheet .acf-row.acf-clone,.idz-worksheet tr.acf-clone{display:none!important}

/* Yes or no is two words, so it sits on one line. */
.idz-worksheet .idz-yesno .acf-radio-list{display:flex!important;gap:var(--s2)}
.idz-worksheet .idz-yesno .acf-radio-list li{flex:0 0 auto;margin:0!important}
.idz-worksheet .idz-yesno .acf-radio-list li label{min-width:7rem;justify-content:flex-start}

/* A short answer gets a line, not a page. */
.idz-worksheet .idz-short input[type=text]{width:100%;max-width:32rem}
.idz-worksheet .idz-scale > .acf-label{display:block!important;margin:0 0 var(--s3)!important}
.idz-worksheet .idz-scale > .acf-label label{
  display:block;font-family:var(--display);font-weight:700;font-variation-settings:'opsz' 24;
  font-size:clamp(1.12rem,1.7vw,1.3rem);line-height:1.35;color:var(--ink);
  text-transform:none;letter-spacing:0}
.idz-worksheet .idz-scale .acf-radio-list{
  display:flex!important;flex-wrap:wrap;gap:var(--s1);list-style:none!important;margin:0!important;padding:0!important}
.idz-worksheet .idz-scale .acf-radio-list li{margin:0!important;flex:0 0 auto}
.idz-worksheet .idz-scale .acf-radio-list li label{
  display:flex;align-items:center;justify-content:center;min-width:2.6rem;padding:var(--s2) 0;
  border:1px solid var(--rule);background:var(--paper);cursor:pointer;
  font-family:var(--sans);font-size:12px;letter-spacing:.06em;color:var(--ink-soft);
  transition:border-color .12s,background .12s,color .12s}
.idz-worksheet .idz-scale .acf-radio-list li label:hover{border-color:var(--rule-ink);color:var(--ink)}
.idz-worksheet .idz-scale .acf-radio-list li label:has(input:checked){
  background:var(--ink);border-color:var(--ink);color:var(--paper)}
.idz-worksheet .idz-scale .acf-radio-list input[type=radio]{
  position:absolute;opacity:0;width:0;height:0;margin:0}
.idz-worksheet .idz-scale .acf-radio-list li label:has(input:focus-visible){
  outline:2px solid var(--accent);outline-offset:3px}

/* saving, submitting, and what comes back */
.idz-worksheet .acf-form-submit{margin-top:var(--flow)!important}
.idz-worksheet .acf-button,.idz-worksheet input[type=submit]{
  font-family:var(--sans)!important;font-size:11.5px!important;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;background:var(--ink)!important;color:var(--paper)!important;
  border:1px solid var(--ink)!important;border-radius:0!important;padding:var(--s2) var(--s4)!important;
  box-shadow:none!important;text-shadow:none!important;height:auto!important;line-height:1.6!important}
.idz-worksheet .acf-button:hover,.idz-worksheet input[type=submit]:hover{
  background:var(--ink-soft)!important;border-color:var(--ink-soft)!important}
/* The press takes the same !important as the paint above it, for the same reason:
   ACF's own button rules would otherwise win the colour back. */
.idz-worksheet .acf-button:active,.idz-worksheet input[type=submit]:active{
  background:var(--ink-press)!important;border-color:var(--ink-press)!important}
.idz-worksheet .idz-actions{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;margin-top:var(--flow)}
.idz-worksheet .idz-savestate{font-family:var(--sans);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint)}
.idz-worksheet .idz-status{font-family:var(--sans);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);margin-top:var(--gap-hdr)}
.idz-worksheet .idz-status--submitted{color:var(--ink)}
.idz-feedback{background:var(--tint);border-block:1px solid var(--rule-ink);
  padding:var(--s5);margin-top:var(--flow)}
.idz-feedback h3{font-family:var(--display);font-size:1.3rem;margin-bottom:var(--s2)}
.idz-readonly textarea{background:transparent;border-color:var(--rule);padding-left:0}


/* a full-width page still needs an outer bound, or lines run the width of a desk */
.page-body{max-width:var(--max)}

/* ---- mobile chrome: one row  wordmark left, burger right ----------------
   The centred masthead and the bar below it were two rows doing one job. On a
   phone they collapse into a single line, the mark and the control on the same
   baseline, the control under the thumb. */
@media(max-width:860px){
  .mast{display:none}
  .mast-rule{display:none}
  .navbar-in{grid-template-columns:1fr auto;align-items:center;min-height:52px}
  /* Both pinned to row 1. The burger comes first in the markup but sits in
     column 2, and grid auto-placement will not step backwards to column 1 
     it starts a new row instead, which dropped the wordmark below the burger. */
  .nav-mark{display:block;grid-area:1/1;justify-self:start;align-self:center}
  .nav-mark svg{height:19px}
  .burger{display:flex;grid-area:1/2;justify-self:end;align-self:center;align-items:flex-end;margin:0}
  .navbar{border-top:0}
  /* the panel comes from the same side as the control that opens it */
  .menu-panel{right:0;left:auto}
}

/* ---- a form page is one centred block ------------------------------------
   The heading was centring across the full measure while the form sat left
   inside it, so the two had different visual centres. Everything shares one
   narrow column instead, and that column is centred. */
.idz-form-page .p-head,
.idz-form-page .measure.body{max-width:26rem;margin-inline:auto}
.idz-form-page .idz-login{max-width:none}
.idz-form-page .measure.body > p{text-align:center}
.idz-form-page .idz-login label{text-align:left}
.idz-form-page .idz-login .button,
.idz-form-page .idz-login input[type=submit]{width:100%}
.idz-form-page .idz-login p:last-child{text-align:center}

/* ---- the search form ----------------------------------------------------- */
.idz-searchform{max-width:30rem;margin:var(--gap-hdr) auto var(--gap-grid)}
.idz-searchform-label{display:block;font-family:var(--sans);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:var(--s2);text-align:left}
.idz-searchform input[type=search]{-webkit-appearance:none;appearance:none}
/* The field and its button: see "an address and its button", further down. On the
   Search page the form stands in the text column, over a paragraph that runs the
   full measure, so it takes the full measure and the same left edge. */
.body > .idz-searchform{max-width:none;margin-inline:0}
/* Over a list of results the form stands off the first row's rule by the row's own
   padding, which is what the rule has under it to the row. var(--gap-grid) put the
   rule 46px under the button and 32 over the row on a desktop. */
.mod > .measure:has(+ .tail) > .idz-searchform{margin-bottom:var(--row-pad)}

/* ---- subscribe -------------------------------------------------------------
   PMPro's own levels table renders nothing here, and would have looked like
   stock WordPress if it had. Two cards, the site's own type, one button each. */
.idz-plans{display:grid;gap:var(--s5);margin-top:var(--s6);
  grid-template-columns:1fr}
@media(min-width:680px){.idz-plans{grid-template-columns:1fr 1fr}}
.idz-plan{border:1px solid var(--rule-ink);padding:var(--s5);display:flex;flex-direction:column;
  background:var(--paper)}
.idz-plan--best{border-width:2px;background:var(--tint);
  /* The heavier border would push this card's contents down a pixel against
     its neighbour, so the padding gives the pixel back. */
  padding:calc(var(--s5) - 1px)}
.idz-plan-flag{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin-bottom:var(--s2)}
.idz-plan h3{font-family:var(--display);font-weight:400;font-size:1.35rem;margin:0}
/* Each card's first line starts at its capitals, var(--s5) inside the border, the
   same as the button's foot. Stacked, the monthly card begins on its heading and the
   annual on its flag, and the two sat 6px apart for the flag's leading. */
.idz-plan > :is(.idz-plan-flag,h3){text-box:trim-start cap alphabetic}
.idz-plan-price{font-family:var(--display);font-size:1.05rem;color:var(--ink-soft);margin-top:var(--s3)}
.idz-plan-price span{font-size:2.4rem;color:var(--ink);font-variation-settings:'opsz' 40;
  display:block;line-height:1.05}
.idz-plan-rate{font-family:var(--sans);font-size:12px;letter-spacing:.06em;color:var(--ink-faint);
  margin-top:var(--s2)}
/* The held-plan label rides with its button to the foot of the card, the same line
   the other card's button sits on, and one small space above it. */
.idz-plan-cta{margin-top:auto;align-self:stretch;display:flex;flex-direction:column;align-items:stretch;gap:var(--s3);flex:none}
/* flex:none on both, because a narrow-screen rule lets a bare .btn grow to fill its
   row, and in a card column that grew the button downwards. */
.idz-plan-cta .idz-plan-btn{margin-top:0}
.idz-plan-held{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin:0}
.idz-plan-note{font-family:var(--text);font-size:14.5px;line-height:1.6;color:var(--ink-soft);
  margin-top:var(--s3);margin-bottom:var(--s5)}
.idz-plan-note p{margin:0}
/* auto pushes the button to the foot of the card, where it runs the width of the
   content. The cards are equal height, so the two buttons land on the same line
   however much copy sits above them. */
.idz-plan-btn{margin-top:auto;align-self:stretch;text-align:center;flex:none}
/* The placeholders that keep the two cards on the same lines. An empty paragraph
   has no line box and so no height, which is what the space is for. */
.idz-plan-hold::before{content:"\00a0"}
@media(max-width:679px){.idz-plan-btn{align-self:stretch;text-align:center}
  /* Stacked, there is no neighbour to line up with, so the placeholders go. */
  .idz-plan-hold{display:none}}
.idz-plans-foot{font-family:var(--sans);font-size:13px;letter-spacing:.04em;color:var(--ink-soft);
  margin-top:var(--s5)}
.idz-sub-inline{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s4)}
.idz-sub-inline span{font-family:var(--sans);font-size:13px;letter-spacing:.04em;color:var(--ink-soft)}

/* An <a class="btn"> was inheriting the link colour, so the label came out ink on
   ink and every subscribe button read as a solid black block. */
a.btn,a.btn:visited{color:var(--paper);text-decoration:none;display:inline-block;
  font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;background:var(--ink);border:1px solid var(--ink);
  padding:var(--s2) var(--s4);line-height:1.6;transition:background .12s,border-color .12s,color .12s}
a.btn:hover{background:var(--ink-soft);border-color:var(--ink-soft);color:var(--paper)}
/* The press for both forms of the button, stated here rather than beside .btn because
   a.btn:hover above outranks a bare .btn:active and would hold the hover grey under a
   held pointer. */
.btn:active,a.btn:active{background:var(--ink-press);border-color:var(--ink-press);color:var(--paper)}
/* A subscriber's step up from monthly to annual is oxblood, greying on hover like
   every button. Named for :visited as well, because a.btn:visited above outranks the
   bare class and would repaint it ink once the checkout link has been followed; and
   the hover and the press are restated at the same rank, because the :visited form
   would otherwise outrank a.btn:hover and a.btn:active and hold the oxblood under the
   pointer. */
a.idz-plan-btn--up,a.idz-plan-btn--up:visited{background:var(--accent);border-color:var(--accent)}
a.idz-plan-btn--up:hover{background:var(--ink-soft);border-color:var(--ink-soft)}
a.idz-plan-btn--up:active{background:var(--ink-press);border-color:var(--ink-press)}

/* ---- the free badge --------------------------------------------------------
   One switch on a piece decides whether it is open. Where a piece is free, the
   badge says so before the reader clicks, rather than after they have hit a wall. */
.idz-free{display:inline-block;font-family:var(--sans);font-size:10.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--paper);
  background:var(--accent);border:1px solid var(--accent);padding:4px 9px;
  margin-right:var(--s3);vertical-align:middle;line-height:1.35}
.on-dark .idz-free{background:var(--paper);border-color:var(--paper);color:var(--dark)}
/* At the head of a piece it is a statement, not a footnote. */
.p-head .idz-free{display:block;width:fit-content;margin:0 auto var(--s4);
  font-size:11.5px;padding:6px 14px}
/* On a card it sits on its own line so the section and reading time stay readable. */
.card .idz-free,.mix .idz-free,.tail .idz-free,.rail .idz-free,.ngrid .idz-free,
.sec-list .idz-free,.lead2 .idz-free{display:block;width:fit-content;margin:0 0 var(--s2)}

/* ---- the paywall card ------------------------------------------------------ */
.paywall{text-align:center}
/* Its rule and spacing are the section rule's, with the signup and the replies. It had a
   closing hairline of its own as well, which faced only the module's empty foot and
   then the next module's rule: two rules with nothing between them. */
.paywall h2{margin-inline:auto;max-width:24ch}
.paywall p{font-family:var(--text);font-size:15.5px;line-height:1.6;color:var(--ink-soft);
  max-width:46ch;margin:var(--s3) auto 0}
.paywall .btn{margin-top:var(--s5)}
.paywall-alt{font-family:var(--sans)!important;font-size:12px!important;letter-spacing:.06em;
  margin-top:var(--s4)!important}

/* ---- the social row --------------------------------------------------------
   Monoline glyphs drawn in inc/social.php. They take their colour from the type,
   so the same markup works on paper above the footer and on ink inside the menu. */
.idz-social-band{border-top:1px solid var(--rule);padding-block:var(--s6)}
.idz-social-band .wrap{display:flex;align-items:center;justify-content:center;
  gap:var(--s5);flex-wrap:wrap}
.idz-social-say{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-faint);margin:0}
.idz-social{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:var(--s5)}
.idz-social a{display:grid;place-items:center;width:38px;height:38px;color:var(--ink-soft);
  border:1px solid transparent;transition:color .2s ease,border-color .2s ease}
.idz-social a:hover,.idz-social a:focus-visible{color:var(--ink);border-color:var(--rule)}
.idz-social svg{display:block}
@media(max-width:520px){
  .idz-social-band .wrap{gap:var(--s4)}
  .idz-social{gap:var(--s3)}
  .idz-social a{width:34px;height:34px}
}
/* inside the dark mobile panel.
   Spread across the whole width of the rules above and below it, glyph to glyph.
   It was packed to the left with a fixed 18px gap, so all of a phone's spare width
   fell on the right: the first glyph always sat 7px in from the rule, and the last
   anywhere from 11px past the end of it on a 360px Android to 52px short of it on
   a 430px phone. Each link is a 34px target around a 20px glyph, so the first and
   last are drawn out by the 7px between, which puts the glyphs themselves on the
   ends of the rules, on the same left edge as the links and the line above. */
.idz-social--menu{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid #2E2822;
  justify-content:space-between;gap:var(--s1)}
.idz-social--menu li:first-child{margin-left:-7px}
.idz-social--menu li:last-child{margin-right:-7px}
/* A folding phone's cover screen, under 298px: six 34px targets do not fit the rule, so
   they come down to 30px, still a comfortable target, and the pull-out to match. */
@media(max-width:330px){.idz-social--menu a{width:30px;height:30px}
  .idz-social--menu li:first-child{margin-left:-5px}.idz-social--menu li:last-child{margin-right:-5px}}
.idz-social--menu a{color:var(--on-dark-soft);width:34px;height:34px}
.idz-social--menu a:hover,.idz-social--menu a:focus-visible{color:var(--paper);border-color:#2E2822}

/* ---- replies ---------------------------------------------------------------
   Only subscribers may write; anyone who can read the piece can read the thread. */
/* .idz-comments takes its rule and spacing from "sections in a page". */
/* Two classes: the replies sit inside the article's .body, whose h2 rule outranked
   one and set this label at 30px with a 48px top margin. */
.idz-comments .idz-comments-h{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 var(--s5)}
.idz-comment-list{list-style:none;margin:0;padding:0}
.idz-comment-list ol.children{list-style:none;margin:var(--s4) 0 0;padding-left:var(--s5);
  border-left:1px solid var(--rule)}
.idz-comment{padding-block:var(--s5);border-bottom:1px solid var(--rule)}
.idz-comment:last-child{border-bottom:0}
.idz-comment-head{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;
  margin-bottom:var(--s3)}
.idz-comment-who{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink)}
.idz-comment-when{font-family:var(--sans);font-size:11px;letter-spacing:.06em;color:var(--ink-faint)}
.idz-comment-body{font-family:var(--text);font-size:12pt;line-height:1.68;color:var(--ink)}
.idz-comment-body p{margin:0 0 var(--s3)}
.idz-comment-body p:last-child{margin-bottom:0}
.idz-comment-held{font-family:var(--sans);font-size:11px;letter-spacing:.06em;color:var(--accent);
  margin:0 0 var(--s3)}
.idz-comment-reply{margin:var(--s3) 0 0}
.idz-comment-reply a{font-family:var(--sans);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft)}
.idz-comment-reply a:hover{color:var(--ink)}
.idz-comments-empty,.idz-comments-closed{font-family:var(--text);font-style:italic;
  color:var(--ink-faint);margin:0 0 var(--s5)}

/* the form */
.idz-comments .comment-respond{margin-top:var(--s6);padding-top:var(--s5);
  border-top:1px solid var(--rule)}
.idz-comments .comment-reply-title{font-family:var(--display);font-weight:400;
  font-size:1.35rem;margin:0 0 var(--s4)}
.idz-comment-field textarea{width:100%;box-sizing:border-box;font-family:var(--text);
  font-size:12pt;line-height:1.6;padding:var(--s3);background:var(--paper);color:var(--ink);
  border:1px solid var(--ink);border-radius:0;resize:vertical;min-height:9rem}
.idz-comment-field textarea:focus{outline:2px solid var(--accent);outline-offset:-2px}
.idz-comment-note{font-family:var(--sans);font-size:11.5px;line-height:1.6;color:var(--ink-faint);
  margin:var(--s3) 0 var(--s4);max-width:56ch}
.idz-comments .form-submit{margin:0}

/* the two closed doors */
.idz-comments-gate{border:1px solid var(--rule-ink);background:var(--tint);
  padding:var(--s5);text-align:center;margin-top:var(--s5)}
.idz-comments-gate p{font-family:var(--text);font-size:15.5px;color:var(--ink-soft);
  margin:0 0 var(--s4);max-width:44ch;margin-inline:auto}
/* auto, not 0: zero sides pinned this 44ch line to the left of the centred box. */
.idz-comments-alt{margin:var(--s4) auto 0!important}
.idz-comments-alt a{font-family:var(--sans);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft)}
/* The box is var(--s5) from its border to the first line's capitals and from the last
   line's baseline to its border. The two lines' half-leading made it 38.1px at the top
   and 40.3 at the bottom on a desktop. */
.idz-comments-gate > :first-child{text-box:trim-start cap alphabetic}
.idz-comments-gate > :last-child{text-box:trim-end cap alphabetic}


/* ---- the banner ------------------------------------------------------------
   Opt-in, one piece at a time. With nothing switched on there is no banner and
   the front page opens straight into The Front. An editor who does switch one on
   can upload the image behind it; without an upload it falls back to the
   generated plate. */
.opener--photo{position:relative;overflow:hidden}
.opener-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;display:block}
.opener--photo .veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(15,13,11,.28) 0%,rgba(15,13,11,.52) 46%,rgba(15,13,11,.82) 100%)}
.opener--photo .inner{position:relative;z-index:2}
/* The mid banner takes an uploaded image the same way the opener does. */
.photoband--photo{position:relative;overflow:hidden}
.photoband--photo .veil{z-index:1}
.photoband--photo .inner{position:relative;z-index:2}
/* Two dark panels should never touch. Placement keeps them apart, but if a module
   between them prints nothing the rule below keeps the boundary visible. */
.opener+.slab,.opener+.photoband,.slab+.slab,.slab+.photoband,
.photoband+.slab,.photoband+.photoband{border-top:1px solid rgba(255,252,247,.20)}
@media(max-width:700px){
  .opener--photo .veil{background:linear-gradient(180deg,rgba(15,13,11,.42) 0%,rgba(15,13,11,.72) 100%)}
}

/* ---- the scope box on the practice page ------------------------------------
   A reader who is not there for addiction reaches the programme headings and
   assumes the page is not for them. This says otherwise, before they get there. */
.idz-scope{border:2px solid var(--rule-ink);background:var(--tint);
  padding:var(--s6) var(--s5);margin:var(--s6) 0}
.idz-scope h2{font-family:var(--display);font-weight:400;
  font-size:clamp(1.25rem,2.2vw,1.7rem);line-height:1.2;margin:0 0 var(--s4);
  font-variation-settings:'opsz' 32;max-width:28ch}
.idz-scope p{font-family:var(--text);font-size:12pt;line-height:1.68;
  color:var(--ink);margin:0 0 var(--s3);max-width:60ch}
.idz-scope p:last-child{margin-bottom:0;color:var(--ink-soft)}
/* Inside the box, measured to the letters: the heading's capitals start on the padding
   and the last line ends on it, so the space inside the top and the bottom border is
   one number. The last line's leading made the foot 7px deeper. */
.idz-scope > :first-child{text-box:trim-start cap alphabetic}
.idz-scope > :last-child{text-box:trim-end cap alphabetic}
@media(max-width:560px){.idz-scope{padding:var(--s5) var(--s4)}}

/* ---- the programmes box on the practice page ----------------------------------
   The six programmes were six headed blocks in the run of the page, and each has a page
   of its own. One box stands for them here, with a short brief and a way through to the
   Programmes list. It is the scope box's twin in size and type, with a hairline rather
   than the scope box's heavy rule, so the page's one warning keeps the heavier frame.
   Inside, measured to the letters: the heading's capitals start on the top padding and
   the button's lower edge ends on the bottom padding, so the two are one number. */
.idz-progbox{border:1px solid var(--rule-ink);background:var(--tint);padding:var(--s6) var(--s5)}
.idz-progbox h2{font-family:var(--display);font-weight:400;
  font-size:clamp(1.25rem,2.2vw,1.7rem);line-height:1.2;margin:0 0 var(--s4);
  font-variation-settings:'opsz' 32;max-width:28ch;text-box:trim-start cap alphabetic}
.idz-progbox > p{font-family:var(--text);font-size:12pt;line-height:1.68;color:var(--ink);
  margin:0;max-width:60ch}
.idz-progbox > p + p{margin-top:var(--s3)}
/* The last line of text ends on its baseline, so var(--s5) is all that lies between its
   letters and the button. */
.idz-progbox > p:has(+ .idz-progbox-go){text-box:trim-end cap alphabetic}
.idz-progbox > .idz-progbox-go{margin:var(--s5) 0 0;max-width:none}
/* The button runs the box's inner width. Its label is trimmed to its capitals and the
   trimmed room goes back into the padding, so the button keeps the site's one height and
   the capitals sit on its middle, with the same room over and under them. */
.idz-progbox-go a.btn{display:block;width:100%;text-align:center;
  padding:calc(var(--s2) + (1lh - 1cap) / 2) var(--s4);text-box:trim-both cap alphabetic}
@media(max-width:560px){.idz-progbox{padding:var(--s5) var(--s4)}}
/* In the run of the page it stands where a section would, as far from the letters on
   either side as one section's last line stands from the next section's heading. That
   gap is the last line's leading and descent, the heading's 1.6em margin, and the room
   over the heading's capitals. The box takes the heading's margin plus its room over
   the capitals above it, and the heading's margin plus the line's leading and descent
   below it, where the next heading brings its own room. .13 of the heading's size is
   Bodoni Moda's room over its capitals on a 1.08 line; .355em is half of Libre Caslon
   Text's ascent less its descent, which leaves the line's own leading and descent. The
   size is the page heading's, from .body h2. */
.body > .idz-progbox{--h2:clamp(1.5rem,2.6vw,1.9rem);
  margin-block:calc(1.73 * var(--h2)) calc(1.6 * var(--h2) + .5lh - .355em)}

/* ---- who you would be writing to, folded, on the practice page ----------------------
   The clinician block is a box that opens, under the programmes box and the full width
   of the column like it. Shut, it is the heading alone, in the page's own colour, with a
   plus at the right. Open, it takes the programmes box's tint and the whole block hangs
   under the heading. The heading is the handle: hovering it, or reaching it from the
   keyboard, fills it grey with paper letters, and holding it fills it a step darker. The
   keyboard takes the site's oxblood ring as well as that fill; the fill used to stand in
   place of a ring. A phone has no hover, so a tap never leaves the fill stuck on.
   The browser opens and shuts it with no script, and the page grows and shrinks with it.
   It shares the programmes box's side padding, so the two headings start on one line.
   Over and under the heading it takes var(--s5), a step less than the programmes box:
   with var(--s6) the shut box stood 116px tall on a desktop, a slab for one line, where
   a phone, already on var(--s5), gave a box the owner found right. */
.idz-whobox{--whobox-pad:var(--s5);--whobox-side:var(--s5);border:1px solid var(--rule-ink)}
.idz-whobox[open]{background:var(--tint)}
.idz-whobox > summary{display:block;list-style:none;cursor:pointer;
  padding:var(--whobox-pad) var(--whobox-side);color:var(--ink);-webkit-tap-highlight-color:transparent}
.idz-whobox > summary::-webkit-details-marker{display:none}
/* The page heading, at its own size, with its margins taken off: the capitals start on
   the padding and the baseline ends on it, so the room over and under the letters is
   one number. It stops short of the plus. */
.idz-whobox > summary > h2{position:relative;margin:0;color:inherit;padding-right:calc(16px + var(--s4));
  text-box:trim-both cap alphabetic}
/* The plus is drawn, not typed, so no font can turn it into something else. Open, its
   upright goes and it reads as a minus. It hangs on the heading, not on the handle, so it
   stays on the middle of the capitals whatever the handle's padding does; on a phone,
   where the heading takes two lines, it stands on the middle of the two. */
.idz-whobox > summary > h2::after{content:"";position:absolute;right:0;top:50%;
  width:16px;height:16px;margin-top:-8px;
  background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,
    linear-gradient(currentColor,currentColor) center/2px 100% no-repeat}
.idz-whobox[open] > summary > h2::after{background-size:100% 2px,0 0}
@media(hover:hover){
  .idz-whobox > summary:hover{background:var(--ink-soft);color:var(--paper)}
  .idz-whobox:not([open]):has(> summary:hover){border-color:var(--ink-soft)}
}
.idz-whobox > summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;background:var(--ink-soft);color:var(--paper)}
.idz-whobox:not([open]):has(> summary:focus-visible){border-color:var(--ink-soft)}
/* Last of the three, so a handle that is held reads as held whether it was reached by
   pointer or by key. */
.idz-whobox > summary:active{background:var(--ink-press);color:var(--paper)}
.idz-whobox:not([open]):has(> summary:active){border-color:var(--ink-press)}
/* Windows' contrast themes paint over every fill and drop every drawn background, so
   there the keyboard's mark is a line, and the plus is drawn again in the theme's text
   colour. */
@media(forced-colors:active){
  .idz-whobox > summary:focus-visible{outline:2px solid CanvasText;outline-offset:-4px}
  .idz-whobox > summary > h2::after{forced-color-adjust:none;
    background-image:linear-gradient(CanvasText,CanvasText),linear-gradient(CanvasText,CanvasText)}
}
/* The handle is the same height open or shut: taking room out of it when the box opened
   made the heading's band visibly shrink. The block under it starts var(--s4) below the
   handle's edge, so a filled handle never sits on the portrait's top edge. The last line
   ends on its baseline, so the padding under it is the padding over the heading. */
.idz-whobox-in{padding:var(--s4) var(--whobox-side) var(--whobox-pad)}
.idz-whobox-in > .idz-who{margin:0}
.idz-whobox-in > .idz-who + *{margin-top:var(--s5)}
/* Paragraph to paragraph as in the run of the page. Written as p + p, and after .body
   p+p, which would otherwise give 1.2em. */
.idz-whobox-in > p + p{margin-top:1.15em}
.idz-whobox-in > :last-child{text-box:trim-end cap alphabetic}
/* The writing in the box is a size under the page's text, and the note a size under
   that. The name and the role over it keep theirs. The gaps are in ems, so they close
   up with the type. */
.idz-whobox-in > p,.idz-whobox-in .idz-who-body > p{font-size:15px}
.idz-whobox-in .idz-who-body > .idz-who-note{font-size:13px}
/* On a phone the box is narrower than the page, and the name and the role over it each
   take two lines. They break evenly rather than leaving one word alone on the second. */
.idz-whobox-in :is(.idz-who-name,.idz-who-role){text-wrap:balance}
@media(max-width:560px){
  .idz-whobox{--whobox-side:var(--s4)}
  .idz-whobox > summary > h2{padding-right:calc(14px + var(--s3))}
  .idz-whobox > summary > h2::after{width:14px;height:14px;margin-top:-7px}
}
/* In the run of the page it is the programmes box's twin: the same distance from the
   letters above it and from the heading below it. Straight under the programmes box
   there are no letters above, only a border, so it takes the last line's leading and
   descent as well, and the two borders stand as far apart as a box stands from text. */
.body > .idz-whobox{--h2:clamp(1.5rem,2.6vw,1.9rem);
  margin-block:calc(1.73 * var(--h2)) calc(1.6 * var(--h2) + .5lh - .355em)}
.body > .idz-progbox + .idz-whobox{margin-top:calc(1.73 * var(--h2) + .5lh - .355em)}

/* ---- the account link, top bar and mobile panel ---------------------------- */
.idz-acct{display:inline-flex;align-items:center;gap:var(--s2);font-family:var(--sans);
  font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);white-space:nowrap;text-decoration:none}
.idz-acct:hover{color:var(--ink)}
.idz-acct-dot{width:6px;height:6px;border-radius:50%;border:1px solid var(--ink-faint);
  flex:0 0 auto}
.idz-acct.is-in .idz-acct-dot{background:var(--accent);border-color:var(--accent)}
/* three columns in the bar: burger, sections, account. The account sits right. */
.navbar-in > .idz-acct--bar{grid-column:3;justify-self:end}
@media(max-width:860px){
  .navbar-in > .idz-acct--bar{display:none} /* the panel carries it on a phone */
}
.idz-acct--menu{display:flex;margin-top:var(--s5);padding-top:var(--s4);
  border-top:1px solid #2E2822;color:var(--on-dark-soft);font-size:12px}
.idz-acct--menu:hover{color:var(--paper)}
.idz-acct--menu .idz-acct-dot{border-color:var(--on-dark-soft)}

/* ---- search in the top bar, wide screens only ------------------------------
   It mirrors the account link: the sections in the middle, search on the left, the
   account on the right. The phone's panel already lists Search, so under the bar's
   breakpoint this stays hidden and the phone's one row is untouched. Row 1 is named
   because an item placed by column alone after the sections would open a second row. */
.idz-find{display:none}
@media(min-width:861px){
  .navbar-in > .idz-find{grid-area:1/1;justify-self:start;display:inline-flex;align-items:center;gap:var(--s2);
    font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
    color:var(--ink-soft);white-space:nowrap}
  .idz-find:hover{color:var(--ink)}
  .idz-find svg{flex:0 0 auto;display:block}
}

/* ---- an article's section name and its Read next heading, as links ----------
   Both take the quiet control's one hover, var(--ink): the stamp's small capitals darken
   to it the way the sections bar does, and the band heading, already set in ink, holds
   where it is. Neither turns oxblood any more, which is the whole point: oxblood is the
   focus ring's, and a heading that borrowed it read as a second kind of mark. Colour
   only, so nothing moves; focus keeps the site's outline. */
.p-head .stamp a{transition:color .14s ease}
.p-head .stamp a:hover{color:var(--ink)}
#idz-read-next a{transition:color .14s ease}
#idz-read-next a:hover{color:var(--ink)}

/* ---- older and newer in the section, above Read next --------------------------
   A module of its own, so it sits on the page's one rhythm: the rule, var(--flow) to
   the labels' capitals, and var(--flow) from the titles' last baseline to the next rule.
   Older keeps the left and newer the right even when the other is missing; on a phone
   they stack, both on the text's left edge. The title is a card headline's size, and
   takes the cards' underline on hover. */
.idz-adj{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-grid);align-items:start}
.idz-adj a{display:block}
.idz-adj-older{grid-column:1}
.idz-adj-newer{grid-column:2;text-align:right}
.idz-adj .rubric{margin-bottom:var(--s1);text-box:trim-start cap alphabetic}
.idz-adj-title{display:block;font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.012em;
  text-wrap:balance;font-size:clamp(1.14rem,1.5vw,1.32rem);font-variation-settings:'opsz' 22;color:var(--ink);
  text-box:trim-end cap alphabetic}
.idz-adj a:hover .idz-adj-title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em}
/* The title is trimmed at its baseline, so the ring is pushed below the descenders. */
.idz-adj a:focus-visible{outline-offset:calc(3px + .3em)}
@media(max-width:680px){
  .idz-adj{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .idz-adj-newer{grid-column:1;text-align:left}
}

/* ---- the subscribe band, every page ---------------------------------------
   Inline, never a modal: the brand strategy rules out a newsletter pop-up. */
.idz-band{border-top:1px solid var(--rule);background:var(--tint)}
/* A module like any other, so var(--flow) inside its rules. var(--s7) is the same
   68px on a desktop but 46px on a phone, where every module has 30. */
.idz-band-in{display:grid;gap:var(--s5);padding-block:var(--flow);align-items:center}
@media(min-width:820px){.idz-band-in{grid-template-columns:1fr 1fr;gap:var(--s7)}}
.idz-band-say h2{font-family:var(--display);font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2.1rem);margin:0;font-variation-settings:'opsz' 36}
.idz-band-say p{font-family:var(--text);font-size:15.5px;line-height:1.6;
  color:var(--ink-soft);margin:var(--s3) 0 0;max-width:48ch}
/* Measured to the letters: the heading's capitals start on the band's padding and the
   last line ends on it, as they do in the other ruled sections. */
.idz-band-say h2{text-box:trim-start cap alphabetic}
.idz-band-say p:last-child{text-box:trim-end cap alphabetic}
/* The field and its button: see "an address and its button", further down. */

/* ---- a way through, at the foot of a page that has been arguing its case ---- */
.idz-cta{margin:var(--s7) 0 0;text-align:center}
/* Mid-page it closes the section above it: var(--s4) under that section's last line,
   against the next heading's 1.6em, and on the column's left edge like that text. With
   var(--s7) above it read as the opening of the section below. */
.body > .idz-cta:not(:last-child){margin-top:var(--s4);text-align:left}
.idz-cta .btn{font-size:12.5px;padding:var(--s3) var(--s6)}
/* On the practice page the intake form's button runs the column's full width, like the
   programmes box's button, at its own size. */
.idz-cta--wide a.btn{display:block;width:100%;text-align:center}

/* ---- the intake form ------------------------------------------------------- */
/* .idz-intake takes its rule and spacing from "sections in a page". */
/* The second selector, and margin:0 on the label, undo the form plugin's own sheet,
   which pads each field, rules between them and spaces the label; a visitor is never
   sent that sheet, the owner is, and the form must measure the same for both. */
.idz-intake .acf-field,.idz-intake .acf-fields > .acf-field{margin:0 0 var(--s4);padding:0;border:0}
.idz-intake .acf-field .acf-label label{margin:0}
.idz-intake .acf-field p.description{margin-top:0;color:var(--ink)}
.idz-intake .acf-label label{font-family:var(--sans)!important;font-size:11px!important;
  font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)!important}
.idz-intake .acf-field input[type=text],.idz-intake .acf-field input[type=email],.idz-intake .acf-field select,
.idz-intake .acf-field textarea{width:100%;max-width:none;box-sizing:border-box;font-family:var(--sans);font-size:15px;
  line-height:1.4;margin:0;padding:var(--s2) var(--s3);background:var(--paper);color:var(--ink);
  border:1px solid var(--ink);border-radius:0;box-shadow:none}
.idz-intake .acf-field textarea{font-family:var(--text);font-size:12pt;line-height:1.6;min-height:9rem;resize:vertical}
/* Blocks, not words on a line of text, which carried the line's descent under the box
   and put the next label further down than every other. */
.idz-intake .acf-field input[type=text],.idz-intake .acf-field input[type=email],.idz-intake .acf-field select,
.idz-intake .acf-field textarea{display:block}
/* The dropdowns are the editor form's dropdown (see .idz-fb select): the same box, the
   same arrow, drawn the same on every screen. The selectors carry .acf-field so they
   also outrank the form plugin's own sheet, which the owner's browser is sent. */
.idz-intake .acf-field select{appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
  linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:var(--s6)}
.idz-intake .acf-field input:focus,.idz-intake .acf-field select:focus,.idz-intake .acf-field textarea:focus{
  outline:2px solid var(--accent);outline-offset:-2px}
/* The intake page reads as a page, not as a login box. Prose sets to the ordinary
   measure and to the left; only the form inside it is a form. */
.idz-intake-page .measure.body{max-width:var(--measure,34rem)}
.idz-intake-page .measure.body > p{text-align:left}
/* ACF ships this button with no styling of its own once its stylesheet is scoped
   out, which leaves the browser default: a grey box with an outset border. It runs
   the form's full width, the fields' width, with its label on the middle. */
.idz-intake .acf-form-submit input[type=submit],
.idz-intake .acf-button,
.idz-intake input[type=submit]{
  appearance:none;-webkit-appearance:none;
  font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;line-height:1.6;
  padding:var(--s2) var(--s4);border:1px solid var(--ink);border-radius:0;
  background:var(--ink);color:var(--paper);cursor:pointer;display:block;width:100%;
  text-align:center;transition:background .12s,border-color .12s,color .12s}
/* It used to invert to paper on hover, which was a fourth answer to the gesture that
   every other button on the site answers by darkening. It darkens now, and holds a step
   darker again while it is held. The timing is the site's .12s, not its own .15s ease. */
.idz-intake .acf-form-submit input[type=submit]:hover,
.idz-intake .acf-button:hover,
.idz-intake input[type=submit]:hover{background:var(--ink-soft);border-color:var(--ink-soft);color:var(--paper)}
.idz-intake .acf-form-submit input[type=submit]:active,
.idz-intake .acf-button:active,
.idz-intake input[type=submit]:active{background:var(--ink-press);border-color:var(--ink-press);color:var(--paper)}
.idz-intake .acf-form-submit input[type=submit]:focus-visible,
.idz-intake .acf-button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* The yes/no switch arrives as a stock control. It is set as a plain box, which is what
   the rest of the form is made of: see "the intake's consent", further down. */
.idz-intake .acf-field-true-false .message{font-family:var(--text);font-size:15px;line-height:1.55;color:var(--ink-soft)}
.idz-intake .acf-field-true-false .acf-switch{display:none}
/* Required marks should be quiet, not shouted in red. */
.idz-intake .acf-required{color:var(--ink-faint);font-weight:400}

/* ---- the account -----------------------------------------------------------
   Replaces the membership plugin's cards. Same grid and rules as the rest of
   the site so a reader does not feel handed to a different piece of software. */
.idz-acct-grid{display:grid;gap:var(--s5);grid-template-columns:1fr}
/* The page runs the full width of the .wrap, and the grid's outer edges sit on its
   edges. minmax(0,1fr), because a long email address would otherwise widen its own
   card and leave the columns unequal. A client's third card: across both columns on
   its own row while there are two, one of three from 1100px. */
@media(min-width:780px){
  .idz-acct-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .idz-acct-grid--3 > .idz-acct-card:nth-child(3){grid-column:1/-1}
}
@media(min-width:1100px){
  .idz-acct-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .idz-acct-grid--3 > .idz-acct-card:nth-child(3){grid-column:auto}
}
.idz-acct-dl dd{overflow-wrap:anywhere}
/* The page's own line under its title is centred with the title. Left, it was the
   only thing on the page set to the left edge of the .wrap under a centred heading. */
.body > p:has(+ :is(.idz-account,.idz-workspace)){max-width:var(--measure);margin-inline:auto;text-align:center}
/* The workspace's line saying nothing has arrived yet is the second of those lines, and
   stands on the same centre. Set left, it put a second axis straight under the first. */
.idz-workspace > p:first-child:not([class]){max-width:var(--measure);margin-inline:auto;text-align:center}
/* Every callout on the workspace is one width: the crisis box's, the text measure. The
   booking notice ran the full width of the page, 1162.6px, over a crisis box of 614.4. */
.idz-workspace .idz-booking-msg{max-width:var(--measure-len)}
.idz-acct-card{border:1px solid var(--rule-ink);padding:var(--s5);background:var(--paper)}
.idz-acct-card h3{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 var(--s4)}
/* One baseline per row. align-self on the label alone left the label in a baseline
   group of its own, 4px above the value beside it. */
.idz-acct-dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s4);align-items:baseline}
.idz-acct-dl dt{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);align-self:baseline}
.idz-acct-dl dd{margin:0;font-family:var(--text);font-size:16px;line-height:1.4;color:var(--ink)}
.idz-acct-note{font-family:var(--text);font-size:15.5px;line-height:1.6;color:var(--ink-soft);
  margin:var(--s4) 0 0;max-width:46ch}
.idz-acct-acts{margin:var(--s5) 0 0;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);
  font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
/* The border is the underline. .body a drew a second one under it. */
.idz-acct-acts a{color:var(--ink-soft);border-bottom:1px solid var(--rule-ink);padding-bottom:2px;text-decoration:none}
.idz-acct-acts a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.idz-acct-acts a:active{border-bottom-width:2px}
.idz-account .idz-cta{text-align:left;margin-top:var(--s5)}

/* ---- the sections band ---------------------------------------------------
   One per section, three pieces, a rule and a way through to the rest. Set to
   the left rather than centred, so it reads as a department rather than as
   another announcement in the middle of the page. */
.idz-sec + .idz-sec{padding-top:var(--flow)}
/* Top aligned, not baseline. Baseline puts the note's FIRST line on the heading's
   baseline, so a two line note hangs below the block and reads as misaligned. From
   the top the cap heights sit together, which is what the eye is checking. */
/* The note sits beside the heading and is centred on it. It was capped at 52ch and
   pinned to the top, so a sentence that fitted the row in one line was folded into two
   and hung from the heading's cap line. It now takes the width the row has, wraps only
   when it must, and its letters are centred on the heading's. */
.idz-sec-hdr{text-align:left;display:flex;align-items:center;gap:var(--s5)}
/* The band's heavy rule is the rule between modules, var(--flow) from the last line
   above it and var(--flow) over the heading, as every module divider is. It used to be
   the header's own border, 14px over the heading, under the hairline every module
   draws, so each band after the first opened on two rules with an empty strip between
   them. The space under the heading is the band header's --gap-hdr alone: a margin of
   the same size on top of it gave these bands twice the gap of every other header.
   The account page uses the same header over its cards, and takes the same rule. */
.mod.idz-sec:has(> .idz-sec-hdr),.idz-account{border-top:2px solid var(--rule-ink)}
.body > * + .idz-account{margin-top:var(--flow)}
.body > .idz-account:last-child{padding-bottom:0}
.idz-sec-hdr h2{font-family:var(--display);font-weight:400;margin:0;
  font-size:clamp(1.3rem,2.6vw,1.95rem);line-height:1.05;font-variation-settings:'opsz' 40}
.idz-sec-hdr h2 a{color:var(--ink)}
.idz-sec-hdr h2 a:hover{color:var(--ink)}
.idz-sec-hdr h2{flex:0 0 auto}
.idz-sec-hdr .sub{margin:0;flex:1 1 22ch;font-family:var(--text);font-size:14.5px;
  line-height:1.5;color:var(--ink-soft)}
/* The heading's capitals and the note's first line both start on the top of the
   header, not on their line boxes, so the rule above sits var(--flow) from the letters,
   the same as the way through at the foot of the band sits over the next rule. */
.idz-sec-hdr h2{text-box:trim-start cap alphabetic}
.idz-sec-hdr .sub{text-box:trim-both cap alphabetic}
.idz-sec-more{text-box:trim-end cap alphabetic}
.idz-sec-more{margin:var(--s4) 0 0;font-family:var(--sans);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase}
.idz-sec-more a{color:var(--ink-soft);border-bottom:1px solid var(--rule-ink);padding-bottom:2px;text-decoration:none}
.idz-sec-more a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.idz-sec-more a:active{border-bottom-width:2px}
@media(max-width:679px){
  .idz-sec-hdr{display:block}
  .idz-sec-hdr .sub{margin-top:var(--s2);text-box:trim-start cap alphabetic}
}

/* ---- adverts -----------------------------------------------------------------
   Booked from wp-admin under Adverts. An unbooked position prints no markup at
   all, so there is nothing here to collapse. The label is part of the unit: an
   advert on this site is never dressed as writing. */
.promo{padding-block:var(--flow);border-block:1px solid var(--rule)}
.promo+.promo{border-top:0}
.promo-in{display:grid;gap:var(--s4)}
.promo--art .promo-in{grid-template-columns:1fr}
.promo-art{overflow:hidden;background:var(--tint)}
.promo-art img{display:block;width:100%;height:100%;object-fit:cover}
.promo-mark{display:flex;align-items:center;gap:var(--s3);margin:0 0 var(--s3);
  font-family:var(--sans);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase}
/* Only the word Advert wears the box. This was written as :first-child, which put
   the box round the kicker on any advert that carries no Advert label, and paid it
   the wrong colour into the bargain. */
.promo-label{color:var(--ink-faint);border:1px solid var(--rule-ink);
  padding:3px 7px 2px;line-height:1}
.promo-kicker{color:var(--accent);line-height:1}
.promo-head{font-family:var(--display);font-weight:400;margin:0;
  font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.12;font-variation-settings:'opsz' 32}
/* The div carries the type as well, so an advert written before the editor
   existed, whose body is bare text with no paragraph around it, still sets. */
.promo-body{margin:var(--s3) 0 0;max-width:54ch;
  font-family:var(--text);font-size:15.5px;line-height:1.6;color:var(--ink-soft)}
.promo-body p{font-family:var(--text);font-size:15.5px;line-height:1.6;color:var(--ink-soft);margin:0}
.promo-body p+p{margin-top:var(--s2)}
.promo-body ul,.promo-body ol{margin:var(--s2) 0 0;padding-left:1.15em;
  font-family:var(--text);font-size:15.5px;line-height:1.6;color:var(--ink-soft)}
.promo-body li{margin:0 0 4px}
.promo-body h3,.promo-body h4{font-family:var(--sans);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-faint);margin:var(--s3) 0 var(--s1)}
.promo-body a{color:var(--accent);text-decoration:underline}
.promo-act{margin:var(--s4) 0 0}
@media(min-width:720px){
  .promo--art .promo-in{grid-template-columns:minmax(0,38%) minmax(0,1fr);
    gap:var(--s5);align-items:center}
}

/* ---- an advert someone has dressed ------------------------------------------
   Every selector below carries a class that inc/block-styling.php prints only once an
   editor has chosen something, so an advert nobody has touched keeps the rules above
   and takes none of these. The heights repeat the numbers in idz_blk_heights(): the
   two lists move together or neither is true. */

/* The ground, and the type colour worked out from it rather than chosen. The rule
   above and below is painted in the ground instead of being taken away, so a coloured
   advert stands exactly as tall as a plain one. */
.promo.idz-blk-bg{background:var(--idz-blk-bg);border-block-color:var(--idz-blk-bg);
  --promo-ink:var(--idz-blk-ink)}
/* Words lying over a picture take the same colour. Where no ground was chosen the
   wash beneath them falls back to the site's ink, so they have to come out pale. */
.promo.idz-blk-fill.idz-blk-words-over{--promo-ink:var(--idz-blk-ink,var(--on-dark))}
/* One colour for the whole unit. The softened ink below is a refinement that means
   something on paper and nothing on a colour somebody picked, and the headline, which
   states no colour at all, would otherwise inherit the page's ink and vanish. */
:is(.promo.idz-blk-bg,.promo.idz-blk-fill.idz-blk-words-over)
  :is(.promo-copy,.promo-body,.promo-body p,.promo-body ul,.promo-body ol,.promo-body h3,.promo-body h4){color:var(--promo-ink)}
/* The kicker's oxblood and the label's ink border still read on a pale ground and are
   gone on a dark one, so only the dark case gives them up. The label keeps its box and
   its word: an advert says Advert whatever colour it has been painted. */
:is(.promo.idz-blk-dark,.promo.idz-blk-fill.idz-blk-words-over)
  :is(.promo-kicker,.promo-label,.promo-body a){color:var(--promo-ink)}
:is(.promo.idz-blk-dark,.promo.idz-blk-fill.idz-blk-words-over) .promo-label{border-color:currentColor}
/* The button is ink on ink the moment the ground is dark, and lost over a photograph,
   so it turns itself inside out: the type colour becomes the block, the ground becomes
   the lettering, and hovering empties it again. */
:is(.promo.idz-blk-dark,.promo.idz-blk-fill.idz-blk-words-over) :is(a.btn,a.btn:visited){
  background:var(--promo-ink);border-color:var(--promo-ink);color:var(--idz-blk-bg,var(--ink))}
:is(.promo.idz-blk-dark,.promo.idz-blk-fill.idz-blk-words-over) a.btn:hover{
  background:transparent;border-color:var(--promo-ink);color:var(--promo-ink)}
/* Oxblood on a dark ground is not a focus ring anyone can follow. */
:is(.promo.idz-blk-dark,.promo.idz-blk-fill.idz-blk-words-over) a:focus-visible{outline-color:var(--promo-ink)}

/* Anything below that gives the block a height, or a picture under its words, makes it
   a grid, and .wrap centres itself with automatic side margins, which a grid item reads
   as an instruction not to stretch: the column collapsed to the width of its own
   longest line. Stating the width leaves those margins nothing to take, and on a screen
   wider than the measure they go back to centring it. */
.promo:is(.idz-blk-hd-short,.idz-blk-hd-medium,.idz-blk-hd-tall,.idz-blk-hd-screen,
  .idz-blk-hp-short,.idz-blk-hp-medium,.idz-blk-hp-tall,.idz-blk-hp-screen,.idz-blk-fill) > .wrap{width:100%}

/* The named heights. min-height and never height, so an advert carrying more words
   than the name allows for grows rather than cropping them. It becomes a grid at the
   same time, which is what puts its contents in the middle of that height instead of
   at the top of it. The two properties are read further down by a filled block whose
   words sit under the picture: they say that a height was asked for on this screen,
   which is the one thing that selector cannot see for itself. */
@media(min-width:681px){
  .promo:is(.idz-blk-hd-short,.idz-blk-hd-medium,.idz-blk-hd-tall,.idz-blk-hd-screen){
    display:grid;align-content:center;--promo-band:minmax(180px,1fr);--promo-pic:absolute}
  .promo.idz-blk-hd-short{min-height:260px}
  .promo.idz-blk-hd-medium{min-height:400px}
  .promo.idz-blk-hd-tall{min-height:560px}
  .promo.idz-blk-hd-screen{min-height:100svh}
}
@media(max-width:680px){
  .promo:is(.idz-blk-hp-short,.idz-blk-hp-medium,.idz-blk-hp-tall,.idz-blk-hp-screen){
    display:grid;align-content:center;--promo-band:minmax(180px,1fr);--promo-pic:absolute}
  .promo.idz-blk-hp-short{min-height:260px}
  .promo.idz-blk-hp-medium{min-height:400px}
  .promo.idz-blk-hp-tall{min-height:560px}
  .promo.idz-blk-hp-screen{min-height:100svh}
}

/* Filled: the featured image stops being a column beside the words and becomes the
   advert's own picture, edge to edge. The block's padding moves inward to the wrap, so
   the picture reaches the top and the bottom while the words keep the same rhythm they
   have everywhere else. */
.promo.idz-blk-fill{position:relative;padding-block:0}
.promo.idz-blk-fill > .wrap{padding-block:var(--flow)}
.promo.idz-blk-fill .promo-copy{max-width:56ch}
.promo-fill{overflow:hidden;background:var(--tint)}
.promo-fill img{display:block;width:100%;height:100%;object-fit:cover}
/* Words over the picture sit at the foot of the block on a wash made from the block's
   own ground, never a fixed black that would grey out a colour somebody chose. At the
   foot rather than in the middle, because a wash that is solid exactly where the words
   are is the only kind that holds on a photograph nobody has seen yet. */
.promo.idz-blk-fill.idz-blk-words-over{align-content:end}
.promo.idz-blk-fill.idz-blk-words-over > .promo-fill{position:absolute;inset:0}
/* The wash is on the box that holds the words, so it is exactly as tall as they are.
   Laid over the whole block instead, it was solid across the foot and transparent
   across the top, which is where a headline on a set height actually stands. */
.promo.idz-blk-fill.idz-blk-words-over > .wrap{position:relative;z-index:1;
  background:linear-gradient(to top,var(--idz-blk-bg,var(--ink)) 0,
    var(--idz-blk-bg,var(--ink)) calc(100% - var(--s7)),
    color-mix(in srgb,var(--idz-blk-bg,var(--ink)) 62%,transparent) calc(100% - var(--s7) / 2),transparent);
  background-clip:padding-box}
/* Words under it: a band of picture across the top and the words beneath it. Where a
   height was asked for, the band takes whatever the words leave and the picture is
   lifted out of the flow, so that what the photograph happens to measure cannot
   decide how tall the advert comes out; a Short advert carrying a tall photograph was
   arriving three times the height it was asked for. Where no height was asked for
   there is nothing to share out, the picture stays in the flow, and Automatic means
   what it says: the block is as tall as the picture and the words together. */
.promo.idz-blk-fill.idz-blk-words-below{display:grid;grid-template-rows:var(--promo-band,auto) auto}
.promo.idz-blk-fill.idz-blk-words-below > .promo-fill{position:relative}
.promo.idz-blk-fill.idz-blk-words-below > .promo-fill img{position:var(--promo-pic,static);inset:0}

/* Off on one screen. display:none leaves no gap where the advert would have stood,
   and since the picture is lazy and now has no box that can come near the viewport, a
   browser that honours that never fetches it. Important, because a filled advert sets
   a display of its own above and hiding has to beat whatever was chosen there. */
@media(max-width:680px){.promo.idz-blk-off-p{display:none!important}}
@media(min-width:681px){.promo.idz-blk-off-d{display:none!important}}

/* ---- the feedback form ------------------------------------------------------ */
/* Its rule, and the space either side of it, come from "sections in a page" with the
   signup, the replies and the paywall: var(--flow) from the last line above the rule
   and var(--flow) from the rule to the first line below it, measured to the letters.
   text-box trims the half-leading and the space above the capitals off the first
   line, so the space above a heading is the same number as the space below a button.
   A browser without text-box shows a few pixels more above, and nothing else. */
/* Every section in a page opens on the same heading. The feedback form's, the
   paywall's and the Letter's were three sizes in two weights, two of them on one page.
   Late in the file, so it outranks .body h2 and .body h3 by order. */
:is(.idz-feedback-form,.signup,.paywall) > :is(h2,h3){font-family:var(--display);font-weight:400;
  font-size:clamp(1.35rem,2.2vw,1.8rem);line-height:1.15;margin-block:0;font-variation-settings:'opsz' 32}
.idz-fb-blurb{font-family:var(--text);font-size:15.5px;line-height:1.6;color:var(--ink-soft);
  margin:var(--s3) 0 var(--s5);max-width:52ch}
.idz-fb-row{margin:0 0 var(--s4)}
.idz-fb-row label{display:block;font-family:var(--sans);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:var(--s2)}
.idz-fb input[type=text],.idz-fb input[type=email],.idz-fb select,.idz-fb textarea{
  width:100%;box-sizing:border-box;font-family:var(--sans);font-size:15px;
  padding:var(--s2) var(--s3);background:var(--paper);color:var(--ink);
  border:1px solid var(--ink);border-radius:0;box-shadow:none;line-height:1.4}
.idz-fb textarea{font-family:var(--text);font-size:12pt;line-height:1.65;resize:vertical;min-height:10rem}
/* Blocks, not words on a line. A textarea is inline by default, so it sat on a line
   of text and carried that line's descent below it, 8px that no other field had. */
.idz-fb input[type=text],.idz-fb input[type=email],.idz-fb select,.idz-fb textarea{display:block}
.idz-fb input:focus,.idz-fb select:focus,.idz-fb textarea:focus{
  outline:2px solid var(--accent);outline-offset:-2px}
.idz-fb select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
  linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:var(--s6)}
/* the box that only appears once "Something else" is chosen */
.idz-fb-other{animation:idz-fb-in .18s ease-out}
@keyframes idz-fb-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.idz-fb-other{animation:none}}
/* The button and the note about replies share one row, the note beside the button
   and centred on it. The note takes the whole width left beside the button and runs
   to two lines at most, 36.8px, inside the button's 41.5px, so it never makes the row
   taller than the button. Where there is not room beside it (a phone), it wraps to
   its own line under the button rather than stacking three or four lines up the side. */
/* The button sits as far under the message box as every label sits under the field
   above it: the row's own margin, var(--s4), and nothing more, because a label's
   capitals now start at the top of its box (see "one form rhythm", below). The 5px
   added here for the label's leading collapsed into the row's margin below 640px,
   where the form is not a grid, and left the button closer than every label. */
.idz-fb-submit{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5)}
.idz-fb-note{font-family:var(--sans);font-size:11.5px;line-height:1.6;color:var(--ink-faint);
  margin:0;flex:1 1 300px;text-wrap:pretty}
/* The note ends at its baseline, like every other last line before a rule. Beside the
   button, from 681px, where the button no longer takes the whole row, the top is
   trimmed to the capitals as well, so the words sit exactly centred on the button.
   Under the button, on a phone, the top is left alone and the note sits where it did. */
.idz-fb-note{text-box:trim-end cap alphabetic}
@media(min-width:681px){.idz-fb-note{text-box:trim-both cap alphabetic}}

/* ---- one form rhythm ---------------------------------------------------------
   In every form the gap from a field to the next label is the gap from the last field
   to the button: the row's margin. A label's capitals sat 5px inside its line box, and
   a button's edge does not, so each label read 5px further from the field above it
   than the button did. The label's box now starts at its capitals. */
.idz-fb-row label,.idz-login :is(.login-username,.login-password) label,.idz-intake .acf-label label,
.idz-journal-label,.idz-msg-label,.idz-searchform-label{text-box:trim-start cap alphabetic}
.idz-intake .acf-label label{display:block}
/* A label sits var(--s2) over its field, in every form. The intake's sat on the box
   with nothing between, and the sign-in form's 6px above it. */
.idz-intake .acf-field > .acf-label{margin:0 0 var(--s2)}
/* A textarea is inline by default: it sat on a line of text and carried that line's
   descent, about 8px, under its box, which no other field had. */
.idz-journal-form textarea,.idz-msg-form textarea,.idz-comment-field textarea{display:block}
.idz-fb-notice{font-family:var(--sans);font-size:14px;line-height:1.6;padding:var(--s3) var(--s4);
  border:1px solid var(--rule-ink);background:var(--tint);margin:0 0 var(--s5)}
.idz-fb-notice--ok{border-left:3px solid var(--ink)}
.idz-fb-notice--no{border-left:3px solid var(--accent);background:var(--paper)}
/* The form sits inside page content, where .body p+p sets a 1.2em top margin on
   every paragraph after the first. In two columns that drops the second field a
   line below the first. Two classes, so this outranks it wherever it is read. */
.body .idz-fb>p{margin-top:0}
@media(min-width:640px){
  .idz-fb{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s5);align-items:start}
  .idz-fb-row:nth-of-type(3),.idz-fb-other,
  .idz-fb-row:has(textarea),.idz-fb-submit,.idz-fb-note{grid-column:1 / -1}
}

/* ------------------------------------------------------------------
   16. The session ledger
   A client's own account of sessions had. Filled marks came out of the
   prepaid block and are not refundable; outlined marks stayed in it.
   That is the only distinction the eye has to make, so it is the only
   one the styling draws.
   ------------------------------------------------------------------ */

.idz-ledger-sum{display:flex;gap:var(--s6);list-style:none;margin:0 0 var(--s4);padding:0;flex-wrap:wrap}
.idz-ledger-sum li{display:flex;flex-direction:column;gap:2px}
.idz-ledger-fig{font-family:var(--display);font-weight:700;font-size:clamp(30px,4.4vw,46px);line-height:1;color:var(--ink)}
.idz-ledger-cap{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.idz-ledger-left .idz-ledger-fig{color:var(--accent)}
.idz-ledger-worth{max-width:var(--measure);margin:0 0 var(--s5);color:var(--ink-soft)}

.idz-ledger-cals{display:flex;gap:var(--s5);flex-wrap:wrap;margin:0 0 var(--s4)}
/* Two classes: the ledger sits in the page's .body, whose h3 rule set this small
   label at 23px with a 37px top margin. */
.idz-ledger .idz-ledger-cal-name{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);line-height:1.4;margin:0 0 var(--s2);font-weight:600}
/* One cell size for every cell, square. The columns and the blank cells were 1.9em of
   16px and the day cells 1.9em of 11px, so the first week's row stood taller than the
   rest and a marked day was drawn as an ellipse. */
.idz-ledger-grid{--cell:1.9rem;display:grid;grid-template-columns:repeat(7,var(--cell));grid-auto-rows:var(--cell);gap:2px}
.idz-ledger-dow{font-family:var(--sans);font-size:10px;color:var(--ink-faint);text-align:center;
  line-height:var(--cell);text-transform:uppercase}
.idz-ledger-pad{height:var(--cell)}
.idz-ledger-day{font-family:var(--sans);font-size:11px;line-height:var(--cell);text-align:center;
  color:var(--ink-faint);border-radius:50%;position:relative}
.idz-ledger-day--has{font-weight:600}

/* Filled: the session came out of the block. */
.idz-ledger-day--attended{background:var(--ink);color:var(--paper)}
.idz-ledger-day--missed,
.idz-ledger-day--late{background:var(--accent);color:var(--paper)}
/* Outlined: the session stayed in the block. */
.idz-ledger-day--waived,
.idz-ledger-day--excused,
.idz-ledger-day--clinician{box-shadow:inset 0 0 0 1px var(--rule-ink);color:var(--ink)}
.idz-ledger-day--open{box-shadow:inset 0 0 0 1px var(--rule);color:var(--ink-faint)}

.idz-ledger-key{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);list-style:none;margin:0 0 var(--s5);padding:0;
  font-family:var(--sans);font-size:11px;color:var(--ink-soft)}
.idz-ledger-key li{display:flex;align-items:center;gap:6px}
.idz-ledger-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}
.idz-ledger-dot--attended{background:var(--ink)}
.idz-ledger-dot--missed,.idz-ledger-dot--late{background:var(--accent)}
.idz-ledger-dot--waived,.idz-ledger-dot--excused,.idz-ledger-dot--clinician{box-shadow:inset 0 0 0 1px var(--rule-ink)}

.idz-ledger-list{list-style:none;margin:0 0 var(--s4);padding:0;border-top:1px solid var(--rule)}
/* The page's .body list rules outrank one class: they indented the key and the rows
   1.25em off the column and put .35em of margin round every row. */
.idz-ledger :is(.idz-ledger-key,.idz-ledger-list){padding-left:0}
/* The key sits over the list's top rule by the row's own padding, var(--s3), which is
   what the rule has under it to the first row's letters. At var(--s5) the rule stood
   36.3px under the key and 19.2 over the row on a desktop. */
.idz-ledger .idz-ledger-key{margin:0 0 var(--s3)}
.idz-ledger .idz-ledger-list{margin:0 0 var(--s4)}
.idz-ledger :is(.idz-ledger-key li,.idz-ledger-row){margin:0}
.idz-ledger-row{display:grid;grid-template-columns:minmax(10em,14em) minmax(7em,10em) 1fr;gap:var(--s3);
  padding:var(--s3) 0;border-bottom:1px solid var(--rule);align-items:baseline}
.idz-ledger-when{font-family:var(--sans);font-size:13px;color:var(--ink)}
.idz-ledger-what{font-family:var(--sans);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.idz-ledger-row--attended .idz-ledger-what{color:var(--ink)}
.idz-ledger-row--missed .idz-ledger-what,
.idz-ledger-row--late .idz-ledger-what{color:var(--accent)}
.idz-ledger-row--waived .idz-ledger-what,
.idz-ledger-row--excused .idz-ledger-what,
.idz-ledger-row--clinician .idz-ledger-what{color:var(--ink-soft)}
.idz-ledger-row--open .idz-ledger-what{color:var(--ink-faint)}
.idz-ledger-money{font-size:14px;color:var(--ink-soft)}
.idz-ledger-foot{max-width:var(--measure);font-size:14px;color:var(--ink-soft)}

@media (max-width:640px){
  .idz-ledger-row{grid-template-columns:1fr;gap:2px}
  .idz-ledger-sum{gap:var(--s5)}
}

/* ------------------------------------------------------------------
   18. Signed out because the account was opened elsewhere
   ------------------------------------------------------------------ */

.idz-session-note{border-left:3px solid var(--accent);background:var(--tint);
  padding:var(--s4);margin:0 0 var(--s5);max-width:var(--measure)}
.idz-session-note p{margin:0 0 var(--s3);font-size:15px;line-height:1.55}
.idz-session-note p:last-child{margin-bottom:0;color:var(--ink-soft);font-size:14px}
.idz-session-note strong{color:var(--accent)}

/* ------------------------------------------------------------------
   19. The bookshop
   ------------------------------------------------------------------ */

/* The shelf breaks out of the text measure to the column it sits in. It was sized from
   100vw, which counts the scrollbar, so on a desktop under about 1030px it ran 7.5px
   past the gutter on each side. The article is the column's width, and a container, so
   the shelf reads that width instead. */
article:has(.idz-books){container-type:inline-size}
.idz-books{--shelf:min(920px,100cqw);
  display:grid;gap:var(--s7);width:var(--shelf);max-width:var(--shelf);
  margin:var(--s7) 0 var(--s7) calc(50% - (var(--shelf) / 2))}
.idz-book{display:grid;grid-template-columns:minmax(210px,300px) 1fr;gap:var(--s6);
  align-items:start;padding-bottom:var(--s7);border-bottom:1px solid var(--rule)}
.idz-book--bare,.idz-book--single{grid-template-columns:1fr}
.idz-book:last-child{border-bottom:0;padding-bottom:0}
.idz-book-cover img{display:block;width:100%;height:auto;box-shadow:0 2px 14px rgba(15,13,11,.14)}
.idz-book-title{font-family:var(--display);font-weight:700;font-size:clamp(22px,3vw,30px);
  line-height:1.15;margin:0 0 var(--s2)}
/* Two classes: the shelf is printed in the page's .body, whose h2 rule gave the title a
   48px top margin, so it started 52px below the top of its cover. */
.idz-book .idz-book-title{font-size:clamp(22px,3vw,30px);margin:0 0 var(--s2);text-box:trim-start cap alphabetic}
.idz-book-by{font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 var(--s4)}
.idz-book-blurb{max-width:var(--measure);margin:0 0 var(--s3);color:var(--ink-soft)}
.idz-book-facts{font-family:var(--sans);font-size:13px;color:var(--ink);margin:0 0 var(--s5);font-weight:600}
/* The field and its button: see "an address and its button", further down. */
.idz-book-buy{max-width:34em}
.idz-book-note{font-size:13px;color:var(--ink-faint);margin:var(--s4) 0 0;max-width:var(--measure)}

@media (max-width:640px){
  .idz-book{grid-template-columns:1fr;gap:var(--s4)}
}

/* ------------------------------------------------------------------
   20. Covers, and enlarging one
   ------------------------------------------------------------------ */

.idz-book-cover{display:flex;gap:var(--s4);align-items:flex-start;flex-wrap:wrap}
.idz-book-zoom{display:block;flex:1 1 0;min-width:110px;max-width:none;text-decoration:none;
  border:0;cursor:zoom-in;position:relative}
/* The cover is shown whole, never cropped: it is the artwork for sale. The shadow is
   drawn round the picture, not round its box, so a spare band in the frame below does
   not read as a margin printed on the cover. */
.idz-book-zoom img{display:block;width:100%;height:auto;
  background:transparent;box-shadow:none;filter:drop-shadow(0 2px 7px rgba(15,13,11,.16));
  transition:filter .18s ease,transform .18s ease}
/* Where the covers stand beside the text, one frame for every cover, 2:3, so each row
   of the list is the same height; each upload's own proportion made covers of three
   heights in one list. The cover stands at the top of the frame, level with the title
   beside it. Once the row stacks, the title comes under the covers, and a frame's spare
   band stood between the two: The Quiet Room's cover is 213/300, and its title sat
   39.5px under it against 24 for the other two. There each cover keeps its own shape.
   No aspect-ratio is set below this width, so the width and height attributes give it:
   aspect-ratio:auto would drop them, and these images carry sizes="auto", which sizes
   them to WordPress's contain-intrinsic-size of 3000px by 1500px. */
@media (min-width:821px){
  .idz-book-zoom img{aspect-ratio:2/3;object-fit:contain;object-position:50% 0}
}
.idz-book-zoom:hover img,.idz-book-zoom:focus-visible img{box-shadow:none;filter:drop-shadow(0 5px 11px rgba(15,13,11,.26));transform:translateY(-2px)}
.idz-book-zoom:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* display:grid beats the hidden attribute's display:none, so say so explicitly.
   Without this the overlay covers the page from the moment it loads. */
.idz-zoom[hidden]{display:none!important}
.idz-zoom{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:clamp(16px,5vw,56px);
  background:rgba(15,13,11,.9);cursor:zoom-out}
.idz-zoom-fig{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;
  align-items:center;gap:var(--s3);cursor:default}
.idz-zoom-fig img{max-width:100%;max-height:78vh;width:auto;height:auto;display:block;
  box-shadow:0 12px 50px rgba(0,0,0,.5)}
.idz-zoom-fig figcaption{font-family:var(--sans);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-dark-soft)}
.idz-zoom-shut{position:absolute;top:clamp(10px,2vw,22px);right:clamp(10px,2vw,22px);
  width:42px;height:42px;font-size:26px;line-height:1;background:transparent;color:var(--on-dark);
  border:1px solid rgba(246,242,234,.35);border-radius:50%;cursor:pointer}
/* On the dark ground the site's hover grey is 2.34:1 and would vanish, so this one empties
   out instead: the hairline comes up to full paper and the cross holds its own. The tint
   it took on hover is the press now. */
.idz-zoom-shut:hover{background:transparent;border-color:var(--on-dark);color:var(--on-dark)}
.idz-zoom-shut:active{background:rgba(246,242,234,.12)}
.idz-zoom-shut:focus-visible{outline:2px solid var(--on-dark);outline-offset:2px}

@media (max-width:820px){
  .idz-book{grid-template-columns:1fr;gap:var(--s5)}
  .idz-book-cover{max-width:340px}
}
/* On a phone the pair of covers runs the width of the column, as the title, the form
   and the rule do. 340px left it 16px short of them at 390. */
@media (max-width:640px){.idz-book-cover{max-width:none}}

/* ------------------------------------------------------------------
   21. The article palette
   Shapes a piece can be built from. .pull, .marginal and .brk already
   existed above; these are the rest. Every one is a core block with a
   class on it, so the writing survives the theme.
   ------------------------------------------------------------------ */

.body .idz-standfirst{font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(1.05rem,1.7vw,1.3rem);line-height:1.45;color:var(--ink-soft);
  margin-block:0 var(--s5);font-variation-settings:'opsz' 40}
/* A standfirst is the opening, so the drop cap belongs to the paragraph after it. */
.single-post .body>.idz-standfirst:first-of-type::first-letter{font-size:inherit;float:none;
  font-family:inherit;font-weight:inherit;padding:0;line-height:inherit}

.body .idz-note{border-left:2px solid var(--accent);background:var(--tint);
  padding:var(--s4) var(--s5);margin-block:var(--s5)}
.body .idz-note p{font-size:11.5pt;line-height:1.62}
.body .idz-note p+p{margin-top:.9em}

.body .idz-def{border-top:1px solid var(--rule-ink);border-bottom:1px solid var(--rule);
  padding-block:var(--s3);margin-block:var(--s5)}
.body .idz-def-term{font-family:var(--sans);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);font-weight:600;margin:0 0 6px}

.body .idz-xchg{margin-block:var(--s5)}
.body .idz-xchg+.idz-xchg{margin-top:var(--s4)}
.body .idz-xchg-q{font-family:var(--sans);font-weight:600;font-size:14.5px;line-height:1.5;
  color:var(--ink);margin:0}
.body .idz-xchg-a{margin-top:.55em}

.body ol.idz-enum{list-style:none;padding-left:0;counter-reset:idz;margin-block:var(--s5)}
.body ol.idz-enum>li{counter-increment:idz;position:relative;padding-left:2.7em;margin-block:1.05em}
.body ol.idz-enum>li::before{content:counter(idz);position:absolute;left:0;top:-.14em;
  font-family:var(--display);font-weight:700;font-size:1.75em;line-height:1;color:var(--accent);
  font-variation-settings:'opsz' 40}

.body .idz-against{margin-block:var(--s5);gap:var(--s5)}
.body .idz-against-h{font-family:var(--sans);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);font-weight:600;margin:0 0 8px}

.body .idz-sources{border-top:1px solid var(--rule);padding-top:var(--s3);margin-top:var(--s6)}
.body .idz-sources h3{font-family:var(--sans);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 .6em;font-weight:600}
.body .idz-sources li{font-size:10.5pt;color:var(--ink-soft);margin-block:.4em}

.body blockquote.idz-epigraph{border-left:0;padding-left:0;text-align:center;
  font-family:var(--display);font-style:italic;font-size:clamp(1.05rem,1.8vw,1.22rem);
  line-height:1.4;margin-block:var(--s6);color:var(--ink)}
.body blockquote.idz-epigraph cite{display:block;margin-top:.85em;font-style:normal;
  font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint)}

.body .is-style-idz-break{border:0;height:auto;text-align:center;margin-block:var(--s6)}
.body .is-style-idz-break::before{content:"/";font-family:var(--display);font-size:1.35rem;
  color:var(--ink-faint);line-height:1}

.body .idz-end::after{content:"/";font-family:var(--display);color:var(--accent);
  font-size:1.2rem;margin-left:.15em}

.body figure.idz-fig{margin-block:var(--s5)}
.body figure.idz-fig figcaption{font-family:var(--sans);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-faint);text-align:right;margin-top:var(--s2)}

@media (max-width:700px){
  .body .idz-against{gap:var(--s4)}
  .body .idz-note{padding:var(--s4)}
}

/* ------------------------------------------------------------------
   22. Who you would be writing to
   Built for more than one. A second clinician is a duplicated block.
   ------------------------------------------------------------------ */

/* Portrait and name together at the top, then the writing at full measure.
   Side by side, a 200px picture left a column of dead paper beside a thousand
   pixels of text, and squeezed the paragraphs into something long and thin. */
.idz-who{margin-block:var(--s5)}
.idz-who-head{display:flex;align-items:center;gap:var(--s4);margin-bottom:var(--s5)}
.idz-who-portrait{flex:0 0 auto;width:clamp(116px,24%,164px)}
.idz-who-portrait:empty{display:none}
.idz-who-id{flex:1 1 auto;min-width:0}
/* A portrait crop, not a square. The source photographs are wide, and squaring
   them puts as much wall in the frame as face. 4:5 keeps the head and shoulders
   and loses the room. */
.idz-who .idz-who-img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  object-position:50% 26%;filter:grayscale(1) contrast(1.05);
  box-shadow:0 2px 16px rgba(15,13,11,.16)}
.idz-who-name{font-family:var(--display);font-weight:700;font-size:clamp(1.45rem,3.4vw,2rem);
  line-height:1.1;margin:0 0 6px}
.idz-who-role{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:600;margin:0}
.idz-who-body p{margin:0}
.idz-who-body p+p{margin-top:1.05em}
.idz-who-note{border-top:1px solid var(--rule);padding-top:var(--s3);margin-top:var(--s4)!important;
  font-size:14px;color:var(--ink-soft)}
/* The note's hairline is var(--s4) from the letters on both sides: the paragraph over
   it ends at its baseline, and the note starts at its capitals. The paragraph's margin
   and leading stood the line 30.2px under the text and var(--s3) over the note. */
.idz-who p:has(+ .idz-who-note){text-box:trim-end cap alphabetic}
.idz-who-note{padding-top:var(--s4);text-box:trim-start cap alphabetic}
@media (max-width:520px){
  .idz-who-head{gap:var(--s3)}
  .idz-who-portrait{width:104px}
}

/* ------------------------------------------------------------------
   23. Visually hidden
   This was missing entirely, so every label meant for a screen reader was
   being read by everybody: "Skip to the writing" at the top of each page,
   the cover labels in the shop, form labels in the portal. Hidden from the
   eye, kept for the reader that needs it.
   ------------------------------------------------------------------ */

.screen-reader-text,.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Except when tabbed to, which is the whole point of a skip link. */
.skip-link:focus,.screen-reader-text:focus{position:fixed!important;top:10px;left:10px;z-index:100000;
  width:auto;height:auto;margin:0;padding:12px 18px;overflow:visible;clip:auto;clip-path:none;
  background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:13px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-radius:2px}

/* ------------------------------------------------------------------
   24. The screens that had no styling at all
   Found by listing every class the theme emits and checking it against
   every rule in every stylesheet. These had none, which is why they came
   out as unaligned boxes: the consent gate a client meets first, the
   worksheet prompt, the booking form, and the rest.
   ------------------------------------------------------------------ */

/* ---- The consent gate: the first thing a client ever sees ---- */
.idz-consent-gate{max-width:var(--measure);margin:var(--s6) auto}
.idz-consent-gate-body{margin-bottom:var(--s5)}
.idz-consent-gate-body h2{font-family:var(--display);font-weight:700;
  font-size:clamp(1.35rem,2.6vw,1.75rem);line-height:1.15;margin:var(--s5) 0 var(--s3)}
.idz-consent-gate-body h2:first-child{margin-top:0}
.idz-consent-gate-body p+p{margin-top:1.1em}
.idz-consent-gate-body ul{padding-left:1.2em;margin-block:1em;list-style:disc}
.idz-consent-gate-body li{margin-block:.4em}

.idz-consent-gate-form{border:1px solid var(--rule-ink);padding:var(--s5);background:var(--tint)}
.idz-consent-gate-agree{display:flex;gap:var(--s3);align-items:flex-start;margin:0 0 var(--s4);
  font-size:15px;line-height:1.55}
.idz-consent-gate-agree input[type=checkbox]{flex:0 0 auto;width:20px;height:20px;margin-top:2px;
  accent-color:var(--accent)}
.idz-consent-gate-agree label{cursor:pointer}
.idz-consent-gate-acts{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;margin:0}
.idz-consent-gate-out{font-family:var(--sans);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint);text-decoration:none;
  border-bottom:1px solid var(--rule);padding-bottom:2px}
.idz-consent-gate-out:hover{color:var(--ink);border-bottom-color:var(--ink)}
.idz-consent-said{font-family:var(--sans);font-size:12px;letter-spacing:.06em;
  color:var(--ink-soft);margin:var(--s3) 0 0}

/* ---- The worksheet ---- */
.idz-display{margin-block:var(--s4)}
.idz-prompt{font-family:var(--display);font-weight:400;font-size:clamp(1.05rem,1.9vw,1.28rem);
  line-height:1.4;color:var(--ink);margin:0 0 var(--s3)}
.idz-shut{font-family:var(--sans);font-size:13.5px;line-height:1.55;color:var(--ink-soft);
  border-left:2px solid var(--rule-ink);padding:var(--s2) 0 var(--s2) var(--s3);margin-block:var(--s4)}

/* ---- Asking for a time ---- */
.idz-booking-form{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:flex-end;
  margin-block:var(--s4)}
.idz-booking-form label{display:block;font-family:var(--sans);font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:5px}
.idz-booking-form select,.idz-booking-form input[type=text],.idz-booking-form textarea{
  font:inherit;font-size:15px;padding:11px 13px;border:1px solid var(--rule);border-radius:2px;
  background:var(--paper);color:var(--ink);min-width:12em}
.idz-booking-form textarea{width:100%;min-height:5em;resize:vertical}
.idz-booking-form select:focus,.idz-booking-form input:focus,.idz-booking-form textarea:focus{
  outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.idz-booking-none{font-style:italic;color:var(--ink-soft);margin-block:var(--s3)}

/* ---- Small ones, each on a page somebody actually lands on ---- */
.idz-login-state{font-size:15px;line-height:1.6;color:var(--ink-soft);margin-block:var(--s4)}
.idz-my-books{margin-top:var(--s6)}
.idz-webview{max-width:var(--measure);margin-inline:auto;padding-block:var(--s5)}
.idz-reading-time{font-family:var(--sans);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-faint)}
.idz-credentials{font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--ink-soft)}

@media (max-width:600px){
  .idz-booking-form{flex-direction:column;align-items:stretch}
  .idz-booking-form select,.idz-booking-form input[type=text]{min-width:0;width:100%}
  .idz-consent-gate-form{padding:var(--s4)}
}

/* ---- The Letter's own confirm and unsubscribe screens ----

   These pages centre their heading through .p-head and then left aligned everything
   underneath it, so the button, the note below it and the way back all sat off to one
   side of a centred headline. Everything on these two screens is centred together.

   Scoped to the screen rather than written into .signup, because .signup is also the
   subscribe block on an article, where the field and the button belong on the left
   next to the words that introduce them.                                            */

.idz-letter-screen .measure{text-align:center}
.idz-letter-screen .signup form{justify-content:center}
.idz-letter-screen .signup p,
.idz-letter-screen .signup h3{margin-inline:auto;max-width:46ch}
.idz-letter-screen .stamp{text-align:center}

/* The subscribe form appears here too, when a confirmation link has gone stale. Its
   field and button are a flex row that wraps: centred, they stay a pair on a wide
   screen and stack in the middle on a narrow one. */
.idz-letter-screen .signup input{flex:0 1 20rem}

/* A book page sits under the same centred head as a piece, so its shop block is
   centred with it, and the cover is shown whole rather than cropped to a band. */
.single-book .p-art{aspect-ratio:auto;max-width:420px;margin-inline:auto}
.single-book .p-art img{height:auto !important;object-fit:contain !important}
/* The single page prints the book with no .idz-books around it, so the rule aimed
   there reached nothing, and the author, the facts and the note stayed on the left
   under a centred title while the form alone was centred. It aims at the book. And on
   its own page the book is not a row in a list, so it has no rule under it: that rule
   stood between the text and the end mark with the Letter's rule just below. */
.single-book .idz-book--single{text-align:center;border-bottom:0;padding-bottom:0}
.single-book .idz-book-blurb,.single-book .idz-book-facts,.single-book .idz-book-buy,.single-book .idz-book-note{margin-inline:auto}
.single-book .idz-book-buy{justify-content:center}

/* ---- an address and its button ---------------------------------------------------
   The Letter band, the signup, the search form and a book's buy form are one control:
   a field and the button that sends it. They were drawn four ways, joined or 10px
   apart, an ink hairline or a pale one with rounded corners, Jost or Caslon, from 46
   to 54px tall, and two of them share a screen on the books pages. One way now: the
   site's field (Jost 15px, var(--s2) by var(--s3), an ink hairline) with the button
   joined to its right edge at the field's height; and at 560px and under, where the two
   do not fit on one line, stacked var(--s2) apart with the button the full width. */
:is(.idz-band-form,.signup form,.idz-searchform-row,.idz-book-buy){display:flex;flex-wrap:nowrap;gap:0;align-items:stretch}
:is(.idz-band-form,.signup form,.idz-book-buy) input[type=email],.idz-searchform-row input[type=search]{
  flex:1 1 auto;min-width:0;margin:0;font-family:var(--sans);font-size:15px;line-height:1.4;
  padding:var(--s2) var(--s3);background:var(--paper);color:var(--ink);
  border:1px solid var(--ink);border-right:0;border-radius:0;box-shadow:none}
:is(.idz-band-form,.signup form,.idz-book-buy) input[type=email]:focus,.idz-searchform-row input[type=search]:focus{
  outline:2px solid var(--accent);outline-offset:-2px;position:relative;z-index:1;border-color:var(--ink)}
:is(.idz-band-form,.signup form,.idz-searchform-row,.idz-book-buy) :is(.btn,.idz-btn){flex:0 0 auto;width:auto;white-space:nowrap}
@media(max-width:560px){
  /* Stacked, the button stands 9px under its field (the owner's figure, 29 September 2026;
     it was 10px, var(--s2)). */
  :is(.idz-band-form,.signup form,.idz-searchform-row,.idz-book-buy){flex-direction:column;gap:9px}
  /* A column turns a flex basis into a height, so the field takes its own. */
  :is(.idz-band-form,.signup form,.idz-book-buy) input[type=email],.idz-searchform-row input[type=search]{
    flex:0 0 auto;border-right:1px solid var(--ink)}
  :is(.idz-band-form,.signup form,.idz-searchform-row,.idz-book-buy) :is(.btn,.idz-btn){width:100%}
}

/* ---- one way out of an empty page ------------------------------------------------
   The 404 and a search with no results end on a single link under a centred head. It
   borrowed the header's nav, with the bar's padding and a transparent border, which
   left 22px of dead space under it and a link that did not look like one. It is the
   site's way through instead: small capitals on a hairline, ending on its baseline, so
   the module's var(--flow) is all that lies between it and the next rule. */
.mod > .nav{padding-block:0}
.mod > .nav a{padding:0 0 2px;border:0;border-bottom:1px solid var(--rule-ink);color:var(--ink-soft);
  text-box:trim-end cap alphabetic}
.mod > .nav a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.mod > .nav a:active{border-bottom-width:2px}

/* ---- the intake's consent and its note ------------------------------------------
   The consent is set as every other field in the form is: its statement is the label,
   on the form's left edge, and the box is the control under it on the same edge. With
   the box in front of the statement, the statement started 31px inside the edge that
   every other label and field shares, and the owner asked for one edge. The label takes
   the form's label rhythm, var(--s2) over its control, and the note under it is set as
   the portal's notes are, not as body copy. */
/* The control is a block the height of the box. Inline, the box stood on a line of text
   and carried that line's descent under it, as the textarea once did. */
.idz-intake .acf-field-true-false .acf-true-false{display:block;width:auto;margin:0}
/* The box and the sentence beside it are one line, not a box on its own under a
   heading. A lone unlabelled square reads as something the page forgot to finish,
   which is what it looked like on the live form. */
.idz-intake .acf-field-true-false .acf-true-false > label{display:flex;align-items:flex-start;
  gap:var(--s3);width:auto;margin:0;cursor:pointer}
.idz-intake .acf-field-true-false .acf-true-false > label .message{flex:1 1 auto;margin:0}
/* The box is drawn in the fields' own hairline: one pixel of ink, square, on paper, so
   it reads as one of the form's controls rather than the browser's grey rounded one.
   Ticked, it fills with ink inside a ring of paper. */
.idz-intake .acf-field-true-false input[type=checkbox]{appearance:none;-webkit-appearance:none;display:block;flex:0 0 auto;
  width:1.25rem;height:1.25rem;margin:0;padding:0;flex:none;border:1px solid var(--ink);border-radius:0;
  background:var(--paper);cursor:pointer}
.idz-intake .acf-field-true-false input[type=checkbox]:checked{background:var(--ink);box-shadow:inset 0 0 0 3px var(--paper)}
.idz-intake .acf-field-true-false input[type=checkbox]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.idz-intake .acf-field-true-false > .acf-label label{cursor:pointer}
.idz-intake .idz-meta{font-family:var(--sans);font-size:11px;line-height:1.6;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);margin:0;text-box:trim-both cap alphabetic}
/* The button sits as far under that last line as every label sits under the field
   above it, var(--s4). It had var(--s5), 32px against 22. */
.idz-intake .acf-form-submit{margin-top:var(--s4)}

/* ---- Your own details, on the account page ----
   The two fields borrow the field styles the letter to the editor uses, so a field
   is a field everywhere on the site. Not its layout: that form goes to two columns
   at 640, and inside a card a third of the page wide that left both fields and the
   button at half the width of everything around them. This one stays a column. The
   button runs the card's width, as every primary button does, and the card's own
   actions sit under it as links. */
.idz-acct-form{margin:var(--s4) 0 0}
@media(min-width:640px){
  .idz-acct-form{display:block}
}
.idz-acct-form .idz-fb-row:last-of-type{margin-bottom:var(--s4)}
.idz-acct-save{margin:0}
.idz-acct-save .btn{display:block;width:100%;text-align:center}
.idz-account .idz-fb-notice{margin:var(--s4) 0 0}

/* A source's address is one unbreakable word. On a phone a long one is wider than the
   screen, and the browser widens the whole page to hold it and shrinks everything to fit.
   Let an address break wherever it must; nothing else in the block is affected. */
.idz-sources a,.idz-sources li{overflow-wrap:anywhere}

/* ------------------------------------------------------------------
   Buttons and boxes, measured on every page in every role at 1280 and
   390 on 29 September 2026: a button beside or under a field is that
   field's height, and the words in a box sit centred in it.
   ------------------------------------------------------------------ */
/* Every text field in the site's own forms comes to 43px (15px type at 1.4, 10px
   padding, the hairline); the button beside or under it came to 40.4px (its 11.5px
   label at 1.6 and its padding), 2.6px short in the sign-up band and under a piece, the
   search form, the book form and the account form. The label is centred on the line
   the height gives it. Not the worksheet and intake forms (.acf-form): the forms plugin's
   hidden spam trap is a text field, and matched it, so two of a worksheet's buttons grew
   to 43px while its others stayed 40.4. */
form:not(.acf-form):has(:is(input[type=text],input[type=email],input[type=search],input[type=tel],input[type=number],input[type=password],select)) :is(.btn,.idz-btn){
  height:43px;box-sizing:border-box;padding-top:0;padding-bottom:0;line-height:41px}
/* The fields those buttons sit beside or under are given the same 43px outright. Left to
   their padding and line height they came to 43px in Chrome, but a browser that sets a
   field's line by its font rather than by line-height (Safari) made them 44, and beside a
   43px button the field's bottom edge showed under the button. Both are now set, so they
   are the same in every browser. */
:is(.idz-band-form,.signup form,.idz-book-buy) input[type=email],.idz-searchform-row input[type=search],
.idz-fb :is(input[type=text],input[type=email],select){height:43px;box-sizing:border-box}
/* A box of words is trimmed to the capitals of its first line and the baseline of its
   last, so the space over the words is the space under them: the eye measures letters,
   and a line box carries 1 to 8.7px more under its words than over them. The crisis
   note, the credentials line and the notes in a piece hold nothing but words. */
:is(.crisis,.idz-crisis,.creds,.body .idz-note){text-box:trim-both cap alphabetic}
/* An account card starts at the capitals of its heading. It ends at the baseline of its
   note, or at the foot of what it ends on otherwise, the underlined links or the button,
   which is the card's own padding. Trimmed as a whole, a card ending on its button had
   the button hang 21px into the padding. The button's paragraph is a flex row so no line
   box adds space around the button. */
.idz-acct-card > h3:first-child{text-box:trim-start cap alphabetic}
.idz-acct-card > .idz-acct-note:last-child{text-box:trim-end cap alphabetic}
.idz-acct-card > .idz-cta{display:flex}
/* The account cards hug what they hold. Stretched to the tallest in the row, the short
   ones stood over 200px of empty box under their words. */
.idz-acct-grid{align-items:start}