/* cut+paste — Sections */

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

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
  align-items: start;
}

.hero__meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9em;
  padding-bottom: clamp(1rem, 2.5vw, 2rem);
  border-bottom: var(--rule) solid var(--ink);
}

/* The mark. The logo file itself, run to the outer edge of .shell -- the
   gutter is cancelled so the letterforms touch the page edge without any of
   the glyph being cropped. */
.hero__mark {
  grid-column: 1 / -1;
  margin-top: clamp(1.25rem, 3vw, 2.75rem);
  /* Past the viewport edge, not to it. .hero's overflow:hidden does the crop. */
  margin-inline: calc(50% - 50vw - var(--logo-bleed));
  transform: rotate(calc(var(--tilt-hair) * -1));
  transform-origin: center;
}

.hero__logo {
  width: 100%;
  height: auto;
  display: block;
}

.hero__body {
  grid-column: 2 / span 5;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.hero__note {
  color: var(--ink-60);
  line-height: 1.7;
}

.frame--hero {
  grid-column: 7 / span 6;
  margin-top: clamp(1rem, 2vw, 2rem);
  --fr: var(--tilt-hard);
}

/* Shape placement — Bauhaus poster furniture */
.shape--circle {
  top: 6%;
  right: 4%;
}
.shape--square {
  top: 46%;
  right: 30%;
  --fr: 14deg;
}
.shape--tri {
  bottom: 12%;
  right: 12%;
  --fr: -18deg;
}
.shape--bar {
  bottom: 5%;
  left: -3%;
  --fr: -4deg;
}

@media (max-width: 1024px) {
  .hero__body {
    grid-column: 1 / span 7;
  }
  .frame--hero {
    grid-column: 4 / -1;
  }
}

@media (max-width: 768px) {
  .hero__body,
  .frame--hero {
    grid-column: 1 / -1;
  }
  .frame--hero {
    --fr: var(--tilt-soft);
  }
  .shape--square,
  .shape--tri {
    display: none;
  }
  .shape--circle {
    top: 2%;
    right: -6%;
  }
}

/* ==================== EVENTS ==================== */
/* An offcut laid on the page -- one step lighter than --paper -- cut free
   along its top and bottom edges. The change of paper is the cut line. */

.events {
  /* Half a scissors hangs past each edge, so the section's own margin and
     padding are derived from its size rather than tuned to agree with it.
     Otherwise the heading collides with the resting scissors. */
  --snip-size: clamp(84px, 12vw, 190px);
  position: relative;
  z-index: 1;
  background: var(--panel);
  margin-block: calc(var(--snip-size) / 2 + clamp(0.5rem, 1.5vw, 1.5rem));
  padding-block:
    calc(var(--snip-size) / 2 + clamp(0.75rem, 2vw, 1.75rem))
    clamp(3rem, 7vw, 6rem);
}

/* ---------- scissors ---------- */
/* js/snip.js writes --snip-p, 0 to 1, off the section's own edges crossing the
   viewport. Half the box sits outside the section, which lands the blade tip
   on the edge it is cutting. --snip-run is the travel: both edges drift a
   short way and stay on screen rather than crossing the page. */

.snip {
  --snip-p: 0;
  --snip-run: 15vw;
  position: absolute;
  width: var(--snip-size);
  height: auto;
  z-index: 4;
  pointer-events: none;
  user-select: none;
  /* Raw, the steel runs 1.57:1 against the panel and ghosts. Darkened to
     4.3:1, on the grayscale(0.5) the photographs already carry. */
  filter: grayscale(0.5) brightness(0.6) contrast(1.4);
}

.snip--top {
  top: 0;
  left: 0;
  transform:
    translate(calc(var(--snip-p) * var(--snip-run)), -50%)
    rotate(calc(var(--tilt-soft) * -1));
}

.snip--bot {
  bottom: 0;
  right: 0;
  transform:
    translate(calc(var(--snip-p) * var(--snip-run) * -1), 50%)
    rotate(var(--tilt-soft));
}

.events__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: clamp(0.75rem, 2vw, 1.25rem);
  border-bottom: var(--rule) solid var(--ink);
}

.events__count {
  color: var(--ink-60);
  padding-bottom: 0.4em;
  font-variant-numeric: tabular-nums;
}

