/* mostly.eli / notebook and picture drawer, keeping the original visual language intact */
.desktop-nav a[aria-current="page"]{color:#a65f45}
.notebook-intro{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:35px;padding-top:76px;padding-bottom:94px;min-height:520px}
.notebook-intro h1{font:800 clamp(58px,7.8vw,108px)/.98 'DM Sans',system-ui,sans-serif;letter-spacing:-.083em;margin:28px 0}
.notebook-intro h1 i{font:italic 600 .96em 'Fraunces',Georgia,serif;color:#c27a5c;letter-spacing:-.065em}
.notebook-intro .period,.gallery-intro .period{color:#d88468}
.notebook-intro>div>p:not(.eyebrow):not(.notebook-disclaimer){max-width:520px;color:#686b62;font-size:17px;line-height:1.8}
.notebook-labels{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.notebook-labels span{font:600 10px 'DM Mono',monospace;letter-spacing:.04em;border:1px solid #c6baaa;border-radius:30px;padding:9px 12px;background:#fffcf4}
.notebook-intro .notebook-disclaimer{font-size:11px;margin-top:20px;color:#97978d;max-width:490px}
.notebook-intro-art{height:330px;position:relative;display:grid;place-items:center}
.notebook-intro-art:before{content:'';position:absolute;width:250px;height:270px;border-radius:58% 42% 44% 56%;background:#e0e6d3;transform:rotate(18deg)}
.notebook-drawing{font:800 100px 'Fraunces',Georgia,serif;color:#b6cbba;letter-spacing:-40px;transform:rotate(-19deg)}
.notebook-drawing span:nth-child(2){color:#dca77e;font-size:80px}
.notebook-drawing span:nth-child(3){color:#a3b6ae;font-size:90px}
.notebook-sticker{position:absolute;top:15px;left:14px;background:#eed387;border-radius:50%;width:125px;height:125px;display:grid;place-items:center;text-align:center;line-height:1.2;font-size:14px;font-weight:900;transform:rotate(-14deg);z-index:1;box-shadow:0 6px 18px #0001}
.notebook-side-note{position:absolute;right:5px;bottom:24px;color:#bc846e;transform:rotate(-8deg);font-size:26px;line-height:1}
.notebook-desk{padding:65px 0 88px;background:#d7e3d6;overflow:hidden}
.notebook-meta{display:flex;justify-content:space-between;gap:12px;max-width:900px;margin:0 auto 21px;color:#667469;font:600 10px 'DM Mono',monospace;letter-spacing:.1em}
.notebook-paper{max-width:900px;margin:auto;position:relative;transform:rotate(-.6deg);background:#fffdf4;box-shadow:5px 16px 0 rgba(96,112,89,.07),0 25px 70px rgba(41,61,44,.12);border:1px solid #e5ded0}
.notebook-paper:before{content:'';position:absolute;width:96px;height:28px;background:rgba(236,190,133,.5);top:-16px;right:14%;transform:rotate(8deg);z-index:3}
.notebook-holes{position:absolute;top:30px;left:22px;bottom:30px;display:flex;flex-direction:column;justify-content:space-around;z-index:2}
.notebook-holes span{width:15px;height:15px;border-radius:50%;background:#d7e3d6;box-shadow:inset 0 1px 2px #0003}
.paper-inner{position:relative;padding:clamp(36px,7.3vw,95px) clamp(36px,9vw,118px);background:linear-gradient(to right, transparent 69px,rgba(227,158,145,.53) 70px,transparent 71px),repeating-linear-gradient(to bottom,#fffdf4 0px,#fffdf4 34px,rgba(129,155,179,.24) 35px,rgba(129,155,179,.24) 36px);background-position:0 0,0 0;min-height:520px}
.paper-date{font-size:22px;color:#ae7f67;transform:rotate(-3deg);margin-bottom:24px}
.paper-inner h2{font:800 clamp(42px,6vw,70px)/1.04 'DM Sans',system-ui,sans-serif;letter-spacing:-.07em;margin:0 0 39px}
.paper-inner h2 em{font:italic 600 .94em 'Fraunces',Georgia,serif;color:#ae765e}
.paper-entry{font:500 clamp(17px,2.3vw,23px)/1.6 'DM Sans',system-ui,sans-serif;max-width:610px}
.paper-entry p{margin:0 0 21px}
.paper-entry p:last-child{font-weight:800}
.paper-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-top:55px}
.paper-signature{font-size:33px;color:#b47862;transform:rotate(-7deg)}
.paper-postscript{font-size:18px;color:#9c8168;transform:rotate(4deg);line-height:1.18}
.paper-stamp{position:absolute;right:28px;top:42px;border:3px double #cfa998;color:#c29582;padding:10px 17px;text-align:center;font:900 12px/1.2 'DM Mono',monospace;transform:rotate(12deg);letter-spacing:.1em;opacity:.75}
.notebook-after{max-width:900px;margin:44px auto 0;display:grid;grid-template-columns:.93fr 1.07fr;gap:45px;align-items:center}
.notebook-mason-reply{background:#f6df9e;padding:28px 32px 24px;transform:rotate(3deg);box-shadow:2px 8px 20px #0001}
.notebook-mason-reply .eyebrow{color:#928052;font-size:9px}
.notebook-mason-reply .handwritten{font-size:27px;color:#6e6552;line-height:1.28;margin:20px 0}
.notebook-mason-reply>span{font:600 10px 'DM Mono',monospace;letter-spacing:.07em}
.notebook-next>p:not(.eyebrow){font-size:14px;line-height:1.85;color:#607064;margin:10px 0}
.notebook-next .collection-link{display:inline-block;color:#344c42;padding-top:15px}
.notebook-end{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:75px}
.notebook-end .handwritten{color:#b37d68;font-size:24px;transform:rotate(-5deg)}
.gallery-intro{padding-top:92px;padding-bottom:76px;position:relative}
.gallery-intro h1{font:800 clamp(62px,7.5vw,104px)/1.06 'DM Sans',system-ui,sans-serif;letter-spacing:-.08em;margin:30px 0}
.gallery-intro h1 i{font:italic 600 .96em 'Fraunces',Georgia,serif;color:#b87858}
.gallery-intro h1 .period{display:inline-block;font-size:.6em;margin-left:10px;transform:rotate(-10deg)}
.gallery-intro>p:not(.eyebrow){max-width:630px;color:#6f736a;line-height:1.8;font-size:16px}
.gallery-scribble{display:inline-block;margin:32px 0 0 30%;color:#ba7d67;transform:rotate(-6deg);font-size:23px}
.gallery-wall{background:#e5ede4;padding:70px 0 100px}
.gallery-toolbar{display:flex;justify-content:space-between;border-bottom:1px solid #a8b8a8;padding-bottom:20px;color:#677b6c;font:600 11px 'DM Mono',monospace;letter-spacing:.07em}
.gallery-wall-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:start;margin:50px 0}
.gallery-polaroid{background:#fffdf5;padding:13px 13px 22px;box-shadow:0 11px 35px rgba(30,61,49,.09);transform:rotate(-3deg);transition:transform .2s;min-width:0}
.gallery-polaroid:nth-child(2){transform:translateY(25px) rotate(3deg);background:#fff9ef}
.gallery-polaroid:nth-child(3){transform:rotate(-1.5deg)}
.gallery-polaroid:hover{transform:translateY(-6px) rotate(0)}
.gallery-polaroid img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 33%;filter:saturate(.96)}
.gallery-polaroid figcaption{display:flex;justify-content:space-between;align-items:center;gap:5px;padding:17px 4px 0;font:600 10px 'DM Mono',monospace;color:#758078}
.gallery-polaroid figcaption .handwritten{font-size:24px;color:#b77c62}
.gallery-origin{text-align:center;color:#718074;font-size:12px}
.gallery-bottom-links{display:flex;justify-content:center;align-items:center;gap:28px;margin-top:44px;flex-wrap:wrap}
.gallery-notebook-link{font-weight:800;font-size:13px;border-bottom:1px solid currentColor;padding:12px 0}
@media(max-width:820px){.notebook-intro{min-height:0;padding-block:55px;grid-template-columns:1fr}.notebook-intro-art{display:none}.gallery-wall-grid{gap:17px}.notebook-end{padding-block:55px}}
@media(max-width:570px){.notebook-intro h1{font-size:65px}.notebook-intro>div>p:not(.eyebrow):not(.notebook-disclaimer){font-size:14px}.notebook-labels span{font-size:9px}.notebook-desk{padding-top:45px;padding-bottom:55px}.notebook-meta{font-size:8px;flex-wrap:wrap}.notebook-meta span:nth-child(3){display:none}.notebook-paper{transform:none}.notebook-holes{left:9px}.notebook-holes span{width:9px;height:9px}.paper-inner{padding:45px 27px 40px 39px;background:linear-gradient(to right,transparent 25px,rgba(227,158,145,.4) 26px,transparent 27px),repeating-linear-gradient(to bottom,#fffdf4 0px,#fffdf4 34px,rgba(129,155,179,.2) 35px,rgba(129,155,179,.2) 36px)}.paper-date{font-size:17px}.paper-inner h2{font-size:44px}.paper-entry{font-size:18px;line-height:1.6}.paper-stamp{font-size:8px;right:13px;top:15px;border-width:2px;padding:6px;opacity:.5}.paper-bottom{margin-top:35px}.paper-signature{font-size:26px}.paper-postscript{font-size:14px}.notebook-after{grid-template-columns:1fr;gap:35px}.notebook-mason-reply{max-width:95%;margin:auto}.notebook-end{display:block}.notebook-end .handwritten{display:block;font-size:20px;margin-bottom:30px}.gallery-intro{padding-block:60px}.gallery-intro h1{font-size:58px}.gallery-intro>p:not(.eyebrow){font-size:14px}.gallery-scribble{font-size:17px;margin-left:7%}.gallery-wall{padding-block:45px}.gallery-toolbar{font-size:8px}.gallery-wall-grid{grid-template-columns:1fr;gap:27px;max-width:390px;margin:35px auto}.gallery-polaroid,.gallery-polaroid:nth-child(2),.gallery-polaroid:nth-child(3){transform:rotate(-1.5deg)}.gallery-polaroid:nth-child(2){transform:rotate(2deg)}.gallery-polaroid figcaption{font-size:11px}.gallery-bottom-links{gap:15px}}

.notebook-home-preview{background:#f0e9da;padding:85px 0 95px}.notebook-home-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:65px;align-items:center}.notebook-home-copy h2{font:800 clamp(44px,5.4vw,67px)/1.07 'DM Sans',system-ui,sans-serif;letter-spacing:-.075em;margin:16px 0 21px}.notebook-home-copy h2 em{font:italic 600 .98em 'Fraunces',Georgia,serif;color:#bb7d61}.notebook-home-copy>p:not(.eyebrow){color:#7d7b6e;font-size:15px;line-height:1.85;max-width:360px;margin-bottom:39px}.notebook-home-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:47px 52px;min-height:310px;max-width:550px;background:repeating-linear-gradient(to bottom,#fffdf5 0,#fffdf5 37px,#dce6e6 38px,#dce6e6 39px);border-left:5px solid #e1a89a;box-shadow:8px 14px 0 rgba(92,77,59,.06),0 17px 42px rgba(92,77,59,.1);transform:rotate(2deg);transition:transform .2s}.notebook-home-card:hover{transform:rotate(0deg) translateY(-5px)}.notebook-home-card strong{font:800 clamp(35px,4.4vw,55px)/1.05 'DM Sans',system-ui,sans-serif;letter-spacing:-.07em}.notebook-home-card strong i{font:italic 600 .99em 'Fraunces',Georgia,serif;color:#b9785f}.notebook-home-card>.handwritten{font-size:21px;line-height:1.26;color:#a77763;max-width:340px;transform:rotate(-3deg)}.notebook-home-corner{position:absolute;right:20px;top:10px;font-size:40px;color:#d6a379}@media(max-width:820px){.notebook-home-layout{grid-template-columns:1fr;gap:42px}.notebook-home-card{max-width:620px}}@media(max-width:570px){.notebook-home-preview{padding:60px 0 70px}.notebook-home-copy h2{font-size:49px}.notebook-home-card{min-height:290px;padding:35px 30px;transform:rotate(1deg)}.notebook-home-card strong{font-size:42px}.notebook-home-card>.handwritten{font-size:19px}}

/* Real Mason photograph in the existing Meet the Boys card. */
.mason-visual img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 28%;filter:saturate(.94)}
.mason-visual .character-graphic{color:white;text-shadow:0 2px 7px rgba(0,0,0,.45)}

/* The ORIGINAL three-video-still scrapbook strip, moved up and brought back to life. */
.frames-section{position:relative}
.frames-section .frame-grid figure{position:relative;transform-origin:50% 60%;will-change:transform;transition:box-shadow .24s ease,filter .24s ease}
.frames-section .frame-grid figcaption{font-weight:600}
.frames-section .frames-full-gallery{display:flex;justify-content:flex-end;margin-top:28px}
.frames-section .frames-full-gallery a{font:800 12px 'DM Sans',system-ui,sans-serif;letter-spacing:.01em;color:#a66f58;border-bottom:1px solid currentColor;padding-bottom:5px;transition:color .2s}
.frames-section .frames-full-gallery a:hover{color:#55483a}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .frames-section .frame-grid figure:hover{animation:eli-scrapbook-wiggle .62s ease-in-out both;box-shadow:0 20px 35px rgba(46,57,48,.13);z-index:2}
 @keyframes eli-scrapbook-wiggle{
   0%{rotate:0deg;translate:0 0}
   20%{rotate:-3.2deg;translate:0 -5px}
   43%{rotate:3deg;translate:0 -11px}
   67%{rotate:-1.9deg;translate:0 -8px}
   85%{rotate:1.2deg;translate:0 -10px}
   100%{rotate:0deg;translate:0 -9px}
 }
}
@media(max-width:570px){.frames-section .frames-full-gallery{margin-top:23px}.frames-section .frames-full-gallery a{font-size:11px}}
@media(prefers-reduced-motion:reduce){.frames-section .frame-grid figure{will-change:auto;animation:none!important}}

/* Meet-the-boys card navigation: click anywhere; protect the original styling. */
.character-card-link{display:block;position:relative;transition:transform .2s ease,box-shadow .2s ease}
.character-card-link:hover{transform:translateY(-5px);box-shadow:0 17px 42px rgba(26,34,36,.12)}
.character-card-link:focus-visible{outline:3px solid #195e9c;outline-offset:5px}
.character-card-link:hover .resume-card-cta span{transform:translate(3px,-2px)}
.resume-card-cta{display:inline-flex;align-items:center;gap:9px;font:800 11px 'DM Sans',sans-serif;color:#aa7158;border-bottom:1px solid #ca9b7e;padding:15px 0 3px}
.resume-card-cta span{transition:transform .2s}
.mason-visual img{object-position:center 9%}