/* LT UK, direction A: the five small pages (questions, accountants, privacy, accessibility and the not-found
   page). Loaded after site.css and never instead of it. Each page still opens at her seal and lays its pieces
   square round it (TEMPLATE.md section 5): questions on her four questions as cards, accountants on a short table
   of three, the not-found page on the four parts, privacy and accessibility on her seal alone, with their pieces
   laid square below. A piece's detail opens directly under its table, where the eye already is. */

/* ---- the opening: a compact head beside the table (P46) ---- */
.sm-open { position: relative; }
.sm-main { display: grid; gap: 26px; padding-top: 30px; padding-bottom: 40px; }
.sm-words { display: grid; gap: 14px; justify-items: start; align-content: center; }
.sm-for { font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--or-text); }
.sm-words h1 { font-size: clamp(2.3rem, 4vw, 3.8rem); max-width: 15ch; }
.sm-lede { font-size: clamp(1.05rem, 1.35vw, 1.22rem); line-height: 1.55; max-width: 44ch; }
/* the line above a table keeps clear of the loop the string runs round a chosen piece (about a band and a half) */
.sm-pick { margin: 0 0 calc(var(--band) * 1.5 + 14px); font-size: 0.9375rem; color: var(--ink-2); }
.sm-table { position: relative; width: 100%; max-width: 560px; }
@media (min-width: 640px) and (max-width: 1023px) {
  .sm-main { padding-top: 52px; }
}
@media (min-width: 1024px) {
  .sm-main { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 5vw; align-items: center; min-height: 100vh; min-height: 100svh; padding-top: 48px; padding-bottom: 112px; }
  .sm-table { justify-self: end; max-width: min(100%, 600px, calc(100svh - 250px)); }
  /* a page whose pieces open below the table: no full screen of opening, so the detail opens just under it */
  .sm-main--detail { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); min-height: 0; align-items: center; padding-top: 64px; padding-bottom: 24px; }
  /* the table stands at the left, beside the lane, so the string leaves her seal straight along the table's
     gutter into the lane and comes down it to the detail below, never doubling back under the table */
  .sm-main--detail .sm-table { order: -1; justify-self: start; margin-left: 0; max-width: min(100%, 560px, calc(100svh - 290px)); }
}

/* the first answer, given on the first screen: where she works */
.sm-where { display: grid; gap: 14px; width: min(100%, 520px); margin-top: 6px; }
.sm-where > div { display: grid; gap: 2px; padding-top: 10px; border-top: 1px solid var(--rule-strong); }
.sm-where .kicker { font-size: 0.75rem; }
.sm-where p:not(.kicker) { font-size: 1.0625rem; line-height: 1.45; }
@media (min-width: 640px) and (max-width: 1023px) { .sm-where { grid-template-columns: 1fr 1fr; column-gap: 28px; width: min(100%, 640px); } .sm-where > div:last-child { grid-column: 1 / -1; } }

