/* ============================================================
   後藤三太 — santateaceremony.com
   Palette: 胡粉 washi / 松葉 pine / 抹茶 matcha / 緋 vermillion / 墨 sumi
   Type: Shippori Mincho (display) · Zen Kaku Gothic New (body)
         Cormorant Garamond (latin accents)
   ============================================================ */

:root{
  --washi:   #F5F1E6;
  --washi-2: #EFE9DA;
  --pine:    #2E4633;
  --pine-9:  #223528;
  --matcha:  #7A8B5C;
  --sumi:    #35342D;
  --hi:      #AF3E28;
  --line:    rgba(46,70,51,.16);
  --serif:  "Shippori Mincho", "Hiragino Mincho ProN", serif;
  --gothic: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  --latin:  "Cormorant Garamond", "Shippori Mincho", serif;
  --nav-h: 58px;
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--washi);
  color:var(--sumi);
  font-family:var(--gothic);
  font-weight:400;
  font-size:16px;
  line-height:2.15;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--hi); outline-offset:3px; border-radius:2px; }

/* ---------- Japanese prose: no mid-word breaks ---------- */
.prose p, .lead, .note p, .card p, .t-desc{
  word-break:keep-all;
  line-break:strict;
  text-wrap:balance;
}

/* ============ Navigation ============ */
.nav{
  position:sticky; top:0; z-index:50;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:0 clamp(16px, 4vw, 40px);
  background:rgba(245,241,230,.92);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--serif); font-weight:600;
  font-size:15px; letter-spacing:.14em; color:var(--pine);
  white-space:nowrap;
}
.brand .seal{ width:26px; height:26px; flex:none; }
.nav nav{ display:flex; gap:clamp(14px, 2.6vw, 30px); overflow-x:auto; scrollbar-width:none; }
.nav nav::-webkit-scrollbar{ display:none; }
.nav nav a{
  position:relative;
  font-size:12.5px; letter-spacing:.12em; color:var(--pine);
  padding:6px 0; white-space:nowrap;
  opacity:.82; transition:opacity .2s;
}
.nav nav a:hover{ opacity:1; }
.nav nav a.on{ opacity:1; font-weight:500; }
.nav nav a.on::after{
  content:""; position:absolute; left:50%; bottom:-1px;
  width:4px; height:4px; border-radius:50%;
  background:var(--hi); transform:translateX(-50%);
}

/* ============ Seal (落款) ============ */
.seal{ display:inline-block; }

/* ============ Eyebrow / headings ============ */
.eyebrow{
  display:flex; align-items:center; gap:10px;
  font-size:11.5px; letter-spacing:.3em; color:var(--matcha);
  font-weight:500;
  margin-bottom:18px;
}
.eyebrow::before{
  content:""; width:22px; height:1px; background:var(--matcha);
}
h1,h2,h3{ font-family:var(--serif); color:var(--pine); font-weight:600; }

/* ============ Page shell ============ */
.wrap{ width:min(88%, 680px); margin:0 auto; }
.wrap-wide{ width:min(90%, 980px); margin:0 auto; }
section{ padding:clamp(64px, 10vw, 110px) 0; }

/* ============ Page header (subpages) ============ */
.page-head{ padding:clamp(56px, 9vw, 96px) 0 clamp(30px, 5vw, 48px); }
.page-head h1{
  font-size:clamp(26px, 5.4vw, 40px);
  line-height:1.75; letter-spacing:.06em;
}
.page-head .sub{
  margin-top:14px;
  font-size:clamp(14px, 2.6vw, 16px);
  color:var(--matcha); letter-spacing:.08em;
  font-family:var(--serif);
}
.page-head .latin{
  margin-top:8px;
  font-family:var(--latin); font-style:italic;
  font-size:15px; letter-spacing:.06em; color:var(--matcha);
}

/* ============ Prose ============ */
.prose{ width:min(88%, 640px); margin:0 auto; }
.prose p{ margin:0 0 1.9em; font-size:16.5px; }
.prose p:last-child{ margin-bottom:0; }
.prose strong{ font-weight:500; color:var(--pine);
  background:linear-gradient(transparent 72%, rgba(122,139,92,.28) 72%); }

/* ============ Figures ============ */
figure.photo{ margin:clamp(36px, 6vw, 56px) 0; }
figure.photo img{ width:100%; border-radius:8px; }
figure.photo figcaption{
  margin-top:12px; text-align:center;
  font-size:12px; letter-spacing:.14em; color:var(--matcha);
}

/* ============ Buttons ============ */
.actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:34px; }
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 26px;
  border:1px solid var(--pine); border-radius:999px;
  font-size:13.5px; letter-spacing:.1em; color:var(--pine);
  transition:background .25s, color .25s, transform .2s;
}
.btn svg{ width:17px; height:17px; flex:none; }
.btn:hover{ background:var(--pine); color:var(--washi); transform:translateY(-1px); }

