/* ============================================================
   MONIKA MARTISOVA · mockup v4
   The cave and the crack of light.
   The page opens in near darkness and light enters as you scroll.
   Gold appears only where light falls.
   ============================================================ */

/* --- the light ladder ------------------------------------------------
   One continuous descent from cave to clearing. Every section's
   gradient ends on the colour the next one begins with, so the whole
   page reads as a single body of light rather than stacked blocks.

   The cave holds until the water. All of the dark-to-light crossing
   happens across one photograph of sunrise, so no paragraph is ever
   set on a mid-tone it cannot be read against. */
:root{
  /* v4: Monika found the cave end too black. The early rungs lift and turn
     toward plum, so the darkest point is still a cave and still hers, but it
     is one unified background rather than a black hole with a photo in it. */
  --L0:#120A16;  --L1:#180C1C;  --L2:#1F0F24;  --L3:#24122A;
  --L4:#2B1533;  --L5:#241129;  --L6:#2A1531;  --L7:#2C1333;
  --L8:#341739;  --L9:#3C1B3E;  --L10:#441F41; --L11:#4C2343;
  --L12:#EADFD4; --L13:#F2ECE8; --L14:#F8F4F0;
  /* the same tones as components, for the eased photo fades below */
  --L1rgb:24,12,28; --L4rgb:43,21,51; --L5rgb:36,17,41; --L7rgb:44,19,51; --L11rgb:76,35,67; --L12rgb:234,223,212;

  /* her palette, tuned. plum deepened out of web-indigo,
     gold held back to the metallic end, blush demoted to light. */
  --plum:#4A1748;
  --plum-lift:#5D1B64;
  --gold:#CDAF86;
  --gold-hi:#D4AF37;
  --gold-ink:#7E6024;   /* gold for small text on linen. 5.17:1 */
  --gold-lg:#A5803D;    /* gold for display sizes on linen. 3.22:1, AA for large */
  --blush:#E8B4B8;
  --linen:#F8F4F0;
  --ink:#33262D;

  --measure:34rem;
  --pad:clamp(1.5rem,6vw,7rem);
  /* 432 harmonic timings */
  --t-slow:1.296s; --t-mid:.864s; --t-fast:.432s;
}

*,*::before,*::after{box-sizing:border-box}
/* an author `display` beats the UA sheet's [hidden] rule, so state it here */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{
  margin:0;background:var(--L0);color:#E4D8DF;
  font-family:'Jost',system-ui,sans-serif;font-weight:300;
  font-size:clamp(16px,.55vw + 14px,18px);line-height:1.78;
  letter-spacing:.005em;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:1px solid var(--gold-hi);outline-offset:3px;border-radius:1px}
.light :focus-visible{outline-color:var(--gold-ink)}

/* --- zones ---------------------------------------------------------- */
.dark{ --shadow:0 34px 90px -26px rgba(0,0,0,.8), 0 6px 22px -8px rgba(0,0,0,.55); --fg:#F2E8EF; --fg-body:rgba(238,227,236,.87); --fg-dim:rgba(238,227,236,.64); --rule:rgba(205,175,134,.22); }
.light{ --shadow:0 30px 68px -24px rgba(74,23,72,.34), 0 5px 16px -7px rgba(74,23,72,.16); --fg:var(--plum); --fg-body:rgba(51,38,45,.88); --fg-dim:rgba(51,38,45,.74); --rule:rgba(74,23,72,.16); --gold:var(--gold-ink); --gold-hi:var(--gold-ink); }
.dark,.light{color:var(--fg-body)}
/* Chrome dithers gradients, which leaves a 1px seam wherever two
   blocks meet on the same colour. One pixel of overlap removes it. */
.dark,.light{margin-bottom:-1px}

section,.band,.dawn,header{scroll-margin-top:5.5rem}
section{position:relative;padding:clamp(4.5rem,11vh,8.5rem) var(--pad)}
.wrap{max-width:74rem;margin:0 auto}
.narrow{max-width:var(--measure)}
.centred{margin-left:auto;margin-right:auto;text-align:center}

/* --- type ----------------------------------------------------------- */
.eyebrow{
  font-family:'Jost';font-weight:400;font-size:.62rem;
  letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);margin:0 0 2.2rem;
}
.eyebrow::before{
  content:"";display:inline-block;width:1.6rem;height:1px;
  background:var(--gold);vertical-align:.28em;margin-right:.9rem;opacity:.7;
}
h1,h2,h3,.display,blockquote{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;
  color:var(--fg);letter-spacing:-.012em;margin:0;
}
h1{font-size:clamp(2.9rem,7.4vw,5.6rem);line-height:1.03}
/* no line ends on a single word it did not mean to. */
h2,h3,blockquote{text-wrap:balance}
p,.lead{text-wrap:pretty}
h2{font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.11;margin-bottom:1.9rem}
h3{font-size:clamp(1.3rem,2vw,1.65rem);line-height:1.25}
em,.it{font-style:italic}
h1 em,h2 em{color:var(--gold);font-weight:300}
p{margin:0 0 1.35em;max-width:var(--measure)}
.lead{font-size:1.16em;line-height:1.68;color:var(--fg)}
.small{font-size:.82rem;line-height:1.7;color:var(--fg-dim);letter-spacing:.01em}
.gold{color:var(--gold)}

/* a line that lands. set large, never boxed. */
blockquote{
  font-size:clamp(1.6rem,3.4vw,2.7rem);line-height:1.28;
  font-style:italic;margin:0;max-width:44rem;
}

/* --- reveals: optical arrival, nothing hard-pops -------------------- */
[data-reveal]{
  opacity:0;transform:translateY(18px);filter:blur(7px);
  transition:opacity var(--t-slow) cubic-bezier(.22,.68,.16,1),
             transform var(--t-slow) cubic-bezier(.22,.68,.16,1),
             filter var(--t-slow) cubic-bezier(.22,.68,.16,1);
  transition-delay:calc(var(--i,0) * .108s);
}
[data-reveal].in{opacity:1;transform:none;filter:blur(0)}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;filter:none;transition:none}
  html{scroll-behavior:auto}
  .hero .adjust{animation:none;opacity:0}
  .hero .beam,.hero .beam--b{animation:none}
  .hero{--near:0 !important}
  .scroll-cue,.scroll-cue i{animation:none;opacity:1}
}

/* --- photographs ----------------------------------------------------
   Her images are woodland green and gold. Her palette is plum and gold.
   Rather than fill with plum, the shadows are graded into it, so the
   plum reads as the darkness between the trees. */
/* Every variant sets four numbers and nothing else. The base values are for
   a FULL-BLEED band with headlines lying on top of it, which is why they are
   so heavy. A framed photograph you are meant to look at must set its own,
   and forgetting to is how the EAV and spray shots ended up wearing the
   hero's grade and disappearing. */
.ph{position:relative;overflow:hidden;isolation:isolate;
  --veilA:.62; --veilB:.90; --tint:.26; --sat:.66; --bright:.74}
.ph img{width:100%;height:100%;object-fit:cover;
  filter:saturate(var(--sat)) contrast(1.06) brightness(var(--bright));}
.ph::before,.ph::after{content:"";position:absolute;inset:0;pointer-events:none}
/* The grade layers must sit UNDER the fades. A blend mode painted over the
   fade shifts its tone by a hair, and that hair is exactly the visible line
   where a band meets the section above it. */
