/* =========================================================
   Futari Design / MERU — base stylesheet
   Plain CSS, no build step. Reads all values from tokens.css.
   ========================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, dl, dd { margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---------- Focus & accessibility ---------- */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-sm);
  z-index: 100;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-shell-fg);
  color: var(--color-shell-bg);
  font-family: var(--font-body);
  font-size: var(--type-small);
  transition: top var(--duration-fast) var(--ease-standard);
}
.skip-link:focus { top: var(--space-sm); }

.font-display { font-family: var(--font-display); font-weight: 400; }

/* ---------- Shell (Futari — dark) ---------- */
body.shell {
  background: var(--color-shell-bg);
  color: var(--color-shell-fg);
}

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--edge-padding);
  padding-top: calc(var(--space-md) + var(--header-safe-top));
  gap: var(--space-md);
}
/* Transparent overlay, same as before fixed positioning was added — the
   hero/project-hero image scrims already darken the top edge, so no extra
   header background is needed. Text color still just follows the page
   (light on the dark shell, dark on the light About page). */
[data-page="meru"] .site-header { color: var(--color-shell-fg); }

.wordmark {
  font-family: var(--font-wordmark);
  font-weight: 700;
  font-size: var(--type-small);
  letter-spacing: var(--wordmark-tracking);
  text-transform: uppercase;
  padding: var(--space-2xs) 0;
}
.wordmark--small { font-size: var(--type-small); letter-spacing: var(--nav-tracking); }

.site-nav { display: flex; gap: var(--space-md); }
.site-nav a {
  font-size: var(--type-small);
  letter-spacing: var(--nav-tracking);
  text-transform: uppercase;
  padding: var(--space-xs) var(--space-2xs);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  opacity: 0.85;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.site-nav a:hover, .site-nav a:focus-visible { opacity: 1; }

/* Mobile hamburger toggle — hidden entirely on desktop, where the nav stays
   the plain inline transparent overlay it always was. */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle:hover,
.nav-toggle:active,
.nav-toggle:focus {
  background: transparent;
  box-shadow: none;
}
.nav-toggle__bar {
  display: block;
  width: 20px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--duration-fast) var(--ease-standard);
}

/* ---------- Hero (Futari homepage) ---------- */
.hero {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--color-shell-bg) 0%, rgba(21, 19, 15, 0.4) 40%, rgba(21, 19, 15, 0.12) 100%),
    linear-gradient(to bottom, rgba(13, 12, 10, 0.35) 0%, rgba(13, 12, 10, 0) 30%);
}
.hero__content {
  position: relative;
  z-index: 2;
  padding: var(--space-lg) var(--edge-padding) var(--space-xl);
  padding-bottom: calc(var(--space-xl) + var(--footer-safe-bottom));
  max-width: var(--content-max);
}
.eyebrow {
  font-size: var(--type-small);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--color-shell-fg-muted);
  margin-bottom: var(--space-sm);
}

/* Line-mask reveal: a restrained load-in for the hero statement. */
.line-mask { display: block; overflow: hidden; }
.line-inner {
  display: block;
  transform: translateY(105%);
  animation: line-reveal var(--duration-signature) var(--ease-breathing) forwards;
  animation-delay: calc(var(--i, 0) * 130ms + 250ms);
}
@keyframes line-reveal {
  to { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .line-inner { transform: none; animation: none; }
}

.hero__statement {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: normal;
  font-size: var(--type-hero-statement);
  line-height: 1.22;
  max-width: 40ch;
}

/* ---------- Footer ---------- */
/* Just the copyright line now (the FUTARI wordmark was dropped everywhere),
   so it sits at the right edge; padding is trimmed so it sits close to the
   page/viewport edge rather than floating in a tall block of its own. */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-md) var(--edge-padding);
  border-top: 1px solid var(--color-shell-border);
  font-size: var(--type-small);
  color: var(--color-shell-fg-muted);
}
.site-footer.meru-zone {
  background: var(--color-meru-bg);
  color: var(--color-meru-fg-muted);
  border-top-color: var(--color-meru-border);
}
/* MERU footer keeps two items — "Back to Futari" centered, copyright at the
   right — so it gets its own three-column layout instead of flex-end. */
