:root{--paper:#eeece6;--ink:#24231f;--muted:#68665f;--purple:#6550a5;--orange:#dc7136;--blue:#286e9e;--line:#d7d2c8;--white:#fffdf8}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:#d8d6d0;color:var(--ink);font-family:Arial,Helvetica,sans-serif}
.page-shell{position:relative;min-height:100vh}
.doodle-layer{position:absolute;inset:0;pointer-events:none;z-index:0}
.doodle-rail{position:absolute;top:0;bottom:0;width:calc(50vw - 560px);overflow:hidden}
.left-rail{left:0}.right-rail{right:0}
.doodle-figure{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:auto;overflow:visible;opacity:.15;filter:grayscale(1);mix-blend-mode:multiply;animation:doodle-float 6s ease-in-out var(--delay,0s) infinite}
.doodle-figure image{width:1024px;height:1536px}
@keyframes doodle-float{
  0%,100%{transform:translate3d(0,calc(var(--scroll-shift,0px) - 3px),0) rotate(var(--tilt,0deg))}
  50%{transform:translate3d(0,calc(var(--scroll-shift,0px) + 3px),0) rotate(var(--tilt,0deg))}
}
.site{max-width:1120px;margin:auto;min-height:100vh;background:var(--paper);overflow:hidden;position:relative;z-index:1}

.top{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,56px);border-bottom:1px solid #dcd8d0}
.logo{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.logo{color:inherit;text-decoration:none;cursor:pointer}
.logo:hover{color:var(--purple)}
.logo span{color:var(--purple)}
.top-right{font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}

.intro{padding:38px clamp(20px,5vw,56px) 18px;display:flex;align-items:end;justify-content:space-between;gap:25px}
.eyebrow{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--purple);font-weight:800}
.intro h1{font-size:clamp(36px,6vw,66px);line-height:.92;letter-spacing:-.07em;margin:12px 0 0;max-width:600px}
.intro h1 em{font-family:Georgia,serif;font-weight:400}
.intro p{max-width:260px;font-size:13px;line-height:1.55;color:var(--muted);margin:0 0 5px}

/* ---------- board ---------- */
.board-wrap{container-type:inline-size;margin:8px 20px 0}
.board{position:relative;min-height:calc(var(--bh)*1px);border:1px solid #d6d2c9;border-radius:8px;background-color:#f2f0eb;background-image:radial-gradient(#c7c3bb .6px,transparent .6px);background-size:7px 7px;overflow:hidden}
.board:before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(130deg,rgba(255,255,255,.7),transparent 40%,rgba(214,210,201,.18));pointer-events:none}
.board-sticker-layer{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.board-sticker{position:absolute;height:auto;transform:rotate(var(--tilt,0deg));transform-origin:center;filter:drop-shadow(0 3px 4px #24231f28)}
.scribble{position:absolute;font-family:Georgia,serif;font-style:italic;color:#282722;pointer-events:none;z-index:1}
.scribble.one{top:22px;left:26%;font-size:85px;transform:rotate(-10deg)}
.scribble.two{right:5%;top:46%;font-size:75px;transform:rotate(12deg)}
.tape{position:absolute;width:130px;height:36px;background:#d8d0a8;opacity:.6;transform:rotate(48deg);top:42px;right:3%;z-index:3}
.connections,.pin-dots{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.connections{z-index:2}
.pin-dots{z-index:7}
.connections line{stroke:var(--purple);stroke-width:3;stroke-linecap:round;opacity:.9}
.pin-dot{fill:var(--purple);stroke:#e5def6;stroke-width:2}
.empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-family:Georgia,serif;font-style:italic;margin:0}

.poster{position:absolute;left:var(--x);top:var(--y);width:calc(var(--w)*1px);transform:rotate(calc(var(--r)*1deg));
  background:var(--white);padding:9px 9px 29px;box-shadow:0 7px 13px #24231f1a;border:1px solid #e8e4dc;z-index:4;cursor:pointer;
  transition:transform .22s,box-shadow .22s;outline:none;color:var(--ink);text-align:left;font:inherit}
.poster:hover,.poster:focus-visible{z-index:6;box-shadow:0 15px 25px #24231f26;transform:rotate(0deg) translateY(-5px) scale(1.025)}
.poster:focus-visible{outline:2px solid var(--purple);outline-offset:4px}
.poster .art{height:155px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:12px;background:var(--bg);color:var(--fg)}
.poster .art:before,.poster .art:after{content:"";position:absolute;border:1px solid currentColor;border-radius:50%;opacity:.35}
.poster .art:before{width:125px;height:125px;right:-30px;top:-40px}
.poster .art:after{width:70px;height:70px;right:15px;top:20px}
.art .number{font-size:10px;letter-spacing:.16em;position:relative;z-index:1}
.art .big{display:block;font-size:calc(var(--fs)*1px);line-height:.86;letter-spacing:-.08em;font-weight:900;position:relative;z-index:1;overflow-wrap:break-word}
.art .big.s-serif{font-family:Georgia,serif;font-weight:400}
.art .big.s-italic{font-family:Georgia,serif;font-weight:400;font-style:italic}
.art .sub{font-size:9px;letter-spacing:.1em;text-transform:uppercase;position:relative;z-index:1}
.caption{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-family:Georgia,serif;font-size:12px}

.pin-caption{position:absolute;left:var(--x);top:var(--y);z-index:4;font-size:12px;line-height:1.35;max-width:120px}
.pin-caption strong{font-size:15px}

/* phone layout: driven by the board's own width so the editor's mobile preview matches */
@container (max-width:640px){
  .board{min-height:calc(var(--bhm)*1px)}
  .poster{left:var(--mx,var(--x));top:var(--my,var(--y));width:calc(var(--w)*.78px);padding:7px 7px 25px}
  .poster .art{height:122px;padding:9px}
  .art .big{font-size:calc(var(--fs)*.82px)}
  .pin-caption{left:var(--mx,var(--x));top:var(--my,var(--y));font-size:10px;max-width:100px}
  .pin-caption strong{font-size:12px}
  .scribble.one{left:25%;font-size:60px}
  .scribble.two{font-size:46px;right:2%}
  .connections line{stroke-width:2}
}

.board-bottom{display:flex;justify-content:space-between;align-items:center;padding:18px 26px 22px;color:var(--muted);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.board-bottom strong{color:var(--ink)}
footer{padding:26px clamp(20px,5vw,56px);display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:11px}

/* ---------- modal ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(20,21,24,.48);backdrop-filter:blur(5px);z-index:20;display:none;align-items:center;justify-content:center;padding:18px}
.modal-backdrop.open{display:flex}
.modal{width:min(760px,100%);max-height:min(88vh,850px);overflow:auto;background:#f8f6f0;border-radius:14px;box-shadow:0 30px 100px #0004;display:grid;grid-template-columns:.8fr 1.2fr;position:relative}
.modal-art{padding:26px;min-height:380px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;font-size:11px;letter-spacing:.1em}
.modal-art.has-media{padding:0}
.modal-art.has-media:after{display:none}
.modal-media{position:absolute;inset:0;display:grid;place-items:center;background:#171717}
.modal-media[hidden]{display:none}
.modal-media img,.modal-media video{width:100%;height:100%;object-fit:cover}
.modal-art.has-media>.number,.modal-art.has-media>#modalFooter{position:relative;z-index:1;padding:20px;background:linear-gradient(#0008,transparent);color:#fff;text-shadow:0 1px 4px #000}
.modal-art.has-media>#modalFooter{background:linear-gradient(transparent,#0009)}
.media-controls{position:absolute;z-index:2;left:0;right:0;top:50%;display:flex;align-items:center;justify-content:space-between;padding:0 12px;transform:translateY(-50%);letter-spacing:0;pointer-events:none}
.media-controls button{pointer-events:auto;border:0;border-radius:50%;width:36px;height:36px;background:#fffe;color:#24231f;font-size:25px;line-height:1;cursor:pointer}
.media-controls span{position:absolute;top:175px;left:50%;transform:translateX(-50%);padding:4px 9px;border-radius:99px;background:#0008;color:#fff;font-size:11px}
.modal-art:after{content:"";position:absolute;width:280px;height:280px;border:1px solid currentColor;border-radius:50%;right:-100px;top:60px;opacity:.3}
.modal-art .big{font-size:clamp(42px,6vw,70px);line-height:.86;letter-spacing:-.08em;font-weight:900;position:relative;z-index:1;white-space:pre-line;overflow-wrap:anywhere}
.modal-art .number{font-size:11px;letter-spacing:.15em;position:relative;z-index:1}
.modal-copy{padding:42px 34px 34px}
.modal-copy .category{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--purple);font-weight:800}
.modal-copy h2{font-size:34px;line-height:1;letter-spacing:-.06em;margin:12px 0}
.modal-copy p{font-size:14px;line-height:1.7;color:#5f5d56;white-space:pre-line}
.modal-copy h3{font-size:12px;text-transform:uppercase;letter-spacing:.1em;margin:24px 0 10px}
.modal-copy ul{padding-left:18px;margin:0;color:#5f5d56;font-size:13px;line-height:1.8}
.modal-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.btn{border:1px solid #24231f;border-radius:999px;padding:10px 14px;font-size:12px;font-weight:700;background:transparent;color:inherit;cursor:pointer;text-decoration:none;display:inline-block}
.btn.dark{background:#24231f;color:#fff}
.close{position:absolute;top:12px;right:12px;width:36px;height:36px;border:0;border-radius:50%;background:#fff;font-size:23px;cursor:pointer;z-index:3}
.edit-fab{position:fixed;right:18px;bottom:18px;z-index:10;background:#24231f;color:#fff;text-decoration:none;font-size:12px;font-weight:700;padding:10px 16px;border-radius:999px;box-shadow:0 6px 18px #0003}

@media(max-width:650px){
  .intro{display:block;padding-top:30px}
  .intro p{margin-top:16px}
  .board-wrap{margin:5px 10px 0}
  .modal{grid-template-columns:1fr;max-height:90vh}
  .modal-art{min-height:180px;padding:22px}
  .modal-art .big{font-size:46px}
  .modal-copy{padding:25px}
  .modal-copy h2{font-size:28px}
  .board-bottom{padding:14px;font-size:9px}
  footer{flex-direction:column}
}
@media(max-width:1279px){.doodle-layer{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}