:root{color-scheme:dark;--bg:#0b0c0d;--fg:#f1eee6;--muted:#a9aaa6;--line:rgba(241,238,230,.16);--accent:#d5a34c}*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--bg)}body{margin:0;background:var(--bg);color:var(--fg);font-family:Archivo,Inter,system-ui,sans-serif;line-height:1.7}a{color:inherit;text-decoration:none}.article-nav{height:76px;padding:0 clamp(20px,5vw,72px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.wordmark{font-size:1.4rem;font-weight:800;letter-spacing:-.08em}.wordmark span{color:var(--accent)}.back-link,.footer-links a{font-size:.85rem;color:var(--muted)}
.article-nav-actions { display:flex; align-items:center; justify-content:flex-end; gap:clamp(12px,2.5vw,30px); }
.article-nav-actions a { white-space:nowrap; }
.article-nav .archive-link {
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 13px; border:1px solid var(--line);
  color:var(--fg); font-size:.72rem; font-weight:700;
  letter-spacing:.035em; transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.article-nav .archive-link span { color:var(--accent); }
.article-nav .archive-link:hover { border-color:var(--accent); background:rgba(213,163,76,.09); transform:translateY(-1px); }
.article-nav .archive-link:focus-visible,.article-nav .back-link:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.article-hero{position:relative;width:min(100%,1120px);margin:clamp(20px,4vw,56px) auto 0;aspect-ratio:3/4;max-height:88svh;overflow:hidden;background:#d7c6a5}.article-cover{width:100%;height:100%;object-fit:cover;display:block;animation:cover-arrive 1.1s ease both;mask-image:linear-gradient(to bottom,#000 0%,#000 70%,rgba(0,0,0,.75) 85%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 70%,rgba(0,0,0,.75) 85%,transparent 100%)}.cover-grain{pointer-events:none;position:absolute;inset:0;opacity:.1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");mix-blend-mode:soft-light}.article-shell{width:min(calc(100% - 40px),760px);margin:-3rem auto 7rem;position:relative;z-index:1}.article-meta{display:flex;flex-wrap:wrap;gap:10px 18px;text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;font-weight:700;color:var(--accent)}.article-title{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(2.8rem,7.2vw,5.7rem);line-height:.99;letter-spacing:-.035em;margin:1.2rem 0 1.4rem;max-width:16ch;overflow-wrap:anywhere}.article-deck{font-size:clamp(1.1rem,2vw,1.35rem);line-height:1.55;color:#d2d0c8;margin:0 0 3rem}.article-body{font-size:clamp(1rem,1.25vw,1.12rem);line-height:1.9;color:#d9d8d2}.article-body h2,.article-body h3{font-family:"Instrument Serif",Georgia,serif;font-weight:400;line-height:1.12;color:var(--fg);margin:3.2rem 0 1rem}.article-body h2{font-size:clamp(2rem,4vw,3rem)}.article-body h3{font-size:1.7rem}.article-body p{margin:0 0 1.45rem}.article-body a{color:#e4b85f;text-decoration:underline;text-underline-offset:3px}.article-body blockquote{margin:2rem 0;padding:.2rem 0 .2rem 1.4rem;border-left:2px solid var(--accent);font-family:"Instrument Serif",Georgia,serif;font-size:1.5rem;color:#efebe1}.article-body ul,.article-body ol{padding-left:1.4rem;margin:0 0 1.6rem}.article-body li{margin:.45rem 0}.article-body hr{border:0;border-top:1px solid var(--line);margin:3rem 0}.article-footer{border-top:1px solid var(--line);padding:2.5rem clamp(20px,5vw,72px);display:flex;justify-content:space-between;gap:2rem;align-items:flex-end;background:#080909}.article-footer p{font-size:.85rem;color:var(--muted);margin:.5rem 0 0}.footer-links{display:flex;gap:1.25rem;flex-wrap:wrap}@keyframes cover-arrive{from{opacity:0;transform:translateY(12px) scale(1.015)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:640px){.article-nav{height:62px;padding-inline:14px;gap:10px}.article-nav-actions{gap:10px}.article-nav .archive-link{padding:7px 8px;font-size:.65rem}.article-nav .back-link{font-size:.72rem}.article-hero{width:100%;margin:0;max-height:none}.article-shell{width:calc(100% - 36px);margin:-1.2rem auto 4rem}.article-title{font-size:clamp(2.7rem,13vw,4rem)}.article-deck{margin-bottom:2rem}.article-footer{align-items:flex-start;flex-direction:column}.footer-links{gap:.9rem 1.1rem}}@media(prefers-reduced-motion:reduce){html:not([data-motion-mode="full"]){scroll-behavior:auto}html:not([data-motion-mode="full"]) .article-cover{animation:none}}

/* Scroll-linked cover dissolve patch */
.article-hero {
  background: transparent;
}
.article-cover {
  --cover-fade: 22%;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 calc(100% - var(--cover-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 calc(100% - var(--cover-fade)),
    transparent 100%
  );
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion-mode="full"]) .article-cover{
    --cover-fade: 22%;
  }
}

/* Blog article Lenis + blue rail patch */
.article-hero { background: var(--bg); }
.article-cover {
  --cover-fade: 38%;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - var(--cover-fade)), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - var(--cover-fade)), transparent 100%);
}
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
/* PORTFOLIO-MATCH ARTICLE RULER V1 */
/* Match the portfolio's right-side ruler while keeping article progress independent. */
.article-scroll-rail { position: fixed; z-index: 45; top: 9vh; right: 0; bottom: 9vh; width: 145px; pointer-events: none; color: var(--muted, #858585); font-family: var(--mono, monospace); }
.article-rail-percent { position: absolute; top: 22px; right: 8px; display: flex; align-items: baseline; gap: 2px; color: #6eacff; font-size: 9px; letter-spacing: .06em; }
.article-rail-percent::before { content: ""; width: 28px; height: 1px; margin-right: 6px; background: #257aff; box-shadow: 0 0 8px #257aff; }
.article-rail-percent small { font-size: 7px; }
.article-scroll-scale { position: absolute; top: 11%; right: 10px; bottom: 11%; width: 26px; border-right: 1px solid var(--line-strong, rgba(255,255,255,.22)); }
.article-scroll-track { position: absolute; top: 0; right: -1px; bottom: 0; width: 2px; background: var(--line, rgba(255,255,255,.12)); }
.article-scroll-fill { position: absolute; top: 0; right: 0; width: 2px; height: 100%; transform: scaleY(var(--article-scroll-progress, 0)); transform-origin: top; background: #2b79ff; box-shadow: 0 0 8px rgba(43,121,255,.5); }
.article-scroll-thumb { position: absolute; top: var(--article-scroll-pct, 0%); right: -4px; width: 8px; height: 2px; background: #6eacff; box-shadow: 0 0 7px #257aff; }
.article-rail-tick { position: absolute; right: 0; display: flex; align-items: center; gap: 8px; transform: translateY(-50%); font-size: 7px; line-height: 1; }
.article-rail-tick i { width: 11px; height: 1px; background: var(--line-strong, rgba(255,255,255,.22)); }
.article-rail-tick b { min-width: 17px; font-weight: 400; text-align: right; }
.article-tick-0 { top: 0; }.article-tick-20 { top: 20%; }.article-tick-40 { top: 40%; }.article-tick-60 { top: 60%; }.article-tick-80 { top: 80%; }.article-tick-100 { top: 100%; }
.article-rail-label { position: absolute; top: 49%; right: 41px; color: var(--faint, #666); font-family: var(--display, sans-serif); font-size: 13px; font-weight: 700; letter-spacing: .08em; line-height: 1.05; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
@media (max-width: 900px) { .article-scroll-rail { display: none; } }
@media (prefers-reduced-motion: reduce) { html:not([data-motion-mode="full"]) .article-cover{ --cover-fade: 38%; } }


/* Same-origin cross-page navigation transition for the portfolio and blog pages. */
@view-transition { navigation: auto; }
::view-transition-old(root) {
  animation: site-page-out 220ms cubic-bezier(.2,.7,.2,1) both;
}
::view-transition-new(root) {
  animation: site-page-in 420ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes site-page-out {
  to { opacity: .72; transform: translateY(-5px); }
}
@keyframes site-page-in {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion-mode="full"])::view-transition-old(root), html:not([data-motion-mode="full"])::view-transition-new(root){ animation: none !important; }
}