/*
Theme Name:   Aion
Theme URI:    https://aionphilosophy.com
Description:  Child theme for Aion, Morgane van Steenbrugghe's philosophical coaching site. Fireside palette from Oliver Durkin's film. Built by Design Minds.
Author:       Design Minds
Author URI:   https://www.designminds.ie
Template:     twentytwentyfive
Version:      1.4.1
Text Domain:  aion
*/

/* ==================================================================
   AION. All site styling lives here, in the child theme, under version
   control. Nothing goes in Customiser Additional CSS.
   Class-based selectors only. Markers: [AION-WP] = a WordPress or
   Twenty Twenty-Five default being neutralised, with the reason.
   ================================================================== */
/* Layout: one evening, lit by the film. Full-bleed fireside hero; a reading column with a marginal gloss; one wide band for the three positions; portrait beside credentials; contact set as large type.
   Palette taken from the footage: hearth dark, ember, cream scarf, fireplace stone. Single dark theme by choice. */
:root{
  --night:#15110E;   /* ground */
  --hearth:#1E1814;  /* raised bands */
  --cream:#EEE5D6;   /* text */
  --ash:#DDD4C6;     /* secondary text (lifted from #ACA192 for legibility, 10/11/2026) */
  --ember:#E39A4B;   /* accent, used sparingly */
  --rule:rgba(238,229,214,.14);
  --f-display:"Gloock", "Literata", Didot, Georgia, serif;
  --f-body:"Literata", Charter, "Iowan Old Style", Georgia, serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
.line a.v{text-decoration:none;user-select:text;transition:color .2s}
.line a.v:hover{color:var(--ember)}
body{background:var(--night);color:var(--cream);font-family:var(--f-body);font-size:1.0625rem;line-height:1.7;-webkit-font-smoothing:antialiased;font-optical-sizing:auto}
a{color:inherit}
::selection{background:var(--ember);color:var(--night)}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.wrap{max-width:74rem;margin-inline:auto;padding-left:max(20px, env(safe-area-inset-left, 0px));padding-right:max(20px, env(safe-area-inset-right, 0px))}
h1,h2,h3{font-family:var(--f-display);font-weight:400;text-wrap:balance;margin:0;line-height:1.04;letter-spacing:-.005em}
p{margin:0}
.label{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ember)}

/* Draft strip */

/* Header */
header.site{position:absolute;left:0;right:0;z-index:5}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.4rem}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.brand svg{width:30px;height:30px;flex:none}
/* Logo mark: the ring draws once on load, then the ember dot orbits it slowly, one turn every 24s.
   Hovering the logo quickens it. Reduced-motion visitors get the still mark (global rule below). */
.aion-ring{stroke-dasharray:100;stroke-dashoffset:100;transform:rotate(-90deg);transform-origin:20px 20px;animation:aion-draw 1.6s cubic-bezier(.65,0,.35,1) .2s forwards}
.aion-orbit{transform-origin:20px 20px;animation:aion-turn 24s linear 1.6s infinite}
.aion-dot{opacity:0;animation:aion-show .5s ease 1.5s forwards}
.brand:hover .aion-orbit{animation-duration:6s}
@keyframes aion-draw{to{stroke-dashoffset:0}}
@keyframes aion-turn{to{transform:rotate(360deg)}}
@keyframes aion-show{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.aion-ring{stroke-dashoffset:0}.aion-dot{opacity:1}}
.brand b{font-family:var(--f-display);font-weight:400;font-size:1.4rem;letter-spacing:.04em}
nav.top{display:flex;align-items:center;gap:1.6rem;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
nav.top a{text-decoration:none;opacity:.8}
nav.top a:hover{opacity:1;color:var(--ember)}
/* Menu links hide on phones; the FR | EN switch stays. */
@media (max-width:680px){nav.top > a{display:none}}

/* Hero */
.hero{position:relative;overflow:hidden;min-height:36rem;height:min(88vh,56rem);display:flex;align-items:flex-end;background:#0c0907}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:64% 12%}
@media (max-width:680px){
  .hero{height:auto;min-height:46rem}
  .hero video{height:62%;object-position:58% 0}
  .hero::after{background:linear-gradient(0deg,var(--night) 0%,var(--night) 42%,rgba(21,17,14,0) 66%),linear-gradient(180deg,rgba(21,17,14,.6) 0%,rgba(21,17,14,0) 20%)}
  .hero .wrap{padding-block:18rem 3rem}
}
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(21,17,14,.88) 0%,rgba(21,17,14,.5) 40%,rgba(21,17,14,0) 68%),
  linear-gradient(0deg,var(--night) 0%,rgba(21,17,14,0) 38%),
  linear-gradient(180deg,rgba(21,17,14,.55) 0%,rgba(21,17,14,0) 22%)}
