/* ══ THE POLICIES: COMPLAINTS, REVIEWS AND COOKIES, IN THE READING ROOM ══ 13 Oct 2026 (rp113), v2 (rp115) ══
   v2 (rp115): the Cookies page joins (its wash the green of something kept), and every policy
   page has a reading rule along the bar's foot (effects library M3, chapter 60).
   Loaded after hyyryn-company.css, on complaints.html and reviews-policy.html. Sir, 13 Oct:
   "complaints needs a revamp", "followed by reviews policy page". Both were still dressed
   as the 2 October company pages (a photograph band, arches, a dark band, a staircase),
   which is what Help looked like before Sir called it "ostracized" (Mason 59.19). Both
   are read the way the Terms are: somebody with one question, reading to find it. So
   both now stand in the reading room, and this sheet repeats the values Help's own sheet
   read off privacy.html (hyyryn-help.css v6; never linked, Mason 59.19 rule 2):
     the ground    the legal pages' reeded glass; each page's wash is its theme (59.16
                   rule 6): Complaints keeps the slate Sir gave it on 2 Oct as a wash,
                   the Reviews policy a little gold, the colour of a star
     the head      the title in the display face over a deed's double rule; on its right,
                   on glass, the page's four figures (as the Terms carry theirs)
     the rail      the contents on glass, number then name, the part being read marked
     the docket    the one urgent thing, the one action, a person (Help's help desk)
     the sheet     paper, a gold rule down the margin, the numbers hung in it, and one
                   structure that is the page's own: Complaints, your dates as a road;
                   the Reviews policy, a score drawn as it is shown
     the foil      the company's true particulars at the foot; never an address
   THE CONTROLS BY KIND (Mason 59.4), as Help's:
   | Action  | Write a complaint; Go to my disputes | square 48px, capitals, an arrow | rises 1px, arrow steps 4px | navy |
   | Way in  | the rail                             | a row, number then name         | tints                      | navy |
   | Way to  | a door's link, a route's link        | capitals, a 1px underline, arrow| line 2px, arrow steps 4px  | navy |
   Every colour is a company-sheet token, a legal-page value, or an rgba of one. */

html.pc-page { background: var(--cream); scroll-padding-top: 96px; }
html.pc-page body { background: transparent; }
@media (max-width: 900px) { html.pc-page { scroll-padding-top: 80px; } }
/* the reeded ground, one window-sized layer (59.16 rule 5); the wash is the page's own */
html.pc-page::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background:
    radial-gradient(820px 600px at 2% 110px, var(--pc-wash, rgba(59,71,87,.13)), transparent 72%),
    radial-gradient(900px 700px at 100% 80%, rgba(212,169,67,.12), transparent 72%),
    repeating-linear-gradient(90deg, rgba(10,22,40,.045) 0 1px, rgba(255,255,255,.55) 1px 2px, transparent 2px 9px, rgba(10,22,40,.018) 9px 13px, transparent 13px 14px); }
html.pc-page.is-reviews { --pc-wash: rgba(212,169,67,.16); }
html.pc-page.is-cookies { --pc-wash: rgba(15,90,79,.12); }
/* the reading rule: how far through the document you are, a gold line along the bar's foot (M3).
   Scroll-driven where the browser can; hyyryn-policy.js v2 sets --pc-read where it cannot. Only
   decoration (the contents rail says where you are in words), so it is hidden from screen readers
   by being a pseudo-element, and it does not move position, only length. */
