/* Hallmark · genre: playful · macrostructure family: Immersive Hero (front)
 * Portfolio Grid (works) · Photographic (single) · Letter (about) · Long Document (contact)
 * theme: custom · vibe: "soft warm illustration portfolio · salmon pink"
 * paper oklch(96% 0.018 18) · accent oklch(67% 0.110 18) salmon
 * display: DM Serif Display · body: Noto Sans JP · outlier: Cormorant Garamond
 * nav: N1 · footer: Ft5 · designed-as-app
 * Pre-emit critique: P5 H4 E5 S4 R5 V5 */

/* ── Tokens ──────────────────────────────────────────────────── */
:root {
  /* Colors */
  --color-paper:        oklch(96% 0.018 18);
  --color-paper-2:      oklch(91% 0.040 18);
  --color-surface:      oklch(98% 0.010 18);
  --color-ink:          oklch(28% 0.035 18);
  --color-ink-2:        oklch(52% 0.040 18);
  --color-rule:         oklch(85% 0.035 18);
  --color-accent:       oklch(67% 0.110 18);
  --color-accent-dark:  oklch(58% 0.130 18);
  --color-accent-sub:   oklch(80% 0.075 22);
  --color-accent-ink:   oklch(99% 0.005 20);
  --color-focus:        oklch(55% 0.130 255);
  --color-focus-ring:   oklch(67% 0.110 18 / 14%);
  --color-overlay:      oklch(28% 0.035 18 / 68%);
  --color-footer-bg:    oklch(28% 0.035 18);
  --color-footer-text:  oklch(70% 0.020 18);
  --color-footer-bright:oklch(91% 0.020 18);
  --color-footer-muted: oklch(48% 0.025 18);

  /* Typography */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  --font-outlier: 'Cormorant Garamond', Georgia, serif;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;

  /* Type scale — 1.25 major third */
  --text-xs:        0.64rem;
  --text-sm:        0.8rem;
  --text-base:      1rem;
  --text-md:        1.25rem;
  --text-lg:        1.5625rem;
  --text-xl:        1.9531rem;
  --text-2xl:       2.4414rem;
  --text-display-s: clamp(2rem, 4vw + 0.5rem, 3.5rem);
  --text-display:   clamp(2.75rem, 6vw + 1rem, 5.25rem);

  /* Spacing — 4pt base */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro:   120ms;
  --dur-short:   220ms;
  --dur-long:    420ms;

  /* Geometry */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-pill: 999px;

  /* Z-index */
  --z-base:     1;
  --z-raised:   10;
  --z-sticky:   200;

  /* Layout */
  --max-w:      1200px;
  --max-w-text: 65ch;
  --max-w-letter: 52ch;
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: 1rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
  overflow-x: clip;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

a {
  color: inherit;
  text-decoration: none;
}

p { margin: 0 0 1.25em; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

/* ── Reveal ──────────────────────────────────────────────────── */
.pug-fade-in {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--dur-long) var(--ease-out),
    transform var(--dur-long) var(--ease-out);
}

.pug-fade-in.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .pug-fade-in {
    transition: opacity 150ms linear;
    transform: none;
  }
}

/* ── Header — N1 ─────────────────────────────────────────────── */
#site-header,
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--z-sticky);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition:
    background      400ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color    400ms cubic-bezier(0.16, 1, 0.3, 1),
    backdrop-filter 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

#site-header.scrolled,
.site-header.scrolled {
  background: oklch(96% 0.018 18 / 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--color-rule);
}

/* Lightning の header_scrolled を完全に無効化 */
.header_scrolled .site-header,
.header_scrolled #site-header {
  position: fixed !important;
  top: 0 !important;
  box-shadow: none !important;
  animation: none !important;
  min-height: unset !important;
}
/* 透過状態: background は我々の .scrolled クラスに委ねる */
.header_scrolled .site-header:not(.scrolled),
.header_scrolled #site-header:not(.scrolled) {
  background-color: transparent !important;
}
/* 不透過状態: .scrolled が付いたときは背景を復元 */
.header_scrolled .site-header.scrolled,
.header_scrolled #site-header.scrolled {
  background: oklch(96% 0.018 18 / 0.94) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom-color: var(--color-rule) !important;
}
.header_scrolled .site-header-logo,
.header_scrolled .header-top,
.header_scrolled .site-header-sub {
  display: block !important;
}

#site-header-container,
.site-header-container {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 var(--space-xl) !important;
  min-height: 88px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.site-header-logo,
#site-header .site-header-logo {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--fw-regular);
  letter-spacing: 0.02em;
  color: var(--color-ink) !important;
  margin: 0;
  padding: 0;
  line-height: 1;
}

.site-header-logo a {
  color: inherit !important;
  text-decoration: none;
  transition: opacity var(--dur-micro) var(--ease-out);
}

.site-header-logo a:hover { opacity: 0.6; }

/* ── Brand mark B — hug heart lockup ──────────────────────── */
.pug-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
}

.pug-lockup__mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.pug-lockup__text {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--fw-regular);
  letter-spacing: 0.02em;
  color: var(--color-ink);
  line-height: 1;
}

#global-nav ul,
.global-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-2xl);
}

#global-nav ul li a,
.global-nav ul li a {
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: var(--text-md);
  font-weight: var(--fw-regular);
  color: var(--color-ink-2);
  transition: color var(--dur-micro) var(--ease-out);
  white-space: nowrap;
}

#global-nav ul li a:hover,
.global-nav ul li a:hover,
#global-nav ul li.current-menu-item a,
.global-nav ul li.current-menu-item a {
  color: var(--color-ink);
}

