/* THE STYLE SYSTEM (28 Oct 2026, STYLE-SYSTEM.md; Peter: "define a top down style approach"). The one token and parts layer.
   Loaded LAST on every page (gen/site_nav.py SYSTEM, after the page's own <style>), so it is the one source for type, corners,
   buttons, tags, tiles, list rows, numbers, the hero and the closing band. Scoped by body#ps, which outranks any class rule
   without !important. Folds in the old site-brand.css (retired). Brand values only through var(--ps-*) (brand/brand.css).
   Sizes: Daria's brandbook p34, approved by Peter 28 Oct 09:54 (the mock gen: scratchpad mocks/pagecopy/after-type.css). */

:root{--sys-body:20px;--sys-lede:22px;--sys-h1:80px;--sys-h2:48px;--sys-tag:12px;--sys-btn:16px;--sys-num:72px;--sys-gut:96px;
  --sys-rule:var(--ps-line-strong,#C9CDCA);--sys-ink2:var(--ps-ink-2,#4E5963);--sys-ink3:var(--ps-ink-3,#666F77)}
@media (max-width:900px){:root{--sys-gut:24px;--sys-num:56px}}
@media (max-width:600px){:root{--sys-body:17px;--sys-lede:18px;--sys-h1:44px;--sys-h2:34px;--sys-num:48px;--sys-gut:16px}}

/* 1 · TYPE. Donegal One for headlines only; Satoshi for body, labels and every number (rule 9, "more Satoshi") */
body{font-size:var(--sys-body);line-height:1.5}
p,li,dd,dt{font-size:var(--sys-body);line-height:1.5}
.lede{font-size:var(--sys-lede);line-height:1.45;max-width:30em}
h2{font-size:var(--sys-h2);line-height:1.08}
#ps h1{font-size:var(--sys-h1);line-height:1.02}
#ps :is(div,span,p,a,i,b,em,small,strong,li,dd,dt,button,label,td,th,figcaption,summary,dl,ol,ul){font-family:var(--ps-font-body)}
#ps :is(h1,h2,h3,h4) :is(b,i,em,span,small,strong,a){font-family:inherit}
#ps .brand,#ps .lrow b{font-family:var(--ps-font-head)}
h1:has(b),h2:has(b){color:var(--ps-ink-2)}
h1 b,h2 b{color:var(--ps-ink)}
h1,h2,h3{text-wrap:balance;overflow-wrap:break-word}
.brand{font-family:var(--ps-font-head);font-weight:400;letter-spacing:0}

/* 2 · NUMBERS (rule 9): Satoshi Light, large and thin, the label small underneath, the figures between thin rules */
#ps :is(.fig,.num b,.num b em,.kf,.mf,.hubfigs b,.tfigs b,.live .big,.live .big span,.cnum2 b,.fnode span,.jl i,.cl i,.pkr i,.story .fig,.stop b,.nrow b,.rg b,.cnum b,.ffig b,.sfig b){font-family:var(--ps-font-body);font-weight:300;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
#ps .num b small,#ps .nrow b small{font-weight:300}

/* 3 · CORNERS (rule 6): square everywhere; the sources carry border-radius:0, this is the guard */
#ps :is(.btn,button,img,video,.tile,.tag,.kind,.chip,.lg,.card){border-radius:0}

/* 4 · ONE BUTTON PAIR (rule 4): primary filled, secondary outlined; inverted on navy */
#ps .btn{font-family:var(--ps-font-body);font-weight:500;font-size:var(--sys-btn);line-height:1;padding:16px 24px;border-radius:0;display:inline-flex;gap:10px;align-items:center;border:1px solid transparent;white-space:nowrap}
#ps .btn.dark{background:var(--ps-midnight-navy);color:var(--ps-warm-white);border-color:var(--ps-midnight-navy)}
#ps .btn.line{background:transparent;color:var(--ps-midnight-navy);border-color:var(--ps-midnight-navy)}
#ps .btn.dark:hover{background:var(--ps-ink-2)}
#ps .btn.line:hover{background:var(--ps-midnight-navy);color:var(--ps-warm-white)}
#ps :is(.hero1,.close1,section.film:not(.film-light),.dark) .btn.dark{background:var(--ps-warm-white);color:var(--ps-midnight-navy);border-color:var(--ps-warm-white)}
#ps :is(.hero1,.close1,section.film:not(.film-light),.dark) .btn.line{background:transparent;color:var(--ps-warm-white);border-color:rgba(246,247,242,.7)}
#ps :is(.hero1,.close1,section.film:not(.film-light),.dark) .btn.line:hover{background:rgba(246,247,242,.12)}
#ps nav#nav .btn{font-size:15px;padding:12px 18px}
@media (max-width:900px){#ps nav#nav .btn{font-size:13px;padding:10px 12px}}
@media (max-width:600px){#ps .btn{font-size:15px;padding:14px 18px;white-space:normal}}

/* 5 · ONE TAG (rule 4): small caps on a short rule; the kind chips become the same tag, no pill */
#ps .tag{font-size:var(--sys-tag);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sys-ink3);display:flex;align-items:center;gap:12px}
#ps .tag::before{content:"";width:22px;height:1px;background:currentColor}
#ps .kind,#ps .chip{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:0;background:none;border:0;color:var(--sys-ink3);border-radius:0}
#ps .kind::before,#ps .chip::before{content:"";width:14px;height:1px;background:currentColor}

/* 6 · ONE TILE (rule 4, 16): image on top, square, no box; a headline and one line under it */
.tile{display:block;color:inherit}
.tile .pic{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--ps-soft-grey)}
.tile .pic img{width:100%;height:100%;object-fit:cover;display:block}
.tile h3{font-size:24px;margin-top:20px}
.tile p{font-size:15px;line-height:1.45;color:var(--sys-ink2);margin-top:8px}

/* 7 · ONE LIST ROW (rule 4): a title, one line, an arrow, on a thin rule */
.lrow{display:grid;grid-template-columns:minmax(120px,200px) 1fr 16px;gap:24px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line);font-size:15px;color:inherit}
.lrow b{font-weight:400;font-size:20px}
.lrow span{color:var(--sys-ink2);line-height:1.4}
@media (max-width:600px){.lrow{grid-template-columns:1fr 16px}.lrow span{grid-column:1}}

/* 8 · THE NUMBER ROW (rule 9): the live site's library row */
.nrow{display:grid;grid-template-columns:repeat(var(--n,4),1fr);border-top:1px solid var(--ps-ink);border-bottom:1px solid var(--ps-ink)}
.nrow>*{padding:36px 28px 34px;border-left:1px solid var(--line)}
.nrow>*:first-child{border-left:0;padding-left:0}
.nrow b{display:block;font-size:var(--sys-num);line-height:1;white-space:nowrap}
.nrow b small{font-size:.38em;letter-spacing:0;margin-right:6px;vertical-align:.9em}
.nrow span{display:block;margin-top:16px;font-size:15px;line-height:1.4;color:var(--sys-ink2);max-width:16em}
@media (max-width:900px){.nrow{grid-template-columns:1fr 1fr}.nrow>*:nth-child(3){border-left:0;padding-left:0}.nrow>*:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:600px){.nrow>*{padding:24px 12px 22px}}

/* 9 · BRAND MOMENTS (from site-brand.css): the glass nav after scroll, the grain on the hero */
nav.sc{background:color-mix(in srgb,var(--ps-warm-white) 62%,transparent);backdrop-filter:blur(20px) saturate(1.1);-webkit-backdrop-filter:blur(20px) saturate(1.1)}
.dark,.space{background-color:var(--ps-midnight-navy)}
.dark h1:has(b),.dark h2:has(b),.space h2:has(b){color:var(--ps-steel-blue)}
.dark h1 b,.dark h2 b,.space h2 b{color:var(--ps-warm-white)}

/* 10 · THE ONE HERO (rules 1, 2; decision A1): navy, the headline left, one visual right, one square button pair. gen/site_nav.py hero() */
.hero1{position:relative;isolation:isolate;min-height:min(100vh,960px);display:flex;align-items:center;padding:132px 0 96px;background:var(--ps-midnight-navy);color:var(--ps-warm-white);overflow:hidden}
.hero1>.wrap{position:relative;z-index:2;width:100%}
.hero1 .h1copy{max-width:660px}
#ps .hero1 h1{color:var(--ps-steel-blue);margin:0}
#ps .hero1 h1 b{color:var(--ps-warm-white)}
#ps .hero1 .lede{color:rgba(246,247,242,.84);margin-top:28px}
.hero1 .btns{margin-top:40px}
#ps .hero1 :is(.tag,.crumb,.crumb a){color:var(--ps-steel-blue)}
.hero1 .tag,.hero1 .crumb,.hero1 .lock{margin-bottom:28px}
.hero1 .crumb{font-size:13px;letter-spacing:.04em}
.hero1 .lock{display:block;width:180px;height:auto}
.h1vis{position:absolute;top:0;right:0;bottom:0;width:62%;z-index:1}
.h1vis>img{width:100%;height:100%;object-fit:cover;object-position:var(--fp,50% 50%);display:block}
.h1vis.fade{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%)}
.hero1:has(.h1vis.full) .h1copy{max-width:600px}
.h1vis.full{width:72%;bottom:auto;height:min(100%,100vh);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%),linear-gradient(180deg,#000 82%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 34%),linear-gradient(180deg,#000 82%,transparent);mask-composite:intersect} /* the film fills one screen, not the whole hero, so the mark keeps its size and sits whole on the right (Peter 28 Oct) */
.h1vis.full video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:22% 50%} /* v3 has the mark centred in frame: this puts the whole mark on the right of the page (Peter 28 Oct) */
.h1vis.full::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,28,44,.6) 0%,rgba(13,28,44,0) 40%)}
.hero1:has(.h1vis.screen) .h1copy,.hero1:has(.h1vis.grip) .h1copy{max-width:min(620px,46%)}
.h1vis.screen{left:auto;width:min(40%,700px);right:var(--sys-gut);display:flex;flex-direction:column;justify-content:center;gap:10px}
.h1vis.screen>img{height:auto;object-fit:contain;box-shadow:0 40px 90px -40px rgba(0,0,0,.6)}
.h1cap{font-size:11px;color:rgba(246,247,242,.55);align-self:flex-end}
.h1vis.grip{width:44%;display:flex;align-items:center;justify-content:center;padding:72px 56px}
.h1vis.grip .gfr{width:100%}
/* a key figure or two in the hero: Satoshi Light between thin rules, never a box (rules 7, 9) */
.h1fig,.h1figs{margin-top:48px;border-top:1px solid rgba(246,247,242,.3);padding-top:20px;max-width:560px}
.h1figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:24px}
#ps .hero1 :is(.h1fig,.h1figs) b{display:block;font-size:48px;line-height:1;color:var(--ps-warm-white);font-weight:300}
.hero1 :is(.h1fig,.h1figs) span{display:block;margin-top:10px;font-size:15px;line-height:1.4;color:rgba(246,247,242,.78)}
.hero1 .h1fig .kind,.hero1 .h1fig summary,.hero1 .h1fig .srcd p{color:rgba(246,247,242,.7)}
.hero1 .h1fig .srcd{margin-top:10px}
.hero1 .jl{margin-top:28px}
/* THE HERO FITS ONE SCREEN on a laptop or desktop, nothing cut at the fold, like Wonderful's (Peter 28 Oct 2026 14:01: "reducing
   hero font to make hero fit on one screen"): the headline scales with the screen's height as well as its width, the gaps tighten,
   and the Home panel is compact. Phones keep their own sizes. */
