/* ============================================================
   MAHRZ. — 2026
   Brand: Wondra wordmark / #231F20 ink / #ED1C24 red
   Motif: the slash through the A — a 14deg diagonal, everywhere
   ============================================================ */

:root{
  --ink:#231F20;
  --void:#0C0B0B;
  --red:#ED1C24;
  --red-dk:#C3141B;
  --bone:#EFEDE7;
  --bone-2:#E4E1D9;
  --paper:#F7F6F2;
  --smoke:#77716F;

  --rule:rgba(35,31,32,.16);
  --rule-lt:rgba(239,237,231,.18);

  --slash:-14deg;
  --pad:clamp(20px,5vw,80px);
  --maxw:1560px;

  --display:"Bricolage Grotesque","Archivo Black",sans-serif;
  --body:"Instrument Sans","Helvetica Neue",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;}
:focus-visible{outline:3px solid var(--red);outline-offset:4px;}

/* ---------- type ---------- */
.display{
  font-family:var(--display);
  font-variation-settings:"wdth" 96,"opsz" 42;
  font-weight:800;line-height:.86;letter-spacing:-.035em;
  text-transform:uppercase;margin:0;
}
.d1{font-size:clamp(52px,11.5vw,190px);}
.d2{font-size:clamp(38px,7vw,110px);}
.d3{font-size:clamp(26px,3.4vw,52px);}
.lede{font-size:clamp(16px,1.45vw,20px);color:#4A4546;max-width:48ch;margin:0;}
.tag{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--smoke);margin:0;
  display:inline-flex;align-items:center;gap:10px;
}
.tag::before{content:"";width:26px;height:2px;background:var(--red);transform:skewX(var(--slash));}
.red{color:var(--red);}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);width:100%;}

/* ---------- slash primitives ---------- */
.slash-rule{height:2px;background:var(--ink);transform:skewX(var(--slash));transform-origin:left;}
.cut-top{clip-path:polygon(0 3.2vw,100% 0,100% 100%,0 100%);}
.cut-bot{clip-path:polygon(0 0,100% 0,100% calc(100% - 3.2vw),0 100%);}
.cut-both{clip-path:polygon(0 3.2vw,100% 0,100% calc(100% - 3.2vw),0 100%);}

/* ---------- header ---------- */
.head{
  position:fixed;top:0;left:0;right:0;z-index:80;
  transition:transform .45s cubic-bezier(.16,1,.3,1),background .35s ease,padding .35s ease;
  padding:20px 0;
}
.head.solid{background:rgba(239,237,231,.9);backdrop-filter:blur(16px) saturate(1.2);padding:12px 0;border-bottom:1px solid var(--rule);}
.head.hide{transform:translateY(-110%);}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:20px;}
.logo{display:block;width:clamp(108px,11vw,152px);transition:width .35s ease,transform .35s ease;}
.head.solid .logo{width:clamp(96px,8.5vw,120px);}
.logo:hover{transform:skewX(var(--slash));}

.nav{display:flex;align-items:center;gap:6px;}
.nav a{
  position:relative;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;padding:10px 14px;overflow:hidden;
}
.nav a span{position:relative;z-index:2;transition:color .3s ease;}
.nav a::before{
  content:"";position:absolute;inset:-2px -6px;background:var(--red);
  transform:skewX(var(--slash)) scaleX(0);transform-origin:left;
  transition:transform .38s cubic-bezier(.16,1,.3,1);
}
.nav a:hover::before,.nav a[aria-current="page"]::before{transform:skewX(var(--slash)) scaleX(1);}
.nav a:hover span,.nav a[aria-current="page"] span{color:var(--bone);}

.burger{display:none;background:none;border:0;padding:10px;cursor:pointer;}
.burger i{display:block;width:26px;height:2px;background:var(--ink);margin:5px 0;transition:transform .35s ease,opacity .3s ease;}
.burger.on i:nth-child(1){transform:translateY(7px) rotate(-14deg);}
.burger.on i:nth-child(2){opacity:0;}
.burger.on i:nth-child(3){transform:translateY(-7px) rotate(14deg);}