/* ── Buttons ─────────────────────────────────────────────────── */
.pug-btn {
  display: inline-block;
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  letter-spacing: 0.04em;
  color: var(--color-ink);
  border: 1px solid var(--color-rule);
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-pill);
  transition:
    border-color var(--dur-micro) var(--ease-out),
    color var(--dur-micro) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
  white-space: nowrap;
  cursor: pointer;
}

.pug-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-1px);
}

.pug-btn:active { transform: translateY(0); }

.pug-btn--accent {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}

.pug-btn--accent:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: var(--color-accent-ink);
}

/* ── Front page — Marquee Hero ───────────────────────────────── */
.pug-front { background: var(--color-paper); }

.pug-hero {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--space-4xl) var(--space-xl) var(--space-3xl);
}

/* ── Hero scatter images ─────────────────────────────────────── */
@keyframes pug-scatter-in {
  from { opacity: 0; translate: 0 32px; }
  to   { opacity: 0.3; translate: 0 0; }
}

@keyframes pug-scatter-out {
  from { opacity: 0.3; translate: 0 0; }
  to   { opacity: 0; translate: 0 -24px; }
}


.pug-hero-scatter {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pug-hero-scatter__item {
  position: absolute;
  overflow: hidden;
  border-radius: var(--radius-sm);
  aspect-ratio: 4 / 5;
  opacity: 0;
}

.pug-hero-scatter.is-active .pug-hero-scatter__item {
  animation: pug-scatter-in 3s var(--ease-out) forwards;
}
.pug-hero-scatter.is-active .pug-hero-scatter__item:nth-child(1) { animation-delay:   0ms; }
.pug-hero-scatter.is-active .pug-hero-scatter__item:nth-child(2) { animation-delay:  80ms; }
.pug-hero-scatter.is-active .pug-hero-scatter__item:nth-child(3) { animation-delay: 160ms; }
.pug-hero-scatter.is-active .pug-hero-scatter__item:nth-child(4) { animation-delay:  40ms; }
.pug-hero-scatter.is-active .pug-hero-scatter__item:nth-child(5) { animation-delay: 120ms; }
.pug-hero-scatter.is-active .pug-hero-scatter__item:nth-child(6) { animation-delay:  60ms; }
.pug-hero-scatter.is-active .pug-hero-scatter__item:nth-child(7) { animation-delay: 100ms; }
.pug-hero-scatter.is-active .pug-hero-scatter__item:nth-child(8) { animation-delay: 180ms; }

.pug-hero-scatter.is-leaving .pug-hero-scatter__item {
  animation: pug-scatter-out 3s var(--ease-in) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .pug-hero-scatter.is-active  .pug-hero-scatter__item { animation: none; opacity: 0.3; }
  .pug-hero-scatter.is-leaving .pug-hero-scatter__item { animation: none; opacity: 0; }
}

.pug-hero-scatter__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pug-hero-scatter__item--1 { width: 440px; top:  -8%; left:  -8%; transform: rotate(-6deg); }
.pug-hero-scatter__item--2 { width: 380px; top:  50%; left:  -5%; transform: rotate(5deg); }
.pug-hero-scatter__item--3 { width: 420px; top:  -6%; left:  24%; transform: rotate(-4deg); }
.pug-hero-scatter__item--4 { width: 360px; top:  53%; left:  22%; transform: rotate(4deg); }
.pug-hero-scatter__item--5 { width: 440px; top:  -7%; right: -8%; transform: rotate(4deg); }
.pug-hero-scatter__item--6 { width: 400px; top:  51%; right: -5%; transform: rotate(-5deg); }
.pug-hero-scatter__item--7 { width: 340px; top:  20%; left:   3%; transform: rotate(7deg); }
.pug-hero-scatter__item--8 { width: 360px; top:  18%; right:  3%; transform: rotate(-4deg); }

@media (max-width: 1024px) {
  .pug-hero-scatter__item--1 { width: 308px; }
  .pug-hero-scatter__item--2 { width: 266px; }
  .pug-hero-scatter__item--3 { width: 294px; }
  .pug-hero-scatter__item--4 { width: 252px; }
  .pug-hero-scatter__item--5 { width: 308px; }
  .pug-hero-scatter__item--6 { width: 280px; }
  .pug-hero-scatter__item--7 { width: 238px; }
  .pug-hero-scatter__item--8 { width: 252px; }
}

@media (max-width: 768px) {
  .pug-hero-scatter { display: none; }
}

.pug-hero__text {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pug-hero__label {
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  color: var(--color-ink-2);
  margin-bottom: var(--space-lg);
}

.pug-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--fw-regular);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-ink);
  margin: 0;
  text-align: center;
}

.pug-hero__rule {
  display: block;
  width: 48px;
  height: 1px;
  background: var(--color-rule);
  margin-top: var(--space-lg);
  border: none;
}

/* ── Works archive — Portfolio Grid ─────────────────────────── */
.pug-archive { background: var(--color-paper); }

.pug-archive__intro {
  padding: var(--space-3xl) var(--space-xl) var(--space-xl);
}

.pug-archive__label {
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: var(--space-sm);
}

.pug-archive__title {
  font-family: var(--font-display);
  font-size: var(--text-display-s);
  font-weight: var(--fw-regular);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}

/* Filter bar */
.pug-filter {
  padding: 0 var(--space-xl);
  border-bottom: 1px solid var(--color-rule);
  margin-bottom: var(--space-2xl);
}

.pug-filter__inner {
  display: flex;
  gap: var(--space-xl);
  padding-bottom: var(--space-md);
  overflow-x: auto;
  scrollbar-width: none;
}

.pug-filter__inner::-webkit-scrollbar { display: none; }

