/*
Theme Name: Dispatch Writer
Theme URI: https://broodingjay.com/
Author: Brooding Jay
Author URI: https://broodingjay.com/
Description: Block theme for the Dispatch product site.
Version: 0.3.2
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dispatch-writer
*/

/* ══ Tokens ══ */
:root{
  --paper:var(--wp--preset--color--paper);
  --band:var(--wp--preset--color--band);
  --sheet-bg:#ffffff;
  --ink:var(--wp--preset--color--ink);
  --ink-soft:var(--wp--preset--color--ink-soft);
  --mute:var(--wp--preset--color--mute);

  --hair:var(--wp--custom--hair);
  --hair-2:var(--wp--custom--hair2);

  --gut:var(--wp--custom--gut);
  --margin-col:var(--wp--custom--margincol);
  --sheet:var(--wp--custom--sheetw);
  --sec-y:var(--wp--custom--secy);
}

/* ══ Base ══ */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}
body{margin:0;-webkit-font-smoothing:antialiased;font-feature-settings:"kern" 1;}
img{max-width:100%;display:block;}
figure{margin:0;}
a{color:inherit;}
strong,b{font-weight:500;}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
::selection{background:var(--ink);color:var(--paper);}
:where(.is-layout-flow > *){margin-block-start:0;margin-block-end:0;}
:where(.wp-site-blocks > *){margin-block-start:0;margin-block-end:0;}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--ink);
  color:var(--paper);padding:12px 18px;font-size:14px;}
.skip:focus{left:0;}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap;}

/* ══ Sheet and grid ══ */
.sheet{max-width:var(--sheet);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut);}
.row{display:grid;grid-template-columns:var(--margin-col) minmax(0,1fr);
  column-gap:var(--wp--custom--rowgap);row-gap:0;}
.col{min-width:0;}
.row > .col{grid-column:2;}
.measure{max-width:62ch;}

.sec{padding-top:var(--sec-y);padding-bottom:var(--sec-y);}
.sec[id]{scroll-margin-top:78px;}
.sec-band{background:var(--band);}
.sec-hero{padding-top:clamp(76px,11vw,148px);padding-bottom:clamp(72px,10vw,132px);}
.sec-tight{padding-top:clamp(34px,4vw,58px);padding-bottom:clamp(34px,4vw,58px);}

@media (max-width:860px){
  .row{grid-template-columns:1fr;}
  .row > .col{grid-column:1;}
  .row > .folio,.row > .is-style-folio{margin-bottom:18px;}
}

/* ══ Rule ══ */
.rule{border:0;border-top:1px solid var(--hair);margin:0;height:0;}

/* ══ Folio ══ */
.folio,.is-style-folio{display:flex;align-items:baseline;gap:10px;
  font-family:var(--wp--preset--font-family--data);font-weight:500;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin:0;max-width:none;padding-top:.55em;}
.folio .num{color:var(--ink);}

/* ══ Type roles ══ */
.h1,.h2{font-family:var(--wp--preset--font-family--display);font-weight:800;
  margin:0;text-wrap:balance;}
.h1{font-size:var(--wp--preset--font-size--display);line-height:1.02;letter-spacing:-.033em;
  max-width:15ch;}
.h2{font-size:var(--wp--preset--font-size--heading);line-height:1.1;letter-spacing:-.028em;}
.sec-title{font-family:var(--wp--preset--font-family--display);font-weight:800;
  font-size:clamp(1.5rem,2.6vw,1.9rem);line-height:1.1;letter-spacing:-.028em;
  margin:0 0 34px;color:var(--ink);max-width:none;}
.h3{font-family:var(--wp--preset--font-family--display);font-weight:700;
  font-size:22px;line-height:1.2;letter-spacing:-.018em;margin:0;}
.lede,.is-style-lede{font-size:var(--wp--preset--font-size--lede);line-height:1.5;
  margin:20px 0 20px;max-width:42ch;}
p{margin:0 0 16px;max-width:62ch;}
p:last-child{margin-bottom:0;}
.after-h2{margin-top:26px;}
.fine,.is-style-fine{font-size:var(--wp--preset--font-size--fine);line-height:1.55;
  color:var(--ink-soft);}
.cap,.is-style-cap{font-family:var(--wp--preset--font-family--data);font-weight:500;
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);
  margin:14px 0 0;max-width:none;}

