/* Archivo and Inter Tight, SIL Open Font License 1.1. Archivo Expanded is the web stand-in for Owners XWide named in the AWAKE guidelines. */
@font-face{font-family:"Archivo AWAKE";src:url("../fonts/archivo.woff2") format('woff2');font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo AWAKE";src:url("../fonts/archivo-italic.woff2") format('woff2');font-weight:100 900;font-stretch:62% 125%;font-style:italic;font-display:swap}
@font-face{font-family:"Inter Tight AWAKE";src:url("../fonts/inter-tight.woff2") format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
/* Layout. AWAKE: editorial pages in the spirit of a fashion proposal. One 12-column grid inside a constant
   3.5% margin; every chapter is one number, one title, one to three photographs and a few short lines, with a
   lot of white around them. Expanded Black for titles only; text set at normal width so it reads easily.
   Colour comes only from photographs.
   NOT JUST ABOUT FOOD: the festival's own sunlit palette and tight grotesk, in colour bands that bleed edge to edge. */
:root{
  /* AWAKE */
  --ink:#231F20;
  --paper:#FFFFFF;
  --night:#0D0D0E;
  --smoke:#7C7A7B;
  --smoke-ink:#666465;            /* smoke deepened for small text on paper */
  --hair:rgba(35,31,32,.16);
  /* NOT JUST ABOUT FOOD */
  --nj-green:#153A30;             /* vert profond */
  --nj-sage:#CEDAA7;              /* sauge */
  --nj-terra:#9D684C;             /* terracotta */
  --nj-terra-ink:#7F4F37;         /* terracotta deepened for small text on linen */
  --nj-linen:#E8E4D8;             /* lin */
  --nj-cream:#F2EFE7;
  --nj-olive:#171B18;             /* noir olive */
  --nj-hair:rgba(21,58,48,.3);
  --nj-hair-light:rgba(206,218,167,.38);

  --f:"Archivo AWAKE","Archivo","Arial",system-ui,sans-serif;
  --nj-f:"Inter Tight AWAKE","Inter Tight","Inter","Helvetica Neue",Arial,sans-serif;

  /* one spacing scale for the whole site */
  --m:max(16px,3.5vw,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px)); /* outer margin: 36pt on the 1008pt deck, clear of the notch */
  --gap:clamp(12px,1.6vw,28px);
  --s-s:14px;
  --s-m:clamp(20px,2vw,32px);
  --s-l:clamp(32px,3.4vw,56px);
  --s-xl:clamp(56px,6vw,100px);
  --s-sec:clamp(104px,11vw,190px);

  /* one type scale */
  --t-h1:clamp(46px,7.6vw,140px);  /* page titles */
  --t-h2:clamp(32px,5.4vw,96px);   /* chapter titles */
  --t-lead:clamp(19px,1.6vw,27px);
  --t-body:clamp(15px,1.05vw,17px);
  --t-label:clamp(11px,.78vw,12.5px);
  --t-meta:clamp(11px,.76vw,13px);
  --t-state:clamp(15px,1.5vw,27px);

  --ease:cubic-bezier(.7,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --nav-h:64px;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  color-scheme:light;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 12px)}
[hidden]:not([hidden=until-found i]){display:none!important}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f);font-stretch:100%;font-weight:400;
  font-size:var(--t-body);line-height:1.55;letter-spacing:.004em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility}
html[data-view="festival"] body{background:var(--nj-linen)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;font-stretch:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;letter-spacing:inherit}
p,h1,h2,h3,figure,dl,dd,blockquote{margin:0}
h1,h2,h3{font-weight:inherit;font-size:inherit}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:1.5px solid currentColor;outline-offset:4px}
::selection{background:var(--ink);color:var(--paper)}
.nw{white-space:nowrap}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- AWAKE type ---------- */
/* the brand's width lives in titles and small capitals; running text stays at normal width */
.t-lead{font-size:var(--t-lead);line-height:1.3;letter-spacing:-.004em;max-width:34ch;text-wrap:pretty}
.t-label,.k{font-size:var(--t-label);letter-spacing:.16em;line-height:1.45;text-transform:uppercase;font-stretch:125%}
.t-label{font-weight:500}
.k{font-weight:600}
.t-meta{font-size:var(--t-meta);letter-spacing:.05em;line-height:1.5;text-transform:lowercase;font-stretch:125%}
.t-quiet{color:var(--smoke-ink)}
.h-xl{font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:var(--t-h2);line-height:.9;letter-spacing:-.006em;text-wrap:balance}

