/* BRAVAS Concept A: the lightbox */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-wdth.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Narrow";
  src: url("fonts/archivo-narrow-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nanum Brush Script";
  src: url("fonts/nanum-brush-script-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ground: #f6f6f2;
  --ground-lit: #fcfcfa;
  --rebate: #0f0e0d;
  --amber: #e9b44c;
  --ink: #141210;
  --pencil: #c40510;
  --brick: #9d1819;
  --cream: #edddc4;
  --ink-soft: color-mix(in srgb, var(--ink) 76%, var(--ground));
  --rule: color-mix(in srgb, var(--ink) 22%, var(--ground));
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --mark: 0.75rem;
  --gutter: clamp(1rem, 4.5vw, 4rem);
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-code: "Archivo Narrow", "Arial Narrow", Arial, sans-serif;
  --font-brush: "Nanum Brush Script", "Segoe Script", cursive;
  --band-t: 8px;
  --band-b: 16px;
  --gap: 6px;
  --row-gap: 8px;
  --leader: clamp(72px, 6vw, 88px);
  --lens: clamp(170px, 16vw, 230px);
  --zoom: 2.4;
  --bar-h: 0px;
  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--ink) var(--ground);
  scrollbar-width: thin;
  caret-color: var(--pencil);
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--ground);
}
::-webkit-scrollbar-thumb {
  background: var(--ink);
  border: 2px solid var(--ground);
  border-radius: 6px;
}

::selection {
  background: var(--pencil);
  color: var(--cream);
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 450;
  font-stretch: 100%;
  font-size: 1rem;
  line-height: 1.55;
  overflow-x: clip;
}

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

a {
  color: inherit;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--pencil);
  outline-offset: 3px;
  border-radius: 2px;
}

p,
dd,
dt {
  margin: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 100;
  padding: 0.6rem 0.9rem;
  background: var(--ink);
  color: var(--ground);
  transform: translateY(-200%);
}
.skip:focus-visible {
  transform: none;
  outline-color: var(--amber);
}

.defs {
  position: absolute;
  pointer-events: none;
}

/* Type */
.display {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: -0.02em;
  line-height: 0.98;
  text-wrap: balance;
}

.brush {
  font-family: var(--font-brush);
  font-weight: 400;
  color: var(--pencil);
  letter-spacing: 0;
}

