/* Business directions portal: a compact Qin Builds filmstrip. It inherits the
   portfolio's paper, ink, cinnabar, celadon, typography, spacing, focus, and
   motion tokens from styles.css. */
:root {
  --business-rule: color-mix(in srgb, var(--ink) 18%, var(--paper));
  --business-dark: color-mix(in srgb, var(--ink) 92%, var(--celadon));
  --folio-sheen: color-mix(in srgb, var(--paper) 30%, transparent);
  --film-stock: #f3f2ea;
}

body {
  --qb-chrome-ink: var(--ink);
  --qb-chrome-fill: color-mix(in srgb, var(--paper-raised) 76%, transparent);
  --qb-chrome-fill-hover: color-mix(in srgb, var(--paper-deep) 88%, transparent);
  --qb-chrome-shine: color-mix(in srgb, white 18%, transparent);
  --qb-chrome-rim: color-mix(in srgb, var(--ink) 28%, transparent);
  --qb-chrome-shadow: color-mix(in srgb, black 62%, transparent);
  background: var(--paper);
  scrollbar-color: var(--ink-mute) var(--paper-deep);
}

@media (prefers-reduced-transparency: reduce) {
  body .qb-chrome__btn {
    background: var(--paper-raised);
  }
}

.business-masthead,
.business-projector,
.business-footer {
  width: var(--qb-content-width);
  margin-inline: auto;
}

.business-masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-6) var(--space-5);
  border-bottom: var(--line-thin) solid var(--business-rule);
}

.business-name,
.business-footer a {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 680;
  letter-spacing: -.035em;
  text-decoration: none;
}

.business-masthead nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.business-masthead nav a,
.business-footer span {
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  text-transform: uppercase;
}

.business-masthead nav a:hover,
.business-footer a:hover {
  color: var(--cinnabar-deep);
}

.business-projector {
  height: calc(100svh - 6rem);
  min-height: 36rem;
  padding-block: clamp(var(--space-4), 3vh, var(--space-6)) var(--space-6);
}


.projector-layout {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: #10140f;
  box-shadow: inset 0 0 0 var(--line-thin) color-mix(in srgb, var(--paper) 18%, transparent);
}

.projector-reel {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(3.5rem, 5vw, 4.75rem);
  min-width: 0;
  min-height: 0;
  background: #090b08;
  box-shadow: .75rem 0 2rem rgb(0 0 0 / 34%);
}

.projector-film-window {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: #121510;
}

.projector-film-window::before,
.projector-film-window::after {
  position: absolute;
  top: 0;
  z-index: 3;
  width: clamp(.65rem, 1vw, .85rem);
  height: 100%;
  content: "";
  background: repeating-linear-gradient(
    180deg,
    var(--film-stock) 0 clamp(.7rem, 1.4vh, .95rem),
    transparent clamp(.7rem, 1.4vh, .95rem) clamp(1.05rem, 2vh, 1.35rem)
  );
  pointer-events: none;
}

.projector-film-window::before {
  left: clamp(.65rem, 1vw, .9rem);
}

.projector-film-window::after {
  right: clamp(.65rem, 1vw, .9rem);
}

.projector-film-track {
  display: grid;
  grid-auto-rows: auto;
  gap: var(--space-3);
  height: 100%;
  min-height: 0;
  margin: 0;
  /* the top padding puts the first frame on the lens axis; the first
     leader and its gap are subtracted so they live inside that padding */
  --leader-height: 1.25rem;
  padding: max(var(--space-4), calc(50svh - clamp(4.25rem, 9vh, 5.5rem) - var(--space-8) - var(--space-4) - var(--leader-height) - var(--space-3))) clamp(2rem, 3vw, 2.75rem);
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y proximity;
  scroll-padding-block: 50%;
  overscroll-behavior-y: contain;
  list-style: none;
  scrollbar-width: none;
}

