/* Wedge Press shop.
   One stylesheet for every page, plus home.css for the homepage. No build step.

   No hosted font request, on purpose. A hosted font would send every visitor's
   IP address to the font host, and the estate is leaving Google infrastructure
   (DECISIONS.md D-0004 keeps one Google account for the YouTube channel and
   nothing else). The typefaces are Instrument Serif and DM Sans, bundled in this
   folder and served from the shop's own domain, so the page asks no third party
   for anything. Their OFL license files ship beside them.

   The signature element is the index tab. Every panel that holds a product,
   a spec or a file list wears a small tab, the way a worksheet does. */

/* Self-hosted OFL typefaces. License files ship beside the fonts. */
@font-face {
  font-family: "Instrument Serif";
  src: url("instrument-serif-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("instrument-serif-italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("dm-sans.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
}

:root {
  color-scheme: only light;

  --paper: #f7f6ef;
  --panel: #f7f6ef;
  --ink: #20271f;
  --muted: #61675e;
  --rule: #d9dcd0;
  --field: #eeefe5;
  --accent: #253a2e;
  --accent-ink: #ffffff;
  --accent-soft: #e7eddb;

  --shell-inset: 44px;
  --gap: clamp(1.5rem, 4vw, 3rem);
  --radius: 3px;

  --serif: "Instrument Serif", Georgia, serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

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

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

body {
  margin: 8px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

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

.shell {
  width: calc(100% - 2 * var(--shell-inset));
  margin-inline: auto;
}

/* Labels, prices and tabs speak in the monospaced voice. */
/* The editorial presentation now gives these labels the shared sans face. */
.tab,
.fields dt,
.price,
.refund__title,
.wordmark,
.card__files,
.crumb {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

/* Masthead */
.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
  padding-block: 1.1rem;
}
.wordmark { text-decoration: none; font-weight: 600; }
.masthead__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: 0.9rem;
  min-width: 0;
}
.masthead__nav a { color: var(--muted); text-decoration: none; }
.masthead__nav a:hover { color: var(--ink); text-decoration: underline; }

.display {
  font-size: clamp(2.4rem, 6.4vw, 4.1rem);
  letter-spacing: -0.035em;
  font-weight: 680;
}
.display--product { font-size: clamp(1.9rem, 4.4vw, 2.9rem); }
.lede {
  margin-top: 1.25rem;
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  color: var(--muted);
  max-width: 34em;
}
/* The index tab, the one signature element. */
.panel {
  position: relative;
  background: var(--field);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem 1.4rem;
  margin-top: 1.9rem;
}
.tab {
  display: block;
  margin-bottom: 18px;
  color: var(--muted);
}

/* Field rows: the spec sheet idiom, label left, value right. */
.fields { margin: 0; }
.fields__row {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 0.5rem 1.25rem;
  padding-block: 0.7rem;
  border-top: 1px solid var(--rule);
}
.fields__row:first-child { border-top: none; padding-top: 0.2rem; }
.fields dt { color: var(--muted); margin: 0; padding-top: 0.18rem; }
.fields dd { margin: 0; }
.fields--tight .fields__row { grid-template-columns: 7rem 1fr; }

/* Buttons */
.button {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  font-weight: 600;
  padding: 0.72rem 1.35rem;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
}
.button:hover { filter: brightness(1.08); }
.button--buy {
  font-size: 12px;
  padding: 13px 20px;
  border-radius: 4px;
  background: #d4ef78;
  border-color: #d4ef78;
  color: #253a2e;
}
.textlink { color: var(--accent); font-weight: 550; }

/* Sections */
.section { padding-block: clamp(2.2rem, 5vw, 3.4rem); }
.section__title {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.4rem;
}

/* Catalog */
.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
  gap: 2.4rem 1.4rem;
}
.card { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.7rem; }
.card:hover { border-color: var(--accent); }
.card:hover .tab { border-color: var(--accent); }
.card__title { font-size: 1.22rem; }
.card__title a { text-decoration: none; }
.card__title a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.card__summary { color: var(--muted); font-size: 0.95rem; }
.card__foot {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
}
.price { font-variant-numeric: tabular-nums; font-size: 0.95rem; letter-spacing: 0.06em; }
.price--large { font-size: 1.5rem; letter-spacing: 0.02em; font-weight: 600; }
.card__files { color: var(--muted); }
.empty { color: var(--muted); }

/* Catalog groups, one per niche */
.jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.7rem;
  margin-top: 1.2rem;
}
.jump__link {
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding: 0.6rem 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.jump__link:hover { border-color: var(--accent); color: var(--ink); }
.jump__count {
  font-variant-numeric: tabular-nums;
  padding: 0 0.35rem;
}
.group { margin-top: 2.4rem; }
.group__title {
  font: 400 28px/1.2 var(--serif);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
}

/* Format badges. What lands in the buyer's downloads folder. */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
}
.badge {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--field);
  border-radius: 6px;
  padding: 0.2rem 0.45rem;
}
.card__cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--field);
}

