:root {
  --background: #111310;
  --surface: #1a1d19;
  --surface-soft: #20241f;
  --foreground: #f7f5ee;
  --muted: #a9afa5;
  --line: rgba(247, 245, 238, .18);
  --accent: #e78042;
  --focus: #ffffff;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; color: var(--foreground); background: var(--background); font-family: "Yu Gothic UI", "Hiragino Sans", "Noto Sans JP", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 14px; border-radius: 6px; color: #111310; background: #fff; font-weight: 800; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.gallery-header { position: sticky; z-index: 20; top: 0; min-height: 72px; display: grid; grid-template-columns: minmax(220px, 1fr) auto minmax(180px, 1fr); align-items: center; gap: 24px; padding: 12px clamp(20px, 4vw, 64px); border-bottom: 1px solid var(--line); background: rgba(17, 19, 16, .94); backdrop-filter: blur(16px); }
.gallery-brand { display: flex; align-items: center; gap: 12px; width: fit-content; text-decoration: none; }
.gallery-brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: #174b3b; font: 700 21px/1 Georgia, serif; }
.gallery-brand > span:last-child { display: grid; gap: 4px; }
.gallery-brand strong { font: 700 18px/1 Georgia, serif; letter-spacing: .03em; }
.gallery-brand small { color: var(--accent); font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.gallery-header nav { display: flex; gap: 6px; }
.gallery-header nav a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12px; font-weight: 800; text-decoration: none; transition: color 180ms ease, border-color 180ms ease, background 180ms ease; }
.gallery-header nav a:hover { color: var(--foreground); border-color: rgba(247,245,238,.42); background: var(--surface-soft); }
.gallery-user { justify-self: end; display: grid; text-align: right; }
.gallery-user strong { font-size: 12px; }
.gallery-user small { margin-top: 3px; color: var(--muted); font-size: 10px; }
body.public-gallery .gallery-header { grid-template-columns: 1fr; }

main { width: min(1400px, calc(100% - clamp(32px, 7vw, 112px))); margin: 0 auto; }
.gallery-intro { position: relative; min-height: clamp(390px, 52vw, 660px); display: flex; flex-direction: column; justify-content: center; padding: clamp(72px, 10vw, 150px) 0 clamp(68px, 8vw, 120px); border-bottom: 1px solid var(--line); }
.gallery-kicker { margin: 0 0 clamp(34px, 5vw, 68px); color: var(--accent); font-size: 11px; font-weight: 900; letter-spacing: .2em; }
.gallery-intro-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .7fr); align-items: end; gap: clamp(36px, 8vw, 120px); }
.gallery-intro h1 { margin: 0; font-size: clamp(50px, 7.4vw, 108px); font-weight: 600; letter-spacing: -.075em; line-height: .98; text-wrap: balance; }
.gallery-guide { max-width: 420px; padding-bottom: 8px; }
.gallery-guide p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.85; }
.gallery-guide p + p { margin-top: 18px; }
.gallery-guide strong { color: var(--foreground); font-weight: 700; }
.gallery-count { position: absolute; right: 0; top: clamp(72px, 10vw, 150px); display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
.gallery-count span { font: 500 clamp(30px, 4vw, 52px)/1 Georgia, serif; }
.gallery-count small { color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .16em; }

.style-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(44px, 6vw, 88px) clamp(20px, 3.6vw, 52px); padding: clamp(70px, 9vw, 130px) 0; }
.gallery-loading, .gallery-error { grid-column: 1 / -1; min-height: 220px; display: grid; place-items: center; margin: 0; border: 1px solid var(--line); color: var(--muted); font-size: 16px; }
.gallery-error a { min-height: 44px; display: inline-flex; align-items: center; margin-left: 12px; text-underline-offset: 4px; }
.style-card { --card-accent: #e78042; display: block; min-width: 0; text-decoration: none; outline: none; }
.style-card-visual { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(135deg, color-mix(in srgb, var(--card-accent) 24%, #20241f), #10120f 72%); isolation: isolate; }
.style-card-visual::before { position: absolute; z-index: -1; inset: 0; background: linear-gradient(115deg, transparent 0 48%, rgba(255,255,255,.08) 48.2% 48.6%, transparent 48.8%), linear-gradient(25deg, transparent 0 64%, rgba(255,255,255,.05) 64.2% 64.6%, transparent 64.8%); content: ""; }
.style-card :is(img, video) { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; filter: saturate(.92) contrast(.98); transition: transform 420ms cubic-bezier(.2,.7,.2,1), filter 260ms ease; }
.style-card.has-video .style-card-fallback { display: none; }
.style-card.has-video.video-missing video { display: none; }
.style-card.has-video.video-missing .style-card-fallback { display: block; }
.style-card.image-missing :is(img, video) { display: none; }
.style-card-number { position: absolute; z-index: 2; top: 18px; left: 18px; min-width: 58px; min-height: 34px; display: grid; place-items: center; padding: 7px 11px; border: 1px solid rgba(255,255,255,.32); border-radius: 999px; color: #fff; background: rgba(0,0,0,.56); backdrop-filter: blur(8px); font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.style-card-action { position: absolute; z-index: 2; right: 18px; bottom: 18px; min-height: 44px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 15px; border-radius: 999px; color: #111310; background: #fff; font-size: 12px; font-weight: 900; box-shadow: 0 10px 28px rgba(0,0,0,.24); transform: translateY(8px); opacity: 0; transition: transform 220ms ease, opacity 220ms ease; }
.style-card-action span { font-size: 17px; line-height: 1; }
.style-card-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 20px 2px 0; }
.style-card-copy { min-width: 0; }
.style-card-copy h2 { margin: 0; font-size: clamp(21px, 2vw, 30px); font-weight: 650; letter-spacing: -.035em; line-height: 1.35; overflow-wrap: anywhere; }
.style-card-copy p { margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.style-card-meta { align-self: start; min-height: 32px; display: inline-flex; align-items: center; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .12em; white-space: nowrap; }
.style-card:hover :is(img, video), .style-card:focus-visible :is(img, video) { transform: scale(1.025); filter: saturate(1) contrast(1); }
.style-card:hover .style-card-action, .style-card:focus-visible .style-card-action { transform: translateY(0); opacity: 1; }
.style-card:focus-visible .style-card-visual { outline: 3px solid var(--focus); outline-offset: 5px; }
.style-card:active .style-card-visual { transform: scale(.995); }

.gallery-footer { min-height: 120px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px clamp(20px, 4vw, 64px); border-top: 1px solid var(--line); color: var(--muted); }
.gallery-footer span { color: var(--foreground); font: 700 13px Georgia, serif; letter-spacing: .1em; }
.gallery-footer small { max-width: 560px; font-size: 11px; line-height: 1.7; text-align: right; }

@media (max-width: 820px) {
  .gallery-header { grid-template-columns: 1fr auto; gap: 12px; }
  .gallery-header nav { grid-column: 1 / -1; grid-row: 2; }
  .gallery-user { grid-column: 2; grid-row: 1; }
  main { width: min(100% - 32px, 680px); }
  .gallery-intro { min-height: 0; padding-top: 78px; }
  .gallery-intro-grid { grid-template-columns: 1fr; align-items: start; }
  .gallery-intro h1 { font-size: clamp(52px, 14vw, 78px); }
  .gallery-guide { max-width: 520px; }
  .gallery-count { position: static; margin-top: 48px; }
  .style-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .gallery-header { position: static; padding: 16px; }
  .gallery-brand strong { font-size: 16px; }
  .gallery-brand small { font-size: 7px; }
  .gallery-user { display: none; }
  .gallery-header nav { display: grid; grid-template-columns: 1fr 1fr; }
  .gallery-header nav a { justify-content: center; }
  .gallery-intro { padding: 64px 0 58px; }
  .gallery-kicker { font-size: 9px; line-height: 1.7; }
  .gallery-intro h1 { font-size: clamp(46px, 15.3vw, 64px); }
  .gallery-guide p { font-size: 16px; }
  .style-grid { gap: 52px; padding: 64px 0 80px; }
  .style-card-visual { aspect-ratio: 4 / 3; }
  .style-card-action { right: 12px; bottom: 12px; transform: none; opacity: 1; }
  .style-card-body { grid-template-columns: 1fr; gap: 12px; padding-top: 16px; }
  .style-card-meta { justify-self: start; }
  .gallery-footer { align-items: flex-start; flex-direction: column; padding: 28px 16px; }
  .gallery-footer small { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}