*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:#000;}
body{-webkit-font-smoothing:antialiased;}
[hidden]{display:none !important;}
/* ---- the intro: who he is, the agent, and the selected project ---- */
.h6-in{flex:1; min-width:0; border:none; background:transparent; font:400 14px/1.2 'Sora',sans-serif; color:#F4F4F2; padding:0;}
.h6-in::placeholder{color:#A1A1A6;}
.h6-in:focus{outline:none;}
.h6-in:disabled{opacity:.6;}
.h6-form{display:flex; align-items:center; gap:12px; height:52px; padding:0 8px 0 18px; border-radius:999px; border:1px solid #2A2A2E; transition:border-color .2s ease;}
.h6-form:focus-within{border-color:#5A5A60;}
.h6-go{appearance:none; width:36px; height:36px; border-radius:50%; border:none; background:#F4F4F2; color:#0E0E0F; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none;}
.h6-sug{appearance:none; border:none; background:none; padding:5px 0; font:400 13px/1.3 'Sora',sans-serif; color:#A1A1A6; cursor:pointer; text-align:left; display:flex; gap:10px; transition:color .2s ease;}
.h6-sa{color:#6E6E73; display:inline-block; transition:transform .25s cubic-bezier(.22,.61,.36,1), color .2s ease;}
.h6-sug:hover .h6-sa{color:#F4F4F2; transform:translateX(2px);}
.h6-sug:hover{color:#F4F4F2;}
.h6-go:focus-visible, .h6-sug:focus-visible{outline:2px solid #F4F4F2; outline-offset:3px;}
.h6-proj{display:block; color:#F4F4F2; text-decoration:none; transition:transform .4s cubic-bezier(.22,.61,.36,1);}
.h6-media{position:relative; width:100%; aspect-ratio:1/1; border-radius:20px; overflow:hidden; background:#F4F4F2; transition:box-shadow .4s ease;}
.h6-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.h6-arr{display:inline-block; color:#A1A1A6; transition:transform .25s cubic-bezier(.22,.61,.36,1), color .25s ease;}
.h6-proj:hover .h6-arr, .h6-proj:focus-visible .h6-arr{transform:translateX(3px); color:#F4F4F2;}
.h6-pm{color:#A1A1A6; transition:color .25s ease;}
.h6-proj:hover .h6-pm, .h6-proj:focus-visible .h6-pm{color:#C9C9CC;}
.h6-proj:focus-visible{outline:2px solid #F4F4F2; outline-offset:6px; border-radius:22px;}
.h6-q{position:absolute; width:34px; height:34px; border-radius:8px;}
.h6-lab{display:flex; align-items:baseline; gap:10px; font:400 13px/1 'Sora',sans-serif; color:#F4F4F2; margin:0 0 18px;}
.h6-cta{appearance:none; border:none; cursor:pointer; text-align:left; display:flex; align-items:center; white-space:nowrap; flex:0 1 auto; max-width:100%; background:none; border-radius:4px; padding:6px 0; gap:0; color:#B4B4B9; font:400 14px/1.2 'Sora',sans-serif; transition:color .2s ease;}
.h6-cta:hover, .h6-cta:focus-visible{color:#F4F4F2;}
.h6-cta:focus-visible{outline:2px solid #F4F4F2; outline-offset:3px;}
.h6-cta .ar{margin-left:8px; color:#8A8A8F; font-size:15px; line-height:1.2; transition:transform .25s cubic-bezier(.22,.61,.36,1), color .2s ease;}
.h6-cta:hover .ar{transform:translateY(2px); color:#F4F4F2;}
.h6-two{display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:6px 28px; margin-top:32px;}
.h6-foot{font:400 13px/1 'Sora',sans-serif; color:#8A8A8F;}
.h6-col{width:min-content; max-width:100%;}
.h6-gone{visibility:hidden; height:0; margin:0 !important; overflow:hidden;} /* keeps its width, so the column doesn't change size */
.h6-ans{margin-top:40px; max-height:min(48vh, 420px); overflow:auto; scrollbar-width:thin; scrollbar-color:#2A2A2E transparent;}
.h6-aq{font:400 15px/1.45 'Sora',sans-serif; color:#B4B4B9; text-wrap:pretty; animation:h6rise .55s cubic-bezier(.22,1,.36,1) both;}
@keyframes h6rise{from{opacity:0; transform:translateY(46px);} to{opacity:1; transform:none;}}
.h6-at{margin:12px 0 0; font:300 19px/1.55 'Sora',sans-serif; letter-spacing:-0.005em; color:#F4F4F2; text-wrap:pretty; min-height:1.55em; animation:h6fade .4s .25s ease both;}
@keyframes h6fade{from{opacity:0;} to{opacity:1;}}
.h6-at.think{color:#A1A1A6;}
.h6-at.think::after{content:''; display:inline-block; width:1.2em; text-align:left; animation:h6dots 1.2s steps(4,end) infinite;}
@keyframes h6dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
.h6-again{margin-top:14px; padding-left:18px;}
.h6-intro{max-width:500px;}
.h6-projsec{justify-self:end; width:min(100%, 60vh);}
.h6-sugs{margin-top:12px; padding-left:18px; display:flex; flex-direction:column; align-items:flex-start;}
.h6-root{position:relative; width:100%; height:100vh; min-height:640px; overflow:hidden; background:#000; color:#F4F4F2; font-family:'Sora',system-ui,sans-serif; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; column-gap:6%; padding:0 6.1%;}
/* large screens: everything scales (to a cap of 1920px), the agent a little more, and the pair sits centred with a gap that scales too */
@media (min-width:1025px){
  .h6-root{grid-template-columns:auto auto; justify-content:center; padding:0; column-gap:calc(140px * var(--s, 1));}
  .h6-root .h6-intro{zoom:var(--zi, 1);}
  .h6-root .h6-projsec{zoom:var(--s, 1); width:calc(60vh / var(--s, 1)) !important; justify-self:start !important;}
}
/* tablets and phones: one column that scrolls; intro and ask first, then the project and the links */
@media (max-width:1024px){
  .h6-root{display:flex; flex-direction:column; align-items:stretch; height:auto; min-height:100vh; overflow:visible; padding:56px 40px 36px;}
  .h6-intro{max-width:600px !important; align-self:center; text-align:center;}
  .h6-projsec{width:100% !important; max-width:640px; margin-top:64px; align-self:center;}
  .h6-mark{margin-left:auto; margin-right:auto;}
  .h6-col{margin-left:auto; margin-right:auto;}
  .h6-sugs{width:fit-content; margin-left:auto; margin-right:auto; padding-left:0; text-align:left;}
  .h6-again{padding-left:0; margin-left:auto; margin-right:auto;}
}
@media (max-width:720px){
  .h6-root{padding:28px 20px 28px;}
  .h6-mark{transform:scale(.8); transform-origin:50% 0; margin-bottom:-22px;}
  .h6-h1{margin-top:28px !important; font-size:28px !important; white-space:normal !important;}
  .h6-lead{margin-top:12px !important; font-size:16.5px !important;}
  .h6-form{margin-top:28px !important;}
  .h6-col{width:auto;}
  .h6-projsec{margin-top:48px;}
  .h6-two{margin-top:28px;}
}
/* ---- the page below the intro ---- */
.h7{background:#000; color:#F4F4F2; font-family:'Sora',system-ui,sans-serif; --side:max(6.1vw, calc((100vw - 1440px) / 2 + 88px));}
/* the slim header */
.h7-hd{position:fixed; left:0; right:0; top:0; z-index:30; height:72px; padding:0 var(--side); display:flex; align-items:center; gap:40px; background:#000; border-bottom:1px solid #141416; transform:translateY(-100%); opacity:0; pointer-events:none; transition:transform .45s cubic-bezier(.22,1,.36,1), opacity .3s ease;}
.h7-hd.on{transform:none; opacity:1; pointer-events:auto;}
.h7-mini{appearance:none; border:none; background:none; padding:0; cursor:pointer; position:relative; width:33px; height:33px; flex:none;}
.h7-mini i{position:absolute; width:10px; height:10px; border-radius:2.5px; display:block;}
.h7-mini:focus-visible{outline:2px solid #F4F4F2; outline-offset:6px; border-radius:4px;}
.h7-nav{display:flex; gap:30px; min-width:0;}
.h7-nb{appearance:none; border:none; background:none; padding:6px 0; white-space:nowrap; flex:none; cursor:pointer; display:flex; align-items:baseline; gap:9px; font:400 13px/1 'Sora',sans-serif; color:#A1A1A6; text-decoration:none; transition:color .2s ease;}
.h7-nb i{width:9px; height:9px; border-radius:2.5px; display:block; flex:none; position:relative; top:calc(9px - 0.8em); opacity:.45; transition:opacity .2s ease;}
.h7-nb:hover, .h7-nb.on{color:#F4F4F2;} .h7-nb:hover i, .h7-nb.on i{opacity:1;}
.h7-nb:focus-visible{outline:2px solid #F4F4F2; outline-offset:4px; border-radius:4px;}
.h7-nb .ls{display:none;}
/* sections */
.h7-main{padding:0 var(--side);}
.h7-sec{padding-top:128px; scroll-margin-top:24px;}
#selected{scroll-margin-top:88px;}
.h7-h{margin:0; font:400 32px/1.15 'Sora',sans-serif; letter-spacing:-0.02em;}
.h7-h strong{font-weight:600;}
.h7-sub{margin:12px 0 0; font:300 16px/1.55 'Sora',sans-serif; color:#B4B4B9; max-width:38em; text-wrap:pretty;}
.h7-grid{margin:40px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:12px;}
.h7-gl{display:flex; align-items:baseline; gap:10px; margin:16px 0 0; font:400 13px/1 'Sora',sans-serif; color:#F4F4F2;}
.h7-gl:first-child{margin-top:0;}
.h7-gl span{color:#8A8A8F;}
.s6{grid-column:span 6;} .s4{grid-column:span 4;} .s3{grid-column:span 3;}
/* fill means one thing on this page: you can press it. inert cards are held by a hairline instead */
.h7-t{background:transparent; box-shadow:inset 0 0 0 1px #1C1C1F; border-radius:20px; padding:22px 24px 24px; display:flex; flex-direction:column; min-width:0;}
a.h7-t{text-decoration:none; color:inherit; background:#121214; box-shadow:inset 0 0 0 1px #26262B; transition:background .2s ease, box-shadow .4s ease, transform .4s cubic-bezier(.22,.61,.36,1);}
a.h7-t:focus-visible{outline:2px solid #F4F4F2; outline-offset:3px;}
.h7-th{display:flex; align-items:center; gap:10px; font:400 13px/1 'Sora',sans-serif; color:#A1A1A6; margin-bottom:16px; min-height:20px;}
.h7-th .cur{color:#F4F4F2;}
.h7-now{font-size:13px; line-height:1; padding:4px 8px; border-radius:999px; color:#35C27A; background:rgba(53,194,122,.12);}
.h7-minor{margin-top:3px; font:400 13px/1.45 'Sora',sans-serif; color:#A1A1A6;}
/* expertise: four cards, a nine-square glyph each */
.h7-h3{margin:72px 0 0; font:400 22px/1.2 'Sora',sans-serif; letter-spacing:-0.015em; scroll-margin-top:96px;}
.h7-h3 strong{font-weight:600;}
.h7-gly{display:grid; grid-template-columns:repeat(3, 10px); gap:3px; margin-bottom:40px;}
.h7-gly i{width:10px; height:10px; border-radius:2.5px; display:block;}
.h7-dt{margin:0; font:500 17px/1.3 'Sora',sans-serif; color:#F4F4F2;}
.h7-dd{margin:8px 0 0; font:300 14px/1.55 'Sora',sans-serif; color:#B4B4B9; text-wrap:pretty;}
/* other projects: image on top */
.h7-pc{padding:0; overflow:hidden;}
.h7-pim{position:relative; aspect-ratio:1/1; background:#141416;}
.h7-pim img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.h7-pb{padding:20px 22px 22px; display:flex; flex-direction:column; flex:1;}
.h7-ptt{font:500 16px/1.35 'Sora',sans-serif; color:#F4F4F2; text-wrap:balance;}
.h7-pa{margin-top:12px; display:flex; gap:8px; align-items:baseline; font:400 13px/1.4 'Sora',sans-serif; color:#C9C9CC;}
.h7-pa span{color:#35C27A; font-size:13px;}
.h7-tags{margin:auto 0 0; padding:18px 0 0; list-style:none; display:flex; flex-wrap:wrap; gap:6px; font:400 13px/1 'Sora',sans-serif;}
.h7-tags li{display:flex; align-items:center; white-space:nowrap; padding:7px 12px; border-radius:999px; box-shadow:inset 0 0 0 1px #34343A; color:#C9C9CC;}
.h7-par{display:inline-block; margin-left:4px; color:#A1A1A6; transition:transform .25s cubic-bezier(.22,.61,.36,1), color .25s ease;}
a.h7-pc:hover .h7-par, a.h7-pc:focus-visible .h7-par{transform:translateX(3px); color:#F4F4F2;}
/* about me: one principle, set as a quiet statement */
.h7-prin{margin:40px 0 0; padding:0 0 0 26px; border-left:2px solid #F58FEF; display:flex; flex-direction:column; gap:14px;}
.h7-prin blockquote{margin:0; font:300 27px/1.35 'Sora',sans-serif; letter-spacing:-0.018em; color:#F4F4F2; max-width:18em; text-wrap:balance;}
.h7-prin blockquote strong{font-weight:600;}
/* education, with every part of the degree spelled out */
.h7-gls{margin:72px 0 0;}
.h7-ed{padding:24px 28px 28px;}
.h7-edi{font:500 20px/1.3 'Sora',sans-serif; letter-spacing:-0.01em; color:#F4F4F2; text-wrap:balance; max-width:22em;}
.h7-edc{margin-top:8px; display:flex; align-items:center; gap:7px; font:400 14px/1.3 'Sora',sans-serif; color:#C9C9CC;}
.h7-edc svg{color:#A1A1A6; flex:none;}
.h7-edl{margin:auto 0 0; padding:22px 0 0; display:grid; grid-template-columns:minmax(0,1fr); gap:0;}
.h7-edl > div{display:grid; grid-template-columns:76px minmax(0,1fr); column-gap:16px; align-items:baseline; padding:11px 0; border-top:1px solid #1C1C1F;}
.h7-edl > div:last-child{padding-bottom:0;}
.h7-edl dt{font:400 13px/1.4 'Sora',sans-serif; color:#A1A1A6;}
.h7-edl dd{margin:0; font:400 15px/1.4 'Sora',sans-serif; color:#F4F4F2;}
/* the timeline */
.h7-tl{margin-top:16px; scrollbar-width:none;}
.h7-tl::-webkit-scrollbar{display:none;}
.h7-tli{position:relative;}
.h7-ax{position:relative; height:26px; font:400 13px/1 'Sora',sans-serif; color:#8A8A8F;}
.h7-ax span{position:absolute; top:0; transform:translateX(-50%);}
.h7-lanes{position:relative;}
.h7-gridl{position:absolute; inset:0; pointer-events:none;}
.h7-gridl i{position:absolute; top:0; bottom:0; width:1px; background:#141416;}
.h7-gridl b{position:absolute; top:-6px; bottom:0; width:2px; margin-left:-1px; background:#F58FEF; border-radius:1px;}
.h7-gridl b span{position:absolute; left:8px; bottom:6px; font:400 13px/1 'Sora',sans-serif; color:#F58FEF;}
.h7-ln{position:relative; border-top:1px solid #1C1C1F;}
.h7-ln:last-child{border-bottom:1px solid #1C1C1F;}
.h7-lnl{position:sticky; left:0; top:0; width:110px; height:100%; padding-top:21px; display:flex; align-items:baseline; gap:9px; font:400 13px/1 'Sora',sans-serif; color:#F4F4F2; background:linear-gradient(to right, #000 80%, rgba(0,0,0,0)); z-index:2;}
.h7-lnl i{width:9px; height:9px; border-radius:2.5px; display:block; flex:none; position:relative; top:calc(9px - 0.8em);}
.h7-it{appearance:none; border:none; background:none; margin:0; cursor:pointer; text-align:left; border-radius:6px; padding:4px 0 6px; position:absolute; display:flex; flex-direction:column; align-items:flex-start; gap:7px; z-index:1;}
.h7-it.on{z-index:3;}
.h7-it.st{cursor:default; pointer-events:none;} /* education bars are labels only */
.h7-it:focus-visible{outline:2px solid #F4F4F2; outline-offset:8px;}
.h7-it .lb{font:400 13px/1 'Sora',sans-serif; color:#B4B4B9; white-space:nowrap; transition:color .15s ease;}
.h7-it:hover .lb, .h7-it.on .lb{color:#F4F4F2 !important;}
.h7-it .br{display:block; height:6px; border-radius:3px; min-width:8px;}
.h7-it .aw{display:flex; align-items:center; height:6px; margin-left:-5px;}
.h7-it .st{font-size:11px; line-height:6px; flex:none;}
.h7-it .wl{flex:1; height:2px; background:currentColor; opacity:.85; margin:0 2px;}
.h7-tip{position:absolute; top:100%; left:0; margin-top:12px; width:320px; display:none; flex-direction:column; align-items:flex-start; padding:18px 20px 20px; border-radius:16px; background:#18181B; box-shadow:0 18px 44px rgba(0,0,0,.6), inset 0 0 0 1px #26262A; z-index:6; pointer-events:none; white-space:normal;}
.h7-it.on .h7-tip{display:flex; animation:h7tip .16s ease both;}
.h7-tip.up{top:auto; bottom:100%; margin-top:0; margin-bottom:12px;}
@keyframes h7tip{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}
.h7-tip .ty{display:flex; align-items:center; gap:12px; font:400 13px/1 'Sora',sans-serif; color:#A1A1A6; margin-bottom:12px;}
.h7-tip .tk{display:flex; align-items:center; gap:8px; color:#F4F4F2;}
.h7-tip .tk i{width:9px; height:9px; border-radius:2.5px; display:block; flex:none;}
.h7-tip .ti{font:500 16px/1.35 'Sora',sans-serif; color:#F4F4F2;}
.h7-tip .tr{margin-top:4px; font:400 14px/1.45 'Sora',sans-serif; color:#C9C9CC;}
.h7-tip .tm{margin-top:3px; font:400 13px/1.45 'Sora',sans-serif; color:#A1A1A6;}
.h7-tip .tp{margin-top:12px; font:400 14px/1.5 'Sora',sans-serif; color:#C9C9CC;}
.h7-tip .td{margin-top:8px; font:300 14px/1.55 'Sora',sans-serif; color:#A1A1A6;}
.h7-tlist{display:none;}
/* gallery: one size for every photo */
.h7-gal{margin:28px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px;}
.h7-gal img{display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:20px; background:#111113;}
/* contact: the invitation on the left, the two ways to reach him as plain rows on the right */
#contact{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:64px; align-items:start;}
#contact .h7-h, #contact .h7-sub{grid-column:1;}
.h7-ct{grid-column:2; grid-row:1 / span 2; display:flex; flex-direction:column;}
.h7-ctl{display:flex; align-items:center; gap:16px; min-width:0; padding:20px 0; border-top:1px solid #1C1C1F; color:#F4F4F2; text-decoration:none;}
.h7-ctl:last-child{border-bottom:1px solid #1C1C1F;}
.h7-ctl:focus-visible{outline:2px solid #F4F4F2; outline-offset:3px;}
.h7-ctl .k{flex:none; width:72px; font:400 13px/1 'Sora',sans-serif; color:#A1A1A6;}
.h7-ctl .v{min-width:0; overflow-wrap:anywhere; font:400 18px/1.3 'Sora',sans-serif; color:#C9C9CC; transition:color .2s ease;}
.h7-ctl:hover .v, .h7-ctl:focus-visible .v{color:#F4F4F2;}
.h7-ctl .ar{margin-left:auto; color:#B4B4B9; transition:transform .25s cubic-bezier(.22,.61,.36,1), color .2s ease;}
.h7-ctl:hover .ar{transform:translate(2px,-2px); color:#F4F4F2;}
.h7-foot{display:flex; align-items:center; gap:28px; margin-top:96px; padding:24px 0 34px; border-top:1px solid #1C1C1F;}
.h7-top{appearance:none; border:none; background:none; padding:0; margin-left:auto; font:inherit; color:#B4B4B9; cursor:pointer; transition:color .2s ease;}
.h7-top:hover{color:#F4F4F2;}
.h7-top:focus-visible{outline:2px solid #F4F4F2; outline-offset:3px; border-radius:2px;}
/* hover: one signal. the card lifts and its edge brightens */
.h6-proj:hover, .h6-proj:focus-visible, a.h7-t:hover, a.h7-t:focus-visible{transform:translateY(-4px);}
.h6-proj:hover .h6-media, .h6-proj:focus-visible .h6-media{box-shadow:0 0 0 1px #45454D;}
a.h7-t:hover, a.h7-t:focus-visible{background:#121214; box-shadow:inset 0 0 0 1px #45454D;}
@media (prefers-reduced-motion: reduce){ .h7-hd{transition:none;} .h7-it.on .h7-tip{animation:none;} .h6-proj:hover, .h6-proj:focus-visible, a.h7-t:hover, a.h7-t:focus-visible{transform:none;} }
@media (hover:none){ .h6-proj:hover, a.h7-t:hover{transform:none;} }
@media (max-width:1024px){
  .h7{--side:40px;}
  .h7-hd{height:64px; gap:24px;}
  .h7-nav{margin-left:auto; gap:24px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;}
  .h7-nav::-webkit-scrollbar{display:none;}
  .h7-sec{padding-top:104px; scroll-margin-top:72px;}
  .h7-h{font-size:28px;}
  .s4,.s3{grid-column:span 6;}
  .h7-prin blockquote{font-size:24px;}
  .h7-tl{overflow-x:auto;} .h7-lanes{padding-bottom:150px; margin-bottom:-150px;}
  .h7-gal{gap:10px;}
  #contact{grid-template-columns:minmax(0,1fr);} .h7-ct{grid-column:1; grid-row:auto; margin-top:32px;}
  /* other projects: one row each, image on the left */
  #projects + .h7-grid > li{grid-column:span 12;}
  #projects + .h7-grid .h7-pc{flex-direction:row;}
  #projects + .h7-grid .h7-pim{flex:none; width:220px; aspect-ratio:auto; min-height:220px; align-self:stretch; background:#000;}
  #projects + .h7-grid .h7-pim img{object-fit:contain;}
  #projects + .h7-grid .h7-pb{padding:24px 26px; min-width:0;}
}
@media (max-width:720px){
  .h7{--side:20px;}
  .h7-hd{height:60px; gap:16px;}
  .h7-nav{gap:16px;}
  .h7-nb{gap:7px;}
  .h7-nb .lf{display:none;} .h7-nb .ls{display:inline;}
  .h7-sec{padding-top:84px; scroll-margin-top:64px;}
  .h7-h{font-size:26px;}
  .h7-sub{font-size:14.5px;}
  .h7-grid{margin-top:28px; gap:10px;}
  .s6,.s4,.s3{grid-column:span 12;}
  .h7-t{padding:20px 20px 22px;}
  .h7-pc{padding:0;}
  .h7-prin{padding-left:18px;}
  .h7-prin blockquote{font-size:21px;}
  .h7-h3{margin-top:56px; font-size:20px;}
  .h7-gls{margin-top:56px;}
  .h7-gal{grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;}
  .h7-foot{gap:22px;}
  .h7-ctl .v{font-size:16px;}
  /* expertise: the glyph sits beside the text, so four cards stay short */
  #expertise > ul.h7-grid:first-of-type > li{display:grid; grid-template-columns:36px minmax(0,1fr); column-gap:16px; align-items:start; padding:18px 18px 20px;}
  #expertise > ul.h7-grid:first-of-type .h7-gly{grid-row:span 2; margin:3px 0 0;}
  #expertise > ul.h7-grid:first-of-type .h7-dd{margin-top:6px;}
  /* other projects: a plain list, a small square thumbnail, divided by hairlines */
  #projects + .h7-grid{gap:0; margin-top:20px;}
  #projects + .h7-grid .h7-pc{background:none; box-shadow:none; border-radius:0; border-top:1px solid #1C1C1F; padding:16px 0; align-items:flex-start; overflow:visible;}
  #projects + .h7-grid > li:last-child .h7-pc{border-bottom:1px solid #1C1C1F;}
  #projects + .h7-grid .h7-pim{width:88px; min-height:0; aspect-ratio:1/1; align-self:flex-start; border-radius:14px; overflow:hidden;}
  #projects + .h7-grid .h7-pb{padding:2px 0 0 16px;}
  #projects + .h7-grid .h7-ptt{font-size:15px;}
  #projects + .h7-grid .h7-pa{margin-top:8px;}
  #projects + .h7-grid .h7-tags{display:none;}
  #projects + .h7-grid a.h7-pc:hover, #projects + .h7-grid a.h7-pc:focus-visible{background:none; box-shadow:none; transform:none;}
  /* timeline: a list instead of a chart that scrolls sideways */
  .h7-tl{display:none;}
  #about .h7-gls span{display:none;}
  .h7-tlist{display:flex; flex-direction:column; gap:32px; margin-top:16px;}
  .h7-tgh{display:flex; align-items:baseline; gap:9px; margin-bottom:8px; font:400 13px/1 'Sora',sans-serif; color:#F4F4F2;}
  .h7-tgh i{width:9px; height:9px; border-radius:2.5px; display:block; flex:none; position:relative; top:calc(9px - 0.8em);}
  .h7-tlist ol{margin:0; padding:0; list-style:none;}
  .h7-tlist li{display:grid; grid-template-columns:88px minmax(0,1fr); column-gap:14px; padding:14px 0; border-top:1px solid #1C1C1F;}
  .h7-tlist .y{font:400 13px/1.4 'Sora',sans-serif; color:#A1A1A6;}
  .h7-tlist .i{display:block; font:400 15px/1.35 'Sora',sans-serif; color:#F4F4F2;}
  .h7-tlist .r{display:block; margin-top:3px; font:400 14px/1.4 'Sora',sans-serif; color:#B4B4B9;}
}
/* ---- the opening ---- */
.sq-q{position:absolute; left:0; top:0; will-change:transform;}
.iv-ov{position:fixed; inset:0; z-index:50; background:#000;}
.iv-text{position:absolute; left:20px; right:20px; top:calc(50% + 66px); text-align:center; color:#F4F4F2; font-family:'Anta','Noto Sans KR',system-ui,sans-serif; font-size:clamp(24px, 2.9vw, 42px); line-height:1.15; letter-spacing:-0.01em; pointer-events:none;}
.iv-text div{min-height:1.15em;}
.iv-text div + div{margin-top:clamp(12px, 1.9vw, 30px);}
.iv-skip{position:absolute; right:12px; bottom:10px; min-width:44px; min-height:44px; appearance:none; border:none; background:none; padding:8px 4px; font:400 13px/1 'Sora',system-ui,sans-serif; color:#8A8A8F; cursor:pointer;}
.iv-skip:hover{color:#F4F4F2;}

/* ---- phones: more air in the intro, the three links as plain rows, and a header that fits ---- */
@media (max-width:720px){
  .h6-root{padding:56px 24px 40px;}
  .h7{--side:24px;}
  .h6-h1{margin-top:32px !important;}
  .h6-lead{margin-top:14px !important;}
  .h6-form{margin-top:32px !important;}
  .h6-sugs{margin-top:20px;}
  .h6-sug{padding:7px 0; font-size:14px;}
  .h6-projsec{margin-top:72px;}
  .h6-two{flex-direction:column; align-items:stretch; gap:0; margin-top:36px;}
  .h6-cta{justify-content:space-between; padding:16px 0; border-top:1px solid #1C1C1F; border-radius:0; font-size:15px; color:#C9C9CC;}
  .h6-cta:last-child{border-bottom:1px solid #1C1C1F;}
  .h6-cta .ar{margin-left:auto;}
  /* header: no colour squares, links spread across the width */
  .h7-hd{gap:20px;}
  .h7-nav{flex:1; justify-content:space-between; gap:12px; overflow:visible;}
  .h7-nb{font-size:14px; padding:10px 0;}
  .h7-nb i{display:none;}
}