/* ============================================================
   Editorial Whitespace — FULL PAGE  (container-query driven)
   The four audience lanes are the navigation: pick your role and
   the page threads your lane accent through it, surfaces your path,
   and marks your formats.

   RESPONSIVE MODEL: layout keys off the .ed-cq CONTAINER's width
   (not the viewport), so the page renders identically whether it
   fills a phone or sits in a fixed-width preview box. Tokens come
   from shared/design-system.css; fonts from shared/fonts.css.
   Switchboard (.fmt3-*) + path flow (.ed-flow) live in
   shared/editorial-formats.css. Everything here is prefixed .ed.
   ============================================================ */

.ed{
  --active:var(--steel);                 /* becomes the selected lane accent */
  --ed-maxw:1240px;                       /* desktop content cap */
  /* --nav-h lives on :root (design-system.css) so html{scroll-padding-top} can read it too;
     editorial.js keeps it pixel-exact. The hero below inherits it. */
  --pad:max(clamp(28px,7cqw,120px), calc((100% - var(--ed-maxw)) / 2));  /* gutter that also centers content at --ed-maxw on wide screens */
  position:relative;
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); -webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01"; letter-spacing:-.005em;
  min-height:100%;
}
/* the query container — all responsive rules below measure THIS width */
.ed-cq{container-type:inline-size; container-name:ed; display:block;}
/* faint paper grain */
.ed::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ed > *{position:relative;z-index:1}
.ed-cq > *{position:relative;z-index:1}

/* In-page anchor offset is handled once, on the scroll container, via
   html{scroll-padding-top:calc(var(--nav-h)+16px)} (see index.html) — more robust
   than per-section scroll-margin-top, which some browsers skip during smooth scroll.
   So "See the formats for you" and every nav link land just below the sticky nav. */

.ed .eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--steel)}
.ed .serif{font-family:var(--serif)}

/* shared button + link */
.ed .btn{font-family:var(--sans);font-weight:600;font-size:.95rem;background:var(--ink);
  color:var(--paper);padding:14px 28px;border-radius:2px;border:1px solid var(--ink);
  display:inline-block;transition:.2s;cursor:pointer;text-decoration:none}
.ed .btn:hover{background:color-mix(in srgb,var(--ink) 88%,#000)}   /* slightly stronger ink; theme-safe (works light + dark) */
.ed .link{font-family:var(--sans);font-weight:600;font-size:.95rem;color:var(--ink);
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;text-decoration:none;
  border-bottom:1px solid var(--hairline);padding-bottom:2px;transition:.2s}
.ed .link::after{content:"→";transition:transform .2s}
.ed .link:hover{border-color:var(--ink)}
.ed .link:hover::after{transform:translateX(4px)}

/* ---------- NAV ---------- */
.ed-nav{position:sticky;top:0;z-index:40;display:flex;justify-content:space-between;
  align-items:center;padding:20px var(--pad);background:color-mix(in srgb,var(--paper) 82%,transparent);
  backdrop-filter:saturate(140%) blur(8px);transition:border-color .3s,box-shadow .3s;
  border-bottom:1px solid transparent}
.ed-nav[data-stuck="1"]{border-bottom:1px solid var(--hairline)}
.ed-brand{display:flex;flex-direction:column;line-height:1.05;text-decoration:none;color:var(--ink)}
.ed-brand b{font-family:var(--serif);font-weight:600;font-size:1.05rem;letter-spacing:-.01em}
.ed-brand span{font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--steel);margin-top:5px}
.ed-nav-right{display:flex;align-items:center;gap:26px}
.ed-navlinks{display:flex;gap:24px}
.ed-navlinks a{font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--steel);text-decoration:none;transition:color .2s;cursor:pointer}
.ed-navlinks a:hover{color:var(--ink)}
.ed-reading{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);
  border:1px solid var(--hairline);border-left:3px solid var(--active);
  padding:6px 10px;border-radius:2px}
.ed-reading b{color:var(--ink);font-weight:500}
.ed-reading button{appearance:none;border:0;background:none;cursor:pointer;color:var(--steel);
  font-size:.9rem;line-height:1;padding:0 0 0 2px;transition:color .2s}
