@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Shippori+Mincho:wght@500;600;700&display=swap");

:root {
  --desk: #c3c7cb;
  --win: #ffffff;
  --win-face: #ece9d8;
  --title: #000080;
  --title-2: #1084d0;
  --ink: #1a1a2e;
  --muted: #5a5470;
  --pastel-pink: #ffc6d9;
  --pastel-lilac: #d7c6ff;
  --pastel-mint: #b8f0d8;
  --pastel-sky: #b8e0ff;
  --pastel-lemon: #fff1a8;
  --pastel-peach: #ffd7b5;
  --bevel-light: #ffffff;
  --bevel-dark: #808080;
  --bevel-darker: #404040;
  --accent: #ff7eb9;
  --font-display: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-sans: "IBM Plex Sans", "MS UI Gothic", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --wrap: 880px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; font-family: var(--font-sans); color: var(--ink);
  background: linear-gradient(180deg, rgba(255,198,217,.35), transparent 28%), linear-gradient(120deg, var(--pastel-sky), var(--pastel-lilac) 40%, var(--pastel-mint) 78%, var(--pastel-peach));
  background-attachment: fixed; line-height: 1.4;
}
.wrap { width: min(var(--wrap), calc(100% - 1.25rem)); margin-inline: auto; position: relative; z-index: 1; }
.skip-link { position:absolute; left:-999px; }
.skip-link:focus { left:1rem; top:1rem; z-index:99; background:#fff; padding:.5rem; }
.win {
  background: var(--win-face);
  border: 2px solid; border-color: var(--bevel-light) var(--bevel-darker) var(--bevel-darker) var(--bevel-light);
  box-shadow: 2px 2px 0 rgba(0,0,0,.25);
}
.win-title {
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  margin: 2px; padding: 2px 5px;
  background: linear-gradient(90deg, var(--title), var(--title-2));
  color: #fff; font-size: .78rem; font-weight: 600;
}
.win-title .dots { display:flex; gap:3px; }
.win-title .dot { width:10px; height:10px; border:1px solid #fff; background: #c0c0c0; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080; }
.win-body { padding: 0.55rem 0.7rem 0.65rem; background: var(--win); }
.site-header { padding: 0.5rem 0 0.2rem; }
.nav.win { padding: 0; overflow: hidden; }
.nav-inner { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding: 0.35rem 0.55rem 0.45rem; background: linear-gradient(180deg, #fff, var(--pastel-lemon)); }
.wordmark { font-family: var(--font-display); font-size: 1.2rem; color: var(--title); text-decoration:none; }
.wordmark .mark { color: var(--accent); }
.nav-toggle { display:none; font:inherit; border:2px solid; border-color: var(--bevel-light) var(--bevel-darker) var(--bevel-darker) var(--bevel-light); background: var(--win-face); padding:.2rem .45rem; font-size:.85rem; }
.nav-links { display:flex; gap:.1rem; list-style:none; margin:0; padding:0; }
.nav-links a { text-decoration:none; color: var(--ink); padding:.25rem .5rem; border:2px solid transparent; font-size:.82rem; }
.nav-links a:hover, .nav-links a[aria-current=page] { background: var(--pastel-pink); border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark); }
.page-hero { padding: 0.7rem 0 0.5rem; }
.page-hero .wrap.win { padding: 0; overflow: hidden; }
.page-hero .win-body { background: linear-gradient(180deg, #fff, var(--pastel-pink) 140%); }
.eyebrow { margin: 0 0 .35rem; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #7a3d6b; }
.display { font-family: var(--font-display); font-size: clamp(1.45rem, 3.5vw, 2.1rem); line-height: 1.2; margin: 0 0 .45rem; color: var(--title); }
.page-title { font-family: var(--font-display); font-size: 1.6rem; line-height: 1.2; margin: 0 0 .4rem; color: var(--title); }
.lede { max-width: 36rem; margin: 0 0 0.55rem; color: var(--muted); font-size: 0.92rem; }
.btn-row { display:flex; flex-wrap:wrap; gap: .4rem; }
.btn { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; font:inherit; font-weight:600; font-size:.88rem; padding: .35rem .75rem; border: 2px solid; border-color: var(--bevel-light) var(--bevel-darker) var(--bevel-darker) var(--bevel-light); background: var(--win-face); color: var(--ink); box-shadow: inset 1px 1px 0 #fff; }
.btn:active { border-color: var(--bevel-darker) var(--bevel-light) var(--bevel-light) var(--bevel-darker); }
.btn-primary { background: linear-gradient(180deg, var(--pastel-lemon), var(--pastel-peach)); }
.btn-ghost { background: linear-gradient(180deg, #fff, var(--pastel-sky)); }
.section { padding: 0.5rem 0 0.8rem; }
.section-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom: .45rem; }
.section-head h2 { font-family: var(--font-display); margin:0; font-size: 1.25rem; color: var(--title); }
.section-head a { color: #7a3d6b; font-size: .88rem; }
.work-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: .65rem; }
.work-card.win { overflow:hidden; }
.work-card-visual { min-height: 88px; display:grid; place-items:center; background: linear-gradient(145deg, var(--pastel-lilac), var(--pastel-pink) 55%, var(--pastel-peach)); position: relative; }
.work-card-visual::after { content:""; position:absolute; inset:5px; border:1px dashed rgba(0,0,128,.35); }
.jp-label { font-family: var(--font-display); font-size: 1.1rem; color: var(--title); }
.work-card-body { padding: 0.5rem 0.65rem; background: #fffef8; }
.chip { display:inline-block; font-size:.65rem; letter-spacing:.06em; text-transform:uppercase; padding: .1rem .35rem; background: var(--pastel-mint); border:1px solid #7aa; margin-bottom: .25rem; }
.work-card h3 { font-family: var(--font-display); margin: .1rem 0 .25rem; font-size: 1.05rem; }
.work-card p { margin:0; color: var(--muted); font-size: .85rem; }
.statement { padding: .35rem 0 .7rem; }
.statement .wrap.win { padding:0; overflow:hidden; }
.statement .win-body { background: linear-gradient(180deg, #fffef8, var(--pastel-lemon)); }
.statement blockquote { margin:0; font-family: var(--font-display); font-size: 1.05rem; font-style: italic; line-height: 1.35; }
.statement cite { display:block; margin-top: .4rem; font-style:normal; font-family: var(--font-sans); font-size: .78rem; color: var(--muted); }
.cta-band { padding: 0 0 1rem; }
.cta-band .wrap.win { padding:0; overflow:hidden; }
.cta-band .win-body { background: linear-gradient(135deg, var(--pastel-sky), var(--pastel-lilac) 55%, var(--pastel-mint)); }
.cta-band h2 { font-family: var(--font-display); margin: 0 0 .3rem; color: var(--title); font-size: 1.25rem; }
.cta-band p { margin: 0 0 .55rem; max-width: 34rem; color: var(--muted); font-size: .92rem; }
.site-footer { padding: .5rem 0 1rem; }
.site-footer .wrap.win { padding:0; overflow:hidden; }
.footer-grid { display:flex; justify-content:space-between; gap:.75rem; flex-wrap:wrap; margin-bottom: .35rem; }
.footer-brand { font-family: var(--font-display); color: var(--title); text-decoration:none; font-size: 1.05rem; }
.footer-links { display:flex; flex-wrap:wrap; gap: .4rem .7rem; list-style:none; margin:0; padding:0; }
.footer-links a { color: #333; text-decoration:none; font-size: .85rem; }
.footer-legal { margin:0; font-size: .72rem; color: var(--muted); }

/* Prose / about */
.prose-measure { max-width: 36rem; }
.prose { background: #fffef8; }
.prose h2 { font-family: var(--font-display); font-size: 1.1rem; margin: .65rem 0 .3rem; color: var(--title); }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 .45rem; font-size: .9rem; }
.muted { color: var(--muted); }
.footnote { margin-top: .65rem !important; font-size: .78rem; color: var(--muted); }

/* Updates */
.update-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.update-item { background: #fffef8; }
.update-item .win-body { background: #fffef8; }
.update-meta { margin: 0 0 .2rem; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.update-item h2 { font-family: var(--font-display); font-size: 1.1rem; margin: 0 0 .3rem; color: var(--title); }
.update-item p { margin: 0; font-size: .88rem; color: var(--ink); }
.empty-state { margin-top: .45rem; padding: .4rem .55rem; background: #fffef8; border: 1px dashed rgba(0,0,128,.25); font-size: .82rem; color: var(--muted); }
.empty-state h2 { font-size: .95rem; margin: 0 0 .15rem; color: var(--title); }
.empty-state p { margin: 0; }

/* Contact */
.contact-panel { background: #fffef8; }
.contact-panel .win-body { background: linear-gradient(180deg, #fff, var(--pastel-sky) 160%); }
.email { display:inline-block; font-family: var(--font-display); font-size: 1.25rem; color: var(--title); text-decoration:none; margin-bottom: .35rem; }
.email:hover { text-decoration: underline; }
.hint { margin: 0; font-size: .85rem; color: var(--muted); }

h1,h2,h3 { font-family: var(--font-display); font-weight: 600; }
@media (max-width: 720px) {
  .nav-toggle { display:inline-block; }
  .nav-links { display:none; width:100%; flex-direction:column; }
  .nav-links.is-open { display:flex; }
  .nav-inner { flex-wrap:wrap; }
}

/* Language switch (Win95 segmented) */
.nav-end {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.lang-switch {
  display: inline-flex;
  flex-shrink: 0;
  border: 2px solid;
  border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);
  background: var(--win-face);
  padding: 1px;
}
.lang-switch .lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.22rem 0.42rem;
  border: 2px solid transparent;
  background: transparent;
  white-space: nowrap;
}
.lang-switch .lang-btn:hover {
  background: var(--pastel-sky);
}
.lang-switch .lang-btn.is-active,
.lang-switch .lang-btn[aria-current="true"] {
  background: var(--pastel-pink);
  border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);
  box-shadow: inset 1px 1px 0 rgba(0,0,0,.12);
}
html[lang="ja"] body {
  letter-spacing: 0.02em;
  line-height: 1.55;
}
html[lang="ja"] .eyebrow {
  text-transform: none;
  letter-spacing: 0.1em;
}
html[lang="ja"] .display,
html[lang="ja"] .page-title,
html[lang="ja"] .statement blockquote {
  letter-spacing: 0.04em;
  line-height: 1.35;
}
html[lang="ja"] .chip {
  text-transform: none;
  letter-spacing: 0.04em;
}
html[lang="ja"] .update-meta {
  text-transform: none;
  letter-spacing: 0.04em;
}
@media (max-width: 720px) {
  .nav-end {
    flex: 1;
    min-width: 0;
    justify-content: flex-end;
  }
  .nav-end .nav-links { order: 3; width: 100%; }
  .nav-end .lang-switch { order: 2; }
}