/* ==========================================================================
   GreenCyber, go.greencyber.ai
   The editorial landing page system.

   Every colour and every typeface in this file was read out of
   Knowledge/GreenCyber Brand Toolkit.md, which was itself rebuilt on
   6 August 2026 from the proposal template Adam edited and ruled canonical.
   Nothing here was sampled by eye or chosen for effect.

   Register. These are argument pages written in Adam's own voice, so the
   ground is light and the display face is the serif. Dark is not a theme
   here, it is a register: it carries the incident, the threat and the
   instruction, and it appears as a deliberate band inside a light page
   rather than as a preference the reader's operating system picks.

   No photography. The rule against stock cybersecurity imagery is absolute,
   and the safest way to keep it is to have no image slot at all. What sits
   behind the masthead instead is generated ink: growth rings, which are the
   logo idea at a larger scale, drawn in SVG at very low opacity.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Light mode, the argument register. Toolkit, 6 August 2026. */
  --ground:      #F4F3EA;
  --recessed:    #EDECDD;
  --raised:      #F7F6EC;
  --display:     #1A2411;
  --standfirst:  #3D4737;
  --body:        #4C5546;
  --figlabel:    #3F4A39;
  --kicker:      #77826A;
  --ghost:       #33402C;
  --footer:      #8B937E;

  /* Dark mode, the incident register. Used as a band, not as a theme. */
  --dark-ground:   #1A2411;
  --dark-panel:    #17220D;
  --dark-display:  #F4F3EA;
  --dark-body:     #A3B194;
  --dark-second:   #93A486;
  --dark-kicker:   #A0AE8C;
  --dark-ghost:    #26331A;
  --dark-footer:   #7F8A72;

  /* One accent value, both modes. Ruled 6 August 2026. */
  --accent:      #C9F22D;

  --rule:        rgba(26, 36, 17, .14);
  --rule-strong: rgba(26, 36, 17, .28);
  --dark-rule:   rgba(244, 243, 234, .16);

  /* The display serif carries words. The sans carries every figure. */
  --serif: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
  --sans:  "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Measure and rhythm. The text column is capped near 62 characters,
     which is where a long argument stays readable. */
  --measure: 34rem;
  --gutter:  clamp(1.5rem, 5vw, 5.5rem);
  --band:    clamp(4rem, 8vw, 8rem);
  --margin-col: 13rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--body);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.68;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Load bearing brand rule, enforced here rather than remembered.
   Every figure is set in the sans, in both registers, because a display
   serif setting numerals is what put the wrong price in front of a chief
   executive on 6 August 2026. */
.fig, .stat-n, .num, .folio-n, time, .price, output {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.wrap { max-width: 76rem; margin: 0 auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 58rem; margin: 0 auto; padding-inline: var(--gutter); }

/* --------------------------------------------------------------------------
   2. Type
   -------------------------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--display);
  margin: 0;
  line-height: 1.06;
  letter-spacing: -0.014em;
  text-wrap: balance;
}

h4 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: .005em;
  color: var(--display);
  margin: 0 0 .5rem;
}

p { margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

strong { color: var(--display); font-weight: 700; }

a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--display);
  outline-offset: 3px;
}

/* Labels and kickers are caps with wide tracking. The toolkit is explicit
   that the tracking is part of the identity rather than a flourish. */
.kicker {
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--kicker);
  margin: 0 0 1.5rem;
  max-width: none;
}

.chip {
  display: inline-block;
  background: var(--accent);
  color: #1A2411;
  padding: .3rem .62rem .28rem;
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
}

.rule-accent { width: 3.25rem; height: 3px; background: var(--accent); border: 0; margin: 0 0 1.5rem; }

/* --------------------------------------------------------------------------
   3. Masthead and folio
   -------------------------------------------------------------------------- */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--rule);
}

.lockup {
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.012em;
  color: var(--display);
  text-decoration: none;
}
.lockup .sub {
  font-family: var(--sans);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kicker);
}

.masthead .btn { padding: .7rem 1.15rem; font-size: .75rem; }