.code {
  display: inline-block;
  padding: 0.28em 0.55em 0.2em;
  background: var(--rebate);
  color: var(--amber);
  font-family: var(--font-code);
  font-weight: 600;
  font-size: var(--mark);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.lead {
  max-width: 46ch;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* Grease pencil marks */
.grease {
  stroke: var(--pencil);
}
.draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

/* Masthead: stamp and booking box */
.stamp {
  position: absolute;
  z-index: 30;
  left: var(--gutter);
  top: calc(var(--bar-h) + clamp(1rem, 2.4vw, 1.75rem));
  display: grid;
  place-items: center;
  min-width: 4.4rem;
  padding: 0.55rem 0.8rem 0.45rem;
  background: var(--brick);
  color: var(--cream);
  font-weight: 900;
  font-stretch: 112%;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-decoration: none;
  transform: rotate(-3deg);
  box-shadow: inset 0 0 0 2px var(--brick), inset 0 0 0 3.5px color-mix(in srgb, var(--cream) 55%, var(--brick)),
    0 1px 2px rgb(20 18 16 / 0.3), 0 12px 22px -12px rgb(20 18 16 / 0.5);
  transition: transform 0.4s var(--ease);
}
.stamp:hover {
  transform: rotate(-1deg) scale(1.03);
}
.stamp:focus-visible {
  outline-offset: 4px;
}

.book {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 12.5rem;
  height: 3.6rem;
  color: var(--pencil);
  text-decoration: none;
  transition: transform 0.35s var(--ease);
}
.book--fixed {
  position: fixed;
  z-index: 40;
  top: calc(var(--bar-h) + 0.9rem);
  right: clamp(0.75rem, 2vw, 1.5rem);
  width: clamp(9.5rem, 13vw, 12rem);
  height: clamp(2.9rem, 3.8vw, 3.5rem);
  transition: transform 0.35s var(--ease), opacity 0.3s ease;
}
.book--fixed.is-away {
  opacity: 0;
  pointer-events: none;
}
.book--lg {
  width: min(100%, 22rem);
  height: 6rem;
}
.book-box {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  background: var(--ground);
  filter: drop-shadow(0 8px 12px rgb(20 18 16 / 0.22));
}
.book-box .grease {
  fill: none;
  stroke-width: 4.5;
  vector-effect: non-scaling-stroke;
}
.book-box path {
  vector-effect: non-scaling-stroke;
  transition: stroke-width 0.3s var(--ease);
}
.book-box .box-second {
  stroke-width: 2.2;
  opacity: 0.6;
}
.book-label {
  position: relative;
  font-size: clamp(1.45rem, 2.1vw, 1.9rem);
  line-height: 1;
  white-space: nowrap;
  padding-top: 0.12em;
}
.book--lg .book-label {
  font-size: clamp(2rem, 4vw, 2.9rem);
}
.book--lg .book-box {
  background: none;
  filter: none;
}
.book:hover {
  transform: rotate(-1.5deg) scale(1.04);
}
.book:hover .book-box path {
  stroke-width: 6;
}
.book:hover .book-box {
  background: color-mix(in srgb, var(--pencil) 7%, var(--ground));
}

/* Stage: the lightbox sheet */
.stage {
  /* 8 cells span 80% of the viewport (max 1600px), capped by what six strips leave of the height */
  --cw-w: calc((min(100vw, 1600px) * 0.8 - var(--leader)) / 8 - var(--gap));
  --cw-h: calc((100svh - 436px) / 4);
  --cw: clamp(84px, min(var(--cw-w), var(--cw-h)), 190px);
  --fh: calc(var(--cw) / 1.5);
  position: relative;
  min-height: 100svh;
  padding: clamp(3.4rem, 4vw, 3.8rem) var(--gutter) 4rem;
  overflow-x: clip;
  background:
    radial-gradient(110% 85% at 50% 42%, var(--ground-lit) 0%, var(--ground) 58%, #eeeee8 100%);
}
.stage-inner {
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
}
.lede {
  width: 0;
  min-width: 100%;
  margin-bottom: clamp(0.5rem, 1vw, 0.8rem);
  text-align: right;
}
.headline {
  font-size: clamp(1.85rem, 3.4vw, 3.9rem);
}
.headline-line {
  display: block;
}
.headline-sub {
  display: block;
  margin-top: 0.06em;
  margin-right: 0.15em;
  font-size: 0.78em;
  line-height: 1;
  font-stretch: 100%;
  transform: rotate(-2.5deg);
  transform-origin: right center;
}

.sheet {
  position: relative;
  display: grid;
  gap: var(--row-gap);
  width: max-content;
  max-width: 100%;
  isolation: isolate;
}
.sheet.is-loupe {
  cursor: none;
}

.strip {
  position: relative;
  display: flex;
  width: max-content;
  max-width: 100%;
  background: var(--rebate);
  border-radius: 2px;
  transform: translateX(var(--dx)) rotate(var(--tilt));
  box-shadow: 0 1px 2px rgb(20 18 16 / 0.35), 0 16px 26px -16px rgb(20 18 16 / 0.55);
  overflow-x: clip;
  overflow-y: visible;
}
.strip.is-cut {
  clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 30%, 100% 56%, calc(100% - 4px) 100%, 0 100%);
}
.strip:nth-child(1) { z-index: 6; }
.strip:nth-child(2) { z-index: 5; }
.strip:nth-child(3) { z-index: 4; }
.strip:nth-child(4) { z-index: 3; }
.strip:nth-child(5) { z-index: 2; }
.strip:nth-child(6) { z-index: 1; }

.leader {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  width: var(--leader);
  margin: 0;
  padding: var(--band-t) 6px var(--band-b) 12px;
  background: var(--rebate);
  border: 0;
  cursor: pointer;
  color: var(--amber);
  font-family: var(--font-code);
  font-weight: 600;
  font-size: var(--mark);
  line-height: 1.05;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.leader-label {
  display: block;
}
.leader:hover .leader-label {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
.leader:focus-visible {
  outline-color: var(--amber);
  outline-offset: -4px;
}

.frames {
  position: relative;
  flex: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--cw);
  gap: var(--gap);
  margin: 0;
  padding: 0 10px 0 0;
  list-style: none;
}
/* sprocket holes ride on the frames: the lightbox shows through them */
.frames::before,
.frames::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 4'%3E%3Crect x='1' width='6' height='4' rx='1.1' fill='%23f6f6f2'/%3E%3C/svg%3E");
  background-size: calc((var(--cw) + var(--gap)) / 5) 4px;
  background-position: 6px 0;
  background-repeat: repeat-x;
}
.frames::before {
  top: 2px;
}
.frames::after {
  bottom: 2px;
}
.cell {
  position: relative;
  display: grid;
  grid-template-rows: var(--band-t) auto var(--band-b);
  cursor: pointer;
}
.frame-wrap {
  position: relative;
  grid-row: 2;
  aspect-ratio: 3 / 2;
}
.frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #1c1a18;
  transform-origin: center;
  transition: transform 0.9s var(--ease), box-shadow 0.9s var(--ease);
}
.frame img,
.frame .loop {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cell:not(.is-lifted):hover .frame {
  filter: brightness(1.12) saturate(1.08);
}
.fn {
  grid-row: 3;
  padding-top: 1px;
  color: var(--amber);
  font-family: var(--font-code);
  font-weight: 600;
  font-size: var(--mark);
  line-height: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  user-select: none;
}

/* The select: circled frame that lifts and plays */
.cell.is-select {
  z-index: 8;
}
.is-select .loop {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.is-select.is-lifted .loop {
  opacity: 1;
}
.is-select.is-lifted .frame {
  transform: scale(1.55);
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.4), 0 26px 44px -14px rgb(0 0 0 / 0.65);
  z-index: 3;
}
.is-select.is-lifted {
  z-index: 12;
}

/* Grease pencil: one mark per roll */
.ring,
.mark {
  position: absolute;
  overflow: visible;
  pointer-events: none;
  z-index: 4;
}
.ring {
  left: 50%;
  top: 50%;
  width: 235%;
  height: 215%;
  transform: translate(-50%, -50%);
}
.ring .grease {
  stroke-width: 7;
}
.ring .draw-b {
  stroke-width: 3.5;
  opacity: 0.5;
}
.mark .grease {
  stroke-width: 5.5;
}
.mark-circle,
.mark-crop {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.mark-circle {
  width: 142%;
  height: 130%;
}
.mark-crop {
  width: 112%;
  height: 118%;
}
.mark-tick {
  right: -4%;
  bottom: -14%;
  width: 40%;
  height: 62%;
}
.mark-tick .grease {
  stroke-width: 6.5;
}

.note {
  position: absolute;
  left: calc(var(--leader) + var(--cw) * 0.2);
  bottom: calc(100% + 30px);
  z-index: 60;
  display: flex;
  align-items: flex-end;
  gap: 0.2em;
  pointer-events: none;
  transform: rotate(-5deg);
  transform-origin: left bottom;
  transition: opacity 0.3s ease;
}
.note-away .note {
  opacity: 0;
}
.note-text {
  display: block;
  font-size: clamp(1.7rem, 2.6vw, 2.6rem);
  line-height: 1;
  white-space: nowrap;
}
.note-arrow {
  width: clamp(1.8rem, 3vw, 2.8rem);
  overflow: visible;
  margin-bottom: -0.9em;
}
.note-arrow .grease {
  stroke-width: 5;
}

@keyframes draw-on {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes write-on {
  from { clip-path: inset(-30% 100% -30% -6%); }
  to { clip-path: inset(-30% -6% -30% -6%); }
}

@media (prefers-reduced-motion: no-preference) {
  .js .ring .draw-a {
    animation: draw-on 1.5s var(--ease) 0.5s both;
  }
  .js .ring .draw-b {
    animation: draw-on 1.1s var(--ease) 1.15s both;
  }
  .js .note-text {
    animation: write-on 1s var(--ease) 1.8s both;
  }
  .js .note-arrow .draw {
    animation: draw-on 0.7s var(--ease) 2.5s both;
  }
  .js .mark .draw {
    animation: draw-on 0.9s var(--ease) var(--d, 2.2s) both;
  }
}

/* Loupe */
.loupe {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 40;
  width: var(--lens);
  height: var(--lens);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
  will-change: transform;
}
.loupe.is-on {
  opacity: 1;
}
.lens {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
  background: var(--ground);
  box-shadow: 0 0 0 5px var(--ink), 0 0 0 6.5px color-mix(in srgb, var(--ground) 70%, transparent),
    0 22px 32px -12px rgb(20 18 16 / 0.55);
}
.lens::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 22%, rgb(255 255 255 / 0.32), transparent 32%),
    linear-gradient(var(--pencil), var(--pencil)) center / 14px 1.5px no-repeat,
    linear-gradient(var(--pencil), var(--pencil)) center / 1.5px 14px no-repeat;
}
.loupe-handle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: calc(var(--lens) * 0.5);
  margin-left: -6px;
  border-radius: 6px;
  background: var(--ink);
  transform-origin: 6px 0;
  transform: rotate(-45deg) translateY(calc(var(--lens) * 0.5 + 4px));
  z-index: -1;
}
.loupe-sheet {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  pointer-events: none;
}
.loupe-sheet *,
.loupe-sheet *::before,
.loupe-sheet *::after {
  animation: none !important;
  transition: none !important;
}

/* Tablet and phone: each strip scrolls sideways with its sprockets, loupe off */
@media (max-width: 899px) {
  :root {
    --leader: 88px;
    --row-gap: 14px;
    --band-t: 12px;
    --band-b: 20px;
  }
  .stage {
    --cw: clamp(96px, 28vw, 150px);
    min-height: 0;
    padding-top: calc(5.4rem + var(--bar-h));
    padding-bottom: 5rem;
  }
  .stage-inner,
  .sheet {
    width: 100%;
  }
  .sheet {
    grid-template-columns: minmax(0, 1fr);
  }
  .lede {
    margin-bottom: 3.6rem;
  }
  .strip {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-padding-left: var(--leader);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .strip::-webkit-scrollbar {
    display: none;
  }
  .cell {
    scroll-snap-align: start;
  }
  .leader {
    position: sticky;
    left: 0;
    z-index: 3;
  }
  .headline {
    font-size: clamp(1.7rem, 7.6vw, 3.4rem);
  }
  .is-select.is-lifted .frame {
    transform: scale(1.3);
  }
  .ring {
    width: 158%;
    height: 132%;
  }
  .mark-circle {
    width: 128%;
    height: 118%;
  }
  .mark-crop {
    width: 106%;
    height: 112%;
  }
  .mark-tick {
    right: 0;
    bottom: -6%;
  }
  .note {
    left: calc(var(--leader) + var(--cw) * 0.1);
    bottom: calc(100% + 4px);
  }
  .book--fixed {
    width: 9.5rem;
    height: 2.9rem;
  }
  .loupe {
    display: none;
  }
}

@media (pointer: coarse) {
  .loupe {
    display: none;
  }
}