/* The site's own composition. Tokens and kit classes only: no colour literals, strokes of 1, 1.5 or 3 px.
   Loaded after the frame, the component stylesheets and trust.css. Prefix: site-. */

/* 1. A placed component keeps the look of its own job page. The frame's page-wide rules
      (.f-page p, .f-page .k-letterhead, .f-page a) would otherwise reach into it. */
.f-page :is(.s1-page, .s2-page, .aw-page, .sy-page, .a-page) p { text-wrap: wrap; }
.f-page :is(.s1-page, .s2-page, .aw-page, .sy-page, .a-page) :is(.k-person__name, .k-person__role) { text-wrap: balance; }
.f-page :is(.s1-page, .s2-page, .aw-page, .sy-page, .a-page, .t-page) .k-letterhead { white-space: normal; }
.f-page :where(.t-page, .s1-page, .s2-page, .aw-page, .sy-page, .a-page, .site-record) h2 { letter-spacing: normal; }
.f-page :where(.t-page, .s1-page, .s2-page, .aw-page, .sy-page, .a-page, .site-record) h2.k-smallcaps { letter-spacing: var(--type-smallcaps-tracking); }
/* Review ruling: restore the original trust-picture underlines without reaching the frame/footer. */
.t-page.site-component .t-link, .site-well.t-page .t-link { text-underline-offset: 5px; }
/* The undo lines above would also override some of the jobs' own rules; restate them. */
.f-page .a-page .a-object .k-letterhead { white-space: nowrap; }
.f-page .a-page .a-object .k-doc-subtitle { text-wrap: pretty; }
.f-page .s2-page .s2-scene .k-letterhead { white-space: nowrap; }
.f-page .s2-page .s2-survey-part p { white-space: nowrap; }
.f-page .sy-page .sy-nowrap { white-space: nowrap; }
/* The sealed tag's owner, "Wexcombe Joinery", now stays on one line (protected term): the tag, anchored at its right,
   takes the width of its words instead of the job's fixed 90 px (78 px on a phone), so the name stays on the paper. */
.f-page .sy-page .sy-seal { width: auto; }
/* home-static (.hm-page): the frame's .f-page h2 would resize its headings; they keep their job sizes (home-static/home.css). */
.f-page .hm-page .hm-h2 { font-size: var(--type-step-3); line-height: var(--type-leading-3); letter-spacing: -0.01em; }
.f-page .hm-page .hm-close__h { font-size: var(--type-step-4); line-height: var(--type-leading-4); letter-spacing: -0.015em; }
@media (max-width: 767px) {
  .f-page .hm-page .hm-ej .hm-h2 { font-size: var(--type-step-2); line-height: var(--type-leading-2); }
  .f-page .hm-page .hm-close__h { font-size: var(--type-display-2-size-web-phone); line-height: var(--type-display-2-line-height-web-phone); }
}
/* The frame's .f-page a { color: inherit } would take the label colour off a component's primary button (parts.css). */
.f-page .site-component .btn--primary { color: var(--color-action-primary-text); }
/* services-hub (.ht-figure): the picture keeps its job settings where the frame's page-wide rules would reach in. */
.f-page .ht-figure p { text-wrap: wrap; }
.f-page .ht-figure .k-letterhead { white-space: normal; }
.f-page .ht-figure h2.ht-business { font-size: 21px; line-height: 28px; letter-spacing: normal; }
/* stages-2 objects placed as margin figures keep their scene's rule (stages-2-finish/stages-2.css: .s2-scene .k-body). */
.f-margin .s2-coaching-slip .k-body { height: 100%; }
.site-component { min-width: 0; }
/* Below the composed phone floor, contain protruding drawing edges. */
@media (max-width: 389px) {
  html, body.f-page { overflow-x: clip; }
  .f-page > main { overflow-x: clip; }
}
/* Finished gallery paths are present with scripting disabled. */
[data-g-prerendered] [data-g-phone-only] { display:none; }
@media (max-width:800px) {
  [data-g-prerendered] path { d:var(--g-phone-d); }
  [data-g-prerendered] [data-g-phone-only] { display:initial; }
  [data-g-prerendered] [data-g-desktop-only] { display:none; }
}
/* DEC 117: readable text within the named drawings. Miniature anatomy retains
   its own size; these rules change wrapping and clear the disclosure marker. */
