/* ==========================================================================
   FAHRENHEIT // 華氏 // 화씨
   Glitchcore · sharp edges only
   ========================================================================== */

/* ---- embedded fonts (OFL) ---- */
@font-face{ font-family:"Chakra Petch"; font-weight:400; font-display:swap; src:url("../assets/fonts/ChakraPetch-400.woff2") format("woff2"); }
@font-face{ font-family:"Chakra Petch"; font-weight:600; font-display:swap; src:url("../assets/fonts/ChakraPetch-600.woff2") format("woff2"); }
@font-face{ font-family:"Chakra Petch"; font-weight:700; font-display:swap; src:url("../assets/fonts/ChakraPetch-700.woff2") format("woff2"); }
@font-face{ font-family:"Rajdhani"; font-weight:500; font-display:swap; src:url("../assets/fonts/Rajdhani-500.woff2") format("woff2"); }
@font-face{ font-family:"Rajdhani"; font-weight:700; font-display:swap; src:url("../assets/fonts/Rajdhani-700.woff2") format("woff2"); }
@font-face{ font-family:"Share Tech Mono"; font-weight:400; font-display:swap; src:url("../assets/fonts/ShareTechMono-400.woff2") format("woff2"); }

:root{
  --bg:#07080c;
  --bg2:#0b0d14;
  --ink:#f6efe6;      /* warm near-white */
  --ink-dim:#d6c4a8;  /* warm tan (kept light for contrast) */
  --line:rgba(255,180,120,.18);
  --line-hot:rgba(255,150,60,.55);
  --iris-a:#ff9a3c;   /* thermal orange */
  --iris-b:#ffcf4a;   /* thermal amber-yellow */
  --iris-c:#ff4d2a;   /* thermal hot red */
  --iris-d:#fff0c0;   /* thermal pale-hot */
  --hot:#ffb14d;      /* main thermal accent */
  --danger:#ff3b2f;
  --mono:"Share Tech Mono","Cascadia Code","Consolas",ui-monospace,monospace;
  --disp:"Chakra Petch","Bahnschrift","Arial Narrow",sans-serif;
  --ui:"Rajdhani","Chakra Petch","Bahnschrift",sans-serif;
  --jp:"Yu Gothic","Meiryo","MS Gothic","Noto Sans JP",sans-serif;
  --body:"Rajdhani","Inter","Segoe UI",system-ui,sans-serif;
  --read:"Cascadia Code","Consolas",ui-monospace,monospace;

  /* THERMAL text colour (infrared heat look). Fixed warm ramp; the strong
     dark halo/edge below guarantees contrast on any background. */
  --cb:26;            /* orange hue for hsl(var(--cb)...) usages */
  --cb2:42;           /* amber hue */
  --cb-a:#ff4d1f;     /* hot red-orange */
  --cb-b:#ffab24;     /* amber */
  --cb-halo:drop-shadow(0 0 1.4px rgba(0,0,0,.98)) drop-shadow(0 1px 1px rgba(0,0,0,.9)) drop-shadow(0 0 12px rgba(255,110,40,.5));
  --cb-glow:0 0 1px rgba(0,0,0,.98), 0 0 3px rgba(0,0,0,.85), 0 0 20px rgba(255,120,45,.55), 0 2px 8px rgba(0,0,0,.75);
  /* crisp dark ring for ALL solid over-bg text so nothing blends in */
  --edge:0 0 1px rgba(0,0,0,.96), 0 0 3px rgba(0,0,0,.82), 1px 1px 1px rgba(0,0,0,.9), -1px 0 1px rgba(0,0,0,.7);

  /* DYNAMIC contrast text: JS flips these between pale-hot (over dark bg) and
     deep (over bright bg) based on the live background brightness. */
  --txt:#ffe2b8;
  --txt-edge:rgba(0,0,0,.92);
  --txt-shadow:0 0 1px var(--txt-edge), 0 0 3px var(--txt-edge), 1px 1px 1px var(--txt-edge), -1px -1px 1px var(--txt-edge);
}

