/* ==========================================================================
   ABTB 2026 — home page.

   Hand-written, like the gallery / news / pages stylesheets. Reads the skin
   file's tokens, so it follows the theme without redefining anything.

   A PORT of the landing page agreed with the CEO, not a redesign of it:
   splash → featured work → project categories → news → «О бюро» → the team →
   education → contacts. Proportions that carried meaning are kept exactly as
   they were: project cards are 4/5, staff portraits are square, and the
   education collage keeps its 5/4 tiles around a tall 5/8.15 centre.
   ========================================================================== */

/* ------------------------------------------------------------------ splash */

/* Full viewport. The site header is pulled up under it and hidden (see
   .at-splash below), so the first screen is the mark and nothing else. */
.home-splash {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  margin-top: calc(-1 * var(--header-h, 78px));
  padding-top: var(--header-h, 78px);
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--splash-bg);
}
/* The opening screen wants a true white in light, not the page's slightly cool
   --paper. Declared as a token across all three theme states (bare :root, the
   unstamped system-dark case, and the explicit toggle) so it can never resolve
   to nothing; dark keeps --paper exactly as it was. */
:root { --splash-bg: #ffffff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --splash-bg: var(--paper); }
}
:root[data-theme="dark"] { --splash-bg: var(--paper); }

/* The navigation has no business competing with the logo on the opening
   screen; it drops in once the splash has been scrolled past. */
body.at-splash .site-header {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
.site-header {
  transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s ease,
              box-shadow .25s ease, background .3s ease, border-color .3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: opacity .2s linear; }
  body.at-splash .site-header { transform: none; }
}

.home-splash-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 30px);
  padding: clamp(24px, 5vw, 60px);
  text-align: center;
}

.home-mark { width: min(72vw, 760px); height: auto; overflow: visible; }
/* The wordmark is one compound path. It draws as a stroke and then the fill
   comes up behind it — the logo builds itself the way a drawing does. The dash
   length is measured from the path at runtime, never guessed.
   --logo-ink, not --brand: the brand blue is 1.78:1 on the dark ground. */
.home-mark path {
  fill: var(--logo-ink);
  stroke: var(--logo-ink);
  stroke-width: .3;
  stroke-linejoin: round;
  fill-opacity: 0;
  stroke-dashoffset: var(--len, 0);
  stroke-dasharray: var(--len, 0);
}
.home-mark.draw path {
  animation:
    mark-draw 1700ms cubic-bezier(.65,0,.35,1) forwards,
    mark-fill 700ms ease 1250ms forwards;
}
@keyframes mark-draw { to { stroke-dashoffset: 0; } }
@keyframes mark-fill { to { fill-opacity: 1; stroke-opacity: 0; } }

/* the company's own name and nothing else: there is no strapline to put here */
/* This is an <h1> — the page heading, since the practice's name is drawn as a
   logo rather than set as text. The weight is reset so promoting it from <p>
   changed nothing on screen. */
.home-splash-tagline {
  margin: 0;
  font-weight: 400;
  font-size: clamp(14px, 1.6vw, 19px);
  line-height: 1.45;
  letter-spacing: .02em;
  color: var(--ink-soft);
  opacity: 0;
  transform: translateY(10px);
  animation: splash-rise 800ms cubic-bezier(.2,.8,.2,1) 1500ms forwards;
}
@keyframes splash-rise { to { opacity: 1; transform: none; } }

