/* Browser support floor: 2016–2018 (~99% reach).
   Android 7+ / Chrome 55+, iOS 12.2+ / Safari 12.2+, desktop evergreen.
   Canada practical: Android 9 / iOS 12 (2018). Not supported: IE11, iOS ≤11, Android ≤6.
   Same floor as css/main.css. */

/* ======================================================================
   TNP booking stylesheet

   Assembled from the client's redesign notes
   (../in-person-notarization-redesign-notes.md),
   then revised against the second round of notes
   (…-redesign-notes-2.md).

   The shape of it: a system type stack, step cards, evenly bordered
   rounded panels, and the "Check your fee" / "Pick your day and time"
   layout; the three key-fact boxes under the h1, the green action
   colour, the button, and the rounded card around every Service; the
   "What to bring" panel; and serif italic on the disclosure links
   ("Quick Guide", "(More detailed information)", "(Fee Schedule)").

   Left out on the client's instruction: a sticky phone help bar, a
   numbered progress rail, and thick coloured left edges (panels are
   bordered evenly on all four sides instead).

   From the second round of notes:

     * The masthead (section 4) — bigger logo, flush top and bottom, the
       two notary circles overlapping each other and the bar's right end,
       and a plain ring in place of the serrated seal.
     * "Where am I" (section 20) — a rail in the left gutter on wide
       screens, a glowing hairline at the top of the page on everything
       narrower. The rail reports position only; it is not a menu and
       nothing in it is clickable.
     * Service cards on the green tint, with the form each one opens
       lifted back onto white (section 9).
     * Errors highlighted in yellow rather than red (section 10).
     * Every collapsible section is a native <details> with the browser's
       own arrow (section 11).

   Colour has one meaning per hue:
     green   what to do          (step headings, services, buttons)
     blue    guidance to read    (how the page works, fee explanations)
     red     warnings            (don't do this / must do this)
     yellow  errors              (a box the client has not filled in)
     amber   detail panels       (the expandable "more information" text)
   The standing notice (office closures, absences; css/site.css) is the
   one mix: a red box, as for the "more than 30 notarizations" rule,
   with ink text.
   Text is deep navy, never black. Panel tints sit on a cool paper so a
   tinted box never reads as "skippable background colour".

   IMPORTANT: the booking script (the large <script> further down this
   page) assigns and injects the legacy class names kept alive in the
   COMPATIBILITY / UTILITIES section below. It sets `el.className = '...'`
   wholesale, so any element the JS touches must be styled by ID or by
   structure, never by a class the JS would wipe. `.noDisplay` must never be !important
   (toggleText() overrides it with inline style.display).
   ====================================================================== */

/* ============ 1. TOKENS ============ */
.tnp {
  /* brand, sampled from images/TNPmast.png */
  --navy:         #160966;
  --seal:         #961B1E;

  --paper:        #F3F6FA;
  --surface:      #FFFFFF;
  --surface-sunk: #EEF1F6;
  --ink:          #16204A;   /* deep navy — never black */
  --ink-muted:    #4A5578;
  --border:       #C9D2E2;
  --border-soft:  #DFE5EF;

  /* green — "what to do": step headings, services, buttons, selection */
  --green:        #2F5D3A;
  --green-hover:  #234A2C;
  --green-tint:   #E3F0E7;
  --green-border: #97C0A4;

  /* blue — guidance you should read before acting */
  --blue:         #1B4A87;
  --blue-hover:   #143A6C;
  --blue-tint:    #E2ECF9;
  --blue-border:  #8FB2DE;

  /* red — warnings, errors, and the address lead line */
  --red:          #961B1E;
  --red-hover:    #7A1517;
  --red-tint:     #FBE9E9;
  --red-border:   #DCA5A6;

  /* amber — expandable detail panels */
  --amber:        #7D4A06;
  --amber-tint:   #FDF2D8;
  --amber-border: #E0C378;

  /* violet — standing notices (closures, a notary away) */
  --violet:       #46308A;
  --violet-tint:  #ECE7F9;
  --violet-border:#B4A4E2;

  /* yellow — "you missed something here". Errors are highlights, not
     alarms: the client asked for the yellow field the legacy code always
     intended (the booking script still says "turn on yellow
     background") rather than a red one. Red stays for
     warnings, which are about the service, not about the form. */
  --warn:         #6B4E00;
  --warn-tint:    #FFF3C4;
  --warn-border:  #D9A800;

  --radius:       14px;
  --radius-sm:    10px;
  --tap:          56px;      /* minimum comfortable target */

  --serif: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
}

/* ============ 2. RESET / BASE ============ */
.tnp, .tnp *, .tnp *::before, .tnp *::after { box-sizing: border-box; }

/* An author display must not uncover a hidden node. Same rule as css/main.css. */
.tnp [hidden] { display: none; }

/* Document-level. Do not copy this block into css/main.css as-is:
   scroll-padding and scroll-behavior belong to the booking page's html,
   and they are not inside the .tnp wrapper. */
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
}

body { margin: 0; }

.tnp {
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.25rem;
  line-height: 1.6;
  -webkit-overflow-scrolling: touch;
}

/* :focus-visible is Chrome 86 / Safari 15.4. The second rule is dropped
   where that pseudo-class is unknown, so the floor shows this ring for
   any focus, including a mouse click. Current browsers keep it for the
   keyboard only. */
.tnp :focus {
  outline: 4px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}
.tnp :focus:not(:focus-visible) {
  outline: none;
}

/* ============ 3. TYPOGRAPHY ============ */
/* Long single words ("Notarized/Certified") must break rather than push
   the page into horizontal scrolling on a narrow phone or at high zoom.
   Hyphenate first; break-word is only the last resort. */
