/* Ad Shots project wiki. Look: a print proof on a studio backdrop.
   Trim-line magenta is the one accent; fold-line teal marks things still pending. */
@font-face {
  font-family: "Bodoni Moda";
  src: url("fonts/bodoni-moda-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --backdrop: #e6e7e3;
  --sheet: #f8f8f5;
  --well: #eeefeb;
  --ink: #1c1f1d;
  --ink-2: #4f5752;
  --ink-3: #6b736e;
  --line: #d2d5ce;
  --trim: #b3134f;
  --trim-soft: #f6dfe7;
  --fold: #0b6f78;
  --fold-soft: #dcecec;
  --ok: #2c6a3f;
  --ok-soft: #dfeadf;
  --warn: #7d5200;
  --warn-soft: #f1e7cf;
  --quiet-soft: #e3e5e0;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --side: 272px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--s5); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body {
  margin: 0;
  background: var(--backdrop);
  color: var(--ink);
  font: 16px/1.6 var(--sans);
  font-variant-numeric: tabular-nums;
  caret-color: var(--trim);
  scrollbar-color: #b9bdb5 var(--backdrop);
}
::selection { background: var(--trim); color: #fff; }
:focus-visible { outline: 2px solid var(--trim); outline-offset: 2px; border-radius: 3px; }
a { color: var(--trim); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.skip { position: absolute; left: var(--s4); top: -100px; background: var(--ink); color: #fff; padding: var(--s2) var(--s4); border-radius: 6px; z-index: 10; }
.skip:focus { top: var(--s4); }

/* Sidebar */
.side {
  position: fixed; inset: 0 auto 0 0; width: var(--side);
  overflow-y: auto; padding: var(--s5) var(--s4) var(--s6);
  border-right: 1px solid var(--line);
}
.menu > summary { display: none; }
.brand { display: flex; align-items: center; gap: var(--s3); color: var(--ink); text-decoration: none; padding: var(--s1) var(--s2); margin-bottom: var(--s5); }
.brand img { border-radius: 9px; }
.brand strong { display: block; font-size: 17px; line-height: 1.2; }
.brand small { display: block; color: var(--ink-3); font-size: 13px; }
.search input {
  width: 100%; height: 40px; padding: 0 var(--s3);
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--sheet); color: var(--ink); font: inherit; font-size: 15px;
}
.search input::placeholder { color: var(--ink-3); }
.search input:focus { outline: 2px solid var(--trim); outline-offset: 0; border-color: transparent; }
#nav { margin-top: var(--s4); }
#nav h2 { margin: var(--s5) var(--s2) var(--s1); font-size: 13px; font-weight: 500; color: var(--ink-3); }
#nav a, .results a {
  display: block; padding: 7px var(--s2); border-radius: 6px;
  color: var(--ink-2); text-decoration: none; font-size: 15px; line-height: 1.35;
}
#nav a:hover, .results a:hover { background: var(--quiet-soft); color: var(--ink); }
#nav a[aria-current] { color: var(--ink); font-weight: 600; background: var(--sheet); box-shadow: inset 2px 0 0 var(--trim); }
.results { margin-top: var(--s4); }
.results small { display: block; color: var(--ink-3); font-size: 13px; }
.results strong { font-weight: 500; color: var(--ink); }
.results p { margin: var(--s2); color: var(--ink-2); font-size: 15px; }

/* Page */
main {
  margin-left: var(--side);
  display: grid; grid-template-columns: minmax(0, 780px) 200px; gap: var(--s7);
  justify-content: center; align-items: start;
  padding: var(--s7) var(--s6) var(--s8);
}
article { background: var(--sheet); border-radius: 4px; padding: var(--s7) var(--s7) var(--s6); box-shadow: 0 1px 0 #fff inset, 0 18px 40px -28px rgba(28, 31, 29, 0.45); min-width: 0; }

/* The one bold move: the title sits inside printer's crop marks. */
.title { position: relative; padding: var(--s5) var(--s5) var(--s5); margin: 0 0 var(--s6); outline: 1px dashed var(--line); outline-offset: -1px; }
.title::before, .title::after { content: ""; position: absolute; inset: -14px; pointer-events: none; }
.title::before {
  background:
    linear-gradient(var(--trim), var(--trim)) left 14px top 0 / 1px 9px,
    linear-gradient(var(--trim), var(--trim)) left 0 top 14px / 9px 1px,
    linear-gradient(var(--trim), var(--trim)) right 14px top 0 / 1px 9px,
    linear-gradient(var(--trim), var(--trim)) right 0 top 14px / 9px 1px,
    linear-gradient(var(--trim), var(--trim)) left 14px bottom 0 / 1px 9px,
    linear-gradient(var(--trim), var(--trim)) left 0 bottom 14px / 9px 1px,
    linear-gradient(var(--trim), var(--trim)) right 14px bottom 0 / 1px 9px,
    linear-gradient(var(--trim), var(--trim)) right 0 bottom 14px / 9px 1px;
  background-repeat: no-repeat;
}
.title::after { display: none; }
.crumb { margin: 0 0 var(--s2); color: var(--ink-3); font-size: 14px; }
h1 { margin: 0; font-family: "Bodoni Moda", "Bodoni 72", Didot, serif; font-weight: 560; font-size: clamp(34px, 5vw, 50px); line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance; }
.lede { margin: var(--s4) 0 0; font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 60ch; text-wrap: pretty; }

h2 { margin: var(--s7) 0 var(--s3); font-size: 24px; line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; }
h3 { margin: var(--s6) 0 var(--s2); font-size: 18px; line-height: 1.3; }
p, ul, ol { margin: 0 0 var(--s4); max-width: 70ch; }
ul, ol { padding-left: 1.3em; }
li { margin-bottom: var(--s2); }
li::marker { color: var(--ink-3); }
strong { font-weight: 600; }
code { font: 0.9em var(--mono); background: var(--well); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }

.checks { list-style: none; padding-left: 0; }
.check { display: grid; grid-template-columns: 18px 1fr; gap: var(--s3); align-items: start; }
.box { width: 18px; height: 18px; margin-top: 4px; border: 1.5px solid var(--ink-3); border-radius: 4px; }
.check.done .box { border-color: var(--ok); background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.5 9.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.check.done > span:last-child { color: var(--ink-2); }

.table { overflow-x: auto; margin: 0 0 var(--s5); border: 1px solid var(--line); border-radius: 8px; }
table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.45; }
th, td { text-align: left; vertical-align: top; padding: 10px var(--s4); border-bottom: 1px solid var(--line); }
th { background: var(--well); font-weight: 600; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td:first-child { font-weight: 500; min-width: 9em; }

.tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 13px; font-weight: 500; line-height: 1.5; white-space: nowrap; }
.tag-settled, .tag-built { background: var(--ok-soft); color: var(--ok); }
.tag-open, .tag-estimate { background: var(--warn-soft); color: var(--warn); }
.tag-pending, .tag-planned { background: var(--fold-soft); color: var(--fold); }
.tag-hold { background: var(--quiet-soft); color: var(--ink-2); }
.tag-dropped { background: var(--trim-soft); color: var(--trim); }

.note { margin: 0 0 var(--s5); padding: var(--s4) var(--s5); background: var(--fold-soft); border-radius: 8px; color: #173e42; max-width: 70ch; }
.note a { color: inherit; }

.code { position: relative; margin: 0 0 var(--s5); background: #23272a; border-radius: 8px; }
.code pre { margin: 0; padding: var(--s5); overflow-x: auto; color: #e8eae6; font: 13.5px/1.6 var(--mono); }
.code code { background: none; padding: 0; font: inherit; overflow-wrap: normal; }
.copy { position: absolute; top: var(--s2); right: var(--s2); min-height: 32px; padding: 0 var(--s3); border: 1px solid #4a5054; border-radius: 6px; background: #2f3437; color: #e8eae6; font: 500 13px var(--sans); cursor: pointer; }
.copy:hover { background: #3a4044; }

figure { margin: var(--s5) 0 var(--s6); }
figure img { display: block; max-width: 100%; max-height: 620px; height: auto; border-radius: 8px; border: 1px solid var(--line); }
figcaption { margin-top: var(--s2); color: var(--ink-3); font-size: 14px; max-width: 70ch; }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--line); }
.pager a { display: block; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 500; }
.pager a:hover { border-color: var(--trim); }
.pager small { display: block; color: var(--ink-3); font-weight: 400; font-size: 13px; }
.pager .next { text-align: right; }
.built { margin: var(--s5) 0 0; color: var(--ink-3); font-size: 13px; }

.toc { position: sticky; top: var(--s7); font-size: 14px; }
.toc h2 { margin: 0 0 var(--s2); font-size: 13px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.toc a { display: block; padding: 5px 0; color: var(--ink-2); text-decoration: none; line-height: 1.35; }
.toc a:hover { color: var(--trim); }

@media (max-width: 1240px) {
  main { grid-template-columns: minmax(0, 780px); }
  .toc { display: none; }
}
@media (max-width: 900px) {
  .side { position: sticky; top: 0; width: auto; inset: auto; padding: 0; border-right: 0; border-bottom: 1px solid var(--line); background: var(--backdrop); z-index: 5; max-height: 100dvh; }
  .menu > summary { display: flex; align-items: center; gap: var(--s3); min-height: 56px; padding: 0 var(--s4); cursor: pointer; list-style: none; font-weight: 600; }
  .menu > summary::-webkit-details-marker { display: none; }
  .menu > summary img { border-radius: 7px; }
  .menu-word { margin-left: auto; font-weight: 500; font-size: 14px; color: var(--ink-2); border: 1px solid var(--line); border-radius: 6px; padding: 5px 12px; }
  .menu[open] { padding-bottom: var(--s5); }
  .menu[open] > summary ~ * { margin-left: var(--s4); margin-right: var(--s4); }
  .brand { display: none; }
  #nav a, .results a { padding: 11px var(--s2); }
  main { margin-left: 0; padding: var(--s4) var(--s3) var(--s7); }
  article { padding: var(--s6) var(--s4) var(--s5); }
  .title { padding: var(--s4); }
  .lede { font-size: 17px; }
  h2 { margin-top: var(--s6); font-size: 22px; }
}
@media print {
  .side, .toc, .pager, .copy { display: none; }
  main { margin: 0; padding: 0; display: block; }
  article { box-shadow: none; padding: 0; }
}
@media (max-width: 900px) { table { min-width: 540px; } }