/* Shye's own Hebrew pair (shyebentzur.com/he-il): Kedem Sans for every display/UI role, David Libre for reading.
   Kedem Sans is a commercial face (Avraham Cornfeld, AAA): files here are for local preview only.
   A web licence for Aya's domain is required before this goes live. */
:root{
  /* warm, not black: the ink is a deep brown between bordeaux and earth, the paper stays a clean neutral */
  --paper:#f4f3f1;
  --ink:#3a1c19;
  --ink-2:#6e514c;
  --rule:#e3d7d2;
  --red:#b3201d;          /* sampled from Aya's shirt in the session photograph */
  --red-ink:#9c1b18;
  --red-lit:#ec6a5e;      /* the same red, lifted to read on the brown ink ground (4.9:1) */
  --body:"David Libre", Georgia, serif;
  --ui:"IBM Plex Sans Hebrew", system-ui, sans-serif;
  --display:"Frank Ruhl Libre", Georgia, serif;
  --display-weight:900;
  --mast-size:clamp(3.2rem, 8.6vw, 9rem);  /* refined by fitMast() to span its column */
  --mast-track:0;
  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);
  --gutter:clamp(1rem, 4vw, 3.5rem);
  --bar-h:3.4rem;
  color-scheme:light;   /* one theme: a printed magazine page */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.2rem/1.7 var(--body);
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
::selection{background:var(--red);color:var(--paper)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.28em}
a:focus-visible{outline:2px solid var(--red);outline-offset:4px;border-radius:2px}
.skip{position:absolute;inset-inline-start:-999px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{inset-inline-start:var(--gutter);top:.5rem;background:var(--ink);color:var(--paper);padding:.4rem .8rem;z-index:9}

/* ---------- top bar ---------- */
.bar{position:sticky;top:0;z-index:6;display:flex;justify-content:space-between;align-items:center;gap:2rem;
  height:var(--bar-h);padding:0 var(--gutter);view-transition-name:bar;font:400 1.05rem/1 var(--ui);background:var(--paper)}
.bar .run{font-weight:900;text-decoration:none;opacity:0;transform:translateY(4px);pointer-events:none;
  transition:opacity 220ms var(--ease-out),transform 220ms var(--ease-out)}
body.past-cover .bar .run{opacity:1;transform:none;pointer-events:auto}
body.past-cover .bar{box-shadow:0 1px 0 var(--rule)}
.bar .end{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.25rem);white-space:nowrap}
section[id],footer[id]{scroll-margin-top:calc(var(--bar-h) + 1rem)}
.bar nav ul{display:flex;gap:clamp(1rem,2.4vw,2.25rem);list-style:none;margin:0;padding:0}
.bar nav a{text-decoration:none;padding-block:.35rem;background:linear-gradient(currentColor,currentColor) 100% 100%/0 1px no-repeat;
  transition:background-size 220ms var(--ease-out),color 220ms ease}
.bar nav a:hover{background-size:100% 1px;color:var(--red-ink)}
.bar nav a:active,.menu-btn:active{color:var(--red-ink)}
.menu-btn{display:none}

/* ---------- cover ----------
   The gesture: the page opens on Aya alone, in a narrow frame beside her name. Scrolling widens the frame
   over the page until the couple she is facing is in it: from her, to the relationship.
   The opening is scroll-driven CSS (no JS). Without scroll timelines, or with reduced motion, the cover is
   the still first frame: Aya beside her name. */
.cover{position:relative}
.stage{position:relative;display:grid;grid-template-columns:minmax(0,57fr) minmax(0,43fr);
  height:calc(100svh - var(--bar-h));min-height:34rem;overflow:hidden}
.masthead{grid-column:1;min-width:0;align-self:end;padding:0 var(--gutter) clamp(1.5rem,3.5vh,3rem)}
.mast{margin:0 0 clamp(1rem,2.2vh,1.75rem);font-family:var(--display);font-weight:var(--display-weight);
  font-size:var(--mast-size);line-height:.92;letter-spacing:var(--mast-track);white-space:nowrap;
  --mast-fill:.76}  /* share of its column the name spans: present, not dominant */
.dek{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;flex-wrap:wrap;
  font:400 clamp(1.05rem,1.4vw,1.3rem)/1.4 var(--ui)}
