/* guild5.net — site.css
   配色・書体は SPEC.md §4 に対応 */

:root{
  --ink:#0B0F1C; --ink2:#0E1424;
  --rule:#212A46;
  --fg:#C9D2E6; --dim:#8C97B6; --muted:#5A6488;
  --gold:#FFD43B;
  --code-dim:#3B456C; --code-lit:#9AA6CC;
  --kw:#4A5C8C; --str:#3F5C57; --com:#2E3859; --num:#4E5486; --dec:#3D4A73; --fn:#54608F;
  --kw-lit:#7E93C9; --str-lit:#79A79F; --com-lit:#5B6A96; --num-lit:#8E95C9; --dec-lit:#7C8CBC; --fn-lit:#A0ACD4;
  --ok:#93C79A; --err:#E28FA0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--fg);
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

/* ---------- header : F-1 wordmark, right ---------- */
.brand{
  position:fixed; top:20px; right:28px; z-index:60; text-decoration:none;
  font-family:"Bricolage Grotesque",system-ui,sans-serif; font-weight:800;
  font-size:clamp(17px,1.5vw,22px); letter-spacing:-.05em; line-height:1; color:#E6ECFB;
}
.brand em{font-style:normal; color:var(--gold)}

/* ================================================================
   コードの壁（index）
   ================================================================ */
.screen{position:relative; height:100svh; min-height:520px; overflow:hidden; display:grid; place-items:center}
.codewrap{position:relative; padding:0 clamp(14px,4vw,64px)}
.code{
  position:relative; z-index:2; margin:0;
  font-size:min(1.05vw,1.25vh); line-height:1.5; color:var(--code-dim);
}
.ln{white-space:pre; display:block}
.ln:empty::after{content:"\200b"}
.k{color:var(--kw)} .s{color:var(--str)} .c{color:var(--com)}
.n{color:var(--num)} .d{color:var(--dec)} .f{color:var(--fn)}

/* リンク : 普段は完全に地の文。時々だけ光る（SPEC §3-1） */
.g{color:var(--base,var(--code-dim)); text-decoration:none; font-weight:inherit}
.g.flash{animation:flash 2.8s ease-in-out}
@keyframes flash{
  0%   {color:var(--base,var(--code-dim)); text-shadow:none}
  16%  {color:var(--gold); text-shadow:0 0 11px rgba(255,212,59,.9),0 0 32px rgba(255,212,59,.42)}
  52%  {color:var(--gold); text-shadow:0 0 11px rgba(255,212,59,.9),0 0 32px rgba(255,212,59,.42)}
  100% {color:var(--base,var(--code-dim)); text-shadow:none}
}
.g:hover,.g:focus-visible{
  color:#FFF3BC; animation:none;
  text-shadow:0 0 10px rgba(255,212,59,1),0 0 34px rgba(255,212,59,.7),0 0 80px rgba(255,212,59,.34);
}

/* 明るい複製層。ランプのマスクで抜く（Knowledge §2） */
.code-lit{
  position:absolute; inset:0; z-index:3; pointer-events:none; margin:0;
  color:var(--code-lit); will-change:mask-position;
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 0%, #000 26%, transparent 72%);
  mask-image:radial-gradient(circle at 50% 50%, #000 0%, #000 26%, transparent 72%);
  -webkit-mask-size:26vw 26vw; mask-size:26vw 26vw;
  -webkit-mask-position:calc(var(--mx,50%) - 13vw) calc(var(--my,44%) - 13vw);
  mask-position:calc(var(--mx,50%) - 13vw) calc(var(--my,44%) - 13vw);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.code-lit .k{color:var(--kw-lit)} .code-lit .s{color:var(--str-lit)} .code-lit .c{color:var(--com-lit)}
.code-lit .n{color:var(--num-lit)} .code-lit .d{color:var(--dec-lit)} .code-lit .f{color:var(--fn-lit)}
.code-lit .g{animation:none; color:var(--gold); text-shadow:0 0 11px rgba(255,212,59,.85),0 0 34px rgba(255,212,59,.4)}
.lamp{
  position:absolute; inset:-24vh -24vw; z-index:4; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,44%), rgba(255,212,59,.085) 0%, rgba(255,212,59,.03) 26%, transparent 48%);
}
.cue{
  position:absolute; left:0; right:0; bottom:22px; z-index:20; text-align:center;
  font-size:11px; letter-spacing:.2em; color:var(--muted); opacity:0;
  transition:opacity .8s; pointer-events:none;
}
.cue.on{opacity:1}

/* ================================================================
   着地セクション（About / Stack / Works / Contact）
   ================================================================ */
.land{
  position:relative; z-index:20; background:var(--ink); border-top:1px solid var(--rule);
  padding:clamp(52px,8vw,104px) clamp(22px,5vw,64px) 60px;
}
.inner{max-width:940px; margin:0 auto}
.pr{color:var(--ok); font-size:clamp(12px,1vw,14px); margin:0}
.pr span{color:#7A86AC}
h2.big{
  font-family:"Bricolage Grotesque",system-ui,sans-serif; font-weight:800;
  font-size:clamp(28px,4.6vw,54px); letter-spacing:-.03em; line-height:1.1;
  margin:16px 0 0; color:#EDF2FF; text-wrap:balance;
}
h2.big em{font-style:normal; color:var(--gold)}

.cols{display:grid; grid-template-columns:1.5fr .82fr; gap:clamp(22px,4vw,56px); margin-top:24px; align-items:start}
.bio p{max-width:50ch; color:var(--dim); font-size:clamp(12.5px,1.05vw,15px); line-height:1.95; margin:0 0 15px}
.bio p:last-child{margin-bottom:0}
.facts{margin:5px 0 0; display:grid; grid-template-columns:auto 1fr; gap:7px 18px; align-content:start; font-size:clamp(11.5px,.95vw,13px)}
.facts dt{color:var(--muted); letter-spacing:.1em}
.facts dd{margin:0; color:#7A86AC}

.sec{margin:clamp(38px,5vw,54px) 0 0}
.sec .h{color:var(--muted); letter-spacing:.2em; font-size:10.5px; display:block; margin-bottom:16px}
.srow{display:grid; grid-template-columns:9em 1fr; gap:9px 16px; align-items:baseline; margin-bottom:11px}
.srow:last-child{margin-bottom:0}
.srow .lbl{color:var(--muted); font-size:11.5px; letter-spacing:.08em}
.tags{display:flex; flex-wrap:wrap; gap:7px}
.tags span{font-size:12px; padding:4px 10px; border:1px solid var(--rule); color:#7A86AC; border-radius:2px}

.works{font-size:clamp(12px,1vw,14px); line-height:2.25; color:var(--code-dim)}
.works a{display:block; text-decoration:none; color:#7A86AC; white-space:pre}
.works a .y{color:#4E5A85; margin-right:1.5ch}
.works a:hover,.works a:focus-visible{color:var(--gold)}
.works a:hover .y{color:#7A86AC}

.fnav{display:flex; flex-wrap:wrap; gap:26px; margin-top:46px; padding-top:24px; border-top:1px solid var(--rule)}
.fnav a{color:var(--dim); text-decoration:none; font-size:13px; letter-spacing:.06em}
.fnav a::before{content:"# "; color:var(--muted)}
.fnav a:hover,.fnav a:focus-visible{color:var(--gold)}
.copy{margin-top:32px; color:#3F4869; font-size:11px; letter-spacing:.1em}

/* ---------- contact ---------- */
.soonbox{
  border:1px dashed var(--rule); border-radius:2px; padding:26px 22px;
  color:var(--muted); font-size:12.5px; letter-spacing:.06em; max-width:520px;
}
.gform{width:100%; max-width:640px; min-height:900px; border:1px solid var(--rule); border-radius:2px; background:#fff}

/* 自前フォーム。Googleフォームに差し替えたので今は使っていないが、
   将来サイト内で完結させたくなったときのために残してある（js/site.js も同様） */
.contact > p{margin:0 0 24px; max-width:48ch; color:var(--dim); font-size:clamp(12.5px,1.05vw,15px); line-height:1.9}
.cform{max-width:520px; display:flex; flex-direction:column; gap:18px}
.frow{display:flex; flex-direction:column; gap:7px}
.frow label{font-size:11.5px; letter-spacing:.1em; color:var(--muted)}
.frow input,.frow textarea{
  font-family:inherit; font-size:14px; color:#E6ECFB; background:var(--ink2);
  border:1px solid var(--rule); border-radius:2px; padding:11px 13px; width:100%; resize:vertical;
}
.frow input:focus,.frow textarea:focus{outline:none; border-color:var(--gold)}
.frow input::placeholder,.frow textarea::placeholder{color:#3F4869}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.cform button{
  font-family:inherit; font-size:13px; letter-spacing:.1em; cursor:pointer; align-self:flex-start;
  background:none; border:1px solid var(--gold); color:var(--gold);
  padding:11px 26px; border-radius:2px; transition:background .2s,color .2s;
}
.cform button:hover:not(:disabled){background:var(--gold); color:var(--ink)}
.cform button:disabled{opacity:.45; cursor:default}
.fmsg{margin:0; font-size:12.5px; min-height:1.4em; color:var(--muted)}
.fmsg.ok{color:var(--ok)}
.fmsg.err{color:var(--err)}

/* ================================================================
   portfolio
   ================================================================ */
.pf{max-width:1040px; margin:0 auto; padding:clamp(74px,9vw,118px) clamp(22px,5vw,64px) 72px}
.crumb{display:flex; gap:9px; align-items:center; flex-wrap:wrap; font-size:12px; color:var(--muted); letter-spacing:.04em; margin:0}
.crumb a{color:var(--muted); text-decoration:none}
.crumb a:hover,.crumb a:focus-visible{color:var(--gold)}
.crumb .sp{opacity:.4}
.pf h1{
  font-family:"Bricolage Grotesque",system-ui,sans-serif; font-weight:800; letter-spacing:-.035em;
  font-size:clamp(30px,5.2vw,54px); line-height:1.08; margin:16px 0 0; color:#EDF2FF; text-wrap:balance;
}
.pf h1 em{font-style:normal; color:var(--gold)}
.pf .sub{margin:16px 0 0; max-width:52ch; color:var(--dim); font-size:clamp(12.5px,1.05vw,15px); line-height:1.95}

.filters{display:flex; flex-wrap:wrap; gap:8px; margin:34px 0 0}
.filters button{
  font-family:inherit; font-size:12px; letter-spacing:.06em; padding:5px 13px; cursor:pointer;
  background:none; border:1px solid var(--rule); color:#7A86AC; border-radius:2px;
}
.filters button:hover{border-color:#3A4468}
.filters button[aria-pressed="true"]{border-color:var(--gold); color:var(--gold)}
.count{margin:16px 0 0; font-size:11px; color:var(--muted); letter-spacing:.14em}

.cards{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(266px,1fr)); gap:1px;
  background:var(--rule); border:1px solid var(--rule); margin-top:14px;
}
.card{background:var(--ink); padding:22px 22px 20px; display:flex; flex-direction:column; gap:11px; text-decoration:none; min-height:178px}
.card:hover,.card:focus-visible{background:var(--ink2)}
.card .yr{font-size:11px; color:var(--muted); letter-spacing:.16em}
.card h3{margin:0; font-family:"Bricolage Grotesque",system-ui,sans-serif; font-weight:800; letter-spacing:-.02em; font-size:18px; color:#E6ECFB}
.card:hover h3,.card:focus-visible h3{color:var(--gold)}
.card p{margin:0; flex:1; font-size:12.5px; line-height:1.8; color:var(--dim)}
.st{display:flex; gap:6px; flex-wrap:wrap}
.st span{font-size:10.5px; color:var(--muted); border:1px solid var(--rule); padding:2px 7px; border-radius:2px}

.meta{display:flex; gap:20px; flex-wrap:wrap; margin:18px 0 0; font-size:12px; color:var(--muted)}
.meta b{color:#7A86AC; font-weight:400}
.shot{
  margin:36px 0 0; aspect-ratio:16/9; border:1px solid var(--rule); display:grid; place-items:center;
  color:var(--muted); font-size:11px; letter-spacing:.22em; overflow:hidden;
  background:repeating-linear-gradient(45deg,#0C1120,#0C1120 9px,#0E1526 9px,#0E1526 18px);
}
.shot img{width:100%; height:100%; object-fit:cover; display:block}
.dbody{margin:36px 0 0; max-width:60ch}
.dbody p{margin:0 0 19px; color:var(--dim); font-size:clamp(12.5px,1.05vw,15px); line-height:2}
.dbody p:last-child{margin-bottom:0}
.spec{margin:36px 0 0; display:grid; grid-template-columns:auto 1fr; gap:9px 20px; font-size:12.5px; max-width:46ch}
.spec dt{color:var(--muted); letter-spacing:.08em}
.spec dd{margin:0; color:#7A86AC}
.pager{display:flex; justify-content:space-between; gap:20px; margin-top:58px; padding-top:24px; border-top:1px solid var(--rule); font-size:12.5px}
.pager a{color:var(--dim); text-decoration:none; max-width:46%}
.pager a:hover,.pager a:focus-visible{color:var(--gold)}
.pager .lb{display:block; font-size:10.5px; color:var(--muted); letter-spacing:.16em; margin-bottom:5px}

/* ================================================================
   404
   ================================================================ */
.nf{min-height:100svh; display:grid; place-items:center; padding:40px 24px; text-align:left}
.nf pre{margin:0; font-size:clamp(11px,1.4vw,15px); line-height:1.9; color:var(--code-dim)}
.nf .e{color:var(--err)}
.nf .lnk{color:var(--gold); text-decoration:none}
.nf .lnk:hover{text-shadow:0 0 12px rgba(255,212,59,.7)}

/* ================================================================
   responsive / motion
   ================================================================ */
@media (max-width:820px){
  .code{font-size:min(2.4vw,1.18vh)}
  .code-lit,.lamp{display:none}
  .brand{top:14px; right:16px}
}
@media (max-width:760px){
  .cols{grid-template-columns:1fr}
  .srow{grid-template-columns:1fr; gap:8px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .g,.g.flash{animation:none; color:var(--gold)}
  .cue{transition:none}
}