/* ============================================================
   garden.css — Japanese-garden visual language for the sub-pages
   ------------------------------------------------------------
   Loaded AFTER wireframe.css. It re-declares the wf-* design tokens
   (so every existing component inherits the new palette without markup
   changes) and then restyles the handful of components that need more
   than a recolor to match the 3D garden on the homepage.

   Vocabulary borrowed from the garden:
     washi    warm paper surfaces with a fibre grain
     sumi     ink-dark text
     timber   the signboard frames — hairline rules and outlines
     stone    footings, kerbs, the plinth — muted neutral fills
     vermillion  the torii — a sparing secondary accent
     hanko    the small square seal mark on each signboard
     rake     the concentric gravel grooves — section dividers
   ============================================================ */

/* ---- tokens ------------------------------------------------ */

:root, [data-theme="dark"] {
  /* Night garden: sumi ink and lantern light */
  --wf-bg: #16181a;
  --wf-bg-alt: #101214;
  --wf-surface: #1f2124;
  --wf-border: #34383d;
  --wf-text: #ece3d4;
  --wf-text-muted: #9a958c;
  --wf-primary: #00E5FF;
  --wf-primary-dim: rgba(0,229,255,0.14);
  --wf-overlay-start: rgba(16,18,20,0.66);
  --wf-overlay-end: rgba(16,18,20,0.86);
  --wf-header-bg: rgba(18,20,22,0.92);
  --wf-shadow: rgba(0,0,0,0.55);
  --wf-stripe: rgba(255,255,255,0.04);
  --wf-diagram-fill: #16181a;

  --g-washi: #1f2124;
  --g-timber: #6b5540;
  --g-timber-line: rgba(160,130,96,0.30);
  --g-stone: #3a3e43;
  --g-moss: #3f5c42;
  --g-vermillion: #c4533c;
  --g-lantern: #ffb45c;
  --g-fibre: 0.05;         /* paper grain opacity */
  --g-lift: 0 10px 28px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.4);
  --g-rest: 0 2px 10px rgba(0,0,0,0.35);
}

[data-theme="light"] {
  /* Day garden: washi paper and raked gravel */
  --wf-bg: #efe9dc;
  --wf-bg-alt: #e4dccc;
  --wf-surface: #f9f4e8;
  --wf-border: #d8cdb6;
  --wf-text: #24201a;
  --wf-text-muted: #6b6255;
  /* Deepened from the brand cyan: reads as the same accent but holds
     contrast as text on warm paper, where #00B8D4 goes muddy. */
  --wf-primary: #0a6e7e;
  --wf-primary-dim: rgba(10,110,126,0.10);
  --wf-overlay-start: rgba(239,233,220,0.58);
  --wf-overlay-end: rgba(239,233,220,0.82);
  --wf-header-bg: rgba(249,244,232,0.93);
  --wf-shadow: rgba(60,48,32,0.14);
  --wf-stripe: rgba(60,48,32,0.05);
  --wf-diagram-fill: #efe9dc;

  --g-washi: #f9f4e8;
  --g-timber: #8a6b4a;
  --g-timber-line: rgba(138,107,74,0.32);
  --g-stone: #b9b3a6;
  --g-moss: #6d7d4e;
  --g-vermillion: #c7402c;
  --g-lantern: #d79a3c;
  --g-fibre: 0.055;
  --g-lift: 0 12px 30px rgba(60,48,32,0.16), 0 2px 6px rgba(60,48,32,0.10);
  --g-rest: 0 2px 10px rgba(60,48,32,0.08);
}

/* ---- paper ------------------------------------------------- */

/* Washi fibre grain. Inline SVG turbulence: no extra request, and it
   tiles seamlessly at any viewport size. */
body {
  background-color: var(--wf-bg);
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: var(--g-fibre);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23f)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

/* ---- header: paper with a timber hairline ------------------ */

.wf-header {
  border-bottom: 1px solid var(--g-timber-line);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04), var(--g-rest);
  backdrop-filter: blur(10px);
}

.wf-nav-links a {
  letter-spacing: 0.01em;
}
.wf-nav-links a::after {
  /* the accent underline from the signboards */
  background: var(--wf-primary);
  height: 2px;
}

/* ---- hero: garden renders ---------------------------------- */

/* Each hero is a frame from the homepage's own 3D garden, so the
   sub-pages sit inside the same world rather than beside it. */
.bg-building,
.bg-office,
.bg-manufacturing,
.bg-space,
.bg-garden-court,
.bg-garden-approach,
.bg-garden-gravel,
.bg-garden-pond {
  background-attachment: scroll;
  background-position: center 38%;
}

/* One render per hero: --wf-overlay-start/end already darken for the night
   theme, which is how the site's original photo heroes worked. */
