/* Halden & Roe: Projects index, Studio and Process pages (projects.html, studio.html, process.html).
   Both open on a green cover sheet (the Home hero's ground) holding a line drawing that draws itself:
   a key plan of the projects on Projects, a plan of the studio on Studio. js/pages.js runs the drawing,
   the hover readouts, the projects register and the filter. */

:root { --forest: #1F2E44; --forest-ink: #D6DEE9; --peach: #E58A6B; }

/* ---------- Line drawing that draws itself (cover drawings, register elevations, belief details) ---------- */
/* Only under html.draw-anim (motion allowed + JS); otherwise every drawing shows complete. Groups stagger via --d. */
html.draw-anim .draw [pathLength] { stroke-dasharray: 1 2; stroke-dashoffset: 1.01; }
html.draw-anim .draw.is-drawn [pathLength] {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--dur, .7s) cubic-bezier(.45, .05, .35, 1) var(--d, 0s);
}
/* styles.css hides .elev strokes under .elev-anim (for GSAP's elevations.js, not used here): undo that */
html:not(.draw-anim) .draw [pathLength] { stroke-dasharray: none; stroke-dashoffset: 0; }
.draw .el-structure { --d: .2s; }
.draw .el-openings { --d: .45s; }
.draw .el-details, .draw .el-accent { --d: .7s; }

/* ---------- Cover sheet ---------- */
.cover {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--forest); color: var(--paper);
  min-height: clamp(560px, calc(100svh - 77px), 1000px);
  display: grid; align-items: center;
}
/* The Home hero's floor-plan linework, light on the green */
.cover::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../images/hero-plan.webp") left top / cover no-repeat;
  background-image: image-set(url("../images/hero-plan.avif") type("image/avif"), url("../images/hero-plan.webp") type("image/webp"));
  filter: invert(1); mix-blend-mode: screen; opacity: .07;
}
.cover .wrap {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  padding-block: clamp(2.5rem, 2rem + 3vw, 5rem);
}
.cover .crumbs, .cover .crumbs a, .cover .label { color: var(--forest-ink); }
.cover .crumbs li + li::before { color: #7F978C; }
.cover .crumbs a:hover { color: var(--paper); }
.cover h1 { font-size: clamp(2.7rem, 1.5rem + 4.2vw, 5.4rem); line-height: 1; letter-spacing: -.02em; margin-bottom: clamp(1rem, .8rem + 1vw, 1.75rem); }
.cover-sub { color: var(--forest-ink); font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); line-height: 1.6; max-width: 30em; margin: 0; }
.cover :focus-visible { outline-color: var(--paper); }

.cover-art { position: relative; margin: 0; }
.cover-art svg { width: 100%; height: auto; overflow: visible; }
/* Registration corners, as on the Home hero */
.cover-art::before, .cover-art::after {
  content: ""; position: absolute; width: 18px; height: 18px; border: 0 solid var(--peach); pointer-events: none;
}
.cover-art::before { top: -8px; left: -8px; border-width: 1px 0 0 1px; }
.cover-art::after { bottom: -8px; right: -8px; border-width: 0 1px 1px 0; }
.cover-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 1rem; }
.cover-foot .label { margin: 0; }
.readout { color: var(--paper) !important; min-height: 1.5em; }

