/* ---------------------------------------------------------------- tokens */
:root{
  --ink:#0d0b0a;
  --paper:#f2ece3;
  --muted:rgb(242 236 227 / .62);
  --accent:#E0A253;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: ui-sans-serif, -apple-system, "Helvetica Neue", Arial, sans-serif;

}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
img,video{ display:block; max-width:100%; }

.visually-hidden{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

/* ---------------------------------------------------------------- loader */
.loader{
  position:fixed; inset:0; z-index:50;
  display:grid; place-items:center;
  background:var(--ink);
  transition:opacity .55s ease, visibility .55s;
  isolation:isolate;
}
/* A 492-byte blurred thumbnail of the intro's opening frame, inlined so it is on
   screen at first paint and costs no request. Blowing up 40x23 px is what makes
   it a wash of firelight and window light rather than a picture. */
.loader::before{
  content:'';
  position:absolute; inset:0; z-index:-1;
  background:url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gAQTGF2YzYxLjE5LjEwMAD/2wBDABMNDhEODBMRDxEVFBMXHTAfHRoaHToqLCMwRT1JR0Q9Q0FMVm1dTFFoUkFDX4JgaHF1e3x7SlyGkIV3j214e3b/2wBDARQVFR0ZHTgfHzh2T0NPdnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnb/wAARCAAXACgDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAIDBAb/xAAmEAABBAIBAwMFAAAAAAAAAAABAAIDERIhBAUTQTFCYXGRodHh/8QAFwEBAQEBAAAAAAAAAAAAAAAAAQADAv/EABcRAQEBAQAAAAAAAAAAAAAAAAABEUH/2gAMAwEAAhEDEQA/AF6PJ3ekcfMjCPRsa07+rnepQiHqE0YoDKtfVU4U8545hE2MIOx+k08cUjrkyEtbOVg/KzkytOIswbFuUgnxVrOZXR00AUAPCph2iMfB9Ukkj+4Xg4mq0nAYW9j3ke0UhPFvjj5cB9kK1YTjhpaS69OFAFa3Q5v7Ykc13ta4X+UIRTGcntPDXxtcWndk7+FKeVj5CWR4NoatCF1BVY5LYBWvUIQhCf/Z") center/cover no-repeat;
  filter:blur(28px) saturate(1.15) brightness(.62);
  transform:scale(1.12);   /* hides the soft edge the blur leaves at the border */
}
/* Keeps the wordmark legible over the bright window light in the upper left. */
.loader::after{
  content:'';
  position:absolute; inset:0; z-index:-1;
  background:radial-gradient(ellipse at center,
    rgb(13 11 10 / .55) 0%, rgb(13 11 10 / .82) 70%, rgb(13 11 10 / .92) 100%);
}
.loader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.loader__inner{ text-align:center; padding:1.5rem; }
.loader__mark{
  margin:0 0 1.5rem;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.7rem, 4.5vw, 2.7rem);
  letter-spacing:.03em;
  color:var(--paper);
}
.loader__track{
  width:min(240px, 55vw); height:2px;
  margin-inline:auto;
  background:rgb(242 236 227 / .16);
  border-radius:2px; overflow:hidden;
}
.loader__bar{
  display:block; height:100%; width:0%;
  background:var(--paper);
  transition:width .35s ease;
}
.loader__pct{
  margin:.95rem 0 0;
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

/* ------------------------------------------------------------------ hero */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:var(--ink);
}

