@import url("/shared/components/fields.css"); /* the shared fields (mk-input): the searches and the password */

/* Layout: each page alternates night bands (what you should see) and paper sheets (what you'll read);
   every sheet rises over the night before it with rounded top corners. The night is lit by the work:
   each app, project or case study glows in its own colour. */
:root{
  --night:#000000; --night-raised:#141416; --on-night:#f5f5f7; --on-night-mid:#a1a1a6; --accent-sky:#ff8a3d; --peregrino-sky:#8db8ff; --night-hair:rgba(255,255,255,.14);
  --paper:#f6f5f2; --paper-hi:#ffffff; --card:#ffffff; --hair:#1d1d1f1f; --fill:#7676801f; --thumb:#ffffff;
  --ink:#1d1d1f; --ink-body:#333336; --ink-mid:#6e6e73;
  --accent:#c2410c; --accent-fill:#ff6a1a; --accent-deep:#ff8236; --on-accent:#16110d; --signal:#ff6a1a; --signal-2:#ff3d5a; --focus:var(--accent); --control:#8e8e93;
  --nav-glass:rgba(0,0,0,.72); --nav-glass-light:rgba(246,245,242,.8);
  --peregrino:#2f5fe0; --peregrino-text:#2f5fe0; --peregrino-night:#000000;
  --pocapal:#ff3d7f; --pocapal-text:#c23062; --pocapal-night:#09090d;
  --uopbus:#723f9c; --uopbus-text:#723f9c; --uopbus-night:#0c0716; --uopbus-light:#c39af0;
  --keepsake:#7fdbff; --keepsake-text:#2d5be3; --keepsake-night:#05070e;
  --lane0:#d92d20; --lane1:#7c5be6; --lane2:#1e9e58; --lane3:#1a8fd6; --stat:#15803d;
  --visited:#d9453b; --pp-paper:#f3f0e9; --pp-line:rgba(22,23,28,.06); --pp-ink:#16171c; --pp-mid:#66656b;
  --sx-bg:#f4f4f4; --sx-surface:#ffffff; --sx-surface-3:#f0f0f0; --sx-border:#e6e6e6; --sx-text-strong:#1b1b1b; --sx-text-2:#4b4b4b; --sx-text-muted:#6e6e6e;
  --sx-accent-bg:#edf4fd; --sx-accent-strong:#095aba; --sx-orange:#cb6f10; --sx-orange-bg:#fff6e8; --sx-orange-border:#f3d39a;
  --shadow-card:0 4px 24px rgba(0,0,0,.08);
  --shadow-thumb:0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04);
  --shadow-sheet:0 -40px 90px rgba(0,0,0,.55);

  --font-sans:-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Apple SD Gothic Neo", "Noto Sans KR", Arial, sans-serif;
  --font-korean:"Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont, "Noto Sans KR", "Malgun Gothic", sans-serif;
  --space-2:8px; --space-3:14px; --space-4:18px; --space-5:22px; --space-6:28px; --space-7:44px; --space-8:64px; --space-9:96px;
  --layout-hit:44px; --layout-nav-h:48px; --layout-maxw:1120px;
  --radius-xs:6px; --radius-thumb:7px; --radius-segment:9px; --radius-sm:12px; --radius-card:22px; --radius-tile:28px;
  --radius-sheet:44px; --radius-sheet-phone:30px; --radius-pill:999px; --radius-icon:22.37%;
  --ease:cubic-bezier(.22,.61,.36,1); --rise:cubic-bezier(.16,1,.3,1);
  --gutter:max(22px, env(safe-area-inset-left, 0px));
  --gutter-r:max(22px, env(safe-area-inset-right, 0px));

  --frame-ar:1470 / 3000;
  --screen-l:5.10%; --screen-t:2.37%; --screen-w:89.80%; --screen-h:95.27%; --screen-r:13.4% / 6.1%;
  --body-l:2.11%; --body-t:0.73%; --body-w:95.78%; --body-h:98.53%; --body-r:16.41% / 7.81%;
  --device-body:#6b6560;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#111114; --paper-hi:#000000; --card:#1c1c1e; --hair:#ffffff26; --fill:#7676803d; --thumb:#636366;
    --ink:#f5f5f7; --ink-body:#d2d2d7; --ink-mid:#98989d; --accent:#ff9a52;
    --nav-glass-light:rgba(17,17,20,.78);
    --peregrino-text:#8db8ff; --pocapal-text:#ff3d7f; --uopbus-text:#c39af0; --keepsake-text:#7fdbff;
    --shadow-card:0 4px 24px rgba(0,0,0,.5); --shadow-thumb:0 3px 8px rgba(0,0,0,.3);
    --lane0:#ff6b5e; --lane1:#a48bff; --lane2:#3ccf80; --lane3:#5cc0ff; --stat:#4ade80;
  --pp-paper:#1f1d1a; --pp-line:rgba(255,255,255,.05); --pp-ink:#f3f4f8; --pp-mid:#a1a1aa;
    --sx-bg:#1a1a1a; --sx-surface:#262626; --sx-surface-3:#333333; --sx-border:#3a3a3a; --sx-text-strong:#f5f5f5; --sx-text-2:#c8c8c8; --sx-text-muted:#a8a8a8;
    --sx-accent-bg:#1e3553; --sx-accent-strong:#5aa0f2; --sx-orange:#e6a44d; --sx-orange-bg:#332a1a; --sx-orange-border:#5c4a28;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#111114; --paper-hi:#000000; --card:#1c1c1e; --hair:#ffffff26; --fill:#7676803d; --thumb:#636366;
  --ink:#f5f5f7; --ink-body:#d2d2d7; --ink-mid:#98989d; --accent:#ff9a52;
  --nav-glass-light:rgba(17,17,20,.78);
  --lane0:#ff6b5e; --lane1:#a48bff; --lane2:#3ccf80; --lane3:#5cc0ff; --stat:#4ade80;
  --peregrino-text:#8db8ff; --pocapal-text:#ff3d7f; --uopbus-text:#c39af0; --keepsake-text:#7fdbff;
  --shadow-card:0 4px 24px rgba(0,0,0,.5); --shadow-thumb:0 3px 8px rgba(0,0,0,.3);
  --pp-paper:#1f1d1a; --pp-line:rgba(255,255,255,.05); --pp-ink:#f3f4f8; --pp-mid:#a1a1aa;
  --sx-bg:#1a1a1a; --sx-surface:#262626; --sx-surface-3:#333333; --sx-border:#3a3a3a; --sx-text-strong:#f5f5f5; --sx-text-2:#c8c8c8; --sx-text-muted:#a8a8a8;
  --sx-accent-bg:#1e3553; --sx-accent-strong:#5aa0f2; --sx-orange:#e6a44d; --sx-orange-bg:#332a1a; --sx-orange-border:#5c4a28;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--layout-nav-h) + 16px)}
body{
  margin:0; background:var(--night); color:var(--ink);
  font-family:var(--font-sans); font-size:17px; line-height:1.47;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top, 0px); z-index:60; background:var(--night)}
a{color:inherit}
img{max-width:100%; display:block}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:var(--radius-xs)}
.night :focus-visible, .mk-nav:not(.is-light) :focus-visible{outline-color:var(--accent-sky)}
:lang(ko){word-break:keep-all; font-family:var(--font-korean)}
.wrap{max-width:var(--layout-maxw); margin:0 auto; position:relative}
[hidden]{display:none!important}

/* ---------- Navbar: the shared one (shared/components/navbar.css, as every site has it), in this site's colours ----------
   Fixed over the night heroes, as before; glass once the page moves under it (navbar.js), light over paper (site.js). */
:root{
  --mk-nav-position:fixed; --mk-nav-h:var(--layout-nav-h); --mk-maxw:var(--layout-maxw);
  --mk-nav-fg:var(--on-night); --mk-nav-bg:var(--nav-glass); --mk-nav-saturate:180%;
  --mk-nav-light-bg:var(--nav-glass-light); --mk-nav-light-fg:var(--ink);
  --mk-accent:var(--accent-fill); --mk-accent-deep:var(--accent-deep); --mk-cta-fg:var(--on-accent); --mk-cta-weight:650;
  --mk-menu-r:18px;
}
.mk-nav{padding-top:env(safe-area-inset-top, 0px); height:calc(var(--layout-nav-h) + env(safe-area-inset-top, 0px))}
.mk-nav .mk-nav-inner{padding-left:var(--gutter); padding-right:var(--gutter-r)}
.mk-nav .mk-nav-brand{gap:0}

/* ---------- Type ---------- */
.mk-eyebrow{margin:0 0 var(--space-3); font-size:17px; font-weight:600; line-height:22px; color:var(--ink-mid)}
.mk-headline{margin:0; font-weight:650; font-size:clamp(40px, 7vw, 88px); line-height:1.03; letter-spacing:-.028em; color:var(--ink); text-wrap:balance}
.mk-headline--title{font-size:clamp(32px, 4.6vw, 56px); line-height:1.07; letter-spacing:-.022em}
.mk-turn{display:block; color:var(--accent)}
.mk-lede{margin:var(--space-4) 0 0; max-width:40ch; font-size:clamp(17px, 1.6vw, 21px); line-height:1.42; letter-spacing:-.01em; color:var(--ink-mid); text-wrap:pretty}
.mk-caption{margin:0; font-size:12px; font-weight:500; line-height:16px; color:var(--ink-mid); font-variant-numeric:tabular-nums}
.title-3{margin:0; font-size:20px; font-weight:600; line-height:25px}
.night{background:var(--night); color:var(--on-night)}
.night .mk-eyebrow, .night .mk-lede, .night .mk-caption{color:var(--on-night-mid)}
.night .mk-headline{color:var(--on-night)}
.night .mk-turn{color:var(--accent-sky)}
.section-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--space-5) var(--space-8)}
.section-head > div{min-width:0; flex:1 1 420px}

/* ---------- Buttons and links ---------- */
.mk-actions{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3) var(--space-6); margin-top:var(--space-6)}
.mk-btn{
  --btn-bg:var(--accent-fill); --btn-bg-hover:var(--accent-deep); --btn-fg:var(--on-accent);
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:var(--layout-hit); padding:11px 22px; border:0; border-radius:var(--radius-pill);
  font:inherit; font-size:17px; line-height:22px; color:var(--btn-fg); background:var(--btn-bg); text-decoration:none; cursor:pointer;
  transition:background .2s var(--ease);
}
.mk-btn:hover{background:var(--btn-bg-hover)}
.mk-btn--sm{min-height:0; padding:5px 13px; font-size:13px; line-height:18px}
.mk-link{display:inline-flex; align-items:center; gap:.25em; font-size:17px; line-height:22px; color:var(--accent); text-decoration:none}
.mk-link:hover{text-decoration:underline; text-underline-offset:3px}
.mk-link svg, .chev{width:.5em; height:.85em; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; flex:none}
.night .mk-link{color:var(--accent-sky)}

/* ---------- Night and paper ---------- */
.story{position:relative; overflow:hidden; isolation:isolate; padding-left:var(--gutter); padding-right:var(--gutter-r)}
.story--hero{padding-top:calc(var(--layout-nav-h) + env(safe-area-inset-top, 0px) + clamp(48px, 8vw, 96px)); padding-bottom:calc(var(--space-7) + clamp(40px, 6vw, 72px))}
.band{position:relative; overflow:hidden; isolation:isolate; padding:var(--space-9) var(--gutter-r) calc(var(--space-9) + var(--space-7)) var(--gutter)}
.sheet{
  position:relative; z-index:6; margin-top:calc(var(--space-7) * -1);
  background:var(--paper); color:var(--ink);
  border-radius:var(--radius-sheet) var(--radius-sheet) 0 0;
  box-shadow:var(--shadow-sheet);
  padding:var(--space-9) var(--gutter-r) var(--space-9) var(--gutter);
}
@media (max-width:900px){ .sheet{border-radius:var(--radius-sheet-phone) var(--radius-sheet-phone) 0 0} }
.sheet > .wrap + .wrap{margin-top:calc(var(--space-9) + var(--space-6))}

/* light on the night: a glow in the colour of what's shown */
.light{position:absolute; z-index:-1; pointer-events:none; border-radius:50%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--c) 52%, transparent), color-mix(in srgb, var(--c) 16%, transparent) 55%, transparent);
  transition:opacity 1.2s var(--ease)}

/* ---------- The phone ---------- */
.device{position:relative; isolation:isolate; width:100%; aspect-ratio:var(--frame-ar)}
.device::before{content:""; position:absolute; left:var(--body-l); top:var(--body-t); width:var(--body-w); height:var(--body-h); border-radius:var(--body-r); background:var(--device-body); z-index:1; box-shadow:0 34px 70px rgba(0,0,0,.45)}
.device-screen{position:absolute; left:var(--screen-l); top:var(--screen-t); width:var(--screen-w); height:var(--screen-h); border-radius:var(--screen-r); overflow:hidden; z-index:2; background:#000}
.device-screen img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .6s var(--ease)}
.device-frame{position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; user-select:none}

/* ---------- Home: the hero and its dock ---------- */
.hero-grid{display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, .75fr); gap:var(--space-8); align-items:center}
.hero-grid .mk-headline{font-size:clamp(40px, 6.4vw, 84px)}
@media (max-width:860px){ .hero-grid{grid-template-columns:minmax(0, 1fr); gap:var(--space-7)} }
.status{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 var(--space-6); padding:6px 12px 6px 10px;
  border-radius:var(--radius-pill); background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px var(--night-hair);
  font-size:13px; font-weight:500; line-height:18px; color:var(--on-night);
}
.status i{position:relative; width:8px; height:8px; border-radius:50%; background:var(--accent-sky)}
.status i::after{content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--accent-sky); opacity:0; animation:ping 2.4s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.5); opacity:.8} 80%,100%{transform:scale(1.6); opacity:0}}
.creds{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--space-5); margin-top:clamp(56px, 8vw, 96px); padding-top:var(--space-5); border-top:1px solid var(--night-hair)}
.creds div{min-width:0}
.creds b{display:block; font-size:15px; font-weight:600; line-height:20px; color:var(--on-night)}
.creds span{font-size:13px; line-height:18px; color:var(--on-night-mid)}
@media (max-width:860px){ .creds{grid-template-columns:repeat(2, minmax(0, 1fr))} }

/* ---------- Home: the hero's widgets ---------- */
.widgets{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-3)}
.widget{
  position:relative; overflow:hidden; isolation:isolate; min-width:0;
  padding:var(--space-5); border-radius:26px;
  background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px var(--night-hair);
  -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
}
.widget.big{grid-column:1 / -1; background:radial-gradient(120% 120% at 100% 100%, color-mix(in srgb, var(--accent-fill) 55%, transparent), transparent 60%), rgba(255,255,255,.06)}
.w-label{display:block; font-size:13px; font-weight:600; color:var(--on-night-mid); margin-bottom:var(--space-3)}
.w-fig{display:block; font-size:44px; font-weight:650; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--on-night)}
.widget.big .w-fig{font-size:clamp(64px, 8vw, 96px)}
.w-fig small{font-size:.5em; color:var(--accent-sky); margin-left:.04em; letter-spacing:-.01em}
.widget p{margin:var(--space-2) 0 0; font-size:15px; line-height:20px; color:var(--on-night-mid)}
.widget.big p{font-size:17px; line-height:22px; max-width:24ch}

/* ---------- Home: product work as a bento ---------- */
.pm-grid{display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:var(--space-3); margin-top:var(--space-8)}
.pm{grid-column:span 2; min-width:0; padding:var(--space-6); border-radius:var(--radius-tile); background:var(--card); display:flex; flex-direction:column; gap:6px}
.pm h3{margin:var(--space-3) 0 0; font-size:20px; font-weight:600; line-height:25px}
.pm p{margin:0; font-size:15px; line-height:20px; color:var(--ink-mid)}
.pm-fig{font-size:clamp(40px, 4.6vw, 56px); font-weight:650; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--ink)}
.pm-fig small{font-size:.5em; color:var(--accent); margin-left:.04em}
.pm-fig.pm-word{color:var(--accent)}
.pm.pm-big{background:var(--night); color:var(--on-night)}
.pm-big{grid-column:span 4; grid-row:span 2; position:relative; overflow:hidden; isolation:isolate; padding:var(--space-7) var(--space-6) var(--space-6); justify-content:flex-start}
.pm-big h3{margin-top:var(--space-2); font-size:clamp(28px, 3.2vw, 40px); font-weight:700; line-height:1.1; letter-spacing:-.02em; color:var(--on-night); max-width:14ch}
.pm-big > p{max-width:36ch; font-size:17px; line-height:22px; color:var(--on-night-mid); margin-top:var(--space-2)}
.pm-figs{display:flex; flex-wrap:wrap; gap:var(--space-5) var(--space-8); margin-top:auto; padding-top:var(--space-7)}
.pm-figs b{display:block; font-size:clamp(48px, 6vw, 72px); font-weight:650; line-height:1; letter-spacing:-.035em; font-variant-numeric:tabular-nums; color:var(--on-night)}
.pm-figs b small{font-size:.5em; color:var(--accent-sky); margin-left:.04em}
.pm-figs span{display:block; margin-top:6px; font-size:13px; color:var(--on-night-mid)}
.ab{position:absolute; right:var(--space-6); top:var(--space-6); display:flex; gap:10px}
.ab span{display:grid; place-items:center; width:64px; height:64px; border-radius:18px; font-size:28px; font-weight:700; position:relative}
.ab .a{color:var(--on-night-mid); box-shadow:inset 0 0 0 2px var(--night-hair)}
.ab .b{color:var(--on-accent); background:var(--accent-fill)}
.ab .b svg{position:absolute; right:-6px; top:-6px; width:22px; height:22px; padding:4px; border-radius:50%; background:var(--on-night); fill:none; stroke:var(--accent-fill); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
@media (max-width:900px){
  .pm-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .pm{grid-column:span 1}
  .pm-big{grid-column:1 / -1; grid-row:auto; min-height:420px}
}
@media (max-width:560px){ .pm-grid{grid-template-columns:minmax(0, 1fr)} .ab span{width:48px; height:48px; font-size:22px; border-radius:14px} }

/* ---------- Home: four doors ---------- */
.doors{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--space-3); margin-top:var(--space-7)}
.door{position:relative; overflow:hidden; isolation:isolate; min-height:300px; display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-6); border-radius:var(--radius-tile); text-decoration:none; transition:transform .4s var(--ease)}
.door:hover{transform:translateY(-3px)}
.door-kicker{font-size:13px; font-weight:600; color:var(--on-night-mid)}
.door h3{margin:0; max-width:18ch; font-size:clamp(22px, 2vw, 26px); font-weight:700; line-height:1.15; letter-spacing:-.015em; color:var(--on-night)}
.door-fig{margin-top:auto; font-size:clamp(48px, 5.5vw, 68px); font-weight:650; line-height:1; letter-spacing:-.035em; font-variant-numeric:tabular-nums; color:var(--on-night)}
.door-fig small{font-size:.32em; font-weight:600; letter-spacing:0; color:var(--accent-sky); margin-left:.3em}
.door-go{display:inline-flex; align-items:center; gap:.3em; font-size:15px; color:var(--accent-sky)}
.door-icons{display:flex; gap:10px; margin-top:auto}
.door-icons img{width:52px; height:52px; border-radius:var(--radius-icon); box-shadow:0 10px 24px rgba(0,0,0,.4)}
.mini-line{position:relative; display:flex; justify-content:space-between; list-style:none; margin:auto 0 0; padding:0; max-width:340px}
.mini-line::before{content:""; position:absolute; left:8px; right:8px; top:7px; height:3px; background:linear-gradient(90deg, var(--accent-sky) 80%, transparent 80%); }
.mini-line li{position:relative; width:17px; height:17px; border-radius:50%; border:3px solid var(--accent-sky); background:var(--night)}
.mini-line li.w{background:var(--accent-sky)}
.mini-line li.n{border-style:dashed}
@media (max-width:1060px){ .doors{grid-template-columns:repeat(2, minmax(0, 1fr))} }
@media (max-width:640px){ .doors{grid-template-columns:minmax(0, 1fr)} .door{min-height:240px} }

/* ---------- Projects: case studies ---------- */
.cases{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-3); margin-top:var(--space-6)}
@media (max-width:760px){ .cases{grid-template-columns:minmax(0, 1fr)} }
.case{position:relative; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; gap:6px; padding:var(--space-6); border-radius:var(--radius-tile); text-decoration:none; min-height:260px}
.case > img{width:52px; height:52px; border-radius:var(--radius-icon); margin-bottom:var(--space-3)}
.case-kicker{font-size:13px; font-weight:600; color:var(--on-night-mid)}
.case h3{margin:0; font-size:26px; font-weight:700; line-height:1.15; color:var(--on-night)}
.case p{margin:0; max-width:36ch; font-size:15px; line-height:20px; color:var(--on-night-mid)}
.case-go{margin-top:auto; padding-top:var(--space-4); display:inline-flex; align-items:center; gap:.3em; font-size:15px; color:var(--uopbus-light)}
.projects > .case-wide{grid-column:1 / -1; min-height:220px}
.case-wide p{max-width:52ch}
.case-soon{background:transparent; box-shadow:inset 0 0 0 1px var(--hair)}
.case-soon .case-kicker, .case-soon p{color:var(--ink-mid)}
.case-soon h3{color:var(--ink)}
.case-soon .soon{margin-top:auto; align-self:flex-start; background:var(--fill); color:var(--ink)}