/* ---------- photographs ---------- */
.ph{position:relative;overflow:hidden;background:var(--night);aspect-ratio:var(--ar,3/2);max-width:100%;margin:0}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transform:scale(var(--z,1));
  transition:transform 1.6s var(--ease-out),filter .7s var(--ease-out)}
.js .ph.pre img{--z:1.05}
.ph::after{content:"";position:absolute;inset:0;background-image:var(--grain);background-size:180px 180px;opacity:.14;
  mix-blend-mode:overlay;pointer-events:none}
.nj .ph::after{opacity:.08}

/* ---------- frame: nav, folio, curtain, menu ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:calc(env(safe-area-inset-top,0px) + 18px) var(--m) 16px;background:var(--paper);color:var(--ink);
  transition:transform .6s var(--ease),box-shadow .3s,background-color .4s}
html[data-view="festival"] .nav{background:var(--nj-linen);color:var(--nj-green)}
html[data-view="festival"] .nav-mark{color:var(--ink)}
.nav.hide{transform:translateY(-105%)}
.nav.lined{box-shadow:0 1px 0 var(--hair)}
.nav-mark{display:block;width:clamp(74px,6.2vw,96px);color:var(--ink)}
.nav-mark svg{display:block;width:100%;height:auto}
.nav-links{display:flex;align-items:center;gap:clamp(18px,2.8vw,48px)}
.nav-links a,.nav-cta,.menu-btn{font-size:var(--t-meta);font-stretch:125%;text-transform:uppercase;letter-spacing:.22em;line-height:1;position:relative;padding:6px 0}
.nav-links a::after,.nav-cta::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;transition:right .45s var(--ease-out)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after,.nav-cta:hover::after{right:0}
.menu-btn{display:none}
.folio-v{position:fixed;right:calc(var(--m) / 2);top:50%;z-index:40;writing-mode:vertical-rl;transform:translate(50%,-50%);
  font-size:10px;font-stretch:125%;letter-spacing:.3em;text-transform:lowercase;color:var(--ink);white-space:nowrap;pointer-events:none}
html[data-view="festival"] .folio-v{display:none}
.curtain{position:fixed;inset:0;z-index:100;background:var(--night);color:var(--paper);display:grid;place-items:center;
  transform:translateY(100%);visibility:hidden;pointer-events:none;font-stretch:125%}
.curtain.nj{background:var(--nj-green);color:var(--nj-sage)}
.curtain.in{visibility:visible;transform:translateY(0);transition:transform .6s var(--ease)}
.curtain.out{visibility:visible;transform:translateY(-100%);transition:transform .7s var(--ease)}
/* arriving from another page: the curtain is already down at first paint; the script lifts it once the page is set,
   and if the script never runs it lifts itself */
html.arrive .curtain{visibility:visible;transform:none;animation:curtain-lift .7s var(--ease) 2.4s both}
@keyframes curtain-lift{to{transform:translateY(-100%);visibility:hidden}}
.curtain-aw{display:grid;gap:14px;justify-items:center;width:min(300px,60vw)}
.curtain-aw svg{width:100%;height:auto}
.curtain-to{font-weight:300;font-style:italic;font-size:var(--t-state);letter-spacing:.04em}
.curtain-nj{display:none;font-family:var(--nj-f);font-stretch:100%;font-weight:800;text-transform:uppercase;letter-spacing:-.035em;
  line-height:.88;font-size:clamp(40px,7vw,110px);text-align:center}
.curtain.nj .curtain-aw{display:none}
.curtain.nj .curtain-nj{display:block}
.menu{position:fixed;inset:0;z-index:90;background:var(--night);color:var(--paper);
  padding:calc(env(safe-area-inset-top,0px) + 18px) var(--m) calc(env(safe-area-inset-bottom,0px) + 28px);
  display:flex;flex-direction:column;justify-content:space-between}
.menu-top{display:flex;justify-content:space-between;align-items:center}
.menu-top .nav-mark{color:var(--paper)}
.menu-links{display:grid;gap:clamp(10px,2.2vh,20px)}
.menu-links a{font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:clamp(22px,7vw,64px);line-height:.95;letter-spacing:0}
.menu-links a.nj-link{font-family:var(--nj-f);font-stretch:100%;font-weight:800;letter-spacing:-.03em;color:var(--nj-sage)}
.menu-links a span{display:block;font-family:var(--f);font-stretch:125%;font-weight:300;font-style:italic;text-transform:lowercase;
  font-size:var(--t-meta);letter-spacing:.08em;margin-top:6px;color:var(--smoke)}