.tnp h1, .tnp h2, .tnp h3 {
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
  color: var(--ink);
}

.tnp h1 {
  font-size: 1.875rem; /* steps + clamp() follow the address card */
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-align: center;
  margin: 18px 0 14px;
}

.tnp h2 {
  font-size: 1.4375rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 28px 0 8px;
}

.tnp h3 {
  font-size: 1.1875rem;
  font-weight: 700;
  margin: 22px 0 8px;
}

.tnp p { margin: 14px 0; overflow-wrap: break-word; }

.tnp ul, .tnp ol { margin: 10px 0; padding-left: 26px; }

.tnp li { margin: 8px 0; overflow-wrap: break-word; }

.tnp a {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  font-weight: 600;
}

.tnp a:hover { color: var(--blue-hover); }

.tnp table { border-collapse: collapse; }

/* ============ 4. LAYOUT ============ */
#backgroundBox.tnp {
  min-height: 100vh;
  padding-bottom: 48px;
}

.tnp .container {
  max-width: 50rem;
  margin: 0 auto;
  padding: 0 16px;
}

.tnp hr {
  border: 0;
  border-top: 2px solid var(--border-soft);
  margin: 32px 0;
}

/* ---- masthead: images/TNPmast_with_heads.svg, the one the rest of the site uses ----
   One drawing holds the wordmark, the navy bar run on to its right edge,
   and the two notaries overlapping each other at the right end of the
   bar (a paper keyline, a thin blue ring, then the photo). It sits
   outside the form's container and is drawn at the size it has on every
   other page (css/main.css, .company_logo-new): its own 1200px, or the
   full width of a narrower screen.

   An <object>, not an <img>: an SVG shown through <img> does not load
   the photos it links to, and would show only the initials under them.
   The box is held to the artwork's 1200x139 by a percentage padding, so
   the header does not jump when the SVG arrives and nothing rests on
   the object's own sizing. */
.tnp .header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;             /* the logo runs flush: no margin above or below */
}

.tnp .masthead {
  position: relative;
  height: 0;
  padding-top: 11.583%;   /* 139 / 1200 */
}

.tnp .company_logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Shown only if the SVG does not load: the plain wordmark, at the size
   it has inside the drawing. */
.tnp .company_logo img {
  display: block;
  width: 80%;
  height: auto;
}

/* ============ 5. KEY FACTS (three boxes under the h1) ============ */
/* Stacked by default. At 36em, three equal columns. Margins stand in for
   grid gap: Chrome 55 has no Grid, and flex gap is Chrome 84 / Safari 14.1. */
.tnp .trust-strip {
  margin: 0 0 18px;
}

.tnp .trust-item {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 10px;
}

.tnp .trust-item:last-child { margin-bottom: 0; }

@media (min-width: 36em) {
  .tnp .trust-strip { display: flex; }
  .tnp .trust-item {
    flex: 0 0 auto;
    width: calc((100% - 20px) / 3);
    min-width: 0;
    margin: 0 0 0 10px;
  }
  .tnp .trust-item:first-child { margin-left: 0; }
}

.tnp .trust-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 4px;
}

.tnp .trust-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--green);
  line-height: 1.25;
}

.tnp .trust-note {
  display: block;
  margin-top: 4px;
  font-size: 0.9375rem;
  color: var(--ink-muted);
}

/* ============ 6. ADDRESS CALLOUT ============ */
/* The single most important thing on the page: this is an in-person
   service, and this is where it happens. */
.tnp .addr-card {
  background: var(--surface);
  border: 3px solid var(--red-border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 0 0 16px;
  text-align: center;
}

.tnp .addr-card .addr-lead {
  display: block;
  font-size: 1.1875rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--red);
  margin-bottom: 10px;
}

.tnp .addr-card .addr-line {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink);
}

.tnp .addr-card .addr-line-sub {
  display: block;
  margin-top: 2px;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink-muted);
}

/* Stepped stand-ins for clamp() (Chrome 79 / Safari 13.1). Each step sits
   on the fluid curve: h1's 6.5vw leaves 1.875rem near 29em and reaches
   2.5rem near 38.5em; the address lines move only a few pixels. Current
   browsers replace these with the original clamp() below. Copy the steps,
   not the clamp(), if these sizes move into css/main.css. */
@media (min-width: 32em) {
  .tnp h1 { font-size: 2.125rem; }
  .tnp .addr-card .addr-line { font-size: 1.375rem; }
}
@media (min-width: 36em) {
  .tnp .addr-card .addr-line { font-size: 1.5rem; }
}
@media (min-width: 37.5em) {
  .tnp .addr-card .addr-line-sub { font-size: 1.1875rem; }
}
@media (min-width: 38.5em) {
  .tnp h1 { font-size: 2.5rem; }
  .tnp .addr-card .addr-lead { font-size: 1.375rem; }
}
@supports (font-size: clamp(1rem, 1vw, 2rem)) {
  .tnp h1 { font-size: clamp(1.875rem, 6.5vw, 2.5rem); }
  .tnp .addr-card .addr-lead { font-size: clamp(1.1875rem, 3.6vw, 1.375rem); }
  .tnp .addr-card .addr-line { font-size: clamp(1.25rem, 4.2vw, 1.5rem); }
  .tnp .addr-card .addr-line-sub { font-size: clamp(1.0625rem, 3.2vw, 1.1875rem); }
}

