/* Mantra Studio Design : tokens + base
   Brand system per DESIGN-PLAN.md section 2. */

@font-face {
  font-family: 'Anton';
  src: url('../fonts/anton-v27-latin-ext_latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-v31-latin-ext_latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-v31-latin-ext_latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-v31-latin-ext_latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-v31-latin-ext_latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-v31-latin-ext_latin-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* native UI (form controls, scrollbars, select popups) follows the theme */
  color-scheme: light;

  /* colors */
  --yellow: #F7EFA3;   /* butter yellow, dominant brand color */
  --blue:   #1D35C8;   /* cobalt, used sparingly, 1 section max per page */
  --gray:   #CFCFCD;   /* light warm gray */
  --sand:   #F3EFE6;   /* warm sand, quiet section tint (from the renders) */
  --sand-deep: #E8E2D6; /* deeper greige, about/editorial moments */
  --ink:    #111111;   /* near-black text and bands */
  --bg:     #FAFAF7;   /* off-white page base */
  --white:  #FFFFFF;

  /* type */
  --font-display: 'Anton', 'Oswald', sans-serif;
  --font-body: 'Montserrat', 'Inter', sans-serif;

  /* scale (fluid) */
  --display-xl: clamp(3.2rem, 11vw, 9rem);
  --display-lg: clamp(2.4rem, 7vw, 5.5rem);
  --display-md: clamp(1.6rem, 4vw, 3rem);
  --body: clamp(1rem, 1.1vw, 1.125rem);
  --label: 0.8rem;

  /* spacing */
  --section-pad: clamp(4rem, 10vw, 9rem);
  --gutter: clamp(1.25rem, 4vw, 4rem);

  /* surfaces that vary with the theme */
  --glass: rgba(250, 250, 247, 0.72);      /* hero panel */
  --nav-glass: rgba(250, 250, 247, 0.85);  /* scrolled nav */
  --line: rgba(17, 17, 17, 0.15);          /* thin rails */
  --muted: rgba(17, 17, 17, 0.55);         /* secondary text on --bg */
  --hover-tint: rgba(17, 17, 17, 0.05);
  --danger: #A32B20;                       /* form error text on --bg */
}

/* dark theme: warm near-black, same yellow accent, black bands stay black
   (they are brand, not surface). Default is light; user choice persists. */
html[data-theme="dark"] {
  color-scheme: dark;
  --yellow: #E9DE8A;
  --gray: #3A3833;
  --sand: #201E1A;
  --sand-deep: #282520;
  --ink: #F2F0EB;
  --bg: #161513;
  --white: #FFFFFF;
  --glass: rgba(22, 21, 19, 0.72);
  --nav-glass: rgba(22, 21, 19, 0.85);
  --line: rgba(242, 240, 235, 0.18);
  --muted: rgba(242, 240, 235, 0.6);
  --hover-tint: rgba(242, 240, 235, 0.07);
  --danger: #F0A79C;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: 1.6;
}

/* line-height 1.16: enough clearance so the long comma-below on Ș/Ț never
   reaches the line underneath (0.92 swallowed it, 1.02 clipped, 1.1 still
   touched caps on the next line) */
h1, h2, h3, .display {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 1.16;
  letter-spacing: 0.01em;
  margin: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.label {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--label);
}

/* type hierarchy: three clear steps. Titles = Anton (visually heaviest),
   subtitle lines directly under a title = Montserrat 600 at body size,
   running text = smaller regular weight. */
.hero-support,
.teaser-sub,
.chapter-sub,
.contact-sub {
  font-weight: 600;
}
.statement-body p,
.manifesto-body p,
.faq-answer {
  font-size: 0.9rem;
}

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

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
/* the brand bands are hardcoded #111 in BOTH themes; in light theme --ink
   is #111 too, so the default focus ring would vanish there. Same rule as
   text on these bands: hardcoded ivory. */
.section-ink :focus-visible {
  outline-color: #FAFAF7;
}

/* section background helpers */
.section-yellow { background: var(--yellow); color: var(--ink); }
.section-blue   { background: var(--blue);   color: var(--white); }
.section-gray   { background: var(--gray);   color: var(--ink); }
.section-sand   { background: var(--sand);   color: var(--ink); }
.section-sand-deep { background: var(--sand-deep); color: var(--ink); }
.section-ink    { background: #111111;       color: #FAFAF7; }  /* brand band, theme-independent */
.section-bg     { background: var(--bg);     color: var(--ink); }

/* skip link */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--bg);
  padding: 0.75rem 1.25rem;
  z-index: 200;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--label);
}
.skip-link:focus {
  left: 0;
}

/* hairline rule */
.hairline {
  border: none;
  border-top: 1px solid var(--ink);
  margin: 0;
}
.section-ink .hairline,
.section-blue .hairline {
  border-top-color: var(--white);
}

/* bracketed labels already: .label : wrap content in literal parens in markup */

/* asterisk / spark glyph. Drawn, not typed: the emoji asterisk renders as a
   green glyph on some platforms and cannot be recoloured. This one strokes in
   currentColor, so it is ivory on the dark bands and ink on the light ones with
   no per-context rule. Size still comes from font-size, as the glyph did. */
.asterisk {
  font-size: 2rem;
  line-height: 1;
  display: inline-block;
}
.asterisk .ast {
  display: block;
  width: 1em;
  height: 1em;
  overflow: visible;
}

/* arrow links */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--label);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
.arrow-link .arrow-glyph {
  display: inline-block;
  transition: transform 200ms ease;
}



.arrow-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5em;
  height: 2.5em;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 1rem;
  transition: transform 200ms ease, background 200ms ease;
}


