/* l-editorial.css - the `editorial` layout (IND14 E1, FINAL-salon-spa "After Hours at the Mirror"): warm ebony,
   Bodoni Moda set large, DM Mono labels, the arch as the only curve. Linked after industry.css only by pages whose
   <body> is class "L-editorial"; every rule is scoped under .L-editorial. Copied into bot/samples/industries/ by
   samples-src/build.py - edit THIS file, not the copy. Colour pairs drawn here are checked by contrast.py (editorial).
   Rules: Bodoni never below 24 px; glass (backdrop-filter) only on static layers; text over a photo sits on a scrim
   that reaches rgba(10,8,7,.68) at the text; no overflow:hidden above the pinned story. */

/* metric-matched fallbacks, so the 150 px headline does not jump when the web fonts arrive */
@font-face{font-family:"Bodoni Fallback";src:local("Georgia");size-adjust:88%;ascent-override:100%;descent-override:26%;line-gap-override:0%}
@font-face{font-family:"Hanken Fallback";src:local("Arial");size-adjust:97%;ascent-override:98%;descent-override:26%}

.L-editorial{
  --gut:clamp(16px,4vw,56px);--sec:clamp(72px,9vw,136px);--sec-join:clamp(40px,4.5vw,72px);--col:clamp(16px,2vw,32px);
  --glass:rgba(14,12,11,.55);--glass-line:rgba(243,237,230,.1);--ease:cubic-bezier(.2,.7,.1,1);--nav:64px;
  --serif:var(--display),"Bodoni Fallback",Georgia,serif;
  --sans:var(--body),"Hanken Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:var(--label),ui-monospace,"Cascadia Mono",Consolas,monospace;
  overflow-x:clip;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--sans);text-rendering:optimizeLegibility
}
@media (max-width:359px){.L-editorial{font-size:16px}
  /* 320 px: a chapter's figures stay on one line and its strip ends clear of the chat launcher (Q9) */
  /* ... and a long photo credit wraps short of it while its photo scrolls in from the foot of the screen */
  .L-editorial .story:not(.pinned) .ch-tag{max-width:calc(100% - 96px)}
  .L-editorial .ch-facts .num{font-size:clamp(18px,6.2vw,24px)}
  .L-editorial .story.pinned .ch-facts{margin-right:64px}}
.L-editorial ::selection{background:var(--accent);color:var(--accent-ink)}
.L-editorial .wrap{width:min(1320px,100% - 2 * var(--gut));margin-inline:auto}
.L-editorial h1,.L-editorial h2,.L-editorial h3{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:-.015em}
.L-editorial h2{font-size:clamp(2.4rem,1rem + 5vw,6.4rem);line-height:.92;font-optical-sizing:auto;text-wrap:balance}
.L-editorial h1 em,.L-editorial h2 em{font-style:italic;color:var(--accent);padding-right:.04em}
.L-editorial .eyebrow{display:inline-block;font:500 11.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--highlight)}
@media (min-width:1280px){.L-editorial .eyebrow{font-size:12px}}
.L-editorial .lede{color:var(--muted);font-size:1.12rem;line-height:1.55;max-width:52ch;margin:0}
.L-editorial p,.L-editorial li,.L-editorial summary{text-wrap:pretty}
.L-editorial section{padding:var(--sec) 0}
.L-editorial :focus-visible{outline:2px solid var(--highlight);outline-offset:3px;border-radius:2px}
.L-editorial .sec-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:24px var(--col);margin-bottom:clamp(40px,5vw,72px)}
.L-editorial .sec-head h2{margin-top:14px}
@media (max-width:900px){.L-editorial .sec-head{grid-template-columns:1fr}}
/* at the clamp floor the tight .92 leading lets a Q's tail touch the line below */
@media (max-width:759px){.L-editorial h2{line-height:1}}
/* an in-page link lands its target below the sticky nav (sections carry their own top padding) */
.L-editorial [id]{scroll-margin-top:calc(var(--nav) + 16px)}
.L-editorial section[id],.L-editorial main[id]{scroll-margin-top:0}

/* ---- the demo label: first and last line ---- */
.L-editorial .demo-bar{background:var(--ink);color:var(--bg);min-height:32px;display:flex;align-items:center;justify-content:center;
  padding:8px var(--gut);font:500 11px/1.45 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-align:center}
.L-editorial .demo-bar b{font-weight:500;letter-spacing:inherit}
/* the closing bar stays centred like the opening one, its sides clear of the chat launcher (Q11) */
@media (max-width:860px){.L-editorial footer .demo-bar{padding-inline:88px}}
/* narrow phones: the text keeps its width on the left; only the launcher's side is held clear */
@media (max-width:559px){.L-editorial footer .demo-bar{padding-left:16px}}

/* ---- nav: frosted glass over the hero, the progress line on its lower edge ---- */
.L-editorial .nav{position:sticky;top:0;z-index:60;height:var(--nav);background:var(--glass);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid var(--glass-line)}
.L-editorial .nav .wrap{height:100%;display:flex;align-items:center;gap:28px}
.L-editorial .brand{display:flex;flex-direction:column;text-decoration:none;line-height:1;white-space:nowrap}
.L-editorial .brand .wm{font:italic 400 1.6rem/1 var(--serif);letter-spacing:-.01em}
.L-editorial .brand small{margin-top:6px;font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.L-editorial .nav ul{list-style:none;display:flex;gap:26px;margin:0 0 0 auto;padding:0}
.L-editorial .nav ul a{position:relative;display:block;padding:6px 0;text-decoration:none;font:500 .92rem/1 var(--sans);color:color-mix(in srgb,var(--ink) 70%,var(--muted));transition:color .2s}
.L-editorial .nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.L-editorial .nav ul a:hover{color:var(--ink)}
.L-editorial .nav ul a:hover::after{transform:scaleX(1)}
.L-editorial .nav .m-book{display:none}
.L-editorial .menu-btn{display:none;margin-left:auto;background:none;border:1px solid rgba(243,237,230,.35);border-radius:4px;height:40px;padding:0 14px;
  font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);cursor:pointer}
.L-editorial .progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;pointer-events:none}
@media (max-width:759px){
  .L-editorial .menu-btn{display:block;flex:none}
  .L-editorial .nav .wrap{gap:14px}
  .L-editorial .brand{min-width:0}
  .L-editorial .brand small{font-size:9.5px;letter-spacing:.06em}
  .L-editorial .demo-bar{font-size:10px;letter-spacing:.08em}
  .L-editorial .nav .nav-book{display:none}
  .L-editorial .nav ul{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;margin:0;
    padding:8px var(--gut) 22px;background:var(--bg);border-bottom:1px solid var(--glass-line);box-shadow:0 28px 56px rgba(0,0,0,.7);
    max-height:calc(100svh - var(--nav));overflow:auto}
  .L-editorial .nav ul.open{display:flex}
  .L-editorial .nav ul a{padding:14px 0;font:400 1.6rem/1.1 var(--serif);color:var(--ink);border-bottom:1px solid var(--glass-line)}
  .L-editorial .nav ul a::after{display:none}
  .L-editorial .nav .m-book{display:block}
  .L-editorial .nav .m-book a{border-bottom:0;color:var(--accent);font-style:italic}
}

/* ---- buttons: square-ish, editorial ---- */
.L-editorial .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:4px;
  font:500 .95rem/1 var(--sans);letter-spacing:.01em;text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:background .2s,color .2s,border-color .2s}
.L-editorial .btn-primary{background-color:var(--accent);color:var(--accent-ink);
  background-image:linear-gradient(105deg,transparent 40%,rgba(255,244,225,.55) 50%,transparent 60%);background-size:250% 100%;background-position:120% 0;background-repeat:no-repeat;
  transition:background-color .2s,background-position .45s var(--ease),transform .15s ease}
