:root{
  /* black / gray / dark red / gold */
  --black:#0C0B0C;
  --panel:#141213;
  --gray:#E7E3DD;
  --red:#A31E2F;
  --red-deep:#7C1626;
  --gold:#C9A24B;
  --platinum:#ADA498;

  --dim:rgba(231,227,221,.55);
  --rule:rgba(231,227,221,.14);

  --sans:"Google Sans","Google Sans Text","Product Sans","Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"Google Sans Mono","Roboto Mono",ui-monospace,"SF Mono",monospace;

  --gut:clamp(18px,4vw,64px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--black);color:var(--gray);
  font-family:var(--sans);font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.6;
  background-image:
    linear-gradient(rgba(231,227,221,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(231,227,221,.05) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 70% at 50% 0%,#000,transparent 78%);
          mask-image:radial-gradient(120% 70% at 50% 0%,#000,transparent 78%);
}
.shell,.rail{position:relative;z-index:1}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- side rail ---------- */
.rail{
  position:fixed;left:0;top:0;bottom:0;width:46px;z-index:40;
  border-right:1px solid var(--rule);display:flex;align-items:center;justify-content:center;background:var(--black);
}
.rail span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:10px;font-weight:600;letter-spacing:.4em;text-transform:uppercase;color:var(--dim)}
.rail b{color:var(--gold)}
.shell{margin-left:46px}
@media(max-width:700px){.rail{display:none}.shell{margin-left:0}}

/* ---------- nav ---------- */
.nav{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:16px var(--gut);border-bottom:1px solid var(--rule);
  position:sticky;top:0;z-index:35;background:rgba(12,11,12,.9);backdrop-filter:blur(10px);
}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:30px;width:auto}
.brand span{font-size:15px;font-weight:700;letter-spacing:-.01em}
.nav ul{display:flex;gap:24px;list-style:none;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.nav li a{color:var(--dim);transition:color .25s}
.nav li a:hover,.nav li a[aria-current]{color:var(--gold)}

/* ---------- navigation ---------- */
.nav-toggle{
  display:none;align-items:center;gap:9px;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);
  border:1px solid var(--rule);padding:9px 13px;background:none;cursor:pointer;
}
.nav-toggle:hover{color:var(--gray);border-color:var(--gray)}
.nav-toggle .bars{display:grid;gap:3px;width:14px}
.nav-toggle .bars i{display:block;height:1.5px;background:currentColor;transition:transform .3s,opacity .3s}
.nav-toggle[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-4.5px) rotate(-45deg)}

.nav .menu{position:relative}
.nav li{position:relative}

/* the About dropdown */
.nav .sub-menu{
  /* Anchored to the parent's right edge so it opens inward. Left-
     anchoring pushed the panel past the viewport and widened the page,
     which a hidden element still does. */
  position:absolute;top:calc(100% + 14px);right:-18px;left:auto;
  display:block;min-width:230px;max-width:calc(100vw - 32px);gap:0;
  background:var(--panel);border:1px solid var(--rule);
  padding:8px 0;margin:0;z-index:60;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s,transform .22s,visibility .22s;
  box-shadow:0 18px 34px rgba(0,0,0,.55);
}
.nav .sub-menu::before{
  /* keeps the pointer inside the menu while crossing the gap */
  content:"";position:absolute;left:0;right:0;top:-14px;height:14px;
}
.nav .sub-menu a{text-align:right}
.nav li:hover > .sub-menu,
.nav li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav .sub-menu li{display:block}
.nav .sub-menu a{
  display:block;padding:11px 18px;color:var(--dim);
  font-size:10.5px;letter-spacing:.14em;line-height:1.4;white-space:nowrap;
}
.nav .sub-menu a:hover{color:var(--gold);background:rgba(231,227,221,.05)}

/* a parent gets a small marker so the dropdown is discoverable */
.nav .menu-item-has-children > a::after{
  content:"";display:inline-block;width:5px;height:5px;margin-left:8px;
  border-right:1.2px solid currentColor;border-bottom:1.2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .25s;
}
.nav .menu-item-has-children:hover > a::after{transform:translateY(0) rotate(225deg)}

@media(max-width:860px){
  .nav{flex-wrap:wrap}
  .nav-toggle{display:inline-flex}
  .nav .menu{
    display:none;flex-basis:100%;flex-direction:column;gap:0;
    border-top:1px solid var(--rule);margin-top:14px;padding-top:6px;
  }
  .nav.is-open .menu{display:flex}
  .nav .menu > li > a{display:block;padding:14px 0;border-bottom:1px solid var(--rule-2,rgba(231,227,221,.07))}
  .nav .sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;
    border:none;box-shadow:none;background:none;padding:0 0 8px 18px;
    min-width:0;max-width:none;
  }
  .nav .sub-menu a{text-align:left}
  .nav .sub-menu a{padding:10px 0}
  .nav .menu-item-has-children > a::after{float:right;margin-top:5px}
}

