@font-face{font-family:Geist;src:url("/assets/geist-latin-BGnTDqni.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("/assets/source-serif-4-latin-DuZxYNfE.woff2") format("woff2");font-weight:200 900;font-display:swap}
*{box-sizing:border-box}

details > summary.disclosure-heading,.disclosure-button{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:44px;padding:8px 0;list-style:none;cursor:pointer;
  font-size:15px;font-weight:500;line-height:1.5;color:#121211;
}
summary.disclosure-heading::-webkit-details-marker{display:none}
.disclosure-label{flex:1;min-width:0;overflow-wrap:anywhere}
.disclosure-chevron{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:#3d3c39}
details[open] > .disclosure-heading > .disclosure-chevron{transform:rotate(90deg)}
.disclosure-button{width:100%;text-align:left;background:none;border:0;text-decoration:none}
.disclosure-button[aria-expanded="true"] > .disclosure-chevron{transform:rotate(90deg)}

html{scroll-padding-top:112px}
body{margin:0;background:#fafaf8;color:#121211;font-family:'Geist', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:18px;line-height:1.7}
::selection{background:rgba(18,18,17,.09);color:#121211}
a{color:#121211;text-decoration-thickness:1px;text-underline-offset:4px;overflow-wrap:anywhere}
@media (hover:hover) and (pointer:fine){
  a:hover:not(:disabled):not([aria-disabled="true"]){text-decoration-thickness:2px}}
a:focus-visible,summary:focus-visible{outline:2px solid #121211;outline-offset:5px;border-radius:3px}
.reading-skip{position:fixed;top:8px;left:16px;z-index:20;transform:translateY(-150%);background:#fafaf8;padding:10px 16px;color:#121211}
.reading-skip:focus{transform:none}
/* An act is the pill family's: filled in ink for the one the page asks for,
   the pale fill beside it. The nav's acts are the family's small size, as
   they are on the landing page; the close's act is the large one. */
.reading-act{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 18px;background:#121211;color:#ffffff;border-radius:9999px;text-decoration:none;font-size:14px;font-weight:510;letter-spacing:-.01em;line-height:1.2;white-space:nowrap}
.reading-act--second{background:rgba(18,18,17,.055);color:#121211}
.gate-nav .reading-act{min-height:32px;padding:6px 13px;font-size:13px}
.reading-close .reading-act{min-height:46px;padding-inline:22px;font-size:15px}
@media(pointer:coarse){.reading-act{min-height:44px}}
@media (hover:hover) and (pointer:fine){
  .reading-act:hover:not(:disabled):not([aria-disabled="true"]){background:#2b2a28;text-decoration:none}
  .reading-act--second:hover:not(:disabled):not([aria-disabled="true"]){background:rgba(18,18,17,.09)}}
/* The shared nav and foot are drawn by the app's rules; a reading page's own
   paragraph spacing stays out of them. */

.mark{display:flex;align-items:center}
/* The lockup. A stroke still to be sent is the pale mark colour; a sent one
   has the ink the name is set in laid over it, so a finished day reads as one
   solid mark. The ink scales from its top end, which is where a send runs it
   in from. */
.lockup{display:inline-flex;align-items:center;gap:8px;color:#121211}
.count-mark{height:18px;width:auto;display:block;flex:none}
.count-stroke{fill:rgba(18,18,17,.2)}
.count-ink{fill:currentColor;transform-box:fill-box;transform-origin:50% 0}
.lockup-name{
  font-family:'Geist', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:15px;font-weight:590;
  letter-spacing:-.02em;line-height:1;white-space:nowrap;
}


/* The nav: the mark, How it works and the two pages in the middle, and what
   the page itself is asking for at the right. Its edges stand on the page's
   own measure, so the mark and the acts line up with the words under them. */
.gate-nav{
  position:sticky;top:0;z-index:6;background:#fafaf8;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;
  gap:12px;min-height:72px;
  padding:8px max(40px,calc((100% - 1280px) / 2 + 40px));
}
.gate-nav[data-stuck="true"]{box-shadow:0 1px 0 rgba(18,18,17,.09)}
.gate-nav .mark{justify-self:start}
.gate-nav .lockup,.gate-foot .lockup{color:#121211}
.gate-nav .count-mark,.gate-foot .count-mark{height:17px}
.gate-nav .lockup-name,.gate-foot .lockup-name{font-size:18px}
.mark--link{padding:0;border-radius:3px;text-decoration:none}
.gate-links{display:flex;align-items:center;gap:32px}
.gate-link{
  font-family:'Geist', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:14px;font-weight:510;
  color:#3d3c39;padding:6px 2px;border-radius:3px;text-decoration:none;
}
.gate-link[aria-current="page"]{color:#121211}
@media (hover:hover) and (pointer:fine){
  .gate-link:hover:not(:disabled):not([aria-disabled="true"]){color:#121211}
}
.gate-link[aria-current="page"]{
  text-decoration:underline;text-underline-offset:6px;
  text-decoration-thickness:1px;
}
.gate-acts{display:flex;align-items:center;justify-content:flex-end;gap:8px}

/* The foot, which signs the same sentence on every public page: the lockup
   and who Quill is, then a column for the product's pages, the company's and
   the legal ones, and a base line under a hairline. */
.gate-foot{
  background:#fafaf8;
  padding:60px max(40px,calc((100% - 1280px) / 2 + 40px)) 36px;
}
.gate-foot-in{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start;
}
.gate-foot-brand{grid-column:1 / span 5;display:grid;gap:14px;justify-items:start}
.gate-foot-brand p{max-width:22em;font-size:14px;line-height:1.55;color:#6a6965}
.gate-foot-column{grid-column:span 2;display:flex;flex-direction:column;align-items:flex-start}
.gate-foot-column:nth-child(2){grid-column:7 / span 2}
.gate-foot-title{font-size:13px;font-weight:590;color:#121211;margin-bottom:2px}
.gate-foot-page{
  display:inline-flex;align-items:center;min-height:40px;
  font-family:'Geist', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:14px;color:#6a6965;text-decoration:none;
}
@media (hover:hover) and (pointer:fine){
  .gate-foot-page:hover:not(:disabled):not([aria-disabled="true"]){color:#121211}
}
.gate-foot-base{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:64px;padding-top:24px;
  border-top:1px solid rgba(18,18,17,.09);
  font-size:13px;color:#6a6965;
}

@media (max-width:880px){
  .gate-foot-brand{grid-column:1 / -1}
  .gate-foot-column,.gate-foot-column:nth-child(2){grid-column:span 4}
}
@media (max-width:620px){
  /* The bar keeps the mark and the acts on its first row, and the page links
     take a row of their own under them. */
  .gate-nav{
    grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"mark acts" "links links";
    min-height:56px;padding:6px 8px 6px 20px;
    column-gap:8px;row-gap:0;
  }
  .gate-nav .mark{grid-area:mark}
  .gate-acts{grid-area:acts}
  .gate-links{grid-area:links;justify-content:center;gap:18px}
  .gate-link{min-height:44px}
  .gate-foot{padding:32px 20px 40px}
  /* Two columns: Privacy and Terms read on under the company's pages. */
  .gate-foot-in{
    grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto 1fr;
    grid-template-areas:"brand brand" "product company" "product legal";column-gap:12px;row-gap:24px;
  }
  .gate-foot-brand{grid-area:brand}
  .gate-foot-column:nth-child(2){grid-area:product}
  .gate-foot-column:nth-child(3){grid-area:company}
  .gate-foot-legal{grid-area:legal;margin-top:calc(-1 * 24px)}
  .gate-foot-legal .gate-foot-title{display:none}
  .gate-foot-page{min-height:44px}
  .gate-foot-base{margin-top:24px;padding-top:18px;justify-content:flex-start;gap:6px}
}
/* On any touch screen a foot link is a whole target, a short word too. */
@media (pointer:coarse){.gate-foot-page{min-height:44px;min-width:44px}}

/* On intermediate widths, links take their own row so both account actions remain available. */
@media(width > 620px) and (width <= 880px){
  .gate-nav{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"mark acts" "links links";row-gap:0}
  .gate-nav .mark{grid-area:mark}.gate-acts{grid-area:acts}
  .gate-links{grid-area:links;justify-content:center}
}
@media(max-width:620px){.reading-close .reading-act{min-height:48px;padding-inline:20px;font-size:16px}.gate-nav .reading-act{padding-inline:8px}}
.gate-foot p{margin:0}
.reading-main{max-width:1200px;margin:0 auto;padding:32px 40px 80px}
.reading-main:focus{outline:none}
.reading-breadcrumb{margin-bottom:28px;font-size:14px;line-height:1.5}
.reading-breadcrumb a{display:inline-flex;align-items:center;gap:8px;min-height:32px;color:#6a6965;text-decoration:none}
@media (hover:hover) and (pointer:fine){
  .reading-breadcrumb a:hover:not(:disabled):not([aria-disabled="true"]){color:#121211;text-decoration:underline}}
.reading-arrow{width:20px;height:20px;flex:none}

/* A page's title is set the way the public pages set a section's title, and
   the guides index's is a display line, as the landing page's are. Every
   heading under a title is a step smaller. */
h1{font-size:32px;font-weight:590;line-height:1.1;letter-spacing:-.03em;text-wrap:balance;margin:0 0 20px}
h2{font-size:22px;font-weight:590;line-height:1.3;letter-spacing:-.02em;text-wrap:balance;margin:0 0 18px}
h3{font-size:18px;font-weight:590;line-height:1.4;margin:32px 0 12px}
p{color:#3d3c39;margin:0 0 20px;text-wrap:pretty}
li{color:#3d3c39;padding-left:4px;margin:8px 0}
ul,ol{padding-left:22px;margin:0 0 24px}
.reading-opening{max-width:720px;margin-bottom:40px}
.reading-opening p{font-size:19px;line-height:1.6;color:#3d3c39;margin:0;max-width:62ch}
.reading-opening .reading-byline{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:14px;line-height:1.6;color:#6a6965;margin-top:22px}
.reading-opening .reading-made{font-size:14px;line-height:1.6;color:#6a6965;margin-top:4px}
.reading-byline time{white-space:nowrap}
.reading-main--index{padding-top:72px}
.reading-opening--centered{max-width:none;text-align:center;margin-bottom:56px}
.reading-opening--centered h1{font-size:48px;letter-spacing:-.04em;line-height:1.04}
.reading-opening--centered p{margin-inline:auto;max-width:36em}
.reading-crosslink{margin:40px 0 0;font-size:16px}

/* The template first: the page most readers come for, on the landing page's
   band, with the top of a resume standing in it. */
.reading-feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:end;background:#f3f2ec;border-radius:18px;padding:44px 44px 0 52px;overflow:hidden;margin-bottom:24px}
.reading-feature-copy{padding-bottom:44px}
.reading-feature h2{font-size:30px;line-height:1.15;letter-spacing:-.025em;margin-bottom:12px}
.reading-feature h2 a{color:#121211;text-decoration:none}
@media (hover:hover) and (pointer:fine){
  .reading-feature h2 a:hover:not(:disabled):not([aria-disabled="true"]){text-decoration:underline}}
.reading-feature-copy>p{font-size:17px;margin:0}
.reading-feature .reading-feature-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.reading-feature .reading-feature-note{font-size:14px;color:#6a6965;margin-top:10px}
.reading-feature-paper{background:#ffffff;box-shadow:0 0 0 1px rgba(18,18,17,.07), 0 1px 2px rgba(18,18,17,.04), 0 18px 40px -24px rgba(18,18,17,.24);border-radius:4px 4px 0 0;padding:36px 40px 24px;font-family:"Times New Roman",Times,serif;font-size:15px;line-height:1.5;color:#121211;height:300px;overflow:hidden}
.reading-feature-paper p{color:#121211;margin:0 0 4px}
.reading-feature-paper .reading-feature-name{font-size:24px;font-weight:700;text-align:center;margin:0}
.reading-feature-paper .reading-feature-role{font-size:14px;text-align:center;margin-bottom:16px}
.reading-feature-paper .reading-feature-head{font-weight:700;text-transform:uppercase;border-bottom:1px solid rgba(18,18,17,.16);padding-bottom:2px;margin-bottom:8px}
.reading-feature-paper ul{margin:4px 0 0;padding-left:20px}
.reading-feature-paper li{color:#121211;margin:4px 0}

/* One row per guide: its line before and after on the band, then the guide. */
.reading-rows{list-style:none;padding:0;margin:0;display:grid;gap:18px}
.reading-row{position:relative;padding:0;margin:0;background:#ffffff;border:1px solid rgba(18,18,17,.09);border-radius:16px;overflow:hidden}
.reading-row>.guide-pair{background:#f3f2ec;padding:24px 28px}
.reading-row-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;padding:20px 28px}
.reading-row-foot h2{font-size:20px;margin:0 0 4px}
.reading-row-foot h2 a{color:#121211;text-decoration:none}
.reading-row-foot h2 a::after{content:"";position:absolute;inset:0;border-radius:16px}
.reading-row-foot h2 a:focus-visible{outline:none}
.reading-row:has(h2 a:focus-visible){outline:2px solid #121211;outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .reading-row:hover h2 a{text-decoration:underline}}
.reading-row-foot p{font-size:16px;margin:0}
.reading-row-foot .reading-row-meta{display:grid;justify-items:end;font-size:14px;color:#6a6965;white-space:nowrap}

/* A guide's line: a kept line in ink, a changed line on the highlight with
   its added words on the deeper one, and a rejected claim struck in mute. */
.guide-pair{display:grid;grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr);gap:10px;align-items:stretch}
.guide-pair-arrow{position:relative;align-self:center;justify-self:center;width:18px;height:1.5px;background:#121211}
.guide-pair-arrow::after{content:"";position:absolute;right:0;top:-3.5px;width:8px;height:8px;border-top:1.5px solid #121211;border-right:1.5px solid #121211;transform:rotate(45deg);transform-origin:center}
.guide-card{background:#ffffff;border:1px solid rgba(18,18,17,.09);border-radius:12px;padding:16px 18px;display:grid;gap:6px;align-content:start}
.guide-card .guide-card-label{font-size:13px;line-height:1.4;color:#6a6965;margin:0}
.guide-card .guide-card-line{font-size:16px;line-height:1.6;color:#121211;margin:0}
.guide-changed{background:#fbf1c9;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:1px 2px}
.guide-changed ins{background:#f5df8f;text-decoration:none;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.guide-claim del{color:#6a6965;text-decoration-color:rgba(18,18,17,.5);text-decoration-thickness:1px}
.guide-check{display:inline-block;font-size:13px;line-height:1.5;font-weight:510;color:#121211;border:1px solid rgba(18,18,17,.16);border-radius:6px;padding:0 6px;vertical-align:1px;white-space:nowrap}

/* A guide: its opening and article on the left, its line's panel beside them. */
.reading-guide{display:grid;grid-template-columns:minmax(0,680px) minmax(0,400px);grid-template-areas:"head panel" "body panel";column-gap:72px;justify-content:space-between;align-items:start}
.reading-guide>.reading-opening{grid-area:head}
.reading-guide-body{grid-area:body;min-width:0}
.reading-guide-body>section+section{margin-top:56px}
.reading-step-number{display:inline-block;width:30px;font-family:'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;font-size:15px;font-weight:510;color:#6a6965;letter-spacing:0}
.reading-short{background:#ffffff;border:1px solid rgba(18,18,17,.09);border-radius:14px;padding:20px 24px;margin:0 0 48px}
.reading-short h2{font-size:15px;line-height:1.5;letter-spacing:0;margin:0 0 8px}
.reading-short ol{margin:0;padding-left:22px}
.reading-short li{color:#121211;font-size:17px;line-height:1.5;margin:6px 0}

.guide-panel{grid-area:panel;position:sticky;top:96px;background:#f3f2ec;border-radius:18px;padding:20px;display:grid;gap:14px}
.guide-panel-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.guide-panel-top h2{font-size:16px;line-height:1.4;letter-spacing:0;margin:0}
.guide-panel-top a{font-size:14px;color:#3d3c39}
.guide-panel .guide-pair{grid-template-columns:minmax(0,1fr);gap:8px}
.guide-panel .guide-pair-arrow{transform:rotate(90deg);margin:6px 0}
.guide-rail ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.guide-rail li{margin:0;padding:0}
.guide-rail a{display:grid;gap:2px;align-content:center;min-height:44px;padding:6px 10px;border-radius:10px;border:1px solid transparent;font-size:14px;line-height:1.3;color:#3d3c39;text-decoration:none}
.guide-rail-number{font-family:'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;font-size:13px;color:#6a6965}
.guide-rail a[data-start]{background:#ffffff;border-color:rgba(18,18,17,.16);color:#121211;font-weight:510}
@media (hover:hover) and (pointer:fine){
  .guide-rail a:hover:not(:disabled):not([aria-disabled="true"]){color:#121211;text-decoration:underline}}
.guide-step{display:none;gap:12px}
.guide-step[data-start]{display:grid}
/* The step on screen follows the section the address names. */
@supports selector(:has(*)){
  .reading-guide:has(section[data-step]:target) .guide-step{display:none}
  .reading-guide:has(section[data-step]:target) .guide-rail a{background:transparent;border-color:transparent;color:#3d3c39;font-weight:400}
  .reading-guide:has(section[data-step="1"]:target) .guide-step[data-step="1"],
  .reading-guide:has(section[data-step="2"]:target) .guide-step[data-step="2"],
  .reading-guide:has(section[data-step="3"]:target) .guide-step[data-step="3"],
  .reading-guide:has(section[data-step="4"]:target) .guide-step[data-step="4"]{display:grid}
  .reading-guide:has(section[data-step="1"]:target) .guide-rail a[data-step="1"],
  .reading-guide:has(section[data-step="2"]:target) .guide-rail a[data-step="2"],
  .reading-guide:has(section[data-step="3"]:target) .guide-rail a[data-step="3"],
  .reading-guide:has(section[data-step="4"]:target) .guide-rail a[data-step="4"]{background:#ffffff;border-color:rgba(18,18,17,.16);color:#121211;font-weight:510}
}
.guide-step .guide-step-note{font-size:14px;line-height:1.5;color:#6a6965;margin:0}
/* Quill's question is set in Quill's serif; the person's answer sits in the well. */
.guide-asks{display:grid;gap:4px;margin:0;font-family:'Source Serif 4', Georgia, 'Times New Roman', serif;font-weight:400;font-size:20px;line-height:1.4;color:#121211}
.guide-asks .guide-asks-who,.guide-answer .guide-answer-who{font-family:'Geist', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-weight:400;font-size:13px;line-height:1.4;color:#6a6965}
.guide-answer{display:grid;gap:2px;margin:0 0 0 24px;background:#f2f2ef;border-radius:14px 14px 4px 14px;padding:12px 14px;font-size:15px;line-height:1.55;color:#121211}
.guide-asks-list{list-style:none;padding:0;margin:0;display:grid}
.guide-asks-list li{display:grid;grid-template-columns:78px minmax(0,1fr);gap:8px;align-items:start;margin:0;padding:8px 0;border-top:1px solid rgba(18,18,17,.09);font-size:15px;line-height:1.45;color:#121211}
.guide-asks-list li:first-child{border-top:0;padding-top:2px}
.guide-state{justify-self:start;font-size:13px;line-height:1.5;font-weight:510;border-radius:6px;padding:0 6px;color:#121211}
.guide-state--has{background:#f2f2ef}
.guide-state--ask{background:#fbf1c9}
.guide-state--gap{border:1px solid rgba(18,18,17,.16);color:#6a6965}
.guide-record{display:block;font-size:14px;color:#6a6965}
.guide-passed{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.guide-passed li{margin:0;padding:0;font-size:15px;line-height:1.5}
.guide-passed strong{color:#121211;font-weight:510}
.guide-questions{margin:0;padding-left:20px}
.guide-questions li{font-size:15px;color:#121211;margin:4px 0}

/* The resume examples: one resume at a time, notes beside its marked lines. */
.reading-wide{max-width:1000px}
.reading-wide>section{max-width:680px}
.reading-wide>section+section{margin-top:56px}
.reading-wide>section#examples{max-width:none}
.reading-wide>.reading-short{max-width:680px}
.reading-people-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.reading-people-tabs a{display:grid;padding:10px 16px;border-radius:12px;border:1px solid rgba(18,18,17,.16);background:#ffffff;text-decoration:none;line-height:1.35}
.reading-people-tabs strong{font-size:15px;font-weight:590;color:#121211}
.reading-people-tabs span{font-size:13px;color:#6a6965}
.reading-resume{margin:0 0 40px;max-width:680px}
.reading-resume>figcaption{font-size:16px;line-height:1.6;color:#3d3c39;margin:0 0 16px}
.reading-resume>figcaption strong{color:#121211;font-weight:590}
@supports selector(:has(*)){
  .reading-people .reading-resume{display:none}
  .reading-people .reading-resume[data-start]{display:block}
  .reading-people:has(.reading-resume:target) .reading-resume{display:none}
  .reading-people:has(.reading-resume:target) .reading-resume:target{display:block}
  .reading-people-tabs a[data-start],
  .reading-people:has(#entry-level-example:target) a[href="#entry-level-example"],
  .reading-people:has(#senior-example:target) a[href="#senior-example"]{border-color:#121211;box-shadow:0 0 0 1px #121211}
  .reading-people:has(.reading-resume:target) .reading-people-tabs a[data-start]{border-color:rgba(18,18,17,.16);box-shadow:none}
  .reading-people:has(#experienced-example:target) a[href="#experienced-example"]{border-color:#121211;box-shadow:0 0 0 1px #121211}
}
.reading-resume-paper{position:relative;padding:36px 40px;background:#ffffff;box-shadow:0 0 0 1px rgba(18,18,17,.07), 0 1px 2px rgba(18,18,17,.04), 0 18px 40px -24px rgba(18,18,17,.24);border-radius:3px;font-family:"Times New Roman",Times,serif;font-size:16px;line-height:1.5;color:#121211}
.reading-resume-paper p,.reading-resume-paper li{color:#121211}
.reading-resume-paper header{margin-bottom:22px;text-align:center}
.reading-resume-paper header h3{font-family:inherit;font-size:26px;line-height:1.2;margin:0 0 6px;letter-spacing:0}
.reading-resume-paper header p{font-size:14px;margin:0}
.reading-resume-paper .reading-resume-contact{display:flex;flex-wrap:wrap;justify-content:center;gap:0 16px;margin-top:4px}
.reading-resume-paper h4{font-family:inherit;font-size:16px;line-height:1.4;margin:22px 0 10px;padding-bottom:3px;border-bottom:1px solid rgba(18,18,17,.16);font-weight:700;text-transform:uppercase}
.reading-resume-paper p{margin:0 0 10px}
.reading-resume-paper .reading-resume-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:0 16px;margin-bottom:2px}
.reading-resume-paper .reading-resume-role{font-style:italic;margin-bottom:10px}
.reading-resume-paper ul{margin:0 0 18px;padding-left:20px}
.reading-resume-paper li{margin:5px 0;padding-left:2px}
.reading-resume-paper .reading-resume-plain{list-style:none;padding-left:0}
.reading-resume-paper>:last-child{margin-bottom:0}
/* A line a note is about wears the ink rule beside it. */
.reading-marked{position:relative}
.reading-marked::before{content:"";position:absolute;left:-30px;top:3px;bottom:3px;width:2px;border-radius:1px;background:#121211}
.reading-resume-plain .reading-marked::before{left:-14px}
.reading-note{display:block;margin:8px 0 6px;padding:10px 12px;border-radius:10px;background:#f2f2ef;font-family:'Geist', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:14px;line-height:1.5;color:#3d3c39}
.reading-note strong{color:#121211;font-weight:590}
.reading-note a{color:#121211}
@media(min-width:1180px){
  /* At a desk the note stands in the margin, level with its line, joined to
     the paper's edge by a leader. */
  .reading-note{position:absolute;top:-4px;left:calc(100% + 64px);width:250px;margin:0;background:#ffffff;border:1px solid rgba(18,18,17,.09)}
  .reading-resume-plain .reading-note{left:calc(100% + 64px)}
  .reading-note::before{content:"";position:absolute;right:100%;top:14px;width:40px;border-top:1px solid rgba(18,18,17,.16)}
  .reading-note::after{content:"";position:absolute;right:calc(100% + 38px);top:11px;width:7px;height:7px;border-radius:50%;background:#121211}
}

/* Docs keep a contents list beside the article. */
.reading-layout{display:grid;grid-template-columns:minmax(0,680px) minmax(0,240px);gap:88px;align-items:start}
.reading-layout article{min-width:0;max-width:68ch}
.reading-layout article>section+section{margin-top:64px}
.reading-contents{position:sticky;top:112px;font-size:15px;line-height:1.5}
.reading-contents h2{font-size:15px;line-height:1.5;font-weight:600;letter-spacing:0;margin:0 0 12px}
.reading-contents ol{list-style:none;padding:0;margin:0}
.reading-contents li{padding:0;margin:0}
.reading-contents a{display:block;padding:10px 0;color:#6a6965;text-decoration:none;min-height:44px}
@media (hover:hover) and (pointer:fine){
  .reading-contents a:hover:not(:disabled):not([aria-disabled="true"]){color:#121211;text-decoration:underline}}
.reading-contents-mobile{display:none}
.reading-definitions{margin:24px 0 28px;display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px 24px}
.reading-definitions dt{font-weight:500;color:#121211}
.reading-definitions dd{margin:0;color:#3d3c39}
.reading-list{list-style:none;padding:0;margin:0;max-width:800px}
.reading-list>li{padding:28px 0;margin:0;border-top:1px solid rgba(18,18,17,.09)}
.reading-list h2{font-size:22px;line-height:1.3;margin-bottom:12px}
.reading-list h2 a{color:#121211;text-decoration:none}
@media (hover:hover) and (pointer:fine){
  .reading-list h2 a:hover:not(:disabled):not([aria-disabled="true"]){color:#3d3c39;text-decoration:underline}}
.reading-list p{font-size:17px;line-height:1.65;margin-bottom:12px;max-width:65ch}
.reading-list-open{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:15px;text-decoration:none}
@media (hover:hover) and (pointer:fine){
  .reading-list-open:hover:not(:disabled):not([aria-disabled="true"]){text-decoration:underline}}
.reading-downloads{display:flex;align-items:center;flex-wrap:wrap;gap:16px 24px;margin:24px 0}

.reading-related{margin-top:80px;padding-top:32px;border-top:1px solid rgba(18,18,17,.09)}
.reading-related h2{font-size:20px}
.reading-related ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.reading-related li{padding:0;margin:0}
.reading-related a{display:grid;gap:6px;height:100%;padding:18px 20px;border:1px solid rgba(18,18,17,.09);border-radius:14px;background:#ffffff;text-decoration:none}
.reading-related strong{font-size:17px;line-height:1.35;color:#121211;font-weight:590}
.reading-related span{font-size:15px;line-height:1.5;color:#3d3c39}
@media (hover:hover) and (pointer:fine){
  .reading-related a:hover:not(:disabled):not([aria-disabled="true"]) strong{text-decoration:underline}}

/* The close, as the landing page ends: the count mark, one line and the way in. */
.reading-close{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:96px 0 24px}
.reading-close .count-mark{height:34px;color:#121211;margin-bottom:8px}
.reading-close h2{font-size:40px;line-height:1.08;letter-spacing:-.04em;max-width:16em;margin:0}
.reading-close p{font-size:17px;max-width:34em;margin:0}
.reading-close .reading-access{font-size:14px;color:#6a6965}

@media(max-width:1080px){
  .reading-guide{grid-template-columns:minmax(0,1fr) minmax(0,340px);column-gap:40px}
  .reading-layout{grid-template-columns:minmax(0,1fr) 210px;gap:40px}
  .reading-related ul{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:860px){
  .reading-guide{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "panel" "body"}
  .guide-panel{position:static;margin-bottom:36px}
  .reading-feature{grid-template-columns:minmax(0,1fr);padding:28px 24px 28px}
  .reading-feature-copy{padding-bottom:0}
  .reading-feature-paper{display:none}
  .reading-row-foot{grid-template-columns:minmax(0,1fr);gap:8px}
  .reading-row-foot .reading-row-meta{display:flex;gap:16px;justify-items:start}
}
@media(max-width:620px){
  html{scroll-padding-top:136px}
  .reading-main{padding:24px 20px 52px}
  .reading-main--index{padding-top:40px}
  .reading-breadcrumb{margin-bottom:20px}
  h1{font-size:28px}
  .reading-opening--centered h1{font-size:36px}
  h2{font-size:20px}
  h3{font-size:17px}
  .reading-opening{margin-bottom:28px}
  .reading-opening p{font-size:17px;line-height:1.6}
  .reading-opening--centered{margin-bottom:32px}
  .reading-feature h2{font-size:24px}
  .reading-row>.guide-pair{padding:16px}
  .reading-row-foot{padding:16px}
  .guide-pair{grid-template-columns:minmax(0,1fr);gap:8px}
  .guide-pair-arrow{transform:rotate(90deg);margin:6px 0}
  .guide-panel{padding:16px;margin-inline:-4px}
  .guide-rail a{padding:6px 8px;font-size:13px}
  .reading-short{padding:16px 18px;margin-bottom:36px}
  .reading-short li{font-size:16px}
  .reading-guide-body>section+section,.reading-wide>section+section{margin-top:44px}
  .reading-layout{grid-template-columns:minmax(0,1fr);gap:28px}
  .reading-layout article>section+section{margin-top:44px}
  .reading-contents{position:static;grid-row:1;border-bottom:1px solid rgba(18,18,17,.09)}
  .reading-contents-desktop{display:none}
  .reading-contents-mobile{display:block}
  .reading-contents summary.disclosure-heading{padding:10px 0 22px}
  .reading-contents ol{padding-bottom:20px}
  .reading-definitions{grid-template-columns:minmax(0,1fr);gap:4px}
  .reading-definitions dd{margin-bottom:14px}
  .reading-list>li{padding:24px 0}
  .reading-list h2{font-size:20px}
  .reading-resume-paper{padding:22px 20px}
  .reading-resume-paper header h3{font-size:24px}
  .reading-related{margin-top:56px}
  .reading-close{padding-top:64px}
  .reading-close h2{font-size:32px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}