/* regrowth.studio · the chrome every page shares (with chrome.js and the partials _header.html, _footer.html, _enquiry.html):
   the one header (the wordmark · Theory of ReGrowth · Café · Guild · Labs, each with its dropdown), the one footer, the lotus
   button, bottom right, and the one sheet that
   everything opened over a page is drawn as (the menu, the enquiry, a page in the pop-up), in liquid glass (the look the home's
   pop-up had, plate/pages.css, folded in here). Theme-neutral: it reads each world's own tokens, every one with a fallback
   (--paper, --ink, --sheet → --paper, --muted, --re → --yellow, --rule → --line, --display, --sans; the mono is the chrome's own), so the chrome takes
   the plate's, the pages', the studio-as-data's and the garden's own ink and paper. A theme never styles .skip, .site-*, .nav-*,
   .foot-*, .lotus-btn, .sheet*, #menu or #enquiry; it clears the header with var(--head-h) and keeps the lotus button's corner free
   with var(--fab-reserve). Re yellow is only what is ReGrowth's and what you can enter. Motion: 280 ms in, 200 ms out; none
   under reduced motion. CSP-safe: classes and custom properties only. */
@font-face{font-family:"Melodrama";src:url("assets/fonts/Melodrama-Variable.woff2") format("woff2");font-weight:300 700;font-display:swap}
:root{
  --head-h:56px; --fab-reserve:80px;
  --chrome-mono:ui-monospace,"SF Mono",Consolas,monospace; /* the chrome's own mono, so the header and the sheets read the same on every page (the studio-as-data sets a mono of its own) */
  color-scheme:light dark; /* native controls (the enquiry's select, its fields) follow the page's light or dark */
}
/* one row at every width (4 Oct, his word: the site is not mobile optimised): below 720 px the header is the wordmark and, at its
   right end, the lotus menu's own opener — the same menu the lotus button opens, with the nine places as one list, so the five
   tabs' second row no longer costs 92 px (16%) of a 320 × 568 screen. --head-h stays 56 px there (this rule says so and nothing
   else), the tabs' row is hidden below 720 px, and nothing of this is read at 720 px or above */
@media (max-width:719.98px){:root{--head-h:56px}}
html{scroll-padding-top:var(--head-h)}
html.embed{--head-h:0px} /* framed in the home's pop-up: the pop-up's bar is the way out, so the page has no header to clear */

