/* Patton Contractors, round 8 run 3 (round 3): the commercial homepage ("Remodeling for working buildings").
   One owned device, used once: the P from Patton's own mark, cut straight out of the green with no outline,
   the whole letter inset at the top right of the opening, onto the door Patton moved. Archivo in three
   volumes and a quiet register: Poster (the h1 and the building names), Display 2, Title, Body, and the
   Label (wide, small, tracked capitals for terms, counters and legends). Four grounds with hard edges and
   one fine grain (green, stone, paper, night), each lit once: a warm glow on the green from the door's
   side, a falling light down the stone, one amber line beside the six on the night. Amber is light only
   (the chip on an action, a chosen option, that line) and stays under 5% of any screen. The homepage's
   colours are fixed: they don't follow the device's dark scheme, because each section's ground is the
   design. */

.working {
  --c-green: #3e5c59;
  --c-night: #0f1715;
  --c-stone: #e8e2d6;
  --c-stone-hi: #ece7dc;
  --c-stone-lo: #d9d1c1;
  --c-stone-2: #dfd8ca;
  --c-paper: #f5f2eb;
  --c-ink: #151c1a;
  --c-ink-2: #4a5652;
  --c-cream: #f3efe6;
  --c-cream-2: #c9d6d1;
  --c-mist: #a9b6b1;
  --c-num: #6f8c86;
  --c-amber: #eaa640;
  --m: 20px;
  /* The grain is one 256px noise tile at three strengths (green 3.5%, night 4%, stone and paper 3%),
     drawn at one tile pixel per device pixel so it reads as print, not felt. */
  --gs: 256px;
  --g-green: url('/assets/grain-35.png');
  --g-night: url('/assets/grain-40.png');
  --g-light: url('/assets/grain-30.png');
  /* The light (spec C): falling down the stone, and a warm glow on the green. */
  --stone-light: linear-gradient(180deg, var(--c-stone-hi), var(--c-stone-lo));
  /* site.css components on this page read these. */
  --ground: var(--c-green); --fg: var(--c-cream); --fg-2: var(--c-cream-2); --rule: rgb(243 239 230 / .22);
  --ink: var(--c-ink); --ink-2: var(--c-ink-2); --paper: var(--c-paper);
  background: var(--c-green);
  color: var(--c-cream);
  color-scheme: light;
  font-stretch: 100%;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
@media (min-resolution: 2dppx) { .working { --gs: 128px; } }
@media (min-resolution: 3dppx) { .working { --gs: 85.333px; } }
html:has(> body.working) { scroll-padding-top: 0; scrollbar-color: #6f8c86 #0f1715; background: #0f1715; }
.working ::selection { background: rgb(234 166 64 / .5); color: #151c1a; }
.working { caret-color: var(--c-green); accent-color: var(--c-green); }
.working :where(a, button, input, label):focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; box-shadow: none; }
.p-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* One width for the words: site.css's shared parts (the text links) set their own; here they take the page's. */
.working :is(.textlink, .skip) { font-stretch: 100%; }
.working .arrow { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: square; }
/* The italic survives once on the site: Patton's own words on its own photo. */
.working q { quotes: '\201C' '\201D'; font-style: italic; }

/* The chip: the logo's loose block, a parallelogram at the P's slope. It replaces every dot. */
.pchip { display: inline-block; flex: none; width: 9px; height: 10px; background: currentColor; clip-path: polygon(0 0, 100% 30%, 100% 100%, 0 70%); }
.pchip--amber { color: var(--c-amber); }

/* Grounds: one each, hard edges, one grain, one light. */
.hero, .close-pr, .sector--food { --ground: var(--c-green); --fg: var(--c-cream); --fg-2: var(--c-cream-2); --rule: rgb(243 239 230 / .22); color: var(--c-cream); }
.close-pr, .sector--food { background: var(--c-green) var(--g-green) 0 0 / var(--gs) var(--gs); }
.before, .util, .sector--care { --ground: var(--c-night); --fg: var(--c-cream); --fg-2: var(--c-mist); --rule: rgb(243 239 230 / .16); background: var(--c-night) var(--g-night) 0 0 / var(--gs) var(--gs); color: var(--c-cream); }
.sector--offices, .sector-homes { --ground: var(--c-stone); --fg: var(--c-ink); --fg-2: var(--c-ink-2); --rule: rgb(21 28 26 / .18); color: var(--c-ink); }
.sector--offices { background: var(--g-light) 0 0 / var(--gs) var(--gs), var(--stone-light); }
.proof, .sector--else { --ground: var(--c-paper); --fg: var(--c-ink); --fg-2: var(--c-ink-2); --rule: rgb(21 28 26 / .16); background: var(--c-paper) var(--g-light) 0 0 / var(--gs) var(--gs); color: var(--c-ink); }
.hero, .close-pr, .before { position: relative; }

/* ---------- Type: three volumes and a quiet register ---------- */
/* Poster: one per section (the h1, the building names); its sizes are set where it's used. */
.hero-title, .sector-name, .care-name { font-stretch: 100%; font-weight: 620; line-height: .9; letter-spacing: -0.04em; }
/* Display 2: one head per section. */
.d2 { margin: 0; font-stretch: 100%; font-weight: 600; line-height: .95; letter-spacing: -0.04em; font-size: clamp(34px, 10.3vw, 40px); text-wrap: balance; }
/* Title: job titles, the six points. */
.t, .settle b { font-stretch: 100%; font-weight: 600; line-height: 1.05; letter-spacing: -0.025em; font-size: 26px; }
/* Body: 16/1.5; a lede is two lines at most. */
.lede { margin: 0; font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--fg-2); max-width: 44ch; text-wrap: pretty; }
/* Label: wide, small, tracked capitals with tabular figures, in the ground's second colour. Spec terms,
   counters, legends, the band counters, the work note and the opening's list of buildings. */
.lab, .spec dt, .ph-count {
  font-stretch: 112%; font-weight: 600; font-size: 11px; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase;
  font-variant-numeric: tabular-nums; color: var(--fg-2);
}
.lab { margin: 0; }
@media (max-width: 359px) { .t, .settle b { font-size: 23px; } }
@media (min-width: 768px) { .d2 { font-size: clamp(52px, 6.11vw, 88px); } .lede { font-size: 18px; } }
@media (min-width: 1100px) {
  .t, .settle b { font-size: clamp(32px, 2.78vw, 40px); }
  .lede { font-size: 20px; }
  .working { font-size: 17px; }
  .lab, .spec dt, .ph-count { font-size: 12px; }
}

/* ---------- Header: the nameplate and one text link ---------- */
.working .site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 40; height: 64px; padding: 0 var(--m);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  --hb: transparent; --hc: var(--c-cream); --hg: none;
  background: var(--hb) var(--hg) 0 0 / var(--gs) var(--gs); color: var(--hc);
  /* Only colour crossfades: the size step (64 to 52) switches at once, so the band never re-lays-out mid-scroll. */
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.working .site-header[data-head='stone'] { --hb: var(--c-stone-hi); --hc: var(--c-ink); --hg: var(--g-light); }
.working .site-header[data-head='paper'] { --hb: var(--c-paper); --hc: var(--c-ink); --hg: var(--g-light); }
.working .site-header[data-head='night'] { --hb: var(--c-night); --hc: var(--c-cream); --hg: var(--g-night); }
.working .site-header[data-head='green'] { --hb: var(--c-green); --hc: var(--c-cream); --hg: var(--g-green); }
.working .site-header.is-up[data-head='hero'] { --hb: var(--c-green); --hc: var(--c-cream); --hg: var(--g-green); }
.working .site-header:is(:not([data-head='hero']), .is-up) { height: 52px; }
.working .nameplate { height: auto; min-height: 44px; padding: 6px 8px; border-radius: 7px; background: #fff; box-shadow: none; }
.working .nameplate img { width: 92px; height: auto; }
.working .site-header:is(:not([data-head='hero']), .is-up) .nameplate { min-height: 44px; padding: 5px 7px; }
.working .site-header:is(:not([data-head='hero']), .is-up) .nameplate img { width: 84px; }
.working .site-header :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; box-shadow: none; }
.hnav { display: flex; align-items: center; gap: 32px; }
.hnav a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: inherit; text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; }
.hnav a:hover { text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 1px; }
.hnav .arrow { width: 15px; height: 15px; }
.hnav-sec { display: none !important; }
/* One link in one place: "For homes" over the opening, "Tell Patton" past it, a 150ms crossfade. */
.hnav-swap { display: grid; justify-items: end; }
.hnav-swap > a { grid-area: 1 / 1; transition: opacity .15s var(--ease-out), visibility 0s linear 0s; }
.hnav-go { font-weight: 600 !important; }
.site-header[data-head='hero'] .hnav-go, .site-header:not([data-head='hero']) .hnav-homes { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s var(--ease-out), visibility 0s linear .15s; }
@media (min-width: 1100px) {
  .working .site-header { height: 72px; padding: 0 64px; }
  .working .nameplate img { width: 112px; }
  .hnav-sec { display: inline-flex !important; }
}