/* Drawing on the green: paper lines, peach for the redline marks */
.cover-art path, .cover-art rect, .cover-art circle, .cover-art ellipse {
  fill: none; stroke: var(--paper); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
/* No vector-effect: non-scaling-stroke here; Chrome then measures the dashes in screen space and the draw stops short */
.cover-art .thin path, .cover-art .thin rect, .cover-art .thin circle, .cover-art .thin ellipse { stroke-width: 1.1; opacity: .55; }
.cover-art .heavy path, .cover-art path.heavy { stroke-width: 2.6; }
.cover-art .redline path { stroke: var(--peach); }
.cover-art .dash { stroke-dasharray: 4 5 !important; stroke-dashoffset: 0 !important; }
.cover-art text { fill: var(--forest-ink); font: 400 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.cover-art text.name { fill: var(--paper); font: 400 15px var(--serif); letter-spacing: 0; text-transform: none; }
.cover-art .halo { paint-order: stroke; stroke: var(--forest); stroke-width: 5px; stroke-linejoin: round; }

/* Hot spots (map pins, desks): peach dot + ring; the ring opens on hover/focus */
.pt { cursor: pointer; outline: none; }
.pt .pt-dot { fill: var(--peach); stroke: none; }
.pt .pt-ring { stroke: var(--peach); stroke-width: 1.2; opacity: .55; transform-box: fill-box; transform-origin: center; transition: transform .4s var(--ease), opacity .4s var(--ease); }
.pt text { fill: var(--paper); }
.pt:hover .pt-ring, .pt:focus-visible .pt-ring, .pt.is-on .pt-ring { transform: scale(1.6); opacity: 1; }
.pt:focus-visible .pt-dot { stroke: var(--paper); stroke-width: 2; }
html.draw-anim .cover-art .pt { opacity: 0; transition: opacity .6s var(--ease) var(--pd, 1.6s); }
html.draw-anim .cover-art .draw.is-drawn .pt { opacity: 1; }
.cover-copy > * { margin-top: 0; }
html.draw-anim .cover-copy > * { opacity: 0; transform: translateY(14px); }
html.draw-anim .cover.is-in .cover-copy > * { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform .9s var(--ease); }
html.draw-anim .cover.is-in .cover-copy > :nth-child(2) { transition-delay: .12s; }
html.draw-anim .cover.is-in .cover-copy > :nth-child(3) { transition-delay: .3s; }
html.draw-anim .cover.is-in .cover-copy > :nth-child(4) { transition-delay: .45s; }

@media (max-width: 900px) {
  .cover { min-height: 0; }
  .cover .wrap { grid-template-columns: 1fr; }
  .cover-art { max-width: 620px; }
}
.cover-index { margin-top: 1.25rem !important; }
/* The drawing scales down to about half on phones: keep its labels readable */
@media (max-width: 600px) {
  .cover-art text { font-size: 17px; }
  .cover-art text.name { font-size: 22px; }
}

/* ---------- Projects: the drawing register ---------- */
.reg-head { display: flex; align-items: end; justify-content: space-between; gap: 1.25rem 2rem; flex-wrap: wrap; margin-bottom: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
.reg-head p { color: var(--ink-soft); max-width: 34em; margin: .9rem 0 0; }
.reg-filter { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.reg-filter button {
  font: 400 .72rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); background: transparent; border: 1px solid var(--rule); padding: .6rem .8rem; cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.reg-filter button:hover { border-color: var(--rule-strong); color: var(--ink); }
.reg-filter button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.reg-filter .count { color: var(--red); margin-left: .35em; }
.reg-filter button[aria-pressed="true"] .count { color: var(--peach); }

/* Base (phones, tablets, no JS): a plain list, each project's sheet straight under its row */
.register { list-style: none; margin: 0; padding: 0; }
.register > li { margin-bottom: clamp(2rem, 1.5rem + 3vw, 3rem); }
.register > li[hidden] { display: none; }

.reg-row {
  position: relative;
  display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) auto; column-gap: 1rem; row-gap: .3rem; align-items: baseline;
  padding: 1.35rem 0; border-top: 1px solid var(--rule);
  transition: background-color .35s var(--ease);
}
.reg-no { grid-row: span 2; transition: color .3s var(--ease); }
.reg-title { font-size: clamp(1.35rem, 1.15rem + .7vw, 1.85rem); margin: 0; }
.reg-title a { text-decoration: none; color: inherit; }
.reg-year { color: var(--ink-soft); }
.reg-meta { grid-column: 2 / -1; color: var(--ink-soft); font-size: .98rem; }

.reg-sheet {
  position: relative; margin: 0; border: 1px solid var(--rule); background: var(--paper);
  aspect-ratio: 640 / 300; display: grid; place-items: center;
}
.reg-sheet > .label { position: absolute; left: .85rem; top: .7rem; font-size: .66rem; }
.reg-sheet::before, .reg-sheet::after { content: ""; position: absolute; width: 16px; height: 16px; border: 0 solid var(--red); pointer-events: none; }
.reg-sheet::before { top: 7px; right: 7px; border-width: 1px 1px 0 0; }
.reg-sheet::after { bottom: 7px; left: 7px; border-width: 0 0 1px 1px; }

/* The sheet's title block under the drawing */
.reg-block { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--ink); border-top: 0; margin: 0; }
.reg-block > div { padding: .7rem .9rem; border-right: 1px solid var(--ink); min-width: 0; }
.reg-block > div:last-child { border-right: 0; }
.reg-block dt { font: 400 .64rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .25rem; }
.reg-block dd { margin: 0; font-size: .95rem; }
.reg-text { padding-top: 1.25rem; }
.reg-text p { color: var(--ink-soft); max-width: 36em; margin: 0 0 1rem; font-size: clamp(1.02rem, .98rem + .25vw, 1.15rem); line-height: 1.6; }
.reg-text p:last-child { margin: 0; }
@media (max-width: 560px) {
  .reg-block { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reg-block > div:nth-child(2) { border-right: 0; }
  .reg-block > div:nth-child(-n+2) { border-bottom: 1px solid var(--ink); }
  .reg-row { grid-template-columns: 3.6rem minmax(0, 1fr) auto; }
}

/* Desktop with JS (.is-live, set by js/pages.js): rows on the left; every project's sheet sits in the
   right column, stacked in one sticky cell, and only the active one shows */
@media (min-width: 901px) {
  .register.is-live {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: repeat(6, auto);
    column-gap: clamp(2rem, 5vw, 5.5rem); align-items: start;
  }
  .is-live > li { display: contents; }
  .is-live > li[hidden] { display: none; }
  .is-live .reg-row { grid-column: 1; padding-right: .25rem; }
  .is-live .reg-row.is-last { border-bottom: 1px solid var(--rule); }
  .is-live .reg-title a::after { content: ""; position: absolute; inset: 0; } /* whole row is the target */
  .is-live .reg-title a:focus-visible { outline: 0; }
  .is-live .reg-row:has(a:focus-visible) { outline: 2px solid var(--red); outline-offset: 3px; }
  .is-live .reg-row .reg-no::before {
    content: ""; position: absolute; left: -1rem; top: 1.35rem; bottom: 1.35rem; width: 2px;
    background: var(--red); transform: scaleY(0); transition: transform .4s var(--ease);
  }
  .is-live .reg-row.is-active { background: var(--paper-deep); }
  .is-live .reg-row.is-active .reg-no { color: var(--red); }
  .is-live .reg-row.is-active .reg-no::before { transform: none; }
  .is-live .reg-row:not(.is-active) .reg-title a:hover { color: var(--red-deep); }
  /* A red leader line from the active row across to its drawing, like a callout */
  .is-live .reg-row::after {
    content: ""; position: absolute; top: 50%; left: 100%; width: clamp(2rem, 5vw, 5.5rem); height: 1px;
    background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
  }
  .is-live .reg-row.is-active::after { transform: none; }

  .is-live .reg-detail {
    grid-column: 2; grid-row: 1 / -1; align-self: start;
    position: sticky; top: 104px;
    visibility: hidden; opacity: 0; transition: opacity .35s var(--ease), visibility 0s linear .35s;
  }
  .is-live .reg-detail.is-active { visibility: visible; opacity: 1; transition: opacity .35s var(--ease); }
}

/* ---------- Studio ---------- */
.studio-split .spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.studio-split .lede + .lede { margin-top: 1.25rem; }

/* What we believe: 2 × 2 with cross rules, each with a small drawn detail */
.beliefs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.beliefs li { display: grid; grid-template-columns: minmax(0, 1fr) clamp(130px, 14vw, 190px); gap: 0 1.5rem; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(1rem, 2.5vw, 2.5rem); border-top: 1px solid var(--rule); align-items: start; }
.beliefs li:nth-child(odd) { padding-left: 0; border-right: 1px solid var(--rule); }
.beliefs li:nth-child(even) { padding-right: 0; }
.beliefs .label { display: block; margin-bottom: 1rem; }
.beliefs h3 { margin-bottom: .6rem; }
.beliefs p { color: var(--ink-soft); margin: 0; }
.detail { grid-row: 1 / span 3; grid-column: 2; margin: 0; }
.detail svg { width: 100%; height: auto; overflow: visible; }
.detail path, .detail rect, .detail circle {
  fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.detail .thin path { stroke-width: 1; stroke: var(--ink-soft); }
.detail .el-accent path, .detail .el-accent circle { stroke: var(--red); }
.detail .dash { stroke-dasharray: 3 4 !important; stroke-dashoffset: 0 !important; }
@media (max-width: 900px) {
  .beliefs { grid-template-columns: 1fr; }
  .beliefs li, .beliefs li:nth-child(odd), .beliefs li:nth-child(even) { padding-inline: 0; border-right: 0; }
}
@media (max-width: 460px) {
  .beliefs li { grid-template-columns: 1fr; }
  .detail { grid-row: auto; grid-column: 1; max-width: 170px; margin-bottom: 1.25rem; order: -1; }
}

/* Team as the drawing title block: Drawn / Checked / Approved */
.team-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: end; margin-bottom: clamp(2.25rem, 1.5rem + 3vw, 4rem); }
.team-head p { color: var(--ink-soft); max-width: 34em; margin: 0; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.6; }
.team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--ink); }
.team li { position: relative; padding: clamp(1.5rem, 1rem + 2.2vw, 3rem); border-right: 1px solid var(--ink); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem 1.25rem; align-items: center; }
.team li:last-child { border-right: 0; }
.team .role-mark { grid-column: 1 / -1; margin-bottom: 1.5rem; display: flex; justify-content: space-between; }
.team .role-mark span:last-child { color: var(--red); }
.stamp { width: clamp(84px, 7vw, 104px); height: auto; grid-row: span 2; overflow: visible; }
.stamp circle { fill: none; stroke: var(--ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.stamp .ring { stroke: var(--red); stroke-dasharray: 2 4; transform-origin: 50% 50%; transition: transform 1.2s var(--ease); }
.stamp text { fill: var(--ink); font: 400 30px var(--serif); text-anchor: middle; }
.team li:hover .stamp .ring { transform: rotate(40deg); }
.team h3 { align-self: end; }
.team p { color: var(--ink-soft); margin: 0; }
.team .role { align-self: start; }
.team .bio { grid-column: 1 / -1; align-self: start; margin-top: 1.75rem; line-height: 1.65; max-width: 34em; }
.team .focus { grid-column: 1 / -1; align-self: start; margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid var(--rule, rgba(27, 27, 26, .2)); color: var(--ink); display: flex; gap: 1rem; align-items: baseline; }
.team .focus .label { flex: none; }
/* Wide: the three cards share rows, so names, bios and the focus rules line up across them */
@media (min-width: 901px) {
  .team li { grid-row: span 5; grid-template-rows: subgrid; row-gap: .3rem; }
}
@media (max-width: 1100px) and (min-width: 901px) {
  .team li { grid-row: span 6; grid-template-columns: 1fr; }
  .stamp { grid-row: auto; margin-bottom: .75rem; }
}
@media (max-width: 900px) {
  .team-head { grid-template-columns: 1fr; }
  .team { grid-template-columns: 1fr; }
  .team li { border-right: 0; border-bottom: 1px solid var(--ink); }
  .team li:last-child { border-bottom: 0; }
}

/* ---------- Process: one building that develops through the four sheets ---------- */
.proc-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: end; margin-bottom: clamp(2.25rem, 1.5rem + 3vw, 4rem); }
.proc-head p { color: var(--ink-soft); max-width: 34em; margin: 0; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.6; }

.proc-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 5vw, 5.5rem); align-items: start; }
.proc-fig-wrap { grid-column: 2; grid-row: 1; position: sticky; top: clamp(24px, 50vh - 17rem, 120px); }
.proc-steps { grid-column: 1; grid-row: 1; list-style: none; margin: 0; padding: 0; }
.proc-fig { margin: 0; }
.proc-sheet { position: relative; border: 1px solid var(--rule); background: var(--paper); padding: clamp(.75rem, 2vw, 1.5rem); }
.proc-sheet svg { display: block; width: 100%; height: auto; overflow: visible; }
.proc-sheet-no { position: absolute; left: .85rem; top: .7rem; font-size: .66rem; }
.proc-sheet::before, .proc-sheet::after { content: ""; position: absolute; width: 16px; height: 16px; border: 0 solid var(--red); pointer-events: none; }
.proc-sheet::before { top: 7px; right: 7px; border-width: 1px 1px 0 0; }
.proc-sheet::after { bottom: 7px; left: 7px; border-width: 0 0 1px 1px; }
.proc-ticks { display: flex; gap: 6px; list-style: none; margin: .9rem 0 0; padding: 0; }
.proc-ticks li { flex: 1; height: 3px; background: var(--rule); transition: background-color .4s var(--ease); }
.proc-fig[data-stage="1"] .proc-ticks li:nth-child(-n+1),
.proc-fig[data-stage="2"] .proc-ticks li:nth-child(-n+2),
.proc-fig[data-stage="3"] .proc-ticks li:nth-child(-n+3),
.proc-fig[data-stage="4"] .proc-ticks li { background: var(--red); }