.menu .t-meta{color:var(--paper)}

/* ---------- views, links, buttons ---------- */
.view{padding-inline:var(--m);padding-block:calc(var(--nav-h) + env(safe-area-inset-top,0px)) 0;overflow-x:clip;min-height:100vh}
.link-cta{font-size:var(--t-label);font-stretch:125%;text-transform:uppercase;letter-spacing:.18em;display:inline-flex;align-items:center;gap:.7em;white-space:nowrap}
.link-cta i{display:inline-block;width:28px;height:1px;background:currentColor;transition:width .5s var(--ease-out)}
.link-cta:hover i{width:48px}
.btn{display:inline-flex;align-items:center;gap:26px;min-height:52px;padding:0 22px;background:var(--ink);color:var(--paper);
  font-size:var(--t-label);font-stretch:125%;font-weight:500;text-transform:uppercase;letter-spacing:.18em;line-height:1;white-space:nowrap}
.btn i{display:inline-block;width:26px;height:1px;background:currentColor;transition:width .45s var(--ease-out)}
.btn:hover i{width:42px}

/* ---------- chapters: one number, one title, one idea ---------- */
.ch{padding-top:var(--s-sec)}
.ch-head{display:flex;align-items:baseline;gap:clamp(18px,2.6vw,48px);margin-bottom:var(--s-l)}
.ch-num{font-weight:250;font-stretch:125%;font-size:var(--t-h2);line-height:.9;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ch-title{min-width:0;font-weight:900;font-stretch:125%;font-size:var(--t-h2);line-height:.9;letter-spacing:-.006em;text-transform:uppercase}
.ch-intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);margin-bottom:var(--s-l)}
.ch-intro > *{grid-column:1 / span 6}
.ch-intro.two > :last-child{grid-column:9 / span 4;align-self:end;max-width:46ch}
.list + .contact{border-top:0;padding-top:0}
.ch-text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-m);min-width:0}
.ch-text > p:not(.t-lead){max-width:44ch}
/* photo and text side by side; .rev puts the text first, .narrow suits portrait photographs */
.duo{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:start}
.duo > .ph{grid-column:1 / span 7}
.duo > .ch-text{grid-column:9 / span 4}
.duo.rev > .ch-text{grid-column:1 / span 4;grid-row:1}
.duo.rev > .ph{grid-column:6 / span 7;grid-row:1}
.duo.narrow > .ch-text{grid-column:1 / span 5}
.duo.narrow > .ph{grid-column:8 / span 5}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:var(--s-l)}
.cols3 > li{border-top:1px solid var(--ink);padding-top:14px;display:grid;gap:8px;align-content:start}
.cols3 > li p{max-width:36ch}
.trio figure{display:grid;gap:12px;align-content:start}
.trio figcaption{display:grid;gap:4px}
.trio figcaption p{max-width:36ch}
.facts{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:clamp(20px,2.4vw,40px);row-gap:9px}
.facts dt{font-size:var(--t-label);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke-ink);padding-top:.28em}
.list{width:100%;border-top:1px solid var(--ink)}
.list li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:var(--gap);padding-block:13px;border-bottom:1px solid var(--hair);align-items:baseline}

/* ---------- HOME ---------- */
/* the cover reads from the top: the wordmark, club and festival in one line, the introduction,
   then AWAKE's two activities side by side, centred, with a hairline between them */
.cover{display:grid;padding-top:clamp(18px,2.4vw,40px)}
/* under the wordmark, a measured gap on wide screens; phones keep the brand's full clear space (see the phone rules) */
.cover-mark{display:block;color:var(--ink);margin-bottom:clamp(28px,3.6vw,64px)}
.cover-mark svg{display:block;width:100%;height:auto}
.cover-intro{display:grid;justify-items:center;gap:var(--s-m);text-align:center}
.cover-intro .t-lead{max-width:44ch}
/* club and festival in one line, either side of a hairline, the way the two doors sit below them */
.meta{position:relative;justify-self:stretch;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(40px,5vw,88px)}
.meta::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--hair)}
.meta > div{display:flex;gap:clamp(14px,1.6vw,28px);white-space:nowrap}
.meta > div:first-child{justify-self:end}
.meta > div:last-child{justify-self:start}
.meta dt,.meta dd{font-size:var(--t-label);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase}
/* the two doors share one subgrid, so names and captions line up whatever their length */
.doors{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(4,auto);
  column-gap:var(--gap);row-gap:var(--s-s);margin-top:var(--s-l);text-align:center}
