/* filters + post page + comments — companions to style.css */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:26px}
.fbtn{
  font-family:var(--font-mono);font-size:13.5px;font-weight:700;letter-spacing:.04em;text-transform:lowercase;
  background:none;border:0;padding:6px 2px;margin-right:20px;cursor:pointer;color:#3a3833;
}
.fbtn b{font-weight:400;background:none;color:inherit;padding:0;margin-left:4px;font-size:11px;opacity:.7}
.fbtn:hover{color:#000;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;transform:none;box-shadow:none;}
.fbtn.is-on{background:none;color:#000;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px;box-shadow:none;}
.fbtn.is-on b{background:none;color:#000;}
/* header nav: same plain lowercase link treatment */
.nav a{
  font-family:var(--font-mono);font-size:12.5px;font-weight:400;letter-spacing:.05em;text-transform:lowercase;
  color:#3a3833;border:0;padding:8px 2px;margin-right:20px;background:none;
}
.nav a:hover{border:0;color:#000;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;}
.nav a[aria-current="page"]{background:none;color:#fff;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;}
/* socials */
.socials{max-width:var(--maxw);margin:0 auto;padding:20px 20px 60px;}
.socials h2{font-family:var(--font-display);font-weight:900;font-size:clamp(28px,4vw,46px);line-height:.95;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:20px;}
.socials ul{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 40px;}
.socials a,.socials .discord{
  display:block;padding:10px 0;
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.05em;text-transform:lowercase;color:#b9b5ac;
}
.socials a:hover{color:#fff;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;}
.socials .discord{color:var(--ash);}
@media(max-width:700px){.socials ul{grid-template-columns:1fr;}}
/* compact home: posts full width, mark lives in the header */
.site-head__inner{justify-content:space-between;}
.site-head__inner .tile{margin-left:auto;}
.home-grid{display:block;max-width:var(--maxw);margin:0 auto;padding:34px 20px 50px;}
.home-grid .posts-sec{padding:0;margin:0;min-width:0;}
/* ---- flat dark mode: one colour, no stripes ---- */
:root{--paper:#111214;--paper-2:#1b1d20;--ink:#ece8df;--ink-2:#ece8df;--ash:#8f8b83;--line:#ece8df;}
body{background:#111214;background-image:none;color:var(--ink);}
::selection{background:var(--paper);color:var(--ink);}
/* keep logo tiles black-on-white like the reference */
.tile__inner{background:#fff;color:#0a0a0a;}
/* reading text */
.hero__lede{color:#c9c5bc;}
.card p,.author p{color:#c9c5bc;}
.prose{color:#e6e2d9;}
.prose a{color:inherit;}
/* plain links */
.fbtn{color:#b9b5ac;}
.fbtn:hover{color:#fff;}
.fbtn.is-on,.fbtn.is-on b{color:#fff;}
/* review medium sub-filters — hidden until review is selected */
.filters--sub{display:none;margin-top:-14px;}
.filters--sub.show{display:flex;}
.fgroup{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--ash);margin-right:6px;}
.mbtn{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:lowercase;
  background:none;border:0;padding:6px 2px;margin-right:16px;cursor:pointer;color:#8f8b83;
}
.mbtn:hover{color:#fff;text-decoration:underline;text-underline-offset:4px;}
.mbtn.is-on{color:#fff;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;}
.nav a{color:#b9b5ac;}
.nav a:hover{color:#fff;}
.nav a[aria-current="page"]{color:#fff;}
/* hero is just the mark now */
.hero--mark{grid-template-columns:1fr;padding:40px 20px 30px;}
.hero--mark .hero__figure{justify-content:center;}
.figure__frame,.tweet-embed{border:0;}
.card__thumb{border-bottom:0;}
/* taller thumbs so covers show more */
.card__thumb{height:230px;}
/* no outlines on cards, no line under header */
.card{border:0;}
.site-head{border-bottom:0;}
/* post page: no boxes around prev/next, comments heading, or form */
.post-nav a{border:0;}
.comments h2{border-top:0;}
.c-form{border:0;}
.c-form__row{border-bottom:0;}
.c-form__row input+input{border-left:0;}
.c-form button{border-top:0;}
/* no hover lift on cards */
.card:hover{transform:none;box-shadow:none;}
.tweet-embed figcaption a{color:#0a0a0a;border-color:#0a0a0a;}
/* quotes: just the left line, no box */
.prose blockquote{background:none;border:0;border-left:3px solid var(--ink);padding:6px 8px 6px 22px;margin:2em 0;}
.prose blockquote::before{content:none;display:none;}
.prose h2::before{content:none;}
.prose ol,.prose ul{list-style:none;}
.prose ol li,.prose ul li{padding-left:0;}
.prose ol li::before,.prose ul li::before{content:none;display:none;}
.prose > p:first-of-type::first-letter{float:none;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0;background:none;color:inherit;}
.fsearch{margin-left:auto;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;
  border:2px solid var(--ink);background:var(--paper);padding:10px 12px;min-width:170px}
.empty{font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;padding:40px 0}
.mini-btn{background:var(--ink);color:var(--paper);border:0;padding:8px 12px;cursor:pointer;font:inherit}

/* comments */
.comments{max-width:72ch;margin:50px auto 0;padding:0 20px 70px}
.comments h2{font-family:var(--font-display);font-weight:900;font-size:clamp(26px,3vw,36px);text-transform:uppercase;border-top:3px solid var(--ink);padding-top:16px}
.c-form{border:3px solid var(--ink);margin-top:18px;background:var(--paper-2)}
.c-form__row{display:grid;grid-template-columns:1fr 1fr;gap:0;border-bottom:3px solid var(--ink)}
.c-form__row input{background:transparent;border:0;padding:14px;font-family:var(--font-mono);font-size:13px}
.c-form__row input+input{border-left:3px solid var(--ink)}
.c-form textarea{width:100%;min-height:110px;background:transparent;border:0;padding:14px;font-family:var(--font-serif);font-size:16px;resize:vertical}
.c-form textarea:focus,.c-form input:focus{outline:0;background:rgba(0,0,0,.04)}
.c-form button{width:100%;border:0;border-top:3px solid var(--ink);background:var(--ink);color:var(--paper);padding:14px;cursor:pointer;font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.c-form button:hover{background:#000}
.c-list{margin-top:22px;display:flex;flex-direction:column;gap:14px}
.c-item{border:2px solid var(--ink);padding:16px 18px;background:var(--paper)}
.c-item__head{display:flex;justify-content:space-between;gap:12px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);margin-bottom:8px;flex-wrap:wrap}
.c-item__head strong{color:var(--ink)}
.c-item p{font-size:16px;line-height:1.6}
.c-item__del{background:none;border:0;cursor:pointer;font-size:10px;letter-spacing:.16em;color:var(--ash);font-family:var(--font-mono)}
.c-item__del:hover{color:#000;text-decoration:underline}
/* replies */
.c-item__acts{display:flex;gap:16px;margin-top:10px;}
.c-act{background:none;border:0;cursor:pointer;font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;color:var(--ash);padding:0;}
.c-act:hover{color:#fff;text-decoration:underline;}
.c-replies{margin-top:6px;}
.c-reply{margin-top:12px;padding:12px 0 0 16px;border-left:2px solid var(--ink);}
.c-reply p{font-size:15px;}
.c-reply-form{margin-top:12px;border-top:1px solid rgba(236,232,223,.25);padding-top:12px;}
.c-reply-form input,.c-reply-form textarea{width:100%;background:transparent;border:0;color:inherit;font-family:var(--font-mono);font-size:12px;padding:8px 0;}
.c-reply-form textarea{font-family:var(--font-serif);font-size:15px;min-height:64px;resize:vertical;}
.c-reply-form input:focus,.c-reply-form textarea:focus{outline:0;}
.c-reply-form button{background:none;border:0;cursor:pointer;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;color:var(--paper);background:var(--ink);color:#111214;padding:9px 14px;margin-top:6px;}
@media(max-width:700px){.c-form__row{grid-template-columns:1fr}.c-form__row input+input{border-left:0;border-top:2px solid var(--ink)}}

/* UTF logo — heavy slab in the spirit of the reference */
.tile{position:relative}
.tile::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--grain);background-size:140px 140px;
  opacity:.5;mix-blend-mode:multiply;
}
.tile__inner{
  font-family:"Bevan",Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:0;
  position:relative;
  /* photocopy-roughened edges */
  filter:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='2.2'/%3E%3C/filter%3E%3C/svg%3E#r");
}
/* fit: give the letters breathing room inside the white box */
.tile--lg .tile__inner{width:min(320px,62vw);font-size:clamp(58px,10vw,116px);line-height:1;padding:0 .06em;}
.tile--md .tile__inner{font-size:clamp(44px,8vw,80px);padding:0 .06em;}
.tile--sm .tile__inner{width:52px;height:40px;font-size:14.5px;}

/* ---- grainy / noisy throughout (kept off the reading text) ---- */
.grain{opacity:.05;}
body{background-image:linear-gradient(rgba(0,0,0,.022) 1px,transparent 1px);background-size:100% 3px;}
/* photocopy-rough display type */
.hero h1,.sec-head h2,.card h3,.article-head h1{
  filter:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='r2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' stitchTiles='stitch' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='1.4'/%3E%3C/filter%3E%3C/svg%3E#r2");
}
/* grain on images/tiles/global only — body copy stays clean */
.card,.feature{position:relative;}
.card__thumb,.feature__media{position:relative;}
.card__thumb::after,.feature__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--grain);background-size:130px 130px;
  opacity:.35;mix-blend-mode:overlay;
}
/* gritty rules + filter buttons */
.rule,.vein{position:relative;}
.fbtn.is-on{box-shadow:3px 3px 0 var(--ink);}
/* normal readable text: ledes, excerpts, prose, small print — no distortion */
.hero__lede,.card p,.feature p,.prose p,.prose li,.byline,.card__meta,.mono{
  filter:none;-webkit-font-smoothing:antialiased;
}
.hero__lede{font-style:normal;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,Helvetica,sans-serif;}
/* bandcamp-style small print: plain, tight, neutral */
.card__meta,.byline div,.mono{letter-spacing:.12em;}
/* cherry-blossom cursor */
body,a,button,.fbtn,.card,.feature{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Ctext y='24' font-size='24'%3E%F0%9F%8C%B8%3C/text%3E%3C/svg%3E") 15 15,auto;}

/* header: white bar with noise */
.site-head{background:var(--paper);color:var(--ink);border-bottom:0;position:relative;isolation:isolate;overflow:hidden;}
.site-head::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--grain),var(--marble-c);
  background-size:110px 110px,200px 200px;
  opacity:.6;mix-blend-mode:multiply;
}
.site-head__inner{position:relative;z-index:1;}
.brand__name{color:var(--ink);}
.brand__name em{color:var(--ash);}
.nav a{color:var(--ink);}
.nav a:hover{border-color:var(--ink);}
.nav a[aria-current="page"]{background:var(--ink);color:var(--paper);}
.nav-toggle{background:var(--paper);color:var(--ink);border-color:var(--ink);}
/* nav sits top-left, no brand block */
.site-head__inner{justify-content:flex-start;}
.nav{margin-left:0;}
/* cover images */
.figure__frame{overflow:hidden;background:#0d0d0d;position:relative;}
.figure__frame:has(img){height:min(72vh,600px);}
.figure__frame:has(img)::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--grain);background-size:130px 130px;
  opacity:.35;mix-blend-mode:overlay;
}
.figure__frame img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;filter:saturate(1.3) contrast(1.08);}
/* all present + future images: boosted saturation + grain */
.card__thumb--img{background-size:cover;background-position:50% 58%;filter:saturate(1.3) contrast(1.08);}
/* beat the every-2nd/3rd-card marble sizing so covers never tile */
.card:nth-child(n) .card__thumb--img{background-size:cover;background-repeat:no-repeat;}
/* fxtwitter embed */
.tweet-embed{margin:0 0 2em;border:0;background:none;}
.tweet-embed__head{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;background:var(--ink);color:var(--paper);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;flex-wrap:wrap;}
.tweet-embed video{width:100%;max-height:72vh;background:#000;display:block;}
.tweet-embed iframe{width:100%;aspect-ratio:16/9;border:0;display:block;background:#000;}
/* youtube link card: thumbnail + play button, opens the video */
.yt-link{position:relative;display:block;background:#000;}
.yt-link img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;filter:saturate(1.3) contrast(1.08);}
.yt-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:76px;height:76px;border:3px solid #fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:26px;padding-left:5px;background:rgba(0,0,0,.45);
  transition:transform .15s,background .15s;
}
.yt-link:hover .yt-play{transform:translate(-50%,-50%) scale(1.1);background:rgba(0,0,0,.7);}
.tweet-embed figcaption{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:14px 16px;font-family:var(--font-serif);font-style:italic;font-size:16px;flex-wrap:wrap;}
.tweet-embed figcaption a{font-style:normal;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;border-bottom:2px solid var(--ink);white-space:nowrap;}