.L-editorial .btn-primary:hover{background-color:#E3EAA2;background-position:-20% 0}
.L-editorial .btn-primary:active{transform:translateY(1px) scale(.98)}
.L-editorial .btn-ghost{background:transparent;color:var(--ink);border-color:rgba(243,237,230,.55)}
.L-editorial .btn-ghost:hover{border-color:var(--ink);background:rgba(243,237,230,.06)}
.L-editorial .nav .btn{min-height:38px;padding:0 18px}

/* ---- hero: the cut ---- */
.L-editorial .hero{position:relative;padding:0;margin-top:calc(-1 * var(--nav));min-height:max(640px,calc(100svh - 32px));display:flex;flex-direction:column;
  isolation:isolate;overflow:hidden;color:var(--ink);background:#0A0807}
.L-editorial .hero-media{position:absolute;inset:0;margin:0;z-index:-2;container:hero/size}
/* the still frames as the canvas's first frame: the build writes the hero's drive-0 camera (C1) */
.L-editorial .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:calc(var(--ox,.5) * 100%) calc(var(--oy,.5) * 100%)}
html.motion .L-editorial .hero-img{transform:scale(var(--z0,1));transform-origin:calc(var(--ox,.5) * 100%) calc(var(--oy,.5) * 100%)}
@container hero (aspect-ratio < 10/11){
  .L-editorial .hero-img{object-position:calc(var(--oxt,.5) * 100%) calc(var(--oyt,.5) * 100%)}
  html.motion .L-editorial .hero-img{transform-origin:calc(var(--oxt,.5) * 100%) calc(var(--oyt,.5) * 100%)}
}
/* the hero's grade and vignette, over the still and the canvas alike */
html.motion .L-editorial .hero-media::before,html.motion .L-editorial .hero-media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
html.motion .L-editorial .hero-media::before{background:linear-gradient(180deg,rgba(20,14,10,.35),rgba(0,0,0,.25));mix-blend-mode:soft-light}
html.motion .L-editorial .hero-media::after{background:radial-gradient(circle farthest-corner at 50% 50%,rgba(0,0,0,0) 34%,rgba(0,0,0,.55) 132%)}
.L-editorial .hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(180deg,rgba(10,8,7,.66) 0,rgba(10,8,7,.3) 14%,rgba(10,8,7,0) 26%),
  linear-gradient(0deg,rgba(10,8,7,.92) 0,rgba(10,8,7,.72) 34%,rgba(10,8,7,.3) 54%,rgba(10,8,7,0) 68%),
  linear-gradient(90deg,rgba(10,8,7,.55) 0,rgba(10,8,7,0) 48%)}
.L-editorial .hero-in{position:relative;flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:40px;
  padding-top:calc(var(--nav) + clamp(28px,5vh,56px));padding-bottom:clamp(24px,4vh,44px)}
.L-editorial .hero-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,22rem);column-gap:clamp(24px,3vw,48px);align-items:end}
/* the headline is sized so its long second line and the side column share the row without touching (7.5 = the
   measured width of "than you came in." in Bodoni Moda, in ems); below 1200 px the side column drops under it */
.L-editorial .hero h1{grid-column:1;grid-row:1;font-size:min(clamp(3.1rem,.6rem + 8vw,11.5rem),calc((min(1320px,100vw - 2 * var(--gut)) - 26rem) / 7.5));
  line-height:.86;letter-spacing:-.03em;font-variation-settings:"opsz" 96}
.L-editorial .hero h1 .l1,.L-editorial .hero h1 .l2{display:block}
/* the rising-word mask: .26em below the line box so Bodoni's descenders (the y of "you", the g of "lighter") are not cut;
   the negative margin gives the room back, so the lines sit exactly where they did */
.L-editorial .hero .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .06em .26em 0;margin:0 -.06em -.26em 0}
.L-editorial .hero .w>span{display:inline-block}
.L-editorial .hero-side{grid-column:2;grid-row:1;align-self:end;padding-bottom:.4rem}
.L-editorial .hero-sub{margin:0 0 22px;font-size:1.08rem;line-height:1.55;max-width:44ch;color:color-mix(in srgb,var(--ink) 88%,var(--muted))}
.L-editorial .hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
.L-editorial .hero .facts{position:relative;background:var(--glass);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  border-top:1px solid var(--glass-line)}
.L-editorial .facts .wrap{display:grid;grid-template-columns:1fr 1fr 1.5fr}
.L-editorial .facts .wrap>div{display:flex;flex-direction:column;gap:5px;min-width:0;padding:16px 24px 18px;border-left:1px solid var(--glass-line)}
.L-editorial .facts .wrap>div:first-child{padding-left:0;border-left:0}
.L-editorial .facts span{font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.L-editorial .facts b{font:600 1rem/1.3 var(--sans)}
/* the phone number never breaks (Q9); today's hours and the address still wrap */
.L-editorial .facts .wrap>div:nth-child(2) b{white-space:nowrap}
.L-editorial .facts i{font:500 10.5px/1.2 var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.L-editorial .facts i:empty{display:none}
html.motion .L-editorial .hero-in{transform:translate3d(0,calc(var(--hp,0) * -6vh),0);opacity:calc(1 - var(--hp,0) * .75)}
.L-editorial .hero-in{pointer-events:none}
.L-editorial .hero-in .eyebrow,.L-editorial .hero-in h1,.L-editorial .hero-in .hero-side{pointer-events:auto}
@media (max-width:1199px){
  .L-editorial .hero-main{grid-template-columns:1fr}
  .L-editorial .hero h1{font-size:min(clamp(3.1rem,1.1rem + 9.4vw,11.5rem),calc((100vw - 2 * var(--gut)) / 7.7))}
  .L-editorial .hero-side{grid-column:1;grid-row:2;align-self:start;padding:26px 0 0;display:grid;grid-template-columns:minmax(0,44ch) auto;gap:16px 40px;align-items:end}
  .L-editorial .hero-sub{margin:0}
  /* below 1200: hero-sized gradients whose only edges are the photo's own (C4) */
  .L-editorial .hero::after{background:
    linear-gradient(180deg,rgba(10,8,7,.66) 0,rgba(10,8,7,0) 22%),
    linear-gradient(0deg,rgba(10,8,7,.94) 0,rgba(10,8,7,.86) 44%,rgba(10,8,7,.68) 60%,rgba(10,8,7,.3) 72%,rgba(10,8,7,0) 84%),
    radial-gradient(120% 55% at 0% 72%,rgba(10,8,7,.45) 0,rgba(10,8,7,0) 70%)}
  /* ...and a full-bleed fade anchored to the headline (>= .72 at its top line), no edges of its own */
  .L-editorial .hero-main{position:relative}
  .L-editorial .hero-main::before{content:"";position:absolute;z-index:-1;left:-100vw;right:-100vw;top:-22vh;bottom:-100vh;pointer-events:none;
    background:linear-gradient(180deg,rgba(10,8,7,0) 0,rgba(10,8,7,.42) 11vh,rgba(10,8,7,.72) 22vh,rgba(10,8,7,.8) calc(22vh + 9rem))}
}
@media (max-width:899px){.L-editorial .hero-side{grid-template-columns:1fr}}
@media (max-width:860px){.L-editorial .facts .wrap{padding-right:72px}}
@media (max-width:759px){
  .L-editorial .hero{min-height:max(600px,calc(100svh - 56px))}
  .L-editorial .hero-in{gap:24px;justify-content:flex-end}
  .L-editorial .hero .eyebrow{display:none}
  /* salon-spa.md 14: 54 px at 390, 48 px at 320; line two breaks "than you / came in." rather than orphaning "in." */
  .L-editorial .hero h1{font-size:clamp(3rem,13.6vw,4.2rem)}
  .L-editorial .hero h1 .l2{text-wrap:balance}
  .L-editorial .facts .wrap{grid-template-columns:1fr}
  .L-editorial .facts .wrap>div{display:grid;grid-template-columns:4.6rem minmax(0,1fr);align-items:baseline;gap:10px;padding:10px 0;border-left:0;border-top:1px solid var(--glass-line)}
  .L-editorial .facts .wrap>div:first-child{border-top:0}
  .L-editorial .facts b{font-size:.95rem}
  .L-editorial .facts i{display:none}
}
/* narrow phones: the buttons stack full width but stop short of the chat launcher's corner */
@media (max-width:479px){.L-editorial .hero-ctas{padding-right:72px}
  /* a three-line demo bar above a 600 px hero pushed the phone number under the fold at 320x640 (Q9) */
  .L-editorial .hero{min-height:max(540px,calc(100svh - 64px))}.L-editorial .hero-ctas .btn{flex:1 1 100%;padding:0 12px}
  /* today and the phone share one row; the address is in Visit */
  .L-editorial .facts .wrap>div:nth-child(3){display:none}
  .L-editorial .facts .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:16px}
  .L-editorial .facts .wrap>div{display:flex;flex-direction:column;gap:5px;border-top:0}
  .L-editorial .facts .wrap>div+div{border-left:1px solid var(--glass-line);padding-left:16px}
  .L-editorial .hero-in{padding-bottom:18px}
  .L-editorial .hero-side{padding-top:18px}
  .L-editorial .hero-sub{font-size:1rem}}
/* 320 px: the phone number ends clear of the chat launcher (Q9) */
@media (max-width:359px){.L-editorial .facts b{font-size:.86rem}}
@media (prefers-reduced-motion:no-preference){
  .L-editorial .nav{animation:e-fade .4s ease both}
  .L-editorial .hero .w>span{animation:e-rise .9s var(--ease) both;animation-delay:calc(150ms + var(--i,0) * 90ms)}
  .L-editorial .hero .eyebrow,.L-editorial .hero-side{animation:e-up .7s var(--ease) .6s both}
  .L-editorial .hero .facts{animation:e-fade .7s ease .8s both}
}
/* the words wait (<= 700 ms) for their face (C2) */
html.motion:not(.f-in) .L-editorial .hero .w>span{animation-play-state:paused}
@keyframes e-rise{from{transform:translateY(150%)}to{transform:none}}
@keyframes e-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes e-fade{from{opacity:0}to{opacity:1}}

/* ---- the story: One visit. Four stations. ---- */
.L-editorial .story{position:relative;padding:var(--sec) 0 0}
.L-editorial .story-head{width:min(1320px,100% - 2 * var(--gut));margin:0 auto clamp(48px,7vw,104px)}
.L-editorial .story-head h2{max-width:13ch;margin:14px 0 22px}
.L-editorial .story-head .lede{max-width:46ch}
/* stacked: no JS, reduced motion, ?static, short windows - every chapter with its own photo */
.L-editorial .story-pin{width:min(1320px,100% - 2 * var(--gut));margin:0 auto;padding-bottom:var(--sec);display:grid;gap:clamp(64px,9vw,136px)}
.L-editorial .chapter{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col);align-items:start}
.L-editorial .chapter>*{grid-column:5/-1;max-width:40rem}
.L-editorial .ch-media{grid-column:1/-1;grid-row:1;max-width:none;margin:0 0 32px;display:grid}
.L-editorial .ch-media>*{grid-area:1/1}
.L-editorial .ch-img{margin:0}
.L-editorial .ch-img img{width:100%;height:min(62vh,660px);object-fit:cover;border-radius:4px}
.L-editorial .ch-num{grid-column:1/5;grid-row:2/span 6;align-self:start;margin-top:-.02em;font:italic 400 clamp(5rem,2.4rem + 13vw,16rem)/.8 var(--serif);
  font-variation-settings:"opsz" 96;letter-spacing:-.005em;color:transparent;-webkit-text-stroke:1px rgba(214,223,134,.75);
  /* the numeral fills with --ss (D2) */
  background:linear-gradient(0deg,rgba(214,223,134,.16) calc(var(--ss,0) * 100%),rgba(214,223,134,.05) 0);-webkit-background-clip:text;background-clip:text}
