@font-face {
  font-family: "Ogg Medium";
  src: url("https://dcym8fthxf5uu.cloudfront.net/fonts/247a073c-29f5-4a89-aa3a-741020f346fc/OggText-Medium.woff2")
    format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


:root {
  --mx: 0;
  --my: 0;

  --back-opacity: 1;
  --back-x: 0px;
  --back-y: 0px;
  --back-scale: 0.76;

  --four-y: 10vh;
  --four-scale: 0.78;

  --bazaar-y: 20vh;

  --blur-px: 0px;
  --back-brightness: 1;

  --bazaar-blur-px: 0px;
  --bazaar-brightness: 1;
  --bazaar-saturation: 1;

  --shade-opacity: 1;
  --shade-z: 2;

  --shade-top-alpha: 0;
  --shade-mid-alpha: 0;
  --shade-bottom-alpha: 0;

  --blur-tint: 74,181,224;

  --title-y:0px;
  --title-scale:1;
  --title-opacity:1;

  --bridge-x:-50%;
  --bridge-y:0px;
  --bridge-bottom:5vh;

  --bridge-width:67.2vw;
  --bridge-scale:1.02;


  --split-left-x:-50%;
  --split-left-y:0px;
  --split-left-scale:1;

  --split-right-x:-50%;
  --split-right-y:0px;
  --split-right-scale:1;


  --frame2-opacity:0;
  --frame2-x:-50%;
  --frame2-y:-50%;
  --frame2-scale:1.06;


  --intro-copy-y:0px;
  --intro-copy-opacity:1;


  --panel2-opacity:0;
  --panel2-y:calc(-50% + 58px);

  --panel3-opacity:0;
  --panel3-y:calc(-50% + 58px);


  --sights-opacity:0;
  --sights-controls-opacity:0;

  --sights-y:0px;

  --sights-enter-x:420vw;

  --sights-visibility:hidden;

  --sights-shift:0px;

  --sights-scale:1;


  --sights-top:
    clamp(112px,19vh,220px);

  --sights-screen-top:
    clamp(112px,19vh,220px);



  --ink:#111411;

  --paper:#fdf1e1;

  --shadow:
    rgba(0,0,0,.32);


  font-family:
    Inter,
    Satoshi,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;


  color:var(--paper);

  background:#0b1110;

  letter-spacing:0;
}



*{
  box-sizing:border-box;
}


html{

  min-height:100%;

  scroll-behavior:smooth;

  background:#0b1110;

}


body{

  min-height:100%;

  margin:0;

  overflow-x:clip;

  background:#0b1110;

}


button{

  border:0;

  font:inherit;

}


.site-shell{

  min-height:100vh;

}



/* main scroll container */


.cinema-scroll{

  position:relative;

  height:
    calc(100vh + 3700px);

}



.stage{

  position:sticky;

  top:0;

  height:100vh;

  min-height:620px;

  overflow:hidden;

  isolation:isolate;

  background:#7fb4d4;

}



.world{

  position:absolute;

  inset:0;

  overflow:hidden;

  background:#79b7dd;

}



/* all absolute layers */


.world,
.back-stack,
.sky-img,
.shade,
.scene-img,
.site-header,
.sights-slider,
.sights-controls,
.hero-title,
.intro-copy,
.story-panel{

  position:absolute;

}



/* images */


.scene-img{

  display:block;

  user-select:none;

  -webkit-user-drag:none;

  will-change:
    transform,
    opacity,
    filter;

  pointer-events:none;

}



/* sky */


.sky-img{

  z-index:0;

  inset:0;

  width:100%;

  height:100%;

  object-fit:cover;


  transform:none;


  filter:

    blur(var(--blur-px))

    brightness(var(--back-brightness));

}/* =========================
   HEADER
========================= */

.site-header {

  z-index:10;

  top:0;
  left:0;
  right:0;

  display:grid;

  grid-template-columns:
    minmax(260px,1fr)
    auto
    minmax(260px,1fr);

  align-items:center;

  gap:32px;

  padding:32px;

  color:
    rgba(253,241,225,.86);

  pointer-events:auto;

}



.site-logo {

  justify-self:start;

  font-family:
    "Ogg Medium",
    serif;

  font-size:24px;

  line-height:1;

  font-weight:500;

  color:
    rgba(253,241,225,.92);

  text-decoration:none;

  white-space:nowrap;

}



.site-nav {

  display:flex;

  align-items:center;

  justify-content:center;

  gap:
    clamp(24px,2.2vw,44px);

}



.site-nav a,
.language-switcher {

  color:
    rgba(253,241,225,.86);

  font-weight:700;

  line-height:1;

  text-shadow:
    0 2px 16px rgba(0,0,0,.2);

}



.site-nav a {

  font-size:20px;

  font-weight:400;

  text-decoration:none;

}



.language-switcher {

  justify-self:end;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:5px;

  padding:0;

  background:transparent;

  font-size:16px;

  cursor:pointer;

}



.language-switcher span {

  display:inline-flex;

  align-items:center;

  line-height:1;

}





/* =========================
   BACK STACK
========================= */


.back-stack {

  z-index:1;

  top:0;

  bottom:0;

  left:-3vw;

  right:-3vw;


  opacity:

    var(--back-opacity);


  transform:

    translate3d(
      var(--back-x),
      var(--back-y),
      0
    )

    scale(var(--back-scale));


  transform-origin:

    50% 100%;


  will-change:

    transform,
    filter,
    opacity;

}





.back-img {

  inset:0;

  width:100%;

  height:100%;

  object-fit:cover;


  filter:

    blur(var(--blur-px))

    brightness(var(--back-brightness));

}





.back-bazaar,
.back-four {

  top:auto;

  bottom:0;

  left:48%;

  right:auto;


  width:112%;

  height:auto;

  object-fit:contain;

}





.back-bazaar {

  z-index:3;

  opacity:1;


  filter:

    blur(var(--bazaar-blur-px))

    brightness(var(--bazaar-brightness))

    saturate(var(--bazaar-saturation));


  transform:

    translate3d(
      -50%,
      var(--bazaar-y),
      0
    )

    scale(.86);

}





.back-four {

  z-index:1;

  opacity:.72;

  mix-blend-mode:screen;


  transform:

    translate3d(
      -50%,
      calc(var(--four-y) - 110px),
      0
    )

    scale(var(--four-scale));

}





/* =========================
   SIGHTS SLIDER
========================= */


.sights-slider {

  z-index:2;


  left:0;

  right:0;


  top:

    var(--sights-top);


  padding:0;


  opacity:1;


  visibility:

    var(--sights-visibility);


  transform:

    translate3d(
      var(--sights-enter-x),
      var(--sights-y),
      0
    )

    scale(var(--sights-scale));


  transform-origin:

    0 0;


  pointer-events:auto;


  will-change:transform;

}





.sights-track {

  display:flex;

  align-items:stretch;


  gap:

    clamp(16px,1.15vw,24px);


  transform:

    translate3d(
      calc(var(--sights-shift) - 18vw),
      0,
      0
    );


  transition:

    transform 640ms
    cubic-bezier(.22,1,.36,1);


  will-change:transform;

}



.sights-track.is-jumping {

  transition:none;

}





/* =========================
   SIGHT CARDS
========================= */


.sight-card {

  position:relative;


  flex:

    0 0 clamp(360px,19.4vw,430px);


  height:220px;


  padding:24px;


  overflow:hidden;


  border:

    1px solid
    rgba(253,241,225,.42);


  border-radius:24px;


  color:#000;


  background:#fdf1e1;


  box-shadow:

    0 18px 52px rgba(2,47,64,.12);


  backdrop-filter:none;


  cursor:pointer;


  pointer-events:auto;


  user-select:none;

}


.sight-card::before,
.sight-card::after {

  content:none;

}



.sight-card h3,
.sight-card p,
.sight-kicker {

  text-shadow:none;

  position:relative;

  z-index:1;

}



.sight-card:focus-visible,
.sight-card.is-active {

  outline:none;

}



.sight-kicker {

  display:block;

  margin-bottom:56px;


  color:#000;


  font-size:12px;


  font-weight:500;


  line-height:1.05;


  text-transform:uppercase;

}



.sight-pin {

  position:absolute;


  top:24px;

  right:24px;


  width:67.2px;

  height:67.2px;


  pointer-events:none;

}



.sight-card h3 {

  position:absolute;


  left:24px;

  right:24px;


  bottom:

    calc(
      24px +
      (16px * 1.16 * 2) +
      12px
    );


  max-width:

    calc(100% - 76px);


  margin:0;


  color:#000;


  font-size:24px;


  font-weight:800;


  line-height:.95;


  overflow:hidden;


  text-overflow:ellipsis;


  white-space:nowrap;

}



.sight-card p {

  position:absolute;


  left:24px;

  right:24px;


  bottom:24px;


  max-width:100%;


  margin:

    12px 0 0;


  color:#000;


  font-size:16px;


  font-weight:400;


  line-height:1.16;


  display:-webkit-box;


  max-height:

    calc(2em * 1.16);


  overflow:hidden;


  -webkit-box-orient:vertical;


  -webkit-line-clamp:2;

}/* =========================
   SIGHTS CONTROLS
========================= */

.sights-controls {

  z-index:5;

  left:48px;

  right:auto;

  top:
    calc(
      var(--sights-screen-top)
      + 220px
      + 16px
    );


  display:flex;

  justify-content:flex-start;

  gap:14px;


  opacity:

    var(--sights-controls-opacity);


  transform:

    translate3d(
      0,
      var(--sights-y),
      0
    );


  pointer-events:none;


  will-change:
    transform,
    opacity;

}


.sights-controls.is-ready {

  pointer-events:auto;

}



.sight-nav {

  width:54px;

  height:54px;


  display:inline-flex;

  align-items:center;

  justify-content:center;


  border-radius:999px;


  color:#111411;


  background:
    rgba(253,241,225,.94);


  box-shadow:

    0 18px 36px rgba(0,0,0,.2);


  cursor:pointer;

}



/* =========================
   HERO TITLE
========================= */


.hero-title {

  z-index:3;


  left:50%;


  top:

    clamp(
      122px,
      19vh,
      205px
    );


  width:

    min(
      94vw,
      1780px
    );


  margin:0;


  color:#fdf1e1;


  font-family:
    "Ogg Medium",
    serif;


  font-size:14rem;


  font-weight:500;


  line-height:.78;


  text-align:center;


  text-shadow:none;


  transform:

    translate3d(
      -50%,
      var(--title-y),
      0
    )

    scale(var(--title-scale));


  opacity:

    var(--title-opacity);


  will-change:

    transform,
    opacity;

}




/* =========================
   BRIDGE
========================= */


.bridge-img {

  z-index:4;


  left:50%;


  bottom:

    var(--bridge-bottom);


  width:

    min(
      var(--bridge-width),
      2140px
    );


  height:auto;


  transform:

    translate3d(
      var(--bridge-x),
      var(--bridge-y),
      0
    )

    scale(var(--bridge-scale));


  transform-origin:

    50% 48%;

}




/* =========================
   SPLIT FRAME
========================= */


.splitframe-img {

  z-index:6;


  left:50%;


  bottom:-2vh;


  width:

    min(
      118vw,
      2240px
    );


  height:auto;


  pointer-events:none;

}



.splitframe-left {

  transform:

    translate3d(
      var(--split-left-x),
      var(--split-left-y),
      0
    )

    scale(var(--split-left-scale));


  transform-origin:

    21% 52%;

}



.splitframe-right {

  transform:

    translate3d(
      var(--split-right-x),
      var(--split-right-y),
      0
    )

    scale(var(--split-right-scale));


  transform-origin:

    79% 52%;

}





/* =========================
   FRAME TWO
========================= */


.frame-two-img {

  z-index:5;


  filter:none !important;

  backdrop-filter:none;


  left:50%;


  top:50%;


  width:

    min(
      122vw,
      2160px
    );


  height:auto;


  opacity:

    var(--frame2-opacity);


  transform:

    translate3d(
      var(--frame2-x),
      var(--frame2-y),
      0
    )

    scale(var(--frame2-scale));


  transform-origin:

    50% 48%;

}




/* =========================
   SHADE
========================= */


.shade {

  inset:0;


  z-index:

    var(--shade-z);


  pointer-events:none;


  opacity:

    var(--shade-opacity);



  background:

    linear-gradient(
      180deg,

      rgba(
        var(--blur-tint),
        var(--shade-top-alpha)
      )

      0%,


      rgba(
        var(--blur-tint),
        var(--shade-mid-alpha)
      )

      48%,


      rgba(
        var(--blur-tint),
        var(--shade-bottom-alpha)
      )

      100%

    );

}





/* =========================
   INTRO COPY
========================= */


.intro-copy {

  z-index:9;


  left:50%;


  bottom:

    clamp(
      56px,
      28vh,
      400px
    );


  width:

    min(
      560px,
      calc(100vw - 40px)
    );


  text-align:center;


  transform:

    translate3d(
      -50%,
      var(--intro-copy-y),
      0
    );


  opacity:

    var(--intro-copy-opacity);


  will-change:

    transform,
    opacity;

}



.intro-copy p {

  margin:0 auto;


  max-width:560px;


  color:#fdf1e1;


  font-size:1.18rem;


  font-weight:500;


  line-height:1.18;


  text-shadow:

    0 2px 18px rgba(0,0,0,.42);

}



.hero-tags {

  display:flex;

  flex-wrap:wrap;


  justify-content:center;


  gap:10px;


  margin-top:26px;

}



.hero-tags span {

  min-height:42px;


  display:inline-flex;


  align-items:center;


  justify-content:center;


  padding:0 25px;


  color:var(--ink);


  border-radius:999px;


  background:#fdf1e1;


  font-size:.98rem;


  font-weight:500;


  box-shadow:

    0 12px 30px rgba(0,0,0,.18);

}





/* =========================
   STORY PANELS
========================= */


.story-panel {

  z-index:10;


  left:50%;


  top:45%;


  width:

    min(
      760px,
      calc(100vw - 42px)
    );


  text-align:center;


  pointer-events:none;


  transform:

    translate3d(
      -50%,
      -50%,
      0
    );


  will-change:

    transform,
    opacity;

}



.story-panel h2 {

  margin:0;


  color:#fdf1e1;


  font-family:
    "Ogg Medium",
    serif;


  font-size:4.75rem;


  font-weight:500;


  line-height:.95;


  text-shadow:

    0 16px 38px var(--shadow);

}



.story-panel p {

  width:

    min(
      520px,
      100%
    );


  margin:

    26px auto 0;


  color:#fdf1e1;


  font-size:1.14rem;


  font-weight:500;


  line-height:1.18;


  text-shadow:

    0 2px 18px rgba(0,0,0,.42);

}



.story-panel-bridge {

  top:60%;


  opacity:

    var(--panel2-opacity);


  transform:

    translate3d(
      -50%,
      var(--panel2-y),
      0
    );

}



.story-panel-bazaar {

  top:29%;


  opacity:

    var(--panel3-opacity);


  transform:

    translate3d(
      -50%,
      var(--panel3-y),
      0
    );

}



.facts {

  display:grid;


  grid-template-columns:

    repeat(
      2,
      minmax(0,1fr)
    );


  gap:86px;


  width:

    min(
      470px,
      100%
    );


  margin:

    72px auto 0;

}



.facts dt {

  color:#fdf1e1;


  font-family:
    "Ogg Medium",
    serif;


  font-size:4.2rem;


  font-weight:500;


  line-height:.9;


  text-shadow:

    0 14px 34px var(--shadow);

}



.facts dd {

  margin:18px 0 0;


  color:#fdf1e1;


  font-size:1rem;


  font-weight:500;


  line-height:1.14;


  text-shadow:

    0 2px 18px rgba(0,0,0,.42);

}



.note-button {

  min-height:50px;


  margin-top:28px;


  display:inline-flex;


  align-items:center;


  justify-content:center;


  gap:12px;


  padding:0 28px;


  border-radius:999px;


  color:var(--ink);


  background:#fdf1e1;


  box-shadow:

    0 16px 34px rgba(0,0,0,.18);


  pointer-events:auto;


  cursor:pointer;

}



.note-button span:first-child {

  font-size:1.25rem;

  line-height:1;

}/* =========================
   HERO TITLE
========================= */

.hero-title {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: clamp(122px, 19vh, 205px);
  width: min(94vw, 1780px);
  margin: 0;

  color: #fdf1e1;

  font-family: "Ogg Medium", serif;
  font-size: 14rem;
  font-weight: 500;
  line-height: 0.78;
  text-align: center;

  text-shadow: none;

  transform:
    translate3d(-50%, var(--title-y), 0)
    scale(var(--title-scale));

  opacity: var(--title-opacity);

  will-change: transform, opacity;
}


/* =========================
   BRIDGE IMAGE
========================= */

.bridge-img {
  position: absolute;
  z-index: 4;

  left: 50%;
  bottom: var(--bridge-bottom);

  width: min(var(--bridge-width), 2140px);
  height: auto;

  transform:
    translate3d(
      var(--bridge-x),
      var(--bridge-y),
      0
    )
    scale(var(--bridge-scale));

  transform-origin: 50% 48%;
}


/* =========================
   SPLIT FRAME
========================= */

.splitframe-img {
  position: absolute;

  z-index: 6;

  left: 50%;
  bottom: -2vh;

  width: min(118vw, 2240px);
  height: auto;

  pointer-events: none;
}


.splitframe-left {

  transform:
    translate3d(
      var(--split-left-x),
      var(--split-left-y),
      0
    )
    scale(var(--split-left-scale));

  transform-origin:21% 52%;
}


.splitframe-right {

  transform:
    translate3d(
      var(--split-right-x),
      var(--split-right-y),
      0
    )
    scale(var(--split-right-scale));

  transform-origin:79% 52%;
}



/* =========================
   FRAME TWO
========================= */

.frame-two-img {

  position:absolute;

  z-index:5;

  filter:none !important;
  backdrop-filter:none;

  left:50%;
  top:50%;

  width:min(122vw,2160px);
  height:auto;


  opacity:var(--frame2-opacity);


  transform:
    translate3d(
      var(--frame2-x),
      var(--frame2-y),
      0
    )
    scale(var(--frame2-scale));


  transform-origin:50% 48%;
}



/* =========================
   SHADE OVERLAY
========================= */


.shade {

  position:absolute;

  inset:0;

  z-index:var(--shade-z);

  pointer-events:none;

  opacity:var(--shade-opacity);


  background:
  linear-gradient(
    180deg,
    rgba(
      var(--blur-tint),
      var(--shade-top-alpha)
    ) 0%,

    rgba(
      var(--blur-tint),
      var(--shade-mid-alpha)
    ) 48%,

    rgba(
      var(--blur-tint),
      var(--shade-bottom-alpha)
    ) 100%
  );
}



/* =========================
   INTRO COPY
========================= */


.intro-copy {

  position:absolute;

  z-index:9;


  left:50%;

  bottom:
  clamp(
    56px,
    28vh,
    400px
  );


  width:
  min(
    560px,
    calc(100vw - 40px)
  );


  text-align:center;


  transform:
  translate3d(
    -50%,
    var(--intro-copy-y),
    0
  );


  opacity:
  var(--intro-copy-opacity);


  will-change:
  transform,
  opacity;
}



.intro-copy p {

  margin:0 auto;

  max-width:560px;


  color:#fdf1e1;


  font-size:1.18rem;

  font-weight:500;

  line-height:1.18;


  text-shadow:
  0 2px 18px rgba(0,0,0,.42);
}




.hero-tags {

  display:flex;

  flex-wrap:wrap;

  justify-content:center;


  gap:10px;


  margin-top:26px;
}



.hero-tags span {


  min-height:42px;


  display:inline-flex;

  align-items:center;

  justify-content:center;


  padding:0 25px;


  color:var(--ink);


  border-radius:999px;


  background:#fdf1e1;


  font-size:.98rem;


  font-weight:500;


  box-shadow:
  0 12px 30px rgba(0,0,0,.18);

}



/* =========================
 STORY PANELS
========================= */


.story-panel {

  position:absolute;

  z-index:10;


  left:50%;

  top:45%;


  width:
  min(
    760px,
    calc(100vw - 42px)
  );


  text-align:center;


  pointer-events:none;


  transform:
  translate3d(
    -50%,
    -50%,
    0
  );


  will-change:
  transform,
  opacity;
}




.story-panel h2 {


  margin:0;


  color:#fdf1e1;


  font-family:"Ogg Medium",serif;


  font-size:4.75rem;


  font-weight:500;


  line-height:.95;


  text-shadow:
  0 16px 38px var(--shadow);

}




.story-panel p {


  width:
  min(
    520px,
    100%
  );


  margin:
  26px auto 0;


  color:#fdf1e1;


  font-size:1.14rem;


  font-weight:500;


  line-height:1.18;


  text-shadow:
  0 2px 18px rgba(0,0,0,.42);

}




.story-panel-bridge {

  top:60%;


  opacity:
  var(--panel2-opacity);


  transform:
  translate3d(
    -50%,
    var(--panel2-y),
    0
  );

}



.story-panel-bazaar {


  top:29%;


  opacity:
  var(--panel3-opacity);


  transform:
  translate3d(
    -50%,
    var(--panel3-y),
    0
  );

}



/* =========================
 FACTS
========================= */


.facts {


  display:grid;


  grid-template-columns:
  repeat(
    2,
    minmax(0,1fr)
  );


  gap:86px;


  width:
  min(
    470px,
    100%
  );


  margin:
  72px auto 0;

}




.facts dt {


  color:#fdf1e1;


  font-family:"Ogg Medium",serif;


  font-size:4.2rem;


  font-weight:500;


  line-height:.9;


  text-shadow:
  0 14px 34px var(--shadow);

}



.facts dd {


  margin:
  18px 0 0;


  color:#fdf1e1;


  font-size:1rem;


  font-weight:500;


  line-height:1.14;


  text-shadow:
  0 2px 18px rgba(0,0,0,.42);

}



/* =========================
 NOTE BUTTON
========================= */


.note-button {


  min-height:50px;


  margin-top:28px;


  display:inline-flex;


  align-items:center;


  justify-content:center;


  gap:12px;


  padding:0 28px;


  border-radius:999px;


  color:var(--ink);


  background:#fdf1e1;


  box-shadow:
  0 16px 34px rgba(0,0,0,.18);


  pointer-events:auto;


  cursor:pointer;

}



.note-button span:first-child {


  font-size:1.25rem;


  line-height:1;

}/* =========================
   RESPONSIVE
========================= */


@media (max-width:1500px) {

  .hero-title {

    font-size:11rem;

  }


  .story-panel h2 {

    font-size:4.1rem;

  }

}



@media (max-width:1100px) {


  .hero-title {

    top:15vh;

    font-size:7.5rem;

  }



  .bridge-img {

    width:138vw;

  }



  .frame-two-img {

    width:132vw;

  }



  .story-panel h2 {

    font-size:3.2rem;

  }



  .facts {

    gap:34px;

    margin-top:44px;

  }



  .facts dt {

    font-size:3.2rem;

  }



  .sight-card {

    flex-basis:
    clamp(
      320px,
      40vw,
      390px
    );

    min-height:178px;

  }

}




@media (max-width:640px) {


  .stage {

    min-height:640px;

  }



  .site-header {

    grid-template-columns:1fr auto;

    gap:18px;

    padding:24px;

  }




  .site-nav {

    grid-column:1 / -1;

    grid-row:2;


    justify-content:flex-start;


    gap:18px;


    overflow-x:auto;


    scrollbar-width:none;

  }




  .site-nav::-webkit-scrollbar {

    display:none;

  }




  .hero-title {


    top:16vh;


    font-size:4.5rem;


  }




  .bridge-img {


    bottom:2vh;


    width:190vw;


  }





  .frame-two-img {


    width:176vw;


  }




  .intro-copy {


    bottom:42px;


  }




  .intro-copy p,
  .story-panel p {


    font-size:1rem;


  }




  .hero-tags {


    gap:8px;


  }




  .hero-tags span {


    min-height:38px;


    padding:0 16px;


    font-size:.88rem;


  }





  .story-panel {


    top:42%;


  }




  .story-panel-bazaar {


    top:26%;


  }





  .story-panel h2 {


    font-size:2.45rem;


  }




  .facts {


    gap:18px;


    margin-top:34px;


  }




  .facts dt {


    font-size:2.5rem;


  }





  .sights-slider {


    padding:0;


  }




  .sights-track {


    gap:12px;


    transform:
    translate3d(
      calc(var(--sights-shift) - 18vw),
      0,
      0
    );

  }




  .sight-card {


    flex-basis:
    min(
      82vw,
      330px
    );


    height:220px;


    padding:24px;


    border-radius:24px;

  }




  .sights-controls {


    top:
    calc(
      var(--sights-screen-top)
      +236px
    );

  }




  .sight-card h3 {


    max-width:78%;


  }




  .sight-card p {


    max-width:100%;


    margin-top:10px;


  }




  .sight-kicker {


    margin-bottom:56px;


  }





  .sight-pin {


    top:24px;


    right:24px;


    width:57.6px;


    height:57.6px;


  }


}




/* =========================
   REDUCED MOTION
========================= */


@media (prefers-reduced-motion:reduce) {


  html {

    scroll-behavior:auto;

  }




  .scene-img,
  .back-stack,
  .hero-title,
  .intro-copy,
  .story-panel,
  .sights-track,
  .sights-slider {


    transition:none;


  }


}