/* The blog. Each post opens in its project's own look (cover photo, lettering, colors, set as custom properties on
   <main> by blog/build.mjs); the writing underneath is the same on every post. Defaults below are the site's own. */
.p-blog{--p-bg:#0C0A12;--p-glow:#3A1F4F;--p-accent:#FFB23E;--p-soft:#F1ECE3;--p-line:rgba(241,236,227,.16);
  --p-title:var(--f-display);--p-title-w:900;--p-title-size:clamp(3.4rem,8vw,6.4rem);--p-head:var(--f-display);--p-dek:var(--f-body)}
.p-post main{background:var(--p-bg)}

/* the cover */
.b-cover{position:relative;isolation:isolate;display:flex;align-items:center;min-height:clamp(460px,64vh,660px);overflow:hidden;
  background:radial-gradient(ellipse 70% 90% at 72% 55%,var(--p-glow),transparent 72%),var(--p-bg)}
.b-cover-img{position:absolute;z-index:-1;right:0;top:0;width:64%;height:100%;object-fit:cover;object-position:60% 50%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 36%),linear-gradient(180deg,#000 72%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 36%),linear-gradient(180deg,#000 72%,transparent);mask-composite:intersect}
.b-cover::after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;height:40%;background:linear-gradient(180deg,transparent,var(--p-bg));pointer-events:none}
.b-cover-in{width:100%;padding-block:clamp(3rem,7vw,5rem)}
.b-crumbs{font-family:var(--f-mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--p-accent)}
.b-crumbs a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
.b-title{margin:.9rem 0 0;max-width:var(--p-title-max,5.4em);font-family:var(--p-title);font-weight:var(--p-title-w);font-size:var(--p-title-size);line-height:.92;color:var(--p-soft);
  text-shadow:0 0 34px color-mix(in srgb,var(--p-accent) 55%,transparent);text-wrap:balance}
.b-dek{max-width:19em;margin-top:1.2rem;font-family:var(--p-dek);font-style:italic;font-size:clamp(1.3rem,2.2vw,1.65rem);line-height:1.4;color:var(--p-soft)}

/* the date, the project card */
.b-meta{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin:0;padding-block:1.6rem 1.3rem;font-family:var(--f-mono);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:#A9A1B8}
.b-meta time{color:var(--text)}
.b-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem 2rem;margin:0;padding-block:1.4rem;border-block:1px solid var(--p-line)}
.b-facts div{min-width:0}
.b-facts dt{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--p-accent)}
.b-facts dd{margin:.3rem 0 0;font-size:.98rem;line-height:1.45;color:var(--text)}
.b-facts a{color:var(--text);text-decoration-color:var(--p-accent);text-underline-offset:3px}

