/* ==========================================================================
   gilselia.com
   Warm paper, deep ink, one clay accent. Her photographs are the design.
   ========================================================================== */

:root{
  --paper:      #FBF7F0;
  --paper-deep: #F2EADD;
  --paper-edge: #E7DCCA;
  --ink:        #23201C;
  --ink-soft:   #4F463C;
  --ink-faint:  #7A6F62;
  --rule:       #DDD1BE;
  --clay:       #9C5A3C;
  --clay-soft:  #B87A5A;

  --measure: 33rem;
  --page: 72rem;
  --pad: clamp(1.25rem, 5vw, 3rem);

  --serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:      #17150F;
    --paper-deep: #1F1C15;
    --paper-edge: #2C2820;
    --ink:        #EFE7D9;
    --ink-soft:   #CFC5B2;
    --ink-faint:  #A2978A;
    --rule:       #38332A;
    --clay:       #D69267;
    --clay-soft:  #C07E56;
  }
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-weight:420;
  font-size:clamp(1.0625rem, .95rem + .45vw, 1.1875rem);
  line-height:1.7;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }

/* Paper grain. Very faint. Carries the whole "printed" feeling. */
.grain{
  position:fixed; inset:0; z-index:9; pointer-events:none;
  opacity:.02; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark){ .grain{ mix-blend-mode:screen; opacity:.025; } }

/* --------------------------------- reveal -------------------------------- */
.reveal{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ------------------------------- nameplate ------------------------------- */
.plate{
  padding:clamp(4.5rem, 16vh, 9rem) var(--pad) clamp(2.5rem, 7vh, 4rem);
  text-align:center;
}
.plate__inner{ max-width:var(--page); margin-inline:auto; }

.eyebrow{
  margin:0 0 clamp(1.5rem,4vh,2.5rem);
  font-size:.72rem; font-weight:400; font-style:italic;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint);
}

.plate__name{
  margin:0;
  font-weight:400;
  font-size:clamp(2.85rem, 11vw, 6.5rem);
  line-height:.98;
  letter-spacing:-.022em;
}
.plate__surname{ display:block; font-style:italic; font-weight:350; letter-spacing:-.01em; }

.rule{
  display:flex; align-items:center; justify-content:center; gap:1.1rem;
  max-width:22rem; margin:clamp(1.75rem,5vh,2.75rem) auto clamp(1.25rem,3vh,1.75rem);
}
.rule__line{ flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--rule) 22%,var(--rule) 78%,transparent); }

.cross{ width:.75rem; height:1rem; flex:none; overflow:visible; }
.cross path{ stroke:var(--clay); stroke-width:1.6; stroke-linecap:round; fill:none; }

.plate__dates{
  margin:0; font-size:1rem; letter-spacing:.05em; color:var(--ink-soft);
  font-variant-numeric:oldstyle-nums;
}
.plate__nick{
  margin:.85rem 0 0; font-size:.95rem; font-style:italic; color:var(--ink-faint);
}
.plate__nick em{ color:var(--ink-soft); font-style:italic; }

/* ------------------------------ plate nav --------------------------------- */
.plate__nav{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem .5rem;
  margin-top:clamp(1.75rem,4vh,2.5rem);
}
.plate__nav a{
  padding:.5rem 1rem; border:1px solid var(--rule); border-radius:999px;
  color:var(--ink-soft); text-decoration:none; font-size:.85rem; letter-spacing:.04em;
  transition:border-color .3s var(--ease), color .3s var(--ease), background-color .3s var(--ease);
}
.plate__nav a:hover,.plate__nav a:focus-visible{ color:var(--clay); border-color:var(--clay-soft); background:var(--paper-deep); outline:none; }

/* -------------------------------- portrait -------------------------------- */
.portrait{
  margin:0 auto clamp(3.5rem,9vh,6rem); padding:0 var(--pad);
  max-width:26rem;
}
.portrait img{ width:100%; height:auto; }
.portrait .slot{ aspect-ratio:4/5; }

/* ---------------------------------- hero --------------------------------- */
.hero{
  margin:0 auto clamp(3.5rem,9vh,6rem);
  max-width:44rem; padding:0 var(--pad);
}
.hero img{ width:100%; height:auto; }

.hero .slot{ aspect-ratio:4/3; }
@media (min-width:48rem){ .hero .slot{ aspect-ratio:16/9; } }