/* ============ 7. WHAT TO BRING ============ */
.tnp .prep-panel {
  background: var(--green-tint);
  border: 2px solid var(--green-border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 0 0 18px;
}

.tnp .prep-panel h2 {
  margin: 0 0 8px;
  font-size: 1.3125rem;
  color: var(--green-hover);
}

.tnp .prep-panel ol { margin: 0; padding-left: 1.4rem; }

.tnp .prep-panel li { margin: 10px 0; font-size: 1.125rem; }

/* There is no copier in the office, and a client who finds that out on
   arrival has wasted the trip — so the line is set in the page's warning
   red rather than in navy. It is the same --red as every other warning
   here, at 7.2:1 against the green tint: a deep seal red, not a bright
   one, which is what keeps it from shouting at the panel around it. */
.tnp .prep-panel .prep-fine {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 2px solid var(--green-border);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--red);
}

/* ============ 8. STEP CARDS ============ */
.tnp .step {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  margin: 28px 0;
  overflow: hidden;
}

.tnp .step-head {
  display: flex;
  align-items: center;
  background: var(--green-tint);
  border-bottom: 2px solid var(--green-border);
  padding: 16px 18px;
}

.tnp .step-num {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  margin-right: 14px; /* flex gap is Chrome 84 / Safari 14.1 */
  border-radius: 50%;
  background: var(--green);
  color: #FFFFFF;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 46px;
  text-align: center;
}

.tnp .step-title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--green-hover);
}

.tnp .step-title .step-sub {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-muted);
  margin-top: 2px;
}

.tnp .step-body { padding: 4px 18px 20px; }

/* ============ 9. SERVICE BLOCKS ============ */
/* Green is "what to do", and choosing a service is the doing, so each
   Service card carries the green tint and its green border rather than
   sitting white on white inside the step card. */
.tnp .svc {
  display: block;
  background: var(--green-tint);
  border: 2px solid var(--green-border);
  border-radius: var(--radius);
  padding: 4px 16px 18px;
  margin: 18px 0;
}

.tnp .svc > h2 {
  margin-top: 16px;
  font-size: 1.3125rem;
  color: var(--green-hover);
}

.tnp .svc > h2.cRed { color: var(--red); }

/* The form that opens once a Service is chosen. It is the one thing on
   a green card the client has to fill in, so it is lifted back onto
   white inside its own rounded, neutral-edged box, and set a step
   heavier than the body text so it reads as the working surface.

   Styled by ID, never by class: the booking script assigns className on
   these elements wholesale to show and hide them, so a class here
   would be wiped. Nothing below may set `display` for the same reason. */
.tnp #s1Div, .tnp #s2Div, .tnp #s3Div, .tnp #s4Div, .tnp #s5Div, .tnp #s6Div {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 16px 16px;
  margin: 14px 0 4px;
  font-weight: 600;
}

.tnp #s1Div p, .tnp #s2Div p, .tnp #s3Div p, .tnp #s4Div p, .tnp #s5Div p, .tnp #s6Div p,
.tnp #s1Div li, .tnp #s2Div li, .tnp #s3Div li, .tnp #s4Div li, .tnp #s5Div li, .tnp #s6Div li,
.tnp #s1Div label, .tnp #s2Div label, .tnp #s3Div label, .tnp #s4Div label,
.tnp #s5Div label, .tnp #s6Div label { font-weight: 600; }

.tnp #s1Div .title1, .tnp #s2Div .title1, .tnp #s3Div .title1,
.tnp #s4Div .title1, .tnp #s5Div .title1, .tnp #s6Div .title1 { font-weight: 700; }

/* Inside a Service's form, "what this service is" and "which document
   are you bringing" are two separate questions, so the second is ruled
   off from the first. Tighter than the page's own <hr>, and a step
   darker than the row rules in the document-type table below it, so it
   reads as a section break rather than as another table row. */
.tnp .svc-rule {
  border-top: 2px solid var(--border);
  margin: 20px 0 14px;
}

/* ============ 10. NOTICES / PANELS ============ */
/* Every panel is bordered evenly on all four sides — no thick coloured
   left edge anywhere on this page. */

/* Blue — guidance: how this page works, what to expect. */
.tnp .holiday_notice,
.tnp .holiday_notice2 {
  background: var(--blue-tint);
  border: 2px solid var(--blue-border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 16px 0;
  font-weight: 600;
}

/* Green — what to do next. */
.tnp .text-notice {
  background: var(--green-tint);
  border: 2px solid var(--green-border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 16px 0;
}

.tnp .text-notice h2 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--green-hover);
}

/* Red — warnings. */
.tnp .text-notice-red {
  background: var(--red-tint);
  border: 2px solid var(--red-border);
  border-radius: var(--radius-sm);
  padding: 4px 16px;
  margin: 12px 0;
}

.tnp .text-notice-red p { margin: 10px 0; font-weight: 700; }