/* reusable THERMAL gradient text (red-orange -> amber -> pale hot) */
.cb-fill{
  background:linear-gradient(102deg, var(--cb-a), var(--cb-b) 55%, #fff2cf);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:var(--cb-halo);
}

/* guarantee separation from the busy background on all over-bg text */
.topbar, .sec-note, footer, #audio-hud, .scroll-hint, .lb-cap,
.avail, .form-note, .back-link, .dossier, .hero-sub, .kicker, .bio{
  text-shadow:var(--edge);
}

*{ margin:0; padding:0; box-sizing:border-box; border-radius:0 !important; }

html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  cursor:crosshair;
}

/* selection + scrollbar --------------------------------------------------- */
::selection{ background:var(--iris-c); color:#0a0a0a; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:#05060a; }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--iris-a),var(--iris-b)); }

/* ========== global VFX layers ========== */
#bg-gl{ position:fixed; inset:0; z-index:-5; display:block; }   /* warped live photo */
#vfx-canvas{ position:fixed; inset:0; z-index:-3; display:block; }
#bg-drift{                       /* CSS fallback backdrop (hidden when WebGL runs) */
  position:fixed; inset:-6%; z-index:-4;
  background-size:cover; background-position:center;
  filter:brightness(.32) saturate(1.05) contrast(1.05);
  opacity:.5; transition:background-image 1.2s;
  animation:bgpan 46s ease-in-out infinite alternate;
}
@keyframes bgpan{ from{ transform:scale(1.06) translate(-1.2%, -0.8%);} to{ transform:scale(1.14) translate(1.4%, 1%);} }

/* scanlines + grain + vignette overlay */
#grain{
  position:fixed; inset:0; z-index:60; pointer-events:none; mix-blend-mode:overlay; opacity:.06;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
#scan{
  position:fixed; inset:0; z-index:61; pointer-events:none; opacity:.35;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.18) 2px 3px);
  mix-blend-mode:multiply;
}
#vignette{
  position:fixed; inset:0; z-index:59; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 42%, transparent 55%, rgba(0,0,0,.72) 100%);
}

/* ========== chrome / nav ========== */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:70;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 26px;
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-dim);
  background:linear-gradient(180deg, rgba(6,7,11,.85), transparent);
  backdrop-filter:blur(2px);
  border-bottom:1px solid var(--line);
}
.topbar .brand{ color:var(--hot); font-weight:700; }
.topbar .brand b{ color:var(--iris-c); }
.topbar nav a{
  color:var(--ink-dim); text-decoration:none; margin-left:22px; position:relative;
  transition:color .2s; font-family:var(--ui); font-weight:700; font-size:14px;
}
.topbar nav a:hover{ color:var(--hot); }
.topbar nav a::after{ content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--iris-c); transition:width .25s; }
.topbar nav a:hover::after{ width:100%; }
.status-dot{ display:inline-block; width:7px; height:7px; background:var(--hot); margin-right:8px; box-shadow:0 0 8px var(--hot); animation:blink 2.4s steps(1) infinite; }
@keyframes blink{ 0%,80%{opacity:1;} 90%{opacity:.15;} }

/* ========== HERO ========== */
.hero{
  min-height:100svh; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:120px 20px 80px;
}
.kicker{
  font-family:var(--mono); font-size:12px; letter-spacing:.5em; text-transform:uppercase;
  color:hsl(var(--cb2) 85% 72%); margin-bottom:26px; opacity:.95;
  text-shadow:0 0 1px rgba(0,0,0,.9), 0 1px 8px rgba(0,0,0,.6);
}
.kicker .kr{ color:hsl(var(--cb) 90% 76%); }