/* numbered rows (1) (2) (3): fixed columns so every description starts on
   the SAME vertical axis, independent of the title's length */
.num-row {
  display: grid;
  grid-template-columns: 3.5ch clamp(11rem, 24vw, 20rem) 1fr;
  column-gap: var(--gutter);
  align-items: baseline;
  padding: 1.25rem 0;
  border-top: 1px solid currentColor;
}
.num-row:last-child {
  border-bottom: 1px solid currentColor;
}
.num-row .num {
  font-family: var(--font-display);
  font-size: var(--display-md);
}
.num-row .num-name {
  font-family: var(--font-display);
  font-size: var(--display-md);
}
.num-row .num-desc {
  font-size: 0.9rem;
  max-width: 40ch;
}
@media (max-width: 720px) {
  .num-row {
    grid-template-columns: 3ch 1fr;
    row-gap: 0.35rem;
  }
  .num-row .num-desc {
    grid-column: 1 / -1;
    max-width: none;
  }
}

/* logo: real artwork (assets-src/logo-artboard3.png). Ink version on light
   surfaces, ivory version in dark theme and on the hardcoded brand bands. */
.logo {
  display: inline-flex;
  align-items: center;
}
.logo-img {
  display: block;
  height: 42px;
  width: auto;
}
.logo-img-light { display: none; }
html[data-theme="dark"] .logo-img-ink { display: none; }
html[data-theme="dark"] .logo-img-light { display: block; }
.section-ink .logo-img-ink { display: none; }
.section-ink .logo-img-light { display: block; }
.footer-logo { display: inline-block; }
.footer-logo .logo-img { height: 36px; }
.servicii-top .logo-img { height: 34px; }

/* nav */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem var(--gutter);
  background: transparent;
  transition: background 250ms ease, backdrop-filter 250ms ease;
}
.site-nav.is-scrolled {
  background: var(--nav-glass);
  backdrop-filter: blur(8px);
}
.site-nav .nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav .nav-links a {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--label);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.site-nav .nav-links a[aria-current="page"] { border-bottom-color: currentColor; }
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--label);
  color: inherit;
}

.nav-overlay {
  position: fixed;
  inset: 0;
  background: var(--yellow);
  z-index: 150;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.5rem;
  padding: var(--gutter);
  transform: translateY(-100%);
  transition: transform 300ms ease;
}
.nav-overlay.is-open {
  transform: translateY(0);
}
.nav-overlay a {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 12vw, 4rem);
  text-transform: uppercase;
}
.nav-overlay-close {
  position: absolute;
  top: 1.25rem;
  right: var(--gutter);
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: var(--ink);
}

@media (max-width: 720px) {
  .site-nav .nav-links { display: none; }
  .nav-toggle { display: block; }
}

/* project card */
.card {
  display: block;
}
.card .card-frame {
  overflow: hidden;
  background: var(--gray);
  aspect-ratio: 4 / 5;
}
.card .card-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.card .card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #777;
  font-size: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.card .card-name {
  font-family: var(--font-display);
  font-size: var(--display-md);
  margin-top: 1rem;
  border-bottom: 1px solid transparent;
  display: inline-block;
}

.card .card-meta {
  margin-top: 0.35rem;
}

/* full-width black/color band closer */
.band {
  padding: var(--section-pad) var(--gutter);
  text-align: left;
}
.band .band-headline {
  font-size: var(--display-lg);
}

/* footer */
.site-footer {
  padding: var(--section-pad) var(--gutter) 2rem;
  position: relative;
}
.site-footer .footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
}
.site-footer .footer-line {
  font-family: var(--font-display);
  font-size: var(--display-md);
  max-width: 20ch;
}
.site-footer .footer-contact {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.site-footer .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 3rem;
  font-size: var(--label);
  opacity: 0.7;
}
.site-footer .footer-arrow {
  position: absolute;
  right: var(--gutter);
  bottom: 2rem;
  z-index: 1;
  background: none;
  color: inherit;
  cursor: pointer;
  font-family: var(--font-body);
}
/* Hover only where a real pointer exists. On a touch screen :hover LATCHES
   after a tap, so the button stayed inverted bright-white for the rest of the
   session: that is what Mirel hit in the Instagram in-app browser. Touch gets a
   brief :active instead, which releases on its own. */
@media (hover: hover) and (pointer: fine) {
  .site-footer .footer-arrow:hover {
    background: #FAFAF7;
    color: #111111;
    transform: translateY(-2px);
  }
}
.site-footer .footer-arrow:active {
  transform: translateY(-1px);
  opacity: 0.7;
}

/* slow scroll drift (data-drift="factor"): main.js translates the element a
   few px against scroll, per-element speed, so grouped images feel layered */
[data-drift] {
  will-change: transform;
}

/* scroll reveal : visible by default (no-JS, reduced-motion), JS adds the animated states */
.reveal {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 500ms ease-out, transform 500ms ease-out;
  }
  .js .reveal.in-view {
    opacity: 1;
    transform: translateY(0);
  }
  .js .reveal.reveal-img img {
    transform: scale(1.02);
    transition: transform 500ms ease-out;
  }
  .js .reveal.reveal-img.in-view img {
    transform: scale(1);
  }
}

/* generic image placeholder : swap for real renders in <img>/<picture> */
.img-placeholder {
  background: var(--gray);
  border: 1px solid rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #777;
  font-size: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  width: 100%;
}