.ph::before{z-index:1} .ph::after{z-index:2}
.ph .beam{z-index:3} .ph .rise,.ph .sink{z-index:4}
.ph::before{background:linear-gradient(175deg,rgba(38,17,44,var(--veilA)),rgba(20,9,22,var(--veilB)));mix-blend-mode:multiply}
.ph::after{background:var(--plum-lift);mix-blend-mode:color;opacity:var(--tint)}
/* the crack of light */
.ph .beam{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(58% 46% at 62% 4%,rgba(212,175,55,.34),rgba(212,175,55,.06) 46%,transparent 72%)}
.ph .sink,.band>.sink,.dawn>.sink{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(var(--sinkRGB,var(--L1rgb)),0)    38%,
    rgba(var(--sinkRGB,var(--L1rgb)),.04)  48%,
    rgba(var(--sinkRGB,var(--L1rgb)),.13)  57%,
    rgba(var(--sinkRGB,var(--L1rgb)),.28)  65%,
    rgba(var(--sinkRGB,var(--L1rgb)),.48)  73%,
    rgba(var(--sinkRGB,var(--L1rgb)),.68)  80%,
    rgba(var(--sinkRGB,var(--L1rgb)),.85)  87%,
    rgba(var(--sinkRGB,var(--L1rgb)),.96)  94%,
    rgb(var(--sinkRGB,var(--L1rgb)))      100%)}
.ph--soft{--veilA:.08; --veilB:.20; --tint:.14; --sat:.82; --bright:.98}

/* her own photograph. graded far enough to live in the palette,
   not so far that her skin goes cold. */
.ph--her{--veilA:.03; --veilB:.12; --tint:.22; --sat:.72; --bright:1}

/* the evidence photographs. still pushed toward the plum, because they read
   most like stock, but you have to be able to see the hands. */
.ph--fade{--veilA:.03; --veilB:.10; --tint:.18; --sat:.68; --bright:1}

/* the dawn. the one place the page lets the colour back in. */
.ph--dawn{--tint:.07; --sat:.92; --bright:1}
.ph--dawn img{filter:saturate(var(--sat)) contrast(1.01) brightness(var(--bright))}
.ph--dawn::before{background:linear-gradient(180deg,rgba(30,14,34,.62) 0%,rgba(30,14,34,.30) 30%,rgba(30,14,34,.04) 62%);mix-blend-mode:multiply}
.ph .rise,.band>.rise,.dawn>.rise{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgb(var(--riseRGB,var(--L11rgb)))       0%,
    rgb(var(--riseRGB,var(--L11rgb)))       7%,
    rgba(var(--riseRGB,var(--L11rgb)),.96) 15%,
    rgba(var(--riseRGB,var(--L11rgb)),.88) 23%,
    rgba(var(--riseRGB,var(--L11rgb)),.75) 31%,
    rgba(var(--riseRGB,var(--L11rgb)),.58) 39%,
    rgba(var(--riseRGB,var(--L11rgb)),.41) 47%,
    rgba(var(--riseRGB,var(--L11rgb)),.25) 56%,
    rgba(var(--riseRGB,var(--L11rgb)),.13) 65%,
    rgba(var(--riseRGB,var(--L11rgb)),.05) 75%,
    rgba(var(--riseRGB,var(--L11rgb)),0)   87%)}

/* The rise and sink of a photo band live OUTSIDE the clipped frame.
   A parallaxed photograph and a fade clipped inside the same box are
   rasterised on different pixel grids, and on a fractional layout
   boundary the top row of the photograph shows through the fade as a
   hairline across the whole band. As siblings with a pixel of
   overshoot, nothing clips them and the seam cannot exist. */
.band>.rise,.band>.sink,.dawn>.rise,.dawn>.sink{z-index:1;top:-1px;bottom:-1px}

/* a white-background reference photo, dimmed so it does not glare */
.ph--cite{--veilA:.03; --veilB:.08; --tint:.14; --sat:.72; --bright:1}

/* on linen, nothing is darkened. */
.ph--light{--veilA:.04; --veilB:.10; --tint:.05; --sat:.92; --bright:1.02}

/* framed photographs sit slightly above the page */
.ph--her,.ph--light,.ph--cite,.ph--fade{box-shadow:var(--shadow)}

/* the arch. a doorway, not a card. */
.arch{border-radius:50% 50% 3px 3px / 26% 26% 0 0}

/* the same sun, on paper. the only two places linen gets light:
   where you arrive out of the dawn, and where the page closes. */
/* A light anchored on a section's own edge stops dead at the boundary, and a
   wash that stops dead IS a line. Both ends fade to nothing, so the light can
   bloom inside the section and never draw an edge of its own. */
.fall{position:absolute;inset:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 20%,#000 92%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 20%,#000 92%,transparent);
  background:radial-gradient(110% 58% at 64% 6%,rgba(212,175,55,.11),rgba(212,175,55,.03) 48%,transparent 76%)}

/* --- the dawn band -------------------------------------------------- */
/* no overflow clip here: the ph clips its own photograph, and the rise
   and sink must overshoot this box by a pixel to kill the seam. */
.dawn{position:relative;height:min(92svh,820px)}
.dawn .ph{position:absolute;inset:0}
.dawn .ph img{height:100%}


/* --- hero ----------------------------------------------------------- */
.hero{min-height:100svh;display:grid;align-items:end;padding:0;overflow:hidden}
.hero .ph{position:absolute;inset:0;z-index:0}
.hero .ph img{height:100%}
.hero .ph img{filter:saturate(.6) contrast(1.08) brightness(.6)}
.hero-body{position:relative;z-index:2;padding:0 var(--pad) clamp(6rem,15vh,10rem);width:100%}
.hero h1{margin-bottom:2.4rem;max-width:22em;text-shadow:0 2px 40px rgba(14,7,16,.55)}
.hero .lead{max-width:24rem;color:rgba(242,232,239,.86);text-shadow:0 1px 24px rgba(14,7,16,.6)}
.hero .eyebrow{margin-bottom:2.6rem}
/* Arriving. Three things at once, and none of them announce themselves.

   1. Your eyes adjust. You walk into a dark room and see almost nothing,
      then the pupils open and detail arrives. It happens once, never
      loops, and resolves as her last line lands.
   2. She speaks. Three sentences with real pauses, and a held beat
      before the first one, because every other page fires at once.
   3. The canopy never stops. Real sunlight through leaves pulses,
      because the leaves move. Two layers on different long periods, so
      the composite does not visibly repeat. Nobody should be able to
      point at this one. */
.hero .adjust{position:absolute;inset:0;z-index:5;pointer-events:none;
  background:radial-gradient(130% 105% at 62% 6%,#151A1B,#070A0A 72%);
  animation:eyes 3.456s cubic-bezier(.25,.55,.2,1) both}
@keyframes eyes{from{opacity:.68}to{opacity:0}}

.hero .beam{animation:canopy 12.96s ease-in-out infinite;will-change:opacity,transform}
.hero .beam--b{background:radial-gradient(46% 40% at 71% 2%,rgba(212,175,55,.26),rgba(212,175,55,.05) 48%,transparent 74%);
  animation:canopy2 21.6s ease-in-out infinite;will-change:opacity,transform}
@keyframes canopy{
  0%,100%{opacity:.84;transform:translate3d(0,0,0) scale(1)}
  50%     {opacity:1;  transform:translate3d(-1.1%,.5%,0) scale(1.05)}
}
@keyframes canopy2{
  0%,100%{opacity:.46;transform:translate3d(0,0,0) scale(1.03)}
  50%     {opacity:.8; transform:translate3d(1.5%,-.6%,0) scale(1)}
}

/* Leaning toward the light. Same origin, same angle as the beams above,
   never moved: you cannot drag the sun. Moving nearer only lets a little
   more of it through, and it can only ever ADD, so with no pointer at all
   the frame sits exactly where it was tuned. Its own layer, because the
   canopy keyframes own the beams' opacity and an inline write would
   freeze them. */
.hero .lift{position:absolute;inset:0;z-index:3;pointer-events:none;
  mix-blend-mode:screen;will-change:opacity;
  opacity:calc(var(--near,0) * .26);
  background:radial-gradient(52% 44% at 64% 3%,rgba(226,192,124,.5),rgba(212,175,55,.1) 44%,transparent 72%)}
/* The light does not only add gold, it lifts the veil. Nearer the sun, the
   plum grade backs off and a little of the real wood comes through: the
   green, her dress, the actual colour of the day she was there. Which is
   the whole page in one gesture, since balance was never lost, only
   obscured. z-index 3 so the grade layers below cannot mute it. */
.hero .ph::before{opacity:calc(1 - var(--near,0) * .52)}
.hero .ph::after{opacity:calc(.26 - var(--near,0) * .21)}

.hero h1 .line{display:block}
/* the invitation to scroll waits until she has finished speaking */
.scroll-cue{animation:arrive var(--t-slow) ease both 3.9s}
@keyframes arrive{from{opacity:0}to{opacity:1}}
.scroll-cue{position:absolute;left:50%;bottom:1.6rem;z-index:3;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.7rem}
.scroll-cue span{font-size:.55rem;letter-spacing:.34em;text-transform:uppercase;color:rgba(197,168,128,.6)}
.scroll-cue i{display:block;width:1px;height:3.4rem;background:linear-gradient(var(--gold),transparent);opacity:.55;
  animation:breathe 4.32s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scaleY(.55);opacity:.3}50%{transform:scaleY(1);opacity:.6}}

