/* Huachuma Works, the new look: "Lattice". The whole stylesheet of every page drawn in design/draft-v2/.

   His choice, October 15, 2026, from webmaster-universal by /huachumaworks-redesign: "E, Lattice (Recommended)"
   (decision 44), deep and light bands joined by golden-ratio rosettes, setting aside "Light is better" for this site
   at his word; the grass in C's gold, "Gold, as in C (Recommended)" (decision 45). Made from
   design/redesign/direction-e/kit.css at step 4; every rule that look replaced (the ridge seams, the numbered path,
   the boxed rows, the plain bands) is gone, not left beside it. design/draft-v2/README.md names every piece and how a
   page uses it; design/redesign/kit/ shows them all on one page.

   The family's colors and typefaces, kept at his word (D66, "Keep the family look"): Paper, Bloom, Ink, Stone,
   Glaucous, Cochineal and their pale companions, Spectral and Public Sans, served from the site itself. The deep
   ground is Ink with 12 percent Glaucous. Gold is in the grass's pictures only, never in a word, a button or a
   ground. */

@font-face{font-family:"Public Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(/media/fonts/public-sans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(/media/fonts/public-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Spectral";font-style:normal;font-weight:300;font-display:swap;src:url(/media/fonts/spectral-normal-300-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Spectral";font-style:normal;font-weight:300;font-display:swap;src:url(/media/fonts/spectral-normal-300-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Spectral";font-style:normal;font-weight:400;font-display:swap;src:url(/media/fonts/spectral-normal-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Spectral";font-style:normal;font-weight:400;font-display:swap;src:url(/media/fonts/spectral-normal-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Spectral";font-style:normal;font-weight:500;font-display:swap;src:url(/media/fonts/spectral-normal-500-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Spectral";font-style:normal;font-weight:500;font-display:swap;src:url(/media/fonts/spectral-normal-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Spectral";font-style:italic;font-weight:300;font-display:swap;src:url(/media/fonts/spectral-italic-300-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Spectral";font-style:italic;font-weight:300;font-display:swap;src:url(/media/fonts/spectral-italic-300-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Spectral";font-style:italic;font-weight:400;font-display:swap;src:url(/media/fonts/spectral-italic-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Spectral";font-style:italic;font-weight:400;font-display:swap;src:url(/media/fonts/spectral-italic-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* --- the colors and measures, as named tokens -------------------------------------------------------------------
   The form (sitedef/build.py FORM_CSS) reads --ground, --hair, --stone, --stone-pale, --glaucous, --glaucous-pale,
   --ink, --cochineal, --paper, --body and --display: keep those names. */
:root{
  --paper:#FFFFFF; --bloom:#F1F4F0; --ink:#16211F; --stone:#5F6A65;
  --glaucous:#3D6B5E; --cochineal:#9B2033; --cochineal-h:#7E1A2A;
  --glaucous-pale:#9CBFB2; --cochineal-pale:#E07A88; --stone-pale:#9AA49E;
  --deep:#1B2A27;                          /* Ink with 12 percent Glaucous: every deep band */
  --on-deep:rgba(241,244,240,.88);         /* body text on deep: Bloom, 10.7 to 1 */
  --hair:rgba(154,164,158,.45); --hair-deep:rgba(156,191,178,.26); --hair-d:rgba(241,244,240,.18);
  --on-ink:rgba(241,244,240,.82);
  --ground:var(--bloom); --alt:var(--paper); --head:var(--ink); --accent:var(--glaucous); --foot:var(--ink);
  --display:"Spectral",Georgia,"Times New Roman",serif;
  --body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --head-h:76px;
  --spill:190px;                           /* how far a field's lines run on below a deep band's edge */
}

/* --- the page --------------------------------------------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-padding-top:100px;-webkit-text-size-adjust:100%}
body{margin:0;font:400 18px/1.7 var(--body);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.narrow{max-width:780px}
/* Every section knows the page's edge and its own padding, so art and photographs can be placed against them:
   --edge is the distance from the page's side to the column, --pb a section's padding top and bottom. Bleeds are
   measured from <main>'s own width (cqw), never 100vw, so nothing ever scrolls sideways. */
main{container-type:inline-size;overflow-x:clip}
main section{position:relative;--edge:max(32px,calc((100cqw - 1180px) / 2 + 32px));--pb:112px}
main .wrap{position:relative;z-index:2}
.sec{padding:var(--pb) 0}

/* --- type ------------------------------------------------------------------------------------------------------- */
h1,h2,h3{font-family:var(--display);color:var(--head);margin:0;text-wrap:balance}
h1{font-weight:300;font-size:74px;line-height:1.03;letter-spacing:-.018em;margin-bottom:26px}
h2{font-weight:400;font-size:44px;line-height:1.12;letter-spacing:-.012em;margin-bottom:24px}
h3{font-weight:500;font-size:25px;line-height:1.25;margin-bottom:12px}
h1 .soft,h2 .soft{font-weight:300;font-style:italic;color:var(--stone)}
p{margin:0 0 18px}
.prose{max-width:660px}
.lead{font-size:20px;line-height:1.6;max-width:600px}
.said{font:300 23px/1.55 var(--display);color:var(--ink);max-width:620px;margin:28px 0 0;text-wrap:pretty}
.small{font-size:15.5px;line-height:1.6;color:var(--stone)}
.kicker{font:italic 400 20px/1.4 var(--display);color:var(--stone);margin:0 0 12px}
.statement{font:300 60px/1.12 var(--display);color:var(--head);letter-spacing:-.01em;margin:0;text-wrap:balance}
.caption{font-size:14.5px;line-height:1.5;color:var(--stone);margin-top:10px}

/* --- links and buttons ------------------------------------------------------------------------------------------ */
a{color:var(--glaucous);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
a:focus-visible,.btn:focus-visible,summary:focus-visible{outline:3px solid var(--glaucous);outline-offset:3px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;
  font:600 15.5px/1 var(--body);border-radius:2px;text-decoration:none;white-space:nowrap;letter-spacing:.01em;
  background:var(--cochineal);border:1px solid var(--cochineal);color:#fff}
.btn:hover{background:var(--cochineal-h);border-color:var(--cochineal-h)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

/* --- the header and its menus (as today: Home, Retreat with its panel of the two paths, About, Apply) ----------- */
.site-head{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(154,164,158,.26)}
.head-row{display:flex;align-items:center;justify-content:space-between;height:var(--head-h);gap:24px}
.logo img{width:142px;height:auto}
.nav{display:flex;align-items:center;gap:4px;height:100%}
.nav>a,.nav .top{display:flex;align-items:center;height:100%;padding:0 16px;font:500 15.5px/1 var(--body);color:var(--ink);text-decoration:none;border-bottom:2px solid transparent}
.nav>a:hover,.nav .top:hover,.has-panel:focus-within .top{color:var(--glaucous)}
.nav>a[aria-current],.nav .top[aria-current]{border-bottom-color:var(--glaucous);color:var(--glaucous)}
.has-panel{height:100%;display:flex;align-items:center}
.panel{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-top:1px solid var(--hair);
  box-shadow:0 24px 40px rgba(22,33,31,.12)}
.panel::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.has-panel:hover .panel,.has-panel:focus-within .panel{display:block}
.panel-row{display:grid;grid-template-columns:1fr 1fr 300px;align-items:start;max-width:1180px;margin:0 auto;padding:36px 32px 40px}
.panel-path{display:block;padding:2px 40px 2px 0;margin-right:40px;border-right:1px solid var(--hair);color:var(--ink);text-decoration:none}
.panel-path span{display:block}
.pp-name{font:400 26px/1.2 var(--display);color:var(--head);margin-bottom:10px}
.pp-note{font-size:15.5px;line-height:1.55;color:var(--ink);max-width:340px}
.pp-when{font:italic 400 16.5px/1.4 var(--display);color:var(--stone);margin-top:12px}
.panel-path:hover .pp-name,.panel-path:focus-visible .pp-name,.panel-path[aria-current] .pp-name{color:var(--glaucous)}
.panel-path:hover .pp-name,.panel-path:focus-visible .pp-name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.feature{display:block;color:var(--ink);text-decoration:none}
.feature img{width:100%;height:120px;object-fit:cover;border-radius:3px;margin-bottom:14px}
.feature span{display:block}
.feature-title{font:400 19px/1.3 var(--display);color:var(--head);margin-bottom:6px}
.feature-note{font-size:14.5px;line-height:1.5;color:var(--stone)}
.feature:hover .feature-title,.feature:focus-visible .feature-title{color:var(--glaucous)}
.menu{display:none}
.menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;min-height:44px;padding:0 16px;
  border:1px solid var(--ink);border-radius:3px;font:600 14.5px/1 var(--body);color:var(--ink)}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{background:var(--bloom)}
.menu-panel{position:absolute;left:0;right:0;top:var(--head-h);background:var(--paper);padding:8px 24px 30px;
  border-top:1px solid var(--hair);box-shadow:0 24px 40px rgba(22,33,31,.12)}
.menu-panel a{display:block;font:400 25px/1.25 var(--display);color:var(--ink);text-decoration:none;padding:18px 0;border-top:1px solid var(--hair)}
.menu-panel a:first-child{border-top:0}
.menu-panel a[aria-current="page"]{color:var(--glaucous)}
.menu-panel a.sub{font-size:20px;padding:12px 0 12px 22px;border-top:0;min-height:44px}
.menu-panel a.sub+a:not(.sub){margin-top:8px}

/* --- the bands: light and deep, alternating ----------------------------------------------------------------------
   A light band is Paper (.light) or Bloom (.light.bloom). A deep band carries class "deep" AND data-band="deep",
   which tools/check_guards.py F4 counts: it allows them on a page in this look (<body data-look="lattice">), never
   two touching, at most two a page in <main> plus an opening panel, and refuses every other dark ground. A light
   band carries data-band="light", a photograph opening data-band="photo". */
.light{background:var(--paper)}
.light.bloom{background:var(--bloom)}
.deep{background:var(--deep);color:var(--on-deep)}
.deep h1,.deep h2,.deep h3{color:var(--paper)}
.deep p{color:var(--on-deep)}
.deep .kicker{color:var(--glaucous-pale)}
.deep .said{color:var(--paper)}
.deep .small{color:var(--stone-pale)}
/* A caption on a deep band is a step lighter than Stone pale: half Stone pale and half Bloom, both the family's.
   In Stone pale, Testimonials' two captions over the band's lit rhombs read 3.67 to 4.1 where 4.5 is needed
   (October 15, 2026, step 7, tools/check_contrast_painted.py). */
.deep .caption{color:#C6CCC7}
/* A photograph that crosses out of a deep band (.cross) hangs into the light band below, and its caption with it:
   that caption is read on the light ground, in Stone (the retreat page's read 2.32 in Stone pale, step 7). */
.deep .cross .caption{color:var(--stone)}
.deep a{color:var(--glaucous-pale)}
.deep a:focus-visible,.deep .btn:focus-visible,.deep summary:focus-visible{outline-color:var(--glaucous-pale)}
.deep .btn{background:transparent;border-color:rgba(255,255,255,.88);color:#fff}
.deep .btn:hover{background:#fff;color:var(--ink);border-color:#fff}
.deep .btn.ask{background:var(--cochineal);border-color:#fff}
.deep .btn.ask:hover{background:var(--cochineal-h);border-color:#fff;color:#fff}
.deep .pull p{color:var(--paper)}
.deep .note{border-top-color:var(--hair-deep)}
.deep .faq details{border-color:var(--hair-deep)}
.deep .faq summary{color:var(--paper)}
.deep .faq summary::after{color:var(--glaucous-pale)}

/* --- the seams: a rosette across the edge two bands share --------------------------------------------------------
   One figure (art/l-rose-<star|decagon|large>-<point|notch>-<dl|ld>.svg), cut exactly on the edge, light on its
   deep half and Glaucous on its light half: "dl" when the deep band is above the edge, "ld" when below. Put the
   <img class="rose"> in either band; .on-top sits it on its band's upper edge, .on-foot on its lower edge. --x is
   where its centre falls across the page, --size its width (the star about 300 to 560 pixels, the decagon 360 to
   680, the large rosette 460 to 860). Never the same figure on two edges in a row, nor one stamped down the page. */
.rose{position:absolute;z-index:1;pointer-events:none;max-width:none;height:auto;--size:520px;--x:50%;
  width:var(--size);left:calc(var(--x) - var(--size) / 2)}
.rose.on-top{top:calc(var(--size) / -2)}
.rose.on-foot{bottom:calc(var(--size) / -2)}

/* --- the fields: the tiling glowing in a deep band's empty space --------------------------------------------------
   <div class="field" aria-hidden="true"><img class="wide" ...><img class="phone" ...></div> inside a deep section:
   the field covers the band and runs on --spill below its lower edge (l-field-spill and -low carry their lines
   across it); .in keeps it inside the band. The page places each picture (left, top or bottom, width). A field
   never sits behind a column of text on a phone: a picture marked .wide shows down to 601 pixels, .wide-only down to
   901 (where the columns stack), and a .phone picture (l-field-phone, -phone-spill) takes their place in the empty
   space under the column from 600 down. */
.field{position:absolute;left:0;right:0;top:0;bottom:calc(-1 * var(--spill));overflow:hidden;z-index:1;pointer-events:none}
.field.in{bottom:0}
.field img{position:absolute;bottom:0;max-width:none;height:auto}
.field .phone{display:none}
.panel-field{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.panel-field img{position:absolute;right:0;top:calc(50% - 380px);width:760px;max-width:none;height:auto}

/* --- the grass, C's gold, on two pages only ----------------------------------------------------------------------
   .grass.at-foot at the foot of home's opening photograph (art/l-grass-open.webp, its photograph's foot 318 of its 560
   pixels down, so bottom:-8.4cqw puts that line on the section's lower edge). .grass.stand, one stand rising out of
   a deep band across its upper edge (art/l-grass-stand.webp, the edge 400 of its 720 pixels down): put it in the
   deep section, --w its width, --x its left. */
.grass{position:absolute;max-width:none;height:auto;z-index:3;pointer-events:none}
.grass.at-foot{left:0;width:100%;bottom:-8.4cqw}
.grass.stand{--w:800px;--x:8%;width:var(--w);left:var(--x);top:calc(var(--w) * -.25)}

/* --- openings ----------------------------------------------------------------------------------------------------
   .open: a photograph across the whole width with the words on it, a soft Ink scrim over its top behind them (the
   page sets the photograph's object-position). .open.panelled: the words on a deep panel of their own at the left,
   its full height, the photograph beside it (the retreat page), data-band="deep" on the panel. */
.open{position:relative;min-height:clamp(560px,82vh,820px);display:flex;align-items:flex-start;background:var(--ink)}
.open-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.open:not(.panelled)::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(22,33,31,.5) 0%,rgba(22,33,31,.34) 40%,rgba(22,33,31,0) 68%)}
.open-words{position:relative;z-index:2;width:100%;padding-top:clamp(48px,7vh,88px);padding-bottom:120px}
.open .kicker{color:var(--bloom)}
.open h1{color:#fff;max-width:760px;margin-bottom:24px}
.open .lead{color:#fff;max-width:520px;margin-bottom:0}
.open .btn:not(.ghost){border-color:#fff}
/* its fill .45 of Ink, not .3: over home's brightest sky at 820 wide its word read 4.31 where 4.5 is needed (step 7) */
.open .btn.ghost{color:#fff;border-color:rgba(255,255,255,.9);background:rgba(22,33,31,.45)}
.open .btn.ghost:hover{background:#fff;color:var(--ink)}
.open.panelled{min-height:clamp(600px,84vh,840px);align-items:stretch}
.open-panel{position:relative;width:max(47%,600px);background:var(--deep);display:flex;align-items:center}
.open-panel .open-words{padding:64px 64px 160px var(--edge);max-width:700px}
.open-panel .said{color:var(--on-deep);font-size:21px;max-width:480px;margin-top:36px}
.open-panel h1,.open-panel h2{color:#fff}
.open-panel .kicker{color:var(--glaucous-pale)}
.open-panel .lead{color:var(--on-deep)}
.open-panel .btn.ask{background:var(--cochineal);border-color:#fff}

/* --- photographs: hard edges, crossing an edge, bleeding off the page ---------------------------------------------
   .photo holds one photograph (2 pixel corners). .cross lets it hang --below pixels into the next band, the next
   band's .after-cross making room (beside it on a laptop, the page keeping that column clear for --below pixels;
   under it once the columns stack); .bleed-r and .bleed-l run it off the page's right or left side. */
.photo img{width:100%;border-radius:2px;object-fit:cover}
.cross{--below:270px;margin-bottom:calc(-1 * (var(--below) + var(--pb)))}
.after-cross{padding-top:calc(var(--pb) + 64px)}
.bleed-r{margin-right:calc(-1 * var(--edge))}
.bleed-r img{border-radius:2px 0 0 2px}
.bleed-l{margin-left:calc(-1 * var(--edge))}
.bleed-l img{border-radius:0 2px 2px 0}
.letterbox img{width:100%;height:clamp(240px,34vw,480px);object-fit:cover;border-radius:0}
.album{display:grid;grid-template-columns:2fr 1fr;gap:14px}
.album img{width:100%;height:100%;object-fit:cover;border-radius:2px}

/* --- reading pieces ---------------------------------------------------------------------------------------------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.split.top{align-items:start}
.split.words-wide{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.split.pic-wide{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.pull{margin:0;padding:0}
.pull p{font:italic 300 27px/1.45 var(--display);color:var(--ink);margin:0 0 14px;text-wrap:pretty}
.pull cite{font:500 15px/1.4 var(--body);font-style:normal;color:var(--stone)}
.deep .pull cite{color:var(--stone-pale)}
.note{border-top:1px solid var(--hair);padding:24px 0 0;max-width:600px}
.note p:last-child{margin-bottom:0}
.card{background:var(--bloom);border-radius:2px;padding:32px}
.light.bloom .card{background:var(--paper)}
.deep .card{background:rgba(156,191,178,.08);border:1px solid var(--hair-deep)}
.price{font:300 64px/1 var(--display);color:var(--ink);letter-spacing:-.015em;margin:0 0 12px}
.deep .price{color:var(--paper)}
.hold{margin:0;font-size:17px;color:var(--stone)}
.deep .hold{color:var(--stone-pale)}
.bigdate{font:300 56px/1.1 var(--display);color:var(--head);letter-spacing:-.01em;margin:0;text-wrap:balance}
.deep .bigdate{color:var(--paper)}

/* Folded questions: the question in the summary, its answer under it (FAQPage is read from these, so a summary
   ends in "?"). */
.faq details{border-top:1px solid var(--hair)}
.faq details:last-child{border-bottom:1px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:baseline;
  padding:22px 0;font:500 21px/1.35 var(--display);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:300 30px/1 var(--body);color:var(--glaucous);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .answer{padding:0 48px 22px 0;max-width:720px}
.faq .answer p:last-child{margin-bottom:0}

/* Two tables a reader uses as reference, and the only two kinds the guard allows (F10, F12): the prices, with
   column headings, and the day by day schedule, every label a day ("Day 1."). */
.prices{width:100%;border-collapse:collapse;margin:26px 0 30px}
.prices tr{border-top:1px solid var(--hair)}
.prices tbody tr:last-child{border-bottom:1px solid var(--hair)}
.prices thead tr{border-top:0}
.prices th{font:italic 400 18px/1.5 var(--display);color:var(--ink);text-align:left;vertical-align:top;padding:16px 18px 16px 0}
.prices thead th{font:600 14.5px/1.4 var(--body);color:var(--stone);text-align:right;padding:0 0 12px 18px}
.prices thead th:first-child{text-align:left;padding-left:0}
.prices td{text-align:right;font:400 21px/1.5 var(--display);padding:16px 0 16px 18px;white-space:nowrap}
.schedule{width:100%;border-collapse:collapse;margin:26px 0 0}
.schedule tr{border-top:1px solid var(--hair)}
.schedule tr:last-child{border-bottom:1px solid var(--hair)}
.schedule th{font:italic 400 18px/1.5 var(--display);color:var(--glaucous);text-align:left;vertical-align:top;padding:14px 24px 14px 0;width:7.5em;white-space:nowrap}
.schedule td{padding:14px 0;vertical-align:top;font-size:17px;line-height:1.6}
.deep .prices tr,.deep .schedule tr{border-color:var(--hair-deep)}
.deep .prices th,.deep .prices td{color:var(--paper)}
.deep .schedule th{color:var(--glaucous-pale)}

/* --- the drawing that explains -----------------------------------------------------------------------------------
   <figure class="drawing"> with the wide picture and the phone picture (art/l-six-months.svg and -phone.svg) and a
   <figcaption> saying in words what it shows: the words are the page's, never drawn into the picture. Light bands
   only. */
.drawing{margin:48px 0 0}
.drawing img{width:100%;height:auto}
.drawing .phone{display:none;max-width:280px;margin:0 auto}
.drawing figcaption{font:italic 400 19px/1.5 var(--display);color:var(--stone);max-width:640px;margin:18px auto 0;text-align:center;text-wrap:balance}

/* --- the chapters of a long page (the path pages): a quiet bar that stays under the header ------------------------ */
.chapters{position:sticky;top:var(--head-h);z-index:20;background:rgba(255,255,255,.96);border-bottom:1px solid var(--hair);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.chapters ul{list-style:none;margin:0 auto;padding:0 32px;max-width:1180px;display:flex;gap:4px 28px;overflow-x:auto;scrollbar-width:none}
.chapters ul::-webkit-scrollbar{display:none}
.chapters a{display:flex;align-items:center;min-height:48px;white-space:nowrap;font:500 15px/1 var(--body);color:var(--ink);text-decoration:none;border-bottom:2px solid transparent}
.chapters a:hover,.chapters a[aria-current]{color:var(--glaucous);border-bottom-color:var(--glaucous)}
/* On touch and below 1025 pixels one swiped row that fades at its right edge; on a computer every chapter shows, the
   bar wrapping onto a second row. His words of October 5, 2026, of the path pages' bar: "the sticky menu items at the
   top get cut off at "fiv" ... regardless of how wide I make the screen" (design/draft-a's sv-bar, carried at step 6). */
.chapters ul{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent)}
.chapters ul::after{content:"";flex:0 0 40px}
@media (min-width:1025px) and (hover:hover) and (pointer:fine){
  .chapters ul{flex-wrap:wrap;justify-content:center;gap:0 24px;overflow:visible;max-width:1400px;padding:6px 32px;
    -webkit-mask-image:none;mask-image:none}
  .chapters ul::after{display:none}
  .chapters a{min-height:34px;font-size:14.5px}
}

/* --- the footer: Ink, the retreat arm line, a rosette on its upper edge ---------------------------------------------
   The rosette is the footer's own (l-rose-decagon-point-ld.svg, light above, deep below), the same on every page;
   --foot-rose-x moves it where a page's last band leaves room. **Its lower half never touches the logo or a word**:
   the footer's top padding is deeper than the rosette's half, at every width. His words, October 15, 2026, at the
   redesign's step 6: "on the page not found in the footer you see that the rosette design overlaps the logo", then
   "check that it doesn't do that elewhere either"; measured on every page at seven widths it reached the logo or the
   footer's links on all of them, from 80 pixels of padding. */
.site-foot{position:relative;overflow-x:clip;background:var(--foot);color:var(--on-ink);padding:200px 0 36px;font-size:16px;--foot-rose-x:96%}
.site-foot::before{content:"";position:absolute;z-index:1;pointer-events:none;width:360px;height:360px;top:-180px;
  left:calc(var(--foot-rose-x) - 180px);background:url(/media/l-rose-decagon-point-ld.svg) center/100% 100% no-repeat}
.site-foot .wrap{position:relative;z-index:2}
.site-foot a{color:#fff;text-decoration:none}
.site-foot a:hover{text-decoration:underline}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:48px}
.foot-grid h2{font:italic 400 19px/1.3 var(--display);color:var(--glaucous-pale);margin:4px 0 16px}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin:0 0 6px;line-height:1.45}
.foot-grid a{display:inline-block;padding-block:3px}
.foot-brand img{width:210px;height:auto;margin-bottom:22px}
.foot-brand p{max-width:340px;color:var(--on-ink)}
.foot-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;border-top:1px solid var(--hair-d);margin-top:56px;padding-top:24px;font-size:14px;color:var(--on-ink)}

/* --- motion: quiet, and none under reduced motion ------------------------------------------------------------------
   A question's fold turns its mark, and a link within the page scrolls there smoothly; nothing else moves. The art
   is never faded in: a reveal tied to scrolling left the rosettes unseen in a whole-page photograph (step 4's first
   kit page), and a seam that may not show is no seam. Except the logo's flower (October 16, 2026, at his word,
   sitedef/bloom.py): it grows in the header on the first page of a visit and in the footer when reached, so a
   whole-page photograph shows the footer's cactus bare. */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* --- widths -------------------------------------------------------------------------------------------------------- */
@media (max-width:1100px){
  .open h1{font-size:68px}
}
@media (max-width:1024px){
  main section{--pb:88px}
  h1{font-size:54px} h2{font-size:36px}
  .statement{font-size:48px}
  .bigdate{font-size:46px}
  .split{gap:48px}
  .panel-row{grid-template-columns:1fr 1fr 230px}
  .panel-path{padding-right:28px;margin-right:28px}
}
@media (max-width:900px){
  .nav{display:none}
  .menu{display:block}
  .head-row{position:static}
  .site-head .wrap{position:relative}
  .split,.split.words-wide,.split.pic-wide{grid-template-columns:minmax(0,1fr);gap:32px}
  .field .wide-only{display:none}
  .open h1{font-size:60px}
  .open.panelled{flex-direction:column;min-height:0}
  .open.panelled .open-photo{position:relative;inset:auto;height:auto;aspect-ratio:16/9}
  .open-panel{width:100%}
  .open-panel .open-words{padding:48px var(--edge) 150px}
  .panel-field{display:none}
  .cross{--below:240px}
  .after-cross{padding-top:calc(var(--pb) + 240px + 56px)}
  .bleed-r img,.bleed-l img{border-radius:0}
  .foot-grid{grid-template-columns:1fr 1fr;gap:40px}
  .foot-brand{grid-column:1/-1}
  .grass.stand{--w:640px}
}
@media (max-width:600px){
  main section{--edge:20px;--pb:64px}
  body{font-size:17px}
  h1{font-size:40px} h2{font-size:30px} h3{font-size:22px}
  .open h1{font-size:44px}
  .open .lead{font-size:18px}
  .open .actions{flex-wrap:nowrap;gap:10px;margin-top:24px}
  .open .actions .btn{flex:1 1 0;padding:0 12px}
  .open-panel .open-words{padding:36px var(--edge) 110px}
  .open-panel .said{font-size:19px}
  .grass.at-foot{width:220%;left:-62%;bottom:-18.5cqw}
  .grass.stand{--w:420px;--x:4%}
  .statement{font-size:36px}
  .said{font-size:20px}
  .lead{font-size:18px}
  .wrap{padding-inline:20px}
  :root{--head-h:66px;--spill:114px}
  .logo img{width:124px}
  .pull p{font-size:22px}
  .faq summary{font-size:19px}
  .faq .answer{padding-right:0}
  .actions .btn{flex:1 1 100%}
  .bigdate{font-size:36px}
  .price{font-size:48px}
  .album{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .site-foot{padding-top:160px}
  .site-foot::before{width:280px;height:280px;top:-140px;left:calc(var(--foot-rose-x) - 140px)}
  .cross{--below:130px}
  .after-cross{padding-top:calc(var(--pb) + 130px + 48px)}
  .prices thead th{font-size:13.5px;padding-left:10px}
  .prices td{font-size:18px;padding-left:10px}
  .schedule th{width:5.2em;padding-right:14px}
  .schedule td{font-size:16px}
  .field .wide{display:none}
  .field .phone{display:block}
  .drawing .wide{display:none}
  .drawing .phone{display:block}
  .chapters ul{padding:0 20px;gap:4px 20px}
}
/* A phone held sideways: the opening is a short screen, so its title must stay in view (hamidjabbar.com's lesson,
   October 14, 2026: 33 pages opened on the photograph alone at 844 by 390). */
@media (max-height:520px) and (orientation:landscape){
  .open{min-height:390px}
  .open-words{padding-top:24px;padding-bottom:96px}
  .open h1{font-size:44px;margin-bottom:12px}
  .open .lead{font-size:17px}
  .open .actions{margin-top:16px}
  .open.panelled{flex-direction:row;min-height:390px}
  .open.panelled .open-photo{position:absolute;inset:0;height:100%;aspect-ratio:auto}
  .open-panel{width:min(60%,560px)}
  .open-panel .open-words{padding:24px 32px 64px var(--edge)}
}
@property --len{syntax:"<number>";inherits:false;initial-value:1}
@property --open{syntax:"<number>";inherits:false;initial-value:1}
@property --g{syntax:"<number>";inherits:true;initial-value:1}
.logo-grow{position:relative;display:inline-block;line-height:0;vertical-align:top}
.logo-grow img.logo-grow-base{display:block;margin:0}
.logo-grow img.logo-grow-flower{position:absolute;left:21.327%;top:17.308%;width:11.374%;height:auto;margin:0;transform-origin:9.27% 75.66%;transform:rotate(-36deg) scale(var(--len),var(--open)) rotate(36deg);pointer-events:none}
.logo-grow.logo-grow-ink img.logo-grow-flower{left:21.355%;top:17.778%;width:11.088%;transform-origin:9.39% 75.62%}
.logo-grow svg.logo-grow-bud{position:absolute;left:21.763%;top:19.872%;width:9.886%;height:auto;aspect-ratio:144/154;overflow:visible;pointer-events:none;opacity:0;color:rgb(76,118,106)}
.logo-grow.logo-grow-ink svg.logo-grow-bud{left:21.779%;top:19.889%;width:9.893%;color:rgb(145,179,166)}
.logo-grow-bud .logo-grow-g{transform-box:view-box;transform-origin:9px 122px;transform:scale(var(--g))}
.logo-grow-bud path{stroke-width:calc(11px / var(--g))}
.foot-brand .logo-grow{margin-bottom:22px}
.logo-grow.logo-grow-wait img.logo-grow-flower{opacity:0}
.logo-grow-now .site-head .logo-grow svg.logo-grow-bud,.logo-grow.logo-grow-go svg.logo-grow-bud{animation:logo-grow-bud-show 1.2s ease-out 2s both,logo-grow-bud-grow 6s cubic-bezier(.25,.6,.3,1) 2s both,logo-grow-bud-open 2.8s ease-in 9.2s forwards}
.logo-grow-now .site-head .logo-grow img.logo-grow-flower,.logo-grow.logo-grow-go img.logo-grow-flower{animation:logo-grow-show 2s ease-out 9.2s both,logo-grow-open 4.8s cubic-bezier(.2,.7,.3,1) 9.2s both}
@keyframes logo-grow-bud-show{from{opacity:0}to{opacity:1}}
@keyframes logo-grow-bud-grow{0%{--g:.1}85%{--g:1}100%{--g:1.03}}
@keyframes logo-grow-bud-open{from{--g:1.03;opacity:1}to{--g:1.35;opacity:0}}
@keyframes logo-grow-show{from{opacity:0}}
@keyframes logo-grow-open{from{--len:.55;--open:.5}}
@media (prefers-reduced-motion:reduce){
  .logo-grow img.logo-grow-flower{animation:none!important;opacity:1!important}
  .logo-grow svg.logo-grow-bud{display:none}
}