/* About Slurp: an editorial page within the existing house style. */
.about-page { --about-accent:#0062bf; --about-rule:rgba(32,53,82,.13); }
:root[data-theme="dark"] .about-page { --about-accent:#86bdff; --about-rule:rgba(205,222,246,.14); }
.about-page .shell { width:min(1160px,calc(100% - 64px)); }
.about-page :is(h1,h2,h3,p) { margin:0; }
.about-page p { color:var(--secondary); line-height:1.65; }
.about-page :is(a,button):focus-visible { outline:3px solid var(--blue); outline-offset:6px; }
.about-page svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.about-page .about-eyebrow { font-size:11px; letter-spacing:.13em; font-weight:700; line-height:1.4; color:var(--about-accent); margin-bottom:24px; }
.about-page h2 { font-size:clamp(35px,4.3vw,52px); line-height:1.08; letter-spacing:-.05em; font-weight:710; }
.about-hero { display:grid; grid-template-columns:1.12fr 1fr; align-items:center; gap:80px; padding-block:78px 83px; }
.about-hero h1 { font-size:clamp(64px,6.75vw,91px); line-height:1.025; letter-spacing:-.063em; font-weight:750; }
.about-hero h1>span { color:transparent; background:linear-gradient(100deg,#0572dd 8%,#3777b9 66%,#676ac0); background-clip:text; -webkit-background-clip:text; }
:root[data-theme="dark"] .about-hero h1>span { background-image:linear-gradient(105deg,#b9dfff,#7cb1f9 68%,#adabed); }
.about-page .about-deck { font-size:19px; line-height:1.6; max-width:490px; margin-top:29px; }
.about-story-link { display:inline-flex; align-items:center; gap:20px; padding-block:12px; margin-top:26px; font-size:14px; font-weight:620; }
.about-story-link>span { color:var(--about-accent); transition:transform .2s; }
.about-story-link:hover>span { transform:translateY(3px); }
.about-brand { position:relative; isolation:isolate; display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; height:430px; padding:60px 25px 62px; border:1px solid var(--about-rule); border-radius:28px; background:var(--glass); box-shadow:inset 0 1px var(--highlight),0 24px 65px var(--shadow); overflow:hidden; }
.about-brand-grid { position:absolute; z-index:-2; inset:0; background-image:linear-gradient(var(--about-rule) 1px,transparent 1px),linear-gradient(90deg,var(--about-rule) 1px,transparent 1px); background-size:45px 45px; opacity:.42; mask-image:radial-gradient(ellipse at 50% 43%,#000 8%,transparent 66%); -webkit-mask-image:radial-gradient(ellipse at 50% 43%,#000 8%,transparent 66%); }
.about-brand-glow { position:absolute; z-index:-1; inset:0; background:radial-gradient(ellipse at 50% 44%,rgba(58,153,245,.21),transparent 62%); pointer-events:none; }
.about-brand-top { position:absolute; top:27px; left:28px; display:flex; gap:8px; align-items:center; font-size:9px; letter-spacing:.1em; color:var(--secondary); font-weight:650; }
.about-mark { width:6px; height:6px; border-radius:50%; background:var(--blue); }
.about-brand-icon { width:136px; height:136px; display:block; object-fit:contain; filter:drop-shadow(0 18px 20px rgba(4,47,108,.18)); }
.about-brand-name { font-size:48px; line-height:1; font-weight:710; letter-spacing:-.055em; margin-top:25px; }
.about-brand-motto { color:var(--secondary); font-size:14px; margin-top:12px; }
.about-brand-foot { position:absolute; bottom:0; left:26px; right:26px; min-height:54px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--about-rule); color:var(--secondary); font-size:9px; }
.about-brand-foot>span:last-child { display:flex; align-items:center; gap:8px; }
.about-brand-foot svg { width:15px; height:15px; }
.about-origin,.about-foundations { display:grid; grid-template-columns:.84fr 1.16fr; gap:106px; padding-block:80px; border-top:1px solid var(--about-rule); }
.about-origin { scroll-margin-top:75px; }
.about-letter { max-width:605px; }
.about-letter p { font-size:17px; margin-top:21px; }
.about-letter .about-letter-lead { font-size:25px; line-height:1.47; letter-spacing:-.022em; color:var(--text); margin-top:0; }
.about-author { display:flex; align-items:center; gap:14px; margin-top:32px; }
.about-monogram { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; border:1px solid var(--about-rule); background:var(--glass-subtle); color:var(--about-accent); font-size:12px; font-weight:650; letter-spacing:.01em; }
.about-author strong { display:block; font-size:14px; font-weight:650; }
.about-author>div>span { display:block; font-size:11px; color:var(--secondary); margin-top:5px; }
.about-principles { padding-block:76px 80px; border-top:1px solid var(--about-rule); }
.about-principles-heading { display:grid; grid-template-columns:1.25fr 1fr; column-gap:108px; align-items:end; }
.about-principles-heading>.about-eyebrow { grid-column:1/-1; }
.about-principles-heading>p:last-child { font-size:17px; padding-bottom:2px; max-width:350px; }
.about-principle-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:46px; }
.about-principle { display:flex; flex-direction:column; padding:0 36px; min-width:0; }
.about-principle:first-child { padding-left:0; }
.about-principle:last-child { padding-right:0; }
.about-principle+.about-principle { border-left:1px solid var(--about-rule); }
.about-principle-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:24px; }
.about-principle-icon { display:grid; place-items:center; width:43px; height:43px; color:var(--about-accent); background:var(--blue-soft); border:1px solid color-mix(in srgb,var(--blue) 20%,transparent); border-radius:12px; }
.about-number { color:var(--secondary); font-size:10px; font-variant-numeric:tabular-nums; letter-spacing:.05em; }
.about-principle h3 { font-size:25px; line-height:1.18; font-weight:650; letter-spacing:-.035em; margin-bottom:17px; }
.about-principle p { font-size:15px; flex:1; }
.about-inline-link { display:inline-flex; align-items:center; align-self:flex-start; gap:17px; font-size:13px; line-height:1.5; font-weight:620; padding-block:10px; }
.about-inline-link>span { color:var(--about-accent); transition:transform .2s; }
.about-inline-link:hover { color:var(--about-accent); }
.about-inline-link:hover>span { transform:translate(2px,-2px); }
.about-principle .about-inline-link { margin-top:22px; }
.about-foundations { padding-block:72px; }
.about-foundations h2 { font-size:42px; }
.about-foundations-copy p { font-size:16px; margin-bottom:17px; }
.about-foundations-copy .about-inline-link { margin-top:1px; }
.about-projects { display:flex; flex-wrap:wrap; gap:13px 24px; margin-top:20px; color:var(--secondary); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; }
.about-projects>span+span { padding-left:24px; border-left:1px solid var(--about-rule); }
.about-invitation { display:flex; align-items:center; justify-content:space-between; gap:55px; background:var(--glass); border:1px solid var(--about-rule); border-radius:25px; padding:53px 58px; box-shadow:inset 0 1px var(--highlight); margin-bottom:74px; }
.about-invitation h2 { font-size:42px; }
.about-invitation p:last-child { font-size:16px; margin-top:19px; }
.about-invitation-actions { display:flex; flex-direction:column; align-items:center; flex-shrink:0; }
.about-invitation-actions .button { gap:18px; min-height:48px; padding-inline:24px; }
.about-invitation-actions .about-inline-link { align-self:center; margin-top:12px; font-size:12px; }
@keyframes about-arrive { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes about-mark-arrive { from { opacity:0; transform:translateY(8px) scale(.96); } to { opacity:1; transform:none; } }
@media(prefers-reduced-motion:no-preference) {
 .about-hero-copy>* { animation:about-arrive .85s cubic-bezier(.22,1,.36,1) both; }
 .about-hero h1 { animation-delay:.07s; }
 .about-hero .about-deck { animation-delay:.14s; }
 .about-story-link { animation-delay:.2s; }
 .about-brand { animation:about-arrive 1s .15s cubic-bezier(.22,1,.36,1) both; }
 .about-brand-icon { animation:about-mark-arrive 1.1s .23s cubic-bezier(.22,1,.36,1) both; }
}
@media(max-width:1100px) {
 .about-hero { gap:46px; padding-block:62px 68px; }
 .about-hero h1 { font-size:73px; }
 .about-page .about-deck { font-size:17px; }
 .about-brand { height:392px; }
 .about-brand-icon { width:124px; height:124px; }
 .about-brand-name { font-size:43px; }
 .about-brand-foot { font-size:8px; }
 .about-origin,.about-foundations { gap:64px; }
 .about-principles-heading { column-gap:70px; }
 .about-principle { padding-inline:26px; }
 .about-principle h3 { font-size:23px; }
 .about-principle p { font-size:14px; }
 .about-invitation { padding:46px; }
}
@media(max-width:860px) {
 .about-page .shell { width:calc(100% - 48px); }
 .about-hero { gap:36px; }
 .about-hero h1 { font-size:62px; }
 .about-page .about-deck { font-size:16px; margin-top:23px; }
 .about-brand { height:350px; padding-inline:18px; border-radius:22px; }
 .about-brand-top { top:24px; left:23px; font-size:8px; }
 .about-brand-icon { width:106px; height:106px; }
 .about-brand-name { font-size:37px; margin-top:20px; }
 .about-brand-motto { font-size:11px; }
 .about-brand-foot { justify-content:center; left:20px; right:20px; }
 .about-brand-foot>span:last-child { display:none; }
 .about-origin,.about-foundations { grid-template-columns:.85fr 1.15fr; gap:42px; padding-block:62px; }
 .about-page h2 { font-size:37px; }
 .about-letter .about-letter-lead { font-size:22px; }
 .about-letter p { font-size:15px; }
 .about-principles { padding-block:60px; }
 .about-principles-heading { column-gap:46px; }
 .about-principles-heading>p:last-child { font-size:15px; }
 .about-principle { padding-inline:19px; }
 .about-principle h3 { font-size:21px; }
 .about-principle p { font-size:13px; }
 .about-inline-link { font-size:12px; gap:10px; }
 .about-foundations-copy p { font-size:15px; }
 .about-projects { gap:12px; font-size:11px; }
 .about-projects>span+span { padding-left:12px; }
 .about-invitation { padding:36px; gap:30px; }
 .about-invitation p:last-child { font-size:14px; }
 .about-invitation h2 { font-size:35px; }
 .about-invitation-actions .button { font-size:12px; padding-inline:17px; gap:12px; }
}
@media(max-width:680px) {
 .about-page .shell { width:calc(100% - 40px); }
 .about-hero { grid-template-columns:1fr; padding-block:43px 44px; gap:31px; }
 .about-page .about-eyebrow { font-size:10px; margin-bottom:19px; }
 .about-hero h1 { font-size:clamp(49px,12.5vw,75px); }
 .about-page .about-deck { font-size:16px; max-width:490px; margin-top:22px; }
 .about-story-link { font-size:13px; margin-top:15px; }
 .about-brand { height:300px; border-radius:20px; }
 .about-brand-top { font-size:8px; top:22px; left:22px; }
 .about-brand-icon { width:93px; height:93px; }
 .about-brand-name { font-size:35px; margin-top:17px; }
 .about-brand-motto { font-size:11px; margin-top:9px; }
 .about-brand-foot { justify-content:space-between; font-size:8px; min-height:44px; }
 .about-brand-foot>span:last-child { display:flex; }
 .about-origin,.about-foundations { grid-template-columns:1fr; gap:26px; padding-block:44px; }
 .about-page h2 { font-size:35px; }
 .about-letter .about-letter-lead { font-size:23px; }
 .about-letter p { font-size:15px; line-height:1.65; margin-top:19px; }
 .about-author { margin-top:24px; }
 .about-principles { padding-block:44px; }
 .about-principles-heading { display:block; }
 .about-principles-heading>p:last-child { margin-top:20px; max-width:440px; }
 .about-principle-grid { grid-template-columns:1fr; margin-top:32px; }
 .about-principle { padding:26px 0; }
 .about-principle:first-child { padding-top:0; }
 .about-principle:last-child { padding-bottom:0; }
 .about-principle+.about-principle { border-left:0; border-top:1px solid var(--about-rule); }
 .about-principle-top { margin-bottom:18px; }
 .about-principle h3 { font-size:25px; margin-bottom:13px; }
 .about-principle h3 br { display:none; }
 .about-principle p { font-size:15px; }
 .about-principle .about-inline-link { margin-top:13px; }
 .about-inline-link { font-size:13px; }
 .about-foundations-copy p { font-size:15px; }
 .about-projects { font-size:12px; gap:15px; }
 .about-projects>span+span { padding-left:15px; }
 .about-invitation { flex-direction:column; align-items:flex-start; gap:23px; padding:30px 25px; border-radius:20px; margin-bottom:46px; }
 .about-invitation h2 { font-size:34px; }
 .about-invitation p:last-child { font-size:14px; }
 .about-invitation p:last-child br { display:none; }
 .about-invitation-actions { align-items:flex-start; }
 .about-invitation-actions .button { font-size:13px; padding-inline:20px; }
 .about-invitation-actions .about-inline-link { align-self:flex-start; font-size:12px; }
}
@media(prefers-reduced-motion:reduce) {
 .about-page *, .about-page *::before, .about-page *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

@media(prefers-color-scheme:dark) {
 :root:not([data-theme]) .about-page { --about-accent:#86bdff; --about-rule:rgba(205,222,246,.14); }
 :root:not([data-theme]) .about-hero h1>span { background-image:linear-gradient(105deg,#b9dfff,#7cb1f9 68%,#adabed); }
}