/* ===== Brand fonts: The Seasons (headlines), Caveat Bold (handwriting), Telegraf (text) =====
   Put the licensed font files in the fonts/ folder with these names. If they're missing,
   the site falls back to Gloock and Hanken Grotesk automatically. */
@font-face{font-family:"The Seasons";src:local("The Seasons"),local("TheSeasons-Regular"),url(fonts/TheSeasons-Regular.woff2) format("woff2"),url(fonts/TheSeasons-Regular.woff) format("woff"),url(fonts/TheSeasons-Regular.otf) format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"The Seasons";src:local("The Seasons Italic"),local("TheSeasons-Italic"),url(fonts/TheSeasons-Italic.woff2) format("woff2"),url(fonts/TheSeasons-Italic.woff) format("woff"),url(fonts/TheSeasons-Italic.otf) format("opentype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Telegraf";src:local("Telegraf"),local("Telegraf-Regular"),url(fonts/Telegraf-Regular.woff2) format("woff2"),url(fonts/Telegraf-Regular.woff) format("woff"),url(fonts/Telegraf-Regular.otf) format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Telegraf";src:local("Telegraf Medium"),local("Telegraf-Medium"),url(fonts/Telegraf-Medium.woff2) format("woff2"),url(fonts/Telegraf-UltraBold.woff2) format("woff2"),url(fonts/Telegraf-UltraBold.otf) format("opentype");font-weight:500 800;font-style:normal;font-display:swap}

:root{color-scheme:light;--cream:#FBF6F0;--paper:#F4EADB;--sand:#E9D1AF;--film:#1F1F12;--olive:#3E3F20;--rust:#6D372F;--ochre:#CD893D;--lime:#AFB649;--ink:#2F3018;--muted:#6A6547;--line:rgba(62,63,32,.18);
--display:"The Seasons","Gloock",Georgia,serif;--italic:"The Seasons","Gloock",Georgia,serif;--body:"Telegraf","Hanken Grotesk","Helvetica Neue",Arial,sans-serif;--mono:"Telegraf","Hanken Grotesk","Helvetica Neue",Arial,sans-serif;--hand:"Caveat","Segoe Print","Bradley Hand",cursive;
--gutter:clamp(16px,4vw,56px);--max:1320px}
*{box-sizing:border-box}[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.12;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
img{max-width:100%;display:block}a{color:inherit}
:focus-visible{outline:2px solid var(--ochre);outline-offset:3px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:.95;margin:0;letter-spacing:-.02em}
em{font-family:var(--italic);font-style:italic;font-weight:400;letter-spacing:0}
p{margin:0}
.hand{font-family:var(--hand);font-weight:600;font-size:clamp(22px,2vw,30px);line-height:1;color:var(--rust)}
.logo{display:block;width:74px;height:auto}
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;text-decoration:none;padding:14px 24px;border-radius:999px;border:1.5px solid var(--olive);background:var(--olive);color:var(--cream);transition:transform .25s ease,background .25s ease,border-color .25s ease,color .25s ease;cursor:pointer}
.btn:hover{transform:translateY(-2px) rotate(-1deg);background:var(--rust);border-color:var(--rust)}
.btn.ochre{background:var(--ochre);border-color:var(--ochre);color:var(--film)}
.btn.ochre:hover{background:var(--olive);border-color:var(--olive);color:var(--cream)}
.btn.ghost{background:transparent;color:var(--olive)}
.btn.sm{padding:10px 18px;font-size:14px}

/* header, identical on every page */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(251,246,240,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);color:var(--ink)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:14px}
.nav .logo{color:var(--olive);width:72px}
.nav ul{display:flex;font-family:var(--body);gap:clamp(14px,2.2vw,32px);list-style:none;margin:0;padding:0;font-size:14px;font-weight:500}
.nav ul a{text-decoration:none}
.nav ul a:hover,.nav ul a[aria-current="page"]{color:var(--rust)}
@media (max-width:900px){.nav ul{display:none}}

/* watercolour blobs */
.blob{position:absolute;pointer-events:none;mix-blend-mode:multiply;opacity:.55}

/* ================= HERO: a wall you can paint on ================= */
.hero{position:relative;min-height:min(92svh,860px);overflow:hidden;display:grid;place-items:center;padding:40px var(--gutter) 60px;touch-action:pan-y;cursor:crosshair}
#paint{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;mix-blend-mode:multiply;opacity:.42;filter:url(#wc2)}
.pin{position:absolute;z-index:1;margin:0;background:#FFFDF8;padding:10px 10px 34px;box-shadow:0 2px 3px rgba(62,63,32,.12),0 18px 40px rgba(62,63,32,.18);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pin img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:sepia(.22) saturate(.9) contrast(1.05)}
.pin figcaption{position:absolute;left:12px;right:12px;bottom:6px;font-family:var(--hand);font-weight:600;font-size:22px;line-height:1;color:var(--ink)}
.pin::before{content:"";position:absolute;top:-14px;left:50%;width:78px;height:24px;translate:-50% 0;background:rgba(233,209,175,.8);rotate:-4deg;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.pin:hover{transform:rotate(0deg) scale(1.04)!important;z-index:4}
.p1{width:clamp(130px,14vw,210px);left:4%;top:9%;transform:rotate(-8deg)}
.p2{width:clamp(120px,12vw,180px);left:13%;bottom:8%;transform:rotate(6deg)}
.p3{width:clamp(130px,13vw,200px);right:5%;top:7%;transform:rotate(7deg)}
.p4{width:clamp(120px,12vw,185px);right:14%;bottom:6%;transform:rotate(-5deg)}
.p5{width:clamp(100px,9vw,140px);left:27%;top:4%;transform:rotate(3deg)}
.p6{width:clamp(100px,9vw,140px);right:28%;bottom:3%;transform:rotate(-9deg)}
.center{position:relative;z-index:3;text-align:center;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.center > *{pointer-events:auto}
.sig{display:block;width:clamp(260px,40vw,560px);height:auto}
.tag{font-family:var(--italic);font-style:italic;font-size:clamp(26px,3.2vw,44px);color:var(--rust);margin-top:6px;position:relative}
.tag svg{position:absolute;left:-4%;bottom:-14px;width:108%;height:22px;overflow:visible}
.hero .ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:36px}
.try{position:absolute;z-index:3;left:50%;bottom:22px;translate:-50% 0;display:flex;align-items:center;gap:8px;pointer-events:none}
.try .hand{font-size:26px;color:var(--olive)}
.try svg{width:46px;height:30px}
@media (max-width:760px){
  .try{display:none}
  .hero{min-height:auto;padding-block:48px 110px}
  .p1{left:-6%;top:3%}.p3{right:-6%;top:2%}.p5,.p6{display:none}
  .p2{left:2%;bottom:3%}.p4{right:2%;bottom:5%}
  .center{padding-block:130px 150px}
}

/* ================= BEFORE / AFTER ================= */
.ba{padding-block:clamp(80px,10vw,140px) clamp(60px,8vw,110px);position:relative;overflow:hidden}
.ba .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,80px);align-items:center}
.ba h2{font-size:clamp(54px,7.6vw,118px);color:var(--olive)}
.ba h2 em{color:var(--rust);display:block}
.ba .hand{margin-top:22px;font-size:clamp(26px,2.4vw,34px)}
.slider{position:relative;aspect-ratio:4/3;border-radius:6px;overflow:hidden;box-shadow:0 26px 60px rgba(62,63,32,.22);background:var(--paper);--x:50%;transform:rotate(1.2deg)}
.slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:sepia(.18) saturate(.92)}
.slider .after{clip-path:inset(0 0 0 var(--x))}
.slider .line{position:absolute;top:0;bottom:0;left:var(--x);width:3px;background:var(--cream);translate:-50% 0;pointer-events:none}
.slider .knob{position:absolute;top:50%;left:var(--x);translate:-50% -50%;width:62px;height:62px;border-radius:50%;background:var(--ochre);display:grid;place-items:center;font-family:var(--display);font-size:22px;color:var(--film);box-shadow:0 8px 20px rgba(0,0,0,.25);pointer-events:none}
.slider input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.slider .lab{position:absolute;bottom:14px;font-family:var(--hand);font-weight:600;font-size:28px;color:var(--cream);text-shadow:0 1px 8px rgba(0,0,0,.5);pointer-events:none}
.slider .lab.l{left:18px}.slider .lab.r{right:18px}
@media (max-width:820px){.ba .wrap{grid-template-columns:1fr}}

