/* ----------
  Minimal Portfolio Styles v2 (simpler palette, full-screen sections)
----------- */
:root{
  --bg: #ffffff;
  --text: #1f1f1f;
  --muted: #6f6f6f;
  --accent: #1f1f1f; /* used only for text/outline, not big fills */
  --line: #eaeaea;
  --radius: 18px;
  --max: 1200px;
}

* { box-sizing: border-box; }
html,body{ height:100%; margin:0; }
html{ scroll-behavior:smooth; }
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  line-height:1.65;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* scroll snap on the main vertical flow */
  scroll-snap-type: y proximity;
}

img{ max-width:100%; height:auto; display:block; }

.container{ width: min(100% - 2rem, var(--max)); margin-inline:auto; }
.container.narrow{ width: min(100% - 2rem, 860px); }

.section{ padding: 6rem 0; border-bottom: 1px solid var(--line); }
.section.full{ min-height: 100svh; display:flex; align-items:center; scroll-snap-align: start; }

.lead{ font-size: clamp(1.05rem, 2.4vw, 1.25rem); color: var(--muted); }

/* Header (ultra minimal) */
.site-header{
  position: sticky; top:0; z-index: 10;
  backdrop-filter: blur(6px);
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  border-bottom: 1px solid var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding: .8rem 0;
}
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:700; }
.brand .dot{
  width:.75rem; height:.75rem; border-radius:50%;
  background: var(--text);
  display:inline-block;
}
.brand-name{ color: var(--text); text-decoration:none; letter-spacing:.02em; }

.nav a{
  color: var(--muted); text-decoration:none; margin-left: 1rem; font-size:.95rem;
  position:relative;
}
.nav a:hover::after, .nav a:focus-visible::after{
  content:""; position:absolute; left:0; right:0; bottom:-.25rem; height:1px; background: currentColor;
  transform-origin: left; animation: underline .25s ease forwards;
}
@keyframes underline{ from{transform:scaleX(0);} to{transform:scaleX(1);} }

/* Hero */
.hero-grid{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 4vw, 4rem);
  align-items:center;
}
.hero-copy h1{ font-size: clamp(2.4rem, 7vw, 4.4rem); line-height:1.1; margin:.2rem 0 1rem; letter-spacing:.01em; }
.hero-copy p{ color: var(--muted); font-size: 1.05rem; }
.hero-cta{ display:flex; gap:1rem; margin-top:1.5rem; flex-wrap:wrap; }
.hero-art{ border-radius: var(--radius); overflow:hidden; border:1px solid var(--line); background:#fff; }

/* Buttons */
.button{
  display:inline-block; padding:.8rem 1.1rem; border-radius: 999px;
  color: var(--bg); background: var(--text); text-decoration:none; border:1px solid var(--text);
  transition: transform .2s ease, box-shadow .2s ease;
}
.button:hover{ transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.link{ color: var(--text); text-decoration: none; position:relative; }
.link::after{
  content:""; position:absolute; left:0; right:0; bottom:-.2rem; height:1px; background: currentColor; opacity:.3;
  transition: opacity .2s ease;
}
.link:hover::after{ opacity:1; }

/* Works */
.grid{
  display:grid; grid-template-columns: repeat(12, 1fr); gap: 1.2rem;
}
.card{
  grid-column: span 12;
  border:1px solid var(--line); border-radius: var(--radius); overflow: clip; background: #fff;
}
@media (min-width: 720px){
  .card{ grid-column: span 4; }
}
.card-media img{ display:block; aspect-ratio: 1 / 1; object-fit: cover; }
.card-body{ padding: 1rem 1rem 1.2rem; }
.card h3{ margin:.2rem 0 .2rem; font-size:1.05rem; }
.card p{ margin:.2rem 0 0; color: var(--muted); font-size:.95rem; }

/* Footer */
.site-footer{
  border-top: 1px solid var(--line);
  padding: 2rem 0;
}
.site-footer .container{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.to-top{ text-decoration:none; color: var(--muted); border:1px solid var(--line); padding:.4rem .6rem; border-radius: 10px; }
.to-top:hover{ color: var(--text); }

/* Reveal on scroll (subtle) */
.reveal{ opacity: 0; transform: translateY(10px); will-change: transform, opacity; }
.reveal.is-visible{ opacity: 1; transform: translateY(0); transition: opacity .6s ease, transform .6s ease; }
.delay-1{ transition-delay: .08s; }
.delay-2{ transition-delay: .16s; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .reveal{ opacity: 1 !important; transform: none !important; }
  .nav a:hover::after{ animation: none; }
  .button{ transition: none; }
}

/* Skip link */
.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left: .75rem; top: .75rem; width:auto; height:auto; padding:.5rem .75rem; background: var(--text); color: var(--bg); border-radius: 8px;
}

/* Small screens */
@media (max-width: 720px){
  .nav{ display:none; }
  .hero-grid{ grid-template-columns: 1fr; }
}