.hero .wrap{position:relative;z-index:2;width:100%;padding-block:5rem 4rem}
.hero .kicker{display:flex;gap:.9rem;align-items:center;flex-wrap:wrap}
.hero .kicker i{font-style:normal;font-family:var(--f-display);font-size:1.15rem;color:var(--ember);letter-spacing:.04em}
.hero h1{margin-top:1.4rem;font-size:clamp(2.7rem,6vw,5.2rem);max-width:13ch}
/* Wide screens: the film sits right of the headline, its left edge feathered into the dark,
   so the longer French headline never crosses Morgane's face. */
@media (min-width:900px){
  .hero video.loop{left:auto;right:0;width:74%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32%);mask-image:linear-gradient(90deg,transparent 0,#000 32%)}
  .hero .wrap > *{max-width:42rem}
}
.hero h1 em{font-style:normal;color:var(--ember)}
.hero .lede{margin-top:1.6rem;max-width:31rem;font-size:1.12rem;color:var(--cream);opacity:.88}
.hero .cta{margin-top:2.4rem;display:flex;gap:1.5rem;flex-wrap:wrap;align-items:center}
.play{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:1rem}
.play .disc{width:4rem;height:4rem;border-radius:50%;border:1.2px solid var(--cream);display:grid;place-items:center;transition:background .25s,border-color .25s}
.play .disc svg{width:16px;height:16px;margin-left:3px}
.play:hover .disc{background:var(--ember);border-color:var(--ember);color:var(--night)}
.play b{display:block;font-family:var(--f-display);font-weight:400;font-size:1.25rem;line-height:1.2}
.play small{display:block;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.textlink{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--ember);padding-bottom:.25rem}
.textlink:hover{color:var(--ember)}

/* Film overlay */
dialog.film{border:0;padding:0;background:transparent;max-width:min(92vw,72rem);width:100%;color:var(--cream)}
dialog.film::backdrop{background:rgba(10,8,6,.92)}
dialog.film video{display:block;width:100%;aspect-ratio:16/9;background:#000}
dialog.film .bar{display:flex;justify-content:space-between;align-items:center;padding-block:.8rem;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
dialog.film .close{all:unset;cursor:pointer;color:var(--cream)}
dialog.film .close:hover{color:var(--ember)}

/* Sections */
section{padding-block:clamp(4.5rem,10vw,8rem)}
.approach .grid{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,38rem);gap:clamp(2rem,6vw,6rem)}
.gloss{display:grid;gap:1.25rem;align-content:start;position:sticky;top:2rem}
.gloss .word{font-family:var(--f-display);font-size:3.2rem;line-height:1;color:var(--ember)}
.gloss p{font-size:.88rem;color:var(--ash);line-height:1.55}
.gloss p span.t{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em}
.approach .body{display:grid;gap:1.4rem}
.approach .lead{font-family:var(--f-display);font-size:clamp(1.55rem,3vw,2.15rem);line-height:1.28}
.approach .body p:not(.lead){color:var(--cream);opacity:.86}
@media (max-width:820px){.approach .grid{grid-template-columns:1fr}.gloss{position:static;grid-template-columns:auto 1fr;align-items:center;gap:1rem 1.5rem;border-bottom:1px solid var(--rule);padding-bottom:1.5rem}}

/* Quote band with the Aion ring */
.quote{background:var(--hearth);position:relative;overflow:hidden}
.quote .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3rem;align-items:center}
.quote blockquote{margin:0;font-family:var(--f-display);font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.14;max-width:22ch}
.quote cite{display:block;margin-top:1.5rem;font-style:normal;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.ring{width:clamp(9rem,20vw,15rem);aspect-ratio:1;max-width:100%}
.ring .orbit{transform-origin:100px 100px;animation:turn 60s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}
@media (max-width:720px){.quote .wrap{grid-template-columns:1fr}.ring{width:7rem}}

/* Three positions */
.positions h2{font-size:clamp(2.1rem,4.6vw,3.4rem);max-width:20ch;margin-top:1rem}
.cols{margin-top:3.5rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule)}
.cols > div{padding:2rem 2rem 0 0;display:grid;gap:.8rem;align-content:start}
.cols > div + div{padding-left:2rem;border-left:1px solid var(--rule)}
.cols .who{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.cols h3{font-size:1.6rem}
.cols p.is{color:var(--ash);font-size:.98rem}
.cols .us{position:relative}
.cols .us::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:var(--ember)}
.cols .us h3{color:var(--ember)}
.cols .us p.is{color:var(--cream)}
@media (max-width:820px){.cols{grid-template-columns:1fr}.cols > div,.cols > div + div{padding:1.6rem 0;border-left:0;border-bottom:1px solid var(--rule)}.cols .us::before{top:-1px}}

/* About */
.about{background:var(--hearth)}
.about .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.portrait{margin:0;position:relative;max-width:100%}
/* Aion ring echoed on the photo's corner, kept inside the side gutter */
.portrait::after{content:"";position:absolute;width:6rem;height:6rem;right:-.9rem;bottom:-1.4rem;border:1.2px solid var(--ember);border-radius:50%;pointer-events:none}
.portrait::before{content:"";position:absolute;width:.55rem;height:.55rem;right:1.83rem;bottom:4.33rem;background:var(--ember);border-radius:50%;z-index:1;pointer-events:none}
.portrait img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;filter:saturate(.92)}
.portrait figcaption{margin-top:.8rem;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.about .body{display:grid;gap:1.3rem}
.about h2{font-size:clamp(2.6rem,6vw,4.4rem)}
.about .body > p{opacity:.88;max-width:34rem}
.creds{list-style:none;margin:.75rem 0 0;padding:0;border-top:1px solid var(--rule)}
.creds li{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:1.25rem;padding-block:1.1rem;border-bottom:1px solid var(--rule);align-items:baseline}
.creds em{font-style:normal;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ember)}
.creds b{font-weight:500;display:block}
.creds span{color:var(--ash);font-size:.92rem}
@media (max-width:820px){.about .wrap{grid-template-columns:1fr}.portrait{max-width:26rem}}

