/* ═══════════════════════════════════════════════════════════════
   glad beltran — EDITORIAL HOME (from canvas frame 03b)
   Standalone stylesheet for index-editorial.html. It does not load
   style.css, so the case study pages are untouched.

   Type:   Post by Displaay (display: Light + Regular, licensed) + Untitled Sans (body)
   Colour: the natural-dye palette from style.css, same token names
   ═══════════════════════════════════════════════════════════════ */

/* --- FONTS --- */

@font-face {
  font-family: 'Post';
  src: url('fonts/post/Post-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Post';
  src: url('fonts/post/Post-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Untitled Sans';
  src: url('fonts/untitledsans/untitled-sans-light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Untitled Sans';
  src: url('fonts/untitledsans/untitled-sans-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Untitled Sans';
  src: url('fonts/untitledsans/untitled-sans-medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

/* --- TOKENS --- */

:root {
  /* NATURAL DYES — two accents, one meaning each:
       woad   = action   (you can act here: nav, buttons, links, arrows; hovers
                          and the title sweep stay in woad too)
       nettle = evidence (results: metrics, stats, the headline figure)
     Everything else is neutral. Dark is the default; light values are under
     html[data-theme="light"]. */
  color-scheme: dark;
  --woad:    #7ea6cc;
  --nettle:  #96c47a;
  --action:   var(--woad);
  --evidence: var(--nettle);
  --response: var(--woad);   /* hover and the title sweep */
  --action-hover: #a3c2de;   /* filled buttons on hover: a lighter woad */
  --on-action: #14120f;  /* text on a filled button */

  /* neutrals */
  --fleece:   #1c1916;   /* page background */
  --shadow:   #ede8e0;   /* body text */
  --ink-soft: #d9d4cc;   /* hero headline */
  --muted:    #a39890;
  --border:   #3a342e;
  --dot:      #4a423c;
  --surface:  #221e1b;
  --chrome:   #2a2622;
  --chrome-line: #3a342e;
  --chrome-dot:  #5a524a;
  --band:       #16283a; /* contact band: night woad */
  --band-muted: #a9bdd0;

  /* type */
  --font-display: 'Post', Georgia, 'Times New Roman', serif;
  --font-body:    'Untitled Sans', 'Post', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;   /* Post supplies the arrows Untitled Sans lacks (← → ↓ ↔ ↗) */

  --fs-hero:    clamp(2.5rem, 1.2rem + 4.2vw, 4.0625rem);   /* 40 → 65px */
  --fs-lede:    clamp(1.125rem, 0.9rem + 0.8vw, 1.5625rem); /* 18 → 25px */
  --fs-h2:      clamp(1.875rem, 1.4rem + 1.4vw, 2.5rem);    /* 30 → 40px */
  --fs-contact: clamp(2rem, 1.1rem + 2.8vw, 3.25rem);       /* 32 → 52px */
  --fs-case:    clamp(1.625rem, 1.2rem + 1.2vw, 2.25rem);   /* 26 → 36px */
  --fs-metric:  clamp(2.75rem, 2rem + 2vw, 3.75rem);        /* 44 → 60px */
  --fs-stat:    clamp(2rem, 1.5rem + 1.4vw, 2.75rem);       /* 32 → 44px */
  --fs-teaser:  clamp(1.375rem, 1.1rem + 0.7vw, 1.625rem);  /* 22 → 26px */

  /* layout */
  --page-max: 1200px;
  --gutter:   clamp(1rem, 0.2rem + 4vw, 7.5rem);            /* 16 → 120px */

  /* Fibonacci spacing, as in style.css */
  --space-xs: 0.618rem;
  --space-sm: 1rem;
  --space-md: 1.618rem;
  --space-lg: 2.618rem;
  --space-xl: 4.236rem;

  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --shot-shadow: 0 16px 40px rgba(24, 22, 20, 0.08), 0 2px 6px rgba(24, 22, 20, 0.05);
}

/* --- BASE --- */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--shadow);
  background: var(--fleece);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--action); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--action); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--action); outline-offset: 3px; border-radius: 2px;
}

.wrap {
  width: 100%;
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute; top: -100%; left: 1rem; z-index: 9999;
  padding: 0.5rem 1rem; border-radius: 2px;
  background: var(--shadow); color: var(--fleece);
  font-size: 0.82rem; font-weight: 400;
}
.skip-link:focus { top: 1rem; }

/* --- BUTTONS --- */

.btn {
  display: inline-flex; align-items: center; gap: 0.4em;
  min-height: 44px; padding: 0 1.25rem; border-radius: 999px;
  font-size: 0.875rem; font-weight: 500; letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn--outline { border: 1px solid var(--action); color: var(--action); }
.btn--outline:hover { background: var(--action); color: var(--on-action); }
.btn--solid { background: var(--action); color: var(--on-action); }

/* --- HEADER --- */

.site-header { border-bottom: 1px solid var(--border); }
.site-header__inner {
  min-height: 88px;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}

.wordmark { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--action); }
.wordmark__name {
  font-family: var(--font-display); font-size: 1.75rem; line-height: 1; letter-spacing: -0.022em;
}
.wordmark__mark { width: 26px; height: 26px; color: var(--shadow); transition: transform 0.9s var(--ease); }
.wordmark:hover .wordmark__mark { transform: rotate(360deg); }

.site-nav { display: flex; align-items: center; gap: 2rem; font-size: 0.9375rem; font-weight: 400; letter-spacing: 0.04em; }
.site-nav a:not(.btn):hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }

