/* ==========================================================================
   Syntropise · The Cabinet · Case file No. 1: Tim Johns
   An object's provenance file, opened on the curators' desk: a buff folder
   with a coral tab, the front sheet typed up, interview cards clipped in,
   three divider sections, and Exhibit A, a working model of wu wei.
   Everything is prefixed cf- (the file) or ww- (the model).
   ========================================================================== */

.cf-hero,.cf-story,.cf-advice,.cf-close{--buff:#e8dcc3;--buff-2:#dccdae;--typed:'Courier Prime',ui-monospace,'SFMono-Regular',Menlo,monospace}
.cf-typed{font-family:var(--typed);font-size:.82rem;letter-spacing:.01em;color:var(--ink-2)}
.cf-paused *,.cf-paused *::before,.cf-paused *::after{animation-play-state:paused!important}

/* ===================== HERO: the file on the desk ===================== */
@media (min-width:981px){.cf-hero{grid-template-columns:minmax(300px,470px) minmax(0,1fr)}}
.cf-hero .h1{max-width:12ch}
.cf-hero .phero-vis{min-height:0;container-type:inline-size;width:100%}
.cf-desk{--P:min(340px,calc(50cqi - 30px));position:relative;width:100%;max-width:800px;padding:46px 0 70px;display:grid;justify-items:center;overflow:hidden}

/* the blotter: coral leather, with corner pockets and an old coffee ring */
.cf-blotter{position:absolute;inset:14px 2px 34px;background:var(--grain-c),var(--coral-2);border:2.5px solid var(--ink);border-radius:8px;box-shadow:5px 6px 0 var(--ink)}
.cf-blotter::after{content:"";position:absolute;inset:8px;border:1.5px dashed rgba(20,19,17,.35);border-radius:5px;pointer-events:none}
.cf-corner{position:absolute;width:74px;height:74px;background:linear-gradient(135deg,#e5776f 0 47%,var(--ink) 47% 51%,transparent 51%);pointer-events:none;z-index:1}
.cf-corner.tl{left:-1px;top:-1px;border-radius:6px 0 0 0}
.cf-corner.tr{right:-1px;top:-1px;transform:scaleX(-1);border-radius:6px 0 0 0}
.cf-corner.bl{left:-1px;bottom:-1px;transform:scaleY(-1);border-radius:6px 0 0 0}
.cf-corner.br{right:-1px;bottom:-1px;transform:scale(-1);border-radius:6px 0 0 0}
.cf-ring{position:absolute;right:7%;top:9%;width:92px;height:92px;border-radius:50%;background:radial-gradient(circle,transparent 0 55%,rgba(122,40,34,.32) 56% 60%,transparent 61% 64%,rgba(122,40,34,.18) 65% 67%,transparent 68%);transform:rotate(18deg) scaleY(.94)}
.cf-pencil{position:absolute;z-index:1;left:3%;bottom:20px;width:min(300px,52%);height:auto;transform:rotate(-6deg);overflow:visible;pointer-events:none}

/* the folder: two panels' worth of desk, the cover hinged on the spine */
.cf-file{position:relative;z-index:2;width:calc(var(--P) * 2);perspective:2400px;transform:rotate(-1.4deg);margin-top:8px}
.cf-panel{position:relative;width:var(--P);margin-left:var(--P);transform-style:preserve-3d}
.cf-board{position:absolute;inset:0;background:var(--grain),var(--buff);border:2.5px solid var(--ink);border-radius:2px 9px 9px 2px;box-shadow:6px 7px 0 var(--ink)}
.cf-board::after{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;background:repeating-linear-gradient(180deg,transparent 0 9px,rgba(20,19,17,.18) 9px 10px);border-right:1.5px solid rgba(20,19,17,.4)}
.cf-tab{position:absolute;z-index:1;top:-31px;right:20px;height:33px;display:flex;align-items:center;padding:0 12px 2px;background:var(--grain-c),var(--coral-2);border:2.5px solid var(--ink);border-bottom:0;border-radius:9px 9px 0 0;cursor:pointer;transition:transform .45s var(--spring)}
.cf-tab:hover{transform:translateY(-3px)}
.cf-tab-in{display:inline-flex;align-items:baseline;gap:7px;padding:1px 8px 2px;background:#fbf9f4;border:1.5px solid var(--ink);font-family:var(--typed);font-size:.8rem;line-height:1.2;white-space:nowrap}
.cf-tab-in b{font-weight:400;color:var(--coral-ink)}

/* the front sheet */
.cf-sheet{position:relative;margin:14px 14px 16px 22px;padding:16px 16px 14px 18px;background:#fbf9f4;background-image:var(--grain);border:1.5px solid var(--ink);box-shadow:2px 3px 0 rgba(20,19,17,.22);container-type:inline-size}
.cf-sh-head{display:flex;align-items:center;gap:7px;padding-bottom:9px;margin-bottom:4px;border-bottom:2px solid var(--ink);font-size:.62rem;font-weight:640;letter-spacing:.24em;text-transform:uppercase}
.cf-sh-head .mark{width:12px;height:14px}
.cf-sh-no{margin-left:auto;font-family:var(--typed);font-size:.82rem;font-weight:400;letter-spacing:0;text-transform:none}
.cf-sh-no b{font-weight:400;color:var(--coral-ink)}
.cf-photo{position:absolute;z-index:2;right:12px;top:62px;width:31cqi;max-width:108px;margin:0;transform:rotate(3deg);transform-origin:50% -6px;transition:transform .9s var(--spring)}
.cf-photo:hover{transform:rotate(-2deg)}
.cf-ph{display:block;aspect-ratio:4/5;border:5px solid #fbf9f4;outline:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--coral-2)}
.cf-ph img{object-position:48% 30%;transform:scale(1.12);transform-origin:50% 36%}
.cf-clip{position:absolute;z-index:3;left:18%;top:-21px;width:16px;height:auto;overflow:visible;transform:rotate(-4deg)}
.cf-fields{margin:0}
.cf-f{display:grid;gap:1px;padding:7px 0 6px;border-bottom:1.5px dotted rgba(20,19,17,.45)}
.cf-f-who{padding-right:calc(min(31cqi,108px) + 12px)}
.cf-f dt{font-size:.58rem;font-weight:660;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.cf-f dd{margin:0;min-height:1.25em;font-family:var(--typed);font-size:clamp(.86rem,4.1cqi,.98rem);line-height:1.25;color:var(--ink)}
.cf-f:nth-child(n+3) dd{color:#211f1b}
.cf-val{position:relative}
.cf-gh{visibility:hidden}
.cf-val .cf-ty{position:absolute;left:0;top:0;right:0}
.cf-ty.typing::after{content:"";display:inline-block;width:.5em;height:1.05em;margin-left:1px;vertical-align:-.15em;background:var(--coral-2);animation:cfCaret .7s steps(1) infinite}
@keyframes cfCaret{50%{opacity:0}}
.cf-filed{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin-top:11px;font-size:.58rem;font-weight:640;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.cf-filed i{font-family:var(--serif);font-style:italic;font-weight:440;font-size:1.32rem;letter-spacing:0;text-transform:none;color:var(--coral-ink);transform:rotate(-3deg);display:inline-block}
.cf-status{display:flex;align-items:baseline;gap:8px;margin-top:2px;font-size:.58rem;font-weight:640;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.cf-status b{font-family:var(--typed);font-size:.86rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--coral-ink)}
.cf-stamp{position:absolute;z-index:3;right:min(30cqi,104px);top:178px;display:grid;justify-items:center;padding:4px 10px 3px;border:3px double var(--coral-2);border-radius:5px;color:var(--coral-2);transform:rotate(-12deg);opacity:.92;pointer-events:none;-webkit-mask:var(--speck) 0 0/120px 120px;mask:var(--speck) 0 0/120px 120px}
.cf-stamp b{font-size:.82rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;line-height:1.05}
.cf-stamp small{font-size:.6rem;font-weight:660;letter-spacing:.16em;text-transform:uppercase;margin-top:1px}
.cf-stamp-in{position:relative;right:auto;top:auto;align-self:center;margin:auto 0 0;padding:8px 18px 7px;border-width:4px;transform:rotate(-7deg)}
.cf-stamp-in b{font-size:1.2rem}
.cf-stamp-in small{font-size:.66rem}
.cf-stamp.big{right:auto;top:auto;left:12%;bottom:15%;padding:7px 16px 6px;border-width:4px;transform:rotate(-9deg)}
.cf-stamp.big b{font-size:1.25rem}
.cf-stamp.big small{font-size:.8rem}

/* the cover: open by default (no script); the script shuts it, then opens it */
.cf-cover{--ang:-180deg;position:absolute;z-index:4;inset:0;transform-style:preserve-3d;transform-origin:0 50%;transform:rotateY(var(--ang));transition:transform 1.15s cubic-bezier(.3,1.25,.42,1);cursor:grab;touch-action:pan-y;-webkit-tap-highlight-color:transparent;outline-offset:4px}
html.js .cf-file:not(.open) .cf-cover{--ang:0deg}
html.js .cf-file:not(.ready) .cf-cover{transition:none}
.cf-file.drag .cf-cover{transition:none;cursor:grabbing}
@media (hover:hover) and (pointer:fine){html.js .cf-file:not(.open):not(.drag) .cf-cover:hover{--ang:-13deg}}
.cf-face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border:2.5px solid var(--ink);background:var(--grain),var(--buff)}
.cf-front{border-radius:2px 9px 9px 2px;box-shadow:inset -10px 0 0 -6px rgba(20,19,17,.08)}
.cf-front::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0 46px,rgba(20,19,17,.06) 46px 47px);pointer-events:none}
.cf-label{position:absolute;left:11%;right:11%;top:15%;display:grid;gap:3px;padding:0 16px 14px;background:#fbf9f4;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--coral-2);font-family:var(--typed);transform:rotate(-.8deg)}
.cf-label::before{content:"";height:12px;margin:0 -16px 8px;background:var(--grain-c),var(--coral-2);border-bottom:2px solid var(--ink)}
.cf-label-k{font-family:var(--sans);font-size:.62rem;font-weight:660;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
.cf-label-n{font-family:var(--display);font-weight:700;font-size:2.4rem;line-height:1;letter-spacing:-.01em;color:var(--ink)}
.cf-label-name{margin-top:8px;padding-top:8px;border-top:1.5px dotted rgba(20,19,17,.5);font-size:1.12rem}
.cf-label-r{font-size:.82rem;color:var(--ink-2)}
.cf-peek{position:absolute;right:16px;bottom:16px;font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--coral-ink);transform:rotate(-4deg)}
.cf-peek::after{content:" \2192"}
.cf-inside{transform:rotateY(180deg);border-radius:9px 2px 2px 9px;display:flex;flex-direction:column;padding:26px 24px 22px;background:var(--grain),#e3d5b9;box-shadow:inset 10px 0 18px -12px rgba(20,19,17,.35)}
.cf-in-k{font-size:.62rem;font-weight:660;letter-spacing:.24em;text-transform:uppercase;padding-bottom:9px;border-bottom:2px solid var(--ink)}
.cf-toc{list-style:none;margin:6px 0 0;padding:0}
.cf-toc a{display:grid;grid-template-columns:2.2em 1fr;align-items:baseline;padding:8px 0 7px;border-bottom:1.5px dotted rgba(20,19,17,.4);font-family:var(--typed);font-size:.9rem;line-height:1.25;text-decoration:none;transition:color .25s,padding .35s var(--ease)}
.cf-toc a span{color:var(--coral-ink)}
.cf-toc a:hover{color:var(--coral-ink);padding-left:5px}
.cf-toc-ex a{font-style:italic}
.cf-in-foot{margin-top:auto;padding-top:14px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.cf-sticker{margin:0 0 6px;padding:9px 14px;background:var(--grain-c),var(--coral-l);border:2px solid var(--ink);font-size:.64rem;font-weight:660;letter-spacing:.16em;text-transform:uppercase;line-height:1.5;transform:rotate(-3deg);box-shadow:2px 2px 0 rgba(20,19,17,.4)}
.cf-ring2{position:absolute;right:18%;top:51%;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle,transparent 0 56%,rgba(122,40,34,.24) 57% 61%,transparent 62%);transform:rotate(-30deg) scaleX(.95)}
.cf-hint{position:absolute;z-index:3;left:0;right:0;bottom:2px;display:flex;align-items:center;justify-content:center;gap:10px;margin:0;font-size:.84rem;color:var(--ink-2);transition:opacity .6s}
.cf-hint.gone{opacity:0}
.cf-hand{flex:none;width:16px;height:16px;border-radius:50%;background:var(--coral-2);box-shadow:inset 0 0 0 1.5px var(--ink);animation:tap 1.8s var(--ease) infinite}

/* narrow desk: one panel in view, the open cover tucked away to the left */
@container (max-width:600px){
  .cf-desk{--P:calc(100cqi - 36px);padding-bottom:62px}
  .cf-file{width:var(--P);transform:rotate(-.8deg);margin-left:18px;justify-self:start}
  .cf-panel{margin-left:0}
  .cf-pencil{left:auto;right:-4%;bottom:22px;width:min(240px,60%);transform:rotate(-171deg)}
  .cf-ring{right:auto;left:-20px;top:auto;bottom:40px}
}

/* ===================== THE FILE: divider sections ===================== */
.cf-story{position:relative;padding:clamp(56px,7vw,110px) 0 clamp(30px,4vw,60px)}
.cf-ch{position:relative;margin-top:44px}
.cf-ch+.cf-ch{margin-top:clamp(80px,9vw,124px)}
.cf-ch-tab{position:absolute;z-index:0;top:-38px;left:var(--tabx,4%);display:flex;align-items:center;gap:10px;height:42px;max-width:calc(100% - var(--tabx,4%) - 10px);padding:0 18px 4px 12px;background:var(--grain-c),var(--coral-2);border:2.5px solid var(--ink);border-bottom:0;border-radius:11px 11px 0 0;font-size:.7rem;font-weight:640;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-ch-tab b{flex:none;padding:0 6px;background:#fbf9f4;border:1.5px solid var(--ink);font-family:var(--typed);font-weight:400;font-size:.92rem;letter-spacing:0}
.cf-ch-sheet{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.66fr) minmax(0,1fr);column-gap:clamp(30px,5.5vw,96px);padding:clamp(34px,4.6vw,68px) clamp(22px,5vw,84px) clamp(40px,5vw,72px) clamp(54px,7.6vw,124px);background:#fbf9f4;background-image:var(--grain);border:2.5px solid var(--ink);box-shadow:8px 8px 0 var(--coral-2)}
.cf-ch:nth-child(2) .cf-ch-sheet{box-shadow:8px 8px 0 var(--ink)}
/* punched holes and the coral margin rule */
.cf-ch-sheet::before{content:"";position:absolute;left:clamp(8px,1.9vw,26px);top:0;bottom:0;width:30px;background:radial-gradient(circle at 15px 104px,var(--paper) 0 6px,var(--ink) 6.2px 7.6px,#f9b7b2 7.8px 12.6px,var(--ink) 12.8px 14px,transparent 14.3px),radial-gradient(circle at 15px calc(100% - 104px),var(--paper) 0 6px,var(--ink) 6.2px 7.6px,#f9b7b2 7.8px 12.6px,var(--ink) 12.8px 14px,transparent 14.3px);pointer-events:none}
.cf-ch-sheet::after{content:"";position:absolute;left:clamp(40px,5.6vw,92px);top:0;bottom:0;width:1.5px;background:rgba(245,140,138,.6);pointer-events:none}
.cf-ch-head{grid-column:1;grid-row:1;align-self:start}
.cf-ch-head .h2{margin-top:14px;font-size:clamp(2rem,3.7vw,3.3rem)}
.cf-ch-body{position:relative;grid-column:2;grid-row:1}
.cf-ch-body>p{margin:0 0 1.15em;max-width:42ch;font-size:clamp(1.05rem,1.18vw,1.17rem);line-height:1.64;color:#2b2925}
.cf-ch-body>p:last-child{margin-bottom:0}
.cf-ch-body i{font-family:var(--serif);font-size:1.08em}

/* handwritten notes in the margin */
.cf-ch-body>.cf-note{position:absolute;max-width:none;right:calc(100% + clamp(30px,5.5vw,96px) * .55);width:min(210px,24vw);margin:var(--nt,0) 0 0;text-align:right;font-family:var(--serif);font-style:italic;font-weight:420;font-size:1.16rem;line-height:1.2;color:var(--coral-ink);transform:rotate(var(--nr,-3deg))}
.cf-ch-body>.cf-note::after{content:"";display:block;width:58px;height:20px;margin:4px 0 0 auto;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 20'%3E%3Cpath d='M2 6 Q26 18 52 9 M44 4 l9 5 l-8 6' fill='none' stroke='%23a13f39' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}
.cf-note span{font-style:normal}

/* the interview cards */
.cf-q{--r:0deg;position:relative;margin:30px 0 38px;padding:12px clamp(16px,2.2vw,26px) 16px;background:#fffdf8;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transform:rotate(var(--r));transition:transform .7s var(--spring),box-shadow .4s}
.cf-q::before{content:"";position:absolute;left:0;right:0;top:38px;height:2px;background:var(--coral-2);opacity:.85}
.cf-q:hover{transform:rotate(0deg) translateY(-3px);box-shadow:6px 7px 0 var(--ink)}
.cf-q-k{display:flex;justify-content:space-between;gap:10px;margin:0;padding-bottom:13px;font-family:var(--typed);font-size:.74rem;color:var(--ink-3)}
.cf-q blockquote{margin:14px 0 10px}
.cf-q blockquote p{margin:0;font-family:var(--serif);font-style:italic;font-weight:380;font-size:clamp(1.18rem,1.6vw,1.44rem);line-height:1.42;letter-spacing:-.008em;color:var(--ink);background-image:linear-gradient(transparent calc(100% - 1px),rgba(20,19,17,.13) calc(100% - 1px));background-size:100% 1.42em;background-position:0 .08em}
.cf-q blockquote p::before{content:"\201C"}
.cf-q blockquote p::after{content:"\201D"}
.cf-q figcaption{display:flex;align-items:center;gap:8px;font-size:.68rem;font-weight:660;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.cf-q figcaption::before{content:"";width:22px;height:2px;background:var(--ink)}
.cf-q:has(.cf-clip2) .cf-q-k>span:first-child{padding-left:26px}
.cf-clip2{position:absolute;z-index:2;left:14px;top:-24px;width:22px;height:60px;transform:rotate(7deg);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 80'%3E%3Cpath d='M8 72 V14 Q8 5 15 5 Q22 5 22 14 V62 Q22 68 17.5 68 Q13 68 13 62 V20' fill='none' stroke='%23f58c8a' stroke-width='5' stroke-linecap='round' transform='translate(2 1.6)'/%3E%3Cpath d='M8 72 V14 Q8 5 15 5 Q22 5 22 14 V62 Q22 68 17.5 68 Q13 68 13 62 V20' fill='none' stroke='%23141311' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain}
.cf-q.tape::after{content:"";position:absolute;z-index:2;top:-14px;left:50%;width:104px;height:27px;margin-left:-52px;background:rgba(249,183,178,.82);background-image:var(--grain-c);border-left:1px dashed rgba(20,19,17,.3);border-right:1px dashed rgba(20,19,17,.3);transform:rotate(-2.5deg);box-shadow:0 1px 0 rgba(20,19,17,.15)}
html.js .cf-q.wait{transform:rotate(calc(var(--r) - 3deg)) translateY(26px);opacity:0}
html.js .cf-q.land{transition:transform .9s var(--spring),opacity .4s,box-shadow .4s}

/* ===================== EXHIBIT A: wu wei, a working model ===================== */
.ww{position:relative;z-index:2;grid-column:1/-1;grid-row:2;margin:clamp(40px,5vw,64px) 0 clamp(44px,5vw,70px)}
.ww-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-bottom:16px}
.ww-title{font-family:var(--display);font-weight:700;font-size:clamp(1.35rem,2.1vw,1.8rem);line-height:1.05;letter-spacing:-.01em}
.ww-box{position:relative;padding:14px 14px 0;background:var(--grain-c),var(--coral-2);border:2.5px solid var(--ink);border-radius:6px;box-shadow:6px 7px 0 var(--ink)}
.ww-stage{position:relative;border:2.5px solid var(--ink);background:#f7f3ec;overflow:hidden;box-shadow:inset 0 10px 16px -10px rgba(20,19,17,.4)}
.ww-scene{display:block;width:100%;height:auto;overflow:hidden;touch-action:pan-y}
.ww-scene .ww-p{transition:none}
.ww-card text,.ww-bub text{font-family:var(--sans);font-weight:800;font-size:12px;text-anchor:middle;fill:#a13f39}
.ww-tangle path{stroke-dasharray:1 1}

/* the note pinned to the wall: face down until the team does it themselves */
.ww-tao{position:absolute;z-index:3;left:32px;top:32px;width:min(300px,34%);margin:0;perspective:900px}
.ww-tao-in{position:relative;display:grid;transform:rotate(-2.5deg)}
.ww-tao-f,.ww-tao-b{position:relative;grid-area:1/1;margin:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;padding:16px 18px 14px;border:2px solid var(--ink);box-shadow:3px 3px 0 rgba(20,19,17,.5);transition:transform .9s var(--spring)}
.ww-tao-f{background:#fffdf8;transform:perspective(900px) rotateY(-180deg)}
.ww-tao-b{transform:perspective(900px) rotateY(0deg);display:grid;place-items:center;text-align:center;background:var(--grain-c),var(--coral-l);font-family:var(--serif);font-style:italic;font-size:1rem;line-height:1.25;color:var(--ink-2)}
.ww.done .ww-tao-f{transform:perspective(900px) rotateY(0deg)}
.ww.done .ww-tao-b{transform:perspective(900px) rotateY(180deg)}
.ww-tao-b::before{content:"";position:absolute;inset:6px;border:1.5px dashed rgba(20,19,17,.35);pointer-events:none}
.ww-tao::before{content:"";position:absolute;z-index:2;left:50%;top:-6px;width:13px;height:13px;margin-left:-6px;border-radius:50%;background:var(--coral-2);box-shadow:inset 0 0 0 2px var(--ink),1px 2px 0 rgba(20,19,17,.35)}
.ww-tao blockquote{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(1.02rem,1.3vw,1.18rem);line-height:1.3;color:var(--ink)}
.ww-tao figcaption{margin-top:9px;font-size:.62rem;font-weight:660;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.ww-tao figcaption i{font-family:var(--serif);font-size:1.15em;letter-spacing:0;text-transform:none}

/* the plinth, its brass-ish plate and the lever */
.ww-plinth{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:18px;min-height:112px;padding:16px 8px 16px}
.ww-plate{align-self:center;display:grid;gap:2px;padding:8px 16px 9px;background:var(--grain-c),var(--coral-l);border:2px solid var(--ink);border-radius:3px;box-shadow:2px 2px 0 rgba(20,19,17,.5)}
.ww-plate b{font-size:.82rem;font-weight:680;letter-spacing:.2em;text-transform:uppercase}
.ww-plate b span{letter-spacing:.06em;margin-right:.35em}
.ww-plate>span{font-family:var(--serif);font-style:italic;font-size:.98rem;color:var(--ink-2)}
.ww-lever{position:relative;z-index:4;flex:none;width:236px;margin:-76px 4px -4px 0;touch-action:none;cursor:grab;-webkit-tap-highlight-color:transparent;border-radius:12px;outline-offset:2px}
.ww-lever:active{cursor:grabbing}
.ww-lever.by-ptr:focus-visible,.ww-lever.by-ptr:focus{outline:none}
.ww-lever svg{display:block;width:100%;height:auto;overflow:visible}
.ww-qt{font-family:var(--sans);font-size:10.5px;font-weight:720;letter-spacing:.14em;fill:#141311}
.ww-arm{transform-box:view-box;transform-origin:120px 150px;transform:rotate(-58deg)}
.ww-pull{position:absolute;z-index:5;right:250px;bottom:62px;display:flex;align-items:flex-end;gap:2px;margin:0;font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--ink);pointer-events:none;transition:opacity .5s}
.ww-pull svg{width:62px;height:auto;order:2;transform:translateY(-14px)}
.ww-pull-l{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ww.touched .ww-pull{opacity:0}
.ww-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 24px;margin:18px 0 0;padding-top:12px;border-top:1.5px solid var(--ink);font-size:1rem;color:var(--ink-2)}
.ww-state b{color:var(--ink);font-weight:620}
.ww-k-m{display:none}
.ww-keys{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

/* ===================== teams keep becoming: the snapshot ===================== */
.cf-snap{grid-column:1;grid-row:3;align-self:end;justify-self:end;position:relative;width:min(290px,100%);margin:0 0 30px;padding:10px 10px 12px;background:#fffdf8;border:1.5px solid var(--ink);box-shadow:4px 4px 0 var(--coral-2);transform:rotate(-2.4deg)}
.cf-snap-tape{position:absolute;top:-12px;left:50%;width:84px;height:22px;margin-left:-42px;background:rgba(249,183,178,.82);background-image:var(--grain-c);transform:rotate(3deg)}
.cf-snap-pic{display:block;aspect-ratio:240/150;background:var(--grain-c),var(--coral-l);border:1.5px solid var(--ink);overflow:hidden}
.cf-snap-pic svg{width:100%;height:100%}
.cf-snap figcaption{display:grid;gap:2px;margin-top:9px;font-family:var(--serif);font-style:italic;line-height:1.2}
.cf-snap-t{font-size:1.08rem;color:var(--ink)}
.cf-snap-v{font-size:.92rem;color:var(--coral-ink)}
.cf-snap .sn-f{transition:transform 3.5s var(--ease)}
.cf-ch-more{grid-row:3}

/* ===================== THE LAST CARD ===================== */
.cf-advice{padding:clamp(70px,9vw,140px) 0 clamp(40px,5vw,70px)}
.cf-last{--r:-1deg;position:relative;max-width:900px;margin:0 auto;padding:18px clamp(20px,4vw,56px) clamp(24px,3vw,38px);background:#fffdf8;border:2.5px solid var(--ink);box-shadow:9px 9px 0 var(--coral-2);transform:rotate(var(--r))}
.cf-last::before{content:"";position:absolute;left:0;right:0;top:46px;height:2px;background:var(--coral-2)}
.cf-last .cf-q-k{font-size:.8rem}
.cf-pin{position:absolute;left:50%;top:-11px;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:var(--coral-2);box-shadow:inset 0 0 0 2.5px var(--ink),2px 3px 0 rgba(20,19,17,.35)}
.cf-last blockquote{margin:30px 0 26px}
.cf-last blockquote p{margin:0;font-family:var(--serif);font-style:italic;font-weight:360;font-size:clamp(1.6rem,3.3vw,2.75rem);line-height:1.22;letter-spacing:-.02em}
.cf-last blockquote p::before{content:"\201C";color:var(--coral-2)}
.cf-last blockquote p::after{content:"\201D";color:var(--coral-2)}
.cf-last figcaption{display:flex;align-items:center;gap:14px;font-size:.92rem;color:var(--ink-2);line-height:1.3}
.cf-last figcaption b{display:block;color:var(--ink);font-weight:620}
.cf-last-ph{flex:none;width:60px;height:60px;border:2px solid var(--ink);transform:rotate(-3deg);box-shadow:2px 2px 0 var(--ink)}

/* ===================== CASE FILE NO. 2: reserved ===================== */
.cf-close{padding-top:clamp(70px,8vw,120px)}
.cf-next{position:relative;max-width:980px;margin:0 auto;padding-top:34px}
.cf-next-tab{position:absolute;top:2px;left:8%;height:34px;display:flex;align-items:center;padding:0 16px 2px;background:var(--grain-c),var(--coral-2);border:2.5px solid var(--ink);border-bottom:0;border-radius:10px 10px 0 0;font-family:var(--typed);font-size:.95rem}
.cf-next-board{position:relative;padding:clamp(26px,4vw,56px) clamp(18px,4vw,56px) clamp(22px,3vw,34px);background:var(--grain),var(--buff);border:2.5px solid var(--ink);border-radius:3px 10px 10px 3px;box-shadow:8px 8px 0 var(--ink)}
.cf-next-board::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0 46px,rgba(20,19,17,.05) 46px 47px);pointer-events:none}
.cf-next-label{position:relative;padding:0 clamp(18px,3.4vw,46px) clamp(24px,3vw,36px);background:#fbf9f4;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--coral-2);transform:rotate(-.6deg)}
.cf-next-label::before{content:"";display:block;height:14px;margin:0 calc(-1 * clamp(18px,3.4vw,46px)) 22px;background:var(--grain-c),var(--coral-2);border-bottom:2px solid var(--ink)}
.cf-next-label .h2{margin-top:12px;max-width:16ch}
.cf-next-p{margin-top:14px;max-width:44ch;font-size:1.1rem;color:var(--ink-2)}
.cf-next-line{display:flex;align-items:flex-end;gap:12px;max-width:520px;margin-top:26px;font-size:.66rem;font-weight:660;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.cf-blank{flex:1;height:1.4em;border-bottom:1.5px dotted rgba(20,19,17,.55)}
.cf-yours{flex:none;font-family:var(--serif);font-style:italic;font-weight:420;font-size:1.3rem;letter-spacing:0;text-transform:none;color:var(--coral-ink);transform:rotate(-4deg) translate(-16px,-4px)}
.cf-next-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.cf-back{position:relative;display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:22px;font-size:.92rem;font-weight:520}
.cf-back a{text-decoration:none;border-bottom:2px solid var(--coral-2);padding-bottom:1px;transition:color .25s}
.cf-back a:hover{color:var(--coral-ink)}

/* ===================== responsive ===================== */
@media (max-width:980px){
  .cf-desk{max-width:640px;margin:0 auto}
}
@media (max-width:860px){
  .cf-ch-sheet{grid-template-columns:1fr;padding-left:clamp(48px,11vw,80px)}
  .cf-ch-head,.cf-ch-body,.ww,.cf-ch-more,.cf-snap{grid-column:1;grid-row:auto}
  .cf-ch-head{margin-bottom:22px}
  .cf-ch-body>.cf-note{position:relative;right:auto;width:auto;max-width:22ch;margin:-4px 0 18px auto;text-align:right}
  .cf-snap{justify-self:center;margin:6px 0 0}
  .ww{margin-left:calc(-1 * clamp(48px,11vw,80px) + 10px);margin-right:calc(-1 * clamp(22px,5vw,84px) + 10px)}
}
@media (max-width:760px){
  .ww-tao{position:relative;left:auto;top:auto;width:auto;margin:0 6px 16px}
  .ww-box{display:flex;flex-direction:column}
  .ww-stage{order:0}.ww-plinth{order:1}.ww-tao{order:2}
  .ww-plinth{flex-direction:column;align-items:center;gap:10px;padding:12px 4px 14px}
  .ww-lever{width:min(260px,82%);margin:4px 0 0}
  .ww-plate{display:none}
  .ww-pull{right:auto;left:4%;bottom:70px;font-size:1.05rem}
  .ww-pull svg{width:44px}
  .ww-k-d{display:none}
  .ww-k-m{display:inline}
  .ww-pull{display:none}
  .cf-ch-tab{font-size:.62rem;letter-spacing:.12em;padding-right:12px}
  .cf-ch:nth-child(2) .cf-ch-tab{left:22%}
  .cf-ch:nth-child(3) .cf-ch-tab{left:38%}
}
@media (max-width:480px){
  .cf-ch-sheet{padding:30px 18px 34px 46px}
  .cf-ch-sheet::after{left:36px}
  .cf-ch-sheet::before{left:8px}
  .ww{margin-left:-58px;margin-right:-30px}
  .ww-head{padding-left:54px}
  .ww-bar{padding-left:54px;padding-right:22px}
  .cf-q-k{font-size:.64rem}
  .cf-q:has(.cf-clip2) .cf-q-k>span:first-child{padding-left:22px}
  .cf-ch-tab{padding-right:8px}
  .cf-ch-tab span{display:none}
}

/* reduced motion: everything is already where it ends up */
@media (prefers-reduced-motion:reduce){
  .cf-cover,.ww-tao-in{transition:none!important}
}

/* additions: the organisation tag inside the cover, the plant, the empty file */
.cf-org{position:relative;display:grid;justify-items:center;gap:6px;margin:0;padding:12px 18px 12px;background:#fbf9f4;border:2px solid var(--ink);border-radius:3px;box-shadow:3px 3px 0 var(--coral-2);transform:rotate(2deg)}
.cf-org::before{content:"";position:absolute;left:50%;top:-16px;width:2px;height:18px;margin-left:-1px;background:var(--ink)}
.cf-org-k{font-size:.56rem;font-weight:660;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.cf-org-logo{display:block;width:84px;height:74px;background:var(--ink);-webkit-mask:url(assets/logos/octopus-ev.png) center/contain no-repeat;mask:url(assets/logos/octopus-ev.png) center/contain no-repeat}
.cf-empty{position:absolute;z-index:2;right:clamp(16px,4vw,52px);top:30px;width:clamp(86px,12vw,120px);margin:0;transform:rotate(4deg)}
.cf-empty-ph{display:grid;place-items:center;aspect-ratio:4/5;border:2px dashed rgba(20,19,17,.55);background:repeating-linear-gradient(45deg,rgba(245,140,138,.18) 0 2px,transparent 2px 7px);font-family:var(--display);font-weight:700;font-size:2.6rem;color:var(--coral-2)}
.cf-empty-clip{position:absolute;left:20%;top:-24px;width:16px;height:48px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 80'%3E%3Cpath d='M8 72 V14 Q8 5 15 5 Q22 5 22 14 V62 Q22 68 17.5 68 Q13 68 13 62 V20' fill='none' stroke='%23f58c8a' stroke-width='5' stroke-linecap='round' transform='translate(2 1.6)'/%3E%3Cpath d='M8 72 V14 Q8 5 15 5 Q22 5 22 14 V62 Q22 68 17.5 68 Q13 68 13 62 V20' fill='none' stroke='%23141311' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain}
.cf-stamp-r{right:clamp(14px,2.4vw,30px);top:auto;bottom:clamp(22px,3vw,36px);transform:rotate(-9deg)}
.cf-next-label{padding-right:clamp(120px,17vw,190px)}
@media (max-width:640px){.cf-next-label{padding-right:clamp(18px,3.4vw,46px)}.cf-empty{position:relative;right:auto;top:auto;width:84px;margin:4px 0 4px auto;float:right}.cf-stamp-r{display:none}}