/* goldfish.games — studio site
   Washi/urushi/shu language extended from the studio house style;
   kinpaku gold is website-only, reserved for the mark and hairline flourishes. */

:root{
  --washi:#f4f1ea; --card:#fffdf8; --well:#ece5d8;
  --ink:#211d17; --ink-2:#6b6355; --line:#ddd5c4;
  --urushi:#140105; --urushi-card:#211e1a; --urushi-well:#171512;
  --urushi-ink:#ece6da; --urushi-ink-2:#a39a8c; --urushi-line:#3a352e;
  --shu:#b0342b; --shu-hi:#c9553b;
  --kin:#c0932c; --kin-hi:#d9b25e;
  --serif:"Shippori Mincho","Yu Mincho",Georgia,serif;
  --sans:"Zen Kaku Gothic New","Yu Gothic UI","Segoe UI",system-ui,sans-serif;
  --measure:64ch;
}

@font-face{font-family:"Shippori Mincho";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/shipporimincho-500-latin.woff2") format("woff2");}
@font-face{font-family:"Shippori Mincho";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/shipporimincho-600-latin.woff2") format("woff2");}
@font-face{font-family:"Shippori Mincho";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/shipporimincho-700-latin.woff2") format("woff2");}
@font-face{font-family:"Zen Kaku Gothic New";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/zenkakugothicnew-400-latin.woff2") format("woff2");}
@font-face{font-family:"Zen Kaku Gothic New";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/zenkakugothicnew-500-latin.woff2") format("woff2");}
@font-face{font-family:"Zen Kaku Gothic New";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/zenkakugothicnew-700-latin.woff2") format("woff2");}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{margin:0;background:var(--washi);color:var(--ink);font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;
 min-height:100vh;min-height:100svh;display:flex;flex-direction:column;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
:is(a,button):focus-visible{outline:2px solid var(--shu-hi);outline-offset:3px;}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--shu);color:#fff;padding:10px 18px;
 text-decoration:none;font-size:.85rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
.skip:focus{left:0;}

/* ---------- structure ---------- */
.wrap{max-width:1080px;margin:0 auto;padding-inline:24px;}
.band{padding-block:72px;}
.band-urushi{background:var(--urushi);color:var(--urushi-ink);}
.band-urushi .sub, .band-urushi .micro, .card-urushi .sub, .card-urushi .micro{color:var(--urushi-ink-2);}
.hairline{border:0;border-top:1px solid var(--line);margin:0;}
.band-urushi .hairline{border-top-color:var(--urushi-line);}

/* seigaiha wave field, whisper contrast */
.waves{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80' viewBox='0 0 160 80'%3E%3Cg fill='none' stroke='%23c0932c' stroke-opacity='.07'%3E%3Cg%3E%3Ccircle cx='0' cy='80' r='76'/%3E%3Ccircle cx='0' cy='80' r='60'/%3E%3Ccircle cx='0' cy='80' r='44'/%3E%3Ccircle cx='0' cy='80' r='28'/%3E%3Ccircle cx='80' cy='80' r='76'/%3E%3Ccircle cx='80' cy='80' r='60'/%3E%3Ccircle cx='80' cy='80' r='44'/%3E%3Ccircle cx='80' cy='80' r='28'/%3E%3Ccircle cx='160' cy='80' r='76'/%3E%3Ccircle cx='160' cy='80' r='60'/%3E%3Ccircle cx='160' cy='80' r='44'/%3E%3Ccircle cx='160' cy='80' r='28'/%3E%3Ccircle cx='40' cy='40' r='76'/%3E%3Ccircle cx='40' cy='40' r='60'/%3E%3Ccircle cx='40' cy='40' r='44'/%3E%3Ccircle cx='40' cy='40' r='28'/%3E%3Ccircle cx='120' cy='40' r='76'/%3E%3Ccircle cx='120' cy='40' r='60'/%3E%3Ccircle cx='120' cy='40' r='44'/%3E%3Ccircle cx='120' cy='40' r='28'/%3E%3Ccircle cx='40' cy='120' r='76'/%3E%3Ccircle cx='40' cy='120' r='60'/%3E%3Ccircle cx='40' cy='120' r='44'/%3E%3Ccircle cx='40' cy='120' r='28'/%3E%3Ccircle cx='120' cy='120' r='76'/%3E%3Ccircle cx='120' cy='120' r='60'/%3E%3Ccircle cx='120' cy='120' r='44'/%3E%3Ccircle cx='120' cy='120' r='28'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");}
.waves-ink{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80' viewBox='0 0 160 80'%3E%3Cg fill='none' stroke='%23211d17' stroke-opacity='.05'%3E%3Cg%3E%3Ccircle cx='0' cy='80' r='76'/%3E%3Ccircle cx='0' cy='80' r='60'/%3E%3Ccircle cx='0' cy='80' r='44'/%3E%3Ccircle cx='0' cy='80' r='28'/%3E%3Ccircle cx='80' cy='80' r='76'/%3E%3Ccircle cx='80' cy='80' r='60'/%3E%3Ccircle cx='80' cy='80' r='44'/%3E%3Ccircle cx='80' cy='80' r='28'/%3E%3Ccircle cx='160' cy='80' r='76'/%3E%3Ccircle cx='160' cy='80' r='60'/%3E%3Ccircle cx='160' cy='80' r='44'/%3E%3Ccircle cx='160' cy='80' r='28'/%3E%3Ccircle cx='40' cy='40' r='76'/%3E%3Ccircle cx='40' cy='40' r='60'/%3E%3Ccircle cx='40' cy='40' r='44'/%3E%3Ccircle cx='40' cy='40' r='28'/%3E%3Ccircle cx='120' cy='40' r='76'/%3E%3Ccircle cx='120' cy='40' r='60'/%3E%3Ccircle cx='120' cy='40' r='44'/%3E%3Ccircle cx='120' cy='40' r='28'/%3E%3Ccircle cx='40' cy='120' r='76'/%3E%3Ccircle cx='40' cy='120' r='60'/%3E%3Ccircle cx='40' cy='120' r='44'/%3E%3Ccircle cx='40' cy='120' r='28'/%3E%3Ccircle cx='120' cy='120' r='76'/%3E%3Ccircle cx='120' cy='120' r='60'/%3E%3Ccircle cx='120' cy='120' r='44'/%3E%3Ccircle cx='120' cy='120' r='28'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:.015em;line-height:1.2;margin:0 0 .5em;text-wrap:balance;}
h1{font-size:clamp(2.1rem,5.5vw,3.6rem);}
h2{font-size:clamp(1.5rem,3.2vw,2.1rem);}
h3{font-size:1.15rem;}
p{margin:0 0 1em;max-width:var(--measure);}
.sub{color:var(--ink-2);font-size:1.06rem;}
.micro{color:var(--ink-2);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;}
.kicker{font-family:var(--serif);color:var(--shu);font-weight:600;font-size:.9rem;letter-spacing:.28em;text-transform:uppercase;margin:0 0 14px;}
.band-urushi .kicker{color:var(--kin);}
.center{text-align:center;}
.center p{margin-inline:auto;}

/* ---------- nav ---------- */
.nav{display:flex;align-items:center;gap:28px;padding-block:20px;}
.nav .brand{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-weight:700;font-size:1.05rem;letter-spacing:.12em;text-decoration:none;}
.nav .brand img{width:34px;height:auto;}
.nav .links{margin-left:auto;display:flex;gap:24px;flex-wrap:wrap;}
.nav .links a{text-decoration:none;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);padding-block:4px;border-bottom:2px solid transparent;}
.nav .links a:hover{color:var(--ink);}
.nav .links a.on{color:var(--shu);border-bottom-color:var(--shu);}
.nav-dark .links a{color:var(--urushi-ink-2);}
.nav-dark .links a:hover{color:var(--urushi-ink);}
.nav-dark .links a.on{color:var(--kin);border-bottom-color:var(--kin);}
.nav-dark .brand{color:var(--urushi-ink);}
.nav-light .brand{color:var(--ink);}
@media (max-width:640px){
  .nav{flex-wrap:wrap;justify-content:center;row-gap:12px;}
  .nav .links{margin-left:0;width:100%;justify-content:center;gap:18px;}
}

/* ---------- hero ---------- */
.hero{padding-block:88px 96px;}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;align-items:center;}
.hero-fish{width:min(420px,80%);margin-inline:auto;}
@media (prefers-reduced-motion:no-preference){
  .hero-fish{animation:drift 9s ease-in-out infinite;}
  @keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
}
.hero h1{margin-bottom:.35em;}
.hero .sub{font-size:1.14rem;max-width:46ch;}
@media (max-width:820px){.hero-grid{grid-template-columns:1fr;gap:36px;text-align:center;}.hero .sub{margin-inline:auto;}.hero-ctas{justify-content:center;}}

/* ---------- buttons ---------- */
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;}
.btn{display:inline-block;font:inherit;font-size:.82rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;padding:14px 26px;border:1px solid transparent;}
.btn-shu{background:var(--shu);color:#fff;}
.btn-shu:hover{background:var(--shu-hi);}
.btn-ghost{border-color:var(--urushi-line);color:var(--urushi-ink);}
.btn-ghost:hover{border-color:var(--kin);color:var(--kin);}
.btn-ghost-light{border-color:var(--line);color:var(--ink);}
.btn-ghost-light:hover{border-color:var(--shu);color:var(--shu);}

/* ---------- cards & grids ---------- */
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
@media (max-width:820px){.cols{grid-template-columns:1fr;}}
.col h3{border-top:3px solid var(--shu);padding-top:14px;margin-top:0;}
.card{background:var(--card);border:1px solid var(--line);padding:34px;}
.card-urushi{background:var(--urushi-card);border:1px solid var(--urushi-line);color:var(--urushi-ink);}
.project-card{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:38px;align-items:center;padding:44px;}
.project-card img{width:100%;max-width:220px;opacity:.9;margin-inline:auto;}
@media (max-width:700px){.project-card{grid-template-columns:1fr;text-align:center;}.project-card p{margin-inline:auto;}}
.status-pip{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--kin);border:1px solid var(--kin);padding:5px 12px;margin-bottom:16px;}

/* ---------- tables (factsheet) ---------- */
table.fact{border-collapse:collapse;width:100%;max-width:640px;}
table.fact th,table.fact td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);font-size:.95rem;vertical-align:top;}
table.fact th{font-family:var(--serif);white-space:nowrap;width:11em;color:var(--ink-2);font-weight:600;}

/* ---------- asset tiles (press) ---------- */
.assets-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:22px;}
.asset{background:var(--card);border:1px solid var(--line);padding:18px;text-align:center;}
.asset.dark{background:var(--urushi);}
.asset img{max-height:130px;width:auto;margin:0 auto 14px;}
.asset a{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--shu);text-decoration:none;font-weight:700;}
.asset a:hover{color:var(--shu-hi);text-decoration:underline;}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:760px;}
@media (max-width:700px){.contact-grid{grid-template-columns:1fr;}}
.contact-card{border-left:3px solid var(--shu);}
.contact-card h2{font-size:1.15rem;margin:0 0 .5em;}
.contact-card a{font-family:var(--serif);font-size:1.15rem;color:var(--shu);text-decoration:none;}
.contact-card a:hover{text-decoration:underline;}