@media (min-width:900px){.L-editorial .ch-num{-webkit-text-stroke:1.25px rgba(214,223,134,.8)}}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){.L-editorial .ch-num{background:none;color:rgba(214,223,134,.05)}}
.L-editorial .ch-label{margin:10px 0 12px;font:500 11.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--highlight)}
.L-editorial .chapter h3{margin:0 0 18px;font-size:clamp(2rem,1.2rem + 3.2vw,4.2rem);line-height:.95;font-optical-sizing:auto}
/* optical margins (G2) */
.L-editorial .hero h1,.L-editorial .story-head h2,.L-editorial .sec-head h2,.L-editorial .chapter h3,.L-editorial .about h2{margin-left:-.035em}
.L-editorial .hero h1{margin-left:-.015em}
@media (max-width:759px){.L-editorial h2,.L-editorial .chapter h3{font-weight:440}}
.L-editorial .chapter>p:not([class]){margin:0;font-size:1.12rem;line-height:1.55;max-width:40ch;color:color-mix(in srgb,var(--ink) 88%,var(--muted))}
/* facts as a spec strip (D5) */
.L-editorial .ch-facts{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:28px 0 24px;padding:0;
  border-block:1px solid var(--glass-line);background:rgba(14,12,11,.5)}
.L-editorial .ch-facts li{position:relative;min-width:0;padding:14px 16px 12px;border-left:1px solid var(--glass-line)}
.L-editorial .ch-facts li:first-child{border-left:0;padding-left:0}
.L-editorial .ch-facts .lbl{text-wrap:balance}
.L-editorial .ch-facts .num{display:block;font:500 1.8rem/1 var(--serif);font-variant-numeric:proportional-nums;letter-spacing:-.01em;white-space:nowrap}
.L-editorial .num[data-count],.L-editorial .cu-anim{font-variant-numeric:tabular-nums}
.L-editorial .ch-facts .lbl{display:block;margin-top:7px;font:500 10px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.L-editorial .ch-link{justify-self:start;width:max-content;padding:2px 0 5px;font:500 .95rem/1.2 var(--sans);color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--accent);transition:color .2s}
.L-editorial .ch-link::after{content:"\2192";display:inline-block;margin-left:.3em;color:var(--accent);transition:transform .25s var(--ease)}
.L-editorial .ch-link:hover::after{transform:translateX(4px)}
.L-editorial .ch-link:hover{color:var(--accent)}
/* one tag component for every photo (Q6): the AI mark and a photographer's credit share weight, case and tracking.
   Stacked, it sits at the TOP of its photo and rides under the nav while any of the photo shows, so no part of a
   picture is on screen before its label, scrolling either way (T2-4). Its sticky box is the photo's own (.ch-media, no
   bigger than the photo), so it leaves WITH the photo and never rides onto the chapter's copy (R3-T1: Chrome holds a
   sticky grid item in the whole chapter, not in its row). Pinned, the stage places it (below) */
.L-editorial .ch-tag{justify-self:start;align-self:start;position:sticky;top:calc(var(--nav) + 12px);z-index:1;max-width:none;
  margin:14px 0 12px 14px;padding:6px 10px;border-radius:4px;background:rgba(14,12,11,.72);border:1px solid var(--glass-line);
  font:500 10px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 70%,var(--muted))}
.L-editorial .rail{display:none}
@media (max-width:899px){
  .L-editorial .chapter>*{grid-column:1/-1}
  .L-editorial .ch-num{grid-row:auto;font-size:clamp(4.2rem,18vw,7rem);margin:0 0 4px}
}
/* pinned: one stage, chapters cross-fade over it */
/* --head (set by the engine) = the intro block's height, added so every chapter keeps its full share of pinned travel */
.L-editorial .story.pinned{height:calc(var(--vh,4.4) * 100svh + var(--head,0px));padding-top:0;
  --pin-scrim:linear-gradient(180deg,var(--bg) 0,rgba(14,12,11,0) 9%),
  linear-gradient(0deg,var(--bg) 0,rgba(14,12,11,0) 12%),
  linear-gradient(90deg,rgba(10,8,7,.9) 0,rgba(10,8,7,.8) 30%,rgba(10,8,7,.56) 46%,rgba(10,8,7,0) 70%),
  linear-gradient(270deg,rgba(10,8,7,.62) 0,rgba(10,8,7,0) 22%),
  linear-gradient(0deg,rgba(10,8,7,.6) 0,rgba(10,8,7,0) 36%)}
.L-editorial .story.pinned .story-head{margin-bottom:0;padding:var(--sec) 0 clamp(56px,9vh,110px)}
.L-editorial .story.pinned .story-pin{position:sticky;top:0;height:100svh;width:auto;margin:0;padding:0;display:block;overflow:hidden;background:#0A0807}
.L-editorial .story.pinned .stage{position:absolute;inset:0;z-index:0}
.L-editorial .story.pinned .story-pin::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--pin-scrim)}
.L-editorial .story.pinned .chapter{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:var(--nav) var(--gut) 0 max(var(--gut),calc((100vw - 1320px) / 2));opacity:0;pointer-events:none;transition:opacity .3s ease}
.L-editorial .story.pinned .chapter.on{opacity:1;pointer-events:auto;transition:opacity .6s ease}
/* the copy arrives in --k order from the travel direction (data-dir) and leaves the other way (.out) - D2 */
.L-editorial .story.pinned .chapter>*:not(.ch-media){max-width:min(36rem,44vw);opacity:0;transform:translate3d(0,calc(-1 * var(--out,-16px)),0);
  transition:opacity .25s ease,transform .45s var(--ease)}
.L-editorial .story.pinned[data-dir="up"]{--out:16px}
.L-editorial .story.pinned .chapter.out>*:not(.ch-media){transform:translate3d(0,var(--out,-16px),0)}
.L-editorial .story.pinned .chapter.on>*:not(.ch-media){opacity:1;transform:none;
  transition:opacity .6s ease calc(var(--k,0) * 60ms),transform .8s var(--ease) calc(var(--k,0) * 60ms)}
/* as the arch opens the outgoing copy steps back - a filter, so no lag; never the Illustrative tag (D1) */
.L-editorial .story.pinned .chapter.on:not(:last-of-type)>*:not(.ch-media){filter:opacity(clamp(0,(.95 - var(--ss,0)) * 8,1))}
/* the lamps go down before the story lets go (D3) */
.L-editorial .story.pinned .story-pin::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--bg);
  opacity:clamp(0,(var(--sp,0) - .94) * 16,.85)}
/* a chapter's own <img> is its stage until the engine has put a picture on the canvas (.has-stage); a chapter whose
   photo could not be loaded (.no-photo) keeps it - the browser's broken-image box and alt text, never another
   chapter's photo. Behind the text, under the same scrim as the canvas. */
