/* ============================================================
   ROOTS AND RESONANCE, THE READING PAGES.

   The instrument lives on one page and only one. These are the
   pages behind the colophon's links: quiet documents, no canvas,
   no audio, nothing that has to be driven at sixty frames a
   second. What they share with the instrument is its type and
   its token layer, copied here at the values the main page
   declares rather than re-chosen, so a heading is the same
   heading in both places.

   The main page swaps these tokens through the day from script.
   Nothing here does: a static document has no phase to be in, so
   it stands in the light set, which is what that page opens on.
   ============================================================ */
:root{
  --bg:#FFFFFF;
  --type:rgba(60,60,68,.92);
  /* .61, NOT .52.

     The instrument declares .52 in its stylesheet and then writes .61
     over it from script the moment it picks a phase, because .52 reads
     3.45:1 on the warm ground and .61 is the lowest value that clears
     4.5:1 there. These pages have no script to do that, and copying the
     declared value rather than the used one is how every paragraph here
     shipped at 3.77:1. This is the value the instrument actually runs. */
  --type-dim:rgba(60,60,68,.80);
  /* RULES ONLY: hairlines, borders, the disclosure separators. Never
     text. At .36 it reads 2.34:1, and the instrument's own note says as
     much: what used to be set in it was moved to the dim ink rather than
     this being raised, because raising it would thicken every hairline
     on the page to fix a handful of labels. */
  --type-faint:rgba(60,60,68,.36);
  --mono:var(--sans);
  --sans:'League Spartan',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
/* THE WARM GROUND, behind everything and catching no clicks. Painted at
   220 across and scaled up by the browser, which is also what blurs it. */
#washbg{position:fixed;inset:0;width:100vw;height:100vh;z-index:-2;
  pointer-events:none;display:block}
/* THE INSTRUMENT, IN THE MARGIN.

   A window cut into a frame that is the size of the whole viewport. The
   instrument inside lays out against the reader's real window and stands
   the stack where it always stands; this shows the part of that where
   the margin is. Nothing scaled, nothing repositioned, no second copy. */
/* BEHIND THE WORDS, AND NARROWER THAN THEM.

   Two faults put a white slab over the reading. A fixed element with
   z-index 0 paints above the in-flow text beneath it, so the frame was
   over the words rather than beside them; it sits behind now, between
   the warm ground and the page. And it was 30vw wide while the reading
   begins at 28.3vw, so even correctly stacked it reached under the first
   letter of every line. The stack itself only draws to about 20vw, so
   the hole can stop where the words start and still show all seven. */
#bowlwrap{position:fixed;left:0;top:0;width:28.3vw;height:100vh;
  overflow:hidden;z-index:-1;pointer-events:none}
#bowlframe{position:absolute;top:0;left:0;border:0;display:block;
  background:transparent;pointer-events:none;transform-origin:top left;
  color-scheme:light}
/* Below 1180 there is no margin to stand in, so it becomes a band at the
   head of the reading. This is the one place it is scaled: a full height
   stack cannot be shown honestly in three hundred pixels. */
#bowlwrap.band{position:relative;left:auto;top:auto;
  width:100%;height:min(42vh,360px);margin:0 0 28px;z-index:0}
@media (max-width:900px){ #bowlwrap.band{height:min(36vh,300px);margin-bottom:22px} }

/* THE PAPER ITSELF. The bed is a canvas laid over this and the body is
   transparent so it shows through, which means the base color has to
   live somewhere that paints underneath both. It is also the fallback:
   if the script never runs, the page is white rather than nothing. */
html{scroll-behavior:smooth;background:var(--bg)}
/* Transparent, so the bed behind it is the ground. The token stays the
   fallback for anything that paints before the canvas is in. */
body{margin:0;background:transparent;color:var(--type);
  font-family:var(--mono);font-size:12px;letter-spacing:.02em;
  -webkit-font-smoothing:antialiased}

/* ---- The head of the page. -------------------------------- */
/* The same three things the hero carries in its top left, in the
   same order and at the same settings, so arriving here from the
   instrument is not arriving somewhere else. */
.phead{display:flex;align-items:flex-start;justify-content:space-between;
  gap:32px;padding:34px 40px 0}
/* The name and the line under it, and nothing above them: the bowl that
   sat there was a picture of the instrument on a page that is not the
   instrument. Both go home, here and in the colophon. */
.pmark{display:block;text-decoration:none;color:inherit}
.pname{display:block;font-family:var(--sans);font-weight:600;font-size:14px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--type);line-height:1.6}
.ptag{display:block;margin-top:8px;font-size:11px;letter-spacing:.18em;
  color:var(--type-dim)}
.pnav{display:flex;gap:26px;padding-top:4px}
.pnav a{font-family:var(--sans);font-weight:600;font-size:9.5px;
  letter-spacing:.20em;text-transform:uppercase;color:var(--type-dim);
  text-decoration:none;transition:color .35s cubic-bezier(.16,1,.30,1);
  /* Same reason as the colophon: the words stay put, the box grows. */
  display:inline-flex;align-items:center;min-height:24px;padding:4px 0}
.pnav a:hover{color:var(--type)}
/* THE SAME THREE, IN THE SAME ORDER, AS THE FOOT.

   The head listed book now, gift cards, contact and the foot listed them
   in that order too, but the head set them in caps at 9.5 and the foot
   in lower case at 10: the same three links reading as two different
   sets. They are one set. The head keeps its own weight, because it sits
   against a wordmark rather than in a column, and takes the foot's case
   and its order. */
.pnav a{text-transform:lowercase;font-size:12px;letter-spacing:.08em}

/* ---- The reading. ----------------------------------------- */
/* The same 660 pixel measure the instrument's reading uses. A line
   of prose does not get wider because it is on its own page. */
