/* fonts:start (generated by scripts/vendor-fonts.mjs) */
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/big-shoulders-display-normal-700-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/big-shoulders-display-normal-700-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-normal-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-normal-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* fonts:end */

/* Dogear — website. "Industrial Soft": pencil on Concrete (light), cyanotype print (dark).
   One red annotation per page. Radius 0, 1px rules, hatching instead of tints. */

:root {
  --cyanotype: #12355B;
  --drafting: #6E9CC9;
  --concrete: #D6D4CF;
  --plaster: #EDEBE6;
  --carbon: #0E0F11;
  --red: #E03A1C;

  /* roles — light = pencil original */
  --paper: var(--concrete);
  --sheet: var(--plaster);
  --ink: var(--cyanotype);
  --line: var(--cyanotype);
  --hatch: var(--drafting);
  --spine-solid: var(--plaster);
  --spine-text: var(--cyanotype);

  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;

  --gutter: 16px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;
  --measure: 62ch;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* dark = cyanotype print */
    --paper: var(--cyanotype);
    --sheet: #163E68;
    --ink: var(--plaster);
    --line: var(--plaster);
    --hatch: var(--drafting);
    --spine-solid: var(--plaster);
    --spine-text: var(--plaster);
  }
}

@media (min-width: 720px) { :root { --gutter: 32px; } }
@media (min-width: 1100px) { :root { --gutter: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.55 var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: var(--gutter); top: 8px; background: var(--sheet); padding: 8px 12px; z-index: 10; font: 500 13px var(--mono); }

/* ---------- labels: drafting hand ---------- */
.label {
  font: 500 12px/1.4 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0;
}
.mono { font-family: var(--mono); }

/* ---------- the drawing sheet: border + registration crosses ---------- */
.sheet {
  position: relative;
  margin: 0 var(--gutter);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.cross { position: relative; }
.cross::before, .cross::after {
  content: ""; position: absolute; width: 15px; height: 15px; pointer-events: none;
  background:
    linear-gradient(var(--hatch), var(--hatch)) center / 1px 100% no-repeat,
    linear-gradient(var(--hatch), var(--hatch)) center / 100% 1px no-repeat;
}
.cross::before { left: -8px; top: -8px; }
.cross::after { right: -8px; top: -8px; }

.hatch {
  background-image: repeating-linear-gradient(-45deg, var(--hatch) 0 1px, transparent 1px 7px);
}

/* ---------- header ---------- */
.top {
  margin: 0 var(--gutter);
  padding-top: var(--s5);
}
.top-inner {
  display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between;
  border: 1px solid var(--line);
}
.brand {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s4);
  text-decoration: none;
  border-right: 1px solid var(--line);
}
.brand svg { width: 22px; height: 22px; flex: none; }
.brand b { font: 800 26px/1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.nav { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.nav a {
  display: flex; flex-direction: column; justify-content: center;
  height: 100%; min-height: 48px;
  padding: var(--s1) var(--s4);
  border-left: 1px solid var(--line);
  text-decoration: none;
  font: 500 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase;
}
.nav a small { font-size: 10px; opacity: .85; }
.nav a[aria-current="page"] { background: var(--ink); color: var(--paper); }
@media (max-width: 719px) {
  .top-inner { flex-direction: column; }
  .brand { border-right: 0; border-bottom: 1px solid var(--line); }
  .nav { display: grid; grid-template-columns: repeat(4, 1fr); }
  .nav li:first-child a { border-left: 0; }
  .nav a { padding: var(--s2) var(--s2); font-size: 11px; }
}

/* ---------- store pill (not a link) ---------- */
.soon {
  display: inline-flex; align-items: center; gap: var(--s3);
  border: 1px solid var(--line);
  padding: var(--s3) var(--s4);
  font: 500 13px/1.3 var(--mono); letter-spacing: .04em;
  background: var(--sheet);
}
.soon::before { content: ""; width: 9px; height: 9px; border: 1px solid var(--line); flex: none; }

/* ---------- hero ---------- */
.hero {
  display: grid; gap: var(--s7);
  padding: var(--s8) var(--s5) var(--s7);
}
.hero h1 {
  font: 800 clamp(56px, 11vw, 150px)/.86 var(--display);
  text-transform: uppercase; letter-spacing: -.01em;
  margin: var(--s4) 0 var(--s5);
}
.hero .lede { font-size: clamp(18px, 2vw, 21px); max-width: 34ch; margin: 0 0 var(--s6); }
.hero-shots { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); align-self: end; max-width: 520px; }
.hero-shots figure { margin: 0; }
.hero-shots figure:nth-child(2) { margin-top: var(--s8); }
.shot { border: 1px solid var(--line); background: var(--sheet); }
.shot img { width: 100%; aspect-ratio: 460 / 1000; object-fit: cover; }
figcaption { margin-top: var(--s2); }
@media (min-width: 1000px) {
  .hero { grid-template-columns: 1.25fr 1fr; padding: var(--s9) var(--s7) var(--s8); align-items: start; }
  .hero-shots { justify-self: end; width: 100%; }
}
@media (max-width: 719px) { .hero { padding: var(--s7) var(--s4) var(--s6); } }

/* ---------- the Elevation ---------- */
.elevation { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.elevation-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); }
.elevation-scroll { overflow-x: auto; padding: var(--s6) var(--s5) var(--s4); }
.elevation svg { display: block; width: 100%; min-width: 760px; height: auto; }
.elevation svg .rule { stroke: var(--line); }
.elevation svg .sp { stroke: var(--line); stroke-width: 1; }
.elevation svg .sp-solid { fill: var(--spine-solid); }
.elevation svg .sp-hatch { fill: url(#hatch); }
.elevation svg .sp-ebook { fill: none; stroke-dasharray: 3 3; }
.elevation svg .sp-red { fill: var(--red); stroke: var(--red); }
.elevation svg .t { font: 500 11px var(--mono); letter-spacing: .06em; fill: var(--spine-text); }
.elevation svg .sp-solid + .t { fill: var(--cyanotype); }
.elevation svg .t-red { fill: var(--plaster); }
.elevation svg .dim { stroke: var(--red); stroke-width: 1.5; }
.elevation svg .dim-t { font: 600 13px var(--mono); letter-spacing: .06em; fill: var(--ink); }
.elevation svg .hatch-line { stroke: var(--hatch); }
.key { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); margin: 0; padding: var(--s4) var(--s5) var(--s5); list-style: none; border-top: 1px solid var(--line); }
.key li { display: flex; align-items: center; gap: var(--s2); }
.key i { width: 14px; height: 22px; border: 1px solid var(--line); display: inline-block; }
.key .k-solid { background: var(--spine-solid); }
.key .k-ebook { border-style: dashed; }
.key .k-prog { background: var(--ink); border-color: var(--ink); }

/* ---------- sections ---------- */
.sec { border-bottom: 1px solid var(--line); }
.sec-head {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s4);
  align-items: baseline;
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
}
.sec-head .no { font: 800 22px/1 var(--display); }
h2 {
  font: 800 clamp(40px, 6vw, 72px)/.92 var(--display);
  text-transform: uppercase; letter-spacing: -.005em;
  margin: 0 0 var(--s4);
}
h3 {
  font: 800 clamp(30px, 3.4vw, 44px)/.95 var(--display);
  text-transform: uppercase;
  margin: var(--s3) 0 var(--s4);
}
p { margin: 0 0 var(--s4); max-width: var(--measure); }
.label + h2, .label + h1 { margin-top: var(--s3); }

.detail {
  display: grid; gap: var(--s6);
  padding: var(--s7) var(--s5);
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.detail:last-child { border-bottom: 0; }
.detail .shot { max-width: 300px; }
.detail ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); max-width: var(--measure); }
.detail li { padding: var(--s2) 0; border-bottom: 1px solid var(--line); font: 400 14px/1.45 var(--mono); }
@media (min-width: 900px) {
  .detail { grid-template-columns: 1fr 300px; gap: var(--s8); padding: var(--s8) var(--s7); }
  .detail.flip { grid-template-columns: 300px 1fr; }
  .detail.flip .shot { order: -1; }
}
.detail.noimg { grid-template-columns: 1fr; }

