/* Minoo Sadeghi: site sketch
   Paper, ink, and pigment. The paintings carry the colour; the page stays quiet. */

:root {
  --paper: #f7f2e8;
  --paper-mat: #fcfaf5;
  --ink: #25231f;
  --ink-2: #4e4940;
  --muted: #6b6458;   /* ≈5:1 on paper, passes WCAG AA for small text */
  --rule: rgba(37, 35, 31, 0.14);

  --crimson: #a8403b;
  --burgundy: #7c2d36;
  --ochre: #c99a45;
  --cerulean: #7eaec0;
  --teal: #3d7584;
  --sold: #c4372a;

  --display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --text: "EB Garamond", Garamond, "Times New Roman", serif;

  --gutter: clamp(16px, 4vw, 56px);
  --maxw: 1320px;
  --nav-h: 76px;

  --brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5.4C17 3.2 33 6.2 52 4.6S88 2.8 118 4.9' fill='none' stroke='%23a8403b' stroke-width='2.3' stroke-linecap='round' opacity='.85'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 8px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: clamp(18px, 0.5vw + 15px, 21px);
  line-height: 1.62;
  font-feature-settings: "kern", "liga", "onum";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Cold-press paper grain under everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.42;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='4' seed='4' stitchTiles='stitch' result='t'/%3E%3CfeDiffuseLighting in='t' lighting-color='%23fff' surfaceScale='1.05' diffuseConstant='1.08'%3E%3CfeDistantLight azimuth='225' elevation='62'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}

@media (max-width: 560px) { body::before { opacity: 0.3; } }

/* washes may bleed past the edges; clip sideways without breaking sticky */
main { overflow-x: clip; }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  padding: 10px 16px; background: var(--ink); color: var(--paper);
  text-decoration: none; transition: top 0.2s;
}
.skip:focus { top: 12px; }
.noscript { color: var(--ink-2); font-style: italic; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-weight: 400; }
:focus-visible { outline: 1.5px solid var(--teal); outline-offset: 5px; }

.wash-canvas {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: multiply;
  display: block;
}

/* small-caps label voice */
.eyebrow, .kicker, .count, .nav a, .filters button, .link-btn, .btn, .text-link,
.work-label .meta, .work-label .status, .facts dt, .lb-count, .lb-meta, .lb-status, cite {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.15em;
  font-weight: 500;
}

/* ---------- Nav ---------- */
a, button { -webkit-tap-highlight-color: rgba(168, 64, 59, 0.12); }

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.6vw, 38px);
  padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
  transition: background-color 0.35s, box-shadow 0.35s;
}
.nav.scrolled {
  background: rgba(247, 242, 232, 0.97);
  box-shadow: 0 1px 0 var(--rule);
}
.menu-open .nav { background: var(--paper); box-shadow: none; }
.mark { margin-right: auto; display: flex; align-items: center; min-height: 44px; }
.mark img { height: 50px; width: auto; opacity: 0.92; transform: translateY(2px); }
.nav-links ul { display: flex; gap: clamp(18px, 2.6vw, 38px); list-style: none; margin: 0; padding: 0; }
.nav-links a, .filters button, .text-link {
  text-decoration: none;
  padding: 6px 0 8px;
  background: var(--brush) no-repeat 0 100% / 0% 7px;
  transition: background-size 0.4s cubic-bezier(.2,.7,.2,1);
}
.nav-links a { font-size: 1.18rem; color: var(--ink); }
.nav-links a:focus-visible, .nav-links a[aria-current] { background-size: 100% 7px; }
@media (hover: hover) { .nav-links a:hover { background-size: 100% 7px; } }

.nav-tools { display: flex; align-items: center; gap: 4px; margin-right: -10px; }
.icon { display: block; width: 24px; height: 24px; flex: none; }
.ig-btn {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  color: var(--ink);
  transition: color 0.25s;
}
@media (hover: hover) { .ig-btn:hover { color: var(--crimson); } }

