/* ============================================================
   ARHI GRUP — Variant E2
   "Editorial architectural minimalism"

   System notes (per the reverse-engineering analysis):
   - The UI is a FRAME around the architecture. Neutral field,
     photography supplies all chromatic variation.
   - Typography does metadata work: size + weight + tracking
     signal WHAT KIND of information you are reading.
       title      -> identity
       meta       -> classification
       body       -> interpretation
   - Zero border-radius throughout (studio constraint).
   ============================================================ */

:root{
  --paper:#FFFFFF;
  --ink:#101010;
  --ink-soft:#3A3A3A;
  --meta:#8C8C8C;
  --hair:#E2E2E2;
  --hair-strong:#101010;

  /* Montserrat throughout. It is a wide geometric face with a large x-height,
     so it runs bigger and looser than most sans at the same nominal size —
     the sizes and tracking below are tuned for it, not inherited defaults. */
  --f: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --edge: clamp(18px, 4vw, 56px);
  --maxw: 1440px;
  --gut: 2px;              /* image-to-image gap: hairline, not gutter */

  /* Distance the nav (and the first text line beneath it) drops so the nav
     sits on the logo's bottom edge. Applied on every page including Home. */
  --head-drop: 26px;
  /* Gap between a page's subtitle line and the image beneath it.
     Matched to the Studio page, which is the reference. */
  --head-gap: 18px;
  /* Total clearance from the top of the document to the subtitle line.
     Identical on every page, so subtitles sit at the same height throughout. */
  --page-open: 142px;
}

*{ box-sizing:border-box; margin:0; padding:0; border-radius:0 !important; }
html{ scroll-behavior:smooth; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f);
  font-size:15.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; width:100%; height:100%; object-fit:cover; }
a{ color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible{ outline:1px solid var(--ink); outline-offset:3px; }
::selection{ background:var(--ink); color:var(--paper); }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--edge); }
.wrap-narrow{ max-width:820px; margin:0 auto; padding:0 var(--edge); }

/* ---------- TYPOGRAPHIC ROLES ---------- */
/* Level 2 — classification. Small, tracked, grey. */
.meta{
  font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--meta);
}
.meta-dark{ color:var(--ink); }
/* Page heading role: identical scale, weight and tracking to .meta — the only
   difference is colour, so a heading and its companion metadata line read as a
   matched pair rather than a heading with a caption. */
.page-title{
  font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); line-height:1.6; margin:0;
}
/* Level 2 — identity. */
/* Level 2 — identity. Montserrat sets wide, so titles carry more negative
   tracking than they would in a narrower face. */
.title-l{ font-size:clamp(28px,4.2vw,52px); font-weight:400; letter-spacing:-.03em; line-height:1.1; }
.title-m{ font-size:clamp(19px,2.2vw,26px); font-weight:400; letter-spacing:-.022em; line-height:1.2; }
.title-s{ font-size:17px; font-weight:500; letter-spacing:-.015em; }
/* Level 3 — interpretation. */
.body-l{ font-size:clamp(16px,1.4vw,18.5px); line-height:1.62; color:var(--ink-soft); }
.body{ font-size:15px; line-height:1.72; color:var(--ink-soft); }

/* ---------- HEADER (lightweight by design) ----------
   Logo and nav sit on the SAME left/right edges as the page content:
   the inner .wrap gives them the identical trunk width. */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  padding:22px 0;
  transition:background .35s ease, padding .35s ease;
}
.header-inner{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; }

/* The nav sits ON the logo's bottom edge — the same relationship on every
   page, at both logo sizes. align-items alone is not enough: it aligns the
   nav's line BOX, and the leading below the baseline leaves the letters
   floating above the mark. Collapsing line-height to 1 and nudging down by
   the remaining descender space puts the capitals flush with the logo. */
