@font-face {
  /* Archivo 700, latin subset, self-hosted (SIL OFL: see assets/fonts/Archivo-OFL.txt).
     Same-origin on purpose: the site still makes no third-party request. Headings only;
     body and labels stay on system fonts so there is nothing to wait for. */
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/archivo-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ShotPlots: marketing site.
   Design language: a drafting sheet. Paper ground with a drawing grid, dimension-line
   dividers, crop-mark frames, a title-block footer. Light = white paper, dark = blueprint.
   Nothing here is fetched from a network: system fonts only, no CDN, no webfont. */

:root {
  --paper:        #F2EEE5;
  --panel:        #FBF9F4;
  --ink:          #17202A;
  --graphite:     #5A6672;
  --rule:         #CBC3B2;
  --rule-soft:    #E3DDCF;
  --grid-fine:    rgba(23, 32, 42, 0.045);
  --grid-coarse:  rgba(23, 32, 42, 0.075);

  /* Straight from the app's own symbol palette. */
  --camera:       #D81B60;
  --camera-ink:   #B01048;
  --light:        #E8A33D;
  --light-ink:    #9A6A12;
  --actor:        #3E9B62;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: 'Archivo', 'Archivo Narrow', "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --rail: 58px;
  --measure: 1180px;
}

/* Dark is the blueprint look. Defined twice on purpose: once for the system setting
   (unless the reader has explicitly chosen light) and once for the header toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:       #0D1826;
    --panel:       #122236;
    --ink:         #E7EEF7;
    --graphite:    #93A7BF;
    --rule:        #2C4664;
    --rule-soft:   #1E3149;
    --grid-fine:   rgba(120, 180, 255, 0.055);
    --grid-coarse: rgba(120, 180, 255, 0.09);
    --camera-ink:  #FF7BA5;
    --light-ink:   #E8A33D;
    --actor:       #5FC48D;
  }
}
:root[data-theme="dark"] {
    --paper:       #0D1826;
    --panel:       #122236;
    --ink:         #E7EEF7;
    --graphite:    #93A7BF;
    --rule:        #2C4664;
    --rule-soft:   #1E3149;
    --grid-fine:   rgba(120, 180, 255, 0.055);
    --grid-coarse: rgba(120, 180, 255, 0.09);
    --camera-ink:  #FF7BA5;
    --light-ink:   #E8A33D;
    --actor:       #5FC48D;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-coarse) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-coarse) 1px, transparent 1px),
    linear-gradient(var(--grid-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
}

/* ---------- shared type ---------- */

h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.06; margin: 0 0 .5em; }
h1 { letter-spacing: -0.021em; }
h1 { font-size: clamp(2.3rem, 5.6vw, 4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.12rem; letter-spacing: -0.01em; }
p  { margin: 0 0 1.1em; }
a  { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--camera-ink); }
strong { font-weight: 650; }

.lede { font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: var(--graphite); max-width: 46ch; }
.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.2em; }
.prose h3 { margin-top: 1.8em; }
.prose ul, .prose ol { padding-left: 1.15em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .45em; }

.tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--graphite);
}

/* ---------- sheet frame + margin rail ---------- */

.rail {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--rail);
  border-right: 1px solid var(--rule);
  display: none;
  z-index: 5;
  pointer-events: none;
}
.rail b {
  position: absolute;
  bottom: 24px; left: 50%;
  opacity: .85;
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--graphite);
  white-space: nowrap;
}
.rail i {
  position: absolute;
  top: 22px; left: 50%;
  transform: translateX(-50%);
  width: 11px; height: 11px;
  border: 1px solid var(--rule);
  border-radius: 50%;
}
.rail i::after {
  content: ""; position: absolute; inset: 2px;
  background: var(--camera); border-radius: 50%;
}

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 26px; }

@media (min-width: 1080px) {
  .rail { display: block; }
  body { padding-left: var(--rail); }
}

