/* Tetri’s Smile · “Quiet” skin (v17)
   The minimal version: white paper, navy ink, nothing else. Thin Outfit display at large sizes, small widely tracked
   capitals, hairlines instead of cards, grayscale photography that returns to colour under the pointer, one outlined
   numeral per chapter, one hairline circle, one translucent navy panel over a photograph. No sky shader, no films.
   Everything is scoped to html[data-skin="quiet"]; Signature and Frost are untouched without the attribute. */
html[data-skin="quiet"]{
  --display:"Outfit","Avenir Next","Segoe UI",system-ui,sans-serif;--body:"Outfit","Avenir Next","Segoe UI",system-ui,sans-serif;--mono:"Outfit",monospace;
  --navy:#0b1324;--navy-2:#0b1324;--steel:#3a4357;--mist:#f4f5f7;--ink:#0b1324;--plane:#f4f5f7;
  --fg:#0b1324;--fg2:#3a4357;--fg3:#7b8596;--ln:rgba(11,19,36,.16);--ln2:rgba(11,19,36,.08);--panel:#fff;--panel-ln:rgba(11,19,36,.12);
}
html[data-skin="quiet"].dark{--fg:#fff;--fg2:#d5dce6;--fg3:#97a3b5;--ln:rgba(255,255,255,.24);--ln2:rgba(255,255,255,.1);--panel:transparent;--panel-ln:rgba(255,255,255,.2)}
html[data-skin="quiet"] body,html[data-skin="quiet"] body.page{background:#fff;color:var(--fg);font:300 17px/1.7 var(--body);letter-spacing:0}
html[data-skin="quiet"] body.page::before{display:none}
html[data-skin="quiet"] ::selection{background:var(--ink);color:#fff}
html[data-skin="quiet"] #gl,html[data-skin="quiet"] .film,html[data-skin="quiet"] .hero__mark,html[data-skin="quiet"] .hero__dash,html[data-skin="quiet"] .ch--wm::before,html[data-skin="quiet"] .phero::after,html[data-skin="quiet"] .ch--media > .media video{display:none!important}

/* ---------- type ---------- */
html[data-skin="quiet"] h1,html[data-skin="quiet"] h2,html[data-skin="quiet"] h3{font-family:var(--display);font-weight:200;letter-spacing:-.025em;line-height:1.02;text-transform:none;text-wrap:balance}
html[data-skin="quiet"] h3{font-weight:300}
html[data-skin="quiet"] .ch h2{font-size:clamp(42px,1.4rem + 4.4vw,100px);max-width:15ch}
html[data-skin="quiet"] .ch--media .ch__body h2,html[data-skin="quiet"] .ch--center h2{font-size:clamp(36px,1.2rem + 3.4vw,76px);max-width:13ch}
html[data-skin="quiet"] .deck{font:300 clamp(16px,.95rem + .3vw,18px)/1.72 var(--body);color:var(--fg2);max-width:46ch}
html[data-skin="quiet"] .lab,html[data-skin="quiet"] .wide,html[data-skin="quiet"] .hero__values,html[data-skin="quiet"] .cta,html[data-skin="quiet"] .btn,html[data-skin="quiet"] .steps b,html[data-skin="quiet"] .price th,html[data-skin="quiet"] .photo .tag,html[data-skin="quiet"] .ba__label,html[data-skin="quiet"] .ba__cap,html[data-skin="quiet"] .media__credit,html[data-skin="quiet"] .field span,html[data-skin="quiet"] .hd__phone,html[data-skin="quiet"] .menu-btn,html[data-skin="quiet"] .lang button,html[data-skin="quiet"] .lang a,html[data-skin="quiet"] .ft__links,html[data-skin="quiet"] .ft small,html[data-skin="quiet"] .mfig figcaption,html[data-skin="quiet"] .quotes figcaption,html[data-skin="quiet"] .timeline b,html[data-skin="quiet"] .card .lines span:last-child,html[data-skin="quiet"] .swipe,html[data-skin="quiet"] .rail a span,html[data-skin="quiet"] .menu__desc,html[data-skin="quiet"] .menu__x,html[data-skin="quiet"] .toc__pct,html[data-skin="quiet"] .phero__meta{font-family:var(--display);font-weight:400;letter-spacing:.32em;text-transform:uppercase}
html[data-skin="quiet"] .lab{font-size:10px;line-height:1.7;color:var(--fg3)}
html[data-skin="quiet"] .ch__label{margin-bottom:34px}
html[data-skin="quiet"] .num{font:200 clamp(38px,1.4rem + 2.2vw,64px)/1 var(--display);letter-spacing:-.04em}
html[data-skin="quiet"] .cta{font-size:10.5px;gap:14px;color:var(--fg)}
html[data-skin="quiet"] .cta i,html[data-skin="quiet"] .cta .ico{width:36px;height:1px;border-radius:0;background:currentColor;color:inherit;transition:width .5s var(--ease);overflow:hidden}
html[data-skin="quiet"] .cta i > *,html[data-skin="quiet"] .cta .ico > *{display:none}
html[data-skin="quiet"] .cta:hover i,html[data-skin="quiet"] .cta:hover .ico{width:60px;transform:none}
html[data-skin="quiet"] .btn{border-radius:0;min-height:50px;padding:0 28px;font-size:10.5px;background:var(--ink);color:#fff;border:1px solid var(--ink)}
html[data-skin="quiet"] .btn--line{background:transparent;color:var(--fg);border:1px solid var(--ln)}
html[data-skin="quiet"] .btn--line:hover{border-color:var(--fg)}
html[data-skin="quiet"] .rule{background:var(--ln);width:min(180px,50%)}

/* ---------- header and menu ---------- */
html[data-skin="quiet"] .hd,html[data-skin="quiet"] .hd.is-top,html[data-skin="quiet"] .page .hd,html[data-skin="quiet"] .page .hd.is-light{background:rgba(255,255,255,.88);border-bottom:1px solid var(--ln2)}
html[data-skin="quiet"].dark .hd{background:rgba(11,19,36,.86);border-bottom-color:rgba(255,255,255,.1)}
html[data-skin="quiet"] .hd__brand svg{width:18px}
html[data-skin="quiet"] .hd__brand .wide{font:400 10.5px/1 var(--display);letter-spacing:.38em;text-transform:uppercase}
html[data-skin="quiet"] .menu-btn{font-size:10.5px;letter-spacing:.34em}
html[data-skin="quiet"] .menu-btn b{background:transparent;color:var(--fg);border:1px solid var(--ln);font-weight:300}
html[data-skin="quiet"] .page .hd .hd__brand,html[data-skin="quiet"] .page .hd .hd__phone,html[data-skin="quiet"] .page .hd .menu-btn,html[data-skin="quiet"] .page .hd .lang a,html[data-skin="quiet"] .page .hd .lang button{color:var(--ink)}
html[data-skin="quiet"] .page .hd .menu-btn b{background:transparent;color:var(--ink);border:1px solid rgba(11,19,36,.3)}
html[data-skin="quiet"] .menu{background:#fff;color:var(--ink)}
html[data-skin="quiet"] .menu__kicker{color:var(--fg3)}
html[data-skin="quiet"] .menu__home .menu__name,html[data-skin="quiet"] .menu__name{font:200 clamp(22px,1rem + 1.3vw,32px)/1.1 var(--display);letter-spacing:-.025em}
html[data-skin="quiet"] .menu__desc{font-size:9.5px;letter-spacing:.22em;color:var(--fg3)}
html[data-skin="quiet"] .menu .lab{color:var(--fg3)}
html[data-skin="quiet"] .menu__x b{border-radius:0}

/* ---------- hero (home): the wordmark on white, a photograph in a tall frame, one hairline circle, a navy panel ---------- */
html[data-skin="quiet"] .hero{position:relative;text-align:left;grid-template-rows:1fr auto;overflow:hidden;background:#fff}
html[data-skin="quiet"] .hero__word{position:relative;z-index:2;text-align:left;align-self:center;width:100%;max-width:1320px;margin-inline:auto;padding:calc(76px + 12vh) var(--gutter) 6vh;box-sizing:border-box}
html[data-skin="quiet"] .hero__values{justify-content:flex-start;gap:0 22px;font-size:10px;letter-spacing:.34em;color:var(--fg3);margin-bottom:clamp(28px,5vh,56px)}
html[data-skin="quiet"] .lockup-x{display:grid;grid-template-columns:auto;gap:0;justify-items:start;max-width:min(58vw,760px)}
html[data-skin="quiet"] .lockup-x__word{display:grid;justify-items:start;text-align:left}
html[data-skin="quiet"] .lockup-x__vr{width:72px;height:1px;background:var(--ln);margin:30px 0 22px}
html[data-skin="quiet"] .hero__word .wm{font:200 clamp(56px,2rem + 7.2vw,156px)/.94 var(--display)!important;letter-spacing:-.035em!important;text-transform:none!important;color:var(--ink)}
html[data-skin="quiet"] .hero__word .sub{font:400 10.5px/1 var(--display)!important;letter-spacing:.42em!important;text-transform:uppercase!important;color:var(--fg3);margin-top:18px}
html[data-skin="quiet"] .hero__word .labw{font:300 clamp(16px,.9rem + .9vw,26px)/1 var(--display)!important;letter-spacing:.3em!important;text-transform:uppercase!important;color:var(--fg2)}
html[data-skin="quiet"] .hero__word > .lab{margin-top:clamp(28px,5vh,52px);font-size:10px;color:var(--fg3)}
html[data-skin="quiet"] .hero__foot{position:relative;z-index:2;border-top:1px solid var(--ln2);margin:0 var(--gutter);padding:20px 0 calc(28px + env(safe-area-inset-bottom,0px));height:auto}
html[data-skin="quiet"] .swipe{font-size:10px;letter-spacing:.34em;color:var(--fg3)}
html[data-skin="quiet"] .q-hero{position:absolute;z-index:1;right:var(--gutter);top:calc(76px + 7vh);width:min(38vw,540px);height:min(72svh,760px);pointer-events:none}
html[data-skin="quiet"] .q-hero__ph{margin:0;position:absolute;inset:0;overflow:hidden;background:var(--plane)}
html[data-skin="quiet"] .q-hero__ph img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;filter:grayscale(1) contrast(1.02);display:block}
html[data-skin="quiet"] .q-hero__panel{position:absolute;left:-22%;bottom:12%;width:64%;padding:clamp(20px,2.4vw,34px);background:rgba(11,19,36,.86);color:#fff;display:grid;gap:14px}
html[data-skin="quiet"] .q-hero__panel .lab{color:#b7c3d3;font-size:9.5px;letter-spacing:.3em}
html[data-skin="quiet"] .q-hero__panel i{display:block;width:100%;height:1px;background:rgba(255,255,255,.3)}
html[data-skin="quiet"] .q-hero__panel svg{width:34px;height:37px;fill:none;stroke:#fff;stroke-width:1.2;opacity:.9}
html[data-skin="quiet"] .q-hero__panel b{font:200 clamp(22px,1rem + 1.2vw,34px)/1.1 var(--display);letter-spacing:-.02em;color:#fff}
html[data-skin="quiet"] .q-ring{position:absolute;left:-34%;top:-12%;width:118%;aspect-ratio:1;border:1px solid var(--ln);border-radius:50%;pointer-events:none}
html[data-skin="quiet"] .q-hero .lab{margin:0}

/* ---------- chapters: white planes, hairlines, an outlined numeral top right ---------- */
html[data-skin="quiet"] .ch{min-height:auto;border-top:1px solid var(--ln2);padding-block:clamp(120px,16vh,200px) clamp(96px,14vh,170px);background:transparent;color:var(--fg)}
html[data-skin="quiet"] body .ch[data-theme="dark"]:not([data-quiet="dark"]),html[data-skin="quiet"] body .ch[data-theme="light"],html[data-skin="quiet"] body .hero[data-theme="dark"],html[data-skin="quiet"] body .hero[data-theme="light"]{background:#fff}
html[data-skin="quiet"] body .ch[data-quiet="dark"]{background:var(--navy)}
html[data-skin="quiet"] body .ft,html[data-skin="quiet"] body.page .ft{background:#fff}
html[data-skin="quiet"] .ch > .wrap{position:relative;z-index:1}
html[data-skin="quiet"] .ch[data-n]::after{content:attr(data-n);position:absolute;right:calc(var(--gutter) + 44px);top:clamp(22px,3.5vh,40px);z-index:0;font:200 clamp(72px,2.4rem + 6.2vw,150px)/1 var(--display);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px rgba(11,19,36,.3);pointer-events:none}
html[data-skin="quiet"] .ch[data-quiet="dark"]{background:var(--navy);color:#fff;border-top:0}
html[data-skin="quiet"] .ch[data-quiet="dark"]::after{-webkit-text-stroke-color:rgba(255,255,255,.4)}
html[data-skin="quiet"] .ch[data-quiet="dark"] .lab,html[data-skin="quiet"] .ch[data-quiet="dark"] .deck,html[data-skin="quiet"] .ch[data-quiet="dark"] .photo .tag{color:#aab6c8}
html[data-skin="quiet"] .ch[data-quiet="dark"] h2,html[data-skin="quiet"] .ch[data-quiet="dark"] .cta,html[data-skin="quiet"] .ch[data-quiet="dark"] .num{color:#fff}
html[data-skin="quiet"] .ch[data-quiet="dark"] .rule,html[data-skin="quiet"] .ch[data-quiet="dark"] .facts li.panel,html[data-skin="quiet"] .ch[data-quiet="dark"] .grid3 > .panel{border-color:rgba(255,255,255,.22);background:transparent}
html[data-skin="quiet"] .ch[data-quiet="dark"] .btn{background:#fff;color:var(--ink);border-color:#fff}
html[data-skin="quiet"] .ch--center{text-align:left}
html[data-skin="quiet"] .ch--center .ch__body{margin-inline:0;max-width:min(52%,640px)}
html[data-skin="quiet"] .ch--center .deck,html[data-skin="quiet"] .ch--center .rule{margin-inline:0}
html[data-skin="quiet"] .ch--center .ch__cta,html[data-skin="quiet"] .ch--center .cta{justify-content:flex-start}
/* photographs: a tall frame at the right, grayscale until the pointer rests on it */
html[data-skin="quiet"] .ch--media > .media{position:absolute;inset:calc(clamp(22px,3.5vh,40px) + clamp(72px,2.4rem + 6.2vw,150px) + 20px) calc(var(--gutter) + 44px) auto auto;left:auto;width:min(40%,560px);height:clamp(420px,56vh,640px);background:transparent;border-radius:0;overflow:hidden;transition:filter .9s}
html[data-skin="quiet"] .ch--media > .media::after{background:none}
html[data-skin="quiet"] .ch--media > .media img,html[data-skin="quiet"] .photo img,html[data-skin="quiet"] .phero__img img,html[data-skin="quiet"] .mfig img,html[data-skin="quiet"] .card img,html[data-skin="quiet"] .q-hero__ph img{filter:grayscale(1) contrast(1.03);transition:filter .9s var(--ease)}
html[data-skin="quiet"] .ch--media:hover > .media img,html[data-skin="quiet"] .photo:hover img,html[data-skin="quiet"] .mfig:hover img,html[data-skin="quiet"] .card:hover img,html[data-skin="quiet"] .phero__img:hover img{filter:none}
html[data-skin="quiet"] .ch--media .ch__body{max-width:min(50%,620px);min-height:calc(clamp(420px,56vh,640px) + 60px)}
html[data-skin="quiet"] #intro .ch__body{min-height:0}
html[data-skin="quiet"] .ch--media .grid3,html[data-skin="quiet"] .ch--media .ba-grid,html[data-skin="quiet"] .ch--media .quotes,html[data-skin="quiet"] .ch--media .proc{position:relative;z-index:1}
/* the first chapter: the photograph fills the right half and the text sits in a translucent navy panel that crosses its edge */
html[data-skin="quiet"] #intro{padding-block:0;min-height:min(92svh,900px);display:flex;align-items:center}
html[data-skin="quiet"] #intro > .media{inset:0 0 0 48%;width:auto;height:auto}
html[data-skin="quiet"] #intro .ch__body{position:relative;max-width:min(58%,700px);background:rgba(11,19,36,.9);color:#fff;padding:clamp(30px,4.2vw,64px) clamp(28px,4vw,60px);margin-block:clamp(72px,10vh,120px)}
html[data-skin="quiet"] #intro .ch__body .lab{color:#aab6c8}
html[data-skin="quiet"] #intro .ch__body h2,html[data-skin="quiet"] #intro .ch__body .cta{color:#fff}
html[data-skin="quiet"] #intro .ch__body .deck{color:#dbe3ee}
html[data-skin="quiet"] #intro .ch__body .rule{background:rgba(255,255,255,.3)}
html[data-skin="quiet"] #intro::after{-webkit-text-stroke-color:rgba(255,255,255,.55);top:auto;bottom:clamp(20px,4vh,48px)}
/* tiles, facts, steps, tables: hairlines instead of cards */
html[data-skin="quiet"] .panel{background:transparent;border:0;border-top:1px solid var(--ln);border-radius:0;box-shadow:none}
html[data-skin="quiet"] .split{gap:48px clamp(48px,6vw,96px)}
html[data-skin="quiet"] .photo{border-radius:0;border:0}
html[data-skin="quiet"] .photo .tag,html[data-skin="quiet"] .ba__label,html[data-skin="quiet"] .ba__cap{background:#fff;color:var(--ink);border-radius:0;font-size:9.5px;letter-spacing:.3em;padding:8px 10px}
html[data-skin="quiet"] .facts{gap:0 40px;margin-top:44px}
html[data-skin="quiet"] .facts li.panel{padding:18px 0 0;min-width:140px}
html[data-skin="quiet"] .grid3{gap:0 40px;margin-top:48px}
html[data-skin="quiet"] .grid3 > .panel{padding:24px 0 26px;border-right:0;border-bottom:0}
html[data-skin="quiet"] .proc .lab{color:var(--fg);font-weight:400}
html[data-skin="quiet"] .steps{gap:0 32px}
html[data-skin="quiet"] .steps > *{border-top:1px solid var(--ln);border-right:0;border-radius:0;padding:18px 0 0}
html[data-skin="quiet"] .price th,html[data-skin="quiet"] .price td{border-bottom:1px solid var(--ln2)}
html[data-skin="quiet"] blockquote{font:200 clamp(20px,1rem + .9vw,28px)/1.35 var(--display);letter-spacing:-.02em;border-left:1px solid var(--ln);padding-left:22px}
html[data-skin="quiet"] .quotes{gap:0 40px}
html[data-skin="quiet"] .quotes > *{border-top:1px solid var(--ln);border-right:0;border-radius:0;padding:22px 0 0}
html[data-skin="quiet"] .card{border:1px solid var(--ln2);border-radius:0;padding:28px}
html[data-skin="quiet"] .ba{border-radius:0}
html[data-skin="quiet"] .rail a span{font-size:9.5px;letter-spacing:.26em}

/* ---------- footer ---------- */
html[data-skin="quiet"] .ft,html[data-skin="quiet"] .page .ft{background:#fff;color:var(--ink);border-top:1px solid var(--ln2);padding-top:72px}
html[data-skin="quiet"] .ft .ft__mark,html[data-skin="quiet"] .page .ft .ft__mark{color:var(--ink)}
html[data-skin="quiet"] .ft__links{font-size:10px;letter-spacing:.3em;color:var(--fg2)}
html[data-skin="quiet"] .ft small{color:var(--fg3);letter-spacing:.14em;font-size:9.5px}
html[data-skin="quiet"] .ft::before{content:"Tetri’s Smile · Laboratory";display:block;text-align:center;font:400 10px/1 var(--display);letter-spacing:.42em;text-transform:uppercase;color:var(--fg3);margin-bottom:34px}

/* ---------- inner pages ---------- */
html[data-skin="quiet"] .phero,html[data-skin="quiet"] .mag .phero{background:#fff;color:var(--ink);min-height:min(80vh,780px);padding-top:calc(76px + env(safe-area-inset-top,0px) + clamp(56px,10vh,120px));padding-bottom:clamp(48px,8vh,96px);border-bottom:1px solid var(--ln2);display:flex;align-items:flex-end}
html[data-skin="quiet"] .phero::before{display:none}
html[data-skin="quiet"] .phero__img{inset:calc(76px + 3vh) var(--gutter) 10% auto;left:auto;width:min(36vw,500px);overflow:hidden;background:var(--plane)}
html[data-skin="quiet"] .phero__img img{opacity:1;object-position:60% 50%}
html[data-skin="quiet"] .phero__img::after{background:none}
html[data-skin="quiet"] .phero > .wrap::before{content:"";position:absolute;right:-4%;top:-14%;width:min(34vw,480px);aspect-ratio:1;border:1px solid var(--ln);border-radius:50%;pointer-events:none}
html[data-skin="quiet"] .phero .lab,html[data-skin="quiet"] .mag .phero .lab{color:var(--fg3);margin-bottom:26px}
html[data-skin="quiet"] .phero h1,html[data-skin="quiet"] .mag .phero h1{color:var(--ink);text-shadow:none;font-weight:200;font-size:clamp(44px,1.6rem + 4.8vw,112px);letter-spacing:-.035em;max-width:12ch;line-height:.98}
html[data-skin="quiet"] .phero .lead,html[data-skin="quiet"] .mag .phero .lead{color:var(--fg2);font:300 clamp(16px,.95rem + .35vw,19px)/1.7 var(--body);max-width:48ch;margin-top:30px}
html[data-skin="quiet"] .phero .lead p{margin:0 0 12px}
html[data-skin="quiet"] .phero__meta{color:var(--fg3);font-size:9.5px;letter-spacing:.3em}
html[data-skin="quiet"] .phero__meta span::before{background:currentColor}
html[data-skin="quiet"] .lcta{color:var(--ink);border-color:var(--ln)}
html[data-skin="quiet"] .lcta small{color:var(--fg3)}
html[data-skin="quiet"] .lcta .lplay::before{background:var(--ink)}
html[data-skin="quiet"] .lcta .lplay{color:#fff}
html[data-skin="quiet"] .article,html[data-skin="quiet"] .mag .article{max-width:66ch}
html[data-skin="quiet"] .article h2,html[data-skin="quiet"] .mag .article h2{color:var(--ink);font:300 clamp(28px,1.1rem + 1.8vw,46px)/1.08 var(--display);letter-spacing:-.03em;margin:0 0 18px}
html[data-skin="quiet"] .article p,html[data-skin="quiet"] .article li{font:300 17px/1.75 var(--body)}
html[data-skin="quiet"] .article section{border-top:1px solid var(--ln2);padding-top:44px}
html[data-skin="quiet"] .mag .article section.first > h2 + p{font:300 clamp(18px,1rem + .5vw,22px)/1.6 var(--body);color:var(--fg)}
html[data-skin="quiet"] .mag .article section.first > h2 + p::first-letter{float:none;font:inherit;margin:0;color:inherit}
html[data-skin="quiet"] .guide__article h2[data-n]::before{font-weight:400;letter-spacing:.34em;color:var(--fg3)}
html[data-skin="quiet"] .mfig img{border-radius:0;background:var(--plane)}
html[data-skin="quiet"] .mfig figcaption{color:var(--fg3);font-size:9.5px;letter-spacing:.28em;padding-top:12px}
html[data-skin="quiet"] .pull{border-left:0;border-top:1px solid var(--ln2);border-bottom:1px solid var(--ln2);padding:30px 0}
html[data-skin="quiet"] .pull p{font:200 clamp(24px,1rem + 1.8vw,42px)/1.15 var(--display);letter-spacing:-.03em;color:var(--ink)}
html[data-skin="quiet"] .aside .panel{background:transparent;border:0;border-top:1px solid var(--ln);border-radius:0;box-shadow:none;padding:20px 0 4px}
html[data-skin="quiet"] .aside .panel .lab{color:var(--fg3)}
html[data-skin="quiet"] .toc__list{border-left-color:var(--ln2)}
html[data-skin="quiet"] .toc__list a.is-on{border-left-color:var(--ink);color:var(--ink)}
html[data-skin="quiet"] .toc__list a b{letter-spacing:.2em}
html[data-skin="quiet"] .lcard{border-radius:0;border-color:var(--ln2)}
html[data-skin="quiet"] .pcta{background:#fff;color:var(--ink);position:relative;overflow:hidden;border-top:1px solid var(--ln2)}
html[data-skin="quiet"] .pcta::before{content:"";position:absolute;right:8vw;top:50%;width:min(36vw,440px);aspect-ratio:1;transform:translateY(-50%);border:1px solid var(--ln);border-radius:50%;pointer-events:none}
html[data-skin="quiet"] .pcta h2{color:var(--ink);font-weight:200;font-size:clamp(30px,1.2rem + 2.4vw,56px);letter-spacing:-.03em}
html[data-skin="quiet"] .pcta p{color:var(--fg2)}
html[data-skin="quiet"] .pcta .btn{background:var(--ink);color:#fff}
html[data-skin="quiet"] .pcta .btn--line{background:transparent;color:var(--ink);border-color:var(--ln)}
html[data-skin="quiet"] .faq h3{font-weight:400}
html[data-skin="quiet"] .gloss dt{font-weight:400;color:var(--ink)}
html[data-skin="quiet"] .related{border-top:1px solid var(--ln2);padding-top:22px}

/* ---------- widgets: ink instead of navy where it shows on white ---------- */
html[data-skin="quiet"] .tbtn{background:var(--ink);box-shadow:0 10px 30px rgba(11,19,36,.25)}
html[data-skin="quiet"] .tbtn::before{display:none}
html[data-skin="quiet"] .tocfab,html[data-skin="quiet"] .tocfab .ring::before,html[data-skin="quiet"] .ldock,html[data-skin="quiet"] .lplay::before{background:var(--ink)}
html[data-skin="quiet"] .lcta .lplay::before{background:var(--ink)}
html[data-skin="quiet"] .mbar{background:rgba(255,255,255,.96);border-top-color:var(--ln2)}
html[data-skin="quiet"] .modal__in,html[data-skin="quiet"] .tocsheet__in{border-radius:0}
html[data-skin="quiet"]:not(.dark) body:not(.page) .hd .hd__brand .sheen,html[data-skin="quiet"] .page .hd .hd__brand .sheen{color:var(--ink)}
html[data-skin="quiet"] .tsn__card{font-family:var(--body)}

@media (max-width:900px){
  html[data-skin="quiet"] .hero__word{padding-top:calc(76px + 6vh);padding-bottom:0}
  html[data-skin="quiet"] .lockup-x{max-width:none}
  html[data-skin="quiet"] .q-hero{position:relative;right:auto;top:auto;width:auto;height:46svh;margin:30px var(--gutter) 0;z-index:1}
  html[data-skin="quiet"] .q-hero__panel{left:0;bottom:0;width:min(72%,320px)}
  html[data-skin="quiet"] .q-ring{left:auto;right:-30%;top:-26%;width:70%}
  html[data-skin="quiet"] .hero{grid-template-rows:auto auto auto}
  html[data-skin="quiet"] .hero__word{order:1}
  html[data-skin="quiet"] .q-hero{order:2}
  html[data-skin="quiet"] .hero__foot{order:3}
  html[data-skin="quiet"] .ch--media > .media{position:relative;inset:auto;width:auto;height:40svh;margin:0 var(--gutter) 34px}
  html[data-skin="quiet"] .ch--media{flex-direction:column;align-items:stretch}
  html[data-skin="quiet"] .ch--media .ch__body,html[data-skin="quiet"] .ch--center .ch__body{max-width:none}
  html[data-skin="quiet"] #intro{min-height:auto;padding-block:0 clamp(64px,10vh,96px);flex-direction:column}
  html[data-skin="quiet"] #intro > .media{position:relative;inset:auto;height:46svh;margin:0 0 0;width:100%}
  html[data-skin="quiet"] #intro .ch__body{max-width:none;margin:-48px var(--gutter) 0;padding:28px 24px}
  html[data-skin="quiet"] .ch[data-n]::after{font-size:clamp(72px,3rem + 8vw,120px);top:18px}
  html[data-skin="quiet"] .phero,html[data-skin="quiet"] .mag .phero{display:block;min-height:auto;padding-top:calc(76px + env(safe-area-inset-top,0px) + 18px)}
  html[data-skin="quiet"] .phero__img{position:relative;inset:auto;width:auto;height:44svh;margin:0 0 28px}
  html[data-skin="quiet"] .phero > .wrap::before{display:none}
  html[data-skin="quiet"] .grid3 > .panel{border-right:0}
  html[data-skin="quiet"] .steps{gap:0}
}