:root{
  --surface:#ffffff;
  --text:#0a0a0a;
  --border:rgba(0,0,0,.24);
  --ring:rgba(85,230,165,.35);
  --muted:#3f3f46;
  --muted-strong:#27272a;
  --text-strong:#0f0f0f;
  --text-soft:#52525b;
  --glow-brand:rgba(85,230,165,.08);
  --glow-accent:rgba(255,99,71,.12);
  --card-grad:linear-gradient(135deg, rgba(85,230,165,.04), rgba(255,255,255,0) 60%);
  --card-edge:rgba(255,255,255,.03);
}
.dark:root{
  --surface:#0a0a0a;
  --text:#fafafa;
  --border:rgba(255,255,255,.14);
  --muted:#d4d4d8;
  --muted-strong:#f4f4f5;
  --text-strong:#ffffff;
  --text-soft:#a1a1aa;
  --glow-brand:rgba(85,230,165,.06);
  --glow-accent:rgba(255,99,71,.10);
  --card-grad:linear-gradient(135deg, rgba(85,230,165,.05), rgba(0,0,0,0) 60%);
  --card-edge:rgba(255,255,255,.02);
}
.border-zinc-800\/60{ border-color:var(--border)!important }
.bg-black\/20{ background-color:color-mix(in oklab,var(--surface) 85%,#000)!important }
.bg-zinc-900\/30{ background-color:color-mix(in oklab,var(--surface) 95%,#000)!important }

:root:not(.dark) .text-zinc-200,
:root:not(.dark) .text-zinc-300,
:root:not(.dark) .text-zinc-400,
:root:not(.dark) .text-zinc-400\/90,
:root:not(.dark) .text-zinc-400\/80,
:root:not(.dark) .text-zinc-500,
:root:not(.dark) .text-zinc-500\/90,
:root:not(.dark) .text-zinc-500\/80,
:root:not(.dark) .text-zinc-500\/70{ color:var(--muted)!important }
:root:not(.dark) .text-zinc-600,
:root:not(.dark) .text-zinc-600\/90,
:root:not(.dark) .text-zinc-700,
:root:not(.dark) .text-zinc-700\/80,
:root:not(.dark) .text-zinc-800\/60{ color:var(--muted-strong)!important }
:root:not(.dark) .text-brand{ color:#047857!important }
:root:not(.dark) .hover\:text-brand:hover{ color:#047857!important }

/* Radius system */
html[data-radius="soft"]{ --r:12px }
html[data-radius="sharp"]{ --r:6px }
html[data-radius="square"]{ --r:0px }
.r{ border-radius:var(--r) }

/* Subtle dotted grid with parallax */
.grid-bg{
  background-image: radial-gradient(rgba(0,0,0,0.06) 1px, transparent 1px);
  background-size: 14px 14px;
  transform: translateZ(0);
  will-change: background-position;
  mask-image: linear-gradient(to bottom, black, black 75%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, black, black 75%, transparent);
}
.dark .grid-bg{ background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px) }

/* Smooth theme transition */
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition: background-color .25s ease, color .25s ease;
  background:var(--surface);
  color:var(--text);
  position:relative;
  isolation:isolate;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.025), transparent 35%),
    radial-gradient(circle at 80% 0%, rgba(255,255,255,.018), transparent 30%),
    repeating-radial-gradient(circle at 0 0, rgba(255,255,255,.015) 0 .8px, transparent .8px 2px);
  pointer-events:none;
  z-index:-1;
  opacity:.35;
}

h1, h2, h3{ color:var(--text-strong); letter-spacing:-0.01em; }
p{ color:var(--text-soft); }

a{ transition:color .15s ease,border-color .15s ease,background-color .15s ease }
a:not([class]){ text-decoration:underline; text-decoration-color:rgba(85,230,165,.5); text-underline-offset:4px }
a:not([class]):hover{ text-decoration-color:#55e6a5 }
::selection{ background:rgba(85,230,165,.35); color:var(--text) }

/* === Scoped brand scrollbar (subtle) === */
/* Apply with .brand-scroll on specific overflow containers only */
.brand-scroll::-webkit-scrollbar {
  height: 6px;                 /* horizontal rails only */
  width: 6px;                  /* in case of vertical use */
  background: transparent;
}
.brand-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.brand-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #55e6a5, #ff6347);
  border-radius: 9999px;
  opacity: .6;                 /* dial back intensity */
  transition: opacity .2s ease, box-shadow .2s ease;
}
.brand-scroll:hover::-webkit-scrollbar-thumb {
  opacity: .85;                /* gentle lift on hover */
  box-shadow: 0 0 4px rgba(85,230,165,.2), 0 0 4px rgba(255,99,71,.15);
}

/* Firefox (scoped) */
.brand-scroll {
  scrollbar-width: thin;
  scrollbar-color: #55e6a5 transparent;
  overscroll-behavior-x: contain; /* stop parent from also scrolling */
}

/* Prevent page-level horizontal scrollbar altogether */
html, body { overflow-x: hidden; }

/* Focus ring */
.focus-ring:focus-visible{ outline:2px solid var(--ring); outline-offset:3px; box-shadow:none; }

/* Emphasis */
.grad-brand{ background:linear-gradient(90deg,#55e6a5 0%,#7cfcc0 100%); -webkit-background-clip:text; background-clip:text; color:transparent }
.grad-accent{ background:linear-gradient(90deg,#ff7b62 0%,#ff6347 100%); -webkit-background-clip:text; background-clip:text; color:transparent }

/* Cards: glassy, flatter hover */
.card{
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: linear-gradient( to bottom, rgba(255,255,255,.06), rgba(255,255,255,.02) );
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.dark .card{
  background: linear-gradient( to bottom, rgba(0,0,0,.20), rgba(0,0,0,.10) );
}
.card:hover{ box-shadow:0 10px 24px rgba(0,0,0,.25),0 0 0 1px rgba(85,230,165,.45); border-color:rgba(85,230,165,.55); transform: translateY(-2px) }
@media (prefers-reduced-motion: reduce){ .card, .card:hover{ transition:none; transform:none; box-shadow:none } }

/* Skip link */
.skip{ position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden }
.skip:focus{ left:1rem; top:1rem; width:auto; height:auto; background:var(--surface); color:var(--text);
  padding:.5rem .75rem; border-radius:var(--r); z-index:50; border:1px solid var(--border) }

/* Theme toggle spin */
.spin{ transition: transform .4s ease }
.spin.spin-anim{ transform: rotate(180deg) }

/* Currently building — glassy feature cards */
.cb{
  counter-reset: item;
  grid-auto-rows: 1fr;
}
.cb > li{
  display:flex;
}
.cb-item{
  position: relative;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: linear-gradient(to bottom, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--border);
  height: 100%;
}
.dark .cb-item{ background: linear-gradient(to bottom, rgba(0,0,0,.20), rgba(0,0,0,.10)) }
.cb-item:hover{ border-color: rgba(85,230,165,.55); transform:none; box-shadow:0 0 0 1px rgba(85,230,165,.15) }
.cb-item::before{
  counter-increment: item;
  content: counter(item);
  position: absolute; inset: -1px auto auto -1px;
  width: 24px; height: 24px; display: grid; place-items: center;
  background: rgba(85,230,165,.3); color: #55e6a5; font-weight: 700; font-size: 12px;
  border-radius:var(--r);
}
.cb-top{
  position:absolute; left:0; right:0; top:0; height:1px;
  background: linear-gradient(90deg, rgba(85,230,165,.7), rgba(255,99,71,.65));
  opacity:.35;
}
@media (prefers-reduced-motion: reduce){
  .cb-item, .cb-item:hover{ transition:none; transform:none; box-shadow:none }
}

/* Secondary pages
   Quiet, editorial extensions of the homepage visual system. */
.secondary-page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.secondary-page > header > div:last-child{
  width:min(100% - 3.5rem, 72rem);
  min-height:4.5rem;
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.secondary-page > header{ position:sticky; top:0; z-index:30; }
.secondary-page > header img{ width:2rem; height:2rem; }
.secondary-page > header a{ color:#a1a1aa; text-decoration:none; }
.secondary-page > header nav{ display:flex; align-items:center; gap:1.5rem; }
.secondary-page main{ flex:1; }
.secondary-shell{
  width:min(100% - 3rem, 64rem);
  margin-inline:auto;
  padding-block:3rem 1rem;
}
.secondary-content{
  width:min(100%, 44rem);
}
.secondary-orientation{
  display:flex;
  align-items:center;
  gap:.55rem;
  margin-bottom:2.25rem;
  color:#71717a;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.secondary-orientation a{ color:inherit; transition:color .18s ease; }
.secondary-orientation a:hover{ color:#55e6a5; }
.secondary-orientation .separator{ color:#3f3f46; }
.secondary-heading{
  padding-bottom:2rem;
  border-bottom:1px solid rgba(63,63,70,.62);
}
.secondary-heading .eyebrow{ margin-bottom:.8rem; }
.secondary-heading h1{
  max-width:16ch;
  font-size:clamp(2rem, 6vw, 3.5rem);
  line-height:1.02;
  letter-spacing:-.045em;
  font-weight:700;
}
.secondary-heading > p:last-child{
  max-width:38rem;
  margin-top:1rem;
  color:#a1a1aa;
  font-size:1rem;
  line-height:1.75;
}
.secondary-article{ padding-top:2rem; }
.secondary-section + .secondary-section{
  margin-top:2rem;
  padding-top:2rem;
  border-top:1px solid rgba(63,63,70,.45);
}
.secondary-section h2{
  margin-bottom:.8rem;
  color:#e4e4e7;
  font-size:1.15rem;
  font-weight:600;
  letter-spacing:-.02em;
}
.secondary-section p,
.secondary-section li{
  color:#a1a1aa;
  line-height:1.8;
}
.secondary-section p + p{ margin-top:.9rem; }
.secondary-section ul{ padding-left:1.1rem; list-style:disc; }
.secondary-section li + li{ margin-top:.45rem; }
.secondary-section a,
.secondary-meta-links a{
  color:#d4d4d8;
  text-decoration:underline;
  text-decoration-color:rgba(85,230,165,.3);
  text-underline-offset:.25em;
  transition:color .18s ease, text-decoration-color .18s ease;
}
.secondary-section a:hover,
.secondary-meta-links a:hover{ color:#55e6a5; text-decoration-color:#55e6a5; }
.secondary-note{ margin-top:1.25rem; color:#71717a!important; font-size:.78rem; }
.secondary-continue{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:3rem;
  padding:1.25rem 0;
  border-block:1px solid rgba(63,63,70,.55);
}
.secondary-continue p{
  color:#71717a;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.secondary-continue a{
  color:#55e6a5;
  font-size:.9rem;
  font-weight:600;
  transition:color .18s ease, transform .18s ease;
}
.secondary-continue a:hover{ color:#fff; transform:translateX(2px); }
.secondary-meta-links{ display:flex; flex-wrap:wrap; gap:.75rem 1.25rem; }
.secondary-meta-links a{ font-size:.9rem; }
.secondary-page .site-footer{ margin-top:4rem; }
.secondary-page .footer-secondary > a{ color:var(--text-soft); text-decoration:none; }
.secondary-page .utility-controls{ position:fixed; right:1rem; bottom:1rem; z-index:40; }
.secondary-page .contact-panel{ margin-top:2rem; }

html:not(.dark) .secondary-heading,
html:not(.dark) .secondary-section + .secondary-section,
html:not(.dark) .secondary-continue{ border-color:rgba(212,212,216,.85); }
html:not(.dark) .secondary-heading h1,
html:not(.dark) .secondary-section h2{ color:#18181b; }
html:not(.dark) .secondary-heading > p:last-child,
html:not(.dark) .secondary-section p,
html:not(.dark) .secondary-section li{ color:#52525b; }
html:not(.dark) .secondary-section a,
html:not(.dark) .secondary-meta-links a{ color:#27272a; }
html:not(.dark) .secondary-continue a{ color:#087a50; }

@media (max-width:640px){
  .secondary-page > header > div:last-child{ width:min(100% - 2rem, 72rem); }
  .secondary-page > header nav a:not(:first-child){ display:none; }
  .secondary-shell{ width:min(100% - 2rem, 64rem); padding-top:2rem; }
  .secondary-orientation{ margin-bottom:1.75rem; }
  .secondary-continue{ align-items:flex-start; flex-direction:column; }
}
/* Line icons matching the logo vibe */
.icon-line{ stroke: currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; fill:none }

.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:.75rem; }
.section-head h2{
  position:relative;
  padding-left:1rem;
}
.section-head h2::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:.5rem;
  height:.5rem;
  border-radius:1px;
  transform:translateY(-50%);
  background:#55e6a5;
}
.eyebrow {
  letter-spacing:.2em;
  text-transform:uppercase;
  font-size:.72rem;
  line-height:1.45;
  color:color-mix(in oklab,#55e6a5 76%,#cad2ce 24%);
  display:inline-block;
  border-bottom:1px solid rgba(85,230,165,.26);
  padding-bottom:.125rem;
}
.soft-hr { height:1px; background:linear-gradient(90deg,transparent,var(--border),transparent); }
.t-card {
  border:1px solid transparent;
  border-radius:var(--r);
  padding:1rem;
  background:color-mix(in oklab,var(--surface) 97%,var(--text) 3%);
  transition: background-color .2s ease, transform .2s ease;
}
.t-card:hover {
  transform: translateY(-1px);
  background:color-mix(in oklab,var(--surface) 94%,var(--text) 6%);
}
.clamp-1,
.clamp-2{ display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden }
.clamp-1{ -webkit-line-clamp:1 }
.clamp-2{ -webkit-line-clamp:2 }
  .badge{ display:inline-flex; align-items:center; gap:.25rem; padding:0 .45rem; border-radius:var(--r); border:1px solid rgba(255,255,255,.12); font-size:.65rem; line-height:1.4; color:color-mix(in oklab,var(--text) 78%,var(--surface) 22%); background:rgba(255,255,255,.02) }
  .badge svg{ width:.75rem; height:.75rem }

  .post-card{
    --accent:#55e6a5; /* fallback */
    position:relative;
    border-radius:var(--r);
  }
  .post-card::before{
    content:"";
    position:absolute; inset:0 0 auto 0; height:3px;
    background:linear-gradient(90deg,var(--accent),transparent 60%);
    opacity:.9;
  }
  .post-card::after{
    content:"";
    position:absolute; inset:-10% -10% 30% 50%;
    background:radial-gradient(50% 60% at 20% 40%, color-mix(in oklab, var(--accent) 20%, transparent) 0%, transparent 60%);
    filter:blur(16px); pointer-events:none;
  }
  .post-card:hover{
    box-shadow:0 0 0 1px color-mix(in oklab,var(--accent) 35%,transparent),
               0 10px 40px -10px color-mix(in oklab,var(--accent) 35%,transparent);
    transform:translateY(-1px);
    transition:box-shadow .25s,transform .25s;
  }
  .post-card .post-tag{
    border:1px solid color-mix(in oklab,var(--accent) 60%,#0a0a0a);
    color:color-mix(in oklab,var(--accent) 80%,#e5e5e5);
    background:color-mix(in oklab,var(--accent) 10%,transparent);
  }

  /* Tag mapping */
  .post-card[data-tag="guides"]   { --accent:#55e6a5; }
  .post-card[data-tag="tools"]    { --accent:#60a5fa; }
  .post-card[data-tag="seo"]      { --accent:#f59e0b; }
  .post-card[data-tag="wellness"] { --accent:#a78bfa; }
  .post-card[data-tag="news"]     { --accent:#f87171; }

/* Contributions grid */
.contribs-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px;
  margin-top:1rem;
}
.contribs-skeleton{ opacity:.6; }
.contrib-card{
  display:block;
  border-radius:var(--r);
  padding:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  transition:transform .15s ease, border-color .2s ease, background .2s ease;
}
.contrib-card:hover,
.contrib-card:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.2);
  background:rgba(255,255,255,.05);
}
.contrib-title{
  font-weight:600;
  line-height:1.35;
  margin:8px 0;
}
.contrib-meta{
  opacity:.7;
  font-size:.9rem;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.tetris-loader{ display:grid; grid-template-columns:repeat(4,10px); gap:3px }
.tetris-loader span{
  width:10px; height:10px; border-radius:3px;
  background:linear-gradient(135deg,#55e6a5,rgba(85,230,165,.45));
  animation:tetrisBounce 1.2s ease-in-out infinite;
}
.tetris-loader span:nth-child(2){ animation-delay:.1s }
.tetris-loader span:nth-child(3){ animation-delay:.2s }
.tetris-loader span:nth-child(4){ animation-delay:.3s }
.tetris-loader span:nth-child(5){ animation-delay:.4s }
.tetris-loader span:nth-child(6){ animation-delay:.5s }
.tetris-loader span:nth-child(7){ animation-delay:.6s }
.tetris-loader span:nth-child(8){ animation-delay:.7s }
.tetris-loader span:nth-child(9){ animation-delay:.8s }
.tetris-loader span:nth-child(10){ animation-delay:.9s }
.tetris-loader span:nth-child(11){ animation-delay:1s }
.tetris-loader span:nth-child(12){ animation-delay:1.1s }

@keyframes tetrisBounce{
  0%,100%{ transform:translateY(0); opacity:.85 }
  50%{ transform:translateY(-4px); opacity:1 }
}

/* Writing: editorial layer */
.writing-section{
  margin-top:5rem;
}

.writing-head{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1rem;
  align-items:end;
  padding-bottom:1.35rem;
  border-bottom:1px solid rgba(255,255,255,.1);
}

.writing-head h2{
  margin-top:.75rem;
  font-size:clamp(1.8rem,3.4vw,2.8rem);
  font-weight:760;
  line-height:1.05;
}

.writing-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.85rem;
}

.writing-refresh,
.writing-link{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  min-height:40px;
  padding:.35rem 0;
  color:#8f9492;
  background:transparent;
  border:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.68rem;
  letter-spacing:.14em;
  line-height:1.45;
  text-decoration:none;
  text-transform:uppercase;
}

.writing-refresh{
  cursor:pointer;
}

.writing-refresh:hover,
.writing-link:hover{
  color:#55e6a5;
}

.writing-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(1.75rem,3.5vw,3rem);
  align-items:start;
  margin-top:2rem;
}

.writing-posts{
  min-width:0;
}

.writing-panel-head{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:.75rem;
  padding:.9rem 0;
  color:#8f9492;
  font-size:.82rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.writing-kicker{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.68rem;
  letter-spacing:.16em;
  line-height:1.45;
  text-transform:uppercase;
  color:#55e6a5;
}

.writing-post-list{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  border-bottom:1px solid rgba(255,255,255,.08);
}

#writing #blogList > a.post-card,
#writing #blogList > .post-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  position:relative;
  height:100%;
  border:0!important;
  border-radius:0;
  background:transparent;
  color:inherit;
  text-decoration:none;
}

:root:not(.dark) #writing #blogList > a.post-card,
:root:not(.dark) #writing #blogList > .post-card{
  background:transparent;
}

#writing #blogList > a.post-card:focus-visible{
  outline:2px solid rgba(85,230,165,.62);
  outline-offset:4px;
}

#writing #blogList > a.post-card::before,
#writing #blogList > .post-card::before{
  height:0;
}

#writing #blogList > a.post-card::after,
#writing #blogList > .post-card::after{
  display:none;
}

#writing #blogList > a.post-card:hover{
  box-shadow:none;
  transform:none;
  background:rgba(255,255,255,.025);
}

#writing #blogList > a.post-card .aspect-\[16\/9\],
#writing #blogList > .post-card .aspect-\[16\/9\]{
  display:none;
}

#writing #blogList > a.post-card .p-4,
#writing #blogList > .post-card .p-4{
  display:flex;
  flex-direction:column;
  flex:1;
  min-width:0;
  padding:1.25rem 0;
}

.post-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.55rem 1rem;
  margin-bottom:.8rem;
  color:#8f9492;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.65rem;
  letter-spacing:.14em;
  line-height:1.45;
  text-transform:uppercase;
}

.post-meta .post-tag{
  position:relative;
  margin:0;
  padding-left:1rem;
  color:#55e6a5;
}

.post-meta .post-tag::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:4px;
  height:4px;
  background:currentColor;
  transform:translateY(-50%);
}

#writing #blogList > a.post-card h3{
  max-width:24ch;
  font-size:1.02rem;
  font-weight:680;
  line-height:1.25;
  letter-spacing:-.015em;
}

#writing #blogList > a.post-card p{
  margin-top:.5rem;
  color:color-mix(in oklab,var(--text) 68%,var(--surface) 32%);
  line-height:1.62;
}

.post-arrow{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:1rem;
  margin-top:auto;
  padding-top:1rem;
  color:#8f9492;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.65rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.post-arrow > span{
  color:#55e6a5;
  font-size:.9rem;
  transition:transform .18s ease;
}

#writing #blogList > a.post-card:hover .post-arrow > span{
  transform:translate(2px,-2px);
}

#writing #blogList > .post-card-featured{
  grid-column:1 / -1;
  border-bottom:1px solid rgba(255,255,255,.12)!important;
}

#writing #blogList > .post-card-featured .p-4{
  min-height:clamp(200px,22vw,250px);
  padding:clamp(1.25rem,2.3vw,1.75rem) 0;
}

#writing #blogList > a.post-card-featured h3{
  max-width:19ch;
  font-size:clamp(1.5rem,2.6vw,2.05rem);
  font-weight:700;
  line-height:1.06;
}

#writing #blogList > a.post-card-featured p{
  max-width:62ch;
  margin-top:1rem;
  font-size:.95rem;
}

#writing #blogList > .post-card-secondary + .post-card-secondary{
  border-top:1px solid rgba(255,255,255,.08)!important;
}

.writing-aside{
  min-width:0;
}

.writing-book{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:0;
  min-height:100%;
  padding:1.1rem 0 0 1.25rem;
  border-left:1px solid rgba(255,255,255,.12);
  background:transparent;
}

.writing-book::before{
  content:"";
  position:absolute;
  left:-3px;
  top:1rem;
  width:5px;
  height:5px;
  background:#55e6a5;
}

.writing-book-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.writing-book h3{
  margin-top:1.4rem;
  font-size:clamp(1.25rem,2vw,1.6rem);
  font-weight:700;
  line-height:1.15;
}

.writing-book-body{
  display:flex;
  align-items:flex-start;
  gap:1.2rem;
  margin-top:1rem;
}

.writing-book-body img{
  width:clamp(92px,10vw,126px)!important;
  height:auto;
  margin-top:-.2rem;
  filter:drop-shadow(0 12px 14px rgba(0,0,0,.3));
}

.writing-book-body p{
  padding-top:.2rem;
}

.writing-book-list{
  display:grid;
  gap:.45rem;
  margin:1.4rem 0 0;
  padding:1.1rem 0 0;
  border-top:1px solid rgba(255,255,255,.08);
  list-style:none;
  color:#8f9492;
  font-size:.82rem;
  line-height:1.55;
}

.writing-book-list li::before{
  content:"—";
  margin-right:.55rem;
  color:#55e6a5;
}

.writing-book blockquote{
  margin-top:1.4rem;
  padding-left:.85rem;
  border-left:1px solid rgba(255,255,255,.12);
  color:#8f9492;
  font-size:.78rem;
  font-style:italic;
  line-height:1.5;
}

.writing-book .book-cta{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  align-self:flex-start;
  gap:.7rem;
  min-height:40px;
  margin-top:1.35rem;
  padding:.45rem .65rem;
  color:#55e6a5;
  background:transparent;
  border:1px solid rgba(255,255,255,.14);
  font-size:.82rem;
  font-weight:650;
  letter-spacing:.06em;
  text-decoration:none;
}

.writing-book .book-cta:hover{
  color:var(--text-strong);
  border-color:#55e6a5;
  background:rgba(85,230,165,.07);
}

@media (min-width:768px){
  .writing-head{
    grid-template-columns:minmax(0,1fr) auto;
  }

  .writing-grid{
    grid-template-columns:minmax(0,2fr) minmax(230px,1fr);
  }

  .writing-post-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  #writing #blogList > .post-card-secondary .p-4{
    min-height:225px;
    padding-right:1.25rem;
  }

  #writing #blogList > .post-card-secondary + .post-card-secondary{
    border-top:0!important;
    border-left:1px solid rgba(255,255,255,.1)!important;
  }

  #writing #blogList > .post-card-secondary + .post-card-secondary .p-4{
    padding-right:0;
    padding-left:1.25rem;
  }
}

@media (min-width:1280px){
  .writing-section{
    margin-top:5.75rem;
  }
}

@media (max-width:640px){
  .writing-actions{
    align-items:flex-start;
  }

  .writing-book-body{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
  }

  .writing-book{
    padding-left:1rem;
  }
}

/* Contact collapsible */
#humanChallenge{
  overflow:hidden;
  max-height:420px;
  transition:max-height .32s ease, opacity .24s ease, padding .32s ease, margin .32s ease, border-color .32s ease;
}

#humanChallenge.is-collapsed{
  max-height:0;
  opacity:0;
  pointer-events:none;
  padding-block:0;
  margin-bottom:0;
  border-color:transparent;
}

