/* Hanji paper, meok ink and a pine accent, with traditional Korean details. */
:root{
  --carbon:#f6f1e6;
  --carbon-2:#fffdf8;
  --carbon-3:#ece6d8;
  --line:#e0d9c8;
  --line-2:#cfc7b4;
  --ink:#1c1a17;
  --ink-dim:#57524a;
  --accent:#0f6b5f; /* 청록, the default. Visitors' other choices, including reds, live in assets/accent.js. */
  --steel:#645e54;
  --serif:"Gowun Batang","Noto Serif KR","Apple SD Gothic Neo",Georgia,serif;
  --sans:"Pretendard","Pretendard Variable",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --maxw:1120px;
  /* Soft accent shading down the left and right edges, shared by the page and the home header. */
  --edge-shade:linear-gradient(90deg,color-mix(in srgb,var(--accent) 14%,transparent),transparent clamp(48px,14vw,260px),transparent calc(100% - clamp(48px,14vw,260px)),color-mix(in srgb,var(--accent) 14%,transparent));
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--carbon);color:var(--ink-dim);font:400 16.5px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
/* The edge shading, fixed to the window. */
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--edge-shade)}
::selection{background:var(--accent);color:#fff}
img,video{display:block;max-width:100%}
a{color:var(--accent);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 30%,transparent);transition:border-color .2s,color .2s}
a:hover{border-bottom-color:var(--accent)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
p{margin:0 0 1em}
strong,b{color:var(--ink);font-weight:600}
h1,h2,h3,h4{color:var(--ink);font-family:var(--serif);font-weight:700;line-height:1.25;margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,56px)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;background:var(--carbon-3);padding:6px 10px;z-index:200}

/* Top navigation */
.site-header{position:sticky;top:0;z-index:150;background:color-mix(in srgb,var(--carbon) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 32px;padding-top:14px;padding-bottom:14px}
.brand{display:block;border:0;color:var(--ink);font-family:var(--serif);font-weight:700;font-size:16px;line-height:1.1}
.brand:hover{color:var(--ink)}
.brand small{display:block;margin-top:5px;font:400 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.site-nav{display:flex;flex-wrap:wrap;gap:4px 24px;margin-left:auto;font-size:13.5px}
.site-nav a{position:relative;border:0;color:var(--ink-dim)}
.site-nav a:hover{color:var(--ink)}
.site-nav a[aria-current=page]{color:var(--ink)}
.site-nav a[aria-current=page]::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1.5px;background:var(--accent)}

/* Accent color picker, built by assets/accent.js */
.accent-picker{display:flex;align-items:center;gap:4px}
.accent-name{min-width:2.4em;margin-right:4px;font:400 12.5px/1 var(--serif);color:var(--accent);text-align:right;transition:color .2s}
.accent-option{position:relative;display:block;width:22px;height:22px;cursor:pointer}
.accent-option input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.accent-swatch{position:absolute;left:4px;top:5px;width:14px;height:12px;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);opacity:.5;transition:opacity .2s,transform .2s}
.accent-option:hover .accent-swatch{opacity:.85}
.accent-option input:checked+.accent-swatch{opacity:1;transform:scale(1.35)}
.accent-option:focus-within{outline:2px solid var(--accent);outline-offset:-1px;border-radius:2px}
.accent-option:has(input:focus:not(:focus-visible)){outline:0}

/* Full-page hexagon lattice, built by assets/hex.js */
.hex-field{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;opacity:0;transition:opacity 1.2s ease;
  background:radial-gradient(900px 560px at 88% -6%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 65%),radial-gradient(760px 520px at -6% 108%,color-mix(in srgb,var(--accent) 5%,transparent),transparent 65%)}