/* --- full-bleed photo bands ----------------------------------------- */
.band{position:relative;padding:0;min-height:58svh;display:grid;align-items:center}
.band .ph{position:absolute;inset:0;z-index:0}
.band .ph img{height:100%}
/* Full-bleed photographs drift against the scroll. Each sits taller than
   its own frame so it can move without ever revealing an edge. The hero
   does this by scaling instead, since it is already pinned to the viewport. */
.ph.px img{position:absolute;top:-15%;left:0;height:130%;will-change:transform}
.band-body{position:relative;z-index:2;padding:clamp(5rem,12vh,9rem) var(--pad);width:100%}

/* --- listed rows. hairlines, never cards. --------------------------- */
.rows{margin:3.1rem 0 0}
.row{
  padding:0;margin:0 0 2.7rem;
  display:grid;grid-template-columns:3.2rem 1fr;gap:.3rem 1.6rem;align-items:baseline;
}
.row .n{font-size:.68rem;letter-spacing:.2em;color:var(--gold);font-weight:400;padding-top:.55rem}
.row h3{margin-bottom:.4rem}
.row h3 .it{color:var(--fg)}
.row p{margin:0;font-size:.94rem;color:var(--fg-dim);max-width:40rem;line-height:1.72}
.row:last-child{margin-bottom:0}
.rows--plain .row{grid-template-columns:1fr;margin-bottom:1.5rem}
.rows--plain .row p{grid-column:1}
.row h3,.row p{grid-column:2}
/* wide screens: the explanation sits beside the name, not beneath it */
@media (min-width:1000px){
  .rows--split .row{grid-template-columns:3.2rem minmax(0,17rem) minmax(0,1fr);align-items:start}
  .rows--split .row h3{grid-column:2;grid-row:1;margin-bottom:0;padding-top:.1rem}
  .rows--split .row p{grid-column:3;grid-row:1;padding-top:.5rem}
}

/* --- two-column prose rhythm ---------------------------------------- */
.cols{display:grid;gap:clamp(2.4rem,5vw,4rem) clamp(2rem,5vw,5rem);grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));margin-top:3rem}
.cols>div{padding-top:0}
.cols h3{font-size:1.24rem;margin-bottom:.6rem}
.cols p{font-size:.94rem;color:var(--fg-dim);margin:0;max-width:none;line-height:1.72}

/* --- meridian points ------------------------------------------------ */
.meridian{margin:3.4rem 0 1rem;position:relative}
.meridian .line{height:1px;background:var(--rule);position:absolute;top:7px;left:0;right:0}
.meridian ol{list-style:none;display:flex;justify-content:space-between;margin:0;padding:0;position:relative;gap:.4rem}
.meridian li{flex:1;text-align:center;font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg-dim);opacity:0;transition:opacity var(--t-slow);transition-delay:calc(var(--i)*.216s)}
.meridian.in li{opacity:1}
.meridian .dot{display:block;width:15px;height:15px;margin:0 auto .9rem;border-radius:50%;position:relative}
.meridian .dot::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--gold)}
.meridian .dot::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--gold);
  opacity:0;transform:scale(.4)}
.meridian.in .dot::after{animation:ping 2.592s ease-out infinite;animation-delay:calc(var(--i)*.216s)}
@keyframes ping{0%{opacity:.7;transform:scale(.4)}70%{opacity:0;transform:scale(1.9)}100%{opacity:0}}

/* --- voices --------------------------------------------------------- */
.voice{padding:0;margin:0 0 3.2rem;max-width:42rem}
.voice p{font-size:.98rem;color:var(--fg-body);line-height:1.78}
.voice cite{font-style:normal;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.voice--loud{border:0;padding:0;max-width:46rem;margin:0 0 3.4rem}
.voice--loud p{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;
  font-size:clamp(1.4rem,2.9vw,2.15rem);line-height:1.34;color:var(--fg);margin-bottom:.7rem}

/* --- steps ---------------------------------------------------------- */
.step{padding:0;margin-bottom:3.9rem}
.step .k{font-family:'Cormorant Garamond',serif;font-size:2.4rem;line-height:1;color:var(--gold-lg);
  font-style:italic;display:block;margin-bottom:1rem}
.step h3{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:.9rem}
.step .sub{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.24rem;color:var(--gold);margin-bottom:1.2rem}

/* --- threshold line ------------------------------------------------- */
.threshold{position:relative;text-align:center;padding:clamp(4.5rem,12vh,8rem) var(--pad)}
.threshold>div{position:relative;z-index:1}
.threshold p{font-size:clamp(.72rem,1.5vw,.95rem);letter-spacing:.3em;text-transform:uppercase;
  color:var(--plum);margin:0 auto;max-width:38rem;line-height:2.3;font-weight:300}

/* --- offerings ------------------------------------------------------ */
.offer{padding:0;margin-bottom:3.1rem;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:1rem clamp(2rem,4vw,4rem);align-items:start}
.offer:last-of-type{margin-bottom:0}
.offer .meta{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-dim);margin:0 0 1rem}
.offer h3{margin-bottom:0}
@media (max-width:880px){.offer h3{margin-bottom:.9rem}}
.offer p{font-size:.94rem;color:var(--fg-dim);margin:0;max-width:32rem}
.offer .price{font-family:'Cormorant Garamond',serif;font-size:clamp(2.2rem,4vw,3rem);
  line-height:1;color:var(--gold-lg);white-space:nowrap;text-align:right}
@media (max-width:880px){.offer{grid-template-columns:1fr}.offer .price{text-align:left}}

/* --- faq ------------------------------------------------------------ */
details{margin-bottom:.3rem}
details summary{
  cursor:pointer;list-style:none;padding:1.5rem 2.5rem 1.5rem 0;position:relative;
  font-family:'Cormorant Garamond',serif;font-size:clamp(1.15rem,2vw,1.42rem);
  color:var(--fg);transition:color var(--t-fast);
}
details summary::-webkit-details-marker{display:none}
details summary:hover{color:var(--gold-hi)}
details summary::after{
  content:"";position:absolute;right:.4rem;top:2.1rem;width:9px;height:9px;
  border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);
  transform:rotate(45deg);transition:transform var(--t-mid)
}
details[open] summary::after{transform:rotate(-135deg)}
details .body{padding:0 0 1.8rem;max-width:44rem}
details .body p{font-size:.94rem;color:var(--fg-dim)}
details .body p:last-child{margin-bottom:0}

