@font-face{font-family:"avana Serif";src:url("../fonts/avana-serif.woff2?v=4073a8db19") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"avana Serif";src:url("../fonts/avana-serif-italic.woff2?v=4257d4cfa1") format("woff2");font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:"Geologica";src:url("../fonts/geologica.woff2?v=e60a90e9ac") format("woff2");font-weight:300 600;font-style:normal;font-display:swap}

:root{
  --ink:#162F2A; --pine:#015240; --gold:#C9A66B; --sand:#EFE7D3; --white:#FFFFFF; --black:#000000;
  --serif:"avana Serif","Libre Baskerville",Baskerville,Georgia,serif;
  --sans:"Geologica","Avenir Next","Segoe UI",system-ui,sans-serif;
  --header-h:64px;
  --grain:url("../img/grain.webp?v=f9a66446f0");
  color-scheme:dark;
}
@media (min-width:1200px){:root{--header-h:80px}}
*{box-sizing:border-box}
html{scroll-padding-top:var(--header-h)}
body{margin:0;background:var(--ink);color:var(--sand);font:400 18px/1.6 var(--sans);-webkit-text-size-adjust:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--sand);color:var(--ink);padding:10px 14px;border-radius:8px;font-weight:500}
.skip:focus{top:12px}

/* Header: one variant everywhere. Solid Ink with the same fine grain as the hero, a quiet gold hairline,
   the flat filed lockup. */
.site-header{position:sticky;top:0;z-index:30;height:var(--header-h);background:var(--ink) var(--grain);background-size:128px;border-bottom:1px solid rgba(201,166,107,.18)}
@media (max-height:500px){.site-header{position:static}}
.site-header .in{height:100%;max-width:1320px;margin-inline:auto;padding-inline:16px;display:flex;align-items:center;gap:20px}
@media (min-width:768px){.site-header .in{padding-inline:32px}}
.lockup{display:block;height:44px;flex:none}
.lockup img{height:100%;width:auto;display:block}
@media (min-width:1200px){.lockup{height:52px}}
.nav{display:none;margin-inline-start:auto;gap:26px;align-items:center;font:400 15px var(--sans)}
.nav a:not(.btn){text-decoration:none;color:var(--sand)}
.nav a:not(.btn):hover{color:var(--white)}
@media (min-width:1200px){.nav{display:flex}}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;font:500 16px var(--sans);letter-spacing:.01em;text-decoration:none;cursor:pointer;border:0}
/* Quiet on dark grounds: a gold hairline that fills with Sand on hover or focus. */
.btn-line{background:transparent;color:var(--sand);border:1px solid var(--gold);transition:background .2s,color .2s}
.btn-line:hover,.btn-line:focus-visible{background:var(--sand);color:var(--ink)}
/* In the desktop header the call to action is a text link (as on phones), so the hero's pill is the only one. */
.nav .btn-line{min-height:44px;padding:0 4px;font-size:15px;border:0;background:none;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:6px;text-decoration-thickness:1px}
.nav .btn-line:hover,.nav .btn-line:focus-visible{background:none;color:var(--white)}
.actions .btn-line{min-height:52px;padding:0 30px}
/* Reduce motion: a text control with a shape cue (hollow dot off, filled dot on), not colour alone. */
.toggle{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;border:0;background:transparent;color:var(--sand);font:400 14px var(--sans);cursor:pointer;opacity:.85}
.toggle:hover{opacity:1}
[data-motion-toggle]::before{content:"";display:inline-block;width:10px;height:10px;margin-inline-end:8px;border-radius:50%;border:1.5px solid currentColor;box-sizing:border-box}
[data-motion-toggle][aria-pressed="true"]::before{background:currentColor}
/* Under the device's own reduce-motion setting the control is on and fixed: no pointer, and it says why. */
[data-motion-toggle]:disabled{cursor:default}
[data-motion-toggle]:disabled::after{content:"(device setting)";font-size:.85em;margin-inline-start:.35em}
.compact{display:flex;margin-inline-start:auto;gap:4px;align-items:center}
.compact a,.compact button{font:500 15px var(--sans);text-decoration:none;color:var(--sand);background:none;border:0;padding:12px 10px;min-height:44px;cursor:pointer}
.compact a{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:6px;text-decoration-thickness:1px}
.compact [data-menu]::before{content:"";display:inline-block;width:16px;height:7px;margin-inline-end:8px;border-block:1.5px solid currentColor;vertical-align:1px}
@media (min-width:1200px){.compact{display:none}}

/* Screen 01: the hallmark */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:calc(100vh - var(--header-h));min-height:calc(100svh - var(--header-h));display:flex;align-items:center;padding-block:clamp(24px,4vh,40px) clamp(32px,5vh,52px)}
/* The lamp pool sits on the mark and moves with the light (page.js sets --mx/--my/--mw and --dx/--dy). It fades
   out before the header hairline, so there is no seam. */
.hero .pool{position:absolute;inset:0;z-index:-2;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 clamp(56px,9vh,96px));mask-image:linear-gradient(to bottom,transparent,#000 clamp(56px,9vh,96px));background:radial-gradient(circle at calc(var(--mx,50%) + var(--dx,.3) * var(--mw,260px)) calc(var(--my,30%) + var(--dy,-.3) * var(--mw,260px)),rgba(201,166,107,.12),rgba(201,166,107,.04) 18%,transparent 42%)}
.hero .grain{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--grain);background-size:128px}
.hero .in{width:100%;max-width:1120px;margin-inline:auto;padding-inline:16px;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero .copy{display:flex;flex-direction:column;align-items:center;width:100%}
/* The mark is always smaller than the text block, so text is the LCP at every width: 180 px squared is below the
   smallest phone H1 (about 34,400 px). Tablets never get a smaller mark than phones. */
.mark{position:relative;width:min(48vw,30vh,180px);aspect-ratio:1/1;flex:none;margin-bottom:clamp(36px,6vh,64px)}
@media (min-width:768px){.mark{width:min(34vh,300px,max(22vw,180px))}}
.mark>*{position:absolute;inset:0;width:100%;height:100%;display:block}
.mark .still img{width:100%;height:100%;display:block}
.mark canvas{visibility:hidden}
.eyebrow{margin:0 0 clamp(12px,1.6vh,18px);font:500 13px/1.5 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);text-wrap:balance;padding-inline-start:.24em}
.hero h1{margin:0 0 clamp(20px,2.6vh,28px);font:400 clamp(36px,4.6vw,64px)/1.12 var(--serif);text-wrap:balance;max-width:18ch;color:var(--sand)}
/* One text block (so the H1 stays a single LCP candidate), broken by phrase: phrases never split. From tablet
   width the second line ("and the family beside them.") is held together, so the headline is two lines. */
