:root { --blog-red:#ff4d4d; --blog-glass:rgba(21,24,29,.52); --blog-line:rgba(255,255,255,.14); }
* { box-sizing:border-box; }
html { background:#050505; scroll-behavior:smooth; }
body[data-page] { margin:0; min-width:320px; background:radial-gradient(circle at 50% -15%,#262b30 0,#090a0c 42%,#030303 75%); color:#fff; font-family:Arial,sans-serif; }
button,a { font:inherit; } a { color:inherit; }
.blog-nav { position:fixed; z-index:20; left:50%; top:20px; transform:translateX(-50%); width:min(550px,calc(100% - 32px)); height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 17px; border:1px solid var(--blog-line); border-radius:18px; background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.025)); box-shadow:0 12px 36px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.12); backdrop-filter:blur(18px) saturate(140%); }
.blog-brand { text-decoration:none; font-family:Anton,Impact,sans-serif; font-size:1.4rem; letter-spacing:.08em; }
.blog-nav-links { display:flex; gap:16px; font-size:.72rem; font-weight:bold; letter-spacing:.12em; text-transform:uppercase; }
.blog-nav-links a { text-decoration:none; opacity:.82; } .blog-nav a:hover,.blog-nav a:focus-visible { color:var(--blog-red); opacity:1; }
.journal-hero { padding:150px 20px 32px; text-align:center; }.eyebrow { color:var(--blog-red); font-size:.72rem; font-weight:bold; letter-spacing:.17em; text-transform:uppercase; }.journal-hero h1,.article-hero h1 { margin:.25rem 0 0; font-family:Anton,Impact,sans-serif; font-weight:400; letter-spacing:.025em; text-transform:uppercase; }.journal-hero h1 { font-size:clamp(3.4rem,10vw,7rem); }.journal-hero p { max-width:510px; margin:17px auto 0; color:rgba(255,255,255,.7); line-height:1.6; }
.carousel-shell { position:relative; overflow:hidden; padding:30px 0 82px; }.carousel { height:clamp(440px,57vw,625px); position:relative; max-width:1120px; margin:auto; touch-action:pan-y; user-select:none; }.blog-card { position:absolute; top:0; left:50%; width:clamp(270px,31vw,360px); height:100%; overflow:hidden; border:1px solid rgba(255,255,255,.2); border-radius:28px; background:#15171a; box-shadow:0 26px 55px rgba(0,0,0,.45); transform:translateX(-50%); transition:transform .65s cubic-bezier(.22,.75,.25,1),opacity .45s ease,filter .45s ease; will-change:transform; }.blog-card::after,.article-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.18) 48%,rgba(0,0,0,.94) 100%); pointer-events:none; }.blog-card img { width:100%; height:100%; object-fit:cover; display:block; }.blog-card-content { position:absolute; z-index:1; inset:auto 0 0; padding:24px; }.card-meta,.article-meta { display:flex; gap:10px; flex-wrap:wrap; color:rgba(255,255,255,.68); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; }.blog-card h2 { margin:10px 0 7px; font-family:Anton,Impact,sans-serif; font-size:clamp(1.65rem,2.3vw,2.2rem); font-weight:400; line-height:.95; text-transform:uppercase; }.blog-card p { margin:0 0 15px; font-size:.86rem; color:rgba(255,255,255,.78); line-height:1.35; }.glass-button { display:inline-flex; align-items:center; justify-content:center; min-height:37px; padding:0 14px; border:1px solid rgba(255,255,255,.25); border-radius:12px; color:#fff; background:rgba(255,255,255,.08); box-shadow:inset 0 1px rgba(255,255,255,.14); backdrop-filter:blur(9px); text-decoration:none; font-size:.7rem; font-weight:bold; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:transform .2s,background .2s; }.glass-button:hover,.glass-button:focus-visible { background:rgba(255,77,77,.35); transform:translateY(-2px); outline:none; }.carousel-controls { display:flex; justify-content:center; gap:12px; margin-top:26px; }.carousel-control { width:46px; padding:0; font-size:1.3rem; }.carousel-status { align-self:center; min-width:54px; color:rgba(255,255,255,.62); text-align:center; font-size:.72rem; letter-spacing:.1em; }
.article-page { min-height:180svh; padding:90px 20px 48px; animation:rise .38s ease both; }.article { max-width:860px; margin:auto; }.article-hero { position:relative; min-height:min(50svh,520px); display:flex; align-items:flex-end; overflow:hidden; border:1px solid var(--blog-line); border-radius:32px; background:#15171a; }.article-hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }.article-hero-copy { position:relative; z-index:1; padding:clamp(25px,5vw,50px); }.article-hero h1 { max-width:700px; font-size:clamp(2.6rem,7vw,5.8rem); line-height:.92; }.article-intro { max-width:630px; margin:16px 0 0; font-size:clamp(1rem,2vw,1.2rem); line-height:1.55; color:rgba(255,255,255,.82); }.article-actions { display:flex; justify-content:space-between; gap:16px; margin:22px 2px 0; }.article-body { width:min(90%,820px); max-width:none; margin:42px auto 0; }.article-body p { font-size:clamp(1rem,1.7vw,1.15rem); line-height:1.68; color:rgba(255,255,255,.83); }.article-body h2 { margin:38px 0 12px; font-family:Anton,Impact,sans-serif; font-size:clamp(2rem,4vw,3rem); font-weight:400; text-transform:uppercase; }.article-media { margin:30px 0; }.article-media img,.article-media video { width:100%; aspect-ratio:16/10; display:block; object-fit:cover; border:1px solid var(--blog-line); border-radius:22px; background:#15171a; }.article-media figcaption { margin:10px 4px 0; color:rgba(255,255,255,.55); font-size:.8rem; line-height:1.45; }.spec-block { display:inline-flex; flex-direction:column; gap:6px; min-width:190px; margin:22px 0 6px; padding:20px 22px; border:1px solid var(--blog-line); border-radius:18px; background:var(--blog-glass); box-shadow:inset 0 1px rgba(255,255,255,.09); backdrop-filter:blur(15px); }.spec-block span { color:rgba(255,255,255,.6); font-size:.7rem; font-weight:bold; letter-spacing:.12em; text-transform:uppercase; }.spec-block strong { font-family:Anton,Impact,sans-serif; font-size:1.55rem; font-weight:400; letter-spacing:.03em; }.article-pagination { display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:820px; margin:48px auto 0; }.article-pagination a { min-height:86px; padding:16px; text-decoration:none; }.article-pagination a:last-child { text-align:right; }.article-pagination small { display:block; margin-bottom:5px; color:rgba(255,255,255,.57); text-transform:uppercase; letter-spacing:.1em; }.article-pagination strong { font-family:Anton,Impact,sans-serif; font-size:1.15rem; font-weight:400; text-transform:uppercase; }
.reveal { animation:rise .65s ease both; } @keyframes rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } } @media (max-width:650px) { .blog-nav-links { gap:11px; }.blog-nav-links a:first-child { display:none; }.carousel { height:480px; }.blog-card { width:min(76vw,330px); }.article-page { padding-inline:14px; }.article-hero { min-height:590px; border-radius:25px; }.article-body { margin-top:48px; }.article-media { margin:35px 0; }.article-media img,.article-media video { border-radius:17px; }.article-pagination { margin-top:60px; } } @media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }

/* Homepage journal: one deliberate, viewport-height section beneath Process. */
.Blog-Section { min-height:100svh; max-height:100svh; position:relative; isolation:isolate; display:flex; flex-direction:column; overflow:hidden; padding:clamp(34px,5svh,62px) 0 clamp(20px,3svh,34px); background:radial-gradient(circle at 50% 15%,rgba(66,72,80,.36),transparent 42%),#050505; color:#fff; scroll-snap-align:start; }
.blog-section-heading { flex:0 0 auto; padding:0 20px; text-align:center; }.Blog-Section .eyebrow { color:var(--blog-red); font-size:.68rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }.blog-section-heading h1 { margin:4px 0 0; font-family:Anton,Impact,sans-serif; font-size:clamp(2.6rem,5vw,4.8rem); font-weight:400; letter-spacing:.03em; line-height:.94; text-transform:uppercase; }.blog-section-heading p { margin:9px 0 0; color:rgba(255,255,255,.68); font-size:clamp(.8rem,1.1vw,.95rem); }
.Blog-Section .carousel-shell { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden; padding:clamp(18px,3svh,32px) 0 0; }.Blog-Section .carousel { width:min(94vw,1600px); height:clamp(320px,48svh,500px); max-width:none; flex:0 0 auto; }.Blog-Section .blog-card { width:clamp(300px,30vw,470px); height:100%; border-radius:25px; }.Blog-Section .blog-card-content { padding:clamp(18px,1.8vw,25px); }.Blog-Section .blog-card h2 { font-size:clamp(1.55rem,2.15vw,2.15rem); }.Blog-Section .blog-card p { display:-webkit-box; margin-bottom:11px; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }.Blog-Section .blog-card:focus-visible { outline:2px solid var(--blog-red); outline-offset:5px; }.Blog-Section .carousel-controls { flex:0 0 auto; margin-top:clamp(15px,2.5svh,25px); }.Blog-Section .carousel-control { width:52px; height:52px; min-height:52px; padding:0; border-radius:50%; aspect-ratio:1; display:grid; place-items:center; }.carousel-control svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }.carousel-control:active { transform:translateY(0) scale(.94); }.Blog-Section .carousel-status { min-width:64px; }
@media (min-width:651px) { .Blog-Section .blog-card[aria-hidden="true"] { visibility:hidden; pointer-events:none; } }
@media (max-width:900px) { .Blog-Section { min-height:auto; max-height:none; padding-block:62px 50px; }.Blog-Section .carousel { width:100%; height:clamp(380px,64svh,510px); }.Blog-Section .blog-card { width:clamp(280px,62vw,390px); } }
@media (max-width:650px) { .Blog-Section { padding-block:58px 42px; }.Blog-Section .carousel-shell { padding-top:24px; }.Blog-Section .carousel { height:440px; }.Blog-Section .blog-card { width:min(82vw,350px); }.Blog-Section .blog-card-content { padding:21px; }.Blog-Section .blog-card p { -webkit-line-clamp:2; }.Blog-Section .blog-card[aria-hidden="true"] { visibility:hidden; pointer-events:none; } }

/* Keep article controls visibly anchored to the top edge of the full-screen view. */
.article { position:relative; }.article .article-actions { position:absolute; z-index:3; top:20px; right:20px; left:20px; margin:0; }.article .article-actions .glass-button { background:rgba(9,10,12,.44); }
@media (max-width:650px) { .article .article-actions { top:14px; right:14px; left:14px; } }
@media (min-width:901px) { .Blog-Section .carousel-controls { position:relative; z-index:2; transform:translateY(-48px); } }
@media (max-width:650px) { .article-page { min-height:180svh; }.article-hero { min-height:min(55svh,460px); } }

@media (max-width:768px) {
  .article-hero { min-height:0; aspect-ratio:1 / 1; }
  .article-hero img,
  .article-media img,
  .article-media video { width:100%; height:100%; aspect-ratio:1 / 1; object-fit:cover; object-position:center; display:block; }
}