.site-unit, .site-address { white-space:nowrap; }
/* The filing tabs are links; stamp red is not an interactive word colour. */
.f-page .site-component .v-index-tab { color:var(--color-text-primary); }
.f-page .site-component :is(.ht-pack .k-doc-title, .g-example-read .k-doc-title, .g-fan-leaf .k-doc-title, .sy-engine h3, .aw-instrument h3, .f-register-back .k-cover p) { text-wrap:balance; }
.f-page .site-component :is(.k-doc-subtitle, .k-fiction, .t-trigger, .hm-sd__checks li, .hm-sd__parts li, .hm-st__note, .t-inventory-fields dd, .t-commit-fields dd, .ht-station > p, .s1-pack-group li, .f-part-copy p, .f-reviewer-aside p, .f-qa dd, .g-fields dd, .g-responsibility, .g-map-object p, .g-person .k-person__name) { text-wrap:pretty; }
@media(max-width:767px) {
 .site-component .t-period-name { position:relative; padding-right:24px; }
 .site-component .t-period-name::after { position:absolute; right:0; top:12px; margin-left:0; }
}

/* DEC 114, jobs 1 and 2. The accent names the current place and regions of the frame.
   These are the jobs' own labels, never a blanket smallcaps or document rule. */
.f-nav-link[aria-current]::after,
.f-current::after,
.f-menu-title[aria-current]::before { background-color: var(--color-accent-2); }
.t-footer-nav h2,
.f-footer-group h2,
.k-margin-figure figcaption .k-smallcaps,
.f-register-figures .k-margin-figure > .k-smallcaps,
.f-pull > p,
.hm-dept,
.ht-station > h3.k-smallcaps { color: var(--color-accent-2-text); }
/* Accent review 1, 13 November (rulings; direction errata 1.3 and 1.4):
   - Home keeps the accent on the hero strip's six department labels only; the Every-job and Week names are ink.
   - Inside a menu panel only the current square takes the accent: pen and stamp go back to their kit ink there.
   - The Who we help menu gets the Services menu's current square.
   - A document carrying a blue element (rule mark, Build mark, station, the sealed tag's ownership square) keeps
     its pen and stamp in ink.
   - One selected line per picture: on Decide the Blueprint baseline row keeps the accent outline; the Evidence
     Check's selected row returns to the kit's ink outline. */
.f-menu-panel :is(.k-stamp, .k-tick, .k-pen),
:is(.k-paper, [data-object-drawing]):has(.k-rule-mark, .k-mark--build, .k-station) :is(.k-stamp, .k-tick, .k-pen),
.sy-seal :is(.k-stamp, .k-tick, .k-pen) { --k-mat-pen-ink: inherit; --k-mat-stamp-ink: inherit; }
.f-audience-title[aria-current]::before { content: ""; width: 7px; height: 7px; background-color: var(--color-accent-2); display: inline-block; margin-right: 8px; vertical-align: middle; }
.site-page-decide .s1-evidence .k-selected { outline-color: var(--color-text-primary); }
.site-page-decide .s1-evidence:has(.k-selected) > .k-m-edge { background-color: var(--color-line-structure); }

/* Frame headings never end on one word alone (review 1, 13 November): section, close and form headings are balanced.
   Headings inside placed components keep their job's own setting. */
.f-hanging h2, .f-close-copy h2, .site-form-head { text-wrap: balance; }

