/* ==========================================================================
   Tactical Investment Strategies — site redesign, v4 (red)
   Register: brand. Tone: industrial / utilitarian, editorial restraint.
   Concept: a field manual for money.

   v4 replaces the gold accent with #CC0000. Gold used one value for fills and
   for small text; red cannot, because #CC0000 is 2.77:1 on the dark field and
   4.43:1 on bone-2. So one token became four: --red for fills, rules and
   strokes, --red-lift for small text and borders on dark, --red-deep for
   small text on light, and --on-red for text sitting on a red fill. Primary
   button text flipped from dark ink (3.04:1) to --on-red (5.56:1).

   Carried over from v2, all of them consequences of measuring the library:
   · The best cover art Mark owns is 260px wide, so the cover is a buy card at
     native size, never a stretched hero object.
   · The best photograph he owns is 1629px square, so it carries a full-bleed
     side-lit band instead of sitting unused.
   · Every <img> declares its TRUE intrinsic width/height and is capped at that
     width, so upscaling is structurally impossible rather than merely avoided.
   · Photographs used as backgrounds sit under an opaque overlay, where the
     softness of a 1150px file across a wide band reads as atmosphere.

   Everything here maps to a Kadence control: nine colours to the Global
   Palette, three families to Kadence typography presets, every band to a Row
   Layout. See index.html for the block-by-block build sheet.
   ========================================================================== */

:root {
  /* --- Kadence Global Palette 1-9 --------------------------------------- */
  --field:        #1E2118;
  --field-2:      #2A2E22;
  --olive:        #4A5236;
  --olive-deep:   #333A26;
  --red:          #CC0000;   /* the brand red: fills, rules, strokes  */
  --red-lift:     #F98072;   /* small text + borders on DARK grounds   */
  --red-deep:     #B01212;   /* small text on LIGHT grounds            */
  --red-bright:   #FF2E2E;   /* LARGE display text on dark. Large type
                                 only needs 3:1, so it can stay a purer red
                                 than the small-text variant. 3.20:1 at its
                                 worst here, on the deep olive band.     */
  --on-red:       #FFF7F2;   /* text sitting on a red fill            */
  --gold:         #E0AE5C;   /* primary button fill. Ink on it is 8.86:1
                                and the fill is 8.07:1 against the dark
                                page, which is what delineates the control;
                                the red ring reads by hue, at 2.91:1.   */
  --gold-deep:    #C9963F;
  --bone:         #F2EDE1;
  --bone-2:       #E6DFCE;
  --ink:          #16180F;

  /* --- extended neutrals ------------------------------------------------ */
  --ink-mute:     #55584A;   /* 6.24:1 on bone  */
  --bone-mute:    #CFCEC0;   /* was #A8A797. Raised so the mono layer reads:
                                7.47:1 at its worst, on the deep olive band. */
  --rule-dark:    #3C4033;
  --rule-light:   #D2CAB6;

  /* --- semantic --------------------------------------------------------- */
  --page:            var(--bone);
  --page-ink:        var(--ink);
  --page-ink-mute:   var(--ink-mute);
  --invert:          var(--field);
  --invert-ink:      var(--bone);
  --invert-ink-mute: var(--bone-mute);
  --accent:          var(--red);        /* button fills, either ground */
  --accent-on-dark:  var(--red-lift);
  /* Small accent TEXT differs by ground, and red makes the split sharper than
     gold did. #CC0000 is 2.77:1 on the dark field and 4.43:1 on bone-2, so it
     is never used for small text. Light grounds get --red-deep, dark grounds
     get --red-lift. The red itself is for fills, rules and strokes. */
  --accent-text:     var(--red-deep);

  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --text:    'Source Serif 4', Georgia, 'Times New Roman', serif;
  --data:    'Space Mono', 'SFMono-Regular', Consolas, monospace;

  --r-1: 2px;
  --gutter: clamp(20px, 5vw, 64px);
  --shell: 1200px;
  --measure: 66ch;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--page);
  color: var(--page-ink);
  font-family: var(--text);
  /* 50+ audience, often on a phone before the market opens. Size up. */
  font-size: 19px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (max-width: 640px) { body { font-size: 17.5px; } }