/* Questions page */
.qa {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  column-gap: 64px;
  margin-top: 48px;
}
.qa__q {
  font: 400 33px/1.1 var(--serif);
  letter-spacing: -.6px;
  padding-block: 24px;
  border-top: 1px solid var(--rule);
}
.qa__q:first-child { margin-top: 0; }
.qa__a { padding-block: 24px; border-top: 1px solid var(--rule); line-height: 1.75; }
.qa__a p { color: var(--muted); max-width: 38em; }
.qa__a p + p { margin-top: 0.8rem; }
.qa__a code {
  font-family: var(--sans);
  font-size: 0.88em;
  background: var(--field);
  border-radius: var(--radius);
  padding: 0.1rem 0.3rem;
}
.qa__back { margin-top: 2.8rem; }

.note { color: var(--muted); max-width: 46em; margin-top: 1.6rem; }

/* Product page */
.crumb { padding-top: 2rem; color: var(--muted); }
.crumb a { color: inherit; }
.product__head { margin-top: 2.6rem; padding: 2rem 1.75rem 1.75rem; }
/* The refund policy sits inside the head panel, above the buy button, because the
   questions page tells a buyer it is there and it was at the foot of the page. */
.refund {
  margin-top: 1.7rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--rule);
}
.refund__title { color: var(--accent); margin-bottom: 0.45rem; }
.refund .note { margin-top: 0; }
.buy {
  margin-top: 1.9rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.6rem;
}
.buy__note { flex-basis: 100%; color: var(--muted); font-size: 0.9rem; margin: 0; }

.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 1.2rem;
}
.shot {
  margin: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--field);
  overflow: hidden;
}
.shot--pending {
  display: grid;
  place-items: center;
  min-height: 11rem;
  padding: 1.5rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  border-style: dashed;
}

.product__body {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: var(--gap);
  align-items: start;
}
.product__side .panel { margin-top: 3.2rem; }

.prose { max-width: 38em; }
.prose h2 { font: 400 33px/1.1 var(--serif); margin-top: 1.8rem; }
.prose h3 { font: 400 26px/1.2 var(--serif); margin-top: 1.4rem; }
.prose p { margin-top: 0.9rem; }
.prose ul, .prose ol { margin: 0.9rem 0 0; padding-left: 1.2rem; }
.prose li { margin-top: 0.35rem; }
.prose code {
  font-family: var(--sans);
  font-size: 0.88em;
  background: var(--field);
  padding: 0.1em 0.35em;
  border-radius: 2px;
}


/* Footer */
.footer {
  border-top: 1px solid var(--rule);
  margin-top: clamp(3rem, 8vw, 5rem);
  background: var(--field);
}
.footer__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--gap);
  padding-block: 2.6rem 3rem;
}
.footer .fields__row { border-color: var(--rule); font-size: 0.92rem; }

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

@media (max-width: 46rem) {
  .product__body,
  .footer__inner { grid-template-columns: 1fr; }
  .product__side .panel { margin-top: 2.4rem; }
  .fields__row { grid-template-columns: 1fr; gap: 0.15rem; padding-block: 0.65rem; }
  .fields--tight .fields__row { grid-template-columns: 1fr; }
  .masthead__inner {
    padding-block: 0.9rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem 1rem;
  }
  .masthead__nav { gap: 0.75rem 1rem; }
}

