:root {
  --cc-shell-ink: #f9f6f0;
  --cc-shell-bg: #1a1a1a;
  --cc-shell-accent: #d0b27d;
}

.cc-subpage-header { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px clamp(20px, 5vw, 56px); background: rgba(26,26,26,.96); color: var(--cc-shell-ink); border-bottom: 1px solid rgba(249,246,240,.1); box-shadow: 0 10px 28px rgba(26,26,26,.08); }
.cc-subpage-header a, .cc-subpage-footer a { color: inherit; text-decoration: none; }
.cc-shell-brand { display: inline-flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.cc-shell-brand strong { font-family: 'Cormorant Garamond','Noto Serif JP',serif; font-size: 25px; font-weight: 500; letter-spacing: .16em; line-height: 1; }
.cc-shell-brand span { color: var(--cc-shell-accent); font-size: 10px; letter-spacing: .2em; }
.cc-shell-nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px clamp(12px,2.6vw,28px); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.cc-shell-nav a { color: rgba(249,246,240,.72); transition: color .2s ease; }
.cc-shell-nav a:hover, .cc-shell-nav a[aria-current='page'] { color: var(--cc-shell-ink); }
.cc-shell-nav .cc-shell-book { padding: 9px 16px; border: 1px solid rgba(249,246,240,.62); color: var(--cc-shell-ink); }
.cc-subpage-footer { width: 100vw; box-sizing: border-box; margin-top: auto; margin-left: calc(50% - 50vw); padding: 58px clamp(20px,5vw,56px) 28px; background: var(--cc-shell-bg); color: var(--cc-shell-ink); }
.cc-shell-footer-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; max-width: 1120px; margin: 0 auto; }
.cc-shell-footer-copy { max-width: 32ch; }
.cc-shell-footer-copy strong { display: block; font-family: 'Cormorant Garamond','Noto Serif JP',serif; font-size: 25px; font-weight: 500; letter-spacing: .16em; }
.cc-shell-footer-copy span { display: block; margin-top: 8px; color: var(--cc-shell-accent); font-size: 10px; letter-spacing: .2em; }
.cc-shell-footer-copy p { margin: 18px 0 0; color: rgba(249,246,240,.66); font-size: 12px; line-height: 1.8; }
.cc-shell-footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 22px; max-width: 500px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.cc-shell-footer-links a { color: rgba(249,246,240,.68); transition: color .2s ease; }
.cc-shell-footer-links a:hover { color: var(--cc-shell-ink); }
.cc-shell-footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; max-width: 1120px; margin: 42px auto 0; padding-top: 16px; border-top: 1px solid rgba(249,246,240,.14); color: rgba(249,246,240,.48); font-size: 11px; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
.cc-shell-nav a, .cc-shell-footer-links a { white-space: nowrap; }
@media (max-width: 760px) {
  .cc-subpage-header { align-items: flex-start; flex-direction: column; gap: 14px; padding: 16px 20px 14px; }
  .cc-shell-nav { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; justify-content: stretch; font-size: 9px; letter-spacing: .12em; }
  .cc-shell-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; }
  .cc-shell-nav .cc-shell-book { grid-column: 1 / -1; justify-self: start; min-height: 32px; padding: 8px 14px; }
  .cc-shell-footer-inner { flex-direction: column; gap: 24px; }
  .cc-shell-footer-links { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; gap: 12px 16px; font-size: 10px; letter-spacing: .1em; }
  .cc-shell-footer-links a { display: block; }
  .cc-shell-footer-bottom { margin-top: 28px; gap: 8px; line-height: 1.7; }
}
@media (max-width: 380px) {
  .cc-shell-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-shell-nav .cc-shell-book { grid-column: 1 / -1; }
}