/* pinned, the photo's box steps aside: the chapter stays the containing block of the photo and of its tag */
.L-editorial .story.pinned .ch-media{display:contents}
.L-editorial .story.pinned .ch-img{position:absolute;inset:0;z-index:-1;margin:0;max-width:none;background:#0A0807}
.L-editorial .story.pinned .ch-img img{width:100%;height:100%;border-radius:0}
.L-editorial .story.pinned .ch-img::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--pin-scrim)}
.L-editorial .story.pinned.has-stage .chapter:not(.no-photo) .ch-img{inset:auto;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* the photo failed: its box takes the photo's place beside (desktop) / above (tablet) / below (phone) the copy, with no
   scrim over it, so the browser's broken-image mark and the alt text can be read; its credit tag goes (no photo shown) */
.L-editorial .story.pinned .chapter.no-photo .ch-img{inset:calc(var(--nav) + 24px) var(--gut) 24px 56%;background:none}
.L-editorial .story.pinned .chapter.no-photo .ch-img::after{display:none}
.L-editorial .story.pinned .chapter.no-photo .ch-img img{color:var(--muted);font:400 .95rem/1.5 var(--sans)}
.L-editorial .story.pinned .chapter.no-photo .ch-tag{display:none}
@media (max-width:1023px){.L-editorial .story.pinned .chapter.no-photo .ch-img{inset:calc(var(--nav) + 40px) var(--gut) 55% var(--gut)}}
.L-editorial .story.pinned .ch-num{font-size:clamp(5rem,min(2.4rem + 13vw,26vh),16rem);margin:0 0 .08em -.04em}
.L-editorial .story.pinned .chapter>.ch-facts{max-width:min(40rem,58vw);align-self:stretch}
@media (min-width:760px){.L-editorial .story.pinned .ch-facts{margin-left:-14px}.L-editorial .story.pinned .ch-facts li:first-child{padding-left:14px}}
.L-editorial .story.pinned .ch-tag{position:absolute;right:var(--gut);left:auto;top:calc(var(--nav) + 26px);bottom:auto;margin:0;z-index:auto;
  transition:opacity .25s ease,transform .3s var(--ease)}
/* the credit travels with the picture (T2-1/Q1): while the arch hands over, the incoming photo's own tag shows as soon as
   that photo is on the stage (the engine marks its chapter .handover), stacked under the outgoing tag while both photos
   show (.tag-both); once the outgoing photo is all but gone its tag goes and the incoming one takes the slot (.tag-swap) */
/* ... frame for frame (R3-T3): while the canvas has a picture no chapter fades as a whole - only its copy does (above) -
   and a tag shows exactly while the engine reports its photo on the stage: .staged for the photo the canvas drew, .handover
   for the one coming in under the arch. No fade, so a fast scroll never shows one photo under another's credit. Without the
   canvas, the chapters' own photos cross-fade and their tags with them */
.L-editorial .story.pinned.has-stage .chapter:not(.no-photo){opacity:1;transition:none}
.L-editorial .story.pinned.has-stage .chapter:not(.no-photo) .ch-tag{opacity:0;transition:transform .3s var(--ease)}
.L-editorial .story.pinned.has-stage .chapter.staged:not(.no-photo) .ch-tag,.L-editorial .story.pinned.has-stage .chapter.handover:not(.no-photo) .ch-tag{opacity:1}
.L-editorial .story.pinned.tag-both .chapter.handover .ch-tag{transform:translateY(calc(100% + 8px))}
.L-editorial .story.pinned.has-stage.tag-swap .chapter.staged:not(.handover) .ch-tag{opacity:0}
.L-editorial .story.pinned .rail{display:flex;flex-direction:column;align-items:flex-end;gap:14px;position:absolute;z-index:3;right:var(--gut);top:50%;transform:translateY(-50%);counter-reset:rail}
/* the rail's own soft plate, so its labels and marker never sit bare on a bright part of the photo */
.L-editorial .story.pinned .rail::before{content:"";position:absolute;z-index:-1;inset:-44px -32px -44px -80px;pointer-events:none;
  background:radial-gradient(farthest-side at 62% 50%,rgba(10,8,7,.7) 45%,rgba(10,8,7,0))}
/* ...and each row carries its own halo, so a lit lamp or a bright nail cannot swallow a numeral or a leader line (Q5) */
.L-editorial .story.pinned .rail button{text-shadow:0 0 8px rgba(10,8,7,.85)}
.L-editorial .story.pinned .rail button::after{box-shadow:0 0 6px rgba(10,8,7,.8)}
.L-editorial .rail button{counter-increment:rail;display:flex;align-items:center;gap:12px;padding:5px 0;background:none;border:0;cursor:pointer;
  font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 75%,var(--muted));transition:color .3s}
.L-editorial .rail button::before{content:counter(rail,decimal-leading-zero);color:var(--muted)}
.L-editorial .rail button::after{content:"";order:-1;width:22px;height:1px;background:currentColor;transition:width .35s var(--ease),background .35s}
.L-editorial .rail button:hover,.L-editorial .rail button[aria-current]{color:var(--ink)}
.L-editorial .rail button[aria-current]::after{width:44px;background:linear-gradient(90deg,var(--accent) calc(var(--ss,0) * 100%),rgba(243,237,230,.3) 0)}
@media (max-width:1023px){
  .L-editorial .story.pinned .chapter{justify-content:flex-end;padding-bottom:96px}
  .L-editorial .story.pinned{--pin-scrim:
    linear-gradient(180deg,var(--bg) 0,rgba(14,12,11,0) 9%),
    linear-gradient(0deg,rgba(10,8,7,.94) 0,rgba(10,8,7,.8) 42%,rgba(10,8,7,.34) 64%,rgba(10,8,7,0) 78%),
    linear-gradient(90deg,rgba(10,8,7,.45) 0,rgba(10,8,7,0) 60%)}
  .L-editorial .rail button{font-size:0;gap:0}
  .L-editorial .rail button::before{font-size:11px;margin-left:10px}
}
@media (max-width:759px){
  /* phones: each chapter a page - the whole photo in a band, the copy on ebony below, pinned or stacked (D4) */
  .L-editorial .story.pinned{--band:clamp(56.25vw,calc(100svh - 452px),80vw);
    --pin-scrim:linear-gradient(180deg,rgba(14,12,11,0) calc(var(--nav) + 34px + var(--band) - 56px),var(--bg) calc(var(--nav) + 34px + var(--band)))}
  .L-editorial .story.pinned .stage{top:calc(var(--nav) + 34px);bottom:auto;height:var(--band)}
  .L-editorial .story.pinned .chapter{justify-content:flex-start;padding:calc(var(--nav) + 34px + var(--band)) var(--gut) 0}
  .L-editorial .story.pinned .ch-num,.L-editorial .ch-num{font-size:4.4rem;margin:-.5em 0 0 -.04em;position:relative;z-index:1}
  .L-editorial .story:not(.pinned) .ch-media{margin:0}
  .L-editorial .story:not(.pinned) .ch-img{margin:0 calc(-1 * var(--gut)) 0}
  /* the numeral overlaps the photo's foot here: the tag stops above it */
  .L-editorial .story:not(.pinned) .ch-tag{margin-bottom:46px}
  .L-editorial .story:not(.pinned) .ch-img img{height:auto;border-radius:0}
  .L-editorial .story.pinned .rail::before{display:none}
  .L-editorial .story.pinned .chapter>*:not(.ch-media){max-width:100%}
  .L-editorial .chapter h3{font-size:clamp(2.2rem,9vw,3rem)}
  .L-editorial .chapter>p:not([class]){font-size:1rem}
  .L-editorial .ch-facts{margin:18px 0 18px;background:transparent}
  .L-editorial .ch-facts li{padding:10px 10px 9px}
  .L-editorial .ch-facts .num{font-size:1.5rem}
  .L-editorial .ch-facts .lbl{font-size:9.5px;letter-spacing:.1em}
  /* 34 px tall targets (T2-5) around the same 2 px bar, which stays where it was (nav + 19 px) */
  .L-editorial .story.pinned .rail{flex-direction:row;align-items:stretch;gap:6px;left:var(--gut);right:var(--gut);top:calc(var(--nav) + 2px);transform:none}
  .L-editorial .story.pinned .rail button{flex:1;height:34px;padding:0;font-size:0;gap:0}
  .L-editorial .story.pinned .rail button::before{display:none}
  .L-editorial .story.pinned .rail button::after{order:0;width:100%;height:2px;background:rgba(243,237,230,.25)}
  .L-editorial .story.pinned .rail button:has(~ [aria-current])::after{background:var(--accent)}
  .L-editorial .story.pinned .rail button[aria-current]::after{width:100%;background:linear-gradient(90deg,var(--accent) calc(var(--ss,0) * 100%),rgba(243,237,230,.25) 0)}
  .L-editorial .story.pinned .ch-tag{top:calc(var(--nav) + 44px);bottom:auto;left:auto;right:var(--gut)}
  /* a failed photo's box takes the band; its words at the top, clear of the numeral that overlaps the band's foot */
  .L-editorial .ch-img .img-alt{top:16px;bottom:auto}
  .L-editorial .story.pinned .chapter.no-photo .ch-img{inset:calc(var(--nav) + 34px) 0 auto 0;height:var(--band)}
}

