/* ==========================================================================
   Thurston King Architects, client review of 28 September 2026.

   Kept in its own file rather than appended to site.css, which had already
   collected three rounds of changes and was becoming hard to read. Loaded
   last, so anything here wins, and revertible on its own.
   ========================================================================== */
/* ==========================================================================
   Client review, 28 September. Six changes that touch every page.

   1. Every page now opens the way the home page does: a full-bleed photograph
      with the page title laid over it, then a single paragraph of key copy
      underneath. The old treatment put type first and the image after it,
      which read as a document rather than as an architecture practice.
   2. A bronze band per page, picking out one idea from that page. Bronze is
      the third scheme after bone and ink, not a fourth colour scattered about.
   3. Reviews move onto the bronze, one at a time, condensed to a single
      paragraph. On the home page the same treatment carousels.
   4. The closing panel is the same on every page, over the dusk photograph.
   5. Services carry a photograph on the home page.
   6. The phone menu loses its rules and tightens up.
   ========================================================================== */

/* ---------- Bronze. Patinated metal, not gold: it has to sit under the
     photography without competing with it. Text is the bone ground, which
     clears 5.9:1 against this. ---------- */
.tk-scheme-bronze {
  --pm-fg: #F2EEE9;
  --pm-fg-muted: rgba(242, 238, 233, 0.74);
  --pm-border-color: rgba(242, 238, 233, 0.24);
  background: #8A6E4B;
  color: #F2EEE9;
}
.tk-scheme-bronze h1, .tk-scheme-bronze h2, .tk-scheme-bronze h3,
.tk-scheme-bronze h4, .tk-scheme-bronze p, .tk-scheme-bronze li,
.tk-scheme-bronze dt, .tk-scheme-bronze dd, .tk-scheme-bronze blockquote { color: inherit; }
.tk-scheme-bronze .pm-lede { color: rgba(242, 238, 233, 0.82); }
.tk-scheme-bronze .pm-eyebrow { color: rgba(242, 238, 233, 0.62); }
.tk-scheme-bronze a { color: inherit; }
.tk-scheme-bronze .pm-btn {
  background: #F2EEE9; color: #3A2E1E; border-color: #F2EEE9;
}
.tk-scheme-bronze .pm-btn:hover { background: transparent; color: #F2EEE9; }
.tk-scheme-bronze .pm-btn--secondary,
.tk-scheme-bronze .pm-btn--link { background: transparent; color: #F2EEE9; border-color: currentColor; }

/* ---------- The overlaid page head. One photograph, the title on it.
     min-height rather than a fixed aspect ratio so a long title on a narrow
     phone still has somewhere to sit. ---------- */
.tk-hero-head {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(22rem, 58vh, 40rem);
  padding-block: 0;
  overflow: hidden;
}
.tk-hero-head__media { position: absolute; inset: 0; margin: 0; }
.tk-hero-head__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tk-hero-head__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(20, 19, 17, 0.66) 0%,
    rgba(20, 19, 17, 0.28) 45%,
    rgba(20, 19, 17, 0.20) 100%);
}
.tk-hero-head .pm-container {
  position: relative;
  width: 100%;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
.tk-hero-head h1 {
  color: #EFEBE6;
  font-family: var(--pm-font-display);
  font-weight: 300;
  font-size: clamp(2.125rem, 4.6vw, 3.75rem);
  line-height: 1.08;
  max-width: 20ch;
  margin: 0;
}
.tk-hero-head .pm-eyebrow { color: rgba(239, 235, 230, 0.72); margin-bottom: var(--pm-space-4); }

/* ---------- The paragraph of key copy that follows the photograph on every
     page. Deliberately one measure and nothing else. ---------- */
.tk-intro { padding-block: clamp(3rem, 6vw, 5rem); }
.tk-intro p {
  font-family: var(--pm-font-sans);
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  font-weight: 300;
  line-height: 1.7;
  max-width: 64ch;
  margin: 0;
}
.tk-intro p + p { margin-top: var(--pm-space-5); }

/* ---------- The bronze feature band ---------- */
.tk-bronze { padding-block: clamp(3.5rem, 7vw, 6rem); }
.tk-bronze h2 {
  font-family: var(--pm-font-display);
  font-weight: 400;
  font-size: clamp(1.375rem, 2.6vw, 2.125rem);
  line-height: 1.22;
  max-width: 26ch;
  margin: 0;
}
.tk-bronze__body { margin-top: var(--pm-space-6); max-width: 62ch; }
.tk-bronze__body p { font-size: 1.0625rem; line-height: 1.75; }
.tk-bronze__body p + p { margin-top: var(--pm-space-4); }
.tk-bronze .pm-btn-group { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* Key aspects, as a ruled list on the bronze rather than cards. */
.tk-bronze__grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(1.75rem, 3vw, 2.25rem);
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
}
@media (min-width: 640px)  { .tk-bronze__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tk-bronze__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tk-bronze__item { border-top: 1px solid var(--pm-border-color); padding-top: var(--pm-space-5); }
.tk-bronze__item h3 {
  font-family: var(--pm-font-sans);
  font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 400; margin: 0 0 var(--pm-space-3);
}
.tk-bronze__item p { font-size: 0.9375rem; line-height: 1.65; margin: 0; }

/* ---------- A single review, on the bronze. Display face, big, quiet.
     The quote mark is set as content so it never gets copied with the text. ---------- */
.tk-quote { padding-block: clamp(3.5rem, 7vw, 6rem); }
.tk-quote__inner { max-width: 46rem; }
.tk-quote blockquote { margin: 0; }
.tk-quote blockquote p {
  font-family: var(--pm-font-display);
  font-weight: 300;
  font-size: clamp(1.25rem, 2.5vw, 1.9375rem);
  line-height: 1.38;
  margin: 0;
}
.tk-quote blockquote p::before { content: '"'; }
.tk-quote blockquote p::after  { content: '"'; }
.tk-quote figcaption {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  display: grid; gap: var(--pm-space-1);
  font-family: var(--pm-font-sans);
}
.tk-quote__author { font-size: 0.9375rem; font-weight: 400; }
.tk-quote__project {
  font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--pm-fg-muted);
}

/* ---------- The home page review carousel. Scroll-snap does the work, so it
     still reads and scrolls with JavaScript off; the buttons and dots are
     progressive enhancement. ---------- */
.tk-carousel { padding-block: clamp(3.5rem, 7vw, 6rem); }
.tk-carousel__track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tk-carousel__track::-webkit-scrollbar { display: none; }
.tk-carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-width: 0;
}
.tk-carousel__nav {
  display: flex; align-items: center; gap: var(--pm-space-5);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.tk-carousel__btn {
  appearance: none; background: transparent;
  border: 1px solid var(--pm-border-color); border-radius: 0;
  color: inherit; cursor: pointer;
  width: 2.75rem; height: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color var(--pm-duration) var(--pm-ease), color var(--pm-duration) var(--pm-ease);
}
.tk-carousel__btn:hover:not(:disabled) { background: #F2EEE9; color: #3A2E1E; }
.tk-carousel__btn:disabled { opacity: 0.35; cursor: default; }
.tk-carousel__dots { display: flex; gap: var(--pm-space-3); margin-left: auto; }
.tk-carousel__dot {
  appearance: none; background: transparent; padding: 0; cursor: pointer;
  width: 1.75rem; height: 1px; border: 0;
  background-color: var(--pm-border-color);
  transition: background-color var(--pm-duration) var(--pm-ease);
}
.tk-carousel__dot[aria-current="true"] { background-color: var(--pm-fg); }

/* ---------- Services on the home page: a photograph each, larger heading ---------- */
.tk-svc__grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 640px)  { .tk-svc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tk-svc__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tk-svc__item { display: flex; flex-direction: column; }
.tk-svc__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; margin: 0 0 var(--pm-space-5); }
.tk-svc__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--pm-ease); }
.tk-svc__item:hover .tk-svc__media img { transform: scale(1.03); }
.tk-svc__title {
  font-family: var(--pm-font-display);
  font-weight: 400;
  font-size: clamp(1.125rem, 1.7vw, 1.4375rem);
  line-height: 1.25;
  margin: 0 0 var(--pm-space-3);
}
.tk-svc__title a { text-decoration: none; }
.tk-svc__item p { font-size: 0.9375rem; line-height: 1.7; margin: 0 0 var(--pm-space-5); }
.tk-svc__item .pm-btn--link { margin-top: auto; }
/* The services heading itself, larger than the other section heads. */
.tk-svc-head h2 { font-size: clamp(1.75rem, 3.2vw, 2.75rem); font-weight: 300; letter-spacing: 0; }