/* ============ Contact section ============ */
.contact{ text-align:center; background:var(--washi-2); border-top:1px solid var(--line); }
.contact .eyebrow{ justify-content:center; }
.contact .eyebrow::before{ display:none; }
.contact h2{ font-size:clamp(21px, 4vw, 27px); letter-spacing:.08em; line-height:1.9; }
.contact .lead{ margin-top:14px; font-size:15px; color:var(--sumi); }

/* ============ Footer ============ */
footer{
  background:var(--pine-9); color:rgba(245,241,230,.85);
  text-align:center; padding:56px 20px 44px;
}
footer .seal{ width:34px; height:34px; margin:0 auto 18px; }
.f-name{ font-family:var(--serif); font-size:14.5px; letter-spacing:.2em; color:var(--washi); }
footer nav{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px 22px; margin:20px 0 14px; }
footer nav a{ font-size:11.5px; letter-spacing:.14em; opacity:.7; transition:opacity .2s; }
footer nav a:hover{ opacity:1; }
.f-copy{ font-size:11px; letter-spacing:.14em; opacity:.55; font-family:var(--latin); }

/* ============ Reveal on scroll ============ */
.rv{ opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s ease; }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   HOME
   ============================================================ */
.hero{
  display:grid;
  grid-template-columns:minmax(320px, 44%) 1fr;
  min-height:calc(100vh - var(--nav-h));
  min-height:calc(100svh - var(--nav-h));
}
.hero-panel{
  background:var(--pine);
  color:var(--washi);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:26px;
  padding:clamp(44px, 6vw, 72px) clamp(24px, 4vw, 56px);
  position:relative;
}
.hero-tate{
  writing-mode:vertical-rl;
  font-family:var(--serif); font-weight:500;
  font-size:clamp(30px, 3.6vw, 44px);
  letter-spacing:.34em; line-height:1.9;
  color:var(--washi);
}
.hero-en{
  font-family:var(--latin); font-style:italic;
  font-size:clamp(13px, 1.6vw, 15.5px);
  letter-spacing:.12em; color:rgba(245,241,230,.72);
}
.hero-sub{
  font-size:clamp(12.5px, 1.5vw, 14px);
  letter-spacing:.16em; line-height:2.3;
  color:rgba(245,241,230,.9);
  text-align:center;
  word-break:keep-all; line-break:strict;
}
.hero-panel .seal{ width:38px; height:38px; }
.hero-photo{
  position:relative;
  background:
    repeating-linear-gradient(90deg, rgba(46,70,51,.045) 0 1px, transparent 1px 72px),
    var(--washi-2);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:14px;
  padding:clamp(30px, 5vw, 60px) 24px;
}
.hero-intro{
  max-width:440px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:22px;
}
.hero-intro .logo{ width:clamp(120px, 15vw, 160px); }
.hero-intro h2{
  font-size:clamp(19px, 2.6vw, 25px);
  letter-spacing:.08em; line-height:2;
}
.hero-intro p{
  font-size:14.5px; line-height:2.3; color:var(--sumi);
  word-break:keep-all; line-break:strict; text-wrap:balance;
}
@media (prefers-reduced-motion: no-preference){
  .hero-intro{ animation:kfade 1.2s ease both; }
  @keyframes kfade{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
}

@media (max-width:760px){
  .hero{ grid-template-columns:1fr; }
  .hero-photo{ padding:52px 24px 56px; }
  .hero-panel{ padding:44px 24px 52px; gap:22px; }
  .hero-tate{ font-size:27px; letter-spacing:.3em; }
}

/* Welcome */
.welcome{ text-align:center; }
.welcome .logo{ width:clamp(120px, 18vw, 150px); margin:0 auto 30px; }
.welcome h2{
  font-size:clamp(20px, 4.4vw, 27px);
  letter-spacing:.08em; line-height:2; margin-bottom:22px;
}
.welcome p{ font-size:16px; }

/* Rooms */
.rooms{ background:var(--washi-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.rooms .eyebrow{ justify-content:center; }
.rooms .eyebrow::before{ display:none; }
.rooms h2{ text-align:center; font-size:clamp(20px, 4vw, 25px); letter-spacing:.1em; margin-bottom:clamp(34px, 6vw, 52px); }
.room-grid{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:clamp(18px, 3vw, 28px);
}
@media (max-width:700px){ .room-grid{ grid-template-columns:1fr; } }
.card{
  background:var(--washi);
  border:1px solid var(--line); border-radius:10px;
  overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(46,70,51,.13); }
.card .ph{ aspect-ratio:3/2; overflow:hidden; }
.card .ph.illo{
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 78% 22%, rgba(175,62,40,.05), transparent 42%),
    var(--washi-2);
  border-bottom:1px solid var(--line);
}
.card .ph.illo svg{ width:52%; height:auto; transition:transform .5s ease; }
.card:hover .ph.illo svg{ transform:scale(1.05) translateY(-2px); }
.card .ph img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.card:hover .ph img{ transform:scale(1.035); }
.card .bd{ padding:20px 22px 24px; }
.card .t{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  font-family:var(--serif); font-weight:600; font-size:18px;
  letter-spacing:.1em; color:var(--pine);
}
.card .t .arw{ font-size:15px; color:var(--hi); transition:transform .3s; }
.card:hover .t .arw{ transform:translateX(4px); }
.card .tag{
  display:inline-block; margin-left:8px;
  font-family:var(--gothic); font-weight:500;
  font-size:10px; letter-spacing:.16em; color:var(--hi);
  border:1px solid currentColor; border-radius:999px;
  padding:2px 9px; vertical-align:2px;
}
.card p{ margin-top:9px; font-size:13.5px; line-height:2; color:var(--sumi); }

/* ============================================================
   VISION
   ============================================================ */
.chap{ display:flex; align-items:center; gap:14px; margin:0 0 26px; }
.chap .num{
  width:34px; height:34px; flex:none;
  background:var(--hi); color:var(--washi);
  border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:16px; font-weight:600;
  transform:rotate(-1.6deg);
}
.chap .rule{ flex:1; height:1px; background:var(--line); }
.vh{
  font-size:clamp(20px, 4.2vw, 25px);
  letter-spacing:.07em; line-height:1.95;
  margin-bottom:24px;
  word-break:keep-all; line-break:strict; text-wrap:balance;
}
.v-sec{ padding:clamp(44px, 7vw, 70px) 0; }

/* vertical pull-quote */
.tate-quote{
  display:flex; justify-content:center; align-items:center; gap:clamp(26px, 5vw, 44px);
  padding:clamp(56px, 9vw, 90px) 20px;
  background:var(--washi-2);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.tate-quote .q{
  writing-mode:vertical-rl;
  font-family:var(--serif); font-weight:500;
  font-size:clamp(19px, 3.4vw, 25px);
  letter-spacing:.3em; line-height:2.4;
  color:var(--pine);
  height:clamp(240px, 40vw, 320px);
}
.tate-quote .seal{ width:30px; height:30px; align-self:flex-end; }

.closing{ text-align:center; background:var(--washi-2); border-top:1px solid var(--line); }
.closing .latin-eb{
  font-family:var(--latin); font-style:italic;
  font-size:16px; letter-spacing:.14em; color:var(--matcha);
  margin-bottom:16px;
}
.closing h2{ font-size:clamp(20px, 4.2vw, 26px); letter-spacing:.08em; line-height:1.95; margin-bottom:20px;
  word-break:keep-all; text-wrap:balance; }
.closing p{ font-size:15.5px; max-width:560px; margin:0 auto;
  word-break:keep-all; line-break:strict; text-wrap:balance; }

.byline{
  margin-top:26px;
  font-family:var(--serif); font-size:14px; letter-spacing:.24em; color:var(--pine);
}

/* ============================================================
   ABOUT
   ============================================================ */
.profile-grid{
  display:grid; grid-template-columns:1fr minmax(280px, 380px);
  gap:clamp(30px, 5vw, 60px);
  align-items:start;
}
@media (max-width:820px){
  .profile-grid{ grid-template-columns:1fr; }
  .profile-grid .side{ order:-1; max-width:400px; margin:0 auto; }
}
.side figure.photo{ margin:0 0 26px; }

.name-head h1{
  font-size:clamp(30px, 6vw, 44px); letter-spacing:.18em; line-height:1.6;
}
.name-head .latin{
  font-family:var(--latin); font-style:italic; font-size:16px;
  letter-spacing:.14em; color:var(--matcha); margin-top:6px;
}
.name-head .role{
  margin-top:14px; font-family:var(--serif);
  font-size:clamp(13px, 2.6vw, 15px); letter-spacing:.12em; color:var(--pine);
}

/* timeline */
.tl{ list-style:none; border-left:1px solid var(--line); padding-left:30px; margin-top:8px; }
.tl li{ position:relative; padding-bottom:30px; }
.tl li:last-child{ padding-bottom:0; }
.tl li::before{
  content:""; position:absolute; left:-34.5px; top:13px;
  width:8px; height:8px; border-radius:50%;
  background:var(--hi);
}
.tl .era{
  font-family:var(--serif); font-weight:600;
  font-size:15px; letter-spacing:.1em; color:var(--pine);
}
.tl .t-desc{ font-size:14.5px; line-height:2; margin-top:2px; }

/* ============================================================
   CLASS / TEABOX
   ============================================================ */
.notice{
  margin-top:40px;
  border:1px solid var(--line); border-radius:10px;
  background:var(--washi-2);
  padding:26px 28px;
}
.notice h3{
  display:flex; align-items:center; gap:10px;
  font-size:15.5px; letter-spacing:.14em; margin-bottom:10px;
}
.notice h3::before{
  content:""; width:8px; height:8px; border-radius:2px;
  background:var(--hi); transform:rotate(-8deg);
}
.notice p{ font-size:14px; color:var(--sumi); }

.status{
  display:inline-block;
  font-size:11px; letter-spacing:.22em; color:var(--hi); font-weight:500;
  border:1px solid currentColor; border-radius:999px;
  padding:4px 14px; margin-bottom:16px;
}