/* XENIA — site styles. Palette and type from design SPEC v3.2 (light blue, gold, turquoise). Glow is CSS/SVG, never baked into art. */
@font-face{font-family:"Cormorant Garamond";src:url(/fonts/cormorant-garamond-var.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(/fonts/cormorant-garamond-italic-var.woff2) format("woff2");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:"Manrope";src:url(/fonts/manrope-var.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}

:root{
  --blue-900:#163A6B;--blue-700:#1F4E8C;--blue-600:#2A5FA8;--blue-500:#3A74C4;--ink:#122E55;
  --gold:#D9A93F;--gold-300:#F3D68C;--gold-100:#FFF4D6;--gold-ink:#7A5410;
  --turq:#2EC4B6;--turq-300:#8FE3DA;--turq-ink:#0B6C63;
  --cream:#FBF7EF;--sand:#F2EADB;--muted:#3D5577;
  --serif:"Cormorant Garamond","Cormorant",Garamond,"Times New Roman",serif;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r-md:14px;--r-lg:22px;--ease:cubic-bezier(.2,.7,.2,1);
  --vt-dur:420ms;
  /* Deep blue at the top of the home sky (preview .home), land #011454 / port #020b42. Zoom pages use --xenia-deep-blue (King 30 Oct). */
  --sky-top:#011454;
  /* v3.4 zoom theme (design tokens.json; these are fallbacks — dist/css/generated.css re-emits them from tokens.json) */
  --xenia-deep-blue:#011454;
  --panel-text:#FBF7EF;--panel-text-2:#C9D3E6;--panel-heading:#F3D68C;
  --field-bg:rgba(255,255,255,.06);--field-border:rgba(243,214,140,.45);--field-focus:#D9A93F;--field-ring:0 0 0 3px rgba(217,169,63,.28);
  --placeholder:#9FB0CF;--btn-bg:#D9A93F;--btn-text:#011454;--btn-off-bg:rgba(255,255,255,.08);--btn-off-text:#9FB0CF;--panel-link:#8FE3DA;
  --zoom-glow:radial-gradient(90% 60% at 50% 0%,rgba(40,70,160,.35),transparent 70%);
  --on-deep:var(--panel-text);--on-deep-soft:var(--panel-text-2);--on-deep-muted:var(--panel-text-2);--on-deep-line:rgba(201,211,230,.28);
  /* UI/UX #2 Pixel 10 Pro spec (31 Oct): type floor, tap size, phone art band */
  --fs-micro:.75rem;   /* 12px: the floor; letter-spaced caps only (.tag, .cta, .h-corner a) */
  --fs-label:.8125rem; /* 13px: field labels, .eyebrow, .d-more-title */
  --fs-small:.875rem;  /* 14px: chips */
  --tap:48px;          /* minimum hit box */
  --art-full:33.333dvh;   /* phone art at rest (305px at 915) */
  --art-compact:72px;     /* collapsed band (56px with the keyboard open) */
  --art-collapse:calc(var(--art-full) - var(--art-compact));
  color-scheme:light;
}
html.kb-open{--art-compact:56px}
@media (max-aspect-ratio: 1/1){:root{--sky-top:#020b42}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font:400 1rem/1.6 var(--sans);color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--blue-700);text-underline-offset:.18em}
a:hover{color:var(--blue-900)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.1;color:var(--blue-900);margin:0 0 .4em}
h1:focus{outline:none}
h1:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;min-height:var(--tap);display:inline-flex;align-items:center;padding:10px 16px;background:var(--blue-900);color:#fff;border-radius:10px;text-decoration:none;font-weight:700}
.skip:focus{top:12px;color:#fff}
.tag{display:inline-block;font:700 var(--fs-micro)/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink);background:var(--gold-100);border:1px solid rgba(217,169,63,.55);border-radius:99px;padding:.35em .7em;vertical-align:middle}
.ico{width:1.2em;height:1.2em;flex:none}

/* ============ HOME: one unified painting, no scroll ============ */
body[data-view=home]{overflow:hidden;background:var(--blue-700)}
.home{position:fixed;inset:0;overflow:hidden;
  /* sky above/around the painting: lighter blue at the top, easing into the painting's own top-edge navy (#011253) */
  background:radial-gradient(140% 85% at 50% 0%,#3A74C4 0%,#2A5FA8 22%,#163A6B 52%,#03165A 80%,#011253 100%)}
/* .h-scene keeps the painting's exact aspect ratio, bottom-anchored, so % hotspots stay glued to the art at every viewport. */
.h-scene{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:min(100vw, calc(118dvh * 16 / 9));aspect-ratio:16/9;container-type:inline-size}
.h-scene picture,.h-img{position:absolute;inset:0;width:100%;height:100%}
.h-scene picture{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7%);mask-image:linear-gradient(to bottom,transparent 0,#000 7%)}
.h-img{object-fit:fill} /* box already has the art's ratio; SVG uses preserveAspectRatio="none" to match */
.h-nav{position:absolute;inset:0}
.h-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.h-svg--port,.h-labels--port{display:none}
.h-scene{container-type:inline-size}
@media (max-aspect-ratio: 1/1){
  .h-scene{width:min(100vw, calc(112dvh * 9 / 16));aspect-ratio:9/16}
  .h-svg--land,.h-labels--land,.h-lenses--land,.h-sparks--land{display:none}
  .h-svg--port,.h-labels--port,.h-lenses--port,.h-sparks--port{display:block}
}
/* "Relationships" title at the top, over the sky */
.home-top{position:absolute;z-index:4;left:0;right:0;top:0;padding:max(10px,env(safe-area-inset-top)) 16px 0;text-align:center;pointer-events:none}
.home-title{margin:0;font:400 clamp(2rem,min(6.2vw,7.2dvh),4.6rem)/1.05 var(--serif);letter-spacing:.01em;color:#FFF8E8;
  text-shadow:0 2px 30px rgba(10,30,70,.55),0 0 2px rgba(5,20,60,.6);pointer-events:auto}
.home-sub{margin:.3em 0 0;font:600 clamp(.8125rem,min(3.2vw,1.6dvh),.95rem)/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-300);text-shadow:0 1px 6px rgba(5,20,60,.9)}
.home-sub [lang=el]{text-transform:none;letter-spacing:.06em;font:italic 500 1.3em/1 var(--serif)}
/* soft vignette so the top title reads over sky, done in CSS */
.h-scene::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 60% at 50% 0%,rgba(22,58,107,.35),transparent 60%)}

.hot{cursor:pointer;outline:none}
.hot-hit{fill:transparent;pointer-events:all}
/* focus ring = the same path, 2px gold, non-scaling (handoff v3.3) */
.hot-ring{fill:none;stroke:#F3D68C;stroke-width:2;opacity:0;pointer-events:none;transition:opacity .22s var(--ease)}
.hot:focus-visible .hot-ring{opacity:1}
/* lens: the painting clipped to the group path at brightness 1.12 with a 12px gold glow, 220ms (handoff v3.3) */
.h-lenses{position:absolute;inset:0;pointer-events:none}
.h-lenses--port{display:none}
.h-lens{--on:0;position:absolute;inset:0;opacity:var(--on);transition:opacity .22s cubic-bezier(.2,.7,.2,1);
  filter:drop-shadow(0 0 12px rgba(255,214,120,.75)) drop-shadow(0 0 4px rgba(255,236,190,.6))}
.h-lens.is-hot{--on:1}
.h-lens-in{position:absolute;inset:0;background-size:100% 100%;background-repeat:no-repeat;filter:brightness(1.12)}
/* sparks (data from sparks.json, never painted): screen-blended radial glows, gentle breathe */
.h-sparks{position:absolute;inset:0;pointer-events:none}
.h-sparks--port{display:none}
.spk{position:absolute;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;mix-blend-mode:screen;animation:breathe 5.5s ease-in-out infinite}
.spk--blue{background:radial-gradient(circle,#FFFFFF 0 18%,#7FD8FF 26%,rgba(47,140,255,.85) 38%,rgba(47,140,255,0) 70%)}
.spk--gold{background:radial-gradient(circle,#FFF5DC 0 18%,rgba(255,190,110,.9) 38%,rgba(255,190,110,0) 70%)}
@keyframes breathe{0%,100%{opacity:.78;scale:.94}50%{opacity:1;scale:1}}
.h-labels{position:absolute;inset:0;pointer-events:none;z-index:2}
.h-lab{--on:0;position:absolute;pointer-events:auto;transform:translate(-50%,0);white-space:nowrap;text-decoration:none;
  /* handoff v3.3 label spec: Manrope 600 caps, no pill, legibility from the navy text-shadow */
  font:600 clamp(.75rem, min(3.1vw, 1.5dvh), .875rem)/1.15 var(--sans);letter-spacing:.16em;margin-right:-.16em;text-transform:uppercase;
  color:color-mix(in srgb, #FFFFFF calc(var(--on) * 100%), rgba(255,248,232,.84));padding:.35em .2em;
  text-shadow:0 1px 8px rgba(5,20,60,.95),0 0 3px rgba(5,20,60,.8);
  filter:drop-shadow(0 0 calc(var(--on) * 8px) rgba(255,214,120,.9));
  transition:color .22s cubic-bezier(.2,.7,.2,1),filter .22s cubic-bezier(.2,.7,.2,1)}
.h-lab--top{margin-top:clamp(2px,.4dvh,6px)}
.h-lab--bottom{transform:translate(-50%,-100%);margin-top:calc(-1 * clamp(2px,.4dvh,6px))}
.h-lab--center{transform:translate(-50%,-50%)}
.h-lab.is-hot,.h-back.is-hot{--on:1}
/* Pixel spec §2: invisible 48px hit boxes, centred, no visual change (.h-lab/.h-back are already absolutely placed) */
.h-lab::before,.h-back::before,.h-corner a::before,.d-foot a::before,.c-privacy a::before{
  content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--tap));height:max(100%,var(--tap));translate:-50% -50%;border-radius:12px}
/* BLOG on Ksenia's back (decorative; the Blog hotspot carries the accessible name). Min 13px rendered (hotspots.json minFontPx). */
.h-back{--on:0;position:absolute;pointer-events:auto;transform:translate(-50%,-50%);font:600 13px/1 var(--sans);text-transform:uppercase;letter-spacing:.22em;margin-right:-.22em;
  color:#FFF3D6;text-decoration:none;white-space:nowrap;text-shadow:0 0 1px rgba(90,40,0,.75),0 0 4px rgba(90,40,0,.45),0 0 10px rgba(255,230,170,.75);
  filter:drop-shadow(0 0 calc(var(--on) * 6px) rgba(255,214,120,.9));transition:filter .22s cubic-bezier(.2,.7,.2,1)}
@media (max-aspect-ratio: 1/1){
  .h-lab{letter-spacing:.1em;margin-right:-.1em;white-space:normal;max-width:40cqi;text-align:center}
}
.h-corner{position:absolute;z-index:3;right:max(10px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));display:flex;gap:8px;align-items:center}
.h-corner a{position:relative;font:700 var(--fs-micro)/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#FFF8E8;text-decoration:none;padding:.7em .9em;min-height:36px;display:inline-flex;align-items:center;border-radius:99px;background:rgba(18,46,85,.72)}
.h-corner a:hover{color:#fff;text-decoration:underline}
@media (max-aspect-ratio: 1/1){.h-corner{left:auto;top:auto}.h-corner .tag{display:none}}

/* zoom proxy: a cropped copy of the painting placed over the clicked group, named art-<slug> for the View Transition */
.vt-proxy{position:absolute;z-index:4;pointer-events:none;background-repeat:no-repeat;border-radius:18px}

/* ============ DETAIL: phone art top 1/3, info 2/3 · desktop art left 2/3, info right 1/3 ============ */
body[data-view=detail],body[data-view=post]{background:var(--xenia-deep-blue)}
.detail{display:grid;grid-template-columns:2fr 1fr;align-items:start;min-height:100dvh;color:var(--panel-text);
  background:var(--zoom-glow) fixed,var(--xenia-deep-blue)}
.d-art{margin:0;position:sticky;top:0;height:100dvh;overflow:hidden;background:var(--xenia-deep-blue)}
/* v3.4 camera mode: whole painting framed so the target rect covers the box, centred on the focal point (vars in generated.css) */
.d-art--camera{container-type:size}
.d-cam{position:absolute;inset:0;overflow:hidden}
.d-cam--port{display:none}
.d-cam{--pl:clamp(calc(100cqw - var(--cw)), calc(50cqw - var(--cw) * var(--fx)), 0px);
  --pt:clamp(calc(100cqh - var(--cw) / var(--pa)), calc(50cqh - var(--cw) / var(--pa) * var(--fy)), 0px)}
.d-art--camera .d-cam picture{position:absolute;display:block;width:var(--cw);height:auto;aspect-ratio:var(--pa);left:var(--pl);top:var(--pt)}
/* v3.5 detail tile: same camera maths as the painting, placed at rectPct (fractions of the painting) */
.d-tile{position:absolute;max-width:none;pointer-events:none;left:calc(var(--pl) + var(--cw) * var(--tx));top:calc(var(--pt) + var(--cw) / var(--pa) * var(--ty));
  width:calc(var(--cw) * var(--tw));height:calc(var(--cw) / var(--pa) * var(--th));opacity:1;transition:opacity .2s ease-out}
.d-tile[hidden]{display:none}
.d-tile.is-pending{opacity:0}
@media (prefers-reduced-motion: reduce){.d-tile{transition:none}}
.d-cam-img{width:100%;height:100%;object-fit:fill}
.d-art picture,.d-img{width:100%;height:100%}
.d-img{object-fit:cover}
.d-art .tag{position:absolute;left:14px;bottom:14px}
.d-art::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset -40px 0 60px -40px rgba(1,10,50,.6)}
.d-info{padding:clamp(18px,3.2vw,48px) clamp(18px,2.6vw,44px) 32px;min-width:0}
@media (max-aspect-ratio: 1/1){
  .detail{display:block}
  /* phone: art is the top third at rest. Pixel spec §1: a negative sticky top lets it scroll up until only the bottom
     --art-compact band (72px, 56px with the keyboard open) stays stuck; the box height never changes (no CLS). */
  .d-art{position:sticky;top:calc(-1 * var(--art-collapse));z-index:3;height:var(--art-full);box-shadow:0 10px 30px -12px rgba(0,5,30,.7);transition:top .24s var(--ease)}
  .d-art::after{box-shadow:inset 0 -40px 50px -40px rgba(1,10,50,.6)}
  .d-cam--land{display:none}.d-cam--port{display:block}
  .d-info{position:relative;padding:18px 18px 28px}
  /* keep focused fields clear of the band (WCAG 2.4.11); the label stays visible above a focused input */
  html:has(.d-art){scroll-padding-top:calc(var(--art-compact) + 12px)}
  .c-field input{scroll-margin-top:34px}
  /* the band: 48px Home button + page title, shown once the art has collapsed */
  .d-bar{position:absolute;left:0;right:0;bottom:0;height:var(--art-compact);z-index:2;display:flex;align-items:center;gap:12px;padding:0 14px 0 12px;
    background:linear-gradient(to right,rgba(1,20,84,.78) 0,rgba(1,20,84,.45) 62%,rgba(1,20,84,.15) 100%);
    border-bottom:1px solid rgba(243,214,140,.38);
    -webkit-backdrop-filter:blur(2px) saturate(1.15);backdrop-filter:blur(2px) saturate(1.15);
    opacity:0;visibility:hidden;transition:height .24s var(--ease)}
  .detail .d-bar-home{position:relative;flex:none;display:grid;place-items:center;width:var(--tap);height:var(--tap);border-radius:50%;color:var(--panel-text);
    background:rgba(255,255,255,.08);border:1px solid rgba(243,214,140,.55);text-decoration:none}
  .detail .d-bar-home:hover{color:#fff;border-color:var(--gold-300)}
  .d-bar-home .ico{width:20px;height:20px}
  .d-bar-home::before{content:"";position:absolute;left:50%;top:50%;width:var(--tap);height:var(--tap);translate:-50% -50%;border-radius:50%}
  .d-bar-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 1.375rem/1.1 var(--serif);color:var(--panel-heading);letter-spacing:.005em;
    text-shadow:0 1px 10px rgba(1,10,50,.8)}
  html.kb-open .d-bar-title{font-size:1.2rem}
  html.kb-open .detail .d-bar-home{width:44px;height:44px} /* 44 visual in the 56px band; the ::before hit box stays 48 */
  /* continuous, scroll-linked (Chrome/Edge, Safari 26+): camera drift, bar fade over the last 64px, deeper shadow */
  @supports (animation-timeline: scroll()){
    .d-cam--port{animation:xa-cam linear both;animation-timeline:scroll(root);animation-range:0 var(--art-collapse)}
    .d-bar{animation:xa-bar linear both;animation-timeline:scroll(root);animation-range:calc(var(--art-collapse) - 64px) var(--art-collapse)}
    .d-art{animation:xa-shadow linear both;animation-timeline:scroll(root);animation-range:0 var(--art-collapse)}
  }
  /* fallback / forced state: app.js sets .is-compact when the sentinel passes the band; a focused form field forces it too */
  .detail.is-compact .d-bar,.detail:has(.c-form :focus) .d-bar{animation:none;opacity:1;visibility:visible;transition:opacity .2s var(--ease),visibility 0s}
  /* QI #2 pixel nit: a keyboard user who reaches the Home button mid-fade sees the whole band, not a half-faded one */
  .d-bar:focus-within{animation:none;opacity:1;visibility:visible}
  .detail.is-compact .d-cam--port{transform:translateY(calc(var(--art-collapse) / 2));transition:transform .32s var(--ease)}
  /* posts (blog SPEC §1): a cover can't use the camera (only ~38px of slack), so the <picture> is pinned to the figure's
     bottom edge and shrinks 1:1 with scroll (305 → 72px) while object-position drifts down to the faces */
  .d-art--cover picture{position:absolute;left:0;right:0;bottom:0;display:block;width:100%;height:100%}
  .d-art--cover .d-img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% var(--cover-y-rest)}
  @supports (animation-timeline: scroll()){
    .d-art--cover picture{animation:xa-cover-h linear both;animation-timeline:scroll(root);animation-range:0 var(--art-collapse)}
    .d-art--cover .d-img{animation:xa-cover-y linear both;animation-timeline:scroll(root);animation-range:0 var(--art-collapse)}
  }
  .detail.is-compact .d-art--cover picture{height:var(--art-compact);transition:height .32s var(--ease)}
  .detail.is-compact .d-art--cover .d-img{object-position:50% var(--cover-y-band);transition:object-position .32s var(--ease)}
  /* band on posts: longer titles, plus a decorative 2px gold reading-progress hairline (scroll timelines only) */
  .detail--post .d-bar-title{font-size:1.25rem}
  .detail--post .d-bar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;transform-origin:0 50%;transform:scaleX(0);
    background:linear-gradient(90deg,var(--gold),var(--gold-300));pointer-events:none}
  @supports (animation-timeline: scroll()){
    .detail--post .d-bar::after{animation:xa-progress linear both;animation-timeline:scroll(root)}
  }
}
/* desktop (landscape): no band */
@media not all and (max-aspect-ratio: 1/1){.d-bar{display:none}}
/* -2px: a page that scrolls exactly the collapse distance (e.g. a short post at 360x740) still reaches the compact state */
.d-sentinel{position:absolute;left:0;top:calc(var(--art-collapse) - 2px);width:1px;height:1px;pointer-events:none;visibility:hidden}
/* per-cover focal stripe (blog SPEC §1, measured): rest y% → band y% */
:root{--cover-y-rest:42%;--cover-y-band:27%}
.d-art--cover[data-cover=relationships]{--cover-y-rest:40%;--cover-y-band:26%}
.d-art--cover[data-cover=child-coaching]{--cover-y-rest:44%;--cover-y-band:24%}
.d-art--cover[data-cover=adult-coaching]{--cover-y-rest:44%;--cover-y-band:22%}
@keyframes xa-cover-h{from{height:var(--art-full)}to{height:var(--art-compact)}}
@keyframes xa-cover-y{from{object-position:50% var(--cover-y-rest)}to{object-position:50% var(--cover-y-band)}}
@keyframes xa-progress{to{transform:scaleX(1)}}
@keyframes xa-cam{to{transform:translateY(calc(var(--art-collapse) / 2)) scale(1.04)}}
@keyframes xa-bar{from{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}
@keyframes xa-shadow{from{box-shadow:0 10px 30px -12px rgba(0,5,30,.7)}to{box-shadow:0 14px 28px -10px rgba(0,5,30,.85)}}
.d-nav{margin:0 0 14px}
.back{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:0 16px 0 10px;border-radius:99px;font:700 .8rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--blue-900);background:#fff;border:1px solid rgba(31,78,140,.22);text-decoration:none;box-shadow:0 4px 14px -8px rgba(18,46,85,.4)}
.back:hover{border-color:var(--blue-600);color:var(--blue-700)}
.detail .back{color:var(--on-deep);background:rgba(255,255,255,.07);border-color:rgba(243,214,140,.55);box-shadow:none}
.detail .back:hover{color:#fff;border-color:var(--gold-300)}
.back-key{margin-left:6px;padding-left:8px;border-left:1px solid currentColor;font:600 var(--fs-micro)/1 var(--sans);letter-spacing:.02em;text-transform:none;opacity:.8}
/* Hidden only on touch-primary devices (no hover AND a coarse pointer). Pure desktops never matched either form; the
   change from the old comma (OR) query is that mixed devices (touch plus a fine pointer or hover) now show the hint. */
@media (hover:none) and (pointer:coarse){.back-key{display:none}}
.detail :focus-visible{outline-color:var(--gold-300)}
.detail h1,.detail h2,.detail h3{color:var(--panel-heading)}
.detail a{color:var(--panel-link)}
.detail a:hover{color:#fff}
.eyebrow{margin:0 0 6px;font:700 var(--fs-label)/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--turq-ink)}
.detail .eyebrow{color:var(--turq-300)}
.detail h1,.page h1{font-size:clamp(2.1rem,3.4vw,3.2rem)}
.lede{font:500 1.18rem/1.45 var(--serif);font-size:clamp(1.18rem,1.5vw,1.36rem);color:var(--muted);margin:0 0 18px}
.detail .lede{color:var(--on-deep-soft)}
.d-block{margin:22px 0}
.d-block h2{font-size:1.5rem}
.d-block p{margin:0}
.steps{list-style:none;padding:0;margin:0;display:grid;gap:12px;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:12px 14px 12px 52px;background:rgba(255,255,255,.06);border:1px solid var(--on-deep-line);border-radius:var(--r-md)}
.steps li::before{content:counter(s);position:absolute;left:14px;top:12px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 .8rem/1 var(--sans);color:var(--blue-900);background:linear-gradient(140deg,#F8E2A0,#E2B552)}
.steps h3{font-size:1.15rem;margin:0 0 2px}
.d-quote{margin:22px 0;padding:14px 18px;border-left:3px solid var(--turq);font:italic 500 1.35rem/1.35 var(--serif);color:var(--gold-100);background:rgba(143,227,218,.1);border-radius:0 var(--r-md) var(--r-md) 0}
.d-quote p{margin:0}
.d-note{font-size:.9rem;color:var(--on-deep-muted)}
.d-prose p{margin:0 0 1em}
.d-prose ol,.d-prose ul{padding-left:1.3em}
/* QI #2 (fe2-followup-4): a fenced code block scrolls sideways inside its own box (focusable, tabindex="0" from the
   markdown renderer) instead of widening the page; a 300-character line used to push the page past 412px. Inline
   code gets the same quiet field background. Mono stack only (no web font); never below the 12px text floor. */
.d-prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:.875em;letter-spacing:0;font-variant-ligatures:none}
.d-prose :not(pre)>code{padding:.1em .35em;border-radius:6px;background:rgba(255,255,255,.08);overflow-wrap:anywhere}
.d-prose pre{overflow-x:auto;max-width:100%;box-sizing:border-box;margin:0 0 1.3em;padding:12px 14px;color:var(--panel-text);background:rgba(255,255,255,.06);
  border:1px solid var(--on-deep-line);border-radius:var(--r-md);line-height:1.55;tab-size:2;text-wrap:nowrap;white-space:pre}
.d-prose pre code{display:block;width:max-content;min-width:100%;font-size:max(12px,.875em)}
.d-prose pre:focus-visible{outline:2px solid var(--gold-300);outline-offset:2px}
.d-more{margin:30px 0 10px;padding-top:18px;border-top:1px solid var(--on-deep-line)}
.detail .d-more-title{font:700 var(--fs-label)/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--on-deep-muted)}
.d-more ul{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.d-more a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 16px;border-radius:99px;border:1px solid rgba(243,214,140,.45);text-decoration:none;font-weight:600;font-size:var(--fs-small);color:var(--on-deep);background:rgba(255,255,255,.06)}
.d-more a:hover{color:#fff;border-color:var(--gold-300)}
.d-foot{margin-top:28px;padding-top:6px;font-size:.82rem;color:var(--muted)}
.d-foot p{margin:0;line-height:1.6}
.d-foot a,.c-privacy a{position:relative;display:inline-block;padding:2px 4px;margin:-2px -4px}
.detail .d-foot{color:var(--on-deep-muted)}
.btn{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 18px;border-radius:99px;text-decoration:none;font-weight:700;color:#2B1D05;background:linear-gradient(140deg,#F8E2A0,#E2B552 55%,#CC962F)}
.post-cta{margin:28px 0;padding:16px 18px;background:rgba(255,255,255,.06);border-radius:var(--r-lg);border:1px solid rgba(243,214,140,.45);display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.post-cta p{margin:0;font:600 1.2rem/1.2 var(--serif);color:var(--gold-100)}
.detail .btn{color:#2B1D05}
/* ---- blog posts (UI/UX #2 blog SPEC, Pixel 10 Pro; King 2026-10-31: full spec, strict prev/next, no reading time,
   no share button) ---- */
.btn{padding:0 22px}
.detail--post .d-nav{margin-bottom:18px}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 10px}
.post-meta time{font:inherit}
.detail--post h1{font:600 2.375rem/1.06 var(--serif);letter-spacing:-.005em;text-wrap:balance;margin:0 0 22px}
.detail--post h1::after{content:"";display:block;width:64px;height:1px;margin-top:20px;background:linear-gradient(90deg,var(--gold),rgba(217,169,63,0))}
@media (min-aspect-ratio:1/1){.detail--post h1{font-size:clamp(2.6rem,3.6vw,3.6rem)}}
.detail--post .d-prose{max-width:34em;font-size:1.0625rem;line-height:1.72;color:var(--panel-text);letter-spacing:.003em;text-wrap:pretty;font-kerning:normal;font-variant-ligatures:common-ligatures}
.detail--post .d-prose p{margin:0 0 1.15em}
.detail--post .d-prose>p:first-child{font:500 1.375rem/1.45 var(--serif);color:var(--gold-100);margin-bottom:1em}
@supports (initial-letter:2){
  .detail--post .d-prose>p:first-child::first-letter{initial-letter:2;font-weight:600;color:var(--gold-300);margin-right:.08em}
}
.detail--post .d-prose strong{font-weight:700;color:var(--gold-100)}
.detail--post .d-prose a{color:var(--panel-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:rgba(143,227,218,.6)}
.detail--post .d-prose a:hover{text-decoration-color:currentColor}
.detail--post .d-prose h2{font:600 1.75rem/1.15 var(--serif);color:var(--panel-heading);text-wrap:balance;margin:2.1em 0 .55em;scroll-margin-top:calc(var(--art-compact) + 16px)}
.detail--post .d-prose h3{font:700 var(--fs-label)/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--turq-300);margin:2em 0 .7em}
.detail--post .d-prose h4{font:italic 600 1.3rem/1.3 var(--serif);color:var(--gold-100);margin:1.6em 0 .4em}
.detail--post .d-prose ol,.detail--post .d-prose ul{list-style:none;padding:0;margin:0 0 1.3em}
.detail--post .d-prose li{position:relative;padding-left:44px;margin:0 0 .75em}
.detail--post .d-prose ol{counter-reset:li}
.detail--post .d-prose ol>li{counter-increment:li;min-height:30px}
.detail--post .d-prose ol>li::before{content:counter(li);position:absolute;left:0;top:-.05em;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
  font:600 1.05rem/1 var(--serif);color:var(--gold-300);border:1px solid rgba(243,214,140,.6);background:rgba(243,214,140,.08)}
.detail--post .d-prose ul>li{padding-left:26px}
.detail--post .d-prose ul>li::before{content:"";position:absolute;left:6px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px rgba(217,169,63,.8)}
.detail--post .d-prose blockquote{position:relative;margin:2.2em 0;padding:2.1em 4px 1.3em;text-align:center;border-block:1px solid rgba(243,214,140,.42);background:none}
.detail--post .d-prose blockquote::before{content:"\201C";position:absolute;left:50%;top:0;translate:-50% -46%;padding:0 12px;background:var(--xenia-deep-blue);font:600 3.4rem/1 var(--serif);color:var(--gold)}
.detail--post .d-prose blockquote p{margin:0;font:italic 500 1.625rem/1.3 var(--serif);color:var(--gold-100);text-wrap:balance}
/* post prose: figures with captions, dividers and tags (emitted by the markdown renderer and build.mjs; blog SPEC §5.4) */
/* QI #2 L4: images carry width/height (no layout shift); in any prose they scale down keeping their ratio */
.d-prose img{max-width:100%;height:auto}
.detail--post .d-prose figure{margin:2em -18px}
.detail--post .d-prose figure img{display:block;width:100%;height:auto;background:rgba(255,255,255,.04)}
.detail--post .d-prose figcaption{margin:10px 18px 0;padding-left:12px;border-left:1px solid var(--gold);font:500 var(--fs-label)/1.5 var(--sans);color:var(--panel-text-2)}
@media (min-aspect-ratio:1/1){.detail--post .d-prose figure{margin-inline:0}.detail--post .d-prose figure img{border-radius:var(--r-md)}}
.detail--post .d-prose hr{border:0;margin:2.2em 0;height:20px;text-align:center}
.detail--post .d-prose hr::before{content:"\2726";color:var(--gold);font-size:14px;letter-spacing:1.4em;padding-left:1.4em}
.post-tags{display:flex;flex-wrap:wrap;gap:12px 8px;margin:26px 0 0;padding:0;list-style:none}
.post-tags a{position:relative;display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:99px;text-decoration:none;
  font:700 var(--fs-micro)/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-100);border:1px solid rgba(243,214,140,.45);background:rgba(243,214,140,.07)}
.post-tags a::before{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--tap));height:max(100%,var(--tap));translate:-50% -50%}
.detail--post .post-cta{position:relative;overflow:hidden;margin:36px 0 34px;padding:22px 20px 20px;flex-direction:column;align-items:flex-start;gap:14px;
  border-radius:var(--r-lg);border:1px solid rgba(243,214,140,.5);
  background:radial-gradient(120% 90% at 100% 0%,rgba(217,169,63,.22),transparent 60%),rgba(255,255,255,.05)}
.detail--post .post-cta p{font:600 1.625rem/1.15 var(--serif);color:var(--gold-100)}
.detail--post .post-cta .btn{font-size:var(--fs-small);letter-spacing:.06em;text-transform:uppercase;gap:10px;box-shadow:0 10px 24px -12px rgba(217,169,63,.8)}
.detail--post .post-cta .btn::after{content:"\2192";font-size:1.1em;letter-spacing:0}
/* "More from the circle": strict newer/older neighbours, whole card is the link (376x88+) */
.post-more{margin:0 0 8px}
.detail .post-more-title{margin:0 0 12px;font:700 var(--fs-label)/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--turq-300)}
.post-more-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.detail .post-card{display:grid;grid-template-columns:64px 1fr 20px;align-items:center;gap:14px;min-height:88px;padding:12px 14px 12px 12px;border-radius:18px;text-decoration:none;
  color:var(--panel-text);background:rgba(255,255,255,.05);border:1px solid rgba(201,211,230,.22);transition:border-color .2s var(--ease),background .2s var(--ease)}
.detail .post-card:hover,.detail .post-card:focus-visible{color:var(--panel-text);border-color:var(--gold-300);background:rgba(255,255,255,.08)}
.post-card picture,.post-card .p-thumb{display:block;width:64px;height:64px;border-radius:12px;object-fit:cover}
.post-card-text{min-width:0;display:grid;gap:4px}
.post-card-kicker{font:700 var(--fs-micro)/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--panel-text-2)}
.post-card-kicker b{color:var(--gold-300);font-weight:700}
.post-card-title{font:600 1.25rem/1.15 var(--serif);color:var(--panel-heading);text-wrap:balance}
.post-card svg{width:20px;height:20px;color:var(--gold-300)}
.detail .post-all{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);margin-top:6px;padding:0 4px;
  font:700 var(--fs-label)/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--panel-link);text-decoration:none}
.detail--post .d-foot{margin-top:22px;padding-top:14px;border-top:1px solid var(--on-deep-line)}

/* ============ BLOG LIST ============ */
.p-list{list-style:none;padding:0;margin:20px 0;display:grid;gap:14px}
.p-card article{display:grid;grid-template-columns:112px 1fr;gap:14px;align-items:start;background:rgba(255,255,255,.06);border:1px solid var(--on-deep-line);border-radius:var(--r-md);padding:12px;min-height:108px;position:relative}
.p-card article:focus-within{outline:3px solid var(--gold-300);outline-offset:2px}
.p-card article:hover{border-color:rgba(243,214,140,.6)}
.p-thumb{width:112px;height:84px;object-fit:cover;border-radius:10px}
.p-card picture{display:block}
.p-date{margin:0;font-size:.78rem;color:var(--on-deep-muted);font-weight:600;letter-spacing:.04em}
.p-title{font-size:1.32rem;margin:2px 0 4px}
.detail .p-title a{text-decoration:none;color:var(--gold-100)}
.p-title a::after{content:"";position:absolute;inset:0;border-radius:var(--r-md)} /* whole card is the link's hit area */
.p-title a:focus-visible{outline:none}
.p-excerpt{margin:0;font-size:.92rem;color:var(--on-deep-soft)}

/* ============ SIMPLE PAGE ============ */
.page{min-height:100dvh;background:linear-gradient(180deg,var(--cream),var(--sand))}
.page-inner{max-width:680px;margin:0 auto;padding:28px 20px 40px}
.page .nf-home{display:inline-flex;align-items:center;min-height:var(--tap)} /* 404: its one link is a 48px target (QI #2 L5) */

/* ============ CONTACT CARD (v3.4 dark panel, tokens.json; every pair AA on #011454 — see docs) ============ */
.contact{margin:26px 0;padding:20px;border-radius:var(--r-lg);color:var(--panel-text);background:transparent;border:1px solid rgba(143,227,218,.35)}
.contact h2{color:var(--panel-heading);font-size:1.7rem}
.c-intro{margin:0 0 14px;color:var(--panel-text-2)}
.c-form{margin:0}
.c-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
@media (max-width: 420px){.c-grid{grid-template-columns:1fr}}
.c-field label{display:block;font:700 var(--fs-label)/1.4 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--panel-text);margin-bottom:6px}
.c-field input{width:100%;min-height:52px;padding:14px;font:500 1rem/1.2 var(--sans);color:var(--panel-text);background:var(--field-bg);border:1px solid var(--field-border);border-radius:14px}
.c-field input::placeholder{color:var(--placeholder);opacity:1}
.c-field input:focus{outline:none}
.c-field input:focus-visible{border-color:var(--field-focus);box-shadow:var(--field-ring);outline:2px solid var(--field-focus);outline-offset:1px}
.c-field input[aria-invalid=true]{border-color:#FFB4A8}
.c-field input.is-ok{border-color:var(--panel-link)}
.c-err{margin:4px 0 0;font-size:.82rem;font-weight:600;color:#FFD2C8}
.c-hint{margin:14px 0 10px;font:600 .86rem/1.4 var(--sans);color:var(--panel-text)}
.c-hint.nudge{animation:nudge .4s var(--ease)}
@keyframes nudge{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.cta-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cta{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:76px;border-radius:var(--r-md);text-decoration:none;
  font:700 var(--fs-micro)/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;transition:transform .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
  color:var(--btn-off-text);border:1px dashed rgba(159,176,207,.55);background:var(--btn-off-bg)}
.cta .ico{width:24px;height:24px}
.cta .lock{position:absolute;top:8px;right:8px;width:13px;height:13px;opacity:.9}
.cta[aria-disabled=true]{cursor:not-allowed;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.cta[aria-disabled=true]:hover{color:var(--btn-off-text)}
.detail .cta[aria-disabled=true]{color:var(--btn-off-text)}
.cta:not([aria-disabled=true]),.detail .cta:not([aria-disabled=true]){cursor:pointer;color:var(--btn-text);border:1px solid var(--btn-bg);background:var(--btn-bg);box-shadow:0 10px 26px -12px rgba(217,169,63,.8)}
.cta:not([aria-disabled=true]) .lock{display:none}
.cta:not([aria-disabled=true]):hover{transform:translateY(-3px);color:var(--btn-text);background:#E4B852}
.cta[aria-busy=true]{opacity:.8}
.cta:focus-visible{outline:3px solid var(--panel-heading);outline-offset:3px}
.c-status{margin:12px 0 0;font-size:.92rem;min-height:0}
.c-status:empty{display:none}
.c-status p{margin:0 0 6px}
.c-status.is-ok{padding:10px 12px;border-radius:12px;background:rgba(143,227,218,.12);border:1px solid rgba(143,227,218,.6)}
.c-status.is-error{padding:10px 12px;border-radius:12px;background:rgba(243,214,140,.08);border:1px solid rgba(243,214,140,.7)}
.c-status a{color:var(--panel-link);font-weight:700}
.c-consent,.c-privacy,.c-direct{margin:12px 0 0;font-size:.8rem;line-height:1.5;color:var(--panel-text-2)}
.c-privacy a,.c-direct a{color:var(--panel-link)}
@media (max-width: 360px){.cta{letter-spacing:.06em}} /* Pixel spec §3: stays at the 12px floor, tighter tracking */

/* ============ TRANSITIONS ============ */
@view-transition{navigation:auto} /* cross-document fallback (JS off / full loads) where supported */
::view-transition-group(*){animation-duration:var(--vt-dur);animation-timing-function:cubic-bezier(.3,.7,.2,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:300ms}
::view-transition-image-pair(*){isolation:auto}
::view-transition-old(*),::view-transition-new(*){height:100%;object-fit:cover;overflow:clip}
/* crossfade fallback when View Transitions are unavailable */
main.is-leaving{opacity:0;transition:opacity .2s ease}
main.is-entering{animation:fade-in .25s ease both}
@keyframes fade-in{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion: reduce){
  :root{--vt-dur:150ms}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:150ms !important}
  main.is-leaving{transition-duration:.15s}
  main.is-entering{animation-duration:.15s}
  .h-lens,.hot-ring,.h-lab,.cta{transition:none}
  .spk{animation:none}
  .cta:not([aria-disabled=true]):hover{transform:none}
  .c-hint.nudge{animation:none}
  .vt-proxy{view-transition-name:none !important}
  /* art band: no camera drift and no transitions; the bar still appears as a state change */
  .d-art,.d-bar,.detail.is-compact .d-cam--port,.detail.is-compact .d-art--cover picture,.detail.is-compact .d-art--cover .d-img{transition:none}
  .d-cam--port,.d-bar,.d-art--cover .d-img{animation:none !important} /* cover: no drift; its height still tracks scroll (geometry) */
  /* QI #2 pixel nits: the forced/compact band appears without its .2s fade (these selectors outrank .d-bar above),
     and the post reading-progress hairline does not move (it is decorative; it stays at scaleX(0)) */
  .detail.is-compact .d-bar,.detail:has(.c-form :focus) .d-bar{transition:none}
  .detail--post .d-bar::after{animation:none !important}
  .detail.is-compact .d-art--cover .d-img{object-position:50% var(--cover-y-rest)} /* blog SPEC §1: stays at the rest y% */
}
@media (forced-colors: active){
  .hot:focus-visible .hot-ring{stroke:Highlight}
  .h-lab{border:1px solid CanvasText;background:Canvas;color:CanvasText}
  .cta{border:1px solid ButtonText}
}
.c-turnstile{margin:.75rem 0 .25rem;min-height:65px}