/* ─────────────────────────────────────────
   SHARED CONTENT STYLES
   Work cards, social posts, project hero and the block renderer: everything
   that shows site content. Loaded by both the desktop page (before
   styles-main.css) and the mobile page, so the two never drift apart.
───────────────────────────────────────── */


/* ─────────────────────────────────────────
   WORK GRID
───────────────────────────────────────── */
.wf{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.75rem}
.fb{font-family:var(--font-b);font-size:var(--fs-xs);letter-spacing:var(--ls-normal);text-transform:uppercase;border:1px solid var(--border);background:var(--panel-bg);color:var(--muted);padding:.38rem .9rem;transition:all .2s}
.fb.active,.fb:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.wg{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.wc{transition:opacity .3s}
.wci{aspect-ratio:16/9;background:var(--surface);position:relative;overflow:hidden;margin-bottom:.65rem;transition:transform .35s var(--ease);will-change:transform;backface-visibility:hidden}
/* will-change keeps the thumbnail on its own layer: without it the browser re-draws it
   onto the pixel grid when the hover zoom ends, a visible jitter at fractional card sizes */
.wc:hover .wci{transform:scale(1.025)}
.wci img{width:100%;height:100%;object-fit:cover;display:block}
.wco{position:absolute;inset:0;background:rgba(var(--accent-rgb),0.45);display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--paper);opacity:0;transition:opacity .25s}
.wc:hover .wco{opacity:1}
.wcm{display:flex;justify-content:space-between;align-items:baseline}
.wct{font-size:var(--fs-md);font-weight:500;color:var(--ink)}
.wcty{font-size:var(--fs-xs);letter-spacing:var(--ls-normal);text-transform:uppercase;color:var(--muted)}
.tph{width:100%;height:100%;display:flex;align-items:center;justify-content:center}

/* Work grid: dynamic stacking (positions set in src/display/feed.js) */
.wg.masonry{display:block;position:relative;overflow-x:clip} /* mid-restack, cards can poke past the edge for a frame; never show a sideways scrollbar */
.wg.masonry>.wc{position:absolute;top:0;left:0;transition:transform .55s var(--ease),opacity .4s ease}
.wg.masonry>.wc.wc-enter{opacity:0}
.wg.masonry>.wc.wc-leave{opacity:0;pointer-events:none;transition:opacity .3s ease}
/* Filter row: chips on one line, overflow in "More", quiet sort dropdown on the right */
.wf{align-items:center;flex-wrap:nowrap;position:relative;z-index:5} /* menus open over the grid */
/* Work panel: the filter row stays pinned at the top while the grid scrolls under it */
#panel-work .wf{position:sticky;top:-2rem;margin:-2rem -2rem 1rem;padding:1.25rem 2rem 1rem;background:rgba(247,243,236,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
#panel-work .wf.is-stuck{border-bottom-color:var(--border)}
body.panel-frost #panel-work .wf{background:rgba(var(--ink-rgb),.86);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
body.panel-frost #panel-work .wf.is-stuck{border-bottom-color:rgba(var(--paper-rgb),.1)}
.wf-chips{display:flex;gap:.4rem;flex:1 1 auto;min-width:0;overflow:hidden}
.wf-chips .fb,.wf-more .fb{flex:none;white-space:nowrap}
.wf-dd{position:relative;flex:none}
.wf-dd[hidden]{display:none}
.wf-menu{position:absolute;top:calc(100% + .4rem);left:0;z-index:30;display:none;flex-direction:column;align-items:stretch;gap:.3rem;min-width:9rem;padding:.45rem;background:var(--panel-bg);border:1px solid var(--border);box-shadow:0 12px 30px rgba(10,8,6,.25)}
.wf-menu-right{left:auto;right:0}
.wf-dd.open .wf-menu{display:flex}
.wf-menu .fb{text-align:left}
.wf-sort{margin-left:auto;padding-left:.8rem}
.wf-sort-btn{background:none;border:none;padding:.38rem 0;font-family:var(--font-b);font-size:var(--fs-xs);letter-spacing:var(--ls-normal);text-transform:uppercase;color:var(--muted);transition:color .2s;white-space:nowrap}
.wf-sort-btn:hover,.wf-sort.open .wf-sort-btn{color:var(--ink)}
.wf-caret{font-size:.7em;margin-left:.15rem}
.wf-opt{background:none;border:none;text-align:left;padding:.35rem .5rem;font-family:var(--font-b);font-size:var(--fs-xs);letter-spacing:var(--ls-normal);text-transform:uppercase;color:var(--muted);white-space:nowrap;transition:color .2s}
.wf-opt:hover,.wf-opt.active{color:var(--ink)}
.wf-opt.active::before{content:'\2022';color:var(--accent);margin-right:.4rem}
body.panel-frost .wf-menu{background:rgba(var(--ink-rgb),.96);border-color:rgba(var(--paper-rgb),.12)}
body.panel-frost .wf-sort-btn,body.panel-frost .wf-opt{color:rgba(var(--paper-rgb),.45)}
body.panel-frost .wf-sort-btn:hover,body.panel-frost .wf-sort.open .wf-sort-btn,body.panel-frost .wf-opt:hover,body.panel-frost .wf-opt.active{color:var(--paper)}
.wc-likes{color:var(--accent);margin-left:.4rem}
.wc-likes i{font-size:.7rem;vertical-align:-.05em}

