/* ============================================================
   editorial.css — OlenArc editorial redesign layer
   Layers ON TOP of styles.css. Warm paper, serif headlines,
   mono labels, one warm accent. Shared across pages.
   Load order:  styles.css  →  editorial.css  →  (page hero <style>)
   ============================================================ */

:root {
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --paper:      #F6F4EF;   /* warm paper, replaces cool --gray-50 bg */
  --paper-card: #FFFDF9;   /* warm card surface */
  --paper-wash: #EFEBE1;   /* warm section wash, replaces teal-100 */
  --line-warm:  #E6E1D5;   /* warm hairline, replaces gray-200 */
  --amber:      #E0913C;   /* single warm accent, drawn from the sunrise */
}

body { background: var(--paper); }

/* Serif headlines, Inter stays for body/UI. */
h1, h2 { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.018em; }
h2 { font-weight: 500; }

/* Eyebrows → precise mono labels. */
.eyebrow { font-family: 'IBM Plex Mono', monospace; font-weight: 500; letter-spacing: 0.13em; white-space: nowrap; }
@media (max-width: 600px) { .eyebrow, .hhb-eyebrow { white-space: normal; } }

.lead { color: #4A5462; }

/* Warm retone of section surfaces + cards. */
.section-light { background: var(--paper-card); border-color: var(--line-warm); }
.section-wash  { background: var(--paper-wash); }
.card { background: var(--paper-card); border-color: var(--line-warm); }
.staff-stat { background: var(--paper-card); border-color: var(--line-warm); }
.staff-stat-num { font-family: var(--font-serif); font-weight: 500; }
.card-icon-block { background-color: #EFEBE1; border-bottom-color: var(--amber); }
.hero-meta { border-color: var(--line-warm); }

/* Footer mark — relative path so the preview (and repo) both resolve it. */
.site-footer .brand-mark { background-image: url('../img/logo-mark.svg'); }

/* ---- Header: transparent over a full-bleed hero, solid (warm) on scroll.
   Add class "has-hero" to <body> on any page whose first section is a
   full-bleed hero. ---- */
body.has-hero .site-header { position: fixed; top: 0; left: 0; right: 0;
  background: transparent; border-bottom-color: transparent; backdrop-filter: none; }
body.has-hero .site-header .brand,
body.has-hero .site-header .nav > ul > li > a { color: #fff; }
body.has-hero .site-header .brand-mark { background-image: url('../img/logo-mark-light.svg'); }
body.has-hero .site-header .nav-toggle { color: #fff; border-color: rgba(255,255,255,0.5); }
body.has-hero .site-header .header-cta .btn-primary {
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.55); color: #fff; }
body.has-hero .site-header .header-cta .btn-primary:hover { background: rgba(255,255,255,0.22); }
body.has-hero .site-header .header-cta .btn-ghost { color: rgba(255,255,255,0.72); }

body.has-hero .site-header.scrolled {
  background: rgba(250,248,244,0.92); border-bottom-color: var(--line-warm);
  backdrop-filter: saturate(140%) blur(10px); }
body.has-hero .site-header.scrolled .brand { color: var(--ink); }
body.has-hero .site-header.scrolled .nav > ul > li > a { color: var(--gray-700); }
body.has-hero .site-header.scrolled .brand-mark { background-image: url('../img/logo-mark.svg'); }
body.has-hero .site-header.scrolled .nav-toggle { color: var(--ink); border-color: var(--gray-300); }
body.has-hero .site-header.scrolled .header-cta .btn-primary {
  background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
body.has-hero .site-header.scrolled .header-cta .btn-ghost { color: var(--gray-500); }

/* --- Mobile nav fixes over a photo hero (2026-06) --- */
/* At the top of a photo hero the toggle sat as white text on the base white
   button = invisible. Make it a transparent outline button there. */
body.has-hero .site-header:not(.scrolled):not(.is-open) .nav-toggle { background: transparent; }
/* When the mobile menu is open over a transparent hero header, render a solid,
   readable panel (was overlapping the hero text). Mirror the scrolled look. */
body.has-hero .site-header.is-open {
  background: rgba(250,248,244,0.98); border-bottom-color: var(--line-warm);
  backdrop-filter: saturate(140%) blur(10px); }
body.has-hero .site-header.is-open .brand { color: var(--ink); }
body.has-hero .site-header.is-open .nav > ul > li > a { color: var(--gray-700); }
body.has-hero .site-header.is-open .brand-mark { background-image: url('../img/logo-mark.svg'); }
body.has-hero .site-header.is-open .nav-toggle { color: var(--ink); border-color: var(--gray-300); background: #fff; }

/* ============================================================
   Product case-study components (used on Home + Work)
   ============================================================ */
.wk-feature { display: grid; gap: 60px; align-items: center; margin-top: 64px; }
.wk-feature.wk-img-left  { grid-template-columns: 1.12fr 0.88fr; }
.wk-feature.wk-img-right { grid-template-columns: 0.88fr 1.12fr; }
.wk-kicker { display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem;
  font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--amber);
  margin-bottom: 16px; white-space: nowrap; }
.wk-feature-copy h3 { font-family: var(--font-serif); font-weight: 500; font-size: 1.95rem;
  line-height: 1.12; color: var(--ink); margin: 0 0 14px; }
.wk-feature-copy p { font-size: 1.06rem; line-height: 1.62; color: #4A5462; max-width: 46ch; margin: 0 0 18px; }
.wk-meta { font-family: 'IBM Plex Mono', monospace; font-size: 0.76rem; letter-spacing: 0.03em;
  color: #7A8290; padding-top: 16px; border-top: 1px solid var(--line-warm); margin-bottom: 18px; }
.wk-link { display: inline-block; font-weight: 600; color: var(--ink); text-decoration: none;
  border-bottom: 1.5px solid var(--teal-500); padding-bottom: 2px; }
.wk-link:hover { color: var(--teal-600); }

/* Browser frame for desktop product shots */
.wk-browser { border: 1px solid var(--line-warm); border-radius: 11px; overflow: hidden; background: #fff;
  box-shadow: 0 30px 64px -30px rgba(11,36,71,0.45), 0 6px 16px rgba(11,36,71,0.07); }
.wk-browser-bar { display: flex; align-items: center; gap: 14px; padding: 11px 15px;
  background: #F1EEE7; border-bottom: 1px solid var(--line-warm); }
.wk-dots { display: flex; gap: 7px; }
.wk-dots i { width: 11px; height: 11px; border-radius: 50%; background: #CFCABE; display: block; }
.wk-url { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; color: #8A8270; white-space: nowrap;
  background: #fff; border: 1px solid var(--line-warm); border-radius: 6px; padding: 4px 14px; }
.wk-browser img { width: 100%; display: block; }

/* Phone frames for mobile product shots */
.wk-phones { display: flex; justify-content: center; align-items: flex-end; padding: 8px 0; }
.wk-phone { width: 218px; background: #0B2447; border-radius: 30px; padding: 8px;
  box-shadow: 0 28px 60px -26px rgba(11,36,71,0.55); flex: 0 0 auto; }
.wk-phone-screen { border-radius: 23px; overflow: hidden; aspect-ratio: 9 / 18.5; background: #fff; }
.wk-phone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.wk-phone.wk-back  { transform: rotate(-3deg); margin-right: -42px; z-index: 1; }
.wk-phone.wk-front { transform: rotate(3deg) translateY(-16px); z-index: 2; }
.wk-phone.wk-solo  { width: 240px; }

/* Compact text cards */
.wk-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 72px; }
.wk-textcard { background: var(--paper-card); border: 1px solid var(--line-warm); border-radius: 12px;
  padding: 30px 32px; }
.wk-textcard .wk-kicker { color: var(--teal-600); }
.wk-textcard h3 { font-family: var(--font-serif); font-weight: 500; font-size: 1.45rem; color: var(--ink);
  margin: 0 0 10px; }
.wk-textcard p { font-size: 0.98rem; line-height: 1.58; color: #4A5462; margin: 0 0 16px; }

@media (max-width: 860px) {
  .wk-feature, .wk-feature.wk-img-left, .wk-feature.wk-img-right { grid-template-columns: 1fr; gap: 36px; }
  .wk-feature.wk-img-right .wk-feature-copy { order: 2; }
  .wk-duo { grid-template-columns: 1fr; }
  .wk-phone { width: 180px; }
}

/* ============================================================
   Work-page component retones (case studies, exec box, stats)
   ============================================================ */
.exec-summary-box { background: var(--paper-card); border: 1px solid var(--line-warm);
  border-left: 3px solid var(--amber); }
.exec-summary-box .exec-eyebrow { font-family: 'IBM Plex Mono', monospace; color: var(--amber); }
.exec-summary-box li::before { color: var(--amber); }

.case .case-sector { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--teal-600); }
.case h2 { font-family: var(--font-serif); font-weight: 500; }

.deploy-stats { font-family: 'IBM Plex Mono', monospace; }
.deploy-stats > span + span { border-left-color: var(--line-warm); }

/* Cool inline "deployment-fact" notes → warm editorial notes */
.deployment-fact { background: var(--paper-card) !important; border-left-color: var(--amber) !important; }

/* Screenshot figures inside case studies */
.screenshot-caption { font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.02em; }

/* The hand-built calendar/workflow mock cards on warm paper */
.case-hero-mock { background: var(--paper-card); border: 1px solid var(--line-warm); border-radius: 12px; }

/* When a product frame (browser/phone) sits in a case-summary art slot,
   drop the base <img> chrome so the frame is the only frame. */
.case-summary-art .wk-browser, .case-summary-art .wk-phone { width: 100%; }
.case-summary-art .wk-phone { max-width: 240px; }
.case-summary-art .wk-browser img,
.case-summary-art .wk-phone-screen img { max-width: none; border: 0; border-radius: 0; box-shadow: none; }
.case-summary-art .wk-browser img { object-fit: fill; }

/* ---- About page ---- */
.media-card { background: var(--paper-card); border-color: var(--line-warm); }
a.media-card:hover { border-color: var(--amber); }
.media-card-kicker { font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.05em; color: var(--teal-600); }
.media-card h3, .media-card h4 { font-family: var(--font-serif); font-weight: 500; }
.team-card { background: var(--paper-card); border-color: var(--line-warm); }
.founder-note { background: var(--paper-card); border: 1px solid var(--line-warm); }
.founder-note ul li { border-left-color: var(--amber) !important; }
.recognition-more-head { font-family: var(--font-serif); font-weight: 500; }

/* Header mark resolves on every page (relative to this CSS file), incl. service subpages */
.site-header .brand-mark { background-image: url('../img/logo-mark.svg'); }

/* ---- Capabilities / Services page ---- */
.showcase-eyebrow { font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-600); }
.showcase-text h3 { font-family: var(--font-serif); font-weight: 500; }
.compare-us, .compare-col-h.compare-us { background: #FBF5EC; }
.tile { background: var(--paper-card); border-color: var(--line-warm); }