/* ---------- footer ---------- */
footer{background:var(--urushi);color:var(--urushi-ink-2);padding-block:44px;font-size:1.5rem;margin-top:auto;}
footer .foot-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-inline:28px;}
@media (min-width:1600px){footer .foot-row{padding-inline:8%;}}
@media (max-width:1400px){footer .foot-row{justify-content:center;}footer .foot-row nav{margin-left:0;}}
footer img{width:30px;}
footer nav{margin-left:auto;display:flex;gap:20px;flex-wrap:wrap;}
footer a{color:var(--urushi-ink-2);text-decoration:none;}
footer a:hover{color:var(--kin);}
footer .mail a{color:var(--urushi-ink);}
@media (max-width:700px){
  footer{font-size:1rem;padding-block:34px;}
  footer .foot-row{flex-direction:column;align-items:center;gap:14px;text-align:center;}
  footer nav{margin-left:0;justify-content:center;gap:10px 18px;}
  footer img{width:26px;}
}

/* ---------- draft ribbon (internal review only) ---------- */
.draft-ribbon{background:var(--shu);color:#fff;text-align:center;font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:9px 16px;}

/* ---------- landing (full-bleed hero + koi pond) ---------- */
body.landing{background:var(--urushi);}
.topbar{position:relative;z-index:20;display:grid;
 grid-template-columns:1fr auto 1fr;align-items:center;gap:26px;padding:14px 28px;
 background-color:var(--washi);border-bottom:1px solid var(--line);
 box-shadow:0 2px 14px rgba(10,0,3,.18);}
.topbar-overlay{position:absolute;inset-inline:0;top:0;box-shadow:0 2px 14px rgba(10,0,3,.35);}
.topbar .brand{justify-self:start;display:flex;align-items:center;gap:12px;font-family:var(--serif);
 font-weight:700;font-size:1.08rem;letter-spacing:.12em;text-decoration:none;color:var(--ink);}
.topbar .brand img{width:32px;height:auto;}
.topbar .links{justify-self:center;display:flex;gap:30px;flex-wrap:wrap;}
.topbar .links a{white-space:nowrap;text-decoration:none;font-size:.95rem;font-weight:700;letter-spacing:.18em;
 text-transform:uppercase;color:var(--ink);padding-block:5px;border-bottom:2px solid transparent;}
.topbar .links a:hover{color:var(--shu);border-bottom-color:var(--shu);}
.topbar .links a.on,.topbar .links a[aria-current="page"]{color:var(--shu);border-bottom-color:var(--shu);}
.topbar-right{justify-self:end;display:flex;align-items:center;gap:14px;}
.socials{display:flex;gap:8px;}
.socials a,.socials .off{display:grid;place-items:center;width:34px;height:34px;color:var(--ink-2);}
.socials a:hover{color:var(--shu);}
.socials .off{opacity:.45;cursor:default;}
.socials svg{width:19px;height:19px;fill:currentColor;}
.lang select{background:transparent;color:var(--ink);border:1px solid var(--line);
 font:inherit;font-size:.85rem;letter-spacing:.06em;padding:7px 9px;color-scheme:light;}
.lang select:hover{border-color:var(--shu);color:var(--shu);}
@media (min-width:1440px){
  .topbar{padding-inline:8%;column-gap:34px;}
}
@media (min-width:1780px){
  /* boss-directed 20% widescreen insets, floored so the centre track always
     keeps >=1180px and the nav never orphan-wraps */
  .topbar{padding-inline:min(20%,calc((100% - 1180px)/2));column-gap:40px;}
}
@media (max-width:1240px){
  .topbar{grid-template-columns:1fr;justify-items:center;row-gap:10px;padding:12px 16px;}
  .topbar .brand,.topbar-right{justify-self:center;}
  /* stacked header leaves the overlay and joins normal flow so it never
     covers the landing mark on phones/landscape */
  .topbar-overlay{position:relative;top:auto;inset-inline:auto;box-shadow:0 2px 14px rgba(10,0,3,.18);}
  .topbar .links{gap:10px 22px;}
  .topbar .links a{font-size:.88rem;}
  .topbar-right{flex-wrap:wrap;justify-content:center;row-gap:8px;}
}
@media (max-width:600px){
  .topbar .links{display:grid;grid-template-columns:auto auto;gap:8px 26px;justify-items:center;}
  .topbar .links a{font-size:.8rem;letter-spacing:.14em;}
  .socials a,.socials .off{width:30px;height:30px;}
  .socials svg{width:17px;height:17px;}
  .lang select{font-size:.8rem;padding:5px 7px;}
}

.hero-stage{position:relative;min-height:100svh;background:var(--urushi) url("/assets/hero_poster.png") center/cover no-repeat;}
.hero-media{position:absolute;inset:0;overflow:hidden;}
.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;}
.hero-media video.live{display:block;}
.hero-media canvas.pond{position:absolute;inset:0;display:block;}
.hero-veil{position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(180deg,rgba(10,0,3,.42),rgba(10,0,3,0) 30%,rgba(10,0,3,0) 68%,rgba(13,1,3,.48));}
.hero-center{position:relative;z-index:5;min-height:100svh;display:flex;flex-direction:column;
 align-items:center;text-align:center;padding:110px 24px 70px;}