/* THE READING STARTS WHERE THE READING STARTS ON THE FRONT PAGE.

   Centered, it sat in the middle of the window with the stack off on its
   own to the left and no relationship between them. The instrument puts
   its reading column at 38.3 percent of the window and its picture at
   63.6, and those are the two edges the eye already knows from the front
   page. The column takes the first of them, so arriving here from there
   is the same page continuing rather than a different layout.

   28.3 percent, which is where the instrument's own card and reading
   actually land: the card is placed off the drawn right edge of the root
   bowl rather than from the grid, and at 1440 that puts it at 408. The
   fraction is taken from the thing itself, not from the table.

   The measure is capped so a wide screen does not stretch the line past
   what anyone can read, and the whole offset is dropped below 1180 where
   the stack is hidden and there is nothing to align to. */
.pmain{max-width:min(760px, calc(71.7vw - 80px));
  margin:0 0 0 28.3vw;padding:86px 40px 104px 0}
@media (max-width:1180px){
  .pmain{max-width:760px;margin:0 auto;padding:86px 32px 104px}
}
.pmain .lb{margin:0 0 12px;font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--c,var(--type-dim))}
.pmain h1{margin:0 0 22px;font-size:clamp(21px,1.15rem + 0.7vw,28px);font-weight:400;
  letter-spacing:.02em;color:var(--type);line-height:1.35}
/* The mark that stands off the left of every section on the main
   page, kept so the two read as one document. */
.pmain .mk{width:14px;height:1px;background:var(--c,var(--type-faint));
  margin:0 0 20px}
.pfig{margin:0 0 34px}
.pfig img{display:block;width:100%;height:auto;
  /* It is a photograph in a column of small type: given a fixed
     ratio it would be cropped twice, once by the file and once
     here. The file's own shape is the right shape. */
  background:var(--type-faint)}
/* READABLE. This was 10px, which is below any figure anyone publishes
   for body text and was reported, correctly, as almost illegible. It is
   fluid rather than fixed so it holds a sensible size on a phone and
   grows on a wide screen, and the tracking comes down as the size goes
   up because letter spacing that helps at 10px hurts at 15. */
/* TEN POINT. Set in points because that is the size it was asked for;
   a browser renders 10pt as 13.33px at the default root size. The
   fluid clamp is gone with it: a stated point size is a stated point
   size, and it should not drift with the width of the window. */
.pmain p{margin:0 0 14px;font-size:10pt;
  letter-spacing:.015em;line-height:1.75;color:var(--type-dim)}
/* The lead sits a point above the reading it introduces. */
.pmain p.ld{color:var(--type);margin-bottom:20px;
  font-size:11pt;line-height:1.7}
.pmain p b{font-weight:700;color:var(--type)}
.pmain details{border-top:1px solid var(--type-faint)}
.pmain details:last-of-type{border-bottom:1px solid var(--type-faint);
  margin-bottom:10px}
.pmain summary{list-style:none;cursor:pointer;position:relative;
  padding:14px 30px 14px 0;font-size:10pt;
  letter-spacing:.015em;line-height:1.5;color:var(--type)}
.pmain summary::-webkit-details-marker{display:none}
.pmain summary:hover{color:var(--type-dim)}
.pmain summary::after,.pmain summary::before{content:'';position:absolute;
  right:4px;top:50%;width:9px;height:1px;background:var(--type-faint)}
.pmain summary::before{transform:rotate(90deg)}
.pmain details[open] summary::before{transform:rotate(0deg)}
.pmain details > p{padding:0 30px 16px 0;margin:0}
/* THE THREE NAMED CASES, SET IN FROM THE ARGUMENT AROUND THEM.

   Each opens with its own term in bold and then explains it, which makes
   them a list of three things inside a passage of running prose rather
   than three more paragraphs of it. Indented, the eye can find them and
   skip between them without reading the whole section, and the sentences
   either side stay clearly the argument they belong to. */
.pmain p.pin{padding-left:24px}
@media (max-width:900px){ .pmain p.pin{padding-left:16px} }

/* The hero on a page that opens with a picture. Above the label and the
   heading rather than under them, which is the whole difference between
   a hero and an illustration. */
.phero{margin:0 0 40px}
.phero img{display:block;width:100%;height:auto}

/* ---- The instrument page's own furniture. ------------------ */
.pmain h2{margin:40px 0 14px;font-size:clamp(12px,0.66rem + 0.2vw,13.5px);
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--type)}
/* Wide things scroll inside themselves; the page never scrolls sideways. */
.tw{overflow-x:auto;margin:0 0 18px}
.dt{border-collapse:collapse;width:100%;font-size:12px;letter-spacing:.01em}
.dt th{text-align:left;font-weight:400;padding:0 14px 8px 0;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--type-dim);border-bottom:1px solid var(--type-faint);white-space:nowrap}
.dt td{padding:9px 14px 9px 0;color:var(--type-dim);
  border-bottom:1px solid var(--type-faint);white-space:nowrap}
.dt tr td:first-child{color:var(--type)}
/* The fitted color itself, so the table shows the value it describes. */
.sw{display:inline-block;width:8px;height:8px;margin-right:8px;
  vertical-align:baseline}
/* The one line of mathematics, given room and its own measure. */
.eq{margin:22px 0 22px !important;padding:16px 0;font-size:13px;
  letter-spacing:.06em;color:var(--type) !important;
  border-top:1px solid var(--type-faint);border-bottom:1px solid var(--type-faint)}
.eq sub,.eq sup{font-size:8px}

/* THE HANDOFF. The only thing on the site that leads to a checkout, so
   it is the one control allowed to look like a button rather than a line
   of type: a filled block in the section's own color, which is the one
   place an accent earns that much of the page. */
.psquare{display:inline-block;padding:13px 22px;
  font-family:var(--sans);font-weight:600;font-size:12.5px;
  letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  color:#FFFFFF;background:var(--c,var(--type));
  transition:opacity .35s cubic-bezier(.16,1,.30,1)}
