/* Preserve the authored palette when browsers offer automatic darkening. */ :root{color-scheme:only light} @font-face{font-family:Malboro;src:url('/assets/malboro.woff2') format('woff2');font-display:swap}@font-face{font-family:Playfair;src:url('/assets/playfair.woff2') format('woff2');font-display:swap}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}main,footer{overflow-x:clip}body{margin:0;background:#191b17;color:#e9dfc7;font:16px/1.7 Playfair,Georgia,serif}a{color:inherit;text-underline-offset:5px}button,input{font:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.65;cursor:wait}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #d8a661;outline-offset:5px}button:active,.button:active{transform:translateY(2px)}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-weight:400;line-height:1.04}h1,h2{font-family:Malboro,Georgia,serif;text-transform:uppercase}h2{font-size:clamp(46px,5.5vw,88px);letter-spacing:.015em}h3{font-family:Malboro,serif;font-size:37px}em{font-style:normal;color:#b8945c}p{margin-bottom:1.3em}header{height:106px;display:flex;align-items:center;justify-content:space-between;padding:12px 4.5%;border-bottom:1px solid #dbc69e35;background:#191b17}header img{height:80px;width:135px;object-fit:contain}.header-note{font:10px/1.7 monospace;letter-spacing:2px;text-align:center}.nav-cta{font:13px/1.5 monospace;text-transform:uppercase;text-decoration:none;border-bottom:1px solid #bca06b;padding:12px 0}.nav-cta span{margin-left:20px}.eyebrow,.chapter,.hero-foot,.scroll-note,.photo-caption{font:10px/1.6 monospace;letter-spacing:2px;text-transform:uppercase}.eyebrow{display:block;margin-bottom:22px}.hero{position:relative;min-height:max(730px,calc(100svh - 106px));height:auto;isolation:isolate;overflow:hidden}.hero-image{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center 53%;z-index:-3}.hero-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(14,18,16,.92),rgba(14,18,16,.56) 40%,rgba(14,18,16,.03) 75%),linear-gradient(0deg,#161914a6,transparent 45%)}.hero-copy{padding:55px 7% 100px;max-width:900px}.hero h1{font-size:clamp(88px,9.4vw,160px);line-height:.9;letter-spacing:1px;margin:0 0 26px}.hero-copy p{font-size:clamp(17px,1.5vw,22px);line-height:1.6}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:26px;min-height:54px;border:1px solid #d5ae71;background:#d5ae71;color:#211e18;padding:14px 23px;font:13px/1.5 monospace;text-transform:uppercase;letter-spacing:.7px;text-decoration:none;transition:background .2s,transform .2s}.button:hover{background:#ebc98e}.hero-foot{display:block;margin-top:17px;font-size:9px;letter-spacing:1px}.weather-note{position:absolute;right:5%;bottom:110px;transform:rotate(3deg);padding:25px;border:1px solid #d2bb8c90;background:#151c17e8;box-shadow:8px 8px 0 #0003}.weather-note span{font:9px monospace;letter-spacing:2px}.weather-note strong{display:block;font:27px/1.2 Playfair;margin:15px 0 20px;font-weight:400}.scroll-note{position:absolute;bottom:25px;left:7%;right:5%;display:flex;justify-content:space-between;text-decoration:none;border-top:1px solid #e4d4b240;padding-top:18px}.dispatch-story{background:#e6dcc2;color:#30291e;padding:48px 7% 90px;position:relative}.chapter{display:flex;justify-content:space-between;border-bottom:1px solid #6c594c55;padding-bottom:22px;font-size:9px}.story-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:9%;padding-top:60px}.story-grid h2{margin:0}.story-grid em{color:#795833}.lead{font-size:23px;line-height:1.6}.signature{display:block;font-size:30px;font-style:italic;transform:rotate(-5deg);margin:25px 0 7px}.story-grid small{font:8px monospace;letter-spacing:1.5px}.run{display:grid;grid-template-columns:1.03fr 1fr}.run-photo{position:sticky;top:0;align-self:start;height:100svh;max-height:1100px;min-height:700px}.run-photo img{height:100%;width:100%;object-fit:cover;object-position:48% center}.photo-caption{position:absolute;bottom:0;left:0;right:0;padding:35px 20px 20px;background:linear-gradient(transparent,#141510);font-size:8px}.run-content{padding:90px 12% 85px}.run-content h2{font-size:clamp(48px,4.5vw,73px)}.manifest{background:#d9cbaa;color:#393a2c;padding:25px;margin-top:45px;transform:rotate(-2deg);box-shadow:10px 12px 0 #0003}.manifest-top{font-family:Malboro;font-size:30px;border-bottom:3px double #5e5d49;display:flex;flex-direction:column}.manifest-top span{font:9px monospace;letter-spacing:2px;margin:5px 0 15px}.manifest-row{padding:18px 0;border-bottom:1px solid #6d6b5455}.manifest-row span{font:9px monospace;display:block}.manifest-row strong{font-weight:400;font-size:18px}.stamp{margin:20px 0 0 auto;width:max-content;max-width:100%;border:3px double #725130;color:#725130;padding:7px 12px;transform:rotate(-8deg);font:17px Malboro}.reverend{padding:90px 10%;background:#28362f;border-top:1px solid #b4ad8838}.reverend-grid{display:grid;grid-template-columns:1fr 1fr;gap:14%;align-items:center}.reverend h2{font-size:clamp(60px,8vw,118px);margin:0}.invitation{padding:95px 7%;display:grid;grid-template-columns:1fr 1fr;gap:12%;background:radial-gradient(ellipse at 20% 80%,#45423255,transparent 70%),#1b211c}.invitation-intro{padding:18px 0}.invitation-intro p{max-width:360px;font-size:19px}.postmark{border:3px double #bda67c80;border-radius:50%;width:160px;height:160px;display:flex;flex-direction:column;justify-content:center;align-items:center;transform:rotate(-15deg);font:9px/2.3 monospace;color:#bda67c;margin-top:45px}.postmark b{font-size:15px;font-weight:400}.paper{background:#e9dfc7;color:#322d23;padding:38px 36px;box-shadow:8px 8px 0 #0002;align-self:start;border-top:6px double #8a7957}.paper .eyebrow{font-size:9px;letter-spacing:1px;margin-bottom:16px}.paper p{font-size:15px}.paper .fine,.fine{font:12px/1.7 Georgia,serif}.paper label:not(.check){display:block;font-size:14px;margin-bottom:7px}.paper input[type=email]{min-width:0;width:100%;border:1px solid #7b705a;background:#f5eddc;color:#28271f;padding:13px 12px;border-radius:0;min-height:50px}.check{display:flex;gap:12px;align-items:flex-start;margin:20px 0;font:13px/1.65 Georgia,serif;min-height:44px;cursor:pointer}.check input{appearance:auto;accent-color:#735329;flex-shrink:0;width:20px;height:20px;margin:3px 0}.paper .button{width:100%;background:#29392f;border-color:#29392f;color:#fff0cf}.paper .button:hover{background:#405443}.form-status{margin:15px 0 0;font:14px/1.5 Georgia}.form-status:empty{display:none}.paper dl{margin:25px 0}.paper dl div{display:flex;gap:20px;justify-content:space-between;border-bottom:1px solid #62523844;padding:12px 0;font-size:12px}.paper dd{text-align:right;margin:0}.ticket-paper>a{font-size:13px}.faq{padding:90px 15%;background:#e6dcc2;color:#30291e}.faq h2{font-size:56px}.faq details{border-top:1px solid #7a684b77}.faq details:last-child{border-bottom:1px solid #7a684b77}.faq summary{padding:22px 28px 22px 0;cursor:pointer;font-size:18px;min-height:60px}.faq details p{font-size:15px;max-width:650px;padding:0 0 15px}footer{padding:45px 7%;display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;border-top:1px solid #dbc69e35;font-size:14px}footer img{width:130px;height:90px;object-fit:contain}footer nav{display:flex;flex-direction:column;align-items:start}footer nav a,footer button{min-height:44px;display:flex;align-items:center}footer small{grid-column:1/-1;font:10px/1.7 monospace;opacity:.7}.text-button{background:none;border:0;color:inherit;padding:10px 0;text-decoration:underline;text-underline-offset:4px;font-size:13px;min-height:44px}.mobile-cta{display:none}dialog{width:min(560px,calc(100% - 32px));max-height:calc(100svh - 32px);overflow:auto;background:#e9dfc7;color:#322d23;border:1px solid #c7ab77;padding:45px 35px;box-shadow:0 20px 80px #0008}dialog::backdrop{background:#0b110dde;backdrop-filter:blur(5px)}dialog h2{font-size:48px}dialog p{font-size:15px}.close{position:sticky;top:-30px;display:block;margin:-30px -20px 0 auto;width:44px;height:44px;background:transparent;border:0;font:30px Georgia;color:inherit}dialog .text-button{display:block}.cookie-note{position:fixed;bottom:20px;left:20px;max-width:420px;background:#e9dfc7;color:#312b22;padding:16px 20px;z-index:20;box-shadow:0 5px 35px #0005;border:1px solid #ab9470;display:flex;flex-wrap:wrap;gap:0 18px}.cookie-note p{width:100%;font-size:14px;margin:0 0 6px}.cookie-note small{font:11px/1.5 Georgia}.cookie-note button{min-height:44px;background:none;border:0;border-bottom:1px solid #715832;font:12px monospace;padding:8px 0;color:inherit}.cookie-note[hidden]{display:none}.legal{max-width:900px;padding:80px 7%;margin:auto;min-height:65vh}.legal h1{font-size:clamp(52px,7vw,90px)}.legal h2{font-size:37px}.legal h3{font:24px Playfair;margin-top:40px}.skip{position:fixed;top:-100px;left:15px;z-index:99;background:#e9dfc7;color:#211e18;padding:15px}.skip:focus{top:15px}@media(min-width:1600px){.hero-copy{padding-top:85px}}@media(max-width:900px){.header-note{display:none}.hero-copy{padding-top:65px}.hero h1{font-size:110px}.weather-note{right:5%;bottom:100px;padding:17px}.weather-note strong{font-size:22px}.story-grid{gap:6%}.story-grid h2{font-size:57px}.lead{font-size:20px}.run-content{padding:65px 9%}.run-photo{min-height:700px}.invitation{gap:6%}.paper{padding:30px 25px}.invitation h2{font-size:57px}.reverend{padding:65px 7%}.faq{padding:65px 9%}}@media(max-width:600px){header{height:82px;padding:7px 6%}header img{height:66px;width:110px}.nav-cta{font-size:10px;letter-spacing:0}.nav-cta span{margin-left:9px}.hero{min-height:max(720px,calc(100svh - 82px));height:auto}.hero-copy{padding:50px 7% 115px}.hero h1{font-size:100px}.hero-copy .eyebrow{font-size:8px;letter-spacing:1.5px}.hero-copy p{font-size:17px}.hero-image{object-position:52% center}.hero-shade{background:linear-gradient(90deg,#101a16dc,#11171238),linear-gradient(0deg,#161914 0%,transparent 60%)}.hero-foot{font-size:8px;max-width:280px;line-height:1.8}.hero .button{font-size:11px;gap:15px;padding:14px 17px}.weather-note{display:none}.scroll-note{font-size:8px;bottom:24px}.dispatch-story{padding:30px 7% 55px}.chapter{font-size:7px;letter-spacing:1px;gap:15px}.chapter span:last-child{text-align:right}.story-grid{display:block;padding-top:35px}.story-grid h2{font-size:57px;margin-bottom:30px}.story-grid p{font-size:16px}.story-grid .lead{font-size:20px}.run{display:flex;flex-direction:column}.run-photo{position:relative;height:380px;min-height:0;width:100%}.run-photo img{object-position:center}.run-content{padding:50px 7% 60px}.run-content h2{font-size:59px}.manifest{margin:35px 3% 0;padding:23px}.reverend-grid{display:block}.reverend h2{font-size:86px;margin-bottom:28px}.invitation{display:block;padding:55px 6%}.invitation h2{font-size:60px}.invitation-intro p{font-size:17px}.postmark{display:none}.paper{margin-top:28px;padding:30px 23px}.paper h3{font-size:34px}.paper .button{font-size:11px;gap:10px;padding:14px}.faq{padding:55px 7%}.faq h2{font-size:49px}.faq summary{font-size:16px}footer{grid-template-columns:1fr 1fr;padding:35px 7% 105px;gap:20px}footer nav{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;gap:0 20px}footer p{font-size:13px}footer small{font-size:8px}.mobile-cta{position:fixed;display:flex;bottom:0;left:0;right:0;z-index:10;font-size:11px;padding:16px 6% calc(16px + env(safe-area-inset-bottom));border:0;box-shadow:0 -6px 25px #0003}.cookie-note{bottom:75px;left:12px;right:12px;padding:14px 17px;max-width:none}dialog{padding:35px 24px}dialog h2{font-size:41px}dialog .close{top:-25px;margin-top:-20px}.legal{padding:50px 7%}}@media(max-width:350px){.hero h1{font-size:87px}.hero-copy{padding-top:38px}.hero{min-height:660px}.hero-copy p{font-size:15px}.story-grid h2{font-size:49px}.invitation h2{font-size:53px}.paper{padding:25px 17px}.paper .button{font-size:10px}}@media(max-height:500px) and (min-width:601px){.hero{height:auto;min-height:660px}.cookie-note{max-width:360px;bottom:10px;padding:10px 16px}dialog{max-height:calc(100svh - 20px)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}} .manifest-row{transition:color .5s,border-color .5s}.manifest-row.entered{color:#78582f;border-bottom-color:#78582f}.manifest-row.entered strong:after{content:'';font-family:Georgia;color:#546040} .scroll-note{min-height:44px}.nav-cta{min-height:44px}.manifest-row strong:after{display:inline-block;min-width:16px} @media(max-width:600px){.run-content h2{font-size:clamp(47px,15vw,59px)}.reverend h2{font-size:clamp(62px,22vw,86px)}} @media(max-width:600px){.hero h1{font-size:clamp(72px,22vw,100px)}} .hero{height:auto;max-height:none;min-height:max(730px,calc(100svh - 106px))}header{height:auto;min-height:106px}.story-grid>* ,.run>* ,.reverend-grid>* ,.invitation>*{min-width:0}h1,h2,h3,.button{overflow-wrap:anywhere}.hero-copy{position:relative}.hero h1{max-width:100%}.paper dl div{flex-wrap:wrap}.paper dd{margin-left:auto}.legal{overflow-wrap:anywhere} @media(max-width:600px){header{min-height:82px}.hero{min-height:max(720px,calc(100svh - 82px))}.mobile-cta{max-height:35svh;overflow:auto}.hero-copy{padding-bottom:105px}} @media(max-width:350px){.hero{min-height:660px}} .paper :focus-visible,dialog :focus-visible,.faq :focus-visible,.dispatch-story :focus-visible,.cookie-note :focus-visible{outline-color:#354f3e} @media(max-width:600px){.scroll-note{bottom:80px}body:has(#waitlist:focus-within) .mobile-cta{display:none}} [hidden]{display:none!important} header>a{display:flex;align-items:center;min-height:44px} /* ============================================================ MOTION - "the line is down, the wire still works" Coldwater, Kansas, 1904. A telegraph-and-blizzard vocabulary: type arrives in struck lines, cards slide like dealt paper, photographs drift against a driving wind. ============================================================ */ :root{ --ease-out-expo:cubic-bezier(.16,1,.3,1); --ease-deal:cubic-bezier(.22,1.14,.36,1); } .js [data-reveal]{will-change:transform,opacity} .js [data-reveal].in{will-change:auto} /* Struck: the line arrives from under a mask, like a printed strike. */ .js [data-reveal="struck"]:not(.in){opacity:0;clip-path:inset(0 0 100% 0);transform:translate3d(0,.2em,0)} .js [data-reveal="struck"].in{opacity:1;clip-path:inset(-20% 0 -20% 0);transform:none; transition:clip-path 660ms var(--ease-out-expo),opacity 280ms linear,transform 660ms var(--ease-out-expo)} .js [data-reveal="drift"]:not(.in){opacity:0;transform:translate3d(-26px,14px,0)} .js [data-reveal="drift"].in{opacity:1;transform:none; transition:opacity 480ms linear,transform 720ms var(--ease-out-expo)} /* Dealt: paper laid down on a table, with a little overshoot. */ .js [data-reveal="dealt"]:not(.in){opacity:0;transform:translate3d(0,46px,0) rotate(var(--deal,-2.5deg)) scale(.97)} .js [data-reveal="dealt"].in{opacity:1;transform:rotate(var(--deal-rest,0deg)); transition:opacity 520ms linear,transform 880ms var(--ease-deal)} .js [data-reveal-group]>[data-reveal]:nth-child(2){transition-delay:110ms} .js [data-reveal-group]>[data-reveal]:nth-child(3){transition-delay:220ms} .js [data-reveal-group]>[data-reveal]:nth-child(4){transition-delay:330ms} [data-deal="a"]{--deal:-4deg;--deal-rest:-1.2deg} [data-deal="b"]{--deal:3.5deg;--deal-rest:1deg} /* Hero: the storm arrives before the type does. */ @keyframes stormIn{from{opacity:0;transform:translateZ(-620px) scale(1.56)}to{opacity:1;transform:translateZ(-620px) scale(1.443)}} @keyframes strikeIn{from{opacity:0;clip-path:inset(0 0 100% 0);transform:translate3d(0,.18em,0)} to{opacity:1;clip-path:inset(-20% 0 -20% 0);transform:none}} @keyframes slideUp{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}} .hero picture,.hero>img{position:absolute;inset:0;display:block} .js .hero picture,.js .hero>img{animation:stormIn 2400ms var(--ease-out-expo) both} .js .hero .eyebrow{animation:slideUp 700ms var(--ease-out-expo) 220ms both} .js .hero h1{animation:strikeIn 1250ms var(--ease-out-expo) 340ms both} .js .hero-sub,.js .hero p:not(.eyebrow){animation:slideUp 820ms var(--ease-out-expo) 720ms both} .js .hero .button{animation:slideUp 820ms var(--ease-out-expo) 880ms both} /* Telegraph cards and stamps land rather than appear. */ .js .stamp{transition:transform 600ms var(--ease-deal)} .js .stamp:not(.in){transform:scale(1.7) rotate(-22deg);opacity:0} .js .stamp.in{transform:none;opacity:1} /* Photographs lift toward the cursor, against the wind. */ .run img,.reverend img,.dispatch-story img{transition:transform 820ms var(--ease-out-expo),filter 820ms var(--ease-out-expo)} .run img:hover,.reverend img:hover,.dispatch-story img:hover{transform:translateY(-7px) scale(1.012);filter:brightness(1.06) contrast(1.03)} /* FAQ opens instead of snapping. */ .faq details>*:not(summary){animation:slideUp 520ms var(--ease-out-expo) both} .faq summary{transition:color 220ms linear} .button{transition:background 220ms linear,transform 240ms var(--ease-out-expo),box-shadow 360ms var(--ease-out-expo)} /* Weather above the page, below every control surface. */ .weather-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:3} /* ---- Browser surfaces ---- */ ::selection{background:#c8a24a;color:#1b1a15} ::-moz-selection{background:#c8a24a;color:#1b1a15} input,textarea{caret-color:#8a6a2f} html{scrollbar-color:#5d5340 #1b1a15;scrollbar-width:thin} ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-track{background:#171610} ::-webkit-scrollbar-thumb{background:#4a4233;border:3px solid #171610} ::-webkit-scrollbar-thumb:hover{background:#6d6047} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*:before,*:after{animation:none!important;transition:none!important} .weather-canvas{display:none} .js [data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important} } /* A resting rotation widens an element's bounding box beyond its layout box, which pushes the document sideways on a narrow screen. Keep the dealt-card tilt for the entrance, but settle flat where there is no room for it. */ @media(max-width:760px){ [data-deal="a"],[data-deal="b"]{--deal-rest:0deg;--deal:0deg} .run-photo{max-width:100%} } /* Horizontal overflow is fixed at its source (rotated elements now settle flat on narrow screens). An overflow value here propagates to the viewport and takes vertical scrolling with it, so there must not be one. */ /* ---- Typographic tracking is size-specific ---- A single positive value across a 46px-to-160px range is wrong at the top of it. Tighten display sizes; body copy stays at 0. */ h2{letter-spacing:-.015em} .hero h1{letter-spacing:-.02em} /* ---- Display-preference support ---- Reduced motion is already handled above. These two are separate signals and were unhandled: a viewer can want solid surfaces or stronger contrast without wanting motion removed. */ @media(prefers-reduced-transparency:reduce){ .weather-canvas{display:none} header,.header{backdrop-filter:none} dialog::backdrop{backdrop-filter:none} } @media(prefers-contrast:more){ .small,.fine,.hero-note,figcaption,.eyebrow{color:inherit} .button,.btn{outline:1px solid currentColor;outline-offset:-1px} .faq details,.inventory details{border-bottom-width:2px} input[type=email],select,input[type=text]{border-width:2px} } /* Icons are drawn at one stroke weight, not borrowed from the text font. */ .ico{width:1em;height:1em;display:block;flex:none} .button .ico,.btn .ico{width:1.2em;height:1.2em;transition:transform 320ms var(--ease-out-expo)} .button:hover .ico,.btn:hover .ico{transform:translate(2px,-2px)} dialog .close .ico,[data-close] .ico{width:24px;height:24px;margin:auto} footer .ico,.faq .ico,a .ico{width:.85em;height:.85em;display:inline-block;vertical-align:-.08em;margin-left:.3em} /* ============================================================ THE DISPATCH BOARD - Moonshine's set piece Telegram slips on a spike. Choosing one brings its message forward on Western Plains Telegraph paper, stamped RECEIVED. ============================================================ */ .faq{display:block;padding-bottom:clamp(70px,9vh,130px)} .wire-head{max-width:720px;margin:0 0 clamp(34px,5vh,60px)} .wire-hint{font-size:15px;color:#9a917d;margin-top:14px;font-style:italic} .wire{display:grid;grid-template-columns:minmax(230px,.68fr) minmax(0,1.32fr); gap:clamp(24px,3.4vw,58px);align-items:start;max-width:1280px} /* The spike: slips hang off a single vertical rule. */ .wire-spike{position:relative;display:flex;flex-direction:column;gap:10px;padding-left:22px} .wire-spike:before{content:'';position:absolute;left:5px;top:6px;bottom:6px;width:1px; background:linear-gradient(#7d7461,#7d746122)} .slip{position:relative;text-align:left;width:100%;background:#ece4cf;color:#26251d;border:0; border-left:1px solid #b9ab8a;padding:15px 16px 15px 18px;min-height:56px;cursor:pointer; box-shadow:2px 3px 0 #00000026; transform:rotate(var(--tilt,-.5deg)); transition:transform 420ms var(--ease-out-expo),box-shadow 420ms var(--ease-out-expo), background 260ms linear,border-color 260ms linear} .slip:nth-child(2n){--tilt:.7deg} .slip:nth-child(3n){--tilt:-1.1deg} .slip-code{display:block;font:9px/1 monospace;letter-spacing:2px;color:#8a7f66;margin-bottom:7px} .slip-q{display:block;font-size:14.5px;line-height:1.35} /* The pin that holds it to the spike. */ .slip-pin{position:absolute;left:-22px;top:50%;width:9px;height:9px;border-radius:50%; background:#6d6353;box-shadow:0 0 0 2px #1b1a15;transform:translateY(-50%); transition:background 260ms linear,box-shadow 260ms linear} .slip:hover{transform:rotate(0deg) translateX(3px);box-shadow:4px 5px 0 #00000033} .slip:focus-visible{outline:2px solid #c8a24a;outline-offset:4px} /* The pulled dispatch sits straight and proud of the others. */ .slip[aria-selected="true"]{background:#f7f1e1;border-left-color:#a9701f; transform:rotate(0deg) translateX(9px);box-shadow:6px 7px 0 #0000003d} .slip[aria-selected="true"] .slip-code{color:#a9701f} .slip[aria-selected="true"] .slip-pin{background:#c8a24a;box-shadow:0 0 0 2px #1b1a15,0 0 12px #c8a24a80} /* The telegram itself. */ .telegram{position:relative;background:#f7f2e3;color:#221f18;border:1px solid #c0b494; padding:clamp(26px,3vw,44px);box-shadow:0 22px 54px #00000047; background-image:repeating-linear-gradient(0deg,#7a6b3f0a 0,#7a6b3f0a 1px,transparent 1px,transparent 26px); display:grid;align-content:start;gap:0;min-height:320px} .tg-head{display:flex;justify-content:space-between;gap:16px;font:9px/1 monospace;letter-spacing:2.2px; color:#7d7053;border-bottom:2px solid #221f18;padding-bottom:12px} .tg-meta{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;align-items:baseline; padding:16px 0;border-bottom:1px dashed #b2a684} .tg-meta span{font:9px/1 monospace;letter-spacing:1.8px;color:#8b7f60} .tg-meta b{font:12px/1.4 monospace;letter-spacing:1px;font-weight:700;color:#3a352a} .telegram h3{font-size:clamp(23px,2.3vw,34px);line-height:1.1;letter-spacing:-.015em;margin-top:26px;max-width:22ch} .telegram>p{font-size:16px;line-height:1.72;margin-top:16px;max-width:56ch;color:#393428} .telegram>p a{color:#8a5a12} .tg-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:30px; padding-top:18px;border-top:2px solid #221f18} .tg-stop{font:10px/1 monospace;letter-spacing:3px;color:#7d7053} .tg-mark{font:15px/1 monospace;letter-spacing:3px;color:#8a5a12;border:2px solid #8a5a12; padding:6px 11px;transform:rotate(-6deg);opacity:.85} /* The message comes in over the wire, line by line. */ @keyframes wireIn{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0 0 -4% 0)}} @keyframes markHit{from{opacity:0;transform:scale(1.7) rotate(-26deg)}to{opacity:.85;transform:rotate(-6deg)}} .js .telegram[data-enter]{animation:wireIn 640ms var(--ease-out-expo) both} .js .telegram[data-enter] .tg-mark{animation:markHit 460ms var(--ease-deal) 300ms both} @media(max-width:900px){ .wire{grid-template-columns:minmax(0,1fr);gap:28px} .telegram{min-height:0} } @media(prefers-reduced-motion:reduce){ .js .telegram[data-enter],.js .telegram[data-enter] .tg-mark{animation:none} .slip{transform:none} } [hidden]{display:none!important} /* .tg-head and .tg-foot are
/