.hero__stage{
  position:relative;
  /* Full-bleed, matching the section backgrounds. The hotspot SVG uses 'slice',
     which crops exactly the way object-fit:cover does, so the shapes and labels
     stay welded to their props — but at extreme window shapes the outermost
     props do crop out of view. Narrow screens fall back to contain below. */
  width:100%;
  height:100svh;
  overflow:hidden;
  /* Dissolve the bottom edge into the page rather than ending on a hard line.
     Starts at 96% deliberately: the lowest label sits at ~94%, and fading any
     earlier would take "Community Building" with it. */
  mask-image:linear-gradient(to bottom, #000 0%, #000 96%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 96%, transparent 100%);
}

.hero__video,
.hero__still,
.hero__hotspots{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.hero__video{ object-fit:cover; }

/* No transition on purpose. The still is the video's own last frame, so a
   straight swap is invisible — whereas cross-fading it dips through the ink
   background underneath and reads as a blink at the end of the intro. */
.hero__still{
  object-fit:cover;
  opacity:0;
}

/* Once the still is up, drop the video so its decoder is released —
   there are four more videos below this. */
.is-settled .hero__still{ opacity:1; }
.is-settled .hero__video{ opacity:0; visibility:hidden; }

/* --------------------------------------------------------------- hotspots */
.hero__hotspots{
  opacity:0;
  pointer-events:none;
  transition:opacity .6s ease .1s;
}
.is-settled .hero__hotspots{ opacity:1; pointer-events:auto; }

.hs a{ cursor:pointer; }

/* The prop regions stay invisible at all times — the title is the only
   affordance. Must be 'transparent' rather than 'none': a fill of 'none'
   would stop the shape from hit-testing at all. */
.hs__shape{ fill:transparent; }

.hs__label{
  fill:var(--paper);
  font-family:var(--serif);
  font-size:26px;
  letter-spacing:.04em;
  text-anchor:middle;
  paint-order:stroke;
  stroke:rgb(0 0 0 / .75);
  stroke-width:5px;
  stroke-linejoin:round;
  /* Reveal and hover are kept on separate properties on purpose: the staggered
     reveal owns 'opacity', hover owns 'fill-opacity'. Sharing one property would
     put the two in a cascade fight and leak the stagger's delay into hover. */
  opacity:0;
  fill-opacity:.78;
  transition:fill .25s ease, fill-opacity .25s ease, filter .25s ease;
}

/* staggered reveal, in nav order */
.is-settled .hs__label{ animation:labelIn .55s ease forwards; }
.is-settled .hs:nth-child(1) .hs__label{ animation-delay:.15s; }
.is-settled .hs:nth-child(2) .hs__label{ animation-delay:.30s; }
.is-settled .hs:nth-child(3) .hs__label{ animation-delay:.45s; }
.is-settled .hs:nth-child(4) .hs__label{ animation-delay:.60s; }
@keyframes labelIn{ from{ opacity:0 } to{ opacity:1 } }

/* The title is the only hover affordance now that the props stay unlit. */
.hs a:hover .hs__label,
.hs a:focus-visible .hs__label{
  fill:var(--accent);
  fill-opacity:1;
  filter:drop-shadow(0 0 9px color-mix(in srgb, var(--accent) 55%, transparent));
}
.hs a:focus{ outline:none; }


/* Pinned to the viewport corner rather than placed in the hotspot SVG, so it
   sits in the actual corner at every window shape instead of drifting with the
   crop. Sized two steps below the section labels, which render ~39px at 1920. */
.hero__contact{
  position:absolute;
  right:clamp(1rem, 2.4vw, 2.75rem);
  bottom:clamp(1rem, 2.4vh, 2.5rem);
  z-index:3;
  font-family:var(--serif);
  font-size:clamp(.95rem, 1.4vw, 1.7rem);
  letter-spacing:.04em;
  color:var(--paper);
  text-decoration:none;
  opacity:0;
  /* stands in for the SVG labels' paint-order stroke halo */
  text-shadow:0 0 6px rgb(0 0 0 / .75), 0 1px 3px rgb(0 0 0 / .9);
  transition:opacity .5s ease .78s, color .25s ease, text-shadow .25s ease;
}
.hero__stage.is-settled ~ .hero__contact{ opacity:.78; }
.hero__contact:hover,
.hero__contact:focus-visible{
  opacity:1;
  color:#5AC8E0;
  text-shadow:0 0 10px rgb(90 200 224 / .55), 0 1px 3px rgb(0 0 0 / .9);
}

/* Text nav: visually hidden on desktop until focused, always shown on mobile. */
.hero__nav{
  position:absolute; left:1.25rem; bottom:1.25rem;
  display:flex; flex-wrap:wrap; gap:.25rem .5rem;
  z-index:3;
}
.hero__nav a{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
.hero__nav a:focus-visible{
  position:static; width:auto; height:auto; clip-path:none;
  color:var(--paper); background:rgb(0 0 0 / .6);
  padding:.4rem .8rem; border-radius:99px; font-size:.8rem;
}

/* --------------------------------------------------------------- sections */
.sec{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  overflow:hidden;
  scroll-margin-top:0;
}
.sec__bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
}

/* The still that takes over when the video ends. Same box, same fit, sitting on
   the same layer but painted after — so revealing it is a straight swap with no
   transition and nothing showing through in between. */
.sec__still{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
  opacity:0;
}
.sec.is-done .sec__still{ opacity:1; }
.sec.is-done .sec__bg{ visibility:hidden; }

/* Blurred, feathered edges so sections melt into one another (and into the hero)
   instead of butting up against a hard seam. */
.sec::before,
.sec::after{
  content:'';
  position:absolute; left:0; right:0;
  height:clamp(70px, 13vh, 165px);
  z-index:2;
  pointer-events:none;
  backdrop-filter:blur(26px);
  -webkit-backdrop-filter:blur(26px);
}
.sec::before{
  top:0;
  background:linear-gradient(to bottom, var(--ink) 0%, rgb(13 11 10 / 0) 100%);
  mask-image:linear-gradient(to bottom, #000 0%, #000 22%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 22%, transparent 100%);
}
.sec::after{
  bottom:0;
  background:linear-gradient(to top, var(--ink) 0%, rgb(13 11 10 / 0) 100%);
  mask-image:linear-gradient(to top, #000 0%, #000 22%, transparent 100%);
  -webkit-mask-image:linear-gradient(to top, #000 0%, #000 22%, transparent 100%);
}
.sec__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to right, rgb(13 11 10 / .88) 0%, rgb(13 11 10 / .55) 45%, rgb(13 11 10 / .25) 100%),
    /* lighter than it looks: the feathered edges below darken top and bottom too,
       and doubling both up crushes the middle of the frame */
    linear-gradient(to bottom, rgb(13 11 10 / .25), transparent 30%, rgb(13 11 10 / .3));
}

.sec__inner{
  position:relative; z-index:3;
  width:min(1200px, 92vw);
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:center;
  /* Height-aware so a whole section still fits when the window is short. */
  padding-block:clamp(2.5rem, 7svh, 6rem);
}

/* Even-numbered sections mirror: card on the left, copy on the right. Driven by
   position rather than a class, so any section added later keeps alternating. */
.sec:nth-of-type(even) .sec__inner{
  grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
}
.sec:nth-of-type(even) .sec__card,
.sec:nth-of-type(even) .sec__links{ order:1; }
.sec:nth-of-type(even) .sec__copy{ order:2; }

/* The scrim has to mirror too, or the copy lands on the brightest part of the
   frame and stops being readable. */
.sec:nth-of-type(even) .sec__scrim{
  background:
    linear-gradient(to left, rgb(13 11 10 / .88) 0%, rgb(13 11 10 / .55) 45%, rgb(13 11 10 / .25) 100%),
    linear-gradient(to bottom, rgb(13 11 10 / .25), transparent 30%, rgb(13 11 10 / .3));
}

.sec__eyebrow{
  margin:0 0 1rem;
  font-size:.78rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  /* Per-section override: an accent that reads well as a large fill on a card
     is not necessarily legible as 12px type over that section's own backdrop. */
  color:var(--eyebrow, var(--accent));
}
.sec h2{
  margin:0 0 1.1rem;
  font-family:var(--serif);
  font-weight:400;
  /* min() of a width- and a height-derived size, so type gives way on a short
     window as readily as on a narrow one. */
  font-size:clamp(2rem, min(6vw, 8.5svh), 4.5rem);
  line-height:1.02;
  letter-spacing:-.01em;
}
.sec__body{
  margin:0;
  max-width:38ch;
  font-size:clamp(.95rem, min(1.5vw, 2.3svh), 1.15rem);
  line-height:1.6;
  color:var(--muted);
}

/* foreground media card */
.sec__card{
  position:relative;
  display:block;
  /* The card is 16:9, so bounding its width bounds its height — this is what
     stops the copy-plus-card stack from outgrowing a short viewport. */
  max-width:min(100%, calc(56svh * 16 / 9));
  text-decoration:none;
  color:var(--paper);
  border-radius:6px;
  overflow:hidden;
  /* Layered rather than one big blur: the tight shadows anchor the card's edge,
     the wide ones lift it off the video behind it. */
  box-shadow:
    0 2px 8px rgb(0 0 0 / .55),
    0 14px 30px rgb(0 0 0 / .6),
    0 40px 80px rgb(0 0 0 / .7),
    0 80px 150px rgb(0 0 0 / .55);
  outline:1px solid rgb(242 236 227 / .12);
  transition:transform .45s cubic-bezier(.2,.7,.3,1), outline-color .3s;
}
.sec__card:hover,
.sec__card:focus-visible{ transform:translateY(-6px); outline-color:var(--accent); }
.sec__card img,
.sec__card video{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }

/* play badge on the video facade */
.sec__play{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  display:grid; place-items:center;
  width:66px; height:66px; border-radius:50%;
  background:rgb(13 11 10 / .5);
  border:1.5px solid rgb(242 236 227 / .5);
  backdrop-filter:blur(4px);
  transition:background .3s ease, border-color .3s ease, scale .3s ease;
}
.sec__play::after{
  content:''; margin-left:5px;
  border-left:17px solid var(--paper);
  border-top:11px solid transparent;
  border-bottom:11px solid transparent;
}
.sec__card:hover .sec__play,
.sec__card:focus-visible .sec__play{
  background:color-mix(in srgb, var(--accent) 70%, transparent);
  border-color:var(--accent);
  scale:1.08;
}

/* the swapped-in player inherits the card's frame */
iframe.sec__card{ width:100%; aspect-ratio:16/9; border:0; }
iframe.sec__card:hover{ transform:none; }

/* ---------------------------------------------------------- brand links */
/* Icons alone — no box, no labels. The alt text carries the destination. */
.sec__links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(1.25rem, 2.6vw, 2.5rem);
}
.brandlink{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.85rem;
  width:clamp(150px, 17vw, 260px);
  text-decoration:none;
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.brandlink__pad{
  display:block;
  width:100%;
  /* Both are needed here: as a column flex item the image otherwise takes its
     intrinsic height and ignores aspect-ratio, rendering 260x540 instead of
     260x146. */
  height:auto;
  flex:0 0 auto;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:12px;
  box-shadow:
    0 2px 8px rgb(0 0 0 / .5),
    0 14px 30px rgb(0 0 0 / .55),
    0 40px 80px rgb(0 0 0 / .55);
  transition:box-shadow .35s ease;
}
.brandlink__caption{
  font-size:clamp(.7rem, .82vw, .85rem);
  letter-spacing:.13em;
  text-transform:uppercase;
  text-align:center;
  color:var(--muted);
  transition:color .25s ease;
}
.brandlink:hover{ transform:translateY(-7px) scale(1.03); }
.brandlink:hover .brandlink__pad{
  box-shadow:
    0 3px 10px rgb(0 0 0 / .55),
    0 20px 40px rgb(0 0 0 / .6),
    0 55px 100px rgb(0 0 0 / .6);
}
.brandlink:hover .brandlink__caption,
.brandlink:focus-visible .brandlink__caption{ color:var(--paper); }
.brandlink:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:6px;
  border-radius:14px;
  transform:translateY(-7px) scale(1.03);
}

/* reveal on scroll */
.sec__copy, .sec__card, .sec__links{
  opacity:0; transform:translateY(28px);
  transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1);
}
.sec__card, .sec__links{ transition-delay:.15s; }
.sec.is-visible .sec__copy,
.sec.is-visible .sec__card,
.sec.is-visible .sec__links{ opacity:1; transform:none; }
.sec.is-visible .sec__card:hover{ transform:translateY(-6px); }

/* ---------------------------------------------------------------- contact */
.sec--contact{ justify-content:center; }

/* Same viewBox and slice alignment as the video's object-fit:cover, so the two
   crop in lockstep and the text stays welded to the artwork. */
.contact__overlay{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:3;
  pointer-events:none;            /* only the address itself should catch clicks */
}
.contact__overlay a{ pointer-events:auto; cursor:pointer; }

/* Coordinates measured off the end card: the lettering runs x 132→1162 with its
   baseline at y 379, in the SVG's 1280x720 space. The still is a supplied render
   rather than a frame grab, so it is scaled and shifted to land its lettering on
   the video's final frame — scale alone left a ~6 unit sideways offset.
   Re-measure both if either is ever re-rendered. */
.contact__email{
  fill:transparent;               /* the painted lettering shows through */
  font-family:var(--sans);
  font-size:72px;
}
.contact__email::selection{ background:rgb(90 200 224 / .45); }
.contact__overlay a:focus-visible .contact__email{
  fill:rgb(242 236 227 / .25);
  stroke:var(--accent);
  stroke-width:1.5px;
}

.contact__copy{
  position:absolute;
  left:50%; top:64%;
  translate:-50% 0;
  z-index:4;
  font:inherit; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper);
  background:rgb(4 20 28 / .5);
  border:1px solid rgb(242 236 227 / .3);
  border-radius:99px;
  padding:.5rem 1rem;
  cursor:pointer;
  backdrop-filter:blur(6px);
  /* visibility, not just opacity: an invisible button that is still clickable
     and still in the tab order is worse than no button at all. */
  opacity:0;
  visibility:hidden;
  transition:opacity .45s ease, visibility .45s, border-color .2s ease, color .2s ease;
}
/* Only once the end card has settled — there is nothing to copy while the video
   is still running. It then stays put rather than waiting for hover, because a
   hover-only affordance never appears at all on a touch screen. */
