/* Design tokens and components for mader.xyz, edition 05 (direction A, "Observatory"). */

@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-ext-400.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-ext-500.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-ext-400.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --bg:#0F1110;--surface:#161917;--line:#262B28;--text:#E4E8E4;--muted:#9AA29C;--accent:#6FA585;--danger:#E07A6E;
  --sim-fg:228,232,228;--sim-accent:111,165,133;--sim-bg:15,17,16;
  --gutter:clamp(16px,4vw,64px);
  --sans:"IBM Plex Sans",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;
  color-scheme:dark;
}
:root[data-theme=light]{
  --bg:#F4F5F2;--surface:#E9ECE7;--line:#D3D8D1;--text:#141714;--muted:#59605A;--accent:#245E42;--danger:#A8322A;
  --sim-fg:20,23,20;--sim-accent:36,94,66;--sim-bg:244,245,242;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
main{flex:1 0 auto}
img{max-width:100%}
a{color:var(--text);text-decoration:none}
a:hover{color:var(--accent)}
a:focus-visible,button:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
h1,h2,h3,p,dl,dd,ol,ul,figure{margin:0}
h1,h2,h3{font-weight:400}
.skip{position:absolute;left:-9999px;top:8px;z-index:10;background:var(--surface);padding:8px 16px}
.skip:focus{left:8px}

/* Type */
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mono.s{font-size:11px}
.display{font-size:clamp(36px,4.4vw,60px);line-height:1.08;letter-spacing:-.02em}
.h2{font-size:clamp(28px,3vw,40px);letter-spacing:-.01em;line-height:1.15}
.lead{font-size:18px;line-height:1.55;color:var(--muted)}
.muted{color:var(--muted)}
.accent{color:var(--accent)}
.link{color:var(--accent)}
.link:hover{text-decoration:underline;text-underline-offset:3px}
.icon{flex:none}

/* Layout */
.pad{padding-left:var(--gutter);padding-right:var(--gutter)}
.section{padding:96px var(--gutter);border-bottom:1px solid var(--line)}
.split{display:flex;flex-wrap:wrap;gap:64px}
.split>.side{flex:1 1 280px;display:flex;flex-direction:column;gap:12px}
.split>.body{flex:2 1 520px}
.stack{display:flex;flex-direction:column}
.g8{gap:8px}.g12{gap:12px}.g16{gap:16px}.g24{gap:24px}.g32{gap:32px}

/* Header and footer */
.site-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:24px var(--gutter);border-bottom:1px solid var(--line)}
.site-header.over{position:absolute;top:0;left:0;right:0;z-index:2;border-bottom:0}
.wordmark{font-family:var(--mono);font-size:16px;font-weight:500;letter-spacing:.02em}
.site-nav{display:flex;flex-wrap:wrap;gap:24px;font-size:14px}
.site-nav a[aria-current]{color:var(--accent)}
.site-footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:32px var(--gutter);border-top:1px solid var(--line)}
.footer-end{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.site-footer nav{display:flex;flex-wrap:wrap;gap:8px 16px}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--accent)}
.theme-toggle{background:none;border:0;padding:0;cursor:pointer;font:inherit}
.theme-toggle:hover{color:var(--accent)}

