/* The Midlothian Minute: component styles. Colours and type come from tokens.css. */
.mm { font-family: var(--font-text); color: var(--ink); }
.mm *, .mm *::before, .mm *::after { box-sizing: border-box; }

/* Textures */
.mm-paper { position: relative; background-color: var(--paper); isolation: isolate; }
.mm-paper::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .086 0 0 0 0 .141 0 0 0 0 .227 0 0 0 .55 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); background-size: 300px; mix-blend-mode: multiply; opacity: .55; }
[data-theme="dark"] .mm-paper::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .9 0 0 0 0 .84 0 0 0 .55 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); mix-blend-mode: screen; opacity: .18; }
.mm-halftone { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='4' cy='4' r='2.7' fill='%23000'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='4' cy='4' r='2.7' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size: 5px 5px; mask-size: 5px 5px; }
.mm-torn { -webkit-mask: linear-gradient(#000,#000) top/100% calc(100% - 13px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='14' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 480,0 480,8.7 473,8.8 468,7.1 463,12.8 459,6.5 453,6.3 447,9.9 443,6.1 441,7.1 438,8.8 432,9.1 427,10.0 423,12.0 417,10.2 413,9.7 407,8.4 403,11.7 401,7.3 396,11.9 393,9.8 389,6.5 383,12.5 379,8.6 373,7.1 368,7.1 365,11.9 361,7.3 354,10.8 348,7.3 341,11.9 334,7.3 328,8.0 325,6.5 322,9.6 317,11.8 312,11.2 309,11.5 305,7.1 299,7.2 292,9.6 289,6.2 286,10.2 280,9.6 276,12.3 273,9.4 267,7.7 264,6.1 259,6.4 255,11.4 251,11.3 246,10.1 243,8.2 236,10.2 233,9.8 228,7.9 225,9.3 218,10.4 212,11.5 207,11.4 202,10.7 197,9.7 192,11.7 187,12.0 181,8.3 176,8.6 173,12.5 168,8.9 162,9.0 155,9.5 152,10.1 148,11.4 144,11.4 138,7.2 132,11.5 128,9.5 125,9.0 118,10.3 115,7.0 111,7.3 106,9.0 99,11.9 97,6.2 94,10.3 90,12.7 87,10.7 81,9.4 78,9.8 73,9.9 66,10.1 61,9.1 57,10.3 53,8.1 48,9.7 44,10.8 41,11.6 38,8.7 31,8.3 25,10.8 20,9.9 14,10.9 9,7.3 2,11.9 0,9' fill='%23000'/%3E%3C/svg%3E") bottom/480px 14px repeat-x;
  mask: linear-gradient(#000,#000) top/100% calc(100% - 13px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='14' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 480,0 480,8.7 473,8.8 468,7.1 463,12.8 459,6.5 453,6.3 447,9.9 443,6.1 441,7.1 438,8.8 432,9.1 427,10.0 423,12.0 417,10.2 413,9.7 407,8.4 403,11.7 401,7.3 396,11.9 393,9.8 389,6.5 383,12.5 379,8.6 373,7.1 368,7.1 365,11.9 361,7.3 354,10.8 348,7.3 341,11.9 334,7.3 328,8.0 325,6.5 322,9.6 317,11.8 312,11.2 309,11.5 305,7.1 299,7.2 292,9.6 289,6.2 286,10.2 280,9.6 276,12.3 273,9.4 267,7.7 264,6.1 259,6.4 255,11.4 251,11.3 246,10.1 243,8.2 236,10.2 233,9.8 228,7.9 225,9.3 218,10.4 212,11.5 207,11.4 202,10.7 197,9.7 192,11.7 187,12.0 181,8.3 176,8.6 173,12.5 168,8.9 162,9.0 155,9.5 152,10.1 148,11.4 144,11.4 138,7.2 132,11.5 128,9.5 125,9.0 118,10.3 115,7.0 111,7.3 106,9.0 99,11.9 97,6.2 94,10.3 90,12.7 87,10.7 81,9.4 78,9.8 73,9.9 66,10.1 61,9.1 57,10.3 53,8.1 48,9.7 44,10.8 41,11.6 38,8.7 31,8.3 25,10.8 20,9.9 14,10.9 9,7.3 2,11.9 0,9' fill='%23000'/%3E%3C/svg%3E") bottom/480px 14px repeat-x; }
.mm-torn-top { -webkit-mask: linear-gradient(#000,#000) bottom/100% calc(100% - 13px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='14' preserveAspectRatio='none'%3E%3Cpolygon transform='matrix(1 0 0 -1 0 14)' points='0,0 480,0 480,8.7 473,8.8 468,7.1 463,12.8 459,6.5 453,6.3 447,9.9 443,6.1 441,7.1 438,8.8 432,9.1 427,10.0 423,12.0 417,10.2 413,9.7 407,8.4 403,11.7 401,7.3 396,11.9 393,9.8 389,6.5 383,12.5 379,8.6 373,7.1 368,7.1 365,11.9 361,7.3 354,10.8 348,7.3 341,11.9 334,7.3 328,8.0 325,6.5 322,9.6 317,11.8 312,11.2 309,11.5 305,7.1 299,7.2 292,9.6 289,6.2 286,10.2 280,9.6 276,12.3 273,9.4 267,7.7 264,6.1 259,6.4 255,11.4 251,11.3 246,10.1 243,8.2 236,10.2 233,9.8 228,7.9 225,9.3 218,10.4 212,11.5 207,11.4 202,10.7 197,9.7 192,11.7 187,12.0 181,8.3 176,8.6 173,12.5 168,8.9 162,9.0 155,9.5 152,10.1 148,11.4 144,11.4 138,7.2 132,11.5 128,9.5 125,9.0 118,10.3 115,7.0 111,7.3 106,9.0 99,11.9 97,6.2 94,10.3 90,12.7 87,10.7 81,9.4 78,9.8 73,9.9 66,10.1 61,9.1 57,10.3 53,8.1 48,9.7 44,10.8 41,11.6 38,8.7 31,8.3 25,10.8 20,9.9 14,10.9 9,7.3 2,11.9 0,9' fill='%23000'/%3E%3C/svg%3E") top/480px 14px repeat-x;
  mask: linear-gradient(#000,#000) bottom/100% calc(100% - 13px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='14' preserveAspectRatio='none'%3E%3Cpolygon transform='matrix(1 0 0 -1 0 14)' points='0,0 480,0 480,8.7 473,8.8 468,7.1 463,12.8 459,6.5 453,6.3 447,9.9 443,6.1 441,7.1 438,8.8 432,9.1 427,10.0 423,12.0 417,10.2 413,9.7 407,8.4 403,11.7 401,7.3 396,11.9 393,9.8 389,6.5 383,12.5 379,8.6 373,7.1 368,7.1 365,11.9 361,7.3 354,10.8 348,7.3 341,11.9 334,7.3 328,8.0 325,6.5 322,9.6 317,11.8 312,11.2 309,11.5 305,7.1 299,7.2 292,9.6 289,6.2 286,10.2 280,9.6 276,12.3 273,9.4 267,7.7 264,6.1 259,6.4 255,11.4 251,11.3 246,10.1 243,8.2 236,10.2 233,9.8 228,7.9 225,9.3 218,10.4 212,11.5 207,11.4 202,10.7 197,9.7 192,11.7 187,12.0 181,8.3 176,8.6 173,12.5 168,8.9 162,9.0 155,9.5 152,10.1 148,11.4 144,11.4 138,7.2 132,11.5 128,9.5 125,9.0 118,10.3 115,7.0 111,7.3 106,9.0 99,11.9 97,6.2 94,10.3 90,12.7 87,10.7 81,9.4 78,9.8 73,9.9 66,10.1 61,9.1 57,10.3 53,8.1 48,9.7 44,10.8 41,11.6 38,8.7 31,8.3 25,10.8 20,9.9 14,10.9 9,7.3 2,11.9 0,9' fill='%23000'/%3E%3C/svg%3E") top/480px 14px repeat-x; }

/* Rules */
.mm-rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.mm-rule-double { border: 0; height: 5px; margin: 0; border-top: 2px solid var(--rule); border-bottom: 1px solid var(--rule); }

/* Labels */
.mm-kicker { font-family: var(--font-label); font-weight: 600; font-size: 14px; line-height: 16px; letter-spacing: .14em; text-transform: uppercase; color: var(--esk); margin: 0; }
.mm-dateline { font-family: var(--font-label); font-weight: 500; font-size: 13px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); margin: 0; }

/* Masthead */
.mm-masthead { text-align: center; padding-block: var(--space-6) 0; }
.mm-masthead__name { display: inline-flex; align-items: flex-end; gap: 14px; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 7vw, 64px); line-height: 1; letter-spacing: -.01em; color: var(--ink); margin: 0 0 var(--space-3); text-wrap: balance; }
.mm-masthead__mark { height: 1.35em; width: auto; flex: none; }
.mm-masthead__line { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-block: 7px; border-bottom: 1px solid var(--rule); }

/* Pit tally: after the brass discs miners carried underground */
.mm-tally { position: relative; display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: var(--radius-full);
  background: var(--esk); color: var(--on-esk); font-family: var(--font-label); text-align: center; flex: none; }
.mm-tally::before { content: ""; position: absolute; top: 7px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: var(--radius-full); background: var(--paper); }
.mm-tally::after { content: ""; position: absolute; inset: 4px; border-radius: var(--radius-full); border: 1px solid var(--on-esk); opacity: .45; }
.mm-tally__label { display: block; font-size: 10px; line-height: 10px; letter-spacing: .14em; font-weight: 600; text-transform: uppercase; margin-top: 10px; }
.mm-tally__num { display: block; font-size: 30px; line-height: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mm-tally--lg { width: 112px; height: 112px; }
.mm-tally--lg::before { top: 10px; width: 12px; height: 12px; margin-left: -6px; }
.mm-tally--lg .mm-tally__label { font-size: 13px; margin-top: 16px; }
.mm-tally--lg .mm-tally__num { font-size: 48px; line-height: 44px; }

/* Rubber stamp */
.mm-stamp { display: inline-block; font-family: var(--font-label); font-weight: 600; font-size: 15px; line-height: 16px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brick); border: 2px solid var(--brick); outline: 1px solid var(--brick); outline-offset: 2px; padding: 5px 9px 4px; transform: rotate(-3deg); margin: 4px; }
.mm-stamp--esk { color: var(--esk); border-color: var(--esk); outline-color: var(--esk); transform: rotate(2deg); }

/* Clipping */
.mm-clipping { position: relative; background: var(--paper-deep); color: var(--ink); padding: var(--space-4) var(--space-4) calc(var(--space-6) + 6px); max-width: 360px;
  box-shadow: var(--shadow-paper); transform: rotate(-1.2deg); }
.mm-clipping__inner { position: relative; }
.mm-clipping h3 { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 27px; margin: var(--space-1) 0 var(--space-2); text-wrap: balance; }
.mm-clipping p { margin: 0; font-size: 15px; line-height: 23px; }
.mm-tape { position: absolute; width: 84px; height: 24px; background: var(--esk-soft); opacity: .8; top: -10px; left: 50%; margin-left: -42px; transform: rotate(-4deg); z-index: 2; }
.mm-clipwrap { position: relative; display: inline-block; filter: drop-shadow(0 8px 10px rgba(22,36,58,.18)); }

/* Buttons and signup */
.mm-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: var(--radius-1);
  font-family: var(--font-label); font-weight: 600; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  background: var(--esk); color: var(--on-esk); border: 2px solid var(--esk); }
.mm-button:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.mm-button--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.mm-button--ghost:hover { background: var(--ink); color: var(--paper); }
.mm-button:focus-visible, .mm-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mm-input { min-height: 44px; padding: 0 12px; border-radius: var(--radius-1); border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink);
  font-family: var(--font-text); font-size: 17px; min-width: 0; flex: 1 1 200px; }
.mm-input::placeholder { color: var(--ink-muted); }
.mm-signup { border-top: 2px solid var(--rule); border-bottom: 1px solid var(--rule); padding-block: var(--space-6); display: grid; gap: var(--space-3); max-width: 620px; }
.mm-signup h3 { font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 38px; margin: 0; }
.mm-signup p { margin: 0; font-size: 17px; line-height: 27px; }
.mm-signup form { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.mm-signup small { font-family: var(--font-text); font-style: italic; font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* Video title card, 16:9 */
.mm-titlecard { position: relative; aspect-ratio: 16 / 9; width: 100%; max-width: 100%; overflow: hidden; container-type: inline-size; background: var(--paper); }
.mm-titlecard__band { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: var(--esk-soft); }
.mm-titlecard__sky { position: absolute; right: 3%; bottom: 8.7%; width: 62%; }
[data-theme="dark"] .mm-titlecard__sky { filter: invert(1) sepia(.25); }
.mm-titlecard__ground { position: absolute; left: 0; right: 0; bottom: 0; height: 9%; background: var(--night); }
.mm-titlecard__copy { position: absolute; left: 5%; top: 8%; width: 56%; display: grid; gap: 1.2cqw; z-index: 3; }
.mm-titlecard__copy .mm-kicker { font-size: max(11px, 1.6cqw); line-height: 1; }
.mm-titlecard__title { font-family: var(--font-display); font-weight: 400; font-size: 5.6cqw; line-height: 1.04; letter-spacing: -.01em; margin: 0; color: var(--ink); text-wrap: balance; }
.mm-titlecard__title em { font-style: normal; color: var(--brick); }
.mm-titlecard__tally { position: absolute; right: 5%; top: 8%; z-index: 3; }
.mm-titlecard__tally .mm-tally { width: 9cqw; height: 9cqw; }
.mm-titlecard__tally .mm-tally::before { top: .9cqw; width: 1cqw; height: 1cqw; margin-left: -.5cqw; }
.mm-titlecard__tally .mm-tally__label { font-size: 1.1cqw; line-height: 1; margin-top: 1.4cqw; }
.mm-titlecard__tally .mm-tally__num { font-size: 3.8cqw; line-height: 1; }
.mm-titlecard__brand { position: absolute; left: 5%; bottom: 2.2%; height: 4.6%; z-index: 4; }
.mm-titlecard__scrap { position: absolute; left: 4%; bottom: 17%; width: 30%; height: 16%; background: var(--paper-deep); transform: rotate(-2deg); z-index: 2; padding: 1.4cqw 1.6cqw; display: grid; align-content: start; gap: .5cqw; }
.mm-titlecard__scrap .mm-dateline { font-size: max(9px, 1.25cqw); line-height: 1.1; color: var(--ink-muted); }
.mm-titlecard__scrap p:last-child { margin: 0; font-family: var(--font-display); font-size: 2.2cqw; line-height: 1.1; color: var(--ink); }

/* Social tile, 4:5 */
.mm-social { position: relative; aspect-ratio: 4 / 5; width: 100%; max-width: 100%; overflow: hidden; container-type: inline-size; background: var(--night); color: var(--on-night); }
.mm-social__sheet { position: absolute; left: 7%; right: 7%; top: 16%; bottom: 17%; background: var(--paper); color: var(--ink); padding: 8cqw 7cqw; display: grid; align-content: start; gap: 3cqw; transform: rotate(-1.5deg); }
.mm-social__sheet .mm-kicker { font-size: 3.6cqw; line-height: 1; }
.mm-social__fact { font-family: var(--font-display); font-weight: 400; font-size: 8.6cqw; line-height: 1.06; margin: 0; text-wrap: balance; }
.mm-social__source { font-style: italic; font-size: 3.6cqw; line-height: 1.3; color: var(--ink-muted); margin: 0; }
.mm-social__top { position: absolute; left: 7%; right: 7%; top: 5.5%; display: flex; justify-content: space-between; align-items: center; }
.mm-social__top .mm-dateline { color: var(--on-night); font-size: 3.4cqw; line-height: 1; }
.mm-social__foot { position: absolute; left: 7%; right: 7%; bottom: 5%; height: 6.5%; display: flex; align-items: center; }
.mm-social__foot img { height: 100%; width: auto; }
.mm-social__stamp { position: absolute; right: 9%; bottom: 20%; font-size: 3.6cqw; line-height: 1; z-index: 6; }

@media (prefers-reduced-motion: reduce) { .mm * { transition: none !important; } }