/* --- HERO --- */

.hero { padding-block: clamp(2rem, 1rem + 3vw, 3.5rem) clamp(1.5rem, 1rem + 1.5vw, 2.5rem); display: grid; gap: 1.75rem; }

.hero__eyebrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem;
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.status { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--muted); }
.status__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--evidence); }

.hero__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--fs-hero); line-height: 1.06; letter-spacing: -0.025em;
  color: var(--ink-soft); max-width: 16.6em;
  text-wrap: balance;
}
.hero__title .accent { color: var(--evidence); }

.hero__lede {
  font-size: var(--fs-lede); font-weight: 300; line-height: 1.55;
  color: var(--muted); max-width: 34em;
}

/* stats bar */
.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 1.25rem;
  border-top: 1px solid var(--shadow); border-bottom: 1px solid var(--border);
}
.stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.5rem; padding: 1.5rem; }
.stat:first-child { padding-left: 0; }
.stat + .stat { border-left: 1px solid var(--border); }
.stat__value {
  font-family: var(--font-display); font-size: var(--fs-stat); line-height: 1;
  font-weight: 300; letter-spacing: -0.025em; color: var(--evidence);   /* numbers: Light, one tracking value */
}
.stat__label { font-size: 0.875rem; font-weight: 400; color: var(--muted); }

/* --- SECTION HEAD --- */

.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; }
.section-head__title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2); letter-spacing: -0.02em; line-height: 1.1; }
.section-head__meta { font-size: 0.9375rem; font-weight: 400; color: var(--muted); }

/* --- WORK --- */

.work { padding-block: 1.5rem 6rem; display: grid; gap: clamp(3rem, 2rem + 3vw, 4rem); scroll-margin-top: 1rem; }

.case {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: stretch;
  color: inherit;
}
.case--flip .case__media { order: 2; }

/* screenshot in a quiet browser frame */
.case__media { display: flex; align-items: flex-start; }
.case__body { color: inherit; }
.case__body:hover { color: inherit; }
.case__media--center { align-items: center; justify-content: center; padding-inline: clamp(0rem, 2vw, 2.5rem); }

.shot {
  width: 100%;
  background: var(--fleece);
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  box-shadow: var(--shot-shadow);
  transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease);
}
.shot__chrome {
  height: 26px; display: flex; align-items: center; gap: 6px; padding-left: 12px;
  background: var(--chrome); border-bottom: 1px solid var(--chrome-line);
}
.shot__chrome i { width: 8px; height: 8px; border-radius: 50%; background: var(--chrome-dot); }
.shot img { width: 100%; }
.shot--modal { max-width: 480px; }