/* Buttons and fields */
.btn{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 24px;border-radius:4px;border:1px solid var(--line);background:transparent;color:var(--text);font:inherit;font-size:16px;cursor:pointer}
.btn:hover{border-color:var(--accent)}
.btn.sm{height:40px;padding:0 16px;font-size:14px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--bg);font-weight:500}
.btn.primary:hover{color:var(--bg);opacity:.9}
.btn[disabled]{opacity:.6;cursor:progress}
.navbtn{width:48px;height:48px;border-radius:24px;border:1px solid var(--line);background:transparent;color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer}
.navbtn:hover{border-color:var(--accent);color:var(--accent)}
.chip{height:40px;padding:0 16px;border-radius:20px;border:1px solid var(--line);background:transparent;color:var(--text);font:inherit;font-size:14px;cursor:pointer;flex:none}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed=true]{background:var(--text);color:var(--bg);border-color:var(--text)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.seg button{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;background:transparent;border:0;color:var(--muted);font:inherit;font-size:14px;cursor:pointer}
.seg button+button{border-left:1px solid var(--line)}
.seg button:hover{color:var(--text)}
.seg button[aria-pressed=true]{background:var(--surface);color:var(--text)}
.field{width:100%;background:transparent;border:1px solid var(--line);border-radius:4px;color:var(--text);font:inherit;font-size:16px;padding:12px 16px}
.field:focus{outline:none;border-color:var(--accent)}
.field[aria-invalid=true]{border-color:var(--danger)}
select.field{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239AA29C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:48px}
select.field option{background:var(--bg);color:var(--text)}
.label{display:flex;flex-direction:column;gap:8px}
.err{font-size:14px;color:var(--danger)}

/* Definition lists and rows */
.facts{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px 16px;font-size:15px}
.facts dt{font-size:11px;padding-top:3px}
.rows{list-style:none;padding:0;border-top:1px solid var(--line)}
.rows>li,.rows>a{display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;padding:24px 0;border-bottom:1px solid var(--line)}
.rows .what{font-size:18px}
.rows .where{font-size:14px;color:var(--muted)}

/* Home: hero */
.hero{position:relative;height:clamp(560px,82vh,760px);overflow:hidden;border-bottom:1px solid var(--line)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-text{position:absolute;left:0;right:0;bottom:0;padding:0 var(--gutter) 48px;display:flex;flex-direction:column;gap:24px;max-width:880px}
.hero h1{font-size:clamp(32px,4.4vw,60px);line-height:1.08;letter-spacing:-.02em}

/* Home: status strip */
.status{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));border-bottom:1px solid var(--line)}
.status>div{padding:24px 32px;display:flex;flex-direction:column;gap:8px;border-right:1px solid var(--line)}
.status>div:first-child{padding-left:var(--gutter)}
.status>div:last-child{border-right:0}