/* Typesetting, TYPESET-SPEC 2.2: frame lists, quotes and captions set pretty; short titles balance. */
.f-page :is(.f-list-rows > li, .f-guarantee-quote, .f-pull blockquote, .f-booking-review blockquote, .f-booking-review figcaption, .site-carried-posts article > p, .site-carried-bio > p, .site-carried-legal .f-body p) { text-wrap: pretty; }
/* The placed stage reviews live in site-stage-text; the library's s1-text and s2-text wrappers are absent. */
.f-page :is(.site-stage-text, .f-opening, .f-section) > .k-review :is(blockquote, figcaption) { text-wrap: pretty; }
.f-page h3.site-carried-post-title { text-wrap: pretty; }
.f-page :is(h3.site-subhead, .site-footer .t-footer-nav li) { text-wrap: balance; }
/* Restore the tabular lining figures reset by font shorthands on frame roles (TYPESET-SPEC 2.6). */
.f-page :is(.f-guarantee-quote, .f-sentence, .f-pull blockquote, .site-carried-post-title, .site-carried-cred-figure, .site-carried-cta-head),
.f-page :is(.site-stage-text, .f-opening, .f-section) > .k-review blockquote { font-variant-numeric: tabular-nums lining-nums; }

/* 2. Stage template, paper first: the six stage names in one row under the header. */
.site-stage-row { border-bottom: var(--line-construction) solid var(--color-line-construction); }
.site-stage-row ol { display: flex; flex-wrap: wrap; gap: 8px 32px; padding-block: 12px; }
.site-stage-link { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; text-decoration: none; color: var(--color-text-secondary); }
.site-stage-link:hover { text-decoration: underline; }
.site-stage-link[aria-current] { color: var(--color-text-primary); } /* errata 1.3: the square takes the accent, the word stays ink */
.site-stage-link[aria-current]::before { content: ""; width: 8px; height: 8px; background: var(--color-accent-2); }

/* 3. The opening meets the stage picture: picture in its 888 px column, the rest of the opening beside it. */
.site-stage { display: grid; grid-template-columns: minmax(0, 888fr) minmax(0, 432fr); gap: 24px; align-items: start; margin-top: 64px; }
.site-stage-picture { grid-column: 1; grid-row: 1; }
.site-stage-text { grid-column: 2; grid-row: 1; padding: 24px 0 0 24px; border-top: var(--line-structure) solid var(--color-text-primary); }
.site-stage-text > p { font-size: 16px; line-height: 24px; color: var(--color-text-secondary); }
.site-stage-text > p + p { margin-top: 24px; }
.site-stage-text .f-action { margin-top: 32px; }

/* 4. Section furniture the frame leaves to the page. */
/* TYPESET-SPEC 2.3: body text fits 544 px; the grid and the 660 px list rules retain their widths.
   The larger one-sentence rule retains its existing measure, like the guarantee quotes. */
.f-body > :is(p:not(.f-sentence), .site-list-label, .site-link-row, .site-link-line, h3.site-subhead) { max-width: 544px; }
.f-body > .f-list-rows > li { padding-right: 116px; }
.f-close-copy > p { max-width: 544px; }
.site-carried-posts article > p, .site-carried-bio > p, .site-carried-evidence p { max-width: 544px; }
.f-body > * + .f-list-rows, .f-body > .f-list-rows + *, .f-body > * + .site-list-label { margin-top: 24px; }
.f-body > .site-list-label + .f-list-rows { margin-top: 8px; }
.site-list-label { color: var(--color-text-primary); font-weight: 500; }
.f-body > .site-link-row { margin-top: 24px; }
.f-body > .site-link-row + .site-link-line { margin-top: 4px; }
.f-body .f-sentence + p { margin-top: 24px; }
.f-body > * + .site-subhead { margin-top: 32px; } /* an h3 sub-heading inside a section body; placed components are not f-body children */
.f-section > .site-wide { grid-column: 1 / -1; grid-row: 3; margin-top: 48px; }
.f-section.site-continue { border-top: 0; margin-top: 48px; padding-top: 0; }
.site-well { margin-top: 64px; }
.f-section > :is(.site-wide, .f-margin) { align-self: stretch; }
.site-wide .t-period-stage { margin-top: 64px; }
.site-wide .t-price-stage { margin-bottom: 0; }
.f-margin .k-fiction { margin-top: 16px; }

