/* GTHR Catering · Brand system · Stage 2 — Engine C (the Kolla brand-system engine), reskinned.
   Layout language: centred 1220px column, numbered chapters, kicker + serif h2 with an italic turn, fixed chapter
   label bottom-left, giant type specimen, horizontal drag strips, staggered gallery, scenes with text beside images. */
@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-italic.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'Jost';src:url('../fonts/jost-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Jost';src:url('../fonts/jost-italic.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'Amiri';src:url('../fonts/amiri-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Naskh';src:url('../fonts/notonaskh.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --olive:#4E462F;--moss:#A29244;--wine:#671E27;--walnut:#52311E;--espresso:#351105;--linen:#DBD3C7;--paper:#EFE8D8;--brass:#B08D57;
  --ink:#351105;--mute:rgba(53,17,5,.58);--line:rgba(53,17,5,.16);
  --serif:'Fraunces',Georgia,serif;--sans:'Jost',Helvetica,Arial,sans-serif;--ar:'Amiri',serif;--nk:'Naskh',serif;
  --gut:clamp(20px,6vw,96px);--ease:cubic-bezier(.16,1,.3,1);
  --world:var(--paper);--fg:var(--ink);
  --world-default:#EFE8D8;--world-paper:#EFE8D8;--world-linen:#E2DBCE;--world-olive:#4E462F;--world-espresso:#2B1A0F;--world-walnut:#4A2E1C;--world-wine:#5E1C24;
  --dark-worlds:olive espresso walnut wine;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--world);color:var(--fg);font-family:var(--sans);font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:clip;line-height:1.5;transition:background-color 1.1s var(--ease),color .6s var(--ease)}