.pug-filter__btn {
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--color-ink-2);
  white-space: nowrap;
  padding: var(--space-xs) 0;
  border-bottom: 1px solid transparent;
  transition:
    color var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) var(--ease-out);
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}

.pug-filter__btn:hover,
.pug-filter__btn.is-active {
  color: var(--color-ink);
  border-bottom-color: var(--color-ink);
}

/* Portfolio card grid */
.pug-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  padding: 0 var(--space-xl) var(--space-4xl);
}

.pug-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--color-paper-2);
  border-radius: var(--radius-sm);
}

.pug-card a {
  display: block;
  width: 100%;
  height: 100%;
}

.pug-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-long) var(--ease-out);
}

.pug-card:hover img { transform: scale(1.03); }

.pug-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--color-overlay) 0%, transparent 55%);
  opacity: 0;
  transition: opacity var(--dur-short) var(--ease-out);
  pointer-events: none;
}

.pug-card:hover .pug-card__overlay { opacity: 1; }

.pug-card__info {
  position: absolute;
  bottom: var(--space-lg);
  left: var(--space-lg);
  right: var(--space-lg);
  color: var(--color-accent-ink);
  opacity: 0;
  transform: translateY(var(--space-xs));
  transition:
    opacity var(--dur-short) var(--ease-out),
    transform var(--dur-short) var(--ease-out);
  pointer-events: none;
}

.pug-card:hover .pug-card__info {
  opacity: 1;
  transform: none;
}

.pug-card__cat {
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  opacity: 0.8;
  display: block;
  margin-bottom: var(--space-xs);
}

.pug-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-regular);
  line-height: 1.2;
  margin: 0;
}

.pug-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink-2);
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: var(--text-sm);
}

.pug-archive__empty {
  padding: var(--space-4xl) var(--space-xl);
  text-align: center;
  color: var(--color-ink-2);
  font-family: var(--font-outlier);
  font-style: italic;
}

/* Pagination */
.navigation.pagination .nav-links {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  padding: 0 var(--space-xl) var(--space-3xl);
  flex-wrap: wrap;
}

.navigation.pagination .page-numbers {
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--color-ink-2);
  padding: var(--space-xs) var(--space-md);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  transition:
    border-color var(--dur-micro) var(--ease-out),
    color var(--dur-micro) var(--ease-out);
  white-space: nowrap;
}

.navigation.pagination .page-numbers:hover,
.navigation.pagination .page-numbers.current {
  border-color: var(--color-rule);
  color: var(--color-ink);
}

/* ── Single work — Photographic ──────────────────────────────── */
.pug-single { background: var(--color-paper); }

.pug-artwork {
  width: 100%;
  max-height: 80svh;
  overflow: hidden;
  background: var(--color-paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pug-artwork img {
  width: 100%;
  height: auto;
  max-height: 80svh;
  object-fit: contain;
}

.pug-artwork--placeholder {
  min-height: 50svh;
  color: var(--color-ink-2);
  font-family: var(--font-outlier);
  font-style: italic;
}

.pug-caption {
  padding: var(--space-xl) var(--space-xl) 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xl);
  flex-wrap: wrap;
}

.pug-caption__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-regular);
  letter-spacing: -0.01em;
  margin: 0;
}

.pug-caption__meta {
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  display: flex;
  gap: var(--space-lg);
  flex-shrink: 0;
}

.pug-work-body {
  padding: var(--space-2xl) var(--space-xl) 0;
  max-width: calc(var(--max-w-text) + var(--space-xl) * 2);
}

.pug-work-body p {
  color: var(--color-ink-2);
  line-height: 1.9;
}

.pug-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
}

.pug-tool-tag {
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  border: 1px solid var(--color-rule);
  padding: var(--space-3xs) var(--space-sm);
  border-radius: var(--radius-pill);
}

.pug-back {
  padding: var(--space-2xl) var(--space-xl);
}

.pug-back-link {
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  transition: color var(--dur-micro) var(--ease-out);
}

.pug-back-link:hover { color: var(--color-accent); }

.pug-work-nav {
  border-top: 1px solid var(--color-rule);
  margin-top: var(--space-3xl);
  padding: var(--space-xl);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.pug-work-nav__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.pug-work-nav__link--next { align-items: flex-end; }

.pug-work-nav__direction {
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: var(--text-xs);
  color: var(--color-ink-2);
}

.pug-work-nav__name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-ink);
  transition: color var(--dur-micro) var(--ease-out);
}

.pug-work-nav__link:hover .pug-work-nav__name { color: var(--color-accent); }

.pug-work-nav__all {
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  text-align: center;
  transition: color var(--dur-micro) var(--ease-out);
  white-space: nowrap;
}

.pug-work-nav__all:hover { color: var(--color-ink); }

/* ── About — Letter ──────────────────────────────────────────── */
.pug-about-page { background: var(--color-paper); }

.pug-letter {
  padding: var(--space-4xl) var(--space-xl);
  max-width: calc(var(--max-w-letter) + var(--space-2xl) * 2);
  margin-inline: auto;
}

.pug-letter__salutation {
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--color-ink);
  margin-bottom: var(--space-2xl);
  line-height: 1.35;
}

.pug-letter__body {
  font-size: var(--text-base);
  line-height: 1.95;
  color: var(--color-ink);
}

.pug-letter__body p {
  max-width: var(--max-w-letter);
  margin-bottom: var(--space-xl);
}

.pug-skills-list {
  list-style: none;
  margin: var(--space-xl) 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.pug-skills-list li {
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  border: 1px solid var(--color-rule);
  padding: var(--space-3xs) var(--space-sm);
  border-radius: var(--radius-pill);
}

.pug-letter__signoff {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-rule);
}

