:root {
    --page: #FAFAFA;
    --ink: #171717; /* brand black: text, logo box, button */
    --ink-2: #3A3A3A;
    --ink-3: #6B6B6B;
    --rule: #E3E3E3;
    --gutter: 16px;
    /* Spacing. Every gap on the site is one of these (desktop / phone):
         112 / 64   between sections: under the nav, between home sections, above and below the closing rule, above the footer
          96 / 56   on inner pages, from the lede to the first rule
          48 / 32   inside a section, from its lede to its content; from the hero intro to the headline (desktop)
          24        from a heading to its lede; between cards (16 on phones); from a card's picture to its label; lede to button
          16        the page gutter; from a label to its heading; paragraph spacing
          12        from a small heading to its text */
    --section: 112px; /* the gap under the nav and above the footer, so the page opens and closes with the same space */
    --serif: "Instrument Serif", "Serif Fallback", Georgia, serif;
    --ui-ok: #457D57; /* the panel's one green and one amber */
    --ui-approx: #BC8C22;
    --stage: #F2F2EF; /* the ground a scene sits on, a step darker than the page so white parts lift off it */
}
/* the one display face, served from this site (latin subset, SIL Open Font License) */
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/instrument-serif.woff2") format("woff2"); }
/* Georgia shrunk to Instrument Serif's width, so a headline keeps its box while the font loads or if it never does */
@font-face { font-family: "Serif Fallback"; src: local("Georgia"); size-adjust: 75%; }
*, *::before, *::after { box-sizing: border-box; }
/* no scrollbars anywhere on the site: the page and every scrolling element still scroll */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
/* the first tab stop on every page, shown only when it has focus */
.skip { position: absolute; left: var(--gutter); top: -100px; z-index: 2; background: var(--ink); color: #fff; font-size: 14px; line-height: 17px; font-weight: 500; padding: 8px 12px; border-radius: 2px; }
.skip:focus { top: var(--gutter); }

/* full width up to 1920px, with a 16px border on every side of the page */
.wrap { max-width: 1920px; margin-inline: auto; padding: var(--gutter); min-height: 100svh; display: flex; flex-direction: column; }
.wrap > main { flex: 1 0 auto; } /* on a page shorter than the screen, the footer still sits at the bottom */

/* nav: logo left, links centred, button right */
.nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.nav-logo { justify-self: start; font-weight: 700; font-size: 15px; line-height: 17px; letter-spacing: -0.01em; padding: 7px 11px; border: 1px solid var(--ink); border-radius: 2px; } /* boxed like the button, 1px border inside the same 33px height */
.nav-links { display: flex; gap: 28px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
/* the one black button: in the nav and in the closing section. Both take their size from this rule, at every width. */
.nav-cta, .btn { background: var(--ink); color: #fff; font-size: 14px; line-height: 17px; font-weight: 500; padding: 8px 12px; border-radius: 2px; white-space: nowrap; }
.nav-cta { justify-self: end; }
.nav-cta:hover, .btn:hover { background: var(--ink-2); }
.nav-logo:hover { background: var(--ink); color: #fff; }

/* hero: a small intro, then the headline across the full width */
.hero { padding-top: var(--section); }
.hero-intro { max-width: 500px; margin: 0 auto; text-align: center; font-size: 16px; line-height: 1.45; font-weight: 500; color: var(--ink-2); }
.hero-title { container-type: inline-size; margin: 48px 0 0; overflow-x: clip; }
.hero-title h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 12.89cqi; line-height: 0.9; letter-spacing: -0.02em; white-space: nowrap;
    padding-bottom: 0.094em; /* the p and comma descenders hang this far below the line box, so the gap below is measured from them */ }
.br-phone { display: none; }

/* ---------- home: the photo with the extension's parts over it ---------- */
.hero-shot { position: relative; container-type: inline-size; margin-top: 24px; background: var(--rule); aspect-ratio: 1280 / 800; overflow: hidden; }
.hero-shot picture { display: block; width: 100%; height: 100%; }
/* wide screens get the photo already cropped to this frame; phones get the whole portrait and crop it below */
.hero-photo { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Every size is in cqi (1% of the photo's width), so the layout keeps its
   proportions at any width; the photo is 62.5cqi tall.
   Each part is 330 wide in its SVG: a panel is 448 tall, the popup 259.
   The popup sits one edge gap from the top and right like it hangs from the toolbar,
   the fonts panel from the top and left, the colours panel from the bottom, centred.
   All three are the same width, so the gaps between them equal the edge gap. */
.hero-parts { --edge: 5cqi; --w: calc((100cqi - 4 * var(--edge)) / 3); position: absolute; inset: 0; }
.hero-parts .part { position: absolute; width: var(--w); }
.hero-parts img { display: block; width: 100%; height: auto; filter: drop-shadow(0 0.4cqi 1.6cqi rgb(0 0 0 / 0.28)); }
.hero-parts .popup { right: var(--edge); top: var(--edge); }
.hero-parts .fonts { left: var(--edge); top: var(--edge); }
.hero-parts .colours { bottom: var(--edge); left: calc(50% - var(--w) / 2); }

/* ---------- home, under the hero: four cards, each a small scene from the panel over a statement ---------- */
.cards { margin-top: var(--section); display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rule); border-radius: 2px; padding: 8px; box-shadow: 0 1px 2px rgb(0 0 0 / 0.03), 0 8px 24px rgb(0 0 0 / 0.04); }
.card-text { padding: 24px 24px 32px; text-align: center; }
.card-no { margin: 0; font: 500 11px/16px ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.card-no b { font-weight: 500; color: var(--ink); margin-right: 10px; }
.card h2 { margin: 16px auto 0; max-width: 15em; font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.1vw, 52px); line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; }
/* the marked word: a small badge, then the word */
.mark, .nb { white-space: nowrap; } /* the word before the badge, the badge and the word after it stay on one line, so the badge never starts or ends a line */
/* just above the phone layout the cards are at their narrowest: less side padding keeps each heading to two lines */
@media (min-width: 721px) and (max-width: 780px) { .card-text { padding-inline: 8px; } }
/* the icon: a small outlined badge like the one in the panel's header, 40 x 34 at a 34px size, about as tall as the capitals */
.badge { display: inline-block; position: relative; width: 0.94em; height: 0.8em; margin-right: 0.22em; border: 1px solid currentColor; border-radius: 0.19em; vertical-align: -0.12em; }
.badge > * { position: absolute; left: 50%; top: 50%; translate: -50% -50%; } /* centred, and out of the flow so the badge sits on the baseline by its own box */
.badge svg { width: 0.44em; height: 0.44em; }
.badge-aa { font: 500 0.37em/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; letter-spacing: 0; }
.badge-dot { width: 0.24em; height: 0.24em; border-radius: 50%; background: var(--ui-ok); }

/* a dotted frame that holds a scene. The scene is drawn on a 560 x 340 stage and scaled
   to the frame's width, so it keeps its layout at every size like a picture would. */
.frame { position: relative; container-type: inline-size; aspect-ratio: 560 / 340; overflow: hidden; border: 1px solid var(--rule); border-radius: 2px;
    background: var(--stage) radial-gradient(circle, #CFCFCB 1px, transparent 1.5px) 10px 10px / 20px 20px; }
.stage { position: absolute; left: 50%; top: 50%; width: 560px; height: 340px; margin: -170px 0 0 -280px; overflow: hidden;
    scale: tan(atan2(100cqi, 560px)); } /* tan(atan2(a, b)) is a / b as a plain number */
.stage > * { position: absolute; }

/* ---------- scenes: pieces of the Serifio panel, drawn with the extension's own tokens
   (serifio-ext/shared/tokens.js). They are pictures of the product so they keep its radii, not the site's. ---------- */
.ui { --ui-stroke: hsl(0 0% 89%); --ui-ink: hsl(0 0% 9%); --ui-ink-3: hsl(0 0% 40%);
    --ui-shadow: 0 1px 1px hsl(0 0% 0% / 0.04), 0 6px 12px hsl(0 0% 0% / 0.06), 0 22px 44px hsl(0 0% 0% / 0.12);
    font: 400 14px/1.35 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--ui-ink); text-align: left; }
.ui-card { width: 262px; background: #fff; border: 1px solid var(--ui-stroke); border-radius: 12px; box-shadow: var(--ui-shadow); overflow: hidden; }
.ui-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-size: 15px; }
.ui-head .chev { margin-left: auto; color: var(--ui-ink-3); }
.ui-badge { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 30px; border: 1px solid var(--ui-ink); border-radius: 8px; font-size: 14px; line-height: 1; }
.ui-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-ok); }
.ui-dot.approx { background: var(--ui-approx); }
.ui-note { margin: 0; padding: 0 14px 12px; font-size: 12px; color: var(--ui-ink-3); }
.ui-band { height: 28px; }
.ui-rows { padding: 8px 14px 10px; border-top: 1px solid var(--ui-stroke); }
.ui-band + .ui-rows, .ui-rows:first-child { border-top: 0; }
.ui-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 28px; }
.ui-row > span:last-child { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ui-chip { font: 400 11px/1 ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; padding: 4px 6px; border: 1px solid var(--ui-stroke); border-radius: 4px; background: #fff; white-space: nowrap; }
.ui-chip.copied { background: var(--ui-ok); border-color: var(--ui-ok); color: #fff; }
.ui-key { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; font: 500 12px/1 system-ui, -apple-system, sans-serif; border: 1px solid var(--ui-stroke); border-bottom-width: 3px; border-radius: 6px; background: #fff; box-shadow: 0 4px 10px hsl(0 0% 0% / 0.06); }
/* a small label that names the thing under it, the way a dev tool would */
.ui-tab { font: 500 10px/1 ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ui-ink-3); padding: 5px 7px; background: #fff; border: 1px solid var(--ui-stroke); border-radius: 4px; white-space: nowrap; }
/* a dashed line from a thing on the page to what the panel says about it */
.ui-wire { height: 0; border-top: 1px dashed #9C9C98; }
.ui-wire::before, .ui-wire::after { content: ""; position: absolute; top: -3px; width: 5px; height: 5px; border-radius: 50%; background: #9C9C98; }
.ui-wire::before { left: -2px; }
.ui-wire::after { right: -2px; }

.c-specimen { margin: 0; font: 400 84px/1 var(--serif); color: var(--ink); white-space: nowrap; }
.c-specimen span { background: #CFDCEA; } /* a text selection, in a tint of the panel's slate */
.c-aa { margin: 0; font: 400 104px/1 var(--serif); color: var(--ink); }
.c-photo { overflow: hidden; background: #C9A27C; }
.c-photo img { position: absolute; width: 720px; height: 540px; max-width: none; } /* the real loupe over the hero photo, at its true size */
.c-sheet { border-radius: 10px; box-shadow: var(--ui-shadow); }
.c-sheet p { margin: 0; padding: 22px 20px; color: #fff; font: 500 24px/1.2 system-ui, -apple-system, sans-serif; }
.c-button { display: flex; align-items: center; justify-content: center; border-radius: 8px; background: #D9A26B; font-weight: 600; box-shadow: var(--ui-shadow); }
.c-tile { width: 148px; }
.c-tile div:first-child { display: flex; align-items: center; justify-content: center; height: 96px; font: 400 52px/1 var(--serif); border-bottom: 1px solid var(--ui-stroke); }
.c-tile .ui-row { padding: 0 10px; height: 40px; }
.c-ghost { width: 262px; height: 56px; border: 1px dashed #9C9C98; border-radius: 12px; }

/* ---------- home is centred; every other page is set from the left ---------- */
/* a section: the heading, then a lede or short lines under it */
.sec { margin-top: var(--section); text-align: center; }
.sec h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 5.2vw, 88px); line-height: 0.95; letter-spacing: -0.02em; padding-bottom: 0.094em; }
.sec-lede { margin: 24px auto 0; max-width: 500px; font-size: 16px; line-height: 1.45; font-weight: 500; color: var(--ink-2); } /* the hero intro's type */
.sec + .cards { margin-top: 48px; }
/* six short points in a 3 x 2 grid of boxes, drawn like the cards above */
.grid6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.cell { padding: 40px 28px 44px; background: #fff; border: 1px solid var(--rule); border-radius: 2px; box-shadow: 0 1px 2px rgb(0 0 0 / 0.03), 0 8px 24px rgb(0 0 0 / 0.04); }
.cell-icon { display: flex; justify-content: center; }
.cell-icon svg { width: 28px; height: 28px; }
.cell h3 { margin: 24px 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.3vw, 36px); line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; }
/* between a phone and a small laptop three columns are too narrow for the text: two columns of three */
@media (min-width: 560px) and (max-width: 860px) { .grid6 { grid-template-columns: 1fr 1fr; } }
.cell p { margin: 12px auto 0; max-width: 300px; text-wrap: balance; font-size: 16px; line-height: 1.5; color: var(--ink-2); }

/* the last section on every page but feedback: one line across the page and the button, always centred.
   Its markup lives in partials/cta.html and is copied into the pages by build.js. */
.closing { margin-top: var(--section); border-top: 1px solid var(--rule); padding-top: var(--section); text-align: center; } /* the same space above the headline as under the button */
.closing h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(64px, 9vw, 160px); line-height: 0.9; letter-spacing: -0.02em; padding-bottom: 0.094em; }
.closing-row { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-top: 24px; }
.closing-row p { margin: 0; font-size: 16px; line-height: 1.45; font-weight: 500; color: var(--ink-2); }
.btn { flex: none; }

/* ---------- every page but home: the title on the left, the lede underneath ---------- */
.page { padding-top: var(--section); }
.page-head h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(64px, 9vw, 160px); line-height: 0.9; letter-spacing: -0.02em; padding-bottom: 0.094em; }
.page-lede { max-width: 500px; margin-top: 24px; font-size: 16px; line-height: 1.45; font-weight: 500; color: var(--ink-2); }
.page-lede p { margin: 0; }
.page-lede a { border-bottom: 1px solid var(--ink-3); }
.page-lede a:hover { color: var(--ink); border-color: var(--ink); }
.page-lede .meta { margin-top: 12px; font-size: 13px; font-weight: 400; color: var(--ink-3); }

/* ---------- privacy, features, FAQ, changelog and about: one row per section, heading left, text right ---------- */
.policy { margin-top: 96px; }
/* the text column starts at the middle of the page and ends at the right edge */
.policy section { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 32px 0 16px; border-top: 1px solid var(--rule); }
.policy h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.1; letter-spacing: -0.01em; }
.policy-body { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.policy-body p { margin: 0 0 16px; }
.policy-body strong { color: var(--ink); font-weight: 600; }
/* the policy ends on its last line of text, so the gap to the footer is the same as on the other pages */
.policy section:last-child { padding-bottom: 0; }
.policy section:last-child .policy-body p:last-child { margin-bottom: 0; }
.policy-body a { border-bottom: 1px solid var(--ink-3); }
.policy-body a:hover { color: var(--ink); border-color: var(--ink); }
.policy h2 + .meta { margin: 8px 0 0; font-size: 13px; color: var(--ink-3); } /* changelog: the date under the version */
/* features: the heading and a few lines on the left, a scene on the right */
.policy.split section { padding-bottom: 32px; }
.policy.split section:last-child { padding-bottom: 0; }
.split-text .policy-body { max-width: 600px; margin-top: 24px; }
.split-text .policy-body p:last-child { margin-bottom: 0; }
:target { scroll-margin-top: 16px; }

/* ---------- feedback: the form under the headline ---------- */
/* the same full-width divider and gap as the privacy page's first section */
.form { margin-top: 96px; border-top: 1px solid var(--rule); }
.form-alt { margin: 42px 0 0; font-size: 13px; color: var(--ink-3); }
.form-alt a { border-bottom: 1px solid var(--ink-3); }
.form-alt a:hover { color: var(--ink); border-color: var(--ink); }
.form iframe { display: block; width: calc(min(100%, 640px) + 16px); margin: 0 -8px -18px; border: 0; } /* Tally insets its form by 8px and leaves 18px under its buttons; this lines it up with the text and the footer gap */

/* ---------- footer: a rule, the copyright on the left, the links on the right ---------- */
.foot { margin-top: var(--section); border-top: 1px solid var(--rule); padding-top: 20px; font-size: 13px; color: var(--ink-3); }
.foot-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 24px; }
.foot-links a:hover, .foot-links a[aria-current="page"] { color: var(--ink); }

/* ---------- phones ---------- */
@media (max-width: 720px) {
    :root { --section: 64px; }
    /* the nav keeps the logo and the button; every page is linked from the footer */
    .nav { grid-template-columns: 1fr auto; }
    .nav-links { display: none; }
    .br-phone { display: inline; }
    /* the intro moves below the photo */
    .hero { display: flex; flex-direction: column; }
    .hero-intro { order: 1; margin: 24px auto 0; }
    .hero-title { margin-top: 0; }
    .hero-title h1 { font-size: 24.6cqi; }
    /* the vw sizes stop growing near the desktop sizes, so a headline does not halve at 721px */
    .page-head h1 { font-size: min(17vw, 76px); }
    .policy-body { max-width: 34em; }
    .policy, .form { margin-top: 56px; }
    .form iframe { margin-top: -9px; } /* the question sits as close to the divider as a privacy heading does */
    .policy section { grid-template-columns: 1fr; gap: 12px; padding-top: 24px; }
    .policy h2 { font-size: 28px; }
    .foot-row { flex-direction: column-reverse; align-items: flex-start; }
    /* the footer is the only way round the site here: three links a row, each with room for a thumb */
    .foot-links { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0 32px; }
    .foot-links a { padding: 12px 0; }
    .foot-row { gap: 4px; }

    /* home: the cards in one column */
    .cards { grid-template-columns: 1fr; gap: 16px; }
    .card-text { padding: 24px 12px 24px; }
    .card h2 { font-size: min(8.4vw, 40px); }
    .policy.split section { gap: 24px; padding-bottom: 24px; }
    .sec h2 { font-size: min(13vw, 56px); }
    .grid6 { gap: 16px; margin-top: 32px; }
    .cell { padding: 28px 16px 32px; }
    .sec + .cards { margin-top: 32px; }
    .closing h2 { font-size: min(17vw, 76px); }

    /* home: a sideways swipe of the two panels over a fixed photo, no popup.
       A panel is 75cqi wide here, about 256px on a 390 phone, so its text stays readable,
       and 75 x 448/330 = 101.82cqi tall. The photo has a 12.5cqi gap round the panel on
       every side: 12.5 + 101.82 + 12.5 = 126.82cqi tall. The gap between the panels
       stays 5cqi so the next one peeks in from the edge. */
    .hero-shot { aspect-ratio: 100 / 126.82; }
    .hero-parts { display: flex; align-items: flex-start; gap: 5cqi; padding: 12.5cqi; overflow-x: auto; scroll-snap-type: x mandatory; }
    .hero-parts .part { position: static; flex: 0 0 75cqi; scroll-snap-align: center; }
    .hero-parts .popup { display: none; }
    /* zoomed in so the colours panel's see-through window lands on the dark brown
       building, not the pale stone one to its right */
    .hero-photo { object-position: 50% 100%; transform: scale(1.6); transform-origin: 51% 45%; }
}
@media (max-width: 559px) { .grid6 { grid-template-columns: 1fr; } }