body.ondark{--fg:#EFE8D8;--mute:rgba(239,232,216,.62);--line:rgba(239,232,216,.2)}
::selection{background:var(--olive);color:var(--paper)}
img,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
.wrap{max-width:1220px;margin:0 auto;padding:0 var(--gut)}
section{position:relative}
.k{font-size:10.5px;letter-spacing:.42em;text-transform:uppercase;font-weight:500}
.num{font-family:var(--serif);font-size:13px;letter-spacing:.3em;color:var(--mute);font-variation-settings:'opsz' 144}
h2.big{font-family:var(--serif);font-weight:280;font-size:clamp(36px,5.6vw,84px);line-height:1.02;letter-spacing:-.015em;margin-top:3vh;font-variation-settings:'opsz' 144}
h2.big em,h3.mid em,.it{font-style:italic}
h3.mid{font-family:var(--serif);font-weight:300;font-size:clamp(24px,2.7vw,40px);line-height:1.12;font-variation-settings:'opsz' 144}
p.body{font-size:clamp(14.5px,1.05vw,16.5px);line-height:1.75;max-width:34em}
.rv{opacity:0;transform:translateY(36px)}
.ln{overflow:hidden;display:block;padding-bottom:.16em;margin-bottom:-.16em}
.ln>span{display:block;transform:translateY(112%)}
.grain{pointer-events:none;position:fixed;inset:0;z-index:2000;opacity:.05;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ch{padding:clamp(80px,13vh,140px) 0}
.chhead{max-width:860px}
.chhead .k{margin-top:12px;display:block}
.chhead p.body{margin-top:3.2vh}
.cap{font-size:10px;letter-spacing:.3em;text-transform:uppercase;font-weight:500;color:var(--mute);margin-top:16px;line-height:1.7}
.sub-h{margin-top:9vh;display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:24px}
.sub-h h3{font-family:var(--serif);font-weight:300;font-size:clamp(22px,2.2vw,32px);line-height:1.15;font-variation-settings:'opsz' 144}
.sub-h p{font-size:13.5px;line-height:1.65;max-width:34em;color:var(--mute)}

/* ---------- loader: the four guests gather ---------- */
#pre{position:fixed;inset:0;z-index:1000;background:var(--paper);color:var(--olive);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:34px}
#pre svg{width:clamp(96px,13vh,132px);height:auto;overflow:visible}
#pre .g{opacity:0;transform:translate(var(--dx),var(--dy));transition:transform 1.1s var(--ease),opacity .6s ease}
#pre .d{transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .7s cubic-bezier(.34,1.56,.64,1)}
#pre.on .d{transform:scale(1)}
#pre.on .g{opacity:1;transform:none}
#pre.on .g.t{transition-delay:.12s}#pre.on .g.h{transition-delay:.24s}#pre.on .g.r{transition-delay:.36s}
#pre .meter{width:132px;height:1px;background:rgba(78,70,47,.2);position:relative;overflow:hidden}
#pre .meter i{position:absolute;inset:0;background:var(--olive);transform-origin:left;transform:scaleX(0)}
#pre .tag{font-size:10px;letter-spacing:.5em;text-transform:uppercase;font-weight:500;display:flex;gap:18px;align-items:center}
#pre .tag b{font-weight:500;font-variant-numeric:tabular-nums;min-width:2.4em;text-align:right;opacity:.6}

/* ---------- nav / chapter ---------- */
#nav{position:fixed;top:0;left:0;right:0;z-index:900;display:flex;align-items:center;justify-content:space-between;padding:18px var(--gut);pointer-events:none;color:var(--fg);transition:color .6s var(--ease)}
#nav>*{pointer-events:auto}
#nav::before{content:'';position:absolute;left:0;right:0;top:0;height:calc(100% + 22px);background-color:var(--bgnow,#EFE8D8);-webkit-mask-image:linear-gradient(#000 64%,transparent);mask-image:linear-gradient(#000 64%,transparent);transition:background-color 1.1s var(--ease);z-index:-1;pointer-events:none}
#nav .brand svg{height:24px;width:auto;display:block}
#nav ul{display:flex;gap:clamp(11px,1.35vw,22px);list-style:none;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;font-weight:500}
#nav ul a{opacity:.42;transition:opacity .3s}
#nav ul a.on,#nav ul a:hover{opacity:1}
#prog{position:fixed;top:0;left:0;height:2px;background:var(--fg);width:0;z-index:901}
#chap{position:fixed;bottom:22px;left:var(--gut);z-index:890;font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;font-weight:500;opacity:.55;pointer-events:none;color:var(--fg);transition:color .6s}
@media(max-width:1180px){#nav ul{display:none}}
@media(max-width:900px){#chap{display:none}}

/* ---------- hero ---------- */
#hero{min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;padding:96px var(--gut) 7vh;overflow:hidden}
#hero .top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;color:var(--mute)}
#hero .mark{flex:1;display:flex;align-items:center;justify-content:center;padding:3vh 0;color:var(--olive)}
#hero .mark svg{width:min(560px,78vw);height:auto;overflow:visible}
#hero .sub{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
#hero h1{font-family:var(--serif);font-weight:280;font-size:clamp(32px,4.6vw,70px);line-height:1.02;letter-spacing:-.015em;font-variation-settings:'opsz' 144}
#hero h1 em{font-style:italic}
#hero .cue{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.4em;text-transform:uppercase;font-weight:500;color:var(--mute)}
#hero .cue i{display:block;width:1px;height:46px;background:var(--ink);transform-origin:top;animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- horizontal strips ---------- */
.hs{position:relative;margin-top:7vh}
.hs .track{display:flex;gap:clamp(14px,2vw,30px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:6px var(--gut) 28px;cursor:grab;align-items:flex-end}
.hs .track::-webkit-scrollbar{display:none}
.hs .track.drag{cursor:grabbing;scroll-snap-type:none}
.hs .track.drag *{pointer-events:none}
.hs .item{flex:none;scroll-snap-align:center}
.hs .hint{padding:0 var(--gut);font-size:10px;letter-spacing:.3em;text-transform:uppercase;font-weight:500;color:var(--mute)}
.hs .hint::after{content:'  \2192'}
.zoom{display:block;border:0;background:none;padding:0;cursor:zoom-in;width:100%}

/* ---------- 01 idea ---------- */
.idea .item{width:min(78vw,400px);border:1px solid var(--line);border-radius:14px;padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;gap:18px;background:rgba(255,255,255,.28);align-self:stretch}
.idea .fig{height:clamp(170px,22vw,230px);display:flex;align-items:center;justify-content:center;position:relative;color:var(--olive)}
.idea .fig svg,.idea .fig img{max-height:100%;max-width:100%}
.idea .fig .stripe{width:100%;height:56%;border-radius:4px;background:url('../img/pattern/table-stripe-linen-on-olive.webp') 0 0/150px auto}
.idea h3{font-family:var(--serif);font-weight:300;font-size:clamp(21px,2vw,28px);line-height:1.15;font-variation-settings:'opsz' 144}
.idea p{font-size:13.5px;line-height:1.65;color:var(--mute)}
.idea .n{font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--mute);font-weight:500}
.ministack{width:100%;display:flex;flex-direction:column;gap:5px}
.ministack div{display:grid;grid-template-columns:1fr auto 1fr;column-gap:8px;align-items:start}
.ministack b{font-family:var(--serif);font-weight:280;font-size:clamp(30px,3vw,40px);line-height:.8;color:var(--olive);font-variation-settings:'opsz' 144}
.ministack i{font-style:normal;font-size:6.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;line-height:1.5;color:var(--ink)}
.ministack .l i{justify-self:end;text-align:right}.ministack .r i{justify-self:start}

/* ---------- 02 board ---------- */
.moodb{position:relative;width:100%;aspect-ratio:16/9;margin-top:7vh;border-radius:6px;overflow:hidden;background:url('../img/board/board-ground.webp') center/cover,#E8E1D3}
.moodb img{position:absolute;opacity:0;transform:translateY(24px) scale(.97)}
.moodb.play img{animation:drop .9s var(--ease) forwards;animation-delay:calc(var(--d) * 90ms)}
@keyframes drop{to{opacity:1;transform:none}}
.replaybtn{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font:500 10px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--fg);background:none;border:1px solid var(--line);border-radius:999px;padding:11px 16px;cursor:pointer}
.replaybtn:hover{border-color:var(--fg)}

/* ---------- 03 colour ---------- */
.bands{margin-top:5vh}
.band{display:flex;align-items:center;padding:clamp(16px,2.6vh,28px) 0;color:var(--ink)}
.band.dark{color:var(--paper)}
.band .wrap{width:100%;display:grid;grid-template-columns:.7fr 1.2fr .6fr;gap:3vw;align-items:center}
.band .cname{font-family:var(--serif);font-weight:300;font-size:clamp(24px,2.8vw,40px);line-height:1;font-variation-settings:'opsz' 144}
.band .crole{font-size:clamp(12.5px,.92vw,14.5px);line-height:1.55;max-width:32em}
.band .cdata{font-size:10px;letter-spacing:.14em;line-height:1.9;text-transform:uppercase;text-align:right}
.band .cdata b{font-weight:600;letter-spacing:.22em}
.pairs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:24px}
.pair{border-radius:10px;padding:18px 16px 14px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between}
.pair .aa{font-family:var(--serif);font-weight:280;font-size:52px;line-height:1;font-variation-settings:'opsz' 144}
.pair .aa em{font-style:italic}
.pair span{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;opacity:.8;line-height:1.6}
@media(max-width:820px){.band .wrap{grid-template-columns:1fr 1fr;gap:6px 16px}.band .crole{grid-column:span 2;order:3}}

/* ---------- 04 typography ---------- */
.type-display{font-family:var(--serif);font-weight:250;letter-spacing:-.03em;font-size:clamp(70px,14vw,210px);line-height:.88;margin-top:5vh;color:var(--olive);font-variation-settings:'opsz' 144}
.type-display em{font-style:italic}
.typerow{display:grid;grid-template-columns:1fr 1fr;gap:6vw;margin-top:6vh;padding-top:5vh;border-top:1px solid var(--line);align-items:start}
.typerow .fname{font-size:10px;letter-spacing:.34em;text-transform:uppercase;font-weight:500;color:var(--mute)}
.typerow .fs1{font-family:var(--serif);font-weight:280;font-size:clamp(30px,3.4vw,50px);line-height:1.1;margin-top:20px;font-variation-settings:'opsz' 144}
.typerow .fs1 em{font-style:italic}
.typerow .fs2{font-size:clamp(14.5px,1.25vw,17px);line-height:1.75;margin-top:20px;max-width:30em}
.typerow .fsa{font-family:var(--ar);font-size:clamp(40px,4.4vw,64px);line-height:1.3;margin-top:14px;direction:rtl;text-align:left}
.typerow .fsn{font-family:var(--nk);font-size:clamp(16px,1.4vw,20px);line-height:1.9;margin-top:14px;direction:rtl;text-align:left}
.abc{font-size:12px;letter-spacing:.2em;margin-top:18px;color:var(--mute);line-height:2.1}
.abc.ser{font-family:var(--serif);letter-spacing:.12em;font-size:14px}
@media(max-width:820px){.typerow{grid-template-columns:1fr;gap:5vh}}
.rules .item{width:min(82vw,420px)}
.rule .demo{aspect-ratio:4/3;border-radius:6px;display:flex;align-items:center;justify-content:center;padding:28px;position:relative;overflow:hidden}
.rule .meta{padding:16px 2px 0;border-bottom:1px solid var(--line);padding-bottom:16px}
.rule .meta .no{font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--mute);font-weight:500}
.rule .meta h4{font-family:var(--serif);font-weight:300;font-size:22px;line-height:1.15;margin-top:6px;font-variation-settings:'opsz' 144}
.rule .meta p{font-size:12.5px;line-height:1.6;color:var(--mute);margin-top:6px}
.d-paper{background:var(--paper);color:var(--olive);box-shadow:inset 0 0 0 1px rgba(53,17,5,.08)}
.d-olive{background:var(--olive);color:var(--linen)}
.d-linen{background:var(--linen);color:var(--olive)}
.d-wine{background:var(--wine);color:var(--linen)}
.d-moss{background:var(--moss);color:var(--espresso)}
.d-walnut{background:var(--walnut);color:var(--linen)}
.sr{font-family:var(--serif);font-weight:280;font-variation-settings:'opsz' 144}
.sr em{font-style:italic}
.tc{font-size:8px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;line-height:1.55}
.guide{position:absolute;left:0;right:0;border-top:1px dashed currentColor;opacity:.45}
.scale{width:100%;display:flex;flex-direction:column;gap:10px}
.scale div{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid rgba(219,211,199,.25);padding-bottom:8px}
.scale span{font-size:9px;letter-spacing:.2em;text-transform:uppercase;opacity:.75}

/* ---------- 05 logo ---------- */
.stage{margin-top:7vh;display:flex;flex-direction:column;align-items:center;color:var(--olive)}
.stage svg{width:min(520px,80vw);height:auto;overflow:visible}
.lgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:9vh;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.lgrid .cell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);aspect-ratio:1.18;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8% 10% 0;position:relative}
.lgrid .cell img{max-width:62%;max-height:56%;object-fit:contain}
.lgrid .cell.wide img{max-width:70%}
.lgrid .cell .cap{position:absolute;left:18px;bottom:14px;margin:0}
.lgrid .cell .no{position:absolute;left:18px;top:16px;font-size:9.5px;letter-spacing:.3em;color:var(--mute);font-weight:500}
@media(max-width:820px){.lgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.space{display:grid;grid-template-columns:1.1fr .9fr;gap:6vw;align-items:center;margin-top:10vh}
.space svg{width:100%;height:auto;color:var(--olive)}
.space .rows{border-top:1px solid var(--line)}
.space .rows div{display:grid;grid-template-columns:1fr auto;padding:16px 0;border-bottom:1px solid var(--line);font-size:13.5px;align-items:baseline}
.space .rows b{font-family:var(--serif);font-weight:300;font-size:20px;font-variation-settings:'opsz' 144}
.space .rows span{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);font-weight:500}
@media(max-width:820px){.space{grid-template-columns:1fr;gap:5vh}}
.oncol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6vw;align-items:center;margin-top:8vh}
.oncol figure{display:flex;flex-direction:column;align-items:center}
.oncol img{height:clamp(110px,14vw,190px);width:auto}
@media(max-width:820px){.oncol{grid-template-columns:1fr;gap:6vh}}