.pug-letter__signoff p {
  font-family: var(--font-outlier);
  font-style: italic;
  color: var(--color-ink-2);
  margin-bottom: var(--space-lg);
}

/* Tools section on about */
.pug-about-tools {
  background: var(--color-paper-2);
  padding: var(--space-3xl) var(--space-xl);
}

.pug-about-tools__inner {
  max-width: calc(var(--max-w-letter) + var(--space-2xl) * 2);
  margin-inline: auto;
}

.pug-about-tools__label {
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  margin-bottom: var(--space-xl);
}

.pug-tools-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.pug-tool-item {
  padding: var(--space-lg);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 16px oklch(24% 0.020 38 / 4%);
}

.pug-tool-item__name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  margin-bottom: var(--space-xs);
}

.pug-tool-item__desc {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  margin: 0;
  line-height: 1.7;
}

/* ── Contact — Long Document ─────────────────────────────────── */
.pug-contact-page { background: var(--color-paper); }

.pug-contact-wrap {
  padding: var(--space-4xl) var(--space-xl);
  max-width: calc(var(--max-w-letter) + var(--space-2xl) * 2);
  margin-inline: auto;
}

.pug-contact-wrap__title {
  font-family: var(--font-display);
  font-size: var(--text-display-s);
  font-weight: var(--fw-regular);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-sm);
}

.pug-contact-wrap__sub {
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--color-ink-2);
  margin-bottom: var(--space-3xl);
  line-height: 1.8;
}

.pug-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.pug-form__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.pug-form__label {
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}

.pug-form__label span {
  color: var(--color-accent);
  margin-left: var(--space-3xs);
}

.pug-form__input {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-light);
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--dur-micro) var(--ease-out);
}

.pug-form__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.pug-form__textarea {
  resize: vertical;
  min-height: 160px;
  line-height: 1.75;
}

.pug-form__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239C8F88' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.pug-form__submit {
  align-self: flex-start;
  border: none;
}

.pug-contact-info {
  margin-top: var(--space-3xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-rule);
}

.pug-contact-info dl {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin: 0;
}

.pug-contact-info dt {
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  letter-spacing: 0.06em;
  margin-bottom: var(--space-3xs);
}

.pug-contact-info dd {
  margin: 0;
  font-size: var(--text-base);
  color: var(--color-ink);
}

.pug-contact-info dd a {
  color: var(--color-accent);
  transition: opacity var(--dur-micro) var(--ease-out);
}

.pug-contact-info dd a:hover { opacity: 0.75; }

/* ── 404 ─────────────────────────────────────────────────────── */
.pug-404-page {
  background: var(--color-paper);
  min-height: 100svh;
  display: flex;
  align-items: center;
}

.pug-404-wrap {
  padding: var(--space-4xl) var(--space-xl);
  width: 100%;
}

.pug-404-num {
  font-family: var(--font-display);
  font-size: clamp(5rem, 18vw, 11rem);
  line-height: 1;
  color: var(--color-accent-sub);
  margin: 0 0 var(--space-lg);
  letter-spacing: -0.04em;
}

.pug-404-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin-bottom: var(--space-md);
}

.pug-404-desc {
  font-size: var(--text-base);
  color: var(--color-ink-2);
  max-width: 38ch;
  margin-bottom: var(--space-2xl);
  line-height: 1.85;
}

.pug-404-actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* ── Footer — Ft5 Statement ──────────────────────────────────── */
.pug-footer {
  background: var(--color-footer-bg);
  padding: var(--space-3xl) var(--space-xl);
}

.pug-footer-inner {
  max-width: var(--max-w);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
}

.pug-footer-wordmark {
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--color-footer-bright);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.pug-footer-nav {
  display: flex;
  gap: var(--space-2xl);
}

.pug-footer-nav a {
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-footer-text);
  transition: color var(--dur-micro) var(--ease-out);
  white-space: nowrap;
}

.pug-footer-nav a:hover { color: var(--color-footer-bright); }

.pug-footer-copy {
  font-size: var(--text-xs);
  color: var(--color-footer-muted);
  margin: 0;
  flex-shrink: 0;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .pug-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  #site-header-container,
  .site-header-container {
    padding: 0 var(--space-xl) !important;
    min-height: 64px !important;
  }

  .pug-hero { padding: var(--space-3xl) var(--space-xl) var(--space-2xl); }

  .pug-grid { gap: var(--space-md); }

  .pug-caption { flex-direction: column; gap: var(--space-md); }

  .pug-work-nav {
    grid-template-columns: 1fr 1fr;
  }

  .pug-work-nav__all {
    grid-column: 1 / -1;
    order: -1;
    text-align: left;
  }

  .pug-tools-grid { grid-template-columns: 1fr; }

  .pug-letter { padding: var(--space-2xl) var(--space-xl); }

  .pug-footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg);
  }

  .pug-footer-nav { flex-wrap: wrap; gap: var(--space-lg); }
}

@media (max-width: 480px) {
  .pug-grid { grid-template-columns: 1fr; }

  .pug-work-nav { grid-template-columns: 1fr; }
  .pug-work-nav__link--next { align-items: flex-start; }

  .pug-404-actions { flex-direction: column; }
  .pug-btn { text-align: center; }
}

/* ── Pricing page — 価格表 ───────────────────────────────────── */
.pug-pricing-page { background: var(--color-paper); }

.pug-pricing-wrap {
  padding: calc(88px + var(--space-4xl)) var(--space-xl) var(--space-4xl);
  max-width: calc(var(--max-w-letter) + var(--space-3xl) * 2);
  margin-inline: auto;
}