.site-nav{ align-items:flex-end; }
.site-nav a{ line-height:1; padding-bottom:0; transform:translateY(2px); }
.site-header.over-image{ color:#fff; }
.site-header.solid{
  background:var(--paper); color:var(--ink);
  padding-top:14px; padding-bottom:14px;
}

/* Logo mark. Source PNG is black-on-transparent, so it is inverted to
   white while the header floats over the hero photograph. */
.logo{ display:block; line-height:0; }
.logo img{
  height:42px; width:auto; display:block;
  transition:filter .35s ease, height .35s ease;
}
.site-header.over-image .logo img{ filter:invert(1); }
.site-header.solid .logo img{ height:34px; }
.site-nav{ display:flex; gap:30px; }
.site-nav a{
  font-size:11.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  opacity:.8; padding-bottom:2px; border-bottom:1px solid transparent;
}
.site-nav a:hover, .site-nav a[aria-current="page"]{ opacity:1; border-bottom-color:currentColor; }

/* ---------- LEVEL 1: HERO GALLERY (exhibition surface) ---------- */
.hero-gallery{ position:relative; height:100vh; min-height:520px; background:#0C0C0C; overflow:hidden; }
.hero-slide{
  position:absolute; inset:0; opacity:0;
  transition:opacity 1.4s ease;
}
.hero-slide.active{ opacity:1; }
.hero-slide::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.28) 100%);
}
.hero-caption{
  position:absolute; left:var(--edge); bottom:34px; z-index:3; color:#fff;
}
.hero-caption .cap-title{ font-size:19px; font-weight:400; letter-spacing:-.01em; }
.hero-caption .cap-meta{
  font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  opacity:.78; margin-top:5px;
}
.hero-ticks{
  position:absolute; right:var(--edge); bottom:38px; z-index:3;
  display:flex; gap:7px;
}
.hero-ticks button{
  width:26px; height:2px; border:none; background:rgba(255,255,255,.4); cursor:pointer; padding:0;
}
.hero-ticks button[aria-selected="true"]{ background:#fff; }

/* ---------- SECTIONS ---------- */
.section{ padding:clamp(64px,9vw,124px) 0; }
.section-head{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  margin-bottom:clamp(28px,4vw,52px); flex-wrap:wrap;
}
.rule{ height:1px; background:var(--hair); width:100%; }
.rule-dark{ height:1px; background:var(--hair-strong); width:100%; }

/* ---------- SHARED PAGE OPENING ----------
   Every page below the header opens identically: the same clearance to the
   subtitle line, and the same gap from that line to whatever follows. Use
   .page-open on the first section and .page-head on the subtitle row —
   do not hand-tune spacing per page, or they drift apart again. */
.page-open{ padding-top:var(--page-open); padding-bottom:0; }
.page-head{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:20px; flex-wrap:wrap;
  margin:0 0 var(--head-gap);
}

/* ---------- LEVEL 2: FEATURED PROJECTS ---------- */
/* image + title + typology|location — the "recognizable portfolio object" */
.featured{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gut) 40px; }
.featured .card:nth-child(3n+1){ grid-column:1 / -1; }   /* asymmetric rhythm */
.card{ display:block; }
.card .frame{ position:relative; overflow:hidden; background:#EEE; }
.card:nth-child(3n+1) .frame{ aspect-ratio:16/8; }
.card .frame{ aspect-ratio:4/3; }
.card img{ transition:transform 1.1s cubic-bezier(.2,.7,.3,1); }
.card:hover img{ transform:scale(1.028); }
.card .caption{ padding:16px 0 40px; }
.card .caption .title-m{ margin-bottom:6px; }

/* ---------- FULL PROJECT INDEX ----------
   Full trunk width. Text 25% smaller than base (10.5px).
   Headers are sortable — JS toggles .sorted-asc / .sorted-desc.
   On mobile the wrapper scrolls horizontally. */
.index-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.index-table{ width:100%; border-collapse:collapse; table-layout:auto; }
.index-table thead th{
  text-align:left; padding:0 clamp(14px,2vw,36px) 10px 0;
  font-size:8px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--meta);
  border-bottom:1px solid var(--hair-strong); white-space:nowrap;
  cursor:pointer; user-select:none;
}
.index-table thead th:last-child{ padding-right:0; }
.index-table thead th .sort-icon{ display:inline-block; margin-left:4px; opacity:.3; font-size:8px; transition:opacity .2s; }
.index-table thead th.sorted-asc .sort-icon,
.index-table thead th.sorted-desc .sort-icon{ opacity:1; color:var(--ink); }
.index-table td{
  padding:10px clamp(14px,2vw,36px) 10px 0; border-bottom:1px solid var(--hair);
  font-size:10.5px; vertical-align:baseline; white-space:nowrap;
}
.index-table td:last-child{ padding-right:0; }
.index-table tbody tr{ transition:background .2s ease; cursor:pointer; }
.index-table tbody tr:hover{ background:#FAFAFA; }
.index-table .num{ color:var(--meta); font-variant-numeric:tabular-nums; }
.index-table .name{ font-size:11px; letter-spacing:-.008em; white-space:normal; }
.index-table .dim{ color:var(--meta); }
.status{ font-size:10px; white-space:nowrap; }
.status::before{ content:""; display:inline-block; width:5px; height:5px; margin-right:7px; vertical-align:middle; }
.status.complete::before{ background:var(--ink); }
.status.progress::before{ background:#B0B0B0; }
.status.tbc::before{ background:transparent; border:1px solid #C4C4C4; }
.index-table tr.placeholder td{ color:#B4B4B4; }

/* ---------- CONTACT DETAILS ----------
   Columns sized to their content and packed to the left, rather than spread
   across the full trunk. Address holds one line on desktop. */
.contact-meta{
  display:grid; grid-template-columns:repeat(4,auto); justify-content:start;
  gap:0 clamp(30px,5vw,74px);
}
.contact-meta dt{
  font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--meta);
}
.contact-meta dd{ font-size:15px; margin-top:7px; white-space:nowrap; }

/* ---------- NARRATIVE (studio approach + project description) ----------
   Centred on the page. Width = one team-grid column (416px at full width,
   ~31vw on mid-size screens). calc((maxw - gaps) / 3) is avoided because
   CSS cannot divide a clamp() value; min(416px, 31vw) is equivalent.
   Text is fully justified; last line stays left.
   On mobile the block fills the full trunk width. */
.narrative{ padding:clamp(52px,7vw,92px) 0; }
.narrative-inner{
  width:min(416px, 31vw);
  margin:0 auto;
  text-align:justify;
  text-align-last:left;
}
.narrative-inner p{
  font-size:11.25px;
  line-height:1.82;
  color:var(--ink-soft);
}
.narrative-inner p + p{ margin-top:1.2em; }
.narrative-inner .lead{
  font-size:clamp(14px,1.5vw,18px);
  line-height:1.55;
  color:var(--ink);
  letter-spacing:-.01em;
  text-align:left;
}

.bleed{ width:100%; }
.bleed .frame{ aspect-ratio:16/9; background:#EEE; }
.bleed.tall .frame{ aspect-ratio:3/2; }

/* Project metadata: spread across the full trunk width using space-between,
   so the columns align with the trunk edges. More space below before hero. */
.project-meta{
  display:flex; flex-wrap:wrap; justify-content:space-between;
  gap:20px 0;
  border-top:1px solid var(--hair-strong); padding-top:18px;
  margin-bottom:clamp(36px,5vw,72px);
}
.project-meta > div{ flex:0 1 auto; }
.project-meta dt{ font-size:8px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--meta); }
.project-meta dd{ font-size:11.25px; margin-top:5px; white-space:normal; line-height:1.55; }

/* ---------- LEVEL 3: PROJECT PAGE (editorial article) ---------- */
.page-open h1.title-m{ margin-bottom:26px; }

/* Landscape images: edge-to-edge, no side margins (same as the hero). */
.pic-landscape{ width:100%; margin:clamp(36px,5vw,64px) 0; }
.pic-landscape .frame{ aspect-ratio:16/9; background:#EEE; overflow:hidden; }
.pic-landscape img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Portrait images: inside the trunk, one or two per row.
   Two-column layout: symmetric gap on both sides of the divider. */
.pic-portrait-wrap{
  padding:clamp(36px,5vw,64px) 0;
}
.pic-portrait-grid{
  display:grid;
  gap:clamp(16px,2vw,32px);
}
.pic-portrait-grid.cols-1{ grid-template-columns:1fr; }
.pic-portrait-grid.cols-2{ grid-template-columns:1fr 1fr; }
.pic-portrait-grid .pframe{
  aspect-ratio:3/4; background:#EEE; overflow:hidden; position:relative;
}
.pic-portrait-grid img{ width:100%; height:100%; object-fit:cover; display:block; }
.figcap{
  font-size:10px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--meta); padding-top:8px;
}

/* related nav */
.related{ display:flex; justify-content:space-between; gap:20px; padding:34px 0; border-top:1px solid var(--hair-strong); }

/* ---------- STUDIO ---------- */
/* Three across the full trunk width, extending downward as members are added.
   Breaks to two on smaller desktops, one on mobile. */
.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:44px 40px; }
.team-grid .frame{ aspect-ratio:3/4; background:#EFEFEF; }
/* Long-form text capped near half the trunk; left edge stays on the trunk. */
.text-half{ max-width:640px; }

/* ---------- EDITORIAL / PRESS STRIP ---------- */
.press{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1px; background:var(--hair); border:1px solid var(--hair); }
.press a, .press div{ background:var(--paper); padding:26px 20px; min-height:104px; display:flex; flex-direction:column; justify-content:space-between; }
.press .pub{ font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--meta); }
.press .head{ font-size:15px; letter-spacing:-.01em; }

/* ---------- FOOTER ----------
   Padding is vertical only; the inner .wrap aligns footer text to the
   same trunk edges as the header and body content. */
.site-footer{ padding:38px 0 30px; }
.footer-row{ display:flex; justify-content:space-between; gap:24px 34px; flex-wrap:wrap; align-items:flex-end; }
.footer-note{ font-size:11.5px; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--meta); }

/* Bottom-right corner: the other pages.
   Deliberately identical to .site-nav above — same size, weight, tracking,
   opacity and hover underline. If you restyle the nav, restyle this too. */
.page-buttons{ display:flex; gap:30px; margin-left:auto; }
.page-buttons a{
  font-size:11.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); opacity:.8;
  padding-bottom:2px; border-bottom:1px solid transparent;
  transition:opacity .3s ease;
  white-space:nowrap;
}
.page-buttons a:hover{ opacity:1; border-bottom-color:currentColor; }

