/* Editorial / Riso: a variant of editorial, after instalanding.ai's corvel-hard-tech-capital-page
   (MIT). A two-plate risograph print on warm paper: one ink-black plate, one red-orange plate,
   printed a hair out of register. Inter Tight at 800 for headlines (the h1 carries a red
   misregistered plate), Newsreader for reading, JetBrains Mono caps for labels. Buttons are ink
   blocks on a hard red offset that they slide into; the pen becomes a flat orange plate behind the
   words; placeholders are two halftone screens, ink and red; dark bands stay ink, with a ramp of
   dots growing above them. Loads after editorial.css and overrides it.
   Suits consultants, architects, engineering firms, print and design shops. */

:root[data-variant="editorial-riso"] {
  --bg: #ebe8e1;
  --bg-soft: #e3e0d9;
  --surface: #f7f5f0;
  --ink: #0c1016;
  --ink-2: #29303a;
  --muted: #4f5762;          /* the brief's mid grey #8b939e is decoration only (--mid) */
  --mid: #8b939e;
  --line: rgb(12 16 22 / 0.28);
  --accent: #a83407;         /* the orange plate darkened to read as text: 4.95:1 on the tinted bands */
  --plate: #ff5b1a;          /* the orange plate itself: fills, shadows, marks; never text on paper */
  --primary: #0c1016;
  --primary-ink: #f7f5f0;
  --glass: rgb(247 245 240 / 0.94);
  --glass-border: #0c1016;
  --hl: #ff5b1a;
  --rule: #0c1016;

  --font-display: "Inter Tight", system-ui, sans-serif;
  --font-body: "Newsreader", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --display-weight: 800;
  --display-tracking: -0.045em;
  --display-leading: 1;
  --reveal-y: 14px;

  --slab-bg: #0c1016;
  --slab-ink: #f7f5f0;
  --footer-bg: #0c1016;
  --footer-ink: #f7f5f0;

  /* placeholders: an ink screen and a red screen at different pitch and offset, over paper tints */
  --dots-ink: radial-gradient(circle, rgb(12 16 22 / 0.6) 1.2px, transparent 1.9px);
  --dots-red: radial-gradient(circle, rgb(255 91 26 / 0.9) 2.2px, transparent 2.9px);
  --ph-1: var(--dots-red) 3px 3px / 11px 11px, var(--dots-ink) 0 0 / 7px 7px, #e1ddd2;
  --ph-2: var(--dots-red) 0 0 / 9px 9px, var(--dots-ink) 2px 4px / 12px 12px, #f7f5f0;
  --ph-3: var(--dots-ink) 0 0 / 6px 6px, var(--dots-red) 5px 2px / 13px 13px, #d9d4c7;
  --ph-4: var(--dots-red) 2px 2px / 8px 8px, var(--dots-ink) 0 0 / 10px 10px, #efe4d6;
  --ph-5: var(--dots-ink) 1px 1px / 8px 8px, var(--dots-red) 4px 5px / 14px 14px, #f1efe8;
  --ph-6: var(--dots-red) 0 0 / 12px 12px, var(--dots-ink) 3px 3px / 6px 6px, #dcd8cd;

  & body { font-size: 19px; line-height: 1.6; }
  & h1, & h2, & h3, & h4 { font-style: normal; }
  & ::selection { background: var(--plate); color: var(--ink); }
  & :focus-visible { outline-color: var(--accent); }
  & .lead { color: var(--ink-2); }

  /* the h1 is printed twice: ink, then the red plate a hair off */
  & h1 { text-shadow: 3px 3px 0 var(--plate); }
  & .ed-main h1 { font-size: clamp(40px, 7.4vw, 104px); line-height: 0.95; letter-spacing: -0.05em; }
  & h2 { letter-spacing: -0.045em; line-height: 0.98; }
  & .brand-mark { font: 800 17px/1 var(--font-display); }
  & .brand-name { font-weight: 800; letter-spacing: -0.04em; }
  & .group-title { font-style: normal; font-weight: 800; letter-spacing: -0.03em; }
  & .service-name, & .menu-name { font-weight: 800; letter-spacing: -0.035em; }
  & .stat dd { font-weight: 800; letter-spacing: -0.045em; }
  & .plan-price .mono { font-weight: 800; letter-spacing: -0.05em; }
  & .footer-name { font-weight: 800; letter-spacing: -0.045em; }
  & .faq-item summary { font-weight: 800; letter-spacing: -0.03em; }
  & .ed-dropcap::first-letter, & .about-copy h2 + p::first-letter { font-weight: 900; color: var(--accent); }

  /* reading text is Newsreader; quotes keep its true italic */
  & .ed-pull blockquote p, & .review blockquote p, & .pull blockquote p, & .footnotes blockquote p { font-family: var(--font-body); font-style: italic; }
  & .ed-pull blockquote p::before { font-family: var(--font-display); font-weight: 900; color: var(--plate); }
  & .marquee-track { font: 500 13px/1.4 var(--font-mono); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; }
  & .marquee-track li::after { content: "\25CF"; font-size: 0.7em; color: var(--plate); }
  & .ed-note-name { font-weight: 800; letter-spacing: -0.025em; }
  & .ed-leader { border-bottom-color: var(--mid); }

  /* the pen is a flat orange plate, a little off the words */
  & mark::before, & .ed-mark::before {
    left: -0.3ch; top: -0.02em; width: calc(100% + 0.6ch); height: calc(100% + 0.04em);
    border-radius: 0; background: var(--plate); box-shadow: none; filter: none; opacity: 1;
    transform: translate(3px, 3px) rotate(-0.6deg);
  }
  & mark::after, & .ed-mark::after { content: none; }
  & mark, & .ed-mark { color: var(--ink); }

  /* labels: mono caps, the accent for the numbers */
  & .eyebrow { color: var(--accent); font-weight: 500; letter-spacing: 0.12em; }
  & .eyebrow::before { content: "\2192\00a0"; }
  & .ed-kicker { color: var(--ink); }
  & .ed-kicker::before { content: none; }
  & .nav-links a:hover, & .ed-dateline a:hover, & .ed-note-name:hover, & .chips .pill:hover, & .nav-menu a:hover {
    background: var(--plate); color: var(--ink);
  }
  & .pill { border-color: var(--ink); }

  /* links: dotted underline in the red plate */
  & main a:not(.btn):not(.ed-note-name):not(.ed-dateline a) {
    text-decoration: underline dotted var(--plate) 2px; text-underline-offset: 4px;
  }
  & .footer a { text-decoration: underline dotted rgb(255 91 26 / 0.9) 2px; text-underline-offset: 4px; }
  & .footer a.btn { text-decoration: none; }
  & .footer a:hover { text-decoration-style: solid; }

  /* buttons: ink blocks on a hard red offset; hover slides the block onto it */
  & .btn { height: 48px; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--plate); }
  & .btn-primary { background: var(--ink); color: var(--primary-ink); }
  & .btn-primary:hover { background: var(--ink); border-color: var(--ink); }
  & .btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--ink); }
  & .btn-ghost:hover { background: var(--surface); color: var(--ink); border-color: var(--ink); }
  & .btn:hover, & .btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--plate); }
  & .btn-sm { height: 40px; }
  & .pricing-slab .btn, & .footer .btn { border-color: var(--surface); }
  & .pricing-slab .btn-ghost, & .footer .btn-ghost { background: transparent; color: var(--surface); }
  & .pricing-slab .btn-ghost:hover, & .footer .btn-ghost:hover { background: transparent; color: var(--surface); }
  & .pricing-slab .plan.featured .btn { border-color: var(--ink); }
  & .footer .btn-primary { background: var(--surface); color: var(--ink); }
  & .footer .btn-primary:hover { background: var(--surface); border-color: var(--surface); }
  & .plan:not(.featured) .btn-ghost { border-color: var(--surface); }
  & .plan:not(.featured) .btn-ghost:hover { background: transparent; color: var(--surface); border-color: var(--surface); }
  & .callbar .btn { box-shadow: 3px 3px 0 var(--plate); }
  & .callbar .btn:hover, & .callbar .btn:active { box-shadow: 0 0 0 var(--plate); transform: translate(3px, 3px); }

  & .nav { border-bottom: 2px solid var(--ink); box-shadow: none; }
  & .nav-menu ul { box-shadow: 4px 4px 0 var(--plate); }
  & .ed-dateline { border-top: 4px double var(--ink); }

  /* bands */
  & main > .section:nth-of-type(even) { background: rgb(12 16 22 / 0.04); }
  & .section-head { border-top-width: 3px; }
  & .section-head::before { border-top-color: var(--plate); border-top-width: 2px; top: 3px; }
  & .about-media, & .gallery-item, & .hero-media, & .map, & .ed-fig .hero-media { outline-color: var(--ink); }
  & .ph-label { background: var(--surface); font-family: var(--font-mono); }
  & .index { color: var(--accent); font-weight: 500; }

  & .pricing-slab { background: var(--slab-bg) var(--grain); outline-color: var(--ink); position: relative; }
  & .pricing-slab .eyebrow, & .footer-title { color: var(--plate); }
  & .plan { border-color: rgb(247 245 240 / 0.45); }
  & .plan.featured { background: var(--surface); }
  & .plan-flag { background: var(--plate); color: var(--ink); border-color: var(--plate); }
  & .plan:not(.featured) .plan-features li::before { color: var(--plate); }
  & .plan-features li::before { content: "\25CF"; font-size: 0.6em; vertical-align: 0.2em; }
  & .plan.featured .plan-features li::before { color: var(--accent); }
  & .faq-item, & .faq-item:first-child { border-color: var(--ink); }
  & .visit-card, & .form { background: var(--surface); border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--plate); }
  & .field input, & .field textarea { border-bottom: 2px solid var(--ink); }
  & .field input:focus, & .field textarea:focus { background: rgb(255 91 26 / 0.14); outline-color: var(--accent); }
  & .map { background: var(--bg-soft); }
  & .map iframe { filter: grayscale(1) contrast(1.05); }
  & .footer-card { background: var(--footer-bg) var(--grain); outline-color: var(--ink); }
  & .wordmark { font: 900 clamp(52px, 12vw, 190px)/0.9 var(--font-display); font-style: normal; letter-spacing: -0.06em; -webkit-text-stroke-color: rgb(247 245 240 / 0.4); }
  & .callbar { border-top: 2px solid var(--ink); box-shadow: none; }

  /* the ramp: ten dots growing from a speck to a full circle, printed above the dark bands */
  & .pricing-slab::before, & .footer::before {
    content: ""; display: block; height: 22px;
    background:
      radial-gradient(circle at 5% 50%, #0c1016 0.8px, transparent 1.4px),
      radial-gradient(circle at 15% 50%, #0c1016 1.8px, transparent 2.4px),
      radial-gradient(circle at 25% 50%, #0c1016 2.7px, transparent 3.3px),
      radial-gradient(circle at 35% 50%, #0c1016 3.6px, transparent 4.2px),
      radial-gradient(circle at 45% 50%, #0c1016 4.6px, transparent 5.2px),
      radial-gradient(circle at 55% 50%, #0c1016 5.5px, transparent 6.1px),
      radial-gradient(circle at 65% 50%, #0c1016 6.5px, transparent 7.1px),
      radial-gradient(circle at 75% 50%, #0c1016 7.4px, transparent 8px),
      radial-gradient(circle at 85% 50%, #0c1016 8.4px, transparent 9px),
      radial-gradient(circle at 95% 50%, #0c1016 9.3px, transparent 9.9px);
  }
  & .pricing-slab::before { position: absolute; left: 0; right: 0; top: -40px; }
  & .footer::before { width: min(var(--max), 100% - 2 * var(--gutter)); margin: 0 auto 14px; }

  /* ---------- borrowed layouts and the spread, printed in two plates ---------- */
  /* gallery "mosaic": every print boxed in ink, a hard orange plate behind it */
  & .mosaic { gap: 18px; padding: 0 6px 6px 0; }
  & .mosaic .gallery-item { outline: 0; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--plate); }

  /* pricing "posters": paper posters with a hard orange offset; the featured one is the ink plate */
  & .posters { gap: 24px; padding-right: 8px; }
  & .poster { border: 2px solid var(--ink); border-radius: 0; background: var(--surface); box-shadow: 8px 8px 0 var(--plate); }
  & .poster-2 { background: #efe4d6; }
  & .poster.featured { background: var(--ink); color: var(--surface); }
  & .poster-name { font-size: clamp(26px, 3vw, 40px); font-weight: 800; letter-spacing: -0.04em; }
  & .poster-amount { font-family: var(--font-display); font-weight: 900; letter-spacing: -0.06em; color: var(--ink); }
  & .poster.featured .poster-amount { color: var(--plate); }
  & .poster-period { opacity: 1; color: var(--muted); font: 500 12px/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
  & .poster.featured .poster-period { color: var(--surface); opacity: 0.85; }
  & .poster-flag { background: var(--plate); color: var(--ink); border-color: var(--plate); }
  & .poster-includes { font-size: 17px; }
  & .poster-includes li::before { content: "\25CF"; color: var(--accent); font-size: 0.6em; vertical-align: 0.2em; }
  & .poster.featured .poster-includes li::before { color: var(--plate); }
  & .poster.featured .btn { background: var(--surface); color: var(--ink); border-color: var(--surface); }

  /* about "spread": the picture on its own plate, the story on paper with an Inter Tight drop cap */
  & .spread-pic { border-bottom: 3px solid var(--ink); }
  & .spread-pic::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 14px; background: var(--plate); pointer-events: none; }
  & .spread-copy { background: var(--surface); }
  & .spread-copy h2 { max-width: none; font-size: clamp(40px, 6.4vw, 96px); }
  & .spread-copy h2 + p { font-size: 20px; color: var(--ink); }
  & .spread-copy h2 + p::first-letter { font-family: var(--font-display); font-weight: 900; font-size: 4.4em; letter-spacing: 0; color: var(--accent); }
  & .spread-copy .stat { border-top: 3px solid var(--ink); }
  & .spread-copy .stat dd { font-size: clamp(34px, 4vw, 52px); }
  @media (min-width: 900px) {
    & .spread-pic { border-bottom: 0; border-right: 3px solid var(--ink); }
    & .spread-pic::after { left: auto; top: 0; width: 14px; height: auto; }
  }

  @media (prefers-reduced-motion: no-preference) {
    &:not([data-motion="none"]) {
      & .btn { transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.2s ease, color 0.2s ease; }
    }
  }
}