/* Home: showcase carousel */
.showcase{padding:96px 0 64px;border-bottom:1px solid var(--line)}
.showcase-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;padding:0 var(--gutter) 48px}
.slides{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--gutter);padding:0 var(--gutter);scrollbar-width:none}
.slides::-webkit-scrollbar{display:none}
.slide{flex:0 0 min(82vw,1080px);scroll-snap-align:start;display:flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.slide-img{flex:1 1 420px;min-height:440px;display:flex;align-items:center;justify-content:center;padding:32px}
.slide-img img{max-height:400px;width:auto;height:auto;box-shadow:0 24px 48px rgba(0,0,0,.35)}
.slide-text{flex:1 1 360px;padding:48px;display:flex;flex-direction:column;gap:24px;justify-content:space-between}
.slide-text h3{font-size:36px;letter-spacing:-.01em}
.slide-text p{font-size:18px;line-height:1.55;color:var(--muted)}
.slide-text .facts{grid-template-columns:96px 1fr;font-size:14px}
.dashes{display:flex;gap:8px;padding:32px var(--gutter) 0}
.dashes span{height:2px;width:24px;background:var(--line);transition:all .3s}
.dashes span.on{width:48px;background:var(--accent)}

/* Research articles on home */
.rart{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:32px 0;border-top:1px solid var(--line)}
.rart:last-child{border-bottom:1px solid var(--line)}
.rart h3{font-weight:500;font-size:20px;line-height:1.35}
.rart p{font-size:16px;line-height:1.6;color:var(--muted)}

/* Media panel for projects */
.media{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;overflow:hidden;border-radius:4px;border:1px solid var(--line);background:var(--surface);aspect-ratio:4/3}
.media .phone{height:86%;width:auto;border-radius:12px;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.media .cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media .initial{font-family:var(--mono);font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:0 16px;text-align:center}

/* Work: grid, list, detail */
.toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:16px;padding:0 var(--gutter) 32px}
.chips{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 600px}
.work{padding:0 var(--gutter) 96px}
.work [data-view]{display:none}
.work[data-mode=grid] [data-view=grid],.work[data-mode=list] [data-view=list],.work[data-mode=detail] [data-view=detail]{display:block}
.pgrid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr));gap:48px 24px}
.work:not([data-mode=grid]) .pgrid{display:none!important}
.pcard{display:flex;flex-direction:column;gap:16px}
.pcard:hover .media,.lrow:hover .media{border-color:var(--accent)}
.pcard:hover .t,.lrow:hover .t{color:var(--accent)}
.pcard .head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.pcard .t{font-size:22px;letter-spacing:-.01em}
.pcard .text{font-size:15px;line-height:1.5;color:var(--muted)}
.state{font-size:14px;white-space:nowrap;color:var(--muted)}
.state.live{color:var(--accent)}
.lrow{display:grid;grid-template-columns:200px minmax(0,1fr) 96px 136px;gap:24px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.lrow.head{padding:8px 0}
.lrow .media .phone{border-radius:6px}
.lrow .media{gap:8px}
.lrow .t{font-size:20px}
.drow{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center;padding:64px 0;border-bottom:1px solid var(--line)}
.drow:first-child{padding-top:16px}
.drow h2{font-size:36px;line-height:1.1;letter-spacing:-.02em}
.drow .media{aspect-ratio:16/10;gap:24px}
.drow .media .phone{border-radius:16px}
[hidden]{display:none!important}

/* Project page */
.p-hero{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.p-hero .text{flex:1 1 520px;padding:64px var(--gutter);display:flex;flex-direction:column;gap:32px;justify-content:center}
.p-hero h1{font-size:clamp(48px,6vw,88px);line-height:1;letter-spacing:-.03em}
.p-hero .tagline{font-size:22px;line-height:1.45;max-width:560px}
.p-hero .art{flex:1 1 520px;min-height:640px;display:flex;align-items:center;justify-content:center;gap:24px;padding:48px;overflow:hidden;background:var(--surface)}
.p-hero .art img.phone{height:min(560px,70vw);width:auto;border-radius:28px;box-shadow:0 32px 64px rgba(0,0,0,.4)}
.p-hero .art img.phone+img.phone{height:min(480px,60vw);border-radius:24px}
.p-hero .art img.cover{width:100%;height:100%;max-height:560px;object-fit:contain}
.p-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px;border-top:1px solid var(--line);padding-top:32px}
.p-facts dd{margin-top:8px;font-size:16px}
.prose{flex:3 1 640px;display:flex;flex-direction:column;gap:24px;max-width:760px}
.prose h2{font-size:32px;letter-spacing:-.01em;margin-top:24px}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{font-size:18px;line-height:1.65;color:var(--muted)}
.prose ul{padding-left:20px}
.prose a{color:var(--accent)}
.features{list-style:none;padding:0!important;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.features li{border-top:1px solid var(--line);padding-top:16px;display:flex;flex-direction:column;gap:8px}
.features strong{font-weight:400;font-size:18px;color:var(--text)}
.shots{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gutter) 16px}
.shots figure{flex:0 0 auto;scroll-snap-align:start;display:flex;flex-direction:column;gap:12px}
.shots img{height:520px;width:auto;border-radius:24px;border:1px solid var(--line)}
.next{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;padding:64px var(--gutter);border-bottom:1px solid var(--line)}
.next .name{font-size:clamp(32px,4vw,56px);letter-spacing:-.02em}

/* CV */
.cv-head{display:flex;flex-wrap:wrap;gap:48px;align-items:center;padding:96px var(--gutter) 64px;border-bottom:1px solid var(--line)}
.avatar{width:160px;height:160px;border-radius:80px;object-fit:cover;object-position:50% 30%;background:#fff}
.sec{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:48px;padding:64px var(--gutter);border-bottom:1px solid var(--line)}
.item{display:grid;grid-template-columns:140px minmax(0,1fr);gap:24px;padding:20px 0;border-bottom:1px solid var(--line)}
.item:first-child{border-top:1px solid var(--line)}
.item .what{font-size:18px}
.item .where{font-size:15px;color:var(--muted)}
.skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px}
.skills dd{font-size:15px;line-height:1.6;color:var(--muted)}
.skills dt{font-size:18px;margin-bottom:8px}

/* About */
.a-hero{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.a-hero .text{flex:3 1 560px;padding:96px var(--gutter);display:flex;flex-direction:column;gap:32px;justify-content:flex-end}
.a-hero .pic{flex:2 1 380px;min-height:520px;background:#000;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.a-hero .pic img{width:100%;max-width:560px;height:auto;display:block}
:root[data-theme=light] .a-hero .pic{background:#fff}
.ch{display:grid;grid-template-columns:minmax(0,240px) minmax(0,680px);gap:48px;padding:80px var(--gutter);border-bottom:1px solid var(--line)}
.ch p{font-size:19px;line-height:1.7}
.ch .name{font-size:28px;letter-spacing:-.01em}

/* Contact */
.c-card{flex:1 1 460px;align-self:flex-start;border:1px solid var(--line);border-radius:8px;padding:clamp(24px,3vw,48px);background:var(--surface)}
.c-card form{display:flex;flex-direction:column;gap:24px}
.c-card .two{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.lnk{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);font-size:18px}
.alert{padding:12px 16px;border:1px solid var(--danger);border-radius:4px;font-size:15px;color:var(--danger)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Legal */
.legal{max-width:760px;display:flex;flex-direction:column;gap:16px}
.legal h2{font-size:22px;margin-top:24px}
.legal p,.legal li{font-size:16px;line-height:1.65;color:var(--muted)}
.legal a{color:var(--accent)}
.legal ul{padding-left:20px}

/* 404 */
.lost{position:relative;min-height:max(640px,calc(100vh - 160px));overflow:hidden}
.lost canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.lost .text{position:absolute;left:0;bottom:0;padding:0 var(--gutter) 64px;display:flex;flex-direction:column;gap:24px;max-width:640px}

@media (max-width:1100px){.ch{grid-template-columns:minmax(0,1fr);gap:24px}}
@media (max-width:900px){.drow{grid-template-columns:minmax(0,1fr);gap:24px}}
@media (max-width:760px){
  .site-header .clock{display:none}
  .site-nav{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;gap:20px;scrollbar-width:none}
  .site-nav a{flex:none}
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .status>div,.status>div:first-child{padding:16px var(--gutter);border-right:0;border-bottom:1px solid var(--line)}
  .status>div:last-child{border-bottom:0}
  .slide-img{min-height:320px;padding:24px}
  .slide-text{padding:24px 16px}
  .rart,.rows>li,.rows>a{grid-template-columns:minmax(0,1fr);gap:8px}
  .lrow{grid-template-columns:112px minmax(0,1fr)}
  .hide-s{display:none}
  .sec{grid-template-columns:minmax(0,1fr);gap:24px}
  .item{grid-template-columns:minmax(0,1fr);gap:4px}
  .p-hero .art{min-height:480px;padding:32px 16px}
  .shots img{height:420px}
  .section{padding-top:64px;padding-bottom:64px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Showcase and research images */
.slide-img img.shot{border-radius:24px}
.slide-img img.art{border-radius:6px}
img.square{width:100%;max-width:360px;height:auto;aspect-ratio:1;object-fit:cover;border-radius:4px;margin-top:24px}
.plain{list-style:none;padding:0}
.only-light{display:none!important}
:root[data-theme=light] .only-light{display:block!important}
:root[data-theme=light] .only-dark{display:none!important}