/* marianasakurada.com · draft 7
   Hairline boxed grid, Newsreader light + Hanken Grotesk, hot pink, day-to-night light. */
:root{
  --paper:#f6f6f6; --ink:#000; --mute:#6b6b6b; --line:#000; --card:#fff;
  --accent:#ff2e74; --hero:#ff2e74; --hero-ink:#000;
  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink); font:400 16px/1.45 var(--body); overflow-x:hidden; -webkit-font-smoothing:antialiased}
a{color:inherit; text-decoration:none}
h1,h2,h3,p,figure,dl,dd{margin:0}
button,select,input{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
img{max-width:100%; display:block}
.mono{font-family:var(--mono)}

/* ---------- header ---------- */
.hd{position:sticky; top:0; z-index:20; display:grid; grid-template-columns:1.15fr 1.25fr 1.15fr .85fr auto; height:56px; border:1px solid var(--line); background:color-mix(in srgb,var(--paper) 84%,transparent); backdrop-filter:blur(8px)}
.cell{border-right:1px solid var(--line); display:flex; align-items:center; min-width:0; padding:0 14px}
.cell:last-child{border-right:0}
.clocks{gap:18px}
.clock{display:flex; align-items:center; gap:8px}
.clock svg{width:26px; height:26px; flex:none}
.clock circle{fill:none; stroke:var(--ink); stroke-width:1}
.clock line{stroke:var(--ink); stroke-linecap:round; transform-origin:12px 12px}
.clock .h{stroke-width:1.6}.clock .m{stroke-width:1}
.clock span{display:grid; line-height:1.05}
.clock b{font:500 9px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase}
.clock time{font:400 13px/1.2 var(--mono); font-variant-numeric:tabular-nums}
.name{justify-content:center; text-align:center}
.name a{font:400 19px/1.1 var(--display); letter-spacing:-.005em}
.nav{justify-content:center; gap:22px; font-size:15px}
.nav a{position:relative}
.nav a:hover,.nav a[aria-current="page"]{font-family:var(--display); font-style:italic}
.nav a[aria-current="page"]::before{content:""; position:absolute; left:-12px; top:50%; width:6px; height:6px; margin-top:-3px; border-radius:50%; background:var(--accent)}
.light{gap:8px; justify-content:center}
.ico{width:20px; height:20px; flex:none; fill:none; stroke:var(--ink); stroke-width:1.2; stroke-linecap:round}
#dusk{width:100%; max-width:140px; accent-color:var(--accent)}
/* language switcher */
.langs{gap:10px; font:500 11px/1 var(--mono); letter-spacing:.06em}
.langs a{opacity:.55; padding:4px 0}
.langs a:hover,.langs a[aria-current="true"]{opacity:1}
.langs a[aria-current="true"]{border-bottom:1px solid var(--accent)}
.menu-btn{display:none}

/* phone and small tablet: one line (name + Menu), everything else in a full-screen panel */
@media (max-width:860px){
  .hd{grid-template-columns:1fr auto; height:auto; align-items:stretch}
  .name{justify-content:flex-start; padding-block:14px; border-right:1px solid var(--line)}
  .name a{font-size:18px}
  .menu-btn{display:inline-flex; align-items:center; gap:10px; background:none; border:0; padding:0 16px; font:500 14px/1 var(--body); color:var(--ink); cursor:pointer}
  .menu-ico{display:grid; gap:5px; width:20px}
  .menu-ico i{display:block; height:1px; background:var(--ink); transition:transform .25s}
  .hd .clocks,.hd .nav,.hd .light,.hd .langs{display:none}
  .hd.open{position:fixed; inset:0; height:100dvh; overflow-y:auto; grid-template-columns:1fr auto; grid-auto-rows:min-content; background:var(--paper); backdrop-filter:none}
  .hd.open .menu-ico i:first-child{transform:translateY(3px) rotate(45deg)}
  .hd.open .menu-ico i:last-child{transform:translateY(-3px) rotate(-45deg)}
  .hd.open .nav,.hd.open .langs,.hd.open .light,.hd.open .clocks{display:flex; grid-column:1 / -1; border-right:0; border-top:1px solid var(--line); padding:20px 18px}
  .hd.open .nav{flex-direction:column; align-items:flex-start; gap:6px; padding-block:28px}
  .hd.open .nav a{font:300 44px/1.1 var(--display); letter-spacing:-.02em}
  .hd.open .nav a[aria-current="page"]::before{left:-14px}
  .hd.open .langs{gap:22px; font-size:14px; justify-content:flex-start}
  .hd.open .light{justify-content:flex-start; gap:14px}
  .hd.open #dusk{max-width:none; flex:1}
  .hd.open .clocks{justify-content:flex-start; gap:28px}
  .hd.open .name,.hd.open .menu-btn{order:0}
  .hd.open .nav{order:1}
  .hd.open .langs{order:2}
  .hd.open .light{order:3}
  .hd.open .clocks{order:4}
  body.menu-open{overflow:hidden}
}

/* ---------- hero: name left, bouncing "Art for public space" right ---------- */
.hero{position:relative; overflow:hidden; background:var(--hero); color:var(--hero-ink); border-inline:1px solid var(--line); transition:background .2s; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); min-height:clamp(480px,72vh,720px)}
.hero::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(0,0,0,.08) 1px,transparent 1px); background-size:5px 5px; pointer-events:none}
.hero::after{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(50% 60% at 70% 45%, color-mix(in srgb,var(--accent) 65%,transparent), transparent 70%); opacity:var(--glow,0)}
.hero-text{position:relative; z-index:1; display:grid; align-content:end; gap:24px; padding:clamp(28px,5vw,64px) max(18px,env(safe-area-inset-left,0px)) 40px}
.big{font:300 clamp(54px,9vw,140px)/.9 var(--display); letter-spacing:-.035em}
.lede{font-size:clamp(15px,1.5vw,19px); line-height:1.4; max-width:34ch}
.hero-art{position:relative; border-left:1px solid var(--hero-ink); min-height:420px; display:grid; place-items:center}
.hero-art h2{font:300 clamp(36px,4vw,62px)/1 var(--display); letter-spacing:-.02em; text-align:center; width:90%}
.bubble-layer{position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden}
.bubble-layer .rail{border-color:var(--hero-ink)}
.bubble-layer .ball{pointer-events:auto; background:#fff; color:#000; border:1px solid #000}
.bubble-layer .ball:hover,.bubble-layer .ball.hit{background:#000; color:#fff; border-color:#000}
.ball.photo{padding:0; overflow:hidden; border-style:solid; background:#000}
.ball.photo img{width:100%; height:100%; object-fit:cover; object-position:50% 18%; filter:grayscale(1) contrast(1.1); border-radius:50%}
@media (max-width:820px){ .hero{grid-template-columns:1fr} .hero-art{border-left:0; border-top:1px solid var(--hero-ink); min-height:300px} .hero-text{padding-bottom:30px} }

/* ---------- two rectangles ---------- */
.duo{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid var(--line); border-top:0}
.col{border-right:1px solid var(--line); min-height:440px; position:relative; min-width:0}
.col:last-child{border-right:0}
@media (max-width:820px){ .duo{grid-template-columns:1fr} .col{border-right:0; border-bottom:1px solid var(--line)} .col:last-child{border-bottom:0} }
.rail{position:absolute; top:0; bottom:0; width:10px; border:1px dotted var(--line); z-index:2}
.rail.l{left:0}.rail.r{right:0}
.ball{position:absolute; left:0; top:0; width:108px; height:108px; border-radius:50%; border:1px dotted var(--line); display:grid; place-items:center; text-align:center; font-size:13.5px; line-height:1.15; padding:10px; cursor:pointer; background:transparent; z-index:1; transition:background .2s; will-change:transform; user-select:none}
.ball:hover,.ball.hit{background:var(--accent); color:#000; border-style:solid}
#strings{padding:30px 9%; display:flex; flex-direction:column; justify-content:center}
#strings h3,#balance h3{text-align:center; font:400 16px/1.2 var(--display); font-style:italic; margin-bottom:22px}
.pair{display:flex; align-items:center; font:300 clamp(17px,1.6vw,23px)/1.2 var(--display); padding:9px 0}
.pair .w{white-space:nowrap}
.str{flex:1; height:22px; margin:0 14px; min-width:24px; cursor:pointer; position:relative; background:none; border:0; padding:0}
.str svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.str path{stroke:var(--ink); stroke-width:1; fill:none; vector-effect:non-scaling-stroke}
.str.dot path{stroke-dasharray:1 4}
.str.ring path{stroke:var(--accent); stroke-width:2}
#balance{display:flex; flex-direction:column; justify-content:center; align-items:center; padding:30px 8%}
.seesaw{width:86%; margin-top:30px}
.beam{height:2px; background:var(--ink); position:relative; transition:transform .7s cubic-bezier(.3,1.7,.5,1)}
.beam .w{position:absolute; bottom:8px; border:0; background:none; padding:4px 2px; cursor:pointer; font:300 clamp(20px,2vw,28px)/1 var(--display); transition:color .3s}
.beam .w.l{left:0}.beam .w.r{right:0}
.beam .w:hover,.beam .w:focus-visible{color:var(--accent); font-style:italic}
.pivot{width:0; height:0; margin:0 auto; border-left:13px solid transparent; border-right:13px solid transparent; border-bottom:20px solid var(--ink)}
.nextpair{margin-top:34px; display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:transparent; border-radius:40px; padding:6px 14px 6px 8px; cursor:pointer; font-size:14px}
.nextpair svg{width:20px; height:20px; fill:none; stroke:var(--ink); stroke-width:1.2; stroke-linecap:round}

/* ---------- featured ---------- */
.featured{position:relative; border-inline:1px solid var(--line); padding-bottom:30px}
.preview{position:relative; height:clamp(240px,42vh,420px); display:grid; place-items:center; overflow:hidden}
.pv-field{position:absolute; inset:24px 18% 18px; opacity:0; transform:scale(.97); transition:opacity .45s,transform .6s}
.preview.on .pv-field{opacity:1; transform:none}
.pv-title{position:relative; font:300 clamp(34px,5.4vw,78px)/1 var(--display); letter-spacing:-.02em; opacity:0; transition:opacity .4s; color:#000; text-align:center; padding:0 20px}
.preview.on .pv-title{opacity:1}
.pv-title:hover{font-style:italic}
.liquid{height:60px; position:relative; margin:0 14px}
.liquid svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.liquid path{stroke:var(--ink); stroke-width:1.2; fill:none}
.cols{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; padding:0 14px}
.pcol{cursor:pointer; display:grid; gap:8px; align-content:start}
.pcol h3{font:500 12px/1.2 var(--mono); letter-spacing:.06em; text-transform:uppercase}
.pcol p{font-size:14px; line-height:1.45; text-align:justify; hyphens:auto}
.pcol:hover h3,.pcol:focus-visible h3,.pcol.on h3{color:var(--accent)}
@media (max-width:820px){ .cols{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .cols{grid-template-columns:1fr} }

/* ---------- index ---------- */
.index{border:1px solid var(--line)}
.index-top{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; padding:16px max(16px,env(safe-area-inset-left,0px)); border-bottom:1px solid var(--line)}
.index-top h2{font:300 28px/1 var(--display)}
.filters{display:flex; flex-wrap:wrap; gap:8px}
.filters button{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); background:transparent; border-radius:40px; padding:5px 14px 5px 9px; font-size:14px; cursor:pointer; transition:transform .3s,background .2s,color .2s}
.filters button::before{content:""; width:9px; height:9px; border-radius:50%; border:1px solid currentColor}
.filters button:hover{transform:translateY(-2px) rotate(-2deg)}
.filters button[aria-pressed="true"]{background:var(--ink); color:var(--paper)}
.filters button[aria-pressed="true"]::before{background:var(--accent); border-color:var(--accent)}
.table-wrap{overflow-x:auto}
table{width:100%; border-collapse:collapse; min-width:640px}
th,td{padding:14px max(16px,env(safe-area-inset-left,0px)); text-align:left; border-bottom:1px dotted var(--line); vertical-align:baseline}
th{font:400 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--mute)}
td.y{font:400 13px/1 var(--mono); width:110px; color:var(--mute); font-variant-numeric:tabular-nums}
td.t{font:300 clamp(19px,2.1vw,28px)/1.15 var(--display)}
td.t a:hover{font-style:italic}
td.p,td.r{font-size:14px}
tbody tr{transition:background .2s}
tbody tr:hover{background:color-mix(in srgb,var(--accent) 22%,transparent)}
tr.hide{display:none}

/* ---------- inner pages ---------- */
.page{border-inline:1px solid var(--line)}
.page-head{padding:clamp(40px,7vw,90px) max(18px,env(safe-area-inset-left,0px)) 36px; border-bottom:1px solid var(--line); display:grid; gap:14px}
.kicker{font:500 12px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--mute); display:inline-flex; align-items:center; gap:8px}
.kicker::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--accent)}
.page-head h1,.proj-head h1{font:300 clamp(42px,7vw,104px)/.95 var(--display); letter-spacing:-.03em; text-wrap:balance}
.page-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); border-bottom:1px solid var(--line)}
.page-photo{padding:36px; border-right:1px solid var(--line); display:grid; place-items:start center}
.page-photo .disc{display:block; width:min(220px,60vw); aspect-ratio:1; border-radius:50%; overflow:hidden; border:1px solid var(--line); outline:1px dotted var(--line); outline-offset:14px}
.page-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 20%; filter:grayscale(1) contrast(1.1)}
.prose{padding:36px max(18px,env(safe-area-inset-right,0px)) 40px 36px; display:grid; gap:16px; max-width:72ch; font-size:17px; line-height:1.55}
.note{font:400 12px/1.4 var(--mono); color:var(--mute)}
@media (max-width:760px){ .page-grid{grid-template-columns:1fr} .page-photo{border-right:0; border-bottom:1px solid var(--line)} .prose{padding:28px 18px} }
.timeline{padding:30px max(18px,env(safe-area-inset-left,0px)) 40px; display:grid; gap:16px; border-bottom:1px solid var(--line)}
.timeline h2{font:300 28px/1 var(--display)}
.timeline ol{list-style:none; margin:0; padding:0; display:grid}
.timeline li{display:grid; grid-template-columns:120px minmax(0,1.4fr) minmax(0,1fr); gap:16px; padding:13px 0; border-bottom:1px dotted var(--line); align-items:baseline}
.timeline .y{font:400 13px/1 var(--mono); color:var(--mute)}
.timeline b{font:300 21px/1.2 var(--display)}
.timeline li > span:last-child{font-size:14px}
@media (max-width:640px){ .timeline li{grid-template-columns:1fr; gap:4px} }
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); border-bottom:1px solid var(--line)}
.tile{display:grid; border-right:1px solid var(--line); border-bottom:1px solid var(--line); margin:0 -1px -1px 0}
.tile-field{aspect-ratio:4/3; transition:transform .5s}
.tile:hover .tile-field{transform:scale(.96)}
.tile-meta{padding:12px 14px 16px; display:grid; gap:3px}
.tile-meta b{font:300 22px/1.15 var(--display)}
.tile:hover .tile-meta b{font-style:italic}
.tile-meta span{font:400 12px/1.3 var(--mono); color:var(--mute)}
.proj-hero{height:clamp(260px,50vh,520px); position:relative; border-bottom:1px solid var(--line)}
.proj-hero .pill{position:absolute; right:18px; bottom:16px; background:#fff; color:#000; font-size:13px; padding:6px 16px; border-radius:40px}
.proj-head{padding:36px max(18px,env(safe-area-inset-left,0px)) 30px; display:grid; gap:18px; border-bottom:1px solid var(--line)}
.facts{display:flex; flex-wrap:wrap; gap:12px 40px}
.facts dt{font:400 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--mute); margin-bottom:6px}
.facts dd{font-size:16px}
.proj-body{border-bottom:1px solid var(--line)}
.proj-nav{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:20px max(18px,env(safe-area-inset-left,0px)); font:300 20px/1.2 var(--display); border-bottom:1px solid var(--line)}
.proj-nav a:hover{font-style:italic}