.contact-section{
  margin-top:5rem;
  margin-bottom:0!important;
}

.contact-head{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1rem;
  align-items:end;
  padding-bottom:1.65rem;
  border-bottom:1px solid rgba(255,255,255,.1);
}

.contact-head h2{
  margin-top:.75rem;
  font-size:clamp(1.8rem,3.4vw,2.8rem);
  font-weight:760;
  line-height:1.05;
}

.contact-head > p{
  max-width:34rem;
  color:var(--text-soft);
  font-size:.98rem;
  line-height:1.65;
}

.contact-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:2rem;
  margin-top:2.5rem;
}

.contact-intro{
  position:relative;
  padding:.2rem 0 0;
}

.contact-kicker{
  display:block;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.68rem;
  letter-spacing:.16em;
  line-height:1.45;
  text-transform:uppercase;
  color:#55e6a5;
}

.contact-intro ul{
  counter-reset:contact-protocol;
  display:grid;
  gap:0;
  margin:1.35rem 0 0;
  padding:0;
  list-style:none;
  color:#8f9492;
  font-size:.9rem;
  line-height:1.55;
}

.contact-intro li{
  counter-increment:contact-protocol;
  display:grid;
  grid-template-columns:2rem minmax(0,1fr);
  gap:.65rem;
  align-items:start;
  padding:.8rem 0;
  border-top:1px solid rgba(255,255,255,.09);
}