/* the writing: one readable column; figures, rows and the lantern run wider */
.b-body{display:grid;grid-template-columns:minmax(0,1fr) min(42rem,100%) minmax(0,1fr);padding-top:clamp(2.4rem,5vw,3.6rem)}
.b-body>*{grid-column:2}
.b-body>.b-wide,.b-body>.b-shot,.b-body>.b-row,.b-body>.b-lantern{grid-column:1/-1;justify-self:center;width:min(100%,62rem)}
.b-body p{margin:0 0 1.25em;font-size:1.16rem;line-height:1.75;color:rgba(241,236,227,.92)}
.b-body h2{margin:1.9em 0 .55em;font-family:var(--p-head);font-weight:400;font-size:clamp(1.9rem,3.6vw,2.6rem);line-height:1.1;color:var(--p-soft);text-wrap:balance}
.b-body h3{margin:1.6em 0 .4em;font-family:var(--p-head);font-weight:400;font-size:clamp(1.3rem,2.2vw,1.55rem);line-height:1.2;color:var(--p-soft);text-wrap:balance}
.b-body ul{margin:0 0 1.4em;padding-left:1.3em;display:grid;gap:.45em;font-size:1.16rem;line-height:1.6;color:rgba(241,236,227,.92)}
.b-body li::marker{color:var(--p-accent)}
.b-body a{color:var(--p-accent);text-underline-offset:3px}
.b-quote{margin:1.6rem 0 2rem;padding:.2rem 0 .2rem 1.4rem;border-left:3px solid var(--p-accent)}
.b-body .b-quote p{margin:0;font-family:var(--p-dek);font-style:italic;font-size:clamp(1.4rem,2.6vw,1.75rem);line-height:1.4;color:var(--p-soft)}
.b-quote cite{display:block;margin-top:.7rem;font-family:var(--f-mono);font-style:normal;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--p-accent)}
.b-fig{margin:2rem 0 2.6rem}
.b-fig img{display:block;width:100%;height:auto;border-radius:10px}
.b-shot img{outline:1px solid var(--p-line);box-shadow:0 0 60px -20px var(--p-accent),0 24px 50px rgba(0,0,0,.55)}
.b-fig figcaption{margin-top:.8rem;font-size:.95rem;color:#A9A1B8;text-align:center}
.b-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:.6rem 0 2.6rem}
.b-row img{display:block;width:100%;height:auto;border-radius:10px}
.b-row figure{margin:0;min-width:0}
.b-row figcaption{margin-top:.7rem;font-size:.92rem;color:#A9A1B8;text-align:center}
.b-row-3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* screenshots of old browser windows keep their square corners */
.b-win img{border-radius:3px}
.b-phone img{width:min(100%,300px);margin-inline:auto}

/* the KiloWeen lantern: a dark photo, and a circle that shows the same photo lit and magnified */
.b-lantern{position:relative;margin:1.4rem 0 2.6rem;aspect-ratio:2000/1334;overflow:hidden;border-radius:14px;background:#000;cursor:crosshair;touch-action:manipulation;
  outline:1px solid var(--p-line);box-shadow:0 0 70px -24px var(--p-accent)}
.b-lantern img{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(.26) saturate(.7)}
.b-lens{position:absolute;left:0;top:0;width:clamp(120px,24%,240px);aspect-ratio:1;border-radius:50%;background-color:#000;background-repeat:no-repeat;pointer-events:none;will-change:transform;
  box-shadow:0 0 0 2px rgba(255,255,255,.22),0 0 46px 12px color-mix(in srgb,var(--p-accent) 55%,transparent),inset 0 0 34px rgba(0,0,0,.65)}
.b-hint{position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);padding:.35rem .9rem;border:1px solid var(--p-line);border-radius:999px;background:rgba(8,5,12,.75);
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--p-soft);transition:opacity .4s;pointer-events:none}
.b-hint.is-gone{opacity:0}

/* the Since ’96 post: the cover is After Hours channel 1. The year's stage from Since ’96 on the right, and under it the
   same deck: the year in rolling digits, the browser line, the caption, Play, and the scrubber with an era name over
   each stretch of years (assets/blog.js runs it) */