.drawer{
  position:fixed;inset:0;z-index:75;background:var(--ink);
  clip-path:circle(0% at 92% 5%);transition:clip-path .7s cubic-bezier(.7,0,.2,1);
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);
}
.drawer.open{clip-path:circle(150% at 92% 5%);}
.drawer a{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(34px,8vw,72px);line-height:1.06;color:var(--bone);
  letter-spacing:-.03em;opacity:0;transform:translateY(24px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1),color .25s ease;
}
.drawer.open a{opacity:1;transform:none;}
.drawer a:hover{color:var(--red);}
.drawer .foot-note{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--smoke);margin-top:38px;text-transform:uppercase;}

@media (max-width:900px){
  .nav{display:none;}
  .burger{display:block;}
}

/* ---------- hero scene ---------- */
.scene{min-height:100svh;display:flex;flex-direction:column;justify-content:center;position:relative;padding:120px 0 60px;}
.hero{overflow:hidden;}
.hero-mark{width:min(92vw,1180px);margin:0 auto 4vh;color:var(--ink);}
.hero-mark svg{width:100%;height:auto;}
.hero-mark path{opacity:0;transform:translateY(60px) skewX(-10deg);transform-box:fill-box;transform-origin:center;}
.hero-mark.lit path{animation:markIn .95s cubic-bezier(.16,1,.3,1) forwards;}
.hero-mark.lit path:nth-child(1){animation-delay:.05s}
.hero-mark.lit path:nth-child(2){animation-delay:.13s}
.hero-mark.lit path:nth-child(3){animation-delay:.21s}
.hero-mark.lit path:nth-child(4){animation-delay:.29s}
.hero-mark.lit path:nth-child(5){animation-delay:.37s}
.hero-mark.lit path:nth-child(6){animation-delay:.55s}
.hero-mark.lit path:nth-child(7){animation-delay:.66s}
@keyframes markIn{to{opacity:1;transform:none;}}

.hero-line{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;
  gap:24px;border-top:2px solid var(--ink);padding-top:20px;
}
.hero-line .lede{max-width:40ch;}
.hero-stats{display:flex;gap:clamp(18px,3vw,48px);}
.hero-stats div span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--smoke);}
.hero-stats div b{font-family:var(--display);font-weight:800;font-size:clamp(20px,2.4vw,34px);line-height:1.1;}

.scroll-cue{
  position:absolute;left:var(--pad);bottom:26px;display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--smoke);
}
.scroll-cue i{display:block;width:60px;height:2px;background:var(--red);transform:skewX(var(--slash));animation:cue 2.2s ease-in-out infinite;}
@keyframes cue{0%,100%{transform:skewX(var(--slash)) scaleX(.35);transform-origin:left;}50%{transform:skewX(var(--slash)) scaleX(1);transform-origin:left;}}

/* ---------- ticker ---------- */
.ticker{background:var(--red);color:var(--bone);overflow:hidden;transform:rotate(-1.4deg) scaleX(1.05);margin:0 -3vw;position:relative;z-index:5;}
.ticker.flat{transform:none;margin:0;}
.ticker-track{display:flex;width:max-content;animation:roll 30s linear infinite;}
.ticker-track span{
  font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(15px,1.8vw,26px);padding:11px 22px;white-space:nowrap;
}
.ticker-track span.dot{color:var(--ink);}
@keyframes roll{to{transform:translateX(-50%);}}
.ticker:hover .ticker-track{animation-play-state:paused;}