.menu-btn { display: none; }
.menu-lines { position: relative; width: 22px; height: 12px; }
.menu-lines::before, .menu-lines::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.6px;
  background: currentColor; border-radius: 2px;
  transition: transform 0.3s, top 0.3s;
}
.menu-lines::before { top: 1px; }
.menu-lines::after { top: 9px; }
.menu-btn[aria-expanded="true"] .menu-lines::before { top: 5px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-lines::after { top: 5px; transform: rotate(-45deg); }

/* phones: links move into a full-screen menu with big tap targets */
@media (max-width: 760px) {
  :root { --nav-h: 64px; }
  .nav-links { display: none; }
  .mark img { height: 40px; }
  .menu-btn {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 44px; padding: 0 10px;
    appearance: none; border: 0; background: none;
    font: inherit; font-size: 1.12rem; font-weight: 500;
    font-variant-caps: all-small-caps; letter-spacing: 0.15em;
    color: var(--ink); cursor: pointer;
  }
}

html.menu-open { overflow: hidden; }
.menu {
  position: fixed; inset: 0; z-index: 55;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow-y: auto;
  background: var(--paper);
  padding: calc(var(--nav-h) + 24px) max(var(--gutter), env(safe-area-inset-right))
           calc(28px + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  opacity: 0;
  transition: opacity 0.3s;
}
.menu[hidden] { display: none; }
.menu.open { opacity: 1; }
.menu .wash-canvas { inset: 0; width: 100%; height: 100%; }
.menu nav, .menu-foot { position: relative; z-index: 1; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu li + li { border-top: 1px solid var(--rule); }
.menu li a {
  display: flex; align-items: center; min-height: 72px;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2.3rem, 10.5vw, 3.2rem); line-height: 1;
  text-decoration: none; color: var(--ink);
}
.menu li a[aria-current] { font-style: italic; color: var(--crimson); }
.menu-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 32px; }
.ig-row {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px;
  text-decoration: none; color: var(--ink);
}
.ig-row span { font-variant-caps: all-small-caps; letter-spacing: 0.13em; font-weight: 500; font-size: 1.15rem; }
.menu-email { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); text-decoration: none; font-size: 1.1rem; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: min(calc(100svh - var(--nav-h)), 920px);
  display: grid;
  align-items: center;
  padding: clamp(16px, 3vw, 40px) var(--gutter) clamp(64px, 8vw, 110px);
}
.hero .wash-canvas {
  left: 0; right: 0;
  top: calc(-1 * var(--nav-h));
  width: 100%;
  height: calc(100% + var(--nav-h) + 80px);
}
.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.eyebrow { margin: 0 0 1.4rem; color: var(--ink-2); font-size: 1.2rem; letter-spacing: 0.22em; }
.hero h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3.9rem, 9.8vw, 9.6rem);
  line-height: 0.84;
  letter-spacing: -0.012em;
  margin: 0;
}
.hero h1 em { display: block; font-style: italic; padding-left: 0.55em; }
.tagline {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.45rem, 1.95vw, 2rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink-2);
  margin: 2rem 0 2.6rem;
  max-width: 21em;
}
.text-link { font-size: 1.18rem; background-size: 100% 7px; }
@media (hover: hover) { .text-link:hover { background-size: 40% 7px; } }

.hero-piece { margin: 0; justify-self: center; }
.mat {
  background: var(--paper-mat);
  padding: clamp(10px, 1.2vw, 18px);
  box-shadow: 0 1px 1px rgba(50, 35, 20, 0.06), 0 22px 44px -28px rgba(50, 35, 20, 0.42);
}
.hero-piece img { height: min(66vh, 640px); width: auto; }
figcaption { margin-top: 0.9rem; font-size: 1rem; color: var(--muted); }
figcaption em { color: var(--ink-2); }

