/* MORPHBOARD pack frames: the nine identity.frame.style looks, drawn in CSS only (no logo files, no marks). One vocabulary for
   every surface: .frame-card (phone stage, capsule, camera, personal page, admin preview) and .board-frame (the 1920x1080 board).
   html[data-frame] is set live by /lib/brand.js from the active pack; every colour comes from the pack palette variables.
   Ring technique: ::before paints the frame and a mask cuts the centre out, so the picture inside is never covered. */
.frame-card, .board-frame { position: relative; --fb: 10px; --fr: 0px; border-radius: var(--fr); isolation: isolate; }
.board-frame { --fb: 22px; }
.frame-card::before, .board-frame::before {
  content: ''; position: absolute; inset: 0; padding: var(--fb); border-radius: inherit; pointer-events: none; z-index: 5;
  background: var(--frame-paint, linear-gradient(135deg, var(--primary), var(--accent)));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.frame-card::after, .board-frame::after { content: ''; position: absolute; pointer-events: none; z-index: 6; }

/* ---- ice-chrome (Nashville Predators): brushed navy steel, gold inner bevel, frost creeping from the lower corners ---- */
html[data-frame=ice-chrome] { --cap-bg: var(--secondary, #041E42); --cap-ink: var(--primary); --cap-rule: var(--primary); --frame-matte: #041e42; }
html[data-frame=ice-chrome] .frame-card::before, html[data-frame=ice-chrome] .board-frame::before { background: repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 1px, transparent 1px 4px), linear-gradient(165deg, #7d9cc9 0%, #2c4f86 18%, #0b2a5b 40%, #041e42 60%, #3b62a0 82%, #1a3a6e 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), inset 0 0 0 calc(var(--fb) - 3px) transparent; }
html[data-frame=ice-chrome] .frame-card > .notch, html[data-frame=ice-chrome] .board-frame > .notch { display: block; position: absolute; inset: calc(var(--fb) - 3px); border: 3px solid var(--primary); pointer-events: none; z-index: 7; box-shadow: 0 0 18px color-mix(in srgb, var(--primary) 45%, transparent); }
html[data-frame=ice-chrome] .frame-card::after, html[data-frame=ice-chrome] .board-frame::after { inset: auto 0 0 0; height: 34%;
  background: radial-gradient(60% 70% at 0% 100%, rgba(214,240,255,.55), transparent 60%), radial-gradient(55% 65% at 100% 100%, rgba(214,240,255,.5), transparent 60%),
    conic-gradient(from 200deg at 4% 100%, transparent 0 10deg, rgba(255,255,255,.55) 10deg 13deg, transparent 13deg 24deg, rgba(200,235,255,.45) 24deg 26deg, transparent 26deg 40deg, rgba(255,255,255,.4) 40deg 42deg, transparent 42deg),
    conic-gradient(from 110deg at 96% 100%, transparent 0 16deg, rgba(255,255,255,.5) 16deg 19deg, transparent 19deg 30deg, rgba(200,235,255,.45) 30deg 32deg, transparent 32deg 44deg, rgba(255,255,255,.4) 44deg 46deg, transparent 46deg);
  mix-blend-mode: screen; border-radius: inherit; }

/* ---- steel-blade (Tennessee Titans): brushed silver, columbia-blue LED strip inside the top, a red notch at the lower right ---- */
html[data-frame=steel-blade] { --cap-bg: var(--secondary, #0C2340); --cap-ink: #fff; --cap-rule: var(--primary); --frame-matte: #0C2340; }
html[data-frame=steel-blade] .frame-card::before, html[data-frame=steel-blade] .board-frame::before { background: repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 1px, transparent 1px 4px), linear-gradient(180deg, #e9edf1, #a9b1b9 22%, #d8dde2 45%, #8a8d8f 70%, #c7ccd1); }
html[data-frame=steel-blade] .frame-card::after, html[data-frame=steel-blade] .board-frame::after { inset: var(--fb) var(--fb) auto var(--fb); height: max(4px, calc(var(--fb) * .35)); background: var(--primary); box-shadow: 0 0 calc(var(--fb) * 1.2) var(--primary), 0 0 4px #fff inset; }
html[data-frame=steel-blade] .frame-card > .notch, html[data-frame=steel-blade] .board-frame > .notch { display: block; position: absolute; right: 0; bottom: 0; width: calc(var(--fb) * 3.2); height: calc(var(--fb) * 3.2); background: var(--accent); clip-path: polygon(100% 0, 100% 100%, 0 100%); z-index: 7; pointer-events: none; }

/* ---- festival-poster (Bonnaroo): thick rainbow border, screen-print paper, misregistration, rounded 12 ---- */
html[data-frame=festival-poster] .frame-card, html[data-frame=festival-poster] .board-frame { --fr: 12px; }
html[data-frame=festival-poster] .board-frame { --fr: 18px; --fb: 26px; }
html[data-frame=festival-poster] { --cap-bg: #fff; --cap-ink: var(--bg); --cap-rule: var(--primary); --cap-tilt: -2deg; --frame-matte: #1B1240; }
html[data-frame=festival-poster] .frame-card::before, html[data-frame=festival-poster] .board-frame::before { background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"),
  linear-gradient(135deg, #5D3FD3 0%, #00C2A8 33%, #FFD23F 66%, #FF7A00 100%); box-shadow: 3px 2px 0 rgba(255,122,0,.55), -2px -2px 0 rgba(0,194,168,.45); }
html[data-frame=festival-poster] .frame-card::after, html[data-frame=festival-poster] .board-frame::after { inset: calc(var(--fb) - 2px); border-radius: calc(var(--fr) - 6px); box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }

/* ---- butterfly-cameo (Dollywood): ornate gold cameo, soft oval corners, cream matte, a gold butterfly at each corner ---- */
html[data-frame=butterfly-cameo] .frame-card { --fr: 28px; --fb: 12px; } html[data-frame=butterfly-cameo] .board-frame { --fr: 48px; --fb: 24px; }
html[data-frame=butterfly-cameo] { --cap-bg: #FFF4DC; --cap-ink: var(--secondary, #6A2C91); --cap-rule: var(--primary); --frame-matte: #FFF4DC; }
html[data-frame=butterfly-cameo] .frame-card::before, html[data-frame=butterfly-cameo] .board-frame::before { background:
  repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.12) 0 4deg, transparent 4deg 9deg),
  linear-gradient(135deg, #8a6200, #f2b705 18%, #fff0a8 32%, #c99200 48%, #f2b705 66%, #fff0a8 80%, #9a6f00); box-shadow: inset 0 0 0 3px #FFF4DC; }
html[data-frame=butterfly-cameo] .frame-card::after, html[data-frame=butterfly-cameo] .board-frame::after { inset: calc(var(--fb) * -0.9);
  --bf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff0a8'/%3E%3Cstop offset='.5' stop-color='%23f2b705'/%3E%3Cstop offset='1' stop-color='%239a6f00'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23g)' stroke='%236A2C91' stroke-width='.8'%3E%3Cpath d='M20 16 C12 0 0 2 3 12 C5 18 13 17 20 16Z'/%3E%3Cpath d='M20 16 C28 0 40 2 37 12 C35 18 27 17 20 16Z'/%3E%3Cpath d='M20 17 C13 19 8 29 13 30 C17 31 19 23 20 17Z'/%3E%3Cpath d='M20 17 C27 19 32 29 27 30 C23 31 21 23 20 17Z'/%3E%3C/g%3E%3Crect x='19.2' y='9' width='1.6' height='16' rx='.8' fill='%236A2C91'/%3E%3C/svg%3E");
  background: var(--bf) left top / calc(var(--fb) * 2.6) auto no-repeat, var(--bf) right top / calc(var(--fb) * 2.6) auto no-repeat, var(--bf) left bottom / calc(var(--fb) * 2.6) auto no-repeat, var(--bf) right bottom / calc(var(--fb) * 2.6) auto no-repeat; }

/* ---- showroom-chrome (Nissan USA): thin polished chrome, a red LED bar inside the top edge, carbon weave ---- */
html[data-frame=showroom-chrome] .frame-card { --fr: 4px; --fb: 6px; } html[data-frame=showroom-chrome] .board-frame { --fr: 4px; --fb: 12px; }
html[data-frame=showroom-chrome] { --cap-bg: #0A0A0A; --cap-ink: #fff; --cap-rule: var(--primary); --cap-left: 1; --frame-matte: #0A0A0A;
  --carbon: repeating-linear-gradient(45deg, #1c1c1e 0 4px, #111 4px 8px), repeating-linear-gradient(-45deg, rgba(255,255,255,.035) 0 4px, transparent 4px 8px); }
html[data-frame=showroom-chrome] .frame-card::before, html[data-frame=showroom-chrome] .board-frame::before { background: linear-gradient(180deg, #fafafa, #9da3aa 18%, #f4f5f6 36%, #6d7278 58%, #d8dbdf 80%, #8e9399); }
html[data-frame=showroom-chrome] .frame-card::after, html[data-frame=showroom-chrome] .board-frame::after { inset: var(--fb) var(--fb) auto var(--fb); height: max(4px, calc(var(--fb) * .7)); background: linear-gradient(90deg, transparent, var(--primary) 12%, #ff4d6d 50%, var(--primary) 88%, transparent); box-shadow: 0 0 calc(var(--fb) * 2) var(--primary); }

/* ---- checkerboard-endzone (Tennessee Volunteers): smoky grey, an orange-and-white checkerboard strip along the bottom ---- */
html[data-frame=checkerboard-endzone] { --cap-bg: var(--primary); --cap-ink: #fff; --cap-rule: #fff; --frame-matte: #2E2F31; }
html[data-frame=checkerboard-endzone] .frame-card::before, html[data-frame=checkerboard-endzone] .board-frame::before { background: linear-gradient(var(--primary), var(--primary)) top / 100% 3px no-repeat, linear-gradient(160deg, #6c6d70, #3a3b3e 40%, #58595b 70%, #2e2f31); }
html[data-frame=checkerboard-endzone] .frame-card::after, html[data-frame=checkerboard-endzone] .board-frame::after { inset: auto 0 0 0; height: calc(var(--fb) * 1.6);
  background: conic-gradient(var(--primary) 25%, #fff 0 50%, var(--primary) 0 75%, #fff 0) 0 0 / calc(var(--fb) * 1.6) calc(var(--fb) * 1.6); }

/* ---- expo-badge (Music City Center): a conference badge, white card, holographic foil strip, green lanyard tab ---- */
html[data-frame=expo-badge] .frame-card { --fr: 16px; --fb: 9px; } html[data-frame=expo-badge] .board-frame { --fr: 24px; --fb: 16px; }
html[data-frame=expo-badge] { --cap-bg: #fff; --cap-ink: var(--secondary, #0B3D91); --cap-rule: var(--primary); --frame-matte: #fff; }
html[data-frame=expo-badge] .frame-card::before, html[data-frame=expo-badge] .board-frame::before { background: #fff; padding-top: calc(var(--fb) * 3.2); }
html[data-frame=expo-badge] .frame-card::after, html[data-frame=expo-badge] .board-frame::after { inset: 0 0 auto 0; height: calc(var(--fb) * 3.2); border-radius: var(--fr) var(--fr) 0 0;
  background: linear-gradient(#071F4A, #071F4A) 50% 42% / calc(var(--fb) * 5) calc(var(--fb) * 0.9) no-repeat, linear-gradient(100deg, #9AD8FF, #f2c7ff 20%, #3DDC97 40%, #fff6a8 60%, #9AD8FF 80%, #f2c7ff) 0 0 / 300% 100%; animation: holo 6s linear infinite; }
html[data-frame=expo-badge] .frame-card > .lanyard, html[data-frame=expo-badge] .board-frame > .lanyard { display: block; position: absolute; left: 50%; top: calc(var(--fb) * -1.8); width: calc(var(--fb) * 3); height: calc(var(--fb) * 2.4); transform: translateX(-50%); background: var(--primary); border-radius: 4px 4px 0 0; z-index: 7; pointer-events: none; }
@keyframes holo { to { background-position: 50% 42%, 300% 0; } }

/* ---- opry-barn (Grand Ole Opry): barn-wood planks, gold marquee bulbs along the top, red velvet matte with gold piping ---- */
html[data-frame=opry-barn] .frame-card { --fb: 14px; } html[data-frame=opry-barn] .board-frame { --fb: 30px; }
html[data-frame=opry-barn] { --cap-bg: var(--secondary, #C41230); --cap-ink: var(--primary); --cap-rule: var(--primary); --frame-matte: #6d0f1e; }
html[data-frame=opry-barn] .frame-card::before, html[data-frame=opry-barn] .board-frame::before { background:
  repeating-linear-gradient(90deg, rgba(0,0,0,.28) 0 2px, transparent 2px 38px), repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 5px),
  linear-gradient(90deg, #5a3a22, #7a5230 20%, #4b301c 40%, #6e4a2b 60%, #573720 80%, #7a5230); box-shadow: inset 0 0 0 3px #D4AF37; }
html[data-frame=opry-barn] .frame-card::after, html[data-frame=opry-barn] .board-frame::after { inset: 0 0 auto 0; height: var(--fb);
  background: radial-gradient(circle at 50% 50%, #fff6c8 0 18%, #FFD65A 26%, rgba(212,175,55,.0) 58%) 0 50% / calc(var(--fb) * 1.4) 100% repeat-x; animation: chase 1.6s steps(4) infinite; filter: drop-shadow(0 0 6px #FFD65A); }
@keyframes chase { to { background-position: calc(var(--fb) * 1.4) 50%; } }

/* ---- time-card (9 to 5 Day Nashville): a cream 1980 time card. Hot-pink header band with punch holes, time-clock hairlines down the
   left strip, a row of gold and pink rhinestones along the picture line, the typed stat strip in the band (::after, content from
   data-stats, static "IN 9:00 · OUT 5:00 · NASHVILLE" when absent) and a rubber stamp bottom-right (.lanyard). On cream, ink is
   always plum: pink is only ever a band, a rule or the stamp. ---- */
html[data-frame=time-card] .frame-card { --fb: 16px; --fr: 10px; --tc-band: calc(var(--fb) * 1.75); --tc-hole: 4px; --tc-pitch: 24px; --tc-row: 6px; --tc-st: 2px; --tc-pitch2: 16px; --tc-line: 10px; --tc-pill: 18px; --tc-type: 13px; }
html[data-frame=time-card] .board-frame { --fb: 36px; --fr: 12px; --tc-band: calc(var(--fb) * 1.25); --tc-hole: 10px; --tc-pitch: 40px; --tc-row: 8px; --tc-st: 3px; --tc-pitch2: 22px; --tc-line: 16px; --tc-pill: 34px; --tc-type: 27px; }
html[data-frame=time-card] { --cap-bg: #FFF6EA; --cap-ink: #22071E; --cap-rule: var(--primary, #FF3D8F); --cap-tilt: -1.5deg; --frame-matte: #FFF6EA;
  --tc-pink: var(--primary, #FF3D8F); --tc-gold: var(--secondary, #F5C842); --tc-cream: #FFF6EA; --tc-ink: #22071E; --tc-stamp: #E62E7C; }
/* the stone gradients live on the card element itself: they read --tc-st, which is set per surface above */
html[data-frame=time-card] .frame-card, html[data-frame=time-card] .board-frame {
  --tc-gstone: radial-gradient(circle at 50% 50%, #fff 0 calc(var(--tc-st) * .3), #FFE58A calc(var(--tc-st) * .35) calc(var(--tc-st) * .65), var(--tc-gold) calc(var(--tc-st) * .7) calc(var(--tc-st) * .95), #B8891A var(--tc-st) calc(var(--tc-st) * 1.15), transparent calc(var(--tc-st) * 1.3));
  --tc-pstone: radial-gradient(circle at 50% 50%, #fff 0 calc(var(--tc-st) * .3), #FFB3D1 calc(var(--tc-st) * .35) calc(var(--tc-st) * .65), var(--tc-pink) calc(var(--tc-st) * .7) calc(var(--tc-st) * .95), #B01A5E var(--tc-st) calc(var(--tc-st) * 1.15), transparent calc(var(--tc-st) * 1.3));
  --tc-corner: radial-gradient(circle at 50% 50%, #fff 0 calc(var(--tc-st) * .5), #FFE58A calc(var(--tc-st) * .6) var(--tc-st), var(--tc-gold) calc(var(--tc-st) * 1.05) calc(var(--tc-st) * 1.5), #B8891A calc(var(--tc-st) * 1.55) calc(var(--tc-st) * 1.8), transparent calc(var(--tc-st) * 1.95)); }
html[data-frame=time-card] .frame-card::before, html[data-frame=time-card] .board-frame::before { padding-top: var(--tc-band); background:
  /* corner stones */
  var(--tc-corner) left calc(var(--fb) - var(--tc-row) * 1.6) top calc(var(--tc-band) - var(--tc-row) * 1.6) / calc(var(--tc-row) * 2.2) calc(var(--tc-row) * 2.2) no-repeat,
  var(--tc-corner) right calc(var(--fb) - var(--tc-row) * 1.6) top calc(var(--tc-band) - var(--tc-row) * 1.6) / calc(var(--tc-row) * 2.2) calc(var(--tc-row) * 2.2) no-repeat,
  var(--tc-corner) left calc(var(--fb) - var(--tc-row) * 1.6) bottom calc(var(--fb) - var(--tc-row) * 1.6) / calc(var(--tc-row) * 2.2) calc(var(--tc-row) * 2.2) no-repeat,
  var(--tc-corner) right calc(var(--fb) - var(--tc-row) * 1.6) bottom calc(var(--fb) - var(--tc-row) * 1.6) / calc(var(--tc-row) * 2.2) calc(var(--tc-row) * 2.2) no-repeat,
  /* rhinestone rows on the picture line: gold and pink alternate (two layers, half a pitch apart) */
  var(--tc-gstone) left 0 top calc(var(--tc-band) - var(--tc-row)) / var(--tc-pitch2) var(--tc-row) repeat-x, var(--tc-pstone) left calc(var(--tc-pitch2) / 2) top calc(var(--tc-band) - var(--tc-row)) / var(--tc-pitch2) var(--tc-row) repeat-x,
  var(--tc-gstone) left 0 bottom calc(var(--fb) - var(--tc-row)) / var(--tc-pitch2) var(--tc-row) repeat-x, var(--tc-pstone) left calc(var(--tc-pitch2) / 2) bottom calc(var(--fb) - var(--tc-row)) / var(--tc-pitch2) var(--tc-row) repeat-x,
  var(--tc-gstone) left calc(var(--fb) - var(--tc-row)) top 0 / var(--tc-row) var(--tc-pitch2) repeat-y, var(--tc-pstone) left calc(var(--fb) - var(--tc-row)) top calc(var(--tc-pitch2) / 2) / var(--tc-row) var(--tc-pitch2) repeat-y,
  var(--tc-gstone) right calc(var(--fb) - var(--tc-row)) top 0 / var(--tc-row) var(--tc-pitch2) repeat-y, var(--tc-pstone) right calc(var(--fb) - var(--tc-row)) top calc(var(--tc-pitch2) / 2) / var(--tc-row) var(--tc-pitch2) repeat-y,
  /* punch holes, then the header band */
  radial-gradient(circle at 50% 50%, var(--tc-ink) 0 calc(var(--tc-hole) / 2), transparent calc(var(--tc-hole) / 2 + .6px)) calc(var(--fb) * .55) calc((var(--tc-band) - var(--tc-row) - var(--tc-hole)) / 2) / var(--tc-pitch) var(--tc-hole) repeat-x,
  linear-gradient(var(--tc-pink), var(--tc-pink)) 0 0 / 100% var(--tc-band) no-repeat,
  /* time-clock rows down the left strip and the pink rule at its inner edge */
  linear-gradient(var(--tc-pink), var(--tc-pink)) calc(var(--fb) - var(--tc-row) - 3px) var(--tc-band) / 2px calc(100% - var(--tc-band) - var(--fb)) no-repeat,
  repeating-linear-gradient(180deg, rgba(34,7,30,.28) 0 1px, transparent 1px var(--tc-line)) 0 var(--tc-band) / var(--fb) calc(100% - var(--tc-band)) no-repeat,
  /* paper grain over cream card stock */
  repeating-linear-gradient(0deg, rgba(34,7,30,.035) 0 1px, transparent 1px 3px), linear-gradient(var(--tc-cream), var(--tc-cream));
  box-shadow: inset 0 0 0 1px rgba(34,7,30,.14); }
/* the typed stat strip: a cream inset pill in the band, right-aligned, plum ink (never cream on pink) */
html[data-frame=time-card] .frame-card::after, html[data-frame=time-card] .board-frame::after { content: attr(data-stats); inset: auto; top: calc((var(--tc-band) - var(--tc-pill)) / 2); right: calc(var(--fb) * .55); height: var(--tc-pill); line-height: var(--tc-pill); padding: 0 calc(var(--tc-pill) * .5); max-width: calc(100% - var(--fb) * 1.1); overflow: hidden;
  border-radius: 4px; background: var(--tc-cream); color: var(--tc-ink); font: var(--tc-type) / var(--tc-pill) 'Special Elite', var(--body, monospace); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; text-shadow: 0 0 .5px var(--tc-ink); box-shadow: inset 0 0 0 1px rgba(34,7,30,.12); }
html[data-frame=time-card] .frame-card:not([data-stats])::after, html[data-frame=time-card] .frame-card[data-stats=""]::after, html[data-frame=time-card] .board-frame:not([data-stats])::after, html[data-frame=time-card] .board-frame[data-stats=""]::after { content: "IN 9:00 · OUT 5:00 · NASHVILLE"; }
@media (max-width: 480px) { html[data-frame=time-card] .frame-card::after { display: none; } }
/* the rubber stamp (.lanyard repurposed): one line of pink INK pressed onto the cream matte over the stone row: no box, no shadow,
   multiply so the card stock and stones show through, a repeating mask for uneven ink coverage on border, outline and type alike.
   Multiply over the plum backdrop would go near black, so it stays wholly on the cream (checked at 1920x1080, 1080x1920 and 390px). */
html[data-frame=time-card] .frame-card > .lanyard, html[data-frame=time-card] .board-frame > .lanyard { display: block; position: absolute; right: var(--fb); bottom: var(--fb); z-index: 8; pointer-events: none; transform: rotate(-7deg); padding: 3px 12px; border: 3px solid var(--tc-stamp); outline: 2px solid var(--tc-stamp); outline-offset: 2px; border-radius: 6px;
  background: transparent; mix-blend-mode: multiply; color: var(--tc-stamp); font: 26px/1.25 'Special Elite', var(--body, monospace); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; text-shadow: 0 0 .4px var(--tc-stamp);
  -webkit-mask-image: repeating-linear-gradient(115deg, #000 0 3px, rgba(0,0,0,.72) 3px 5px, #000 5px 9px, rgba(0,0,0,.85) 9px 11px); mask-image: repeating-linear-gradient(115deg, #000 0 3px, rgba(0,0,0,.72) 3px 5px, #000 5px 9px, rgba(0,0,0,.85) 9px 11px); }
html[data-frame=time-card] .lanyard::before { content: "9 TO 5 DAY · FIRST YEAR · 9·25·26"; }
html[data-frame=time-card] .frame-card > .lanyard { font-size: 11px; line-height: 1.2; padding: 1px 7px; border-width: 2px; outline-width: 1.5px; outline-offset: 1.5px; border-radius: 4px; right: calc(var(--fb) * .6); bottom: 18px; transform: rotate(-6deg); }
@media (max-width: 379px) { html[data-frame=time-card] .frame-card > .lanyard { display: none; } }

/* ---- fixture / unknown styles: a clean two-tone frame from the pack palette ---- */
.notch, .lanyard { display: none; }
@media (prefers-reduced-motion: reduce) { .frame-card::after, .board-frame::after { animation: none !important; } }