/* The folio is the running head of a printed page. It tells the reader
   which sheet of the set they are on before they read a word. */
.folio {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
  padding-block: .85rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kicker);
}
.folio span { white-space: nowrap; }

/* --------------------------------------------------------------------------
   4. Hero
   -------------------------------------------------------------------------- */

.hero { position: relative; padding-block: clamp(3.5rem, 8vw, 7rem) var(--band); overflow: hidden; }

.hero .rings {
  position: absolute;
  top: -14rem; right: -18rem;
  width: 58rem; height: 58rem;
  pointer-events: none;
  z-index: 0;
}
.hero > *:not(.rings) { position: relative; z-index: 1; }

.hero h1 { font-size: clamp(2.5rem, 6.2vw, 4.9rem); max-width: 17ch; }

/* A single word carries the accent, as a highlight behind type. The accent
   is a chip, a rule, a label or a highlight. It is never a large fill. */
.mark {
  background: linear-gradient(transparent 60%, var(--accent) 60%, var(--accent) 93%, transparent 93%);
}

.standfirst {
  margin: 2rem 0 0;
  font-size: clamp(1.125rem, 1.65vw, 1.375rem);
  line-height: 1.55;
  color: var(--standfirst);
  max-width: 38rem;
}

/* The byline is what turns a landing page into a piece of writing.
   Somebody put their name to this. */
.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  max-width: 38rem;
  font-family: var(--sans);
  font-size: .8125rem;
  color: var(--figlabel);
}
.byline .name { font-weight: 700; color: var(--display); }
.byline .dot { color: var(--kicker); }

.actions { display: flex; flex-wrap: wrap; gap: .875rem; margin-top: 2.5rem; }

.btn {
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 1.7rem;
  border: 1px solid var(--display);
  background: transparent;
  color: var(--display);
  display: inline-block;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary { background: var(--display); color: var(--ground); }
.btn-primary:hover { background: transparent; color: var(--display); }
.btn-ghost:hover { background: var(--display); color: var(--ground); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: #1A2411; }
.btn-accent:hover { background: transparent; color: var(--display); border-color: var(--display); }

/* --------------------------------------------------------------------------
   5. Proof strip
   -------------------------------------------------------------------------- */

.proof {
  border-block: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.proof div { padding: 2.25rem 2rem 2.25rem 0; }
.proof div + div { border-left: 1px solid var(--rule); padding-left: 2rem; }
.stat-n {
  display: block;
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  font-weight: 700;
  color: var(--display);
  line-height: 1;
  letter-spacing: -0.025em;
}
.stat-l {
  display: block;
  margin-top: .7rem;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--figlabel);
  max-width: 21ch;
}

/* --------------------------------------------------------------------------
   6. The article grid

   Two columns. The narrow one on the left holds the section number, the
   label and the marginalia. The wide one holds the argument. This is the
   single biggest difference between a page that reads as a brochure and a
   page that reads as a publication.
   -------------------------------------------------------------------------- */

.band { padding-block: var(--band); }

.leaf {
  display: grid;
  grid-template-columns: minmax(0, var(--margin-col)) minmax(0, 40rem);
  gap: clamp(1.25rem, 4vw, 4rem);
  align-items: start;
}
.leaf + .leaf { margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--rule); }

.leaf-margin { position: sticky; top: 2rem; }
.leaf-margin .num {
  display: block;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: .85;
  letter-spacing: -0.04em;
  color: var(--ghost);
  opacity: .38;
  margin-bottom: .9rem;
}
.leaf-margin .label {
  display: block;
  font-family: var(--sans);
  font-size: .625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--kicker);
  line-height: 1.6;
  padding-top: .9rem;
  border-top: 2px solid var(--accent);
}

.leaf-body h2 { font-size: clamp(1.65rem, 3vw, 2.35rem); margin-bottom: 1.25rem; }
.leaf-body h3 { font-size: clamp(1.1rem, 1.8vw, 1.3rem); margin: 2rem 0 .6rem; }

/* A sidenote. Set small, in the sans, hanging in the left column beside
   the paragraph it qualifies. */
