/* DuckDeck guide pages: shared stylesheet.
   Used by every page under a /<topic>/ guide folder. The homepage keeps its
   own inline styles, since it is a different, full-bleed layout. */
:root {
  --accent: #FF7A18;
  --paper: #E9E5DA;
  --bg: #131313;
  --ink: #0E0E0E;
  --line: rgba(255,255,255,.14);
  --text: #F1EEE6;
  --muted: #97948C;
  --pad: clamp(20px, 3.2vw, 52px);
  /* One reading spine. The article, the masthead and the footer all sit on
     this column so the page reads down the middle instead of hugging an edge. */
  --measure: 680px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--text);
  font-family: "Newsreader", Georgia, serif;
  line-height: 1.5; overflow-x: hidden;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 30;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity: .1; mix-blend-mode: screen;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: #131313; }
.mono { font-family: "IBM Plex Mono", monospace; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: #131313; padding: 8px 16px; font-weight: 700; z-index: 60; }
.skip:focus { left: 8px; }

/* ================= MASTHEAD ================= */
.masthead {
  padding: 22px var(--pad); border-bottom: 1px solid var(--line);
}
.masthead .bar {
  display: flex; align-items: center; gap: 14px;
  max-width: var(--measure); margin: 0 auto;
}
.masthead svg { width: 32px; height: 32px; flex: none; }
.masthead .wm {
  font-family: "Archivo Black", sans-serif; font-size: 19px;
  letter-spacing: -.01em; text-transform: uppercase;
}
.masthead .wm .o { color: var(--accent); }
.masthead .tag {
  margin-left: auto; font-family: "IBM Plex Mono", monospace; font-size: 12.5px;
  font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}

/* ================= ARTICLE ================= */
article { padding: 0 var(--pad) 40px; }
.wrap { max-width: var(--measure); margin: 0 auto; }

.sec-label {
  font-family: "IBM Plex Mono", monospace; font-size: 12.5px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
}

.head { padding: 64px 0 0; }
.head h1 {
  font-family: "Archivo Black", sans-serif; text-transform: uppercase;
  font-size: clamp(32px, 5.4vw, 76px); line-height: .94; letter-spacing: -.015em;
  margin: 26px 0 0; max-width: 18ch;
}
.head h1 .o { color: var(--accent); }
.head .stand {
  font-size: clamp(19px, 2.1vw, 27px); line-height: 1.32; margin-top: 30px; max-width: 46ch;
}
.head .meta {
  font-family: "IBM Plex Mono", monospace; font-size: 12.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-top: 26px;
}

/* jump list */
.jump { border-top: 1px solid var(--line); margin-top: 48px; padding-top: 26px; }
.jump ol { list-style: none; counter-reset: j; display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.jump li { counter-increment: j; position: relative; padding-left: 38px; font-size: 18px; }
.jump li::before {
  content: "/0" counter(j); position: absolute; left: 0; top: 3px;
  font-family: "IBM Plex Mono", monospace; font-size: 13px; font-weight: 700; color: var(--accent);
}
.jump a { text-decoration-color: var(--line); text-underline-offset: 3px; }
.jump a:hover { color: var(--accent); }

/* body copy */
section.step { border-top: 1px solid var(--line); margin-top: 56px; padding-top: 40px; }
section.step h2 {
  font-family: "Archivo Black", sans-serif; text-transform: uppercase;
  font-size: clamp(26px, 3.4vw, 46px); line-height: 1.02; letter-spacing: -.01em;
  margin-top: 20px; max-width: 20ch;
}
section.step h2 .o { color: var(--accent); }
h3 {
  font-family: "IBM Plex Mono", monospace; font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--accent);
  margin: 40px 0 14px;
}
p { font-size: 19.5px; margin-top: 20px; }
p.lead { font-size: 21px; }
em { color: var(--accent); font-style: italic; }

code {
  font-family: "IBM Plex Mono", monospace; font-size: .84em; color: var(--accent);
  background: var(--ink); border: 1px solid var(--line); border-radius: 3px;
  padding: 2px 7px; white-space: nowrap;
}

ol.steps { list-style: none; counter-reset: s; margin-top: 24px; }
ol.steps li {
  counter-increment: s; position: relative; padding: 13px 0 13px 52px;
  font-size: 19px; border-top: 1px solid var(--line);
}
ol.steps li:first-child { border-top: none; }
ol.steps li::before {
  content: counter(s); position: absolute; left: 0; top: 13px;
  font-family: "IBM Plex Mono", monospace; font-size: 13px; font-weight: 700;
  color: var(--accent); border: 1px solid var(--line); border-radius: 999px;
  width: 30px; height: 30px; display: grid; place-items: center;
}

.note {
  border-left: 2px solid var(--accent); background: var(--ink);
  padding: 20px 24px; margin-top: 30px;
}
.note p { margin-top: 0; font-size: 18px; color: var(--muted); }
.note p b { color: var(--text); font-weight: 500; }

/* Registry and file paths run wider than the reading column. Inline code is
   nowrap by design, so long paths get their own block that wraps instead of
   being clipped away by the overflow guard on body. */
code.path {
  display: block; white-space: normal; overflow-wrap: anywhere;
  padding: 11px 13px; margin-top: 9px; line-height: 1.5;
}

/* Comparison tables. The scroller keeps a wide table inside its own box so the
   page body never scrolls sideways on a phone. */
.tw { overflow-x: auto; margin-top: 30px; border: 1px solid var(--line); }
table.cmp { border-collapse: collapse; width: 100%; min-width: 520px; background: var(--ink); }
table.cmp th, table.cmp td {
  text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line);
  font-size: 16.5px; vertical-align: top;
}
table.cmp th {
  font-family: "IBM Plex Mono", monospace; font-size: 12.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--accent);
}
table.cmp td { color: var(--muted); }
table.cmp td:first-child { color: var(--text); }
table.cmp tr:last-child td { border-bottom: none; }
table.cmp .yes { color: var(--accent); }

