/* Shared UI refinement. Retained filename for existing route imports. */
:root{color-scheme:light;--paper:#F5F7FB;--bg:#E6ECFF;--card:#FFFFFF;--ink:#0A0F1C;--sub:#556174;--indigo:#2457FF;--indigo-soft:#E6ECFF;--mist:#E1E7F0;--line:#D4DCE8;--display:'Satoshi','Inter',sans-serif;--body:'Inter',sans-serif;--mono:'Inter',sans-serif;--sans:var(--body)}
html{scroll-padding-top:96px;scrollbar-color:var(--sub) var(--paper)}
body{background:var(--paper);color:var(--ink)}
::selection{background:var(--indigo);color:var(--card)}
a{text-underline-offset:4px}
:focus-visible{outline:2px solid var(--indigo);outline-offset:4px}
button,input,textarea,select{font-family:var(--body)}
button{cursor:pointer}
input,textarea,select{caret-color:var(--indigo)}
.wrap{width:100%;max-width:1280px;padding-inline:48px;margin-inline:auto}
.site-shell{display:none}
header.bar{background:var(--paper);backdrop-filter:none;border-bottom:1px solid var(--line)}
.bar>.wrap{height:80px}
.logo img{width:132px;height:auto}
.bar nav{font-size:14px;font-weight:500;gap:28px}
.bar nav a{display:flex;align-items:center;min-height:44px;color:var(--sub)}
.bar nav a:hover,.bar nav a.active{color:var(--indigo)}
.bar nav a::after{bottom:4px;height:2px}
.btn,.btn-primary,.hero .btn{min-height:48px;border-radius:10px;font-family:var(--body);font-size:14px;font-weight:600;gap:10px;box-shadow:none;transition:background .18s,color .18s,border-color .18s}
.btn:hover,.btn-primary:hover{transform:none;box-shadow:none}
.btn.primary,.btn-primary,.hero-primary{background:var(--indigo);color:var(--card);border:1px solid var(--indigo)}
.btn.primary:hover,.btn-primary:hover,.hero-primary:hover{background:var(--ink);border-color:var(--ink)}
.btn.ghost,.hero-secondary{background:var(--card);border:1px solid var(--line);color:var(--ink)}
.btn.ghost:hover,.hero-secondary:hover{border-color:var(--indigo);color:var(--indigo)}
.btn:disabled,button:disabled{opacity:.55;cursor:not-allowed}
.hero{background:var(--paper)}
.hero::before,.hero::after{display:none}
.hero-inner{min-height:0;padding-top:88px;padding-bottom:44px;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);grid-template-rows:auto auto;gap:64px}
.hero h1{line-height:1.04;letter-spacing:-.04em;max-width:11ch;animation:none}
.hero h1 em{color:var(--indigo)}
.hero h1 em::after{display:none}
.hero p.lede{font-size:16px;line-height:1.8;max-width:58ch;margin-top:28px;animation:none}
.hero .btn,.hero-system{animation:none}
.avail{font-family:var(--body);font-size:12px;letter-spacing:0;margin-bottom:24px}
.hero-system{box-shadow:0 24px 48px -30px var(--ink);border-radius:16px}
.system-core{padding:32px 24px}
.system-core strong{font-size:18px;line-height:1.4}
.system-core span,.system-flow span{font-size:12px;line-height:1.6}
.system-top{font-size:11px;letter-spacing:.04em}
.system-flow div{padding:20px;min-height:112px}
.system-flow small{color:var(--card);opacity:.65}
.hero .stats{margin-top:8px;padding-top:28px;border-top:1px solid var(--line)}
.hero .stat{padding-top:0}
.stat .n{font-size:28px}
.stat .l{font-family:var(--body);text-transform:none;letter-spacing:0;font-size:12px;line-height:1.5}
.sec{padding-top:88px}
.sec-head h2{font-size:clamp(28px,3.5vw,44px);line-height:1.15;letter-spacing:-.03em;font-weight:700}
.sec-sub{font-size:16px;line-height:1.75;max-width:65ch;margin-bottom:32px}
.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.proj{border:0;border-radius:0;background:transparent;box-shadow:none;will-change:auto}
.proj:hover,.proj:active{transform:none;box-shadow:none}
.chrome{display:none}
.shot{height:auto;aspect-ratio:1.72;border-radius:12px;background:var(--mist)}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .25s}
.proj:hover .shot img{transform:scale(1.025)}
.proj .body{padding:20px 0 24px;border-bottom:1px solid var(--line);flex:1}
.proj .tag{font:400 12px var(--body);color:var(--sub);letter-spacing:0;text-transform:none}
.proj h3{font-size:22px;letter-spacing:-.02em;margin-top:8px}
.proj p{font-size:14px;line-height:1.75;color:var(--sub)}
.visit{min-height:44px;display:inline-flex;align-items:center;font:600 14px var(--body)}
.work-more{text-align:left;margin-top:28px}
/* Motion belongs to interaction: focus a project, follow its link, open navigation. */
:root{--motion-ease:cubic-bezier(.16,1,.3,1);--motion-fast:160ms;--motion-state:240ms}
header.bar{transition:box-shadow var(--motion-state) var(--motion-ease)}
header.bar.is-scrolled{box-shadow:0 8px 24px -20px var(--ink)}
.iceland-project{position:relative;isolation:isolate}
.iceland-project::before{content:"";position:absolute;inset:4px -12px;border-radius:12px;background:var(--card);opacity:0;z-index:-1;transition:opacity var(--motion-state) var(--motion-ease)}
.iceland-project:focus-within::before{opacity:1}
.iceland-project .action-icon{transition:transform var(--motion-state) var(--motion-ease),color var(--motion-fast)}
.iceland-thumb{transition:transform var(--motion-state) var(--motion-ease)}
.iceland-project h3 a:focus-visible .action-icon{transform:translate(3px,-3px)}
.btn,.btn-primary,.hero .btn{transition:background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-state) var(--motion-ease),transform var(--motion-fast) var(--motion-ease)}
.btn:active,.btn-primary:active{transform:translateY(1px)}
.cf-field input,.cf-field textarea{transition:border-color var(--motion-fast),background var(--motion-fast)}
@media(hover:hover) and (pointer:fine){
 .iceland-project:has(a):hover::before{opacity:1}
 .iceland-project:has(a):hover .iceland-thumb{transform:scale(1.06)}
 .iceland-project h3 a:hover .action-icon{transform:translate(3px,-3px)}
 .btn.primary:hover,.btn-primary:hover,.hero .hero-primary:hover{box-shadow:0 10px 22px -16px var(--ink)}
 .post-card:hover .post-read{color:var(--ink)}
}
@media(max-width:640px){
 .bar .mnav{transition:clip-path 280ms var(--motion-ease),visibility 0s 280ms}
 .bar .mnav.open{transition-delay:0s}
 .bar .mnav a{transition:color var(--motion-fast),opacity 180ms var(--motion-ease),transform 280ms var(--motion-ease)}
 .bar .mnav.open a:nth-child(n){transition-delay:0s}
}
.iceland-projects{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.iceland-project{display:grid;grid-template-columns:minmax(180px,1fr) minmax(0,1.7fr) minmax(130px,.7fr);gap:28px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line)}
.iceland-project h3{font:600 18px/1.4 var(--display);letter-spacing:-.02em}
.iceland-project h3 a{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--ink);text-decoration:none}
.iceland-project h3 a:hover{color:var(--indigo)}
.iceland-project p{font-size:14px;line-height:1.65;color:var(--sub)}
.iceland-domain{font-size:12px;color:var(--sub);text-align:right}
@media(max-width:760px){.iceland-project{grid-template-columns:1fr;gap:6px;padding:18px 0}.iceland-domain{text-align:left}.iceland-project h3 a{min-height:44px}}
/* Compact homepage selection; the full work archive keeps its larger previews. */
body[data-page='home'] #work{padding-top:48px}
body[data-page='home'] #work .sec-head h2{font-size:28px}
body[data-page='home'] #work .sec-sub{font-size:14px;margin-bottom:24px}
body[data-page='home'] #work .work-more{margin-top:20px}
.svc-grid{background:transparent;gap:32px;border:0;border-radius:0}
.svc-card{min-height:0;padding:28px 0;border:0;border-top:1px solid var(--line);background:transparent}
.svc-card:hover,.svc-card:active{transform:none;box-shadow:none;border-top:1px solid var(--line)}
.svc-kind{border:0;padding:0;font-size:12px;letter-spacing:0;text-transform:none}
.svc-card h3{font-size:28px}
.svc-pitch{font-size:16px;line-height:1.75;max-width:54ch}
.approach{box-shadow:none;border:0;padding:48px;border-radius:16px}
.approach h2{font-size:clamp(28px,3.5vw,44px);line-height:1.2}
.approach p{max-width:65ch}
.contact{padding-top:96px;padding-bottom:88px}
.contact h2{font-size:clamp(36px,4.5vw,60px);line-height:1.1;max-width:none}
.contact p{font-size:16px;line-height:1.75}
.cform{padding:0;border:0;background:transparent;max-width:760px;margin-top:32px;gap:24px}
.cf-field{font:500 14px var(--body);letter-spacing:0;text-transform:none;gap:8px;min-width:0}
.cf-field input,.cf-field textarea{background:var(--card);font-size:16px;line-height:1.5;min-height:48px;padding:12px 14px;border:1px solid var(--line);border-radius:10px}
.cf-field input:focus-visible,.cf-field textarea:focus-visible{outline:2px solid var(--indigo);outline-offset:2px;box-shadow:none}
.cf-field input::placeholder,.cf-field textarea::placeholder{color:var(--sub)}
.cf-divider{font-family:var(--body);font-size:12px;text-transform:none;letter-spacing:0}
.foot{border-top:1px solid var(--line);padding-block:28px}
.foot .wrap{font-family:var(--body);font-size:12px;line-height:2;gap:20px}
.totop{border-radius:12px;background:var(--card)}
.action-icon{width:20px;height:20px;stroke:currentColor;stroke-width:1.5;fill:none;vertical-align:middle}
.js .reveal,.reveal.is-in{opacity:1;transform:none}
.blog-hero{padding-top:64px;padding-bottom:40px;margin-bottom:32px;border-bottom:1px solid var(--line)}
.blog-hero .eyebrow{display:none}
.blog-headline{font-family:var(--display);font-size:clamp(36px,4.5vw,60px);font-weight:700;line-height:1.12;letter-spacing:-.035em;margin-top:0;max-width:24ch;text-wrap:balance}
.blog-headline em{font-weight:inherit}
.blog-lede{font-size:17px;line-height:1.8;max-width:65ch;margin-top:24px}
.blog-hero .article-back{margin-top:0;margin-bottom:24px}
.blog-posts{padding-bottom:80px}
.grp{font-family:var(--body);font-size:14px;letter-spacing:0;text-transform:none;margin:40px 0 24px}
.post-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.post-card{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;will-change:auto}
.post-card:hover,.post-card:active{transform:none;box-shadow:none;background:transparent;border-color:var(--indigo)}
.post-thumb.no-thumb{display:none}
.post-thumb{border-radius:12px;margin-top:24px}
.post-body{padding:28px 0}
.post-title{font-size:24px;line-height:1.3;letter-spacing:-.02em}
.post-cat{font-family:var(--body);font-size:12px;text-transform:none;letter-spacing:0}
.post-excerpt{font-size:15px;line-height:1.75}
.post-meta{font-family:var(--body);font-size:12px;flex-wrap:wrap}
.post-read{font-family:var(--body);font-size:14px;min-height:44px;font-weight:500}
.article-wrap{max-width:800px;padding-inline:32px}
.article-header h1{font-size:clamp(32px,4vw,48px);line-height:1.17;letter-spacing:-.03em}
.article-body{font-size:17px;line-height:1.85}
.article-body h2{font-size:28px;line-height:1.25}
.article-body h3{font-size:22px}
.article-body pre{max-width:100%;overflow:auto}
.article-body table{display:block;max-width:100%;overflow:auto}
.article-callout{background:var(--indigo-soft);border-color:var(--line)}
.article-cta .btn-primary{background:var(--card);color:var(--ink)}
.article-cta .eyebrow{display:none}
.legal-wrap{max-width:800px;padding-top:64px}
.legal-wrap h1{font-family:var(--display);font-size:44px;letter-spacing:-.03em}
.legal-wrap p,.legal-wrap ul{font-size:16px;line-height:1.85}
.spec .k{font-family:var(--body);font-size:14px;letter-spacing:0;text-transform:none}
.spec .v{font-size:16px;line-height:1.8}
body[data-page='experience'] .sec{padding-top:48px}
body[data-page='work'] .sec{padding-top:8px}
body[data-page='work'] .sec>.grp:first-child{margin-top:16px}
body[data-page='tool'] .blog-headline{font-size:clamp(32px,4vw,48px)}
body[data-page='tool'] input,body[data-page='tool'] textarea,body[data-page='tool'] select{font-family:var(--body);font-size:16px;background:var(--card);color:var(--ink);border-color:var(--line);border-radius:8px}
body[data-page='tool'] input:not([type='radio']):not([type='checkbox']):not([type='range']),body[data-page='tool'] select{min-height:48px}
body[data-page='tool'] button{min-height:44px}
body[data-page='tool'] input::placeholder,body[data-page='tool'] textarea::placeholder{color:var(--sub)}
body[data-page='tool'] input:focus-visible,body[data-page='tool'] textarea:focus-visible,body[data-page='tool'] select:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}
body[data-page='tool'] pre,body[data-page='tool'] code{font-family:ui-monospace,monospace;max-width:100%;overflow:auto}
@media(max-width:1000px){
 .wrap{padding-inline:32px}.hero-inner{gap:40px;grid-template-columns:1.1fr .9fr}
 .system-core{grid-template-columns:36px 1fr;padding:24px 20px;gap:8px 12px}.system-core img{width:36px;height:36px}.system-core strong{font-size:16px}
 .system-flow div{padding:16px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
 .hero-inner{display:grid;grid-template-columns:1fr;padding-top:48px;gap:36px}.hero h1{max-width:12ch}
 .hero-system{max-width:540px;width:100%}.hero .stats{margin-top:0}
 .svc-grid{grid-template-columns:1fr;gap:0}.post-grid{gap:0 28px}
}
@media(max-width:640px){
 .wrap{padding-inline:24px}.bar>.wrap{height:72px}.logo img{width:120px}
 .bar nav{display:none}.bar .burger{display:flex;background:var(--card);border:1px solid var(--line);border-radius:10px}
 .burger span,.burger[aria-expanded='true'] span{background:var(--ink)}
 body.menu-open header.bar{background:var(--paper);border-color:var(--line)}
 body.menu-open .logo img,body.menu-open .logo:has(.b){filter:none}
 .bar .mnav{display:flex;top:72px;height:calc(100dvh - 72px);padding:24px;background:var(--paper);background-image:none;color:var(--ink);overflow-y:auto;gap:0}
 .bar .mnav::before,.bar .mnav::after{display:none}
 .bar .mnav a,.bar .mnav a:last-of-type{font-family:var(--display);font-size:28px;line-height:1.3;padding:18px 0;margin:0;background:transparent;color:var(--ink);border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;letter-spacing:-.02em}
 .bar .mnav a::before,.bar .mnav a::after{display:none}
 .bar .mnav a:hover,.bar .mnav a.active,.bar .mnav a:focus-visible{color:var(--indigo)}
 .hero-inner{padding-bottom:32px}.hero p.lede{font-size:16px;line-height:1.75}.hero-actions{gap:12px}.hero .btn{padding:13px 16px}
 .hero .stat .n{font-size:24px}.hero .stat .l{font-size:11px;line-height:1.5}.hero .stat+.stat{padding-left:14px}
 .sec{padding-top:64px}.sec-sub{font-size:15px}.grid,.post-grid{grid-template-columns:1fr}
 .proj h3{font-size:22px}.approach{padding:28px 24px}.approach .row{grid-template-columns:1fr}
 .contact{padding-block:64px}.contact h2{font-size:44px}.cform-row{flex-direction:column;gap:24px}
 .blog-hero{padding-top:40px;padding-bottom:32px;margin-bottom:16px}.blog-headline{font-size:36px}.blog-lede{font-size:16px}
 .article-wrap{padding-inline:24px}.article-header h1{font-size:32px}.article-body{font-size:16px}
 .article-cta{padding:28px 24px}.legal-wrap{padding-inline:24px}.legal-wrap h1{font-size:36px}
 .foot .wrap{flex-direction:column;align-items:flex-start;gap:12px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
/* Compact discovery layout adapted from the user's Product Hunt reference. */
body[data-page='home'] main{max-width:1184px;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:40px}
body[data-page='home'] .hero{grid-column:1/-1;overflow:visible;border-bottom:1px solid var(--line)}
body[data-page='home'] .hero-inner{padding:32px 0 24px;gap:24px 48px;grid-template-columns:minmax(0,1fr) 300px}
body[data-page='home'] .hero h1{font-size:44px;line-height:1.15;max-width:none;letter-spacing:-.03em}
body[data-page='home'] .hero p.lede{font-size:14px;line-height:1.75;margin-top:16px;max-width:70ch}
body[data-page='home'] .avail{margin-bottom:16px}
body[data-page='home'] .hero-actions{margin-top:20px}
body[data-page='home'] .hero .stats{padding-top:20px;margin-top:0}
body[data-page='home'] .hero .stat .n{font-size:22px}
body[data-page='home'] .hero-system{box-shadow:none;border-radius:12px}
body[data-page='home'] .system-core{padding:20px 16px;grid-template-columns:32px 1fr;column-gap:10px}
body[data-page='home'] .system-core img{width:32px;height:32px}
body[data-page='home'] .system-core strong{font-size:14px}
body[data-page='home'] .system-top{padding-inline:16px}
body[data-page='home'] .system-flow div{padding:14px;min-height:0}
body[data-page='home'] #work{padding:28px 0 0;width:100%;min-width:0}
body[data-page='home'] #work .sec-head h2{font-size:24px}
body[data-page='home'] #work .sec-sub{font-size:14px}
.iceland-project{grid-template-columns:64px minmax(0,1fr);gap:4px 20px;padding:16px 0;align-items:start}
.iceland-thumb{width:64px;height:64px;object-fit:contain;background:var(--card);border-radius:12px;grid-row:1/4}
.iceland-project h3{grid-column:2;font-size:18px}
.iceland-project h3 a{min-height:44px;margin-top:-8px}
.iceland-project p{grid-column:2;margin-top:-4px}
.iceland-domain{grid-column:2;text-align:left;margin-top:4px}
body[data-page='home'] #now{padding:28px 0 0;min-width:0;width:100%}
body[data-page='home'] #now .sec-head h2{font-size:22px;line-height:1.35}
body[data-page='home'] #now .sec-sub{font-size:14px;margin-bottom:20px}
body[data-page='home'] #now .svc-grid{display:block}
body[data-page='home'] #now .svc-card{padding:20px 0}
body[data-page='home'] #now .svc-card h3{font-size:18px}
body[data-page='home'] #now .svc-pitch{font-size:14px;line-height:1.7}
body[data-page='home'] #approach,body[data-page='home'] #contact{grid-column:1/-1;padding-inline:0}
.blog-headline{font-size:clamp(32px,3.5vw,44px)}
.blog-hero{padding-top:40px;padding-bottom:28px}
@media(max-width:1280px){body[data-page='home'] main{margin-inline:32px}}
@media(max-width:1000px){
 body[data-page='home'] main{display:block}
 body[data-page='home'] .hero-inner{grid-template-columns:minmax(0,1fr) 280px;gap:24px}
 body[data-page='home'] #now .svc-grid{display:grid;grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
 body[data-page='home'] main{margin-inline:24px}
 body[data-page='home'] .hero-inner{grid-template-columns:1fr;padding-top:28px}
 body[data-page='home'] .hero h1{font-size:36px}
 body[data-page='home'] .hero-system{max-width:none}
 body[data-page='home'] #now .svc-grid{grid-template-columns:1fr}
 .iceland-project{grid-template-columns:48px minmax(0,1fr);gap:4px 14px}
 .iceland-thumb{width:48px;height:48px}
}