/* ===================================================================== DopaFix — site stylesheet Sources: the DopaFix logo (flower gradient, wordmark purple), the owner's "Cognitive Editorial Dark" design doc. The book jackets (2026-10 "Bloom") use the same dark + flower. See docs/DOPAFIX-DESIGN.md. Nothing here is shared with LYLLAK. ===================================================================== */ /* ---------- Fonts (self-hosted, OFL) ---------- */ @font-face{font-family:"Newsreader";font-style:normal;font-weight:300 600;font-display:swap;src:url(/assets/fonts/newsreader-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Newsreader";font-style:normal;font-weight:300 600;font-display:swap;src:url(/assets/fonts/newsreader-normal-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Newsreader";font-style:italic;font-weight:300 500;font-display:swap;src:url(/assets/fonts/newsreader-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Newsreader";font-style:italic;font-weight:300 500;font-display:swap;src:url(/assets/fonts/newsreader-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/inter-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/inter-normal-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} /* ---------- Tokens ---------- */ :root{ --bg:#121314; --surface:#1A1C1E; --card:#1F2226; --line:#2A2D32; --line-2:#3A3E44; --text:#F5F1EA; --muted:#A5AAA8; --p1:#F5A91D; --p2:#F3982C; --p3:#F0814A; --p4:#EE6A56; --p5:#E94477; --p6:#E73387; --bloom:linear-gradient(120deg,#F5A91D 0%,#F3982C 25%,#EE6A56 55%,#E94477 80%,#E73387 100%); --story:#7044C2; --story-light:#A98BF0; --cream:#F7F0DE; --paper:#F7F0DE; --ink:#1B1A1E; --ink-muted:#5A5650; --serif:"Newsreader",Georgia,"Times New Roman",serif; --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --gut:clamp(1rem,4vw,3rem); --max:1240px; --r-sm:12px; --r:20px; --r-lg:28px; --ease:cubic-bezier(.22,.7,.15,1); --top-h:72px; } /* ---------- Base ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--top-h) + 1rem);overflow-x:clip} body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip} img{display:block;max-width:100%;height:auto} a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px} p a,li a,dd a{text-decoration:underline} h1,h2,h3{margin:0;font-family:var(--serif);font-weight:400;line-height:1.05;letter-spacing:-.02em;text-wrap:balance} p{margin:0;text-wrap:pretty} button,input,select,textarea{font:inherit;color:inherit} em{font-style:italic} /* the one phrase that matters, set like the book covers: italic, in petal colour */ h1 em,h2 em,.hero__title em{font-style:italic;background:var(--bloom);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em} :focus-visible{outline:2px solid var(--p2);outline-offset:3px;border-radius:6px} .skip{position:absolute;inset-inline-start:var(--gut);top:-100px;z-index:100;background:var(--cream);color:var(--ink);padding:.7rem 1rem;border-radius:var(--r-sm);font-weight:600} .skip:focus{top:1rem} .linkbtn{background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:.2em;font-size:inherit} .eyebrow{font:600 .8rem/1.2 var(--sans);letter-spacing:.04em;color:var(--p2)} .h1{font-size:clamp(2.6rem,6vw,4.8rem)} .h2{font-size:clamp(2.1rem,4.4vw,3.4rem)} .h3{font-size:clamp(1.5rem,2.4vw,2rem)} .link{font-weight:600;text-decoration:none;color:var(--p2);white-space:nowrap} .link:hover{text-decoration:underline} .ticks{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.6rem} .ticks li{position:relative;padding-inline-start:1.7rem;color:var(--muted)} .ticks li::before{content:"";position:absolute;inset-inline-start:0;top:.5em;width:.75rem;height:.75rem;border-radius:70% 0 70% 0;background:var(--bloom);transform:rotate(45deg)} /* ---------- Buttons: pills, the flower gradient for the one main action ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.75rem 1.4rem;border-radius:999px;border:1.5px solid transparent; font:600 1rem/1.1 var(--sans);text-decoration:none;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s,background-color .2s,border-color .2s,color .2s;-webkit-tap-highlight-color:transparent} .btn--bloom{background:var(--bloom);color:#1A1210} .btn--bloom:hover{transform:translateY(-1px);box-shadow:0 8px 28px -6px #ee6a5680} .btn--bloom:active{transform:translateY(0)} .btn--quiet{border-color:var(--line-2);color:var(--text);background:transparent} .btn--quiet:hover{border-color:var(--p2)} .btn--sm{min-height:40px;padding:.5rem 1rem;font-size:.92rem} .btn--lg{min-height:56px;padding:.9rem 1.8rem;font-size:1.06rem} .btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none} /* ---------- Header ---------- */ .top{position:sticky;top:0;z-index:50;height:var(--top-h);display:flex;align-items:center;gap:1.5rem;padding:0 var(--gut);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s} .top.is-scrolled{border-bottom-color:var(--line)} .top__logo{display:block;width:132px;margin-inline-end:auto;flex:none} .top__nav{display:flex;gap:.2rem} .top__nav a{padding:.5rem .8rem;border-radius:999px;text-decoration:none;color:var(--muted);font-weight:500;transition:color .2s,background-color .2s;white-space:nowrap} .top__nav a:hover{color:var(--text)} .top__nav a[aria-current="page"]{color:var(--text);background:var(--card)} .top__menu{display:none;min-height:44px;padding:.4rem 1rem;border-radius:999px;border:1.5px solid var(--line-2);background:none;font-weight:600;cursor:pointer} .sheet{position:fixed;inset:var(--top-h) 0 0;z-index:45;background:var(--bg);padding:1.5rem var(--gut) 2rem;display:flex;flex-direction:column;gap:1.5rem;overflow:auto} .sheet[hidden]{display:none} html.is-menu-open{overflow:hidden} html.is-menu-open .sheet{overscroll-behavior:contain} .sheet nav{display:grid} .sheet nav a{padding:1rem 0;border-bottom:1px solid var(--line);font:400 2rem/1.1 var(--serif);text-decoration:none} .sheet__note{color:var(--muted);font-size:.9rem} /* ---------- The flower ---------- */ .flower{display:block;width:100%;height:auto;overflow:visible} .flower .petal{transform-box:view-box;transform-origin:0 0;transition:opacity .35s var(--ease),filter .35s} .flower .centre{fill:var(--bg);stroke:var(--story);stroke-width:2.5;transition:fill .3s} .flower--outline .petals,.flower--outline .petal{fill:none!important} .flower--outline .petal{stroke:var(--line-2);stroke-width:1.5;vector-effect:non-scaling-stroke} .flower--outline .centre{stroke:var(--line-2)} /* ---------- Hero ---------- */ .hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:clamp(2rem,5vw,5rem);max-width:var(--max);margin:0 auto;padding:clamp(3rem,8vw,6.5rem) var(--gut) clamp(3rem,7vw,6rem);position:relative} .hero::before{content:"";position:absolute;right:-10%;top:-10%;width:70%;height:90%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,#f5a91d1c,transparent 70%)} .hero__title{font-size:clamp(2.9rem,7vw,6.2rem);line-height:.98;letter-spacing:-.03em} .hero__title em{display:block} .hero__lede{max-width:34ch;margin-top:1.75rem;font:400 clamp(1.15rem,1.6vw,1.35rem)/1.5 var(--serif);color:var(--muted)} .hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-top:2.25rem} .hero__meta{display:flex;gap:1.1rem;color:var(--muted);font-size:.95rem} .hero__meta span{display:inline-flex;align-items:center;gap:.5rem} .hero__meta span+span::before{content:"";width:.45rem;height:.45rem;border-radius:70% 0 70% 0;background:var(--p4);transform:rotate(45deg)} .hero__note{margin-top:1.25rem;font-size:.92rem;color:var(--muted);display:flex;align-items:center;gap:.6rem} .hero__note::before{content:"";width:1.2rem;height:2px;background:var(--bloom)} .hero__flower{position:relative;max-width:460px;width:100%;justify-self:center} .hero__flower .petal{cursor:pointer} .hero__petal{min-height:3.2em;margin-top:1.25rem;text-align:center;font:italic 400 clamp(1.15rem,1.7vw,1.4rem)/1.35 var(--serif);color:var(--text)} .hero__petal b{display:block;font:600 .8rem/1.4 var(--sans);font-style:normal;letter-spacing:.04em;color:var(--p2)} .flower[data-focus] .petal{opacity:.22} .flower[data-focus] .petal.is-on{opacity:1;filter:drop-shadow(0 0 14px #f5a91d55)} /* bloom: petals unfold from the centre, one after another (load moment) */ @media (prefers-reduced-motion:no-preference){ html.js .flower--hero .petal{animation:bloom .9s var(--ease) both} html.js .flower--hero .petal:nth-child(2){animation-delay:.08s} html.js .flower--hero .petal:nth-child(3){animation-delay:.16s} html.js .flower--hero .petal:nth-child(4){animation-delay:.24s} html.js .flower--hero .petal:nth-child(5){animation-delay:.32s} html.js .flower--hero .petal:nth-child(6){animation-delay:.4s} html.js .flower--hero .centre{animation:centre .6s var(--ease) .7s both} } @keyframes bloom{from{opacity:0;scale:.15}} @keyframes centre{from{opacity:0;scale:0}} /* ---------- Sections ---------- */ .section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:1rem 2rem;align-items:end;max-width:var(--max);margin:0 auto 2.5rem} .section-head p{color:var(--muted);max-width:44ch} /* Recognition */ .recog{max-width:var(--max);margin:0 auto;padding:clamp(4rem,9vw,7rem) var(--gut)} .recog__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem 3rem;align-items:end;margin-bottom:2.5rem} .recog__head p{color:var(--muted);max-width:46ch} .recog__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} .recog__list li{border-bottom:1px solid var(--line)} .recog__list summary{display:grid;grid-template-columns:9.5rem minmax(0,1fr) auto;align-items:baseline;gap:1rem;padding:1.35rem .25rem;cursor:pointer;list-style:none} .recog__list summary::-webkit-details-marker{display:none} .recog__list summary::after{content:"+";font:300 1.6rem/1 var(--sans);color:var(--muted);transition:transform .3s var(--ease)} .recog__list details[open] summary::after{transform:rotate(45deg)} .recog__name{display:inline-flex;align-items:center;gap:.6rem;font:600 .85rem/1.2 var(--sans);letter-spacing:.03em;color:var(--muted)} .recog__name::before{content:"";width:.8rem;height:.8rem;border-radius:70% 0 70% 0;transform:rotate(45deg);background:var(--c,var(--p2))} .recog__list q{font:400 clamp(1.45rem,2.8vw,2.3rem)/1.2 var(--serif);quotes:"\201C" "\201D";transition:color .2s} .recog__list summary:hover q{color:#fff} .recog__list details p{padding:0 .25rem 1.5rem calc(9.5rem + 1.25rem);color:var(--muted);max-width:calc(60ch + 10rem)} .recog__list details p a{color:var(--text)} .recog__story{margin-top:2rem;color:var(--muted);max-width:68ch} .recog__story em{color:var(--text);font-family:var(--serif);font-size:1.2em} .recog__dot{display:inline-block;width:.8rem;height:.8rem;margin-inline-end:.7rem;border-radius:50%;border:2.5px solid var(--story);vertical-align:-.05em} [data-area="starting"]{--c:var(--p2)}[data-area="time"]{--c:var(--p4)}[data-area="focus"]{--c:var(--p6)} [data-area="organisation"]{--c:var(--p5)}[data-area="finishing"]{--c:var(--p3)}[data-area="overwhelm"]{--c:var(--p1)}[data-area="story"]{--c:var(--story-light)} /* Screening teaser */ .screen-teaser{max-width:var(--max);margin:0 auto;padding:0 var(--gut) clamp(4rem,9vw,7rem)} .screen-teaser__card{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4rem);align-items:center;padding:clamp(1.75rem,5vw,4rem);border-radius:var(--r-lg);background:radial-gradient(90% 70% at 0% 0%,#f5a91d14,transparent 60%),var(--surface);border:1px solid var(--line)} .screen-teaser__flower{max-width:300px;width:100%;justify-self:center} .screen-teaser__text p{margin-top:1rem;color:var(--muted);max-width:52ch} .screen-teaser__text .btn{margin-top:2rem} /* Why */ .why{max-width:var(--max);margin:0 auto;padding:0 var(--gut) clamp(4rem,9vw,7rem)} /* one editorial statement in the books' voice, not a features trio */ .why__label{font:600 .8rem/1.2 var(--sans);letter-spacing:.04em;color:var(--p2)} .why__statement{margin-top:1.25rem;max-width:30ch;font:400 clamp(1.8rem,3.6vw,3rem)/1.22 var(--serif);letter-spacing:-.015em;color:var(--muted)} .why__statement em{font-style:italic;color:var(--text)} /* ---------- Library (the "Bloom" book jackets: the site's dark page, a warm bloom glow; each book in its petal colour) ---------- */ .library{background:radial-gradient(60% 55% at 88% 0%,#e944772b,transparent 62%),radial-gradient(45% 50% at 0% 100%,#7044c22e,transparent 65%),var(--surface);border-block:1px solid var(--line);color:var(--text);padding:clamp(4rem,9vw,7rem) var(--gut)} .library__inner{max-width:var(--max);margin:0 auto} .library__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:1rem 2rem;align-items:end} .library__head p{color:var(--muted);max-width:44ch} .library .link{color:var(--p2)} .library__head--page{grid-template-columns:minmax(0,1fr);max-width:52rem} .library__head--page .eyebrow{color:var(--p2)} .shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,3vw,2.5rem);margin-top:clamp(2.5rem,5vw,4rem)} .shelf__fallback{color:var(--muted)} .book{display:grid;align-content:start;gap:.9rem} .book__cover{position:relative;border-radius:4px 10px 10px 4px;overflow:hidden;box-shadow:0 30px 50px -24px #000c,0 2px 0 #ffffff10 inset;transition:transform .5s var(--ease)} .book__cover::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0006 0,#0000 3%,#ffffff12 4%,#0000 7%);pointer-events:none} .book:hover .book__cover{transform:translateY(-6px) rotate(-.6deg)} .book__petal{display:inline-flex;align-items:center;gap:.5rem;font:600 .78rem/1.2 var(--sans);letter-spacing:.04em;color:var(--muted)} .book__petal::before{content:"";width:.7rem;height:.7rem;border-radius:70% 0 70% 0;transform:rotate(45deg);background:var(--c)} .book h3{font-size:1.65rem;color:var(--text)} .book__short{font:italic 400 1.15rem/1.4 var(--serif);color:var(--c,var(--p4))} .book__desc{color:var(--muted);font-size:.98rem} .book__buy{justify-self:start;margin-top:.25rem} .book__fmt{font-size:.82rem;color:var(--muted)} .book .btn--quiet{border-color:#ffffff33;color:var(--text)} .book .btn--quiet:hover{border-color:var(--c,var(--p2))} .library__fine{margin-top:3rem;font-size:.88rem;color:var(--muted);max-width:70ch} /* ---------- Tools ---------- */ .tools-teaser{max-width:var(--max);margin:0 auto;padding:clamp(4rem,9vw,7rem) var(--gut)} .tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem} .tool{position:relative;display:grid;grid-template-rows:auto 1fr;border-radius:var(--r);background:var(--card);border:1px solid var(--line);overflow:hidden} .tool__img{aspect-ratio:928/700;object-fit:cover;width:100%;background:#2a2620} .tool__img--none{display:grid;place-items:center;aspect-ratio:928/700;background:radial-gradient(60% 60% at 50% 40%,#f5a91d1f,transparent 70%),var(--surface)} .tool__img--none svg{width:34%} .tool__body{display:grid;align-content:start;gap:.55rem;padding:1.25rem 1.35rem 1.5rem} .tool h3{font-size:1.35rem} .tool__fmt{font-size:.85rem;color:var(--muted)} .tool__short{color:var(--muted);font-size:.96rem} .status{display:inline-flex;align-items:center;gap:.45rem;justify-self:start;padding:.25rem .7rem;border-radius:999px;font:600 .75rem/1.3 var(--sans);letter-spacing:.02em;border:1px solid var(--line-2);color:var(--muted)} .status::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:currentColor} .status--published{color:#9fe3b4;border-color:#9fe3b455} .status--in_production,.status--qa,.status--ready{color:var(--p1);border-color:#f5a91d55} .status--idea{color:var(--muted)} .catalogue{max-width:var(--max);margin:0 auto;padding:0 var(--gut) clamp(3rem,6vw,5rem);display:grid;gap:3rem} .catalogue__group h2{font-size:1.8rem;margin-bottom:1.25rem} .catalogue__group p.catalogue__note{margin:-.75rem 0 1.25rem;color:var(--muted)} /* ---------- Guides ---------- */ .guides-teaser{max-width:var(--max);margin:0 auto;padding:0 var(--gut) clamp(4rem,9vw,7rem)} /* guides read like a book's contents page, not a row of blog cards */ .guide-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} .guide-list li{border-bottom:1px solid var(--line)} .guide-list a{display:grid;grid-template-columns:9.5rem minmax(0,1fr) minmax(0,1fr);align-items:baseline;gap:.4rem 1.5rem;padding:1.3rem .25rem;text-decoration:none} .guide-list b{font:400 clamp(1.4rem,2.4vw,1.9rem)/1.15 var(--serif);transition:color .2s} .guide-list a:hover b{color:#fff;text-decoration:underline;text-decoration-color:var(--c);text-decoration-thickness:2px;text-underline-offset:.18em} .guide-list span:last-child{color:var(--muted);font-size:.98rem} .guide-list__area{display:inline-flex;align-items:center;gap:.5rem;font:600 .78rem/1.2 var(--sans);letter-spacing:.04em;color:var(--muted)} .guide-list__area::before{content:"";width:.7rem;height:.7rem;border-radius:70% 0 70% 0;transform:rotate(45deg);background:var(--c)} .guides-index{max-width:var(--max);margin:0 auto;padding:0 var(--gut) clamp(4rem,9vw,7rem)} /* ---------- Final call ---------- */ .app-teaser{max-width:var(--max);margin:0 auto;padding:clamp(4rem,9vw,7rem) var(--gut);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem,6vw,5rem);align-items:center} .app-teaser__art{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:0;min-height:260px;border-radius:var(--r-lg);background:radial-gradient(70% 70% at 50% 85%,#2C2044,transparent 70%),var(--surface);border:1px solid var(--line);padding:2rem 1rem} .app-teaser__art img{width:min(32%,170px);filter:drop-shadow(0 16px 24px #000a)} .app-teaser__art img:nth-child(2){width:min(38%,200px);margin:0 -4%;position:relative;z-index:1} .app-teaser__copy .h2{margin-top:.6rem} .app-teaser__copy p{color:var(--muted);max-width:42ch;margin:1rem 0 0} .app-teaser__copy .app-teaser__facts{color:var(--text);font-weight:500;font-size:.95rem} .app-teaser__copy .btn{margin-top:1.6rem} @media (max-width:820px){.app-teaser{grid-template-columns:1fr}} .final{display:grid;justify-items:center;text-align:center;gap:1.1rem;padding:clamp(4rem,10vw,8rem) var(--gut);background:radial-gradient(50% 60% at 50% 0%,#ee6a561f,transparent 70%);border-top:1px solid var(--line)} .flower--final{width:88px} .final__title{font-size:clamp(2.4rem,5.5vw,4.2rem)} .final p{color:var(--muted)} .final .btn{margin-top:.75rem} .final__note{font-size:.9rem} /* ---------- Page heads, cross-links ---------- */ .page-head{max-width:var(--max);margin:0 auto;padding:clamp(3rem,8vw,6rem) var(--gut) clamp(2rem,5vw,3.5rem)} .page-head .h1{max-width:16ch;margin-top:.75rem} .page-head p:last-child{margin-top:1.25rem;color:var(--muted);max-width:58ch;font:400 1.2rem/1.5 var(--serif)} .cross{display:grid;justify-items:start;gap:1rem;max-width:var(--max);margin:0 auto;padding:clamp(3rem,7vw,5rem) var(--gut);border-top:1px solid var(--line)} .cross p{color:var(--muted);max-width:52ch} /* ---------- Advanced assessment ---------- */ .adv{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(2rem,5vw,4rem);align-items:center;max-width:var(--max);margin:0 auto;padding:clamp(3rem,8vw,6rem) var(--gut)} .adv .h1{margin-top:.75rem} .adv__status{display:flex;align-items:center;gap:.8rem;margin-top:1.5rem;color:var(--muted)} .adv__lede{margin-top:1.5rem;max-width:50ch;font:400 1.25rem/1.5 var(--serif);color:var(--muted)} .adv__flower{max-width:340px;width:100%;justify-self:center} .adv__flower .centre{fill:var(--story);stroke:none} .adv-detail{max-width:var(--max);margin:0 auto;padding:0 var(--gut) clamp(3rem,7vw,5rem)} .adv-list{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem} .adv-list li{display:grid;gap:.4rem;padding:1.5rem;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)} .adv-list b{font:400 1.4rem/1.2 var(--serif)} .adv-list span{color:var(--muted)} .adv-boundary{margin-top:2.5rem;padding:1.5rem 1.75rem;border-radius:var(--r);border:1px dashed var(--line-2)} .adv-boundary p{margin-top:.6rem;color:var(--muted);max-width:68ch} .adv-why{max-width:var(--max);margin:0 auto;padding:clamp(3rem,7vw,5rem) var(--gut);border-top:1px solid var(--line);display:grid;justify-items:start;gap:1rem} .adv-why p{color:var(--muted);max-width:62ch} /* ---------- About ---------- */ .about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);max-width:var(--max);margin:0 auto;padding:clamp(3rem,8vw,6rem) var(--gut)} .about .h1{margin-top:.75rem} .about__lead{font:400 1.4rem/1.45 var(--serif)} .about__body p+p{margin-top:1.25rem;color:var(--muted)} .about-rules{max-width:var(--max);margin:0 auto;padding:0 var(--gut) clamp(3rem,7vw,5rem)} .rules{margin:2rem 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem} .rules div{padding:1.5rem;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)} .rules dt{font:400 1.45rem/1.2 var(--serif)} .rules dd{margin:.6rem 0 0;color:var(--muted)} .about-owner{max-width:var(--max);margin:0 auto;padding:clamp(2.5rem,6vw,4rem) var(--gut);border-top:1px solid var(--line)} .about-owner p{margin-top:.9rem;color:var(--muted);max-width:62ch} /* ---------- Contact ---------- */ .contact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4.5rem);max-width:var(--max);margin:0 auto;padding:clamp(3rem,8vw,6rem) var(--gut)} .contact .h1{margin-top:.75rem} .contact__intro p{margin-top:1.25rem;color:var(--muted);max-width:44ch} .contact__aside{font-size:.95rem;padding-top:1.25rem;border-top:1px solid var(--line)} .form{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-content:start;padding:clamp(1.25rem,3vw,2rem);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)} .form__field{display:grid;gap:.4rem} .form__field--wide,.form__foot,.form__status{grid-column:1/-1} .form label{font-weight:600;font-size:.93rem} .form input,.form select,.form textarea{width:100%;min-height:48px;padding:.7rem .9rem;border-radius:var(--r-sm);border:1.5px solid var(--line-2);background:var(--bg);color:var(--text);transition:border-color .2s,box-shadow .2s} .form textarea{resize:vertical;min-height:140px} .form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--p2);box-shadow:0 0 0 3px #f3982c33} .form [aria-invalid="true"]{border-color:#FF8A80} .form__err{min-height:1.2em;font-size:.88rem;color:#FF8A80} .form__hint{font-size:.85rem;color:var(--muted)} .form__hp{position:absolute;inset-inline-start:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.25rem} .form__note{font-size:.88rem;color:var(--muted)} .form__status{min-height:1.5em;font-weight:600} .form__status.is-ok{color:#9fe3b4}.form__status.is-bad{color:#FF8A80} /* ---------- Guide article: cream reading paper ---------- */ .page-guide main{background:var(--paper);color:var(--ink)} .guide{max-width:44rem;margin:0 auto;padding:clamp(3rem,8vw,6rem) var(--gut) clamp(3rem,8vw,5rem)} .guide__area{display:inline-flex;align-items:center;gap:.6rem;font:600 .85rem/1.2 var(--sans);letter-spacing:.03em;color:var(--ink-muted)} .guide__area .dot{width:.85rem;height:.85rem;border-radius:70% 0 70% 0;transform:rotate(45deg);background:var(--c)} .guide__title{margin-top:1rem;font-size:clamp(2.6rem,6vw,4.2rem);color:var(--ink)} .guide__title em{background:none;color:#B23A6A} .guide__lede{margin-top:1.25rem;font:italic 400 1.4rem/1.45 var(--serif);color:#3B3833} .guide__meta{margin-top:1rem;font-size:.88rem;color:var(--ink-muted)} .guide__body{margin-top:2.5rem;font:400 1.22rem/1.7 var(--serif);color:#2A2723} .guide__body p+p,.guide__body ul+p{margin-top:1.1rem} .guide__body h2{margin:2.25rem 0 .75rem;font:600 1.15rem/1.3 var(--sans);letter-spacing:-.01em;color:var(--ink)} .guide__body ul{margin:1rem 0;padding-inline-start:1.25rem} .guide__body li+li{margin-top:.6rem} .guide__body strong{font-weight:600;color:var(--ink)} .guide__try{margin:2.5rem 0;padding:1.4rem 1.6rem;border-radius:var(--r);background:#efe5cc;border-inline-start:4px solid var(--c)} .guide__try h2{margin:0 0 .5rem} /* guide pages: reading progress, contents, checklists and tools (guides.js; every box reads fine without it) */ .guide-progress{position:fixed;inset-inline:0;top:0;height:3px;z-index:60;background:var(--bloom);transform-origin:0 50%;transform:scaleX(0);pointer-events:none} [dir=rtl] .guide-progress{transform-origin:100% 50%} .guide__toc{margin-top:2rem;padding:1.1rem 1.3rem;border-radius:var(--r);background:#efe5cc} .guide__toc-title{font:600 .85rem/1.2 var(--sans);color:var(--ink-muted)} .guide__toc ol{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem} .guide__toc a{display:inline-block;padding:.35rem .8rem;border-radius:999px;background:#f7f0de;color:var(--ink);font-size:.92rem;text-decoration:none;transition:background-color .2s,color .2s} .guide__toc a:hover{background:#fff} .guide__toc a[aria-current]{background:var(--ink);color:var(--paper)} .guide__body h2{scroll-margin-top:calc(var(--top-h) + 1rem)} .guide__box{margin:2.5rem 0;padding:1.5rem 1.6rem;border-radius:var(--r)} .guide__box h2{margin:0 0 .75rem} .guide__check{background:#efe5cc;border-inline-start:4px solid var(--c)} .guide__check ul{margin:.25rem 0 0} .guide__check.is-live ul{list-style:none;padding:0;display:grid;gap:.5rem} .guide__check.is-live li+li{margin-top:0} .guide__check.is-live li{position:relative} .guide__check.is-live input{position:absolute;opacity:0;width:1px;height:1px} .guide__check.is-live label{display:flex;gap:.8rem;align-items:flex-start;padding:.65rem .9rem;border-radius:var(--r-sm);background:#f7f0de;cursor:pointer;font-size:1.08rem;line-height:1.45;transition:background-color .2s} .guide__check.is-live label::before{content:"";flex:none;width:1.1rem;height:1.1rem;margin-top:.2rem;border-radius:70% 0 70% 0;transform:rotate(45deg) scale(.8);border:2px solid var(--c);transition:transform .25s var(--ease),background-color .2s} .guide__check.is-live input:checked + label{background:#fff} .guide__check.is-live input:checked + label::before{background:var(--c);transform:rotate(45deg) scale(1)} .guide__check.is-live input:focus-visible + label{outline:2px solid #8E2C55;outline-offset:2px} .guide__count{margin-top:.9rem;font:600 .9rem/1.3 var(--sans);color:var(--ink-muted);font-variant-numeric:tabular-nums} .guide__check .guide__note{margin-top:.6rem;transition:color .3s} .guide__check.is-match .guide__note{color:var(--ink);font-weight:500} .guide__tool{background:var(--surface);color:var(--text);font-family:var(--sans)} .guide__tool h2{color:var(--text)} .guide__tool p{font-size:1.05rem;color:var(--muted)} .guide__tool .btn{min-height:44px} .gtimer{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"dial actions" "done done";gap:.75rem 1.5rem;align-items:center;margin-top:1.25rem} .gtimer__ring{grid-area:dial;--p:0;width:8.5rem;aspect-ratio:1;border-radius:50%;background:conic-gradient(var(--c,var(--p2)) calc(var(--p) * 360deg),var(--line) 0);mask:radial-gradient(circle,transparent 58%,#000 60%);-webkit-mask:radial-gradient(circle,transparent 58%,#000 60%)} .guide__tool .gtimer__face{grid-area:dial;justify-self:center;align-self:center;font:400 2rem/1 var(--serif);font-variant-numeric:tabular-nums;color:var(--text)!important} .gtimer__actions{grid-area:actions;display:flex;flex-wrap:wrap;gap:.6rem} .guide__tool .gtimer__done{grid-area:done;min-height:1.4em;color:var(--p2)!important;font-weight:600} .guide__tool.is-done .gtimer__ring{background:var(--c,var(--p2))} .gleave{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem 1rem;margin-top:1rem} .gleave__field{display:grid;gap:.35rem} .gleave__field label{font-size:.92rem;font-weight:600} .gleave__field input{min-height:48px;padding:.5rem .8rem;border-radius:var(--r-sm);border:1.5px solid var(--line-2);background:var(--bg);color:var(--text);font-variant-numeric:tabular-nums;color-scheme:dark} .gleave__field input:focus-visible{outline:2px solid var(--p2);outline-offset:1px} .guide__tool--leave .gleave__out{margin-top:1.25rem;padding:1rem 1.2rem;border-radius:var(--r-sm);background:var(--card);color:var(--text)!important;font-size:1.15rem} .gleave__out b{color:var(--c,var(--p2));font-weight:700;font-variant-numeric:tabular-nums} html.no-js .guide__tool--leave p:last-of-type{display:none} .guide__tool--copy ul{list-style:none;padding:0;display:grid;gap:.6rem} .guide__tool--copy li{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem .9rem;border-radius:var(--r-sm);background:var(--card);font-size:1.02rem;line-height:1.45} .guide__tool--copy li+li{margin-top:0} .gcopy{flex:none;min-height:40px;min-width:5.5rem;padding:.4rem .9rem;border-radius:999px;border:1.5px solid var(--line-2);background:transparent;font-weight:600;cursor:pointer;touch-action:manipulation;transition:border-color .2s,background-color .2s,color .2s} .gcopy:hover{border-color:var(--c,var(--p2))} .gcopy.is-done{background:var(--c,var(--p2));border-color:var(--c,var(--p2));color:#1A1210} @media (max-width:560px){.gleave{grid-template-columns:1fr}.gtimer__actions{flex-direction:column}.gtimer__actions .btn{width:100%;padding-inline:.5rem}.gtimer__ring{width:7rem}.guide__tool .gtimer__face{font-size:1.6rem}.guide__tool--copy li{flex-direction:column;align-items:stretch}} @media print{.guide-progress,.guide__toc,.gtimer,.gcopy{display:none!important}} /* wide screens: the contents list follows the reader in the margin */ @media (min-width:1240px){ .guide.has-toc{max-width:calc(44rem + 15rem + 3rem + 2 * var(--gut));display:grid;grid-template-columns:15rem minmax(0,44rem);column-gap:3rem;align-items:start} .guide.has-toc > *{grid-column:2} .guide.has-toc > .guide__toc{grid-column:1;grid-row:1 / span 3;position:sticky;top:calc(var(--top-h) + 2rem);margin:0;padding:0;background:none} .guide.has-toc .guide__toc ol{flex-direction:column;gap:.15rem} .guide.has-toc .guide__toc a{display:block;padding:.45rem .8rem;border-radius:0 var(--r-sm) var(--r-sm) 0;background:none;border-inline-start:2px solid #d9cfb5;color:var(--ink-muted);line-height:1.35} .guide.has-toc .guide__toc a:hover{background:#efe5cc;color:var(--ink)} .guide.has-toc .guide__toc a[aria-current]{background:none;color:var(--ink);border-inline-start-color:var(--c);font-weight:600} } .guide__foot{margin-top:3rem;padding-top:1.5rem;border-top:1px solid #d9cfb5;color:#3B3833} .guide__foot a{color:#8E2C55} .guide__disclaimer{margin-top:.75rem;font-size:.88rem;color:var(--ink-muted)} .page-guide :focus-visible,.page-doc main :focus-visible{outline-color:#8E2C55} /* ---------- Legal documents ---------- */ .page-doc main{background:var(--paper);color:var(--ink)} .doc{max-width:44rem;margin:0 auto;padding:clamp(3rem,8vw,5rem) var(--gut) clamp(3rem,8vw,5rem)} .doc h1{font-size:clamp(2.6rem,6vw,4rem)} .doc h2{margin-top:2.25rem;font-size:1.55rem} .doc p,.doc li{color:#2C2924} .doc p{margin-top:.75rem} .doc ul{padding-left:1.25rem;margin:.75rem 0} .doc a{color:#8E2C55} .doc__meta{color:var(--ink-muted)!important} .doc__todo{padding:.85rem 1rem;border-radius:var(--r-sm);background:#f4dfa9;border-left:4px solid var(--p1)} .doc code{font-size:.9em;background:#ece2c8;padding:.05em .35em;border-radius:4px} .doc__table{width:100%;margin-top:1rem;border-collapse:collapse;font-size:.95rem} .doc__table th,.doc__table td{text-align:left;padding:.6rem .5rem;border-bottom:1px solid #d9cfb5;vertical-align:top} .doc .btn--bloom{color:#1A1210} /* ---------- 404 ---------- */ .lost{display:grid;justify-items:center;text-align:center;gap:1rem;max-width:40rem;margin:0 auto;padding:clamp(4rem,12vw,9rem) var(--gut)} .flower--lost{width:120px} .flower--lost .petal:nth-child(4){opacity:.08} .lost p{color:var(--muted)} .lost__links{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:1rem} /* ---------- Footer ---------- */ .foot{padding:clamp(3.5rem,7vw,5rem) var(--gut) 2rem;border-top:1px solid var(--line);background:var(--bg)} .foot > *{max-width:var(--max);margin-inline:auto} .foot__grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem} .foot__brand img{width:150px} .foot__brand p{margin-top:.75rem;font:italic 400 1.3rem/1.2 var(--serif);color:var(--muted)} .foot__nav{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;align-items:flex-start} .foot__nav a{text-decoration:none;color:var(--muted);padding:.3rem 0} .foot__nav a:hover{color:var(--text)} .foot__social{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem} .foot__social a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--surface);color:var(--muted);transition:color .2s,background-color .2s,transform .2s var(--ease)} .foot__social a:hover{color:#1A1210;background:var(--p2);transform:translateY(-2px)} .foot__social svg{display:block} .foot__note{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line);font-size:.88rem;color:var(--muted);max-width:var(--max)} .foot__fine{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.5rem;margin-top:1.25rem;font-size:.88rem;color:var(--muted)} .foot__fine a{color:var(--muted)} .foot__fine p:first-child{margin-inline-end:auto} .foot__fine p:first-child a{text-decoration:underline;text-decoration-color:var(--story-light)} /* ---------- Consent ---------- */ .consent{position:fixed;left:var(--gut);right:var(--gut);bottom:var(--gut);z-index:80;max-width:560px;padding:1.2rem 1.35rem;border-radius:var(--r);background:var(--card);border:1px solid var(--line-2);box-shadow:0 20px 50px #000a} .consent[hidden]{display:none} .consent p{font-size:.93rem;line-height:1.5;color:var(--muted)} .consent__actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem} /* ===================================================================== SELF-SCREENING ===================================================================== */ .page-screening main{min-height:calc(100svh - var(--top-h))} .sx{max-width:var(--max);margin:0 auto;padding:clamp(2.5rem,7vw,5rem) var(--gut) clamp(4rem,8vw,6rem)} .sx__view[hidden]{display:none} .sx__intro{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(2rem,6vw,5rem);align-items:center} .sx__intro-flower{max-width:360px;width:100%;justify-self:center} .sx__title{margin-top:.75rem;font-size:clamp(2.6rem,6vw,4.6rem)} .sx__lede{margin-top:1.25rem;font:400 1.25rem/1.5 var(--serif);color:var(--muted);max-width:52ch} .sx__start{margin-top:2rem;display:grid;justify-items:start;gap:.75rem} .sx__resume{color:var(--muted);font-size:.95rem} .sx__nojs{margin-top:1.5rem;padding:1rem 1.2rem;border-radius:var(--r-sm);background:var(--card);border:1px solid var(--line-2)} /* question */ .sx__q{max-width:46rem;margin:0 auto} .sx__progress{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:1rem;align-items:center} .sx__mini{grid-row:1/3;width:56px} .sx__count{font-size:1.05rem} .sx__count b{font:500 1.5rem/1 var(--serif)} .sx__of{color:var(--muted)} .sx__bar{height:4px;border-radius:4px;background:var(--line);overflow:hidden;margin-top:.5rem} .sx__bar i{display:block;height:100%;width:var(--w,0%);background:var(--bloom);transition:width .45s var(--ease)} .sx__form{margin-top:clamp(2rem,5vw,3rem)} .sx__form fieldset{border:0;margin:0;padding:0;min-width:0} .sx__form legend{display:grid;gap:.75rem;padding:0;width:100%} .sx__area{display:inline-flex;align-items:center;gap:.6rem;font:600 .85rem/1.2 var(--sans);letter-spacing:.04em;color:var(--c,var(--p2))} .sx__area::before{content:"";width:.8rem;height:.8rem;border-radius:70% 0 70% 0;transform:rotate(45deg);background:var(--c,var(--p2))} .sx__timeframe{color:var(--muted);font-size:.95rem} .sx__question{font:400 clamp(1.75rem,3.6vw,2.5rem)/1.2 var(--serif);letter-spacing:-.015em;text-wrap:balance} .sx__question:focus{outline:none} /* receives focus only so screen readers start here; not interactive */ .sx__options{display:grid;gap:.6rem;margin-top:2rem} .opt{position:relative;display:flex;align-items:center;gap:1rem;min-height:56px;padding:.85rem 1.1rem;border-radius:var(--r-sm);border:1.5px solid var(--line-2);background:var(--surface);cursor:pointer;transition:border-color .2s,background-color .2s,transform .2s var(--ease)} .opt:hover{border-color:#ffffff44} .opt input{position:absolute;opacity:0;width:1px;height:1px} .opt__key{display:grid;place-items:center;flex:none;width:1.9rem;height:1.9rem;border-radius:50%;border:1.5px solid var(--line-2);font:600 .85rem/1 var(--sans);color:var(--muted);transition:all .2s} .opt__label{font-weight:500} .opt__scale{margin-inline-start:auto;display:flex;gap:3px} .opt__scale i{width:6px;height:16px;border-radius:3px;background:var(--line-2)} .opt__scale i.on{background:var(--c,var(--p2))} .opt:has(input:checked){border-color:var(--c,var(--p2));background:color-mix(in srgb,var(--c,var(--p2)) 10%,var(--surface))} .opt:has(input:checked) .opt__key{background:var(--c,var(--p2));border-color:transparent;color:#1A1210} .opt:has(input:focus-visible){outline:2px solid var(--p2);outline-offset:3px} .sx__error{min-height:1.4em;margin-top:.75rem;color:#FF8A80;font-weight:600} .sx__nav{display:flex;justify-content:space-between;gap:1rem;margin-top:1rem} .sx__hint{margin-top:1.25rem;font-size:.85rem;color:var(--muted)} @media (hover:none){.sx__hint{display:none}} @media (prefers-reduced-motion:no-preference){.sx__form.is-in legend,.sx__form.is-in .sx__options{animation:qin .45s var(--ease) both}.sx__form.is-in .sx__options{animation-delay:.06s}} @keyframes qin{from{opacity:0;transform:translateY(10px)}} .flower--mini .petal{transition:transform .5s var(--ease),opacity .3s} /* result */ .sx__result:focus{outline:none} .sx__rhead{max-width:52rem} .sx__rtitle{margin-top:.75rem;font-size:clamp(2.2rem,5vw,3.8rem)} .sx__rnotice{margin-top:1.25rem;padding:1rem 1.2rem;border-radius:var(--r-sm);background:var(--surface);border-inline-start:4px solid var(--story);color:var(--muted);max-width:62ch} .sx__rbody{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4rem);align-items:center;margin-top:clamp(2.5rem,5vw,3.5rem)} .sx__rflower{margin:0;max-width:420px;width:100%;justify-self:center} .sx__rflower figcaption{margin-top:1rem;text-align:center;font-size:.9rem;color:var(--muted)} .sx__h2{font-size:clamp(1.6rem,2.8vw,2.1rem)} .meters{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:.95rem} .meter{display:grid;grid-template-columns:8.5rem 1fr 6.5rem;align-items:center;gap:1rem} .meter__name{display:inline-flex;align-items:center;gap:.55rem;font-weight:600;font-size:.95rem} .meter__name::before{content:"";flex:none;width:.75rem;height:.75rem;border-radius:70% 0 70% 0;transform:rotate(45deg);background:var(--c)} .meter[data-area="story"] .meter__name::before{border-radius:50%;transform:none} .meter__track{height:10px;border-radius:10px;background:var(--line);overflow:hidden} .meter__fill{display:block;height:100%;width:var(--w);border-radius:10px;background:var(--c);transition:width .9s var(--ease)} .meter__level{font-size:.9rem;color:var(--muted);text-align:end} .meter__level b{color:var(--text);font-weight:600} .sx__standout,.sx__recs,.sx__deeper{margin-top:clamp(3rem,6vw,4.5rem)} .standout{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1.25rem;margin-top:1.5rem} .standout article{padding:1.5rem;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--c)} .standout h3{font-size:1.5rem;display:flex;align-items:baseline;justify-content:space-between;gap:1rem} .standout h3 span{font:600 .8rem/1 var(--sans);color:var(--c);white-space:nowrap} .standout q{display:block;margin-top:.75rem;font:italic 400 1.15rem/1.4 var(--serif);color:var(--text)} .standout p{margin-top:.75rem;color:var(--muted)} .standout a{display:inline-block;margin-top:.9rem;color:var(--text)} .recs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:1.25rem;margin-top:1.5rem} .rec{display:grid;grid-template-columns:72px 1fr;gap:1rem;align-items:start;padding:1.1rem;border-radius:var(--r);background:var(--card);border:1px solid var(--line)} .rec img{width:72px;border-radius:4px 8px 8px 4px;box-shadow:0 10px 20px -10px #000} .rec__noimg{width:72px;aspect-ratio:2/3;display:grid;place-items:center;border-radius:8px;background:var(--surface)} .rec__noimg svg{width:60%} .rec h3{font-size:1.2rem} .rec p{margin-top:.35rem;font-size:.92rem;color:var(--muted)} .rec__for{font:600 .75rem/1.2 var(--sans);color:var(--c);letter-spacing:.03em} .rec .status,.rec a{margin-top:.6rem} .rec a{display:inline-block;font-weight:600;font-size:.92rem} .sx__deeper{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:2rem;padding:clamp(1.5rem,4vw,2.5rem);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)} .sx__deeper p{margin-top:.9rem;color:var(--muted);max-width:60ch} .sx__deeper p a{color:var(--text)} .sx__actions{display:grid;align-content:start;justify-items:start;gap:.75rem} .sx__actions .linkbtn{color:var(--muted);font-size:.92rem} .sx__cleared{font-size:.9rem;color:#9fe3b4;min-height:1.2em} /* ---------- Responsive ---------- */ /* Compact header (Menu button) below 1200px: with five links, long languages (ru, tr, id) no longer fit at 1000px */ @media (max-width:1200px){ .top__nav{display:none} .top__menu{display:inline-flex;align-items:center} } @media (max-width:1000px){ .tool-grid,.guide-list,.shelf{grid-template-columns:repeat(2,minmax(0,1fr))} } .top__cta{white-space:nowrap} @media (max-width:820px){ :root{--top-h:64px} .top{gap:.75rem} .top__logo{width:118px} .hero{grid-template-columns:1fr;padding-top:2rem} .hero__flower{grid-row:1;max-width:240px;justify-self:start;margin-left:-.5rem} .hero__petal{display:none} .recog__head,.section-head,.library__head,.screen-teaser__card,.why__cols,.adv,.about,.contact,.sx__intro,.sx__rbody,.sx__deeper,.rules,.adv-list{grid-template-columns:1fr} .recog__list summary{grid-template-columns:1fr auto;row-gap:.35rem} .recog__name{grid-column:1/-1} .recog__list details p{padding-inline-start:.25rem} .screen-teaser__flower{max-width:180px;justify-self:start} .sx__intro-flower{max-width:180px;justify-self:start} .adv__flower{max-width:220px;justify-self:start;grid-row:1} .meter{grid-template-columns:7rem 1fr 5.6rem;gap:.75rem} .guide-list a{grid-template-columns:1fr} } @media (max-width:560px){ .top__cta{display:none} .tool-grid,.guide-list,.shelf{grid-template-columns:1fr} .shelf .book{grid-template-columns:110px 1fr;column-gap:1.1rem;align-items:start} .shelf .book__cover{grid-row:1/7} .form{grid-template-columns:1fr} .hero__cta .btn{width:100%} .meter{grid-template-columns:1fr auto;row-gap:.35rem} .meter__track{grid-column:1/-1;grid-row:2} .opt__scale{display:none} .sx__nav .btn{flex:1} .foot__fine p:first-child{flex-basis:100%} /* tables become labelled rows on phones */ .doc__table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .doc__table tr{display:block;padding:.75rem 0;border-bottom:1px solid #d9cfb5} .doc__table td{display:grid;grid-template-columns:6.5rem 1fr;gap:.75rem;padding:.2rem 0;border:0} .doc__table td::before{content:attr(data-label);font-weight:600;color:var(--ink-muted)} } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} } /* ---------- Print (the result page prints as a clean report) ---------- */ @media print{ body{background:#fff;color:#111} .top,.sheet,.foot,.consent,.skip,.sx__actions,.sx__hint{display:none!important} .sx__view:not(.sx__result){display:none!important} .sx__rnotice,.standout article,.rec,.sx__deeper{background:#fff!important;border-color:#ccc!important;color:#111} .standout p,.rec p,.sx__deeper p,.meter__level{color:#333!important} h1 em{color:#B23A6A;background:none;-webkit-background-clip:initial;background-clip:initial} .meter__track{background:#e5e5e5} } /* Phase 9 (CLS): while the catalogue is still empty (only its