/*
Theme Name: T. Ke Studio
Theme URI: https://tkestudio.com
Author: T. Ke Studio
Author URI: https://tkestudio.com
Description: A custom editorial theme for T. Ke Studio, a full-service residential interior design practice in Northern Virginia. Built around a quiet, confident visual system: Smoke warm neutral ground, Dark Mahogany ink, a muted brass accent, Jost for headings and UI, and Cormorant Garamond for running copy.
Version: 2.7.6
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tke-studio
Tags: portfolio, custom-logo, custom-menu, featured-images, one-column, two-columns
*/

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */
:root {
  /* Palette */
  --tke-white: #FAFAFA;        /* Smoke, primary background */
  --tke-dimity: #FAFAFA;       /* alias kept for existing rules; now Smoke */
  --tke-cream: #F0F0EE;        /* soft neutral band for alternate sections */
  --tke-fox: #402329;          /* Dark Mahogany ink, sitewide */
  --tke-stone: #82676B;        /* muted mahogany, secondary text */
  --tke-accent: #A5885E;       /* warm muted brass, eyebrow labels */
  --tke-line: rgba(64, 35, 41, 0.25);
  --tke-line-soft: rgba(64, 35, 41, 0.12);

  /* Type. v2.1: roles inverted. Headings carry the modern face (Jost),
     running copy carries the serif (Cormorant Garamond). UI keeps Jost. */
  --font-serif: "Cormorant Garamond", "Times New Roman", serif;
  --font-sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  /* v2.4: headings match the running copy. One serif voice throughout;
     Jost remains only in the interface layer (nav, labels, buttons). */
  --font-display: var(--font-serif);
  --font-body: var(--font-serif);
  --font-ui: var(--font-sans);

  --size-display: clamp(2.2rem, 5.5vw, 3.9rem);
  --size-h1: clamp(2rem, 4.6vw, 3.2rem);
  /* v2.3.3: page titles (About, Services, Contact, Watch) sit close to the
     body text, matching the project page register, so heading and copy
     feel balanced rather than contrasted. */
  --size-page-title: clamp(1.45rem, 2.3vw, 1.95rem);
  --size-h2: clamp(1.6rem, 3.4vw, 2.4rem);
  --size-h3: clamp(1.2rem, 2.2vw, 1.6rem);
  --size-lede: clamp(1.25rem, 2.4vw, 1.75rem);
  --size-body: 1.22rem;
  --size-small: 0.9rem;
  --size-caption: 0.78rem;
  --size-eyebrow: 0.72rem;

  --ls-wide: 0.22em;
  --ls-nav: 0.16em;

  /* Rhythm */
  --space-section: clamp(4.5rem, 10vw, 8.5rem);
  --space-block: clamp(2.25rem, 5vw, 4rem);
  --width-site: 1240px;
  --width-prose: 42rem;
  --width-narrow: 36rem;

  --ease: cubic-bezier(0.25, 0.6, 0.3, 1);
}

/* -------------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--tke-dimity);
  color: var(--tke-fox);
  font-family: var(--font-body);
  font-size: var(--size-body);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; transition: color 0.3s var(--ease), opacity 0.3s var(--ease); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.18;
  margin: 0 0 1.25rem;
  letter-spacing: 0.01em;
}

h1 { font-size: var(--size-h1); }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); }

p { margin: 0 0 1.4em; }

/* v2.1: running copy is serif; these interface voices stay in the modern
   face regardless of what the body inherits. */
.tke-nav a, .tke-mobile-nav a, .tke-link, .tke-menu-toggle,
.tke-case__details dt, .tke-prose figcaption,
.wp-caption-text, .tke-header__wordmark {
  font-family: var(--font-ui);
}

em, .tke-italic { font-style: italic; }

::selection { background: var(--tke-fox); color: var(--tke-dimity); }

:focus-visible {
  outline: 2px solid var(--tke-fox);
  outline-offset: 3px;
}

.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden;
  padding: 0; position: absolute; word-wrap: normal !important;
}
.screen-reader-text:focus {
  clip: auto; clip-path: none; height: auto; width: auto;
  background: var(--tke-cream); color: var(--tke-fox);
  display: block; font-size: var(--size-small); letter-spacing: var(--ls-nav);
  text-transform: uppercase; padding: 1rem 1.5rem; left: 5px; top: 5px; z-index: 100000;
}

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 100000; background: var(--tke-fox); color: var(--tke-dimity); padding: 0.75rem 1.25rem; font-size: var(--size-caption); letter-spacing: var(--ls-nav); text-transform: uppercase; }

/* -------------------------------------------------------------------------
   3. Layout primitives
   ------------------------------------------------------------------------- */
.tke-container {
  width: min(100% - 3rem, var(--width-site));
  margin-inline: auto;
}

@media (min-width: 768px) {
  .tke-container { width: min(100% - 6rem, var(--width-site)); }
}

.tke-section { padding-block: var(--space-section); }
.tke-section--flush-top { padding-top: 0; }
.tke-section--cream { background: var(--tke-cream); }