.dek p{margin:0;max-width:48ch;text-wrap:balance}
/* Monochrome at rest. A contact action takes the red of Aya's shirt only when it is touched:
   hover on a pointer, the press itself on a phone. Press feedback (scale .97) on every contact action. */
.reach{display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 1.3rem;border:1px solid var(--ink);
  font:900 1.05rem/1 var(--ui);color:var(--ink);text-decoration:none;white-space:nowrap;
  transition:background-color 220ms ease,border-color 220ms ease,color 220ms ease,transform 160ms var(--ease-out)}
.reach span{display:inline-block;color:var(--red);transition:transform 220ms var(--ease-out),color 220ms ease}
.reach:active span{color:var(--paper)}
.reach:active,.book .phone:active,.book .mail:active,.book-sticky:active{transform:scale(.97)}
.reach:active{background:var(--red);border-color:var(--red);color:var(--paper)}
.book .phone:active,.book .mail:active{color:var(--red-lit)}
@media (hover:hover) and (pointer:fine){
  .reach:hover{background:var(--red);border-color:var(--red);color:var(--paper)}
  .reach:hover span{transform:translateX(-4px);color:var(--paper)}
  .book .phone:hover,.book .mail:hover{color:var(--red-lit)}
}
/* The photograph spans the whole stage; clip-path shows only the frame. Physical sides: the frame sits at the
   left (the end of a Hebrew line), the name at the right where reading starts. */
.cover-photo{position:absolute;inset:0;z-index:1;margin:0;overflow:hidden;
  clip-path:inset(0 57% 0 0)}
/* The cover takes a photo now and a video later: drop <video class="media" autoplay muted loop playsinline poster=...>
   in place of the <img class="media">, nothing else changes.
   translate keeps Aya (at 52% of the photograph) centred in the narrow frame; it returns to 0 as the frame opens. */
.cover-photo .media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;
  translate:-30% 0}

@media (prefers-reduced-motion:no-preference){
  .cover-photo .media{animation:unveil 1000ms var(--ease-out) both 150ms}
  @keyframes unveil{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
  /* a still photograph that breathes: one long, slow lateral move, played once */
  .breathe{scale:1.06;animation:drift 40s ease-in-out both}
  @keyframes drift{from{translate:2.4% 0}to{translate:-2.4% 0}}

  @supports (animation-timeline:scroll()){
    /* the cover gets scroll room: the stage holds still while the frame opens, then the page moves on */
    .cover{height:calc(100svh - var(--bar-h) + 80svh)}
    .stage{position:sticky;top:var(--bar-h)}
    .cover-photo{animation:open-frame linear both;animation-timeline:scroll(root block);animation-range:0 68svh}
    /* Colour is born from movement: at rest the photograph is a muted, warm version of itself; as the frame opens,
       the colour develops into it, the red of her shirt first to read. One veil over the media, so a video
       in the slot gets the same treatment. Only its opacity animates. */
    .cover-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
      -webkit-backdrop-filter:saturate(.32) sepia(.14) brightness(1.03);
      backdrop-filter:saturate(.32) sepia(.14) brightness(1.03);
      animation:develop linear both;animation-timeline:scroll(root block);animation-range:4svh 58svh}
    @keyframes develop{to{opacity:0}}
    .cover-photo .media{animation:unveil 1000ms var(--ease-out) both 150ms,open-pan linear both;
      animation-timeline:auto,scroll(root block);animation-range:normal,0 68svh}
    @keyframes open-frame{to{clip-path:inset(0 0 0 0)}}
    @keyframes open-pan{to{translate:0 0}}
  }
}

/* ---------- hello: the quote gets the whole spread ---------- */
.hello{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(1rem,2vw,2rem);
  padding:clamp(5rem,11vw,10rem) var(--gutter) clamp(4rem,8vw,7rem)}
.hello h2{grid-column:1 / -1;margin:0 0 clamp(1.5rem,3vw,2.5rem);font:400 clamp(1.35rem,1.7vw,1.6rem)/1.2 var(--ui)}
.hello blockquote{grid-column:1 / span 11;margin:0;font:500 clamp(2.1rem,4.6vw,4.25rem)/1.3 var(--body);text-wrap:balance}
.hello blockquote p{margin:0;max-width:24ch}
/* trust: the association's mark beside the three certifications, one quiet block */
.trust{grid-column:1 / span 7;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(1.25rem,3vw,2.5rem);
  align-items:start;margin-top:clamp(3rem,6vw,5rem);padding-top:1.5rem;border-top:1px solid var(--ink)}