/* the strip the old page had along the bottom: write to us, scroll on, credit */
.home-splash-foot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 0 clamp(16px, 4vw, 40px) clamp(18px, 3vw, 30px);
  font-size: 12.5px;
  color: var(--ink-faint);
  opacity: 0;
  animation: splash-rise 800ms ease 1900ms forwards;
}
.home-splash-foot a { color: var(--ink-soft); transition: color .18s ease; }
.home-splash-foot a:hover { color: var(--accent); }
.home-splash-foot .credit { text-align: right; }
.home-splash-scroll {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 100px;
}
.home-splash-scroll svg { width: 18px; height: 18px; }
.home-splash-scroll:hover { border-color: var(--accent); }
.home-splash-scroll svg { animation: scroll-nudge 2.4s ease-in-out 2600ms infinite; }
@keyframes scroll-nudge {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(4px); }
}
/* The chevron's scroll target. A zero-height marker rather than #featured,
   because the featured block only exists once the `featured` field on page 1 is
   filled in — this always lands on whatever section actually comes next. */
.home-anchor { display: block; height: 0; scroll-margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .home-mark path { fill-opacity: 1; stroke-opacity: 0; stroke-dashoffset: 0; }
  .home-mark.draw path { animation: none; }
  .home-splash-tagline, .home-splash-foot { opacity: 1; transform: none; animation: none; }
  .home-splash-scroll svg { animation: none; }
}

/* ==========================================================================
   FEATURED WORK — the hero.

   Full-bleed and immediately after the splash, with no heading: the work is
   the headline. Slides are stacked and cross-faded rather than scrolled, so a
   half-scrolled state can never be the resting state, and it is driven by real
   buttons so it works from the keyboard.
   ========================================================================== */

.home-hero { position: relative; }
.home-hero-stage {
  position: relative;
  height: min(82vh, 780px);
  min-height: 380px;
  overflow: hidden;
  background: var(--paper);
}

.home-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s ease, visibility .7s;
}
.home-hero-slide.is-current { opacity: 1; visibility: visible; }
.home-hero-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.045);
  transition: transform 8s linear;
}
.home-hero-slide.is-current img { transform: scale(1); }
/* the caption sits on the photograph, so it carries its own ground */
.home-hero-slide::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,8,14,.82) 0%, rgba(6,8,14,.35) 38%, rgba(6,8,14,0) 70%);
}

.home-hero-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
  padding: clamp(24px, 4vw, 52px) clamp(16px, 4vw, 40px);
  max-width: 1360px;
  margin: 0 auto;
  pointer-events: none;
}
.home-hero-text { pointer-events: auto; max-width: 22ch; }
.home-hero-meta {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.74);
}
.home-hero-name {
  display: block;
  margin-top: 10px;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: clamp(27px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -.015em;
  color: #fff;
  text-wrap: balance;
}
a.home-hero-text:hover .home-hero-name { text-decoration: underline; text-underline-offset: 5px; }
a.home-hero-text:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }

.home-hero-controls { display: flex; align-items: center; gap: 12px; pointer-events: auto; }
.home-hero-index {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: rgba(255,255,255,.82);
  font-variant-numeric: tabular-nums;
}
.home-hero-btn {
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 100px;
  background: rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.home-hero-btn svg { width: 18px; height: 18px; }
.home-hero-btn:hover { background: rgba(255,255,255,.24); border-color: #fff; }
.home-hero-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.home-hero-dots { display: flex; gap: 7px; }
.home-hero-dot {
  width: 26px; height: 4px;
  padding: 0;
  border: 0;
  border-radius: 100px;
  background: rgba(255,255,255,.34);
  cursor: pointer;
  transition: background .2s ease, width .25s ease;
}
.home-hero-dot[aria-current="true"] { background: #fff; width: 40px; }
.home-hero-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .home-hero-slide, .home-hero-slide img { transition: none; }
  .home-hero-slide.is-current img, .home-hero-slide img { transform: none; }
}
@media (max-width: 640px) {
  .home-hero-caption { flex-direction: column; align-items: flex-start; }
  .home-hero-text { max-width: none; }
}

/* ----------------------------------------------------------------- sections */

.home-section { padding-top: clamp(52px, 8vw, 110px); }
.home-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: clamp(20px, 3vw, 34px);
}
.home-section-head h2 {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: clamp(25px, 3.4vw, 42px);
  letter-spacing: -.015em;
  color: var(--ink);
}
.home-section-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
}
.home-section-more svg { width: 16px; height: 16px; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.home-section-more:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------- category cards
   4/5 with a translucent band across the foot, exactly how the live cards are
   built — that vertical proportion is the composition the page was designed
   around. What changes is the execution: the 2026 accent instead of the raw
   blue, the 2026 radius, and a real <img> rather than a background image. */

/* One column on a phone, two on a tablet, three from laptop up — and never more.
   There are only six categories, and at four or five columns the photographs get
   too small for the composition to read. */
.home-cats {
  display: grid;
  gap: clamp(12px, 1.8vw, 20px);
  grid-template-columns: 1fr;
}
@media (min-width: 600px)  { .home-cats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .home-cats { grid-template-columns: repeat(3, 1fr); } }
.home-cat {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  overflow: hidden;
  background: var(--paper);
  isolation: isolate;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.home-cat img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.home-cat-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 25%;
  padding: 16px 18px;
  text-align: center;
  color: #fff;
  font-size: clamp(17px, 1.9vw, 22px);
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
  /* The ABTB blue itself, fixed rather than themed: this band sits on a
     photograph, not on the page, so it has no reason to lighten in dark mode --
     and the darker hue is the one the card was designed with. */
  background: rgba(0, 51, 153, .68);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.home-cat:hover { transform: translateY(-3px); box-shadow: 0 24px 44px -26px var(--glow, rgba(10,17,40,.4)); }
.home-cat:hover img { transform: scale(1.05); }
.home-cat:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .home-cat, .home-cat img { transition: none; }
  .home-cat:hover { transform: none; }
  .home-cat:hover img { transform: none; }
}

/* ----------------------------------------------------------------- о бюро */

.home-about { max-width: 1120px; }
.home-about-text {
  max-width: 62ch;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.6;
  color: var(--ink-soft);
}
.home-about-text p { margin: 0 0 1em; }
.home-about-text p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------- team
   Square portraits with a generous radius, the proportion the roster was shot
   and cropped for. Grey by default so twenty faces read as one wall rather
   than twenty competing photographs; colour arrives on hover. */

.home-team {
  display: grid;
  gap: clamp(14px, 2vw, 26px) clamp(12px, 1.6vw, 20px);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px)  { .home-team { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .home-team { grid-template-columns: repeat(5, 1fr); } }

.home-person { display: block; }
.home-person-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  overflow: hidden;
  background: var(--paper);
}
/* Stands in until a portrait is uploaded — a roster is entered one person at a
   time and the photograph is usually last to arrive. */
.home-person-initials {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-faint);
  background: var(--paper);
}
.home-person-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%);
  transition: filter .35s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
.home-person:hover .home-person-photo img { filter: none; transform: scale(1.04); }
.home-person:focus-visible .home-person-photo { outline: 2px solid var(--accent); outline-offset: 3px; }
.home-person-name {
  margin: 12px 0 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--accent);
  transition: color .18s ease;
}
.home-person-role { margin: 2px 0 0; font-size: 12.5px; line-height: 1.35; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) {
  .home-person-photo img { transition: none; }
  .home-person:hover .home-person-photo img { transform: none; }
}

/* ==========================================================================
   EDUCATION — info card plus the original collage.

   The collage is the part of this section that was actually designed: five
   photographs per topic, one tall tile between two stacked pairs, all
   greyscale so they read as one texture rather than five separate pictures.
   Kept at the original ratios (5/4 and 5/8.15). The text has been lifted out
   of the tinted tile into a real card beside it, so it is read rather than
   squinted at over a photograph.
   ========================================================================== */

.home-edu-topic {
  display: grid;
  gap: clamp(18px, 2.6vw, 34px);
  max-width: 1360px;
}
.home-edu-topic + .home-edu-topic { margin-top: clamp(28px, 4vw, 52px); }
@media (min-width: 900px) {
  .home-edu-topic { grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); align-items: start; }
}

