/* ==========================
   Theme tokens
========================== */
:root{
  /* Night */
  --bg: #141218;
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --line: rgba(255,255,255,.08);

  --surface: rgba(255,255,255,.08);
  --surface2: rgba(255,255,255,.12);

  --accent:  #ffb3c7;
  --accent2: #b8c7ff;

  --r1: 16px;
  --r2: 24px;
  --pad: 20px;
  --max: 1120px;

  --clay-out: 0 10px 28px rgba(0,0,0,.32);
  --clay-in: inset 0 1px 0 rgba(255,255,255,.14),
             inset 0 -1px 0 rgba(0,0,0,.18);

  --font: "Manrope", "Zen Kaku Gothic New",
          system-ui, -apple-system, "Segoe UI", sans-serif;
}

:root[data-theme="day"]{
  --bg: #fbf3e7;
  --text: rgba(36,28,24,.92);
  --muted: rgba(36,28,24,.62);
  --line: rgba(36,28,24,.09);

  --surface: rgba(255,255,255,.70);
  --surface2: rgba(255,255,255,.85);

  --accent:  #ff7aa2;
  --accent2: #7aa7ff;

  /* Day用：影は薄く・低く */
  --clay-out: 0 6px 18px rgba(66,42,24,.12);
  --clay-in: inset 0 1px 0 rgba(255,255,255,.80),
             inset 0 -1px 0 rgba(66,42,24,.08);
}

/* ==========================
   Base
========================== */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(900px 700px at 18% 8%, color-mix(in oklab, var(--accent2) 22%, transparent), transparent 60%),
    radial-gradient(900px 700px at 92% 12%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 60%),
    radial-gradient(800px 600px at 50% 115%, rgba(255,255,255,.06), transparent 60%),
    var(--bg);
  min-height:100svh;
}

a{ color:inherit; }
img{ max-width:100%; height:auto; }
strong{ font-weight:800; }

.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--pad);
}

.skip{ display:none; }

/* ==========================
   Shared clay surfaces (Panels / Cards etc.)
========================== */
.clay,
.controls,
.card,
.panel,
.form,
.toc,
.detail{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  box-shadow: var(--clay-out), var(--clay-in);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}

.card:hover,
.tocItem a:hover{
  background: var(--surface2);
  transform: translateY(-1px);
  box-shadow:
    0 12px 30px rgba(0,0,0,.30),
    var(--clay-in);
}
:root[data-theme="day"] .card:hover,
:root[data-theme="day"] .tocItem a:hover{
  box-shadow:
    0 10px 24px rgba(66,42,24,.14),
    var(--clay-in);
}

/* ==========================
   Buttons (統一：btn--ghost と同じ質感)
========================== */
.btn,
.filterBtn,
.openBtn,
.nav a,
.mode{
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--clay-out), var(--clay-in);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.btn:hover,
.filterBtn:hover,
.openBtn:hover,
.nav a:hover,
.mode:hover{
  background: var(--surface2);
  transform: translateY(-1px);
  box-shadow:
    0 12px 30px rgba(0,0,0,.28),
    var(--clay-in);
}
:root[data-theme="day"] .btn:hover,
:root[data-theme="day"] .filterBtn:hover,
:root[data-theme="day"] .openBtn:hover,
:root[data-theme="day"] .nav a:hover,
:root[data-theme="day"] .mode:hover{
  box-shadow:
    0 10px 24px rgba(66,42,24,.14),
    var(--clay-in);
}

.btn:active,
.filterBtn:active,
.openBtn:active,
.nav a:active,
.mode:active{
  transform: translateY(0);
  background: var(--surface2);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 14px;
  border-radius:999px;
  text-decoration:none;
  font-weight:900;
}

.btn--primary{
  background: color-mix(in oklab, var(--accent) 18%, var(--surface));
  color: var(--text);
  border-color: color-mix(in oklab, var(--accent) 35%, var(--line));
}

.btn--ghost{
  background: var(--surface);
}

/* ==========================
   Topbar
========================== */
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: color-mix(in oklab, var(--bg) 55%, transparent);
  border-bottom: 1px solid var(--line);
}