/* the giant glitch title (Japanese) */
.title-wrap{ position:relative; line-height:.86; user-select:none; }
.jp-title{
  font-family:var(--jp); font-weight:900;
  font-size:clamp(88px, 22vw, 300px);
  letter-spacing:-.02em;
  color:hsl(var(--cb) 90% 78%);
  position:relative; display:inline-block;
  text-shadow:var(--cb-glow);
}
/* subtle chromatic hint only — dialed WAY down from the old glitch */
.jp-title::before,.jp-title::after{
  content:attr(data-text); position:absolute; inset:0;
  clip-path:inset(0 0 0 0); opacity:.32;
}
.jp-title::before{ color:hsl(var(--cb2) 90% 62%); transform:translate(1px,0); mix-blend-mode:screen; animation:gl1 5.2s infinite steps(2); }
.jp-title::after{ color:hsl(var(--cb) 95% 70%); transform:translate(-1px,0); mix-blend-mode:screen; animation:gl2 4.4s infinite steps(2); }
@keyframes gl1{ 0%,100%{clip-path:inset(0 0 82% 0); transform:translate(2px,-1px);} 25%{clip-path:inset(40% 0 40% 0); transform:translate(-3px,1px);} 50%{clip-path:inset(70% 0 8% 0); transform:translate(3px,0);} 75%{clip-path:inset(20% 0 60% 0); transform:translate(-2px,2px);} }
@keyframes gl2{ 0%,100%{clip-path:inset(66% 0 8% 0); transform:translate(-2px,1px);} 30%{clip-path:inset(10% 0 76% 0); transform:translate(3px,-1px);} 60%{clip-path:inset(48% 0 30% 0); transform:translate(-3px,0);} }

.roman-title{
  font-family:var(--disp); font-weight:700; letter-spacing:.42em;
  font-size:clamp(16px, 3.4vw, 34px); text-transform:uppercase;
  margin-top:18px; padding-left:.42em;
  background:linear-gradient(100deg, var(--cb-a), var(--cb-b) 60%, hsl(var(--cb) 95% 82%));
  -webkit-background-clip:text; background-clip:text; color:transparent; filter:var(--cb-halo);
}
.katakana{ font-family:var(--jp); color:hsl(var(--cb2) 82% 72%); letter-spacing:.35em; font-size:clamp(13px,2vw,18px); margin-top:12px; text-shadow:0 0 1px rgba(0,0,0,.8); }

.hero-sub{
  max-width:640px; margin:34px auto 0; color:var(--ink-dim);
  font-family:var(--mono); font-size:13px; line-height:2; letter-spacing:.04em;
}
.hero-sub{ text-shadow:0 0 1px rgba(0,0,0,.85), 0 1px 6px rgba(0,0,0,.6); }
.hero-sub .t{ color:hsl(var(--cb) 92% 74%); }

.scroll-hint{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:11px; letter-spacing:.4em; color:var(--ink-dim); text-transform:uppercase;
  animation:floaty 2.4s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{transform:translateX(-50%) translateY(0); opacity:.5;} 50%{transform:translateX(-50%) translateY(7px); opacity:1;} }

/* ========== section frame ========== */
section{ position:relative; z-index:2; }
.wrap{ max-width:1240px; margin:0 auto; padding:0 26px; }
.sec-head{
  display:flex; align-items:baseline; gap:18px; flex-wrap:wrap;
  padding:80px 0 30px; border-bottom:1px solid var(--line);
}
.sec-idx{ font-family:var(--mono); color:hsl(var(--cb2) 88% 68%); font-size:13px; letter-spacing:.3em; text-shadow:0 0 1px rgba(0,0,0,.8); }
.sec-title{ font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:.16em; font-size:clamp(26px,5vw,52px);
  background:linear-gradient(100deg, var(--cb-a), var(--cb-b)); -webkit-background-clip:text; background-clip:text; color:transparent; filter:var(--cb-halo); }
.sec-title .jp{ font-family:var(--jp); color:hsl(var(--cb) 90% 76%); -webkit-text-fill-color:hsl(var(--cb) 90% 76%); font-weight:700; margin-left:14px; font-size:.6em; letter-spacing:.1em; }
.sec-note{ margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--ink-dim); letter-spacing:.18em; text-transform:uppercase; }