.tke-prose { max-width: var(--width-prose); }
.tke-prose--center { margin-inline: auto; }
.tke-prose--center > *:first-child { margin-top: 0; }
.tke-prose img { max-width: 100%; height: auto; display: block; }
.tke-prose figure { margin: 2.5rem 0; }
.tke-prose figure img { width: 100%; }
.tke-prose figcaption { margin-top: 0.6rem; font-size: var(--size-caption); color: var(--tke-stone); text-align: center; }
.tke-prose p { margin-bottom: 1.5em; }
.tke-prose h2, .tke-prose h3 { margin-top: 2.2em; }
.tke-prose h2:first-child, .tke-prose h3:first-child { margin-top: 0; }
.tke-prose ul, .tke-prose ol { padding-left: 1.2rem; margin: 0 0 1.5em; }
.tke-prose li { margin-bottom: 0.5em; }
.tke-prose blockquote {
  margin: 2.5em 0; padding: 0;
  font-family: var(--font-display); font-size: var(--size-lede);
  font-style: italic; line-height: 1.4; border: 0;
}
.tke-prose blockquote::before { content: ""; display: block; width: 3rem; height: 1px; background: var(--tke-fox); margin-bottom: 1.25rem; }

/* Folio rule: the signature structural device. A hairline with a small-caps
   label, echoing the running folio of a printed shelter magazine. */
.tke-eyebrow {
  display: flex; align-items: center; gap: 1.1rem;
  font-family: var(--font-ui); font-size: var(--size-eyebrow);
  font-weight: 400; letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--tke-accent); margin: 0 0 1.75rem;
}
.tke-eyebrow::after { content: ""; flex: 0 0 3.5rem; height: 1px; background: var(--tke-line); }
.tke-eyebrow--center { justify-content: center; }
.tke-eyebrow--center::before { content: ""; flex: 0 0 3.5rem; height: 1px; background: var(--tke-line); }

/* -------------------------------------------------------------------------
   4. Links and buttons
   ------------------------------------------------------------------------- */
.tke-link {
  display: inline-block; position: relative;
  font-size: var(--size-caption); font-weight: 400;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  padding-bottom: 0.45rem;
}
.tke-link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform-origin: left; transition: transform 0.4s var(--ease);
}
.tke-link:hover::after, .tke-link:focus-visible::after { transform: scaleX(0.4); }

.tke-button {
  display: inline-block;
  font-family: var(--font-ui); font-size: var(--size-caption);
  font-weight: 400; letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--tke-fox); background: transparent;
  border: none; border-bottom: 1px solid var(--tke-fox);
  border-radius: 0; padding: 0 0 0.45rem; cursor: pointer;
  transition: opacity 0.35s var(--ease), border-color 0.35s var(--ease);
}
.tke-button:hover, .tke-button:focus-visible { opacity: 0.6; }

/* -------------------------------------------------------------------------
   5. Header
   ------------------------------------------------------------------------- */
.tke-header {
  /* v2.5: pinned. The bar stays at the top of the viewport on every page.
     The admin-bar rules below keep it clear of the WordPress toolbar when
     logged in, which is what clipped the menu in earlier versions. */
  position: sticky; top: 0; z-index: 900;
  background: rgba(250, 250, 250, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--tke-line-soft);
}
body.admin-bar .tke-header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .tke-header { top: 46px; }
}
.tke-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; padding-block: 0.4rem;
}
.tke-header__brand { display: flex; align-items: center; }
.tke-header__brand img { max-height: 56px; width: auto; }
@media (max-width: 767px) { .tke-header__brand img { max-height: 44px; } }
.tke-header__wordmark {
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 400;
  letter-spacing: 0.04em; line-height: 1;
}

.tke-social { list-style: none; margin: 0; padding: 0; }
.tke-social li { margin-bottom: 0.6rem; }
.tke-social a { font-size: var(--size-small); letter-spacing: 0.08em; font-weight: 400; }
.tke-contact-info .tke-social a { font-weight: 400; border-bottom: 1px solid var(--tke-line); padding-bottom: 2px; }

.tke-nav { display: none; }
.tke-nav ul { display: flex; gap: 2.25rem; list-style: none; margin: 0; padding: 0; }
.tke-nav a {
  font-size: var(--size-caption); font-weight: 400;
  letter-spacing: var(--ls-nav); text-transform: uppercase;
  position: relative; padding-bottom: 0.35rem;
}
.tke-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.tke-nav a:hover::after, .tke-nav a:focus-visible::after,
.tke-nav .current-menu-item > a::after, .tke-nav .current_page_item > a::after { transform: scaleX(1); }