.sec--contact.is-done .contact__copy{ opacity:1; visibility:visible; }
.contact__copy:hover{ border-color:var(--accent); color:var(--accent); }

/* The address spans 77% of the frame — wider than the crop-safe zone — so past
   this ratio the outer characters would be cropped away. Letterbox instead. */
@media (max-aspect-ratio: 13/10){
  .sec--contact .sec__bg,
  .sec--contact .sec__still{ object-fit:contain; }
}

/* ----------------------------------------------------------------- footer */
.foot{
  display:flex; justify-content:space-between; align-items:center;
  gap:1rem; flex-wrap:wrap;
  padding:2.5rem clamp(1.25rem,5vw,4rem);
  border-top:1px solid rgb(242 236 227 / .12);
  font-size:.85rem; color:var(--muted);
}
.foot a{ color:var(--paper); text-decoration:none; font-family:var(--serif); font-size:1.1rem; }

/* ------------------------------------------------------------ responsive */

/* Wide screens: give the video card the larger share of the row and widen the
   container, so the work is the thing that grows rather than the whitespace.
   The body copy has its own max-width in ch, so a narrower text column costs it
   nothing. */
@media (min-width: 1400px){
  .sec__inner{
    width:min(1440px, 90vw);
    grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  }
  .sec:nth-of-type(even) .sec__inner{
    grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
  }
  .sec__card{ max-width:min(100%, calc(64svh * 16 / 9)); }
  /* The copy block is far narrower than its column. Left alone it sits hard
     against the outer edge of the page; pinned to the inner edge it crowds the
     card. Centring it in the column splits the difference exactly. */
  .sec__copy{ justify-self:center; }
  /* Even sections keep the copy at its column's inner (left) edge — that side
     already reads as adjacent to the card. */
  .sec:nth-of-type(even) .sec__copy{ justify-self:start; }
}

