/* Olya Aman: the sister system to Medet Aman's site, same structure, her own palette.
   Wine is the signature, ivory and ink-black are the contrast, champagne gold is the only accent.
   (Class names like .silvered are shared with his build; here they render in gold.) */
:root {
  --ivory: #F4EFE7;
  --ivory-deep: #E9E1D5;
  --navy: #5E1626;
  --navy-deep: #2A0A12;
  --navy-soft: #8A2338;
  --ice: #EAD9C8;
  --black: #0F0C0C;
  --black-raise: #1B1516;
  --silver: #CBB68C;
  --silver-dim: #A08E6E;
  --ink: #1A1012;
  --ink-soft: #5A4A4C;

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tight: "Inter Tight", "Inter", system-ui, sans-serif;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;

  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 44px);
  --radius: 4px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --slide-ms: 6000ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font: 400 17px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--silver); outline-offset: 3px; }
::selection { background: var(--navy); color: var(--ivory); }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

.skip {
  position: absolute; left: -999px; top: 8px; z-index: 100;
  background: var(--navy); color: var(--ivory); padding: 10px 14px; border-radius: 6px;
}
.skip:focus { left: 8px; }

/* film grain: an SVG noise tile at low opacity keeps flat navy/black from looking like a placeholder */
.grain {
  position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- shared type ---------- */
.eyebrow, .section-tag {
  font: 500 12px/1 var(--tight);
  letter-spacing: .26em;
  text-transform: uppercase;
}
.section-tag {
  display: flex; align-items: center; gap: 14px;
  color: var(--navy-soft);
  margin: 0 0 24px;
}
.section-tag::before { content: ""; width: 36px; height: 1px; background: currentColor; opacity: .6; }
.section-tag.on-dark { color: var(--silver); }

.display {
  font: 800 clamp(42px, 6.4vw, 84px)/.95 var(--tight);
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin: 0 0 28px;
  color: var(--navy);
}
.display.on-dark { color: var(--ivory); }

/* brushed-silver fill for the second word of the name */
.silvered {
  background: linear-gradient(100deg, #A88A57 0%, #F3E6C8 38%, #C2A26B 55%, #FBF3DF 72%, #B0925F 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.silver-rule {
  border: 0; height: 1px; margin: 26px 0;
  background: linear-gradient(90deg, transparent, var(--silver) 15%, var(--silver) 85%, transparent);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 17px 26px;
  border-radius: 2px;
  border: 1px solid transparent;
  font: 600 13px/1 var(--tight);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: background-color .3s, color .3s, border-color .3s, transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn span { transition: transform .3s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .2); }
.btn:active { transform: translateY(0) scale(.985); box-shadow: none; }
.btn:hover span { transform: translateX(5px); }
.btn-ivory { background: var(--ivory); color: var(--navy); }
.btn-ivory:hover { background: #fff; }
.btn-line { border-color: rgba(244, 239, 231, .45); color: var(--ivory); }
.btn-line:hover { border-color: var(--ivory); background: rgba(244, 239, 231, .08); }
.btn-block { width: 100%; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 16px var(--gutter);
  background: rgba(244, 239, 231, .86);
  color: var(--navy);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid rgba(94, 22, 38, .1);
  transition: background-color .4s, border-color .4s, color .4s, padding .4s;
}
.nav.is-dark { background: rgba(42, 10, 18, .78); border-color: rgba(203, 182, 140, .14); color: var(--ivory); }
.nav:not(.is-top) { padding-block: 10px; }
/* at the very top the bar dissolves into the hero instead of sitting on it */
.nav.is-top { background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; padding-top: 24px; }
.nav-mark { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.mono {
  display: grid; place-items: center;
  width: 40px; height: 40px; border: 1px solid currentColor; border-radius: 50%;
  font: 600 16px/1 var(--serif); letter-spacing: .06em;
  transition: transform .45s var(--ease), background-color .3s;
}
.nav-mark:hover .mono { transform: rotate(-8deg); background: rgba(203, 182, 140, .12); }
.nav-name { font: 600 13px/1 var(--tight); letter-spacing: .3em; text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a {
  font: 500 12.5px/1 var(--tight); letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; position: relative; padding: 6px 0;
}
.nav-links a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav-links a:hover::after, .nav-links a.is-current::after { transform: scaleX(1); }
.nav-cta { border: 1px solid currentColor; padding: 11px 18px !important; border-radius: 2px; transition: background-color .3s, color .3s, transform .6s var(--ease-out); }
.nav-cta:hover { background: var(--navy); color: var(--ivory); border-color: var(--navy); }
.nav.is-dark .nav-cta:hover { background: var(--ivory); color: var(--navy); border-color: var(--ivory); }
.nav-toggle { display: none; }

/* ---------- 01 hero ---------- */
.hero {
  position: relative; overflow: hidden;
  min-height: min(100svh, 980px);
  display: flex;
  background: var(--navy-deep);
  color: var(--ivory);
}
.hero-media { position: absolute; top: -30px; right: -30px; bottom: -30px; width: calc(52% + 30px); overflow: hidden; will-change: translate; }
.hero-media::after {
  /* fade the photo's left edge into navy so the name can sit across the seam;
     z-index sits above the active (2) and leaving (1) slides */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(90deg, var(--navy-deep) 0%, rgba(42, 10, 18, .55) 28%, rgba(42, 10, 18, 0) 60%),
    linear-gradient(0deg, var(--navy-deep) 0%, rgba(42, 10, 18, 0) 32%),
    linear-gradient(180deg, rgba(42, 10, 18, .55) 0%, rgba(42, 10, 18, 0) 20%);
}
.slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 18%;
  opacity: 0; z-index: 0; transform: scale(1.06);
  filter: grayscale(.35) contrast(1.05);
}
.slide.is-active { opacity: 1; z-index: 2; animation: hero-drift calc(var(--slide-ms) + 1600ms) linear both; }
/* .wipe is added by JS on every change, so a page without JS still shows slide one, static */
.slide.is-active.wipe { animation: slide-wipe 1.5s var(--ease-io) both, hero-drift calc(var(--slide-ms) + 1600ms) linear both; }
.slide.is-leaving { opacity: 1; z-index: 1; animation: slide-leave 1.5s var(--ease-io) both; }
@keyframes slide-wipe { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes hero-drift { from { transform: scale(1.14); } to { transform: scale(1.03); } }
@keyframes slide-leave { from { transform: scale(1.03); filter: grayscale(.35) contrast(1.05) brightness(1); } to { transform: scale(1.03) translate3d(-7%, 0, 0); filter: grayscale(.6) contrast(1.05) brightness(.35); } }

.hero-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 150px 0 40px;
}
/* line-height covers the eyebrow wrapping to two lines on narrow phones */
.hero .eyebrow { color: var(--ice); margin: 0 0 22px; opacity: .85; line-height: 1.6; }
.hero-name {
  margin: 0;
  font: 800 clamp(72px, 12.5vw, 188px)/.84 var(--tight);
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.hero-name .word { display: block; overflow: hidden; padding: .02em 0 .05em; margin: -.02em 0 -.05em; }
.hero-name .word-inner { display: block; transform-origin: 0 100%; }
.hero-roles {
  margin: 30px 0 0;
  font: 500 clamp(13px, 1.3vw, 15px)/1.3 var(--tight);
  letter-spacing: .32em; text-transform: uppercase; color: var(--ice);
}
.hero-roles i{ font-style: normal; color: var(--silver-dim); padding: 0 .3em; }
.hero-motto {
  margin: 16px 0 38px;
  font: italic 500 clamp(26px, 3vw, 38px)/1.1 var(--serif);
  color: var(--ivory);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-foot {
  display: flex; justify-content: space-between; align-items: end; gap: 30px; flex-wrap: wrap;
  margin-top: 70px; padding-top: 26px;
  border-top: 1px solid rgba(203, 182, 140, .22);
}
.hero-facts { display: flex; flex-wrap: wrap; gap: 14px 44px; margin: 0; }
.hero-facts dt { font: 500 10.5px/1 var(--tight); letter-spacing: .26em; text-transform: uppercase; color: var(--silver-dim); }
.hero-facts dd { margin: 9px 0 0; font: 600 15px/1.2 var(--tight); color: var(--ivory); }

.reel { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; }
.reel button {
  position: relative; display: block; padding: 0 0 12px; border: 0; background: none; cursor: pointer;
  font: 500 11px/1 var(--tight); letter-spacing: .18em; text-transform: uppercase; color: var(--silver-dim);
  transition: color .3s, transform .3s var(--ease); text-align: left; min-width: 104px;
}
.reel button b { display: block; margin-bottom: 7px; font: 600 12px/1 var(--tight); color: inherit; }
.reel button:hover, .reel button.is-active { color: var(--ivory); }
.reel button:hover { transform: translateY(-2px); }
.reel .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(203, 182, 140, .25); overflow: hidden; }
.reel .bar::after { content: ""; position: absolute; inset: 0; background: var(--ivory); transform: scaleX(0); transform-origin: left; }
.reel button.is-active .bar::after { animation: reel-fill var(--slide-ms) linear forwards; }
.reel.is-paused button.is-active .bar::after { animation: none; transform: scaleX(1); }
@keyframes reel-fill { to { transform: scaleX(1); } }

/* ---------- 02 journey (ivory) ---------- */
.journey { padding: clamp(90px, 12vw, 160px) 0; background: var(--ivory); }
.journey-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(36px, 7vw, 110px); align-items: center; }
.journey-photo { margin: 0; position: relative; z-index: 0; }
.journey-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: var(--radius); }
.journey-photo::before {
  /* navy block offset behind the photo: a hard-edged contrast shape instead of a drop shadow */
  content: ""; position: absolute; inset: 28px -28px -28px 28px; background: var(--navy); z-index: -1; border-radius: var(--radius);
}
.journey-photo figcaption {
  position: absolute; left: -1px; bottom: 26px; background: var(--black); color: var(--ivory);
  padding: 12px 18px; font: 500 11px/1 var(--tight); letter-spacing: .24em; text-transform: uppercase;
  display: flex; gap: 12px;
}
.journey-photo figcaption span { color: var(--silver-dim); }
.lead { font: 500 clamp(21px, 2.2vw, 27px)/1.4 var(--sans); color: var(--ink); margin: 0 0 24px; }
.journey-body p { margin: 0 0 16px; max-width: 60ch; color: var(--ink-soft); }

.route {
  list-style: none; margin: 40px 0 0; padding: 26px 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  position: relative; border-top: 1px solid rgba(94, 22, 38, .15);
}
.route li { position: relative; padding-top: 24px; }
.route-dot { position: absolute; top: 0; left: 0; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--navy); background: var(--ivory); }
.route li:last-child .route-dot { background: var(--navy); }
.route b { display: block; font: 500 10.5px/1 var(--tight); letter-spacing: .24em; text-transform: uppercase; color: #6A5650; }
.route em { display: block; margin-top: 8px; font: 600 16px/1.3 var(--tight); font-style: normal; color: var(--navy); }

/* ---------- quote band ---------- */
.quote-band {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--navy);
  padding: clamp(110px, 15vw, 200px) 0;
  text-align: center; color: var(--ivory);
}
.quote-band > img {
  position: absolute; inset: -130px 0; width: 100%; height: calc(100% + 260px); object-fit: cover; object-position: 50% 25%;
  z-index: -1; opacity: .28; filter: grayscale(1) contrast(1.1);
  transform: scale(1.04);
  animation: quote-drift 24s ease-in-out infinite alternate;
}
@keyframes quote-drift {
  to { transform: scale(1.12) translate3d(-1.2%, 1%, 0); }
}
.quote-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(94, 22, 38, .55), rgba(42, 10, 18, .95) 75%);
}
.quote-band blockquote { position: relative; z-index: 2; margin-block: 0; }
.quote-band p { margin: 0 auto; max-width: 18ch; font: 500 clamp(40px, 6vw, 82px)/1.04 var(--serif); }
.quote-band em { background: linear-gradient(100deg, #C2A26B, #FBF3DF 50%, #C2A26B); -webkit-background-clip: text; background-clip: text; color: transparent; }
.quote-band cite { display: block; margin-top: 30px; font: 500 12px/1 var(--tight); font-style: normal; letter-spacing: .3em; text-transform: uppercase; color: var(--ice); }

/* ---------- 03 work (true black) ---------- */
.work { background: var(--black); color: rgba(244, 239, 231, .72); padding: clamp(90px, 12vw, 160px) 0 clamp(80px, 10vw, 140px); }
.work-head { display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: end; }
.work-intro { margin: 0 0 34px; max-width: 34ch; font-size: 16px; color: var(--silver); }
.slate {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 22px; z-index: 2;
  display: flex; gap: 24px;
  font: 500 11px/1 var(--tight); letter-spacing: .26em; text-transform: uppercase; color: var(--silver);
}
.slate b { color: var(--ivory); font-weight: 600; margin-left: 6px; }
.slate .rec { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--ivory); }
.slate .rec i { width: 8px; height: 8px; border-radius: 50%; background: #E0453A; animation: rec 1.4s steps(2) infinite; }
@keyframes rec { 50% { opacity: .15; } }

.range-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 30px; }
.range-title { margin: 0; font: 500 clamp(28px, 3vw, 38px)/1.1 var(--serif); color: var(--ivory); }
.range-sub { margin: 6px 0 0; font-size: 15px; color: var(--silver-dim); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 15px; border-radius: 2px;
  border: 1px solid rgba(203, 182, 140, .22); background: transparent;
  font: 500 12px/1 var(--tight); letter-spacing: .12em; text-transform: uppercase; color: var(--silver);
  cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .25s var(--ease);
}
.filters button:hover { border-color: var(--silver); color: var(--ivory); transform: translateY(-2px); }
.filters button[aria-pressed="true"] { background: var(--ivory); border-color: var(--ivory); color: var(--black); }
.filters .count { font-size: 10.5px; opacity: .55; }

/* even 4:5 grid reads like a casting book; the lead still spans 2x2 and dense flow backfills gaps when a filter runs */
.stills { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; grid-auto-flow: dense; }
.stills li[hidden] { display: none; }
.stills li.feature { grid-column: span 2; grid-row: span 2; }
/* second feature pins to the right edge so the first two features share the top rows; with 11 stills, three 2x2 cells + 8 singles fill four columns exactly */
.stills li.feature-end { grid-column: span 2 / -1; }
.stills button {
  display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; border: 0; background: var(--black-raise);
  border-radius: 2px; overflow: hidden; cursor: zoom-in; position: relative;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.stills li.feature button { aspect-ratio: auto; height: 100%; }
/* two features can share the top rows with no single beside them, and singles were the only thing sizing rows,
   so those rows collapsed. A 4:5 feature sizes its own two rows; min-height keeps it filling taller rows elsewhere. */
.stills li.feature button { aspect-ratio: 4 / 5; height: auto; min-height: 100%; }
/* absolute so the tall feature image adds no intrinsic height; the small stills alone size the rows */
.stills li.feature img { position: absolute; inset: 0; }
.stills img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
  transition: transform .8s var(--ease), filter .5s; filter: saturate(.8) brightness(.88);
}
.stills button::after {
  content: attr(data-caption); position: absolute; left: 0; right: 0; bottom: 0;
  padding: 34px 14px 13px; text-align: left;
  font: 500 11px/1.3 var(--tight); letter-spacing: .16em; text-transform: uppercase; color: var(--ivory);
  background: linear-gradient(transparent, rgba(42, 10, 18, .92));
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s var(--ease);
}
.stills button:hover::after, .stills button:focus-visible::after { opacity: 1; transform: none; }
.stills button:hover, .stills button:focus-visible { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0, 0, 0, .35); }
.stills button:hover img, .stills button:focus-visible img { transform: scale(1.05); filter: saturate(1) brightness(1); }