.tke-menu-toggle {
  display: inline-flex; flex-direction: column; gap: 6px;
  background: none; border: 0; padding: 0.5rem; cursor: pointer;
}
.tke-menu-toggle span { display: block; width: 26px; height: 1px; background: var(--tke-fox); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
.tke-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.tke-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.tke-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.tke-mobile-nav {
  display: none;
  border-top: 1px solid var(--tke-line-soft);
  background: var(--tke-dimity);
}
.tke-mobile-nav.is-open { display: block; }
.tke-mobile-nav ul { list-style: none; margin: 0; padding: 1.5rem 0 2rem; }
.tke-mobile-nav li { border-bottom: 1px solid var(--tke-line-soft); }
.tke-mobile-nav a {
  display: block; padding: 1.1rem 0;
  font-size: var(--size-small); letter-spacing: var(--ls-nav); text-transform: uppercase;
}

@media (min-width: 900px) {
  .tke-nav { display: block; }
  .tke-menu-toggle, .tke-mobile-nav { display: none !important; }
}

/* -------------------------------------------------------------------------
   6. Hero
   ------------------------------------------------------------------------- */
.tke-hero { position: relative; min-height: 82vh; display: flex; align-items: flex-end; overflow: hidden; }
.tke-hero__media, .tke-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.tke-hero__media img { object-fit: cover; }
.tke-hero__content {
  position: relative; z-index: 2; color: var(--tke-dimity);
  text-shadow: 0 1px 22px rgba(58, 42, 38, 0.45);
  width: 100%; max-width: none; margin: 0;
  padding-inline: clamp(1.75rem, 5vw, 4.5rem);
  padding-block: 0 clamp(2.25rem, 4.5vw, 3.5rem);
}
.tke-hero__content .tke-eyebrow {
  color: rgba(250, 250, 250, 0.85);
  font-size: 0.9rem; margin-bottom: 1.4rem;
}
.tke-hero__content .tke-eyebrow::after { background: rgba(250, 250, 250, 0.4); }
.tke-hero__title {
  font-size: clamp(2.1rem, 4.2vw, 3.4rem); font-weight: 400; letter-spacing: 0.01em;
  max-width: 16em; margin-bottom: 1.75rem; text-wrap: balance;
}
.tke-hero__actions { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: center; }
.tke-hero__actions .tke-link { color: var(--tke-dimity); }

/* -------------------------------------------------------------------------
   7. Statement and lede type
   ------------------------------------------------------------------------- */
.tke-statement {
  font-family: var(--font-display);
  font-size: var(--size-lede);
  font-weight: 400; line-height: 1.45;
  max-width: 30em; margin-inline: auto; text-align: center;
  text-wrap: balance;
}
.tke-statement em { font-style: italic; }

.tke-lede {
  font-family: var(--font-display); font-size: var(--size-lede);
  font-weight: 400; line-height: 1.4; max-width: 24em;
}

/* -------------------------------------------------------------------------
   8. Project grids and cards
   ------------------------------------------------------------------------- */
.tke-projects-grid { display: grid; gap: var(--space-block); }

.tke-card { position: relative; }
.tke-card__media { display: block; overflow: hidden; background: var(--tke-cream); }
.tke-card__media img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  transition: transform 1s var(--ease);
}
.tke-card:hover .tke-card__media img { transform: scale(1.03); }
.tke-card__decision {
  margin: 0.6rem 0 0; max-width: 30em;
  font-family: var(--font-display); font-style: italic;
  font-size: 1.05rem; line-height: 1.55; color: var(--tke-fox);
}
.tke-card__meta {
  display: flex; align-items: baseline; gap: 1rem;
  margin-top: 1.2rem;
}
.tke-card__index {
  font-size: var(--size-caption); letter-spacing: var(--ls-wide);
  color: var(--tke-stone);
}
.tke-card__title { font-size: var(--size-h3); margin: 0; }
.tke-card__title a { position: relative; }
.tke-card__title a::after { content: ""; position: absolute; inset: 0; }
.tke-card__sub { font-size: var(--size-caption); letter-spacing: var(--ls-nav); text-transform: uppercase; color: var(--tke-stone); margin-top: 0.4rem; }


@media (min-width: 768px) {
  .tke-projects-grid { grid-template-columns: repeat(2, 1fr); gap: 3.5rem 3rem; padding-bottom: 4rem; }
  .tke-projects-grid > *:nth-child(even) { margin-top: 4rem; }
}
@media (min-width: 1024px) {
}

.tke-section-head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 1.5rem;
  margin-bottom: var(--space-block);
}
.tke-section-head h2 { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   9. Approach section (front page)
   ------------------------------------------------------------------------- */
.tke-approach { display: grid; gap: var(--space-block); }
.tke-approach__media img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.tke-principles { list-style: none; margin: 2.5rem 0 0; padding: 0; }
.tke-principles li { padding: 1.6rem 0; border-top: 1px solid var(--tke-line-soft); }
.tke-principles h3 { font-size: 1.35rem; margin-bottom: 0.5rem; }
.tke-principles p { margin: 0; color: var(--tke-fox); max-width: 34em; }
@media (min-width: 900px) {
  .tke-approach { grid-template-columns: 6fr 5fr; gap: clamp(3rem, 8vw, 7rem); align-items: start; }
  .tke-approach__media { position: sticky; top: 7rem; }
}

/* -------------------------------------------------------------------------
   10. CTA band
   ------------------------------------------------------------------------- */
.tke-cta { text-align: center; }
.tke-cta__title {
  font-size: var(--size-h2); max-width: 20em; margin-inline: auto;
  margin-bottom: 2.5rem; text-wrap: balance;
}

/* -------------------------------------------------------------------------
   11. Page headers and single project
   ------------------------------------------------------------------------- */
.tke-page-head { padding-block: var(--space-section) var(--space-block); }
.tke-page-head__title { font-size: var(--size-page-title); max-width: 24em; margin-bottom: 0; text-wrap: balance; }
.tke-page-head__intro { max-width: var(--width-narrow); margin-top: 1.75rem; font-size: 1.1rem; color: var(--tke-fox); }
.tke-page-head--center { text-align: center; }
.tke-page-head--center .tke-page-head__title { max-width: 18em; margin-inline: auto; }
.tke-page-head--center .tke-page-head__intro { margin-inline: auto; }

/* About: wide feature portrait above the story */
.tke-about-feature { margin: 0; overflow: hidden; background: var(--tke-cream); }
.tke-about-feature img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 10; object-fit: cover; }
@media (min-width: 768px) {
  .tke-about-feature img { aspect-ratio: 21 / 9; }
}