.pc::before { content: ''; position: fixed; left: 0; right: 0; top: 72px; z-index: 101; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft)); transform-origin: 0 50%; transform: scaleX(var(--pc-read, 0)); }
@media (max-width: 768px) { .pc::before { top: 62px; } }
@keyframes pc-read { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@supports (animation-timeline: scroll()) { .pc::before { animation: pc-read linear both; animation-timeline: scroll(root block); } }
@media (forced-colors: active) { .pc::before { background: Highlight; } }
@media print { .pc::before { display: none; } }

.pc {
  --pc-display: 'Libre Caslon Display', 'Libre Caslon Text', Georgia, serif;
  --pc-serif: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --pc-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pc-paper: #FFFDF8; --pc-sheet: #FBF7EC; --pc-rule: rgba(131,99,44,.42); --pc-gold-ink: #5B4318; --pc-muted: #4A5160;
  --pc-gut-l: clamp(20px, 2.4vw, 40px); --pc-gut-r: clamp(24px, 3vw, 48px); --pc-num: 76px;
  --pc-glass: rgba(255,253,248,.58); --pc-glass-ring: rgba(255,255,255,.8); --pc-glass-edge: rgba(10,22,40,.09); --pc-glass-fx: blur(12px) saturate(1.5);
  --pc-pane: inset 0 0 0 1px var(--pc-glass-ring), 0 0 0 1px var(--pc-glass-edge), 0 22px 44px -30px rgba(10,22,40,.42);
  --pc-ring: rgba(10,22,40,.26);
  --pc-sheet-l: calc(var(--pc-num) + clamp(24px, 3vw, 44px));
  --pc-col: 46rem;
}
.pc-k { margin: 0 0 16px; display: flex; align-items: center; gap: 12px; font-family: var(--pc-sans); font-size: 10.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.pc-k::before { content: ''; width: 28px; height: 1px; background: var(--gold-soft); }
.pc-k a { color: inherit; text-decoration: none; }
.pc-k a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── the head: the title over a deed's double rule, the figures on glass beside it ── */
.pc-head { padding: 72px var(--pc-gut-r) 40px var(--pc-gut-l); }
.pc-head-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 96px); align-items: end; }
.pc-head-in::after { content: ''; grid-column: 1 / -1; display: block; height: 7px; margin-top: 28px; border-top: 2px solid var(--navy); border-bottom: 1px solid var(--gold-soft); }
@media (min-width: 1500px) { .pc-head-in { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.pc-h1 { margin: 0; font-family: var(--pc-display); font-weight: 400; font-size: clamp(40px, 4.4vw, 64px); line-height: 1.04; letter-spacing: 0; color: var(--navy); }
.pc-lede { margin: 14px 0 0; max-width: 40ch; font-family: var(--pc-serif); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; color: var(--pc-muted); }
/* the figures, as the Terms carry theirs: a number over its words, ruled on the left */
.pc-glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px clamp(14px, 2vw, 36px); margin: 0; padding: 18px 24px 16px 8px; background: var(--pc-glass);
  -webkit-backdrop-filter: var(--pc-glass-fx); backdrop-filter: var(--pc-glass-fx); box-shadow: var(--pc-pane); }
.pc-glance > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; min-width: 0; padding-left: 18px; border-left: 1px solid var(--line-2); }
.pc-glance dd { margin: 0; font-family: var(--pc-display); font-size: clamp(40px, 3.6vw, 56px); line-height: 1; color: var(--navy); font-variant-numeric: lining-nums; }
.pc-glance dd small { margin-left: 4px; font-family: var(--pc-sans); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--pc-gold-ink); }
.pc-glance dt { font-family: var(--pc-sans); font-size: 10px; font-weight: 600; letter-spacing: .18em; line-height: 1.5; text-transform: uppercase; color: var(--pc-gold-ink); }

/* ── the three columns: contents, the sheet, the docket (above the sheet below 1500px) ── */
.pc-wrap { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 72px); align-items: start;
  padding: 8px var(--pc-gut-r) 96px var(--pc-gut-l); }
.pc-wrap > .pc-desk { grid-column: 2; grid-row: 1; }
.pc-wrap > .pc-toc { grid-column: 1; grid-row: 1 / span 2; }
.pc-wrap > .pc-sheet { grid-column: 2; grid-row: 2; }
@media (min-width: 1500px) {
  .pc-wrap { grid-template-columns: minmax(240px, 300px) minmax(0, 960px) minmax(260px, 1fr); }
  .pc-wrap > .pc-desk { grid-column: 3; grid-row: 1 / span 2; position: sticky; top: 96px; }
  .pc-wrap > .pc-sheet { grid-row: 1 / span 2; }
}

/* ── the docket: glass, a gold edge; the one urgent thing on paper, then the one action ── */
.pc-desk { position: relative; margin: 0 0 28px; padding: 18px 22px 18px 24px; background: var(--pc-glass); -webkit-backdrop-filter: var(--pc-glass-fx); backdrop-filter: var(--pc-glass-fx); box-shadow: var(--pc-pane); }
.pc-desk::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold-soft); }
.pc-desk-k { margin: 0 0 12px; font-family: var(--pc-sans); font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--pc-gold-ink); }
@media (max-width: 760px) { .pc-desk-k { font-size: 10.5px; } }  /* rp200 phone floor, was 10px */
.pc-now { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: 16px 16px 16px 14px; background: var(--pc-paper);
  box-shadow: inset 0 2px 0 var(--gold-soft), inset 0 0 0 1px var(--line-2); }
