/* ============================================================
   テーラー井上 ／ TAILOR INOUE
   Vintage Classic — Handkerchief Palette (Green × Gold × Cream)
   ============================================================ */

/* Reset & Base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS Mincho", serif;
  background: #efe3b4;
  color: #2d2418;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.3s; }

/* Color variables (used in mind) — Subdued
   bg-base:    #efe3b4  (cream)
   bg-card:    #f7edcc  (lighter cream)
   bg-deep:    #4a3825  (deep brown)
   text-main:  #2d2418  (near-black brown)
   accent:     #1f4937  (muted gold)
   accent-2:   #c89938  (light gold)
   border:     #c9a878  (light tan)
*/

/* Layout container */
.page {
  max-width: 1180px;
  margin: 0 auto;
  background: #f7edcc;
  border-left: 1px solid #c9a878;
  border-right: 1px solid #c9a878;
  min-height: 100vh;
}

/* ============ HEADER & NAV ============ */
header.site {
  background: #f7edcc;
  padding: 30px 60px 0;
  border-bottom: double 4px #1f4937;
  text-align: center;
}
.logo .crest {
  font-size: 12px;
  color: #1f4937;
  letter-spacing: 6px;
  margin-bottom: 8px;
}
.logo h1 {
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 42px;
  font-weight: 400;
  letter-spacing: 6px;
  color: #2d2418;
  line-height: 1.2;
}
.logo .est {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 11px;
  color: #1f4937;
  letter-spacing: 4px;
  margin-top: 8px;
}
nav.main {
  margin-top: 24px;
  border-top: 1px solid #c9a878;
  padding: 14px 0 16px;
}
nav.main ul {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
}
nav.main a {
  font-family: "Cormorant Garamond", serif;
  font-size: 12px;
  letter-spacing: 3px;
  font-style: italic;
  color: #4a3825;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
}
nav.main a:hover, nav.main a.active { color: #1f4937; border-bottom-color: #1f4937; }

/* ============ HERO ============ */
.hero {
  padding: 70px 60px 80px;
  text-align: center;
  background: #f7edcc;
  border-bottom: 1px solid #c9a878;
  position: relative;
}
.hero::before, .hero::after {
  content: "❦";
  position: absolute;
  color: #1f4937;
  font-size: 18px;
  left: 50%;
  transform: translateX(-50%);
}
.hero::before { top: 25px; }
.hero::after { bottom: 25px; }
.hero .ribbon {
  display: inline-block;
  background: #4a3825;
  color: #efe3b4;
  padding: 5px 26px;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 11px;
  letter-spacing: 4px;
  margin-bottom: 26px;
}
.hero h2 {
  font-size: 36px;
  letter-spacing: 5px;
  line-height: 1.7;
  font-weight: 400;
  color: #2d2418;
  margin-bottom: 22px;
}
.hero h2 .accent {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: #1f4937;
}
.hero .lead {
  font-size: 17px;
  color: #4a3825;
  line-height: 2.2;
  max-width: 720px;
  margin: 0 auto;
  letter-spacing: 2px;
}

/* Hero with image background (for index) */
.hero-image {
  position: relative;
  min-height: 640px;
  padding: 80px 60px 80px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  background: #4a3825;
  color: #efe3b4;
  overflow: hidden;
}
.hero-image .bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.55;
  filter: sepia(0.35) brightness(0.5) contrast(1.05);
  z-index: 0;
}
.hero-image .bg-slide {
  opacity: 0;
  transition: opacity 1.6s ease-in-out;
}
.hero-image .bg-slide.is-active {
  opacity: 0.55;
}
.hero-image .bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(45,36,24,0.15) 0%, rgba(45,36,24,0.35) 45%, rgba(30,22,12,0.78) 100%);
}
.hero-image > * { position: relative; z-index: 1; }
.hero-image::before, .hero-image::after {
  content: "❦";
  position: absolute;
  color: #c89938;
  font-size: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.hero-image::before { top: 30px; }
.hero-image::after { bottom: 30px; }
.hero-image .ribbon { background: rgba(110,90,42,0.92); color: #efe3b4; }
.hero-image h2 { color: #e8d8a8; text-align: center; text-shadow: 0 2px 12px rgba(20,14,6,0.7), 0 1px 2px rgba(20,14,6,0.5); }
.hero-image h2 .accent { color: #f0dc94; }
.hero-image .lead { color: #ecd49a; font-size: 17px; line-height: 2.2; letter-spacing: 2px; max-width: 720px; text-align: center; text-shadow: 0 2px 10px rgba(20,14,6,0.7), 0 1px 2px rgba(20,14,6,0.5); }

/* ============ SECTIONS ============ */
section { padding: 80px 60px; background: #f7edcc; }
section:nth-child(even) { background: #efe3b4; }
section.contrast { background: #4a3825; color: #efe3b4; }

.sec-head { text-align: center; margin-bottom: 50px; }
.sec-head .top-orn { color: #1f4937; font-size: 16px; margin-bottom: 12px; }
.sec-head h3 {
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 6px;
  color: #2d2418;
  font-family: "Yu Mincho", serif;
}
.sec-head .en {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: #1f4937;
  font-size: 13px;
  letter-spacing: 5px;
  margin-top: 8px;
}
.sec-head .bottom-line {
  width: 100px;
  border-bottom: 1px solid #1f4937;
  margin: 18px auto 0;
  position: relative;
}
.sec-head .bottom-line::before {
  content: "◆";
  position: absolute;
  top: -9px; left: 50%; transform: translateX(-50%);
  background: inherit;
  background-color: inherit;
  padding: 0 8px;
  color: #1f4937;
  font-size: 10px;
}
section.contrast {
  background: #173629;
  color: #f7edcc;
}
section.contrast .sec-head h3 { color: #ffffff; }
section.contrast .sec-head .en { color: #e6c878; }
section.contrast .sec-head .top-orn { color: #e6c878; }
section.contrast .sec-head .bottom-line { border-bottom-color: #e6c878; }
section.contrast .sec-head .bottom-line::before { color: #e6c878; background: #173629; }
section.contrast .body-text { color: #f7edcc; }
section.contrast .body-text p { color: #f7edcc; }
section.contrast .body-text strong { color: #ffffff; }

/* About preview */
.about-pre .body {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 50px;
  max-width: 980px;
  margin: 0 auto;
  align-items: center;
}
.about-pre .img-frame {
  aspect-ratio: 3/4;
  background: #efe3b4;
  border: 6px double #1f4937;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1f4937;
  overflow: hidden;
  position: relative;
}
.about-pre .img-frame img { width: 100%; height: 100%; object-fit: cover; }
.about-pre .text .lead {
  font-size: 20px;
  margin-bottom: 22px;
  line-height: 2;
  letter-spacing: 2px;
  color: #2d2418;
}
.about-pre .text p {
  font-size: 17px;
  line-height: 2.2;
  margin-bottom: 18px;
  letter-spacing: 2px;
  color: #4a3825;
}
.about-pre .signature {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: #1f4937;
  font-size: 16px;
  margin-top: 24px;
  letter-spacing: 3px;
}
.read-more {
  display: inline-block;
  margin-top: 18px;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: #1f4937;
  border-bottom: 1px solid #1f4937;
  padding-bottom: 3px;
  font-size: 13px;
  letter-spacing: 3px;
}

/* Services */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  max-width: 1080px;
  margin: 0 auto;
}
.svc {
  background: #f7edcc;
  border: 1px solid #1f4937;
  padding: 36px 26px;
  text-align: center;
  position: relative;
}
.svc::before {
  content: "";
  position: absolute;
  top: 7px; left: 7px; right: 7px; bottom: 7px;
  border: 1px solid #c9a878;
  pointer-events: none;
}
.svc .num {
  font-family: "Cormorant Garamond", serif;
  color: #1f4937;
  font-size: 36px;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
}
.svc h4 {
  font-size: 17px;
  color: #2d2418;
  margin: 12px 0 6px;
  letter-spacing: 4px;
  font-weight: 400;
}
.svc .price {
  font-family: "Cormorant Garamond", serif;
  color: #1f4937;
  font-size: 22px;
  margin: 12px 0;
  letter-spacing: 2px;
}
.svc p {
  font-size: 12.5px;
  color: #4a3825;
  line-height: 1.9;
}
.svc .ornament { margin: 16px auto 0; color: #1f4937; font-size: 11px; }

/* Gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1080px;
  margin: 0 auto;
}
.gallery-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.gal-item {
  aspect-ratio: 1;
  background: #efe3b4;
  border: 4px double #1f4937;
  overflow: hidden;
  position: relative;
}
.gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.gal-item:hover img { transform: scale(1.05); }
.gal-item .caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(45,36,24,0.85));
  color: #efe3b4;
  padding: 30px 14px 12px;
  font-size: 11px;
  letter-spacing: 1px;
  text-align: left;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
}
.gal-item .caption .id { color: #c89938; font-size: 13px; display: block; }
.gallery-more { text-align: center; margin-top: 40px; }
.gallery-more a {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: #4a3825;
  border: 1px solid #1f4937;
  padding: 12px 36px;
  display: inline-block;
  background: #f7edcc;
  font-size: 14px;
  letter-spacing: 4px;
}
.gallery-more a:hover { background: #1f4937; color: #f7edcc; }

/* Activity cards */
.activity-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  max-width: 1080px;
  margin: 0 auto;
}
.act-card {
  background: #f7edcc;
  padding: 44px 36px;
  border: double 4px #1f4937;
  text-align: center;
}
.act-card .crown {
  font-family: "Cormorant Garamond", serif;
  color: #1f4937;
  font-style: italic;
  font-size: 12px;
  letter-spacing: 4px;
  margin-bottom: 14px;
}
.act-card h4 {
  font-size: 20px;
  color: #2d2418;
  margin-bottom: 16px;
  letter-spacing: 4px;
  font-weight: 400;
}
.act-card p {
  font-size: 13px;
  color: #4a3825;
  line-height: 2;
  margin-bottom: 22px;
  letter-spacing: 1px;
}

/* CTA */
section.cta-section {
  background: #173629;
  color: #f7edcc;
  text-align: center;
  padding: 90px 60px;
  position: relative;
}
section.cta-section::before, section.cta-section::after {
  content: "❦";
  position: absolute;
  color: #e6c878;
  font-size: 16px;
  left: 50%; transform: translateX(-50%);
}
section.cta-section::before { top: 28px; }
section.cta-section::after { bottom: 28px; }
section.cta-section .label {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: #e6c878;
  font-size: 13px;
  letter-spacing: 6px;
  margin-bottom: 16px;
}
section.cta-section h3 {
  font-size: 26px;
  letter-spacing: 5px;
  margin-bottom: 22px;
  font-weight: 400;
  color: #ffffff;
}
section.cta-section p {
  color: #f0e8d4;
  line-height: 2.2;
  margin-bottom: 36px;
  font-size: 17px;
  letter-spacing: 2px;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.cta-btn {
  display: inline-block;
  border: double 3px #e6c878;
  color: #ffffff;
  padding: 16px 50px;
  letter-spacing: 5px;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 14px;
  background: rgba(0,0,0,0.2);
}
.cta-btn:hover { background: #e6c878; border-color: #e6c878; color: #2d2418; }

/* ============ TYPOGRAPHY ============ */
.page-title {
  text-align: center;
  padding: 60px 40px 30px;
  background: #f7edcc;
  border-bottom: 1px solid #c9a878;
}
.page-title .label {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: #1f4937;
  font-size: 13px;
  letter-spacing: 6px;
  margin-bottom: 12px;
}
.page-title h2 {
  font-size: 30px;
  letter-spacing: 6px;
  font-weight: 400;
  color: #2d2418;
}
.page-title .top-orn { color: #1f4937; font-size: 18px; margin-bottom: 14px; }

.intro-copy {
  background: #efe3b4;
  border-left: 4px solid #1f4937;
  padding: 26px 32px;
  margin: 30px auto;
  max-width: 820px;
  font-size: 17px;
  color: #2d2418;
  line-height: 2.2;
  letter-spacing: 2px;
}

.body-text {
  max-width: 780px;
  margin: 0 auto;
  font-size: 17px;
  color: #2d2418;
  line-height: 2.2;
  letter-spacing: 2px;
}
.body-text p { margin-bottom: 18px; }
.body-text h3 {
  font-size: 19px;
  letter-spacing: 4px;
  color: #4a3825;
  margin: 36px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px dotted #c9a878;
  font-weight: 400;
}

/* Tables */
.info-table {
  width: 100%;
  max-width: 720px;
  margin: 24px auto;
  border-collapse: collapse;
  font-size: 14px;
}
.info-table th, .info-table td {
  padding: 14px 18px;
  border-bottom: 1px solid #c9a878;
  text-align: left;
}
.info-table th {
  background: #efe3b4;
  color: #4a3825;
  letter-spacing: 2px;
  font-weight: 400;
  width: 30%;
}
.info-table td { color: #2d2418; }

/* FAQ */
.faq-item {
  max-width: 800px;
  margin: 0 auto 32px;
  border-bottom: 1px dotted #c9a878;
  padding-bottom: 28px;
}
.faq-item .q {
  display: flex;
  gap: 14px;
  align-items: baseline;
  margin-bottom: 14px;
}
.faq-item .q-mark {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: #1f4937;
  font-size: 24px;
  flex-shrink: 0;
}
.faq-item .q-text {
  font-size: 16px;
  color: #2d2418;
  letter-spacing: 1px;
  line-height: 1.7;
}
.faq-item .a {
  display: flex;
  gap: 14px;
  align-items: baseline;
  margin-left: 8px;
}
.faq-item .a-mark {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: #c89938;
  font-size: 24px;
  flex-shrink: 0;
}
.faq-item .a-text {
  font-size: 17px;
  color: #4a3825;
  line-height: 2.2;
  letter-spacing: 2px;
}

/* Forms */
.form-group { margin-bottom: 24px; max-width: 720px; margin-left: auto; margin-right: auto; }
.form-group label {
  display: block;
  font-size: 13px;
  color: #4a3825;
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.form-group input, .form-group textarea, .form-group select {
  width: 100%;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 14px;
  background: #f7edcc;
  border: 1px solid #c9a878;
  color: #2d2418;
  border-radius: 0;
}
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: #1f4937; }
.submit-btn {
  display: inline-block;
  border: double 3px #1f4937;
  color: #4a3825;
  background: #f7edcc;
  padding: 14px 50px;
  letter-spacing: 5px;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 14px;
  cursor: pointer;
}
.submit-btn:hover { background: #1f4937; color: #f7edcc; }

/* ============ FOOTER ============ */
footer.site {
  background: #4a3825;
  color: #efe3b4;
  padding: 50px 60px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 2px;
  border-top: double 4px #c9a878;
}
footer.site .logo-mini {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: #efe3b4;
  font-size: 22px;
  letter-spacing: 8px;
  margin-bottom: 20px;
}
footer.site .info { line-height: 2.2; color: #efe3b4; }
footer.site .info a { color: #efe3b4 !important; }
footer.site .nav-mini {
  margin: 24px 0;
  padding: 14px 0;
  border-top: 1px solid #c9a878;
  border-bottom: 1px solid #c9a878;
  display: flex;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
}
footer.site .nav-mini a {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: #efe3b4;
  font-size: 11px;
  letter-spacing: 3px;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: all 0.2s;
}
footer.site .nav-mini a:hover { color: #ffffff; border-bottom-color: #efe3b4; }
footer.site .nav-mini a.active { color: #ffffff; border-bottom-color: #efe3b4; }
footer.site .copy {
  margin-top: 14px;
  color: #c9a878;
  font-size: 11px;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
}

/* ============ Back to Top button ============ */
#back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  background: rgba(74,56,37,0.92);
  color: #efe3b4;
  border: 2px double #c9a878;
  border-radius: 50%;
  cursor: pointer;
  font-size: 22px;
  font-family: "Cormorant Garamond", serif;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.2s, background 0.2s;
  z-index: 9000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
#back-to-top.is-visible { opacity: 1; pointer-events: auto; }
#back-to-top:hover { background: #c89938; color: #2d2418; transform: translateY(-2px); }
@media (max-width: 768px) {
  #back-to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; font-size: 20px; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 768px) {
  header.site, .hero, .hero-image, section, footer.site, .page-title { padding-left: 24px; padding-right: 24px; }
  .logo h1 { font-size: 28px; letter-spacing: 4px; }
  .hero h2, .hero-image h2 { font-size: 22px; letter-spacing: 3px; }
  .sec-head h3 { font-size: 20px; letter-spacing: 4px; }
  nav.main ul { gap: 14px; }
  nav.main a { font-size: 11px; letter-spacing: 2px; }
  .about-pre .body { grid-template-columns: 1fr; }
  .services-grid, .activity-row { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}

/* ============ Email obfuscation (anti-spam) ============ */
.js-email a {
  color: inherit;
  text-decoration: none;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
}
.js-email a:hover { text-decoration: underline; }

/* ============ LIGHTBOX (Click to enlarge) ============ */
.gal-item img { cursor: zoom-in; }
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 25, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 40px 20px;
  cursor: zoom-out;
  animation: lb-fade 0.25s ease-out;
}
.lightbox.is-open { display: flex; }
.lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  border: 6px double #c89938;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
  background: #f7edcc;
}
.lightbox .lb-close {
  position: absolute;
  top: 20px; right: 24px;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 28px;
  color: #efe3b4;
  cursor: pointer;
  background: transparent;
  border: 1px solid #c89938;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.lightbox .lb-close:hover { background: #c89938; color: #173629; }
.lightbox .lb-counter {
  position: absolute;
  bottom: 24px; left: 50%; transform: translateX(-50%);
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: #c89938;
  font-size: 14px;
  letter-spacing: 4px;
}
.lightbox .lb-prev, .lightbox .lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Cormorant Garamond", serif;
  font-size: 32px;
  color: #efe3b4;
  cursor: pointer;
  background: transparent;
  border: 1px solid #c89938;
  width: 50px; height: 50px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
  user-select: none;
}
.lightbox .lb-prev { left: 24px; }
.lightbox .lb-next { right: 24px; }
.lightbox .lb-prev:hover, .lightbox .lb-next:hover { background: #c89938; color: #173629; }
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 768px) {
  .lightbox .lb-prev, .lightbox .lb-next { width: 40px; height: 40px; font-size: 22px; }
  .lightbox .lb-prev { left: 8px; }
  .lightbox .lb-next { right: 8px; }
}