/* ========== ABOUT / digitized status ========== */
.about{ padding:40px 0 20px; display:grid; grid-template-columns:1fr; gap:38px; }
.dossier{
  border:1px solid var(--line); background:linear-gradient(180deg, rgba(20,24,34,.55), rgba(9,11,16,.55));
  padding:26px 26px 30px; position:relative; overflow:hidden;
}
.dossier::before{ content:""; position:absolute; top:0; left:0; width:100%; height:3px;
  background:linear-gradient(90deg,var(--iris-a),var(--iris-b),var(--iris-c),var(--iris-d)); background-size:300% 100%; animation:irisbar 8s linear infinite; }
@keyframes irisbar{ to{ background-position:300% 0; } }
.dossier h3{ font-family:var(--mono); font-size:13px; letter-spacing:.28em; color:var(--hot); text-transform:uppercase; margin-bottom:20px; }
.status-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:2px; margin-bottom:24px; }
.stat{ font-family:var(--mono); font-size:12px; padding:10px 12px; border:1px solid var(--line); background:rgba(0,0,0,.25); }
.stat .k{ color:var(--iris-b); display:block; letter-spacing:.14em; }
.stat .v{ color:var(--ink); letter-spacing:.04em; }
.stat .v.hot{ color:var(--hot); }
.bio{ font-family:var(--body); font-size:15px; line-height:1.85; color:#cfd6e4; max-width:70ch; }
.bio p{ margin-bottom:14px; }
.bio .glowline{ color:var(--hot); }
.cores{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.core-tag{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  padding:6px 12px; border:1px solid var(--line-hot); color:var(--hot); background:rgba(255,140,50,.05); }

/* ========== GALLERY ========== */
.gallery{ padding:26px 0 60px; }
.grid{
  columns:3; column-gap:14px;
}
@media(max-width:900px){ .grid{ columns:2; } }
@media(max-width:560px){ .grid{ columns:1; } }
.tile{
  position:relative; display:block; width:100%; margin:0 0 14px; overflow:hidden;
  break-inside:avoid; border:1px solid var(--line); background:#05060a;
  cursor:pointer;
}
.tile img{ width:100%; display:block; filter:saturate(.92) contrast(1.02) brightness(.94);
  transition:transform .6s cubic-bezier(.2,.8,.2,1), filter .4s; }
.tile:hover img{ transform:scale(1.05); filter:saturate(1.15) contrast(1.08) brightness(1.02); }
.tile::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg, rgba(255,140,50,0), rgba(255,60,30,0));
  mix-blend-mode:screen; transition:opacity .3s; opacity:0; }
.tile:hover::after{ opacity:.5; background:linear-gradient(120deg, rgba(255,150,50,.28), rgba(255,90,30,.14) 40%, rgba(255,60,30,.3)); }
.tile .meta{
  position:absolute; left:0; bottom:0; right:0; padding:10px 12px;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--hot); background:linear-gradient(transparent, rgba(4,5,9,.9));
  display:flex; justify-content:space-between; transform:translateY(6px); opacity:0; transition:.3s;
}
.tile:hover .meta{ transform:none; opacity:1; }
.tile .corner{ position:absolute; top:8px; right:8px; font-family:var(--mono); font-size:9px; letter-spacing:.2em;
  color:var(--ink); background:rgba(0,0,0,.5); border:1px solid var(--line); padding:3px 6px; opacity:.8; }

/* ========== LIGHTBOX ========== */
.lb{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center;
  background:rgba(3,4,8,.94); backdrop-filter:blur(6px); }
.lb.open{ display:flex; animation:lbin .35s ease; }
@keyframes lbin{ from{ opacity:0; } to{ opacity:1; } }
.lb img{ max-width:92vw; max-height:82vh; border:1px solid var(--line-hot);
  box-shadow:0 0 60px rgba(255,120,40,.3); filter:contrast(1.03); }
.lb .lb-cap{ position:absolute; bottom:26px; font-family:var(--mono); font-size:12px; letter-spacing:.24em; color:var(--hot); text-transform:uppercase; }
.lb .lb-x{ position:absolute; top:22px; right:28px; font-family:var(--mono); color:var(--ink); font-size:22px; cursor:pointer; border:1px solid var(--line); padding:4px 12px; }
.lb .lb-x:hover{ color:var(--danger); border-color:var(--danger); }
.lb .lb-nav{ position:absolute; top:50%; transform:translateY(-50%); font-family:var(--mono); font-size:34px; color:var(--ink-dim); cursor:pointer; padding:10px 18px; user-select:none; }
.lb .lb-nav:hover{ color:var(--hot); }
.lb .prev{ left:14px; } .lb .next{ right:14px; }