/* formation sits halfway between the centreline and the upper third: 5:7 space split */
.hero-center::before{content:"";flex:5;}
.hero-center::after{content:"";flex:7;}
.hero-center img{width:clamp(100px,16vh,167px);height:auto;filter:drop-shadow(0 8px 28px rgba(0,0,0,.55));}
@media (prefers-reduced-motion:no-preference){
  .hero-center img{animation:drift 9s ease-in-out infinite;}
}
.hero-line{font-family:var(--serif);font-weight:700;color:#f6efdf;margin:36px 0 0;
 font-size:clamp(2.3rem,5.2vw,4.4rem);line-height:1.13;letter-spacing:.01em;text-wrap:balance;
 text-shadow:0 2px 22px rgba(0,0,0,.5);}

/* pause/play for all hero motion (WCAG 2.2.2) */
.motion-toggle{position:absolute;z-index:6;right:18px;bottom:18px;width:42px;height:42px;display:grid;place-items:center;
 background:rgba(10,0,3,.45);border:1px solid rgba(236,230,218,.3);color:#ece6da;cursor:pointer;padding:0;}
.motion-toggle:hover{border-color:var(--kin-hi);color:var(--kin-hi);}
.motion-toggle svg{width:16px;height:16px;fill:currentColor;}
.motion-toggle[aria-pressed="true"] .i-pause{display:none;}
.motion-toggle[aria-pressed="false"] .i-play{display:none;}
body.motion-off .hero-center img{animation-play-state:paused;}
@media (prefers-reduced-motion:reduce){.motion-toggle{display:none;}}

/* ---------- team (studio page) ---------- */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:46px;}
@media (max-width:900px){.team-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto;}}
.member{text-align:center;}
.member img.face{width:100%;max-width:340px;aspect-ratio:1/1;object-fit:cover;margin-inline:auto;border:1px solid var(--urushi-line);}
.member .ph{aspect-ratio:1/1;max-width:340px;margin-inline:auto;background:var(--urushi-card);border:1px solid var(--urushi-line);display:grid;place-content:center;gap:16px;}
.member .ph img{width:96px;height:auto;opacity:.4;margin-inline:auto;}
.member .ph span{color:var(--urushi-ink-2);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;}
.member .jp{font-family:var(--serif);color:var(--urushi-ink-2);letter-spacing:.28em;font-size:.95rem;margin:20px 0 0;min-height:1.5em;}
.member h3{font-family:var(--serif);font-weight:600;font-size:1.4rem;color:var(--urushi-ink);margin:4px 0 6px;}
.member .role{color:var(--kin);font-size:.72rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;margin:0 0 16px;}
.member p.bio{color:var(--urushi-ink-2);font-size:.93rem;text-align:left;max-width:40ch;margin-inline:auto;}