/* ==================== PITCH ==================== */
/* Host-your-own. A yellow slab, cut on the diagonal. */

.pitch {
  margin-top: clamp(3rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 3.25rem);
  background: var(--yellow);
  border: var(--rule) solid var(--ink);
  transform: rotate(calc(var(--tilt-hair) * -1));
}

.pitch__copy {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pitch__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch;
}

.pitch .btn--ghost:hover {
  background: var(--ink);
  color: var(--yellow);
}

@media (max-width: 768px) {
  .pitch {
    grid-template-columns: 1fr;
  }
}

/* ==================== SIGNUP ==================== */

.signup {
  position: relative;
  padding-block: clamp(1rem, 3vw, 2rem) clamp(3rem, 7vw, 6rem);
}

.signup__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.signup__lede {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Horizontal plate. Sits below the copy and stays out of it -- the portrait
   crop it replaces was tall enough to ride up over the section heading. */
.frame--band {
  width: 100%;
  margin-top: 0.5rem;
  --fr: calc(var(--tilt-soft) * -1);
}

.frame--band img {
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

.form {
  border: var(--rule) solid var(--ink);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  background: var(--paper);
  transform: rotate(var(--tilt-hair));
}

/* ---------- panel variant ---------- */
/* An offcut of lighter stock laid on the page. No border and no shadow: the
   edges do the work, and no two of them are parallel. Padding is generous
   because clip-path crops anything that reaches the edge, focus rings
   included. */
.form--panel {
  border: none;
  background: var(--panel);
  padding: clamp(3rem, 5vw, 4rem) clamp(1.75rem, 3.5vw, 2.75rem) clamp(2rem, 4vw, 3rem);
  clip-path: polygon(
    2.6% 0.4%,
    99.6% 3.2%,
    96.4% 99.6%,
    0.4% 95.2%
  );
}

@media (max-width: 768px) {
  .signup__inner {
    grid-template-columns: 1fr;
  }
  .frame--band img {
    aspect-ratio: 16 / 9;
  }
}

/* ==================== SHOP TEASER ==================== */
/* Thin angled band. Not a section — a strip of tape across the page. */

.teaser {
  position: relative;
  margin-block: clamp(2.5rem, 7vw, 6rem);
  min-height: clamp(9.25rem, 13.5vw, 12.75rem);
  padding-block: 1.5rem;
  background: var(--orange);
  border-block: var(--rule) solid var(--ink);
  transform: rotate(var(--tilt-soft)) scale(1.06);
  /* Not overflow: hidden -- that clips all four edges. The kit stands proud of
     the top rule and is cut off by the bottom one, so the clip box is open
     upward and tight on the other three sides. */
  clip-path: inset(-100vh 0 0 0);
  display: flex;
  align-items: center;
  /* The one shadow on the site, and it is inside. Bottom edge only: the band
     reads as a ledge the kit materials rest on, not a channel they sink into. */
  box-shadow: inset 0 -14px 22px -14px rgba(17, 17, 17, 0.55);
}

/* The crawl runs at full tilt and drops to roughly half speed on hover --
   js/main.js does it with Animation.updatePlaybackRate, which changes the rate
   without moving the playhead. Re-declaring animation-duration here would jump
   the track: progress is elapsed-time-over-duration, so a new duration
   re-resolves the position of an animation that has been running for minutes. */
.teaser__track {
  position: relative;
  z-index: 1;
  display: flex;
  width: max-content;
  animation: teaser-roll 42s linear infinite;
}

@keyframes teaser-roll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Set in Archivo's narrow cut. The width axis is why the font ships with both
   axes rather than pinned to 100 -- see rundown.md, Design system. */
.teaser__item {
  padding-inline: 2.5rem;
  white-space: nowrap;
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 75%;
  font-size: clamp(1.7rem, 3vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* Kit materials sit in the channel, bottoms near the lower rule and tops
   cropped by the band. Sized off the band's own height so they scale with it;
   both axes are maxima so the cutouts keep their ratio when the reset's
   `max-width: 100%` binds. */
.teaser__kit {
  position: absolute;
  width: auto;
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

/* Centred on the band rather than pinned to either rule, so it holds position
   whatever the band's height: it stands proud of the top and its base is cut
   off by the bottom. The 1.25deg is relative to the band, which carries
   --tilt-soft of its own. */
.teaser__kit--crates {
  top: 50%;
  left: clamp(1rem, 6vw, 5rem);
  max-height: 145%;
  transform: translateY(-50%) rotate(var(--tilt-soft));
  z-index: 2;
}

.teaser__kit--scissors1 {
  bottom: -8%;
  left: 28%;
  max-height: 164%;
  transform: rotate(calc(var(--tilt-hard) * -1));
  z-index: 0;
}

.teaser__kit--glue {
  bottom: 18%;
  left: 46%;
  max-height: 96%;
  transform: rotate(var(--tilt-soft));
  z-index: 0;
}

/* Clear of the right-hand fade, which sits a z-index above the scattered
   cutouts and would wash this one to flat orange. */
.teaser__kit--scissors2 {
  bottom: -4%;
  left: 64%;
  max-height: 148%;
  transform: rotate(var(--tilt-hard));
  z-index: 0;
}


/* The marquee runs under the link, so it fades into the band before it gets
   there rather than colliding with it. */
.teaser::after {
  content: "";
  position: absolute;
  inset-block: 0;
  right: 0;
  width: clamp(9rem, 24vw, 24rem);
  background: linear-gradient(90deg, transparent, var(--orange) 58%);
  z-index: 1;
  pointer-events: none;
}


.teaser__link {
  position: absolute;
  right: clamp(1rem, 4vw, 3rem);
  top: 50%;
  transform: translateY(-50%);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--step-control);
  padding: 0.85em 1.4em;
  border-radius: 9999px;
  white-space: nowrap;
  z-index: 3;
  transition: transform 0.18s var(--ease-snap);
}

.teaser__link:hover {
  transform: translateY(-50%) rotate(calc(var(--tilt-soft) * -1)) scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .teaser__track {
    animation: none;
  }
}

/* Mobile drops the crawl entirely: the three lines stack and read, left-
   justified against the crate rather than travelling past it, with the link
   below them. The band grows to fit rather than the type shrinking to it. */
@media (max-width: 768px) {
  .teaser {
    display: block;
    min-height: 0;
    padding-block: clamp(1.5rem, 5vw, 2.5rem);
  }

  /* One cutout at mobile. Four in a band this narrow is clutter behind type.
     Sized to overrun the band's bottom so the crate's cut-off edge stays
     hidden, then bled off the left so a crate that tall still leaves the type
     a column to sit in. */
  /* Tall enough to stand proud of the top rule and be cut off by the bottom
     one, which makes it wider than the space beside the type -- so it is hung
     from its right edge, just inside the type column, and bleeds off the left
     by whatever it needs. A left offset cannot do this: it is a percentage of
     the band, so it grows as the viewport does while the crate, sized off a
     band that wraps less, shrinks. Between 500 and 768 that put the crate off
     the page entirely. */
  .teaser__kit--crates {
    left: auto;
    right: 64%;
    width: auto;
    height: calc(100% + 2rem);
    max-height: none;
  }

  .teaser__kit--scissors1,
  .teaser__kit--glue,
  .teaser__kit--scissors2,
  .teaser::after {
    display: none;
  }

  .teaser__track {
    animation: none;
    width: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5em;
    padding-left: 40%;
    padding-right: var(--gutter);
  }

  /* The track carries two identical runs for the loop; only one is read. */
  .teaser__item:nth-child(n + 4) {
    display: none;
  }

  .teaser__item {
    padding-inline: 0;
    white-space: normal;
    font-size: clamp(1.05rem, 5.2vw, 1.6rem);
  }

  /* The band is scaled 1.06, so the pill renders 6% wider than it measures --
     it has to be tightened here or it runs past the viewport edge. */
  .teaser__link {
    position: static;
    display: inline-flex;
    transform: none;
    margin-top: 1.25rem;
    margin-left: 40%;
    padding-inline: 1.1em;
  }

  .teaser__link:hover {
    transform: rotate(calc(var(--tilt-soft) * -1)) scale(1.04);
  }
}

/* ==================== ABOUT ==================== */

.about {
  padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 7vw, 6rem);
}

.about__inner {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

.about__tag {
  grid-column: 1 / -1;
  color: var(--ink-60);
  padding-bottom: 0.75rem;
  border-bottom: var(--rule) solid var(--ink);
}

/* Big, airy statement type — not body copy */
.about__copy {
  grid-column: 1 / span 7;
  font-size: clamp(1.25rem, 2.6vw, 2.1rem);
  line-height: 1.28;
  letter-spacing: -0.015em;
  font-weight: 400;
}

/* ---------- photo stack ---------- */
/* A pile of prints. Clicking one brings it to the top; js/main.js only ever
   moves the --z of the card it was given. */

.stack {
  grid-column: 8 / span 5;
  position: relative;
  aspect-ratio: 4 / 3.7;
  margin-top: clamp(0.5rem, 2vw, 1.5rem);
}

.stack__card {
  position: absolute;
  width: 58%;
  z-index: var(--z, 1);
  transform: rotate(var(--r, 0deg));
  transform-origin: center;
  cursor: pointer;
  transition: transform 0.28s var(--ease-out);
}

.stack__card:hover,
.stack__card:focus-visible {
  transform: rotate(var(--r, 0deg)) scale(1.035);
}

.stack__card:nth-child(1) { top: 0;   left: 0;   --r: -6deg;  --z: 1; }
.stack__card:nth-child(2) { top: 6%;  left: 34%; --r: 4.5deg; --z: 2; }
.stack__card:nth-child(3) { top: 27%; left: 2%;  --r: 2deg;   --z: 3; }
.stack__card:nth-child(4) { top: 41%; left: 40%; --r: -3deg;  --z: 4; }
.stack__card:nth-child(5) { top: 59%; left: 15%; --r: 5.5deg; --z: 5; }

/* Whichever card was clicked last */
.stack__card.is-top {
  --z: 20;
}

@media (max-width: 900px) {
  .about__copy {
    grid-column: 1 / -1;
  }
  .stack {
    grid-column: 1 / -1;
    aspect-ratio: 4 / 3;
  }
  .stack__card {
    width: 52%;
  }
}

@media (max-width: 560px) {
  .stack {
    aspect-ratio: 3 / 3.2;
  }
  .stack__card {
    width: 60%;
  }
}

/* ==================== FOOTER ==================== */

.foot {
  margin-top: clamp(2rem, 5vw, 4rem);
  background: var(--paper);
  padding-bottom: 2.5rem;
}

.foot__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-block: clamp(2rem, 4vw, 3rem);
  align-items: start;
}

/* Sized to the mark, not to the old circle's footprint — the clamp is the
   previous one scaled by 432/1026.1, so the stamp renders the same size it
   did and only its alignment changes. */
.foot__stamp {
  width: clamp(79px, 8.42vw, 116px);
  height: auto;
  transform: rotate(calc(var(--tilt-hard) * -1));
}

/* Matches the ghosted dividers under the Chapters and Elsewhere heads, so the
   logo column is separated on the same terms as the link columns. */
.foot__col > .rule-hair {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
}

/* The studio's wordmark, under the stamp. Tilted the opposite way from the
   stamp's --tilt-hard, and a register softer, so the pair reads hand-placed
   rather than locked up. */
.foot__context {
  display: block;
  width: clamp(72px, 7.6vw, 105px);
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  transform: rotate(var(--tilt-soft));
  transform-origin: left center;
}

.foot__context img {
  width: 100%;
  height: auto;
}

.foot__col > .nano {
  padding-bottom: 0.9rem;
  margin-bottom: 0.9rem;
  border-bottom: var(--rule-hair) solid var(--ink-12);
}

.foot__list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.foot__list a {
  display: inline-block;
  transition: color 0.18s linear, transform 0.18s var(--ease-snap);
}

.foot__list a:hover {
  color: var(--orange);
  transform: translateX(3px);
}

/* City name carries its chapter dot */
.foot__city {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}

.foot__city::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c, var(--ink));
  flex: none;
}

.foot__legal {
  color: var(--ink-35);
  padding-top: 1.5rem;
  border-top: var(--rule-hair) solid var(--ink-12);
}

@media (max-width: 900px) {
  .foot__inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .foot__inner {
    grid-template-columns: 1fr;
  }
  /* Empty in one column is a dead row plus a gap, not a held slot. */
  .foot__col--open {
    display: none;
  }
}

.foot__legal-sep {
  padding-inline: 0.5em;
  color: var(--ink-35);
}