/* ---------- 04 purpose (white/ivory) ---------- */
.purpose {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, var(--ivory) 100%);
  padding: clamp(170px, 22vw, 290px) 0 clamp(90px, 11vw, 150px);
}
.purpose-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px, 7vw, 100px); align-items: start; }
.purpose-head { margin: 0 0 24px; font: 500 clamp(42px, 5.4vw, 74px)/1.02 var(--serif); color: var(--navy); }
.purpose-head em { font-style: italic; }
.purpose-sub { margin: 0; max-width: 40ch; color: var(--ink-soft); }
.pillars { display: grid; border-top: 1px solid rgba(94, 22, 38, .15); }
.pillar {
  display: grid; grid-template-columns: 80px 1fr; gap: 20px;
  padding: 30px 0; border-bottom: 1px solid rgba(94, 22, 38, .15);
  transition: background-color .4s, padding .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.pillar:hover { background: var(--navy); padding-inline: 24px; transform: translateX(4px); box-shadow: 0 12px 28px rgba(94, 22, 38, .12); }
.pillar:hover h3, .pillar:hover .pillar-num { color: var(--ivory); }
.pillar:hover p { color: var(--ice); }
.pillar-num { font: italic 500 40px/1 var(--serif); color: var(--silver-dim); transition: color .4s; }
.pillar h3 { margin: 4px 0 10px; font: 700 20px/1 var(--tight); letter-spacing: .2em; text-transform: uppercase; color: var(--navy); transition: color .4s; }
.pillar p { margin: 0; color: var(--ink-soft); font-size: 16px; transition: color .4s; }

/* ---------- 05 contact + footer (navy) ---------- */
.foot { position: relative; overflow: hidden; background: var(--navy); color: rgba(244, 239, 231, .78); padding: clamp(90px, 11vw, 150px) 0 28px; }
.foot > .wrap { position: relative; z-index: 2; }
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px, 7vw, 100px); align-items: start; }
.contact-copy p:not(.section-tag) { max-width: 46ch; margin: 0 0 28px; color: var(--ice); }
.ig-link {
  display: inline-flex; align-items: center; gap: 12px;
  font: 600 16px/1 var(--tight); letter-spacing: .06em; color: var(--ivory); text-decoration: none;
  border-bottom: 1px solid var(--silver); padding-bottom: 7px;
  transition: transform .6s var(--ease-out), border-color .3s;
}
.ig-link:hover { border-color: var(--ivory); }
.ig-link svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* the form card is ivory on navy: the strongest contrast moment on the page, where the action is */
.inquiry {
  background: var(--ivory); color: var(--ink);
  border-radius: var(--radius); padding: clamp(24px, 3.4vw, 40px);
  display: grid; gap: 20px;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6);
}
.topic { border: 0; margin: 0; padding: 0; min-width: 0; }
.topic legend, .field > span, .preview-label {
  display: block; margin-bottom: 10px;
  font: 500 10.5px/1 var(--tight); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft);
}
.topic-row { display: flex; flex-wrap: wrap; gap: 8px; }
.topic-row input { position: absolute; opacity: 0; pointer-events: none; }
.topic-row span {
  display: inline-block; padding: 10px 14px; border-radius: 2px; cursor: pointer;
  border: 1px solid rgba(94, 22, 38, .22); font: 500 13.5px/1 var(--tight); color: var(--navy);
  transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ease);
}
.topic-row span:hover { border-color: var(--navy); transform: translateY(-2px); }
.topic-row input:checked + span { background: var(--black); color: var(--ivory); border-color: var(--black); }
.topic-row input:focus-visible + span { outline: 2px solid var(--navy-soft); outline-offset: 2px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: block; }
.field input, .field textarea {
  width: 100%; border-radius: 2px; padding: 13px 14px;
  background: #fff; border: 1px solid rgba(94, 22, 38, .18);
  color: var(--ink); font: 400 16px/1.4 var(--sans); resize: vertical;
  transition: border-color .2s, box-shadow .2s;
}
.field input::placeholder, .field textarea::placeholder { color: #8A7A76; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(94, 22, 38, .12); }
.field.is-missing input, .field.is-missing textarea { border-color: #C0473A; }
.preview { border-left: 2px solid var(--navy); padding: 4px 0 4px 16px; }
.preview p { margin: 0; white-space: pre-line; font-size: 15px; color: var(--navy); min-height: 3em; }
.inquiry .btn-ivory { background: var(--navy); color: var(--ivory); }
.inquiry .btn-ivory:hover { background: var(--black); }
.form-note { margin: 0; min-height: 1.4em; font-size: 14px; color: var(--ink-soft); text-align: center; }

.foot-sign { text-align: center; margin-top: clamp(90px, 11vw, 140px); }
.foot-name { margin: 0; font: 800 clamp(48px, 9vw, 130px)/.9 var(--tight); letter-spacing: -.03em; text-transform: uppercase; color: var(--ivory); }
.foot-motto { margin: 18px 0 0; font: italic 500 clamp(22px, 2.6vw, 30px)/1.2 var(--serif); color: var(--ivory); }
.foot-sign .silver-rule { max-width: 620px; margin: 30px auto; }
.foot-place { margin: 0; font: 500 12px/1 var(--tight); letter-spacing: .3em; text-transform: uppercase; color: var(--silver); }
.foot-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  margin-top: 70px; padding-top: 22px; border-top: 1px solid rgba(203, 182, 140, .16);
  font-size: 13px; color: rgba(234, 217, 200, .75);
}
.foot-bottom a { color: var(--ivory); }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 90;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  padding: 24px; background: rgba(10, 6, 7, .96);
}
.lightbox:not([hidden]) { animation: lightbox-backdrop-in .32s ease both; }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; display: grid; justify-items: center; gap: 14px; min-width: 0; }
/* fixed height (not max-height) so the small thumb and the full file render at the same size during the zoom */
.lightbox img { height: calc(100svh - 120px); width: auto; max-width: 100%; object-fit: contain; border-radius: 2px; transform-origin: 50% 50%; will-change: transform; }
.lightbox figcaption { display: flex; gap: 18px; font: 500 12px/1 var(--tight); letter-spacing: .2em; text-transform: uppercase; color: var(--silver); }
.lb-close, .lb-arrow {
  border: 1px solid rgba(203, 182, 140, .3); background: rgba(15, 12, 12, .7); color: var(--ivory);
  border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  transition: background-color .2s, border-color .2s, transform .2s var(--ease);
}
.lb-close:hover, .lb-arrow:hover { background: var(--navy); border-color: var(--silver); transform: scale(1.06); }
.lb-arrow { width: 52px; height: 52px; font-size: 30px; line-height: 1; padding-bottom: 4px; }
.lb-close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; font-size: 26px; line-height: 1; }

/* ---------- motion system ----------
   Every hidden state below is scoped to .js-rv / .js-intro / .show-intro, which a head script adds
   and a 3s failsafe removes if main.js never reports in. No script, no hidden content. */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-io: cubic-bezier(.77, 0, .18, 1); }

/* generic reveal: rise, unblur, fade */
.js-rv .rv {
  opacity: 0; transform: translate3d(0, 34px, 0); filter: blur(6px);
  transition: opacity 1.1s var(--ease-out), transform 1.3s var(--ease-out), filter 1.1s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js-rv .rv[data-reveal="left"] { transform: translate3d(-48px, 0, 0); }
.js-rv .rv[data-reveal="right"] { transform: translate3d(48px, 0, 0); }
.js-rv .rv.in { opacity: 1; transform: none; filter: none; }
.js-rv .section-tag::before { transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-out) .2s; }
.js-rv .section-tag.in::before, .js-rv .rv.in .section-tag::before { transform: scaleX(1); }

/* hero lines wait for the intro, then stagger like a title sequence */
.js-rv .hero-copy .rv, .js-rv .hero-foot.rv { transition-duration: 1.2s, 1.4s, 1.2s; }
.js-rv .hero-copy .eyebrow { --d: .05s; }
.js-rv .hero-copy .hero-roles { --d: .55s; }
.js-rv .hero-copy .hero-motto { --d: .68s; }
.js-rv .hero-copy .hero-actions { --d: .82s; }
.js-rv .hero-foot.rv { --d: 1s; }

/* the name rises out of a mask, one word after the other */
.js-intro .hero-name .word-inner { transform: translate3d(0, 108%, 0) rotate(4deg); }
.hero-ready .hero-name .word-inner { transform: none; transition: transform 1.5s var(--ease-out) .12s; }
.hero-ready .hero-name .word + .word .word-inner { transition-delay: .26s; }

/* brushed-silver words catch a slow travelling glint */
.silvered { background-size: 260% 100%; animation: sheen 9s ease-in-out infinite; }
@keyframes sheen { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }

/* display headings rise line by line out of their own mask */
.split-lines .line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.split-lines .line-inner { display: block; transform-origin: 0 100%; }
.js-rv .rv.split-lines { opacity: 1; transform: none; filter: none; }
.js-rv .split-lines .line-inner {
  transform: translate3d(0, 112%, 0) rotate(3deg);
  transition: transform 1.3s var(--ease-out);
  transition-delay: calc(var(--d, 0s) + var(--li, 0) * .1s);
}
.js-rv .split-lines.in .line-inner { transform: none; }

/* the quote arrives a word at a time, out of a soft focus pull */
.js-rv .split-words .w {
  display: inline-block; opacity: 0; transform: translate3d(0, .35em, 0); filter: blur(10px);
  transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out), filter 1s var(--ease-out);
  transition-delay: calc(var(--wi) * 60ms);
}
.js-rv .split-words.in .w { opacity: 1; transform: none; filter: none; }
/* background-clip:text can't reach through transformed children, so the silver moves onto each word */
.split-words.is-split em { background: none; color: var(--ivory); }
.split-words.is-split em .w {
  background: linear-gradient(100deg, #C2A26B, #FBF3DF 50%, #C2A26B);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* photos open like a shutter from the bottom while the image settles from a slight zoom */
.js-rv .rv-img img, .js-rv .rv-img video { clip-path: inset(100% 0 0 0); scale: 1.2; transition: clip-path 1.5s var(--ease-io), scale 2s var(--ease-out); }
.js-rv .rv-img.in img, .js-rv .rv-img.in video { clip-path: inset(0 0 0 0); scale: 1; }
/* once the 2s reveal has played (JS adds .is-settled), hover gets a quick ease instead of inheriting it */
.journey-photo img, .js-rv .rv-img.is-settled img { transition: scale .8s var(--ease-out); }
.journey-photo:hover img,
.js-rv .journey-photo.in:hover img{ scale: 1.03; }
.js-rv .rv-img figcaption { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .8s ease 1s, transform 1s var(--ease-out) 1s; }
.js-rv .rv-img.in figcaption { opacity: 1; transform: none; }
.js-rv .journey-photo::before { transform: translate3d(-28px, -28px, 0); opacity: 0; transition: transform 1.4s var(--ease-out) .7s, opacity .8s ease .7s; }
.js-rv .journey-photo.in::before { transform: none; opacity: 1; }

/* staggered groups: children enter in order, then drop the delay so hover stays instant */
.js-rv [data-stagger] > * {
  opacity: 0; transform: translate3d(0, 26px, 0);
  transition-property: opacity, transform, background-color, padding, color, box-shadow;
  transition-duration: 1s, 1.2s, .4s, .4s, .4s, .4s;
  transition-timing-function: var(--ease-out);
  transition-delay: calc(var(--si, 0) * 120ms);
}
.js-rv [data-stagger].in > * { opacity: 1; transform: none; }
.js-rv [data-stagger].is-settled > * { transition-delay: 0s; transition-duration: .4s; }
.js-rv .route .route-dot { scale: 0; transition: scale .7s var(--ease-out) calc(var(--si, 0) * 120ms + .3s); }
.js-rv .route.in .route-dot { scale: 1; }

/* gallery stills rise in column order as they reach the viewport */
.js-rv .stills > li {
  opacity: 0; transform: translate3d(0, 48px, 0) scale(.96);
  transition: opacity 1s var(--ease-out), transform 1.3s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js-rv .stills > li.in { opacity: 1; transform: none; }
.stills button { transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.stills button:hover { box-shadow: 0 0 0 1px rgba(244, 239, 231, .35), 0 30px 60px -30px rgba(0, 0, 0, .8); }

/* buttons: a fill sweeps up from the bottom; JS adds a magnetic pull on fine pointers */
.btn { position: relative; overflow: hidden; isolation: isolate; transition: background-color .3s, color .45s var(--ease-out), border-color .3s, transform .6s var(--ease-out), box-shadow .4s var(--ease-out); }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sweep, var(--black));
  transform: translate3d(0, 101%, 0); transition: transform .6s var(--ease-io);
}
.btn:hover::before { transform: none; }
.btn-ivory { --sweep: var(--black); }
.btn-ivory:hover { background: var(--ivory); color: var(--ivory); }
.btn-line { --sweep: var(--ivory); }
.btn-line:hover { background: transparent; color: var(--navy); }
.inquiry .btn-ivory:hover { background: var(--navy); color: var(--ivory); }

/* nav: hides on the way down, returns on the way up; a hairline tracks reading progress */
.nav { transition: background-color .4s, border-color .4s, color .4s, padding .4s, transform .7s var(--ease-out); }
.nav.is-hidden { transform: translate3d(0, -100%, 0); }
.progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--silver), var(--ice));
  transform-origin: 0 50%; transform: scaleX(var(--p, 0));
}
.nav.is-top .progress { opacity: 0; }

/* lightbox chrome eases in after the photo lands */
.lightbox figcaption, .lb-arrow, .lb-close { transition: opacity .5s ease, background-color .2s, border-color .2s, transform .2s var(--ease); }
.lightbox.is-opening figcaption, .lightbox.is-opening .lb-arrow, .lightbox.is-opening .lb-close { opacity: 0; }
.lightbox.is-closing { animation: lightbox-backdrop-out .45s ease both; }
@keyframes lightbox-backdrop-in { from { opacity: 0; } }
@keyframes lightbox-backdrop-out { to { background-color: rgba(10, 6, 7, 0); } }

/* ---------- intro curtain (first visit per session) ---------- */
.intro { display: none; }
.show-intro .intro {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: var(--navy-deep); color: var(--ivory);
  animation: intro-lift 1.05s var(--ease-io) 1.1s both;
}
.show-intro body { overflow: hidden; }
.intro-mark { position: relative; width: 96px; height: 96px; display: grid; place-items: center; animation: intro-mark-out .55s var(--ease-io) 1s both; }
.intro-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.intro-mark circle { fill: none; stroke: var(--silver); stroke-width: 1; stroke-dasharray: 290; stroke-dashoffset: 290; animation: intro-draw 1.05s var(--ease-io) .1s forwards; }
.intro-mark span { font: 600 26px/1 var(--serif); letter-spacing: .08em; opacity: 0; animation: intro-fade .7s ease .4s forwards; }
@keyframes intro-draw { to { stroke-dashoffset: 0; } }
@keyframes intro-fade { to { opacity: 1; } }
@keyframes intro-mark-out { to { opacity: 0; transform: translate3d(0, -24px, 0) scale(.92); } }
@keyframes intro-lift { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .reel button { min-width: 0; }
  .reel { gap: 16px; }
}
@media (max-width: 900px) {
  .nav-toggle {
    display: grid; gap: 6px; place-content: center;
    width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer;
  }
  .nav-toggle span { width: 24px; height: 1.5px; background: currentColor; transition: transform .3s var(--ease); }
  .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  .nav-links {
    /* hangs off the header's own bottom edge, so it follows the bar as it grows (top of page) or shrinks */
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    max-height: calc(100svh - 100%); overflow-y: auto;
    padding: 10px var(--gutter) 24px; background: var(--ivory); color: var(--navy);
    border-bottom: 1px solid rgba(94, 22, 38, .12);
    transform: translateY(-8px); opacity: 0; pointer-events: none; visibility: hidden;
    transition: opacity .25s, transform .25s var(--ease), visibility .25s;
  }
  .nav-links.open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
  .nav-links a { padding: 16px 0; border-bottom: 1px solid rgba(94, 22, 38, .1); font-size: 13.5px; }
  .nav-links a::after { display: none; }
  .nav-links .nav-cta { margin-top: 14px; text-align: center; border: 1px solid var(--navy) !important; padding: 15px 18px !important; }
  .nav.is-dark .nav-links { background: var(--navy-deep); color: var(--ivory); border-color: rgba(203, 182, 140, .14); }
  .nav.is-dark .nav-links a { border-color: rgba(203, 182, 140, .14); }
  .nav.is-dark .nav-links .nav-cta { border-color: var(--ivory) !important; }
  /* an open menu at the top of the page needs a solid bar behind the toggle */
  .nav.is-top.menu-open { background: var(--navy-deep); }

  /* phone hero: photo fills the upper screen, name overlaps its faded bottom edge */
  .hero { flex-direction: column; min-height: 0; }
  .hero-media { position: relative; top: auto; right: auto; bottom: auto; width: 100%; height: min(66svh, 620px); min-height: 420px; }
  .hero-media::after {
    background:
      linear-gradient(0deg, var(--navy-deep) 8%, rgba(42, 10, 18, .35) 45%, rgba(42, 10, 18, 0) 70%),
      linear-gradient(180deg, rgba(42, 10, 18, .6) 0%, rgba(42, 10, 18, 0) 22%);
  }
  .hero-inner { margin-top: -150px; padding: 0 0 36px; }
  .hero-foot { margin-top: 44px; flex-direction: column; align-items: stretch; }
  .reel { justify-content: space-between; }

  .journey-grid, .contact-grid, .purpose-grid, .work-head { grid-template-columns: 1fr; }
  .journey-photo { max-width: 440px; margin-right: 28px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .nav-name { display: none; }
  .hero-name { font-size: clamp(64px, 20vw, 96px); }
  .display { font-size: clamp(36px, 10.4vw, 52px); }
  .hero-roles { font-size: 12px; letter-spacing: .2em; }
  .hero-actions .btn { flex: 1 1 100%; }
  .hero-facts { gap: 14px 28px; }
  .reel button { font-size: 10px; letter-spacing: .12em; }
  .route { grid-template-columns: 1fr; gap: 18px; border-top: 0; padding-top: 0; }
  .route li { padding: 0 0 0 26px; }
  .route li::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: -18px; width: 1px; background: rgba(94, 22, 38, .2); }
  .route li:last-child::before { display: none; }
  .route-dot { top: 4px; }
  .slate { gap: 14px; }
  .slate span:nth-child(3) { display: none; }
  .stills { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  /* at two columns the feature fills its own row, so nothing else sizes that row: give it a real ratio */
  .stills li.feature { grid-row: auto; }
  .stills li.feature button { aspect-ratio: 4 / 5; height: auto; }
  .pillar { grid-template-columns: 54px 1fr; }
  .pillar-num { font-size: 32px; }
  .field-row { grid-template-columns: 1fr; }
  .lightbox { grid-template-columns: 1fr; padding: 70px 12px 24px; }
  .lb-arrow { position: absolute; bottom: 20px; width: 46px; height: 46px; }
  .lb-prev { left: 20px; }
  .lb-next { right: 20px; }
  .lightbox img { max-height: calc(100svh - 190px); }
  .foot-bottom { justify-content: center; text-align: center; }
}

/* ---------- phone hardening ----------
   Phones size the whole layout to the widest thing on the page, including elements still parked
   off to the side waiting to reveal, so nothing may sit outside the screen even before it animates. */
main, footer { overflow-x: clip; }
@media (max-width: 900px) {
  /* side-entry reveals become rise-ins: a 48px sideways start is exactly what widened the page */
  .js-rv .rv[data-reveal]:not(.in) { transform: translate3d(0, 34px, 0); }
}
/* tablets are touch devices too, so this covers every width up to the tablet breakpoint and any coarse pointer */
@media (max-width: 900px), (pointer: coarse) {
  /* touch targets: 44px minimum on everything a thumb has to hit */
  .filters button { min-height: 44px; padding-inline: 14px; }
  .topic-row span { padding: 14px 16px; }
  .ig-link { padding: 12px 0 9px; }
  .foot-bottom a { display: inline-block; padding: 12px 4px; margin: -12px -4px; }
  .reel button { padding-top: 10px; min-height: 44px; }
  .lb-close { width: 48px; height: 48px; }
  .socials a, .contact-lines a { padding-block: 12px; }
  /* small caps labels: never under 11px on a phone */
  .hero-facts dt, .route b, .filters .count, .topic legend, .field > span, .preview-label, .slate, .reel button, .j-tag, .contact-lines span { font-size: 11px; }
  .reel button { letter-spacing: .1em; }
  /* full-width form button: tighter tracking keeps "Copy & open Instagram DM →" on one line at 320px */
  .btn-block { padding-inline: 16px; letter-spacing: .08em; gap: 10px; white-space: nowrap; }
}
@media (max-width: 380px) {
  .btn-block { font-size: 12px; letter-spacing: .05em; padding-inline: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js-rv .rv { opacity: 1; transform: none; }
  .slide { transform: none; }
}

/* ---------- Olya-specific pieces ---------- */
/* reel: a self-hosted 16:9 player framed edge to edge */
.reel-frame { margin: 30px auto clamp(70px, 9vw, 110px); width: min(100% - 2 * var(--gutter), 1240px); }
.reel-screen { position: relative; aspect-ratio: 16 / 9; background: var(--black-raise); overflow: hidden; border-radius: 2px; }
.js-rv .rv-img .reel-screen { clip-path: inset(100% 0 0 0); transition: clip-path 1.5s var(--ease-io); }
.js-rv .rv-img.in .reel-screen { clip-path: inset(0 0 0 0); }
.reel-frame .slate { position: static; padding: 16px 0 0; }

.projects { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(20px, 3vw, 40px); margin-bottom: clamp(80px, 10vw, 130px); align-items: start; }
.project { display: block; text-decoration: none; color: inherit; }
.project-img { overflow: hidden; border-radius: 2px; aspect-ratio: 16 / 10; background: var(--black-raise); }
.project + .project .project-img { aspect-ratio: 4 / 3; }
.project-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: saturate(.85) brightness(.9); transition: scale 1s var(--ease-out), filter .6s; }
.project:hover .project-img img, .project:focus-visible .project-img img { scale: 1.05; filter: none; }
.project-meta { display: flex; justify-content: space-between; gap: 12px; margin: 18px 0 10px; font: 500 11px/1.3 var(--tight); letter-spacing: .2em; text-transform: uppercase; color: var(--silver); }
.project h3 { margin: 0 0 10px; font: 500 clamp(30px, 3.4vw, 46px)/1.05 var(--serif); color: var(--ivory); display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.project h3 span { font: 400 22px/1 var(--sans); color: var(--silver); transition: transform .5s var(--ease-out); }
.project:hover h3 span { transform: translate(4px, -4px); }
.project p { margin: 0; max-width: 52ch; font-size: 16px; }
.gallery-more { margin: 34px 0 0; text-align: center; }

.journal { background: var(--ivory); padding: clamp(90px, 12vw, 160px) 0; }
.journal-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(36px, 7vw, 100px); align-items: start; }
.journal-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(94, 22, 38, .18); }
.journal-list a {
  display: grid; grid-template-columns: 54px 1fr auto 30px; align-items: baseline; gap: 18px;
  padding: 28px 0; border-bottom: 1px solid rgba(94, 22, 38, .18); text-decoration: none; color: var(--navy);
  transition: padding .4s var(--ease-out), background-color .4s, color .4s;
}
.journal-list a:hover, .journal-list a:focus-visible { background: var(--navy); color: var(--ivory); padding-inline: 22px; }
.j-num { font: italic 500 22px/1 var(--serif); color: var(--silver-dim); }
.j-title { font: 500 clamp(24px, 2.6vw, 34px)/1.15 var(--serif); }
.j-tag { font: 500 11px/1 var(--tight); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.journal-list a:hover .j-tag, .journal-list a:hover .j-num { color: var(--ice); }
.j-arrow { font-size: 20px; transition: transform .5s var(--ease-out); }
.journal-list a:hover .j-arrow { transform: translate(4px, -4px); }

/* no mountain range on her site, so the craft section doesn't need the tall top padding */
.purpose { padding: clamp(90px, 12vw, 160px) 0; }

.contact-lines { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 14px; }
.contact-lines li { display: grid; grid-template-columns: 70px 1fr; align-items: baseline; gap: 14px; }
.contact-lines span { font: 500 10.5px/1 var(--tight); letter-spacing: .24em; text-transform: uppercase; color: var(--silver); }
.contact-lines a { font: 500 clamp(18px, 1.8vw, 22px)/1.3 var(--serif); color: var(--ivory); text-decoration: none; border-bottom: 1px solid rgba(203, 182, 140, .4); transition: border-color .3s; justify-self: start; }
.contact-lines a:hover { border-color: var(--ivory); }
.socials { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.socials a { display: inline-block; padding: 10px 14px; border: 1px solid rgba(203, 182, 140, .35); border-radius: 2px; font: 500 12px/1 var(--tight); letter-spacing: .14em; text-transform: uppercase; color: var(--ivory); text-decoration: none; transition: background-color .3s, color .3s, border-color .3s; }
.socials a:hover { background: var(--ivory); color: var(--navy); border-color: var(--ivory); }

@media (max-width: 900px) {
  .projects, .journal-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .journal-list a { grid-template-columns: 34px 1fr 24px; }
  .j-tag { grid-column: 2; grid-row: 2; }
  .j-arrow { grid-row: 1; grid-column: 3; }
  .project-meta { flex-direction: column; gap: 6px; }
}

/* touch overrides for Olya-only pieces: these must come after the rules above to win */
@media (max-width: 900px), (pointer: coarse) {
  .socials a { padding: 15px 16px; }
  .contact-lines span { font-size: 11px; }
  .contact-lines a { padding-block: 10px; display: inline-block; }
}

/* one project left: lay it out image-left / copy-right across the row instead of leaving half the grid empty */
.projects.is-single { grid-template-columns: 1fr; }
.projects.is-single .project { display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr auto auto auto 1fr; column-gap: clamp(24px, 4vw, 56px); }
/* image spans every row on the left; the 1fr rows above and below centre the meta, title and copy on the right */
.projects.is-single .project-img { grid-column: 1; grid-row: 1 / -1; }
.projects.is-single .project-meta { grid-column: 2; grid-row: 2; }
.projects.is-single .project h3 { grid-column: 2; grid-row: 3; }
.projects.is-single .project p { grid-column: 2; grid-row: 4; }
.projects.is-single .project-meta { margin-top: 0; }
@media (max-width: 760px) { .projects.is-single .project { grid-template-columns: 1fr; grid-template-rows: none; } .projects.is-single .project-img, .projects.is-single .project-meta, .projects.is-single .project h3, .projects.is-single .project p { grid-column: 1; grid-row: auto; } .projects.is-single .project-meta { margin-top: 18px; } }

/* ---------- 04 · Books: a shelf of her eBooks on wine ---------- */
.books { position: relative; background: var(--navy-deep); color: rgba(244, 239, 231, .72); padding: clamp(90px, 12vw, 160px) 0; overflow: hidden; }
.books-head { display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: end; margin-bottom: clamp(36px, 5vw, 60px); }
.books-intro { margin: 0 0 34px; max-width: 34ch; font-size: 16px; color: var(--silver); }
.shelf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(28px, 3vw, 40px) clamp(16px, 2vw, 26px); }
.book { display: block; text-decoration: none; color: inherit; }
.book-cover { display: block; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 2px; background: var(--black-raise);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7), 0 0 0 1px rgba(203, 182, 140, .12);
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.book-cover img { width: 100%; height: 100%; object-fit: cover; }
.book:hover .book-cover, .book:focus-visible .book-cover { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .85), 0 0 0 1px rgba(203, 182, 140, .4); }
.book-num { display: block; margin: 16px 0 6px; font: 500 11px/1 var(--tight); letter-spacing: .2em; color: var(--silver); }
.book-title { display: block; font: 500 21px/1.15 var(--serif); color: var(--ivory); }
.book-sub { display: block; margin-top: 6px; font-size: 13px; line-height: 1.45; color: rgba(244, 239, 231, .6); }
.book-read { display: inline-block; margin-top: 10px; font: 500 11px/1 var(--tight); letter-spacing: .16em; text-transform: uppercase; color: var(--silver); border-bottom: 1px solid rgba(203, 182, 140, .35); padding-bottom: 4px; transition: border-color .3s; }
.book:hover .book-read, .book:focus-visible .book-read { border-color: var(--silver); }
.shelf-hint { display: none; }
.hero-facts dd a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(203, 182, 140, .5); }
.hero-facts dd a:hover { border-color: var(--silver); }
@media (max-width: 1100px) { .shelf { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px) { .books-head { grid-template-columns: 1fr; } }
/* phones: a sideways shelf instead of a six-row stack of covers */
@media (max-width: 640px) {
  .shelf { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 16px; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 10px; }
  .shelf::-webkit-scrollbar { display: none; }
  .shelf > li { flex: 0 0 56%; scroll-snap-align: start; }
  .shelf-hint { display: block; margin: 14px 0 0; font: 500 11px/1 var(--tight); letter-spacing: .2em; text-transform: uppercase; color: var(--silver); }
}

/* link from the latest-six essay list to the full index */
.essays-all { margin: 26px 0 0; }
.reel-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }