/* Studio (about) page — hero over the mesh, numbered principles, counters, statement, rooms, process strip,
   repair manifesto, CTA band. Everything reads from tokens.css; shared primitives (.cell, .coll-hero, .mesh,
   .spec, .facts, .join) come from sections.css / components.css. */

/* ---------- Hero ---------- */
.about-hero { min-height: clamp(560px, 78svh, 880px); }
.about-hero .mesh { opacity: 0.85; }
.about-hero .coll-hero__media img.is-loaded { opacity: 0.45; }
.about-hero .coll-hero__media::after { background: linear-gradient(180deg, rgb(9 9 11 / 0.6), rgb(9 9 11 / 0.2) 40%, var(--bg)); }
.about-hero__inner { gap: var(--s-5); }
@media (min-width: 900px) { .about-hero__inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: end; gap: var(--s-8); } }
.about-hero__title { font-size: clamp(2.75rem, 1.2rem + 6.4vw, 7.5rem); max-width: 11ch; margin-top: var(--s-4); }
.about-hero__side { display: grid; gap: var(--s-5); }
.about-hero__side p { font-size: var(--text-md); max-width: 44ch; }
.about-hero__marks { display: flex; flex-wrap: wrap; gap: 6px; }
@media (min-width: 900px) { .about-hero__side { padding-bottom: 0.4em; } }

/* Icons inside pills (city pin, wrench) */
.page-about .tag .ic { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Principles: numbered glass cells ---------- */
#principles .eyebrow { color: var(--fg); }
.about-principles { display: grid; gap: 12px; counter-reset: rule; }
@media (min-width: 600px) { .about-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1100px) { .about-principles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.about-principles .cell { min-height: 300px; align-content: space-between; gap: var(--s-6); }
@media (min-width: 1100px) { .about-principles .cell { min-height: 380px; } }
@media (max-width: 599.98px) { .about-principles .cell { min-height: 0; gap: var(--s-5); } }
.about-principle__n { font-family: var(--font-display); font-size: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); font-weight: 800; line-height: 0.8; letter-spacing: -0.05em; font-variation-settings: "opsz" 96; }
.about-principle__body { display: grid; gap: var(--s-3); }
.about-principle__body h3 { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.02em; }
.about-principle__body p { color: var(--fg-2); font-size: var(--text-sm); max-width: 38ch; }

/* ---------- Numbers strip ---------- */
.about-numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 800px) { .about-numbers { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.about-numbers .cell { min-height: 210px; }
.about-numbers .cell__big { margin-block: var(--s-3) var(--s-1); }
.about-numbers .cell__big small { font-size: 0.42em; font-weight: 700; letter-spacing: -0.02em; margin-left: 3px; }
.about-numbers .cell p { max-width: 24ch; }
@media (max-width: 479.98px) { .about-numbers .cell { padding: var(--s-4); min-height: 180px; } .about-numbers .cell__big { font-size: 2.4rem; } }

/* ---------- Statement ---------- */
.about-statement { display: grid; gap: var(--s-6); padding-top: var(--s-7); border-top: 1px solid var(--line); }
@media (min-width: 900px) { .about-statement { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-9); align-items: end; } }
.about-statement__text { font-size: clamp(2.6rem, 1.2rem + 5.6vw, 7rem); line-height: 0.92; letter-spacing: -0.045em; font-weight: 700; text-transform: uppercase; margin-top: var(--s-4); }
.about-statement__text .line { display: block; }
.about-statement > p { max-width: 42ch; }

/* ---------- Rooms ---------- */
.about-rooms { display: grid; gap: var(--s-4); }
@media (min-width: 720px) { .about-rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.room { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-3); overflow: hidden; background: var(--surface); border: 1px solid var(--line); isolation: isolate; transition: transform var(--t-base) var(--ease-expo), border-color var(--t-fast); }
@media (hover: hover) { .room:hover { transform: translateY(-3px); border-color: var(--line-strong); } .room:hover .media img { transform: scale(1.05); } }
.room__media { border-radius: 0; aspect-ratio: 16 / 10; }
@media (min-width: 720px) { .room__media { aspect-ratio: 4 / 5; } }
.room__media img { transform: scale(1.02); }
.room__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(9 9 11 / 0.35), transparent 32%, transparent 55%, rgb(9 9 11 / 0.9)); pointer-events: none; }
.room__tags { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 1; display: flex; justify-content: space-between; gap: 6px; }
.room__title { position: absolute; left: var(--s-5); right: var(--s-5); bottom: var(--s-5); z-index: 1; display: grid; gap: 6px; }
.room__title .mono { color: var(--fg-2); }
.room__title h3 { font-size: var(--text-xl); font-weight: 600; }
.room__body { display: grid; gap: var(--s-4); align-content: space-between; padding: var(--s-5); }
.room__body p { color: var(--fg-2); font-size: var(--text-sm); }
.room__facts { display: flex; flex-wrap: wrap; gap: 6px var(--s-4); color: var(--fg-3); }
.room__facts li { display: inline-flex; align-items: center; gap: 8px; }
.room__facts li + li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--lime); }