/* ══ Hero lockup ══ */
/* The masthead mark is 24px and reads as chrome. This is the product name at
   the size a product page should carry it. */
.lockup{display:flex;align-items:center;gap:clamp(12px,1.4vw,18px);
  margin:0 0 clamp(28px,3.6vw,46px);}
.lockup-icon{margin:0;flex:none;}
.lockup .lockup-icon img{width:clamp(52px,5.6vw,72px);height:auto;display:block;
  filter:drop-shadow(0 1px 1px rgba(17,17,17,.10)) drop-shadow(0 5px 14px rgba(17,17,17,.09));}
.lockup-name{font-family:var(--wp--preset--font-family--data);font-weight:500;
  font-size:clamp(1.35rem,2.7vw,2rem);line-height:1;letter-spacing:.16em;
  text-transform:uppercase;margin:0;max-width:none;color:var(--ink);}

/* ══ Caret ══ */
/* Sized in em so it tracks the display face rather than a fixed pixel. */
.sec-hero .h1::after{content:"";display:inline-block;width:.055em;height:.78em;
  background:var(--ink);margin-left:.09em;vertical-align:-.02em;border-radius:1px;
  animation:caret 1.1s step-end infinite;}
@keyframes caret{50%{opacity:0;}}
@media (prefers-reduced-motion:reduce){
  .sec-hero .h1::after{animation:none;opacity:1;}
}

/* ══ Buttons ══ */
.btn,.wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--wp--preset--font-family--data);font-weight:500;font-size:12.5px;
  letter-spacing:.06em;padding:15px 28px;border-radius:2px;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background .13s,color .13s;}
.btn:hover,.wp-block-button__link:hover{background:#000;}
.btn-ghost,.is-style-ghost .wp-block-button__link{background:transparent;color:var(--ink);
  border-color:var(--hair-2);}
.btn-ghost:hover,.is-style-ghost .wp-block-button__link:hover{background:transparent;
  border-color:var(--ink);}
.btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}

/* ══ Masthead ══ */
.mast{position:sticky;top:0;z-index:50;background:var(--paper);
  border-bottom:1px solid var(--hair);}
.mast-in{display:flex;align-items:center;gap:18px;padding-top:14px;padding-bottom:14px;
  position:relative;}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;
  font-family:var(--wp--preset--font-family--data);font-weight:500;font-size:13.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);}
.mark-icon{width:24px;height:24px;flex:none;
  filter:drop-shadow(0 1px 2px rgba(17,17,17,.16));}
.mast-links{margin:0 0 0 auto;max-width:none;display:flex;gap:20px;align-items:center;
  font-size:15px;}
.mast-links a{text-decoration:none;color:var(--ink-soft);}
.mast-links a:hover{color:var(--ink);}
.mast-cta{margin:0;max-width:none;}
.mast-cta a.now{font-family:var(--wp--preset--font-family--body);font-weight:500;
  font-size:15px;line-height:1;letter-spacing:0;color:var(--ink);
  border:1px solid var(--ink);border-radius:7px;padding:10px 18px;
  text-decoration:none;white-space:nowrap;display:inline-block;
  transition:background .15s ease, color .15s ease;}
.mast-cta a.now:hover{background:var(--ink);color:var(--paper);}
@media (prefers-reduced-motion:reduce){.mast-cta a.now{transition:none;}}

/* ══ Mobile menu ══ */
/* Checkbox + label, no JavaScript. The label toggles the checkbox by `for`, so
   the input only needs to stay focusable for the keyboard — it is not the
   click target and does not need to sit under the bars. */
.mnav-t{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;
  margin:0;display:none;}
.mnav-b{display:none;width:44px;height:44px;
  flex-direction:column;justify-content:center;gap:5px;cursor:pointer;}
.mnav-b span{display:block;height:1.6px;width:21px;background:var(--ink);border-radius:2px;
  transition:transform .18s,opacity .18s;}
.mnav-t:focus-visible + .mnav-b{outline:2px solid var(--ink);outline-offset:2px;}

