/* TolK v6: a continuous project story, using the agency's existing type and
   source Figma screens. Variance 8 / motion 4 / density 6. No global restyling. */
.tc-chapter-nav { display: flex; flex-wrap: wrap; gap: .5rem; padding-block: 2rem 0; scroll-margin-top: 5rem; }
.tc-chapter-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .75rem 1rem; border: 1px solid var(--tc-rule); font: .75rem/1.4 var(--font-mono), monospace; text-decoration: none; }
.tc-chapter-nav a:hover { background: var(--tc-ink); color: var(--tc-paper); }
.tc-chapter { padding-top: var(--tc-section-space); }
.tc-chapter .tc-section-heading { margin-bottom: 2rem; }
.tc-chapter .tc-section-heading > p { max-width: 48rem; }
.tc-chapter-people { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-block: 1.5rem 2rem; }
.tc-chapter-people .tc-stage-team { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding: 0; margin: 0; border: 0; }
.tc-chapter-people .tc-team-label { display: none; }
.tc-chapter-people .tc-person { width: auto; grid-template-columns: 2.75rem minmax(0, 1fr); }
.tc-chapter-people .tc-person-photo { width: 2.75rem; height: 2.75rem; }
.tc-chapter-people .tc-person-name { font: .8125rem/1.4 var(--font-mono), monospace; }
.tc-chapter-people .tc-person-role { font-size: .6875rem; }
.tc-exhibit { margin: 0; min-width: 0; }
.tc-exhibit .tc-image-link { background: var(--tc-surface); }
.tc-exhibit-viewport { min-width: 0; background: var(--tc-paper); }
.tc-exhibit--long .tc-exhibit-viewport { overflow: auto; scrollbar-gutter: stable; }
.tc-exhibit-viewport:focus-visible { outline-offset: -3px; }
.tc-exhibit img { width: 100%; height: auto; display: block; }
.tc-exhibit figcaption { display: flex; justify-content: space-between; gap: 1rem; padding-block: .75rem 0; font: .75rem/1.4 var(--font-mono), monospace; color: var(--tc-quiet); }
.tc-exhibit figcaption span:last-child { color: var(--tc-ink); }
.tc-exhibit .tc-image-hint { opacity: 0; transition: opacity 150ms ease; }
.tc-exhibit .tc-image-link:is(:hover, :focus-visible) .tc-image-hint { opacity: 1; }
.tc-concept-stage { background: var(--tc-stage-bg); padding: 1rem; }
.tc-page .tc-concept-stage [data-tc-concepts] { padding: 0; background: transparent; }
.tc-concept-stage .tc-concept-controls { width: 100%; align-self: center; }
.tc-concept-stage [data-concept-panel] .tc-image-link { aspect-ratio: 1440/740; display: flex; align-items: center; justify-content: center; }
.tc-concept-stage [data-concept-panel] img { width: 100%; height: 100%; object-fit: contain; }
.tc-concept-stage .tc-concept-controls button { min-height: 4rem; }
.tc-page .tc-concept-stage .tc-concept-controls button img { aspect-ratio: 1440/740; height: auto; object-fit: contain; }
.tc-gallery-intro { display: grid; gap: 1.5rem; margin-block: 3rem 1.5rem; }
.tc-gallery-intro p { font: .875rem/1.45 var(--font-mono), monospace; max-width: 42rem; color: var(--tc-quiet); }
:is(.tc-structure-details, .tc-mobile-rail) .tc-exhibit { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
:is(.tc-structure-details, .tc-mobile-rail) .tc-exhibit-viewport { height: var(--tc-media-height); }
:is(.tc-structure-details, .tc-mobile-rail) .tc-exhibit:not(.tc-exhibit--long) .tc-image-link { height: 100%; display: flex; align-items: center; justify-content: center; }
:is(.tc-structure-details, .tc-mobile-rail) .tc-exhibit:not(.tc-exhibit--long) img { width: 100%; height: 100%; object-fit: contain; }
:is(.tc-structure-details, .tc-mobile-rail) figcaption { min-height: 3rem; align-items: start; }
/* Full pages stay readable at card width; native scrolling continues into the page at each edge. */
.tc-full-design-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-auto-rows: clamp(22rem, 65svh, 30rem); gap: 1rem; }
.tc-full-page { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: .75rem; min-width: 0; min-height: 0; margin: 0; padding: 1rem; background: var(--tc-scene-bg); color: var(--tc-ink); }
.tc-full-page-preview { min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; background: var(--tc-paper); }
.tc-full-page-preview:focus-visible, .tc-full-page-link:focus-visible { outline-offset: -3px; }
.tc-full-page-link { display: block; width: 100%; cursor: zoom-in; }
.tc-full-page-link img { display: block; width: 100%; max-width: none; height: auto; }
.tc-full-page-caption { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: start; font: .75rem/1.4 var(--font-mono), monospace; }
.tc-full-page-caption > span:first-child { overflow-wrap: anywhere; }
.tc-full-page-affordance { white-space: nowrap; color: var(--tc-quiet); }
@media (min-width: 48rem) {
  .tc-full-design-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 15rem; gap: 1.5rem; }
  .tc-full-page--feature, .tc-full-page--wide, .tc-full-page--tall { grid-row: span 2; }
}
@media (min-width: 75rem) {
  .tc-full-design-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tc-full-page { grid-column: span 2; }
  .tc-full-page--feature { grid-column: span 3; }
  .tc-full-page--wide { grid-column: span 4; }
}
.tc-design-wall { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.tc-design-screen { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 1rem; min-width: 0; min-height: 0; height: clamp(19rem, 84vw, 29rem); margin: 0; padding: 1rem; background: var(--tc-surface); }
.tc-design-screen-media { min-width: 0; min-height: 0; }
.tc-design-screen .tc-image-link { display: flex; justify-content: center; align-items: center; height: 100%; }
.tc-design-screen .tc-image-link img { width: 100%; height: 100%; max-width: var(--tc-screen-width); object-fit: contain; }
.tc-design-screen figcaption { display: flex; align-items: start; justify-content: space-between; gap: .75rem; font: .75rem/1.4 var(--font-mono), monospace; color: var(--tc-ink); }
.tc-design-screen figcaption > span:last-child { flex-shrink: 0; }
.tc-design-screen--projects { background: var(--tc-stage-bg); }
.tc-design-screen--projects figcaption { color: var(--tc-paper); }
.tc-design-screen--residential { height: 42rem; background: var(--tc-scene-bg); }
.tc-design-screen--mortgage { height: 36rem; background: var(--tc-scene-bg); }
.tc-design-screen .tc-image-hint { opacity: 0; transition: opacity 150ms ease; }
.tc-design-screen .tc-image-link:is(:hover, :focus-visible) .tc-image-hint { opacity: 1; }
@media (hover: none) { .tc-design-screen .tc-image-hint { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tc-design-screen .tc-image-hint { transition: none; } }
.tc-mobile-showcase { margin-top: var(--tc-section-space); background: var(--tc-scene-bg); padding: 2rem 1rem; }
.tc-mobile-showcase .tc-section-heading { margin-bottom: 2rem; }
.tc-mobile-rail { --tc-media-height: 31rem; display: grid; grid-auto-flow: column; grid-auto-columns: 78%; align-items: stretch; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 0; padding-bottom: 1rem; }
.tc-mobile-rail > figure { scroll-snap-align: start; }
.tc-mobile-rail .tc-image-link { background: var(--tc-paper); }
.tc-mobile-rail img { width: 100%; height: auto; }
.tc-mobile-rail figcaption { color: var(--tc-ink); }
.tc-mobile-rail:focus-visible { outline: 2px solid var(--tc-focus); outline-offset: 4px; }
.tc-structure-board { padding: 1rem; background: var(--tc-surface); }
.tc-structure-notes { display: grid; gap: 1.5rem; margin-block: 2rem; }
.tc-structure-notes > div { padding-top: 1.5rem; border-top: 1px solid var(--tc-rule); }
.tc-structure-notes h4 { margin: 0; font: 400 1.5rem/1.25 var(--font-sans), sans-serif; letter-spacing: -.02em; overflow-wrap: anywhere; }
.tc-structure-notes p { margin-top: 1rem; color: var(--tc-quiet); font: .875rem/1.5 var(--font-mono), monospace; }
.tc-structure-details { --tc-media-height: clamp(20rem, 70vw, 30rem); display: grid; gap: 1.5rem; }
.tc-structure-details .tc-exhibit { padding: 1rem; background: var(--tc-surface); }
.tc-structure-board + .tc-structure-details { margin-top: 1.5rem; }
.tc-user-story-map figcaption { align-items: center; flex-wrap: wrap; gap: .5rem 1rem; }
.tc-user-story-map figcaption a { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; color: var(--tc-ink); text-decoration: underline; text-underline-offset: .2em; }
.tc-seo-structure-map .tc-exhibit-viewport { overflow: visible; }
.tc-seo-structure-map .tc-image-link { white-space: normal; }
.tc-seo-structure-map .tc-image-link img { width: 100%; height: auto; max-height: 42rem; object-fit: contain; background: #fff; }
/* Research stays visual: scenarios, source boards, then the interface decisions. */
.tc-research-opening { display: grid; gap: 1.5rem; }
.tc-research-context { display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; }
.tc-research-context .tc-section-heading { margin-bottom: 0; }
.tc-research-context .tc-section-heading > p { max-width: 34rem; }
.tc-research-context .tc-chapter-people { margin-block: 0; }
.tc-research-insight { display: grid; gap: 1.5rem; padding: 1.5rem; background: var(--tc-scene-bg); color: var(--tc-ink); }
.tc-research-insight .tc-label { color: var(--tc-ink); }
.tc-research-insight-lead { max-width: 27rem; font: 400 1.75rem/1.2 var(--font-sans), sans-serif; letter-spacing: -.04em; }
.tc-research-implications { display: grid; gap: 1rem; margin: 0; padding: 1.25rem 0 0; border-top: 1px solid var(--tc-rule); list-style: none; }
.tc-research-implications li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: .75rem; font: .875rem/1.45 var(--font-mono), monospace; letter-spacing: -.04em; }
.tc-research-scenarios { display: grid; gap: 1.5rem; margin: 2rem 0 0; padding: 1.5rem 0; border-block: 1px solid var(--tc-rule); list-style: none; }
.tc-research-scenarios > li { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; min-height: 6.5rem; align-items: center; }
.tc-scenario-drawing { display: block; width: 100%; height: 5rem; color: var(--tc-ink); }
.tc-scenario-paper { fill: var(--tc-surface); }
.tc-scenario-accent { fill: var(--tc-scene-bg); }
.tc-scenario-name { font: 400 1.125rem/1.3 var(--font-sans), sans-serif; letter-spacing: -.02em; }
.tc-scenario-detail { margin-top: .5rem !important; font: .8125rem/1.45 var(--font-mono), monospace; letter-spacing: -.04em; color: var(--tc-quiet); }
@media (min-width: 64rem) {
  .tc-research-scenarios { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .tc-research-scenarios > li { grid-template-columns: 8rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
  .tc-scenario-drawing { align-self: center; }
  .tc-scenario-name { min-height: 2.6em; }
}
@media (min-width: 80rem) {
  .tc-research-scenarios > li { align-items: center; }
  .tc-scenario-name { min-height: 0; }
}
@media (min-width: 64rem) {
  .tc-research-opening { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
  .tc-research-insight { padding: 2rem; }
  .tc-research-insight-lead { font-size: 2rem; }
}
@media (hover: none) { .tc-exhibit .tc-image-hint { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tc-exhibit .tc-image-hint { transition: none; } }
@media (min-width: 48rem) {
  .tc-structure-board { padding: 2rem; }
  .tc-structure-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .tc-structure-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tc-structure-details .tc-exhibit { padding: 1.5rem; }
  .tc-concept-stage { padding: 2.5rem; }
  .tc-page .tc-concept-stage .tc-concept-controls { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tc-design-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 16rem; gap: 1.5rem; grid-template-areas: "projects projects" "projects projects" "residential mortgage" "residential mortgage" "residential mortgage" "apartment masterplan" "apartment construction" "infrastructure finishes" "booking booking" "booking booking"; }
  .tc-design-screen { height: auto; padding: 1.5rem; }
  .tc-design-screen--projects { grid-area: projects; }
  .tc-design-screen--residential { grid-area: residential; }
  .tc-design-screen--apartment { grid-area: apartment; }
  .tc-design-screen--masterplan { grid-area: masterplan; }
  .tc-design-screen--construction { grid-area: construction; }
  .tc-design-screen--infrastructure { grid-area: infrastructure; }
  .tc-design-screen--finishes { grid-area: finishes; }
  .tc-design-screen--mortgage { grid-area: mortgage; }
  .tc-design-screen--booking { grid-area: booking; }
  .tc-mobile-showcase { padding: 2.5rem; }
  .tc-mobile-rail { --tc-media-height: 34rem; grid-auto-columns: 39%; gap: 1.5rem; }
}
@media (min-width: 64rem) {
  .tc-chapter-nav { padding-top: 2.5rem; }
  .tc-mobile-rail { grid-auto-columns: minmax(0, 1fr); overflow: visible; }
}
@media (min-width: 75rem) {
  .tc-design-wall { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 17rem; grid-template-areas: "projects projects projects residential mortgage" "projects projects projects residential mortgage" "apartment apartment masterplan residential mortgage" "apartment apartment construction infrastructure infrastructure" "finishes finishes finishes booking booking" "finishes finishes finishes booking booking"; }
}
@media (min-width: 40rem) {
  .tc-hero-visual .tc-stage-mobile { top: 2rem; height: calc(100% - 4rem); }
  .tc-hero-visual .tc-stage-mobile .tc-image-link { height: 100%; }
  .tc-hero-visual .tc-stage-mobile img { height: 100%; object-fit: contain; }
}