.psquare:hover{opacity:.84}
/* The same block before there is anywhere for it to go: full strength, so
   the page can be judged as it will ship, but with no pointer and no
   hover, because nothing here is pressable yet. */
.psquare.is-demo{cursor:default}
.psquare.is-demo:hover{opacity:1}
/* What it costs the reader to press it, said before they press it. */
.pfine{font-size:11px !important;letter-spacing:.01em;line-height:1.75;
  color:var(--type-dim);max-width:56ch}

/* THE ONE THING TO DO, at the foot of the reading.

   Set louder than the line under it and in the page's voice for the
   things you can DO: Manrope at 600 in a wide caps track, the same
   setting the send button and the header links carry. It is the only
   thing on these pages asking for anything, so it is allowed to be the
   loudest, and it is still 11px on a page whose headings are 15. */
.pbook{display:inline-block;margin-top:42px;position:relative;
  font-family:var(--sans);font-weight:600;font-size:13px;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--type);text-decoration:none;padding-bottom:5px}
/* The rule arrives under it rather than sitting there, which is how
   every other thing on this site answers a pointer. */
.pbook::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--type);transform:scaleX(1);transform-origin:left;
  transition:transform .45s cubic-bezier(.22,1,.30,1)}
.pbook:hover::after{transform:scaleX(0);transform-origin:right}
/* And the way back is quieter than it, and on its own line. */
.pbook + .pback{display:block;margin-top:16px}
/* A form with no Book now after it: its back link starts the actions, 56 below, like every other page. */
.pform + .pback{display:block;margin-top:56px}

/* THE WAY UP, under the way home.

   Set like the line above it rather than louder: at the foot of a long
   reading these are two small favors offered on the way out, and the
   only thing down here allowed to ask for anything is Book now. The
   scroll is smooth because the document already asks for that, so it
   travels rather than cutting, which on a page this long is the
   difference between going back and being put back. */
/* AN ARROW, AND THE WORDS ONLY WHERE THEY ARE STILL NEEDED.

   The glyph replaces the label on screen; the label stays on the element
   as its accessible name, so a screen reader still announces "back to
   top" and does not read out an arrow character. The arrow is marked
   hidden to assistive technology for the same reason: announced twice it
   is worse than not announced at all.

   Set larger than the type it replaces because a single mark has to
   carry on its own what four words carried between them, and given real
   padding because it is now the smallest thing on the page a thumb has
   to find. */
/* AND BIG ENOUGH TO HIT. As a mark it measured 19 by 27, which is under
   every published minimum and worse than the words it replaced, since a
   short line of type is at least wide. The box is opened to 44 square
   and the glyph held at its left edge, so the arrow still stands on the
   same line the two links above it start from while the target around it
   is the size a thumb expects. */
.ptop{display:inline-flex;align-items:center;justify-content:flex-start;
  min-width:44px;min-height:44px;margin-top:8px;padding:0;
  font-size:15px;line-height:1;font-family:var(--mono);
  color:var(--type-dim);text-decoration:none;
  transition:color .35s cubic-bezier(.16,1,.30,1),transform .35s cubic-bezier(.16,1,.30,1)}
.ptop:hover{color:var(--type)}
/* It lifts toward where it is about to send you. */
.ptop span{display:inline-block;transition:transform .45s cubic-bezier(.22,1,.30,1)}
.ptop:hover span{transform:translateY(-3px)}

/* Back to the instrument, at the foot of the reading. */
.pback{margin-top:32px;padding:5px 0;min-height:24px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-family:var(--sans);font-weight:600;
  color:var(--type-dim);text-decoration:none;display:inline-block;
  transition:color .35s cubic-bezier(.16,1,.30,1)}
.pback:hover{color:var(--type)}

/* ---- The forms, on the pages that carry one. ---------------- */
/* THE SAME FORM AS THE DIALOG, FIELD FOR FIELD.

   These were boxed: every input inside its own outlined rectangle, which
   is the default shape of a form and nothing to do with this site. The
   dialog in the corner of the front page had already answered the
   question, with a rule under each field and nothing else, so there is
   no reason for a second answer. Every value below is that dialog's, at
   the same sizes and the same tracking, so a field is the same field
   wherever it is asked. */
.pform{margin:14px 0 14px}
.pform label{display:block;margin-bottom:16px;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--type-dim)}
.pform input,.pform select,.pform textarea{display:block;width:100%;margin-top:6px;
  font-family:inherit;font-size:14px;letter-spacing:.01em;line-height:1.6;
  color:var(--type);background:transparent;text-transform:none;
  border:0;border-bottom:1px solid var(--type-faint);border-radius:0;
  padding:5px 0;transition:border-color .3s}
.pform textarea{resize:vertical}
.pform input:focus,.pform select:focus,.pform textarea:focus{
  outline:none;border-bottom-color:var(--type)}
.psend{margin-top:6px;background:transparent;border:0;padding:6px 2px 8px;
  position:relative;cursor:pointer;
  font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--type);transition:color .35s}
.psend span{display:inline-block;transition:transform .45s cubic-bezier(.22,1,.30,1)}
.psend::after{content:'';position:absolute;left:2px;right:2px;bottom:2px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left center;
  transition:transform .5s cubic-bezier(.22,1,.30,1)}
.psend:hover span{transform:translateY(-2px)}
.psend:hover::after{transform:scaleX(1)}
.psend[disabled]{opacity:.5;cursor:default}
/* Hidden without being moved off the canvas. left:-9999px works and
   also makes the element part of the layout nine thousand pixels to
   the left, which some browsers count. Clipped in place instead. */
.php{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);border:0}
.pnote{min-height:14px;padding-top:10px;font-size:11px;letter-spacing:.04em;
  line-height:1.7;color:var(--type-dim);max-width:52ch}
.pnote.sent{color:var(--type);border-left:2px solid var(--c,var(--type));
  padding-left:12px}
