@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Noto+Sans+JP:wght@300;400;500&display=swap');

:root{
  --ink:#171526;
  --ink-soft:#2b2940;
  --paper:#f8f5f8;
  --paper-2:#efe9f2;
  --violet:#81759f;
  --violet-soft:#cfc7dc;
  --gold:#cba56c;
  --line:rgba(34,28,54,.16);
  --max:1180px;
  --shadow:0 24px 70px rgba(14,10,30,.22);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);background:#151321;
  font-family:"Noto Sans JP",system-ui,sans-serif;
  font-weight:300;line-height:1.85;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit}
.site-header{
  position:absolute;z-index:20;top:0;left:0;width:100%;
  min-height:76px;padding:0 clamp(20px,4vw,62px);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  color:#f7f2f7;border-bottom:1px solid rgba(255,255,255,.13);
}
.brand{font:500 clamp(23px,2.4vw,35px)/1 "Cormorant Garamond",serif;letter-spacing:.03em}
.brand-moon,.gold,.footer-mark{color:var(--gold)}
.producer-link{font-size:11px;letter-spacing:.12em;opacity:.82;transition:.2s}
.producer-link:hover{opacity:1;color:#ead0a8}

.hero{
  position:relative;min-height:min(860px,100svh);overflow:hidden;
  background:
    radial-gradient(circle at 76% 25%,rgba(184,152,184,.25),transparent 27%),
    linear-gradient(110deg,#11101e 5%,#242039 50%,#443447 100%);
  color:white;
}
.hero-art{
  position:absolute;inset:0;
  background-image:url("../sozai/hero.png");
  background-size:cover;background-position:center 35%;
}
.hero-shade{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(12,11,25,.88) 0%,rgba(17,14,31,.58) 42%,rgba(17,14,31,.10) 74%),
    linear-gradient(0deg,rgba(12,10,25,.46),transparent 48%);
}
.hero-stars{position:absolute;inset:0;opacity:.32;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:61px 61px;mask-image:linear-gradient(90deg,#000,transparent 55%)}
.hero-copy{
  position:relative;z-index:2;width:min(90%,var(--max));margin:auto;
  padding-top:clamp(150px,18vh,220px);padding-bottom:110px;
}
.eyebrow,.section-kicker{font-size:11px;letter-spacing:.28em;text-transform:uppercase}
.hero h1{
  margin:.15em 0 0;font:500 clamp(58px,8.2vw,126px)/.75 "Cormorant Garamond",serif;
  letter-spacing:.015em;text-transform:uppercase;text-shadow:0 8px 35px rgba(0,0,0,.2);
}
.hero-script{margin:26px 0 20px;font:italic 400 clamp(20px,2.4vw,34px)/1.2 "Cormorant Garamond",serif;color:#e7d9e9}
.hero-lead{font-size:13px;letter-spacing:.08em}
.hero-sidecopy{position:absolute;z-index:3;right:4vw;top:120px;writing-mode:vertical-rl;font-family:serif;letter-spacing:.32em;line-height:2.1;opacity:.86}
.scroll-cue{display:inline-flex;flex-direction:column;gap:10px;margin-top:24px;font-size:9px;letter-spacing:.3em}
.scroll-cue i{width:1px;height:45px;background:linear-gradient(#fff,transparent)}
.section-inner{width:min(calc(100% - 44px),var(--max));margin:auto}

.section-light{background:linear-gradient(135deg,#fbf8fa,#eee8f1)}
.about{position:relative;overflow:hidden;padding:90px 0}
.about:before,.about:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;filter:blur(2px);opacity:.22;background:radial-gradient(circle,#8e7bad 0 2px,transparent 3px);background-size:22px 22px}
.about:before{left:-100px;bottom:-80px}.about:after{right:-120px;top:-90px}
.about-grid{display:grid;grid-template-columns:1.05fr .9fr .85fr;gap:54px;align-items:center;position:relative;z-index:1}
.section-kicker{margin:0 0 12px;color:#8b7b94}
.about h2,.gallery-heading h2,.modal-meta h2{
  margin:0 0 24px;font:500 clamp(42px,5vw,68px)/.88 "Cormorant Garamond",serif;
}
.about-copy p:not(.section-kicker){font-size:13px}
.about-last{margin-top:24px}
.profile-visual{
  position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:50% 50% 12px 12px/34% 34% 12px 12px;
  background:linear-gradient(145deg,#ddd4e5,#b8abc9);box-shadow:0 18px 55px rgba(64,49,78,.18)
}
.profile-visual img{width:100%;height:100%;object-fit:cover}
.missing-label{display:none;position:absolute;inset:0;place-items:center;font-size:12px;color:#655b73}
.profile-visual.image-missing .missing-label{display:grid}
.profile-data{margin:0}
.profile-data div{padding:14px 0;border-bottom:1px solid var(--line)}
.profile-data dt{font:500 10px/1.2 "Cormorant Garamond",serif;letter-spacing:.2em;color:#8b7b94}
.profile-data dd{margin:5px 0 0;font-size:12px}

.gallery-section{padding:90px 0 110px;background:
 radial-gradient(circle at 100% 15%,rgba(125,104,154,.20),transparent 22%),
 linear-gradient(#1b1928,#12111d);color:#f7f4f8}
.gallery-heading{display:grid;grid-template-columns:1.2fr 1fr auto;gap:30px;align-items:end;margin-bottom:36px}
.gallery-heading h2{margin:0;font-size:clamp(40px,5vw,64px)}
.gallery-heading>p{font-size:12px;letter-spacing:.08em;opacity:.76}
.moon-phases{letter-spacing:.4em;color:#b9a5b5;white-space:nowrap}
.gallery-list{display:grid;gap:18px}
.gallery-card{
  min-height:300px;display:grid;grid-template-columns:300px 1fr;overflow:hidden;
  background:#f8f5f7;color:var(--ink);border:1px solid rgba(255,255,255,.35);
  border-radius:13px;box-shadow:var(--shadow);opacity:0;transform:translateY(24px);
  animation:cardIn .65s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes cardIn{to{opacity:1;transform:none}}
.card-info{padding:34px 36px;display:flex;flex-direction:column;position:relative}
.card-date{display:grid;grid-template-columns:auto 1fr;column-gap:13px;align-items:end}
.card-date .year{grid-column:1/-1;font:500 11px/1 "Cormorant Garamond",serif;letter-spacing:.18em}
.card-date strong{font:500 36px/.95 "Cormorant Garamond",serif}
.card-date .weekday{font-size:10px;letter-spacing:.12em;padding-bottom:3px;color:#766b80}
.card-info h3{font:500 22px/1.35 "Cormorant Garamond","Noto Sans JP",serif;margin:26px 0 10px}
.card-caption{font-size:12px;line-height:1.8;margin:0;color:#50495a}
.view-more{
  margin-top:auto;align-self:flex-start;border:0;border-bottom:1px solid #8e8399;background:transparent;
  padding:10px 2px 7px;color:#3c3349;font:500 10px/1 "Cormorant Garamond",serif;letter-spacing:.18em;cursor:pointer
}
.view-more:hover{color:#9c7745;border-color:var(--gold)}
.card-thumb{position:relative;min-height:300px;overflow:hidden;background:#d8d0df}
.card-thumb img{width:100%;height:100%;object-fit:cover;object-position:center 35%;transition:transform .7s ease}
.gallery-card:hover .card-thumb img{transform:scale(1.025)}
.gallery-status{min-height:92px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:11px;letter-spacing:.13em;color:#b8afc4}
.loader{width:18px;height:18px;border:1px solid #756d82;border-top-color:#d7b87f;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.gallery-status.done .loader{display:none}
.mobile-only{display:none}

.site-footer{
  padding:48px clamp(22px,5vw,70px);display:grid;grid-template-columns:1fr auto;gap:10px 30px;
  align-items:center;background:#0e0d17;color:#d7d1dc;border-top:1px solid rgba(255,255,255,.08)
}
.site-footer>div{font:500 22px/1 "Cormorant Garamond",serif}
.site-footer>a{font-size:11px;letter-spacing:.08em}
.site-footer small{grid-column:1/-1;font-size:9px;opacity:.5;letter-spacing:.1em}

.modal{position:fixed;z-index:100;inset:0;display:none;place-items:center;padding:26px}
.modal.open{display:grid}
.modal-backdrop{position:absolute;inset:0;background:rgba(7,6,13,.82);backdrop-filter:blur(7px);animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0}}
.modal-panel{
  position:relative;z-index:1;width:min(1050px,calc(100vw - 52px));max-height:calc(100svh - 52px);
  overflow:auto;background:#f7f4f7;color:var(--ink);border-radius:15px;box-shadow:0 30px 100px #0009;
  animation:modalIn .28s ease
}
@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.985)}}
.modal-close{
  position:sticky;z-index:3;top:15px;float:right;margin:15px 15px -58px 0;width:42px;height:42px;
  border:1px solid #ffffff80;border-radius:50%;background:#171526d9;color:#fff;font-size:24px;line-height:1;cursor:pointer
}
.modal-meta{display:grid;grid-template-columns:150px 1fr;gap:35px;padding:46px 54px 34px}
.modal-datebox{border-right:1px solid var(--line);display:flex;flex-direction:column}
.modal-datebox span:first-child{font:500 12px/1 "Cormorant Garamond",serif;letter-spacing:.15em}
.modal-datebox strong{font:500 34px/1.2 "Cormorant Garamond",serif}
.modal-datebox span:last-child{font-size:10px;color:#766b80}
.modal-meta h2{font-size:36px;margin-bottom:10px}
.modal-caption{font-size:13px;margin:0}
.modal-image-wrap{background:#111;display:flex;justify-content:center}
.modal-image-wrap img{width:100%;height:auto;object-fit:contain}
body.modal-open{overflow:hidden}

@media (max-width:800px){
  .site-header{min-height:64px}.producer-link{font-size:9px}
  .hero{min-height:760px}.hero-art{background-position:60% center}
  .hero-shade{background:linear-gradient(90deg,rgba(12,11,25,.85),rgba(17,14,31,.25)),linear-gradient(0deg,rgba(12,10,25,.55),transparent)}
  .hero-sidecopy{display:none}
  .about-grid{grid-template-columns:1fr 1fr}.about-copy{grid-column:1/-1}.profile-data{align-self:center}
  .gallery-heading{grid-template-columns:1fr auto}.gallery-heading>p{grid-column:1/-1;grid-row:2}.moon-phases{grid-column:2;grid-row:1}
  .gallery-card{grid-template-columns:240px 1fr}
}
@media (max-width:620px){
  .site-header{padding:0 18px}.producer-link{max-width:160px;text-align:right;line-height:1.45}
  .hero{min-height:700px}.hero-copy{width:calc(100% - 40px);padding-top:150px}.hero h1{font-size:clamp(50px,17vw,76px)}
  .hero-script{font-size:20px}.hero-lead{font-size:11px}
  .about{padding:70px 0}.section-inner{width:min(calc(100% - 28px),var(--max))}
  .about-grid{display:block}.profile-visual{margin:38px auto;width:min(86%,360px)}.profile-data{margin-top:30px}
  .gallery-section{padding:70px 0 90px}.gallery-heading{display:block}.moon-phases{margin-top:15px;font-size:12px}
  .mobile-only{display:block}
  .gallery-card{display:flex;flex-direction:column;min-height:0}
  .card-info{padding:25px 24px 22px;min-height:260px}.card-info h3{margin-top:18px}
  .card-thumb{order:-1;min-height:0;height:56vw;max-height:360px}
  .card-thumb img{object-position:center 30%}
  .site-footer{grid-template-columns:1fr;padding:38px 22px}.site-footer small{grid-column:1}
  .modal{padding:12px}.modal-panel{width:calc(100vw - 24px);max-height:calc(100svh - 24px)}
  .modal-meta{grid-template-columns:1fr;padding:28px 24px 24px;gap:18px}.modal-datebox{border-right:0;border-bottom:1px solid var(--line);padding-bottom:14px}
  .modal-meta h2{font-size:30px}.modal-close{top:10px;margin:10px 10px -52px 0}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}
}