.contact-intro li::before{
  content:"0" counter(contact-protocol);
  color:color-mix(in oklab,#55e6a5 72%,var(--text-soft) 28%);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.62rem;
  letter-spacing:.08em;
  line-height:1.55rem;
}

.contact-form{
  display:grid;
  gap:1.35rem;
  min-width:0;
}

.contact-fields{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  column-gap:1.75rem;
  row-gap:1.25rem;
}

.contact-field{
  display:grid;
  gap:.6rem;
  min-width:0;
}

.contact-field label{
  color:color-mix(in oklab,var(--text-soft) 88%,var(--text-strong) 12%);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.68rem;
  letter-spacing:.14em;
  line-height:1.45;
  text-transform:uppercase;
}

.contact-field input,
.contact-field textarea{
  width:100%;
  min-width:0;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.26);
  border-radius:0;
  background:transparent;
  color:var(--text-strong);
  padding:.55rem 0 .75rem;
  font:inherit;
  line-height:1.45;
  outline:none;
  transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.contact-field textarea{
  min-height:8.5rem;
  resize:vertical;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder{
  color:color-mix(in oklab,var(--text-soft) 70%,var(--surface) 30%);
}

.contact-field input:focus,
.contact-field textarea:focus{
  border-bottom-color:#55e6a5;
  box-shadow:0 2px 0 -1px #55e6a5;
}

.contact-field input[aria-invalid="true"],
.contact-field textarea[aria-invalid="true"]{
  border-bottom-color:#ff6347;
}

.contact-verification{
  display:grid;
  gap:.65rem;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.1);
}

.contact-verification-head,
.human-challenge-head,
.contact-submit-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.85rem;
}

.contact-verification-head p,
.human-challenge-head p{
  margin-top:.35rem;
  color:#8f9492;
  font-size:.9rem;
  line-height:1.55;
}