/* Contact */
.contact h2{font-size:clamp(2.6rem,7vw,5.4rem);max-width:12ch;margin-top:1rem}
.contact .note{margin-top:1.4rem;color:var(--ash);max-width:30rem}
.facts{margin:3rem 0 0;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:2rem;border-top:1px solid var(--rule);padding-top:1.6rem}
.facts div{display:grid;gap:.5rem;align-content:start;min-width:0}
.facts dt{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ember)}
.facts dd{margin:0;font-family:var(--f-display);font-size:clamp(1.25rem,2.4vw,1.7rem);line-height:1.25;font-variant-numeric:tabular-nums}
@media (max-width:640px){.facts{grid-template-columns:1fr 1fr}.facts div:first-child{grid-column:1/-1}}
.lines{margin-top:3rem;border-top:1px solid var(--rule)}
.line{display:grid;grid-template-columns:8rem minmax(0,1fr) auto;gap:1.5rem;align-items:baseline;padding-block:1.4rem;border-bottom:1px solid var(--rule)}
.line .k{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.line .v{font-family:var(--f-display);font-size:clamp(1.4rem,3.6vw,2.4rem);line-height:1.15;overflow-wrap:anywhere;user-select:all;font-variant-numeric:tabular-nums}
.copy{all:unset;cursor:pointer;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);border-bottom:1px solid var(--rule);padding-bottom:.15rem}
.copy:hover{color:var(--ember);border-color:var(--ember)}
@media (max-width:640px){.line{grid-template-columns:1fr auto;gap:.4rem 1rem}.line .k{grid-column:1/-1}}