/* --- form ----------------------------------------------------------- */
form{margin-top:3rem;max-width:44rem}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.8rem 2.4rem}
.f{display:flex;flex-direction:column-reverse;gap:.5rem}
.f--wide{grid-column:1/-1}
.f label{font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--fg-dim);transition:color var(--t-fast)}
.f input,.f select,.f textarea{
  font-family:inherit;font-size:1rem;font-weight:300;color:var(--ink);
  background:none;border:0;border-bottom:1px solid var(--rule);
  padding:.5rem 0;border-radius:0;transition:border-color var(--t-mid);
}
.f textarea{resize:vertical;min-height:6rem;line-height:1.7}
.f input:focus,.f select:focus,.f textarea:focus{outline:0;border-bottom-color:var(--gold-hi)}
.f:focus-within label{color:var(--plum)}
fieldset{border:0;padding:0;margin:0;grid-column:1/-1}
legend{font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--fg-dim);margin-bottom:1rem;padding:0}
.pills{display:flex;flex-wrap:wrap;gap:.7rem}
.pills label{
  font-size:.8rem;letter-spacing:.06em;padding:.6rem 1.4rem;border:1px solid var(--rule);
  border-radius:999px;cursor:pointer;transition:all var(--t-fast);color:var(--fg-body)
}
.pills input{position:absolute;opacity:0;pointer-events:none}
.pills label:hover{border-color:rgba(232,180,184,.7);background:rgba(232,180,184,.1)}
.pills input:checked + label,.pills label:has(input:checked){
  border-color:var(--gold-hi);color:var(--plum);background:rgba(212,175,55,.1)
}
.send{
  margin-top:2.8rem;font-family:'Jost';font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--linen);background:var(--plum);border:0;padding:1.2rem 2.8rem;cursor:pointer;
  transition:background var(--t-mid),letter-spacing var(--t-mid)
}
.send:hover{background:var(--plum-lift);letter-spacing:.34em}

/* --- video slot ----------------------------------------------------- */
.vslot{position:relative;max-width:23rem}
.vslot .ph{aspect-ratio:4/5}
.vslot .play{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:.9rem;
  z-index:3;padding:1.6rem;cursor:pointer;
  background:linear-gradient(180deg,transparent,rgba(30,14,34,.62))}
.vslot .play i{flex:0 0 auto;width:48px;height:48px;border:1px solid rgba(248,244,240,.55);border-radius:50%;
  display:grid;place-items:center;backdrop-filter:blur(6px);background:rgba(30,14,34,.28);
  transition:border-color var(--t-mid),background var(--t-mid)}
.vslot .play i::after{content:"";width:0;height:0;border-left:10px solid var(--linen);
  border-top:6.5px solid transparent;border-bottom:6.5px solid transparent;margin-left:3px}
.vslot .play:hover i{border-color:var(--gold-hi);background:rgba(30,14,34,.44)}
.vslot .play span{font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(248,244,240,.9);
  text-shadow:0 1px 10px rgba(30,14,34,.7)}
.vslot .cap{font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-ink);margin-top:1rem}

/* ============================================================
   THE TABLE · where she is sitting when you write to her
   Her note: no borders, no boxes, just the image, off to the left,
   bleeding, softer edges. Like sitting across a wooden table, warm
   light, the past behind her dreamy and distant.
   The photograph she chose already has the warm room and the bokeh.
   So the page does not add an effect, it removes the frame: the
   picture is cropped tall, bled off the left edge of the screen,
   dissolved on its three visible sides, and held sharp only where
   she is. She stays while you write, because a person across a
   table does not leave when you look down at the page.
   ============================================================ */
.meet{padding-inline:0}
.meet-grid{display:grid;gap:clamp(2.2rem,5vw,5rem);align-items:start;
  grid-template-columns:minmax(0,clamp(17rem,36vw,30rem)) minmax(0,1fr);
  padding-right:var(--pad)}
.meet-body{max-width:46rem}
.meet-body form{margin-top:2.6rem}
@media (min-width:901px){
  .meet-pic{position:sticky;top:5.5rem}
  /* only the photograph bleeds off the edge. what you read and press keeps
     the page's own margin, or the lantern sits half off the screen. */
  .meet-pic .watch,.meet-pic .cap{padding-left:var(--pad)}
}
@media (max-width:900px){
  .meet{padding-inline:var(--pad)}
  .meet-grid{grid-template-columns:1fr}
  .meet-pic{max-width:26rem;margin-inline:auto}
}
/* two prints of one photograph: the lower one soft, the upper one sharp
   only where she is, so the room behind her stays a memory of a room */