img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1.1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
a { color: inherit; }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
.d1, .d2, .d3, .d4 {
  font-family: var(--display); font-weight: 700;
  letter-spacing: -0.018em; text-wrap: balance;
  overflow-wrap: anywhere; min-width: 0; margin: 0;
}
.d1 { font-size: clamp(40px, 6.6vw, 82px); line-height: 1.0; letter-spacing: -0.026em; }
.d2 { font-size: clamp(30px, 4.2vw, 52px); line-height: 1.04; }
.d3 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.14; }
.d4 { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.25; letter-spacing: 0; }

.lead {
  font-size: clamp(19px, 1.9vw, 23px); line-height: 1.5;
  color: var(--page-ink-mute); max-width: 54ch;
}
.invert .lead { color: var(--invert-ink-mute); }

.kicker {
  font-family: var(--data); font-size: 12.5px; line-height: 1.4;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-text); margin: 0 0 18px;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.shell { max-width: var(--shell); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.band { padding-top: clamp(60px, 8.5vw, 120px); padding-bottom: clamp(60px, 8.5vw, 120px); }
.band-tight { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(32px, 4vw, 56px); }

.invert { background: var(--invert); color: var(--invert-ink); }
.surface-2 { background: var(--bone-2); }
.olive-band { background: var(--olive-deep); color: var(--invert-ink); }

/* Dark-context token flip. Anything on a dark ground re-points the semantic
   tokens once, so descendants inherit correct values instead of each component
   needing its own override. .photo-band is included: it is a dark ground even
   though it carries no .invert class. */
.invert, .olive-band, .photo-band {
  --page:          var(--field);
  --page-ink:      var(--bone);
  --page-ink-mute: var(--bone-mute);
  --accent-text:   var(--red-lift);
  --rule-light:    var(--rule-dark);
}

/* minmax(0,1fr) — plain 1fr is minmax(auto,1fr) and a wide image blows the
   track past the viewport on mobile. */
.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(28px,4vw,64px); align-items: center; }
.split-7-5 { grid-template-columns: minmax(0,7fr) minmax(0,5fr); }
.split-5-7 { grid-template-columns: minmax(0,5fr) minmax(0,7fr); }
.split-top { align-items: start; }
@media (max-width: 900px) { .split, .split-7-5, .split-5-7 { grid-template-columns: minmax(0,1fr); } }

.stack > * + * { margin-top: 24px; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.masthead { position: sticky; top: 0; z-index: 50; background: var(--field); border-bottom: 1px solid var(--rule-dark); color: var(--invert-ink); }
.masthead-inner { display: flex; align-items: center; gap: 28px; min-height: 76px; padding-top: 10px; padding-bottom: 10px; }
.wordmark {
  font-family: var(--display); font-weight: 700; font-size: 15px; line-height: 1.08;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  color: var(--invert-ink); margin-right: auto; display: block; padding: 8px 4px;
}
.wordmark span { display: block; color: var(--red-lift); }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  font-family: var(--display); font-weight: 500; font-size: 14px;
  letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none;
  color: var(--invert-ink); padding: 14px; min-height: 44px;
  display: inline-flex; align-items: center; border-bottom: 2px solid transparent;
  transition: color 140ms ease, border-color 140ms ease;
}
.nav a:hover { color: var(--red-lift); border-bottom-color: var(--red-lift); }
.nav a:focus-visible { outline: 2px solid var(--red-lift); outline-offset: 2px; }
.nav a[aria-current='page'] { color: var(--red-lift); border-bottom-color: var(--red-lift); }

/* Mobile navigation. CSS only, using <details>, so the mockup shows a working
   menu. In the build this is Kadence's own mobile header row and off-canvas
   menu, styled to match: no custom markup required. */