.b-s96{display:block;min-height:0;background:radial-gradient(70% 90% at 72% 36%,#1C1727 0%,#120F1A 50%,var(--p-bg) 82%)}
.b-s96::after{display:none}
.s96-top{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:center;gap:clamp(1rem,2.5vw,2.5rem);
  padding-left:max(var(--gutter),calc((100% - 1180px) / 2 + var(--gutter)))}
.s96-top .b-cover-in{padding-block:clamp(2.6rem,5vw,4rem)}
.s96-stage{position:relative;align-self:stretch;min-height:clamp(320px,38vw,560px)}
.s96-shot{position:absolute;left:0;right:var(--gutter);top:clamp(1.6rem,3.4vw,3rem);bottom:clamp(1.6rem,3.4vw,3rem);width:calc(100% - var(--gutter));
  height:calc(100% - 2 * clamp(1.6rem,3.4vw,3rem));object-fit:contain;object-position:50% 50%;opacity:0;transition:opacity .28s ease;
  filter:drop-shadow(0 22px 40px rgba(0,0,0,.6)) drop-shadow(0 0 1px rgba(241,236,227,.25))}
.s96-shot.is-on{opacity:1}
.s96-deck{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"year text btns" "row row row";align-items:end;gap:2px 24px;
  padding-block:14px 18px;border-top:1px solid var(--p-line)}
.s96-year{grid-area:year;display:flex;margin:-.12em 0 -.1em;font:900 clamp(54px,6.2vw,92px)/1 var(--f-display);color:var(--text);user-select:none}
.s96-year .dg{display:block;height:1em;width:.5em;overflow:hidden}
.s96-year .dg-in{display:block;transform:translateY(calc(var(--d,0) * -1em));transition:transform .6s cubic-bezier(.2,.85,.2,1)}
.s96-year .dg-in i{display:block;height:1em;line-height:1;font-style:normal;text-align:center}
.s96-text{grid-area:text;min-width:0;padding-bottom:3px}
.s96-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0 0 5px}
.s96-line b{font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.s96-line span{font:12px/1.3 var(--f-mono);letter-spacing:.02em;color:var(--text-3)}
.s96-cap{margin:0;max-width:72ch;font-size:15px;line-height:1.45;color:var(--text-2);text-wrap:pretty}
.s96-btns{grid-area:btns;display:flex;gap:8px;padding-bottom:4px}
.s96-btn{font:700 13.5px/1 var(--f-body);color:var(--text);background:transparent;border:1px solid var(--line-2);border-radius:3px;padding:9px 14px;cursor:pointer;
  white-space:nowrap;text-decoration:none;transition:border-color .2s,box-shadow .2s,color .2s}
.s96-btn:hover{border-color:var(--text)}
.s96-btn[aria-pressed="true"]{color:#fff;border-color:var(--amber);box-shadow:0 0 10px color-mix(in srgb,var(--amber) 55%,transparent),inset 0 0 8px color-mix(in srgb,var(--amber) 35%,transparent);text-shadow:0 0 6px var(--amber)}
.s96-row{grid-area:row;display:flex;align-items:flex-start;gap:4px;margin-top:10px}
.s96-step{flex:none;width:34px;height:32px;display:grid;place-items:center;padding:0 0 3px;font:400 26px/1 var(--f-body);color:var(--text-2);
  background:transparent;border:1px solid var(--line-2);border-radius:3px;cursor:pointer;transition:border-color .2s,color .2s}
.s96-step:hover{border-color:var(--text);color:var(--text)}
.s96-step:disabled{opacity:.35;cursor:default;border-color:var(--line-2)}
.s96-scrub{position:relative;flex:1 1 auto;min-width:0;height:66px;margin:0 14px}
.s96-rail{position:absolute;left:0;right:0;top:14px;height:3px;border-radius:3px;background:#2B2636}
.s96-rail i{position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);border-radius:inherit;background:#FFE3B0;box-shadow:0 0 6px var(--amber),0 0 14px var(--amber);
  transition:width .45s cubic-bezier(.2,.85,.2,1)}
.s96-ticks,.s96-eras{position:absolute;inset:0;margin:0;padding:0;list-style:none;pointer-events:none}
.s96-ticks li{position:absolute;top:24px;left:var(--x);transform:translateX(-50%);font:11px/1 var(--f-mono);color:var(--text-3);transition:color .2s}
.s96-ticks li::before{content:"";position:absolute;left:50%;top:-14px;width:1px;height:6px;background:#4B4458}
.s96-ticks li.era::before{top:-17px;height:12px;background:#7A7189}
.s96-ticks li.on{color:var(--text)}
.s96-eras li{position:absolute;top:40px;left:var(--a);font:500 9.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#5E5770;white-space:nowrap;transition:color .2s}
.s96-eras li.on{color:var(--amber)}
.s96-eras li[data-row="1"]{top:54px}
.s96-knob{position:absolute;top:15.5px;left:var(--p,0%);width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#FFF6E6;pointer-events:none;
  box-shadow:0 0 0 4px rgba(255,178,62,.16),0 0 10px var(--amber),0 0 24px var(--amber);transition:left .45s cubic-bezier(.2,.85,.2,1)}
/* the real control is a range input laid over the rail: its 28px thumb travels exactly the rail's length */
.s96-range{position:absolute;left:-14px;right:-14px;top:0;width:calc(100% + 28px);height:34px;margin:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none;background:none}
.s96-range::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px}
.s96-range::-moz-range-thumb{width:28px;height:28px;border:0}
.s96-range:focus-visible~.s96-knob{box-shadow:0 0 0 3px var(--p-bg),0 0 0 5px var(--amber),0 0 22px var(--amber)}
.s96-scrub.is-dragging .s96-knob,.s96-scrub.is-dragging .s96-rail i{transition:none}

/* the end of a post */
.b-end{max-width:42rem;margin:clamp(2.6rem,6vw,4rem) auto 0;padding:1.5rem 1.6rem;border:1px solid var(--p-line);border-radius:12px;background:rgba(255,255,255,.03)}
.b-end p{margin:0;font-size:1.08rem;line-height:1.6}
.b-end .cta-row{margin-top:1.2rem}
.b-back{max-width:42rem;margin:2rem auto 0;padding-bottom:clamp(3rem,7vw,5rem)}
.b-back a{color:var(--text);font-weight:700;text-decoration-color:var(--p-accent);text-underline-offset:4px}

/* the blog index: every card in its post's own look */
.b-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.4rem,3vw,2.2rem);margin-top:clamp(2.2rem,4vw,3rem)}
.b-card{position:relative;display:grid;grid-template-rows:auto 1fr;overflow:hidden;border:1px solid var(--p-line);border-radius:14px;background:var(--p-bg);color:var(--text);text-decoration:none;
  transition:border-color .25s,box-shadow .25s,transform .25s}
.b-card:hover,.b-card:focus-visible{border-color:var(--p-accent);box-shadow:0 0 50px -14px var(--p-accent);transform:translateY(-3px)}
.b-card-img{display:block;aspect-ratio:3/2;overflow:hidden;background:radial-gradient(ellipse at 60% 50%,var(--p-glow),var(--p-bg) 75%)}
.b-card-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.b-card:hover .b-card-img img{transform:scale(1.04)}
.b-card-text{display:grid;gap:.6rem;align-content:start;padding:1.4rem 1.5rem 1.6rem}
.b-card-kind{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--p-accent)}
.b-card-title{font-family:var(--p-title);font-weight:var(--p-title-w);font-size:clamp(2.2rem,4vw,3rem);line-height:.98;color:var(--p-soft)}
.b-card-dek{font-family:var(--p-dek);font-style:italic;font-size:1.2rem;line-height:1.4;color:var(--p-soft)}
.b-card-meta{font-size:.92rem;color:#A9A1B8}
.b-card-lead{grid-column:1/-1;grid-template-rows:none;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:stretch}
.b-card-lead .b-card-img{aspect-ratio:auto;min-height:380px}
.b-card-lead .b-card-text{align-content:center;padding:clamp(1.6rem,4vw,3rem)}
.b-card-lead .b-card-title{font-size:clamp(2.8rem,6vw,5rem)}
.b-feed{margin:2.4rem 0 0;padding-bottom:clamp(4rem,8vw,6rem);font-family:var(--f-mono);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase}
.b-feed a{color:#A9A1B8;text-underline-offset:3px}

@media (max-width:900px){
  .b-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s96-deck{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"year btns" "text text" "row row";gap:8px 14px}
  .s96-btns{justify-content:flex-end;flex-wrap:wrap;padding-bottom:6px}
  .s96-eras{display:none}
  .s96-scrub{height:40px}
  .b-row-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .b-card-lead{grid-template-columns:minmax(0,1fr)}
  .b-card-lead .b-card-img{min-height:0;aspect-ratio:3/2}
}
@media (max-width:760px){
  .b-cover{display:block;min-height:0}
  .b-cover-img{position:relative;display:block;width:100%;height:auto;aspect-ratio:3/2;
    -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 100%);mask-image:linear-gradient(180deg,#000 60%,transparent 100%)}
  .b-cover-in{margin-top:-3.5rem;padding-top:0}
  .b-list{grid-template-columns:minmax(0,1fr)}
  .b-row,.b-row-3{grid-template-columns:minmax(0,1fr)}
  .b-body p,.b-body ul{font-size:1.08rem}
  .s96-top{display:flex;flex-direction:column-reverse;align-items:stretch;padding-left:0}
  .s96-top .b-cover-in{padding:0 var(--gutter) 1.6rem}
  .s96-stage{min-height:0;aspect-ratio:4/3;margin-bottom:3.5rem}
  .s96-shot{left:var(--gutter);width:calc(100% - 2 * var(--gutter));top:1.2rem;bottom:0;height:calc(100% - 1.2rem)}
}
/* a finger needs bigger targets, the same as on channel 1 */
@media (pointer:coarse){
  .s96-step{width:44px;height:44px;font-size:30px}
  .s96-scrub{height:48px;margin:0 12px}
  .s96-rail{top:20.5px}
  .s96-knob{top:22px;width:24px;height:24px;margin:-12px 0 0 -12px}
  .s96-ticks li{top:32px}
  .s96-ticks li::before{top:-16px}
  .s96-ticks li.era::before{top:-19px}
  .s96-range{height:44px}
}
@media (max-width:520px){
  .s96-year{font-size:50px}
  .s96-btn{padding:8px 11px;font-size:12.5px}
  .s96-ticks li span{visibility:hidden}
  .s96-ticks li:nth-child(5n+1) span{visibility:visible}
  .s96-line span{display:none}
}
@media (max-width:480px){
  .b-facts{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .b-card,.b-card-img img{transition:none}
  .s96-year .dg-in,.s96-rail i,.s96-knob,.s96-shot{transition:none}
}