/* Their message back in their hands if we could not send it, set the same
   way: a rule under it, no box. */
.pfall{margin-top:16px;padding-top:14px;border-top:1px solid var(--type-faint)}
.pfall p{margin:0 0 10px;font-size:12px !important;line-height:1.7;color:var(--type) !important}
.pfall a{color:var(--type);text-decoration:none;border-bottom:1px solid var(--type-faint)}
.pfall textarea{display:block;width:100%;padding:6px 0;background:transparent;
  border:0;border-bottom:1px solid var(--type-faint);font-family:var(--mono);
  font-size:12.5px;line-height:1.7;color:var(--type);resize:vertical}
.pfall .pcopy{margin-top:8px}

/* ---- The colophon. ---------------------------------------- */
/* Identical to the one at the foot of the instrument. */
/* The whole foot is lower case, set here rather than typed that way, so
   the words stay words to a screen reader and to a crawler. */
/* THE FOOT IS A SLAB, NOT A WINDOW.

   It was transparent so the warm bed ran under it, and the bed is the
   one thing on the page that moves: a colophon is the most static thing
   on a site and drifting color behind eleven lines of small type read
   as a fault rather than as an effect. It is the page's own ground now,
   which is white in every state this site can reach; written as the
   token rather than as #FFF so that if the dark ground is ever switched
   on, the foot follows the page instead of staying a white bar on it. */
#foot{position:relative;z-index:2;background:var(--bg);
  border-top:1px solid var(--type-faint);padding:76px 0 56px;
  text-transform:lowercase}
/* FOUR COLUMNS NOW. The two about pages stand on their own ahead of the
   reading, because they are about the practice and the object rather
   than about a session you can book, and folding them into the list of
   sections made that list read as eight equal things. */
.fin{max-width:1440px;margin:0 auto;padding:0 40px;
  display:grid;grid-template-columns:1fr auto auto auto;
  column-gap:64px;row-gap:64px;align-items:start}
.fbrandcol{grid-column:1;grid-row:1}
.fbrand{display:block;text-decoration:none;color:inherit}
/* Where it is, under the tagline and set like it. */
/* Low case like the tagline, and stood clear of it. */
.fplace{margin:50px 0 0;font-size:11px;letter-spacing:.18em;color:var(--type-dim)}
.fname{display:block;margin:0;font-family:var(--sans);font-weight:600;font-size:14px;
  letter-spacing:.16em;text-transform:lowercase;color:var(--type);line-height:1.6}
.ftag{display:block;margin:8px 0 0;font-size:11px;letter-spacing:.18em;
  color:var(--type-dim)}
/* RANGED RIGHT. Everything on this side of the foot ends on one line:
   the two columns of links, the copyright and the credit under it. The
   brand and the disclaimer hold the left edge, and nothing crosses. */
.fnav{display:flex;flex-direction:column;gap:12px;grid-row:1;text-align:right}
.fnav-about{grid-column:2}
.fnav-read{grid-column:3}
.fnav-book{grid-column:4}
.fnav a{font-size:12px;letter-spacing:.06em;line-height:1.5;color:var(--type-dim);
  text-decoration:none;transition:color .35s cubic-bezier(.16,1,.30,1)}
.fnav a:hover{color:var(--type)}
/* TARGET SIZE. Every link in the foot measured 11 to 15 pixels tall,
   which is the height of the type and nothing more. WCAG 2.2 asks for 24
   by 24, and a thumb asks for more than that. The type does not change:
   the box around it grows, in padding, which costs nothing visually
   because these sit in a column with space between them already. The
   gap is reduced by the same amount the padding adds, so the list looks
   exactly as it did and every line is now a target. */
.fnav{gap:0}
.fnav a{padding:6px 0;min-height:24px;display:flex;align-items:center;
  justify-content:flex-end}
.fdisc a{display:inline-block;padding:5px 0}
.fesque a{display:inline-block;padding:7px 0}

.fnav a[aria-current="page"]{color:var(--type)}
/* Bottom left, squared with the name above it: the one real paragraph in
   the foot, set like one. Bottom right is who owns it and who made it. */
.fdisc{grid-column:1;grid-row:2;justify-self:start;max-width:460px;
  margin:0;font-size:11px;letter-spacing:.01em;line-height:1.8;
  color:var(--type-dim);text-align:left}
/* UNDER THE SECTIONS COLUMN, ON ITS EDGE. It spanned to the far margin
   and ended on the bookings column's edge instead, which put the two
   quietest lines in the foot further right than anything above them and
   gave that side of the page two right edges. Dropped into column two,
   it ends where "what it is" ends. */
/* SPANNED, NOT PARKED IN COLUMN THREE.

   It sat in that column alone, and the copyright line is wider than any
   link above it, so the column was being sized by the copyright rather
   than by its own list. The links are ranged right inside a box wider
   than they are, which pushed them away from the column to their left:
   the three gaps measured 64, 139 and 64 while the grid itself was an
   even 64 throughout. Spanning to the line before the last column ends
   it on exactly the same right edge, so the copyright still lands under
   "what it is", but the width is taken up by the flexible first column
   and every column is left the width of its own words.

   It lands on the LAST column's right edge, which is the page's own
   right margin and the edge the two columns of links already end on.
   Spanned the whole width rather than parked in the last column for the
   same reason as before: parked, the copyright would size that column
   and push its three links away from the one beside them. */
.fend{grid-column:1/-1;grid-row:2;justify-self:end;text-align:right}
.fdisc a{color:var(--type-dim);text-decoration:none;white-space:nowrap;
  border-bottom:1px solid var(--type-faint)}
.fdisc a:hover{color:var(--type)}
/* Links inside the reading take the same form as the footer's: ink, a hairline under. */
.pmain p a{color:var(--type);text-decoration:none;border-bottom:1px solid var(--type-faint)}
.pmain p a:hover{border-bottom-color:var(--type)}
.fcopy{margin:0;font-size:11px;letter-spacing:.06em;line-height:1.7;
  color:var(--type-dim)}