/* ---------- Milestones ---------- */
.miles{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--space-3); margin-top:var(--space-6)}
.mile{position:relative; overflow:hidden; isolation:isolate; min-width:0; display:flex; flex-direction:column; gap:6px; padding:var(--space-6); border-radius:var(--radius-tile); background:var(--card)}
.mile-wide{grid-column:span 2}
.mile-when{font-size:13px; color:var(--ink-mid); font-variant-numeric:tabular-nums}
.mile-fig{margin-top:var(--space-3); font-size:clamp(44px, 5vw, 64px); font-weight:650; line-height:1; letter-spacing:-.035em; font-variant-numeric:tabular-nums; color:var(--ink)}
.mile-fig small{font-size:.4em; letter-spacing:0; color:var(--accent); margin-left:.15em}
.mile-fig.mile-word{color:var(--accent); font-size:clamp(36px, 3.9vw, 52px)}
.mile h3{margin:var(--space-3) 0 0; font-size:17px; font-weight:600; line-height:22px}
.mile p{margin:0; font-size:15px; line-height:20px; color:var(--ink-mid)}
.mile .mk-link{margin-top:auto; padding-top:var(--space-3)}
.mile.night{background:var(--night)}
.mile.night .mile-when, .mile.night p{color:var(--on-night-mid)}
.mile.night .mile-fig, .mile.night h3{color:var(--on-night)}
.mile.night .mile-fig small{color:var(--accent-sky)}
@media (max-width:900px){ .miles{grid-template-columns:repeat(2, minmax(0, 1fr))} }
@media (max-width:560px){ .miles{grid-template-columns:minmax(0, 1fr)} .mile-wide{grid-column:auto} }