/* About hero: type-led headline, italic subhead, hairline, intro */
.tke-about-hero { padding-bottom: var(--space-section); }
.tke-about-hero__title { max-width: 15em; }
.tke-about-hero__subhead {
  margin: 1.75rem auto 0; max-width: 34em;
  font-family: var(--font-display); font-style: italic;
  font-size: var(--size-lede); line-height: 1.45; color: var(--tke-fox);
}
.tke-about-hero__rule { display: block; width: 3.5rem; height: 1px; background: var(--tke-line); margin: 2.75rem auto; }
.tke-about-hero__intro { max-width: 46rem; margin-inline: auto; color: var(--tke-fox); }
.tke-about-hero__intro p { font-size: 1.2rem; line-height: 1.75; margin: 0 0 1.5em; }
.tke-about-hero__intro p:last-child { margin-bottom: 0; }

/* Full-bleed feature image: caps height, adapts to the photo's shape */
.tke-about-feature--bleed {
  width: 100%;
  background: var(--tke-cream);
}
.tke-about-feature--bleed img {
  width: 100%; height: auto; display: block;
  max-height: 70vh; object-fit: cover; object-position: center 30%;
}

/* Inset feature image: contained, modest, between spotlight and team */
.tke-about-feature--inset {
  max-width: 52rem; margin: 0 auto var(--space-section);
  background: var(--tke-cream);
}
.tke-about-feature--inset img {
  width: 100%; height: auto; display: block;
  max-height: 55vh; object-fit: cover; object-position: center 30%;
}

.tke-team-list__blurb {
  display: block; margin-top: 0.7rem; max-width: 26em; margin-inline: auto;
  font-size: var(--size-small); line-height: 1.6; color: var(--tke-fox);
}

/* Editorial index: typographic table of contents with responsive image */
.tke-index__head { margin-bottom: 3rem; }
.tke-index__title { font-size: var(--size-h2); margin: 0; }
.tke-index__layout { display: grid; gap: 3rem; }
.tke-index__list { list-style: none; margin: 0; padding: 0; }
.tke-index__entry { border-top: 1px solid var(--tke-line-soft); }
.tke-index__entry:last-child { border-bottom: 1px solid var(--tke-line-soft); }
.tke-index__link {
  display: grid; grid-template-columns: 4.5rem 1fr; align-items: baseline;
  padding: 1.9rem 0; text-decoration: none;
}
.tke-index__num {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.7rem; color: var(--tke-accent); line-height: 1;
}
.tke-index__name {
  display: block; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.15; color: var(--tke-fox);
  transition: transform 0.45s var(--ease), color 0.45s var(--ease);
}
.tke-index__meta {
  display: block; margin-top: 0.55rem;
  font-size: var(--size-caption); letter-spacing: var(--ls-nav);
  text-transform: uppercase; color: var(--tke-stone);
}
.tke-index__link.is-active .tke-index__name,
.tke-index__link:hover .tke-index__name,
.tke-index__link:focus-visible .tke-index__name { transform: translateX(0.6rem); color: var(--tke-fox); }
.tke-index__more { margin: 3rem 0 0; }

.tke-index__aside { position: relative; }
.tke-index__media {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 4 / 5; background: var(--tke-cream);
}
.tke-index__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transform: scale(1);
  transition: opacity 1.2s var(--ease), filter 1.2s var(--ease), transform 0.9s var(--ease);
}
.tke-index__media.is-zoom .tke-index__img { transform: scale(1.07); }
.tke-index__img--back { opacity: 0; filter: blur(14px); }
.tke-index__img.is-visible { opacity: 1; filter: blur(0); }
.tke-index__img.is-hidden { opacity: 0; filter: blur(14px); }
.tke-index__img[src=""] { visibility: hidden; }

@media (min-width: 1024px) {
  .tke-index__layout { grid-template-columns: 7fr 5fr; gap: clamp(3rem, 6vw, 5rem); align-items: start; }
  .tke-index__media { position: sticky; top: 7rem; box-shadow: 0 30px 60px -38px rgba(64, 35, 41, 0.55); }
}