.ed-reading button:hover{color:var(--ink)}
/* theme toggle — day/night switch, present at every width */
.ed-theme{appearance:none;border:0;background:none;padding:0;margin:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;line-height:1;flex:none}
.ed-theme-label{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--steel);min-width:3.4em;text-align:right;transition:color .4s ease}
.ed-theme:hover .ed-theme-label{color:var(--ink)}
.ed-theme-track{position:relative;width:54px;height:26px;box-sizing:border-box;display:inline-block;
  border:1px solid var(--hairline);border-radius:40px;background:var(--paper-2);
  transition:background-color .4s ease,border-color .4s ease}
.ed-theme:hover .ed-theme-track{border-color:var(--steel)}
.ed-theme-ico{position:absolute;top:50%;transform:translateY(-50%);font-size:13px;line-height:1;
  transition:opacity .4s ease,color .4s ease;pointer-events:none}
.ed-theme-ico.sun{left:6px;color:var(--amber);opacity:1}
.ed-theme-ico.moon{right:6px;color:var(--steel);opacity:.32}
/* knob is positioned against the track's PADDING box (inside its 1px border),
   so top/left:1px (not 2px) centers it: top = (track 26 − 2·border − knob-outer 22)/2 = 1 */
.ed-theme-knob{position:absolute;top:1px;left:1px;width:20px;height:20px;border-radius:50%;
  background:var(--surface);border:1px solid var(--hairline);box-shadow:0 1px 3px var(--shadow);
  transition:transform .4s cubic-bezier(.4,0,.2,1),background-color .4s ease,border-color .4s ease}
.ed-theme[data-dark="1"] .ed-theme-knob,
body[data-theme="dark"] .ed-theme .ed-theme-knob{transform:translateX(28px)}
.ed-theme[data-dark="1"] .ed-theme-ico.sun,
body[data-theme="dark"] .ed-theme .ed-theme-ico.sun{opacity:.32}
.ed-theme[data-dark="1"] .ed-theme-ico.moon,
body[data-theme="dark"] .ed-theme .ed-theme-ico.moon{opacity:1;color:var(--teal)}
.ed-theme:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:40px}
/* language switch (EN / DE). Real <a> links (no-JS still switches); the
   controller writes the lang cookie on click so the choice sticks. Active state
   is weight + underline, never colour alone. Tokens flip in dark mode. */
.ed-lang{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);
  font-size:.66rem;letter-spacing:.13em;text-transform:uppercase}
.ed-lang-opt{color:var(--steel);text-decoration:none;padding:1px 1px;
  border-bottom:1px solid transparent;transition:color .15s ease}
.ed-lang-opt:hover{color:var(--ink)}
.ed-lang-opt[aria-current="page"]{color:var(--ink);font-weight:600;border-bottom-color:currentColor}
.ed-lang-sep{color:var(--hairline)}
.ed-lang-opt:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){.ed-lang-opt{transition:none}}
/* the controller toggles which of these two is shown once a lane is picked */
.ed[data-lane="none"] .ed-reading,
.ed:not([data-lane]) .ed-reading{display:none}
.ed[data-lane]:not([data-lane="none"]) .ed-navlinks{display:none}
/* the premise pull-quote is first-visit framing; once a persona is chosen the
   path + formats answer the same question, so it recedes to keep the lane flow tight */
.ed[data-lane]:not([data-lane="none"]) #premise{display:none}

/* ---------- HERO / MANIFESTO ---------- */
/* Hero fills exactly the viewport below the sticky nav: nav (--nav-h) + hero = one
   screen, so nothing of the next section peeks until you scroll. svh (not vh/dvh)
   keeps it fully visible with no reflow when the mobile URL bar hides/shows; vh is
   the fallback for browsers without svh. min-height (not height) so tall content
   never clips. */
.ed-hero{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:clamp(72px,12vh,150px) var(--pad) clamp(64px,10vh,120px);box-sizing:border-box;
  min-height:calc(100vh - var(--nav-h));min-height:calc(100svh - var(--nav-h))}
