/* 色、余白、動きの基準をページ全体で共有します。 */
:root {
  --void: #080a0b;
  --paper: #f2f0e8;
  --lime: #d9ff45;
  --blue: #5d72ff;
  --coral: #ff5f41;
  --line: rgba(242, 240, 232, 0.22);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
a { text-decoration: none; }

/* Canvas とグレインは情報を邪魔しない背景レイヤーです。 */
#ambient-canvas { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.7; }
.grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.08; background-image: radial-gradient(rgba(255,255,255,.72) .55px, transparent .75px); background-size: 4px 4px; mix-blend-mode: soft-light; }
.site-header, main { position: relative; z-index: 2; }
.site-header { border-bottom: 1px solid rgba(242,240,232,.14); background: rgba(8,10,11,.65); backdrop-filter: blur(16px); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.version-link { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; color: var(--paper); font: .67rem 'DM Mono', monospace; letter-spacing: .04em; text-transform: uppercase; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.version-link:hover, .version-link:focus-visible { border-color: var(--lime); background: var(--lime); color: var(--void); }
.version-link span { font-size: .85rem; }

.wordmark, .nav-item, .motion-switch, .hero__topline, .hero__eyebrow, .hero__aside, .hero__bottomline, .section-intro p, .section-intro span, .about-section__index, .contact-section > p, .contact-section__bottom { font-family: 'DM Mono', monospace; font-size: .67rem; letter-spacing: .09em; text-transform: uppercase; }
.wordmark { display: inline-flex; align-items: center; gap: 7px; color: var(--paper); font-size: .73rem; font-weight: 500; }
.wordmark i { display: inline-block; width: 9px; height: 9px; background: var(--lime); border-radius: 50%; box-shadow: 0 0 18px rgba(217,255,69,.7); }
.nav-item { color: rgba(242,240,232,.62); transition: color .25s var(--ease); }
.nav-item:hover { color: var(--lime); }
.motion-switch { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 8px 11px; color: var(--paper); background: transparent; cursor: pointer; }
.motion-switch__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px var(--lime); }
.motion-switch[aria-pressed='false'] .motion-switch__dot { background: var(--coral); box-shadow: none; }

/* Hero の文字は画面幅に合わせて大きくし、画像より先に作者性を伝えます。 */
.hero { min-height: calc(100svh - 70px); max-width: 1600px; margin: 0 auto; padding: 23px 20px 35px; display: flex; flex-direction: column; justify-content: space-between; }
.hero__topline, .hero__bottomline { display: flex; align-items: start; justify-content: space-between; gap: 20px; color: rgba(242,240,232,.56); }
.hero__title-wrap { position: relative; z-index: 3; margin-top: 7vh; }
.hero__eyebrow { margin-bottom: 11px; color: var(--lime); }
.hero__title { margin: 0; font-size: clamp(4.4rem, 15.2vw, 15.5rem); font-weight: 700; letter-spacing: -.105em; line-height: .72; }
.split-line { display: block; overflow: hidden; }
.split-line > span { display: inline-block; transform: translateY(118%); animation: letter-rise .9s var(--ease) forwards; animation-delay: calc(var(--char-index) * 35ms + 100ms); }
.split-line--outline { color: transparent; -webkit-text-stroke: clamp(1px,.11vw,2px) var(--paper); }
@keyframes letter-rise { to { transform: translateY(0); } }

/* 写真カード、軌道、見出しを重ね、動くポスターのような中心部を作ります。 */
.hero__stage { position: relative; min-height: clamp(260px, 26vw, 400px); margin-top: -2.5vw; }
.float-card { position: absolute; z-index: 2; margin: 0; overflow: hidden; background: var(--blue); box-shadow: 14px 14px 0 var(--void), 15px 15px 0 rgba(242,240,232,.45); transition: transform .5s var(--ease); }
.float-card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.2) contrast(1.08); }
.float-card figcaption { position: absolute; right: 9px; bottom: 8px; color: var(--paper); mix-blend-mode: difference; font: .59rem 'DM Mono', monospace; letter-spacing: .07em; }
.float-card--one { top: 2%; left: 42%; width: clamp(115px, 14vw, 205px); aspect-ratio: .75; transform: rotate(9deg); }
.float-card--two { top: 37%; left: 18%; width: clamp(96px, 11vw, 166px); aspect-ratio: 1; transform: rotate(-10deg); }
.float-card--three { right: 12%; bottom: -3%; width: clamp(104px, 12.5vw, 188px); aspect-ratio: 1.15; transform: rotate(7deg); }
.orbit { position: absolute; border: 1px solid rgba(217,255,69,.7); border-radius: 50%; animation: pulse-orbit 5s ease-in-out infinite; }
.orbit--one { width: clamp(160px,26vw,360px); aspect-ratio: 1; top: -10%; right: 19%; }
.orbit--two { width: clamp(100px,15vw,230px); aspect-ratio: 1; top: 35%; left: 35%; border-color: rgba(255,95,65,.7); animation-delay: -2.5s; }
@keyframes pulse-orbit { 50% { transform: scale(1.15) rotate(20deg); opacity: .35; } }
.hero-registration { position: absolute; z-index: 4; right: 28%; bottom: 6%; display: grid; grid-template-columns: repeat(2,12px); gap: 4px; padding: 8px; border: 1px solid rgba(242,240,232,.55); background: rgba(8,10,11,.35); backdrop-filter: blur(4px); transform: rotate(-8deg); animation: registration-jump 3.8s steps(2) infinite; }
.hero-registration i { width: 12px; height: 12px; border-radius: 50%; background: var(--coral); }
.hero-registration i:nth-child(2) { background: var(--blue); }.hero-registration i:nth-child(3) { background: var(--lime); }.hero-registration i:nth-child(4) { background: var(--paper); }
.hero-registration b { grid-column: 1 / -1; margin-top: 4px; color: var(--paper); font: .48rem/1.15 'DM Mono', monospace; letter-spacing: .08em; }
@keyframes registration-jump { 50% { translate: 4px -5px; } }
.hero-stamp { position: absolute; z-index: 4; left: 35%; bottom: 5%; display: grid; width: 96px; aspect-ratio: 1; place-content: center; border: 1px dashed var(--lime); border-radius: 50%; color: var(--lime); font: .58rem/1 'DM Mono', monospace; text-align: center; animation: stamp-spin 13s linear infinite; }
.hero-stamp b { margin: 4px 0; color: var(--coral); font-size: 1.1rem; line-height: .8; }
@keyframes stamp-spin { to { rotate: 360deg; } }
.hero__aside { position: absolute; right: 0; top: 28%; color: var(--lime); line-height: 1.45; text-align: right; }
.hero__bottomline { margin-top: 22px; line-height: 1.45; }
.hero__bottomline p { margin: 0; }
.hero__availability { text-align: right; }
.hero__availability strong { color: var(--paper); font-weight: 400; }
.scroll-link { display: inline-flex; align-items: center; gap: 15px; color: var(--paper); font: .69rem 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.scroll-link b { display: grid; width: 37px; height: 37px; place-content: center; border: 1px solid var(--lime); border-radius: 50%; color: var(--lime); transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease); }
.scroll-link:hover b { background: var(--lime); color: var(--void); transform: translateY(5px); }

