/* v5: frosted panels that slide in, louder titles, living characters, attention transition, pulse */

/* ---------- frosted panels (index sections) ---------- */
.has-stage .sec{padding:48px 24px;perspective:1400px}
.has-stage .sec[style*="padding-top:0"]{padding-top:8px !important}
.has-stage .sec > .wrap{position:relative;padding:48px 56px 52px;border:1px solid var(--line-strong);background:var(--surface-100)}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){.has-stage .sec > .wrap{background:color-mix(in srgb,var(--surface-100) 62%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1)}}
.has-stage .sec > .wrap::after{content:"";position:absolute;inset:6px;border:1px solid var(--line);pointer-events:none}
/* slide in from the left or the right, with a little overshoot */
.has-stage .sec > .wrap{opacity:0;transform:translate3d(-90px,24px,0) rotateY(7deg);transition:opacity .6s ease,transform 1.1s cubic-bezier(.2,1.25,.3,1)}
.has-stage .sec:nth-of-type(even) > .wrap{transform:translate3d(90px,24px,0) rotateY(-7deg)}
.has-stage .sec.in > .wrap{opacity:1;transform:none}
/* titles */
.has-stage .sec h2.t{font-size:clamp(30px,3.4vw,46px);line-height:1.22;font-weight:400;letter-spacing:-.03em;margin:0 0 28px}
.has-stage .sec h2.t::after{content:"";display:block;width:56px;height:3px;background:var(--clay);margin-top:18px}
.has-stage .eyebrow{color:var(--ink);font-weight:500}
.has-stage .eyebrow .ic{color:var(--clay-text)}
.has-stage .lead{font-size:16px}
@media (max-width:860px){
  .has-stage .sec{padding:28px 8px;perspective:900px}
  .has-stage .sec > .wrap{padding:28px 16px 32px}
  .has-stage .sec > .wrap{transform:translate3d(-40px,20px,0) rotateY(5deg)}
  .has-stage .sec:nth-of-type(even) > .wrap{transform:translate3d(40px,20px,0) rotateY(-5deg)}
  .has-stage .sec h2.t{font-size:clamp(26px,7.4vw,34px)}
  .has-stage .pillars{margin-left:-16px;margin-right:-16px}
}

/* ---------- living characters ---------- */
.alive{perspective:700px}
.alive .cw{display:inline-block;white-space:nowrap}
.alive .ch{display:inline-block;will-change:transform;transform-style:preserve-3d;backface-visibility:hidden}
.shard{position:fixed;z-index:60;pointer-events:none;display:inline-block;text-align:left;white-space:nowrap;line-height:1}

