/* 2026-10-07 — 自己紹介（WHO I AM）と二つのプロジェクト（PROJECTS）
   背景は index.html の SECVIDEO（identity / projects）で、各セクション専用の Firefly 映像に切り替わる */

/* The New York Times の見出しのような新聞系セリフ（Google Fonts: Old Standard TT） */
:root{--news-serif:"Old Standard TT","Times New Roman","Hiragino Mincho ProN",serif}

#identity .secskew{--s1:rgba(12,18,30,.88);--s2:rgba(8,12,20,.8)}
#projects .secskew{--s1:rgba(9,20,28,.88);--s2:rgba(8,12,20,.8)}

.identity-eyebrow{font:700 .7rem/1.4 var(--sans);letter-spacing:.3em;color:var(--teal);margin-bottom:22px}

/* ── WHO I AM ── */
#identity.block{padding-top:clamp(96px,12vw,150px);padding-bottom:clamp(96px,12vw,150px)}
.identity-role{font-family:var(--news-serif);font-weight:400;font-size:clamp(1.9rem,4.6vw,3.6rem);line-height:1.15;letter-spacing:.01em;color:var(--ink);max-width:16em}
.identity-amp{font-family:var(--news-serif);font-style:italic;color:var(--teal)}
.identity-ja{margin-top:14px;max-width:40em;font-size:clamp(.9rem,1.3vw,1rem);line-height:1.9;color:#c7d4df}
.identity-ja__name{display:block;margin-bottom:4px;font-size:.84em;font-weight:700;letter-spacing:.14em;color:var(--teal)}
.identity-ja--statement{margin-top:0;margin-bottom:clamp(28px,4vw,40px)}
.project-name-ja{margin-top:10px;font-size:.84rem;line-height:1.7;color:var(--muted)}
.project-tags small,.identity-meta small,footer .footer-identity small{display:block;margin-top:6px;font-size:.92em;letter-spacing:.08em;color:var(--muted);text-transform:none}
.identity-meta li{line-height:1.5}
.identity-statement{margin:clamp(36px,6vw,64px) 0 clamp(18px,2.4vw,26px);font:800 clamp(2.7rem,9.4vw,8.4rem)/.94 var(--sans);letter-spacing:-.01em;text-transform:uppercase;
  background:linear-gradient(100deg,#ffffff 0%,#dff8f4 45%,var(--teal) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 0 transparent;filter:drop-shadow(0 6px 30px rgba(70,230,211,.18))}
.identity-statement .identity-line{display:block;white-space:nowrap}
/* 枠（.type-cycle）は幅・高さ・ベースラインを固定。中の文字（__glyph）だけが書体と大きさを変える */
.identity-statement .type-cycle{display:inline-block;height:1.02em;line-height:1.02;vertical-align:bottom;white-space:nowrap;overflow:visible}
.identity-statement .type-cycle__glyph{display:inline-block;line-height:0;vertical-align:baseline;transition:opacity .14s ease,filter .14s ease,transform .14s ease}
.identity-statement .type-cycle__glyph.is-swapping{opacity:0;filter:blur(4px);transform:translateY(.04em)}
.identity-statement .tc-times{font-family:var(--news-serif);font-weight:700;letter-spacing:-.02em}
.identity-statement .tc-blackletter{font-family:"UnifrakturCook","Old English Text MT",serif;font-weight:700;letter-spacing:0;text-transform:none}
.identity-statement .tc-gothic{font-family:var(--sans);font-weight:800;letter-spacing:-.01em}
.identity-statement .tc-script{font-family:"Snell Roundhand","Brush Script MT",cursive;font-weight:500;letter-spacing:-.02em;text-transform:none}
.identity-statement .tc-display{font-family:Impact,"Arial Black",var(--sans);font-weight:900;letter-spacing:-.02em}
.identity-statement::after{content:"";display:block;width:min(240px,40%);height:2px;margin-top:clamp(18px,2.4vw,28px);background:linear-gradient(90deg,var(--teal),transparent)}
.identity-lead{max-width:44em;font-size:clamp(.95rem,1.35vw,1.06rem);line-height:2;color:#d6e1ea}
.identity-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px;margin-top:clamp(32px,4vw,48px);padding-top:24px;border-top:1px solid var(--line)}
.identity-meta{list-style:none;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:.8rem;letter-spacing:.08em;color:var(--muted)}
.identity-jump{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;border:1px solid rgba(70,230,211,.55);border-radius:3px;color:var(--ink);text-decoration:none;font-size:.88rem;letter-spacing:.04em;background:rgba(7,11,18,.55);transition:background .25s,border-color .25s}
.identity-jump b{color:var(--teal);font-weight:700}
.identity-jump:hover,.identity-jump:focus-visible{background:rgba(70,230,211,.14);border-color:var(--teal)}

/* ── PROJECTS ── */
.projects-title{font-family:var(--news-serif);font-weight:400;font-size:clamp(2rem,5vw,3.8rem);line-height:1.1;color:var(--ink)}
.projects-x{color:var(--teal);font-style:italic;margin:0 .1em}
.projects-head .identity-ja{margin-top:18px}
.projects-lead{margin-top:16px;color:#d6e1ea;font-size:clamp(.92rem,1.3vw,1.02rem);line-height:1.9}
.projects-motto{font-weight:800;letter-spacing:.04em;color:var(--ink)}
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);margin-top:clamp(32px,4vw,52px)}
.project-card{position:relative;display:flex;flex-direction:column;padding:clamp(26px,3vw,40px);border:1px solid var(--line);border-radius:6px;background:linear-gradient(160deg,rgba(13,22,34,.82),rgba(7,11,18,.72));backdrop-filter:blur(6px)}
.project-card::before{content:"";position:absolute;left:0;top:0;width:56px;height:2px;background:var(--teal)}
.project-no{font:700 .7rem/1 var(--sans);letter-spacing:.28em;color:var(--muted);display:flex;gap:12px;align-items:center}
.project-no span{letter-spacing:.12em;padding:4px 10px;border:1px solid rgba(242,198,109,.5);border-radius:3px;color:var(--gold);font-size:.66rem}
.project-name{margin-top:18px;font:700 clamp(2.1rem,3.8vw,3.1rem)/1 var(--news-serif);letter-spacing:-.005em;color:var(--ink)}
.project-handle{margin-top:10px;font:600 .95rem/1 var(--sans);letter-spacing:.06em;color:var(--teal)}
.project-copy{margin-top:22px;font-family:var(--serif);font-size:clamp(1.05rem,1.6vw,1.22rem);line-height:1.6;color:var(--ink)}
.project-text{margin-top:12px;font-size:.92rem;line-height:1.95;color:#c7d4df}
.project-tags{margin-top:18px;font:700 .66rem/1.4 var(--sans);letter-spacing:.24em;color:var(--muted)}
.project-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:26px}
.project-links a{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border:1px solid rgba(255,255,255,.22);border-radius:3px;color:var(--ink);text-decoration:none;font-size:.84rem;transition:border-color .25s,background .25s}
.project-links a:first-child{border-color:rgba(70,230,211,.55)}
.project-links a:hover,.project-links a:focus-visible{border-color:var(--teal);background:rgba(70,230,211,.12)}

footer .footer-identity{margin:6px 0 8px;font-size:.78rem;letter-spacing:.14em;color:var(--teal)}

@media (max-width:760px){
  #identity.block{padding-top:84px;padding-bottom:84px}
  .identity-statement{font-size:clamp(2rem,10vw,4.2rem)}
  .identity-foot{flex-direction:column;align-items:flex-start}
  .identity-jump{width:100%;flex-direction:column;justify-content:center;gap:4px;padding:14px 16px;font-size:.84rem;text-align:center}
  .identity-jump > span{white-space:nowrap}
  .project-grid{grid-template-columns:1fr}
  .project-links a{flex:1 1 100%;justify-content:center}
}