/* ========== CONTACT CTA + FOOTER ========== */
.cta{ padding:90px 0 70px; text-align:center; }
.cta h2{ font-family:var(--disp); font-size:clamp(30px,7vw,80px); text-transform:uppercase; letter-spacing:.1em;
  background:linear-gradient(100deg, var(--cb-a), var(--cb-b)); -webkit-background-clip:text; background-clip:text; color:transparent; filter:var(--cb-halo); }
.cta h2 .jp{ font-family:var(--jp); -webkit-text-fill-color:hsl(var(--cb) 92% 76%); color:hsl(var(--cb) 92% 76%); }
.cta p{ font-family:var(--mono); color:var(--ink-dim); margin:18px 0 34px; letter-spacing:.1em; }

.btn{
  display:inline-block; font-family:var(--mono); text-transform:uppercase; letter-spacing:.28em; font-size:14px;
  color:#04120e; background:var(--hot); padding:18px 40px; text-decoration:none; font-weight:700;
  position:relative; border:1px solid var(--hot); transition:.2s;
  box-shadow:6px 6px 0 rgba(255,70,25,.6);
}
.btn:hover{ background:var(--iris-c); border-color:var(--iris-c); color:#160500; box-shadow:6px 6px 0 rgba(255,170,60,.65); transform:translate(-2px,-2px); }
.btn.ghost{ background:transparent; color:var(--hot); box-shadow:6px 6px 0 rgba(255,120,40,.45); }
.btn.ghost:hover{ color:#04120e; background:var(--hot); }

footer{
  border-top:1px solid var(--line); margin-top:50px; padding:40px 26px 60px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--ink-dim);
  display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; text-transform:uppercase;
}
footer a{ color:var(--hot); text-decoration:none; }
footer .jp{ font-family:var(--jp); color:var(--iris-b); }

/* ========== ENTRANCE OVERLAY ========== */
#enter{
  position:fixed; inset:0; z-index:300; background:#05060a;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  transition:opacity .8s, transform .8s;
}
#enter .big{ font-family:var(--jp); font-weight:900; font-size:clamp(70px,18vw,220px); color:#fff;
  text-shadow:0 0 45px rgba(255,120,40,.5), 0 0 2px rgba(0,0,0,.8); }
#enter .en-sub{ font-family:var(--mono); font-size:12px; letter-spacing:.5em; color:var(--iris-a); margin-top:16px; text-transform:uppercase; }
#enter .en-btn{ margin-top:44px; font-family:var(--mono); letter-spacing:.4em; font-size:14px; text-transform:uppercase;
  color:var(--hot); border:1px solid var(--line-hot); padding:16px 44px; cursor:pointer; background:rgba(255,140,50,.05);
  transition:.2s; }
#enter .en-btn:hover{ background:var(--hot); color:#05120e; }
#enter.gone{ opacity:0; transform:scale(1.15); pointer-events:none; }

/* transition curtain used between pages */
#curtain{
  position:fixed; inset:0; z-index:250; pointer-events:none; opacity:0;
  background:radial-gradient(circle at 50% 50%, rgba(255,120,40,.18), rgba(6,4,3,.98) 60%);
}