/* a photo that could not load (BH-2): its frame keeps a dark ground and says in words what was there, never the
   browser's bare broken-image glyph; the <img> stays (with its alt) but is not painted */
.L-editorial .img-failed{background:var(--surface)}
.L-editorial .img-failed>img{opacity:0}
.L-editorial .story:not(.pinned) .ch-img.img-failed{position:relative}
.L-editorial .story.pinned .chapter.no-photo .ch-img.img-failed{background:var(--surface);border:1px solid var(--glass-line)}
.L-editorial .img-alt{position:absolute;z-index:2;left:16px;right:16px;bottom:16px;margin:0;font:500 10.5px/1.5 var(--mono);letter-spacing:.06em;color:var(--muted);text-wrap:pretty}
.L-editorial .inset .img-alt{bottom:auto;top:16px}
/* the arch's words sit just under its semicircle, clear of the inset that overlaps its foot */
.L-editorial .arch .img-alt{bottom:auto;top:calc(50cqw + 12px);left:12%;right:12%}
/* no photo shown, so no credit or Illustrative mark for it */
.L-editorial .chapter:has(.img-failed) .ch-tag,.L-editorial .arch-fig:has(.img-failed) .ph-tag{display:none}
/* pinned, the failed frame leaves room for the chapter rail and the chat launcher */
@media (min-width:1024px){.L-editorial .story.pinned .chapter.no-photo .ch-img{inset:calc(var(--nav) + 24px) calc(var(--gut) + 220px) 104px 50%}}

/* ---- prices: the menu, in chair time ---- */
.L-editorial .prices .sec-head h2 em{display:block;margin-top:.22em;font-size:max(24px,.44em);line-height:1;letter-spacing:-.01em}
.L-editorial .menu{display:grid;grid-template-columns:1fr;gap:clamp(56px,6vw,88px) clamp(40px,5vw,96px)}
@media (min-width:1360px){.L-editorial .menu{grid-template-columns:1fr 1fr}}
/* fixed time and price tracks: every block's bar column has the same geometry, so one chair-time scale holds for
   the whole menu (a max-content track would give each block its own px-per-minute) */
.L-editorial .block{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(64px,1fr) 3.2rem 6.4rem 36px;column-gap:14px;align-content:start}
html:not(.js) .L-editorial .block{grid-template-columns:minmax(0,1.6fr) minmax(64px,1fr) 3.2rem 7.4rem}
.L-editorial .bh{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:14px}
.L-editorial .bh h3{font-size:2.2rem;line-height:1}
.L-editorial .bc{margin:0;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.L-editorial .bc span:first-child{color:var(--ink)}
.L-editorial .bc .bl{display:none}
.L-editorial .axis{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:end;height:22px;margin-bottom:6px}
.L-editorial .ticks{grid-column:2;position:relative;height:100%;border-bottom:1px solid var(--track)}
.L-editorial .ticks span{position:absolute;bottom:6px;left:calc(var(--t) * 100%);transform:translateX(-50%);font:400 10px/1 var(--mono);color:var(--muted)}
.L-editorial .ticks span:first-child{transform:none}
.L-editorial .ticks span:last-child{transform:translateX(-100%)}
.L-editorial .axis .unit{grid-column:3;align-self:end;padding-bottom:6px;font:400 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.L-editorial .row{grid-column:1/-1;display:grid;grid-template-columns:subgrid;grid-template-areas:"n b t p a";align-items:center;min-height:56px;padding:8px 0;
  border-top:1px solid var(--line);transition:background .2s}
.L-editorial .row:last-child{border-bottom:1px solid var(--line)}
.L-editorial .row:hover{background:rgba(243,237,230,.04)}
.L-editorial .row b{grid-area:n;font:500 1rem/1.3 var(--sans);padding-right:6px;transition:color .2s}
.L-editorial .row .bar{grid-area:b;height:7px;transform-origin:left center;transition:transform .7s cubic-bezier(.25,1,.5,1);
  background:linear-gradient(var(--accent),var(--accent)) left center/calc(var(--m) / var(--max,180) * 100%) 3px no-repeat,
             linear-gradient(var(--track),var(--track)) left center/100% 1px no-repeat}
.L-editorial .row .t{grid-area:t;font:400 12px/1 var(--mono);letter-spacing:.04em;color:var(--muted);text-align:right;white-space:nowrap}
.L-editorial .row .p{grid-area:p;min-width:4.6rem;font:500 1.5rem/1 var(--serif);font-variant-numeric:proportional-nums;color:var(--accent);text-align:right;white-space:nowrap}
/* "from" as a small qualifier (the engine wraps it) */
.L-editorial .p-from{font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-right:.35em;vertical-align:.35em}
.L-editorial .row .p.is-free{font-style:italic}
.L-editorial .row.is-picked b{color:var(--accent)}
/* a picked row: one linden rule, clear of the name */
.L-editorial .row{position:relative}
.L-editorial .row.is-picked::before{content:"";position:absolute;left:-12px;top:12px;bottom:12px;width:2px;background:var(--accent)}
html.js-rv .L-editorial .block:not(.in) .bar{transform:scaleX(0)}
/* headings rise from a mask on reveal (G4) */
html.js-rv .L-editorial :is(.sec-head,.story-head,.ask-text,.about-text,.visit-text).rv h2{clip-path:inset(-20% -5% -30% -5%);transition:clip-path .9s var(--ease),transform .9s var(--ease)}
html.js-rv .L-editorial :is(.sec-head,.story-head,.ask-text,.about-text,.visit-text).rv:not(.in) h2{clip-path:inset(-20% -5% 100% -5%);transform:translateY(.3em)}
/* the bar's needle */
.L-editorial .row .bar{position:relative}
.L-editorial .row .bar::after{content:"";position:absolute;top:50%;left:calc(var(--m) / var(--max,180) * 100%);width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--accent)}
.L-editorial .row:nth-child(4) .bar{transition-delay:35ms}.L-editorial .row:nth-child(5) .bar{transition-delay:70ms}
.L-editorial .row:nth-child(6) .bar{transition-delay:105ms}.L-editorial .row:nth-child(7) .bar{transition-delay:140ms}
.L-editorial .row:nth-child(8) .bar{transition-delay:175ms}.L-editorial .row:nth-child(9) .bar{transition-delay:210ms}
.L-editorial .add{grid-area:a;display:none;width:36px;height:36px;align-items:center;justify-content:center;padding:0;border-radius:4px;
  border:1px solid rgba(243,237,230,.28);background:transparent;color:var(--ink);font-size:0;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s}
/* the glyph turns from + to x; the square itself stays square */
.L-editorial .add::before{content:"+";font:300 20px/1 var(--sans);transition:transform .25s var(--ease)}
.L-editorial .add[aria-pressed="true"]::before{transform:rotate(45deg)}
html.js .L-editorial .add{display:inline-flex}
.L-editorial .add{border-color:transparent}
.L-editorial .row:hover .add,.L-editorial .add:focus-visible,.L-editorial .add[aria-pressed="true"]{border-color:rgba(243,237,230,.28)}
@media (pointer:coarse){.L-editorial .add{border-color:rgba(243,237,230,.16)}}
.L-editorial .add:hover{border-color:var(--accent);color:var(--accent)}
.L-editorial .add[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
/* the + springs back (E3) */
.L-editorial .add{transition:background .2s,border-color .2s,color .2s,transform .3s cubic-bezier(.3,1.7,.5,1)}
.L-editorial .add:active{transform:scale(.9);transition-duration:.08s}
/* landings clear the nav even before a block reveals; focused rows clear the launcher (E1) */
html.js-rv .L-editorial .rv:not(.in)[id]{scroll-margin-top:calc(var(--nav) + 16px + var(--rv-y,28px))}
/* ... and of the shortlist tray, its fade and its 16 px foot while it shows (R3-T2: the engine sets --tray-h) */
.L-editorial .row,.L-editorial .add{scroll-margin-bottom:max(96px,calc(var(--tray-h,0px) + 72px))}
/* ... and of the sticky nav above: Shift+Tab never leaves a focused row or tray control under it (R4-NEW-2) */
.L-editorial .row,.L-editorial .add,.L-editorial .shortlist button{scroll-margin-top:calc(var(--nav) + 16px)}
.L-editorial .price-note{text-wrap:balance;margin:clamp(32px,4vw,48px) 0 0;max-width:70ch;font:400 12px/1.6 var(--mono);letter-spacing:.03em;color:var(--muted)}
@media (max-width:759px){
  .L-editorial .block,html:not(.js) .L-editorial .block{display:block}
  .L-editorial .bc .bl{display:inline}
  .L-editorial .axis{display:none!important}
  .L-editorial .row{grid-template-columns:3.4rem minmax(0,1fr) auto 44px;grid-template-areas:"n n n a" "t b p a";column-gap:10px;row-gap:8px;padding:14px 0}
  html:not(.js) .L-editorial .row{grid-template-columns:3.4rem minmax(0,1fr) auto;grid-template-areas:"n n n" "t b p"}
  .L-editorial .row .t{text-align:left}
  .L-editorial .bh{flex-direction:column;align-items:flex-start;gap:10px}
  .L-editorial .add{width:44px;height:44px}
}
/* the shortlist: each chosen row as listed - never a total. The tray covers WHOLE rows - one full column when the menu
   has two, the full width below that - so no price is ever cut in half beside it, and the rows around it dissolve
   under a full-width fade instead of ending at its edge (Q2). Its right end clears the chat launcher inside .sl-act. */
.L-editorial .shortlist{position:sticky;bottom:16px;z-index:20;margin:32px 0 0}
/* the fade reaches past the wrap to both screen edges; the section clips it (clip is not a scroll container, so the
   tray stays sticky, and a phone's layout viewport never widens to fit it) */
.L-editorial .prices{overflow-x:clip}
.L-editorial .shortlist::before{content:"";position:absolute;z-index:-1;inset:-48px -100vw -16px;pointer-events:none;
  background:linear-gradient(rgba(14,12,11,0),var(--bg) 48px)}
/* two columns: the tray is exactly the right one; the left column's rows beside it are whole and stay readable */
@media (min-width:1360px){.L-editorial .shortlist{width:calc((100% - clamp(40px,5vw,96px)) / 2);margin-left:auto}
  .L-editorial .shortlist::before{left:-24px;right:-24px}}
.L-editorial .sl-in{padding:18px 20px 16px;border-radius:4px;
  background:rgba(23,20,19,.9);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border:1px solid rgba(214,223,134,.25);
  box-shadow:0 24px 60px rgba(0,0,0,.5)}
.L-editorial .shortlist[hidden]{display:none}
.L-editorial .shortlist{transition:opacity .3s,transform .35s var(--ease),display .35s allow-discrete}
@starting-style{.L-editorial .shortlist{opacity:0;transform:translateY(16px)}}
.L-editorial .sl-n{margin:0 auto 0 12px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
/* the count in the menu's own number style ('05 SERVICES'): an italic Bodoni 1 read as a slash (Q4) */
.L-editorial .sl-n .n{font:500 12px/1 var(--mono);letter-spacing:.12em;color:var(--accent);vertical-align:0}
.L-editorial .vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.L-editorial .sl-list li.new{animation:e-up .28s var(--ease) both}
.L-editorial .sl-x{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin:-6px -6px -6px 0;padding:0;border:0;border-radius:4px;
  background:none;color:var(--muted);font:300 18px/1 var(--sans);cursor:pointer;align-self:center}
.L-editorial .sl-x:hover,.L-editorial .sl-x:focus-visible{color:var(--ink);background:rgba(243,237,230,.06)}
.L-editorial .sl-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}
.L-editorial .sl-t{margin:0;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--highlight)}
/* phones only: the tray is a bar (title + Request these) until the visitor opens the list (salon-spa.md 14) */
.L-editorial .sl-tog{display:none;min-height:36px;padding:0 12px;border-radius:4px;border:1px solid rgba(243,237,230,.28);background:transparent;
  font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);cursor:pointer}
