/* =========================================================
   BELLA LEE — THE MOODBOARD
   One type family (Archivo, variable width + weight) for everything.
   Hierarchy comes from width (62–125), weight (100–900) and case.
   ========================================================= */
:root{
  --paper:#F3EFE7; --paper-2:#E8E2D6; --white:#FBFAF6; --ink:#1E1A19; --muted:#6F6861;
  --oxblood:#14254A; --lime:#C3DBD2; --pink:#F2C6CF; --lavender:#E8D8C6; --cobalt:#C4483A;
  --kraft:#C9AE8C; --butter:#F2E6C2; --line:rgba(30,26,25,.14);
  --f:"Archivo","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(16px,3.6vw,52px); --max:1480px;
  --ease:cubic-bezier(.2,.7,.1,1);
  --grain-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
main,section,header.hero,footer,.tape-wrap{overflow-x:clip}
.tape-wrap{padding:14px 0 6px}
body{font-family:var(--f);font-variation-settings:"wdth" 100;font-size:17px;line-height:1.6;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;background:var(--grain);opacity:.12;mix-blend-mode:multiply;pointer-events:none;z-index:900}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,li,dd,span,a{overflow-wrap:break-word}
.t-display,.t-h2,.t-h3{overflow-wrap:normal;hyphens:manual}
::selection{background:var(--lime);color:var(--ink)}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}

/* ---------- TYPE SCALE (one family) ---------- */
.t-display{font-weight:900;font-stretch:62%;font-variation-settings:"wdth" 62;text-transform:uppercase;line-height:.84;letter-spacing:-.01em}
.t-h2{font-weight:850;font-variation-settings:"wdth" 62;text-transform:uppercase;line-height:.9;font-size:clamp(44px,6.4vw,104px);letter-spacing:-.005em}
.t-h3{font-weight:800;font-variation-settings:"wdth" 75;text-transform:uppercase;line-height:1;font-size:clamp(22px,2vw,30px)}
.t-label{font-weight:600;font-variation-settings:"wdth" 125;text-transform:uppercase;letter-spacing:.14em;font-size:11px;line-height:1.4}
.t-note{font-style:italic;font-weight:400;font-variation-settings:"wdth" 88;line-height:1.35}
.t-lede{font-weight:500;font-variation-settings:"wdth" 88;font-size:clamp(19px,1.7vw,24px);line-height:1.4}
.t-mono{font-weight:500;font-variation-settings:"wdth" 70;letter-spacing:.04em}
.muted{color:var(--muted)}