.hex-field.ready{opacity:1}
/* Softens the lattice behind the reading column; the margins stay crisp. */
.hex-field::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent calc(50% - 760px),color-mix(in srgb,var(--carbon) 62%,transparent) calc(50% - 540px),color-mix(in srgb,var(--carbon) 62%,transparent) calc(50% + 540px),transparent calc(50% + 760px))}
.hex-lines{position:absolute;left:0;top:0;display:block;fill:none;stroke:var(--ink);stroke-opacity:.06;stroke-width:.7}
.hanji-fibers{position:absolute;left:0;top:0;display:block;fill:none;stroke:#7a6a4f;stroke-opacity:.13;stroke-width:.6}
.hex-lines-glow{stroke:var(--accent);stroke-opacity:.42;will-change:transform}
.hex-cell{position:absolute;width:var(--hex-w);height:var(--hex-h);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);background:var(--accent);opacity:0;will-change:opacity;animation:hex-breathe var(--t) ease-in-out var(--d) infinite}
.hex-ember{z-index:1;animation:none}
@keyframes hex-breathe{0%,100%{opacity:0}50%{opacity:var(--peak)}}
.hex-spot{position:absolute;z-index:1;left:0;top:0;width:560px;height:560px;overflow:hidden;opacity:0;transition:opacity .5s ease;will-change:transform;
  -webkit-mask-image:radial-gradient(closest-side,#000,rgba(0,0,0,.45) 50%,transparent);mask-image:radial-gradient(closest-side,#000,rgba(0,0,0,.45) 50%,transparent)}
.hex-spot.on{opacity:1}

.hero,.page-head{border-bottom:1px solid var(--line)}

/* Home header, over a looping CarbonSix montage washed with paper so the text stays readable */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero-video{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;filter:saturate(.6)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--edge-shade),color-mix(in srgb,var(--carbon) 80%,transparent)}
.hero-inner{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:56px;align-items:center;padding-top:clamp(56px,8vw,96px);padding-bottom:clamp(48px,7vw,80px)}
/* Desktop: the wide (8:3) cut of the montage as a cover banner across the top, lightly washed and fading into
   the paper, with the portrait overlapping its lower edge and the text beneath. Phones get the 16:9 cut below. */
@media (min-width:641px){
  .hero{--banner-h:calc(min(100vw,1440px)*3/8)}
  .hero-video{left:50%;right:auto;bottom:auto;width:min(100%,1440px);height:var(--banner-h);transform:translateX(-50%);filter:saturate(.85);
    -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent),linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(180deg,#000 60%,transparent),linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-composite:intersect}
  .hero::before{background:var(--edge-shade),linear-gradient(180deg,color-mix(in srgb,var(--carbon) 10%,transparent) 0,color-mix(in srgb,var(--carbon) 20%,transparent) calc(var(--banner-h)*.55),color-mix(in srgb,var(--carbon) 90%,transparent) var(--banner-h))}
  .hero-inner{align-items:end;padding-top:calc(var(--banner-h) * .78)}
  .hero-inner>div:first-child{text-shadow:0 0 14px var(--carbon),0 0 4px var(--carbon)}
}
.kicker{font:500 12px/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0 0 18px}
.hero h1,.page-head h1{font-size:clamp(36px,5.6vw,62px);letter-spacing:-.015em;line-height:1.12;margin-bottom:20px}
.name-ko{display:inline-block;font-size:.48em;font-weight:400;letter-spacing:.08em;color:var(--ink-dim);white-space:nowrap}
.name-full{display:block;margin-top:12px;font:400 13px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.hero-intro{max-width:56ch;margin:0;font-size:clamp(17px,1.8vw,19px);line-height:1.5}
.hero-intro a{font-weight:600}
.index{list-style:none;margin:0;padding:0}
/* Each entry: institution and years on one line, the role beneath. */
.index li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 16px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line)}
.index li:first-child{padding-top:0}
.index li:last-child{padding-bottom:0;border-bottom:0}
.index-years{font:400 12.5px/1.6 var(--mono);letter-spacing:.02em;color:var(--steel);white-space:nowrap;text-align:right}
.index-role{grid-column:1/-1;font-size:14.5px;line-height:1.4;color:var(--steel)}
.org{border:0;color:var(--ink);font-weight:600}
.org:hover{color:var(--accent)}
.profile-links{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px}
.profile-links a{display:inline-flex;align-items:center;gap:8px;border:0;color:var(--ink);font-size:15px;font-weight:500;line-height:1.3}
.profile-links a:hover{color:var(--accent)}
.profile-links svg,.profile-mark{flex:0 0 auto;width:18px;height:18px;transition:transform .2s}
.profile-links a:hover svg,.profile-links a:hover .profile-mark{transform:translateY(-1px)}
.profile-mark{background:currentColor;-webkit-mask:url(img/carbonsix-mark.png) center/contain no-repeat;mask:url(img/carbonsix-mark.png) center/contain no-repeat}
.contact{margin:20px 0 0;font:400 12.5px/1.7 var(--mono);color:var(--steel)}
.contact b{font-weight:400;color:var(--ink-dim);overflow-wrap:anywhere}
.portrait{position:relative;display:block;width:100%;padding:7px;border:1px solid var(--line-2);border-radius:2px;background:var(--carbon-2);box-shadow:0 22px 50px -26px rgba(28,26,23,.45);cursor:pointer;transition:border-color .2s}
.portrait:hover{border-color:var(--accent)}
.portrait:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.portrait img{display:block;width:100%;height:auto}
.portrait img+img{position:absolute;left:7px;top:7px;width:calc(100% - 14px);height:calc(100% - 14px);opacity:0;transition:opacity .25s}
.portrait[aria-pressed="true"] img+img{opacity:1}
.hero-inner>*{animation:hex-rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero-inner>*:nth-child(2){animation-delay:.12s}
@keyframes hex-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* About */
.about{margin-top:24px;border-top:1px solid var(--line)}
.about-row{display:grid;grid-template-columns:190px minmax(0,1fr);gap:32px;padding:14px 0;border-bottom:1px solid var(--line)}
.about-row p{margin:0}
.about-row .award{font-size:16px}
.about-row .award+.award{margin-top:4px}
/* Years sit right-aligned on the row's edge, in line with the Academics and Industry years. */
.awards .award{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.award-year{flex:none;font:400 12.5px/1.6 var(--mono);letter-spacing:.02em;color:var(--steel)}
.eyebrow{font:500 11.5px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}

/* Sections */
section{padding-top:clamp(48px,6vw,72px)}
.section-title{font-size:clamp(26px,3.2vw,34px);letter-spacing:-.01em;margin-bottom:12px}
.section-title::before{content:"";display:block;width:34px;height:2px;background:var(--accent);margin-bottom:16px}
.lede{max-width:70ch}

/* Recent events */
.events{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--line)}
.events li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding:8px 4px;border-bottom:1px solid var(--line);transition:background .2s}
.events li:hover{background:color-mix(in srgb,var(--accent) 4%,transparent)}
.events strong{color:var(--accent)}
.events time{font:400 12.5px/1.98 var(--mono);letter-spacing:.06em;color:var(--steel)}

.events-more summary{display:inline-flex;align-items:center;gap:10px;margin-top:16px;padding:10px 13px;border:1px solid var(--line-2);border-radius:3px;background:var(--carbon-2);color:var(--ink);font:400 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;list-style:none;transition:border-color .2s,background .2s}
.events-more summary::-webkit-details-marker{display:none}
.events-more summary::before{content:"";width:6px;height:6px;border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:translateY(-2px) rotate(45deg);transition:transform .25s}
.events-more summary:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--carbon-2))}
.events-more summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.events-more[open] summary::before{transform:translateY(1px) rotate(-135deg)}
.events-more .when-open,.events-more[open] .when-closed{display:none}
.events-more[open] .when-open{display:inline}
.events-more .events{margin-top:16px}
@supports (interpolate-size:allow-keywords){
  .events-more{interpolate-size:allow-keywords}
  .events-more::details-content{height:0;overflow:hidden;transition:height .35s ease,content-visibility .35s allow-discrete}
  .events-more[open]::details-content{height:auto}
}

