/* Version 09: shared, surface-aware presentation across all 13 pages. */
:root {
  --tm-orange: #ff6600;
  --tm-blue: #06d0ff;
  --tm-orange-text: #ff6600;
  --tm-blue-text: #06d0ff;
  --tm-hover: var(--tm-orange-text);
  --tm-accent: var(--tm-orange);
  --tm-accent-text: var(--tm-orange-text);
  --tm-ink: #302d29;
  --tm-paper: #f4f0e8;
  --tm-light: #fbf8f2;
}
html { scroll-padding-top: 110px; }
body { min-width: 320px; }
[data-accent="orange"] { --tm-accent: var(--tm-orange); --tm-accent-text: var(--tm-orange-text); }
[data-accent="blue"] { --tm-accent: var(--tm-blue); --tm-accent-text: var(--tm-blue-text); }
[data-surface="dark"] { --tm-orange-text: var(--tm-orange); --tm-blue-text: var(--tm-blue); --tm-hover: var(--tm-orange); }
[data-surface="blue"] { --tm-orange-text: #ff6600; --tm-blue-text: var(--tm-blue); --tm-hover: #ff6600; }
/* A single header, wordmark and footer, independent of historical page styles. */
.tm-header { position:sticky; top:0; z-index:100; background:var(--tm-paper); border-bottom:1px solid #302d293b; color:var(--tm-ink); }
.tm-shell { width:min(100%,1440px); margin-inline:auto; padding-inline:clamp(20px,4.4vw,76px); box-sizing:border-box; }
.tm-header .tm-shell { min-height:84px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.tm-brand { display:inline-flex; gap:13px; align-items:center; flex-shrink:0; min-height:44px; text-decoration:none; }
.tm-brand img { width:40px; height:40px; }
.tm-wordmark { display:inline-block; white-space:nowrap; font-family:var(--sans); font-style:normal; font-weight:750; text-transform:none; letter-spacing:-.025em; line-height:1.4; }
.tm-brand .tm-wordmark { font-size:21px; }
.tm-thomas { color:var(--tm-blue) !important; }
.tm-media { color:var(--tm-orange) !important; }
.tm-nav, .tm-footer-nav { display:flex; gap:clamp(18px,2.5vw,36px); align-items:center; }
.tm-nav a, .tm-footer-nav a { display:inline-flex; align-items:center; min-height:44px; color:var(--tm-ink); font:700 13px/1.4 var(--sans); letter-spacing:.035em; text-transform:none; text-decoration:none; text-underline-offset:.45em; text-decoration-thickness:2px; }
.tm-nav a[aria-current], .tm-footer-nav a[aria-current] { text-decoration:underline; text-decoration-color:var(--tm-orange-text); }
.tm-brand:hover .tm-wordmark, .tm-nav a:hover, .tm-footer-nav a:hover { text-decoration:underline; text-underline-offset:.35em; text-decoration-color:var(--tm-orange-text); }
.tm-menu-toggle { display:none; align-items:center; gap:12px; min-height:44px; padding:8px 0; border:0; background:transparent; color:var(--tm-ink); font:650 14px/1.4 var(--sans); cursor:pointer; }
.tm-footer { background:var(--tm-paper); color:var(--tm-ink); padding-block:40px; border-top:1px solid #302d293b; }
.tm-footer .tm-shell { display:grid; grid-template-columns:auto 1fr; gap:30px 40px; align-items:center; }
.tm-footer-nav { justify-content:flex-end; flex-wrap:wrap; }
.tm-footer-legal { grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px; border-top:1px solid #302d293b; padding-top:16px; font:13px/1.5 var(--sans); }
.tm-footer-legal a { display:inline-flex; align-items:center; min-height:44px; }
.tm-footer-legal>span { margin-left:auto; }
/* The same mobile breakpoint and expanded menu on every page. */
@media(max-width:980px) {
  .tm-header .tm-shell { min-height:76px; flex-wrap:wrap; gap:0; }
  .js .tm-menu-toggle { display:inline-flex; }
  .tm-nav { width:100%; flex-direction:column; align-items:stretch; gap:0; padding-block:8px 18px; }
  .js .tm-nav { display:none; }
  .js .tm-nav.is-open { display:flex; }
  .tm-nav a { min-height:48px; }
  .tm-footer .tm-shell { grid-template-columns:1fr; gap:20px; }
  .tm-footer-nav { justify-content:flex-start; gap:12px 24px; }
  .tm-footer-legal>span { margin-left:0; }
}
/* Eyebrows and terminal punctuation share the section's readable accent. */
.tm-v08 :is(.eyebrow,.page-eyebrow,.tm-eyebrow,.website-offer__eyebrow,.book-offer__eyebrow,.culture-offer__eyebrow) {
  color:var(--tm-accent-text); font:750 clamp(14px,1.15vw,16px)/1.5 var(--sans); letter-spacing:.045em; text-transform:none; margin:0 0 20px;
}
.tm-v08 :is(.hero-punctuation,.tm-punctuation) { color:var(--tm-accent-text); font-style:normal; }
.tm-v08 .hero-dot { background:var(--tm-accent); }
.tm-v08 .method__number { color:var(--tm-orange-text); }
.profile-fields__list article h3 { margin-top:0; }
.project-entry__heading .tm-eyebrow { grid-column:1/-1; }
.project-index a { grid-template-columns:minmax(0,1fr); }
.project-index { list-style:none; }
/* Links are recognizable before hover; controls keep their separate button role. */
.tm-v08 main a { text-decoration-line:underline !important; text-decoration-thickness:1px !important; text-underline-offset:.24em !important; text-decoration-color:currentColor !important; }
.tm-v08 main a:has(>img) { text-decoration:none !important; }
.tm-v08 :is(.cta,.website-offer__cta,.book-offer__cta,.culture-offer__cta,.cta-link,.home-contact-link,.section-route,.detail-next a) { border-bottom:0; }
.tm-v08 :is(.cta,.website-offer__cta,.book-offer__cta,.culture-offer__cta)>span { font:inherit; }
.tm-v08 :is(.section-route,.project-context-link,.source-link,.detail-back) { text-transform:none; letter-spacing:0; }
/* This small set of important declarations intentionally overrides all old hover families. */
.tm-v08 a:any-link:hover, .tm-v08 button:hover { color:var(--tm-hover) !important; }
.tm-v08 a:any-link:hover :where(strong,span) { color:inherit; }
.tm-v08 :is(a,button,input,textarea,[tabindex]):focus-visible { outline:3px solid var(--tm-hover); outline-offset:5px; }
.tm-v08 .contact-form__submit { --tm-hover:var(--tm-orange-text-light,#ff6600); }
.tm-v08 .contact-form__submit:hover, .tm-v08 .contact-form__submit:focus-visible { background:var(--tm-light); border-color:var(--tm-light); }
.tm-v08 .contact-form__submit:focus-visible { outline-color:var(--tm-orange); }
.tm-v08 .contact-page__details a:hover :is(span,strong) { color:inherit; }
.tm-v08 .skip-link { --tm-hover:var(--tm-orange); }
/* All variant selectors: same typography, selected underline, hover and keyboard focus. */
.tm-v08 :is(.variant-picker,.website-offer__tabs,.book-offer__tabs,.culture-offer__tabs) { display:flex; flex-wrap:wrap; gap:clamp(16px,2vw,24px); }
.tm-v08 :is(.variant-picker,.website-offer__tabs,.book-offer__tabs,.culture-offer__tabs)[hidden] { display:none; }
.tm-v08 :is(.variant-picker,.website-offer__tabs,.book-offer__tabs,.culture-offer__tabs) button { position:relative; font:400 18px/1.4 var(--sans); min-height:44px; color:inherit; }
.tm-v08 :is(.variant-picker,.website-offer__tabs,.book-offer__tabs,.culture-offer__tabs) button[aria-selected="true"] { font-weight:750; }
.tm-v08 :is(.variant-picker,.website-offer__tabs,.book-offer__tabs,.culture-offer__tabs) button::after { content:none; }
.tm-v08 :is(.variant-picker,.website-offer__tabs,.book-offer__tabs,.culture-offer__tabs) button[aria-selected="true"]::after { content:""; position:absolute; bottom:2px; left:0; right:0; height:2px; background:currentColor; }
.tm-v08 .controls { display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; padding:0 0 24px; }
.tm-v08 .controls[hidden] { display:none; }
.tm-v08 .variant-picker { order:0; flex-basis:100%; }
.tm-v08 .rotation-button { order:1; }
.tm-v08 .arrows { order:2; display:flex; gap:12px; }
.tm-v08 .counter { display:none; }
.tm-v08 .section-rotation { gap:12px; margin:0 0 24px; }
.tm-v08 :is(.arrow,.section-rotation button) { border:1px solid currentColor; border-radius:50%; background:transparent; min-width:44px; width:44px; min-height:44px; height:44px; padding:8px; color:inherit; font:400 20px/1 var(--sans); }
.tm-v08 :is(.rotation-button,.section-rotation .section-rotation__toggle) { display:inline-flex; align-items:center; justify-content:center; min-width:120px; width:auto; height:44px; border:1px solid currentColor; border-radius:3px; background:transparent; color:inherit; padding:8px 12px; font:400 13px/1.4 var(--sans); }
.tm-v08 :is(.arrow,.rotation-button,.section-rotation button):hover { background:transparent; }
/* Safari: an intrinsic image size prevents the mobile grid's image row collapsing. */
.tm-v08 .picture-frame { width:100%; min-width:0; }
.tm-v08 .picture img { position:static; display:block; width:100%; height:auto; aspect-ratio:1440/1050; object-fit:cover; }
@media(max-width:1100px) {
  .tm-v08 .picture { display:block; grid-row:1; grid-column:1; }
  .tm-v08 .picture-frame { aspect-ratio:auto; margin-top:20px; }
  .tm-v08 .picture figcaption { padding-top:12px; }
}
@media(max-width:420px) {
  .tm-brand .tm-wordmark { font-size:19px; }
  .tm-brand { gap:10px; }
  .tm-v08 .hero h1 { font-size:clamp(43px,11vw,55px); }
}
/* Keep brand spelling legible in the existing portrait caption as well. */
.tm-v08 .profile-entry__portrait figcaption { text-transform:none; color:var(--tm-ink); }

/* V09: only the exact brand accent colours, including all hover/focus states. */
.tm-v08 .method__number {color:var(--tm-accent)}
.tm-v08 .profile-entry__copy > .tm-eyebrow {white-space:nowrap;letter-spacing:.025em}
/* Preserve the complete landscape view; the landscape photograph sits beside the text in the existing project grid. */
.tm-v08 #philanthropen figure {width:100%;max-width:none;justify-self:stretch}
.tm-v08 #philanthropen figure img {width:100%;height:auto;aspect-ratio:auto;max-height:none;object-fit:contain}
.tm-v08 #philanthropen h2 {max-width:18ch}
.tm-v08 .profile-fields {background:var(--tm-light);padding:clamp(56px,7vw,104px) 0}
.tm-v08 .profile-fields__heading {display:block;margin-bottom:clamp(48px,6vw,88px)}
.tm-v08 .profile-fields h2 {font:500 clamp(42px,5.6vw,88px)/1.04 var(--serif);letter-spacing:-.045em;margin:0;max-width:940px}

/* Shared full-width facts tables below photograph and narrative. */
.tm-v08 :is(#molodovsky,#cramer-klett,#franz-zell,#keetman,#philanthropen) > .project-facts {grid-column:1/-1;grid-row:2;margin:0;min-width:0}
.tm-v08 :is(#molodovsky,#cramer-klett,#franz-zell,#keetman,#philanthropen) > .project-facts > div {grid-template-columns:minmax(100px,160px) minmax(0,1fr);gap:clamp(20px,3vw,48px)}
.tm-v08 :is(#molodovsky,#cramer-klett,#franz-zell,#keetman,#philanthropen) .project-facts dd {min-width:0;overflow-wrap:anywhere}
@media(max-width:900px){.tm-v08 :is(#molodovsky,#cramer-klett,#franz-zell,#keetman,#philanthropen) > .project-facts {margin-top:32px}}
@media(max-width:480px){.tm-v08 :is(#molodovsky,#cramer-klett,#franz-zell,#keetman,#philanthropen) > .project-facts > div {grid-template-columns:80px minmax(0,1fr);gap:16px}}

/* Pending press entries have no visible placeholder. */
.tm-v08 .project-facts > [hidden] {display:none}
/* Franz Zell: gently portrait crop retaining the full house, landscape and tree trunk. */
.tm-v08 #franz-zell > figure img {width:100%;height:auto;aspect-ratio:49/50;max-height:none;object-fit:cover;object-position:63% center}

/* Keetman: full portrait montage on the right, responsive sources without cropping. */
.tm-v08 #keetman > figure picture {display:block}
.tm-v08 #keetman > figure img {display:block;width:100%;height:auto;aspect-ratio:3/4;max-height:none;object-fit:contain}

/* Clinic project: complete portrait photograph left, all editorial text right. */
.tm-v08 #philanthropen > figure picture {display:block}
.tm-v08 #philanthropen > figure img {display:block;width:100%;height:auto;aspect-ratio:3/4;max-height:none;object-fit:contain}

/* Selected projects: a balanced closing section opens up the full range of work. */
.tm-v08 .project-principle__grid {grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.tm-v08 .project-principle__heading,.tm-v08 .project-principle__copy {min-width:0}
.tm-v08 .project-principle h2 {font-size:clamp(38px,4.1vw,64px);line-height:1.08;letter-spacing:-.035em;max-width:none;margin:0}
.tm-v08 .project-principle h2 > span {display:block}
.tm-v08 .project-principle h2 > span + span {margin-top:.2em}
.tm-v08 .project-principle__copy {border:0;padding:0}
.tm-v08 .project-principle__copy p {margin:0;font:400 clamp(18px,1.5vw,23px)/1.6 var(--sans);color:var(--tm-ink)}
.tm-v08 .project-principle__copy p + p {margin-top:1.1em}
@media(max-width:900px){.tm-v08 .project-principle__grid {grid-template-columns:minmax(0,1fr);gap:32px}}