@media (max-width: 860px) {
  .hero { min-height: 0; padding-top: 28px; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-piece { justify-self: end; width: min(82%, 420px); }
  .hero-piece img { height: auto; width: 100%; }
}

/* ---------- Sections ---------- */
.section {
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(80px, 10vw, 150px) var(--gutter);
}
h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.7rem, 5vw, 4.5rem);
  line-height: 1;
  margin: 0;
}
.wash-host { position: relative; display: inline-block; }
.wash-host > canvas {
  left: -16%; top: -70%;
  width: 132%; height: 240%;
  z-index: -1;
}
.kicker, .count { margin: 0.9rem 0 0; color: var(--muted); font-size: 1.1rem; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px 56px;
  margin-bottom: clamp(48px, 6vw, 84px);
}
.filters { display: flex; flex-wrap: wrap; gap: 4px 24px; list-style: none; margin: 0; padding: 0; }
.filters button {
  appearance: none; border: 0; background-color: transparent;
  font: inherit; font-size: 1.18rem; font-weight: 500; color: var(--ink-2); cursor: pointer;
}
@media (hover: hover) { .filters button:hover { color: var(--ink); } }
@media (max-width: 760px) {
  .filters { gap: 0 22px; }
  .filters button { padding: 11px 0 13px; }   /* ≥44px tap height */
}
.filters button[aria-pressed="true"] { color: var(--ink); background-size: 100% 7px; }

/* ---------- Gallery: paintings hung on a common line ---------- */
.grid {
  --cols: 4;
  --gap-x: clamp(28px, 3.4vw, 56px);
  container-type: inline-size;
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: clamp(60px, 6.5vw, 96px) var(--gap-x);
}
@media (max-width: 1180px) { .grid { --cols: 3; } }
@media (max-width: 820px)  { .grid { --cols: 2; } }
@media (max-width: 540px)  { .grid { --cols: 1; } }

.work {
  min-width: 0;
  /* one column's width, from the grid container */
  --colw: calc((100cqw - (var(--cols) - 1) * var(--gap-x)) / var(--cols));
  --fw: var(--colw);                 /* frame width */
  --fh: calc(var(--colw) * 1.26);    /* frame height: same for every work so labels line up */
}
.work.wide { grid-column: span 2; --fw: calc(var(--colw) * 2 + var(--gap-x)); }
@media (max-width: 540px) {
  .work.wide { grid-column: auto; }
  /* one column: no shared hanging line needed, let each frame hug its painting */
  .grid .work-frame { height: auto; }
  .grid .hang { width: 100%; height: auto; }
}
.work[hidden] { display: none; }

.work-frame {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  width: 100%;
  height: var(--fh);
  padding: 0; border: 0; background: none;
  cursor: zoom-in;
}
/* the painting at its true proportions, hung on the frame's bottom line */
.hang {
  position: relative;
  display: block;
  flex: none;
  aspect-ratio: var(--ar);
  height: min(var(--fh), calc(var(--fw) / var(--ar)));
  transition: transform 0.6s cubic-bezier(.2,.7,.2,1);
}
.hang img {
  width: 100%; height: 100%;
  box-shadow: 0 1px 1px rgba(50, 35, 20, 0.05), 0 16px 32px -26px rgba(50, 35, 20, 0.5);
}
/* hover: a wash of the subject's colour blooms out from behind the paper */
.hang::before {
  content: "";
  position: absolute;
  inset: -11% -14% -9% -13%;
  z-index: -1;
  background: var(--wash) center / 100% 100% no-repeat;
  mix-blend-mode: multiply;
  opacity: 0;
  transform: scale(0.82) rotate(-3deg);
  transition: opacity 0.7s, transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.work-frame:focus-visible .hang::before { opacity: 0.8; transform: none; }
@media (hover: hover) {
  .work-frame:hover .hang::before { opacity: 0.8; transform: none; }
  .work-frame:hover .hang { transform: translateY(-3px); }
}

.work[data-series="portraits"] { --wash: var(--wash-portraits); }
.work[data-series="figures"]   { --wash: var(--wash-figures); }
.work[data-series="music"]     { --wash: var(--wash-music); }
.work[data-series="dance"]     { --wash: var(--wash-dance); }
.work[data-series="nature"]    { --wash: var(--wash-nature); }

.work-label { margin-top: 1.1rem; }
.work-label h3 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.65rem;
  line-height: 1.15;
  margin: 0 0 0.3rem;
}
.work-label p { margin: 0; font-size: 1.02rem; line-height: 1.5; }
.work-label .meta { color: var(--muted); }
.work-label .status { color: var(--ink-2); }
.dot {
  display: inline-block;
  width: 0.55em; height: 0.55em;
  border-radius: 50%;
  background: var(--sold);
  margin-right: 0.5em;
  vertical-align: 0.05em;
}