/* Consecutive red notices read as one warning block, not three boxes. */
.tnp .text-notice-red + .text-notice-red {
  margin-top: -12px;
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* The first two of the three stacked warnings carry .text-notice-stacked.
   :has(+ .text-notice-red) would square these corners too, and Chrome 55
   / Safari 12.2 cannot match it. */
.tnp .text-notice-red.text-notice-stacked {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Amber — the expandable detail panels behind every disclosure link. */
.tnp .service_notice {
  background: var(--amber-tint);
  border: 2px solid var(--amber-border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 12px 0;
  font-size: 1.125rem;
}

/* Red-tinted variant — same box geometry as .service_notice, warning
   face from .text-notice-red. Heading colour stays with the disclosure
   (blue), not forced to --red. */
.tnp .service_notice-red {
  background: var(--red-tint);
  border-color: var(--red-border);
}

.tnp .priv_notice {
  background: var(--surface-sunk);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 12px 0;
  font-size: 1.0625rem;
}

.tnp #troubleshoot {
  background: var(--red-tint);
  border: 2px solid var(--red-border) !important;
  border-radius: var(--radius-sm);
  max-width: 50rem;
  margin: 20px auto !important;
  padding: 16px 18px !important;
}

/* Error highlight — JS sets className="err_notice" wholesale.
   Yellow, not red: an error here means the client missed a box, which
   is a highlight rather than a warning, and red is spoken for by the
   "don't do this" notices sitting a few lines above. The booking
   script below says "also turn on yellow background" at
   every one of these call sites, so this restores what it meant. */
.tnp .err_notice {
  display: block;
  background: var(--warn-tint);
  border: 2px solid var(--warn-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 10px 0;
  font-weight: 700;
}

/* The message itself is set in red by the JS (className="cRed
   err_notice"); on the yellow field it needs no further help, and the
   headings that are highlighted without cRed take the darker yellow. */
.tnp .err_notice:not(.cRed) { color: var(--warn); }

/* ============ 11. DISCLOSURE CONTROLS ============ */
/* Every collapsible section on this page is a native <details>, and
   every one of them shows the browser's own disclosure arrow: the
   client asked for the standard icon in place of the drawn +/− box
   this design used to carry. `display: list-item` is what puts the
   marker back — Safari draws nothing without it — and keeping the
   marker inside the principal box means it inherits the summary's blue
   and never hangs off the left edge of a tinted panel.

   Serif italic: an expandable link reads as an
   aside rather than as another thing to fill in. */
.tnp details.disclose > summary,
.tnp details.divMoreInfo > summary {
  display: list-item;
  /* Split, not `list-style: disclosure-closed inside`. Chrome 55 does not
     know disclosure-closed, and an invalid shorthand drops `inside` with
     it. The type is ignored there; the UA triangle stays. */
  list-style-position: inside;
  list-style-type: disclosure-closed;
  min-height: 48px;
  padding: 11px 4px;
  background: none;
  border: 0;
  color: var(--blue);
  font-family: var(--serif);
  font-size: 1.1875rem;
  font-style: italic;
  font-weight: 700;
  text-align: left;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.tnp details.disclose[open] > summary,
.tnp details.divMoreInfo[open] > summary { list-style-type: disclosure-open; }

.tnp details.disclose > summary::marker,
.tnp details.divMoreInfo > summary::marker { font-size: 0.9em; }

.tnp details.disclose > summary:hover,
.tnp details.divMoreInfo > summary:hover { color: var(--blue-hover); }

.tnp details.disclose > summary:focus,
.tnp details.divMoreInfo > summary:focus {
  outline: 4px solid var(--green);
  outline-offset: 2px;
  border-radius: 4px;
}
.tnp details.disclose > summary:focus:not(:focus-visible),
.tnp details.divMoreInfo > summary:focus:not(:focus-visible) {
  outline: none;
}

/* Safari draws ::-webkit-details-marker instead of ::marker and ignores
   the disclosure-* list styles, so it keeps its own triangle — which is
   the standard icon there. It only needs the colour and the size. */
.tnp details.disclose > summary::-webkit-details-marker,
.tnp details.divMoreInfo > summary::-webkit-details-marker {
  color: currentColor;
  margin-right: 0.35em;
}

.tnp .linklike-close {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--red);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
}

.tnp details.disclose,
.tnp details.divMoreInfo { margin: 6px 0 14px; }

/* First-time Quick Guide sits inside a already-padded blue notice, so
   drop the disclosure's own bottom margin and the tall 48px summary
   hit area — both were leaving empty space under the "Quick Guide"
   link when the panel is closed. */
.tnp #FTDetails { margin: 4px 0 0; }
.tnp #FTDetails > summary {
  min-height: 0;
  padding: 4px 4px 0;
}

/* Divider between the 7 steps and the "NOTARIZE A DOCUMENT" note
   inside the Quick Guide — lighter than a page <hr>, and sized for
   the amber panel rather than a full section break. */
.tnp #FTDivShow > .ft-guide-rule {
  border: 0;
  border-top: 2px solid var(--amber-border);
  margin: 16px 0;
}

/* The two topic toggles at the foot of the page and the seven topics
   inside the second one are wide rows, not asides: page face, not the
   serif, and no underline. */
.tnp details.disclose-row > summary {
  font-family: inherit;
  font-style: normal;
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--blue);
}

.tnp details.disclose-row > summary:hover { color: var(--blue-hover); }

.tnp details.disclose-row[open] > summary { color: var(--blue); }

/* ============ 12. CHOICE ROWS (radios / checkboxes) ============ */
.tnp .radio,
.tnp input[type="radio"],
.tnp input[type="checkbox"] {
  width: 26px;
  height: 26px;
  accent-color: var(--green);
  flex: none;
  margin: 0 12px 0 0;
  vertical-align: middle;
}

/* Yes / No pills. margin-right stands in for flex gap. !important beats
   .margBot10 on these divs. */
.tnp .choice-group {
  display: flex;
  flex-wrap: wrap;
  margin: 14px 0 8px;
}

.tnp .choice-group .choice { margin: 0 12px 0 0 !important; }

.tnp .choice label {
  display: flex;
  align-items: center;
  position: relative;
  min-height: var(--tap);
  padding: 10px 22px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 999px;
  font-size: 1.1875rem;
  font-weight: 700;
  cursor: pointer;
}

.tnp .choice label:hover {
  border-color: var(--green-border);
  background: var(--green-tint);
}

/* .is-selected is set by the page script (a parent cannot be styled from
   a checked input on Chrome 55 / Safari 12.2). :has() stays beside it so
   a current browser still paints the check if that script throws. */