.case__body { display: flex; flex-direction: column; gap: 1.375rem; padding-block: 1.5rem; }

.case__org { font-size: 0.75rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: -0.75rem; }

.case__eyebrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem;
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.case__eyebrow sup { font-size: 0.6em; line-height: 0; position: relative; top: -0.15em; margin-left: 1px; letter-spacing: 0; }
.case__num { font-family: var(--font-display); font-size: 1rem; letter-spacing: 0; color: inherit; }
.case__status { color: var(--muted); }
.dot { width: 4px; height: 4px; border-radius: 50%; background: var(--dot); }

/* problem statement — dye sweep on hover, as on the live site */
.case__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--fs-case); line-height: 1.15; letter-spacing: -0.015em;
  text-wrap: balance;
  background-image: linear-gradient(to right, var(--response) 0%, var(--response) 50%, var(--shadow) 50%, var(--shadow) 100%);
  background-size: 200% 100%; background-position: right center;
  -webkit-background-clip: text; background-clip: text;
  padding-bottom: 0.18em; margin-bottom: -0.18em;   /* the text is painted by its background, which stops at the box edge; this extends the box so Post's descenders (g, y) aren't cut off */
  -webkit-text-fill-color: transparent;
  transition: background-position 0.4s var(--ease);
}
.case__body:hover .case__title, .case__body:focus-visible .case__title { background-position: left center; transition: background-position 3s var(--ease); }

.metrics { display: grid; gap: 2rem; }
.metrics--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.metrics--pair .metric + .metric { padding-left: 2rem; border-left: 1px solid var(--border); }
.metric { display: flex; flex-direction: column; gap: 0.5rem; }
.metric__value {
  font-family: var(--font-display); font-weight: 300; font-size: var(--fs-metric);
  line-height: 1; letter-spacing: -0.025em; color: var(--evidence);   /* matches the headline figure */
}
.metric__label { font-size: 0.9375rem; font-weight: 400; line-height: 1.45; color: var(--muted); max-width: 26em; }

.case__foot {
  margin-top: auto; padding-top: 1.125rem; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
.case__role { font-size: 0.875rem; font-weight: 400; color: var(--muted); }
.case__body:hover .btn--solid, .case__body:focus-visible .btn--solid { background: var(--action-hover); }

/* --- SCREEN STACKS ---
   Without JS (.tm-ready absent) only the first screen shows. */

.tm { width: 100%; --tm-peek: 30px; }
.tm-stack .tm-frame + .tm-frame { display: none; }

.tm-stack { padding-inline: calc(var(--tm-peek) * 2); }   /* room to peek on both sides; single-screen cards keep it so every row matches */
.tm-ready .tm-stack { display: grid; }
.tm-ready .tm-frame {
  display: block !important;
  grid-area: 1 / 1;               /* every screen shares one cell */
  position: relative;             /* z-index only applies to positioned elements */
  transform-origin: 100% 50%;
  cursor: pointer;
  transition: transform 0.6s var(--ease), opacity 0.45s var(--ease), box-shadow 0.6s var(--ease);
  will-change: transform, opacity;
}
.tm-ready .tm-frame:not(.is-active) { box-shadow: 0 4px 14px rgba(24, 22, 20, 0.06); }
.tm-ready .tm-frame:not(.is-active):not(.is-behind):not(.is-seen) { pointer-events: none; }
.tm-ready .tm-frame.is-behind:hover { --tm-nudge: 14px; box-shadow: 0 10px 28px rgba(24, 22, 20, 0.12); }
/* already-seen screens mirror the waiting ones: anchored left so they shrink toward the left edge */
.tm-ready .tm-frame.is-seen { transform-origin: 0% 50%; }
.tm-ready .tm-frame.is-seen:hover { --tm-nudge: -14px; box-shadow: 0 10px 28px rgba(24, 22, 20, 0.12); }
.tm-ready .tm-frame.is-active.is-end { cursor: default; }
.tm-frame > img {
  aspect-ratio: 2880 / 2490;   /* the shape of the dashboard screens, so every card row is the same height */
  object-fit: contain; background: #f3f3f5;   /* light letterbox: the screens are light UI */
}
.tm-ready .tm-frame.is-active:hover { box-shadow: 0 24px 56px rgba(24, 22, 20, 0.12), 0 4px 10px rgba(24, 22, 20, 0.06); }

.tm-ready .tm-stack:focus-visible { outline: 2px solid var(--action); outline-offset: 6px; border-radius: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- CASE STUDIES: rows down the page --- */

.work-slides { display: grid; gap: clamp(4rem, 3rem + 3vw, 6rem); }

/* --- AI · WRITING · ABOUT --- */

.beyond { background: var(--surface); padding-block: clamp(3.5rem, 2rem + 4vw, 5.5rem); scroll-margin-top: 1rem; }
.beyond__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 1rem + 3vw, 3.5rem); }