.pug-pricing__eyebrow {
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: var(--space-sm);
}

.pug-pricing__title {
  font-family: var(--font-display);
  font-size: var(--text-display-s);
  font-weight: var(--fw-regular);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-md);
}

.pug-pricing__sub {
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--color-ink-2);
  margin: 0 0 var(--space-3xl);
  line-height: 1.85;
}

.pug-pricing__link {
  color: var(--color-accent);
  border-bottom: 1px solid var(--color-rule);
  padding-bottom: 1px;
  transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}

.pug-pricing__link:hover {
  color: var(--color-accent-dark);
  border-bottom-color: var(--color-accent);
}

.pug-pricing-list {
  display: flex;
  flex-direction: column;
}

.pug-plan {
  padding: var(--space-2xl) 0;
  border-top: 1px solid var(--color-rule);
}

.pug-plan:last-child { border-bottom: 1px solid var(--color-rule); }

.pug-plan__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-md);
}

.pug-plan__cat {
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: var(--space-2xs);
}

.pug-plan__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-regular);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin: 0;
}

.pug-plan__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  flex-shrink: 0;
}

.pug-plan__from {
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  letter-spacing: 0.08em;
  margin-right: var(--space-xs);
}

.pug-plan__amount {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

.pug-plan__tail {
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--color-ink-2);
}

.pug-plan__desc {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--text-base);
  line-height: 1.85;
  color: var(--color-ink);
  max-width: var(--max-w-letter);
  margin: 0 0 var(--space-md);
}

.pug-plan__includes {
  list-style: none;
  margin: 0 0 var(--space-lg);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.pug-plan__includes li {
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  border: 1px solid var(--color-rule);
  padding: var(--space-3xs) var(--space-sm);
  border-radius: var(--radius-pill);
}

.pug-plan__meta {
  display: flex;
  gap: var(--space-2xl);
  margin: 0;
}

.pug-plan__meta dt {
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  letter-spacing: 0.06em;
  margin-bottom: var(--space-3xs);
}

.pug-plan__meta dd {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--text-sm);
  color: var(--color-ink);
  margin: 0;
}

.pug-pricing__signoff {
  margin-top: var(--space-3xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-rule);
}

.pug-pricing__signoff p {
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--color-ink-2);
  line-height: 1.85;
  margin: 0 0 var(--space-lg);
}

@media (max-width: 768px) {
  .pug-plan__head { flex-direction: column; gap: var(--space-xs); }
  .pug-plan__meta { gap: var(--space-xl); }
}

/* ── Lightning cleanup ───────────────────────────────────────── */
.breadcrumb,
.vk_breadcrumb { display: none !important; }

.site-body,
.site-body-container,
.l-main,
.l-main__content {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  float: none !important;
  width: 100% !important;
}

.entry-header,
.page-header { display: none !important; }

a:hover, a:focus { color: var(--color-accent); }

/* ── Contact Thanks page ─────────────────────────────────────── */
.pug-thanks-page {
  background: var(--color-paper);
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pug-thanks-wrap {
  padding: var(--space-4xl) var(--space-xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  max-width: 480px;
}

.pug-thanks-mark {
  margin-bottom: var(--space-sm);
  animation: pug-thanks-pop 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes pug-thanks-pop {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

.pug-thanks-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-regular);
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin: 0;
}

.pug-thanks-sub {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--text-base);
  line-height: 1.9;
  color: var(--color-ink-2);
  margin: 0;
}

.pug-thanks-btn {
  display: inline-block;
  margin-top: var(--space-md);
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--color-ink);
  border: 1px solid var(--color-rule);
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-pill);
  transition:
    border-color var(--dur-micro) var(--ease-out),
    color var(--dur-micro) var(--ease-out);
  text-decoration: none;
}

.pug-thanks-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ── Contact Form 7 スタイル上書き ──────────────────────────── */
.wpcf7 { width: 100%; }

.wpcf7 form p {
  margin: 0 0 var(--space-xl);
}

.wpcf7 form p:last-child { margin-bottom: 0; }

.wpcf7 label {
  display: block;
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}

.wpcf7 label .required { color: var(--color-accent); margin-left: 2px; }

.wpcf7 .wpcf7-form-control-wrap {
  display: block;
  margin-top: var(--space-xs);
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 select,
.wpcf7 textarea {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-light);
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--dur-micro) var(--ease-out);
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.wpcf7 select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239C8F88' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.wpcf7 textarea {
  resize: vertical;
  min-height: 160px;
  line-height: 1.75;
}

.wpcf7 input[type="submit"] {
  display: inline-block;
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  letter-spacing: 0.04em;
  color: var(--color-accent-ink);
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    background var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}

.wpcf7 input[type="submit"]:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  transform: translateY(-1px);
}

.wpcf7-response-output {
  margin-top: var(--space-md) !important;
  padding: var(--space-md) var(--space-lg) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  border: 1px solid var(--color-rule) !important;
}

.wpcf7-not-valid-tip {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: oklch(52% 0.18 25);
  margin-top: var(--space-2xs);
}

/* ── 画像保護 ────────────────────────────────────────────────── */
.pg-img-wrap {
  position: relative;
  display: block;
}

.pg-watermark {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.pg-watermark::after {
  content: '© pughug-design.com';
  position: absolute;
  bottom: 8px;
  right: 10px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: oklch(99% 0.005 20 / 55%);
  pointer-events: none;
  white-space: nowrap;
  text-shadow: 0 1px 3px oklch(24% 0.020 38 / 40%);
}

/* DevTools 検出時 — 画像をぼかす */
.pg-devtools-open img {
  filter: blur(14px);
  transition: filter 0.4s ease;
}

/* PrintScreen 警告トースト */
#pg-warning {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999;
  background: oklch(24% 0.020 38 / 90%);
  color: oklch(97% 0.008 58);
  padding: 18px 32px;
  border-radius: 4px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-align: center;
  pointer-events: none;
  animation: pg-warning-in 0.2s ease;
}