/* The Decision: editorial margin note beside the project lead image */
.tke-project-lead__media img { width: 100%; height: auto; display: block; }
.tke-annotation { max-width: 22rem; padding-top: 1.5rem; }
.tke-annotation__rule { display: block; width: 2.75rem; height: 1px; background: var(--tke-accent); margin-bottom: 1.1rem; }
.tke-annotation__label {
  margin: 0 0 0.8rem; font-family: var(--font-ui); font-weight: 500;
  font-size: var(--size-caption); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--tke-accent);
}
.tke-annotation__text {
  margin: 0; font-family: var(--font-display); font-style: italic;
  font-size: 1.2rem; line-height: 1.6; color: var(--tke-fox);
}
@media (min-width: 900px) {
  .tke-project-lead--annotated { display: grid; grid-template-columns: 8fr 3fr; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
  .tke-annotation { padding-top: 3.5rem; }
}

/* Single testimonial */
.tke-testimonial { text-align: center; }
.tke-testimonial__quote { margin: 0; }
.tke-testimonial__quote p {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(1.45rem, 2.6vw, 2rem); line-height: 1.5;
  color: var(--tke-fox); margin: 0 0 1.75rem; text-wrap: balance;
}
.tke-testimonial__attr {
  display: block; font-style: normal;
  font-size: var(--size-caption); letter-spacing: var(--ls-nav);
  text-transform: uppercase; color: var(--tke-stone);
}

/* Founder spotlight: portrait card beside name, quote, and bio */
.tke-spotlight { display: grid; gap: var(--space-block); align-items: center; }
.tke-spotlight__portrait {
  overflow: hidden; border-radius: 10px; background: var(--tke-cream);
  box-shadow: 0 26px 60px -30px rgba(64, 35, 41, 0.5);
}
.tke-spotlight__img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 5; object-fit: cover; }
.tke-spotlight__name { margin: 0 0 1.1rem; font-size: var(--size-h2); }
.tke-spotlight__quote {
  margin: 0 0 1.5rem; font-family: var(--font-display); font-style: italic;
  font-size: var(--size-lede); line-height: 1.45; color: var(--tke-fox);
}
.tke-spotlight__body p { margin: 0 0 1.1rem; font-size: 1.08rem; color: var(--tke-fox); }
.tke-spotlight__body p:last-child { margin-bottom: 0; }
@media (min-width: 768px) {
  .tke-spotlight { grid-template-columns: 5fr 7fr; gap: clamp(3rem, 7vw, 6rem); }
}

/* Compact team list: names and roles divided by hairlines */
.tke-team-list {
  list-style: none; margin: 0 auto; padding: 0; max-width: 52rem;
  display: grid; gap: 2.5rem; text-align: center;
}
.tke-team-list__name { display: block; font-family: var(--font-display); font-size: var(--size-h3); }
.tke-team-list__role {
  display: block; margin-top: 0.5rem; font-size: var(--size-caption);
  letter-spacing: var(--ls-nav); text-transform: uppercase; color: var(--tke-stone);
}
@media (min-width: 640px) {
  .tke-team-list { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; }
  .tke-team-list__member { padding: 0 2rem; }
  .tke-team-list__member + .tke-team-list__member { border-left: 1px solid var(--tke-line); }
}

.tke-align-center { text-align: center; }
.tke-align-center .tke-eyebrow { justify-content: center; }
.tke-h2-size { font-size: var(--size-page-title); }
.tke-lede--center { margin-inline: auto; }
.tke-section-head--center { justify-content: center; text-align: center; }

.tke-project-lead { margin-bottom: var(--space-block); }
.tke-project-lead img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.tke-project-body { display: grid; gap: var(--space-block); }
.tke-project-details {
  border-top: 1px solid var(--tke-line);
  font-size: var(--size-small);
}
.tke-project-details dl { margin: 0; }
.tke-project-details .tke-detail { padding: 1.1rem 0; border-bottom: 1px solid var(--tke-line-soft); }
.tke-project-details dt {
  font-size: var(--size-caption); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--tke-stone); margin-bottom: 0.3rem;
}
.tke-project-details dd { margin: 0; font-weight: 400; }
@media (min-width: 900px) {
  .tke-project-body { grid-template-columns: 3fr 7fr; gap: clamp(3rem, 8vw, 6rem); align-items: start; }
  .tke-project-details { position: sticky; top: 7rem; }
}

.tke-gallery { display: grid; gap: 1.75rem; margin-top: var(--space-section); }
.tke-gallery img { width: 100%; height: auto; display: block; }
@media (min-width: 768px) {
  .tke-gallery { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; align-items: start; }
  .tke-gallery__item:nth-child(4n+1) { grid-column: 1 / -1; }
}

.tke-project-nav {
  display: flex; justify-content: space-between; gap: 2rem;
  padding-block: var(--space-block);
  border-top: 1px solid var(--tke-line);
  margin-top: var(--space-section);
}
.tke-project-nav__label { display: block; font-size: var(--size-caption); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--tke-stone); margin-bottom: 0.5rem; }
.tke-project-nav__title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; }
.tke-project-nav__next { text-align: right; margin-left: auto; }

/* -------------------------------------------------------------------------
   12. Services
   ------------------------------------------------------------------------- */
.tke-phases { list-style: none; margin: 0 auto; padding: 0; counter-reset: phase; max-width: 54rem; }
.tke-phases li {
  display: grid; gap: 0.75rem;
  padding: 3.25rem 0; border-top: 1px solid var(--tke-line-soft);
  counter-increment: phase;
}
.tke-phases li:last-child { border-bottom: 1px solid var(--tke-line-soft); }
.tke-phases li::before {
  content: "0" counter(phase);
  font-family: var(--font-display); font-style: italic;
  font-size: 2.4rem; color: var(--tke-stone); line-height: 1;
}
.tke-phases h3 { margin-bottom: 0.6rem; }
.tke-phases p { margin: 0; max-width: 40em; color: var(--tke-fox); }
@media (min-width: 768px) {
  .tke-phases li { grid-template-columns: 7rem 1fr; gap: 2.5rem; align-items: baseline; }
}