.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 20px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.brand__mark{
  width:34px; height:34px;
  border-radius:14px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
:root[data-theme="day"] .brand__mark{
  box-shadow: 0 8px 18px rgba(66,42,24,.10);
}

.brand__title{ font-weight:900; letter-spacing:.02em; }
.brand__sub{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

.nav{
  display:flex;
  gap:10px;
  align-items:center;
}
.nav a{
  text-decoration:none;
  color:var(--muted);
  font-weight:800;
  padding:8px 16px;
  border-radius:999px;
}
.nav a:hover{ color:var(--text); }

.mode{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  cursor:pointer;
}
.mode__dot{
  width:10px; height:10px;
  border-radius:99px;
  background: color-mix(in oklab, var(--accent2) 55%, var(--accent));
}
.mode__text{
  font-weight:900;
  font-size:13px;
  color:var(--muted);
}

/* ==========================
   Hero
========================== */
.hero{
  border-bottom: 1px solid var(--line);
}
.hero__bg{ display:none; }

.hero__inner{
  padding: 44px 20px 46px 20px;
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap:18px;
}

.kicker{
  display:inline-flex;
  padding:10px 14px;
  border-radius:999px;
  color:var(--muted);
  font-weight:900;
  letter-spacing:.02em;
  margin:0 0 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--clay-out), var(--clay-in);
}

.headline{
  margin:0;
  font-size: clamp(34px, 6vw, 62px);
  line-height:1.02;
  letter-spacing:-.03em;
}

.lead{
  margin:14px 0 0;
  color:var(--muted);
  line-height:1.75;
  max-width:62ch;
}

.cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}

.heroMeta{
  margin-top:18px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.heroMeta__item{
  border-radius: var(--r1);
  padding:12px 14px;
  border:1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 75%, transparent);
  box-shadow: var(--clay-in);
}
.heroMeta__label{
  font-size:12px;
  color: color-mix(in oklab, var(--muted) 75%, transparent);
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.heroMeta__value{
  margin-top:6px;
  color:var(--muted);
  font-size:13px;
}

/* ==========================
   TOC
========================== */
.toc{ padding:16px; }

.toc__head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  margin-bottom:10px;
}
.toc__title{ font-weight:950; }
.toc__hint{ font-size:12px; color:var(--muted); }

.toc__list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.tocItem a{
  display:flex;
  justify-content:space-between;
  gap:12px;
  text-decoration:none;
  padding:12px 12px;
  border-radius: var(--r1);
  border:1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 75%, transparent);
  box-shadow: var(--clay-in);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}

.tocItem__left{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.tocItem__title{ font-weight:950; }
.tocItem__meta{ font-size:12px; color:var(--muted); }
.tocItem__year{ font-size:12px; color:var(--muted); font-weight:950; }

/* ==========================
   Sections
========================== */
.section{ padding:56px 0; }
.section--alt{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 35%, transparent);
}

.sectionHead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  margin-bottom:18px;
}

.sectionTitle{
  margin:0;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing:-.02em;
}
.sectionDesc{
  margin:0;
  color:var(--muted);
  max-width:70ch;
  line-height:1.7;
}

/* ==========================
   Controls
========================== */
.controls{
  padding:14px;
  margin-bottom: 20px;
}

.controls__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.controls__sub{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.filterBtn{
  padding:10px 12px;
  border-radius:999px;
  cursor:pointer;
  font-weight:950;
  font-size:12px;
  color:var(--muted);
}

.filterBtn[aria-pressed="true"]{
  background: color-mix(in oklab, var(--accent2) 16%, var(--surface));
  color: var(--text);
  border-color: color-mix(in oklab, var(--accent2) 35%, var(--line));
}

.rightControls{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.search{
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 70%, transparent);
  border-radius:999px;
  padding:10px 12px;
  min-width:min(520px, 100%);
  flex:1;
}

.search__icon{ color: var(--muted); }

.search input{
  width:100%;
  border:0;
  outline:none;
  background:transparent;
  color:var(--text);
  font-size:14px;
}

.iconbtn{
  border:0;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  font-size:18px;
  padding:0 6px;
}
.iconbtn:hover{ color:var(--text); }

.sort{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--muted);
  font-size:13px;
}
.sort select{
  border:1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 70%, transparent);
  color:var(--text);
  border-radius:12px;
  padding:10px 10px;
  outline:none;
}