/* ================= WALL ================= */
.wall{background:var(--olive);color:var(--cream);padding-block:clamp(70px,9vw,130px);position:relative;overflow:hidden}
.wall h2{font-size:clamp(46px,7vw,110px);color:var(--cream);text-align:center}
.wall h2 em{color:var(--sand)}
.salon{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(60px,7vw,100px);gap:clamp(12px,1.6vw,22px);margin-top:clamp(44px,6vw,80px)}
.salon figure{margin:0;position:relative;background:#FFFDF8;padding:8px 8px 30px;box-shadow:0 18px 40px rgba(0,0,0,.35);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.salon figure:hover{transform:rotate(0) scale(1.03)!important;z-index:3}
.salon img{width:100%;height:100%;object-fit:cover;filter:sepia(.22) saturate(.9) contrast(1.05)}
.salon figcaption{position:absolute;left:10px;bottom:4px;font-family:var(--hand);font-weight:600;font-size:22px;color:var(--ink);line-height:1}
.w1{grid-column:1/span 4;grid-row:span 4;transform:rotate(-2deg)}
.w2{grid-column:5/span 3;grid-row:2/span 3;transform:rotate(2.5deg)}
.w3{grid-column:8/span 5;grid-row:1/span 4;transform:rotate(-1deg)}
.w4{grid-column:2/span 3;grid-row:5/span 3;transform:rotate(3deg)}
.w5{grid-column:5/span 4;grid-row:5/span 4;transform:rotate(-2.5deg)}
.w6{grid-column:9/span 3;grid-row:5/span 3;transform:rotate(2deg)}
.salon .doodle{position:absolute;pointer-events:none;z-index:4}
@media (max-width:820px){.salon{grid-template-columns:1fr 1fr;grid-auto-rows:170px}.salon figure{grid-column:span 1!important;grid-row:span 1!important}.w1,.w3,.w5{grid-row:span 2!important}}

/* ================= WHAT WE DO: hover reveals ================= */
.menu{padding-block:clamp(80px,10vw,140px);position:relative}
.menu .hand{text-align:center;display:block;font-size:32px}
.rows{list-style:none;margin:28px 0 0;padding:0;border-top:1.5px solid var(--olive)}
.rows li{border-bottom:1px solid var(--line)}
.rows a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(14px,3vw,40px);padding:clamp(14px,2vw,22px) 0;text-decoration:none;color:var(--olive);transition:color .3s ease,padding .4s cubic-bezier(.2,.7,.2,1)}
.rows .n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--muted)}
.rows .w{font-family:var(--display);font-size:clamp(44px,8vw,120px);line-height:.95;letter-spacing:-.03em}
.rows .w em{color:var(--rust)}
.rows .go{font-family:var(--hand);font-weight:600;font-size:clamp(22px,2vw,30px);color:var(--rust);opacity:0;transform:translateX(-10px);transition:all .3s ease}
.rows a:hover{padding-left:18px;color:var(--rust)}
.rows a:hover .go{opacity:1;transform:none}
.rows .thumb{display:none}
.float{position:fixed;left:0;top:0;width:240px;aspect-ratio:4/5;pointer-events:none;z-index:60;border:8px solid #FFFDF8;border-bottom-width:26px;box-shadow:0 22px 50px rgba(62,63,32,.3);opacity:0;transform:translate(-50%,-50%) rotate(-4deg) scale(.9);transition:opacity .25s ease,transform .25s ease;background:var(--paper)}
.float.on{opacity:1;transform:translate(-50%,-50%) rotate(-4deg) scale(1)}
.float img{width:100%;height:100%;object-fit:cover;filter:sepia(.22) saturate(.9)}
@media (hover:none),(max-width:820px){
  .float{display:none}
  .rows a{grid-template-columns:auto 1fr 64px}
  .rows .thumb{display:block;width:64px;height:78px;object-fit:cover;border:4px solid #FFFDF8;box-shadow:0 6px 14px rgba(62,63,32,.2);transform:rotate(3deg)}
  .rows .go{display:none}
}

/* ================= NUMBERS ================= */
.nums{background:var(--paper);padding-block:clamp(60px,8vw,110px);overflow:hidden}
.nums .row{display:flex;flex-wrap:wrap;justify-content:space-around;gap:clamp(24px,5vw,80px);text-align:center}
.num b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(64px,9vw,140px);line-height:.9;color:var(--olive);position:relative}
.num:nth-child(2) b{color:var(--rust)}.num:nth-child(3) b{color:#9E5F1C}
.num .hand{display:block;margin-top:10px;color:var(--ink)}
.num svg{position:absolute;left:-6%;bottom:-8px;width:112%;height:24px;overflow:visible}

/* ================= FOUNDER NOTE ================= */
.note{padding-block:clamp(80px,10vw,140px)}
.note .wrap{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,6vw,90px);align-items:center;max-width:1100px}
.note figure{margin:0;width:clamp(220px,26vw,340px);background:#FFFDF8;padding:12px 12px 44px;box-shadow:0 20px 44px rgba(62,63,32,.2);transform:rotate(-4deg);position:relative}
.note figure img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:30% center;filter:sepia(.18)}
.note figcaption{position:absolute;left:14px;bottom:8px;font-family:var(--hand);font-weight:600;font-size:26px}
.note blockquote{margin:0;font-family:var(--italic);font-style:italic;font-size:clamp(32px,4vw,58px);line-height:1.08;color:var(--olive)}
.note .sig2{display:block;width:170px;height:auto;margin-top:18px}
.note a.more{display:inline-block;margin-top:18px;font-family:var(--hand);font-weight:600;font-size:30px;color:var(--rust);text-decoration:none;border-bottom:2px solid currentColor}
@media (max-width:760px){.note .wrap{grid-template-columns:1fr;justify-items:center;text-align:center}}

/* ================= BREATHE ================= */
.breathe{position:relative;background:var(--film);color:var(--cream);overflow:hidden;min-height:min(90svh,760px);display:grid;place-items:center;text-align:center}
.breathe > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:sepia(.35) saturate(.8) brightness(.55)}
.breathe .in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;padding:60px var(--gutter)}
.orb{width:clamp(160px,18vw,230px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#E7A45C,var(--ochre) 55%,#A9672A);box-shadow:0 0 0 14px rgba(205,137,61,.16),0 0 0 32px rgba(205,137,61,.07);display:grid;place-items:center;animation:breathe 10s ease-in-out infinite}
.orb span{font-family:var(--hand);font-weight:600;font-size:34px;color:var(--film)}
@keyframes breathe{0%,100%{transform:scale(.86)}40%{transform:scale(1.12)}55%{transform:scale(1.12)}}
.breathe h2{font-size:clamp(56px,9vw,140px);margin-top:36px;color:var(--cream)}
.breathe h2 em{color:var(--sand)}
.breathe .ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px}
.breathe .btn.ghost{color:var(--cream);border-color:rgba(251,246,240,.7)}
.breathe .btn.ghost:hover{background:var(--cream);color:var(--ink)}

footer{background:var(--olive);color:var(--sand);padding-block:28px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
footer a{text-decoration:none;border-bottom:1px solid rgba(233,209,175,.4)}

/* hand-drawn strokes draw themselves */
.draw path{stroke-dasharray:var(--len,600);stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){
  .draw path{animation:draw 1.6s .4s cubic-bezier(.3,.6,.2,1) both}
  .pin{animation:drop .9s cubic-bezier(.2,.8,.2,1.1) both}
  .p2{animation-delay:.1s}.p3{animation-delay:.2s}.p4{animation-delay:.3s}.p5{animation-delay:.4s}.p6{animation-delay:.5s}
}
@keyframes draw{from{stroke-dashoffset:var(--len,600)}to{stroke-dashoffset:0}}
@keyframes drop{from{translate:0 -24px;opacity:.2}to{translate:0 0;opacity:1}}
@media (prefers-reduced-motion:reduce){.orb{animation:none}html{scroll-behavior:auto}}

/* =====================================================================
   Shared pieces for the Our story and Shop pages (same visual language)
   ===================================================================== */
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--rust)}
.ptitle{font-size:clamp(76px,13vw,200px);line-height:.85;color:var(--olive);letter-spacing:-.035em;text-align:center}
.ptitle em{color:var(--rust);display:block;font-size:.72em;margin-top:.04em}
.center .hand.big{font-size:clamp(28px,3vw,42px);color:var(--olive);margin-top:14px}
.u{position:relative;display:inline-block}
.u svg{position:absolute;left:-4%;bottom:-12px;width:108%;height:20px;overflow:visible}