.projector-film-track::-webkit-scrollbar {
  display: none;
}

.projector-film-track:focus-visible {
  outline: var(--line-strong) solid var(--cinnabar);
  outline-offset: calc(var(--space-1) * -1);
}

.projector-film-frame {
  min-width: 0;
  height: clamp(8.5rem, 18vh, 11rem);
  min-height: 0;
  scroll-snap-align: center;
}

/* The reel runs in two titled lengths. A leader is the printed head of each
   length: a short strip carrying the group name, never selectable. Its height
   is fixed because the track's top padding gives the first one back, so the
   first frame still lands on the lens axis. */
.projector-film-leader {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  min-width: 0;
  height: var(--leader-height);
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  font: 700 .625rem/1.2 var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  scroll-snap-align: none;
}

.projector-film-leader::after {
  flex: 1 1 auto;
  height: var(--line-thin);
  margin-bottom: .3em;
  content: "";
  background: color-mix(in srgb, var(--ink) 22%, transparent);
}

.projector-film-leader:not(:first-child) {
  margin-top: var(--space-4);
}

.projector-film-frame button {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--space-1);
  width: 100%;
  height: 100%;
  min-height: 44px;
  padding: .45rem;
  border: var(--line-thin) solid rgb(255 255 255 / 12%);
  border-radius: 0;
  background: #050604;
  /* The title is printed on the film, so it takes this page's print white,
     not a paper token: /business/ is the tech theme, where paper is the dark
     ground and --paper-raised printed near-black on the frame. Unlit at 72%,
     so the lamp-white pressed frame still reads as the one under the beam. */
  color: color-mix(in srgb, #f4f0e6 72%, transparent);
  cursor: pointer;
  font: 700 .75rem/1.2 var(--font-mono);
  letter-spacing: .035em;
  text-align: left;
  text-transform: uppercase;
}

.projector-film-frame button[aria-pressed="true"] {
  border-color: var(--cinnabar);
  box-shadow: 0 0 0 var(--line-strong) color-mix(in srgb, var(--cinnabar) 72%, transparent);
  color: #fff;
}

.projector-film-frame button:focus-visible {
  /* --line-medium is not a token this site defines: the shorthand was invalid
     at computed-value time, which unset the outline entirely (style: none) and
     took the global cinnabar focus ring down with it. */
  outline: var(--line-strong) solid #f4f0e6;
  outline-offset: calc(var(--space-1) * -1);
}

.projector-thumb {
  position: relative;
  display: grid;
  min-height: 0;
  overflow: hidden;
  place-items: center;
  background: #283029;
}

.projector-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.projector-thumb--ice {
  grid-template-columns: 1fr auto;
  padding: var(--space-3);
  background: #f8f7f1;
  color: #1747d1;
  font-family: var(--business-font-bodoni);
}

