/* ========================================================================== Artha Systems — Base: typography, layout primitives, ambient depth ========================================================================== */ /* The closed mobile drawer is position:fixed and parked at translateX(100%), which still contributes to the document's scrollable width. `overflow-x: hidden` on cannot clip it (fixed elements resolve against the viewport, not body), so clip at the root instead. `clip` rather than `hidden` on purpose — `hidden` turns into a scroll container and breaks `position: sticky` on the header. The body rule is the fallback for engines without `clip` support. */ html { overflow-x: clip; } body { font-family: var(--ff-body); font-size: var(--fs-body); font-weight: 400; line-height: 1.7; color: var(--mist); background: var(--obsidian); overflow-x: clip; position: relative; } @supports not (overflow-x: clip) { body { overflow-x: hidden; } } /* --- Ambient depth field: fixed mesh gradients behind everything --------- */ body::before { content: ""; position: fixed; inset: -20%; z-index: -2; pointer-events: none; background: radial-gradient(52rem 40rem at 12% -6%, rgba(52, 91, 142, .30), transparent 62%), radial-gradient(44rem 36rem at 92% 8%, rgba(217, 180, 91, .085), transparent 60%), radial-gradient(58rem 46rem at 78% 92%, rgba(52, 91, 142, .20), transparent 64%), radial-gradient(36rem 30rem at 24% 68%, rgba(79, 209, 197, .05), transparent 60%); animation: meshDrift 34s var(--ease-in-out) infinite alternate; } /* --- Film grain: kills banding on the large dark gradients --------------- */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .030; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ========================================================================== Typography ========================================================================== */ h1, h2, h3, h4, h5, h6 { font-family: var(--ff-sans); color: var(--platinum); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); font-weight: 600; } /* Editorial display — the luxury signal. One oversized statement per section. */ .display { font-family: var(--ff-display); font-weight: 400; font-size: var(--fs-display); line-height: 0.98; letter-spacing: -0.025em; color: var(--platinum); } .display--h2 { font-size: var(--fs-h2); line-height: 1.06; } .display em { font-style: italic; color: var(--gold); position: relative; } /* Gold eyebrow label — opens every section */ .eyebrow { display: inline-flex; align-items: center; gap: .625rem; font-family: var(--ff-mono); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.25rem; } .eyebrow::before { content: ""; width: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); flex: none; } /* Safety net: an inline with no width/height attribute and no sizing rule of its own resolves to 300x150 in CSS, which blows up any layout it lands in. Cap every icon-style svg to text size; component rules below then widen it wherever a larger icon is intended. Specificity note: `:where()` contributes 0, so this selector weighs the same as `.eyebrow svg` (0,1,1). It MUST stay above the component rules — on a tie the later rule wins, and this fallback would override them. */ :where(p, li, span, a, button, h1, h2, h3, h4, h5, h6, address, label) > svg:not([width]) { width: 1em; height: 1em; flex: none; } .eyebrow svg { width: 14px; height: 14px; flex: none; } .eyebrow--center::after { content: ""; width: 28px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); flex: none; } .lead { font-size: clamp(1.0625rem, 1.35vw, 1.25rem); line-height: 1.72; color: var(--mist); max-width: 62ch; } /* Headline → lead spacing, wherever the pair appears */ .display + .lead, h1 + .lead, h2 + .lead, h3 + .lead { margin-top: 1.375rem; } .lead + .checklist, .lead + .cluster { margin-top: 2rem; } .muted { color: var(--muted); } .gold { color: var(--gold); } p { max-width: 68ch; } strong, b { color: var(--platinum); font-weight: 600; } /* ========================================================================== Layout primitives ========================================================================== */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: var(--maxw-narrow); } .section { position: relative; padding-block: var(--section-y); } .section--ink { background: linear-gradient(180deg, transparent, var(--ink) 18%, var(--ink) 82%, transparent); } .section__head { max-width: 68ch; margin-bottom: clamp(2.75rem, 5vw, 4.5rem); } .section__head--center { margin-inline: auto; text-align: center; } .section__head--center .eyebrow { justify-content: center; } .section__head--center .lead { margin-inline: auto; } .section__head .lead { margin-top: 1.375rem; } /* Hairline rules — never solid grey */ .hairline { height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--glass-brd) 22%, var(--glass-brd) 78%, transparent); } .grid { display: grid; gap: clamp(1.25rem, 2.2vw, 2rem); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } /* Asymmetric split — the default editorial composition */ .split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; } .split--wide-left { grid-template-columns: 1.25fr 0.75fr; } .split--wide-right { grid-template-columns: 0.78fr 1.22fr; } .stack { display: flex; flex-direction: column; } .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; } /* ========================================================================== Accessibility ========================================================================== */ .skip-link { position: absolute; top: -100px; left: var(--gutter); z-index: var(--z-toast); padding: .875rem 1.5rem; background: var(--gold); color: var(--on-gold); font-family: var(--ff-sans); font-weight: 600; border-radius: 0 0 var(--r-sm) var(--r-sm); transition: top var(--t-base) var(--ease); } .skip-link:focus { top: 0; } :where(a, button, input, textarea, select, [tabindex]):focus-visible { outline: 3px solid var(--sapphire-glow); outline-offset: 3px; border-radius: var(--r-xs); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ========================================================================== Scrollbar ========================================================================== */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--obsidian); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--sapphire), var(--sapphire-deep)); border-radius: var(--r-pill); border: 3px solid var(--obsidian); } ::-webkit-scrollbar-thumb:hover { background: var(--sapphire-lit); }