.project-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-md);
}
.project-footer > a { grid-column: 2; justify-self: center; }
.project-footer > p { grid-column: 3; justify-self: end; }

/* Homepage footer: pinned to the bottom of the single hero screen instead of
   ending a long page, so it needs to be compact and safe-area aware rather
   than the larger closing-footer padding used on MERU/About. */
[data-page="home"] .site-footer {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  padding: var(--space-sm) var(--edge-padding);
  padding-bottom: calc(var(--space-sm) + var(--footer-safe-bottom));
  border-top: none;
}

/* =========================================================
   MERU project page
   ========================================================= */

.project-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  background: var(--color-shell-bg);
}
.project-hero__media { position: absolute; inset: 0; overflow: hidden; }
.project-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.project-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--color-shell-bg) 0%, rgba(21, 19, 15, 0.3) 45%, rgba(21, 19, 15, 0.1) 100%),
    linear-gradient(to bottom, rgba(13, 12, 10, 0.4) 0%, rgba(13, 12, 10, 0) 30%);
}
.project-hero__content {
  position: relative;
  z-index: 2;
  padding: var(--space-2xl) var(--edge-padding) var(--space-xl);
  color: var(--color-shell-fg);
}
/* Afacad's "M" carries noticeably more left-side-bearing than Manrope's "F"
   above it — the two lines' boxes already share the exact same left edge
   (no margin/padding/transform differs between them), but the inked glyph
   starts visibly later. This nudges the ink back to match, scaled to the
   heading's own font-size so it holds at every breakpoint. */
.project-hero__content h1 { font-size: var(--type-hero); line-height: var(--leading-tight); margin-left: -0.08em; }

/* ---------- Project introduction: editorial frame, still on the dark shell ---------- */
.project-intro {
  background: var(--color-shell-bg-deep);
  color: var(--color-shell-fg);
  padding: var(--space-2xl) var(--edge-padding);
  padding-top: calc(var(--space-2xl) + var(--header-safe-top));
}
.project-intro__grid {
  max-width: var(--content-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--space-lg);
}
.project-intro__meta { display: flex; flex-direction: column; gap: var(--space-sm); }
.project-intro__meta dt {
  font-size: var(--type-small);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--color-shell-fg-muted);
  margin-bottom: var(--space-2xs);
}
.project-intro__meta dd {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--type-body-lg);
  line-height: var(--leading-snug);
}
.project-intro__award { white-space: nowrap; }
.project-intro__body p {
  font-size: var(--type-body-lg);
  max-width: 54ch;
  color: var(--color-shell-fg);
}

@media (min-width: 56rem) {
  .project-intro__grid { grid-template-columns: 0.8fr 1.2fr; }
}

/* ---------- Bridge: the single signature transition ---------- */
/* A full-bleed warm scene image carries Futari from the dark shell into
   the MERU material world — a light top blend keeps the seam with the dark
   section above from feeling abrupt; no heavy overlay otherwise, since
   nothing sits on top of the image itself. Its caption now lives in the
   copy flow immediately below (see .meru-copy), not on the image. */
.bridge {
  position: relative;
  min-height: 90vh;
  overflow: hidden;
  background: var(--color-meru-bg);
}
.bridge__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform-origin: bottom center;
}
.bridge__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.bridge__vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(13, 12, 10, 0.4) 0%, rgba(13, 12, 10, 0) 16%);
}

/* ---------- MERU zone (warm, tactile) ---------- */
.meru-zone { background: var(--color-meru-bg); color: var(--color-meru-fg); }

