/* ══════════════════════════════════════════════════════════════
   The board — how a special looks on a screen.

   Two pages draw this: the preview beside the specials editor, and
   screen.html, which is what actually hangs on the wall. They share
   this file so a manager approving a special on their phone is looking
   at the real thing, not an impression of it. Anything about how a
   special looks belongs here, never in one page or the other.

   PICTURE LIGHT. The board is a surface under a lamp, not a flat fill.
   Light falls from above and the foot drops into shadow, which is what
   makes it read as a thing on a wall instead of a slide.

   TYPE IS SIZED FOR A ROOM, NOT A DESK. A 55 inch panel is 40 pixels
   to the inch, and signage needs about an inch of cap height per ten
   feet of viewing distance. Nothing here is decorative:
     title   178px   reads at 32 feet
     price   116px   reads at 21 feet
     day      68px   reads at 12 feet
     detail   58px   reads at 10 feet
     rail     44px   reads at  8 feet
   Weights are heavy for the same reason. A thin stroke disappears at
   distance long before a small one does.

   Needs vinnies.css first for the tokens and the grain.
   ══════════════════════════════════════════════════════════════ */

/* The board keeps its true 1920 or 1080 width and is scaled visually.
   A transform does not shrink layout size, so without this clip the
   real width would push the whole page sideways. */
.stage{position:relative;overflow:hidden;width:100%;}
.screen{
  position:absolute;top:0;left:0;overflow:hidden;transform-origin:top left;
  border-radius:22px;display:flex;flex-direction:column;

  /* every field supplies its own set, so a color choice in the editor
     can never produce something unreadable */
  --field:#5E1817; --wash:rgba(255,226,190,.2); --shade:rgba(28,4,4,.66);
  --type:#F6F0E4;  --soft:rgba(246,240,228,.82); --accent:#E4C489;
  --rail:rgba(228,196,137,.4); --railtype:rgba(228,196,137,.92);
  --tok1:#D9BC80; --tok2:#B08A4C; --tok3:#C9A868; --tok4:#A6813C;
  --tokink:#2E2109; --tokring:rgba(247,239,226,.14);

  /* longhand, not the background shorthand: a shorthand carrying a
     var() does not re-resolve reliably when the token is swapped */
  background-color:var(--field);
  background-image:
    radial-gradient(66% 52% at 50% -12%, var(--wash), transparent 66%),
    radial-gradient(100% 70% at 50% 118%, var(--shade), transparent 62%);
  box-shadow:0 0 0 3px rgba(0,0,0,.15),0 0 0 22px rgba(0,0,0,.5),
             0 40px 70px -30px rgba(30,22,10,.9);
}
/* standing up, the lamp is wider and shallower, because the board has
   three times the height for the light to fall through */
.screen.portrait{
  background-image:
    radial-gradient(78% 34% at 50% -6%, var(--wash), transparent 66%),
    radial-gradient(110% 44% at 50% 112%, var(--shade), transparent 62%);
}
.screen::after{content:"";position:absolute;inset:0;background-image:var(--grain);
  opacity:.15;pointer-events:none;mix-blend-mode:overlay;z-index:9;}
.screen.light::after{opacity:.05;mix-blend-mode:multiply;}

/* ── the body of the board ─────────────────────────────────────── */
.sc-inner{flex:1;min-height:0;display:flex;flex-direction:column;
  padding:78px 96px 0;position:relative;z-index:2;}
.screen.portrait .sc-inner{padding:96px 80px 0;}

.sc-head{display:flex;align-items:center;justify-content:space-between;flex:none;}
.sc-seal{display:inline-flex;align-items:center;justify-content:center;}
.sc-seal img{display:block;height:54px;width:auto;
  filter:grayscale(1) brightness(2.6) contrast(.62);opacity:.5;}
.screen.light .sc-seal img{filter:none;opacity:.9;}
.screen.portrait .sc-seal img{height:56px;}
.sc-when{font-family:var(--fs);font-weight:400;font-size:40px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--accent);}

/* Wide, the words and the price sit side by side. Standing up they
   stack and center, because a tall screen read from the side of a
   doorway has no good left edge to hang a ragged column off. */
.sc-body{flex:1;min-height:0;display:flex;align-items:center;gap:80px;}
.screen.portrait .sc-body{flex-direction:column;justify-content:center;
  align-items:center;text-align:center;gap:0;}
.sc-words{flex:1;min-width:0;}
/* No price means no token, and on a wide board that left the right half
   dead. Without the metal the words take the middle of the board rather
   than hugging a left edge with nothing opposite them. */
.screen:not(.portrait) .sc-body.solo{justify-content:center;}
.screen:not(.portrait) .sc-body.solo .sc-words{flex:none;max-width:74%;}
.screen.portrait .sc-words{flex:none;}

.sc-eyebrow{font-family:var(--fs);font-weight:500;font-size:68px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);margin-bottom:30px;line-height:1.1;}
.screen.portrait .sc-eyebrow{letter-spacing:.12em;margin-bottom:34px;}
.sc-title{font-family:var(--fs);font-weight:500;font-size:178px;line-height:.92;
  text-transform:uppercase;color:var(--type);letter-spacing:1px;}
