:root{color-scheme:light;--paper: oklch(94% .021 80);--paper-deep: oklch(89% .032 78);--ink: oklch(25% .025 58);--ink-soft: oklch(42% .024 54);--line: oklch(23% .03 55);--wood: oklch(74% .08 73);--wood-dark: oklch(48% .08 64);--cork: oklch(56% .083 70);--cork-dark: oklch(39% .072 62);--screen: oklch(16% .032 252);--blue: oklch(72% .12 220);--pink: oklch(78% .105 340);--yellow: oklch(88% .12 92);--green: oklch(67% .13 151);--red: oklch(59% .19 31);--shadow: oklch(36% .045 60 / 25%);--ease-out: cubic-bezier(.16, 1, .3, 1);font-family:Trebuchet MS,Segoe UI,system-ui,sans-serif;font-kerning:normal}*{box-sizing:border-box}html,body{width:100%;min-width:320px;min-height:100%;margin:0}body{background:radial-gradient(circle at 50% 8%,oklch(98% .011 83),transparent 30rem),linear-gradient(180deg,var(--paper),var(--paper-deep));color:var(--ink)}button,a{font:inherit}button{cursor:pointer}a{color:inherit}@media(min-width:901px){html,body{overflow:hidden}}.room-shell{position:relative;display:grid;place-items:center;min-height:100svh;padding:clamp(.75rem,2vw,1.4rem)}.wall-dots{position:fixed;inset:0;opacity:.18;pointer-events:none;background-image:radial-gradient(oklch(70% .025 70) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:radial-gradient(ellipse at center,black 10%,transparent 78%);mask-image:radial-gradient(ellipse at center,black 10%,transparent 78%)}.stage{position:relative;width:min(1260px,96vw);height:min(780px,94svh);min-height:650px}.topline{position:absolute;top:0;left:50%;z-index:8;display:flex;align-items:center;justify-content:space-between;width:min(760px,72vw);transform:translate(-50%);color:var(--ink-soft);font-size:.82rem}.topline a{text-decoration-color:#957e6b8c;text-underline-offset:.18em}.microcopy{margin:0;font-family:Georgia,Times New Roman,serif;font-style:italic}.corkboard{position:absolute;top:clamp(3rem,7svh,4.4rem);left:clamp(.7rem,4.4vw,4.8rem);z-index:2;width:clamp(24rem,35vw,29rem);transform:rotate(-.5deg)}.board-frame{padding:.62rem;border:3px solid var(--line);background:linear-gradient(90deg,oklch(78% .085 78),var(--wood),oklch(68% .075 68));box-shadow:0 1.1rem 2rem var(--shadow)}.board-surface{min-height:21.6rem;padding:1.1rem 1rem 1rem;border:2px solid var(--cork-dark);background:radial-gradient(circle at 20% 40%,oklch(64% .09 70 / 48%) 0 .16rem,transparent .17rem),radial-gradient(circle at 80% 70%,oklch(43% .07 64 / 42%) 0 .12rem,transparent .13rem),var(--cork);background-size:1.3rem 1.3rem,1.1rem 1.1rem,auto}.board-surface h1{width:fit-content;margin:0 auto .14rem;padding:.2rem .72rem .1rem;border:2px solid var(--line);background:#f7f1e7;box-shadow:0 .18rem #2a1b1138;font-family:Segoe Print,Comic Sans MS,cursive;font-size:clamp(1.4rem,2.2vw,2rem);line-height:1.08;text-align:center;transform:rotate(1.5deg)}.board-subtitle{margin:.45rem 0 .75rem;color:#321f11;font-family:Georgia,Times New Roman,serif;font-size:.9rem;text-align:center}.pin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.72rem}.paper-note{position:relative;display:grid;gap:.25rem;min-height:7rem;padding:1.05rem .75rem .72rem;border:2px solid oklch(27% .03 55 / 75%);color:var(--ink);text-align:left;transform:rotate(var(--tilt));transition:transform .21s var(--ease-out),box-shadow .21s var(--ease-out);box-shadow:0 .35rem .55rem #29180c33}.paper-note:before{content:"";position:absolute;inset:-.55rem}.paper-note:hover,.paper-note:focus-visible{transform:translateY(-.3rem) rotate(0);outline:3px solid oklch(68% .12 205 / 65%);outline-offset:.18rem;box-shadow:0 .78rem 1rem #29180c47}.paper-note strong{font-size:.95rem;line-height:1}.paper-note small{color:#533d2e;font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.paper-note span:last-child{font-family:Georgia,Times New Roman,serif;font-size:.8rem;line-height:1.22}.paper-note.yellow{background:repeating-linear-gradient(180deg,transparent 0 1rem,oklch(67% .09 218 / 36%) 1.05rem 1.12rem),var(--yellow)}.paper-note.blue{background:var(--blue)}.paper-note.white{background:linear-gradient(90deg,transparent 0 1.2rem,oklch(71% .15 25 / 55%) 1.24rem 1.32rem,transparent 1.36rem),repeating-linear-gradient(180deg,transparent 0 .9rem,oklch(68% .09 220 / 32%) .95rem 1.02rem),#f8f5ef}.paper-note.pink{background:repeating-linear-gradient(180deg,transparent 0 .92rem,oklch(63% .09 314 / 28%) .98rem 1.04rem),var(--pink)}.pin{position:absolute;top:.32rem;left:50%;width:.55rem;aspect-ratio:1;border:1px solid oklch(18% .035 43);border-radius:999px;background:var(--red);transform:translate(-50%);box-shadow:0 .16rem #23100859}.tv-area{position:absolute;top:clamp(4.5rem,10svh,6.5rem);right:clamp(1rem,5vw,5rem);z-index:1;width:clamp(22rem,34vw,29rem)}.tv{position:relative;border:5px solid oklch(18% .022 245);border-radius:.35rem;background:#010408;box-shadow:0 1.2rem 2rem var(--shadow)}.tv-screen{position:relative;overflow:hidden;aspect-ratio:16 / 9;border:.4rem solid oklch(28% .022 245);background:var(--screen)}.tv-screen video,.modal-media video{display:block;width:100%;height:100%;object-fit:cover}.modal-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}.scanlines{position:absolute;inset:0;pointer-events:none;background:linear-gradient(transparent,#01081324),repeating-linear-gradient(180deg,oklch(100% 0 0 / 8%) 0 1px,transparent 1px 4px);mix-blend-mode:screen}.tv-stand{position:absolute;right:10%;bottom:-1.4rem;left:10%;height:.55rem;border-radius:999px;background:#121c24}.tv-caption{max-width:38ch;margin:1.8rem auto 0;color:var(--ink-soft);font-family:Georgia,Times New Roman,serif;font-size:.86rem;line-height:1.35;text-align:center}.person-button{position:absolute;right:clamp(11rem,25vw,24rem);bottom:clamp(7.8rem,14svh,9.4rem);z-index:5;width:clamp(33rem,48vw,45rem);pointer-events:none;filter:drop-shadow(0 1.2rem .9rem oklch(22% .035 55 / 18%))}.person-button img{position:relative;z-index:1;display:block;width:100%;height:auto;pointer-events:none}.about-hotspot{position:absolute;left:41.5%;top:14%;z-index:0;width:32%;height:55%;margin:0;padding:0;border:0;background:transparent;appearance:none;clip-path:polygon(39% 0%,58% 1%,72% 10%,82% 27%,100% 44%,93% 75%,72% 100%,28% 100%,10% 82%,0% 55%,9% 28%,24% 10%);cursor:pointer;pointer-events:auto}.about-hotspot:focus-visible{outline:3px solid oklch(62% .13 205 / 80%);outline-offset:.2rem}.bio-card{position:absolute;left:50%;bottom:-.3rem;z-index:7;width:min(43rem,58vw);transform:translate(-50%);color:#514137;font-family:Georgia,Times New Roman,serif;font-size:clamp(1rem,1.6vw,1.22rem);line-height:1.34;text-align:center;text-shadow:0 1px 0 oklch(99% .01 82 / 75%)}.bio-card p{margin:0}.work-line{margin-bottom:.28rem!important;color:#2b1f16;font-size:.92em;font-weight:800}.create-line{margin-top:.7rem!important;color:#2b1f16;font-weight:700}.signature{position:absolute;right:clamp(1rem,4vw,4rem);bottom:1rem;z-index:6;display:grid;justify-items:end;color:var(--ink-soft);font-family:Segoe Print,Comic Sans MS,cursive;transform:rotate(-4deg)}.signature span{font-size:clamp(1.25rem,2.2vw,2rem);line-height:1}.signature small{font-family:Trebuchet MS,Segoe UI,sans-serif;font-size:.64rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.modal-backdrop{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:clamp(1rem,2vw,1.6rem);background:#2b1b1057;opacity:0;pointer-events:none;transition:opacity .18s var(--ease-out)}.modal-backdrop[hidden]{display:none}.modal-backdrop.is-open{opacity:1;pointer-events:auto}.modal{position:relative;width:min(1220px,92vw);max-height:min(760px,90svh);margin-bottom:0;overflow:auto;border:3px solid var(--line);border-radius:.35rem .35rem .18rem .18rem;background:radial-gradient(circle at 10% 12%,oklch(72% .08 82 / 24%) 0 .12rem,transparent .13rem),radial-gradient(circle at 85% 72%,oklch(50% .055 70 / 16%) 0 .1rem,transparent .11rem),#e8ce9d;background-size:1.25rem 1.25rem,1.6rem 1.6rem,auto;box-shadow:0 2.2rem 2.8rem #1a0b0457,0 .42rem #492e1b2e;transform:translateY(.55rem) scale(.985);transition:transform .18s var(--ease-out)}.modal-backdrop.is-open .modal{transform:translateY(0) scale(1)}.project-folder:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,transparent 0 49.9%,oklch(42% .04 58 / 26%) 50%,transparent 50.22%),linear-gradient(180deg,oklch(100% 0 0 / 22%),transparent 38%);mix-blend-mode:multiply}.folder-tab{position:absolute;top:-2.1rem;left:clamp(1.2rem,5vw,4.2rem);z-index:2;min-width:11rem;max-width:min(23rem,62vw);min-height:2.25rem;padding:.45rem 1.1rem .3rem;overflow:hidden;border:3px solid var(--line);border-bottom:0;border-radius:.35rem .8rem 0 0;background:#e3c693;color:#362519;font-family:Segoe UI,system-ui,sans-serif;font-size:.76rem;font-weight:900;letter-spacing:.1em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.folder-spread{position:relative;z-index:1;display:grid;grid-template-columns:minmax(34rem,1.24fr) minmax(25rem,.9fr);gap:clamp(1rem,2vw,1.5rem);padding:clamp(1.05rem,1.8vw,1.55rem)}.folder-page{position:relative;min-height:31rem;border:2px solid oklch(36% .035 58 / 84%);background:linear-gradient(180deg,oklch(99% .012 83 / 70%),transparent 6rem),repeating-linear-gradient(180deg,transparent 0 1.55rem,oklch(73% .05 220 / 20%) 1.6rem 1.68rem),#f8f1e5;box-shadow:0 .45rem .7rem #36241821}.folder-media-page{display:grid;align-content:center;padding:clamp(1.5rem,2.6vw,2.35rem);transform:rotate(.35deg)}.case-kicker{margin:0;color:#544132;font-family:Segoe UI,system-ui,sans-serif;font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.tape{position:absolute;z-index:3;width:5rem;height:1.2rem;border:1px solid oklch(72% .03 84 / 65%);background:#eee0c0c7;box-shadow:0 .12rem .22rem #35251b24}.tape-top{top:2.15rem;left:50%;transform:translate(-50%) rotate(-2.5deg)}.tape-bottom{right:1.55rem;bottom:1.55rem;transform:rotate(4deg)}.modal-close{position:absolute;top:-1.75rem;right:clamp(.6rem,2vw,1rem);z-index:4;width:2.25rem;aspect-ratio:1;border:2px solid var(--line);border-radius:999px;background:#f7d979;color:var(--line);font-size:1.4rem;font-weight:900;line-height:1}.modal-close:focus-visible{outline:3px solid oklch(54% .13 217);outline-offset:.15rem}.modal-media{position:relative;overflow:hidden;aspect-ratio:16 / 9;min-height:0;border:3px solid oklch(22% .025 55);border-radius:.08rem;background:#030a12;box-shadow:0 .7rem 1rem #27160a2e,0 0 0 .45rem #fcf8f1;transform:rotate(-.7deg)}.modal-copy{display:grid;align-content:start;gap:.78rem;padding:clamp(1.15rem,2vw,1.6rem);font-family:Segoe UI,system-ui,sans-serif;transform:rotate(-.25deg)}.modal h2{margin:0 0 .1rem;font-family:Segoe UI,system-ui,sans-serif;font-size:clamp(2.35rem,4.15vw,4rem);font-weight:900;line-height:.92;letter-spacing:0}.modal-copy p{margin:0;color:var(--ink-soft);font-size:.98rem;line-height:1.42}.modal-copy .case-kicker{color:#544132;font-size:.72rem;line-height:1}.case-proof{display:grid;gap:.58rem;margin-top:.25rem;padding:0;border:0;background:transparent}.case-proof strong{width:fit-content;padding:.22rem .55rem;border:2px solid oklch(34% .035 58 / 72%);background:#f1e3c6;font-size:.78rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;transform:rotate(-1.6deg);box-shadow:0 .16rem .18rem #2f201621}.modal ul{display:grid;gap:.5rem;margin:0;padding:0;color:#423226;font-size:.9rem;line-height:1.34;list-style:none}.modal li{position:relative;padding:.72rem .82rem .72rem 1.95rem;border:2px solid oklch(42% .035 58 / 36%);background:#fcf8f0;box-shadow:0 .28rem .38rem #2a1b1121}.modal li:nth-child(odd){transform:rotate(-.65deg)}.modal li:nth-child(2n){transform:rotate(.55deg)}.modal li:before{content:"";position:absolute;top:.86rem;left:.72rem;width:.52rem;aspect-ratio:1;border:1px solid oklch(18% .035 43);border-radius:999px;background:var(--red);box-shadow:0 .12rem #23100840}.modal-actions{display:flex;align-items:center;gap:.7rem;margin-top:.15rem;color:var(--ink-soft);font-size:.88rem}.modal-actions:empty{display:none}.modal-actions a{display:inline-flex;align-items:center;min-height:2.7rem;padding:0 .9rem;border:2px solid var(--line);background:var(--green);color:#1c0e05;font-family:Segoe UI,system-ui,sans-serif;font-weight:900;text-decoration:none;box-shadow:0 .28rem #301d0d40}.about-plate{display:grid;place-items:center;height:100%;min-height:19rem;padding:2rem;border:3px solid oklch(22% .025 55);background:linear-gradient(135deg,oklch(30% .03 55) 0 .12rem,transparent .12rem 1.4rem),var(--yellow);background-size:1.4rem 1.4rem;color:var(--line);text-align:center;box-shadow:0 0 0 .45rem #fcf8f1,0 .7rem 1rem #27160a2e}.about-plate strong{display:block;font-family:Segoe UI,system-ui,sans-serif;font-size:clamp(2.8rem,8vw,5.5rem);font-weight:900;line-height:.9}.about-plate span{display:block;max-width:32ch;margin-top:1rem;font-weight:800}@media(max-width:1160px){.stage{width:min(1000px,98vw)}.corkboard{width:clamp(22rem,39vw,27rem);left:1rem}.tv-area{width:clamp(20rem,37vw,26rem);right:1rem}.person-button{right:19vw;width:clamp(32rem,55vw,42rem)}}@media(max-width:900px){html,body{overflow:auto}.room-shell{display:block;padding:.75rem}.stage{display:grid;gap:1rem;width:100%;height:auto;min-height:0}.topline,.corkboard,.tv-area,.bio-card,.person-button,.about-hotspot,.signature{position:static;width:auto;transform:none}.topline{display:grid;justify-items:center;gap:.2rem;width:100%;text-align:center}.corkboard{order:3}.tv-area{order:4}.person-button{order:2;width:min(42rem,100%);margin:0 auto}.bio-card{order:5;width:auto;padding:0 .5rem 1.4rem}.about-hotspot,.signature{display:none}.pin-grid{grid-template-columns:1fr}.modal-backdrop{place-items:center;padding:3.1rem .75rem .75rem}.modal{width:min(42rem,96vw);max-height:calc(100svh - 4rem);margin-bottom:0;transform:translateY(.8rem) rotate(0) scale(.985)}.modal-backdrop.is-open .modal{transform:translateY(0) rotate(0) scale(1)}.project-folder:before{background:linear-gradient(180deg,oklch(100% 0 0 / 18%),transparent 30%),linear-gradient(90deg,transparent 0 49.8%,oklch(42% .04 58 / 12%) 50%,transparent 50.2%)}.folder-tab{left:.9rem;max-width:calc(100% - 4.2rem)}.folder-spread{grid-template-columns:1fr;padding:.85rem}.folder-page{min-height:0}.folder-media-page{padding:2.25rem 1.05rem 1.3rem}.modal-media{min-height:0}.modal-copy{padding:1.1rem}.modal h2{font-size:clamp(2rem,12vw,3.15rem)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
/* Baremelon portrait micro-interaction. Kept on the existing shaped hotspot so the PNG's full rectangle does not block nearby project notes. */
.person-button img{transform-origin:50% 78%;transition:transform .22s var(--ease-out),filter .22s var(--ease-out)}
.person-button:has(.about-hotspot:hover) img,.person-button:has(.about-hotspot:focus-visible) img{animation:baremelon-portrait-hover .9s var(--ease-out) infinite alternate;filter:drop-shadow(0 1.45rem 1rem oklch(22% .035 55 / 24%))}
@keyframes baremelon-portrait-hover{0%{transform:translateY(0) rotate(0) scale(1)}100%{transform:translateY(-.32rem) rotate(.45deg) scale(1.012)}}
@media(prefers-reduced-motion:reduce){.person-button:has(.about-hotspot:hover) img,.person-button:has(.about-hotspot:focus-visible) img{animation:none;transform:translateY(-.12rem)}}