:root{
  --obs-night:#02090b;
  --obs-night-2:#071315;
  --obs-ink:#132027;
  --obs-cream:#f4f1e9;
  --obs-gold:#d5aa66;
  --obs-teal:#315f5c;
}

body.observatory-page{
  --page-accent:#d5aa66;
  --page-glow:#4d8580;
  --page-soft:#e4eee9;
  background:
    radial-gradient(circle at 88% 22%,rgba(49,95,92,.08),transparent 25rem),
    linear-gradient(180deg,#f5f3ed,#ebe8df);
  color:var(--obs-ink);
}
body.observatory-page[data-observatory="map"]{--page-accent:#d2a25d;--page-glow:#2f7373;--page-soft:#dbe9e5}
body.observatory-page[data-observatory="kansatsu"]{--page-accent:#b9c9c2;--page-glow:#6f6d8e;--page-soft:#e7e5ed}
body.observatory-page[data-observatory="gogyo"]{--page-accent:#d59b55;--page-glow:#617d5b;--page-soft:#e5eadc}
body.observatory-page[data-observatory="sanmitsu"]{--page-accent:#d5b074;--page-glow:#765e79;--page-soft:#ece2eb}
body.observatory-page[data-observatory="harai"]{--page-accent:#c7bd9d;--page-glow:#53889a;--page-soft:#ddebf0}
body.observatory-page[data-observatory="zuten"]{--page-accent:#d7a864;--page-glow:#486b78;--page-soft:#dfe7e9}
body.observatory-page[data-observatory="michi"]{--page-accent:#cf9f5e;--page-glow:#6e7659;--page-soft:#e6e8dc}

.observatory-page .site-head{
  background:rgba(31,37,39,.96);
  border-bottom:1px solid rgba(215,174,106,.24);
  backdrop-filter:blur(16px);
}
.observatory-page .brand img{filter:saturate(.82) brightness(1.12)}
.observatory-page nav a:hover,
.observatory-page nav a.active{background:rgba(215,174,106,.16);color:#f3ddb5}

.culture-hero{
  position:relative;
  overflow:hidden;
  min-height:620px;
  padding:0;
  background:
    radial-gradient(circle at 76% 42%,rgba(54,107,103,.2),transparent 28%),
    linear-gradient(115deg,#02090b 0%,#061113 58%,#03090b 100%);
  border-bottom:1px solid rgba(213,170,102,.3);
}
.culture-hero::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.55;
  background-image:
    radial-gradient(circle,rgba(213,170,102,.78) 0 1px,transparent 1.5px),
    radial-gradient(circle,rgba(109,164,158,.55) 0 1px,transparent 1.5px);
  background-size:187px 173px,263px 239px;
  background-position:13px 27px,92px 111px;
  pointer-events:none;
}
.culture-hero::after{
  content:"";
  position:absolute;
  inset:auto -14vw -32vw 38vw;
  aspect-ratio:1;
  border:1px solid rgba(213,170,102,.16);
  border-radius:50%;
  box-shadow:0 0 0 7vw rgba(27,70,69,.035),0 0 0 15vw rgba(213,170,102,.025);
  pointer-events:none;
}
.culture-hero__grid{
  position:relative;
  z-index:1;
  min-height:620px;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.75fr);
  align-items:center;
  gap:clamp(42px,7vw,110px);
  padding:78px 0 74px;
}
.culture-hero__copy{max-width:720px}
.culture-hero__eyebrow{
  margin:0 0 22px;
  color:#a9cbc5;
  font-size:12px;
  font-weight:700;
  letter-spacing:.26em;
  text-transform:uppercase;
}
.culture-hero h1{
  max-width:850px;
  margin:0 0 24px;
  color:#f5efe3;
  font-family:var(--serif);
  font-size:clamp(40px,5.2vw,72px);
  font-weight:600;
  line-height:1.2;
  letter-spacing:.025em;
}
.culture-hero p{
  max-width:720px;
  margin:0;
  color:#c7cbc4;
  font-size:15px;
  line-height:2;
}
.culture-hero__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
  margin-top:32px;
  padding-top:20px;
  border-top:1px solid rgba(213,170,102,.24);
  color:#8fa9a5;
  font-size:10px;
  font-weight:700;
  letter-spacing:.2em;
}
.culture-hero__visual{
  position:relative;
  width:min(100%,470px);
  aspect-ratio:1;
  justify-self:center;
  filter:drop-shadow(0 34px 60px rgba(0,0,0,.44));
}
.culture-dial{
  position:absolute;
  inset:3%;
  border:1px solid rgba(213,170,102,.42);
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.055) 0 3%,transparent 3.3%),
    repeating-radial-gradient(circle,transparent 0 13%,rgba(213,170,102,.14) 13.15% 13.45%,transparent 13.6% 26%),
    radial-gradient(circle at 50% 45%,rgba(52,108,103,.24),rgba(3,13,15,.94) 66%);
  box-shadow:
    inset 0 0 45px rgba(0,0,0,.7),
    0 0 0 10px rgba(8,30,31,.5),
    0 0 0 11px rgba(213,170,102,.16);
}
.culture-dial::before,
.culture-dial::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.culture-dial::before{
  inset:10%;
  border:1px solid rgba(213,170,102,.45);
  box-shadow:inset 0 0 0 5px rgba(2,9,11,.68),0 0 20px rgba(70,126,120,.14);
}
.culture-dial::after{
  inset:28%;
  border:1px solid rgba(213,170,102,.32);
  background:
    linear-gradient(90deg,transparent 49.7%,rgba(213,170,102,.38) 49.8% 50.2%,transparent 50.3%),
    linear-gradient(0deg,transparent 49.7%,rgba(213,170,102,.38) 49.8% 50.2%,transparent 50.3%);
}
.culture-dial__ticks{
  position:absolute;
  inset:2%;
  border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(213,170,102,.76) 0 .38deg,transparent .38deg 7.5deg);
  -webkit-mask:radial-gradient(circle,transparent 0 45%,#000 45.3% 46.2%,transparent 46.5%);
  mask:radial-gradient(circle,transparent 0 45%,#000 45.3% 46.2%,transparent 46.5%);
  opacity:.7;
}
.culture-dial__mark{
  position:absolute;
  left:50%;
  top:50%;
  z-index:2;
  display:grid;
  place-items:center;
  width:31%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border:1px solid rgba(225,191,134,.56);
  border-radius:50%;
  background:
    radial-gradient(circle at 38% 30%,rgba(255,255,255,.12),transparent 27%),
    radial-gradient(circle,#183331 0 25%,#09191b 26% 68%,#03090b 70%);
  box-shadow:0 0 0 8px rgba(3,11,13,.65),0 0 32px rgba(82,139,133,.22);
  color:#ead1a0;
  font-family:var(--serif);
  font-size:clamp(38px,5vw,68px);
  text-shadow:0 0 20px rgba(213,170,102,.28);
}
.culture-dial__node{
  position:absolute;
  z-index:3;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  transform:translate(-50%,-50%);
  border:1px solid rgba(213,170,102,.38);
  border-radius:50%;
  background:rgba(4,15,17,.82);
  color:#dfbd82;
  font-family:var(--serif);
  font-size:16px;
  box-shadow:0 0 0 4px rgba(4,15,17,.5),0 0 18px rgba(70,126,120,.14);
}
.culture-dial__index{
  position:absolute;
  right:0;
  bottom:3%;
  color:#8fa9a5;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;
  letter-spacing:.22em;
  line-height:1.8;
  text-align:right;
}

body[data-observatory="calendar"] .culture-dial__ticks{
  background:repeating-conic-gradient(from -1deg,rgba(213,170,102,.82) 0 .55deg,transparent .55deg 15deg);
}
body[data-observatory="map"] .culture-dial{
  background:
    conic-gradient(from 22.5deg,rgba(51,108,105,.18) 0 12.5%,transparent 12.5% 25%,rgba(51,108,105,.18) 25% 37.5%,transparent 37.5% 50%,rgba(51,108,105,.18) 50% 62.5%,transparent 62.5% 75%,rgba(51,108,105,.18) 75% 87.5%,transparent 87.5%),
    radial-gradient(circle,#102b2c,#030a0c 67%);
}
body[data-observatory="kansatsu"] .culture-dial__mark{
  background:linear-gradient(90deg,#d9d6cd 0 50%,#102123 50% 100%);
  color:#d7b77e;
  font-size:clamp(28px,3.3vw,46px);
  white-space:nowrap;
  mix-blend-mode:normal;
}
body[data-observatory="gogyo"] .culture-dial__node:nth-child(odd){border-color:rgba(111,149,100,.65)}
body[data-observatory="sanmitsu"] .culture-dial::after{
  inset:25%;
  border-radius:0;
  border:1px solid rgba(213,170,102,.4);
  background:none;
  transform:rotate(45deg);
}
body[data-observatory="harai"] .culture-dial{
  background:
    repeating-radial-gradient(circle at 50% 55%,transparent 0 11%,rgba(112,170,185,.24) 11.3% 11.7%,transparent 12% 22%),
    radial-gradient(circle at 48% 40%,#24444a,#061114 70%);
}
body[data-observatory="zuten"] .culture-dial{
  background:
    linear-gradient(30deg,transparent 49.7%,rgba(213,170,102,.15) 49.8% 50.2%,transparent 50.3%),
    linear-gradient(150deg,transparent 49.7%,rgba(213,170,102,.15) 49.8% 50.2%,transparent 50.3%),
    radial-gradient(circle,#163136,#030a0c 70%);
}
body[data-observatory="michi"] .culture-dial::after{
  inset:22%;
  border:2px dashed rgba(213,170,102,.45);
  background:none;
  transform:rotate(-18deg) scaleY(.54);
}

.page-observatory-nav{
  position:relative;
  z-index:3;
  background:#1f2527;
  border-bottom:1px solid rgba(213,170,102,.22);
}
.page-observatory-nav__inner{
  display:flex;
  overflow-x:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(213,170,102,.4) transparent;
}
.page-observatory-nav a{
  flex:0 0 auto;
  min-width:120px;
  padding:16px 17px 15px;
  border-right:1px solid rgba(255,255,255,.08);
  color:#9eb0ad;
  text-decoration:none;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
}
.page-observatory-nav a span{
  display:block;
  margin-bottom:4px;
  color:#d5aa66;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9px;
  letter-spacing:.18em;
}
.page-observatory-nav a:hover,
.page-observatory-nav a.active{background:#283234;color:#fff}
.page-observatory-nav a.active{box-shadow:inset 0 -2px var(--page-accent)}

.observatory-page .section{position:relative}
.observatory-page .section:first-of-type{padding-top:54px}
.observatory-page .panel,
.observatory-page .gg-card,
.observatory-page .step,
.observatory-page .hist-card,
.observatory-page .zu-card,
.observatory-page .record-item,
.observatory-page .kv2,
.observatory-page .check-row{
  border:1px solid rgba(24,48,51,.13);
  background:rgba(255,255,255,.78);
  box-shadow:0 18px 50px rgba(14,31,35,.07);
  backdrop-filter:blur(10px);
}
.observatory-page .panel,
.observatory-page .gg-card,
.observatory-page .step,
.observatory-page .hist-card,
.observatory-page .zu-card{
  position:relative;
  overflow:hidden;
}
.observatory-page .panel::before,
.observatory-page .gg-card::before,
.observatory-page .step::before,
.observatory-page .hist-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:linear-gradient(var(--page-accent),var(--page-glow));
  opacity:.72;
}
.observatory-page .section h2,
.observatory-page .panel h2,
.observatory-page .zu-group h2{color:#183033}
.observatory-page .lead,
.observatory-page .gg-q,
.observatory-page .step p,
.observatory-page .hist-card p,
.observatory-page .zu-card p{color:#5f6d6d}
.observatory-page .btn{
  border-radius:8px;
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
.observatory-page .btn:hover{transform:translateY(-1px)}
.observatory-page .btn.navy{background:#183638;color:#f6f1e7}
.observatory-page .btn.outline{background:rgba(255,255,255,.72);border-color:rgba(24,54,56,.18);color:#183638}
.observatory-page input,
.observatory-page select,
.observatory-page textarea{
  border-color:rgba(24,54,56,.19);
  background:rgba(255,255,255,.84);
  color:#172728;
}
.observatory-page input:focus,
.observatory-page select:focus,
.observatory-page textarea:focus{
  outline:none;
  border-color:var(--page-glow);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--page-glow) 15%,transparent);
}
.observatory-page .notice{
  border-color:color-mix(in srgb,var(--page-glow) 28%,#d8ded8);
  background:color-mix(in srgb,var(--page-soft) 72%,#fff);
  color:#365756;
}
.observatory-page .map{
  border:1px solid rgba(213,170,102,.32);
  border-radius:8px;
  box-shadow:0 24px 65px rgba(7,24,27,.16);
}
.observatory-page .axis-btns button{
  border-radius:7px;
  border-color:rgba(24,54,56,.16);
  background:rgba(255,255,255,.72);
}
.observatory-page .axis-btns button.on{
  background:#183638;
  border-color:#183638;
  color:#fff;
}
.observatory-page .bar-track{background:#dfe6e2}
.observatory-page .bar-dot{background:var(--page-glow)}
.observatory-page .gg-card{padding:21px 24px}
.observatory-page .gg-elem{color:#183638;font-size:25px}
.observatory-page .gg-card:nth-child(1)::before{background:#66855f}
.observatory-page .gg-card:nth-child(2)::before{background:#b76445}
.observatory-page .gg-card:nth-child(3)::before{background:#9a7a4f}
.observatory-page .gg-card:nth-child(4)::before{background:#9a9a8d}
.observatory-page .gg-card:nth-child(5)::before{background:#4d758a}
.observatory-page .step{padding:24px 27px}
.observatory-page .step.done{opacity:.62;filter:saturate(.6)}
.observatory-page .timer{color:#183638;font-size:42px}
.observatory-page .hist-card{padding:22px 24px}
.observatory-page .hist-card h3{font-family:var(--serif);font-size:19px;color:#183638}
.observatory-page .check-row{border-radius:8px}
.observatory-page .check-row input{accent-color:#315f5c}
.observatory-page .zu-group{margin:52px 0}
.observatory-page .zu-group h2{
  border-bottom:1px solid rgba(24,54,56,.15);
  padding-bottom:14px;
  font-size:clamp(23px,3vw,32px);
}
.observatory-page .zu-cards{gap:16px}
.observatory-page .zu-card{
  min-height:190px;
  border-radius:8px;
  padding:24px;
  transition:transform .2s ease,box-shadow .2s ease;
}
.observatory-page .zu-card:hover{
  transform:translateY(-3px);
  box-shadow:0 24px 55px rgba(14,31,35,.12);
}
.observatory-page .zu-card h3{font-family:var(--serif);font-size:20px;color:#183638}
.observatory-page .zu-links a{
  border:1px solid rgba(213,170,102,.45);
  border-radius:7px;
  background:#183638;
}
.observatory-page footer{
  margin-top:0;
  background:#1f2527;
  border-top:1px solid rgba(213,170,102,.22);
}

@media(prefers-reduced-motion:no-preference){
  .culture-dial__ticks{animation:culture-dial-drift 110s linear infinite}
  .culture-dial__mark{animation:culture-core-breathe 8s ease-in-out infinite}
}
@keyframes culture-dial-drift{to{transform:rotate(360deg)}}
@keyframes culture-core-breathe{50%{filter:brightness(1.12)}}

@media(max-width:900px){
  .culture-hero{min-height:auto}
  .culture-hero__grid{
    min-height:auto;
    grid-template-columns:1fr;
    gap:45px;
    padding:64px 0 72px;
  }
  .culture-hero__copy{text-align:center;margin:auto}
  .culture-hero__meta{justify-content:center}
  .culture-hero__visual{width:min(76vw,390px)}
}
@media(max-width:560px){
  .culture-hero__grid{padding:48px 0 58px;gap:34px}
  .culture-hero h1{font-size:clamp(34px,11vw,48px)}
  .culture-hero p{font-size:13.5px;line-height:1.9}
  .culture-hero__eyebrow{font-size:9px;letter-spacing:.19em}
  .culture-hero__meta{font-size:8px;gap:7px 13px}
  .culture-hero__visual{width:min(88vw,340px)}
  .culture-dial__node{width:34px;height:34px;font-size:13px}
  .page-observatory-nav a{min-width:105px;padding:13px 14px;font-size:10px}
  .observatory-page .section:first-of-type{padding-top:38px}
  .observatory-page .zu-card{min-height:auto}
}