.teaser, .about { display: flex; flex-direction: column; gap: 1rem; color: inherit; }
.teaser:hover { color: inherit; }
.teaser__label {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 0.875rem; border-bottom: 1px solid var(--shadow);
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
}
.teaser__label svg { width: 22px; height: 22px; transition: transform 0.9s var(--ease); }
.about:hover .teaser__label svg { transform: rotate(360deg); }
.teaser__label--woad { color: var(--action); }
.teaser__title { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-teaser); line-height: 1.3; }
.teaser:hover .teaser__title { color: var(--response); }
.teaser__meta { font-size: 0.875rem; font-weight: 400; color: var(--muted); }
.teaser__link { font-size: 0.875rem; font-weight: 500; color: var(--action); }
.about p { font-size: 0.9375rem; line-height: 1.7; }

/* --- CONTACT --- */

.contact { background: var(--band); color: #ffffff; padding-block: clamp(4rem, 2.5rem + 5vw, 6rem) 3rem; scroll-margin-top: 1rem; }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(2.5rem, 1rem + 5vw, 5rem); align-items: end; }
.contact__intro { display: grid; gap: 1rem; }
.contact__label { font-family: var(--font-body); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--band-muted); }
.contact__title { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-contact); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.contact__links { list-style: none; font-size: 1.125rem; font-weight: 400; }
.contact__links li { border-top: 1px solid rgba(255, 255, 255, 0.25); }
.contact__links li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
.contact__links a { display: flex; justify-content: space-between; padding: 1rem 0; color: #ffffff; transition: padding 0.3s var(--ease), color 0.2s ease; }
.contact__links a:hover { color: #ffffff; padding-inline: 0.5rem; }
.contact a:focus-visible { outline-color: #ffffff; }

.site-footer {
  margin-top: clamp(3rem, 2rem + 4vw, 4rem);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem;
  font-size: 0.75rem; letter-spacing: 0.06em; color: var(--band-muted);
}

/* --- CURSOR LABEL --- */

.cursor-label {
  position: fixed; z-index: 100; pointer-events: none;
  padding: 0.28rem 0.65rem; border-radius: 2px;
  background: var(--shadow); color: var(--fleece);
  font-size: 0.68rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; transform: translate(14px, -50%); transition: opacity 0.18s ease;
}
.cursor-label.is-visible { opacity: 1; }

/* --- RESPONSIVE --- */

@media (max-width: 1024px) {
  .beyond__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .case, .contact__grid { grid-template-columns: 1fr; }
  .case--flip .case__media { order: 0; }          /* image always above text */
  .case__body { padding-block: 0; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(odd) { padding-left: 0; }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--border); }
}

@media (max-width: 720px) {
  .site-header__inner { flex-wrap: wrap; padding-block: 1rem; }
  .site-nav { width: 100%; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
  .site-nav .btn { margin-left: auto; }
  .beyond__grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .metrics--pair { grid-template-columns: 1fr; gap: 1.25rem; }
  .metrics--pair .metric + .metric { padding-left: 0; border-left: 0; }
  .stat { padding: 1.25rem 0.75rem; }
}

/* --- REDUCED MOTION --- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* --- LIGHT THEME ---
   Dark is the default. The header toggle sets data-theme="light" on <html>
   and remembers the choice. */

html[data-theme="light"] {
  color-scheme: light;
  --woad:    #22415e;
  --nettle:  #3f6b2c;
  --action-hover: #16304a;   /* a deeper woad */
  --on-action: #ffffff;
  --fleece:   #ffffff;
  --shadow:   #181614;
  --ink-soft: #3d404a;
  --muted:    #4a443d;
  --border:   #e3e0da;
  --dot:      #d4cfc7;
  --surface:  #f7f6f4;
  --chrome:   #edeae5;
  --chrome-line: #dcd8d1;
  --chrome-dot:  #c8c3ba;
  --band:       #22415e;
  --band-muted: #b9c8d6;
}

/* --- THEME TOGGLE --- */

.theme-toggle {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
  border: 1px solid var(--border); border-radius: 50%; background: none; cursor: pointer;
  color: var(--shadow); transition: color 0.2s ease, border-color 0.2s ease;
}
.theme-toggle:hover { color: var(--action); border-color: var(--action); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: none; }                 /* shows the mode you'd switch to */
html[data-theme="light"] .theme-toggle .icon-moon { display: block; }
html[data-theme="light"] .theme-toggle .icon-sun { display: none; }

/* ═══════════════════════════════════════════════════════════════
   TYPE SCALE — 4 sizes (chosen), set by data-scale="4" on <html>
   display · heading · text · label
   The 3-size mapping is kept below for reference; remove data-scale
   entirely to see the original 17-size page.
   Exempt on purpose: the wordmark (it's a logo) and the ² footnote
   marker (sized relative to its line).
   ═══════════════════════════════════════════════════════════════ */

:root {
  --t-display: clamp(2.5rem, 1.6rem + 3vw, 3.5rem);        /* 40 → 56px */
  --t-heading: clamp(1.625rem, 1.25rem + 1.1vw, 2.125rem); /* 26 → 34px */
  --t-text:    1.0625rem;                                  /* 17px */
  --t-label:   0.75rem;                                    /* 12px */
}
html[data-scale="4"] { --sz-heading: var(--t-heading); --sz-teaser: var(--t-heading); }
html[data-scale="3"] { --sz-heading: var(--t-display); --sz-teaser: var(--t-text); }

/* display — the things you want remembered */
html[data-scale] .hero__title,
html[data-scale] .metric__value,
html[data-scale] .contact__title { font-size: var(--t-display); }

/* heading — its own step at 4 sizes; joins display at 3 */
html[data-scale] .section-head__title,
html[data-scale] .case__title,
html[data-scale] .stat__value { font-size: var(--sz-heading); }

/* teaser titles — heading at 4 sizes; drop to text at 3 */
html[data-scale] .teaser__title { font-size: var(--sz-teaser); }

/* text — reading and doing */
html[data-scale] body,
html[data-scale] .hero__lede,
html[data-scale] .site-nav,
html[data-scale] .btn,
html[data-scale] .section-head__meta,
html[data-scale] .metric__label,
html[data-scale] .about p,
html[data-scale] .contact__links,
html[data-scale] .teaser__link { font-size: var(--t-text); }

/* label — wayfinding */
html[data-scale] .hero__eyebrow,
html[data-scale] .stat__label,
html[data-scale] .case__eyebrow,
html[data-scale] .case__num,
html[data-scale] .case__role,
html[data-scale] .teaser__label,
html[data-scale] .teaser__meta,
html[data-scale] .contact__label,
html[data-scale] .site-footer,
html[data-scale] .cursor-label,
html[data-scale] .skip-link { font-size: var(--t-label); }