/* section 1: hero : editorial type over full-bleed render */
.hero {
  padding-top: 6.5rem;
}
.hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem 2rem;
  flex-wrap: wrap;
  padding: 0 var(--gutter) 2rem;
}
/* a bracketed label never breaks inside itself; rows wrap whole labels */
.hero-top .label,
.manifest-top .label {
  white-space: nowrap;
  margin: 0;
}
.hero-headline {
  position: relative;
  z-index: 2;
  padding: 0 var(--gutter);
}
.hero-headline .display {
  font-size: var(--display-xl);
}
.hero-media {
  position: relative;
  margin-top: clamp(-4.5rem, -4vw, -1.4rem);
  overflow: hidden;
}
/* dark mode: the ivory headline overlaps the render's bright ceiling and
   drowns. A scrim melts the image top into the dark canvas, and a soft
   shadow lifts the overlapping glyphs off the photo. */
html[data-theme="dark"] .hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--bg) 0%, rgba(22, 21, 19, 0.55) 16%, rgba(22, 21, 19, 0) 46%);
  pointer-events: none;
}
html[data-theme="dark"] .hero-headline .display {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55), 0 0 3px rgba(0, 0, 0, 0.4);
}
.hero-media img {
  width: 100%;
  height: clamp(20rem, 62vh, 42rem);
  object-fit: cover;
  object-position: center 62%;
}
@media (prefers-reduced-motion: no-preference) {
  .js .hero-media img {
    animation: hero-in 2000ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}
@keyframes hero-in {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}
/* frosted panel sitting ON the render, not a solid slab over it */
.hero-panel {
  position: relative;
  z-index: 2;
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  width: min(40ch, calc(100% - 2 * var(--gutter)));
  margin: clamp(-9rem, -11vw, -4rem) 0 0 var(--gutter);
  padding: clamp(1.5rem, 2.5vw, 2rem);
}
.hero-panel .hero-support {
  margin: 0 0 1.5rem;
  max-width: 30ch;
}
.hero-cta-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.hero {
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* solid button (primary CTA) */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  padding: 0.95rem 1.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--label);
  transition: background 200ms ease, color 200ms ease;
}
.btn .arrow-glyph {
  display: inline-block;
  transition: transform 200ms ease;
}


.section-ink .btn {
  background: #FAFAF7;
  color: #111111;
  border-color: #FAFAF7;
}


/* section 2: intro statement */
.intro-statement {
  padding: var(--section-pad) var(--gutter);
}
.intro-statement .statement-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
  margin-top: 2rem;
  align-items: start;
}
.intro-statement .statement-headline {
  font-size: var(--display-lg);
}
.intro-statement .statement-body {
  max-width: 40ch;
  justify-self: end;
  text-align: left;
}
.intro-statement .statement-body p {
  margin: 0 0 1.5rem;
}

/* section 3: proiecte grid */
.proiecte-section {
  padding: var(--section-pad) var(--gutter);
}
/* editorial 12-col scatter: varied widths and vertical offsets so the four
   renders sit like a composed spread, not a uniform grid */
.proiecte-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem) var(--gutter);
  margin-top: 3rem;
  align-items: start;
}
.proiecte-grid .card.g1 { grid-column: 1 / span 6; }
.proiecte-grid .card.g2 { grid-column: 8 / span 5; margin-top: clamp(4rem, 9vw, 8rem); }
.proiecte-grid .card.g3 { grid-column: 2 / span 5; }
.proiecte-grid .card.g4 { grid-column: 8 / span 4; margin-top: clamp(2rem, 5vw, 4rem); }
.proiecte-grid .card .card-caption {
  margin-top: 0.75rem;
  font-size: var(--label);
  text-transform: lowercase;
  letter-spacing: 0.03em;
  opacity: 0.65;
}
.proiecte-closer {
  margin-top: clamp(3rem, 6vw, 5rem);
  text-align: center;
}

/* section 4: manifesto (ink band, the shout).
   The neq glyph is drawn as an inline SVG: Anton has no U+2260, so the raw
   character fell back to a system font and rendered small and thin. */
.manifesto {
  padding: var(--section-pad) var(--gutter);
  position: relative;
}
.manifesto .asterisk {
  position: absolute;
  top: var(--gutter);
  right: var(--gutter);
  color: var(--yellow);
}
.manifesto-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
}
.manifesto .display {
  font-size: var(--display-lg);
}
.manifesto .manifesto-neq {
  display: inline-block;
  width: 0.72em;
  height: 0.72em;
  margin-right: 0.12em;
  vertical-align: -0.06em;
}
.manifesto .manifesto-neq svg {
  display: block;
  width: 100%;
  height: 100%;
  stroke: var(--yellow);
  stroke-width: 12;
  stroke-linecap: square;
}
.manifesto-body {
  max-width: 44ch;
  margin-top: 2rem;
}
@media (max-width: 860px) {
  .manifesto-grid {
    grid-template-columns: 1fr;
    align-items: start;
  }
}
.manifesto-body p {
  margin: 0 0 1rem;
}
.manifesto-signoff {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--display-md);
  margin: 1.5rem 0;
}

/* section 5: servicii (reuses .num-row) */
.servicii-section {
  padding: var(--section-pad) var(--gutter);
}
.servicii-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
}
.servicii-list {
  margin-top: 2rem;
}

/* section 6: about teaser (gray) */
.about-teaser {
  padding: var(--section-pad) var(--gutter);
  position: relative;
}
.about-teaser .teaser-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
  align-items: center;
}
.about-teaser .display {
  font-size: var(--display-lg);
}
.about-teaser .teaser-sub {
  margin-top: 1rem;
  max-width: 32ch;
}
.about-teaser .micro-manifesto {
  margin-top: 2rem;
  font-size: var(--label);
  text-transform: lowercase;
  letter-spacing: 0.02em;
  line-height: 1.9;
}
.about-teaser .barcode {
  display: flex;
  gap: 2px;
  height: 36px;
  margin-bottom: 1.5rem;
  align-items: stretch;
}
.about-teaser .barcode span {
  background: var(--ink);
  width: 2px;
}
.about-teaser .barcode span:nth-child(3n) { width: 4px; }
.about-teaser .barcode span:nth-child(5n) { width: 1px; }