/* ---- the pieces round her seal ---- */
.sm-table .table-item { background: var(--pic-bg); }
.sm-table .table-item[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--or); }
.sm-table .ti-name { font-size: clamp(0.95rem, 1.35vw, 1.2rem); }
/* the pieces named in Lora bold, as on every inner table (P89); the not-found page keeps the four parts' names */
body:not([data-page="not-found"]) .sm-table .table .ti-name { font-family: var(--serif); font-weight: 700; text-transform: none; letter-spacing: 0; line-height: 1.2; }
/* three pieces: one long piece above the seal, two squares below, so the string leaves down the gutter */
.table[data-n="3"] { aspect-ratio: 1; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
.table[data-n="3"] .table-item:nth-of-type(1) { grid-column: 1 / -1; }
.table[data-n="3"] .table-item:nth-of-type(1) .ti-lab { left: 8px; top: 8px; }
.table[data-n="3"] .table-item:nth-of-type(2) .ti-lab { left: 8px; bottom: 8px; }
.table[data-n="3"] .table-item:nth-of-type(3) .ti-lab { right: 8px; bottom: 8px; }
.table[data-n="3"] .table-item:nth-of-type(1) img { object-position: 50% 62%; }
/* the dial's pause is the shared one (site.css); the small pages' seal stands still, so it stays hidden */

/* ---- questions: her four questions are the table's pieces, cards with the question set in them; each opens its
   answer directly under the table (one way in to each answer) ---- */
.q-table .table-item.q-card { display: block; background: var(--paper-2); color: var(--ink); border: 1px solid var(--rule); }
.q-card .qc { position: absolute; z-index: 2; display: grid; gap: 8px; align-content: start; max-width: calc(100% - 28px); }
.table[data-n="4"] .q-card:nth-of-type(1) .qc { left: 14px; top: 14px; }
.table[data-n="4"] .q-card:nth-of-type(2) .qc { right: 14px; top: 14px; text-align: right; justify-items: end; }
.table[data-n="4"] .q-card:nth-of-type(3) .qc { left: 14px; bottom: 14px; }
.table[data-n="4"] .q-card:nth-of-type(4) .qc { right: 14px; bottom: 14px; text-align: right; justify-items: end; }
.qc-k { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--or-text); }
.qc-q { font: 700 clamp(1rem, 1.6vw, 1.35rem)/1.25 var(--serif); max-width: 13ch; }
.q-card .ti-open { color: var(--ink-2); }
@media (max-width: 400px) { .q-card .qc { max-width: calc(100% - 20px); gap: 6px; } .table[data-n="4"] .q-card:nth-of-type(odd) .qc { left: 10px; } .table[data-n="4"] .q-card:nth-of-type(even) .qc { right: 10px; } .table[data-n="4"] .q-card:nth-of-type(-n+2) .qc { top: 10px; } .table[data-n="4"] .q-card:nth-of-type(n+3) .qc { bottom: 10px; } .qc-q { font-size: 0.95rem; } .qc-k { font-size: 0.6875rem; } }
@media (hover: hover) and (pointer: fine) { .q-table .q-card:hover .qc-q, .q-table .q-card:focus-visible .qc-q { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--rule-strong); } }

/* ---- the details under the table (questions and accountants), one open at a time; on wide screens each uses the
   room: its heading on the left, its words on the right ---- */