@keyframes pg-warning-in {
  from { opacity: 0; transform: translate(-50%, -46%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* ================================================================
 * Hallmark · Immersive Hero (front page redesign)
 * salmon pink palette · crossfading frames · categories list
 * Pre-emit critique: P5 H4 E5 S4 R5 V5
 * ================================================================ */

/* ── Hero — 100vh crossfade container ──────────────────────── */
.pug-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  background: oklch(80% 0.085 18);
  padding-top: 0;
}

/* ── Intro splash — JS で同期フェードアウト ──────────────────── */
.pug-intro-splash {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: oklch(80% 0.085 18);
  transition: opacity 1000ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.pug-intro-splash.is-out {
  opacity: 0;
}

.pug-hero__stage {
  position: absolute;
  inset: 0;
}

.pug-hero__frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  transition: opacity 1000ms cubic-bezier(0.16, 1, 0.3, 1);
}
.pug-hero__frame.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* ── Wordmark — 常時表示・中央固定 ─────────────────────────── */
.pug-hero__wordmark-fixed {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
  width: 100%;
  text-align: center;
  pointer-events: none;
  filter:
    drop-shadow(0 1px 0 oklch(96% 0.018 18 / 0.65))
    drop-shadow(0 0 20px oklch(96% 0.018 18 / 0.55));
}

.pug-hero-wordmark {
  display: grid;
  gap: 18px;
}

@keyframes pug-wordmark-in {
  from {
    opacity: 0;
    translate: 0 28px;
    filter: blur(4px);
  }
  to {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
  }
}

.pug-hero-wordmark__eyebrow,
.pug-hero-wordmark__main,
.pug-hero-wordmark__sub {
  animation: pug-wordmark-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
  opacity: 0;
}
.pug-hero-wordmark__eyebrow { animation-delay: 0.15s; }
.pug-hero-wordmark__main    { animation-delay: 0.35s; }
.pug-hero-wordmark__sub     { animation-delay: 0.55s; }

.pug-hero-wordmark__eyebrow {
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0.32em;
  color: var(--color-accent);
  text-transform: lowercase;
  display: block;
}

.pug-hero-wordmark__main {
  font-family: var(--font-display);
  font-size: clamp(64px, 10vw, 144px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--color-ink);
  margin: 0;
}
.pug-hero-wordmark__main em {
  font-family: var(--font-outlier);
  font-style: italic;
  font-weight: 400;
  color: var(--color-accent);
}

.pug-hero-wordmark__sub {
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0.14em;
  color: var(--color-ink-2);
  display: block;
}

/* ── Frame: Video (making-of) ───────────────────────────────── */
.pug-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.pug-hero-video__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pug-hero-video__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    oklch(28% 0.035 18 / 0.55) 0%,
    oklch(28% 0.035 18 / 0.15) 45%,
    transparent 100%
  );
  pointer-events: none;
}
.pug-hero-video__chrome {
  position: absolute;
  inset: 0;
  padding: 24px 32px;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.pug-hero-video__label {
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.24em;
  color: oklch(98% 0.010 18 / 0.85);
  text-transform: lowercase;
}
.pug-hero-video__title {
  align-self: end;
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 48px);
  color: oklch(98% 0.010 18 / 0.9);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0;
}
.pug-hero-video__meta {
  align-self: end;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: oklch(98% 0.010 18 / 0.75);
  text-transform: lowercase;
  border-top: 1px solid oklch(98% 0.010 18 / 0.25);
  padding-top: 12px;
}

/* ── Frame: Scatter (作品を散りばめる) ─────────────────────── */
.pug-hero-scatter {
  position: absolute;
  inset: 0;
}
.pug-hero-scatter__item {
  position: absolute;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 40px oklch(28% 0.035 18 / 0.10);
  aspect-ratio: 4 / 5;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.pug-hero-scatter__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pug-hero-scatter__caption {
  position: absolute;
  bottom: -22px;
  left: 8px;
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--color-ink-2);
  text-transform: lowercase;
  white-space: nowrap;
}

/* ── HUD ─────────────────────────────────────────────────────── */
.pug-hero__hud {
  position: absolute;
  bottom: 36px;
  left: 56px;
  right: 56px;
  z-index: 25;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}
.pug-hero__progress {
  display: flex;
  gap: 14px;
  align-items: center;
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--color-ink-2);
  text-transform: lowercase;
  pointer-events: auto;
}
.pug-hero__dots {
  display: flex;
  gap: 8px;
}
.pug-hero__dot {
  width: 24px;
  height: 1px;
  background: var(--color-rule);
  border: none;
  padding: 6px 0;
  background-clip: content-box;
  cursor: pointer;
  transition: background var(--dur-short) var(--ease-out);
}
.pug-hero__dot.is-active { background-color: var(--color-accent); }
.pug-hero__dot:hover:not(.is-active) { background-color: var(--color-ink-2); }

.pug-hero__caption {
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--color-ink-2);
  text-transform: lowercase;
  pointer-events: auto;
}

/* ================================================================
 * Works Gallery section
 * ================================================================ */
.pug-gallery {
  padding: 120px 56px 96px;
  background: var(--color-paper);
}