.ed-kick{margin-bottom:38px}
.ed-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,6.2cqw,5.1rem);
  line-height:1.02;letter-spacing:-.027em;max-width:17ch;margin:0 0 36px;text-wrap:balance}
.ed-hero h1 em{font-style:italic;color:var(--blue)}
.ed-sub{font-size:clamp(1.15rem,2cqw,1.42rem);color:var(--graphite);max-width:42ch;
  line-height:1.5;margin:0 0 46px}
.ed-cta{display:flex;gap:28px;align-items:center;flex-wrap:wrap;justify-content:center}

/* ---------- INDEX / ROUTER (the navigation) ---------- */
.ed-index-wrap{padding-inline:var(--pad)}   /* cap + center the router at --ed-maxw */
.ed-index-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:24px;padding:0 0 26px;flex-wrap:wrap}
.ed-index-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.6cqw,2.05rem);
  letter-spacing:-.02em;margin:0;line-height:1.1}
.ed-index-head .hint{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--steel)}
.ed-index{border-top:1px solid var(--ink);display:grid;grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--hairline)}
.ed-cell{position:relative;padding:38px 30px 34px;border-right:1px solid var(--hairline);
  cursor:pointer;background:none;border-top:0;border-bottom:0;border-left:0;text-align:left;
  font:inherit;color:inherit;transition:background .25s;overflow:hidden}
.ed-cell:last-child{border-right:0}
.ed-cell::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:var(--lane);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.75,.2,1)}
.ed-cell:hover{background:var(--surface)}
.ed-cell:hover::before,.ed-cell[data-on="1"]::before{transform:scaleX(1)}
.ed-cell .n{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--lane);
  text-transform:uppercase;margin-bottom:16px;display:block}
.ed-cell h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.2rem,1.7cqw,1.45rem);
  letter-spacing:-.01em;margin:0 0 11px;line-height:1.08}
.ed-cell p{font-size:.94rem;color:var(--graphite);line-height:1.45;margin:0 0 22px}
.ed-cell .pick{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--steel);display:inline-flex;align-items:center;gap:7px;transition:color .2s}
.ed-cell .pick::after{content:"→";transition:transform .2s}
.ed-cell:hover .pick{color:var(--lane)}
.ed-cell:hover .pick::after{transform:translateX(4px)}
.ed-cell[data-on="1"]{background:var(--surface)}
.ed-cell[data-on="1"] .pick{font-size:0}   /* hide the "this is me" word; the pseudo carries the selected state */
.ed-cell[data-on="1"] .pick::after{content:"selected ·";font-size:.62rem;letter-spacing:.12em;color:var(--lane);transform:none}

/* ---------- YOUR PATH (revealed on selection) ---------- */
.ed-path{padding:clamp(56px,9cqw,100px) var(--pad);text-align:center;
  background:var(--surface);border-bottom:1px solid var(--hairline);animation:edRise .55s cubic-bezier(.2,.7,.2,1)}
.ed-path[hidden]{display:none}
.ed-path .eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:24px;color:var(--active)}
.ed-path .eyebrow::before{content:"";width:24px;height:1px;background:var(--active)}
.ed-path h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,3.4cqw,2.7rem);
  letter-spacing:-.02em;line-height:1.12;max-width:24ch;margin:0 auto 14px;text-wrap:balance}
.ed-path h2 em{font-style:italic;color:var(--active)}
.ed-path .get{font-size:1.12rem;color:var(--graphite);line-height:1.55;max-width:50ch;margin:0 auto 44px}
.ed-path .pathcta{margin-top:42px;display:flex;gap:26px;justify-content:center;align-items:center;flex-wrap:wrap}

/* ---------- generic section frame ---------- */
.ed-sec{padding:clamp(64px,11cqw,130px) var(--pad)}
.ed-sec--band{background:var(--paper-2)}
.ed-sec .eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:24px;color:var(--blue)}
.ed-sec .eyebrow::before{content:"";width:26px;height:1px;background:currentColor}
.ed-sec h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4cqw,3.1rem);
  letter-spacing:-.022em;line-height:1.05;margin:0 0 18px;max-width:20ch;text-wrap:balance}
