/* ============================================================================
   OOVS — monochrome institutional design system
   Pure black and white. No gradients, no shadows, no accent colours.
   System fonts only: no external requests, so it loads on locked-down networks.
   ========================================================================= */

:root {
  --paper: #ffffff;
  --ink: #000000;
  --ink-70: rgba(0, 0, 0, 0.70);
  --ink-55: rgba(0, 0, 0, 0.55);
  --ink-40: rgba(0, 0, 0, 0.40);
  --rule: rgba(0, 0, 0, 0.14);
  --rule-strong: rgba(0, 0, 0, 0.30);
  --veil: rgba(255, 255, 255, 0.72);

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --measure: 76rem;
  /* Section rhythm. Kept tighter than a typical marketing site: on a black
     background, very large vertical gaps read as empty voids rather than
     breathing room. */
  --band: clamp(3.25rem, 6.5vw, 6rem);
  --ease: cubic-bezier(0.16, 1, 0.30, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1rem;
  z-index: 200;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------------------ layout */

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: var(--band); }
.band + .band { border-top: 1px solid var(--rule); }

.band--ink {
  background: var(--ink);
  color: var(--paper);
  border-top: 0;
}
.band--ink { --rule: rgba(255, 255, 255, 0.18); --ink-70: rgba(255,255,255,.72); --ink-55: rgba(255,255,255,.58); --ink-40: rgba(255,255,255,.42); }

/* --------------------------------------------------------------- typography */

.eyebrow {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin: 0 0 1.5rem;
}

h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}

.display {
  font-size: clamp(2.75rem, 8.5vw, 6.25rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

h2 { font-size: clamp(1.875rem, 4.4vw, 3.25rem); }
h3 { font-size: clamp(1.125rem, 1.8vw, 1.375rem); letter-spacing: -0.02em; line-height: 1.25; }

.lede {
  font-size: clamp(1.1875rem, 2.1vw, 1.5rem);
  line-height: 1.45;
  letter-spacing: -0.018em;
  color: var(--ink-70);
  max-width: 46ch;
  margin: 1.75rem 0 0;
}

p { margin: 0 0 1.125rem; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

.small { font-size: 0.9375rem; color: var(--ink-55); line-height: 1.55; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

strong { font-weight: 600; }

/* ------------------------------------------------------------------ header */

.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

/* Apple's translucent-material header. Off by default: over the inverted
   sections a 72% white bar reads as grey, which weakens a strictly black and
   white palette. Swap the two rules above for these to enable it.
   .masthead { background: var(--veil);
               backdrop-filter: saturate(180%) blur(20px);
               -webkit-backdrop-filter: saturate(180%) blur(20px); } */

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.75rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  padding-block: 0.75rem;
}
.brand { gap: 0.6875rem; }
.brand__owasp { width: 30px; height: 30px; flex: none; }
.brand__rule { width: 1px; height: 26px; background: var(--rule-strong); flex: none; }
.brand__name { display: flex; flex-direction: column; gap: 0.1875rem; }
.brand__name strong {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
}
.brand__name small {
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-55);
  line-height: 1;
  white-space: nowrap;
}
@media (max-width: 30rem) { .brand__name small { display: none; } }

.nav { display: flex; align-items: center; gap: 0.25rem; }
.nav a {
  font-size: 0.875rem;
  color: var(--ink-70);
  padding: 0.75rem 0.75rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* .nav a would otherwise win on specificity and leave the pill's label
   dark-on-black, which is invisible. Keep the inverted colour explicit. */
.nav a.btn, .nav a.btn:hover { color: var(--paper); }
.nav a.btn--ghost, .nav a.btn--ghost:hover { color: var(--ink); }
/* ------------------------------------------------------------- menu button */

.menu { display: none; }

@media (max-width: 40rem) {
  .menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-inline-end: -0.5rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
  }
  .menu__bars { position: relative; width: 20px; height: 11px; }
  .menu__bars::before,
  .menu__bars::after {
    content: "";
    position: absolute;
    left: 0;
    width: 20px;
    height: 1.5px;
    background: currentColor;
    transition: transform 0.3s var(--ease);
  }
  .menu__bars::before { top: 0; }
  .menu__bars::after { bottom: 0; }
  .menu[aria-expanded="true"] .menu__bars::before { transform: translateY(4.75px) rotate(45deg); }
  .menu[aria-expanded="true"] .menu__bars::after { transform: translateY(-4.75px) rotate(-45deg); }

  /* Drop-down panel, anchored to the sticky header. */
  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 var(--gutter) 1.5rem;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
  }
  .nav[data-open="true"] { display: flex; }
  .nav a:not(.btn) {
    font-size: 1.0625rem;
    padding: 1rem 0;
    border-top: 1px solid var(--rule);
  }
  .nav a.btn { display: inline-flex; align-self: flex-start; margin-top: 1.25rem; }
}

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.6875rem 1.375rem;
  border: 1px solid var(--ink);
  border-radius: 980px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: opacity 0.2s var(--ease);
  white-space: nowrap;
}
.btn:hover { opacity: 0.78; }

