/* Header story triggers and full-screen Friction / Flow story panels. */
#site-header .header-inner {
  grid-template-columns: minmax(0, 1fr) auto auto auto auto minmax(0, 1fr);
  gap: clamp(.8rem, 2vw, 2.15rem);
}

.ns-story-trigger--header {
  position: relative;
  appearance: none;
  border: 0;
  padding: .7rem .1rem;
  background: transparent;
  color: #a89f91;
  cursor: pointer;
  font: 500 .66rem/1 "DM Mono", monospace;
  letter-spacing: .17em;
  text-transform: uppercase;
  transition: color .25s ease;
}

.ns-story-trigger--header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: .32rem;
  left: 0;
  height: 1px;
  background: #bd8e49;
  transform: scaleX(0);
  transition: transform .35s cubic-bezier(.65,.05,0,1);
}

.ns-story-trigger--header:hover,
.ns-story-trigger--header:focus-visible,
.ns-story-trigger--header[aria-expanded="true"] { color: #f2eee6; }
.ns-story-trigger--header:hover::after,
.ns-story-trigger--header:focus-visible::after,
.ns-story-trigger--header[aria-expanded="true"]::after { transform: scaleX(1); }
.ns-story-trigger--header:focus-visible { outline: 1px solid rgba(189,142,73,.8); outline-offset: .35rem; }

.ns-header-work-link {
  position: relative;
  appearance: none;
  border: 0;
  padding: .7rem .1rem;
  background: transparent;
  color: #a89f91;
  cursor: pointer;
  font: 500 .66rem/1 "DM Mono", monospace;
  letter-spacing: .17em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .25s ease;
}

.ns-header-work-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: .32rem;
  left: 0;
  height: 1px;
  background: #bd8e49;
  transform: scaleX(0);
  transition: transform .35s cubic-bezier(.65,.05,0,1);
}