/* Visit band (Berlin hours + address) */
.about-visit { display: grid; gap: var(--s-5); margin-top: var(--s-5); padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--r-3); }
@media (min-width: 900px) { .about-visit { grid-template-columns: minmax(0, 1.3fr) auto auto; align-items: center; gap: var(--s-8); } }
.about-visit > div:first-child p { max-width: 46ch; }
.about-visit__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-6); }
.about-visit__facts div { display: grid; gap: 4px; }
.about-visit__facts dt { color: var(--fg-3); }
.about-visit__facts dd { font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
.about-visit address { font-style: normal; }
.about-visit .btn { justify-self: start; }
@media (min-width: 900px) { .about-visit .btn { justify-self: end; } }

/* ---------- Process: scroll-snap strip on phones, 4-up grid on desktop ---------- */
.process { display: flex; gap: 12px; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) var(--s-6); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.process::-webkit-scrollbar { display: none; }
.step { position: relative; flex: 0 0 min(78vw, 320px); scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-3); overflow: hidden; background: var(--surface); border: 1px solid var(--line); isolation: isolate; transition: transform var(--t-base) var(--ease-expo), border-color var(--t-fast); }
@media (hover: hover) { .step:hover { transform: translateY(-3px); border-color: var(--line-strong); } .step:hover .media img { transform: scale(1.05); } }
@media (min-width: 900px) { .process { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-inline: 0; padding: 0; overflow: visible; } .step { flex: none; } }
.step__media { aspect-ratio: 3 / 2; border-radius: 0; }
.step__media img { transform: scale(1.02); }
.step__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(9 9 11 / 0.3), transparent 40%); pointer-events: none; }
.step__n { position: absolute; top: 12px; left: 14px; z-index: 1; display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 26px; padding: 0 8px; color: var(--lime-ink); background: var(--lime); border-radius: var(--r-pill); }
.step__body { display: grid; gap: var(--s-3); padding: var(--s-5); align-content: start; }
.step__when { color: var(--fg-3); }
.step h3 { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.02em; }
.step p { color: var(--fg-2); font-size: var(--text-sm); }
.process__hint { display: inline-flex; align-items: center; gap: 10px; margin-top: calc(-1 * var(--s-3)); }
.process__arrow { width: 32px; height: 1px; background: var(--fg-3); position: relative; overflow: hidden; }
.process__arrow::after { content: ""; position: absolute; inset: 0; background: var(--lime); transform: translateX(-100%); animation: scan 2s var(--ease-in-out) infinite; }
@media (prefers-reduced-motion: reduce) { .process__arrow::after { animation: none; transform: none; } }

/* ---------- Repair manifesto ---------- */
.about-repair { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .about-repair { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-9); align-items: center; } }
.about-repair__media { aspect-ratio: 4 / 5; border-radius: var(--r-4); }
@media (max-width: 899.98px) { .about-repair__media { aspect-ratio: 3 / 2; } }
/* .media img's own transition outranks .mask-reveal > *, so restore the clip-path wipe here */
.about-repair__media img { transition: opacity var(--t-slow) var(--ease-out), transform 1.4s var(--ease-expo), clip-path 1.2s var(--ease-expo); }
@media (prefers-reduced-motion: reduce) { .about-repair__media img { transition: none; } }
.about-repair__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(9 9 11 / 0.2), transparent 40%, rgb(9 9 11 / 0.45)); pointer-events: none; }
.about-repair__tag { position: absolute; top: 14px; left: 14px; z-index: 1; }
.about-repair__text { display: grid; gap: var(--s-5); }
.about-repair__text > p { max-width: 52ch; }
.about-repair__text .spec { max-width: 560px; }
.about-repair__text .spec dd { margin: 0; }
.about-repair__text .facts { max-width: 52ch; }
.about-repair__text .facts li { align-items: start; }
.about-repair__text .facts svg { margin-top: 2px; }
.about-repair__actions { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center; }
@media (pointer: coarse) { .about-repair__actions .link { min-height: var(--tap); } }

/* ---------- CTA band ---------- */
.about-cta__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (min-width: 900px) { .about-cta__actions { justify-content: end; } }
.about-cta__press { color: var(--fg-3); }
.about-cta__press a { display: inline-block; padding: 6px 0; margin: -6px 0; color: var(--fg-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--fg-3); transition: color var(--t-fast), text-decoration-color var(--t-fast); }
@media (pointer: coarse) { .about-cta__press a { padding: 14px 0; margin: -14px 0; } }
.about-cta__press a:hover { color: var(--fg); text-decoration-color: var(--lime); }