@media (max-width:760px){
  .mnav-t{display:block;}
  .mnav-b{display:flex;margin-left:auto;margin-right:-10px;}
  /* The bar wraps instead of overlaying, so BOTH the links and the Try It
     button can live in the panel — an absolutely positioned panel could only
     ever contain one of the two sibling blocks. */
  .mast-in{flex-wrap:wrap;}
  .mast-links,.mast-cta{flex-basis:100%;display:none;margin:0;}
  .mnav-t:checked ~ .mast-links{display:flex;flex-direction:column;
    align-items:stretch;gap:0;padding-top:4px;}
  .mnav-t:checked ~ .mast-cta{display:block;padding:16px 0 6px;}
  .mast-links a{display:block;width:100%;padding:15px 0;font-size:17px;color:var(--ink);
    border-top:1px solid var(--hair);}
  .mast-cta a.now{display:block;text-align:center;font-size:16px;padding:13px 18px;}
  /* the bars become an X */
  .mnav-t:checked + .mnav-b span:nth-child(1){transform:translateY(6.6px) rotate(45deg);}
  .mnav-t:checked + .mnav-b span:nth-child(2){opacity:0;}
  .mnav-t:checked + .mnav-b span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg);}
}
@media (prefers-reduced-motion:reduce){
  .mnav-b span{transition:none;}
}

/* ══ Screen plate ══ */
.plate-wrap{margin-top:clamp(30px,4vw,54px);}

/* ══ Feature grid ══ */
/* ══ Feature cards ══ */
/* The band and the app UI are both pale, so the section had no tonal range.
   A white card gives three tones — band, card, screenshot. */
.feat{background:var(--paper);border-radius:10px;padding:18px 18px 22px;
  box-shadow:0 1px 2px rgba(17,17,17,.05),0 10px 26px rgba(17,17,17,.055);
  transition:transform .18s ease, box-shadow .18s ease;}
.feat:hover{transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(17,17,17,.06),0 16px 34px rgba(17,17,17,.085);}
.feat .h3 a{text-decoration:none;
  border-bottom:1px solid var(--hair-2);padding-bottom:1px;}
.feat .h3 a:hover{border-bottom-color:var(--ink);}
@media (prefers-reduced-motion:reduce){.feat{transition:none;}.feat:hover{transform:none;}}
.also a{color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--ink-soft);text-decoration-thickness:1px;
  text-underline-offset:4px;}
.also a:hover{text-decoration-color:var(--ink);text-decoration-thickness:2px;}
.crop{margin:0 0 16px;}
.crop img{width:100%;height:auto;border:0;border-radius:5px;display:block;}
.crop .wp-lightbox-container button{cursor:zoom-in;}
.crop .wp-lightbox-container button:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
.also-title{font-family:var(--wp--preset--font-family--data);font-weight:500;font-size:14px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin:56px 0 18px;max-width:none;}
.also{font-size:15px;color:var(--ink-soft);max-width:none;line-height:2.05;}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 24px;}
@media (max-width:820px){.grid3{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.grid3{grid-template-columns:1fr;}}
.feat p{margin:10px 0 0;font-size:15.5px;color:var(--ink-soft);max-width:34ch;}
.feat p:last-child{margin-bottom:0;}
.feat.more{display:flex;align-items:flex-start;}
.feat.more .h3{color:var(--mute);}

/* ══ Price ══ */
.price-block{max-width:640px;}
.price-fine{margin:20px 0 26px;max-width:44ch;}
.signup{display:flex;flex-wrap:wrap;gap:10px;margin:0;align-items:stretch;}
.signup input[type=email]{font-family:inherit;font-size:15.5px;font-weight:400;
  color:var(--ink);background:var(--paper);border:1px solid var(--ink);border-radius:2px;
  padding:14px 15px;flex:1 1 260px;max-width:320px;min-width:0;}
.signup input[type=email]::placeholder{color:var(--ink-soft);opacity:1;}
.signup input[type=email]:focus{outline:2px solid var(--ink);outline-offset:2px;}
.buy-row{margin-top:18px;}
.price{font-family:var(--wp--preset--font-family--display);font-weight:700;
  font-size:var(--wp--preset--font-size--price);line-height:.94;letter-spacing:-.045em;
  margin:0;max-width:none;}

/* ══ Prose (Help, Changelog, ordinary pages) ══ */
.prose{max-width:68ch;}
.prose h2{font-size:var(--wp--preset--font-size--heading);line-height:1.14;
  letter-spacing:-.026em;margin:44px 0 14px;}
.prose h3{font-size:17.5px;line-height:1.3;letter-spacing:-.012em;margin:30px 0 10px;}
.prose p{margin:0 0 16px;}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px;}
.prose li{margin-bottom:7px;}
.prose img{margin:24px 0;border:1px solid var(--hair);border-radius:4px;}
.prose hr{border:0;border-top:1px solid var(--hair);margin:34px 0;}
.prose a{text-decoration-thickness:1px;text-underline-offset:2px;}

