@font-face{font-family:'Druk';src:url(/assets/fonts/DrukWideBold.ttf) format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'SpaceMono';src:url(/assets/fonts/spacemono-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'SpaceMono';src:url(/assets/fonts/spacemono-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
:root{--paper:#FFFDFA;--ink:#000;--yellow:#FFCC00;--photo:#D6D4CF;--tan:#E5DAC3;--rule:3px;--field:var(--paper);--onfield:var(--ink);--display:'Druk','Arial Black',sans-serif;--text:'SpaceMono',ui-monospace,monospace}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--text);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
.wrap{width:100%;max-width:1720px;margin:0 auto;padding:24px;flex:1;display:flex;flex-direction:column}
.ticker{display:flex;align-items:stretch;border:var(--rule) solid var(--ink);border-bottom:0;padding:0;font-size:15px;text-transform:uppercase;letter-spacing:.05em;overflow:hidden}
.ticker .marquee{flex:1;overflow:hidden;min-width:0;display:flex;align-items:center;padding:12px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent)}
.ticker .track{display:flex;flex:none;width:max-content;animation:mq 34s linear infinite}
.ticker .mark{white-space:nowrap;font-family:var(--display);font-weight:700;letter-spacing:.01em}
.ticker .mark::after{content:'\00B7 ';padding:0 22px;font-weight:400;font-family:var(--text)}
.ticker:hover .track{animation-play-state:paused}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker .navzone{flex:none;display:flex;align-items:center;justify-content:center;padding:0 20px;border-left:var(--rule) solid var(--ink)}
.ticker .navzone:hover{background:var(--ink)}
.navbtn{display:flex;flex-direction:column;justify-content:center;gap:6px;width:38px;height:28px;padding:0;background:none;border:0;cursor:pointer}
.navbtn span{display:block;height:4px;width:100%;background:var(--ink)}
.navzone:hover .navbtn span{background:var(--yellow)}
.navbtn:focus-visible{outline:4px solid var(--ink);outline-offset:4px}
.navzone:hover .navbtn:focus-visible{outline-color:var(--yellow)}
.navpanel{position:fixed;inset:0;z-index:50;background:var(--ink);color:var(--paper);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:6vw}
.navpanel[hidden]{display:none}
.navpanel nav{display:flex;flex-direction:column;width:100%}
.navpanel a{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;line-height:1.08;font-size:clamp(24px,5.4vw,64px);color:var(--paper);text-decoration:none;border-top:.1em solid var(--paper);padding:.14em 0}
.navpanel a:last-of-type{border-bottom:.1em solid var(--paper)}
.navpanel a:hover{color:var(--yellow)}
.navpanel a:focus-visible{outline:4px solid var(--yellow);outline-offset:-6px}
.navclose{margin-top:32px;font-family:var(--text);font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.05em;color:var(--paper);background:none;border:0;cursor:pointer}
.navclose:hover{background:var(--paper);color:var(--ink)}
.navclose:focus-visible{outline:4px solid var(--yellow);outline-offset:3px}
.d{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:.96;letter-spacing:-.01em}
.meta{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.cta{font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.05em;white-space:nowrap;color:inherit;text-decoration:none}
.body{font-size:15px;line-height:1.65;max-width:76ch}
.body+.body{margin-top:1.1em}
a:focus-visible,button:focus-visible{outline:4px solid var(--ink);outline-offset:3px}
[data-field="ink"] .head a:focus-visible{outline-color:var(--yellow)}
/* field-colour heads */
.head{border:var(--rule) solid var(--ink);border-bottom:0;background:var(--field);color:var(--onfield);padding:22px;display:flex;flex-direction:column;gap:14px;justify-content:flex-end;min-height:260px}
[data-field="ink"]{--field:var(--ink);--onfield:var(--paper)}
[data-field="tan"]{--field:var(--tan);--onfield:var(--ink)}
[data-field="yellow"]{--field:var(--yellow);--onfield:var(--ink)}
[data-field="paper"]{--field:var(--paper);--onfield:var(--ink)}
[data-field="ink"] .head .d{color:var(--yellow)}
.head .d{font-size:clamp(30px,7vw,88px);padding-bottom:.08em;padding-top:.02em;overflow-wrap:break-word;hyphens:manual}
.head .meta{opacity:.85}
main{border:var(--rule) solid var(--ink);padding:22px;flex:1}
.screen-nav{display:flex;justify-content:space-between;gap:16px;border:var(--rule) solid var(--ink);border-top:0;padding:14px 18px;flex-wrap:wrap}
.screen-nav a{color:inherit;text-decoration:none}
.screen-nav a:hover{background:var(--ink);color:var(--paper)}
.screen-nav .spacer{flex:1}
footer{display:flex;justify-content:space-between;padding:16px 2px;font-size:13px;font-weight:600;gap:16px;flex-wrap:wrap}
/* post list */
.posts{list-style:none;display:flex;flex-direction:column}
.posts li{border-top:.18em solid var(--ink)}
.posts li:last-child{border-bottom:.18em solid var(--ink)}
.posts a{display:flex;gap:24px;align-items:baseline;justify-content:space-between;padding:20px 0;color:inherit;text-decoration:none;flex-wrap:wrap}
.posts a:hover{background:var(--ink);color:var(--paper);padding-left:14px;padding-right:14px}
.posts .t{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:.96;letter-spacing:-.01em;font-size:clamp(22px,3vw,40px);flex:1;min-width:0}
.posts .when{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;flex:none}
/* article */
article{max-width:76ch}
article h2{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(20px,2.4vw,30px);line-height:.96;letter-spacing:-.01em;margin:1.6em 0 .5em}
article p{font-size:15px;line-height:1.7}
article p+p{margin-top:1.1em}
article ul,article ol{margin:1.1em 0 1.1em 1.2em;font-size:15px;line-height:1.7}
article li+li{margin-top:.4em}
article a{color:inherit;text-underline-offset:3px}
article a:hover{background:var(--yellow);color:var(--ink)}
article img,article video{display:block;width:100%;height:auto;margin:1.6em 0;border:var(--rule) solid var(--ink)}
article figure{margin:1.6em 0}
article figure img{margin:0}
article figcaption{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-top:8px}
.draft{display:inline-block;border:2px dashed currentColor;padding:4px 10px;font-family:inherit;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:18px;opacity:.7}
/* empty state */
.empty{border:var(--rule) dashed var(--ink);padding:22px;max-width:68ch}
.empty .sub{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(19px,2vw,26px);line-height:.94;letter-spacing:-.01em}
.empty p{margin-top:10px;font-size:15px;line-height:1.5}
/* video */
.player{width:100%;background:var(--ink);border:var(--rule) solid var(--ink);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}
.player video{width:100%;height:100%;display:block;margin:0;border:0;object-fit:contain}
.player .placeholder{color:var(--paper);text-align:center;padding:22px}
.player .placeholder .sub{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(19px,2.4vw,30px);line-height:.94;color:var(--yellow)}
.player .placeholder p{margin-top:10px;font-size:14px;line-height:1.5}
/* verticals list */
.verticals{list-style:none;margin-top:18px;max-width:68ch}
.verticals li{border-top:.18em solid var(--ink);padding:12px 0;font-size:15px;font-weight:400}
.verticals li:last-child{border-bottom:.18em solid var(--ink)}

/* --- photo field --- */
[data-field="photo"]{--field:#D6D4CF;--onfield:var(--ink)}
/* --- photo grid --- */
.photogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.photogrid.one{grid-template-columns:minmax(260px,420px)}
.photogrid figure{margin:0}
.photogrid img{display:block;width:100%;height:auto;border:var(--rule) solid var(--ink);margin:0}
.photogrid figcaption{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-top:8px}
/* --- credits list --- */
.credits{list-style:none;margin-top:22px;max-width:76ch}
.credits li{border-top:.18em solid var(--ink);padding:14px 0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.credits li:last-child{border-bottom:.18em solid var(--ink)}
.credits .show{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(16px,2.4vw,26px);line-height:1.1}
.credits .net{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;align-self:center}
.cta.outbound{border:var(--rule) solid var(--ink);padding:13px 20px;display:inline-block}
.cta.outbound:hover{background:var(--ink);color:var(--paper)}
/* --- contact --- */
.contactbox{border:var(--rule) solid var(--ink);padding:22px;margin-top:26px;max-width:76ch}
.bigcopy{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(20px,4.6vw,52px);line-height:1.04;background:none;border:0;padding:0;margin-top:10px;color:inherit;cursor:pointer;text-align:left;word-break:break-word}
.bigcopy:hover{color:var(--paper);background:var(--ink)}
.bigcopy:focus-visible{outline:4px solid var(--ink);outline-offset:4px}
.hint{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-top:12px}
/* --- view transitions: the tile becomes the screen --- */
@view-transition{navigation:auto}
html[data-screen="photos"] .head{view-transition-name:tile-photos}
html[data-screen="prayzn"] .head{view-transition-name:tile-prayzn}
html[data-screen="credits"] .head{view-transition-name:tile-credits}
html[data-screen="sizzle"] .head{view-transition-name:tile-sizzle}
html[data-screen="head-of-security"] .head{view-transition-name:tile-dog}
html[data-screen="about"] .head{view-transition-name:tile-about}
html[data-screen="now"] .head{view-transition-name:tile-now}
html[data-screen="notes"] .head{view-transition-name:tile-notes}
html[data-screen="contact"] .head{view-transition-name:tile-contact}
::view-transition-group(*){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,0,0,1)}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

@media (max-width:820px){
.wrap{padding:12px}
.ticker{font-size:12px}
.ticker .marquee{padding:10px 0}
.ticker .navzone{padding:0 14px}
.head{padding:16px;min-height:200px}
.head .d{font-size:8.4vw}
main{padding:16px}
.screen-nav{padding:12px}
.posts a{gap:6px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;view-transition-name:none!important}}