/* ---------- header ---------- */

.top {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky; top: 0; z-index: 10;
}
.top .wrap {
  display: flex; align-items: center; gap: 26px;
  min-height: 62px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand svg { width: 26px; height: 26px; display: block; }
.brand span {
  font-family: var(--mono);
  font-size: 14px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
}
.nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
/* :not(.btn) so the nav's own colour does not out-specify the button styles below. */
.nav a:not(.btn) {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: var(--graphite);
  padding: 4px 0; border-bottom: 2px solid transparent;
}
.nav a:not(.btn):hover { color: var(--ink); border-bottom-color: var(--rule); }
.nav a:not(.btn)[aria-current="page"] { color: var(--ink); border-bottom-color: var(--camera); }

/* On a phone the header was stacking to three rows and staying pinned, eating a third of
   the screen. One row, scrolls away with the page. */
@media (max-width: 760px) {
  .top { position: static; }
  .top .wrap { gap: 12px; min-height: 54px; }
  .brand span { font-size: 12px; letter-spacing: .1em; }
  .brand svg { width: 22px; height: 22px; }
  .nav { gap: 13px; }
  .nav a:not(.btn) { font-size: 10px; letter-spacing: .08em; }
  .nav .btn-sm { padding: 8px 11px; font-size: 10px; letter-spacing: .1em; }
}
@media (max-width: 420px) {
  .nav { gap: 10px; }
  .nav a:not(.btn) { font-size: 9.5px; letter-spacing: .06em; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px; letter-spacing: .15em; text-transform: uppercase;
  text-decoration: none;
  padding: 13px 20px;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn-go { background: var(--camera); border-color: var(--camera); color: #fff; }
.btn-go:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-sm { padding: 9px 14px; font-size: 11px; }

/* Paper / blueprint switch. Square, hairline, same family as everything else. */
.themer {
  width: 30px; height: 30px; flex: 0 0 auto; padding: 0;
  border: 1px solid var(--rule); background: transparent;
  color: var(--graphite); cursor: pointer;
  display: grid; place-items: center;
}
.themer:hover { border-color: var(--ink); color: var(--ink); }
.themer svg { width: 15px; height: 15px; display: block; }
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- dimension-line divider ---------- */

.dim {
  display: flex; align-items: center; gap: 16px;
  margin: 74px 0 34px;
}
.dim::before, .dim::after {
  content: ""; flex: 1; height: 9px;
  background: linear-gradient(var(--rule), var(--rule)) left center / 100% 1px no-repeat;
}
.dim::before { border-left: 1px solid var(--rule); }
.dim::after  { border-right: 1px solid var(--rule); }
.dim span {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--graphite); white-space: nowrap;
}
/* A long section label has to be allowed to wrap on a phone, or it runs off the sheet. */
@media (max-width: 620px) {
  .dim { gap: 10px; margin: 52px 0 26px; }
  .dim span { white-space: normal; letter-spacing: .14em; }
}
/* The whole page was running a desktop type scale on a phone. */
@media (max-width: 620px) {
  body { font-size: 16px; line-height: 1.58; }
  .lede { font-size: 1.02rem; }
  .tag { font-size: 10px; letter-spacing: .16em; }
  .hero .price { font-size: 10.5px; letter-spacing: .08em; line-height: 1.7; }
  .hero .cta { gap: 10px; }
  .hero .cta .btn { flex: 1 1 auto; text-align: center; }
  .frame { padding: 16px; }
  .cols > *, .role, .plan-col { padding: 22px 18px; }
}

/* ---------- drawing frame with crop marks ---------- */

.frame {
  position: relative;
  border: 1px solid var(--rule);
  background: var(--panel);
  padding: 26px;
  margin: 0;
}
.frame::before, .frame::after,
.frame .ct::before, .frame .ct::after {
  content: ""; position: absolute; width: 13px; height: 13px;
  border: 0 solid var(--ink); opacity: .5;
}
.frame::before       { top: -1px;    left: -1px;  border-top-width: 2px;    border-left-width: 2px; }
.frame::after        { top: -1px;    right: -1px; border-top-width: 2px;    border-right-width: 2px; }
.frame .ct::before   { bottom: -1px; left: -1px;  border-bottom-width: 2px; border-left-width: 2px; }
.frame .ct::after    { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }

.frame figcaption {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 12px;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--graphite);
}

.plan { display: block; width: 100%; height: auto; border: 1px solid var(--rule-soft); }

/* ---------- hero ---------- */

.hero { padding: 62px 0 8px; }
/* On a phone the order is headline -> drawing -> copy, so the plan is on the first screen
   instead of five lines of prose. On desktop the drawing sits alongside, spanning both rows. */
.hero .grid { display: grid; gap: 28px; align-items: start; }
.hero .head { margin-bottom: -8px; }
@media (min-width: 940px) {
  .hero .grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.28fr);
    grid-template-areas: "head fig" "body fig";
    column-gap: 56px; row-gap: 0;
  }
  .hero .head { grid-area: head; margin-bottom: 0; }
  .hero .body { grid-area: body; }
  .hero .hero-fig { grid-area: fig; }
}
.hero h1 { margin-bottom: .35em; font-size: clamp(2.2rem, 4.6vw, 3.4rem); text-wrap: balance; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 18px; }
.hero .price {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--graphite);
}