.bg-building, .bg-garden-court {
  background-image: linear-gradient(var(--wf-overlay-start), var(--wf-overlay-end)), url('../img/garden-court.jpg');
}
.bg-office, .bg-garden-approach {
  background-image: linear-gradient(var(--wf-overlay-start), var(--wf-overlay-end)), url('../img/garden-approach.jpg');
}
.bg-manufacturing, .bg-garden-gravel {
  background-image: linear-gradient(var(--wf-overlay-start), var(--wf-overlay-end)), url('../img/garden-gravel.jpg');
}
.bg-space, .bg-garden-pond {
  background-image: linear-gradient(var(--wf-overlay-start), var(--wf-overlay-end)), url('../img/garden-pond.jpg');
}

.wf-hero {
  border-bottom: 1px solid var(--g-timber-line);
}
.wf-hero h1 {
  letter-spacing: -0.015em;
}
.wf-hero .subtitle {
  max-width: 46rem;
}

/* ---- label: the hanko seal mark ---------------------------- */

.wf-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  border: none;
  background: none;
  padding: 0;
  color: var(--wf-text-muted);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.72rem;
}
.wf-label::before {
  content: "";
  width: 0.62em;
  height: 0.62em;
  flex: none;
  border: 2px solid var(--g-vermillion);
  transform: rotate(0deg);
}

/* ---- section titles: the signboard underline --------------- */

.wf-section-title {
  letter-spacing: -0.01em;
}
.wf-section-title::after {
  content: "";
  display: block;
  width: 3.2rem;
  height: 3px;
  margin-top: 0.7rem;
  background: var(--wf-primary);
  border-radius: 2px;
}
.text-center .wf-section-title::after,
.wf-section-title.text-center::after { margin-left: auto; margin-right: auto; }

/* Raked-gravel divider between alternating sections */
.wf-section + .wf-section { position: relative; }
.wf-section + .wf-section::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(100%, var(--wf-max-w));
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    var(--g-timber-line) 0 22px,
    transparent 22px 30px
  );
}

/* ---- cards: washi panels in timber frames ------------------ */

.wf-card {
  background: var(--g-washi);
  border: 1px solid var(--g-timber-line);
  border-radius: 10px;
  box-shadow: var(--g-rest);
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s;
  position: relative;
  overflow: hidden;
}
/* the keiko rule printed just inside the panel edge */
.wf-card::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--g-timber-line);
  border-radius: 5px;
  pointer-events: none;
  opacity: 0.55;
}
.wf-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--g-lift);
  border-color: var(--wf-primary);
}
.wf-card > * { position: relative; z-index: 1; }

.wf-card-icon, .wf-feature-icon {
  background: var(--wf-primary-dim);
  border: 1px solid var(--g-timber-line);
  border-radius: 50%;
}

/* ---- price: give the numerals presence -------------------- */

.price {
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.02em;
}

/* ---- buttons ---------------------------------------------- */

.wf-btn {
  border-radius: 6px;
  letter-spacing: 0.01em;
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, background .2s, color .2s;
}
.wf-btn-primary {
  box-shadow: 0 3px 12px color-mix(in srgb, var(--wf-primary) 35%, transparent);
}
.wf-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--wf-primary) 42%, transparent);
}
.wf-btn-outline {
  border-color: var(--g-timber);
  color: var(--wf-text);
}
.wf-btn-outline:hover {
  border-color: var(--wf-primary);
  color: var(--wf-primary);
  background: var(--wf-primary-dim);
  transform: translateY(-2px);
}

/* ---- feature list ticks ------------------------------------ */

.wf-features-list li::before,
.wf-feature-icon { color: var(--wf-primary); }

/* ---- timeline: stepping stones ----------------------------- */

.wf-timeline-item::before {
  background: var(--g-stone);
  border: 2px solid var(--wf-primary);
}

/* ---- footer: the wall coping ------------------------------- */

.wf-footer {
  background: var(--wf-bg-alt);
  border-top: 3px solid var(--g-timber);
  box-shadow: inset 0 1px 0 var(--g-timber-line);
}
.wf-footer-bottom {
  border-top: 1px solid var(--g-timber-line);
}

/* ---- cookie banner ----------------------------------------- */

.cookie-banner {
  background: var(--g-washi);
  border-top: 1px solid var(--g-timber-line);
  box-shadow: 0 -8px 26px var(--wf-shadow);
}

/* ---- motion ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .wf-card, .wf-btn, .wf-btn-primary, .wf-btn-outline { transition: none; }
  .wf-card:hover, .wf-btn-primary:hover, .wf-btn-outline:hover { transform: none; }
}

/* ---- narrow screens ---------------------------------------- */

@media (max-width: 640px) {
  .wf-card::after { inset: 5px; }
  .wf-section + .wf-section::before { width: calc(100% - 2rem); }
}