/* Marks are painted through a mask rather than placed as images, so the glyph
   takes currentColor and is correct on a filled pill, an outlined pill, and in
   either colour scheme without a filter for each case. */
.btn__mark {
  width: 1.0625rem;
  height: 1.0625rem;
  flex: none;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.btn__mark--owasp {
  -webkit-mask-image: url("../img/owasp.svg");
  mask-image: url("../img/owasp.svg");
}
.btn__mark--github {
  -webkit-mask-image: url("../img/github.svg");
  mask-image: url("../img/github.svg");
}

.btn--ghost { background: transparent; color: var(--ink); }
.band--ink .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.band--ink .btn--ghost { background: transparent; color: var(--paper); }

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

/* The two pills carry provenance, so the route into the standard itself sits
   below them as plain links: present and reachable, without competing with the
   credibility signals for attention. */
.hero__onward {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin: 1.5rem 0 0;
  font-size: 0.9375rem;
}
.hero__onward a {
  color: var(--ink-70);
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 1px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.hero__onward a::after { content: " \2192"; }
.hero__onward a:hover { color: var(--ink); border-color: var(--ink); }

/* -------------------------------------------------------------------- hero */

/* The hero occupies the first screen and nothing else, so the fold lands on
   its bottom edge instead of slicing through the section beneath it. svh keeps
   this honest on phones, where browser chrome changes the usable height. */
.hero {
  min-height: calc(100svh - 3.75rem);
  display: grid;
  align-content: center;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  padding-block: clamp(2rem, 5vh, 3.5rem) clamp(2.5rem, 6vh, 4rem);
}
/* Two columns only where there is something to put in the second one. The inner
   pages place their eyebrow, heading, and lede directly in the hero, so an
   unscoped rule dealt those three into grid cells: the heading squeezed into the
   narrow right column and broke a word per line, while the eyebrow and lede sat
   stranded on the left with most of the screen empty. */
@media (min-width: 62rem) {
  .hero--split { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: center; }
}

/* A page header rather than a landing screen. Holding a full viewport open for
   a heading and two lines of copy leaves most of it blank, and pushes the
   content that explains the page below the fold for no gain. The eyebrow and
   lede carry their own margins, so the grid gap is removed here. */
.hero--text {
  min-height: 0;
  gap: 0;
  padding-block: clamp(3rem, 9vh, 5.5rem) clamp(2.5rem, 6vh, 4rem);
}
.hero--text .display { max-width: 28ch; }
.hero--text .lede { max-width: 58ch; }

/* The full poster, never cropped: object-fit contain scales it inside the box
   so every edge of the artwork stays visible at any viewport. */
.hero__figure { margin: 0; min-width: 0; }
/* max-width and max-height together with auto dimensions let the browser scale
   the artwork inside both limits at its own aspect ratio: nothing is cropped,
   and the frame hugs the image rather than letterboxing it. */
.hero__figure img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100svh - 13rem);
  margin-inline: auto;
  border: 1px solid var(--rule);
}
@media (max-width: 61.99rem) {
  /* Portrait artwork plus full copy cannot share one phone screen; let the
     page scroll rather than shrinking the poster to a thumbnail. */
  .hero { min-height: 0; }
  .hero__figure img { max-height: none; max-width: min(26rem, 100%); }
}

/* ------------------------------------------------------------------- grids */

.cols {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 56rem) {
  .cols--aside { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
  .cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 40rem) and (max-width: 55.999rem) {
  .cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pillar { border-top: 1px solid var(--rule); padding-top: 1.5rem; }
.pillar h3 { margin-bottom: 0.75rem; }
.pillar p { color: var(--ink-70); font-size: 1rem; margin: 0; }

/* ------------------------------------------------------------- numbered set */

.set { list-style: none; margin: clamp(2.5rem, 6vw, 4rem) 0 0; padding: 0; }
.set > li {
  display: grid;
  gap: 0.5rem 2rem;
  grid-template-columns: 1fr;
  padding: 1.75rem 0;
  border-top: 1px solid var(--rule);
}
.set > li:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 48rem) {
  .set > li { grid-template-columns: 4.5rem minmax(0, 20rem) minmax(0, 1fr); align-items: baseline; }
}
.set__num {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-40);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.set__name { font-weight: 600; letter-spacing: -0.02em; font-size: 1.0625rem; }
.set__body { color: var(--ink-70); font-size: 1rem; }
.set__body p { margin: 0 0 0.625rem; }
.set__body p:last-child { margin: 0; }
.set__meta {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--ink-40);
  margin-top: 0.625rem;
}