.pc-now .ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(131,99,44,.5); }
.pc-now .ic svg { width: 18px; height: 18px; fill: none; stroke: var(--pc-gold-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pc-now p { margin: 0; font-family: var(--pc-serif); font-size: 14.5px; line-height: 1.58; color: var(--pc-muted); }
.pc-now b { display: block; margin-bottom: 4px; font-family: var(--pc-display); font-weight: 400; font-size: 20px; line-height: 1.2; color: var(--navy); }
.pc-now .pc-btn { grid-column: 1 / -1; justify-self: start; max-width: 100%; margin-top: 12px; white-space: normal; text-align: left; line-height: 1.35; padding-block: 10px; }
@media (min-width: 1500px) { .pc-now { grid-template-columns: minmax(0, 1fr); } .pc-now .ic { display: none; } .pc-now .pc-btn { justify-self: stretch; justify-content: space-between; } }
.pc-act { margin: 16px 0 0; display: grid; gap: 12px; justify-items: start; }
.pc-act .pc-btn.is-solid { justify-self: stretch; justify-content: space-between; }
.pc-act .co-copy { background: var(--pc-paper); }
.pc-desk-p { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line-2); font-family: var(--pc-serif); font-size: 14px; line-height: 1.6; color: var(--pc-muted); }
.pc-desk-go { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.pc-way, .pc-desk-go a { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; text-decoration: none; font-family: var(--pc-sans); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy); box-shadow: inset 0 -1px 0 rgba(10,22,40,.35); transition: box-shadow 200ms; }
.pc-way svg, .pc-desk-go svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 220ms var(--ease-quick); }
.pc-way:hover, .pc-desk-go a:hover { box-shadow: inset 0 -2px 0 currentColor; }
.pc-way:hover svg, .pc-desk-go a:hover svg { transform: translateX(4px); }
.pc-way:focus-visible, .pc-desk-go a:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
@media (min-width: 1001px) and (max-width: 1499px) {
  /* above the sheet the docket is wide: the urgent thing beside the action */
  .pc-desk { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 28px; }
  .pc-desk-k { grid-column: 1 / -1; }
  .pc-desk .pc-now { grid-column: 1; grid-row: 2 / span 3; align-self: start; }
  .pc-act { margin-top: 0; }
}

/* the actions: square, capitals, an arrow (Help's) */
.pc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
  font-family: var(--pc-sans); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; transition: transform 220ms var(--ease-quick); }
.pc-btn svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 220ms var(--ease-quick); }
.pc-btn:hover { transform: translateY(-1px); }
.pc-btn:hover svg { transform: translateX(4px); }
.pc-btn.is-gold { background-color: var(--gold-soft); color: var(--navy); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 20px -14px rgba(10,22,40,.6); }
.pc-btn.is-gold:hover { background-color: var(--gold-hi); }
.pc-btn.is-solid { position: relative; isolation: isolate; min-height: 52px; padding: 0 26px; color: var(--cream); background-color: var(--navy);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 2px rgba(10,22,40,.18), 0 12px 24px -12px rgba(10,22,40,.5); }
.pc-btn.is-solid::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--navy-2); opacity: 0; transition: opacity 220ms; }
.pc-btn.is-solid:hover::after { opacity: 1; }
.pc-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

/* ── the contents: a rail that marks the part being read; a disclosure on a phone ── */
.pc-toc details > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 0 0 12px; cursor: default; border-bottom: 2px solid var(--navy);
  font-family: var(--pc-sans); font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--navy); }
.pc-toc details > summary::-webkit-details-marker { display: none; }
.pc-toc ol { list-style: none; margin: 6px 0 0; padding: 0; }
.pc-toc li { margin: 0; font-size: 14px; }
.pc-toc a { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px; padding: 8px 8px 8px 10px; text-decoration: none;
  font-family: var(--pc-serif); line-height: 1.4; color: var(--pc-muted); border-bottom: 1px solid var(--line); transition: color .2s ease, background-color .2s ease; }
