/* "Pardon our dust" -- three additions, one file. Design: Ava (2026-10-03 mock). Ported into
   production by Jordan, same day -- the on/off flag wiring for .dust and .gate-sticker lives in
   app.js/gate.js (proprietor.json's "underConstruction"), not here.
   1. .dust        caution tape stuck just under the marquee
   2. .card--soon  roped-off sawhorse spot (overrides the dashed placeholder in style.css)
   3. .gate-sticker  tiny construction sticker on the pill gate
   Uses the tokens already in style.css (--ink, --paper, --display, --body, --hand). */

@font-face { font-family: "Big Shoulders"; src: url("fonts/BigShoulders-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --caution: #f2c12e;      /* tape yellow, warmer than safety-vest so it sits with --gold */
  --caution-dk: #d9a81c;
  --hazard-ink: #211c12;   /* --ink on --caution = 10.9:1 */
}

/* ---------- 1. caution tape ---------- */
.dust {
  position: relative; z-index: 2;
  margin-top: -9px;                         /* overlaps the marquee's gold rail: stuck ON, not placed under */
  padding: 0 clamp(8px, 3vw, 36px) 4px;
  filter: drop-shadow(0 3px 0 rgba(42, 38, 25, .28)) drop-shadow(0 8px 10px rgba(42, 38, 25, .18));
  animation: dust-slap .55s cubic-bezier(.2, 1.4, .4, 1) .25s both;
}
.dust[hidden] { display: none; }
.dust-tape {
  max-width: 1160px; margin: 0 auto; transform: rotate(-.9deg);
  display: grid; grid-template-columns: 58px 1fr auto 58px; align-items: center;
  min-height: 50px; color: var(--hazard-ink);
  background:
    /* plastic sheen + a few uneven crinkles where it was pressed down by hand */
    linear-gradient(180deg, rgba(255, 255, 255, .34) 0, rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .09) 100%),
    linear-gradient(97deg, transparent 0 21%, rgba(255, 255, 255, .22) 21.3%, transparent 22.4%),
    linear-gradient(84deg, transparent 0 63%, rgba(0, 0, 0, .05) 63.2%, rgba(255, 255, 255, .2) 63.8%, transparent 65%),
    var(--caution);
  /* torn ends: a hand-ripped zigzag on both sides */
  clip-path: polygon(
    0.6% 0, 99.4% 0, 100% 9%, 99.1% 22%, 99.8% 35%, 99.2% 49%, 100% 63%, 99.3% 77%, 99.9% 90%, 99.5% 100%,
    0.5% 100%, 0 88%, .8% 74%, .1% 60%, .9% 46%, .2% 31%, .7% 17%, 0 6%);
  border-block: 1px solid rgba(33, 28, 18, .25);
}
.dust-hazard {
  align-self: stretch;
  background: repeating-linear-gradient(-45deg, var(--hazard-ink) 0 11px, transparent 11px 22px);
  box-shadow: inset -2px 0 0 rgba(33, 28, 18, .5);
}
.dust-hazard:last-child { box-shadow: inset 2px 0 0 rgba(33, 28, 18, .5); }
.dust-msg {
  padding: 11px 18px 10px; text-align: center;
  font: 700 15px/1.3 var(--body); letter-spacing: .01em; text-wrap: balance;
}
.dust-lead { font: 400 19px/1 var(--display); letter-spacing: .03em; margin-right: .15em; }
.dust-x {
  display: grid; place-items: center; width: 44px; height: 44px; margin-right: 4px;   /* 44px tap target */
  padding: 0; border: 0; background: transparent; color: var(--hazard-ink); cursor: pointer; border-radius: 50%;
}
.dust-x svg { width: 28px; height: 28px; padding: 8px; border-radius: 50%; background: rgba(33, 28, 18, .1); box-shadow: inset 0 0 0 1.5px rgba(33, 28, 18, .45); transition: background .15s; }
.dust-x:hover svg, .dust-x:focus-visible svg { background: rgba(33, 28, 18, .2); }
.dust-x:focus-visible { outline: 3px solid var(--hazard-ink); outline-offset: -3px; }

@keyframes dust-slap { from { opacity: 0; transform: translateY(-10px) rotate(-2.4deg) scale(1.03); } }
.dust--gone { animation: dust-peel .35s ease-in both; }
@keyframes dust-peel { to { opacity: 0; transform: translateY(-14px) rotate(2deg); } }

/* ---------- 2. roped-off spot: sawhorse + stencil ---------- */
.card--soon {
  min-height: 300px; border: 2px dashed rgba(42, 38, 25, .45);
  background:
    /* a swept patch of floor inside the tape line */
    radial-gradient(ellipse at 50% 62%, rgba(255, 250, 240, .75), rgba(255, 250, 240, 0) 70%);
}
.soon { padding: 22px 20px 26px; display: grid; justify-items: center; }
.soon-art { width: min(100%, 250px); transform: rotate(-1.5deg); }
.sawhorse { display: block; width: 100%; height: auto; overflow: visible; }
.sawhorse .stencil { font: 700 30px/1 "Big Shoulders", "Impact", sans-serif; letter-spacing: .02em; fill: #2a2619; text-anchor: middle; opacity: .9; }
.soon-hand { margin-top: 14px; }
.soon-small { margin-top: 4px; }

/* ---------- 3. gate sticker ---------- */
.gate-sticker {
  position: absolute; top: -44px; right: 8px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px 6px 16px; border-radius: 4px; transform: rotate(7deg);
  font: 700 11px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--hazard-ink);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 45%),
    repeating-linear-gradient(-45deg, var(--hazard-ink) 0 3px, var(--caution) 3px 6px) left / 7px 100% no-repeat,
    var(--caution);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .45), 0 6px 14px rgba(0, 0, 0, .55), 0 0 22px rgba(242, 193, 46, .18);
  /* one corner lifting off the glass */
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
}
.gate-sticker::after { /* the lifted corner's underside */
  content: ""; position: absolute; top: 0; right: 0; width: 9px; height: 9px;
  background: linear-gradient(225deg, transparent 50%, #c99b1a 50%, #fff2bf 100%);
}
.gate-sticker-cone { font-size: 13px; letter-spacing: 0; }
.gate-sticker[hidden] { display: none; } /* author-stylesheet display:inline-flex above would
  otherwise win a specificity tie against the UA [hidden] rule and defeat the flag toggle */
@media (max-width: 640px) {
  .gate-sticker { position: relative; top: auto; right: auto; margin-bottom: 18px; transform: rotate(-4deg); }
}

/* ---------- phones ---------- */
@media (max-width: 600px) {
  .dust { margin-top: -7px; padding-inline: 6px; }
  .dust-tape { grid-template-columns: 22px 1fr auto 22px; transform: rotate(-1.4deg); min-height: 0; }
  .dust-msg { padding: 9px 4px 9px 12px; font-size: 13px; text-align: left; }
  .dust-lead { display: block; font-size: 17px; margin-bottom: 3px; }
  .dust-x { margin-right: 0; }
  .card--soon { min-height: 270px; }
}

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