/* ==========================================================================
   zCanvas — app-wide root CSS. Loaded on EVERY page, before any zBrush.
   Owns: design tokens, base typography, the page shell, header + footer.
   Page-level components live in styles/site.css (zBrush: [site]).
   ========================================================================== */

:root {
  /* Paper & ink */
  --paper:        #f7f5f1;
  --paper-warm:   #efebe4;
  --ink:          #16140f;
  --ink-soft:     #3c382f;
  --muted:        #7a7266;
  --line:         #ddd7cc;
  --line-soft:    #e9e4da;
  --accent:       #8c2f22;
  --dark:         #14120f;
  --dark-2:       #1d1a16;

  /* Type */
  --serif: "Frank Ruhl Libre", "Times New Roman", Georgia, serif;
  --sans:  "Assistant", -apple-system, "Segoe UI", system-ui, sans-serif;

  /* Rhythm */
  --page:     1180px;
  --page-narrow: 780px;
  --gutter:   clamp(20px, 5vw, 56px);
  --section-y: clamp(56px, 8vw, 116px);

  --ease: cubic-bezier(.2, .6, .2, 1);

  /* Re-skin the framework baseline (zbase.css) so any chrome we don't style
     by hand — signals, focus rings, default quote/code tints — lands in this
     site's palette instead of zOS's default lime/violet. */
  --color-primary:   #8c2f22;
  --color-secondary: #7a7266;
  --color-info:      #4a5b6b;
  --color-success:   #4f6b53;
  --color-warning:   #9a7638;
  --color-error:     #8c2f22;

  /* zbase's modal/card chrome reads these two with a #fff / #1d2230 fallback.
     Naming them here is the documented re-skin seam — otherwise every overlay
     lands stark white on a warm-paper site. */
  --page-bg: var(--paper);
  --text:    var(--ink);

  /* Form fields read their own --zinput-* tokens before falling back to
     zbase's own surface palette, which is dark — a navy input box on a paper
     card. Naming them here is the seam. */
  --zinput-bg:          #ffffff;
  --zinput-bg-focus:    #ffffff;
  --zinput-color:       var(--ink);
  --zinput-placeholder: var(--muted);
  --zinput-focus:       var(--accent);
}

/* zbase pins the modal's close button to the physical right, which lands on
   top of the heading on an RTL page. Logical inset puts it on the reading
   END edge in both directions. */
.zModal-close {
  right: auto;
  inset-inline-end: 12px;
}

/* zbase gives every <blockquote> a tinted panel with a rounded left border.
   This site sets its own quote rule per component, so strip the baseline
   once here rather than fighting it in each place. */
blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

/* ── Reset-ish ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -.005em;
}

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

blockquote { margin: 0; }

::selection { background: var(--ink); color: var(--paper); }

/* Keyboard focus stays visible, but only for keyboard users. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ── Page shell ────────────────────────────────────────────────────────── */
.zVaF-content { display: block; }

/* Every top-level section shares one measure. */
.section {
  max-width: var(--page);
  margin-inline: auto;
  padding: var(--section-y) var(--gutter);
}

/* Two sections in a row would otherwise stack two full paddings into a dead
   band. One section's worth of air is the break; a second is a hole. */
.section + .section { padding-top: calc(var(--section-y) * .38); }

/* Bifrost chrome we don't want on a public site */
zbifrostbadge,
.zConnection { display: none !important; }

/* ── Site header ───────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 4vw, 48px);
  flex-wrap: wrap;
  padding: 18px var(--gutter);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}

.site-brand {
  font-family: var(--serif);
  font-size: 1.32rem;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: opacity .25s var(--ease);
}
.site-brand:hover { opacity: .62; }

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 34px);
  flex-wrap: wrap;
}

.nav-link {
  position: relative;
  font-size: .95rem;
  font-weight: 400;
  color: var(--ink-soft);
  padding-block: 4px;
  white-space: nowrap;
  transition: color .25s var(--ease);
}
.nav-link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: var(--edge, right);
  transition: transform .3s var(--ease);
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { transform: scaleX(1); }

.nav-lang {
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 14px;
}
.nav-lang::after { display: none; }
.nav-lang:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Current section marker — the `nav-at-<active>` class the header pattern
   stamps from its %active slot. */
.nav-at-theatre .nav-theatre,
.nav-at-film    .nav-film,
.nav-at-writing .nav-writing,
.nav-at-about   .nav-about { color: var(--ink); }
.nav-at-theatre .nav-theatre::after,
.nav-at-film    .nav-film::after,
.nav-at-writing .nav-writing::after,
.nav-at-about   .nav-about::after { transform: scaleX(1); }

/* ── Site footer ───────────────────────────────────────────────────────── */
.site-footer {
  /* No top margin: the last section already ends on its own bottom padding,
     and stacking both leaves a dead band above the footer. */
  padding: clamp(48px, 7vw, 88px) var(--gutter);
  background: var(--dark);
  color: color-mix(in srgb, var(--paper) 76%, transparent);
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
}

.foot-name {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  color: var(--paper);
  letter-spacing: .01em;
}

.foot-links {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  justify-content: center;
}

.foot-link,
.foot-mail a {
  font-size: .93rem;
  color: color-mix(in srgb, var(--paper) 72%, transparent);
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.foot-link:hover,
.foot-mail a:hover {
  color: var(--paper);
  border-bottom-color: color-mix(in srgb, var(--paper) 45%, transparent);
}
.foot-mail p { margin: 0; }

.foot-note {
  font-size: .78rem;
  letter-spacing: .06em;
  color: color-mix(in srgb, var(--paper) 42%, transparent);
  margin-top: 10px;
}

/* ── Direction helpers ─────────────────────────────────────────────────── */
/* HE is the default (dir="rtl" on <html>); a single element can opt out. */
.ltr { direction: ltr; text-align: start; }
.rtl { direction: rtl; text-align: start; }