.trust .mark{grid-row:1 / span 2;width:clamp(96px,9vw,132px);height:auto;mix-blend-mode:multiply}
.trust .creds{list-style:none;margin:0 0 1.1rem;padding:0;font:400 clamp(1rem,1.2vw,1.1rem)/1.5 var(--ui)}
.trust .creds li{padding:.35rem 0}
.trust .more{justify-self:start}
.nb{white-space:nowrap}
.more{font:900 1rem/1 var(--ui);color:var(--ink);text-decoration:none;border-bottom:1px solid var(--red);padding-bottom:.2rem;transition:color 220ms ease}
.more:hover,.more:active{color:var(--red-ink)}

/* ---------- areas: a contents page ---------- */
.areas{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(1rem,2vw,2rem);
  padding:0 var(--gutter) clamp(4rem,9vw,8rem)}
.areas h2{grid-column:1 / -1;margin:0 0 clamp(1.5rem,3vw,2.5rem);font:400 clamp(1.35rem,1.7vw,1.6rem)/1.2 var(--ui)}
.areas .contents{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:clamp(1.5rem,4vw,4.5rem);align-items:start}
.areas ol{list-style:none;margin:0;padding:0}
.areas li a{border-top:1px solid var(--rule);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.5rem,3vw,3rem);align-items:baseline;
  padding:clamp(1.4rem,2.6vw,2.2rem) 0;text-decoration:none}
.areas .name{font:900 clamp(2.25rem,4.4vw,4.4rem)/1 var(--display);transition:translate 260ms var(--ease-out),color 260ms ease}
.areas li a:active .name{color:var(--red-ink)}
.areas .lead{font-size:clamp(1.2rem,1.5vw,1.4rem);line-height:1.5;color:var(--ink);text-wrap:pretty;max-width:34ch}
@media (hover:hover) and (pointer:fine){
  .areas li a:hover .name{translate:-.35em 0;color:var(--red-ink)}
}
.areas li:first-child a{border-top-color:var(--ink)}
/* the plates: one photograph per area, the reader's place in the list chooses which. Without script: the first. */
.plates{position:sticky;top:calc(var(--bar-h) + 1.5rem);aspect-ratio:4/5;overflow:hidden;background:var(--rule)}
.plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;clip-path:inset(0 0 100% 0);
  transition:opacity 260ms ease,clip-path 0ms linear 260ms}
.plate.is-on{opacity:1;clip-path:inset(0 0 0 0);transition:opacity 200ms ease,clip-path 700ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .areas ol:hover li a:not(:hover) .name{color:color-mix(in srgb,var(--ink) 50%,var(--paper))}
}
.areas .thumb{display:none}
@media (min-width:821px){
  .areas li a{grid-template-columns:auto minmax(0,1fr)}
  .areas .name{white-space:nowrap}
}
.room{margin:0 0 clamp(4rem,9vw,8rem)}
/* the room as a spread: the whole room beside two of its corners */
.room-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,2fr) minmax(0,2fr);gap:clamp(.4rem,.8vw,.8rem);height:min(78vh,52vw)}
.room .frame{overflow:hidden;min-height:0}
.room img{width:100%;height:100%;object-fit:cover}
.room .big img{object-position:50% 58%}
.room figcaption{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(1rem,2vw,2rem);padding:1.1rem var(--gutter) 0;
  font:500 clamp(1.25rem,1.7vw,1.55rem)/1.55 var(--body);text-wrap:pretty}
.room figcaption span{grid-column:4 / span 6}

/* ---------- booking: where every "לקביעת פגישה" lands. Ink, the two ways to meet, the phone largest ---------- */
.book{background:var(--ink);color:var(--paper);padding:clamp(4rem,9vw,8rem) var(--gutter) 2.5rem;
  display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(1rem,2vw,2rem)}
