/* Scare Per Dollar.

   Referent: a Halloween pop-up store in a dead big-box retail unit, two weeks
   before Halloween. Not "spooky" and not a mood - that specific real place,
   with black plastic sheeting over the old fixtures, one fluorescent tube out
   of sync, and the unfaded rectangle where the last tenant's sign used to be.
   PLAYBOOK section 12 is the reason a referent exists at all: warm off-white,
   a book serif and muted earth tones are a house style, not neutrality, and
   this page has to be unmistakable for a note-taking app.

   The scene is drawn, not downloaded (PLAYBOOK section 10). The whole room is
   inline SVG and CSS and costs about 3KB; one stock photograph of a Halloween
   store would be 200KB, would load after the page, would belong to somebody
   else and could not be recoloured from these custom properties.

   Every drawn element is LIGHTER than the surface behind it. A near-black prop
   against a near-black wall reads as a compression artifact, not a silhouette.

   The type is retail signage because that is what the room is made of: Anton
   for the shelf-talker numerals, Barlow Condensed for the signs, Archivo for
   anything anyone actually has to read. No book serif anywhere. */

:root {
  --sheeting:  #0E0D10;
  --fold:      #1E1A28;
  --concrete:  #5C5951;
  --tube:      #BFE8DE;
  --orange:    #FF6A13;
  --sodium:    #FFA93B;
  --acid:      #C6FF3D;
  --paper:     #F2EDE0;
  --kraft:     #C9A878;
  --prop-lit:  #7A67A8;
  --ink:       #141216;
  --tape:      #E8C21A;

  --sign: "Barlow Condensed", "Archivo Narrow", system-ui, sans-serif;
  --num:  "Anton", "Barlow Condensed", system-ui, sans-serif;
  --body: "Archivo", system-ui, -apple-system, sans-serif;

  --gutter: 16px;
  --measure: 640px;
}

* { box-sizing: border-box; }

/* The tape and the footer bleed past the gutter on purpose. Clipping here is
   what keeps that from becoming a horizontal scrollbar at 360px - `clip`
   rather than `hidden` because `hidden` on the root turns it into a scroll
   container and breaks position:sticky further down the page. */
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--sheeting);
  color: var(--paper);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}

main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------------------------------------------------------------- the aisle */

/* The drawing is 1200x700 and stops there. Past that width the wall and the
   floor continue in CSS rather than being stretched, because stretching a
   1200-wide room to 2000px turns a 2.5px fold into a 4px stripe and the
   sheeting stops reading as plastic. The two gradients below are the same six
   values as the SVG pattern, and the floor band is the concrete already
   composited over the wall so the seam lands on one flat colour. */
.aisle {
  position: relative;
  background-color: var(--sheeting);
  background-image: repeating-linear-gradient(90deg,
      rgba(30, 26, 40, .46) 0 44px,
      rgba(30, 26, 40, .22) 44px 80px,
      rgba(30, 26, 40, .34) 80px 122px,
      rgba(122, 103, 168, .07) 122px 128px);
  overflow: hidden;
}

/* the concrete, at the same 520/700 of the scene height the SVG puts it */
.aisle::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 74.2857%;
  bottom: 0;
  background: #413E3D;
}

/* the tape along the top of the sheeting */
.aisle::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 7px;
  background: rgba(255, 169, 59, .2);
}

.scene {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  height: clamp(520px, 78vh, 700px);
}

.ghost-t {
  font-family: var(--num);
  font-size: 25px;
  text-anchor: middle;
}

.wrist-t {
  font-family: var(--num);
  font-size: 18px;
  text-anchor: middle;
}

/* The scrim is here rather than inside the SVG on purpose. Past 1200px the
   drawing stops and the wall continues in CSS, so a scrim drawn in SVG units
   would darken the middle of the header and leave the edges bright - which is
   exactly what it looked like the first time. Sitting on the titling block, it
   spans whatever the header is actually wide. */
.titling {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 104px 0 26px;
  background: linear-gradient(180deg,
    rgba(14, 13, 16, 0) 0%,
    rgba(14, 13, 16, .72) 38%,
    rgba(14, 13, 16, .93) 70%,
    rgba(14, 13, 16, .97) 100%);
}

.titling-in {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.eyebrow {
  margin: 0 0 4px;
  font-family: var(--sign);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .21em;
  text-transform: uppercase;
  color: var(--orange);
}

.aisle h1 {
  margin: 0;
  font-family: var(--num);
  font-weight: 400;
  font-size: clamp(3rem, 14.5vw, 4.4rem);
  line-height: .92;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--paper);
}

.aisle h1 em { font-style: normal; }

.tagline {
  margin: 14px 0 0;
  max-width: 17em;
  font-size: .94rem;
  line-height: 1.47;
  color: rgba(242, 237, 224, .74);
}

