/* FORMA's architecture folio. Media, details and framing share one warm palette. */
@font-face {
  font-family: Lora;
  src: url('./lora-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Lora;
  src: url('./lora-cyrillic.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  --masthead: #241c17;
  --hero-shade: #1b120dda;
  --hero-veil: #26170f62;
  --hero-rule: #f4ede254;
  --warm-wash: #e8d6c5;
  --folio-focus: #8b4a2e;
  --color-focus: var(--folio-focus);
  --display-weight: 400;
  --tracking-display: -.035em;
}

::selection { background: var(--accent); color: var(--ink); }
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-nav);
  background: var(--masthead);
  color: var(--paper);
  border-bottom: 1px solid var(--forest-line);
}
.demo-strip { background: var(--forest); color: var(--forest-muted); }
.header-inner { min-height: 74px; }
.site-header .brand { color: var(--paper); }
.site-header .site-nav .nav-cta {
  padding-inline: var(--space-md);
  border: 1px solid var(--hero-rule);
}
.site-header .site-nav .nav-cta:hover {
  background: var(--accent);
  color: var(--ink);
  text-decoration: none;
}
.site-header .menu-toggle { border-color: var(--hero-rule); }
.site-header .menu-toggle span { background: var(--paper); }
.site-header :focus-visible,
.site-footer :focus-visible,
.home-directions :focus-visible,
.home-hero :focus-visible { outline-color: var(--accent); }

.home-hero { padding-top: 0; background: var(--masthead); color: var(--paper); }
.hero-main {
  display: grid;
  align-items: end;
  min-height: clamp(520px, 76svh, 840px);
  isolation: isolate;
}
.hero-main .hero-scene {
  position: absolute;
  inset: 0;
  height: auto;
  overflow: clip;
  margin: 0;
  background: var(--forest);
}
.hero-scene::after {
  position: absolute;
  inset: 0;
  content: '';
  pointer-events: none;
  background: linear-gradient(0deg, var(--hero-shade), transparent 58%),
    linear-gradient(90deg, var(--hero-veil), transparent 68%);
}
.hero-main .hero-scene > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% 55%;
}
.hero-main .hero-heading {
  position: relative;
  inset: auto;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  padding: var(--space-xl) var(--gutter) var(--space-48);
  margin-inline: auto;
  background: transparent;
  pointer-events: none;
}
.hero-main .hero-heading h1 {
  max-width: none;
  width: fit-content;
  font-size: clamp(3.1rem, 6.7vw, 6rem);
  line-height: .98;
  letter-spacing: -.038em;
  text-wrap: initial;
}
.hero-main .hero-aside {
  display: flex;
  align-items: end;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}
.hero-main .hero-aside > p {
  max-width: 28ch;
  margin: 0;
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  color: var(--paper);
}
.hero-main .hero-aside > .button {
  pointer-events: auto;
  width: auto;
  margin: 0;
  color: var(--ink);
  background: var(--accent);
  border-color: var(--accent);
}
.hero-main .hero-aside > .button:hover { background: var(--paper); border-color: var(--paper); }
.hero-main .hero-scene figcaption {
  z-index: 1;
  bottom: var(--space-48);
  right: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  max-width: 23ch;
  color: var(--paper);
  background: var(--masthead);
  border-top: 1px solid var(--accent);
}
.hero-main .hero-scene figcaption span { color: var(--forest-muted); }
.hero-bottom { border-color: var(--forest-line); }
.hero-bottom > span { color: var(--forest-muted); }
.hero-bottom a:hover { color: var(--accent); }

.manifesto.section-pad { padding-block: clamp(64px, 8vw, 120px); }
.manifesto > .manifesto-editorial {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(24px, 6vw, 88px);
  align-items: end;
  padding-bottom: var(--space-48);
  border-bottom: 1px solid var(--line);
}
.manifesto .manifesto-editorial > h2 {
  font-size: clamp(2.5rem, 6vw, 5.3rem);
  line-height: 1.03;
}
.manifesto .manifesto-bottom > p { max-width: 47ch; }
.manifesto > .material-studies {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--gap-columns);
  margin-top: var(--space-32);
}
.material-study { min-width: 0; margin: 0; }
.material-study--timber { margin-top: clamp(32px, 8vw, 112px); }
.material-study-media { overflow: clip; background: var(--gallery-paper); }
.material-study img { width: 100%; height: 100%; object-fit: cover; }
.material-study--light .material-study-media { aspect-ratio: 1.5; }
.material-study--timber .material-study-media { aspect-ratio: .82; }
.material-study figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px var(--space-md);
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
}
.material-study figcaption span { color: var(--muted); }

