/* GThink coral colour review — 17 September 2026.
   Brand RGB target #FF7059 is a simple unprofiled approximation of C0 M56 Y65 K0,
   not a guaranteed print match. Dark by default; explicit light always wins.
   Photographs, portfolio art and original letter outlines are unchanged. */
:root {
  color-scheme: dark;
  --brand-coral: #ff7059;
  --brand-coral-hover: #ff8975;
  --brand-coral-deep: #af3624;
  --paper: #171d19;
  --surface: #222b24;
  --white: #202923;
  --ink: #f1efe6;
  --muted: #b9c3b7;
  --line: #4f5b50;
  --accent: #ff7059;
  --accent-bright: #ff7059;
  --dark: #101813;
  --dark-line: #526455;
  --on-dark: #f5f2eb;
  --closing-bg: #2b352b;
  --closing-line: #58654f;
  --photo-bg: #303a31;
  --choice-hover: #2c372e;
  --selected-muted: #65523e;
  --accent-ink: #171d19;
  --art-bg: #29342b;
  --art-line: #52614f;
  --festival-bg: #344138;
  --field-line: #83967f;
  --error: #ffb197;
  --error-bg: #38251f;
  --note-shadow: #00000040;
  --switch-bg: #ff7059;
  --switch-thumb: #172019;
  --button-border: #ff7059;
}
:root[data-theme="light"] {
  color-scheme: light;
  --paper: #f5f2eb;
  --surface: #ece9e1;
  --white: #fffdf8;
  --ink: #222722;
  --muted: #5c6259;
  --line: #c8c9bd;
  --accent: #af3624;
  --accent-bright: #ff7059;
  --dark: #232b27;
  --dark-line: #566057;
  --closing-bg: #dfdfd0;
  --closing-line: #c9cdbd;
  --photo-bg: #d4d5c9;
  --choice-hover: #e6e4da;
  --selected-muted: #dac3ad;
  --accent-ink: #ffffff;
  --art-bg: #e1e1d6;
  --art-line: #cfd1c5;
  --festival-bg: #b6c2ba;
  --field-line: #858d80;
  --error: #993c25;
  --error-bg: #f7eae3;
  --note-shadow: #1c2a1b14;
  --switch-bg: #717b6f;
  --switch-thumb: #fffdf8;
  --button-border: #af3624;
}

/* Semantic surfaces, including forms and the existing dark editorial sections. */
.dark-section { color: var(--on-dark); }
.perspective-copy .lead { color: var(--on-dark); }
.closing { background: var(--closing-bg); border-color: var(--closing-line); }
.photo-cut { background: var(--photo-bg); }
.hero-margin-note { box-shadow: 0 10px 28px var(--note-shadow); }
.brief-note { border-color: var(--line); }
.situation-choice:has(input:checked) .choice-number { color: var(--selected-muted); }
.situation-choice:not(:has(input:checked)):hover { background: var(--choice-hover); }
.button:hover { color: var(--accent-ink); }
.project-image, .case-art { background: var(--art-bg); border-color: var(--art-line); }
.project-vintage-festival, .festival-art { background: var(--festival-bg); }
.project-bistro-vino { background: #303c35; }
.field input, .field select, .field textarea { border-color: var(--field-line); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--error); }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 1; }
.form-error { background: var(--error-bg); border-color: var(--error); color: var(--ink); }
.menu-toggle { color: var(--ink); }

/* A quiet editorial question, not another navigational link or a rotating slogan. */
.editorial-image .thinking-caption {
  display: block;
  max-width: 44ch;
  margin-top: 20px;
  padding: 0 16px 0 15px;
  border-left: 2px solid var(--accent);
  font: 500 18px/1.6 var(--sans);
  color: var(--muted);
  text-wrap: pretty;
}
.hero-art { padding-bottom: 26px; }
/* Flow positioning keeps the overlaid note clear of captions of any length. */
.hero-margin-note { bottom: auto; top: 65%; }

/* One accessible switch in the navigation: desktop toolbar, mobile menu row. */
.site-nav { gap: clamp(12px, 1.6vw, 23px); }
.theme-menu-row { display: flex; flex: 0 0 auto; align-items: center; }
.theme-menu-heading { display: none; }
.theme-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  font: 500 13px/1.5 var(--sans);
}
.theme-toggle:hover { border-color: var(--accent); background: var(--surface); }
.theme-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.theme-track {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
  flex: 0 0 40px;
  border: 1px solid var(--switch-bg);
  border-radius: 20px;
  background: var(--switch-bg);
}
.theme-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--switch-thumb);
  transition: transform .15s ease;
}
.theme-toggle[aria-checked="true"] .theme-thumb { transform: translateX(16px); }