/* ------------------------------------------------------------ the shelf talker */

.talker {
  position: relative;
  margin: 0 0 8px;
  padding: 40px 0 0;
}

/* caution tape, slack and not quite level */
.tape {
  display: block;
  position: absolute;
  top: 0;
  left: calc(var(--gutter) * -1);
  right: calc(var(--gutter) * -1);
  height: 26px;
  transform: rotate(-1.6deg);
  background:
    repeating-linear-gradient(-58deg,
      var(--ink) 0 13px,
      var(--tape) 13px 30px);
}

.banner {
  position: relative;
  margin: 26px 0 26px;
  padding: 14px 26px;
  background: var(--orange);
  transform: rotate(-.7deg);
  font-family: var(--sign);
  font-weight: 900;
  font-size: clamp(1.35rem, 6.4vw, 1.75rem);
  line-height: 1.05;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--paper);
  text-align: center;
}

/* grommets */
.banner::before,
.banner::after {
  content: "";
  position: absolute;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(21, 19, 12, .55);
}
.banner::before { left: 9px; }
.banner::after  { right: 9px; }

.price-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 26px;
}

/* starburst price tag, cut with a conic gradient rather than 32 SVG points */
.burst {
  position: relative;
  flex: 0 0 auto;
  width: 132px;
  height: 132px;
  display: grid;
  place-content: center;
  text-align: center;
  transform: rotate(-4deg);
  background: var(--paper);
  clip-path: polygon(
    100% 50%, 97.6% 57.4%, 96.2% 65.3%, 91.6% 71.7%, 88% 78.7%, 81.5% 83.1%,
    75.9% 88.9%, 68.2% 90.6%, 61% 94.2%, 53.1% 93.9%, 45.4% 96%, 38.2% 92.5%,
    30.6% 90.8%, 24.9% 85.1%, 18% 81.3%, 14.6% 74.1%, 9.5% 68.4%, 8.6% 60.6%,
    5.9% 53.1%, 8.1% 45.5%, 8.9% 37.7%, 13.3% 31.2%, 16.2% 23.9%, 22.5% 19.1%,
    27.7% 13.2%, 35.4% 11.2%, 42.3% 7.2%, 50.2% 7.6%, 57.9% 5.2%, 65.2% 8.5%,
    72.9% 9.9%, 78.8% 15.4%, 85.6% 18.9%, 89.3% 26%, 94.6% 31.4%, 95.8% 39.2%,
    98.7% 46.5%
  );
}

.burst label {
  display: block;
  font-family: var(--sign);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #6B6660;
}

.burst-in {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  font-family: var(--num);
  font-size: 2rem;
  color: var(--ink);
}

.burst-in i { font-style: normal; }

.burst-in input {
  width: 3.1em;
  padding: 0;
  border: 0;
  border-bottom: 2px solid rgba(20, 18, 22, .22);
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
}

.burst-in input:focus-visible {
  outline: 0;
  border-bottom-color: var(--orange);
}

.burst-in input::placeholder { color: rgba(20, 18, 22, .3); }

.price-note {
  margin: 0;
  font-size: .88rem;
  line-height: 1.42;
  color: rgba(242, 237, 224, .55);
}

/* option groups, as the store's own tick-box signage */

.grp {
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}

.grp legend {
  padding: 0;
  margin: 0 0 10px;
  font-family: var(--sign);
  font-weight: 600;
  font-size: .94rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(242, 237, 224, .5);
}

.opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.opt {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px 10px 11px;
  border: 1.5px solid rgba(242, 237, 224, .16);
  background: rgba(30, 26, 40, .85);
  cursor: pointer;
  font-family: var(--sign);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: rgba(242, 237, 224, .82);
}

.opt input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1.5px solid rgba(242, 237, 224, .3);
  background: rgba(14, 13, 16, .6);
  cursor: pointer;
}

.opt:has(input:checked) {
  border-color: var(--orange);
  background: var(--orange);
  color: var(--ink);
}

/* The tick is drawn from two gradients, so it needs no glyph and no font to
   have loaded. Both the fill and the mark live in this one rule on purpose:
   `background` as a shorthand in a `:has()` rule outranks a later
   `background-image`, and splitting them left every checked box blank. */
.opt:has(input:checked) input {
  border-color: var(--ink);
  background-color: var(--ink);
  background-image:
    linear-gradient(45deg, transparent 43%, var(--orange) 43% 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, var(--orange) 43% 57%, transparent 57%);
}

.opt input:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 2px;
}

.grp-years .opt { min-width: 62px; justify-content: center; }

.score-it {
  display: block;
  width: 100%;
  margin: 30px 0 0;
  padding: 17px 20px;
  border: 0;
  background: var(--orange);
  cursor: pointer;
  font-family: var(--num);
  font-size: 1.7rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink);
}

