/*
  mirume en.mirume-tea.jp: shared stylesheet
  Used by every language directory (/, /zh-hant/, /ko/, /fr/ when added).
  Keep this file the single source of visual truth across languages.
*/

:root {
  --color-bg: #faf7f1;
  --color-bg-alt: #f2ece1;
  --color-ink: #2b2621;
  --color-ink-soft: #55504a;
  --color-wood: #8a6f4e;
  --color-wood-line: #ddd2bf;
  --color-green: #2f4a3c;
  --color-green-dark: #223729;

  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --content-width: 700px;
  --wide-width: 960px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 2.75rem;
  --space-5: 4rem;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-green);
}

a:hover,
a:focus {
  color: var(--color-green-dark);
}

h1,
h2,
h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

p {
  margin: 0 0 var(--space-2);
}

p:last-child {
  margin-bottom: 0;
}

.wrap {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--space-2);
}

.wrap-wide {
  max-width: var(--wide-width);
  margin: 0 auto;
  padding: 0 var(--space-2);
}

/* Header */

.site-header {
  border-bottom: 1px solid var(--color-wood-line);
}

.site-header .wrap-wide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: var(--space-1);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.wordmark {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  font-size: 0.9rem;
}

.site-nav a {
  color: var(--color-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}

.site-nav a:hover,
.site-nav a:focus {
  color: var(--color-green);
  border-bottom-color: var(--color-green);
}

.lang-tag {
  color: var(--color-wood);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* Hero */

.hero-media {
  width: 100%;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.hero-media img {
  width: 100%;
  height: auto;
}

.hero {
  padding: var(--space-4) 0 var(--space-3);
}

.hero p {
  font-size: 1.05rem;
}

.hero-cta {
  margin-top: var(--space-3);
}

.hero-cta a {
  display: inline-block;
  border: 1px solid var(--color-green);
  color: var(--color-green);
  text-decoration: none;
  padding: 0.65em 1.4em;
  font-size: 0.95rem;
  border-radius: 2px;
}

.hero-cta a:hover,
.hero-cta a:focus {
  background: var(--color-green);
  color: var(--color-bg);
}

/* Sections */

.section {
  padding: var(--space-4) 0;
}

.section + .section {
  border-top: 1px solid var(--color-wood-line);
}

.section-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-wood);
  margin-bottom: var(--space-1);
}

.section figure,
.step figure {
  margin: var(--space-3) 0;
}

.section figcaption,
.step figcaption {
  margin-top: var(--space-1);
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  text-align: left;
}

.photo-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

@media (min-width: 640px) {
  .photo-pair {
    grid-template-columns: 1fr 1fr;
  }
}

.report-thumb {
  display: inline-block;
  margin: var(--space-3) 0;
  border: 1px solid var(--color-wood-line);
  padding: var(--space-1);
  background: #fff;
}

.report-thumb img {
  width: 220px;
}

.report-thumb-caption {
  margin-top: var(--space-1);
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}

.zoomable {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  cursor: zoom-in;
}

.zoomable:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 2px;
}

.zoomable img {
  pointer-events: none;
}

.lightbox {
  padding: 0;
  border: none;
  max-width: 95vw;
  max-height: 90vh;
  background: transparent;
}

.lightbox::backdrop {
  background: rgba(24, 20, 16, 0.85);
}

.lightbox img {
  display: block;
  max-width: 95vw;
  max-height: 90vh;
  width: auto;
  height: auto;
}

.lightbox-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: 999px;
  background: rgba(24, 20, 16, 0.6);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox-close:hover,
.lightbox-close:focus-visible {
  background: rgba(24, 20, 16, 0.85);
}

/* Visit / address block */

.visit-block address {
  font-style: normal;
  line-height: 1.8;
}

/* FAQ */

.faq-item {
  margin-bottom: var(--space-3);
}

.faq-item:last-child {
  margin-bottom: 0;
}

.faq-q {
  font-family: var(--font-serif);
  font-weight: 600;
  margin-bottom: 0.35em;
}

.faq-a {
  color: var(--color-ink-soft);
}

/* Appraisal steps (m-standard) */

.step {
  padding: var(--space-4) 0;
}

.step + .step {
  border-top: 1px solid var(--color-wood-line);
}

.step-number {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--color-wood);
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--space-1);
}

/* Footer */

.site-footer {
  border-top: 1px solid var(--color-wood-line);
  background: var(--color-bg-alt);
  padding: var(--space-4) 0;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}

.site-footer a {
  color: var(--color-green);
}

.site-footer .wrap {
  max-width: var(--wide-width);
}

.footer-links {
  margin-top: var(--space-2);
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Narrow screens: restore the side gutter on the text column.

   .wrap sets "padding: 0 var(--space-2)", the same gutter the header uses,
   but .hero / .section / .step each declare a padding shorthand for their
   vertical rhythm, which resets that horizontal padding to zero. Above
   731px (--content-width 700px + var(--space-2) 16px on each side) the
   centred column still leaves a gutter of its own, so nothing is needed
   there and the desktop layout stays exactly as it was. Below that the
   column fills the screen, so the gutter has to be put back explicitly.
   Must stay after the three rules above so source order wins. */
@media (max-width: 731px) {
  .hero,
  .section,
  .step {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
}