.ns-header-work-link:hover,
.ns-header-work-link:focus-visible,
.ns-header-work-link[aria-expanded="true"] { color: #f2eee6; }

.ns-header-work-link:hover::after,
.ns-header-work-link:focus-visible::after,
.ns-header-work-link[aria-expanded="true"]::after { transform: scaleX(1); }
.ns-header-work-link:focus-visible { outline: 1px solid rgba(189,142,73,.8); outline-offset: .35rem; }

.kg-menu__story-item { display: none; }

.ns-story-panel {
  position: fixed;
  top: var(--header-height, 72px);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10010;
  overflow: hidden auto;
  visibility: hidden;
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transform: translateY(-1.5rem);
  transition: clip-path .72s cubic-bezier(.65,.05,0,1), transform .72s cubic-bezier(.65,.05,0,1), opacity .3s ease, visibility 0s linear .72s;
  contain: layout paint;
}

.ns-story-panel[data-story-state="open"] {
  visibility: visible;
  opacity: 1;
  clip-path: inset(0);
  transform: translateY(0);
  transition-delay: 0s;
}

.ns-story-panel__close {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  z-index: 3;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(242,238,230,.32);
  border-radius: 50%;
  background: rgba(7,7,6,.42);
  color: #f2eee6;
  cursor: pointer;
  font: 300 1.8rem/1 Manrope, sans-serif;
  backdrop-filter: blur(12px);
  transition: color .25s ease, border-color .25s ease, transform .35s ease;
}
.ns-story-panel__close:hover,
.ns-story-panel__close:focus-visible { color: #d4a256; border-color: #d4a256; transform: rotate(90deg); outline: none; }

.ns-story-panel__inner {
  min-height: 100%;
  position: relative;
  display: grid;
  align-items: center;
  padding: clamp(4rem, 10vw, 9rem) clamp(1.5rem, 12vw, 15rem);
  background: #0b0e10;
}

.ns-story-panel__copy { position: relative; z-index: 2; max-width: 62rem; }
.ns-story-panel__kicker { margin: 0 0 1.7rem; color: #bd8e49; font: 500 .7rem/1.4 "DM Mono", monospace; letter-spacing: .22em; }
.ns-story-panel h2 { margin: 0; color: #f2eee6; font: 600 clamp(3.3rem, 7vw, 7.4rem)/.91 "Playfair Display", Georgia, serif; letter-spacing: -.065em; }
.ns-story-panel h2 em { color: #bd8e49; font-weight: 500; }
.ns-story-panel__copy > p:last-child { max-width: 36rem; margin: 2.2rem 0 0 auto; color: #b9b2a7; font: 400 clamp(.95rem, 1.35vw, 1.12rem)/1.8 Manrope, sans-serif; }

.ns-story-panel--friction .ns-story-panel__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 73% 42%, rgba(189,142,73,.11), transparent 27%), repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), rgba(242,238,230,.025) 25%);
  pointer-events: none;
}

.ns-story-panel--flow .ns-story-panel__inner { align-items: end; padding: clamp(5rem, 12vh, 9rem) clamp(1.5rem, 7vw, 8.5rem) clamp(3.5rem, 8vh, 6rem); background: #12110f; isolation: isolate; }
.ns-story-panel--flow .ns-story-panel__inner::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(7,7,6,.94),rgba(7,7,6,.68) 42%,rgba(7,7,6,.12) 76%),linear-gradient(0deg,rgba(7,7,6,.84),transparent 58%); }
.ns-story-panel__media { position:absolute; inset:0; z-index:-2; margin:0; }
.ns-story-panel__media img { width:100%; height:100%; display:block; object-fit:cover; object-position:center; }
.ns-story-panel--flow .ns-story-panel__copy { max-width: 52rem; }
.ns-story-panel--flow .ns-story-panel__copy > p:last-child { margin-left: 0; }

.ns-story-panel--work .ns-story-panel__inner {
  align-content: center;
  background:
    radial-gradient(circle at 82% 18%, rgba(189,142,73,.17), transparent 28%),
    linear-gradient(135deg, #080908 0%, #11110f 62%, #17130d 100%);
}
.ns-story-panel--work .ns-story-panel__copy { max-width: 76rem; }
.ns-story-panel--work .ns-story-panel__copy > p:last-of-type { max-width: 39rem; margin: 1.7rem 0 0; color:#b9b2a7; font:400 clamp(.95rem,1.35vw,1.12rem)/1.8 Manrope,sans-serif; }
.ns-story-work__proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: clamp(2.3rem, 5vh, 4rem) 0 0;
  padding: 0;
  border: 1px solid rgba(189,142,73,.28);
  background: rgba(189,142,73,.28);
  list-style: none;
}
.ns-story-work__proof li { min-height: 7.5rem; padding: 1.35rem; background: rgba(8,9,8,.88); }
.ns-story-work__proof span { display:block; margin-bottom:.7rem; color:#bd8e49; font:500 .62rem/1 "DM Mono",monospace; letter-spacing:.14em; }
.ns-story-work__proof strong { color:#f2eee6; font:500 clamp(1.1rem,1.8vw,1.55rem)/1.15 "Playfair Display",Georgia,serif; }
.ns-story-work__actions { display:flex; flex-wrap:wrap; gap:.85rem; margin-top:1.5rem; }
.ns-story-work__actions a { display:inline-flex; align-items:center; justify-content:center; min-height:3.25rem; padding:.85rem 1.2rem; border:1px solid rgba(189,142,73,.52); color:#f2eee6; font:600 .68rem/1 "DM Mono",monospace; letter-spacing:.09em; text-decoration:none; text-transform:uppercase; transition:background-color .25s ease,color .25s ease; }
.ns-story-work__actions a:first-child { background:#bd8e49; color:#11100e; }
.ns-story-work__actions a:hover,.ns-story-work__actions a:focus-visible { background:#bd8e49; color:#11100e; outline:none; }

/* Keep the two choices on phones, but make the complete portfolio the single clear desktop/tablet action. */
@media (min-width: 981px) {
  .ns-story-work__actions a:first-child { display: none; }
  .ns-story-work__actions a:last-child { min-width: min(100%, 26rem); }
}

body.ns-story-open { overflow: hidden; }
body.ns-story-open .rivet-fab { opacity: 0 !important; pointer-events: none !important; }

/* Prevent closed fixed panels from extending the document on iPad/iPhone. */
@media (hover: none), (pointer: coarse) {
  .ns-story-panel:not([data-story-state="open"]) {
    display: none;
    transform: none;
  }

  .ns-story-panel[data-story-state="open"] {
    display: block;
  }
}

@media (max-width: 980px) {
  #site-header .header-inner { grid-template-columns: auto 1fr auto; gap: .65rem; }
  .ns-story-trigger--header, .ns-header-work-link { display: none; }
  .kg-menu__story-item { display: block; }
  .ns-story-panel__inner { padding: 4.5rem 1.5rem 3rem; align-items: center; }
  .ns-story-panel h2 { font-size: clamp(3rem, 14vw, 5.6rem); }
  .ns-story-panel__copy > p:last-child { margin-left: 0; }
  .ns-story-panel--flow .ns-story-panel__inner { padding: 5.5rem 1.5rem 3rem; }
  .ns-story-panel--flow .ns-story-panel__inner::after { background: linear-gradient(0deg,rgba(7,7,6,.94) 0%,rgba(7,7,6,.58) 72%,rgba(7,7,6,.28)); }
  .ns-story-panel--flow .ns-story-panel__media img { object-position: 62% center; }
  .ns-story-work__proof { grid-template-columns: 1fr; }
  .ns-story-work__proof li { min-height: 0; }
  .ns-story-work__actions a { width:100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ns-story-panel, .ns-story-trigger--header::after, .ns-story-panel__close { transition-duration: .01ms !important; }
}