/* ---------- horizontal pinned rail ---------- */
.rail{position:relative;background:var(--ink);color:var(--bone);}
.rail-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;}
.rail-head{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:clamp(78px,10vh,120px) var(--pad) 0;
}
.rail-head .tag{color:#9A9391;}
.rail-count{font-family:var(--mono);font-size:12px;letter-spacing:.2em;}
.rail-count b{color:var(--red);font-size:26px;font-weight:500;}
.rail-track{display:flex;align-items:center;flex:1;min-height:0;padding-inline:var(--pad);gap:clamp(16px,2.4vw,34px);will-change:transform;}
.panel{
  position:relative;flex:0 0 auto;width:clamp(260px,26vw,400px);
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.panel .shot{position:relative;overflow:hidden;background:#161314;}
.panel img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:grayscale(1) contrast(1.12);transition:filter .6s ease,transform 1s cubic-bezier(.16,1,.3,1);}
.panel:hover img{filter:none;transform:scale(1.06);}
.panel .shot::after{
  content:"";position:absolute;inset:auto 0 0 0;height:0;background:var(--red);
  mix-blend-mode:multiply;transition:height .5s cubic-bezier(.16,1,.3,1);
}
.panel:hover .shot::after{height:100%;}
.panel .num{
  position:absolute;top:0;left:0;z-index:3;background:var(--bone);color:var(--ink);
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;padding:6px 12px;
}
.panel h3{font-family:var(--display);font-weight:800;font-size:clamp(28px,3.4vw,46px);text-transform:uppercase;letter-spacing:-.03em;margin:16px 0 4px;line-height:1;}
.panel .co{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:#9A9391;}
.panel .note{font-size:14.5px;color:#C9C4C2;margin:10px 0 0;}
.panel .buy{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--rule-lt);font-family:var(--mono);font-size:12px;}
.panel .buy b{color:var(--red);font-weight:500;}
.rail-bar{height:2px;background:rgba(239,237,231,.16);margin:0 var(--pad) clamp(28px,5vh,54px);}
.rail-bar i{display:block;height:100%;width:0;background:var(--red);transition:width .1s linear;}
@media (max-width:760px){
  .rail-track{gap:14px;}
  .panel{width:74vw;}
}

/* ---------- pinned spec sequence ---------- */
.seq{position:relative;background:var(--bone);}
.seq-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:start;}
.seq-media{position:sticky;top:14vh;height:72vh;overflow:hidden;background:var(--ink);}
.seq-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1);}
.seq-media .cap{
  position:absolute;left:0;bottom:0;background:var(--red);color:var(--bone);
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:9px 16px;
}
.seq-list{padding:8vh 0;}
.seq-item{padding:clamp(38px,7vh,80px) 0;border-bottom:1px solid var(--rule);position:relative;}
.seq-item .k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--smoke);margin-bottom:14px;display:block;}
.seq-item h3{font-family:var(--display);font-weight:800;font-size:clamp(26px,3.2vw,48px);text-transform:uppercase;letter-spacing:-.03em;line-height:.94;margin:0 0 12px;transition:color .4s ease,transform .5s cubic-bezier(.16,1,.3,1);}
.seq-item p{margin:0;color:#4A4546;max-width:40ch;}
.seq-item::before{
  content:"";position:absolute;left:-24px;top:calc(50% - 14px);width:8px;height:28px;
  background:var(--red);transform:skewX(var(--slash)) scaleY(0);transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.seq-item.on::before{transform:skewX(var(--slash)) scaleY(1);}
.seq-item.on h3{color:var(--red);transform:translateX(6px);}
@media (max-width:900px){
  .seq-grid{grid-template-columns:1fr;}
  .seq-media{position:relative;top:0;height:52vh;}
  .seq-list{padding:4vh 0 0;}
  .seq-item::before{left:-14px;}
}

/* ---------- section shell ---------- */
.sec{padding:clamp(70px,11vh,150px) 0;position:relative;}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;margin-bottom:clamp(34px,6vh,72px);}
.sec-head .lede{max-width:32ch;}
@media (max-width:820px){.sec-head{flex-direction:column;align-items:flex-start;}}

/* ---------- finds ---------- */
.finds{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2px;background:var(--rule);border:2px solid var(--ink);}
.find{position:relative;background:var(--bone);padding:30px 26px 26px;overflow:hidden;min-height:210px;display:flex;flex-direction:column;}
.find::before{
  content:"";position:absolute;inset:-2px -20px;background:var(--ink);
  transform:skewX(var(--slash)) translateY(101%);transition:transform .55s cubic-bezier(.16,1,.3,1);
}
.find:hover::before{transform:skewX(var(--slash)) translateY(0);}
.find > *{position:relative;z-index:2;transition:color .35s ease;}
.find .n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--red);}
.find h3{font-family:var(--display);font-weight:800;font-size:clamp(21px,2vw,30px);text-transform:uppercase;letter-spacing:-.025em;line-height:.98;margin:10px 0 8px;}
.find p{margin:0;font-size:14.5px;color:#4A4546;}
.find .cat{margin-top:auto;padding-top:16px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--smoke);}
.find:hover h3,.find:hover p,.find:hover .cat{color:var(--bone);}