.book > *{grid-column:1 / -1}
.book a:focus-visible{outline-color:var(--paper)}
.book h2{margin:0 0 clamp(1.75rem,3vw,2.5rem);font:900 clamp(2rem,4vw,3.4rem)/1 var(--display);color:var(--paper)}
.formats{grid-column:1 / span 8;list-style:none;margin:0 0 clamp(2rem,4vw,3rem);padding:0;display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid rgb(244 243 241 / .35)}
.formats li{display:flex;flex-direction:column;gap:.35rem;padding:1.1rem 0 0}
.formats li + li{padding-inline-start:clamp(1rem,3vw,2.5rem);border-inline-start:1px solid rgb(244 243 241 / .35)}
.formats strong{font:900 clamp(1.3rem,1.9vw,1.7rem)/1.1 var(--display)}
.formats span{font:400 1.1rem/1.4 var(--body);color:var(--rule)}
.book .phone{justify-self:start;white-space:nowrap;font:900 clamp(2.2rem,10.2vw,8.5rem)/.95 var(--display);
  text-decoration:none;direction:ltr;unicode-bidi:isolate;font-variant-numeric:lining-nums;
  transition:color 220ms ease,transform 160ms var(--ease-out)}
.book .mail{justify-self:start;margin-top:clamp(1rem,2vw,1.5rem);font:400 clamp(1.2rem,1.6vw,1.4rem)/1.4 var(--body);color:var(--paper);
  text-underline-offset:.3em;transition:color 220ms ease,transform 160ms var(--ease-out)}
.book-cred{margin:clamp(2.5rem,5vw,4rem) 0 0;font:400 1rem/1.5 var(--ui);color:var(--rule)}
.book small{display:block;margin-top:1.25rem;padding-top:1rem;border-top:1px solid rgb(244 243 241 / .25);
  font:400 .95rem/1.4 var(--ui);color:var(--rule)}
/* The booking button floats on every page at every width: the one red thing on the page at rest.
   It steps aside only once the booking spread itself is on screen. */
.book-sticky{position:fixed;z-index:7;inset-inline-end:clamp(16px,2.4vw,32px);bottom:calc(clamp(16px,2.4vw,32px) + env(safe-area-inset-bottom,0px));
  display:inline-flex;align-items:center;gap:.7rem;padding:1.05rem 1.6rem;background:var(--red);color:var(--paper);
  font:900 1.15rem/1 var(--ui);text-decoration:none;outline:1px solid var(--paper);
  transition:opacity 240ms ease,translate 300ms var(--ease-out),background-color 200ms ease,transform 160ms var(--ease-out)}
.book-sticky span{display:inline-block;transition:transform 220ms var(--ease-out)}
.book-sticky:active{background:var(--red-ink);transform:scale(.97)}
.book-sticky:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .book-sticky:hover{background:var(--red-ink)}
  .book-sticky:hover span{transform:translateX(-4px)}
}
body.at-book .book-sticky{opacity:0;translate:0 140%;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .book-sticky{animation:book-in 520ms var(--ease-out) both 700ms}
  @keyframes book-in{from{opacity:0;translate:0 24px}}
}