.doors::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--hair)}
.door{display:grid;grid-row:span 4;grid-template-rows:subgrid;justify-items:center;align-content:start}
.door:first-child{grid-column:3 / span 4}
.door + .door{grid-column:7 / span 4}
.door .ph{--ar:4/5;width:100%}
.door-name{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;column-gap:.4em;row-gap:8px;font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:clamp(16px,1.5vw,27px);line-height:1;letter-spacing:0}
.door-nj .door-name{font-family:var(--nj-f);font-stretch:100%;font-weight:800;letter-spacing:-.03em;color:var(--nj-green);font-size:clamp(18px,1.7vw,30px)}
.door-name{align-self:baseline}
.door-name .by{flex-basis:100%;justify-content:center}
/* "by awake": the AWAKE signature set after the festival's name */
.by{display:inline-flex;align-items:center;gap:.4em;font-family:var(--f);font-stretch:125%;font-weight:300;font-style:italic;
  font-size:var(--t-meta);letter-spacing:.06em;text-transform:lowercase;color:var(--ink);line-height:1}
.by svg{height:.95em;width:auto;color:var(--ink)}
.row-name .by{display:flex;margin-top:.5em;font-size:clamp(14px,1.3vw,22px)}
.door-line{display:block;max-width:30ch;font-size:clamp(13px,.95vw,15px);line-height:1.45}
.door-cta{font-size:var(--t-label);font-stretch:125%;text-transform:uppercase;letter-spacing:.18em;white-space:nowrap;display:inline-flex;gap:.6em;align-items:center}
.door-cta i{display:inline-block;width:26px;height:1px;background:currentColor;transition:width .5s var(--ease-out)}
.door:hover .door-cta i,.door:focus-visible .door-cta i{width:44px}
.door:hover .ph img{--z:1.035}
.doors:has(.door:hover) .door:not(:hover) .ph img{filter:grayscale(1) brightness(.7)}
/* pointing at one world quietens the other */
.door :is(.door-name,.door-line,.door-cta){transition:opacity .6s var(--ease-out)}
.doors:has(.door:hover) .door:not(:hover) :is(.door-name,.door-line,.door-cta){opacity:.4}

.vision{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:end;margin-bottom:var(--s-l)}
.vision > .h-xl{grid-column:1 / span 7}
.vision > .t-lead{grid-column:9 / span 4}

/* the two worlds */
.rows{border-top:1px solid var(--ink);margin-top:var(--s-m)}
.row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);padding-block:var(--s-l);border-bottom:1px solid var(--hair);align-items:start}
.row-name{grid-column:1 / span 6;font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:clamp(30px,4.6vw,88px);line-height:.88;letter-spacing:0;transition:transform .7s var(--ease-out)}
.row-nj .row-name{font-family:var(--nj-f);font-stretch:100%;font-weight:800;letter-spacing:-.035em;color:var(--nj-green)}
.row-text{grid-column:7 / span 4;display:grid;gap:var(--s-s)}
.row-text > span:last-child{max-width:40ch}
.row-go{grid-column:11 / span 2;justify-self:end}
.row:hover .row-name{transform:translateX(clamp(8px,1vw,18px))}
.row:hover .link-cta i{width:48px}

/* ---------- PARTNERS cover, after the fashion proposal: three formats, one sentence, one giant word ---------- */
.pc{display:grid;gap:var(--s-l);padding-top:var(--s-m)}
.pc-formats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.pc-formats figure{display:grid;gap:12px;align-content:start}
.pc-formats figcaption{display:grid;gap:4px;align-content:start}
.pc-formats figcaption p{max-width:36ch;font-size:clamp(14px,.98vw,16px);line-height:1.45}
.pc-mid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:end}
.pc-mid > div{grid-column:1 / span 7;display:grid;gap:var(--s-s)}
.pc-mid > .btn{grid-column:9 / span 4;justify-self:end}
.pc-title{font-weight:900;font-stretch:125%;text-transform:uppercase;line-height:.8;letter-spacing:-.01em;overflow:hidden}
.pc-title .fill{display:inline-block;white-space:nowrap;font-size:clamp(46px,12vw,240px)}