/* ------------------------------------------------------------------- table */

.table { width: 100%; border-collapse: collapse; margin-top: clamp(2rem, 5vw, 3.5rem); }
.table caption { text-align: left; color: var(--ink-55); font-size: 0.9375rem; padding-bottom: 1rem; }
.table th, .table td {
  text-align: left;
  vertical-align: top;
  padding: 1.125rem 1.25rem 1.125rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.table thead th {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-55);
  font-weight: 400;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 0.75rem;
}
.table td:first-child { font-weight: 600; letter-spacing: -0.015em; padding-right: 2rem; }
.table--fixed { table-layout: fixed; }

/* ----------------------------------------------------------------- callout */

.callout {
  border-left: 2px solid currentColor;
  padding: 0.25rem 0 0.25rem 1.5rem;
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  max-width: 60ch;
}
.callout p { font-size: clamp(1.0625rem, 1.8vw, 1.25rem); letter-spacing: -0.015em; line-height: 1.5; }

.note {
  border: 1px solid var(--rule);
  padding: clamp(1.25rem, 3vw, 2rem);
  margin-top: clamp(2rem, 5vw, 3rem);
}
.note h3 { margin-bottom: 0.875rem; }
.note p { color: var(--ink-70); font-size: 0.9375rem; }

/* ----------------------------------------------------------------- listing */

.plain { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.plain li {
  padding: 0.875rem 0;
  border-top: 1px solid var(--rule);
  color: var(--ink-70);
  font-size: 1rem;
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: 0.75rem;
}
.plain li::before { content: "—"; color: var(--ink-40); }

/* ------------------------------------------------------------------ footer */

.foot { background: var(--ink); color: var(--paper); padding-block: clamp(3.5rem, 8vw, 6rem); }
.foot { --rule: rgba(255,255,255,.18); --rule-strong: rgba(255,255,255,.34); --ink-55: rgba(255,255,255,.58); --ink-70: rgba(255,255,255,.72); }
.foot h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: 1.25rem; }

/* The pill takes its fill from the page background, so inside the inverted
   footer it came out black-on-black: the box vanished and the label was left
   floating unattached. Same correction the ink bands already carry. Because
   both the footer background and these tokens invert together, one rule is
   correct in light and dark. */
.foot .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.foot .btn--ghost { background: transparent; color: var(--paper); border-color: var(--rule-strong); }
.foot .btn--ghost:hover { border-color: var(--paper); opacity: 1; }

/* -- closing signature ---------------------------------------------------- */
/* Reads as the same identity as the masthead, one size up: this is where the
   page signs off, so the lockup carries weight rather than sitting in as a
   utility strip. The rule beneath it separates identity from invitation. */