/* big quote block */
.quote{padding-block:clamp(90px,11vw,160px);text-align:center;position:relative;overflow:hidden}
.quote blockquote{margin:0 auto;max-width:18ch;font-family:var(--italic);font-style:italic;font-size:clamp(40px,6vw,92px);line-height:1.02;color:var(--olive)}
.quote blockquote b{font-family:var(--display);font-style:normal;font-weight:400;color:var(--rust)}
.quote .hand{display:block;margin-top:26px;font-size:clamp(26px,2.4vw,34px)}

/* the three shapes, painted */
.shapes{display:flex;justify-content:center;gap:clamp(24px,6vw,90px);margin-top:clamp(48px,6vw,80px);flex-wrap:wrap}
.shape{display:flex;flex-direction:column;align-items:center;gap:10px;width:clamp(150px,18vw,220px)}
.shape svg{width:100%;height:auto}
.shape .hand{margin:0;font-size:26px;color:var(--ink)}
.shape.me .hand{color:var(--rust)}

/* chapter boards */
.chap{position:relative;padding-block:clamp(80px,10vw,140px);overflow:hidden}
.chap.alt{background:var(--paper)}
.chap.dark{background:var(--olive);color:var(--cream)}
.chap .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center}
.chap.flip .wrap > .txt{order:2}
.chap .no{font-family:var(--hand);font-weight:600;font-size:clamp(28px,2.6vw,38px);color:var(--c,var(--rust));line-height:1}
.chap h2{font-size:clamp(50px,6.2vw,96px);color:var(--olive);margin-top:8px}
.chap h2 em{color:var(--c,var(--rust));display:block}
.chap.dark h2{color:var(--cream)}.chap.dark h2 em{color:var(--sand)}
.chap .txt p.s{font-size:clamp(17px,1.4vw,19px);line-height:1.65;color:var(--muted);max-width:44ch;margin-top:22px}
.chap.dark .txt p.s{color:rgba(251,246,240,.78)}
.chap .carry{display:inline-block;margin-top:28px;font-family:var(--hand);font-weight:600;font-size:clamp(26px,2.4vw,34px);line-height:1.1;color:var(--c,var(--rust));max-width:24ch;transform:rotate(-1.5deg)}
.chap.dark .carry{color:var(--sand)}
.chap .pins{position:relative;min-height:clamp(380px,40vw,560px)}
.chap .pins .pin{position:absolute}
.chap .pins .a{width:58%;left:2%;top:4%;transform:rotate(-4deg)}
.chap .pins .b{width:46%;right:0;top:18%;transform:rotate(5deg)}
.chap .pins .c{width:42%;left:22%;bottom:0;transform:rotate(-2deg)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.tags span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;border-radius:999px;border:1px solid currentColor;opacity:.8}
@media (max-width:820px){.chap .wrap{grid-template-columns:1fr}.chap.flip .wrap > .txt{order:0}.chap .pins{min-height:120vw}}