/* ---------- mobile ---------- */
@media (max-width:820px){
  .bar{gap:1rem}
  .bar nav{display:none;position:absolute;inset-inline:0;top:100%;background:var(--paper);padding:.5rem var(--gutter) 1.5rem;z-index:5;border-bottom:1px solid var(--rule)}
  .bar nav.open{display:block}
  .bar nav ul{flex-direction:column;gap:0}
  .bar nav a{display:block;padding:.85rem 0;font-size:1.25rem;border-top:1px solid var(--rule)}
  .bar .end{flex:1;justify-content:space-between}
  .book-sticky{inset-inline:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));justify-content:center;padding:1.1rem}
  .book{padding-bottom:calc(2.5rem + env(safe-area-inset-bottom,0px))}
  .formats{grid-template-columns:1fr}
  .formats li + li{padding-inline-start:0;border-inline-start:0;border-top:1px solid rgb(244 243 241 / .35);margin-top:1.1rem}
  .menu-btn{display:inline-flex;align-items:center;gap:.5rem;background:none;border:0;font:400 1.05rem/1 var(--ui);color:var(--ink);padding:.6rem 0;cursor:pointer}
  /* cover: the name across the top, the frame below it opens sideways */
  .stage{display:flex;flex-direction:column;min-height:30rem}
  .masthead{order:-1;align-self:stretch;padding:clamp(.75rem,3vw,1.25rem) var(--gutter) 1.1rem}
  .mast{line-height:.95;margin-bottom:.75rem;--mast-fill:1}  /* on a phone the name already reads modest at full width */
  .cover-photo{position:relative;inset:auto;flex:1;clip-path:inset(0 21% 0 21%)}
  .cover-photo .media{translate:0 0;object-position:51% 28%}
  .hello,.areas{display:block}
  .hello blockquote{font-size:clamp(1.9rem,8.4vw,2.4rem)}
  body{line-height:1.6}
  .trust{grid-template-columns:88px minmax(0,1fr)}
  .trust .mark{width:88px}
  .areas .contents{display:block}
  .plates{display:none}
  .areas li a{grid-template-columns:1fr;row-gap:.45rem;padding-top:1.4rem}
  .areas .thumb{display:block;order:-1;aspect-ratio:3/2;overflow:hidden;margin-bottom:.45rem}
  .areas .thumb img{width:100%;height:100%;object-fit:cover;filter:saturate(.32) sepia(.14) brightness(1.03);transition:filter 600ms ease}
  .areas li a.is-on .thumb img,.areas li a:active .thumb img{filter:none}
  .room-grid{grid-template-columns:1fr 1fr;height:auto}
  .room .big{grid-column:1 / -1;aspect-ratio:4/3}
  .room .frame:not(.big){aspect-ratio:3/4}
  .room figcaption{display:block}
}
@media (max-width:820px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    .cover-photo .media{animation:unveil 1000ms var(--ease-out) both 150ms}
  }
}
/* without the scroll-driven opening, a phone shows the whole photograph */
@media (max-width:820px){
  @supports not (animation-timeline:scroll()){ .cover-photo{clip-path:none} }
}
@media (max-width:820px) and (prefers-reduced-motion:reduce){ .cover-photo{clip-path:none} }

/* ---------- inner pages: the article ---------- */
body.inner .bar .run{opacity:1;transform:none;pointer-events:auto}
body.inner .bar{box-shadow:0 1px 0 var(--rule)}
.bar nav a[aria-current="page"]{background-size:100% 1px}
.article{padding:clamp(2.5rem,5vw,4.5rem) var(--gutter) clamp(4rem,8vw,7rem);display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(1rem,2vw,2rem)}
.article > *{grid-column:2 / span 6}
/* every inner page opens on a real photograph: people in colour, the room in black and white */
.art-head{grid-column:1 / span 8;display:grid;grid-template-columns:subgrid;align-items:end;margin-bottom:clamp(3rem,6vw,5.5rem)}
.art-head .titles{grid-column:1 / span 7;padding-bottom:clamp(.5rem,2vw,1.5rem)}
.art-head h1{margin:0;font:900 clamp(2.9rem,6.6vw,6rem)/.98 var(--display);text-wrap:balance}
.art-head .lead{margin:clamp(1rem,2vw,1.75rem) 0 0;max-width:24ch;font:500 clamp(1.6rem,2.6vw,2.4rem)/1.3 var(--body);text-wrap:balance}
/* the opening photograph stays beside the reading (desktop): Aya and her room remain present down the page */
.article > .lead-photo{grid-column:9 / -1;grid-row:1 / span 60;align-self:start;position:sticky;top:calc(var(--bar-h) + 1.5rem);
  margin:0 0 0 calc(var(--gutter) * -1)}
