/* Olive Tree Inc. — corporate site
   One stylesheet, one column, one breakpoint (640px).

   Four colours and nothing else. No shadow, no gradient, no transition, no
   icon: the only devices in the design are the rule and the empty space
   around it. If a change here needs a fifth colour or a moving part, it is
   the wrong change — this site's job is to look like a company record, not
   like a campaign. */

:root {
  --bg:     #FAFAF7;  /* 地   */
  --ink:    #1F241F;  /* 文字 */
  --accent: #35503F;  /* 主張色 — deep olive */
  --rule:   #E4E1D8;  /* 罫線 */

  --measure: 760px;              /* body column, inside the 720–800px band */
  --gutter: 1.5rem;
  --section-y: 4rem;             /* doubled at every seam -> 128px between sections */

  --mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.9;                 /* Japanese setting */
  -webkit-font-smoothing: antialiased;
}

body.lang-en { line-height: 1.7; }  /* Latin text sets tighter */

/* Every raster image is fluid and keeps its own ratio. The width/height
   attributes on each <img> reserve the box before load so nothing shifts;
   height:auto keeps that reservation honest when the column is narrower
   than the intrinsic width. */
img { display: block; max-width: 100%; height: auto; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.75rem 1rem;
  background: var(--bg);
  border: 1px solid var(--rule);
}

.skip-link:focus { left: 0; z-index: 1; }

/* ---------- shell ---------- */

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Not fixed. The header scrolls away like any other line of the document. */
.site-header {
  border-bottom: 1px solid var(--rule);
}

.site-header__inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.5rem;
}

.site-header__brand {
  font-family: var(--mincho);
  font-size: 1.0625rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
}

.langnav {
  display: flex;
  gap: 0.5rem;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
}

.langnav__current { color: var(--ink); }
.langnav__sep { color: var(--rule); }

/* ---------- sections ---------- */

.section { padding-block: var(--section-y); }
.section + .section,
main + .site-footer { border-top: 1px solid var(--rule); }

.hero { padding-block: 6rem var(--section-y); }

.hero__h1 {
  margin: 0;
  font-family: var(--mincho);
  font-weight: 400;
  font-size: 2.25rem;
  line-height: 1.45;
  letter-spacing: 0.02em;
}

.hero__latin {
  margin: 0.5rem 0 0;
  font-family: var(--mincho);
  font-size: 0.9375rem;
  letter-spacing: 0.16em;
  color: var(--accent);
}

.hero__lead { margin: 2.5rem 0 0; }

.section-h {
  margin: 0 0 2.5rem;
  font-family: var(--mincho);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.prose { margin: 0 0 1.5rem; }
.prose:last-child { margin-bottom: 0; }

/* ---------- definition lists (company, contact) ---------- */

.deflist { margin: 0; }

.deflist__row {
  display: grid;
  gap: 0.125rem 1.5rem;
  padding-block: 1rem;
  border-top: 1px solid var(--rule);
}

.deflist__row:last-child { border-bottom: 1px solid var(--rule); }

.deflist__row dt {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.deflist__row dd { margin: 0; }

/* ---------- figures ---------- */

.figure { margin: 3.5rem 0 0; }

/* Exterior. Source is portrait (1084×1451, ≈3:4) and ships at 900×1204, so
   nothing crops the roofline or the shopfront. Capped well below the column
   width: at full measure a 3:4 frame stands ~950px tall and swallows a whole
   viewport, which reads as a campaign image rather than as evidence. The
   ratio sits on the image, not the figure: the figure also holds the caption,
   and a ratio there would reserve a box taller than the photograph. */
.figure--wide { max-width: 560px; }
.figure--wide img { width: 100%; aspect-ratio: 900 / 1204; }

/* Portrait. Source is square (1254×1254, exported at 900×900) — a 1:1 frame,
   not the 4:5 a headshot slot usually takes. */
.figure--portrait { max-width: 320px; }
.figure--portrait img { width: 100%; aspect-ratio: 1 / 1; }

.figure__cap {
  margin-top: 0.875rem;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--accent);
}

.linkline { margin: 1rem 0 0; font-size: 0.875rem; }

/* Footnote register: a step down from body copy, in the same subdued colour
   the other supplementary lines use (figcaption, brand location, dl labels).
   Line-height is left to inherit so it stays 1.9 in Japanese and 1.7 in
   English like everything else. The generous margin below keeps it from
   crowding the photograph that follows. */
.note {
  margin: 1.25rem 0 0;
  font-size: 0.875rem;
  color: var(--accent);
}

/* ---------- brands ---------- */

/* Sits between the heading and the list, so it needs more air below it than a
   run of body copy would — the first rule of the list should read as the top
   of a table, not as an underline on this sentence. */
.brands__intro { margin-bottom: 2.5rem; }

.brands {
  margin: 0;
  padding: 0;
  list-style: none;
}

.brand {
  padding-block: 1.5rem;
  border-top: 1px solid var(--rule);
}

.brand:last-child { border-bottom: 1px solid var(--rule); }

.brand__name {
  margin: 0;
  font-family: var(--mincho);
  font-size: 1.125rem;
  letter-spacing: 0.06em;
}

.brand__desc { margin: 0.375rem 0 0; }

.brand__where {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  color: var(--accent);
}

/* THE URAh has no studio address; the row collapses instead of leaving a
   dangling empty line. */
.brand__where:empty { display: none; }

/* ---------- message ---------- */

#message .figure { margin-top: 0; margin-bottom: 3rem; }

/* The signature is not part of the message — it is the attestation under it.
   Set apart by space and alignment rather than by a rule, and a step down in
   size so it reads as a closing mark and not as another paragraph. */
.signature {
  margin: 4rem 0 0;
  text-align: right;
  font-family: var(--mincho);
  font-size: 0.9375rem;
  line-height: 2;
  letter-spacing: 0.06em;
}

.signature__line { display: block; }

/* ---------- privacy / document pages ---------- */

.doc__h1 {
  margin: 0 0 2.5rem;
  font-family: var(--mincho);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.doc__h2 {
  margin: 3rem 0 1rem;
  font-family: var(--mincho);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.doc__established {
  margin: 4rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.875rem;
}

/* ---------- footer ---------- */

.site-footer {
  padding-block: 3rem;
  font-size: 0.8125rem;
  line-height: 1.9;
}

.site-footer p { margin: 0; }

.site-footer__brand {
  font-family: var(--mincho);
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.site-footer__copy { margin-top: 1.5rem; }

/* ---------- 640px ---------- */

@media (max-width: 640px) {
  :root {
    --gutter: 1.25rem;
    --section-y: 3.75rem;          /* 120px between sections, the stated floor */
  }

  .hero { padding-block: 4rem var(--section-y); }
  .hero__h1 { font-size: 1.75rem; }
  .section-h { font-size: 1.375rem; }
  .doc__h1 { font-size: 1.5rem; }

  .figure--portrait { max-width: 240px; }
}

@media (min-width: 641px) {
  .deflist__row { grid-template-columns: 9.5rem minmax(0, 1fr); }
  .deflist__row dt { line-height: 2.2; }
}