/* Ticker はセクションの切り替わりを明確にする強い色面です。 */
.ticker { position: relative; z-index: 3; overflow: hidden; background: var(--lime); color: var(--void); border-top: 1px solid var(--void); border-bottom: 1px solid var(--void); }
.ticker__track { display: flex; width: max-content; align-items: center; gap: 26px; padding: 12px 0; font-size: clamp(1.4rem, 3vw, 2.8rem); font-weight: 700; letter-spacing: -.06em; animation: ticker-run 19s linear infinite; }
.ticker__track i { color: var(--coral); font-style: normal; }
@keyframes ticker-run { to { transform: translateX(-25%); } }

/* Work は不均一なグリッドで、画面ごとにポスターを貼ったようなリズムを作ります。 */
.work-section { max-width: 1600px; margin: 0 auto; padding: 125px 20px 145px; }
.section-intro { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: end; margin-bottom: 48px; }
.section-intro p, .section-intro span { margin: 0; color: rgba(242,240,232,.55); }
.section-intro span { text-align: right; color: var(--lime); }
.section-intro h2 { grid-column: 1 / -1; margin: 0; font-size: clamp(4rem, 10vw, 10.5rem); font-weight: 700; letter-spacing: -.1em; line-height: .75; }
.project-wall { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: clamp(15px,2vw,28px); align-items: start; perspective: 1300px; }
.project { position: relative; z-index: 1; transition: z-index .2s; }
.project:hover { z-index: 5; }
.project--wide { grid-column: 1 / span 7; }
.project--tall { grid-column: 8 / span 5; margin-top: 18%; }
.project--square { grid-column: 2 / span 4; margin-top: -5%; }
.project--long { grid-column: 6 / span 7; margin-top: 9%; }
.project--blue { grid-column: 2 / span 5; margin-top: 14%; }
.project__open { display: block; width: 100%; border: 0; padding: 0; background: transparent; cursor: pointer; text-align: left; }
.project__surface { position: relative; display: block; overflow: hidden; min-height: 240px; background: var(--coral); transform-style: preserve-3d; transition: transform .2s ease-out, box-shadow .35s var(--ease); }
.project--wide .project__surface { aspect-ratio: 1.38; }
.project--tall .project__surface { aspect-ratio: .75; }
.project--square .project__surface { aspect-ratio: 1; }
.project--long .project__surface { aspect-ratio: 1.65; }
.project__surface img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.95) contrast(1.08); transition: transform .7s var(--ease), filter .5s var(--ease); }
.project__wash { position: absolute; inset: 0; background: linear-gradient(125deg, rgba(8,10,11,.7), transparent 48%, rgba(93,114,255,.5)); mix-blend-mode: multiply; transition: opacity .35s var(--ease); }
.project--blue .project__wash { background: linear-gradient(150deg, rgba(93,114,255,.8), transparent 60%, rgba(217,255,69,.55)); }
.project__name { position: absolute; z-index: 2; left: clamp(17px,2vw,30px); bottom: clamp(15px,2vw,28px); color: var(--paper); font-size: clamp(2.3rem,5.6vw,6.3rem); font-weight: 700; letter-spacing: -.1em; line-height: .78; transform: translateZ(45px); }
.project__hint { position: absolute; z-index: 3; right: 14px; top: 14px; display: grid; width: 78px; aspect-ratio: 1; place-content: center; border-radius: 50%; background: var(--lime); color: var(--void); font: .52rem/1.12 'DM Mono', monospace; letter-spacing: .04em; text-align: center; text-transform: uppercase; opacity: 0; transform: translate(12px,-12px) scale(.5); transition: opacity .25s var(--ease), transform .45s var(--ease); }
.project:hover .project__surface { box-shadow: 18px 22px 0 var(--lime); }
.project:hover img { filter: saturate(1.4) contrast(1.12); transform: scale(1.11); }
.project:hover .project__wash { opacity: .35; }
.project:hover .project__hint, .project__open:focus-visible .project__hint { opacity: 1; transform: translate(0,0) scale(1); }
.project__open:focus-visible { outline: 2px solid var(--lime); outline-offset: 7px; }