.lead-photo .frame{overflow:hidden;aspect-ratio:4/5;max-height:calc(100svh - var(--bar-h) - 3rem)}
.lead-photo img{width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:no-preference){
  .lead-photo img{animation:unveil 900ms var(--ease-out) both 120ms}
}
.article h2{margin:clamp(2.75rem,5vw,4rem) 0 1rem;font:900 clamp(1.4rem,2vw,1.8rem)/1.2 var(--display)}
.article p{margin:0 0 1.1em;max-width:62ch;text-wrap:pretty}
/* the questions people arrive with: one column, read like a list of voices */
.asks{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.asks li{padding:.9rem 0;font:500 clamp(1.25rem,1.6vw,1.45rem)/1.45 var(--body);text-wrap:pretty}
.asks li + li{border-top:1px solid var(--rule)}
/* a run of terms, not chips */
.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;row-gap:.45rem;font:400 1.1rem/1.4 var(--ui)}
.tags li{padding-inline-end:.9rem;margin-inline-end:.9rem;border-inline-end:1px solid var(--rule)}
.tags li:last-child{border:0;margin:0;padding:0}
.pull{grid-column:3 / span 9;margin:clamp(3rem,6vw,5rem) 0;padding:0;font:500 clamp(1.8rem,3.4vw,3rem)/1.3 var(--body);text-wrap:balance}
.pull p{margin:0;max-width:none}
.article > figure{grid-column:1 / -1;margin:clamp(2.5rem,5vw,4rem) calc(var(--gutter) * -1)}
.article > figure .frame{overflow:hidden}
.article > figure img{width:100%;height:min(78vh,58vw);object-fit:cover}
.article > figure figcaption{padding:1rem var(--gutter) 0;font:400 1rem/1.5 var(--ui);color:var(--ink-2)}
.cred-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.cred-list li{padding:.85rem 0;font:400 1.1rem/1.5 var(--ui)}
.cred-list li + li{border-top:1px solid var(--rule)}
.badge{width:120px;height:120px;margin-top:1.5rem;mix-blend-mode:multiply}
.next{grid-column:1 / -1;margin-top:clamp(3rem,6vw,5rem);padding-top:1.25rem;border-top:1px solid var(--ink);display:flex;flex-wrap:wrap;gap:.75rem 2.25rem;font:400 1.1rem/1.4 var(--ui)}
.next a{text-decoration:none}
.next a{transition:color 220ms ease}
.next a:hover,.next a:active{color:var(--red-ink);text-decoration:underline;text-decoration-color:var(--red)}
@media (max-width:820px){
  .article{display:block}
  .art-head{display:block}
  .article > .lead-photo{position:static;margin:0 calc(var(--gutter) * -1) 0}
  .lead-photo .frame{aspect-ratio:1/1;max-height:none}
  .art-head{margin-bottom:2rem}
  main{padding-bottom:calc(4.2rem + env(safe-area-inset-bottom,0px))}
  .pull{margin:2.5rem 0}
  .article > figure img{height:auto;aspect-ratio:4/3}
}
.latin{font-family:var(--body)}

/* ---------- therapy pages: the practical block, the way into the reading ---------- */
.practical{margin-top:clamp(2.75rem,5vw,4rem);padding-top:1.4rem;border-top:1px solid var(--ink)}
.article .practical h2{margin-top:0}
.practical p{margin:0 0 .3em}
.practical .reach{margin-top:1.4rem}
.cred-line{margin-top:1.75rem;padding-top:.9rem;border-top:1px solid var(--rule);font:400 1.05rem/1.5 var(--ui);color:var(--ink-2)}
/* drawers: a long text shows its first lines; one tap opens the rest in place */
.drawer{margin-top:clamp(2.75rem,5vw,4rem);padding-top:1.4rem;border-top:1px solid var(--ink)}
.article .drawer h2{margin-top:0}
.drawer-text{position:relative}
.drawer-text > :first-child{margin-top:0}
.drawer.is-closed .drawer-text{max-height:7.4em;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 35%,transparent);mask-image:linear-gradient(#000 35%,transparent)}
@media (prefers-reduced-motion:no-preference){
  /* the accordion exception: a drawer has no transform equivalent for revealing its own height */
  .drawer-text{interpolate-size:allow-keywords;transition:max-height 420ms var(--ease-out)}
}
.drawer-btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:.55rem;margin-top:1rem;font:900 1.05rem/1 var(--ui);
  color:var(--ink);padding-block:.4rem;border-bottom:1px solid var(--red);transition:color 220ms ease,transform 160ms var(--ease-out)}
.drawer-btn::after{content:"+";color:var(--red);font-weight:400;font-size:1.3em;line-height:.6;transition:rotate 260ms var(--ease-out)}
.drawer-btn[aria-expanded="true"]::after{rotate:45deg}
.drawer-btn:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.drawer-btn:active{color:var(--red-ink);transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.drawer-btn:hover{color:var(--red-ink)}}
.drawer .pull{margin:2.5rem 0}