.human-toggle,
.human-refresh,
.contact-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  border:0;
  background:transparent;
  color:#55e6a5;
  cursor:pointer;
}

.human-toggle{
  padding:.35rem 0;
  border-bottom:1px solid rgba(85,230,165,.5);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.68rem;
  letter-spacing:.14em;
  line-height:1.45;
  text-transform:uppercase;
}

.human-toggle:hover,
.human-refresh:hover{
  color:var(--text-strong);
}

.human-challenge{
  padding:.35rem 0 0;
}

.human-mount{
  margin-top:.6rem;
}

.human-challenge-head .eyebrow{
  color:var(--text-soft);
  font-size:.6rem;
  letter-spacing:.12em;
}

.human-challenge-head p{
  margin-top:.2rem;
}

.human-mount .t-card,
.human-mount > div{
  border:0!important;
  border-left:1px solid rgba(85,230,165,.28)!important;
  background:transparent!important;
}

.human-mount button{
  min-width:44px;
  min-height:44px;
  border-color:rgba(255,255,255,.14)!important;
}

.human-mount button:hover,
.human-mount button:focus{
  border-color:rgba(85,230,165,.65)!important;
}

.contact-submit-row{
  align-items:center;
  justify-content:flex-start;
  padding-top:.9rem;
  border-top:1px solid rgba(255,255,255,.1);
}

.contact-submit{
  min-width:5.25rem;
  min-height:38px;
  padding:.55rem .9rem;
  border-left:1px solid rgba(85,230,165,.65);
  background:rgba(85,230,165,.075);
  color:#55e6a5;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.contact-submit:hover:not(:disabled){
  background:rgba(85,230,165,.16);
  color:var(--text-strong);
}

.contact-submit:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.contact-status{
  flex:0 1 auto;
  min-width:0;
  margin:0;
  color:#8f9492;
  font-size:.9rem;
  line-height:1.55;
}

.contact-form > p.text-green-500{
  margin:0;
  padding:1rem;
  border-left:1px solid rgba(85,230,165,.65);
  background:rgba(85,230,165,.08);
  color:#55e6a5!important;
}

.contact-status.text-red-500{
  color:#ff6347!important;
}

@media (min-width:768px){
  .contact-head{
    grid-template-columns:minmax(0,1fr) minmax(260px,360px);
  }

  .contact-shell{
    grid-template-columns:minmax(160px,210px) minmax(0,1fr);
    gap:clamp(2.5rem,5vw,5rem);
  }

  .contact-fields{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .contact-field-message{
    grid-column:1 / -1;
  }
}

@media (min-width:1280px){
  .contact-section{
    margin-top:5.75rem;
  }
}

@media (max-width:640px){
  .contact-shell{
    margin-top:2.25rem;
  }

  .contact-submit-row{
    align-items:flex-start;
  }
}

.hero{
  position:relative;
}
.hero::after{
  content:"";
  position:absolute;
  inset:auto 0 -2rem;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(85,230,165,.55),rgba(255,255,255,.12),transparent);
}

.hero-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:2.5rem;
  align-items:end;
  min-height:clamp(420px,54vh,580px);
  padding:clamp(1.75rem,5vw,4rem) 0 1.75rem;
}

.hero-copy{
  max-width:760px;
}

.hero-kicker{
  margin:0 0 1rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;
  letter-spacing:.18em;
  line-height:1.4;
  text-transform:uppercase;
  color:#55e6a5;
}

.hero-title{
  max-width:850px;
  font-size:clamp(2.65rem,7vw,5.2rem);
  font-weight:800;
  line-height:.98;
  letter-spacing:-.01em;
}
.hero-title span{ display:block; }

.hero-statement{
  margin:1.15rem 0 0;
  color:var(--text-strong);
  font-size:clamp(1.1rem,1.75vw,1.35rem);
  font-weight:600;
  line-height:1.4;
  letter-spacing:-.015em;
}

.hero-experience{
  margin-top:.65rem;
  max-width:560px;
  color:color-mix(in oklab,var(--text-soft) 90%,var(--text) 10%);
  font-size:clamp(.93rem,1.3vw,1.02rem);
  line-height:1.55;
}

.hero-description{
  margin-top:1.15rem;
  max-width:540px;
  font-size:clamp(.9rem,1.2vw,.98rem);
  line-height:1.65;
  color:var(--text-soft);
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.9rem;
  margin-top:1.85rem;
}

.hero-primary-action{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  min-height:46px;
  padding:.65rem 1rem;
  border:1px solid rgba(85,230,165,.48);
  color:var(--text-strong);
  background:rgba(255,255,255,.018);
  font-size:.92rem;
  font-weight:600;
  text-decoration:none;
}
.hero-primary-action span{ color:#55e6a5; transition:transform .18s ease; }
.hero-primary-action:hover{ border-color:#55e6a5; background:rgba(85,230,165,.045); }
.hero-primary-action:hover span{ transform:translate(2px,-2px); }
.hero-primary-action:focus-visible{ border-color:#55e6a5; }
.hero-actions .hero-link{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:.55rem .2rem;
  font-size:.92rem;
}

.hero-status{
  position:relative;
  border-top:1px solid rgba(85,230,165,.45);
  padding:1rem 0 0;
  color:var(--text-soft);
}

.hero-status-top{
  display:flex;
  align-items:center;
  gap:.55rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;
  letter-spacing:.14em;
  line-height:1.4;
  text-transform:uppercase;
  color:color-mix(in oklab,var(--text) 74%,var(--surface) 26%);
}

.hero-status-dot{
  width:.45rem;
  height:.45rem;
  background:#55e6a5;
  animation:hero-status-pulse 4s ease-in-out infinite;
}
@keyframes hero-status-pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.45 } }

.hero-status-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem 1.4rem;
  margin-top:1.1rem;
}

.hero-status-grid div{
  min-width:0;
}

.hero-status-grid dt{
  font-size:.68rem;
  letter-spacing:.16em;
  line-height:1.4;
  text-transform:uppercase;
  color:#8f9492;
}

.hero-status-grid dd{
  margin-top:.15rem;
  color:var(--text-strong);
  font-size:.95rem;
  line-height:1.35;
}

.hero-contact{
  grid-column:1 / -1;
  padding-top:1rem;
  border-top:1px solid var(--border);
}

.hero-contact-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:.45rem;
  margin-top:.55rem!important;
}

.hero-contact-action{
  display:grid;
  grid-template-columns:1.15rem minmax(0,1fr) auto;
  gap:.7rem;
  align-items:center;
  min-height:58px;
  min-width:0;
  padding:.6rem .75rem;
  border:1px solid var(--border);
  color:var(--text-soft);
  text-decoration:none;
}

.hero-contact-action:hover{
  border-color:rgba(85,230,165,.46);
  background:rgba(255,255,255,.025);
  color:#55e6a5;
}

.hero-contact-action:focus-visible{
  outline:2px solid #55e6a5;
  outline-offset:2px;
  border-color:#55e6a5;
}

.hero-contact-icon{
  width:1.05rem;
  height:1.05rem;
  margin-top:.15rem;
  color:#55e6a5;
}

.hero-contact-action span{
  min-width:0;
}