/* ---------- NAV (tab strip) ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(243,239,231,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.brand b{font-weight:900;font-variation-settings:"wdth" 62;font-size:24px;text-transform:uppercase;letter-spacing:.01em;line-height:1}
.brand span{background:var(--ink);color:var(--paper);padding:4px 7px 3px;font-size:10px}
.tabs{display:flex;gap:6px;list-style:none}
.tabs a{display:block;text-decoration:none;padding:8px 13px;border:1px solid var(--ink);border-radius:8px 8px 0 0;border-bottom-width:3px;transition:background .25s,transform .25s}
.tabs li:nth-child(1) a:hover,.tabs li:nth-child(1) a.on{background:var(--lime)}
.tabs li:nth-child(2) a:hover,.tabs li:nth-child(2) a.on{background:var(--pink)}
.tabs li:nth-child(3) a:hover,.tabs li:nth-child(3) a.on{background:var(--lavender)}
.tabs li:nth-child(4) a:hover,.tabs li:nth-child(4) a.on{background:var(--butter)}
.tabs a:hover{transform:translateY(-2px)}
.nav-cta{text-decoration:none;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:999px;white-space:nowrap}
.nav-cta:hover{background:var(--oxblood)}
.menu-btn{display:none;padding:8px 0}

/* ---------- MATERIALS ---------- */
.paper{background:var(--white);box-shadow:0 1px 1px rgba(0,0,0,.06),0 14px 28px -18px rgba(30,20,15,.45)}
.grid-paper{background-color:#FAF9F4;background-image:linear-gradient(rgba(20,37,74,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(20,37,74,.12) 1px,transparent 1px);background-size:18px 18px}
.lined{background-color:#FCFBF7;background-image:linear-gradient(90deg,transparent 46px,rgba(214,90,110,.55) 46px,rgba(214,90,110,.55) 48px,transparent 48px),repeating-linear-gradient(180deg,transparent 0 29px,rgba(20,37,74,.18) 29px 30px)}
.kraft{background-color:var(--kraft);background-image:var(--grain-l);background-blend-mode:multiply}
.leather{background-color:var(--oxblood);background-image:var(--grain-l),radial-gradient(circle at 30% 20%,rgba(255,255,255,.08),transparent 60%);background-blend-mode:multiply,normal;color:var(--paper)}
.cobalt{background-color:var(--cobalt);background-image:var(--grain-l);background-blend-mode:multiply;color:var(--white)}
.pinkp{background-color:var(--pink);background-image:var(--grain-l);background-blend-mode:multiply}
.lavp{background-color:var(--lavender);background-image:var(--grain-l);background-blend-mode:multiply}
.limep{background-color:var(--lime);background-image:var(--grain-l);background-blend-mode:multiply}
.butterp{background-color:var(--butter);background-image:var(--grain-l);background-blend-mode:multiply}
.blackp{background-color:#211D1D;background-image:var(--grain-l);background-blend-mode:screen;color:var(--paper)}
.denim{background-color:#2F4A78;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.12) 0 2px,transparent 2px 5px),repeating-linear-gradient(-45deg,rgba(0,0,0,.18) 0 1px,transparent 1px 4px)}
.knit{background-color:#E9DDC8;background-image:repeating-linear-gradient(60deg,rgba(120,90,60,.22) 0 3px,transparent 3px 7px),repeating-linear-gradient(-60deg,rgba(120,90,60,.22) 0 3px,transparent 3px 7px)}
.silk{background:linear-gradient(115deg,#F4B9C8 0%,#FBE3EA 30%,#EFA6B8 48%,#FCE7EE 66%,#F2B1C2 100%)}
.tweed{background-color:#8C8577;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.14) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 1px,transparent 1px 4px),var(--grain-l);background-blend-mode:normal,normal,multiply}
.boucle{background-color:#F1ECE2;background-image:radial-gradient(circle,rgba(150,130,110,.35) 1.2px,transparent 1.6px),radial-gradient(circle,rgba(150,130,110,.25) 1px,transparent 1.4px);background-size:7px 7px,11px 11px;background-position:0 0,3px 4px}
.stitch{outline:1.5px dashed rgba(255,255,255,.75);outline-offset:-8px}
.torn{clip-path:var(--tear)}

/* tape, clips, pins, sleeves */
.tape{position:absolute;z-index:4;width:92px;height:26px;top:-12px;left:50%;margin-left:-46px;background:rgba(246,231,161,.78);transform:rotate(-4deg);box-shadow:0 1px 2px rgba(0,0,0,.08);-webkit-mask:linear-gradient(90deg,transparent 0 2px,#000 2px calc(100% - 2px),transparent 0),repeating-linear-gradient(0deg,#000 0 3px,transparent 3px 4px);mask:none}
.tape::before,.tape::after{content:"";position:absolute;top:0;bottom:0;width:6px;background:inherit}
.tape.pink{background:rgba(244,185,200,.8)}
.tape.clear{background:rgba(255,255,255,.55);backdrop-filter:blur(1px)}
.tape.black{background:#1E1A19;height:22px;width:74px;margin-left:-37px}
.tape.x{transform:rotate(38deg)}
.tape.tl{left:-14px;top:-8px;margin:0;transform:rotate(-38deg);width:70px}
.tape.tr{left:auto;right:-14px;top:-8px;margin:0;transform:rotate(38deg);width:70px}
.clip{position:absolute;z-index:5;top:-22px;left:50%;width:56px;height:52px;margin-left:-28px;pointer-events:none}
.pin{position:absolute;z-index:5;top:-8px;left:50%;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff 0 2px,var(--c,#C4483A) 3px 100%);box-shadow:2px 3px 3px rgba(0,0,0,.28)}
.sleeve{position:absolute;inset:-10px -10px -10px -26px;z-index:3;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.05) 28%,rgba(255,255,255,.28) 42%,rgba(255,255,255,.02) 60%,rgba(255,255,255,.22) 100%);border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.sleeve::before{content:"";position:absolute;left:5px;top:4%;bottom:4%;width:12px;background:radial-gradient(circle,rgba(243,239,231,.95) 3.5px,transparent 4px) 0 0/12px 36px repeat-y}
.corners::before,.corners::after{content:"";position:absolute;z-index:4;width:28px;height:28px;background:linear-gradient(135deg,#1E1A19 50%,transparent 50%)}
.corners::before{top:-4px;left:-4px}
.corners::after{bottom:-4px;right:-4px;transform:rotate(180deg)}

/* label-maker strip & woven label */
.dymo{display:inline-block;background:#1E1A19;color:#F3EFE7;font-weight:700;font-variation-settings:"wdth" 70;text-transform:uppercase;letter-spacing:.14em;font-size:11px;padding:5px 9px 4px;border-radius:2px;box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 2px rgba(0,0,0,.3)}
.dymo.lime{background:var(--lime);color:var(--ink)}
.dymo.pink{background:var(--pink);color:var(--ink)}
.dymo.cobalt{background:var(--cobalt);color:#fff}
.woven{display:inline-block;background:#F4F0E6;border:1px solid #d8d1c2;padding:9px 16px 8px;font-weight:700;font-variation-settings:"wdth" 70;letter-spacing:.2em;text-transform:uppercase;font-size:12px;box-shadow:0 2px 6px rgba(0,0,0,.15);position:relative}
.woven::before,.woven::after{content:"";position:absolute;top:50%;width:10px;height:12px;margin-top:-6px;background:#1E1A19;border-radius:2px}
.woven::before{left:-5px}.woven::after{right:-5px}

/* hang tag */
.tag{position:relative;background:var(--white);border:1px solid #ddd6c9;border-radius:6px 6px 14px 14px;padding:46px 16px 16px;box-shadow:0 12px 24px -14px rgba(0,0,0,.4);text-align:center}
.tag::before{content:"";position:absolute;top:14px;left:50%;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--paper);box-shadow:inset 0 1px 3px rgba(0,0,0,.35)}
.tag .string{position:absolute;top:-70px;left:50%;width:80px;height:95px;margin-left:-6px;pointer-events:none}

/* sticky note */
.sticky{position:relative;padding:18px 18px 22px;background:var(--butter);box-shadow:0 14px 22px -14px rgba(0,0,0,.45);font-style:italic;font-variation-settings:"wdth" 88;line-height:1.35}
.sticky.pink{background:#F5D2D9}.sticky.lime{background:#D3E4DC}.sticky.lav{background:#EDE0D0}
.sticky::after{content:"";position:absolute;right:0;bottom:0;border-style:solid;border-width:0 0 18px 18px;border-color:transparent transparent rgba(0,0,0,.08) transparent}

/* film strip */
.film{background:#1C1818;padding:22px 12px;position:relative}
.film::before,.film::after{content:"";position:absolute;left:0;right:0;height:12px;background:repeating-linear-gradient(90deg,transparent 0 6px,#F3EFE7 6px 16px,transparent 16px 24px);opacity:.9}
.film::before{top:5px}.film::after{bottom:5px}
.film.v{padding:12px 22px}
.film.v::before,.film.v::after{top:0;bottom:0;left:auto;right:auto;width:12px;height:auto;background:repeating-linear-gradient(180deg,transparent 0 6px,#F3EFE7 6px 16px,transparent 16px 24px)}
.film.v::before{left:5px}.film.v::after{right:5px}

/* swatch chips */
.chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 6px}
.chip{gap:6px!important}
.chip{display:flex;align-items:center;gap:8px;min-width:0}
.chip i{display:block;width:20px;height:20px;flex:none;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.chip span{display:block;min-width:0;font-size:10px;overflow-wrap:normal;word-break:normal;font-weight:600;font-variation-settings:"wdth" 75;letter-spacing:.06em;text-transform:uppercase;line-height:1.25}

/* scribbles */
.draw path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--len,500);stroke-dashoffset:var(--len,500);transition:stroke-dashoffset 1.4s cubic-bezier(.6,0,.2,1) .3s}
.in .draw path,.draw.in path{stroke-dashoffset:0}

/* photo wrapper */
.ph{position:relative;display:block;background:var(--white);padding:8px;box-shadow:0 2px 3px rgba(0,0,0,.08),0 18px 30px -20px rgba(30,20,15,.6);transition:transform .5s var(--ease),box-shadow .5s;text-decoration:none;color:inherit}
.ph.bare{padding:0}
.ph.polar{padding:8px 8px 34px}
.ph img{width:100%;height:100%;object-fit:cover}
.ph .cap{position:absolute;left:10px;bottom:9px;font-style:italic;font-size:13px;font-variation-settings:"wdth" 88}
a.ph:hover,button.ph:hover{transform:rotate(0) translateY(-6px) scale(1.02)!important;box-shadow:0 2px 3px rgba(0,0,0,.08),0 30px 40px -22px rgba(30,20,15,.7);z-index:20}
.mblur{position:relative;overflow:hidden}
.mblur .ghost{position:absolute;inset:0;filter:url(#mblur);opacity:0;transition:opacity .5s,transform .8s var(--ease);transform:translateX(-4%);pointer-events:none}
.mblur:hover .ghost{opacity:.85;transform:translateX(4%)}

/* reveal / drop */
.drop{opacity:0;transform:translateY(-26px) rotate(var(--r,0deg)) scale(1.03);transition:opacity .7s var(--ease),transform .9s var(--ease)}
.drop.in{opacity:1;transform:rotate(var(--r,0deg))}
.rise{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rise.in{opacity:1;transform:none}

/* ---------- HOME HERO BOARD ---------- */
.hero{padding-top:clamp(24px,3vw,44px);padding-bottom:clamp(40px,5vw,70px)}
.board{display:grid;grid-template-columns:minmax(0,21fr) minmax(0,50fr) minmax(0,29fr);gap:clamp(18px,2.4vw,40px);align-items:start}
.bcol{display:flex;flex-direction:column;min-width:0}
.bcol.l{padding-top:10px}
.bcol.l .b-3{width:82%;margin:34px 0 0 14%}
.bcol.r .b-2 .ph{aspect-ratio:1844/1190}
.bcol.r .rrow2{display:flex;align-items:flex-start;gap:14px;margin-top:30px}
.bcol.r .b-sw{width:48%;flex:none}
.bcol.r .b-4{flex:1;margin-top:26px}
.b-1 .ph{aspect-ratio:1500/1919}
.b-3 .ph{aspect-ratio:4/5}
.b-4 .ph{aspect-ratio:1/1}
.b-top{display:flex;align-items:flex-start;gap:16px}
.b-film{flex:1;min-width:0}
.b-film .frames{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.b-film img{aspect-ratio:3/4;object-fit:cover;width:100%}
.b-fabric{width:17%;flex:none;aspect-ratio:1/1.3}
.b-title{margin-top:22px;padding:clamp(22px,2.6vw,36px) clamp(22px,2.6vw,38px) clamp(24px,2.8vw,40px);position:relative;z-index:3}
.b-title h1{font-size:clamp(64px,9.6vw,156px)}
.b-title h1 em{font-style:normal;color:var(--oxblood)}
.b-title .roles{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.b-title p{margin-top:16px;max-width:44ch}
.b-bot{display:flex;align-items:flex-start;gap:18px;margin-top:26px;flex-wrap:wrap}
.b-tag{width:132px;flex:none}
.b-sticky{width:clamp(200px,17vw,250px);flex:none}
.b-cta{flex:none;padding-top:6px}
.sw-card{background:var(--white);padding:10px 10px 12px;box-shadow:0 14px 24px -16px rgba(0,0,0,.45)}
.cta-tab{display:inline-flex;align-items:center;gap:10px;text-decoration:none;background:var(--lime);border:1.5px solid var(--ink);padding:12px 18px;border-radius:12px 12px 0 0;border-bottom-width:4px;transition:transform .25s}
.cta-tab:hover{transform:translateY(-3px)}

/* ---------- MARQUEE TAPE ---------- */
.tape-run{background:var(--lime);border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);overflow:hidden;white-space:nowrap;transform:rotate(-1.2deg);margin:10px -2% 0;width:104%}
.tape-run div{display:inline-block;padding:12px 0;animation:run 38s linear infinite}
.tape-run span{margin:0 18px}
.tape-run i{font-style:normal;margin:0 6px}
@keyframes run{to{transform:translateX(-50%)}}

/* ---------- SECTION HEADS ---------- */
.sec{padding-top:clamp(70px,8vw,120px);padding-bottom:clamp(40px,5vw,70px)}
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:24px 48px;align-items:end;margin-bottom:clamp(30px,4vw,50px)}
.head .kick{margin-bottom:12px;display:inline-block}
.head p{justify-self:end}

/* ---------- WORK BOARD (index) ---------- */
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:28px}
.filters button{padding:9px 14px;border:1.5px solid var(--ink);border-radius:10px 10px 0 0;border-bottom-width:3px;transition:.25s}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.filters button:hover{transform:translateY(-2px)}
.wall{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(26px,3.2vw,48px) clamp(16px,2vw,30px);align-items:start}
.card{grid-column:span 4;position:relative;text-decoration:none;color:inherit;display:block;transition:transform .5s var(--ease),opacity .4s}
.card.w6{grid-column:span 6}.card.w5{grid-column:span 5}.card.w7{grid-column:span 7}.card.w3{grid-column:span 3}
.card.dim{opacity:.18;pointer-events:none}
.card .sheet{position:relative;padding:14px 14px 18px;transform:rotate(var(--r,0deg));transition:transform .5s var(--ease),box-shadow .5s;box-shadow:0 18px 30px -22px rgba(30,20,15,.6)}
.card:hover .sheet{transform:rotate(0) translateY(-6px)}
.card .img{position:relative;aspect-ratio:var(--ar,4/5);overflow:hidden;background:var(--paper-2)}
.card .img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.card:hover .img img{transform:scale(1.04)}
.card .meta{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-top:14px}
.card .no{font-weight:900;font-variation-settings:"wdth" 62;font-size:40px;line-height:.8}
.card h3{margin-top:8px}
.card p{font-size:15px;margin-top:6px;line-height:1.45}
.card .dymos{display:flex;gap:5px;flex-wrap:wrap;margin-top:12px}
.card .open{position:absolute;right:12px;top:12px;z-index:6;background:var(--white);border-radius:999px;padding:6px 11px;opacity:0;transform:translateY(-6px);transition:.35s}
.card:hover .open{opacity:1;transform:none}

/* ---------- PROCESS FILM ---------- */
.reel{overflow-x:auto;scrollbar-width:thin;padding-bottom:10px}
.reel .film{display:flex;gap:10px;width:max-content}
.reel button{flex:none;height:clamp(180px,22vw,280px);background:#000;padding:0}
.reel img{height:100%;width:auto;max-width:none;opacity:.92;transition:opacity .3s}
.reel button:hover img{opacity:1}
.reel-note{display:flex;justify-content:space-between;gap:16px;margin-top:14px;flex-wrap:wrap}

/* ---------- ABOUT ---------- */
.about{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px;align-items:start}
.nb{grid-column:1 / span 7;padding:44px 40px 40px 72px;position:relative;--r:-.6deg;transform:rotate(var(--r))}
.nb .rings{position:absolute;left:14px;top:22px;bottom:22px;width:22px;background:radial-gradient(circle at 50% 50%,#bbb 0 5px,#777 5.5px 6.5px,transparent 7px) 0 0/22px 44px repeat-y}
.nb h3{margin-bottom:14px}
.nb p{margin-bottom:14px;line-height:30px;max-width:62ch}
.id{grid-column:9 / span 4;display:grid;gap:26px}
.idcard{padding:20px;--r:2.5deg;transform:rotate(var(--r))}
.idcard dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin-top:12px;font-size:14px}
.idcard dt{opacity:.7}
.swatches{grid-column:1 / -1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin-top:20px}
.swatch{position:relative;transition:transform .4s var(--ease)}
.swatch:nth-child(odd){transform:rotate(-2deg)}.swatch:nth-child(even){transform:rotate(2deg)}
.swatch:hover{transform:rotate(0) translateY(-4px)}
.swatch .fab{aspect-ratio:1/1.1;border-radius:2px;box-shadow:0 12px 22px -14px rgba(0,0,0,.5);clip-path:polygon(0 0,100% 0,100% 94%,96% 100%,92% 94%,88% 100%,84% 94%,80% 100%,76% 94%,72% 100%,68% 94%,64% 100%,60% 94%,56% 100%,52% 94%,48% 100%,44% 94%,40% 100%,36% 94%,32% 100%,28% 94%,24% 100%,20% 94%,16% 100%,12% 94%,8% 100%,4% 94%,0 100%)}
.swatch .lab{background:var(--white);padding:10px 12px 12px;margin-top:-4px;box-shadow:0 10px 18px -14px rgba(0,0,0,.4)}
.swatch .lab b{display:block;font-weight:800;font-variation-settings:"wdth" 75;text-transform:uppercase;font-size:15px;line-height:1.1}
.swatch .lab span{font-size:13px;color:var(--muted);line-height:1.35;display:block;margin-top:4px}
.stubs{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.stub{display:flex;background:var(--white);box-shadow:0 12px 22px -16px rgba(0,0,0,.45);min-width:0}
.stub .l{padding:16px 18px;flex:1;min-width:0}
.stub .r{width:64px;flex:none;border-left:2px dashed var(--line);display:grid;place-items:center;font-weight:900;font-variation-settings:"wdth" 62;font-size:26px;writing-mode:vertical-rl;transform:rotate(180deg)}
.stub h4{font-weight:800;font-variation-settings:"wdth" 75;text-transform:uppercase;font-size:17px;line-height:1.15}
.stub p{font-size:14px;color:var(--muted);margin-top:4px;line-height:1.4}

/* ---------- CONTACT / ENVELOPE ---------- */
.contact{background:var(--oxblood);background-image:var(--grain-l);background-blend-mode:multiply;color:var(--paper);padding:clamp(70px,8vw,120px) 0 30px;position:relative;overflow:hidden}
.env{position:relative;max-width:980px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:0}
.letter{background:var(--white);color:var(--ink);padding:40px 38px 34px;transform:rotate(-2deg);box-shadow:0 30px 50px -30px rgba(0,0,0,.7);position:relative;z-index:2}
.letter h2{font-size:clamp(40px,5.4vw,84px)}
.letter .mail{display:inline-block;margin-top:22px;font-weight:700;font-variation-settings:"wdth" 88;font-size:clamp(18px,2vw,26px);text-decoration:none;border-bottom:2px solid var(--lime);max-width:100%;word-break:break-all}
.letter .mail:hover{background:var(--lime)}
.letter .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;border:1.5px solid var(--ink);border-radius:999px;padding:10px 16px;transition:.25s;white-space:nowrap}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.fill{background:var(--ink);color:var(--paper)}
.btn.fill:hover{background:var(--cobalt);border-color:var(--cobalt)}
.envelope{position:relative;aspect-ratio:1.45/1;background:#F2C6CF;background-image:var(--grain-l);background-blend-mode:multiply;margin-left:-40px;transform:rotate(3deg);box-shadow:0 30px 50px -30px rgba(0,0,0,.7);overflow:hidden}
.envelope::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom right,transparent 49.6%,rgba(0,0,0,.12) 50%,transparent 50.4%),linear-gradient(to bottom left,transparent 49.6%,rgba(0,0,0,.12) 50%,transparent 50.4%)}
.envelope .stamp{position:absolute;right:18px;top:18px;width:74px;height:90px;background:var(--cobalt);color:#fff!important;padding:6px;outline:3px dotted var(--white);outline-offset:-2px;display:grid;place-items:center;text-align:center;font-weight:900;font-variation-settings:"wdth" 62;text-transform:uppercase;line-height:.9;font-size:18px;color:var(--ink)}
.envelope .addr{position:absolute;left:14%;bottom:18%;color:var(--ink);font-style:italic;font-size:15px;line-height:1.5}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:70px;padding-top:16px;border-top:1px solid rgba(243,239,231,.25);opacity:.85}
.foot a{text-decoration:none}

/* =========================================================
   PROJECT PAGE
   ========================================================= */
.p-top{padding-top:clamp(24px,3vw,44px)}
.crumb{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.crumb a{text-decoration:none}.crumb a:hover{text-decoration:underline}
.folder{position:relative;padding:clamp(26px,3.4vw,48px);border-radius:0 14px 4px 4px;margin-top:34px}
.folder .ftab{position:absolute;left:0;top:-34px;height:34px;padding:0 20px;display:flex;align-items:center;border-radius:12px 12px 0 0;background:inherit}
.fgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px;align-items:start}
.ftext{grid-column:1 / span 6;position:relative;z-index:2}
.ftext h1{font-size:clamp(58px,9vw,150px);margin-top:10px}
.ftext .sub{margin-top:14px}
.ftext .dek{margin-top:18px;max-width:40ch}
.fdecor{grid-column:7 / span 6;position:relative;min-height:clamp(380px,40vw,560px)}
.fdecor .hero-ph{position:absolute;left:4%;top:0;width:66%;--r:3deg}
.fdecor .hero-ph .ph{aspect-ratio:4/5}
.fdecor .ptag{position:absolute;right:2%;top:14%;width:34%;--r:-6deg;z-index:6}
.fdecor .pchips{position:absolute;right:0;bottom:4%;width:48%;--r:-2deg;z-index:7}
.fdecor .pchips .sw-card{background:var(--white);padding:10px 10px 12px;box-shadow:0 14px 24px -16px rgba(0,0,0,.45)}
.words{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.words span{padding:7px 12px;border-radius:999px;border:1.5px solid currentColor;font-size:14px;font-style:italic;font-variation-settings:"wdth" 88}

.brief{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:30px;align-items:start;padding-top:clamp(60px,7vw,100px)}
.brief .nbk{grid-column:1 / span 7;padding:38px 36px 34px 70px;position:relative;transform:rotate(-.5deg)}
.brief .nbk .rings{position:absolute;left:14px;top:22px;bottom:22px;width:22px;background:radial-gradient(circle at 50% 50%,#bbb 0 5px,#777 5.5px 6.5px,transparent 7px) 0 0/22px 44px repeat-y}
.brief .nbk p{line-height:30px;margin-bottom:15px;max-width:64ch}
.brief .side{grid-column:9 / span 4;display:grid;gap:28px}
.receipt{background:var(--white);padding:22px 20px 26px;box-shadow:0 14px 26px -18px rgba(0,0,0,.5);transform:rotate(1.5deg);clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),96% 100%,92% calc(100% - 8px),88% 100%,84% calc(100% - 8px),80% 100%,76% calc(100% - 8px),72% 100%,68% calc(100% - 8px),64% 100%,60% calc(100% - 8px),56% 100%,52% calc(100% - 8px),48% 100%,44% calc(100% - 8px),40% 100%,36% calc(100% - 8px),32% 100%,28% calc(100% - 8px),24% 100%,20% calc(100% - 8px),16% 100%,12% calc(100% - 8px),8% 100%,4% calc(100% - 8px),0 100%)}
.receipt h4{text-align:center;padding-bottom:12px;border-bottom:1.5px dashed var(--ink);margin-bottom:12px}
.receipt dl > div{padding:8px 0;border-bottom:1px dashed var(--line)}
.receipt dt{font-size:11px}
.receipt dd{font-size:14px;line-height:1.45;margin-top:2px}
.receipt ul{list-style:none}
.receipt .tot{display:flex;justify-content:space-between;margin-top:12px;font-weight:800;font-variation-settings:"wdth" 75;text-transform:uppercase}
.quote{font-size:clamp(20px,1.8vw,25px);font-weight:500;padding:24px 22px 28px;transform:rotate(-2deg)}
.checks{list-style:none;margin:6px 0 12px}
.checks li{padding:3px 0 3px 26px;position:relative;line-height:30px}
.checks li::before{content:"";position:absolute;left:0;top:10px;width:14px;height:14px;border:1.5px solid var(--ink);border-radius:2px;background:linear-gradient(45deg,transparent 45%,var(--cobalt) 45% 55%,transparent 55%),linear-gradient(-45deg,transparent 45%,var(--cobalt) 45% 55%,transparent 55%)}

/* boards (collage) */
.bsec{padding-top:clamp(70px,8vw,110px)}
.bhead{display:flex;align-items:flex-end;gap:16px 26px;flex-wrap:wrap;margin-bottom:22px}
.bhead .bn{font-weight:900;font-variation-settings:"wdth" 62;font-size:clamp(56px,6vw,96px);line-height:.8}
.bhead .bt{flex:1;min-width:220px}
.bhead h2{font-size:clamp(34px,4vw,62px)}
.canvas{position:relative;padding:clamp(28px,4vw,56px);border-radius:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.collage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(26px,3vw,46px);gap:0}
.collage .it{position:relative;z-index:var(--z,2);transform:rotate(var(--r,0deg))}
.collage .it .ph{width:100%;height:100%;cursor:zoom-in;border:0}
.collage .it .ph img{width:100%;height:100%;object-fit:cover}
.collage .note{position:relative;z-index:12;align-self:start}
.collage .note .sticky{font-size:16px}
.collage .kw{z-index:12;align-self:center;justify-self:center;transform:rotate(var(--r,0deg))}
.string{position:absolute;inset:0;pointer-events:none;z-index:11;width:100%;height:100%}
.string path{fill:none;stroke:#C0392B;stroke-width:1.6;stroke-dasharray:4 5;opacity:.7}
.bfoot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px}

/* contact sheet */
.sheet-sec{padding-top:clamp(70px,8vw,110px)}
.csheet{columns:4 220px;column-gap:14px}
.csheet button{display:block;width:100%;margin-bottom:14px;break-inside:avoid;background:var(--white);padding:6px 6px 26px;box-shadow:0 10px 18px -14px rgba(0,0,0,.45);position:relative;cursor:zoom-in;transition:transform .35s var(--ease)}
.csheet button:hover{transform:translateY(-4px) rotate(-.6deg)}
.csheet img{width:100%;height:auto}
.csheet .n{position:absolute;left:8px;bottom:6px;font-size:11px;font-weight:600;font-variation-settings:"wdth" 75;letter-spacing:.08em}

/* next project */
.nextp{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px;align-items:center;padding:clamp(70px,8vw,110px) 0 clamp(50px,6vw,80px)}
.nextp .l{grid-column:1 / span 5}
.nextp .r{grid-column:7 / span 6}
.nextp a.big{text-decoration:none;display:block}
.nextp a.big:hover h2{color:var(--cobalt)}
.nextp .ph{aspect-ratio:16/11;--r:2deg;transform:rotate(var(--r))}
.pn{display:flex;justify-content:space-between;gap:16px;margin-top:22px;padding-top:14px;border-top:1.5px solid var(--ink)}
.pn a{text-decoration:none;max-width:48%}
.pn a:hover{color:var(--cobalt)}

/* ---------- LIGHTBOX ---------- */
.lb{position:fixed;inset:0;z-index:1000;background:rgba(30,26,25,.94);display:none;flex-direction:column;align-items:center;justify-content:center;padding:64px 76px 76px}
.lb.open{display:flex}
.lb img{max-width:100%;max-height:calc(100svh - 170px);object-fit:contain;background:#fff;padding:8px;box-shadow:0 30px 60px -30px #000}
.lb .cap{margin-top:16px;color:var(--paper);display:flex;gap:16px;flex-wrap:wrap;justify-content:center;text-align:center}
.lb button{position:absolute;width:48px;height:48px;border-radius:50%;background:var(--paper);color:var(--ink);font-size:18px;transition:.2s}
.lb button:hover{background:var(--lime)}
.lb .x{top:14px;right:14px}.lb .prev{left:14px;top:50%;margin-top:-24px}.lb .next{right:14px;top:50%;margin-top:-24px}

/* ---------- CV ---------- */
.cvp{padding:clamp(28px,4vw,50px) clamp(24px,4vw,56px) 50px;margin-top:22px;position:relative}
.cvh{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:end;border-bottom:2px solid var(--ink);padding-bottom:22px}
.cvh h1{font-size:clamp(60px,9vw,140px)}
.cvs{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:14px 40px;padding:26px 0;border-bottom:1px solid var(--line)}
.cvi{padding:10px 0 14px}
.cvi + .cvi{border-top:1px dashed var(--line)}
.cvi .row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cvi h3{font-weight:800;font-variation-settings:"wdth" 75;text-transform:uppercase;font-size:20px;line-height:1.2}
.cvi ul{padding-left:18px;margin-top:6px}
.draft{font-size:13px;color:var(--muted);border:1.5px dashed var(--line);padding:10px 12px;margin-top:8px}
.pills{display:flex;flex-wrap:wrap;gap:6px}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1060px){
  .card,.card.w5,.card.w3{grid-column:span 6}.card.w6,.card.w7{grid-column:span 6}
}
@media (max-width:900px){
  .tabs{display:none}
  .tabs.open{display:flex;flex-direction:column;position:fixed;top:60px;left:0;right:0;background:var(--paper);padding:10px var(--gutter) 16px;border-bottom:1.5px solid var(--ink);gap:8px}
  .tabs.open a{border-radius:8px}
  .menu-btn{display:block}
  .nav-cta{display:none}
  .board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bcol.c{grid-column:1 / -1;order:-1}
  .bcol.l .b-3{width:90%;margin:24px 0 0 8%}
  .b-fabric{display:none}
  .head{grid-template-columns:1fr}.head p{justify-self:start}
  .card,.card.w3,.card.w5,.card.w6,.card.w7{grid-column:span 6}
  .nb,.id,.brief .nbk,.brief .side,.ftext,.fdecor,.nextp .l,.nextp .r{grid-column:1 / -1}
  .fdecor{min-height:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px 14px}
  .fdecor > *{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:auto!important}
  .fdecor .hero-ph{grid-column:1 / span 4}.fdecor .ptag{grid-column:5 / span 2;align-self:center}.fdecor .pchips{grid-column:1 / -1}
  .swatches{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stubs{grid-template-columns:1fr}
  .env{grid-template-columns:1fr}
  .envelope{margin:-20px 20px 0 30px}
  /* collage -> tidy 2-up */
  .collage{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:22px 14px}
  .collage .it,.collage .note,.collage .kw{grid-column:auto!important;grid-row:auto!important}
  .collage .it .ph{aspect-ratio:4/5;height:auto}
  .collage .it.wide{grid-column:1 / -1!important}
  .collage .it.wide .ph{aspect-ratio:16/11}
  .collage .note{grid-column:1 / -1!important}
  .collage .kw{justify-self:start}
  .string{display:none}
  .cvs{grid-template-columns:1fr}
  .cvh{grid-template-columns:1fr}
}
@media (max-width:600px){
  body{font-size:16px}
  .card,.card.w3,.card.w5,.card.w6,.card.w7{grid-column:1 / -1}
  .swatches{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nb,.brief .nbk{padding:30px 20px 26px 50px}
  .nb .rings,.brief .nbk .rings{left:8px}
  .letter{padding:30px 22px 26px}
  .lb{padding:60px 10px 86px}
  .lb .prev,.lb .next{top:auto;bottom:16px;margin-top:0}
  .lb .prev{left:calc(50% - 60px)}.lb .next{right:calc(50% - 60px)}
  .collage{grid-template-columns:1fr 1fr}
  .csheet{columns:2 140px}
  .folder{padding:24px 18px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .drop,.rise{opacity:1;transform:rotate(var(--r,0deg))}
  .draw path{stroke-dashoffset:0}
  html{scroll-behavior:auto}
}
@media print{.nav,.lb,.no-print{display:none!important}body::after{display:none}body{background:#fff}}

/* =========================================================
   ADDITIONS FROM ROUND-2 REFERENCES
   folder dividers · vertical tab folders · ribbon palette ·
   big contents index · risograph / halftone print
   ========================================================= */

/* ---- stacked folder dividers (work index) ---- */
.folders{position:relative;padding-top:80px}
.fd{position:relative;display:block;text-decoration:none;color:inherit;margin-top:96px;transition:transform .45s var(--ease),opacity .4s}
.fd:first-child{margin-top:0}
.fd .body{position:relative;border-radius:0 0 6px 6px;padding:22px clamp(18px,3vw,40px) 26px;min-height:200px;display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:18px 36px;align-items:start;padding-right:clamp(230px,24vw,380px)!important;box-shadow:0 -1px 0 rgba(0,0,0,.05),0 -10px 24px -18px rgba(0,0,0,.35);background-color:var(--c);background-image:var(--grain-l);background-blend-mode:multiply}
.fd .tab{position:absolute;top:-44px;left:var(--x,6%);height:46px;padding:0 26px;display:flex;align-items:center;gap:12px;border-radius:14px 14px 0 0;background-color:var(--c);background-image:var(--grain-l);background-blend-mode:multiply;white-space:nowrap;max-width:88%}
.fd .tab b{font-weight:850;font-variation-settings:"wdth" 75;text-transform:uppercase;font-size:clamp(15px,1.4vw,19px);letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis}
.fd .tab i{font-style:normal;font-weight:600;font-size:11px;letter-spacing:.14em;opacity:.7;flex:none}
.fd .peek{position:absolute;right:clamp(40px,6vw,100px);top:-118px;width:clamp(120px,13vw,190px);aspect-ratio:4/5;z-index:1;transform:rotate(var(--r,4deg));transition:transform .5s var(--ease);background:#fff;padding:6px;box-shadow:0 10px 20px -12px rgba(0,0,0,.5)}
.fd .peek img{width:100%;height:100%;object-fit:cover}
.fd .body{z-index:2}
.fd .clipper{position:absolute;right:calc(clamp(40px,6vw,100px) + 30px);top:-22px;width:44px;height:48px;z-index:3}
.fd:hover{transform:translateY(-16px)}
.fd:hover .peek{transform:rotate(0) translateY(-26px)}
.fd .no{font-weight:900;font-variation-settings:"wdth" 62;font-size:clamp(54px,6vw,92px);line-height:.8}
.fd .desc{font-size:15.5px;line-height:1.45;max-width:46ch}
.fd .go{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.fd .go b{display:inline-block;transition:transform .3s}
.fd:hover .go b{transform:translateX(6px)}
.fd.dark{color:var(--paper)}
.fd.dim{opacity:.28}
.fd .dymos{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}

/* ---- vertical tabbed folders (graphic edit) ---- */
.vfolders{display:flex;height:clamp(520px,62vw,760px);background-color:#F0D3D9;background-image:var(--grain-l);background-blend-mode:multiply;padding:0 0 0 0;border-radius:4px;overflow:hidden}
.vf{position:relative;flex:1;min-width:0;display:block;text-decoration:none;color:inherit;border-left:2px solid rgba(94,27,32,.12);transition:flex .7s var(--ease)}
.vf:first-child{flex:1.3;border-left:0}
.vf:hover{flex:1.7}
.vf .strip{position:absolute;inset:0;overflow:hidden}
.vf .strip img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.vf:hover .strip img{transform:scale(1.04)}
.vf .sheet{position:absolute;left:0;top:0;bottom:0;width:34%;min-width:58px;max-width:110px;background-color:#F6DFE3;background-image:repeating-linear-gradient(180deg,rgba(94,27,32,.06) 0 1px,transparent 1px 5px);z-index:2;box-shadow:6px 0 14px -10px rgba(0,0,0,.35)}
.vf .vtab{position:absolute;left:calc(min(34%,110px) - 4px);top:var(--t,40px);z-index:3;background:#F6DFE3;border-radius:0 12px 12px 0;padding:18px 9px;box-shadow:4px 0 10px -8px rgba(0,0,0,.4)}
.vf .vtab span{display:block;writing-mode:vertical-rl;transform:rotate(180deg);background:var(--white);padding:10px 5px;font-size:12px;font-weight:600;font-variation-settings:"wdth" 88;white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.vf .vt{position:absolute;left:12px;bottom:18px;z-index:3;writing-mode:vertical-rl;transform:rotate(180deg);font-weight:900;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:clamp(26px,2.8vw,44px);line-height:1.1;color:var(--oxblood);white-space:nowrap}
.vf.lead .sheet{width:100%;max-width:none}
.vf.lead .vt{font-size:clamp(46px,5.4vw,86px);left:18px;bottom:22px;white-space:nowrap}
.vf.lead .lead-copy{position:absolute;right:18px;top:22px;left:clamp(70px,34%,120px);z-index:3;color:var(--oxblood)}
.vf.lead .lead-copy p{font-size:15px;line-height:1.45;margin-top:8px}

/* ---- ribbon palette board ---- */
.ribbons{background:var(--white);padding:clamp(22px,3vw,40px);box-shadow:0 18px 34px -24px rgba(0,0,0,.5);position:relative}
.ribbons .rtitle{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.rrow{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(6px,1vw,14px);height:clamp(220px,26vw,330px)}
.rb{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:12px;height:100%;justify-content:flex-end}
.rb .band{width:72%;height:var(--h,80%);border-radius:1px;position:relative;box-shadow:2px 6px 10px -6px rgba(0,0,0,.35);transform:rotate(var(--r,0deg));transform-origin:top center}
.rb .band.satin{background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(255,255,255,.28) 30%,rgba(0,0,0,.05) 55%,rgba(255,255,255,.18) 75%,rgba(0,0,0,.2)),var(--c)}
.rb .band.grosgrain{background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px),linear-gradient(90deg,rgba(0,0,0,.12),transparent 20%,transparent 80%,rgba(0,0,0,.12)),var(--c)}
.rb .band.velvet{background:radial-gradient(ellipse at 40% 30%,rgba(255,255,255,.18),transparent 60%),linear-gradient(90deg,rgba(0,0,0,.25),transparent 25%,transparent 75%,rgba(0,0,0,.25)),var(--c)}
.rb .band::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:10px;background:inherit;clip-path:polygon(0 0,100% 0,100% 100%,50% 30%,0 100%)}
.rb .code{writing-mode:vertical-rl;transform:rotate(180deg);font-size:10px;font-weight:600;font-variation-settings:"wdth" 75;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:var(--muted)}
.rb .dot{width:14px;height:14px;border-radius:50%;background:var(--c);flex:none}

/* ---- big contents index ---- */
.index-title{white-space:nowrap;font-size:clamp(70px,19vw,300px);line-height:.8;letter-spacing:-.01em;display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.index-title small{font-weight:600;font-variation-settings:"wdth" 125;font-size:clamp(11px,1vw,14px);letter-spacing:.14em;text-transform:uppercase;line-height:1.3;padding-bottom:1.2em;text-align:right}
.index-thumbs{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:6px;margin-bottom:-2vw;position:relative;z-index:1}
.index-thumbs a{aspect-ratio:3/4;overflow:hidden;display:block;background:var(--paper-2)}
.index-thumbs img{width:100%;height:100%;object-fit:cover;filter:saturate(.9);transition:transform .6s var(--ease),filter .6s}
.index-thumbs a:hover img{transform:scale(1.08);filter:saturate(1.1)}
.index-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 34px;margin-top:22px;border-top:1.5px solid var(--ink)}
.index-list a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line);text-decoration:none}
.index-list a:hover{color:var(--cobalt)}
.index-list .n{font-weight:900;font-variation-settings:"wdth" 62;font-size:30px;line-height:1}
.index-list .t{font-weight:700;font-variation-settings:"wdth" 88;text-transform:uppercase;font-size:14px;letter-spacing:.04em;line-height:1.25;display:block}
.index-list .s{font-size:13px;color:var(--muted);display:block;line-height:1.35}

/* ---- risograph / halftone print ---- */
.riso{position:relative;overflow:hidden;background:var(--rc,#F2C6CF);isolation:isolate}
.riso img{mix-blend-mode:multiply;filter:grayscale(1) contrast(1.25) brightness(1.08)}
.riso::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.55) 1px,transparent 1.6px) 0 0/5px 5px;mix-blend-mode:screen;pointer-events:none}
.riso.hover-real img{transition:filter .6s,mix-blend-mode .6s}
.riso.hover-real:hover img{filter:none;mix-blend-mode:normal}
.riso.hover-real:hover::after{opacity:0}

/* ---- magazine text-wrap spread (brief) ---- */
.wrapfig{float:right;width:min(42%,380px);margin:6px 0 16px 26px;shape-outside:margin-box;transform:rotate(2deg)}

@media (max-width:900px){
  .fd{margin-top:54px}
  .fd .body{grid-template-columns:1fr;min-height:0;padding-top:26px;padding-right:clamp(18px,3vw,40px)!important}
  .fd .peek{right:18px;top:-80px;width:110px}
  .fd .clipper{display:none}
  .fd .tab{left:18px!important;max-width:calc(100% - 150px)}
  .vfolders{flex-direction:column;height:auto}
  .vf,.vf:first-child,.vf:hover{flex:none;height:150px;border-left:0;border-top:2px solid rgba(94,27,32,.12)}
  .vf.lead{height:auto;min-height:0}
  .vf.lead .vt{writing-mode:horizontal-tb;transform:none;position:relative;left:auto;bottom:auto;padding:22px 18px 0;display:block;white-space:normal;font-size:40px!important}
  .vf.lead .lead-copy{position:relative;left:auto;right:auto;top:auto;padding:10px 18px 22px}
  .vf:not(.lead) .vt{writing-mode:horizontal-tb;transform:none;left:16px;right:16px;bottom:auto;top:50%;margin-top:-.55em;font-size:24px!important;white-space:normal}
  .vf .sheet{width:100%;max-width:none;opacity:.94}
  .vf .vtab{display:none}
  .vf .strip{left:auto;width:42%;right:0}
  .vf .sheet{right:42%;width:auto}
  .vf:not(.lead) .vt{right:calc(42% + 12px)}
  .index-thumbs{grid-template-columns:repeat(6,minmax(0,1fr))}
  .index-thumbs a:nth-child(n+7){display:none}
  .index-list{grid-template-columns:1fr}
  .rrow{height:220px}
  .rb .code{display:none}
  .wrapfig{float:none;width:100%;margin:0 0 18px;transform:none}
}
@media (max-width:600px){
  .rrow{overflow-x:auto;justify-content:flex-start}
  .rb{flex:0 0 38px}
  .fd .desc{font-size:15px}
}

/* =========================================================
   NAME TILES — "BELLA LEE" set in Bella's own letter-tile style
   (after her B.YOND "For the Readers" spread)
   ========================================================= */
.nametiles{margin-top:12px;container-type:inline-size}
.nt-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
.nt{position:relative;aspect-ratio:1;overflow:hidden;display:grid;place-items:center;isolation:isolate;
  font-weight:900;font-variation-settings:"wdth" 100;font-size:15.5cqi;line-height:1;text-transform:uppercase;
  transition:transform .45s var(--ease),box-shadow .45s;opacity:0;transform:translateY(-14px) rotate(-3deg);animation:ntIn .7s var(--ease) forwards}
.nt:nth-child(1){animation-delay:.05s}.nt:nth-child(2){animation-delay:.12s}.nt:nth-child(3){animation-delay:.19s}.nt:nth-child(4){animation-delay:.26s}.nt:nth-child(5){animation-delay:.33s}
.nt:nth-child(6){animation-delay:.40s}.nt:nth-child(7){animation-delay:.47s}.nt:nth-child(8){animation-delay:.54s}.nt:nth-child(9){animation-delay:.61s}
@keyframes ntIn{to{opacity:1;transform:none}}
.nametiles:hover .nt{transform:none}
.nt:hover{transform:scale(1.06) rotate(-2deg)!important;z-index:3;box-shadow:0 14px 24px -12px rgba(0,0,0,.5)}
.nt b{position:relative;z-index:2;display:block;font-weight:inherit;padding-top:.02em}
.nt b.fill{color:transparent;-webkit-text-fill-color:transparent}
.nametiles .nt b.fill{-webkit-background-clip:text!important;background-clip:text!important}

/* 1  B — tomato tile, butter letter with forest zig-zag teeth */
.nt.t1{background:#E4253F}
.nt.t1 b.fill{background:
  linear-gradient(135deg,#1E8F6B 25%,transparent 25%) -6px 0/14px 14px,
  linear-gradient(225deg,#1E8F6B 25%,transparent 25%) -6px 0/14px 14px,#F7E36B;
  background-size:14px 14px,14px 14px,auto}
/* 2  E — pink tile with white polka dots, violet letter */
.nt.t2{background:radial-gradient(circle,#fff 2.2px,transparent 2.8px) 0 0/10px 10px,#F06FA8}
.nt.t2 b{color:#7A4B9E}
/* 3  L — sky tile, white pin-stripe letter */
.nt.t3{background:#5BC0DE}
.nt.t3 b.fill{background:repeating-linear-gradient(90deg,#fff 0 2.5px,transparent 2.5px 5px)}
/* 4  L — mint tile, orange frame, magenta-dot letter on butter */
.nt.t4{background:#4ECB9A;box-shadow:inset 0 0 0 5px #FF7A1A}
.nt.t4 b.fill{background:radial-gradient(circle,#C4483A 2.4px,transparent 3px) 0 0/7px 7px,#F7E36B}
/* 5  A — royal tile, marigold flower, flame letter */
.nt.t5{background:#2256D8}
.nt.t5 svg{position:absolute;inset:6%;width:88%;height:88%;z-index:1;animation:spin 40s linear infinite}
.nt.t5 b{color:#FF5A1F;-webkit-text-stroke:2px #FFB300}
/* 6  L — yellow tile, royal-blue window-grid letter */
.nt.t6{background:#F3E43A}
.nt.t6 b.fill{background:
  repeating-linear-gradient(0deg,transparent 0 5px,#F3E43A 5px 7px),
  repeating-linear-gradient(90deg,#1E3FD0 0 5px,#F3E43A 5px 7px)}
/* 7  E — blush tile with confetti, cherry letter */
.nt.t7{background:
  radial-gradient(circle at 18% 22%,#2256D8 0 3px,transparent 3.5px),
  radial-gradient(circle at 80% 30%,#E4253F 0 2.5px,transparent 3px),
  radial-gradient(circle at 26% 80%,#5BC0DE 0 3px,transparent 3.5px),
  radial-gradient(circle at 84% 76%,#2256D8 0 2.5px,transparent 3px),
  radial-gradient(circle at 52% 12%,#5BC0DE 0 2px,transparent 2.5px),
  radial-gradient(circle at 60% 90%,#E4253F 0 2px,transparent 2.5px),#FCD8D3}
.nt.t7 b{color:#E4253F}
/* 8  E — marigold tile with red grid, bright green letter */
.nt.t8{background:
  repeating-linear-gradient(0deg,rgba(228,37,63,.8) 0 1.5px,transparent 1.5px 7px),
  repeating-linear-gradient(90deg,rgba(228,37,63,.8) 0 1.5px,transparent 1.5px 7px),#F5C400}
.nt.t8 b{color:#1FCB2E}
/* 9  navy info tile (spans 2) */
.nt.t9{grid-column:span 2;aspect-ratio:2/1;background:#141A33;color:#fff;place-items:stretch;padding:9% 8%;
  font-size:inherit;text-transform:none;display:flex;flex-direction:column;justify-content:space-between}
.nt.t9 .dots{height:10px;background:radial-gradient(circle,#3E4BA8 3px,transparent 3.6px) 0 50%/16px 10px repeat-x}
.nt.t9 .cap{font-weight:800;font-variation-settings:"wdth" 75;text-transform:uppercase;line-height:.92;font-size:5.6cqi;letter-spacing:.01em}
.nt.t9 .cap span:nth-child(1){color:#F7E36B}.nt.t9 .cap span:nth-child(2){color:#F4B9C8}.nt.t9 .cap span:nth-child(3){color:#4ECB9A}
.nt.t9 small{font-weight:600;font-variation-settings:"wdth" 125;font-size:max(9px,1.9cqi);letter-spacing:.14em;text-transform:uppercase;opacity:.75}
@media (prefers-reduced-motion:reduce){.nt{opacity:1;transform:none}.nt.t5 svg{animation:none}}

/* ---- handwritten accent (Waiting for the Sunrise) — captions, notes, sticky notes ---- */
.hand{font-family:"Waiting for the Sunrise","Bradley Hand",cursive;font-style:normal;font-weight:600;font-variation-settings:normal;letter-spacing:0;text-transform:none;line-height:1}
.ph .cap.hand{font-size:clamp(18px,1.6vw,24px);bottom:6px;left:12px;right:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph.polar{padding-bottom:40px}
.sticky{font-family:"Waiting for the Sunrise","Bradley Hand",cursive;font-style:normal;font-weight:500;font-variation-settings:normal;font-size:22px;line-height:1.15}
.sticky .t-label{font-family:var(--f)}
.collage .note .sticky,.bhead .sticky{font-size:22px}
.quote{font-size:clamp(24px,2.2vw,30px)!important;font-weight:600}
.t-note{font-family:"Waiting for the Sunrise","Bradley Hand",cursive;font-style:normal;font-weight:500;font-variation-settings:normal;font-size:1.25em;line-height:1.15}
.hnote{position:absolute;right:7%;bottom:10%;z-index:6;color:#fff;font-size:clamp(20px,1.8vw,28px);text-align:right;text-shadow:0 1px 10px rgba(0,0,0,.45);transform:rotate(-4deg);pointer-events:none}
.hnote svg{display:block;width:56px;height:36px;margin:2px 0 0 auto;color:#fff}

/* ---- spinning pink badge in the name tiles ---- */
.nt.t9{flex-direction:row;align-items:center;justify-content:space-around;gap:4%;padding:6% 5%}
.nt.t9 .dots{position:absolute;left:6%;right:6%;top:9%}
.nt-badge{position:relative;width:38%;aspect-ratio:1;flex:none;margin-top:4%}
.nt-badge svg{width:100%;height:100%;animation:spin 22s linear infinite}
.nt-badge text{font-family:var(--f);font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;fill:#1E1A19}
.nt-badge .no{position:absolute;inset:0;display:grid;place-items:center;color:#1E1A19;font-size:6.2cqi}
.nt-hi{color:#F7E36B;font-size:6.4cqi;line-height:.95;transform:rotate(-6deg);margin-top:4%}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.nt-badge svg{animation:none}}
/* palette chips: one per row so names never break */
.chips{grid-template-columns:1fr!important}
@media (max-width:900px){.bcol.r .rrow2{flex-direction:column}.bcol.r .b-sw{width:100%}.bcol.r .b-4{margin-top:10px;width:100%}}

/* =========================================================
   HERO TITLE CARD — v3 (clean, editorial)
   ========================================================= */
.b-title{padding:clamp(26px,3vw,44px) clamp(24px,3vw,44px) clamp(26px,3vw,40px)!important;clip-path:none!important;position:relative}
.bt-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--line)}
.bt-name{font-weight:900;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:clamp(66px,8.8vw,146px);line-height:.82;letter-spacing:-.005em;margin:22px 0 0;white-space:nowrap}
.bt-badge{position:absolute;right:clamp(-26px,-1.6vw,-14px);top:clamp(-30px,-2vw,-18px);width:clamp(86px,8vw,120px);aspect-ratio:1;z-index:5;filter:drop-shadow(0 8px 12px rgba(0,0,0,.18))}
.bt-badge svg{width:100%;height:100%;animation:spin 22s linear infinite}
.bt-badge text{font-family:var(--f);font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;fill:#1E1A19}
.bt-badge .no{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(24px,2.3vw,34px);color:#1E1A19}
.bt-hi{position:absolute;right:clamp(70px,8vw,120px);top:clamp(52px,5vw,74px);font-size:clamp(20px,1.7vw,26px);color:var(--cobalt);transform:rotate(-5deg);display:flex;align-items:flex-start;gap:2px}
.bt-hi svg{width:54px;height:28px;color:var(--cobalt);margin-top:6px}
.bt-roles{margin-top:22px;padding-top:14px;border-top:1px solid var(--line);line-height:1.9}
.bt-roles i{font-style:normal;color:#C4483A;margin:0 6px}
.bt-lede{margin-top:14px;max-width:46ch}
.bt-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:22px}
.bt-foot > span{margin-left:auto}
.b-bot{margin-top:24px;justify-content:flex-end}
.b-sticky{width:clamp(220px,18vw,270px)}
.sticky .t-label{display:inline-block;margin-bottom:4px}
@media (max-width:900px){.bt-hi{display:none}.bt-foot > span{margin-left:0;flex-basis:100%}}
@media (prefers-reduced-motion:reduce){.bt-badge svg{animation:none}}

/* =========================================================
   FEATURE FOLDERS — one hero image, story, 3 images below
   ========================================================= */
.ffs{padding-top:54px}
.ff{position:relative;margin-top:92px;transition:opacity .4s}
.ff:first-child{margin-top:0}
.ff.dim{opacity:.22}
.ff .tab{position:absolute;top:-46px;left:var(--x,6%);height:48px;padding:0 26px;display:flex;align-items:center;gap:12px;border-radius:14px 14px 0 0;background-color:var(--c);background-image:var(--grain-l);background-blend-mode:multiply;text-decoration:none;white-space:nowrap;max-width:80%;transition:transform .3s}
.ff .tab:hover{transform:translateY(-4px)}
.ff .tab b{font-weight:850;font-variation-settings:"wdth" 75;text-transform:uppercase;font-size:clamp(15px,1.4vw,19px);overflow:hidden;text-overflow:ellipsis}
.ff .tab i{font-style:normal;font-weight:600;font-size:11px;letter-spacing:.14em;opacity:.7}
.ff-body{background-color:var(--c);background-image:var(--grain-l);background-blend-mode:multiply;border-radius:0 8px 8px 8px;padding:clamp(28px,4vw,60px) clamp(20px,3.6vw,56px) clamp(30px,4vw,56px);box-shadow:0 20px 40px -30px rgba(0,0,0,.45)}
.ff.dark{color:var(--paper)}
.ff-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(24px,3.4vw,56px);align-items:start}
.ff-lead{grid-column:1 / span 7;position:relative;transform:rotate(var(--r))}
.ff-copy{grid-column:8 / span 5}
.ff.flip .ff-lead{grid-column:6 / span 7;grid-row:1}
.ff.flip .ff-copy{grid-column:1 / span 5;grid-row:1}
.ff-lead .ph{display:block;width:100%;cursor:zoom-in;padding:10px}
.ff-lead .ph img{width:100%;height:auto;max-height:78vh;object-fit:cover}
.ff-pin{position:absolute;top:-14px;right:22px;z-index:6;background:var(--butter);color:var(--ink);font-size:clamp(19px,1.6vw,24px);padding:7px 14px 9px;transform:rotate(3deg);box-shadow:0 8px 16px -10px rgba(0,0,0,.45);max-width:70%}
.ff-kick{opacity:.75}
.ff-title{font-weight:900;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:clamp(46px,5.2vw,88px);line-height:.86;margin:12px 0 14px}
.ff-title a{text-decoration:none}
.ff-title a:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
.ff-dek{font-size:clamp(23px,2vw,29px);line-height:1.12;margin-bottom:16px}
.ff-text p{font-size:16px;line-height:1.6;margin-bottom:12px}
.ff-facts{display:flex;gap:6px;flex-wrap:wrap;margin:16px 0 22px}
.ff-facts span{font-size:12px;font-weight:600;font-variation-settings:"wdth" 88;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.55);border:1px solid rgba(30,26,25,.18)}
.ff.dark .ff-facts span{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
.ff-cta{display:inline-flex;gap:10px;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:5px}
.ff-cta b{transition:transform .3s}.ff-cta:hover b{transform:translateX(6px)}
.ff-thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,26px);margin-top:clamp(28px,3.4vw,48px)}
.ff-th{background:var(--white);padding:7px;box-shadow:0 12px 22px -16px rgba(0,0,0,.5);cursor:zoom-in;transform:rotate(var(--r));transition:transform .4s var(--ease)}
.ff-th:hover{transform:rotate(0) translateY(-5px)}
.ff-th img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media (max-width:900px){
  .ff-lead,.ff-copy,.ff.flip .ff-lead,.ff.flip .ff-copy{grid-column:1 / -1;grid-row:auto}
  .ff{margin-top:80px}
  .ff .tab{left:0!important}
  .ff-body{border-radius:0 8px 8px 8px}
}
@media (max-width:600px){.ff-thumbs{grid-template-columns:repeat(2,minmax(0,1fr))}.ff-thumbs .ff-th:nth-child(3){display:none}}

.bt-roles span{white-space:nowrap}
.bt-name{max-width:100%;overflow:visible}

.b-title .bt-roles{max-width:none;margin:0;padding:0;border:0}
.bt-mid{display:flex;justify-content:space-between;align-items:center;gap:10px 20px;flex-wrap:wrap;margin-top:22px;padding-top:14px;border-top:1px solid var(--line)}
.bt-mid .bt-hi{position:static;transform:rotate(-4deg)}
.bt-roles i{margin:0 8px}
@media (max-width:900px){.bt-top{padding-right:70px}.bt-mid .bt-hi{display:flex}}
.bt-mid .bt-roles{flex:1 1 320px;min-width:0}

/* =========================================================
   SHOW EVERY PHOTO IN FULL — no cropping anywhere
   ========================================================= */
.ph img{height:auto!important;object-fit:contain!important}
.b-1 .ph,.b-2 .ph,.b-3 .ph,.b-4 .ph,.bcol.r .b-2 .ph,.fdecor .hero-ph .ph,.nextp .ph{aspect-ratio:auto!important;height:auto}
.bcol.r .b-4{max-width:70%;margin-left:auto}
.bcol.r .rrow2{justify-content:flex-end}
/* film strip: whole frames on black */
.b-film .frames{align-items:center}
.b-film img{aspect-ratio:auto!important;height:auto;object-fit:contain!important;max-height:190px;width:100%}
/* contents thumbnails */
.index-thumbs{align-items:end}
.index-thumbs a{aspect-ratio:auto!important;background:transparent}
.index-thumbs img{height:auto!important;max-height:190px;object-fit:contain!important}
/* feature lead: natural proportions, framed tightly */
.ff-lead{text-align:center}
.ff-lead .ph{display:inline-block!important;width:auto!important;max-width:100%}
.ff-lead .ph img{width:auto!important;max-width:100%;max-height:76vh;height:auto;object-fit:contain!important}
/* feature thumbs: equal height, natural widths (like the magazine) */
.ff-thumbs{display:flex!important;flex-wrap:wrap;gap:clamp(12px,1.6vw,22px);align-items:flex-start}
.ff-th{flex:0 1 auto;max-width:100%}
.ff-th img{aspect-ratio:auto!important;height:clamp(150px,19vw,290px);width:auto;max-width:100%;object-fit:contain!important}
@media (max-width:600px){.ff-thumbs .ff-th:nth-child(3){display:block}.ff-th img{height:auto;width:100%}.ff-th{flex:1 1 100%}}
/* graphic vertical folders: whole image on a soft backing */
.vf .strip{background:#F7F2EA}
.vf .strip img{object-fit:contain!important}
/* process boards: masonry so each print keeps its shape */
.collage{display:block!important;columns:3 240px;column-gap:clamp(18px,2.4vw,34px)}
.collage .it{break-inside:avoid;margin:0 0 clamp(22px,2.6vw,36px);display:block;grid-column:auto!important;grid-row:auto!important}
.collage .it .ph{height:auto!important;aspect-ratio:auto!important;display:block;width:100%}
.collage .it .ph img{height:auto!important;object-fit:contain!important}
.collage .it.wide .ph{aspect-ratio:auto!important}
@media (max-width:600px){.collage{columns:1}}
.collage[data-n="1"]{columns:1;max-width:1100px;margin:0 auto}
.collage[data-n="2"]{columns:2 260px}
.collage[data-n="4"]{columns:2 300px}
.ff-thumbs{justify-content:center}

/* ---- bigger "Open the folder" button ---- */
.ff-cta{display:inline-flex;align-items:center;gap:14px;margin-top:6px;padding:16px 26px 16px 28px;border:0;border-bottom:0;border-radius:999px;background:var(--ink);color:var(--paper);font-size:14px;letter-spacing:.16em;box-shadow:0 12px 22px -14px rgba(0,0,0,.6);transition:background .3s,transform .3s,box-shadow .3s}
.ff-cta b{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--lime);color:var(--ink);font-size:16px;transition:transform .3s}
.ff-cta:hover{background:var(--cobalt);color:#fff;transform:translateY(-3px);box-shadow:0 18px 28px -14px rgba(0,0,0,.6)}
.ff-cta:hover b{transform:translateX(4px)}
.ff.dark .ff-cta{background:var(--paper);color:var(--ink)}
.ff.dark .ff-cta:hover{background:var(--lime);color:var(--ink)}
.ff.dark .ff-cta:hover b{background:var(--ink);color:var(--paper)}
@media (max-width:600px){.ff-cta{width:100%;justify-content:space-between}}

/* ---- clean line breaks everywhere ---- */
h1,h2,h3,h4,.t-h2,.t-h3,.t-display,.ff-title,.bhead h2{text-wrap:balance}
p,li,dd,.t-lede,.sticky,.ff-dek{text-wrap:pretty}

/* ---- notebook paper: every line of text sits ON a ruled line ---- */
.nb.lined,.brief .nbk.lined{background-image:linear-gradient(90deg,transparent 46px,rgba(214,90,110,.55) 46px,rgba(214,90,110,.55) 48px,transparent 48px)!important;background-color:#FCFBF7}
.nb p,.brief .nbk p,.brief .nbk .checks li{line-height:32px!important;margin:0!important;padding-bottom:32px;
  background-image:repeating-linear-gradient(180deg,transparent 0 31px,rgba(20,37,74,.18) 31px 32px);background-position:0 -4px}
.nb p:last-child,.brief .nbk p:last-child{padding-bottom:0}
.nb h3{margin-bottom:18px!important}
.brief .nbk .checks li{padding-bottom:0}
.bt-badge img.no{position:absolute;inset:25%;width:50%;height:50%;object-fit:contain;display:block}

/* ---- hero: About-me notebook replaces the name card ---- */
.b-title.nb{grid-column:auto;padding:clamp(30px,3vw,44px) clamp(22px,3vw,40px) clamp(28px,3vw,40px) clamp(64px,5.4vw,80px)!important;transform:rotate(var(--r))}
.b-title.nb .rings{left:14px}
.bt-kick{display:block}
.bt-hello{font-weight:900;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:clamp(56px,6.6vw,110px);line-height:.86;margin:10px 0 18px}
.b-title .bt-roles{margin:0 0 20px;padding-top:12px;border-top:1px solid var(--line);line-height:1.9}
.bt-copy p{font-size:16.5px}
.b-title .bt-foot{margin-top:26px}
/* lower About: no notebook now — ID card + note sit side by side */
.about .id{grid-column:1 / -1;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;gap:30px}
@media (max-width:900px){.about .id{grid-template-columns:1fr}.b-title.nb{padding-left:54px!important}}

/* palette v2 tweaks */
.envelope .stamp{color:#fff}
.letter .mail{border-bottom-color:var(--pink)}
.letter .mail:hover{background:var(--pink)}
.dymo.cobalt{background:var(--oxblood);color:#fff}
.ff-cta b{background:var(--pink)}
.ff-cta:hover{background:var(--oxblood)}
.ff.dark .ff-cta:hover{background:var(--pink)}
::selection{background:var(--pink)}
.tape-run{background:var(--pink)}

.bt-hello .nw{white-space:nowrap}
.bt-hello{font-size:clamp(52px,6.2vw,104px)}
.b-title .bt-roles{display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;max-width:100%}
.b-title .bt-roles i{margin:0 8px}
.about .idcard{max-width:560px}
.b-title .bt-roles{gap:4px 0}
.b-title .bt-roles span:not(:last-child)::after{content:"·";color:var(--cobalt);margin:0 10px}

/* ---- balanced hero: side columns fill the full height ---- */
.board{align-items:stretch}
.bcol.l,.bcol.r{justify-content:space-between;gap:34px}
.bcol.l .b-3{margin:0 0 0 14%!important}
.b-5{width:78%;margin-left:2%}
.b-5 .ph{aspect-ratio:auto}
.b-note{width:78%;margin-left:16%}
.b-note .sticky{font-size:22px}
.bcol.r .rrow2{margin-top:0}
.bcol.r .b-4{margin-top:0}
.b-sticky2{width:74%;margin-left:4%}
.b-6{width:70%;margin-left:auto;margin-right:6%}
@media (max-width:900px){
  .b-5,.b-note,.b-sticky2,.b-6{width:100%;margin:0}
}

/* ---- washi tape replaces the black binder clip ---- */
.tape.washi{width:110px;height:28px;margin-left:-55px;top:-13px;transform:rotate(2deg);
  background:repeating-linear-gradient(90deg,rgba(242,198,207,.82) 0 8px,rgba(247,236,238,.82) 8px 16px)}

/* ---- photo corners: cream, not black ---- */
.corners::before,.corners::after{background:linear-gradient(135deg,#EFE6D6 50%,transparent 50%)!important;filter:drop-shadow(0 1px 1px rgba(0,0,0,.15))}

/* ---- realistic push pins ---- */
.pin{width:20px;height:20px;margin-left:-10px;top:-10px;border-radius:50%;
  background:
    radial-gradient(circle at 34% 30%,rgba(255,255,255,.95) 0 1.6px,rgba(255,255,255,.55) 2.4px,rgba(255,255,255,0) 6px),
    radial-gradient(circle at 65% 72%,rgba(0,0,0,.38),rgba(0,0,0,0) 62%),
    radial-gradient(circle at 50% 50%,var(--c,#C4483A) 0 100%);
  box-shadow:inset -2px -3px 4px rgba(0,0,0,.32),inset 1px 2px 2px rgba(255,255,255,.35),
             1px 2px 2px rgba(0,0,0,.28),6px 9px 7px -2px rgba(0,0,0,.26)}
/* collar ring under the head */
.pin::before{content:"";position:absolute;left:4px;top:13px;width:12px;height:6px;border-radius:50%;z-index:-1;
  background:linear-gradient(180deg,var(--c,#C4483A),rgba(0,0,0,.45));filter:brightness(.8)}
/* the steel needle's soft shadow on the paper */
.pin::after{content:"";position:absolute;left:12px;top:15px;width:14px;height:2px;border-radius:2px;z-index:-2;
  background:linear-gradient(90deg,rgba(0,0,0,.32),rgba(0,0,0,0));transform:rotate(35deg);transform-origin:left center;filter:blur(.6px)}

/* ---- houndstooth swatch (from the SH-E-O jacket) with pinked edges ---- */
.b-fabric{background:none!important;position:relative;aspect-ratio:auto!important}
.b-fabric .hounds{display:block;aspect-ratio:1/1.2;box-shadow:0 12px 20px -12px rgba(0,0,0,.45);
  background-color:#F1EADF;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%232A2320' d='M0 0h8v8H0z M8 0h4l4 4v4z M0 8l8 8H4L0 12z M8 8h4l-4 4z M8 0l-4 -4'/%3E%3C/svg%3E");
  background-size:12px 12px;
  clip-path:polygon(0 3%,3% 0,6% 3%,9% 0,12% 3%,15% 0,18% 3%,21% 0,24% 3%,27% 0,30% 3%,33% 0,36% 3%,39% 0,42% 3%,45% 0,48% 3%,51% 0,54% 3%,57% 0,60% 3%,63% 0,66% 3%,69% 0,72% 3%,75% 0,78% 3%,81% 0,84% 3%,87% 0,90% 3%,93% 0,96% 3%,100% 0,100% 100%,97% 97%,94% 100%,91% 97%,88% 100%,85% 97%,82% 100%,79% 97%,76% 100%,73% 97%,70% 100%,67% 97%,64% 100%,61% 97%,58% 100%,55% 97%,52% 100%,49% 97%,46% 100%,43% 97%,40% 100%,37% 97%,34% 100%,31% 97%,28% 100%,25% 97%,22% 100%,19% 97%,16% 100%,13% 97%,10% 100%,7% 97%,4% 100%,0 97%)}
.b-fabric .swlab{position:absolute;left:8%;bottom:10%;background:#F7F2EA;padding:4px 6px;font:600 8.5px/1.2 var(--f);letter-spacing:.12em;text-transform:uppercase;box-shadow:0 1px 2px rgba(0,0,0,.15);transform:rotate(3deg);white-space:nowrap}

/* ---- motion-blur hover on every image at the top ---- */
.mb-wrap{position:relative;display:block;overflow:hidden}
.mb-wrap > img.ghost,.ph .mb-wrap > img.ghost{position:absolute;inset:0;width:100%;height:100%!important;object-fit:fill!important;filter:url(#mblur);opacity:0;transform:translateX(-4%);transition:opacity .5s,transform .8s var(--ease);pointer-events:none}
.board .ph:hover .mb-wrap > img.ghost,.b-film .mb-wrap:hover > img.ghost{opacity:.85;transform:translateX(4%)}

.b-fabric .swlab{position:static;display:inline-block;margin-top:8px;font-size:9px}

/* film strip centred over the About card */
.b-top{justify-content:center}
.b-film{flex:0 1 92%;margin:0 auto}
/* Framed Bones print: pulled left, in line with the column */
.bcol.r .rrow2{justify-content:flex-start}
.bcol.r .b-4{max-width:80%;margin-left:4%!important;margin-right:auto}
@media (max-width:900px){.bcol.r .b-4{max-width:100%;margin-left:0!important}}

/* ---- matte clear tape (replaces the striped washi) ---- */
.tape.washi{width:118px;height:30px;margin-left:-59px;top:-14px;transform:rotate(-2deg);
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(246,242,234,.5));
  backdrop-filter:blur(1.2px) saturate(.9);-webkit-backdrop-filter:blur(1.2px) saturate(.9);
  box-shadow:0 1px 2px rgba(0,0,0,.1),inset 0 0 0 1px rgba(255,255,255,.35);
  clip-path:polygon(2% 8%,5% 0,9% 10%,13% 2%,17% 8%,21% 0,100% 0,98% 90%,95% 100%,91% 88%,87% 98%,83% 90%,79% 100%,0 100%)}
/* B logo: dead centre, equal gap to the ring text */
.bt-badge img.no{inset:0!important;margin:auto;left:0;top:0;width:52%!important;height:52%!important;object-fit:contain;transform:none}

/* ---- contact sheet: strict reading order (left→right, then down) ---- */
.csheet{columns:auto!important;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start}
.csheet button{margin-bottom:0}
@media (max-width:900px){.csheet{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.csheet{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- lightbox: borderless page, page-turn transition ---- */
.lb{perspective:2200px}
.lb .stage{position:relative;display:grid;place-items:center;max-width:100%;max-height:calc(100svh - 150px)}
.lb .stage img{grid-area:1/1;background:none!important;padding:0!important;box-shadow:0 30px 60px -30px rgba(0,0,0,.8);animation:none!important;
  max-width:min(92vw,100%);max-height:calc(100svh - 150px);object-fit:contain;backface-visibility:hidden;will-change:transform,opacity}
.lb .stage img.out-next{animation:turnOutL .55s cubic-bezier(.6,0,.3,1) forwards!important;transform-origin:left center}
.lb .stage img.in-next{animation:turnInR .55s cubic-bezier(.2,.7,.2,1) forwards!important;transform-origin:left center}
.lb .stage img.out-prev{animation:turnOutR .55s cubic-bezier(.6,0,.3,1) forwards!important;transform-origin:right center}
.lb .stage img.in-prev{animation:turnInL .55s cubic-bezier(.2,.7,.2,1) forwards!important;transform-origin:right center}
@keyframes turnOutL{to{transform:rotateY(-70deg) translateX(-4%);opacity:0}}
@keyframes turnInR{from{transform:rotateY(35deg) translateX(6%);opacity:0}to{transform:none;opacity:1}}
@keyframes turnOutR{to{transform:rotateY(70deg) translateX(4%);opacity:0}}
@keyframes turnInL{from{transform:rotateY(-35deg) translateX(-6%);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.lb .stage img{animation:none!important}}

/* =========================================================
   TAPE — one grown-up system everywhere (no stripes, no pink)
   default + .pink  → matte masking tape (warm stone)
   .clear / .washi  → frosted clear tape
   ========================================================= */
.tape,.tape.pink,.tape.x,.tape.tl,.tape.tr{-webkit-mask:none!important;mask:none!important;
  background:linear-gradient(180deg,rgba(226,217,201,.88),rgba(214,204,186,.86))!important;
  box-shadow:0 1px 2px rgba(0,0,0,.12),inset 0 0 0 1px rgba(255,255,255,.18)!important;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  clip-path:polygon(2% 10%,5% 0,9% 12%,13% 2%,17% 9%,21% 0,100% 0,98% 88%,95% 100%,91% 86%,87% 98%,83% 90%,79% 100%,0 100%)}
.tape::before,.tape::after{display:none!important}
.tape.clear,.tape.washi{background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(246,242,234,.5))!important;
  backdrop-filter:blur(1.2px) saturate(.9);-webkit-backdrop-filter:blur(1.2px) saturate(.9);
  box-shadow:0 1px 2px rgba(0,0,0,.1),inset 0 0 0 1px rgba(255,255,255,.35)!important}
/* SWS pair: grey spread with the red spread overlapping below */
.b-5.sws-pair{width:100%;margin:0;position:relative}
.sws-pair .sp1{width:92%;margin-left:0;position:relative;z-index:1}
.sws-pair .sp2{width:92%;margin:-14% 0 0 8%;position:relative;z-index:2}
@media (max-width:900px){.sws-pair .sp1,.sws-pair .sp2{width:100%;margin:0 0 16px}}
/* SWS photos split across both columns */
.b-sws1{width:96%;margin-left:0}
.b-sws2{width:88%;margin-left:6%}
.b-sws1 .ph img,.b-sws2 .ph img{height:auto}
.bcol.l .b-3{width:74%!important;margin:0 0 0 18%!important}
.bcol.r .b-6{width:58%}
@media (max-width:900px){.b-sws1,.b-sws2{width:100%;margin:0}.bcol.l .b-3{width:100%!important;margin:0!important}}
/* balance: side columns finish level with the About card */
.bcol.l,.bcol.r{gap:26px}
.b-1{width:92%}
.b-sws1{width:90%;margin-left:4%}
.bcol.l .b-3{width:64%!important;margin:0 0 0 22%!important}
.b-note{width:72%;margin-left:14%}
.b-2{width:100%}
.b-sws2{width:84%;margin-left:10%}
.bcol.r .b-4{max-width:62%!important;margin-left:6%!important}
.bcol.r .b-6{width:46%;margin-right:10%}
.b-sticky2{width:66%;margin-left:28%}
.ph .cap.hand{overflow:visible;text-overflow:clip;white-space:nowrap;font-size:clamp(16px,1.35vw,22px)}
@media (max-width:900px){.b-1,.b-sws1,.b-sws2,.b-note,.b-2,.bcol.r .b-4,.bcol.r .b-6,.b-sticky2{width:100%!important;max-width:100%!important;margin:0!important}}

/* ---- envelope stamp: B logo, postmarked ---- */
.envelope .stamp{background:#F7F2EA!important;display:grid;place-items:center;padding:10px;outline:3px dotted #F7F2EA;outline-offset:-1px;box-shadow:0 2px 4px rgba(0,0,0,.2);transform:rotate(4deg);overflow:hidden;width:84px;height:100px}
.envelope .stamp::before{content:"";position:absolute;inset:6px;border:1.5px solid #C4483A}
.envelope .stamp img{width:66%;height:auto;position:relative;z-index:1;filter:none}
.envelope .stamp .pm{position:absolute;left:-26px;top:34px;width:130px;height:30px;border:1.5px solid rgba(30,26,25,.55);border-radius:50%;font:600 7px/28px var(--f);letter-spacing:.16em;text-align:center;color:rgba(30,26,25,.6);transform:rotate(-18deg);z-index:2;background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(30,26,25,.25) 5px 6px) left center/22px 100% no-repeat}

/* ---- Framed Bones: red accents instead of pink ---- */
.proj-framed-bones .sticky.pink,.proj-framed-bones .sticky.pink.quote{background:#B8322B;color:#F7F2EA}
.proj-framed-bones .sticky.pink::after{border-color:transparent transparent rgba(0,0,0,.25) transparent}
.proj-framed-bones .sticky.pink .t-label{color:#F7F2EA}
.proj-framed-bones .dymo.pink{background:#B8322B;color:#fff}
.proj-framed-bones .quote::before,.proj-framed-bones .quote::after{color:#F7F2EA}
.proj-framed-bones .receipt h4{color:#B8322B}
.proj-framed-bones .words span{border-color:#B8322B}
.proj-framed-bones .tape.pink{background:linear-gradient(180deg,rgba(226,217,201,.88),rgba(214,204,186,.86))!important}
.proj-framed-bones .canvas.pinkp{background-color:#8E2621;background-image:var(--grain-l);background-blend-mode:multiply}
.proj-framed-bones .canvas.lavp{background-color:#E9E4DC}
.proj-framed-bones .sticky.lav{background:#E8C9C4}
.envelope .stamp .pm{display:none}
.envelope .stamp{width:92px;height:110px}
.envelope .stamp img{width:62%}

/* ---- hero rebalance v2: symmetric side columns, pieces on a shared centre line ---- */
@media (min-width:901px){
  .board{grid-template-columns:minmax(0,25fr) minmax(0,50fr) minmax(0,25fr)!important}
  .bcol.l > *, .bcol.r > *{margin-left:auto!important;margin-right:auto!important;max-width:none!important}
  .b-1{width:86%!important;transform-origin:center}
  .b-sws1{width:94%!important}
  .bcol.l .b-3{width:76%!important;margin-left:auto!important;margin-right:auto!important}
  .b-note{width:74%!important}
  .b-2{width:100%!important}
  .b-sws2{width:94%!important}
  .b-sticky2{width:74%!important}
  .bcol.r .rrow2{display:block;width:80%!important}
  .bcol.r .rrow2 .b-4{width:100%!important;max-width:100%!important;margin:0!important}
  .bcol.r .b-6{width:62%!important}
}

/* ---- contact sheet: uniform frames, whole image shown, no gaps ---- */
.csheet{align-items:stretch}
.csheet button{display:flex;flex-direction:column}
.csheet button img{width:100%;aspect-ratio:4/3;height:auto;object-fit:contain;background:#FBFAF6}

/* =========================================================
   FLIPBOOK — the whole B.YOND book, turned page by page
   ========================================================= */
.book-sec{padding-top:clamp(70px,8vw,110px)}
.flipbook{--turn:.8s}
.fb-desk{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.6vw,22px);padding:clamp(28px,4vw,56px) clamp(8px,2vw,28px);
  background:#2B2624;background-image:var(--grain-l),radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.08),transparent 70%);background-blend-mode:multiply,normal;border-radius:4px;box-shadow:inset 0 0 60px rgba(0,0,0,.35)}
.fb-book{position:relative;width:min(100%,1180px);aspect-ratio:var(--ar,1.545);perspective:2600px;cursor:zoom-in;outline-offset:6px}
.fb-face{position:absolute;top:0;bottom:0;width:50%;background-repeat:no-repeat;background-color:transparent}
.fb-l{left:0;border-radius:3px 0 0 3px}
.fb-r{right:0;border-radius:0 3px 3px 0}
.fb-face.pg{background-color:#F7F2EA;box-shadow:0 30px 50px -30px rgba(0,0,0,.8)}
.fb-l.pg{box-shadow:-8px 24px 40px -26px rgba(0,0,0,.8),inset -26px 0 30px -24px rgba(0,0,0,.35)}
.fb-r.pg{box-shadow:8px 24px 40px -26px rgba(0,0,0,.8),inset 26px 0 30px -24px rgba(0,0,0,.35)}
.fb-spine{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.45),rgba(0,0,0,.25));pointer-events:none;opacity:0;transition:opacity .3s}
.fb-book.open .fb-spine{opacity:1}
/* the turning leaf */
.fb-leaf{position:absolute;top:0;bottom:0;width:50%;transform-style:preserve-3d;z-index:5;pointer-events:none;will-change:transform}
.fb-leaf.to-next{right:0;transform-origin:left center;animation:leafNext var(--turn) cubic-bezier(.55,.05,.35,1) forwards}
.fb-leaf.to-prev{left:0;transform-origin:right center;animation:leafPrev var(--turn) cubic-bezier(.55,.05,.35,1) forwards}
.fb-leaf > div{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background-repeat:no-repeat}
.fb-leaf .back{transform:rotateY(180deg)}
.fb-leaf > div::after{content:"";position:absolute;inset:0;pointer-events:none;animation:leafShade var(--turn) ease-in-out forwards}
.fb-leaf.to-next .front::after{background:linear-gradient(90deg,rgba(0,0,0,.25),transparent 40%)}
.fb-leaf.to-next .back::after{background:linear-gradient(270deg,rgba(0,0,0,.28),transparent 45%)}
.fb-leaf.to-prev .front::after{background:linear-gradient(270deg,rgba(0,0,0,.25),transparent 40%)}
.fb-leaf.to-prev .back::after{background:linear-gradient(90deg,rgba(0,0,0,.28),transparent 45%)}
@keyframes leafNext{0%{transform:rotateY(0)}100%{transform:rotateY(-180deg)}}
@keyframes leafPrev{0%{transform:rotateY(0)}100%{transform:rotateY(180deg)}}
@keyframes leafShade{0%,100%{opacity:0}50%{opacity:1}}
.fb-nav{flex:none;width:52px;height:52px;border-radius:50%;background:#F7F2EA;color:var(--ink);font-size:20px;box-shadow:0 10px 20px -10px rgba(0,0,0,.6);transition:transform .25s,background .25s;z-index:6}
.fb-nav:hover{background:var(--pink);transform:scale(1.06)}
.fb-nav:disabled{opacity:.3;cursor:default;transform:none;background:#F7F2EA}
.fb-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px}
.fb-count{flex:1;text-align:center}
.fb-jump{padding:8px 14px;border:1.5px solid var(--ink);border-radius:999px}
.fb-jump:hover{background:var(--ink);color:var(--paper)}
.fb-thumbs{display:flex;gap:8px;overflow-x:auto;padding:14px 2px 10px;margin-top:6px;scroll-behavior:smooth;scrollbar-width:thin}
.fb-th{flex:none;position:relative;height:72px;background:#fff;padding:3px;box-shadow:0 6px 12px -8px rgba(0,0,0,.5);opacity:.6;transition:opacity .25s,transform .25s,outline-color .25s;outline:2px solid transparent;outline-offset:2px}
.fb-th img{height:100%;width:auto;max-width:none}
.fb-th span{position:absolute;left:4px;bottom:3px;font:600 9px var(--f);letter-spacing:.08em;background:rgba(247,242,234,.9);padding:1px 4px}
.fb-th:hover{opacity:1;transform:translateY(-3px)}
.fb-th.on{opacity:1;outline-color:var(--ink)}
@media (max-width:700px){
  .fb-desk{padding:18px 6px 64px}
  .fb-nav{position:absolute;bottom:10px;width:44px;height:44px}
  .fb-nav.prev{left:calc(50% - 54px)}.fb-nav.next{right:calc(50% - 54px)}
  .fb-hint{display:none}
}
@media (prefers-reduced-motion:reduce){.fb-leaf{animation-duration:.01s!important}}

/* ---------- 3D glass star cursor ---------- */
html.has-star,html.has-star *{cursor:none!important}
html.has-star input,html.has-star textarea,html.has-star [contenteditable=true]{cursor:text!important}
.star-cursor{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;z-index:3000;pointer-events:none;opacity:0;transition:opacity .25s;will-change:transform;perspective:200px}
.star-cursor.on{opacity:1}
.star-cursor img{width:100%;height:100%;display:block;transition:transform .3s cubic-bezier(.2,.7,.1,1);filter:drop-shadow(0 4px 6px rgba(43,38,36,.22))}
.star-cursor.big img{transform:scale(1.55)}
.star-cursor.press img{transform:scale(.85)}
.star-cursor.big.press img{transform:scale(1.3)}
.star-cursor.text{opacity:0}
.lb .star-cursor img,.lb.open ~ .star-cursor img{filter:drop-shadow(0 0 10px rgba(242,198,207,.6))}

/* ---- pink vertical folders: three pieces per project, whole images ---- */
.vf .strip.stack{left:min(34%,110px);display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;gap:10px;padding:14px 10px 14px 18px;background:#F7F2EA}
.vf .strip.stack img{width:100%;height:auto;max-height:31%;object-fit:contain;flex:0 1 auto;background:transparent;box-shadow:0 8px 14px -10px rgba(0,0,0,.45);transition:transform .6s var(--ease)}
.vf .strip.stack img:nth-child(1){transform:rotate(-1.5deg)}
.vf .strip.stack img:nth-child(2){transform:rotate(1.2deg)}
.vf .strip.stack img:nth-child(3){transform:rotate(-.8deg)}
.vf:hover .strip.stack img{transform:rotate(0) scale(1.03)}
@media (max-width:900px){.vf .strip.stack{left:auto;right:0;width:42%;flex-direction:row;padding:10px}.vf .strip.stack img{max-height:100%;width:30%}}
/* SHEO caption fits small phones */
@media (max-width:420px){.ph .cap.hand{font-size:14px}}

/* ---- process reel: each frame is a labelled work-in-progress from a different project ---- */
.reel .film{align-items:stretch;gap:14px}
.rf{flex:none;display:flex;flex-direction:column;background:#F7F2EA;padding:8px 8px 10px;margin:0;transform:rotate(var(--r,0));box-shadow:0 8px 16px -10px rgba(0,0,0,.6)}
.rf:nth-child(odd){--r:-.6deg}.rf:nth-child(even){--r:.6deg}
.rf-top{display:flex;justify-content:space-between;gap:10px;padding:0 2px 6px;font-size:9.5px;color:var(--muted)}
.rf-top b{color:var(--ink);font-weight:800}
.rf-top span{background:var(--butter);color:var(--ink);padding:1px 6px;border-radius:2px}
.rf .bare{display:block;height:clamp(170px,20vw,250px);background:#fff;padding:0}
.rf .bare img{height:100%;width:auto;max-width:none;display:block}
.rf figcaption{margin-top:7px;font-family:"Waiting for the Sunrise","Bradley Hand",cursive;font-size:19px;line-height:1}
.rf figcaption a{text-decoration:none;border-bottom:1px solid transparent}
.rf figcaption a:hover{border-color:currentColor}
/* SHEO caption fits on the smallest phones */
@media (max-width:420px){.bcol .ph .cap.hand{font-size:12.5px;white-space:normal;line-height:1}}
.idcard dd{line-height:1.45}

/* =========================================================
   SKILLS AS SWATCHES v2 — seven living materials
   ========================================================= */
.skills{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:26px 18px;align-items:start}
.sk{position:relative;text-decoration:none;color:inherit;display:block;grid-column:span 3;perspective:900px}
.sk:nth-child(5),.sk:nth-child(6),.sk:nth-child(7){grid-column:span 4}
.sk:nth-child(odd){margin-top:18px}
.sk-fab{position:relative;display:block;aspect-ratio:1/1.05;transform-origin:top center;transform:rotate(var(--r,0deg));transition:transform .7s cubic-bezier(.2,.8,.2,1),box-shadow .7s;box-shadow:0 18px 28px -18px rgba(0,0,0,.5);overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% 94%,96% 100%,92% 94%,88% 100%,84% 94%,80% 100%,76% 94%,72% 100%,68% 94%,64% 100%,60% 94%,56% 100%,52% 94%,48% 100%,44% 94%,40% 100%,36% 94%,32% 100%,28% 94%,24% 100%,20% 94%,16% 100%,12% 94%,8% 100%,4% 94%,0 100%)}
.sk:nth-child(1) .sk-fab{--r:-2deg}.sk:nth-child(2) .sk-fab{--r:1.5deg}.sk:nth-child(3) .sk-fab{--r:-1deg}.sk:nth-child(4) .sk-fab{--r:2deg}
.sk:nth-child(5) .sk-fab{--r:-1.5deg}.sk:nth-child(6) .sk-fab{--r:1deg}.sk:nth-child(7) .sk-fab{--r:-2deg}
.sk-fab i{position:absolute;inset:-20%;display:block}
.sk:hover .sk-fab{transform:rotate(0) rotateX(14deg) translateY(-6px);box-shadow:0 34px 40px -22px rgba(0,0,0,.55)}
.sk::before{content:"";position:absolute;top:-10px;left:50%;width:18px;height:18px;margin-left:-9px;border-radius:50%;z-index:4;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.95) 0 1.6px,rgba(255,255,255,.4) 2.4px,transparent 6px),radial-gradient(circle,var(--pin,#C4483A) 0 100%);box-shadow:inset -2px -3px 4px rgba(0,0,0,.32),2px 5px 5px -1px rgba(0,0,0,.3)}
.sk-tag{display:block;position:relative;background:#FBFAF6;margin:-8px 8px 0;padding:12px 14px 14px;box-shadow:0 10px 18px -14px rgba(0,0,0,.45);transform:rotate(calc(var(--r,0deg) * -.6));z-index:2}
.sk-no{position:absolute;right:12px;top:10px;font-weight:900;font-variation-settings:"wdth" 62;font-size:22px;opacity:.18}
.sk-tag b{display:block;font-weight:850;font-variation-settings:"wdth" 75;text-transform:uppercase;font-size:17px;line-height:1.1;padding-right:30px}
.sk-tag em{display:block;font-style:normal;font-size:13.5px;color:var(--muted);margin-top:4px;line-height:1.35}
.sk-tag small{display:block;margin-top:8px;font-family:"Waiting for the Sunrise","Bradley Hand",cursive;font-size:17px;color:var(--ink);opacity:.0;transform:translateY(-4px);transition:opacity .4s,transform .4s}
.sk:hover .sk-tag small,.sk:focus-visible .sk-tag small{opacity:.85;transform:none}

/* 01 Fashion — houndstooth wool that shifts as it drapes */
.sk-fashion .sk-fab{background:#EFE7DA}
.sk-fashion i{background-color:#F1EADF;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%232A2320' d='M0 0h8v8H0z M8 0h4l4 4v4z M0 8l8 8H4L0 12z M8 8h4l-4 4z'/%3E%3C/svg%3E");background-size:14px 14px;animation:skDrift 16s linear infinite}
.sk-fashion:hover i{animation-duration:4s}
@keyframes skDrift{to{background-position:28px 28px}}
.sk-fashion{--pin:#14254A}
/* 02 Creative Direction — iridescent satin, the sheen rolls */
.sk-direction i{background:linear-gradient(115deg,#F2C6CF 0%,#FBE9EC 18%,#E7B3BF 30%,#F2E6C2 46%,#FDF6EC 55%,#A8CAC2 70%,#F2C6CF 88%,#FBE9EC 100%);background-size:300% 300%;animation:skSheen 9s ease-in-out infinite}
.sk-direction:hover i{animation-duration:2.4s}
@keyframes skSheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
/* 03 Graphic Design — riso halftone with a misregistered second pass */
.sk-graphic .sk-fab{background:#F7F2EA}
.sk-graphic i{background:radial-gradient(circle,#C4483A 2.1px,transparent 2.6px) 0 0/9px 9px,radial-gradient(circle,#14254A 2.1px,transparent 2.6px) 3px 4px/9px 9px;mix-blend-mode:multiply;transition:background-position .8s}
.sk-graphic i::after{content:"Bb";position:absolute;left:24%;top:24%;font-weight:900;font-variation-settings:"wdth" 62;font-size:clamp(70px,8vw,120px);line-height:.8;color:#F2C6CF;mix-blend-mode:multiply;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.sk-graphic:hover i{background-position:0 0,9px 1px}
.sk-graphic:hover i::after{transform:translate(8px,-6px) rotate(-6deg)}
/* 04 Styling — knife pleats that fan open */
.sk-styling i{background:repeating-linear-gradient(90deg,#E9BDB0 0 10px,#D9A596 10px 12px,#F5D5CB 12px 20px,#C98E80 20px 22px);transition:background-size .8s cubic-bezier(.2,.8,.2,1);background-size:22px 100%}
.sk-styling:hover i{background-size:34px 100%}
.sk-styling i::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.25),transparent 30%,rgba(0,0,0,.12))}
.sk-styling{--pin:#1E1A19}
/* 05 Photography — a strip of 35mm film sliding through the gate */
.sk-photo .sk-fab{background:#1C1818}
.sk-photo i{inset:0;background:
   repeating-linear-gradient(90deg,transparent 0 6px,#F3EFE7 6px 13px,transparent 13px 20px) 0 6px/100% 9px no-repeat,
   repeating-linear-gradient(90deg,transparent 0 6px,#F3EFE7 6px 13px,transparent 13px 20px) 0 calc(100% - 6px)/100% 9px no-repeat,
   repeating-linear-gradient(90deg,#3A3431 0 44%,#1C1818 44% 50%) 0 50%/180px 64% no-repeat,#1C1818;animation:skFilm 7s linear infinite}
.sk-photo i::after{content:"";position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px;border-radius:50%;background:radial-gradient(circle,#fff 0 3px,rgba(242,198,207,.6) 6px,rgba(168,202,194,.25) 14px,transparent 24px);opacity:.0;transition:opacity .4s}
.sk-photo:hover i::after{opacity:1;animation:skFlash 1.4s ease-out infinite}
.sk-photo:hover i{animation-duration:2s}
@keyframes skFilm{to{background-position:-20px 6px,-20px calc(100% - 6px),-180px 50%,0 0}}
@keyframes skFlash{0%{transform:scale(.4);opacity:1}100%{transform:scale(2.2);opacity:0}}
.sk-photo{--pin:#F2E6C2}
/* 06 Digital — a pixel mesh that ripples */
.sk-digital .sk-fab{background:#14254A}
.sk-digital i{background:
   linear-gradient(90deg,rgba(247,242,234,.18) 1px,transparent 1px) 0 0/12px 12px,
   linear-gradient(rgba(247,242,234,.18) 1px,transparent 1px) 0 0/12px 12px,
   radial-gradient(circle at 30% 30%,#A8CAC2 0 12%,transparent 13%) 0 0/48px 48px,
   radial-gradient(circle at 70% 70%,#F2C6CF 0 10%,transparent 11%) 0 0/36px 36px,#14254A;animation:skPix 12s steps(24) infinite}
.sk-digital:hover i{animation-duration:3s}
@keyframes skPix{to{background-position:0 0,0 0,48px 48px,-36px 36px,0 0}}
/* 07 Production — kraft board, masking tape and a clapper stripe */
.sk-production .sk-fab{background:#C9AE8C}
.sk-production i{background:
   repeating-linear-gradient(-45deg,#1E1A19 0 14px,#F7F2EA 14px 28px) 0 0/100% 16% no-repeat,
   linear-gradient(0deg,transparent 0 calc(100% - 1px)) ,var(--grain-l),#C9AE8C;background-blend-mode:normal,normal,multiply,normal;transition:transform .7s cubic-bezier(.2,.8,.2,1);transform-origin:left 20%}
.sk-production i::before,.sk-production i::after{content:"";position:absolute;width:44%;height:12%;background:linear-gradient(180deg,rgba(226,217,201,.92),rgba(214,204,186,.9));box-shadow:0 1px 2px rgba(0,0,0,.15)}
.sk-production i::before{left:30%;top:46%;transform:rotate(-14deg)}
.sk-production i::after{left:38%;top:62%;transform:rotate(9deg)}
.sk-production:hover i{transform:rotate(-3deg)}
.sk-production{--pin:#14254A}

@media (max-width:900px){.sk,.sk:nth-child(n){grid-column:span 6;margin-top:0}}
@media (max-width:560px){.sk,.sk:nth-child(n){grid-column:1 / -1}.sk-fab{aspect-ratio:16/10}.sk-tag small{opacity:.8;transform:none}}
@media (prefers-reduced-motion:reduce){.sk i,.sk i::after{animation:none!important}}

/* skills: seven equal swatches, 4 + 3 centred */
.skills{display:flex!important;flex-wrap:wrap;justify-content:center;gap:30px 22px}
.sk,.sk:nth-child(n){flex:0 0 calc(25% - 17px);grid-column:auto;margin-top:0}
.sk:nth-child(even){margin-top:22px}
/* photography: clearer 35mm strip with frames */
.sk-photo i{inset:0!important;animation:none!important;background:
  repeating-linear-gradient(90deg,transparent 0 7px,#F3EFE7 7px 15px,transparent 15px 22px) 0 8px/100% 10px no-repeat,
  repeating-linear-gradient(90deg,transparent 0 7px,#F3EFE7 7px 15px,transparent 15px 22px) 0 calc(100% - 8px)/100% 10px no-repeat,#1C1818!important}
.sk-photo i::before{content:"";position:absolute;left:0;top:26px;bottom:26px;width:300%;
  background:linear-gradient(90deg,#E9BDB0 0 30%,transparent 30% 34%,#A8CAC2 34% 64%,transparent 64% 68%,#F2E6C2 68% 98%,transparent 98%) 0 0/33.33% 100%;
  filter:saturate(.8) brightness(.9);animation:skFilm2 8s linear infinite}
.sk-photo:hover i::before{animation-duration:2.2s}
@keyframes skFilm2{to{transform:translateX(-33.33%)}}
/* ID card + stubs side by side, no empty gap */
@media (min-width:901px){
  .about .id{grid-column:1 / span 6!important;display:block}
  .about .idcard{max-width:none}
  .about .stubs{grid-column:7 / -1!important;grid-template-columns:1fr!important;align-self:center;gap:14px}
}
@media (max-width:900px){.sk,.sk:nth-child(n){flex-basis:calc(50% - 11px)}}
@media (max-width:560px){.sk,.sk:nth-child(n){flex-basis:100%;margin-top:0}}
/* SWS: no pink boards — neutral studio stone */
.proj-stay-awake .canvas.pinkp,.proj-stay-awake .canvas.lavp{background-color:#CFCBC4;background-image:var(--grain-l);background-blend-mode:multiply}
.proj-stay-awake .sticky.pink{background:#DCD7CF}

/* ---- uniform 3-up look grid (no negative space) ---- */
.canvas.gridboard{background-color:#E4E0D9;background-image:var(--grain-l);background-blend-mode:multiply}
.gb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,44px) clamp(18px,2.6vw,38px)}
.gb-it{margin:0;transform:rotate(var(--r));transition:transform .4s var(--ease)}
.gb-it:hover{transform:rotate(0) translateY(-5px)}
.gb-it .ph{display:block;width:100%;padding:8px;cursor:zoom-in;border:0}
.gb-it .ph img{width:100%!important;aspect-ratio:1000/1294;height:auto!important;object-fit:cover!important;background:#EDEDEB}
.gb-it figcaption{margin-top:8px;font-size:20px;text-align:center}
@media (max-width:600px){.gb{grid-template-columns:repeat(2,minmax(0,1fr))}.gb-it:last-child:nth-child(odd){grid-column:1/-1;max-width:50%;justify-self:center}}

/* ---- star cursor v3: bitmap, compositor-only, tracks 1:1 ---- */
.star-cursor{width:48px;height:48px;margin:-24px 0 0 -24px;perspective:none;transition:opacity .2s;contain:strict;will-change:transform}
.star-cursor .sc-spin{display:block;width:100%;height:100%;animation:scSpin 16s linear infinite;will-change:transform}
.star-cursor img{width:100%;height:100%;filter:none!important;transition:transform .22s cubic-bezier(.2,.7,.1,1);will-change:transform}
@keyframes scSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.star-cursor .sc-spin{animation:none}}

/* ---- 03 Art Direction — a fan of colour chips with a composition grid ---- */
.sk-art .sk-fab{background:#F7F2EA}
.sk-art i{inset:0!important;background:
  repeating-linear-gradient(90deg,transparent 0 calc(20% - 3px),#F7F2EA calc(20% - 3px) 20%),
  linear-gradient(180deg,transparent 0 70%,#FBFAF6 70% 100%),
  linear-gradient(90deg,#1E1A19 0 20%,#C4483A 20% 40%,#F2C6CF 40% 60%,#A8CAC2 60% 80%,#F2E6C2 80% 100%);
  transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.sk-art i::before{content:"";position:absolute;left:0;right:0;top:76%;height:12%;
  background:repeating-linear-gradient(90deg,transparent 0 3%,rgba(30,26,25,.55) 3% 13%,transparent 13% 20%) 0 0/100% 2px no-repeat,
  repeating-linear-gradient(90deg,transparent 0 3%,rgba(30,26,25,.3) 3% 10%,transparent 10% 20%) 0 7px/100% 2px no-repeat}
.sk-art i::after{content:"";position:absolute;inset:10% 10% 36%;opacity:0;transition:opacity .5s,inset .7s cubic-bezier(.2,.8,.2,1);
  background:linear-gradient(90deg,transparent calc(33.3% - .5px),rgba(255,255,255,.85) calc(33.3% - .5px) calc(33.3% + .5px),transparent calc(33.3% + .5px) calc(66.6% - .5px),rgba(255,255,255,.85) calc(66.6% - .5px) calc(66.6% + .5px),transparent calc(66.6% + .5px)),
             linear-gradient(180deg,transparent calc(33.3% - .5px),rgba(255,255,255,.85) calc(33.3% - .5px) calc(33.3% + .5px),transparent calc(33.3% + .5px) calc(66.6% - .5px),rgba(255,255,255,.85) calc(66.6% - .5px) calc(66.6% + .5px),transparent calc(66.6% + .5px));
  outline:1.5px solid rgba(255,255,255,.9);mix-blend-mode:difference}
.sk-art:hover i{transform:translateX(-4%) skewX(-2deg)}
.sk-art:hover i::after{opacity:1;inset:6% 6% 34%}
.sk-art{--pin:#C4483A}
.sk:nth-child(8) .sk-fab{--r:1.5deg}
/* eight swatches: 4 + 4 */
.sk,.sk:nth-child(n){flex:0 0 calc(25% - 17px)}
@media (max-width:900px){.sk,.sk:nth-child(n){flex-basis:calc(50% - 11px)}}
@media (max-width:560px){.sk,.sk:nth-child(n){flex-basis:100%}}

/* ---- envelope: address centred on the front ---- */
.envelope .addr{left:0!important;right:0!important;top:50%!important;bottom:auto!important;transform:translateY(-50%);text-align:center;font-size:16px;line-height:1.6;padding:10px 0;z-index:1}
.envelope .addr .to{display:block}

/* ---- B.YOND folder: four illustrated spreads, 2 × 2, whole pages ---- */
.ff-thumbs.four{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.ff-thumbs.four .ff-th{display:block!important;width:100%}
.ff-thumbs.four .ff-th img{width:100%!important;height:auto!important;aspect-ratio:auto!important;object-fit:contain!important}
.ff-thnote{margin:clamp(26px,3vw,40px) 0 -6px;font-size:clamp(20px,1.7vw,26px);line-height:1;color:var(--ink);transform:rotate(-1.5deg);display:inline-block}
.ff-thnote b{font-weight:400;display:inline-block;transform:translateY(3px)}
.ff-thnote + .ff-thumbs{margin-top:14px!important}
@media (max-width:600px){.ff-thumbs.four{grid-template-columns:1fr}}

/* ---- B.YOND: contact sheet of every spread, beneath the flipbook ---- */
.csheet.spreads button img{aspect-ratio:1.545}
.book-sec + .sheet-sec{padding-top:clamp(60px,7vw,100px)}

/* ---- hero film strip: a real reel you can scroll sideways ---- */
.b-film{position:relative;padding:22px 0!important}
.b-film .frames{display:flex!important;gap:10px;overflow-x:auto;overflow-y:hidden;padding:0 12px 2px;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;cursor:grab}
.b-film .frames::-webkit-scrollbar{display:none}
.b-film .frames:focus-visible{outline:2px solid #F3EFE7;outline-offset:2px}
.b-film .fr{flex:none;position:relative;height:clamp(150px,13.5vw,200px);background:#0E0C0C;padding:0;scroll-snap-align:start;cursor:zoom-in}
.b-film .fr .mb-wrap{height:100%}
.b-film .fr img{height:100%!important;width:auto!important;max-width:none;max-height:none!important;display:block;object-fit:contain!important;aspect-ratio:auto!important}
.b-film .fr-n{position:absolute;left:4px;bottom:-17px;font:700 8px/1 var(--f);letter-spacing:.14em;color:#E9A23B;opacity:.85}
.b-film .film-hint{position:absolute;right:12px;bottom:-24px;font-size:10px;color:var(--muted);letter-spacing:.12em}
.b-film::before,.b-film::after{z-index:1;pointer-events:none}
/* sprockets move with the reel */
.b-film.film::before,.b-film.film::after{background-attachment:local}
.b-film{padding:27px 0!important}
.b-film .fr-n{bottom:-9px;font-size:7px;line-height:7px}

/* ---- badge v4: exact centring. The svg was inline, so the badge box grew ~8px taller than wide
   (line-box descender) and the logo centred in that taller box sat 4px below the ring centre.
   Now the svg is taken out of flow, the badge is an exact square, and the logo is centred in it. ---- */
.bt-badge{height:auto!important;aspect-ratio:1/1!important;line-height:0}
.bt-badge svg{display:block;position:absolute;inset:0;width:100%!important;height:100%!important;transform-origin:50% 50%}
.bt-badge img.no{position:absolute!important;inset:0!important;margin:auto!important;width:52%!important;height:52%!important;object-fit:contain;transform:none!important}
.b-film .film-hint{right:auto;left:12px}

/* =========================================================
   POLAROIDS — real instant-film frames
   ========================================================= */
.board .ph.polar{
  padding:5.4% 5.4% 0!important;border-radius:2px;
  background-color:#F6F3EC;
  background-image:
    linear-gradient(135deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 38%,rgba(0,0,0,0) 62%,rgba(90,70,50,.06) 100%),
    var(--grain-l);
  background-blend-mode:normal,multiply;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.7),
    inset 0 -1px 0 rgba(0,0,0,.05),
    0 1px 1px rgba(30,20,15,.14),
    0 4px 8px -3px rgba(30,20,15,.22),
    0 26px 36px -20px rgba(30,20,15,.6)}
/* the photo sits slightly recessed in the frame, with the gloss of instant film */
.board .ph.polar .mb-wrap{position:relative;overflow:hidden;background:#15110F}
.board .ph.polar .mb-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.22),inset 0 1px 3px rgba(0,0,0,.35),inset 0 0 22px rgba(20,12,8,.18);
  background:linear-gradient(118deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.06) 22%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 72%,rgba(255,255,255,.08) 100%);
  transition:opacity .5s}
.board .ph.polar:hover .mb-wrap::after{opacity:.55}
/* the deep bottom border — caption written on it in marker */
.board .ph.polar .cap.hand{position:static!important;display:block;padding:4.2% 2px 6.4%;font-size:clamp(17px,1.45vw,23px);line-height:1.15;color:#1E1A19;
  white-space:nowrap;overflow:visible;transform:rotate(-1.2deg);transform-origin:left center;opacity:.92}
/* the faint lifted corner shadow of a print that isn't quite flat */
.board .ph.polar::after{content:"";position:absolute;right:4%;bottom:-1px;width:44%;height:22px;z-index:-1;transform:skewX(10deg) rotate(2.5deg);transform-origin:right bottom;box-shadow:12px 14px 16px rgba(30,20,15,.28);pointer-events:none}
@media (max-width:420px){.board .ph.polar .cap.hand{font-size:13px;white-space:normal}}

/* =========================================================
   ABOUT PAPER — a working page, not a blank one
   ========================================================= */
.bt-hello .hl{position:relative;display:inline-block;z-index:0}
.bt-hello .hl::before{content:"";position:absolute;left:-.06em;right:-.08em;bottom:.02em;height:.42em;z-index:-1;border-radius:.08em .2em .12em .25em;
  background:linear-gradient(100deg,rgba(246,218,99,.2),rgba(246,218,99,.92) 6%,rgba(246,218,99,.85) 92%,rgba(246,218,99,.3));
  transform:skewX(-8deg) rotate(-1deg);transform-origin:left;animation:hlIn 1s .6s cubic-bezier(.3,.7,.2,1) both}
@keyframes hlIn{from{transform:skewX(-8deg) rotate(-1deg) scaleX(0)}to{transform:skewX(-8deg) rotate(-1deg) scaleX(1)}}
.bt-copy .circ{position:relative;display:inline-block;font-weight:700}
.bt-copy .circ svg{position:absolute;left:-12%;top:-38%;width:124%;height:176%;overflow:visible;pointer-events:none}
.bt-copy .circ path{fill:none;stroke:#2446A0;stroke-width:2.2;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:640;stroke-dashoffset:640;animation:circIn 1.2s 1.1s cubic-bezier(.4,.1,.2,1) forwards;opacity:.85}
@keyframes circIn{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.bt-hello .hl::before,.bt-copy .circ path{animation:none;stroke-dashoffset:0}}

/* desk objects tucked under the notebook: tape measure, fabric swatch, colour chips */
.b-desk{position:relative;height:clamp(120px,11vw,170px);margin-top:-14px;z-index:2;pointer-events:none}
.b-desk .tm{position:absolute;left:-3%;right:-6%;top:4px;height:30px;transform:rotate(-2.2deg);transform-origin:left center;
  background:
    repeating-linear-gradient(90deg,#1E1A19 0 1px,transparent 1px 4.75px) 0 0/100% 7px no-repeat,
    repeating-linear-gradient(90deg,#1E1A19 0 1px,transparent 1px 19px) 0 0/100% 11px no-repeat,
    repeating-linear-gradient(90deg,#1E1A19 0 1.4px,transparent 1.4px 38px) 0 0/100% 15px no-repeat,
    linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 40%,rgba(0,0,0,.06)),#F2D35A;
  box-shadow:0 1px 0 rgba(0,0,0,.08),0 10px 14px -10px rgba(0,0,0,.5);border-radius:1px;overflow:hidden}
.b-desk .tm-ticks{position:absolute;inset:0}
.b-desk .tm-ticks b{position:absolute;top:13px;left:calc(var(--i) * 38px - 5px);font:800 10px/1 var(--f);color:#1E1A19;font-variation-settings:"wdth" 75}
.b-desk .tm-ticks b:nth-child(odd){color:#B8322B}
.b-desk .swc{position:absolute;right:6%;top:18px;width:clamp(120px,10.5vw,160px);background:#FBFAF6;padding:9px 9px 10px;box-shadow:0 2px 3px rgba(0,0,0,.1),0 16px 22px -14px rgba(30,20,15,.55);transform:rotate(var(--r))}
.b-desk .swc-fab{display:block;aspect-ratio:4/3;background-color:#F1EADF;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%232A2320' d='M0 0h8v8H0z M8 0h4l4 4v4z M0 8l8 8H4L0 12z M8 8h4l-4 4z'/%3E%3C/svg%3E");background-size:9px 9px;
  clip-path:polygon(0 4%,4% 0,8% 4%,12% 0,16% 4%,20% 0,24% 4%,28% 0,32% 4%,36% 0,40% 4%,44% 0,48% 4%,52% 0,56% 4%,60% 0,64% 4%,68% 0,72% 4%,76% 0,80% 4%,84% 0,88% 4%,92% 0,96% 4%,100% 0,100% 100%,96% 96%,92% 100%,88% 96%,84% 100%,80% 96%,76% 100%,72% 96%,68% 100%,64% 96%,60% 100%,56% 96%,52% 100%,48% 96%,44% 100%,40% 96%,36% 100%,32% 96%,28% 100%,24% 96%,20% 100%,16% 96%,12% 100%,8% 96%,4% 100%,0 96%)}
.b-desk .swc-lab{display:block;margin-top:6px;font-size:16px;line-height:1.05;color:#1E1A19}
.b-desk .swc-lab small{font-family:var(--f);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.b-desk .swc-pin{position:absolute;left:50%;top:-12px;width:46px;height:14px;margin-left:-23px;z-index:2;transform:rotate(-8deg);
  background:radial-gradient(circle at 7px 7px,#C9A64B 0 4px,#8E7430 4.5px 5.5px,transparent 6px),linear-gradient(180deg,transparent 5px,#B9B4AA 5px 6.4px,transparent 6.4px 8px,#D6D1C7 8px 9.4px,transparent 9.4px);filter:drop-shadow(0 2px 1px rgba(0,0,0,.25))}
.b-desk .chips{position:absolute;left:10%;top:44px;display:flex;background:#FBFAF6;padding:7px 7px 6px;gap:5px;box-shadow:0 2px 3px rgba(0,0,0,.1),0 14px 20px -14px rgba(30,20,15,.5);transform:rotate(var(--r))}
.b-desk .chips span{display:flex;flex-direction:column;width:clamp(34px,3vw,46px)}
.b-desk .chips i{display:block;aspect-ratio:1/1.2;background:var(--c)}
.b-desk .chips b{font:700 7px/1 var(--f);letter-spacing:.1em;text-transform:uppercase;margin-top:5px;color:#1E1A19;white-space:nowrap}
@media (max-width:900px){.b-desk{height:130px;margin-top:-10px}.b-desk .chips{left:4%}.b-desk .swc{right:4%}}
@media (max-width:560px){.b-desk{height:118px}.b-desk .chips span{width:30px}.b-desk .swc{width:112px;top:26px}.b-desk .chips{top:48px}}
/* polaroid stock: brighter, cleaner */
.board .ph.polar{background-color:#FAF8F3;background-image:linear-gradient(135deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 45%,rgba(120,100,80,.045) 100%)!important;background-blend-mode:normal}
/* desk v2 — visible, compact, fully on the board */
.b-desk{height:clamp(150px,12.5vw,185px);margin-top:18px}
.b-desk .tm{top:0;left:2%;right:-4%;transform:rotate(-1.4deg)}
.b-desk .chips{top:46px;left:8%}
.b-desk .swc{top:22px;right:9%;width:clamp(104px,8.6vw,132px)}
.bt-copy .circ{margin-right:.28em}
@media (max-width:560px){.b-desk{height:150px}.b-desk .swc{top:30px}}

/* equal breathing room: list → "Fashion & direction" matches tape → "Contents" */
#index{padding-bottom:0!important}
#index .index-list{margin-bottom:0!important}
#work{padding-top:calc(clamp(70px,8vw,120px) - 2px)!important}
/* swatch labels: equal height within a row */
.skills{align-items:stretch!important}
.sk{display:flex!important;flex-direction:column}
.sk-tag{flex:1 1 auto}
/* keep the flap creases from running through the address */
.envelope::before{-webkit-mask-image:radial-gradient(ellipse 34% 24% at 50% 50%,transparent 55%,#000 100%);mask-image:radial-gradient(ellipse 34% 24% at 50% 50%,transparent 55%,#000 100%)}
.envelope .addr{font-size:17px}
@media (max-width:600px){
  .fdecor .ptag .t-note{font-size:12.5px!important;line-height:1.3!important;hyphens:none;overflow-wrap:normal}
  .fdecor .hero-ph{grid-column:1 / span 7!important}
  .fdecor{grid-template-columns:repeat(11,minmax(0,1fr))!important}
  .fdecor .ptag{grid-column:8 / span 4!important}
  .b-desk .chips span{width:38px}
  .b-desk .chips b{font-size:6px;letter-spacing:.04em}
}
@media (max-width:600px){.fdecor .hero-ph{grid-column:1 / span 6!important}.fdecor .ptag{grid-column:7 / span 5!important}}

/* highlight on "Bella." removed */
.bt-hello .hl::before{content:none!important}
/* desk: swatch card + colour chips removed — only the tape measure remains */
.b-desk{height:44px!important}
@media (max-width:560px){.b-desk{height:40px!important}}
/* breathing room around the film-strip caption */
.b-film{margin-bottom:30px}
.b-film .film-hint{bottom:-29px;line-height:1}

/* ---- handwriting: Waiting for the Sunrise (single weight). Its x-height is ~30% taller than Caveat's,
   so font-size-adjust keeps every caption at the same visual size and width it was designed for. ---- */
.hand,.sticky,.t-note,.rf figcaption,.sk-tag small{font-family:"Waiting for the Sunrise","Bradley Hand",cursive;font-weight:400!important;font-synthesis:none;font-size-adjust:.46;letter-spacing:.01em;-webkit-text-stroke:.25px currentColor}
/* the envelope address is handwritten too */
.envelope .addr{font-family:"Waiting for the Sunrise","Bradley Hand",cursive!important;font-style:normal!important;font-weight:400;font-synthesis:none;font-size-adjust:.46;-webkit-text-stroke:.25px currentColor;font-size:23px!important;line-height:1.45!important;letter-spacing:.01em}
/* tape measure: exactly as wide as the paper above and parallel to it */
.b-desk .tm{left:0!important;right:0!important;transform:rotate(var(--paper-r,-.6deg))!important;transform-origin:50% 50%!important}
/* tape measure lives on the paper: same width, same angle, edges line up exactly */
.b-title > .tm{position:absolute;left:0!important;right:0!important;top:calc(100% + 16px);height:30px;transform:none!important;z-index:1;
  background:
    repeating-linear-gradient(90deg,#1E1A19 0 1px,transparent 1px 4.75px) 0 0/100% 7px no-repeat,
    repeating-linear-gradient(90deg,#1E1A19 0 1px,transparent 1px 19px) 0 0/100% 11px no-repeat,
    repeating-linear-gradient(90deg,#1E1A19 0 1.4px,transparent 1.4px 38px) 0 0/100% 15px no-repeat,
    linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 40%,rgba(0,0,0,.06)),#F2D35A;
  box-shadow:0 1px 0 rgba(0,0,0,.08),0 10px 14px -10px rgba(0,0,0,.5);border-radius:1px;overflow:hidden}
.b-title > .tm .tm-ticks{position:absolute;inset:0}
.b-title > .tm .tm-ticks b{position:absolute;top:13px;left:calc(var(--i) * 38px - 5px);font:800 10px/1 var(--f);color:#1E1A19;font-variation-settings:"wdth" 75}
.b-title > .tm .tm-ticks b:nth-child(odd){color:#B8322B}
.b-desk{height:60px!important;margin-top:0!important}
@media (max-width:560px){.b-desk{height:56px!important}}

/* =========================================================
   ABOUT — SCRAPBOOK PAGE (replaces the lined notebook)
   cream cardstock · pattern-cutting paper and a sage sheet layered behind ·
   a tomato running stitch · a torn kraft label · clear tape
   ========================================================= */
.b-title.scrap{--r:-.6deg;position:relative;isolation:isolate;
  padding:clamp(34px,3.4vw,50px) clamp(26px,3.2vw,48px) clamp(34px,3.4vw,48px) clamp(40px,4vw,60px)!important;
  background-color:#F7F2E8;
  background-image:
    radial-gradient(circle at 18% 22%,rgba(201,174,140,.22) 0 1px,transparent 1.6px),
    radial-gradient(circle at 72% 64%,rgba(201,174,140,.18) 0 1px,transparent 1.6px),
    radial-gradient(ellipse at 0% 0%,rgba(255,255,255,.7),transparent 55%),
    radial-gradient(ellipse at 100% 100%,rgba(185,160,120,.12),transparent 60%),
    var(--grain-l);
  background-size:37px 41px,53px 47px,100% 100%,100% 100%,220px 220px;
  background-blend-mode:normal,normal,normal,normal,multiply;
  box-shadow:0 1px 1px rgba(30,20,15,.12),0 3px 6px -2px rgba(30,20,15,.14),0 34px 46px -26px rgba(30,20,15,.55);
  transform:rotate(var(--r));transition:transform .8s cubic-bezier(.2,.8,.2,1)}
/* deckled, hand-torn bottom edge */
.b-title.scrap{-webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 9px) no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='10' preserveAspectRatio='none'%3E%3Cpath d='M0 0H120V3L116 6L111 4L107 8L101 5L96 7L90 3L85 6L79 4L74 9L68 5L62 7L57 4L51 8L45 5L40 6L34 3L29 7L23 4L18 8L12 5L7 7L3 4L0 6Z'/%3E%3C/svg%3E") bottom/120px 10px repeat-x;
  mask:linear-gradient(#000,#000) top/100% calc(100% - 9px) no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='10' preserveAspectRatio='none'%3E%3Cpath d='M0 0H120V3L116 6L111 4L107 8L101 5L96 7L90 3L85 6L79 4L74 9L68 5L62 7L57 4L51 8L45 5L40 6L34 3L29 7L23 4L18 8L12 5L7 7L3 4L0 6Z'/%3E%3C/svg%3E") bottom/120px 10px repeat-x}
/* the mask would also clip the layers behind, so the layers live on a wrapper-free pseudo stack via drop-shadow */
.b-title.scrap{-webkit-mask:none;mask:none}
.b-title.scrap::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:10px;z-index:1;pointer-events:none;
  background:#F7F2E8;clip-path:polygon(0 0,100% 0,100% 30%,97% 60%,92.5% 40%,89% 80%,84% 50%,80% 70%,75% 30%,71% 60%,66% 40%,62% 90%,57% 50%,52% 70%,47.5% 40%,42.5% 80%,37.5% 50%,33% 60%,28% 30%,24% 70%,19% 40%,15% 80%,10% 50%,6% 70%,2.5% 40%,0 60%)}
/* layered papers peeking out behind */
.b-title.scrap .sc-layer{position:absolute;z-index:-1;pointer-events:none;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.b-title.scrap .sc-sage{inset:18px -14px -16px 26px;background:#A8CAC2;background-image:var(--grain-l);background-blend-mode:multiply;transform:rotate(2.6deg);box-shadow:0 20px 30px -22px rgba(30,20,15,.5)}
/* pattern-cutting paper: dotted grid with the odd numbered guide, as on a cutting table */
.b-title.scrap .sc-grid{inset:-16px 30px 40px -18px;background-color:#FBF9F3;
  background-image:radial-gradient(circle,rgba(20,37,74,.55) 0 1px,transparent 1.4px),linear-gradient(90deg,rgba(196,72,58,.35) 1px,transparent 1px),linear-gradient(rgba(196,72,58,.35) 1px,transparent 1px);
  background-size:12px 12px,60px 60px,60px 60px;background-position:6px 6px,0 0,0 0;
  transform:rotate(-2.4deg);box-shadow:0 16px 26px -20px rgba(30,20,15,.45)}
.b-title.scrap:hover .sc-sage{transform:rotate(3.6deg) translate(6px,4px)}
.b-title.scrap:hover .sc-grid{transform:rotate(-3.4deg) translate(-6px,-4px)}
/* a tomato running stitch down the left edge */
.b-title.scrap .sc-stitch{position:absolute;left:clamp(16px,1.8vw,24px);top:26px;bottom:26px;width:2px;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(180deg,#C4483A 0 9px,transparent 9px 16px);opacity:.85;box-shadow:1px 1px 0 rgba(0,0,0,.08)}
/* clear tape, holding the page down */
.b-title.scrap .sc-tape{position:absolute;z-index:4;width:96px;height:26px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(236,232,225,.45));box-shadow:0 1px 2px rgba(0,0,0,.08);backdrop-filter:blur(.5px)}
.b-title.scrap .sc-tape-l{left:-22px;top:18px;transform:rotate(-38deg)}
.b-title.scrap .sc-tape-b{right:18%;bottom:-12px;transform:rotate(4deg);width:84px}
/* torn kraft label for the kicker */
.b-title.scrap .bt-kick{margin-bottom:6px}
.b-title.scrap .sc-kraft{display:inline-block;padding:7px 14px 6px 12px;background:#C9AE8C;background-image:var(--grain-l);background-blend-mode:multiply;color:#1E1A19;opacity:1;
  transform:rotate(-1.6deg);box-shadow:0 2px 3px rgba(0,0,0,.12);
  clip-path:polygon(0 8%,6% 0,20% 6%,34% 0,50% 5%,66% 0,82% 6%,100% 0,98% 50%,100% 100%,84% 94%,68% 100%,52% 95%,36% 100%,20% 94%,4% 100%,2% 50%)}
/* running text: no ruled lines, generous leading */
.b-title.scrap .bt-copy p{background:none!important;padding-bottom:0!important;line-height:1.65!important;margin:0 0 14px!important;max-width:62ch}
.b-title.scrap .bt-copy p:last-child{margin-bottom:0!important}
.b-title.scrap .bt-roles{border-top:1.5px dashed rgba(30,26,25,.28)}
/* tape measure sits just below the torn edge */
.b-title.scrap > .tm{top:calc(100% + 22px)}
@media (max-width:900px){.b-title.scrap{padding-left:40px!important}.b-title.scrap .sc-stitch{left:16px}}
@media (max-width:560px){.b-title.scrap{padding:30px 20px 30px 34px!important}.b-title.scrap .sc-stitch{left:12px}.b-title.scrap .sc-grid{inset:-10px 20px 40px -10px}.b-title.scrap .sc-sage{inset:14px -8px -10px 18px}}
@media (prefers-reduced-motion:reduce){.b-title.scrap .sc-layer{transition:none}}
/* stacking fix: the cream sheet is drawn on ::before so the layered papers sit BEHIND it */
.b-title.scrap{background:none!important;box-shadow:none!important}
.b-title.scrap::before{content:"";position:absolute;left:0;right:0;top:0;bottom:-9px;z-index:-1;pointer-events:none;
  background-color:#F7F2E8;
  background-image:
    radial-gradient(circle at 18% 22%,rgba(201,174,140,.22) 0 1px,transparent 1.6px),
    radial-gradient(circle at 72% 64%,rgba(201,174,140,.18) 0 1px,transparent 1.6px),
    radial-gradient(ellipse at 0% 0%,rgba(255,255,255,.7),transparent 55%),
    radial-gradient(ellipse at 100% 100%,rgba(185,160,120,.12),transparent 60%),
    var(--grain-l);
  background-size:37px 41px,53px 47px,100% 100%,100% 100%,220px 220px;
  background-blend-mode:normal,normal,normal,normal,multiply;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),97% calc(100% - 3px),92.5% calc(100% - 5px),89% 100%,84% calc(100% - 4px),80% calc(100% - 2px),75% calc(100% - 6px),71% calc(100% - 3px),66% calc(100% - 5px),62% 100%,57% calc(100% - 4px),52% calc(100% - 2px),47.5% calc(100% - 5px),42.5% 100%,37.5% calc(100% - 4px),33% calc(100% - 3px),28% calc(100% - 6px),24% calc(100% - 2px),19% calc(100% - 5px),15% 100%,10% calc(100% - 4px),6% calc(100% - 2px),2.5% calc(100% - 5px),0 calc(100% - 3px))}
.b-title.scrap::after{content:none!important}
.b-title.scrap .sc-shadow{position:absolute;left:0;right:0;top:0;bottom:-6px;z-index:-2;pointer-events:none;
  box-shadow:0 1px 1px rgba(30,20,15,.12),0 3px 6px -2px rgba(30,20,15,.14),0 34px 46px -26px rgba(30,20,15,.55)}
.b-title.scrap .sc-layer{z-index:-3}
/* scrapbook, all in off-white & cream: bright ivory top sheet, ecru cardstock + pattern paper behind */
.b-title.scrap::before{background-color:#FBF8F1!important;
  background-image:
    radial-gradient(circle at 18% 22%,rgba(190,165,130,.20) 0 .8px,transparent 1.4px),
    radial-gradient(circle at 72% 64%,rgba(190,165,130,.16) 0 .8px,transparent 1.4px),
    radial-gradient(ellipse at 0% 0%,rgba(255,255,255,.9),transparent 55%),
    radial-gradient(ellipse at 100% 100%,rgba(214,196,166,.16),transparent 60%)!important;
  background-size:37px 41px,53px 47px,100% 100%,100% 100%!important;background-blend-mode:normal!important}
.b-title.scrap .sc-sage{background:#EFE6D3!important;background-image:radial-gradient(circle at 30% 40%,rgba(170,145,110,.18) 0 .8px,transparent 1.4px)!important;background-size:29px 31px!important}
.b-title.scrap .sc-grid{background-color:#F6F2EA!important;
  background-image:radial-gradient(circle,rgba(30,26,25,.28) 0 .9px,transparent 1.3px),linear-gradient(90deg,rgba(30,26,25,.10) 1px,transparent 1px),linear-gradient(rgba(30,26,25,.10) 1px,transparent 1px)!important}
/* crisp, identical text in every paragraph: the About sheet sits perfectly upright (rotated text renders unevenly line to line);
   the scrapbook tilt now comes from the papers layered behind it */
.b-title.scrap,.b-title.scrap.drop.in{--r:0deg;transform:none!important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.b-title.scrap .bt-copy p{font-size:16.5px!important;font-weight:400!important;font-family:var(--f)!important;letter-spacing:0!important}
/* film caption starts exactly at the strip's left edge */
.b-film .film-hint{left:0!important;right:auto;padding:0;margin:0;text-indent:0}

/* forest green with depth: a lit centre falling off into deeper pine, over the paper grain */
.contact{background-color:#14254A!important;
  background-image:radial-gradient(ellipse 70% 60% at 22% 18%,rgba(70,104,170,.34),transparent 70%),radial-gradient(ellipse 60% 70% at 90% 100%,rgba(4,10,30,.6),transparent 70%),var(--grain-l)!important;
  background-blend-mode:normal,normal,multiply!important}

/* photography swatch: warmer, livelier frames (coral dusk · forest light · golden hour), lit from above */
.sk-photo i::before{
  background:
    linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 42%,rgba(20,10,5,.16)) 0 0/100% 100% no-repeat,
    linear-gradient(90deg,#DE6B52 0,#F2B29B 30%,transparent 30% 34%,#3E7A5C 34%,#9CC4AF 64%,transparent 64% 68%,#E8BE5A 68%,#F6E3A6 98%,transparent 98%) 0 0/33.33% 100%!important;
  filter:none!important}
/* "hover a swatch" note stays on one line */
.about .head:has(.t-h3){grid-template-columns:auto auto!important;justify-content:space-between;align-items:baseline}
.about .head:has(.t-h3) .t-note{white-space:nowrap;max-width:none;justify-self:end}
@media (max-width:760px){.about .head:has(.t-h3){grid-template-columns:1fr!important}.about .head:has(.t-h3) .t-note{white-space:normal;justify-self:start;text-wrap:balance}}
@media (max-width:760px){.about .head:has(.t-h3) .t-note{white-space:nowrap!important;font-size:min(1.25em,4.6vw)!important}}
@media (max-width:760px){.about .head:has(.t-h3) .t-note{font-size:min(1.25em,4vw)!important}}
/* photography swatch v3: the site's own palette (dusty blush · Tiffany aqua · kraft & butter) */
.sk-photo i::before{
  background:
    linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0) 42%,rgba(20,10,5,.12)) 0 0/100% 100% no-repeat,
    linear-gradient(90deg,#E4A0AE 0,#F6D3DA 30%,transparent 30% 34%,#7FCFC7 34%,#C9ECE7 64%,transparent 64% 68%,#D7B78C 68%,#F2E6C2 98%,transparent 98%) 0 0/33.33% 100%!important;
  filter:none!important}
/* hyphenated words never break across lines */
.nw{white-space:nowrap}
/* "about me" label: same dymo tape as the other section labels, in navy */
.dymo.navy{background:#14254A!important;color:#F7F2EA!important}
.b-title.scrap .bt-kick{display:block;margin-bottom:14px}
/* no-break wrappers never inherit pill / tag styling from their parent */
span.nw{display:inline!important;background:none!important;border:0!important;padding:0!important;margin:0!important;box-shadow:none!important;border-radius:0!important;transform:none!important;font:inherit!important;color:inherit!important;letter-spacing:inherit!important;white-space:nowrap!important}
span.nw::before,span.nw::after{content:none!important}