/* dark painted panel with pinned photos (reused for giving back) */
.wall .row3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,44px);margin-top:clamp(44px,6vw,80px)}
.wall .row3 figure{margin:0;background:#FFFDF8;padding:10px 10px 44px;box-shadow:0 18px 40px rgba(0,0,0,.35);position:relative}
.wall .row3 figure:nth-child(1){transform:rotate(-3deg)}.wall .row3 figure:nth-child(2){transform:rotate(2deg) translateY(24px)}.wall .row3 figure:nth-child(3){transform:rotate(-1.5deg)}
.wall .row3 img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:sepia(.22) saturate(.9)}
.wall .row3 figcaption{position:absolute;left:12px;right:12px;bottom:8px;font-family:var(--hand);font-weight:600;font-size:24px;line-height:1;color:var(--ink)}
.wall .sub{text-align:center;font-family:var(--hand);font-weight:600;font-size:clamp(26px,2.4vw,34px);color:var(--sand);margin-top:14px}
@media (max-width:760px){.wall .row3{grid-template-columns:1fr;max-width:360px;margin-inline:auto}}

/* contact card */
.card-contact{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,6vw,90px);align-items:center;max-width:1100px;margin-inline:auto}
.card-contact dl{margin:24px 0 0;display:grid;grid-template-columns:auto 1fr;gap:10px 22px;font-size:18px}
.card-contact dt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-top:5px}
.card-contact dd{margin:0;font-family:var(--display);font-size:clamp(19px,1.8vw,24px);word-break:break-word}
.card-contact dd a{text-decoration:none;border-bottom:1px solid var(--line)}
@media (max-width:760px){.card-contact{grid-template-columns:1fr;justify-items:center}}

/* ---------- shop ---------- */
.tabs-wrap{position:sticky;top:72px;z-index:40;background:rgba(251,246,240,.96);border-bottom:1px solid var(--line)}
.tabs{display:flex;gap:10px;overflow-x:auto;padding-block:14px;scrollbar-width:none;justify-content:center}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;font-family:var(--hand);font-weight:600;font-size:26px;line-height:1;padding:8px 18px 6px;border-radius:999px;border:1.5px dashed var(--line);background:transparent;color:var(--ink);cursor:pointer;transition:all .2s ease}
.tab:hover{border-color:var(--olive)}
.tab[aria-selected="true"]{background:var(--olive);border:1.5px solid var(--olive);color:var(--cream);transform:rotate(-1.5deg)}
@media (max-width:760px){.tabs{justify-content:flex-start}}
.cat{position:relative;padding-block:clamp(70px,9vw,120px);overflow:hidden}
.cat:nth-of-type(even){background:var(--paper)}
.cat-head{text-align:center;position:relative;z-index:1}
.cat-head h2{font-size:clamp(60px,9vw,140px);color:var(--olive)}
.cat-head h2 em{color:var(--c,var(--rust))}
.cat-head .hand{display:block;margin-top:14px;color:var(--c,var(--rust))}
.shelf{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,260px));justify-content:center;gap:clamp(26px,3.4vw,48px);margin-top:clamp(40px,5vw,64px);position:relative;z-index:1}
.pcard{position:relative;display:block;text-decoration:none;color:var(--ink);background:#FFFDF8;padding:10px 10px 16px;box-shadow:0 2px 3px rgba(62,63,32,.12),0 18px 40px rgba(62,63,32,.16);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.pcard::before{content:"";position:absolute;top:-13px;left:50%;width:70px;height:22px;translate:-50% 0;background:rgba(233,209,175,.8);rotate:-4deg;z-index:2;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.shelf .pcard:nth-child(3n+1){transform:rotate(-2.5deg)}.shelf .pcard:nth-child(3n+2){transform:rotate(1.8deg) translateY(14px)}.shelf .pcard:nth-child(3n){transform:rotate(-1deg)}
.pcard:hover{transform:rotate(0) translateY(-6px) scale(1.02)!important;z-index:3}
.pcard .ph{aspect-ratio:1/1;overflow:hidden;position:relative;background:var(--g,var(--paper))}
.pcard .ph img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}
.pcard .ph img.v{filter:sepia(.2) saturate(.9) contrast(1.04)}
.pcard .ph .fb{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.92);font-family:var(--hand);font-weight:600;font-size:34px;text-align:center;padding:12px}
.pcard .nm{font-family:var(--hand);font-weight:600;font-size:28px;line-height:1;margin:14px 4px 0}
.pcard .pr{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:10px 4px 0}
.pcard .pr b{font-family:var(--display);font-weight:400;font-size:22px;color:var(--rust)}
.pcard .pr del{font-size:14px;color:var(--muted);opacity:.7;margin-right:6px}
.pcard .pr .go{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--olive);border-bottom:1px solid currentColor;white-space:nowrap}
.pcard .stamp{position:absolute;top:18px;right:14px;z-index:3;width:60px;height:60px;border-radius:50%;background:var(--ochre);color:var(--film);display:grid;place-items:center;text-align:center;transform:rotate(-12deg);font-family:var(--hand);font-weight:600;font-size:24px;line-height:.9;box-shadow:0 0 0 4px rgba(205,137,61,.25)}
.ar{font-family:"Noto Naskh Arabic","Geeza Pro",serif;font-size:.8em}