/* Research */
.projects{margin-top:24px;border-top:1px solid var(--line)}
.project{display:grid;grid-template-columns:300px minmax(0,1fr);gap:36px;padding:28px 0;border-bottom:1px solid var(--line)}
.project-media{margin:0;aspect-ratio:16/9;background:var(--carbon-2);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.project-media video,.project-media img{width:100%;height:100%;object-fit:contain;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.project:hover .project-media video,.project:hover .project-media img{transform:scale(1.03)}
.project-media img.cover{object-fit:cover}
.clips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 20px;margin-top:24px}
.clip{margin:0}
.clip:hover .project-media video{transform:scale(1.03)}
.clip figcaption{margin-top:9px;font-size:14.5px;font-weight:500;line-height:1.35;color:var(--ink)}
.clip .eyebrow{display:block;margin-bottom:2px}
.clips+.chips{margin-top:20px}
.project h3{font-size:20px;font-weight:700;letter-spacing:-.005em;line-height:1.35;margin-bottom:10px}
.paper+.paper{margin-top:20px;padding-top:18px;border-top:1px dashed var(--line-2)}
.paper p{margin:0}
.paper-title{color:var(--ink);font-family:var(--serif);font-weight:700;line-height:1.4}
.paper-authors{font-size:15px;line-height:1.45;margin-top:3px}
.paper-venue{color:var(--steel);font-size:14.5px;line-height:1.45}
.award{position:relative;padding-left:13px;color:var(--accent);font-weight:500;font-size:14.5px;line-height:1.4;margin-top:5px}
.award::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chips a{padding:6px 9px;border:1px solid var(--line-2);border-radius:2px;background:var(--carbon-2);color:var(--ink-dim);font:400 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;transition:border-color .2s,color .2s,background .2s}
.chips a:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}

