/* ── Font Imports (managed by Style Editor) ── */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap');
/* ── End Font Imports ── */

/*
 * theme.css — The Gentle Studio
 * CSS variables — edit here or use /pages/style-editor.html
 */

/* ── Colour Palette ───────────────────────────────────────── */
:root {
  --color-bg:        #dfdfdf;
  --color-surface:   #ffffff;
  --color-faint:     #ffffff;
  --color-border:    transparent;
  --color-ink:       #1a1814;
  --color-accent:    #3d3830;
  --color-muted:     #6b6b6b;
  --color-placeholder: #c2c2c2;   /* hint text in empty fields — must read as
                                     unfilled, not as a value someone typed */
  --color-highlight: #1a1814;
  --color-danger:    #8b3a3a;
  --color-success:   #3a6b5a;
  --color-overlay:   #ffffff;

  /* CMS overlays — ink-tinted, used over thumbnails and behind modals */
  --color-scrim:      rgba(26,24,20,.82);
  --color-scrim-soft: rgba(26,24,20,.72);

  /* Veils — the black wash over photography: caption gradients and shadows.
     A four-step ladder; every overlay on the public site uses one of these. */
  --veil-faint:  rgba(0,0,0,0.08);
  --veil-soft:   rgba(0,0,0,0.16);
  --veil-medium: rgba(0,0,0,0.32);
  --veil-strong: rgba(0,0,0,0.60);

  /* How far forward a project's cover comes behind the prev/next titles at
     the end of a project page. It is hidden until that card is hovered, so
     this is the strength it reaches, not a resting wash. */
  --end-card-cover-opacity: 0.5;

  /* Marks that sit on top of imagery rather than on the page background */
  --color-on-image:       rgba(255,255,255,0.6);
  --color-hairline-light: rgba(255,255,255,0.2);
  --color-media-bg:       #000000;

  /* Backdrop behind layout blocks on project and site pages. The layout editor
     paints its canvas with this too, so an unset layout previews truthfully.
     A layout can override it per page via canvasBg in its layout.json. */
  --color-canvas:         #dfdfdf;

  /* Navigation bar fill. Transparent by default so the bar takes on whatever
     the page behind it is using, including a per-page canvasBg. A layout can
     override it via navBg in its layout.json. */
  --color-nav-bg:         transparent;

  /* CMS toolbar accents — muted tints that group actions on the dark header.
     Three hues; the original five included three sages indistinguishable
     from each other. */
  --color-accent-sage:  #9fbfa8;
  --color-accent-lilac: #b8b0c8;
  --color-accent-sand:  #c0b890;

  /* Monospaced code on the dark raw-CSS surface */
  --color-code: #a8c0a0;
}

/* ── Typography ───────────────────────────────────────────── */
:root {
  --font-display:        'DM Serif Display', Georgia, serif;
  --font-display-weight: 300;
  --font-display-style:  normal;
  --font-mono:           'Bould', monospace;
  --font-mono-weight:    400;

  /* Public-facing sizes — 25% larger than original base sizes */
  --font-size-xs:   9.5px;   /* was 7.5px */
  --font-size-sm:   11.5px;  /* was 9px */
  --font-size-base: 16px;    /* was 13px */
  --font-size-md:   22px;    /* was 18px */
  --font-size-lg:   30px;    /* was 24px */
  --font-size-xl:   60px;    /* was 48px */

  --tracking-wide:  0.22em;
  --tracking-label: 0.16em;
  --tracking-tight: 0.04em;
}

/* ── Spacing & Shape ──────────────────────────────────────── */
:root {
  --radius: 0px;
  --gap-sm: 8px;
  --gap-md: 20px;
  --gap-lg: 48px;
  --gap-xl: 80px;
}

/* ── Motion ───────────────────────────────────────────────── */
:root {
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:  0.18s;
  --duration-normal:0.35s;
  --duration-slow:  0.9s;
}


/* ── Tag Styles (managed by Style Editor) ── */
body h1 {
  font-family: var(--font-display);
  font-size: 96px;
  font-weight: var(--font-display-weight);
  font-style: normal;
  line-height: 0.80;
  letter-spacing: -0.010em;
  color: var(--color-ink);
}
body h2 {
  font-family: var(--font-display);
  font-size: 55px;
  font-weight: var(--font-display-weight);
  font-style: normal;
  line-height: 0.80;
  letter-spacing: -0.025em;
  color: var(--color-ink);
}
body h3 {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.5vw, 32px);
  font-weight: var(--font-display-weight);
  letter-spacing: -0.020em;
  color: var(--color-ink);
}
body h4 {
  font-family: 'Calendas Plus', sans-serif;
  font-size: clamp(14px, 1.8vw, 22px);
  font-weight: var(--font-display-weight);
  color: var(--color-ink);
}
body p {
  font-family: var(--font-mono);
  font-size: clamp(16px, 1.8vw, 22px);
  font-weight: 300;
  line-height: 0.90;
  color: var(--color-accent);
}
body blockquote {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  line-height: 1.6;
  color: var(--color-accent);
}
body figcaption {
  font-family: var(--font-mono);
  letter-spacing: 0.030em;
  color: var(--color-muted);
}
body small {
  font-family: 'Parking', sans-serif;
  font-size: 10px;
  letter-spacing: 0.030em;
  color: var(--color-muted);
  text-transform: uppercase;
}
body a {
  color: var(--color-ink);
  text-decoration: underline;
}
.nav-link {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.160em;
  color: var(--color-muted);
  text-transform: uppercase;
  text-decoration: none;
}
.nav-logo-text {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.220em;
  text-transform: uppercase;
}
.card-caption-name {
  font-family: 'Calendas Plus', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.100em;
  color: var(--color-accent);
  text-transform: uppercase;
}
.card-caption-id {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.060em;
  color: var(--color-muted);
}
.desc-title {
  font-family: 'Calendas Plus', sans-serif;
  font-size: 44px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.15;
  letter-spacing: -0.075em;
  color: var(--color-ink);
  text-transform: uppercase;
}
.desc-label {
  font-family: 'Calendas Plus', sans-serif;
  font-size: 15px;
  font-style: italic;
  letter-spacing: -0.020em;
  color: var(--color-muted);
  text-transform: lowercase;
}
.desc-val {
  font-family: 'Calendas Plus', sans-serif;
  font-size: 17px;
  letter-spacing: -0.030em;
  text-transform: uppercase;
}
.desc-row {
  line-height: 1.10;
  padding: 1px 0;
  gap: 5px;
}
#scroll-hint {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: 0.100em;
  color: var(--color-muted);
  text-transform: uppercase;
}
.cat-tab {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: 0.160em;
  color: var(--color-muted);
  text-transform: uppercase;
}
.end-label {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.160em;
  color: var(--color-muted);
  text-transform: uppercase;
}
.end-nav a {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: 0.100em;
  color: var(--color-muted);
  text-transform: uppercase;
}
/* ── End Tag Styles ── */


/* ── Mobile Overrides (managed by Style Editor) ── */
@media (max-width: 768px) {
.desc-title {
  font-size: 26px !important;
}
.desc-label {
  font-size: 14px !important;
}
.desc-val {
  font-size: 14px !important;
}
}
/* ── End Mobile Overrides ── */