/* Layout: editorial scrapbook on near-black. Full-width text bands separated by hairlines,
   with paper collages (polaroids, tape, clips, folder, envelope) carrying the photos. */
:root{
  --bg:#111111;
  --fg:#F3F1EC;
  --sub:#B9B6AF;
  --line:rgba(243,241,236,.16);
  --paper:#F4F2EC;
  --paper-ink:#1B1B1B;
  --kraft:#C9965F;
  --blue:#C9D9F2;
  --pink:#F0C9D2;
  --sage:#CBDDB8;
  --stone:#D9D2C4;
  --serif:"Noto Serif Hebrew","David Libre","Times New Roman",serif;
  --sans:"Heebo","Arial Hebrew",Arial,sans-serif;
  --gutter:clamp(16px,1.6vw,28px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:clamp(15px,.3vw + 13px,19px);line-height:1.5;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.wrap{direction:rtl;text-align:right;overflow-x:clip}
.pad{padding-inline:var(--gutter)}
.serif{font-family:var(--serif);font-stretch:62.5%;font-weight:400;letter-spacing:-.005em}
.accent{font-family:var(--serif);font-stretch:62.5%;font-weight:300;letter-spacing:0}
.label{font-size:clamp(12px,.25vw + 11px,15px);letter-spacing:.06em;font-weight:400}
.ulink{font-size:clamp(14px,.3vw + 12px,17px);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
hr.rule{border:0;border-top:1px solid var(--line);margin:0 var(--gutter)}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}

/* ---- paper props ---- */
.polaroid{background:var(--paper);padding:clamp(6px,.7vw,12px) clamp(6px,.7vw,12px) clamp(22px,2.6vw,44px);box-shadow:0 18px 40px -14px rgba(0,0,0,.75),0 2px 4px rgba(0,0,0,.4);position:relative}
.polaroid .ph{aspect-ratio:1/1}
.ph{position:relative;overflow:hidden;background:linear-gradient(160deg,#4d4a45,#22201d)}
.ph img{width:100%;height:100%;object-fit:cover}
.ph.noimg img{display:none}
.ph.noimg::after{content:attr(data-alt);position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:8%;
  font-family:var(--serif);font-stretch:62.5%;font-size:clamp(13px,1.2vw,20px);color:#E9E4DA;
  background:radial-gradient(90% 70% at 30% 25%,rgba(255,255,255,.14),transparent 60%),repeating-linear-gradient(118deg,rgba(255,255,255,.03) 0 2px,transparent 2px 7px)}
.tape{position:absolute;width:clamp(60px,7vw,120px);height:clamp(20px,2vw,32px);background:rgba(232,228,214,.55);
  box-shadow:0 1px 2px rgba(0,0,0,.2);z-index:3}
.tape.blue{background:rgba(120,160,230,.8)}
.tape.dark{background:rgba(90,90,90,.6)}
.stamp{padding:9px;background:radial-gradient(circle,transparent 4px,var(--paper) 4.6px) -7px -7px/14px 14px;filter:drop-shadow(0 10px 18px rgba(0,0,0,.55))}
.stamp .inner{display:block;background:var(--paper);padding:6px}
.torn{background:var(--paper);color:var(--paper-ink)}
.pin{position:absolute;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd1e0,#d86b93 55%,#8e3557);box-shadow:3px 8px 10px rgba(0,0,0,.45);z-index:4}
.clip{position:absolute;width:22px;height:70px;border:3px solid #b7b7b7;border-radius:12px;z-index:4;box-shadow:1px 2px 3px rgba(0,0,0,.3)}
.clip::after{content:"";position:absolute;inset:8px 3px 12px;border:3px solid #b7b7b7;border-radius:8px;border-top:0}
.binder{position:absolute;z-index:4;width:84px;height:60px}
.seal{width:clamp(48px,5vw,80px);aspect-ratio:1;border-radius:46% 54% 50% 50%/52% 46% 54% 48%;background:radial-gradient(circle at 40% 35%,#f2cf6d,#c79528 55%,#8f6516);
  box-shadow:inset 0 0 0 6px rgba(0,0,0,.08),inset 0 0 0 12px rgba(255,255,255,.08),0 8px 14px rgba(0,0,0,.5);display:grid;place-items:center;
  font-family:var(--serif);font-weight:700;color:rgba(80,50,8,.75);font-size:clamp(18px,2vw,30px)}
.pebble{width:clamp(40px,4vw,70px);aspect-ratio:1.35;border-radius:50% 46% 52% 48%/58% 52% 48% 42%;background:radial-gradient(circle at 35% 30%,#e9e4da,#9c958a 60%,#6f695f);box-shadow:0 10px 14px rgba(0,0,0,.55)}
.dashloop{position:absolute;pointer-events:none;color:var(--fg)}
[data-drift]{will-change:transform}

/* ---- NAV ---- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:linear-gradient(var(--bg) 70%,rgba(17,17,17,0))}
.nav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding-block:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;line-height:1.15;font-size:clamp(12px,.25vw + 11px,15px);letter-spacing:.04em}
.brand .ph{width:42px;height:42px;flex:none}
.nav ul{display:flex;gap:clamp(18px,2.2vw,36px);list-style:none;margin:0;padding:0}
.nav ul a,.nav .cta{text-decoration:none;font-size:clamp(13px,.3vw + 12px,16px);letter-spacing:.04em}
.nav ul a:hover,.nav .cta:hover{text-decoration:underline;text-underline-offset:4px}
.nav .cta{justify-self:end}
@media (max-width:760px){.nav ul{display:none}.nav-in{grid-template-columns:1fr auto}}

/* ---- HERO ---- */
.hero{padding-block:clamp(20px,3vw,50px) clamp(70px,9vw,140px);text-align:center}
.hero-collage{position:relative;width:min(560px,86vw);aspect-ratio:1.45;margin:0 auto}
.hero-collage > *{position:absolute}
.h-note{inset:2% 44% 8% 13%;transform:rotate(-4deg);background:var(--paper);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.h-note::before{content:"";position:absolute;inset:4% auto 4% 5%;width:5%;background:repeating-linear-gradient(to bottom,#111 0 9px,transparent 9px 24px)}
.h-stone{inset:22% 25% 10% 1%;background:var(--stone);transform:rotate(-8deg)}
.h-cert{inset:0 0 18% 52%;background:#EADCC0;transform:rotate(3deg);display:grid;place-items:center}
.h-cert .ring{width:62%;aspect-ratio:1;border-radius:50%;border:2px solid #7a6c52;display:grid;place-items:center;text-align:center;color:#5d513c;
  font-family:var(--serif);font-stretch:62.5%;line-height:1.05;font-size:clamp(11px,1.5vw,19px);transform:rotate(-12deg);padding:8%}
.h-cert .ring b{display:block;font-size:1.45em;font-weight:600}
.h-cert .lines{position:absolute;right:6%;bottom:10%;padding:2px 6px;border:1.5px solid #c46a4a;color:#c46a4a;font-size:clamp(8px,.85vw,12px);transform:rotate(-6deg);letter-spacing:.06em}
.h-photo{inset:9% 25% 11% 30%;transform:rotate(1deg);padding:clamp(8px,1.2vw,16px);background:var(--paper);box-shadow:0 14px 30px rgba(0,0,0,.45)}
.h-photo .ph{height:100%}
.h-photo .pin{top:-4%;left:-3%}
.h-tape{left:8%;bottom:6%;transform:rotate(-34deg)}
.hero .kicker{font-size:clamp(22px,2.6vw,40px);margin-top:clamp(26px,3vw,46px)}
.hero h1{font-size:clamp(54px,7.4vw,140px);line-height:.95;margin-top:4px;letter-spacing:-.01em}
.hero .ulink{display:inline-block;margin-top:clamp(16px,1.6vw,26px)}

/* ---- WHO ---- */
.who{padding-block:clamp(30px,3vw,46px) clamp(70px,8vw,130px)}
.big-statement{font-size:clamp(28px,3.75vw,74px);line-height:1.08;letter-spacing:-.02em;font-weight:400;margin:clamp(18px,2vw,30px) 0 0;position:relative}
.big-statement .accent{font-size:1.06em}
.oval{position:relative;display:inline-block;padding-inline:.18em}
.oval::after{content:"";position:absolute;inset:-.06em -.1em;border:2px dashed currentColor;border-radius:50%;opacity:.9}
.who .tape{top:.9em;right:16%;transform:rotate(-12deg)}
.who .stamp{position:absolute;width:clamp(90px,10vw,170px);left:10%;top:40%;transform:rotate(6deg)}
.who .stamp .ph{aspect-ratio:4/5}
.values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2vw,32px)}
.values p{margin:0;font-size:clamp(14px,.3vw + 12px,17px)}
.values b{font-weight:700}
@media (max-width:900px){.values{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.values{grid-template-columns:1fr}.who .stamp{display:none}}

/* ---- FOLDER ---- */
.folder-sec{padding-block:clamp(50px,6vw,100px) clamp(80px,9vw,150px)}
.folder{position:relative;width:min(1020px,100%);margin:0 auto;aspect-ratio:1.52;background:var(--kraft);border-radius:18px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.8);background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:5px 5px}
.folder::before{content:"";position:absolute;top:-4.5%;left:6%;width:32%;height:8%;background:var(--kraft);border-radius:14px 14px 0 0}
.folder::after{content:"";position:absolute;inset:3% 50.5% 3% 49.5%;background:rgba(0,0,0,.12)}
.folder > *{position:absolute}
.f-card{inset:5% 52% 13% 4%;background:var(--blue);color:var(--paper-ink);padding:clamp(16px,3%,40px);box-shadow:0 8px 20px rgba(0,0,0,.25);z-index:2;display:flex;flex-direction:column;gap:clamp(8px,1.4vw,18px)}
.f-card h2{font-size:clamp(28px,4.4vw,74px);line-height:.95}
.f-card p{margin:0;font-size:clamp(11px,1.05vw,16px)}
.f-card .clip{top:-3%;left:6%}
.f-side{top:3%;left:1.6%;width:3.2%;height:40%;background:var(--pink);color:var(--paper-ink);writing-mode:vertical-rl;display:grid;place-items:center;font-size:clamp(9px,.9vw,13px);letter-spacing:.08em}
.f-id{top:3%;right:6%;width:33%;background:var(--paper);color:var(--paper-ink);padding:2.2%;transform:rotate(-3deg);box-shadow:0 8px 18px rgba(0,0,0,.35);display:grid;grid-template-columns:34% 1fr;gap:5%;z-index:2}
.f-id .ttl{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.f-id .ttl b{font-family:var(--serif);font-stretch:62.5%;font-weight:500;font-size:clamp(13px,1.7vw,24px)}
.f-id .ttl span{font-size:clamp(7px,.6vw,9px);letter-spacing:.06em}
.f-id .ph{aspect-ratio:4/5}
.f-id dl{margin:0;display:grid;gap:3px;font-size:clamp(7px,.75vw,11px)}
.f-id dt{opacity:.6}
.f-id dd{margin:0;border-bottom:1px solid #999;font-family:var(--serif);font-weight:500}
.f-id .bar{grid-column:1/-1;height:clamp(10px,1.4vw,18px);background:repeating-linear-gradient(90deg,#111 0 2px,transparent 2px 4px,#111 4px 5px,transparent 5px 8px)}
.f-pol1{top:36%;right:5%;width:17%;transform:rotate(5deg);z-index:3}
.f-pol2{top:39%;right:24%;width:16%;transform:rotate(-6deg);z-index:2}
.f-receipt{top:28%;right:40%;width:11%;height:40%;background:#fbfaf5;color:#222;transform:rotate(4deg);padding:1%;font-size:clamp(6px,.65vw,10px);line-height:1.35;box-shadow:0 6px 14px rgba(0,0,0,.3)}
.f-receipt b{display:block;font-size:1.3em;margin-bottom:4px}
.f-receipt .tot{border-top:1px dashed #555;margin-top:6px;padding-top:4px;font-weight:700}
.f-ticket{bottom:9%;right:4%;width:30%;background:#F1ECE1;color:#222;padding:1.6%;transform:rotate(-2deg);box-shadow:0 8px 16px rgba(0,0,0,.35);display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:clamp(7px,.75vw,11px);z-index:3}
.f-ticket b{grid-column:1/-1;font-size:1.5em;letter-spacing:.06em}
.f-ticket .big{font-size:1.7em;font-weight:700;border:1px solid #333;padding:0 6px;grid-row:span 3;align-self:center}
.f-tag{bottom:18%;right:35%;width:9%;aspect-ratio:.6;background:#B8D3C4;border-radius:8px;transform:rotate(8deg);box-shadow:0 6px 12px rgba(0,0,0,.3);display:grid;place-items:center;color:#1f3a2f;font-family:var(--serif);font-weight:600;font-size:clamp(10px,1.3vw,18px);text-align:center;z-index:2}
.f-tag::before{content:"";position:absolute;top:8%;left:42%;width:16%;aspect-ratio:1;border-radius:50%;background:var(--kraft)}
.f-stamp1{top:6%;right:41%;width:7%;transform:rotate(8deg);z-index:1}
.f-stamp1 .inner{aspect-ratio:.8;background:#5d7f6e;display:grid;place-items:center;color:#f1ead8;font-family:var(--serif);font-size:clamp(9px,1vw,15px)}
.f-trust{bottom:-6%;left:3%;width:27%;background:#F6F2E7;color:var(--paper-ink);padding:2.2%;transform:rotate(-5deg);box-shadow:0 10px 24px rgba(0,0,0,.45);z-index:4}
.f-trust small{display:block;font-size:clamp(8px,.75vw,12px);letter-spacing:.06em;margin-bottom:6px}
.f-trust p{margin:0;font-family:var(--serif);font-stretch:62.5%;font-size:clamp(14px,1.75vw,28px);line-height:1.05}
@media (max-width:700px){
  .folder{aspect-ratio:auto;padding:22px 16px;display:grid;gap:18px;border-radius:14px}
  .folder::after{display:none}
  .folder > *{position:relative;inset:auto!important;width:auto!important;height:auto!important}
  .f-side,.f-stamp1,.f-tag,.f-receipt,.f-pol2{display:none}
  .f-card{padding:22px;order:-1}.f-card p{font-size:14px}
  .f-id dl,.f-ticket{font-size:11px}.f-id .ttl b{font-size:18px}
  .f-pol1{width:62%!important;justify-self:center}
  .f-trust p{font-size:22px}.f-trust small{font-size:11px}
}

/* ---- SERVICES ---- */
.services{padding-block:clamp(60px,7vw,110px) clamp(70px,8vw,130px)}
.svc-title{position:relative;text-align:center;padding-block:clamp(10px,2vw,30px) clamp(30px,4vw,60px)}
.svc-title h2{font-size:clamp(64px,13vw,250px);line-height:.9;position:relative;z-index:1}
.svc-title .polaroid{position:absolute;width:clamp(80px,10.5vw,190px)}
.svc-title .p1{right:6%;top:0;transform:rotate(-10deg)}
.svc-title .p2{left:5%;top:28%;transform:rotate(7deg)}
.svc-list{display:grid;gap:clamp(12px,1.4vw,20px)}
.svc{position:relative;border:1px solid var(--line);border-radius:12px;padding:clamp(20px,2.4vw,36px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,70px);align-items:start}
.svc .txt{min-width:0;display:flex;flex-direction:column;gap:clamp(12px,1.4vw,20px)}
.svc h3{font-size:clamp(34px,3.6vw,64px);line-height:1}
.svc p{margin:0;max-width:46ch}
.svc .num{font-family:var(--serif);font-stretch:62.5%;font-size:clamp(34px,3.6vw,64px);line-height:1;text-align:left}
.svc .side{display:flex;flex-direction:column;gap:clamp(14px,2vw,30px)}
.svc .side .ph{aspect-ratio:16/10;border-radius:6px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills span{font-family:var(--serif);font-stretch:62.5%;font-size:clamp(16px,1.3vw,22px);border:1px solid var(--fg);border-radius:4px;padding:.12em .55em}
@media (max-width:800px){.svc{grid-template-columns:1fr}.svc .side{order:-1;gap:12px}.svc .num{font-size:36px}}
@media (max-width:700px){.svc-title{padding-top:110px}.svc-title .polaroid{width:96px}.svc-title .p1{top:0;right:4%}.svc-title .p2{top:6px;left:6%}}

/* ---- EXPERIENCE ---- */
.exp{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,110px);align-items:center;padding-block:clamp(60px,7vw,120px)}
.exp-art{position:relative;width:min(420px,80%);margin-inline:auto;padding-top:40px}
.exp-art .sage{position:absolute;inset:16% -16% 10% 20%;background:var(--sage)}
.exp-art .note{position:relative;padding:clamp(30px,3vw,46px) clamp(20px,2.6vw,40px) clamp(34px,3.6vw,56px);text-align:center;box-shadow:0 16px 30px rgba(0,0,0,.5)}
.exp-art .note h3{font-size:clamp(28px,2.4vw,42px);margin-bottom:10px}
.exp-art .note p{margin:0;font-size:clamp(13px,1vw,16px);line-height:1.45}
.exp-art .binder{top:0;left:50%;transform:translateX(-50%)}
.exp-art .pebble{position:absolute;left:-8%;bottom:6%}
.exp-art .seal{position:absolute;right:-10%;top:24%}
.exp-copy h2{font-size:clamp(44px,5vw,96px);line-height:.95}
.exp-copy p{max-width:48ch;margin:clamp(20px,2.4vw,36px) 0 clamp(14px,1.4vw,20px)}
.exp-copy .wrapdash{position:relative;display:inline-block}
.exp-copy .dashloop{width:clamp(130px,14vw,220px);top:10px;left:-180%}
@media (max-width:860px){.exp{grid-template-columns:1fr}.exp-copy .dashloop{display:none}}

/* ---- WORK ---- */
.work{padding-block:clamp(36px,3.5vw,56px) clamp(70px,8vw,120px)}
.sticky-note{position:absolute;background:var(--pink);color:var(--paper-ink);font-family:var(--sans);font-size:clamp(11px,.85vw,15px);letter-spacing:.04em;line-height:1.35;padding:.5em .8em;top:.85em;right:22%;transform:rotate(-1deg);box-shadow:0 4px 10px rgba(0,0,0,.4);max-width:22em}
.work-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-top:clamp(50px,6vw,90px);flex-wrap:wrap}
.work-head p{max-width:30ch;margin:10px 0 0;font-size:clamp(14px,.3vw + 12px,17px)}
.work-nav{display:flex;gap:16px}
.work-nav button{background:none;border:0;color:var(--fg);font:inherit;font-size:clamp(14px,.3vw + 12px,17px);text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:0}
.work-nav button:disabled{opacity:.4;cursor:default}
.slider{margin-top:clamp(36px,4vw,60px);display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * clamp(24px,8vw,128px)) / 4);gap:clamp(24px,8vw,128px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth}
.slider::-webkit-scrollbar{display:none}
.wk{scroll-snap-align:start;min-width:0}
.wk .ph{aspect-ratio:9/15;border-radius:8px}
.wk h3{font-size:clamp(24px,2vw,36px);margin-top:12px;line-height:1.05}
.wk .cat{font-size:clamp(13px,.25vw + 12px,16px);margin:4px 0 0;color:var(--sub)}
.wk .role{border-top:1px solid var(--line);margin-top:14px;padding-top:12px;font-size:clamp(12px,.25vw + 11px,15px);letter-spacing:.05em}
@media (max-width:900px){.slider{grid-auto-columns:44%;gap:24px}}
@media (max-width:520px){.slider{grid-auto-columns:72%}.sticky-note{right:auto;left:0;top:-1.4em}}

/* ---- FIELD (polaroid scatter) ---- */
.field{display:grid;grid-template-columns:1fr 2.4fr;gap:30px;padding-block:clamp(20px,3vw,40px) clamp(80px,9vw,150px)}
.field p{max-width:30ch;margin:10px 0 0;font-size:clamp(14px,.3vw + 12px,17px)}
.scatter{position:relative;height:clamp(260px,26vw,480px)}
.scatter .polaroid{position:absolute;width:clamp(130px,17vw,300px)}
.scatter .s1{right:4%;top:14%;transform:rotate(-2deg)}
.scatter .s2{right:35%;top:18%;transform:rotate(-5deg);z-index:2}
.scatter .s3{right:62%;top:0;transform:rotate(4deg)}
.scatter .s2 .tape{top:-12px;left:40%;transform:rotate(30deg)}
.scatter .pebble{position:absolute;right:66%;bottom:-2%;z-index:3}
@media (max-width:760px){.field{grid-template-columns:1fr}.scatter{height:clamp(240px,70vw,380px)}.scatter .polaroid{width:42%}.scatter .s3{right:56%}.scatter .s2{right:28%;top:34%}}

/* ---- PROCESS + ENVELOPE ---- */
.process{text-align:center;padding-block:clamp(36px,3.5vw,56px) clamp(70px,8vw,120px)}
.process .big-statement{max-width:24ch;margin-inline:auto}
.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,40px);max-width:880px;margin:clamp(36px,4vw,60px) auto 0;text-align:right;position:relative;font-size:clamp(14px,.3vw + 12px,17px)}
.two-col p{margin:0}
.two-col b{font-weight:700}
.two-col .dashloop{width:clamp(120px,13vw,210px);right:-26%;top:-10px}
.steps{list-style:none;padding:0;margin:0;display:grid;gap:6px}
@media (max-width:760px){.two-col{grid-template-columns:1fr}.two-col .dashloop{display:none}}
.envelope{position:relative;width:min(800px,100%);margin:clamp(110px,12vw,190px) auto 0;aspect-ratio:1.45}
.env-back{position:absolute;inset:0;background:#E2E0DA;border-radius:14px}
.env-front{position:absolute;inset:0;z-index:5;border-radius:14px;overflow:hidden;pointer-events:none}
.env-front::before{content:"";position:absolute;inset:0;background:#F5F4F0;clip-path:polygon(0 22%,50% 58%,100% 22%,100% 100%,0 100%);box-shadow:0 -1px 0 rgba(0,0,0,.05)}
.env-front::after{content:"";position:absolute;inset:0;background:#EEEDE8;clip-path:polygon(0 100%,50% 58%,100% 100%)}
.env-text{position:absolute;inset:auto 0 8% 0;z-index:6;text-align:center;color:var(--paper-ink)}
.env-text .accent,.env-text .serif{font-size:clamp(32px,5.4vw,88px);line-height:.98;display:block}
.env-text small{display:block;font-family:var(--sans);font-size:clamp(11px,1vw,16px);margin-top:10px;letter-spacing:.04em}
.env-items > *{position:absolute;z-index:3;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.env-items .polaroid{width:24%}
.env-items .e1{left:6%;top:-8%;transform:rotate(-8deg)}
.env-items .e2{left:28%;top:-20%;transform:rotate(3deg);width:30%}
.env-items .e3{left:52%;top:-13%;transform:rotate(-4deg)}
.env-items .e4{right:5%;top:-8%;transform:rotate(7deg)}
.env-items .price-card{left:14%;top:-15%;width:34%;background:var(--sage);color:var(--paper-ink);padding:2.4%;transform:rotate(-6deg);box-shadow:0 8px 18px rgba(0,0,0,.3);z-index:4}
.price-card small{display:block;font-size:clamp(8px,.8vw,12px);letter-spacing:.06em}
.price-card p{margin:6px 0 0;font-family:var(--serif);font-stretch:62.5%;font-size:clamp(13px,1.9vw,30px);line-height:1.08}
.env-items .ribbon{right:23%;top:-26%;width:6.5%;height:46%;background:#9DB4EA;color:var(--paper-ink);writing-mode:vertical-rl;display:flex;align-items:center;justify-content:space-between;padding:6% 0;font-family:var(--serif);font-stretch:62.5%;font-size:clamp(12px,1.7vw,26px);transform:rotate(12deg);z-index:4}
.env-items .ribbon small{font-family:var(--sans);font-size:.45em;letter-spacing:.1em}
.env-items .clip{left:18%;top:16%;z-index:6;transform:rotate(-8deg)}
.envelope.open .e2{transform:translateY(-14%) rotate(3deg)}
.envelope.open .e1{transform:translate(-6%,-8%) rotate(-12deg)}
.envelope.open .e4{transform:translate(6%,-8%) rotate(11deg)}
.envelope.open .price-card{transform:translateY(-12%) rotate(-8deg)}

/* ---- CONTACT ---- */
.shout{text-align:center;padding-block:clamp(50px,6vw,100px)}
.shout h2{font-size:clamp(52px,11.6vw,230px);line-height:.9;white-space:nowrap}
.contact{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,4vw,70px);padding-block:clamp(30px,3vw,50px) clamp(60px,7vw,110px)}
.contact h2{line-height:.95}
.contact h2 .accent,.contact h2 .serif{display:block;font-size:clamp(44px,4.6vw,88px)}
.c-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,50px);margin-top:clamp(30px,3.4vw,50px);font-size:clamp(14px,.3vw + 12px,17px)}
.c-cols p{margin:0}
.c-cols .steps{gap:2px}
form{margin-top:clamp(40px,5vw,70px);max-width:420px;display:grid;gap:clamp(18px,2vw,28px)}
.field-in label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.field-in input,.field-in textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--sub);color:var(--fg);font:inherit;font-size:clamp(14px,.3vw + 12px,17px);padding:6px 0;resize:none;border-radius:0}
.field-in input::placeholder,.field-in textarea::placeholder{color:var(--sub)}
.field-in input:focus,.field-in textarea:focus{outline:none;border-color:var(--fg)}
form button{justify-self:start;background:none;border:0;color:var(--fg);font:inherit;font-size:clamp(14px,.3vw + 12px,17px);text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:0;letter-spacing:.04em}
.form-msg{font-size:14px;color:var(--sub);min-height:1.4em;margin:0}
.c-art{position:relative;min-height:clamp(380px,38vw,640px)}
.c-art > *{position:absolute}
.c-main{width:50%;left:8%;top:18%;transform:rotate(-3deg);padding:clamp(8px,1vw,16px);background:var(--paper);box-shadow:0 20px 40px rgba(0,0,0,.6);z-index:2}
.c-main .ph{aspect-ratio:3/4}
.c-a{width:24%;left:54%;top:12%;transform:rotate(5deg);padding:clamp(5px,.6vw,10px);background:var(--paper);z-index:1}
.c-b{width:26%;left:44%;top:4%;transform:rotate(-9deg);z-index:3}
.c-b .ph,.c-a .ph{aspect-ratio:4/5}
.c-c{width:26%;left:60%;bottom:6%;transform:rotate(-6deg);z-index:3}
.c-c .ph{aspect-ratio:1}
.c-art .seal{left:56%;bottom:30%;z-index:4}
.c-art .spin{left:10%;top:3%;width:46%;z-index:5;transform:rotate(-18deg)}
@media (max-width:860px){.contact{grid-template-columns:1fr}.c-art{min-height:clamp(360px,95vw,560px)}}
@media (max-width:480px){.c-cols{grid-template-columns:1fr}}

footer{padding-block:clamp(20px,3vw,40px) clamp(30px,3vw,50px)}
.f-pills{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.f-pills a,.f-pills span{font-family:var(--serif);font-stretch:62.5%;font-size:clamp(17px,1.4vw,24px);border:1px solid var(--fg);border-radius:5px;padding:.1em .5em;text-decoration:none}
.f-pills a:hover{background:var(--fg);color:var(--bg)}
.f-row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(30px,3vw,50px);font-size:clamp(13px,.25vw + 12px,16px)}
.num{direction:ltr;unicode-bidi:isolate;white-space:nowrap}

/* ---- icons ---- */
.ic{width:1.05em;height:1.05em;flex:none;vertical-align:-.16em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ic .solid{fill:currentColor;stroke:none}
.ulink,.nav .cta,form button,.work-nav button,.f-pills a,.c-actions a{display:inline-flex;align-items:center;gap:.45em}
.values .ic{display:block;width:30px;height:30px;stroke-width:1.4;margin-bottom:12px;color:var(--sage)}
.c-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(22px,2.4vw,34px)}
.c-actions a{font-family:var(--serif);font-stretch:62.5%;font-size:clamp(17px,1.4vw,24px);border:1px solid var(--fg);border-radius:5px;padding:.14em .6em;text-decoration:none}
.c-actions a:hover{background:var(--fg);color:var(--bg)}
.f-row .ic{margin-inline-end:.3em;color:var(--sub)}

/* ---- logo ---- */
.brand{gap:12px}
.logo-mark{width:54px;height:54px;flex:none}
.logo-text{display:grid;gap:4px}
.logo-text b{font-family:var(--serif);font-stretch:62.5%;font-weight:500;font-size:clamp(23px,1vw + 16px,31px);line-height:.9;letter-spacing:0}
.logo-text small{font-size:10.5px;letter-spacing:.2em;color:var(--sub);border-top:1px solid var(--line);padding-top:4px;white-space:nowrap}
.nav{background:rgba(17,17,17,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}

/* ---- decorations sit beside the text instead of on top of it ---- */
.h-photo{inset:9% 45% 11% 12%}
.who .big-statement{display:flow-root}
.who .stamp{display:block;position:relative;float:left;left:auto;top:auto;width:clamp(92px,11vw,190px);margin:.18em clamp(20px,2.8vw,52px) .15em clamp(4px,1vw,18px);transform:rotate(-5deg)}
.who .stamp .tape{top:-10px;right:auto;left:22%;width:56%;transform:rotate(-7deg)}
.sticky-note{position:relative;display:inline-block;top:auto;right:auto;left:auto;vertical-align:middle;margin-inline-start:.7em;max-width:none;white-space:nowrap;transform:rotate(-2deg)}
.exp-copy .dashloop{left:auto;right:calc(100% + 14px);top:-2px}
.f-card{inset:5% 52% 13% 6.2%}
.f-pol1{top:42%;right:3.5%}
.f-pol2{top:42%;right:21.5%}

@media (prefers-reduced-motion:reduce){[data-drift]{transform:none!important}.env-items > *{transition:none}html{scroll-behavior:auto}}


/* =====================================================================
   Site-wide header menu, footer and inner pages (catalog, guides, articles)
   ===================================================================== */
.nav-in{grid-template-columns:auto 1fr auto}
.nav .menu{display:flex;justify-content:center;gap:clamp(14px,1.8vw,30px);list-style:none;margin:0;padding:0}
.nav .menu > li{position:relative}
.nav .menu a,.nav .menu button{background:none;border:0;color:inherit;font:inherit;font-size:clamp(13px,.3vw + 12px,16px);letter-spacing:.04em;text-decoration:none;cursor:pointer;padding:6px 0;display:inline-flex;align-items:center;gap:.3em}
.nav .menu a:hover,.nav .menu button:hover,.nav .menu a[aria-current]{text-decoration:underline;text-underline-offset:5px}
.nav .menu .ic{width:.8em;height:.8em}
.nav .sub{position:absolute;top:100%;right:-18px;min-width:230px;list-style:none;margin:0;padding:10px 18px;background:#191919;border:1px solid var(--line);border-radius:10px;box-shadow:0 24px 40px -12px rgba(0,0,0,.8);display:none;z-index:50}
.nav .menu > li:hover > .sub,.nav .menu > li:focus-within > .sub{display:block}
.nav .sub a{display:block;padding:7px 0;white-space:nowrap}
.nav .burger{display:none;background:none;border:1px solid var(--line);border-radius:6px;color:inherit;width:42px;height:42px;place-items:center;cursor:pointer}
.nav .burger .ic{width:22px;height:22px}
.nav-tools{display:flex;align-items:center;gap:14px;justify-self:end}
.drawer{display:none}
@media (max-width:1020px){
  .nav .menu{display:none}
  .nav-in{grid-template-columns:1fr auto}
  .nav .burger{display:grid}
  .drawer{display:block;position:fixed;inset:0;z-index:60;background:var(--bg);padding:20px var(--gutter) 40px;overflow-y:auto;transform:translateX(-100%);visibility:hidden;transition:transform .3s,visibility .3s}
  .drawer.open{transform:none;visibility:visible}
  .drawer .close{background:none;border:1px solid var(--line);border-radius:6px;color:inherit;width:42px;height:42px;display:grid;place-items:center;cursor:pointer;margin-inline-start:auto}
  .drawer h3{font-size:13px;letter-spacing:.14em;color:var(--sub);margin:26px 0 8px;font-family:var(--sans)}
  .drawer ul{list-style:none;margin:0;padding:0}
  .drawer a{display:block;padding:9px 0;text-decoration:none;font-family:var(--serif);font-stretch:62.5%;font-size:26px;line-height:1.1;border-bottom:1px solid var(--line)}
}
@media (max-width:480px){.nav .cta span{display:none}.logo-text small{display:none}}

/* page hero */
.page-hero{padding-block:clamp(36px,5vw,80px) clamp(28px,3vw,48px);position:relative}
.crumbs{display:flex;flex-wrap:wrap;gap:.5em;font-size:clamp(12px,.25vw + 11px,15px);letter-spacing:.05em;color:var(--sub);margin-bottom:clamp(16px,2vw,28px)}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.page-hero h1{font-size:clamp(44px,7vw,128px);line-height:.95;max-width:16ch}
.page-hero h1.long{font-size:clamp(34px,4.4vw,80px);max-width:24ch}
.page-hero .lead{margin:clamp(18px,2vw,30px) 0 0;max-width:62ch;font-size:clamp(16px,.5vw + 14px,22px);color:var(--sub)}
.page-hero .hero-pol{position:absolute;left:var(--gutter);top:clamp(30px,4vw,60px);width:clamp(120px,15vw,250px);transform:rotate(5deg)}
.page-hero .hero-pol .tape{top:-12px;left:34%;transform:rotate(-8deg)}
.page-hero.has-pol h1,.page-hero.has-pol .lead{max-width:min(62ch,calc(100% - clamp(150px,19vw,310px)))}
@media (max-width:700px){.page-hero .hero-pol{position:relative;left:auto;top:auto;margin:0 0 26px;width:46%}.page-hero.has-pol h1,.page-hero.has-pol .lead{max-width:none}}
.sec{padding-block:clamp(30px,4vw,64px)}
.sec + .sec{border-top:1px solid var(--line)}
.sec-head{margin-bottom:clamp(22px,3vw,44px)}
.sec-head h2{font-family:var(--serif);font-stretch:62.5%;font-size:clamp(34px,4.4vw,80px);line-height:1}
.sec-head p{margin:14px 0 0;max-width:62ch;color:var(--sub)}

/* filter pills */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(22px,3vw,40px)}
.filters button{font-family:var(--serif);font-stretch:62.5%;font-size:clamp(17px,1.3vw,23px);background:none;color:var(--fg);border:1px solid var(--fg);border-radius:4px;padding:.12em .6em;cursor:pointer}
.filters button[aria-pressed="true"],.filters button:hover{background:var(--fg);color:var(--bg)}
.filters button small{font-family:var(--sans);font-size:.55em;opacity:.7;margin-inline-start:.4em}

/* polaroid gallery */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,clamp(150px,17vw,250px)),1fr));gap:clamp(18px,2.6vw,44px) clamp(14px,2vw,34px);align-items:start}
.pcard{display:block;text-decoration:none;color:var(--paper-ink);background:var(--paper);padding:clamp(6px,.7vw,11px);box-shadow:0 18px 40px -14px rgba(0,0,0,.75),0 2px 4px rgba(0,0,0,.4);transition:transform .25s}
.pcard:nth-child(4n+1){transform:rotate(-1.4deg)}
.pcard:nth-child(4n+2){transform:rotate(1deg)}
.pcard:nth-child(4n+3){transform:rotate(-.6deg)}
.pcard:nth-child(4n){transform:rotate(1.6deg)}
.pcard:hover,.pcard:focus-visible{transform:rotate(0) translateY(-6px);z-index:2}
.pcard .ph{aspect-ratio:4/5}
.pcard.wide .ph{aspect-ratio:4/3}
.pcard b{display:block;font-family:var(--serif);font-stretch:62.5%;font-weight:500;font-size:clamp(16px,1.25vw,22px);line-height:1.1;padding:10px 4px 6px;min-height:2.6em}
.pcard[hidden]{display:none}
.more-wrap{text-align:center;margin-top:clamp(28px,3vw,48px)}

/* article / guide cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(18px,2vw,30px)}
.card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;text-decoration:none;transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--fg);transform:translateY(-3px)}
.card .ph{aspect-ratio:16/10}
.card .body{padding:clamp(16px,1.6vw,24px);display:flex;flex-direction:column;gap:10px;flex:1}
.card h3{font-family:var(--serif);font-stretch:62.5%;font-size:clamp(24px,2vw,34px);line-height:1.05}
.card p{margin:0;color:var(--sub);font-size:clamp(14px,.3vw + 12px,16px);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.card .go{margin-top:auto;font-size:14px;letter-spacing:.05em;display:inline-flex;align-items:center;gap:.4em;text-decoration:underline;text-underline-offset:4px}
.card.noimg-card .ph{display:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a{font-family:var(--serif);font-stretch:62.5%;font-size:clamp(17px,1.3vw,23px);border:1px solid var(--line);border-radius:4px;padding:.12em .6em;text-decoration:none}
.chips a:hover{border-color:var(--fg);background:var(--fg);color:var(--bg)}

/* prose */
.prose{max-width:74ch;font-size:clamp(16px,.35vw + 14.5px,19px);line-height:1.7;overflow-wrap:anywhere}
.prose.wide{max-width:none}
.prose > *:first-child{margin-top:0}
.prose h2,.prose h3,.prose h4,.prose h5{font-family:var(--serif);font-stretch:62.5%;font-weight:400;line-height:1.08;margin:1.5em 0 .45em}
.prose h2{font-size:clamp(30px,3vw,52px)}
.prose h3{font-size:clamp(26px,2.3vw,40px)}
.prose h4,.prose h5{font-size:clamp(22px,1.8vw,30px)}
.prose p{margin:0 0 1em}
.prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--sage)}
.prose ul,.prose ol{padding-inline-start:1.3em;margin:0 0 1em}
.prose li{margin-bottom:.35em}
.prose img{display:inline-block;vertical-align:top;height:auto;width:auto;max-width:min(100%,440px);max-height:70vh;border-radius:6px;margin:.6em 0 .6em .7em}
.prose blockquote{margin:1.4em 0;padding:.2em 1.1em;border-inline-start:2px solid var(--sage);color:var(--sub)}
.prose hr{border:0;border-top:1px solid var(--line);margin:1.6em 0}
.prose .tbl{overflow-x:auto;margin:1.4em 0}
.prose table{border-collapse:collapse;width:100%;font-size:.92em}
.prose th,.prose td{border:1px solid var(--line);padding:.6em .8em;text-align:right;vertical-align:top}
.prose th{font-family:var(--serif);font-stretch:62.5%;font-weight:500;font-size:1.25em;background:rgba(243,241,236,.06)}
.prose .embed{position:relative;aspect-ratio:16/9;margin:1.4em 0;border-radius:8px;overflow:hidden;background:#000}
.prose .embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.prose .imgrow{display:flex;flex-wrap:wrap;gap:14px;margin:1.2em 0}
.prose .imgrow img{margin:0;flex:1 1 180px;min-width:0;max-width:340px;object-fit:cover}
.article{display:grid;grid-template-columns:minmax(0,1fr) clamp(200px,24vw,340px);gap:clamp(30px,5vw,90px);align-items:start}
.article aside{position:sticky;top:110px;display:grid;gap:26px}
.article .lead-pol{transform:rotate(3deg)}
.article .lead-pol .ph{aspect-ratio:4/5}
.aside-box{border:1px solid var(--line);border-radius:12px;padding:20px;display:grid;gap:12px}
.aside-box b{font-family:var(--serif);font-stretch:62.5%;font-weight:400;font-size:28px;line-height:1}
.aside-box p{margin:0;color:var(--sub);font-size:15px}
@media (max-width:860px){.article{grid-template-columns:1fr}.article aside{position:static;order:-1}.article .lead-pol{width:min(280px,70%)}.aside-box{display:none}}

/* faq */
.faq{max-width:900px;display:grid;gap:10px}
.faq details{border:1px solid var(--line);border-radius:10px;padding:0 clamp(16px,2vw,26px)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:clamp(14px,1.6vw,22px) 0;font-family:var(--serif);font-stretch:62.5%;font-size:clamp(22px,1.9vw,32px);line-height:1.1}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);font-weight:300;font-size:1.1em;flex:none;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .prose{padding-bottom:20px;font-size:clamp(15px,.3vw + 14px,18px)}

/* testimonials */
.quotes{columns:3 300px;column-gap:clamp(18px,2vw,30px)}
.quote{break-inside:avoid;margin:0 0 clamp(18px,2vw,30px);background:var(--paper);color:var(--paper-ink);padding:clamp(18px,2vw,28px);box-shadow:0 14px 30px -12px rgba(0,0,0,.7)}
.quote:nth-child(3n+1){background:var(--blue)}
.quote:nth-child(3n+2){background:#F6F2E7}
.quote:nth-child(3n){background:var(--sage)}
.quote .stars{letter-spacing:.15em;font-size:14px;margin-bottom:8px}
.quote p{margin:0;font-size:clamp(15px,.3vw + 14px,17px);line-height:1.55}
.quote footer{padding:0;margin-top:14px;font-family:var(--serif);font-stretch:62.5%;font-size:22px;line-height:1.1}

/* single catalog item */
.item{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(30px,5vw,90px);align-items:start;padding-block:clamp(30px,4vw,64px)}
.item .frame{background:var(--paper);padding:clamp(8px,1vw,16px) clamp(8px,1vw,16px) clamp(26px,3vw,48px);box-shadow:0 26px 60px -20px rgba(0,0,0,.85);transform:rotate(-1.2deg);position:relative}
.item .frame img{width:100%;height:auto;max-height:82vh;object-fit:contain;background:#1b1b1b}
.item .frame .tape{top:-13px;right:38%;transform:rotate(-5deg)}
.item h1{font-size:clamp(40px,5vw,92px);line-height:.95}
.item .info{display:grid;gap:clamp(16px,2vw,26px);position:sticky;top:110px}
.item .info > p{margin:0;color:var(--sub);max-width:46ch}
.item .pn{display:flex;gap:18px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:18px;font-size:15px}
@media (max-width:820px){.item{grid-template-columns:1fr}.item .info{position:static}}

/* buttons + CTA band */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--serif);font-stretch:62.5%;font-size:clamp(19px,1.5vw,26px);border:1px solid var(--fg);border-radius:5px;padding:.16em .7em;text-decoration:none;background:none;color:var(--fg);cursor:pointer}
.btn:hover{background:var(--fg);color:var(--bg)}
.btn.solid{background:var(--fg);color:var(--bg)}
.btn.solid:hover{background:var(--sage);border-color:var(--sage)}
.btn-row{display:flex;flex-wrap:wrap;gap:10px}
.cta-band{border-top:1px solid var(--line);padding-block:clamp(50px,6vw,100px);display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.cta-band h2 .accent,.cta-band h2 .serif{display:block;font-size:clamp(40px,5vw,96px);line-height:.95}
.cta-band p{margin:clamp(16px,2vw,26px) 0;max-width:46ch;color:var(--sub)}
.cta-note{position:relative;justify-self:center;width:min(380px,100%)}
.cta-note .torn{padding:clamp(26px,3vw,40px);text-align:center;box-shadow:0 16px 30px rgba(0,0,0,.5);transform:rotate(-2deg)}
.cta-note h3{font-family:var(--serif);font-stretch:62.5%;font-size:clamp(28px,2.6vw,44px);line-height:1;margin-bottom:10px}
.cta-note p{margin:0;font-size:15px;color:#333;max-width:none}
.cta-note .seal{position:absolute;left:-8px;top:-22px}
@media (max-width:820px){.cta-band{grid-template-columns:1fr}}

/* contact page */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);padding-block:clamp(30px,4vw,64px)}
.contact-list{list-style:none;margin:0;padding:0;display:grid;gap:14px;font-size:clamp(16px,.4vw + 14px,20px)}
.contact-list li{display:flex;gap:.7em;align-items:flex-start}
.contact-list .ic{margin-top:.25em;color:var(--sage)}
.contact-list a{text-decoration:none}
.contact-list a:hover{text-decoration:underline}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}

/* lightbox */
.lb{position:fixed;inset:0;z-index:100;background:rgba(10,10,10,.94);display:none;grid-template-rows:1fr auto;place-items:center;padding:20px}
.lb.open{display:grid}
.lb img{max-width:min(1100px,94vw);max-height:78vh;object-fit:contain;background:var(--paper);padding:10px;box-shadow:0 30px 80px rgba(0,0,0,.8)}
.lb .cap{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:center;padding-top:16px;text-align:center}
.lb .cap b{font-family:var(--serif);font-stretch:62.5%;font-weight:400;font-size:clamp(24px,2.4vw,38px)}
.lb button.x,.lb button.arrow{position:absolute;background:rgba(0,0,0,.5);border:1px solid var(--line);color:var(--fg);width:48px;height:48px;border-radius:50%;display:grid;place-items:center;cursor:pointer}
.lb button .ic{width:22px;height:22px}
.lb button.x{top:16px;left:16px}
.lb button.prev{right:16px;top:45%}
.lb button.next{left:16px;top:45%}

/* footer */
.site-foot{border-top:1px solid var(--line);margin-top:clamp(30px,4vw,60px)}
.foot-cols{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:clamp(22px,3vw,50px);padding-block:clamp(40px,5vw,80px) clamp(24px,3vw,40px)}
.foot-cols h3{font-family:var(--sans);font-size:12.5px;letter-spacing:.16em;color:var(--sub);margin-bottom:14px;font-weight:500}
.foot-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:15px}
.foot-cols a{text-decoration:none}
.foot-cols a:hover{text-decoration:underline;text-underline-offset:4px}
.foot-brand p{color:var(--sub);font-size:15px;max-width:34ch;margin:16px 0}
.foot-brand .brand{font-size:inherit}
.foot-archive{border-top:1px solid var(--line);padding-block:18px;font-size:13.5px;color:var(--sub)}
.foot-archive summary{cursor:pointer;letter-spacing:.08em}
.foot-archive .chips{margin-top:14px}
.foot-archive .chips a{font-family:var(--sans);font-size:13.5px;padding:.3em .7em}
@media (max-width:900px){.foot-cols{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
@media (max-width:480px){.foot-cols{grid-template-columns:1fr}}
.wa-float{position:fixed;left:18px;bottom:18px;z-index:45;width:56px;height:56px;border-radius:50%;background:#1fa855;color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px rgba(0,0,0,.5);text-decoration:none}
.wa-float .ic{width:30px;height:30px;stroke-width:1.6}
.wa-float:hover{background:#178f47}