/* Linework on paper */
.proc-fig path, .proc-fig circle { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.proc-fig .heavy path { stroke-width: 2.4; }
.proc-fig .thin path, .proc-fig .thin circle { stroke-width: 1; stroke: var(--ink-soft); }
.proc-fig .red path, .proc-fig .red circle { stroke: var(--red); stroke-width: 1.1; }
.proc-fig text { fill: var(--ink-soft); font: 400 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.proc-fig .st3 text { fill: var(--red-deep); }
.proc-fig .st3 text.bubble { font-size: 12px; }
.proc-fig .sketch path, .proc-fig .sketch circle { stroke: var(--ink-soft); stroke-width: 1.1; }
.proc-fig .sketch text { font: italic 400 15px var(--serif); letter-spacing: 0; text-transform: none; }
.stamp-asbuilt circle { stroke: var(--red); stroke-width: 1.4; }
.stamp-asbuilt circle + circle { stroke-width: .8; stroke-dasharray: 2 3; }
.proc-fig .stamp-asbuilt text { fill: var(--red); font-size: 12px; letter-spacing: .14em; }
.stamp-asbuilt { transform: rotate(-12deg); transform-box: fill-box; transform-origin: center; }

/* Colour for the built stage */
.proc-fig .fills path { stroke: none; }
.proc-fig .fills .f-ground { fill: #E3DCCB; }
.proc-fig .fills .f-wall { fill: #EFE9DC; }
.proc-fig .fills .f-wing { fill: #E6DECC; }
.proc-fig .fills .f-roof { fill: var(--forest); }
.proc-fig .fills .f-roof-2 { fill: #3D5E52; }
.proc-fig .fills .f-chim { fill: #A8735C; }
.proc-fig .fills .f-glass { fill: #F0C9A8; }
.proc-fig .fills .f-door { fill: var(--red); }
.proc-fig .fills .f-tree { fill: #93AA90; }
.proc-fig .fills .f-shrub { fill: #7F9A80; }

/* Stage logic (only with motion + JS; otherwise the finished building shows with everything on it) */
html.draw-anim .proc-fig .draw:not(.is-drawn) [pathLength] { transition: stroke-dashoffset .35s var(--ease); }
html.draw-anim .proc-fig .st text { opacity: 0; transition: opacity .3s var(--ease); }
html.draw-anim .proc-fig .st.is-drawn text { opacity: 1; transition: opacity .6s var(--ease) .7s; }
html.draw-anim .proc-fig .fills path { opacity: 0; transition: opacity .4s var(--ease); }
html.draw-anim .proc-fig[data-stage="4"] .fills path { opacity: 1; transition: opacity 1s var(--ease) calc(.3s + var(--fd, 0s)); }
html.draw-anim .proc-fig .stamp-asbuilt { opacity: 0; transform: rotate(-12deg) scale(1.4); transition: opacity .3s var(--ease), transform .3s var(--ease); }
html.draw-anim .proc-fig .st4.is-drawn .stamp-asbuilt { opacity: 1; transform: rotate(-12deg); transition: opacity .5s var(--ease) 1.3s, transform .5s cubic-bezier(.3, 1.6, .5, 1) 1.3s; }
.proc-fig .st1, .proc-fig .st3 { transition: opacity .6s var(--ease); }
.proc-fig:is([data-stage="2"], [data-stage="3"], [data-stage="4"]) .st1 { opacity: .22; }
.proc-fig[data-stage="4"] .st3 { opacity: .35; }

/* The steps */
.step { min-height: 72vh; padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-top: 1px solid var(--rule); }
.step:last-child { min-height: 0; padding-bottom: 20vh; }
.step-no { margin: 0 0 1rem; transition: color .3s var(--ease); }
.step h3 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem); margin-bottom: .9rem; }
.step > p { color: var(--ink-soft); max-width: 30em; margin: 0; font-size: clamp(1.05rem, 1rem + .25vw, 1.18rem); line-height: 1.6; }
.receive { margin-top: 1.75rem; }
.receive .label { margin: 0 0 .5rem; }
.receive ul { list-style: none; margin: 0; padding: 0; }
.receive li { padding: .55rem 0 .55rem 1.5rem; border-bottom: 1px solid var(--rule); position: relative; }
.receive li::before { content: ""; position: absolute; left: 0; top: 1.2rem; width: .7rem; height: 1px; background: var(--red); }
.decision { display: flex; gap: 1rem; align-items: baseline; margin: 1.5rem 0 0; color: var(--ink); }
.decision .label { color: var(--red); flex: none; }
.decision .label::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: .6rem; border: 1px solid var(--red); transform: rotate(45deg) translateY(-1px); }
html.draw-anim .proc.is-live .step { opacity: .4; transition: opacity .45s var(--ease); }
html.draw-anim .proc.is-live .step.is-current { opacity: 1; }
.step.is-current .step-no { color: var(--red); }

@media (max-width: 900px) {
  .proc-head { grid-template-columns: 1fr; }
  .proc-grid { grid-template-columns: 1fr; }
  /* Phones and tablets: the drawing pins to the top of the screen while the steps scroll under it */
  .proc-fig-wrap { grid-column: 1; grid-row: auto; top: 0; z-index: 2; background: var(--paper); padding-block: .6rem; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .proc-fig { max-width: 620px; margin-inline: auto; }
  .proc-steps { grid-column: 1; grid-row: auto; }
  .step { min-height: 60vh; }
  .proc-block .tb-wide { display: none; }
  .proc-block { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proc-block > div:nth-child(2) { border-right: 0; }
  .proc-ticks { margin-top: .5rem; }
}
@media (max-width: 560px) {
  .proc-block > div:nth-child(-n+2) { border-bottom: 0; }
  .proc-block > div { padding: .45rem .7rem; }
  .proc-sheet { padding: .5rem; }
  .proc-sheet-no { display: none; }
  .proc-fig text { font-size: 15px; }
  .proc-fig .sketch text { font-size: 19px; }
  .cover-art .sl { display: none; } /* Process cover: sheet numbers only, the names don't fit */
}

/* ---------- Process: schedule ---------- */
.sched { --cols: 24; border-top: 1px solid var(--ink); }
.sched-axis, .sched-row { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); column-gap: 1.5rem; align-items: center; }
.sched-axis { padding: .6rem 0; border-bottom: 1px solid var(--rule); }
.sched-scale { display: flex; justify-content: space-between; font: 400 .66rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.sched-scale span { width: 0; white-space: nowrap; display: flex; justify-content: center; }
.sched-scale span:first-child { justify-content: flex-start; }
.sched-scale span:last-child { justify-content: flex-end; }
.sched-row { padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.sched-name { font: 400 1.15rem/1.3 var(--serif); }
.sched-name .label { color: var(--red); margin-right: .5rem; }
.sched-track {
  position: relative; height: 26px;
  background: repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 12.5%);
}
.sched-track .bar {
  position: absolute; top: 5px; bottom: 5px;
  left: calc(var(--s) / var(--cols) * 100%); width: calc((var(--x) - var(--s)) / var(--cols) * 100%);
  background:
    linear-gradient(var(--ink), var(--ink)) left / calc((var(--e) - var(--s)) / (var(--x) - var(--s)) * 100%) 100% no-repeat,
    repeating-linear-gradient(-45deg, var(--rule-strong) 0 1px, transparent 1px 5px);
  transform-origin: left; transition: transform 1s var(--ease) var(--bd, 0s);
}
.is-review .bar {
  background:
    linear-gradient(var(--ink-soft), var(--ink-soft)) left / calc((var(--e) - var(--s)) / (var(--x) - var(--s)) * 100%) 100% no-repeat,
    repeating-linear-gradient(-45deg, var(--rule-strong) 0 1px, transparent 1px 5px);
}
.sched-track .dur { position: absolute; top: 50%; left: calc(var(--x) / var(--cols) * 100% + .9rem); transform: translateY(-50%); font: 400 .72rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.sched-track:has(.gate) .dur { left: calc(var(--x) / var(--cols) * 100% + 1.4rem); }
.sched-row:last-child .dur { left: auto; right: 0; top: -1.1rem; transform: none; }
.sched-track .gate { position: absolute; top: 50%; left: calc(var(--x) / var(--cols) * 100%); width: 11px; height: 11px; background: var(--paper-deep); border: 1.5px solid var(--red); transform: translate(-50%, -50%) rotate(45deg); }
.sched-row:nth-child(3) { --bd: .15s; }
.sched-row:nth-child(4) { --bd: .3s; }
.sched-row:nth-child(5) { --bd: .45s; }
.sched-row:nth-child(6) { --bd: .6s; }
html.draw-anim .reveal:not(.is-in) .sched-track .bar { transform: scaleX(0); }
.sched-key { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin: 1.25rem 0 0; }
.sched-key span { display: inline-block; width: 22px; height: 10px; margin-right: -.6rem; vertical-align: middle; }
.sched-key .k-bar { background: var(--ink); }
.sched-key .k-range { background: repeating-linear-gradient(-45deg, var(--rule-strong) 0 1px, transparent 1px 5px); border: 1px solid var(--rule); }
.sched-key .k-gate { width: 9px; height: 9px; border: 1.5px solid var(--red); transform: rotate(45deg); margin-right: -.4rem; }
@media (max-width: 760px) {
  .sched-axis { grid-template-columns: 1fr; }
  .sched-axis > span:first-child { display: none; }
  .sched-row { grid-template-columns: 1fr; row-gap: .7rem; }
  .sched-name { font-size: 1.05rem; padding-right: 7.5rem; }
  .sched-track .dur, .sched-track:has(.gate) .dur, .sched-row:last-child .dur { left: auto; right: 0; top: -1.75rem; transform: none; }
  .sched-scale span:nth-child(even) { visibility: hidden; }
}

/* ---------- Process: questions ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; }
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline;
  padding: 1.2rem 0; font: 400 clamp(1.15rem, 1.05rem + .4vw, 1.4rem)/1.3 var(--serif); transition: color .3s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font: 400 1.1rem var(--mono); color: var(--red); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--red-deep); }
.faq details p { color: var(--ink-soft); max-width: 36em; margin: 0 0 1.4rem; line-height: 1.65; }
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; } }

/* ---------- Contact: the form as a drawing transmittal (title-block cells), studio details beside it ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.tx-col h2 { margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem); }
.tx-cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--ink); }
.tx-cell { margin: 0; display: flex; flex-direction: column; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transition: background-color .3s var(--ease); }
.tx-cell:nth-child(2n) { border-right: 0; }
.tx-cell.tx-wide { grid-column: 1 / -1; border-right: 0; }
.tx-cell:last-child { border-bottom: 0; }
.tx-cell:focus-within { background: var(--paper-deep); }
.tx-cell label { font: 400 .66rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); padding: .8rem 1rem 0; }
.tx-cell .opt { text-transform: none; letter-spacing: .02em; }
.tx-cell input, .tx-cell select, .tx-cell textarea {
  font: 400 1.05rem/1.5 var(--sans); color: var(--ink); background: transparent;
  border: 0; border-radius: 0; padding: .35rem 1rem .8rem; width: 100%; min-height: 48px;
}
.tx-cell textarea { resize: vertical; min-height: 9rem; }
.tx-cell select { appearance: none; cursor: pointer; padding-right: 2.5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23B4482F' stroke-width='1.5'/%3E%3C/svg%3E") right 1rem center / 12px 8px no-repeat; }
.tx-cell ::placeholder { color: #8A857B; }
/* The cell carries the focus mark, so the field's own outline would double it */
.tx-cell :focus-visible { outline: 0; }
.tx-cell:focus-within { box-shadow: inset 3px 0 0 var(--red); }
.tx-cell:has(:user-invalid) label { color: var(--red); }
.tx-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.5rem; }
.tx-foot .btn { cursor: pointer; }
.tx-note { margin: 0; color: var(--ink-soft); }
.tx-note a, .contact-aside a, .tx-done a { color: var(--ink); text-decoration-color: var(--red); text-underline-offset: 4px; }
.tx-done { border: 1px solid var(--ink); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); max-width: 40em; }
.tx-done:focus { outline: 0; }
.tx-done .label { display: block; margin-bottom: 1rem; color: var(--red); }
.tx-done h3 { margin-bottom: .75rem; }
.tx-done p:last-child { margin: 0; color: var(--ink-soft); }
.contact-aside .spec { grid-template-columns: 1fr; }
.contact-aside .spec > div { border-right: 0; border-bottom: 1px solid var(--ink); }
.contact-aside .spec > div:last-child { border-bottom: 0; }
.aside-note { color: var(--ink-soft); margin: 1.25rem 0 0; }
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-aside .spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-aside .spec > div:nth-child(odd) { border-right: 1px solid var(--ink); }
  .contact-aside .spec > div:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 560px) {
  .tx-cells { grid-template-columns: 1fr; }
  .tx-cell { border-right: 0; }
}

.next-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.next-steps li { padding: 1.5rem clamp(1rem, 2vw, 2rem) .5rem; border-right: 1px solid var(--rule); }
.next-steps li:first-child { padding-left: 0; }
.next-steps li:last-child { border-right: 0; padding-right: 0; }
.next-steps .label { display: block; margin-bottom: 1.25rem; }
.next-steps h3 { margin-bottom: .6rem; }
.next-steps p { color: var(--ink-soft); margin: 0; }
.next-link { margin: clamp(1.75rem, 1.2rem + 2vw, 3rem) 0 0; }
@media (max-width: 820px) {
  .next-steps { grid-template-columns: 1fr; }
  .next-steps li, .next-steps li:first-child, .next-steps li:last-child { padding-inline: 0; border-right: 0; border-bottom: 1px solid var(--rule); padding-bottom: 1.5rem; }
  .next-steps li:last-child { border-bottom: 0; }
}