/* Swiss editorial: mono label rows frame flat color-field panels; extended caps for display, one weight of black ink */
:root{
  --ink:#000000;
  --paper:#FFFFFF;
  --sage:#BCC0B2;
  --sky:#C4D3D8;
  --butter:#ECDFAB;
  --muted:#55574F;
  --hair:rgba(0,0,0,0.85);
  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'Archivo','Helvetica Neue',Arial,sans-serif;
  --mono:'DM Mono','SFMono-Regular',Menlo,Consolas,monospace;
  --gutter:clamp(16px,4vw,56px);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink)}
body{font-family:var(--body);font-variation-settings:'wdth' 100;font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wrap{max-width:1440px;margin:0 auto;padding-inline:var(--gutter)}

/* type */
.mono{font-family:var(--mono);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;line-height:1.5}
.display{overflow-wrap:anywhere;font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 125;text-transform:uppercase;letter-spacing:-0.01em;line-height:0.95;text-wrap:balance;margin:0}
.d1{font-size:clamp(34px,8.4vw,128px)}
.d2{font-size:clamp(28px,6vw,88px)}
.d3{font-size:clamp(26px,3.4vw,44px)}
.lede{font-size:clamp(20px,2.3vw,30px);line-height:1.35;font-weight:400;text-wrap:pretty;margin:0}
.body{font-size:18px;line-height:1.6;font-weight:300;max-width:62ch;margin:0}
.light{font-weight:300}

/* header */
.site-head{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:24px}
.logo{display:block;width:clamp(150px,16vw,210px);color:var(--ink)}
.logo svg{display:block;width:100%;height:auto}
.nav{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;text-decoration:none;border:1px solid var(--ink);padding:9px 14px;background:transparent;color:var(--ink);cursor:pointer;min-height:40px}
.btn:hover{background:var(--ink);color:var(--paper)}

/* label rows and panels (from the moodboard) */
.row{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.rule{border-top:1px solid var(--hair)}
.panel{display:flex;flex-direction:column;gap:20px;padding:18px 20px;text-decoration:none;color:var(--ink)}
.panel .media{flex-grow:1;display:flex;align-items:center;justify-content:center;padding-block:clamp(24px,5vw,72px)}
.bg-sage{background:var(--sage)}.bg-sky{background:var(--sky)}.bg-butter{background:var(--butter)}.bg-paper{background:var(--paper)}.bg-ink{background:var(--ink);color:var(--paper)}
.framed{background:var(--paper);border:1px solid var(--ink)}

/* grids */
.grid{display:grid;gap:clamp(12px,2vw,24px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g6{grid-template-columns:repeat(6,minmax(0,1fr))}
.g12{grid-template-columns:repeat(12,minmax(0,1fr))}
.grid > *{min-width:0}

section{padding-block:clamp(64px,9vw,128px)}
.stack{display:flex;flex-direction:column}
.center{align-items:center;text-align:center}

/* footer */
.site-foot{padding-block:clamp(56px,7vw,96px) 32px}

@media (max-width:860px){
  .g4,.g6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3,.g2,.g12{grid-template-columns:minmax(0,1fr)}
  .g12 > *{grid-column:auto !important}
  .hide-sm{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* full-bleed moments */
html,body{overflow-x:clip}
.bleed,.split,.ticker{width:100vw;margin-inline:calc(50% - 50vw);position:relative}
figure.bleed img{width:100%;height:min(92vh,1100px);object-fit:cover;display:block}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
figure.split img{width:100%;height:min(92vh,1000px);object-fit:cover;display:block}
.cap{position:absolute;left:var(--gutter);right:var(--gutter);bottom:14px;display:flex;justify-content:space-between;gap:16px;color:#fff;mix-blend-mode:difference;pointer-events:none}
.ticker{overflow:hidden;background:var(--butter);border-block:1px solid var(--ink);padding-block:clamp(18px,3vw,40px)}
.ticker .track{background:var(--butter);display:flex;align-items:center;gap:clamp(28px,5vw,80px);width:max-content;animation:tick 70s linear infinite}
.ticker:hover .track{animation-play-state:paused}
.ticker .track img{height:clamp(84px,13vw,180px);width:auto;mix-blend-mode:multiply;flex:none}
@keyframes tick{to{transform:translateX(-50%)}}
@media (max-width:860px){.split{grid-template-columns:minmax(0,1fr)}.split img,figure.bleed img{height:72vh}}

@media (max-width:560px){.nav{gap:6px}.nav .btn{padding:7px 9px;min-height:36px;font-size:11px}}

/* experience: smart header, back to top, progress, reveals, previews */
.head-bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:var(--paper);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.head-bar.scrolled{box-shadow:0 1px 0 var(--hair)}
.head-bar.hide{transform:translateY(-110%)}
.head-bar .site-head{padding-block:14px}
.head-bar .mini{display:none}
.head-bar.scrolled .mini{display:block}.head-bar.scrolled .idx{display:none}
.totop{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:70;border:1px solid var(--ink);background:var(--paper);color:var(--ink);padding:10px 14px;min-height:40px;cursor:pointer;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s,transform .3s}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--ink);color:var(--paper)}
.progress{position:fixed;left:0;right:0;top:0;height:3px;background:var(--ink);transform-origin:0 50%;transform:scaleX(0);z-index:80;pointer-events:none}
.rv{opacity:0;transform:translateY(32px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
figure.settle{overflow:hidden}
figure.settle img{transform:scale(1.08);transition:transform 1.6s cubic-bezier(.2,.8,.2,1)}
figure.settled img{transform:none}
.pv{position:fixed;left:0;top:0;width:min(30vw,420px);z-index:55;pointer-events:none;opacity:0;scale:.92;transition:opacity .25s,scale .35s cubic-bezier(.2,.8,.2,1)}
.pv.on{opacity:1;scale:1}
.pv img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;box-shadow:0 18px 40px rgba(0,0,0,.18)}
.wrow .wn{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.wrow:hover .wn{transform:translateX(14px)}
.tile-img{overflow:hidden}
.tile-img img{transition:transform 1s cubic-bezier(.2,.8,.2,1)}
a.panel:hover .tile-img img{transform:scale(1.04)}
.gal img,.gal video{transition:filter .4s}
main{animation:pagein .6s ease both}
@keyframes pagein{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}figure.settle img{transform:none}.head-bar{transition:none}}