.her{position:relative;aspect-ratio:1/1;overflow:hidden;isolation:isolate;
  -webkit-mask-image:linear-gradient(90deg,#000 44%,transparent 99%),
                     linear-gradient(180deg,transparent 0,#000 15%,#000 82%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,#000 44%,transparent 99%),
             linear-gradient(180deg,transparent 0,#000 15%,#000 82%,transparent 100%);
  mask-composite:intersect}
.her img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 50%;display:block}
.her .soft{filter:blur(13px) saturate(.92) brightness(1.04);transform:scale(1.12)}
.her .sharp{-webkit-mask-image:radial-gradient(70% 64% at 46% 44%,#000 44%,transparent 88%);
  mask-image:radial-gradient(70% 64% at 46% 44%,#000 44%,transparent 88%)}
/* the candle that is already in her photograph, agreeing with the page */
.her .warm{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(58% 46% at 76% 24%,rgba(212,175,55,.07),transparent 68%)}
@media (max-width:900px){
  .her{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),
                          linear-gradient(180deg,transparent 0,#000 13%,#000 84%,transparent 100%);
       mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),
                  linear-gradient(180deg,transparent 0,#000 13%,#000 84%,transparent 100%)}
  .her img{object-position:50% 50%}
  /* on a phone there is no room to be dreamy about it: she comes forward */
  .meet-pic{max-width:none}
  .her .soft{filter:blur(9px) saturate(.92) brightness(1.03);transform:scale(1.06)}
  .her .sharp{-webkit-mask-image:radial-gradient(86% 76% at 50% 46%,#000 58%,transparent 94%);
    mask-image:radial-gradient(86% 76% at 50% 46%,#000 58%,transparent 94%)}
}
/* Her voice. The page argues that the work is listening, so hearing her is
   the medium the whole thing was asking for, not a substitute for video.
   The line fills as she speaks: it is not separating anything, it IS the
   thing, which is the only kind of line this page allows. */
.hear{display:flex;align-items:center;gap:.95rem;margin-top:1.6rem;max-width:23rem}
.hear .watch{margin-top:0;flex:0 0 auto}
.hear-track{flex:1 1 auto;height:22px;display:flex;align-items:center;cursor:pointer;
  background:none;border:0;padding:0}
.hear-line{width:100%;height:1px;background:rgba(126,96,36,.28);position:relative}
.hear-line span{position:absolute;left:0;top:0;bottom:0;width:0;
  background:linear-gradient(90deg,rgba(212,175,55,.55),var(--gold-ink));
  box-shadow:0 0 8px rgba(212,175,55,.35)}
.hear-time{flex:0 0 auto;font-family:'Jost';font-size:.58rem;letter-spacing:.18em;
  color:rgba(51,38,45,.5);font-variant-numeric:tabular-nums}
/* pressed, the triangle becomes two bars, so the control says what it will do */
.watch.on i::after{width:9px;height:11px;margin-left:0;border:0;
  border-left:3px solid var(--gold-ink);border-right:3px solid var(--gold-ink)}

/* her video, when it comes. a lantern under the photograph, never on it. */
.watch{display:inline-flex;align-items:center;gap:.95rem;margin-top:1.6rem;
  background:none;border:0;padding:0;cursor:pointer;font-family:inherit}
.watch i{flex:0 0 auto;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(126,96,36,.42);
  background:radial-gradient(130% 170% at 50% 130%,rgba(212,175,55,.22),rgba(248,244,240,0) 64%);
  transition:border-color var(--t-mid),background var(--t-mid)}
.watch i::after{content:"";width:0;height:0;margin-left:3px;
  border-left:10px solid var(--gold-ink);border-top:6.5px solid transparent;border-bottom:6.5px solid transparent}
.watch span{font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-ink);text-align:left}
.watch:hover i{border-color:var(--gold-ink);
  background:radial-gradient(130% 170% at 50% 130%,rgba(212,175,55,.36),rgba(248,244,240,0) 64%)}
.meet .cap{margin:.85rem 0 0;font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(51,38,45,.5)}

/* The page has just told her what it costs. Leaving her to scroll on alone
   at that moment is the page failing to finish its own sentence. Her own
   lantern again, quieter than the one in the bar, because this one sits in
   stillness rather than over a moving page. */
.begin-here{display:inline-flex;align-items:center;gap:.8rem;margin-top:2.6rem;
  padding:.72rem 1.5rem;border:1px solid rgba(126,96,36,.45);border-radius:999px;
  text-decoration:none;white-space:nowrap;
  font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-ink);
  background:radial-gradient(130% 200% at 50% 130%,rgba(212,175,55,.16),rgba(248,244,240,0) 64%);
  animation:lantern 4.32s ease-in-out infinite;
  transition:color var(--t-mid),border-color var(--t-mid),background var(--t-mid)}
.begin-here i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.75;
  transition:transform var(--t-fast),opacity var(--t-fast)}
.begin-here:hover{color:var(--plum);border-color:var(--gold-ink);
  background:radial-gradient(130% 200% at 50% 130%,rgba(212,175,55,.3),rgba(248,244,240,0) 64%)}
.begin-here:hover i{transform:scale(1.5);opacity:1}
@media (prefers-reduced-motion:reduce){.begin-here{animation:none}}

/* --- nav ------------------------------------------------------------ */
/* No rule under it. A hairline was the one piece of website chrome on a
   page where nothing else has an edge. The bar is masked instead, so the
   tint and the blur both feather out and the nav has no bottom at all.
   The extra bottom padding keeps the type inside the solid part. */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;
  padding:1.05rem calc(var(--pad) + 3.5rem) 2.7rem var(--pad);   /* right: room for the tone */
  background:linear-gradient(180deg,rgba(14,7,16,.78),rgba(14,7,16,.52) 54%,rgba(14,7,16,0));
  backdrop-filter:blur(13px) saturate(140%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 64%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 64%,transparent 100%);
  transform:translateY(-102%);
  transition:transform var(--t-slow) cubic-bezier(.22,.68,.16,1),background var(--t-slow)
}
.nav.show{transform:none}
.nav.on-light{background:linear-gradient(180deg,rgba(248,244,240,.88),rgba(248,244,240,.6) 54%,rgba(248,244,240,0))}
.nav .name{font-family:'Cormorant Garamond',serif;font-size:1.05rem;letter-spacing:.05em;color:#EFE4EC;
  transition:color var(--t-slow)}
.nav.on-light .name{color:var(--plum)}
.nav a{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:#E2C77C;text-decoration:none;
  padding:.66rem 1.35rem;border:1px solid rgba(212,175,55,.5);border-radius:999px;white-space:nowrap;
  background:radial-gradient(130% 200% at 50% 130%,rgba(212,175,55,.2),rgba(14,7,16,0) 62%);
  animation:lantern 4.32s ease-in-out infinite;
  transition:color var(--t-mid),border-color var(--t-mid),background var(--t-mid)}
.nav a:hover{color:#F3E3B8;border-color:var(--gold-hi)}
.nav.on-light a{color:var(--gold-ink);border-color:rgba(126,96,36,.5);
  background:radial-gradient(130% 200% at 50% 130%,rgba(212,175,55,.22),rgba(248,244,240,0) 64%)}
.nav.on-light a:hover{color:var(--plum);border-color:var(--gold-ink)}
@media (prefers-reduced-motion:reduce){.nav a{animation:none}}

/* --- footer --------------------------------------------------------- */
.foot{position:relative;text-align:center;padding:clamp(5rem,14vh,9rem) var(--pad) 3.5rem}
.foot .rule{width:2.4rem;height:1px;background:var(--gold-lg);margin:0 auto 3rem;opacity:.8}
.foot p{margin-inline:auto}
.foot blockquote{margin:0 auto 3.6rem;color:var(--plum)}
.foot .who{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--fg-dim);line-height:2.4;max-width:none}
.foot .disc{margin-top:3rem;font-size:.74rem;color:rgba(51,38,45,.72);max-width:38rem;line-height:1.72}
/* The hand that built it, signing quietly at the very bottom, in her serif
   and at her scale. Gold falls only on frank7.dev, because on this footer
   gold is what a link looks like and that is the only door. Never louder
   than her disclaimer above it. */
.foot .credit{margin-top:3.2rem;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:.98rem;line-height:1.75;color:rgba(51,38,45,.6)}
.foot .credit a{color:var(--gold-ink);text-decoration:none;transition:color var(--t-fast)}
.foot .credit a:hover{color:var(--plum)}

/* ============================================================
   THE SIX WEEKS · the private page
   Not a portal and not a dashboard. A room she hands you the key
   to. The public page is a journey out of the dark; this one holds
   still in the light, because you are already inside the work.
   ============================================================ */
/* the door. no signup, no reset link, one word she said out loud. */
.gate{min-height:100svh;display:grid;place-items:center;padding:var(--pad);
  background:radial-gradient(120% 90% at 50% 12%,#2A0E2E,var(--L0) 70%)}
.gate-inner{position:relative;z-index:1;max-width:26rem;width:100%;text-align:center}
.gate .mark{font-size:.58rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin:0 0 3.4rem}
.gate h1{font-size:clamp(1.9rem,4.4vw,2.7rem);line-height:1.16;margin-bottom:1.4rem}
.gate .said{color:var(--fg-dim);font-size:.95rem;margin:0 auto 3rem;max-width:20rem}
.gate form{margin:0}
.gate .field{position:relative;margin-bottom:2rem}
.gate label{display:block;font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--fg-dim);margin-bottom:1rem}
.gate input{width:100%;text-align:center;font-family:'Cormorant Garamond',serif;font-size:1.5rem;
  font-weight:300;letter-spacing:.16em;color:var(--fg);background:none;border:0;
  border-bottom:1px solid var(--rule);padding:.6rem 0;border-radius:0;transition:border-color var(--t-mid)}
.gate input:focus{outline:0;border-bottom-color:var(--gold-hi)}
.gate .enter{font-family:'Jost';font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--L0);background:var(--gold);border:0;padding:1.05rem 2.6rem;cursor:pointer;
  transition:background var(--t-mid),letter-spacing var(--t-mid)}
.gate .enter:hover{background:var(--gold-hi);letter-spacing:.34em}
.gate .lost{margin:3.4rem auto 0;font-size:.74rem;line-height:1.7;color:rgba(238,227,236,.42);max-width:21rem}
.gate .err{min-height:1.4rem;font-size:.76rem;color:var(--blush);opacity:0;transition:opacity var(--t-fast)}
.gate .err.on{opacity:.9}

/* the room */
.room{background:var(--L14)}
.roomhead{padding:1.5rem var(--pad) .4rem;display:flex;justify-content:space-between;
  align-items:center;gap:1rem}
.roomhead span{font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.roomhead .who{font-family:'Cormorant Garamond',serif;font-size:1.02rem;letter-spacing:.05em;
  color:var(--plum);text-transform:none}
.room section{padding:clamp(3rem,7vh,5rem) var(--pad)}
.room .wrap{max-width:44rem}
.room h1{font-size:clamp(2.4rem,5.4vw,3.6rem);line-height:1.05;margin-bottom:1.2rem}
.room h2{font-size:clamp(1.1rem,2vw,1.3rem);margin-bottom:1.6rem}
.room .where{font-size:1.1rem;color:var(--fg-body);max-width:30rem}
.room .where b{font-weight:400;color:var(--plum)}

/* six dated marks. a calendar of the weeks, never a completion meter. */
.weeks{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem;margin:3.4rem 0 0;
  padding-top:0}
.weeks li{list-style:none;text-align:center}
.weeks .dot{display:block;width:13px;height:13px;margin:0 auto .9rem;border-radius:50%;
  border:1px solid var(--rule);position:relative}
.weeks .n{display:block;font-size:.58rem;letter-spacing:.2em;color:var(--fg-dim)}
.weeks .d{display:block;font-size:.6rem;letter-spacing:.06em;color:var(--fg-dim);margin-top:.3rem;opacity:.7}
.weeks .past .dot{border-color:var(--gold-ink);background:var(--gold-ink)}
.weeks .past .n{color:var(--plum)}
.weeks .now .dot{border-color:var(--gold-ink)}
.weeks .now .dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1px solid var(--gold-ink);animation:ping 3.456s ease-out infinite}
.weeks .now .n{color:var(--plum)}
@media (max-width:640px){
  .weeks{grid-template-columns:repeat(3,1fr);gap:1.6rem .5rem}
  .weeks .d{font-size:.55rem}
}

/* what she gave you */
.sprays{margin-top:1.8rem}
.spray{padding:0;margin-bottom:2.1rem;display:grid;
  grid-template-columns:3.4rem 1fr;gap:.3rem 1.4rem;align-items:baseline}
.spray .k{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.5rem;
  line-height:1;color:var(--gold-lg)}
.spray .how{font-size:.95rem;color:var(--fg-body);margin:0}
.spray .sites{grid-column:2;font-size:.95rem;color:var(--fg-body);margin:.35rem 0 0}
.spray .sites b{font-weight:400;color:var(--plum)}
.spray .note{grid-column:2;font-size:.82rem;color:var(--fg-dim);margin:.55rem 0 0}

/* the one question */
.ask{background:linear-gradient(180deg,var(--L14),var(--L13) 26%,var(--L13) 74%,var(--L14))}
.ask .q{font-family:'Cormorant Garamond',serif;font-size:clamp(1.5rem,3.2vw,2.15rem);
  line-height:1.2;color:var(--plum);margin-bottom:.9rem}
.ask .when{font-size:.86rem;color:var(--fg-dim);margin-bottom:2rem}
.ask textarea{width:100%;min-height:9rem;font-family:'Jost';font-weight:300;font-size:1.02rem;
  line-height:1.85;color:var(--ink);background:none;border:0;border-bottom:1px solid var(--rule);
  padding:.4rem 0 1rem;border-radius:0;resize:vertical;transition:border-color var(--t-mid)}
.ask textarea:focus{outline:0;border-bottom-color:var(--gold-ink)}
.ask .leave{margin-top:2.2rem;font-family:'Jost';font-size:.64rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--linen);background:var(--plum);border:0;
  padding:1.05rem 2.4rem;cursor:pointer;transition:background var(--t-mid),letter-spacing var(--t-mid)}
.ask .leave:hover{background:var(--plum-lift);letter-spacing:.34em}
.ask .only{margin-top:1.6rem;font-size:.76rem;color:var(--fg-dim)}

/* the record. six weeks of your own body's messages, accumulating. */
.entry{padding:0;margin-bottom:2.5rem}
.entry .meta{font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-ink);
  margin:0 0 .9rem}
.entry p{font-size:1rem;line-height:1.85;color:var(--fg-body);margin:0}
.room .close{font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:clamp(1.2rem,2.4vw,1.6rem);color:var(--plum);margin:0 0 1.4rem}
.room .kept{font-size:.74rem;line-height:1.72;color:rgba(51,38,45,.46);max-width:34rem}

/* mockup only: the switch between the two pages. not part of the site. */
body.menu-open .mockswitch{opacity:0;pointer-events:none}
.mockswitch{transition:opacity var(--t-fast);position:fixed;right:1rem;bottom:1rem;z-index:80;display:flex;align-items:center;gap:.6rem;
  padding:.6rem .95rem;border:1px solid rgba(205,175,134,.42);border-radius:999px;
  background:rgba(14,7,16,.72);backdrop-filter:blur(10px);cursor:pointer;
  font-family:'Jost';font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;
  color:#CDAF86;transition:border-color var(--t-fast),color var(--t-fast)}
.mockswitch:hover{border-color:var(--gold-hi);color:var(--gold-hi)}
.mockswitch i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.8}

/* ============================================================
   CONTENTS · not a menu
   No nouns. The page's own sentences, in order, which read as a poem
   and tell you what this is while you decide where to go. The quiet
   label on the right is the signpost, for the tired woman who came
   back only to find the price.
   ============================================================ */
.navname{display:flex;align-items:center;gap:.7rem;background:none;border:0;padding:0;
  cursor:pointer;font-family:inherit;color:inherit}
.navname i{width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:.75;
  transition:opacity var(--t-fast),transform var(--t-fast)}
.navname:hover i{opacity:1;transform:scale(1.5)}
.navname .name{font-family:'Cormorant Garamond',serif;font-size:1.05rem;letter-spacing:.05em;
  color:#EFE4EC;transition:color var(--t-slow)}
.nav.on-light .navname .name{color:var(--plum)}
.navname em{font-style:normal;font-size:.55rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);opacity:.55;transition:opacity var(--t-fast)}
.navname:hover em{opacity:1}

/* --- the tone ------------------------------------------------------
   Her 432Hz bed, silent until someone asks for it. The first screen has
   no bar, so this cannot live inside one: it is fixed at the same top
   right corner and the bar steps aside for it. The word is offered only
   at the threshold, where there is room; after that the mark alone
   carries the state. It arrives last, after her three lines have landed.
   Nothing is remembered between visits, because remembering needs
   storage and her notice says this site keeps none.

   The button is the mark and nothing else. The word hangs off its side
   rather than sitting inside it, because a word inside would widen what is
   pressable, and what is pressable would then reach across Begin here and
   quietly take its right edge. */
.tone{position:fixed;top:1.05rem;right:var(--pad);z-index:51;
  display:grid;place-items:center;width:2.3rem;height:2.3rem;
  background:none;border:0;padding:0;cursor:pointer;font-family:inherit;color:inherit;
  animation:arrive var(--t-slow) ease both 4.32s}
.tone-word{position:absolute;right:calc(100% + .8rem);top:50%;transform:translateY(-50%);
  font-size:.55rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);opacity:.55;white-space:nowrap;
  transition:opacity var(--t-mid),color var(--t-slow)}
.tone:hover .tone-word{opacity:1}
/* once the bar is in, the pill is beside it and there is no room for a
   word, so the word goes, and goes out of reach with it */
.nav.show ~ .tone .tone-word{opacity:0;pointer-events:none}

.tone-ring{position:relative;display:grid;place-items:center;
  width:2.3rem;height:2.3rem;border-radius:50%;
  border:1px solid rgba(212,175,55,.32);
  background:radial-gradient(130% 200% at 50% 130%,rgba(212,175,55,.14),rgba(14,7,16,0) 62%);
  transition:border-color var(--t-mid),background var(--t-mid)}
.tone:hover .tone-ring{border-color:rgba(212,175,55,.6)}
.tone-ring i{width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:.6;
  transition:opacity var(--t-mid),transform var(--t-mid)}
.tone:hover .tone-ring i{opacity:1}
/* sounding: the dot holds, and the light leaves it in rings, on the grid */
.tone-ring em{position:absolute;inset:0;border-radius:50%;
  border:1px solid var(--gold);opacity:0;transform:scale(.16);pointer-events:none}
.tone[aria-pressed="true"] .tone-ring{border-color:var(--gold-hi)}
.tone[aria-pressed="true"] .tone-ring i{opacity:1;transform:scale(1.3)}
.tone[aria-pressed="true"] .tone-ring em{animation:tone 4.32s ease-out infinite}
.tone[aria-pressed="true"] .tone-ring em+em{animation-delay:2.16s}
@keyframes tone{
  0%{transform:scale(.16);opacity:0}
  18%{opacity:.5}
  100%{transform:scale(1);opacity:0}}
/* the page turns to linen at the dawn, and so does the mark */
.nav.on-light ~ .tone .tone-word{color:var(--gold-ink)}
.nav.on-light ~ .tone .tone-ring{border-color:rgba(126,96,36,.34);
  background:radial-gradient(130% 200% at 50% 130%,rgba(212,175,55,.18),rgba(248,244,240,0) 64%)}
.nav.on-light ~ .tone:hover .tone-ring{border-color:rgba(126,96,36,.62)}
.nav.on-light ~ .tone .tone-ring i{background:var(--gold-ink)}
.nav.on-light ~ .tone .tone-ring em{border-color:var(--gold-ink)}   /* a ring, never a disc */
.nav.on-light ~ .tone[aria-pressed="true"] .tone-ring{border-color:var(--gold-ink)}
@media (prefers-reduced-motion:reduce){
  .tone{animation:none}
  .tone-ring em{animation:none !important}}

.contents{position:fixed;inset:0;z-index:55;overflow-y:auto;outline:0;
  background:radial-gradient(120% 85% at 50% 0%,#2A0E2E,var(--L0) 68%);
  opacity:0;transition:opacity var(--t-mid) ease}
.contents.open{opacity:1}
.contents-inner{position:relative;z-index:1;min-height:100%;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(4.6rem,9vh,6rem) var(--pad) clamp(2.4rem,6vh,4rem);max-width:60rem;margin:0 auto;width:100%}
.contents ol{list-style:none;margin:0;padding:0}
.contents li{opacity:0}
.contents.open li{animation:sayline var(--t-slow) cubic-bezier(.22,.68,.16,1) both;
  animation-delay:calc(var(--i) * .054s)}
@keyframes sayline{from{opacity:0;transform:translateY(14px);filter:blur(6px)}
                   to{opacity:1;transform:none;filter:blur(0)}}
.contents a{display:grid;grid-template-columns:1fr auto;gap:.4rem 2rem;align-items:baseline;
  padding:.9rem .2rem;text-decoration:none}
.contents .say{font-family:'Cormorant Garamond',serif;font-weight:300;
  font-size:clamp(1.1rem,2.2vw,1.52rem);line-height:1.22;color:#EFE4EC;
  transition:color var(--t-fast),transform var(--t-fast)}
.contents a:hover .say,.contents a:focus-visible .say{color:var(--gold-hi);transform:translateX(6px)}
.contents .tag{font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);opacity:.45;white-space:nowrap;transition:opacity var(--t-fast)}
.contents a:hover .tag,.contents a:focus-visible .tag{opacity:1}
.contents-close{position:absolute;top:1.05rem;right:var(--pad);background:none;border:0;
  cursor:pointer;font-family:'Jost';font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);opacity:.7;padding:.4rem;transition:opacity var(--t-fast)}
.contents-close:hover{opacity:1}
/* a short laptop should still see all twelve without scrolling */
@media (max-height:840px){
  .contents-inner{padding-top:4.2rem;padding-bottom:1.5rem}
  .contents a{padding:.72rem .2rem}
  .contents .say{font-size:clamp(1.02rem,1.9vw,1.34rem)}
}
/* On a phone there is no hover to reveal anything, so the label that says
   this opens has to be visible at rest. Her name stays as the identity and
   the word does the work. */
@media (max-width:640px){
  .contents a{grid-template-columns:1fr;padding:.42rem .2rem}
  .contents .tag{margin-top:.05rem}
  .contents-inner{padding-top:4rem;padding-bottom:1.4rem}
  .contents .say{font-size:1.02rem;line-height:1.18}
  .navname{gap:.55rem;min-height:44px}          /* a real tap target */
  .navname .name{font-size:.98rem}
  .navname em{opacity:.9;font-size:.5rem;letter-spacing:.2em}
  .navname em::before{content:"·";margin-right:.55rem;opacity:.55}
  .nav{padding-left:1.15rem;padding-right:calc(1.15rem + 3.5rem)}
  /* the mark keeps the bar's own margin, and grows into a real tap target */
  .tone{right:1.15rem;width:44px;height:44px}
  .tone-word{font-size:.5rem;letter-spacing:.2em;right:calc(100% + .35rem)}
  .tone-ring{width:2.4rem;height:2.4rem}
  .nav a{font-size:.62rem;letter-spacing:.2em;padding:.62rem 1.05rem;
    min-height:44px;display:inline-flex;align-items:center}
  .wide{display:none}
}
/* Narrow phones: the name gives way, the word does not. This gave way at
   340px until the tone arrived beside Begin here. Measured at those sizes
   the bar wants 413px to hold her name, the word and the pill without them
   touching, so the threshold is where the arithmetic puts it. A 430px phone
   still keeps her name; a 390px one keeps the two things that do something. */
@media (max-width:420px){
  .navname .name{display:none}
  .navname em::before{content:none}
  .navname em{font-size:.56rem;letter-spacing:.24em}
}
@media (prefers-reduced-motion:reduce){
  .contents{transition:none}
  .contents.open li{animation:none;opacity:1}
}

/* ============================================================
   THE NOTICES · privacy and terms
   Plain words, her register, and precise about what this site
   actually does rather than what a template assumes. Every factual
   claim here is true of the code: no cookies, no analytics, no
   advertising. If that ever changes, this copy changes with it.
   ============================================================ */
.legal{background:var(--L14);min-height:100vh}
.legal .lhead{padding:1.5rem var(--pad) .4rem;display:flex;
  justify-content:space-between;align-items:center;gap:1rem}
.legal .lhead .who{font-family:'Cormorant Garamond',serif;font-size:1.02rem;
  letter-spacing:.05em;color:var(--plum)}
.legal .lhead a{font-size:.56rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);text-decoration:none;white-space:nowrap}
.legal .lhead a:hover{color:var(--plum)}
.legal section{padding:clamp(3.4rem,8vh,5.5rem) var(--pad) clamp(3rem,7vh,4.5rem)}
.legal .wrap{max-width:38rem}
.legal h1{font-size:clamp(2.4rem,5.4vw,3.4rem);line-height:1.05;margin-bottom:1.3rem}
.legal .epi{font-size:1.12rem;line-height:1.68;color:var(--fg);max-width:32rem;margin-bottom:.4rem}
.legal h2{font-size:clamp(1.18rem,2.1vw,1.4rem);line-height:1.28;margin:2.9rem 0 .85rem}
.legal p{font-size:.98rem;line-height:1.82;color:var(--fg-body);max-width:34rem}
.legal a:not(.lhead a){color:var(--plum);text-decoration:underline;
  text-decoration-color:rgba(74,23,72,.35);text-underline-offset:3px}