/* ══ Posts ══ */
.entries > li,.entries .wp-block-post{margin-bottom:34px;}
.entries .wp-block-post-date{font-family:var(--wp--preset--font-family--data);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);}
.entries .wp-block-post-title{font-size:20px;line-height:1.22;letter-spacing:-.018em;
  margin:6px 0 8px;}
.entries .wp-block-post-title a{text-decoration:none;}
.entries .wp-block-post-excerpt{color:var(--ink-soft);font-size:15px;}
.pager{margin-top:34px;font-family:var(--wp--preset--font-family--data);font-size:12px;
  letter-spacing:.06em;}

/* ══ Search ══ */
.wp-block-search__input{border:1px solid var(--hair-2);border-radius:2px;padding:12px 14px;
  font-family:inherit;font-size:15px;background:var(--sheet-bg);color:var(--ink);}
.wp-block-search__button{background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  border-radius:2px;padding:12px 20px;font-family:var(--wp--preset--font-family--data);
  font-size:12.5px;letter-spacing:.06em;cursor:pointer;}

/* ══ Colophon ══ */
.colophon{border-top:1px solid var(--hair);padding-top:clamp(38px,5vw,62px);
  padding-bottom:clamp(38px,5vw,62px);}
.colophon .cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(24px,3vw,44px);}
@media (max-width:820px){.colophon .cols{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:480px){.colophon .cols{grid-template-columns:1fr;}}
.colophon .cols p{font-size:13.5px;color:var(--ink-soft);margin:14px 0 0;max-width:30ch;}
.colophon .cols > .wp-block-group{border-top:1px solid var(--hair);padding-top:18px;}
.colophon h2{font-family:var(--wp--preset--font-family--data);font-weight:500;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
  margin:0 0 14px;}
.colophon ul{list-style:none;margin:0;padding:0;font-size:14.5px;}
.colophon li{margin-bottom:8px;}
/* Underlined at rest, matching the Feeds and Brooding Jay colophons. */
.colophon a{color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--hair-2);text-decoration-thickness:1px;
  text-underline-offset:4px;}
.colophon a:hover{text-decoration-color:var(--ink);}
/* the descriptor line is prose, not a link — leave it alone */
.colophon .cols p{text-decoration:none;}
.colophon .imprint{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:clamp(34px,4vw,54px);padding-top:20px;border-top:1px solid var(--hair);
  font-size:13.5px;color:var(--mute);}
.colophon .imprint p{margin:0;max-width:none;}
.colophon .imprint .rt{margin-left:auto;}

/* ══ Screenshot ══ */
.wp-block-image{margin:0;}
.wp-block-image img{width:100%;height:auto;}

/* ══ Help docs ══ */
/* Emitted by tools/gen_docs.py from content/help/. The hub and the six section
   pages share this; nothing else on the site uses it. */
.sec-doc{padding-top:clamp(46px,5.5vw,74px);padding-bottom:clamp(46px,5.5vw,74px);}
.sec-doc .h1{margin-bottom:clamp(30px,4vw,52px);max-width:none;}
.prose .doc-h{font-family:var(--wp--preset--font-family--display);font-weight:700;
  font-size:1.34rem;line-height:1.18;letter-spacing:-.02em;margin:56px 0 14px;
  scroll-margin-top:104px;}
.prose .doc-h:first-of-type{margin-top:0;}
.prose h4{font-size:16px;line-height:1.3;letter-spacing:-.008em;margin:26px 0 9px;}
.prose h5{font-family:var(--wp--preset--font-family--data);font-weight:500;
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
  margin:24px 0 8px;}
.prose table{width:100%;border-collapse:collapse;font-size:15px;margin:0 0 20px;}
.prose :is(th,td){text-align:left;padding:10px 14px 10px 0;
  border-bottom:1px solid var(--hair);vertical-align:top;}
.prose th{font-family:var(--wp--preset--font-family--data);font-weight:500;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);}
.prose code{font-family:var(--wp--preset--font-family--data);font-weight:500;font-size:.92em;}