.sidenote {
  font-family: var(--sans);
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--kicker);
  border-left: 2px solid var(--rule-strong);
  padding-left: .9rem;
  margin-top: 1.5rem;
  max-width: none;
}
.sidenote strong { color: var(--figlabel); }
.sidenote.standalone { margin-top: 2rem; max-width: 26rem; }

/* A label that carries the accent rule rather than the hairline. Used to
   open a band where there is no section number. */
.label.accent-top { border-top-color: var(--accent); }

/* The lead paragraph after a heading, which wants a little more air than a
   paragraph following another paragraph. */
.lead-body { margin-top: 1.4rem; }

/* The opening leaf of a band, which introduces it rather than continuing it. */
.band-lead { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.band-lead + .leaf { margin-top: 0; padding-top: 0; border-top: 0; }

/* The opening paragraph of a leaf takes a drop cap, set in the serif. */
.opener::first-letter {
  font-family: var(--serif);
  font-weight: 700;
  float: left;
  font-size: 3.6em;
  line-height: .82;
  padding: .06em .1em 0 0;
  color: var(--display);
}

blockquote.pull {
  margin: 2.25rem 0;
  padding-left: 1.5rem;
  border-left: 3px solid var(--accent);
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.28;
  letter-spacing: -0.012em;
  color: var(--display);
  max-width: 30rem;
}
blockquote.pull p { max-width: none; margin: 0; }
blockquote.pull cite {
  display: block;
  margin-top: .9rem;
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--kicker);
}

/* --------------------------------------------------------------------------
   7. Lists that read like a contents page
   -------------------------------------------------------------------------- */

.spec { list-style: none; margin: 1.75rem 0 0; padding: 0; }
.spec li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 1rem;
  padding-block: 1.1rem;
  border-top: 1px solid var(--rule);
  align-items: baseline;
}
.spec li:last-child { border-bottom: 1px solid var(--rule); }
.spec .n { font-size: .75rem; font-weight: 700; color: var(--kicker); letter-spacing: .08em; }
.spec .t { color: var(--display); font-weight: 700; font-size: .9375rem; }
.spec .d { display: block; margin-top: .3rem; font-weight: 400; color: var(--body); font-size: .9375rem; }

/* --------------------------------------------------------------------------
   8. The dark band, the incident register
   -------------------------------------------------------------------------- */

.register-dark {
  background: var(--dark-ground);
  color: var(--dark-body);
  padding-block: var(--band);
}
.register-dark h2,
.register-dark h3 {
  color: var(--dark-display);
  /* In the dark register the display face is the sans. Settled 6 August 2026.
     The serif is a light mode device only. */
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.018em;
}
.register-dark h2 { font-size: clamp(1.65rem, 3vw, 2.35rem); }
.register-dark h4 { color: var(--dark-display); }
.register-dark .kicker { color: var(--dark-kicker); }
.register-dark p { color: var(--dark-body); }
.register-dark .leaf + .leaf { border-top-color: var(--dark-rule); }
.register-dark .leaf-margin .num { color: var(--dark-ghost); opacity: 1; }
.register-dark .leaf-margin .label { color: var(--dark-kicker); }
.register-dark .sidenote { color: var(--dark-second); border-left-color: var(--dark-rule); }
.register-dark .spec li { border-top-color: var(--dark-rule); }
.register-dark .spec li:last-child { border-bottom-color: var(--dark-rule); }
.register-dark .spec .t { color: var(--dark-display); }
.register-dark .spec .d { color: var(--dark-body); }
.register-dark .spec .n { color: var(--dark-kicker); }