.home-directions { background: var(--forest); }
.direction-index > a {
  grid-template-columns: 40px minmax(0, .72fr) minmax(0, 1fr) minmax(0, .72fr) 32px;
}
.direction-index .direction-drawing { display: block; max-width: 210px; }
.direction-drawing svg {
  width: 100%;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.direction-drawing .drawing-dash { stroke-dasharray: 5 6; opacity: .6; }
.home-directions .compact-heading > div h2,
.home-projects .compact-heading > div h2 { font-size: clamp(2.7rem, 5.6vw, 5rem); }
.project-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.project-open > figure { overflow: clip; }
.project-large > figure { aspect-ratio: 1.2; }
.project-offset > figure { aspect-ratio: .83; }
.project-circle { background: var(--paper); color: var(--ink); }
.project-caption h3 { font-size: clamp(1.7rem, 3.1vw, 2.8rem); line-height: 1.1; }
.project-caption { border-color: var(--line); }
.project-photo-label { background: var(--masthead); color: var(--paper); }
.process-preview { padding-top: clamp(48px, 6vw, 96px); }
.process-preview h2 { max-width: 12ch; }
.cta-section { background: var(--warm-wash); }
.site-footer { background: var(--masthead); }
.footer-wordmark { color: var(--accent); }

.page-intro { padding-bottom: clamp(56px, 8vw, 108px); }
.page-heading { align-items: end; }
.page-heading h1 {
  font-size: clamp(2.9rem, 6.3vw, 6rem);
  line-height: 1.03;
  letter-spacing: -.038em;
}
.page-description { padding-left: var(--space-lg); border-left: 1px solid var(--line); }
.service-list,
.case-gallery { border-color: var(--line); }
.service-body figure { overflow: clip; }
.service-body figure > img { height: clamp(360px, 43vw, 600px); }
.dossier .case-gallery { margin-inline: calc(-.4 * var(--gutter)); background: var(--gallery-paper); }
.case-gallery figure { overflow: clip; }
.case-gallery figure > img { height: clamp(520px, 73svh, 820px); max-height: none; }
.case-gallery figure > figcaption { background: var(--paper); }
.case-gallery .gallery-thumbs,
.case-gallery .gallery-navigation { background: var(--paper); }
.plan-sheet { background: var(--light); border: 1px solid var(--line); }
.config-result { background: var(--forest); }
.config-result h3 { font-family: var(--font-display); }
.contact-page { background: var(--light); }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .project-open img, .material-study img { transition: transform 850ms var(--ease-out); }
  .project-open:is(:hover,:focus-visible) img,
  .material-study:hover img { transform: scale(1.045); }
  .project-circle, .direction-index b { transition: transform 400ms var(--ease-out), background-color 220ms; }
  .project-open:is(:hover,:focus-visible) .project-circle,
  .direction-index > a:hover b { transform: translate(2px, -2px); }
}
@media (prefers-reduced-motion: no-preference) {
  .home-page .hero-scene img { animation: forma-frame-in 1500ms var(--ease-out) both; }
  .home-page .hero-heading h1 { animation: forma-title-in 900ms var(--ease-out) 80ms both; }
  .home-page .hero-aside { animation: forma-title-in 800ms var(--ease-out) 200ms both; }
  .forma-media-arrived { animation: forma-image-arrival 880ms var(--ease-out) both; }
  .forma-line-arrived { animation: forma-title-in 620ms var(--ease-out) both; }
  .image-lightbox[open] { animation: forma-title-in 240ms var(--ease-out) both; }
  @keyframes forma-frame-in { from { transform: scale(1.09); } to { transform: scale(1); } }
  @keyframes forma-title-in {
    from { opacity: .38; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes forma-image-arrival {
    from { opacity: .55; clip-path: inset(5% 0 8%); transform: translateY(12px); }
    to { opacity: 1; clip-path: inset(0); transform: none; }
  }
}

@media (max-width: 1024px) {
  .hero-main .hero-scene figcaption { bottom: var(--space-32); }
  .hero-main .hero-heading { padding-bottom: var(--space-32); }
  .hero-main .hero-aside { flex-direction: column; align-items: start; }
}
@media (max-width: 760px) {
  .site-header { position: relative; }
  .header-inner { min-height: 68px; }
  .hero-main { min-height: 0; grid-template-columns: minmax(0, 1fr); }
  .hero-main .hero-scene { position: relative; order: 0; aspect-ratio: 1.48; }
  .hero-main .hero-scene > img { object-position: 55% 53%; }
  .hero-scene::after { background: linear-gradient(0deg, var(--hero-veil), transparent 53%); }
  .hero-main .hero-scene figcaption {
    right: var(--gutter);
    bottom: var(--space-sm);
    max-width: min(24ch, calc(100% - var(--gutter) * 2));
    padding: var(--space-xs) var(--space-sm);
  }
  .hero-main .hero-scene figcaption p { font-size: var(--text-sm); }
  .hero-main .hero-heading { padding-block: var(--space-lg) var(--space-32); }
  .hero-main .hero-heading h1 { font-size: clamp(2.5rem, 9.7vw, 4.5rem); }
  .hero-main .hero-aside { gap: var(--space-md); margin-top: var(--space-md); }
  .hero-main .hero-aside > p { max-width: 36ch; }
  .hero-bottom { border-top: 1px solid var(--forest-line); }
  .manifesto > .manifesto-editorial { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .manifesto > .material-studies { gap: var(--space-md); }
  .material-study--light .material-study-media { aspect-ratio: 1.2; }
  .material-study--timber { margin-top: var(--space-32); }
  .direction-index > a { grid-template-columns: 30px minmax(0, 1fr) 32px; }
  .direction-index .direction-drawing { display: none; }
  .project-grid { grid-template-columns: minmax(0, 1fr); }
  .project-offset { margin-top: var(--space-lg); }
  .project-offset > figure { aspect-ratio: 1.1; }
  .page-description { padding-left: 0; border-left: 0; }
  .dossier .case-gallery { margin-inline: 0; }
  .case-gallery figure > img { height: clamp(310px, 64svh, 510px); }
  .service-body figure > img { height: clamp(260px, 68vw, 460px); }
}
@media (max-width: 480px) {
  .hero-main .hero-scene { aspect-ratio: 1.26; }
  .hero-main .hero-scene figcaption p { font-size: var(--text-xs); }
  .hero-main .hero-heading h1 { font-size: clamp(2.15rem, 9.5vw, 3rem); }
  .manifesto > .material-studies { grid-template-columns: minmax(0, 1fr); gap: var(--space-32); }
  .material-study--timber { width: min(82%, 320px); margin: 0 0 0 auto; }
  .material-study--timber .material-study-media { aspect-ratio: .94; }
}
@media print {
  .site-header { position: static; }
  .forma-media-arrived, .forma-line-arrived { animation: none !important; }
}