:root {
  --thumb: #b3261e;   /* Blockers - strongest */
  --index: #c9661d;   /* Critical */
  --middle: #a98b1a;  /* Normal */
  --ring: #3b6a8c;    /* Backlog */
  --pinky: #8a8f8c;   /* Notes - weakest */
  --ink: #2b2620;
  --paper: #f6efe1;
  --sheet: #fffdf8;
  --rule: #d9cdb5;
  --stamp: #b3261e;
  --muted: #8a7d68;
  --body: #5b5244;
  --wash: #efe6d2;
  --wash-blockers: rgba(179, 38, 30, .10);
  --wash-critical: rgba(201, 102, 29, .12);
  --wash-normal: rgba(169, 139, 26, .14);
  --wash-backlog: rgba(59, 106, 140, .11);
  --wash-notes: rgba(138, 143, 140, .15);
  --mono: "Courier New", Courier, monospace;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

* {
  box-sizing: border-box;
}

/* 106.25% of the reader's own default is the 17px base, and it makes 1rem
   mean that base everywhere. Setting it on body instead leaves rem resolving
   against the root's 16px, so every "1rem" lands a pixel under body text. */
html {
  font-size: 112.5%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  background-image: repeating-linear-gradient(transparent 0 27px, rgba(43, 38, 32, .06) 27px 28px);
  font-family: var(--serif);
  line-height: 1.65;
}

.page {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--stamp);
}

a:hover {
  color: var(--stamp);
}

p {
  margin: 0 0 1rem;
}

code {
  font-family: var(--mono);
  background: var(--wash);
  padding: .1em .35em;
  font-size: .9em;
}

/* Header */

header {
  text-align: center;
  padding: 3.5rem 0 2.5rem;
}

.clock {
  /* logo.2026.A; the circle is 110/112 of the box, so 57px keeps the old 56px dial */
  width: 57px;
  height: 57px;
  margin: 0 auto 1rem;
  background: url("../images/logo.svg") center / contain no-repeat;
}

h1 {
  margin: 0;
  font-size: clamp(2.4rem, 7vw, 3.6rem);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.1;
}

h1 sup {
  font-size: .35em;
  vertical-align: super;
  margin-left: -5px;
  line-height: 1;
}

.tag {
  display: inline-block;
  margin: 1rem auto .75rem;
  padding: .45rem 1rem;
  font-family: var(--mono);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--stamp);
  border: 3px double var(--stamp);
  border-radius: 4px;
  background: rgba(255, 255, 255, .4);
  transform: rotate(-3deg);
}

.lede {
  margin: .5rem auto 0;
  max-width: 40ch;
  font-size: 1.15rem;
  font-style: italic;
  color: var(--body);
}

.pitch {
  margin: 1.25rem auto 0;
  max-width: 50ch;
  font-size: 1.05rem;
  color: var(--body);
}

.cta {
  margin: 1.25rem auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
}

.btn {
  display: inline-block;
  padding: .55rem 1rem;
  font-family: var(--mono);
  font-size: .75rem;
  line-height: 1.65;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 2px solid var(--ink);
  background: var(--sheet);
  color: var(--ink);
  cursor: pointer;
}

.btn:hover {
  background: var(--ink);
  color: var(--paper);
}

/* Sections */

section {
  padding: 1.75rem 0;
}

section + section {
  border-top: 1px solid var(--rule);
}

h2 {
  margin: 0 0 1rem;
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--muted);
}

h2::before,
h2::after {
  content: " — ";
}

/* The Structure*/

.sheet {
  background: var(--sheet);
  border: 1px solid var(--rule);
  box-shadow: 4px 4px 0 var(--rule);
  padding: 1.5rem 1.5rem 1.75rem;
}

.code-wrap {
  position: relative;
}

.code-wrap pre {
  margin: 0;
  overflow-x: auto;
  white-space: pre-wrap;
  padding: 1.1rem 1.25rem;
  font-family: var(--mono);
  font-size: .95rem;
  line-height: 1.55;
  background: #fff;
  border: 1px dashed #b7a98b;
  color: var(--ink);
}

.copy-btn,
.replay-btn {
  position: absolute;
  top: .6rem;
  right: .6rem;
  padding: .35rem .7rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}

