/* Mona Oliaie — portfolio. Tokens and measurements follow the Round 2 design
   handoff (dark editorial). No accent colour: the work supplies the colour. */

:root {
  color-scheme: dark;
  --ground: #0B0B0B;
  --text: #EDEAE4;
  --muted: #8C8A86;      /* 5.8:1 on ground; never go darker for text */
  --mat: #151514;
  --mat-hover: #1C1B1A;
  --rule: #262523;
  --name-fallback: #6E6B66;

  --serif: 'Bellefair', 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --margin: 20px;
  --gutter: 12px;
  --section: 112px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 640px) { :root { --margin: 32px; --gutter: 24px; } }
@media (min-width: 1024px) { :root { --margin: 48px; --section: 200px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 400 var(--body-size, 14px)/1.75 var(--mono);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
p { margin: 0; }
h1, h2 { margin: 0; font-weight: 400; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 1px solid var(--text); outline-offset: 4px; }
.muted { color: var(--muted); }
.label {
  display: block;
  font-size: 11px; line-height: 1; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}

.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--margin); top: 8px; z-index: 100; background: var(--ground); padding: 8px; }

/* Film grain over everything, below nothing interactive. */
.grain {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  opacity: .35; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Display type: Bellefair, always capitals. */
.hero-name, .statement-h, .sec-title, .project-title, .pn-title, .about-title, .stat-n, .footer-name, .menu-links a {
  font-family: var(--serif); font-weight: var(--display-weight, 400); text-transform: uppercase;
  font-stretch: var(--display-stretch, normal); letter-spacing: var(--display-tracking, normal);
}

/* ---------- Top bar ---------- */
.topbar {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 8px var(--margin);
  font-size: 12px; line-height: 1.55;
}
.topbar a { text-decoration: none; }
.tb-name { letter-spacing: .06em; text-transform: uppercase; min-height: 44px; display: flex; align-items: center; }
.tb-cell, .tb-contact { display: none; }
.tb-mclock { text-align: center; }
.tb-menu { min-height: 44px; min-width: 44px; text-align: right; font-size: 12px; }
@media (min-width: 1024px) {
  .topbar { grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 22px var(--margin); align-items: start; }
  .tb-name { min-height: 0; display: block; }
  .tb-cell { display: flex; flex-direction: column; }
  .tb-contact { display: block; text-align: right; }
  .tb-mclock, .tb-menu { display: none; }
  .topbar a:hover { color: var(--muted); }
}

.menu {
  position: fixed; inset: 0; z-index: 60; background: var(--ground);
  display: flex; flex-direction: column; padding: 8px var(--margin) 24px;
  opacity: 0; transition: opacity .2s;
}
.menu.open { opacity: 1; }
.menu[hidden] { display: none; }
.menu-top { display: flex; justify-content: space-between; align-items: center; min-height: 44px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.menu-close { min-height: 44px; min-width: 44px; text-align: right; font-size: 12px; text-transform: none; letter-spacing: 0; }
.menu-links { display: flex; flex-direction: column; gap: 6px; margin-top: 64px; }
.menu-links a { font-size: 48px; line-height: 1; text-decoration: none; }
.menu-links a[aria-current] { color: var(--muted); }
.menu-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.menu-foot a { text-decoration: none; }

/* ---------- Layout helpers ---------- */
main > section, .project, .footer { padding-left: var(--margin); padding-right: var(--margin); }
main > section, .project { max-width: calc(1344px + 2 * var(--margin)); margin-left: auto; margin-right: auto; }

.sec-title { font-size: 32px; line-height: 1; }
@media (min-width: 1024px) { .sec-title { font-size: 44px; } }

/* Title in cols 1–4, content cols 6–12 */
.split { padding-top: var(--section); display: grid; gap: 32px; }
@media (min-width: 1024px) {
  .split { grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
  .split > .sec-title { grid-column: 1 / 5; }
  .split > :not(.sec-title) { grid-column: 6 / 13; }
}

.talk {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  text-underline-offset: 6px; align-self: flex-start;
}
.talk:hover { color: var(--muted); }

/* ---------- Hero ---------- */
.hero { padding-top: 88px; text-align: center; }
.hero-name { font-size: calc(50px * var(--display-scale, 1)); line-height: .9; white-space: nowrap; }
.hero-tag { color: var(--muted); font-size: 13px; line-height: 1.7; max-width: 300px; margin: 20px auto 0; text-wrap: balance; }
@media (min-width: 640px) { .hero-name { font-size: calc(96px * var(--display-scale, 1)); } }
@media (min-width: 1024px) {
  .hero { padding-top: 120px; }
  .hero-name { font-size: calc(clamp(120px, 13.6vw, 196px) * var(--display-scale, 1)); line-height: .86; }
  .hero-tag { font-size: 14px; max-width: 520px; margin-top: 36px; }
}

/* Mobile/tablet: a snap row. Desktop: a 3D fan driven by the pointer. */
.fan {
  display: flex; gap: 12px; margin: 48px calc(-1 * var(--margin)) 0; padding: 0 var(--margin);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.fan::-webkit-scrollbar { display: none; }
.fan-card { flex: none; height: 300px; width: calc(300px * var(--r)); scroll-snap-align: center; }
.fan-card img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) {
  .fan {
    --s: 0;
    position: relative; display: block; height: 560px; margin: 56px 0 0; padding: 0;
    overflow: visible; perspective: 1600px;
  }
  .fan-card {
    position: absolute; left: 50%; top: 50%;
    height: 420px; width: calc(420px * var(--r));
    box-shadow: 0 40px 80px rgba(0, 0, 0, .7);
    z-index: calc(10 - max(var(--i), -1 * var(--i)));
    transform:
      translate(-50%, -50%)
      translateX(calc(var(--i) * 190px - var(--s) * 60px))
      translateZ(calc(max(var(--i), -1 * var(--i)) * -140px))
      rotateY(calc(var(--i) * -22deg + var(--s) * 10deg));
    transition: transform .8s var(--ease);
  }
}

/* ---------- Statement ---------- */
.statement { padding-top: 96px; display: grid; gap: 32px; }
.portrait { width: 72%; aspect-ratio: 3 / 4; background: var(--mat); overflow: hidden; }
.portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.statement-body { display: flex; flex-direction: column; gap: 20px; }
.statement-h { font-size: 36px; line-height: 1; text-wrap: balance; margin-bottom: 20px; }
.statement-body p { max-width: 540px; text-wrap: pretty; }
@media (min-width: 1024px) {
  .statement { padding-top: 176px; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
  .statement .portrait { grid-column: 1 / 5; width: 100%; }
  .statement-body { grid-column: 6 / 13; padding-top: 24px; }
  .statement-body.no-portrait { grid-column: 4 / 12; }
  .statement-h { font-size: 64px; line-height: .98; }
}

/* ---------- Selected works ---------- */
.works { padding-top: var(--section); }
.works-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 24px; margin-bottom: 48px; border-bottom: 1px solid var(--rule); font-size: 12px;
}
.works-grid { display: grid; gap: 48px; }
@media (min-width: 640px) { .works-grid { grid-template-columns: 1fr 1fr; gap: 72px 24px; } }
/* Desktop stagger: every card has the same 4:5 mat, so offsetting the right
   column by a fixed 240px reads as two independent columns without any
   per-project tuning, and DOM order stays correct for mobile and readers. */
@media (min-width: 1024px) {
  .works-grid { row-gap: 96px; padding-bottom: 240px; }
  .works-item:nth-child(even) { position: relative; top: 240px; }
}

.card { display: flex; flex-direction: column; gap: 12px; text-decoration: none; }
.mat { position: relative; display: block; aspect-ratio: 4 / 5; background: var(--mat); overflow: hidden; transition: background .4s; }
.mat img { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; transition: transform .4s; }
.card-meta { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; font-size: 13px; line-height: 1.5; }
.card-title { text-wrap: pretty; text-underline-offset: 4px; }
.card-year { font-variant-numeric: tabular-nums; }
.card-type { grid-column: 1; }
@media (min-width: 1024px) { .card { gap: 14px; } }
@media (hover: hover) {
  .card:hover .mat { background: var(--mat-hover); }
  .card:hover .mat img { transform: scale(1.02); }
  .card:hover .card-title { text-decoration: underline; }
}
.card:focus-visible { outline: none; }
.card:focus-visible .mat { outline: 1px solid var(--text); outline-offset: 4px; background: var(--mat-hover); }
.card:focus-visible .card-title { text-decoration: underline; }

/* ---------- Services ---------- */
.services { position: relative; }
.services ul { border-top: 1px solid var(--rule); }
.svc {
  display: grid; grid-template-columns: 48px 1fr auto; grid-template-areas: "thumb label num";
  align-items: center; gap: 16px; padding: 12px 0;
  border-bottom: 1px solid var(--rule); text-decoration: none;
  font-size: 13px; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase;
  transition: color .3s;
}
.svc-thumb { grid-area: thumb; width: 48px; height: 60px; object-fit: cover; background: var(--mat); }
.svc-n { grid-area: num; }
.svc-l { grid-area: label; }
.svc-a { display: none; }
.svc-preview { display: none; }
@media (min-width: 1024px) {
  .svc {
    grid-template-columns: 56px 1fr auto; grid-template-areas: "num label arrow";
    gap: 0; height: 77px; padding: 0; font-size: 14px; line-height: 1;
  }
  .svc-thumb { display: none; }
  .svc-a { display: block; grid-area: arrow; }
  .svc-preview {
    display: block; position: absolute; left: 44%; top: 0; z-index: 2;
    width: 190px; height: 240px; object-fit: cover;
    transform: translateY(-50%) rotate(-4deg);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .6);
    pointer-events: none; opacity: 0;
    transition: opacity .3s, top .45s var(--ease);
  }
  .svc-preview.on { opacity: 1; }
  .services.active .svc { color: var(--muted); }
  .services.active .svc.hot { color: var(--text); }
}

/* ---------- Awards ---------- */
.split + .split { padding-top: 96px; }
@media (min-width: 1024px) { .split + .split { padding-top: 176px; } }
.aw-row { display: grid; grid-template-columns: 52px 1fr; gap: 0 16px; padding: 18px 0; border-bottom: 1px solid var(--rule); font-size: 13px; line-height: 1.5; }
.aw-row > :last-child { grid-column: 2; }
.aw-head { display: none; }
.aw-row > :first-child { font-variant-numeric: tabular-nums; }
@media (min-width: 640px) {
  .aw-row { grid-template-columns: 96px 1fr 1fr; gap: 24px; }
  .aw-row > :last-child { grid-column: auto; }
  .aw-head { display: grid; padding: 0 0 14px; font-size: 11px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
}

/* ---------- Footer ---------- */
.footer { padding-top: 96px; padding-bottom: 24px; margin-top: var(--section); container-type: inline-size; }
.footer > * { max-width: 1344px; margin-left: auto; margin-right: auto; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; padding-bottom: 40px; border-bottom: 1px solid var(--rule); }
.stat { display: flex; flex-direction: column; gap: 8px; }
.stat-n { font-size: 48px; line-height: 1; }
.stat-l { font-size: 11px; color: var(--muted); line-height: 1.4; }
.footer-name {
  margin-top: 56px; text-align: center; white-space: nowrap;
  font-size: calc(min(50px, 13cqw) * var(--display-scale, 1)); line-height: .9; color: var(--name-fallback);
}
.footer-name.has-image {
  background-size: cover; background-position: center;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.footer-links { display: flex; justify-content: center; gap: 24px; margin-top: 40px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.footer-links a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.footer-links a:hover { color: var(--muted); }
.footer-bottom {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--rule);
  font-size: 12px; color: var(--muted);
}
.footer-bottom a { color: var(--text); text-decoration: none; }
.footer-bottom a:hover { color: var(--muted); }
.fb-copy { order: 3; }
.fb-top { display: none; }
@media (min-width: 1024px) {
  .footer { padding-top: 144px; padding-bottom: 32px; }
  .stats { padding-bottom: 64px; }
  .stat-n { font-size: 104px; }
  .stat-l { font-size: 12px; }
  .footer-name { margin-top: 88px; font-size: calc(14.2cqw * var(--display-scale, 1)); line-height: .86; }
  .footer-links { gap: 40px; margin-top: 56px; }
  .footer-bottom { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 96px; }
  .fb-copy { order: 0; }
  .fb-top { display: block; text-align: right; color: var(--muted) !important; }
}

/* ---------- Project page ---------- */
.project { padding-top: 40px; }
.back { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.back:hover { color: var(--text); }
.project-title { margin-top: 16px; font-size: min(52px, 11vw); line-height: .95; text-wrap: balance; max-width: 1240px; }
.meta { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 24px 32px; font-size: 13px; line-height: 1.6; }
.meta .label { margin-bottom: 8px; }
.meta-desc { flex-basis: 100%; font-size: 14px; line-height: 1.75; }
.gallery { margin-top: 40px; display: flex; flex-direction: column; gap: 12px; }
.gallery img { width: 100%; height: auto; }
/* Mobile: every image full width at its own ratio, no mats. */
.g-pair { display: contents; }
.g-pair > .g-mat { display: contents; }
@media (min-width: 640px) {
  .gallery { gap: 24px; }
  .g-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .g-mat { position: relative; display: block !important; background: var(--mat); }
  .g-mat img { position: absolute; width: 100%; height: 100%; object-fit: contain; }
  .g-mat-full { aspect-ratio: 3 / 2; }
  .g-mat-full img { inset: 6%; width: 88%; height: 88%; }
  .g-mat-pair { aspect-ratio: 4 / 5; }
  .g-mat-pair img { inset: 7%; width: 86%; height: 86%; }
}
@media (min-width: 1024px) {
  .project { padding-top: 96px; }
  .back { min-height: 0; }
  .project-title { margin-top: 40px; font-size: clamp(88px, 9.4vw, 136px); line-height: .9; }
  .meta { margin-top: 64px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
  .meta-year { grid-column: 1 / 3; }
  .meta-type { grid-column: 3 / 5; }
  .meta-type:first-child { grid-column: 1 / 3; }
  .meta-desc { grid-column: 7 / 13; }
  .gallery { margin-top: 88px; }
}

.prevnext { margin-top: 80px; }
.prevnext a { display: flex; flex-direction: column; gap: 12px; padding: 24px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.prevnext a:first-child { border-top: 1px solid var(--rule); }
.pn-title { font-size: 30px; line-height: 1; transition: color .3s; }
.prevnext a:hover .pn-title { color: var(--muted); }
@media (min-width: 1024px) {
  .prevnext { margin-top: 160px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .prevnext a, .prevnext a:first-child { border: 0; padding: 40px 24px 40px 0; }
  .prevnext a:last-child { border-left: 1px solid var(--rule); padding: 40px 0 40px 24px; text-align: right; align-items: flex-end; }
  .pn-title { font-size: 52px; }
}

/* ---------- About ---------- */
.about-head { padding-top: 64px; }
.about-title { margin-top: 16px; font-size: min(40px, 10vw); line-height: .95; text-wrap: balance; max-width: 1180px; }
.about-body { padding-top: 56px; display: grid; gap: 40px; }
.bio { display: flex; flex-direction: column; gap: 22px; max-width: 560px; line-height: 1.8; }
.bio p { text-wrap: pretty; }
@media (min-width: 1024px) {
  .about-head { padding-top: 120px; }
  .about-title { margin-top: 24px; font-size: clamp(88px, 8.3vw, 120px); line-height: .9; }
  .about-body { padding-top: 120px; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
  .about-body .portrait { grid-column: 1 / 6; width: 100%; }
  .bio { grid-column: 7 / 13; }
  .bio.no-portrait { grid-column: 1 / 8; }
}

/* ---------- Reveal on scroll (only when JS is running) ---------- */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s ease-out, transform .6s ease-out; }
.js .reveal.in { opacity: 1; transform: none; }
/* The stagger uses `top`, so the reveal's transform doesn't fight it. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .card:hover .mat img { transform: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 1024px) {
  /* The fan lies flat: five across, no depth. */
  .fan { display: flex; justify-content: center; align-items: center; gap: 24px; height: auto; perspective: none; }
  .fan-card { position: static; transform: none; height: 300px; width: calc(300px * var(--r)); }
}

/* ---------- Font options under review ----------
   Each option swaps the display face (--serif) and the text face (--mono);
   --display-scale keeps the one-line name the same width as Bellefair's. */
html[data-font="classic"] {
  --serif: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --mono: 'Jost', 'Futura', system-ui, sans-serif;
  --display-weight: 500;
  --display-scale: 1;
  --body-size: 15px;
}
html[data-font="graphic"] {
  --serif: 'Bricolage Grotesque', 'Arial Narrow', system-ui, sans-serif;
  --mono: 'Instrument Sans', system-ui, sans-serif;
  --display-weight: 600;
  --display-stretch: 85%;
  --display-tracking: -0.02em;
  --display-scale: 1.44;
  --body-size: 15px;
}

.font-switch {
  position: fixed; z-index: 70; left: 50%; transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 14px;
  background: var(--mat-hover); border: 1px solid var(--rule-strong, #3A3937);
  font: 400 12px/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: 0; text-transform: none;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .6);
}
.fs-label { color: var(--muted); margin-right: 6px; }
.font-switch button { min-height: 36px; padding: 0 12px; color: var(--muted); white-space: nowrap; }
.font-switch button:hover { color: var(--text); }
.font-switch button[aria-pressed="true"] { background: var(--text); color: var(--ground); }