/* A small thinking bulb: warm when the page is light, quietly dimmed in dark mode. */
.theme-toggle-bulb { padding-block: 3px; gap: 8px; }
.theme-bulb { width: 34px; height: 44px; flex: 0 0 34px; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.bulb-glass { fill: var(--accent); fill-opacity: .18; stroke: var(--ink); transition: fill-opacity .18s ease; }
.bulb-rays { stroke: var(--accent); opacity: .45; transition: opacity .18s ease; }
.bulb-shine { stroke: var(--paper); stroke-width: 5; opacity: .7; }
.bulb-filament { stroke: var(--accent); stroke-width: 2.6; }
.bulb-fitting { fill: var(--surface); stroke: var(--ink); }
.bulb-thread { stroke: var(--ink); stroke-width: 2.5; }
:root[data-theme="light"] .bulb-glass { fill-opacity: .55; }
:root[data-theme="light"] .bulb-rays { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .bulb-glass, .bulb-rays { transition: none; } }
@media (forced-colors: active) {
  .theme-bulb { stroke: ButtonText; }
  .bulb-glass, .bulb-fitting { fill: Canvas; fill-opacity: 1; stroke: ButtonText; }
  .bulb-rays, .bulb-filament, .bulb-thread { stroke: ButtonText; opacity: 1; }
  .bulb-shine { display: none; }
}

/* Switch to a menu before desktop navigation becomes cramped. */
@media (max-width: 1200px) {
  .header-inner { min-height: 86px; flex-wrap: wrap; padding-block: 17px; gap: 0; }
  .brand { font-size: 39px; }
  .js-enabled .menu-toggle { display: inline-flex; }
  .site-nav {
    width: 100%; flex-direction: column; align-items: stretch; gap: 0;
    margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--line);
  }
  .js-enabled .site-nav:not(.is-open) { display: none; }
  .site-nav a { padding: 13px 2px; min-height: 49px; font-size: 16px; }
  .site-nav .nav-cta { margin: 12px 0 2px; padding: 14px 18px; }
  .theme-menu-row {
    width: 100%; justify-content: space-between; gap: 16px;
    margin-top: 16px; padding: 18px 0 3px; border-top: 1px solid var(--line);
  }
  .theme-menu-heading { display: block; font-size: 15px; color: var(--muted); }
  .theme-toggle { padding: 10px 12px; font-size: 14px; min-height: 48px; }
}
@media (max-width: 700px) {
  .header-inner { min-height: 78px; }
  .brand { font-size: 36px; }
  .editorial-image .thinking-caption { font-size: 17px; padding-right: 0; margin-top: 18px; }
  .hero-art { padding-bottom: 12px; }
  .hero-margin-note { top: 64%; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-thumb { transition: none; }
}
@media (forced-colors: active) {
  .theme-track { forced-color-adjust: none; border-color: ButtonText; background: Canvas; }
  .theme-thumb { forced-color-adjust: none; background: ButtonText; }
  .theme-toggle[aria-checked="true"] .theme-track { background: Highlight; }
  .theme-toggle[aria-checked="true"] .theme-thumb { background: HighlightText; }
}
@media print {
  :root, :root[data-theme] {
    color-scheme: light;
    --paper: #fff; --surface: #fff; --white: #fff; --ink: #000;
    --muted: #333; --accent: #333; --on-dark: #000; --line: #888;
  }
  .theme-menu-row { display: none !important; }
  .editorial-image .thinking-caption { color: #333; }
}

@media(min-width:1201px) and (max-width:1430px){.brand-descriptor{display:none}.site-nav{gap:14px}}

/* V2.4 — reference-derived SVG outlines, never device-dependent logo lettering.
   Site choice wins over OS choice. Both files have identical intrinsic dimensions.
   All styling stays in this external stylesheet; SVGs contain only vector paths. */
.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 44px;
}
.brand-logo {
  display: block;
  width: 2.96em;
  height: auto;
  max-width: none;
}
/* Dark is the brand default, including when scripting is disabled. */
.brand-logo--light { display: none; }
.brand-logo--dark { display: block; }
:root[data-theme="light"] .brand-logo--light { display: block; }
:root[data-theme="light"] .brand-logo--dark { display: none; }
@media (max-width: 1360px) and (min-width: 1201px) {
  .brand-descriptor { display: none; }
}

/* Keep the lively brand coral for fills; use a deeper relative for text on paper. */
.marked-word::after, .frame-mark { background: var(--brand-coral); }
.image-frame::before { border-color: var(--brand-coral); }
.button:not(.button-secondary), .site-nav .nav-cta {
  background: var(--brand-coral);
  color: #171d19;
  border-color: var(--button-border);
}
.button:not(.button-secondary):hover, .site-nav .nav-cta:hover {
  background: var(--brand-coral-hover);
  color: #171d19;
  border-color: var(--button-border);
}
/* Fixed dark editorial panels need the bright accent in both overall themes. */
.dark-section .heading-accent { color: var(--brand-coral); }
/* Print remains an ink-saving light layout, never white text on white paper. */
@media print {
  :root, :root[data-theme] {
    --brand-coral: #333; --brand-coral-hover: #333;
    --button-border: #333; --accent-bright: #333;
  }
  .brand-logo--light { display: block !important; }
  .brand-logo--dark { display: none !important; }
}