.pc-toc a:hover { color: var(--navy); background: rgba(212,169,67,.08); }
.pc-toc a:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.pc-tn { font-family: var(--pc-sans); font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--pc-gold-ink); font-variant-numeric: tabular-nums; padding-top: 2px; }
.pc-toc a[aria-current="true"] { color: var(--navy); background: var(--pc-paper); box-shadow: inset 3px 0 0 var(--gold-soft); }
.pc-toc a[aria-current="true"] .pc-tn { color: var(--navy); }
.pc-toc-foot { margin: 14px 0 0; padding: 0 0 0 10px; font-family: var(--pc-sans); font-size: 12px; line-height: 1.5; color: var(--pc-muted); }
.pc-toc-foot a { display: inline; padding: 0; border: 0; font-family: inherit; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(131,99,44,.6); }
.pc-toc-foot a:hover { background: none; }
@media (min-width: 1001px) {
  .pc-toc { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    padding: 18px 14px 16px 16px; background: var(--pc-glass); -webkit-backdrop-filter: var(--pc-glass-fx); backdrop-filter: var(--pc-glass-fx); box-shadow: var(--pc-pane); }
}

/* ── the sheet: paper, a gold rule down the margin, the numbers hung in the margin ── */
.pc-sheet { position: relative; min-width: 0; padding: clamp(28px, 3.4vw, 56px) clamp(24px, 4vw, 64px) 0 var(--pc-sheet-l); background: var(--pc-paper);
  box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(10,22,40,.05), 0 30px 60px -40px rgba(10,22,40,.35); }
.pc-sheet::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--pc-sheet-l) - 22px); width: 1px; background: var(--pc-rule); }
.pc-sec { position: relative; scroll-margin-top: 96px; padding-top: 16px; border-top: 2px solid var(--navy); }
.pc-sec + .pc-sec { margin-top: 64px; }
.pc-n { position: absolute; right: calc(100% + 36px); width: var(--pc-num); text-align: right; font-family: var(--pc-sans); font-weight: 600; font-size: 15px; letter-spacing: .04em; line-height: 1.9;
  color: var(--pc-gold-ink); font-variant-numeric: tabular-nums; top: 10px; }
.pc-sk { margin: 0 0 6px; max-width: var(--pc-col); font-family: var(--pc-sans); font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--pc-gold-ink); }
.pc-sec > h2 { margin: 0 0 6px; max-width: var(--pc-col); font-family: var(--pc-display); font-weight: 400;
  font-size: clamp(26px, 2.3vw, 34px); line-height: 1.15; color: var(--navy); text-wrap: balance; }
.pc-p { margin: 12px 0 0; max-width: var(--pc-col); font-family: var(--pc-serif); font-size: 17px; line-height: 1.65; color: var(--ink); }
.pc-p a, .pc-li a, .pc-door p a, .pc-route p a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(131,99,44,.6); }
.pc-p.is-quiet { font-size: 15px; color: var(--pc-muted); }
.pc-h3 { margin: 30px 0 0; max-width: var(--pc-col); font-family: var(--pc-sans); font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--pc-gold-ink); }
.pc-list { list-style: none; margin: 12px 0 0; padding: 0; max-width: var(--pc-col); }
.pc-li { position: relative; padding: 12px 0 12px 30px; border-top: 1px solid var(--line); font-family: var(--pc-serif); font-size: 16.5px; line-height: 1.6; color: var(--ink); }
.pc-li:last-child { border-bottom: 1px solid var(--line); }
.pc-li::before { content: ''; position: absolute; left: 4px; top: 22px; width: 12px; height: 1.5px; background: var(--gold-soft); }
.pc-list.is-no .pc-li::before { background: var(--danger); }
.pc-li b { color: var(--navy); }
/* a note set apart: gold-washed, a gold edge (Help's hp-when) */
.pc-note { margin: 24px 0 0; max-width: var(--pc-col); padding: 14px 18px; background: rgba(212,169,67,.12); box-shadow: inset 2px 0 0 var(--gold-soft);
  font-family: var(--pc-serif); font-size: 15.5px; line-height: 1.6; color: var(--pc-gold-ink); }
.pc-note b { color: var(--navy); }