@media (min-width:901px){
  .hero1{min-height:100vh;padding:96px 0 36px}
  #ps .hero1 h1{font-size:clamp(34px,min(4.2vw,6vh),72px);line-height:1.04}
  .hero1 :is(.h1fig,.h1figs){margin-top:clamp(14px,2.2vh,32px);padding-top:clamp(10px,1.6vh,20px)}
  #ps .hero1 :is(.h1fig,.h1figs) b{font-size:clamp(32px,4.6vh,48px)}
  #ps .hero1 .lede{margin-top:clamp(14px,2.2vh,24px);font-size:clamp(17px,2.3vh,22px)}
  .hero1 .btns{margin-top:clamp(18px,3vh,32px)}
  .hero1 .tag,.hero1 .crumb,.hero1 .lock{margin-bottom:clamp(14px,2.2vh,24px)}
  .hero1 .jl{margin-top:clamp(14px,2.2vh,24px)}
  .h1panel{margin-top:clamp(16px,2.8vh,32px)}
  #ps .h1panel .live{padding:clamp(12px,1.8vh,20px) 22px 10px}
  #ps .h1panel .live .big{font-size:clamp(28px,4.4vh,44px);margin:4px 0 0}
  #ps .h1panel .ex{margin-top:clamp(6px,1vh,12px);padding-top:clamp(4px,.8vh,10px)}
  #ps .h1panel .feed{min-height:0}
  #ps .h1panel .feed .row{padding:clamp(4px,.7vh,8px) 0}
}
/* the Home value-in-play panel (decision 09:36: Home hero only, styled as on the live site) */
.h1panel{margin-top:40px;max-width:480px}
#ps .h1panel .live{width:auto;margin:0;background:rgba(13,28,44,.55);border:1px solid rgba(246,247,242,.22);box-shadow:none;color:var(--ps-warm-white);backdrop-filter:blur(6px)}
#ps .h1panel .live *{color:var(--ps-warm-white)}
#ps .h1panel .live .big{font-size:44px}
#ps .h1panel .live .exp{border:1px solid rgba(246,247,242,.4);background:none;padding:4px 10px}
@media (max-width:900px){
  .hero1{flex-direction:column;align-items:stretch;min-height:0;padding:104px 0 0}
  .hero1 .h1copy,.hero1:has(.h1vis.screen) .h1copy,.hero1:has(.h1vis.grip) .h1copy,.hero1:has(.h1vis.full) .h1copy{max-width:none}
  .h1vis,.h1vis.screen,.h1vis.grip{position:relative;order:2;width:100%;right:auto;height:auto;margin-top:48px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%);mask-image:linear-gradient(180deg,transparent 0,#000 30%)}
  .h1vis>img{height:auto;aspect-ratio:16/10}
  .h1vis.screen{padding:0 var(--sys-gut) 40px;-webkit-mask-image:none;mask-image:none}
  .h1vis.screen>img{aspect-ratio:auto}
  .h1vis.grip{padding:40px var(--sys-gut);-webkit-mask-image:none;mask-image:none}
  .h1vis.full{position:relative;width:100%;height:auto;aspect-ratio:1/1;margin-top:8px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 80%,transparent);mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 80%,transparent)}
  .h1vis.full video{object-position:50% 50%}
  .h1vis.full::after{display:none}
  /* phone, every hero: headline and buttons, then the picture or film, then the numbers (Peter 28 Oct 12:34 Home, 16:37 every
     page: "Image before nmbs on phone") */
  .hero1>.wrap,.hero1 .h1copy{display:contents}
  .hero1 .h1copy>*{order:1;padding-inline:var(--sys-gut)}
  .hero1 .h1vis{order:2}
  .hero1 .h1copy>:is(.h1panel,.h1fig,.h1figs,.jl){order:3;padding-inline:0;margin-inline:var(--sys-gut)}
  .hero1 .h1copy>:is(.h1fig,.h1figs,.jl):last-child,.hero1 .h1copy>.h1panel{margin-bottom:56px}
}