/* Who made it, under who owns it. Set like the line above rather than
   like a link: left to the browser it came out underlined and blue,
   which is the one color nothing else on this site uses. */
.fesque{margin:7px 0 0;font-size:11px;letter-spacing:.06em;line-height:1.7}
.fesque a{color:var(--type-dim);text-decoration:none;
  transition:color .35s cubic-bezier(.16,1,.30,1)}
.fesque a:hover{color:var(--type)}

/* ---- Small screens ----------------------------------------- */
/* A phone is a single column and a thumb, not a narrow desktop. The type
   does not shrink here: it is already at the floor of what is readable,
   and a phone is held closer than a laptop, not further away. What
   changes is the room around it and the way the head stacks. */
@media (max-width:900px){
  .phead{flex-direction:column;gap:18px;padding:24px 22px 0}
  .pnav{gap:12px;padding-top:0;flex-wrap:wrap}   /* 12, not 20: six links incl. Home fit one line from 360px */
  .pmain{padding:44px 22px 72px;max-width:none}
  .pmain h1{font-size:clamp(20px,4.8vw,24px)}
  /* The same eleven point. A phone is held closer than a laptop, not
     further away, so the reading does not need to grow here. */
  .pmain p{font-size:10pt;line-height:1.75}
  .pmain p.ld{font-size:11pt}
  .phero{margin:0 0 28px}
  /* THE WRAPPER WAS THE OVERFLOW.

     It was pulled 22px past the column on each side so the table could
     run edge to edge, which made the wrapper 44px wider than the page
     and pushed the document sideways at 320 and 360. A table that
     scrolls inside itself does not need to be wider than its container
     to do it. */
  .tw{margin-left:0;margin-right:0;padding:0}
  .eq{font-size:12px}
  #foot{padding:56px 0 40px}
  .fin{grid-template-columns:1fr;column-gap:0;row-gap:42px;padding:0 22px}
  /* THE COLUMNS COLLAPSE TOO. The three navs are placed in columns two,
     three and four on a wide screen, and the mobile grid is a single
     column: left explicitly placed, they asked for columns that do not
     exist, the grid invented them, and the foot ran eleven pixels off
     the right of every page. */
  .fnav{grid-row:auto}
  .fnav-about,.fnav-read,.fnav-book{grid-column:1}
  .fdisc{grid-column:1;grid-row:auto;max-width:none}
  .fend{grid-column:1;grid-row:auto;justify-self:start;text-align:left;
    max-width:none}
  .fnav{text-align:left}
  .fnav a{justify-content:flex-start}
  .fplace{margin-top:28px}
}
/* Between a phone and a laptop the reading has the window to itself, so
   it takes a little more of it. */