/* ---------- reading: a contents of titles, then the long texts ---------- */
.titles-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.titles-list li{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;padding:.95rem 0}
.titles-list li + li{border-top:1px solid var(--rule)}
.titles-list a{font:500 clamp(1.25rem,1.7vw,1.5rem)/1.4 var(--body);text-decoration:none;transition:color 220ms ease;text-wrap:pretty}
.titles-list a:active{color:var(--red-ink)}
@media (hover:hover) and (pointer:fine){.titles-list a:hover{color:var(--red-ink)}}
.titles-list span{flex:none;font:400 .95rem/1 var(--ui);color:var(--ink-2)}
.shelf h2{margin-top:clamp(2rem,4vw,3rem)}
.shelf h2:first-child{margin-top:0}
.article h3{margin:2rem 0 .75rem;font:900 1.35rem/1.3 var(--display)}
.shelf-teaser{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(1rem,2vw,2rem);padding:0 var(--gutter) clamp(4rem,9vw,8rem)}
.shelf-teaser h2{grid-column:1 / -1;margin:0 0 clamp(1.5rem,3vw,2.5rem);font:400 clamp(1.35rem,1.7vw,1.6rem)/1.2 var(--ui)}
.shelf-teaser .titles-list{grid-column:1 / span 8}
.shelf-teaser .more{grid-column:1 / -1;justify-self:start;margin-top:1.5rem}
/* about: the mark at a size where its wording reads */
.trust-full{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:2rem;margin-top:clamp(2.75rem,5vw,4rem)}
.trust-full h2{grid-column:1 / -1}
.trust-full .mark{grid-column:2;grid-row:2;width:clamp(120px,12vw,168px);height:auto;mix-blend-mode:multiply}
.trust-full .cred-list{grid-column:1;grid-row:2}
@media (max-width:820px){
  .shelf-teaser{display:block}
  .titles-list li{flex-direction:column;gap:.35rem}
  .trust-full{grid-template-columns:1fr}
  .trust-full .mark{grid-column:1;grid-row:auto;margin-bottom:1rem}
}

/* ---------- every photograph: colour arrives with movement ----------
   At rest a photograph is muted and warm; it reaches full colour as it scrolls into place. Full colour
   without scroll timelines or with reduced motion. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .room img{animation:develop-img linear both;animation-timeline:view();animation-range:entry 10% cover 45%}
    .room img.breathe,.article > figure img{animation:drift 40s ease-in-out both,develop-img linear both;
      animation-timeline:auto,view();animation-range:normal,entry 10% cover 45%}
    .lead-photo img{animation:unveil 900ms var(--ease-out) both 120ms,develop-img linear both;
      animation-timeline:auto,scroll(root block);animation-range:normal,0 45svh}
    @keyframes develop-img{from{filter:saturate(.32) sepia(.14) brightness(1.03)}to{filter:none}}
  }
}

/* ---------- Aya's quotes ink in word by word as they are read: the same rule as the photographs ---------- */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    /* each word is a pale, sharp outline of itself; ink rises into it from the baseline as it is read,
       word after word, until the whole sentence is full. Nothing blurs or moves: the letters stay crisp. */
    .inked{view-timeline:--quote block}
    .inked .w{position:relative;display:inline-block;color:color-mix(in srgb,var(--ink) 20%,var(--paper))}
    .inked .w::after{content:attr(data-w);position:absolute;inset:0;color:var(--ink);clip-path:inset(100% 0 0 0);
      animation:fill linear both;animation-timeline:--quote;
      animation-range:cover calc(12% + var(--i) * var(--step)) cover calc(24% + var(--i) * var(--step))}
    @keyframes fill{to{clip-path:inset(-10% 0 -10% 0)}}
  }
}
@media (prefers-reduced-motion:reduce){
  .plate,.plate.is-on{transition:none}
}

/* ---------- page to page: the bar stays put, the page turns underneath ---------- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:160ms var(--ease-out) both page-out}
  ::view-transition-new(root){animation:340ms var(--ease-out) both page-in}
  @keyframes page-out{to{opacity:0}}
  @keyframes page-in{from{opacity:0;translate:-1.5% 0}}
}