.legal a:not(.lhead a):hover{text-decoration-color:var(--gold-ink)}
.legal .fill{color:var(--plum);font-style:italic}
.legal .updated{margin-top:3.4rem;font-size:.58rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--fg-dim)}
.legal .other{margin-top:1.4rem;font-size:.58rem;letter-spacing:.26em;text-transform:uppercase}
.legal .other a{color:var(--gold-ink)}
.foot .legallinks{margin-top:2.4rem;font-size:.58rem;letter-spacing:.26em;text-transform:uppercase}
.foot .legallinks a{color:var(--gold-ink);text-decoration:none;padding:0 .5rem}
.foot .legallinks a:hover{color:var(--plum)}

/* --- grain. keeps the darks from going flat and digital. ------------ */
/* --- grain. keeps the darks from going flat and digital, and dithers:
   a photograph's own compression steps read as stripes once it is stretched
   across the page and lit at low opacity. Noise breaks the step edges, which
   is the whole trick. Free, and it works on every image at once. ---------- */
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.08;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.9' intercept='-.45'/%3E%3CfeFuncG type='linear' slope='1.9' intercept='-.45'/%3E%3CfeFuncB type='linear' slope='1.9' intercept='-.45'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:reduce){.grain{opacity:.06}}

/* ============================================================
   V3 · FROM CAVE TO LIGHT · Monika's pass
   "I didn't just walk through a wood. I crawled out of a cave."
   The open is colder. The flat rooms each get their own faint
   image, carried as LIGHT (screen blend), so a photograph never
   sits on the page, it shines through it.
   ============================================================ */
