/* 固定ページ「about」専用 */
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}

/* page hero（下層ページ共通の形） */
.page-hero{padding-block:clamp(64px,9vw,112px) clamp(40px,6vw,64px);border-bottom:1px solid var(--line);
  background:radial-gradient(ellipse 60% 80% at 90% 0%,color-mix(in srgb,var(--gold) 8%,transparent),transparent 70%),var(--paper)}
.page-hero .wrap{display:grid;gap:18px}
.crumbs{font-size:.74rem;color:var(--muted);letter-spacing:.1em;display:flex;gap:10px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--gold)}
.page-hero h1{font-size:clamp(2rem,4.4vw,3rem);letter-spacing:.14em}
.page-hero p{color:var(--muted);max-width:40rem}

/* message */
.msg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,6vw,88px);align-items:center}
.msg .about-photo{aspect-ratio:4/5}
.msg-body{display:grid;gap:22px;min-width:0}
.msg-body h2{font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.7;letter-spacing:.1em}
.msg-body h2 em{font-style:normal;color:var(--gold)}
.msg-body p{color:var(--muted);line-height:2.05}
.sign{display:flex;align-items:center;gap:14px;padding-top:10px;font-size:.84rem;letter-spacing:.14em}
.sign::before{content:"";width:40px;height:1px;background:var(--gold)}

/* story */
.story{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line);counter-reset:ch}
.story li{counter-increment:ch;padding:32px clamp(18px,2.6vw,36px) 8px;border-left:1px solid var(--line);display:grid;gap:12px;align-content:start;min-width:0}
.story li:first-child{border-left:0;padding-left:0}
.story .ch{font-family:var(--f-latin);font-style:italic;color:var(--gold);letter-spacing:.1em;font-size:1rem}
.story .ch::before{content:"Chapter " counter(ch);}
.story .field{font-size:.74rem;letter-spacing:.14em;color:var(--muted)}
.story h3{font-size:1.15rem;letter-spacing:.08em;line-height:1.6}
.story p{color:var(--muted);font-size:.9rem;line-height:1.95}
.story .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.story .tags span{font-size:.72rem;letter-spacing:.06em;padding:.2em .8em;border:1px solid var(--line)}

/* strengths (dark band) */
.edge{background:var(--band);border-block:1px solid var(--line)}
.edge-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.edge-item{background:var(--band);padding:clamp(26px,3.4vw,40px);display:grid;gap:14px;align-content:start;min-width:0}
.edge-item .from{font-size:.72rem;letter-spacing:.14em;color:var(--muted)}
.edge-item .from b{color:var(--gold);font-weight:500}
.edge-item h3{font-size:1.15rem;letter-spacing:.08em;line-height:1.6}
.edge-item p{color:var(--muted);font-size:.9rem;line-height:1.95}

/* values */
.values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.value{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 22px;padding:32px 0;border-bottom:1px solid var(--line);align-items:start}
.value:nth-child(odd){padding-right:clamp(16px,3vw,44px);border-right:1px solid var(--line)}
.value:nth-child(even){padding-left:clamp(16px,3vw,44px)}
.value .kanji{grid-row:span 2;font-family:var(--f-display);font-weight:600;font-size:2.4rem;line-height:1;color:var(--gold);writing-mode:vertical-rl;letter-spacing:.1em;min-height:3.2em}
.value h3{font-size:1.15rem;letter-spacing:.1em}
.value p{color:var(--muted);font-size:.9rem;line-height:1.95}

/* skills */
.skills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:901px){.skills .skill:last-child:nth-child(3n+1){grid-column:1/-1}}
@media (max-width:900px){.skills{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.skills{grid-template-columns:minmax(0,1fr)}}
.skill{position:relative;overflow:hidden;background:var(--paper);padding:26px 26px 24px;display:grid;gap:10px;grid-template-rows:auto auto 1fr auto;min-width:0;isolation:isolate;transition:background .35s ease}
.skill::before{content:"";position:absolute;left:0;top:0;height:2px;width:36px;background:var(--gold);transition:width .45s ease}
.skill:hover{background:var(--surface)}
.skill:hover::before{width:100%}
.skill-mark{position:absolute;right:-.06em;bottom:-.28em;z-index:-1;font-family:var(--f-latin);font-style:italic;font-weight:600;font-size:6.2rem;line-height:1;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--gold) 30%,transparent);transition:-webkit-text-stroke-color .35s ease,transform .5s ease;pointer-events:none}
.skill:hover .skill-mark{-webkit-text-stroke-color:color-mix(in srgb,var(--gold) 60%,transparent);transform:translateX(-6px)}
.skill-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.skill-icon{width:46px;height:46px;border-radius:50%;border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);display:grid;place-items:center;color:var(--gold);background:var(--paper)}
.skill-icon svg{width:24px;height:24px}
.skill .kind{font-size:.66rem;letter-spacing:.16em;color:var(--muted)}
.skill[data-group="code"] .kind::before,.skill[data-group="build"] .kind::before,.skill[data-group="design"] .kind::before{content:"";display:inline-block;width:6px;height:6px;margin-right:7px;transform:rotate(45deg) translateY(-1px);border:1px solid var(--gold)}
.skill[data-group="build"] .kind::before{background:color-mix(in srgb,var(--gold) 45%,transparent)}
.skill[data-group="design"] .kind::before{background:var(--gold)}
.skill h3{font-family:var(--f-latin);font-weight:600;font-size:1.4rem;letter-spacing:.04em;line-height:1.3;margin-top:4px}
.skill p{color:var(--muted);font-size:.84rem;line-height:1.85}
.skill-tags{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.skill-tags li{font-size:.68rem;letter-spacing:.06em;padding:.2em .75em;border:1px solid var(--line);background:color-mix(in srgb,var(--paper) 80%,transparent)}
@media (prefers-reduced-motion:reduce){.skill,.skill::before,.skill-mark{transition:none}}
.skills-note{margin-top:18px;color:var(--muted);font-size:.86rem}

/* info */
.info{width:100%;border-collapse:collapse;font-size:.94rem}
.info th,.info td{text-align:left;padding:16px 0;border-bottom:1px solid var(--line);vertical-align:top}
.info th{width:9rem;font-weight:400;color:var(--muted);letter-spacing:.12em}
.info-note{margin-top:14px;font-size:.78rem;color:var(--muted)}

/* bottom cta */
.page-cta{border-top:1px solid var(--line);background:var(--band)}
.page-cta .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:28px}
.page-cta h2{font-size:clamp(1.4rem,2.8vw,1.9rem);letter-spacing:.12em}
.page-cta p{color:var(--muted);margin-top:8px}
.page-cta .actions{display:flex;flex-wrap:wrap;gap:12px}

@media (max-width:900px){
  .msg{grid-template-columns:minmax(0,1fr)}
  .msg .about-photo{aspect-ratio:16/10}
  .story,.edge-grid{grid-template-columns:minmax(0,1fr)}
  .story li{border-left:0;border-bottom:1px solid var(--line);padding:28px 0}
  .values{grid-template-columns:minmax(0,1fr)}
  .value:nth-child(odd){padding-right:0;border-right:0}
  .value:nth-child(even){padding-left:0}
}
@media (max-width:560px){ .info th{width:6.5rem} }