/* ---------- Quote ---------- */
.quote { position: relative; padding: clamp(100px, 13vw, 190px) var(--gutter); }
.quote .wash-canvas { inset: 0; width: 100%; height: 100%; }
.quote blockquote { position: relative; z-index: 1; max-width: 22em; margin: 0 auto; text-align: center; }
.quote p {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 1.17;
  margin: 0;
}
.quote cite { display: block; margin-top: 1.8rem; font-style: normal; font-size: 1.1rem; color: var(--ink-2); }

/* ---------- About ---------- */
.about {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(44px, 7vw, 120px);
  align-items: start;
}
.about-figure { margin: 0; position: sticky; top: calc(var(--nav-h) + 32px); }
.about-figure img { width: 100%; box-shadow: 0 1px 1px rgba(50,35,20,.05), 0 22px 44px -30px rgba(50,35,20,.45); }
.statement .kicker { margin-bottom: 2.4rem; }
.statement p { max-width: 34em; margin: 0 0 1.15em; }
.statement .lead { font-size: 1.22em; line-height: 1.5; color: var(--ink); }
.statement p:not(.lead):not(.kicker) { color: var(--ink-2); }
.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: 3rem 0 0;
  padding-top: 1.8rem;
  border-top: 1px solid var(--rule);
}
.facts dt { color: var(--muted); font-size: 1.05rem; }
.facts dd { margin: 0.35rem 0 0; font-family: var(--display); font-weight: 500; font-size: 1.45rem; line-height: 1.3; }
@media (max-width: 860px) {
  .about { grid-template-columns: 1fr; }
  .about-figure { position: static; max-width: 440px; }
  .facts { grid-template-columns: 1fr; gap: 18px; }
}

/* ---------- Commissions ---------- */
.commissions {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(44px, 7vw, 120px);
  align-items: start;
  border-top: 1px solid var(--rule);
}
.comm-intro > p:not(.kicker) { max-width: 26em; color: var(--ink-2); margin: 2rem 0 2.4rem; }
.comm-example { margin: clamp(48px, 5vw, 72px) 0 0; max-width: 260px; }
.comm-example img { box-shadow: 0 1px 1px rgba(50,35,20,.05), 0 18px 36px -26px rgba(50,35,20,.5); }
.steps {
  list-style: none; counter-reset: s;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px 56px;
}
.steps li { counter-increment: s; }
.steps li::before {
  content: counter(s, lower-roman) ".";
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--crimson);
}
.steps h3 { font-family: var(--display); font-weight: 500; font-size: 1.7rem; margin: 0.5rem 0 0.35rem; }
.steps p { margin: 0; color: var(--ink-2); }
@media (max-width: 860px) {
  .commissions { grid-template-columns: 1fr; }
}
@media (max-width: 540px) { .steps { grid-template-columns: 1fr; gap: 32px; } }

.btn {
  display: inline-block;
  text-decoration: none;
  font-size: 1.15rem;
  padding: 0.8em 1.7em 0.9em;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  transition: background-color 0.25s, color 0.25s;
}
@media (hover: hover) { .btn:hover { background: var(--ink); color: var(--paper); } }
.btn:active { background: var(--ink); color: var(--paper); }

/* ---------- Contact / footer ---------- */
.contact { border-top: 1px solid var(--rule); padding-bottom: 0; }
.contact-inner { text-align: center; }
.contact-copy { color: var(--ink-2); margin: 1.6rem auto 2rem; max-width: 30em; }
.contact-ig { margin-top: 2rem; }
.contact-ig .ig-row > span { background: var(--brush) no-repeat 0 100% / 100% 7px; padding-bottom: 6px; }
@media (max-width: 560px) { .ig-pre { display: none; } }
.big-link {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.8rem, 4.8vw, 3.8rem);
  line-height: 1.1;
  text-decoration: none;
  background: var(--brush) no-repeat 0 100% / 100% 9px;
  padding-bottom: 6px;
  overflow-wrap: anywhere;
}
@media (hover: hover) { .big-link:hover { background-size: 30% 9px; } }
.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: clamp(64px, 9vw, 120px);
  padding: 28px 0 calc(40px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 1rem;
}
.foot p { margin: 0; }
.foot-left, .foot-right { display: flex; align-items: flex-end; gap: 14px 28px; flex-wrap: wrap; }
.foot-right .link-btn { font-size: 1rem; padding: 0; text-decoration: none; }
.foot-sig { height: 54px; width: auto; opacity: 0.85; }
.fa { font-family: "Noto Naskh Arabic", "Geeza Pro", "Times New Roman", serif; font-size: 1.15rem; color: var(--ink-2); }

/* ---------- Lightbox ---------- */
html.lb-lock { overflow: hidden; }
.lb {
  position: fixed; inset: 0; z-index: 100;
  background: var(--paper);
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 380px);
  opacity: 0;
  transition: opacity 0.28s;
}
.lb[hidden] { display: none; }
.lb.open { opacity: 1; }
.lb-figure {
  margin: 0; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(20px, 4vw, 64px);
}
.lb-figure img {
  max-width: 100%;
  max-height: calc(100vh - 2 * clamp(20px, 4vw, 64px));
  width: auto; height: auto;
  box-shadow: 0 2px 2px rgba(50,35,20,.06), 0 30px 60px -36px rgba(50,35,20,.55);
  transition: opacity 0.35s;
}
.lb-figure img.loading { opacity: 0; }
.lb-info {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  padding: 72px clamp(24px, 3vw, 48px) 40px;
  border-left: 1px solid var(--rule);
}
.lb-info h2 { font-style: italic; font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1.05; margin: 0.6rem 0 1.2rem; }
.lb-count { color: var(--muted); margin: 0; }
.lb-meta, .lb-status { margin: 0 0 0.3rem; color: var(--ink-2); }
.lb-status { margin-bottom: 2rem; }
.lb-info .btn { align-self: flex-start; }
.lb-close { position: absolute; top: 22px; right: clamp(24px, 3vw, 48px); }
.lb-nav { display: flex; gap: 28px; margin-top: 2.6rem; }
.link-btn {
  appearance: none; border: 0; background: none; padding: 6px 0;
  font: inherit; font-size: 1.12rem; font-weight: 500; color: var(--ink-2); cursor: pointer;
}
.link-btn:hover { color: var(--ink); }
@media (max-width: 860px) {
  .lb { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .lb { height: 100dvh; }
  .lb-figure { padding: calc(56px + env(safe-area-inset-top)) 16px 14px; }
  /* the painting always fits the space above the info panel */
  .lb-figure img { max-height: 100%; }
  .lb-info {
    border-left: 0; border-top: 1px solid var(--rule);
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
  }
  .lb-info h2 { font-size: 1.9rem; margin: 0.25rem 0 0.4rem; }
  .lb-meta { margin-bottom: 0.1rem; }
  .lb-status { margin-bottom: 0.9rem; }
  .lb-info .btn { padding: 0.65em 1em 0.75em; }
  .lb-nav { margin-top: 0.4rem; justify-content: space-between; }
  .lb-nav .link-btn { min-height: 44px; padding: 0 4px; }
  .lb-close { position: fixed; top: max(8px, env(safe-area-inset-top)); right: 10px; min-height: 44px; padding: 0 10px; }
  .lb-info .btn { align-self: stretch; text-align: center; }
}

/* ---------- Reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.9s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .hang, .hang::before { transition: none; }
}