.hero-contact-indicator{
  align-self:center;
  color:#717875;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.82rem;
  transition:color .18s ease,transform .18s ease;
}
.hero-contact-action:hover .hero-contact-indicator{ color:#55e6a5; transform:translateX(2px); }

.hero-contact-action strong,
.hero-contact-action small{
  display:block;
}

.hero-contact-action strong{
  color:var(--text-strong);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.06em;
  line-height:1.35;
  text-transform:uppercase;
}

.hero-contact-action small{
  margin-top:.15rem;
  overflow-wrap:anywhere;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;
  line-height:1.45;
}

@media (min-width:960px){
  .hero-shell{
    grid-template-columns:minmax(0,3fr) minmax(285px,2fr);
    gap:clamp(2.5rem,5vw,4.5rem);
  }

  .hero-status{
    margin-bottom:.5rem;
  }

  .hero-title{
    font-size:clamp(3.45rem,5.55vw,3.7rem);
  }
}

@media (min-width:1024px){
  .hero-shell{
    grid-template-columns:minmax(0,3fr) minmax(320px,2fr);
    gap:clamp(3rem,5vw,4rem);
  }
}

@media (max-width:640px){
  .hero-shell{
    min-height:auto;
    padding-top:1.25rem;
  }

  .hero-title{
    font-size:clamp(2.25rem,10.5vw,3.1rem);
  }

  .hero-actions a{
    min-height:44px;
  }

}

@media (max-width:420px){
  .hero-status-grid{ grid-template-columns:1fr; }
  .hero-contact{ grid-column:auto; }
  .hero-title span{ white-space:nowrap; }
}

@media (prefers-reduced-motion:reduce){
  .hero-status-dot{ animation:none; }
  .hero-primary-action span,
  .hero-contact-indicator{ transition:none; }
}

.now-section{
  margin-top:6.5rem;
}

.now-shell{
  display:grid;
  gap:clamp(2.5rem,5vw,4.5rem);
}

.now-intro h2{
  margin-top:.7rem;
  font-size:clamp(2rem,4vw,3.35rem);
  font-weight:720;
  letter-spacing:-.045em;
  line-height:1.02;
}

.now-lede{
  margin-top:1rem;
  color:var(--text-soft);
  font-size:clamp(.92rem,1.3vw,1.05rem);
}

.now-project{
  position:relative;
  border:1px solid color-mix(in oklab,var(--border) 76%,#55e6a5 24%);
  background:color-mix(in oklab,var(--surface) 97%,#55e6a5 3%);
}

.now-project::before{
  content:"";
  position:absolute;
  z-index:1;
  inset:-1px auto -1px -1px;
  width:3px;
  background:#55e6a5;
}

.now-project-grid{
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(2.5rem,5vw,5rem);
  padding:clamp(1.7rem,3.7vw,3.25rem);
}

.now-project-copy-column{
  display:flex;
  min-width:0;
  flex-direction:column;
  justify-content:center;
}

.now-project-label,
.now-tags,
.now-outcome-label,
.clipsift-screen-label,
.clipsift-time,
.clipsift-caption,
.now-watch,
.now-project-footer,
.now-shipped{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  text-transform:uppercase;
}

.now-project-label{
  color:#55e6a5;
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.18em;
}

.now-project h3{
  margin-top:.8rem;
  font-size:clamp(3.1rem,6.2vw,5.8rem);
  font-weight:720;
  letter-spacing:-.065em;
  line-height:.92;
}

.now-project-copy{
  max-width:29rem;
  margin-top:1.45rem;
  color:var(--text-soft);
  font-size:clamp(1rem,1.5vw,1.16rem);
  line-height:1.6;
}

.now-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin-top:1.65rem;
  padding:0;
  list-style:none;
}

.now-tags li{
  padding:.42rem .62rem;
  color:var(--text-soft);
  border:1px solid var(--border);
  font-size:.57rem;
  font-weight:650;
  letter-spacing:.1em;
  line-height:1;
}

.now-outcome{
  margin-top:clamp(1.9rem,3.5vw,2.9rem);
  padding-top:1.1rem;
  border-top:1px solid var(--border);
}

.now-outcome-label{
  color:#55e6a5;
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.17em;
}

.now-outcome h4{
  margin-top:.55rem;
  color:var(--text-strong);
  font-size:clamp(1.35rem,2.1vw,1.8rem);
  font-weight:650;
  letter-spacing:-.025em;
}

.now-outcome > p:last-child{
  margin-top:.55rem;
  color:var(--text-soft);
  font-size:.76rem;
  line-height:1.5;
}

.now-media-column{ min-width:0; }

.clipsift-preview{
  position:relative;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:.65rem;
  aspect-ratio:16/10;
  overflow:hidden;
  padding:clamp(1rem,2.2vw,1.5rem) clamp(1rem,2.2vw,1.5rem) 3.25rem;
  color:var(--text);
  border:1px solid color-mix(in oklab,var(--border) 72%,#55e6a5 28%);
  background-color:color-mix(in oklab,var(--surface) 91%,#000 9%);
  background-image:linear-gradient(rgba(85,230,165,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(85,230,165,.055) 1px,transparent 1px);
  background-size:24px 24px;
  text-decoration:none;
}

.clipsift-preview::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  background:url("/public/clipsift-yt-thumb.png") center/cover no-repeat;
  filter:brightness(.42) saturate(.8);
  opacity:.2;
  transform:scale(1);
  transition:opacity .28s ease,transform .28s ease;
  pointer-events:none;
}

.clipsift-preview::after{
  content:"";
  position:absolute;
  z-index:4;
  inset:0;
  border:1px solid transparent;
  transition:border-color .18s ease;
  pointer-events:none;
}
.clipsift-preview:is(:hover,:focus-visible)::before{ opacity:.52; transform:scale(1.012); }
.clipsift-preview:is(:hover,:focus-visible)::after{ border-color:rgba(85,230,165,.38); }

.clipsift-screen{
  position:relative;
  z-index:1;
  overflow:hidden;
  border:1px solid color-mix(in oklab,var(--border) 74%,#55e6a5 26%);
  background:color-mix(in oklab,var(--surface) 62%,transparent);
}

.clipsift-screen-label{
  position:absolute;
  z-index:2;
  top:.55rem;
  left:.6rem;
  color:#55e6a5;
  font-size:.5rem;
  letter-spacing:.13em;
}

.clipsift-time{
  position:absolute;
  right:.55rem;
  bottom:.45rem;
  color:var(--text-soft);
  font-size:.43rem;
  letter-spacing:.08em;
}

.camera-scene{ position:absolute; inset:0; opacity:.7; }
.camera-scene::before{ content:""; position:absolute; inset:31% 8% 20%; border-top:1px solid var(--border); transform:skewY(-8deg); }
.camera-scene i{ position:absolute; bottom:18%; width:1px; background:var(--text-soft); transform-origin:bottom; }
.camera-scene i::after{ content:""; position:absolute; top:-4px; left:-3px; width:7px; height:7px; border:1px solid var(--text-soft); border-radius:50%; }
.camera-scene i:nth-child(1){ left:24%; height:34%; }
.camera-scene i:nth-child(2){ left:51%; height:43%; }
.camera-scene i:nth-child(3){ left:76%; height:29%; }

.review-target{ position:absolute; inset:30% 25% 18%; border:1px solid #55e6a5; }
.review-target::before,.review-target::after{ content:""; position:absolute; background:#55e6a5; }
.review-target::before{ width:10px; height:1px; left:-5px; top:50%; }
.review-target::after{ width:1px; height:10px; left:50%; top:-5px; }
.review-lines{ position:absolute; right:10%; bottom:12%; left:10%; display:grid; gap:4px; }
.review-lines i{ display:block; height:1px; background:var(--border); }
.review-lines i:nth-child(2){ width:72%; }
.review-lines i:nth-child(3){ width:45%; background:rgba(85,230,165,.5); }

.clipsift-play{
  position:absolute;
  z-index:3;
  top:50%;
  left:50%;
  display:grid;
  width:clamp(3.5rem,6vw,4.75rem);
  height:clamp(3.5rem,6vw,4.75rem);
  place-items:center;
  color:#55e6a5;
  border:1px solid #55e6a5;
  border-radius:50%;
  background:color-mix(in oklab,var(--surface) 90%,transparent);
  transform:translate(-50%,-58%);
  transition:transform .18s ease,background-color .18s ease;
}
.clipsift-play svg{ width:42%; fill:currentColor; }
.clipsift-preview:hover .clipsift-play{ background:rgba(85,230,165,.1); transform:translate(-50%,-58%) scale(1.035); }

.clipsift-caption{
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  padding:.85rem 1rem;
  color:var(--text-soft);
  border-top:1px solid var(--border);
  background:color-mix(in oklab,var(--surface) 96%,#000 4%);
  font-size:.51rem;
  letter-spacing:.07em;
}
.clipsift-caption b{ color:#55e6a5; font-weight:400; }

.now-watch{
  display:flex;
  min-height:3.75rem;
  align-items:center;
  justify-content:space-between;
  margin-top:.75rem;
  padding:0 1.2rem;
  color:#06130d;
  background:#55e6a5;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.095em;
  text-decoration:none;
  transition:background-color .16s ease,transform .16s ease;
}
.now-watch:hover{ color:#06130d; background:#6aebb1; transform:translateY(-1px); }

.now-project-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  padding:1rem clamp(1.7rem,3.7vw,3.25rem);
  border-top:1px solid var(--border);
  font-size:.61rem;
  letter-spacing:.07em;
}

.now-project-links{ display:flex; flex-wrap:wrap; gap:clamp(1rem,2.5vw,2.25rem); }
.now-project-links a{ display:inline-flex; align-items:center; gap:.42rem; color:var(--text); text-decoration:none; }
.now-project-links a:hover{ color:#55e6a5; }
.now-project-link-icon{ width:.88rem; height:.88rem; flex:none; fill:currentColor; }
.now-release{ color:var(--text-soft); opacity:.58; cursor:default; }
.now-shipped{ flex:none; color:#55e6a5; font-size:.61rem; letter-spacing:.1em; }

.now-project a:focus-visible{
  outline:2px solid #55e6a5;
  outline-offset:3px;
}

@media (max-width:900px){
  .now-project-grid{ grid-template-columns:1fr; gap:2.35rem; }
  .now-project-copy{ max-width:34rem; }
  .now-outcome{ margin-top:2.1rem; }
}

@media (max-width:640px){
  .now-shell{ gap:2.5rem; }
  .now-project-grid{ padding:1.4rem 1.35rem; gap:2rem; }
  .now-project h3{ font-size:clamp(3rem,16vw,4.25rem); }
  .now-project-copy{ margin-top:1.15rem; }
  .now-tags{ margin-top:1.35rem; }
  .now-outcome{ margin-top:1.85rem; }
  .clipsift-preview{ aspect-ratio:4/3; padding:.8rem .8rem 3rem; gap:.45rem; }
  .now-watch{ min-height:3.5rem; padding:0 .9rem; font-size:.59rem; }
  .now-project-footer{ align-items:flex-start; flex-direction:column; gap:1.1rem; padding:1.15rem 1.3rem; }
  .now-project-links{ align-items:flex-start; flex-direction:column; gap:.9rem; }
}

@media (prefers-reduced-motion:reduce){
  .clipsift-preview::before,.clipsift-preview::after,.clipsift-play,.now-watch{ transition:none; }
  .clipsift-preview:is(:hover,:focus-visible)::before{ transform:none; }
  .clipsift-preview:hover .clipsift-play,.now-watch:hover{ transform:none; }
}

.btn-primary{
  color:var(--text-strong);
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.02);
  transition:transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.btn-primary:hover{
  transform:translateY(-1px);
  border-color:rgba(85,230,165,.55);
  background:rgba(255,255,255,.06);
}

/* --- Editorial system refresh --- */
.dark:root{
  --surface:#07090b;
  --text:#f3f6f5;
  --text-strong:#ffffff;
  --text-soft:#a8afac;
  --border:rgba(255,255,255,.12);
}

header.sticky{
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  background:rgba(7,9,11,.75)!important;
  border-color:rgba(255,255,255,.08)!important;
}

main{padding-top:1.5rem;padding-bottom:4rem}
.section{ margin-top:5.75rem; margin-bottom:0; }
.section > * + * { margin-top:1.35rem; }

a{ transition:color .18s ease,border-color .18s ease,background-color .18s ease, transform .18s ease }
.hero-link{
  color:var(--text-soft);
  text-decoration:none;
  position:relative;
}
.hero-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:.6rem;
  width:100%;
  height:1px;
  background:#55e6a5;
  transform:scaleX(.2);
  transform-origin:left;
  transition:transform .22s ease;
}
.hero-link:hover{ color:var(--text-strong); }
.hero-link:hover::after{ transform:scaleX(1); }

.projects-section{
  margin-top:4.5rem;
}

.projects-head{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1rem;
  align-items:end;
  padding-bottom:1.35rem;
  border-bottom:1px solid rgba(255,255,255,.1);
}

.projects-head h2{
  margin-top:.75rem;
  font-size:clamp(1.8rem,3.4vw,2.8rem);
  font-weight:760;
  line-height:1.05;
}

.projects-head > p{
  max-width:34rem;
  color:var(--text-soft);
  font-size:.98rem;
  line-height:1.65;
}

.projects-body{
  display:grid;
  gap:3rem;
  margin-top:2.25rem;
}

.project-lane{
  display:grid;
  gap:1.25rem;
}

.project-lane-upcoming{
  margin-top:1.25rem;
}

.project-lane-head{
  display:flex;
  flex-wrap:wrap;
  align-items:end;
  justify-content:space-between;
  gap:.85rem;
}

.project-lane-kicker,
.project-number,
.project-list-status{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.68rem;
  letter-spacing:.16em;
  line-height:1.45;
  text-transform:uppercase;
}

.project-lane-kicker,
.project-number{
  color:#55e6a5;
}

.project-lane-head h3{
  margin-top:.35rem;
  font-size:1.15rem;
  font-weight:680;
  line-height:1.25;
}

.project-lane-copy{
  max-width:38rem;
  color:var(--text-soft);
  font-size:.92rem;
  line-height:1.65;
}

.project-queue-count,
.build-queue-number,
.build-project-meta,
.build-stage{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.project-queue-count{
  color:var(--text-soft);
  font-size:.66rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.build-queue{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:.75rem;
  margin:.35rem 0 0;
  padding:0;
  list-style:none;
}
.build-queue::before{
  display:none;
}
.build-row{
  position:relative;
  display:grid;
  grid-template-columns:2.4rem minmax(0,1fr);
  grid-template-rows:auto 1fr auto;
  gap:.7rem .9rem;
  align-items:start;
  min-width:0;
  padding:1.1rem;
  border:1px solid rgba(255,255,255,.1);
  background:transparent;
  transition:background-color .18s ease,border-color .18s ease,transform .18s ease;
}
.build-row:hover,
.build-row:focus-visible{
  transform:translateY(-1px);
  border-color:color-mix(in oklab,#55e6a5 48%,var(--border));
  background:rgba(255,255,255,.018);
}
.build-row:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }
.build-row.is-active{
  border-color:rgba(255,255,255,.1);
  background:transparent;
}
.build-queue-number{
  display:block;
  width:auto;
  color:#55e6a5;
  background:transparent;
  font-size:.7rem;
  letter-spacing:.1em;
}
.build-project h4::before{
  display:inline-block;
  width:1.35rem;
  color:color-mix(in oklab,var(--text-soft) 72%,var(--surface));
  font-family:"Font Awesome 6 Free";
  font-size:.68rem;
  font-style:normal;
  font-weight:900;
  font-variant:normal;
  line-height:1;
  text-align:left;
  text-rendering:auto;
  -webkit-font-smoothing:antialiased;
}
.build-row:nth-child(1) .build-project h4::before{ content:"\f11b"; }
.build-row:nth-child(2) .build-project h4::before{ content:"\f518"; }
.build-row:nth-child(3) .build-project h4::before{ content:"\f001"; }
.build-row:nth-child(4) .build-project h4::before{ content:"\f7d9"; }
.build-row:nth-child(5) .build-project h4::before{ content:"\f53f"; }
.build-row:nth-child(6) .build-project h4::before{
  content:"\f09b";
  font-family:"Font Awesome 6 Brands";
  font-weight:400;
}
.build-project{ min-width:0; }
.build-project-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem 1rem;
  color:var(--text-soft);
  font-size:.61rem;
  letter-spacing:.13em;
  line-height:1.4;
  text-transform:uppercase;
}
.build-status{ display:inline-flex; align-items:center; gap:.42rem; color:color-mix(in oklab,#55e6a5 74%,var(--text)); }
.build-status-dot{ width:5px; height:5px; flex:none; background:#55e6a5; }
.is-active .build-status-dot{ animation:active-project-pulse 2.4s ease-in-out infinite; }
.build-project h4{ margin-top:.33rem; font-size:1.08rem; font-weight:720; line-height:1.25; color:var(--text-strong); }
.build-project p{ margin-top:.35rem; max-width:52rem; color:var(--text-soft); font-size:.78rem; line-height:1.52; }
.build-stage{ grid-column:2; min-width:0; margin-top:.2rem; }
.build-stage-heading{ display:flex; justify-content:space-between; gap:.5rem; color:var(--text-soft); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; }
.build-stage-heading strong{ color:var(--text); font-weight:600; }
.build-stage-track{ display:grid; grid-template-columns:repeat(5,1fr); gap:4px; margin-top:.48rem; }
.build-stage-segment{ height:4px; background:color-mix(in oklab,var(--text) 13%,var(--surface)); }
.build-stage-segment.is-reached{ background:color-mix(in oklab,#55e6a5 68%,var(--surface)); }
.build-stage-segment.is-current{ background:#55e6a5; }
.build-stage-labels{ display:flex; justify-content:space-between; margin-top:.32rem; color:var(--text-soft); font-size:.51rem; letter-spacing:.09em; text-transform:uppercase; }
@keyframes active-project-pulse{ 50%{ opacity:.4; transform:scale(.75); } }

@media (min-width:768px){
  .build-queue{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Flat editorial project index */
.projects-intro{
  display:grid;
  gap:.8rem;
  max-width:36rem;
  color:var(--text-soft);
  font-size:.98rem;
  line-height:1.65;
}
.projects-summary{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.64rem;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.projects-summary span{ margin:0 .3rem; color:#55e6a5; }
.project-index-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:0 0 .85rem;
  color:var(--text-soft);
  font-size:.78rem;
  border-bottom:1px solid var(--border);
}
.project-filter-bar{
  display:flex;
  align-items:center;
  gap:1.25rem;
  min-width:0;
  border-bottom:1px solid var(--border);
}
.project-filter-bar[hidden]{ display:none; }
.project-filter-label{
  flex:none;
  color:var(--text-soft);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.6rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.project-filter-scroll{
  display:flex;
  gap:1.35rem;
  min-width:0;
  overflow-x:auto;
  scrollbar-width:none;
}
.project-filter-scroll::-webkit-scrollbar{ display:none; }
.project-filter{
  position:relative;
  flex:none;
  min-height:2.9rem;
  padding:.1rem 0;
  border:0;
  background:transparent;
  color:var(--text-soft);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  cursor:pointer;
}
.project-filter::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  height:1px;
  background:#55e6a5;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .18s ease;
}
.project-filter:hover{ color:var(--text-strong); }
.project-filter.is-active{ color:#55e6a5; font-weight:720; }
.project-filter.is-active::after{ transform:scaleX(1); }
.project-filter:focus-visible{ outline:2px solid var(--ring); outline-offset:-2px; }
.project-index-wrap{ position:relative; }
.project-index{
  margin:0;
  padding:0;
  list-style:none;
}
.project-index > li{ margin:0; }
.project-index > li[hidden]{ display:none; }
.project-list-item{
  position:relative;
  display:grid;
  grid-template-columns:2.5rem minmax(280px,1.55fr) minmax(190px,.85fr) minmax(78px,.35fr);
  gap:1rem;
  align-items:center;
  min-height:5.85rem;
  padding:.85rem .45rem .85rem 0;
  border-bottom:1px solid var(--border);
  color:inherit;
  text-decoration:none;
  transition:background-color .18s ease,border-color .18s ease;
}
.project-list-item::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:2px;
  height:0;
  background:#55e6a5;
  transition:height .2s ease;
}
.project-list-item:hover,
.project-list-item:focus-visible{
  border-color:color-mix(in oklab,#55e6a5 35%,var(--border));
  background:linear-gradient(90deg,rgba(85,230,165,.05),transparent 72%);
}
.project-list-item:hover::before,
.project-list-item:focus-visible::before{ height:100%; }
.project-list-item:focus-visible{ outline:2px solid var(--ring); outline-offset:3px; }
.project-list-item .project-number{ color:var(--text-soft); transition:color .18s ease; }
.project-list-item:hover .project-number,
.project-list-item:focus-visible .project-number{ color:var(--text-strong); }
.project-list-copy{ min-width:0; }
.project-list-status,
.project-tags,
.project-destination{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.62rem;
  letter-spacing:.12em;
  line-height:1.5;
  text-transform:uppercase;
}
.project-list-status{ display:block; margin-bottom:.36rem; color:var(--text-soft); }
.project-list-status em{
  margin-left:.55rem;
  color:inherit;
  font-style:normal;
}
.project-list-copy h3{
  color:var(--text-strong);
  font-size:1.05rem;
  font-weight:680;
  line-height:1.3;
  transition:color .18s ease;
}
.project-list-item:hover h3,
.project-list-item:focus-visible h3{ color:#55e6a5; }
.project-list-copy p{
  max-width:38rem;
  margin-top:.32rem;
  color:var(--text-soft);
  font-size:.82rem;
  line-height:1.55;
}
.project-tags{ color:var(--text-soft); }
.project-tags span{ margin:0 .25rem; color:var(--text-soft); }
.project-destination{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:.65rem;
  color:var(--text-soft);
  white-space:nowrap;
}
.project-destination.is-live{ color:#55e6a5; }
.project-destination i{
  display:inline-block;
  width:4px;
  height:4px;
  margin-right:.45rem;
  background:currentColor;
  border-radius:50%;
  vertical-align:middle;
}
.project-list-item:hover .project-destination,
.project-list-item:focus-visible .project-destination{ color:#55e6a5; }
.project-arrow{ font-size:.9rem; transform:translateX(0); transition:transform .2s ease; }
.project-list-item:hover .project-arrow,
.project-list-item:focus-visible .project-arrow{ transform:translate(3px,-2px); }
.project-preview{
  position:fixed;
  z-index:30;
  top:var(--preview-top,30vh);
  right:clamp(1.5rem,5vw,5rem);
  width:clamp(280px,24vw,340px);
  aspect-ratio:16/9;
  overflow:hidden;
  padding:5px;
  border:1px solid color-mix(in oklab,var(--text) 20%,var(--surface));
  background:var(--surface);
  opacity:0;
  pointer-events:none;
  transform:translateY(7px);
  transition:opacity .18s ease,transform .18s ease;
}
.project-preview.is-visible{ opacity:1; transform:translateY(0); }
.project-preview img{
  display:block;
  width:100%;
  height:100%;
  border:1px solid color-mix(in oklab,#55e6a5 34%,var(--border));
  background:#050807;
  object-fit:contain;
  filter:brightness(.84);
}
.project-preview > span{
  position:absolute;
  right:.6rem;
  bottom:.5rem;
  padding:.25rem .4rem;
  background:rgba(5,8,7,.82);
  color:#d5d9d7;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.55rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}

@media (min-width:768px){
  .projects-head{ grid-template-columns:minmax(0,1fr) minmax(300px,38rem); }
}

@media (min-width:1280px){
  .projects-section{ margin-top:5.25rem; }
  .projects-body{ gap:3.5rem; }
}

@media (max-width:800px){
  .project-preview{ display:none; }
  .project-list-item{
    grid-template-columns:2.2rem minmax(0,1fr) auto;
    min-height:0;
    padding:1rem .25rem 1rem 0;
  }
  .project-list-copy{ grid-column:2 / -1; }
  .project-tags{ grid-column:2; }
  .project-destination{ grid-column:3; }
}

@media (max-width:640px){
  .projects-head{ padding-bottom:1rem; }
  .project-index-head > span:last-child{ display:none; }
  .project-list-item{
    grid-template-columns:2rem minmax(0,1fr) auto;
    column-gap:.7rem;
    row-gap:.8rem;
  }
  .project-number{ align-self:start; padding-top:.1rem; }
  .project-filter-bar{ gap:.85rem; margin-right:-1rem; }
  .project-filter-scroll{ gap:1.15rem; padding-right:1rem; }
  .project-filter{ min-height:3rem; font-size:.64rem; }
  .project-list-copy{ grid-column:1 / -1; }
  .project-list-status em{ margin-left:.4rem; }
  .project-tags{ grid-column:1 / 3; font-size:.62rem; }
  .project-destination{ grid-column:3; font-size:.62rem; }
  .project-destination .project-arrow{ font-size:.95rem; }
  .project-lane-head{ align-items:flex-start; }
  .build-row{
    grid-template-columns:2.25rem minmax(0,1fr);
    gap:.65rem .75rem;
    padding:1rem .9rem;
  }
  .build-queue-number{ width:auto; }
  .build-project-meta{ gap:.35rem .7rem; }
  .build-project h4{ font-size:1rem; }
  .build-project p{ font-size:.76rem; }
  .build-stage{ grid-column:2; margin-top:.1rem; }
}

@media (prefers-reduced-motion:reduce){
  .build-row{ transition:none; }
  .build-row:hover,
  .build-row:focus-visible{ transform:none; }
  .is-active .build-status-dot{ animation:none; }
  .project-filter::after,
  .project-list-item,
  .project-list-item .project-number,
  .project-list-copy h3,
  .project-arrow,
  .project-preview{ transition:none; }
}

.activity-section{
  margin-top:4.75rem;
}

.activity-head{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1rem;
  align-items:end;
  padding-bottom:1.35rem;
  border-bottom:1px solid rgba(255,255,255,.1);
}

.activity-head h2{
  margin-top:.75rem;
  font-size:clamp(1.8rem,3.4vw,2.8rem);
  font-weight:760;
  line-height:1.05;
}

.activity-head > p{
  max-width:35rem;
  color:var(--text-soft);
  font-size:.98rem;
  line-height:1.65;
}

.activity-panel,
.activity-log{
  display:grid;
  gap:1.75rem;
  margin-top:2.75rem;
}

.activity-panel-head{
  display:flex;
  flex-wrap:wrap;
  align-items:end;
  justify-content:space-between;
  gap:.85rem;
}

.activity-kicker,
.activity-source-note,
.stat-source{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.68rem;
  letter-spacing:.16em;
  line-height:1.45;
  text-transform:uppercase;
}

.stat-secondary{
  grid-column:1 / -1;
  color:#8f9492;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.67rem;
  letter-spacing:.1em;
  line-height:1.45;
  text-transform:uppercase;
}

.stat-secondary strong{
  color:var(--text-soft);
  font-size:.78rem;
  font-weight:650;
}

.activity-kicker{
  color:#55e6a5;
}

.activity-panel-head h3{
  margin-top:.35rem;
  font-size:1.15rem;
  font-weight:680;
  line-height:1.25;
}

.activity-source-note{
  color:#8f9492;
}

.activity-counters{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:1.25rem;
}

.stat-pill{
  position:relative;
  display:grid;
  min-width:0;
  grid-template-columns:minmax(0,1fr) auto;
  align-content:start;
  gap:.45rem .75rem;
  padding:1.5rem 0 1.65rem;
  border:0;
  border-top:1px solid rgba(255,255,255,.11);
  border-radius:0;
  background:transparent;
}

.stat-pill .label{
  grid-column:1;
  color:#8f9492;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.68rem;
  letter-spacing:.14em;
  line-height:1.45;
  text-transform:uppercase;
}

.stat-pill .value{
  grid-column:1 / -1;
  color:var(--text-strong);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:clamp(2rem,5vw,3.4rem);
  font-weight:680;
  letter-spacing:-.045em;
  line-height:.95;
}

.stat-source{
  grid-column:2;
  align-self:end;
  color:color-mix(in oklab,var(--text) 50%,var(--surface) 50%);
  font-size:.58rem;
  letter-spacing:.12em;
}

.activity-refresh{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  min-height:40px;
  padding:.35rem 0;
  color:#8f9492;
  background:transparent;
  border:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.68rem;
  letter-spacing:.14em;
  line-height:1.45;
  text-transform:uppercase;
  cursor:pointer;
}

.activity-refresh:hover{
  color:#55e6a5;
}

.activity-log{
  gap:1.3rem;
  margin-top:3.25rem;
  padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.1);
}

.activity-log #ossList{
  margin-top:.3rem;
}

.oss-log{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  border:1px solid rgba(255,255,255,.1);
  border-radius:2px;
}
.oss-board-label{
  color:#8f9492;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.6rem;
  letter-spacing:.15em;
  line-height:1.4;
  text-transform:uppercase;
}
.oss-signal,
.oss-latest,
.oss-recent{ min-width:0; padding:.75rem; }
.oss-signal{ border-right:1px solid rgba(255,255,255,.1); }
.oss-signal-list{ margin-top:.65rem; }
.oss-signal-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:.7rem;
  padding:.35rem 0;
  border-top:1px solid rgba(255,255,255,.065);
  color:var(--text-strong);
  font-size:.72rem;
}
.oss-signal-count,
.oss-signal-empty{
  color:#8f9492;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.58rem;
  white-space:nowrap;
}
.oss-bars{ display:flex; gap:3px; }
.oss-bars i{ width:5px; height:5px; background:rgba(255,255,255,.11); }
.oss-bars i.is-active{ background:#55e6a5; }
.oss-latest-link,
.oss-event-cell{
  color:inherit;
  text-decoration:none;
  transition:background-color .18s ease;
}
.oss-latest-link{
  display:grid;
  grid-template-columns:1.65rem minmax(0,1fr);
  gap:.8rem;
  margin:.5rem -.35rem -.25rem;
  padding:.45rem .35rem;
}
.oss-latest-link:hover,
.oss-event-cell:hover{ background:rgba(255,255,255,.025); }
.oss-latest-link:focus-visible,
.oss-event-cell:focus-visible{ outline:2px solid rgba(85,230,165,.62); outline-offset:-2px; }
.oss-event-mark{
  display:grid;
  width:1.65rem;
  height:1.65rem;
  place-items:center;
  color:#55e6a5;
  font-size:.68rem;
}
.oss-latest-body{ display:block; min-width:0; }
.oss-event-head{ display:flex; align-items:center; gap:.45rem; min-width:0; }
.oss-event-head > .oss-cell-icon{ color:#55e6a5; font-size:.6rem; }
.oss-pill,
.oss-time,
.oss-meta{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  text-transform:uppercase;
}
.oss-pill{ color:#55e6a5; font-size:.58rem; letter-spacing:.12em; }
.oss-repo{ color:var(--text-strong); font-size:.78rem; font-weight:650; }
.oss-time{ margin-left:auto; color:#8f9492; font-size:.58rem; letter-spacing:.06em; white-space:nowrap; }
.oss-title{ display:block; margin-top:.42rem; color:var(--text-strong); font-size:.86rem; line-height:1.35; }
.oss-summary{ display:block; margin-top:.2rem; color:#8f9492; font-size:.68rem; line-height:1.4; }
.oss-meta{ display:flex; flex-wrap:wrap; gap:.35rem .7rem; margin-top:.55rem; color:#777d7a; font-size:.57rem; letter-spacing:.04em; }
.oss-sha{ color:#a9afac; }
.oss-add{ color:#55e6a5; }
.oss-delete{ color:#e78686; }
.oss-recent{ grid-column:1 / -1; padding-bottom:0; border-top:1px solid rgba(255,255,255,.1); }
.oss-recent-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:.75rem -.75rem 0; }
.oss-event-cell{ display:flex; min-width:0; flex-direction:column; padding:.7rem .75rem .75rem; border-top:1px solid rgba(255,255,255,.065); border-right:1px solid rgba(255,255,255,.08); }
.oss-event-cell:nth-child(4n){ border-right:0; }
.oss-event-cell .oss-repo{ margin-top:.55rem; }
.oss-event-cell .oss-title{ font-size:.75rem; }
.oss-event-cell .oss-meta{ margin-top:auto; padding-top:.6rem; }
.oss-state{
  grid-column:1 / -1;
  display:flex;
  min-height:7rem;
  align-items:center;
  justify-content:center;
  color:#8f9492;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.7rem;
  letter-spacing:.08em;
}
@media (max-width:767px){
  .oss-log{ grid-template-columns:1fr; }
  .oss-signal{ border-right:0; border-bottom:1px solid rgba(255,255,255,.1); }
  .oss-recent{ grid-column:1; }
  .oss-recent-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .oss-event-cell:nth-child(odd){ border-right:1px solid rgba(255,255,255,.08); }
  .oss-event-cell:nth-child(even){ border-right:0; }
}
@media (max-width:479px){
  .oss-signal-row{ grid-template-columns:minmax(0,1fr) auto; }
  .oss-bars{ grid-column:1 / -1; }
  .oss-recent-grid{ grid-template-columns:1fr; }
  .oss-event-cell{ border-right:0; }
}

.activity-link{
  justify-self:start;
  margin-top:.35rem;
  color:#8f9492;
  font-size:.9rem;
  text-decoration:none;
}

.activity-link:hover{
  color:#55e6a5;
}

@media (min-width:640px){
  .activity-counters{
    grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:2rem;
  }
}

@media (min-width:768px){
  .activity-head{
    grid-template-columns:minmax(0,1fr) minmax(260px,380px);
  }
}

@media (min-width:1280px){
  .activity-section{
    margin-top:5.5rem;
  }
}

@media (max-width:360px){
  .activity-counters{
    grid-template-columns:minmax(0,1fr);
  }
}

@media (min-width:640px){
  .section{ margin-top:6.5rem; margin-bottom:0; }
  .hero{ margin-bottom:0; }
  .now-section{ margin-top:6.5rem; }
  .projects-section{ margin-top:6.5rem; }
  .activity-section{ margin-top:5.5rem; }
  .writing-section{ margin-top:8rem; }
  .contact-section{ margin-top:7.5rem; }
}

/* Final alignment and hierarchy polish for recurring editorial patterns. */
.projects-head,
.activity-head,
.writing-head,
.contact-head{
  border-bottom-color:rgba(255,255,255,.085);
}

.projects-head h2,
.activity-head h2,
.writing-head h2,
.contact-head h2{
  font-weight:700;
  letter-spacing:-.02em;
}

.project-lane-kicker,
.activity-kicker,
.writing-kicker,
.contact-kicker{
  font-size:.66rem;
  letter-spacing:.15em;
}

.activity-refresh svg,
.writing-refresh svg{
  width:14px;
  height:14px;
  flex:0 0 14px;
}

@media (min-width:768px){
  .projects-head > p,
  .activity-head > p,
  .contact-head > p{
    padding-bottom:.1rem;
  }
}

#blogList > p{
  border:1px dashed var(--border);
  padding:0.85rem 1rem;
  border-radius:var(--r);
  background:color-mix(in oklab,var(--surface) 96%,var(--text) 4%);
}

.site-footer{
  position:relative;
  margin-top:5rem;
}

.site-footer::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:1px;
  background:color-mix(in oklab,var(--border) 70%,transparent);
}

.footer-shell{
  max-width:72rem;
  margin:0 auto;
  padding:2rem 1.5rem;
  color:var(--text-soft);
  font-size:.9rem;
}

.footer-primary,
.footer-secondary{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1.25rem;
}

.footer-primary{
  padding-bottom:1.35rem;
  border-bottom:1px solid color-mix(in oklab,var(--border) 55%,transparent);
}

.footer-secondary{
  padding-top:1.25rem;
}

.footer-kicker{
  margin:0 0 .65rem;
  color:#55e6a5;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.68rem;
  letter-spacing:.16em;
  line-height:1.45;
  text-transform:uppercase;
}

.footer-email,
.footer-icon-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--text-soft);
  text-decoration:none;
  transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}

.footer-email{
  gap:.55rem;
  min-height:44px;
  padding:.45rem 0;
}

.footer-email:hover,
.footer-icon-link:hover,
.footer-legal a:hover{
  color:var(--text-strong);
}

.footer-social{
  min-width:0;
}

.footer-icon-row{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
}

.footer-icon-link{
  width:42px;
  height:42px;
}

.footer-icon-link:hover{
  color:#55e6a5;
  background:color-mix(in oklab,var(--surface) 92%,var(--text) 8%);
}

.footer-secondary > span,
.footer-secondary > a{
  line-height:1.55;
}

.footer-legal{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem 1rem;
}

.footer-legal a{
  color:var(--text-soft);
  text-decoration:underline;
  text-decoration-color:rgba(85,230,165,.22);
  text-underline-offset:4px;
  transition:color .18s ease, text-decoration-color .18s ease;
}

.footer-legal a:hover{
  text-decoration-color:rgba(85,230,165,.7);
}

.utility-controls{
  display:flex;
  flex-direction:column;
  gap:1px;
  padding:3px;
  border:1px solid color-mix(in oklab,var(--border) 80%,transparent);
  background:color-mix(in oklab,var(--surface) 90%,transparent);
  box-shadow:0 8px 24px rgba(0,0,0,.14);
  backdrop-filter:blur(12px);
}

.utility-control{
  display:flex;
  align-items:center;
  justify-content:center;
  width:2.5rem;
  height:2.5rem;
  border:0;
  background:transparent;
  color:var(--text-soft);
  cursor:pointer;
  transition:color .18s ease, background-color .18s ease, border-color .18s ease;
}

.utility-control:hover{
  color:#55e6a5;
  background:color-mix(in oklab,var(--surface) 88%,var(--text) 12%);
}

.utility-control:focus-visible,
.utility-control:active{
  color:#55e6a5;
}

.utility-control > i{
  width:1rem;
  font-size:.82rem;
  line-height:1;
  text-align:center;
}

@media (min-width:768px){
  .footer-primary{
    grid-template-columns:minmax(220px,1fr) auto;
    align-items:end;
  }

  .footer-secondary{
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
  }

  .footer-social{
    justify-self:end;
  }

  .footer-icon-row{
    justify-content:flex-end;
  }
}

@media (max-width:640px){
  .site-footer{
    margin-top:3.5rem;
  }

  .footer-shell{
    padding-bottom:5rem;
  }

  .footer-icon-row{
    gap:.25rem;
  }
}

@media (max-width:640px){
  .utility-controls{
    right:0.75rem;
    bottom:0.75rem;
  }
  .section{ margin-top:3.2rem; margin-bottom:0; }
  .hero{ margin-bottom:0; }
  .now-section{ margin-top:5rem; }
  .projects-section{ margin-top:4.25rem; }
  .activity-section{ margin-top:3.75rem; }
  .writing-section{ margin-top:5rem; }
  .contact-section{ margin-top:4.75rem; }
  .site-footer{ margin-top:3.5rem; }
}

/* Scroll reveal motion */
[data-animate]{
  --reveal-distance:18px;
  --reveal-duration:.65s;
  --reveal-delay:0ms;
  opacity:0;
  transform:translateY(var(--reveal-distance));
  filter:blur(3px);
  transition:
    opacity var(--reveal-duration) ease,
    transform var(--reveal-duration) cubic-bezier(.22,.8,.28,1),
    filter .45s ease;
  transition-delay:var(--reveal-delay);
}

[data-animate].is-revealed{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

[data-animate-group] > [data-animate]:nth-child(2){ --reveal-delay:70ms; }
[data-animate-group] > [data-animate]:nth-child(3){ --reveal-delay:130ms; }
[data-animate-group] > [data-animate]:nth-child(4){ --reveal-delay:190ms; }
[data-animate-group] > [data-animate]:nth-child(5){ --reveal-delay:250ms; }
[data-animate-group] > [data-animate]:nth-child(6){ --reveal-delay:310ms; }

@media (prefers-reduced-motion: reduce){
  #humanChallenge{ transition:none; }
  [data-animate]{
    opacity:1;
    transform:none;
    filter:none;
    transition:none;
  }
}