figure { margin-top: 34px; }
figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
figcaption {
  font-family: "IBM Plex Mono", monospace; font-size: 12.5px; letter-spacing: .04em;
  color: var(--muted); margin-top: 12px; text-transform: uppercase;
}

/* ================= CLOSING PITCH ================= */
.pitch { border-top: 1px solid var(--line); margin-top: 64px; padding: 48px 0 0; }
.pitch h2 {
  font-family: "Archivo Black", sans-serif; text-transform: uppercase;
  font-size: clamp(30px, 4.4vw, 60px); line-height: .96; letter-spacing: -.015em;
  margin-top: 20px; max-width: 16ch;
}
.pitch h2 .o { color: var(--accent); }
.pitch ul { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-top: 30px; }
.pitch li { color: var(--muted); font-size: 18.5px; padding-left: 26px; position: relative; }
.pitch li::before { content: "✳"; position: absolute; left: 0; color: var(--accent); }
.pitch li b { color: var(--text); font-weight: 500; }
/* Marks the features that are behind Pro, so the list cannot read as
   "all of this is free" next to a free download button. */
.pitch .pro {
  font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 2px 8px; margin-left: 8px; white-space: nowrap;
}
.btn-pill {
  display: inline-block; color: #131313; margin-top: 34px;
  font-family: "Archivo Black", sans-serif; font-size: clamp(16px, 1.8vw, 22px);
  text-transform: uppercase; text-decoration: none;
  padding: 17px 40px; border-radius: 999px;
  background-color: var(--accent);
  background-image: url("../halftone.png"); background-size: 168px 168px;
  transition: transform .1s;
}
.btn-pill:hover { background-color: #FF9A3D; }
.btn-pill:active { transform: translateY(2px); }
.pitch .fine { font-size: 16px; color: var(--muted); margin-top: 16px; }

/* ================= FAQ ================= */
.faq { border-top: 1px solid var(--line); margin-top: 64px; padding-top: 40px; }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 56px; margin-top: 36px; }
.qa h3 { margin: 0 0 10px; }
.qa p { color: var(--muted); font-size: 17.5px; margin-top: 0; }

footer {
  border-top: 1px solid var(--line); margin-top: 72px; padding: 36px var(--pad) 46px;
  color: var(--muted); font-size: 15px;
}
footer .foot {
  max-width: var(--measure); margin: 0 auto;
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
footer .mono { font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; }
footer a { color: var(--muted); }
footer a:hover { color: var(--text); }

/* Reveals are opt-in: the copy is visible unless JS is there to animate it,
   so a crawler or a no-script reader still gets the whole guide. */
.js .rv { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; transition: none; } }

@media (max-width: 900px) {
  .masthead .tag { display: none; }
  .faq-grid { grid-template-columns: 1fr; gap: 30px; }
}