.score-it:focus-visible {
  outline: 3px solid var(--acid);
  outline-offset: 3px;
}

/* ------------------------------------------------------- the verdict, on a tag */

.verdict {
  position: relative;
  margin: 54px 0 0;
  padding-top: 8px;
}

/* the zip tie the tag hangs from, disappearing off the top */
.tie {
  position: absolute;
  top: -34px;
  left: 30px;
  width: 2px;
  height: 58px;
  background: rgba(242, 237, 224, .45);
  transform: rotate(4deg);
}

.tag {
  position: relative;
  padding: 24px 22px;
  background: var(--paper);
  color: var(--ink);
  transform: rotate(-2.2deg);
  box-shadow: 0 14px 26px -6px rgba(0, 0, 0, .6);
}

/* the punch hole */
.tag::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 18px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--sheeting);
}

.tag.is-empty .tag-num,
.tag.is-empty .tag-rule { display: none; }

.tag-label {
  margin: 0 0 2px;
  padding-left: 24px;
  font-family: var(--sign);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: #6B6660;
}

/* Printed twice and not quite in register: the orange plate sits a hair off
   the black one, the way a cheap two-colour shelf talker does. This is the
   page's signature and it costs one extra span. */
.tag-num {
  position: relative;
  margin: 2px 0 0;
  height: 1.06em;
  font-family: var(--num);
  font-size: clamp(4.4rem, 22vw, 6.6rem);
  line-height: 1;
}

.tag-num .under,
.tag-num .over {
  position: absolute;
  top: 0;
  left: 0;
}

.tag-num .under { color: var(--orange); transform: translate(4px, -4px); }
.tag-num .over  { color: var(--ink); }

.tag-rule {
  display: block;
  height: 7px;
  margin: 10px 0 18px;
  background: var(--acid);
}

.tag-verdict {
  margin: 0;
  font-family: var(--sign);
  font-weight: 900;
  font-size: clamp(1.5rem, 7vw, 2rem);
  line-height: .96;
  text-transform: uppercase;
}

.tag-cost {
  margin: 14px 0 0;
  font-size: .9rem;
  line-height: 1.45;
  color: #5A554E;
}

.tag.is-empty .tag-verdict { color: #6B6660; }

/* ------------------------------------------------------- the fog machine test */

.baseline {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 44px 0 0;
}

.kraft {
  flex: 0 0 auto;
  margin: 0;
  padding: 14px 12px;
  background: var(--kraft);
  color: var(--ink);
  text-align: center;
  transform: rotate(3deg);
}

.kraft b {
  display: block;
  font-family: var(--num);
  font-weight: 400;
  font-size: 2.85rem;
  line-height: 1;
}

.kraft i,
.kraft u {
  display: block;
  font-family: var(--sign);
  font-weight: 600;
  font-style: normal;
  text-decoration: none;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #5A4A32;
}

.kraft i { font-size: .75rem; margin-top: 2px; }
.kraft u { font-size: .68rem; }

.baseline-copy h2 {
  margin: 0 0 8px;
  font-family: var(--sign);
  font-weight: 900;
  font-size: 1.32rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--acid);
}

.baseline-copy p {
  margin: 0;
  font-size: .87rem;
  line-height: 1.5;
  color: rgba(242, 237, 224, .66);
}

/* Reserved before there is anything to put in them, so filling them later
   shifts nothing. monetize.js unhides a slot only when site-config.js carries
   a real publisher id, which it does not yet. */
.ad-slot {
  margin: 40px 0 0;
  min-height: 280px;
}

.ad-slot[hidden] { display: none; }

/* ------------------------------------------------------------------ the prose */

.deep { margin: 56px 0 0; }

.deep-eyebrow {
  margin: 0 0 4px;
  font-family: var(--sign);
  font-weight: 600;
  font-size: .86rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange);
}

.deep-head {
  margin: 0 0 20px;
  font-family: var(--sign);
  font-weight: 900;
  font-size: 1.6rem;
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--paper);
}

.deep-item {
  border-top: 1px solid rgba(242, 237, 224, .13);
}

.deep-item:last-of-type { border-bottom: 1px solid rgba(242, 237, 224, .13); }

.deep-item > summary {
  padding: 15px 30px 15px 0;
  position: relative;
  cursor: pointer;
  list-style: none;
  font-family: var(--sign);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(242, 237, 224, .88);
}

.deep-item > summary::-webkit-details-marker { display: none; }

.deep-item > summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: rotate(45deg);
}

.deep-item[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }

.deep-body {
  padding: 0 0 18px;
  font-size: .95rem;
  line-height: 1.62;
  color: rgba(242, 237, 224, .72);
}