/* ---------- hero ---------- */
.hero{padding:clamp(40px,7vw,88px) var(--gut) 0}
.eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);
  display:flex;align-items:center;gap:14px;margin-bottom:clamp(18px,3vw,28px);
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--rule)}

.hero h1{
  font-size:clamp(58px,13.5vw,196px);font-weight:800;line-height:.82;
  letter-spacing:-.05em;text-transform:uppercase;
}
.hero h1 em{font-style:normal;font-weight:300;color:transparent;-webkit-text-stroke:1.5px var(--gray)}
.hero .role{
  margin-top:clamp(14px,2vw,22px);font-size:clamp(13px,1.5vw,17px);font-weight:600;
  letter-spacing:.02em;color:var(--dim);
}
.hero .role b{color:var(--gold);font-weight:700}

/* header image */
.header-img{
  position:relative;overflow:hidden;margin-top:clamp(24px,4vw,44px);
  aspect-ratio:2400/2000;max-height:86vh;background:var(--panel);border:1.5px solid var(--rule);
}
.header-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(12,11,12,.75));pointer-events:none}
.header-img img{
  width:100%;height:100%;object-fit:cover;
  /* Colour at rest, drains to black and white on hover. */
  filter:grayscale(0) contrast(1);
  transition:filter .55s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1);
}
.header-img:hover img,
.header-img:focus-within img{filter:grayscale(1) contrast(1.14)}
@media(hover:none){
  /* No hover on touch, so the photo simply stays in colour. */
  .header-img:hover img{filter:none}
}
.header-img .placeholder{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:rgba(231,227,221,.45)}
@media(max-width:640px){.header-img{aspect-ratio:5/6;max-height:none}}


/* ---------- footer ---------- */
footer{
  padding:26px var(--gut);border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;align-items:center;
  font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
}
footer img{height:22px;width:auto;opacity:.9}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .door{opacity:1;transform:none}
  html{scroll-behavior:auto}
}


/* ---------- additions for WordPress ---------- */
.skip{position:absolute;left:-9999px}
.skip:focus{position:fixed;left:12px;top:12px;z-index:999;background:var(--gray);color:var(--black);padding:12px 18px}
.nav ul{list-style:none}
.nav .current-menu-item > a{color:var(--red)}
.brand img{height:30px;width:auto}
.hero .header-img img{width:100%;height:100%;object-fit:cover;display:block}
.door .window img{width:100%;height:100%;object-fit:cover;display:block}

/* the two scene routes run full-screen with no page scroll */
body.ir-scene,body.ir-scene .shell{height:100%;overflow:hidden}
body.ir-scene footer{display:none}
body.ir-scene .nav{position:fixed;left:0;right:0;top:0;z-index:70;background:transparent;border-bottom:none;pointer-events:none}
body.ir-scene .nav a{pointer-events:auto}
body.ir-scene .rail{display:none}
body.ir-scene .shell{margin-left:0}
body.ir-scene main{height:100%}
body.ir-scene #scene,body.ir-scene #stage{z-index:1}

/* On the two scene routes the page already has its own header, so the
   site nav shrinks to a single monogram that gets you home. The scene's
   own top-left text is nudged clear of it rather than overlapped. */
body.ir-scene .nav{padding:0;justify-content:flex-start}
body.ir-scene .nav ul,
body.ir-scene .nav-toggle,
body.ir-scene .brand span{display:none}
body.ir-scene .brand{
	position:fixed;top:14px;left:16px;z-index:80;
	width:38px;height:38px;display:grid;place-items:center;
	background:rgba(12,11,12,.55);border:1px solid rgba(231,227,221,.28);
	border-radius:50%;backdrop-filter:blur(4px);
	transition:background .25s,border-color .25s,transform .25s;
}
body.ir-scene .brand:hover{background:rgba(12,11,12,.8);border-color:var(--gold);transform:scale(1.06)}
body.ir-scene .brand img{height:22px;width:auto}

/* keep each scene's own header clear of that button */
body.ir-tpl-dossier .hdr-left{padding-left:50px}
body.ir-tpl-bag header .eyebrow{margin-left:50px}
@media(max-width:520px){
	body.ir-scene .brand{width:32px;height:32px;top:10px;left:10px}
	body.ir-scene .brand img{height:18px}
	body.ir-tpl-dossier .hdr-left{padding-left:42px}
	body.ir-tpl-bag header .eyebrow{margin-left:42px}
}