/* ---------- 06 drawings ---------- */
.icons{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.5vw,22px);margin-top:7vh}
.icn{display:flex;flex-direction:column;align-items:center;gap:10px}
.icn .c{aspect-ratio:1;width:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative}
.icn img{width:66%;transition:transform .5s var(--ease)}
.icn:hover img{transform:rotate(-6deg) scale(1.06)}
.icn span{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);font-weight:500;text-align:center}
.icn .new{position:absolute;top:4%;right:4%;font-size:8px;letter-spacing:.18em;text-transform:uppercase;background:var(--wine);color:var(--paper);border-radius:999px;padding:4px 7px;font-weight:500}
@media(max-width:820px){.icons{grid-template-columns:repeat(3,minmax(0,1fr))}}
.split{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:center;margin-top:10vh}
.split .txt h3{margin:12px 0 14px}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:5vh}}

/* ---------- 07 pattern ---------- */
.stripeband{height:clamp(120px,20vh,200px);margin-top:7vh;background:url('../img/pattern/table-stripe-linen-on-olive.webp') 0 0/clamp(150px,14vw,210px) auto}
.swatches .item{width:min(46vw,240px)}
.swatches .tile{aspect-ratio:3/4;border-radius:6px;background-size:150px auto;background-position:0 0}
.scatters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.6vw,22px);margin-top:4vh}
.scatters div{aspect-ratio:1;border-radius:6px;background-size:300px auto}
@media(max-width:820px){.scatters{grid-template-columns:1fr 1fr}}

