@font-face{font-family:"Libre Baskerville";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/lb-r.woff2) format("woff2");}
@font-face{font-family:"Libre Baskerville";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/lb-i.woff2) format("woff2");}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:200 900;font-display:swap;src:url(/assets/fonts/ns-r.woff2) format("woff2");}
@font-face{font-family:"Nunito Sans";font-style:italic;font-weight:200 900;font-display:swap;src:url(/assets/fonts/ns-i.woff2) format("woff2");}
@font-face{font-family:"Caveat";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/cav500.woff2) format("woff2");}
@font-face{font-family:"Petit Formal Script";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/pfs.woff2) format("woff2");}

:root{
  --bg:#F3F0EC; --surface:#E8E2D9; --mid:#B4A48D; --accent:#334E5B; --ink:#1B1B18;
  --taupe:#675848; --taupe-btn:#7A6A5A; --tan:#D4C5B0; --green:#2C4A3E;
  --ink-72:rgba(27,27,24,.82); --ink-55:rgba(27,27,24,.70);
  --rule:rgba(27,27,24,.28); --rule-soft:rgba(27,27,24,.30); --mid-line:#8A7B68;
  --serif:"Libre Baskerville",Georgia,serif;
  --sans:"Nunito Sans",system-ui,-apple-system,sans-serif;
  --hand:"Caveat","Segoe Script","Bradley Hand",cursive;
  --script:"Petit Formal Script","Snell Roundhand","Apple Chancery",cursive;
  --s-sm:48px; --s-md:88px; --s-lg:112px; --s-xl:152px;
  /* fuller: near edge-to-edge */
  --maxw:1240px; --gutter:clamp(22px,3.1vw,54px);
  --t-hover:400ms ease; --t-acc:650ms cubic-bezier(.19,1,.22,1); --t-rev:300ms ease-out;
  --r-btn:10px;  /* softened button curvature */
  --rail:264px;
  color-scheme: light;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.8;letter-spacing:.02em;-webkit-font-smoothing:antialiased;overflow-x:clip;}
/* clip, not hidden: overflow-x:hidden turns the body into a scroll container,
   which silently kills position:sticky on the top bar, so on a phone the Begin
   button scrolled away and never came back. clip trims the same overhang
   without creating a scroll container. */
::selection{background:var(--accent);color:var(--bg);}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:.01em;margin:0;text-wrap:balance;}
h1 em,h2 em,h3 em,h4 em{font-style:italic;font-weight:400;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
svg{display:block;}
button{font:inherit;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}
.narrow{max-width:960px;margin:0 auto;padding:0 var(--gutter);}
.ui{font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;line-height:1.6;}
/* The tick is an inline-block on a block element, not a flex item. As a flex
   row the eyebrow could not wrap, and "Also in Where Alafiora Practices" ran
   7px past the right edge of a 320px phone and took the whole page sideways. */
.eyebrow{font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);}
.eyebrow::before{content:"";display:inline-block;width:14px;height:2px;vertical-align:middle;
  margin-right:9px;margin-bottom:2px;background:var(--accent);opacity:.8;}
.on-dark .eyebrow::before{background:var(--mid);}
.eyebrow.light{color:var(--tan);}

.d1{font-size:clamp(2.2rem,4vw,3.5rem);line-height:1.22;}
.d2{font-size:clamp(1.7rem,2.8vw,2.5rem);line-height:1.3;}
.d3{font-size:clamp(1.3rem,2vw,1.72rem);line-height:1.36;}
.lede{font-size:1.06rem;line-height:1.85;color:var(--ink-72);}
.body{font-size:.96rem;font-weight:400;line-height:1.85;color:var(--ink-72);}
.small{font-size:.85rem;font-weight:400;line-height:1.8;color:var(--ink-55);}

.hl{position:relative;display:inline;background:linear-gradient(180deg,transparent 12%,rgba(212,197,176,.72) 12%,rgba(212,197,176,.72) 88%,transparent 88%);padding:0 .1em;}
/* The hairline under every heading was the same grey on all hundred pages. It
   takes the page's own accent now, and it draws itself in from the left when
   the section arrives, so the colour of a domain is established before a word
   of it is read. */
.rule{height:2px;width:clamp(180px,24vw,340px);margin-top:18px;position:relative;overflow:hidden;
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent) 34%,var(--rule) 34%,var(--rule) 100%);
  transform-origin:left center;}
.rv .rule,.rv.in .rule{transform:scaleX(1);}
.rv:not(.in) .rule{transform:scaleX(0);}
.rule{transition:transform 900ms cubic-bezier(.19,1,.22,1) 120ms;}
@media(prefers-reduced-motion:reduce){.rule{transition:none;}.rv:not(.in) .rule{transform:none;}}
.on-dark .rule{background:linear-gradient(90deg,var(--mid) 0%,var(--mid) 34%,rgba(243,240,236,.24) 34%,rgba(243,240,236,.24) 100%);}
.rule.center{margin-left:auto;margin-right:auto;}