/* A table whose first header cell is "Key" is a shortcut table. */
.keys-t td:first-child{white-space:nowrap;width:1%;}
.keys-t code,kbd{font-family:var(--wp--preset--font-family--data);font-weight:500;
  font-size:11.5px;letter-spacing:.02em;border:1px solid var(--hair-2);border-radius:3px;
  padding:2px 6px;background:var(--sheet-bg);white-space:nowrap;}

/* The hub's contents. Named apart from the colophon's own .cols grid. */
.docs-toc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3vw,46px);margin-top:40px;}
@media (max-width:900px){.docs-toc{grid-template-columns:1fr;}}
.docs-toc .cols-h{font-family:var(--wp--preset--font-family--data);font-weight:500;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  margin:0 0 16px;}
.docs-toc ul{list-style:none;margin:0;padding:0;}
.docs-toc a{text-decoration:none;border-bottom:1px solid var(--hair-2);padding-bottom:1px;}
.docs-toc a:hover{border-bottom-color:var(--ink);}
.docs-toc li{margin-bottom:16px;font-size:14.5px;line-height:1.45;color:var(--ink-soft);}
.docs-toc li a{font-family:var(--wp--preset--font-family--display);font-weight:700;
  font-size:16px;letter-spacing:-.008em;color:var(--ink);}
.turn{margin-top:52px;padding-top:22px;border-top:1px solid var(--hair);
  display:flex;gap:18px;flex-wrap:wrap;font-size:14.5px;max-width:none;}
.turn a{text-decoration:none;border-bottom:1px solid var(--hair-2);padding-bottom:1px;}
.turn a:hover{border-bottom-color:var(--ink);}

/* "Plate" is a registered image style with no rule until now — help screenshots
   wear it, and it matches the front page's crop treatment. */
.plate img,.is-style-plate img{border:1px solid var(--hair);border-radius:4px;display:block;}

/* ══ Changelog ══ */
/* Emitted by tools/gen_docs.py from ~/Developer/Dispatch/CHANGELOG.md.
   .rel is a .row, so the version sits in the margin column beside its notes. */
.rel{border-top:1px solid var(--hair);padding-top:26px;padding-bottom:28px;}
.rel-n{font-family:var(--wp--preset--font-family--data);font-weight:500;font-size:16px;
  letter-spacing:.02em;margin:0;}
.rel-d{font-family:var(--wp--preset--font-family--data);font-weight:500;font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:6px 0 0;
  max-width:none;}
.rel-g{font-family:var(--wp--preset--font-family--data);font-weight:500;font-size:11.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft);margin:30px 0 12px;
  max-width:none;}
.rel-g:first-child{margin-top:0;}
.rel-i{list-style:none;margin:0;padding:0;max-width:62ch;}
.rel-i li{margin-bottom:12px;color:var(--ink-soft);font-size:15.5px;line-height:1.55;}
.rel-i li:last-child{margin-bottom:0;}
.rel-p{color:var(--ink-soft);max-width:62ch;}
:is(.rel-i,.rel-p) :is(strong,b){color:var(--ink);font-weight:600;}
:is(.rel-i,.rel-p,.sec-doc,.prose) :is(pre,code,samp){
  font-family:var(--wp--preset--font-family--data);font-weight:500;}
:is(.rel-i,.rel-p) code{font-size:.92em;}
.rel-note{margin:26px 0 0;padding:22px 0 4px;border-top:1px solid var(--hair);max-width:62ch;}
@media (max-width:900px){
  .rel-d{margin-top:2px;}
  .rel-g:first-child{margin-top:20px;}
}

/* ══ Help doc icons ══ */
/* Generated by tools/gen_icons.py — do not hand-edit. Keyed on the
   heading anchor, so the markup stays a plain Gutenberg heading.
   mask-image, not background, so the glyph takes currentColor. */
.prose .doc-h{padding-left:38px;position:relative;}
.prose .doc-h::before{content:"";position:absolute;left:0;top:.06em;
  width:26px;height:26px;background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;}
@media (max-width:600px){.prose .doc-h{padding-left:32px;}
  .prose .doc-h::before{width:22px;height:22px;}}