/* ---------- annotated plan: balloons + legend ---------- */

.annot { display: grid; gap: 30px; }
@media (min-width: 900px) { .annot { grid-template-columns: 1.2fr 1fr; gap: 44px; align-items: start; } }

.legend { border-top: 1px solid var(--rule); }
.legend ol { margin: 0; padding: 0; list-style: none; }
.legend .row {
  display: grid; grid-template-columns: 30px 1fr; gap: 14px;
  padding: 16px 8px 16px 2px;
  border-bottom: 1px solid var(--rule-soft);
}
.legend .row.on { background: var(--panel); }
.balloon {
  width: 26px; height: 26px; border: 1px solid var(--ink);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  margin-top: 2px;
}
.legend h3 { margin: 0 0 .25em; }
.legend p { margin: 0; font-size: 15px; color: var(--graphite); }

/* Balloon overlay drawn on top of the plan drawing. */
.annot .frame { position: relative; }
.pin {
  position: absolute;
  width: 24px; height: 24px; margin: -12px 0 0 -12px;
  border: 1px solid var(--ink); border-radius: 50%;
  background: var(--panel);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  transition: background .12s linear, color .12s linear;
}
.pin.on { background: var(--ink); color: var(--panel); }

/* ---------- generic card columns ---------- */

.cols { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 780px) { .cols.c3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 680px) { .cols.c2 { grid-template-columns: repeat(2, 1fr); } }
.cols > * { background: var(--panel); padding: 26px 24px; margin: 0; }
.cols h3 { margin-bottom: .4em; }
.cols p { margin: 0; color: var(--graphite); font-size: 15.5px; }
.cols .num {
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  color: var(--graphite); display: block; margin-bottom: 12px;
}

/* ---------- pricing ---------- */