/* Shared editorial chrome, including catalogue, product, and question pages. */
html { scroll-behavior: smooth; scroll-padding-top: 1.5rem; }
body { overflow-wrap: anywhere; }
button, input, textarea { font: inherit; }
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 34px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -.07em;
  line-height: 1;
  white-space: nowrap;
}
.brand-mark { display: flex; gap: 3px; transform: skew(-12deg); }
.brand-mark b { width: 5px; height: 25px; background: currentColor; }
.brand-mark b:nth-child(2) { height: 31px; margin-top: -3px; }
.masthead__inner { min-height: 92px; align-items: center; }
.masthead__nav { align-items: center; gap: 26px; font-size: .8rem; }
.masthead__nav a { color: var(--ink); }
.masthead__nav .button { color: var(--accent-ink); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 44px; }
.mobile-menu { display: none; }
.display, .display--product { font-family: var(--serif); font-weight: 400; }
.display--product { font-size: clamp(2.6rem, 5vw, 4.2rem); }
.section__title { font: 400 47px/1.05 var(--serif); letter-spacing: -1.5px; border: 0; padding: 0; margin-bottom: 30px; }
.card { background: transparent; border: 0; padding: 0; box-shadow: none; }
.card .card__title { margin: 0; font: 400 33px/1.1 var(--serif); letter-spacing: -.6px; }
.card__summary { font-size: .9rem; }
.card__foot { flex-wrap: wrap; }
.panel, .shot { border-radius: 6px; }
.product__head { background: transparent; border: 0; margin-top: 0; padding: 40px 0; }
.product__head .lede { font-size: 14px; line-height: 1.75; max-width: 65ch; }
.product__body > *, .footer__inner > * { min-width: 0; }
.footer { background: var(--paper); margin-top: 0; }
.footer__inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 24px;
  padding-block: 22px;
  min-height: 83px;
  font-size: 14px;
  line-height: 1.5;
}
.footer__block { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; }
.footer__tagline { margin: 0; flex: 1 1 200px; font: inherit; color: var(--muted); }
.footer .fields { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer .fields__row { display: block; padding: 0; border: 0; font: inherit; }
.footer .fields dt {
  font: 600 10px/1.5 var(--sans);
  letter-spacing: 1.8px;
  padding: 0;
}
@media (max-width: 760px) {
  :root { --shell-inset: 26px; }
  .masthead__nav { display: none; }
  .masthead__inner { flex-direction: row; min-height: 78px; gap: 12px; position: relative; }
  .wordmark { font-size: 29px; gap: 9px; }
  .footer__inner { grid-template-columns: minmax(0, 1fr); }
  .product__body, .qa { grid-template-columns: minmax(0, 1fr); }
  .qa__q { padding-bottom: 12px; }
  .qa__a { border: 0; padding-top: 0; }
  .section__title { font-size: 43px; }
  .mobile-menu { display: block; }
  .mobile-menu summary { min-height: 44px; display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu nav { position: absolute; z-index: 5; top: 100%; right: 0; width: min(260px, 100%); background: var(--paper); border: 1px solid var(--rule); padding: 12px; box-shadow: 0 12px 24px #00000014; }
  .mobile-menu a { display: block; padding: 12px; font-size: .9rem; text-decoration: none; }
  .mobile-menu a:hover { background: var(--field); }
}
@media (max-width: 570px) {
  :root { --shell-inset: 21px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Free calculators under /tools/ (D-0064). One narrow column, label above each box. */
.tool-page { max-width: 42rem; }
.tool [hidden] { display: none !important; }
.tool__modes { border: 0; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.5rem; }
.tool__modes legend { font-weight: 600; margin-bottom: 0.4rem; }
.tool__modes label { display: flex; gap: 0.5rem; align-items: center; min-height: 44px; }
.tool__field { margin-bottom: 1rem; }
.tool__field label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.tool__field input {
  width: 100%;
  max-width: 16rem;
  font: inherit;
  font-size: 1.05rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--muted);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}
.tool__field input[aria-invalid="true"] { border-color: #9b2c1f; }
.tool__error, .tool__message { color: #9b2c1f; margin: 0.3rem 0 0; }
.tool__error:empty, .tool__message:empty { display: none; }
.tool__results { border-top: 1px solid var(--rule); margin-top: 1.2rem; padding-top: 1rem; }
.tool__summary { margin: 0 0 0.8rem; font-size: 1.1rem; }
.tool__output .fields__row { grid-template-columns: minmax(0, 1fr) auto; }
.tool__output dd { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.tool__heading { margin-top: 2.4rem; }
.tool__how, .tool__product { max-width: 40em; }
.tool__how { margin: 0 0 0.9rem; }
.tool__product { margin: 1.6rem 0 0.9rem; }
.tool-list { list-style: none; padding: 0; }
.tool-list li { padding-block: 1rem; border-top: 1px solid var(--rule); }
.tool-list p { margin: 0.3rem 0 0; color: var(--muted); }