/* Empty photo slot: an outlined shape so size and placement are visible. */
.slot{
  position:relative; display:flex; align-items:center; justify-content:center;
  background:var(--paper-deep);
  border:1px dashed var(--ink-faint);
  color:var(--ink-faint);
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; font-style:italic;
  overflow:hidden;
}
.slot__x{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; }
.slot__x path{ stroke:var(--rule); stroke-width:1; fill:none; }
.slot__label{
  position:relative; padding:.35rem .7rem;
  background:var(--paper-deep); border:1px solid var(--rule); border-radius:999px;
  white-space:nowrap;
}

/* --------------------------------- intro --------------------------------- */
.intro{
  max-width:var(--measure); margin-inline:auto;
  padding:0 var(--pad) clamp(4rem,11vh,7rem);
}
.intro p{ margin:0 0 1.35em; }
.intro p:last-child{ margin-bottom:0; }

.lede{
  font-size:clamp(1.4rem,1.15rem + 1.15vw,1.9rem);
  line-height:1.4; font-weight:400; font-style:italic;
  letter-spacing:-.012em; color:var(--ink);
  margin-bottom:1.5rem !important;
}

/* ------------------------------ section title ---------------------------- */
.section-title{
  margin:0 0 clamp(1.75rem,4.5vh,2.75rem);
  font-size:.72rem; font-weight:400; font-style:italic;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint);
  text-align:center;
}

/* -------------------------------- gallery -------------------------------- */
.gallery-wrap{
  max-width:var(--page); margin-inline:auto;
  padding:0 var(--pad) clamp(4rem,11vh,7rem);
}
.gallery{ display:grid; grid-template-columns:1fr; gap:clamp(1rem,2.5vw,1.75rem); }

@media (min-width:40rem){
  .gallery{ grid-template-columns:repeat(6,1fr); }
  /* An editorial rhythm rather than a uniform grid: 3-up, 2-up, wide, repeat. */
  .shot{ grid-column:span 2; }
  .shot:nth-child(6n+4),
  .shot:nth-child(6n+5){ grid-column:span 3; }
  .shot:nth-child(6n+4) .shot__frame,
  .shot:nth-child(6n+5) .shot__frame{ aspect-ratio:4/3; }
  .shot:nth-child(6n+6){ grid-column:span 6; }
  .shot:nth-child(6n+6) .shot__frame{ aspect-ratio:16/9; }
}

.shot{ margin:0; }
.shot__frame{
  position:relative; overflow:hidden; aspect-ratio:4/5;
  background:var(--paper-deep);
  border:0; padding:0; width:100%; display:block;
  cursor:zoom-in; color:inherit; font:inherit;
}
.shot__frame .slot{ position:absolute; inset:0; }
.shot__frame img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease), filter .5s var(--ease);
  filter:saturate(.94);
}
.shot__frame:hover img,
.shot__frame:focus-visible img{ transform:scale(1.028); filter:saturate(1); }
.shot__frame:focus-visible{ outline:2px solid var(--clay); outline-offset:3px; }
.shot--empty .shot__frame{ cursor:default; }

.shot__cap{
  margin:.7rem 0 0; font-size:.85rem; font-style:italic;
  color:var(--ink-faint); line-height:1.5;
}

/* ------------------------------- carousel -------------------------------- */
.carousel-hint{
  margin:-1rem auto clamp(1.25rem,3vh,2rem); max-width:34rem; text-align:center;
  font-size:.85rem; font-style:italic; color:var(--ink-faint); padding:0 var(--pad);
}
.carousel{ position:relative; }
.car__track{
  display:flex; gap:clamp(.6rem,1.5vw,1rem);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  padding:0 var(--pad) 1rem;
  scrollbar-width:thin; scrollbar-color:var(--rule) transparent;
}
.car__cell{
  flex:0 0 auto; height:clamp(200px,38vh,320px);
  border:0; padding:0; background:var(--paper-deep); cursor:zoom-in;
  scroll-snap-align:center;
}
.car__cell img{ height:100%; width:auto; display:block; filter:saturate(.94); transition:filter .4s var(--ease); }
.car__cell:hover img,.car__cell:focus-visible img{ filter:saturate(1); }
.car__cell:focus-visible{ outline:2px solid var(--clay); outline-offset:3px; }
.car__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:2.5rem; height:2.5rem; border-radius:999px;
  background:color-mix(in srgb, var(--paper) 85%, transparent);
  border:1px solid var(--rule); color:var(--ink-soft);
  font-family:var(--serif); font-size:1.5rem; line-height:1; cursor:pointer;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.car__nav:hover,.car__nav:focus-visible{ color:var(--clay); border-color:var(--clay-soft); outline:none; }