.projector-thumb--mono {
  grid-template-columns: 1fr auto;
  align-items: end;
  justify-items: start;
  padding: var(--space-3);
  background:
    linear-gradient(90deg, #173ae3 0 30%, #f4f0e6 30% 34%, #c83232 34% 64%, #f4f0e6 64% 68%, #bd633f 68% 100%);
  color: #f4f0e6;
  font-family: var(--business-font-counterline);
}

.projector-thumb--mono b {
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: 400;
  line-height: .8;
  text-shadow: 1px 1px 0 #171915;
}

.projector-thumb--mono small {
  align-self: start;
  padding: .3rem .4rem;
  background: #171915;
  color: #f4f0e6;
  font: 700 .7rem/1 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.projector-thumb--ice b {
  font-size: clamp(2rem, 4vw, 3.5rem);
}

.projector-thumb--ice small {
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.projector-machine {
  position: relative;
  min-height: 0;
  background: linear-gradient(90deg, #111511, #242a24 58%, #0d110e);
}

.projector-machine-art {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 2;
  width: clamp(10.5rem, 13vw, 12.5rem);
  max-width: none;
  height: auto;
  filter: drop-shadow(0 .65rem .8rem rgb(0 0 0 / 38%));
  pointer-events: none;
  transform: translate(0, -61%);
  user-select: none;
  -webkit-user-drag: none;
}

.projector-lens {
  position: absolute;
  top: 50%;
  left: clamp(9.75rem, 12.1vw, 11.6rem);
  z-index: 4;
  width: 2.2rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 246 199 / 72%) 0 14%, rgb(228 215 165 / 28%) 30%, transparent 68%);
  mix-blend-mode: screen;
  opacity: .22;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.projector-stage {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: clamp(var(--space-4), 3vw, var(--space-6));
  --projector-beam-origin: clamp(6.25rem, 7.3vw, 7.15rem);
  background: linear-gradient(135deg, #182124, #26363a 52%, #151e21);
}

.projector-stage::before,
.projector-stage::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  transform-origin: left center;
}

.projector-stage::before {
  clip-path: polygon(var(--projector-beam-origin) 48.4%, 100% 7%, 100% 93%, var(--projector-beam-origin) 51.6%);
  background: linear-gradient(90deg, rgb(248 238 190 / 72%), rgb(226 228 196 / 34%) 58%, rgb(238 232 200 / 12%));
  filter: blur(.3rem);
  opacity: .5;
}

.projector-stage::after {
  clip-path: polygon(var(--projector-beam-origin) 46%, 100% 0, 100% 100%, var(--projector-beam-origin) 54%);
  background: linear-gradient(90deg, rgb(159 194 190 / 34%), rgb(128 166 173 / 12%) 64%, transparent);
  filter: blur(.8rem);
  opacity: .3;
}

.projector-group {
  position: absolute;
  top: clamp(var(--space-3), 2vw, var(--space-4));
  /* flush with the screen's left edge, clear of the beam */
  left: calc(clamp(var(--space-4), 3vw, var(--space-6)) + clamp(7rem, 9vw, 8rem));
  z-index: 3;
  margin: 0;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
  font: 700 .625rem/1.2 var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  pointer-events: none;
}

.projector-screen {
  position: relative;
  z-index: 2;
  height: 100%;
  min-height: 0;
  margin-left: clamp(7rem, 9vw, 8rem);
  overflow: hidden;
  background: var(--paper-raised);
  box-shadow: 0 var(--space-4) calc(var(--space-8) * 1.5) rgb(0 0 0 / 42%);
}

.projector-panel,
.projector-panel > a {
  height: 100%;
  min-height: 0;
}

.projector-panel[hidden] {
  display: none;
}

.projector-panel > a {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  color: inherit;
  text-decoration: none;
}

.projector-panel > a:focus-visible {
  outline: var(--line-strong) solid var(--cinnabar);
  outline-offset: calc(var(--space-1) * -1);
}

.folio-media {
  --folio-wash: var(--folio-sheen);
  position: relative;
  isolation: isolate;
  display: block;
  min-height: 0;
  overflow: hidden;
  background: var(--business-dark);
}

.folio-media::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background: linear-gradient(135deg, var(--folio-wash), transparent 52%);
  opacity: .12;
  pointer-events: none;
}

.folio-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.folio-copy {
  position: relative;
  z-index: 2;
  padding: var(--space-3);
  background: var(--paper-raised);
}

.folio-copy p {
  margin: 0 0 var(--space-1);
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .035em;
  line-height: 1.4;
  text-transform: uppercase;
}

.folio-copy h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  font-weight: 650;
  letter-spacing: -.04em;
  line-height: 1;
}


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

.folio-entry--counterline .folio-copy h2 {
  font-family: var(--business-font-counterline);
  font-weight: 400;
}

.folio-entry--mono-color .folio-copy h2 {
  font-family: var(--business-font-counterline);
  font-weight: 400;
  text-transform: uppercase;
}

.folio-entry--red-spur .folio-copy h2 {
  font-family: var(--business-font-red-spur);
  font-weight: 700;
}

.folio-entry--arc-form .folio-copy h2 {
  font-family: var(--business-font-arc-form);
  font-weight: 650;
}

.folio-entry--counterline .folio-media {
  --folio-wash: color-mix(in srgb, var(--celadon) 30%, transparent);
}

.folio-entry--red-spur .folio-media {
  --folio-wash: color-mix(in srgb, var(--cinnabar) 18%, transparent);
}

.folio-entry--arc-form .folio-media {
  --folio-wash: color-mix(in srgb, var(--paper) 22%, transparent);
}


.folio-entry--ice-cube .folio-media {
  --folio-wash: color-mix(in srgb, #1846d8 12%, transparent);
}


.mono-color-preview {
  min-height: clamp(30rem, 52vw, 48rem);
  background: #171915;
  color: #f4f0e6;
}

.mono-color-preview::after {
  display: none;
}

.mono-preview-poster {
  position: relative;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  padding: clamp(var(--space-4), 4vw, var(--space-7));
  background: #171915;
}

.mono-preview-index,
.mono-preview-note {
  position: absolute;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: clamp(.55rem, .8vw, .72rem);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.mono-preview-index {
  top: 5%;
  left: 5%;
}

.mono-preview-note {
  right: 5%;
  bottom: 4%;
  color: #b9b7ae;
}

.mono-preview-strip {
  position: absolute;
  inset: 12% 5% 16%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.45rem, 1.4vw, 1.2rem);
}

.mono-preview-film {
  position: relative;
  min-width: 0;
  background-position: center;
  background-size: cover;
  box-shadow: 0 16px 28px rgb(0 0 0 / 32%);
}

.mono-preview-film--tenet {
  background-image: url("nolan-posters/tenet-editorial-v5.webp?v=5");
}

.mono-preview-film--inception {
  background-image: url("nolan-posters/inception-editorial-v4.webp?v=4");
}

.mono-preview-film--interstellar {
  background-image: url("nolan-posters/interstellar-black-hole-v5.webp?v=5");
}

.mono-preview-film > span {
  position: absolute;
  right: 6%;
  bottom: 3.5%;
  left: 6%;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .35rem;
  color: #171915;
  line-height: .85;
  text-transform: uppercase;
}

.mono-preview-film b {
  font-family: var(--business-font-counterline);
  font-size: clamp(.8rem, 2.1vw, 1.8rem);
  font-weight: 400;
  letter-spacing: -.02em;
}

.mono-preview-film small {
  font-family: var(--font-mono);
  font-size: clamp(.42rem, .7vw, .62rem);
  font-weight: 700;
  letter-spacing: .05em;
}

.mono-preview-film--tenet b {
  color: #173ae3;
}

.mono-preview-film--inception b {
  color: #c83232;
}

.mono-preview-film--interstellar b {
  color: #8f432e;
}

.projector-media.mono-color-preview {
  height: 100%;
  min-height: 0;
}




.business-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-5) var(--space-7);
  border-top: var(--line-thin) solid var(--business-rule);
}