.pug-gallery__header {
  max-width: 1300px;
  margin: 0 auto 80px;
  display: flex;
  align-items: baseline;
  gap: 32px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--color-rule);
  padding-bottom: 32px;
}
.pug-gallery__eyebrow {
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: var(--text-sm);
  letter-spacing: 0.22em;
  color: var(--color-accent);
}
.pug-gallery__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin: 0;
  line-height: 1;
}
.pug-gallery__title em {
  font-family: var(--font-outlier);
  font-style: italic;
  color: var(--color-accent);
}
.pug-gallery__count {
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  margin: 0 0 0 auto;
  letter-spacing: 0.08em;
}

/* ── Grid: 3×3 ─────────────────────────────────────────────── */
.pug-gallery__grid {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 40px;
  row-gap: 56px;
}

.pug-gallery__item {
  display: block;
  text-decoration: none;
  color: inherit;
}

.pug-gallery__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--color-paper-2);
}
.pug-gallery__thumb .pg-img-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.pug-gallery__thumb img,
.pug-gallery__thumb-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.pug-gallery__item:hover .pug-gallery__thumb img,
.pug-gallery__item:hover .pug-gallery__thumb-fallback {
  transform: scale(1.04);
}

.pug-gallery__caption {
  display: block;
  margin-top: 14px;
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  color: var(--color-ink-2);
}

/* ── Scroll flow (IntersectionObserver) ──────────────────── */
/* 初期状態: 列ごとに方向を変えて隠す */
.pug-gallery__item {
  opacity: 0;
  transform: translateY(56px);
  filter: blur(2px);
  transition:
    opacity   900ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 960ms cubic-bezier(0.16, 1, 0.3, 1),
    filter    700ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.pug-gallery__item:nth-child(3n+1) { transform: translate(-18px, 56px); }
.pug-gallery__item:nth-child(3n)   { transform: translate( 18px, 56px); }

/* is-visible が JS から付与されたら流れ込む */
.pug-gallery__item.is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* キャプションは少し遅れて追いかける */
.pug-gallery__caption {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity   700ms cubic-bezier(0.16, 1, 0.3, 1) 160ms,
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1) 160ms;
}
.pug-gallery__item.is-visible .pug-gallery__caption {
  opacity: 1;
  transform: none;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pug-gallery { padding: 80px 32px 64px; }
  .pug-gallery__grid { grid-template-columns: repeat(2, 1fr); column-gap: 24px; row-gap: 40px; }
  .pug-gallery__item:nth-child(9) { display: none; }
}
@media (max-width: 480px) {
  .pug-gallery { padding: 64px 20px 48px; }
  .pug-gallery__grid { grid-template-columns: repeat(2, 1fr); column-gap: 14px; row-gap: 32px; }
  .pug-gallery__count { margin: 0; }
}

/* ================================================================
 * Categories section — 展示室一覧
 * ================================================================ */
.pug-categories {
  padding: 144px 56px 96px;
  background: var(--color-paper);
}

.pug-categories__header {
  max-width: 1300px;
  margin: 0 auto 80px;
  display: flex;
  align-items: baseline;
  gap: 32px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--color-rule);
  padding-bottom: 32px;
}

.pug-categories__eyebrow {
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: var(--text-sm);
  letter-spacing: 0.22em;
  color: var(--color-accent);
}

.pug-categories__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin: 0;
  line-height: 1;
}
.pug-categories__title em {
  font-family: var(--font-outlier);
  font-style: italic;
  color: var(--color-accent);
}

.pug-categories__count {
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  margin: 0 0 0 auto;
  letter-spacing: 0.08em;
}

/* ── カテゴリーグリッド ──────────────────────────────────────── */
.pug-cat-grid {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 1300px;
  border-top: 1px solid var(--color-rule);
}

.pug-cat-item {
  border-bottom: 1px solid var(--color-rule);
  position: relative;
}

.pug-cat-item__link {
  display: grid;
  grid-template-columns: 200px 1fr 320px;
  gap: 64px;
  align-items: center;
  padding: 56px 24px 56px 8px;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: padding var(--dur-short) var(--ease-out);
}
.pug-cat-item__link:hover { text-decoration: none; }

.pug-cat-item--flip .pug-cat-item__link {
  grid-template-columns: 320px 1fr 200px;
}
.pug-cat-item--flip .pug-cat-item__roman  { order: 3; text-align: right; }
.pug-cat-item--flip .pug-cat-item__body   { order: 2; text-align: right; }
.pug-cat-item--flip .pug-cat-item__body .pug-cat-item__meta { justify-content: flex-end; }
.pug-cat-item--flip .pug-cat-item__art-wrap { order: 1; }
.pug-cat-item--flip .pug-cat-item__art-caption { left: auto; right: -8px; }

.pug-cat-item__roman {
  font-family: var(--font-display);
  font-size: clamp(96px, 12vw, 168px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--color-ink);
  transition: color var(--dur-short) var(--ease-out), transform var(--dur-long) var(--ease-out);
  user-select: none;
}
.pug-cat-item:hover .pug-cat-item__roman { color: var(--color-accent); transform: translateX(8px); }
.pug-cat-item--flip:hover .pug-cat-item__roman { transform: translateX(-8px); }

.pug-cat-item__body {
  display: grid;
  gap: 14px;
  align-self: center;
}

.pug-cat-item__eyebrow {
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.20em;
  color: var(--color-ink-2);
  text-transform: lowercase;
}

.pug-cat-item__name {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin: 0;
  text-wrap: balance;
}

.pug-cat-item__meta {
  display: flex;
  gap: 32px;
  align-items: baseline;
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.10em;
  color: var(--color-ink-2);
  text-transform: lowercase;
  padding-top: 8px;
  border-top: 1px solid var(--color-rule);
  white-space: nowrap;
}
.pug-cat-item__meta > span { white-space: nowrap; }