/* section 7: CTA band (ink) reuses .band */
.cta-band .arrow-link {
  margin-top: 1.5rem;
  font-size: 1rem;
}

@media (max-width: 860px) {
  .intro-statement .statement-row,
  .proiecte-grid,
  .about-teaser .teaser-grid {
    grid-template-columns: 1fr;
  }
  .intro-statement .statement-body {
    justify-self: start;
  }
  .proiecte-grid .card.g1,
  .proiecte-grid .card.g2,
  .proiecte-grid .card.g3,
  .proiecte-grid .card.g4 {
    grid-column: 1 / -1;
    margin-top: 0;
  }
  .hero-panel {
    width: auto;
    margin: 0;
    padding: 1.5rem var(--gutter) 0;
  }
  .hero-media {
    margin-top: clamp(1rem, 4vw, 2rem);
  }
}

/* project detail page */
.project-hero {
  padding: 8rem var(--gutter) 3rem;
}
.project-hero .project-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.project-hero .display {
  font-size: var(--display-xl);
  margin: 1.5rem 0;
}
.project-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 1.5rem 0;
}
.project-intro {
  max-width: 40ch;
  margin-top: 1.5rem;
}
.project-media {
  padding: 0 var(--gutter) var(--gutter);
}
.project-media .img-placeholder {
  aspect-ratio: 16 / 9;
}
.project-media-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
  padding: 0 var(--gutter) var(--gutter);
}
.project-media-pair .img-placeholder {
  aspect-ratio: 4 / 5;
}
.project-caption {
  margin-top: 0.5rem;
  font-size: var(--label);
  text-transform: lowercase;
  letter-spacing: 0.02em;
  opacity: 0.7;
}
.project-next {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.project-next .project-next-name {
  font-size: var(--display-md);
}

@media (max-width: 860px) {
  .project-media-pair {
    grid-template-columns: 1fr;
  }
}

/* contact page */
.contact-hero {
  padding: 8rem var(--gutter) var(--section-pad);
}
.contact-hero .display {
  font-size: var(--display-lg);
  margin: 1rem 0;
}
.contact-hero .contact-sub {
  max-width: 44ch;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--gutter);
  padding: 0 var(--gutter) var(--section-pad);
  align-items: start;
}
/* grid items may shrink below min-content, otherwise a wide child
   (brief chips, long e-mail) blows the 1fr track past the viewport */
.contact-grid > * {
  min-width: 0;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.contact-form label {
  display: block;
  font-size: var(--label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.4rem;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--body);
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink);
  padding: 0.6rem 0;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-bottom-width: 2px;
}
.contact-form textarea {
  resize: vertical;
  min-height: 6rem;
}
/* iOS Safari draws its own rounded bezel over a <select> unless appearance is
   reset: that is what made the project-type field look like a stretched pill
   with thick ends. Reset it, then paint our own chevron (one per theme, since
   a background-image cannot inherit currentColor). */
.contact-form select {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  padding-right: 1.75rem;
  background-repeat: no-repeat;
  background-position: right 0.1rem center;
  background-size: 0.6rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23111111' stroke-width='1.4'/%3E%3C/svg%3E");
}
html[data-theme="dark"] .contact-form select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23F2F0EB' stroke-width='1.4'/%3E%3C/svg%3E");
}
/* Chrome autofill paints its own pale-yellow fill, unreadable seam on the
   dark theme: repaint it with the page surface instead */
.contact-form input:-webkit-autofill,
.contact-form select:-webkit-autofill,
.contact-form textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
  -webkit-text-fill-color: var(--ink);
}
/* Never inherit the browser's own button text colour: iOS resolves the UA
   `buttontext` system colour independently of our theme, which is how the
   submit button could render as an empty outlined rectangle on a phone while
   looking correct on desktop. State it, and state the fill too, because
   -webkit-text-fill-color wins over color where it applies. */
.contact-form button {
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--label);
  padding: 0.9rem 1.6rem;
  border: 1px solid var(--ink);
  transition: background 200ms ease, color 200ms ease;
}

/* disabled submit stays clearly readable in BOTH themes: muted ink on a
   faint outline instead of a global opacity fade (0.4 opacity sank it
   into the dark background) */