.wm{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.wm img{width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;
  opacity:var(--wmo,.14);filter:saturate(var(--wms,.7)) brightness(var(--wmb,1));
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent)}
/* Her cave, tinted into the palette. Sepia lays one hue across the whole
   photograph, the rotation carries that hue to plum, so the shaft of light
   arrives as her purple rather than as white light in a black room. */
.wm--plum img{filter:sepia(1) hue-rotate(242deg) saturate(1.7) brightness(var(--wmb,.95))}

/* on linen the light trick inverts: the image is carried as shadow */
.wm--linen img{mix-blend-mode:multiply}
/* a full background, not a watermark: the gate's cave mouth */
.wm--full img{mix-blend-mode:normal;-webkit-mask-image:none;mask-image:none}
.has-wm>.wrap,.has-wm>.narrow{position:relative;z-index:1}

/* her story: bokeh, the light that gathers behind memory */
.bokeh{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(110px 110px at 11% 22%,rgba(216,178,214,.09),transparent 70%),
    radial-gradient(170px 170px at 87% 12%,rgba(216,178,214,.07),transparent 70%),
    radial-gradient(80px 80px at 79% 55%,rgba(205,175,134,.06),transparent 70%),
    radial-gradient(130px 130px at 6% 74%,rgba(216,178,214,.055),transparent 70%),
    radial-gradient(90px 90px at 95% 88%,rgba(205,175,134,.07),transparent 70%),
    radial-gradient(70px 70px at 46% 94%,rgba(216,178,214,.05),transparent 70%)}

