/* ============================================================
   SHARED STYLES — Ryo Kawashima Portfolio
   redesign: simple / structured / creator
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300&family=Noto+Sans+JP:wght@200;300&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:      #f7f6f4;
  --bg-2:    #eeecea;
  --bg-3:    #e4e1dd;
  --fg:      #161412;
  --fg-2:    #484440;
  --fg-3:    #888480;
  --line:    #b8b4ae;
  --line-2:  #d4d0cb;

  --serif: 'Noto Serif JP', 'Yu Mincho', '游明朝', serif;
  --sans:  'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  --mono:  'Courier New', monospace;

  --nav-h: 56px;
  --side:  48px;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--serif);
  font-weight: 200;
  font-size: 15px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--side);
  height: var(--nav-h);
}
.logo {
  font-size: 12px; letter-spacing: 0.14em;
  color: var(--fg); font-family: var(--sans); font-weight: 300;
  text-decoration: none;
}
.nav-links { display: flex; gap: 32px; list-style: none; }
.nav-links a {
  font-size: 11px; letter-spacing: 0.14em;
  color: var(--fg-2); text-decoration: none;
  font-family: var(--sans); font-weight: 200;
  transition: color 0.18s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--fg); }

/* dropdown */
.nav-item { position: relative; }
.dropdown {
  position: absolute; top: calc(100% + 1px); left: -1px;
  background: var(--bg); border: 1px solid var(--line);
  border-top: none; padding: 8px 0; min-width: 200px;
  opacity: 0; pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.18s, transform 0.18s;
}
.nav-item:hover .dropdown { opacity: 1; pointer-events: all; transform: none; }
.dropdown a {
  display: block; padding: 7px 20px;
  font-size: 10px; letter-spacing: 0.12em;
  color: var(--fg-2);
  transition: color 0.15s, background 0.15s;
}
.dropdown a:hover { color: var(--fg); background: var(--bg-2); }
.dropdown a.active { color: var(--fg); }
.dropdown-sep { height: 1px; background: var(--line-2); margin: 6px 0; }

/* ── PAGE TOP ── */
.page-top { padding-top: var(--nav-h); }

/* ── SECTION ── */
.section { padding: 80px var(--side); }
.section + .section { border-top: 1px solid var(--line); }

.section-label {
  font-size: 10px; letter-spacing: 0.22em;
  color: var(--fg-3); font-family: var(--sans); font-weight: 200;
  margin-bottom: 40px;
  display: flex; align-items: center; gap: 16px;
}
.section-label::before {
  content: attr(data-num);
  font-family: var(--mono); font-size: 9px; color: var(--fg-3);
}
.section-label::after {
  content: ''; flex: 1; height: 1px; background: var(--line-2);
}

/* ── FOOTER ── */
footer {
  border-top: 1px solid var(--line);
  background: var(--bg);
  padding: 24px var(--side);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
}
.footer-logo {
  font-size: 11px; letter-spacing: 0.14em;
  color: var(--fg-3); font-family: var(--sans); font-weight: 200;
}
.footer-sns { display: flex; gap: 20px; }
.footer-sns a {
  font-size: 10px; letter-spacing: 0.14em;
  color: var(--fg-3); text-decoration: none;
  font-family: var(--sans); font-weight: 200;
  transition: color 0.18s;
}
.footer-sns a:hover { color: var(--fg); }
.footer-copy {
  font-size: 10px; letter-spacing: 0.1em;
  color: var(--fg-3); font-family: var(--sans); font-weight: 200;
}

/* ── UTILITY ── */
.link-text {
  font-size: 10px; letter-spacing: 0.18em;
  color: var(--fg-2); font-family: var(--sans); font-weight: 200;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color 0.18s;
}
.link-text::after { content: '→'; }
.link-text:hover { color: var(--fg); }

/* work card (shared) */
.work-card {
  background: var(--bg-2);
  position: relative; overflow: hidden;
  aspect-ratio: 16/10; cursor: pointer;
}
.work-fill {
  width: 100%; height: 100%;
  transition: transform 0.5s ease;
}
.work-card:hover .work-fill { transform: scale(1.03); }
.work-meta {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 14px 16px;
  background: linear-gradient(to top, rgba(26,24,21,0.55), transparent);
  display: flex; align-items: flex-end; justify-content: space-between;
}
.work-title {
  font-size: 12px; font-weight: 300; letter-spacing: 0.06em;
  color: #f0ede8;
}
.work-tag {
  font-size: 9px; letter-spacing: 0.16em;
  color: rgba(240,237,232,0.6); font-family: var(--sans); font-weight: 200;
}