.ed-sec h2 em{font-style:italic;color:var(--blue)}
/* When a lane is active, the switchboard's accents follow the lane color so the
   whole #work block recolors with the rest of the page (the ::before bar already
   inherits via currentColor). Other sections keep the brand blue. Without this,
   #work's eyebrow + <em> stayed blue while everything around them changed. */
.ed[data-lane]:not([data-lane="none"]) .ed-switch .eyebrow,
.ed[data-lane]:not([data-lane="none"]) .ed-switch h2 em{color:var(--active)}
.ed-lead{font-size:1.18rem;color:var(--graphite);line-height:1.55;max-width:52ch;margin:0}

/* ---------- PREMISE ---------- */
/* the premise is an intro aside (it recedes once a lane is picked), so it gets a
   tighter vertical rhythm than the shared .ed-sec default (64px floor). It tracks
   whichever axis is tighter — min(5cqw width, 7vh height) — so the top/bottom
   spacing shrinks continuously as you NARROW *or* SHORTEN the viewport, floored at
   16px and capped at 72px on a large screen. (vh, not dvh: a mid-page padding must
   not jitter as the mobile URL bar shows/hides.) id beats .ed-sec; only
   padding-block is overridden so the horizontal var(--pad) gutter stays. */
#premise{padding-block:clamp(16px,min(5cqw,7vh),72px)}
.ed-premise{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(36px,6cqw,80px);align-items:start;
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-md);
  padding:clamp(30px,4cqw,48px);box-shadow:var(--shadow-raise);position:relative;box-sizing:border-box}
.ed-premise::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--blue);
  border-radius:var(--radius-md) var(--radius-md) 0 0}
.ed-pull-col,.ed-ptext{min-width:0}
.ed-premise-kick{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue);display:inline-flex;align-items:center;gap:9px;margin:0 0 20px}
.ed-premise-kick::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ed-pull{font-family:var(--serif);font-style:normal;font-weight:400;
  font-size:clamp(1.55rem,2.9cqw,2.4rem);line-height:1.16;letter-spacing:-.015em;margin:0;color:var(--ink)}
.ed-pull em{font-style:italic;color:var(--blue)}
.ed-ptext p{font-size:1.08rem;color:var(--graphite);line-height:1.65;margin:0 0 18px;max-width:46ch}
.ed-ptext p:last-child{margin-bottom:0}
.ed-ptext strong{font-weight:600;color:var(--ink)}

/* ---------- ABOUT ME ---------- */
.ed-about-head{display:grid;grid-template-columns:300px 1fr;gap:clamp(36px,5cqw,72px);align-items:start}
.ed-portrait{margin:0;display:flex;flex-direction:column;gap:14px;align-self:start}
.ed-portrait img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;
  border:1px solid var(--hairline);border-radius:var(--radius-md);filter:grayscale(1) contrast(1.02)}
.ed-portrait figcaption{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--steel);line-height:1.5}
.ed-about-intro .eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:20px;color:var(--blue)}
.ed-about-intro .eyebrow::before{content:"";width:26px;height:1px;background:currentColor}
.ed-about-intro h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,3.6cqw,2.85rem);
  letter-spacing:-.022em;line-height:1.06;margin:0 0 22px;max-width:18ch;text-wrap:balance}
.ed-about-intro h2 em{font-style:italic;color:var(--blue)}
.ed-bio{font-size:1.16rem;color:var(--graphite);line-height:1.62;max-width:54ch;margin:0 0 28px}
.ed-facts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.ed-facts li{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);border:1px solid var(--hairline);border-radius:2px;padding:8px 12px;background:var(--paper)}

/* ---------- TRUSTED BY (folded into the In-their-words header) ----------
   Logos are monochrome ink via CSS mask (the asset's alpha is the shape), so
   the fill is the --ink token and they auto-invert in dark mode with no extra
   assets. Mask sources live in /assets and are trimmed to their content box;
   the width/height pairs below set the optical size at each logo's aspect. */