.pug-cat-item__arrow {
  color: var(--color-ink);
  display: inline-block;
  transition: color var(--dur-micro) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.pug-cat-item:hover .pug-cat-item__arrow {
  color: var(--color-accent);
  transform: translateX(6px);
}

.pug-cat-item__art-wrap { position: relative; }

.pug-cat-item__art {
  aspect-ratio: 4 / 3;
  width: 100%;
  background-color: var(--color-paper-2);
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-sm);
  transform: rotate(-1deg);
  transition: transform var(--dur-long) var(--ease-out), box-shadow var(--dur-long) var(--ease-out), opacity 900ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 24px oklch(28% 0.035 18 / 0.06);
  overflow: hidden;
}
.pug-cat-item__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pug-cat-item--flip .pug-cat-item__art { transform: rotate(1deg); }
.pug-cat-item:hover .pug-cat-item__art {
  transform: rotate(0) scale(1.02);
  box-shadow: 0 12px 40px oklch(28% 0.035 18 / 0.12);
}

.pug-cat-item__art-caption {
  position: absolute;
  bottom: -8px;
  left: -8px;
  background: var(--color-paper);
  padding: 2px 10px;
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--color-ink-2);
  text-transform: lowercase;
  border: 1px solid var(--color-rule);
}

/* ================================================================
 * Scroll reveal — .pug-reveal
 * ================================================================ */
.pug-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 820ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 820ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.pug-reveal.is-visible { opacity: 1; transform: none; }

.pug-cat-item.pug-reveal         { transform: translate(-32px, 24px); }
.pug-cat-item--flip.pug-reveal   { transform: translate(32px, 24px); }
.pug-cat-item.pug-reveal.is-visible { transform: none; }

.pug-cat-item .pug-cat-item__roman {
  transition:
    color var(--dur-short) var(--ease-out),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.pug-cat-item.pug-reveal .pug-cat-item__roman   { opacity: 0; transform: translateY(40px); }
.pug-cat-item.pug-reveal.is-visible .pug-cat-item__roman { opacity: 1; transform: none; transition-delay: 180ms; }

.pug-cat-item .pug-cat-item__art {
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.pug-cat-item.pug-reveal .pug-cat-item__art     { opacity: 0; }
.pug-cat-item.pug-reveal.is-visible .pug-cat-item__art { opacity: 1; transition-delay: 280ms; }

/* ================================================================
 * Responsive — 768px 以下
 * ================================================================ */
@media (max-width: 768px) {
  .pug-hero__wordmark-fixed { padding: 0 24px; }
  .pug-hero-wordmark__main  { font-size: clamp(48px, 14vw, 80px); }
  .pug-hero__hud { left: 24px; right: 24px; bottom: 24px; }

  .pug-categories { padding: 80px 24px 56px; }
  .pug-categories__header { margin-bottom: 48px; }

  .pug-cat-item__link,
  .pug-cat-item--flip .pug-cat-item__link {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 24px;
    padding: 32px 0;
  }
  .pug-cat-item--flip .pug-cat-item__roman,
  .pug-cat-item--flip .pug-cat-item__body,
  .pug-cat-item--flip .pug-cat-item__art-wrap { order: unset; text-align: left; }
  .pug-cat-item--flip .pug-cat-item__body .pug-cat-item__meta { justify-content: flex-start; }
  .pug-cat-item--flip .pug-cat-item__art-caption { left: -8px; right: auto; }

  .pug-cat-item__roman { font-size: clamp(64px, 18vw, 96px); }
  .pug-cat-item__name  { font-size: clamp(28px, 7vw, 40px); }
  .pug-cat-item__art   { transform: none; }
  .pug-cat-item--flip .pug-cat-item__art { transform: none; }

  .pug-cat-item.pug-reveal,
  .pug-cat-item--flip.pug-reveal { transform: translateY(24px); }
}

@media (max-width: 414px) {
  .pug-hero-wordmark__main { font-size: clamp(40px, 16vw, 64px); }
  .pug-categories { padding: 64px 20px 48px; }
}

/* ================================================================
 * Contact CTA section
 * ================================================================ */
.pug-cta-section {
  background: var(--color-paper-2);
  padding: 120px var(--space-xl);
  text-align: center;
  border-top: 1px solid var(--color-rule);
}

.pug-cta-section__inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
}

.pug-cta-section__eyebrow {
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: var(--text-sm);
  letter-spacing: 0.22em;
  color: var(--color-accent);
  text-transform: lowercase;
}

.pug-cta-section__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: var(--fw-regular);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin: 0;
}

.pug-cta-section__body {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--text-base);
  line-height: 1.9;
  color: var(--color-ink-2);
  margin: 0;
}

.pug-cta-section__btn {
  display: inline-block;
  font-family: var(--font-outlier);
  font-style: italic;
  font-size: var(--text-md);
  font-weight: var(--fw-regular);
  letter-spacing: 0.04em;
  color: var(--color-accent-ink);
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  padding: var(--space-md) var(--space-2xl);
  border-radius: var(--radius-pill);
  margin-top: var(--space-md);
  transition:
    background var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
}

.pug-cta-section__btn:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: var(--color-accent-ink);
  transform: translateY(-2px);
}

.pug-cta-section__btn:active {
  transform: translateY(0);
}

@media (max-width: 768px) {
  .pug-cta-section { padding: 80px var(--space-xl); }
  .pug-cta-section__body br { display: none; }
}

@media (max-width: 480px) {
  .pug-cta-section { padding: 64px var(--space-xl); }
  .pug-cta-section__btn {
    width: 100%;
    text-align: center;
    padding: var(--space-md) var(--space-xl);
  }
}