/* About、Skills、Contact は同じ暗いポスター言語でつなぎ、色の切り替えを抑えます。 */
.about-section { position: relative; z-index: 3; overflow: hidden; min-height: 92vh; padding: 0 20px; border-top: 1px solid var(--line); background: var(--void); color: var(--paper); display: flex; flex-direction: column; justify-content: space-between; }
.about-section::before { position: absolute; top: 15%; right: -16vw; width: 55vw; aspect-ratio: 1; border: 1px solid rgba(217,255,69,.48); border-radius: 50%; content: ''; animation: slow-spin 18s linear infinite; }
.about-section::after { position: absolute; left: 9%; bottom: 17%; width: 36vw; aspect-ratio: 1; border: 1px solid rgba(93,114,255,.64); border-radius: 50%; content: ''; animation: slow-spin 15s linear infinite reverse; }
@keyframes slow-spin { to { transform: rotate(360deg) scale(.96); } }
.about-section__rail, .about-section__footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 17px 0; color: rgba(242,240,232,.6); font: .64rem 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.about-section__rail { border-bottom: 1px solid var(--line); }.about-section__footer { border-top: 1px solid var(--line); }
.about-section__footer { gap: 14px; color: var(--lime); font-size: .57rem; }
.about-section__content { position: relative; z-index: 1; display: grid; grid-template-columns: 1.25fr .75fr; gap: 40px; align-items: end; margin: auto 0; }
.about-section h2 { margin: 0; font-size: clamp(5rem,15vw,15rem); font-weight: 700; letter-spacing: -.12em; line-height: .69; }
.about-section h2 em { color: transparent; font-style: normal; -webkit-text-stroke: 1px var(--lime); }
.about-section__statement { display: flex; align-items: end; gap: 14px; max-width: 340px; padding-bottom: 10px; }
.about-section__statement span { color: var(--coral); font-size: 2.3rem; line-height: .8; }.about-section__statement p { margin: 0; font-size: clamp(1rem,1.7vw,1.35rem); font-weight: 500; line-height: 1.3; }