/* About: refined team section, alternating editorial rows */
.tke-team { display: grid; gap: clamp(3rem, 7vw, 5.5rem); max-width: 62rem; margin: 0 auto; }
.tke-team__member { display: grid; gap: 1.5rem; align-items: center; }
.tke-team__portrait { overflow: hidden; background: var(--tke-white); }
.tke-team__img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 5; object-fit: cover; }
.tke-team__name { margin: 0; font-size: var(--size-h3); }
.tke-team__role {
  margin: 0.4rem 0 0; font-size: var(--size-caption);
  letter-spacing: var(--ls-nav); text-transform: uppercase; color: var(--tke-stone);
}
.tke-team__tagline {
  margin: 1.1rem 0 1.25rem; font-family: var(--font-display);
  font-style: italic; font-size: var(--size-lede); line-height: 1.4; color: var(--tke-fox);
}
.tke-team__body p { margin: 0 0 1rem; }
.tke-team__body p:last-child { margin-bottom: 0; }
@media (min-width: 768px) {
  .tke-team__member { grid-template-columns: 4fr 6fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
  .tke-team__member:nth-child(even) { grid-template-columns: 6fr 4fr; }
  .tke-team__member:nth-child(even) .tke-team__portrait { order: 2; }
  .tke-team__member:nth-child(even) .tke-team__body { order: 1; }
}

/* -------------------------------------------------------------------------
   13. Contact form
   ------------------------------------------------------------------------- */
.tke-contact-grid { display: grid; gap: var(--space-block); }
@media (min-width: 900px) {
  .tke-contact-grid { grid-template-columns: 5fr 7fr; gap: clamp(3rem, 8vw, 6rem); }
}
.tke-contact-info { font-size: var(--size-small); }
.tke-contact-info a { font-weight: 400; border-bottom: 1px solid var(--tke-line); padding-bottom: 2px; }
.tke-contact-info a:hover { border-color: var(--tke-fox); }
.tke-contact-info__block { margin-bottom: 2rem; }
.tke-contact-info__label {
  font-size: var(--size-caption); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--tke-stone);
  display: block; margin-bottom: 0.4rem;
}

.tke-form { display: grid; gap: 1.75rem; }
.tke-form__row { display: grid; gap: 1.75rem; }
@media (min-width: 640px) { .tke-form__row { grid-template-columns: 1fr 1fr; } }
.tke-form label {
  display: block; font-size: var(--size-caption);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--tke-stone); margin-bottom: 0.6rem;
}
.tke-form input[type="text"],
.tke-form input[type="email"],
.tke-form input[type="tel"],
.tke-form textarea {
  width: 100%; background: transparent;
  border: 0; border-bottom: 1px solid var(--tke-line);
  padding: 0.6rem 0; font-family: var(--font-ui);
  font-size: 1.02rem; font-weight: 400; color: var(--tke-fox);
  border-radius: 0;
  transition: border-color 0.3s var(--ease);
}
.tke-form input:focus, .tke-form textarea:focus {
  outline: none; border-bottom-color: var(--tke-fox);
}
.tke-form textarea { resize: vertical; min-height: 8rem; }
.tke-form__hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.tke-form-notice {
  padding: 1.1rem 1.4rem; margin-bottom: 2rem;
  font-size: var(--size-small); font-weight: 400;
  border: 1px solid var(--tke-line); background: var(--tke-cream);
}

/* -------------------------------------------------------------------------
   14. Blog and generic archives
   ------------------------------------------------------------------------- */
.tke-post-list { display: grid; gap: var(--space-block); }
@media (min-width: 768px) { .tke-post-list { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
.tke-post-card__media img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; transition: transform 1s var(--ease); }
.tke-post-card__media { overflow: hidden; margin-bottom: 1.2rem; }
.tke-post-card:hover .tke-post-card__media img { transform: scale(1.03); }
.tke-post-card__date { font-size: var(--size-caption); letter-spacing: var(--ls-nav); text-transform: uppercase; color: var(--tke-stone); }
.tke-post-card h3 { font-size: 1.4rem; margin: 0.5rem 0 0; }

/* Video sections: curated home strip, archive grid, single */
.tke-container--narrow { max-width: 60rem; }
.tke-video-list { display: grid; gap: var(--space-block); }
@media (min-width: 768px) {
  .tke-video-list { grid-template-columns: repeat(2, 1fr); gap: 3rem; }
}
.tke-video__frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden; background: var(--tke-fox);
  border: 1px solid var(--tke-line-soft);
}
.tke-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tke-video__frame--vertical { aspect-ratio: 4 / 5; max-width: 24rem; margin-inline: auto; background: var(--tke-cream); }
.tke-video-card h2, .tke-video-card h3 {
  font-size: 1.4rem; margin: 1.1rem 0 0; line-height: 1.25;
}
.tke-video-card__desc {
  margin: 0.6rem 0 0; color: var(--tke-stone);
  font-size: var(--size-small); line-height: 1.6;
}
.tke-video-single { margin-bottom: 2rem; }
.tke-video-single__back { margin-top: 1.5rem; }

.tke-pagination { margin-top: var(--space-block); display: flex; justify-content: center; gap: 0.75rem; }
.tke-pagination .page-numbers {
  font-size: var(--size-small); letter-spacing: var(--ls-nav);
  padding: 0.5rem 0.9rem; border: 1px solid transparent;
}
.tke-pagination .page-numbers.current { border-color: var(--tke-line); }

/* Post content images and WP alignment classes */
.alignwide { margin-inline: calc(50% - 50vw); width: 100vw; max-width: 100vw; }
.aligncenter { margin-inline: auto; }
figure { margin: 2.5rem 0; }
figcaption { font-size: var(--size-caption); letter-spacing: 0.06em; color: var(--tke-stone); margin-top: 0.75rem; }
.wp-block-image img { width: 100%; }