/* ---------- 08 menu anatomy ---------- */
.anat{display:grid;grid-template-columns:1.2fr .8fr;gap:5vw;align-items:center;margin-top:7vh}
.anat .st{position:relative}
.anat .st img{width:100%;box-shadow:0 30px 60px -30px rgba(53,17,5,.35)}
.anat .pin{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--wine);color:var(--paper);font:500 11px/22px var(--sans);text-align:center;box-shadow:0 0 0 4px rgba(239,232,216,.75)}
.anat ol{list-style:none;counter-reset:a;display:grid;gap:12px}
.anat li{counter-increment:a;display:grid;grid-template-columns:30px 1fr;gap:10px;font-size:13.5px;line-height:1.55;padding-bottom:12px;border-bottom:1px solid var(--line)}
.anat li::before{content:counter(a,decimal-leading-zero);font-size:10.5px;letter-spacing:.1em;color:var(--wine);font-weight:500;padding-top:3px}
.anat li b{font-family:var(--serif);font-weight:300;font-size:17px;display:block;font-variation-settings:'opsz' 144}
@media(max-width:820px){.anat{grid-template-columns:1fr;gap:5vh}.anat .pin{width:20px;height:20px;margin:-10px 0 0 -10px;font-size:9px;line-height:20px}}
.art .item img{height:clamp(240px,40vh,440px);width:auto;max-width:none;filter:drop-shadow(0 24px 30px rgba(53,17,5,.18))}
.art.tall .item img{height:clamp(300px,52vh,560px)}
.art.flat .item img{height:clamp(220px,46vh,520px);border-radius:4px}
.origin{display:grid;grid-template-columns:1fr 1fr;gap:4vw;margin-top:10vh;align-items:start}
.origin figure img{width:100%;border-radius:4px;box-shadow:0 30px 60px -30px rgba(53,17,5,.38)}
.origin figure:nth-child(2){margin-top:10vh}
@media(max-width:820px){.origin{grid-template-columns:1fr}.origin figure:nth-child(2){margin-top:0}}

