/* lumaveron — colour-field system */
:root{
  --paper:#FFFFFF;
  --ink:#1A1A1F;
  --ink-2:#4A4A55;
  --hair:#D4D3D8;
  --hair-2:#E9E8EC;
  --ox:#7A1E2B;   --ox-m:#B97F85;
  --ul:#2A3FB0;   --ul-m:#8E9CCB;
  --oc:#C98A1B;   --oc-m:#E3C88F;
  --vi:#0E7C66;   --vi-m:#9CC9B8;
  --serif:"Gloock", "Times New Roman", serif;
  --sans:"Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --wall:1240px;
  --gut:clamp(16px, 4.6vw, 64px);
  --feather:clamp(14px, 2.2vw, 30px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.62 var(--sans);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:-.005em}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 14px;z-index:9}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--ul);outline-offset:3px}
.wall{max-width:var(--wall);margin:0 auto;padding:0 var(--gut)}

/* ---------- header ---------- */
.masthead{background:var(--paper);border-bottom:1px solid var(--hair);position:relative;z-index:5}
.masthead .wall{display:flex;align-items:center;justify-content:space-between;min-height:78px;gap:24px}
.brand{font-family:var(--serif);font-size:29px;line-height:1;text-decoration:none;color:var(--ink);letter-spacing:.005em}
.brand:hover{color:var(--ul)}
.catnav ul{list-style:none;margin:0;padding:0;display:flex;gap:clamp(18px,2.6vw,38px)}
.catnav a{text-decoration:none;font-size:16px;color:var(--ink);padding:6px 0;border-bottom:1px solid transparent}
.catnav a:hover{border-bottom-color:var(--ink)}
.catnav a[aria-current="page"]{border-bottom-color:currentColor}
.catnav li:nth-child(1) a[aria-current]{color:var(--ox)}
.catnav li:nth-child(2) a[aria-current]{color:var(--ul)}
.catnav li:nth-child(3) a[aria-current]{color:#8A5D0E}
.catnav li:nth-child(4) a[aria-current]{color:var(--vi)}
.burger{display:none;background:none;border:1px solid var(--hair);width:46px;height:42px;padding:0;cursor:pointer;position:relative}
.burger span{position:absolute;left:12px;right:12px;height:1.5px;background:var(--ink);transition:transform .25s ease,opacity .2s ease}
.burger span:nth-child(1){top:14px}.burger span:nth-child(2){top:20px}.burger span:nth-child(3){top:26px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- the field primitive ---------- */
/* Outer field: muted tone, feathered into the white wall with an inset
   shadow of the wall colour. Inner field: saturated tone, feathered into
   the muted tone with an inset shadow of that tone. No hue gradients. */
.field{--sat:var(--ul);--mut:var(--ul-m);--on:#fff;
  position:relative;display:flex;background:var(--mut);
  box-shadow:inset 0 0 var(--feather) calc(var(--feather)*.35) var(--paper);
  border-radius:3px}
.field__in{position:relative;flex:1;display:flex;flex-direction:column;background:var(--sat);color:var(--on);
  box-shadow:inset 0 0 var(--feather) calc(var(--feather)*.3) var(--mut);border-radius:2px}
.f-ox{--sat:var(--ox);--mut:var(--ox-m);--on:#fff}
.f-ul{--sat:var(--ul);--mut:var(--ul-m);--on:#fff}
.f-oc{--sat:var(--oc);--mut:var(--oc-m);--on:var(--ink)}
.f-vi{--sat:var(--vi);--mut:var(--vi-m);--on:#fff}
.field a{color:var(--on)}

/* ---------- hero (home) ---------- */
.hero{padding:clamp(56px,8vw,112px) 0 clamp(40px,6vw,80px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:end}
.kicker{font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin:0 0 22px}
.hero h1{font-size:clamp(44px,6.4vw,88px);line-height:1.02;margin:0 0 26px}
.standfirst{font-size:clamp(18px,1.6vw,21px);color:var(--ink-2);max-width:34ch;margin:0}
.hung{margin:0;padding:clamp(8px,2vw,24px) clamp(0px,2vw,28px) 0}
.frame{position:relative;aspect-ratio:1/1;border:1px solid #A9A8B0;background:transparent;overflow:hidden}
.frame::before,.frame::after{content:"";position:absolute;width:1px;height:clamp(20px,3vw,38px);background:#A9A8B0;top:calc(-1 * clamp(20px,3vw,38px));z-index:1}
.frame::before{left:22%}.frame::after{right:22%}
.frame img{display:block;width:100%;height:100%;object-fit:cover}
.frame__note{font-size:16px;color:var(--ink-2);line-height:1.45;padding:0 20px}
.frame__note b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(21px,2vw,26px);color:var(--ink);margin-bottom:6px}
.label{display:block;margin-top:16px;font-size:16px;line-height:1.5;color:var(--ink-2);border-left:1px solid var(--hair);padding-left:12px;max-width:36ch;margin-left:auto}
.label i{font-style:normal;color:var(--ink)}

/* ---------- section heads ---------- */
.sechead{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:end;padding-bottom:28px;border-bottom:1px solid var(--hair);margin-bottom:56px}
.sechead h2{font-size:clamp(32px,3.6vw,48px);line-height:1.05}
.sechead p{margin:0;color:var(--ink-2);max-width:56ch}

/* ---------- home category panels ---------- */
.fields{padding:clamp(24px,4vw,48px) 0 clamp(64px,8vw,112px)}
/* proportions are min-heights in container units, so text can never spill out of a field */
.panels,.strips,.catfield .wall,.mini{container-type:inline-size}
.panels{display:grid;gap:48px}
.panel{min-height:calc(100cqw * 7 / 16)}
.panel .field__in{padding:clamp(26px,3.6vw,52px) clamp(26px,4vw,60px);justify-content:space-between}
/* each panel hangs its inner field differently, like four canvases */
.panel.p1{padding:5% 34% 8.5% 5.5%}
.panel.p2{padding:7.5% 5.5% 5% 30%}
.panel.p3{padding:5.5% 9% 5.5% 9%}
.panel.p4{padding:8% 26% 5% 8%}
.p3 .field__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-rows:auto 1fr auto;column-gap:clamp(24px,4vw,64px)}
.p3 .field__in > .ord{grid-column:1/-1}
.p3 .field__in > div{display:contents}
.p3 h3{grid-column:1;grid-row:2/4;align-self:end;margin:0}
.p3 .desc{grid-column:2;grid-row:2;align-self:end}
.p3 .foot{grid-column:2;grid-row:3}
.ord{font-size:16px;letter-spacing:.16em;text-transform:uppercase;opacity:.92;margin:0 0 10px}
.panel h3{font-size:clamp(36px,4.6vw,64px);line-height:1;margin:0 0 14px}
.panel h3 a{text-decoration:none}
.panel h3 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.12em}
.panel .desc{font-size:clamp(16px,1.25vw,18px);max-width:48ch;margin:0}
.panel .foot{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:baseline;margin-top:22px;font-size:16px}
.panel .count{font-family:var(--serif);font-size:22px}
.panel .go{text-underline-offset:4px;text-decoration-thickness:1px}
.walllabel{display:flex;justify-content:space-between;gap:16px;font-size:16px;color:var(--ink-2);margin-top:12px;padding:0 2px}

/* ---------- how the index works ---------- */
.method{padding:clamp(56px,7vw,96px) 0;border-top:1px solid var(--hair)}
.method__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,5vw,80px)}
.method__aside h2{font-size:clamp(32px,3.6vw,48px);line-height:1.05;margin-bottom:18px}
.method__aside p{color:var(--ink-2);max-width:36ch}
.strips{display:grid;gap:28px}
.strip{min-height:calc(100cqw / 3);padding:4.5% 5%}
.strip:nth-child(2){margin-left:8%;min-height:calc(92cqw / 3)}
.strip:nth-child(3){margin-right:8%;min-height:calc(92cqw / 3)}
.strip .field__in{padding:clamp(18px,2.4vw,30px) clamp(20px,2.8vw,36px);justify-content:center}
.strip h3{font-size:clamp(24px,2.4vw,30px);line-height:1.1;margin-bottom:8px}
.strip p{margin:0;font-size:16px;max-width:52ch}

/* ---------- category pages ---------- */
.catfield{padding:clamp(32px,5vw,64px) 0 0}
.catpanel{min-height:calc(100cqw * 5 / 16);padding:4% 6% 5% 6%}
.catpanel .field__in{padding:clamp(24px,3.4vw,48px) clamp(26px,4vw,56px);justify-content:flex-end}
.catpanel h1{font-size:clamp(46px,6.6vw,92px);line-height:.98;margin:0 0 14px}
.catpanel .line{font-size:clamp(17px,1.4vw,20px);margin:0;max-width:60ch}
.crumb{font-size:16px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 auto;padding-bottom:18px}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline}
.cathung{padding:clamp(48px,6vw,80px) 0 0}
.cathung .hung{max-width:760px;margin:0 auto}
.intro{padding:clamp(48px,6vw,80px) 0 clamp(28px,3vw,40px)}
.intro__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,5vw,80px)}
.intro h2{font-size:clamp(28px,3vw,40px);line-height:1.08}
.intro .prose{max-width:62ch}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;padding-bottom:clamp(64px,8vw,104px)}
.card{border:1px solid var(--hair);background:var(--paper);display:flex;flex-direction:column}
.card.wide{grid-column:1/-1}
.card.wide .card__body{columns:2 300px;column-gap:48px}
.card.wide .card__body p{break-inside:avoid}
.card__strip{height:8px;background:var(--sat);
  box-shadow:inset 30px 0 16px -10px var(--paper),inset -30px 0 16px -10px var(--paper);margin:0 -1px}