.stats{
  color:var(--muted);
  font-weight:900;
}
.stats__sep{
  opacity:.5;
  margin:0 6px;
}

/* ==========================
   Cards
========================== */
.cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:20px;
}

.card{
  overflow:hidden;
}

.card__link{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:16px;
  min-height:220px;
  text-decoration:none;
  color:inherit;
}

.card__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.card__title{
  margin:0;
  font-size:18px;
  line-height:1.2;
  letter-spacing:-.01em;
  font-weight:950;
}
.card__sub{
  margin:10px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.7;
}

.badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 70%, transparent);
  font-weight:950;
  font-size:12px;
  white-space:nowrap;
}
.chip--ghost{ opacity:.9; }

.tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.tag{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 60%, transparent);
  color: var(--muted);
  font-size:12px;
  font-weight:900;
}

.card__foot{
  margin-top:auto;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
}

.card__role{
  color: var(--muted);
  font-size:12px;
  line-height:1.55;
  max-width:65%;
}

.openBtn{
  padding:10px 14px;
  border-radius:999px;
  font-weight:950;
  font-size:12px;
  white-space:nowrap;
}

/* ==========================
   About / Contact / Project
========================== */
.aboutGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}

.panel{ padding:16px; }
.panel__title{
  margin:0;
  font-size:16px;
  font-weight:950;
}
.panel__text{
  margin:12px 0 0;
  color:var(--muted);
  line-height:1.7;
}
.list{
  margin:12px 0 0;
  padding-left:18px;
  color:var(--muted);
  line-height:1.75;
}

.contact{
  display:grid;
  grid-template-columns: 1fr 0.55fr;
  gap:14px;
  align-items:start;
}

.form{ padding:16px; }

.form__row{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:12px;
}

.form label{
  font-weight:950;
  color:var(--muted);
  font-size:13px;
}

.form input,
.form textarea{
  border:1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 70%, transparent);
  color:var(--text);
  border-radius:14px;
  padding:12px;
  outline:none;
  font-size:14px;
}

.form input:focus,
.form textarea:focus{
  border-color: color-mix(in oklab, var(--accent2) 55%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent2) 18%, transparent);
}

.form__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.form__note{
  margin:12px 0 0;
  color:var(--muted);
  font-size:13px;
  min-height:1.2em;
}

/* project page */
.projectHead{ margin-bottom:18px; }

.projectTitle{
  margin:0;
  font-size: clamp(26px, 4vw, 44px);
  letter-spacing:-0.02em;
}

.projectMeta{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.projectLead{
  margin:12px 0 0;
  color:var(--muted);
  line-height:1.75;
}

.projectGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}

.detail{ padding:16px; }

.detail h2{
  margin:0;
  font-size:16px;
  font-weight:950;
}
.detail p{
  margin:12px 0 0;
  color:var(--muted);
  line-height:1.75;
}
.detail ul{
  margin:12px 0 0;
  padding-left:18px;
  color:var(--muted);
  line-height:1.75;
}

.detailLinks{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.pager{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:18px;
}

/* ==========================
   Footer
========================== */
.footer{
  border-top:1px solid var(--line);
  padding:26px 0;
}
.footer__inner{
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.small{
  font-size:12px;
  color:var(--muted);
}

/* ==========================
   Responsive
========================== */
@media (max-width: 1023px){
  .hero__inner{ 
    grid-template-columns: 1fr; 
  }
  .heroMeta{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: repeat(2, 1fr); }
  .aboutGrid{ grid-template-columns: 1fr; }
  .contact{ grid-template-columns: 1fr; }
  .projectGrid{ grid-template-columns: 1fr; }
}

@media (max-width: 599px){
  .nav{ display:none; }
  .cards{ grid-template-columns: 1fr; }
  .search{ min-width:100%; }
  .hero__inner{ padding: 30px 20px 34px 20px; }
}