/* =====================================================================
   Mixed back in from the vintage version: film strip, photo cards,
   clean photo grid, client ticker
   ===================================================================== */
.say{font-family:var(--body);font-size:clamp(16px,1.35vw,19px);line-height:1.5;color:var(--ink);max-width:40ch;margin:18px auto 0;opacity:.85}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px;list-style:none;padding:0}
.chips li{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;border-radius:999px;background:rgba(251,246,240,.85);border:1px solid var(--line)}
.chips li::before{content:"✺ ";color:var(--ochre)}

.strip{background:var(--film);padding-block:22px;overflow:hidden;position:relative}
.strip::before,.strip::after{content:"";position:absolute;left:0;right:0;height:12px;z-index:2;background:repeating-linear-gradient(90deg,transparent 0 14px,rgba(251,246,240,.8) 14px 26px,transparent 26px 40px);opacity:.85}
.strip::before{top:5px}.strip::after{bottom:5px}
.strip .track{display:flex;gap:10px;width:max-content;animation:scroll 70s linear infinite}
.strip img{height:clamp(170px,19vw,250px);width:auto;aspect-ratio:3/4;object-fit:cover;border-radius:4px;filter:sepia(.3) saturate(.85) contrast(1.05)}
.strip:hover .track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}

.exp{background:var(--olive);color:var(--cream);padding-block:clamp(72px,9vw,128px)}
.exp .eyebrow{color:var(--sand)}
.exp h2{color:var(--cream);font-size:clamp(44px,6vw,86px)}
.exp h2 em{color:var(--sand)}
.cards{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:48px}
.card{position:relative;border-radius:10px;overflow:hidden;min-height:440px;display:flex;align-items:flex-end;text-decoration:none;color:var(--cream);grid-column:span 2;isolation:isolate}
.card.big{grid-column:span 3;min-height:540px}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:sepia(.3) saturate(.85) contrast(1.05) brightness(.95);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,18,8,0) 30%,rgba(20,18,8,.86) 100%)}
.card:hover img{transform:scale(1.05)}
.card .in{padding:clamp(20px,2.4vw,30px);width:100%}
.card .n{font-family:var(--display);font-size:clamp(40px,4vw,56px);line-height:1;color:var(--sand);display:flex;align-items:center;gap:14px}
.card .n::after{content:"";flex:1;height:1px;background:rgba(233,209,175,.55)}
.card h3{margin-top:10px;color:var(--cream);font-size:clamp(24px,2.3vw,32px);line-height:1.1}
.card .tag{font-family:var(--italic);font-style:italic;font-size:20px;color:var(--sand);margin-top:6px;line-height:1.25}
.card .go{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;border:1px solid rgba(233,209,175,.6);border-radius:999px;transition:background .25s ease,color .25s ease}
.card:hover .go{background:var(--sand);color:var(--film)}
@media (max-width:900px){.cards{grid-template-columns:1fr 1fr}.card,.card.big{grid-column:span 1;min-height:380px}.card.big:first-child{grid-column:1/-1}}
@media (max-width:520px){.cards{grid-template-columns:1fr}.card,.card.big,.card.big:first-child{grid-column:1/-1}}