/* Robots */
.robots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:32px}
.robot{background:var(--carbon-2);border:1px solid var(--line);border-radius:4px;overflow:hidden;padding-bottom:22px;transition:border-color .3s,transform .3s,box-shadow .3s}
.robot:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent);transform:translateY(-4px);box-shadow:0 22px 48px -24px rgba(22,24,29,.28)}
.robot figure{margin:0 0 20px;aspect-ratio:4/3;background:var(--carbon-3);overflow:hidden}
.robot img{width:100%;height:100%;object-fit:cover}
.robot>h3,.robot>p,.robot>.chips{margin-left:22px;margin-right:22px}
.robot h3{font-size:19px;font-weight:700;letter-spacing:-.005em;line-height:1.35;margin-bottom:10px}
.robot p{font-size:15.5px;line-height:1.5}
.robot-feature{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);padding-bottom:0}
.robot-feature figure{position:relative;margin:0;aspect-ratio:auto;height:100%}
.robot-feature figure img{position:absolute;inset:0}
.robot-feature>div{padding:28px 28px 26px}

/* Footer */
.site-footer{margin-top:clamp(64px,8vw,96px);border-top:1px solid var(--line);font:400 12px/1.7 var(--mono);color:var(--steel)}
.site-footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;padding-top:22px;padding-bottom:30px}
.site-footer nav{display:flex;flex-wrap:wrap;gap:0 18px}
.site-footer a{border:0;color:var(--steel)}
.site-footer a:hover{color:var(--ink)}

/* Inner pages */
.page-head .wrap{padding-top:clamp(52px,7vw,84px);padding-bottom:clamp(36px,5vw,56px)}
.page-head h1{margin-bottom:14px}
.page-head .lede{margin:0;font-size:clamp(16.5px,1.7vw,18px)}
.pubs{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--line)}
.pubs li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.pubs .year{font:400 12.5px/1.9 var(--mono);letter-spacing:.06em;color:var(--steel)}

/* Resources */
.resources-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:56px;padding-top:44px}
.toc{position:sticky;top:88px;align-self:start;max-height:calc(100vh - 112px);overflow:auto;font-size:14px;line-height:1.45}
.toc-title{font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--steel);margin:0 0 12px}
.toc ul{list-style:none;margin:0;padding:0}
.toc>ul>li{margin-bottom:14px}
.toc a{border:0}
.toc>ul>li>a{color:var(--ink);font-weight:600}
.toc li li{margin-top:5px}
.toc li li a{color:var(--ink-dim)}
.toc a:hover{color:var(--accent)}
.resources h2{font-size:clamp(26px,3.2vw,34px);letter-spacing:-.01em;padding-top:44px;border-top:1px solid var(--line);margin-top:52px;margin-bottom:10px}
.resources>h2:first-child{border-top:0;padding-top:0;margin-top:0}
.resources h3{font-size:20px;font-weight:700;letter-spacing:-.005em;margin-top:36px;margin-bottom:4px}
.resources h4{font:500 11px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:24px 0 6px}
.resources .note{margin-bottom:6px}
.refs{list-style:none;margin:0;padding:0}
.refs li{padding:5px 0;font-size:15.5px;line-height:1.45;color:var(--ink)}
.refs .chips{display:inline-flex;margin:0 0 0 8px;vertical-align:1px;gap:4px}
.refs .chips a{padding:4px 6px;font-size:9.5px}
.table-scroll{overflow-x:auto;margin-top:16px;border:1px solid var(--line);border-radius:3px;background:var(--carbon-2)}
table{border-collapse:collapse;width:100%;min-width:680px;font-size:14.5px;line-height:1.4}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
thead th{font:500 10.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--steel);background:var(--carbon-3)}
tbody th{color:var(--ink);font-weight:600}