.prose .doc-h#what-dispatch-is::before{-webkit-mask-image:url(img/icons/what-dispatch-is.png);mask-image:url(img/icons/what-dispatch-is.png);}
.prose .doc-h#your-first-piece::before{-webkit-mask-image:url(img/icons/your-first-piece.png);mask-image:url(img/icons/your-first-piece.png);}
.prose .doc-h#the-front-page::before{-webkit-mask-image:url(img/icons/the-front-page.png);mask-image:url(img/icons/the-front-page.png);}
.prose .doc-h#the-action-bar::before{-webkit-mask-image:url(img/icons/the-action-bar.png);mask-image:url(img/icons/the-action-bar.png);}
.prose .doc-h#before-you-buy::before{-webkit-mask-image:url(img/icons/before-you-buy.png);mask-image:url(img/icons/before-you-buy.png);}
.prose .doc-h#markdown-as-you-type::before{-webkit-mask-image:url(img/icons/markdown-as-you-type.png);mask-image:url(img/icons/markdown-as-you-type.png);}
.prose .doc-h#focus-mode::before{-webkit-mask-image:url(img/icons/focus-mode.png);mask-image:url(img/icons/focus-mode.png);}
.prose .doc-h#typewriter-mode::before{-webkit-mask-image:url(img/icons/typewriter-mode.png);mask-image:url(img/icons/typewriter-mode.png);}
.prose .doc-h#page-view::before{-webkit-mask-image:url(img/icons/page-view.png);mask-image:url(img/icons/page-view.png);}
.prose .doc-h#slash-commands::before{-webkit-mask-image:url(img/icons/slash-commands.png);mask-image:url(img/icons/slash-commands.png);}
.prose .doc-h#images::before{-webkit-mask-image:url(img/icons/images.png);mask-image:url(img/icons/images.png);}
.prose .doc-h#word-count-goals::before{-webkit-mask-image:url(img/icons/word-count-goals.png);mask-image:url(img/icons/word-count-goals.png);}
.prose .doc-h#proofreading::before{-webkit-mask-image:url(img/icons/proofreading.png);mask-image:url(img/icons/proofreading.png);}
.prose .doc-h#status::before{-webkit-mask-image:url(img/icons/status.png);mask-image:url(img/icons/status.png);}
.prose .doc-h#tags::before{-webkit-mask-image:url(img/icons/tags.png);mask-image:url(img/icons/tags.png);}
.prose .doc-h#starring::before{-webkit-mask-image:url(img/icons/starring.png);mask-image:url(img/icons/starring.png);}
.prose .doc-h#archive::before{-webkit-mask-image:url(img/icons/archive.png);mask-image:url(img/icons/archive.png);}
.prose .doc-h#finding-a-piece::before{-webkit-mask-image:url(img/icons/finding-a-piece.png);mask-image:url(img/icons/finding-a-piece.png);}
.prose .doc-h#destinations::before{-webkit-mask-image:url(img/icons/destinations.png);mask-image:url(img/icons/destinations.png);}
.prose .doc-h#multi-publish::before{-webkit-mask-image:url(img/icons/multi-publish.png);mask-image:url(img/icons/multi-publish.png);}
.prose .doc-h#printing::before{-webkit-mask-image:url(img/icons/printing.png);mask-image:url(img/icons/printing.png);}
.prose .doc-h#copying-and-exporting::before{-webkit-mask-image:url(img/icons/copying-and-exporting.png);mask-image:url(img/icons/copying-and-exporting.png);}
.prose .doc-h#settings::before{-webkit-mask-image:url(img/icons/settings.png);mask-image:url(img/icons/settings.png);}
.prose .doc-h#keyboard-shortcuts::before{-webkit-mask-image:url(img/icons/keyboard-shortcuts.png);mask-image:url(img/icons/keyboard-shortcuts.png);}
.prose .doc-h#where-your-files-live::before{-webkit-mask-image:url(img/icons/where-your-files-live.png);mask-image:url(img/icons/where-your-files-live.png);}
.prose .doc-h#themes-and-typography::before{-webkit-mask-image:url(img/icons/themes-and-typography.png);mask-image:url(img/icons/themes-and-typography.png);}
.prose .doc-h#updates::before{-webkit-mask-image:url(img/icons/updates.png);mask-image:url(img/icons/updates.png);}
.prose .doc-h#trial-and-licence::before{-webkit-mask-image:url(img/icons/trial-and-licence.png);mask-image:url(img/icons/trial-and-licence.png);}
.prose .doc-h#privacy::before{-webkit-mask-image:url(img/icons/privacy.png);mask-image:url(img/icons/privacy.png);}
.prose .doc-h#getting-help::before{-webkit-mask-image:url(img/icons/getting-help.png);mask-image:url(img/icons/getting-help.png);}