/* ============================================================
   d2d MOSAIC — The Wall of Stories
   Duotone portrait tiles → full colour on hover, editorial
   quote tiles in between. Fully responsive.
   ============================================================ */

/* ---------- Section shell (homepage) ---------- */
.mz-section{position:relative;padding:72px 0;overflow:hidden;
	background:radial-gradient(circle at 1px 1px,rgba(17,17,20,.055) 1px,transparent 0) 0 0/22px 22px,var(--paper,#fff);}
.mz-section::before{content:"STORIES";position:absolute;top:6px;right:-14px;font-family:Anton,sans-serif;font-size:clamp(90px,14vw,190px);line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(216,31,36,.10);letter-spacing:.02em;pointer-events:none;user-select:none;}
.mz-section::after{content:"";position:absolute;left:-26px;bottom:80px;width:70px;height:70px;border-radius:16px;background:#f2b632;opacity:.14;transform:rotate(12deg);animation:mzfloat 7s ease-in-out infinite;pointer-events:none;}
.mz-head{position:relative;}
.mz-head::after{content:"";position:absolute;right:120px;top:-26px;width:34px;height:34px;border-radius:50%;background:var(--red);opacity:.12;animation:mzfloat 6s ease-in-out infinite reverse;pointer-events:none;}
@keyframes mzfloat{0%,100%{transform:translateY(0) rotate(12deg)}50%{transform:translateY(-14px) rotate(18deg)}}
.mz-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px;}
.mz-title{position:relative;display:inline-block;font-family:var(--display);font-weight:900;font-size:clamp(30px,4.4vw,48px);letter-spacing:-.02em;line-height:1.05;margin:8px 0 0;color:var(--ink);}
.mz-title::after{content:"";position:absolute;left:0;bottom:-8px;height:5px;width:0;background:var(--red);border-radius:3px;transition:width .8s cubic-bezier(.2,.7,.2,1) .2s;}
.mz-head.mz-in .mz-title::after{width:56%;}
.mz-all{font-family:var(--display);font-weight:800;font-size:14.5px;color:var(--ink);border-bottom:2.5px solid var(--red);padding-bottom:3px;text-decoration:none;white-space:nowrap;transition:color .2s;}
.mz-all:hover{color:var(--red);}
.mz-all--mobile{display:none;margin:26px auto 0;width:max-content;}
@media(max-width:640px){
	.mz-head .mz-all{display:none;}
	.mz-all--mobile{display:block;}
}

/* ---------- The wall ---------- */
.mz-wall{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;grid-auto-flow:dense;}
@media(max-width:1024px){.mz-wall{grid-template-columns:repeat(3,1fr);}}
@media(max-width:640px){.mz-wall{grid-template-columns:repeat(2,1fr);gap:10px;}}

/* ---------- Story tile ---------- */
.mz-tile{position:relative;display:block;aspect-ratio:1;border-radius:14px;overflow:hidden;text-decoration:none;background:var(--mzc,#eee);
	opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease;}
.mz-tile.mz-in{opacity:1;transform:none;}
.mz-tile:hover{box-shadow:0 16px 34px rgba(0,0,0,.18);z-index:2;}
.mz-tile-media{position:absolute;inset:0;}
.mz-tile-media img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.06) brightness(1.04);transform:scale(1.01);transition:filter .45s ease,transform .6s cubic-bezier(.2,.7,.2,1);}
/* Duotone tint — colour "blooms" away on hover to reveal the real photo */
.mz-tile-tint{position:absolute;inset:0;background:var(--mzc);mix-blend-mode:color;opacity:.95;transition:opacity .45s ease;}
.mz-tile-media::after{content:"";position:absolute;inset:0;background:var(--mzc);mix-blend-mode:multiply;opacity:.22;transition:opacity .45s ease;}
.mz-tile:hover .mz-tile-tint,.mz-tile:hover .mz-tile-media::after{opacity:0;}
.mz-tile:hover .mz-tile-media img{filter:none;transform:scale(1.06);}
/* Info plate */
.mz-tile-info{position:absolute;left:0;right:0;bottom:0;padding:34px 12px 12px;background:linear-gradient(180deg,rgba(10,10,14,0),rgba(10,10,14,.72));display:flex;flex-direction:column;gap:4px;transform:translateY(8px);opacity:0;transition:transform .35s ease,opacity .35s ease;}
.mz-tile:hover .mz-tile-info{transform:none;opacity:1;}
.mz-tile-info em{font-style:normal;font-family:var(--display);font-weight:800;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:var(--mzc);align-self:flex-start;padding:3px 8px;border-radius:3px;}
.mz-tile-info strong{font-family:var(--display);font-weight:800;font-size:13.5px;line-height:1.3;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
/* Touch devices: no hover — show info always, keep gentle tint */
@media(hover:none){
	.mz-tile-info{transform:none;opacity:1;padding:26px 10px 10px;}
	.mz-tile-info strong{font-size:12px;}
	.mz-tile-tint{opacity:.55;}
	.mz-tile-media::after{opacity:.12;}
	.mz-tile-media img{filter:grayscale(.35) contrast(1.03);}
}

/* ---------- Quote tile (clean white card) ---------- */
.mz-tile--quote{aspect-ratio:auto;grid-column:span 2;grid-row:span 2;background:#fff;border:2px solid var(--line,#e9e8e4);border-radius:14px;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:clamp(20px,3vw,40px);cursor:default;opacity:0;transform:translateY(22px);}
.mz-tile--quote:hover{box-shadow:0 14px 30px rgba(17,17,20,.08);}
.mz-quote-mark{font-family:Anton,var(--display),sans-serif;font-size:clamp(40px,4.6vw,64px);line-height:.55;color:var(--red);}
.mz-quote-text{font-family:var(--display);font-weight:900;font-size:clamp(19px,2.4vw,32px);line-height:1.2;letter-spacing:-.015em;color:var(--ink);}
.mz-quote-hl{background-image:linear-gradient(rgba(216,31,36,.9),rgba(216,31,36,.9));background-repeat:no-repeat;background-size:0% .14em;background-position:0 92%;padding-bottom:.06em;transition:background-size .9s cubic-bezier(.2,.7,.2,1) .35s;}
.mz-tile--quote.mz-in .mz-quote-hl{background-size:100% .14em;}
.mz-quote-brand{font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--grey,#70707a);}
.mz-quote-brand em{font-style:normal;color:var(--red);}
@media(max-width:640px){
	.mz-tile--quote{grid-column:span 2;grid-row:span 1;min-height:148px;gap:8px;}
}
@media(prefers-reduced-motion:reduce){
	.mz-tile,.mz-tile--quote{opacity:1;transform:none;transition:none;}
	.mz-section::after,.mz-head::after{animation:none;}
	.mz-title::after{width:56%;transition:none;}
	.mz-quote-hl{background-size:100% .14em;transition:none;}
}

/* ============================================================
   DEDICATED PAGE
   ============================================================ */
.mz-page{background:var(--paper,#fff);}
.mz-hero{position:relative;background:#101013;color:#fff;padding:76px 0 58px;overflow:hidden;}
.mz-hero-title{font-family:var(--display);font-weight:900;font-size:clamp(40px,6vw,72px);letter-spacing:-.02em;line-height:1.02;margin:10px 0 12px;color:#fff;}
.mz-hero-sub{color:#c9c9d1;font-size:16.5px;line-height:1.6;max-width:52ch;margin:0;}
.mz-hero-strip{position:absolute;left:0;right:0;bottom:0;display:flex;height:8px;}
.mz-hero-strip span{flex:1;background:var(--mzc);}
.mz-page-wall{padding:48px 0 80px;}
.mz-pager{margin-top:44px;text-align:center;}
.mz-pager .page-numbers{display:inline-block;font-family:var(--display);font-weight:800;font-size:14px;color:var(--ink);padding:10px 16px;border:2px solid var(--line,#e9e8e4);border-radius:10px;margin:0 4px;text-decoration:none;transition:border-color .2s,color .2s;}
.mz-pager .page-numbers:hover{border-color:var(--red);color:var(--red);}
.mz-pager .page-numbers.current{background:var(--red);border-color:var(--red);color:#fff;}