/* ---------- REVEAL ---------- */
.rv{ opacity:0; transform:translateY(16px); transition:opacity .8s ease, transform .8s ease; }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .rv{ opacity:1; transform:none; transition:none; }
  .hero-slide{ transition:none; }
  .card img{ transition:none; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:880px){
  .site-nav{ gap:18px; }
  .site-nav a{ font-size:10.5px; letter-spacing:.1em; }
  .featured{ grid-template-columns:1fr; gap:0 0; }
  .featured .card:nth-child(3n+1){ grid-column:auto; }
  .card:nth-child(3n+1) .frame, .card .frame{ aspect-ratio:4/3; }
  .pair{ grid-template-columns:1fr; }
  .hero-caption{ bottom:58px; }
  .hero-ticks{ bottom:26px; left:var(--edge); right:auto; }
  .index-table{ min-width:580px; }
}
@media (max-width:1100px){
  .team-grid{ grid-template-columns:repeat(2,1fr); }
  .contact-meta{ grid-template-columns:repeat(2,auto); gap:26px 56px; }
}
@media (max-width:880px){
  .logo img{ height:34px; }
  .site-header.solid .logo img{ height:28px; }
  .page-buttons{ margin-left:0; gap:22px; flex-wrap:wrap; }
}
@media (max-width:640px){
  .team-grid{ grid-template-columns:1fr; width:100%; max-width:none; }
  .contact-meta{ grid-template-columns:1fr; gap:22px 0; }
  .contact-meta dd{ white-space:normal; }
  .narrative-inner{ width:100%; }
  .pic-portrait-grid.cols-2{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .site-nav{ gap:14px; }
  .logo img{ height:28px; }
  .site-header.solid .logo img{ height:24px; }
  .page-buttons{ gap:16px; }
  .page-buttons a{ font-size:10.5px; letter-spacing:.1em; }
}