/* Indy Sarlet — portfolio
   Plain CSS, no build step. Colours and sizes live in the tokens below. */

@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/inter-latin-wght-normal.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:"Inter";font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/inter-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,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:"Inter Tight";font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/inter-tight-latin-wght-normal.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:"Inter Tight";font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/inter-tight-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --ink:#111;
  --soft:#f2f2f0;
  --soft-hover:#e7e7e4;
  --muted:#6b6b6b;
  --body:#4a4a4a;
  --line:#d9d9d4;
  --green:#aaeec4;
  --radius:20px;
  --page-max:1440px;
  --gutter:4vw;
  --gap:11px;
  --header-h:77px;
  --site-max:1500px;
  --container:min(var(--site-max), calc(100vw - 2 * var(--gutter)));
  --row:calc(var(--container) * .0215);
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-head:"Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}
@media (max-width:767px){
  :root{--gutter:6vw;--header-h:76px;--row:24px}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--f-body);font-size:calc(.12vw + 16px);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding-top:var(--header-h)}
img,video,iframe{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--green);color:var(--ink)}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:#fff;padding:10px 16px;border-radius:999px}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---------- Header ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;background:#fff}
.site-header .inner{width:calc(100% - 2 * var(--gutter));max-width:var(--page-max);margin:0 auto;height:var(--header-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.logo{font-family:var(--f-head);font-size:22px;font-weight:600;letter-spacing:-.01em;line-height:1.28;text-decoration:none;justify-self:start}
.nav{display:flex;gap:4px}
.nav a{position:relative;display:inline-block;padding:8px 12px;font-size:14px;line-height:20px;letter-spacing:-.02em;text-decoration:none;opacity:.72;transition:opacity .2s ease}
.nav a:hover,.nav a[aria-current="page"]{opacity:1}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:1px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:300px;background:var(--ink);color:#fff;font-family:var(--f-body);font-size:15px;font-weight:500;line-height:1.2;padding:14px 26px;text-decoration:none;cursor:pointer;transition:opacity .2s ease}
.btn:hover{opacity:.85}
.site-header .btn{justify-self:end;padding:10px 18px;font-size:14px}
.burger{display:none;justify-self:end;width:44px;height:44px;border:0;background:none;padding:0;cursor:pointer;position:relative}
.burger span{position:absolute;left:5px;right:5px;height:1px;background:var(--ink);transition:transform .3s ease,top .3s ease}
.burger span:nth-child(1){top:17px}.burger span:nth-child(2){top:26px}
.menu{position:fixed;inset:0;z-index:40;background:var(--ink);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--header-h) + 24px) var(--gutter) 40px;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s}
.menu nav{display:flex;flex-direction:column;gap:6px}
.menu nav a{font-family:var(--f-head);font-size:40px;font-weight:500;letter-spacing:-.02em;line-height:1.2;text-decoration:none}
.menu .btn{background:#fff;color:var(--ink);align-self:stretch}
.menu-open .menu{opacity:1;visibility:visible}
.menu-open .site-header{background:transparent}
.menu-open .site-header .logo{color:#fff}
.menu-open .burger span{background:#fff}
.menu-open .burger span:nth-child(1){top:22px;transform:rotate(45deg)}
.menu-open .burger span:nth-child(2){top:22px;transform:rotate(-45deg)}
.menu-open{overflow:hidden}
@media (max-width:767px){
  .site-header .nav,.site-header .btn{display:none}
  .burger{display:block}
  .site-header .inner{grid-template-columns:1fr auto}
}

/* ---------- Typography (text blocks) ---------- */
.txt h1,.txt h2,.txt h3,.txt h4{font-family:var(--f-head);font-weight:500;letter-spacing:-.02em;margin:2rem 0;color:var(--ink)}
.txt h1{font-size:calc(3.6vw + 16px);line-height:1.18}
.txt h2{font-size:calc(2.16vw + 16px);line-height:1.18}
.txt h3{font-size:calc(1.2vw + 16px);line-height:1.18}
.txt h4{font-size:calc(.6vw + 16px);line-height:1.08}
.txt p{margin:1rem 0}
.txt .sqsrte-large{font-size:calc(.36vw + 16px)}
.txt .sqsrte-small{font-size:14px}
.txt>:first-child{margin-top:0}
.txt>:last-child{margin-bottom:0}
.txt a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.txt ul,.txt ol{margin:1rem 0;padding-left:1.4em}
@media (max-width:767px){
  .txt h1{font-size:44px}
  .txt h2{font-size:34px}
  .txt h3{font-size:27px}
  .txt h4{font-size:21px}
  .txt p{font-size:17px}
  .txt .sqsrte-large{font-size:20px}
}
.pill{display:inline-block;margin:0 4px 8px 0;padding:7px 14px;border-radius:999px;background:var(--green);color:var(--ink);font-size:14px;font-weight:400;line-height:1.3;letter-spacing:-.01em;white-space:nowrap}

/* ---------- Sections & the layout grid ----------
   Each section is a 24-column grid (8 on mobile) like the original site.
   Blocks are placed with --gd (desktop) and --gm (mobile) grid-area values. */
.sec{position:relative;padding:var(--pt-m,0) 0 var(--pb-m,0)}
@media (min-width:768px){.sec{padding:var(--pt,0) 0 var(--pb,0)}}
.grid{display:grid;position:relative;column-gap:var(--gap);row-gap:var(--gap);
  grid-template-columns:minmax(calc(var(--gutter) - var(--gap)),1fr) repeat(8,minmax(0,calc((var(--site-max) - var(--gap) * 7) / 8))) minmax(calc(var(--gutter) - var(--gap)),1fr);
  grid-template-rows:repeat(var(--rows-m,1),minmax(var(--row),auto))}
.grid.auto-m{grid-template-rows:none;grid-auto-rows:auto}
@media (min-width:768px){
  .grid{--row:calc(var(--container) * var(--rf,.0215))}
  .grid{grid-template-columns:minmax(calc(var(--gutter) - var(--gap)),1fr) repeat(24,minmax(0,calc((var(--site-max) - var(--gap) * 23) / 24))) minmax(calc(var(--gutter) - var(--gap)),1fr);
    grid-template-rows:repeat(var(--rows-d,1),minmax(var(--row),auto))}
  .grid.auto-m{grid-template-rows:repeat(var(--rows-d,1),minmax(var(--row),auto));grid-auto-rows:auto}
  .grid.auto-d{grid-template-rows:none;grid-auto-rows:auto}
  .sec[style*="--rows-tpl"]>.grid{grid-template-rows:var(--rows-tpl)}
}
.b{grid-area:var(--gm);z-index:var(--z,auto);min-width:0;position:relative}
@media (min-width:768px){.b{grid-area:var(--gd)}}
.b.txt{align-self:start}
.b.media{aspect-ratio:var(--ar-m);border-radius:var(--r,0);overflow:hidden;align-self:start;isolation:isolate}
@media (min-width:768px){.b.media{aspect-ratio:var(--ar-d)}}
.b.media.cover img,.b.media video,.b.media iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.b.media.contain{display:grid;place-items:center;container-type:size;overflow:visible;border-radius:0}
.b.media.contain img{width:min(100cqw,calc(100cqh * var(--iar)));height:auto;aspect-ratio:var(--iar);border-radius:var(--r,0);object-fit:cover}
.b.media.has-link a{position:absolute;inset:0;z-index:1}
.b.btnb{align-self:center}
.b.social{align-self:start}
.media-ph{background:var(--soft)}

/* video controls */
.vbtn{position:absolute;right:14px;bottom:14px;z-index:2;width:40px;height:40px;border-radius:50%;border:0;background:rgba(17,17,17,.6);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.vbtn svg{width:16px;height:16px}
.vbtn[hidden]{display:none}

/* ---------- Project hero media ---------- */
.proj-hero{width:calc(100% - 2 * var(--gutter));max-width:var(--page-max);margin:8px auto 0;height:min(46vw,720px);border-radius:var(--radius);overflow:hidden;position:relative;background:var(--soft);isolation:isolate}
.proj-hero img,.proj-hero video{width:100%;height:100%;object-fit:cover}
@media (max-width:767px){.proj-hero{height:52vw;margin-top:12px}}

/* project intro block (title / subtitle / tags / intro text) */
.intro{text-align:center;padding-bottom:28px}
.intro h1{margin:0!important;font-size:clamp(40px,5vw,72px)!important;letter-spacing:-.02em;text-wrap:balance}
.intro h1+p{margin:14px 0 22px!important;font-size:22px!important;line-height:1.35;color:var(--muted)}
.intro strong{display:inline-block;margin:0 3px 8px;padding:7px 14px;border-radius:999px;background:var(--green);color:var(--ink);font-size:14px;font-weight:400;line-height:1.3;letter-spacing:-.01em;white-space:nowrap}
.intro>p:nth-child(n+4){max-width:680px;margin:18px auto 0!important;text-align:left;font-size:17px!important;line-height:1.65;color:var(--body)}
.intro>p:nth-child(4){margin-top:36px!important}

/* ---------- Galleries ---------- */
.gal{width:calc(100% - 2 * var(--gutter));max-width:var(--page-max);margin:0 auto}
.gal.full-bleed{width:100%;max-width:none}
.gal.inset{width:calc(100% - 4 * var(--gutter));max-width:calc(var(--page-max) - 2 * var(--gutter))}
.gal-grid{display:grid;grid-template-columns:repeat(var(--cols-m),1fr);gap:var(--g)}
@media (min-width:768px){.gal-grid{grid-template-columns:repeat(var(--cols),1fr)}}
.gal-grid figure{margin:0;aspect-ratio:var(--gar);border-radius:var(--radius);overflow:hidden;background:var(--soft)}
.gal-grid img{width:100%;height:100%;object-fit:cover}
.gal-masonry{columns:var(--cols-m);column-gap:var(--g)}
@media (min-width:768px){.gal-masonry{columns:var(--cols)}}
.gal-masonry figure{margin:0 0 var(--g);break-inside:avoid;border-radius:var(--radius);overflow:hidden}
.gal-masonry img{width:100%;height:auto}
.gal-strips{display:flex;flex-wrap:wrap;gap:var(--g)}
.gal-strips figure{margin:0;flex:var(--iar) 1 calc(var(--iar) * var(--rh));aspect-ratio:var(--iar);border-radius:var(--radius);overflow:hidden}
.gal-strips img{width:100%;height:100%;object-fit:cover}
.gal-strips::after{content:"";flex:999 1 0}
.gal-reel{position:relative}
.gal-reel .track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 var(--gutter)}
.gal-reel .track::-webkit-scrollbar{display:none}
.gal-reel figure{margin:0;flex:0 0 auto;height:var(--vh);scroll-snap-align:center;border-radius:var(--radius);overflow:hidden}
.gal-reel img{height:100%;width:auto}
@media (max-width:767px){.gal-reel figure{height:min(var(--vh),60vw)}}
.gal-ctrl{display:flex;justify-content:center;gap:10px;margin-top:18px}
.gal-ctrl button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:background .2s}
.gal-ctrl button:hover{background:var(--soft)}
.gal-ctrl svg{width:18px;height:18px}
.gal-slides{position:relative;height:var(--sh)}
.gal-slides figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .8s ease}
.gal-slides figure.on{opacity:1}
.gal-slides img{width:100%;height:100%;object-fit:contain}
.gal-slides .gal-ctrl{position:absolute;left:0;right:0;bottom:-8px;margin:0}
@media (max-width:767px){.gal-slides{height:70vw}}

/* ---------- Reveal on scroll ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
  .js .reveal.in{opacity:1;transform:none}
}

/* ---------- Home ---------- */
.hero{width:calc(100% - 2 * var(--gutter));max-width:var(--page-max);margin:0 auto;padding:39px 0 64px}
.hero .hi{margin:0 0 10px;font-size:22px;line-height:1.3;letter-spacing:-.01em;color:var(--muted)}
.hero h1{margin:0 0 28px;font-family:var(--f-head);font-weight:500;font-size:calc(3.6vw + 16px);line-height:1.18;letter-spacing:-.015em;max-width:21ch;text-wrap:balance;word-spacing:-.22em}
.hero h1 span{display:inline-block;margin-right:.22em}
.hero .tags{margin:0}
@media (max-width:767px){.hero{padding:28px 0 40px}.hero h1{font-size:44px}.hero .hi{font-size:19px}}
@media (prefers-reduced-motion:no-preference){
  .hero .hi{animation:is-fade-blur .8s ease .05s both}
  .hero h1 span{animation:is-word .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.25s + var(--i) * .07s)}
  .hero .pill{animation:is-pop .55s cubic-bezier(.2,.8,.2,1.15) both;animation-delay:calc(.75s + var(--i) * .06s)}
}
@keyframes is-fade-blur{from{opacity:0;transform:translateY(14px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes is-word{from{opacity:0;transform:translateY(.35em);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes is-pop{from{opacity:0;transform:translateY(12px) scale(.85)}to{opacity:1;transform:none}}

.reel{position:relative;overflow-x:clip;margin-bottom:7px}
.reel::before{content:"Watch my reel  ·  Watch my reel  ·  Watch my reel  ·  Watch my reel  ·  ";position:absolute;top:50%;left:0;z-index:0;width:max-content;white-space:pre;font-family:var(--f-head);font-weight:500;font-size:clamp(56px,8vw,150px);line-height:1;letter-spacing:-.02em;color:#e2e2de;transform:translate(0,-50%);animation:is-marquee 60s linear infinite;pointer-events:none}
@keyframes is-marquee{from{transform:translate(0,-50%)}to{transform:translate(-50%,-50%)}}
.reel .frame{position:relative;z-index:1;width:calc(100% - 2 * var(--gutter));max-width:var(--page-max);margin:0 auto;aspect-ratio:2/1;border-radius:var(--radius);overflow:hidden;background:var(--soft)}
.reel video{width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    .reel .frame{animation:is-settle linear both;animation-timeline:scroll(root);animation-range:0px 500px}
  }
}
@media (prefers-reduced-motion:reduce){.reel::before{animation:none}}
@keyframes is-settle{from{transform:scale(1);border-radius:20px}to{transform:scale(.82);border-radius:56px}}

.work{width:calc(100% - 2 * var(--gutter));max-width:var(--page-max);margin:0 auto;padding:105px 0 120px;display:grid;grid-template-columns:1fr 1fr;column-gap:25px;row-gap:56px}
@media (max-width:767px){.work{grid-template-columns:1fr;row-gap:44px;padding:56px 0 72px}}
.card{display:block;text-decoration:none;color:inherit}
.card .thumb{aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;isolation:isolate;background:var(--soft)}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card h3{margin:16px 0 0;font-family:var(--f-head);font-size:22px;font-weight:500;line-height:1.25;letter-spacing:-.02em}
.card .sub{margin:2px 0 10px;font-size:15px;line-height:1.4;letter-spacing:-.01em;color:#666}
.card .tags{display:flex;flex-wrap:wrap;gap:6px}
.card .tags span{display:inline-flex;align-items:center;padding:5px 11px;border-radius:999px;background:var(--green);font-size:12px;line-height:1.3;letter-spacing:-.01em;white-space:nowrap}
@media (hover:hover) and (pointer:fine){
  .card .thumb img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
  .card:hover .thumb img{transform:scale(1.06)}
  .card .thumb{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cpath d='M50 5C67 4 86 15 90 35C94 55 85 77 65 87C47 95 23 90 12 72C2 55 5 30 19 16C27 9 38 6 50 5Z' fill='%23111111' fill-opacity='0.72'/%3E%3Ctext x='49' y='46' font-family='Inter,Helvetica Neue,Arial,sans-serif' font-size='12.5' font-weight='500' fill='%23ffffff' text-anchor='middle'%3EOpen%3C/text%3E%3Ctext x='49' y='61' font-family='Inter,Helvetica Neue,Arial,sans-serif' font-size='12.5' font-weight='500' fill='%23ffffff' text-anchor='middle'%3EProject%3C/text%3E%3C/svg%3E") 48 48,pointer}
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .card{animation:is-rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  }
}
@keyframes is-rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}

/* ---------- About ---------- */
.about{width:calc(100% - 2 * var(--gutter));max-width:var(--page-max);margin:0 auto;padding:48px 0;display:grid;grid-template-columns:repeat(24,1fr);column-gap:var(--gap)}
.about .photo{grid-column:4/12;grid-row:1/3;border-radius:30px;overflow:hidden;aspect-ratio:429/685;align-self:start}
.about .photo img{width:100%;height:100%;object-fit:cover}
.about .intro-txt{grid-column:13/21;grid-row:1}
.about .intro-txt h1{margin:0 0 18px;font-family:var(--f-head);font-weight:500;font-size:2.8rem;line-height:1.1;letter-spacing:-.02em}
.about .intro-txt p{margin:0 0 16px;font-size:17px;line-height:1.65;color:var(--body)}
.about .intro-txt p.lead{font-size:22px;line-height:1.45;letter-spacing:-.01em;color:var(--ink)}
.about .intro-txt .btn{margin-top:14px}
.about .cv{grid-column:4/15;grid-row:3;padding-top:48px}
.about .cv h4{margin:28px 0 10px;font-family:var(--f-head);font-size:20px;font-weight:500;letter-spacing:-.02em}
.about .cv h4:first-child{margin-top:0}
.about .cv p{margin:0 0 6px;font-size:16px;line-height:1.6;color:var(--muted)}
.about .cv a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .2s ease}
.about .cv a:hover{border-bottom-color:var(--ink)}
.skills{width:calc(100% - 2 * var(--gutter));max-width:var(--page-max);margin:0 auto;padding:24px 0 64px;display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gap)}
.skills h2{margin:0 0 18px;font-family:var(--f-head);font-weight:500;font-size:28px;letter-spacing:-.02em;line-height:1.18}
.skills .pills{display:flex;flex-wrap:wrap;gap:8px}
.skills .pill{margin:0}
@media (max-width:767px){
  .about{grid-template-columns:1fr;row-gap:28px;padding:28px 0}
  .about .photo,.about .intro-txt,.about .cv{grid-column:1;grid-row:auto}
  .about .photo{aspect-ratio:4/5}
  .about .cv{padding-top:0}
  .skills{grid-template-columns:1fr;row-gap:36px}
}

/* ---------- Contact ---------- */
.contact{width:calc(100% - 2 * var(--gutter));max-width:var(--page-max);margin:0 auto;padding:48px 0 120px;display:grid;grid-template-columns:repeat(24,1fr);column-gap:var(--gap)}
.contact .lhs{grid-column:1/12}
.contact h1{margin:0;font-family:var(--f-head);font-weight:500;font-size:clamp(36px,4vw,56px);line-height:1.18;letter-spacing:-.015em;text-wrap:balance}
.contact .lede{margin:20px 0 0;max-width:34ch;font-size:17px;line-height:1.65;color:var(--body)}
.contact .alt{margin-top:48px}
.contact .alt p{margin:0 0 6px;font-size:15px;color:var(--muted)}
.contact .alt p.mail{margin-bottom:14px;font-size:24px;letter-spacing:-.01em}
.contact .alt a{color:var(--ink);text-decoration:none;border-bottom:1px solid #cfcfca;transition:border-color .2s ease}
.contact .alt a:hover{border-bottom-color:var(--ink)}
.form-card{grid-column:14/25;align-self:start;position:relative;overflow:hidden;isolation:isolate;padding:40px;border-radius:var(--radius);background:var(--soft)}
.form-card::before{content:"";position:absolute;z-index:-1;top:-180px;right:-160px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(170,238,196,.9) 0%,rgba(170,238,196,0) 65%);animation:is-drift 16s ease-in-out infinite alternate;pointer-events:none}
@keyframes is-drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-90px,70px) scale(1.15)}100%{transform:translate(-30px,160px) scale(.95)}}
@media (prefers-reduced-motion:reduce){.form-card::before{animation:none}}
.form-card fieldset{border:0;margin:0 0 18px;padding:0}
.form-card legend{padding:0;margin-bottom:8px;font-size:14px;font-weight:500}
.form-card .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-card label{display:block;margin-bottom:18px;font-size:14px;font-weight:500}
.form-card fieldset label{margin-bottom:0;font-weight:400;font-size:13px;color:var(--muted)}
.form-card input,.form-card textarea{display:block;width:100%;margin-top:6px;border-radius:12px;border:1px solid var(--line);background:#fff;padding:14px 16px;font:inherit;font-size:16px;color:var(--ink);transition:border-color .2s ease}
.form-card textarea{min-height:140px;resize:vertical}
.form-card input:focus,.form-card textarea:focus{border-color:var(--ink);outline:none}
.form-card .hp{position:absolute;left:-5000px}
.form-status{margin:14px 0 0;font-size:15px}
@media (max-width:767px){
  .contact{grid-template-columns:1fr;row-gap:32px;padding:28px 0 72px}
  .contact .lhs,.form-card{grid-column:1}
  .form-card{padding:24px}
}

/* ---------- Project pagination ---------- */
.pager{width:calc(100% - 2 * var(--gutter));max-width:var(--page-max);margin:0 auto;padding:48px 0 32px;display:flex;justify-content:space-between;gap:24px}
.pager a{display:flex;align-items:center;gap:16px;text-decoration:none;max-width:48%}
.pager .next{margin-left:auto;text-align:right}
.pager small{display:block;font-size:14px;color:var(--muted)}
.pager strong{display:block;font-family:var(--f-head);font-weight:500;font-size:calc(1.44vw + 16px);line-height:1.18;letter-spacing:-.02em}
.pager svg{flex:0 0 auto;width:28px;height:28px;transition:transform .25s ease}
.pager .prev:hover svg{transform:translateX(-4px)}
.pager .next:hover svg{transform:translateX(4px)}
@media (max-width:767px){.pager strong{font-size:22px}.pager svg{width:22px;height:22px}}

/* ---------- Footer ---------- */
.site-footer{width:calc(100% - 2 * var(--gutter));max-width:var(--page-max);margin:24px auto 40px;padding:56px 48px;border-radius:var(--radius);background:var(--soft);display:grid;grid-template-columns:repeat(24,1fr);column-gap:var(--gap);align-items:start}
.site-footer .say{grid-column:1/9}
.site-footer h3{margin:0;font-family:var(--f-head);font-weight:500;font-size:calc(1.2vw + 16px);line-height:1.18;letter-spacing:-.02em}
@media (min-width:1024px){.site-footer h3{white-space:nowrap}}
.site-footer .mail{margin:24px 0 0;font-size:calc(.36vw + 16px)}
.site-footer .mail a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.site-footer .social{grid-column:10/18;display:flex;gap:12px}
.social a{display:inline-grid;place-items:center;width:32px;height:32px;color:var(--ink)}
.social svg{width:24px;height:24px}
@media (max-width:767px){
  .site-footer{grid-template-columns:1fr;row-gap:24px;padding:40px 24px}
  .site-footer .say,.site-footer .social{grid-column:1}
  .site-footer h3{font-size:27px}
}

/* 404 */
.notfound{width:calc(100% - 2 * var(--gutter));max-width:var(--page-max);margin:0 auto;padding:12vh 0}
.notfound h1{font-family:var(--f-head);font-weight:500;font-size:clamp(40px,6vw,88px);letter-spacing:-.02em;line-height:1.1;margin:0 0 20px}
.notfound p{color:var(--muted);margin:0 0 28px}

/* contain-mode videos keep their own aspect ratio inside the block */
.b.media.contain video{position:static;width:min(100cqw,calc(100cqh * var(--iar)));height:auto;aspect-ratio:var(--iar);border-radius:var(--r,0);object-fit:cover}
.b.media.contain .vbtn{right:auto;left:14px}

/* Project pages on phones: blocks stack in one column, like the original site */
@media (max-width:767px){
  .sec:has(.stack-m){padding:28px 0}
  .grid.stack-m{display:flex;flex-direction:column;gap:20px;padding:0 6vw}
  .grid.stack-m>.b{order:var(--o,999);width:100%;grid-area:auto}
  .grid.stack-m>.b.media{aspect-ratio:4/3;border-radius:var(--r,0);overflow:hidden;container-type:normal;display:block}
  .grid.stack-m>.b.media img,.grid.stack-m>.b.media video,.grid.stack-m>.b.media iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;aspect-ratio:auto}
  .grid.stack-m>.b.media:has(video),.grid.stack-m>.b.media:has(iframe){aspect-ratio:16/9}
}