/* the doors: which way a problem goes. Rows ruled across the column, the kind, the place, the money, a way in */
.pc-doors { list-style: none; margin: 22px 0 0; padding: 0; max-width: var(--pc-col); }
.pc-door { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 28px; row-gap: 4px; padding: 20px 0 22px; border-top: 1px solid var(--line-2); }
.pc-door:last-child { border-bottom: 1px solid var(--line-2); }
.pc-door .pc-door-k { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; font-family: var(--pc-sans); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--pc-gold-ink); }
@media (max-width: 760px) { .pc-door .pc-door-k { font-size: 10.5px; } }  /* rp200 phone floor, was 10px */
.pc-door h3 { grid-column: 1; margin: 2px 0 0; font-family: var(--pc-display); font-weight: 400; font-size: 23px; line-height: 1.2; color: var(--navy); }
.pc-door p { grid-column: 1; margin: 6px 0 0; font-family: var(--pc-serif); font-size: 16px; line-height: 1.6; color: var(--ink); }
.pc-door p.money { font-family: var(--pc-sans); font-size: 13px; line-height: 1.5; color: var(--pc-muted); }
.pc-door p.money b { color: var(--navy); font-weight: 600; }
.pc-door .pc-way { grid-column: 2; grid-row: 1 / span 4; align-self: center; white-space: nowrap; }
/* the one this page is: paper on the paper, a navy edge, its mark */
.pc-door.is-here { margin: 0 -18px; padding-inline: 18px; background: var(--pc-sheet); box-shadow: inset 3px 0 0 var(--navy); border-top-color: transparent; }
.pc-door.is-here + .pc-door { border-top-color: transparent; }
.pc-here { display: inline-block; margin-left: 12px; padding: 2px 7px 1px; vertical-align: 2px; font-family: var(--pc-sans); font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cream); background: var(--navy); }
@media (max-width: 760px) { .pc-here { font-size: 10.5px; } }  /* rp200 phone floor, was 9px */

/* the letter: an example complaint on a sheet of its own, three pins and their notes */
.pc-desk2 { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: clamp(24px, 3vw, 44px); align-items: start; margin-top: 26px; max-width: 60rem; }
.pc-letter { position: relative; margin: 0; padding: 30px clamp(20px, 2.4vw, 32px) 26px; background: var(--pc-sheet); box-shadow: inset 0 0 0 1px var(--line-2); }
.pc-letter::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-top: 2px solid var(--navy); border-bottom: 1px solid var(--gold-soft); }
.pc-letter dl { margin: 0 0 16px; }
.pc-letter dl > div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.pc-letter dt { font-family: var(--pc-sans); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--pc-gold-ink); padding-top: 4px; }
@media (max-width: 760px) { .pc-letter dt { font-size: 10.5px; } }  /* rp200 phone floor, was 10px */
.pc-letter dd { margin: 0; font-family: var(--pc-serif); font-size: 15.5px; line-height: 1.5; color: var(--navy); overflow-wrap: anywhere; }
.pc-letter p { margin: 10px 0 0; font-family: var(--pc-serif); font-size: 15.5px; line-height: 1.75; color: var(--ink); }
.pc-letter mark { position: relative; padding: 1px 4px; background: linear-gradient(180deg, transparent 0 48%, rgba(212,169,67,.34) 48% 94%, transparent 94%); color: inherit; }
.pc-pin { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 5px; border-radius: 50%; vertical-align: 1px; background: var(--navy); color: var(--cream);
  font-family: var(--pc-sans); font-style: normal; font-size: 10px; font-weight: 600; line-height: 1; }
.pc-notes { list-style: none; margin: 0; padding: 0; }
.pc-notes li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.pc-notes li:first-child { border-top: 0; padding-top: 4px; }
.pc-notes .pc-pin { width: 26px; height: 26px; margin: 0; font-size: 12px; background: var(--pc-paper); color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.pc-notes b { display: block; font-family: var(--pc-serif); font-weight: 700; font-size: 16px; line-height: 1.4; color: var(--navy); }
.pc-notes span { display: block; margin-top: 4px; font-family: var(--pc-serif); font-size: 15px; line-height: 1.6; color: var(--pc-muted); }
.pc-send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 26px; }