/* ---------- pavement + footer ---------- */
.pave{position:relative; height:150px; border-inline:1px solid var(--line); overflow:hidden; background:#fff}
.pave canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.pave-switch{position:absolute; right:12px; bottom:10px; display:flex; gap:6px}
.pave-switch button{background:#fff; color:#000; border:1px solid #000; border-radius:40px; font-size:12px; padding:4px 12px; cursor:pointer}
.pave-switch button[aria-pressed="true"]{background:#000; color:#fff}
.ft{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--line)}
.ft > div{border-right:1px solid var(--line); padding:22px 18px 34px; display:grid; gap:6px; align-content:start; font-size:14px; min-width:0}
.ft > div:last-child{border-right:0}
.ft b{font-weight:500}
.ft a{text-decoration:underline; text-underline-offset:3px}
@media (max-width:760px){ .ft{grid-template-columns:1fr 1fr} .ft > div:nth-child(2){border-right:0} .ft > div:nth-child(-n+2){border-bottom:1px solid var(--line)} }

/* ---------- draft tools ---------- */
.tools{position:fixed; left:max(12px,env(safe-area-inset-left,0px)); bottom:calc(12px + env(safe-area-inset-bottom,0px)); z-index:40; background:#fff; color:#000; border:1px solid #000; border-radius:14px; width:min(290px,calc(100vw - 24px)); font:400 13px/1.35 var(--mono); box-shadow:0 10px 30px -14px rgba(0,0,0,.4)}
.tools-toggle{width:100%; text-align:left; background:none; border:0; padding:10px 14px; cursor:pointer; font-weight:500; color:#000}
.tools-toggle::after{content:" –"}
.tools-toggle[aria-expanded="false"]::after{content:" +"}
.tools-body{padding:0 14px 14px; display:grid; gap:8px}
.tools-body[hidden]{display:none}
.photo-opts{display:grid; gap:6px}
.photo-opts button{text-align:left; border:1px solid #000; background:#fff; color:#000; border-radius:8px; padding:7px 10px; cursor:pointer}
.photo-opts button[aria-pressed="true"]{background:#ff2e74; border-color:#ff2e74}
.tools p{font-size:11px; color:#666}

@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .beam{transition:none} .orbit .sat{animation:none} }

.proj-body{max-width:none}
.proj-body p{max-width:72ch}

/* ---------- cursor: circle that turns into a square (Bauhaus form study) ---------- */
.form-cur{display:none; position:fixed; left:0; top:0; z-index:100; pointer-events:none; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:var(--ink); transition:border-radius .25s,background .25s,width .25s,height .25s,margin .25s; will-change:transform}
.form-cur.on{border-radius:0; background:var(--accent)}
.hero .form-cur.on{background:#fff}
@media (hover:hover) and (pointer:fine){
  html.has-form-cur .form-cur{display:block}
  html.has-form-cur, html.has-form-cur *{cursor:none}
  html.has-form-cur input, html.has-form-cur textarea, html.has-form-cur select{cursor:auto}
}

/* ---------- moving places (one line, above the footer) ---------- */
.places{border:1px solid var(--line); border-bottom:0; background:var(--hero); color:var(--hero-ink); overflow:hidden; padding-block:22px; transition:background .2s}
.places-track{display:flex; width:max-content; white-space:nowrap; animation:places 45s linear infinite}
.places:hover .places-track{animation-play-state:paused}
.places-track span{font:300 clamp(34px,5vw,64px)/1 var(--display); letter-spacing:-.02em; padding-right:.5em}
.places-track span::after{content:"○"; font-family:var(--body); font-size:.4em; vertical-align:.5em; padding-left:.5em}
@keyframes places{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .places-track{animation:none} }

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); border-bottom:1px solid var(--line)}
.contact-side{padding:36px max(18px,env(safe-area-inset-left,0px)); border-right:1px solid var(--line); display:grid; gap:22px; align-content:start; font-size:17px; line-height:1.5}
.contact-mail{display:grid; gap:8px}
.contact-mail a,.contact-mail .mail{font:300 24px/1.2 var(--display); overflow-wrap:anywhere}
.contact-mail a:hover{font-style:italic}
.contact-form{padding:36px max(18px,env(safe-area-inset-right,0px)) 40px 36px; display:grid; gap:22px; max-width:760px}
.field{display:grid; gap:8px; border:0; margin:0; padding:0; min-width:0}
.field label,.field legend{font:500 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--mute); padding:0}
.field input,.field textarea{width:100%; font:300 22px/1.3 var(--display); color:var(--ink); background:transparent; border:0; border-bottom:1px solid var(--line); padding:8px 0; border-radius:0}
.field textarea{font:400 16px/1.5 var(--body); border:1px solid var(--line); padding:12px; resize:vertical; min-height:160px}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 1px 0 var(--accent)}
.topics{display:flex; flex-wrap:wrap; gap:8px}
.topics legend{width:100%; margin-bottom:8px}
.topics label{font:400 14px/1 var(--body); text-transform:none; letter-spacing:0; color:var(--ink)}
.topics input{position:absolute; opacity:0; pointer-events:none}
.topics span{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:40px; padding:7px 14px 7px 10px; cursor:pointer}
.topics span::before{content:""; width:9px; height:9px; border-radius:50%; border:1px solid currentColor}
.topics input:checked + span{background:var(--ink); color:var(--paper)}
.topics input:checked + span::before{background:var(--accent); border-color:var(--accent)}
.topics input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-foot{display:flex; flex-wrap:wrap; gap:14px 20px; align-items:center}
.send{font:500 15px/1 var(--body); background:var(--ink); color:var(--paper); border:1px solid var(--ink); border-radius:40px; padding:13px 22px; cursor:pointer; transition:background .2s,color .2s}
.send:hover{background:var(--accent); border-color:var(--accent); color:#000}
.send:disabled{opacity:.5}
.form-status{font-size:14px}
.form-status.ok{color:var(--ink)}
.form-status.err{color:#c2142f}
@media (max-width:760px){ .contact-grid{grid-template-columns:1fr} .contact-side{border-right:0; border-bottom:1px solid var(--line)} .contact-form{padding:28px 18px} }

/* Japanese pages: Japanese faces first, Latin faces as fallback */
.lang-ja{--display:"Shippori Mincho","Newsreader",serif; --body:"Zen Kaku Gothic New","Hanken Grotesk",sans-serif}
.lang-ja .big,.lang-ja .name a{font-family:"Newsreader",Georgia,serif}
.lang-ja .page-head h1,.lang-ja .proj-head h1{font-weight:400; letter-spacing:0; line-height:1.15; font-size:clamp(32px,5vw,72px)}
.lang-ja .places-track span{font-weight:400; letter-spacing:0}
.lang-ja .pcol p{text-align:left}

/* footer language dropdown */
.lang-drop{position:relative; margin-top:6px; justify-self:start}
.lang-drop summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:40px; padding:6px 14px 6px 10px; font-size:13px}
.lang-drop summary::-webkit-details-marker{display:none}
.lang-drop summary::after{content:""; width:6px; height:6px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg) translateY(-2px); margin-left:4px}
.lang-drop[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.globe{width:12px; height:12px; border:1px solid currentColor; border-radius:50%; position:relative}
.globe::before{content:""; position:absolute; inset:-1px 3px; border:1px solid currentColor; border-radius:50%}
.lang-drop ul{list-style:none; margin:0; padding:6px 0; position:absolute; left:0; bottom:calc(100% + 6px); min-width:150px; background:var(--paper); border:1px solid var(--line); z-index:5}
.lang-drop li a{display:block; padding:7px 14px; font-size:14px}
.lang-drop li a:hover{background:color-mix(in srgb,var(--accent) 22%,transparent)}
.lang-drop li a[aria-current="true"]{font-family:var(--display); font-style:italic}

/* CV downloads */
.cv-box{display:grid; gap:12px; margin-top:12px; padding-top:22px; border-top:1px dotted var(--line)}
.cv-list{display:flex; flex-wrap:wrap; gap:8px}
.cv-dl{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:40px; padding:8px 16px 8px 12px; font-size:14px; transition:background .2s,color .2s}
.cv-dl.main{background:var(--ink); color:var(--paper)}
.cv-dl:hover{background:var(--accent); border-color:var(--accent); color:#000}
.cv-ico{width:10px; height:12px; border:1px solid currentColor; position:relative}
.cv-ico::after{content:""; position:absolute; left:1px; right:1px; bottom:-5px; height:1px; background:currentColor}