.sm-detail { padding-top: 0; padding-bottom: 0; }
.sm-detail .pp { margin: var(--wrap-clear) var(--wrap-right) var(--wrap-clear) 0; gap: 18px; }
.sm-two { display: grid; gap: 16px 5vw; align-items: start; }
.sm-two > .pp-main { gap: 14px; }
@media (min-width: 900px) { .sm-two { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } .sm-two > .pp-h { position: sticky; top: 32px; } }
.sm-detail .pp-h { max-width: 18ch; }
.qa-lead { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.45; color: var(--ink); max-width: 56ch; }
.sm-detail .floors { font-size: 0.9375rem; max-width: 62ch; }
.sm-detail p { max-width: 62ch; }
.sm-incl { display: grid; gap: 8px; max-width: 62ch; }
.sm-incl li { position: relative; padding-left: 20px; color: var(--ink-2); }
.sm-incl li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 10px; height: 1px; background: var(--ink-2); }
@media (min-width: 1100px) { .sm-incl--two { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
.sm-links { display: flex; flex-wrap: wrap; gap: 4px 28px; }

/* what she never does: a plain list, two columns where there is room */
.never { display: grid; gap: 6px 40px; width: 100%; }
.never li { position: relative; padding: 6px 0 6px 22px; border-top: 1px solid var(--rule); }
.never li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 11px; height: 1px; background: var(--ink-2); }
@media (min-width: 760px) { .never { grid-template-columns: 1fr 1fr; } }

/* ---- privacy and accessibility: her seal alone at the head, the words beside it ---- */
.sm-head > .wrap { display: grid; gap: 20px; justify-items: start; padding-top: 34px; padding-bottom: clamp(28px, 5vh, 56px); }
.sm-seal { display: grid; justify-items: start; width: clamp(132px, 15vw, 188px); }
.sm-seal .table { display: block; width: 100%; aspect-ratio: 1; }
.sm-seal .table-seal { width: 100%; }
.sm-head .sm-words h1 { max-width: none; }
@media (min-width: 640px) {
  .sm-head > .wrap { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(28px, 4vw, 72px); align-items: center; padding-top: 64px; }
}

/* the pieces laid square below the head: each named by its heading, the section alone carries a number */
.sm-body > .wrap { padding-top: clamp(24px, 4vh, 48px); }
.sm-grid { display: grid; gap: 52px; max-width: 1220px; }
@media (min-width: 900px) { .sm-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 96px); row-gap: 64px; } }
.sm-piece { display: grid; gap: 14px; align-content: start; justify-items: start; }
.sm-piece--wide { grid-column: 1 / -1; }
.sm-ph { width: 100%; padding-top: 14px; border-top: 1px solid var(--rule-strong); }
.sm-piece h2 { font: 700 clamp(1.4rem, 2.1vw, 1.85rem)/1.2 var(--serif); }
.sm-piece p, .sm-piece li { max-width: 62ch; }
.sm-piece .plain { color: var(--ink-2); }
.sm-piece a:not(.btn):not(.quiet) { text-underline-offset: 4px; text-decoration-color: var(--rule-strong); }
.sm-piece a:not(.btn):not(.quiet):hover { color: var(--or-text); text-decoration-color: currentColor; }
.sm-list { display: grid; gap: 10px; }
.sm-list li { position: relative; padding-left: 22px; }
.sm-list li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 11px; height: 1px; background: var(--ink-2); }
@media (min-width: 900px) { .sm-list--two { display: block; columns: 2; column-gap: clamp(32px, 4vw, 72px); } .sm-list--two li { break-inside: avoid; margin-bottom: 10px; } }
/* your rights: one right a line, ruled like the list of what she never does */
.sm-rights { display: grid; gap: 0; width: 100%; border-bottom: 1px solid var(--rule); }
.sm-rights li { position: relative; padding: 9px 0 9px 22px; border-top: 1px solid var(--rule); }
.sm-rights li::before { content: ""; position: absolute; left: 0; top: 1.25em; width: 11px; height: 1px; background: var(--or-text); }
/* a wide piece framed by the string (data-wrap): clear room inside the band, more on phones */
.sm-framed { margin: var(--wrap-clear) var(--wrap-right) var(--wrap-clear) 0; padding: 18px 18px 18px 0; }
.sm-framed > .sm-ph { padding-top: 0; border-top: 0; }
@media (min-width: 640px) { .sm-framed { padding: 22px 22px 22px 0; } }
/* the small pieces inside a framed piece, laid square: one, two or three across */
.sm-sub { display: grid; gap: 26px; width: 100%; }
@media (min-width: 640px) { .sm-sub { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; } }
@media (min-width: 1100px) { .sm-sub { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 44px; } }
.sm-sub > div { display: grid; gap: 8px; align-content: start; padding: 16px 18px 18px; background: var(--paper-2); border-radius: 3px; }
.sm-sub h3 { font-size: 1.15rem; }
.sm-sub p, .sm-sub li { font-size: 1rem; line-height: 1.55; }
.sm-sub .sm-list { gap: 6px; }
.sm-sub code, .sm-piece code { font-family: var(--serif); font-weight: 700; white-space: nowrap; }
.sm-note { font-size: 0.9375rem; color: var(--ink-2); }

/* ---- the not-found page: the four parts round her seal, and the way home, where the string closes ---- */
.sm-home > .wrap { display: grid; gap: 18px; justify-items: start; padding-top: clamp(20px, 4vh, 40px); padding-bottom: clamp(64px, 10vh, 120px); }
.sm-home h2 { font: 700 clamp(1.35rem, 2vw, 1.75rem)/1.25 var(--serif); }
/* the ring round the way home keeps 20 px of paper from the line above it, as the call block's does */
.sm-home .actions { margin: calc(var(--band) + 16px) 0 calc(var(--band) + 22px); }
.sm-home [data-string-end] { margin-left: 14px; }
@media (min-width: 640px) { .sm-home [data-string-end] { margin-left: 0; } }