.hero h1 .ph{white-space:nowrap}
@media (min-width:768px){.hero h1{max-width:none}.hero h1 .ph-wide{white-space:nowrap}}
.hero h1 .br-wide{display:none}
@media (min-width:768px){.hero h1 .br-wide{display:inline}}
@media (max-width:767px){.hero h1{font-size:clamp(32px,9.2vw,36px)}}
.lede{margin:0 0 clamp(28px,4vh,40px);max-width:40ch;font-size:clamp(18px,1.5vw,20px);line-height:1.6;color:rgba(239,231,211,.88)}
.actions{display:flex;flex-direction:column;align-items:center;gap:12px}
/* Short phone screens (Safari with its toolbars showing): keep the button above the fold. */
@media (max-width:767px) and (max-height:720px){
  /* 21svh, not 24, and 16 px under the lede, not 20 (20 Oct 2026): the lede gained "resident in India" and a line on small phones */
  .mark{width:min(48vw,21svh,180px);margin-bottom:clamp(20px,3svh,32px)}
  .eyebrow{margin-bottom:8px}
  .hero h1{margin-bottom:14px}
  .lede{margin-bottom:16px}
}
@media (max-width:767px) and (max-height:600px){
  .hero{padding-block:16px 20px}
  .mark{width:min(40vw,20svh,120px);margin-bottom:16px}
  .hero h1{font-size:clamp(28px,8.4vw,32px);margin-bottom:10px}
  .lede{font-size:16px;line-height:1.5;margin-bottom:16px}
}
/* Phones held sideways: the mark beside the words, so the button stays on screen. */
@media (orientation:landscape) and (max-height:500px){
  .hero{padding-block:16px}
  .hero .in{flex-direction:row;align-items:center;justify-content:center;gap:clamp(24px,5vw,56px);text-align:left}
  .mark{width:min(34vw,52svh,160px);margin:0}
  .hero .copy{align-items:flex-start;width:auto;max-width:52ch}
  .eyebrow{margin-bottom:6px;padding-inline-start:0}
  .hero h1{font-size:clamp(26px,4.4vw,34px);margin-bottom:10px;max-width:none}
  .lede{font-size:16px;line-height:1.5;margin-bottom:14px;max-width:46ch}
  .actions{align-items:flex-start}
  .actions .btn-line{min-height:46px}
}
/* Laptop windows (a 1440x900 screen minus the browser's own bars, or 1280x720): the same, on wide screens. */
@media (min-width:768px) and (max-height:860px){
  .mark{width:min(30vh,300px,max(22vw,180px));margin-bottom:clamp(24px,4vh,40px)}
  .hero h1{font-size:clamp(36px,min(4.6vw,7.6vh),64px)}
}