.theme-toggle,
.nav-toggle,
.nav-overlay-close,
.brief-chip,
.back-to-top {
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
}
.section-ink .theme-toggle,
.section-ink .back-to-top {
  color: #FAFAF7;
  -webkit-text-fill-color: #FAFAF7;
}
.brief-chip.is-picked {
  -webkit-text-fill-color: var(--bg);
}
.contact-form button:disabled {
  opacity: 1;
  color: var(--muted);
  border-color: var(--line);
  cursor: not-allowed;
}
.contact-form-note {
  font-size: var(--label);
  opacity: 0.75;
  max-width: 44ch;
}
/* live submit states: full strength, never the 0.75 note fade */
.contact-form-note.is-busy,
.contact-form-note.is-ok,
.contact-form-note.is-error {
  opacity: 1;
  font-weight: 600;
}
.contact-form-note.is-error { color: var(--danger); }
/* spam honeypot: off-screen, never display:none (bots skip hidden fields) */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact-direct {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
/* one block per person: name label, then their own ways of being reached */
.contact-person {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.contact-person .label {
  margin-bottom: 0.2rem;
  opacity: 0.6;
}
/* contact details sit on the smallest step of the ladder, same as labels */
.contact-direct .arrow-link {
  font-size: var(--label);
  letter-spacing: 0.06em;
  overflow-wrap: anywhere; /* the e-mail address is one long unbreakable word */
}

@media (max-width: 860px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* editorial project gallery (real renders, proiecte page) :
   a scroll-driven walk-through. Every frame is revealed by an ivory
   "curtain" that lifts as the visitor scrolls past (transform-only,
   scrubbed both directions), the image inside settles from a slight
   zoom while drifting a few px (depth), and a thin progress line with
   a room label tracks where in the tour you are. Two chapters, one per
   apartment, each opened by an editorial title slab. */
.gallery-track {
  position: relative;
  padding: clamp(2rem, 5vw, 4rem) var(--gutter) var(--section-pad) calc(var(--gutter) + 2.25rem);
}
.gallery-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--gutter);
  width: 1px;
  background: var(--line);
  z-index: 5; /* rail + room label stay above full-bleed frames */
}
.gallery-line .gallery-marker {
  position: absolute;
  left: 50%;
  top: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
  transform: translate(-50%, -50%);
}
.gallery-line .gallery-room {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: var(--label);
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  background: var(--bg);
  padding: 0.15rem 0.5rem;
}

/* chapter opener slab */
.chapter-open {
  margin: 0 0 clamp(3rem, 7vw, 5rem);
  max-width: 60ch;
}
.chapter-open .chapter-num {
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: 0.14em;
  opacity: 0.7; /* 0.55 failed WCAG contrast at label size (Lighthouse) */
}
.chapter-open .chapter-title {
  font-size: var(--display-lg);
  margin: 0.5rem 0 1rem;
}
.chapter-open .chapter-sub {
  margin: 0;
  max-width: 44ch;
  text-transform: lowercase;
}
.chapter-open .hairline {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* mosaic: one composed grid per chapter. Fixed slots (m1..m6) give every
   chapter the same editorial rhythm: wide opener, offset portrait, pair,
   sweep, square, closer. Cover-cropped by slot aspect. */
.mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2rem, 5vw, 3.5rem) var(--gutter);
  margin-bottom: clamp(3.5rem, 9vw, 7rem);
  align-items: start;
}
.mosaic .gallery-block { margin: 0; }
.mosaic .m1 { grid-column: 1 / span 7; }
.mosaic .m1 .gallery-frame { aspect-ratio: 4 / 3; }
.mosaic .m2 { grid-column: 9 / span 4; margin-top: clamp(2.5rem, 7vw, 6rem); }
.mosaic .m2 .gallery-frame { aspect-ratio: 3 / 4; }
.mosaic .m3 { grid-column: 1 / span 5; }
.mosaic .m3 .gallery-frame { aspect-ratio: 3 / 4; }
.mosaic .m4 { grid-column: 6 / span 7; margin-top: clamp(2rem, 6vw, 5rem); }
.mosaic .m4 .gallery-frame { aspect-ratio: 16 / 10; }
.mosaic .m5 { grid-column: 2 / span 4; }
.mosaic .m5 .gallery-frame { aspect-ratio: 1 / 1; }
.mosaic .m6 { grid-column: 7 / span 6; margin-top: clamp(1.5rem, 4vw, 3rem); }
.mosaic .m6 .gallery-frame { aspect-ratio: 4 / 3; }

/* interstitial quote: verbatim micro-manifesto lines as breathing moments */
.gallery-quote {
  margin: clamp(4rem, 10vw, 8rem) 0;
  margin-left: auto;
  width: min(60%, 28ch);
}
.gallery-quote .asterisk {
  display: block;
  margin-bottom: 1rem;
  opacity: 0.4;
}
.gallery-quote .display {
  font-size: var(--display-md);
  text-transform: lowercase;
}

.gallery-frame {
  position: relative;
  overflow: hidden;
  background: var(--sand);
}
.gallery-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateY(var(--par, 0px)) scale(var(--sc, 1));
  will-change: transform;
}
/* the curtain: scrubbed by JS through --cur (0% covered, -102% lifted).
   Only exists with JS + motion allowed, so no-JS and reduced-motion
   visitors always see the full image. */
@media (prefers-reduced-motion: no-preference) {
  .js .gallery-frame::after {
    content: '';
    position: absolute;
    inset: -1px;
    background: var(--bg);
    transform: translateY(var(--cur, 0%));
    pointer-events: none;
  }
  .js .gallery-frame img {
    transform: translateY(var(--par, 0px)) scale(var(--sc, 1.08));
  }
}
.gallery-caption {
  margin-top: 0.75rem;
  font-size: var(--label);
  text-transform: lowercase;
  letter-spacing: 0.03em;
  opacity: 0.65;
}
.gallery-chapter-break {
  text-align: center;
  padding: clamp(2rem, 6vw, 4rem) 0;
  margin-bottom: clamp(3rem, 8vw, 6rem);
  opacity: 0.3;
}

/* despre: poster collage manifest (BRANDING.AGENCY pin style).
   Mobile = staggered 2-col grid; desktop = scattered absolute layout on a
   fixed-aspect canvas via per-item CSS vars (--x, --y, --w). Images start
   grayscale, gain color when scrolled to center (.in-color from main.js)
   or on hover: emotion arriving, per the brand line. */