.ed-tb-inline{display:flex;flex-direction:column;align-items:flex-end;gap:14px;flex:none}
.ed-tb-inline-label{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--steel);display:flex;align-items:center;gap:12px}
.ed-tb-inline-label::before{content:"";width:24px;height:1px;background:var(--hairline)}
.ed-tb-row{display:flex;align-items:center;gap:clamp(20px,2.4cqw,30px)}
.ed-tb-div{width:1px;height:26px;background:var(--hairline);display:block;flex:none}
.ed-tb-logo{display:block;flex:none;background:var(--ink);opacity:.78;transition:opacity .2s;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
.ed-tb-logo:hover{opacity:1}
.ed-tb-logo--caya{width:62px;height:27px;-webkit-mask-image:url("../assets/logo-caya.svg");mask-image:url("../assets/logo-caya.svg")}
.ed-tb-logo--hj{width:158px;height:15px;-webkit-mask-image:url("../assets/logo-healthjet.png");mask-image:url("../assets/logo-healthjet.png")}
.ed-tb-logo--mohn{width:118px;height:23px;-webkit-mask-image:url("../assets/logo-mohn.png");mask-image:url("../assets/logo-mohn.png")}

/* ---------- IN THEIR WORDS — feedback wall ---------- */
.ed-words-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;
  padding-bottom:30px;margin-bottom:40px;border-bottom:1px solid var(--hairline);flex-wrap:wrap}
.ed-words-head h2{margin:0}
.ed-wall{columns:3;column-gap:24px}
.ed-qc{break-inside:avoid;-webkit-column-break-inside:avoid;background:var(--surface);
  border:1px solid var(--hairline);border-radius:var(--radius-md);padding:28px 28px 24px;
  margin:0 0 24px;transition:box-shadow .25s,transform .25s,border-color .25s}
.ed-qc:hover{box-shadow:var(--shadow-raise);transform:translateY(-2px);border-color:#cfc7b8}
/* hover border is a slightly-stronger hairline; the light literal would glow on a
   dark card, so dark mode steps the dark hairline (#2C3036) up instead. */
body.nightmode .ed-qc:hover{border-color:#3A3F47}
.ed-qc-mark{font-family:var(--serif);font-weight:600;font-size:3.2rem;line-height:.7;
  color:var(--hairline);display:block;height:28px;margin-bottom:2px;user-select:none}
.ed-qc blockquote{font-family:var(--serif);font-weight:400;font-size:1.14rem;line-height:1.5;
  letter-spacing:-.008em;color:var(--ink);margin:0;text-wrap:pretty}
.ed-qc figcaption{display:flex;align-items:center;gap:10px;margin-top:20px;padding-top:15px;
  border-top:1px solid var(--paper-2)}
.ed-qc-tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--steel)}
.ed-qc-lang{font-family:var(--mono);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);
  border:1px solid color-mix(in srgb,var(--blue) 30%,transparent);border-radius:999px;padding:2px 8px;margin-left:auto}
.ed-qc.feat{background:var(--blue);border-color:var(--blue)}
.ed-qc.feat .ed-qc-mark{color:color-mix(in srgb,var(--on-accent) 36%,transparent)}
.ed-qc.feat blockquote{font-style:italic;font-size:1.3rem;line-height:1.46;color:var(--on-accent)}
.ed-qc.feat figcaption{border-top-color:color-mix(in srgb,var(--on-accent) 22%,transparent)}
.ed-qc.feat .ed-qc-tag{color:color-mix(in srgb,var(--on-accent) 70%,transparent)}
.ed-qc.feat .ed-qc-lang{color:var(--on-accent);border-color:color-mix(in srgb,var(--on-accent) 40%,transparent)}
.ed-qc.big blockquote{font-size:1.42rem;line-height:1.34;letter-spacing:-.015em}

/* ---------- PRINCIPLES (always-dark inverted band) ----------
   Pinned to fixed dark literals in BOTH themes. It must NOT flip when
   --ink/--paper invert in night mode, or the hardcoded light body text
   (#B9BDBF) would land on a light background and lose all contrast.
   Night mode just adds a separating border. */