.L-editorial .sl-list{list-style:none;margin:0;padding:0;max-height:34vh;overflow:auto}
.L-editorial .sl-list li{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:14px;align-items:baseline;padding:7px 0;border-top:1px solid var(--line);font-size:.95rem}
.L-editorial .sl-list li:first-child{border-top:0}
.L-editorial .sl-list .sl-p{font:500 1.5rem/1 var(--serif);font-variant-numeric:proportional-nums;color:var(--accent);white-space:nowrap}
.L-editorial .sl-list .sl-time{font:400 11.5px/1 var(--mono);color:var(--muted);white-space:nowrap}
.L-editorial .sl-note{margin:10px 0 14px;font-size:.84rem;line-height:1.45;color:var(--muted)}
.L-editorial .sl-act{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-right:72px}
.L-editorial .sl-clear{background:none;border:0;padding:6px 0;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.L-editorial .sl-clear:hover{color:var(--ink)}
/* 320 px: the count drops under the title beside the toggle, and the two actions share a row clear of the launcher */
@media (max-width:359px){
  .L-editorial .sl-head{display:grid;grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
  .L-editorial .sl-t{grid-column:1;grid-row:1}
  .L-editorial .sl-n{grid-column:1;grid-row:2;margin:0}
  .L-editorial .sl-tog{grid-column:2;grid-row:1/span 2}
  .L-editorial .sl-act{gap:14px;padding-right:64px}
  .L-editorial .sl-go{padding:0 14px}}
@media (max-width:759px){
  .L-editorial .sl-in{padding:12px 16px}
  .L-editorial .sl-tog{display:inline-block}
  .L-editorial .shortlist:not(.open) .sl-body{display:none}
  .L-editorial .sl-list{max-height:30vh}
  .L-editorial .sl-list li{grid-template-columns:minmax(0,1fr) auto auto;row-gap:2px}
  .L-editorial .sl-list .sl-time{grid-column:1;grid-row:2}
  .L-editorial .sl-x{grid-column:3;grid-row:1/span 2}
  .L-editorial .sl-note{font-size:.78rem;margin:8px 0 10px}
}

/* ---- the assistant band and its mirror ---- */
.L-editorial .ask{background:var(--soft)}
.L-editorial .ask .wrap,.L-editorial .about .wrap,.L-editorial .visit .wrap,.L-editorial .faq .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col)}
.L-editorial .ask .wrap{align-items:center}
.L-editorial .ask-text{grid-column:1/7}
.L-editorial .ask h2{margin:14px 0 24px}
.L-editorial .ask-text>p{max-width:46ch;margin:0 0 28px;color:var(--ink);font-size:1.05rem}
.L-editorial .ask-fallback{margin:18px 0 0;padding:12px 16px;border-radius:4px;border-left:2px solid var(--highlight);
  background:color-mix(in srgb,var(--highlight) 16%,var(--soft));color:var(--ink);font-weight:500}
.L-editorial .ask-fallback[hidden]{display:none}
.L-editorial .mirror{grid-column:8/13;position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--glass-line);container-type:inline-size;
  aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:flex-end;
  border-radius:50% 50% 18px 18px/40% 40% 18px 18px;padding:clamp(120px,13vw,200px) clamp(20px,2.4vw,36px) clamp(24px,2.4vw,36px)}
/* a lamplit apex (G1) */
.L-editorial .mirror::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,226,180,.16),rgba(255,226,180,0)) 50% 6%/58% 34% no-repeat,radial-gradient(120% 60% at 50% 0%,rgba(214,223,134,.08),transparent 60%);
  animation:e-breath 9s ease-in-out infinite}
/* sheens inside a brass hairline */
.L-editorial .mirror::after{content:"";position:absolute;inset:10px;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(217,164,124,.32);
  border-radius:calc(50cqw - 10px) calc(50cqw - 10px) 8px 8px;
  background:linear-gradient(115deg,transparent 18%,rgba(243,237,230,.05) 24%,transparent 31%,transparent 36%,rgba(243,237,230,.03) 39%,transparent 44%)}
.L-editorial .mirror-mark{position:absolute;left:0;right:0;top:clamp(44px,6vw,84px);margin:0;text-align:center;pointer-events:none;
  font:italic 400 clamp(2rem,1rem + 2.4vw,3.2rem)/1 var(--serif);color:rgba(243,237,230,.16);letter-spacing:-.01em}
.L-editorial .mirror-hint{position:relative;margin:0 0 14px;font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
@keyframes e-breath{0%,100%{opacity:.7}50%{opacity:1}}
.L-editorial .chips{position:relative;display:flex;flex-direction:column;gap:10px}
.L-editorial .chip{display:flex;align-items:baseline;gap:14px;width:100%;padding:16px 18px;text-align:left;cursor:pointer;border-radius:4px;
  border:1px solid var(--glass-line);background:color-mix(in srgb,var(--ink) 6%,var(--surface));color:var(--ink);font:500 1rem/1.35 var(--sans);
  transition:border-color .2s,background .2s}
.L-editorial .chip::before{content:"Q.";flex:none;font:500 11px/1 var(--mono);letter-spacing:.1em;color:var(--highlight)}
.L-editorial .chip:hover{border-color:rgba(214,223,134,.45);background:color-mix(in srgb,var(--ink) 10%,var(--surface))}
@media (max-width:900px){
  .L-editorial .ask-text,.L-editorial .mirror{grid-column:1/-1}
  /* a true semicircle, in px (G1) */
  .L-editorial .mirror{--r:calc((100vw - 2 * var(--gut)) / 2);margin-top:48px;aspect-ratio:auto;border-radius:var(--r) var(--r) 18px 18px;padding-top:calc(var(--r) + 12px)}
  .L-editorial .mirror-mark{top:calc(var(--r) * .42)}
}

/* ---- about: the arch, the kit, the house notes ---- */
.L-editorial .about .wrap{align-items:center}
.L-editorial .about-media{grid-column:1/6;position:relative;padding-bottom:clamp(48px,6vw,96px)}
/* a 4:5 box: 40% of the height is half the width, so the top is a true semicircle (the salon mirror) */
.L-editorial .arch-fig{position:relative;margin:0}
.L-editorial .arch{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--surface);border-radius:50% 50% 18px 18px/40% 40% 18px 18px;
  container-type:inline-size}