@media (prefers-reduced-motion: no-preference) {
  .projector-film-frame button,
  .projector-thumb img {
    transition: border-color 180ms var(--ease-out), color 180ms var(--ease-out), transform 180ms var(--ease-out);
  }

  .projector-lens,
  .projector-stage::before,
  .projector-stage::after {
    transition: opacity 160ms var(--ease-out);
  }

  [data-projecting] .projector-lens {
    opacity: .72;
  }

  [data-projecting] .projector-stage::before {
    opacity: .72;
  }

  [data-projecting] .projector-stage::after {
    opacity: .4;
  }

  .projector-film-frame button:hover .projector-thumb img,
  .projector-film-frame button:focus-visible .projector-thumb img {
    transform: scale(1.02);
  }

  .projector-panel:not([hidden]) {
    animation: projection-arrive 180ms var(--ease-out) both;
  }

  @keyframes projection-arrive {
    from { opacity: .35; }
    to { opacity: 1; }
  }
}

@media (max-width: 50rem) {
  .business-masthead {
    align-items: flex-start;
    flex-direction: column;
  }

  .business-masthead nav {
    gap: var(--space-3);
  }

  .business-masthead nav a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }

  .business-projector {
    height: auto;
    min-height: 0;
  }


  .projector-layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(22rem, 48svh) minmax(10rem, 22svh);
  }

  .projector-stage {
    order: 1;
    padding: var(--space-3);
  }

  .projector-stage::before,
  .projector-stage::after {
    inset: 0;
    transform-origin: bottom center;
  }

  .projector-stage::before {
    clip-path: polygon(48.5% 100%, 6% 0, 94% 0, 51.5% 100%);
  }

  .projector-stage::after {
    clip-path: polygon(45% 100%, 0 0, 100% 0, 55% 100%);
  }

  .projector-screen {
    margin: 0;
  }

  .projector-reel {
    order: 2;
    display: block;
  }

  .projector-reel::before {
    position: absolute;
    inset: 0 0 auto;
    z-index: 5;
    height: .65rem;
    content: "";
    background:
      linear-gradient(90deg, transparent 46%, rgb(244 226 170 / 68%) 46% 54%, transparent 54%),
      #10140f;
    box-shadow: inset 0 var(--line-thin) rgb(194 211 197 / 18%);
    pointer-events: none;
  }

  .projector-machine {
    display: none;
  }

  .projector-film-window {
    height: 100%;
  }

  .projector-film-window::before,
  .projector-film-window::after {
    left: 0;
    width: 100%;
    height: .65rem;
    background: repeating-linear-gradient(
      90deg,
      var(--film-stock) 0 .7rem,
      transparent .7rem 1.05rem
    );
  }

  .projector-film-window::before {
    top: .6rem;
  }

  .projector-film-window::after {
    top: auto;
    right: auto;
    bottom: .6rem;
  }

  .projector-film-track {
    grid-auto-columns: min(44vw, 11rem);
    grid-auto-flow: column;
    grid-auto-rows: 1fr;
    gap: var(--space-3);
    --reel-gutter: calc(50% - 5.5rem);
    padding: 2rem var(--reel-gutter);
    /* Below 44rem the shared listener docks in this corner, over the right
       end of the strip. Reserve the 56px of edge the resting disc occupies —
       the same reserve the copy columns leave it — past the last frame, so
       every frame can be scrolled out from under the vinyl. */
    padding-inline-end: calc(var(--reel-gutter) + var(--reel-dock-reserve, 0px));
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-padding: 0 calc(50% - 5.5rem);
    overscroll-behavior-x: contain;
  }

  .projector-film-frame {
    height: auto;
    scroll-snap-align: center;
  }

  .projector-film-leader {
    display: none;
  }

  /* below the beam there is no wall margin, so the group name takes its
     own row above the screen instead of floating over the photograph */
  .projector-stage {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: var(--space-2);
  }

  .projector-group {
    position: static;
  }

  .projector-screen {
    height: auto;
  }

  .folio-copy > span {
    font-size: .8125rem;
  }


  .business-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* 44rem is where business-chrome.css moves the listener from the middle of the
   right edge down into the bottom-right corner, onto the film strip. */
@media (max-width: 44rem) {
  .projector-film-track {
    --reel-dock-reserve: 3.5rem;
  }
}

@media (max-width: 28rem) {
  .projector-layout {
    grid-template-rows: minmax(22rem, 48svh) 10rem;
  }

  .projector-film-track {
    grid-auto-columns: min(56vw, 10rem);
    --reel-gutter: calc(50% - 5rem);
    scroll-padding-inline: calc(50% - 5rem);
  }
}