/* 11 · THE ONE CLOSING BAND (rules 11, 12): navy, the logo resting on the water at right; only the headline changes. gen/site_nav.py closing() */
.close1{position:relative;isolation:isolate;min-height:600px;display:flex;align-items:center;padding:112px 0;background:var(--ps-midnight-navy);color:var(--ps-warm-white);overflow:hidden}
.close1 .c1img{position:absolute;top:0;right:0;width:66%;height:100%;object-fit:cover;object-position:62% 50%;z-index:0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 36%);mask-image:linear-gradient(90deg,transparent 0,#000 36%)}
.close1>.wrap{position:relative;z-index:1;width:100%}
.close1 .c1copy{max-width:560px}
#ps .close1 h2{color:var(--ps-steel-blue);margin:0}
#ps .close1 h2 b{color:var(--ps-warm-white)}
#ps .close1 .lede{color:rgba(246,247,242,.84);margin-top:24px}
.close1 .btns{margin-top:36px}
@media (max-width:900px){
  .close1{flex-direction:column;align-items:stretch;min-height:0;padding:0 0 72px}
  .close1 .c1img{position:relative;order:-1;width:100%;height:auto;aspect-ratio:4/3;object-position:70% 50%;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
}

/* 12 · the pages of the legal line (a heading and one line until they are written) */
.stub{padding:180px 0 120px}

/* 10 · THE CAROUSEL (rule 13): one rotating carousel for every set (stories, plug-ins, tools), Apple homepage style;
   the current slide centred, its neighbours peeking, slow advance, held on hover and focus; JS in carousel.js */
.car{position:relative;margin-top:8px;overflow:hidden}
.track{display:flex;gap:24px;transition:transform 1.2s cubic-bezier(.2,.8,.2,1);will-change:transform}
.slide{flex:0 0 min(880px,82vw);transition:opacity .8s}
.slide:not(.cur){opacity:.4}
.slide .pic{aspect-ratio:16/9;overflow:hidden;background:var(--ps-soft-grey)}
.slide .pic img{width:100%;height:100%;object-fit:cover;display:block}
.cctl{display:flex;justify-content:center;align-items:center;gap:24px;margin-top:40px}
.cctl .dots{display:flex;gap:10px}
.cctl .dots button{all:unset;cursor:pointer;width:28px;height:12px;background:linear-gradient(var(--line),var(--line)) center/100% 2px no-repeat}
.cctl .dots button[aria-current="true"]{background-image:linear-gradient(var(--ink),var(--ink))}
.cctl .arr{all:unset;cursor:pointer;width:40px;height:40px;border:1px solid var(--ink);display:grid;place-items:center;font-size:16px}
.cctl .arr:hover{background:var(--ink);color:var(--ps-warm-white)}
.cctl .cpause{all:unset;cursor:pointer;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);border-bottom:1px solid currentColor}
.slide .cap{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-top:20px}
.slide .cap b{font-weight:400;font-size:20px;margin-right:12px}
.slide .cap span{font-size:15px;color:var(--sys-ink2);line-height:1.4}
.slide .cap a{white-space:nowrap;font-size:15px;border-bottom:1px solid currentColor}
@media (max-width:600px){.slide .cap{flex-direction:column;gap:6px}}
.car.sm .slide{flex:0 0 min(400px,78vw)}
.car.sm .slide:not(.cur){opacity:1}
.car .slide .pic{display:block}

/* 13 · ONE SECTION HEAD (Peter 28 Oct 2026 review, 15:37 to 15:49: the side line floated top right of its headline). The tag, the headline and its
   one line read as one block, the line under the headline, left aligned, on every page: .bh (Home, Company, legal), .sh (the built
   pages), .head2 (the older pages). The pages' own two-column rules stay in their sources; this layer, loaded last, wins. */
#ps :is(.bh,.sh,.head2){display:block;text-align:left}
#ps :is(.bh,.sh,.head2)>:is(p,.lede){margin:20px 0 0;max-width:34em}
#ps :is(.bh,.sh,.head2) h2{margin-bottom:0}
#ps :is(.bh,.sh,.head2) .tag+h2{margin-top:20px}

/* 14 · ANCHORS (Peter 28 Oct 2026): a link to a section lands under the sticky menu, not behind it: menu height + 24px */
:root{--sys-navh:73px}
@media (max-width:900px){:root{--sys-navh:64px}}
#ps [id]{scroll-margin-top:calc(var(--sys-navh) + 24px)}

/* 15 · THE MENU BUTTON OVER A NAVY HERO (Peter 28 Oct 2026: navy on navy, it disappeared on Tools). Unscrolled over the hero it is the
   hero's own primary button, warm white with navy text; once scrolled (.sc) or opened, the normal navy button. */
#ps:has(section.film-top) nav#nav:not(.sc):not(.open) .btn.dark,#ps:has(.gh) nav#nav:not(.sc):not(.open) .btn.dark{background:var(--ps-warm-white);color:var(--ps-midnight-navy);border-color:var(--ps-warm-white)}
#ps:has(section.film-top) nav#nav:not(.sc):not(.open) .btn.dark:hover,#ps:has(.gh) nav#nav:not(.sc):not(.open) .btn.dark:hover{background:var(--ps-ice-blue,#E4ECF2);border-color:var(--ps-ice-blue,#E4ECF2)}