.foot__brand {
  display: flex;
  align-items: center;
  gap: 0.8125rem;
  padding-bottom: clamp(1.75rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(2.25rem, 5vw, 3.25rem);
}
.foot__brand .brand__owasp { width: 38px; height: 38px; }
.foot__brand .brand__rule { height: 36px; }
.foot__brand .brand__name { gap: 0.375rem; }
.foot__brand .brand__name strong { font-size: clamp(1.375rem, 3.2vw, 1.75rem); letter-spacing: -0.04em; }
/* Kept on narrow screens, unlike the masthead: there is room here, and the
   expansion is the whole point of the acronym. */
.foot__brand .brand__name small {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  white-space: normal;
}
/* The mark is black artwork delivered through <img>, so it needs inverting
   against the dark footer. The dark-mode block cancels this, because there the
   footer is the light surface. */
.foot .brand__owasp { filter: invert(1); }

/* -- invitation panel ----------------------------------------------------- */
/* Boxing the call to action gives the button an owner. Loose in the flow it
   read as a stray link between two blocks of text. */
.foot__cta {
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: clamp(1.625rem, 3.6vw, 2.5rem);
}
.foot__cta > :last-child { margin-bottom: 0; }
.foot__cta p:not(.eyebrow) { color: var(--ink-70); max-width: 56ch; margin-bottom: 0; }
.foot__cta .actions { margin-top: clamp(1.625rem, 3vw, 2.125rem); }

.foot__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; margin-top: clamp(2.75rem, 6vw, 3.5rem); }
@media (min-width: 48rem) { .foot__grid { grid-template-columns: repeat(3, 1fr); } }
.foot__grid h4 {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-55);
  font-weight: 400;
  margin-bottom: 1rem;
}
.foot__grid ul { list-style: none; margin: 0; padding: 0; }
.foot__grid li { margin-bottom: 0.625rem; }
.foot__grid a { color: rgba(255,255,255,.82); font-size: 0.9375rem; border-bottom: 1px solid rgba(255,255,255,.28); padding-bottom: 1px; }
.foot__grid a:hover { color: #fff; border-color: #fff; }

/* -- accountability ------------------------------------------------------- */
/* Standards are expected to say who edits them, so this is a provenance
   statement rather than a credit: named person, stated role, institutional
   address. It sits in the footer because that is where a reader looks for who
   stands behind a document, and deliberately not in the hero, where a personal
   name would read as promotion and weaken the institutional framing. */
.foot__lead {
  display: grid;
  gap: 0.75rem 2.5rem;
  grid-template-columns: 1fr;
  margin-top: clamp(2.75rem, 6vw, 3.75rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
}
@media (min-width: 48rem) {
  .foot__lead { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: baseline; }
}
.foot__lead h4 {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-55);
  font-weight: 400;
  margin: 0;
}
.foot__lead-name { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 0.375rem; }
.foot__lead-name span { font-weight: 400; color: var(--ink-70); letter-spacing: 0; }
.foot__lead-links { display: flex; flex-wrap: wrap; gap: 0.375rem 1.5rem; margin: 0; font-size: 0.875rem; }
.foot__lead-links a { color: var(--ink-70); border-bottom: 1px solid var(--rule-strong); padding-bottom: 1px; }
.foot__lead-links a:hover { color: var(--paper); border-color: var(--paper); }
/* Two dense grey paragraphs at the same weight gave five undifferentiated
   lines of fine print. Split by job instead: a scannable record line, then the
   notices set smaller and looser so they are legible without competing. */
.legal { margin-top: clamp(2.75rem, 6vw, 3.75rem); padding-top: 1.75rem; border-top: 1px solid var(--rule); }
.legal__meta {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-70);
  line-height: 1.9;
  margin: 0 0 1.125rem;
  max-width: none;
}
.legal__fine {
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--ink-55);
  max-width: 84ch;
  margin: 0;
  text-wrap: pretty;
}

/* ------------------------------------------------------------------ motion */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* -------------------------------------------------------------- dark mode
   Straight inversion. Still only black and white. Delete this block to
   force the light appearance everywhere. */

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #000000;
    --ink: #ffffff;
    --ink-70: rgba(255, 255, 255, 0.72);
    --ink-55: rgba(255, 255, 255, 0.58);
    --ink-40: rgba(255, 255, 255, 0.42);
    --rule: rgba(255, 255, 255, 0.18);
    --rule-strong: rgba(255, 255, 255, 0.34);
    --veil: rgba(0, 0, 0, 0.72);
  }
  .band--ink { background: #fff; color: #000; }
  .band--ink { --rule: rgba(0,0,0,.14); --ink-70: rgba(0,0,0,.70); --ink-55: rgba(0,0,0,.55); --ink-40: rgba(0,0,0,.40); }
  .band--ink .btn { background: #000; color: #fff; border-color: #000; }
  .band--ink .btn--ghost { background: transparent; color: #000; }
  .foot { background: #fff; color: #000; }
  .foot { --rule: rgba(0,0,0,.14); --rule-strong: rgba(0,0,0,.30); --ink-55: rgba(0,0,0,.55); --ink-70: rgba(0,0,0,.70); }
  .foot__grid a { color: rgba(0,0,0,.82); border-color: rgba(0,0,0,.28); }
  .foot__grid a:hover { color: #000; border-color: #000; }
  /* Here the footer is the light surface, so the mark is already the right
     colour and the inversion below would render it white-on-white. */
  .foot .brand__owasp { filter: none; }
  /* An SVG referenced through <img> is a separate document and cannot inherit
     currentColor, so the mark is inverted instead of recoloured. */
  .brand__owasp, .brand img[src$="mark.svg"] { filter: invert(1); }
}

/* ------------------------------------------------------------------- print */

@media print {
  .masthead, .actions, .reveal { position: static; opacity: 1; transform: none; }
  body { font-size: 11pt; }
  .band--ink, .foot { background: #fff !important; color: #000 !important; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #000; }
}