/* ---------- Services accordion on the services hub ---------- */
.tk-svclist.pm-accordion { border-top: 1px solid var(--pm-border-color); }
.tk-svclist .pm-accordion__item { border-bottom: 1px solid var(--pm-border-color); }
.tk-svclist__trigger {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: var(--pm-space-4);
  width: 100%; text-align: left;
  padding-block: var(--pm-space-6);
}
.tk-svclist__title {
  font-family: var(--pm-font-sans);
  font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 400;
}
.tk-svclist .pm-accordion__content { padding-bottom: var(--pm-space-7); }
.tk-svclist .pm-accordion__content p { max-width: 62ch; font-size: 0.9375rem; line-height: 1.75; }

/* ---------- The two opening images on the process page ---------- */
.tk-pair__grid { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 768px) { .tk-pair__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tk-pair figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.tk-pair figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tk-pair figcaption {
  font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--pm-fg-muted); margin-top: var(--pm-space-3);
}

/* ---------- Other projects, on the bronze ---------- */
.tk-scheme-bronze .layout-293__card { border-top-color: var(--pm-border-color); }
.tk-scheme-bronze .layout-293__card h3 a { text-decoration: none; }
.tk-scheme-bronze .layout-293__card h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Internal cross-links, the quiet row at the foot of a section ---------- */
.tk-crosslinks {
  display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: var(--pm-space-5);
  border-top: 1px solid var(--pm-border-color);
}
.tk-crosslinks a {
  font-family: var(--pm-font-sans);
  font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase;
  text-decoration: none; display: inline-flex; align-items: center; gap: var(--pm-space-2);
}
.tk-crosslinks a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- The phone menu. The client asked for the rules off and the items
     closer together, so the links stop stretching to fill the panel. ---------- */