.ed-dark{background:#111315;color:#F6F2EA;padding:clamp(64px,11cqw,130px) var(--pad)}
body.nightmode .ed-dark{border-top:1px solid #2C3036;border-bottom:1px solid #2C3036}
.ed-dark .eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:24px;color:var(--amber)}
.ed-dark .eyebrow::before{content:"";width:26px;height:1px;background:var(--amber)}
.ed-dark h2{font-family:var(--serif);font-weight:400;color:#F6F2EA;
  font-size:clamp(2rem,4cqw,3.1rem);letter-spacing:-.022em;line-height:1.05;margin:0 0 56px;max-width:18ch}
.ed-dark h2 em{font-style:italic;color:var(--amber)}
.ed-prins{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.1)}
.ed-pr{background:#111315;padding:34px 34px}
.ed-pr .n{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--amber);margin-bottom:18px}
.ed-pr b{font-family:var(--serif);font-weight:500;font-size:1.4rem;letter-spacing:-.01em;display:block;margin-bottom:12px;color:#F6F2EA}
.ed-pr p{font-size:1rem;color:#B9BDBF;line-height:1.55;margin:0}

/* ---------- CONTACT ---------- */
.ed-contact{text-align:center;padding:clamp(80px,13cqw,160px) var(--pad)}
.ed-contact .eyebrow{justify-content:center}
.ed-contact h2{margin-left:auto;margin-right:auto}
.ed-contact .btn{margin-top:14px;font-size:1.02rem;padding:16px 36px}
.ed-ctxt{font-family:var(--mono);font-size:.82rem;color:var(--steel);margin-top:24px;letter-spacing:.02em}
.ed-ctxt a{color:var(--blue)}

/* ---------- FOOTER ---------- */
.ed-footer{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  padding:30px var(--pad);border-top:1px solid var(--hairline)}
.ed-footer .mono{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--steel)}
.ed-footer nav{display:flex;gap:20px}
.ed-footer a{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--steel);
  text-decoration:none;cursor:pointer}
.ed-footer a:hover{color:var(--ink)}

@keyframes edRise{from{transform:translateY(14px)}to{transform:none}}

/* ============================================================
   RESPONSIVE — keyed off the .ed-cq container width.
   ============================================================ */
@container ed (max-width:880px){
  .ed-navlinks{display:none}
}
@container ed (max-width:860px){
  .ed-index{grid-template-columns:repeat(2,1fr)}
  .ed-cell:nth-child(2n){border-right:0}
  .ed-cell:nth-child(-n+2){border-bottom:1px solid var(--hairline)}
}
@container ed (max-width:820px){
  .ed-premise{grid-template-columns:1fr;gap:36px}
  .ed-wall{columns:2}
  .ed-about-head{grid-template-columns:200px 1fr;gap:32px;align-items:start}
}
@container ed (max-width:680px){
  .ed-prins{grid-template-columns:1fr}
  .ed-wall{columns:1}
  /* Trusted-by stacks under the title, left-aligned; dividers drop, row wraps.
     width:100% constrains the cluster to the content box so flex-wrap actually
     fires — without it the flex:none cluster sizes to the row's unwrapped
     max-content width and the last logo overflows the viewport (~28px at 390). */
  .ed-tb-inline{align-items:flex-start;width:100%}
  .ed-tb-inline-label::before{display:none}
  .ed-tb-row{flex-wrap:wrap;gap:22px 26px;width:100%}
  .ed-tb-div{display:none}
}