.everyone{padding-block:clamp(72px,9vw,128px)}
.everyone .head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px}
.everyone h2{font-size:clamp(44px,6vw,86px);color:var(--olive)}
.everyone h2 em{color:var(--rust)}
.everyone .grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(160px,17vw,240px);gap:12px;margin-top:44px}
.everyone .grid figure{margin:0;position:relative;overflow:hidden;border-radius:8px}
.everyone .grid img{width:100%;height:100%;object-fit:cover;filter:sepia(.22) saturate(.9) contrast(1.05);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.everyone .grid figure:hover img{transform:scale(1.05)}
.everyone .grid figcaption{position:absolute;left:12px;bottom:12px;font-family:var(--hand);font-weight:600;font-size:22px;line-height:1;background:var(--cream);color:var(--ink);padding:6px 12px 4px;border-radius:999px}
.g1{grid-row:span 2}.g2{grid-column:span 2;grid-row:span 2}.g3{grid-row:span 2}.g4{grid-column:span 2}
@media (max-width:820px){.everyone .grid{grid-template-columns:1fr 1fr;grid-auto-rows:200px}.g2,.g4{grid-column:1/-1}.g1,.g3{grid-row:span 1}.g2{grid-row:span 2}}

.clients{background:var(--paper);overflow:hidden;padding-block:20px;border-block:1px solid var(--line)}
.clients .track{display:flex;width:max-content;animation:scroll 55s linear infinite}
.clients ul{display:flex;align-items:center;gap:34px;list-style:none;margin:0;padding:0 17px;font-family:var(--italic);font-style:italic;font-size:clamp(22px,2.4vw,30px);white-space:nowrap;color:var(--olive)}
.clients li+li::before{content:"✺";font-style:normal;color:var(--ochre);margin-right:34px;font-size:.7em;vertical-align:.12em}
@media (prefers-reduced-motion:reduce){.strip .track,.clients .track{animation:none}}

/* shop: cleaner product cards (less "sticker") */
.pcard::before{display:none}
.shelf .pcard:nth-child(3n+1),.shelf .pcard:nth-child(3n+2),.shelf .pcard:nth-child(3n){transform:none}
.pcard{border-radius:8px;padding:10px 10px 18px}
.pcard .ph{border-radius:4px}
.pcard:hover{transform:translateY(-6px)!important}

/* founder: big arched portrait in the opening */
.fhero{position:relative;overflow:hidden;padding:clamp(40px,5vw,72px) 0 clamp(70px,8vw,110px);touch-action:pan-y;cursor:crosshair}
.fhero .wrap{position:relative;z-index:3;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center;pointer-events:none}
.fhero .wrap > *{pointer-events:auto}
.fhero .ptitle{text-align:left;font-size:clamp(66px,10vw,156px)}
.fhero .ptitle em{margin-left:.4em}
.fhero .hand.big{margin-top:16px}
.fhero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.stage{position:relative;max-width:500px;width:100%;justify-self:center}
.stage .sunset{position:absolute;left:50%;bottom:-7%;width:130%;translate:-50% 0;z-index:0}
.stage .arch{position:relative;z-index:1;aspect-ratio:4/5;border-radius:999px 999px 14px 14px;overflow:hidden;border:12px solid var(--cream);box-shadow:0 0 0 1.5px var(--olive),0 30px 60px rgba(62,63,32,.18)}
.stage .arch img{width:100%;height:100%;object-fit:cover;object-position:32% 38%;filter:sepia(.25) contrast(1.05) saturate(.9)}
.stage .pin{position:absolute;z-index:2}
.stage .s1{width:34%;left:-20%;top:12%;transform:rotate(-8deg)}
.stage .s2{width:30%;right:-16%;bottom:16%;transform:rotate(7deg)}
@media (max-width:900px){.fhero .wrap{grid-template-columns:1fr}.fhero .ptitle{text-align:center}.fhero .hand.big,.fhero .ctas{justify-content:center;text-align:center}.stage{max-width:340px}.stage .s1{left:-12%}.stage .s2{right:-10%}}

.legal{background:#EBE7DF;color:var(--muted);padding-block:22px;text-align:center;font-family:var(--body);font-size:14px;letter-spacing:.01em}

/* ---------- story page additions ---------- */
.facts{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--line);max-width:560px}
.facts li{display:grid;grid-template-columns:112px 1fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.5;color:var(--ink)}
.facts b{font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--rust);padding-top:2px}
.facts a{text-decoration:underline;text-decoration-color:var(--ochre);text-underline-offset:3px}
.creds{display:flex;flex-wrap:wrap;gap:16px;margin-top:28px}
.cred{position:relative;background:#FFFDF8;padding:14px 16px 12px;min-width:150px;box-shadow:0 2px 3px rgba(62,63,32,.1),0 12px 26px rgba(62,63,32,.12);display:flex;flex-direction:column;gap:2px;
  background-image:repeating-linear-gradient(180deg,transparent 0 23px,rgba(62,63,32,.07) 23px 24px)}