.manifest {
  padding: 7.5rem var(--gutter) 0;
}
.manifest-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}
.manifest-top .label {
  margin: 0;
}
.manifest-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 2.5rem);
}
.collage-item {
  margin: 0;
}
.manifest-collage .collage-item:nth-child(even) {
  margin-top: 2.5rem;
}
.collage-frame {
  overflow: hidden;
  background: var(--sand);
}
.collage-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (prefers-reduced-motion: no-preference) {
  .js .collage-frame img {
    filter: grayscale(1);
    transition: filter 700ms ease, transform 700ms ease;
  }
.js .collage-item.in-color img { filter: grayscale(0); }

}
.collage-word {
  margin-top: 0.5rem;
  font-size: var(--label);
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
  text-align: right;
}
.collage-item.word-left .collage-word {
  text-align: left;
}
.manifest-wordmark {
  font-family: var(--font-body);
  font-weight: 800;
  text-transform: lowercase;
  font-size: clamp(4rem, 13.5vw, 12rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: clamp(2rem, 5vw, 3.5rem) 0 0;
}
.manifest .hairline {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 861px) {
  .manifest-collage {
    display: block;
    position: relative;
    aspect-ratio: 1.9 / 1;
  }
  .manifest-collage .collage-item {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    margin: 0;
  }
}

/* marquee brand strip (home, aria-hidden decorative) */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: var(--bg);
  padding: 0.9rem 0;
  white-space: nowrap;
}
.marquee .marquee-inner {
  display: inline-block;
}
.marquee .marquee-inner > span {
  display: inline-block;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--display-md);
  letter-spacing: 0.02em;
  padding-right: 1ch;
}
.marquee .asterisk {
  font-size: 0.7em;
  vertical-align: 0.15em;
  padding: 0 0.35ch;
}
@media (prefers-reduced-motion: no-preference) {
  .marquee .marquee-inner {
    animation: marquee-scroll 28s linear infinite;
  }
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* studio playlist widget (js/music.js): quiet floating toggle bottom-left,
   panel with track list; Spotify iframe loads only after a track is picked. */
.music-widget {
  position: fixed;
  left: var(--gutter);
  bottom: 1.25rem;
  z-index: 120;
}
.music-toggle {
  background: var(--bg);
  border: 1px solid var(--ink);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--label);
  padding: 0.55rem 0.9rem;
  transition: background 200ms ease, color 200ms ease;
}
.music-toggle[aria-expanded="true"] { background: var(--ink); color: var(--bg); }
.music-panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.75rem);
  width: min(21rem, calc(100vw - 2 * var(--gutter)));
  background: var(--bg);
  border: 1px solid var(--ink);
  padding: 1rem 1rem 1.1rem;
  box-shadow: 0 12px 32px rgba(17, 17, 17, 0.12);
}
.music-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.music-head .label {
  margin: 0;
}
.music-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--ink);
  padding: 0.2rem;
}
.music-note {
  margin: 0 0 0.75rem;
  font-size: 0.72rem;
  line-height: 1.5;
  opacity: 0.65;
  text-transform: lowercase;
}
.music-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 15rem;
  overflow-y: auto;
}
.music-track {
  display: flex;
  align-items: baseline;
  gap: 0.6ch;
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid var(--line);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--ink);
  text-align: left;
  padding: 0.5rem 0.1rem;
  transition: background 150ms ease;
}

.music-track.is-playing .music-title {
  border-bottom: 1px solid var(--ink);
}
.music-track .music-num {
  font-size: 0.7rem;
  font-weight: 600;
  opacity: 0.55;
}
.music-track .music-artist {
  margin-left: auto;
  font-size: 0.72rem;
  opacity: 0.6;
  text-transform: lowercase;
}
.music-player {
  margin-top: 0.75rem;
}
.music-player:empty {
  display: none;
}
@media (max-width: 720px) {
  .music-widget {
    bottom: 1rem;
  }
}

@media (max-width: 720px) {
  .gallery-track { padding-left: var(--gutter); }
  .gallery-line { display: none; }
  .gallery-quote {
    width: 100%;
    margin-left: 0;
  }
  .mosaic .m1, .mosaic .m2, .mosaic .m3,
  .mosaic .m4, .mosaic .m5, .mosaic .m6 {
    grid-column: 1 / -1;
    margin-top: 0;
  }
  .mosaic .m2 .gallery-frame,
  .mosaic .m3 .gallery-frame { aspect-ratio: 4 / 5; }
}

/* camere: room archive grid + owner's manifesto poem */
.rooms-section {
  padding: calc(var(--section-pad) * 0.6) var(--gutter);
}
.rooms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem) var(--gutter);
  margin-top: 2rem;
}
.room-item {
  margin: 0;
}
.room-frame {
  overflow: hidden;
  background: var(--sand);
  aspect-ratio: 4 / 5;
}
.room-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

@media (max-width: 1100px) {
  .rooms-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .rooms-grid { grid-template-columns: 1fr; }
}
.poem .poem-lead {
  font-weight: 600;
  font-size: var(--body);
}
.poem p {
  margin: 0 0 1.25rem;
}

