/* ────────────────────────────────────────────────────────────── Rakhi · portfolio v2 Tokens first. Light on :root; dark redefines the tokens for the system preference and for the explicit switch; the story chapter shifts the whole page to deep green on top of either. ────────────────────────────────────────────────────────────── */ /* ── Palettes. Default is "forest", Rakhi's choice of 2026-09-24. Add data-palette="plum" or "ink" on to switch. Each has a light set, a dark set and a deep tone for the stuck-point chapter. ──────────────────────────────────────────────────────── */ :root{ --bg:#FAF7F1; --bg-2:#F2EDE3; --surface:#FFFDF8; --surface-2:#F7F3EA; --ink:#16231C; --ink-2:#4E5B53; --ink-3:#8A948C; --line:#E2DBCD; --line-2:#EDE7DB; --accent:#1F6B4E; --accent-ink:#FFFDF8; --accent-soft:#DDEBE1; --accent-soft-2:#EDF4EF; --grey-path:#BDB6A6; --pencil:#9AA69E; --grid:rgba(31,107,78,.055); --grid-size:26px; --shadow-sm:0 1px 2px rgba(22,35,28,.05), 0 1px 1px rgba(22,35,28,.03); --shadow-md:0 2px 4px rgba(22,35,28,.04), 0 18px 40px -18px rgba(22,35,28,.24); --bar-bg:rgba(250,247,241,.72); --f-display:"Fraunces", Georgia, "Times New Roman", serif; --f-body:"Manrope", "Segoe UI", system-ui, -apple-system, sans-serif; --f-hand:"Kalam", "Segoe Script", cursive; --w:1280px; --gutter:clamp(1.25rem, 5vw, 5rem); --bar-h:72px; --ease:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.16,1,.3,1); --ease-expo:cubic-bezier(.7,0,.2,1); --r-sm:10px; --r-md:18px; --r-lg:26px; --r-pill:999px; --shift:.7s; } /* plum: deep mulberry on blush paper */ :root[data-palette="plum"]{ --bg:#FBF6F4; --bg-2:#F4EAE7; --surface:#FFFCFB; --surface-2:#F9F1EF; --ink:#2A1B2C; --ink-2:#5C4A5E; --ink-3:#9A8A9C; --line:#E8DAD9; --line-2:#F1E6E5; --accent:#7B3F5E; --accent-ink:#FFFCFB; --accent-soft:#EEDCE5; --accent-soft-2:#F8EEF2; --grey-path:#C0B0B5; --pencil:#A9959D; --grid:rgba(123,63,94,.05); --shadow-sm:0 1px 2px rgba(42,27,44,.05), 0 1px 1px rgba(42,27,44,.03); --shadow-md:0 2px 4px rgba(42,27,44,.04), 0 18px 40px -18px rgba(42,27,44,.22); --bar-bg:rgba(251,246,244,.72); } /* ink: deep indigo on cream */ :root[data-palette="ink"]{ --bg:#FAF7F0; --bg-2:#F2EDE2; --surface:#FFFDF8; --surface-2:#F7F2E9; --ink:#1A2036; --ink-2:#4D5468; --ink-3:#888FA2; --line:#E4DCCE; --line-2:#EFE8DA; --accent:#34407F; --accent-ink:#FFFDF8; --accent-soft:#DFE3F1; --accent-soft-2:#EFF1F9; --grey-path:#BCB4A5; --pencil:#9E968A; --grid:rgba(52,64,127,.05); --shadow-sm:0 1px 2px rgba(26,32,54,.05), 0 1px 1px rgba(26,32,54,.03); --shadow-md:0 2px 4px rgba(26,32,54,.04), 0 18px 40px -18px rgba(26,32,54,.22); --bar-bg:rgba(250,247,240,.72); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:#101614; --bg-2:#171F1B; --surface:#1B2420; --surface-2:#202A25; --ink:#E8EEE9; --ink-2:#AEBAB2; --ink-3:#7E8B83; --line:#2C3832; --line-2:#26302B; --accent:#7ECDA6; --accent-ink:#0B1410; --accent-soft:#1E3A2D; --accent-soft-2:#182A22; --grey-path:#565F5A; --pencil:#6E7C73; --grid:rgba(126,205,166,.055); --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 2px 4px rgba(0,0,0,.3), 0 18px 40px -18px rgba(0,0,0,.7); --bar-bg:rgba(16,22,20,.72); } :root[data-palette="plum"]:not([data-theme="light"]){ --bg:#15101A; --bg-2:#1C1522; --surface:#211926; --surface-2:#271E2C; --ink:#EFE6EC; --ink-2:#B9A9B7; --ink-3:#8A7C88; --line:#332838; --line-2:#2C2231; --accent:#D99BB8; --accent-ink:#1A0F16; --accent-soft:#3D2434; --accent-soft-2:#2E1B28; --grey-path:#5E505A; --pencil:#7A6B76; --grid:rgba(217,155,184,.05); --bar-bg:rgba(21,16,26,.72); } :root[data-palette="ink"]:not([data-theme="light"]){ --bg:#0F1320; --bg-2:#151A2A; --surface:#1A2032; --surface-2:#1F2639; --ink:#E7EAF2; --ink-2:#AEB4C6; --ink-3:#7E859A; --line:#2A3145; --line-2:#242A3C; --accent:#9FB0F0; --accent-ink:#0B0F1C; --accent-soft:#252E52; --accent-soft-2:#1C2340; --grey-path:#565E74; --pencil:#6E7690; --grid:rgba(159,176,240,.05); --bar-bg:rgba(15,19,32,.72); } } :root[data-theme="dark"]{ --bg:#101614; --bg-2:#171F1B; --surface:#1B2420; --surface-2:#202A25; --ink:#E8EEE9; --ink-2:#AEBAB2; --ink-3:#7E8B83; --line:#2C3832; --line-2:#26302B; --accent:#7ECDA6; --accent-ink:#0B1410; --accent-soft:#1E3A2D; --accent-soft-2:#182A22; --grey-path:#565F5A; --pencil:#6E7C73; --grid:rgba(126,205,166,.055); --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 2px 4px rgba(0,0,0,.3), 0 18px 40px -18px rgba(0,0,0,.7); --bar-bg:rgba(16,22,20,.72); } :root[data-theme="dark"][data-palette="plum"]{ --bg:#15101A; --bg-2:#1C1522; --surface:#211926; --surface-2:#271E2C; --ink:#EFE6EC; --ink-2:#B9A9B7; --ink-3:#8A7C88; --line:#332838; --line-2:#2C2231; --accent:#D99BB8; --accent-ink:#1A0F16; --accent-soft:#3D2434; --accent-soft-2:#2E1B28; --grey-path:#5E505A; --pencil:#7A6B76; --grid:rgba(217,155,184,.05); --bar-bg:rgba(21,16,26,.72); } :root[data-theme="dark"][data-palette="ink"]{ --bg:#0F1320; --bg-2:#151A2A; --surface:#1A2032; --surface-2:#1F2639; --ink:#E7EAF2; --ink-2:#AEB4C6; --ink-3:#7E859A; --line:#2A3145; --line-2:#242A3C; --accent:#9FB0F0; --accent-ink:#0B0F1C; --accent-soft:#252E52; --accent-soft-2:#1C2340; --grey-path:#565E74; --pencil:#6E7690; --grid:rgba(159,176,240,.05); --bar-bg:rgba(15,19,32,.72); } /* the story chapter: deep green, both themes */ :root[data-chapter="story"][data-palette="plum"]{ --bg:#1E1222; --bg-2:#26182A; --surface:#2C1D31; --surface-2:#332338; --ink:#F1E8EE; --ink-2:#C6B2C3; --ink-3:#95828F; --line:#432F49; --line-2:#3A2840; --accent:#E6AFC8; --accent-ink:#1A0F16; --accent-soft:#4A2E3E; --accent-soft-2:#3A2331; --grey-path:#6E5B67; --pencil:#8B7684; --grid:rgba(230,175,200,.05); --bar-bg:rgba(30,18,34,.72); } :root[data-chapter="story"][data-palette="ink"]{ --bg:#101733; --bg-2:#161E3F; --surface:#1B2447; --surface-2:#202A52; --ink:#E9ECF7; --ink-2:#B5BCD8; --ink-3:#848CAC; --line:#2E3A63; --line-2:#273256; --accent:#A9B8F5; --accent-ink:#0B1024; --accent-soft:#2A3567; --accent-soft-2:#212B55; --grey-path:#5B6488; --pencil:#737C9C; --grid:rgba(169,184,245,.05); --bar-bg:rgba(16,23,51,.72); } :root[data-chapter="story"]{ --bg:#0F211A; --bg-2:#14291F; --surface:#173026; --surface-2:#1B372B; --ink:#EAF2EC; --ink-2:#B7C9BE; --ink-3:#7E9488; --line:#2A4436; --line-2:#223A2E; --accent:#8FE0B4; --accent-ink:#0B1A13; --accent-soft:#1F4A37; --accent-soft-2:#183A2B; --grey-path:#587A69; --pencil:#6F8C7C; --grid:rgba(143,224,180,.05); --shadow-sm:0 1px 2px rgba(0,0,0,.35); --shadow-md:0 2px 4px rgba(0,0,0,.25), 0 18px 40px -18px rgba(0,0,0,.6); --bar-bg:rgba(15,33,26,.7); } /* ── Base ───────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bar-h) + 8px)} html:not(.lenis){scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html,html:not(.lenis){scroll-behavior:auto}} html.lenis,html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto!important} .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain} .lenis.lenis-stopped{overflow:hidden} body{ margin:0;color:var(--ink); font-family:var(--f-body);font-size:1.0625rem;line-height:1.65; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; transition:background-color var(--shift) var(--ease), color var(--shift) var(--ease); overflow-x:hidden; /* the ground is a maths exercise book: squared paper, very faint */ background-color:var(--bg); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size:var(--grid-size) var(--grid-size); background-position:center top; } /* ── Hand: annotations in the margin of the page ────────────── */ .hand{font-family:var(--f-hand);font-weight:400;line-height:1.35;color:var(--accent);letter-spacing:.005em} .hand--pencil{color:var(--pencil)} .note-hand{display:inline-flex;align-items:flex-start;gap:.5rem;font-family:var(--f-hand);font-size:1.0625rem;line-height:1.35;color:var(--accent)} .note-hand svg{flex:none;margin-top:.15em} .note-hand path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* a pencil underline drawn under a phrase */ .mark{position:relative;display:inline-block} .mark svg{position:absolute;left:-2%;bottom:-.28em;width:104%;height:.42em;overflow:visible;pointer-events:none} .mark path{fill:none;stroke:var(--accent);stroke-width:3.5;stroke-linecap:round;opacity:.42} /* a highlighter pass, the way a teacher marks a line */ .hl{background-image:linear-gradient(transparent 58%, var(--accent-soft) 58%, var(--accent-soft) 94%, transparent 94%);padding:0 .1em} :root[data-chapter="story"] .hl,:root[data-theme="dark"] .hl{background-image:linear-gradient(transparent 58%, var(--accent-soft) 58%, var(--accent-soft) 94%, transparent 94%)} h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:400;letter-spacing:-.015em;text-wrap:balance;font-variation-settings:"SOFT" 40,"opsz" 72,"WONK" 0} p{margin:0} ul,ol{margin:0;padding:0;list-style:none} a{color:inherit;text-decoration:none} img,svg,canvas{max-width:100%;display:block} button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px} ::selection{background:var(--accent);color:var(--accent-ink)} .wrap{width:100%;max-width:var(--w);margin-inline:auto;padding-inline:var(--gutter)} .muted{color:var(--ink-2)} .small{font-size:.9375rem} .skip{position:absolute;left:1rem;top:-3rem;background:var(--ink);color:var(--bg);padding:.5rem .9rem;border-radius:var(--r-sm);z-index:200;transition:top .2s} .skip:focus{top:1rem} .h2{font-size:clamp(2.1rem, 1.4rem + 2.6vw, 3.6rem);line-height:1.05} .lead{font-size:clamp(1.125rem, 1.05rem + .45vw, 1.375rem);line-height:1.55;color:var(--ink-2);max-width:58ch} .eyebrow{font-size:.8125rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)} .label{font-size:.875rem;font-weight:700;color:var(--ink-2);margin-bottom:.9rem} p a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px} p a:hover{text-decoration-thickness:2px} /* masks for line reveals: hidden only when JS runs */ .mask{display:block;overflow:hidden} .mask > span{display:block} .js .mask > span{transform:translateY(112%);will-change:transform} .js.no-anim .mask > span,.js .is-ready .mask > span{transform:none} /* pills and buttons */ .pill{ display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.15rem;border-radius:var(--r-pill); font-weight:700;font-size:.9rem;line-height:1;border:1px solid var(--line);background:var(--surface);color:var(--ink); transition:transform .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease); } .pill:hover{border-color:var(--ink);transform:translateY(-1px)} .pill--ghost{background:transparent} .icon-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);position:relative;transition:background-color .2s,color .2s} .icon-btn:hover{background:var(--bg-2);color:var(--ink)} .icon{position:absolute;transition:opacity .25s var(--ease), transform .4s var(--ease)} .icon--moon{opacity:1;transform:rotate(0) scale(1)} .icon--sun{opacity:0;transform:rotate(-40deg) scale(.6)} [data-theme="dark"] .icon--moon{opacity:0;transform:rotate(40deg) scale(.6)} [data-theme="dark"] .icon--sun{opacity:1;transform:rotate(0) scale(1)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .icon--moon{opacity:0;transform:rotate(40deg) scale(.6)} :root:not([data-theme="light"]) .icon--sun{opacity:1;transform:rotate(0) scale(1)} } /* ── Loader ─────────────────────────────────────────────────── */ .loader{position:fixed;inset:0;z-index:150;background:var(--ink);color:var(--bg);display:grid;place-items:center} :root[data-theme="dark"] .loader{background:#0B0F0D} html:not(.js) .loader,html.seen .loader,html.no-anim .loader{display:none} .loader__inner{display:flex;flex-direction:column;align-items:center;gap:1rem} .loader__name{overflow:hidden;font-family:var(--f-display);font-size:clamp(3rem, 8vw, 6rem);line-height:1;letter-spacing:-.02em;font-variation-settings:"SOFT" 60,"opsz" 144} .loader__name > span{display:block;transform:translateY(110%)} .loader__rule{width:min(40vw,240px);height:1px;background:rgba(255,255,255,.18);overflow:hidden} .loader__rule i{display:block;height:100%;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left} .loader__sub{overflow:hidden;font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;opacity:.8} .loader__sub > span{display:block;transform:translateY(110%)} /* ── Cursor ─────────────────────────────────────────────────── */ .cursor{position:fixed;left:0;top:0;z-index:140;pointer-events:none;opacity:0;transition:opacity .3s} .cursor.is-on{opacity:1} .cursor__dot{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--accent)} .cursor__ring{position:absolute;left:-18px;top:-18px;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--ink);opacity:.55;transition:transform .35s var(--ease), opacity .3s, background-color .3s, border-color .3s} .cursor.is-link .cursor__ring{transform:scale(1.7);opacity:.9;border-color:var(--accent)} .cursor.is-label .cursor__ring{transform:scale(2.4);background:var(--accent);border-color:var(--accent);opacity:1} .cursor.is-label .cursor__dot{opacity:0} .cursor__label{position:absolute;left:0;top:0;transform:translate(-50%,-50%);font-size:.6875rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);opacity:0;transition:opacity .2s} .cursor.is-label .cursor__label{opacity:1} .cursor.is-field .cursor__ring{transform:scale(3.2);opacity:.35;border-style:dashed} @media (hover:none), (prefers-reduced-motion:reduce){.cursor{display:none}} html.has-cursor{cursor:none} html.has-cursor a,html.has-cursor button{cursor:none} /* ── Bar ────────────────────────────────────────────────────── */ .bar{ position:fixed;top:0;left:0;right:0;z-index:120;height:var(--bar-h); display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:0 var(--gutter); transition:transform .5s var(--ease-out), background-color var(--shift) var(--ease); } .bar.is-solid{background:var(--bar-bg);-webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px)} .bar.is-hidden{transform:translateY(-110%)} .brand{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--f-display);font-size:1.5rem;letter-spacing:-.01em;font-variation-settings:"SOFT" 60,"opsz" 24;color:var(--ink);transition:color var(--shift) var(--ease)} .brand__dot{width:9px;height:9px;border-radius:50%;background:var(--accent);transition:transform .3s var(--ease), background-color var(--shift)} .brand:hover .brand__dot{transform:scale(1.4)} .bar__right{display:flex;align-items:center;gap:.6rem} .bar__status{display:inline-flex;align-items:center;gap:.5rem;font-size:.8125rem;font-weight:600;color:var(--ink-2);margin-right:.5rem;font-variant-numeric:tabular-nums} .bar__pulse{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 var(--accent);animation:pulse 2.4s var(--ease) infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent)}100%{box-shadow:0 0 0 10px transparent}} .menu-btn{display:inline-flex;align-items:center;gap:.6rem;padding:.55rem .95rem;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);font-weight:700;font-size:.9rem;transition:border-color .25s,background-color .25s} .menu-btn:hover{border-color:var(--ink)} .menu-btn__txt{position:relative;display:inline-block;height:1em;line-height:1;overflow:hidden;min-width:3.2em} .menu-btn__txt span{display:block;transition:transform .4s var(--ease-expo)} .menu-btn__close{position:absolute;left:0;top:0;transform:translateY(120%)} .menu-btn[aria-expanded="true"] .menu-btn__open{transform:translateY(-120%)} .menu-btn[aria-expanded="true"] .menu-btn__close{transform:none} .menu-btn__lines{display:flex;flex-direction:column;gap:4px;width:16px} .menu-btn__lines i{display:block;height:2px;background:currentColor;border-radius:2px;transition:transform .4s var(--ease-expo)} .menu-btn[aria-expanded="true"] .menu-btn__lines i:first-child{transform:translateY(3px) rotate(45deg)} .menu-btn[aria-expanded="true"] .menu-btn__lines i:last-child{transform:translateY(-3px) rotate(-45deg)} @media (max-width:760px){.bar__status,.bar__cv{display:none}.menu-btn__txt{display:none}.menu-btn{padding:.7rem .8rem}} /* ── Menu overlay ───────────────────────────────────────────── */ .menu{position:fixed;inset:0;z-index:110;background:var(--bg);display:flex;flex-direction:column;justify-content:center;padding:calc(var(--bar-h) + 1rem) var(--gutter) 2rem;transition:background-color var(--shift)} .menu[hidden]{display:none} .menu__links{display:flex;flex-direction:column} .menu__links a{display:flex;align-items:baseline;gap:1.2rem;padding:.35rem 0;border-bottom:1px solid var(--line);font-family:var(--f-display);font-size:clamp(2.4rem, 1rem + 7vw, 6.5rem);line-height:1.1;letter-spacing:-.02em;font-variation-settings:"SOFT" 50,"opsz" 144;overflow:hidden} .menu__links a .menu__t{display:inline-block;transition:transform .5s var(--ease-expo), color .3s} .menu__links a:hover .menu__t{transform:translateX(.35em);color:var(--accent)} .menu__n{font-family:var(--f-body);font-size:.8rem;font-weight:700;color:var(--ink-3);letter-spacing:.08em;min-width:2.2em} .menu__foot{display:flex;flex-wrap:wrap;gap:1rem 2rem;margin-top:2rem;font-size:.9375rem;font-weight:600} .menu__foot a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line)} .menu__foot a:hover{text-decoration-color:var(--accent)} /* ── Hero ───────────────────────────────────────────────────── */ .hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:calc(var(--bar-h) + 3rem) 0 clamp(2.5rem, 6vh, 5rem);overflow:hidden} .hero__canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.2s var(--ease)} .hero.is-ready .hero__canvas{opacity:1} .hero__inner{position:relative;z-index:1} .hero__eyebrow{margin-bottom:1.2rem} .hero__title{font-size:clamp(2.6rem, 1.2rem + 6.4vw, 7.2rem);line-height:.98;letter-spacing:-.03em;font-variation-settings:"SOFT" 40,"opsz" 144,"WONK" 0;max-width:14ch} .hero__title em{font-style:italic;font-weight:300;color:var(--accent);font-variation-settings:"SOFT" 80,"opsz" 144,"WONK" 1} .hero__foot{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:1.5rem clamp(2rem,6vw,6rem);align-items:end;margin-top:clamp(1.5rem, 4vh, 3rem)} .hero__lede{font-size:clamp(1.0625rem, 1rem + .35vw, 1.25rem);line-height:1.6;color:var(--ink-2);max-width:48ch} .hero__hint{font-size:1rem;line-height:1.4;max-width:33ch;justify-self:end} .hero__hint > span{display:flex;gap:.6rem;align-items:flex-start} .hero__hint svg{transform:rotate(-8deg)} .scroll-cue{position:absolute;right:var(--gutter);bottom:1.4rem;width:26px;height:44px;border:1.5px solid var(--ink-3);border-radius:13px;opacity:.7;transition:opacity .3s} .scroll-cue span{position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:var(--ink);animation:cue 1.8s var(--ease) infinite} @keyframes cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(16px);opacity:0}100%{transform:translateY(0);opacity:0}} @media (max-width:900px){.hero__foot{grid-template-columns:1fr}.hero__hint{justify-self:start}.scroll-cue{display:none}.hero{padding-top:calc(var(--bar-h) + 2rem)}} /* short desktop viewports: keep the whole hero, including the collaboration call, above the fold */ @media (min-width:901px) and (max-height:940px){ .hero{padding-top:calc(var(--bar-h) + 1.25rem)} .hero__title{font-size:clamp(2.6rem, 1rem + 5.5vw, 6rem)} .hero__foot{margin-top:1.25rem} } /* ── Sections ───────────────────────────────────────────────── */ .section{padding:clamp(5rem, 10vw, 9rem) 0} .sec-head{display:flex;align-items:baseline;gap:1rem;margin-bottom:clamp(1.5rem, 3vw, 2.5rem);color:var(--ink-2);font-size:.8125rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase} .sec-num{font-family:var(--f-hand);font-style:normal;font-weight:700;text-transform:none;letter-spacing:0;font-size:1.15rem;color:var(--accent)} .sec-head::after{content:"";flex:1;height:1px;background:var(--line);margin-left:.5rem;transition:background-color var(--shift)} /* About: the statement fills in on scroll */ .statement{font-family:var(--f-display);font-size:clamp(1.55rem, 1rem + 2.6vw, 3.1rem);line-height:1.25;letter-spacing:-.015em;max-width:30ch;font-variation-settings:"SOFT" 40,"opsz" 60} .statement .w{display:inline-block;transition:opacity .2s} .js .statement .w{opacity:.16} .js.no-anim .statement .w{opacity:1} .about__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(2rem,6vw,6rem);margin-top:clamp(3rem,6vw,5rem);align-items:start} .about__more{max-width:56ch;color:var(--ink-2);font-size:1.0625rem} .facts{margin:0;border-top:1px solid var(--line)} .facts > div{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line)} .facts dt{font-size:.875rem;font-weight:700;color:var(--ink-3);padding-top:.1rem} .facts dd{margin:0;font-size:.9375rem;line-height:1.5} .margin-note{font-size:1.2rem;margin-top:1.5rem;transform:rotate(-1.4deg);transform-origin:left center} .resource__note{margin-top:1rem;font-size:1.05rem} .resource__note svg{transform:rotate(-8deg) scaleX(-1)} .collab__note{font-size:1.15rem;margin-top:.9rem;transform:rotate(-1deg);transform-origin:left center} .strip{margin-top:clamp(3rem,6vw,5rem);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .strip__inner{display:flex;flex-wrap:wrap;gap:.4rem 2.5rem;justify-content:space-between;padding-block:1.1rem;font-size:.875rem;font-weight:700;letter-spacing:.04em;color:var(--ink-2)} @media (max-width:860px){.about__grid{grid-template-columns:1fr}.strip__inner{justify-content:flex-start;gap:.4rem 1.5rem}} /* ── Story: sticky figure, scrolling beats ──────────────────── */ .story{padding:clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem)} .story__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,6vw,6rem);align-items:start} .story__text .sec-head{margin-bottom:1rem} .beat{min-height:74vh;display:flex;flex-direction:column;justify-content:center;padding:2rem 0;opacity:.22;transform:translateY(8px);transition:opacity .5s var(--ease), transform .5s var(--ease)} .beat.is-on{opacity:1;transform:none} .beat h2{font-size:clamp(1.9rem, 1.2rem + 2.8vw, 3.6rem);line-height:1.05;margin-bottom:1rem;font-variation-settings:"SOFT" 50,"opsz" 96} .beat p{max-width:44ch;color:var(--ink-2);font-size:1.0625rem} .story__fig{margin:0;position:sticky;top:calc(var(--bar-h) + 1.5rem);align-self:start} .story__card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1rem 1rem .9rem;box-shadow:var(--shadow-md);transition:background-color var(--shift),border-color var(--shift)} .story__svg{width:100%;height:auto;border-radius:var(--r-md);background:var(--surface-2);transition:background-color var(--shift)} .s-dot{fill:var(--line)} .s-axis{font-family:var(--f-body);font-size:11px;fill:var(--ink-3);letter-spacing:.04em} .s-note{font-family:var(--f-display);font-style:italic;font-size:15px;fill:var(--ink);opacity:0} .s-supportlabel{font-family:var(--f-body);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;fill:var(--accent);opacity:0} .s-end{font-family:var(--f-body);font-size:12px;font-weight:700;letter-spacing:.02em;opacity:0} .s-end--up{fill:var(--accent)}.s-end--down{fill:var(--ink-3)} .s-path{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round} .s-base{stroke:var(--ink)} .s-recover{stroke:var(--accent)} .s-collapse{stroke:var(--grey-path)} .s-scribble{fill:none;stroke:var(--ink-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:0} .s-support{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-dasharray:4 6;opacity:0} .s-halo{fill:var(--accent);opacity:0;transform-origin:292px 214px} .s-pin{fill:var(--accent);opacity:0} .beats-nav{display:flex;gap:.45rem;justify-content:center;margin-top:.9rem} .beats-nav li{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background-color .3s,transform .3s} .beats-nav li.is-on{background:var(--accent);transform:scale(1.3)} @media (max-width:900px){ .story__grid{grid-template-columns:1fr} .story__fig{order:-1;position:sticky;top:calc(var(--bar-h) + .5rem);z-index:2} .story__text .sec-head{margin-top:1.5rem} .beat{min-height:60vh} } /* ── Research ───────────────────────────────────────────────── */ .research__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem clamp(2rem,5vw,5rem);align-items:end;margin-bottom:clamp(2.5rem,5vw,4rem)} .research__head .h2{margin-bottom:0} @media (max-width:800px){.research__head{grid-template-columns:1fr}} .feature{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.5rem,3.5vw,3rem);box-shadow:var(--shadow-sm);transition:background-color var(--shift),border-color var(--shift)} .feature__meta{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem;font-size:.875rem} .tag{display:inline-block;padding:.3rem .7rem;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent);font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase} .feature__title{font-size:clamp(1.5rem, 1.2rem + 1.4vw, 2.3rem);line-height:1.2;max-width:28ch} .feature__foot{margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--line-2);font-size:.875rem} .lenses{margin-top:2.5rem} .lenses__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem} .lens{text-align:left;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.75rem;padding:1rem 1.1rem;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);transition:border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease)} .lens:hover{border-color:var(--ink-3);transform:translateY(-2px);box-shadow:var(--shadow-sm)} .lens.is-on{border-color:var(--accent);background:var(--accent-soft-2);box-shadow:inset 0 0 0 1px var(--accent)} .lens__num{grid-row:1/3;font-family:var(--f-display);font-style:italic;font-size:1.5rem;color:var(--accent);line-height:1;padding-top:.1rem} .lens__name{font-weight:700;font-size:.9375rem;line-height:1.3} .lens__who{font-size:.8125rem;color:var(--ink-2)} .lenses__panels{margin-top:1rem} .lens-panel{padding:1.1rem 1.25rem;border-left:2px solid var(--accent);background:var(--surface-2);border-radius:0 var(--r-sm) var(--r-sm) 0} .lens-panel p{max-width:66ch;font-size:1rem} .lens-panel.is-on{animation:fadeUp .35s var(--ease)} .lenses__bridge{margin-top:1.25rem;font-family:var(--f-display);font-size:1.15rem;line-height:1.5;font-variation-settings:"SOFT" 40,"opsz" 18} .lenses__bridge strong{font-weight:600;color:var(--accent)} @media (max-width:700px){.lenses__row{grid-template-columns:1fr}} .strands{margin-top:2.5rem} .tabs{display:flex;gap:.25rem;position:relative;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none} .tabs::-webkit-scrollbar{display:none} .tab{padding:.7rem .9rem;font-weight:700;font-size:.9375rem;color:var(--ink-2);white-space:nowrap;transition:color .2s} .tab:hover,.tab.is-on{color:var(--ink)} .tabs__ink{position:absolute;bottom:-1px;height:2px;background:var(--accent);left:0;width:0;transition:left .35s var(--ease), width .35s var(--ease)} @media (max-width:480px){.tab{padding:.65rem .6rem;font-size:.875rem}.tab__x{display:none}} .tab-panel{padding-top:1.1rem} .tab-panel p{max-width:62ch} .tab-panel.is-on{animation:fadeUp .35s var(--ease)} @keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .earlier{margin-top:clamp(2.5rem,5vw,4rem)} .rows .row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:1rem clamp(1.5rem,4vw,4rem);padding:1.5rem 0;border-top:1px solid var(--line);transition:padding-left .35s var(--ease-out)} .rows .row:last-child{border-bottom:1px solid var(--line)} .rows .row:hover{padding-left:.6rem} .row__meta{display:flex;flex-direction:column;gap:.2rem} .row__kicker{font-weight:700;color:var(--accent);font-size:.9375rem} .row__title{font-size:clamp(1.25rem, 1.1rem + .6vw, 1.55rem);line-height:1.28;margin-bottom:.4rem;max-width:34ch} .row__body p{color:var(--ink-2);font-size:.9375rem} @media (max-width:700px){.rows .row{grid-template-columns:1fr;gap:.5rem}} /* ── Journey: horizontal on desktop ─────────────────────────── */ .journey{position:relative;overflow-x:clip} .journey__pin{padding:clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem)} .journey__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem} .journey__head .sec-head{flex:1;margin-bottom:0} .journey__hint{font-size:.8125rem;font-weight:700;color:var(--ink-3);white-space:nowrap;letter-spacing:.04em} .journey__track{display:flex;gap:1.25rem;padding:2.5rem var(--gutter) 1rem;will-change:transform} .jcard{flex:none;width:min(520px, 78vw);min-height:min(58vh, 520px);display:flex;flex-direction:column;gap:.8rem;padding:clamp(1.5rem,3vw,2.5rem);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s,background-color var(--shift)} .jcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--ink-3)} .jcard--intro{background:transparent;border:0;box-shadow:none;justify-content:center;width:min(560px, 82vw)} .jcard--intro:hover{transform:none;box-shadow:none} .jcard--end{background:var(--ink);color:var(--bg);border-color:var(--ink);justify-content:center;align-items:flex-start;width:min(440px,78vw)} .jcard--end .pill{background:transparent;color:inherit;border-color:rgba(255,255,255,.35)} .jcard--end .pill:hover{border-color:currentColor} .jcard__when{font-family:var(--f-display);font-style:italic;font-size:1.4rem;color:var(--accent);font-variation-settings:"SOFT" 60,"opsz" 24} .jcard__title{font-size:clamp(1.35rem, 1.1rem + 1vw, 1.9rem);line-height:1.2} .jcard p{color:var(--ink-2);font-size:1rem} .jcard__end{font-family:var(--f-display);font-size:clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem);line-height:1.2;margin-bottom:1rem;font-variation-settings:"SOFT" 60,"opsz" 60} .jcard__list{margin-top:.25rem;display:flex;flex-direction:column;gap:.3rem} .jcard__list li{position:relative;padding-left:1.1rem;font-size:.9375rem;color:var(--ink-2)} .jcard__list li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--accent)} @media (max-width:900px){ .journey__track{flex-direction:column;padding-top:2rem} .jcard{width:100%;min-height:0} .jcard--intro,.jcard--end{width:100%} .journey__hint{display:none} } /* ── Practice ───────────────────────────────────────────────── */ .practice__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,5rem)} .places{border-top:1px solid var(--line)} .places li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1.05rem 0;border-bottom:1px solid var(--line);transition:padding-left .35s var(--ease-out)} .places li:hover{padding-left:.6rem} .places__name{font-family:var(--f-display);font-size:1.3rem;line-height:1.3;font-variation-settings:"SOFT" 40,"opsz" 20} .places__role{font-size:.875rem;color:var(--ink-2);text-align:right;white-space:nowrap} .chips{display:flex;flex-wrap:wrap;gap:.5rem} .chips li{padding:.5rem .85rem;border:1px solid var(--line);border-radius:var(--r-pill);font-size:.875rem;font-weight:700;background:var(--surface);transition:border-color .2s, transform .2s var(--ease), background-color var(--shift)} .chips li:hover{border-color:var(--accent);transform:translateY(-1px)} .practice__gap{margin-top:2rem} .plain li{position:relative;padding:.45rem 0 .45rem 1.2rem;border-bottom:1px solid var(--line-2);color:var(--ink-2)} .plain li::before{content:"";position:absolute;left:0;top:1.05em;width:6px;height:6px;border-radius:50%;background:var(--accent)} @media (max-width:800px){.practice__grid{grid-template-columns:1fr}.places__role{white-space:normal}} @media (max-width:500px){.places li{flex-direction:column;gap:.15rem}.places__role{text-align:left}} /* ── Quote ──────────────────────────────────────────────────── */ .quote{padding:clamp(2rem,5vw,4rem) 0} .quote__text{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(2.5rem,6vw,4.5rem) 0;text-align:center;font-family:var(--f-display);font-size:clamp(1.5rem, 1.1rem + 2vw, 2.6rem);line-height:1.3;max-width:26ch;margin-inline:auto;font-variation-settings:"SOFT" 70,"opsz" 60} /* ── Work with me ───────────────────────────────────────────── */ .hero__cta{margin-top:1.5rem} .hero__cta-row{display:flex;flex-wrap:wrap;gap:.6rem} .offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:clamp(2rem,4vw,3rem)} .offer{display:flex;flex-direction:column;gap:.75rem;padding:clamp(1.4rem,2.5vw,2rem);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s,background-color var(--shift)} .offer:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--ink-3)} .offer__num{font-family:var(--f-display);font-style:italic;font-size:1.3rem;color:var(--accent);line-height:1} .offer h3{font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);line-height:1.15;font-variation-settings:"SOFT" 50,"opsz" 40} .offer p{color:var(--ink-2);font-size:1rem} .offer__meta{margin:.25rem 0 0;display:grid;grid-template-columns:auto 1fr;gap:.35rem .8rem;font-size:.875rem;border-top:1px solid var(--line-2);padding-top:.9rem} .offer__meta dt{font-weight:700;color:var(--ink-3)} .offer__meta dd{margin:0;color:var(--ink-2)} .offer .pill{margin-top:auto;align-self:flex-start} .work__how{margin-top:clamp(1.5rem,3vw,2.5rem);max-width:70ch;color:var(--ink-2);font-size:1rem} .resource{margin-top:clamp(2.5rem,5vw,4rem);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;padding:clamp(1.5rem,3vw,2.5rem);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2);transition:background-color var(--shift),border-color var(--shift)} .resource__kicker{font-size:.8125rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:.6rem} .resource h3{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.3rem);line-height:1.15;margin-bottom:.75rem} .resource p{color:var(--ink-2);max-width:52ch} .resource__row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.25rem} .resource__preview{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow-md);padding:1.25rem 1.4rem;font-size:.875rem;line-height:1.5;transform:rotate(-1.2deg);transition:transform .4s var(--ease)} .resource:hover .resource__preview{transform:rotate(0)} .resource__preview h4{font-family:var(--f-display);font-size:1.25rem;margin-bottom:.5rem;font-variation-settings:"SOFT" 50,"opsz" 24} .resource__preview ol{padding-left:1.1rem;list-style:decimal;color:var(--ink-2);display:flex;flex-direction:column;gap:.3rem} .resource__preview ol li strong{color:var(--ink)} @media (max-width:900px){.offers{grid-template-columns:1fr}.resource{grid-template-columns:1fr}.resource__preview{transform:none}} /* ── Collaborate ────────────────────────────────────────────── */ .pill--accent{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)} .pill--accent:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)} .pill--accent svg{transition:transform .25s var(--ease)} .pill--accent:hover svg{transform:translateX(3px)} .note{margin-top:clamp(2rem,4vw,3rem);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);transition:background-color var(--shift),border-color var(--shift)} .note summary{cursor:pointer;list-style:none;padding:1rem 1.25rem;font-weight:700;font-size:.9375rem;display:flex;align-items:center;gap:.75rem} .note summary::-webkit-details-marker{display:none} .note summary::before{content:"";width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .3s var(--ease);flex:none;margin-left:.2rem} .note[open] summary::before{transform:rotate(45deg)} .note__body{padding:0 1.25rem 1.1rem} .note__body p{max-width:78ch;font-size:.9375rem;color:var(--ink-2);line-height:1.6} .note__body strong{color:var(--ink);font-weight:700} .collab__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem)} .collab__col h3{font-size:1.45rem;line-height:1.2;margin-bottom:.6rem;font-variation-settings:"SOFT" 40,"opsz" 24} .collab__col ul li{padding:.65rem 0;border-top:1px solid var(--line);color:var(--ink-2);font-size:.9375rem;line-height:1.5} .collab__col ul li:last-child{border-bottom:1px solid var(--line)} .collab__chips{margin-top:clamp(2rem,4vw,3rem)} .collab__cta{margin-top:clamp(2rem,4vw,3rem);padding:clamp(1.5rem,3vw,2.5rem);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-sm);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem;align-items:center;transition:background-color var(--shift),border-color var(--shift)} .collab__cta-title{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);line-height:1.15;margin-bottom:.5rem} .collab__cta p{max-width:52ch} @media (max-width:900px){.collab__grid{grid-template-columns:1fr}.collab__cta{grid-template-columns:1fr}} /* ── Contact ────────────────────────────────────────────────── */ .contact .lead{margin-bottom:clamp(2rem,4vw,3rem)} .contact__mail{display:inline-block;font-family:var(--f-display);font-size:clamp(1.6rem, .6rem + 5.4vw, 5.6rem);line-height:1.05;letter-spacing:-.02em;word-break:break-all;font-variation-settings:"SOFT" 40,"opsz" 144;position:relative;padding-bottom:.1em;will-change:transform} .contact__mail::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-expo)} .contact__mail:hover::after{transform:scaleX(1)} .contact__mail:hover{color:var(--accent)} .contact__row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.75rem} .contact__meta{margin:2.5rem 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;border-top:1px solid var(--line);padding-top:1.25rem;max-width:720px} .contact__meta dt{font-size:.8125rem;font-weight:700;color:var(--ink-3)} .contact__meta dd{margin:.2rem 0 0;font-size:.9375rem;font-variant-numeric:tabular-nums} @media (max-width:640px){.contact__meta{grid-template-columns:1fr 1fr}} /* ── Footer ─────────────────────────────────────────────────── */ .footer{border-top:1px solid var(--line);padding:1rem 0 1.5rem;overflow:hidden} .footer__mark{text-align:center;line-height:.8;font-family:var(--f-display);font-size:clamp(6rem, 24vw, 22rem);letter-spacing:-.04em;color:var(--ink);opacity:.08;font-variation-settings:"SOFT" 80,"opsz" 144;user-select:none;margin-top:1rem} .footer__mark span{display:block;transform:translateY(20%)} .footer__inner{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.875rem;color:var(--ink-2);margin-top:-.5rem} .footer__top{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;color:var(--ink);padding:.4rem .7rem;border-radius:var(--r-pill);transition:background-color .2s} .footer__top:hover{background:var(--bg-2)} /* ── Reveal (generic) ───────────────────────────────────────── */ .js .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out), transform .9s var(--ease-out);transition-delay:var(--d,0s)} .js .reveal.is-in,.js.no-anim .reveal{opacity:1;transform:none} /* ── Toast ──────────────────────────────────────────────────── */ .toast{position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%,12px);background:var(--ink);color:var(--bg);padding:.65rem 1rem;border-radius:var(--r-pill);font-size:.875rem;font-weight:700;opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease);z-index:130;box-shadow:var(--shadow-md)} .toast.is-on{opacity:1;transform:translate(-50%,0)} /* ── Reduced motion ─────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ .js .mask > span{transform:none} .js .statement .w{opacity:1} .js .reveal{opacity:1;transform:none;transition:none} .beat{opacity:1;transform:none} .bar__pulse,.scroll-cue span{animation:none} .hero__canvas{opacity:1} .s-note,.s-end,.s-pin{opacity:1} .s-halo{opacity:.18} .s-collapse{opacity:.35} .s-end--down{opacity:.4} *{transition-duration:.01ms!important;animation-duration:.01ms!important} } @media print{.bar,.cursor,.loader,.menu,.hero__canvas,.scroll-cue,.footer__mark{display:none}body{background:#fff;color:#000}.section{padding:1.5rem 0}}