.car__nav--prev{ left:.4rem; }
.car__nav--next{ right:.4rem; }

/* -------------------------------- curation --------------------------------- */
.curate-bar{
  margin:-.75rem auto 1rem; text-align:center; font-size:.8rem; font-style:italic;
  color:var(--ink-faint); padding:0 var(--pad);
}
.curate-export{
  border:1px solid var(--rule); background:none; border-radius:999px;
  padding:.2rem .7rem; font-family:var(--serif); font-size:.78rem; cursor:pointer;
  color:var(--ink-soft);
}
.curate-export:hover{ color:var(--clay); border-color:var(--clay-soft); }
.car__cell{ position:relative; }
.car__badge{
  position:absolute; top:.35rem; right:.35rem; z-index:1;
  min-width:1.4rem; height:1.4rem; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; pointer-events:none;
}
.car__badge[data-verdict="keep"]{ background:#2e6b2e; color:#fff; }
.car__badge[data-verdict="edit"]{ background:#8a6d1a; color:#fff; }
.car__badge[data-verdict="remove"]{ background:#8a2727; color:#fff; }
.lb__ask{
  margin:0; font-size:.85rem; font-style:italic; color:#C9BFAE;
  text-align:center; max-width:30rem; line-height:1.5;
}
.lb__curate{ display:flex; gap:.6rem; }
.cur-btn{
  width:2.4rem; height:2.4rem; border-radius:999px; cursor:pointer;
  background:none; border:1px solid #5c5546; color:#C9BFAE; font-size:1.05rem;
  transition:all .2s var(--ease);
}
.cur-btn--keep.is-on{ background:#2e6b2e; border-color:#2e6b2e; color:#fff; }
.cur-btn--edit.is-on{ background:#8a6d1a; border-color:#8a6d1a; color:#fff; }
.cur-btn--remove.is-on{ background:#8a2727; border-color:#8a2727; color:#fff; }
.cur-btn:hover{ border-color:#C9BFAE; color:#fff; }

/* --------------------------------- video ---------------------------------- */
.video-wrap{ max-width:46rem; margin-inline:auto; padding:0 var(--pad) clamp(4rem,11vh,7rem); }
.tribute-video{ width:100%; height:auto; display:block; background:#000; max-height:80vh; }
.video-cap{ margin:.7rem 0 2.25rem; font-size:.85rem; font-style:italic; color:var(--ink-faint); text-align:center; }

/* -------------------------------- stories --------------------------------- */
.stories{
  max-width:38rem; margin-inline:auto;
  padding:0 var(--pad) clamp(4rem,11vh,7rem);
}
.story-list{ list-style:none; margin:0; padding:0; display:grid; gap:1.5rem; }

/* ------------------------------- clipping -------------------------------- */
.clipping-wrap{
  max-width:46rem; margin-inline:auto;
  padding:0 var(--pad) clamp(4rem,11vh,7rem);
}
.clipping{
  margin:0; padding:clamp(.75rem,2vw,1.15rem);
  background:var(--paper-deep);
  border:1px solid var(--paper-edge);
  transform:rotate(-.55deg);
  box-shadow:0 1px 2px rgba(35,32,28,.05), 0 12px 30px -18px rgba(35,32,28,.35);
}
.clipping .slot{ aspect-ratio:3/4; }
.clipping figcaption{
  margin:.85rem .15rem 0; font-size:.85rem; font-style:italic;
  color:var(--ink-faint); text-align:center;
}

/* ------------------------------- memories -------------------------------- */
.memories{
  background:var(--paper-deep);
  border-top:1px solid var(--paper-edge);
  border-bottom:1px solid var(--paper-edge);
  padding:clamp(3.5rem,10vh,6rem) var(--pad);
}
.memories__inner{ max-width:38rem; margin-inline:auto; }
.memories__blurb{
  margin:0 0 clamp(1.75rem,4vh,2.5rem);
  text-align:center; color:var(--ink-soft); font-size:1.02rem;
}

/* contact links */
.contact{
  list-style:none; margin:0 0 clamp(2.25rem,5vh,3rem); padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem .5rem;
}
.contact a{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem 1rem;
  border:1px solid var(--rule); border-radius:999px;
  color:var(--ink-soft); text-decoration:none;
  font-size:.85rem; letter-spacing:.04em;
  transition:border-color .3s var(--ease), color .3s var(--ease), background-color .3s var(--ease);
}
.contact a:hover,.contact a:focus-visible{
  color:var(--clay); border-color:var(--clay-soft); background:var(--paper);
}
.contact svg{ width:.95rem; height:.95rem; fill:currentColor; flex:none; }

/* form */
.shout{ display:grid; gap:1rem; }
.field{ display:block; }
.field__label{
  display:block; margin-bottom:.4rem;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; font-style:italic;
  color:var(--ink-faint);
}
.field__input{
  width:100%; padding:.7rem .85rem;
  background:var(--paper);
  border:1px solid var(--rule); border-radius:2px;
  color:var(--ink); font-family:var(--serif); font-size:1rem; line-height:1.6;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field__input:focus{
  outline:none; border-color:var(--clay-soft);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--clay) 14%, transparent);
}
.field__input--area{ resize:vertical; min-height:7rem; }

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

.shout__foot{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.btn{
  padding:.65rem 1.5rem;
  background:var(--ink); color:var(--paper);
  border:1px solid var(--ink); border-radius:999px;
  font-family:var(--serif); font-size:.9rem; letter-spacing:.05em;
  cursor:pointer;
  transition:background-color .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease);
}
.btn:hover:not(:disabled),.btn:focus-visible:not(:disabled){ background:var(--clay); border-color:var(--clay); color:#FBF7F0; }
.btn:disabled{ opacity:.5; cursor:default; }
.btn--ghost{ background:none; color:var(--ink-soft); border-color:var(--rule); }
.btn--ghost:hover,.btn--ghost:focus-visible{ background:var(--paper); color:var(--clay); border-color:var(--clay-soft); }
.share .shout{ margin-top:clamp(1.5rem,4vh,2.25rem); }

.shout__status{ margin:0; font-size:.85rem; font-style:italic; color:var(--ink-soft); }
.shout__status[data-tone="bad"]{ color:var(--clay); }

.shout__preview-note{
  margin:1rem 0 0; font-size:.78rem; font-style:italic;
  color:var(--ink-faint); text-align:center;
}

/* the wall */
.wall{ list-style:none; margin:clamp(2.5rem,6vh,3.5rem) 0 0; padding:0; display:grid; gap:1.5rem; }
.note{
  padding:1.25rem 1.35rem;
  background:var(--paper);
  border:1px solid var(--paper-edge);
  border-left:2px solid var(--clay-soft);
}
.note__body{ margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.note__meta{
  margin:.75rem 0 0; font-size:.78rem; font-style:italic; color:var(--ink-faint);
  letter-spacing:.03em;
}
.note__meta b{ font-weight:500; font-style:normal; color:var(--ink-soft); }

.wall__empty{
  margin:clamp(2.5rem,6vh,3.5rem) 0 0; text-align:center;
  font-size:.9rem; font-style:italic; color:var(--ink-faint);
}

.share{
  padding:clamp(3.5rem,10vh,6rem) var(--pad);
}
.clipping-lede{
  max-width:var(--measure); margin:-.75rem auto clamp(1.75rem,4vh,2.5rem);
  text-align:center; color:var(--ink-soft);
}

/* -------------------------------- sidenav -------------------------------- */
.topbar{ position:fixed; top:1rem; left:1rem; z-index:70; display:flex; align-items:center; gap:.5rem; }
.lang{
  display:flex; border-radius:999px; padding:.2rem;
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:blur(6px); border:1px solid var(--rule);
}
.lang__btn{
  border:0; background:none; cursor:pointer; border-radius:999px;
  padding:.35rem .7rem; font-family:var(--serif); font-size:.78rem; letter-spacing:.08em;
  color:var(--ink-faint); transition:color .25s var(--ease), background-color .25s var(--ease);
}
.lang__btn:hover,.lang__btn:focus-visible{ color:var(--ink); outline:none; }
.lang__btn.is-on{ background:var(--ink); color:var(--paper); }
.nav-toggle{
  position:relative; z-index:70;
  width:2.75rem; height:2.75rem; border-radius:999px;
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:blur(6px);
  border:1px solid var(--rule); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem;
  transition:background-color .3s var(--ease), border-color .3s var(--ease);
}
.nav-toggle:hover,.nav-toggle:focus-visible{ border-color:var(--clay-soft); outline:none; }
.nav-toggle__bar{ display:block; width:1.05rem; height:1px; background:var(--ink); transition:transform .35s var(--ease), opacity .35s var(--ease); }
.nav-toggle.is-open .nav-toggle__bar:first-child{ transform:translateY(.2rem) rotate(45deg); }
.nav-toggle.is-open .nav-toggle__bar:last-child{ transform:translateY(-.2rem) rotate(-45deg); }

.scrim{
  position:fixed; inset:0; z-index:60;
  background:color-mix(in srgb, #14120E 35%, transparent);
  animation:fade .3s var(--ease);
}

.sidenav{
  position:fixed; top:0; left:0; bottom:0; z-index:65;
  width:min(18rem, 84vw);
  padding:5rem 2rem 2rem;
  background:var(--paper);
  border-right:1px solid var(--paper-edge);
  box-shadow:20px 0 60px -30px rgba(20,18,14,.35);
  transform:translateX(-102%);
  transition:transform .45s var(--ease);
  display:flex; flex-direction:column;
}
.sidenav.is-open{ transform:none; }
@media (prefers-reduced-motion:reduce){ .sidenav{ transition:none; } }

.sidenav__close{
  position:absolute; top:.85rem; right:.9rem;
  background:none; border:0; cursor:pointer;
  color:var(--ink-faint); font-family:var(--serif); font-size:1.85rem; line-height:1;
  padding:.25rem .5rem;
}
.sidenav__close:hover,.sidenav__close:focus-visible{ color:var(--clay); outline:none; }

.sidenav__name{ margin:0 0 2rem; font-size:1.35rem; line-height:1.15; font-weight:400; }
.sidenav__name span{ font-style:italic; font-weight:350; color:var(--ink-soft); }

.sidenav__list{ list-style:none; margin:0; padding:0; display:grid; gap:.15rem; }
.sidenav__list a{
  display:block; padding:.55rem 0 .55rem .9rem;
  color:var(--ink-soft); text-decoration:none; font-size:1.02rem;
  border-left:1px solid var(--rule);
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.sidenav__list a:hover,.sidenav__list a:focus-visible{ color:var(--ink); border-color:var(--clay-soft); outline:none; }
.sidenav__list a.is-current{ color:var(--clay); border-color:var(--clay); font-style:italic; }

.sidenav__foot{ margin:auto 0 0; font-size:.75rem; letter-spacing:.18em; color:var(--ink-faint); }

/* --------------------------------- footer -------------------------------- */
.foot{
  padding:clamp(3.5rem,9vh,5.5rem) var(--pad) clamp(3rem,8vh,4.5rem);
  text-align:center;
}
.cross--foot{ width:.85rem; height:1.15rem; margin-bottom:1.25rem; }
.cross--foot path{ stroke:var(--ink-faint); stroke-width:1.4; }
.foot__name{ margin:0; font-size:1.05rem; font-style:italic; font-weight:300; color:var(--ink-soft); }
.foot__dates{ margin:.3rem 0 0; font-size:.78rem; letter-spacing:.18em; color:var(--ink-faint); }

/* -------------------------------- lightbox ------------------------------- */
.lb{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem,4vw,3rem);
  background:color-mix(in srgb, #14120E 93%, transparent);
  backdrop-filter:blur(3px);
  animation:fade .35s var(--ease);
}
.lb[hidden]{ display:none; }
[hidden]{ display:none !important; }
@keyframes fade{ from{ opacity:0 } }
@media (prefers-reduced-motion:reduce){ .lb{ animation:none } }

.lb__figure{ margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column; align-items:center; gap:.9rem; }
.lb__img{ max-width:100%; max-height:78vh; width:auto; object-fit:contain; box-shadow:0 30px 80px -30px rgba(0,0,0,.8); }
.lb__cap{ font-size:.85rem; font-style:italic; color:#C9BFAE; text-align:center; max-width:34rem; }
.lb__comment{
  background:none; border:1px solid #5c5546; color:#C9BFAE; border-radius:999px;
  padding:.45rem 1.1rem; font-family:var(--serif); font-size:.85rem; cursor:pointer;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.lb__comment:hover,.lb__comment:focus-visible{ color:#fff; border-color:#C9BFAE; outline:none; }

.lb__close,.lb__nav{
  position:absolute; z-index:2;
  background:none; border:0; cursor:pointer;
  color:#C9BFAE; font-family:var(--serif); line-height:1;
  transition:color .25s var(--ease);
  padding:.5rem .75rem;
}
.lb__close:hover,.lb__nav:hover,
.lb__close:focus-visible,.lb__nav:focus-visible{ color:#fff; }
.lb__close{ top:.75rem; right:.9rem; font-size:2.25rem; }
.lb__nav{ top:50%; transform:translateY(-50%); font-size:3rem; }
.lb__nav--prev{ left:.25rem; }
.lb__nav--next{ right:.25rem; }