/*
Theme Name: Kei Portfolio
Theme URI: https://dadsecretbase.com/
Author: Kei / THE DAD SECRET BASE
Description: Keiの活動を紹介するミニマルなポートフォリオテーマ。
Version: 1.0.1
*/
:root { --canvas:#F2F2ED; --surface:#F7F7F3; --raised:#FAFAF7; --ink:#171716; --muted:#777771; --faint:#9D9D95; --line:#DEDED8; --accent:#EE5D4A; --accent-soft:#F3E7E4; --shadow-soft:0 3px 8px rgba(20,20,18,.08); --shadow-floating:0 11px 30px rgba(20,20,18,.12); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--canvas); font-family:"Noto Sans JP",sans-serif; font-size:14px; line-height:1.6; }
a { color:inherit; text-decoration:none; }
.site-header { display:flex; justify-content:space-between; align-items:flex-start; padding:24px 5vw; border-bottom:1px solid var(--line); }
.brand { font:500 12px/1.05 "SFMono-Regular",Menlo,monospace; letter-spacing:.13em; }
nav { display:flex; gap:30px; font:13px "SFMono-Regular",Menlo,monospace; letter-spacing:.13em; text-transform:uppercase; }
.hero { min-height:calc(88vh - 70px); padding:10vh 5vw 8vh; display:flex; align-items:center; justify-content:space-between; gap:7vw; position:relative; }
.hero-content { flex:1; max-width:760px; }
.eyebrow,.section-label { color:var(--muted); font:12px "SFMono-Regular",Menlo,monospace; letter-spacing:.13em; }
h1 { max-width:760px; margin:24px 0; font-size:clamp(42px,5.2vw,64px); line-height:1.15; letter-spacing:.02em; font-weight:500; }
h1 em { font-style:normal; color:var(--accent); }
.hero-title { overflow:hidden; transform:translateY(var(--scroll-y,0)); opacity:var(--scroll-opacity,1); transition:opacity .08s linear; }
.hero-title span { display:block; overflow:hidden; transform:translateY(110%); animation:copy-rise 1s cubic-bezier(.16,1,.3,1) forwards; }
.hero-title span:nth-child(1) { animation-delay:.12s; }.hero-title span:nth-child(2) { animation-delay:.24s; }.hero-title span:nth-child(3) { animation-delay:.36s; }
@keyframes copy-rise { to { transform:translateY(0); } }
.hero-copy { max-width:420px; margin:0; color:var(--muted); font-size:16px; line-height:1.95; }
.circle-link { width:50px; height:50px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; margin-top:48px; font-size:18px; color:var(--accent); background:var(--surface); transition:transform .22s,background .22s; }
.circle-link:hover { background:var(--accent-soft); transform:translateY(5px); }
.hero-portrait { flex:0 0 min(31vw,380px); aspect-ratio:4/5; overflow:hidden; position:relative; padding:12px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-soft); }
.hero-portrait::after { content:""; position:absolute; inset:7px; border:1px solid rgba(222,222,216,.75); pointer-events:none; }
.hero-portrait img { width:100%; height:100%; display:block; object-fit:cover; object-position:52% 42%; filter:grayscale(1) contrast(.96); transition:transform .8s cubic-bezier(.16,1,.24,1); }
.hero-portrait:hover img { transform:scale(1.035); }
.portrait-meta,.portrait-caption { position:absolute; z-index:1; color:var(--muted); font:10px "SFMono-Regular",Menlo,monospace; letter-spacing:.13em; }
.portrait-meta { top:24px; left:25px; display:flex; align-items:center; gap:7px; }.portrait-caption { right:24px; bottom:23px; writing-mode:vertical-rl; transform:rotate(180deg); }.status-dot { width:6px; height:6px; display:inline-block; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
section { padding:96px 5vw; border-top:1px solid var(--line); }.intro { display:grid; grid-template-columns:1fr 2fr; gap:8vw; }.intro div { max-width:620px; font-size:17px; line-height:2; color:var(--muted); }.profile-name { color:var(--ink); font-size:20px; letter-spacing:.06em; }.profile-role { color:var(--accent); font-size:14px; letter-spacing:.08em; }
h2 { margin:0 0 30px; font-size:clamp(32px,3.8vw,48px); line-height:1.25; letter-spacing:.06em; font-weight:500; }.slide-right { opacity:0; transform:translateX(70px); transition:opacity .9s cubic-bezier(.16,1,.24,1),transform .9s cubic-bezier(.16,1,.24,1); }.intro.is-visible .slide-right { opacity:1; transform:translateX(0); }
.work-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:42px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.work-card { min-height:310px; padding:25px 22px 25px 0; display:flex; flex-direction:column; justify-content:space-between; border:0; border-right:1px solid var(--line); }.work-card + .work-card { padding-left:22px; }.work-card:last-child { border-right:0; }.work-card--dark,.work-card--paper,.work-card--line { background:transparent; color:var(--ink); }.work-number { font:12px "SFMono-Regular",Menlo,monospace; color:var(--faint); }.work-card h3 { margin:0 0 10px; font:500 24px "Noto Sans JP",sans-serif; letter-spacing:.08em; }.work-card p { max-width:270px; margin:0; font-size:15px; line-height:1.85; }.work-card a { color:var(--accent); font:12px "SFMono-Regular",Menlo,monospace; border-bottom:1px solid var(--accent); width:max-content; padding-bottom:5px; }.work-card:hover { transform:translateY(-4px); }
.timeline-list,.journal-list { max-width:900px; margin-top:35px; border-top:1px solid var(--line); }.timeline-list div { display:grid; grid-template-columns:110px 1fr; gap:25px; padding:18px 0; border-bottom:1px solid var(--line); }.timeline-list span,.journal-list small { color:var(--muted); font:12px "SFMono-Regular",Menlo,monospace; }.timeline-list p { margin:0; font-size:15px; line-height:1.8; }.journal-list a { display:flex; justify-content:space-between; gap:24px; padding:18px 0; border-bottom:1px solid var(--line); font-size:16px; transition:padding .22s,color .22s; }.journal-list a:hover { padding-left:10px; color:var(--accent); }.journal-list small { display:inline-block; width:105px; color:var(--faint); font-size:11px; }.journal-list b { color:var(--accent); font-weight:400; }
.link-list { margin-top:35px; border-top:1px solid var(--line); }.link-list a { display:flex; justify-content:space-between; padding:20px 0; border-bottom:1px solid var(--line); font-size:clamp(22px,2.6vw,38px); letter-spacing:-.035em; transition:.2s; }.link-list a:hover { padding-left:14px; color:var(--accent); }
footer { display:flex; justify-content:space-between; padding:25px 5vw; color:var(--muted); font:11px "SFMono-Regular",Menlo,monospace; border-top:1px solid var(--line); }.reveal { opacity:0; transform:translateY(28px); transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1); }.reveal.is-visible { opacity:1; transform:translateY(0); }
@media (max-width:700px) { nav { gap:12px; }.hero { min-height:auto; padding:58px 6vw 72px; display:block; } h1 { font-size:clamp(36px,10vw,48px); line-height:1.2; margin:20px 0 24px; }.hero-copy { max-width:100%; font-size:15px; line-height:1.9; }.circle-link { margin-top:30px; }.hero-portrait { width:100%; aspect-ratio:5 / 4; margin:52px 0 0; padding:9px; }.portrait-meta { top:19px; left:20px; }.portrait-caption { right:19px; bottom:18px; }.intro { display:block; }.intro .section-label { margin-bottom:48px; }.intro div { font-size:16px; }.work-grid { grid-template-columns:1fr; }.work-card,.work-card + .work-card { min-height:240px; padding:22px 0; border-right:0; border-bottom:1px solid var(--line); }.work-card:last-child { border-bottom:0; } footer { display:block; line-height:2; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; transform:none!important; } }