/* Shared site header + footer for content pages (type pages, legal/info pages, sample report).
   Namespaced (.ph-*) so it never collides with each page's own styles. Same look as the
   landing header: parchment bar, Fraunces logo, brass compass, midnight CTA. */
.ph, .ph *, .pf, .pf * { box-sizing: border-box; }
.ph {
  position: sticky; top: 0; z-index: 900;
  background: rgba(244,236,220,.94);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid rgba(19,27,46,.1);
  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans JP', 'Noto Sans KR', sans-serif;
  color: #131B2E;
}
.ph-bar {
  max-width: 1180px; margin: 0 auto; height: 64px;
  display: flex; align-items: center; gap: 10px; padding: 0 16px;
}
.ph-logo {
  font-family: 'Fraunces', Georgia, 'Noto Serif JP', 'Noto Serif KR', serif; font-weight: 600;
  font-size: 1.22rem; letter-spacing: -.01em; color: #131B2E; text-decoration: none;
  white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; gap: 6px;
  min-width: 0; flex: 0 0 auto;
}
.ph.is-tighter .ph-logo { flex: 0 1 auto; }
.ph-logo-text { overflow: hidden; text-overflow: ellipsis; }
.ph-compass { color: #8A6A2E; flex: none; }
.ph-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.ph-links a {
  font-size: .9rem; color: #131B2E; opacity: .8; text-decoration: none;
  padding: 0 10px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 8px;
}
.ph-links a:hover { opacity: 1; background: rgba(19,27,46,.05); }
.ph-cta {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: #131B2E; color: #F4ECDC; text-decoration: none; font-weight: 600; font-size: .88rem;
  white-space: nowrap;
}
.ph-cta:hover { background: #1C2743; }
.ph-cta-short { display: none; }
.ph-toggle {
  flex: none; display: none; width: 44px; height: 44px; margin-left: 2px;
  align-items: center; justify-content: center; border: 0; border-radius: 10px;
  background: none; color: #131B2E; cursor: pointer; padding: 0;
}
.ph-toggle:hover { background: rgba(19,27,46,.06); }
.ph-toggle span, .ph-toggle span::before, .ph-toggle span::after {
  content: ""; display: block; width: 20px; height: 1.6px; background: currentColor;
  transition: transform .25s ease, background-color .2s ease;
}
.ph-toggle span::before { transform: translateY(-6px); }
.ph-toggle span::after { transform: translateY(4.4px); }
.ph-toggle[aria-expanded="true"] span { background: transparent; }
.ph-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.ph-toggle[aria-expanded="true"] span::after { transform: rotate(-45deg); }
.ph a:focus-visible, .ph button:focus-visible, .pf a:focus-visible { outline: 3px solid #C9A36A; outline-offset: 2px; }

.ph-panel {
  display: none; border-top: 1px solid rgba(19,27,46,.1); background: #F4ECDC;
  padding: 10px 16px 22px; max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain;
}
.ph-panel[data-open="true"] { display: block; }
.ph-panel nav { display: flex; flex-direction: column; }
.ph-panel nav a {
  display: flex; align-items: center; min-height: 50px; padding: 0 4px;
  font-family: 'Fraunces', Georgia, 'Noto Serif JP', 'Noto Serif KR', serif; font-size: 1.12rem;
  color: #131B2E; text-decoration: none; border-bottom: 1px solid rgba(19,27,46,.08);
}
.ph-panel nav a[aria-current="page"] { color: #8A6A2E; }
.ph-langs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ph-langs a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border: 1px solid rgba(19,27,46,.16); border-radius: 999px;
  font-size: .88rem; color: #131B2E; text-decoration: none;
}
.ph-langs a[aria-current="true"] { background: #131B2E; color: #F4ECDC; border-color: #131B2E; }
.ph-panel .ph-cta { display: flex; width: 100%; margin-top: 18px; min-height: 52px; font-size: 1rem; }
.ph-lock { overflow: hidden; }

@media (max-width: 900px) {
  .ph-links { display: none; }
  .ph-toggle { display: inline-flex; }
  .ph-bar > .ph-cta { margin-left: auto; padding: 0 14px; font-size: .84rem; }
}
/* Set by pusula-header.js when the full CTA label does not fit next to the logo. */
.ph.is-tight .ph-bar > .ph-cta .ph-cta-long { display: none; }
.ph.is-tight .ph-bar > .ph-cta .ph-cta-short { display: inline; }
.ph.is-tighter .ph-bar > .ph-cta { display: none; }
.ph.is-tighter .ph-toggle { margin-left: auto; }
@media (max-width: 380px) { .ph-logo { font-size: 1.08rem; } .ph-bar { padding: 0 12px; gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .ph-toggle span, .ph-toggle span::before, .ph-toggle span::after { transition: none; } }
@media print { .ph, .pf { display: none !important; } }

/* Footer */
.pf {
  margin-top: 56px; border-top: 0; padding: 0; text-align: left; background: #131B2E; color: rgba(244,236,220,.78);
  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans JP', 'Noto Sans KR', sans-serif;
  font-size: .9rem; line-height: 1.5;
}
.pf-inner { max-width: 1180px; margin: 0 auto; padding: 28px 16px calc(28px + env(safe-area-inset-bottom)); }
.pf nav { display: flex; flex-wrap: wrap; gap: 0 4px; }
.pf nav a { color: #F4ECDC; font-size: .9rem; background: none; border: 0; border-radius: 0; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 10px 0 0; }
.pf nav a:hover { text-decoration: underline; }
.pf-copy { margin-top: 12px; font-size: .82rem; color: rgba(244,236,220,.6); }
.ph-logo:lang(ja), .ph-logo:lang(ko) { font-size: 1.02rem; letter-spacing: 0; }
body:has(> .ph) { margin: 0; }
.pf-copy { font-size: .875rem; }
@media (max-width: 420px) { .ph-logo { font-size: 1.06rem; } .ph-logo:lang(ja), .ph-logo:lang(ko) { font-size: .96rem; } }
/* Type index: two-column card grid on phones; the letter code is a quiet caption, the name leads. */
.related.type-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: .6rem; margin-top: 1rem; }
@media (min-width: 640px) { .related.type-index { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem; } }
.related.type-index a { display: flex; flex-direction: column; justify-content: center; gap: .2rem; min-height: 64px; padding: .8rem .95rem; border-radius: 12px; font-family: 'Fraunces', Georgia, serif; font-size: 1rem; line-height: 1.25; transition: border-color .2s, transform .2s, box-shadow .2s; }
.related.type-index a strong { font-weight: 500; }
.related.type-index a span { font-family: 'Work Sans', -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: .66rem; letter-spacing: .22em; }
.related.type-index a:hover { border-color: rgba(201,163,106,.7); transform: translateY(-1px); box-shadow: 0 8px 20px -14px rgba(19,27,46,.45); }
@media (prefers-reduced-motion: reduce) { .related.type-index a { transition: none; } .related.type-index a:hover { transform: none; } }