.plans { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 760px) { .plans { grid-template-columns: 1fr 1fr; } }
.plan-col { background: var(--panel); padding: 32px 28px; }
.plan-col .amount { font-family: var(--display); font-size: 2.6rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.plan-col .amount small {
  font-size: 11px; font-family: var(--mono); letter-spacing: .16em; color: var(--graphite);
  display: block; margin-top: 10px; text-transform: uppercase;
}
.plan-col ul { list-style: none; padding: 0; margin: 22px 0 26px; }
.plan-col li { padding: 9px 0 9px 26px; border-bottom: 1px solid var(--rule-soft); position: relative; font-size: 15.5px; }
.plan-col li::before {
  content: ""; position: absolute; left: 2px; top: 19px;
  width: 11px; height: 1px; background: var(--ink);
}
.plan-col li.no { color: var(--graphite); }
.plan-col li.no::before { background: var(--rule); }

/* ---------- FAQ ---------- */

.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule-soft); }
.faq summary {
  cursor: pointer; padding: 18px 0 18px 34px; position: relative;
  font-weight: 650; font-size: 1.02rem; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "+"; position: absolute; left: 6px; top: 17px;
  font-family: var(--mono); color: var(--camera-ink); font-size: 17px;
}
.faq details[open] summary::before { content: "\2212"; }
.faq .a { padding: 0 0 18px 34px; max-width: 70ch; color: var(--graphite); }
.faq .a p:last-child { margin-bottom: 0; }

/* ---------- schedule table (sample page) ---------- */

.sched { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.sched caption {
  text-align: left; padding-bottom: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--graphite);
}
.sched th, .sched td { text-align: left; padding: 10px 12px; border: 1px solid var(--rule-soft); }
.sched th {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--graphite); font-weight: 400;
  background: var(--panel);
}
.sched td.k { font-family: var(--mono); white-space: nowrap; }
.swatch { display: inline-block; width: 9px; height: 9px; margin-right: 8px; }

.scroll-x { overflow-x: auto; }

/* ---------- callout ---------- */

.note {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--camera);
  background: var(--panel);
  padding: 20px 22px;
  margin: 28px 0;
}
.note p:last-child { margin-bottom: 0; }
.note .tag { display: block; margin-bottom: 8px; }

/* ---------- title-block footer ---------- */

.tblock { margin-top: 84px; border-top: 1px solid var(--rule); }
.tblock .cells {
  display: grid; gap: 1px; background: var(--rule);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 700px) { .tblock .cells { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.tblock .cell { background: var(--paper); padding: 16px 18px; }
.tblock .cell dt {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--graphite); margin-bottom: 5px;
}
.tblock .cell dd { margin: 0; font-size: 14px; }
.tblock nav {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  padding: 20px 0 12px;
}
.tblock nav a {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none; color: var(--graphite);
}
.tblock nav a:hover { color: var(--ink); }
.tblock .fine {
  padding: 0 0 48px; font-size: 12.5px; color: var(--graphite); max-width: 74ch;
}

/* ---------- misc ---------- */

.page-head { padding: 58px 0 0; }
.page-head h1 { max-width: 20ch; }
.center { text-align: center; }
.hr { height: 1px; background: var(--rule); border: 0; margin: 48px 0; }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper); padding: 10px 16px;
}
.skip:focus { left: 8px; top: 8px; z-index: 99; }

/* ---------- symbol marks, borrowed from the app's own drawing language ---------- */

.mk {
  display: inline-block; width: 30px; height: 22px;
  vertical-align: -6px; margin-right: 11px;
  background: center / contain no-repeat;
}
.mk-flag  { background-image: url(/assets/mark-flag.svg); }
.mk-block { background-image: url(/assets/mark-blocking.svg); }
.mk-cam   { background-image: url(/assets/mark-camera.svg); }

/* A big, faint version of the same marks, sitting behind a block of text. */
.ornament { position: relative; overflow: hidden; }
.ornament > * { position: relative; z-index: 1; }
.ornament::after {
  content: ""; position: absolute; pointer-events: none;
  right: -18px; top: 50%; transform: translateY(-50%);
  width: 300px; height: 225px; opacity: .13;
  background: center / contain no-repeat;
}
.ornament.o-flag::after  { background-image: url(/assets/mark-flag.svg); }
.ornament.o-block::after { background-image: url(/assets/mark-blocking.svg); }
.ornament.o-cam::after   { background-image: url(/assets/mark-camera.svg); }
@media (max-width: 720px) { .ornament::after { display: none; } }