/* the lantern hangs inside the apex (B5); the grade is in the file */
.L-editorial .arch img{display:block;width:100%;height:112%;object-fit:cover;object-position:18% 0;transform:translate3d(0,calc(var(--py,0px) - .8%),0)}
/* the lantern's bloom moves with the photo and breathes (killed by html.rm) */
.L-editorial .arch::before{content:"";position:absolute;z-index:1;left:28.8%;top:7.6%;width:18%;aspect-ratio:1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,226,180,.11),rgba(255,226,180,0));mix-blend-mode:screen;transform:translate3d(0,var(--py,0px),0);
  animation:e-breath 9s ease-in-out infinite}
/* a foot fade only */
.L-editorial .arch::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent 78%,var(--bg))}
/* brass hairline, 10 px in */
.L-editorial .arch-rim{position:absolute;inset:10px;z-index:1;pointer-events:none;border:1px solid rgba(217,164,124,.32);
  border-radius:calc(50cqw - 10px) calc(50cqw - 10px) 8px 8px}
/* the photo rises into the arch on reveal; the mark is never hidden without JS */
html.js-rv .L-editorial .arch-fig.rv{opacity:1;transform:none}
html.js-rv .L-editorial .arch-fig .arch{clip-path:inset(0 round 50% 50% 18px 18px/40% 40% 18px 18px);transition:clip-path 1.1s var(--ease)}
html.js-rv .L-editorial .arch-fig:not(.in) .arch{clip-path:inset(100% 0 0 0 round 50% 50% 18px 18px/40% 40% 18px 18px)}
/* the mark arrives with the first of the photo, never after it (T2-4) */
html.js-rv .L-editorial .arch-fig .ph-tag{transition:opacity .25s ease}
html.js-rv .L-editorial .arch-fig:not(.in) .ph-tag{opacity:0}
/* the Illustrative mark: the same chip as the chapter tags, under the arch's left foot - and sticky to the viewport's
   foot, so while any of the arch is on screen its mark is too, scrolling down (it rides up over the arch until it
   settles under the foot) or up (it is already there) (T2-4). Left-aligned within 56 %, clear of the inset photo. */
.L-editorial .ph-tag{position:sticky;bottom:16px;z-index:2;width:max-content;max-width:calc(56% - 12px);margin:12px 0 0;padding:6px 10px;border-radius:4px;
  background:rgba(14,12,11,.72);border:1px solid var(--glass-line);font:500 10px/1.35 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ink) 70%,var(--muted))}