@media (min-width:901px) and (max-width:1180px){
  .pmain{max-width:680px;padding-left:40px;padding-right:40px}
  .phead{padding:30px 40px 0}
  .fin{padding:0 40px;column-gap:48px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .psend,.psend span,.psend::after,.pnav a,.fnav a,.pback{transition:none}
}

/* ---- Small screens: input, reach, and overflow ---------------- */
/* IOS ZOOMS ON ANY INPUT UNDER 16PX. Safari decides the field is too
   small to read, zooms the page to focus it, and leaves the layout
   shoved sideways with no way back but a pinch. The fields are the one
   place on this site the type is not a design decision: 16 is the number
   that stops it. The reading stays where it was set. */
@media (max-width: 900px){
  .pform input,.pform select,.pform textarea,
  .pfall textarea{font-size:16px}

  /* A THUMB IS NOT A CURSOR. 24px clears the WCAG minimum and is still
     small for a finger; 44 is what Apple asks for and what a thumb
     actually wants. The type is untouched, the boxes grow. */
  .pnav a{min-height:44px;padding:10px 0}
  .fnav a{min-height:44px;padding:11px 0}
  .fdisc a,.fesque a{display:inline-block;padding:10px 0}
  .pmark{padding:6px 0}
  .pback,.ptop{min-height:44px}
  /* The three that were missed the first time: the booking call to
     action, the send button and the brand. All of them are things a
     thumb goes for. */
  .pbook{min-height:44px;display:inline-flex;align-items:center;
    padding-top:10px;padding-bottom:12px}
  .psend{min-height:44px;padding:14px 2px 16px}
  .psquare{min-height:44px;display:inline-flex;align-items:center}
  .fbrand{padding:4px 0}
  .fbrandcol .fbrand{min-height:44px}
}

/* Long words, URLs and unbroken strings wrap instead of pushing the page
   sideways. Cheap, global, and it removes a whole class of overflow. */
body{overflow-wrap:break-word}
/* Nothing embedded is allowed to be wider than what holds it. */
img,picture,video,canvas,svg,iframe,embed,object{max-width:100%}
/* The instrument's frame is the exception: it is deliberately the size of
   the window and clipped by its wrapper, so it opts out. */
#bowlframe{max-width:none}

/* HOVER IS FOR THINGS THAT HAVE A POINTER. On a touch screen a hover
   rule fires on tap and sticks until something else is tapped, so a link
   stays lit after you have left it. Gated, they simply do not apply. */
@media (hover: none){
  .pnav a:hover,.fnav a:hover,.pback:hover,.ptop:hover,
  .fdisc a:hover,.fesque a:hover{color:var(--type-dim)}
  .psquare:hover{opacity:1}
}

/* ============================================================
   THE FRAMED LAYOUT (desktop), matching the front page and the
   September 2026 mockup. The header sits above a rounded frame; the
   frame holds the page's photograph under a gradient that is white on
   the left, where the bowls are, and darkens behind the reading on the
   right. The reading scrolls inside the frame: #pframe is fixed and its
   spread shadow paints the ground over everything outside its rounded
   edge, so the words pass under the header rather than over it.
   ============================================================ */
#pphoto,#pframe{display:none}
@media (min-width:901px){
  body.framed #washbg{display:none}
  body.framed #pphoto{display:block;position:fixed;top:8.9vh;left:1.5vw;right:1.5vw;bottom:2.6vh;
    border-radius:.9vw;overflow:hidden;background-position:center;background-size:cover;
    background-repeat:no-repeat;z-index:-2;pointer-events:none}
  /* The right side goes almost dark, in a deep shade of the page's own
     color (--hue, set per page by build-pages.js; neutral if none). */
  body.framed #pphoto::after{content:'';position:absolute;inset:0;
    --shade:color-mix(in srgb,var(--hue,rgb(17,17,20)) 35%,rgb(17,17,20));
    background:linear-gradient(90deg,var(--bg) 0%,var(--bg) 23%,rgba(255,255,255,0.989) 24.438%,rgba(255,255,255,0.957) 25.875%,rgba(255,255,255,0.908) 27.312%,rgba(255,255,255,0.844) 28.75%,rgba(255,255,255,0.768) 30.188%,rgba(255,255,255,0.684) 31.625%,rgba(255,255,255,0.593) 33.062%,rgba(255,255,255,0.5) 34.5%,rgba(255,255,255,0.407) 35.938%,rgba(255,255,255,0.316) 37.375%,rgba(255,255,255,0.232) 38.812%,rgba(255,255,255,0.156) 40.25%,rgba(255,255,255,0.092) 41.688%,rgba(255,255,255,0.043) 43.125%,rgba(255,255,255,0.011) 44.562%,rgba(255,255,255,0) 46%,rgba(255,255,255,0) 100%),
      linear-gradient(90deg,color-mix(in srgb,var(--shade) 0%,transparent) 0%,color-mix(in srgb,var(--shade) 0%,transparent) 30%,color-mix(in srgb,var(--shade) 1.056%,transparent) 33.625%,color-mix(in srgb,var(--shade) 4.039%,transparent) 37.25%,color-mix(in srgb,var(--shade) 8.675%,transparent) 40.875%,color-mix(in srgb,var(--shade) 14.687%,transparent) 44.5%,color-mix(in srgb,var(--shade) 21.802%,transparent) 48.125%,color-mix(in srgb,var(--shade) 29.742%,transparent) 51.75%,color-mix(in srgb,var(--shade) 38.233%,transparent) 55.375%,color-mix(in srgb,var(--shade) 47%,transparent) 59%,color-mix(in srgb,var(--shade) 55.767%,transparent) 62.625%,color-mix(in srgb,var(--shade) 64.258%,transparent) 66.25%,color-mix(in srgb,var(--shade) 72.198%,transparent) 69.875%,color-mix(in srgb,var(--shade) 79.312%,transparent) 73.5%,color-mix(in srgb,var(--shade) 85.325%,transparent) 77.125%,color-mix(in srgb,var(--shade) 89.961%,transparent) 80.75%,color-mix(in srgb,var(--shade) 92.944%,transparent) 84.375%,color-mix(in srgb,var(--shade) 94%,transparent) 88%,color-mix(in srgb,var(--shade) 94%,transparent) 100%)}
  body.framed #pframe{display:block;position:fixed;top:8.9vh;left:1.5vw;right:1.5vw;bottom:2.6vh;
    border-radius:.9vw;box-shadow:0 0 0 100vmax var(--bg);
    pointer-events:none;z-index:5}
  body.framed .phead{position:fixed;top:0;left:0;right:0;height:8.9vh;z-index:6;
    align-items:center;padding:0 4.8vw 0 3vw}
  body.framed .pname{font-weight:300;font-size:1.35vw;letter-spacing:0;
    text-transform:lowercase;line-height:1.2}
  body.framed .ptag{display:none}
  body.framed .pnav{gap:2.4vw;padding-top:0}
  body.framed .pnav a{font-weight:300;font-size:1vw;letter-spacing:0;
    text-transform:lowercase;color:var(--type)}
  body.framed .pmain{max-width:none;width:42.2vw;margin:0 0 0 43.3vw;
    padding:20vh 0 16vh;color:rgba(255,255,255,.88)}
  body.framed .pfig{display:none}
  /* The footer lines up with the header: wordmark edge left, menu edge right. */
  body.framed .fin{max-width:none;padding:0 4.8vw 0 3vw}
  body.framed .pmain .mk{background:var(--bg)}
  body.framed .pmain .lb{color:rgba(255,255,255,.88)}
  body.framed .pmain h1{font-weight:800;font-size:2.95vw;letter-spacing:0;line-height:1.1;
    color:var(--bg);margin-bottom:2vw}
  body.framed .pmain h2{color:var(--bg)}
  body.framed .pmain p,body.framed .pmain p.ld{font-weight:400;font-size:.875vw;
    letter-spacing:0;line-height:1.73;color:rgba(255,255,255,.88)}
  body.framed .pmain p b,body.framed .pmain summary,body.framed .pmain a{color:var(--bg)}
  body.framed .pmain p a{border-bottom-color:currentColor}
  body.framed .pmain details,body.framed .pmain details:last-of-type{border-color:rgba(255,255,255,.36)}
  body.framed .pbook{font-weight:700;font-size:.75vw;letter-spacing:.02em;text-transform:uppercase;
    color:var(--bg);border:1.5px solid currentColor;border-radius:3px;padding:1.15em 1.45em 1.05em;
    text-decoration:none}
  body.framed .pbook::after{display:none}
  body.framed .pback,body.framed .ptop{color:rgba(255,255,255,.88)}
}

/* THE FIRST SCREEN (desktop). The headline, waveform, lead and Reach out
   fill the first screen the way they do on the front page; the rest of
   the page starts below it and is reached by scrolling. */
