/* Synthena, the soft build (python build_v3.py --soft -> site-v3/soft/). Loaded after site.css; changes nothing in the
   other builds. Two orders from the owner, 2026-09-21:
   COLOUR, to soothe the eye: lavender and lilac, each heavily diluted with white or grey so less light reaches the
   eye; cool like blue, with the harshness of red muted. So: no pure white, no near-black, no saturated violet, and the
   amber accent becomes a pale champagne. Every text pair is measured by tools/qa/palette_v3.py.
   LAYOUT, as Altos Labs does it, with our information: only the home page opens edge to edge; every other page opens
   on a framed, rounded panel under a solid header; pictures are rounded; dark bands are inset rounded panels; long
   bands that nearly touch. */
body.soft{
  --ink:#211C4D; --ink2:#2C2660; --paper:#F7F5FB; --mist:#ECE8F5; --lilac:#DCD3EE; --line:rgba(33,28,77,.14); --lineL:rgba(255,255,255,.2);
  --amber:#D9A23C; --amber2:#F0CD84; --uv:#60549C; --uv2:#A897E0; --text:#221E3E; --muted:#5E5A7C; --mutedL:#CFC8E8;          /* 2026-09-22: deeper ink, a real gold used small, grounds still diluted (tools/qa/palette_v3.py) */
  --rad:16px; --gut:20px;          /* measured on Altos: corners 16 px, panels 20 px from the window's edges */
}
body.soft :focus-visible{outline-color:var(--uv)}body.soft .on-dark :focus-visible,body.soft .ftr :focus-visible{outline-color:var(--amber2)}
body.soft .hdr.solid{background:rgba(247,245,251,.93);color:var(--text)}
body.soft .menu .pill:hover{background:var(--lilac);border-color:var(--lilac);color:var(--text)}
body.soft .dark p,body.soft .cta p,body.soft .reach-note{color:#E4E0F3}body.soft .opening .lead{color:#F1EDFB}body.soft .opening.clear .lead{color:#fff}
body.soft .row.press .whenrow b{color:#7D6128}
body.soft .record,body.soft .form input,body.soft .form select,body.soft .form textarea,body.soft .search input{background:#FDFCFF}
body.soft .form input:focus,body.soft .form select:focus,body.soft .form textarea:focus{outline-color:rgba(96,84,156,.35)}
body.soft .cta{background:linear-gradient(120deg,#211C4D 0,#3B3282 60%,#6A5BB8 100%)}
body.soft .seg i{background:rgba(47,43,76,.1)}body.soft .seg i.now::before{background:linear-gradient(90deg,var(--uv),var(--uv2))}
body.soft .prog .stage::before{background:var(--uv2)}body.soft .founder blockquote{border-left-color:var(--uv2)}
body.soft .record{box-shadow:0 30px 60px -44px rgba(47,43,76,.35)}



/* rounded pictures and figures */
body.soft .plate,body.soft .steps.pics .plate{border-radius:var(--rad)}body.soft .plate::before{border-radius:calc(var(--rad) - 9px)}body.soft .steps.pics .plate{border-radius:18px}
body.soft .record,body.soft .fig{border-radius:18px}body.soft .route,body.soft .nots div{border-radius:12px}body.soft .form input,body.soft .form select,body.soft .form textarea{border-radius:12px}
body.soft .plate:not(.filled){background:radial-gradient(60% 70% at var(--gx,70%) var(--gy,28%),hsla(var(--h,252),52%,78%,.6),transparent 70%),radial-gradient(45% 55% at calc(100% - var(--gx,70%)) 88%,rgba(233,214,172,.34),transparent 72%),linear-gradient(135deg,#4A437F,#2F2B4C)}

/* dark bands become inset rounded panels */
body.soft .band.dark,body.soft .cta{margin:var(--gut);border-radius:var(--rad);overflow:hidden}

/* inner pages open on a framed, rounded panel under a solid header */
body.soft:not([data-page="index"]) .opening{min-height:420px;height:min(860px,calc(100svh - var(--hdr) - 26px));margin:calc(var(--hdr) + 6px) var(--gut) 0;border-radius:var(--rad)}          /* the Altos panel: 1400 x 860 in a 1440 window */

body.soft:not([data-page="index"]) .opening:not([data-slot]){height:clamp(300px,44svh,460px)}
body.soft:not([data-page="index"]) .opening .over{padding-top:2.4rem;padding-left:clamp(20px,4.6vw,88px);padding-right:clamp(20px,4.6vw,88px)}
body.soft .opening .shot::after{background:linear-gradient(90deg,rgba(47,43,76,.66) 0,rgba(47,43,76,.28) 48%,rgba(47,43,76,0) 78%),linear-gradient(180deg,rgba(47,43,76,.08) 0,rgba(47,43,76,0) 40%,rgba(47,43,76,.6) 100%)}
body.soft .opening .air{background:radial-gradient(38% 46% at 78% 30%,rgba(185,173,227,.55),transparent 70%),radial-gradient(30% 36% at 18% 84%,rgba(233,214,172,.28),transparent 72%),radial-gradient(46% 50% at 52% 58%,rgba(106,94,163,.55),transparent 75%),var(--ink)}
body.soft .opening .grid{opacity:.6}

/* the home platform band as an Altos photo panel: the picture is the panel's ground, the words sit over its left */
body.soft[data-page="index"] .band.dark{padding:0}
body.soft[data-page="index"] .band.dark .split{position:relative;display:flex;align-items:flex-end;min-height:clamp(460px,78svh,760px);max-width:none;padding:clamp(2.4rem,5vw,4.6rem) clamp(20px,4.6vw,88px)}
body.soft[data-page="index"] .band.dark .split>div:first-child{position:absolute;inset:0}
body.soft[data-page="index"] .band.dark .split>div:first-child .plate{height:100%;aspect-ratio:auto;border-radius:0}
body.soft[data-page="index"] .band.dark .split>div:first-child::after{content:"";position:absolute;inset:0;z-index:4;background:linear-gradient(90deg,rgba(47,43,76,.9) 0,rgba(47,43,76,.72) 34%,rgba(47,43,76,.18) 62%,rgba(47,43,76,0) 80%)}
body.soft[data-page="index"] .band.dark .split>div:last-child{position:relative;z-index:5;max-width:34rem}
@media (max-width:900px){body.soft[data-page="index"] .band.dark .split>div:first-child::after{background:linear-gradient(180deg,rgba(47,43,76,.35) 0,rgba(47,43,76,.88) 55%)}}

/* TYPE AND DECORATION, as Altos does it (measured: references/altos-layout-2026-09-21/settings.json; seen: about-full.jpg), the owner's order of
   2026-09-22: "Only quote is serif. Other can be sans ... make it clean". One sans heading size everywhere at 60 px and weight 400; labels 12 px,
   bold, uppercase, in the text colour; paragraphs 21 px; plain pill buttons; thin rules as the only lines; no dots, numbers, borders or shadows. */
body.soft h1,body.soft h2,body.soft h3,body.soft .part h3,body.soft .news1 h3,body.soft .prog h3,body.soft .statement,body.soft .values .about h3,body.soft .founder .fh{font-family:var(--sans);font-weight:400;letter-spacing:-.018em;text-wrap:balance}
body.soft h1,body.soft h2,body.soft .prog h3,body.soft .statement,body.soft .news1 h3,body.soft .founder .fh{font-size:clamp(2.1rem,1.3rem + 2.6vw,3.75rem);line-height:1.08;margin-bottom:.45em}
body.soft .part h3{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem);line-height:1.15}body.soft .values .about h3{font-size:1.25rem;font-weight:500;letter-spacing:-.01em}body.soft .prose h2{font-size:clamp(1.6rem,1.3rem + 1vw,2.2rem)}
body.soft blockquote{font-family:var(--serif);font-size:clamp(1.55rem,1.2rem + 1.3vw,2.35rem);line-height:1.28}          /* the one serif on the site: the founder's own words */
body.soft .lead,body.soft .opening .lead{font-size:clamp(1.12rem,1.02rem + .36vw,1.34rem);line-height:1.5}body.soft .lead{max-width:34em}
body.soft .rec,body.soft .prog .stage{font-family:var(--label);font-stretch:100%;font-weight:700;font-size:.76rem;letter-spacing:.09em;color:var(--text);margin-bottom:1.1rem}
body.soft .on-dark .rec,body.soft .dark .rec,body.soft .opening .rec{color:#fff}body.soft .prog .stage::before{display:none}
body.soft .btn{font-weight:400;font-size:1.02rem;border-width:0}body.soft .btn.ghost,body.soft .on-dark .btn.ghost{border-width:1px}
body.soft .fig{border:0;background:rgba(255,255,255,.06)}body.soft .record{box-shadow:none;border:1px solid var(--line)}
body.soft .plate::before{display:none}body.soft .plate .no{display:none}          /* an empty place shows its caption only */
@media (max-width:900px){body.soft:not([data-page="index"]) .opening{aspect-ratio:auto;min-height:0;height:clamp(380px,64svh,620px);margin-left:12px;margin-right:12px}body.soft .band.dark,body.soft .cta{margin:12px}}          /* on a phone the panel keeps its frame but not its desktop shape: 420 px of height at 1.63 would be wider than the screen */

/* THE PICTURE FILLS THE WINDOW (what Altos really does; seen side by side on 2026-09-22, references/altos-layout-2026-09-21/about-full.jpg):
   a band is as tall as its picture, the picture takes half the width and most of a window's height, bands nearly touch, and the ground is one
   colour from top to bottom. Air is what is left over, never something added. */
body.soft .mist{background:var(--paper)}
body.soft .band{padding:clamp(1.3rem,2.4vw,2.4rem) 0}body.soft .band.tight{padding:clamp(1.3rem,2.4vw,2.4rem) 0}
body.soft .band:not(:has(.plate)):not(.dark){padding:clamp(2.4rem,4vw,4rem) 0}          /* a band of words alone keeps room to breathe */
body.soft .band.dark,body.soft .cta{padding:clamp(3rem,5.5vw,5.5rem) 0}body.soft[data-page="index"] .band.dark{padding:0}
@media (min-width:901px){body.soft .split,body.soft .founder .split,body.soft .prog{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,4.6vw,5.4rem)}}          /* only where there is room for two columns: on a phone the one-column rule must win */
body.soft .plate[style*="--r:3/4"]{max-width:none}          /* the upright picture fills its half: about 600 x 800 in a 1440 window, as Altos's 637 x 860 */
body.soft .prog{padding:clamp(.7rem,1.3vw,1.3rem) 0;border-top:0}
body.soft .values .stick{top:calc(var(--hdr) + 1rem)}
@media (min-width:1000px){body.soft[data-page="index"] main>.band.dark .split{min-height:calc(100svh - 2*var(--gut))}}          /* the home photograph band is one window of picture, as on Altos */
/* the three steps: a full-width row of three picture cards, captions under, instead of three thumbnails inside a box */
body.soft .part:has(.steps.pics){grid-template-columns:1fr;gap:1.6rem}body.soft .part:has(.steps.pics)>*{order:1;max-width:46rem}body.soft .part:has(.steps.pics)>*:has(.steps){order:2;max-width:none}
body.soft .fig:has(.steps.pics){border:0;padding:0}body.soft .fig:has(.steps.pics) .ft{display:none}
body.soft .steps.pics{gap:var(--gut)}body.soft .steps.pics>div{padding-right:0}body.soft .steps.pics .plate{margin-bottom:1.1rem;border-radius:var(--rad)}
@media (max-width:700px){body.soft .steps.pics{gap:1.6rem}}

/* THE HEADER: the wordmark at the left, the menu as plain larger text in the middle with thin separators, the page you are on in a heavier
   weight, Contact as a pill at the right (his order of 2026-09-23: no pill group). On a phone the drawer stays as it was. */
body.soft{--hdr:96px}
@media (min-width:901px){
  body.soft .hdr .in{position:relative;justify-content:center}
  body.soft .hdr .brand{position:absolute;left:var(--pad);top:50%;transform:translateY(-50%)}body.soft .brand svg{height:27px}
  body.soft .menu{gap:0}body.soft .menu a{font-size:1.1rem;padding:.6rem 1.25rem;font-weight:400;letter-spacing:-.005em}body.soft .menu a::after{display:none}
  body.soft .menu li+li:not(:last-child){border-left:1px solid rgba(255,255,255,.35)}body.soft .menu a[aria-current=page]{font-weight:600}body.soft .menu a:hover{opacity:.75}
  body.soft .menu li:last-child{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%)}
  body.soft .menu .pill{border:1px solid currentColor;background:transparent;padding:.6rem 1.25rem;font-size:1.05rem}body.soft .menu .pill:hover{background:#fff;border-color:#fff;color:var(--text);opacity:1}
  body.soft .hdr.solid .menu li+li:not(:last-child){border-left-color:rgba(33,28,77,.25)}body.soft .hdr.solid .menu .pill:hover{background:var(--ink);border-color:var(--ink);color:#fff}
}
/* the page label above an inner opening's headline, as Altos writes ABOUT or SCIENCE above its own */
body.soft:not([data-page="index"]) .opening .over::before{display:block;font-family:var(--label);font-weight:700;font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:#fff;margin-bottom:1rem}
body.soft[data-page="platform"] .opening .over::before{content:"PDRN platform"}body.soft[data-page="pipeline"] .opening .over::before{content:"Pipeline"}body.soft[data-page="company"] .opening .over::before{content:"Company"}
body.soft[data-page="news"] .opening .over::before{content:"News"}body.soft[data-page="contact"] .opening .over::before{content:"Contact"}body.soft[data-page="legal"] .opening .over::before{content:"Legal"}
/* the home first screen: the film is seen as it is; the letters keep a soft shadow of their own, no colour over the picture */
body.soft .opening.clear .lead{color:#fff}