.mobile-nav { display: none; }
.mobile-nav > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 10px 14px; border: 1.5px solid var(--bone-mute); border-radius: var(--r-1);
  font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--bone);
}
.mobile-nav > summary::-webkit-details-marker { display: none; }
.mobile-nav > summary:focus-visible { outline: 2px solid var(--red-lift); outline-offset: 3px; }
.mobile-nav > summary:hover { border-color: var(--red-lift); color: var(--red-lift); }
.mobile-nav .bars { display: block; width: 16px; height: 10px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
.mobile-nav[open] > summary { border-color: var(--red-lift); color: var(--red-lift); }
.mobile-nav-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--field-2); border-bottom: 1px solid var(--rule-dark); padding: 8px var(--gutter) 20px; }
.mobile-nav-panel a {
  display: flex; align-items: center; min-height: 52px; font-family: var(--display);
  font-weight: 500; font-size: 16px; letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; color: var(--bone); border-bottom: 1px solid var(--rule-dark);
}
.mobile-nav-panel a:last-child { border-bottom: 0; }
.mobile-nav-panel a:hover { color: var(--red-lift); }
.mobile-nav-panel a:focus-visible { outline: 2px solid var(--red-lift); outline-offset: -2px; }

.label-short { display: none; }

@media (max-width: 860px) {
  .nav { display: none; }
  .mobile-nav { display: block; }
  .masthead-inner { min-height: 64px; gap: 12px; position: relative; }
  .masthead-inner .btn-sm { padding: 10px 14px; font-size: 12.5px; }
  .label-full { display: none; }
  .label-short { display: inline; }
}

/* Narrowest phones (iPhone SE and down): wordmark, Menu and the workbook
   button will not all fit on one row. The button comes out of the bar rather
   than being allowed to push the row wider than the screen. It is still one
   tap away, at the top of the menu panel. */
@media (max-width: 420px) {
  .masthead-inner .btn-sm { display: none; }
  .wordmark { font-size: 13px; letter-spacing: 0.05em; }
}

/* When served through the client portal, the route injects its own sticky
   "back to portal" bar as the first child of <body>. Offset the masthead so
   two stuck elements do not overlap. */
[data-portal-nav] ~ .masthead { top: 37px; }

/* --------------------------------------------------------------------------
   Buttons — stamped, square, no soft corners.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 26px; border-radius: var(--r-1);
  border: 1.5px solid transparent; font-family: var(--display); font-weight: 600;
  font-size: 15px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease, transform 90ms ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--red-lift); outline-offset: 3px; }
.btn-primary { background: var(--gold); color: var(--ink); border-width: 2px; border-color: var(--red); }
.btn-primary:hover { background: #EDBE78; border-color: #E00000; }
.btn-ghost-dark { background: transparent; color: var(--invert-ink); border-color: var(--bone-mute); }
.btn-ghost-dark:hover { border-color: var(--red-lift); color: var(--red-lift); }
.btn-ghost-light { background: transparent; color: var(--ink); border-color: var(--rule-light); }
.btn-ghost-light:hover { border-color: var(--red); color: var(--red-deep); background: rgba(204,0,0,.06); }
.btn-sm { min-height: 44px; padding: 10px 18px; font-size: 13px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

.link-rule {
  font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: .05em;
  text-transform: uppercase; text-decoration: none; color: var(--accent-text);
  border-bottom: 2px solid var(--red); padding: 10px 0 6px; min-height: 44px;
  display: inline-flex; align-items: center; transition: color 140ms ease, border-color 140ms ease;
}
.link-rule:hover { color: var(--page-ink); border-bottom-color: var(--page-ink); }
.link-rule:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Media — asset-native sizing.
   Every image carries max-width equal to its own intrinsic width, set inline
   from the real file. .fit centres it in whatever column it lands in.
   -------------------------------------------------------------------------- */
figure { margin: 0; }
.fit { width: 100%; }
.figcap {
  font-family: var(--data); font-size: 11.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--page-ink-mute); margin-top: 12px;
}


/* A photograph shown as itself: framed, never used as a background wash. */
.shot img { border: 1px solid var(--rule-dark); }
.shot { margin: 0; }

/* Brass hairline frame, offset. Reads as a mounted plate, not a card. */
.plate { position: relative; display: block; max-width: 100%; }
.plate img { position: relative; z-index: 1; width: 100%; }
.plate::after { content: ''; position: absolute; inset: 14px -14px -14px 14px; border: 1.5px solid var(--red); z-index: 0; }
@media (max-width: 640px) { .plate::after { inset: 10px -10px -10px 10px; } }

