:root{
    --bg:#0d0a11; --ink:#efe9df; --muted:#978f9e; --line:rgba(239,233,223,.13); --lime:#d8e49c;
    --serif:"Cormorant Garamond","Cormorant",Garamond,Georgia,serif;
    --display:var(--serif);
    --text:"Geologica","Helvetica Neue",Arial,system-ui,sans-serif;
    --sans:var(--text);
    --pad:clamp(20px,5vw,80px);
    box-sizing:border-box; color-scheme:dark;
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  *,*::before,*::after{box-sizing:inherit}
  html{background:var(--bg); scroll-behavior:smooth}
  body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-weight:300; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden}
  a{color:inherit; text-decoration:none}
  button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
  a:focus-visible,button:focus-visible{outline:1px solid var(--lime); outline-offset:5px}
  img{display:block; max-width:100%}

  /* 1. hero: half-height band, paintings cropped top/bottom, change by themselves */
  .hero{position:relative; height:50svh; min-height:340px; overflow:hidden; isolation:isolate}
  .bg{position:absolute; inset:0; z-index:-2}
  .bg{overflow:hidden}
  .bg img{position:absolute; max-width:none; opacity:0; transform:scale(1);
    transition:opacity 2s ease, transform 9s linear}
  .bg img.on{opacity:.9; transform:scale(1.05)}
  .hero::after{content:""; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(to bottom, rgba(13,10,17,.15) 0%, rgba(13,10,17,.35) 50%, var(--bg) 100%)}
  .hero-in{position:absolute; left:var(--pad); right:var(--pad); bottom:clamp(24px,5vh,56px)}
  h1{font-family:var(--display); font-weight:300; font-size:clamp(50px,8vw,124px); line-height:.95; white-space:nowrap; letter-spacing:-.015em; margin:0; text-shadow:0 2px 40px rgba(0,0,0,.35)}
  .tag{margin:clamp(12px,2vh,22px) 0 0; font-size:17px; max-width:32ch}
  .dots{position:absolute; right:var(--pad); bottom:clamp(24px,5vh,56px); display:flex; gap:8px}
  .dots i{width:6px; height:6px; border-radius:50%; background:rgba(239,233,223,.3); transition:background .6s}
  .dots i.on{background:var(--ink)}

  /* 2. fixed top navigation, always on screen */
  .nav{position:fixed; top:0; left:0; right:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:24px;
    padding:calc(env(safe-area-inset-top,0px) + 16px) var(--pad) 16px;
    background:linear-gradient(to bottom, rgba(13,10,17,.55), rgba(13,10,17,0)); transition:background .4s, box-shadow .4s}
  .nav.solid{background:rgba(13,10,17,.86); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line)}
  .brand{display:flex; align-items:center; gap:12px; white-space:nowrap}
  .brand img{width:52px; height:52px; flex:none; transition:transform .6s ease; filter:drop-shadow(0 0 8px rgba(13,10,17,.75)) drop-shadow(0 1px 12px rgba(0,0,0,.5))}
  .brand:hover img{transform:rotate(40deg)}
  .brand span{font-family:var(--display); font-weight:400; font-size:22px; opacity:0; transform:translateX(-6px); transition:opacity .4s, transform .4s}
  .nav.solid .brand span{opacity:1; transform:none}
  .hmark, .totop{display:none}
  .links{display:flex; gap:clamp(24px,3.2vw,52px); font-size:16.5px; font-weight:400; letter-spacing:.01em}
  .links a{position:relative; padding:4px 0; color:rgba(239,233,223,.8); transition:color .3s; text-shadow:0 1px 12px rgba(0,0,0,.4)}
  .links a:hover, .links a.on{color:var(--ink)}
  .links a::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--lime); transform:scaleX(0); transform-origin:left; transition:transform .35s}
  .links a.on::after{transform:scaleX(1)}

  /* projects: a series of works with a year, a title and a link to the project page */
  #projects{padding-top:clamp(110px,18vh,200px)}
  .proj{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(28px,5vw,96px); align-items:end; max-width:1400px; padding-top:clamp(28px,4vh,44px)}
  .proj + .proj{margin-top:clamp(56px,8vh,96px); border-top:1px solid var(--line)}
  .head.sub h3{font-family:var(--serif); font-weight:300; font-size:clamp(28px,3vw,44px); line-height:1.1; margin:0}
  .psub{margin:0 0 clamp(24px,4vh,36px); font-size:16px; color:var(--muted)}
  .ptitle{font-family:var(--serif); font-weight:300; font-size:clamp(44px,5.6vw,88px); line-height:1; letter-spacing:-.01em; margin:0 0 clamp(28px,4vh,48px)}
  .p2026{max-width:1400px; padding-top:clamp(28px,4vh,44px); margin-bottom:clamp(56px,8vh,96px); padding-bottom:clamp(56px,8vh,96px); border-bottom:1px solid var(--line)}
  .pcover{display:block; width:100%; background:#17121b; overflow:hidden; cursor:pointer}
  .pcover img{width:100%; height:auto; transition:transform .8s ease}
  .pcover:hover img{transform:scale(1.025)}
  .pyear{margin:0 0 14px; font-size:13px; letter-spacing:.18em; color:var(--lime); font-variant-numeric:tabular-nums}
  .pinfo h3{font-family:var(--serif); font-weight:300; font-size:clamp(44px,5.6vw,88px); line-height:1; letter-spacing:-.01em; margin:0 0 clamp(24px,4vh,40px)}
  .pworks{list-style:none; margin:0 0 clamp(24px,4vh,36px); padding:0; display:grid; gap:2px}
  .pworks button{display:block; width:100%; text-align:left; padding:10px 0; border-top:1px solid var(--line); font-size:15px; color:var(--ink); transition:color .3s}
  .pworks li:last-child button{border-bottom:1px solid var(--line)}
  .pworks button span{display:block; font-size:13px; color:var(--muted); margin-top:2px}
  .pworks button:hover{color:var(--lime)}
  .plink{display:inline-flex; align-items:center; gap:10px; font-size:15px; color:var(--ink); padding-bottom:4px;
    background:linear-gradient(var(--lime),var(--lime)) 0 100%/100% 1px no-repeat; transition:color .3s, gap .3s}
  .plink:hover{color:var(--lime); gap:16px}

  /* 3. welcome: photo and Uma's words, right under the slider */
  .about{display:grid; grid-template-columns:auto minmax(0,780px); justify-content:center; align-items:center; gap:clamp(40px,6vw,112px);
    padding:clamp(64px,10vh,120px) var(--pad) clamp(110px,18vh,190px); text-align:center}
  .ava{width:clamp(260px,29vw,420px); aspect-ratio:1; border-radius:2px; overflow:hidden; background:#1c1722; box-shadow:0 0 0 1px var(--line)}
  .ava img{width:100%; height:100%; object-fit:cover; filter:grayscale(1)}
  .about blockquote{margin:0}
  .about .q1{font-family:var(--display); font-weight:400; font-size:clamp(36px,4vw,62px); line-height:1.12; letter-spacing:-.008em; margin:0 auto .65em; max-width:24ch; text-wrap:balance}
  .about .q2{font-family:var(--text); font-weight:300; font-size:clamp(17px,1.5vw,23px); line-height:1.8; color:rgba(239,233,223,.88); margin:0 auto; max-width:46ch; text-wrap:pretty}

  section{padding:0 var(--pad); scroll-margin-top:98px}
  .head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:clamp(32px,5vh,56px)}
  h2{font-family:var(--serif); font-weight:300; font-size:clamp(42px,5.4vw,80px); line-height:1; margin:0; letter-spacing:-.01em}
  .count{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums}

  /* 3. gallery: rows of equal-height paintings, bottom-aligned (2 horizontal or 3 vertical per row) */
  .gallery{display:flex; flex-direction:column; gap:clamp(32px,3.6vw,56px); position:relative}
  .grow{display:flex; gap:clamp(16px,1.8vw,28px); align-items:flex-end}
  .grow.hid{display:none}
  .gallery.folded::after{content:""; position:absolute; left:0; right:0; bottom:0; height:120px; pointer-events:none;
    background:linear-gradient(to bottom, rgba(13,10,17,0), var(--bg))}
  .more{display:flex; justify-content:center; margin-top:clamp(28px,3vw,44px)}
  .more button{font:inherit; font-size:15px; color:var(--ink); background:none; border:1px solid var(--line); border-radius:999px;
    padding:12px 26px; cursor:pointer; transition:border-color .3s, color .3s}
  .more button:hover{border-color:var(--lime); color:var(--lime)}
  .more[hidden]{display:none}
  .grow > *{flex:var(--a) 1 0; min-width:0}
  .grow figcaption{flex-direction:column; gap:2px; margin-top:10px; font-size:12px}
  .grow figcaption span:first-child{font-size:18px}
  .grow figcaption span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  figure{margin:0}
  figure img{width:100%; height:auto; cursor:zoom-in; transition:opacity .4s}
  figure img:hover{opacity:.9}
  figcaption{display:flex; justify-content:space-between; gap:16px; margin-top:14px; font-size:13px; color:var(--muted)}
  figcaption span:first-child{font-family:var(--serif); font-weight:500; font-size:21px; line-height:1.2; color:var(--ink)}

  /* phone: small square tiles; a tap opens the painting, arrows page through them */
  .tiles, .tmore{display:none}
  @media (max-width:760px){
    .gallery, .more{display:none!important}
    .tiles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px}
    .tile{position:relative; aspect-ratio:1; overflow:hidden; background:#17121b; padding:0; border:0; display:block}
    .tile img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
    .tile:active img{transform:scale(1.06)}
    .tile.hid{display:none}
    .tmore{display:flex; justify-content:center; margin-top:22px}
    .tmore[hidden]{display:none}
    .tmore button{font-size:15px; color:var(--ink); border:1px solid var(--line); border-radius:999px; padding:12px 26px}
  }

  /* 4. text sections */
  .text{display:grid; grid-template-columns:1fr 2fr; gap:clamp(28px,6vw,110px); padding-top:clamp(120px,20vh,220px); max-width:1400px}
  .lead{font-size:clamp(21px,2.1vw,30px); line-height:1.45; margin:0 0 1.1em; max-width:32ch}
  .body{color:var(--muted); font-size:16px; line-height:1.8; max-width:54ch; margin:0 0 1em}
  /* poetry: a photographic backdrop per cycle; first lines on the left, the chosen poem opens on the right and pages */
  #poetry{position:relative; isolation:isolate; overflow:hidden; padding-bottom:clamp(100px,16vh,180px)}
  .pbgs{position:absolute; inset:0; z-index:-1; background:var(--bg)}
  .pbgs i{position:absolute; inset:0; background-size:cover; background-repeat:no-repeat; opacity:0; transition:opacity 1.1s ease}
  .pbgs i.on{opacity:1}
  .pbgs i:nth-child(1){background-image:url(assets/embedded-2.jpg); background-position:50% 62%}
  .pbgs i:nth-child(2){background-image:url(assets/embedded-3.jpg); background-position:40% 42%}
  .pbgs i:nth-child(3){background-image:url(assets/embedded-4.jpg); background-position:50% 38%}
  .pbgs::after{content:""; position:absolute; inset:0;
    background:linear-gradient(to bottom, var(--bg) 0%, rgba(13,10,17,.5) 24%, rgba(13,10,17,.5) 74%, var(--bg) 100%)}
  .ptabs{display:flex; flex-wrap:wrap; gap:clamp(22px,3vw,40px); border-bottom:1px solid rgba(239,233,223,.22); margin-bottom:clamp(28px,3.4vw,48px)}
  .ptabs button{font-family:var(--serif); font-size:clamp(24px,2.2vw,32px); font-weight:400; color:rgba(239,233,223,.62); padding:0 0 14px; position:relative; transition:color .3s}
  .ptabs button::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--lime); transform:scaleX(0); transform-origin:left; transition:transform .35s}
  .ptabs button.on, .ptabs button:hover{color:var(--ink)}
  .ptabs button.on::after{transform:scaleX(1)}
  #poetry .text{grid-template-columns:minmax(0,.8fr) minmax(0,2.2fr)}
  .pwrap{display:grid; grid-template-columns:minmax(200px,310px) minmax(0,1fr); gap:clamp(28px,3.4vw,56px); align-items:start}
  .plist{list-style:none; margin:0; padding:0}
  .pitem{display:block; width:100%; text-align:left; padding:13px 0 13px 18px; border-left:1px solid rgba(239,233,223,.22);
    font-family:var(--serif); font-size:clamp(20px,1.7vw,24px); line-height:1.3; color:rgba(239,233,223,.8); text-shadow:0 1px 18px rgba(0,0,0,.6); transition:color .3s, border-color .3s}
  .pitem:hover{color:var(--ink); border-left-color:rgba(239,233,223,.6)}
  .pitem.on{color:var(--lime); border-left-color:var(--lime)}
  .pread{scroll-margin-top:90px; padding:clamp(4px,.4vw,6px) 0}
  .phint{margin:12px 0 0; font-size:15px; color:rgba(239,233,223,.62); max-width:30ch; line-height:1.6}
  .pread.open{background:rgba(13,10,17,.38); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); padding:clamp(22px,2.6vw,38px); border-radius:2px}
  .pread.open .phint{display:none}
  .pstage{display:none}
  .pread.open .pstage{display:block}
  .ptext{font-family:var(--text); font-weight:300; font-size:clamp(15px,1.15vw,17px); line-height:1.8; color:var(--ink); max-width:60ch}
  .ptext.in{animation:pin .5s ease}
  @keyframes pin{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
  .ptext span{display:block; padding-left:1.2em; text-indent:-1.2em}
  .pctl{display:none; align-items:center; gap:12px; margin-top:clamp(24px,3vw,36px)}
  .pread.open .pctl{display:flex}
  .parr{width:44px; height:44px; border:1px solid rgba(239,233,223,.32); border-radius:50%; display:grid; place-items:center; color:var(--ink); transition:border-color .3s, color .3s}
  .parr svg{width:18px; height:18px}
  .parr:hover{border-color:var(--lime); color:var(--lime)}
  .pclose{margin-left:auto; font-size:13px; letter-spacing:.02em; color:rgba(239,233,223,.7)}
  .pclose:hover{color:var(--lime)}
  @media (prefers-reduced-motion:reduce){.ptext.in{animation:none}}
  .mail{font-family:var(--serif); font-weight:300; font-size:clamp(38px,6.6vw,96px); line-height:1.05; letter-spacing:-.02em; word-break:break-word;
    background:linear-gradient(var(--lime),var(--lime)) 0 100%/0 1px no-repeat; transition:background-size .5s; padding-bottom:6px}
  .mail:hover{background-size:100% 1px}
  .clabel{margin:0 0 6px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
  .soc{display:flex; flex-wrap:wrap; gap:14px 44px; margin-top:44px; font-size:15px; color:var(--ink)}
  .soc a{display:flex; flex-direction:column; gap:3px; transition:color .3s}
  .soc a span{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
  .soc a:hover{color:var(--lime)}
  footer{display:flex; justify-content:space-between; padding:clamp(120px,20vh,200px) var(--pad) 40px; font-size:12px; color:var(--muted)}

  /* viewer */
  .viewer{position:fixed; inset:0; z-index:30; background:#060508; display:grid; grid-template:100% / 100%;
    padding:calc(env(safe-area-inset-top,0px) + 60px) 70px calc(env(safe-area-inset-bottom,0px) + 60px);
    opacity:0; pointer-events:none; transition:opacity .35s}
  .viewer.open{opacity:1; pointer-events:auto}
  .viewer img{width:100%; height:100%; min-height:0; object-fit:contain}
  .vbtn{position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; display:grid; place-items:center; color:var(--muted)}
  .vbtn:hover{color:var(--ink)}
  .vbtn svg{width:22px; height:22px}
  .vprev{left:12px} .vnext{right:12px}
  .vclose{position:absolute; top:calc(env(safe-area-inset-top,0px) + 18px); right:24px; font-size:14px; color:var(--muted)}
  /* a work with a poem: painting on the left, text on the right (on phones — below) */
  .vpoem{display:none}
  .viewer.poem{grid-template:100% / minmax(0,1fr) auto; column-gap:clamp(28px,2.8vw,44px); padding-left:60px; padding-right:60px}
  .viewer.poem .vpoem{display:flex; flex-direction:column; justify-content:center; min-height:0}
  .viewer.poem .vcap{display:none}
  .vtext span{display:block; padding-left:1.2em; text-indent:-1.2em}
  @media (min-width:761px){ .vtext span{white-space:nowrap} .viewer.poem .vpoem{max-width:420px} }
  .viewer.poem img{object-position:right center}
  .vpoem h3{font-family:var(--serif); font-weight:400; font-size:clamp(30px,2.6vw,40px); line-height:1.1; margin:0}
  .vpoem .vmeta{font-size:13px; color:var(--muted); margin:10px 0 0}
  .vpoem .vtext{font-family:var(--text); font-weight:300; font-size:clamp(15px,1.1vw,17px); line-height:1.75; color:var(--ink);
    margin:clamp(28px,4vh,44px) 0 0; padding-left:20px; border-left:1px solid var(--lime)}
  .vcap{position:absolute; bottom:calc(env(safe-area-inset-bottom,0px) + 20px); left:0; right:0; text-align:center; font-family:var(--serif); font-size:20px}

  @media (max-width:760px){
    .nav{padding-top:calc(env(safe-area-inset-top,0px) + 12px); padding-bottom:12px}
    .brand{display:none}
    .hmark{display:block; width:58px; height:58px; margin:0 0 10px; filter:drop-shadow(0 2px 14px rgba(0,0,0,.45))}
    .totop{display:grid; place-items:center; position:fixed; right:16px; bottom:calc(env(safe-area-inset-bottom,0px) + 16px); z-index:19; width:54px; height:54px; border-radius:50%;
      background:rgba(13,10,17,.78); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 0 0 1px var(--line), 0 6px 24px rgba(0,0,0,.4);
      opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity .35s, transform .35s}
    .totop.show{opacity:1; transform:none; pointer-events:auto}
    .totop img{width:36px; height:36px}
    .links{width:100%; justify-content:space-between; gap:18px; font-size:14px; white-space:nowrap; overflow-x:auto; scrollbar-width:none; padding-right:2px}
    .links::-webkit-scrollbar{display:none}
    .links.fade{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent)}
    .proj{grid-template-columns:minmax(0,1fr); gap:24px}
    .ptitle{font-size:46px; margin-bottom:22px}
    .pinfo h3{font-size:46px; margin-bottom:22px}
    .hero{height:44svh; min-height:300px}
    .text{grid-template-columns:1fr}
    .about{grid-template-columns:minmax(0,1fr); justify-items:center; gap:28px; padding-top:36px; padding-bottom:100px}
    .ava{width:min(58vw,230px)}
    .about .q1{font-size:31px; line-height:1.18}
    .about .q2{font-size:16.5px; line-height:1.7}
    .ptabs{gap:18px; flex-wrap:nowrap}
    .pwrap{grid-template-columns:minmax(0,1fr); gap:22px}
    .pread.open{order:-1; padding:22px 18px}
    .phint{display:none}
    .pitem{font-size:21px}
    .ptabs button{font-size:21px; white-space:nowrap}
    .dots{display:none}
    .viewer{padding-left:16px; padding-right:16px}
    .viewer.poem img{height:auto; max-height:58svh}
    .viewer.poem{grid-template:auto auto / 100%; padding-right:16px; overflow-y:auto; align-content:start; row-gap:26px}
    .viewer.poem img{object-position:center}
    .viewer.poem .vpoem{justify-content:flex-start; padding:0 8px 100px}
    .viewer{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 92px)}
    .vbtn{position:fixed; top:auto; bottom:calc(env(safe-area-inset-bottom,0px) + 18px); transform:none; width:50px; height:50px; border-radius:50%;
      color:var(--ink); background:rgba(239,233,223,.08); border:1px solid rgba(239,233,223,.28)}
    .vprev{left:16px} .vnext{right:16px}
    .vcap{left:76px; right:76px; bottom:calc(env(safe-area-inset-bottom,0px) + 20px); font-size:17px; line-height:1.25}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important} html{scroll-behavior:auto}}