/* contact: mini-brief wizard (js/brief.js) */
.brief {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.brief .brief-hint {
  margin: 0.5rem 0 1.25rem;
  font-size: 0.85rem;
  opacity: 0.65;
  text-transform: lowercase;
}
.brief .brief-row {
  margin-bottom: 1.1rem;
}
.brief .brief-title {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.08em;
  opacity: 0.6;
}
.brief .brief-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.brief .brief-chip {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.82rem;
  text-transform: lowercase;
  padding: 0.45rem 0.9rem;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.brief .brief-chip.is-picked {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

/* contact: FAQ rows (native details/summary) */
.faq {
  padding: var(--section-pad) var(--gutter);
}
.faq .faq-list {
  margin-top: 2rem;
}
.faq details {
  border-top: 1px solid var(--ink);
}
.faq details:last-child {
  border-bottom: 1px solid var(--ink);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1.1rem 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--display-md);
  line-height: 1.16;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.2rem;
  flex: 0 0 auto;
}
.faq details[open] summary::after {
  content: '−';
}
.faq .faq-answer {
  margin: 0 0 1.25rem;
  max-width: 60ch;
  text-transform: lowercase;
}

/* nav meta controls: language switch + theme toggle */
.nav-links .theme-toggle,
.nav-links .lang-switch {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--label);
  padding: 0 0 2px;
  border-bottom: 1px solid transparent;
}

.nav-overlay .overlay-meta {
  display: flex;
  gap: 2rem;
  margin-top: 1.5rem;
}
.nav-overlay .overlay-meta a,
.nav-overlay .overlay-meta button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 1rem;
  padding: 0;
}
html[data-theme="dark"] .nav-overlay {
  background: var(--sand);
}
html[data-theme="dark"] .nav-overlay a,
html[data-theme="dark"] .nav-overlay .nav-overlay-close {
  color: var(--ink);
}

/* ---------------------------------------------------------------- journal
   Blog list and article pages. Function-rendered, same tokens as everything
   else so the pages are indistinguishable from the static ones. */
.journal-hero {
  padding: 8rem var(--gutter) var(--section-pad);
}
.journal-list {
  padding: var(--section-pad) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: clamp(2rem, 5vw, 4rem);
}
.journal-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
}
.journal-card-frame {
  overflow: hidden;
  aspect-ratio: 3 / 2;
  margin-bottom: 0.4rem;
}
.journal-card-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.journal-card-title {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.05;
  margin: 0;
}
.journal-card-excerpt {
  font-size: 0.9rem;
  opacity: 0.75;
  max-width: 42ch;
}
.journal-empty {
  opacity: 0.7;
}