@media (min-width: 1800px){
  .sec__inner{ width:min(2000px, 88vw); }
  .sec__card{ max-width:min(100%, calc(70svh * 16 / 9)); }
}

/* Ultrawide. The container keeps growing, but the copy column is still bounded
   in ch, so the extra width lands on the card rather than on line length. */
@media (min-width: 2400px){
  .sec__inner{
    width:min(2400px, 90vw);
    grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
  }
  .sec:nth-of-type(even) .sec__inner{
    grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  }
  .sec__card{ max-width:min(100%, calc(74svh * 16 / 9)); }
}

@media (max-width: 860px){
  .sec__inner,
  .sec:nth-of-type(even) .sec__inner{ grid-template-columns:1fr; padding-block:5rem; }
  /* Stacked in one column, every section reads heading-then-card regardless of
     which side it sits on at desktop width. */
  .sec:nth-of-type(even) .sec__copy{ order:1; }
  .sec:nth-of-type(even) .sec__card{ order:2; }
  /* Stacked, the card has to share the height with the copy above it. */
  .sec__card{ max-width:min(100%, calc(40svh * 16 / 9)); margin-inline:auto; }
  .sec__scrim,
  .sec:nth-of-type(even) .sec__scrim{
    background:linear-gradient(to bottom, rgb(13 11 10 / .55), rgb(13 11 10 / .8));
  }
}