/* ---------- The P window ---------- */
/* The clip (#p-clip, objectBoundingBox) on a box at the mark's own 60:130. No outline: the P is the hole
   the ground leaves. --pw is the window's width. */
.p-win { position: relative; margin: 0; width: var(--pw); aspect-ratio: 60 / 130; }
.p-clip { position: absolute; inset: 0; overflow: hidden; clip-path: url(#p-clip); -webkit-clip-path: url(#p-clip); }
.p-clip img { display: block; width: 100%; height: 100%; object-fit: cover; }
.p-fill { position: absolute; inset: 0; }

/* ---------- The opening ---------- */
/* Phones (spec A): the whole P inset at the top right (right 20, top 72), the buildings it serves in the
   Label register beside its stem, the headline in cream in three lines below it, wholly outside it, and the
   action as a solid cream plate 24px off the bottom. All of it inside the first screen (100svh: the screen
   with the browser's bars showing) at 390x844, 390x664 and 320x568; the introduction just below it. */
.hero {
  container-type: inline-size; overflow: clip;
  --hs: clamp(48px, 16.4vw, 64px);
  --ph: calc(100svh - 194px - 2.7 * var(--hs));
  --pw: min(var(--ph) * 60 / 130, 100cqw - 130px);
  min-height: 100svh;
  padding: calc(100svh + 24px) var(--m) 72px;
  /* One warm light, from the door's side, held to the first screen. */
  background:
    var(--g-green) 0 0 / var(--gs) var(--gs),
    radial-gradient(70% 50% at 82% 8%, rgb(234 166 64 / .16), transparent 70%) 0 0 / 100% 100svh no-repeat,
    var(--c-green);
}
.hero-title { position: absolute; z-index: 1; left: var(--m); top: calc(100svh - 106px - 2.7 * var(--hs)); margin: 0; max-width: none; white-space: nowrap; font-size: var(--hs); color: var(--c-cream); }
.hero-kinds { position: absolute; left: var(--m); top: 88px; line-height: 22px; }
.hero-kinds span { display: block; }
.hero-p { position: absolute; z-index: 2; top: 72px; right: var(--m); }
/* The opening's photo settles toward the door's handle. */
.hero-p .p-fill img { transform-origin: 64% 45%; }
.hero-go {
  position: absolute; z-index: 3; left: var(--m); right: var(--m); top: calc(100svh - 80px);
  display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 18px; box-sizing: border-box;
  background: var(--c-cream); color: var(--c-ink); text-decoration: none; font-size: 16px; font-weight: 600; line-height: 1.2;
  -webkit-tap-highlight-color: transparent; transition: background-color .18s var(--ease-out);
}
.hero-go .arrow { margin-left: auto; transition: transform .25s var(--ease-out); }
.hero-go:active { background: #e4dfd4; }
@media (hover: hover) { .hero-go:hover { background: #fffbf2; } .hero-go:hover .arrow { transform: translateX(4px); } }
.hero-go:focus-visible { outline: 2px solid var(--c-cream); outline-offset: 3px; }
.hero-sub { position: relative; margin: 0; max-width: 40ch; font-size: 16px; line-height: 1.5; color: var(--c-cream-2); text-wrap: pretty; }
/* The narrowest phones: the plate's words stay on one line. */
@media (max-width: 359px) { .hero-go { gap: 10px; padding: 0 14px; font-size: 15px; letter-spacing: -0.005em; } }
/* Too short a screen for the list beside a P under 120px wide (320x568 and the like): the P alone. */
@media (max-width: 767px) and (max-height: 627px) { .hero-kinds { display: none; } }

/* The opening (spec B), once a session (the head script decides), 800ms from the moment the door photo has
   decoded (or 0.9s, whatever happens): at 0% a narrow strip of the doorway shows through the P; by 25% the
   green has withdrawn across the stem; by 50% the room fills most of the letter; by 75% the green is gone
   and the photo has settled from a 3.5% push toward the handle; at 100% it holds. The words and the plate
   never move. Clip-path and transform only. */
.p-arrive .hero-p .p-fill { clip-path: inset(0 88% 0 0); }
.p-arrive .hero-p .p-fill img { transform: scale(1.035); }
.p-arrive.p-go .hero-p .p-fill { animation: p-open .8s both; }
.p-arrive.p-go .hero-p .p-fill img { animation: p-settle .8s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes p-open { 0% { clip-path: inset(0 88% 0 0); animation-timing-function: cubic-bezier(.55, 0, .25, 1); } 75%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes p-settle { from { transform: scale(1.035); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .p-arrive .hero-p .p-fill, .p-arrive .hero-p .p-fill img { clip-path: none; transform: none; animation: none !important; }
}

/* Tablets: the phone's composition, larger, the plate at its own width. */
@media (min-width: 768px) {
  .hero {
    --m: 40px;
    --hs: clamp(64px, 10vw, 104px);
    --ph: calc(100svh - 244px - 2.7 * var(--hs));
    --pw: min(var(--ph) * 60 / 130, 100cqw - 280px);
  }
  .hero-p { top: 88px; }
  .hero-kinds { top: 104px; }
  .hero-title { top: calc(100svh - 128px - 2.7 * var(--hs)); }
  .hero-go { right: auto; width: 380px; top: calc(100svh - 96px); padding: 0 20px; }
  .hero-sub { font-size: 19px; }
}
/* Desktop (and phones turned sideways): the words at the left in one column (the list on one line, the
   160px headline, the introduction, the plate), the whole P at the right, never touching the headline:
   its width gives way first (5.2 x the headline size is "Remodeling"'s width, plus 48px of air; 100cqw
   here is the hero's content box, the 1312px column at 1440 and wider), and it is never drawn wider than
   the door photo's own 410px. */
@media (min-width: 1100px), (min-width: 600px) and (max-height: 560px) {
  .hero {
    --m: 64px;
    --hs: clamp(96px, min(11.1vw, 17.8svh), 160px);
    --ph: calc(100svh - 128px);
    --pw: min(var(--ph) * 60 / 130, 100cqw - 5.2 * var(--hs) - 48px, 410px);
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    padding: 96px max(64px, (100% - 1312px) / 2) 48px;
    background-size: var(--gs) var(--gs), 100% 100%, auto;
  }
  .hero > * { position: relative; left: auto; right: auto; top: auto; }
  .hero-kinds { order: 1; line-height: 1.3; }
  .hero-kinds span { display: inline; }
  .hero-kinds span + span::before { content: '\00b7'; margin: 0 .7em; }
  .hero-title { order: 2; margin-top: 18px; }
  .hero-sub { order: 3; margin-top: 30px; font-size: 20px; max-width: 470px; }
  .hero-go { order: 4; width: 380px; margin-top: clamp(32px, 7.8svh, 70px); }
  .hero-p { position: absolute; top: calc(72px + (100svh - 128px - var(--pw) * 130 / 60) / 2); right: max(64px, (100% - 1312px) / 2); left: auto; }
}
/* Phones turned sideways: smaller words, the P as tall as the screen allows, no list. */
@media (min-width: 600px) and (max-height: 560px) {
  .hero { --m: 24px; --hs: clamp(32px, 11svh, 56px); --ph: calc(100svh - 80px); padding: 72px 24px 24px; }
  .hero-p { top: 64px; right: 24px; }
  .hero-kinds { display: none; }
  .hero-title { margin-top: 0; }
  .hero-sub { font-size: 15px; max-width: 46ch; margin-top: 16px; }
  .hero-go { margin-top: 18px; width: 340px; }
}

/* ---------- Which building is yours: four bands ---------- */
/* Band 1, healthcare, on night, in type only: the section's head as a Label with its counter, one line,
   and the three healthcare buildings at Poster size on hairlines. */
.sector { position: relative; display: block; text-decoration: none; -webkit-tap-highlight-color: transparent; }
/* Arriving by its link, the section's first line clears the header band. */
.dir { scroll-margin-top: 52px; }
.sector-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.sector--care { padding: 28px var(--m) 32px; }
.care-note { margin: 18px 0 0; max-width: 34ch; font-size: 16px; line-height: 1.45; color: var(--c-mist); text-wrap: pretty; }
.care-list { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.care-list li { border-bottom: 1px solid var(--rule); }
.care-list a { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 16px 0 16px; color: var(--c-cream); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.care-words { display: grid; gap: 8px; min-width: 0; }
.care-name { font-size: clamp(39px, 12.3vw, 48px); text-wrap: balance; }
.care-rooms { font-size: 14px; line-height: 1.35; color: var(--c-mist); }
.care-list .arrow { width: 22px; height: 22px; margin-bottom: 2px; color: var(--c-cream); transition: transform .25s var(--ease-out); }
.care-list a:active .arrow { transform: translateX(4px); }
@media (hover: hover) { .care-list a:hover .care-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; } .care-list a:hover .arrow { transform: translateX(6px); } }
.care-list a:focus-visible { outline: 2px solid var(--c-cream); outline-offset: -2px; }
/* Bands 2 to 4: the counter at the top right, the name at Poster size, the rooms and "Start" at the foot,
   and a surface Patton laid bleeding off the right edge, its top cut at the P's own slope (18 across 51). */
.sector--photo {
  /* One column that never grows to a long name, so every counter lines up at the same place. */
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(16px, 1fr) auto auto; min-height: 340px; padding: 24px var(--m); box-sizing: border-box; overflow: hidden;
  color: var(--fg);
  --phw: 50vw; --phh: 220px;
}
.sector-n { grid-row: 1; justify-self: end; }
.sector-name { grid-row: 2; margin: 10px 0 0; font-size: clamp(46px, 14.9vw, 58px); font-weight: 640; text-wrap: balance; position: relative; z-index: 1; }
.sector-rooms { grid-row: 4; margin: 0; max-width: calc(var(--phw) - var(--m) - 16px); font-size: 15px; line-height: 1.35; color: var(--fg-2); text-wrap: pretty; }
.sector-go { grid-row: 5; display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; min-height: 24px; font-size: 15px; font-weight: 600; color: var(--fg); }
.sector-go .arrow { width: 16px; height: 16px; transition: transform .25s var(--ease-out); }
/* The narrowest phones: "Start" alone, clear of the photo. */
@media (max-width: 359px) { .go-more { display: none; } }
/* Its own layer, so the browser rasters the photo ahead of the scroll (a cold 2x-CPU phone probe showed two
   or three frames over 20ms as each band's photo first came into view; fewer with the layer). */
.sector-ph { position: absolute; right: 0; bottom: 0; width: var(--phw); height: var(--phh); overflow: hidden; clip-path: polygon(0 0, 100% calc(var(--phw) * 18 / 51), 100% 100%, 0 100%); background: #2a3532; will-change: transform; }
.sector-ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .18s var(--ease-out); }
/* A press answers in the picture only (spec B): the surface gives a step; the words stay still. */
.sector--photo:active .sector-ph img { transform: scale(.99); }
.sector--photo:active .sector-go .arrow { transform: translateX(4px); }
@media (hover: hover) { .sector--photo:hover .sector-go .arrow { transform: translateX(6px); } .sector--photo:hover .sector-name { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .1em; } }
.sector--photo:focus-visible { outline: 2px solid var(--fg); outline-offset: -6px; }
.sector-homes {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 0 var(--m); box-sizing: border-box;
  background: var(--g-light) 0 0 / var(--gs) var(--gs), var(--stone-light) 0 0 / 100% 340px no-repeat, var(--c-stone-hi);
  border-top: 1px solid var(--rule); color: var(--c-ink); text-decoration: none; font-size: 17px; font-weight: 600;
}
.sector-homes .arrow { width: 20px; height: 20px; color: var(--c-green); transition: transform .25s var(--ease-out); }
.sector-homes:active .arrow { transform: translateX(4px); }
@media (hover: hover) { .sector-homes:hover .arrow { transform: translateX(6px); } }
.sector-homes:focus-visible { outline: 2px solid var(--c-ink); outline-offset: -4px; }
@media (min-width: 768px) {
  .sector--care, .sector--photo, .sector-homes { padding-left: 40px; padding-right: 40px; }
  .sector--photo { --phw: 44vw; --phh: 260px; min-height: 360px; }
  .sector-name { max-width: none; white-space: nowrap; }
  .sector-rooms { font-size: 16px; }
}
/* Desktop (spec A): bands 320 tall; the names at up to 120px on one line; the surface 40vw wide (at most
   600px: the restaurant floor's file is 613px wide), full height, its left edge cut at the P's slope;
   healthcare as a 5/7 grid, the names at 88px. */
@media (min-width: 1100px) {
  .sector--care { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; padding: 48px max(64px, (100% - 1312px) / 2) 56px; }
  .care-list { margin: 0; }
  .care-name { font-size: min(88px, 6.12vw); }
  .care-rooms { font-size: 16px; }
  .care-list a { padding: 18px 0 20px; }
  .care-head { padding-top: 6px; }
  .care-note { font-size: 18px; }
  .sector--photo {
    --phw: min(40vw, 600px); height: 320px; min-height: 0;
    padding: 40px calc(var(--phw) + 40px) 40px max(64px, (100% - 1312px) / 2);
  }
  .sector-name { margin-top: 18px; font-size: min(120px, 8.34vw); }
  .sector-rooms { max-width: 420px; font-size: 17px; }
  .sector-go { display: none; }
  .sector-ph { top: 0; height: auto; clip-path: polygon(calc(320px * 18 / 51) 0, 100% 0, 100% 100%, 0 100%); }
  .sector-homes { padding: 0 max(64px, (100% - 1312px) / 2); font-size: 18px; min-height: 72px; }
}

/* ---------- Patton's work ---------- */
/* The restroom leads at full width (one finished photo, its Label row, the title at 34px, the spec row and
   one link); the other three jobs are rails of squares, the finished frame first, the next one peeking.
   The rails are the browser's own sideways scroll with snap points: nothing follows the finger in script. */
.proof { padding: 88px 0 40px; }
.work-head { display: grid; gap: 14px; padding: 0 var(--m); margin-bottom: 40px; }
.work-note .nw { white-space: nowrap; }
.job { position: relative; min-width: 0; }
.job-title { margin: 0 var(--m) 16px; color: var(--c-ink); text-wrap: balance; }
.ph { position: relative; margin: 0; }
.ph figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 10px 0 0; font-size: 13px; line-height: 1.35; color: var(--c-ink-2); }
.ph-words { min-width: 0; text-wrap: pretty; }
.ph figcaption b { color: var(--c-ink); margin-right: 4px; font-weight: 600; }
.ph-count { flex: none; }
/* The lead. */
.job--lead { margin-bottom: 64px; }
/* The photo and its button share one grid cell, so the button covers exactly the photo at every size. */
.ph--lead { display: grid; }
.ph--lead img, .ph--lead .ph-open { grid-area: 1 / 1; }
.ph--lead figcaption { grid-area: 2 / 1; }
.ph--lead img { display: block; width: 100%; height: auto; aspect-ratio: 1036 / 1554; object-fit: cover; background: #2a2622; }
.ph--lead figcaption { padding: 12px var(--m) 0; }
.job--lead .job-title { margin: 22px var(--m) 0; font-size: 34px; font-weight: 620; line-height: 1; letter-spacing: -0.035em; }
.job-body > .spec { margin-top: 20px; }
.job-more[hidden] { display: none; }
/* The rails. */
.jobs { display: grid; row-gap: 64px; }
.rail {
  /* The end padding lets the last card reach the start position too, so its caption sits under the mask's
     window like every other card's (without it the last card stopped 16px short and lost its count). */
  list-style: none; margin: 0; padding: 0 calc(100% - var(--rp) - var(--rw)) 0 var(--rp); display: flex; gap: 8px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rp);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  /* A card is the screen less the margin, the gap and a 28px peek of the next (334px at 390). */
  --rp: var(--m);
  --rw: calc(100vw - var(--m) - 36px);
  /* The photos show across the rail; the captions only across the card at the start (spec A, narrowed to
     the card itself in round 3), so neither the next card's caption nor the last one's tail meets it. */
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% var(--rw) no-repeat, linear-gradient(#000 0 0) var(--rp) 100% / var(--rw) calc(100% - var(--rw)) no-repeat;
  mask: linear-gradient(#000 0 0) 0 0 / 100% var(--rw) no-repeat, linear-gradient(#000 0 0) var(--rp) 100% / var(--rw) calc(100% - var(--rw)) no-repeat;
}
.rail::-webkit-scrollbar { display: none; }
.rail > li { flex: none; width: var(--rw); scroll-snap-align: start; }
.rail .ph img { display: block; width: 100%; height: var(--rw); object-fit: cover; background: #dcd6c9; }
/* The work column is the widest, so "Curbless shower, grab bars" breaks once, not twice. */
.spec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.45fr); gap: 12px; margin: 22px var(--m) 0; }
.spec > div { border-top: 1px solid var(--c-ink); padding-top: 8px; }
.spec dt { color: var(--c-ink-2); }
.spec dd { margin: 6px 0 0; font-size: 15px; line-height: 1.3; font-weight: 450; color: var(--c-ink); text-wrap: balance; }
.job .textlink { margin: 14px var(--m) 0; color: var(--c-ink); font-size: 16px; }
.textlink .arrow { width: 16px; height: 16px; }
/* "Next" for a mouse (a finger swipes the rail itself). */
.rail-next { display: none; }
@media (hover: hover) and (pointer: fine) {
  .rail-next {
    position: absolute; top: -10px; right: var(--m); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0;
    border: 0; background: none; color: var(--c-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .35em;
  }
  .rail-next .arrow { width: 16px; height: 16px; transition: transform .25s var(--ease-out); }
  .rail-next:hover .arrow { transform: translateX(3px); }
  .rail-next.is-back .arrow { transform: scaleX(-1); }
  .rail-next:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }
}

/* A tap on any photo opens it larger (the button is added by the script). It covers exactly the photo,
   and the caption stays plain text under it. */
.ph-open { position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: var(--rw); padding: 0; border: 0; background: none; cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.ph--lead .ph-open { position: relative; width: auto; height: auto; }
.ph-open:focus-visible { outline: 2px solid var(--c-ink); outline-offset: -2px; }
.ph.is-lifted img { opacity: 0; }
@media (hover: hover) { .ph img { transition: filter .25s var(--ease-out); } .ph:has(.ph-open:hover) img { filter: brightness(1.05); } }

@media (min-width: 768px) {
  .proof { padding-top: 120px; }
  .work-head { padding: 0 40px; margin-bottom: 56px; }
  .rail { --rw: min(440px, calc(100vw - var(--m) - 72px)); }
  .ph--lead { margin: 0 40px; }
  .ph--lead img { aspect-ratio: 4 / 5; }
  .ph--lead figcaption { padding-left: 0; padding-right: 0; }
  .job--lead .job-title, .job-body > .spec, .job--lead .textlink { margin-left: 40px; margin-right: 40px; }
}
/* Desktop: the lead as a 600x800 photo with the title and the spec in a column beside it; then the three
   rails in a row, 360px squares with a peek, their titles, rails, specs and links level (subgrid). */
@media (min-width: 1100px) {
  .proof { padding: 140px 0 120px; }
  .work-head { padding: 0 64px; max-width: 1440px; margin: 0 auto 72px; box-sizing: border-box; }
  .job--lead {
    display: grid; grid-template-columns: 600px minmax(0, 1fr); column-gap: 64px; align-items: end;
    max-width: 1440px; margin: 0 auto 120px; padding: 0 64px; box-sizing: border-box;
  }
  .ph--lead { margin: 0; }
  .ph--lead img { width: 600px; height: 800px; aspect-ratio: auto; }
  .ph--lead figcaption { padding-top: 14px; }
  .job-body { padding-bottom: 46px; }
  .job--lead .job-title { margin: 0 0 40px; font-size: clamp(64px, 6.11vw, 88px); line-height: .95; letter-spacing: -0.04em; }
  .job-body > .spec { grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; max-width: 520px; }
  .job-body > .spec > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: baseline; padding: 14px 0 16px; }
  .job-body > .spec dd { margin: 0; font-size: 18px; }
  .job--lead .textlink { margin: 24px 0 0; }
  .jobs { max-width: 1440px; margin: 0 auto; padding: 0 64px; box-sizing: border-box; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
  .jobs .job-title, .jobs .spec, .jobs .job > .textlink { margin-left: 0; margin-right: 0; }
  .jobs .job-title { font-size: 32px; }
  /* Each job is four rows of the row's grid (subgrid), so a title that takes two lines keeps its
     neighbours' rails level with its own. */
  .jobs .job { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; align-content: start; }
  .jobs .job > .job-title { grid-column: 1 / -1; grid-row: 1; align-self: end; margin-bottom: 18px; }
  .jobs .job > .rail { grid-column: 1 / -1; grid-row: 2; }
  .jobs .job > .spec { grid-column: 1 / -1; grid-row: 3; align-self: start; }
  .jobs .job > .textlink { grid-column: 1; grid-row: 4; justify-self: start; align-self: start; }
  .jobs .job > .rail-next { position: static; grid-column: 2; grid-row: 4; align-self: start; margin: 6px 0 0 16px; }
  .rail { --rp: 0px; --rw: min(360px, (min(100vw, 1440px) - 176px) / 3 - 48px); }
  .spec dd { font-size: 16px; }
}

/* ---------- Before anyone starts (night) ---------- */
.before { padding: 88px var(--m); color-scheme: dark; }
.before-grid { display: grid; gap: 48px; }
.before-head { display: grid; gap: 18px; align-content: start; }
.before .d2 { color: var(--c-cream); }
.before .lede { color: var(--c-mist); }
/* A real Patton job caught halfway: the wall tile going up, spacers still in. One crop of the
   shipped photo (its right 1040 x 667 px), full bleed on phones. */
.band { margin: 10px calc(-1 * var(--m)) 0; }
.band-crop { position: relative; overflow: hidden; aspect-ratio: 1040 / 667; background: #1b2422; }
.band-crop img { position: absolute; right: 0; bottom: 0; width: 125%; max-width: none; height: auto; }
.band figcaption { padding: 10px var(--m) 0; font-size: 13px; line-height: 1.4; color: var(--c-mist); }
.keep-six {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 20px; padding: 0; border: 0; background: none; color: var(--c-cream);
  font: inherit; font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 1px; cursor: pointer;
}
.keep-six svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.before .keep-six:focus-visible { outline: 2px solid var(--c-cream); outline-offset: 3px; }
/* The six, numbered at Title size in a 56px margin column; one amber line in the gutter beside them,
   drawn top to bottom once when they arrive (the script; without it, the line is simply there). */
.before-list { min-width: 0; --beam-x: calc(-1 * var(--m) / 2); }
.settle-wrap { position: relative; }
.beam { position: absolute; left: var(--beam-x); top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, var(--c-amber), rgb(234 166 64 / .85) 70%, rgb(234 166 64 / 0)); transform-origin: 50% 0; pointer-events: none; }
.pr-ready .beam:not(.is-on) { transform: scaleY(0); }
.settle { list-style: none; margin: 0; padding: 0; counter-reset: s; border-top: 1px solid var(--rule); }
.settle li { display: grid; grid-template-columns: 56px minmax(0, 1fr); padding: 20px 0 22px; border-bottom: 1px solid var(--rule); }
.settle li::before {
  counter-increment: s; content: counter(s, decimal-leading-zero); grid-row: 1 / span 2;
  font-weight: 600; font-size: 26px; line-height: 1.05; letter-spacing: -0.025em; color: var(--c-num); font-variant-numeric: tabular-nums;
}
.settle b { color: var(--c-cream); text-wrap: balance; }
.settle span { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--c-mist); max-width: 42ch; }
@media (max-width: 359px) { .settle li { grid-template-columns: 48px minmax(0, 1fr); } .settle li::before { font-size: 23px; } }
@media (min-width: 768px) {
  .before { padding: 120px 40px; }
  .before-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
  .before-head { position: sticky; top: 92px; }
  .before-list { --beam-x: -32px; }
  .band { margin: 12px 0 0; max-width: 520px; }
  .band figcaption { padding-left: 0; padding-right: 0; }
}
@media (min-width: 1100px) {
  .before { padding: 140px 64px; }
  .before-grid { max-width: 1312px; margin: 0 auto; column-gap: 24px; grid-template-columns: minmax(0, 5fr) minmax(0, 1fr) minmax(0, 6fr); }
  .before-list { grid-column: 3; --beam-x: -64px; }
  .settle li { grid-template-columns: 88px minmax(0, 1fr); padding: 26px 0 28px; }
  .settle li::before { font-size: clamp(32px, 2.78vw, 40px); }
  .settle span { font-size: 17px; }
}

/* ---------- What's the work (green), then one colophon line ---------- */
/* A soft warm glow behind the choices: the close is lit like the opening. */
.close-pr {
  padding: 88px var(--m) 32px;
  background:
    var(--g-green) 0 0 / var(--gs) var(--gs),
    radial-gradient(60% 34% at 72% 58%, rgb(234 166 64 / .12), transparent 72%),
    var(--c-green);
}
.close-grid { display: grid; }
.close-form { display: grid; gap: 18px; align-content: start; }
.close-form .d2 { color: var(--c-cream); }
.close-form .lede { color: var(--c-cream-2); }
.pick { display: grid; gap: 32px; margin-top: 14px; }
.pick-q { margin: 0; padding: 0; border: 0; min-width: 0; }
.pick-q legend { padding: 0; margin-bottom: 12px; color: var(--c-cream-2); }
.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
.opt { position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; border-top: 1px solid var(--rule); cursor: pointer; font-size: 16px; line-height: 1.2; color: var(--c-cream); }
.opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opt .pchip { color: rgb(201 214 209 / .45); transition: color .2s var(--ease-out), transform .2s var(--ease-out); }
.opt:has(input:checked) { color: #fff; font-weight: 600; }
.opt:has(input:checked) .pchip { color: var(--c-amber); transform: scale(1.2); }
.opt:has(input:focus-visible) { outline: 2px solid var(--c-cream); outline-offset: 2px; }
@media (hover: hover) { .opt:hover .pchip { color: var(--c-cream-2); } .opt:has(input:checked):hover .pchip { color: var(--c-amber); } }
/* The Start block, square like every block: the line says what is chosen, whole words at a time;
   Start opens the inquiry. On phones it docks at the thumb while the choices scroll by. */
.startb {
  display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 6px 6px 6px 18px;
  background: var(--c-cream); color: var(--c-ink); box-shadow: 0 14px 30px -16px rgb(0 0 0 / .5);
}
.start-line { flex: 1; min-width: 0; margin: 0; display: flex; align-items: center; gap: 12px; }
.start-words { display: grid; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.2; }
.start-bldg { font-size: 13px; font-weight: 450; color: var(--c-ink-2); }
.start-go {
  flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px 0 16px; border: 0;
  background: var(--c-ink); color: var(--c-cream); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
  transition: transform .18s var(--ease-out);
}
.start-go .arrow { transition: transform .25s var(--ease-out); }
@media (hover: hover) { .start-go:hover .arrow { transform: translateX(3px); } }
.start-go:active { transform: scale(.98); }
.start-go:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }
@media (max-width: 767px), (pointer: coarse) and (max-height: 560px) {
  .startb { position: sticky; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 3; }
}
@view-transition { navigation: auto; }
@media (min-width: 901px) { .startb { view-transition-name: ticket; } }
/* Who Patton is, and its one email: one line under the form. */
.colophon { margin: 56px 0 0; padding-top: 18px; border-top: 1px solid var(--rule); font-style: normal; font-size: 14px; line-height: 1.6; color: var(--c-cream-2); }
.colophon b { color: var(--c-cream); font-weight: 600; }
.colophon a { color: var(--c-cream); text-underline-offset: .25em; display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 767px) { .colophon .colo-sep--2 { display: none; } .colophon a { display: flex; width: fit-content; } }
@media (min-width: 768px) { .close-pr { padding: 120px 40px 40px; } }
@media (min-width: 1100px) {
  .close-pr { padding: 140px 64px 48px; background-position: 0 0, 0 0, 0 0; }
  /* The question and its lede at the left, the choices and the Start block at the right, over the glow. */
  .close-grid { max-width: 1312px; margin: 0 auto; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .close-form { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: 20px; align-items: start; }
  .close-form > .d2 { grid-column: 1 / 6; grid-row: 1; }
  .close-form > .lede { grid-column: 1 / 6; grid-row: 2; max-width: 30ch; }
  .close-form > .pick { grid-column: 7 / 13; grid-row: 1 / span 3; margin-top: 10px; }
  .colophon { grid-column: 1 / -1; margin-top: 96px; }
}

/* ---------- Footer: one night utility row ---------- */
.working .site-footer { padding: 0; border: 0; }
.util { display: flex; flex-wrap: wrap; align-items: center; column-gap: 22px; padding: 8px var(--m) max(8px, env(safe-area-inset-bottom)); min-height: 44px; }
.util a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-mist); font-size: 13px; text-decoration: none; }
.util a:hover { color: var(--c-cream); text-decoration: underline; text-underline-offset: .3em; }
.util a:last-child { color: var(--c-cream); }
@media (min-width: 1100px) { .util { padding: 0 64px; column-gap: 32px; } .util a:last-child { margin-left: auto; } }

/* ---------- The viewer: a tap on any job photo, larger ---------- */
/* While it is up the page can't scroll; the gutter stays reserved, so nothing under it shifts. */
html.viewer-on { overflow: hidden; scrollbar-gutter: stable; background: rgb(9 14 13); }
.viewer.is-pulling :is(.viewer-top, .viewer-bottom, .viewer-slide figcaption) { opacity: 0; transition: opacity .15s; }
.viewer {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  display: none; grid-template-rows: auto minmax(0, 1fr) auto; background: rgb(9 14 13 / var(--fade, 1)); color: #f3efe6;
  overscroll-behavior: contain;
}
.viewer[open] { display: grid; }
.viewer::backdrop { background: transparent; }
.viewer-top, .viewer-bottom {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 10px max(18px, env(safe-area-inset-left));
}
.viewer-bottom { grid-template-columns: auto minmax(0, 1fr) auto; padding: 10px max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
.viewer-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: rgb(243 239 230 / .9); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.viewer-count { margin: 0; font-stretch: 112%; font-weight: 600; font-size: 12px; letter-spacing: .12em; color: rgb(243 239 230 / .72); font-variant-numeric: tabular-nums; }
/* Close and the arrows: plain marks on the night, no grey squares. */
.viewer-close, .viewer-step {
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0;
  background: none; color: #f3efe6; cursor: pointer; transition: opacity .2s;
}
.viewer-close svg, .viewer-step svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; }
.viewer-step:disabled { opacity: .28; cursor: default; }
.viewer :is(.viewer-close, .viewer-step):focus-visible { outline: 2px solid #f3efe6; outline-offset: -4px; }
.viewer-hint { margin: 0; text-align: center; font-size: 13px; color: rgb(243 239 230 / .5); }
.viewer-track {
  display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none;
  touch-action: pan-x pinch-zoom; outline: none;
}
.viewer-track::-webkit-scrollbar { display: none; }
.viewer-slide {
  flex: none; width: 100%; height: 100%; margin: 0; scroll-snap-align: center; scroll-snap-stop: always;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 0 12px;
  box-sizing: border-box;
}
/* The whole photo with its caption right under it. The script sizes it to the space left, never
   larger than its file. */
.viewer-slide img { flex: none; object-fit: cover; box-shadow: 0 30px 60px -30px rgb(0 0 0 / .8); }
.viewer-slide figcaption { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 8px; max-width: 42ch; text-align: center; font-size: 15px; line-height: 1.4; color: rgb(243 239 230 / .86); }
.viewer-slide figcaption b { font-size: 13px; font-weight: 600; color: var(--c-amber, #eaa640); margin-right: 4px; }
.viewer-slide .ph-count { display: none; }
@media (max-height: 560px) {
  .viewer-slide { flex-direction: row; gap: 20px; padding: 0 64px; }
  .viewer-slide figcaption { text-align: left; max-width: 22ch; justify-content: flex-start; }
}
@media (min-width: 768px) {
  .viewer-slide { padding: 0 84px 24px; }
  .viewer-bottom { position: absolute; left: 0; right: 0; top: calc(50% - 24px); padding: 0 20px; pointer-events: none; }
  .viewer-bottom .viewer-step { pointer-events: auto; }
  .viewer-step[data-viewer-step='1'] { grid-column: 3; }
  .viewer-hint { visibility: hidden; }
}