/* ---------- specification table ---------- */
.spec { padding: var(--s7) var(--s5); }
.spec-grid { display: grid; grid-template-columns: 1fr; border: 1px solid var(--line); margin: var(--s5) 0; }
.spec-grid div { display: grid; grid-template-columns: 9.5em 1fr; gap: var(--s4); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.spec-grid div:last-child { border-bottom: 0; }
.spec-grid dt { font: 500 12px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.spec-grid dd { margin: 0; }
@media (min-width: 900px) {
  .spec { padding: var(--s8) var(--s7); }
  .spec-grid { grid-template-columns: 1fr 1fr; }
  .spec-grid div:nth-child(odd) { border-right: 1px solid var(--line); }
  .spec-grid div:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 480px) { .spec-grid div { grid-template-columns: 1fr; gap: var(--s1); } }

/* ---------- pricing: revision table ---------- */
.prices { width: 100%; max-width: 760px; border-collapse: collapse; margin: var(--s5) 0; font-family: var(--mono); }
.prices th, .prices td { border-bottom: 1px solid var(--line); padding: var(--s3) var(--s3); text-align: left; vertical-align: baseline; }
.prices thead th { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.prices tbody th { font: 500 14px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.prices .amt { font: 800 30px/1 var(--display); white-space: nowrap; }
.prices td.band { background-color: var(--sheet); }
.prices tr.free td, .prices tr.free th { border-top: 1px solid var(--line); }
@media (max-width: 560px) {
  .prices th, .prices td { padding: var(--s2) var(--s1); }
  .prices .amt { font-size: 24px; }
  .prices tbody th { font-size: 12px; }
}
.small { font-size: 14px; }

/* ---------- FAQ ---------- */
.faq { padding: var(--s7) var(--s5); }
@media (min-width: 900px) { .faq { padding: var(--s8) var(--s7); } }
details { border-top: 1px solid var(--line); max-width: 860px; }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary {
  cursor: pointer; list-style: none;
  display: grid; grid-template-columns: 1fr auto; gap: var(--s4); align-items: baseline;
  padding: var(--s4) 0;
  font: 700 clamp(22px, 2.4vw, 28px)/1.1 var(--display); text-transform: uppercase; letter-spacing: .01em;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: 400 22px/1 var(--mono); }
details[open] summary::after { content: "−"; }
details > div { padding: 0 0 var(--s5); }

/* ---------- the one red annotation (non-text mark) ---------- */
.redline { outline: 2px solid var(--red); outline-offset: 6px; }
.stamp { border: 2px solid var(--red); box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--red); padding: var(--s4) var(--s5); }

/* ---------- document pages (spec sheets) ---------- */
.doc-head { padding: var(--s8) var(--s5) var(--s6); border-bottom: 1px solid var(--line); }
.doc-head h1 { font: 800 clamp(52px, 9vw, 120px)/.88 var(--display); text-transform: uppercase; margin: var(--s4) 0 var(--s5); }
.doc-meta { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--line); width: fit-content; max-width: 100%; }
.doc-meta div { padding: var(--s2) var(--s4); border-right: 1px solid var(--line); }
.doc-meta div:last-child { border-right: 0; }
.doc-meta b { display: block; font: 800 20px/1.1 var(--display); text-transform: uppercase; }
@media (max-width: 560px) {
  .doc-meta { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .doc-meta div { border-bottom: 1px solid var(--line); }
  .doc-meta div:nth-child(2n) { border-right: 0; }
}
.doc { display: grid; gap: 0; }
.clause { display: grid; gap: var(--s2) var(--s6); padding: var(--s6) var(--s5); border-bottom: 1px solid var(--line); }
.clause .num { font: 800 28px/1 var(--display); }
.clause h2 { font-size: clamp(30px, 3.6vw, 44px); margin-bottom: var(--s3); }
.clause ul { margin: 0 0 var(--s4); padding-left: 1.2em; max-width: var(--measure); }
.clause li { margin-bottom: var(--s2); }
@media (min-width: 900px) {
  .doc-head { padding: var(--s9) var(--s7) var(--s7); }
  .clause { grid-template-columns: 120px 1fr; padding: var(--s7) var(--s7); }
}

/* ---------- footer: the title block ---------- */
.foot { margin: 0 var(--gutter) var(--s6); }
.foot-inner { display: grid; border: 1px solid var(--line); }
.foot-notes { padding: var(--s5); display: grid; gap: var(--s3); align-content: start; }
.foot-notes p { margin: 0; font-size: 14px; }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin: 0; padding: 0; list-style: none; }
.tblock { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.tblock div { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); background: var(--sheet); }
.tblock div:nth-child(odd):not(.wide) { border-right: 1px solid var(--line); }
.tblock .wide { border-bottom: 0; }
.tblock b { display: block; font: 800 24px/1.05 var(--display); text-transform: uppercase; }
.tblock .wide { grid-column: 1 / -1; border-right: 0 !important; }
@media (min-width: 900px) {
  .foot-inner { grid-template-columns: 1fr 440px; }
  .tblock { border-top: 0; border-left: 1px solid var(--line); }
}

@media (prefers-reduced-motion: no-preference) {
  .elevation svg .sp { transform-box: fill-box; transform-origin: bottom; animation: ink .5s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 35ms); }
  @keyframes ink { from { transform: scaleY(0); } }
}

/* inline-styles:start (generated by scripts/harden.mjs) */
.i-0 { --i:0; }
.i-1 { --i:1; }
.i-10 { --i:10; }
.i-11 { --i:11; }
.i-12 { --i:12; }
.i-13 { --i:13; }
.i-14 { --i:14; }
.i-15 { --i:15; }
.i-16 { --i:16; }
.i-17 { --i:17; }
.i-18 { --i:18; }
.i-19 { --i:19; }
.i-2 { --i:2; }
.i-20 { --i:20; }
.i-21 { --i:21; }
.i-3 { --i:3; }
.i-4 { --i:4; }
.i-5 { --i:5; }
.i-6 { --i:6; }
.i-7 { --i:7; }
.i-8 { --i:8; }
.i-9 { --i:9; }
.u-caption { text-align:left !important; padding-bottom:8px !important; }
.u-label-mono { font:500 12px var(--mono) !important; margin:0 !important; }
.u-lede { font-size:19px !important; max-width:40ch !important; }
.u-m0 { margin:0 !important; }
.u-measure { max-width:var(--measure) !important; }
/* inline-styles:end */