/* ---------- Meru content flow: one unified rhythm ---------- */
/* Every image and every paragraph in this sequence carries the same
   margin-top. Sections have no padding of their own, so the value collapses
   cleanly across section boundaries too — image->text, text->image and
   image->image all land on the same beat, whether or not a <section> wrapper
   sits between them.
   flow-root is load-bearing here: without it, the first child's margin-top
   collapses straight through .meru-flow's own top edge and out past the
   bridge image, exposing <body>'s dark background as a black bar instead of
   this section's own beige one. */
.meru-flow { display: flow-root; }
.image-block { padding: 0; }
.image-block__media {
  width: 100%;
  height: 85vh;
  overflow: hidden;
  margin-top: var(--rhythm-gap);
}
.image-block__media img { width: 100%; height: 100%; object-fit: cover; }

/* The cards photo and the closing outdoor scene sit back to back, no copy
   between them — that pairing reads better tight, not on the shared rhythm. */
#ritual .image-block__media { margin-top: 0; }

/* A wide, centered editorial column — text stays left-aligned inside it,
   only the block itself is centered on the page. Sized and weighted so the
   three paragraphs read as real body copy, not small image captions. */
.meru-copy {
  margin-top: var(--rhythm-gap);
  margin-inline: auto;
  max-width: 54rem;
  padding-inline: var(--edge-padding);
  font-size: var(--type-copy);
  line-height: var(--leading-body);
  font-weight: 400;
  color: var(--color-meru-fg-muted);
}

/* =========================================================
   About page — warm/light, matching the MERU project-detail content
   area rather than the dark Futari shell.
   ========================================================= */
body[data-page="about"] {
  background: var(--color-meru-bg);
  color: var(--color-meru-fg);
}

/* Left image, right text on desktop; stacked image-then-text on mobile
   (default grid-template-columns: 1fr already puts them in that source
   order). The full square photo is shown uncropped — aspect-ratio keeps
   it square at every width, and object-fit: contain guarantees nothing
   is cropped even if the source isn't perfectly square. */
.about-content {
  padding: var(--space-xl) var(--edge-padding);
  padding-top: calc(var(--space-xl) + var(--header-height));
  max-width: var(--content-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--space-xl);
}
.about-photo__frame {
  width: 100%;
  max-width: 30rem;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
}
.about-photo__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.about-content__text p {
  font-size: var(--type-body-lg);
  color: var(--color-meru-fg-muted);
  max-width: 30rem;
}

@media (min-width: 56rem) {
  .about-content { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   Scroll reveal (progressive enhancement — see main.js)
   ========================================================= */
/* --i lets any element opt into a small extra stagger delay; elements
   that don't set it default to 0, so this is a no-op everywhere else. */
html.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--duration-slow) var(--ease-standard),
              transform var(--duration-slow) var(--ease-standard);
  transition-delay: calc(var(--i, 0) * 110ms);
}
html.reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }

/* The signature moment: a panel rises into place rather than fading.
   The one true "signature" on the site — the Futari -> MERU bridge. */
html.reveal-ready .bridge__media[data-reveal] {
  clip-path: inset(0 0 22% 0);
  transform: scale(1.06);
  transition: clip-path var(--duration-signature) var(--ease-breathing),
              transform var(--duration-signature) var(--ease-breathing);
}
html.reveal-ready .bridge__media[data-reveal].is-visible {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}

/* Hero load-in: a quieter scale-only settle, distinct from the bridge
   signature — no clip-path, so the two moments don't read as the same
   gesture. */
html.reveal-ready .hero__media[data-reveal] {
  transform: scale(1.03);
  transition: transform var(--duration-signature) var(--ease-breathing);
}
html.reveal-ready .hero__media[data-reveal].is-visible {
  transform: scale(1);
}

/* Main content images: a light clip + scale settle as each one enters
   the viewport — quiet enough to feel like breathing, not a parallax
   effect. */
html.reveal-ready .image-block__media[data-reveal] {
  clip-path: inset(0 0 6% 0);
  transition: clip-path var(--duration-slow) var(--ease-standard);
}
html.reveal-ready .image-block__media[data-reveal].is-visible {
  clip-path: inset(0 0 0 0);
}
html.reveal-ready .image-block__media[data-reveal] img {
  transform: scale(1.02);
  transition: transform var(--duration-slow) var(--ease-standard);
}
html.reveal-ready .image-block__media[data-reveal].is-visible img {
  transform: scale(1);
}