/* ---------- screenshots of the app ---------- */

.shot { margin: 0; }
.shot img,
.shot video { display: block; width: 100%; height: auto; border: 1px solid var(--rule); background: #fff; }
.shot figcaption {
  margin-top: 12px; font-size: 14.5px; color: var(--graphite); max-width: 72ch;
}
.shot figcaption b { color: var(--ink); font-weight: 650; }

.shots { display: grid; gap: 30px; }
@media (min-width: 900px) { .shots.two { grid-template-columns: 1fr 1fr; } }

/* ---------- the demo loop ---------- */

.demo { display: grid; gap: 30px; align-items: start; }
@media (min-width: 1000px) { .demo { grid-template-columns: 1.35fr 1fr; gap: 44px; } }
.demo img,
.demo video { display: block; width: 100%; height: auto; border: 1px solid var(--rule); background: #fff; }

.steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.steps li {
  display: grid; grid-template-columns: 58px 1fr; gap: 14px;
  padding: 15px 2px; border-bottom: 1px solid var(--rule-soft);
}
.steps .t {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  color: var(--camera-ink); padding-top: 3px;
}
.steps b { display: block; font-weight: 650; }
.steps span { font-size: 14.5px; color: var(--graphite); }

/* ---------- the real PDF, embedded ---------- */

.pdfbox { border: 1px solid var(--rule); background: var(--panel); }
.pdfbox object { display: block; width: 100%; height: 640px; border: 0; background: #fff; }
.pdffall { padding: 56px 26px; text-align: center; background: var(--panel); }
.pdffall p { margin: 0 0 14px; color: var(--graphite); }
.pdffall p:last-child { margin: 20px 0 0; }
.pdffall strong { color: var(--ink); }
.pdfbox .bar {
  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--graphite);
}
@media (max-width: 720px) { .pdfbox object { height: 420px; } }

/* ---------- the three roles ---------- */

.roles { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 860px) { .roles { grid-template-columns: repeat(3, 1fr); } }
.role { background: var(--panel); padding: 26px 24px; }
.role .who {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--graphite); display: block; margin-bottom: 12px;
}
.role h3 { margin-bottom: .45em; }
.role p { margin: 0 0 .9em; font-size: 15.5px; color: var(--graphite); }
.role p:last-child { margin-bottom: 0; }
.role .does {
  display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule-soft);
  font-size: 14px; color: var(--ink);
}
.role.r-dir  { border-top: 3px solid var(--actor); }
.role.r-dop  { border-top: 3px solid var(--camera); }
.role.r-gaff { border-top: 3px solid var(--light); }

/* ---------- fixture / feature strip ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.chips li {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  border: 1px solid var(--rule); padding: 6px 10px; color: var(--graphite);
  background: var(--panel);
}

/* ---------- contact form ---------- */

.contact-grid { display: grid; gap: 34px; }
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: start; }
}

.contact-form { display: grid; gap: 20px; }
.contact-form .field { display: grid; gap: 7px; }
.contact-form label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--graphite);
}
.contact-form input,
.contact-form textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--panel); border: 1px solid var(--rule); border-radius: 0;
  padding: 12px 14px;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none; border-color: var(--camera);
  box-shadow: inset 0 0 0 1px var(--camera);
}
.contact-form textarea { resize: vertical; min-height: 9rem; }
.contact-form button { justify-self: start; margin-top: 4px; cursor: pointer; }

/* Honeypot: present for bots, off-screen for people and screen readers.
   Must NOT become display:none - some bots skip hidden fields. */
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-error {
  margin: 0 0 22px; padding: 14px 16px;
  border: 1px solid var(--camera); border-left-width: 3px;
  background: var(--panel); color: var(--ink); font-size: 15px;
}

@media print {
  .top, .rail, .tblock nav { display: none; }
  body { background: #fff; padding: 0; }
}