/* ---------- the skip link: the first stop, to the page's #main (chrome.js focuses it; the hash is the garden's) ---------- */
.skip{position:fixed;top:-80px;left:12px;z-index:60;min-height:44px;display:inline-flex;align-items:center;padding:10px 16px;
  background:var(--re,var(--yellow,#F2CB38));color:#1F1C16;font:600 14px/1.2 var(--sans,system-ui,sans-serif);text-decoration:none;box-shadow:3px 3px 0 #1F1C16}
.skip:focus{top:8px;outline:3px solid #1F1C16;outline-offset:2px}

/* ---------- the header: fixed, full width, on paper with a hairline foot ---------- */
.site-head{position:fixed;z-index:50;top:0;left:0;right:0;height:var(--head-h);box-sizing:border-box;display:flex;align-items:center;gap:6px;
  padding:0 max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left));
  background:var(--paper,#F4EFE2);color:var(--ink,#1F1C16);border-bottom:1px solid var(--rule,var(--line,#D3CAB6))}
@media (min-width:900px){.site-head{padding:0 max(26px,env(safe-area-inset-right)) 0 max(26px,env(safe-area-inset-left))}}
.site-head *{box-sizing:border-box}
/* the wordmark (as the plate's): "Re" in its own ochre on light, Re yellow on dark; the way home from every page */
.site-mark{display:inline-flex;align-items:center;min-height:44px;margin-right:auto;padding:0 6px;color:var(--ink,#1F1C16);
  font:400 25px/1 var(--display,"Melodrama",Georgia,serif);letter-spacing:-.5px;text-decoration:none;white-space:nowrap;view-transition-name:site-mark}
.site-mark b{font-weight:400;color:#82620C}
.site-mark span{font:600 9px/1 var(--sans,system-ui,sans-serif);letter-spacing:.22em;text-transform:uppercase;margin-left:4px}
@media (prefers-color-scheme:dark){.site-mark b{color:var(--re,var(--yellow,#F2CB38))}}
@media (max-width:359.98px){.site-mark{font-size:23px}.site-mark span{letter-spacing:.12em;margin-left:3px}}
/* the nav (his word, 3 Oct): Theory of ReGrowth · Café · Guild · Labs, as written (never in capitals), each with a one-level
   dropdown, on every page at every width: from 720 px up beside the wordmark; below it the header's second row, the four spread
   across it, each dropdown a glass panel the width of the screen under the header. A tab with a page of its own is its link and a
   small ▾ button beside it (the dropdown's disclosure, its aria-expanded kept by chrome.js); the Guild, with no page of its own,
   is the button whole. A mouse opens a dropdown by hovering the tab; a tap or Enter on ▾ opens and closes it; Esc, a tap
   elsewhere or the focus leaving closes it. The dropdown is the sheets' liquid glass; chrome.js keeps it on screen (--nav-shift).
   The current place: its tab underlined in Re yellow (.here, chrome.js), its item too */
.nav-tabs,.nav-drop{list-style:none;margin:0;padding:0}
.site-nav{display:flex;align-items:center;min-width:0;margin-right:4px}
.nav-tabs{display:flex;align-items:center;gap:0}
.nav-tab{position:relative;display:flex;align-items:center}
.nav-top{display:inline-flex;align-items:center;gap:5px;min-height:44px;margin:0;padding:0 2px 0 9px;border:0;background:none;color:var(--ink,#1F1C16);cursor:pointer;
  font:500 14px/1 var(--sans,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);letter-spacing:0;white-space:nowrap;text-decoration:none;
  text-decoration-thickness:2px;text-underline-offset:7px}
button.nav-top{padding-right:9px}
.nav-more{display:inline-grid;place-items:center;min-height:44px;margin:0;padding:0 8px 0 4px;border:0;background:none;color:var(--muted,#625B4E);cursor:pointer}
.nav-top.nav-more{display:inline-flex;padding:0 9px;color:var(--ink,#1F1C16)} /* the Guild: its name and ▾ in one button */
.nav-top.nav-more svg{color:var(--muted,#625B4E)}
.nav-more svg{width:9px;height:6px;overflow:visible;transition:transform .2s}
.nav-more path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.nav-top:hover,.nav-tab.open .nav-top{text-decoration:underline;text-decoration-color:var(--re,var(--yellow,#F2CB38))}
.nav-tab.here>.nav-top{text-decoration:underline;text-decoration-color:var(--re,var(--yellow,#F2CB38))}
.nav-tab.open .nav-more svg{transform:rotate(180deg)}
.nav-drop{
  --sheet-rim:rgb(255 255 255 / .55); --sheet-high:rgb(255 255 255 / .75); --sheet-deep:rgb(31 28 22 / .32); --sheet-hair:rgb(31 28 22 / .12);
  position:absolute;z-index:2;top:calc(100% + 6px);left:0;min-width:236px;max-width:calc(100vw - 24px);padding:6px;
  border:1px solid var(--sheet-rim);border-radius:16px;color:var(--ink,#1F1C16);
  background:var(--sheet,var(--paper,#FBF8F0));background:color-mix(in srgb,var(--paper,#F4EFE2) 72%,transparent);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
  box-shadow:inset 0 1px 0 var(--sheet-high),0 24px 60px -24px var(--sheet-deep),0 10px 24px -16px var(--sheet-deep);
  transform:translate(var(--nav-shift,0px),-4px);opacity:0;visibility:hidden;
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
.nav-drop::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px} /* the pointer's bridge from the tab */
.nav-tab.open>.nav-drop{opacity:1;visibility:visible;transform:translate(var(--nav-shift,0px),0);transition:opacity .18s ease,transform .18s ease,visibility 0s}
@media (hover:hover){.nav-tab:hover>.nav-drop{opacity:1;visibility:visible;transform:translate(var(--nav-shift,0px),0);transition:opacity .18s ease .05s,transform .18s ease .05s,visibility 0s .05s}}
.nav-drop a,.nav-soon{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px;min-height:44px;padding:12px 12px 10px;border-radius:10px;color:var(--ink,#1F1C16);
  font:400 15px/1.3 var(--sans,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);text-decoration:none;white-space:nowrap}
.nav-drop a:hover,.nav-drop a:focus-visible{background:var(--sheet-hair)}
.nav-drop a:hover{text-decoration:underline;text-decoration-color:var(--re,var(--yellow,#F2CB38));text-decoration-thickness:2px;text-underline-offset:5px}
.nav-drop a[aria-current]{text-decoration:underline;text-decoration-color:var(--re,var(--yellow,#F2CB38));text-decoration-thickness:2px;text-underline-offset:5px}
.nav-drop small,.nav-soon small{color:var(--muted,#625B4E);font:500 11px/1.3 var(--chrome-mono);letter-spacing:.04em}
.nav-soon{color:var(--muted,#625B4E);cursor:default}
.nav-group{margin:6px 0 0;padding:10px 12px 2px;border-top:1px solid var(--sheet-hair);color:var(--muted,#625B4E);font:500 11px/1.3 var(--chrome-mono);letter-spacing:.04em}
@media (prefers-color-scheme:dark){.nav-drop{--sheet-rim:rgb(255 255 255 / .14); --sheet-high:rgb(255 255 255 / .12); --sheet-deep:rgb(0 0 0 / .62); --sheet-hair:rgb(255 255 255 / .1)}}
@media (min-width:900px){.site-nav{margin-right:10px}.nav-tabs{gap:4px}}
/* below 720 px: the one row. The five tabs stood on a second row from 3 Oct, a size quieter at each step down, until at 375 px
   neighbouring destinations were 0.8 px apart under a thumb and each ▾ was 16 to 22 px wide. They step aside here for the menu,
   which carries the same places as one list, every row a 44 px target (the tabs' own phone sizes and their fixed dropdown panel
   went with them; both are in this file's history, with the two-row grid, if the row comes back). The menu's opener in the header
   (.site-menu) is chrome.js's, made only below 720 px and taken away above, so nothing of it exists on a wide screen */
@media (max-width:719.98px){
  .site-nav{display:none}
  .site-menu{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;margin:0 -6px 0 0;padding:0;border:0;border-radius:50%;
    background:none;color:var(--ink,#1F1C16);cursor:pointer}
  .site-menu svg{width:30px;height:23px;overflow:visible}
  .site-menu path{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
  .site-menu[aria-expanded="true"] path,.site-menu:hover path{stroke:var(--ink,#1F1C16);fill:var(--re,var(--yellow,#F2CB38))}
}
/* the ♪ and the line under it (.site-sound, .site-said, --said-drop) are parked at his word (4 Oct): the anthem is the footer's
   alone now, so the header carries no sound control. Their markup waits, commented, in _header.html; their look is in this file's
   history, to come back with them */

/* ---------- the lotus button: the menu, bottom right, on every page; it steps aside while a sheet or the garden's panel is up ---------- */
.lotus-btn{position:fixed;z-index:45;right:max(16px,env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));
  display:grid;place-items:center;width:56px;height:56px;margin:0;padding:0;border:1px solid #1F1C16;border-radius:50%;
  background:var(--re,var(--yellow,#F2CB38));box-shadow:3px 3px 0 var(--ink,#1F1C16);cursor:pointer;view-transition-name:site-lotus;
  transition:transform .15s,opacity .2s,visibility 0s}
.lotus-btn:hover{transform:translate(-1px,-1px) rotate(-8deg)}
.lotus-btn svg{width:32px;height:24px;overflow:visible}
.lotus-btn path{fill:none;stroke:#1F1C16;stroke-width:2;stroke-linejoin:round}
@media (max-width:639.98px){.lotus-btn{width:52px;height:52px}.lotus-btn svg{width:30px;height:23px}}
html.sheet-open .lotus-btn,html.panel-open .lotus-btn{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility 0s linear .2s}

/* ---------- every control's focus: a 3 px ink ring, 2 px out (chrome.js adds .chrome-ring where a sheet puts the focus) ---------- */
.skip:focus-visible,.site-head a:focus-visible,.site-head button:focus-visible,.lotus-btn:focus-visible,.site-foot a:focus-visible,.site-foot video:focus-visible,.site-foot audio:focus-visible,
.sheet a:focus-visible,.sheet button:focus-visible,.sheet input:focus-visible,.sheet select:focus-visible,.sheet textarea:focus-visible,.sheet .chrome-ring{outline:3px solid var(--ink,#1F1C16);outline-offset:2px}
.nav-drop a:focus-visible{outline-offset:-3px}
main#main:focus{outline:none} /* the skip link's target: the landmark takes the focus, the controls in it show their own rings */

/* ---------- the footer, one component on every page (his word, 3 Oct): the brand block, four columns mirroring the nav, the
   anthem film as an inline player (native video, its poster, the mp4 self-hosted, portrait) with the anthem itself, audio only,
   under it (his word, 4 Oct: the anthem lives here alone), then a thin bar. Styled here alone, in
   each world's own paper and ink, so it reads the same on every page, and by the room it stands in (a container query), so it
   also sits in the garden's panel: wide, the brand · the four columns · the film; middling, the brand and the film over the four
   columns; narrow, one after another, the columns two by two. Its foot keeps the lotus button's corner free ---------- */
.site-foot{container:site-foot/inline-size;display:block;box-sizing:border-box;margin:0;padding:34px max(20px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
  border-top:1px solid var(--ink,#1F1C16);background:var(--paper,#F4EFE2);color:var(--ink,#1F1C16);
  font:14px/1.45 var(--sans,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);text-align:left}
.site-foot *{box-sizing:border-box}
.foot-main{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"brand" "cols" "film";gap:26px;align-items:start;max-width:1240px;margin:0 auto;font-size:14px}
.foot-brand{grid-area:brand;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.foot-mark{display:inline-flex;align-items:center;min-height:44px;color:var(--ink,#1F1C16);font:400 28px/1 var(--display,"Melodrama",Georgia,serif);letter-spacing:-.4px;text-decoration:none}
.foot-mail{display:inline-flex;align-items:center;min-height:44px;color:var(--ink,#1F1C16);text-decoration:underline;text-decoration-color:var(--re,var(--yellow,#F2CB38));text-decoration-thickness:2px;text-underline-offset:5px}
.foot-cols{grid-area:cols;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 18px}
.foot-col ul{list-style:none;margin:4px 0 0;padding:0}
.foot-h{display:flex;align-items:center;min-height:36px;margin:0;padding:0 0 4px;border-bottom:1px solid var(--rule,var(--line,#D3CAB6));color:var(--ink,#1F1C16);
  font:500 15px/1.25 var(--sans,system-ui,sans-serif);text-decoration:none}
.foot-col li a,.foot-soon{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 7px;min-height:40px;padding:10px 0 4px;color:var(--ink,#1F1C16);text-decoration:none}
.foot-col li a:hover,a.foot-h:hover,.foot-mark:hover{text-decoration:underline;text-decoration-color:var(--re,var(--yellow,#F2CB38));text-decoration-thickness:2px;text-underline-offset:5px}
.site-foot a[aria-current]{text-decoration:underline;text-decoration-color:var(--re,var(--yellow,#F2CB38));text-decoration-thickness:2px;text-underline-offset:5px}
.foot-col small,.foot-soon small,.foot-group{color:var(--muted,#625B4E);font:500 11px/1.3 var(--chrome-mono);letter-spacing:.04em}
.foot-soon{color:var(--muted,#625B4E)}
.foot-group{padding:12px 0 0}
.foot-film{grid-area:film;justify-self:start;width:min(200px,56vw)}
.foot-film video{display:block;width:100%;height:auto;aspect-ratio:9/16;border:1px solid var(--ink,#1F1C16);border-radius:12px;background:#171511;object-fit:cover}
/* the anthem, audio only, under the film (his word, 4 Oct: it lives in the footer, for whoever wants to explore): its name, then
   the browser's own player, which loads nothing until it is played, then its credit, said where it plays (made with AI) */
.foot-anthem{display:grid;gap:6px;margin:10px 0 0}
.foot-anthem span{color:var(--muted,#625B4E);font:500 11px/1.4 var(--chrome-mono);letter-spacing:.04em}
.foot-anthem small{color:var(--muted,#625B4E);font:400 12px/1.45 var(--sans,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif)}
.foot-audio{display:block;width:100%;height:36px}
/* the thin bar: each part keeps its · after it, so no line starts with one */
.foot-bar{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;max-width:1240px;margin:26px auto 0;padding:10px var(--fab-reserve,80px) 0 0;border-top:1px solid var(--rule,var(--line,#D3CAB6));
  color:var(--muted,#625B4E);font:400 13px/1.5 var(--sans,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);font-style:normal}
.foot-bar a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink,#1F1C16);text-underline-offset:4px}
.foot-dot{margin-left:10px;color:var(--muted,#625B4E)}
@container site-foot (min-width:560px){
  .foot-main{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand film" "cols film"}
  .foot-film{width:200px;justify-self:end}
}
@container site-foot (min-width:760px){
  .foot-main{grid-template-columns:minmax(0,1fr) 200px;grid-template-areas:"brand film" "cols film";column-gap:36px}
  .foot-cols{grid-template-columns:repeat(5,minmax(0,1fr))} /* one column per tab, the Store among them (3 Oct) */
}
@container site-foot (min-width:1020px){
  .foot-main{grid-template-columns:minmax(170px,.8fr) minmax(0,4fr) 200px;grid-template-areas:"brand cols film";column-gap:40px}
}
/* a phone (the phone pass, 4 Oct): the footer's corner and its sizes. The film and the anthem fill the column instead of standing
   200 px wide in a 335 px one (under that width the browser drops the anthem's timeline and, at 320, the film's fullscreen button),
   the five columns pack two up instead of gridding into a ragged 2 × 3 with a hole beside Store, the columns keep the lotus
   button's corner free as every other block does (--fab-reserve), every row is a 44 px target, the smallest words come up to 12 px,
   and the thin bar's separators go, so no line ends on a stranded ·. Viewport-scoped, so every wider footer — the garden's panel on
   a wide screen included, which the container queries above lay out — is untouched */
@media (max-width:639.98px){
  .foot-film{width:100%;max-width:300px}
  .foot-audio{height:44px}
  .foot-cols{display:block;columns:2;column-gap:18px;padding-right:calc(var(--fab-reserve,80px) - 24px)}
  .foot-col{break-inside:avoid;margin:0 0 22px}
  .foot-h{min-height:44px}
  .foot-col li a,.foot-soon{min-height:44px}
  .foot-col small,.foot-soon small,.foot-group,.foot-anthem span{font-size:12px;line-height:1.4}
  .foot-anthem small{font-size:13px}
  .foot-bar{font-size:14px}
  .foot-dot{display:none}
  /* (Read next keeps the same corner free: its rule stands after its own padding shorthand, at the foot of its section below) */
}
/* the smallest phone (320 px): two footer columns leave 103 px each, so they stand one under another, the corner kept free */
@media (max-width:359.98px){.foot-cols{columns:1;padding-right:calc(var(--fab-reserve,80px) - 14px)}}
/* in the garden's panel (a sheet's body, narrow): the same parts, a size quieter, the panel's own edge for its sides */
.sheet-body .site-foot{margin:26px -2px 0;padding:22px 0 8px;background:transparent}
.sheet-body .foot-mark{font-size:24px}

/* ---------- Read next: every page ends with it, then the footer (the final loop, item 23). One look on every page, in each world's
   own paper and ink: "Read next", then the next place by its one name (the link, underlined in Re yellow as every link is) and its
   line ---------- */
.read-next{display:block;box-sizing:border-box;margin:0;padding:38px max(20px,env(safe-area-inset-right)) 42px max(20px,env(safe-area-inset-left));
  border-top:1px solid var(--rule,var(--line,#D3CAB6));background:var(--paper,#F4EFE2);color:var(--ink,#1F1C16);text-align:left;
  font:16px/1.5 var(--sans,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif)}
.read-next *{box-sizing:border-box}
.read-next .rn{max-width:1120px;margin:0 auto}
.read-next h2{margin:0 0 8px;color:var(--muted,#625B4E);font:500 14px/1.4 var(--sans,system-ui,sans-serif);letter-spacing:.01em}
.read-next a{display:inline-flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:44px;color:var(--ink,#1F1C16);text-decoration:none}
.read-next b{font:400 clamp(28px,4vw,40px)/1.1 var(--display,"Melodrama",Georgia,serif);letter-spacing:-.01em;
  text-decoration:underline;text-decoration-color:var(--re,var(--yellow,#F2CB38));text-decoration-thickness:2px;text-underline-offset:6px}
.read-next span{max-width:36rem;color:var(--muted,#625B4E);font-size:15px}
.read-next a:focus-visible{outline:3px solid var(--ink,#1F1C16);outline-offset:4px}
html.embed .read-next{display:none} /* framed in the home's pop-up: the pop-up's bar is the way on */
.sheet-body .read-next{margin:26px -2px 0;padding:22px 0 4px;background:transparent} /* in the garden's panel, at its foot before the footer: a size quieter */
.sheet-body .read-next b{font-size:28px}
/* a phone: Read next keeps the lotus button's corner free, as every other block does. It stands here, after the padding shorthand
   above, because a media query adds no specificity: declared before it, the shorthand's padding-right won and the link ran under the
   disc. The garden's panel keeps its own padding (higher specificity), as its footer does */
@media (max-width:639.98px){.read-next{padding-right:calc(var(--fab-reserve,80px) - 14px)}}

/* ---------- the one sheet: liquid glass over the page, the page softened behind it ---------- */
html.sheet-open{overflow:hidden;scrollbar-gutter:stable}
.sheet{
  --sheet-rim:rgb(255 255 255 / .55); --sheet-high:rgb(255 255 255 / .75); --sheet-deep:rgb(31 28 22 / .32); --sheet-hair:rgb(31 28 22 / .12);
  position:fixed;inset:0;margin:auto;box-sizing:border-box;max-width:none;max-height:none;padding:0;
  border:1px solid var(--sheet-rim);border-radius:22px;overflow:hidden;overscroll-behavior:contain;
  color:var(--ink,#1F1C16);background:var(--sheet,var(--paper,#FBF8F0));background:color-mix(in srgb,var(--paper,#F4EFE2) 62%,transparent);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
  box-shadow:inset 0 1px 0 var(--sheet-high),0 34px 90px -26px var(--sheet-deep),0 12px 30px -16px var(--sheet-deep);
  font:16px/1.55 var(--sans,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);text-align:left;
  transform-origin:50% 50%;transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.sheet *{box-sizing:border-box}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.sheet{background:var(--sheet,var(--paper,#FBF8F0))}}
.sheet[open]{display:flex;flex-direction:column;animation:sheet-in .28s cubic-bezier(.2,.8,.2,1)}
.sheet::backdrop{background:rgb(31 28 22 / .16);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.sheet[open]::backdrop{animation:sheet-fade .28s cubic-bezier(.2,.8,.2,1)}
.sheet.closing{animation:sheet-out .2s cubic-bezier(.4,0,1,1) forwards}
.sheet.closing::backdrop{animation:sheet-unfade .2s cubic-bezier(.4,0,1,1) forwards}
@media (prefers-color-scheme:dark){
  .sheet{--sheet-rim:rgb(255 255 255 / .14); --sheet-high:rgb(255 255 255 / .12); --sheet-deep:rgb(0 0 0 / .62); --sheet-hair:rgb(255 255 255 / .1)}
  .sheet::backdrop{background:rgb(0 0 0 / .3)}
}
/* a panel that is not a dialog (the garden's aside) wears the same surface and bar */
.sheet-look{
  --sheet-rim:rgb(255 255 255 / .55); --sheet-high:rgb(255 255 255 / .75); --sheet-deep:rgb(31 28 22 / .32); --sheet-hair:rgb(31 28 22 / .12);
  border:1px solid var(--sheet-rim);border-radius:22px;color:var(--ink,#1F1C16);
  background:var(--sheet,var(--paper,#FBF8F0));background:color-mix(in srgb,var(--paper,#F4EFE2) 62%,transparent);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
  box-shadow:inset 0 1px 0 var(--sheet-high),0 34px 90px -26px var(--sheet-deep),0 12px 30px -16px var(--sheet-deep)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.sheet-look{background:var(--sheet,var(--paper,#FBF8F0))}}
@media (prefers-color-scheme:dark){.sheet-look{--sheet-rim:rgb(255 255 255 / .14); --sheet-high:rgb(255 255 255 / .12); --sheet-deep:rgb(0 0 0 / .62); --sheet-hair:rgb(255 255 255 / .1)}}

/* the bar: its name, a way through (the page itself) where there is one, and ×; at least 58 px, every target 44 px */
.sheet-bar{position:relative;display:flex;align-items:center;gap:4px;flex:none;min-height:58px;margin:0;padding:6px 8px 4px 22px}
.sheet-title{flex:1;min-width:0;margin:0;color:var(--ink,#1F1C16);font:500 11px/1.4 var(--chrome-mono);letter-spacing:.16em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet-link{display:inline-flex;align-items:center;flex:none;min-height:44px;padding:0 14px;border-radius:999px;color:var(--ink,#1F1C16);
  font:500 11px/1 var(--chrome-mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  text-decoration:underline;text-decoration-color:var(--re,var(--yellow,#F2CB38));text-decoration-thickness:2px;text-underline-offset:5px;transition:background-color .15s}
.sheet-close{display:grid;place-items:center;flex:none;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink,#1F1C16);
  font:300 30px/1 var(--sans,system-ui,sans-serif);cursor:pointer;transition:background-color .15s}
.sheet-link:hover,.sheet-close:hover{background:var(--sheet-hair)}
.sheet-body{position:relative;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:2px 22px 22px}

/* the three kinds. The page: the studio's own page, framed, inset in the glass */
.sheet-page{width:min(1100px,calc(100vw - 64px));height:min(860px,calc(100svh - 64px))}
.sheet-page .sheet-body{overflow:hidden;margin:0 10px 10px;padding:0;border-radius:14px;box-shadow:0 0 0 1px var(--sheet-hair)}
.pop-frame{display:block;width:100%;height:100%;border:0;border-radius:14px;background:transparent;opacity:0;transition:opacity .18s ease-out}
.pop-frame:focus{outline:none} /* the focus is inside the page, whose own rings show */
.sheet-page.ready .pop-frame{opacity:1}
#pop-wait{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:var(--muted,#625B4E);font:500 11px/1.4 var(--chrome-mono);letter-spacing:.16em;text-transform:uppercase}
.sheet-page.ready #pop-wait{visibility:hidden}
/* the menu: docked right, the full height less a margin; the lotus mark over the list of places, one name each */
.sheet-menu{width:min(420px,calc(100vw - 16px));height:calc(100svh - 16px);margin:auto 8px auto auto;transform-origin:100% 50%}
.sheet-menu[open]{animation-name:sheet-dock}
.sheet-menu.closing{animation-name:sheet-undock}
.menu-mark{display:block;width:96px;height:96px;margin:0 auto 8px;overflow:visible}
.menu-mark path,.menu-mark .disc{fill:var(--sheet,var(--paper,#FBF8F0));stroke:var(--ink,#1F1C16);stroke-width:1.1px;vector-effect:non-scaling-stroke;transition:fill .15s}
.menu-mark .stamen{fill:var(--ink,#1F1C16)}
.menu-mark .disc{fill:var(--re,var(--yellow,#F2CB38))}
.menu-mark .here,.menu-mark .lit,.menu-mark .here .disc,.menu-mark .lit .disc{fill:var(--re,var(--yellow,#F2CB38))}
.menu-mark .here,.menu-mark .here .disc{stroke-width:2px}
.menu-list{list-style:none;margin:0;padding:0}
.menu-list li{margin:0;border-top:1px solid var(--rule,var(--line,#D3CAB6))}
.menu-list a{display:block;min-height:44px;padding:7px 4px 8px;color:var(--ink,#1F1C16);text-decoration:none}
.menu-list b{display:block;font:400 20px/1.15 var(--display,"Melodrama",Georgia,serif);letter-spacing:-.2px}
.menu-list span{display:block;margin-top:2px;color:var(--muted,#625B4E);font-size:13px;line-height:1.38}
.menu-list a:hover b,.menu-list a[aria-current] b{text-decoration:underline;text-decoration-color:var(--re,var(--yellow,#F2CB38));text-decoration-thickness:2px;text-underline-offset:5px}
/* the foot (the channel, the email) stays in view at the sheet's foot while the list scrolls, on paper to the sheet's very edge (it
   carries the body's bottom room itself), so nothing ends unseen below the fold and nothing shows under it */
.sheet-menu .sheet-body{padding-bottom:0}
.menu-foot{position:sticky;z-index:1;bottom:0;margin:6px 0 0;padding:4px 0 calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--rule,var(--line,#D3CAB6));color:var(--muted,#625B4E);font:500 11px/1.4 var(--chrome-mono);letter-spacing:.1em;
  background:var(--sheet,var(--paper,#FBF8F0))}
.menu-foot a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink,#1F1C16);text-underline-offset:4px}
/* a laptop's screen (900 px tall or less): the lotus smaller and the rows closer, so all nine places and the menu's foot stand in
   view at 1280×800 without scrolling; every row stays a 44 px target */
@media (max-height:900px){
  .menu-mark{width:56px;height:56px;margin-bottom:4px}
  .menu-list a{padding:5px 4px 6px}
}
/* a shorter laptop (780 px or less: 1366 × 768, 1280 × 720, 1000 × 700): the list is the menu, without the lotus mark over it; and
   at 720 px or less each place's line stands on one line, so the nine places and the foot still stand in view */
@media (max-height:780px) and (min-width:640px){.menu-mark{display:none}.sheet-menu .sheet-body{padding-top:0}}
@media (max-height:720px) and (min-width:640px){.menu-list span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
/* the form: the one enquiry, a mail draft and nothing sent */
.sheet-form{width:min(560px,calc(100vw - 32px));height:fit-content;max-height:92svh}
.sheet-form .sheet-body{padding:0 26px 24px}
.sheet-h{margin:0 0 14px;font:400 34px/1.08 var(--display,"Melodrama",Georgia,serif);letter-spacing:-.3px;color:var(--ink,#1F1C16)}
.sheet form{display:grid;gap:14px;margin:0}
.sheet label{display:grid;gap:6px;color:var(--ink,#1F1C16);font:500 13px/1.4 var(--sans,system-ui,sans-serif)}
.sheet input,.sheet select,.sheet textarea{width:100%;min-height:44px;margin:0;padding:10px 12px;border:1px solid var(--ink,#1F1C16);border-radius:10px;
  background:var(--sheet,var(--paper,#FBF8F0));color:var(--ink,#1F1C16);font:16px/1.4 var(--sans,system-ui,sans-serif)}
.sheet textarea{resize:vertical;min-height:96px}
.sheet textarea[readonly]{background:transparent}
.sheet ::placeholder{color:var(--muted,#625B4E);opacity:1}
.sheet .small{margin:0;color:var(--muted,#625B4E);font-size:13px;line-height:1.5}
.sheet-cta{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin:0;padding:10px 22px;border:1px solid #1F1C16;border-radius:999px;
  background:var(--re,var(--yellow,#F2CB38));color:#1F1C16;box-shadow:3px 3px 0 var(--ink,#1F1C16);font:600 15px/1.2 var(--sans,system-ui,sans-serif);cursor:pointer;transition:transform .15s,box-shadow .15s}
.sheet-cta:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink,#1F1C16)}
.sheet-cta:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink,#1F1C16)}
.sheet .linkish{display:inline-flex;align-items:center;min-height:44px;margin:0;padding:6px 0;border:0;background:none;color:var(--ink,#1F1C16);font:600 14px var(--sans,system-ui,sans-serif);text-decoration:underline;cursor:pointer}
#draft-result{display:grid;gap:6px}
#draft-result[hidden]{display:none}
#draft-status{margin:0;color:var(--ink,#1F1C16);font-size:14px}
#draft-status:empty{display:none}

/* a phone: every sheet is a bottom sheet, full width, rounded at the top, a grip to drag it away (chrome.js) */
@media (max-width:639.98px){
  .sheet{width:100%;margin:auto 0 0;border-width:1px 0 0;border-radius:22px 22px 0 0;transform-origin:50% 100%}
  .sheet-page{height:92svh}
  .sheet-menu,.sheet-form{height:fit-content;max-height:92svh}
  .sheet[open],.sheet-menu[open]{animation-name:sheet-rise}
  .sheet.closing,.sheet-menu.closing{animation-name:sheet-sink}
  .sheet.dragging{transition:none}
  .sheet-bar{min-height:62px;padding:14px 6px 2px 18px;touch-action:none}
  .sheet-bar::before{content:"";position:absolute;left:50%;top:7px;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:var(--ink,#1F1C16);opacity:.26}
  .sheet-link{padding:0 10px}
  .sheet-body{padding:2px 18px calc(18px + env(safe-area-inset-bottom))}
  .sheet-page .sheet-body{margin-bottom:calc(10px + env(safe-area-inset-bottom));padding:0}
  .sheet-form .sheet-body{padding:0 18px calc(20px + env(safe-area-inset-bottom))}
  .menu-mark{width:84px;height:84px;margin-bottom:6px}
  .sheet-h{font-size:30px}
  /* the menu on a phone: the sheet's paper, not its glass, so every place's line meets 4.5:1 over a dark page, and its foot is the
     same paper as the panel (the final loop, item 22) */
  .sheet-menu{background:var(--sheet,var(--paper,#FBF8F0))}
  /* a sheet's eyebrow wraps rather than ending mid-word (THE REGROWTH CAFÉ · THE FOUNDING CIRCL…), and the list that scrolls under
     the menu's foot fades into it, so a row cut mid-sentence reads as more below (the phone pass, 4 Oct) */
  .sheet-title{white-space:normal;overflow:visible;text-overflow:clip}
  .menu-foot::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:20px;pointer-events:none;
    background:linear-gradient(to top,var(--sheet,var(--paper,#FBF8F0)),transparent)}
  /* the sheet's own reading labels at the 12 px floor the pass set for every word outside a drawing */
  .sheet-title{font-size:12px}
  .menu-foot,.menu-foot a{font-size:12px}
  /* the thin bar's one link stood 44 px tall already (above) but 43 px wide: one pixel of pad either side is the whole of it */
  .foot-bar a{padding:0 1px}
}
@media (max-height:520px) and (min-width:640px){.menu-mark{display:none}} /* a short, wide window: the list is the menu */
@keyframes sheet-in{from{opacity:0;transform:scale(.96)}}
@keyframes sheet-out{to{opacity:0;transform:scale(.96)}}
@keyframes sheet-dock{from{opacity:0;transform:translateX(28px)}}
@keyframes sheet-undock{to{opacity:0;transform:translateX(28px)}}
@keyframes sheet-rise{from{opacity:0;transform:translateY(48px)}}
@keyframes sheet-sink{to{transform:translateY(100%)}}
@keyframes sheet-fade{from{opacity:0}}
@keyframes sheet-unfade{to{opacity:0}}

/* ---------- a page with no theme of its own (/brand/, v13's library: compose.mjs mounts the chrome on it, body.chrome-only): it
   clears the header, and its footer stands clear of the page above it ---------- */
body.chrome-only{padding-top:var(--head-h)}
body.chrome-only .site-foot{margin-top:40px}

/* ---------- framed in the home's pop-up (?embed=1): the pop-up's bar is the way out, so the page's own chrome steps aside; of the
   footer only its thin bar stays ---------- */
html.embed .skip,html.embed .site-head,html.embed .lotus-btn,html.embed #menu,html.embed .foot-main{display:none}
html.embed .site-foot{padding-top:6px}html.embed .foot-bar{margin-top:0;border-top:0;padding-right:0}

/* ---------- moving between pages: the browser crossfades, and the header's three marks hold their place ---------- */
@view-transition{navigation:auto}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .nav-top,.nav-more svg,.nav-drop,.nav-tab.open>.nav-drop,.nav-tab:hover>.nav-drop,.lotus-btn,.sheet,.pop-frame,.sheet-link,.sheet-close,.sheet-cta,.menu-mark path,.menu-mark .disc{transition:none}
  .lotus-btn:hover,.sheet-cta:hover,.sheet-cta:active{transform:none}
  .sheet[open],.sheet[open]::backdrop,.sheet.closing,.sheet.closing::backdrop{animation:none}
}