/* Landscape but tall: past this the horizontal crop eats the outer labels no
   matter where they sit, so letterbox rather than lose them. */
@media (min-width: 721px) and (max-aspect-ratio: 13/10){
  .hero__video, .hero__still{ object-fit:contain; }
}

/* Portrait/narrow: cover-cropping 16:9 would push props off-screen, so letterbox
   the table instead and switch the SVG to matching 'meet' alignment. The text nav
   becomes the primary navigation. */
@media (max-width: 720px){
  .hero{ gap:1.5rem; padding-block:4rem 2rem; }
  .hero__stage{ height:auto; aspect-ratio:16/9; }
  .hero__video, .hero__still{ object-fit:contain; }
  .hero__hotspots{ /* JS swaps preserveAspectRatio to xMidYMid meet */ }
  .hs__label{ font-size:32px; }
  .hero__nav{ position:static; justify-content:center; padding-inline:1.25rem; }
  .hero__nav a{
    position:static; width:auto; height:auto; clip-path:none; overflow:visible;
    color:var(--paper); text-decoration:none;
    border:1px solid rgb(242 236 227 / .2); border-radius:99px;
    padding:.5rem .9rem; font-size:.8rem;
  }
}

/* -------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
  .sec__copy,.sec__card,.sec__links{ opacity:1; transform:none; }
}