@media (min-width:901px){
  body.framed .pmain .mk,body.framed .pmain .lb{display:none}
  body.framed #bowlwrap{width:100vw}
  body.framed .pmain{padding-top:22.2vh}
  body.framed .pfirst{min-height:77.8vh;box-sizing:border-box;padding-bottom:6vh}
  body.framed .pfirst h1{margin:0}
  body.framed figure.phero{display:none}
  body.framed .pwave{height:10vh}
  body.framed .pfirst .preach{margin-top:2vw}
}
/* CENTERED TOP TO BOTTOM (desktop). The first screen is exactly the frame's
   height and holds its headline, waveform, lead and Reach out in the
   middle of it, the way the front page does. Further copy follows below. */
@media (min-width:901px){
  body.framed .pmain{padding-top:8.9vh}
  body.framed .pfirst{min-height:88.5vh;padding:0;display:flex;flex-direction:column;
    justify-content:center;align-items:flex-start}
  body.framed .pfirst > *{width:100%}
  body.framed .pfirst .preach{width:auto}
}
/* EVERYTHING IN THE READING IS LEGIBLE ON THE DARK SIDE (desktop). Tables,
   the equation and the forms kept the paper's dark ink, which vanished
   against the frame's dark half. */
@media (min-width:901px){
  body.framed .dt th,body.framed .dt td,body.framed .pform label,
  body.framed .pform label span{color:rgba(255,255,255,.88)}
  body.framed .dt tr td:first-child,body.framed .eq,body.framed .eq sub,body.framed .eq sup{color:var(--bg) !important}
  body.framed .dt th,body.framed .dt td,body.framed .eq{border-color:rgba(255,255,255,.36)}
  body.framed .pform input,body.framed .pform select,body.framed .pform textarea{
    color:var(--bg);border-bottom-color:rgba(255,255,255,.36)}
  body.framed .pform input:focus,body.framed .pform select:focus,body.framed .pform textarea:focus{
    border-bottom-color:var(--bg)}
  body.framed .pform option{color:var(--type)}
  body.framed .pform ::placeholder{color:rgba(255,255,255,.6)}
  body.framed .psend,body.framed .psend span,body.framed .pnote,body.framed .pnote.sent{color:var(--bg)}
}
/* RESPONSIVE. Form fields are never under 16px, because iOS Safari,
   iPad included, zooms the page on focus below that; and on touch
   screens at desktop widths the header links get a finger-sized target. */
.pform input,.pform select,.pform textarea{font-size:16px}
@media (min-width:901px) and (hover:none) and (pointer:coarse){
  body.framed .pnav a{min-height:44px;display:inline-flex;align-items:center}
}
/* BODY TEXT NEVER UNDER 16px, on phones, tablets and desktops alike. On
   desktop it still follows the mockup's proportion once that is larger,
   from about 1830 pixels wide. Labels and legal fine print keep their own
   smaller sizes; they are not body copy. */
.pmain p:not(.lb),.pmain li,.pmain summary,.pmain details > p,.pmain details > div,.dt td{font-size:16px}
@media (min-width:901px){
  body.framed .pmain p:not(.lb),body.framed .pmain li,body.framed .pmain summary,
  body.framed .pmain details > p,body.framed .pmain details > div{font-size:max(16px,.875vw)}
}

/* ABOUT: the portrait. The reading narrows to end at 71vw and the face
   sits at 85.5vw, in the space the reading leaves, at every desktop width.
   The picture is drawn at the frame's height (88.5vh). Its face is 3061px
   into a 1344px-tall file, which is 201.56vh at that height, so this
   offset puts the face at 84vw inside the frame (85.5vw on the window).
   The file's left edge is a mirror of the photograph, under the paper. */
@media (min-width:901px){
  body.framed.p-about .pmain{width:27.7vw}
  body.framed.p-about #pphoto{background-size:auto 100%;
    background-position:calc(84vw - 201.56vh) center}
  body.framed.p-about #pphoto::after{
    background:linear-gradient(90deg,var(--bg) 0%,var(--bg) 23%,rgba(255,255,255,0.989) 24.438%,rgba(255,255,255,0.957) 25.875%,rgba(255,255,255,0.908) 27.312%,rgba(255,255,255,0.844) 28.75%,rgba(255,255,255,0.768) 30.188%,rgba(255,255,255,0.684) 31.625%,rgba(255,255,255,0.593) 33.062%,rgba(255,255,255,0.5) 34.5%,rgba(255,255,255,0.407) 35.938%,rgba(255,255,255,0.316) 37.375%,rgba(255,255,255,0.232) 38.812%,rgba(255,255,255,0.156) 40.25%,rgba(255,255,255,0.092) 41.688%,rgba(255,255,255,0.043) 43.125%,rgba(255,255,255,0.011) 44.562%,rgba(255,255,255,0) 46%,rgba(255,255,255,0) 100%),
      linear-gradient(90deg,rgba(17,17,20,0) 0%,rgba(17,17,20,0) 38%,rgba(17,17,20,0.014) 40.6%,rgba(17,17,20,0.052) 43.2%,rgba(17,17,20,0.108) 45.8%,rgba(17,17,20,0.176) 48.4%,rgba(17,17,20,0.25) 51%,rgba(17,17,20,0.324) 53.6%,rgba(17,17,20,0.392) 56.2%,rgba(17,17,20,0.448) 58.8%,rgba(17,17,20,0.486) 61.4%,rgba(17,17,20,0.5) 64%,rgba(17,17,20,0.486) 67.6%,rgba(17,17,20,0.448) 71.2%,rgba(17,17,20,0.392) 74.8%,rgba(17,17,20,0.324) 78.4%,rgba(17,17,20,0.25) 82%,rgba(17,17,20,0.176) 85.6%,rgba(17,17,20,0.108) 89.2%,rgba(17,17,20,0.052) 92.8%,rgba(17,17,20,0.014) 96.4%,rgba(17,17,20,0) 100%)}
}