/* Ground B: Sand (the guide's light-ground colourway) */
[data-ground="sand"] .hero{background:var(--sand);color:var(--ink)}
[data-ground="sand"] .hero h1{color:var(--ink)}
[data-ground="sand"] .hero .lede{color:#2E4640}
[data-ground="sand"] .hero .eyebrow{color:var(--pine)}
[data-ground="sand"] .hero .grain{opacity:.6}
[data-ground="sand"] .hero .pool{background:radial-gradient(circle at calc(var(--mx,50%) + var(--dx,.3) * var(--mw,260px)) calc(var(--my,30%) + var(--dy,-.3) * var(--mw,260px)),rgba(201,166,107,.10),rgba(201,166,107,.03) 20%,transparent 44%)}
[data-ground="sand"] .hero .btn-line{background:var(--pine);color:var(--white);border-color:var(--pine)}
[data-ground="sand"] .hero .btn-line:hover,[data-ground="sand"] .hero .btn-line:focus-visible{background:var(--ink);border-color:var(--ink)}
[data-ground="sand"] .hero :focus-visible{outline-color:var(--pine)}
/* The header on Sand: one surface with the hero (the same grain strength), the filed light-ground lockup, Ink
   text, a pine hairline. */
[data-ground="sand"] body{background:var(--sand);color:var(--ink)}
[data-ground="sand"] .site-header{background:linear-gradient(rgba(239,231,211,.4),rgba(239,231,211,.4)),var(--grain) 0 0/128px,var(--sand);border-bottom-color:rgba(1,82,64,.18)}
[data-ground="sand"] .site-header .nav a:not(.btn),[data-ground="sand"] .site-header .toggle,[data-ground="sand"] .compact a,[data-ground="sand"] .compact button{color:var(--ink)}
[data-ground="sand"] .compact a{text-decoration-color:var(--pine)}
[data-ground="sand"] .site-header .btn-line{color:var(--ink);text-decoration-color:var(--pine)}
[data-ground="sand"] .site-header .btn-line:hover,[data-ground="sand"] .site-header .btn-line:focus-visible{color:var(--pine)}
[data-ground="sand"] .site-header :focus-visible{outline-color:var(--pine)}

/* North sweep: clockwise from just west of north (-5.2deg) about the compass centre (50%, 52.70%), with a
   feathered leading edge that trails behind the sweep angle, so nothing shows before it starts.
   - Unanimated, --sweep is 370deg: the mark is complete (no motion setting, or animations switched off).
   - The mask stays on after the sweep, at 370deg, which is fully opaque (the feather ends at 361deg). Never drop
     it with a separate mask-image:none step: WebKit applies such a step during its delay and shows the whole
     mark at once, and in a keyframe of the sweep itself it would flip halfway (discrete properties do). */
@property --sweep{syntax:'<angle>';inherits:false;initial-value:370deg}
@keyframes sweep{from{--sweep:0deg}to{--sweep:370deg}}
@media (prefers-reduced-motion:no-preference){
  @supports ((mask-image:conic-gradient(#000,#000)) or (-webkit-mask-image:conic-gradient(#000,#000))){
    html:not(.calm) .mark .still,html:not(.calm) .mark.live canvas{
      -webkit-mask-image:conic-gradient(from -5.2deg at 50% 52.7%,#000 calc(var(--sweep) - 9deg),transparent var(--sweep));
      mask-image:conic-gradient(from -5.2deg at 50% 52.7%,#000 calc(var(--sweep) - 9deg),transparent var(--sweep))}
    /* Still path: pure CSS, scheduled at 2.5 s so the mark appears even if JavaScript fails. */
    html:not(.calm) .mark .still{animation:sweep 1.4s cubic-bezier(.45,.05,.55,.95) 2.5s both}
    html:not(.calm) .mark.live canvas{animation:sweep 1.4s cubic-bezier(.45,.05,.55,.95) both}
  }
}
.mark.live .still{display:none}
.mark.live canvas{visibility:visible}

/* Menu: a modal dialog sheet */
dialog.sheet{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;border:0;padding:16px;background:var(--ink) var(--grain);background-size:128px;color:var(--sand);display:none;flex-direction:column;gap:8px;overflow:auto;overscroll-behavior:contain}
html:has(dialog.sheet[open]){overflow:hidden}
dialog.sheet[open]{display:flex}
dialog.sheet::backdrop{background:var(--ink)}
.sheet .top{display:flex;justify-content:space-between;align-items:center;min-height:48px}
.sheet nav{display:flex;flex-direction:column}
.sheet nav a{display:block;padding:14px 4px;font:400 22px var(--serif);text-decoration:none;border-bottom:1px solid rgba(239,231,211,.12)}
.sheet .contact{display:flex;flex-direction:column;gap:6px;padding-block:14px;font-size:18px}
.sheet .btn-line{align-self:flex-start}

/* Review bar: Stage 1 only, never ships */
.review{position:fixed;inset-inline:0;bottom:0;z-index:35;display:none;justify-content:center;gap:8px;flex-wrap:wrap;padding:10px 12px;background:rgba(10,20,18,.92);border-top:1px solid rgba(201,166,107,.35);font:500 14px var(--sans)}
html.reviewing .review{display:flex}
html.reviewing .hero{padding-bottom:calc(clamp(32px,5vh,52px) + 64px)}
@media (max-width:767px){.review span{display:none}}
.review span{align-self:center;color:rgba(239,231,211,.7);margin-inline-end:6px}
.review button{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid rgba(239,231,211,.35);background:transparent;color:var(--sand);font:inherit;cursor:pointer}
.review a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid rgba(239,231,211,.35);color:var(--sand);text-decoration:none}
.review a[aria-current="true"]{background:var(--gold);color:#0F201C;border-color:var(--gold)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* Screen 06, round 7: "The fitted case". On Sand, like the homepage. Tier 0 (the default, and phones without 3D):
   the plate is a still of the finished case at the head of the section and the steps follow in plain flow. Live
   (.is-live): the plate sticks under the header, the case is drawn in it, and the words pass beneath. The plate holds
   no controls (Reduce motion is in the header and the menu, away from a scrolling thumb). */
:root{--j-plate-h:clamp(260px,42svh,400px)}
.s06{position:relative;background:var(--sand);color:var(--ink);padding-block:clamp(56px,9svh,104px) 0}
.s06 .j-sizer{position:absolute;left:0;top:0;width:1px;height:var(--j-plate-h);visibility:hidden;pointer-events:none}
.s06 .j-svh{position:absolute;left:0;top:0;width:1px;height:100svh;visibility:hidden;pointer-events:none}
.j-intro{padding-inline:var(--gutter,24px);max-width:720px;margin-inline:auto}
.j-intro h2{margin:0 0 10px;font:400 clamp(30px,7.4vw,40px)/1.15 var(--serif);text-wrap:balance;color:var(--ink)}
.j-label{margin:0 0 6px;font:400 13px/1.5 var(--sans);color:rgba(22,47,42,.78)}
.j-skip{display:inline-block;min-height:44px;line-height:44px;font:500 15px var(--sans);color:var(--pine);text-decoration:underline;text-underline-offset:5px}
.j-track{position:relative}
.j-stage{margin-top:12px}
.j-plate{position:relative;height:var(--j-plate-h);max-width:720px;margin-inline:auto;overflow:hidden}
.j-poster,.j-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.j-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;visibility:hidden}
.j-mark{position:absolute;left:0;top:0;z-index:2;font:400 21px/1 var(--serif);color:var(--pine);white-space:nowrap;padding-right:12px;opacity:0;pointer-events:none;will-change:transform,opacity}
.j-steps{list-style:none;margin:0 auto;padding:0 var(--gutter,24px);max-width:720px}
.j-step{padding-block:28px 40px}
.j-num{display:block;font:400 30px/1 var(--serif);color:var(--pine)}
.j-step h3{margin:10px 0 10px;font:400 24px/1.25 var(--serif);text-wrap:balance;color:var(--ink)}
.j-step p,.j-pane p,.j-lead{margin:0 0 10px;font:300 16.5px/1.72 var(--sans);max-width:34ch;color:var(--ink)}
.j-step .j-tag{margin-top:4px;font:500 12.5px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--pine)}
.j-prog{padding:48px var(--gutter,24px) 8px;max-width:720px;margin-inline:auto}
.j-eyebrow{margin:0 0 12px;font:500 13px/1.5 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--pine)}
.j-prog h2{margin:0 0 12px;font:400 clamp(28px,7vw,36px)/1.15 var(--serif);text-wrap:balance;color:var(--ink)}
.j-pane{padding-block:24px 32px}
.j-pane h3{margin:0 0 8px;font:400 26px/1.2 var(--serif);color:var(--ink)}
.j-links{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;max-width:720px;margin:8px auto 0;padding:24px var(--gutter,24px) 40px}
.j-links a:not(.btn){min-height:44px;line-height:44px;font:500 16px var(--sans);color:var(--pine);text-decoration:underline;text-underline-offset:6px}
.j-links .btn{background:var(--pine);color:var(--white);border:1px solid var(--pine)}
.j-links .btn:hover,.j-links .btn:focus-visible{background:var(--ink);border-color:var(--ink)}
.s06 :focus-visible{outline:2px solid var(--pine);outline-offset:3px;border-radius:4px}
.j-after{max-width:720px;margin-inline:auto;padding:8px var(--gutter,24px) clamp(56px,9svh,96px)}
.j-after p{margin:0;font:400 15px/1.65 var(--sans);color:rgba(22,47,42,.86);max-width:60ch}

/* Live: the plate sticks under the header; the canvas replaces the still once it has drawn; room for the beats */
.s06.is-live .j-stage{position:sticky;top:var(--header-h);z-index:3;background:var(--sand)}
.s06.is-live .j-stage::after{content:"";position:absolute;left:0;right:0;top:100%;height:48px;pointer-events:none;opacity:0;background:linear-gradient(var(--sand) 4px,rgb(239 231 211 / .8) 18px,rgb(239 231 211 / 0))}
.s06.is-live.is-stuck .j-stage::after{opacity:1}
.s06.is-live .j-canvas{visibility:visible}
.s06.is-live.is-drawn .j-poster{visibility:hidden}
.s06.is-live .j-step{padding-block:30px 84px}
/* step 1 starts below the fade, so nothing crosses the plate's foot in the moment it pins and the fade appears */
.s06.is-live .j-step:first-child{padding-top:56px}
.s06.is-live .j-pane{padding-block:28px 76px}
.s06.is-live :is(h2,h3,a,p,li,[id]){scroll-margin-top:calc(var(--header-h) + var(--j-plate-h) + 16px)}
/* In place (Reduce motion pressed, or the phone took back its graphics memory): the still of the finished case */
.s06.is-inplace .j-canvas{visibility:hidden}
.s06.is-inplace .j-poster{visibility:visible!important}
.s06.is-inplace .j-mark{opacity:0!important}
/* Short or narrow screens, landscape phones, very large text: nothing sticks (the loader keeps these on Tier 0) */
@media (max-height:600px),(max-width:359px),(orientation:landscape) and (max-height:500px){.s06.is-live .j-stage{position:relative;top:auto}}
@media (prefers-reduced-motion:reduce){.s06 .j-canvas{visibility:hidden}.s06 .j-poster{visibility:visible!important}}

/* ===================================================================================================================
   avana-navigation.com · the site's own rooms (Stage 3 scaffold).
   tools/build-site.mjs composes public/css/site.css as: Stage 1's stylesheet (stage1/css/site.css, byte for byte),
   then the journey's (stage2/proto, unchanged), then this file. Tokens are Stage 1's (Ink, Pine, Gold, Sand, White,
   Black). Rules this file keeps (ledger A3/D2/D3, checked by tools/check-site.mjs):
   - every ground is Sand, as the hero is (decided 8 Oct 2026: the pages the same colour as the home page); Pine and
     Ink are for text, labels, rules, focus rings and buttons only, never a ground;
   - gold is never a word on Sand or White (it is text only on Ink): here it is a hairline or a rule;
   - labels on Sand are Pine; focus rings on the Sand ground are Pine;
   - no blend modes, no rotation, nothing drawn over a logo; logos are <img>, never recoloured;
   - Reduce motion (html.calm, or the device setting) leaves nothing moving.
   ================================================================================================================= */
:root{--ink-soft:#2E4640;--hair-s:rgba(1,82,64,.2);--room-pt:72px}
@media (min-width:900px){:root{--room-pt:112px}}
/* The site is Sand-first: light form controls and scrollbars on the Sand ground. */
html[data-ground="sand"]{color-scheme:light}

/* Stage 1's skip link sits on the page ground: on Sand its focus ring is Pine (ledger D3), not Stage 1's gold. */
html[data-ground="sand"] body>.skip:focus-visible{outline-color:var(--pine)}
/* Every ground is Sand, so every focus ring is Pine (ledger D3: never gold on a light ground). */
[data-ground="sand"] :focus-visible{outline-color:var(--pine)}

/* ---------- Preview line (SH.07, preview builds only; approved 10 Oct 2026): above the header on every page ---------- */
.preview-note{margin:0;padding:7px 16px;background:var(--sand);color:var(--pine);font:500 13px/1.4 var(--sans);letter-spacing:.02em;text-align:center;border-bottom:1px solid var(--hair-s)}

/* ---------- Rooms ---------- */
.room{position:relative;padding:var(--room-pt) 16px calc(var(--room-pt) + 8px)}
@media (min-width:768px){.room{padding-inline:32px}}
@media (min-width:900px){.room{padding-inline:64px}}
.room-in{max-width:1120px;margin-inline:auto}
/* Sand rooms carry the header's surface (the same grain strength as the hero), so the house reads as one ground. */
.on-sand{background:linear-gradient(rgba(239,231,211,.4),rgba(239,231,211,.4)),var(--grain) 0 0/128px,var(--sand);color:var(--ink)}
.on-sand :focus-visible{outline-color:var(--pine)}
.eyebrow-s{margin:0 0 14px;font:500 13px/1.5 var(--sans);letter-spacing:.24em;text-transform:uppercase;text-wrap:balance;color:var(--pine)}
.h-room{margin:0 0 24px;font:400 clamp(30px,3.6vw,44px)/1.2 var(--serif);max-width:22ch;text-wrap:balance}
.hair{width:64px;height:1px;background:var(--gold)}

/* (round 7, 9 Oct 2026: the gold thread that ran on from the One-thread journey through rooms 07-11 is gone with that
   concept; the rooms after the fitted case are ordinary rooms) */

/* ---------- Prints (the AI-label component, src/components/Print.astro) ---------- */
.print{margin:0}
.print picture,.print img{display:block;width:100%;height:auto}
.print img{aspect-ratio:4/5;object-fit:cover;outline:1px solid var(--hair-s);outline-offset:-1px}
.ai-label{margin:10px 0 0;font-size:16px;line-height:1.45;color:var(--ink-soft)}

/* ---------- 02 · After the decision (Sand) ---------- */
.s02-lead{max-width:46ch;margin:0 0 28px;font:300 20px/1.6 var(--sans);color:var(--ink-soft)}
.s02-h{margin:0;font:400 clamp(30px,3.6vw,44px)/1.22 var(--serif);max-width:24ch;text-wrap:balance}
.s02 .hair{margin:36px 0 40px}
.s02-list{list-style:none;margin:0;padding:0}
.s02-list li{max-width:24ch;font:400 clamp(24px,2.6vw,32px)/1.3 var(--serif)}
.s02-list li+li{margin-top:12svh}
@media (min-width:900px){.s02-list li+li{margin-top:22px}}
.s02-close{margin:10svh 0 0;max-width:30ch;font:italic 400 clamp(22px,2.2vw,26px)/1.45 var(--serif);color:var(--ink-soft)}
@media (min-width:900px){.s02-close{margin-top:56px}}

/* ---------- 03 · The name (Sand): a dictionary entry, the headword in Pine; Pine hairlines above and below ---------- */
.s03{min-height:70svh;display:flex;align-items:center;border-block:1px solid var(--hair-s)}
.s03-entry{width:100%}
.s03-word{margin:0 0 6px;font:400 clamp(64px,9vw,128px)/1.05 var(--serif);color:var(--pine)}
.s03-word dfn{font-style:normal}
.s03-pos{margin:0 0 20px;font:italic 400 20px/1.5 var(--serif)}
.s03-senses{list-style:none;margin:0 0 20px;padding:0;font:400 20px/1.6 var(--serif)}
.s03-say{margin:0 0 28px;max-width:46ch;color:var(--ink-soft)}
.s03-rule{width:120px;height:1px;background:var(--gold);margin:0 0 28px}
.s03-under{margin:0;max-width:28ch;font:400 clamp(22px,2.4vw,28px)/1.4 var(--serif)}

/* ---------- 04 · One name. One number. (Sand) ---------- */
.s04-grid{display:grid;gap:40px}
@media (min-width:900px){.s04-grid{grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:64px;align-items:center}}
.s04-body{max-width:44ch;margin:0 0 32px}
.s04-times{margin:0 0 18px;padding-top:18px;border-top:1px solid var(--gold);display:grid;gap:12px;font-variant-numeric:tabular-nums}
.s04-times div{display:grid;grid-template-columns:6em minmax(0,1fr);column-gap:10px}
.s04-times dt{font-weight:500;color:var(--pine)}
.s04-times dd{margin:0}
.s04-under{margin:0;font-size:16px;color:var(--ink-soft)}
@media (min-width:900px){.s04 .print img{aspect-ratio:3/2}}

/* ---------- 05 · What we do, and what we do not (Sand): the prototype's Screen 05 on the house ground ----------
   Ink text, a Pine eyebrow and Pine markers, Pine hairlines above and below; gold only as the column rules (ledger D3). */
.s05{background:var(--sand);color:var(--ink);border-block:1px solid var(--hair-s);padding:72px 24px 80px}
.s05-in{max-width:1120px;margin-inline:auto}
.s05-eyebrow{margin:0 0 14px;font:500 13px/1.5 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--pine)}
.s05 h2{margin:0 0 40px;font:400 26px/1.3 var(--serif);max-width:24ch;text-wrap:balance;color:var(--ink)}
.s05-cols{display:grid;gap:44px}
.s05-col h3{margin:0 0 4px;padding-top:16px;border-top:1px solid var(--gold);font:400 22px/1.3 var(--serif);color:var(--ink)}
.s05 ul{list-style:none;margin:0;padding:0}
.s05 li{position:relative;padding:14px 0 14px 26px;border-bottom:1px solid var(--hair-s);font-size:18px;line-height:1.55}
.s05 li::before{content:"";position:absolute;left:0;top:27px;width:12px;height:1.5px;background:var(--pine)}
.s05-note{margin:40px 0 6px;max-width:60ch;font-size:17px;line-height:1.6;color:var(--ink-soft)}
.s05-link{display:inline-flex;align-items:center;min-height:44px;font-size:17px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--pine);text-decoration-thickness:1px;text-underline-offset:6px}
.s05 :focus-visible{outline-color:var(--pine)}
@media (min-width:900px){
  .s05{padding:112px 64px 120px}
  .s05 h2{font-size:40px;margin-bottom:56px}
  .s05-cols{grid-template-columns:1fr 1fr;gap:64px}
}
@media (forced-colors:active){.s05 li::before{background:CanvasText}}

/* ---------- 06 · after the journey: the lines spec frame P15 sets (06.8, 06.9, the links) ---------- */
.j-after .j-links{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin:28px 0 0}
.j-more{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--pine);text-decoration-thickness:1px;text-underline-offset:6px}
.btn-solid{min-height:52px;padding:0 30px;background:var(--pine);color:var(--white);border:1px solid var(--pine);transition:background .2s,border-color .2s}
.btn-solid:hover,.btn-solid:focus-visible{background:var(--ink);border-color:var(--ink);color:var(--white)}

/* ---------- 07 · The small things (Sand): a Pine hairline where it begins ---------- */
.s07{border-top:1px solid var(--hair-s)}
.s07-h{max-width:28ch}
.s07-grid{display:grid;gap:40px;margin-top:40px}
@media (min-width:900px){.s07-grid{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:56px;align-items:start}}
.moment h3{margin:0 0 6px;font:400 clamp(22px,2vw,24px)/1.3 var(--serif)}
.moment p{margin:0 0 28px;max-width:52ch;color:var(--ink-soft)}
/* "Faces before names": four empty ovals in a gold hairline, no portraits, no names (decorative) */
.ovals{display:flex;gap:10px;margin:-12px 0 28px}
.ovals span{width:30px;height:40px;border:1px solid var(--gold);border-radius:50%}
.s07-consent{margin:4px 0 16px;max-width:56ch;font-size:16px;line-height:1.6;color:var(--ink-soft)}
.s07-link{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--pine);text-decoration-thickness:1px;text-underline-offset:6px}