.ledger { margin-top: 3rem; display: grid; gap: 2.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.ledger > div { border-top: 1px solid var(--dark-rule); padding-top: 1.15rem; }
.ledger p { font-size: .9375rem; margin: 0; }

/* --------------------------------------------------------------------------
   9. Resource index, used on the hub
   -------------------------------------------------------------------------- */

.index { margin-top: 3.5rem; }
.index-row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
  padding-block: 2rem;
  border-top: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: background .18s ease;
}
.index-row:last-of-type { border-bottom: 1px solid var(--rule); }
.index-row:hover { background: var(--recessed); }
.index-row:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--accent); }
.index-row .n { font-size: 1.4rem; font-weight: 700; color: var(--ghost); opacity: .4; line-height: 1; letter-spacing: -0.03em; }
.index-row h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.index-row .cat {
  display: block;
  font-family: var(--sans);
  font-size: .625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--kicker);
  margin-bottom: .6rem;
}
.index-row p { margin: .7rem 0 0; font-size: .9375rem; max-width: 40rem; }
.index-row .go {
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--display);
  white-space: nowrap;
  padding-top: .4rem;
}

/* --------------------------------------------------------------------------
   10. The form
   -------------------------------------------------------------------------- */

.claim { border-top: 1px solid var(--rule); padding-block: var(--band); }
.claim-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.claim h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); max-width: 15ch; }

.form-card {
  background: var(--recessed);
  border-top: 3px solid var(--accent);
  padding: clamp(1.75rem, 3vw, 2.5rem);
}
.field { margin-bottom: 1.25rem; }
.field label {
  display: block;
  font-family: var(--sans);
  font-size: .625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--figlabel);
  margin-bottom: .5rem;
}
.field input, .field select {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--display);
  background: var(--raised);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: .85rem .9rem;
  appearance: none;
}
.field input::placeholder { color: var(--footer); }
.field input:focus, .field select:focus { border-color: var(--display); }

.consent {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: .7rem;
  align-items: start;
  margin: 1.5rem 0;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--figlabel);
}
.consent input { margin: .2rem 0 0; accent-color: var(--display); }
.consent a { color: var(--display); }

/* The consent label is a label, but it is a sentence rather than a field
   name, so it opts out of the caps and tracking the others carry. */
.field label.plain, label.plain {
  text-transform: none;
  letter-spacing: 0;
  font-size: .8125rem;
  font-weight: 400;
  color: inherit;
  margin: 0;
}

.form-card .btn { width: 100%; text-align: center; }

.form-note {
  margin-top: 1.25rem;
  font-size: .75rem;
  line-height: 1.55;
  color: var(--kicker);
  max-width: none;
}

/* Honeypot. Off screen rather than display none, so it is still fillable
   by a bot and invisible to a person. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------------------
   11. Colophon
   -------------------------------------------------------------------------- */

.colophon {
  border-top: 1px solid var(--rule);
  padding-block: 2.5rem 3.5rem;
  color: var(--footer);
  font-size: .8125rem;
}
.colophon-top {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  justify-content: space-between;
  align-items: baseline;
}
.colophon a { text-decoration: none; }
.colophon a:hover { color: var(--display); text-decoration: underline; }
.colophon nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.colophon .fine { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); max-width: 46rem; font-size: .75rem; line-height: 1.6; }

/* --------------------------------------------------------------------------
   12. Reading progress. One hairline, no percentage badge.
   -------------------------------------------------------------------------- */

.progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  z-index: 50;
  transition: width .08s linear;
}

/* --------------------------------------------------------------------------
   13. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 60rem) {
  .claim-grid { grid-template-columns: 1fr; }
  .claim h2 { max-width: none; }
}

@media (max-width: 48rem) {
  .leaf { grid-template-columns: 1fr; gap: 1rem; }
  .leaf-margin { position: static; display: flex; align-items: baseline; gap: 1rem; }
  .leaf-margin .num { margin-bottom: 0; font-size: 2rem; }
  .leaf-margin .label { border-top: 0; border-left: 2px solid var(--accent); padding: 0 0 0 .75rem; }
  .sidenote { margin-top: 1.25rem; }
  .proof div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); }
  .proof div { padding-right: 0; }
  .index-row { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .index-row .go { grid-column: 2; padding-top: .9rem; }
  .masthead nav { display: none; }
  .hero .rings { top: -10rem; right: -24rem; width: 44rem; height: 44rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

@media print {
  .progress, .form-card, .btn { display: none; }
  body { background: #fff; color: #000; }
}