/* the portrait dissolves into the dark. no frame, as she asked. */
.blend{-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 80%,transparent),linear-gradient(180deg,transparent,#000 12%,#000 84%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 16%,#000 80%,transparent),linear-gradient(180deg,transparent,#000 12%,#000 84%,transparent);
  mask-composite:intersect;
  box-shadow:none}
/* deeper into the plum, the way she graded her own mock */
/* v4: she graded this one herself, plum already in it and the edges already
   fallen to black. So the page adds no grade at all, and the photograph is
   carried the way every other image here is carried: as light. Screen blend
   makes her own black edges disappear into the section, which is what she
   meant by "it blends into the site a bit more". */
.story-pic .ph{--tint:0;--sat:1;--bright:1;--veilA:0;--veilB:0;isolation:auto}
.story-pic .ph img{mix-blend-mode:screen;filter:none}
/* on a wide screen the photograph reaches the edge of the room */
@media (min-width:861px){
  .story-pic .ph{margin-left:calc(-1 * var(--pad));width:calc(100% + var(--pad))}
}

/* the gilded line. not chrome: light lying on the page. */
.gild{height:1px;margin:2.8rem 0 2.6rem;position:relative;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(212,175,55,.5) 16%,rgba(226,192,124,.9) 50%,rgba(212,175,55,.5) 84%,transparent);
  box-shadow:0 0 14px rgba(212,175,55,.28)}

/* colder at the mouth of the cave. leaning toward the light lifts it. */
.hero .cool{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:multiply;
  background:linear-gradient(165deg,rgba(31,44,44,.44),rgba(18,26,27,.2) 52%,rgba(18,26,27,0) 78%);
  opacity:calc(.7 - var(--near,0) * .5)}
/* A phone cannot lean toward the light, so it would hold the darkest
   state forever. Touch gets the half-leaned frame instead: the veil
   thinner, the photograph brighter, and she is visible on the path. */
@media (pointer:coarse), (max-width:760px){
  .hero .cool{opacity:.28}
  .hero .ph img{filter:saturate(.64) contrast(1.06) brightness(.74)}
  .hero .ph::before{opacity:.62}
  .hero .ph::after{opacity:.2}
}

/* the turning point: a barely-there glow behind her line */
.hero .lead{position:relative}
.hero .lead::before{content:"";position:absolute;inset:-3.2rem -5.5rem;z-index:-1;
  background:radial-gradient(50% 62% at 32% 50%,rgba(212,175,55,.1),transparent 64%)}

/* the lantern. an invitation, not a click. */
.mockswitch{border-color:rgba(212,175,55,.55);color:#E2C77C;
  background:radial-gradient(130% 200% at 50% 130%,rgba(212,175,55,.2),rgba(14,7,16,.78) 62%);
  animation:lantern 4.32s ease-in-out infinite}
.mockswitch:hover{border-color:#D4AF37;color:#EFD9A0}
.gate .enter{border-radius:999px;background:linear-gradient(180deg,#D9BC90,#C4A26F);
  box-shadow:0 0 22px rgba(212,175,55,.32), inset 0 0 12px rgba(255,236,190,.5);
  animation:lantern 4.32s ease-in-out infinite}
.gate .enter:hover{background:linear-gradient(180deg,#E2C77C,#CDAB74)}
@keyframes lantern{
  0%,100%{box-shadow:0 0 12px rgba(212,175,55,.2), inset 0 0 10px rgba(212,175,55,.12)}
  50%{box-shadow:0 0 26px rgba(212,175,55,.4), inset 0 0 16px rgba(212,175,55,.24)}}
@media (prefers-reduced-motion:reduce){.mockswitch,.gate .enter{animation:none}}

/* Dr Jonáš, whole frame, his words beside him */
.jonas{display:flex;align-items:center;gap:1.7rem;flex-wrap:wrap}

/* --- responsive ----------------------------------------------------- */
@media (max-width:760px){
  .band .ph::before{background:linear-gradient(175deg,rgba(32,15,37,.74),rgba(18,8,20,.95))}
  .band .ph .beam{opacity:.6}
  .fgrid{grid-template-columns:1fr}
  .offer{grid-template-columns:1fr}
  .offer .price{margin-top:.4rem}
  .vslot{margin:2.6rem auto 0}
  .vslot .cap{text-align:center}
  .row{grid-template-columns:2.4rem 1fr;gap:0 1rem}
  .meridian li{font-size:.42rem;letter-spacing:.1em}
  .split{gap:3rem !important}
}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,6rem);align-items:center}
/* she stays beside you while she tells it */
.story-pic{align-self:start}
@media (min-width:861px){.story-pic{position:sticky;top:6rem}}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.split--narrow{grid-template-columns:.85fr 1.15fr}
@media (max-width:860px){.split--narrow{grid-template-columns:1fr}}

/* --- production only ------------------------------------------------
   The honeypot is a field no person can see and no robot can resist, so
   it is hidden from sight and from screen readers alike. The reply below
   the button is spoken aloud when it changes, so a blind visitor is told
   the message went, not left guessing. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sent{margin:1.4rem 0 0;font-size:.92rem;line-height:1.7;color:var(--plum);max-width:34rem;min-height:1.2em}
.send[disabled]{opacity:.55;cursor:default;letter-spacing:.28em}