/* 5. The paper you hold: one sheet at reading height, the heading hung beside it. */
.site-paper-section { grid-template-rows: min-content min-content 1fr; }
.site-paper-section > .site-paper-head { grid-column: 8 / 13; grid-row: 1; padding-right: 0; }
.site-paper-section > .site-paper-text { grid-column: 8 / 13; grid-row: 2; margin-top: 24px; }
.site-paper-section > .site-paper-sheet { grid-column: 2 / 8; grid-row: 1 / span 3; padding-top: 32px; }
.site-paper { position: relative; max-width: 600px; }
.site-paper > .k-body { padding: 40px 48px 48px; }
.site-paper .k-letterhead { font-size: 12px; line-height: 16px; }
.site-paper .k-doc-title { margin-top: 24px; }
.site-paper-groups { margin-top: 32px; }
.site-paper-group + .site-paper-group { margin-top: 32px; }
.site-paper-group-head { font: 400 21px/28px var(--p-font-family-display); padding-bottom: 8px; border-bottom: var(--line-structure) solid var(--color-line-structure); }
.site-paper-group li { font-size: 16px; line-height: 24px; padding-block: 8px; box-shadow: inset 0 calc(-1 * var(--k-hair)) 0 var(--color-line-construction); }

/* Record pages under Sample work: the gallery job's intro keeps its spacing with the plain "Sample work" crumb in place
   of its small-caps line (.g-intro > .k-smallcaps in gallery.css). */
.g-intro > .site-carried-crumb { margin-bottom: 20px; }
@media (max-width: 800px) { .g-intro > .site-carried-crumb { margin-bottom: 16px; } }
/* The workflow records' "Next" links are 16 px of text in the gallery job; 4 px of padding each side makes 24 px targets, same layout. */
.f-page .site-record .g-next a { padding-block: 4px; margin-block: -4px; }

/* 6. Not-found list, footer spacing. */
.site-notfound-list { margin-top: 48px; padding-bottom: 96px; }
.site-notfound-list .f-list-rows { max-width: 660px; }
.site-notfound-list .f-list-rows > li:first-child { padding-top: 16px; border-top: var(--line-construction) solid var(--color-line-construction); }
.site-footer .t-footer { margin-top: 0; }
.site-footer .t-footer-nav a { display: inline-block; padding: 2px; margin: -2px; } /* 24 px targets, same layout */
/* Every link and button outside running text is at least 24 x 24 px (WCAG 2.2 target size), without moving anything:
   padding grows the target, an equal negative margin keeps the layout (inline links ignore the vertical margin). */
.f-text-link { padding-block: 2px; margin-block: -2px; }
.f-text-link.site-mail { font-size: inherit; line-height: inherit; } /* an email address made a link keeps the size of the text it sits in */
/* TYPESET-SPEC 2.8: frame text links use the construction underline at rest and structure on hover. */
.f-page :is(.f-opening, .f-hanging, .f-body, .f-close-copy, .site-stage-text, .site-carried-bio, .site-carried-photo, .site-carried-topics, .site-carried-posts, .site-notfound-list) a:not(.f-button),
.f-page .site-footer :is(.t-link, .t-footer-nav a) { text-decoration-thickness: var(--line-construction); text-underline-offset: 4px; text-decoration-skip-ink: auto; }
.f-page :is(.f-opening, .f-hanging, .f-body, .f-close-copy, .site-stage-text, .site-carried-bio, .site-carried-photo, .site-carried-topics, .site-carried-posts, .site-notfound-list) a:not(.f-button):hover,
.f-page .site-footer .t-link:hover { text-decoration-thickness: var(--line-structure); }
.f-page :is(.f-hanging, .f-close-copy) h2 a:not(.f-button) { text-underline-offset: 6px; }
.f-page :is(.f-nav-link, .site-stage-link):hover,
.f-page .site-footer .t-footer-nav a:hover { text-decoration-thickness: var(--line-construction); text-underline-offset: 4px; }
/* TYPESET-SPEC 2.9: controls in the frame retain panning and pinch zoom; picture controls keep their own rules. */
.f-page :is(a, button, input, textarea, select, label, summary):not(:where(:is(.site-component, [role="img"], .k-scene, .k-paper, .k-well, .f-object, [data-object-drawing], .f-preview, .f-close-picture, .f-menu-drawing, .f-audience-object, .f-margin-scene, .f-margin-doc, .f-fragment, .f-booking-stage, .f-register-stage, .f-reviewer-stage), :is(.site-component, [role="img"], .k-scene, .k-paper, .k-well, .f-object, [data-object-drawing], .f-preview, .f-close-picture, .f-menu-drawing, .f-audience-object, .f-margin-scene, .f-margin-doc, .f-fragment, .f-booking-stage, .f-register-stage, .f-reviewer-stage) *)) { touch-action: manipulation; }
.site-stage-link { padding-inline: 2px; margin-inline: -2px; }
/* Links inside placed components, at zero specificity so any rule of the component's own job still wins. */
:where(.site-component a[href]:not(.btn)) { padding-block: 2px; margin-block: -2px; } /* buttons are already 48 px tall */