.cred:nth-child(1){transform:rotate(-2deg)}.cred:nth-child(2){transform:rotate(1.5deg) translateY(6px)}.cred:nth-child(3){transform:rotate(-1deg)}
.cred::before{content:"";position:absolute;top:-10px;left:18px;width:54px;height:18px;background:rgba(233,209,175,.85);rotate:-5deg}
.cred .k{font-family:var(--hand);font-weight:700;font-size:20px;color:var(--ochre);line-height:1}
.cred b{font-family:var(--display);font-weight:400;font-size:24px;color:var(--olive);line-height:1.05}
.cred i{font-style:normal;font-family:var(--body);font-size:12.5px;color:var(--muted)}
.paintrow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,56px);margin-top:clamp(40px,6vw,80px);position:relative;z-index:1}
.paintrow .pin{position:relative!important;width:auto}
.paintrow .pin:nth-child(1){transform:rotate(-3deg)}.paintrow .pin:nth-child(2){transform:rotate(2deg) translateY(24px)}.paintrow .pin:nth-child(3){transform:rotate(-1.5deg)}
@media (max-width:760px){.paintrow{grid-template-columns:1fr;max-width:340px}}
.zen-what{margin-top:clamp(56px,7vw,96px);text-align:left;position:relative}
.zw-top{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,72px);align-items:end}
.zw-top h2{font-size:clamp(40px,5.4vw,76px);color:var(--olive)}
.zw-top h2 em{color:var(--rust)}
.zw-top p{font-size:17px;line-height:1.6;color:var(--muted);max-width:46ch}
@media (max-width:820px){.zw-top{grid-template-columns:1fr}}
.give{padding-block:clamp(80px,10vw,140px)}
.give h2{font-size:clamp(48px,7vw,100px);color:var(--olive)}
.give h2 em{color:var(--rust)}
.give .lead{font-size:18px;line-height:1.6;color:var(--muted);max-width:56ch;margin-top:18px}
.give-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:48px}
.give-grid .ph{aspect-ratio:4/5;border-radius:10px;overflow:hidden;box-shadow:0 18px 40px rgba(62,63,32,.16)}
.give-grid img{width:100%;height:100%;object-fit:cover}
.give-grid .where{display:block;margin-top:18px;font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ochre-ink,#9E5F1C)}
.give-grid h3{font-size:clamp(24px,2.2vw,30px);color:var(--ink);margin-top:8px}
.give-grid p{font-size:15.5px;line-height:1.6;color:var(--muted);margin-top:8px}
@media (max-width:820px){.give-grid{grid-template-columns:1fr;max-width:460px}}
.ways{display:flex;flex-direction:column;margin-top:26px;border-top:1px solid var(--line)}
.ways a{display:grid;grid-template-columns:44px 1fr;column-gap:14px;padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:padding .3s ease}
.ways a:hover{padding-left:10px}
.ways .hand{grid-row:span 2;font-size:30px;color:var(--ochre)}
.ways b{font-family:var(--display);font-weight:400;font-size:clamp(22px,2vw,28px);color:var(--olive)}
.ways i{font-style:normal;font-size:15px;color:var(--muted)}

/* =====================================================
   SHOP SUB-PAGES (My art · Candles & crystals · Digital)
   ===================================================== */
/* Film frame video */
.film{background:var(--film);color:var(--cream);padding-block:clamp(70px,9vw,120px);text-align:center;position:relative;overflow:hidden}
.film h2{color:var(--cream);font-size:clamp(46px,6.4vw,96px);margin-top:12px}
.film h2 em{color:var(--sand);display:block;font-size:.8em}
.reel{margin:clamp(34px,4vw,56px) auto 0;max-width:1040px}
.reel .frame{position:relative;background:#141409;padding:34px 16px;border-radius:4px;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.reel .frame::before,.reel .frame::after{content:"";position:absolute;left:10px;right:10px;height:14px;background:repeating-linear-gradient(90deg,transparent 0 10px,rgba(251,246,240,.82) 10px 26px,transparent 26px 36px);-webkit-mask:linear-gradient(#000,#000);border-radius:2px;opacity:.85}
.reel .frame::before{top:10px}.reel .frame::after{bottom:10px}
.reel video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#000;filter:sepia(.12) contrast(1.03)}
.reel .play{position:absolute;inset:34px 16px;display:grid;place-items:center;background:linear-gradient(rgba(31,31,18,.05),rgba(31,31,18,.35));border:0;cursor:pointer;transition:opacity .4s ease}
.reel .play span{width:92px;height:92px;border-radius:50%;background:var(--ochre);display:grid;place-items:center;box-shadow:0 0 0 10px rgba(205,137,61,.25);transition:transform .3s ease}
.reel .play span::before{content:"";margin-left:6px;border-left:26px solid var(--film);border-top:16px solid transparent;border-bottom:16px solid transparent}
.reel .play:hover span{transform:scale(1.07) rotate(-4deg)}
.reel.is-playing .play{opacity:0;pointer-events:none}
.reel.no-file .play span{display:none}
.reel.no-file .play::after{content:"film arriving soon";font-family:var(--hand);font-weight:700;font-size:clamp(30px,3.4vw,46px);color:var(--cream);transform:rotate(-3deg);text-shadow:0 2px 12px rgba(0,0,0,.5)}
.reel figcaption{margin-top:20px;color:var(--sand);font-size:clamp(26px,2.4vw,34px)}
/* portfolio: light variant */
.reel.light .frame{background:#FFFDF8;box-shadow:0 2px 3px rgba(62,63,32,.12),0 26px 60px rgba(62,63,32,.2)}
.reel.light .frame::before,.reel.light .frame::after{background:repeating-linear-gradient(90deg,transparent 0 10px,rgba(62,63,32,.25) 10px 26px,transparent 26px 36px)}
.reel.light figcaption{color:var(--rust)}

.cat-note{text-align:center;margin-top:clamp(40px,5vw,60px);font-family:var(--hand);font-weight:700;font-size:clamp(24px,2.2vw,30px);color:var(--olive);position:relative;z-index:1}
.cat-note a{color:var(--rust)}

/* Collaborate */
.collab{position:relative;overflow:hidden;background:var(--paper);padding-block:clamp(80px,10vw,140px)}
.collab-head{text-align:center;max-width:760px;margin-inline:auto;position:relative;z-index:1}
.collab h2{font-size:clamp(50px,7vw,110px);color:var(--olive);margin-top:14px}
.collab h2 em{color:var(--rust);display:block}
.collab .lede{font-size:clamp(17px,1.4vw,19px);line-height:1.65;color:var(--muted);margin:22px auto 0;max-width:52ch}
.ideas{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2vw,28px);margin-top:clamp(44px,6vw,70px);position:relative;z-index:1}
.idea{margin:0;background:#FFFDF8;padding:9px 9px 16px;box-shadow:0 2px 3px rgba(62,63,32,.12),0 16px 36px rgba(62,63,32,.15);transition:transform .4s ease}
.idea:nth-child(odd){transform:rotate(-2deg)}.idea:nth-child(even){transform:rotate(1.6deg) translateY(18px)}
.idea:hover{transform:rotate(0) translateY(-6px)}
.idea img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:sepia(.18) saturate(.9)}
.idea figcaption{padding:12px 4px 0}
.idea b{display:block;font-family:var(--hand);font-weight:700;font-size:25px;line-height:1;color:var(--ink)}
.idea span{display:block;font-size:14px;line-height:1.45;color:var(--muted);margin-top:6px}
.how{list-style:none;padding:0;margin:clamp(60px,7vw,90px) auto 0;max-width:980px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1.5px solid var(--olive);position:relative;z-index:1}
.how li{padding:20px 18px 0 0;display:grid;grid-template-columns:44px 1fr;column-gap:10px}
.how .hand{grid-row:span 2;font-size:32px;color:var(--ochre)}
.how b{font-family:var(--display);font-weight:400;font-size:clamp(22px,2vw,28px);color:var(--olive);line-height:1.1}
.how i{font-style:normal;font-size:15px;color:var(--muted);margin-top:4px}
.write{text-align:center;margin-top:clamp(50px,6vw,80px);position:relative;z-index:1}
.write .hand{display:block;font-size:clamp(28px,2.6vw,36px);color:var(--rust);transform:rotate(-2deg)}
.write .mail{display:inline-block;margin-top:10px;font-family:var(--display);font-size:clamp(30px,4.6vw,66px);color:var(--olive);text-decoration:none;background:linear-gradient(transparent 70%,rgba(205,137,61,.35) 70%,rgba(205,137,61,.35) 92%,transparent 92%);word-break:break-all}
.write .mail:hover{color:var(--rust)}

/* Coming soon */
.pcard .stamp.soon{background:var(--olive);color:var(--cream);font-size:22px;box-shadow:0 0 0 4px rgba(62,63,32,.2)}
.pcard.is-soon .pr .go{color:var(--muted)}
.soon-row{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px;margin-top:28px}
.soon-stamp{display:inline-block;font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--rust);border:2px solid var(--rust);padding:9px 16px 8px;transform:rotate(-3deg);border-radius:3px;box-shadow:inset 0 0 0 2px rgba(109,55,47,.15);background:rgba(251,246,240,.6)}
.notify{font-family:var(--hand);font-weight:700;font-size:clamp(22px,2vw,27px);color:var(--c,var(--rust));text-decoration:none;border-bottom:1.5px dashed currentColor}
.more-link{display:inline-block;margin-top:18px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--olive);text-decoration:none;border-bottom:1px solid currentColor}
.chap.dark .soon-stamp{color:var(--sand);border-color:var(--sand);background:transparent}
.chap.dark .notify,.chap.dark .more-link{color:var(--sand)}
.dp .inside-list{list-style:none;margin:22px 0 0;padding:0;max-width:44ch;border-top:1px solid var(--line)}
.dp .inside-list li{display:grid;grid-template-columns:30px 1fr;gap:8px;padding:10px 0;border-bottom:1px solid var(--line);font-size:16px;color:var(--ink)}
.dp .inside-list li::before{content:"✓";font-family:var(--hand);font-weight:700;font-size:22px;line-height:1;color:var(--ochre)}
.chap.dark .inside-list li{color:var(--cream);border-color:rgba(233,209,175,.25)}
.chap.dark .inside-list{border-color:rgba(233,209,175,.25)}
.dp .pins{min-height:clamp(360px,36vw,500px)}
.dp .pins .a{width:60%;left:0;top:2%;transform:rotate(-4deg)}
.dp .pins .b{width:48%;right:0;top:26%;transform:rotate(5deg)}