/* ---------- split / about ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,90px);align-items:start;}
.split p{font-size:17px;color:#4A4546;margin:0 0 20px;}
.pull{
  font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.03em;
  font-size:clamp(26px,3.6vw,54px);line-height:.94;margin:0;
}
.pull em{font-style:normal;color:var(--red);}
.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px;background:var(--ink);border:2px solid var(--ink);margin-top:clamp(30px,5vh,56px);}
.fig{background:var(--bone);padding:26px 22px;}
.fig b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(34px,4.6vw,62px);line-height:.9;font-variant-numeric:tabular-nums;}
.fig span{display:block;margin-top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--smoke);}
@media (max-width:880px){.split{grid-template-columns:1fr;}}

/* ---------- buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:12px;overflow:hidden;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  padding:17px 30px;border:2px solid var(--ink);background:transparent;cursor:pointer;
  will-change:transform;
}
.btn span{position:relative;z-index:2;transition:color .32s ease;}
.btn::before{content:"";position:absolute;inset:-2px -14px;background:var(--red);transform:skewX(var(--slash)) scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.16,1,.3,1);}
.btn:hover::before{transform:skewX(var(--slash)) scaleX(1);}
.btn:hover span{color:var(--bone);}
.btn-fill{background:var(--ink);border-color:var(--ink);}
.btn-fill span{color:var(--bone);}
.btn-lt{border-color:var(--bone);}
.btn-lt span{color:var(--bone);}

/* ---------- CTA slab ---------- */
.slab{background:var(--ink);color:var(--bone);position:relative;overflow:hidden;}
.slab-in{padding:clamp(70px,12vh,150px) 0;display:flex;justify-content:space-between;align-items:flex-end;gap:34px;}
.slab .d2{max-width:15ch;}
.slab::before{
  content:"";position:absolute;width:52vw;height:160%;right:-14vw;top:-30%;
  background:var(--red);transform:skewX(var(--slash));opacity:.16;
}
@media (max-width:820px){.slab-in{flex-direction:column;align-items:flex-start;}}

/* ---------- contact ---------- */
.cgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,6vw,90px);align-items:start;}
.field{margin-bottom:24px;}
.field label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--smoke);margin-bottom:10px;}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--body);font-size:16px;color:var(--ink);
  background:transparent;border:0;border-bottom:2px solid var(--ink);border-radius:0;
  padding:12px 2px;transition:border-color .3s ease;
}
.field textarea{min-height:130px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red);}
.clist{border-top:2px solid var(--ink);}
.clist div{padding:20px 0;border-bottom:1px solid var(--rule);}
.clist span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--smoke);margin-bottom:7px;}
.clist b{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.02em;}
.fnote{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--smoke);margin-top:18px;}
@media (max-width:880px){.cgrid{grid-template-columns:1fr;}}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#9A9391;padding:clamp(60px,9vh,110px) 0 28px;overflow:hidden;}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;padding-bottom:44px;border-bottom:1px solid var(--rule-lt);}
.foot-grid p{margin:0;max-width:32ch;font-size:14.5px;}
.foot h4{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#6A6462;margin:0 0 16px;font-weight:400;}
.foot-grid a{display:block;padding:7px 0;font-size:14.5px;transition:color .25s ease,transform .3s ease;}
.foot-grid a:hover{color:var(--bone);transform:translateX(7px);}
.foot-mark{width:100%;margin:44px 0 22px;color:var(--bone);opacity:.94;}
.foot-mark svg{width:100%;height:auto;}
.foot-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#5F5A58;}
@media (max-width:880px){.foot-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr;}}

/* ---------- page head ---------- */
.phead{padding:clamp(150px,20vh,240px) 0 clamp(40px,7vh,90px);position:relative;overflow:hidden;}
.phead .lede{margin-top:26px;}
.phead .d1{margin-top:22px;}

/* ---------- motion utilities ---------- */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--red);z-index:200;}
.boot{
  position:fixed;inset:0;z-index:300;background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  transition:clip-path .8s cubic-bezier(.7,0,.2,1);
  clip-path:inset(0 0 0 0);
}
.boot.done{clip-path:inset(0 0 100% 0);}
.boot-mark{width:min(62vw,560px);color:var(--bone);}
.boot-mark path{opacity:0;animation:bootP .5s ease forwards;}
.boot-mark path:nth-child(1){animation-delay:.06s}
.boot-mark path:nth-child(2){animation-delay:.14s}
.boot-mark path:nth-child(3){animation-delay:.22s}
.boot-mark path:nth-child(4){animation-delay:.3s}
.boot-mark path:nth-child(5){animation-delay:.38s}
.boot-mark path:nth-child(6){animation-delay:.52s}
.boot-mark path:nth-child(7){animation-delay:.62s}
@keyframes bootP{to{opacity:1}}