/* 経歴と能力：時間軸とカードを同じ細い罫線でつなぎ、作品壁から自然に続けます。 */
.experience-section { position: relative; z-index: 3; overflow: hidden; max-width: 1600px; margin: 0 auto; border-top: 1px solid var(--line); background: var(--void); color: var(--paper); }
.experience-section::before { position: absolute; right: -15%; top: 0; width: 48%; aspect-ratio: 1; border: 1px solid rgba(217,255,69,.17); border-radius: 50%; content: ''; pointer-events: none; }
.experience-section__head { position: relative; display: flex; justify-content: space-between; gap: 20px; margin-bottom: clamp(60px,8vw,110px); border-bottom: 1px solid var(--line); padding-bottom: 16px; color: rgba(242,240,232,.55); font: .65rem 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.experience-section__head p, .experience-section__title p { margin: 0; }
.experience-section__grid { position: relative; z-index: 1; }
.experience-section__title { min-height: 190px; }
.experience-section__title p { margin-bottom: 19px; color: var(--lime); font: .72rem 'DM Mono', monospace; letter-spacing: .11em; }
.experience-section__title h2 { margin: 0; font-size: clamp(3.2rem,5.5vw,6.6rem); font-weight: 700; letter-spacing: -.095em; line-height: .86; }
.career-list { margin: 0; padding: 0 0 0 23px; list-style: none; }
.career-item { position: relative; min-height: 176px; border-left: 1px solid var(--line); padding: 2px 0 32px 25px; transition: border-color .35s var(--ease); }
.career-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.career-item::before { position: absolute; left: -7px; top: 3px; width: 13px; height: 13px; border: 2px solid var(--lime); border-radius: 50%; background: var(--void); box-shadow: 0 0 0 5px var(--void); content: ''; transition: transform .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease); }
.career-item:hover::before { transform: scale(1.35); background: var(--lime); box-shadow: 0 0 0 5px var(--void), 0 0 22px var(--lime); }
.career-item__period { color: var(--lime); font: .67rem 'DM Mono', monospace; letter-spacing: .07em; }
.career-item h3 { margin: 11px 0 8px; font-size: clamp(1.25rem,2vw,1.85rem); font-weight: 600; letter-spacing: -.05em; line-height: 1.15; }
.career-item h3 small { display: block; margin-top: 5px; color: rgba(242,240,232,.55); font-size: .65em; font-weight: 400; letter-spacing: -.02em; }
.career-item p, .capability-card p { max-width: 550px; margin: 0; color: rgba(242,240,232,.65); font-size: .88rem; line-height: 1.55; }
.capability-list { display: grid; gap: 11px; }
.capability-card { border: 1px solid var(--line); border-radius: 8px; padding: 20px; background: rgba(255,255,255,.025); transition: border-color .4s var(--ease), border-radius .55s var(--ease), transform .4s var(--ease), background .4s var(--ease); }
.capability-card:hover { border-color: var(--lime); border-radius: 25px 8px 25px 8px; background: rgba(217,255,69,.055); transform: translateY(-3px); }
.capability-card > div { display: flex; align-items: start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.capability-card h3 { margin: 0; font-size: clamp(1.1rem,1.55vw,1.45rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.18; }
.capability-card span { flex: 0 0 auto; border: 1px solid rgba(217,255,69,.35); border-radius: 999px; padding: 6px 8px; color: var(--lime); font: .56rem/1.2 'DM Mono', monospace; letter-spacing: .03em; text-align: center; text-transform: uppercase; }
.capability-card p { font-size: .8rem; }
.disciplines { margin-top: 35px; }
.disciplines h3 { margin: 0 0 15px; color: rgba(242,240,232,.55); font: .63rem 'DM Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
.disciplines ul { margin: 0; padding: 0; list-style: none; }
.disciplines li { border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; color: rgba(242,240,232,.8); font-size: .72rem; line-height: 1.25; transition: border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease); }
.disciplines li:hover { border-color: var(--lime); background: var(--lime); color: var(--void); }

/* Skills は明るいブロックではなく、作品カードと同じ枠線と hover で構成します。 */
.skills-section { position: relative; z-index: 3; overflow: hidden; padding: 105px 20px; background: var(--void); color: var(--paper); border-top: 1px solid var(--line); }
.skills-section::before { position: absolute; left: -10%; top: 22%; width: 38vw; aspect-ratio: 1; border: 1px solid rgba(255,95,65,.4); border-radius: 50%; content: ''; }
.skills-section__header { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end; }
.skills-section__header p, .skills-section__header span { margin: 0; color: rgba(242,240,232,.58); font: .64rem 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }.skills-section__header span { color: var(--lime); text-align: right; }
.skills-section h2 { grid-column: 1 / -1; margin: 13px 0 0; font-size: clamp(4.1rem,11vw,11.5rem); font-weight: 700; letter-spacing: -.12em; line-height: .7; }
.skills-grid { position: relative; z-index: 1; display: grid; margin-top: clamp(60px,10vw,130px); border-top: 1px solid var(--line); }
.skills-grid div { position: relative; display: grid; grid-template-columns: 15% 1fr auto; align-items: center; min-height: 130px; border-bottom: 1px solid var(--line); padding: 18px 4px; transition: padding .35s var(--ease), background .35s var(--ease), color .35s var(--ease); }
.skills-grid div:hover { padding-right: 20px; padding-left: 20px; background: var(--lime); color: var(--void); }
.skills-grid span { color: var(--coral); font: .64rem 'DM Mono', monospace; }.skills-grid strong { font-size: clamp(2rem,5vw,5.6rem); font-weight: 700; letter-spacing: -.095em; line-height: .78; }.skills-grid strong small { margin-left: 8px; color: rgba(242,240,232,.5); font-size: .24em; font-weight: 500; letter-spacing: -.03em; }.skills-grid div:hover strong small { color: rgba(8,10,11,.62); }.skills-grid i { color: var(--lime); font-size: clamp(1.3rem,3vw,3rem); font-style: normal; transition: rotate .35s var(--ease); }.skills-grid div:hover i { color: var(--coral); rotate: 45deg; }

/* Contact は同じダークトーンで、lime の文字を最終的な視線の着地点にします。 */
.contact-section { position: relative; z-index: 3; overflow: hidden; min-height: 92vh; padding: 32px 20px 24px; background: var(--void); color: var(--paper); border-top: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; }
.contact-section::before { position: absolute; right: -11vw; bottom: -16vw; width: 54vw; aspect-ratio: 1; border-radius: 50%; background: var(--coral); filter: blur(1px); opacity: .95; }.contact-section::after { position: absolute; right: 10%; top: 28%; width: 14vw; aspect-ratio: 1; border: 1px solid var(--lime); border-radius: 50%; content: ''; animation: pulse-orbit 4s ease-in-out infinite; }
.contact-section__header { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: rgba(242,240,232,.6); font: .64rem 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }.contact-section__header p { margin: 0; }.contact-section__header span { color: var(--lime); }
.contact-section h2 { position: relative; z-index: 1; margin: auto 0; font-size: clamp(5.8rem,17vw,18rem); font-weight: 700; letter-spacing: -.13em; line-height: .66; }.contact-section h2 em { color: transparent; font-style: normal; -webkit-text-stroke: 1px var(--lime); }
.contact-link { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: space-between; width: min(100%,730px); border-bottom: 1px solid var(--lime); padding-bottom: 14px; color: var(--lime); font-size: clamp(1.5rem,3.7vw,4.2rem); font-weight: 700; letter-spacing: -.08em; line-height: 1; }.contact-link b { color: var(--paper); font-size: .7em; transition: transform .35s var(--ease); }.contact-link:hover b { transform: translate(10px,-10px) rotate(15deg); }
.contact-section__bottom { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding-top: 15px; color: rgba(242,240,232,.58); font: .64rem 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }.contact-section__bottom div { display: flex; gap: 17px; }.contact-section__bottom a { color: var(--paper); transition: color .2s var(--ease); }.contact-section__bottom a:hover { color: var(--lime); }

/* Viewer は全画面で縦方向に作品を見せ、Web 案件だけは長いスクリーンショット用の比率にします。 */
.project-viewer { position: fixed; inset: 0; z-index: 50; visibility: hidden; opacity: 0; transition: opacity .35s var(--ease), visibility .35s var(--ease); }
.project-viewer.is-open { visibility: visible; opacity: 1; }
.project-viewer__backdrop { position: absolute; inset: 0; background: rgba(8,10,11,.83); backdrop-filter: blur(10px); }
.project-viewer__panel { position: relative; margin-left: auto; width: min(100%,1050px); height: 100%; overflow-y: auto; background: var(--paper); color: var(--void); transform: translateX(100%); transition: transform .6s var(--ease); }
.project-viewer.is-open .project-viewer__panel { transform: translateX(0); }
.project-viewer__header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid rgba(8,10,11,.18); background: rgba(242,240,232,.93); backdrop-filter: blur(10px); }
.project-viewer__header h2 { margin: 0; font-size: clamp(2rem,5vw,5rem); letter-spacing: -.09em; line-height: .8; }
.project-viewer__header button { border: 1px solid var(--void); border-radius: 999px; padding: 8px 12px; background: transparent; color: var(--void); font: .65rem 'DM Mono', monospace; text-transform: uppercase; cursor: pointer; }
.project-viewer__images { display: grid; gap: 18px; padding: 20px; }
.project-viewer__images figure { margin: 0; overflow: hidden; background: #d1cec5; }
.project-viewer__images img { display: block; width: 100%; height: auto; min-height: 280px; object-fit: cover; }
.project-viewer__images figure.is-web { max-width: 720px; margin: 0 auto; border: 10px solid var(--void); box-shadow: 16px 16px 0 var(--blue); }
.project-viewer__images figure.is-web img { aspect-ratio: .56; object-position: top; }

/* カーソルとスクロールメーターはデスクトップだけで表示します。 */
.cursor-dot, .cursor-ring { position: fixed; z-index: 30; top: 0; left: 0; pointer-events: none; opacity: 0; border-radius: 50%; transform: translate(-50%,-50%); }
.cursor-dot { width: 7px; height: 7px; background: var(--lime); mix-blend-mode: difference; }
.cursor-ring { width: 33px; height: 33px; border: 1px solid var(--paper); transition: width .22s var(--ease), height .22s var(--ease), border-color .22s var(--ease); }
body.has-cursor .cursor-dot, body.has-cursor .cursor-ring { opacity: 1; }
body.cursor-active .cursor-ring { width: 56px; height: 56px; border-color: var(--lime); }
.scroll-meter { position: fixed; z-index: 12; right: 9px; top: 50%; width: 2px; height: 70px; background: rgba(242,240,232,.25); transform: translateY(-50%); }
.scroll-meter span { display: block; width: 100%; height: var(--scroll-progress, 0%); background: var(--lime); box-shadow: 0 0 8px var(--lime); }

/* Motion ボタンを切り替えた時は、連続する装飾アニメーションを止めます。 */
.motion-paused .ticker__track,
.motion-paused .orbit,
.motion-paused .about-section::before,
.motion-paused .about-section::after,
.motion-paused .contact-section::after,
.motion-paused .hero-stamp,
.motion-paused .hero-registration { animation-play-state: paused; }

/* モバイルでは動く要素を整理し、作品の比率と読みやすさを優先します。 */
@media (max-width: 767px) {
  .experience-section__head span { display: none; }
  .experience-section__title { min-height: 0; margin-bottom: 38px; }
  .experience-section__title h2 { font-size: clamp(3.1rem,14vw,5rem); }
  .career-item { min-height: 0; padding-bottom: 39px; }
  .capability-card > div { flex-wrap: wrap; }
  .capability-card span { flex-basis: auto; }
  .header-actions { gap: 6px; }
  .version-link { padding: 8px 9px; font-size: .54rem; }
  .hero { min-height: 780px; padding-top: 18px; }
  .hero__topline { font-size: .57rem; }
  .hero__title-wrap { margin-top: 9vh; }
  .hero__title { font-size: clamp(4.25rem, 22vw, 7rem); line-height: .76; }
  .hero__stage { min-height: 355px; margin-top: 20px; }
  .float-card--one { top: 4%; left: 38%; width: 144px; }
  .float-card--two { top: 44%; left: 1%; width: 112px; }
  .float-card--three { right: 1%; bottom: 5%; width: 127px; }
  .orbit--one { right: 4%; top: 8%; width: 225px; }
  .orbit--two { top: 42%; left: 22%; width: 145px; }
  .hero__aside { right: 0; top: 8%; font-size: .57rem; }
  .hero__bottomline { font-size: .6rem; }
  .hero__availability { display: none; }
  .work-section { padding: 90px 20px 112px; }
  .section-intro { margin-bottom: 34px; }
  .project-wall { display: block; }
  .project { margin: 0 0 25px !important; }
  .project--wide .project__surface, .project--long .project__surface { aspect-ratio: 1.1; }
  .project--tall .project__surface { aspect-ratio: .8; }
  .project--square .project__surface { aspect-ratio: 1.05; }
  .project__name { font-size: clamp(3.1rem,16vw,5.3rem); }
  .project__hint { opacity: 1; transform: none; width: 64px; font-size: .46rem; }
  .hero-registration { right: 25%; bottom: 2%; }.hero-stamp { left: 28%; bottom: 2%; width: 76px; font-size: .47rem; }
  .about-section { min-height: 700px; }.about-section::before { right: -55vw; top: 18%; width: 150vw; }.about-section::after { left: -15vw; bottom: 20%; width: 95vw; }
  .about-section__rail { font-size: .54rem; }.about-section__rail span { display: none; }.about-section__content { display: flex; flex-direction: column; align-items: start; gap: 38px; }.about-section h2 { font-size: clamp(4.8rem,22vw,7.6rem); }.about-section__statement { max-width: 280px; }.about-section__footer { font-size: .44rem; }
  .skills-section { padding: 82px 20px; }.skills-section::before { left: -40vw; width: 110vw; }.skills-section__header span { display: none; }.skills-section h2 { font-size: clamp(4.1rem,19vw,6.5rem); }.skills-grid { margin-top: 58px; }.skills-grid div { grid-template-columns: 23% 1fr auto; min-height: 90px; padding: 14px 2px; }.skills-grid strong { font-size: clamp(1.85rem,10vw,3.4rem); }.skills-grid strong small { display: block; margin: 7px 0 0; font-size: .31em; }.skills-grid i { font-size: 1.2rem; }
  .contact-section { min-height: 680px; }.contact-section::before { right: -47vw; bottom: -28vw; width: 125vw; }.contact-section::after { top: 38%; right: 12%; width: 37vw; }.contact-section__header { font-size: .54rem; }.contact-section__header span { max-width: 110px; text-align: right; }.contact-section h2 { font-size: clamp(5.5rem,24vw,8.2rem); }.contact-link { width: 100%; font-size: clamp(1.35rem,7vw,2.4rem); }.contact-section__bottom { font-size: .55rem; }
  .contact-section__bottom div { gap: 10px; }
  .cursor-dot, .cursor-ring, .scroll-meter { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  #ambient-canvas, .grain { display: none; }
}