/* ============================================================
Zeybek portfolio detail page ยท shared styles
============================================================ */
:root{
--ink:#0B0B0A; --ink-2:#121210; --ink-3:#18171a;
--concrete:#1C1A17; --concrete-2:#2A2723;
--steel:#4A4540; --ash:#8A847A; --bone:#EEE8DC; --bone-dim:#C9C3B5;
--amber:#E26A2C; --amber-hot:#F08A3C; --rust:#B84A20;
--f-display:"Fraunces","Times New Roman",serif;
--f-body:"Inter Tight",-apple-system,system-ui,sans-serif;
--ease-out:cubic-bezier(0.22,1,0.36,1);
--ease-expo:cubic-bezier(0.16,1,0.3,1);
--wrap-max:1680px;
--gutter:clamp(20px,4vw,64px);
}
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{background:var(--ink);color:var(--bone);-webkit-font-smoothing:antialiased;overscroll-behavior:none;scroll-behavior:smooth;}
/* Lenis smooth-scroll: while Lenis runs it writes the native scroll position
every frame, so the scroll-behavior:smooth above must yield to auto or the
page only catches up when you stop. Lenis adds these classes to . */
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}
.lenis.lenis-smooth iframe{pointer-events:none;}
body{
font-family:var(--f-body);font-weight:400;
font-size:clamp(15px,1vw + 0.5rem,18px);line-height:1.55;
letter-spacing:-0.005em;overflow-x:hidden;
background:radial-gradient(1100px 700px at 50% 0%,rgba(226,106,44,0.04),transparent 60%),var(--ink);
cursor:default;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:inherit;}
::selection{background:var(--amber);color:var(--ink);}
:focus{outline:none;}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px;}
a,button,[data-hover],[role='button'],.tile{
cursor:pointer;
}
/* Force every child of an interactive element to inherit the standard pointer.
Browsers default , , etc. to text/default , without
this rule, hovering an image inside a button flips back to the system
arrow. */
a *, button *, .tile *, [data-hover] *, [role='button'] *,
a img, button img, .tile img, [data-hover] img, [role='button'] img,
a svg, button svg, .tile svg, [data-hover] svg, [role='button'] svg{
cursor:inherit !important;
}
.wrap{width:min(94vw,var(--wrap-max));margin-inline:auto;padding-inline:var(--gutter);position:relative;}
.amp{font-family:var(--f-body);font-style:italic;font-weight:380;padding:0 0.04em;}
.punc{color:var(--amber);font-style:normal;display:inline-block;margin-left:-0.04em;}
.eyebrow{font-family:var(--f-body);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:0.18em;color:var(--ash);}
/* NAV */
.nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px var(--gutter);background:rgba(11,11,10,0.72);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(238,232,220,0.06);}
.nav .brand{font-family:var(--f-display);font-size:22px;font-weight:400;letter-spacing:-0.02em;display:flex;align-items:center;gap:12px;color:var(--bone);flex-shrink:0;}
.nav .brand .mark{width:38px;height:34px;display:inline-flex;align-items:center;justify-content:center;}
.nav .brand .mark img{width:100%;height:100%;object-fit:contain;display:block;}
.nav .links{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.nav .links a{padding:9px 14px;border-radius:999px;font-family:var(--f-body);font-weight:500;font-size:13px;letter-spacing:0.01em;color:var(--bone-dim);transition:color .3s,background .3s;}
.nav .links a:hover,.nav .links a[aria-current="page"]{color:var(--bone);background:rgba(238,232,220,0.06);}
.nav .links a[aria-current="page"]{color:var(--amber);}
.nav .nav-cta{flex-shrink:0;background:var(--amber);color:var(--ink);font-family:var(--f-body);font-weight:600;font-size:13px;letter-spacing:0.01em;padding:10px 20px;border-radius:999px;white-space:nowrap;transition:background .25s,transform .25s;}
.nav .nav-cta:hover{background:var(--amber-hot);transform:translateY(-1px);}
@media (max-width:860px){
.nav{flex-wrap:wrap;}
.nav .links{gap:3px;justify-content:flex-start;width:100%;order:3;}
.nav .links a{padding:8px 11px;font-size:12px;}
}
/* CATEGORY HERO */
.cat-hero{position:relative;padding:clamp(50px,7vw,110px) 0 clamp(40px,5vw,80px);overflow:hidden;}
.cat-hero .num{font-family:var(--f-display);font-style:italic;font-weight:300;font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1;font-size:clamp(140px,22vw,360px);line-height:0.85;color:var(--amber);position:absolute;top:-0.08em;right:var(--gutter);letter-spacing:-0.05em;opacity:0.10;pointer-events:none;user-select:none;z-index:0;}
.cat-hero .inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:28px;}
@media (min-width:900px){.cat-hero .inner{grid-template-columns:1.2fr 1fr;gap:64px;align-items:end;}}
.cat-hero .eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;}
.cat-hero .eyebrow::before{content:"";width:32px;height:1px;background:var(--amber);}
.cat-hero h1{font-family:var(--f-display);font-weight:300;font-variation-settings:"opsz" 144,"SOFT" 40,"WONK" 1;font-size:clamp(54px,8vw,130px);line-height:0.96;letter-spacing:-0.032em;margin:0;color:var(--bone);}
.cat-hero h1 em{font-style:italic;color:var(--bone-dim);font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1;}
.cat-hero .write-up{font-family:var(--f-body);font-size:clamp(15px,1.1vw,18px);line-height:1.7;color:var(--bone-dim);max-width:48ch;margin:0;}
.cat-hero .write-up p + p{margin-top:14px;}
.cat-hero .meta-row{display:flex;flex-wrap:wrap;gap:28px 44px;margin-top:clamp(28px,3.5vw,44px);padding-top:clamp(22px,2.5vw,30px);border-top:1px solid rgba(238,232,220,0.08);grid-column:1 / -1;}
.cat-hero .meta-stat .num-val{font-family:var(--f-display);font-style:italic;font-weight:320;font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1;font-size:clamp(26px,2.6vw,40px);line-height:1;color:var(--amber);letter-spacing:-0.02em;}
.cat-hero .meta-stat .lbl{font-family:var(--f-body);font-size:11px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:var(--ash);margin-top:6px;}
/* ============================================================
GALLERY, dynamic floating image grid
Each tile gets a unique idle float animation (Y drift + tiny
rotation), staggered phase, so the whole gallery feels alive
rather than static. Hover focuses one tile (the rest dim and
blur slightly), the active tile lifts and the image zooms.
============================================================ */
.gallery{position:relative;padding:clamp(30px,4vw,60px) 0 clamp(60px,8vw,110px);}
.gallery-grid{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:clamp(14px,1.6vw,24px);
grid-auto-flow:dense;
transition:filter .45s var(--ease-out);
}
/* When any tile is hovered, the rest blur back so the active tile pops.
Quiet depth-of-field, no colour or brightness gymnastics. */
.gallery-grid:has(.tile:hover) .tile:not(:hover){
filter:blur(5px) brightness(0.7);
transform:translateY(0) scale(0.985);
}
.tile{
position:relative;
overflow:hidden;
border-radius:6px;
background:var(--concrete);
border:1px solid rgba(238,232,220,0.06);
/* cursor inherited from the shared a,button,.tile rule above (standard pointer) */
opacity:0;
/* Entrance: fade + slight lift */
transform:translateY(30px);
transition:
transform .7s var(--ease-out),
opacity .9s var(--ease-out),
filter .35s var(--ease-out),
border-color .35s,
box-shadow .55s var(--ease-out);
will-change:transform;
}
.tile.is-in{opacity:1;transform:translateY(0);}
/* Each tile gets a unique slow float animation. Six variants stagger phase
+ amplitude so the grid feels organic, never synchronized. */
.tile.is-in:nth-child(6n+1){animation:tileFloatA 9s ease-in-out 0.6s infinite;}
.tile.is-in:nth-child(6n+2){animation:tileFloatB 11s ease-in-out 0.4s infinite;}
.tile.is-in:nth-child(6n+3){animation:tileFloatC 10s ease-in-out 0.8s infinite;}
.tile.is-in:nth-child(6n+4){animation:tileFloatA 12s ease-in-out 0.2s infinite reverse;}
.tile.is-in:nth-child(6n+5){animation:tileFloatB 10.5s ease-in-out 0.7s infinite reverse;}
.tile.is-in:nth-child(6n) {animation:tileFloatC 11.5s ease-in-out 0.3s infinite;}
@keyframes tileFloatA{
0%,100% { transform:translate3d(0, 0, 0) rotate(0deg); }
50% { transform:translate3d(0, -10px, 0) rotate(-0.4deg); }
}
@keyframes tileFloatB{
0%,100% { transform:translate3d(0, 0, 0) rotate(0deg); }
50% { transform:translate3d(0, -8px, 0) rotate(0.3deg); }
}
@keyframes tileFloatC{
0%,100% { transform:translate3d(0, 0, 0) rotate(0deg); }
50% { transform:translate3d(0, -12px, 0) rotate(-0.2deg); }
}
.tile img{
width:100%;height:100%;object-fit:cover;object-position:center;
filter:brightness(0.94);
transition:filter .5s var(--ease-out);
}
.tile:hover{
animation-play-state:paused;
filter:none !important;
z-index:10;
}
.tile:hover img{filter:brightness(1);}
/* (Cursor-following spotlight removed, the blur on neighbours is enough.) */
/* "View" reveal in bottom-right on hover, quiet pill, no amber */
.tile .peek-label{
position:absolute;bottom:14px;right:14px;
padding:7px 14px;
background:rgba(11,11,10,0.65);
border:1px solid rgba(238,232,220,0.18);
border-radius:999px;
font-family:var(--f-body);font-weight:500;font-size:10px;
letter-spacing:0.18em;text-transform:uppercase;color:var(--bone);
opacity:0;transform:translateY(6px);
transition:opacity .35s var(--ease-out),transform .4s var(--ease-out);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
z-index:5;
}
.tile:hover .peek-label{opacity:1;transform:translateY(0);}
.t-XL{grid-column:span 4;grid-row:span 2;aspect-ratio:16/10;}
.t-L{grid-column:span 3;grid-row:span 2;aspect-ratio:5/6;}
.t-W{grid-column:span 3;grid-row:span 1;aspect-ratio:16/10;}
.t-M{grid-column:span 2;grid-row:span 1;aspect-ratio:4/5;}
.t-T{grid-column:span 2;grid-row:span 2;aspect-ratio:4/6;}
.t-S{grid-column:span 2;grid-row:span 1;aspect-ratio:1/1;}
@media (max-width:980px){
.gallery-grid{grid-template-columns:repeat(4,1fr);}
.t-XL{grid-column:span 4;grid-row:span 1;aspect-ratio:16/10;}
.t-L{grid-column:span 4;grid-row:span 1;aspect-ratio:16/10;}
.t-W{grid-column:span 4;grid-row:span 1;aspect-ratio:16/10;}
.t-T{grid-column:span 2;grid-row:span 1;aspect-ratio:4/5;}
.t-M{grid-column:span 2;grid-row:span 1;aspect-ratio:4/5;}
.t-S{grid-column:span 2;grid-row:span 1;aspect-ratio:1/1;}
}
@media (max-width:540px){
.gallery-grid{grid-template-columns:1fr;}
.gallery-grid .tile{aspect-ratio:4/3 !important;grid-column:1 / -1 !important;grid-row:span 1 !important;}
}
@media (prefers-reduced-motion:reduce){
.tile.is-in{animation:none !important;}
.gallery-grid:has(.tile:hover){filter:none;}
.gallery-grid:has(.tile:hover) .tile:not(:hover){filter:none;transform:none;}
}
/* LIGHTBOX */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(8,8,7,0.96);backdrop-filter:blur(10px);display:none;flex-direction:column;align-items:center;justify-content:center;padding:60px 24px;animation:lbIn .35s var(--ease-out);}
.lightbox.is-open{display:flex;}
@keyframes lbIn{from{opacity:0;}to{opacity:1;}}
.lightbox-img-wrap{position:relative;max-width:min(94vw,1400px);max-height:calc(100vh - 180px);display:flex;align-items:center;justify-content:center;}
.lightbox-img{max-width:100%;max-height:calc(100vh - 180px);object-fit:contain;border-radius:4px;box-shadow:0 30px 80px rgba(0,0,0,0.6);}
.lightbox-close{position:absolute;top:20px;right:24px;width:46px;height:46px;border-radius:50%;background:rgba(11,11,10,0.85);border:1px solid rgba(238,232,220,0.18);color:var(--bone);display:grid;place-items:center;transition:background .25s,border-color .25s,color .25s,transform .25s;}
.lightbox-close:hover{background:var(--amber);border-color:var(--amber);color:var(--ink);transform:rotate(90deg);}
.lightbox-close svg{width:18px;height:18px;}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;border-radius:50%;background:rgba(11,11,10,0.85);border:1px solid rgba(238,232,220,0.18);color:var(--bone);display:grid;place-items:center;transition:background .25s,border-color .25s,color .25s;}
.lightbox-nav:hover{background:var(--amber);border-color:var(--amber);color:var(--ink);}
.lightbox-nav svg{width:18px;height:18px;}
.lightbox-prev{left:24px;}
.lightbox-next{right:24px;}
.lightbox-counter{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font-family:var(--f-body);font-weight:500;font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--bone-dim);padding:8px 16px;background:rgba(11,11,10,0.6);border-radius:999px;backdrop-filter:blur(8px);}
@media (max-width:720px){.lightbox{padding:48px 12px;}.lightbox-close{top:14px;right:14px;width:40px;height:40px;}.lightbox-nav{width:42px;height:42px;}.lightbox-prev{left:10px;}.lightbox-next{right:10px;}}
/* ADJACENT */
.adjacent{padding:clamp(50px,6vw,90px) 0 clamp(50px,6vw,80px);border-top:1px solid rgba(238,232,220,0.08);}
.adjacent .label{font-family:var(--f-body);font-size:11px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:var(--ash);margin-bottom:24px;}
.adjacent-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:720px){.adjacent-grid{grid-template-columns:1fr;}}
.adj-card{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:22px 26px;border:1px solid rgba(238,232,220,0.10);border-radius:6px;background:linear-gradient(180deg,rgba(28,26,23,0.5),rgba(18,18,16,0.4));transition:border-color .35s var(--ease-out),background .35s,transform .35s var(--ease-out);}
.adj-card:hover{border-color:rgba(226,106,44,0.45);transform:translateY(-2px);background:linear-gradient(180deg,rgba(28,26,23,0.7),rgba(18,18,16,0.55));}
.adj-card.is-prev{text-align:left;}
.adj-card.is-next{text-align:right;direction:rtl;}
.adj-card.is-next > *{direction:ltr;}
.adj-card .arrow{width:36px;height:36px;border-radius:50%;border:1px solid rgba(238,232,220,0.18);display:grid;place-items:center;color:var(--bone-dim);transition:border-color .35s,color .35s,background .35s;}
.adj-card:hover .arrow{border-color:var(--amber);color:var(--amber);}
.adj-card .arrow svg{width:14px;height:14px;}
.adj-card .text{min-width:0;}
.adj-card .dir{font-family:var(--f-body);font-size:10px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:var(--amber);}
.adj-card .name{font-family:var(--f-display);font-weight:360;font-size:18px;letter-spacing:-0.01em;color:var(--bone);margin-top:4px;}
/* BOTTOM CTA */
.bottom-cta{padding:clamp(60px,8vw,110px) 0;text-align:center;border-top:1px solid rgba(238,232,220,0.08);}
.bottom-cta h2{font-family:var(--f-display);font-weight:300;font-variation-settings:"opsz" 144,"SOFT" 60,"WONK" 1;font-size:clamp(34px,5vw,72px);line-height:1.02;letter-spacing:-0.028em;margin:0 0 14px;color:var(--bone);}
.bottom-cta h2 em{font-style:italic;color:var(--amber);font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1;}
.bottom-cta p{font-family:var(--f-body);color:var(--bone-dim);max-width:48ch;margin:0 auto 30px;line-height:1.6;}
.bottom-cta .cta{display:inline-flex;align-items:center;gap:14px;padding:18px 32px;background:var(--amber);color:var(--ink);border-radius:999px;font-family:var(--f-body);font-weight:600;font-size:13px;letter-spacing:0.06em;box-shadow:0 12px 32px rgba(226,106,44,0.30);transition:gap .35s,background .35s,transform .35s,box-shadow .35s;}
.bottom-cta .cta:hover{gap:20px;background:var(--amber-hot);transform:translateY(-2px);box-shadow:0 16px 40px rgba(226,106,44,0.40);}
.bottom-cta .cta svg{width:14px;height:14px;transition:transform .3s;}
.bottom-cta .cta:hover svg{transform:rotate(-45deg) translateX(2px);}
/* AUDIO TOGGLE */
@media (prefers-reduced-motion:reduce){.tile,.tile img,.adj-card{transition:none !important;}}
/* ===================== BEFORE / AFTER SLIDER =====================
Capped and centered so the whole comparison reads in one frame
(previously full-bleed, which forced scrolling to see it). */
.ba{position:relative;width:100%;max-width:720px;margin:0 auto;}
.ba-eyebrow{display:block;text-align:center;font-family:var(--f-body);font-size:10px;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;color:var(--amber);margin-bottom:14px;}
.ba-frame{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:10px;border:1px solid rgba(238,232,220,0.12);background:var(--ink-2);box-shadow:0 30px 80px rgba(0,0,0,0.45);cursor:ew-resize;touch-action:none;-webkit-user-select:none;user-select:none;}
.ba-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;pointer-events:none;}
.ba-after{z-index:1;}
.ba-before{z-index:2;clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0);}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;margin-left:-1px;background:var(--bone);box-shadow:0 0 0 1px rgba(11,11,10,0.25);z-index:4;pointer-events:none;}
.ba-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:var(--bone);color:var(--ink);display:grid;place-items:center;box-shadow:0 8px 22px rgba(0,0,0,0.45);}
.ba-grip svg{width:24px;height:24px;}
.ba-tag{position:absolute;top:14px;z-index:3;font-family:var(--f-body);font-size:10px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:rgba(11,11,10,0.66);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);color:var(--bone);pointer-events:none;}
.ba-tag-before{left:14px;}
.ba-tag-after{right:14px;color:var(--amber);}
.ba-frame:focus-visible{outline:2px solid var(--amber);outline-offset:3px;}
.ba-cap{margin:14px 0 0;font-family:var(--f-body);font-size:12px;letter-spacing:0.03em;color:var(--ash);text-align:center;}
.ba-cap b{color:var(--bone-dim);font-weight:600;}
@media (max-width:640px){.ba-frame{aspect-ratio:4/3;}}
/* ===================== SEE-MORE BUTTON ===================== */
.see-more-wrap{text-align:center;padding:clamp(34px,4vw,56px) 0 0;}
.see-more{display:inline-flex;align-items:center;gap:13px;padding:16px 30px;border-radius:999px;border:1px solid rgba(238,232,220,0.28);background:rgba(11,11,10,0.4);color:var(--bone);font-family:var(--f-body);font-weight:600;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;transition:gap .35s var(--ease-out),border-color .35s,color .35s;}
.see-more:hover{border-color:var(--amber);color:var(--amber);gap:18px;}
.see-more .cnt{color:var(--amber);}
.see-more svg{width:14px;height:14px;}
/* ===================== FULL PORTFOLIO (all.html) ===================== */
.full-hero{padding:clamp(54px,7vw,104px) 0 clamp(18px,2.5vw,34px);}
.full-hero h1{font-family:var(--f-display);font-weight:300;font-variation-settings:"opsz" 144,"SOFT" 40,"WONK" 1;font-size:clamp(46px,7vw,118px);line-height:0.98;letter-spacing:-0.032em;margin:16px 0 18px;max-width:16ch;color:var(--bone);}
.full-hero h1 em{font-style:italic;color:var(--bone-dim);font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1;}
.full-hero p{font-family:var(--f-body);font-size:clamp(15px,1.1vw,18px);line-height:1.65;color:var(--bone-dim);max-width:60ch;margin:0;}
.cat-nav{position:sticky;top:0;z-index:90;background:rgba(11,11,10,0.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-block:1px solid rgba(238,232,220,0.07);}
.cat-nav .inner{display:flex;gap:6px;overflow-x:auto;padding:12px var(--gutter);scrollbar-width:none;max-width:var(--wrap-max);margin-inline:auto;}
.cat-nav .inner::-webkit-scrollbar{display:none;}
.cat-nav a{flex:0 0 auto;padding:8px 15px;border-radius:999px;font-family:var(--f-body);font-weight:500;font-size:12px;letter-spacing:0.02em;color:var(--bone-dim);white-space:nowrap;transition:color .3s,background .3s;}
.cat-nav a:hover{color:var(--bone);background:rgba(238,232,220,0.06);}
.full-section{padding:clamp(46px,6vw,88px) 0;border-top:1px solid rgba(238,232,220,0.08);scroll-margin-top:58px;}
.full-section > .head{display:grid;grid-template-columns:auto 1fr auto;align-items:end;column-gap:clamp(16px,2.2vw,30px);row-gap:6px;margin-bottom:clamp(26px,3vw,42px);}
.full-section .head .fs-index{font-family:var(--f-display);font-style:italic;font-weight:300;font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1;font-size:clamp(36px,4.2vw,68px);line-height:0.7;letter-spacing:-0.04em;color:var(--amber);opacity:0.5;align-self:end;}
.full-section .head .fs-main{min-width:0;}
.full-section .head h2{font-family:var(--f-display);font-weight:300;font-variation-settings:"opsz" 144,"SOFT" 50,"WONK" 1;font-size:clamp(32px,4.4vw,60px);line-height:0.98;letter-spacing:-0.026em;margin:0;color:var(--bone);}
.full-section .head h2 em{font-style:italic;color:var(--amber);}
.full-section .head .fs-desc{font-family:var(--f-body);font-size:clamp(13px,0.95vw,15px);line-height:1.5;color:var(--ash);margin:9px 0 0;max-width:54ch;}
.full-section .head .count{font-family:var(--f-body);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ash);white-space:nowrap;align-self:end;padding-bottom:7px;}
@media (max-width:700px){
.full-section > .head{grid-template-columns:auto 1fr;}
.full-section .head .count{grid-column:2;justify-self:start;padding-bottom:0;}
}
.full-section .ba{margin:0 auto clamp(30px,3.4vw,48px);}
.full-grid .tile{transition:border-color .35s var(--ease-out),box-shadow .45s var(--ease-out);}
.full-grid .tile:hover{border-color:rgba(226,106,44,0.4);box-shadow:0 14px 34px rgba(0,0,0,0.4);}
/* Editorial hero stat row on the archive. */
.full-hero .stats{display:flex;flex-wrap:wrap;gap:22px 48px;margin-top:clamp(28px,3vw,42px);padding-top:clamp(20px,2.4vw,28px);border-top:1px solid rgba(238,232,220,0.08);}
.full-hero .meta-stat .num-val{font-family:var(--f-display);font-style:italic;font-weight:320;font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1;font-size:clamp(28px,2.8vw,44px);line-height:1;color:var(--amber);letter-spacing:-0.02em;}
.full-hero .meta-stat .lbl{font-family:var(--f-body);font-size:11px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:var(--ash);margin-top:7px;}
/* Masonry: small, natural-aspect thumbnails (no square crop, so the whole
photo reads and nothing looks zoomed in). */
.full-grid{columns:7;column-gap:9px;}
@media (min-width:1700px){.full-grid{columns:8;}}
@media (max-width:1200px){.full-grid{columns:5;}}
@media (max-width:900px){.full-grid{columns:4;}}
@media (max-width:640px){.full-grid{columns:3;}}
@media (max-width:420px){.full-grid{columns:2;}}
.full-grid .tile{break-inside:avoid;display:block;width:100%;margin:0 0 9px;aspect-ratio:auto;opacity:1;transform:none;animation:none !important;border-radius:5px;}
.full-grid .tile img{position:static;width:100%;height:auto;object-fit:contain;filter:brightness(0.96);}
.full-grid .tile.is-in{animation:none !important;}
/* Print: light ground, hide nav/lightbox chrome, keep the gallery legible. */
@media print{
html,body{background:#fff !important;color:#111 !important;cursor:auto !important;}
.nav,.lightbox,.skip-link{display:none !important;}
h1,h2,h3{color:#111 !important;}
a{color:#111 !important;}
.tile{break-inside:avoid;}
}
/* Touch devices: drop the custom SVG cursor (pointer-only flourish). */
@media (hover: none){
html, body, a, button, [data-hover], .tile, .adj-card{ cursor: auto !important; }
}
/* Sustainability nav link + footer credentials row (added with the sustainability page). */
.nav .nav-right{display:flex;align-items:center;gap:10px;}
.nav .nav-right .nlink{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border:1px solid rgba(238,232,220,0.20);border-radius:999px;font-family:var(--f-body);font-weight:500;font-size:12px;letter-spacing:0.04em;color:var(--bone);transition:background .35s var(--ease-out),color .35s,border-color .35s,gap .35s;}
.nav .nav-right .nlink:hover{background:var(--bone);color:var(--ink);border-color:var(--bone);gap:14px;}
@media (max-width:560px){ .nav .nav-right .lbl-long{display:none;} }
/* Featured-detail note in a category write-up (links to sustainability). */
.write-up .feature{margin-top:18px;padding-top:16px;border-top:1px solid rgba(238,232,220,0.10);font-size:14px;color:var(--ash);line-height:1.6;}
.write-up .feature b{color:var(--bone-dim);font-weight:600;}
.write-up .feature a{color:var(--amber);border-bottom:1px solid rgba(226,106,44,0.4);transition:border-color .25s;}
.write-up .feature a:hover{border-color:var(--amber);}