@media (max-width: 1250px) {
  .site-stage { display: block; margin-top: 24px; }
  .site-stage-text { padding: 0; border: 0; max-width: 660px; }
  .site-stage-picture { margin-top: 48px; max-width: 888px; }
}
@media (max-width: 1023px) {
  .site-paper-section > .site-paper-sheet { grid-column: 1 / 8; }
}
@media (max-width: 767px) {
  .f-body > .f-list-rows > li { padding-right: 0; }
  .f-close-copy h2 { font-size: 28px; line-height: 32px; } /* TYPESET-SPEC F10, accepted phone close scale. */
  .site-stage-row ol { display: grid; grid-template-columns: repeat(3, max-content); gap: 4px 32px; padding-block: 12px; } /* six names as a 3 x 2 grid */
  .site-stage-text .f-action { margin-top: 24px; }
  .f-section > .site-wide { margin-top: 32px; }
  .f-section.site-continue { margin-top: 32px; }
  .site-well { margin-top: 48px; }
  .site-wide .t-period-stage { margin-top: 40px; }
  .site-paper-section > .site-paper-text { margin-top: 24px; }
  .site-paper-section > .site-paper-sheet { padding-top: 32px; }
  .site-paper > .k-body { padding: 24px 20px 32px; }
  .site-paper-groups { margin-top: 24px; }
  .site-notfound-list { padding-bottom: 64px; }
}

/* 7. Without scripting the phone navigation shows its links in place of the Menu control. */
@media (max-width: 1000px) {
  html:not(.site-js) .f-phone-toggle { display: none; }
  html:not(.site-js) .f-header-inner { flex-wrap: wrap; height: auto; min-height: 74px; padding-top: 20px; }
  html:not(.site-js) .f-navigation { display: flex; position: static; flex: 0 0 100%; margin-left: 0; flex-direction: column; align-items: stretch; width: 100%; padding: 16px 0 24px; }
  html:not(.site-js) .f-nav-action { align-self: flex-start; margin-top: 8px; }
}

/* Icons beside words (direction 2.4 and 2.5): decorative, the word carries the meaning. */
.site-icon-head { display: flex; align-items: flex-start; gap: 12px; }
.site-icon-head > .k-icon { margin-top: 4px; }
.f-list-rows > .site-icon-row { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 16px; align-items: start; }
/* The Who we help panel, seven entries in words until the icon set is accepted (DEC 112). */
.site-audience-words { row-gap: 16px; }
.site-audience-words > li { padding-top: 16px; }
/* DEC 116 frame addendum: seven accepted audience icons, two desktop rows. */
.site-audience-words { grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px 32px; }
.site-audience-words .f-audience-title { display:flex; flex-direction:column; gap:16px; max-width:none; font-size:21px; line-height:28px; position:relative; }
.site-audience-words .f-audience-title[aria-current]::before { position:absolute; top:0; right:0; }
.site-audience-icon { display:block; color:var(--color-text-primary); }
@media(max-width:1000px) {
 .site-audience-words { display:block; }
 .site-audience-words .f-audience-title { display:grid; grid-template-columns:48px minmax(0,1fr); gap:20px; align-items:center; }
 .site-audience-words > li { margin-top:16px; padding-top:16px; }
}
/* New accepted variety and audience snapshots keep their job's ordinary text wrapping. */
.f-page :is(.v-page,.a2-page) p { text-wrap:wrap; }
.f-page :is(.v-page,.a2-page) h2 { letter-spacing:normal; }