.card__head{padding:28px 32px 0;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:20px;align-items:start}
.num{font-family:var(--serif);font-size:20px;line-height:1;color:var(--tone);border:1px solid currentColor;border-radius:2px;padding:9px 9px 8px;min-width:46px;text-align:center}
.card h2{font-size:clamp(26px,2.4vw,34px);line-height:1.08;margin:0 0 6px}
.loc{font-size:16px;color:var(--ink-2);margin:0}
.card__body{padding:22px 32px 4px}
.card__body p{font-size:17px}
.tags{list-style:none;margin:auto 0 0;padding:6px 32px 30px;display:flex;flex-wrap:wrap;gap:8px}
.tags li{font-size:16px;line-height:1.2;border:1px solid var(--hair);padding:6px 11px 7px;border-radius:2px;color:var(--ink)}
.t-ox{--sat:var(--ox);--tone:var(--ox)}
.t-ul{--sat:var(--ul);--tone:var(--ul)}
.t-oc{--sat:var(--oc);--tone:#8A5D0E}
.t-vi{--sat:var(--vi);--tone:var(--vi)}
.elsewhere{padding:0 0 clamp(64px,8vw,104px)}
.elsewhere h2{font-size:clamp(26px,2.6vw,34px);margin-bottom:24px}
.mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.mini .field{aspect-ratio:3/1;min-height:0;padding:5% 6%;text-decoration:none}
.mini .field__in{padding:14px 18px;justify-content:center}
.mini b{font-family:var(--serif);font-weight:400;font-size:clamp(20px,1.9vw,26px);line-height:1.1}
.mini span{font-size:16px}
.mini .field:hover b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.14em}

/* ---------- company pages ---------- */
.band{padding:clamp(28px,4vw,48px) 0 0}
.bandfield{padding:2.2% 3%}
.bandfield .field__in{padding:clamp(26px,3vw,40px) clamp(24px,3.4vw,48px)}
.bandfield h1{font-size:clamp(40px,5.2vw,72px);line-height:1}
.bandfield p{margin:10px 0 0;font-size:18px;max-width:60ch}
.longform{max-width:720px;margin:0 auto;padding:clamp(48px,6vw,80px) var(--gut) clamp(72px,9vw,120px)}
.longform h2{font-size:clamp(26px,2.6vw,32px);line-height:1.15;margin:2em 0 .6em}
.longform h2:first-child{margin-top:0}
.longform p,.longform li{font-size:18px;line-height:1.7}
.longform ul{padding-left:1.1em;margin:0 0 1.2em}
.longform li{margin-bottom:.4em}
.longform .meta{font-size:16px;color:var(--ink-2);border-top:1px solid var(--hair);padding-top:16px;margin-top:40px}
.longform a{text-underline-offset:3px;text-decoration-thickness:1px}
.mailblock{border:1px solid var(--hair);padding:24px 26px;margin:0 0 1.6em}
.mailblock a{font-family:var(--serif);font-size:clamp(24px,2.6vw,30px);text-decoration:none;border-bottom:1px solid var(--vi)}

/* ---------- footer ---------- */
.foot4{display:grid;grid-template-columns:repeat(4,1fr);height:6px}
.foot4 i{display:block}
.foot4 i:nth-child(1){background:var(--ox)}.foot4 i:nth-child(2){background:var(--ul)}
.foot4 i:nth-child(3){background:var(--oc)}.foot4 i:nth-child(4){background:var(--vi)}
.sitefoot{border-top:1px solid var(--hair);margin-top:10px;padding:56px 0 36px}
.sitefoot__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,3fr);gap:40px}
.sitefoot .brand{font-size:27px;display:inline-block;margin-bottom:14px}
.sitefoot p{color:var(--ink-2);max-width:40ch;font-size:16px}
.sitefoot h2{font-family:var(--sans);font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin:4px 0 14px}
.sitefoot ul{list-style:none;margin:0;padding:0}
.sitefoot li{margin-bottom:8px}
.sitefoot li a{text-decoration:none;font-size:16px}
.sitefoot li a:hover{text-decoration:underline}
.closing{margin-top:48px;padding-top:20px;border-top:1px solid var(--hair-2);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:16px;color:var(--ink-2)}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .hero__grid{grid-template-columns:1fr}
  .hung{max-width:680px}
  .panel.p1,.panel.p2,.panel.p3,.panel.p4{padding:6% 8% 9% 6%}
  .panel{min-height:calc(100cqw * 9 / 16)}
  .p3 .field__in{display:flex}
  .p3 .field__in > div{display:block}
}
@media (max-width:860px){
  .catnav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--hair)}
  .catnav.open{display:block}
  .catnav ul{flex-direction:column;gap:0;padding:8px var(--gut) 16px}
  .catnav li{border-top:1px solid var(--hair-2)}
  .catnav a{display:block;padding:14px 0;font-size:18px;border:0}
  .burger{display:block}
  .sechead,.method__grid,.intro__grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .card.wide .card__body{columns:1}
  .mini{grid-template-columns:1fr}
  .sitefoot__grid{grid-template-columns:1fr 1fr}
  .sitefoot__grid > div:first-child{grid-column:1/-1}
  .catpanel{min-height:340px}
}
@media (max-width:640px){
  :root{--feather:14px}
  .panel,.panel.p1,.panel.p2,.panel.p3,.panel.p4{min-height:calc(100cqw * 5 / 4);padding:9% 8% 13% 8%}
  .panel.p2{padding:13% 8% 9% 8%}
  .panel .field__in{padding:26px 22px}
  .panel h3{font-size:40px}
  .strip,.strip:nth-child(2),.strip:nth-child(3){min-height:0;margin:0;padding:6% 6%}
  .catpanel{min-height:calc(100cqw * 5 / 4);padding:8% 7% 11%}
  .catpanel .field__in{padding:24px 22px}
  .bandfield{padding:5% 5%}
  .card__head,.card__body{padding-left:22px;padding-right:22px}
  .tags{padding:6px 22px 24px}
  .walllabel{flex-direction:column;gap:2px}
  .frame::before,.frame::after{display:none}
  .sitefoot__grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}