/* ---------- 09 · Kept in confidence (Sand) ---------- */
.s09-grid{display:grid;gap:40px;margin-top:8px}
@media (min-width:900px){.s09-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}}
/* the document: a White sheet, set like a page, no names, seal, logo or tilt */
.sheet-doc{background:var(--white);color:var(--ink);padding:32px 28px 40px;outline:1px solid rgba(1,82,64,.12)}
.sheet-doc h3{margin:0 0 14px;font:400 22px/1.3 var(--serif)}
.doc-rule{height:1px;background:var(--pine);margin:0 0 20px}
.sheet-doc p{margin:0 0 48px;font:400 18px/1.65 var(--serif)}
.doc-sign{width:60%;height:1px;background:rgba(22,47,42,.45)}
.s09-practices{margin:0;padding-left:1.6em;display:grid;gap:14px}
.s09-practices li::marker{color:var(--pine);font-weight:500}
.s09-inscription{margin:56px 0 16px;font:400 15px/1.9 var(--serif);letter-spacing:.12em;text-transform:uppercase;color:var(--pine)}
.s09-inscription .ins{display:block}
.s09-inscription .sep{display:none}
@media (min-width:900px){.s09-inscription .ins{display:inline}.s09-inscription .sep{display:inline}}
.s09-fee{margin:0;max-width:60ch}

