/* -------------------------------------------------------------------------- SELF-HOSTED FONTS (recommended before launch) Download the woff2 files for Newsreader and Inter, put them in assets/fonts/, delete the Google Fonts from build.py, and uncomment the block below. Faster first paint, and no visitor IP addresses sent to a third party, which matters for EU privacy. See HOSTING.md. @font-face{ font-family:"Newsreader"; src:url("../fonts/newsreader-variable.woff2") format("woff2-variations"); font-weight:200 800; font-style:normal; font-display:swap; } @font-face{ font-family:"Inter"; src:url("../fonts/inter-variable.woff2") format("woff2-variations"); font-weight:100 900; font-style:normal; font-display:swap; } -------------------------------------------------------------------------- */ /* ========================================================================== BEYOND ALOPECIA / main.css A small, hand-maintainable stylesheet. No framework, no build step. Order: 1 tokens · 2 reset · 3 base type · 4 layout · 5 components · 6 sections · 7 utilities · 8 motion · 9 print ========================================================================== */ /* 1 · TOKENS ============================================================== */ :root{ /* palette */ --ink:#0E1A14; --forest:#16281F; --forest-2:#1E3428; --moss:#3C5245; --sage:#7C8F84; /* accent: plum by default. Swap the three values below to re-theme the whole site, including the favicon, which is generated from this same value. Verified alternatives are in the [data-accent] blocks. */ --accent:#5B3470; --accent-deep:#3E2350; --accent-lt:#B08FC6; --sand:#E7DFD2; --paper:#F6F2EA; --stone:#CFC5B4; --clay:#6B5A49; --warm-grey:#5B5347; /* semantic */ --bg:var(--sand); --bg-lift:var(--paper); --text:var(--forest); --text-2:var(--warm-grey); --text-3:var(--clay); --rule:var(--stone); --rule-soft:rgba(22,40,31,.14); --accent-text:var(--accent); --btn-fill:var(--accent); --btn-fill-hover:var(--accent-deep); --btn-text:var(--paper); --focus:var(--forest); /* type */ --serif:"Newsreader",Georgia,"Times New Roman",Times,serif; --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; /* spacing */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px; --s11:160px; --s12:200px; /* layout */ --max:1280px; --measure:34em; --gutter:clamp(20px,5vw,72px); --header-h:72px; /* motion */ --ease:cubic-bezier(.22,.61,.36,1); --fast:160ms; --mid:240ms; --slow:420ms; } /* alternate accents, all verified to WCAG AA at the sizes they're used. Set data-accent="plum" or "terracotta" on to switch. */ [data-accent="burgundy"]{--accent:#7A2233;--accent-deep:#5C1A24;--accent-lt:#C4838C} [data-accent="terracotta"]{--accent:#A64B2A;--accent-deep:#8A3D22;--accent-lt:#D0805E; /* terracotta is too light for body-size link text on sand (4.34:1), so links use the deeper value. Burgundy and plum need no such patch. */ --accent-text:var(--accent-deep)} /* dark surfaces, applied to sections, footer, and the article reading mode */ .on-dark, [data-theme="dark"]{ --bg:var(--ink); --bg-lift:var(--forest-2); --text:var(--sand); --text-2:var(--sage); --text-3:var(--sage); --rule:rgba(231,223,210,.20); --rule-soft:rgba(231,223,210,.14); --accent-text:var(--accent-lt); --focus:var(--sand); } /* 2 · RESET =============================================================== */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body,h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0} ul[class],ol[class]{list-style:none;padding:0} img,picture,svg{max-width:100%;display:block} input,button,textarea,select{font:inherit;color:inherit} button{background:none;border:0;cursor:pointer} table{border-collapse:collapse;width:100%} :target{scroll-margin-top:calc(var(--header-h) + var(--s6))} /* 3 · BASE TYPE =========================================================== */ body{ background:var(--bg); color:var(--text); font-family:var(--sans); font-size:1.0625rem; line-height:1.7; font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } @media (min-width:768px){body{font-size:1.125rem}} h1,h2,h3,h4{font-family:var(--serif);font-weight:400;text-wrap:balance} .display-xl{ font-size:clamp(2.6rem,6.4vw,5.25rem); line-height:1.02;letter-spacing:-.02em;font-weight:300; } .display-l{ font-size:clamp(2.1rem,4.6vw,3.75rem); line-height:1.08;letter-spacing:-.015em;font-weight:300; } .display-m{ font-size:clamp(1.7rem,3vw,2.5rem); line-height:1.16;letter-spacing:-.01em; } .display-s{font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.28} .lede{ font-family:var(--sans);font-weight:300; font-size:clamp(1.125rem,1.6vw,1.35rem); line-height:1.6;color:var(--text-2); max-width:32em;text-wrap:pretty; } .small{font-size:.9375rem;line-height:1.6;color:var(--text-2)} .note{font-size:.9375rem;line-height:1.65;color:var(--text-3);max-width:38em} .label{ font-family:var(--sans);font-size:.6875rem;font-weight:500; letter-spacing:.14em;text-transform:uppercase;line-height:1.2; color:var(--text-3); } .num{ font-family:var(--serif);font-weight:300;color:var(--accent-text); font-variant-numeric:tabular-nums; } p{max-width:var(--measure);text-wrap:pretty} p + p{margin-top:1em} a{color:inherit} .prose a, a.link{ color:var(--accent-text); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; transition:text-decoration-thickness var(--fast) var(--ease); } .prose a:hover,a.link:hover{text-decoration-thickness:2px} strong,b{font-weight:600} em{font-style:italic} mark{background:color-mix(in srgb, var(--accent) 16%, transparent);color:inherit;padding:.1em .2em} /* focus: never removed */ :focus{outline:none} :focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:1px; } ::selection{background:var(--forest);color:var(--paper)} /* skip link */ .skip{ position:absolute;left:var(--s4);top:-100px;z-index:200; background:var(--forest);color:var(--paper); padding:var(--s3) var(--s5);text-decoration:none; transition:top var(--fast) var(--ease); } .skip:focus{top:var(--s4)} /* 4 · LAYOUT ============================================================== */ .wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)} .section{padding-block:var(--s9)} @media (min-width:768px){.section{padding-block:var(--s10)}} .section--tight{padding-block:var(--s8)} .section--dark{background:var(--ink);color:var(--sand)} .section--paper{background:var(--paper)} /* the editorial grid: content sits off-centre, numerals hang left */ .grid{display:grid;gap:var(--s6)} @media (min-width:900px){ .grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s6)} .col-head{grid-column:1 / 4} .col-body{grid-column:4 / 12} .col-body-wide{grid-column:4 / 13} .col-full{grid-column:1 / -1} } .stack > * + *{margin-top:var(--s5)} .stack-lg > * + *{margin-top:var(--s7)} .stack-sm > * + *{margin-top:var(--s3)} .section-head{display:flex;flex-direction:column;gap:var(--s3);margin-bottom:var(--s7)} .section-head .label{display:flex;align-items:baseline;gap:var(--s3)} .section-head .num{font-size:1.1rem;letter-spacing:0} hr,.rule{border:0;border-top:1px solid var(--rule);margin-block:var(--s7)} .rule-thin{border-top:1px solid var(--rule-soft)} /* 5 · COMPONENTS ========================================================== */ /* -- buttons -- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.6em; min-height:48px;padding:var(--s4) var(--s6); font-family:var(--sans);font-size:.9375rem;font-weight:500;letter-spacing:.02em; line-height:1.2;text-decoration:none;border-radius:2px; transition:background var(--fast) var(--ease),transform var(--fast) var(--ease), border-color var(--fast) var(--ease),color var(--fast) var(--ease); } .btn--primary{background:var(--btn-fill);color:var(--btn-text);border:1px solid var(--btn-fill)} .btn--primary:hover{background:var(--btn-fill-hover);border-color:var(--btn-fill-hover);transform:translateY(-1px)} .btn--primary:active{transform:none} .btn--secondary{background:transparent;color:var(--text);border:1px solid var(--text)} .btn--secondary:hover{background:var(--text);color:var(--bg);transform:translateY(-1px)} .on-dark .btn--secondary,.section--dark .btn--secondary{color:var(--sand);border-color:rgba(231,223,210,.45)} .on-dark .btn--secondary:hover,.section--dark .btn--secondary:hover{background:var(--sand);color:var(--ink)} .btn--sm{min-height:42px;padding:var(--s3) var(--s5);font-size:.875rem} .quiet-link{ display:inline-flex;align-items:center;gap:.5em; font-size:.9375rem;font-weight:500;text-decoration:none; color:var(--text);border-bottom:1px solid var(--rule); padding-bottom:2px; transition:border-color var(--fast) var(--ease),gap var(--fast) var(--ease); } .quiet-link:hover{border-color:var(--accent);gap:.8em} .quiet-link .arrow{transition:transform var(--fast) var(--ease)} .quiet-link:hover .arrow{transform:translateX(2px)} .actions{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center} /* -- header / nav -- */ .header{ position:sticky;top:0;z-index:100;background:var(--sand); border-bottom:1px solid transparent; transition:height var(--mid) var(--ease),border-color var(--mid) var(--ease),background var(--mid) var(--ease); } .header.is-scrolled{border-bottom-color:var(--rule)} .header__inner{ display:flex;align-items:center;justify-content:space-between;gap:var(--s5); height:var(--header-h); } .wordmark{ font-family:var(--serif);font-size:1.2rem;font-weight:400;letter-spacing:-.01em; text-decoration:none;color:var(--text);white-space:nowrap; } .wordmark span{display:block;font-family:var(--sans);font-size:.5625rem; letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin-top:2px} .nav{display:none} @media (min-width:1024px){ .nav{display:flex;align-items:center;gap:var(--s6)} .nav a{ font-size:.9375rem;text-decoration:none;padding-block:4px; border-bottom:1px solid transparent; transition:border-color var(--fast) var(--ease); } .nav a:hover{border-bottom-color:var(--rule)} .nav a[aria-current="page"]{border-bottom-color:var(--accent)} } .header__actions{display:flex;align-items:center;gap:var(--s3)} .header .btn--primary{display:none} @media (min-width:600px){.header .btn--primary{display:inline-flex}} .nav-toggle{ display:flex;flex-direction:column;justify-content:center;gap:5px; width:44px;height:44px;align-items:center; } .nav-toggle span{display:block;width:22px;height:1.5px;background:var(--text); transition:transform var(--mid) var(--ease),opacity var(--mid) var(--ease)} .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} @media (min-width:1024px){.nav-toggle{display:none}} /* hero composition: text left, tall image right on wide screens */ .hero__grid{display:grid;gap:var(--s7)} .hero__media{display:none} @media (min-width:1024px){ .hero__grid{grid-template-columns:minmax(0,1fr) 22rem;gap:var(--s9);align-items:end} .hero__media{display:block} } .contrib-group{margin-top:var(--s7)} .contrib-group .label{margin-bottom:var(--s4)} .menu{ position:fixed;inset:0;z-index:99;background:var(--ink);color:var(--sand); display:flex;flex-direction:column;justify-content:center; padding:var(--s9) var(--gutter) var(--s7); opacity:0;visibility:hidden;transition:opacity var(--mid) var(--ease),visibility var(--mid); overflow-y:auto; } .menu.is-open{opacity:1;visibility:visible} .menu ul{display:flex;flex-direction:column;gap:var(--s5);list-style:none;padding:0;margin:0} .menu .btn{font-family:var(--sans);font-size:.9375rem;width:100%} .menu a{ font-family:var(--serif);font-size:1.7rem;line-height:1.2; text-decoration:none;color:var(--sand);display:inline-block; } .menu a[aria-current="page"]{color:var(--accent-lt)} .menu__foot{margin-top:var(--s8);padding-top:var(--s6);border-top:1px solid rgba(231,223,210,.2)} @media (min-width:1024px){.menu{display:none}} /* -- hero -- */ .hero{padding-block:var(--s9) var(--s9)} @media (min-width:768px){.hero{padding-block:var(--s10) var(--s10)}} .hero h1{max-width:15ch} .hero .lede{margin-top:var(--s6);max-width:34em} .hero .actions{margin-top:var(--s7)} .hero .note{margin-top:var(--s6)} /* -- page header (interior pages) -- */ .page-head{padding-block:var(--s8) var(--s7);border-bottom:1px solid var(--rule)} @media (min-width:768px){.page-head{padding-block:var(--s10) var(--s8)}} .page-head h1{max-width:18ch} .page-head .lede{margin-top:var(--s5)} .page-head .label{margin-bottom:var(--s5)} /* -- breadcrumb -- */ .crumbs{font-size:.8125rem;color:var(--text-3);margin-bottom:var(--s5)} .crumbs ol{display:flex;flex-wrap:wrap;gap:.4em;list-style:none;padding:0} .crumbs li:not(:last-child)::after{content:"/";margin-left:.4em;color:var(--rule)} .crumbs a{text-decoration:none;border-bottom:1px solid var(--rule)} /* -- cards -- */ .cards{display:grid;gap:var(--s5)} @media (min-width:700px){.cards--3{grid-template-columns:repeat(3,1fr)} .cards--2{grid-template-columns:repeat(2,1fr)}} .card{ position:relative;background:var(--bg-lift); border-top:1px solid var(--rule); padding:var(--s6) var(--s5) var(--s6); display:flex;flex-direction:column;gap:var(--s3); transition:background var(--mid) var(--ease); } .card:hover{background:var(--sand)} .section--paper .card:hover{background:var(--sand)} .card h3{margin-top:var(--s2)} .card__link::after{content:"";position:absolute;inset:0} .card a{text-decoration:none} .card ul{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s3);position:relative;z-index:1} .card ul a{ font-size:.9375rem;color:var(--text-2);text-decoration:none; border-bottom:1px solid transparent; } .card ul a:hover{color:var(--text);border-bottom-color:var(--rule)} /* -- two-column qualification block -- */ .qualify{display:grid;gap:var(--s7)} @media (min-width:860px){.qualify{grid-template-columns:1fr 1fr;gap:var(--s8)}} .qualify__col h3{margin-bottom:var(--s4)} .qualify__col--no{color:var(--text-2)} .ticklist{display:flex;flex-direction:column;gap:var(--s4)} .ticklist li{ padding-left:var(--s5);position:relative;font-size:1rem;line-height:1.6; max-width:34em; } .ticklist li::before{ content:"";position:absolute;left:0;top:.72em; width:10px;height:1px;background:var(--accent); } .qualify__col--no .ticklist li::before{background:var(--rule);width:10px} /* -- numbered method list -- */ .steps{counter-reset:step;display:flex;flex-direction:column} .steps > li{ counter-increment:step; display:grid;gap:var(--s3); padding-block:var(--s6); border-top:1px solid var(--rule); } .steps > li:last-child{border-bottom:1px solid var(--rule)} @media (min-width:800px){ .steps > li{grid-template-columns:5rem 14rem 1fr;gap:var(--s6);align-items:start} } .steps__num{font-family:var(--serif);font-size:1.5rem;font-weight:300;color:var(--accent-text); font-variant-numeric:tabular-nums;line-height:1} .steps__num::before{content:"0" counter(step)} .steps h3{font-size:1.35rem;line-height:1.3} .steps p{color:var(--text-2);font-size:1rem} /* -- factor grid -- */ .factors{display:grid;grid-template-columns:repeat(2,1fr);gap:0; border-top:1px solid var(--rule)} @media (min-width:700px){.factors{grid-template-columns:repeat(3,1fr)}} @media (min-width:1000px){.factors{grid-template-columns:repeat(4,1fr)}} .factors li{ padding:var(--s4) var(--s4) var(--s4) 0; border-bottom:1px solid var(--rule); font-size:.9375rem;color:var(--text-2); } /* -- callout: when to see a doctor -- */ .callout{ background:var(--bg-lift); border-left:2px solid var(--accent); padding:var(--s6) var(--s5); max-width:44em; } .callout .label{color:var(--accent-text);margin-bottom:var(--s3)} .callout h3{font-size:1.35rem;margin-bottom:var(--s4)} .callout ul{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s4)} .callout ul li{padding-left:var(--s4);position:relative;font-size:1rem;line-height:1.6} .callout ul li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:1px;background:var(--accent)} .callout p{font-size:1rem} /* -- disclosure / accordion -- */ .accordion{border-top:1px solid var(--rule)} .accordion details{border-bottom:1px solid var(--rule)} .accordion summary{ display:flex;align-items:center;justify-content:space-between;gap:var(--s5); min-height:56px;padding-block:var(--s4);cursor:pointer;list-style:none; font-family:var(--serif);font-size:1.2rem;line-height:1.35; } .accordion summary::-webkit-details-marker{display:none} .accordion summary::after{ content:"";flex:0 0 auto;width:14px;height:14px; background: linear-gradient(var(--text),var(--text)) center/14px 1px no-repeat, linear-gradient(var(--text),var(--text)) center/1px 14px no-repeat; transition:transform var(--mid) var(--ease); } .accordion details[open] summary::after{transform:rotate(45deg)} .accordion .acc-body{padding-bottom:var(--s6);max-width:var(--measure)} .accordion .acc-body p{color:var(--text-2);font-size:1rem} .accordion .acc-body > * + *{margin-top:var(--s3)} /* -- comparison table -- */ .table-wrap{margin-block:var(--s6)} .cmp{font-size:.9375rem} .cmp th,.cmp td{ text-align:left;padding:var(--s4) var(--s4) var(--s4) 0; border-bottom:1px solid var(--rule);vertical-align:top; } .cmp thead th{ font-family:var(--sans);font-size:.6875rem;font-weight:500; letter-spacing:.14em;text-transform:uppercase;color:var(--text-3); border-bottom:1px solid var(--text); } .cmp tbody th{font-weight:500;color:var(--text)} .cmp td{color:var(--text-2)} @media (max-width:719px){ .cmp,.cmp tbody,.cmp tr,.cmp td,.cmp th{display:block} .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .cmp tr{border-bottom:1px solid var(--text);padding-bottom:var(--s4);margin-bottom:var(--s5)} .cmp tbody th{font-family:var(--serif);font-size:1.2rem;font-weight:400;border-bottom:0;padding-bottom:var(--s2)} .cmp td{border-bottom:0;padding:var(--s2) 0} .cmp td::before{ content:attr(data-col);display:block; font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase; color:var(--text-3);margin-bottom:2px; } } /* -- facts row -- */ .facts{display:grid;gap:var(--s5);border-top:1px solid var(--rule);padding-top:var(--s5)} @media (min-width:700px){.facts{grid-template-columns:repeat(4,1fr)}} .facts div{display:flex;flex-direction:column;gap:var(--s2)} .facts dt{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)} .facts dd{font-family:var(--serif);font-size:1.35rem;line-height:1.2;margin:0} /* -- placeholder token -- */ .ph{ background:color-mix(in srgb, var(--accent) 11%, transparent); border-bottom:1px dashed var(--accent); padding:0 .25em;font-size:.95em;white-space:nowrap; } /* -- image placeholders (art-direction slots) -- */ .figure{margin:0} .figure figcaption{font-size:.8125rem;color:var(--text-3);margin-top:var(--s3);max-width:32em} .img-slot{ position:relative;width:100%;background:var(--stone); background-image: repeating-linear-gradient(115deg,rgba(255,255,255,.16) 0 2px,transparent 2px 7px), radial-gradient(120% 90% at 25% 15%,rgba(246,242,234,.55),transparent 60%), linear-gradient(160deg,#D6CCBA,#B9AE9C); overflow:hidden; } /* A filled slot: the photograph covers the frame and no label is drawn. */ .img-slot.has-img{background:var(--stone);background-image:none} .img-slot.has-img img{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center;display:block; } .img-slot.has-img::after{content:none} .img-slot::after{ content:attr(data-note); position:absolute;left:0;bottom:0; font-family:var(--sans);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase; color:#E7DFD2;background:rgba(14,26,20,.78); padding:6px 10px;max-width:100%;line-height:1.35; } .ratio-4-5{aspect-ratio:4/5} .ratio-3-4{aspect-ratio:3/4} .ratio-1-1{aspect-ratio:1/1} .ratio-16-9{aspect-ratio:16/9} .ratio-21-9{aspect-ratio:21/9} /* -- quotes / recognition strip -- */ .said{display:grid;gap:var(--s6);border-top:1px solid var(--rule);padding-top:var(--s6)} @media (min-width:860px){.said{grid-template-columns:repeat(2,1fr);gap:var(--s7) var(--s8)}} .said p{ font-family:var(--serif);font-size:clamp(1.15rem,1.9vw,1.5rem); line-height:1.4;font-weight:300;color:var(--text);max-width:26em; } .pullquote{ font-family:var(--serif);font-weight:300; font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.3; border-top:1px solid var(--accent);padding-top:var(--s5); margin-block:var(--s7);max-width:26em; } /* -- forms -- */ .field{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s5)} .field label{font-size:.875rem;font-weight:500;letter-spacing:.01em} .field .hint{font-size:.8125rem;color:var(--text-3)} input[type=text],input[type=email],textarea,select{ width:100%;min-height:48px;padding:var(--s3) var(--s4); background:var(--bg-lift);color:var(--text); border:1px solid var(--rule);border-radius:2px; font-size:1.0625rem; transition:border-color var(--fast) var(--ease); } textarea{min-height:150px;resize:vertical;line-height:1.6} input:hover,textarea:hover{border-color:var(--text-3)} input:focus-visible,textarea:focus-visible{border-color:var(--text)} .checkbox{display:flex;gap:var(--s3);align-items:flex-start;margin-bottom:var(--s5)} .checkbox input{width:20px;height:20px;margin-top:3px;flex:0 0 auto;accent-color:var(--accent)} .checkbox label{font-size:.9375rem;color:var(--text-2);line-height:1.5;max-width:40em} .hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .signup{max-width:36em} .signup__row{display:flex;flex-direction:column;gap:var(--s3)} @media (min-width:560px){ .signup__row{flex-direction:row} .signup__row input{flex:1 1 auto} .signup__row .btn{flex:0 0 auto} } /* -- newsletter band -- */ .band{background:var(--paper);border-top:1px solid var(--rule)} .section--dark .band{background:var(--forest-2)} /* -- closing CTA -- */ .closing{background:var(--ink);color:var(--sand);text-align:left} .closing .wrap{padding-block:var(--s10)} .closing h2{max-width:16ch} .closing p{color:var(--sage);margin-top:var(--s5);max-width:36em} .closing .actions{margin-top:var(--s7)} .closing .alt{margin-top:var(--s5);font-size:.9375rem;color:var(--sage)} .closing .alt a{color:var(--sand);text-decoration:underline;text-underline-offset:4px} /* -- footer -- */ .footer{background:var(--ink);color:var(--sage);padding-block:var(--s9) var(--s7)} .footer a{color:var(--sand);text-decoration:none} .footer a:hover{text-decoration:underline;text-underline-offset:4px} .footer__grid{display:grid;gap:var(--s7)} @media (min-width:700px){.footer__grid{grid-template-columns:repeat(2,1fr)}} @media (min-width:1000px){.footer__grid{grid-template-columns:1.4fr 1fr 1fr 1.6fr;gap:var(--s6)}} .footer h2,.footer h3{font-family:var(--sans);font-size:.6875rem;font-weight:500; letter-spacing:.14em;text-transform:uppercase;color:var(--sage);margin-bottom:var(--s4)} .footer ul{display:flex;flex-direction:column;gap:var(--s3);font-size:.9375rem} .footer .wordmark{color:var(--sand)} .footer .wordmark span{color:var(--sage)} .footer__legal{ margin-top:var(--s8);padding-top:var(--s5); border-top:1px solid rgba(231,223,210,.18); display:flex;flex-direction:column;gap:var(--s4);font-size:.8125rem;line-height:1.6; } .footer__legal p{max-width:60em;color:var(--sage)} .footer__legal ul{flex-direction:row;flex-wrap:wrap;gap:var(--s4);font-size:.8125rem} /* -- sticky mobile CTA -- */ .sticky-cta{ position:fixed;left:0;right:0;bottom:0;z-index:90; background:var(--paper);border-top:1px solid var(--rule); padding:var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom)); display:flex;align-items:center;gap:var(--s3); transform:translateY(110%);transition:transform var(--mid) var(--ease); } .sticky-cta.is-visible{transform:translateY(0)} .sticky-cta .btn{flex:1 1 auto} .sticky-cta__close{ flex:0 0 auto;width:44px;height:44px;display:flex;align-items:center;justify-content:center; color:var(--text-3);font-size:1.2rem;line-height:1; } @media (min-width:1024px){.sticky-cta{display:none}} /* -- article -- */ .article{padding-block:var(--s8) var(--s9)} .article__meta{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center; font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:var(--s5)} .article__body{max-width:var(--measure)} .article__body > * + *{margin-top:var(--s5)} .article__body h2{font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.2;margin-top:var(--s8)} .article__body h3{font-size:1.25rem;margin-top:var(--s6)} .article__body ul,.article__body ol{padding-left:1.2em;display:flex;flex-direction:column;gap:var(--s3)} .article__body ul{list-style:none;padding-left:0} .article__body ul li{padding-left:var(--s5);position:relative} .article__body ul li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:1px;background:var(--accent)} .article__body ol{list-style:decimal;color:var(--text)} .keypoints{background:var(--bg-lift);border-top:1px solid var(--rule);padding:var(--s6) var(--s5);margin-top:var(--s8)} .keypoints .label{margin-bottom:var(--s4)} .authorbox{display:flex;gap:var(--s5);align-items:flex-start;border-top:1px solid var(--rule);padding-top:var(--s6);margin-top:var(--s8)} .authorbox .img-slot{flex:0 0 84px;width:84px;height:84px} .reading-toggle{ position:absolute;right:var(--gutter);top:var(--s8); font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3); border:1px solid var(--rule);padding:8px 12px;border-radius:2px;min-height:40px; } .reading-toggle:hover{color:var(--text);border-color:var(--text-3)} /* -- journal index -- */ .jlist{display:grid;gap:var(--s6)} @media (min-width:760px){.jlist{grid-template-columns:repeat(2,1fr);gap:var(--s8) var(--s6)}} .jitem{border-top:1px solid var(--rule);padding-top:var(--s5);position:relative} .jitem h3{margin-block:var(--s3) var(--s3)} .jitem a{text-decoration:none} .jitem a::after{content:"";position:absolute;inset:0} .jitem:hover h3{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px} .jlead{border-top:1px solid var(--text);padding-top:var(--s5);margin-bottom:var(--s8);position:relative} .jlead h2{margin-block:var(--s4);max-width:20ch} .jlead a{text-decoration:none} .jlead a::after{content:"";position:absolute;inset:0} .filters{display:flex;flex-wrap:wrap;gap:var(--s4);margin-bottom:var(--s7);font-size:.875rem} .filters a{text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:2px} .filters a:hover,.filters a[aria-current="true"]{border-bottom-color:var(--accent)} /* -- related -- */ .related{border-top:1px solid var(--rule);padding-top:var(--s6);margin-top:var(--s8)} .related ul{display:grid;gap:var(--s4);margin-top:var(--s4)} @media (min-width:700px){.related ul{grid-template-columns:repeat(3,1fr)}} .related a{text-decoration:none;border-bottom:1px solid transparent;font-size:.9375rem} .related a:hover{border-bottom-color:var(--rule)} /* 7 · UTILITIES =========================================================== */ .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .mt-0{margin-top:0} .center{margin-inline:auto;text-align:center} .center p{margin-inline:auto} .maxw-sm{max-width:28em} .maxw{max-width:var(--measure)} .relative{position:relative} /* 8 · MOTION ============================================================== */ .reveal{opacity:0;transform:translateY(12px); transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease)} .reveal.is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important; } .reveal{opacity:1;transform:none} .sticky-cta{transition:none} } /* 9 · PRINT =============================================================== */ @media print{ .header,.footer,.sticky-cta,.menu,.closing,.band,.reading-toggle{display:none!important} body{background:#fff;color:#000;font-size:11pt} a::after{content:" (" attr(href) ")";font-size:9pt;color:#555} .img-slot{display:none} } /* -- service cards (Consultations page) --------------------------------- */ .svc-grid{display:grid;gap:var(--s5)} @media (min-width:900px){.svc-grid{grid-template-columns:repeat(3,1fr);gap:var(--s5)}} .svc{ background:var(--bg-lift);border-top:1px solid var(--rule); padding:var(--s6) var(--s5) var(--s7); display:flex;flex-direction:column;gap:var(--s3); } .svc--featured{border-top:2px solid var(--accent)} .svc h3{margin-top:var(--s2)} .svc__price{display:flex;flex-direction:column;gap:2px;margin-top:var(--s2)} .svc__price strong{ font-family:var(--serif);font-size:2rem;font-weight:300;line-height:1; color:var(--text);font-variant-numeric:tabular-nums; } .svc__meta{color:var(--text-3)} .svc__list{margin-top:var(--s4);gap:var(--s3)} .svc__list li{font-size:.9375rem} /* -- policy list (cancellation etc.) ------------------------------------ */ .policy{border-top:1px solid var(--rule)} .policy > div{ display:grid;gap:var(--s2);padding-block:var(--s5); border-bottom:1px solid var(--rule); } @media (min-width:760px){.policy > div{grid-template-columns:15rem 1fr;gap:var(--s6)}} .policy dt{font-weight:500;font-size:.9375rem} .policy dd{margin:0;color:var(--text-2);font-size:1rem;max-width:34em} /* -- form status messages ----------------------------------------------- */ .form-status{ margin-top:var(--s4);font-size:.9375rem;line-height:1.6; padding-left:var(--s4);border-left:2px solid var(--rule);max-width:36em; } .form-status[data-state="success"]{border-left-color:var(--accent);color:var(--text)} .form-status[data-state="error"]{border-left-color:var(--accent);color:var(--text)} .form-status[data-state="pending"]{color:var(--text-3)} .btn[disabled]{opacity:.65;cursor:progress} /* Turnstile widget: keep it from stretching oddly inside narrow columns */ .cf-turnstile{max-width:min(100%,320px)} /* Lists that are navigation rather than prose: no markers, no indent. (A ul with display:flex still renders markers in Chromium, so this is needed even where the list is a flex container.) */ .footer ul, .card ul, .related ul, .menu ul, .jitem ul, .filters{list-style:none;padding-left:0} /* keep the spacing these lists already had */ .related ul{margin:var(--s4) 0 0} .card ul{margin:var(--s3) 0 0} .footer ul,.menu ul{margin:0} /* -- sources block on concern pages -------------------------------------- */ .sources{ margin-top:var(--s8);padding-top:var(--s6); border-top:1px solid var(--rule);color:var(--text-3); } .sources ul{list-style:none;padding:0;margin-top:var(--s4); display:flex;flex-direction:column;gap:var(--s3)} .sources li{font-size:.9375rem;line-height:1.5} .src-org{ display:inline-block;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase; color:var(--text-3);margin-right:.6em; }