/* Social feed cards */
.src-dot{position:absolute;top:.55rem;left:.55rem;z-index:2;display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .5rem;border-radius:2px;background:rgba(10,8,6,.6);color:#fff;font-family:var(--font-b);font-size:.55rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.src-dot i{width:6px;height:6px;border-radius:50%;display:inline-block}
.src-dot.src-count{left:auto;right:.55rem}
.wc-quote{display:flex;flex-direction:column;gap:.55rem;padding:1rem 1.2rem 1rem 1.4rem;border-left:2px solid var(--accent);background:rgba(var(--accent-rgb),.08);transition:background .25s,opacity .3s}
.wc-quote:hover{background:rgba(var(--accent-rgb),.16)}
.wc-quote .q-text{font-family:var(--font-s);font-size:1.25rem;line-height:1.3;color:var(--ink)}
.wc-quote .wcty{display:flex;align-items:center;gap:.5rem}
.wc-quote .src-dot{position:static;padding:0;background:none;color:inherit}
.wci .textthumb{position:absolute;inset:0;display:flex;align-items:center;padding:1.4rem 1.2rem 1rem;font-family:var(--font-s);font-size:1.1rem;line-height:1.25;color:var(--paper);background:linear-gradient(135deg,rgba(var(--accent-rgb),.55),rgba(var(--ink-rgb),.95))}
.wci .textthumb span{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.wci video{width:100%;height:100%;object-fit:cover;display:block}
.wcm .wct{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;padding-right:.6rem}
.wcm .wcty{white-space:nowrap}
/* 3-column Work grid (~215px cards): smaller text so titles and tags still fit */
.wg[data-cols="3"] .wci{margin-bottom:.5rem}
.wg[data-cols="3"] .wct{font-size:var(--fs-sm)}
.wg[data-cols="3"] .wcty{font-size:.55rem;letter-spacing:.06em}
.wg[data-cols="3"] .wc-quote{padding:.8rem .9rem .8rem 1rem;gap:.45rem}
.wg[data-cols="3"] .wc-quote .q-text{font-size:1.05rem}
.wg[data-cols="3"] .wc-quote.wc-wide{padding:1rem 1.2rem 1rem 1.4rem}
.wg[data-cols="3"] .wc-quote.wc-wide .q-text{font-size:1.25rem}
.wg[data-cols="3"] .wci .textthumb{padding:1.1rem .9rem .8rem;font-size:.95rem}
.wg[data-cols="3"] .src-dot{font-size:.5rem}

/* Social feed post in the #pp panel */
.pp-hero-plain{background:linear-gradient(135deg,rgba(var(--accent-rgb),.9),rgba(var(--ink-rgb),1))}
.post-text{white-space:pre-line}
.post-tag{color:var(--accent)}
/* links in posts wear the same badge as the source tag on cards: dark chip, small caps, coloured dot */
a.post-tag,.post-article a.post-tag{display:inline;padding:.12rem .5rem;border-radius:2px;background:rgba(10,8,6,.6);color:#fff;font-family:var(--font-b);font-size:.72em;font-weight:500;letter-spacing:.12em;line-height:1.9;text-transform:uppercase;text-decoration:none;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background .2s}
a.post-tag::before{content:'';display:inline-block;width:6px;height:6px;margin-right:.4rem;border-radius:50%;background:var(--accent);vertical-align:.08em}
a.post-tag:hover{background:rgba(var(--accent-rgb),.5)}
.post-dek{font-family:var(--font-s);font-size:1.45rem;line-height:1.3;color:var(--ink)}
.post-article{display:flex;flex-direction:column;gap:1.1rem;font-size:var(--fs-body);line-height:1.85;color:rgba(var(--ink-rgb),.75)}
.post-article h2,.post-article h3{font-family:var(--font-s);font-weight:500;font-size:1.7rem;line-height:1.15;color:var(--ink);margin-top:.8rem}
.post-article h3{font-size:1.35rem}
.post-article strong,.post-article b{color:var(--accent);font-weight:600}
.post-article a{color:var(--accent)}
.post-article img{width:100%;display:block;background:var(--surface)}
.post-article figcaption{font-size:var(--fs-xs);letter-spacing:var(--ls-normal);text-transform:uppercase;color:var(--muted);margin-top:.4rem}
.post-article ol,.post-article ul{padding-left:1.3rem;display:flex;flex-direction:column;gap:.4rem}
.post-article blockquote{border-left:2px solid var(--accent);padding:.2rem 0 .2rem 1.1rem;font-family:var(--font-s);font-size:1.35rem;line-height:1.35;color:var(--ink)}
.post-media{aspect-ratio:auto}
.post-media img,.post-media video{width:100%;height:auto;display:block}
.post-video-still{position:relative;display:block;aspect-ratio:auto}
.post-video-still img{height:auto}
.post-video-still span{position:absolute;inset:auto 1rem 1rem auto;padding:.45rem .8rem;background:rgba(10,8,6,.7);color:#fff;font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase}
.post-origin{align-self:flex-start;font-size:var(--fs-xs);letter-spacing:var(--ls-normal);text-transform:uppercase;color:var(--muted);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.post-origin:hover{color:var(--accent);border-color:var(--accent)}
.post-end{padding-top:0}
.more-work{border-top:1px solid var(--border);padding-top:1.4rem}
.more-head{font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--muted);margin-bottom:1rem}
.more-work .wci{aspect-ratio:16/9 !important}
button.bl-cta-link{border:none;font-family:var(--font-b);cursor:inherit}
.tph svg{width:100%;height:100%}

/* sensitive overlay */
.wci-blur img,.wci-blur .tph{filter:blur(10px);transform:scale(1.05)}
.wci-sensitive{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;mix-blend-mode:difference} /* the tape inverts against the picture, like the contact heading */
.wci-tape{position:absolute;left:-20%;right:-20%;width:140%;padding:.8rem 0;
  border-top:1px solid color-mix(in srgb,var(--sensitive-color,#e03030) 70%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--sensitive-color,#e03030) 70%,transparent);
  background:color-mix(in srgb,var(--sensitive-color,#e03030) 20%,transparent);
  overflow:hidden}
/* Pinstripes: a layer the ticker adds (src/utils/ticker.js) and moves with the words.
   It's one tile wider on each side; a tile is the stripe period / sin 55° (21px → 25.636px),
   so stripes line up across tiles */
.wci-tape .tape-stripes{position:absolute;top:0;bottom:0;left:-25.636px;right:-25.636px;pointer-events:none;z-index:3;
  background:repeating-linear-gradient(-55deg,transparent,transparent 20px,
    color-mix(in srgb,var(--sensitive-color,#e03030) 30%,transparent) 20px,
    color-mix(in srgb,var(--sensitive-color,#e03030) 30%,transparent) 21px);
  background-size:25.636px 100%;will-change:transform}
.wci-tape-track{display:flex;gap:0;white-space:nowrap;will-change:transform}
.wci-tape-word{font-family:var(--font-b);font-weight:600;font-size:1.1rem;
  text-transform:uppercase;letter-spacing:var(--ls-normal);
  color:var(--sensitive-color,#e03030);white-space:nowrap}
.wci-tape-dot{width:7px;height:7px;border-radius:50%;
  background:var(--sensitive-color,#e03030);flex-shrink:0;opacity:.7;margin:0 .6rem}


/* ─────────────────────────────────────────
   BLOCK RENDERER
───────────────────────────────────────── */
.block-canvas{display:flex;flex-direction:column;gap:1.25rem;padding-top:2rem}
.bl-text-sm{font-size:var(--fs-sm);letter-spacing:var(--ls-normal);text-transform:uppercase;color:var(--muted);line-height:1.6}
.bl-text-md{font-size:var(--fs-body);color:rgba(var(--ink-rgb),0.7);line-height:1.85}
.bl-text-lg{font-family:var(--font-s);font-size:var(--fs-xl);font-weight:700;color:var(--accent);line-height:1.1}
.bl-text-sm.ac,.bl-text-md.ac,.bl-text-lg.ac{text-align:center}
.bl-text-sm.ar,.bl-text-md.ar,.bl-text-lg.ar{text-align:right}
.bl-text-sm b,.bl-text-md b,.bl-text-lg b{color:var(--accent);font-weight:600}
rgr{display:inline-block;background:var(--accent);color:#fff;font-family:var(--font-b);font-size:var(--fs-xs);font-weight:500;letter-spacing:var(--ls-normal);text-transform:uppercase;padding:.18rem .55rem;border-radius:2px;vertical-align:middle;position:relative;top:-.1em}
#contact-wrapper rgr{background:var(--ct-accent);color:var(--ct-bg)}
.bl-image{width:100%;background:var(--surface);overflow:hidden;aspect-ratio:16/9}
.bl-image img{width:100%;height:100%;display:block;object-fit:cover}
.bl-image.empty{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--muted)}
.bl-alpha-art{width:min(calc(var(--alpha-natural-width,100%) * var(--alpha-scale,1)),100%);max-width:100%;margin-inline:auto;background:var(--alpha-bg,transparent);overflow:hidden;aspect-ratio:var(--alpha-ratio,16/9);position:relative}
.bl-alpha-art-mask{width:100%;height:100%;background:var(--alpha-color,var(--accent));-webkit-mask-image:var(--alpha-src);mask-image:var(--alpha-src);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:var(--alpha-fit,contain);mask-size:var(--alpha-fit,contain)}
.bl-alpha-art-probe{position:absolute;width:0;height:0;opacity:0;pointer-events:none}
.bl-alpha-art.empty{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--muted);background:var(--surface)}
.bl-twocol{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
.bl-quote{border-left:2px solid var(--accent);padding:0 0 0 1rem}
.bl-quote p{font-family:var(--font-s);font-size:var(--fs-lg);font-weight:300;font-style:italic;color:var(--ink);line-height:1.4}
.bl-quote.ac{border-left:none;border-top:2px solid var(--accent);padding:1rem 0 0;text-align:center}
.bl-quote.ar{border-left:none;border-right:2px solid var(--accent);padding:0 1rem 0 0;text-align:right}
.bl-video{width:100%;aspect-ratio:16/9;background:var(--surface);overflow:hidden}
.bl-video iframe{width:100%;height:100%;border:none;display:block}
.bl-video video{width:100%;height:100%;display:block;object-fit:cover;background:#000}
.post-article .bl-video video{object-fit:contain}
.bl-video.empty{display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--muted)}
.bl-stats{display:grid;gap:1px;background:var(--border);border:1px solid var(--border)}
.bl-stats .sc{background:var(--panel-bg);padding:1rem 1.25rem}
.bl-stats .sn{font-family:var(--font-s);font-size:var(--fs-xl);font-weight:300;color:var(--accent);line-height:1;margin-bottom:.2rem}
.bl-stats .sl{font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--muted)}
.bl-divider{height:1px;background:var(--border);margin:.25rem 0}
.bl-skills{display:flex;flex-direction:column;gap:.85rem;max-width:520px;width:100%;margin:0 auto;padding-left:0.5rem;padding-right:0.5rem}
.skr{display:flex;flex-direction:column;gap:.35rem;width:100%;min-width:0;flex:1}
.skn{display:flex;justify-content:space-between;font-size:var(--fs-sm);letter-spacing:var(--ls-normal);text-transform:uppercase;color:rgba(var(--ink-rgb),0.5);width:100%;min-width:0;flex:1}
.skb{height:1px;background:rgba(var(--ink-rgb),0.1);position:relative;overflow:hidden}
.skf{position:absolute;top:0;left:0;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease)}
.skf.go{transform:scaleX(var(--pct))}
.bl-callout{border:1px solid var(--border);padding:1rem 1.1rem;background:rgba(var(--accent-rgb),0.05)}
.bl-callout .bl-callout-title{font-family:var(--font-b);font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--ink);margin-bottom:.45rem}
.bl-callout .bl-callout-body{font-size:var(--fs-body);line-height:1.8;color:rgba(var(--ink-rgb),0.75)}
.bl-callout.highlight{background:rgba(var(--accent-rgb),0.1)}
.bl-callout.warning{background:rgba(224,48,48,0.08);border-color:rgba(224,48,48,0.35)}
.bl-gallery{display:grid;gap:.75rem}
.bl-gallery.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.bl-gallery.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.bl-gallery-item{margin:0;display:flex;flex-direction:column;gap:.35rem}
.bl-gallery-item img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--surface)}
.bl-gallery-item img.bl-gallery-open{cursor:zoom-in}
.bl-gallery-item figcaption{font-size:var(--fs-xs);letter-spacing:var(--ls-normal);text-transform:uppercase;color:var(--muted)}
ol.bl-process,ul.bl-process{display:flex;flex-direction:column;gap:1.7rem;list-style:none;margin:0;padding:0;counter-reset:step}
.bl-process-step{display:grid;grid-template-columns:38px 1fr;gap:.7rem;align-items:start;padding:.8rem .85rem;border:1px solid var(--border);background:rgba(var(--accent-rgb),0.1);position:relative;overflow:hidden}
.bl-process-step.has-image{aspect-ratio:4/3;grid-template-rows:1fr auto}
.bl-process-step.has-image::before,.bl-process-step.has-image .bl-process-copy{grid-row:2}
.bl-process-step.has-image .bl-process-step-image{position:absolute;inset:0;width:100%;height:100%;margin:0;aspect-ratio:auto;border:none;z-index:0}
.bl-process-step.has-image .bl-process-step-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(var(--accent-rgb),.45) 0%,rgba(0,0,0,.25) 50%,rgba(0,0,0,.05) 100%);mix-blend-mode:multiply;z-index:1;transition:opacity .4s ease}
.bl-process-step.has-image:hover .bl-process-step-overlay{opacity:0}
.bl-process-step::before{counter-increment:step;content:counter(step);width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);font-family:var(--font-b);font-size:var(--fs-sm);letter-spacing:var(--ls-normal);color:var(--accent)}
ul.bl-process>.bl-process-item>.bl-process-step::before{content:'•'}
.bl-process-step.has-image .bl-process-copy{z-index:2}
.bl-process-step.has-image .bl-process-copy h4{color:#fff}
.bl-process-step.has-image .bl-process-copy p{color:rgba(255,255,255,0.82)}
.bl-process-step.has-image .bl-process-date{color:rgba(255,255,255,0.6)}
.bl-process-step.has-image::before{z-index:2;color:#fff;border-color:rgba(255,255,255,0.4)}
.bl-process-meta{display:flex;align-items:center;gap:.45rem;margin-bottom:.35rem}
.bl-process-date{font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--muted)}
.bl-process-copy h4{font-size:var(--fs-md);letter-spacing:var(--ls-normal);text-transform:uppercase;color:var(--ink);margin:0 0 .28rem}
.bl-process-copy p{font-size:var(--fs-body);line-height:1.7;color:rgba(var(--ink-rgb),0.72);margin:0}
.bl-process-step-image{width:100%;height:100%;object-fit:cover;display:block;background:var(--surface)}
.bl-cta{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.15rem;border:1px solid var(--border);background:rgba(var(--accent-rgb),0.06)}
.bl-cta-copy{display:flex;flex-direction:column;gap:.35rem}
.bl-cta-headline{font-size:var(--fs-md);letter-spacing:var(--ls-normal);text-transform:uppercase;color:var(--ink);margin:0}
.bl-cta-body{font-size:var(--fs-body);line-height:1.7;color:rgba(var(--ink-rgb),0.72);margin:0}
.bl-cta-link{display:inline-flex;align-items:center;justify-content:center;padding:.7rem 1rem;border:1px solid var(--accent);background:var(--accent);color:var(--paper);font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:opacity .18s ease}
.bl-cta-link:hover{opacity:.85}
.bl-before-after{width:min(100%,780px);margin:0 auto;display:flex;flex-direction:column;gap:.5rem}
.bl-before-after-frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--surface);border:1px solid var(--border);touch-action:none;user-select:none}
.bl-before-after-base,.bl-before-after-top{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bl-before-after-overlay{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 calc(100% - var(--before-after-pos)) 0 0);-webkit-clip-path:inset(0 calc(100% - var(--before-after-pos)) 0 0)}
.bl-before-after-handle{
   position:absolute;
   top:50%;
   left:var(--before-after-pos);
   transform:translate(-50%,-50%);
   width:56px;
   height:180px;
   border:none;
   background:none;
   padding:0;
   cursor:ew-resize;
   z-index:2;
}
.bl-before-after-pill{display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:3px;height:160px;border-radius:2px;border:1.5px solid rgba(var(--accent-rgb),0.78);background:rgba(var(--accent-rgb),0.14);box-shadow:0 0 0 1px rgba(255,255,255,0.06) inset;pointer-events:none}
.bl-before-after-handle:focus-visible{outline:none}
.bl-before-after-handle:focus-visible .bl-before-after-pill{border-color:var(--accent);box-shadow:0 0 0 2px rgba(var(--accent-rgb),0.18)}
.bl-before-after-caption{font-size:var(--fs-xs);letter-spacing:var(--ls-normal);text-transform:uppercase;color:var(--muted)}
.bl-before-after-fallback{width:min(100%,780px)}
.bl-faq{display:flex;flex-direction:column;border-top:1px solid var(--border);max-width:520px;width:100%;margin:0 auto;padding-left:0.5rem;padding-right:0.5rem}
.bl-faq-item{border-bottom:1px solid var(--border);width:100%;box-sizing:border-box}
.bl-faq-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0;background:none;border:none;color:var(--ink);font-family:var(--font);font-size:var(--fs-md);letter-spacing:var(--ls-tight);text-align:left;cursor:pointer}
.bl-faq-icon{font-size:1rem;color:var(--accent);transition:transform .2s ease}
.bl-faq-item.open .bl-faq-icon{transform:rotate(45deg)}
.bl-faq-panel{padding:0 0 .9rem;width:100%;box-sizing:border-box}
.bl-faq-panel p{font-size:var(--fs-body);line-height:1.7;color:rgba(var(--ink-rgb),0.72);margin:0;word-break:break-word;overflow-wrap:anywhere}

/* ─────────────────────────────────────────
   PROJECT HERO HEADER
───────────────────────────────────────── */
.pp-hero{position:relative;width:calc(100% + 4rem);margin:0 -2rem 2rem -2rem;min-height:320px;background-size:cover;background-position:center;display:flex;align-items:flex-end;overflow:hidden}
.pp-hero-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(var(--accent-rgb),.45) 0%,rgba(0,0,0,.25) 50%,rgba(0,0,0,.05) 100%);mix-blend-mode:multiply}
.pp-hero-content{position:relative;z-index:1;width:100%;padding:2rem 2.5rem 1.8rem;display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem}
.pp-hero-left{flex:1;min-width:0}
.pp-hero-title{font-family:var(--font-hero);font-size:clamp(2.2rem,5vw,4rem);font-weight:400;color:#fff;letter-spacing:.02em;text-transform:uppercase;margin:0 0 .45rem;line-height:.95;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.pp-hero-meta{display:flex;flex-wrap:wrap;gap:.4rem}
.pp-hero-tag{font-family:var(--font-b);font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:rgba(255,255,255,.9);background:rgba(var(--accent-rgb),.18);border:1px solid rgba(var(--accent-rgb),.35);padding:.35rem .9rem;border-radius:2px;display:inline-flex;align-items:center}
.pp-hero-actions{position:absolute;top:1.2rem;right:1.5rem;z-index:2;display:flex;gap:.75rem;align-items:center}
.pp-hero-btn{font-family:var(--font-b);font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;background:rgba(var(--accent-rgb),.18);color:rgba(255,255,255,.9);border:1px solid rgba(var(--accent-rgb),.35);padding:.35rem .9rem;border-radius:2px;cursor:pointer;transition:background .2s,color .2s,border-color .2s;display:inline-flex;align-items:center;gap:.35rem}
.pp-hero-btn:hover{background:rgba(var(--accent-rgb),.35);color:#fff;border-color:rgba(var(--accent-rgb),.5)}
.pp-hero-btn i{font-size:var(--fs-md);vertical-align:-.1em}
.pp-like-btn{background:none;border:none;padding:0;color:rgba(255,255,255,.75);gap:.3rem;cursor:pointer}
.pp-like-btn:hover{background:none;color:#fff}
.pp-like-btn.liked{background:none;border:none;color:#ff6b6b}
#pp-like-icon{font-size:1rem;line-height:1;transition:transform .2s}
.pp-hero-btn:hover #pp-like-icon{transform:scale(1.15)}
#pp-like-count{font-size:var(--fs-xs);letter-spacing:var(--ls-normal)}

/* ─────────────────────────────────────────
   DARK FROST (theme.panelStyle = 'dark'): content text on dark panels
───────────────────────────────────────── */
/* filter buttons */
body.panel-frost .fb{background:rgba(var(--paper-rgb),0.07);color:rgba(var(--paper-rgb),0.45);border-color:rgba(var(--paper-rgb),0.12)}
body.panel-frost .fb.active,body.panel-frost .fb:hover{background:rgba(var(--paper-rgb),0.18);color:var(--paper);border-color:rgba(var(--paper-rgb),0.35)}
/* work card text */
body.panel-frost .wct{color:var(--paper)}
body.panel-frost .wcty{color:rgba(var(--paper-rgb),0.45)}
body.panel-frost .wc-quote .q-text,body.panel-frost .post-dek,body.panel-frost .post-article h2,body.panel-frost .post-article h3,body.panel-frost .post-article blockquote{color:var(--paper)}
body.panel-frost .post-article{color:rgba(var(--paper-rgb),.75)}
body.panel-frost .post-origin,body.panel-frost .more-head{color:rgba(var(--paper-rgb),.45)}
body.panel-frost .more-work{border-top-color:rgba(var(--paper-rgb),.1)}
/* block text inside panels */
body.panel-frost .panel .bl-text-sm,body.panel-frost .ppbody .bl-text-sm{color:rgba(var(--paper-rgb),0.5)}
body.panel-frost .panel .bl-text-md,body.panel-frost .ppbody .bl-text-md{color:rgba(var(--paper-rgb),0.8)}
body.panel-frost .panel .bl-text-lg,body.panel-frost .ppbody .bl-text-lg{color:var(--accent)}
body.panel-frost .panel .bl-quote p,body.panel-frost .ppbody .bl-quote p{color:var(--paper)}
body.panel-frost .panel .bl-stats .sc,body.panel-frost .ppbody .bl-stats .sc{background:rgba(var(--paper-rgb),0.06)}
body.panel-frost .panel .bl-stats .sl,body.panel-frost .ppbody .bl-stats .sl{color:rgba(var(--paper-rgb),0.45)}
body.panel-frost .panel .bl-callout,body.panel-frost .ppbody .bl-callout{background:rgba(var(--accent-rgb),0.1);border-color:rgba(var(--accent-rgb),0.25)}
body.panel-frost .panel .bl-callout .bl-callout-title,body.panel-frost .ppbody .bl-callout .bl-callout-title{color:var(--paper)}
body.panel-frost .panel .bl-callout .bl-callout-body,body.panel-frost .ppbody .bl-callout .bl-callout-body{color:rgba(var(--paper-rgb),0.75)}
body.panel-frost .panel .bl-process-step,body.panel-frost .ppbody .bl-process-step{background:rgba(var(--accent-rgb),0.08);border-color:rgba(var(--paper-rgb),0.1)}
body.panel-frost .panel .bl-process-copy h4,body.panel-frost .ppbody .bl-process-copy h4{color:var(--paper)}
body.panel-frost .panel .bl-process-copy p,body.panel-frost .ppbody .bl-process-copy p{color:rgba(var(--paper-rgb),0.72)}
body.panel-frost .panel .bl-cta,body.panel-frost .ppbody .bl-cta{background:rgba(var(--accent-rgb),0.08);border-color:rgba(var(--paper-rgb),0.1)}
body.panel-frost .panel .bl-cta-headline,body.panel-frost .ppbody .bl-cta-headline{color:var(--paper)}
body.panel-frost .panel .bl-cta-body,body.panel-frost .ppbody .bl-cta-body{color:rgba(var(--paper-rgb),0.72)}
body.panel-frost .panel .bl-divider,body.panel-frost .ppbody .bl-divider{background:rgba(var(--paper-rgb),0.1)}
body.panel-frost .panel .bl-faq,body.panel-frost .ppbody .bl-faq{border-top-color:rgba(var(--paper-rgb),0.12)}
body.panel-frost .panel .bl-faq-item,body.panel-frost .ppbody .bl-faq-item{border-bottom-color:rgba(var(--paper-rgb),0.12)}
body.panel-frost .panel .bl-faq-trigger,body.panel-frost .ppbody .bl-faq-trigger{color:var(--paper)}
body.panel-frost .panel .bl-faq-panel p,body.panel-frost .ppbody .bl-faq-panel p{color:rgba(var(--paper-rgb),0.72)}

/* PROCESS STEPS: continuing text */
.bl-process-copy p+p{margin-top:.6rem}
/* text that continues a step outside its box lines up with the text inside it: border + padding + number column + gap */
/* one list item = its box plus any text that continues it; a thin strip down the right edge shows they belong together */
.bl-process-item{position:relative;display:flex;flex-direction:column;gap:.9rem;padding-right:.45rem}
.bl-process-item::after{content:'';position:absolute;top:0;right:0;bottom:0;width:3px;background:rgba(var(--accent-rgb),.7)}
/* continuing text lines up with the text inside the box: border + padding + number column + gap */
.bl-process-item>p{margin:0;font-size:var(--fs-body);line-height:1.7;padding:0 calc(1px + .85rem) 0 calc(1px + .85rem + 38px + .7rem)}
.post-article .bl-process-copy strong{color:var(--accent)}