/* ---------- 10 · Acting for a patient (Sand): three doors ---------- */
.doors{list-style:none;margin:32px 0 0;padding:0;max-width:880px;border-top:1px solid var(--hair-s)}
.doors li{border-bottom:1px solid var(--hair-s)}
.doors a{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:center;min-height:64px;padding:20px 4px;color:var(--ink);text-decoration:none}
.door-t{grid-column:1;font:400 22px/1.3 var(--serif)}
.door-p{grid-column:1;margin-top:4px;font-size:17px;color:var(--ink-soft)}
.door-arrow{grid-column:2;grid-row:1/span 2;color:var(--pine);transition:transform .2s}
.doors a:hover .door-t,.doors a:focus-visible .door-t{text-decoration:underline;text-decoration-color:var(--pine);text-decoration-thickness:1px;text-underline-offset:5px}
.doors a:hover .door-arrow,.doors a:focus-visible .door-arrow{transform:translateX(4px)}
html.calm .door-arrow{transition:none}
html.calm .doors a:hover .door-arrow,html.calm .doors a:focus-visible .door-arrow{transform:none}

/* ---------- 11 · The close (Sand) ---------- */
/* the close is centred on the page */
.s11 .s11-in{display:flex;flex-direction:column;align-items:center;text-align:center}
.s11-lockup{display:block;width:220px;height:auto;margin:0 0 36px}
@media (min-width:900px){.s11-lockup{width:280px}}
.s11-h{margin:0 0 24px;max-width:26ch;font:400 clamp(26px,3.2vw,40px)/1.3 var(--serif);text-wrap:balance}
.s11-contact{margin:0 0 32px;max-width:56ch}
.s11-contact a{color:var(--ink);text-decoration-color:var(--pine);text-decoration-thickness:1px;text-underline-offset:5px;white-space:nowrap}
.s11-actions{display:flex;flex-direction:column;align-items:center;gap:12px}
.s11-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;margin:0}
.textbtn{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;border:0;background:none;color:var(--ink);font:400 16px var(--sans);text-decoration:underline;text-decoration-color:var(--pine);text-decoration-thickness:1px;text-underline-offset:5px;cursor:pointer}
.textbtn[hidden]{display:none}
.s11-status{min-height:1.6em;margin:0;font-size:16px;color:var(--pine)}

/* ---------- 12 · Footer (Sand): the rooms' surface and a Pine hairline above (its logo: Footer.astro) ---------- */
.site-footer{background:linear-gradient(rgba(239,231,211,.4),rgba(239,231,211,.4)),var(--grain) 0 0/128px,var(--sand);color:var(--ink);padding:56px 16px 40px;border-top:1px solid var(--hair-s)}
@media (min-width:768px){.site-footer{padding-inline:32px}}
@media (min-width:900px){.site-footer{padding:80px 64px 56px}}
.foot-in{max-width:1120px;margin-inline:auto;display:grid;gap:28px}
.foot-lockup{display:block;width:135px;height:auto}
.foot-notes p{margin:0 0 12px;max-width:76ch;font-size:16px;line-height:1.6}
.foot-nav{display:grid;gap:12px}
.foot-nav ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px}
.foot-nav a,.foot-contact a{display:inline-flex;align-items:center;min-height:44px;font-size:16px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--pine);text-decoration-thickness:1px;text-underline-offset:5px}
@media (min-width:900px){.foot-nav{grid-template-columns:minmax(0,3fr) minmax(0,2fr);column-gap:48px}}
.foot-contact{margin:0;font-size:16px;display:flex;flex-direction:column;align-items:flex-start}
.foot-contact .sep{display:none}
@media (min-width:600px){.foot-contact{display:block}.foot-contact .sep{display:inline}}
.foot-motion{margin:0}
.foot-legalid p{margin:0 0 6px;font-size:16px;color:var(--ink-soft)}
.site-footer .toggle{color:var(--ink)}
.site-footer :focus-visible{outline-color:var(--pine)}

/* ---------- The menu sheet (Stage 1's dialog; its logo is swapped in Layout.astro): the header's Sand surface ----------
   Ink words, Pine dividers at 20%, the call to action as the hero's (a Pine pill, Ink on hover or focus), Pine rings. */