/* ---------- 404 ---------- */
.lost{min-height:70vh;display:grid;place-content:center;text-align:center;padding-block:60px;}
.lost img{width:180px;margin:0 auto 28px;opacity:.85;}

/* ---------- l10n font stacks ---------- */
html[lang="zh-Hans"] body{font-family:"Zen Kaku Gothic New","PingFang SC","Microsoft YaHei",system-ui,sans-serif;}
html[lang="zh-Hans"] h1,html[lang="zh-Hans"] h2,html[lang="zh-Hans"] h3,html[lang="zh-Hans"] .kicker,html[lang="zh-Hans"] .hero-line{font-family:"Shippori Mincho","Noto Serif SC","SimSun",serif;}
html[lang="zh-Hant"] body{font-family:"Zen Kaku Gothic New","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;}
html[lang="zh-Hant"] h1,html[lang="zh-Hant"] h2,html[lang="zh-Hant"] h3,html[lang="zh-Hant"] .kicker,html[lang="zh-Hant"] .hero-line{font-family:"Shippori Mincho","Noto Serif TC","PMingLiU",serif;}
html[lang="ko"] body{font-family:"Zen Kaku Gothic New","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;}
html[lang="ko"] h1,html[lang="ko"] h2,html[lang="ko"] h3,html[lang="ko"] .kicker,html[lang="ko"] .hero-line{font-family:"Shippori Mincho","Noto Serif KR","Batang",serif;}