/* ---------- CLUB cover: photograph, facts, title ---------- */
.cc{--cover-h:clamp(520px,calc(100vh - var(--nav-h) - 2 * var(--s-m)),900px);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);padding-top:var(--s-m)}
.cc-ph{grid-column:1 / span 7;aspect-ratio:auto;height:auto;min-height:var(--cover-h)}
.cc-text{grid-column:8 / span 5;padding-left:clamp(0px,1.6vw,28px);display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-m);min-height:var(--cover-h);min-width:0}
.cc-title{order:9;margin-top:auto;padding-top:var(--s-l);width:100%;font-weight:900;font-stretch:125%;text-transform:uppercase;
  font-size:var(--t-h1);line-height:.86;letter-spacing:-.01em}
.cc-text .facts{margin-top:var(--s-s)}

/* reservation / partnership block, shared by every page */
.invite{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:var(--s-l);border-top:1px solid var(--ink);padding-top:var(--s-l)}
.invite-col{grid-column:span 6;display:grid;gap:var(--s-s);align-content:start}
.invite h2{font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:clamp(24px,3.4vw,64px);line-height:.9;letter-spacing:0}
.invite p{max-width:42ch}
.contact{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px var(--gap);
  padding-top:16px;border-top:1px solid var(--hair)}
.ch-text .contact{width:100%}
.contact-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px}
.slot{font-size:var(--t-lead);letter-spacing:0;border-bottom:1px solid currentColor;padding-bottom:2px}
.contact-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-s) var(--s-l);margin-top:var(--s-m)}
.contact .contact-actions{margin-top:0;gap:var(--s-s) var(--s-m)}
.mail-xl{display:inline-block;max-width:100%;white-space:nowrap;font-size:clamp(30px,5.2vw,92px);line-height:1.05;letter-spacing:-.02em;
  border-bottom:2px solid currentColor;padding-bottom:.06em}
.mail-xl:hover{border-bottom-color:transparent}
.handle{text-transform:none;font-stretch:100%;letter-spacing:.01em;font-size:1.25em}
.copy{font-size:var(--t-label);font-stretch:125%;text-transform:uppercase;letter-spacing:.18em;border:1px solid currentColor;padding:9px 14px 8px;line-height:1}
.copy:hover{background:var(--ink);color:var(--paper)}

.foot{font-family:var(--f);font-stretch:125%;color:var(--ink);padding-block:var(--s-sec) calc(var(--m) + env(safe-area-inset-bottom,0px));padding-inline:var(--m);display:grid;gap:var(--s-xl)}
.foot-mark{width:min(400px,62vw);margin-inline:auto;color:var(--ink)}
.foot-mark svg{display:block;width:100%;height:auto}
.foot-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--gap);flex-wrap:wrap}
.foot-links{display:flex;gap:clamp(14px,2.4vw,40px);flex-wrap:wrap}
.foot-links a{font-size:var(--t-meta);text-transform:uppercase;letter-spacing:.22em}
.foot-links a:hover,.foot-contact a:hover{text-decoration:underline;text-underline-offset:5px}
.foot-contact{display:flex;flex-wrap:wrap;gap:6px clamp(14px,2.4vw,40px);font-size:var(--t-meta);letter-spacing:.05em}
.menu-contact{display:grid;gap:6px;font-size:var(--t-meta);font-stretch:125%;letter-spacing:.05em}

/* ---------- NOT JUST ABOUT FOOD ---------- */
.nj{background:var(--nj-linen);color:var(--nj-green);font-family:var(--nj-f);font-stretch:100%;letter-spacing:0;line-height:1.5;
  font-size:clamp(15px,1.1vw,18px)}
.nj ::selection{background:var(--nj-green);color:var(--nj-sage)}
.nj-bleed{margin-inline:calc(-1 * var(--m));padding-inline:var(--m)}
.nj-sec{padding-block:var(--s-sec) 0}
.nj-band{margin-top:var(--s-sec);padding-block:var(--s-xl)}
.nj-band + .nj-band{margin-top:0}
.nj-sage{background:var(--nj-sage);color:var(--nj-green)}
.nj-green{background:var(--nj-green);color:var(--nj-cream)}
.nj-green .nj-title,.nj-green .nj-mega{color:var(--nj-sage)}
.nj-title{font-weight:800;text-transform:uppercase;letter-spacing:-.04em;line-height:.88;font-size:clamp(38px,6.4vw,124px);text-wrap:balance}
.nj-kicker{font-weight:700;text-transform:uppercase;font-size:clamp(12px,.95vw,15px);letter-spacing:.01em;line-height:1.35}
.nj-lead{font-size:clamp(18px,1.6vw,26px);line-height:1.35;letter-spacing:-.01em;max-width:34ch}
.nj-label{font-weight:700;text-transform:uppercase;font-size:clamp(11px,.85vw,13px);letter-spacing:.02em;color:var(--nj-terra-ink)}
.nj-green .nj-label{color:var(--nj-sage)}
.nj-head{display:grid;gap:var(--s-s)}
.nj-head + *{margin-top:var(--s-l)}
.nj .link-cta{font-family:var(--nj-f);font-stretch:100%;font-weight:700;letter-spacing:.04em}