[data-ground="sand"] dialog.sheet{background:linear-gradient(rgba(239,231,211,.4),rgba(239,231,211,.4)),var(--grain) 0 0/128px,var(--sand);color:var(--ink)}
[data-ground="sand"] dialog.sheet::backdrop{background:var(--sand)}
[data-ground="sand"] .sheet nav a{border-bottom-color:var(--hair-s)}
[data-ground="sand"] .sheet .toggle{color:var(--ink)}
[data-ground="sand"] .sheet .btn-line{background:var(--pine);color:var(--white);border-color:var(--pine)}
[data-ground="sand"] .sheet .btn-line:hover,[data-ground="sand"] .sheet .btn-line:focus-visible{background:var(--ink);border-color:var(--ink);color:var(--white)}
[data-ground="sand"] .sheet .contact a{text-decoration-color:var(--pine)}
[data-ground="sand"] .sheet :focus-visible{outline-color:var(--pine)}

/* ---------- 404 (Sand): the button is the hero's Pine pill (.btn-solid) ---------- */
.s404{min-height:70svh;display:flex;align-items:center}
.s404 .room-in{width:100%}
.s404-h{margin:0 0 32px;max-width:20ch;font:400 clamp(32px,4.4vw,56px)/1.2 var(--serif);color:var(--ink);text-wrap:balance}

/* ---------- Forced colours and print ---------- */
@media (forced-colors:active){.hair,.s03-rule{background:CanvasText}.ovals span{border-color:CanvasText}}
@media print{
  .site-header .nav,.site-header .compact,dialog,.mark canvas,[data-motion-toggle],.s11-tools,.j-stage{display:none!important}
  body,.on-sand,.s05,.site-footer{background:#fff!important;color:#000!important}
  .room,.s05{padding-block:24px}
  .s03-word{color:#000!important}
}

/* ===================================================================================================================
   avana-navigation.com · the inner pages (Stage 3, Pages phase).
   Composed after src/styles/site.css by tools/build-site.mjs. The same rules hold (ledger A3/D2/D3, checked by the
   gates): every ground is Sand (decided 8 Oct 2026), the chapters and the dictionary entry included; gold is never a
   word here, only a hairline or a rule; labels, numerals and markers are Pine; focus rings are Pine; no rotation, blend,
   animation or transition; logos are <img>, never recoloured. Body text 18 px or more; targets 44 px or more.
   ================================================================================================================= */

/* ---------- Focus on the inner pages' grounds ---------- */
.pagehead :focus-visible,.pg :focus-visible,.legal :focus-visible{outline-color:var(--pine)}
.pagehead [hidden],.pg [hidden],.legal [hidden]{display:none!important}

/* ---------- The current page in the header and the menu (both Sand) ---------- */
.site-header .nav a[aria-current="page"]:not(.btn){text-decoration:underline;text-decoration-color:var(--pine);text-decoration-thickness:1px;text-underline-offset:6px}
.site-header .nav a.btn-line[aria-current="page"]{text-decoration-thickness:2px}
.sheet nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--pine);text-decoration-thickness:1px;text-underline-offset:6px}

/* ---------- Page head ---------- */
.pagehead{padding:48px 16px 8px}
@media (min-width:768px){.pagehead{padding:72px 32px 8px}}
@media (min-width:900px){.pagehead{padding:104px 64px 16px}}
.ph-in{max-width:1120px;margin-inline:auto}
.ph-h1{margin:0 0 24px;font:400 clamp(40px,5.6vw,72px)/1.08 var(--serif);max-width:17ch;text-wrap:balance}
.ph-lead{margin:0;max-width:56ch;font:400 clamp(20px,2.1vw,24px)/1.55 var(--serif);color:var(--ink-soft)}

/* "Forward this page": one quiet line under the opening (SH.01, SH.02) */
.forward{margin:32px 0 0;padding-top:14px;border-top:1px solid var(--hair-s);display:flex;flex-wrap:wrap;align-items:center;column-gap:12px}
.fw-label{margin:0;font:500 13px/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--pine)}
.fw-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.fw-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border:0;background:none;color:var(--ink);font:400 16px var(--sans);text-decoration:underline;text-decoration-color:var(--pine);text-decoration-thickness:1px;text-underline-offset:5px;cursor:pointer}
.fw-list li:first-child .fw-btn{padding-left:0}
@media (min-width:600px){.fw-list li:first-child .fw-btn{padding-left:10px}}
.fw-status{flex-basis:100%;min-height:1.5em;margin:0;font-size:16px;color:var(--pine)}
.fw-status:empty{min-height:0}

/* ---------- Body: sections in an editorial two-column grid on wide screens ---------- */
.pg{padding:24px 16px 96px}
@media (min-width:768px){.pg{padding-inline:32px}}
@media (min-width:900px){.pg{padding:40px 64px 128px}}
.pg>*,.after-chapters>*{max-width:1120px;margin-inline:auto}
.sec{padding:36px 0 40px;border-top:1px solid var(--hair-s)}
.sec-h{display:flex;align-items:flex-start;gap:4px}
.sec h2{margin:0 0 18px;font:400 clamp(26px,2.6vw,32px)/1.25 var(--serif);text-wrap:balance}
@media (min-width:900px){
  .sec{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:56px;padding:52px 0 56px}
  .sec-h{grid-column:1}
  .sec h2{margin:0}
  .sec>.sec-b{grid-column:2}
  .sec-wide>.sec-b,.sec-routes>.sec-b{grid-column:1/-1}
  .sec-wide>.sec-b{margin-top:32px}
}
.sec-b>:first-child{margin-top:0}
.sec-b>:last-child{margin-bottom:0}
.sec-b p{margin:0 0 18px;max-width:64ch}
.sec-b a:not(.btn):not(.h-anchor):not(.more-link):not(.fw-btn){color:var(--ink);text-decoration-color:var(--pine);text-decoration-thickness:1px;text-underline-offset:5px}
/* "Copy link to this section" (SH.04): a quiet line icon beside the heading, a full 44 px target */
.h-anchor{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-top:-4px;color:var(--pine);opacity:.7;border-radius:4px}
.h-anchor:hover,.h-anchor:focus-visible{opacity:1}
.h-anchor svg{display:block}

/* Lists: a Pine dash on Sand; numbered steps in Pine rings */
.list{list-style:none;margin:0;padding:0}
.list li{position:relative;padding:12px 0 12px 26px;border-bottom:1px solid var(--hair-s);max-width:64ch}
.list li:first-child{padding-top:2px}
.list li::before{content:"";position:absolute;left:0;top:26px;width:12px;height:1.5px;background:var(--pine)}
.list li:first-child::before{top:16px}
.steps{list-style:none;margin:0;padding:0;counter-reset:st}
.steps li{counter-increment:st;position:relative;padding:2px 0 18px 46px;max-width:62ch}
.steps li::before{content:counter(st);position:absolute;left:0;top:0;width:30px;height:30px;border:1px solid var(--pine);border-radius:50%;display:grid;place-items:center;font:500 15px/1 var(--sans);color:var(--pine)}
.who a{color:var(--ink);text-decoration-color:var(--pine);text-decoration-thickness:1px;text-underline-offset:5px}
.list.who li{padding-block:4px}
.list.who li::before{top:24px}
.list.who a{display:inline-flex;align-items:center;min-height:44px}