/* your dates: a road from today to the day the record ends, the dates worked out for today */
.pc-road { list-style: none; margin: 26px 0 0; padding: 0; max-width: 60rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
.pc-road::before { content: ''; position: absolute; top: 8px; left: 9px; right: 25%; height: 2px; background: var(--navy); }
/* past the last stop the line goes on, dashed: the record is kept, nothing more happens */
.pc-road::after { content: ''; position: absolute; top: 8px; left: calc(75% + 24px); right: 0; height: 2px; background: repeating-linear-gradient(90deg, var(--pc-ring) 0 8px, transparent 8px 13px); }
.pc-road li { position: relative; padding: 32px 22px 0 0; min-width: 0; }
.pc-road li::before { content: ''; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--pc-paper); box-shadow: inset 0 0 0 2px var(--navy), 0 0 0 5px var(--pc-paper); }
.pc-road li.is-start::before { background: var(--navy); }
.pc-road li.is-end::before { box-shadow: inset 0 0 0 2px var(--gold-soft), 0 0 0 5px var(--pc-paper); }
.pc-road .k { display: block; font-family: var(--pc-sans); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--pc-gold-ink); }
@media (max-width: 760px) { .pc-road .k { font-size: 10.5px; } }  /* rp200 phone floor, was 10px */
.pc-road b { display: block; margin-top: 8px; font-family: var(--pc-display); font-weight: 400; font-size: clamp(21px, 1.9vw, 27px); line-height: 1.15; color: var(--navy); text-wrap: balance; }
.pc-road small { display: block; margin-top: 8px; font-family: var(--pc-serif); font-size: 14.5px; line-height: 1.55; color: var(--pc-muted); }

/* the routes beyond us: by subject, each a row with who, what for, how to reach them */
.pc-routes { list-style: none; margin: 22px 0 0; padding: 0; max-width: var(--pc-col); counter-reset: r; }
.pc-route { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 24px; padding: 18px 0 20px; border-top: 1px solid var(--line-2); }
.pc-route:last-child { border-bottom: 1px solid var(--line-2); }
.pc-route .k { padding-top: 6px; font-family: var(--pc-sans); font-size: 10px; font-weight: 600; letter-spacing: .16em; line-height: 1.5; text-transform: uppercase; color: var(--pc-gold-ink); }
@media (max-width: 760px) { .pc-route .k { font-size: 10.5px; } }  /* rp200 phone floor, was 10px */
.pc-route h3 { margin: 0; font-family: var(--pc-display); font-weight: 400; font-size: 22px; line-height: 1.2; color: var(--navy); }
.pc-route p { margin: 6px 0 0; font-family: var(--pc-serif); font-size: 16px; line-height: 1.6; color: var(--ink); }
.pc-route .reach { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; font-family: var(--pc-sans); font-size: 13px; color: var(--pc-muted); }
.pc-route .reach b { font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; }

/* the particulars: who this is, as a ledger row */
.pc-who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 22px 0 0; max-width: var(--pc-col); }
.pc-who > div { padding: 12px 0; border-top: 1px solid var(--line); }
.pc-who dt { font-family: var(--pc-sans); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--pc-gold-ink); }
@media (max-width: 760px) { .pc-who dt { font-size: 10.5px; } }  /* rp200 phone floor, was 10px */
.pc-who dd { margin: 4px 0 0; font-family: var(--pc-serif); font-size: 16px; line-height: 1.5; color: var(--navy); }
.pc-who dd a { color: inherit; text-underline-offset: 3px; }

/* the counterfoil: the true particulars, perforated off the sheet; decoration */
.pc-foil { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 56px calc(-1 * clamp(24px, 4vw, 64px)) 0 calc(-1 * var(--pc-sheet-l)); padding: 16px clamp(24px, 4vw, 64px) 16px var(--pc-sheet-l);
  border-top: 2px dashed var(--line-3, #C9BC9A); background: repeating-linear-gradient(90deg, rgba(10,22,40,.035) 0 2px, transparent 2px 9px), var(--pc-sheet);
  font-family: var(--pc-sans); font-size: 9.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--pc-gold-ink); }
.pc-foil span + span::before { content: '\00B7' / ''; margin-right: 22px; color: var(--gold-soft); }