.nj-hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0;background:var(--nj-green);color:var(--nj-cream)}
.nj-hero-panel{grid-column:1 / span 7;display:grid;align-content:space-between;gap:var(--s-l);padding:var(--s-l) var(--gap) var(--s-l) 0;min-height:min(78vh,760px)}
.nj-hero > .ph{grid-column:8 / span 5;aspect-ratio:auto;height:100%;min-height:100%;max-width:none;margin-right:calc(-1 * var(--m))}
.nj-mega{font-weight:800;text-transform:uppercase;letter-spacing:-.045em;line-height:.84;font-size:clamp(52px,8.6vw,170px);color:var(--nj-sage)}
.nj-hero-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--s-s) var(--gap)}
.nj-by{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f);font-stretch:125%;font-weight:300;font-style:italic;
  font-size:clamp(14px,1.2vw,20px);letter-spacing:.04em;color:var(--paper)}
.nj-by svg{height:1.05em;width:auto;color:var(--paper)}

.nj-split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:start}
.nj-split > :first-child{grid-column:1 / span 6;display:grid;gap:var(--s-m);align-content:start}
.nj-split > :last-child{grid-column:8 / span 5}
.nj-table{border-top:1.5px solid currentColor}
.nj-table > div{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:var(--gap);padding-block:12px;border-bottom:1px solid var(--nj-hair);align-items:baseline}
.nj-table dt{font-weight:700;text-transform:uppercase;font-size:clamp(11px,.85vw,13px);letter-spacing:.02em}
.nj-table dd{text-align:right;text-transform:uppercase;font-weight:500;font-size:clamp(13px,1vw,16px);letter-spacing:.01em}

.nj-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.nj-pair figure{display:grid;gap:var(--s-s)}
.nj-pair .ph{--ar:4/3.1}
.nj-pair figcaption{display:grid;gap:4px}
.nj-pair h3{font-weight:800;text-transform:uppercase;letter-spacing:-.035em;line-height:.9;font-size:clamp(28px,3.6vw,64px)}

.nj-rows{border-top:1.5px solid currentColor}
.nj-rows > div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--gap);padding-block:8px;border-bottom:1px solid var(--nj-hair)}
.nj-rows dt{font-weight:700;text-transform:uppercase;font-size:clamp(11px,.85vw,13px);letter-spacing:.02em}
.nj-rows dd{font-weight:800;text-transform:uppercase;letter-spacing:-.035em;line-height:1;font-size:clamp(24px,3.1vw,54px);text-align:right}
.nj-food .ph{--ar:4/4.7}

.nj-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.nj-card{display:grid;gap:var(--s-s);align-content:start}
.nj-card .ph{--ar:4/5}
.nj-card h3{font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1;font-size:clamp(17px,1.5vw,26px)}
.nj-card p{font-size:clamp(14px,1vw,16px)}

.nj-vip{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:start}
.nj-vip > .ph{grid-column:1 / span 5;--ar:4/4.3}
.nj-vip-text{grid-column:7 / span 6;display:grid;gap:var(--s-l);align-content:start}
.nj-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.nj-two > div{display:grid;gap:8px;align-content:start}
.nj-two h3{font-weight:800;text-transform:uppercase;letter-spacing:-.035em;line-height:.95;font-size:clamp(22px,2.4vw,42px);color:var(--nj-sage)}
.nj-two .ph{--ar:2.25/1;margin-top:6px}

.nj-xps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);border-top:1.5px solid currentColor;padding-top:var(--s-m)}
.nj-xps h3{font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1;font-size:clamp(17px,1.5vw,26px);margin-bottom:8px}
.nj-note{margin-top:var(--s-l);font-weight:700;text-transform:uppercase;font-size:clamp(12px,.95vw,15px)}

.nj-join{display:grid;gap:var(--s-l)}
.nj-join .ph{--ar:2.24/1}
.nj-join .invite{border-top-color:var(--nj-sage);font-family:var(--nj-f)}
.nj-join .invite h2{font-family:var(--nj-f);font-stretch:100%;font-weight:800;letter-spacing:-.035em;color:var(--nj-sage)}
.nj-join .contact{border-top-color:var(--nj-hair-light)}
.nj-join .copy:hover{background:var(--nj-sage);color:var(--nj-green)}
.nj .t-label{font-family:var(--nj-f);font-stretch:100%;font-weight:700;letter-spacing:.02em}

/* ---------- motion: text rises as it is read, photographs unveil and drift, details answer the pointer ---------- */
/* on the home page, one wordmark at a time: the nav's waits until the big one has gone by (.past, set by the script) */
.nav-mark{transition:opacity .5s var(--ease-out)}
html.js[data-view="home"] .nav:not(.past) .nav-mark{opacity:0;pointer-events:none}

@media (prefers-reduced-motion:no-preference){
  /* until the script is ready, what will move waits out of sight; if the script never runs, it all simply appears */
  .js:not(.ready) :is(.rise,.fade,.stagger > *){opacity:0;animation:appear .6s 2.5s forwards}

  /* blocks: a short rise and a fade; what arrives together arrives one after the other (--d, set by the script) */
  .ready :is(.fade,.stagger > *){transition:opacity 1s var(--ease-out),translate 1.2s var(--ease-out);transition-delay:var(--d,0ms)}
  .ready :is(.fade,.stagger > *):not(.in){opacity:0;translate:0 26px}

  /* titles: each word rises from behind its own line, the wordmark letter by letter */
  .ready .rise .w{display:inline-block;clip-path:inset(-.6em -.4em -.16em -.4em)}
  .ready .rise .w > span{display:inline-block}
  .ready .rise :is(.w > span,.l){transition:translate 1.25s var(--ease-out);transition-delay:calc(var(--d,0ms) + var(--i,0) * 70ms)}
  .ready .rise:not(.in) :is(.w > span,.l){translate:0 120%}
  .ready .rise .by{transition:opacity 1s var(--ease-out) calc(var(--d,0ms) + 350ms)}
  .ready .rise:not(.in) .by{opacity:0}

  /* photographs unveil from the bottom, like the curtain, as they come into view: a cover the colour of the
     page lifts off them (a clip on the frame itself would hide it from the observer that reveals it) */
  .js .ph::before{content:"";position:absolute;inset:-1px;z-index:1;background:var(--under,var(--paper));
    transform:scaleY(0);transform-origin:top;transition:transform 1.3s var(--ease)}
  .js .ph.pre::before{transform:none;transition:none}
  .nj{--under:var(--nj-linen)}
  .nj-sage{--under:var(--nj-sage)}
  .nj-green{--under:var(--nj-green)}

  /* and drift slowly inside their frame as the page moves; the big wordmark sinks and fades */
  @supports (animation-timeline:view()){
    .ph{view-timeline:--ph block}
    .ph img{scale:1.08;animation:drift linear both;animation-timeline:--ph}
    .cover-mark svg{animation:sink linear both;animation-timeline:scroll(root);animation-range:0 85vh}
  }
}
@keyframes appear{to{opacity:1}}
@keyframes drift{from{translate:0 -3.5%}to{translate:0 3.5%}}
@keyframes sink{to{translate:0 38%;opacity:.2}}