.steps3{padding-block:clamp(50px,6vw,80px) 0}
.steps3 ol{list-style:none;padding:0;margin:0 auto;max-width:1040px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1.5px solid var(--olive)}
.steps3 li{padding:20px 18px 0 0;display:grid;grid-template-columns:44px 1fr;column-gap:10px}
.steps3 .hand{grid-row:span 2;font-size:32px;color:var(--ochre)}
.steps3 b{font-family:var(--display);font-weight:400;font-size:clamp(22px,2vw,28px);color:var(--olive);line-height:1.1}
.steps3 i{font-style:normal;font-size:15px;color:var(--muted);margin-top:4px}

.buy{background:var(--film);color:var(--cream);padding-block:clamp(90px,11vw,150px);text-align:center;position:relative;overflow:hidden}
.buy > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:sepia(.35) saturate(.8) brightness(.45)}
.buy .in{position:relative;z-index:1}
.buy h2{font-size:clamp(48px,7vw,110px);color:var(--cream)}
.buy h2 em{color:var(--sand)}
.buy .hand{color:var(--sand);font-size:30px;display:block;margin-top:16px}
.soon-line{margin-top:22px;font-size:17px;color:rgba(251,246,240,.85)}
.soon-line a{color:var(--sand)}

/* Big doors from the portfolio (three ways) */
.cat-head .seeall{display:inline-block;margin-top:16px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--olive);text-decoration:none;border-bottom:1px solid currentColor}
.cat-head .seeall:hover{color:var(--rust)}

@media (max-width:1000px){.ideas{grid-template-columns:repeat(3,1fr)}.idea:nth-child(n){transform:none}}
@media (max-width:760px){
  .ideas{grid-template-columns:repeat(2,1fr);gap:18px}
  .how,.steps3 ol{grid-template-columns:1fr}
  .how li,.steps3 li{padding-bottom:14px;border-bottom:1px solid var(--line)}
  .reel .frame{padding:22px 8px}.reel .play{inset:22px 8px}
  .reel .frame::before,.reel .frame::after{height:9px;top:7px}.reel .frame::after{top:auto;bottom:7px}
  .reel .play span{width:68px;height:68px}
  .dp .pins{min-height:100vw}
}
.pfilm{padding-block:clamp(20px,3vw,40px) clamp(70px,9vw,120px);background:var(--cream)}
.pfilm .reel{margin-top:14px}
.reel.light.no-file .play::after{color:var(--olive);text-shadow:0 1px 10px rgba(251,246,240,.8)}
/* YouTube film frames */
.reel .poster{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;filter:sepia(.12) contrast(1.03)}
.reel iframe{display:block;width:100%;aspect-ratio:16/9;border:0;background:#000}
.reel .yt-link{display:inline-block;margin-top:8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:inherit;opacity:.75}
.film .reel .yt-link{color:var(--sand)}
.reels2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,44px);align-items:start}
.reels2 .reel{margin-top:14px}
.reels2 .reel figcaption{font-size:clamp(22px,2vw,28px)}
.pfilm h2{font-size:clamp(46px,6vw,90px);color:var(--olive);text-align:center;margin-top:6px}
.pfilm h2 em{color:var(--rust)}
.pfilm .snaps{display:flex;justify-content:center;gap:clamp(16px,3vw,40px);margin-top:clamp(40px,5vw,70px);flex-wrap:wrap}
.pfilm .snaps figure{margin:0;width:clamp(150px,22vw,260px);background:#FFFDF8;padding:9px 9px 40px;box-shadow:0 2px 3px rgba(62,63,32,.12),0 18px 40px rgba(62,63,32,.16);position:relative}
.pfilm .snaps figure:nth-child(1){transform:rotate(-3deg)}.pfilm .snaps figure:nth-child(2){transform:rotate(2deg) translateY(16px)}.pfilm .snaps figure:nth-child(3){transform:rotate(-1deg)}
.pfilm .snaps img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:sepia(.15)}
.pfilm .snaps figcaption{position:absolute;left:12px;bottom:8px;font-family:var(--hand);font-weight:700;font-size:22px;color:var(--ink)}
@media (max-width:760px){.reels2{grid-template-columns:1fr}}