.copy-btn:hover,
.replay-btn:hover {
  background: var(--ink);
  color: var(--paper);
}

.sheet .fine {
  margin: .9rem 0 0;
  font-size: .95rem;
  color: var(--body);
}

/* The Five */

.defs-lede,
.practice-lede,
.syntax-lede,
.agents-lede {
  font-size: 1rem;
  color: var(--body);
}

dl {
  margin: 0;
}

dl div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: .6rem 0;
  border-top: 1px dotted var(--rule);
}

dl div:first-child {
  border-top: 0;
}

dt {
  font-family: var(--mono);
  font-weight: 700;
  font-size: .95rem;
  white-space: nowrap;
}

dt::before {
  /*content: "## ";*/
  font-weight: 400;
  color: var(--muted);
}

dl div:nth-child(1) dt { color: var(--thumb); }
dl div:nth-child(2) dt { color: var(--index); }
dl div:nth-child(3) dt { color: var(--middle); }
dl div:nth-child(4) dt { color: var(--ring); }
dl div:nth-child(5) dt { color: var(--pinky); }

dd {
  margin: 0;
  font-size: 1rem;
}

/* Quick Start */

.quick .fine {
  margin: .25rem 0 0 2.4rem;
  font-size: .95rem;
  color: var(--body);
}

/* The Lines */

.grammar {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}

.grammar th,
.grammar td {
  padding: .5rem .6rem .5rem 0;
  text-align: left;
  vertical-align: top;
  border-top: 1px dotted var(--rule);
}

.grammar th {
  border-top: 0;
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}

.grammar td:first-child {
  font-family: var(--mono);
  font-weight: 700;
  white-space: nowrap;
}

.grammar td:last-child {
  color: var(--body);
}

.grammar code {
  white-space: nowrap;
}

.syntax .fine {
  margin: .9rem 0 0;
  font-size: .95rem;
  color: var(--body);
}

/* How It Works */

.how-lede {
  font-size: 1rem;
  color: var(--body);
}

.rules {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: r;
}

.rules li {
  counter-increment: r;
  position: relative;
  padding-left: 2.4rem;
  margin-bottom: .9rem;
}

.rules li::before {
  content: counter(r) ".";
  position: absolute;
  left: 0;
  top: .05rem;
  font-family: var(--mono);
  font-weight: 700;
  color: var(--stamp);
}

.rules b {
  font-weight: 400;
  font-style: italic;
}

/* Why Five */

.mnemonic {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 1.5rem;
  align-items: center;
}

.hand {
  width: 100%;
  height: auto;
  display: block;
}

.mnemonic p {
  margin: 0;
  font-size: 1rem;
}

.fingers {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .3rem;
  list-style: none;
  margin: .8rem 0 0;
  padding: 0;
  font-family: var(--mono);
  font-weight: 700;
  font-size: .65rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
}

.fingers span {
  display: block;
  font-weight: 400;
  color: var(--muted);
}

.finger--blockers { color: var(--thumb); }
.finger--critical { color: var(--index); }
.finger--normal   { color: var(--middle); }
.finger--backlog  { color: var(--ring); }
.finger--notes    { color: var(--pinky); }

/* FAQ */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.faq-item {
  padding-top: 1rem;
  border-top: 1px dotted var(--rule);
}

.faq-item:first-child {
  padding-top: 0;
  border-top: 0;
}

.faq-q {
  margin: 0 0 .35rem;
  font-weight: 700;
}

.faq-q::before {
  content: "Q. ";
  font-family: var(--mono);
  font-weight: 700;
  color: var(--stamp);
}

.faq-a {
  margin: 0;
  font-size: 1rem;
  color: var(--body);
}

/* In Practice */

.notations {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  font-size: .95rem;
  color: var(--body);
}

.note {
  position: relative;
  padding: .2rem .5rem .2rem 1.7rem;
  margin-bottom: .25rem;
  border-left: 3px solid transparent;
}

.note::before {
  content: "\2192";
  position: absolute;
  left: .5rem;
  color: var(--stamp);
}

/* Each annotation carries its own heading's color, so the five colors taught
   in The Five, the hand and the file icons mean the same thing here. The free
   space above the headings belongs to no heading, so it takes the paper rule. */