.deep-body p { margin: 0 0 .9em; }
.deep-body p:last-child { margin-bottom: 0; }
.deep-body b { color: var(--paper); font-weight: 500; }

/* ------------------------------------------------------------------- sharing

   Built by /share.js, styled here. Square and set in the signage face rather
   than the rounded pills the other sites use: this page is made of shelf
   tickets and a pill would be the one element that came from somewhere else.
   Each button keeps its network's own colour, because a share button nobody
   recognises is a share button nobody presses. */

.share { margin: 40px 0 0; }
.share[hidden] { display: none; }

.share-heading {
  margin: 0 0 10px;
  font-family: var(--sign);
  font-weight: 600;
  font-size: .94rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(242, 237, 224, .5);
}

.share-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 15px;
  border: 0;
  background: var(--brand, #4A4060);
  color: #fff;
  cursor: pointer;
  font-family: var(--sign);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .06em;
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .12s ease, filter .12s ease;
}

.share-btn:hover,
.share-btn:focus-visible { transform: translateY(-2px); filter: brightness(1.1); }

.share-copy,
.share-more {
  background: transparent;
  color: rgba(242, 237, 224, .82);
  box-shadow: inset 0 0 0 1.5px rgba(242, 237, 224, .34);
}

.share-copy.done {
  background: var(--acid);
  color: var(--ink);
  box-shadow: none;
}

/* --------------------------------------------------------------- bare concrete */

footer {
  margin: 56px -16px 0;
  padding: 28px var(--gutter) 34px;
  background: #2C2A26;
  border-top: 2px solid #3A3833;
}

.foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0 0 16px;
}

.foot-nav a {
  font-family: var(--sign);
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(242, 237, 224, .5);
  text-decoration: none;
}

.foot-nav a:hover { color: var(--paper); }

/* Present and findable, never the thing your eye lands on. It covers the three
   claims this page actually makes - the numbers are invented, it is not advice,
   and the retailer has nothing to do with it - and it is ordinary selectable
   text in the DOM, not an image and not a tooltip. */
.disclaimer {
  margin: 0;
  max-width: 46em;
  font-size: .66rem;
  line-height: 1.55;
  color: rgba(242, 237, 224, .26);
  transition: color .18s;
}

.disclaimer:hover { color: rgba(242, 237, 224, .6); }

/* ------------------------------------------------------------------ wider than a phone */

@media (min-width: 720px) {
  :root { --gutter: 28px; }
  .price-row { gap: 26px; }
  .baseline { gap: 22px; }
  footer { margin-left: -28px; margin-right: -28px; }
}

/* ------------------------------------------------------------------- motion

   Five animations, and every one of them is what prefers-reduced-motion exists
   to switch off: an idle sway, a servo head-turn, a flickering tube, drifting
   fog and a swinging tag. They are opt-in rather than opt-out - the default
   below is a still room, and motion is added only where the query matches. */

@media (prefers-reduced-motion: no-preference) {

  .prop {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: sway 7s ease-in-out infinite;
  }

  @keyframes sway {
    0%, 100% { transform: translate(600px, 190px) rotate(-.35deg); }
    50%      { transform: translate(600px, 190px) rotate(.35deg); }
  }

  /* Cheap servo, not a smooth tween: it snaps in two steps and holds. */
  .scored .prop-head {
    animation: turn 1.1s steps(2, jump-none) 1;
  }

  @keyframes turn {
    0%   { transform: rotate(0deg) translateX(0); }
    45%  { transform: rotate(-7deg) translateX(-3px); }
    100% { transform: rotate(0deg) translateX(0); }
  }

  .prop-head { transform-box: fill-box; transform-origin: 50% 90%; }

  /* Irregular and mostly off: it drops out twice a minute, not twice a second.
     A strobe would be a different and much worse page. */
  .tube-dim { animation: flicker 27s linear infinite; }

  @keyframes flicker {
    0%, 41%   { opacity: .34; }
    41.4%     { opacity: .05; }
    41.8%     { opacity: .34; }
    42.3%     { opacity: .08; }
    43%, 78%  { opacity: .34; }
    78.5%     { opacity: .06; }
    79.2%     { opacity: .3; }
    79.6%     { opacity: .08; }
    80.4%, 100% { opacity: .34; }
  }

  .fog { animation: drift 34s ease-in-out infinite; }

  @keyframes drift {
    0%, 100% { transform: translateX(-14px); }
    50%      { transform: translateX(16px); }
  }

  .scored .tag { animation: swing .7s ease-out 1; }

  @keyframes swing {
    0%   { transform: rotate(-9deg); }
    35%  { transform: rotate(.8deg); }
    65%  { transform: rotate(-3.4deg); }
    100% { transform: rotate(-2.2deg); }
  }
}