/* White Hat Harbor: one stylesheet for every page. The chrome borrows a surveillance console's vocabulary (targeting
   brackets, label tabs, a camera-feed timestamp) while the docs stay plain, readable text. Fonts are self-hosted and
   _headers sets a strict Content-Security-Policy, so pages must not use style="" attributes, inline scripts, or files
   from other sites. */

@font-face { font-family: Barlow; src: url(fonts/barlow-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Barlow; src: url(fonts/barlow-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: Barlow; src: url(fonts/barlow-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url(fonts/barlow-semi-condensed-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url(fonts/barlow-semi-condensed-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(fonts/jetbrains-mono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }

/* Registered so the brackets can animate between colours and sizes when a frame locks on. */
@property --bc { syntax: "<color>"; inherits: true; initial-value: #8fa6ad; }
@property --bl { syntax: "<length>"; inherits: true; initial-value: 14px; }

:root {
  color-scheme: dark;
  --night: #081216;
  --deep: #0d1c22;
  --hull: #1f3740;
  --signal: #38e1d4;
  --foam: #e6f0f1;
  --fog: #8fa6ad;
  --caution: #f2c14e;
  --alert: #ff5a4f;
  --display: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  --text: Barlow, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --page: 42rem;
  --gutter: 16px;
}
@media (min-width: 40rem) { :root { --gutter: 24px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  position: relative; margin: 0; background: var(--night); color: var(--foam);
  font: 400 1.0625rem/1.6 var(--text); -webkit-font-smoothing: antialiased;
}
/* Faint console grid behind the top of every page, fading out before the reading starts. */
body::before {
  content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: 38rem; pointer-events: none;
  background:
    radial-gradient(60rem 22rem at 70% -6rem, rgb(56 225 212 / .10), transparent 70%),
    linear-gradient(rgb(56 225 212 / .055) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgb(56 225 212 / .055) 1px, transparent 1px) 0 0 / 32px 32px;
  -webkit-mask-image: linear-gradient(#000 30%, transparent);
  mask-image: linear-gradient(#000 30%, transparent);
}
.home { --page: 64rem; }
::selection { background: rgb(56 225 212 / .32); }

header, main, footer { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }
/* Rules drawn as backgrounds so they stop at the text edge instead of running under the side padding. */
header, footer { background: linear-gradient(var(--hull) 0 0) no-repeat 50% 100% / calc(100% - 2 * var(--gutter)) 1px; }
footer { background-position: 50% 0; }

/* ---- Targeting brackets: four corners drawn with gradients, coloured by --bc, --bl long, --bt thick ---- */
.viewfinder::before, .target::before, .note, .shot, header .brand img:not(.mark) {
  --bt: 2px;
  background:
    linear-gradient(var(--bc) 0 0) top left / var(--bl) var(--bt),
    linear-gradient(var(--bc) 0 0) top left / var(--bt) var(--bl),
    linear-gradient(var(--bc) 0 0) top right / var(--bl) var(--bt),
    linear-gradient(var(--bc) 0 0) top right / var(--bt) var(--bl),
    linear-gradient(var(--bc) 0 0) bottom left / var(--bl) var(--bt),
    linear-gradient(var(--bc) 0 0) bottom left / var(--bt) var(--bl),
    linear-gradient(var(--bc) 0 0) bottom right / var(--bl) var(--bt),
    linear-gradient(var(--bc) 0 0) bottom right / var(--bt) var(--bl);
  background-repeat: no-repeat;
}

/* ---- Header ---- */
header {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px;
  padding-top: 18px; padding-bottom: 14px;
}
header .brand {
  display: flex; align-items: center; gap: 12px; margin-right: auto;
  font: 600 1.2rem/1.2 var(--display); letter-spacing: .01em; color: var(--foam); text-decoration: none;
}
header .brand img { width: 30px; height: 30px; }
header .brand img:not(.mark) { --bc: var(--fog); --bl: 7px; width: 40px; height: 40px; padding: 5px; }
nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
nav a {
  font: 500 1.02rem/1.6 var(--display); letter-spacing: .02em; color: var(--fog); text-decoration: none;
}
nav a:hover { color: var(--foam); }
nav a[aria-current] {
  color: var(--foam); text-decoration: underline; text-decoration-color: var(--signal);
  text-decoration-thickness: 2px; text-underline-offset: 8px;
}

/* ---- Text ---- */
a { color: var(--signal); text-decoration-color: rgb(56 225 212 / .45); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-color: var(--signal); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; color: var(--foam); text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 2.75rem); line-height: 1.08; letter-spacing: -.005em; margin: 2.75rem 0 .75rem; }
h2 { font-size: 1.6rem; line-height: 1.2; margin: 2.6rem 0 .6rem; }
h3 { font-size: 1.22rem; line-height: 1.25; margin: 1.8rem 0 .4rem; }
p, ul, ol { margin: 0 0 1rem; }
ul, ol { padding-left: 1.3rem; }
li { margin: .3rem 0; }
li::marker { color: var(--signal); }
strong { font-weight: 600; }
.lede { color: var(--fog); font-size: 1.18rem; line-height: 1.5; margin-top: 0; }
code {
  font: 400 .84em/1.4 var(--mono); color: #cfeae9; background: var(--deep);
  border: 1px solid var(--hull); border-radius: 3px; padding: .08em .35em; overflow-wrap: anywhere;
}
kbd {
  font: 400 .82em/1.4 var(--mono); color: var(--foam); background: var(--deep);
  border: 1px solid var(--hull); border-bottom-width: 2px; border-radius: 3px; padding: .05em .4em;
}

table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; margin: 1.25rem 0 1.5rem; font-size: .96rem; line-height: 1.5; }
th, td { text-align: left; vertical-align: top; padding: .55rem .9rem .55rem 0; border-bottom: 1px solid var(--hull); }
th { font: 600 .95rem/1.3 var(--display); letter-spacing: .02em; color: var(--fog); border-bottom-color: rgb(56 225 212 / .5); }
td:first-child { color: var(--foam); }

/* A bracketed callout for things to watch out for. */
.note {
  --bc: var(--caution); --bl: 10px;
  padding: .85rem 1.1rem; margin: 1.25rem 0; background-color: rgb(242 193 78 / .06);
}

/* Screenshots sit in a targeting frame. */
.shot { --bc: var(--fog); --bl: 18px; display: block; max-width: 100%; height: auto; padding: 10px; margin: 1.5rem 0; }

footer {
  color: var(--fog); font-size: .88rem; line-height: 1.55;
  margin-top: 4.5rem; padding-top: 1.5rem; padding-bottom: 3rem;
}

/* ---- Home: the hero is a camera frame that locks onto the headline once, on load ---- */
.viewfinder { position: relative; isolation: isolate; margin: 3rem 0 4.5rem; padding: clamp(1.75rem, 1rem + 4vw, 3.75rem); }
.viewfinder::before {
  --bc: var(--signal); --bl: 30px; --bt: 3px;
  content: ""; position: absolute; inset: 0; pointer-events: none;
  animation: lock .75s cubic-bezier(.2, .9, .25, 1) both;
}
.viewfinder::after {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 2px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--signal) 20% 80%, transparent);
  box-shadow: 0 0 14px 1px rgb(56 225 212 / .6);
  animation: sweep 1.2s .45s ease-in-out;
}
@keyframes lock { from { inset: -34px; opacity: 0; } 50% { opacity: 1; } to { inset: 0; opacity: 1; } }
@keyframes sweep { 0% { top: 0; opacity: 0; } 12%, 88% { opacity: .9; } 100% { top: 100%; opacity: 0; } }
.viewfinder h1 {
  font-size: clamp(2.6rem, 1.2rem + 6vw, 5rem); line-height: 1; letter-spacing: -.012em;
  max-width: 12em; margin: 1.5rem 0 1.25rem;
}
.viewfinder .lede { max-width: 34em; margin: 0; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); }
.stamp {
  display: flex; align-items: center; gap: .6rem; min-height: 1.4em; margin: 0;
  font: 400 .8rem/1.4 var(--mono); letter-spacing: .04em; color: var(--fog);
}
.stamp::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 8px var(--signal); }

/* ---- Home: each app is a subject, its icon boxed and labelled with its platform ---- */
.apps h2 { margin: 0 0 .5rem; }
@media (min-width: 62rem) {
  .apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3.5rem; }
  .apps h2 { grid-column: 1 / -1; }
}
.subject {
  display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1.75rem;
  padding: 2.25rem 0 2.5rem; border-top: 1px solid var(--hull);
}
.target {
  position: relative; display: grid; place-items: center; align-self: start;
  width: 6rem; aspect-ratio: 1; margin-top: .35rem;
}
.target img { width: 3.75rem; height: 3.75rem; }
.target::before {
  --bl: 12px; content: ""; position: absolute; inset: -6px; pointer-events: none;
  transition: inset .18s ease-out, --bc .18s ease-out, --bl .18s ease-out;
}
.subject:hover .target::before, .subject:focus-within .target::before { --bc: var(--signal); --bl: 18px; inset: 0; }
.tab {
  position: absolute; left: 50%; top: calc(100% + 12px); transform: translateX(-50%);
  font: 600 .72rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  color: var(--night); background: var(--fog); padding: 4px 7px 3px;
  transition: background-color .18s ease-out;
}
.subject:hover .tab, .subject:focus-within .tab { background: var(--signal); }
.file { max-width: 40rem; }
.file h3 { font-size: 1.6rem; margin: 0 0 .45rem; }
.file h3 a { color: var(--foam); text-decoration: none; }
.file h3 a:hover { color: var(--signal); }
.file p { margin: 0 0 1rem; }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .3rem 1.1rem; margin: 0 0 1.1rem; font-size: .98rem; }
.facts dt { font: 500 1rem/1.5 var(--display); letter-spacing: .02em; color: var(--fog); }
.facts dd { margin: 0; line-height: 1.5; }
.links { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font: 500 1.02rem/1.5 var(--display); letter-spacing: .02em; }
@media (max-width: 36rem) {
  .subject { grid-template-columns: 4.25rem minmax(0, 1fr); gap: 1.25rem; }
  .target { width: 4.25rem; }
  .target img { width: 2.75rem; height: 2.75rem; }
  .file h3 { font-size: 1.4rem; }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .facts dd { margin-bottom: .5rem; }
}

/* ---- 404: the frame keeps searching and finds nothing ---- */
.viewfinder--lost::before { --bc: var(--alert); }
.viewfinder--lost::after {
  background: linear-gradient(90deg, transparent, var(--alert) 20% 80%, transparent);
  box-shadow: 0 0 14px 1px rgb(255 90 79 / .55);
  animation: sweep 2.6s .45s ease-in-out infinite;
}
.viewfinder--lost .stamp::before { background: var(--alert); box-shadow: 0 0 8px var(--alert); }
.viewfinder--lost h1 { font-size: clamp(2.4rem, 1.4rem + 4.5vw, 4rem); }

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation: none !important; transition: none !important; }
}

@media print {
  body { background: #fff; color: #000; }
  body::before, nav, .viewfinder::before, .viewfinder::after, .stamp { display: none; }
  a, h1, h2, h3, .lede, th, td:first-child, footer { color: #000; }
  code, kbd { background: none; color: #000; border-color: #999; }
  th, td { border-color: #999; }
  header, footer { background: none; }
  .note, .shot, .target::before { background: none; border: 1px solid #999; }
}