/* The buy card. Built for a 260px cover, which is the largest Mark owns. */
.buy-card {
  background: var(--field-2); border: 1.5px solid var(--red); border-radius: var(--r-1);
  padding: 22px; width: min(100%, 308px);
}
.buy-card img { width: 100%; }
.buy-card .retailers { flex-direction: column; gap: 8px; margin-top: 18px; }
.buy-card .retailers .btn { width: 100%; }
.buy-card .buy-note {
  font-family: var(--data); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bone-mute); margin-top: 16px; text-align: center; line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Photographic bands
   -------------------------------------------------------------------------- */
.photo-band {
  position: relative;
  /* Explicit dark ground UNDER the photograph. Without it a slow or missing
     image leaves bone text on the bone page background, which is invisible.
     Kadence equivalent: set the Row's background colour as well as its image. */
  background-color: var(--field);
  background-size: cover; background-position: center;
  color: var(--invert-ink); isolation: isolate;
}
.photo-band::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(30,33,24,.88) 0%, rgba(30,33,24,.78) 100%);
}
/* Side-lit variant: photograph held to one side, copy over the dark side. */
.photo-band-side { background-position: right center; }
.photo-band-side::before {
  background: linear-gradient(90deg, rgba(30,33,24,.97) 0%, rgba(30,33,24,.92) 44%, rgba(30,33,24,.34) 100%);
}
@media (max-width: 900px) {
  .photo-band-side { background-position: center 18%; }
  .photo-band-side::before { background: linear-gradient(180deg, rgba(30,33,24,.55) 0%, rgba(30,33,24,.96) 44%); }
  .photo-band-side .shell { padding-top: 42vw; }
}

/* --------------------------------------------------------------------------
   Manual index — replaces the numbered-step card row.
   -------------------------------------------------------------------------- */
.manual { border-top: 1.5px solid var(--rule-light); max-width: 900px; }
.manual-row {
  display: grid; grid-template-columns: 82px minmax(0,1fr); gap: clamp(16px,3vw,40px);
  padding: 22px 0; border-bottom: 1px solid var(--rule-light); align-items: baseline;
}
.manual-num { font-family: var(--data); font-size: 13px; letter-spacing: .1em; color: var(--accent-text); }
.manual-title { font-family: var(--display); font-weight: 700; font-size: clamp(18px,1.8vw,21px); line-height: 1.2; margin: 0 0 6px; }
.manual-body { font-size: 17px; color: var(--page-ink-mute); margin: 0; max-width: 60ch; }
@media (max-width: 560px) { .manual-row { grid-template-columns: minmax(0,1fr); gap: 6px; } }


/* Chapter list under a section title. Mimics a printed table of contents:
   title, dot leader, page number. Modelled on the layout Mark supplied. */
.toc { list-style:none; margin:14px 0 0; padding:0; }
.toc li { display:flex; align-items:baseline; gap:10px; padding:6px 0; font-size:16px; color:var(--page-ink-mute); }
.toc .t { flex:0 1 auto; }
.toc .dots { flex:1 1 auto; border-bottom:1px dotted var(--rule-light); transform:translateY(-5px); min-width:24px; }
.toc .pg { flex:0 0 auto; font-family:var(--data); font-size:13px; font-variant-numeric:tabular-nums; color:var(--accent-text); }
@media (max-width:560px){ .toc li { font-size:15px; } .toc .dots { min-width:12px; } }

/* --------------------------------------------------------------------------
   Pull quote, stats, forms, empty state
   -------------------------------------------------------------------------- */
.pullquote { margin: 0; max-width: 62ch; }
.pullquote p { font-family: var(--text); font-size: clamp(21px,2.4vw,28px); line-height: 1.42; font-style: italic; max-width: none; }
.pullquote cite {
  display: block; margin-top: 20px; font-family: var(--data); font-style: normal;
  font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--page-ink-mute);
}

.stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(18px,3vw,40px); }
@media (max-width: 640px) { .stats { grid-template-columns: minmax(0,1fr); gap: 20px; } }
.stat { border-top: 1.5px solid var(--rule-light); padding-top: 18px; }
.stat b {
  display: block; font-family: var(--data); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: clamp(32px,4vw,48px); line-height: 1; color: var(--red-bright); letter-spacing: -.02em;
}
/* red-bright is a dark-ground colour. On a light ground it would be 2.6:1,
   so the light-ground context takes the deep red instead. */
.surface-2 .stat b, body > main > .band:not(.invert):not(.olive-band):not(.photo-band) .stat b { color: var(--red-deep); }
.stat span {
  display: block; margin-top: 12px; font-family: var(--data); font-size: 11.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--page-ink-mute); line-height: 1.6;
}

.field-label { display: block; font-family: var(--data); font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--page-ink-mute); margin-bottom: 8px; }
.input, .textarea {
  width: 100%; min-height: 52px; padding: 13px 16px; border: 1.5px solid var(--rule-light);
  border-radius: var(--r-1); background: #FFFFFF; color: var(--ink);
  font-family: var(--text); font-size: 18px; transition: border-color 140ms ease, box-shadow 140ms ease;
}
.textarea { min-height: 140px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: #6B6E60; }  /* on the white field: 5.6:1 */
.input:hover, .textarea:hover { border-color: var(--ink-mute); }
.input:focus, .textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(74,82,54,.18); }
.input[aria-invalid='true'], .textarea[aria-invalid='true'] { border-color: #8C3B21; }
.form-error { font-family: var(--data); font-size: 12px; letter-spacing: .06em; color: #8C3B21; margin-top: 8px; }
.form-note { font-family: var(--data); font-size: 11.5px; letter-spacing: .06em; color: var(--page-ink-mute); margin-top: 14px; max-width: 46ch; }
.form-success {
  border: 1.5px solid var(--red); border-radius: var(--r-1); padding: 18px 20px;
  background: rgba(204,0,0,.07); font-family: var(--display); font-weight: 600; font-size: 16px;
}

.empty { border: 1.5px dashed var(--rule-light); border-radius: var(--r-1); padding: clamp(28px,5vw,52px); max-width: 640px; }

.retailers { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer { background: var(--field); color: var(--invert-ink); }
.footer-grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); gap: clamp(28px,4vw,56px); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: minmax(0,1fr); } }
.footer h2 { font-family: var(--data); font-size: 11.5px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-mute); margin: 0 0 16px; }
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list a {
  display: inline-flex; align-items: center; min-height: 44px; font-family: var(--display);
  font-size: 15px; text-decoration: none; color: var(--invert-ink); transition: color 140ms ease;
}
.footer-list a:hover { color: var(--red-lift); text-decoration: underline; text-underline-offset: 4px; }
.footer-list a:focus-visible { outline: 2px solid var(--red-lift); outline-offset: 2px; }
.colophon {
  border-top: 1px solid var(--rule-dark); margin-top: clamp(36px,5vw,56px); padding-top: 24px;
  font-family: var(--data); font-size: 12px; letter-spacing: .04em; color: var(--bone-mute);
}
.colophon a { color: var(--bone-mute); text-underline-offset: 3px; }
.colophon a:hover { color: var(--red-lift); }
.disclosure { font-family: var(--data); font-size: 11.5px; line-height: 1.65; color: var(--bone-mute); max-width: 88ch; }

/* --------------------------------------------------------------------------
   Reveal on scroll. Base state is visible; script opts in. Kadence Blocks Pro
   ships this natively, so in the build it is a checkbox, not code.
   -------------------------------------------------------------------------- */
html.js .rv { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
html.js .rv.in { opacity: 1; transform: none; }
html.reduced .rv, html.reduced .rv.in { opacity: 1 !important; transform: none !important; transition: none !important; }

/* --------------------------------------------------------------------------
   Mockup chrome — review package only. Not part of the site design.
   -------------------------------------------------------------------------- */
.mockup-note {
  background: var(--olive-deep); color: var(--bone); font-family: var(--data);
  font-size: 12px; letter-spacing: .08em; padding: 10px var(--gutter); text-align: center;
}
.mockup-note a { color: var(--red-lift); text-underline-offset: 3px; }