.L-editorial .ph-tag b,.L-editorial .ch-tag.is-ai b{font-weight:500;color:var(--accent)}
/* narrow: 'Illustrative' / 'AI-generated' - the separator never starts a line (Q12); the text is unchanged */
@media (max-width:479px){.L-editorial .ph-tag b{display:block}.L-editorial .ph-tag .sep{display:none}}
.L-editorial .inset{position:absolute;right:-14%;bottom:0;z-index:1;width:44%;margin:0}
.L-editorial .inset img{width:100%;aspect-ratio:3/4;object-fit:cover;border:6px solid var(--bg);border-radius:4px}
.L-editorial .inset figcaption,.L-editorial .notes-h{display:flex;align-items:center;gap:12px;font:500 10.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.L-editorial .inset figcaption{margin:10px 0 0 6px;color:var(--muted)}
.L-editorial .inset figcaption::before{content:"";width:24px;height:1px;background:var(--accent);flex:none}
/* narrow: the caption balances onto two lines with no orphan, no leader rule (Q12) */
@media (max-width:479px){.L-editorial .inset figcaption{display:block;margin-left:0;letter-spacing:.08em;text-wrap:balance}.L-editorial .inset figcaption::before{display:none}}
.L-editorial .about-text{grid-column:7/13}
.L-editorial .about h2{margin:14px 0 22px;font-size:clamp(2rem,1rem + 3vw,3.8rem);line-height:1}
.L-editorial .notes-h{margin:44px 0 10px;color:var(--highlight);font-size:11.5px}
.L-editorial .policies{list-style:none;margin:0;padding:0;counter-reset:pol}
.L-editorial .policies li{counter-increment:pol;display:grid;grid-template-columns:3rem minmax(0,1fr);gap:12px;padding:15px 0;border-top:1px solid var(--line);font-size:.98rem;line-height:1.55}
.L-editorial .policies li:last-child{border-bottom:1px solid var(--line)}
.L-editorial .policies li::before{content:counter(pol,decimal-leading-zero);font:500 11.5px/1.9 var(--mono);letter-spacing:.1em;color:var(--highlight)}
@media (max-width:900px){
  .L-editorial .about-media,.L-editorial .about-text{grid-column:1/-1}
  .L-editorial .about-media{max-width:520px;margin-bottom:56px}
  .L-editorial .inset{right:0;width:42%}
}

/* ---- faq ---- */
.L-editorial .faq{background:var(--soft)}
.L-editorial .faq .sec-head{grid-column:1/5;grid-template-columns:1fr;align-self:start;position:sticky;top:calc(var(--nav) + 32px)}
.L-editorial .faq .sec-head h2{font-size:clamp(2.4rem,1rem + 3.6vw,4.6rem)}
.L-editorial .faq-list{grid-column:5/13;border-bottom:1px solid var(--line)}
.L-editorial .faq-list details{border-top:1px solid var(--line)}
.L-editorial .faq-list summary{position:relative;display:block;list-style:none;cursor:pointer;padding:26px 60px 26px 0;
  font:400 clamp(1.5rem,1rem + 1.4vw,2.2rem)/1.15 var(--serif);letter-spacing:0;transition:color .2s}
.L-editorial .faq-list summary::-webkit-details-marker{display:none}
.L-editorial .faq-list summary::before,.L-editorial .faq-list summary::after{content:"";position:absolute;right:0;top:50%;width:28px;height:1px;background:var(--accent);
  transition:transform .3s var(--ease)}
.L-editorial .faq-list summary::after{transform:rotate(90deg)}
.L-editorial .faq-list details[open] summary::after{transform:rotate(0deg)}
.L-editorial .faq-list summary:hover{color:#FFFFFF}
.L-editorial .faq-list details p{margin:0 0 28px;max-width:60ch;color:var(--muted);font-size:1.05rem}
@supports (interpolate-size:allow-keywords){
  .L-editorial{interpolate-size:allow-keywords}
  .L-editorial .faq-list details::details-content{height:0;overflow:clip;transition:height .4s var(--ease),content-visibility .4s allow-discrete}
  .L-editorial .faq-list details[open]::details-content{height:auto}
}
@media (max-width:1023px){.L-editorial .faq .sec-head,.L-editorial .faq-list{grid-column:1/-1;position:static}}

/* ---- visit ---- */
.L-editorial .visit .wrap{align-items:start}
.L-editorial .visit-text{grid-column:1/7}
.L-editorial .visit h2{margin:14px 0 26px}
.L-editorial .open-days{position:relative;margin:0 0 10px;font:400 clamp(2.2rem,1.2rem + 3vw,4rem)/1 var(--serif);letter-spacing:-.015em}
.L-editorial .open-days .num{position:relative;font-style:italic;font-weight:400;color:var(--accent)}
.L-editorial .open-now{margin:0 0 26px;min-height:1em;font:500 11.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.L-editorial .contact-lines{display:grid;gap:8px;color:var(--muted);max-width:48ch}
.L-editorial .contact-lines b{color:var(--ink);font-weight:500}
.L-editorial .hours-wrap{grid-column:8/13}
.L-editorial .hours{width:100%;border-collapse:collapse;font:400 13px/1.4 var(--mono);letter-spacing:.04em}
.L-editorial .hours th,.L-editorial .hours td{padding:15px 0;border-top:1px solid var(--line);text-align:left;font-weight:400}
.L-editorial .hours tr:last-child th,.L-editorial .hours tr:last-child td{border-bottom:1px solid var(--line)}
.L-editorial .hours th{width:42%;font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.L-editorial .hours td{text-align:right;color:var(--ink)}
.L-editorial .hours tr.is-closed td{font:italic 400 1rem/1.2 var(--sans);color:var(--muted)}
.L-editorial .hours tr.today th{color:var(--ink);box-shadow:inset 2px 0 0 var(--accent);padding-left:14px}
.L-editorial .hours tr.today th::after{content:"today";margin-left:10px;font-size:10.5px;letter-spacing:.14em;color:var(--highlight)}
@media (max-width:900px){.L-editorial .visit-text,.L-editorial .hours-wrap{grid-column:1/-1}.L-editorial .hours-wrap{margin-top:40px}}

/* ---- book ---- */
.L-editorial .visit{padding-bottom:var(--sec-join)}
.L-editorial .visit + .book-sec{padding-top:var(--sec-join)}
.L-editorial .visit + .book-sec>.wrap{border-top:1px solid var(--line);padding-top:var(--sec-join)}
.L-editorial .book-sec .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col);align-items:start}
.L-editorial .book-sec .sec-head{grid-column:1/6;grid-template-columns:1fr;position:sticky;top:calc(var(--nav) + 32px);margin:0}
.L-editorial .book-sec .sec-head .lede{margin-top:6px}
.L-editorial form.book{grid-column:7/13;padding:clamp(22px,3vw,40px);background:var(--surface);border:1px solid var(--line);border-radius:4px}
.L-editorial .field{display:grid;gap:8px;margin-bottom:24px}
.L-editorial .field label{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.L-editorial .field input,.L-editorial .field select,.L-editorial .field textarea{font:400 1rem/1.4 var(--sans);color:var(--ink);background:transparent;border:0;
  border-bottom:1px solid var(--muted);border-radius:0;padding:10px 0;color-scheme:dark;outline:none;transition:border-color .2s,box-shadow .2s}
.L-editorial .field input:focus,.L-editorial .field select:focus,.L-editorial .field textarea:focus{border-bottom-color:var(--accent);box-shadow:0 1px 0 var(--accent)}
.L-editorial .field select option{background:var(--surface);color:var(--ink)}
.L-editorial .two{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.L-editorial form.book .btn{margin-top:4px}
.L-editorial .demo-note{display:none;margin:20px 0 0;padding:14px 16px;border-radius:4px;border-left:2px solid var(--highlight);
  background:color-mix(in srgb,var(--highlight) 18%,var(--surface));font-size:.95rem;outline:none}
.L-editorial .demo-note.show{display:block}
.L-editorial .form-foot{margin:18px 0 0;font:400 11px/1.5 var(--mono);letter-spacing:.03em;color:var(--muted)}
@media (max-width:1023px){.L-editorial .book-sec .sec-head{grid-column:1/-1;position:static;margin-bottom:40px}.L-editorial form.book{grid-column:1/-1;max-width:760px}}
@media (max-width:559px){.L-editorial .two{grid-template-columns:1fr;gap:0}}

/* ---- footer (dark) ---- */
.L-editorial footer{padding:clamp(56px,7vw,100px) 0 0;border-top:1px solid var(--line);background:var(--bg);color:var(--muted);font-size:.92rem;overflow:clip}
.L-editorial footer .cols{display:grid;grid-template-columns:1.1fr 1fr 1.6fr;gap:40px}
.L-editorial footer h3{margin:0 0 14px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.L-editorial footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.L-editorial footer a{color:inherit;text-underline-offset:3px}
.L-editorial footer a:hover{color:var(--ink)}
.L-editorial .credits li{font:400 11px/1.55 var(--mono);letter-spacing:.02em}
.L-editorial .made{margin:52px 0 0;padding:20px 0;border-top:1px solid var(--line)}
@media (min-width:1024px){.L-editorial footer .credits{display:block;column-count:2;column-gap:32px}.L-editorial footer .credits li{break-inside:avoid;margin-bottom:8px}}
/* the back page's signature (decorative) */
.L-editorial .sig{margin:clamp(48px,6vw,96px) 0 -.18em;padding:0 var(--gut);font:italic 400 clamp(3rem,17vw,18rem)/.8 var(--serif);
  font-variation-settings:"opsz" 96;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px rgba(243,237,230,.14);white-space:nowrap;overflow:clip;
  pointer-events:none;user-select:none}
@media (max-width:860px){.L-editorial footer .cols{grid-template-columns:1fr}}

/* ---- the scissors cursor (drawn by the engine; ENGINE-SPEC 4.8) ---- */
.L-editorial .cur{position:fixed;left:0;top:0;width:0;height:0;z-index:2147482000}
.L-editorial .cur-scissors .cur-i{position:absolute;left:-17px;top:-17px;width:34px;height:34px;overflow:visible;transform:rotate(-40deg) scale(1.1);transition:transform .3s var(--ease)}
.L-editorial .cur-scissors.is-hover .cur-i{transform:rotate(-40deg) scale(1.35)}
/* over a linden control the rings would vanish into it: they turn near-black there */
.L-editorial .cur-scissors.on-accent .ring{fill:#0A0807;fill-opacity:.25;stroke:#0A0807}
.L-editorial .cur-scissors.on-accent .arm{stroke:#0A0807}
.L-editorial .cur-scissors.on-accent .blade{fill:#0A0807;stroke:var(--accent)}
.L-editorial .cur-scissors .bl-a,.L-editorial .cur-scissors .bl-b{transition:transform .18s ease}
.L-editorial .cur-scissors .bl-a{transform:rotate(-6deg)}
.L-editorial .cur-scissors .bl-b{transform:rotate(6deg)}
.L-editorial .cur-scissors.is-hover .bl-a{transform:rotate(-1.5deg);transition-duration:.14s}
.L-editorial .cur-scissors.is-hover .bl-b{transform:rotate(1.5deg);transition-duration:.14s}
.L-editorial .cur-scissors.is-press .bl-a,.L-editorial .cur-scissors.is-press .bl-b{transform:rotate(0deg);transition-duration:.09s}
/* a real snip on press (F1) */
.L-editorial .cur-scissors.is-snip .bl-a{animation:e-snip-a .26s cubic-bezier(.3,1.3,.5,1)}
.L-editorial .cur-scissors.is-snip .bl-b{animation:e-snip-b .26s cubic-bezier(.3,1.3,.5,1)}
.L-editorial .cur-scissors.is-press .cur-i{transform:rotate(-40deg) scale(1.01)}
.L-editorial .cur-scissors.is-press.is-hover .cur-i{transform:rotate(-40deg) scale(1.24)}
@keyframes e-snip-a{0%{transform:rotate(-1.5deg)}25%{transform:rotate(2deg)}45%{transform:rotate(0)}100%{transform:rotate(-6deg)}}
@keyframes e-snip-b{0%{transform:rotate(1.5deg)}25%{transform:rotate(-2deg)}45%{transform:rotate(0)}100%{transform:rotate(6deg)}}
/* ink blades and linden rings, each outlined in near-black so the pair reads on the dark page AND on a linden button */
.L-editorial .cur-scissors .blade{fill:var(--ink);stroke:#0A0807;stroke-width:1;paint-order:stroke;stroke-linejoin:round}
.L-editorial .cur-scissors .ring{fill:var(--accent);fill-opacity:.35;stroke:var(--accent);stroke-width:2}
.L-editorial .cur-scissors .arm{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round}
.L-editorial .cur-scissors .pivot{fill:var(--accent);stroke:#0A0807;stroke-width:1.2}
.L-editorial .cur-scissors .cur-i{filter:none}
.L-editorial .cur-scissors .bl-a,.L-editorial .cur-scissors .bl-b{transform-origin:17px 20.2px}
.L-editorial .cur-l{position:absolute;left:26px;top:-11px;height:22px;padding:0 10px;border-radius:999px;background:var(--accent);color:var(--accent-ink);
  font:500 11px/22px var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translateX(-6px);
  transition:opacity .2s,transform .25s var(--ease)}
.L-editorial .cur.is-hover .cur-l:not(:empty){opacity:1;transform:none}
.L-editorial .cur.on-accent .cur-l{background:#0A0807;color:var(--accent)}

/* ---- film grain (the engine paints one noise tile; ENGINE-SPEC 4.9) ---- */
.L-editorial.grain::after{content:"";position:fixed;inset:-50%;z-index:2147481000;pointer-events:none;background-image:var(--noise);background-size:140px 140px;
  opacity:var(--grain,.035);animation:e-grain 1.2s steps(6) infinite}
.L-editorial.grain-static::after{animation:none}
/* the grain holds while a full-screen canvas runs (D6) */
.L-editorial.grain-hold::after{animation-play-state:paused}
@keyframes e-grain{0%{transform:translate3d(0,0,0)}17%{transform:translate3d(-4%,-7%,0)}33%{transform:translate3d(6%,3%,0)}
  50%{transform:translate3d(-7%,5%,0)}67%{transform:translate3d(3%,-6%,0)}83%{transform:translate3d(-3%,8%,0)}100%{transform:translate3d(0,0,0)}}

/* ---- reduced motion (and ?static): nothing moves, nothing is hidden ---- */
html.rm .L-editorial *,html.rm .L-editorial *::before,html.rm .L-editorial *::after{animation:none!important;transition:none!important}
html.rm .L-editorial .hero-in{transform:none!important;opacity:1!important}