.wipe{position:fixed;inset:0;z-index:250;background:var(--red);transform:translateY(101%) skewY(-3deg);pointer-events:none;}
.wipe.out{transform:translateY(0) skewY(0);transition:transform .5s cubic-bezier(.7,0,.2,1);}

.kin{display:inline-block;overflow:hidden;vertical-align:bottom;}
.kin > i{display:inline-block;font-style:normal;transform:translateY(102%) skewY(5deg);opacity:0;transition:transform .95s cubic-bezier(.16,1,.3,1),opacity .5s ease;}
.kin.lit > i{transform:none;opacity:1;}

.rv{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .9s cubic-bezier(.16,1,.3,1);}
.rv.in{opacity:1;transform:none;}

.cursor{
  position:fixed;top:0;left:0;width:12px;height:12px;background:var(--red);border-radius:50%;
  z-index:190;pointer-events:none;mix-blend-mode:difference;
  transform:translate(-50%,-50%);transition:width .3s ease,height .3s ease,opacity .3s ease;opacity:0;
}
.cursor.big{width:60px;height:60px;}

@media (prefers-reduced-motion:reduce){
  .boot,.wipe,.cursor{display:none !important;}
  .rv{opacity:1;transform:none;transition:none;}
  .kin > i{transform:none;opacity:1;transition:none;}
  .hero-mark path{opacity:1;transform:none;animation:none !important;}
  .ticker-track{animation:none;}
  .scroll-cue i{animation:none;}
  .rail-sticky{position:relative;height:auto;}
  .rail-track{flex-wrap:wrap;transform:none !important;}
  .seq-media{position:relative;}
}

/* ---------- finds with photography ---------- */
.finds{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
.find{padding:0;min-height:0;}
.find .ph{position:relative;overflow:hidden;background:var(--ink);z-index:2;}
.find .ph img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1),filter .5s ease;}
.find:hover .ph img{transform:scale(1.06);filter:saturate(1.1);}
.find .ph .n{position:absolute;top:0;left:0;background:var(--red);color:var(--bone);padding:6px 11px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;z-index:3;}
.find .txt{position:relative;z-index:2;padding:20px 20px 24px;display:flex;flex-direction:column;gap:8px;}
.find h3{margin:0;}
.find .cat{padding-top:12px;margin-top:auto;}
.find::before{inset:auto -20px -2px -20px;height:56%;}

/* ---------- social row ---------- */
.social{display:flex;gap:14px;align-items:center;margin-top:6px;}
.social a{padding:0;display:block;}
.social img{width:26px;height:26px;filter:grayscale(1) brightness(1.6);opacity:.7;transition:filter .3s ease,opacity .3s ease,transform .3s ease;}
.social a:hover img{filter:none;opacity:1;transform:translateY(-3px);}
.foot-grid .social a:hover{transform:none;}

html{scroll-behavior:smooth;}
section[id]{scroll-margin-top:72px;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}


/* ---------- teaser blocks (homepage) ---------- */
.teaser{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px);}
@media (max-width:820px){.teaser{grid-template-columns:1fr 1fr;}
  .teaser > *:nth-child(3){display:none;}}
.more{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  border-top:2px solid var(--ink);margin-top:clamp(26px,4vh,48px);padding-top:22px;
}
.more p{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--smoke);}
.on-ink .more{border-color:var(--rule-lt);}
.on-ink .more p{color:#9A9391;}

/* ---------- about strip ---------- */
.strip{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:center;}
.strip-media{position:relative;overflow:hidden;background:var(--ink);}
.strip-media img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,1,.3,1);}
.strip:hover .strip-media img{transform:scale(1.04);}
.strip-media::after{content:"";position:absolute;inset:auto -10% -30% -10%;height:60%;background:var(--red);transform:skewY(-6deg);opacity:.14;}
@media (max-width:820px){.strip{grid-template-columns:1fr;}.strip-media img{aspect-ratio:3/2;}}