/* Not found */
.not-found{padding-top:clamp(72px,10vw,120px);max-width:640px}
.not-found h1{font-size:clamp(34px,5vw,48px);letter-spacing:-.02em;margin-bottom:14px}

@media (max-width:860px){
  .site-nav{order:3;width:100%;margin-left:0;gap:2px 18px}
  .accent-picker{margin-left:auto}
  .hero-inner{grid-template-columns:minmax(0,1fr) 200px;gap:32px}
  .project{grid-template-columns:minmax(0,1fr);gap:16px;padding:24px 0}
  .resources-layout{grid-template-columns:minmax(0,1fr);gap:24px;padding-top:28px}
  .toc{position:static;max-height:none;padding:16px 18px;border:1px solid var(--line);border-radius:3px;background:var(--carbon-2)}
  .toc li li{display:none}
  .toc>ul{display:flex;flex-wrap:wrap;gap:4px 20px}
  .toc>ul>li{margin:0}
  .robot-feature{grid-template-columns:minmax(0,1fr)}
  .robot-feature figure{aspect-ratio:4/3;height:auto}
  .robot-feature>div{padding:22px}
}
@media (max-width:640px){
  html{scroll-padding-top:16px}
  body{font-size:16px}
  .wrap{padding:0 16px}
  .site-header{position:static}
  .site-nav{gap:0 12px;font-size:13px}
  /* Larger tap targets without changing how the text sits. */
  .site-nav a{padding:6px 0}
  .site-nav a[aria-current=page]::after{bottom:1px}
  .profile-links a{padding:3px 0}
  .chips a{padding:8px 10px}
  section{padding-top:40px}
  /* The clip grid becomes a swipeable row; the next clip peeks in from the right. */
  .clips{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;gap:12px;margin:20px -16px 0;padding:0 16px 4px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;overscroll-behavior-x:contain;scrollbar-width:none}
  .clips::-webkit-scrollbar{display:none}
  .clip{scroll-snap-align:start}
  .profile-links{display:grid;grid-template-columns:auto 1fr;gap:10px 28px}
  .site-header .wrap{column-gap:12px}
  .accent-name{min-width:2em;margin-right:2px}
  .accent-picker{gap:0}
  .accent-option{width:24px;height:30px}
  .accent-swatch{left:5px;top:9px}
  .site-nav a[href$="#about"]{display:none}
  /* The video becomes a full-width 16:9 banner across the top, lightly washed and fading into the paper,
     with the portrait overlapping its lower edge and the text below it. */
  .hero-video{bottom:auto;height:auto;aspect-ratio:16/9;filter:saturate(.85);-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
  .hero::before{background:var(--edge-shade),linear-gradient(180deg,color-mix(in srgb,var(--carbon) 12%,transparent) 0,color-mix(in srgb,var(--carbon) 22%,transparent) 36vw,color-mix(in srgb,var(--carbon) 90%,transparent) 56.25vw)}
  .hero-inner{grid-template-columns:minmax(0,1fr);gap:24px;padding-top:calc(56.25vw - 76px);padding-bottom:40px}
  .portrait{order:-1;width:148px}
  .about-row{grid-template-columns:minmax(0,1fr);gap:4px;padding:12px 0}
  .events li{grid-template-columns:minmax(0,1fr);gap:0;padding:8px 2px}
  .robots{grid-template-columns:minmax(0,1fr)}
  .pubs li{grid-template-columns:minmax(0,1fr);gap:2px;padding:14px 0}
  .refs .chips{margin-left:0}
}
/* Keeps the brand and the named color picker on one row on the narrowest phones. */
@media (max-width:350px){
  .site-header .wrap{column-gap:6px}
  .brand small{letter-spacing:.06em}
  .accent-option{width:21px}
  .accent-swatch{left:3.5px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .profile-links a:hover svg,.profile-links a:hover .profile-mark,.robot:hover{transform:none}
  .project:hover .project-media video,.project:hover .project-media img,.clip:hover .project-media video{transform:none}
  .hero-inner>*{animation:none}
  .portrait img+img{transition:none}
  .hex-cell{animation:none;opacity:var(--peak)}
}
@media print{.hex-field,.accent-picker{display:none}}