/* ---- MOBILE (≤620px container) ---- */
@container ed (max-width:620px){
  /* NAV — compact bar: tighter gutter, single-line wordmark, label-less switch.
     14px (not 18px) horizontal gutter so the fixed-width nowrap wordmark + right
     cluster clear a 320px viewport — at 18px the theme toggle overflowed by ~2px. */
  .ed-nav{padding:12px 14px;gap:14px}
  .ed-brand{flex:0 0 auto}
  .ed-brand b{font-size:1rem;white-space:nowrap}
  .ed-brand > span{font-size:.5rem;white-space:nowrap;letter-spacing:.05em}
  .ed-nav-right{gap:11px;min-width:0;flex:0 1 auto}
  .ed-nav-right .link{display:none}
  .ed-theme{gap:0;flex:0 0 auto}
  .ed-theme-label{display:none}
  .ed[data-lane]:not([data-lane="none"]) .ed-theme{display:none}
  .ed[data-lane]:not([data-lane="none"]) .ed-lang{display:none}
  .ed-reading{font-size:.62rem;letter-spacing:.04em;padding:5px 9px;gap:6px;
    max-width:120px;overflow:hidden;box-sizing:border-box}
  .ed-reading-pre{display:none}
  .ed-reading b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .ed-reading button{font-size:1rem}
  .ed[data-lane]:not([data-lane="none"]) .ed-reading{max-width:175px}

  /* HERO — a touch tighter on phones; min-height stays the base calc(100svh - --nav-h) */
  .ed-hero{padding-top:clamp(48px,8vh,90px);padding-bottom:48px}
  .ed-cta{gap:18px}

  /* INDEX — one full screen, vertically centred, no scroll */
  .ed-index-wrap{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
    padding:26px var(--pad);box-sizing:border-box}
  .ed-index-head{padding:0 0 16px;align-items:baseline}
  .ed-index-head h2{font-size:1.55rem}
  .ed-index-head .hint{flex-basis:100%;margin-top:5px}
  .ed-index{grid-template-columns:1fr;border-top:1px solid var(--ink)}
  .ed-cell{display:grid;grid-template-columns:1fr 22px;column-gap:14px;align-items:center;
    padding:18px 8px 18px 22px;border-right:0;border-bottom:1px solid var(--hairline);background:none;overflow:visible}
  .ed-cell:last-child{border-bottom:0}
  .ed-cell:nth-child(2n){border-right:0}
  .ed-cell:nth-child(-n+2){border-bottom:1px solid var(--hairline)}
  /* keep content above the floating highlight */
  .ed-cell .n,.ed-cell h3,.ed-cell p,.ed-cell .pick{position:relative;z-index:2}
  .ed-cell .n{grid-column:1;margin-bottom:5px;font-size:.61rem}
  .ed-cell h3{grid-column:1;font-size:1.16rem;margin-bottom:4px}
  .ed-cell p{grid-column:1;font-size:.85rem;line-height:1.4;margin:0}
  .ed-cell .pick{grid-column:2;grid-row:1 / 4;align-self:center;justify-self:end;font-size:0;gap:0}
  .ed-cell .pick::after,
  .ed-cell[data-on="1"] .pick::after{content:"→";font-size:1.05rem;color:var(--steel)}
  .ed-cell:hover .pick::after,.ed-cell[data-on="1"] .pick::after{color:var(--lane)}
  /* an elegant surface "pill" that floats clear of the separator lines */
  .ed-cell:hover,.ed-cell[data-on="1"]{background:none}
  .ed-cell::after{content:"";position:absolute;left:0;right:0;top:6px;bottom:6px;z-index:0;
    background:var(--surface);border-radius:var(--radius-md);
    box-shadow:0 10px 26px -16px rgba(17,19,21,.26);
    opacity:0;transition:opacity .22s ease;pointer-events:none}
  .ed-cell:hover::after,.ed-cell[data-on="1"]::after{opacity:1}
  /* lane accent bar floats inside the pill, also clear of the separators */
  .ed-cell::before{left:13px;top:6px;bottom:6px;height:auto;width:3px;border-radius:3px;z-index:1;
    transform:scaleY(0);transform-origin:center;transition:transform .3s cubic-bezier(.2,.75,.2,1)}
  .ed-cell:hover::before,.ed-cell[data-on="1"]::before{transform:scaleY(1)}

  /* ABOUT — portrait sits above the intro, kept human-scale (not full-bleed) */
  .ed-about-head{grid-template-columns:1fr;gap:24px}
  .ed-portrait{flex-direction:row;align-items:center;gap:16px}
  .ed-portrait img{width:96px;height:96px;flex:none}
  .ed-portrait figcaption{font-size:.6rem}
  .ed-about-intro h2{font-size:1.7rem}
  .ed-bio{font-size:1.04rem}

  /* CONTACT footer path CTAs stack */
  .ed-path .pathcta{flex-direction:column;gap:16px}
}

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