.note--preamble { border-left-color: var(--rule); }
.note--blockers { border-left-color: var(--thumb); }
.note--critical { border-left-color: var(--index); }
.note--normal   { border-left-color: var(--middle); }
.note--backlog  { border-left-color: var(--ring); }
.note--notes    { border-left-color: var(--pinky); }

.note b {
  font-weight: 400;
  font-style: italic;
  color: var(--ink);
}

/* Downloads */

.downloads-lede {
  font-size: 1rem;
  color: var(--body);
}

.downloads {
  list-style: none;
  margin: 0;
  padding: 0;
}

.downloads li + li {
  border-top: 1px dotted var(--rule);
}

.dl {
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: .9rem;
  align-items: center;
  padding: .7rem 0;
}

/* The icon is a second link to the same file, hidden from assistive tech so
   the row reads as one link; the name is the one that takes focus. */
.dl-icon {
  grid-row: 1 / 3;
  display: block;
  border-bottom: 0;
  color: inherit; /* the row's color, not the link color, so the icon keeps its hue */
}

.file-icon {
  width: 44px;
  height: auto;
  display: block;
}

.file-icon text {
  font-family: monospace;
  font-size: 11px;
  font-weight: 700;
  text-anchor: middle;
  fill: var(--sheet);
}

.dl--md { color: var(--thumb); }
.dl--txt { color: var(--index); }
.dl--docx { color: var(--middle); }
.dl--xlsx { color: var(--ring); }
.dl--pdf { color: var(--pinky); }
.dl--alfred { color: var(--thumb); }
.dl--raycast { color: var(--index); }
.dl--espanso { color: var(--middle); }
.dl--vscode { color: var(--ring); }
.dl--jetbrains { color: var(--pinky); }
.dl--marked { color: var(--thumb); }
.dl--marked { color: var(--thumb); }

.downloads-sub {
  margin: 1.75rem 0 .5rem;
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

.downloads-sub + .downloads-lede {
  margin-bottom: .5rem;
}

.dl-name {
  color: currentColor;
}

.dl-name {
  grid-column: 2;
  justify-self: start;
  font-family: var(--mono);
  font-weight: 700;
  font-size: .95rem;
  color: var(--ink);
  border-bottom: 0;
}

.dl-name:hover,
.dl-icon:hover + .dl-name {
  color: var(--stamp);
  text-decoration: underline;
}

.dl-apps {
  grid-column: 2;
  margin: 0;
  font-size: .9rem;
  color: var(--body);
}

/* Pass It On */

.pass {
  text-align: center;
}

.pass .tag {
  margin: .25rem auto .75rem;
}

.pass-lede {
  max-width: 48ch;
  margin: .5rem auto 1.25rem;
  color: var(--body);
}

.pass .sheet {
  text-align: left;
}

/* Do Credit */

.bio {
  margin: 1.5rem 0 4rem;
  padding-top: 1.5rem;
  border-top: 3px double var(--rule);
  display: flex;
  gap: 1.25rem;
  align-items: center;
}

.avatar {
  width: 144px;
  height: 144px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #d8ccb2;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--rule);
}

.bio h3 {
  margin: 0 0 .3rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

.bio p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}

.copyright {
  margin: -2.75rem 0 1.5rem;
  text-align: center;
  font-size: .75rem;
  color: var(--muted);
}

@media (max-width: 480px) {
  .cta {
    flex-direction: column;
    align-items: stretch;
  }

  .btn {
    text-align: center;
  }

  dl div {
    grid-template-columns: 1fr;
    gap: .15rem;
  }

  .mnemonic {
    grid-template-columns: 1fr;
  }

  .hand {
    max-width: 150px;
  }

  .bio {
    flex-direction: column;
    text-align: center;
  }

  .code-wrap pre {
    font-size: .82rem;
  }

  .grammar thead {
    display: none;
  }

  .grammar tr {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    column-gap: .6rem;
    padding: .5rem 0;
    border-top: 1px dotted var(--rule);
  }

  .grammar td {
    border-top: 0;
    padding: 0;
  }

  .grammar td:last-child {
    grid-column: 2;
  }

  .copy-btn,
  .replay-btn {
    position: static;
    display: block;
    margin: 0 0 .5rem auto;
  }

}