/* ---------- gallery ---------- */
.gallery{margin-top:9vh;display:grid;grid-template-columns:1fr 1fr;gap:9vh 5vw;align-items:start}
.g-item img{width:100%;height:auto;border-radius:4px;box-shadow:0 36px 60px -30px rgba(20,10,5,.42)}
.g-item:nth-child(even){margin-top:12vh}
.gallery.three{grid-template-columns:repeat(3,1fr);gap:7vh 3vw}
.gallery.three .g-item:nth-child(even){margin-top:0}.gallery.three .g-item:nth-child(3n+2){margin-top:9vh}
@media(max-width:820px){.gallery,.gallery.three{grid-template-columns:1fr;gap:6vh}.g-item:nth-child(even),.gallery.three .g-item:nth-child(3n+2){margin-top:0}}

/* ---------- scenes (text beside every image) ---------- */
.scenes{margin-top:8vh;display:flex;flex-direction:column;gap:12vh}
.scene{display:grid;grid-template-columns:1.25fr 1fr;gap:6vw;align-items:center}
.scene.rev{grid-template-columns:1fr 1.25fr}
.scene.rev .fig{order:2}
.scene .fig{overflow:hidden;border-radius:4px;aspect-ratio:4/5;background:#ccc;position:relative}
.scene .fig.land{aspect-ratio:3/2}
.scene .fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scene .txt h3{margin:12px 0 14px}
.scene .txt .note2{font-size:10px;letter-spacing:.3em;text-transform:uppercase;font-weight:500;color:var(--mute);margin-top:20px}
@media(max-width:820px){.scene,.scene.rev{grid-template-columns:1fr;gap:3vh}.scene.rev .fig{order:0}}

/* ---------- social ---------- */
.phones{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:3vw;margin-top:8vh}
.phones figure{display:flex;flex-direction:column;align-items:center}
.phones figcaption{margin-top:22px;text-align:center;max-width:260px}
.phones figcaption b{display:block;font-family:var(--serif);font-weight:300;font-size:21px;font-variation-settings:'opsz' 144}
.phones figcaption span{display:block;font-size:12.5px;line-height:1.55;color:var(--mute);margin-top:6px}
@media(max-width:1000px){.phones{grid-template-columns:1fr;justify-items:center;gap:8vh}}
.phone{position:relative;width:min(300px,78vw);aspect-ratio:393/852;background:#1a1a1a;border-radius:50px;border:8px solid #2a2a2a;box-shadow:inset 0 0 0 2px #3a3a3a,0 50px 100px -30px rgba(0,0,0,.5);overflow:hidden;flex:none}
.phone .island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:34%;height:28px;background:#000;border-radius:20px;z-index:20}
.phone .home{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:36%;height:5px;background:rgba(30,30,30,.4);border-radius:3px;z-index:20}
.phone .scr{position:absolute;inset:0;border-radius:42px;overflow:hidden;background:#fff}
.ig{position:absolute;inset:0;background:#fff;color:#111;display:flex;flex-direction:column;font-family:-apple-system,Helvetica,Arial,sans-serif;font-size:11px}
.ig .bar{height:48px;flex:none;display:flex;align-items:flex-end;justify-content:center;font-weight:700;font-size:12px;padding-bottom:6px}
.ig .hd{display:flex;align-items:center;gap:12px;padding:6px 14px 0}
.ig .av{width:62px;height:62px;border-radius:50%;padding:3px;background:linear-gradient(45deg,#A29244,#671E27,#4E462F);flex:none}
.ig .av div{width:100%;height:100%;border-radius:50%;border:2px solid #fff;background:var(--olive);display:flex;align-items:center;justify-content:center}
.ig .av img{width:58%}
.ig .who b{display:block;font-size:13px}.ig .who span{color:#666}
.ig .bio{padding:8px 14px 0;line-height:1.4}
.ig .btns{display:flex;gap:6px;padding:9px 14px 4px}
.ig .btns span{flex:1;background:#efefef;border-radius:8px;text-align:center;font-weight:600;padding:6px 0}
.ig .btns span:first-child{background:var(--olive);color:#fff}
.ig .hl{display:flex;gap:9px;padding:8px 14px 6px;overflow:hidden}
.ig .hl div{flex:none;width:48px;text-align:center;font-size:9px;color:#333}
.ig .hl i{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;margin:0 auto 4px;box-shadow:0 0 0 1px #ddd,inset 0 0 0 2px #fff}
.ig .hl i img{width:64%}
.ig .tabs{display:flex;border-bottom:1px solid #eee;margin-top:2px}
.ig .tabs i{flex:1;text-align:center;padding:6px 0;font-style:normal;font-size:13px;border-bottom:2px solid transparent}
.ig .tabs i:first-child{border-bottom-color:#111}
.ig .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;flex:1;overflow:hidden;align-content:start}
.ig .tiles div{aspect-ratio:4/5;overflow:hidden;background:#eee}
.ig .tiles img{width:100%;height:100%;object-fit:cover}
.ig .tiles.seam{column-gap:0}
.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 3vw;margin-top:10vh;border-top:1px solid var(--line)}
.pillar{padding:22px 0}
.pillar b{font-family:var(--serif);font-weight:300;font-size:clamp(19px,1.8vw,25px);display:block;font-variation-settings:'opsz' 144}
.pillar p{font-size:13px;line-height:1.6;margin-top:8px;color:var(--mute)}
@media(max-width:820px){.pillars{grid-template-columns:1fr}}

/* ---------- strips of photographs ---------- */
.photos .item{width:min(70vw,340px)}
.photos .item img{width:100%;border-radius:4px;box-shadow:0 30px 50px -28px rgba(20,10,5,.42)}

/* ---------- next / footer ---------- */
.steps{margin-top:7vh;border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:60px 1fr 1.3fr;gap:26px;padding:30px 0;border-bottom:1px solid var(--line);align-items:baseline}
.step .sn{font-size:11px;letter-spacing:.2em;color:var(--mute)}
.step .st{font-family:var(--serif);font-weight:300;font-size:clamp(20px,2vw,28px);font-variation-settings:'opsz' 144}
.step .sd{font-size:14px;line-height:1.7}
.step .sd ul{list-style:none;margin-top:12px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--mute);line-height:2.2;columns:2}
@media(max-width:820px){.step{grid-template-columns:36px 1fr;gap:14px}.step .sd{grid-column:2}.step .sd ul{columns:1}}
footer{padding:10vh var(--gut) 8vh;text-align:center;border-top:1px solid var(--line);color:var(--fg)}
footer svg{height:70px;width:auto;margin:0 auto 22px;display:block;color:var(--olive)}
footer .f1{font-family:var(--serif);font-weight:280;font-size:clamp(22px,2.2vw,30px);font-variation-settings:'opsz' 144}
footer .f1 em{font-style:italic}
footer .f2{font-size:10px;letter-spacing:.42em;text-transform:uppercase;font-weight:500;color:var(--mute);margin-top:3vh}

/* ---------- lightbox ---------- */
#lb{position:fixed;inset:0;z-index:3000;background:rgba(27,20,12,.94);display:none;align-items:center;justify-content:center;cursor:zoom-out}
#lb.on{display:flex}
#lb img{max-width:92vw;max-height:88vh;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.5);cursor:zoom-in;transition:transform .4s var(--ease)}
#lb.z img{transform:scale(1.8);cursor:zoom-out}
#lb button{position:absolute;background:rgba(239,232,216,.12);border:1px solid rgba(239,232,216,.3);color:#EFE8D8;width:46px;height:46px;border-radius:50%;cursor:pointer;font-size:18px;line-height:1}
#lb #lbx{top:22px;right:22px}#lb #lbp{left:22px;top:50%}#lb #lbn{right:22px;top:50%}
#lb .lbc{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:#EFE8D8;font-size:10px;letter-spacing:.3em;text-transform:uppercase}

@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.ln>span{transform:none}#hero .cue i{animation:none}.moodb img{opacity:1;transform:none;animation:none}}
.nojs .rv{opacity:1;transform:none}.nojs .ln>span{transform:none}.nojs #pre{display:none}.nojs .moodb img{opacity:1;transform:none}

@media(max-width:700px){
  .art .item img,.art.tall .item img,.art.flat .item img{height:auto;max-height:52vh;width:auto;max-width:84vw}
  #hero .top>*:last-child{display:none}
}