/* article: a reading measure, generous air, images allowed to breathe wide */
.article-head {
  padding: 8rem var(--gutter) clamp(3rem, 6vw, 5rem);
}
.article-title {
  font-size: var(--display-lg);
  margin: 1rem 0 1.5rem;
  max-width: 20ch;
}
.article-lead {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  font-weight: 600;
  max-width: 46ch;
}
.article-splash {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.article-splash img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.article-body {
  padding: clamp(3rem, 7vw, 6rem) var(--gutter) 0;
  max-width: 68ch;
  margin: 0 auto;
}
.article-body p {
  font-size: 0.9rem;
  line-height: 1.75;
  margin: 0 0 1.2rem;
}
.article-body ul,
.article-body ol {
  font-size: 0.9rem;
  line-height: 1.75;
  margin: 0 0 1.2rem 1.1rem;
}
.article-body li {
  margin-bottom: 0.4rem;
}
.article-quote {
  margin: 2rem 0;
  padding-left: 1.2rem;
  border-left: 2px solid var(--ink);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 600;
}
.article-figure {
  margin: 2.5rem 0;
}
.article-figure img {
  width: 100%;
  height: auto;
  display: block;
}
.article-figure figcaption {
  font-size: var(--label);
  opacity: 0.6;
  margin-top: 0.5rem;
  text-transform: lowercase;
}
.article-foot {
  padding: clamp(2rem, 5vw, 4rem) var(--gutter) var(--section-pad);
  max-width: 68ch;
  margin: 0 auto;
}
.article-foot .hairline {
  margin-bottom: 1.5rem;
}

/* footer: one block per person. Name and role bold on the smallest step, so
   the footer states who to call without competing with anything above it. */
.footer-person {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 1.6rem;
}
.footer-person:last-child {
  margin-bottom: 0;
}
.footer-person-name {
  margin: 0 0 0.15rem;
  font-size: var(--label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.footer-person-name span {
  font-weight: 400;
  opacity: 0.7;
  white-space: nowrap;
}
.footer-contact .arrow-link {
  font-size: var(--label);
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- founder
   Portrait with a brush stroke that draws itself once when the block comes
   into view and then stays. The stroke sits slightly INSIDE the photo edge on
   purpose, so it reads as paint laid over the print rather than a border. */
.founder {
  padding: var(--section-pad) var(--gutter);
  /* Before it animates, each stroke's window is parked a full width off to the
     side. On a phone, where the photo is nearly the viewport, that parked window
     stuck out past the right edge and gave the whole page 117px of horizontal
     scroll. `clip` rather than `hidden`: it does not create a scroll container,
     so it cannot break sticky or scroll-anchoring elsewhere on the page. */
  overflow-x: clip;
}
.founder-row {
  display: grid;
  grid-template-columns: minmax(0, 38%) 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  margin-top: 2.5rem;
}
@media (max-width: 860px) {
  .founder-row { grid-template-columns: 1fr; }
}
.founder-frame {
  position: relative;
  margin: 0;
  overflow: visible;
}
.founder-frame > img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(1) contrast(1.02);
  transition: transform 600ms cubic-bezier(.2,.7,.2,1), filter 600ms ease;
}

.founder-name {
  font-size: var(--display-md);
  margin-bottom: 0.4rem;
}
.founder-role {
  font-size: var(--label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.6;
  margin: 0 0 1.4rem;
}
.founder-body p {
  font-size: 0.9rem;
  max-width: 52ch;
  margin: 0 0 1rem;
}

.founder-brush {
  position: absolute;
  inset: 6px;                 /* overlaps inward over the photo edges */
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  pointer-events: none;
  overflow: visible;
}
/* The founder frame is the ORIGINAL drawn outline: one continuous line with
   closed corners, kept inside the photo. Two later versions exist in the repo
   and are NOT what ships: the four overshooting ribbons (2a346d4) and the
   photoreal paint (site/img/brush/*, assets-src/gen-strokes.py,
   assets-src/cut-strokes.py). Andrei asked for this one by name. */
.founder-brush path {
  fill: none;
  stroke: var(--yellow);
  /* stroke-width is in viewBox units: with vector-effect non-scaling-stroke the
     dash pattern switches to device units, which shatters a pathLength="1"
     dash into fragments. That is what made the stroke look broken. */
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* the path measures ~400 user units; pathLength normalisation is not applied
     to a CSS dash, so the dash is expressed in the same units as the path */
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  opacity: 0.85;
  transition: stroke-dashoffset 1700ms cubic-bezier(.65,0,.35,1) 180ms,
              stroke-width 400ms ease;
}
.founder-frame.in-view .founder-brush path {
  stroke-dashoffset: 0;       /* the line draws itself on, then stays */
}
/* someone who asked for less motion gets the finished line, not the drawing */
@media (prefers-reduced-motion: reduce) {
  .founder-brush path { transition: none; stroke-dashoffset: 0; }
}

/* The back-to-top button is absolutely placed in the footer corner. On a narrow
   screen the legal line wraps to three or four lines and ran straight under it,
   so the copyright text sat behind the circle. Reserve the corner. */
@media (max-width: 720px) {
  .site-footer .footer-bottom {
    padding-right: 4.5rem;
    text-align: left;
  }
  .site-footer .footer-arrow {
    bottom: 1.5rem;
  }
}

/* Hover affordances only where a real pointer exists.
   A touch screen has no hover, so :hover LATCHES after a tap and never releases:
   Mirel hit this on the footer arrow, which stayed inverted bright-white for the
   rest of the session in the Instagram in-app browser. The same trap was set on
   the CTA buttons, the contact submit button and the music toggle, where a latch
   reads as "this control is stuck on". State-driven selectors (aria-current,
   aria-expanded, .in-color) are deliberately NOT in here: they must keep working
   on touch. */
@media (hover: hover) and (pointer: fine) {
  .founder-frame:hover .founder-brush path { stroke-width: 2.8; opacity: 1; }
  .arrow-link:hover { border-color: currentColor; }
  .arrow-link:hover .arrow-glyph { transform: translateX(4px); }
  .arrow-box:hover { transform: translate(2px, -2px); }
  .card:hover .card-frame img { transform: scale(1.03); }
  .card:hover .card-name { border-bottom-color: currentColor; }
  .btn:hover { background: transparent; color: var(--ink); }
  .btn:hover .arrow-glyph { transform: translateX(4px); }
  .section-ink .btn:hover { background: transparent; color: #FAFAF7; }
  .contact-form button:hover:not(:disabled) { background: var(--ink); color: var(--bg); -webkit-text-fill-color: var(--bg); }
  .js .collage-item:hover img { transform: scale(1.03); }
  .music-track:hover { background: var(--hover-tint); }
  .room-item:hover .room-frame img { transform: scale(1.03); }
  .brief .brief-chip:hover { border-color: var(--ink); }
  .journal-card:hover .journal-card-frame img { transform: scale(1.03); }
  .founder-frame:hover > img { transform: scale(1.02); filter: grayscale(0.82) contrast(1.05); }
  .site-nav .nav-links a:hover { border-bottom-color: currentColor; }
  .js .collage-item:hover img { filter: grayscale(0); }
  .music-toggle:hover { background: var(--ink); color: var(--bg); }
  .nav-links .theme-toggle:hover, .nav-links .lang-switch:hover { border-bottom-color: currentColor; }
}

/* ---------------------------------------------------------------- journal art
   An article is a poster with text on it, like /despre. The mark is one
   Japanese character chosen for what it MEANS, set huge and pale behind the
   opening; the rules are drawn rather than straight; the first letter is set in
   the brand yellow. Everything here is decoration and is hidden from assistive
   tech: nothing below carries information that is not also in the prose. */
.article-head {
  position: relative;
  overflow: hidden;
}
.article-mark {
  /* Montserrat has no CJK, so without this the mark renders as a tofu box on any
     machine that falls back to it. These are the CJK faces that ship with macOS,
     Windows, iOS and Android respectively. */
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif CJK JP",
               "Noto Sans CJK JP", "Source Han Serif", serif;
  position: absolute;
  right: clamp(-1rem, 1vw, 2rem);
  top: 50%;
  transform: translateY(-46%);
  font-size: clamp(11rem, 30vw, 26rem);
  line-height: 0.8;
  font-weight: 400;
  color: var(--ink);
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
html[data-theme="dark"] .article-mark { opacity: 0.09; }
.article-head > *:not(.article-mark) { position: relative; z-index: 1; }

/* a drawn rule, same hand as the founder frame */
.doodle-rule {
  display: block;
  width: min(14rem, 40%);
  height: 12px;
  margin: 0 0 1.6rem;
  color: var(--yellow);
  overflow: visible;
}
.article-foot .doodle-rule { margin-top: 2rem; }

/* the first letter, set like a painted initial */
.article-body > p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 3.4em;
  line-height: 0.82;
  padding: 0.06em 0.14em 0 0;
  color: var(--yellow);
  -webkit-text-stroke: 1px var(--ink);
}
@media (max-width: 640px) {
  .article-body > p:first-of-type::first-letter { font-size: 2.8em; }
}

/* section headings get a small drawn tick rather than a bullet */
.article-body h2 {
  position: relative;
  margin-top: 2.6rem;
}
.article-body h2::before {
  content: "";
  position: absolute;
  left: -1.1rem;
  top: 0.55em;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--yellow);
  transform: rotate(12deg);
}
@media (max-width: 860px) {
  .article-body h2::before { display: none; }
}