/* A bordered box (Recognising us; How to verify us) */
.box{border:1px solid var(--pine);padding:24px 22px 6px;background:rgba(255,255,255,.4)}
.box p{margin:0 0 18px}
.more{margin:12px 0 0}
.more-link{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--pine);text-decoration-thickness:1px;text-underline-offset:6px}

/* The principles, set as an inscription (as on the homepage) */
.inscription{margin:0 0 20px;font:400 15px/1.9 var(--serif);letter-spacing:.12em;text-transform:uppercase;color:var(--pine)}
.inscription .ins{display:block}
.inscription .sep{display:none}
@media (min-width:1200px){.inscription .ins{display:inline}.inscription .sep{display:inline}}

/* The close of a page */
.close-cta{padding:44px 0 0;border-top:1px solid var(--hair-s)}
@media (min-width:900px){.close-cta{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:56px}.close-cta>*{grid-column:2;justify-self:start}}
.sec-b .close-cta{display:block;padding:8px 0 0;border:0}
.pg>.close-cta:first-child{border:0}

/* The printed footer (SH.06): never on screen */
.print-foot{display:none}

/* ---------- /programmes ---------- */
.label-s{margin:0 0 22px;font:italic 400 17px/1.5 var(--serif);color:var(--pine)}
/* How a journey runs: the nine steps on a gold thread down the margin (drawn complete; nothing moves) */
.thread-steps{list-style:none;margin:0;padding:0;position:relative;counter-reset:st}
.thread-steps::before{content:"";position:absolute;left:15px;top:16px;bottom:22px;width:1.5px;background:var(--gold)}
.thread-steps li{counter-increment:st;position:relative;padding:3px 0 16px 52px;font:400 clamp(19px,1.8vw,21px)/1.45 var(--serif)}
.thread-steps li::before{content:counter(st);position:absolute;left:0;top:0;width:31px;height:31px;border-radius:50%;background:var(--sand);border:1px solid var(--gold);display:grid;place-items:center;font:500 14px/1 var(--sans);color:var(--pine)}
/* The three chapters: Sand in a 1 px Pine keyline (as .box), solid (no glass, no tilt) */
.chapter{margin-top:24px;background:var(--sand);color:var(--ink);border:1px solid var(--pine);padding:32px 20px 32px}
@media (min-width:768px){.chapter{padding:44px 40px}}
@media (min-width:900px){.chapter{padding:56px 56px 52px}}
.chapter+.chapter{margin-top:20px}
.chapter-in{display:grid;gap:32px}
@media (min-width:900px){.chapter-in{grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start}}
.chapter .sec-h{gap:4px}
.chapter-h{margin:0 0 18px;font:400 clamp(34px,3.8vw,46px)/1.15 var(--serif);color:var(--ink)}
.chapter-h .num{color:var(--pine)}
.chapter .h-anchor{margin-top:2px}
.chapter-essence{margin:0 0 28px;max-width:40ch;font:400 clamp(20px,2vw,23px)/1.5 var(--serif)}
.chapter-more{margin:0}
.chapter-more summary{display:flex;align-items:center;gap:16px;min-height:44px;list-style:none;cursor:pointer}
.chapter-more summary::-webkit-details-marker{display:none}
.chapter-more summary .chapter-label{flex:1;margin:0;padding-bottom:12px}
.chapter-more summary::after{content:"";flex:none;width:16px;height:16px;margin-top:4px;background:linear-gradient(var(--pine),var(--pine)) center/16px 1.5px no-repeat,linear-gradient(var(--pine),var(--pine)) center/1.5px 16px no-repeat}
.chapter-more[open] summary::after{background:linear-gradient(var(--pine),var(--pine)) center/16px 1.5px no-repeat}
.chapter-label{margin:0 0 6px;padding-top:16px;border-top:1px solid var(--gold);font:500 13px/1.5 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--pine)}
.chapter-lead{margin:12px 0 0}
.chapter-list{list-style:none;margin:0 0 22px;padding:0}
.chapter-list li{position:relative;padding:13px 0 13px 26px;border-bottom:1px solid var(--hair-s);line-height:1.55;max-width:60ch}
.chapter-list li::before{content:"";position:absolute;left:0;top:26px;width:12px;height:1.5px;background:var(--pine)}
.chapter-note{margin:0 0 16px;max-width:60ch;color:var(--ink-soft)}
.chapter-ends{margin:26px 0 0;padding-top:16px;border-top:1px solid var(--hair-s);max-width:46ch;font:italic 400 19px/1.55 var(--serif)}
.chapter-ends strong{display:block;margin-bottom:4px;font:500 13px/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--pine)}
.after-chapters{margin-top:24px}
/* Compare: a real table; cells in words, with a shape cue (filled: Included; hollow: Not included) */
.cmp{width:100%;border-collapse:collapse;font-size:17px;line-height:1.5}
.cmp th,.cmp td{padding:14px 12px;border-bottom:1px solid var(--hair-s);text-align:left;vertical-align:top}
.cmp thead th{font:500 13px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--pine);border-bottom-color:var(--pine)}
.cmp tbody th{font-weight:400;width:46%;padding-left:0}
.cmp td{white-space:nowrap}
.cmp td::before{content:"";display:inline-block;width:9px;height:9px;margin-right:9px;border-radius:50%;vertical-align:1px;box-sizing:border-box}
.cmp td.in::before{background:var(--pine)}
.cmp td.out{color:var(--ink-soft)}
.cmp td.out::before{border:1.5px solid var(--ink-soft)}
/* Phones: the three programmes stay side by side (Saurabh, 20 Oct 2026). Each row's words span the width; its three
   cells sit beneath in three equal columns, under the programme names, which stay in view below the site header. */
@media (max-width:719px){
  .sec-compare .cmp-wrap{overflow:visible}
  .cmp,.cmp tbody{display:block}
  .cmp thead{display:block;position:sticky;top:var(--header-h);z-index:2;background:var(--sand)}
  .cmp tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:8px;padding:12px 0 10px;border-bottom:1px solid var(--hair-s)}
  .cmp thead tr{padding:10px 0 8px;border-bottom:1px solid var(--pine)}
  .cmp thead td{display:none}
  .cmp thead th{padding:0;border:0;font-size:11px;letter-spacing:.14em}
  .cmp tbody th{grid-column:1/-1;width:auto;padding:0 0 8px;border:0;font-size:16px;line-height:1.45}
  .cmp td{display:block;padding:0;border:0;white-space:normal;font-size:14px;line-height:1.35}
  .cmp td::before{width:8px;height:8px;margin-right:6px}
}
.disclaimer{max-width:66ch}

/* ---------- /discretion ---------- */
.sec .sheet-doc p{margin:0 0 48px;max-width:none}

/* ---------- /institutions ---------- */
.routes{display:grid;gap:32px}
@media (min-width:900px){.routes{grid-template-columns:minmax(0,1fr) 360px;gap:64px;align-items:center}}
.routes-text{margin:0;max-width:36ch;font:400 clamp(22px,2.3vw,28px)/1.45 var(--serif)}
.sec-routes{border-top:0}