/* ── plates ── */
.plate{position:relative;overflow:hidden;background:var(--surface);}
.plate .gr{position:absolute;inset:-12%;mix-blend-mode:multiply;pointer-events:none;}
.plate.vase{background:radial-gradient(58% 46% at 50% 40%,rgba(255,255,255,.5),transparent 62%),radial-gradient(30% 40% at 41% 52%,rgba(122,106,90,.5),transparent 70%),linear-gradient(168deg,#EFEAE2,#DDD4C6 44%,#B9AC99);}
.plate.window{background:linear-gradient(116deg,rgba(255,255,255,.58) 0 34%,rgba(255,255,255,0) 62%),linear-gradient(194deg,#EFEBE3,#DCD3C5 40%,#BCAF9C 74%,#9E9280);}
.plate.window::before{content:"";position:absolute;inset:-6%;background:linear-gradient(101deg,transparent 0 24%,rgba(27,27,24,.15) 24% 28%,transparent 28% 50%,rgba(27,27,24,.12) 50% 53%,transparent 53%),linear-gradient(11deg,transparent 0 56%,rgba(27,27,24,.09) 56% 60%,transparent 60%);filter:blur(4px);}
.plate.leaf{background:linear-gradient(172deg,#E6E0D5,#CFC5B4 44%,#A3977F);}
.plate.linen{background:repeating-linear-gradient(90deg,rgba(27,27,24,.05) 0 1px,transparent 1px 4px),repeating-linear-gradient(0deg,rgba(27,27,24,.045) 0 1px,transparent 1px 4px),linear-gradient(158deg,#EAE4DA,#D0C5B3);}
.plate.wash{background:radial-gradient(78% 58% at 24% 20%,rgba(51,78,91,.36),transparent 64%),radial-gradient(66% 66% at 78% 76%,rgba(180,164,141,.52),transparent 62%),linear-gradient(150deg,#EEE9E1,#CAC1B3);}
.plate.grove{background:radial-gradient(70% 50% at 30% 14%,rgba(212,197,176,.34),transparent 62%),linear-gradient(166deg,#3D5A48,#2C4A3E 50%,#1E3329);}
.plate.plaster{background:radial-gradient(120% 90% at 22% 8%,rgba(255,255,255,.6),transparent 58%),linear-gradient(168deg,#F1EDE6,#E3DCD1 46%,#CFC5B6);}
.plate.plaster::before{content:"";position:absolute;inset:-8%;background:linear-gradient(104deg,transparent 0 30%,rgba(27,27,24,.09) 30% 34%,transparent 34% 58%,rgba(27,27,24,.07) 58% 61%,transparent 61%);filter:blur(7px);}
.plate.travertine{background:radial-gradient(50% 42% at 44% 40%,rgba(255,255,255,.5),transparent 66%),linear-gradient(158deg,#EDE7DC,#DACFBE 52%,#BCAF9B);}
.plate.studio{background:radial-gradient(70% 58% at 50% 26%,rgba(255,255,255,.34),transparent 68%),linear-gradient(172deg,#D9D6D2,#C6C2BD 56%,#ADA9A4);}
.plate.walnut{background:radial-gradient(80% 60% at 74% 12%,rgba(212,197,176,.3),transparent 60%),linear-gradient(164deg,#4A3B2C,#3A2E22 54%,#241C14);}
.plate.canvas{background:linear-gradient(160deg,#EFE9DD,#E2D9C9 60%,#D2C6B2);}
.plate.dark{background:radial-gradient(76% 56% at 72% 16%,rgba(180,164,141,.2),transparent 60%),linear-gradient(168deg,#332E28,#241F1B 58%,#1B1B18);}
.ov{position:absolute;inset:0;pointer-events:none;}
.ov.clean{background:rgba(51,78,91,.12);}
.ov.moderate{background:rgba(51,78,91,.3);}
.ov.cta{background:rgba(27,27,24,.8);}
.ov.washlight{background:rgba(243,240,236,.75);}
.ov.grove{background:rgba(44,74,62,.62);}
.framed{border:1px solid var(--mid-line);padding:7px;background:#FAF8F5;}
.framed > .plate{width:100%;height:100%;}


/* ── the interconnected-system diagram ── */
.weave{position:relative;width:100%;max-width:560px;margin:0 auto;}
.weave svg{width:100%;height:auto;overflow:visible;}
.weave .lp{transition:opacity var(--t-acc),transform var(--t-acc);transform-origin:center;}
.weave:hover .lp{opacity:.9;}
.weave .lp.a:hover,.weave .lp.b:hover,.weave .lp.c:hover{transform:scale(1.02);}
.weave figcaption{margin-top:26px;text-align:center;max-width:44ch;margin-left:auto;margin-right:auto;font-family:var(--serif);font-style:italic;font-size:.9rem;color:var(--taupe);line-height:1.7;}
.weave .wlbl{font-family:var(--sans);font-size:10.5px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;}
.weave .wctr{font-family:var(--serif);font-style:italic;font-size:13px;}
@keyframes breathe{0%,100%{transform:scale(1);}50%{transform:scale(1.014);}}
.weave .grp{animation:breathe 14s ease-in-out infinite;transform-origin:center;}
@media(prefers-reduced-motion:reduce){.weave .grp{animation:none;}}

/* ── content warning ──
   The dismiss control is the first thing a visitor touches, and the fixed
   "Full Menu" bookmark is pinned to the same corner. --bmk-w reserves the
   bookmark's width wherever the bookmark is shown, so the two never overlap;
   build/check.js hit-tests the center of the ✕ at every width. */
:root{--bmk-w:0px;}
.cw{background:var(--ink);color:rgba(243,240,236,.72);padding:11px calc(50px + var(--bmk-w));text-align:center;position:relative;}
.cw span{font-family:var(--sans);font-size:11px;letter-spacing:.06em;line-height:1.7;}
@media(max-width:700px){.cw{padding-block:9px;}.cw span{font-size:10.5px;line-height:1.62;letter-spacing:.04em;}}
/* The two escapes named in the notice are the notice's own controls, not
   descriptions of controls elsewhere on the page. Underlined so they read as
   pressable against a strip nobody expects to be interactive. */
.cw .cwlink{background:none;border:none;padding:0;cursor:pointer;font:inherit;
  color:#F3F0EC;border-bottom:1px solid rgba(243,240,236,.5);
  transition:border-color var(--t-hover);}
.cw .cwlink:hover{border-color:#F3F0EC;}
.cw .cwlink:focus-visible{outline:2px solid rgba(243,240,236,.8);outline-offset:2px;border-radius:2px;}
.cw > button{
  position:absolute;right:calc(10px + var(--bmk-w));top:50%;transform:translateY(-50%);
  width:28px;height:28px;display:grid;place-items:center;
  background:none;border:1px solid rgba(243,240,236,.22);border-radius:50%;
  color:rgba(243,240,236,.6);cursor:pointer;padding:0;font-size:13px;line-height:1;
  transition:color var(--t-hover),border-color var(--t-hover);
}
.cw > button:hover{border-color:rgba(243,240,236,.5);}
.cw > button:hover{color:#F3F0EC;}
.cw.hide{display:none;}

/* ── buttons: softened curvature ── */
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 25px;border:1px solid transparent;border-radius:var(--r-btn);cursor:pointer;transition:background var(--t-hover),color var(--t-hover),border-color var(--t-hover),transform var(--t-hover),box-shadow var(--t-hover);white-space:nowrap;max-width:100%;justify-content:center;}
@media(max-width:360px){.btn{white-space:normal;text-align:center;padding-inline:18px;}}
/* Once the pair stacks, two buttons sitting one on top of the other with
   different right edges reads as a mistake rather than a hierarchy. */
@media(max-width:640px){
  .btns{flex-direction:column;align-items:stretch;}
  .btns .btn{width:100%;}
}
.btn .arw{transition:transform var(--t-hover);}
.btn:hover .arw{transform:translateX(4px);}
.btn:hover{transform:translateY(-1px);}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.btn-solid{background:var(--accent);color:var(--bg);}
.btn-solid:hover{background:#263D48;box-shadow:0 10px 24px -14px rgba(51,78,91,.7);}
.btn-line{border-color:var(--accent);color:var(--accent);}
.btn-line:hover{background:var(--accent);color:var(--bg);}
.btn-partner{background:var(--taupe-btn);color:var(--bg);}
/* In the rail it is an outline, not a second fill. It sits directly beneath
   Begin, which takes the domain accent, and on the brown-accented sections the
   two solid buttons were within a few percent of each other: two near-identical
   blocks where there should be a primary action and a secondary one. Elsewhere,
   including the footer's dark plate, the filled version stands. */

.railmenu{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  background:none;border:1px solid var(--mid-line);border-radius:var(--r-btn);color:var(--taupe);cursor:pointer;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:13px 12px;
  transition:border-color var(--t-hover),color var(--t-hover);}
.railmenu:hover{border-color:var(--accent);color:var(--accent);}
.railmenu svg{width:11px;height:14px;flex:none;}
.btn-partner:hover{background:#67594B;}
.on-dark .btn-solid{background:var(--bg);color:var(--accent);}
.on-dark .btn-solid:hover{background:var(--mid);color:var(--ink);}
.on-dark .btn-line{border-color:rgba(243,240,236,.55);color:var(--bg);}
.on-dark .btn-line:hover{background:var(--bg);color:var(--accent);}
.btns{display:flex;gap:11px;flex-wrap:wrap;}
/* Dr. Lapite-Garrett, 2 August 2026: "all the pages need greater space for the
   buttons and before the rest of the pages begin. It is all too compiled
   together. we need to make sure throughout the websites that the buttons have
   about one button distance away between copy, a border, an image, or
   something else so it does not accidentally overshadow anything."

   Measured before changing anything: 58 gaps across six pages at two widths
   were tighter than the button they sat against, some at 0px and 3px. A button
   group is 48px tall, so 48px is the floor, above and below, everywhere a
   group appears in the body of a page. Set as a custom property so a component
   that genuinely needs more can raise it without fighting this rule. */
:root{--btn-clear:48px;}
main .btns{margin-top:max(var(--btn-clear),0px);margin-bottom:max(var(--btn-clear),0px);}
main .btns:first-child{margin-top:0;}
/* the note that explains a button belongs to it, not to whatever follows */
main .btns + .btnnote,main .btns + .cta-note{margin-top:calc(var(--btn-clear) * -0.6);}
main .btnnote,main .cta-note{margin-bottom:var(--btn-clear);}

/* a keyboard visitor should not have to tab the whole chrome to reach the page */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--bg);
  font-family:var(--sans);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  padding:13px 20px;text-decoration:none;}
.skip:focus{left:12px;top:12px;outline:2px solid var(--bg);outline-offset:2px;}
/* .cfield sets display:flex, which otherwise beats [hidden] */
.cfield[hidden]{display:none;}

/* each button says where a reader is, not only what it does, so nobody has to
   guess which of the two is meant for them */
.btnnote{margin-top:13px;font-family:var(--sans);font-size:.82rem;line-height:1.7;color:var(--ink-72);max-width:56ch;}
.cta-note{display:flex;flex-wrap:wrap;gap:9px clamp(20px,3vw,40px);margin-top:15px;}
.cta-note span{flex:1 1 min(27ch,100%);font-family:var(--sans);font-size:.8rem;
  line-height:1.62;color:var(--ink-72);}
.cta-note b{font-weight:600;color:var(--ink);}
.on-dark .cta-note span{color:rgba(243,240,236,.78);}
.on-dark .cta-note b{color:var(--bg);}
.centrecol .cta-note{justify-content:center;text-align:center;}

/* ── sticky rail ── */
.rail{display:none;}
@media(min-width:1200px){
  .rail{display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:60;
    background:var(--surface);border-right:1px solid var(--mid-line);padding:30px 26px;overflow:hidden;}
  /* only the navigation scrolls; the two buttons stay on screen at any height,
     since on a 720px laptop they were falling below the fold entirely */
  /* The standing links hold their room. When a search is typed the results
     list is what scrolls, not the navigation above it: shrinking the nav to
     make space for results is the same fault as shrinking it for buttons. */
  .rail nav{flex:0 0 auto;min-height:0;}
  /* Dr. Lapite-Garrett, 2 August 2026: "when the search function is being used
     it goes upwards thereby blocking the links above it. it should be below
     but not block the lower buttons either. instead it should stay within the
     space it is allotted and then uses the scroll function appropriately."

     Exactly right, and the fix is structural rather than positional. The
     results were absolutely positioned and opened upward over the navigation,
     which was itself a patch for an earlier version that squeezed the nav.
     Neither was necessary: the rail already has dead space between the search
     field and the buttons, because .rfoot is pushed to the bottom. Make the
     search block the flexible child and that gap becomes the result list's
     own room. It grows downward into space nothing else wants, stops at the
     buttons, and scrolls inside itself. Nothing is covered and nothing moves. */
  .rail .srch{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;position:static;}
  .rail .srch .results{
    position:static;flex:1 1 auto;min-height:0;
    overflow-y:auto;overscroll-behavior:contain;margin-top:12px;max-height:none;
  }
  .rail .srch .results:not(:empty){
    background:#FCFAF7;border:1px solid var(--mid-line);border-radius:3px;padding:6px;
  }
  /* A rail 720px tall carrying a seven-item navigation, a search field and
     four calls to action is over-subscribed, and the result list was getting
     23px of it. Two steps rather than one compromise:

     Below 830px the Referring Professionals button leaves the rail. It is the
     one control here addressed to colleagues rather than clients, and it is
     still in the footer of every page and in the full menu.

     Below 700px the search leaves too, because a 40px list is not a list. The
     full menu carries the same index with a whole column to show it in, and
     its button is the one directly above. Better a search that works one press
     away than a sliver that looks broken. */
  @media(max-height:830px){ .rail .rfoot .btn-partner{display:none;} }
  @media(max-height:700px){ .rail .srch{display:none;} .rail nav{margin-bottom:auto;} }
  /* .rfoot keeps its margin-top:auto below; with the search block now taking
     flex:1 there is no free space left for auto to absorb, so it resolves to
     zero and the buttons sit where they always did. */
  .rail .rmark{font-family:var(--serif);font-size:1.2rem;letter-spacing:.19em;text-transform:uppercase;line-height:1.5;}
  .rail nav{margin-top:30px;display:flex;flex-direction:column;}
  .rail nav a{padding:11px 0;color:var(--ink-72);width:fit-content;position:relative;transition:color var(--t-hover);}
  .rail nav a::after{content:"";position:absolute;left:0;bottom:4px;height:1px;width:0;background:var(--mid);transition:width var(--t-hover);}
  .rail nav a:hover{color:var(--accent);}
  .rail nav a:hover::after{width:100%;}
  .rail nav .navorn{display:block;margin:16px 0 10px;color:var(--mid);opacity:.85;}
  .rail nav .navorn svg{width:27px;height:27px;display:block;}
  .rail nav a[aria-current="page"]{color:var(--accent);}
  .rail nav a[aria-current="page"]::before{content:"";position:absolute;left:-13px;top:50%;width:5px;height:5px;border-radius:50%;background:var(--accent);transform:translateY(-50%);}
  .rail .rfoot{margin-top:auto;padding-top:20px;display:flex;flex-direction:column;gap:7px;}
  /* Chrome, not content. Four full-width buttons at the body-button size cost
     242px of the rail and squeezed the navigation into a scroll container,
     which is the one thing the rail exists to avoid. */
  .rail .rfoot .btn,.rail .rfoot .railmenu,.rail .rfoot .exitbtn{padding-block:11px;min-height:0;}
  .rail .rfoot .btn{font-size:10.5px;letter-spacing:.13em;}
  body.has-rail{padding-left:var(--rail);}
  .bar{display:none !important;}
}
/* A 1366x768 or 1280x720 laptop left the navigation 166px tall against 396px of
   links, and overlay scrollbars are zero pixels wide, so all three specialty
   domains were simply absent with nothing to suggest they existed. The rail
   tightens instead of scrolling, and if it still overflows, .rail nav.more
   fades its lower edge so the scroll is visible. */
@media(min-width:1200px) and (max-height:960px){
  .rail{padding:20px 26px;}
  .rail .rmark{font-size:1.08rem;}
  .rail nav{margin-top:16px;}
  .rail nav a{padding:6px 0;}
  .rail nav .navorn{margin:9px 0 5px;}
  .rail nav .navorn svg{width:20px;height:20px;}
  .rail .srch{margin-top:16px;}
  /* Dr. Lapite-Garrett, 3 August 2026: "the search navigation is now missing
     the buttons such as 'complsion' 'infidelity' 'military etc that it had
     before that the full menu still has, please include it back."

     They were hidden here to reclaim 33px on a short screen. That was the wrong
     saving: the chips are what tell a reader the search takes ordinary words
     rather than page titles, and the full menu keeps them, so the rail was the
     only place the hint disappeared. They come back tightened instead. */
  .rail .srch .hintrow{margin-top:7px;gap:4px;}
  .rail .srch .chip{padding:2px 8px;font-size:9.5px;}
  /* Two secondary controls share a row on a short screen so the result list
     keeps somewhere to open. A 1280x720 laptop had 47px of free rail, which is
     not a result list, and squeezing the navigation to find more is the one
     thing the rail exists to avoid. */
  /* 1fr in a grid means minmax(auto,1fr), and auto is max-content, so a button
     reading REFERRING PROFESSIONALS sized its column to 292px inside a 264px
     rail and pushed every button past the edge. That is the cut-off in her
     screenshot. minmax(0,1fr) is the fix, and min-width:0 lets the children
     actually shrink to it. */
  /* Below 1200px the top bar carries Crisis, Exit, Full Menu and Begin as one
     group. At 1200px and up the bar is gone and this rail is that group, so
     Crisis has to live here too or desktop loses the one control that must
     never be more than one press away. It shares the Full Menu row as an icon,
     which costs no vertical space at all. */
  .rail .rfoot{padding-top:14px;gap:8px;display:grid;grid-template-columns:auto minmax(0,1fr);}
  .rail .rfoot > *{grid-column:1 / -1;min-width:0;}
  .rail .rfoot .crisislink{grid-column:1;width:auto;padding-inline:11px;}
  .rail .rfoot .crisislink span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
  .rail .rfoot .railmenu{grid-column:2;}
  .rail .rfoot .btn,.rail .rfoot .railmenu{padding-inline:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}
@media(min-width:1200px) and (max-height:700px){
  .rail nav a{padding:4px 0;font-size:.9rem;}
  .rail nav .navorn{display:none;}
  .rail .srch label{margin-bottom:5px;}
}
/* Below about 660px of viewport the search box is what has to go, not a
   specialty domain. The Full Menu button directly beneath it opens the same
   search, so nothing is actually lost. */
@media(min-width:1200px) and (max-height:665px){
  .rail .srch{display:none;}
  .rail{padding:16px 26px;}
  .rail .rmark{font-size:1rem;}
  .rail nav{margin-top:12px;}
}
.rail nav.more{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 34px),transparent);}
.rail nav.more.atend{-webkit-mask-image:none;mask-image:none;}

/* ── search (rail + mega) ── */
.srch{margin-top:26px;position:relative;}

.srch label{line-height:1.7;}
/* --taupe measured 4.31:1 on the menu's grove plate, just under the threshold */
.srch label{display:block;color:#544636;margin-bottom:8px;}
.srch .inwrap{display:flex;align-items:center;gap:8px;border:1px solid var(--mid-line);border-radius:var(--r-btn);background:#FAF8F5;padding:9px 11px;transition:border-color var(--t-hover);}
.srch .inwrap:focus-within{border-color:var(--accent);}
.srch svg{width:14px;height:14px;color:var(--taupe);flex:none;}
.srch input{flex:1;min-width:0;border:none;background:none;outline:none;font-family:var(--sans);font-size:.86rem;font-weight:300;letter-spacing:.02em;color:var(--ink);}
.srch input::placeholder{color:var(--ink-55);font-style:italic;font-family:var(--serif);font-size:.82rem;}
.srch .hintrow{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;}
/* text-transform inherits, and the rail carries .ui, so an unset chip shouted
   COMPULSION in the rail while reading compulsion in the full menu. These are
   the reader's own words quoted back and they are lowercase on purpose. */
.chip{text-transform:none;border:1px solid var(--mid-line);border-radius:999px;padding:3px 10px;font-family:var(--sans);font-size:10px;letter-spacing:.05em;color:var(--ink-72);cursor:pointer;background:none;transition:background var(--t-hover),color var(--t-hover),border-color var(--t-hover);}
.chip:hover{background:var(--accent);color:var(--bg);border-color:var(--accent);}
.results{margin-top:12px;max-height:min(46vh,420px);overflow-y:auto;}
.mleft .results{
  background:var(--bg);border:1px solid var(--mid-line);border-radius:4px;
  margin-top:12px;padding:4px 14px;max-height:min(30vh,272px);position:relative;z-index:3;
  box-shadow:0 18px 40px -26px rgba(0,0,0,.6);
}
.mleft .results:empty{display:none;border:none;box-shadow:none;padding:0;margin:0;}
.mleft .results .rt{color:var(--ink);}
.mleft .results .rk{color:var(--taupe);}
.res{
  display:block;padding:9px 6px;border-bottom:1px solid var(--rule-soft);
  background-image:linear-gradient(rgba(212,197,176,.6),rgba(212,197,176,.6));
  background-repeat:no-repeat;background-position:0 50%;background-size:0% 86%;
  transition:background-size 420ms cubic-bezier(.19,1,.22,1);
}
.res:hover,.res:focus-visible,.res:active{background-size:100% 86%;}
.res .rt{font-family:var(--serif);font-size:.9rem;line-height:1.4;color:var(--ink);}
.res .rk{display:block;margin-top:3px;font-family:var(--sans);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);}
.res mark{background:rgba(212,197,176,.7);color:inherit;}
/* The rail carries class="ui", whose text-transform:uppercase inherits into
   everything inside it — including this sentence, which shouted in the rail and
   read normally in the full menu because the menu's container is not .ui. The
   same words should look the same in both places. */
.nores{padding:12px 0;font-size:.85rem;color:var(--ink-55);font-style:italic;font-family:var(--serif);
  text-transform:none;letter-spacing:.01em;line-height:1.75;}
.nores p{text-transform:none;letter-spacing:.01em;}
/* and the button under it was 292px of nowrap in a 264px rail */
.nores .btn{white-space:normal;text-align:center;max-width:100%;padding-inline:14px;}

/* ── top bar (<1200px) ── */
/* opaque, not 94%: at six per cent the body text underneath was legible through
   the wordmark on every scroll of every page on a phone, and backdrop-filter is
   not guaranteed. z-index above the reading progress bar and the page chrome. */
.bar{position:sticky;top:0;z-index:70;background:var(--bg);border-bottom:1px solid var(--rule-soft);}
@supports (backdrop-filter:blur(1px)){.bar{background:rgba(243,240,236,.99);backdrop-filter:blur(14px) saturate(1.1);}}
.bar .row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px var(--gutter);min-width:0;max-width:100%;flex-wrap:nowrap;}
/* flex:0 0 auto, never 0 1 auto: the practice's own name was the one thing in
   this row allowed to shrink, so between 900 and 1124 the bar read ALAFIOR. */
.wordmark{font-family:var(--serif);font-size:1.16rem;letter-spacing:.19em;text-transform:uppercase;white-space:nowrap;flex:0 0 auto;}
/* All six links need 1140px before anything is squeezed. Below that the bar
   carries the three specialty domains only, which is what this practice is. */
.barlinks{display:none;gap:24px;flex:0 1 auto;min-width:0;}
.barlinks .wide{display:none;}
@media(min-width:900px){.barlinks{display:flex;}}
@media(min-width:1140px){.barlinks .wide{display:block;}}
.barlinks a{color:var(--ink-72);position:relative;padding-bottom:3px;transition:color var(--t-hover);}
.barlinks a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--mid);transition:width var(--t-hover);}
.barlinks a:hover{color:var(--accent);}
.barlinks a:hover::after{width:100%;}

/* ── bookmark trigger (fixed, top-right) ── */
.bmk{
  position:fixed;top:0;right:0;z-index:80;display:none;align-items:center;gap:9px;
  background:var(--accent);color:var(--bg);border:none;cursor:pointer;
  padding:15px 20px 17px;border-radius:0 0 var(--r-btn) var(--r-btn);
  transition:background var(--t-hover),padding var(--t-hover);
}
.bmk:hover{background:#263D48;padding-bottom:22px;}
.bmk:focus-visible{outline:2px solid var(--mid);outline-offset:-4px;}
.bmk svg{width:13px;height:17px;}
.bmk span{font-family:var(--sans);font-size:10px;letter-spacing:.15em;text-transform:uppercase;}
/* The bookmark is an overlay pinned to the top-right, and the reading column
   only clears that corner from about 1800px up: below it the chip was sitting
   on card headings and body copy all the way down the page. It is also a
   duplicate of the rail's own Full Menu button, which is present at every width
   from 1200, so nothing is lost by showing the ribbon only where it fits. */
@media(min-width:1800px){.bmk{display:flex;}:root{--bmk-w:152px;}}
/* in-bar trigger for narrower viewports */
.bar .menubtn{display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid var(--accent);border-radius:var(--r-btn);color:var(--accent);padding:12px 16px;cursor:pointer;transition:background var(--t-hover),color var(--t-hover);}
.bar .menubtn:hover{background:var(--accent);color:var(--bg);}
.bar .menubtn svg{width:12px;height:15px;}
.bar .nav-right{display:flex;align-items:center;gap:9px;flex:0 0 auto;}
@media(max-width:899px){
  .fcards{gap:16px;background:transparent;border:none;}
  .fcards .fc{border:1px solid var(--mid-line);}
}
@media(max-width:820px){
  .wordmark{font-size:1.02rem;letter-spacing:.15em;}
  .bar .barcta{padding:12px 16px;}
  .bar .menubtn{padding:12px 13px;}
  .bar .menubtn span{display:none;}
  .bar .nav-right{gap:8px;flex:none;}
}
@media(max-width:400px){
  .wordmark{font-size:.9rem;letter-spacing:.1em;}
  .bar .barcta{padding:11px 12px;font-size:9.5px;letter-spacing:.1em;}
  .bar .menubtn{padding:11px 11px;}
  .bar .row{gap:7px;}
}

/* ── mega menu ── */
/* visibility, not just pointer-events: without it the closed menu keeps ~100
   focusable links in the tab order on every page. The delay lets the close
   animation finish before the panel is taken out of the tree. */
.mega{position:fixed;inset:0;z-index:90;pointer-events:none;visibility:hidden;transition:visibility 0s linear var(--t-acc);}
.mega.open{visibility:visible;transition-delay:0s;}
.mega .mbd{position:absolute;inset:0;background:rgba(27,27,24,.4);opacity:0;transition:opacity var(--t-acc);}
.mega .msheet{
  position:absolute;inset:0;background:var(--bg);display:grid;grid-template-columns:1fr;
  grid-template-rows:auto 1fr;height:100dvh;overflow:hidden;
  transform:translateY(-100%);transition:transform var(--t-acc);
}
@media(min-width:1000px){.mega .msheet{grid-template-columns:.86fr 1.14fr;grid-template-rows:1fr;}}
.mega.open{pointer-events:auto;}
.mega.open .mbd{opacity:1;}
.mega.open .msheet{transform:none;}
.mleft{position:relative;z-index:3;overflow:hidden;min-height:0;display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:clamp(22px,2.6vw,40px);}
.mleft > .mtxt{flex:none;}
.mleft .srch{flex:none;position:relative;z-index:6;}
.mleft .plate{position:absolute;inset:0;}
.mleft .mtxt{position:relative;z-index:2;}
.mleft .srch.mtxt{z-index:6;}
.mleft .results{z-index:7;}
.mleft h3{color:#F3F0EC;font-size:clamp(1.3rem,2vw,1.9rem);margin-top:14px;max-width:22ch;}
.mleft .body{color:rgba(243,240,236,.82);margin-top:14px;max-width:56ch;font-size:.98rem;}
.mright{position:relative;z-index:1;padding:0 clamp(22px,2.4vw,40px) clamp(26px,2.6vw,44px);display:flex;flex-direction:column;min-height:0;overflow-y:auto;}
.mtop{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex:none;position:sticky;top:0;background:var(--bg);padding:clamp(22px,2.4vw,40px) 0 16px;margin-bottom:2px;border-bottom:1px solid var(--rule-soft);z-index:6;}
.megax{display:none;position:fixed;top:14px;right:14px;z-index:12;width:44px;height:44px;
  align-items:center;justify-content:center;border-radius:50%;cursor:pointer;
  background:var(--bg);border:1px solid var(--mid-line);color:var(--ink);
  box-shadow:0 10px 26px -14px rgba(27,27,24,.5);}
.megax svg{width:19px;height:19px;}
.megax:active{background:var(--mid);}
.mclose{background:none;border:1px solid var(--mid-line);border-radius:var(--r-btn);color:var(--ink-72);padding:9px 14px;cursor:pointer;transition:background var(--t-hover),color var(--t-hover);}
.mclose:hover{background:var(--accent);color:var(--bg);border-color:var(--accent);}
.mcols{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(238px,100%),1fr));gap:22px 26px;margin-top:20px;align-content:start;padding-bottom:20px;}
.mqr{display:block;align-self:end;text-decoration:none;border:1px solid var(--mid-line);background:#FCFAF7;padding:18px;transition:border-color var(--t-hover),transform var(--t-hover);}
.mqr:hover,.mqr:focus-visible{border-color:var(--accent);transform:translateY(-2px);}
.mqr-t{font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);margin-bottom:14px;}
.mqr svg,.mqr .qrimg{display:block;width:100%;max-width:190px;height:auto;aspect-ratio:1;}
.mqr-c{margin-top:13px;font-family:var(--sans);font-size:.8rem;font-weight:400;line-height:1.75;color:var(--ink-72);}
/* columns form from the space available, not from a list of screen widths.
   sexual trauma is the one section long enough to earn two of them. */
@media(min-width:1240px){
  .mcols{grid-auto-flow:dense;}
  .mcol[data-g="Trauma"]{grid-column:span 2;}
  .mcol[data-g="Trauma"] ul{column-count:2;column-gap:clamp(20px,1.8vw,32px);}
  .mcol[data-g="Trauma"] li{break-inside:avoid;}
}
.mcol h4{display:flex;align-items:center;gap:8px;font-size:.9rem;}
.mcol h4 svg{width:17px;height:17px;flex:none;color:var(--accent);}
.mcol a[aria-current="page"]{color:var(--ink);border:1px solid var(--tan);border-radius:14px;padding:3px 11px;margin-left:-11px;background:rgba(212,197,176,.16);}
.youarehere{font-family:var(--hand);font-size:1.05rem;color:var(--taupe);margin-left:9px;white-space:nowrap;letter-spacing:.01em;}
.nores p{margin-bottom:16px;}
.nores .btn{font-size:10px;}
.mcol .mrule{height:1px;background:var(--rule-soft);margin:8px 0 9px;}
.mcol ul{list-style:none;margin:0;padding:0;}
.mcol li a{
  display:block;padding:3px 6px;font-size:.79rem;line-height:1.55;color:var(--ink-72);
  background-image:linear-gradient(rgba(212,197,176,.75),rgba(212,197,176,.75));
  background-repeat:no-repeat;background-position:0 58%;background-size:0% 74%;
  transition:background-size 420ms cubic-bezier(.19,1,.22,1),color var(--t-hover);
}
.mcol li a:hover,.mcol li a:focus-visible,.mcol li a:active{color:var(--ink);background-size:100% 74%;}

.megatop{
  position:absolute;right:clamp(16px,2vw,26px);bottom:clamp(16px,2vw,26px);z-index:8;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--mid-line);
  background:var(--bg);color:var(--accent);cursor:pointer;display:grid;place-items:center;
  opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity var(--t-hover),transform var(--t-hover),background var(--t-hover),color var(--t-hover);
  box-shadow:0 14px 30px -18px rgba(27,27,24,.55);
}
.megatop.show{opacity:1;pointer-events:auto;transform:none;}
.megatop:hover{background:var(--accent);color:var(--bg);}
.megatop:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.megatop svg{width:18px;height:18px;}
.mcol h4 .n{margin-left:auto;font-family:var(--sans);font-size:10px;font-weight:400;letter-spacing:.1em;color:var(--taupe);flex:none;}
@media(max-width:999px){
  /* one natural scroll on phones: nothing pins, nothing overlaps */
  /* block layout: each panel takes its natural height, nothing is clipped */
  .mega .msheet{display:block;height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  .mleft .srch .inwrap{padding:13px 14px;}
  .mleft .srch input{font-size:1rem;}
  .mleft .srch input::placeholder{font-size:.94rem;}
  .chip{padding:6px 13px;font-size:11px;}
  .mleft{overflow:visible;justify-content:flex-start;gap:22px;padding:30px 24px 34px;}
  .mleft h3{font-size:1.34rem;line-height:1.32;}
  .mleft .body{font-size:.9rem;line-height:1.8;}
  .mleft .results{max-height:min(44vh,330px);}
  .mleft > svg{opacity:.12 !important;width:42% !important;right:-12% !important;}
  .mright{overflow:visible;padding:0 24px 48px;}
  /* the menu scrolls as one column on a phone, so the in-flow Close scrolls
     out of reach; a pinned one keeps an exit within thumb's reach throughout */
  .mtop{position:static;padding:30px 0 12px;border-bottom:1px solid var(--rule-soft);}
  .mtop .mclose{display:none;}
  .megax{display:flex;}
  .mcols{grid-template-columns:1fr;gap:34px;margin-top:26px;}
  .mcol li a{padding:7px 0;font-size:.87rem;}
  .mcol h4{font-size:1rem;}
  .megatop{position:fixed;bottom:18px;right:18px;}
}

/* ── reveal / motion ── */
.rv{opacity:0;transform:translateY(16px);transition:opacity var(--t-rev),transform var(--t-rev);}

/* ── reveal variants ───────────────────────────────────────────────────
   Seven hundred and fifty-eight of seven hundred and sixty-six sections used
   one layout and one reveal: fade up sixteen pixels, every section, every page.
   Dr. Lapite-Garrett, 4 August 2026: "this repeat pattern cheapens the
   animation", and separately, that without photography to carry visual interest
   the structure and motion are doing that work alone. She is right on both, and
   the second is the reason this is not decoration.

   A variant is chosen from what a section actually is, never at random, and
   consecutive sections never share one. The rules that matter:

   rv-hold is opacity only, no movement, and it is the one reserved on grounds
   other than variety. Vignettes and composite-quote sections carry a person's
   account of assault, incest or compulsion. Sliding that up the screen animates
   someone's disclosure. It arrives, it does not perform.

   rv-stagger moves a section's children in sequence rather than the section as
   one block, which suits a list, a card grid, or a set of questions, where the
   items are genuinely separate things.

   rv-fall settles from above rather than rising, used after a deep band so the
   eye is not thrown the same direction twice across a colour change.

   rv-split sends the heading rail and the body from opposite sides by a small
   distance, which is the only variant that uses the two-column structure the
   layout already has. It is off below 900px, where the columns stack and the
   movement would read as a jitter rather than a pairing. */

/* ── the portrait letters ───────────────────────────────────────────────
   An envelope that arrives, opens, and folds away. Built on <dialog> so the
   focus trap, the Escape key, the inert background and the backdrop are the
   browser's job rather than mine; the parts that go wrong in hand-rolled
   modals are the parts not written here on purpose.

   The seal, not a sticker. A decorative image of a hotel room beside a
   portrait of compulsive sexual behaviour illustrates the behaviour. A wax
   seal individuates the envelope without depicting anything. */
.envrow{margin:clamp(18px,2vw,26px) 0;}
.env{display:flex;align-items:center;gap:clamp(14px,1.6vw,20px);width:100%;text-align:left;
  background:var(--env,#1F1B18);color:#F3EEE4;border:1px solid rgba(243,238,228,.22);
  border-radius:3px;padding:clamp(18px,2vw,26px) clamp(18px,2.2vw,28px);cursor:pointer;
  box-shadow:0 18px 40px -30px rgba(27,27,24,.8);
  transition:transform var(--t-hover),box-shadow var(--t-hover),border-color var(--t-hover);}
.env:hover{transform:translateY(-2px);box-shadow:0 26px 54px -30px rgba(27,27,24,.9);border-color:var(--envline,#C9A227);}
.env:focus-visible{outline:2px solid var(--envline,#C9A227);outline-offset:3px;}
.envseal{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--envline,#C9A227);}
.envseal svg{width:24px;height:24px;color:var(--envline,#C9A227);}
.envtx{flex:1 1 auto;min-width:0;}
.envname{display:block;font-family:var(--serif);font-size:clamp(1.06rem,1.5vw,1.3rem);line-height:1.3;}
.envsub{display:block;font-family:var(--sans);font-size:11.5px;letter-spacing:.06em;
  line-height:1.6;margin-top:7px;color:rgba(243,238,228,.72);}
.envgo{flex:none;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--envline,#C9A227);}
@media(max-width:640px){
  .env{flex-wrap:wrap;}
  .envgo{width:100%;margin-top:12px;}
}

.letter{border:none;padding:0;background:transparent;max-width:min(720px,94vw);width:100%;
  max-height:88vh;overflow:visible;}
.letter::backdrop{background:rgba(27,27,24,.62);backdrop-filter:blur(3px);}
.lpaper{position:relative;background:#FBF8F3;color:var(--ink);border-radius:2px;
  padding:clamp(30px,4vw,54px) clamp(22px,3.4vw,52px) clamp(26px,3vw,40px);
  max-height:88vh;overflow-y:auto;overscroll-behavior:contain;
  box-shadow:0 40px 90px -40px rgba(27,27,24,.75);
  border-top:3px solid var(--envline,#C9A227);}
.lclose{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;
  background:var(--surface);border:1px solid var(--mid-line);color:var(--ink-72);
  cursor:pointer;display:grid;place-items:center;}
.lclose svg{width:18px;height:18px;}
.lclose:hover{border-color:var(--accent);color:var(--accent);}
.lclose:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.lseal{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--envline,#C9A227);margin-bottom:clamp(16px,2vw,22px);}
.lseal svg{width:28px;height:28px;color:var(--envline,#C9A227);}
.lpaper .d3{margin:0;font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.22;}
.lsub{font-family:var(--sans);font-size:11px;letter-spacing:.08em;line-height:1.7;
  color:var(--ink-55);margin:12px 0 0;}
.lbody{margin-top:clamp(20px,2.4vw,30px);}
.lfoot{margin-top:clamp(24px,3vw,34px);padding-top:16px;border-top:1px solid var(--rule-soft);
  font-size:10.5px;letter-spacing:.05em;line-height:1.7;color:var(--ink-55);text-transform:none;}

/* The envelope arrives from the left and folds away to the right, which is her
   description of it. Both are movement for its own sake if a reader has asked
   for less of that, so both stop below. */
@keyframes letterin{from{opacity:0;transform:translateX(-38px) rotate(-1.4deg) scale(.97);}
  to{opacity:1;transform:none;}}
@keyframes letterout{from{opacity:1;transform:none;}
  to{opacity:0;transform:translateX(38px) rotate(1.4deg) scale(.97);}}
@keyframes lbackin{from{opacity:0;}to{opacity:1;}}
.letter[open]{animation:letterin 460ms cubic-bezier(.19,1,.22,1) both;}
.letter[open]::backdrop{animation:lbackin 300ms ease both;}
.letter.closing{animation:letterout 300ms ease both;}
@media(prefers-reduced-motion:reduce){
  .letter[open],.letter.closing,.letter[open]::backdrop{animation:none;}
  .env:hover{transform:none;}
}
html[data-amotion="off"] .letter[open],
html[data-amotion="off"] .letter.closing,
html[data-amotion="off"] .letter[open]::backdrop{animation:none;}

.rv-hold{transform:none;}
.rv-fall{transform:translateY(-14px);}
.rv-stagger{opacity:1;transform:none;}
.rv-stagger > *{opacity:0;transform:translateY(14px);transition:opacity var(--t-rev),transform var(--t-rev);}
.rv-stagger.in > *{opacity:1;transform:none;}
.rv-stagger.in > *:nth-child(1){transition-delay:0ms;}
.rv-stagger.in > *:nth-child(2){transition-delay:70ms;}
.rv-stagger.in > *:nth-child(3){transition-delay:140ms;}
.rv-stagger.in > *:nth-child(4){transition-delay:210ms;}
.rv-stagger.in > *:nth-child(n+5){transition-delay:280ms;}
@media(min-width:900px){
  .rv-split{opacity:1;transform:none;}
  .rv-split > .sechead{opacity:0;transform:translateX(-18px);transition:opacity var(--t-rev),transform var(--t-rev);}
  .rv-split > .secbody{opacity:0;transform:translateX(18px);transition:opacity var(--t-rev),transform var(--t-rev);}
  .rv-split.in > .sechead,.rv-split.in > .secbody{opacity:1;transform:none;}
}
/* Nothing above may leave content invisible if the observer never fires or the
   reader has asked for less motion. Every variant resolves to plainly visible. */
@media(prefers-reduced-motion:reduce){
  .rv-stagger > *,.rv-split > .sechead,.rv-split > .secbody{opacity:1;transform:none;transition:none;}
}
html[data-amotion="off"] .rv-stagger > *,
html[data-amotion="off"] .rv-split > .sechead,
html[data-amotion="off"] .rv-split > .secbody{opacity:1;transform:none;transition:none;}
.rv.in{opacity:1;transform:none;}
/* a keyboard visitor can arrive at a block before its observer has fired, and a
   focus ring on an invisible link is no focus ring at all */
.rv:focus-within{opacity:1;transform:none;}
.rv.k1{transition-delay:80ms;}.rv.k2{transition-delay:160ms;}.rv.k3{transition-delay:240ms;}
/* word-by-word hero settle */
.wsplit span{display:inline-block;opacity:0;transform:translateY(14px);transition:opacity 520ms cubic-bezier(.19,1,.22,1),transform 520ms cubic-bezier(.19,1,.22,1);}
.wsplit.in span{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .rv,.wsplit span{opacity:1 !important;transform:none !important;transition:none !important;}
  .tick-track,.badge,.driftA,.driftB{animation:none !important;}
  html{scroll-behavior:auto;}
}
/* ambient drift on decorative line art */
@keyframes driftA{0%,100%{transform:translate3d(0,0,0) rotate(0deg);}50%{transform:translate3d(0,-14px,0) rotate(1.1deg);}}
@keyframes driftB{0%,100%{transform:translate3d(0,0,0) rotate(0deg);}50%{transform:translate3d(0,10px,0) rotate(-1.3deg);}}
.driftA{animation:driftA 17s ease-in-out infinite;}
.driftB{animation:driftB 21s ease-in-out infinite;}

.pad-sm{padding:var(--s-sm) 0;}
.pad-md{padding:var(--s-md) 0;}
.pad-lg{padding:var(--s-lg) 0;}
.on-bg{background:var(--bg);}
.on-surface{background:var(--surface);}

/* ── ombré bands: brand tones graded into one another, never a new hue.
      each band ends on the tone the next band opens with, so the seam disappears. ── */
.on-bg.ombre{background:linear-gradient(180deg,#F3F0EC 0%,#F0ECE6 56%,#E8E2D9 100%);}
.on-surface.ombre{background:linear-gradient(180deg,#E8E2D9 0%,#E4DDD2 56%,#DCD3C5 100%);}
.on-surface.ombre-up{background:linear-gradient(180deg,#E8E2D9 0%,#EDE9E3 56%,#F3F0EC 100%);}

/* ── ruled note paper, drawn entirely in brand tones, no image asset.
      the base wash still lands on --surface so the seam into the next band closes. ── */
.notecard{
  --nl:34px; --nm:clamp(22px,3.4vw,44px);
  position:relative;background:#FCFAF7;border:1px solid var(--mid-line);
  padding:clamp(26px,2.6vw,38px) clamp(22px,2.4vw,34px) clamp(30px,3vw,44px) var(--nm);
  box-shadow:0 1px 0 rgba(27,27,24,.04),0 20px 46px -36px rgba(27,27,24,.32);
}
.notecard::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    linear-gradient(90deg,transparent calc(var(--nm) - 13px),rgba(154,116,96,.26) calc(var(--nm) - 13px),rgba(154,116,96,.26) calc(var(--nm) - 12px),transparent calc(var(--nm) - 12px)),
    repeating-linear-gradient(180deg,transparent 0 calc(var(--nl) - 1px),rgba(180,164,141,.36) calc(var(--nl) - 1px),rgba(180,164,141,.36) var(--nl));
}
.notecard > *{position:relative;z-index:1;}
@media(prefers-contrast:more){.notecard::before{opacity:.5;}}

/* ── a page of one's own: type in cursive, draw, erase. nothing leaves the browser. ── */
.letter{max-width:960px;margin:clamp(30px,4vw,52px) auto 0;}
.notesheet{
  --lh:38px;
  position:relative;border:1px solid var(--mid-line);background:#FCFAF7;
  box-shadow:0 1px 0 rgba(27,27,24,.04),0 18px 44px -34px rgba(27,27,24,.34);
}
.notesheet::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    linear-gradient(90deg,transparent calc(var(--sm) - 1px),rgba(154,116,96,.26) calc(var(--sm) - 1px),rgba(154,116,96,.26) var(--sm),transparent var(--sm)),
    repeating-linear-gradient(180deg,transparent 0 calc(var(--lh) - 1px),rgba(180,164,141,.34) calc(var(--lh) - 1px),rgba(180,164,141,.34) var(--lh));
  background-position:0 0,0 calc(var(--pad-t) - 6px);
  --sm:clamp(30px,7vw,72px);
}
.notesheet{--pad-t:34px;}
.notesheet .surface{position:relative;z-index:1;padding:var(--pad-t) clamp(22px,3vw,40px) 40px clamp(44px,8vw,96px);min-height:clamp(330px,42vw,430px);}
#letterText{
  position:relative;z-index:2;outline:none;white-space:pre-wrap;word-break:break-word;
  font-family:var(--hand);font-weight:500;font-size:clamp(1.5rem,2.3vw,1.86rem);line-height:var(--lh);
  color:#2A3F4A;caret-color:var(--accent);min-height:calc(var(--lh) * 7);
}
#letterText:empty::before{content:attr(data-placeholder);color:rgba(27,27,24,.30);}
/* a caret alone is no cue on an empty field */
#letterText:focus-visible{outline:2px solid var(--accent);outline-offset:6px;}
/* width and height in CSS pixels, explicitly. An absolutely positioned canvas
   resolves width:auto from its width attribute, and that attribute carries the
   backing store size, so on a retina phone the sheet was drawn at double scale
   and a stroke landed off the paper. */
.notesheet .canvaslayer{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;touch-action:auto;}
.notesheet[data-mode="draw"] .canvaslayer,.notesheet[data-mode="erase"] .canvaslayer{pointer-events:auto;touch-action:none;}
.notesheet[data-mode="draw"] .canvaslayer{cursor:crosshair;}
.notesheet[data-mode="erase"] .canvaslayer{cursor:cell;}
.notesheet[data-mode="write"] .surface{cursor:text;}
.lt-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px;}
.lt-tools .sep{flex:1 1 auto;}
.lt-tools button{
  font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:400;
  padding:9px 15px;border:1px solid var(--mid-line);background:transparent;color:var(--ink-72);cursor:pointer;
  transition:background var(--t-hover),color var(--t-hover),border-color var(--t-hover);
}
.lt-tools button:hover{border-color:var(--accent);color:var(--accent);}
.lt-tools button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--bg);}
.lt-inks{display:flex;gap:7px;align-items:center;margin-left:2px;}
/* the swatch stays 22px; the thumb gets 26 */
/* the control is 26px so a thumb can hit it; the swatch inside it stays 22 */
.lt-inks button{width:26px;height:26px;padding:0;border:none;background:none !important;position:relative;}
.lt-inks button::before{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;
  transform:translate(-50%,-50%);border-radius:50%;border:1px solid var(--mid-line);background:var(--sw);}
.lt-inks button[aria-pressed="true"]::before{box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--accent);border-color:transparent;}
.lt-note{margin-top:16px;font-family:var(--sans);font-size:.83rem;font-weight:400;line-height:1.85;color:var(--ink-72);max-width:74ch;}
.lt-confirm{display:inline-flex;align-items:center;gap:10px;}
.lt-confirm[hidden]{display:none;}
@media(max-width:600px){.lt-tools .sep{flex-basis:100%;height:0;}}

@media print{
  /* Everything is hidden except the letter, the elements that contain it, and
     its own descendants. Written against the containment relationship rather
     than against a fixed depth, because an earlier version said
     `body > #ownpage` and printed a blank page the day a <main> wrapper was
     added above it. build/check.js asserts this renders. */
  html,body{background:#fff !important;padding:0 !important;margin:0 !important;}
  body :not(:has(#ownpage)):not(#ownpage):not(#ownpage *){display:none !important;}
  body :has(#ownpage){display:block !important;padding:0 !important;margin:0 !important;background:#fff !important;}
  #ownpage{display:block !important;padding:0 !important;background:#fff !important;}
  #ownpage .wrap{padding:0 !important;max-width:none !important;}
  #ownpage .eyebrow,#ownpage .d2,#ownpage .rule,#ownpage .lt-lead,#ownpage .lt-tools,#ownpage .lt-note{display:none !important;}
  #ownpage .letter{max-width:none;margin:0;}
  #ownpage .notesheet{border:none;box-shadow:none;background:#fff;}
  /* the caret is usually still in the sheet when someone prints it, and a focus
     ring printed around their own handwriting reads as a mistake */
  #ownpage *{outline:none !important;box-shadow:none !important;}
  #letterText{color:#1B1B18;}
}

/* ── split head: title left, its paragraph right, bottoms parallel ── */
.splithead{display:flex;flex-wrap:wrap;gap:clamp(16px,2.2vw,46px);align-items:flex-end;}
.splithead .sh-l{flex:1 1 min(470px,100%);}
.splithead .sh-r{flex:1 1 min(390px,100%);}
.splithead .sh-r .body{max-width:none;}

/* ── a calm, centred closing block ── */
.centrecol{max-width:920px;margin-left:auto;margin-right:auto;text-align:center;}
.centrecol .eyebrow{text-align:center;}
.centrecol .body{margin-left:auto;margin-right:auto;max-width:66ch;}
.centrecol .qlist{text-align:left;max-width:760px;margin-left:auto;margin-right:auto;}
.centrecol .btns{justify-content:center;}

/* ── a closing paragraph set across the full measure in two columns ── */
/* .twocol is gone. Dr. Lapite-Garrett, 2 August 2026: "the 'none of this work
   is scripted' seems to be broken in two columns when it shouldnt it should be
   one paragraph." She is right — a single paragraph flowing down one column and
   back up another makes a reader track the break, and on this paragraph the
   break landed mid-clause on "no one here is / treated as a category". */

/* ── HERO, centred over a full-bleed dark plate (live-site treatment) ── */
.hero{position:relative;min-height:min(96vh,900px);display:flex;align-items:center;overflow:hidden;}
.hero > .plate{position:absolute;inset:0;}
.hero-in{position:relative;z-index:2;width:100%;padding:var(--s-lg) 0;}
.hero-mid{max-width:880px;margin:0 auto;text-align:center;}
@media(max-width:720px){
  .hero-mid .hero-body,.hero-mid .body{text-align:left;}
  .cw{text-align:left;padding-inline:20px calc(46px + var(--bmk-w));}
}
.hero-eyebrow{
  font-family:var(--sans);font-size:clamp(11px,1.05vw,13px);font-weight:300;letter-spacing:.1em;
  line-height:1.95;color:#EDE7DC;max-width:none;margin:0 auto;
  text-shadow:0 1px 14px rgba(27,27,24,.75);
}
.hero-h1{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.72rem,3.5vw,3.05rem);line-height:1.26;letter-spacing:.005em;
  color:#F7F5F1;margin-top:clamp(30px,4.4vw,58px);text-wrap:balance;
}
.hero-body{
  margin:clamp(26px,3.6vw,46px) auto 0;max-width:52ch;
  font-family:var(--sans);font-weight:300;font-size:clamp(.98rem,1.15vw,1.1rem);
  line-height:1.95;color:rgba(243,240,236,.8);
}
/* CTA: tracked label above a hairline rule */
.hero-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(26px,4vw,58px);margin-top:clamp(34px,4.6vw,58px);}
.ul-cta{display:block;text-align:center;min-width:190px;}
.ul-cta .lbl{
  display:block;font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:.17em;
  text-transform:uppercase;color:#F7F5F1;padding-bottom:13px;transition:color var(--t-hover);
}
.ul-cta .ln{display:block;height:1px;background:rgba(247,245,241,.45);position:relative;overflow:hidden;}
.ul-cta .ln::after{content:"";position:absolute;inset:0;background:var(--mid);transform:translateX(-101%);transition:transform 520ms cubic-bezier(.19,1,.22,1);}
.ul-cta:hover .lbl{color:var(--mid);}
.ul-cta:hover .ln::after{transform:none;}
.ul-cta:focus-visible{outline:2px solid var(--mid);outline-offset:6px;}
.hero-bot{position:absolute;left:-2%;bottom:-4%;width:min(26%,300px);opacity:.2;z-index:1;pointer-events:none;}
.hero-stamp{position:absolute;right:5%;top:9%;width:clamp(130px,11vw,168px);height:clamp(130px,11vw,168px);color:rgba(247,245,241,.78);z-index:2;}
.badge{animation:spin 44s linear infinite;transform-origin:50% 50%;}
@keyframes spin{to{transform:rotate(360deg);}}
@media(prefers-reduced-motion:reduce){.badge{animation:none;}}
/* The seal ran through "Discreet by Design" from 1200 to 1512, worst at 1200
   where it overlapped the eyebrow by 110px. It needs a wider window than the
   one it had, and the eyebrow needs to sit above it wherever they do meet. */
@media(max-width:1640px){.hero-stamp{display:none;}}
.hero-eyebrow{position:relative;z-index:3;}
.hero-underrule{height:1px;background:var(--rule-soft);}



.secgrid{display:flex;flex-wrap:wrap;gap:clamp(24px,3vw,54px);align-items:flex-start;}
/* 320 + 600 + the gap needs 958px, and the content column is 937 at a 1280
   viewport once the navigation rail has taken its width. So the two-column
   section stacked at 1280 while splitting correctly at both 1024 and 1440:
   a common laptop got a worse layout than a smaller screen, and the sticky
   heading rail and the split reveal both became meaningless there because
   there was no second column to hold. 270 keeps the split down to 908px of
   content and still stacks on a phone, where stacking is correct. */
.secgrid .sechead{flex:1 1 min(270px,100%);}
.secgrid .secbody{flex:1 1 min(600px,100%);min-width:0;}
/* without min-width:0 a flex item refuses to shrink below its content, so a
   wide table pushed the whole column past the edge of a phone screen instead of
   scrolling inside its own frame */
.sechead{position:sticky;top:96px;align-self:start;}
/* A rail that pins but never travels is a gesture that costs the reader
   attention and returns nothing. Below roughly 260 words the body is shorter
   than the viewport, so the heading would stick and immediately unstick. */
.sechead.loose{position:static;}
/* static, not unpositioned: .notecard and .sheetcard both paint an
   absolutely-positioned pseudo-element, and taking position off the card sent
   the ruled-paper texture and the turned corner to the initial containing
   block. The ruling then striped the whole page, across the dark hero, on 33
   pages at every width under 1000. Stop the stickiness, keep the containment. */
@media(max-width:999px){.sechead{position:relative;top:auto;}}
/* A paragraph gap has to read as larger than the leading or four paragraphs
   render as one grey block. Body leading is 28px, so 18px was doing the
   opposite of what it was there for. */
.secbody .body + .body{margin-top:clamp(20px,2vw,30px);}
.secbody .body{max-width:78ch;}
/* an inline link at a 22px line box is a 22px target. Vertical padding on an
   inline element enlarges the hit area without moving the line, and gives the
   underline a little more room besides. */
a.inl{color:var(--ink);border-bottom:1px solid var(--mid);padding-block:2px;transition:color var(--t-hover),border-color var(--t-hover);}
a.inl:hover{color:var(--accent);border-color:var(--accent);}


/* ── what sets this apart: heading left, facts as timed cards right ── */
.factwrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:clamp(30px,4vw,64px);align-items:stretch;}
.factlead .body{max-width:52ch;}
@media(min-width:1000px){
  .factdeck{display:flex;flex-direction:column;}
  .factdeck .deckstage{flex:1 1 auto;}
}
.factdeck{position:relative;}
.deckstage{position:relative;min-height:290px;}
@media(min-width:1000px){.deckstage{min-height:250px;}}
.fcarditem{
  position:absolute;inset:0;border:1px solid var(--mid-line);background:#FAF8F5;
  padding:clamp(26px,2.8vw,40px);display:flex;flex-direction:column;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.99);pointer-events:none;
  transition:opacity 620ms cubic-bezier(.19,1,.22,1),transform 620ms cubic-bezier(.19,1,.22,1),visibility 0s linear 620ms;
}
/* visibility, not opacity alone. Card 05 carries a link, and an opacity:0 link
   still takes focus, so the caret landed on a target nobody could see. */
.fcarditem[data-on="true"]{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s;}
.fcarditem .fi{font-family:var(--sans);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe);}
.fcarditem h3{font-size:clamp(1.15rem,1.7vw,1.42rem);line-height:1.34;margin-top:10px;}
.fcarditem p{margin-top:14px;font-size:.94rem;font-weight:400;line-height:1.85;color:var(--ink-72);}
.deckbar{display:flex;align-items:center;gap:14px;margin-top:22px;}
.dots{display:flex;gap:8px;flex:1;flex-wrap:wrap;}
/* the mark stays a 3px rule; the tappable area around it is a full 24px, so a
   thumb can actually hit it */
.dots button{
  width:34px;height:24px;border:none;padding:0;cursor:pointer;background:none;position:relative;
  display:grid;place-items:center;
}
.dots button::before{
  content:"";display:block;width:34px;height:3px;background:var(--rule-soft);
  transition:background var(--t-hover);
}
.dots button:hover::before,.dots button[aria-current="true"]::before{background:var(--mid-line);}
.dots button i{position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;background:var(--accent);transform:scaleX(0);transform-origin:left center;}
.dots button[aria-current="true"] i{animation:dwell var(--dwell,6500ms) linear forwards;}
.deck-paused .dots button[aria-current="true"] i{animation-play-state:paused;}
@keyframes dwell{from{transform:scaleX(0);}to{transform:scaleX(1);}}
.dots button:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}
.decknav{display:flex;gap:7px;}
.decknav button{width:32px;height:32px;border-radius:50%;border:1px solid var(--mid-line);background:transparent;color:var(--accent);cursor:pointer;display:grid;place-items:center;transition:background var(--t-hover),color var(--t-hover);}
.decknav button:hover{background:var(--accent);color:var(--bg);}
.decknav svg{width:13px;height:13px;}
@media(prefers-reduced-motion:reduce){
  /* no rotation: every fact is present at once */
  .deckstage{min-height:0;}
  .fcarditem{position:static;opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:none;margin-bottom:14px;}
  .deckbar{display:none;}
}

/* ── is / is not, as tabs ── */
.tabs{margin-top:clamp(30px,3.6vw,48px);max-width:none;border:1px solid var(--mid-line);background:#FAF8F5;}
.tablist{display:flex;gap:0;border-bottom:1px solid var(--mid-line);padding:0 clamp(14px,1.6vw,26px);}
.tablist button{
  background:none;border:none;cursor:pointer;padding:14px 22px 15px;position:relative;
  font-family:var(--serif);font-size:clamp(1rem,1.5vw,1.18rem);color:var(--ink-55);
  transition:color var(--t-hover);
}
.tablist button em{font-style:italic;}
.tablist button::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left center;transition:transform 480ms cubic-bezier(.19,1,.22,1);
}
.tablist button[aria-selected="true"]{color:var(--ink);}
.tablist button[aria-selected="true"]::after{transform:scaleX(1);}
.tablist button:hover{color:var(--ink);}
.tablist button:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;}
.tabpanel{display:none;padding:clamp(6px,1vw,14px) clamp(20px,2.2vw,34px) clamp(24px,2.6vw,36px);}
.tabpanel[data-open="true"]{display:block;animation:tabin 520ms cubic-bezier(.19,1,.22,1);}
/* inside the tabs: no rules, a drawn sprig marks each item */
.tabpanel .check li{border:none;padding:13px 0 13px 34px;position:relative;}
.tabpanel .check li::before{content:"";position:absolute;left:0;top:1.15em;width:18px;height:18px;background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20stroke%3D%22%23334E5B%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M9%2017V6%22%2F%3E%3Cpath%20d%3D%22M8.7%209.6C5.9%209%204.2%207%203.9%203.6c3%20.4%204.7%202.3%204.9%205.4Z%22%2F%3E%3Cpath%20d%3D%22M9.4%207.4c2.7-.8%204.2-2.9%204.2-6.2-2.9.8-4.4%202.9-4.2%205.9Z%22%2F%3E%3Cpath%20d%3D%22M8.8%2013.4c-2.3-.5-3.7-2-4-4.7%22%2F%3E%3C%2Fsvg%3E');background-repeat:no-repeat;background-size:contain;opacity:.8;}
@media(min-width:1080px){
  .tabpanel .check{columns:34ch auto;column-gap:clamp(40px,4.4vw,80px);}
  .tabpanel .check li{break-inside:avoid;}
}
@keyframes tabin{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.tabpanel .check{margin-top:0;max-width:none;}
@media(prefers-reduced-motion:reduce){
  .tabpanel[data-open="true"]{animation:none;}
  .tablist button::after{transition:none;}
}
.isnot{display:grid;grid-template-columns:1fr;gap:clamp(26px,3vw,52px);margin-top:clamp(34px,4vw,56px);}
@media(min-width:900px){.isnot{grid-template-columns:1fr 1fr;}}
.isnot .col h3{margin-bottom:6px;}
.check.muted li{color:var(--ink-55);}
.apart{display:grid;grid-template-columns:1fr;gap:0;margin-top:clamp(30px,4vw,48px);}
@media(min-width:900px){.apart{grid-template-columns:1fr 1fr;column-gap:clamp(30px,4vw,60px);}}
.apart .it{padding:16px 0;border-top:1px solid var(--rule-soft);}
.apart .it b{display:block;font-weight:400;color:var(--ink);font-family:var(--serif);font-size:1.02rem;margin-bottom:5px;}
.apart .it span{font-size:.92rem;font-weight:400;line-height:1.85;color:var(--ink-72);}
.begins{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:clamp(16px,1.9vw,28px);margin-top:clamp(30px,4vw,48px);}
.begins .b{background:#FAF8F5;border:1px solid var(--mid-line);padding:clamp(24px,2.6vw,34px);}
.begins .b .n{font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);}
.begins .b h3{font-size:1.16rem;margin-top:9px;}
.begins .b p{margin-top:12px;font-size:.9rem;line-height:1.85;color:var(--ink-72);}
/* ── questions, collapsed so a reader can find their own ── */
.qaset{border-top:1px solid var(--rule-soft);max-width:78ch;}
details.qa{border-bottom:1px solid var(--rule-soft);}
details.qa summary{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:16px;
  padding:19px 0;font-family:var(--serif);font-size:clamp(1.02rem,1.35vw,1.16rem);
  line-height:1.45;color:var(--ink);transition:color var(--t-hover);
}
details.qa summary::-webkit-details-marker{display:none;}
details.qa summary::after{
  content:"";flex:none;width:11px;height:11px;margin-top:.42em;margin-left:auto;
  border-right:1.4px solid var(--taupe);border-bottom:1.4px solid var(--taupe);
  transform:rotate(45deg);transition:transform 260ms cubic-bezier(.19,1,.22,1);
}
details.qa[open] summary::after{transform:rotate(-135deg);}
details.qa summary:hover{color:var(--accent);}
details.qa summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.qa-body{padding:0 0 22px;}
.qa-body .body{margin-top:0;}
.qa-body .body + .body{margin-top:16px;}
@media(prefers-reduced-motion:reduce){details.qa summary::after{transition:none;}}
.centrecol .qaset{text-align:left;max-width:78ch;margin-left:auto;margin-right:auto;}

.qlist{list-style:none;margin:26px 0 0;padding:0;max-width:76ch;}
.qlist li{padding:13px 0;border-bottom:1px solid var(--rule-soft);font-family:var(--serif);font-size:1.02rem;line-height:1.5;color:var(--ink);}
.qlist li:first-child{border-top:1px solid var(--rule-soft);}
.domterms{margin-top:14px;font-size:.85rem;line-height:1.9;color:var(--ink-72);}
.domterms a{color:var(--ink);border-bottom:1px solid var(--mid);}
.domterms a:hover{color:var(--accent);border-color:var(--accent);}
.safety{border:1px solid var(--mid-line);background:#FAF8F5;padding:clamp(26px,3.2vw,44px);max-width:880px;margin-inline:auto;text-align:center;}
.safety .body{max-width:70ch;margin-inline:auto;}
.safety .body + .body{margin-top:16px;}
.exitnote{margin-top:22px;padding-top:20px;border-top:1px solid var(--rule-soft);max-width:74ch;margin-inline:auto;font-size:.855rem;line-height:1.85;color:var(--ink-72);}
.cwf{padding:var(--s-sm) 0 0;}
.cwf p{max-width:76ch;margin:0 auto;text-align:center;border-left:none;padding-left:0;font-size:.82rem;line-height:1.85;color:var(--ink-55);}

.tick{border-bottom:1px solid var(--rule-soft);overflow:hidden;padding:13px 0;margin-top:0;}
.tick-track{display:flex;width:max-content;animation:slide 78s linear infinite;}
.tick:hover .tick-track{animation-play-state:paused;}
.tick i{font-family:var(--serif);font-style:italic;font-size:.94rem;color:var(--taupe);padding:0 22px;white-space:nowrap;}
.tick i::after{content:"\2022";margin-left:22px;color:var(--mid);}
@keyframes slide{from{transform:translateX(0);}to{transform:translateX(-50%);}}

.curve{display:block;width:100%;height:clamp(40px,5vw,80px);}
.curve path{fill:currentColor;}

.panel{border:1px solid var(--mid-line);background:#FAF8F5;padding:clamp(32px,4.6vw,74px) clamp(22px,4.4vw,68px);text-align:center;}
.glyph{width:34px;height:34px;margin:0 auto 20px;color:var(--mid);}
.panel .lede{margin:20px auto 0;max-width:70ch;}

/* ── 01/02/03 cards: deliberate centre-drop, not a slope ── */
.cards{display:grid;grid-template-columns:1fr;gap:26px;margin-top:var(--s-sm);}
@media(min-width:960px){
  .cards{grid-template-columns:repeat(3,1fr);align-items:start;}
  .card:nth-child(2){margin-top:56px;}   /* centre sits lower; outer two align */
}
.card{background:#FAF8F5;border:1px solid var(--rule-soft);border-radius:2px;transition:border-color var(--t-hover),transform var(--t-hover),box-shadow var(--t-hover);}
.card:hover{border-color:var(--mid-line);transform:translateY(-4px);box-shadow:0 22px 44px -32px rgba(27,27,24,.4);}
.card .ctop{position:relative;height:220px;overflow:hidden;}
/* The numeral and its label sit on a photographic plate whose value is not
   under our control, and the ten-pixel label measured 2.31:1 against the Sex
   card. A soft light wash in that corner only, so the plate reads as a plate
   everywhere else. */
.card .ctop::after{content:"";position:absolute;left:0;top:0;width:190px;height:150px;z-index:2;pointer-events:none;
  background:radial-gradient(125px 105px at 30px 26px,rgba(250,248,245,.97),rgba(250,248,245,.86) 46%,rgba(250,248,245,0) 100%);}
.card .ctop .plate{position:absolute;inset:0;transition:transform 900ms cubic-bezier(.19,1,.22,1);}
.card:hover .ctop .plate{transform:scale(1.045);}
.card .cnum{position:absolute;left:20px;top:16px;z-index:3;font-family:var(--serif);font-size:2.3rem;line-height:1;color:var(--accent);}
.card .cnum small{display:block;font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;margin-top:5px;color:var(--taupe);}
.card .cin{padding:26px 26px 4px;}
.card h3{font-size:1.18rem;line-height:1.42;min-height:2.9em;}
.card .cin .body{margin-top:13px;font-size:.92rem;}
.ctog{width:100%;background:none;border:none;border-top:1px solid var(--rule-soft);margin-top:22px;padding:16px 26px;display:flex;align-items:center;justify-content:space-between;gap:14px;color:var(--taupe);cursor:pointer;transition:background var(--t-hover),color var(--t-hover);text-align:left;}
.ctog:hover{background:var(--surface);color:var(--accent);}

/* ── cost estimators: real arithmetic, run entirely in the reader's browser ── */
.calc{background:#FCFAF7;border:1px solid var(--mid-line);padding:clamp(22px,2.4vw,34px);margin:clamp(24px,2.6vw,34px) 0;
  box-shadow:0 1px 0 rgba(27,27,24,.04),0 22px 48px -38px rgba(27,27,24,.30);}
.calcgrid{display:flex;flex-wrap:wrap;gap:clamp(18px,2.2vw,28px);}
.cfield{flex:1 1 min(260px,100%);min-width:0;display:flex;flex-direction:column;gap:9px;}
/* the session-type field carries the longest string in the calculator, and a
   closed select truncates without a word of warning */
.cfield.cwide{flex-basis:min(340px,100%);}
.cfield.cinline{flex-direction:row;align-items:center;gap:11px;flex-basis:100%;}
.clab{font-family:var(--sans);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--taupe);}
.clab b{font-weight:600;color:var(--accent);font-size:12px;letter-spacing:.06em;}
.chelp{font-family:var(--sans);font-size:.78rem;line-height:1.6;color:var(--ink-72);}
.calc select,.cmoney input{font-family:var(--sans);font-size:.92rem;color:var(--ink);background:var(--bg);
  border:1px solid var(--mid-line);border-radius:var(--r-btn);padding:11px 13px;width:100%;}
.calc select:focus-visible,.cmoney input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.cmoney{display:flex;align-items:center;gap:8px;}
.cmoney i{font-style:normal;font-family:var(--sans);font-size:.92rem;color:var(--taupe);}
.calc input[type=range]{width:100%;accent-color:var(--accent);}
.calc input[type=checkbox]{width:17px;height:17px;accent-color:var(--accent);flex:none;}
.calcout{margin:clamp(24px,2.6vw,32px) 0 0;padding-top:clamp(18px,2vw,24px);border-top:1px solid var(--rule-soft);
  display:flex;flex-direction:column;gap:0;}
.calcout > div{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:9px 0;
  border-bottom:1px solid var(--rule-soft);}
.calcout dt{font-family:var(--sans);font-size:.85rem;color:var(--ink-72);}
.calcout dd{margin:0;font-family:var(--serif);font-size:1rem;color:var(--ink);font-variant-numeric:tabular-nums;}
.calcout .cplus dd{color:var(--accent);}
.calcout .cminus dd{color:var(--taupe);}
.calcout .ctotal{border-bottom:none;border-top:1px solid var(--mid-line);margin-top:6px;padding-top:15px;}
.calcout .ctotal dt{color:var(--ink);letter-spacing:.05em;text-transform:uppercase;font-size:11px;}
.calcout .ctotal dd{font-size:clamp(1.32rem,2.2vw,1.7rem);}
.cnote{margin-top:16px;font-family:var(--sans);font-size:.78rem;line-height:1.72;color:var(--ink-72);}
@media(prefers-reduced-motion:no-preference){.calcout dd{transition:color 220ms ease;}}

/* ── reading checklist: encouragement, never a gate ── */
.checklist{background:#FCFAF7;border:1px solid var(--mid-line);padding:clamp(22px,2.4vw,34px);
  margin:clamp(24px,2.6vw,34px) 0;box-shadow:0 1px 0 rgba(27,27,24,.04),0 22px 48px -38px rgba(27,27,24,.30);}
.ckbar{height:3px;background:var(--mid-line);overflow:hidden;}
.ckfill{height:100%;background:var(--accent);width:0;transition:width 520ms cubic-bezier(.19,1,.22,1);}
.ckcount{margin-top:13px;font-family:var(--sans);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--taupe);}
.cklist{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:2px;}
.cklist label{display:flex;align-items:flex-start;gap:13px;padding:11px 0;cursor:pointer;
  border-bottom:1px solid var(--rule-soft);}
.cklist li:last-child label{border-bottom:none;}
.cklist input{position:absolute;opacity:0;width:1px;height:1px;}
.ckbox{flex:none;width:19px;height:19px;margin-top:2px;border:1px solid var(--mid-line);background:var(--bg);
  position:relative;transition:background var(--t-hover),border-color var(--t-hover);}
.ckbox::after{content:"";position:absolute;left:5px;top:1px;width:6px;height:11px;
  border:solid var(--bg);border-width:0 1.6px 1.6px 0;transform:rotate(42deg) scale(.4);opacity:0;
  transition:opacity 180ms ease,transform 260ms cubic-bezier(.19,1,.22,1);}
.cklist input:checked + .ckbox{background:var(--accent);border-color:var(--accent);}
.cklist input:checked + .ckbox::after{opacity:1;transform:rotate(42deg) scale(1);}
.cklist input:focus-visible + .ckbox{outline:2px solid var(--accent);outline-offset:3px;}
.cktxt{font-size:.94rem;line-height:1.6;}
.cktxt a{color:var(--ink);border-bottom:1px solid var(--mid-line);display:inline-block;padding:3px 0;}
.cktxt a:hover{color:var(--accent);border-color:var(--accent);}
.ckwhy{color:var(--ink-72);display:block;margin-top:3px;}
.cklist input:checked ~ .cktxt{color:var(--taupe);}
.ckdone{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule-soft);
  font-family:var(--serif);font-style:italic;font-size:1rem;line-height:1.62;color:var(--accent);}
.ckpetal{position:fixed;top:0;width:9px;height:9px;border-radius:50% 0 50% 0;pointer-events:none;z-index:95;}
@media(prefers-reduced-motion:reduce){.ckfill,.ckbox,.ckbox::after{transition:none;}}

/* wayfinding: locations and the practical pages, side by side, each column
   sized to its own content rather than to a breakpoint */
.wayfind{display:flex;flex-wrap:wrap;gap:clamp(20px,2.6vw,34px);margin-top:clamp(30px,3.4vw,48px);}
.wf{flex:1 1 min(360px,100%);min-width:0;background:#FCFAF7;border:1px solid var(--mid-line);
  padding:clamp(24px,2.4vw,36px) 0 0;display:flex;flex-direction:column;
  box-shadow:0 1px 0 rgba(27,27,24,.04),0 22px 48px -38px rgba(27,27,24,.32);}
.wf > *:not(.ctog){margin-left:clamp(24px,2.4vw,36px);margin-right:clamp(24px,2.4vw,36px);}
.wfhead{display:flex;align-items:center;gap:13px;}
.wfhead svg{width:26px;height:26px;flex:none;color:var(--accent);}
.wfhead h3{font-family:var(--serif);font-size:clamp(1.14rem,1.6vw,1.4rem);line-height:1.28;}
.wf .body{margin-top:14px;font-size:.94rem;}
.wflist{list-style:none;padding:0;margin:20px 0 26px;columns:20ch auto;column-gap:clamp(18px,2.4vw,34px);}
.wflist li{break-inside:avoid;margin-bottom:9px;font-size:.92rem;line-height:1.5;}
.wflist a{display:inline-block;padding:3px 0;color:var(--ink-72);border-bottom:1px solid transparent;transition:color var(--t-hover),border-color var(--t-hover);}
.wflist a:hover{color:var(--accent);border-color:var(--accent);}
.wf .ctog{margin-top:auto;}
.ctog .pm{font-size:1.1rem;line-height:1;transition:transform var(--t-acc);}
.card.open .ctog .pm{transform:rotate(45deg);}
.cpan{max-height:0;overflow:hidden;transition:max-height var(--t-acc);}
.card.open .cpan{max-height:420px;}
.cpan .cpin{padding:20px 26px 26px;border-top:1px solid var(--rule-soft);}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;}
.tag{border:1px solid var(--mid-line);border-radius:999px;padding:5px 13px;font-family:var(--sans);font-size:10.5px;letter-spacing:.06em;color:var(--ink-72);}
.more{display:inline-flex;align-items:center;gap:8px;margin-top:20px;color:var(--accent);border-bottom:1px solid var(--mid-line);padding-bottom:3px;transition:border-color var(--t-hover);}
.more:hover{border-color:var(--accent);}

.band{position:relative;min-height:clamp(400px,48vw,580px);display:grid;place-items:center;overflow:hidden;}
.band > .plate{position:absolute;inset:0;}
.fcardw{position:relative;z-index:2;background:var(--bg);border:1px solid var(--mid-line);border-radius:2px;width:min(720px,calc(100% - var(--gutter) * 2));min-width:0;margin:var(--s-md) auto;padding:clamp(30px,4vw,58px);text-align:center;}
.fcardw blockquote{margin:0;font-family:var(--serif);font-size:clamp(1.16rem,2vw,1.62rem);line-height:1.5;}
.fcardw cite{display:block;margin-top:20px;font-family:var(--sans);font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);}

.split{display:grid;grid-template-columns:1fr;gap:clamp(34px,4vw,68px);align-items:center;}
@media(min-width:960px){.split{grid-template-columns:1fr 1fr;}}
.cluster{position:relative;height:clamp(360px,42vw,520px);}
.cluster .framed{position:absolute;transition:transform var(--t-acc);}
.cluster .p1{left:0;top:0;width:60%;height:60%;}
.cluster .p2{right:0;top:24%;width:44%;height:46%;box-shadow:0 24px 50px -30px rgba(27,27,24,.4);}
.cluster .p3{left:14%;bottom:0;width:38%;height:32%;}
.cluster:hover .p1{transform:translate(-5px,-5px);}
.cluster:hover .p2{transform:translate(5px,4px);}
.cluster:hover .p3{transform:translate(-3px,5px);}

.check{list-style:none;margin:24px 0 0;padding:0;}
.check li{padding:13px 0;border-bottom:1px solid var(--rule-soft);font-size:.94rem;font-weight:400;color:var(--ink-72);}
.check li:first-child{border-top:none;}
.check b{display:inline;font-weight:400;color:var(--ink);}
.check b{font-weight:400;color:var(--ink);}

.printed{background:#FCFAF7;padding:15px 15px 52px;box-shadow:0 26px 54px -28px rgba(27,27,24,.42);transform:rotate(-1.6deg);width:min(100%,340px);transition:transform var(--t-acc);}
.printed:hover{transform:rotate(-.5deg) translateY(-4px);}
.printed .plate{aspect-ratio:4/5;}
.printed picture{display:block;}
.printed img{display:block;width:100%;max-width:100%;height:auto;}
.printed figure,figure.printed{margin:0;}
.portrait{background:radial-gradient(64% 52% at 50% 30%,rgba(255,255,255,.3),transparent 70%),linear-gradient(172deg,#D8D5D1,#C6C2BD 58%,#AEAAA5);}
.portrait::after{content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:62%;height:46%;background:linear-gradient(180deg,#C9A227 0%,#B8912083 62%,transparent);border-radius:46% 46% 0 0;opacity:.5;}
.pcap{margin-top:15px;text-align:center;font-family:var(--serif);font-style:italic;font-size:.88rem;color:var(--taupe);}

.ghostw{position:relative;overflow:hidden;}
.ghost{position:absolute;left:50%;transform:translateX(-50%);top:4px;font-family:var(--serif);font-style:italic;font-size:clamp(3.4rem,11vw,10.5rem);line-height:.9;color:rgba(180,164,141,.16);white-space:nowrap;pointer-events:none;user-select:none;}

.faq{margin-top:var(--s-sm);border-top:1px solid var(--rule);}
.fi{border-bottom:1px solid var(--rule);}
.fq{width:100%;background:none;border:none;text-align:left;cursor:pointer;padding:22px 0;display:flex;gap:18px;align-items:baseline;transition:color var(--t-hover);font-family:var(--serif);font-size:clamp(.98rem,1.4vw,1.12rem);line-height:1.5;color:var(--ink);}
.fq:hover{color:var(--accent);}
.fq .fn{font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;color:var(--taupe);flex:none;min-width:24px;padding-top:4px;}
.fq .ft{flex:1;}
.fq .fp{flex:none;color:var(--mid);font-size:1.05rem;line-height:1;transition:transform var(--t-acc);padding-top:4px;}
.fi.open .fq .fp{transform:rotate(45deg);}
.fa{max-height:0;overflow:hidden;transition:max-height var(--t-acc);}
.fi.open .fa{max-height:480px;}
.fa .fain{padding:0 0 24px 42px;}
.fa .fain p{font-size:.93rem;line-height:1.9;color:var(--ink-72);max-width:76ch;}

.ctaw{position:relative;z-index:2;background:var(--bg);border:1px solid var(--mid-line);border-radius:2px;width:min(820px,calc(100% - var(--gutter) * 2));min-width:0;margin:var(--s-md) auto;padding:clamp(30px,4vw,60px);}
.ctaw h3{margin-top:14px;}
.ctaw .body{margin-top:18px;}
.ctaw .btns{margin-top:clamp(40px,3.4vw,54px);}
.ctafoot{margin-top:24px;padding-top:20px;border-top:1px solid var(--rule-soft);}

footer.site{position:relative;background:var(--bg);padding:var(--s-lg) 0 0;overflow:hidden;}
/* The watermark was set at 21vw on a nowrap line, so it ran wider than the
   column and got clipped at both ends: what a visitor actually read, at the
   largest type size on the page, was the practice's own name with letters
   missing. It is sized to the content column now and stays whole. */
.fmark{
  position:absolute;left:50%;top:46px;transform:translateX(-50%);
  font-family:var(--serif);font-size:min(9rem, 15cqi);line-height:1;
  letter-spacing:.07em;text-transform:uppercase;color:rgba(180,164,141,.10);
  white-space:nowrap;pointer-events:none;user-select:none;z-index:0;
}
footer.site{container-type:inline-size;}
footer.site .wrap{position:relative;z-index:1;}
@media(max-width:999px){
  /* footer is far taller once the cards stack; anchor the watermark to the
     heading rather than to a percentage of that height */
  .fmark{top:88px;transform:translateX(-50%);font-size:clamp(2.6rem,11vw,5rem);}
}
.fhead{display:grid;grid-template-columns:1fr;gap:22px;align-items:start;}
@media(min-width:900px){.fhead{grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,80px);}}
.fhead h2{font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.18;}
.fhead p{font-size:.97rem;line-height:1.9;color:var(--ink-72);max-width:66ch;}
.fcards{display:grid;grid-template-columns:1fr;gap:clamp(16px,1.6vw,22px);margin-top:clamp(44px,6vw,86px);}
@media(min-width:680px){.fcards{grid-template-columns:1fr 1fr;}}
/* Two columns, not four. The footer sits inside the same 1240px measure as the
   rest of the page, so a four-column row is about 265px whatever the viewport
   is: under forty characters a line of 16px body copy, ragged enough that the
   four blocks read as one grey mass. Two-up gives a real measure, and the copy
   itself is capped so it does not run too long the other way. */
.fcards .fc p,.fcards .fc li{max-width:62ch;}
.fc{border:1px solid var(--rule);background:transparent;padding:clamp(22px,2vw,30px);display:flex;flex-direction:column;}
.fc h3{font-size:1.06rem;font-weight:400;}
.fc p{margin-top:16px;font-size:.845rem;line-height:1.92;color:var(--ink-72);}
.fc a.inl{color:var(--ink);border-bottom:1px solid var(--mid);transition:border-color var(--t-hover),color var(--t-hover);}
.fc a.inl:hover{color:var(--accent);border-color:var(--accent);}
.qr{display:block;width:158px;margin-top:20px;background:#FCFAF7;padding:10px;align-self:flex-start;border:1px solid rgba(180,164,141,.5);text-decoration:none;transition:border-color var(--t-hover),transform var(--t-hover);}
.qr:hover,.qr:focus-visible{border-color:var(--tan);transform:translateY(-2px);}
.qr svg,.qr .qrimg{display:block;width:100%;height:auto;aspect-ratio:1;}
/* on the cream QR card this must be --taupe: --tan measures 1.62:1 there */
.qrtap{display:block;margin-top:9px;font-family:var(--sans);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;line-height:1.6;color:var(--taupe);}
/* social band */
.fsocial{margin-top:clamp(50px,6vw,88px);background:var(--taupe);padding:26px 0;}
.fsocial .row{display:flex;justify-content:center;gap:14px;padding-left:var(--gutter);padding-right:var(--gutter);}
.fsocial a{width:30px;height:30px;border-radius:50%;background:#1B1B18;display:grid;place-items:center;transition:background var(--t-hover),transform var(--t-hover);}
.fsocial a:hover{background:var(--accent);transform:translateY(-2px);}
.fsocial svg{width:14px;height:14px;color:#F3F0EC;}
/* legal band */
.flegal{background:#141412;color:rgba(243,240,236,.66);padding:34px 0 30px;text-align:center;}
.flegal .cline{font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:.13em;color:var(--mid);}
.flegal .disc{margin-top:10px;font-size:.8rem;line-height:1.8;max-width:74ch;margin-left:auto;margin-right:auto;}
.flegal .llinks{margin-top:16px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0;font-size:.78rem;line-height:1.9;}
.flegal .llinks a{color:rgba(243,240,236,.78);border-bottom:1px solid rgba(180,164,141,.4);padding-bottom:1px;transition:color var(--t-hover),border-color var(--t-hover);}
.flegal .llinks a:hover{color:#F3F0EC;border-color:var(--mid);}
.flegal .llinks .sep{color:rgba(180,164,141,.5);padding:0 9px;}
.flegal .entity{margin-top:18px;font-size:.79rem;line-height:1.85;max-width:80ch;margin-left:auto;margin-right:auto;color:rgba(243,240,236,.74);}
.flegal .ribbon{margin-top:22px;padding-top:18px;border-top:1px solid rgba(180,164,141,.2);display:flex;align-items:center;justify-content:center;gap:9px;font-size:10.5px;letter-spacing:.05em;color:rgba(243,240,236,.5);padding-bottom:8px;}
/* the back-to-top button is fixed at the bottom right and the acknowledgment
   is the last line on the page, so on a phone the button sat over the words
   "sexual violence" — the one line on the site that must never be obscured.
   Room is reserved for it below 620px rather than hiding the button. */
@media(max-width:620px){.flegal .ribbon{padding-right:62px;text-align:left;justify-content:flex-start;}}
.flegal .ribbon svg{width:12px;height:19px;color:var(--mid);flex:none;}
.flegal .lcookie{background:none;border:none;padding:0;cursor:pointer;font-family:var(--sans);font-size:.78rem;font-weight:300;letter-spacing:.02em;color:rgba(243,240,236,.78);border-bottom:1px solid rgba(180,164,141,.4);transition:color var(--t-hover),border-color var(--t-hover);}
.flegal .lcookie:hover{color:#F3F0EC;border-color:var(--mid);}
/* visibility, not opacity alone: an opacity:0 button keeps its place in the tab
   order, so every page had an invisible stop just before the end. */
.totop{position:fixed;right:18px;bottom:18px;z-index:70;width:44px;height:44px;border-radius:50%;background:var(--accent);border:none;cursor:pointer;display:grid;place-items:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--t-hover),visibility 0s linear var(--t-hover),background var(--t-hover),transform var(--t-hover);}
.totop.show{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s;}
.totop:hover{background:#263D48;transform:translateY(-2px);}
.totop svg{width:19px;height:19px;color:var(--bg);}


/* A URL printed as plain text is one word to a browser, and it will not break
   it. The legal documents print several in full, on purpose, so a reader can
   copy one down from paper. The Indiana complaint address added on 3 August
   carried a 45-character run before its first hyphen and pushed the HIPAA
   notice 42px past a 320px screen.

   break-word rather than anywhere: it only breaks a word that cannot fit on a
   line of its own, so ordinary prose is untouched and only the overlong token
   is affected. Applied to body copy generally rather than to that paragraph,
   because the next long URL somebody pastes in should not be able to do this
   again. */
.body,.secbody p,.page-lead,li{overflow-wrap:break-word;}

/* -- accessibility preferences, a persistent control on every page ------
   Dr. Lapite-Garrett, 3 August 2026: "can you also create an accessibility
   widget menu? one that is circular and sits above or below the scroll to top
   arrow and shows on every page for accessibility considerations?"

   One thing this deliberately is not: an overlay that claims to make the site
   compliant. Those are widely and correctly criticised, because they let a site
   skip the actual work and they frequently break the assistive technology a
   person already uses. This site is measured against WCAG 2.1 AA from painted
   pixels at eight widths on every build, and that is where compliance comes
   from. What this panel offers is preferences a reader may want on top of a
   site that already works: text size, contrast, motion, and link underlines.
   The panel says so itself rather than implying otherwise.

   The button never moves. The back-to-top arrow appears and disappears with
   scroll position, so it stacks above this one rather than the other way round:
   a control that relocates depending on scroll is the wrong thing to hand
   someone with a motor impairment. */
.a11yb{
  position:fixed;right:18px;bottom:18px;z-index:96;width:44px;height:44px;border-radius:50%;
  background:var(--surface);border:1px solid var(--mid-line);cursor:pointer;display:grid;place-items:center;
  box-shadow:0 6px 20px -10px rgba(27,27,24,.5);
  transition:background var(--t-hover),border-color var(--t-hover),transform var(--t-hover);
  transform:translateY(calc(-1 * var(--ckh,0px)));
}
.a11yb:hover{background:var(--accent);border-color:var(--accent);transform:translateY(calc(-1 * var(--ckh,0px) - 2px));}
.a11yb:hover svg{color:var(--bg);}
.a11yb:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.a11yb svg{width:20px;height:20px;color:var(--accent);}
.totop{bottom:74px;transform:translateY(calc(-1 * var(--ckh,0px)));}
.totop:hover{transform:translateY(calc(-1 * var(--ckh,0px) - 2px));}
.a11yp{
  position:fixed;right:18px;bottom:74px;z-index:97;width:min(320px,calc(100vw - 36px));
  background:var(--bg);border:1px solid var(--mid-line);border-radius:5px;
  box-shadow:0 26px 60px -30px rgba(27,27,24,.7);padding:18px 18px 16px;
  transform:translateY(calc(-1 * var(--ckh,0px)));
  max-height:min(76vh,620px);overflow-y:auto;overscroll-behavior:contain;
}
.a11yp[hidden]{display:none;}
.a11yp .ahead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.a11yp h4{font-family:var(--serif);font-size:1.02rem;font-weight:400;margin:0;line-height:1.3;}
.a11yp .anote{font-family:var(--sans);font-size:10.5px;line-height:1.7;color:var(--ink-55);margin:8px 0 14px;}
.a11yp .axclose{background:none;border:1px solid var(--mid-line);border-radius:50%;width:26px;height:26px;
  flex:none;cursor:pointer;color:var(--ink-72);font-size:13px;line-height:1;display:grid;place-items:center;}
.a11yp .axclose:hover{border-color:var(--accent);color:var(--accent);}
.a11yp fieldset{border:none;padding:0;margin:0 0 13px;}
.a11yp legend{font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--taupe);padding:0;margin-bottom:7px;}
.a11yp .arow{display:flex;gap:6px;}
.a11yp .aopt{
  flex:1 1 0;min-width:0;font-family:var(--sans);font-size:11.5px;letter-spacing:.02em;
  padding:8px 6px;border:1px solid var(--mid-line);background:transparent;color:var(--ink-72);
  cursor:pointer;border-radius:3px;text-align:center;
  transition:background var(--t-hover),color var(--t-hover),border-color var(--t-hover);
}
.a11yp .aopt:hover{border-color:var(--accent);color:var(--accent);}
.a11yp .aopt[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--bg);}
.a11yp .aopt:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.a11yp .areset{width:100%;margin-top:2px;font-family:var(--sans);font-size:11px;letter-spacing:.04em;
  padding:9px;border:1px solid var(--mid-line);background:transparent;color:var(--ink-72);cursor:pointer;border-radius:3px;}
.a11yp .areset:hover{border-color:var(--accent);color:var(--accent);}

/* the preferences themselves, applied from the root element */
html[data-atext="lg"]{font-size:112.5%;}
html[data-atext="xl"]{font-size:125%;}
html[data-amotion="off"] *,html[data-amotion="off"] *::before,html[data-amotion="off"] *::after{
  animation-duration:.001ms !important;animation-iteration-count:1 !important;
  transition-duration:.001ms !important;scroll-behavior:auto !important;
}
html[data-alinks="on"] .body a,html[data-alinks="on"] p a,html[data-alinks="on"] li a,
html[data-alinks="on"] a.inl{text-decoration:underline;text-underline-offset:2px;}
/* contrast: darken the muted text tokens and firm up every hairline rule,
   without touching the palette's hues */
html[data-acontrast="high"]{--ink-72:#1B1B18;--ink-55:#2C2C27;--taupe:#5A4E3D;--mid-line:#5A4E3D;--rule-soft:#5A4E3D;}
html[data-acontrast="high"] .body,html[data-acontrast="high"] p{color:var(--ink);}

/* ── opening: the wordmark written on, once per session ───────────── */
.overture{
  position:fixed;inset:0;z-index:200;background:var(--bg);
  display:grid;place-items:center;
  transition:opacity 900ms cubic-bezier(.4,0,.2,1),visibility 0s linear 900ms;
}
.overture[hidden]{opacity:0;visibility:hidden;pointer-events:none;}
.overture .inner{text-align:center;padding:24px;max-width:min(92vw,820px);}

/* the word is revealed left to right while the nib tracks the revealing edge */
.ov-stage{position:relative;display:inline-block;}
.ov-mark{
  display:block;font-family:var(--script);font-weight:400;
  font-size:clamp(3.2rem,12vw,8.4rem);line-height:1.18;color:var(--ink);
  letter-spacing:.005em;white-space:nowrap;padding:0 .06em;
  clip-path:inset(-14% 100% -30% -6%);
  animation:write 1400ms cubic-bezier(.34,.05,.28,1) 300ms forwards;
}
@keyframes write{to{clip-path:inset(-14% -6% -30% -6%);}}

.ov-penwrap{
  position:absolute;top:0;left:0;width:0;height:100%;pointer-events:none;
  opacity:0;animation:penfade 1400ms linear 300ms forwards, penx 1400ms cubic-bezier(.34,.05,.28,1) 300ms forwards;
}
@keyframes penx{from{left:0%;}to{left:100%;}}
@keyframes penfade{0%{opacity:0;}7%{opacity:1;}88%{opacity:1;}100%{opacity:0;}}
.ov-pen{
  position:absolute;left:0;bottom:2%;display:block;
  width:clamp(78px,9.5vw,132px);height:auto;
  transform:translate(-7.2%,0);
  filter:drop-shadow(0 6px 12px rgba(27,27,24,.16));
}
.ov-pen .barrel{fill:#1B1B18;}
.ov-pen .grip{fill:#2A2724;}
.ov-pen .band{fill:#B4A48D;}
.ov-pen .nib{fill:#C4B291;}
.ov-pen .slit{stroke:#8A7A68;stroke-width:2.4;stroke-linecap:round;}
.ov-pen .hole{fill:#8A7A68;}
.ov-pen .glint{fill:#E8E2D9;opacity:.5;}

.ov-flourish{
  display:block;width:min(74vw,520px);height:auto;margin:2px auto 0;
  color:var(--mid);overflow:visible;
}
.ov-flourish path{
  stroke:currentColor;fill:none;stroke-width:2.1;stroke-linecap:round;
  stroke-dasharray:920;stroke-dashoffset:920;
  animation:draw 900ms cubic-bezier(.3,.05,.2,1) 1720ms forwards;
}
@keyframes draw{to{stroke-dashoffset:0;}}
.ov-line{
  margin-top:clamp(18px,2.4vw,30px);font-family:var(--sans);font-size:11px;font-weight:400;
  letter-spacing:.22em;text-transform:uppercase;color:var(--taupe);
  opacity:0;animation:fadeup 800ms ease 2380ms forwards;
}
@keyframes fadeup{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.ov-skip{
  position:absolute;bottom:26px;left:0;right:0;margin-inline:auto;width:max-content;
  background:none;border:1px solid var(--rule);cursor:pointer;padding:11px 26px;
  font-family:var(--sans);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-55);opacity:0;animation:fadein 600ms ease 1500ms forwards;
  transition:color var(--t-hover),border-color var(--t-hover);
}
@keyframes fadein{to{opacity:1;}}
.ov-skip:hover{color:var(--ink);border-color:var(--accent);}
.ov-skip:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
@media(prefers-reduced-motion:reduce){ .overture{display:none;} }

/* ── safety: exit button + crisis panel ─────────────────────────── */
/* The exit control sits in the rail's own stack, at the same width and the same
   left edge as the two buttons above it. It floated at a different width and a
   different edge before, which read as a stray element rather than as the last
   item in a column of three. */
.exitbtn{
  width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--ink);color:#F3F0EC;border:1px solid rgba(243,240,236,.28);border-radius:var(--r-btn);
  padding:14px 16px;cursor:pointer;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  transition:background var(--t-hover),border-color var(--t-hover);
}
.exitbtn:hover{background:#000;border-color:rgba(243,240,236,.5);}
.exitbtn:focus-visible{outline:2px solid var(--mid);outline-offset:3px;}
.exitbtn svg{width:13px;height:13px;flex:none;}
/* The exit pill is safety chrome, so it holds the same corner everywhere. On
   desktop it sits in the rail's own column and the rail reserves the room, so
   it covers neither the reading column nor its own buttons. Below that it sits
   over the page, and the page keeps a little room at the foot for it. */
/* Desktop keeps the pill, in the rail's own reserved column. Below that the
   floating pill sat on top of the primary booking button and on body copy, so
   the exit control lives in the sticky bar instead: always on screen, one tap,
   and covering nothing. */
@media(min-width:1200px){
  .barexit{display:none;}
}
/* Adding Crisis to this group put it at 215px inside a 320px screen and the
   page scrolled sideways on fourteen pages. Below 420px all four controls go
   icon-only and lose their padding; the labels are on their aria-labels and
   titles, which is what a screen reader and a long-press read anyway. */
@media(max-width:420px){
  .bar .nav-right{gap:5px;}
  .bar .nav-right .barexit span,.bar .nav-right .menubtn span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
  .bar .nav-right .barexit,.bar .nav-right .menubtn,.bar .nav-right .barcrisis{padding-inline:9px;}
  .bar .nav-right .barcta{padding-inline:13px;font-size:10px;}
  .bar .wordmark{font-size:clamp(.92rem,4.4vw,1.1rem);}
}
/* 3px over at 320 after all of that, which is the gutter. The bar is chrome and
   can sit tighter than the reading column it sits above. */
@media(max-width:340px){
  .bar .wrap{padding-inline:14px;}
  .bar .nav-right{gap:4px;}
  .bar .nav-right .barcta{padding-inline:11px;letter-spacing:.08em;}
}
@media(max-width:1199px){
  .exitbtn{display:none;}
}
.barcrisis{display:inline-flex;align-items:center;gap:7px;background:none;cursor:pointer;
  border:1px solid var(--mid-line);border-radius:var(--r-btn);padding:10px 13px;color:var(--taupe);
  transition:color var(--t-hover),border-color var(--t-hover);}
.barcrisis svg{width:14px;height:14px;flex:none;}
.barcrisis:hover{color:var(--accent);border-color:var(--accent);}
.barcrisis:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
@media(max-width:560px){.barcrisis span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}.barcrisis{padding-inline:11px;}}
.barexit{display:inline-flex;align-items:center;gap:7px;background:var(--ink);color:#F3F0EC;
  border:1px solid rgba(243,240,236,.28);border-radius:var(--r-btn);padding:12px 14px;cursor:pointer;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  transition:background var(--t-hover);}
.barexit:hover{background:#000;}
.barexit:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.barexit svg{width:14px;height:14px;flex:none;}
@media(max-width:420px){.barexit span{display:none;}.barexit{padding:12px 12px;}}
.crisisbtn{background:none;border:none;padding:0;margin-left:10px;cursor:pointer;font-family:var(--sans);font-size:11px;letter-spacing:.06em;color:#F3F0EC;border-bottom:1px solid rgba(243,240,236,.45);transition:border-color var(--t-hover);}
.crisisbtn:hover{border-color:#F3F0EC;}
.crisisbd{position:fixed;inset:0;background:rgba(27,27,24,.62);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;pointer-events:none;visibility:hidden;transition:opacity var(--t-acc),visibility 0s linear var(--t-acc);z-index:96;}
.crisisbd.show{opacity:1;pointer-events:auto;visibility:visible;transition-delay:0s;}
.crisis{background:var(--bg);border:1px solid var(--mid-line);border-radius:4px;max-width:560px;width:100%;max-height:88dvh;overflow-y:auto;padding:clamp(24px,3.4vw,38px);transform:translateY(24px);transition:transform var(--t-acc);position:relative;}
/* On a phone this panel is taller than the screen and overlay scrollbars give
   no hint of it, so the Close at the foot sat below the fold with nothing to
   suggest it was there. A second Close rides the top edge, always in view. */
.crisis .xtop{position:sticky;top:calc(clamp(24px,3.4vw,38px) * -1);float:right;margin:-8px -8px 0 12px;
  width:34px;height:34px;display:grid;place-items:center;background:var(--bg);border:1px solid var(--mid-line);
  border-radius:50%;color:var(--ink-72);cursor:pointer;padding:0;font-size:15px;line-height:1;z-index:2;
  transition:color var(--t-hover),border-color var(--t-hover);}
.crisis .xtop:hover{color:var(--ink);border-color:var(--accent);}
.crisisbd.show .crisis{transform:none;}
.crisis h4{margin-top:10px;font-size:1.34rem;}
.crisis .lead{margin-top:12px;font-size:.88rem;line-height:1.8;color:var(--ink-72);}
.crisis ul{list-style:none;margin:20px 0 0;padding:0;}
/* who a line is actually for, said in the list rather than left to the visitor
   to work out. Fifteen lines is a lot to scan when someone is not at their
   most patient, and the qualifier is what makes the right one findable. */
.crisis .nm em{display:block;font-style:italic;font-family:var(--serif);font-size:.78rem;
  color:var(--taupe);margin-top:2px;letter-spacing:0;text-transform:none;}
.crisis .allres{margin-top:18px;padding-top:14px;border-top:1px solid var(--rule-soft);
  font-family:var(--sans);font-size:.82rem;}
.crisis .allres a{color:var(--accent);border-bottom:1px solid var(--mid-line);padding-bottom:1px;}
.crisis .allres a:hover{border-color:var(--accent);}
.crisis .allres .allres-note{display:block;margin-top:6px;font-size:.78rem;line-height:1.7;color:var(--taupe);}
/* Dr. Lapite-Garrett, 2 August 2026: "can we have that button included as part
   of the navigation menu as well so this way clients dont have to scroll all
   the way down to access it?" It was in the footer only, which on a 20,000px
   page is a long way to travel for a hotline. It now sits in the rail above
   the buttons and in the full menu, reachable in one press from anywhere.
   Deliberately quieter than the calls to action: there to be found, not to
   compete for a click. */
.crisislink{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  background:none;border:1px solid var(--mid-line);border-radius:var(--r-btn);
  padding:9px 12px;cursor:pointer;color:var(--taupe);
  font-family:var(--sans);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  transition:color var(--t-hover),border-color var(--t-hover);}
.crisislink svg{width:14px;height:14px;flex:none;}
.crisislink:hover{color:var(--accent);border-color:var(--accent);}
.crisislink:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.mega .crisislink{width:auto;color:#C6B9A6;border-color:rgba(198,185,166,.42);}
.mega .crisislink:hover{color:#F3F0EC;border-color:#C6B9A6;}
.mega .crisislink:focus-visible{outline-color:#C6B9A6;}
.crisis li{padding:13px 0;border-top:1px solid var(--rule-soft);}
.crisis li .nm{font-family:var(--serif);font-size:.98rem;line-height:1.4;}
.crisis li .num{display:block;margin-top:4px;font-size:.88rem;color:var(--ink-72);}
.crisis li .num a{color:var(--accent);border-bottom:1px solid var(--mid-line);}
.crisis li .num a:hover{border-color:var(--accent);}
.crisis .note{margin-top:22px;padding-top:16px;border-top:1px solid var(--rule-soft);font-size:.8rem;line-height:1.8;color:var(--ink-55);}
.crisis .x{background:none;border:none;margin-top:20px;padding:0;cursor:pointer;color:var(--ink-55);}
.crisis .x:hover{color:var(--ink);}
@media(prefers-reduced-motion:reduce){.crisis,.crisisbd,.exitbtn,.mcol li a,.res{transition:none !important;}}
.sheetbd{position:fixed;inset:0;background:rgba(27,27,24,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;visibility:hidden;transition:opacity var(--t-acc),visibility 0s linear var(--t-acc);z-index:95;}
.sheetbd.show{opacity:1;pointer-events:auto;visibility:visible;transition-delay:0s;}
.sheet{background:var(--bg);border:1px solid var(--mid-line);border-radius:4px;max-width:460px;width:100%;max-height:88dvh;overflow-y:auto;padding:clamp(26px,3.4vw,40px);transform:translateY(26px);transition:transform var(--t-acc);}
.sheetbd.show .sheet{transform:none;}
.sheet h4{margin-top:12px;font-size:1.32rem;}
.sheet p{margin-top:14px;font-size:.89rem;line-height:1.85;color:var(--ink-72);}
.sheet .btns{margin-top:24px;}
/* ── the consent banner and the preference rows ────────────────────── */
.ckbanner{position:fixed;left:0;right:0;bottom:0;z-index:95;background:var(--ink);
  color:rgba(243,240,236,.82);border-top:1px solid rgba(180,164,141,.3);
  box-shadow:0 -18px 44px -30px rgba(0,0,0,.7);}
.ckbanner[hidden]{display:none;}
.ckbwrap{max-width:var(--maxw);margin:0 auto;padding:clamp(16px,2vw,22px) var(--gutter);
  display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,28px);align-items:center;justify-content:space-between;}
.ckbwrap p{flex:1 1 min(560px,100%);font-family:var(--sans);font-size:11.5px;line-height:1.75;letter-spacing:.02em;margin:0;}
.ckbbtns{display:flex;gap:9px;flex-wrap:wrap;flex:0 0 auto;}
.ckbanner .btn{font-size:10.5px;padding-block:11px;}
/* Decline and Manage were rendering as blank white rectangles: .btn-line sets
   its colour to var(--accent), which is a mid-tone chosen to sit on cream and
   all but disappears on the ink strip. On this background the pair get their
   own values, cream on ink at 13:1 rather than accent on ink at 1.9:1. */
.ckbanner .btn-line{color:#F3F0EC;border-color:rgba(243,240,236,.55);background:transparent;}
.ckbanner .btn-line:hover{color:#FFFFFF;border-color:#F3F0EC;background:rgba(243,240,236,.1);}
.ckbanner .btn-line:focus-visible{outline:2px solid #F3F0EC;outline-offset:2px;}
.ckbanner .btn-solid{background:#F3F0EC;color:var(--ink);border-color:#F3F0EC;}
.ckbanner .btn-solid:hover{background:#FFFFFF;border-color:#FFFFFF;}
@media(max-width:700px){.ckbwrap{flex-direction:column;align-items:stretch;}.ckbbtns .btn{flex:1 1 auto;justify-content:center;}}
/* Hit-tested 3 August 2026 at twelve viewports: the strip ran the full width of
   the window and the full height it wanted, and it was covering navigation on
   every page. Above 1200 it sat over the foot of the rail, so Begin, Exit
   Safely and Referring Professionals could not be pressed; at 320 it stacked
   into a column tall enough to reach the top bar and covered Alafiora, Crisis,
   Exit, Full Menu and Begin at once. A consent notice is not permitted to take
   the exit with it. It now starts where the rail ends and never takes more
   than half the window, scrolling inside itself if the text needs more. */
body.has-rail .ckbanner{left:var(--rail);}
.ckbanner{max-height:50vh;overflow-y:auto;overscroll-behavior:contain;}

/* The panel is taller than a phone screen and the only Close sat at the foot
   of it. The crisis dialog already solved this; the same control, same place. */
.sheet .xtop{position:sticky;top:calc(clamp(24px,3.4vw,38px) * -1);float:right;margin:-6px -6px 0 12px;
  width:34px;height:34px;display:grid;place-items:center;background:var(--bg);border:1px solid var(--mid-line);
  border-radius:50%;color:var(--ink-72);cursor:pointer;padding:0;font-size:15px;line-height:1;z-index:3;
  transition:color var(--t-hover),border-color var(--t-hover);}
.sheet .xtop:hover{color:var(--ink);border-color:var(--accent);}
.sheet .xtop:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.ckrow{display:flex;gap:clamp(14px,2vw,26px);align-items:flex-start;justify-content:space-between;
  padding:clamp(15px,1.8vw,20px) 0;border-top:1px solid var(--rule-soft);}
.ckrow:first-of-type{margin-top:8px;}
.cktext{flex:1 1 auto;min-width:0;}
.cktext b{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink);margin-bottom:5px;font-weight:400;}
.cktext span{display:block;font-family:var(--sans);font-size:.8rem;font-weight:300;line-height:1.75;color:var(--ink-72);}
.cktext .cknow{display:inline;text-transform:none;letter-spacing:normal;font-size:inherit;color:var(--accent);}
.ckfixed{flex:0 0 auto;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe);
  border:1px solid var(--mid-line);border-radius:var(--r-btn);padding:6px 11px;white-space:nowrap;}
.ckswitch{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;cursor:pointer;}
.ckswitch input{position:absolute;opacity:0;width:1px;height:1px;}
.cktrack{width:42px;height:24px;border-radius:12px;background:var(--surface);
  border:1px solid var(--mid-line);position:relative;transition:background var(--t-hover),border-color var(--t-hover);}
.cktrack::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:var(--taupe);transition:transform var(--t-hover),background var(--t-hover);}
.ckswitch input:checked + .cktrack{background:var(--accent);border-color:var(--accent);}
.ckswitch input:checked + .cktrack::after{transform:translateX(18px);background:#FCFAF7;}
.ckswitch input:focus-visible + .cktrack{outline:2px solid var(--accent);outline-offset:3px;}
.cklabel{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe);}
.sheet .x{background:none;border:none;margin-top:20px;padding:0;cursor:pointer;color:var(--ink-55);transition:color var(--t-hover);}
.sheet .x:hover{color:var(--ink);}
@media(prefers-reduced-motion:reduce){.sheet,.sheetbd,.cpan,.fa,.btn,.card,.printed,.cluster .framed,.mega .msheet,.mega .mbd{transition:none !important;}}

/* ══ INTERIOR PAGES ══ */
/* The hero's rhythm is deliberate: each step down the page gets more room than
   the one above it, and the block of air beneath the buttons is the largest of
   all, so the call to action is never crowded by whatever band follows. */
.page-hero{position:relative;
  padding:calc(var(--s-lg) + 46px) 0 clamp(76px,7.5vw,124px);
  background:linear-gradient(180deg,#FBF9F6 0%,#F4F0EA 56%,#E8E2D9 100%);}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--taupe);margin-bottom:0;}
.crumbs a{color:var(--taupe);transition:color var(--t-hover);padding:6px 3px;min-height:24px;min-width:27px;display:inline-flex;align-items:center;justify-content:center;}
.crumbs{--crumb-pad:5px;}
.crumbs a:hover{color:var(--accent);}
.crumbs span{color:var(--taupe);}
.page-h1{font-family:var(--serif);font-weight:400;letter-spacing:.01em;line-height:1.13;
  font-size:clamp(2rem,4.4vw,3.5rem);max-width:22ch;margin-top:clamp(26px,3vw,42px);}
.page-h1 em{font-style:italic;}
.page-hero .rule{margin-top:clamp(24px,2.6vw,34px);}
.page-lead{font-family:var(--serif);font-style:italic;font-weight:400;line-height:1.62;
  font-size:clamp(1.06rem,1.5vw,1.34rem);color:var(--ink-72);max-width:56ch;
  margin-top:clamp(26px,2.8vw,38px);}
.page-hero .btns{margin-top:clamp(48px,4.4vw,64px);margin-bottom:0;}
/* the date these documents take effect, which four of them referred to and
   none of them printed */
.effective{margin-top:clamp(22px,2.4vw,30px);font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--taupe);}

/* A legal document is read by someone hunting one clause. At the specialty
   pages' display scale every one of these thirty headings is a monument five
   lines tall, and nothing can be skimmed past. The display face earns its keep
   where a reader is being drawn in, not where they are looking something up. */
body.legal .d2{font-size:clamp(1.34rem,2.1vw,1.72rem);line-height:1.3;}
body.legal .page-h1{font-size:clamp(1.9rem,3.4vw,2.7rem);}
body.legal .secbody .body,body.legal .prose .body{max-width:74ch;}
body.legal .sechead{padding-right:clamp(10px,1.6vw,26px);}
/* the air under the hero exists to give the buttons room; with no buttons it
   is just a void, so a page without them closes up */
.page-hero.tight{padding-bottom:clamp(34px,3.4vw,52px);}

/* a hero that carries her photograph runs as two columns and drops the
   decorative mark, since a real image and a watermark fight each other */
.herogrid{display:flex;flex-wrap:wrap;gap:clamp(26px,4vw,68px);align-items:center;}
.herotext{flex:1 1 min(560px,100%);min-width:0;}
.heroportrait{flex:0 1 340px;margin:0;align-self:center;}
.page-hero.withportrait .page-h1{max-width:18ch;}
.page-hero.withportrait .page-lead{max-width:46ch;}
@media(max-width:820px){.heroportrait{flex-basis:min(78vw,320px);align-self:flex-start;}}

.prose{display:flex;flex-wrap:wrap;gap:0 clamp(30px,4vw,64px);}
.prose > *{flex:1 1 min(640px,100%);min-width:0;}
.prose .body + .body,.prose .body + .proselist,.prose .proselist + .body{margin-top:clamp(20px,2vw,30px);}
.prose .body{max-width:78ch;}

.secbody .subhead,.prose .subhead{font-family:var(--serif);font-weight:400;line-height:1.4;
  font-size:clamp(1.1rem,1.5vw,1.3rem);color:var(--ink);margin-top:clamp(28px,3vw,42px);max-width:54ch;}
.secbody .subhead em,.prose .subhead em{font-style:italic;}
.secbody .subhead:first-child,.prose .subhead:first-child{margin-top:0;}
.secbody .subhead + .body,.prose .subhead + .body{margin-top:14px;}
/* the searchable phrasing, kept on the page but set quietly beneath the heading */
.subline{margin-top:14px;font-family:var(--sans);font-size:.82rem;font-weight:300;
  letter-spacing:.015em;line-height:1.7;color:var(--taupe);max-width:46ch;}
.subline.tight{margin-top:7px;max-width:60ch;}
.secbody .subline.tight,.prose .subline.tight{margin-bottom:2px;}

.kicker{font-family:var(--serif);font-style:italic;font-size:1.02rem;line-height:1.55;
  color:var(--ink-72);margin-top:16px;max-width:40ch;}

.proselist{list-style:none;padding:0;margin-top:16px;max-width:74ch;display:flex;flex-direction:column;gap:11px;}
.proselist li{position:relative;padding-left:26px;font-size:.94rem;font-weight:400;line-height:1.85;color:var(--ink-72);
  overflow-wrap:anywhere;}
/* a list item that is only a link is a standalone target, not an inline one */
.proselist li > a:only-child{display:inline-flex;align-items:center;min-height:24px;padding:2px 0;}
/* an address, an email or a bare URL on its own line is a target too, even
   when a two-word label sits in front of it */
.proselist li > a{padding-block:1px;}
.proselist li:not(:has(> a:only-child)) > a{display:inline-flex;align-items:center;min-height:24px;}
.proselist li::before{content:"";position:absolute;left:2px;top:.72em;width:9px;height:9px;
  background:var(--accent);opacity:.62;
  clip-path:polygon(50% 0,72% 30%,100% 50%,72% 70%,50% 100%,28% 70%,0 50%,28% 30%);}
ol.proselist{counter-reset:pl;}
ol.proselist li::before{content:counter(pl);counter-increment:pl;background:none;clip-path:none;
  font-family:var(--sans);font-size:10px;letter-spacing:.06em;color:var(--taupe);opacity:1;top:.5em;width:auto;height:auto;}

/* a line already on the page, set on its own so a long run has somewhere to
   breathe. Hairlines rather than quotation marks: this is a pause, not a quote */
.callout{margin:clamp(38px,4.4vw,64px) 0;padding:clamp(26px,2.8vw,38px) 0;
  border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);
  max-width:52ch;}
.callout p{font-family:var(--serif);font-weight:400;line-height:1.45;
  font-size:clamp(1.24rem,2vw,1.62rem);color:var(--ink);text-wrap:balance;}
.callout::before{content:"";display:block;width:22px;height:1px;background:var(--accent);
  margin-bottom:clamp(18px,2vw,26px);opacity:.7;}

blockquote.pull{margin:clamp(30px,3.4vw,46px) 0;padding:clamp(22px,2.4vw,32px) 0 clamp(22px,2.4vw,32px) clamp(22px,2.6vw,38px);
  border-left:2px solid var(--tan);max-width:60ch;}
blockquote.pull p{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.08rem,1.6vw,1.36rem);line-height:1.6;color:var(--ink);}

/* At 320 the rate column sat entirely outside the frame with nothing to
   suggest it was there, on the one page that exists to disclose cost. The
   frame is a labelled, focusable scroll region now, and it fades its right
   edge while there is more to see. */
.tablewrap{margin-top:clamp(22px,2.4vw,32px);overflow-x:auto;border:1px solid var(--mid-line);background:#FAF8F5;
  position:relative;-webkit-overflow-scrolling:touch;}
.tablewrap:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
/* min-width:0, or the wrapper takes the table's min-width instead of letting
   the frame inside it scroll, and drags the whole page sideways at 320. */
.tablescroll{position:relative;min-width:0;max-width:100%;}
.tablescroll::after{content:"";position:absolute;top:0;right:0;bottom:0;width:44px;pointer-events:none;
  background:linear-gradient(90deg,rgba(250,248,245,0),rgba(250,248,245,.96));opacity:0;transition:opacity var(--t-hover);}
.tablescroll.more::after{opacity:1;}
.tablenote{margin-top:8px;font-family:var(--sans);font-size:.76rem;color:var(--taupe);}
.tablenote[hidden]{display:none;}
.tablewrap table{border-collapse:collapse;width:100%;min-width:420px;}
.tablewrap th,.tablewrap td{text-align:left;padding:13px clamp(14px,1.6vw,20px);border-bottom:1px solid var(--rule-soft);
  font-size:.9rem;font-weight:400;line-height:1.7;color:var(--ink-72);}
.tablewrap th{font-family:var(--sans);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--taupe);}
.tablewrap tr:last-child td{border-bottom:none;}

/* the companion card is a plain cream sheet, not ruled paper: the links have
   to stay easy to read, and ruling behind a list fights it */
.sheetcard{
  position:relative;background:#FCFAF7;border:1px solid var(--mid-line);
  padding:clamp(24px,2.4vw,34px);
  box-shadow:0 1px 0 rgba(27,27,24,.04),0 20px 46px -36px rgba(27,27,24,.30);
}
.sheetcard::after{  /* a turned corner, the one flourish it gets */
  content:"";position:absolute;right:-1px;bottom:-1px;width:22px;height:22px;
  background:linear-gradient(135deg,transparent 50%,var(--surface) 50%);
  border-left:1px solid var(--mid-line);border-top:1px solid var(--mid-line);
}
.siblings{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:9px;}
.siblings li{font-size:.88rem;line-height:1.6;}
.siblings a{display:inline-block;padding:4px 0;}
.siblings a{color:var(--ink-72);border-bottom:1px solid transparent;transition:color var(--t-hover),border-color var(--t-hover);}
.siblings a:hover{color:var(--accent);border-color:var(--accent);}
.siblings .more{margin-top:6px;}
.siblings .more a{font-family:var(--sans);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--taupe);}

/* jump to: the page's own sections, listed once and pinned while reading */
.jump{margin-top:clamp(22px,2.4vw,30px);padding-top:clamp(18px,2vw,24px);border-top:1px solid var(--rule-soft);}
.jump .eyebrow{margin-bottom:12px;}
.jumplist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;counter-reset:jl;}
.jumplist li{position:relative;padding-left:26px;font-size:.86rem;line-height:1.55;}
.jumplist a{display:inline-flex;align-items:center;min-height:26px;min-width:26px;padding:2px 0;}
.jumplist li::before{content:counter(jl,decimal-leading-zero);counter-increment:jl;position:absolute;left:0;top:.15em;
  font-family:var(--sans);font-size:9.5px;letter-spacing:.08em;color:var(--taupe);}
.jumplist.ownnum li{padding-left:0;}
.jumplist.ownnum li::before{content:none;}
.jumplist a{color:var(--ink-72);border-bottom:1px solid transparent;transition:color var(--t-hover),border-color var(--t-hover);}
.jumplist a:hover{color:var(--accent);border-color:var(--accent);}
.jumplist a[aria-current="true"]{color:var(--accent);}
.jumplist li:has(a[aria-current="true"])::before{color:var(--accent);}
section[id^="s-"]{scroll-margin-top:96px;}

/* a page with no opening passage gets its contents as a full-width band instead
   of a companion column, so the sheet never sits beside an empty half */
.contents-lead{max-width:74ch;margin-bottom:clamp(30px,3.4vw,46px);}
.contents-lead .body + .body{margin-top:18px;}
.contents .sheetcard{padding:clamp(26px,2.6vw,38px);}
.contents .jumplist{columns:27ch auto;column-gap:clamp(26px,3.4vw,52px);display:block;}
.contents .jumplist li{break-inside:avoid;margin-bottom:9px;}
.contents .jump{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:baseline;}
/* flex:none stopped this from shrinking, so a 255px label sat in a 222px box
   and hung past the edge of a 320px phone, taking the page sideways with it */
.contents .jump .eyebrow{margin-bottom:0;flex:0 1 auto;min-width:0;}
.contents .siblings{flex:1 1 22ch;margin:0;flex-direction:row;flex-wrap:wrap;gap:6px 20px;}

/* a long jump list gets a filter, so finding one section does not mean reading
   all fourteen */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}
.jfilter{display:block;margin:0 0 14px;}
.jfilter input{width:100%;font-family:var(--sans);font-size:.86rem;color:var(--ink);
  background:var(--bg);border:1px solid var(--mid-line);border-radius:var(--r-btn);padding:9px 12px;}
.jfilter input::placeholder{color:var(--taupe);}
.jfilter input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.contents .jfilter{max-width:34ch;}
.jnone{margin-top:12px;font-family:var(--sans);font-size:.8rem;line-height:1.6;color:var(--taupe);}
.jumplist li[hidden]{display:none;}

/* the companion column pins itself only when the layout is actually two
   columns wide. stacked, a pinned card slides over the prose underneath it. */
.secgrid{container-type:inline-size;}
.secgrid > .sechead{position:static;}
@container (min-width:940px){
  .secgrid > .sechead{position:sticky;top:96px;align-self:flex-start;}
}
@supports not (container-type:inline-size){
  .secgrid > .sechead{position:static;}
}



/* ── a scannable stack: every part of a long section visible at a glance,
      each one opening in place. Closed, it reads as a considered index; open,
      it reads as ordinary prose. ── */
.psetwrap{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,18px);counter-reset:ps;}
details.pset{
  position:relative;background:#FCFAF7;border:1px solid var(--mid-line);
  transition:border-color var(--t-hover),box-shadow var(--t-hover),background var(--t-hover);
}
details.pset:hover{border-color:var(--tan);box-shadow:0 18px 40px -34px rgba(27,27,24,.4);}
details.pset[open]{background:var(--bg);border-color:var(--tan);}
details.pset summary{
  list-style:none;cursor:pointer;display:grid;gap:9px;
  padding:clamp(22px,2.3vw,30px) clamp(58px,5vw,72px) clamp(22px,2.3vw,30px) clamp(22px,2.3vw,32px);
}
details.pset summary::-webkit-details-marker{display:none;}
details.pset summary::after{
  content:"";position:absolute;right:clamp(24px,2.4vw,32px);top:clamp(30px,2.9vw,40px);
  width:11px;height:11px;border-right:1.4px solid var(--taupe);border-bottom:1.4px solid var(--taupe);
  transform:rotate(45deg);transition:transform 300ms cubic-bezier(.19,1,.22,1),border-color var(--t-hover);
}
details.pset[open] summary::after{transform:rotate(-135deg);border-color:var(--accent);}
details.pset summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.pset-h{
  font-family:var(--serif);font-weight:400;line-height:1.34;
  font-size:clamp(1.08rem,1.7vw,1.34rem);color:var(--ink);max-width:40ch;
  transition:color var(--t-hover);
}
.pset-h::before{
  counter-increment:ps;content:counter(ps,decimal-leading-zero);
  font-family:var(--sans);font-size:10px;letter-spacing:.16em;color:var(--tan);
  display:block;margin-bottom:9px;
}
details.pset:hover .pset-h,details.pset[open] .pset-h{color:var(--accent);}
.pset-sub{font-family:var(--sans);font-size:.79rem;font-weight:300;letter-spacing:.015em;
  line-height:1.65;color:var(--taupe);max-width:52ch;}
.pset-teaser{font-family:var(--serif);font-style:italic;font-size:.98rem;line-height:1.68;
  color:var(--ink-72);max-width:62ch;}
.pset-cue{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--tan);
  transition:color var(--t-hover);}
details.pset:hover .pset-cue{color:var(--accent);}
details.pset[open] .pset-teaser,details.pset[open] .pset-cue{display:none;}
.pset-body{padding:0 clamp(22px,2.3vw,32px) clamp(26px,2.6vw,36px);}
.pset-body .body:first-child{margin-top:0;}
@media(prefers-reduced-motion:reduce){details.pset summary::after{transition:none;}}

/* ── a lived-experience passage, set apart so it reads as testimony ── */
.secbody.vignette{
  position:relative;background:#FBF8F4;border:1px solid var(--mid-line);
  padding:clamp(28px,3vw,46px) clamp(24px,2.8vw,42px);
}
.secbody.vignette::before{
  content:"";position:absolute;left:0;top:clamp(28px,3vw,46px);bottom:clamp(28px,3vw,46px);
  width:2px;background:var(--tan);
}
.secbody.vignette .body{color:var(--ink-72);}
.secbody.vignette .body:first-child::first-letter{
  font-family:var(--serif);font-size:2.9em;line-height:.86;float:left;
  padding:.06em .1em 0 0;color:var(--ink);
}

/* ── a domain hub sends the reader onward in cards, not a list ── */
/* a directory owns the whole measure: the cards are the content, not a column
   beside a heading */
.dirsec .dirhead{max-width:66ch;}
.dirsec .dirhead .subline{max-width:60ch;}
.dirsec .body{max-width:74ch;}
.dirsec .body + .dgroup{margin-top:clamp(34px,4vw,58px);}

/* ── the directory: groups of cards, each group named for what it feels like
      rather than what it is called clinically ── */
.dgroup{margin-top:clamp(44px,5vw,76px);}
.dgroup:first-child{margin-top:clamp(30px,3.4vw,46px);}
.dghead{display:flex;align-items:baseline;gap:clamp(14px,1.6vw,22px);position:relative;}
/* the numeral was 1.34:1 against the page, which is to say invisible; it
   carries the group's colour now and earns its place in the hierarchy */
.dgroup{padding-left:clamp(0px,1.4vw,20px);border-left:2px solid transparent;
  transition:border-color 600ms ease;}
@media(min-width:900px){.dgroup{border-left-color:color-mix(in srgb,var(--gc) 26%,transparent);}}
.dgnum{flex:none;font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--gc,var(--taupe));
  border-bottom:2px solid var(--gc,var(--rule-soft));padding-bottom:4px;min-width:2.4em;opacity:.92;}
.dgtitle{font-family:var(--serif);font-weight:400;line-height:1.34;
  font-size:clamp(1.16rem,1.9vw,1.5rem);color:var(--ink);max-width:34ch;}
.dglead{margin-top:14px;margin-left:calc(2.4em + clamp(14px,1.6vw,22px));
  font-size:.94rem;line-height:1.85;color:var(--ink-72);max-width:70ch;}
.dgroup .domaingrid{margin-top:clamp(20px,2.2vw,30px);}
/* the cards in a group arrive in sequence rather than all at once, which reads
   as a hand laying them out; six steps, then everything after lands together */
.dgroup.in .dcard{animation:dealin 620ms cubic-bezier(.19,1,.22,1) backwards;}
.dgroup.in .dcard:nth-child(1){animation-delay:40ms;}
.dgroup.in .dcard:nth-child(2){animation-delay:110ms;}
.dgroup.in .dcard:nth-child(3){animation-delay:180ms;}
.dgroup.in .dcard:nth-child(4){animation-delay:250ms;}
.dgroup.in .dcard:nth-child(5){animation-delay:320ms;}
.dgroup.in .dcard:nth-child(n+6){animation-delay:380ms;}
/* Transform only, never opacity. An opacity keyframe with backwards fill holds
   the card at exactly 0 for the length of its delay, and a control that is
   focusable while invisible is the one thing the gate is right to refuse. The
   cards slide into place in sequence instead, which reads the same. */
@keyframes dealin{from{transform:translateY(16px);}to{transform:none;}}
.dgroup.in .dcard:focus-visible{animation:none;transform:none;}
@media(prefers-reduced-motion:reduce){.dgroup.in .dcard{animation:none;}}
@media(max-width:640px){
  .dglead{margin-left:0;}
  .dghead{flex-direction:column;gap:8px;}
}

.domaingrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
  gap:clamp(16px,2.5vw,34px);margin-top:clamp(30px,3.4vw,46px);}
/* A three-column track with four cards in it leaves one card alone beside two
   empty cells, which is a 740px hole at 1440 and reads as content that failed
   to load. Groups are small and their size is known, so the track count is set
   from how many cards a group actually has. Five is left at three-and-two,
   which is one gap rather than two and reads as a deliberate short row. */
@media(min-width:760px){
  .domaingrid:has(> :nth-child(2):last-child),
  .domaingrid:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr));}
  .domaingrid:has(> :first-child:last-child){grid-template-columns:minmax(0,min(560px,100%));}
}
/* ── the directory groups carry colour, because the grouping is information ──
   A directory of twenty-two cards in one flat cream reads as a list to get
   through. Each group takes one of five hues already in the July 2026 palette,
   set on --gc, and that hue runs through the group's numeral, its rule, and the
   top edge of every card beneath it. The colour is not decoration: it is the
   only thing that makes "there are different topic areas here" visible at a
   glance, which is what the page is for. */
.dgroup{                                    /* slate, the stated accent  */
  --gc:#334E5B;
  --gtint:#E4EAED;
}
.dgroup[style*="--g:1"]{ --gc:#6F5B43; --gtint:#EFE8DB; }   /* sand       */
.dgroup[style*="--g:2"]{ --gc:#2C4A3E; --gtint:#DFE9E2; }   /* deep green */
.dgroup[style*="--g:3"]{ --gc:#6B5136; --gtint:#EFE6D8; }   /* umber      */
.dgroup[style*="--g:4"]{ --gc:#5E6E52; --gtint:#E7EDE1; }   /* olive      */

.dcard{
  position:relative;display:flex;flex-direction:column;gap:11px;
  background:linear-gradient(178deg,var(--gtint,#FCFAF7) 0%,#FCFAF7 62%);
  border:1px solid var(--mid-line);
  padding:clamp(24px,2.3vw,32px);text-decoration:none;overflow:hidden;
  transition:border-color var(--t-hover),transform var(--t-hover),box-shadow var(--t-hover);
}
/* the top edge is the group's colour, a hairline at rest and a real rule on
   approach: the card announces which topic area it belongs to before it is read */
.dcard::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--gc,var(--accent));transform:scaleY(.5);transform-origin:top;
  opacity:.5;transition:transform var(--t-hover),opacity var(--t-hover);
}
.dcard:hover{border-color:var(--gc,var(--tan));transform:translateY(-3px);box-shadow:0 22px 44px -34px rgba(27,27,24,.42);}
.dcard:hover::before{transform:scaleY(1.5);opacity:1;}
.dcard:focus-visible{outline:2px solid var(--gc,var(--accent));outline-offset:3px;}
/* a turned corner, the same device the sheet cards use, in the group's colour */
.dcard::after{
  content:"";position:absolute;right:-1px;bottom:-1px;width:26px;height:26px;pointer-events:none;
  background:linear-gradient(135deg,transparent 49%,var(--gc,var(--mid)) 50%);
  opacity:.16;transition:opacity var(--t-hover),width var(--t-hover),height var(--t-hover);
}
.dcard:hover::after{opacity:.34;width:34px;height:34px;}
.dcard .dmark{width:30px;height:30px;color:var(--gc,var(--mid));opacity:.62;flex:none;
  transition:opacity var(--t-hover),transform var(--t-hover);}
.dcard:hover .dmark{opacity:1;transform:translateY(-1px) rotate(-3deg);}
@media(prefers-reduced-motion:reduce){
  .dcard,.dcard::before,.dcard .dmark{transition:none;}
  .dcard:hover{transform:none;}
  .dcard:hover .dmark{transform:none;}
}
.dcard h3{font-family:var(--serif);font-weight:400;font-size:1.06rem;line-height:1.36;color:var(--ink);}
.dcard p{font-size:.87rem;font-weight:400;line-height:1.75;color:var(--ink-72);}
/* The call to action names its destination, so it is a phrase rather than a
   label and it is set as one: sentence case, no tracking, room to run to two
   lines. A named destination tells an answer engine where the link goes. */
.dcard .dgo{margin-top:auto;padding-top:10px;font-size:.79rem;letter-spacing:.01em;
  line-height:1.5;color:var(--taupe);text-wrap:balance;text-transform:none;font-weight:400;}
.dcard:hover .dgo{color:var(--accent);}

/* ── each domain carries its own mark and its own accent ── */
.page-hero{overflow:hidden;}
.hero-mark{
  position:absolute;right:clamp(-30px,-2vw,0px);top:50%;transform:translateY(-50%);
  width:clamp(180px,26vw,420px);height:auto;color:var(--accent);opacity:.07;pointer-events:none;
}
@media(max-width:900px){.hero-mark{opacity:.05;right:-14%;width:62vw;}}

/* ── an organic edge between bands rather than a ruled seam ── */
.wave{position:absolute;top:-1px;left:0;width:100%;height:clamp(18px,2.2vw,34px);display:block;pointer-events:none;}
/* Every fill carries a literal fallback. An undefined custom property makes the
   declaration invalid at computed-value time and fill reverts to black, which
   painted a solid slash across a page the one time --domain-tint was missing. */
.wave path{fill:var(--domain-tint,#E8E2D9);}
section.on-bg .wave path{fill:#F3F0EC;}
section.on-surface .wave path{fill:#E8E2D9;}
/* a coloured band inherits the wave of whatever it interrupts, so the torn
   edge reads as the band above spilling over rather than as a cream tongue */
section.tx-tint.on-bg .wave path{fill:#F3F0EC;}
section.tx-tint.on-surface .wave path{fill:#E8E2D9;}
/* The wave is absolutely positioned, so it must have a positioned parent. Keyed
   to the containment relationship rather than to an id prefix, because the
   sections whose ids did not start with s- were positioning their wave against
   the viewport, where it painted over the content-warning banner. */
section:has(> .wave){position:relative;}
section[id^="s-"]{position:relative;}

/* A review bundle scopes the accent to the pane rather than the document. The
   :not([hidden]) is load-bearing: a bare .pane{display:block} is a class
   selector and outranks the user-agent's [hidden]{display:none}, which silently
   defeated the pane switcher and rendered every page in a section at once, in
   one 235,000px document, with every card link scrolling to the top of it.
   That is the thing Dr. Lapite-Garrett described three times. */
.pane:not([hidden]){display:block;}
.pane[hidden]{display:none !important;}

/* ── the psychologist, introduced once on every page, as a printed photograph ── */
.meet{display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,64px);align-items:center;}
.meet .printed{flex:0 1 min(330px,100%);margin:0;min-width:0;}
.meet .meet-text{flex:1 1 min(430px,100%);min-width:0;}
.meet .meet-text .body + .body{margin-top:16px;}
.printed{
  background:#FCFAF7;padding:14px 14px 0;border:1px solid var(--mid-line);
  box-shadow:0 2px 0 rgba(27,27,24,.04),0 26px 52px -38px rgba(27,27,24,.46);
  transform:rotate(-1.1deg);transition:transform 420ms cubic-bezier(.19,1,.22,1);
}
.printed:hover{transform:rotate(0deg);}
/* picture is inline by default, so a percentage width on the image resolves
   against its intrinsic size and overflows a narrow screen */
.printed picture{display:block;}
.printed img{display:block;width:100%;max-width:100%;height:auto;}
.printed figcaption{
  font-family:var(--hand);font-size:1.12rem;line-height:1.5;color:var(--taupe);
  text-align:center;padding:13px 6px 16px;
}
@media(prefers-reduced-motion:reduce){.printed{transition:none;}}

/* ── a rest partway through a long run of prose ── */
.breath{display:flex;align-items:center;gap:clamp(14px,1.8vw,26px);margin:clamp(34px,3.6vw,52px) 0;max-width:78ch;}
.breath::before,.breath::after{content:"";flex:1;height:1px;background:var(--rule-soft);}
.breath svg{width:22px;height:22px;color:var(--mid);opacity:.75;flex:none;}

/* ── the pull quote earns more room; it is the line people carry away ── */
blockquote.pull cite{display:block;margin-top:14px;font-style:normal;
  font-family:var(--sans);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--taupe);}
section.tx-deep .wrap blockquote.pull cite{color:rgba(252,250,247,.66);}
blockquote.pull{background:var(--domain-tint);border-left-color:var(--accent);
  padding-right:clamp(22px,2.6vw,38px);}

/* ── how far into a long page the reader has come ── */
.readbar{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);z-index:120;
  pointer-events:none;transition:width 90ms linear;}
@media(prefers-reduced-motion:reduce){.readbar{transition:none;}}

/* ══════════════════════════════════════════════════════════════════════
   SECTION TEXTURES
   Dr. Lapite-Garrett, 1 August 2026: "the pages still remain mostly
   uncolored and ununique with different patterns in each section... there
   needs to be something that stops the scroll often and right now not much
   does." She was right, and the reason was structural: every interior
   section rendered as heading, rule, prose, on one of two backgrounds that
   alternated. The only places anything happened were places that had their
   own component, the accordion, her photograph, the green card, the social
   band. Six sections in a row of the same shape is a page nobody finishes.

   So a section is no longer one thing. It draws a paper figure, a numeral,
   an ornament and a band treatment from rotating sets, and every fourth or
   so lands in full domain colour. Nothing here is decoration for its own
   sake: the numeral tells a reader where they are in the page, the ornament
   gives a section a face to remember it by, and the deep band marks the
   passage the page is actually built around.
   ══════════════════════════════════════════════════════════════════════ */

/* the figure is painted behind the content and never intercepts a pointer */
section.tx{position:relative;}
section.tx::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;}
section.tx > .wrap{position:relative;z-index:1;}

/* ruled paper, the note-paper figure the homepage already uses, at section scale */
section.tx-ruled::after{
  background-image:repeating-linear-gradient(180deg,transparent 0 67px,rgba(27,27,24,.032) 67px 68px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);}

/* a surveyor's grid, faded to nothing at the edges */
section.tx-grid::after{
  background-image:linear-gradient(90deg,rgba(27,27,24,.034) 1px,transparent 1px),
                   linear-gradient(180deg,rgba(27,27,24,.034) 1px,transparent 1px);
  background-size:clamp(48px,5.2vw,74px) clamp(48px,5.2vw,74px);
  -webkit-mask-image:radial-gradient(122% 78% at 50% 42%,#000 26%,transparent 76%);
          mask-image:radial-gradient(122% 78% at 50% 42%,#000 26%,transparent 76%);}

/* stone: a scatter of grain, no two tiles landing together */
section.tx-speckle::after{
  background-image:
    radial-gradient(circle at 22% 28%,rgba(27,27,24,.10) 0 1.3px,transparent 1.6px),
    radial-gradient(circle at 71% 63%,rgba(27,27,24,.075) 0 1.7px,transparent 2px),
    radial-gradient(circle at 46% 86%,rgba(27,27,24,.065) 0 1.1px,transparent 1.4px),
    radial-gradient(circle at 88% 14%,rgba(27,27,24,.055) 0 1.5px,transparent 1.8px);
  background-size:118px 118px,167px 167px,89px 89px,211px 211px;}

/* a single arc swung off the right edge, the hero's own figure carried down */
section.tx-arcs::after{
  background-image:radial-gradient(closest-side circle at 92% 26%,transparent calc(100% - 1px),rgba(27,27,24,.10) calc(100% - 1px)),
                   radial-gradient(closest-side circle at 6% 84%,transparent calc(100% - 1px),rgba(27,27,24,.075) calc(100% - 1px));
  background-size:min(60vw,540px) min(60vw,540px),min(44vw,380px) min(44vw,380px);
  background-repeat:no-repeat;background-position:right -140px top -110px,left -130px bottom -120px;}

/* ── the tinted band: domain colour at reading weight ──────────────────
      Between the cream bands and the reversed one there was nothing, so a
      page went pale, pale, pale, then suddenly full colour. The tint is the
      middle step, and it carries the woven border that marks its edges. */
section.tx.tx-tint{
  /* --domain-tint is the wash used behind pull quotes and card fills, and at
     that strength a whole band of it is indistinguishable from cream. Mixed
     from the accent instead, at 21%, it is a step a reader actually sees.
     Ink on it measures above 11:1 on all six accents, so nothing is spent
     on legibility. */
  background-color:color-mix(in srgb,var(--accent) 21%,#FCFAF7);
  background-image:linear-gradient(180deg,
    color-mix(in srgb,var(--accent) 15%,#FCFAF7) 0%,
    color-mix(in srgb,var(--accent) 23%,#FCFAF7) 58%,
    color-mix(in srgb,var(--accent) 18%,#F0ECE6) 100%);
  /* The woven dash border that sat here is gone. Dr. Lapite-Garrett,
     2 August 2026: "there seems to be these odd transitional parts in between
     the pages that seems like broken errors? dotted lines and waves?"

     She had it exactly. The dashes were painted straight across the top edge
     while the wave curved through the same 34px, so the line appeared to
     shatter and reassemble along the curve. Two dividers competing at one
     seam, and the newer one lost. The colour step and the wave were always
     enough; every other band on the site transitions on those alone. */
  }

/* ── the deep band: full domain colour, reversed. the hard stop ────────
      only ever applied to a section of plain prose, because inverting an
      accordion, a table or a card means theming a component set twice and
      getting one state wrong. Cream on all six distinct domain
      accents measures between 6.5:1 and 9.3:1, so AA holds throughout. */
section.tx.tx-deep{
  /* the flat colour is not a fallback nicety: without a real background-color
     the band paints only through background-image, and anything measuring
     contrast by walking computed backgrounds reads straight past it to the
     page cream and calls cream-on-cream 1.09:1. It was right to. */
  background-color:var(--accent);
  background-image:linear-gradient(168deg,var(--accent) 0%,color-mix(in srgb,var(--accent) 84%,#1B1B18) 100%);
  color:#FCFAF7;
  box-shadow:inset 0 1px 0 rgba(252,250,247,.18),inset 0 -1px 0 rgba(252,250,247,.14);}
section.tx-deep::after{
  background-image:radial-gradient(62% 54% at 80% 10%,rgba(252,250,247,.12),transparent 70%),
                   repeating-linear-gradient(180deg,transparent 0 39px,rgba(252,250,247,.045) 39px 40px);}
/* Every one of these carries the .wrap in front of it on purpose. The rules
   .secbody .subhead and .proselist li are two-class selectors that set ink,
   and a one-class section.tx-deep h3 loses to them, which shipped as black
   subheadings on the deep green of two pages before the gate caught it.
   Prefixing with .wrap wins on specificity without an !important anywhere. */
section.tx-deep .wrap h2,section.tx-deep .wrap h3,section.tx-deep .wrap h4,
section.tx-deep .wrap .subhead{color:#FCFAF7;}
section.tx-deep .wrap .body,section.tx-deep .wrap .subline,
section.tx-deep .wrap li,section.tx-deep .wrap p,
section.tx-deep .wrap .proselist li{color:rgba(252,250,247,.92);}
section.tx-deep .wrap .kicker,section.tx-deep .wrap .eyebrow{color:rgba(252,250,247,.74);}
section.tx-deep .wrap .eyebrow::before{background:rgba(252,250,247,.62);}
section.tx-deep .wrap .rule{background:linear-gradient(90deg,rgba(252,250,247,.9) 0 34%,rgba(252,250,247,.3) 34% 100%);}
section.tx-deep .wrap .secnum{color:#FCFAF7;opacity:.24;}
section.tx-deep .wrap .secorn{color:#FCFAF7;opacity:.8;}
section.tx-deep .wrap .secmark::after{background:linear-gradient(90deg,rgba(252,250,247,.34),transparent);}
section.tx-deep .wrap .proselist li::before{background:rgba(252,250,247,.6);}
section.tx-deep .wrap a.inl{color:#FCFAF7;text-decoration-color:rgba(252,250,247,.55);}
section.tx-deep .wrap a.inl:hover{text-decoration-color:#FCFAF7;}
section.tx-deep .wrap .proselist li::marker{color:rgba(252,250,247,.55);}
section.tx-deep .wrap .body b{background-image:linear-gradient(180deg,transparent 52%,rgba(252,250,247,.28) 52%,rgba(252,250,247,.28) 94%,transparent 94%);}
section.tx-deep .wrap blockquote.pull{background:rgba(252,250,247,.08);border-left-color:rgba(252,250,247,.6);}
section.tx-deep .wrap .breath svg{color:rgba(252,250,247,.6);}
section.tx-deep .wrap .breath::before,section.tx-deep .wrap .breath::after{background:rgba(252,250,247,.22);}
section.tx-deep .wave path{fill:var(--prev-tone,#E8E2D9);}
section.tx-deep ::selection{background:#FCFAF7;color:var(--accent);}

/* ── the framed panel: the thin bordered outline, at section scale ──── */
section.tx-panel .secgrid,section.tx-panel .dirhead{position:relative;}
@media(min-width:760px){
  section.tx-panel > .wrap > .secgrid{
    background:#FCFAF7;border:1px solid var(--mid-line);
    padding:clamp(30px,3.2vw,52px);
    box-shadow:0 2px 0 rgba(27,27,24,.03),0 34px 66px -50px rgba(27,27,24,.5);}
  section.tx-panel > .wrap > .secgrid::before{
    content:"";position:absolute;inset:7px;border:1px solid var(--mid-line);
    opacity:.42;pointer-events:none;}
}

/* ── the section mark: numeral, ornament, and a rule that runs out ──── */
.secmark{display:flex;align-items:center;gap:clamp(10px,1.2vw,16px);margin-bottom:clamp(12px,1.4vw,18px);}
.secnum{font-family:var(--serif);font-size:clamp(2.3rem,4.4vw,3.4rem);line-height:.8;
  color:var(--accent);opacity:.22;letter-spacing:-.03em;flex:0 0 auto;
  font-variant-numeric:lining-nums;}
.secorn{width:clamp(30px,3.4vw,40px);height:clamp(30px,3.4vw,40px);
  color:var(--accent);opacity:.7;flex:0 0 auto;}
.secmark::after{content:"";flex:1 1 auto;min-width:0;height:1px;
  background:linear-gradient(90deg,var(--rule-soft),transparent);}
/* drawn state is the default, so an ornament is never invisible if the
   reveal observer never fires. The animation only ever runs forward. */
.secorn > g > *{stroke-dasharray:240;stroke-dashoffset:0;}
.rv.in .secorn > g > *{animation:orndraw 1200ms cubic-bezier(.19,1,.22,1) both;}
@keyframes orndraw{from{stroke-dashoffset:240;}to{stroke-dashoffset:0;}}

/* ── the opening paragraph of a section reads as an opening paragraph ── */
body:not(.legal) .secbody > .body.lede,body:not(.legal) .prose > .body.lede{
  font-size:clamp(1.02rem,1.35vw,1.14rem);line-height:1.76;color:var(--ink);}
@media(min-width:760px){
  body:not(.legal) .secbody > .body.lede::first-letter,
  body:not(.legal) .prose > .body.lede::first-letter{
    float:left;font-family:var(--serif);font-size:3.4em;line-height:.78;
    padding:.07em .1em 0 0;color:var(--accent);}
}
/* the opening paragraph sets its own ink, which on a reversed band means it
   sets black text on the domain accent unless it is told otherwise here.
   Measured at 2.52:1 before this line existed. */
section.tx-deep .wrap .secbody > .body.lede,section.tx-deep .wrap .prose > .body.lede{color:rgba(252,250,247,.94);}
section.tx-deep .wrap .secbody > .body.lede::first-letter,
section.tx-deep .wrap .prose > .body.lede::first-letter{color:#FCFAF7;}

/* ── her own emphasis, actually marked ────────────────────────────────
      536 bold spans and 987 italics were already in the approved copy and
      every one of them rendered as plain weight against plain weight. A
      wash under the bold reads as a hand run over the line; the italic
      warms rather than shouts. Nothing here changes a word. */
.secbody .body b,.prose .body b,.pset-body .body b,.secbody li b,.prose li b{
  font-weight:600;
  background-image:linear-gradient(180deg,transparent 52%,color-mix(in srgb,var(--accent) 26%,transparent) 52%,color-mix(in srgb,var(--accent) 26%,transparent) 94%,transparent 94%);
  background-repeat:no-repeat;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;}
.secbody .body em,.prose .body em,.pset-body .body em{color:var(--taupe);}
section.tx-deep .wrap .body em{color:rgba(252,250,247,.86);}

@media(prefers-reduced-motion:reduce){
  .rv.in .secorn > g > *{animation:none;}
}