.tnp .choice label.is-selected,
.tnp .choice label:has(input:checked) {
  background: var(--green);
  border-color: var(--green);
  color: #FFFFFF;
}

.tnp .choice label:has(input:focus-visible) {
  outline: 4px solid var(--green);
  outline-offset: 3px;
}

/* ---- "this one is chosen": a check that breaks the circle ----
   A filled radio leaves a dot the size of a pencil point, which is not
   an answer to "did I press Yes?". On the three controls that turn
   solid green when chosen (Yes/No, the days, the times) the dot is
   replaced by a white disc carrying a hard-angled green check whose tip
   runs out past the rim. The white keyline on the check keeps that
   overhanging tip legible against the green row. */
.tnp .choice-group .choice label input[type="radio"],
.tnp #allDays label input[type="radio"],
.tnp [id^="allTimes"] label input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  margin: 0 14px 0 0;
  border: 3px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
}

.tnp .choice-group .choice label:hover input[type="radio"],
.tnp #allDays label:hover input[type="radio"],
.tnp [id^="allTimes"] label:hover input[type="radio"] {
  border-color: var(--green);
}

/* Chosen: the input goes invisible but keeps its 30px of layout, and
   the overlay below draws the disc and the check together. */
.tnp .choice-group .choice label.is-selected input[type="radio"],
.tnp .choice-group .choice label:has(input:checked) input[type="radio"],
.tnp #allDays label.is-selected input[type="radio"],
.tnp #allDays label:has(input:checked) input[type="radio"],
.tnp [id^="allTimes"] label.is-selected input[type="radio"],
.tnp [id^="allTimes"] label:has(input:checked) input[type="radio"] {
  border-color: transparent;
  background: transparent;
}

/* 52px box centred on the 30px circle, leaving room for the check to
   run past the rim. Both the ring and the check are white on the green
   row, so the mark stays one solid shape at 30px — a green check would
   vanish the moment it left the ring.

   The check's geometry is measured, not eyeballed. The ring's inner
   edge is at r=12.25 (r 14, stroke 3.5), and with a square cap and a
   mitre join the stroke's real corners sit well outside the path's own
   points: for this path the start cap reaches r=11.00 and the mitre at
   the elbow r=10.74, so both clear the ring by about 1.3 while the tip
   still breaks out to r=24.1. Move a point or widen the stroke and the
   elbow starts cutting the ring again — recompute the corners rather
   than adjusting by eye. */
.tnp .choice-group .choice label.is-selected::after,
.tnp .choice-group .choice label:has(input:checked)::after,
.tnp #allDays label.is-selected::after,
.tnp #allDays label:has(input:checked)::after,
.tnp [id^="allTimes"] label.is-selected::after,
.tnp [id^="allTimes"] label:has(input:checked)::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 52px;
  height: 52px;
  margin-top: -26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Ccircle cx='26' cy='26' r='14' fill='none' stroke='%23FFFFFF' stroke-width='3.5'/%3E%3Cpath d='M20 25 L26 31 L38 10' fill='none' stroke='%23FFFFFF' stroke-width='7' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 52px 52px;
  pointer-events: none;
}

.tnp .choice-group .choice label.is-selected::after,
.tnp .choice-group .choice label:has(input:checked)::after { left: 11px; }

.tnp #allDays label.is-selected::after,
.tnp #allDays label:has(input:checked)::after,
.tnp [id^="allTimes"] label.is-selected::after,
.tnp [id^="allTimes"] label:has(input:checked)::after { left: 7px; }

/* Current browsers ring the whole row via :has(:focus-visible). Take the
   page-wide :focus ring off the radio so it is not drawn twice.
   selector() is Chrome 83 / Safari 15.4, so the floor keeps the ring on
   the control itself. */
@supports selector(:focus-visible) {
  .tnp .choice-group .choice label input[type="radio"]:focus,
  .tnp #allDays label input[type="radio"]:focus,
  .tnp [id^="allTimes"] label input[type="radio"]:focus {
    outline: none;
  }
}

/* document-type table */
.tnp #s1Div table { width: 100%; margin: 10px 0; }

.tnp #s1Div table td {
  padding: 12px 6px 12px 0;
  border-bottom: 2px solid var(--border-soft);
  vertical-align: top;
}

.tnp #s1Div table td:first-child { width: 44px; padding-right: 10px; }

.tnp #s1Div table label {
  display: block;
  font-size: 1.1875rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 32px;
}

.tnp #s1Div table tr.is-selected > td,
.tnp #s1Div table tr:has(input:checked) > td { background: var(--green-tint); }

/* topic list at the bottom of the page — one <details> per topic, so
   the rule between them is the list item's own border. */
.tnp #sendInfo { list-style: none; padding-left: 0; }

.tnp #sendInfo > li {
  border-bottom: 0;
  padding: 0;
}

.tnp #sendInfo > li:last-child { border-bottom: 0; }

.tnp #sendInfo > li > details { margin: 6px 0; }

/* Confirmation collapsibles: amber/red box wraps the heading and grows
   with the open panel. Tighter margin/padding than booking-view
   .service_notice panels — three stacked boxes shouldn't feel sparse. */
.tnp #bottom details.service_notice {
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 6px 0;
  padding: 6px 14px;
}

.tnp #bottom details.service_notice > summary {
  margin: 0;
  min-height: 0;
  padding: 6px 2px;
}

/* Injected instruction HTML starts with an <h2>; kill its default
   top margin so it doesn't leave a gap under the disclosure heading. */
.tnp #instructText > :first-child {
  margin-top: 0;
}

.tnp #infoTexts > :first-child {
  margin-top: 0;
}

