:root {
  color-scheme: dark;
  --base: #101010;
  --text: #fffaf4;
  --muted: #c6c0ba;
  --accent: #ffc522;
  --line: rgba(255, 244, 225, .15);
  --brand-gradient: linear-gradient(112deg,#ffcf29,#ff9d11 70%,#ff8518);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing:border-box }
body { margin:0; background:var(--base); color:var(--text); }
a { color:inherit; text-decoration:none }
button { font:inherit; cursor:pointer }
:focus-visible { outline:2px solid var(--accent); outline-offset:5px }
.shell { isolation:isolate; overflow:hidden; position:relative; padding:0 32px 62px }
.header { position:relative; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; max-width:1192px; margin:auto; min-height:96px; gap:24px; z-index:2 }
.brand { width:max-content; display:flex; align-items:center; min-height:44px }
.brand img { width:151px; display:block }
.nav { display:flex; align-items:center; gap:3px; background:#ffffff0b; border:1px solid var(--line); padding:4px; border-radius:999px; backdrop-filter:blur(16px) }
.nav a { display:flex; align-items:center; justify-content:center; padding:0 17px; min-height:44px; border-radius:999px; font-size:14px; color:#f3e9dd; font-weight:550; }
.nav a:hover, .google:hover { background:#ffffff12 }
.google { justify-self:end; display:inline-flex; align-items:center; gap:10px; border:1px solid var(--line); background:#191714; color:var(--text); border-radius:999px; padding:0 17px; min-height:46px; font-size:14px; font-weight:650; white-space:nowrap }
.google-mark { width:17px; height:17px; flex:none }
.menu, .mobile-google { display:none }
.icon { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; flex:none }
.action { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:50px; border-radius:999px; padding:0 22px; font-size:14px; font-weight:700; }
.primary { color:#201206; background:var(--brand-gradient); box-shadow:0 5px 28px #ff9a122d }
dialog { max-width:min(380px,calc(100% - 32px)); background:#221d17; color:var(--text); border:1px solid var(--line); border-radius:18px; padding:24px }
dialog::backdrop { background:#000b }
dialog h2 { margin:0 0 10px }
dialog p { color:var(--muted); line-height:1.5 }
dialog button { border:0 }

.shell {
  min-height:100svh;
  background:radial-gradient(ellipse 490px 145px at 50% -28px, #322417, transparent);
}
.nav a[aria-current="page"] {
  color:#ffd477;
  background:#553914;
  box-shadow:inset 0 0 0 1px #ffc55430;
}
.mission {
  display:grid;
  grid-template-columns:1.08fr 1fr;
  align-items:center;
  gap:clamp(40px,6vw,88px);
  max-width:1192px;
  margin:76px auto 0;
}
.mission-photo-frame {
  position:relative;
  overflow:hidden;
  width:100%;
  aspect-ratio:1.14;
  background:#000;
  border:1px solid #ffffff19;
  border-radius:20px;
}
.mission-photo {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 52%;
}
.mission h1 {
  color:#fff;
  margin:0 0 26px;
  font-size:clamp(48px,4.55vw,66px);
  line-height:1.02;
  letter-spacing:-.045em;
  font-weight:720;
}
.mission p {
  margin:0;
  color:#d3cdc6;
  font-size:17px;
  line-height:1.67;
}
.mission p + p { margin-top:16px }
@media (max-width:900px) {
  .shell { padding:0 24px 38px }
  .header { grid-template-columns:1fr auto; min-height:80px }
  .menu { display:grid; place-items:center; width:46px; height:46px; color:var(--text); background:#221a13; border:1px solid var(--line); border-radius:50% }
  .nav { display:none; position:absolute; top:calc(100% - 2px); inset-inline:0; background:#201a14; border-radius:16px; padding:8px }
  .nav.open { display:flex; flex-direction:column; align-items:stretch }
  .nav a { justify-content:flex-start; border-radius:8px }
  .mobile-google { display:inline-flex; margin-top:4px; background:#2a2117; }

  .mission { grid-template-columns:1fr; gap:28px; margin-top:25px; max-width:620px }
  .mission-photo-frame { aspect-ratio:1.4; border-radius:16px }
  .mission h1 { margin-bottom:18px; font-size:clamp(40px,8.8vw,54px) }
  .mission p { font-size:16px; line-height:1.66 }
}
@media (max-width:600px) {
  .shell { padding:0 20px 34px }
  .header { min-height:74px }
  .brand img { width:132px }
}

.content-article { max-width:800px; margin:64px auto 0; overflow-wrap:anywhere }
.content-article h1 { font-size:clamp(2.4rem,6vw,4rem); line-height:1.12; margin:0 0 26px }
.content-article p { color:var(--muted); white-space:pre-line; line-height:1.7; margin:0 0 16px }
@media (max-width:900px) {
  .content-article { margin-top:30px }
}