/* /sample: the LUNDE sample ad, in the site's "Contact Sheet" design.
   Loads after /styles.min.css and only adds what this page needs: the projector (a vertical film reel
   around the video), the six-frame contact strip and the language switch. */

/* 01 the reel */
/* desktop: headline and copy on the left, the reel on the right; narrower screens: headline, reel, then copy */
.s-hero { position: relative; min-height: 100svh; max-width: var(--max); margin: 0 auto; padding: 120px var(--pad) 56px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head reel" "body reel"; column-gap: clamp(28px, 5vw, 80px); row-gap: 26px; align-content: center }
.s-head { grid-area: head; display: grid; gap: 24px; align-self: end }
.s-body { grid-area: body; display: grid; gap: 24px; align-content: start }
.s-head h1 { font-size: clamp(54px, 6.4vw, 100px) }
.s-head h1 em { display: block; font-size: 1.12em; line-height: .88; margin-top: .06em }
.langs { display: flex; flex-wrap: wrap; gap: 10px }
.langs .btn { min-height: 44px }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px }

.projector { grid-area: reel; position: relative; justify-self: end; align-self: center }
.projector > .edge { position: absolute; left: 0; top: -22px; white-space: nowrap }
.projector > .edge.r { left: auto; right: 0; top: auto; bottom: -22px }
.reel { position: relative; background: #000; padding: 18px 34px; box-shadow: 0 0 0 1px #000, 0 50px 90px rgba(0,0,0,.65) }
.reel::before, .reel::after { content: ""; position: absolute; top: 0; bottom: 0; width: 13px; background: repeating-linear-gradient(180deg, transparent 0 14px, var(--film-2) 14px 27px, transparent 27px 36px) }
.reel::before { left: 10px } .reel::after { right: 10px }
.reel video { height: min(calc(100svh - 230px), 720px); min-height: 420px; width: auto; aspect-ratio: 9 / 16; object-fit: cover; background: var(--film) }
.projector .hand { position: absolute; z-index: 4; font-size: clamp(24px, 2.2vw, 32px); white-space: nowrap; transform: rotate(-7deg) }

/* 02 the contact strip */
.contact-wrap { overflow-x: auto; overflow-y: visible; padding: 46px 6px 10px; margin: -46px -6px 0; -webkit-overflow-scrolling: touch }
.contact { position: relative; min-width: 760px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; background: var(--film); padding: 34px 16px 22px; transform: rotate(-.6deg); box-shadow: 0 40px 80px rgba(0,0,0,.55), 0 0 0 1px #000 }
.contact::before, .contact::after { content: ""; position: absolute; left: 0; right: 0; height: 10px; background: repeating-linear-gradient(90deg, transparent 0 12px, #000 12px 23px, transparent 23px 30px) }
.contact::before { top: 8px } .contact::after { bottom: 4px }
.contact .fr { display: grid; gap: 8px }
.contact .fr img { aspect-ratio: 9 / 16; width: 100%; height: auto; object-fit: cover; border: 1px solid #000 }
.contact .fr figcaption { font-size: 10.5px; color: var(--soft) }
.contact .hand { position: absolute; z-index: 4; font-size: clamp(22px, 2.2vw, 30px); white-space: nowrap }

.notes { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 28px; margin-top: 44px }
.notes li { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 14px }
.notes h3 { font-size: 22px; text-transform: lowercase; display: flex; gap: 10px; align-items: baseline }
.notes h3 span { font: 500 11px var(--mono); color: var(--green); letter-spacing: .1em }
.notes p { font-size: 16px; color: var(--soft); line-height: 1.5 }

/* 03 the order */
.envelope .lead { max-width: 56ch }
.fine { line-height: 1.6 }

/* grease marks draw themselves once their strip is on screen (sample.js adds .drawn); without JS they just show */
.js .s-draw .mark.draw path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s cubic-bezier(.65, 0, .35, 1) .2s }
.js .s-draw .hand { opacity: 0; translate: 0 8px; transition: opacity .5s .9s, translate .5s .9s }
.js .s-draw.drawn .mark.draw path { stroke-dashoffset: 0 }
.js .s-draw.drawn .hand { opacity: 1; translate: 0 0 }

@media (max-width: 1100px) {
  .s-hero { grid-template-columns: 1fr; grid-template-areas: "head" "reel" "body"; min-height: 0; padding-top: 110px }
  .projector { justify-self: center; margin: 18px 0 8px }
  .reel video { height: min(calc(100svh - 160px), 720px) }
  .notes { grid-template-columns: 1fr }
}
@media (max-width: 700px) {
  .s-hero { padding-top: 96px; gap: 30px }
  .s-head { gap: 16px }
  .s-head h1 { font-size: 46px }
  .projector { max-width: 100% }
  .reel { padding: 12px 26px }
  .reel::before { left: 7px } .reel::after { right: 7px }
  /* the whole player, controls included, fits on the first screen under the headline */
  .reel video { height: min(calc(100svh - 350px), 560px); min-height: 360px; max-width: 100%; width: auto }
  .langs .btn { flex: 1; justify-content: center }
  .contact { min-width: 640px; transform: none }
}
@media (prefers-reduced-motion: reduce) {
  .js .s-draw .mark.draw path { stroke-dashoffset: 0; transition: none }
  .js .s-draw .hand { opacity: 1; translate: none; transition: none }
}