footer .wrap{padding-block:2rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ash);border-top:1px solid var(--rule)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- Language switcher (Polylang links, set by the aion/header block) ---------- */
.lang{display:inline-flex;gap:.15rem}
.lang a{text-decoration:none;padding:.25rem .4rem;opacity:.55;border-bottom:1px solid transparent}
.lang a[aria-current="true"]{opacity:1;border-bottom-color:var(--ember)}
.lang a:hover{opacity:1}

/* ---------- [AION-WP] neutralise parent theme and block defaults ---------- */
/* Parent adds root padding and a max content width; the design sets its own gutters. */
.wp-site-blocks{padding:0!important}
main.wp-block-post-content,.wp-site-blocks > *{margin-block:0}
/* Block-gap is 0 in theme.json, so flow layouts add no margins; the design sets its own spacing. */
/* Core quote block draws a left border and padding in the parent theme. */
.quote .wp-block-quote{border:0;padding:0;margin:0;font-style:normal}
.quote .wp-block-quote p{font:inherit;margin:0}
.quote .wp-block-quote cite{display:block;margin-top:1.5rem;font-style:normal;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
/* Image block: the figure is the portrait frame. */
.wp-block-image.portrait{margin:0}
.wp-block-image.portrait img{height:auto}
/* Headings: parent sets letter-spacing and weights through theme.json. */
.wp-block-heading{font-family:var(--f-display);font-weight:400}
/* Admin bar pushes the absolute header down when logged in. */
.admin-bar header.site{top:32px}
@media (max-width:782px){.admin-bar header.site{top:46px}}

/* ---------- Header: large logo at the top, shrinks to a compact bar once the page scrolls ---------- */
header.site{position:fixed;top:0;left:0;right:0;z-index:20;transition:background-color .35s ease,box-shadow .35s ease}
header.site .wrap{padding-block:max(1.6rem,env(safe-area-inset-top,0px)) 1.6rem;transition:padding .35s ease}
.brand{gap:.9rem}
.brand svg{width:54px;height:54px;transition:width .35s ease,height .35s ease}
.brand b{font-size:2.2rem;transition:font-size .35s ease}
header.site.is-scrolled{background-color:rgba(21,17,14,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--rule)}
header.site.is-scrolled .wrap{padding-block:max(.7rem,env(safe-area-inset-top,0px)) .7rem}
header.site.is-scrolled .brand svg{width:30px;height:30px}
header.site.is-scrolled .brand b{font-size:1.35rem}
@media (max-width:680px){.brand svg{width:42px;height:42px}.brand b{font-size:1.75rem}header.site .wrap{padding-block:max(1.1rem,env(safe-area-inset-top,0px)) 1.1rem}}
/* Anchor jumps land below the compact header */
section[id]{scroll-margin-top:4.5rem}


/* ==================================================================
   UX pass, 10/11/2026
   ================================================================== */

/* Phones: the film fills the top of the screen and fades out at its own lower edge
   (no hard line), the headline sits on the faded part below her face, and the hero
   is only as tall as its content (no dead space under the buttons). */
@media (max-width:680px){
  .hero{display:block;height:auto;min-height:0}
  .hero video.loop{height:60vh;height:60svh;object-position:50% 0;
    -webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 100%);mask-image:linear-gradient(180deg,#000 50%,transparent 100%)}
  .hero::after{background:linear-gradient(180deg,rgba(21,17,14,.6) 0%,rgba(21,17,14,0) 20%)}
  .hero .wrap{padding-block:calc(60vh - 8rem) 3rem;padding-block:calc(60svh - 8rem) 3rem}
}

/* Phones: the Aion ring tucks in beside the "Morgane" credit instead of sitting alone below the quote. */
@media (max-width:720px){
  .quote .ring{width:3.5rem;justify-self:end;margin-top:-5.3rem}
}

/* Phones: "Rendez-vous" button in the slim header once scrolled, so booking is always one tap away. */
.book-pill{display:none}
@media (max-width:680px){
  header.site.is-scrolled .book-pill{display:inline-flex;align-items:center;min-height:36px;padding:0 .9rem;margin-right:.4rem;
    border:1px solid var(--ember);border-radius:999px;color:var(--ember);text-decoration:none;opacity:1;
    font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase}
  header.site.is-scrolled .book-pill:active{background:var(--ember);color:var(--night)}
}

/* Bigger tap areas without changing the look: an invisible hit zone round small controls (44px target). */
.lang a,.copy{position:relative}
.lang a::after{content:"";position:absolute;inset:-8px -2px}
.copy::after{content:"";position:absolute;inset:-12px -10px}

/* Keyboard focus: buttons styled with all:unset lose the default ring, so restore it. */
.play:focus-visible,.copy:focus-visible,dialog.film .close:focus-visible,.lang a:focus-visible,
.brand:focus-visible,.textlink:focus-visible,.book-pill:focus-visible,.line a.v:focus-visible{outline:2px solid var(--ember);outline-offset:4px;border-radius:2px}
.play:focus-visible{border-radius:999px}

/* ---------- FAQ: question headings with direct answers (read by search and AI answer engines; FAQ schema is built from this section in inc/seo.php) ---------- */
.faq h2{font-size:clamp(2.1rem,4.6vw,3.4rem);max-width:20ch;margin-top:1rem}
.faq .qa{margin-top:3rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:3rem;border-top:1px solid var(--rule)}
.faq .qa > .wp-block-group{padding-block:1.6rem;border-bottom:1px solid var(--rule);display:grid;gap:.6rem;align-content:start;min-width:0}
.faq h3{font-size:1.4rem;line-height:1.2}
.faq .qa p{color:var(--ash);font-size:.98rem;max-width:34rem}
.faq .qa a{color:var(--cream);text-underline-offset:3px}
.faq .qa a:hover{color:var(--ember)}
.faq + .contact{border-top:1px solid var(--rule)}
@media (max-width:760px){.faq .qa{grid-template-columns:1fr}}


/* ---------- Legal notice and privacy page ---------- */
.legal{padding-block:clamp(8rem,14vw,11rem) clamp(4rem,8vw,6rem)}
.legal .wrap > *{max-width:44rem}
.legal h1{font-size:clamp(2.4rem,5.5vw,4rem);margin-top:1rem}
.legal .updated{margin-top:1.2rem;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.legal h2{font-size:clamp(1.5rem,3vw,2rem);margin-top:3rem;padding-top:2rem;border-top:1px solid var(--rule)}
.legal h3{font-size:1.25rem;margin-top:2rem}
.legal p,.legal li{opacity:.9}
.legal p{margin-top:1rem}
.legal ul{margin:1rem 0 0;padding-left:1.2rem;display:grid;gap:.4rem}
.legal a{text-decoration:underline;text-underline-offset:3px}
.legal .todo{color:var(--ember);font-family:var(--f-mono);font-size:.85em}
footer .foot-links{display:flex;gap:1.5rem;flex-wrap:wrap}
footer .foot-links a{text-decoration:none}
footer .foot-links a:hover{color:var(--ember)}


/* ---------- Cookie badge (same pattern as designminds.ie, in the Aion ember) ---------- */
.cookie-btn{all:unset;box-sizing:border-box;position:fixed;z-index:30;left:max(20px,env(safe-area-inset-left,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:var(--ember);color:var(--night);box-shadow:0 8px 24px rgba(0,0,0,.45);transition:transform .2s ease}
.cookie-btn svg{width:28px;height:28px}
.cookie-btn:hover{transform:scale(1.06)}
.cookie-btn:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
.cookie-panel{position:fixed;z-index:31;left:max(20px,env(safe-area-inset-left,0px));bottom:calc(86px + env(safe-area-inset-bottom,0px));
  width:min(22rem,calc(100vw - 40px));display:grid;gap:.8rem;padding:1.4rem;
  background:var(--hearth);border:1px solid var(--rule);box-shadow:0 18px 48px rgba(0,0,0,.5)}
.cookie-panel[hidden]{display:none}
.cookie-panel p{font-size:.95rem;line-height:1.55;opacity:.92}
.cookie-panel p.label{opacity:1}
.cookie-actions{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:.3rem}
.cookie-actions a{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ash);text-underline-offset:3px}
.cookie-actions a:hover{color:var(--ember)}
.cookie-ok{all:unset;cursor:pointer;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;padding:.6rem 1.2rem;border-radius:999px;background:var(--cream);color:var(--night)}
.cookie-ok:hover{background:var(--ember)}
.cookie-ok:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
@media (max-width:680px){
  .cookie-btn{width:44px;height:44px;left:max(16px,env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .cookie-btn svg{width:24px;height:24px}
  .cookie-panel{left:max(16px,env(safe-area-inset-left,0px));bottom:calc(72px + env(safe-area-inset-bottom,0px));width:calc(100vw - 32px)}
}

/* Contact values: Gloock draws "+" as a hairline and its figures read unevenly at this size,
   so email and phone use Literata with full-height, evenly spaced figures. */
.line .v{font-family:var(--f-body);font-weight:400;font-size:clamp(1.3rem,3.2vw,2.1rem);letter-spacing:-.01em;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}

/* Portrait ring: cream-white like the logo ring; the ember dot orbits it, one turn every 24s, as in the logo.
   transform-origin = the ring centre measured from the dot (dot .55rem, ring radius 3rem). */
.portrait::after{border-color:var(--cream)}
.portrait::before{transform-origin:.275rem 3.275rem;animation:aion-turn 24s linear infinite}

.notfound .textlink{display:inline-block;margin-top:1rem}

/* v1.3.7 readability (10/11/2026). Literata read thin and dim on the dark ground.
   Light text on dark renders lighter than it is, so the body uses the variable
   weight axis a touch above regular; secondary text colour lifted (see --ash);
   FAQ answers brought up to body size. Headings (Gloock) unchanged. */
body{font-weight:400;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}
.faq .qa p{font-size:1.0625rem;line-height:1.7}
.cols p.is,.creds span{font-size:1rem}
.gloss p{font-size:.94rem}
/* Menu and small mono labels: IBM Plex Mono at 11px and 80% opacity was too faint.
   Now Plex Mono 500 (self-hosted), slightly larger, full strength. */
nav.top{font-size:.84rem;font-weight:500}
nav.top a{opacity:1}
nav.top .lang a{opacity:.7}nav.top .lang a[aria-current="true"]{opacity:1}
.label,.play small,.textlink,dialog.film .bar,.quote cite,.cols .who,.portrait figcaption,.creds em,.facts dt,.line .k,.copy,footer .wrap{font-weight:500}
.label,.facts dt,.line .k,.cols .who,.creds em,.quote cite,.quote .wp-block-quote cite{font-size:.76rem}
.copy,.portrait figcaption,footer .wrap{font-size:.72rem}
/* v1.4.0: still read light. Answers and secondary copy in full cream; heavier body. */
.faq .qa p,.approach .body p:not(.lead),.hero .lede,.contact .note,.cols p.is{color:var(--cream);opacity:1}