/* -------------------------------------------------------------------------
   15. About page
   ------------------------------------------------------------------------- */
.tke-about-grid { display: grid; gap: var(--space-block); }
.tke-about-grid__media img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
@media (min-width: 900px) {
  .tke-about-grid { grid-template-columns: 5fr 6fr; gap: clamp(3rem, 8vw, 7rem); align-items: start; }
  .tke-about-grid__media { position: sticky; top: 7rem; }
}

/* -------------------------------------------------------------------------
   17. Reveal on scroll (progressive enhancement, JS adds .is-visible)
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .tke-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
  .tke-reveal.is-visible { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------
   v2: Minimal era. Slideshow home, work index, case rail, colophon.
   ------------------------------------------------------------------------- */

/* Home slideshow: fills the window under the header */
.tke-slideshow {
  position: relative; overflow: hidden;
  height: calc(100svh - var(--tke-header-h, 4.5rem));
  min-height: 30rem; background: var(--tke-cream);
}
.tke-slideshow__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; filter: blur(14px);
  transition: opacity 1.2s var(--ease), filter 1.2s var(--ease);
}
.tke-slideshow__img.is-visible { opacity: 1; filter: blur(0); }
.tke-slideshow__img[src=""] { visibility: hidden; }

/* Colophon. One quiet line; the page's only footer. */
.tke-colophon { border-top: 1px solid var(--tke-line-soft); background: var(--tke-dimity); }
.tke-colophon__line {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem;
  margin: 0; padding: 1.1rem 0;
  font-family: var(--font-ui);
  font-size: var(--size-caption); letter-spacing: 0.1em;
  color: var(--tke-stone);
}
.tke-colophon__links a { color: var(--tke-fox); }
.tke-colophon__links a:hover { opacity: 0.6; }
.tke-colophon__links span { margin: 0 0.35rem; color: var(--tke-line); }

/* Work index. v2.3.1: three cards to a line, image, name, one line.
   In-progress and completed sections each run their own grid. */
.tke-work { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3rem); }
/* v2.4: the portfolio breathes wider than the standard column so three
   portrait cards read large, near full-bleed with slim margins. */
.tke-work .tke-container { width: min(100% - 3rem, 96rem); }
.tke-work__section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3rem) clamp(1rem, 2vw, 1.5rem);
}
.tke-work__section + .tke-work__section { margin-top: clamp(2.5rem, 5vw, 4rem); }
.tke-work__entry { margin: 0; }
.tke-work__media { display: block; overflow: hidden; background: var(--tke-cream); }
.tke-work__media img {
  width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover;
  display: block; transition: transform 1.1s var(--ease);
}
a.tke-work__media:hover img { transform: scale(1.02); }
.tke-work__name {
  margin: 0.9rem 0 0; font-size: 1.2rem; font-weight: 500; letter-spacing: 0.01em;
}
.tke-work__line { margin: 0.35rem 0 0; color: var(--tke-stone); font-size: 1.05rem; }
.tke-work__status { margin: 0.3rem 0 0; color: var(--tke-stone); font-size: 1.05rem; }
.tke-work__status em { font-family: var(--font-serif); font-style: italic; }

@media (max-width: 900px) { .tke-work__section { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tke-work__section { grid-template-columns: 1fr; } }

/* Case: sticky rail left, images right, minimal air */
.tke-case { display: grid; gap: 1.5rem; padding: clamp(1rem, 2vw, 1.75rem) clamp(1rem, 2.5vw, 2rem) clamp(2rem, 4vw, 3rem); }
.tke-case__rail { min-width: 0; }
.tke-case__title { font-size: clamp(1.35rem, 2.1vw, 1.8rem); margin: 0 0 1rem; }
.tke-case__story { margin-top: 1.6rem; }
.tke-case__story p { font-size: 1.12rem; line-height: 1.7; margin: 0 0 1.1em; }
.tke-case__story p:last-child { margin-bottom: 0; }
.tke-case .tke-annotation { max-width: none; padding-top: 0.25rem; }
.tke-case .tke-annotation__text { font-size: 1.15rem; line-height: 1.55; }
.tke-case__details { margin: 1.5rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--tke-line-soft); }
/* v2.1: fixed label column so every value starts on the same vertical line,
   regardless of label length (Photography included). */
.tke-case__details div { display: grid; grid-template-columns: 8.25rem 1fr; column-gap: 1rem; align-items: baseline; margin-bottom: 0.45rem; }
.tke-case__details dt {
  font-size: var(--size-caption); letter-spacing: var(--ls-nav);
  text-transform: uppercase; color: var(--tke-stone);
}
.tke-case__details dd { margin: 0; font-size: 1.05rem; }
.tke-case__back { margin: 1.75rem 0 0; }

/* v2.1 gallery: landscape images take the full column on their own line,
   portrait images pair two to a line, with tight spacing between them. */
.tke-case__images { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; min-width: 0; max-width: 58rem; align-items: start; }
.tke-case__image { margin: 0; background: var(--tke-cream); }
.tke-case__image img { width: 100%; height: auto; display: block; }
.tke-case__image--wide { grid-column: 1 / -1; }
/* Portrait pairs are equalized so rows sit flush. */
.tke-case__image--tall img { aspect-ratio: 4 / 5; height: auto; object-fit: cover; }