/* =========================================================
   Responsive edge cases
   ========================================================= */
@media (max-width: 34rem) {
  /* FUTARI and the hamburger stay a single row, vertically centered —
     .site-header's existing align-items: center + justify-content:
     space-between already does this once .site-nav is taken out of flow
     below. */
  .site-header { flex-wrap: nowrap; }

  .nav-toggle { display: inline-flex; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child {
    transform: translateY(3.25px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child {
    transform: translateY(-3.25px) rotate(-45deg);
  }

  /* Closed by default: an off-screen (opacity/translate) panel rather than
     the old wrap-onto-a-second-row layout, so it never sits on top of Hero
     or MERU intro content until explicitly opened. The background itself
     carries the transparency (color-mix, 60% of the shell color) rather
     than the container's own opacity, so the Hero shows through faintly
     while MERU/About text and the close icon stay fully opaque — the
     container's opacity is only ever 0 or 1, used purely to show/hide the
     panel, never as the translucency mechanism. A very light blur keeps
     whatever's behind (Award, Category, body copy) from reading through as
     legible text without going full frosted-glass. */
  .site-nav {
    position: fixed;
    inset-inline: 0;
    top: var(--header-height);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    width: 100%;
    padding: var(--space-lg) var(--edge-padding);
    background: color-mix(in srgb, var(--color-shell-bg) 60%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--color-shell-fg);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity var(--duration-base) var(--ease-standard),
                transform var(--duration-base) var(--ease-standard);
    z-index: 45;
  }
  .site-nav.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  /* Full opacity for the menu's own links, regardless of the desktop nav's
     0.85/hover-to-1 treatment (.site-nav a, above) — the translucency here
     lives entirely in the panel's background, not in the text. */
  .site-nav a { padding-inline: 0; font-size: var(--type-body-lg); opacity: 1; }

  /* Lock the page behind the open menu so it can't scroll underneath it. */
  html.nav-locked,
  html.nav-locked body { overflow: hidden; }

  /* Tighten the shared MERU rhythm a little further on narrow screens, per
     the same single token used everywhere else. The copy column's max-width
     is left alone here — at this viewport it's already far below 54rem, so
     the text naturally uses the full available width minus edge padding. */
  :root { --rhythm-gap: clamp(1.75rem, 1.5rem + 2vw, 2.25rem); }

  .image-block__media { height: 62vh; }
  .bridge { min-height: 78vh; }

  /* Product/close-up/cards shots: a fixed vh crops hard on tall portrait
     screens, so let them keep their natural ratio instead. Scene photos
     (bridge, ritual) stay full-bleed cover. */
  .image-block--contain .image-block__media { height: auto; }
  .image-block--contain .image-block__media img { height: auto; object-fit: contain; }

  /* MERU hero: keep full-bleed cover, just re-aim the crop so the device
     and card stay in frame on a narrow portrait viewport. Desktop crop
     (center 45%) is untouched. */
  .project-hero__media img { object-position: 64% 38%; }

  /* Homepage hero: same source photo, same fix — re-aim so the device and
     card aren't cropped down to a sliver. Desktop crop (center 40%) is
     untouched. */
  .hero__media img { object-position: 64% 36%; }

  .about-photo__frame { width: 85vw; max-width: none; }

  /* About: tighten the nav->photo gap, the photo->text gap, and the
     trailing space before the footer, without touching the desktop
     grid/padding. Desktop's padding-top (space-xl + header-height) leaves
     a full space-xl (96px) of clearance below the header on top of what
     the header itself already reserves — replaced here with just enough
     to clear the header plus a deliberate 38px, instead of inheriting that
     96px as extra blank space too. */
  .about-content {
    padding-top: calc(var(--header-height) + 38px);
    gap: 38px;
    padding-bottom: var(--space-md);
  }
}