/* ── narrower windows ─────────────────────────────────────────────────── */
@media (max-width: 1240px) { .pc-desk2 { grid-template-columns: minmax(0, 1fr); row-gap: 22px; } }
@media (max-width: 1000px) {
  .pc-wrap { grid-template-columns: minmax(0, 1fr); }
  .pc-wrap > .pc-desk, .pc-wrap > .pc-toc, .pc-wrap > .pc-sheet { grid-column: 1; grid-row: auto; }
  .pc-toc { margin-bottom: 28px; padding: 14px 18px; background: var(--pc-glass); -webkit-backdrop-filter: var(--pc-glass-fx); backdrop-filter: var(--pc-glass-fx); box-shadow: var(--pc-pane); }
  .pc-toc details > summary { cursor: pointer; padding: 4px 0 12px; }
  .pc-toc details:not([open]) > summary { padding-bottom: 4px; border-bottom: 0; }
  .pc-toc details > summary::after { content: ''; margin-left: auto; width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease; }
  .pc-toc details[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
}
@media (max-width: 900px) { .pc-head-in { grid-template-columns: minmax(0, 1fr); row-gap: 26px; } }
@media (max-width: 760px) {
  /* the road stands upright: one stop under another, the line down the left */
  .pc-road { grid-template-columns: minmax(0, 1fr); }
  .pc-road::before { top: 9px; bottom: var(--last, 90px); left: 8px; right: auto; width: 2px; height: auto; }
  .pc-road::after { display: none; }
  .pc-road li { padding: 0 0 26px 38px; }
  .pc-road li:last-child { padding-bottom: 6px; }
  .pc-road b { margin-top: 4px; }
  .pc-door { grid-template-columns: minmax(0, 1fr); }
  .pc-door .pc-way { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 10px; }
  .pc-route { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .pc-route .k { padding-top: 0; }
  .pc-who { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .pc-head { padding-top: 44px; padding-bottom: 28px; }
  .pc-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; padding: 16px 16px 14px 4px; }
  .pc-glance > div { padding-left: 12px; }
  .pc-glance dd { font-size: 34px; }
  .pc-glance dt { font-size: 9px; letter-spacing: .12em; }
@media (max-width: 760px) { .pc-glance dt { font-size: 10.5px; } }  /* rp200 phone floor, was 9px */
  .pc-sheet { --pc-num: 0px; --pc-sheet-l: 18px; padding: 22px 18px 0; }
  .pc-sheet::before { display: none; }
  /* the numbers come in from the margin and stand over their headings */
  .pc-n { position: static; display: inline; width: auto; margin: 0 10px 0 0; font-size: 12px; line-height: 1.2; }
  .pc-n + .pc-sk { display: inline; }
  .pc-sec > h2 { margin-top: 6px; }
  .pc-sec + .pc-sec { margin-top: 52px; }
  .pc-door.is-here { margin: 0 -10px; padding-inline: 10px; }
  .pc-letter { margin: 0 -6px; padding: 26px 14px 20px; }
  .pc-letter dl > div { grid-template-columns: 60px minmax(0, 1fr); }
  .pc-send .pc-btn, .pc-now .pc-btn { width: 100%; }
  .pc-foil { margin: 40px -18px 0; padding: 14px 18px; gap: 6px 16px; }
  .pc-foil span + span::before { content: none; }   /* a wrapped line never starts with a dot (59.18 rule 7) */
}
@media (prefers-reduced-transparency: reduce) {
  .pc-glance, .pc-desk, .pc-toc { background: var(--pc-paper) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-btn, .pc-btn svg, .pc-way svg, .pc-desk-go svg, .pc-toc a { transition: none; }
  .pc-btn:hover, .pc-btn:hover svg, .pc-way:hover svg, .pc-desk-go a:hover svg { transform: none; }
}
/* forced colours: what must survive is text, a border or a stroke (Mason 59.8) */
@media (forced-colors: active) {
  .pc-sheet, .pc-desk, .pc-toc, .pc-glance, .pc-now, .pc-note, .pc-letter { border: 1px solid CanvasText; }
  .pc-toc a[aria-current="true"] { border-left: 3px solid Highlight; }
  .pc-door.is-here { border-left: 3px solid Highlight; }
  .pc-road::before, .pc-road::after { background: CanvasText; }
  .pc-road li::before { border: 2px solid CanvasText; }
  .pc-pin { border: 1px solid CanvasText; }
  .pc-foil { background: none; }
}
/* print: the sheet alone, the docket kept */
@media print {
  html.pc-page { background: none; } html.pc-page::before { display: none; }
  header.topbar, .footer, .pc-toc, .pc-desk-go, .profile-drawer, .profile-overlay, .back-to-top { display: none !important; }
  .pc-wrap { display: block; padding: 0; }
  .pc-glance, .pc-desk, .pc-sheet { box-shadow: none; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .pc-glance, .pc-desk { border: 1px solid #999; }
}