/* Vendored skeletonic-stylus baseline. Inlined here so Shokunin's CSS extractor bundles it with the site styles into a single fingerprinted /_csp/.css file — one network request total. */ @charset "UTF-8";@layer skeletonic.reset, skeletonic.tokens, skeletonic.layout, skeletonic.elements, skeletonic.components, skeletonic.utilities;@layer skeletonic {@layer skeletonic.base, skeletonic.layout;:root{--cl-primary:light-dark(oklch(0.4 0.2 250), oklch(0.7 0.16 250));--cl-secondary:light-dark(oklch(0.38 0.15 200), oklch(0.65 0.12 200));--cl-success:light-dark(oklch(0.7 0.2 140), oklch(0.75 0.15 140));--cl-info:light-dark(oklch(0.85 0.15 100), oklch(0.88 0.12 100));--cl-warning:light-dark(oklch(0.8 0.15 80), oklch(0.82 0.12 80));--cl-danger:light-dark(oklch(0.55 0.25 20), oklch(0.65 0.2 20));--bg-primary:light-dark(oklch(0.96 0.03 250), oklch(0.18 0.04 250));--bg-secondary:light-dark(oklch(0.96 0.03 200), oklch(0.18 0.04 200));--bg-success:light-dark(oklch(0.96 0.03 140), oklch(0.18 0.04 140));--bg-info:light-dark(oklch(0.96 0.04 100), oklch(0.18 0.04 100));--bg-warning:light-dark(oklch(0.96 0.04 80), oklch(0.18 0.04 80));--bg-danger:light-dark(oklch(0.96 0.03 20), oklch(0.18 0.04 20));--cl-grey-100:light-dark(oklch(0.98 0.01 250), oklch(0.15 0.01 250));--cl-grey-200:light-dark(oklch(0.9 0.01 250), oklch(0.25 0.01 250))}.text-primary{color:var(--cl-primary)}.text-secondary{color:var(--cl-secondary)}.text-white{color:var(--cl-white)}.text-black{color:var(--cl-black)}.bg-primary{background-color:var(--bg-primary)}.bg-surface{background-color:var(--cl-surface)}.bg-black{background-color:var(--cl-black)}.bg-white{background-color:var(--cl-white)}.bg-soft{background-color:var(--cl-grey-100)}:root{--gr:1.62;--gr-fsb:clamp(1.0625rem, 1.4vw, 1.25rem);--gr-fsl:clamp(1.25rem, 2vw, 1.5rem);--gr-fss:clamp(0.75rem, 1vw, 0.875rem);--gr-h1:clamp(2.5rem, 8vw, 4.5rem);--gr-h2:clamp(2rem, 5vw, 3rem);--gr-h3:clamp(1.5rem, 3vw, 1.875rem);--gr-h4:clamp(1.25rem, 2vw, 1.5rem);--gr-h5:clamp(1.125rem, 1vw, 1.25rem);--gr-h6:clamp(1rem, 1.4vw, 1.125rem);--gr-lh-h1:1.1;--gr-lh-h2:1.1;--gr-lh-h3:1.2;--gr-lh-h4:1.3;--gr-lh-h5:1.4;--gr-lh-h6:1.5;--cl-white:oklch(1 0 0);--cl-black:oklch(0 0 0);--background-color:light-dark(oklch(1 0 0), oklch(0.05 0.01 250));--foreground-color:light-dark(oklch(0.11 0.01 250), oklch(0.95 0.01 250));--cl-surface:light-dark(oklch(0.98 0.01 250), oklch(0.12 0.02 250));--link-color:light-dark(#0056b3, #66b2ff);--link-color-visited:light-dark(#5a3a8c, #b89bf0);--link-color-hover:light-dark(#003d7a, #99ccff);--link-color-focus:light-dark(#003d7a, #99ccff);--link-color-active:light-dark(#003d7a, #99ccff);--focus-ring-color:var(--link-color);--bp-sm:30em;--bp-md:48em;--bp-lg:64em;--bp-xl:80em;--bp-xxl:96em;color-scheme:light dark}@layer skeletonic.base{.hidden,[hidden]{display:none}.center,.flex,.stack,[center],[flex]{display:flex;gap:var(--gr) rem}.center,.stack,[center]{flex-direction:column}.center,[center]{align-items:center;justify-content:center}.stack{justify-content:flex-start}.auto-grid{display:grid;gap:var(--gr) rem;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}.full-bleed{left:50%;margin-left:-50vw;margin-right:-50vw;position:relative;right:50%;width:100vw}html{display:block;font-family:sans-serif;font-size:100%;interpolate-size:allow-keywords;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:4px}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}a,abbr,address,article,aside,audio,b,blockquote,body,button,caption,cite,code,dd,del,dfn,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,select,small,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{box-sizing:border-box;word-break:break-word}b,strong{font-weight:700}code,kbd,pre,samp{margin:1.62rem 0}em,i{font-style:italic}small{line-height:1.3}p{line-height:1.5;margin-bottom:1.62rem;max-width:65ch}small,sub,sup{font-size:var(--gr-fss)}sup{top:.8em}sub{bottom:-.8em}.visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}}@layer skeletonic.layout{.container{margin-inline:auto;padding-inline:var(--gr-fsb);width:84rem}.grid{display:grid;gap:var(--gr-fsb, 1rem)}.grid.masonry{display:grid-lanes;grid-template-rows:masonry;masonry-auto-flow:packed}.subgrid{display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid}.bento-container{container-type:inline-size;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}.container{margin:0 auto;max-width:84rem;width:96%}@media (min-width:30em){.container{max-width:28rem}}@media (min-width:48em){.container{max-width:44rem}}@media (min-width:64em){.container{max-width:60rem}}@media (min-width:80em){.container{max-width:72rem}}@media (min-width:96em){.container{max-width:84rem}}}} :root{ --accent: rgb(0, 67, 165); --accent-rgb: 0, 67, 165; --ink:#1d1d1f; /* 16.5:1 vs bg. AAA */ --ink-soft:#3a3a3c; /* 11.3:1 vs bg. AAA */ --ink-mute:#505058; /* 7.0:1 vs --bg-alt (alt sections). AAA. */ --ink-faint:#6e6e73; /* 4.6:1 vs bg. AAA large text only */ --bg:#fbfbfd; --bg-alt:#f1f1f3; --card:#ffffff; --border:#d2d2d7; --shadow:0 1px 0 rgba(0,0,0,.06); --shadow-lift:0 18px 40px -18px rgba(0,0,0,.18); --nav-h:48px; --pad-x:22px; --max:980px; --max-wide:1440px; --radius:18px; color-scheme: light dark; } [data-theme="dark"]{ --ink:#f5f5f7; --ink-soft:#d4d4d9; /* 14.2:1 vs bg. AAA */ --ink-mute:#b0b0b8; /* 9.1:1 vs bg. AAA */ --ink-faint:#86868b; /* 5.0:1 vs bg. AAA large text */ --bg:#000000; --bg-alt:#1d1d1f; --card:#161617; --border:#3a3a3c; --shadow:0 1px 0 rgba(255,255,255,.05); --shadow-lift:0 18px 40px -10px rgba(0,0,0,.7); } *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0;background:var(--bg);color:var(--ink); font-family:"SF Pro Text","SF Pro Display",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:17px;line-height:1.47059;letter-spacing:-.022em; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; } img{max-width:100%;height:auto;display:block} a{color:var(--accent);text-decoration:none;transition:opacity .2s ease} a:hover{opacity:.72} /* WCAG AAA 1.4.1 — in-body prose links must be distinguishable without colour alone. Underline bare inside main content; buttons/cards opt out via their own class-bearing selectors. */ main.content :is(p,li,blockquote,dd,dt) a:not([class]){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px} h1,h2,h3,h4,h5,h6{font-family:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:600;letter-spacing:-.015em;margin:0;color:inherit} .skip{position:absolute;left:-9999px;top:-9999px} .skip:focus{left:12px;top:12px;background:var(--ink);color:#fff;padding:10px 16px;z-index:300;border-radius:8px} /* ---------- Nav (compact, sticky, frosted, Apple-style 3-column) ---------- */ /* color-mix() requires Chrome 111 / Safari 16.2 / Firefox 113. The RGBA values are pre-computed fallbacks for older engines. */ /* Nav uses an OPAQUE background. Earlier iterations used a translucent rgba + backdrop-filter for a frosted-glass effect, but HTMLCS cannot compute contrast through a translucent layer and falls back to NaN, which fails WCAG AAA in automated audits. Solid bg also performs marginally better (no compositor layer). */ .ap-nav{position:sticky;top:0;z-index:100;height:var(--nav-h);background:var(--bg);border-bottom:1px solid var(--border)} [data-theme="dark"] .ap-nav{background:var(--bg);border-bottom-color:var(--border)} /* Grid: brand on the left, menu perfectly centred, utilities on the right. The outer cols are 1fr each so the menu always sits in the viewport centre regardless of how wide the brand or the right group becomes. */ .ap-nav .wrap{max-width:var(--max-wide);margin:0 auto;height:100%;padding:0 var(--pad-x);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px} .ap-brand{justify-self:start;font-size:14px;font-weight:500;color:var(--ink);display:inline-flex;align-items:center;gap:8px} .ap-brand img{width:22px;height:22px;border-radius:50%} .ap-menu{justify-self:center;display:flex;list-style:none;margin:0;padding:0;gap:28px} .ap-menu a{font-size:12px;color:var(--ink);opacity:.88;white-space:nowrap} .ap-menu a:hover{opacity:1} .ap-nav-right{justify-self:end;display:inline-flex;align-items:center;gap:6px} .ap-cta-mini{font-size:12px;font-weight:500;color:#fff;background:var(--accent);padding:7px 14px;border-radius:980px;line-height:1;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;transition:opacity .15s ease} .ap-cta-mini:hover{opacity:.88;color:#fff} /* In-nav search button. Triggers Static Site Generator's search modal via main.js. */ .ap-search{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:transparent;border:1px solid transparent;border-radius:50%;color:var(--ink);cursor:pointer;transition:background .15s,border-color .15s} .ap-search:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)} .ap-search svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* Theme toggle (sun/moon). Sits inline in the nav */ .theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:transparent;border:1px solid transparent;border-radius:50%;color:var(--ink);cursor:pointer;transition:background .15s,border-color .15s} .theme-toggle:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)} .theme-toggle svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .theme-toggle .icon-sun{display:none} .theme-toggle .icon-moon{display:inline} [data-theme="dark"] .theme-toggle .icon-sun{display:inline} [data-theme="dark"] .theme-toggle .icon-moon{display:none} .ap-toggle,.ap-burger{display:none} @media (max-width:833px){ .ap-nav .wrap{grid-template-columns:auto 1fr auto} .ap-menu{display:none} .ap-burger{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:var(--ink);width:44px;height:44px;user-select:none} .ap-nav:has(.ap-toggle:checked) .ap-menu{display:flex;flex-direction:column;position:absolute;top:var(--nav-h);left:0;right:0;background:var(--bg);padding:18px 22px;gap:14px;border-bottom:1px solid var(--border);justify-content:flex-start;text-align:center;z-index:99} } /* ---------- Hero ---------- */ .ap-hero{padding:84px var(--pad-x) 64px;text-align:center;background:var(--card);position:relative;overflow:hidden} .ap-hero h1{font-size:clamp(40px,5.5vw,64px);line-height:1.07;margin:0 auto 12px;max-width:900px} .ap-hero .sub{font-size:clamp(20px,2.3vw,28px);font-weight:400;color:var(--ink-mute);margin:0 auto 28px;max-width:760px;line-height:1.25} .ap-hero .cta{display:inline-flex;gap:20px;flex-wrap:wrap;justify-content:center} .ap-hero .portrait{width:120px;height:120px;border-radius:50%;margin:0 auto 24px;object-fit:cover;box-shadow:0 10px 30px -10px rgba(0,0,0,.25)} .ap-hero figure.hero-figure{margin:48px auto 0;max-width:var(--max-wide);border-radius:var(--radius);overflow:hidden} .ap-hero figure.hero-figure img{width:100%;height:auto;border-radius:var(--radius);box-shadow:0 30px 60px -20px rgba(0,0,0,.18)} .ap-hero figure.hero-figure[data-empty=""]{display:none} /* ---------- Pill button (Apple-style) ---------- */ /* Pill button. Vertical padding bumped to clear the WCAG 2.5.5 / Apple 44×44 px hit-area minimum for mobile touch (17px text + 14px×2 padding + 1px×2 border = ~46px). Horizontal kept at 22px for Apple-typical proportions. */ .pill,a.pill,button.pill{display:inline-block;min-height:44px;background:var(--accent);color:#fff !important;font-size:17px;font-weight:400;line-height:1;padding:14px 22px;border-radius:980px;border:1px solid transparent;text-decoration:none !important;cursor:pointer;transition:opacity .15s ease,background .15s ease,transform .15s ease;font-family:inherit;box-sizing:border-box} .pill:hover{opacity:.92} /* Explicit .pill.primary so authors can opt-in to the solid accent style even in contexts where a more specific colour rule might otherwise win. */ .pill.primary,a.pill.primary,button.pill.primary{background:var(--accent) !important;color:#fff !important;border-color:transparent} .pill.primary:hover{background:var(--accent);color:#fff;opacity:.92} .pill.ghost{background:transparent;color:var(--accent) !important;border-color:currentColor} .pill.ghost:hover{background:rgba(var(--accent-rgb),.08);opacity:1} /* On dark hero sections, the ghost pill text needs to be white for AAA contrast against the black background — the accent blue is only ~2.6:1 on black. */ .feat.dark .pill.ghost,.feat-finale .pill.ghost{color:#fff !important;border-color:#fff} .feat.dark .pill.ghost:hover,.feat-finale .pill.ghost:hover{background:rgba(255,255,255,.1)} .pill.dark{background:#1d1d1f;color:#fff} .pill.dark:hover{background:#000} .pill.light{background:#fff;color:#1d1d1f} .pill.lg{padding:15px 28px;font-size:18px} .pill::after{content:"\00A0\203A"} .pill.no-chev::after{content:""} /* ---------- Sections ---------- */ .ap-section{padding:96px var(--pad-x)} .ap-section.tight{padding:64px var(--pad-x)} .ap-section.alt{background:var(--bg-alt)} .ap-section.dark{background:#000;color:#f5f5f7} .ap-section.dark h2,.ap-section.dark h3,.ap-section.dark h4{color:#f5f5f7} .ap-section.dark p,.ap-section.dark li{color:#a1a1a6} .ap-section .wrap{max-width:var(--max);margin:0 auto} .ap-section.wide .wrap{max-width:var(--max-wide)} .ap-section .eyebrow{display:inline-block;font-size:14px;font-weight:600;color:var(--accent);letter-spacing:.02em;text-transform:uppercase;margin-bottom:12px} .ap-section h2{font-size:clamp(32px,4vw,48px);line-height:1.08;margin:0 0 16px} .ap-section .lede{font-size:clamp(19px,2vw,24px);color:var(--ink-mute);max-width:760px;margin:0 0 24px;line-height:1.4} .ap-section .body{font-size:17px;line-height:1.6} .ap-section .body p{margin:0 0 16px} .ap-section .body strong{font-weight:600} /* ---------- Story tiles (alternating media+text grid) ---------- */ .ap-tiles{display:grid;gap:24px;grid-template-columns:repeat(2,1fr)} @media (max-width:833px){.ap-tiles{grid-template-columns:1fr}} .ap-tile{background:var(--card);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 0 rgba(0,0,0,.06);transition:transform .25s ease,box-shadow .25s ease} .ap-tile:hover{transform:translateY(-3px);box-shadow:0 16px 38px -16px rgba(0,0,0,.16)} .ap-tile.dark{background:#000;color:#f5f5f7} .ap-tile.tinted{background:var(--bg-alt)} .ap-tile figure{margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--bg-alt)} .ap-tile figure img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease} .ap-tile:hover figure img{transform:scale(1.04)} .ap-tile .body{padding:28px 30px 32px} .ap-tile h3{font-size:clamp(22px,2.3vw,28px);line-height:1.14;margin:0 0 8px;color:inherit} .ap-tile p{font-size:15px;line-height:1.5;color:var(--ink-mute);margin:0 0 16px} .ap-tile.dark p{color:#a1a1a6} .ap-tile a.more{font-size:14px;color:var(--accent);font-weight:500;display:inline-flex;align-items:center;gap:4px} .ap-tile a.more::after{content:"\00A0\203A"} /* ---------- CTA banner block ---------- */ .ap-cta-block{position:relative;overflow:hidden;padding:96px var(--pad-x);text-align:center;color:#fff;background:var(--ink);isolation:isolate} .ap-cta-block .ap-cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.85} .ap-cta-block::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.7));z-index:-1} .ap-cta-block .wrap{position:relative;z-index:1;max-width:var(--max);margin:0 auto} .ap-cta-block h2{font-size:clamp(32px,4vw,48px);line-height:1.1;margin:0 0 28px;color:#fff} .ap-cta-block .cta{display:inline-flex;gap:18px;flex-wrap:wrap;justify-content:center} /* ---------- Article / Markdown content readability ---------- */ main.content > .wrap{max-width:760px} main.content h2{margin-top:48px;font-size:clamp(28px,3vw,36px)} main.content h3{margin-top:36px;font-size:clamp(22px,2.4vw,28px)} main.content p{font-size:18px;line-height:1.6;margin:0 0 1em;color:var(--ink-soft)} main.content a{color:var(--accent)} main.content img{border-radius:14px;margin:32px auto} main.content figure{margin:32px 0} main.content blockquote{border-left:4px solid var(--accent);margin:32px 0;padding:8px 0 8px 20px;color:var(--ink-mute);font-style:italic} main.content pre{background:var(--bg-alt);border-radius:12px;padding:18px 22px;overflow:auto;font-size:14px;line-height:1.5;margin:24px 0} main.content code{background:var(--bg-alt);padding:1px 6px;border-radius:6px;font-size:.92em} main.content pre code{background:transparent;padding:0} main.content ul,main.content ol{padding-left:20px;margin:0 0 1em} main.content li{margin-bottom:6px;font-size:18px;line-height:1.5;color:var(--ink-soft)} /* ---------- Footer ---------- */ .ap-foot{background:var(--bg-alt);color:var(--ink-mute);padding:32px var(--pad-x) 24px;font-size:12px;line-height:1.4} .ap-foot .wrap{max-width:var(--max-wide);margin:0 auto} .ap-foot .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding:18px 0;border-bottom:1px solid var(--border)} @media (max-width:833px){.ap-foot .cols{grid-template-columns:repeat(2,1fr)}} .ap-foot-title{font-size:12px;font-weight:600;color:var(--ink);margin:0 0 10px;letter-spacing:.01em}.ap-foot h4{font-size:12px;font-weight:600;color:var(--ink);margin:0 0 10px} .ap-foot ul{list-style:none;margin:0;padding:0} .ap-foot li{margin-bottom:6px} .ap-foot a{color:var(--ink-mute)} .ap-foot a:hover{color:var(--ink);text-decoration:underline} .ap-foot .legal{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;padding:18px 0 0} .ap-foot .legal p{margin:0} .ap-foot .legal a{margin:0 4px} .ap-foot .social{display:inline-flex;gap:12px;align-items:center} .ap-foot .social a{display:inline-flex} .ap-foot .social img{width:18px;height:18px;opacity:.65;transition:opacity .15s} .ap-foot .social a:hover img{opacity:1} :focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px;box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 18%,transparent)} .feat.dark :focus-visible,.feat-quote-section :focus-visible,.ap-cta-block :focus-visible{outline-color:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.18)} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} } .visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;width:1px;overflow:hidden;position:absolute;white-space:nowrap} /* Aspect-ratio fallback for browsers older than Safari 15 / Chromium 88. Uses the padding-top hack to reserve a 1:1 box before the image loads. */ @supports not (aspect-ratio: 1 / 1){ .newsroom-card-media,.newsroom-featured-media,.feat-card-media,.proj-card-media,.related-media{position:relative;height:0;padding-bottom:100%} .newsroom-card-media > *,.newsroom-featured-media > *,.feat-card-media > *,.proj-card-media > *,.related-media > *{position:absolute;inset:0;width:100%;height:100%} .related-media{padding-bottom:66.67%} } /* :has() fallback for browsers without selector support. The mobile menu then just stays collapsed (no expand); the burger still ships as a visual hint but is harmless. */ @supports not selector(:has(*)){ @media (max-width:833px){.ap-burger{opacity:.4;cursor:default}} } /* legacy hooks kept for animations referenced from posts */ .drop-down{animation:apFadeUp 1s ease forwards} .fade-in{animation:apFade 1.2s ease forwards} @keyframes apFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @keyframes apFade{from{opacity:0}to{opacity:1}} /* Reading progress bar — CSS-only via scroll-timeline. Falls back to a static thin bar on browsers that don't support scroll-timeline. */ .ap-progress{position:fixed;top:0;left:0;right:0;height:3px;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);z-index:200;pointer-events:none} @supports (animation-timeline: scroll()){ .ap-progress{animation:apProgress linear;animation-timeline:scroll(root)} @keyframes apProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}} } /* Back-to-top floating button on long pages */ .ap-totop{position:fixed;right:24px;bottom:24px;width:44px;height:44px;border-radius:50%;background:var(--card);border:1px solid var(--border);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 24px -8px rgba(0,0,0,.25);opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s;z-index:90} .ap-totop.is-visible{opacity:1;transform:translateY(0)} .ap-totop svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} @media (prefers-reduced-motion: reduce){.ap-totop{transition:none}} /* IntersectionObserver fade-up — main.js toggles .is-in on enter. */ .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease;will-change:opacity,transform} .reveal.is-in{opacity:1;transform:translateY(0)} @media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}} /* Per-article enrichment (last-reviewed badge + related-posts grid) */ .post-reviewed{display:inline-block;font-size:13px;font-weight:500;color:var(--ink-mute);background:var(--bg-alt);padding:8px 14px;border-radius:980px;margin:48px 0 0} .related-posts{margin:64px 0 0;padding:48px 0 0;border-top:1px solid var(--border)} .related-heading{font-size:clamp(22px,2.4vw,28px);font-weight:600;letter-spacing:-.01em;margin:0 0 24px;color:var(--ink)} .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media (max-width:833px){.related-grid{grid-template-columns:1fr}} .related-card{background:var(--card);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform .25s ease,box-shadow .25s ease} .related-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px -16px rgba(0,0,0,.16)} .related-media{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--bg-alt)} .related-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .related-card:hover .related-media img{transform:scale(1.04)} .related-body{padding:18px 20px} .related-body h3{font-size:16px;line-height:1.25;font-weight:600;margin:0 0 6px} .related-body h3 a{color:var(--ink)} .related-body p{font-size:13px;color:var(--ink-mute);margin:0} /* 404 page */ .error-page{max-width:680px;margin:0 auto;text-align:center;padding:40px 0} .error-eyebrow{font-size:96px;font-weight:700;letter-spacing:-.03em;color:var(--accent);line-height:1;margin:0 0 16px;font-family:"SF Pro Display",-apple-system,sans-serif} .error-title{font-size:clamp(28px,3.6vw,40px);font-weight:600;letter-spacing:-.015em;margin:0 0 12px;color:var(--ink)} .error-sub{font-size:18px;line-height:1.45;color:var(--ink-mute);margin:0 0 32px} .error-cta{display:inline-flex;flex-wrap:wrap;gap:14px;justify-content:center} /* Newsroom-style listing (used on Papers, Articles) */ .newsroom{max-width:var(--max-wide);margin:0 auto;padding:8px 0} .newsroom-section-head{margin:48px 0 24px;padding-bottom:14px;border-bottom:1px solid var(--border)} .newsroom-section-head:first-child{margin-top:0} .newsroom-kicker{margin:0 0 4px;font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--accent);text-transform:uppercase} .newsroom-section-head h2{font-size:clamp(28px,3vw,36px);font-weight:600;letter-spacing:-.015em;line-height:1.1;color:var(--ink);margin:0} .newsroom-section-head .newsroom-lede{margin:10px 0 0;font-size:16px;line-height:1.5;color:var(--ink-mute);max-width:760px} .newsroom-intro{max-width:760px;margin:8px auto 40px;font-size:clamp(18px,2vw,22px);line-height:1.4;color:var(--ink-mute);text-align:center} .newsroom-eyebrow{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--ink-mute);text-transform:uppercase;margin-bottom:8px} .newsroom-meta{margin:0 0 14px;font-size:13px;color:var(--ink-mute);font-weight:500} .newsroom-meta time{font-variant-numeric:tabular-nums} .newsroom-byline{font-size:14px;color:var(--ink-soft);margin:0 0 18px} .newsroom-featured{display:grid;grid-template-columns:1.15fr 1fr;gap:0;background:var(--card);border-radius:22px;overflow:hidden;box-shadow:0 1px 0 rgba(0,0,0,.06);transition:transform .25s ease,box-shadow .25s ease;margin-bottom:32px} .newsroom-featured:hover{transform:translateY(-2px);box-shadow:0 18px 40px -18px rgba(0,0,0,.16)} .newsroom-featured-media{display:block;background:var(--bg-alt);overflow:hidden;aspect-ratio:1/1} .newsroom-featured-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;border-radius:0} .newsroom-featured:hover .newsroom-featured-media img{transform:scale(1.04)} .newsroom-featured-media.logo{background:#fff;display:flex;align-items:center;justify-content:center;padding:10%} .newsroom-featured-media.logo img{width:100%;height:100%;object-fit:contain} .newsroom-featured:hover .newsroom-featured-media.logo img{transform:scale(1.04)} .newsroom-featured-body{padding:40px 44px;display:flex;flex-direction:column;justify-content:center} .newsroom-featured-body h3{font-size:clamp(24px,2.6vw,34px);line-height:1.14;font-weight:600;letter-spacing:-.015em;margin:0 0 12px;color:var(--ink)} .newsroom-featured-body h3 a{color:inherit} .newsroom-featured-body p{font-size:15px;line-height:1.55;color:var(--ink-soft);margin:0 0 16px} @media (max-width:833px){.newsroom-featured{grid-template-columns:1fr}.newsroom-featured-media{aspect-ratio:16/9}.newsroom-featured-body{padding:28px 26px}} .newsroom-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:32px} @media (max-width:980px){.newsroom-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:600px){.newsroom-grid{grid-template-columns:1fr}} /* Papers — Apple Books style. No card wrappers. Each book sits on the page background with a soft drop shadow; title, meta and actions flow beneath in clean Apple typography. */ .books-shelf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 40px;margin:0 0 64px;padding:8px 0} @media (max-width:960px){.books-shelf{grid-template-columns:1fr;gap:48px}} /* Horizontal item: small book cover on the left, content on the right. */ .book{display:grid;grid-template-columns:140px 1fr;align-items:start;gap:24px;min-width:0} @media (max-width:480px){.book{grid-template-columns:110px 1fr;gap:18px}} .book-cover{display:block;width:140px;aspect-ratio:2/3;background:transparent;border-radius:6px;transition:transform .4s ease;align-self:start} @media (max-width:480px){.book-cover{width:110px}} .book-cover img{width:100%;height:100%;object-fit:cover;border-radius:6px;box-shadow: 0 1px 2px rgba(0,0,0,.10), 0 8px 16px -6px rgba(0,0,0,.18), 0 22px 36px -16px rgba(0,0,0,.28)} [data-theme="dark"] .book-cover img{box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 16px -6px rgba(0,0,0,.6), 0 22px 36px -16px rgba(0,0,0,.75)} .book:hover .book-cover{transform:translateY(-3px)} .book-body{min-width:0;display:flex;flex-direction:column} .book-eyebrow{margin:0 0 6px;font-size:10.5px;font-weight:600;letter-spacing:.08em;color:var(--accent);text-transform:uppercase} .book-title{font-size:clamp(17px,1.4vw,20px);line-height:1.22;font-weight:600;letter-spacing:-.012em;margin:0 0 10px;color:var(--ink)} .book-title a{color:inherit} .book-meta{margin:0 0 2px;font-size:12.5px;color:var(--ink-mute);font-weight:500;line-height:1.4} .book-meta time{font-variant-numeric:tabular-nums} .book-meta-faint{color:var(--ink-faint);margin-bottom:12px} .book-excerpt{margin:0 0 16px;font-size:14px;line-height:1.5;color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden} .book-actions{display:flex;gap:8px;flex-wrap:wrap;margin:0} .book-actions .pill{font-size:13px;padding:9px 16px} /* Research-notes carousel — tighter than the default newsroom grid. 16:9 image (vs. 1:1), smaller body padding, smaller typography. Used on /papers/ so the research notes feel like an Apple-style strip beneath the featured publications, not a heavyweight grid. */ /* Personal-Setup-style hero + theme cards used on /projects/. Centred hero with primary + ghost CTAs, then a three-card "what is inside" feature block, each card icon-led and quietly elevated. */ /* /projects/ eyebrow + CTA strip — sits centred directly under the layout's ap-hero (which carries the page H1 and subtitle). Skeletonic ships a global `p{max-width:65ch}` which would constrain these paragraphs to a 65-char-wide block left-aligned in the wrap, so the text appears off-centre. Force full width here. */ .setup-hero-eyebrow{max-width:none !important;width:100%;text-align:center;margin:0 0 18px;font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--accent);text-transform:uppercase} .setup-hero-cta{max-width:none !important;width:100%;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:0 0 56px} .setup-three{margin:0 0 72px} .setup-three-head{text-align:center;margin:0 0 40px} /* Skeletonic ships p{max-width:65ch} which left-aligns these kickers and ledes to a narrow box. Force full width so the parent's text-align:center can actually centre them across the page. */ .setup-three-kicker{max-width:none !important;width:100%;margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--accent);text-transform:uppercase} .setup-three-headline{margin:0;font-size:clamp(28px,3.4vw,42px);line-height:1.1;font-weight:600;letter-spacing:-.018em;color:var(--ink)} .setup-three-headline-soft{color:var(--ink-mute)} .setup-three-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} @media (max-width:900px){.setup-three-grid{grid-template-columns:1fr}} .setup-card{background:var(--card);border-radius:22px;padding:32px 28px;text-align:left;box-shadow:0 1px 0 rgba(0,0,0,.06);transition:transform .25s ease,box-shadow .25s ease;display:flex;flex-direction:column;gap:14px} .setup-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px -16px rgba(0,0,0,.16)} .setup-card-icon{display:flex;align-items:center;justify-content:center;width:64px;height:64px;background:linear-gradient(180deg,#f5f5f7 0%,#e8e8ed 100%);border-radius:16px;padding:12px;box-sizing:border-box} [data-theme="dark"] .setup-card-icon{background:linear-gradient(180deg,#1d1d1f 0%,#000 100%)} .setup-card-icon img{width:100%;height:100%;object-fit:contain} .setup-card-title{margin:6px 0 4px;font-size:21px;line-height:1.18;font-weight:600;letter-spacing:-.012em;color:var(--ink)} .setup-card-body{margin:0;font-size:15px;line-height:1.55;color:var(--ink-soft);flex:1} .setup-card-cta{margin:0} .setup-card-link{color:var(--accent);font-weight:500;font-size:14.5px} .setup-card-link:hover{opacity:1;text-decoration:underline;text-underline-offset:3px} /* Catalogue section headers on /projects/ — centred Apple style. Larger headline, more breathing room, no left-aligned underline. Cards inside the grid are forced to a uniform 3-up minmax so single and double-item sections don't collapse into one wide card. */ .cat-section-head{text-align:center;margin:64px auto 32px;max-width:780px} .cat-section-head:first-of-type{margin-top:16px} .cat-kicker{max-width:none !important;width:100%;margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--accent);text-transform:uppercase} .cat-headline{margin:0 0 14px;font-size:clamp(28px,3.4vw,42px);line-height:1.1;font-weight:600;letter-spacing:-.018em;color:var(--ink)} .cat-lede{max-width:none !important;width:100%;margin:0;font-size:clamp(16px,1.3vw,18px);line-height:1.5;color:var(--ink-mute)} .cat-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch} @media (max-width:980px){.cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:600px){.cat-grid{grid-template-columns:1fr}} /* Catalogue cards: shorter media area than the homepage's 1:1 — keeps the page rhythm consistent with the three theme cards above. Logos are contained on a white background; stock photos use cover. */ .cat-grid .newsroom-card-media{aspect-ratio:5/3} .cat-grid .newsroom-card-media.logo{padding:8% 18%} .cat-grid .newsroom-card-body{padding:20px 22px 24px} .cat-grid .newsroom-card-body h3{font-size:18px;-webkit-line-clamp:2} .cat-grid .newsroom-card-body .newsroom-eyebrow{font-size:10.5px} .cat-grid .newsroom-card-body .newsroom-excerpt{font-size:13.5px;line-height:1.5;-webkit-line-clamp:4;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden} /* Bottom finale CTA on /projects/. Bigger margin so it breathes after the FAQ accordion. */ .setup-finale{margin:64px 0 24px;padding:64px 28px;text-align:center;background:var(--bg-alt);border-radius:24px} .setup-finale-eyebrow{max-width:none !important;width:100%;margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--accent);text-transform:uppercase} .setup-finale-headline{margin:0 0 14px;font-size:clamp(28px,3.4vw,42px);line-height:1.1;font-weight:600;letter-spacing:-.018em;color:var(--ink)} .setup-finale-lede{max-width:none !important;width:100%;margin:0 0 24px;font-size:clamp(16px,1.4vw,19px);line-height:1.45;color:var(--ink-mute)} .setup-finale-cta{max-width:none !important;width:100%;margin:0} .newsroom-grid-tight{gap:20px} .newsroom-grid-tight .newsroom-card-media{aspect-ratio:16/9} .newsroom-grid-tight .newsroom-card-body{padding:16px 18px 20px} .newsroom-grid-tight .newsroom-card-body h3{font-size:16px;line-height:1.3;margin:0 0 6px;-webkit-line-clamp:2} .newsroom-grid-tight .newsroom-card-body .newsroom-eyebrow{font-size:10px;margin-bottom:6px} .newsroom-grid-tight .newsroom-card-body .newsroom-meta{font-size:12px;margin-bottom:8px} .newsroom-grid-tight .newsroom-card-body .newsroom-excerpt{font-size:13px;line-height:1.45;-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden} /* Questions? Answers. accordion */ .qa{margin:80px 0 16px;border-top:1px solid var(--border);padding-top:64px} .qa-head{margin:0 0 32px} .qa-headline{margin:0;font-size:clamp(30px,3.6vw,44px);line-height:1.1;font-weight:600;letter-spacing:-.018em;color:var(--ink)} .qa-headline-soft{color:var(--ink-mute)} .qa-list{border-top:1px solid var(--border)} .qa-item{border-bottom:1px solid var(--border)} .qa-item > summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 4px;font-size:clamp(16px,1.4vw,19px);font-weight:500;line-height:1.35;color:var(--ink);cursor:pointer;transition:color .15s ease} .qa-item > summary::-webkit-details-marker{display:none} .qa-item > summary::after{content:"+";flex:none;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;font-size:22px;font-weight:300;line-height:1;color:var(--ink-mute);border:1px solid var(--border);border-radius:50%;transition:transform .25s ease,background .15s ease,color .15s ease;background:transparent} .qa-item[open] > summary::after{content:"\2212";transform:rotate(0)} .qa-item > summary:hover{color:var(--accent)} .qa-item > summary:hover::after{color:var(--accent);border-color:var(--accent)} .qa-item > summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px} .qa-a{padding:0 4px 24px;max-width:none;width:100%} /* Skeletonic ships a global `p{max-width:65ch}` which would clamp the answer text to half the container. Force it back to full width. */ .qa-a p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-soft);max-width:none} .qa-a p + p{margin-top:12px} .newsroom-card{background:var(--card);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 0 rgba(0,0,0,.06);transition:transform .25s ease,box-shadow .25s ease} .newsroom-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px -16px rgba(0,0,0,.16)} .newsroom-card-media{display:block;background:var(--bg-alt);overflow:hidden;aspect-ratio:1/1;position:relative} .newsroom-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;border-radius:0;margin:0} .newsroom-card:hover .newsroom-card-media img{transform:scale(1.04)} /* Logo variant. Wide banner SVGs should fit inside, not crop, with breathing room. */ .newsroom-card-media.logo{background:#fff;display:flex;align-items:center;justify-content:center;padding:14%} .newsroom-card-media.logo img{width:100%;height:100%;object-fit:contain} .newsroom-card:hover .newsroom-card-media.logo img{transform:scale(1.05)} .newsroom-card-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1} .newsroom-card-body h3{font-size:18px;line-height:1.25;font-weight:600;letter-spacing:-.005em;margin:0 0 8px;color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .newsroom-card-body h3 a{color:inherit} .newsroom-card-body .newsroom-excerpt{font-size:14px;line-height:1.5;color:var(--ink-mute);margin:0 0 18px;flex:1} .newsroom-card-body .newsroom-cta{margin:0} .newsroom-card-body .pill{font-size:14px;padding:10px 18px} /* Newsroom pages need the wide container, not the 760px reading column */ main.content > .wrap:has(.newsroom){max-width:var(--max-wide)} main.content > .wrap > .newsroom:first-child{margin-top:-16px} /* ---------- Apple-Card-style feature sections (home page) ---------- */ .feat{padding:120px var(--pad-x);text-align:center;position:relative;overflow:hidden;isolation:isolate} .feat-with-bg .feat-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.55} .feat.dark.feat-with-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.85));z-index:-1} .feat-hero .hero-portrait{display:block;width:96px;height:96px;margin:0 auto 24px;border-radius:50%;object-fit:cover;box-shadow:0 12px 32px -12px rgba(0,0,0,.25)} .feat-hero .feat-eyebrow a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s} .feat-hero .feat-eyebrow a:hover{border-bottom-color:currentColor;opacity:1} .feat .wrap{max-width:980px;margin:0 auto} .feat.wide .wrap{max-width:var(--max-wide)} .feat.alt{background:var(--bg-alt)} .feat.dark{background:var(--bg-dark,#000);color:#f5f5f7} .feat.dark .feat-headline,.feat.dark .feat-sub,.feat.dark .feat-card h3{color:#f5f5f7} .feat.dark .feat-sub{color:#a1a1a6} .feat-eyebrow{display:inline-block;font-size:14px;font-weight:600;letter-spacing:.08em;color:var(--accent);text-transform:uppercase;margin:0 0 16px} .feat.dark .feat-eyebrow{color:#5ac8fa} .feat-headline{font-size:clamp(36px,5vw,64px);font-weight:700;letter-spacing:-.022em;line-height:1.05;margin:0 0 24px;color:var(--ink);max-width:22ch} .feat-hero .feat-headline{max-width:none} .feat-headline.center{margin-left:auto;margin-right:auto} .feat-sub{font-size:clamp(18px,1.6vw,22px);font-weight:400;line-height:1.4;color:var(--ink-soft);max-width:680px;margin:0 0 32px} .feat-sub.center{margin-left:auto;margin-right:auto} .feat-sub strong,.feat-headline strong{display:inline;font-weight:600} .feat-cta{display:inline-flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:8px} /* 3-column feature grid */ .feat-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:64px;margin-top:64px;text-align:left} @media (max-width:833px){.feat-cols{grid-template-columns:1fr;gap:40px;margin-top:48px}} .feat-col h3{font-size:clamp(22px,2.3vw,28px);font-weight:600;letter-spacing:-.01em;line-height:1.15;margin:0 0 12px;color:var(--ink)} .feat-col p{font-size:16px;line-height:1.55;color:var(--ink-mute);margin:0} .feat-col-icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);margin-bottom:18px;font-size:22px} /* Big pull quote section. Distinctive deep-blue gradient so it differs visually from the dark finale CTA */ .feat-quote-section{background:linear-gradient(135deg,#0a1b3d 0%,#13284e 50%,#082450 100%);color:#f5f5f7;position:relative;overflow:hidden} .feat-quote-section::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(90,200,250,.15) 0%,transparent 45%),radial-gradient(circle at 80% 80%,rgba(120,90,255,.18) 0%,transparent 50%);z-index:0;pointer-events:none} .feat-quote-section .wrap{position:relative;z-index:1} .feat-quote{font-family:"SF Pro Display",-apple-system,sans-serif;font-size:clamp(28px,3.6vw,44px);line-height:1.18;font-weight:500;letter-spacing:-.015em;color:inherit;max-width:1100px;margin:0 auto;text-align:left} .feat-quote-section .feat-quote{text-align:center} .feat-quote p{margin:0} /* Opaque background so HTMLCS can compute contrast (a translucent bg over the gradient hero returned NaN:1 in pa11y). The colour is deliberately matched to the darkest stop of the section gradient. */ .feat-quote-attrib{margin-top:36px;display:inline-flex;flex-direction:column;gap:6px;align-items:center;padding:18px 28px;background:#0a1b3d;border:1px solid rgba(255,255,255,.18);border-radius:16px;color:#fff} .feat-quote-attrib a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.5);text-underline-offset:3px} .feat-quote-attrib a:hover{text-decoration-color:#fff;opacity:1} .feat-quote-attrib strong{font-size:15px;font-weight:600;letter-spacing:.02em;color:#fff} .feat-quote-attrib span{font-size:13px;color:#d4d4d9;letter-spacing:.01em} .feat-quote-attrib a{color:#5ac8fa;text-decoration:none} .feat-quote-attrib a:hover{text-decoration:underline} /* Stat / fact block */ .feat-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:48px;text-align:left} @media (max-width:833px){.feat-stats{grid-template-columns:1fr;gap:32px}} .feat-stat{display:block;padding:36px 32px;background:var(--card);border-radius:22px;box-shadow:var(--shadow);text-align:left} .feat-stat strong{display:block;font-size:clamp(56px,7vw,88px);font-weight:600;letter-spacing:-.03em;line-height:.95;margin:0 0 14px;color:var(--ink);font-family:"SF Pro Display",-apple-system,sans-serif} .feat.dark .feat-stat strong{color:#fff} .feat-stat span{font-size:15px;line-height:1.45;color:var(--ink-mute);display:block} .feat.dark .feat-stat span{color:#a1a1a6} /* Latest-card feature (single big card with image) */ .feat-card{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--card);border-radius:24px;overflow:hidden;max-width:var(--max-wide);margin:48px auto 0;box-shadow:var(--shadow-lift);text-align:left} @media (max-width:833px){.feat-card{grid-template-columns:1fr}} .feat-card-media{aspect-ratio:1/1;overflow:hidden;background:var(--bg-alt)} .feat-card-media img{width:100%;height:100%;object-fit:cover} .feat-card-body{padding:48px 52px;display:flex;flex-direction:column;justify-content:center} @media (max-width:833px){.feat-card-body{padding:36px 28px}} .feat-card h3{font-size:clamp(28px,3vw,40px);line-height:1.1;font-weight:600;letter-spacing:-.015em;margin:0 0 16px;color:var(--ink)} .feat-card p{font-size:17px;line-height:1.55;color:var(--ink-soft);margin:0 0 24px} /* Final CTA block */ .feat-finale{padding:140px var(--pad-x);text-align:center} .feat-finale .feat-headline{margin-left:auto;margin-right:auto} .feat-latest-grid{margin-top:48px} .feat-cta-row{text-align:center;margin-top:40px} /* Apple-Mac-lineup-style project cards (home page open-source showcase) */ .proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;text-align:left} @media (max-width:980px){.proj-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:600px){.proj-grid{grid-template-columns:1fr}} .proj-card{background:var(--card);border-radius:22px;display:flex;flex-direction:column;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease;box-shadow:var(--shadow)} .proj-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -16px rgba(0,0,0,.18)} .proj-card-media{aspect-ratio:5/3;background:#fff;display:flex;align-items:center;justify-content:center;padding:24px;overflow:hidden;border-bottom:1px solid var(--border)} /* Force every logo into the same 200×56 bounding box. object-fit:contain preserves aspect ratio inside that box, so a square mark and a wide wordmark visually agree. */ .proj-card-media img{width:200px;height:56px;max-width:70%;max-height:60%;object-fit:contain;object-position:center;transition:transform .4s ease} .proj-card:hover .proj-card-media img{transform:scale(1.05)} .proj-card.photo .proj-card-media{padding:0;background:var(--bg-alt);border-bottom:0} .proj-card.photo .proj-card-media img{width:100%;height:100%;object-fit:cover;max-width:none;max-height:none} .proj-card-body{padding:24px 28px 28px;display:flex;flex-direction:column;flex:1} .proj-card-tag{display:inline-block;font-size:11px;font-weight:600;color:var(--accent);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px} .proj-card h3{font-size:22px;line-height:1.15;font-weight:600;letter-spacing:-.01em;margin:0 0 8px;color:var(--ink)} .proj-card p{font-size:14px;line-height:1.5;color:var(--ink-mute);margin:0 0 18px;flex:1} .proj-card .pill{align-self:flex-start;font-size:13px;padding:9px 16px} /* About-page portrait. Markdown-author image, shown above the bio */ .about-portrait{display:block;width:220px;height:220px;margin:0 auto 32px;border-radius:50%;object-fit:cover;box-shadow:0 14px 40px -16px rgba(0,0,0,.25)} /* Brand logos row (used on About + home) */ /* About page: identifiers and "Featured in" blocks. These build the author entity on the open web — ORCID, working-group memberships and third-party citations that lift the chances of a Knowledge Panel. */ .author-ids{display:grid;grid-template-columns:max-content 1fr;gap:6px 24px;margin:8px 0 24px;font-size:15px} .author-ids dt{color:var(--ink-mute);font-weight:500} .author-ids dd{margin:0;color:var(--ink)} .author-ids dd a{color:var(--accent)} .featured-in{list-style:none;padding:0;margin:0 0 32px;display:grid;grid-template-columns:1fr;gap:8px} .featured-in li{padding:14px 18px;background:var(--bg-alt);border-radius:12px} .featured-in li a{color:var(--ink)} .featured-in li a strong{color:var(--accent)} /* Dated-article lead block — TL;DR + Key takeaways + Related reading, emitted by post_enrich.py as a Markdown blockquote. Visual hierarchy: block stands out at the top of every post for scanning and AI Overview citation. */ main.content blockquote{background:var(--bg-alt);border-left:4px solid var(--accent);border-radius:0 12px 12px 0;padding:20px 24px;margin:24px 0 32px;color:var(--ink)} main.content blockquote p{margin:0 0 10px} main.content blockquote ul{margin:8px 0 0;padding-left:20px} main.content blockquote li{margin:6px 0;color:var(--ink-soft)} main.content blockquote li strong{color:var(--ink)} .brands{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:clamp(16px,3vw,40px);margin:48px 0 16px;padding:48px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .brand-logo{height:28px;width:auto;max-width:100%;flex:0 1 auto;min-width:0;filter:grayscale(100%);opacity:.5;transition:opacity .25s ease,filter .25s ease;object-fit:contain} .brand-logo:hover{filter:grayscale(0);opacity:1} @media (max-width:600px){.brands{gap:14px;padding:32px 0}.brand-logo{height:20px}} /* Static Site Generator auto-injected search widget. Apple-clean override: keep just the magnifier glyph as a discreet circular icon top-right. */ /* Hide the floating Static Site Generator search button. Our nav has its own .ap-search which forwards clicks to this button via main.js. */ #ssg-search-btn{position:absolute!important;left:-9999px!important;top:-9999px!important;width:1px!important;height:1px!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;overflow:hidden!important;pointer-events:none}