/* audio widget */
#audio-hud{
  position:fixed; right:18px; bottom:18px; z-index:80;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--line); background:rgba(6,7,11,.7); backdrop-filter:blur(3px);
  padding:8px 12px; color:var(--ink-dim); display:flex; align-items:center; gap:10px; cursor:pointer;
  max-width:280px;
}
#audio-hud .eq{ display:flex; align-items:flex-end; gap:2px; height:14px; }
#audio-hud .eq i{ width:2px; background:var(--hot); animation:eq 1s ease-in-out infinite; }
#audio-hud .eq i:nth-child(2){ animation-delay:.2s; } #audio-hud .eq i:nth-child(3){ animation-delay:.4s; }
#audio-hud .eq i:nth-child(4){ animation-delay:.1s; } #audio-hud .eq i:nth-child(5){ animation-delay:.3s; }
@keyframes eq{ 0%,100%{height:3px;} 50%{height:14px;} }
#audio-hud.muted .eq i{ animation-play-state:paused; height:3px; background:var(--ink-dim); }
#audio-hud .tk{ color:var(--hot); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:170px; }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* ========== CONTACT PAGE ========== */
.contact-main{ min-height:100svh; display:flex; align-items:center; justify-content:center; padding:120px 22px 80px; }
.form-card{
  width:min(720px,100%); border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(16,20,30,.7), rgba(7,9,14,.72));
  padding:40px clamp(22px,5vw,56px) 46px; position:relative; overflow:hidden;
}
.form-card::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 40%, rgba(255,150,60,.07) 50%, transparent 60%); background-size:250% 250%;
  animation:sheen 7s linear infinite; }
@keyframes sheen{ to{ background-position:-250% 0; } }
.form-card .fh-top{ font-family:var(--mono); font-size:11px; letter-spacing:.3em; color:hsl(var(--cb2) 88% 68%); text-transform:uppercase; text-shadow:0 0 1px rgba(0,0,0,.8); }
.form-card h1{ font-family:var(--jp); font-size:clamp(40px,9vw,90px); font-weight:900; margin:6px 0 4px; color:hsl(var(--cb) 90% 78%); text-shadow:var(--cb-glow); }
.form-card .subj{ font-family:var(--disp); letter-spacing:.34em; text-transform:uppercase; color:var(--ink-dim); font-size:14px; margin-bottom:28px; }
.field{ margin-bottom:22px; }
.field label{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:hsl(var(--cb) 88% 74%); margin-bottom:8px; text-shadow:0 0 1px rgba(0,0,0,.8); }
.field label .jp{ color:var(--ink-dim); font-family:var(--jp); margin-left:8px; letter-spacing:.1em; }
.field input,.field textarea,.field select{
  width:100%; background:rgba(0,0,0,.35); border:1px solid var(--line); color:var(--ink);
  font-family:var(--mono); font-size:14px; padding:14px 14px; letter-spacing:.04em; outline:none; transition:.2s;
}
.field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--hot); box-shadow:0 0 0 1px var(--hot), 0 0 22px rgba(255,140,50,.18); background:rgba(255,140,50,.04); }
.field textarea{ resize:vertical; min-height:120px; }
.field .hint{ font-family:var(--mono); font-size:10px; color:var(--ink-dim); margin-top:6px; letter-spacing:.08em; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media(max-width:520px){ .row2{ grid-template-columns:1fr; } }
.form-actions{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin-top:12px; }
.form-note{ font-family:var(--mono); font-size:11px; color:var(--ink-dim); margin-top:22px; line-height:1.8; letter-spacing:.04em; border-top:1px solid var(--line); padding-top:18px; }
.form-note a{ color:var(--hot); text-decoration:none; }
.back-link{ position:fixed; top:16px; left:22px; z-index:75; font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--ink-dim); text-decoration:none; text-transform:uppercase; }
.back-link:hover{ color:var(--hot); }
.sent-msg{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--hot); margin-top:14px; min-height:16px; }

.avail{ display:flex; gap:20px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--ink-dim); text-transform:uppercase; margin-bottom:26px; }
.avail b{ color:var(--hot); }

/* ---- dynamic-contrast text: flips pale-hot <-> deep with the live background
   so these (previously grey) over-bg lines never blend in ---- */
.hero-sub, .katakana, .cta p, .sec-note, footer, .scroll-hint, .topbar nav a{
  color:var(--txt) !important;
  text-shadow:var(--txt-shadow);
}
.topbar nav a:hover{ color:var(--hot) !important; }
.hero-sub .t, footer a{ color:var(--hot) !important; }