/* Nested topic boxes sit on a lighter face so they read as cards
   inside the parent "more information" panel, not as double-amber. */
.tnp #bottom details.service_notice details.service_notice {
  background: var(--surface);
  margin: 6px 0;
  padding: 4px 12px;
}

/* ============ 13. DAYS & TIMES (JS-injected) ============ */
.tnp #allDays { margin-top: 8px; }

.tnp #allDays label,
.tnp [id^="allTimes"] label {
  display: flex;
  align-items: center;
  position: relative;
  min-height: var(--tap);
  padding: 12px 18px;
  margin: 10px 0;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 1.1875rem;
  font-weight: 700;
  cursor: pointer;
}

.tnp #allDays label:hover,
.tnp [id^="allTimes"] label:hover {
  border-color: var(--green-border);
  background: var(--green-tint);
}

.tnp #allDays label.is-selected,
.tnp #allDays label:has(input:checked),
.tnp [id^="allTimes"] label.is-selected,
.tnp [id^="allTimes"] label:has(input:checked) {
  background: var(--green);
  border-color: var(--green);
  color: #FFFFFF;
}

.tnp #allDays label:has(input:focus-visible),
.tnp [id^="allTimes"] label:has(input:focus-visible) {
  outline: 4px solid var(--green);
  outline-offset: 3px;
}

/* The times for the chosen day sit in their own bordered card rather
   than behind a thick left rule. */
.tnp [id^="timesDiv"].padL0 {
  margin: 8px 0 18px;
  padding: 4px 14px 10px;
  background: var(--surface-sunk);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
}

/* ============ 14. FIELDS ============ */
.tnp .title1 {
  display: block;
  font-size: 1.1875rem;
  font-weight: 700;
  margin-top: 18px;
}

.tnp .input-div { margin: 8px 0; }

.tnp .input-hidden,
.tnp .input-div-num {
  width: 100%;
  max-width: 22rem;
  min-height: var(--tap);
  padding: 12px 14px;
  background: var(--surface);
  border: 2px solid var(--ink-muted);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font: inherit;
  font-size: 1.25rem;
}

/* The quantity a client types is the one thing on the page they authored
   themselves, and it is what the fee is built from — so it is set in the
   action green, heavier and a size up from the rest of the form, and can
   be checked at a glance while scrolling back over the Services. */
.tnp .input-div-num {
  max-width: 7rem;
  text-align: center;
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--green);
  caret-color: var(--green);
}

.tnp .input-hidden:focus,
.tnp .input-div-num:focus {
  border-color: var(--green);
  outline: 4px solid var(--green);
  outline-offset: 2px;
}

.tnp .input-div-phone .input-hidden { max-width: 16rem; letter-spacing: 0.04em; }

.tnp select {
  min-height: var(--tap);
  padding: 10px 12px;
  margin: 0 10px 0 4px;
  background: var(--surface);
  border: 2px solid var(--ink-muted);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 1.125rem;
}

.tnp .divPrivacy { margin: 8px 0; font-size: 1rem; }

.tnp #s1Notice, .tnp #s2Notice, .tnp #s3Notice, .tnp #s4Notice, .tnp #s5Notice, .tnp #s6Notice {
  display: block;
  margin: 12px 0;
  font-weight: 600;
}

.tnp #typeH2 { font-weight: 600; }

/* ============ 15. BUTTONS ============ */
/* The action button, on a comfortable target height. */
.tnp .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 24rem;
  min-height: 56px;
  padding: 14px 24px;
  background: var(--green);
  border: 0;
  border-radius: var(--radius);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.tnp .button:hover { background: var(--green-hover); color: #FFFFFF; }

.tnp .button:active { background: var(--green-hover); transform: translateY(1px); }

.tnp .button:focus { outline: 4px solid var(--ink); outline-offset: 3px; }
.tnp .button:focus:not(:focus-visible) { outline: none; }

.tnp #btn, .tnp #btnFullyBooked { margin-top: 16px; }

/* ============ 16. FEES ============ */
/* The schedule itself (.fee_notice, the table, the example, the HST quotes,
   the two fee rules and Payment Methods) is _includes/fees.html, shared with
   the home page; its styles are in css/site.css, "Fees". What is left here
   is this page's own: the heading over it and the order summary. */
.tnp #feeSch { font-size: 1.5rem; font-weight: 800; }

/* Order summary */
.tnp .fee_summary {
  background: var(--green-tint);
  border: 2px solid var(--green-border);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin: 12px 0;
}

.tnp #feeDetail table { width: 100%; font-size: 1.0625rem; font-weight: 600; }

.tnp #feeDetail td { padding: 8px 0; vertical-align: top; }

.tnp #feeDetail td.alignRight { font-variant-numeric: tabular-nums; }

.tnp .trborder { border-bottom: 2px solid var(--green-border); padding-bottom: 10px !important; }

/* ============ 17. CONFIRMATION ============ */
.tnp .confirm-panel {
  background: var(--green-tint);
  border: 3px solid var(--green-border);
  border-radius: var(--radius);
  padding: 18px;
  margin: 20px 0;
}

.tnp .confirm-panel p:first-child {
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--green-hover);
  margin-top: 0;
}

.tnp #reserveText {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--ink);
}

.tnp #feeText { font-size: 1.1875rem; font-weight: 700; }

/* ============ 18. LOADER ============ */
.tnp .loader {
  border: 5px solid var(--green-tint);
  border-top: 5px solid var(--green);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  -webkit-animation: tnp-spin 1s linear infinite;
  animation: tnp-spin 1s linear infinite;
}

.tnp .margLoader { margin: 18px auto; }

