/* ═══════════════════════════════════════════════════════════════ SuperChallenge — "Attract Mode" Palette sampled from the logo artwork: magenta #ff00f2 (CHALLENGE), ember/flame (SUPER), amber (katakana) ═══════════════════════════════════════════════════════════════ */ :root{ --magenta:#ff00f2; --magenta-dim:#b800ae; --ember:#ec5a2e; --flame:#f78830; --amber:#ff9800; --ink:#05050a; --ink-2:#0d0d16; --ink-3:#15151f; --paper:#f3f0ea; --muted:#8b8ba0; --dim:#6f6f86; --hair:rgba(255,255,255,.08); --hair-hot:rgba(255,0,242,.28); --display:"Kanit",system-ui,sans-serif; --body:"Barlow Semi Condensed",system-ui,sans-serif; --jp:"Zen Kaku Gothic New",system-ui,sans-serif; --wrap:1360px; --gutter:clamp(1rem,3vw,3rem); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0; background:var(--ink); color:var(--paper); font:400 16px/1.55 var(--body); overflow-x:hidden; } /* CRT scanlines. Deliberately NOT applied to — a full-viewport overlay also lies over every product photo and costs it clarity. Instead the .crt class is applied only to atmospheric bands (hero, marquee, trust strip) that carry no photography. Purely decorative, never interactive. */ .crt{position:relative;isolation:isolate} .crt::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:3; background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.26) 2px 3px); mix-blend-mode:multiply;opacity:.5; } /* Anyone who asks for less motion gets none of it. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} h1,h2,h3,h4{margin:0} .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)} .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--magenta);color:#fff;padding:.7rem 1.2rem;font-weight:700} .skip:focus{left:0} :where(a,button,input,select,summary):focus-visible{ outline:2px solid var(--amber);outline-offset:3px; } /* ── Header ──────────────────────────────────────────────── */ /* Solid black, not a translucent gradient: the logo artwork has a black ground of its own, so anything else leaves a visible rectangle around it. */ .site-head{ position:sticky;top:0;z-index:50; background:#000; border-bottom:2px solid var(--magenta); } .site-head .bar{ position:relative; /* anchor for the search panel */ display:flex;align-items:center;gap:clamp(.75rem,2vw,2rem);padding-block:.9rem; } .brand img{height:44px;width:auto} /* no glow — logo sits clean */ .nav-main{display:flex;gap:clamp(.9rem,1.6vw,1.5rem);margin-left:auto;align-items:center} .nav-main a{ font:700 .95rem/1 var(--display);font-style:italic; text-transform:uppercase;letter-spacing:.06em; padding:.35rem 0;position:relative;color:#d8d6e4; } .nav-main a::after{ content:"";position:absolute;left:0;right:100%;bottom:0;height:2px; background:var(--magenta);box-shadow:0 0 12px var(--magenta);transition:right .28s ease; } .nav-main a:hover,.nav-main a[aria-current]{color:#fff} .nav-main a:hover::after,.nav-main a[aria-current]::after{right:0} /* Search hangs off the header's magenta underline as a floating panel, which keeps it out of the nav row entirely — with nine nav items the two were fighting for the same line. */ .searchbox{ position:absolute;top:100%;right:0;z-index:2; display:flex;align-items:center; background:#000; border:2px solid var(--magenta);border-top:0; box-shadow:0 12px 26px rgba(0,0,0,.65); } .searchbox input{ background:none;border:0;color:var(--paper);padding:.6rem .9rem;width:13rem; font:500 .92rem var(--body);outline:none; } .searchbox input::placeholder{color:var(--muted)} .searchbox button{ background:var(--magenta);border:0;color:#fff;padding:.6rem 1rem;cursor:pointer; font-weight:700;font-family:var(--body);font-size:1rem;align-self:stretch; } .searchbox button:hover{background:var(--magenta-dim)} /* ── Mobile navigation ───────────────────────────────────── */ .nav-toggle{ display:none;margin-left:auto;align-items:center;gap:.55rem; background:none;border:2px solid rgba(255,255,255,.22);color:var(--paper); font:700 .85rem/1 var(--display);font-style:italic;text-transform:uppercase;letter-spacing:.1em; padding:.55rem .85rem;cursor:pointer;transition:border-color .2s,color .2s; } .nav-toggle:hover,.nav-toggle[aria-expanded="true"]{border-color:var(--magenta);color:var(--magenta)} .nav-toggle .bars{position:relative;width:18px;height:12px;flex:0 0 auto} .nav-toggle .bars i, .nav-toggle .bars::before, .nav-toggle .bars::after{ content:"";position:absolute;left:0;width:100%;height:2px;background:currentColor; transition:transform .25s,opacity .2s; } .nav-toggle .bars::before{top:0} .nav-toggle .bars i{top:5px} .nav-toggle .bars::after{top:10px} .nav-toggle[aria-expanded="true"] .bars::before{transform:translateY(5px) rotate(45deg)} .nav-toggle[aria-expanded="true"] .bars i{opacity:0} .nav-toggle[aria-expanded="true"] .bars::after{transform:translateY(-5px) rotate(-45deg)} @media(max-width:1080px){ .site-head .bar{flex-wrap:wrap;row-gap:0} .nav-toggle{display:inline-flex} /* Search becomes a full-width bar under the logo row, always visible — it matters too much on a shop to hide behind the menu button. */ .searchbox{ position:static;order:11;width:100%;margin-top:.85rem; border:1px solid rgba(255,255,255,.18);box-shadow:none; } .searchbox input{width:auto;flex:1;min-width:0} /* Nav collapses to a disclosure below it */ .nav-main{ order:12;display:none;width:100%;margin-left:0; flex-direction:column;align-items:stretch;gap:0; padding-top:.4rem; } .nav-main.is-open{display:flex} .nav-main a{ padding:.8rem .2rem;border-bottom:1px solid var(--hair);font-size:1rem; } .nav-main a::after{display:none} .nav-main a:hover,.nav-main a[aria-current]{color:var(--magenta)} } @media(max-width:520px){ .brand img{height:34px} } /* ── Hero ────────────────────────────────────────────────── */ .hero{position:relative;padding:clamp(2.5rem,8vw,6.5rem) 0 clamp(2rem,5vw,4rem);overflow:hidden} /* Own element rather than .hero::before, so it can coexist with .crt's scanline pseudo-element. */ .hero-grid{ position:absolute;left:-20%;right:-20%;bottom:-10%;height:60%;pointer-events:none; background: repeating-linear-gradient(90deg,rgba(255,0,242,.22) 0 1px,transparent 1px 64px), repeating-linear-gradient(0deg,rgba(255,0,242,.16) 0 1px,transparent 1px 42px); transform:perspective(420px) rotateX(72deg);transform-origin:bottom; mask-image:linear-gradient(to top,#000,transparent 85%); } .hero-glow{ position:absolute;top:-30%;left:50%;translate:-50% 0;width:min(1100px,120vw);aspect-ratio:1; background:radial-gradient(circle,rgba(255,0,242,.20),transparent 62%);pointer-events:none; } /* Content sits above the decorative layers but under the scanlines (z3) */ .hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(2rem,5vw,4rem);align-items:end} .trust .wrap,.marquee .track{position:relative;z-index:2} @media(max-width:900px){.hero-inner{grid-template-columns:1fr}} .kicker{ font:700 .82rem/1 var(--jp);letter-spacing:.34em;color:var(--amber); text-transform:uppercase;margin:0 0 1.1rem;display:flex;align-items:center;gap:.9rem; } .kicker::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--amber),transparent)} .hero h1{ font:800 clamp(2.2rem,6.4vw,5rem)/.9 var(--display);font-style:italic; text-transform:uppercase;letter-spacing:-.02em; } .hero h1 .l1{display:block;color:var(--paper)} .hero h1 .l2{ display:block; background:linear-gradient(92deg,var(--magenta),var(--flame) 70%,var(--amber)); -webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 0 26px rgba(255,0,242,.42)); } .lede{max-width:46ch;margin:1.6rem 0 0;font-size:1.18rem;color:#c9c7d6;line-height:1.6} .cta{display:flex;gap:1rem;margin-top:2.2rem;flex-wrap:wrap} .btn{ display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.7rem; font:700 .95rem/1 var(--display);font-style:italic;text-transform:uppercase;letter-spacing:.08em; border:2px solid var(--magenta);background:var(--magenta);color:#fff;cursor:pointer; transition:box-shadow .25s,transform .18s,background .2s; } .btn:hover{box-shadow:0 0 28px rgba(255,0,242,.65);transform:translateY(-2px)} .btn.ghost{background:transparent;color:var(--paper);border-color:rgba(255,255,255,.3)} .btn.ghost:hover{border-color:var(--amber);color:var(--amber);box-shadow:0 0 22px rgba(255,152,0,.35)} .btn.big{padding:1.1rem 2rem;font-size:1.1rem;width:100%;justify-content:center} /* Stock counter panel */ .stats{border:1px solid rgba(255,0,242,.3);background:rgba(255,0,242,.05);padding:1.6rem} .stats .big{ font:800 clamp(3rem,6vw,4.6rem)/1 var(--display);font-style:italic; color:var(--magenta);text-shadow:0 0 30px rgba(255,0,242,.55);display:block; } .stats .lbl{font:700 .78rem/1.4 var(--jp);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)} .stats hr{border:0;border-top:1px dashed rgba(255,255,255,.14);margin:1.2rem 0} .stats .row{display:flex;justify-content:space-between;font-size:.95rem;color:#c9c7d6;padding:.28rem 0} .stats .row:hover{color:#fff} .stats .row b{color:var(--amber);font-weight:600} /* ── Marquee ─────────────────────────────────────────────── */ .marquee{ border-block:1px solid var(--hair-hot);background:#0a0a12; overflow:hidden;white-space:nowrap;padding:.7rem 0; } .marquee .track{display:inline-block;animation:scroll 42s linear infinite} /* Pause on hover so a moving link can actually be clicked, and on focus so it can be reached from the keyboard. */ .marquee:hover .track, .marquee:focus-within .track{animation-play-state:paused} .marquee a{ display:inline-block; font:700 .9rem/1 var(--display);font-style:italic;text-transform:uppercase; letter-spacing:.12em;padding:.25rem 1.6rem;color:#b9b7c9; transition:color .2s; } .marquee a em{color:var(--magenta);font-style:normal;transition:color .2s} .marquee a:hover{color:#fff} .marquee a:hover em{color:var(--amber)} @keyframes scroll{to{transform:translateX(-50%)}} /* ── Sections ────────────────────────────────────────────── */ .section{padding-block:clamp(2.5rem,6vw,5rem)} /* The floating search panel hangs into the top-right of the page, so the first section needs clearance or it collides with the item count. */ @media(min-width:1081px){ main > .section:first-child{padding-top:calc(clamp(2.5rem,6vw,5rem) + 1.4rem)} } .sec-head{display:flex;align-items:baseline;gap:1.4rem;margin-bottom:2.2rem;flex-wrap:wrap} .sec-head h1,.sec-head h2{ font:800 clamp(1.7rem,4vw,3rem)/1 var(--display);font-style:italic; text-transform:uppercase;letter-spacing:-.01em; } .sec-head .jp{font:700 1rem/1 var(--jp);color:var(--amber);letter-spacing:.18em} .sec-head .count{margin-left:auto;font:600 .9rem/1 var(--body);color:var(--muted);text-transform:uppercase;letter-spacing:.14em} .sec-head .more{margin-left:auto;font:600 .9rem/1 var(--body);color:var(--magenta);text-transform:uppercase;letter-spacing:.14em} .sec-head .more:hover{text-decoration:underline} .breadcrumb{display:flex;gap:.6rem;font-size:.86rem;color:var(--dim);margin-bottom:1.2rem;flex-wrap:wrap} .breadcrumb a:hover{color:var(--magenta)} .breadcrumb span{color:var(--dim)} /* ── Item grid + hybrid card ─────────────────────────────── */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.6rem} @media(max-width:560px){.grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}} .card{ position:relative;background:var(--ink-2);border:1px solid var(--hair); display:flex;transition:border-color .25s,transform .25s,box-shadow .25s; animation:rise .6s cubic-bezier(.2,.7,.3,1) backwards; } @keyframes rise{from{opacity:0;transform:translateY(18px)}} .card:hover{border-color:var(--magenta);transform:translateY(-5px);box-shadow:0 12px 34px rgba(255,0,242,.18)} .card:hover .card-shot img{transform:scale(1.06)} .card:hover .card-buy{opacity:1;transform:translateY(0)} .card:hover .spine{background:linear-gradient(180deg,var(--magenta),var(--magenta-dim))} .card:hover .spine .sys{color:#fff} .card:focus-within{border-color:var(--magenta)} .card:focus-within .card-buy{opacity:1;transform:translateY(0)} /* The spine: vertical band carrying the platform, from the Obi study. In vertical-rl the flex main axis runs top-to-bottom, so flex-start pins the label to the top of the band. */ .spine{ flex:0 0 auto;writing-mode:vertical-rl; background:linear-gradient(180deg,var(--ink-3),#0a0a12); border-right:1px solid var(--hair-hot); padding:.85rem .5rem;display:flex;align-items:center;justify-content:flex-start; transition:background .3s; } .spine .sys{ font:700 .76rem/1 var(--display);font-style:italic;text-transform:uppercase; letter-spacing:.18em;color:#b6b4c6;transition:color .3s;white-space:nowrap; } .card-body{flex:1;min-width:0;display:flex;flex-direction:column} /* Nothing overlays the photo — no sheen, no scanlines. The product needs to read clearly; the neon lives in the card's frame, spine and hover glow. */ .card-shot{position:relative;aspect-ratio:1;overflow:hidden;background:#000;display:grid;place-items:center} .card-shot img{width:100%;height:100%;object-fit:contain;transition:transform .45s ease} .card-shot .noimg{color:var(--dim);font:700 .8rem var(--display);font-style:italic;letter-spacing:.1em;text-transform:uppercase} .flash{ position:absolute;top:0;right:0;z-index:2; font:700 .68rem/1 var(--display);font-style:italic; background:var(--ember);color:#fff;padding:.35rem .55rem;letter-spacing:.06em; } .flash.sold{background:#2b2b38;color:#a9a7bb} .card-meta{padding:.9rem 1rem 1.1rem;display:flex;flex-direction:column;gap:.55rem;flex:1} .card-meta h3{font:600 1.02rem/1.25 var(--body);color:#fff} .card-meta h3 a::after{content:"";position:absolute;inset:0;z-index:1} /* whole card clickable */ /* Pushes the tags + price block to the foot of the card, so prices line up across a row regardless of how long each title runs. */ .tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:auto} .card-price{display:flex;align-items:baseline;gap:.55rem;margin:.15rem 0 0} .card-price .now{ font:800 1.5rem/1 var(--display);font-style:italic; color:var(--amber);letter-spacing:.01em; } .card-price .was{font-size:.88rem;color:var(--dim);text-decoration:line-through} .tag{ font:500 .68rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase; border:1px solid rgba(255,255,255,.18);color:var(--muted);padding:.26rem .45rem; } .tag.region{border-color:rgba(255,152,0,.5);color:var(--amber)} .tag.cib{border-color:rgba(255,0,242,.5);color:var(--magenta)} .card-buy{ display:block;text-align:center;padding:.7rem;background:var(--magenta);color:#fff; font:700 .82rem/1 var(--display);font-style:italic;text-transform:uppercase;letter-spacing:.1em; opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s; } @media(hover:none){.card-buy{opacity:1;transform:none}} /* ── Toolbar (sort / filter) ─────────────────────────────── */ .toolbar{ display:flex;align-items:center;gap:1rem;flex-wrap:wrap; padding:.9rem 0 1.6rem;border-bottom:1px solid var(--hair);margin-bottom:1.8rem; } .toolbar .subnav{display:flex;gap:.5rem;flex-wrap:wrap} .toolbar .subnav a{ font:600 .82rem/1 var(--body);text-transform:uppercase;letter-spacing:.08em; border:1px solid var(--hair);padding:.42rem .7rem;color:#c2c0d2;transition:.2s; } .toolbar .subnav a:hover{border-color:var(--magenta);color:#fff} .toolbar .subnav a[aria-current]{background:var(--magenta);border-color:var(--magenta);color:#fff} .toolbar .subnav a b{color:var(--dim);font-weight:500;margin-left:.35rem} .toolbar .subnav a[aria-current] b{color:rgba(255,255,255,.75)} .toolbar form{margin-left:auto;display:flex;align-items:center;gap:.6rem} .toolbar label{font:600 .78rem/1 var(--body);text-transform:uppercase;letter-spacing:.14em;color:var(--muted)} .toolbar select{ background:var(--ink-2);color:var(--paper);border:1px solid var(--hair); padding:.45rem .7rem;font:500 .9rem var(--body);cursor:pointer; } /* ── Pagination ──────────────────────────────────────────── */ .pager{display:flex;align-items:center;justify-content:center;gap:1.4rem;padding-block:3rem} .pager a{ font:700 .88rem/1 var(--display);font-style:italic;text-transform:uppercase;letter-spacing:.1em; border:2px solid var(--hair);padding:.7rem 1.3rem;transition:.22s; } .pager a:hover{border-color:var(--magenta);color:var(--magenta)} .pager .where{font:600 .88rem/1 var(--body);color:var(--muted);letter-spacing:.1em;text-transform:uppercase} .empty{padding:4rem 0;text-align:center;color:var(--muted)} .empty h3{font:800 1.6rem/1 var(--display);font-style:italic;text-transform:uppercase;color:var(--paper);margin-bottom:.8rem} /* ── Platform cards ──────────────────────────────────────── */ .plats{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem} .plat-card{ border:1px solid rgba(255,255,255,.1);background:linear-gradient(160deg,var(--ink-3),var(--ink-2)); padding:1.5rem;transition:border-color .25s; } .plat-card:hover{border-color:var(--amber)} .plat-card h3{font:800 1.5rem/1 var(--display);font-style:italic;text-transform:uppercase;margin-bottom:1rem;color:var(--paper)} .plat-card h3 a:hover{color:var(--amber)} .plat-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.1rem} .plat-card li a{ display:flex;justify-content:space-between;padding:.42rem 0; border-bottom:1px solid rgba(255,255,255,.06);color:#c2c0d2;font-size:.98rem; } .plat-card li a:hover{color:var(--magenta)} .plat-card li a b{color:var(--muted);font-weight:500;font-size:.85rem} /* ── Trust strip ─────────────────────────────────────────── */ .trust{background:linear-gradient(100deg,rgba(255,0,242,.10),rgba(236,90,46,.10));border-block:1px solid rgba(255,0,242,.24)} .trust .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2rem;padding-block:2.6rem} .trust h3{font:700 1.05rem/1.2 var(--display);font-style:italic;text-transform:uppercase;margin-bottom:.5rem;color:var(--amber)} .trust p{margin:0;color:#c2c0d2;font-size:.96rem} /* ── Product page ────────────────────────────────────────── */ .product{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start} @media(max-width:900px){.product{grid-template-columns:1fr}} .gallery .main{ position:relative;aspect-ratio:1;background:#000;border:1px solid var(--hair); display:grid;place-items:center;overflow:hidden; } .gallery .main img{width:100%;height:100%;object-fit:contain} .gallery .thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:.5rem;margin-top:.6rem} .gallery .thumbs button{ aspect-ratio:1;background:#000;border:1px solid var(--hair);padding:0;cursor:pointer; overflow:hidden;transition:border-color .2s; } .gallery .thumbs button:hover{border-color:var(--amber)} .gallery .thumbs button[aria-current]{border-color:var(--magenta);box-shadow:0 0 14px rgba(255,0,242,.4)} .gallery .thumbs img{width:100%;height:100%;object-fit:contain} .pinfo h1{ font:800 clamp(1.7rem,3.6vw,2.7rem)/1.05 var(--display);font-style:italic; text-transform:uppercase;letter-spacing:-.01em;margin-bottom:.7rem; } .pinfo .sub{color:var(--muted);font-size:.98rem;margin:0 0 1.4rem} .pinfo .badges{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.6rem} .pricebox{border:1px solid var(--hair-hot);background:rgba(255,0,242,.05);padding:1.4rem;margin-bottom:1.4rem} .pricebox .amount{display:flex;align-items:baseline;gap:.8rem;margin-bottom:1rem} .pricebox .now{font:800 clamp(2.2rem,5vw,3rem)/1 var(--display);font-style:italic;color:var(--amber)} .pricebox .was{font-size:1.05rem;color:var(--dim);text-decoration:line-through} .pricebox .save{font:700 .75rem/1 var(--display);font-style:italic;background:var(--ember);color:#fff;padding:.3rem .55rem;text-transform:uppercase;letter-spacing:.08em} .pricebox .note{margin:.9rem 0 0;font-size:.88rem;color:var(--muted);text-align:center} .soldbox{border:1px solid var(--hair);background:var(--ink-2);padding:1.4rem;margin-bottom:1.4rem} .soldbox h2{font:800 1.5rem/1 var(--display);font-style:italic;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem} .soldbox p{margin:0 0 1rem;color:var(--muted)} .specs{width:100%;border-collapse:collapse;margin-bottom:1.6rem} .specs th,.specs td{text-align:left;padding:.6rem .2rem;border-bottom:1px solid var(--hair);font-size:.95rem} .specs th{ font:600 .76rem/1.4 var(--body);text-transform:uppercase;letter-spacing:.14em; color:var(--muted);width:40%;vertical-align:top; } .specs td{color:#dcdae6} .notes{border-left:3px solid var(--amber);padding:.2rem 0 .2rem 1.1rem;margin-bottom:1.6rem} .notes h2{font:700 .82rem/1 var(--display);font-style:italic;text-transform:uppercase;letter-spacing:.14em;color:var(--amber);margin-bottom:.6rem} .notes p{margin:0;color:#c9c7d6} /* ── Footer ──────────────────────────────────────────────── */ .site-foot{padding-block:3rem;border-top:1px solid var(--hair);color:var(--muted);font-size:.9rem;margin-top:2rem} .site-foot .wrap{display:flex;gap:2rem;flex-wrap:wrap;align-items:center} .site-foot nav{display:flex;gap:1.3rem;flex-wrap:wrap;margin-left:auto} .site-foot a:hover{color:var(--magenta)} /* ── Editorial: blog + static pages ──────────────────────── */ .wrap.narrow{max-width:820px} .posts{display:grid;gap:1.6rem} .post-card{ display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:1.6rem; border:1px solid var(--hair);background:var(--ink-2); transition:border-color .25s,transform .25s; } @media(max-width:720px){.post-card{grid-template-columns:1fr}} .post-card:hover{border-color:var(--magenta);transform:translateY(-3px)} .post-shot{overflow:hidden;background:#000;aspect-ratio:16/9} .post-shot img{width:100%;height:100%;object-fit:cover;transition:transform .45s} .post-card:hover .post-shot img{transform:scale(1.04)} .post-body{padding:1.4rem 1.6rem 1.5rem;display:flex;flex-direction:column;gap:.7rem} .post-body time{font:600 .76rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--amber)} .post-body h2{font:800 clamp(1.2rem,2.4vw,1.6rem)/1.2 var(--display);font-style:italic;text-transform:uppercase} .post-body h2 a:hover{color:var(--magenta)} .post-body p{margin:0;color:#c2c0d2;font-size:.98rem} .readmore{margin-top:auto;font:700 .8rem/1 var(--display);font-style:italic;text-transform:uppercase;letter-spacing:.12em;color:var(--magenta)} .post-head{margin-bottom:1.8rem} .post-head h1{font:800 clamp(1.9rem,4.4vw,3.2rem)/1.05 var(--display);font-style:italic;text-transform:uppercase;letter-spacing:-.01em} .post-byline{margin:.9rem 0 0;font:600 .8rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--amber)} .post-hero{width:100%;max-height:520px;object-fit:cover;border:1px solid var(--hair);margin-bottom:2.2rem} /* Long-form body copy, in the body face — Kanit italic is for headings, not paragraphs. Runs the full width of its container; in-content images float right, which pulls the text back to a comfortable measure alongside them. */ .prose{max-width:none;font-size:1.08rem;line-height:1.75;color:#d5d3e0} .prose > * + *{margin-top:1.15em} .prose::after{content:"";display:block;clear:both} /* contain the floats */ .prose h2{font:800 clamp(1.4rem,2.8vw,2rem)/1.15 var(--display);font-style:italic;text-transform:uppercase;color:var(--paper);margin-top:2.2em} .prose h3{font:700 1.2rem/1.25 var(--display);font-style:italic;text-transform:uppercase;color:var(--amber);margin-top:1.8em} .prose h4{font:600 1.05rem/1.3 var(--body);color:var(--paper);letter-spacing:.04em} .prose a{color:var(--magenta);text-decoration:underline;text-underline-offset:3px} .prose a:hover{color:var(--amber)} .prose img{border:1px solid var(--hair);width:100%;height:auto} /* Markdown renders a standalone image as

, so the paragraph is what floats. clear:right makes consecutive images stack down the right edge instead of colliding. */ .prose p:has(> img:only-child){ float:right;clear:right; width:min(42%,460px); margin:.4rem 0 1.6rem 2.5rem; } .prose p:has(> img:only-child) img{margin:0} /* Below the point where a float would leave the text column too narrow, images go back to full width in the flow. */ @media(max-width:900px){ .prose p:has(> img:only-child){float:none;width:100%;margin:1.6em 0} } .prose ul,.prose ol{padding-left:1.4em} .prose li + li{margin-top:.4em} .prose blockquote{ border-left:3px solid var(--magenta);padding:.2rem 0 .2rem 1.3rem; color:#c2c0d2;font-style:italic; } .prose code{background:var(--ink-3);padding:.15em .4em;font-size:.9em;border:1px solid var(--hair)} .prose pre{background:var(--ink-3);border:1px solid var(--hair);padding:1rem;overflow-x:auto} .prose pre code{background:none;border:0;padding:0} .prose hr{border:0;border-top:1px solid var(--hair);margin-block:2.4em} .prose table{width:100%;border-collapse:collapse;display:block;overflow-x:auto} .prose th,.prose td{border:1px solid var(--hair);padding:.6rem .8rem;text-align:left} .prose th{background:var(--ink-3);font-weight:600} .post-nav{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:3.5rem;padding-top:2rem;border-top:1px solid var(--hair)} @media(max-width:640px){.post-nav{grid-template-columns:1fr}} .post-nav a{border:1px solid var(--hair);padding:1rem 1.2rem;display:flex;flex-direction:column;gap:.4rem;transition:border-color .2s} .post-nav a:hover{border-color:var(--magenta)} .post-nav .next{text-align:right;grid-column:2} @media(max-width:640px){.post-nav .next{text-align:left;grid-column:1}} .post-nav span{font:600 .74rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--amber)} .post-nav b{font:600 1rem/1.3 var(--body);color:var(--paper)}