@media (max-width: 640px) {
  .tke-case__images { grid-template-columns: 1fr; }
  .tke-case__image--tall img { aspect-ratio: auto; object-fit: initial; }
}

@media (min-width: 900px) {
  .tke-case { grid-template-columns: minmax(19rem, 5fr) 7fr; gap: clamp(1.75rem, 3.5vw, 3.25rem); align-items: start; }
  /* v2.1: the rail text sits inset from its column edges, so the words
     carry more negative space around them. */
  .tke-case__rail {
    position: sticky; top: calc(var(--tke-header-h, 4rem) + 1.5rem);
    max-height: calc(100vh - var(--tke-header-h, 4rem) - 3rem);
    overflow: auto;
    padding: clamp(1rem, 2vw, 2rem) clamp(1.5rem, 3vw, 3rem) 1rem clamp(0.75rem, 1.5vw, 1.5rem);
  }
}

/* About, minimal: text left, portrait right */
.tke-aboutmin { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 900px) {
  /* v2.6: no sticky anywhere in this layout. The section is exactly one
     screen tall; the image side is simply placed and cannot move; the
     text column scrolls internally within its own space. */
  .tke-aboutmin__grid {
    display: grid; grid-template-columns: 7fr 5fr;
    gap: clamp(2rem, 4vw, 3.5rem); align-items: stretch;
    height: calc(100svh - var(--tke-header-h, 4rem) - 9rem);
    min-height: 30rem;
  }
  .tke-aboutmin__portrait { margin: 0; min-height: 0; }
  /* v2.7.3: the portrait sits at its natural size in a narrower column,
     rather than filling the full section height. */
  .tke-aboutmin__pin { height: auto; }
  .tke-aboutmin__pin img { width: 100%; height: auto; object-fit: initial; max-height: calc(100svh - var(--tke-header-h, 4rem) - 16rem); object-fit: cover; object-position: center 25%; }
  .tke-aboutmin__statement { margin-top: 0.5rem; }
  .tke-aboutmin__text {
    overflow-y: auto; min-height: 0;
    padding: clamp(1rem, 2vw, 2rem) clamp(2rem, 4vw, 4rem) 2rem clamp(0.75rem, 1.5vw, 1.5rem);
    scrollbar-width: thin; scrollbar-color: var(--tke-line) transparent;
  }
  .tke-aboutmin__text::-webkit-scrollbar { width: 6px; }
  .tke-aboutmin__text::-webkit-scrollbar-thumb { background: var(--tke-line); border-radius: 3px; }
  .tke-aboutmin__text::-webkit-scrollbar-track { background: transparent; }
}
.tke-aboutmin__portrait { margin: 0 0 1rem; }
/* v2.5.2: the image is sized so image plus caption always fit within one
   screen below the pinned header. That gives the pin room to hold, and
   the caption is visible without scrolling. */
.tke-aboutmin__portrait img { width: 100%; height: auto; display: block; max-height: calc(100vh - var(--tke-header-h, 4rem) - 9rem); object-fit: cover; object-position: center 25%; }
.tke-aboutmin__caption {
  margin-top: 0.7rem;
  font-family: var(--font-body); font-style: italic; font-weight: 600;
  font-size: 1.05rem; letter-spacing: 0.01em; text-transform: none;
  color: var(--tke-stone); background: none;
}
/* v2.7.6: the opening statement pairs with the name heading below: one
   shared rule, proper heading size, serif, uppercase, not bold. */
.tke-aboutmin__statement,
.tke-aboutmin__principal-name {
  font-family: var(--font-display); font-size: var(--size-h3);
  letter-spacing: 0.06em; text-transform: uppercase; font-weight: 400;
  color: var(--tke-fox); line-height: 1.45;
}
.tke-aboutmin__statement { margin: clamp(2rem, 4vw, 3rem) 0 1.5rem; max-width: 30em; text-wrap: balance; }
.tke-aboutmin__principal-role {
  font-family: var(--font-ui); font-size: 0.95rem;
  letter-spacing: var(--ls-nav); text-transform: uppercase; font-weight: 400;
  color: var(--tke-stone); line-height: 1.9;
}
.tke-aboutmin__body { max-width: 40rem; }
.tke-aboutmin__body p { font-size: 1.22rem; line-height: 1.7; margin: 0 0 1.4em; }
.tke-aboutmin__body p:last-child { margin-bottom: 0; }

/* v2.1: The Principal. A quiet named section so the studio's story and
   Mimi's story live on the same page. */
.tke-aboutmin__principal { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(1.75rem, 3vw, 2.5rem); border-top: 1px solid var(--tke-line-soft); max-width: 40rem; }
.tke-aboutmin__principal-name { margin: 0 0 0.35rem; }
.tke-aboutmin__principal-role { margin: 0 0 1.4rem; }
.tke-aboutmin__principal p { font-size: 1.22rem; line-height: 1.7; margin: 0 0 1.4em; }
.tke-aboutmin__principal p:last-child { margin-bottom: 0; }

/* Home: header overlays the slideshow, near-transparent glass */
/* v2.1.2: the homepage uses the same sticky, 50% Smoke header as every
   other page. The old .home overrides (absolute position, 5% background,
   100svh slideshow) are retired: the absolute header sat under the WP
   admin bar and clipped, and the 5% background was unreadable over dark
   photography. The slideshow's base height already fills the viewport
   below the header. */