/* subset of Design/Health-Guides-Glass-v3-2026-10-27/dist/assets/css/journal.css · sha256 6c4fab348b7197ad (class use; tokens, glass and component rules unchanged) */
@font-face{font-family: "Cormorant"; src: url(fonts/cormorant-latin-wght-normal.woff2) format("woff2"); font-weight: 300 700; font-display: swap;}
@font-face{font-family: "Cormorant"; src: url(fonts/cormorant-latin-600-italic.woff2) format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap;}
@font-face{font-family: "Literata"; src: url(fonts/literata-latin-wght-normal.woff2) format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap;}
@font-face{font-family: "Literata"; src: url(fonts/literata-latin-wght-italic.woff2) format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap;}
@font-face{font-family: "Mukta"; src: url(fonts/mukta-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap;}
@font-face{font-family: "Mukta"; src: url(fonts/mukta-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap;}
:root{--bg: #F6F0E4; --bg-deep: #EEE4D2; --paper: #FAF7F0; --ink: #261F19; --ink-2: #3A3229; --ink-3: #5F574B; --rule: #D3C5AE; --rule-strong: #BFAE91; --accent: #6F2631; --accent-strong: #4E1822; --accent-wash: #F4E5E2; --green: #143D2C; --green-wash: #E4ECE5; --gold: #B69357; --gold-ink: #765822; --wire: #B69357; --alert: #8E2B33; --alert-bg: #F7E3DC; --alert-rule: #E26C3C; --focus: #143D2C; --band-bg: #143D2C; --band-ink: #F2EADB; --band-ink-2: #C9C0AE; --band-accent: #E2C37F; --note-bg: #FFF4CC; --note-ink: #4A3A06; --note-rule: #C9A227; /* glass hues (rgb triplets, used with alpha) */ --amber: 200 138 52; --sage: 98 146 120; --maroon: 122 31 43; --ember: 178 78 40; /* liquid glass */ --glass-rgb: 252 249 243; --glass-a: .58; --lg-rim: .9; --lg-gloss: .6; --lg-blur: 22px; --lg-sat: 1.9; --lg-caustic: var(--amber); --lg-tint: linear-gradient(transparent, transparent); --shadow-rgb: 46 35 22; --ak-ground: #F0E7D7; --hue-ember: #A2441F; --hue-gold: #86662B; --hue-rose: #7A2B37; --hue-sage: #2F6B52; --hue-forest: #143D2C; --hue-silver: #4E5D57; --bindu: #C2953F; --seal-ground: #0E1B15; --logo-plate: transparent; --grain-a: .05; --disc-blend: multiply; --disc-a: .92; color-scheme: light; --f-display: "Cormorant", "Cormorant Garamond", "Iowan Old Style", Georgia, serif; --f-read: "Literata", "Iowan Old Style", Georgia, "Times New Roman", serif; --f-ui: "Mukta", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Sans Devanagari", "Noto Sans Gurmukhi", sans-serif; --t-xs: .78rem; --t-s: .875rem; --t-m: 1rem; --t-read: 1.1875rem; --t-lead: 1.3125rem; --t-h3: 1.3rem; --t-h2: clamp(2rem, 1.4rem + 2vw, 3.1rem); --t-h1: clamp(2.3rem, 1.5rem + 3.3vw, 4.1rem); --t-display: clamp(2.8rem, 1.5rem + 5.4vw, 6.4rem); --lead-read: 1.75; --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 6.5rem; --r-s: 10px; --r-m: 16px; --r-l: 22px; --r-xl: 30px; --r-pill: 999px; --ease: cubic-bezier(.22, .61, .36, 1); --spring: cubic-bezier(.34, 1.4, .5, 1); --t-fast: .18s; --t-med: .3s; --w-page: 77.5rem; --w-read: 38rem; --rail: 15.5rem; --bar-h: 3.25rem; --rail-pad: max(16px, calc((100vw - var(--w-page)) / 2 + 16px)); --heading: #143D2C; --focus-halo: #D9C190;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg: #08150F; --bg-deep: #0D1F17; --paper: #12291F; --ink: #F6F0E4; --ink-2: #ECE4D3; --ink-3: #C7BDAA; --rule: rgba(217, 193, 144, .18); --rule-strong: rgba(217, 193, 144, .32); --accent: #E8B3B9; --accent-strong: #F5CBD1; --accent-wash: #2A1A1F; --green: #E8D9B2; --green-wash: #16281F; --gold: #D9C190; --gold-ink: #D9C190; --wire: #D9C190; --alert: #F0B9BF; --alert-bg: #3A1A1F; --alert-rule: #E26C3C; --focus: #EFE6D4; --band-bg: #0C2B20; --band-ink: #ECE4D5; --band-ink-2: #B5AC9C; --band-accent: #E2C37F; --note-bg: #3A3110; --note-ink: #FBEBB5; --note-rule: #9C8226; --glass-rgb: 17 31 25; --glass-a: .56; --lg-rim: .24; --lg-gloss: .12; --lg-sat: 1.5; --shadow-rgb: 0 0 0; --ak-ground: #0A140F; --hue-ember: #EE8C5E; --hue-gold: #EBCB86; --hue-rose: #E3A3AE; --hue-sage: #8CC6A8; --hue-forest: #5E9C80; --hue-silver: #CBD6D0; --bindu: #F0CB75; --seal-ground: #0A140F; --logo-plate: #F6F0E4; --grain-a: .07; --disc-blend: screen; --disc-a: .62; color-scheme: dark; --heading: #EDE0C2; --focus-halo: rgba(217, 193, 144, .55);}
}
:root[data-theme="dark"]{--bg: #08150F; --bg-deep: #0D1F17; --paper: #12291F; --ink: #F6F0E4; --ink-2: #ECE4D3; --ink-3: #C7BDAA; --rule: rgba(217, 193, 144, .18); --rule-strong: rgba(217, 193, 144, .32); --accent: #E8B3B9; --accent-strong: #F5CBD1; --accent-wash: #2A1A1F; --green: #E8D9B2; --green-wash: #16281F; --gold: #D9C190; --gold-ink: #D9C190; --wire: #D9C190; --alert: #F0B9BF; --alert-bg: #3A1A1F; --alert-rule: #E26C3C; --focus: #EFE6D4; --band-bg: #0C2B20; --band-ink: #ECE4D5; --band-ink-2: #B5AC9C; --band-accent: #E2C37F; --note-bg: #3A3110; --note-ink: #FBEBB5; --note-rule: #9C8226; --glass-rgb: 17 31 25; --glass-a: .56; --lg-rim: .24; --lg-gloss: .12; --lg-sat: 1.5; --shadow-rgb: 0 0 0; --ak-ground: #0A140F; --hue-ember: #EE8C5E; --hue-gold: #EBCB86; --hue-rose: #E3A3AE; --hue-sage: #8CC6A8; --hue-forest: #5E9C80; --hue-silver: #CBD6D0; --bindu: #F0CB75; --seal-ground: #0A140F; --logo-plate: #F6F0E4; --grain-a: .07; --disc-blend: screen; --disc-a: .62; color-scheme: dark; --heading: #EDE0C2; --focus-halo: rgba(217, 193, 144, .55);}
:root[data-text="l"]{--t-read: 1.375rem; --t-lead: 1.5rem; --lead-read: 1.72; --w-read: 40rem;}
:root[data-text="xl"]{--t-read: 1.5625rem; --t-lead: 1.65rem; --lead-read: 1.68; --w-read: 42rem;}
*, *::before, *::after{box-sizing: border-box;}
html{-webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + 1.5rem); background: var(--bg);}
body{margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font: 400 var(--t-m)/1.55 var(--f-ui); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; overflow-x: clip;}
body::before{content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--bg);}
body::after{content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: var(--grain-a); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .4 0 0 0 0 .3 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
[hidden]{display: none !important;}
img{max-width: 100%; height: auto; display: block;}
a{color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .2em;}
a:hover{color: var(--accent-strong); text-decoration-thickness: 2px;}
:focus-visible{outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 5px var(--focus-halo); border-radius: 8px;}
button{font: inherit; color: inherit;}
h1, h2, h3{text-wrap: balance; overflow-wrap: anywhere; color: var(--heading);}
p, li, dd{text-wrap: pretty;}
.sr-only{position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;}
.no-js .js-only{display: none !important;}
.skip{position: absolute; left: max(16px, env(safe-area-inset-left, 0px)); top: -100px; z-index: 100; padding: .7rem 1rem; border-radius: var(--r-s); background: var(--ink); color: var(--paper); font-weight: 600; text-decoration: none;}
.skip:focus{top: calc(env(safe-area-inset-top, 0px) + 12px); color: var(--paper);}
.wrap{width: 100%; max-width: var(--w-page); margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));}
.page{position: relative; z-index: 1;}
.eyebrow{margin: 0; font: 600 var(--t-xs)/1.3 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink);}
.eyebrow a{color: inherit; text-decoration: none;}
.eyebrow a:hover{text-decoration: underline;}
.dot{display: inline-block; flex: none; width: .62rem; height: .62rem; border-radius: 50%; vertical-align: .05em; margin-right: .1rem; background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / .85), rgb(var(--tint) / .9) 45%, rgb(var(--tint))); box-shadow: 0 0 0 1px rgb(var(--tint) / .35), 0 1px 3px rgb(var(--tint) / .6);}
.dot--digestive{--tint: var(--amber);}
.dot--piles{--tint: var(--sage);}
.dot--mens{--tint: var(--maroon);}
.dot--womens{--tint: var(--maroon);}
.dot--skin-hair{--tint: var(--sage);}
.dot--bones-joints{--tint: var(--amber);}
.dot--sleep-stress{--tint: var(--sage);}
.dot--sehat{--tint: var(--amber);}
.hue--amber{--tint: var(--amber); --lg-caustic: var(--amber);}
.hue--sage{--tint: var(--sage); --lg-caustic: var(--sage);}
.hue--maroon{--tint: var(--maroon); --lg-caustic: var(--maroon);}
.glass{position: relative; isolation: isolate; background: var(--lg-tint), linear-gradient(180deg, rgb(255 255 255 / calc(var(--lg-gloss) * .55)) 0%, rgb(255 255 255 / 0) 42%), rgb(var(--glass-rgb) / var(--glass-a)); -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)); backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)); box-shadow: inset 0 1px 0 rgb(255 255 255 / var(--lg-rim)), inset 0 0 0 1px rgb(255 255 255 / calc(var(--lg-rim) * .32)), inset 0 -1px 0 rgb(255 255 255 / calc(var(--lg-rim) * .28)), inset 0 16px 26px -20px rgb(255 255 255 / calc(var(--lg-rim) * .85)), inset 0 -20px 32px -26px rgb(var(--lg-caustic) / .55), 0 1px 2px rgb(var(--shadow-rgb) / .08), 0 24px 56px -30px rgb(var(--shadow-rgb) / .55), var(--lg-glow, 0 0 0 0 transparent);}
.glass::after{/* edge light: brighter where the light falls (top left), a warm caustic lower right */ content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.25px; pointer-events: none; background: conic-gradient(from 200deg at 50% 50%, rgb(255 255 255 / calc(var(--lg-rim) * 1)) 0deg, rgb(255 255 255 / calc(var(--lg-rim) * .15)) 70deg, rgb(var(--amber) / .55) 120deg, rgb(255 255 255 / calc(var(--lg-rim) * .1)) 165deg, rgb(255 255 255 / calc(var(--lg-rim) * .7)) 230deg, rgb(var(--sage) / .45) 300deg, rgb(255 255 255 / calc(var(--lg-rim) * 1)) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);}
.glass::before{/* specular highlight, follows the pointer on pointer devices */ content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease); background: radial-gradient(280px circle at var(--mx, 30%) var(--my, 0%), rgb(255 255 255 / calc(var(--lg-rim) * .5)), transparent 62%);}
.glass:hover::before{opacity: 1;}
.glass--panel{--glass-a: .8; --lg-blur: 26px;}
:root[data-theme="dark"] .glass--panel{--glass-a: .7;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .glass--panel{--glass-a: .7;}
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){.glass{--glass-a: .95;}
}
@media (prefers-reduced-transparency: reduce){.glass{--glass-a: .97; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;}
}
.btn{display: inline-flex; align-items: center; justify-content: center; gap: .5rem; max-width: 100%; text-align: center; min-height: 2.9rem; padding: .7rem 1.25rem; border-radius: var(--r-pill); border: 1px solid transparent; font: 600 var(--t-m)/1.1 var(--f-ui); text-decoration: none; cursor: pointer; transition: transform var(--t-fast) var(--ease), background-color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);}
.btn:hover{transform: translateY(-1px); text-decoration: none;}
.btn--quiet{background: transparent; border-color: var(--rule-strong); color: var(--ink);}
.btn--quiet:hover{border-color: var(--ink-3); color: var(--ink);}
.icon-btn{display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--rule); background: rgb(var(--glass-rgb) / .55); color: var(--ink); cursor: pointer; transition: background-color var(--t-fast), transform var(--t-fast) var(--ease), opacity var(--t-fast);}
.icon-btn.glass{border: 0;}
.icon-btn:hover{background-color: rgb(var(--glass-rgb) / .95);}
.icon-btn svg{width: 1.2rem; height: 1.2rem;}
.icon-btn:disabled{opacity: .35; cursor: default;}
.mast{position: relative; z-index: 30; padding: .6rem max(10px, env(safe-area-inset-right, 0px)) 0 max(10px, env(safe-area-inset-left, 0px));}
.mast__inner{max-width: 76rem; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem var(--s-4); padding: .45rem .5rem .45rem .9rem; border-radius: 1.4rem;}
.mast__logo{display: inline-flex; align-items: center; padding: 3px 7px; margin-left: -7px; border-radius: 10px; background: var(--logo-plate); text-decoration: none;}
.mast__logo img{height: 34px; width: auto;}
.mast__nav{display: flex; flex-wrap: wrap; gap: .2rem; margin-left: auto;}
.mast__nav a{padding: .55rem .85rem; border-radius: var(--r-pill); color: var(--ink-2); font-weight: 600; font-size: var(--t-s); text-decoration: none; letter-spacing: .01em; transition: background-color var(--t-fast), color var(--t-fast);}
.mast__nav a:hover{color: var(--ink); background: rgb(var(--glass-rgb) / .8);}
.mast__nav a[aria-current="page"]{color: var(--ink); background: rgb(255 255 255 / calc(var(--lg-rim) * .55)); box-shadow: inset 0 1px 0 rgb(255 255 255 / var(--lg-rim)), 0 2px 8px -4px rgb(var(--shadow-rgb) / .4);}
.mast__tools{display: flex; gap: .4rem;}
.mast .icon-btn{border: 0; background: rgb(255 255 255 / calc(var(--lg-rim) * .35));}
@media (max-width: 47.99rem){.mast__logo img{height: 30px;}
.mast__tools{margin-left: auto;}
.mast__nav{order: 3; width: 100%; flex-wrap: wrap; justify-content: space-between; border-top: 1px solid rgb(var(--shadow-rgb) / .1); padding-top: .35rem;}
.mast__nav a{padding: .5rem .55rem;}
}
@media (min-width: 64rem){.mast__inner{border-radius: var(--r-pill); padding-left: 1.2rem;}
}
.theme-btn .i-moon, :root[data-theme="dark"] .theme-btn .i-sun{display: block;}
.theme-btn .i-sun, :root[data-theme="dark"] .theme-btn .i-moon{display: none;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .theme-btn .i-sun{display: block;}
:root:not([data-theme="light"]) .theme-btn .i-moon{display: none;}
}
.hero{position: relative; display: grid; grid-template-rows: 1fr auto; min-height: min(94svh, 56rem); padding-block: clamp(1.2rem, 2.5vw, 2.5rem) 1rem; overflow: clip;}
.hero__copy{min-width: 0;}
.hero__eyebrow{display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: 0; padding: .3rem .95rem .3rem .3rem; border-radius: var(--r-pill); font: 600 var(--t-xs)/1.3 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink);}
.hero__since{color: var(--ink-2); letter-spacing: .08em;}
.hero__title{margin: 1.1rem 0 0; font: 500 var(--t-display)/.94 var(--f-display); letter-spacing: -.02em; color: var(--heading); max-width: 12ch;}
.hero__title em{position: relative; font-style: italic; font-weight: 500; color: var(--accent); white-space: nowrap;}
.hero__title em::after{/* a gold thread drawn under the word */ content: ""; position: absolute; left: -.04em; right: -.08em; bottom: -.04em; height: .22em; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M2 13 C 40 4, 80 18, 120 10 S 180 4, 198 9' fill='none' stroke='%23B8913F' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;}
.hero__deck{margin: 1.4rem 0 0; max-width: 33rem; font: 400 clamp(1.05rem, 1rem + .3vw, 1.2rem)/1.62 var(--f-read); color: var(--ink-2);}
.search{display: flex; align-items: center; gap: .6rem; margin-top: 1.8rem; padding: .45rem .45rem .45rem 1.3rem; border-radius: var(--r-pill); max-width: 37rem; min-height: 4.1rem; --glass-a: .8; --lg-glow: 0 0 0 1px rgb(var(--amber) / .3), 0 24px 60px -26px rgb(var(--amber) / .8); transition: box-shadow var(--t-med);}
.search:focus-within{--lg-glow: 0 0 0 1px rgb(var(--amber) / .55), 0 28px 70px -24px rgb(var(--amber) / .95);}
.search > svg{width: 1.25rem; height: 1.25rem; flex: none; color: var(--ink-2);}
.search__field{position: relative; flex: 1; min-width: 0; display: flex;}
.search input{flex: 1; min-width: 0; border: 0; background: transparent; padding: .85rem 0; font: 400 clamp(1.05rem, 1rem + .25vw, 1.18rem)/1.2 var(--f-ui); color: var(--ink); outline: none;}
.search input::placeholder{color: var(--ink-3); opacity: 1;}
.search input::-webkit-search-cancel-button{display: none;}
.search:focus-within{outline: 2px solid var(--focus); outline-offset: 3px;}
.search__clear{border: 0; background: transparent; color: var(--ink-3); cursor: pointer; min-width: 2.5rem; min-height: 2.5rem; border-radius: 50%;}
.search__go{flex: none; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border: 0; border-radius: 50%; cursor: pointer; color: #FBF8F1; background: radial-gradient(circle at 35% 25%, #9B4450, var(--accent-strong, #521A24) 70%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 8px 18px -8px rgb(82 26 36 / .8); transition: transform var(--t-fast) var(--spring);}
.search__go:hover{transform: scale(1.06);}
.search__go svg{width: 1.2rem; height: 1.2rem;}
:root[data-theme="dark"] .search__go{color: #2A1A1F; background: radial-gradient(circle at 35% 25%, #FBE1E5, #E8AAB4 70%);}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .search__go{color: #2A1A1F; background: radial-gradient(circle at 35% 25%, #FBE1E5, #E8AAB4 70%);}
}
.search__note{margin: .7rem 0 0 1.2rem; font-size: var(--t-xs); color: var(--ink-2);}
.try{display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: 1rem;}
.try__k{font: 600 var(--t-xs)/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-right: .2rem;}
.try__b{min-height: 2.5rem; padding: .35rem .9rem; border-radius: var(--r-pill); border: 1px solid rgb(var(--shadow-rgb) / .16); background: rgb(var(--glass-rgb) / .5); color: var(--ink); font: 600 var(--t-s)/1 var(--f-ui); cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background-color var(--t-fast), transform var(--t-fast) var(--ease);}
.try__b:hover{background: rgb(var(--glass-rgb) / .9); transform: translateY(-1px);}
@media (max-width: 63.99rem){.hero{min-height: 0;}
.hero__title{margin-top: .9rem;}
}
@media (max-width: 29.99rem){.hero__since{display: none;}
}
.shelf__head{display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-items: end;}
.shelf__title{margin: .35rem 0 0; font: 500 var(--t-h2)/1.02 var(--f-display); letter-spacing: -.01em;}
.shelf__lead{margin: 0; max-width: 30rem; font: 400 1.05rem/1.6 var(--f-read); color: var(--ink-2);}
@media (min-width: 64rem){.shelf__head{grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);}
}
.filters{flex: 1; min-width: 0; display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; padding: .1rem;}
.filters::-webkit-scrollbar{display: none;}
.chip{flex: none; display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: .5rem 1rem; border-radius: var(--r-pill); border: 0; background: transparent; color: var(--ink-2); font: 600 var(--t-s)/1 var(--f-ui); cursor: pointer; scroll-snap-align: start; transition: background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);}
.chip:hover{color: var(--ink); background: rgb(255 255 255 / calc(var(--lg-rim) * .35));}
.chip[aria-pressed="true"]{background: var(--ink); color: var(--paper); box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 6px 14px -8px rgb(var(--shadow-rgb) / .8);}
.chip__n{font-weight: 400; opacity: .8; font-variant-numeric: tabular-nums;}
.card__kicker{margin: 0; display: flex; align-items: center; gap: .5rem; font: 600 var(--t-xs)/1.2 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink);}
.empty{display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); padding: var(--s-6); border-radius: var(--r-l);}
.empty h3{margin: 0; font: 600 1.7rem/1.15 var(--f-display);}
.empty p{margin: 0; color: var(--ink-2); max-width: 38rem;}
.band__head{display: grid; gap: .6rem; max-width: 44rem; margin-bottom: var(--s-6);}
.band__title{margin: 0; font: 500 var(--t-h2)/1.04 var(--f-display); letter-spacing: -.01em;}
.care{list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem;}
.ctile{display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon main" "icon guides"; gap: .35rem 1rem; align-items: start; padding: 1.1rem 1.15rem; border-radius: 1.3rem; --glass-a: .72; transition: translate var(--t-med) var(--ease);}
.ctile{-webkit-backdrop-filter: none; backdrop-filter: none;}
.ctile--amber{--tint: var(--amber); --lg-caustic: var(--amber);}
.ctile--sage{--tint: var(--sage); --lg-caustic: var(--sage);}
.ctile--maroon{--tint: var(--maroon); --lg-caustic: var(--maroon);}
.ctile:hover{translate: 0 -3px;}
.ctile__icon{grid-area: icon; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; color: var(--ink); background: radial-gradient(circle at 32% 26%, rgb(255 255 255 / .8), rgb(var(--tint) / .3) 55%, rgb(var(--tint) / .55)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .8), inset 0 0 0 1px rgb(var(--tint) / .35), 0 10px 20px -12px rgb(var(--tint) / .9);}
.ctile__icon svg{width: 2.1rem; height: 2.1rem;}
.care__main{grid-area: main; min-width: 0; display: grid; gap: .2rem; color: var(--ink); text-decoration: none;}
.care__q{font: 500 clamp(1.3rem, 1.15rem + .5vw, 1.55rem)/1.15 var(--f-display);}
.care__name{font-size: var(--t-s); color: var(--ink-2);}
.care__main:hover .care__q{color: var(--accent);}
.care__guides{grid-area: guides; justify-self: start; margin-top: .45rem;}
.care__guides{position: relative; z-index: 2; font: 600 var(--t-xs)/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; padding: .6rem .8rem; border-radius: var(--r-pill); background: var(--green-wash); color: var(--green); text-decoration: none; white-space: nowrap; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 25%, transparent);}
.care__guides:hover{color: var(--green); text-decoration: underline;}
@media (min-width: 36rem){.care{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (min-width: 64rem){.care{grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem;}
.ctile{grid-template-columns: minmax(0, 1fr); grid-template-areas: "icon" "main" "guides"; min-height: 15.5rem; padding: 1.4rem; align-content: start;}
.ctile__icon{margin-bottom: .7rem;}
.care__guides{align-self: end;}
}
.crumbs ol{display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 0; padding: 0; list-style: none; font-size: var(--t-s); color: var(--ink-2);}
.crumbs li + li::before{content: "/"; margin-right: .5rem; color: var(--rule-strong);}
.crumbs a{color: var(--ink-2); text-decoration: none;}
.crumbs a:hover{text-decoration: underline;}
.a-head{position: relative; padding-bottom: var(--s-5);}
.a-head__crumbs{padding-block: .8rem .9rem;}
.a-head__wrap{position: relative; z-index: 2; margin-top: calc(-1 * clamp(2.6rem, 9vw, 11rem));}
.a-plate{max-width: 52rem; padding: clamp(1.15rem, .8rem + 1.8vw, 2.6rem); border-radius: clamp(1.25rem, 1rem + 1vw, 2rem);}
.a-head__kicker{display: flex; align-items: center; gap: .8rem;}
.a-head__kicker .eyebrow{min-width: 0;}
.a-head__kicker .eyebrow .dot{margin-right: .35rem;}
.a-title{margin: var(--s-4) 0 0; font: 600 var(--t-h1)/1.03 var(--f-display); letter-spacing: -.012em; color: var(--heading); max-width: 20ch; view-transition-name: hero-title;}
@media (min-width: 64rem){.a-plate{display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-areas: "kicker kicker" "title deck" "title byline" "title tools"; column-gap: clamp(2rem, 1rem + 2.5vw, 3.5rem); max-width: 74rem; align-items: end;}
.a-plate > .a-head__kicker{grid-area: kicker;}
.a-plate > .a-title{grid-area: title; align-self: end;}
}
@media (max-width: 47.99rem){.a-head__crumbs{padding-block: .45rem .55rem;}
.a-head__wrap{margin-top: -2.75rem;}
.a-plate{padding: 1.05rem 1.1rem 1.15rem;}
.a-title{margin-top: var(--s-3); font-size: clamp(1.95rem, 1.4rem + 2.6vw, 2.3rem); line-height: 1.04;}
}
.sources h2{margin: 0 0 .75rem; font: 600 var(--t-h2)/1.08 var(--f-display); color: var(--heading); scroll-margin-top: calc(var(--bar-h) + 1.25rem);}
.answer{position: relative; margin-top: var(--s-2); padding: var(--s-5) var(--s-5) var(--s-5); border-radius: var(--r-l); background: var(--paper); overflow: hidden; box-shadow: inset 0 1px 0 rgb(255 255 255 / calc(var(--lg-rim) * .9)), inset 0 0 0 1px var(--rule), 0 30px 60px -44px rgb(var(--shadow-rgb) / .65);}
.answer::before{content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 14' preserveAspectRatio='none'%3E%3Cpath d='M0 6 C 120 1, 220 12, 330 6 S 520 1, 600 7' fill='none' stroke='%23B8913F' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / 100% 100%;}
.answer__head{display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; margin-bottom: .7rem;}
.answer h2{margin: 0; font: 600 var(--t-xs)/1.2 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--green);}
.answer__time{font-size: var(--t-xs); color: var(--ink-3); letter-spacing: .04em;}
.answer__text{font: 400 var(--t-lead)/1.6 var(--f-read); color: var(--ink);}
.answer__text p{margin: 0;}
.endmark{display: flex; align-items: center; justify-content: center; gap: 1rem; margin: var(--s-7) 0 0; font: 400 2rem/1 "Mukta", "Noto Sans Devanagari", serif; color: var(--gold); letter-spacing: .1em;}
.endmark::before, .endmark::after{content: ""; width: 4rem; height: 1px; background: linear-gradient(90deg, transparent, var(--wire));}
.endmark::after{background: linear-gradient(90deg, var(--wire), transparent);}
.sources{padding-top: var(--s-6);}
.sources ol{margin: 0; padding-left: 1.6rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem;}
.sources li{font: 400 .98rem/1.6 var(--f-read); color: var(--ink-2);}
.sources li::marker{color: var(--gold-ink); font: 600 var(--t-s) var(--f-ui);}
.sources a{color: var(--accent);}
.gitem{list-style: none; display: flex;}
.gitem[hidden]{display: none;}
.gcard{position: relative; flex: 1; display: flex; flex-direction: column; min-width: 0; border-radius: 1.35rem; overflow: clip; background: var(--paper); box-shadow: inset 0 0 0 1px rgb(var(--shadow-rgb) / .1), inset 0 1px 0 rgb(255 255 255 / calc(var(--lg-rim) * .7)), 0 22px 40px -30px rgb(var(--shadow-rgb) / .7); transition: translate .45s var(--spring), box-shadow .3s var(--ease);}
.gcard__body{flex: 1; min-width: 0; display: grid; align-content: start; gap: .45rem; padding: 1rem 1.1rem 1.1rem;}
.gcard__title{margin: 0; font: 600 1.32rem/1.14 var(--f-display); letter-spacing: -.005em; color: var(--heading); overflow-wrap: anywhere;}
.gcard__link{color: inherit; text-decoration: none;}
.gcard__link::after{content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit;}
.gcard__link:focus-visible{outline: none;}
.gcard:has(.gcard__link:focus-visible){outline: 2px solid var(--focus); outline-offset: 3px;}
.gcard__meta{margin: .1rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; font-size: var(--t-s); color: var(--ink-2);}
@media (hover: hover) and (pointer: fine){.gcard:hover{translate: 0 -4px; box-shadow: inset 0 0 0 1px rgb(var(--shadow-rgb) / .14), inset 0 1px 0 rgb(255 255 255 / calc(var(--lg-rim) * .7)), 0 30px 50px -30px rgb(var(--shadow-rgb) / .8);}
.gcard:hover .gcard__title{color: var(--accent);}
}
@media (prefers-reduced-motion: reduce){.gcard{transition: none;}
.gcard:hover{translate: none;}
}
.hubmark{flex: none; display: inline-grid; place-items: center; width: 3.1rem; height: 3.1rem; border-radius: 50%; color: var(--ink); background: radial-gradient(70% 70% at 32% 26%, rgb(255 255 255 / .7), transparent 62%), radial-gradient(100% 100% at 70% 80%, rgb(var(--tint, var(--amber)) / .5), rgb(var(--tint, var(--amber)) / .16)); box-shadow: inset 0 0 0 1px rgb(var(--tint, var(--amber)) / .35), 0 8px 18px -10px rgb(var(--tint, var(--amber)) / .9);}
.hubmark svg{width: 62%; height: 62%; opacity: .85;}
.hubmark--sm{width: 2.1rem; height: 2.1rem;}
.hgroup__grid{margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: clamp(1rem, 2vw, 1.4rem);}
@media (max-width: 39.99rem){:is(.results__grid, .hgroup__grid){gap: .7rem;}
:is(.results__grid, .hgroup__grid) .gcard{flex-direction: row; border-radius: 1.1rem;}
:is(.results__grid, .hgroup__grid) .gcard__body{padding: .8rem .95rem .85rem; gap: .3rem;}
:is(.results__grid, .hgroup__grid) .gcard__title{font-size: 1.16rem;}
:is(.results__grid, .hgroup__grid) .gcard .card__kicker{font-size: .7rem; letter-spacing: .1em;}
}
.hub-hero{position: relative; overflow: clip; isolation: isolate; padding-block: clamp(1.6rem, 1rem + 3vw, 3.5rem) var(--s-6);}
.hub-hero__light{position: absolute; inset: 0; z-index: -1; pointer-events: none; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent);}
.hub-hero__glow{position: absolute; right: -18%; top: -30%; width: min(70rem, 120vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgb(var(--tint) / .34), rgb(var(--tint) / .1) 55%, transparent 72%);}
.hub-hero__grid{display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: center;}
.hub-hero__copy{display: grid; gap: var(--s-4); justify-items: start;}
.hub-hero__copy > *{margin: 0;}
.hub-hero__q{display: inline-flex; align-items: center; gap: .65rem; font: italic 400 1.1rem/1.4 var(--f-read); color: var(--ink-2);}
.hub-hero__title{font: 500 var(--t-h1)/1.02 var(--f-display); letter-spacing: -.015em; overflow-wrap: anywhere;}
.hub-hero__title span{font-style: italic; color: var(--ink-2);}
.hub-hero__deck{max-width: 36rem; font: 400 var(--t-lead)/1.55 var(--f-read); color: var(--ink-2);}
.hub-stats{display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; padding: 0; list-style: none; font-size: var(--t-s); color: var(--ink-2);}
.hub-stats b{display: block; font: 500 2rem/1 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums;}
@media (min-width: 56rem){.hub-hero__grid{grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);}
}
.hgroup{padding-top: var(--s-6); scroll-margin-top: 1rem;}
.hgroup + .hgroup{margin-top: var(--s-6); border-top: 1px solid var(--rule);}
.hgroup__head{display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin-bottom: var(--s-5);}
.hgroup__title{margin: 0; font: 500 clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem)/1.05 var(--f-display); letter-spacing: -.01em;}
.hgroup__meta{margin: 0; font-size: var(--t-s); color: var(--ink-2);}
.hgroup__care{margin-left: auto; display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem .45rem; min-width: 0; max-width: 100%; min-height: 2.75rem; color: var(--green); font: 600 var(--t-s)/1.2 var(--f-ui); text-decoration: none;}
.hgroup__care span{padding: .3rem .6rem; border-radius: var(--r-pill); background: var(--green-wash); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase;}
.hgroup__care svg{width: 1rem; height: 1rem; transition: translate var(--t-med) var(--spring);}
.hgroup__care:hover{color: var(--green); text-decoration: underline;}
.hgroup__care:hover svg{translate: 3px 0;}
@media (forced-colors: active){.gcard{border: 1px solid CanvasText;}
}
html{-webkit-tap-highlight-color: transparent;}
::selection{background: rgb(var(--amber) / .32);}
@media (hover: none){:is(.scard, .qcard, .rcard, .ctile, .upnext__card, .chip, .btn, .try__b, .vhint, .pref-src, .trail__next, .icon-btn){transition: scale .25s var(--spring);}
:is(.scard, .qcard, .rcard, .ctile, .upnext__card):active{scale: .985;}
:is(.chip, .btn, .try__b, .vhint, .pref-src, .trail__next, .icon-btn):active{scale: .95;}
}
.foot{position: relative; z-index: 1; background: var(--band-bg); color: var(--band-ink); padding-block: var(--s-8) var(--s-6);}
.foot a{color: var(--band-ink); text-decoration-color: rgb(255 255 255 / .35);}
.foot a:hover{color: var(--band-accent);}
.foot h2{margin: 0 0 .6rem; font: 600 var(--t-xs)/1.2 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--band-accent);}
.foot ul{list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem;}
.foot address{font-style: normal; color: var(--band-ink-2); font-size: var(--t-s); line-height: 1.55;}
.foot address strong{color: var(--band-ink); display: block; font-size: var(--t-m);}
@media (prefers-reduced-motion: no-preference){html.js:not(.motion-off) .hero__copy > *{animation: rise-in .9s var(--ease) both;}
html.js:not(.motion-off) .hero__copy > :nth-child(2){animation-delay: .08s;}
html.js:not(.motion-off) .hero__copy > :nth-child(3){animation-delay: .16s;}
html.js:not(.motion-off) .hero__copy > :nth-child(n+4){animation-delay: .24s;}
html.js:not(.motion-off) .hero__title em::after{animation: thread-draw 1.1s .7s var(--ease) both;}
}
@view-transition{navigation: none;
}
@media (min-width: 64rem){.hero__copy{grid-column: 1; grid-row: 1;}
}
@media (forced-colors: active){.glass, .answer{border: 1px solid CanvasText; background: Canvas; -webkit-backdrop-filter: none; backdrop-filter: none;}
.glass::before, .glass::after{display: none;}
.chip[aria-pressed="true"]{forced-color-adjust: none; background: Highlight; color: HighlightText;}
}
@media print{body::after, .mast, .foot{display: none !important;}
body{background: #fff; color: #000;}
}
@media (hover: hover) and (pointer: fine){[data-tilt]{transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease);}
}
@media (prefers-reduced-motion: reduce){[data-motion-toggle]{display: none;}
}
@media (max-width: 899.98px), (pointer: coarse){.glass{--glass-a: .9; -webkit-backdrop-filter: none; backdrop-filter: none;}
.glass--panel{--glass-a: .94;}
}
@keyframes rise-in{ from { transform: translateY(1.2rem); opacity: .35; } }
@keyframes thread-draw{ from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }