/* =============================================================
   aygeen · one page site
   Palette      : warm peach ground, espresso ink, one accent (rose)
   Type         : Bricolage Grotesque (display) + Instrument Sans (text)
   Shape rule   : buttons & pills = 999px · everything else = 6px
   Theme        : light, locked to brand. Colour is the identity here,
                  so the page does not invert with the OS.
   ============================================================= */

/* ---------- tokens ---------- */
:root{
  /* ground */
  --peach:      #f9ede4;   /* page */
  --peach-2:    #f4dfd2;   /* alternate band */
  --peach-3:    #fdf7f2;   /* raised surface: inputs, panel */

  /* ink */
  --ink:        #241713;   /* headings, ribbon, footer, primary button */
  --ink-2:      #3a2620;   /* ink hover */
  --muted:      #6b554b;   /* body copy · 6.0:1 on peach */

  /* the one accent */
  --rose:       #f03a6b;   /* brand pink, large display + non-text only */
  --rose-ink:   #c4123f;   /* text-safe rose · 5.2:1 on peach */
  --rose-soft:  #ffd9e4;   /* focus ring on ink */

  --line:       rgb(36 23 19 / .14);
  --line-soft:  rgb(36 23 19 / .08);
  --shadow:     0 1px 2px rgb(90 45 30 / .05), 0 12px 28px -12px rgb(90 45 30 / .18);
  --shadow-lg:  0 2px 6px rgb(90 45 30 / .06), 0 30px 60px -24px rgb(90 45 30 / .26);

  /* type */
  --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-text:    'Instrument Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* layout */
  --maxw: 1240px;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(4.5rem, 10vw, 8.5rem);
  --ribbon-h: 78px;

  /* shape */
  --r: 6px;
  --r-pill: 999px;

  --ease: cubic-bezier(.16, 1, .3, 1);
}

@media (max-width: 720px){ :root{ --ribbon-h: 66px; } }

/* ---------- reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
  scroll-behavior: smooth;
}
body{
  margin: 0;
  background: var(--peach);
  color: var(--muted);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* A class that sets `display` outbids the UA rule for [hidden], which would
   leave the menu and lightbox overlays permanently on screen. Lock it down. */
[hidden]{ display: none !important; }
img{ display: block; max-width: 100%; height: auto; }
button{ font: inherit; color: inherit; }
h1, h2, h3, p, figure, ul{ margin: 0; padding: 0; }
ul{ list-style: none; }
a{ color: inherit; }

:where(a, button, input, textarea, [tabindex]):focus-visible{
  outline: 2px solid var(--rose-ink);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-ink :where(a, button):focus-visible{ outline-color: var(--rose-soft); }

.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link{
  position: fixed; top: .5rem; left: .5rem; z-index: 200;
  transform: translateY(-160%);
  background: var(--ink); color: var(--peach);
  padding: .7rem 1.1rem; border-radius: var(--r-pill);
  font-size: .9rem; font-weight: 600; text-decoration: none;
  transition: transform .2s var(--ease);
}
.skip-link:focus-visible{ transform: none; }

.container{
  width: min(100% - (var(--pad) * 2), var(--maxw));
  margin-inline: auto;
}

/* Optical centring for the wordmark.
   The script is left-heavy: the first 40% of its width carries 56% of the ink
   while the final tenth carries 2% (the exit swash), so a box-centred logo
   reads shifted left. A 5% nudge right balances the bounding box against the
   ink mass. Percentage translate is relative to the image's own width, so this
   holds at every size the logo is used. */
.ribbon__logo img,
.footer__logo img{ transform: translateX(5%); }

/* ---------- type ---------- */
.section-title{
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 40, 'wght' 600;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--ink);
}

/* ---------- buttons ---------- */
.btn{
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: currentColor;
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55rem;
  min-height: 3.125rem;
  padding: .78rem 1.6rem .82rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-text);
  font-size: 1rem; font-weight: 600; line-height: 1;
  letter-spacing: -.005em;
  text-decoration: none;
  white-space: nowrap;                    /* CTA labels never wrap */
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .18s var(--ease),
              box-shadow .25s var(--ease);
}
.btn--primary{ --btn-bg: var(--ink); --btn-fg: var(--peach); --btn-bd: var(--ink); box-shadow: var(--shadow); }
.btn--primary:hover{ --btn-bg: var(--rose-ink); --btn-bd: var(--rose-ink); }
.btn--ghost{ --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line); }
.btn--ghost:hover{ --btn-bd: var(--ink); --btn-bg: rgb(36 23 19 / .04); }
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0) scale(.985); }
.btn--block{ width: 100%; }
.btn[disabled]{ opacity: .55; cursor: progress; transform: none; }

/* =============================================================
   RIBBON  (header)
   ============================================================= */
#top-sentinel{ position: absolute; top: 0; height: 1px; width: 1px; }

.ribbon-wrap{
  position: sticky; top: 0; z-index: 90;
  padding: .5rem var(--pad) 0;
  transition: padding .3s var(--ease);
}
.ribbon-wrap.is-stuck{ padding-top: 0; }

/* Once stuck, a frosted peach band fills the gutters either side of the
   ribbon so the page does not scroll through them. */
.ribbon-wrap::before{
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: rgb(249 237 228 / .82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease);
}
.ribbon-wrap.is-stuck::before{ opacity: 1; }
@media (prefers-reduced-transparency: reduce){
  .ribbon-wrap::before{ background: var(--peach); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.ribbon{
  position: relative; z-index: 1;
  width: min(100%, var(--maxw));
  margin-inline: auto;
  height: var(--ribbon-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-inline: clamp(1rem, 3vw, 2.25rem);
  background: var(--ink);
  /* swallowtail notches: this is the ribbon, not a plain bar */
  clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 50%, 100% 100%, 0 100%, 20px 50%);
  transition: height .3s var(--ease), background-color .3s var(--ease);
}
.ribbon-wrap.is-stuck .ribbon{
  height: calc(var(--ribbon-h) - 16px);
  box-shadow: 0 14px 30px -18px rgb(36 23 19 / .5);
}

.ribbon__logo{
  grid-column: 2;
  display: block;
  justify-self: center;
  line-height: 0;
}
.ribbon__logo img{
  width: 176px; height: auto;
  transition: width .3s var(--ease);
}
.ribbon-wrap.is-stuck .ribbon__logo img{ width: 140px; }

.ribbon__nav{
  display: flex; align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
  font-size: .9375rem; font-weight: 500;
  letter-spacing: .005em;
}
.ribbon__nav--start{ grid-column: 1; justify-content: flex-start; }
.ribbon__nav--end{ grid-column: 3; justify-content: flex-end; }
.ribbon__nav a{
  position: relative;
  color: rgb(249 237 228 / .82);
  text-decoration: none;
  padding-block: .35rem;
  transition: color .22s var(--ease);
}
.ribbon__nav a::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--rose);
  transform: scaleX(0); transform-origin: left;
  transition: transform .32s var(--ease);
}
.ribbon__nav a:hover{ color: #fff; }
.ribbon__nav a:hover::after{ transform: scaleX(1); }
.ribbon__nav a:focus-visible{ outline-color: var(--rose-soft); }

.ribbon__burger{
  grid-column: 3; justify-self: end;
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
}
.ribbon__burger-bars{ display: grid; gap: 6px; width: 22px; }
.ribbon__burger-bars i{
  display: block; height: 1.5px; background: var(--peach);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
/* three bars fold into an X: outer two meet in the middle, the centre bar goes */
.ribbon__burger[aria-expanded="true"] i:nth-child(1){ transform: translateY(7.5px) rotate(45deg); }
.ribbon__burger[aria-expanded="true"] i:nth-child(2){ opacity: 0; transform: scaleX(.3); }
.ribbon__burger[aria-expanded="true"] i:nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); }
.ribbon__burger:focus-visible{ outline-color: var(--rose-soft); }

@media (max-width: 860px){
  .ribbon{ grid-template-columns: 44px auto 44px; padding-inline: 1rem; }
  .ribbon__nav{ display: none; }
  .ribbon__burger{ display: flex; }
  .ribbon__logo img{ width: 148px; }
  .ribbon-wrap.is-stuck .ribbon__logo img{ width: 124px; }
}

/* Menu pane: anchored under the ribbon, not a full-screen takeover.
   .ribbon-wrap is sticky, so it is the containing block. The right offset
   tracks the ribbon's own right edge at every width. */
.menu{
  position: absolute;
  z-index: 3;
  top: calc(100% + .45rem);
  right: max(var(--pad), calc((100% - var(--maxw)) / 2));
  width: min(16rem, calc(100vw - (var(--pad) * 2)));
  padding: .5rem;
  background: var(--ink);
  border-radius: var(--r);
  box-shadow: 0 22px 46px -22px rgb(36 23 19 / .6), 0 2px 8px rgb(36 23 19 / .22);
  transform-origin: top right;
  animation: menu-in .26s var(--ease);
}
@keyframes menu-in{
  from{ opacity: 0; transform: translateY(-8px) scale(.96); }
  to  { opacity: 1; transform: none; }
}
.menu__inner{ display: grid; }
.menu__inner a{
  display: flex; align-items: center;
  min-height: 48px;
  padding: 0 .85rem;
  border-radius: 4px;
  font-family: var(--font-text);
  font-size: 1rem; font-weight: 500;
  letter-spacing: -.005em;
  color: rgb(249 237 228 / .86);
  text-decoration: none;
  transition: background-color .2s var(--ease), color .2s var(--ease);
  animation: menu-item-in .34s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 40ms + 50ms);
}
@keyframes menu-item-in{
  from{ opacity: 0; transform: translateY(-6px); }
  to  { opacity: 1; transform: none; }
}
.menu__inner a:hover{ background: rgb(249 237 228 / .08); color: #fff; }
.menu__inner a:focus-visible{ outline-color: var(--rose-soft); outline-offset: -2px; }
.menu__inner a.menu__mail{
  margin-top: .35rem;
  padding-top: .35rem;
  border-top: 1px solid rgb(249 237 228 / .14);
  border-radius: 0 0 4px 4px;
  font-size: .875rem;
  color: rgb(249 237 228 / .58);
}
.menu__inner a.menu__mail:hover{ color: var(--rose); background: transparent; }

/* =============================================================
   HERO
   ============================================================= */
.hero{
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  padding-block: clamp(1.75rem, 5vw, 3rem) clamp(3.5rem, 8vw, 6rem);
}
.hero__copy{
  padding-inline: var(--pad);
  max-width: 40rem;
  margin-inline: auto;
  width: 100%;
}
.hero__title{
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 72, 'wght' 500;
  font-size: clamp(2.3rem, 8.4vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -.038em;
  color: var(--ink);
}
.hero__line{ display: block; }
.hero__line--accent{
  color: var(--rose);
  font-variation-settings: 'opsz' 72, 'wght' 700;
  padding-bottom: .06em;          /* descender clearance for the g */
}
.hero__stop{ color: var(--ink); }


.hero__media{ line-height: 0; }
.hero__media img{ width: 100%; }

@media (min-width: 1080px){
  .hero{
    /* Copy left, image right. The copy's left edge lines up with .container so
       it sits on the same axis as About / Portfolio / Contact below, and the
       image runs off the right edge of the page. */
    grid-template-columns: clamp(23rem, 24vw, 30rem) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(2rem, 4vw, 4.5rem);
    padding-left: max(var(--pad), calc((100% - var(--maxw)) / 2));
    padding-right: 0;
    padding-top: clamp(2rem, 4vw, 4rem);
    /* No min-height. The image sets the band height, so the hero can never
       carry dead space under it the way it did when the column also held a
       lede and two buttons. */
  }
  .hero__copy{
    grid-column: 1; grid-row: 1;
    padding-inline: 0; max-width: none; margin: 0;
    container-type: inline-size;      /* the headline sizes against this column */
  }
  /* Nothing that makes this a shrink-to-fit box: justify-self, margin-left:auto
     and max-width all stop the figure stretching, and the browser then sizes the
     image from the `sizes` hint or its natural width instead of the grid track.
     The image simply fills its track, which ends at the right edge of the page.
     The 65% ceiling is set by the copy track opposite, not by a cap here. */
  .hero__media{ grid-column: 2; grid-row: 1; }
  .hero__media img{
    /* Explicit height rather than aspect-ratio + max-height: that combination
       makes the browser shrink the WIDTH to preserve the ratio, which pinned
       the image at 960px on every screen wider than 1600. Height grows with
       the viewport and then caps, and object-fit crops the difference. */
    height: clamp(22rem, 41vw, 40rem);
    object-fit: cover;
    object-position: 62% center;   /* keeps the whole figure and chair in frame */
    border-radius: var(--r) 0 0 var(--r);
  }
  /* Sized to its own column rather than the viewport, so the headline always
     fills the space it actually has. The vw line is the fallback for browsers
     without container queries. */
  .hero__title{ font-size: clamp(3rem, 4.2vw, 5rem); }
  .hero__title{ font-size: clamp(2.5rem, 11.5cqw, 5rem); }
}

/* =============================================================
   BANDS
   ============================================================= */
.band{ padding-block: var(--section); }
.about{ background: var(--peach-2); }

.about__lead{
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 24, 'wght' 400;
  font-size: clamp(1.25rem, 2.9vw, 1.6rem);
  line-height: 1.42;
  letter-spacing: -.017em;
  color: var(--ink);
  max-width: 40rem;
}
.about__body{
  margin-top: 1.35rem;
  max-width: 40rem;
  font-size: clamp(1rem, 2.2vw, 1.0625rem);
  line-height: 1.72;
}

/* =============================================================
   PORTFOLIO
   ============================================================= */
.work{ padding-block: var(--section); }
.work__head{ margin-bottom: clamp(2.25rem, 5vw, 3.75rem); }
.work__word{
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 96, 'wght' 700;
  /* "Portfolio" at wght 700 measures ~6.22x its font-size, so 13.9vw keeps the
     word filling the measure at every width without ever spilling past it. */
  font-size: clamp(2.75rem, 13.9vw, 12.5rem);
  line-height: .86;
  letter-spacing: -.05em;
  color: var(--ink);
  margin-left: -.02em;
}
.work__intro{
  margin-top: clamp(1rem, 2vw, 1.5rem);
  max-width: 40ch;
  font-size: clamp(1rem, 2.2vw, 1.125rem);
}

.work__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.4vw, 3rem) clamp(1.25rem, 3vw, 2.5rem);
}
@media (max-width: 760px){
  .work__grid{ grid-template-columns: 1fr; gap: clamp(2rem, 7vw, 2.75rem); }
}

/* Desktop dials the word back to 70% of the fluid mobile size. Below 760px the
   grid is single column and the full-width word still reads well, so phones are
   left alone. Every value is the mobile one multiplied by 0.7. */
@media (min-width: 760px){
  .work__word{ font-size: clamp(1.925rem, 9.73vw, 8.75rem); }
}

.shot__btn{
  display: block; width: 100%; padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background-color: var(--peach-3);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  cursor: zoom-in;
  box-shadow: var(--shadow);
  transition: box-shadow .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.shot__btn img{
  width: 100%; aspect-ratio: 1; object-fit: cover;
  transition: transform .65s var(--ease);
}
.shot__btn:hover{ box-shadow: var(--shadow-lg); border-color: var(--line); transform: translateY(-3px); }
.shot__btn:hover img{ transform: scale(1.035); }
.shot__btn:active{ transform: translateY(-1px) scale(.995); }

.shot__cap{
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .35rem .75rem;
  margin-top: .9rem;
}
.shot__name{
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 20, 'wght' 600;
  font-size: 1.0625rem;
  letter-spacing: -.015em;
  color: var(--ink);
  position: relative;
}
.shot__name::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px;
  height: 1px; background: var(--rose);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.shot:hover .shot__name::after,
.shot__btn:focus-visible ~ .shot__cap .shot__name::after{ transform: scaleX(1); }
.shot__kind{ font-size: .875rem; color: var(--muted); }

/* =============================================================
   CONTACT
   ============================================================= */
.contact{ background: var(--peach-2); }
.contact__inner{
  display: grid;
  gap: clamp(2.25rem, 5vw, 4rem);
}
@media (min-width: 940px){
  .contact__inner{ grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: start; }
  .contact__aside{ position: sticky; top: calc(var(--ribbon-h) + 2.5rem); }
}
.contact__note{
  margin-top: 1.1rem;
  max-width: 34ch;
  font-size: 1.0625rem;
}
.contact__mail{
  display: inline-flex; align-items: center; min-height: 44px;   /* touch target */
  margin-top: 1rem;
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 20, 'wght' 500;
  font-size: 1.0625rem;
  letter-spacing: -.01em;
  color: var(--rose-ink);
  text-decoration: none;
  border-bottom: 1px solid rgb(196 18 63 / .35);
  padding-bottom: 2px;
  transition: border-color .25s var(--ease);
}
.contact__mail:hover{ border-color: var(--rose-ink); }

.contact__panel{
  background: var(--peach-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: clamp(1.25rem, 4vw, 2.25rem);
  box-shadow: var(--shadow);
}

.form{ display: grid; gap: 1.15rem; }
.form__row{ display: grid; gap: 1.15rem; }
@media (min-width: 560px){ .form__row{ grid-template-columns: 1fr 1fr; } }

.field{ display: grid; gap: .45rem; }
.field label{
  font-size: .875rem; font-weight: 600; letter-spacing: .005em;
  color: var(--ink);
}
.field__opt{ font-weight: 400; color: var(--muted); }
.field input,
.field textarea{
  width: 100%;
  font: inherit; font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .8rem .9rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea{ resize: vertical; min-height: 8rem; line-height: 1.6; }
.field input::placeholder,
.field textarea::placeholder{ color: #8a7166; }
.field input:hover, .field textarea:hover{ border-color: rgb(36 23 19 / .28); }
.field input:focus-visible,
.field textarea:focus-visible{
  outline: none;
  border-color: var(--rose-ink);
  box-shadow: 0 0 0 3px rgb(196 18 63 / .16);
}
.field__err{
  font-size: .8125rem; font-weight: 500; color: var(--rose-ink);
  min-height: 0; display: none;
}
.field.is-bad input, .field.is-bad textarea{ border-color: var(--rose-ink); }
.field.is-bad .field__err{ display: block; }

.hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status{ font-size: .875rem; color: var(--muted); min-height: 1.25rem; }
/* The failure message carries a mailto link. Vertical padding on an inline
   element grows the touch target without disturbing the line box. */
.form__status a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding-block: .5rem;
}
.form__status.is-bad{ color: var(--rose-ink); font-weight: 500; }

.form__done h3{
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 28, 'wght' 600;
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  line-height: 1.2; letter-spacing: -.02em; color: var(--ink);
}
.form__done p{ margin: .75rem 0 1.5rem; max-width: 42ch; }

/* =============================================================
   FOOTER
   ============================================================= */
.footer__art{
  line-height: 0;
  background-color: var(--peach-2);
  background-size: cover;
  background-position: center;
}
.footer__art img{ width: 100%; }

.footer__bar{ background: var(--ink); color: rgb(249 237 228 / .68); }
.footer__bar-inner{
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 1.1rem;
  padding-block: clamp(2rem, 5vw, 3rem);
  font-size: .875rem;
}
.footer__logo{ display: block; line-height: 0; }
.footer__logo img{ width: 132px; height: auto; }
.footer__logo:focus-visible{ outline-color: var(--rose-soft); }
.footer__legal{ color: rgb(249 237 228 / .58); }   /* 5.5:1 on ink */

/* =============================================================
   LIGHTBOX
   ============================================================= */
.lb{
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  padding: clamp(.75rem, 3vw, 2.5rem);
  animation: lb-in .28s var(--ease);
}
@keyframes lb-in{ from{ opacity: 0; } to{ opacity: 1; } }
.lb__backdrop{
  position: absolute; inset: 0;
  background: rgb(26 15 12 / .88);
  backdrop-filter: blur(6px);
  border: 0; padding: 0; cursor: zoom-out;
}
.lb__panel{
  position: relative;
  width: min(100%, 900px);
  max-height: 100%;
  display: grid; gap: .9rem;
  animation: lb-pop .38s var(--ease);
}
@keyframes lb-pop{ from{ transform: scale(.97); } to{ transform: none; } }
.lb__figure{ display: grid; gap: .85rem; min-height: 0; }
.lb__figure img{
  width: 100%; height: auto;
  max-height: min(72svh, 820px);
  object-fit: contain;
  border-radius: var(--r);
  background: var(--peach-3);
}
.lb__cap{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .75rem;
  color: rgb(249 237 228 / .7); font-size: .875rem;
}
.lb__title{
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 20, 'wght' 600;
  font-size: 1.0625rem; letter-spacing: -.015em; color: var(--peach);
}
.lb__controls{ display: flex; gap: .5rem; justify-content: center; }
.lb__nav, .lb__close{
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid rgb(249 237 228 / .22);
  border-radius: var(--r-pill);
  background: rgb(249 237 228 / .06);
  color: var(--peach);
  cursor: pointer;
  transition: background-color .22s var(--ease), border-color .22s var(--ease);
}
.lb__nav:hover, .lb__close:hover{ background: var(--rose-ink); border-color: var(--rose-ink); }
.lb__nav svg, .lb__close svg{ width: 20px; height: 20px; fill: currentColor; }
.lb__close{ position: absolute; top: -.25rem; right: 0; transform: translateY(-100%); }
@media (max-width: 640px){
  .lb__close{ position: static; transform: none; justify-self: end; }
  .lb__panel{ grid-template-areas: "close" "figure" "controls"; }
  .lb__close{ grid-area: close; }
  .lb__figure{ grid-area: figure; }
  .lb__controls{ grid-area: controls; }
}
.lb__nav:focus-visible, .lb__close:focus-visible{ outline-color: var(--rose-soft); }

body.is-locked{ overflow: hidden; }

/* =============================================================
   MOTION
   Reveals only run when JS is on, so no-JS users see everything.
   ============================================================= */
.js [data-reveal]{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-reveal].is-in{ opacity: 1; transform: none; }
/* failsafe from the head script: main.js never arrived */
.no-anim [data-reveal]{ opacity: 1 !important; transform: none !important; transition: none !important; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .js [data-reveal]{ opacity: 1; transform: none; transition: none; }
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* anchor offset under the sticky ribbon */
:target, [id]{ scroll-margin-top: calc(var(--ribbon-h) + 1.5rem); }

@media print{
  .ribbon-wrap, .menu, .lb, .contact__panel{ display: none !important; }
  body{ background: #fff; }
}