/* the pointer: photographs lean in, lines draw themselves, lists make room */
@media (hover:hover){
  .ph:hover img,figure:hover > .ph img,.nj-card:hover .ph img{--z:1.03}
  .cols3 > li{position:relative}
  .cols3 > li::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:currentColor;
    transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease-out)}
  .cols3 > li:hover::before{transform:none}
  :is(.list li,.nj-table > div,.nj-rows > div) > :first-child{transition:translate .5s var(--ease-out)}
  :is(.list li,.nj-table > div,.nj-rows > div):hover > :first-child{translate:8px 0}
  .menu-links a{transition:translate .5s var(--ease-out)}
  .menu-links a:hover{translate:12px 0}
  .copy{transition:background-color .3s,color .3s}
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .folio-v{display:none}
  .door:first-child{grid-column:2 / span 5}
  .door + .door{grid-column:7 / span 5}
  .vision > .h-xl{grid-column:1 / -1}
  .vision > .t-lead{grid-column:1 / span 8}
  .duo > .ch-text{grid-column:8 / span 5}
  .duo.rev > .ch-text{grid-column:1 / span 5}
  .duo.rev > .ph{grid-column:6 / span 7}
  .ch-intro.two > :last-child{grid-column:8 / span 5}
  .row-name{grid-column:1 / span 7}
  .row-text{grid-column:8 / span 5}
  .row-go{grid-column:8 / span 5;justify-self:start}
  .nj-cards{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s-l)}
  .nj-hero-panel{grid-column:1 / span 7}
  .nj-vip > .ph{grid-column:1 / span 5}
  .nj-vip-text{grid-column:6 / span 7}
}
@media (max-width:860px){
  :root{--nav-h:58px}
  .nav-links,.nav-cta{display:none}
  .menu-btn{display:inline-block}
  .invite-col{grid-column:1 / -1}
  /* partners cover: title, sentence, then the formats */
  .pc-title{order:-2}
  .pc-mid{order:-1}
  .pc-mid > div,.pc-mid > .btn{grid-column:1 / -1;justify-self:start}
  /* club cover: title, photograph, then the facts */
  .cc{grid-template-columns:minmax(0,1fr);row-gap:var(--s-m)}
  .cc-text{display:contents;padding-left:0}
  .cc-title{order:-1;margin-top:0;padding-top:0}
  .cc-ph{grid-column:1 / -1;height:auto;min-height:0;aspect-ratio:var(--ar-m,4/4.4)}
  .cc-text > *{grid-column:1 / -1}
  /* chapters stack: photograph first, then the words */
  .duo{row-gap:var(--s-m)}
  .duo > .ph,.duo > .ch-text,.duo.rev > .ph,.duo.rev > .ch-text,.duo.narrow > .ph,.duo.narrow > .ch-text{grid-column:1 / -1;grid-row:auto}
  .duo.rev > .ph,.duo.narrow > .ph{order:-1}
  .ch-intro > *,.ch-intro.two > :last-child{grid-column:1 / -1}
  .cols3{grid-template-columns:minmax(0,1fr);row-gap:var(--s-m)}
  .vision > .t-lead{grid-column:1 / -1}
  .nj-hero{grid-template-columns:minmax(0,1fr)}
  .nj-hero-panel{grid-column:1 / -1;min-height:0;padding:var(--s-l) 0}
  .nj-hero > .ph{grid-column:1 / -1;margin-inline:calc(-1 * var(--m));height:auto;min-height:0;aspect-ratio:4/3.6}
  .nj-split > :first-child,.nj-split > :last-child{grid-column:1 / -1}
  .nj-vip > .ph,.nj-vip-text{grid-column:1 / -1}
  .nj-xps{grid-template-columns:minmax(0,1fr);row-gap:var(--s-m)}
}
@media (max-width:640px){
  .ph{aspect-ratio:var(--ar-m,var(--ar,3/2))}
  .ch-head{flex-direction:column;gap:4px}
  /* phones keep their cover: the wordmark's full clear space (the height of its lowercase a, 0.83 of the mark;
     mark ratio 6.439), club and festival in two lines */
  .cover-mark{margin-bottom:calc((100vw - 2 * var(--m)) * .1289)}
  .cover-intro .t-lead{max-width:30ch}
  .meta{justify-self:center;grid-template-columns:max-content max-content;column-gap:clamp(18px,2.4vw,40px);row-gap:6px;text-align:left}
  .meta::before{display:none}
  .meta > div{display:contents}
  /* the two doors stay side by side: each name on two lines */
  .doors{margin-top:var(--s-l);row-gap:12px}
  .door:first-child{grid-column:1 / span 6}
  .door + .door{grid-column:7 / span 6}
  .door-name .nm > span{display:block}
  .door-line{font-size:12.5px}
  .row{grid-template-columns:minmax(0,1fr);row-gap:var(--s-s)}
  .row-name,.row-text,.row-go{grid-column:1 / -1}
  .list li{grid-template-columns:minmax(0,1fr);gap:2px}
  .pc-formats{grid-template-columns:minmax(0,1fr);row-gap:var(--s-m)}
  .pc-formats figure{grid-template-columns:clamp(84px,26vw,120px) minmax(0,1fr);column-gap:14px}
  .contact{flex-direction:column;align-items:flex-start}
  .foot-row{flex-direction:column;align-items:flex-start;gap:16px}
  .nj-pair{grid-template-columns:minmax(0,1fr);row-gap:var(--s-l)}
  .nj-cards{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:12px}
  .nj-two{grid-template-columns:minmax(0,1fr);row-gap:var(--s-m)}
  .nj-table > div{grid-template-columns:minmax(0,1fr)}
  .nj-table dd{text-align:left}
  .nj-rows > div{flex-direction:column;align-items:flex-start;gap:2px}
  .nj-rows dd{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .ph.pre img{--z:1}
}