.screen.portrait .sc-title{letter-spacing:0;}
.sc-detail{font-family:var(--fs);font-weight:400;font-size:58px;line-height:1.4;
  color:var(--soft);margin-top:34px;max-width:30ch;}
.screen.portrait .sc-detail{margin-top:38px;max-width:none;}

/* ── the price, struck into metal ──────────────────────────────────
   The one warm object on the board, and the only thing that moves. */
.sc-token{flex:none;width:326px;height:326px;border-radius:50%;position:relative;overflow:hidden;
  background:linear-gradient(158deg,var(--tok1),var(--tok2) 42%,var(--tok3) 70%,var(--tok4));
  box-shadow:0 0 0 3px var(--tokring),0 26px 54px -18px rgba(0,0,0,.85),
             inset 0 3px 8px rgba(255,240,205,.5),inset 0 -6px 14px rgba(60,40,12,.5);
  display:flex;flex-direction:column;align-items:center;justify-content:center;}
.screen.portrait .sc-token{margin-top:66px;}
.sc-token::after{content:"";position:absolute;top:-40%;bottom:-40%;width:120px;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,248,224,.5),transparent);
  animation:sc-sheen 6.5s ease-in-out infinite;}
@keyframes sc-sheen{0%{left:-160px;}55%,100%{left:400px;}}
@media (prefers-reduced-motion:reduce){.sc-token::after{animation:none;}}
/* The price sits alone in the metal, so it is centred with nothing above
   it and can run larger than it did when a label shared the disc. */
.sc-tok-fig{font-family:var(--fs);font-weight:600;font-size:128px;line-height:1;
  color:var(--tokink);text-align:center;text-shadow:0 1px 0 rgba(255,240,205,.45);}
/* A longer figure, like $12.50, still deserves most of the disc. */
.sc-tok-fig.mid{font-size:96px;}
/* a price in words rather than figures. Steps down and wraps inside the
   circle instead of running out of it. */
.sc-tok-fig.long{font-size:62px;line-height:1.1;max-width:82%;letter-spacing:.01em;}

/* ── the nameplate along the foot ──────────────────────────────── */
.sc-rail{flex:none;height:132px;display:flex;align-items:center;justify-content:center;
  position:relative;z-index:2;border-top:2px solid var(--rail);
  background:linear-gradient(180deg,rgba(176,137,79,.09),transparent);}
.sc-rail span{font-family:var(--fs);font-weight:500;font-size:44px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--railtype);}
.screen.portrait .sc-rail span{letter-spacing:.16em;}

/* ══ FRAMED. The flyer hangs on the board like a poster on a wall ══
   Sitting very slightly off square, the way a real one does. */
.sc-print{flex:none;padding:16px;border-radius:3px;transform:rotate(-1.2deg);
  background:linear-gradient(158deg,#C9A868,#8A6A38);
  box-shadow:0 30px 60px -18px rgba(0,0,0,.9),inset 0 2px 0 rgba(255,244,214,.45);}
.sc-print img{display:block;width:100%;height:auto;border:5px solid #17150F;}
/* wide, the frame is a fixed column beside the words. Standing up it
   takes most of the width, because that is the whole point of a tall
   screen: the artwork finally gets to be big. */
.screen:not(.portrait) .sc-print{width:404px;}
.screen.portrait .sc-print{width:760px;padding:22px;margin-bottom:48px;order:-1;}
.screen.portrait .sc-print img{border-width:6px;}

/* Framed keeps one clean price line instead of a headline and a tracked
   caps word fighting each other at two different sizes. */
.sc-priceline{margin-top:30px;font-family:var(--fs);font-weight:600;font-size:104px;
  line-height:1;color:var(--accent);letter-spacing:0;}
.screen.portrait .sc-priceline{margin-top:34px;}
.sc-priceline small{display:block;font-size:40px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--soft);margin-top:16px;}

/* ══ ON ITS OWN. The flyer takes the screen ════════════════════════ */
.sc-alone{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  padding:30px 0;position:relative;z-index:2;}
.sc-alone img{display:block;box-shadow:0 0 0 3px rgba(203,169,107,.5),
  0 30px 70px -20px rgba(0,0,0,.9);}
/* wide, the artwork is limited by height and there is field either side.
   Standing up it is limited by width and very nearly fills the panel. */
.screen:not(.portrait) .sc-alone img{height:100%;width:auto;max-width:100%;}
.screen.portrait .sc-alone img{width:100%;height:auto;max-height:100%;}

/* ── nothing switched on ───────────────────────────────────────────
   Says so in the room's own name rather than leaving a dark rectangle
   somebody has to go and ask about. */
.sc-off{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:22px;position:relative;z-index:2;}
.sc-off .t{font-family:var(--fs);font-weight:600;font-size:74px;color:var(--type);
  text-transform:uppercase;letter-spacing:1px;}
.sc-off .s{font-family:var(--fs);font-weight:400;font-size:38px;line-height:1.45;
  color:var(--soft);max-width:26ch;}

/* ── which special is up, when more than one is rotating ────────── */
.sc-dots{display:flex;gap:14px;justify-content:center;flex:none;padding:28px 0;
  position:relative;z-index:2;}
.sc-dots span{width:14px;height:14px;border-radius:50%;background:var(--rail);transition:all .3s;}
.sc-dots span.on{background:var(--accent);width:46px;border-radius:999px;}