@font-face{font-family:Temple;src:url('assets/fonts/display.ttf') format('truetype');font-weight:700 900;font-display:swap}
@font-face{font-family:Temple;src:url('assets/fonts/body.ttf') format('truetype');font-weight:100 600;font-display:swap}

/* --s: one pixel of the 975px approved reference at the current width (capped at the 1440px page). Wide layouts are sized in multiples of it. */
:root{--s:calc(min(100vw,1440px)/975);--red:#ff3024;--ink:#070808;--paper:#fafaf2;--blue:#039aee;--rule:#c9c9c1}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Temple,Arial,sans-serif;-webkit-font-smoothing:antialiased}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.11;z-index:10;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23888877' filter='url(%23n)' opacity='.22' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:3px solid var(--red);outline-offset:5px}
img{display:block;max-width:100%;height:auto}
picture{display:block}
svg:not([width]){fill:currentColor}
body>header,main,body>footer{max-width:1440px;margin-inline:auto}
.skip{position:fixed;top:-60px;left:12px;padding:12px;background:#fff;z-index:20}
.skip:focus{top:12px}

/* Wordmark: live text plus the paw, transparent background */
.brand{display:inline-flex;align-items:center;gap:.28em;white-space:nowrap;font-size:max(18px,calc(23*var(--s)));line-height:1}
.wordmark{font-weight:900;text-transform:uppercase;letter-spacing:-.03em}
.paw{width:1em;height:1em;color:var(--red);transform:rotate(18deg);flex:none}
.brand .paw{width:1.05em;height:1.05em}

/* Header */
.header{height:max(50px,calc(46*var(--s)));padding:0 5.1%;display:flex;align-items:center;gap:24px}
.header nav{display:flex;gap:max(28px,calc(38*var(--s)));margin:0 auto 0 calc(96*var(--s));font-size:max(12px,calc(11.5*var(--s)))}
.header nav a{position:relative}
.header nav .active:after{content:"";position:absolute;bottom:calc(-9*var(--s));left:0;width:100%;height:2px;background:var(--red)}
.discord{display:inline-flex;align-items:center;gap:calc(7*var(--s));font-size:max(11px,calc(10.5*var(--s)));border:1.5px solid #222331;border-radius:30px;padding:calc(5*var(--s)) calc(13*var(--s)) calc(5*var(--s)) calc(11*var(--s));white-space:nowrap}
.discord svg{width:calc(14*var(--s));min-width:13px;aspect-ratio:1}

/* Hero */
.hero{text-align:center;padding-bottom:calc(20*var(--s))}
.hero-copy{text-align:left;position:relative;z-index:1;padding:calc(10*var(--s)) 5.1% 0}
.hero h1{font-size:calc(68.5*var(--s));font-weight:900;line-height:.875;letter-spacing:-.055em;margin:0;white-space:nowrap}
.hero-art{width:98%;margin:calc(-31*var(--s)) auto 0;position:relative}
.hero-art img{width:100%;aspect-ratio:1340/558}
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:#050707;color:#fff;border-radius:40px;padding:calc(10*var(--s)) calc(30*var(--s));font-size:max(15px,calc(17*var(--s)));line-height:1.3;transition:transform .18s,background .18s}
.button:hover{transform:translateY(-2px);background:#272727}
.archive-button{display:flex;width:fit-content;margin:calc(-54*var(--s)) auto 0;min-width:calc(280*var(--s));position:relative}

/* Blue feature band (full bleed, content aligned to the page) */
.company{background:var(--blue);color:#fff;text-align:center;padding:calc(26*var(--s)) 3.4% calc(6*var(--s));box-shadow:0 0 0 100vmax var(--blue);clip-path:inset(0 -100vmax)}
.company h2{font-size:calc(52*var(--s));font-weight:900;line-height:1.08;letter-spacing:-.055em;margin:0;white-space:nowrap;text-shadow:0 1px 1px #007dbf}
.company>p{font-size:max(15px,calc(23*var(--s)));margin:calc(3*var(--s)) 0 0;letter-spacing:-.03em}
.company-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:calc(-2*var(--s))}
.company-bottom picture{width:min(69%,1100px);align-self:flex-end}
.scribble{font-family:'Comic Sans MS','Segoe Print','Ink Free',cursive;font-size:max(13px,calc(19*var(--s)));line-height:1.1;transform:rotate(-7deg);text-align:left;flex-shrink:0}
.scribble span{display:block;border-top:2px solid #fff;margin-top:calc(7*var(--s));text-align:right;max-width:calc(88*var(--s))}

/* Mission strip */
.mission{margin:calc(15*var(--s)) 2.8% 0;padding:calc(4*var(--s)) 1.6% calc(6*var(--s));display:grid;grid-template-columns:49% 51%;align-items:center;border-block:2px solid var(--red);scroll-margin-top:20px}
.mission h2{font-size:calc(52.5*var(--s));font-weight:900;line-height:.9;letter-spacing:-.055em;margin:0}
.mission p{font-size:max(12.5px,calc(13.8*var(--s)));line-height:1.45;margin:0 0 calc(10*var(--s));letter-spacing:-.03em}
.text-link{display:inline-flex;gap:8px;align-items:center;border-bottom:1px solid currentColor;padding-bottom:4px;font-size:max(12.5px,calc(13.5*var(--s)));white-space:nowrap}

/* Blog */
.blog{padding:calc(16*var(--s)) 5.1% 0;scroll-margin-top:20px}
.eyebrow{font-size:max(11px,calc(11.5*var(--s)));margin:0 0 calc(4*var(--s));display:inline-block;border-bottom:1px solid #222331;padding-bottom:calc(4*var(--s))}
.blog-heading{display:flex;justify-content:space-between;align-items:center;gap:15px}
.blog h2{font-size:calc(86*var(--s));font-weight:900;letter-spacing:-.055em;line-height:1.02;color:var(--red);margin:0;white-space:nowrap}
.blog h2 .paw{font-size:calc(31*var(--s));margin-left:calc(8*var(--s));vertical-align:-.05em}
.blog-heading .text-link{font-size:max(11.5px,calc(11.5*var(--s)));align-self:center}
.posts{display:grid;grid-template-columns:repeat(3,1fr);margin:calc(2*var(--s)) -1px 0}
.posts article{padding:0 calc(30*var(--s)) 0 0}
.posts article+article{border-left:1px solid var(--rule);padding-left:calc(32*var(--s))}
.posts article:last-child{padding-right:0}
.post-link{display:block;text-align:left;width:100%}
.posts picture{height:calc(162*var(--s));margin-bottom:calc(8*var(--s))}
.posts img{width:100%;height:100%;object-fit:contain;object-position:bottom center}
.posts h3{font-size:calc(26.5*var(--s));line-height:1;letter-spacing:-.045em;font-weight:900;margin:0;min-height:2em}
.red-rule{display:block;width:calc(34*var(--s));min-width:26px;height:3px;background:var(--red);margin:calc(8*var(--s)) 0}
.posts p{font-size:max(12.5px,calc(14.3*var(--s)));line-height:1.35;color:#6b6a7b;margin:0;min-height:2.8em;max-width:calc(262*var(--s));letter-spacing:-.02em}
.post-link:hover h3{color:#e62b21}

/* Community banner: the cat is never stretched; copy sits on its black body */
.community{position:relative;margin:calc(12*var(--s)) 2% 0;display:grid;align-items:center;justify-items:center}
.community picture,.community-copy{grid-area:1/1}
.community picture{width:100%}
.community img{width:100%;aspect-ratio:1390/297}
.community-copy{position:relative;text-align:center;color:#fff;z-index:1;padding-top:calc(6*var(--s))}
.community h2{font-family:Georgia,serif;font-weight:400;font-size:max(20px,calc(25*var(--s)));letter-spacing:-.04em;margin:0 0 calc(5*var(--s))}
.community p{font-size:max(12.5px,calc(13*var(--s)));line-height:1.4;margin:0 0 calc(11*var(--s))}
.coral{background:#e72c1c;font-size:max(14px,calc(15*var(--s)));padding:calc(9*var(--s)) calc(32*var(--s))}
.coral:hover{background:#d92417}

/* Footer */
body>.footer{width:96%;max-width:1382px;border-top:1px solid #727383;padding:calc(6*var(--s)) 2.5% calc(8*var(--s));display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.footer .brand{font-size:max(13px,calc(12.5*var(--s)));justify-self:start}
.footer nav{display:flex;gap:calc(26*var(--s));font-size:max(11px,calc(9.6*var(--s)))}
.footer small{font-size:max(10px,calc(8.6*var(--s)));color:#5d5d6d;justify-self:end;text-align:right}

/* Preview dialog */
dialog{border:1px solid #111;border-radius:5px;background:var(--paper);color:var(--ink);max-width:520px;width:calc(100% - 32px);padding:36px}
dialog::backdrop{background:#0008;backdrop-filter:blur(3px)}
dialog h2{font-size:36px;letter-spacing:-1.5px;line-height:1.05;margin:15px 0}
dialog p{line-height:1.5}
dialog .eyebrow{font-size:13px;margin:0}
dialog .button{font-size:16px;padding:10px 24px}
.close{position:absolute;right:15px;top:8px;font-size:28px}

@media(min-width:651px) and (max-width:800px){
.blog-heading{display:block}
.blog-heading .text-link{margin:calc(6*var(--s)) 0 calc(10*var(--s))}
.posts p{max-width:none}
}

/* Mobile: mission and articles stack, banner crops instead of distorting */
@media(max-width:650px){
.brand{font-size:21px}
.header{height:auto;min-height:73px;padding:15px 5%;gap:10px;flex-wrap:wrap}
.header .discord{margin-left:auto;font-size:11px;padding:5px 13px 5px 11px;gap:7px}
.discord svg{width:14px}
.header nav{order:3;width:100%;margin:5px 0 7px;justify-content:center;gap:36px;font-size:12px}
.header nav .active:after{bottom:-9px}
.hero{padding-bottom:10px}
.hero-copy{padding:12px 5% 0}
.hero h1{white-space:normal;font-size:clamp(27px,7.7vw,51px);line-height:1;letter-spacing:-.05em}
.hero-art{width:100%;margin:-18px 0 0}
.button{font-size:16px;padding:10px 30px}
.archive-button{min-width:230px;margin:-28px auto 0}
.company{padding:23px 3.4% 8px}
.company h2{white-space:normal;font-size:36px;max-width:350px;margin:auto;line-height:.98}
.company>p{font-size:18px;margin-top:10px}
.company-bottom{position:relative;padding-top:52px;margin-top:0}
.company-bottom picture{width:100%}
.scribble{position:absolute;top:6px;font-size:18px;z-index:1;line-height:1}
.scribble:first-child{left:3px}
.scribble:last-child{right:3px}
.scribble span{margin-top:3px;max-width:88px}
.mission{grid-template-columns:1fr;gap:12px;margin:15px 5% 0;padding:14px 0 17px}
.mission h2{font-size:40px}
.mission p{font-size:14px;line-height:1.45;margin:0 0 10px}
.text-link{font-size:14px}
.blog{padding:21px 5% 0}
.eyebrow{font-size:12px}
.blog-heading{display:block}
.blog h2{font-size:clamp(34px,8.5vw,53px);margin:5px 0 10px}
.blog h2 .paw{font-size:.42em;margin-left:.2em}
.blog-heading .text-link{margin-bottom:18px;font-size:13px}
.posts{grid-template-columns:1fr;margin:0}
.posts article,.posts article+article{border-left:0;padding:0 0 22px;margin-bottom:20px;border-bottom:1px solid var(--rule)}
.posts article:last-child{margin-bottom:0;border-bottom:0;padding-bottom:0}
.posts picture{height:220px;margin-bottom:12px}
.posts h3{font-size:29px;min-height:0}
.posts h3 br{display:none}
.red-rule{width:34px;margin:8px 0}
.posts p{font-size:15px;min-height:0;max-width:340px}
.community{margin:25px 2% 0;min-height:260px;overflow:hidden}
.community picture{height:100%}
.community img{height:100%;object-fit:cover;object-position:56% 50%;aspect-ratio:auto}
.community-copy{padding:20px 28px 0}
.community h2{font-size:26px;max-width:270px;margin:0 auto 9px}
.community p{font-size:13px;margin:0 auto 14px;max-width:275px}
.community p br{display:none}
.coral{font-size:14px;padding:10px 20px}
body>.footer{display:flex;flex-wrap:wrap;justify-content:center;padding:12px 4%;gap:14px}
.footer .brand{font-size:14px}
.footer nav{font-size:11px;gap:21px}
.footer small{font-size:10px;width:100%;text-align:center;justify-self:auto}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}