/* ---------- /questions: the browser's own disclosure; a plus that becomes a minus (no rotation) ---------- */
.pg>.qa-list{max-width:1120px}
.qa{max-width:860px;border-bottom:1px solid var(--hair-s)}
.qa:first-child{border-top:1px solid var(--hair-s)}
.qa summary{display:flex;align-items:flex-start;gap:16px;min-height:44px;padding:20px 0;list-style:none;cursor:pointer}
.qa summary::-webkit-details-marker{display:none}
.qa summary h2{flex:1;margin:0;font:400 clamp(21px,2.2vw,26px)/1.35 var(--serif)}
.qa summary::after{content:"";flex:none;width:16px;height:16px;margin-top:8px;background:linear-gradient(var(--pine),var(--pine)) center/16px 1.5px no-repeat,linear-gradient(var(--pine),var(--pine)) center/1.5px 16px no-repeat}
.qa[open] summary::after{background:linear-gradient(var(--pine),var(--pine)) center/16px 1.5px no-repeat}
.qa-a{padding:0 0 22px}
.qa-a p{margin:0 0 16px;max-width:64ch}
.qa-a .more{margin-top:0}
.qa-copy{margin:0!important}
.qa+.close-cta,.qa-list+.close-cta{margin-top:40px}

/* ---------- /about: the dictionary entry, Sand in a 1 px Pine keyline (as the chapters), the headword in Pine ---------- */
.dict{margin-top:24px;background:var(--sand);color:var(--ink);border:1px solid var(--pine);padding:56px 24px}
@media (min-width:900px){.dict{padding:88px 72px}}
.dict-word{margin:0 0 6px;font:400 clamp(64px,9vw,120px)/1.05 var(--serif);color:var(--pine)}
.dict-word dfn{font-style:normal}
.dict-pos{margin:0 0 20px;font:italic 400 20px/1.5 var(--serif)}
.dict-senses{margin:0 0 20px;padding:0;list-style:decimal inside;font:400 20px/1.6 var(--serif)}
.dict-say{margin:0 0 28px;max-width:46ch;color:var(--ink-soft)}
.dict-rule{width:120px;height:1px;background:var(--gold);margin:0 0 28px}
.dict-under{margin:0;max-width:28ch;font:400 clamp(22px,2.4vw,28px)/1.4 var(--serif)}
.marks{display:flex;flex-wrap:wrap;align-items:center;gap:20px 36px}
.marks-img{display:block;width:198px;height:auto}
.marks p{margin:0;flex:1 1 280px}

/* ---------- /begin ---------- */
.addr{margin:0 0 6px;font:400 clamp(22px,3vw,34px)/1.3 var(--serif);overflow-wrap:anywhere}
.addr a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--pine);text-decoration-thickness:1px;text-underline-offset:7px;-webkit-user-select:text;user-select:text}
.addr-tools{margin:0}
.addr-tools .fw-btn{padding-left:0}

/* ---------- Legal pages: shells until counsel's text arrives ---------- */
.legal{padding:56px 16px 128px}
@media (min-width:900px){.legal{padding:104px 64px 160px}}
.legal-in{max-width:70ch;margin-inline:auto}
.legal-h1{margin:0 0 28px;font:400 clamp(36px,4.4vw,52px)/1.15 var(--serif);text-wrap:balance}
.legal-updated{margin:0 0 24px;font-size:16px;color:var(--ink-soft)}
/* until counsel's text is installed: the notice approved 10 Oct 2026, calm, not a builder's placeholder */
.legal-awaits{margin:8px 0 0;padding:20px 0 0;border-top:1px solid var(--hair-s)}
.legal-drafting{margin:0 0 10px;font:400 22px/1.4 var(--serif);color:var(--ink)}
.legal-preview{margin:0;max-width:56ch;color:var(--ink-soft)}

/* ---------- Forced colours ---------- */
@media (forced-colors:active){
  .thread-steps::before,.dict-rule,.list li::before,.chapter-list li::before{background:CanvasText}
  .qa summary::after{background:linear-gradient(CanvasText,CanvasText) center/16px 1.5px no-repeat,linear-gradient(CanvasText,CanvasText) center/1.5px 16px no-repeat}
  .qa[open] summary::after{background:linear-gradient(CanvasText,CanvasText) center/16px 1.5px no-repeat}
  .cmp td.in::before{background:CanvasText}
}

/* ---------- Print: navigation hidden, no imagery, addresses printed after links, the printed footer ---------- */
@media print{
  @page{margin:16mm 16mm 18mm}
  .forward,.h-anchor,.qa-copy,.chapter-print,.routes-print,.addr-tools,.fw-status,.site-footer,.skip,.qa summary::after{display:none!important}
  .pagehead,.pg,.legal{padding:0!important}
  body{font-size:10.5pt;line-height:1.45}
  .ph-h1{margin:0 0 8pt;font-size:24pt;max-width:none}
  .ph-lead{font-size:12pt;color:#000}
  .sec,.close-cta{display:block!important;padding:9pt 0!important;border-top:.5pt solid #999!important}
  .sec h2{margin:0 0 5pt!important;font-size:14pt}
  .sec-b p,.qa-a p,.list li,.steps li{max-width:none}
  .list li,.chapter-list li{padding-block:3pt!important}
  /* browsers print no background colours by default: markers and the thread are drawn as borders on paper */
  .list li::before,.chapter-list li::before{top:10pt;height:0;background:none!important;border-top:1.5px solid #000!important}
  .thread-steps::before{background:none!important;border-left:1.5px solid #9a7b45;width:0}
  .thread-steps li{padding-bottom:4pt;font-size:11pt}
  .thread-steps li::before{background:#fff!important}
  .cmp td.in::before{background:none!important;border:4.5px solid #000}
  .box{background:none!important;border-color:#000!important}
  .chapter,.dict{margin:0!important;padding:0!important;border:0!important;background:#fff!important;color:#000!important}
  .chapter *,.dict *{color:#000!important;border-color:#999!important}
  .chapter{break-before:page;break-inside:avoid;display:flex;flex-direction:column;min-height:240mm}
  .chapter-in{display:block}
  .chapter-h{font-size:22pt;margin-bottom:8pt}
  .chapter-essence{font-size:13pt;margin-bottom:10pt}
  .chapter-ends{font-size:11pt;margin-top:10pt}
  .after-chapters{break-before:page}
  .close-cta .btn{min-height:0;padding:0;border:0!important;background:none!important;color:#000!important;font-size:11pt;border-radius:0}
  .cmp{font-size:9.5pt}
  .cmp th,.cmp td{padding:4pt 6pt}
  .print-foot{display:block!important;margin:auto 0 0;padding-top:6pt;border-top:.5pt solid #999;font-size:8.5pt;line-height:1.4;color:#333!important}
  .pg>.print-foot{margin-top:16pt}
  main a[href^="/"]:not(.h-anchor)::after{content:"(avana-navigation.com" attr(href) ")";margin-left:.35em;font-size:.9em}
  main a[href^="mailto:"]{text-decoration:none}
  .qa{break-inside:avoid}
}