/* Apps: the hero takes on each app's world, crossfading as the dock picks */
.app-bg{position:absolute; inset:0; z-index:-2; pointer-events:none; transition:opacity 1.2s var(--ease)}
.apps-hero::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:rgba(0,0,0,.38)}
.apps-hero::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 45%, transparent 70%)}
.bg-peregrino{background:
  radial-gradient(70% 60% at 72% 105%, rgba(47,95,224,.55), transparent 70%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='#fff'%3E%3Ccircle cx='12' cy='30' r='.9' opacity='.8'/%3E%3Ccircle cx='70' cy='12' r='.6' opacity='.6'/%3E%3Ccircle cx='130' cy='60' r='1.1' opacity='.9'/%3E%3Ccircle cx='200' cy='22' r='.7' opacity='.5'/%3E%3Ccircle cx='34' cy='120' r='.6' opacity='.6'/%3E%3Ccircle cx='96' cy='160' r='.9' opacity='.7'/%3E%3Ccircle cx='170' cy='130' r='.6' opacity='.5'/%3E%3Ccircle cx='226' cy='180' r='1' opacity='.8'/%3E%3Ccircle cx='54' cy='206' r='.7' opacity='.6'/%3E%3Ccircle cx='150' cy='220' r='.6' opacity='.5'/%3E%3Ccircle cx='112' cy='96' r='.5' opacity='.5'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 240px 240px,
  #000}
.bg-pocapal{background:
  conic-gradient(from 168deg at 38% -6%, transparent 0deg, rgba(255,61,127,.32) 6deg, transparent 13deg),
  conic-gradient(from 178deg at 70% -6%, transparent 0deg, rgba(255,61,127,.26) 7deg, transparent 15deg),
  conic-gradient(from 160deg at 92% -4%, transparent 0deg, rgba(255,255,255,.12) 5deg, transparent 10deg),
  radial-gradient(70% 45% at 65% 112%, rgba(255,61,127,.6), rgba(255,61,127,.12) 55%, transparent 75%),
  radial-gradient(40% 30% at 65% 100%, rgba(255,255,255,.08), transparent 70%),
  #09090d}
.bg-uopbus{background:
  radial-gradient(60% 70% at 78% 50%, rgba(114,63,156,.55), transparent 70%),
  radial-gradient(40% 40% at 95% 90%, rgba(15,127,176,.35), transparent 70%),
  #0c0716}
.bg-keepsake{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28#n%29'/%3E%3C/svg%3E") 0 0 / 160px 160px,
  radial-gradient(45% 22% at 55% 22%, rgba(52,232,176,.5), transparent 70%),
  radial-gradient(40% 20% at 75% 30%, rgba(127,219,255,.45), transparent 70%),
  radial-gradient(35% 28% at 88% 18%, rgba(140,124,255,.45), transparent 70%),
  radial-gradient(60% 35% at 70% 115%, rgba(91,140,255,.35), transparent 70%),
  #05070e}
.bg-keepsake{background-blend-mode:soft-light, normal, normal, normal, normal, normal}

/* Projects: what each project connects to in the career (only here, not on Apps) */
.assoc{display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:3px 10px 3px 7px; border-radius:var(--radius-pill); background:var(--fill); font-size:12px; font-weight:500; line-height:16px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.assoc .flag{width:15px; height:auto; aspect-ratio:21 / 15; border-radius:2px}
.assoc-dot{width:7px; height:7px; border-radius:50%; flex:none}
.assoc-glyph{width:8px; height:11px; flex:none; fill:none; stroke:currentColor; stroke-width:1.4; opacity:.55}
.project .meta .assoc{margin-left:auto}
.tile-assoc{position:relative; z-index:2; margin-top:var(--space-3)}
.tile .assoc, .case .assoc{background:rgba(255,255,255,.12); color:var(--on-night)}
.case-assoc{display:block; margin-top:var(--space-3)}
.t-pocapal .tile-assoc{margin-top:var(--space-2)}

/* Apps: each hero takes up its product page's own marquee, around the phone */
.apps-hero .stage{position:relative; isolation:isolate}
.apps-hero .stage .device, .apps-hero .dock, .apps-hero .stage-caption{position:relative; z-index:2}
.apps-hero .hero-grid > div:first-child{position:relative; z-index:3}
.card-rows{-webkit-mask-image:linear-gradient(90deg, transparent 0%, transparent 32%, #000 48%); mask-image:linear-gradient(90deg, transparent 0%, transparent 32%, #000 48%)}
.bus-map{-webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 40%); mask-image:linear-gradient(90deg, transparent 0%, #000 40%)}
@media (max-width:860px){ .card-rows, .bus-map{-webkit-mask-image:none; mask-image:none} }
.scenes{position:absolute; left:50%; top:42%; width:0; height:0; z-index:0; pointer-events:none}
.scene{position:absolute; left:0; top:0; transition:opacity 1.2s var(--ease)}
/* Peregrino: the globe, turning */
.globe{position:absolute; left:-420px; top:40px; width:840px; height:840px; border-radius:50%;
  background:url("/assets/globe-base.webp") 0 0 / auto 100% repeat-x;
  box-shadow:0 0 80px 16px rgba(141,184,255,.28), inset -60px -40px 120px rgba(0,0,0,.75), inset 20px 20px 60px rgba(141,184,255,.25);
  filter:brightness(.78) saturate(.8); animation:globe-turn 120s linear infinite}
.globe::after{content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 38% 28%, rgba(255,255,255,.12), transparent 35%, rgba(0,0,10,.55) 78%)}
@keyframes globe-turn{to{background-position-x:-1680px}}
/* …and once Peregrino's own globe is up (site.js), the app's globe in its place: lit, with its atmosphere and clouds,
   a little dimmer for the night around it */
.globe .globe-gl{position:absolute; left:-18%; top:-18%; width:136%; height:136%; display:block; opacity:0; transition:opacity 1s var(--ease)}
.globe.is-gl{background:none; box-shadow:none; animation:none; filter:brightness(.86) saturate(.9); border-radius:0; overflow:visible}
.globe.is-gl::after{display:none}
.globe.is-gl .globe-gl{opacity:1}
/* the dock's caption reads over the lit globe */
#stage-caption{text-shadow:0 1px 3px rgba(0,0,0,.7), 0 0 18px rgba(0,0,0,.6)}
/* PocaPal: rows of cards, drifting, and moving with the scroll */
.card-rows{position:absolute; left:-1100px; top:40px; width:2200px; transform:rotate(-8deg) translateX(var(--sx, 0px)); display:grid; gap:16px}
.card-row{overflow:visible}
.card-track{display:flex; gap:16px; width:max-content; animation:cards 60s linear infinite}
.card-row.rev .card-track{animation-direction:reverse; margin-left:-180px}
.card-track img{width:118px; height:auto; aspect-ratio:243 / 340; border-radius:10px; box-shadow:0 14px 30px rgba(0,0,0,.5); opacity:.5}
@keyframes cards{to{transform:translateX(-50%)}}
/* UoP Bus: the lines, glowing, a bus on the U1 */
.bus-map{position:absolute; left:-450px; top:-300px; width:900px; height:760px; overflow:visible}
.bus-glow path{fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-width:5; opacity:.6}
.bus-u1{stroke:#c39af0; filter:drop-shadow(0 0 5px rgba(195,154,240,.6))}
.bus-u2{stroke:#45c3ee; filter:drop-shadow(0 0 5px rgba(69,195,238,.5))}
.bus-stops circle{fill:#fff; opacity:.5}
.bus-dot{fill:#fff; filter:drop-shadow(0 0 10px #fff)}
/* Keepsake: photos swiped out from the phone, kept to the right, archived to the left */
.flyers{position:absolute; left:-80px; top:-150px; width:160px; height:224px}
.fly{position:absolute; inset:0; width:100%; height:100%; border-radius:12px; opacity:0; filter:brightness(.85); box-shadow:0 18px 40px rgba(0,0,0,.5); animation:fly-r 6.6s var(--ease) var(--d) infinite}
.fly.to-l{animation-name:fly-l}
.fly.to-r{outline:3px solid rgba(52,232,176,.0)}
@keyframes fly-r{0%{opacity:0; transform:translateX(0) rotate(0) scale(.86)} 12%{opacity:1} 55%{opacity:1; transform:translateX(330px) rotate(16deg) scale(1); box-shadow:0 0 0 3px #34e8b0, 0 18px 40px rgba(0,0,0,.5)} 70%,100%{opacity:0; transform:translateX(420px) rotate(20deg)}}
@keyframes fly-l{0%{opacity:0; transform:translateX(0) rotate(0) scale(.86)} 12%{opacity:1} 55%{opacity:1; transform:translateX(-330px) rotate(-16deg) scale(1); box-shadow:0 0 0 3px #ff5470, 0 18px 40px rgba(0,0,0,.5)} 70%,100%{opacity:0; transform:translateX(-420px) rotate(-20deg)}}
@media (max-width:860px){ .globe{left:-300px; width:600px; height:600px} @keyframes globe-turn{to{background-position-x:-1200px}} .card-track img{width:92px} }
@media (prefers-reduced-motion:reduce){
  .globe, .card-track, .fly{animation:none}
  .fly{opacity:1} .fly.to-r{transform:translateX(230px) rotate(10deg)} .fly.to-l{transform:translateX(-230px) rotate(-10deg)}
  .fly:nth-child(n+3){display:none}
}

/* ---------- Apps: the stage, relit by the dock ---------- */
.stage{display:grid; justify-items:center; gap:var(--space-5)}
.stage .device{max-width:250px}
.dock{display:flex; gap:10px; padding:8px; border-radius:24px; background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px var(--night-hair); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px)}
.dock button{appearance:none; border:0; padding:0; background:none; cursor:pointer; border-radius:14px; position:relative}
.dock img{width:48px; height:48px; border-radius:var(--radius-icon); transition:transform .3s var(--ease), opacity .3s var(--ease); opacity:.55}
.dock button:hover img{opacity:.85}
.dock button[aria-pressed="true"] img{opacity:1; transform:translateY(-3px)}
.dock button[aria-pressed="true"]::after{content:""; position:absolute; left:50%; bottom:-5px; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:var(--on-night)}
.stage-caption{min-height:40px; margin:0; text-align:center; max-width:30ch}
.stage-caption b{display:block; font-size:15px; font-weight:600; color:var(--on-night)}
.stage-caption span{font-size:13px; color:var(--on-night-mid)}

/* ---------- Projects: how I work, and an experiment ---------- */
.how{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr); gap:var(--space-8); align-items:start; margin-top:var(--space-7)}
.sheet > .how-wrap, .sheet > .wrap + .wrap{margin-top:calc(var(--space-9) + var(--space-6))}
@media (max-width:860px){ .how{grid-template-columns:minmax(0, 1fr)} }
.mk-exp{background:var(--card); border-radius:var(--radius-card); padding:var(--space-6); display:grid; gap:var(--space-5); min-width:0}
.mk-exp-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:8px 16px}
.mk-exp-title{margin:4px 0 0; font-size:20px; font-weight:600; line-height:25px}
.mk-exp-rows{display:grid; gap:12px; margin:0; padding:0; list-style:none}
.mk-exp-row{display:grid; grid-template-columns:minmax(88px, auto) 1fr auto; align-items:center; gap:14px; font-size:15px; line-height:20px}
.mk-exp-row b{font-weight:600}
.mk-exp-bar{height:10px; border-radius:var(--radius-pill); background:var(--fill); overflow:hidden}
.mk-exp-bar i{display:block; height:100%; width:var(--v); border-radius:inherit; background:var(--control)}
.mk-exp-row.is-variant .mk-exp-bar i{background:var(--accent-fill)}
.mk-exp-num{font-size:17px; font-weight:600; font-variant-numeric:tabular-nums; min-width:4.5ch; text-align:right}
.mk-exp-sum{display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-7); margin:0; padding-top:var(--space-4); border-top:1px solid var(--hair)}
.mk-exp-sum div{display:grid; gap:2px}
.mk-exp-sum dt{order:2}
.mk-exp-sum dd{margin:0; font-size:17px; font-weight:600; line-height:22px; font-variant-numeric:tabular-nums}
.mk-exp-lift{color:var(--accent)}
.mk-verdict{display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:var(--radius-pill); font-size:13px; font-weight:600; line-height:18px; color:var(--on-accent); background:var(--accent-fill)}
.mk-verdict svg{width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}

/* ---------- Home: the apps as a bento ---------- */
.bento{display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); grid-auto-rows:minmax(300px, auto); gap:var(--space-3); margin-top:var(--space-8)}
.tile{
  --c:var(--accent-fill);
  position:relative; overflow:hidden; isolation:isolate; min-width:0;
  display:flex; flex-direction:column; gap:6px; padding:var(--space-6);
  border-radius:var(--radius-tile); background:var(--tile-night, #000); color:var(--on-night); text-decoration:none;
  transition:transform .4s var(--ease);
}
.tile:hover{transform:translateY(-3px)}
.tile .light{opacity:.85}
.tile:hover .light{opacity:1}
.tile-icon{width:44px; height:44px; border-radius:var(--radius-icon); margin-bottom:var(--space-3)}
.tile h3{margin:0; font-size:clamp(24px, 2.4vw, 32px); font-weight:700; line-height:1.15; letter-spacing:-.015em}
.tile p{margin:0; max-width:32ch; font-size:15px; line-height:20px; color:var(--on-night-mid)}
.tile .tile-meta{margin-top:auto; padding-top:var(--space-4); display:flex; flex-wrap:wrap; gap:6px 18px; align-items:baseline; font-size:13px; color:var(--on-night-mid); position:relative; z-index:2}
.tile .tile-meta .go{color:var(--tile-text, var(--accent-sky)); font-size:15px}
.tile .phone{position:absolute; z-index:1; width:clamp(150px, 16vw, 210px); transition:transform .5s var(--ease)}
.tile:hover .phone{transform:translateY(-6px)}
.t-peregrino{grid-column:span 4; grid-row:span 2; --c:var(--peregrino); --tile-night:var(--peregrino-night); --tile-text:var(--peregrino-sky)}
.t-peregrino .phone.a{right:clamp(150px, 15vw, 220px); bottom:-90px; transform:rotate(-4deg)}
.t-peregrino .phone.b{right:28px; bottom:-40px}
.t-peregrino:hover .phone.a{transform:rotate(-4deg) translateY(-6px)}
.t-peregrino p{max-width:28ch}
.t-pocapal{grid-column:span 2; grid-row:span 2; --c:var(--pocapal); --tile-night:var(--pocapal-night); --tile-text:var(--pocapal)}
.t-pocapal .tile-meta{margin-top:0; padding-top:var(--space-2)}
.t-pocapal .phone{left:50%; margin-left:calc(clamp(150px, 16vw, 210px) / -2); bottom:-150px}
.t-uopbus{grid-column:span 3; --c:var(--uopbus); --tile-night:var(--uopbus-night); --tile-text:var(--uopbus-light)}
.t-uopbus .phone{right:24px; top:40%; width:clamp(130px, 13vw, 170px)}
.t-uopbus p, .t-keepsake p{max-width:22ch}
.t-keepsake{grid-column:span 3; --c:var(--keepsake); --tile-night:var(--keepsake-night); --tile-text:var(--keepsake)}
.prints{position:absolute; right:30px; top:50%; width:150px; height:200px; transform:translateY(-46%); z-index:1}
.prints img{position:absolute; inset:0; width:100%; height:100%; border-radius:10px; box-shadow:0 18px 40px rgba(0,0,0,.5); transition:transform .5s var(--ease)}
.prints img:nth-child(1){transform:rotate(-12deg) translateX(-34px)}
.prints img:nth-child(2){transform:rotate(-4deg) translateX(-12px)}
.prints img:nth-child(3){transform:rotate(5deg)}
.t-keepsake:hover .prints img:nth-child(3){transform:rotate(14deg) translateX(40px)}
.soon{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--radius-pill); background:rgba(255,255,255,.1); color:var(--on-night); font-size:12px; font-weight:600}
@media (max-width:900px){
  .bento{grid-template-columns:minmax(0, 1fr); grid-auto-rows:auto}
  .t-peregrino, .t-pocapal, .t-uopbus, .t-keepsake{grid-column:auto; grid-row:auto; min-height:400px}
  .t-peregrino .phone.a{display:none}
  .t-peregrino .phone.b, .t-pocapal .phone{left:auto; margin-left:0; right:24px; bottom:-120px; top:auto; width:150px}
  .t-uopbus .phone{top:auto; bottom:-110px; width:150px}
  .tile p{max-width:none; padding-right:150px}
  .t-uopbus p, .t-keepsake p, .t-pocapal p, .t-peregrino p{max-width:none}
  .prints{top:auto; bottom:60px; transform:none; width:120px; height:160px}
}
@media (max-width:480px){ .tile p{padding-right:0} .tile .phone, .prints{opacity:.35} }

/* ---------- Home: projects ---------- */
.mk-seg{display:inline-flex; max-width:100%; overflow-x:auto; scrollbar-width:none; padding:2px; gap:2px; border-radius:var(--radius-segment); background:var(--fill)}
.mk-seg::-webkit-scrollbar{display:none}
.mk-seg button{flex:none; appearance:none; border:0; margin:0; cursor:pointer; padding:6px 14px; border-radius:var(--radius-thumb); background:transparent; font:inherit; font-size:13px; font-weight:500; line-height:18px; color:var(--ink); transition:background .2s var(--ease), box-shadow .2s var(--ease)}
.mk-seg button[aria-pressed="true"]{background:var(--thumb); box-shadow:var(--shadow-thumb); font-weight:600}
.seg-dot{display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; vertical-align:1px}
.mk-count{color:var(--ink-mid); font-variant-numeric:tabular-nums; margin-left:4px}
.projects{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap:var(--space-3); margin-top:var(--space-6)}
.project{
  --c:var(--accent-fill); --n:#000;
  display:grid; grid-template-columns:72px minmax(0, 1fr); gap:var(--space-4); align-items:start;
  padding:var(--space-5); border-radius:var(--radius-card); background:var(--card); color:var(--ink); text-decoration:none;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
a.project:hover{transform:translateY(-2px); box-shadow:var(--shadow-card)}
.cs-hero ~ main .glyph, [data-view="uop-bus"] .glyph{--c:var(--uopbus); --n:var(--uopbus-night)}
.glyph{
  position:relative; overflow:hidden; width:72px; height:72px; border-radius:18px; display:grid; place-items:center; color:#fff;
  background:radial-gradient(90% 90% at 30% 110%, color-mix(in srgb, var(--c) 75%, transparent), transparent 70%), var(--n);
  font-weight:650; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.glyph svg{width:32px; height:32px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.project h3{margin:2px 0 0; font-size:17px; font-weight:600; line-height:22px}
.project p{margin:4px 0 0; font-size:15px; line-height:20px; color:var(--ink-mid); text-wrap:pretty}
.project .meta{display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:var(--space-2); font-size:12px; color:var(--ink-mid)}
.project .meta .go{color:var(--accent)}

/* ---------- The line: a career drawn as a route ---------- */
.line{position:relative; list-style:none; margin:var(--space-8) 0 0; padding:0; display:grid; grid-template-columns:repeat(6, minmax(0, 1fr))}
.line::before{content:""; position:absolute; left:0; width:calc(500% / 6); top:39px; height:4px; border-radius:2px 0 0 2px; background:var(--accent-sky)}
.line::after{content:""; position:absolute; left:calc(500% / 6); right:0; top:39px; border-top:4px dashed var(--accent-sky); opacity:.6}
.stop.next .dot{border-style:dashed; background:transparent}
.stop.next .when{color:var(--accent-sky)}
.stop{position:relative; padding-right:var(--space-4); min-width:0}
.stop .when{display:block; height:22px; font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--on-night-mid)}
.stop .dot{display:block; width:22px; height:22px; margin:6px 0 var(--space-4); border-radius:50%; background:var(--night); border:4px solid var(--accent-sky); position:relative}
.stop.work .dot{background:var(--accent-sky)}
.stop.now .dot::after{content:""; position:absolute; inset:-9px; border-radius:50%; border:2px solid var(--accent-sky); animation:ping 2.4s var(--ease) infinite}
.stop h3{margin:0; font-size:17px; font-weight:600; line-height:22px; color:var(--on-night)}
.stop p{margin:2px 0 0; font-size:13px; line-height:18px; color:var(--on-night-mid)}
/* Home: the career, vertical and compressed */
.glance{display:block}
/* Home: the career at a glance. The roles on a line on the right, and on the left the card of the one you point at, as on Career */
.glance-body{position:relative; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 2fr); column-gap:var(--space-7); align-items:stretch; margin-top:var(--space-7)}
/* the detail: everything the big timeline says about the role you're on */
.gl-detail{display:grid; padding:var(--space-6) var(--space-6) var(--space-5); border-radius:var(--radius-tile); background:var(--card); box-shadow:0 1px 2px rgba(0,0,0,.04), 0 18px 40px -28px rgba(0,0,0,.25)}
.gl-info{grid-area:1 / 1; min-width:0; transition:opacity .35s var(--ease), transform .45s var(--rise)}
.gl-info:not(.is-on){opacity:0; transform:translateY(10px); pointer-events:none; visibility:hidden; transition:opacity .2s var(--ease), transform .2s var(--ease), visibility 0s .2s}
.gl-info .row-when{margin:0 0 var(--space-3)}
.gl-info .row-head{margin-top:0}
.gl-info h3{margin:0; font-size:20px; font-weight:700; line-height:26px}
.gl-info .row-head{grid-template-columns:40px minmax(0, 1fr); column-gap:12px}
.gl-info .row-head .org-mark{width:40px; height:40px; border-radius:11px}
.gl-info .row-sum{font-size:15px; line-height:22px}
.gl-info .row-wins{font-size:14px; line-height:20px}
.gl-facts{list-style:none; margin:var(--space-4) 0 0; padding:0; border-top:1px solid var(--hair)}
.gl-facts li{padding:7px 0; border-bottom:1px solid var(--hair); font-size:13px; line-height:18px; color:var(--ink-mid)}
.gl-facts b{color:var(--ink); font-weight:600}
.gl-info .tags{margin-top:var(--space-4)}
.gl-info .mk-actions{margin-top:var(--space-5)}
/* the card: it rides along with the pointer over the list */
.gl-float{position:absolute; z-index:8; left:0; top:0; width:200px; pointer-events:none; opacity:0; scale:.8; transition:opacity .25s var(--ease), scale .35s var(--rise); will-change:transform}
.gl-float.is-shown{opacity:1; scale:1}
.gl-card{position:absolute; left:0; top:0; width:200px}
.gl-card .pop{width:200px; max-width:none; box-shadow:0 30px 60px -16px rgba(0,0,0,.45), 0 10px 22px -10px rgba(0,0,0,.25), inset 0 0 0 1px var(--hair)}
.gl-card:not(.is-on) .pop{opacity:0; transform:translateY(20px) rotate(0deg) scale(.9)}
.gl-card.was .pop{transform:translateY(-18px) rotate(calc(var(--tilt, 0deg) * 2.5)) scale(.92)}
.pop-next{background:var(--night); color:var(--on-night); box-shadow:0 26px 50px -18px rgba(0,0,0,.5), 0 10px 20px -10px rgba(0,0,0,.25)}
.pop-next::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(70% 70% at 80% 100%, rgba(255,106,26,.55), transparent 70%), radial-gradient(circle, rgba(255,255,255,.16) 1px, transparent 1.6px) 0 0 / 14px 14px}
.pop-next .pop-big{color:var(--accent-sky)}
.pop-next .pop-small{color:var(--on-night-mid)}
.mini{list-style:none; margin:0; padding:0}
.mi{position:relative}
.mi + .mi{margin-top:2px}
.mi::after{content:""; position:absolute; left:19px; top:35px; bottom:-15px; width:2px; border-radius:1px; background:var(--hair); pointer-events:none}
.mi:last-child::after{display:none}
.mi.next::after{width:0; background:none; border-left:2px dashed var(--hair)}
.mi.work{--c:var(--lane0)} .mi.study{--c:var(--lane1)} .mi.vol{--c:var(--lane2)} .mi.side{--c:var(--lane3)} .mi.next{--c:var(--accent)}
.mi a{position:relative; z-index:1; display:grid; grid-template-columns:12px minmax(0, 1fr) auto 8px; column-gap:14px; align-items:start; padding:12px 16px 12px 14px; border-radius:18px; color:var(--ink); text-decoration:none; transition:background .25s var(--ease), box-shadow .25s var(--ease)}
.mi-dot{width:12px; height:12px; margin-top:5px; border-radius:50%; background:var(--c); transition:transform .3s var(--ease)}
.mi.next .mi-dot{position:relative; box-sizing:border-box; background:var(--paper); border:2.5px solid var(--c)}
.mi.next .mi-dot::after{content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid var(--c); opacity:0; animation:ping 2.4s var(--ease) infinite}
.mi b{display:block; font-size:17px; font-weight:600; line-height:22px}
.mi-sub{display:flex; align-items:center; gap:6px; margin-top:2px; font-size:13px; line-height:18px; color:var(--ink-mid)}
.mi.next .mi-sub{color:var(--accent)}
.mi-when{font-size:13px; font-weight:600; line-height:22px; color:var(--ink-mid); font-variant-numeric:tabular-nums; white-space:nowrap}
.mi .chev{width:8px; height:13px; margin-top:5px; color:var(--ink-mid); opacity:0; transform:translateX(-4px); transition:opacity .25s var(--ease), transform .25s var(--ease)}
.mi a:hover, .mi.is-on a{background:var(--card); box-shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px -12px rgba(0,0,0,.14)}
.mi a:hover .chev, .mi.is-on .chev{opacity:1; transform:none}
.mi.is-on .mi-dot{transform:scale(1.3)}
.mi.is-on .mi-when{color:var(--c)}
.mi.next.is-on .mi-when{color:var(--accent)}
@media (max-width:860px){
  .glance-body{grid-template-columns:minmax(0, 1fr); margin-top:var(--space-6)}
  .gl-detail, .gl-float{display:none}
  .mi .chev{opacity:1; transform:none}
  .mi.is-on a{background:transparent; box-shadow:none}
  .mi.is-on .mi-dot{transform:none}
}
@media (max-width:480px){ .mi a{grid-template-columns:12px minmax(0, 1fr) 8px} .mi-when{grid-column:2; grid-row:1; order:-1; line-height:18px} .mi-main{grid-column:2} .mi .chev{grid-column:3; grid-row:1 / span 2; align-self:center; margin:0} }
.vline{list-style:none; margin:0; padding:var(--space-5) var(--space-6); position:relative; border-radius:var(--radius-tile); background:var(--card)}
.vline::before{content:""; position:absolute; left:calc(var(--space-6) + 7.5rem + 18px + 6px); top:calc(var(--space-5) + 74px); bottom:calc(var(--space-5) + 30px); width:2px; border-radius:1px; background:var(--accent)}
.vline::after{content:""; position:absolute; left:calc(var(--space-6) + 7.5rem + 18px + 6px); top:calc(var(--space-5) + 14px); height:58px; border-left:2px dashed var(--accent); opacity:.6}
.vl{display:grid; grid-template-columns:7.5rem 14px minmax(0, 1fr); column-gap:18px; padding:10px 0}
.vl-when{font-size:13px; font-weight:600; line-height:20px; color:var(--ink-mid); text-align:right; font-variant-numeric:tabular-nums}
.vl.next .vl-when{color:var(--accent)}
.vl-dot{position:relative; z-index:1; width:14px; height:14px; margin-top:3px; border-radius:50%; border:3px solid var(--accent); background:var(--card)}
.vl.work .vl-dot{background:var(--accent)}
.vl.next .vl-dot{border-style:dashed}
.vl b{display:block; font-size:17px; font-weight:600; line-height:22px}
.vl-where{display:flex; align-items:center; gap:6px; margin-top:2px; font-size:13px; line-height:18px; color:var(--ink-mid)}
.vl-what{display:block; margin-top:2px; font-size:13px; line-height:18px; color:var(--ink-body)}
@media (max-width:560px){
  .vline::before, .vline::after{left:calc(var(--space-6) + 6px)}
  .vl{grid-template-columns:14px minmax(0, 1fr)}
  .vl-when{grid-column:2; grid-row:1; text-align:left}
  .vl-dot{grid-column:1; grid-row:1 / span 2}
  .vl > div{grid-column:2}
}

/* the line on paper: Home's career at a glance */
.line.on-paper::before{background:var(--accent)}
.line.on-paper::after{border-top-color:var(--accent)}
.on-paper .stop .when{color:var(--ink-mid)}
.on-paper .stop.next .when{color:var(--accent)}
.on-paper .stop .dot{background:var(--paper); border-color:var(--accent)}
.on-paper .stop.work .dot{background:var(--accent)}
.on-paper .stop h3{color:var(--ink)}
.on-paper .stop p{color:var(--ink-mid)}
.stop p .flag{width:16px; height:auto; aspect-ratio:21 / 15; margin-right:6px; vertical-align:-2px; display:inline-block}
.next-talk{color:var(--accent-sky); text-decoration:none}
.on-paper .next-talk{color:var(--accent)}
.legend.on-paper{color:var(--ink-mid)}
.legend.on-paper i{border-color:var(--accent)}
.legend.on-paper .w i{background:var(--accent)}
.legend{display:flex; gap:var(--space-5); margin-top:var(--space-6); font-size:13px; color:var(--on-night-mid)}
.legend span{display:inline-flex; align-items:center; gap:8px}
.legend i{width:12px; height:12px; border-radius:50%; border:3px solid var(--accent-sky)}
.legend .w i{background:var(--accent-sky)}
@media (max-width:760px){
  .line{grid-template-columns:minmax(0, 1fr); gap:var(--space-5)}
  .line::before{left:9px; right:auto; top:8px; bottom:8px; width:4px; height:auto; border-radius:2px}
  .line::after{display:none}
  .stop{display:grid; grid-template-columns:22px minmax(0, 1fr); column-gap:var(--space-4); padding:0}
  .stop .dot{grid-row:1 / span 3; grid-column:1; margin:0}
  .stop .when, .stop h3, .stop p{grid-column:2}
  .stop .when{height:auto}
}

/* ---------- Milestones: big numbers ---------- */
.stats{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--space-5); margin-top:var(--space-6)}
.stat{padding-top:var(--space-4); border-top:1px solid var(--night-hair); min-width:0}
.stat b{display:block; font-size:clamp(48px, 6vw, 76px); font-weight:650; line-height:1; letter-spacing:-.035em; font-variant-numeric:tabular-nums; color:var(--on-night)}
.stat b small{font-size:.5em; letter-spacing:-.01em; color:var(--accent-sky); margin-left:.06em}
.stat p{margin:var(--space-3) 0 0; font-size:15px; line-height:20px; color:var(--on-night-mid); max-width:26ch}
@media (max-width:860px){ .stats{grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:var(--space-7)} }
.sheet .stat{border-top-color:var(--hair)}
.sheet .stat b{color:var(--ink)}
.sheet .stat b small{color:var(--accent)}
.sheet .stat p{color:var(--ink-mid)}
.subhead{display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-5); margin-top:var(--space-9); flex-wrap:wrap}

/* ---------- Contact ---------- */
.contact{display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, .7fr); gap:var(--space-7); align-items:end}
@media (max-width:860px){ .contact{grid-template-columns:minmax(0, 1fr)} }
.contact-card{align-self:end; align-content:start; padding:var(--space-6); border-radius:var(--radius-card); background:var(--card); display:grid; gap:var(--space-3)}
.contact-card .c-row{display:flex; justify-content:space-between; gap:var(--space-4); align-items:baseline; padding-bottom:var(--space-3); border-bottom:1px solid var(--hair); font-size:15px}
.contact-card .c-row:last-of-type{border-bottom:0}
.contact-card .c-row span{color:var(--ink-mid)}
.contact-card .c-row a, .contact-card .c-row b{font-weight:500; text-align:right; overflow-wrap:anywhere; text-decoration:none}
.contact-card .c-row a{color:var(--accent)}
.copy{appearance:none; border:0; background:var(--fill); color:var(--ink); border-radius:var(--radius-pill); padding:4px 10px; font:inherit; font-size:12px; font-weight:600; cursor:pointer; margin-left:8px}

/* ---------- Career page: a card on the left for the role you're at, the line with a dot travelling down it, the roles on the right ---------- */
.career-bar{display:flex; flex-direction:column; align-items:center; gap:var(--space-4); margin-bottom:var(--space-8); text-align:center}
.career-bar .title-3{font-size:15px; font-weight:600; line-height:20px; color:var(--ink-mid)}
.kinds{position:relative; isolation:isolate; display:flex; max-width:100%; overflow-x:auto; scrollbar-width:none; padding:5px; gap:2px; border-radius:var(--radius-pill); background:color-mix(in srgb, var(--card) 70%, transparent); box-shadow:inset 0 0 0 1px var(--hair), 0 10px 30px -18px rgba(0,0,0,.3); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px)}
.kinds::-webkit-scrollbar{display:none}
.kinds button{--on:var(--ink); flex:none; display:inline-flex; align-items:center; gap:8px; appearance:none; border:0; margin:0; cursor:pointer; padding:11px 20px; border-radius:var(--radius-pill); background:transparent; font:inherit; font-size:17px; font-weight:600; line-height:22px; color:var(--ink-mid); transition:color .35s var(--ease)}
.kinds button:hover{color:var(--ink)}
.kinds button svg{flex:none; width:19px; height:19px; fill:none; stroke:var(--k, currentColor); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; transition:stroke .35s var(--ease)}
.kinds button[aria-pressed="true"]{color:var(--on-k, var(--paper))}
.kinds button[aria-pressed="true"] svg{stroke:var(--on-k, var(--paper))}
.kinds button[data-kind="vol"], .kinds button[data-kind="side"]{--on-k:#16110d}
.kinds button[data-kind="study"], .kinds button[data-kind="work"]{--on-k:#ffffff}
.kinds-thumb{position:absolute; z-index:-1; left:0; top:5px; bottom:5px; width:0; border-radius:var(--radius-pill); background:var(--ink); box-shadow:0 6px 16px -6px color-mix(in srgb, var(--thumb-c, #000) 60%, transparent);
  transition:transform .55s var(--rise), width .55s var(--rise), background .45s var(--ease)}
.tl-tint{position:absolute; left:0; right:0; top:0; height:var(--tint-h, 100%); border-radius:inherit; overflow:hidden; pointer-events:none;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 180px), transparent); mask-image:linear-gradient(#000 calc(100% - 180px), transparent)}
.tl-tint i{position:absolute; inset:0; background:var(--tint)}
.tl-tint i.in{animation:wipe .95s var(--rise) both}
@keyframes wipe{from{clip-path:inset(0 0 100% 0)}}
@keyframes rowIn{from{opacity:0; transform:translateY(-16px)}}
@media (max-width:640px){ .kinds{justify-content:flex-start} .kinds button{padding:9px 15px; font-size:15px; gap:7px} .career-bar{align-items:stretch} .career-bar .title-3{text-align:center} }
.timeline{--at:45vh; --pad:92px; --line-x:56px; --gap:5px; --nl:1; display:grid; grid-template-columns:minmax(0, 300px) minmax(0, 1fr); column-gap:var(--space-8); align-items:start}
.tl-stage{position:sticky; top:max(calc(var(--layout-nav-h) + 24px), calc(var(--at) - 150px)); display:grid; justify-items:center; padding:14px 22px 28px}
.tl-card{grid-area:1 / 1; width:100%; display:grid; justify-items:center; gap:34px; pointer-events:none}
.tl-pop-row{position:relative; width:100%; display:grid; justify-items:center}
.tl-nav{position:absolute; z-index:6; top:50%; transform:translateY(-50%); width:34px; height:34px; border-radius:50%; border:0; display:grid; place-items:center; cursor:pointer;
  background:var(--card); color:var(--ink); box-shadow:0 6px 16px -4px rgba(0,0,0,.25), inset 0 0 0 1px var(--hair); transition:transform .2s var(--ease)}
.tl-nav:hover{transform:translateY(-50%) scale(1.06)}
.tl-prev{left:-14px} .tl-next{right:-14px}
.tl-nav svg{width:8px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.tl-dots{position:absolute; z-index:6; left:0; right:0; bottom:-22px; display:flex; justify-content:center; gap:6px}
.tl-dots button{width:7px; height:7px; padding:0; border:0; border-radius:4px; cursor:pointer; background:color-mix(in srgb, var(--ink) 25%, transparent); transition:width .3s var(--ease), background .3s var(--ease)}
.tl-dots button[aria-current="true"]{width:18px; background:var(--accent)}
.tl-card.is-current{pointer-events:auto}
.tl-body{position:relative; padding-left:var(--pad)}
.tl-track{position:absolute; top:0; bottom:0; left:calc(var(--line-x) - (var(--nl) - 1) * var(--gap) / 2 - 12px); width:24px; z-index:3}

.tl-fill{display:none}
.tl-traveller{position:sticky; top:calc(var(--at) - 12px); display:block; width:24px; height:24px}
.tl-traveller i{position:absolute; inset:0; border-radius:50%; background:color-mix(in srgb, var(--paper) 70%, transparent); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); box-shadow:inset 0 0 0 2.5px var(--ink), 0 4px 12px -2px rgba(0,0,0,.28)}
.tl-traveller i::after{content:""; position:absolute; left:50%; top:50%; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; background:var(--ink)}
.rows{list-style:none; margin:0; padding:96px 0 0}
.tl-lanes{position:absolute; left:0; top:0; width:calc(var(--line-x) + 2px); height:100%; overflow:visible; pointer-events:none}
.tl-lanes path{fill:none; stroke-width:2.5; stroke-linecap:round; opacity:.38; transition:opacity .35s var(--ease)}
.tl-lanes path.spine{stroke:var(--hair); stroke-width:1.5; opacity:1}
.tl-lanes path.live{opacity:1}
.tl-lanes path.own{opacity:1}
.tl-lanes circle.end, .tl-lanes circle.start{fill:var(--tl-bg, var(--paper)); stroke-width:2; transition:fill .6s var(--ease)}
.tl-lanes circle.end.now{stroke-dasharray:2.4 2.2}
.tl-lanes circle.end.on{fill:currentColor}
.row{position:relative; padding-bottom:var(--space-7)}
.row:last-child{padding-bottom:var(--space-6); min-height:0}
.row-dot{position:absolute; z-index:2; left:calc(var(--line-x) - var(--pad) - var(--lane, 0) * var(--gap) - 5px); top:5px; width:10px; height:10px; border-radius:50%; background:var(--paper); border:2px solid var(--c, var(--accent)); transition:background .3s var(--ease), transform .3s var(--ease)}
.row.work{--c:var(--lane0)} .row.study{--c:var(--lane1)} .row.vol{--c:var(--lane2)} .row.side{--c:var(--lane3)}
.row-dot{opacity:0}
.row-when::before{content:""; flex:none; width:10px; height:10px; border-radius:50%; background:var(--c, var(--accent))}
.row-when{margin:0 0 4px; font-size:13px; font-weight:600; color:var(--ink-mid); font-variant-numeric:tabular-nums}
.row.is-current .row-when{color:var(--accent)}
.row-when{display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px}
.row-place{display:inline-flex; align-items:center; gap:6px; font-weight:500; color:var(--ink-mid)}
.flag{width:21px; height:15px; border-radius:3px; box-shadow:0 0 0 .5px rgba(0,0,0,.12); flex:none}
.pop-flag{position:absolute; z-index:3; top:12px; right:12px; width:30px; height:auto; aspect-ratio:21 / 15; border-radius:4px; box-shadow:0 2px 6px rgba(0,0,0,.25), 0 0 0 .5px rgba(0,0,0,.1); transform:rotate(6deg)}
.pop-adobe .pop-flag{top:auto; bottom:14px; right:14px}

.row-main h3{margin:0; font-size:22px; font-weight:700; line-height:28px}
.row-org{margin:2px 0 0; font-size:15px; line-height:20px; color:var(--ink-mid)}
.row-sum{margin:var(--space-3) 0 0; color:var(--ink-body); max-width:56ch}
.row-wins{margin:var(--space-3) 0 0; padding-left:1.1em; display:grid; gap:6px; font-size:15px; line-height:21px; color:var(--ink-body); max-width:56ch}
.row-main .tags{margin-top:var(--space-4)}
.row-link{margin-top:var(--space-4); font-size:15px}
.row-facts{list-style:none; margin:var(--space-4) 0 0; padding:0; max-width:420px; border-top:1px solid var(--hair)}
.row-facts li{padding:8px 0; border-bottom:1px solid var(--hair); font-size:13px; line-height:18px; color:var(--ink-mid)}
.row-facts b{color:var(--ink); font-weight:600}
.tags{display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none}
.tags li{padding:4px 10px; border-radius:var(--radius-pill); background:var(--fill); font-size:13px; line-height:18px; color:var(--ink)}
@media (min-width:861px){ .row-facts{position:absolute!important; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); margin:0; border:0} }

.pop{
  --spring:cubic-bezier(.34,1.56,.64,1);
  position:relative; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  width:100%; max-width:260px; aspect-ratio:5 / 4; padding:var(--space-4); border-radius:18px; text-align:center; text-decoration:none;
  background:var(--card); color:var(--ink);
  box-shadow:0 26px 50px -18px rgba(0,0,0,.35), 0 10px 20px -10px rgba(0,0,0,.18), inset 0 0 0 1px var(--hair);
  transform:rotate(var(--tilt, 0deg));
  transition:transform .6s var(--spring), box-shadow .5s var(--ease), opacity .4s var(--ease);
}
a.pop{cursor:zoom-in}
.tl-card.is-current a.pop:hover{transform:rotate(calc(var(--tilt, 0deg) * .25)) translateY(-6px) scale(1.03); box-shadow:0 34px 60px -18px rgba(0,0,0,.42), 0 12px 24px -10px rgba(0,0,0,.2), inset 0 0 0 1px var(--hair)}
.pop-big{font-size:40px; font-weight:750; line-height:1.02; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.pop-small{font-size:13px; line-height:18px; color:var(--ink-mid)}
.pop-facts{list-style:none; margin:0; padding:0; width:100%; max-width:260px; border-top:1px solid var(--hair); transition:opacity .4s var(--ease) .1s, transform .4s var(--ease) .1s}
.pop-facts li{padding:8px 0; border-bottom:1px solid var(--hair); font-size:13px; line-height:18px; color:var(--ink-mid)}
.pop-facts b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
/* one card at a time: the one you're at pops up; the one you've left drifts off */
.tl-card:not(.is-current) .pop{opacity:0; transform:translateY(34px) rotate(0deg) scale(.88)}
.tl-card.was .pop{transform:translateY(-30px) rotate(calc(var(--tilt, 0deg) * 2.5)) scale(.92)}
.tl-card:not(.is-current) .pop-facts{opacity:0; transform:translateY(10px); transition-delay:0s}
@media (max-width:860px){
  .timeline{grid-template-columns:minmax(0, 1fr)}
  .tl-stage{display:none}
  .timeline{--pad:70px; --line-x:44px}
  .row{padding-bottom:var(--space-7)}
}

/* the cards, each in the look of what it was */
.pop-paper .pop-big{font-size:56px}
.pop-night, .pop-apps, .pop-video{background:var(--night); color:var(--on-night); box-shadow:0 26px 50px -18px rgba(0,0,0,.5), 0 10px 20px -10px rgba(0,0,0,.25)}
.pop-night .pop-small, .pop-video .pop-small{color:var(--on-night-mid)}
.pop-night::before{content:""; position:absolute; inset:-30%; z-index:-1; background:radial-gradient(40% 40% at 70% 80%, color-mix(in srgb, var(--accent-fill) 55%, transparent), transparent 70%)}
.pop-apps .pop-glow{position:absolute; inset:-40%; z-index:-1; background:
  radial-gradient(28% 30% at 25% 65%, color-mix(in srgb, var(--peregrino) 75%, transparent), transparent 70%),
  radial-gradient(28% 30% at 70% 35%, color-mix(in srgb, var(--pocapal) 60%, transparent), transparent 70%),
  radial-gradient(28% 30% at 62% 85%, color-mix(in srgb, var(--uopbus) 75%, transparent), transparent 70%),
  radial-gradient(22% 26% at 90% 70%, color-mix(in srgb, var(--keepsake) 50%, transparent), transparent 70%)}
.pop-apps .pop-big{font-size:48px}
.pop-icons{display:flex; gap:8px; margin-top:var(--space-3)}
.pop-icons img{width:34px; height:34px; border-radius:var(--radius-icon); box-shadow:0 6px 14px rgba(0,0,0,.4)}
.pop-video{background:#0b0b0d}
.pop-video .play{width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.14); position:relative; margin-bottom:var(--space-2)}
.pop-video .play::after{content:""; position:absolute; left:16px; top:12px; border-left:14px solid #fff; border-top:9px solid transparent; border-bottom:9px solid transparent}
.pop-video .pop-big{font-size:34px; letter-spacing:.02em}
.pop-post{justify-content:flex-start; padding-top:var(--space-4)}
.post-head{align-self:stretch; display:flex; align-items:center; gap:8px; margin-bottom:auto}
.post-head i{width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg, var(--accent-sky), var(--accent-fill))}
.post-head span{display:grid; gap:4px}
.post-head b{display:block; height:5px; width:64px; border-radius:3px; background:var(--fill)}
.post-head b + b{width:40px}
.pop-post .pop-big{font-size:44px}
.pop-post .pop-small{margin-bottom:auto}
.pop-stamp{background:var(--pp-paper); background-image:repeating-linear-gradient(0deg, var(--pp-line) 0 1px, transparent 1px 22px)}
.pop-stamp .stamp{position:static; transform:rotate(-8deg)}
.pop-adobe{padding:0; background:var(--sx-surface); color:var(--sx-text-strong); font-family:adobe-clean, "Adobe Clean", "Source Sans 3", "Source Sans Pro", -apple-system, sans-serif}
.pa-face{position:absolute; inset:0; display:flex; flex-direction:column}
.pa-bar{flex:0 0 30px; display:flex; align-items:center; gap:8px; padding:0 12px; font-size:10px; color:var(--sx-text-muted)}
.pa-bar b{color:var(--sx-text-strong); font-weight:800}
.pa-burger{display:grid; gap:2px; width:10px}
.pa-burger i{height:1.5px; border-radius:1px; background:var(--sx-text-2)}
.pa-body{flex:1; margin:0 6px 6px; border-radius:10px; background:var(--sx-bg); box-shadow:inset 0 0 0 1px var(--sx-border); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:0 14px}
.pa-badge{padding:2px 6px; border:1px solid var(--sx-orange-border); border-radius:5px; background:var(--sx-orange-bg); color:var(--sx-orange); font-size:9px; font-weight:700; letter-spacing:.04em; text-transform:uppercase}
.pop-adobe .pop-big{font-size:30px; font-weight:800; letter-spacing:-.01em; line-height:1.05; color:var(--sx-text-strong)}

@media (max-width:860px){
  .rows::before{left:7px}
  .row{grid-template-columns:16px minmax(0, 1fr); column-gap:var(--space-5); padding-bottom:var(--space-7)}
  .row-when{grid-column:2; grid-row:1; text-align:left; font-size:13px}
  .row-dot{grid-column:1; grid-row:1 / span 3}
  .row-main{grid-column:2}
  .row-side{grid-column:2; justify-items:start; margin-top:var(--space-6)}
  .pop{max-width:240px}
}
/* the Adobe shell at full size: it fills the screen when the Adobe card is opened */
.spx{font-family:adobe-clean, "Adobe Clean", "Source Sans 3", "Source Sans Pro", -apple-system, sans-serif; background:var(--sx-surface); color:var(--sx-text-strong); display:flex; flex-direction:column; -webkit-font-smoothing:antialiased}
.spx svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; flex:none}
.spx-top{flex:0 0 56px; display:flex; align-items:center; gap:12px; padding:0 20px 0 18px}
.spx-burger{display:grid; gap:4px; width:18px; margin-right:10px}
.spx-burger i{height:2px; border-radius:1px; background:var(--sx-text-2)}
.spx-lockup{font-size:19px; letter-spacing:-.01em}
.spx-lockup b{font-weight:800}
.spx-lockup em{font-style:normal; font-weight:400; color:var(--sx-text-muted); margin:0 4px}
.spx-body{flex:1; display:flex; min-height:0}
.spx-rail{flex:0 0 216px; display:grid; align-content:start; gap:2px; padding:4px 8px}
.spx-rail span{display:flex; align-items:center; gap:10px; height:36px; padding:0 10px; border-radius:8px; font-size:14px; font-weight:500; color:var(--sx-text-2)}
.spx-rail span.on{background:var(--sx-accent-bg); color:var(--sx-accent-strong); font-weight:700}
.spx-canvas{flex:1; min-width:0; margin:0 8px 8px 0; border-radius:16px; background:var(--sx-bg); box-shadow:inset 0 0 0 1px var(--sx-border); overflow:hidden}
.spx-page{max-width:980px; padding:28px; display:flex; flex-direction:column; gap:14px}
.spx-badge{align-self:flex-start; padding:3px 8px; border:1px solid var(--sx-orange-border); border-radius:6px; background:var(--sx-orange-bg); color:var(--sx-orange); font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase}
.spx h4{margin:0; font-size:24px; font-weight:800; line-height:1.2}
.spx p{margin:0; max-width:60ch; font-size:14px; line-height:1.6; color:var(--sx-text-2)}
.spx-facts{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; margin-top:6px}
.spx-facts div{padding:16px; border-radius:8px; background:var(--sx-surface); box-shadow:inset 0 0 0 1px var(--sx-border); font-size:17px}
.spx-facts small{display:block; margin-bottom:8px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--sx-text-2)}
.spx h5{margin:26px 0 0; font-size:17px; font-weight:700}
.spx h5 span{margin-left:10px; font-size:14px; font-weight:400; color:var(--sx-text-2)}
.spx-cards{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px}
.spx-cards div{border-radius:8px; overflow:hidden; background:var(--sx-surface); box-shadow:inset 0 0 0 1px var(--sx-border); padding-bottom:18px}
.spx-cards i{display:block; height:150px; background:var(--sx-surface-3); margin-bottom:16px}
.spx-cards span{margin:0 20px; padding:2px 7px; border-radius:6px; background:var(--sx-surface-3); font-size:11px; font-weight:700; text-transform:uppercase; color:var(--sx-text-2)}
.spx-cards b{display:block; margin:10px 20px 0; font-size:16px}
@media (max-width:700px){ .spx-rail{display:none} .spx-facts{grid-template-columns:repeat(2, minmax(0, 1fr))} .spx-cards{grid-template-columns:minmax(0, 1fr)} .spx-canvas{margin-left:8px} .spx-lockup{font-size:16px} }
.spx-overlay{position:fixed; inset:0; z-index:90; background:var(--sx-surface); box-shadow:0 30px 80px rgba(0,0,0,.4); overflow:hidden}
.spx-overlay .spx{position:absolute; inset:0; opacity:0}
.spx-overlay .spx-top{padding-top:env(safe-area-inset-top, 0px); padding-left:max(18px, env(safe-area-inset-left, 0px))}
.spx-overlay .zoom-face{position:absolute; inset:0; font-family:adobe-clean, "Adobe Clean", "Source Sans 3", "Source Sans Pro", -apple-system, sans-serif; color:var(--sx-text-strong)}
.spx-bar{
  position:absolute; z-index:2; left:50%; transform:translateX(-50%); bottom:calc(20px + env(safe-area-inset-bottom, 0px));
  display:flex; align-items:center; gap:10px; padding:6px; border-radius:var(--radius-pill); max-width:calc(100vw - 24px);
  background:rgba(28,28,30,.86); color:#f5f5f7; box-shadow:0 12px 32px -8px rgba(0,0,0,.5);
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  font-family:var(--font-sans); font-size:13px; white-space:nowrap;
}
@media (max-width:480px){ .spx-bar > span{display:none} }
.spx-bar a, .spx-bar button{appearance:none; border:0; border-radius:var(--radius-pill); padding:8px 14px; font:inherit; font-weight:600; cursor:pointer; text-decoration:none}
.spx-bar button{background:#3a3a3c; color:#f5f5f7}
.spx-bar a{background:var(--accent-fill); color:var(--on-accent)}
/* The apps card on Career grows into the Apps page (site.js marks that one navigation; the page's head script names the
   Apps hero to meet it; every other navigation is skipped, so it's instant as before) */
@view-transition{navigation:auto}
::view-transition-group(zoom){animation-duration:.6s; animation-timing-function:cubic-bezier(.22,.61,.36,1)}

/* a passport stamp, as Peregrino stamps one, in its inks */
.stamp{
  display:grid; justify-items:center; gap:2px; padding:10px 16px; min-width:170px;
  color:var(--stamp); border:3px solid var(--stamp); border-radius:14px; box-shadow:inset 0 0 0 2px var(--pp-paper), inset 0 0 0 4px var(--stamp);
  opacity:.85; text-align:center; text-transform:uppercase; font-weight:800; letter-spacing:.06em;
}
.stamp small{font-size:9px; font-weight:700; letter-spacing:.12em}
.stamp b{font-size:26px; line-height:1.05; letter-spacing:.04em}
.stamp span{font-size:11px; font-variant-numeric:tabular-nums; letter-spacing:.08em}
.visually-hidden{position:absolute!important; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

.skills{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--space-3); margin-top:var(--space-6)}
.skills > div{padding:var(--space-5); border-radius:var(--radius-card); background:var(--card)}
.skills h3{margin:0 0 var(--space-3); font-size:13px; font-weight:600; color:var(--ink-mid)}
@media (max-width:760px){ .skills{grid-template-columns:minmax(0, 1fr)} }
.certs{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap:var(--space-3); margin-top:var(--space-6)}
.cert{padding:var(--space-5); border-radius:var(--radius-card); background:var(--card)}
.cert b{display:block; font-size:17px; font-weight:600; line-height:22px}
.cert span{font-size:13px; color:var(--ink-mid)}

/* ---------- Case study ---------- */
.cs-hero{--c:var(--uopbus); background:var(--uopbus-night)}
.cs-title{display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-5)}
.cs-title img{width:56px; height:56px; border-radius:var(--radius-icon)}
.cs-title b{display:block; font-size:17px; font-weight:600; color:var(--on-night)}
.cs-title span{font-size:13px; color:var(--on-night-mid)}
.cs-hero .mk-turn{color:var(--uopbus-light)}
.meta-row{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--space-5); margin:var(--space-7) 0 0; padding-top:var(--space-5); border-top:1px solid var(--night-hair)}
.meta-row dt{font-size:13px; color:var(--on-night-mid)}
.meta-row dd{margin:2px 0 0; font-size:15px; font-weight:600; line-height:20px; color:var(--on-night)}
@media (max-width:760px){ .meta-row{grid-template-columns:repeat(2, minmax(0, 1fr))} }
.cs-phones{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(12px, 4vw, 56px); max-width:820px; margin:var(--space-8) auto calc(-1 * clamp(80px, 18vw, 240px)); position:relative}
.cs-phones .device{max-width:250px; margin:0 auto}
.cs-phones > :nth-child(2){transform:translateY(-28px)}
.cs-story{padding-bottom:0}
.two{display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:var(--space-8)}
@media (max-width:860px){ .two{grid-template-columns:minmax(0, 1fr); gap:var(--space-5)} }
.two h2{margin:0; font-size:28px; font-weight:700; line-height:34px}
.prose{display:grid; gap:var(--space-4); max-width:62ch}
.prose p{margin:0; color:var(--ink-body)}
.features{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--space-3); margin-top:var(--space-6)}
@media (max-width:860px){ .features{grid-template-columns:minmax(0, 1fr)} }
.feature{padding:var(--space-6); border-radius:var(--radius-card); background:var(--card)}
.feature svg{width:28px; height:28px; fill:none; stroke:var(--uopbus-text); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.feature h3{margin:var(--space-3) 0 4px; font-size:17px; font-weight:600; line-height:22px}
.feature p{margin:0; font-size:15px; line-height:20px; color:var(--ink-mid)}
.cs-band{--c:var(--uopbus); background:var(--uopbus-night)}
/* A case study in its app's colours (render.js caseStyle): the glow and the night in its fill, its words on the night in
   its light colour, and on paper its fill (its light colour where the paper is dark) */
body[data-case]{--case-text:var(--case)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) body[data-case]{--case-text:var(--case-light)} }
:root[data-theme="dark"] body[data-case]{--case-text:var(--case-light)}
body[data-case] .cs-hero, body[data-case] .cs-band{--c:var(--case); background:var(--case-night, var(--night))}
body[data-case] .cs-hero .light, body[data-case] .cs-band .light{--c:var(--case)}
body[data-case] .cs-hero .mk-turn, body[data-case] .cs-band .mk-turn{color:var(--case-light)}
body[data-case] .sheet .section-head .mk-turn{color:var(--case-text)}
body[data-case] .feature svg{stroke:var(--case-text)}
body[data-case] .glyph{--c:var(--case); --n:var(--case-night, var(--night))}
.showcase{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:var(--space-8); align-items:center}
.showcase .device{max-width:260px; margin:0 auto}
@media (max-width:760px){ .showcase{grid-template-columns:minmax(0, 1fr)} }
.decisions{display:grid; gap:0; margin-top:var(--space-6); border-top:1px solid var(--hair)}
.decision{display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:var(--space-5) var(--space-8); padding:var(--space-5) 0; border-bottom:1px solid var(--hair)}
.decision h3{margin:0; font-size:17px; font-weight:600; line-height:22px}
.decision p{margin:0; font-size:15px; line-height:21px; color:var(--ink-mid)}
@media (max-width:760px){ .decision{grid-template-columns:minmax(0, 1fr)} }
.stat.todo b{color:var(--ink-mid)!important; font-weight:500}
.stat.todo p::before{content:"To add · "; font-weight:600; color:var(--ink)}
.cs-next{display:flex; justify-content:space-between; align-items:center; gap:var(--space-5); flex-wrap:wrap; padding:var(--space-6); border-radius:var(--radius-tile); background:var(--peregrino-night); color:var(--on-night); text-decoration:none; position:relative; overflow:hidden; isolation:isolate; --c:var(--peregrino)}
.cs-next span{font-size:13px; color:var(--on-night-mid)}
.cs-next b{display:block; font-size:28px; font-weight:700; line-height:34px}
.cs-next img{width:56px; height:56px; border-radius:var(--radius-icon)}

/* ---------- Site map ---------- */
.map{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--space-3); margin-top:var(--space-6)}
@media (max-width:900px){ .map{grid-template-columns:minmax(0, 1fr)} }
.page-card{padding:var(--space-6); border-radius:var(--radius-card); background:var(--card); display:grid; gap:var(--space-3); align-content:start}
.page-card .path{font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:13px; color:var(--accent)}
.page-card h3{margin:0; font-size:22px; font-weight:700; line-height:28px}
.page-card p{margin:0; font-size:15px; line-height:20px; color:var(--ink-mid)}
.page-card ol{margin:0; padding:0; list-style:none; display:grid; gap:0; border-top:1px solid var(--hair)}
.page-card ol li{display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--hair); font-size:15px}
.page-card ol li span{color:var(--ink-mid); font-size:13px; text-align:right}
.page-card .go{font-size:15px; color:var(--accent); text-decoration:none}
.small-map{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--space-3); margin-top:var(--space-3)}
@media (max-width:900px){ .small-map{grid-template-columns:minmax(0, 1fr)} }
.small-map .page-card{background:transparent; box-shadow:inset 0 0 0 1px var(--hair)}
.table-wrap{overflow-x:auto; margin-top:var(--space-6); border-radius:var(--radius-card); background:var(--card)}
table{width:100%; border-collapse:collapse; font-size:15px; line-height:20px; min-width:560px}
th, td{text-align:left; padding:14px var(--space-5); border-bottom:1px solid var(--hair); vertical-align:top}
th{font-size:13px; font-weight:600; color:var(--ink-mid)}
tr:last-child td{border-bottom:0}
td b{font-weight:600}
td span{color:var(--ink-mid)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  .mk-btn, .mk-seg button, .mk-nav, .tile, .tile .phone, .project, .prints img, .light, .device-screen img{transition:none}
}

/* A role's organisation: its logo on a tile beside the title. Until the real logo file is added, a monogram stands in; never a redrawn logo */
.org-mark{flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:var(--card); box-shadow:inset 0 0 0 1px var(--hair), 0 1px 2px rgba(0,0,0,.05); font-size:13px; font-weight:700; letter-spacing:-.01em; color:var(--ink); font-variant-numeric:tabular-nums; overflow:hidden}
.org-mark.logo{background:#fff; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05)}
.org-mark.logo img{width:100%; height:100%; object-fit:contain}
.org-mark.pad img{padding:14%}
.org-mark.dark{background:#0b0b0c; box-shadow:0 1px 2px rgba(0,0,0,.08)}
.org-apps{grid-template-columns:repeat(2, 1fr); gap:3px; padding:5px}
.org-apps img{width:100%; height:auto; border-radius:22.37%}
.row-head{display:grid; grid-template-columns:44px minmax(0, 1fr); column-gap:14px; align-items:center; margin-top:6px}
.row-head h3{margin:0}
.mi a{grid-template-columns:12px 36px minmax(0, 1fr) auto 8px; column-gap:14px}
.mi .org-mark{width:36px; height:36px; border-radius:10px; font-size:11px; margin-top:-2px}
.mi-next-mark{background:transparent; box-shadow:none; border:1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent); color:var(--accent); font-size:19px; font-weight:500}
.mi .org-next{background:transparent; box-shadow:none; border:1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent); color:var(--accent); font-size:17px; font-weight:500}
@media (max-width:480px){ .mi a{grid-template-columns:12px 36px minmax(0, 1fr) 8px} .mi .org-mark{grid-column:2; grid-row:1 / span 2; align-self:center; margin:0} .mi-when, .mi-main{grid-column:3} .mi .chev{grid-column:4} }

/* Home: a glance at Projects and at Milestones, made of the same cards as their pages */
.home-projects{display:grid; grid-template-columns:minmax(0, 1.15fr) repeat(2, minmax(0, 1fr)); gap:var(--space-3); margin-top:var(--space-6)}
.home-projects .case-wide{grid-row:1 / span 2; min-height:0}
.home-projects .case-assoc, .home-projects .assoc{display:none}
.home-projects .project .meta span:first-child{display:inline}
@media (max-width:1000px){ .home-projects{grid-template-columns:repeat(2, minmax(0, 1fr))} .home-projects .case-wide{grid-column:1 / -1; grid-row:auto; min-height:220px} }
@media (max-width:640px){ .home-projects{grid-template-columns:minmax(0, 1fr)} }
.home-miles .odo-col{animation:none!important}
.home-miles.is-in .odo-col{animation:roll 1.8s var(--rise) var(--dl, 0s) both!important}

/* About me: me first, then the milestones */
.portrait{margin:0; display:grid; justify-items:center}
.portrait-print{width:min(300px, 80%); padding:12px 12px 0; border-radius:6px; background:#f4f1ea; transform:rotate(3deg); box-shadow:0 40px 70px -24px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.06); animation:deal .9s var(--rise) .2s both}
.portrait-photo{display:grid; place-items:center; align-content:center; gap:10px; aspect-ratio:4 / 5; border-radius:3px; color:rgba(255,255,255,.7); font-size:13px; font-weight:600;
  background:radial-gradient(70% 60% at 70% 90%, rgba(255,106,26,.55), transparent 70%), radial-gradient(60% 50% at 20% 10%, rgba(255,255,255,.12), transparent 70%), #1a1714}
.portrait-photo svg{width:34px; height:34px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round}
.portrait figcaption{padding:12px 4px 14px; font-size:13px; font-weight:500; color:#5b574f; text-align:center}
@media (max-width:860px){ .portrait-print{width:220px} }
.about-more{display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr); gap:var(--space-8); align-items:start}
@media (max-width:860px){ .about-more{grid-template-columns:minmax(0, 1fr); gap:var(--space-6)} }
.about-p{margin:var(--space-4) 0 0; max-width:56ch; font-size:19px; line-height:1.5; color:var(--ink-body)}
.about-card{padding:var(--space-5) var(--space-6); border-radius:var(--radius-tile); background:var(--card); box-shadow:0 1px 2px rgba(0,0,0,.04), 0 18px 40px -28px rgba(0,0,0,.25)}
.about-facts{list-style:none; margin:0; padding:0}
.about-facts li{display:grid; grid-template-columns:minmax(0, 9.5rem) minmax(0, 1fr); gap:var(--space-3); padding:12px 0; border-bottom:1px solid var(--hair); font-size:15px; line-height:20px}
.about-facts li:last-child{border-bottom:0}
.about-facts span{color:var(--ink-mid)}
.about-facts b{display:inline-flex; align-items:center; gap:7px; font-weight:600; color:var(--ink)}
.about-intro{display:grid; grid-template-columns:96px minmax(0, 1fr); gap:var(--space-6); align-items:center; padding:var(--space-3) 0 var(--space-5); border-bottom:1px solid var(--hair)}
.about-intro p{margin:0; font-size:19px; line-height:27px; color:var(--ink-body); text-wrap:pretty}
.portrait-small{width:116px; padding:7px 7px 18px; transform:rotate(-3deg); box-shadow:0 18px 30px -14px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.06); animation:none}
.portrait-small .portrait-photo svg{width:24px; height:24px}
.portrait-mini{display:grid; place-items:center; width:52px; height:52px; border-radius:50%; color:rgba(255,255,255,.75); background:radial-gradient(70% 60% at 70% 90%, rgba(255,106,26,.6), transparent 70%), #1a1714; box-shadow:0 0 0 3px var(--card), 0 0 0 4px var(--hair)}
.portrait-mini svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linejoin:round}
.home-about{display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--space-3); margin-top:var(--space-6)}
.home-about .home-miles{grid-template-columns:repeat(4, minmax(0, 1fr)); margin:0}
.home-about .about-card{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:var(--space-7); align-items:center; padding:var(--space-6) var(--space-7)}
.home-about .about-intro{border-bottom:0; padding:0}
@media (max-width:1000px){ .home-about .home-miles{grid-template-columns:repeat(2, minmax(0, 1fr))} }
@media (max-width:760px){ .home-about .about-card{grid-template-columns:minmax(0, 1fr); gap:var(--space-4); padding:var(--space-5)} .home-about .about-intro{padding-bottom:var(--space-4); border-bottom:1px solid var(--hair)} }
@media (max-width:900px){ .home-about{grid-template-columns:minmax(0, 1fr)} }

/* Career: four certificates up front, each its PDF's first page on the desk; every other one in a list that opens */
.certs-hl{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--space-3); margin-top:var(--space-6)}
@media (max-width:1000px){ .certs-hl{grid-template-columns:repeat(2, minmax(0, 1fr))} }
@media (max-width:520px){ .certs-hl{grid-template-columns:minmax(0, 1fr)} }
.cert-hl{display:flex; flex-direction:column; padding:var(--space-3) var(--space-3) var(--space-5); border-radius:var(--radius-tile); background:var(--card)}
.cert-well{position:relative; display:grid; place-items:center; aspect-ratio:4 / 3; border-radius:18px; background:var(--fill); overflow:hidden; margin-bottom:var(--space-4)}
.cert-paper{position:relative; width:78%; aspect-ratio:297 / 210; border-radius:3px; background:#fbfaf6; transform:rotate(var(--tilt)); box-shadow:0 18px 30px -14px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.05); transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.cert-paper img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit}
.cert-hl:hover .cert-paper{transform:rotate(calc(var(--tilt) * .2)) translateY(-6px) scale(1.04)}
.cp-rule{position:absolute; inset:7%; border:1px solid rgba(0,0,0,.12); border-radius:2px; box-shadow:inset 0 0 0 3px #fbfaf6, inset 0 0 0 4px rgba(0,0,0,.07)}
.cp-line{position:absolute; left:50%; height:4%; border-radius:2px; background:rgba(0,0,0,.14); transform:translateX(-50%)}
.cp-line.w60{top:24%; width:30%; height:3%}
.cp-line.big{top:38%; width:56%; height:7%; background:rgba(0,0,0,.24)}
.cp-line.w45{top:54%; width:44%}
.cp-seal{position:absolute; right:14%; bottom:15%; width:15%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--seal) 85%, #fff) 0 45%, var(--seal) 46% 62%, color-mix(in srgb, var(--seal) 70%, #fff) 63%); opacity:.9}
.cp-sign{position:absolute; left:16%; bottom:19%; width:24%; height:2%; border-radius:1px; background:rgba(0,0,0,.18)}
.cert-pdf{position:absolute; left:10px; top:10px; display:inline-flex; align-items:center; gap:4px; padding:3px 8px 3px 5px; border-radius:var(--radius-pill); background:color-mix(in srgb, var(--card) 85%, transparent); font-size:11px; font-weight:700; letter-spacing:.02em; color:var(--ink-mid)}
.cert-pdf svg, .cert-file svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round}
.cert-hl h3{margin:0 var(--space-3); font-size:17px; font-weight:600; line-height:22px}
.cert-hl p{margin:2px var(--space-3) 0; font-size:13px; line-height:18px; color:var(--ink-mid)}
.cert-view{margin:auto var(--space-3) 0; padding-top:var(--space-3); font-size:15px}
.cert-more{margin-top:var(--space-3); border-radius:var(--radius-tile); background:var(--card); overflow:hidden}
.cert-more summary{display:flex; align-items:center; gap:var(--space-3); padding:var(--space-5) var(--space-6); cursor:pointer; list-style:none; font-size:17px; font-weight:600}
.cert-more summary::-webkit-details-marker{display:none}
.cert-count{padding:2px 9px; border-radius:var(--radius-pill); background:var(--fill); font-size:13px; font-weight:600; color:var(--ink-mid); font-variant-numeric:tabular-nums}
.cert-chev{width:12px; height:8px; margin-left:auto; fill:none; stroke:var(--ink-mid); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .35s var(--rise)}
.cert-more[open] .cert-chev{transform:rotate(180deg)}
.cert-list{padding:0 var(--space-6) var(--space-3)}
.cert-row{display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr) 8.5rem 28px; gap:var(--space-4); align-items:center; padding:13px 0; border-top:1px solid var(--hair); font-size:15px; line-height:20px}
.cert-row span{color:var(--ink-mid); font-size:13px}
.cert-row b{font-weight:600}
.cert-row.is-todo b, .cert-row.is-todo span{color:var(--ink-mid); font-weight:500}
.cert-file{display:grid; place-items:center; width:28px; height:28px; border-radius:8px; color:var(--accent); background:var(--fill)}
@media (max-width:640px){ .cert-row{grid-template-columns:minmax(0, 1fr) 28px} .cert-row span{grid-column:1} .cert-row .cert-file{grid-column:2; grid-row:1 / span 3} }

/* Career's way to How I work, which lives on About me */
.how-link{display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:var(--space-5); align-items:center; padding:var(--space-5) var(--space-6); border-radius:var(--radius-tile); background:var(--night); color:var(--on-night); text-decoration:none; position:relative; overflow:hidden; isolation:isolate; transition:transform .4s var(--ease)}
.how-link::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 140% at 100% 100%, rgba(255,106,26,.45), transparent 70%), radial-gradient(circle, rgba(255,255,255,.12) 1px, transparent 1.6px) 0 0 / 18px 18px}
.how-link:hover{transform:translateY(-2px)}
.how-link-k{font-size:13px; font-weight:600; color:var(--on-night-mid)}
.how-link b{font-size:clamp(20px, 2.2vw, 26px); font-weight:700; letter-spacing:-.015em}
.how-link-go{display:inline-flex; align-items:center; gap:.3em; font-size:15px; color:var(--accent-sky); white-space:nowrap}
.how-link-go svg{width:.5em; height:.85em; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
@media (max-width:640px){ .how-link{grid-template-columns:minmax(0, 1fr)} }

/* Career: skills, each tied to where it was shown. Pick one and its evidence comes up: roles, projects, apps, certificates, case studies */
.sk{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr); gap:var(--space-3); margin-top:var(--space-6); align-items:start}
@media (max-width:900px){ .sk{grid-template-columns:minmax(0, 1fr)} }
.sk-groups{display:grid; gap:var(--space-3)}
.sk-group{padding:var(--space-5) var(--space-6) var(--space-6); border-radius:var(--radius-tile); background:var(--card)}
.sk-group h3{display:flex; align-items:center; gap:8px; margin:0 0 var(--space-4); font-size:13px; font-weight:600; color:var(--ink-mid)}
.sk-group h3 svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.sk-chips{display:flex; flex-wrap:wrap; gap:8px}
.sk-chip{appearance:none; border:0; margin:0; cursor:pointer; display:inline-flex; align-items:center; gap:8px; padding:8px 8px 8px 14px; border-radius:var(--radius-pill); background:var(--fill); font:inherit; font-size:15px; font-weight:600; line-height:20px; color:var(--ink); transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease)}
.sk-chip:hover{transform:translateY(-1px)}
.sk-chip i{min-width:22px; height:22px; padding:0 7px; display:grid; place-items:center; border-radius:var(--radius-pill); background:var(--card); font-style:normal; font-size:12px; font-weight:700; color:var(--ink-mid); font-variant-numeric:tabular-nums}
.sk-chip[aria-selected="true"]{background:var(--ink); color:var(--paper)}
.sk-chip[aria-selected="true"] i{background:var(--accent-fill); color:var(--on-accent)}
.sk-chip.is-empty{color:var(--ink-mid); font-weight:500; padding-right:14px}
.sk-chip.is-empty i{display:none}
.sk-panel{position:sticky; top:calc(var(--layout-nav-h) + 20px); padding:var(--space-6); border-radius:var(--radius-tile); background:var(--night); color:var(--on-night); overflow:hidden; isolation:isolate; min-height:420px}
.sk-panel::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 50% at 100% 0%, rgba(255,106,26,.4), transparent 70%), radial-gradient(circle, rgba(255,255,255,.1) 1px, transparent 1.6px) 0 0 / 20px 20px; -webkit-mask-image:linear-gradient(#000, transparent 70%); mask-image:linear-gradient(#000, transparent 70%)}
.sk-head{display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap}
.sk-head small{font-size:13px; font-weight:600; color:var(--on-night-mid)}
.sk-name{margin:4px 0 0; font-size:clamp(30px, 3.4vw, 40px); font-weight:700; line-height:1.05; letter-spacing:-.02em}
.sk-count{font-size:15px; color:var(--accent-sky); font-weight:600; white-space:nowrap}
.sk-ev{list-style:none; margin:var(--space-5) 0 0; padding:0; display:grid; gap:6px}
.sk-ev li{animation:skIn .45s var(--rise) both}
@keyframes skIn{from{opacity:0; transform:translateY(8px)}}
.sk-ev a{display:grid; grid-template-columns:40px minmax(0, 1fr) 10px; gap:14px; align-items:center; padding:10px 14px 10px 10px; border-radius:16px; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px var(--night-hair); color:var(--on-night); text-decoration:none; transition:background .2s var(--ease)}
.sk-ev a:hover{background:rgba(255,255,255,.11)}
.sk-ev .org-mark, .sk-ev .ev-ic{width:40px; height:40px; border-radius:11px}
.ev-ic{display:grid; place-items:center; overflow:hidden; background:#121110; color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.ev-ic img{width:100%; height:100%; object-fit:cover}
.ev-ic svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.ev-ic.glyph{width:40px; height:40px; font-size:12px}
.ev-t{display:block; font-size:15px; font-weight:600; line-height:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ev-s{display:block; margin-top:1px; font-size:13px; line-height:18px; color:var(--on-night-mid)}
.ev-s b{font-weight:600; color:var(--on-night)}
.sk-ev .chev{width:8px; height:13px; color:var(--on-night-mid)}
.sk-none{margin:var(--space-5) 0 0; padding:var(--space-5); border-radius:16px; border:1.5px dashed var(--night-hair); font-size:15px; line-height:21px; color:var(--on-night-mid)}
/* a skill wherever it's shown: on a role, on a project. Each goes to its evidence */
.tags a.skill-tag{display:block; margin:-4px -10px; padding:4px 10px; border-radius:inherit; color:inherit; text-decoration:none}
.tags li:has(a.skill-tag){transition:background .2s var(--ease)}
.tags li:has(a.skill-tag):hover{background:color-mix(in srgb, var(--accent-fill) 18%, var(--fill))}
.proj-skills{display:flex; flex-wrap:wrap; gap:5px; margin-top:var(--space-3)}
.proj-skills a{padding:3px 9px; border-radius:var(--radius-pill); background:var(--fill); font-size:12px; font-weight:600; color:var(--ink); text-decoration:none}
.proj-skills a:hover{background:color-mix(in srgb, var(--accent-fill) 18%, var(--fill))}
.sk-flash{animation:skFlash 1.2s var(--ease)}
@keyframes skFlash{0%,100%{box-shadow:none} 30%{box-shadow:0 0 0 4px color-mix(in srgb, var(--accent-fill) 45%, transparent)}}

/* Projects: a bento of cards, each in the colour of where it came from (red for work, violet for education, blue for the side), signed with that place's logo */
.pbento{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); grid-auto-rows:minmax(260px, auto); gap:var(--space-3); margin-top:var(--space-6)}
.pcard{--k:var(--lane3); position:relative; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; gap:6px; min-width:0; padding:var(--space-5); border-radius:var(--radius-tile); color:#fff; text-decoration:none;
  background:radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--k) 62%, transparent), transparent 72%), radial-gradient(70% 70% at 0% 100%, color-mix(in srgb, var(--k) 34%, transparent), transparent 70%), color-mix(in srgb, var(--k) 30%, #09090b);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); transition:transform .45s var(--rise), box-shadow .45s var(--ease)}
.pcard::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(circle, rgba(255,255,255,.14) 1px, transparent 1.6px) 0 0 / 18px 18px; -webkit-mask-image:radial-gradient(80% 70% at 100% 0%, #000, transparent 75%); mask-image:radial-gradient(80% 70% at 100% 0%, #000, transparent 75%)}
a.pcard:hover, div.pcard:hover{transform:translateY(-4px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), 0 28px 50px -26px color-mix(in srgb, var(--k) 80%, transparent)}
.pcard .glyph{--c:transparent; --n:transparent; width:52px; height:52px; border-radius:15px; margin-bottom:var(--space-4); background:rgba(255,255,255,.14); box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); transition:transform .5s var(--rise)}
.pcard:hover .glyph{transform:rotate(-6deg) scale(1.06)}
.pcard .glyph svg{width:26px; height:26px}
.pc-kicker{font-size:12px; font-weight:700; letter-spacing:.01em; color:color-mix(in srgb, var(--k) 35%, #fff)}
.pcard h3{margin:0; font-size:20px; font-weight:700; line-height:25px; letter-spacing:-.01em; color:#fff}
.pcard p{margin:0; font-size:15px; line-height:21px; color:rgba(255,255,255,.74); text-wrap:pretty}
.pc-skills{display:flex; flex-wrap:wrap; gap:5px; margin-top:var(--space-3)}
.pc-skills:empty{display:none}
.pc-skills a{padding:3px 9px; border-radius:var(--radius-pill); background:rgba(255,255,255,.13); font-size:12px; font-weight:600; color:#fff; text-decoration:none; transition:background .2s var(--ease)}
.pc-skills a:hover{background:rgba(255,255,255,.24)}
.pc-from, .tile-from{display:grid; grid-template-columns:30px minmax(0, 1fr) auto; gap:10px; align-items:center; margin-top:auto; padding-top:var(--space-4); border-top:1px solid rgba(255,255,255,.12)}
.pc-skills + .pc-from, .pc-phone + .pc-from{margin-top:auto}
.pcard > p + .pc-skills:empty + .pc-from{margin-top:auto}
.pc-from .org-mark, .tile-from .org-mark{width:30px; height:30px; border-radius:8px}
.pc-from .org-apps, .tile-from .org-apps{padding:3px; gap:2px}
.pc-from small, .tile-from small{display:block; font-size:11px; line-height:13px; color:rgba(255,255,255,.6)}
.pc-from b, .tile-from b{display:block; font-size:13px; font-weight:600; line-height:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pc-go{font-size:13px; font-weight:600; color:color-mix(in srgb, var(--k) 30%, #fff); white-space:nowrap}
.pc-wide{grid-column:span 2}
.pc-cta{display:inline-flex; align-items:center; gap:.3em; margin-top:var(--space-3); font-size:15px; font-weight:600; color:color-mix(in srgb, var(--k) 30%, #fff)}
.pc-cta svg{width:.5em; height:.85em; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.pcard .glyph[style]{font-size:15px!important}
.pcard .glyph[lang="ko"]{font-size:19px!important}
.pc-case{grid-column:span 2; grid-row:span 2; padding:var(--space-6)}
.pc-case h3{max-width:13ch; font-size:clamp(28px, 3vw, 38px); line-height:1.08; letter-spacing:-.02em}
.pc-case p, .pc-case .pc-skills, .pc-case .pc-kicker{max-width:52%}
.pc-icon{width:60px; height:60px; border-radius:var(--radius-icon); box-shadow:0 12px 28px rgba(0,0,0,.4); margin-bottom:var(--space-4)}
.pc-phone{position:absolute; z-index:-1; right:6%; bottom:-34%; width:36%; transform:rotate(6deg); transition:transform .6s var(--rise)}
.pc-case:hover .pc-phone{transform:rotate(3deg) translateY(-14px)}
.pc-case .pc-from{position:relative; background:linear-gradient(transparent, rgba(0,0,0,.35)); margin:auto calc(var(--space-6) * -1) calc(var(--space-6) * -1); padding:var(--space-4) var(--space-6) var(--space-5)}
.pcard.is-out, .mile.is-out{display:none}
#apps-eyebrow, #apps-head, #apps-lede{transition:opacity .26s var(--ease), transform .4s var(--rise)}
#apps-eyebrow.is-out, #apps-head.is-out, #apps-lede.is-out{opacity:0; transform:translateY(8px)}
.mile.is-in{animation:pcIn .5s var(--rise) both}
.pcard.is-in{animation:pcIn .5s var(--rise) both}
@keyframes pcIn{from{opacity:0; transform:translateY(14px) scale(.98)}}
@media (max-width:1000px){ .pbento{grid-template-columns:repeat(2, minmax(0, 1fr))} .pc-case{grid-row:auto; min-height:420px} }
@media (max-width:600px){ .pbento{grid-template-columns:minmax(0, 1fr)} .pc-wide, .pc-case{grid-column:auto} .pc-case p, .pc-case .pc-skills, .pc-case .pc-kicker{max-width:62%} .pc-phone{width:42%; right:-4%} }
.kinds-sm{flex:none!important; width:auto; margin-left:auto; align-self:flex-end}
.kinds-sm button{padding:8px 15px; font-size:15px; gap:7px}
.kinds-sm button svg{width:17px; height:17px}
/* the apps' tiles sign where they came from the same way */
.tile-from{margin-top:var(--space-3); max-width:280px; padding-top:var(--space-3); grid-template-columns:30px minmax(0, 1fr)}
/* Home's glance at Projects uses the same cards */
.home-projects .pcard{grid-column:auto; grid-row:auto}
.home-projects .pc-case{grid-row:1 / span 2}
.home-projects .pc-case p, .home-projects .pc-case .pc-skills{max-width:60%}
@media (max-width:1000px){ .home-projects .pc-case{grid-column:1 / -1; grid-row:auto} }

/* Skills as a browser: search, a group filter, and one list ranked by how often each skill is shown, so a hundred stay easy to find */
.sk-browser{display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-4); border-radius:var(--radius-tile); background:var(--card); min-width:0}
.sk-search{--mk-field-bg:var(--fill); --mk-field-fg:var(--ink); --mk-field-muted:var(--ink-mid); --mk-field-line:transparent; --mk-field-line-hover:transparent; --mk-field-line-width:2px;
  --mk-field-focus:var(--accent); --mk-field-halo:transparent; --mk-field-height:46px; --mk-field-pad-x:14px; --mk-field-size:17px; --mk-search-radius:14px}
.sk-search svg{fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round}
.sk-search kbd{font:inherit; font-size:12px; font-weight:600; padding:1px 7px; border-radius:6px; box-shadow:inset 0 0 0 1px var(--hair); color:var(--ink-mid)}
.sk-filter{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px}
.sk-filter::-webkit-scrollbar{display:none}
.sk-filter button{flex:none; display:inline-flex; align-items:center; gap:6px; appearance:none; border:0; cursor:pointer; padding:6px 8px 6px 11px; border-radius:var(--radius-pill); background:transparent; box-shadow:inset 0 0 0 1px var(--hair); font:inherit; font-size:13px; font-weight:600; color:var(--ink-mid); transition:background .2s var(--ease), color .2s var(--ease)}
.sk-filter button svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.sk-filter button i{font-style:normal; padding:0 6px; border-radius:var(--radius-pill); background:var(--fill); font-size:11px; line-height:18px; font-variant-numeric:tabular-nums}
.sk-filter button[aria-pressed="true"]{background:var(--ink); color:var(--paper); box-shadow:none}
.sk-filter button[aria-pressed="true"] i{background:rgba(255,255,255,.2); color:var(--paper)}
.sk-list{max-height:min(520px, 62vh); overflow-y:auto; overscroll-behavior:contain; margin:0 -6px; padding:2px 6px; outline:0; scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(transparent, #000 10px, #000 calc(100% - 22px), transparent); mask-image:linear-gradient(transparent, #000 10px, #000 calc(100% - 22px), transparent)}
.sk-row{display:grid; grid-template-columns:28px minmax(0, 1fr) auto 26px; gap:12px; align-items:center; width:100%; appearance:none; border:0; margin:0; cursor:pointer; padding:9px 10px; border-radius:12px; background:transparent; font:inherit; text-align:left; color:var(--ink); transition:background .15s var(--ease)}
.sk-row:hover{background:var(--fill)}
.sk-row[aria-selected="true"]{background:var(--ink); color:var(--paper)}
.sk-row-g{display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:var(--fill); color:var(--ink-mid)}
.sk-row[aria-selected="true"] .sk-row-g{background:rgba(255,255,255,.14); color:var(--paper)}
.sk-row-g svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.sk-row-n{font-size:15px; font-weight:600; line-height:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sk-row-n mark{background:color-mix(in srgb, var(--accent-fill) 35%, transparent); color:inherit; border-radius:3px}
.sk-meter{display:flex; gap:3px}
.sk-meter i{width:6px; height:14px; border-radius:2px; background:var(--fill)}
.sk-meter i.on{background:var(--accent-fill)}
.sk-row[aria-selected="true"] .sk-meter i{background:rgba(255,255,255,.18)}
.sk-row[aria-selected="true"] .sk-meter i.on{background:var(--accent-fill)}
.sk-row-c{font-size:13px; font-weight:700; text-align:right; color:var(--ink-mid); font-variant-numeric:tabular-nums}
.sk-row[aria-selected="true"] .sk-row-c{color:var(--paper)}
.sk-row.is-empty .sk-row-n{color:var(--ink-mid); font-weight:500}
.sk-row.is-empty[aria-selected="true"] .sk-row-n{color:var(--paper)}
.sk-nothing{margin:var(--space-5) var(--space-3); color:var(--ink-mid); font-size:15px}
.sk-sum{margin:0 6px; font-size:12px; color:var(--ink-mid)}
.sk{grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr)}

/* the timeline's cards: each the shape of what it is, not one shape for all */
.pop-doc{aspect-ratio:210 / 297; max-width:188px; border-radius:6px; justify-content:center; padding-top:46px}
.pop-doc .pop-big{font-size:46px}
.pop-doc::before{content:""; position:absolute; left:16%; right:16%; top:12%; height:6px; border-radius:3px; background:color-mix(in srgb, var(--ink) 12%, transparent); box-shadow:0 14px 0 -1px color-mix(in srgb, var(--ink) 8%, transparent)}
.pop-doc::after{content:""; position:absolute; left:16%; right:16%; bottom:12%; height:40px; background:repeating-linear-gradient(transparent 0 8px, color-mix(in srgb, var(--ink) 8%, transparent) 8px 10px)}
.pop-cert{aspect-ratio:297 / 210; max-width:272px; border-radius:4px; box-shadow:0 26px 50px -18px rgba(0,0,0,.35), 0 10px 20px -10px rgba(0,0,0,.18), inset 0 0 0 1px var(--hair), inset 0 0 0 9px var(--card), inset 0 0 0 10px color-mix(in srgb, var(--ink) 14%, transparent)}
.pop-cert::after{content:""; position:absolute; right:12%; bottom:14%; width:34px; height:34px; border-radius:50%; background:radial-gradient(circle, #f0b43c 0 40%, #c98a0a 41% 62%, #f0b43c 63%); box-shadow:0 2px 6px rgba(0,0,0,.2)}
.pop-bizcard{aspect-ratio:85 / 55; max-width:250px; border-radius:10px; align-items:flex-start; justify-content:flex-end; text-align:left; padding:var(--space-4) var(--space-5)}
.pop-bizcard .pop-big{font-size:30px}
.pop-bizcard::before{content:""; position:absolute; left:var(--space-5); top:var(--space-4); width:30px; height:30px; border-radius:8px; background:var(--logo, none) center / cover; box-shadow:inset 0 0 0 1px var(--hair)}
.pop-badge{aspect-ratio:3 / 4.2; max-width:176px; border-radius:16px; padding:40px var(--space-4) 52px}
.pop-badge .pop-big{font-size:32px}
.pop-badge::before{content:""; position:absolute; left:50%; top:9%; width:38px; height:9px; margin-left:-19px; border-radius:5px; background:var(--paper); box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.pop-badge::after{content:""; position:absolute; left:0; right:0; bottom:0; height:22%; background:linear-gradient(90deg, var(--accent-fill), #ff3d5a)}
.pop-ticket{aspect-ratio:2.1 / 1; max-width:276px; border-radius:12px; padding:var(--space-4) 84px var(--space-4) var(--space-4); align-items:flex-start; text-align:left;
  -webkit-mask:radial-gradient(circle 11px at 72% 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 11px at 72% 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
  mask:radial-gradient(circle 11px at 72% 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 11px at 72% 100%, transparent 98%, #000) bottom / 100% 51% no-repeat}
.pop-ticket::after{content:"ADMIT ONE"; position:absolute; top:12%; bottom:12%; right:0; width:28%; display:grid; place-items:center; border-left:2px dashed rgba(255,255,255,.25); writing-mode:vertical-rl; font-size:10px; font-weight:700; letter-spacing:.2em; color:rgba(255,255,255,.55)}
.pop-ticket .pop-big{font-size:25px}
.pop-ticket .pop-flag{right:92px}
.pop-ticket .pop-small{font-size:12px; line-height:16px}
.pop-stamp{aspect-ratio:88 / 125; max-width:186px}
.pop-post{aspect-ratio:1; max-width:224px}
.pop-video{aspect-ratio:16 / 9; max-width:272px}
.pop-adobe{aspect-ratio:16 / 10.5; max-width:272px}
.pop-apps{aspect-ratio:9 / 17; max-width:150px; border-radius:30px; box-shadow:0 26px 50px -18px rgba(0,0,0,.5), inset 0 0 0 5px #2a2a2e, inset 0 0 0 6px rgba(255,255,255,.08)}
.pop-apps .pop-big{font-size:30px}
.pop-apps .pop-icons{display:grid; grid-template-columns:repeat(2, 32px); gap:9px}
.pop-apps .pop-icons img{width:32px; height:32px}
.gl-card .pop.pop-doc, .gl-card .pop.pop-stamp, .gl-card .pop.pop-badge{width:150px}
.gl-card .pop.pop-apps{width:122px}
.deck .pop.pop-doc, .deck .pop.pop-stamp{width:176px}
.deck .pop.pop-apps{width:132px}
.deck .pop.pop-adobe{width:250px}
/* Home's hero: who I am, what I'm doing now and where I've been, before any number */
.home-hero .hero-grid{grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); align-items:center}
.now-chip{display:inline-flex; align-items:center; gap:9px; margin:0 0 var(--space-5); padding:6px 14px 6px 10px; border-radius:var(--radius-pill); background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px var(--night-hair); font-size:13px; line-height:18px; color:var(--on-night-mid)}
.now-chip b{color:var(--on-night); font-weight:600; margin-right:4px}
.now-chip i{position:relative; width:8px; height:8px; border-radius:50%; background:#3ccf80}
.now-chip i::after{content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid #3ccf80; opacity:0; animation:ping 2.4s var(--ease) infinite}
.mk-btn--ghost{--btn-bg:rgba(255,255,255,.1); --btn-bg-hover:rgba(255,255,255,.18); --btn-fg:var(--on-night); box-shadow:inset 0 0 0 1px var(--night-hair); font-weight:600}
.mk-btn .dl{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.me{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-3)}
.me-now, .me-card{position:relative; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; gap:var(--space-4); padding:var(--space-5); border-radius:24px; text-decoration:none; transition:transform .4s var(--rise), box-shadow .4s var(--ease)}
.me-now{grid-column:1 / -1; color:var(--on-night); background:radial-gradient(90% 120% at 100% 0%, rgba(255,106,26,.5), transparent 65%), #141110; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), 0 30px 60px -30px rgba(0,0,0,.8)}
.me-now::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle, rgba(255,255,255,.12) 1px, transparent 1.6px) 0 0 / 18px 18px; -webkit-mask-image:radial-gradient(70% 90% at 100% 0%, #000, transparent 75%); mask-image:radial-gradient(70% 90% at 100% 0%, #000, transparent 75%)}
.me-card{background:#fff; color:#1d1d1f; box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.me-card:hover{transform:translateY(-4px)}
.me-head{display:grid; grid-template-columns:auto minmax(0, 1fr); gap:14px; align-items:center}
.me-head small{display:block; font-size:12px; font-weight:600; line-height:16px; opacity:.62}
.me-head b{display:block; font-size:19px; font-weight:700; line-height:24px; letter-spacing:-.01em}
.me-head div > span{display:block; font-size:13px; line-height:18px; opacity:.68}
.me-now .me-head b{font-size:22px; line-height:27px}
.me-photo{display:grid; place-items:center; width:64px; height:64px; border-radius:50%; color:#fff; font-size:22px; font-weight:700; letter-spacing:-.02em; background:radial-gradient(70% 60% at 70% 90%, rgba(255,106,26,.6), transparent 70%), #2a221d; box-shadow:0 0 0 3px #141110, 0 0 0 4px rgba(255,255,255,.18)}
.me-photo svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linejoin:round}
.me-apps{list-style:none; margin:0; padding:var(--space-4) 0 0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--space-3); border-top:1px solid rgba(255,255,255,.12)}
.me-apps li{display:grid; justify-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--on-night-mid); text-align:center}
.me-apps img{width:48px; height:48px; border-radius:var(--radius-icon); box-shadow:0 10px 22px rgba(0,0,0,.45)}
.me-card .org-mark{width:44px; height:44px}
.me-wins{list-style:none; margin:auto 0 0; padding:var(--space-3) 0 0; display:grid; gap:6px; border-top:1px solid rgba(0,0,0,.08)}
.me-wins li{display:grid; grid-template-columns:4.3em minmax(0, 1fr); align-items:baseline; gap:4px; font-size:13px; line-height:18px; color:#6e6e73}
.me-wins b{--stat:#15803d; font-size:15px; font-weight:700; color:#1d1d1f; font-variant-numeric:tabular-nums}
@media (max-width:860px){ .home-hero .hero-grid{grid-template-columns:minmax(0, 1fr)} }
@media (max-width:480px){ .me{grid-template-columns:minmax(0, 1fr)} .me-apps img{width:40px; height:40px} }
/* the names a recruiter knows, as their logos */
.logo-strip{margin-top:clamp(48px, 7vw, 88px); padding-top:var(--space-5); border-top:1px solid var(--night-hair)}
.ls-k{margin:0 0 var(--space-4); font-size:13px; font-weight:600; color:var(--on-night-mid)}
.logo-strip ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:var(--space-4)}
.logo-strip li{display:grid; grid-template-columns:40px minmax(0, 1fr); gap:12px; align-items:center; min-width:0}
.logo-strip .org-mark{width:40px; height:40px; border-radius:11px}
.logo-strip b{display:block; font-size:14px; font-weight:600; line-height:18px; color:var(--on-night)}
.logo-strip small{display:block; font-size:12px; line-height:16px; color:var(--on-night-mid); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
@media (max-width:1000px){ .logo-strip ul{grid-template-columns:repeat(3, minmax(0, 1fr))} }
@media (max-width:560px){ .logo-strip ul{grid-template-columns:repeat(2, minmax(0, 1fr))} }
/* CV in the navbar */
/* Home ends on a band that asks */
.contact-band{position:relative; overflow:hidden; isolation:isolate; padding:clamp(32px, 5vw, 64px); border-radius:var(--radius-tile); background:#0b0a09; color:var(--on-night); align-items:center}
.contact-band::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 90% at 0% 100%, rgba(255,106,26,.45), transparent 70%), radial-gradient(circle, rgba(255,255,255,.12) 1px, transparent 1.6px) 0 0 / 22px 22px; -webkit-mask-image:linear-gradient(90deg, #000 30%, rgba(0,0,0,.4)); mask-image:linear-gradient(90deg, #000 30%, rgba(0,0,0,.4))}
.contact-band .mk-eyebrow, .contact-band .mk-lede{color:var(--on-night-mid)}
.contact-band .mk-headline{color:var(--on-night)}
.contact-band .mk-turn{color:var(--accent-sky)}
.contact-band .contact-card{background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px var(--night-hair); color:var(--on-night)}
.contact-band .contact-card .c-row{border-bottom-color:var(--night-hair)}
.contact-band .contact-card .c-row span{color:var(--on-night-mid)}
.contact-band .contact-card .c-row a{color:var(--accent-sky)}
.contact-band .copy{background:rgba(255,255,255,.12); color:var(--on-night)}

/* no photo needed: a monogram, and postcards from where I've lived */
.me-photo-lg{width:80px; height:80px; font-size:27px; box-shadow:0 0 0 3px var(--card), 0 0 0 4px var(--hair)}
.postcards{position:relative; height:400px; margin:0}
.postcard{position:absolute; left:50%; top:50%; width:270px; aspect-ratio:3 / 2; margin:-90px 0 0 -135px; padding:18px 20px; border-radius:8px; background:#f7f3ea; color:#1d1d1f; display:flex; flex-direction:column; justify-content:flex-start;
  transform:translate(var(--x), var(--y)) rotate(var(--r)); box-shadow:0 30px 60px -22px rgba(0,0,0,.75), inset 0 0 0 1px rgba(0,0,0,.06); animation:deal .9s var(--rise) both}
.postcard:nth-child(2){animation-delay:.12s} .postcard:nth-child(3){animation-delay:.24s}
.postcard small{font-size:12px; font-weight:600; letter-spacing:.04em; color:#6b665c}
.postcard b{font-size:36px; font-weight:800; line-height:1; letter-spacing:-.025em; color:var(--ink)}
.pc-when{margin-top:6px; font-size:12px; color:#6b665c}
.pc-stamp{position:absolute; right:16px; top:14px; width:46px; height:40px; padding:5px; background:#fff; display:grid; place-items:center; outline:1.5px dashed rgba(0,0,0,.22); outline-offset:-3px; box-shadow:0 1px 3px rgba(0,0,0,.18)}
.pc-stamp img{width:100%; height:auto; aspect-ratio:21 / 15; object-fit:cover}
.pc-mark{position:absolute; right:74px; bottom:18px; width:62px; height:62px; border-radius:50%; border:2px solid color-mix(in srgb, var(--ink) 55%, transparent); opacity:.55;
  background:repeating-linear-gradient(180deg, transparent 0 9px, color-mix(in srgb, var(--ink) 45%, transparent) 9px 11px) 70px 0 / 60px 100% no-repeat}
@media (max-width:860px){ .postcards{height:300px; transform:scale(.8)} }

/* ---------- Less box, more page (after Apple's own pages): words sit on the canvas, hairlines divide, the numbers are type, only pictures sit in wells ---------- */
/* Career's local bar */
.local-nav{position:fixed; z-index:45; top:calc(var(--layout-nav-h) + env(safe-area-inset-top, 0px)); left:0; right:0; margin:0; transform:translateY(-110%); opacity:0; pointer-events:none; transition:transform .45s var(--rise), opacity .3s var(--ease); background:color-mix(in srgb, var(--paper) 82%, transparent); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--hair)}
.local-nav.is-on{transform:none; opacity:1; pointer-events:auto}
.local-inner{max-width:var(--layout-maxw); margin:0 auto; height:52px; padding:0 var(--gutter-r) 0 var(--gutter); display:flex; align-items:center; gap:var(--space-6)}
.local-inner > b{font-size:19px; font-weight:700; letter-spacing:-.01em; margin-right:auto}
.local-links{display:flex; gap:22px}
.local-links button{appearance:none; border:0; background:none; padding:6px 0; cursor:pointer; font:inherit; font-size:13px; color:var(--ink-mid); border-bottom:1.5px solid transparent; transition:color .2s var(--ease), border-color .2s var(--ease)}
.local-links button:hover{color:var(--ink)}
.local-links button[aria-current="true"]{color:var(--ink); border-bottom-color:var(--ink)}
.local-nav .mk-btn .dl{width:14px; height:14px}
@media (max-width:640px){ .local-links{display:none} }
.tl-stage{top:max(calc(var(--layout-nav-h) + 76px), calc(var(--at) - 150px))}
/* How I work: a line to follow, not a box */
.how-link{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-2) var(--space-5); padding:var(--space-6) 0; border-radius:0; background:none; color:var(--ink); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair)}
.how-link::before{display:none}
.how-link:hover{transform:none}
.how-link-k{color:var(--ink-mid)}
.how-link b{font-size:clamp(24px, 3vw, 36px); letter-spacing:-.02em; transition:color .2s var(--ease)}
.how-link:hover b{color:var(--accent)}
.how-link-go{color:var(--accent); margin-left:auto}
/* Skills: the browser and its evidence on the page itself */
.sk{grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr); gap:var(--space-8)}
.sk-browser{padding:0; background:none; border-radius:0}
.sk-list{-webkit-mask-image:none; mask-image:none}
.sk-list.is-scroll{-webkit-mask-image:linear-gradient(#000 calc(100% - 28px), transparent); mask-image:linear-gradient(#000 calc(100% - 28px), transparent)}
.sk-row[aria-selected="true"]{background:color-mix(in srgb, var(--accent-fill) 13%, transparent); color:var(--ink)}
.sk-row[aria-selected="true"] .sk-row-n{color:var(--accent)}
.sk-row[aria-selected="true"] .sk-row-g{background:var(--accent-fill); color:var(--on-accent)}
.sk-row[aria-selected="true"] .sk-meter i{background:var(--fill)}
.sk-row[aria-selected="true"] .sk-row-c{color:var(--accent)}
.sk-row.is-empty[aria-selected="true"] .sk-row-n{color:var(--ink-mid)}
.sk-panel{top:calc(var(--layout-nav-h) + 76px); padding:0; min-height:0; border-radius:0; background:none; color:var(--ink); overflow:visible}
.sk-panel::before{display:none}
.sk-head small{color:var(--ink-mid)}
.sk-name{font-size:clamp(40px, 4.6vw, 64px); letter-spacing:-.03em; color:var(--ink)}
.sk-count{color:var(--accent)}
.sk-ev{gap:0; margin-top:var(--space-5); border-top:1px solid var(--hair)}
.sk-ev a{background:none; box-shadow:none; border-radius:0; padding:14px 4px; border-bottom:1px solid var(--hair); color:var(--ink)}
.sk-ev a:hover{background:none}
.sk-ev a:hover .ev-t{color:var(--accent)}
.ev-s{color:var(--ink-mid)} .ev-s b{color:var(--ink)}
.sk-ev .chev{color:var(--ink-mid)}
.sk-none{border-color:var(--hair); color:var(--ink-mid)}
.sk-flash{animation:none}
/* the quick facts and the detail panels: a list on the page */
.about-card{padding:0; border-radius:0; background:none; box-shadow:none}
.home-about .about-card{padding:0}
.about-facts{border-top:1px solid var(--hair)}
.about-facts li:last-child{border-bottom:1px solid var(--hair)}
.gl-detail{padding:var(--space-2) var(--space-7) 0 0; border-radius:0; background:none; box-shadow:none; border-right:1px solid var(--hair)}
/* sections arrive once, rising a little, as they come into view */
.js-reveal .reveal{opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform 1s var(--rise)}
.js-reveal .reveal.is-shown{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .js-reveal .reveal{opacity:1; transform:none; transition:none} }

/* Projects' search, beside the kinds */
.pr-tools{display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:var(--space-3); flex:none!important; margin-left:auto; align-self:flex-end}
.pr-tools .kinds-sm{margin-left:0; align-self:auto}
.pr-search{width:min(240px, 100%); --mk-field-height:48px; --mk-search-radius:var(--radius-pill); --mk-field-bg:var(--card); --mk-field-line:var(--hair); --mk-field-line-width:1px}
@media (max-width:760px){ .pr-tools{flex:1 1 100%!important; min-width:0; justify-content:flex-start; margin-left:0} .pr-search{width:100%} .pr-tools .kinds-sm{max-width:100%} }
.pr-none{margin:var(--space-6) 0 0; padding:var(--space-6) 0; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); font-size:17px; color:var(--ink-mid)}
/* About: quick answers, a list that opens, on the page */
.qa-list{margin-top:var(--space-6); border-top:1px solid var(--hair)}
.qa{border-bottom:1px solid var(--hair)}
.qa summary{display:flex; align-items:center; justify-content:space-between; gap:var(--space-5); padding:var(--space-5) 0; cursor:pointer; list-style:none; font-size:clamp(19px, 2vw, 24px); font-weight:600; letter-spacing:-.01em}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover span{color:var(--accent)}
.qa-chev{flex:none; width:14px; height:9px; fill:none; stroke:var(--ink-mid); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .35s var(--rise)}
.qa[open] .qa-chev{transform:rotate(180deg)}
.qa p{margin:0 0 var(--space-5); max-width:62ch; font-size:19px; line-height:1.55; color:var(--ink-body); animation:skIn .4s var(--rise)}

/* ---------- The house heroes: ribbons of warm light, drifting, with a fine grain; Career's is the map of where I've been ---------- */
.house::before{display:none}
.house::after, .ms-hero::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity:.16; mix-blend-mode:overlay; -webkit-mask-image:none; mask-image:none}
.house .light{opacity:.32!important}
.ribbons{position:absolute; inset:0; width:100%; height:100%; z-index:-2; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.55) 38%, #000 68%); mask-image:linear-gradient(90deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.55) 38%, #000 68%)}
.ribbons path{fill:none; stroke-linecap:round}
.ribbons .rb{transform-box:view-box; transform-origin:50% 50%; animation:rbDrift 24s ease-in-out infinite alternate}
.ribbons .rb2{animation-duration:31s; animation-delay:-9s}
.ribbons .rb3{animation-duration:37s; animation-delay:-17s}
.ribbons .rb-line{opacity:.55; stroke-dasharray:2200; stroke-dashoffset:2200; animation:rbLine 3.2s var(--ease) .3s forwards, rbDrift 24s ease-in-out infinite alternate}
@keyframes rbDrift{from{transform:translate(-1.6%, 1.2%) rotate(-1.6deg)} to{transform:translate(1.6%, -1.2%) rotate(1.6deg)}}
@keyframes rbLine{to{stroke-dashoffset:0}}
.jmap{position:absolute; inset:0; width:100%; height:100%; z-index:-2; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,.35), #000 45%), linear-gradient(transparent, #000 18%, #000 80%, transparent); -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg, rgba(0,0,0,.35), #000 45%), linear-gradient(transparent, #000 18%, #000 80%, transparent); mask-composite:intersect}
@media (prefers-reduced-motion:reduce){ .ribbons .rb, .ribbons .rb-line{animation:none; stroke-dashoffset:0} }
/* Kind words: quotes on the page, a big mark, and who said it */
.says-row{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--space-7); margin-top:var(--space-7)}
@media (max-width:900px){ .says-row{grid-template-columns:minmax(0, 1fr); gap:var(--space-6)} }
.say{position:relative; margin:0; padding-top:var(--space-6); border-top:1px solid var(--hair); display:flex; flex-direction:column; gap:var(--space-5)}
.say::before{content:"\201C"; position:absolute; top:-6px; left:-4px; font-size:96px; line-height:1; font-weight:800; color:var(--accent-fill); opacity:.9}
.say blockquote{margin:var(--space-5) 0 0; font-size:clamp(19px, 1.9vw, 23px); line-height:1.4; letter-spacing:-.01em; font-weight:500; color:var(--ink)}
.say figcaption{display:grid; grid-template-columns:40px minmax(0, 1fr); gap:12px; align-items:center; margin-top:auto}
.say figcaption .org-mark{width:40px; height:40px; border-radius:11px}
.say figcaption b{display:block; font-size:15px; font-weight:600; line-height:20px}
.say figcaption small{display:block; font-size:13px; line-height:18px; color:var(--ink-mid)}
.say.is-todo blockquote, .say.is-todo figcaption b{color:var(--ink-mid); font-style:italic}
.say.is-todo::before{opacity:.35}
.say-todo{align-self:flex-start; padding:3px 10px; border-radius:var(--radius-pill); border:1.5px dashed var(--hair); font-size:12px; font-weight:600; color:var(--ink-mid)}
/* the contact band, with a form */
.contact-band{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:var(--space-8); align-items:start}
@media (max-width:900px){ .contact-band{grid-template-columns:minmax(0, 1fr); gap:var(--space-6)} }
.c-links{grid-column:1 / -1; list-style:none; margin:0; padding:var(--space-5) 0 0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--space-4) var(--space-6); border-top:1px solid var(--night-hair)}
@media (max-width:900px){ .c-links{grid-template-columns:repeat(2, minmax(0, 1fr))} }
@media (max-width:480px){ .c-links{grid-template-columns:minmax(0, 1fr)} }
.c-links li{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; min-width:0; font-size:15px}
.c-links li > span{width:100%; flex:none; font-size:12px; font-weight:600; color:var(--on-night-mid)}
.c-links a{color:var(--accent-sky); text-decoration:none; font-weight:600}
.c-links b{font-weight:600}
.c-links .copy{margin-left:0}
.cform{display:grid; gap:var(--space-4); padding:var(--space-6); border-radius:22px; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px var(--night-hair); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px)}
.cf-row{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-4)}
@media (max-width:520px){ .cf-row{grid-template-columns:minmax(0, 1fr)} }
.cf-field{display:grid; gap:6px}
.cf-field > span, .cf-about legend{font-size:13px; font-weight:600; color:var(--on-night-mid)}
.cform input:not([type="radio"]), .cform textarea{width:100%; box-sizing:border-box; padding:12px 14px; border:0; border-radius:12px; background:rgba(255,255,255,.09); box-shadow:inset 0 0 0 1px var(--night-hair); font:inherit; font-size:17px; color:var(--on-night); transition:box-shadow .2s var(--ease), background .2s var(--ease); resize:vertical}
.cform input:not([type="radio"]):focus, .cform textarea:focus{outline:0; background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 2px var(--accent-sky)}
.cform textarea::placeholder{color:rgba(255,255,255,.35)}
.cform .is-bad input, .cform .is-bad textarea{box-shadow:inset 0 0 0 2px #ff6b5e}
.cf-err{font-size:12px; color:#ff8a80}
.cf-about{border:0; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.cf-about legend{width:100%; margin-bottom:6px; padding:0}
.cf-about label{cursor:pointer}
.cf-about input{position:absolute; opacity:0; pointer-events:none}
.cf-about span{display:inline-block; padding:8px 14px; border-radius:var(--radius-pill); box-shadow:inset 0 0 0 1px var(--night-hair); font-size:15px; font-weight:600; color:var(--on-night-mid); transition:background .2s var(--ease), color .2s var(--ease)}
.cf-about input:checked + span{background:var(--accent-fill); color:var(--on-accent); box-shadow:none}
.cf-about input:focus-visible + span{outline:2px solid var(--accent-sky); outline-offset:2px}
.cf-foot{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-4)}
.cf-note{font-size:13px; color:var(--on-night-mid)}
.cf-done b{display:block; font-size:24px; font-weight:700; letter-spacing:-.01em; margin-bottom:6px}
.cf-done p{margin:0; color:var(--on-night-mid)}
.cform.is-sent > :not(.cf-done){display:none}
.cform.is-sent .cf-done{display:block; animation:skIn .5s var(--rise)}
.contact-band.is-clone{margin-top:calc(var(--space-9) + var(--space-6))}
/* Home's hero: a quiet night, the cards lit like a product on a stage */
.home-hero .light{opacity:.18!important}
.home-hero .me{position:relative}
.home-hero .me::before{content:""; position:absolute; z-index:-1; inset:-34% -26% -30%; pointer-events:none; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,106,26,.34), rgba(255,61,90,.12) 52%, transparent 78%); animation:breathe 9s ease-in-out infinite alternate}
.home-hero .me::after{content:""; position:absolute; z-index:-1; left:8%; right:8%; bottom:-46px; height:60px; pointer-events:none; border-radius:50%; background:radial-gradient(closest-side, rgba(255,140,80,.22), transparent); filter:blur(6px)}
@keyframes breathe{from{transform:scale(.96); opacity:.85} to{transform:scale(1.04); opacity:1}}
@media (prefers-reduced-motion:reduce){ .home-hero .me::before{animation:none} }
/* private projects: the teaser shows; the rest opens with the password */
button.pcard{appearance:none; border:0; font:inherit; text-align:left; cursor:pointer; width:100%}
.pc-lock{display:inline-flex; align-items:center; gap:4px; margin-right:6px; padding:2px 8px 2px 6px; border-radius:var(--radius-pill); background:rgba(255,255,255,.16); color:#fff}
.pc-lock svg, .pc-go svg{width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vertical-align:-1px}
.lockbox{width:min(460px, calc(100vw - 32px)); max-height:calc(100vh - 48px); padding:var(--space-6); border:0; border-radius:26px; background:#141110; color:var(--on-night); box-shadow:0 40px 90px -20px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.1)}
.lockbox::backdrop{background:rgba(0,0,0,.55); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.lockbox[open]{animation:pcIn .4s var(--rise)}
.lb-form{display:grid; gap:var(--space-4)}
.lb-ic{display:grid; place-items:center; width:52px; height:52px; border-radius:16px; background:linear-gradient(135deg, var(--accent-fill), #ff3d5a); color:#fff}
.lb-ic svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.lockbox h3{margin:0; font-size:26px; font-weight:700; letter-spacing:-.02em}
.lockbox p{margin:0; color:var(--on-night-mid); font-size:15px; line-height:21px}
.lockbox{--mk-field-bg:rgba(255,255,255,.09); --mk-field-fg:var(--on-night); --mk-field-muted:var(--on-night-mid); --mk-field-line:var(--night-hair); --mk-field-line-hover:rgba(255,255,255,.24);
  --mk-field-focus:var(--accent-sky); --mk-field-halo:transparent; --mk-field-pad-x:14px; --mk-field-size:17px}
.lockbox .cf-field > span{font-size:13px; font-weight:600; color:var(--on-night-mid)}
.lb-err{color:#ff8a80!important}
.lb-err a{color:var(--accent-sky)}
.lb-foot{display:flex; justify-content:flex-end; gap:var(--space-3)}
.lb-contact{display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding-top:var(--space-4); border-top:1px solid var(--night-hair); font-size:15px; color:var(--on-night-mid)}
.lb-demo{font-size:12px; color:var(--on-night-mid)}
.lb-form.is-shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)} 50%{transform:translateX(5px)} 75%{transform:translateX(-3px)}}
.lb-body{animation:skIn .5s var(--rise)}
.lb-body .lb-kicker{font-size:12px; font-weight:700; color:var(--accent-sky)}
.lb-body .lb-title{margin:6px 0 var(--space-3); font-size:28px}
.lb-body p{margin:0 0 var(--space-4)}
.lb-body h4{margin:var(--space-5) 0 6px; font-size:17px}
.lb-facts{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-3); margin:var(--space-4) 0}
.lb-facts div{padding-top:var(--space-3); border-top:1px solid var(--night-hair)}
.lb-facts b{display:block; font-size:34px; font-weight:700; letter-spacing:-.03em}
.lb-facts span{font-size:13px; color:var(--on-night-mid)}
.lb-x{position:absolute; top:14px; right:14px; width:32px; height:32px; border:0; border-radius:50%; background:rgba(255,255,255,.1); color:var(--on-night); cursor:pointer; display:grid; place-items:center}
.lb-x svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round}
/* About me: kind words in a carousel; a role's own on the timeline */
.kw .section-head{align-items:flex-end}
.kw-nav{display:flex; gap:10px; flex:none!important}
.kw-nav button{width:44px; height:44px; border:0; border-radius:50%; display:grid; place-items:center; background:var(--fill); color:var(--ink); cursor:pointer; transition:background .2s var(--ease), opacity .2s var(--ease)}
.kw-nav button:hover{background:color-mix(in srgb, var(--ink) 14%, transparent)}
.kw-nav button:disabled{opacity:.35; cursor:default}
.kw-nav svg{width:9px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.kw-track{display:grid; grid-auto-flow:column; grid-auto-columns:min(380px, 84vw); gap:16px; margin:var(--space-6) calc(var(--gutter) * -1) 0; padding:4px var(--gutter-r) var(--space-4) var(--gutter); overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 var(--gutter); scrollbar-width:none; outline:0}
.kw-track::-webkit-scrollbar{display:none}
@media (min-width:1164px){ .kw-track{margin-left:calc((100vw - var(--layout-maxw)) / -2); margin-right:calc((100vw - var(--layout-maxw)) / -2); padding-left:calc((100vw - var(--layout-maxw)) / 2); padding-right:calc((100vw - var(--layout-maxw)) / 2); scroll-padding:0 calc((100vw - var(--layout-maxw)) / 2)} }
.kw-all{margin-top:var(--space-4)}
.kw-card{position:relative; scroll-snap-align:start; margin:0; display:flex; flex-direction:column; gap:var(--space-4); min-height:300px; padding:var(--space-6); border-radius:var(--radius-tile); background:var(--card); box-shadow:inset 0 0 0 1px var(--hair)}
.kw-q{width:30px; height:22px; fill:var(--k, var(--accent-fill))}
.kw-card blockquote{margin:0; font-size:19px; line-height:1.42; letter-spacing:-.01em; font-weight:500; color:var(--ink)}
.kw-card figcaption{display:grid; grid-template-columns:40px minmax(0, 1fr); gap:12px; align-items:center; margin-top:auto}
.kw-card figcaption .org-mark{width:40px; height:40px; border-radius:11px}
.kw-card figcaption b{display:block; font-size:15px; font-weight:600; line-height:20px}
.kw-card figcaption small{display:block; font-size:13px; color:var(--ink-mid)}
.kw-from{display:inline-flex; align-items:center; gap:7px; align-self:flex-start; font-size:12px; font-weight:600; color:var(--ink-mid); text-decoration:none}
.kw-from i{width:8px; height:8px; border-radius:50%; background:var(--k)}
.kw-from:hover{color:var(--accent)}
.kw-card.is-todo blockquote, .kw-card.is-todo figcaption b{color:var(--ink-mid); font-style:italic}
.kw-card.is-todo .kw-q{opacity:.4}
.kw-card .say-todo{position:absolute; top:var(--space-5); right:var(--space-5)}
.kw-dots{display:flex; justify-content:center; gap:6px; margin-top:var(--space-2)}
.kw-dots i{width:7px; height:7px; border-radius:4px; background:color-mix(in srgb, var(--ink) 20%, transparent); transition:width .3s var(--ease), background .3s var(--ease)}
.kw-dots i.on{width:18px; background:var(--ink)}
.row-say{position:relative; margin:var(--space-4) 0 0; padding:var(--space-3) 0 0 var(--space-6); max-width:52ch; border-top:1px solid var(--hair)}
.row-say .kw-q{position:absolute; left:0; top:var(--space-3); width:20px; height:15px; fill:var(--c, var(--accent-fill))}
.row-say blockquote{margin:0; font-size:15px; line-height:22px; color:var(--ink-body)}
.row-say figcaption{margin-top:4px; font-size:13px; color:var(--ink-mid)}
.row-say figcaption a{color:var(--accent); text-decoration:none}
.row-say.is-todo blockquote{color:var(--ink-mid); font-style:italic}
.row-say.is-todo .kw-q{opacity:.45}
.row-say .say-todo{margin-left:6px; padding:1px 8px}
/* the detail sheet: a role, a project or a certificate, in full, with the way to its page */
.detail{width:min(640px, calc(100vw - 24px)); max-height:min(86vh, 860px); padding:0; border:0; border-radius:28px; background:var(--paper-hi); color:var(--ink); box-shadow:0 40px 100px -30px rgba(0,0,0,.6), inset 0 0 0 1px var(--hair); overflow:hidden}
.detail::backdrop{background:rgba(0,0,0,.45); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.detail[open]{animation:pcIn .45s var(--rise)}
.dt-body{max-height:min(86vh, 860px); overflow-y:auto; padding:var(--space-7) var(--space-7) var(--space-6)}
@media (max-width:560px){ .dt-body{padding:var(--space-6) var(--space-5) var(--space-5)} }
.dt-x{background:var(--fill)!important; color:var(--ink)!important}
.dt-head{display:grid; grid-template-columns:56px minmax(0, 1fr); gap:var(--space-4); align-items:center; margin-bottom:var(--space-4); padding-right:var(--space-6)}
.dt-head .org-mark{width:56px; height:56px; border-radius:15px}
.dt-head .glyph{width:56px; height:56px; border-radius:16px; background:color-mix(in srgb, var(--k) 30%, #09090b); color:#fff}
.dt-kicker{display:flex; align-items:center; gap:7px; margin:0; font-size:13px; font-weight:600; color:var(--ink-mid)}
.dt-kicker i{width:9px; height:9px; border-radius:50%; background:var(--k)}
.detail h3{margin:2px 0 0; font-size:28px; font-weight:700; line-height:1.15; letter-spacing:-.02em}
.dt-org{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:4px 0 0; font-size:15px; color:var(--ink-mid)}
.dt-org .row-place{display:inline-flex; align-items:center; gap:6px}
.detail .row-sum{font-size:17px; line-height:1.5}
.detail .row-wins{font-size:15px; line-height:22px}
.dt-facts{list-style:none; margin:var(--space-4) 0 0; padding:0; border-top:1px solid var(--hair)}
.dt-facts li{padding:9px 0; border-bottom:1px solid var(--hair); font-size:15px; color:var(--ink-mid)}
.dt-facts b{color:var(--ink)}
.dt-label{margin:var(--space-5) 0 var(--space-2); font-size:13px; font-weight:600; color:var(--ink-mid)}
.dt-from{display:grid; grid-template-columns:36px minmax(0, 1fr); gap:10px; align-items:center; margin-top:var(--space-5); padding-top:var(--space-4); border-top:1px solid var(--hair)}
.dt-from .org-mark{width:36px; height:36px; border-radius:10px}
.dt-from small{display:block; font-size:12px; color:var(--ink-mid)} .dt-from b{font-size:15px}
.dt-actions{display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-6)}
.mk-btn--soft{--btn-bg:var(--fill); --btn-bg-hover:color-mix(in srgb, var(--ink) 14%, transparent); --btn-fg:var(--ink); font-weight:600}
.dt-actions .mk-btn svg{width:.5em; height:.85em; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.dt-cert{display:grid; place-items:center; aspect-ratio:16 / 9; margin:0 0 var(--space-5); border-radius:18px; background:var(--fill)}
.dt-cert .cert-paper{width:62%}
.row.dt-flash .row-main{animation:dtFlash 1.6s var(--ease)}
@keyframes dtFlash{0%,100%{background:transparent} 25%{background:color-mix(in srgb, var(--accent-fill) 14%, transparent)}}
.row-main{border-radius:16px}
div.pcard, .logo-strip li[data-role]{cursor:pointer}
.logo-strip li[data-role]{border-radius:12px; transition:background .2s var(--ease)}
.logo-strip li[data-role]:hover{background:rgba(255,255,255,.06)}

/* ---------- Room to breathe: sections far apart, headings with space under them, the sheet roomier (bento gaps stay) ---------- */
:root{--section-gap:clamp(120px, 15vw, 210px); --head-gap:clamp(36px, 4.6vw, 64px)}
.sheet{padding-top:clamp(96px, 11vw, 150px); padding-bottom:clamp(110px, 12vw, 170px)}
.sheet > .wrap + .wrap, .sheet > .how-wrap, .contact-band.is-clone, .sheet > .wrap + .contact-band{margin-top:var(--section-gap)}
.sheet > section.wrap + .wrap.how-link{margin-top:var(--section-gap)}
.glance-body, .home-projects, .home-about, .doors, .pbento, .miles, .certs-hl, .sk, .kw-track, .qa-list, .about-more, .says-row, .how{margin-top:var(--head-gap)}
.pr-none{margin-top:var(--head-gap)}
.mk-headline--title{font-size:clamp(32px, 4.4vw, 54px)}
.section-head .mk-lede{margin-top:var(--space-5)}
.career-bar{margin-bottom:clamp(64px, 7vw, 104px)}
.story--hero{padding-bottom:calc(var(--space-7) + clamp(56px, 8vw, 104px))}
.mk-lede{max-width:36ch}
.timeline .row{padding-bottom:var(--space-8)}

/* statistics: still bullets; the figure stands out in the stat green */
.stat{font-weight:700; color:var(--stat); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.row-facts li.is-stat{display:none}
.pop-facts b, .me-wins b, .row-facts b, .gl-facts b, .dt-facts b{color:var(--stat)}

/* ---------- Contact rises as the page's last sheet, on the night, and runs on into the footer ---------- */
.contact-band{z-index:7; max-width:none; margin-left:calc(var(--gutter) * -1); margin-right:calc(var(--gutter-r) * -1); margin-bottom:calc(clamp(110px, 12vw, 170px) * -1);
  padding:clamp(64px, 8vw, 112px) max(var(--gutter-r), calc((100vw - var(--layout-maxw)) / 2)) clamp(56px, 6vw, 88px) max(var(--gutter), calc((100vw - var(--layout-maxw)) / 2));
  border-radius:var(--radius-sheet) var(--radius-sheet) 0 0; background:var(--night); box-shadow:0 -40px 90px rgba(0,0,0,.18)}
@media (max-width:900px){ .contact-band{border-radius:var(--radius-sheet-phone) var(--radius-sheet-phone) 0 0} }
.contact-band::before{background:radial-gradient(55% 85% at 0% 100%, rgba(255,106,26,.36), transparent 70%), radial-gradient(45% 60% at 100% 0%, rgba(255,61,90,.16), transparent 70%); -webkit-mask-image:none; mask-image:none}

/* Home's doors are portals: point at one and it opens across the row with a look inside; the others fold to spines */
.door-face{position:relative; display:flex; flex-direction:column; gap:var(--space-3); flex:1; min-height:0}
.door-spine, .door-more{display:none}
@media (hover:hover) and (min-width:1061px){
  .doors{display:flex; gap:var(--space-3); height:400px; container-type:inline-size}
  .door{flex:1 1 0; min-width:0; min-height:0; transition:flex-grow .75s var(--rise), transform .4s var(--ease)}
  .door:hover{transform:none}
  .door-face{flex:none; width:calc((100cqw - 3 * var(--space-3)) / 4 - 2 * var(--space-6)); height:100%; transition:opacity .3s var(--ease)}
  .doors.has-open .door{flex-grow:.5}
  .doors.has-open .door.is-open{flex-grow:4.2}
  .doors.has-open .door:not(.is-open) .door-face{opacity:0; transition-duration:.15s}
  .door-spine{display:block; position:absolute; left:var(--space-6); bottom:var(--space-6); writing-mode:vertical-rl; transform:rotate(180deg); font-size:24px; font-weight:700; letter-spacing:-.01em; line-height:1; color:var(--on-night); white-space:nowrap; opacity:0; transition:opacity .3s var(--ease)}
  .doors.has-open .door:not(.is-open) .door-spine{opacity:1; transition-delay:.18s}
  .door-more{display:flex; flex-direction:column; gap:var(--space-3); position:absolute; top:var(--space-6); bottom:var(--space-6); left:calc((100cqw - 3 * var(--space-3)) / 4 + var(--space-3)); width:calc((100cqw - 3 * var(--space-3) - 8 * var(--space-6)) * 4.2 / 5.7 + var(--space-6) - (100cqw - 3 * var(--space-3)) / 4 - var(--space-3)); padding-left:var(--space-6); border-left:1px solid var(--night-hair); opacity:0; transform:translateX(24px); transition:opacity .25s var(--ease), transform .25s var(--ease); pointer-events:none}
  .door.is-open .door-more{opacity:1; transform:none; transition:opacity .45s var(--ease) .28s, transform .6s var(--rise) .28s}
}
.more-k{font-size:13px; font-weight:600; color:var(--on-night-mid)}
.more-k + *{margin-bottom:var(--space-3)}
.more-flags{display:flex; flex-wrap:wrap; gap:8px}
.more-flags span{display:inline-flex; align-items:center; gap:7px; padding:6px 11px 6px 7px; border-radius:var(--radius-pill); background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px var(--night-hair); font-size:13px; font-weight:500; color:var(--on-night)}
.more-flags img{width:21px; height:15px; border-radius:3px}
.more-roles, .more-apps{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.more-roles li{display:grid; grid-template-columns:10px minmax(0, 1fr) auto; gap:12px; align-items:center; padding:9px 0; border-bottom:1px solid var(--night-hair); font-size:15px; color:var(--on-night)}
.more-roles li:last-child{border-bottom:0}
.more-roles i{width:10px; height:10px; border-radius:50%}
.more-roles b{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.more-roles span{font-size:13px; color:var(--on-night-mid); font-variant-numeric:tabular-nums}
.more-glyphs{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--space-4) var(--space-3)}
.more-glyphs span{display:grid; justify-items:start; gap:8px; font-size:13px; font-weight:500; line-height:17px; color:var(--on-night)}
.more-glyphs .glyph{width:56px; height:56px; border-radius:15px; font-size:15px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.more-glyphs .glyph svg{width:26px; height:26px}
.more-chip{margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:10px; padding:7px 14px 7px 7px; border-radius:var(--radius-pill); background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px var(--night-hair); font-size:13px; font-weight:600; color:var(--on-night)}
.more-chip img{width:26px; height:26px; border-radius:var(--radius-icon)}
.more-apps li{display:grid; grid-template-columns:44px minmax(0, 1fr); column-gap:14px; align-items:center; padding:7px 0}
.more-apps img{grid-row:1 / span 2; width:44px; height:44px; border-radius:var(--radius-icon); box-shadow:0 8px 18px rgba(0,0,0,.4)}
.more-apps b{font-size:15px; font-weight:600; line-height:19px; color:var(--on-night)}
.more-apps span{font-size:13px; line-height:17px; color:var(--on-night-mid)}
.more-stats{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-3)}
.more-stats div{padding:var(--space-4); border-radius:18px; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px var(--night-hair)}
.more-stats b{display:block; font-size:40px; font-weight:650; line-height:1; letter-spacing:-.03em; color:var(--on-night); font-variant-numeric:tabular-nums}
.more-stats b small{font-size:.4em; letter-spacing:0; color:var(--accent-sky); margin-left:.12em}
.more-stats b.w{color:var(--accent-sky)}
.more-stats span{display:block; margin-top:8px; font-size:13px; line-height:17px; color:var(--on-night-mid)}
@media (prefers-reduced-motion:reduce){ .door, .door-more, .door-face, .door-spine{transition:none!important} }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .kinds button:is([data-kind="study"], [data-kind="work"]){--on-k:#16110d} }
:root[data-theme="dark"] .kinds button:is([data-kind="study"], [data-kind="work"]){--on-k:#16110d}

/* ---------- The house: signal orange on the night, a fine dot grid, and a hero for each page in the look of what's on it ---------- */
.mk-nav-brand .dom{color:var(--accent-sky)}
.mk-nav.is-light .mk-nav-brand .dom{color:var(--accent)}
.mk-btn{font-weight:600}
.house::before{content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background-image:radial-gradient(circle, rgba(255,255,255,.15) 1px, transparent 1.6px); background-size:22px 22px; background-position:11px 11px;
  -webkit-mask-image:radial-gradient(85% 75% at 78% 30%, #000 10%, transparent 78%); mask-image:radial-gradient(85% 75% at 78% 30%, #000 10%, transparent 78%)}
.house .light{opacity:.9}
.house .mk-turn{color:var(--accent-sky)}
.hero-split{display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr); gap:var(--space-8); align-items:center}
.hero-split .mk-headline{font-size:clamp(40px, 5.8vw, 72px)}
@media (max-width:860px){ .hero-split{grid-template-columns:minmax(0, 1fr); gap:var(--space-7)} }

/* Home: an experiment running behind the headline. B pulls away from A, and the band of doubt narrows as the data comes in */
.exp-chart{position:absolute; left:0; top:0; width:100%; height:100%; z-index:-1; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, transparent 4%, rgba(0,0,0,.22) 34%, #000 62%); mask-image:linear-gradient(90deg, transparent 4%, rgba(0,0,0,.22) 34%, #000 62%)}
.exp-chart path{fill:none; vector-effect:non-scaling-stroke}
.exp-grid path{stroke:rgba(255,255,255,.07); stroke-width:1}
.exp-a{stroke:rgba(255,255,255,.34); stroke-width:1.5; stroke-dasharray:1; stroke-dashoffset:1}
.exp-b{stroke:var(--signal); stroke-width:2.5; stroke-dasharray:1; stroke-dashoffset:1}
.exp-band{fill:url(#exp-band-fill)!important; stroke:none; opacity:0}
.exp-a{animation:draw 2.6s var(--ease) .2s forwards}
.exp-b{animation:draw 2.6s var(--ease) .35s forwards}
.exp-band{animation:fade 1.6s var(--ease) 1.2s forwards}
.exp-key span{position:absolute; z-index:-1; right:14px; margin-top:-22px; font-size:12px; font-weight:700; color:var(--on-night-mid); opacity:0}
.exp-key .b{color:var(--signal)}
.exp-key span{animation:fade .6s var(--ease) 2.7s forwards}
@media (max-width:860px){ .exp-key{display:none} .exp-chart{opacity:.32} }
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}

/* Career: the cards you'll meet down the timeline, dealt out in a pile */
.deck{position:relative; height:420px}
.deck .pop{position:absolute; left:50%; top:50%; width:236px; max-width:none; margin:0; pointer-events:none;
  transform:translate(-50%, -50%) translate(calc(var(--x) * var(--k, 1)), calc(var(--y) * var(--k, 1))) rotate(var(--r)); box-shadow:0 30px 60px -18px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06);
  transition:none; animation:deal .9s var(--rise) var(--dl) both, bob var(--bd) ease-in-out var(--dl) infinite alternate}
@keyframes deal{from{opacity:0; scale:.8}}
@keyframes bob{from{translate:0 0} to{translate:0 -12px}}
@media (max-width:860px){ .deck{height:330px; --k:.62} .deck .pop{width:190px} .deck .pop.pop-apps{width:110px} .deck .pop.pop-doc, .deck .pop.pop-stamp{width:140px} }

/* Projects: a wall of the things themselves, drifting */
.projects-hero{min-height:min(640px, 80vh)}
.wall{position:absolute; z-index:-1; top:-80px; bottom:-120px; right:max(-40px, calc((100% - var(--layout-maxw)) / 2 - 60px)); width:min(520px, 46%); display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; transform:rotate(-8deg); pointer-events:none;
  -webkit-mask-image:linear-gradient(transparent, #000 22%, #000 70%, transparent), linear-gradient(90deg, transparent, #000 30%); -webkit-mask-composite:source-in; mask-image:linear-gradient(transparent, #000 22%, #000 70%, transparent), linear-gradient(90deg, transparent, #000 30%); mask-composite:intersect}
.wall-col{display:grid; gap:14px; align-content:start; animation:wall var(--t, 50s) linear infinite}
.wall-col:nth-child(even){animation-direction:reverse; margin-top:-60px}
.wall .glyph{width:100%; height:auto; aspect-ratio:1; border-radius:24%; font-size:clamp(15px, 1.8vw, 24px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 20px 40px -16px rgba(0,0,0,.8)}
.wall .glyph svg{width:42%; height:42%}
@keyframes wall{to{transform:translateY(calc(-50% - 7px))}}
@media (max-width:860px){ .projects-hero{min-height:0} .wall{width:70%; right:-30%; opacity:.35} }

/* Milestones: the numbers roll up, under a warm light */
.ms-hero::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:conic-gradient(from 160deg at 50% -20%, transparent 0deg, rgba(255,106,26,.16) 8deg, transparent 16deg, rgba(255,106,26,.1) 26deg, transparent 34deg, rgba(255,61,90,.1) 44deg, transparent 52deg);
  -webkit-mask-image:linear-gradient(#000 20%, transparent 85%); mask-image:linear-gradient(#000 20%, transparent 85%)}
.odo{display:inline-block; height:1em; overflow:hidden; vertical-align:top}
.odo-col{display:flex; flex-direction:column; transform:translateY(calc(var(--n) * -1em))}
.odo-col span{height:1em; line-height:1}
.odo-col{animation:roll 1.8s var(--rise) var(--dl, 0s) both}
@keyframes roll{from{transform:translateY(0)}}
.ms-hero .stat b{line-height:1}

/* Home's doors take the look of where they lead */
.door-strands{position:absolute; right:0; top:-4px; width:64px; height:28px; overflow:visible}
.door-strands path{stroke-width:2.5; stroke-linecap:round; fill:none}
.door-strands circle{fill:var(--night); stroke-width:2}
.door-glyphs{position:absolute; right:0; top:-6px; display:flex; gap:6px}
.door-glyphs .glyph{width:30px; height:30px; border-radius:8px; font-size:10px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.door-glyphs .glyph svg{width:16px; height:16px}
.door .door-fig small, .door .door-go{color:var(--accent-sky)}

@media (prefers-reduced-motion:reduce){
  .exp-a, .exp-b{stroke-dashoffset:0; animation:none!important} .exp-band{opacity:1; animation:none!important}
  .deck .pop, .wall-col, .odo-col{animation:none!important}
}

/* ---------- The live site: the shared footer on the night, the skip link, generic app tiles, the contact band without a form ---------- */
:root{--mk-font:var(--font-sans); --mk-maxw:var(--layout-maxw); --mk-footer-bg:var(--night); --mk-footer-fg:var(--on-night-mid); --mk-footer-strong:var(--on-night); --mk-footer-muted:#86868b;
  --mk-footer-line:var(--night-hair); --mk-footer-ink:var(--accent-sky); --mk-footer-ghost:rgba(255,255,255,.14); --mk-accent:var(--accent-sky); --mk-footer-z:6}
.mk-footer .mk-footer-inner .mk-footer-brand{font-size:0}
.mk-footer .mk-footer-inner .mk-footer-brand::before{content:"hello@"; font-size:13px}
.mk-footer .mk-footer-inner .mk-footer-brand::after{content:"mksvrcek.com"; font-size:13px; color:var(--accent-sky)}
.skip{position:fixed; z-index:100; left:12px; top:-60px; padding:10px 16px; border-radius:var(--radius-pill); background:var(--paper-hi); color:var(--ink); font-weight:600; text-decoration:none; transition:top .2s var(--ease)}
.skip:focus{top:12px}
.tile.s-lead{grid-column:span 4; grid-row:span 2}
.tile.s-tall{grid-column:span 2; grid-row:span 2}
.tile.s-one, .tile.s-wide{grid-column:span 3}
/* where each size puts its phones, on a wide screen; narrower, each app's own placement (.t-<app>) as the design has it */
@media (min-width:901px){
  .tile.s-lead .phone.a{right:clamp(150px, 15vw, 220px); bottom:-90px; transform:rotate(-4deg)}
  .tile.s-lead .phone.b{right:28px; bottom:-40px}
  .tile.s-tall .phone{left:50%; margin-left:calc(clamp(150px, 16vw, 210px) / -2); bottom:-150px}
  .tile.s-one .phone{right:24px; top:40%; width:clamp(130px, 13vw, 170px)}
}
@media (max-width:900px){ .tile.s-lead, .tile.s-tall, .tile.s-one, .tile.s-wide{grid-column:1 / -1; grid-row:auto} }
.contact-band.no-form{grid-template-columns:minmax(0, 1fr)}
.contact-band .cform-embed{min-height:120px}
.contact-band .cform-embed .cf-note{margin-top:var(--space-3)}
.pbento-small{grid-template-columns:repeat(auto-fill, minmax(min(100%, 250px), 1fr)); grid-auto-rows:auto}
.prose-wide{max-width:68ch; margin-top:var(--head-gap)}
.prose-wide p{font-size:19px; line-height:1.55; color:var(--ink-body)}
.fig{margin-top:var(--section-gap)}
.fig img{width:100%; border-radius:var(--radius-tile)}
.fig figcaption{margin-top:var(--space-3); font-size:13px; color:var(--ink-mid)}
.kw-one .kw-card{max-width:640px}
@font-face{font-family:"Source Sans 3"; src:url("/adobe/fonts/source-sans-3-latin-wght-normal.woff2") format("woff2"); font-weight:200 900; font-display:swap}
.pc-skills span{padding:3px 9px; border-radius:var(--radius-pill); background:rgba(255,255,255,.13); font-size:12px; font-weight:600; color:#fff}
.sk-head > div{min-width:0; max-width:100%}
.sk-name{overflow-wrap:anywhere}
@media (max-width:520px){ .sk-name{font-size:34px} }

/* Skills on a phone (the owner, 2 November 2026: "The skills section in mksvrcek.com doesn't work on mobile"): the list
   over its panel, one column, at the end so the wide screens' columns above never win; the panel in the page's flow,
   not stuck under the bar; the list shorter, scrolling in itself; tapping a skill goes down to it (site.js) */
@media (max-width:900px){
  .sk{grid-template-columns:minmax(0, 1fr); gap:var(--space-6)}
  .sk-panel{position:static; top:auto; scroll-margin-top:calc(var(--layout-nav-h) + 16px)}
  .sk-list{max-height:min(360px, 50vh)}
}