.navbar-17__links {
  flex: 1;
  justify-content: center;
  gap: var(--pm-space-2);
  padding-block: var(--pm-space-8);
}
.navbar-17__links a {
  flex: 0 0 auto;
  border-top: 0;
  border-bottom: 0;
  padding-block: var(--pm-space-2);
  line-height: 1.25;
}
.navbar-17__links a:last-child { border-bottom: 0; }

/* ---------- Three footer columns now that areas and the journal have moved
     down here out of the header. ---------- */
@media (min-width: 640px) {
  .footer-03__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .footer-03__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Location above project type on the work grid ---------- */
.tk-place--where {
  font-style: normal;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pm-fg);
  margin-top: 0;
  margin-bottom: var(--pm-space-1);
}
.tk-place--where + .tk-place { margin-top: 0; }

/* ---------- The portrait band on the about page ---------- */
.tk-portrait { padding-block: 0 clamp(3rem, 6vw, 5rem); }

/* ==========================================================================
   Corrections found while checking the round on the built pages.
   ========================================================================== */

/* ---------- The closing panel is now a sentence, not a label.
     The earlier heading was two or three words ("Start your project"), which
     is what the tracked-caps treatment is for. The client's own wording runs
     to forty words, and forty words in tracked capitals is shouting rather
     than a heading, so this one goes back to sentence case. The label above
     it keeps the caps, which is where they belong. ---------- */
.cta-03 h2 {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 300;
  font-size: clamp(1.375rem, 2.5vw, 2.125rem);
  line-height: 1.32;
  max-width: 34ch;
}
.cta-03 .pm-eyebrow { margin-bottom: var(--pm-space-5); }

/* ---------- Journal cards now carry a photograph ---------- */
.tk-article__media {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  margin-bottom: var(--pm-space-5);
}
.tk-article__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 600ms var(--pm-ease);
}
.tk-article:hover .tk-article__media img { transform: scale(1.03); }
/* With a photograph above it the rule reads as a box lid, so it comes off. */
.tk-article:has(.tk-article__media) { border-top: 0; padding-top: 0; }

/* ---------- Project cards: the two meta lines should not leave a gap when
     one of them is missing, which it is on every project the client has not
     given us a location for yet. ---------- */
.portfolio-07__item .tk-place:empty { display: none; }

/* ---------- "Other projects" on the bronze ---------- */
.tk-scheme-bronze .pm-section-head { margin-bottom: clamp(2rem, 4vw, 3rem); }