.home-edu-card {
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--card-shadow);
}
@media (min-width: 900px) { .home-edu-card { position: sticky; top: 104px; } }
.home-edu-card h3 {
  margin: 0 0 12px;
  font-size: clamp(18px, 1.9vw, 22px);
  font-weight: 700;
  color: var(--ink);
}
.home-edu-card p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
.home-edu-card .home-section-more { margin-top: 16px; }

.home-collage {
  display: grid;
  gap: clamp(10px, 1.4vw, 16px);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 620px)  { .home-collage { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .home-collage { grid-template-columns: repeat(3, 1fr); } }
.home-collage-col { display: grid; gap: clamp(10px, 1.4vw, 16px); align-content: start; }
.home-collage figure { margin: 0; }
.home-collage img {
  width: 100%;
  display: block;
  object-fit: cover;
  border-radius: 16px;
  background: var(--paper);
  filter: grayscale(100%);
  transition: filter .4s ease;
}
.home-collage .wide img { aspect-ratio: 5 / 4; }
.home-collage .tall img { aspect-ratio: 5 / 8.15; }
/* per photograph, not the whole block: hovering one tile should not wash
   colour across the other four */
.home-collage figure:hover img { filter: grayscale(0%); }
/* narrow screens carry the first column only; the rest is decoration and would
   turn the section into a scroll of stock photography */
@media (max-width: 619px) { .home-collage-col:nth-child(n+2) { display: none; } }
@media (min-width: 620px) and (max-width: 1039px) { .home-collage-col:nth-child(3) { display: none; } }
@media (prefers-reduced-motion: reduce) { .home-collage img { transition: none; } }


/* ==========================================================================
   PERSON PAGE (a child of /info/about/team/)

   Portrait beside the words, not above them: these are studio portraits, and
   stacking one full-width pushes the name below the fold on a laptop. The
   portrait sticks while the biography scrolls.
   ========================================================================== */

.person-layout {
  max-width: 1120px;
  display: grid;
  gap: clamp(24px, 4vw, 56px);
  padding-top: clamp(20px, 3vw, 34px);
}
@media (min-width: 860px) {
  .person-layout { grid-template-columns: minmax(240px, 360px) minmax(0, 1fr); align-items: start; }
  .person-portrait { position: sticky; top: 104px; }
}

.person-portrait-frame {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  overflow: hidden;
  background: var(--paper);
}
.person-portrait-frame .shot {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* the roster already has two frames per person (adiev.jpg / adiev-2.jpg); when
   a second one is set it cross-fades on hover, which is why they were shot */
.person-portrait-frame .shot.alt {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .45s ease;
}
.person-portrait-frame.has-alt:hover .shot.alt { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .person-portrait-frame .shot.alt { transition: none; }
}

.person-name {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: clamp(30px, 4.2vw, 48px);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
}
.person-role {
  margin: 10px 0 0;
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 600;
  color: var(--accent);
}

.person-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: clamp(20px, 3vw, 28px) 0 0;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.person-facts .fact { display: inline-flex; align-items: center; gap: 8px; }
.person-facts .fact-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.person-facts .fact-value { color: var(--ink); font-weight: 600; }
.person-facts a.fact-value { transition: color .18s ease; }
.person-facts a.fact-value:hover { color: var(--accent); }
.person-facts .fact-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.person-facts .fact-tags span {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 3px 9px;
  border-radius: 100px;
}

.person-bio { margin-top: clamp(22px, 3vw, 30px); max-width: 64ch; }
/* a project with no header_pic would otherwise be a white label on white */
.person-page .home-cat:not(:has(img)) { background: var(--surface); border: 1px solid var(--line); }
.person-page .home-cat:not(:has(img)) .home-cat-label {
  color: var(--ink);
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}