:root {
  color-scheme: light;
  --ink: #111b2d;
  --night: #0b1423;
  --night-soft: #111e31;
  --paper: #f6f4ef;
  --line: #d9d2c5;
  --cream: #f9f5ed;
  --gold: #e6c992;
  --gold-dark: #795b31;
  --muted: #526071;
  --body: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans CJK JP", sans-serif;
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif CJK JP", serif;
  --roman: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--night); color: var(--ink); font: 16px/1.8 var(--body); }
a { color: inherit; }
button { font: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, dl, dd { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid #ad7844; outline-offset: 5px; }
section:focus { outline: none; }

.wrap { width: min(100% - clamp(42px, 11vw, 176px), 1240px); margin-inline: auto; }
.skip-link { position: fixed; z-index: 5; top: 12px; left: 12px; padding: 9px 15px; background: var(--paper); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: sticky; z-index: 4; top: 0; background: #0b1423; border-bottom: 1px solid #d0b68635; color: var(--cream); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 77px; gap: 20px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--cream); text-decoration: none; }
.wordmark span { font: 500 25px/1 var(--roman); letter-spacing: .23em; }
.wordmark img { flex: 0 0 auto; }
.nav-links { display: flex; align-items: center; gap: clamp(23px, 3.2vw, 52px); }
.nav-links a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: #e8e5e2; text-decoration: none; font-size: 13px; letter-spacing: .075em; }
.nav-links a:hover, .back-to-top:hover { color: var(--gold); }
.nav-links .nav-contact { padding: 0 18px; border: 1px solid #aa8b5c; color: var(--gold); }
.nav-contact:hover { background: #e6c99216; }
.nav-toggle { display: inline-flex; gap: 10px; align-items: center; justify-content: center; min-height: 44px; padding: 0 11px; border: 1px solid #aa8b5c; background: transparent; color: var(--gold); font-size: 12px; cursor: pointer; }
.nav-icon, .nav-icon::before, .nav-icon::after { width: 15px; height: 1px; background: currentColor; }
.nav-icon { position: relative; }
.nav-icon::before, .nav-icon::after { content: ""; position: absolute; left: 0; }
.nav-icon::before { top: -5px; }
.nav-icon::after { top: 5px; }
.nav-toggle[aria-expanded="true"] .nav-icon { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-icon::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-icon::after { top: 0; transform: rotate(-45deg); }

.hero { position: relative; isolation: isolate; overflow: hidden; color: var(--cream); background: #0c182a; border-bottom: 1px solid #a78650; }
.hero-image, .hero::after { position: absolute; inset: 0; z-index: -1; }
.hero-image { background: url("assets/hero.webp") center 58% / cover no-repeat; }
.hero::after { content: ""; background: linear-gradient(90deg, #081221f7 0%, #081221e3 26%, #08122185 54%, #0812210a 89%), linear-gradient(0deg, #0b142357, transparent 30%); }
.hero-stars {
  position: absolute;
  z-index: -1;
  inset: 0 0 57%;
  pointer-events: none;
  background: url("assets/hero-starfield.webp") 65% 28% / cover no-repeat;
  mask-image: linear-gradient(#000 65%, transparent);
}
.hero-meteor { display: none; }
.hero-inner { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: clamp(520px, 70svh, 730px); padding-block: 82px; }
.hero h1 { font: 500 clamp(38px, 5.05vw, 74px)/1.24 var(--serif); letter-spacing: .045em; text-shadow: 0 4px 28px #0005; }
.hero-brand { display: block; margin-bottom: 19px; color: var(--gold); font: 500 clamp(18px, 2.1vw, 27px)/1.15 var(--roman); letter-spacing: .22em; }
.hero-slogan > span { display: block; }
.hero-description { max-width: 35em; margin-top: 25px; color: #e4e7eb; font-size: clamp(14px, 1.35vw, 17px); line-height: 1.85; text-wrap: pretty; text-shadow: 0 2px 10px #000c; }
.hero-description p + p { margin-top: .55em; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 52px; padding: 10px 20px; font-size: 13px; font-weight: 700; text-decoration: none; letter-spacing: .07em; }
.button-gold { margin-top: 34px; color: #18202a; background: var(--gold); }
.button-gold:hover { background: #f4ddae; }
.button span, .nav-contact span, .contact-arrow { font-family: var(--body); }

.section-light { background: var(--paper); color: var(--ink); }
.section-dark { background: var(--night); color: var(--cream); }
.about, .business, .contact { padding-block: clamp(62px, 8.6vw, 132px); }
.eyebrow { display: flex; align-items: center; gap: 11px; color: var(--gold-dark); font-size: 12px; font-weight: 700; letter-spacing: .23em; line-height: 1.5; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 19px; height: 1px; background: currentColor; }
.section-dark .eyebrow { color: var(--gold); }
h2 { margin-top: 10px; font: 500 clamp(31px, 4vw, 54px)/1.25 var(--serif); letter-spacing: .07em; }
.about-intro, .section-heading { display: grid; grid-template-columns: 1fr 1.48fr; align-items: start; gap: clamp(22px, 5vw, 80px); }
.about-copy h3 { font: 500 clamp(24px, 3vw, 41px)/1.55 var(--serif); letter-spacing: .04em; }
.about-copy p, .section-heading > p, .contact-inner > div > p:last-child { max-width: 55ch; margin-top: 16px; line-height: 1.9; color: var(--muted); }
.profile { display: grid; grid-template-columns: .95fr 1.25fr; align-items: stretch; gap: clamp(30px, 5vw, 72px); margin-top: clamp(36px, 5vw, 67px); }
.profile-art { position: relative; overflow: hidden; min-height: 250px; background: #0d2140; }
.profile-art img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.profile-table { border-top: 1px solid var(--line); }
.profile-table > div { display: grid; grid-template-columns: minmax(78px, .3fr) 1fr; gap: 10px; border-bottom: 1px solid var(--line); padding: 12px 0; }
.profile-table dt { color: var(--gold-dark); font-size: 13px; font-weight: 700; }
.profile-table dd { font-size: 14px; font-weight: 500; line-height: 1.65; overflow-wrap: anywhere; }

.section-heading { align-items: end; }
.section-heading > p { margin: 0; color: #c2cad5; }
.business-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(17px, 2.6vw, 33px); margin-top: clamp(32px, 5vw, 65px); }
.business-card { background: var(--night-soft); border: 1px solid #c7a87344; }
.business-card > img { width: 100%; height: auto; aspect-ratio: 2.1; object-fit: cover; background: #15243a; }
.business-card-copy { padding: clamp(19px, 2.6vw, 33px); }
.business-card-label { color: var(--gold); font-size: 11px; text-transform: uppercase; font-weight: 700; letter-spacing: .19em; }
.business-card h3 { margin-top: 11px; font: 500 clamp(23px, 2.55vw, 36px)/1.38 var(--serif); letter-spacing: .035em; }
.business-card-copy > p { margin-top: 9px; max-width: 54ch; color: #ccd3de; font-size: 14px; line-height: 1.8; }

.contact-inner { display: grid; grid-template-columns: 1fr 1.13fr; gap: clamp(26px, 8vw, 122px); align-items: center; }
.contact-links { border-top: 1px solid var(--line); font-style: normal; }
.contact-links a { display: flex; align-items: center; justify-content: space-between; gap: 13px; padding: 15px 6px 15px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.contact-links a:hover { color: var(--gold-dark); }
.contact-type, .contact-value { display: block; }
.contact-type { color: var(--gold-dark); font-size: 12px; font-weight: 700; letter-spacing: .055em; }
.contact-value { margin-top: 2px; font: 500 clamp(19px, 2.6vw, 33px)/1.2 var(--roman); overflow-wrap: anywhere; }
.contact-arrow { flex: none; width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid #bfa982; color: var(--gold-dark); }
.contact-links a:hover .contact-arrow { background: #e8ddcb; }

.site-footer { color: var(--cream); background: var(--night); border-top: 1px solid #aa8b5c75; }
.footer-inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; min-height: 95px; }
.footer-inner .wordmark { justify-self: start; }
.footer-inner small { color: #bac2ce; font-size: 11px; }
.back-to-top { justify-self: end; display: inline-flex; gap: 9px; align-items: center; min-height: 44px; text-decoration: none; font-size: 12px; }

@media (max-width: 900px) {
  .wrap { width: calc(100% - 56px); }
  .profile { gap: 28px; }
  .address-break { display: none; }
}

@media (max-width: 700px) {
  html { scroll-padding-top: 76px; }
  .wrap { width: calc(100% - 42px); }
  .header-inner { min-height: 64px; gap: 8px; flex-wrap: wrap; }
  .wordmark span { font-size: 22px; }
  .wordmark img { width: 28px; height: 28px; }
  .nav-links { gap: 10px; flex-wrap: wrap; }
  .nav-links .nav-contact { padding: 0 9px; }
  .site-nav.is-mobile .nav-links { position: absolute; display: grid; inset: 100% 0 auto; background: #0e1a2d; border-bottom: 1px solid #aa8b5c; padding: 7px 21px 12px; gap: 0; }
  .site-nav.is-mobile .nav-toggle[aria-expanded="false"] + .nav-links { display: none; }
  .site-nav.is-mobile .nav-links a { display: flex; justify-content: space-between; min-height: 51px; border: 0; border-bottom: 1px solid #aa8b5c47; padding: 0 6px; }
  .site-nav.is-mobile .nav-links a:last-child { border-bottom: 0; }
  .hero-inner { min-height: clamp(515px, 75svh, 670px); padding-block: 61px 78px; }
  .hero-image { background-position: 63% center; }
  .hero::after { background: linear-gradient(90deg, #081221e8, #081221a3 50%, #0812213b), linear-gradient(0deg, #081221ac, transparent 67%); }
  .hero h1 { font-size: clamp(22px, 7.15vw, 46px); letter-spacing: .025em; }
  .hero-brand { margin-bottom: 14px; }
  .hero-description { margin-top: 19px; }
  .button-gold { margin-top: 27px; }
  .about-intro, .section-heading, .profile, .contact-inner { grid-template-columns: 1fr; gap: 23px; }
  .profile-art { min-height: auto; aspect-ratio: 8 / 3; }
  .profile-table > div { grid-template-columns: 75px 1fr; }
  .business-grid { grid-template-columns: 1fr; }
  .business-card > img { aspect-ratio: 2; }
  .footer-inner { grid-template-columns: 1fr auto; padding-block: 16px; gap: 1px 9px; }
  .footer-inner small { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 360px) {
  .header-inner { width: calc(100% - 34px); }
  .header-inner .wordmark { gap: 6px; }
  .header-inner .wordmark span { font-size: 19px; letter-spacing: .19em; }
  .nav-toggle { padding-inline: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-image { background-image: url("assets/hero-sky.webp"); }
  .hero:not([data-sky="stars"], [data-sky="static"]) .hero-stars { opacity: 0; }
  .hero[data-sky="stars"] .hero-stars { animation: hero-stars-reveal 1.7s ease-out .15s both; }
  .hero[data-sky="meteor"] .hero-meteor {
    position: absolute;
    z-index: -1;
    top: 11%;
    left: 94%;
    display: block;
    width: clamp(106px, 19vw, 290px);
    height: clamp(8px, 1.3vw, 16px);
    background: radial-gradient(ellipse at 12% 50%, #ffc98638, transparent 68%);
    transform: rotate(-23deg);
    transform-origin: 4% center;
    pointer-events: none;
    animation: hero-meteor-pass 1.35s ease-in .85s 1 both;
  }

  .hero-meteor::before, .hero-meteor::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .hero-meteor::before {
    background: linear-gradient(90deg, transparent, #fff6dc 4%, #ffd8a6 13%, #f1a765a8 29%, #c9896960 55%, transparent 100%);
    clip-path: polygon(0 49%, 3% 40%, 10% 38%, 22% 43%, 48% 46%, 84% 49%, 100% 50%, 81% 51%, 52% 54%, 23% 59%, 10% 61%, 3% 56%);
  }

  .hero-meteor::after {
    background: linear-gradient(90deg, transparent 10%, #efd1aa8c 21%, #c6acaa4d 52%, transparent 96%);
    clip-path: polygon(9% 54%, 31% 62%, 66% 61%, 98% 53%, 69% 66%, 35% 71%);
    filter: blur(.65px);
  }
}

@keyframes hero-meteor-pass {
  0% { opacity: 0; translate: 0 0; scale: .48 1; }
  20% { opacity: .9; }
  57% { opacity: .83; scale: 1 1; }
  84% { opacity: .35; }
  100% { opacity: 0; translate: max(-32vw, -480px) min(13.6vw, 204px); scale: 1.13 .75; }
}

@keyframes hero-stars-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}