.tnp .days-loading {
  display: flex;
  align-items: center;
  margin: 14px 0 18px;
  color: var(--ink-muted);
  font-size: 1.125rem;
}

.tnp .days-loading .loader {
  width: 32px;
  height: 32px;
  border-width: 4px;
  flex: 0 0 auto;
  margin-right: 14px;
}

@-webkit-keyframes tnp-spin {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes tnp-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ============ 19. JS-CONTRACT COMPATIBILITY / UTILITIES ============ */
/* Visibility toggles — assigned wholesale by the booking script.
   .noDisplay must NOT be !important (toggleText uses inline display). */
.tnp .noDisplay { display: none; }
.tnp .elDisplay { display: block; }
.tnp .padL0     { padding-left: 0; }

/* The booking script reveals a document-type note (#note3..#note16) by replacing
   its .noDisplay with this class, and hides it again by putting .noDisplay
   back — so this rule is the note's "shown" state and has to carry the
   display. The legacy sheet also coloured it blue; that is deliberately not
   repeated here, because the notes are meant to read in the body ink (see
   the colour block above). Without a rule at all the <div> would still fall
   back to block, but relying on that would leave the reveal undefined. */
.tnp .cNoteBlue { display: block; }

/* No-op classes the JS assigns */
.tnp .type_noError { }
.tnp .noClass { }

/* Colour / emphasis. cBlue marks guidance inside body copy; cRed marks a
   warning. Nothing on this page is black. Cross-references to other
   Services inside the document-type notes are deliberately left in the
   body colour: they read as part of the sentence, and colouring the
   dozen of them turned the notes into a patchwork. */
.tnp .cRed       { color: var(--red); }
.tnp .cBlue      { color: var(--blue); }
.tnp a.cDarkRed  { color: var(--blue); }
.tnp td.cDarkRed { color: var(--ink); font-weight: 800; }
.tnp .txt_red    { color: var(--red); }
.tnp .bold       { font-weight: 700; }

/* The office number is the fallback for everything this form cannot
   answer, so every printing of it — linked, marked up, or written into
   a sentence — is set at 700. The office is reached by text rather than
   by voice, so a tapped number opens the messaging app: every link here
   is sms:, never tel:. */
.tnp a[href^="sms:"],
.tnp [itemprop="telephone"],
.tnp .phone-number { font-weight: 700; }

/* Legacy type scale, remapped */
.tnp .f2420    { font-size: 1.0625rem; font-weight: 500; color: var(--ink-muted); }
.tnp .sub-text { font-size: 1.0625rem; }
/* Smaller, but bold: short notices that need to stay noticeable while taking
   less room than body copy — the fee-adjustment line under the fee table, and
   the "fully booked" notice. One step down the scale (same size as .sub-text)
   at weight 700, colour left inherited so it reads as emphasis, not as the
   muted small print that .f2420 / .fsize16 carry. */
.tnp .sub-text-bold { font-size: 1.0625rem; font-weight: 700; }
.tnp .reg-text { font-size: 1.1875rem; font-weight: 700; }
.tnp .fsize16  { font-size: 1rem; color: var(--ink-muted); }

/* Alignment */
.tnp .centered   { text-align: center; }
.tnp .txt_center { text-align: center; }
.tnp .alignRight { text-align: right; }
.tnp .alignLeft  { text-align: left; }
.tnp .clear      { clear: both; }
.tnp p.top       { margin-top: 26px; }
.tnp p.clear     { clear: both; }

/* Spacing utilities */
.tnp .margTop0  { margin-top: 0; }
.tnp .margTop5  { margin-top: 6px; }
.tnp .margTop10 { margin-top: 10px; }
.tnp .margTop15 { margin-top: 14px; }
.tnp .margBot0  { margin-bottom: 0; }
.tnp .margBot5  { margin-bottom: 6px; }
.tnp .margBot10 { margin-bottom: 10px; }
.tnp .margBot2  { margin-bottom: 12px; }
.tnp .margR15   { margin-right: 12px; }
.tnp .margB     { margin-bottom: 6px; }
.tnp .padTop10  { padding-top: 10px; }
.tnp .padtop20  { display: inline-block; margin-top: 6px; }
.tnp .padL10    { padding-left: 10px; }
.tnp .padL60    { padding-left: 0; }
.tnp .servPadL  { padding-left: 16px; }

/* Injected error-jump links (GO TO ERROR) */
.tnp .errorBack { margin: 6px 0 0; font-size: 1.0625rem; }

.tnp .back_to_tnp,
.tnp .back_to_tnp2 {
  color: var(--blue);
  font-weight: 700;
  cursor: pointer;
}

.tnp .back_to_tnp2 {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: 1.1875rem;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* ============ 20. WHERE AM I ============ */
/* Two answers to the same question, one per screen size, so exactly one
   of them is ever on screen.

   Wide screens get a rail in the left gutter naming the part of the page
   the client is currently in. It is fixed in the gutter rather than
   floated over the text: at 75em there is 12px of clearance beside the
   50rem container, and it is hidden below that — a phone has no gutter
   to put it in, which is why the client asked for it on wide screens
   only.

   The rail reports; it does not navigate. Its entries are plain text,
   not links: this is a form to be filled in from the top down, and a
   client who jumps to "3. Day and time" only finds it empty. Nothing in
   it is clickable, hoverable or focusable, and it is hidden from
   assistive technology (headings already carry that job) — the same
   treatment the hairline below gets.

   The rail is centred in the part of the viewport below the site menu:
   the space under the menu while it is on screen, the whole height once
   it has scrolled away. The script at the foot of the page sets its top
   for that; the middle of the viewport here is only where it sits if
   the script never runs.

   Everything narrower gets a hairline at the top of the viewport that
   fills as the page is scrolled. Same information, no width. */
.tnp .page-nav,
.tnp .page-progress { display: none; }

@media (min-width: 75em) {
  .tnp .page-nav {
    display: block;
    position: fixed;
    top: 50%;
    left: calc(50% - 36.75rem);   /* 25rem of container + 11.75rem of rail */
    width: 10.5rem;
    transform: translateY(-50%);
    z-index: 20;
  }

  .tnp .page-nav-title {
    margin: 0 0 8px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }

  .tnp .page-nav ol {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* The rail the dots sit on: 10px of entry padding + half a 12px dot. */
  .tnp .page-nav ol::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 20px;
    bottom: 20px;
    width: 2px;
    background: var(--border-soft);
  }

  .tnp .page-nav li { margin: 0; }

  .tnp .page-nav-step {
    position: relative;
    display: flex;
    align-items: center;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    color: var(--ink-muted);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.25;
    cursor: default;
  }

  .tnp .page-nav-step::before {
    content: "";
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    margin-right: 12px;
    border: 2px solid var(--border);
    border-radius: 50%;
    background: var(--paper);
  }

  .tnp .page-nav-step[data-current="1"] {
    background: var(--surface);
    box-shadow: inset 0 0 0 2px var(--green-border);
    color: var(--green-hover);
  }

  .tnp .page-nav-step[data-current="1"]::before {
    border-color: var(--green);
    background: var(--green);
    box-shadow: 0 0 0 3px var(--green-tint);
  }

  /* Sections already behind the client keep the rail reading as a route
     travelled rather than a menu. */
  .tnp .page-nav-step[data-done="1"] { color: var(--ink); }

  .tnp .page-nav-step[data-done="1"]::before {
    border-color: var(--green-border);
    background: var(--green-border);
  }
}

@media (max-width: 74.9375em) {
  /* The hairline sits over the very top of the page, so the masthead is
     given its 3px back rather than losing the top of the seal to it. */
  #backgroundBox.tnp { padding-top: 3px; }

  .tnp .page-progress {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--surface-sunk);
    z-index: 30;
    pointer-events: none;
  }

  /* The glow is what makes a 3px rule read as deliberate rather than as
     a rendering artefact. It stays inside the green already used for
     every "what to do" on the page. */
  .tnp .page-progress > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 0 2px 2px 0;
    background: linear-gradient(90deg, var(--green) 0%, #3F7A4E 55%, #74B586 100%);
    box-shadow: 0 0 6px rgba(47, 93, 58, 0.55), 0 0 2px rgba(47, 93, 58, 0.9);
    transition: width 0.12s linear;
  }
}

/* ============ 21. MEDIA ============ */
@media (min-width: 40em) {
  .tnp .container { padding: 0 24px; }
  .tnp .step-body { padding: 4px 26px 24px; }
}

@media (max-width: 26em) {
  .tnp { font-size: 1.1875rem; }
  .tnp .addr-card { padding: 14px 14px; }
  .tnp .step-head { padding: 14px; }
  .tnp .step-num { width: 40px; height: 40px; line-height: 40px; font-size: 1.1875rem; margin-right: 10px; }
  .tnp .step-title { font-size: 1.1875rem; }
  .tnp .step-body { padding: 4px 14px 18px; }
  .tnp .svc { padding: 4px 12px 14px; }
  .tnp .prep-panel { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tnp .loader { -webkit-animation-duration: 3s; animation-duration: 3s; }
  .tnp .page-progress > span { transition: none; }
  .tnp .button:active { transform: none; }
}

/* ============ 22. SITE MENU AND "WHAT WE DO FOR YOU." ============ */
/* The menu (_includes/nav.html) and the "What we do for you." list
   (_includes/aside.html) are the ones on every other page, styled by
   css/site.css. This page only places them.

   The menu's band runs the full width under the masthead, as it does on
   the other pages. The list needs a gutter wide enough to read in, so it
   appears from 80em (1280px), in the right gutter level with the top of
   the form, mirroring the "Where am I" rail in the left gutter, and
   scrolls with the page: set small and pulled in to the form's padding up
   to 85em, at its usual size from there. Narrower than 80em it is left
   out; there is no room beside an 800px form, and the menu reaches the
   same pages.

   Widths use 100vw, which counts the scrollbar; the margins leave room for
   it so the list never pushes the page sideways. */
.tnp .site-nav-band { margin-top: 12px; }

.tnp .page-body { position: relative; }

.tnp .gutter-aside { display: none; }

@media (min-width: 80em) {
  .tnp .gutter-aside {
    display: block;
    position: absolute;
    top: 18px;
    left: calc(100% - 4px);
    width: calc((100vw - 50rem) / 2 - 40px);
    max-width: 20rem;
  }

  .tnp .gutter-aside .site-aside {
    padding: 14px 14px 4px;
    font-size: 14px;
  }

  .tnp .gutter-aside .site-aside-title { font-size: 18px; }
  .tnp .gutter-aside .site-aside-note,
  .tnp .gutter-aside .site-aside-list ul li { font-size: 13px; }
}

@media (min-width: 85em) {
  .tnp .gutter-aside {
    left: calc(100% + 20px);
    width: calc((100vw - 50rem) / 2 - 60px);
  }

  .tnp .gutter-aside .site-aside {
    padding: 16px 16px 6px;
    font-size: 15px;
  }

  .tnp .gutter-aside .site-aside-title { font-size: 19px; }
  .tnp .gutter-aside .site-aside-note,
  .tnp .gutter-aside .site-aside-list ul li { font-size: 14px; }
}