/* ===== NO HERO PHOTOS: START (IV, 2026-10-10) =====================
   Every page but About (Tassy's portrait) goes white: no photograph,
   fade or color wash, black type, black button. To put the pictures
   back, delete everything from START to END. */
#washbg{display:none !important}
body:not(.p-about) .pfig,body:not(.p-about) figure.phero{display:none !important}
@media (min-width:901px){
  body.framed:not(.p-about) #pphoto{display:none}
  body.framed:not(.p-about) .pmain,body.framed:not(.p-about) .pmain .lb,
  body.framed:not(.p-about) .pmain h1,body.framed:not(.p-about) .pmain h2,
  body.framed:not(.p-about) .pmain p,body.framed:not(.p-about) .pmain p.ld,
  body.framed:not(.p-about) .pmain p b,body.framed:not(.p-about) .pmain summary,
  body.framed:not(.p-about) .pmain a,body.framed:not(.p-about) .pbook,
  body.framed:not(.p-about) .pback,body.framed:not(.p-about) .ptop,
  body.framed:not(.p-about) .dt th,body.framed:not(.p-about) .dt td,
  body.framed:not(.p-about) .pform label,body.framed:not(.p-about) .pform label span,
  body.framed:not(.p-about) .dt tr td:first-child,body.framed:not(.p-about) .eq,
  body.framed:not(.p-about) .eq sub,body.framed:not(.p-about) .eq sup,
  body.framed:not(.p-about) .pform input,body.framed:not(.p-about) .pform select,
  body.framed:not(.p-about) .pform textarea,body.framed:not(.p-about) .psend,
  body.framed:not(.p-about) .psend span,body.framed:not(.p-about) .pnote{color:var(--type) !important}
  body.framed:not(.p-about) .pmain details,body.framed:not(.p-about) .pmain details:last-of-type,
  body.framed:not(.p-about) .dt th,body.framed:not(.p-about) .dt td,body.framed:not(.p-about) .eq,
  body.framed:not(.p-about) .pform input,body.framed:not(.p-about) .pform select,
  body.framed:not(.p-about) .pform textarea{border-color:var(--type-faint)}
  body.framed:not(.p-about) .pform input:focus,body.framed:not(.p-about) .pform select:focus,
  body.framed:not(.p-about) .pform textarea:focus{border-bottom-color:var(--type)}
  body.framed:not(.p-about) .pform ::placeholder{color:var(--type-dim)}
}
/* ===== NO HERO PHOTOS: END ======================================== */

/* The name centered on the bowl column (22.2vw), as on the front page (IV, 2026-10-10). */
@media (min-width:901px){
  body.framed .pname{position:absolute;left:22.2vw;top:50%;transform:translate(-50%,-50%);white-space:nowrap}
}

/* No frame on the plain white pages (IV, 2026-10-10). */
body.framed #pframe{display:none}
/* With the frame gone, the header and a strip at the foot mask the scrolling reading. */
@media (min-width:901px){
  body.framed .phead,body.framed::after{background:var(--bg)}
  body.framed::after{content:'';position:fixed;left:0;right:0;bottom:0;height:2.6vh;z-index:5;pointer-events:none}
}

/* The reading pages' sound switch, matching the front page's (IV, 2026-10-10). */
.psnd{position:fixed;z-index:8;right:40px;bottom:calc(2.6vh + 14px);
  font-family:var(--sans);font-weight:600;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--type);background:var(--bg);border:0;border-radius:3px;
  min-height:44px;padding:12px 10px;cursor:pointer}
.psnd:focus-visible{outline:2px solid var(--type-dim);outline-offset:3px}
@media (max-width:900px){ .psnd{right:12px;bottom:12px} }

/* Headline in Jost SemiBold (IV, 2026-10-10), on every width. */
.pmain h1,body.framed .pmain h1{font-family:'Jost',var(--sans);font-weight:600}

/* Body copy in Libre Franklin ExtraLight (IV, 2026-10-10), on every width. */
.pmain p:not(.lb),.pmain li,.pmain details > p,.pmain details > div,
body.framed .pmain p:not(.lb),body.framed .pmain p.ld{font-family:'Libre Franklin',var(--sans);font-weight:200}
.pmain p b,.pmain li b,body.framed .pmain p b{font-weight:400}

/* Body copy 20% smaller (IV, 2026-10-10): 16px to 12.8px, .875vw to .7vw. */
.pmain p:not(.lb),.pmain li,.pmain details > p,.pmain details > div{font-size:12.8px}
@media (min-width:901px){
  body.framed .pmain p:not(.lb),body.framed .pmain p.ld,body.framed .pmain li,
  body.framed .pmain details > p,body.framed .pmain details > div{font-size:max(12.8px,.7vw)}
}

/* CTA 50% larger (IV, 2026-10-10): 13px to 19.5px on phones, .75vw to 1.125vw on desktop. */
.pbook{font-size:19.5px}
@media (min-width:901px){ body.framed .pbook{font-size:1.125vw} }

/* The name always reads "roots and resonance sound studio", lowercase (IV, 2026-10-10). */
.pname{text-transform:lowercase}
/* The footer ends above the fixed sound switch, so nothing sits under it (IV, 2026-10-10). */
#foot{padding-bottom:calc(2.6vh + 72px)}
@media (max-width:900px){ #foot{padding-bottom:80px} }

/* The copyright centered on the bowl column (22.2vw), as on the front page (IV, 2026-10-10). */
@media (min-width:901px){
  body.framed .fend{justify-self:stretch;display:flex;justify-content:space-between;align-items:baseline;text-align:left}
  body.framed .fcopy{width:44.4vw;margin-left:-3vw;text-align:center}
}
/* Phone: the name, tagline and menu centered over the centered bowls, as on the front page (IV, 2026-10-10). */
@media (max-width:900px){
  .phead{align-items:center;text-align:center}
  .pnav{justify-content:center}
}