/* ---------- pulse (sub pages) ---------- */
.fx-pulse,.fx-fog{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.fx-fog{image-rendering:auto;filter:blur(18px) saturate(1.1);transform:scale(1.08)}
.has-pulse .nav,.has-pulse main,.has-pulse .ft{position:relative;z-index:1}

/* ---------- lyrics (time-limited compression) ---------- */
.lyr{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .6s} /* behind nav/main/footer (z-index 1), above the terrain canvas: the words live in the background space */

/* ---------- materials: each panel is a different pane ---------- */
.has-stage .sec > .wrap{--panel:var(--surface-100)}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){.has-stage .sec > .wrap{background:color-mix(in srgb,var(--panel) 62%,transparent)}}
.has-stage .sec > .wrap > *{position:relative;z-index:1}
:root{--water:#4a7a84;--tank-algae:#66735c}
@media (prefers-color-scheme:dark){:root{--water:#6f9aa3;--tank-algae:#8b967d}}
/* Idea: a cool, clean pane */
#idea > .wrap{--panel:color-mix(in srgb,var(--surface-100) 93%,var(--slate))}
/* Worry Factor: an aged reading pane; the terrain lives behind its water. */
#signs > .wrap{--tank-pane:color-mix(in srgb,var(--surface-100) 92%,var(--tank-algae));overflow:hidden;background:color-mix(in srgb,var(--tank-pane) 9%,transparent) !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;border-color:color-mix(in srgb,var(--line-strong) 68%,var(--surface-100))}
#signs > .wrap::after{display:none}
#signs > .wrap{border-color:transparent}
#signs > .wrap > .tank-water{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,color-mix(in srgb,var(--tank-pane) 12%,transparent),color-mix(in srgb,var(--tank-pane) 20%,transparent) 46%,color-mix(in srgb,var(--tank-pane) 28%,transparent));-webkit-backdrop-filter:blur(5px) saturate(.6);backdrop-filter:blur(5px) saturate(.6);will-change:clip-path}
#signs > .wrap > .tank-water::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 0% 74%,color-mix(in srgb,var(--tank-algae) 9%,transparent),transparent 42%),radial-gradient(ellipse at 100% 95%,color-mix(in srgb,var(--tank-algae) 7%,transparent),transparent 30%),linear-gradient(104deg,transparent 18%,color-mix(in srgb,var(--surface-100) 9%,transparent) 29%,transparent 43%)}
#signs > .wrap > .tank-cv{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#signs > .wrap > .tank-front{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;-webkit-backdrop-filter:blur(.35px) saturate(.86);backdrop-filter:blur(.35px) saturate(.86)}
#signs.sec > .wrap > *:not(.tank-water):not(.tank-cv){text-shadow:none}
#signs .sg{background:color-mix(in srgb,var(--tank-pane) 87%,transparent);backdrop-filter:blur(12px);box-shadow:0 9px 18px rgba(2,12,9,.15),inset 1px 0 rgba(195,214,192,.10)}
#signs .sg.tank-card-body{backdrop-filter:none;-webkit-backdrop-filter:none;transition:none!important;transform-origin:50% 50%;backface-visibility:visible;background:color-mix(in srgb,var(--tank-pane) 94%,var(--water));border:1px solid color-mix(in srgb,var(--ink-soft) 25%,var(--tank-pane));border-top:3px solid var(--clay);box-shadow:1px 1px 0 color-mix(in srgb,var(--ink-soft) 35%,var(--tank-pane)),2px 2px 0 color-mix(in srgb,var(--ink-soft) 25%,var(--tank-pane)),3px 3px 2px rgba(4,17,14,.22);will-change:transform;position:relative}
#signs .sg.tank-card-body:nth-child(2){border-top-color:var(--slate)}
#signs .sg.tank-card-body{background:color-mix(in srgb,var(--surface-100) 96%,var(--slate));border-radius:5px;overflow:hidden}
#signs .sg.tank-card-body > *{opacity:var(--card-ink,1)}
#signs .sg.tank-card-body::before{content:"edgesense";position:absolute;inset:14px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);font-family:var(--font-mono);letter-spacing:.16em;font-size:22px;color:var(--ink-soft);background:repeating-linear-gradient(35deg,transparent 0 14px,color-mix(in srgb,var(--slate) 7%,transparent) 15px 16px),radial-gradient(ellipse at center,color-mix(in srgb,var(--slate) 10%,var(--surface-100)),var(--surface-100));opacity:var(--card-back,0);transform:scaleX(-1);pointer-events:none}
#signs .sg.tank-card-body::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(var(--card-gloss-angle,112deg),transparent 12%,rgba(223,233,218,.015) 30%,rgba(242,247,232,.26) 44%,rgba(242,247,232,.36) 46%,rgba(242,247,232,.04) 50%,transparent 66%);background-size:230% 140%;background-position:var(--card-gloss-x,50%) 50%;box-shadow:inset 0 0 0 1px rgba(222,233,212,.18),inset 0 -2px 5px rgba(8,19,12,.22)}
#signs .signs{gap:12px;background:none;border:0}
#signs > .wrap{padding-bottom:150px}
#signs .lead,#signs .note{text-shadow:0 1px 6px var(--surface-100)}
@media(max-width:860px){#signs > .wrap{padding-bottom:130px}#signs .signs{gap:16px}}
/* Compact printed cards: preserve type size and leave water visible around them. */
#signs .signs{align-items:start}
#signs .sg{padding:16px 20px 18px}
#signs .sg .en{margin-bottom:4px}
#signs .sg h3{margin-bottom:10px}
#signs .sg .rows li{padding:9px 0;column-gap:8px}
@media(max-width:860px){
  #signs .signs{gap:32px;justify-items:center}
  #signs .sg{width:calc(100% - 40px);padding:12px 12px 14px}
  #signs .sg h3{margin-bottom:8px}
  #signs .sg .rows li{grid-template-columns:12px minmax(0,1fr);gap:2px 6px;padding:6px 0;line-height:1.5;align-items:start}
}
#signs .lab{background:color-mix(in srgb,var(--tank-pane) 72%,transparent)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#signs > .wrap > .tank-water{background:color-mix(in srgb,var(--tank-pane) 92%,transparent)}}
/* Append within v5.css's materials section, after the #signs material rules.
   The existing .signs grid reserves the original reading positions. */
#signs > .wrap.tank-cards-immersing .signs{isolation:isolate}
#signs > .wrap .sg.tank-card-entering{transition:none!important;backface-visibility:hidden}
#signs > .wrap > .tank-entry-bubble{position:absolute;z-index:2;pointer-events:none;border:1px solid color-mix(in srgb,var(--ink-soft) 34%,transparent);border-top-color:color-mix(in srgb,var(--surface-100) 72%,transparent);border-radius:50%;opacity:0}
@media(prefers-reduced-motion:reduce){
  #signs > .wrap .sg.tank-card-entering{transform:none!important;opacity:1!important}
  #signs > .wrap > .tank-entry-bubble{display:none}
}

/* Why us: recessed mineral frame, a fine gasket and a lightly weathered pane. */
#strength > .wrap{--panel:color-mix(in srgb,var(--surface-100) 94%,var(--slate));border:14px solid var(--ink-mute);border-image:linear-gradient(125deg,color-mix(in srgb,var(--ink-mute) 38%,var(--surface-100)),var(--ink-mute) 28%,color-mix(in srgb,var(--ink-mute) 70%,var(--surface-100)) 54%,var(--ink-mute) 78%,color-mix(in srgb,var(--ink-mute) 70%,var(--ink))) 1;outline:1px solid var(--line-strong);outline-offset:-15px;background:color-mix(in srgb,var(--panel) 78%,transparent)}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){#strength > .wrap{background:color-mix(in srgb,var(--panel) 61%,transparent);-webkit-backdrop-filter:blur(10px) saturate(.65);backdrop-filter:blur(10px) saturate(.65)}}
#strength > .wrap::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(112deg,transparent 29%,color-mix(in srgb,var(--surface-100) 14%,transparent) 35%,transparent 43%,transparent 79%,color-mix(in srgb,var(--surface-100) 7%,transparent) 83%,transparent 87%),linear-gradient(180deg,color-mix(in srgb,var(--line-strong) 8%,transparent),transparent 14%,transparent 94%,color-mix(in srgb,var(--line-strong) 8%,transparent))}
#strength > .wrap::after{inset:3px;border:1px solid color-mix(in srgb,var(--line-strong) 72%,var(--surface-100));border-top-width:2px;border-left-width:2px}
@media(max-width:860px){.has-stage #strength.sec.in > .wrap{transform:none}#signs > .wrap > .tank-water{-webkit-backdrop-filter:blur(4px) saturate(.6);backdrop-filter:blur(4px) saturate(.6)}}
/* Supplied hole-free concrete, a shallow reveal and frosted glazing. */
#strength > .wrap{--rim:63px;border:var(--rim) solid transparent;border-image:none;outline:none;padding:32px 32px 0;background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none}
#strength > .wrap::before,#strength > .wrap::after{display:none}
#strength > .wrap > .window-street{position:absolute;left:14px;top:14px;width:calc(100% - 28px);height:calc(var(--window-depth,400px) - 28px);z-index:0;pointer-events:none;filter:blur(13px) saturate(.45);opacity:.9;clip-path:inset(0)}
#strength > .wrap > .window-glazing{position:absolute;left:12px;top:12px;width:calc(100% - 24px);height:calc(var(--window-depth,400px) - 24px);z-index:0;pointer-events:none;background:linear-gradient(113deg,transparent 20%,color-mix(in srgb,var(--surface-100) 22%,transparent) 35%,transparent 50%),color-mix(in srgb,var(--panel) 58%,transparent);-webkit-backdrop-filter:blur(20px) saturate(.45);backdrop-filter:blur(20px) saturate(.45);border:1px solid color-mix(in srgb,var(--ink-soft) 36%,transparent);box-shadow:inset 5px 8px 18px rgba(0,0,0,.27),inset -2px -2px 3px rgba(198,207,191,.18)}
#strength .window-glazing::before{content:"";position:absolute;inset:0;opacity:.32;background-image:repeating-linear-gradient(45deg,transparent 0 24px,rgba(31,39,33,.4) 24px 24.8px,rgba(199,207,193,.2) 24.8px 25.4px,transparent 25.4px 26px),repeating-linear-gradient(-45deg,transparent 0 24px,rgba(31,39,33,.4) 24px 24.8px,rgba(199,207,193,.2) 24.8px 25.4px,transparent 25.4px 26px);filter:blur(.35px)}
#strength .window-glazing::after{content:"";position:absolute;inset:0;opacity:.12;background-image:url('/assets/aqua/window-glass-relief.svg?v=1');background-size:156px 156px;mix-blend-mode:soft-light}
#strength > .wrap > .window-concrete{position:absolute;left:calc(-1 * var(--rim));top:calc(-1 * var(--rim));width:calc(100% + 2 * var(--rim));height:calc(var(--window-depth,400px) + 2 * var(--rim));z-index:2;pointer-events:none;filter:drop-shadow(2px 5px 7px rgba(0,0,0,.15))}
#strength .layers{margin-top:calc(var(--rim) + 68px);border-top:0}
#strength .layer h3{text-wrap:balance}
#strength .layer{background:color-mix(in srgb,var(--panel) 70%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
@media(min-width:861px){#strength .layers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-left:-31.5px;margin-right:-31.5px}#strength .layer{display:block;padding:20px;border:1px solid var(--line)}#strength .lbar{width:48px;margin-bottom:18px}#strength .layer h3{font-size:18px;line-height:1.6}#strength .layer p{font-size:14px}#strength .lead{margin-bottom:0}}
@media(max-width:860px){#strength > .wrap{--rim:28.5px;padding:28px 18px 0}#strength > .wrap > .window-street{filter:blur(10px) saturate(.45)}#strength h3{font-size:18px;line-height:1.5}#strength .layers{margin-left:-28.5px;margin-right:-28.5px;gap:14px}#strength .layer{grid-template-columns:1fr;gap:12px;padding:20px;border:1px solid var(--line)}#strength .lbar{width:36px}#strength .hl span{display:inline}#strength .lead{font-size:15px;margin-bottom:0}#strength h2.t{font-size:27px;line-height:1.45}}
/* Business: warm pane */
#business > .wrap{--panel:color-mix(in srgb,var(--surface-100) 95%,var(--clay))}
/* Works: a plain pane with a real sticker on it */
#works > .wrap{overflow:hidden}
#works > .wrap > .sticker{position:absolute;top:-18px;right:34px;z-index:3;width:168px;padding:10px 12px 11px;background:#f3f1e9;color:#1a1a18;border:1px solid #c9c5b8;transform:rotate(-5deg);font-family:var(--font-mono);letter-spacing:.08em;display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center;background-image:linear-gradient(115deg,rgba(255,255,255,.55),rgba(255,255,255,0) 40%,rgba(0,0,0,.035) 70%,rgba(0,0,0,.08))}
.sticker::before{content:"";position:absolute;right:-1px;bottom:-1px;width:22px;height:22px;background:linear-gradient(225deg,var(--surface-100) 50%,#e3e0d6 50%,#cfcbbf 56%,#f3f1e9 62%)}
.sticker .stk-t{font-size:12px;font-weight:500;letter-spacing:.22em}
.sticker .stk-j{font-family:var(--font-sans);font-size:11px;color:#5a5a55;grid-column:1}
.sticker .stk-bar{grid-column:1/-1;height:16px;margin:4px 0 2px;background:repeating-linear-gradient(90deg,#1a1a18 0 1px,transparent 1px 3px,#1a1a18 3px 5px,transparent 5px 6px,#1a1a18 6px 7px,transparent 7px 10px,#1a1a18 10px 13px,transparent 13px 14px)}
.sticker .stk-d{grid-column:1/-1;font-size:8px;color:#5a5a55;letter-spacing:.12em}
.sticker .stk-ok{grid-column:2;grid-row:1/3;width:34px;height:34px;border:1.5px solid var(--clay);color:var(--clay);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;transform:rotate(12deg);opacity:.85;mix-blend-mode:multiply}
/* Principles: a thin slice of obsidian — dark glass, conchoidal fracture, pale text */
#principles > .wrap{--panel:#0a0a0a;--ink:#fafaf7;--ink-soft:#aeaca5;--ink-mute:#5a5a55;--line:#2a2a26;--line-strong:#6e6c66;--surface-100:#0a0a0a;--surface-200:#161614;--clay-text:#c97043;color:var(--ink);color-scheme:dark}
#principles > .wrap{background:transparent!important;border-color:transparent;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding-top:62px;padding-bottom:76px;isolation:isolate}
#principles > .wrap::before{content:"";position:absolute;inset:8px 8px 18px;z-index:0;pointer-events:none;background:linear-gradient(rgba(4,5,6,.68),rgba(4,5,6,.68)),url('/assets/aqua/obsidian/supplied-color-v1.jpg?v=1') center/cover;clip-path:polygon(1% 0,28% .7%,55% 0,83% 1%,99% .3%,100% 24%,99.4% 59%,100% 99%,72% 98.8%,43% 100%,1% 99%,0 61%,.7% 29%);box-shadow:inset 0 -10px 6px #090909}
#principles > .wrap::after{display:none}
#principles > .wrap.obsidian-ready::before{visibility:hidden}
#principles > .wrap > .obsidian-surface{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;filter:drop-shadow(5px 13px 11px rgba(0,0,0,.45))}
#principles > .wrap:not(.obsidian-ready) > .obsidian-surface{visibility:hidden}
#principles > .wrap .principles{background:transparent;border-color:rgba(200,205,199,.13);gap:0}
#principles > .wrap .principles > div{background:linear-gradient(120deg,rgba(6,7,8,.86),rgba(6,7,8,.72));border:1px solid rgba(190,196,192,.10)}
#principles > .wrap .principles .ex{background:none}
#principles > .wrap > .eyebrow,#principles > .wrap > h2{text-shadow:0 2px 12px #000,0 1px 3px #000}
@media(max-width:860px){#principles > .wrap{padding:40px 25px 58px}#principles > .wrap .principles > div{padding:24px 18px}}
/* Process: graph paper under the glass */
#process > .wrap{--panel:color-mix(in srgb,var(--surface-100) 94%,#b89a68);background-image:linear-gradient(color-mix(in srgb,var(--line) 70%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--line) 70%,transparent) 1px,transparent 1px);background-size:24px 24px,24px 24px;background-position:8px 8px}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){#process > .wrap{background-color:color-mix(in srgb,var(--panel) 62%,transparent)}}
@media (max-width:860px){#works > .wrap > .sticker{top:auto;bottom:-14px;right:10px;width:138px;padding:8px 10px 9px;transform:rotate(4deg)}}

/* ---------- throwing the cards ---------- */
.has-stage .pillar:not([aria-hidden]){cursor:grab}
.has-stage .pillar.dragging{cursor:grabbing;transition:none !important;z-index:9 !important}
.has-stage .pillar.thrown{transition:transform .42s cubic-bezier(.3,.7,.5,1) !important;z-index:9 !important}
.has-stage .pillar.swoop{transition:transform .9s cubic-bezier(.2,1.1,.3,1) !important}
.has-stage .pillars:focus-visible{outline:2px solid var(--focus);outline-offset:6px}

/* ---------- the works book: an e-paper device inside the cover ---------- */
.page-right.epd{--epd:#dedbd2;--epd-bezel:#cbc8bf;--epd-ink:#232320;background:var(--epd-bezel);border-color:#aaa79e;padding:0;overflow:hidden}
.page-right.epd::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.35),rgba(255,255,255,0) 40%,rgba(0,0,0,.06) 100%);pointer-events:none}
.epd-bar{position:absolute;left:18px;right:18px;top:11px;font:400 9px/1 var(--font-mono);letter-spacing:.16em;color:#6a6963;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.epd-screen{position:absolute;left:14px;right:14px;top:30px;bottom:52px;background:var(--epd);border:1px solid #b5b2a9;overflow:hidden;color:var(--epd-ink);
  --ink:var(--epd-ink);--ink-soft:#5c5b55;--ink-mute:#8e8c84;--line:#c3c0b6;--line-strong:#8e8b83;--surface-100:var(--epd);--surface-200:#d5d2c9;--clay:#4a4a46;--clay-text:#3d3d3a;--slate-text:#4a4a46;--focus:var(--epd-ink);color-scheme:light;
  background-image:radial-gradient(rgba(0,0,0,.06) .5px,transparent .7px);background-size:3px 3px;transition:filter .06s linear}
.epd-screen.inv{filter:invert(1) contrast(1.15)}
.epd-grain{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.22;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .48 0 0 0 .55 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}
.epd-noise{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;opacity:0;image-rendering:pixelated;transition:opacity .35s}
.epd-ghost{position:absolute;inset:0;z-index:1;padding:32px 36px 72px;opacity:0;transition:none;pointer-events:none;filter:grayscale(1) contrast(1.3)}
.epd .leaf{inset:0;transform:none !important;transition:none;visibility:hidden;z-index:2}
.epd .leaf.current{visibility:visible}
.epd .leaf .face.front{border:0;background:transparent;color:var(--epd-ink)}
.epd .leaf .face.front::after{display:none}
.epd .leaf .face.back{display:none}
.epd .leaf .ech{transition:color var(--t,.8s) ease var(--d,0s),filter var(--t,.8s) ease var(--d,0s),opacity var(--t,.8s) ease var(--d,0s)}
.epd .leaf.blank .ech{color:var(--epd) !important;filter:blur(1px);opacity:.5}
.epd .leaf.blank .tag .ic,.epd .leaf.blank .lbar{opacity:0;transition:opacity .9s .4s}
.epd .leaf .tag .ic{transition:opacity .9s .4s}
.epd .tool.on-leaf h3{font-weight:400}
.epd .tool.on-leaf .go,.epd .tool.on-leaf .wip{color:var(--epd-ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.epd .folio{color:#8e8c84}
.epd .bk-nav{left:16px;bottom:12px;color:#6a6963}
.epd .bk-nav .es-btn{background:#d9d6cd;border-color:#a8a59c;color:var(--epd-ink)}
.epd .bk-nav .es-btn:disabled{background:#d2cfc6;color:#a8a59c}
@media (prefers-reduced-motion:reduce){.epd .leaf .ech{transition:none}.epd-screen{transition:none}}
@media (max-width:860px){.epd-screen{left:10px;right:10px;top:26px;bottom:50px}.epd-bar{left:14px;right:14px;top:9px}}

#works > .wrap > .sticker.img{background:none;border:0;padding:0;width:140px;display:block;transform:rotate(-6deg);top:22px;right:26px}
#works > .wrap > .sticker.img::before{display:none}
#works > .wrap > .sticker.img img{display:block;width:100%;height:auto}
@media (max-width:860px){#works > .wrap > .sticker.img{width:92px;top:auto;bottom:18px;right:14px;transform:rotate(5deg)}}

/* ---------- sheets of paper: driven by the simulation, not by transitions ---------- */
.has-stage .pillar{transition:none !important;transform-origin:50% 50%;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none}
.has-stage .pillar.dragging{cursor:grabbing}
.has-stage .pillar img{-webkit-user-drag:none;user-drag:none}
.deck-index li.tidy button{color:var(--ink-mute)}
.deck-index li.tidy button:hover{color:var(--ink)}
@media (max-width:860px){.has-stage .pillar{cursor:auto;touch-action:pan-x pan-y}.deck-index li.tidy{display:none}}

/* the sheets may slide over the whole screen: the business pane paints above its neighbours */
.has-stage #business > .wrap{z-index:6}
.has-stage #business > .wrap > *{overflow:visible}