/* =========================================================
   Ayman Halabi
   Every length below is a mock-up pixel converted to --u.
   1u = 1% of the 1536px mock-up width, capped by height so
   the whole 1536x1024 composition always fits one screen.
   ========================================================= */
:root{
  --u: min(1vw, 1.5vh);   /* svh below, where supported */

  --bg:      #060706;
  --white:   #f6f3ec;
  --grey:    #ddd7ca;
  --gold:    #d8b36a;
  --gold-lt: #e0c080;
  --gold-dk: #b8925a;
  --red:     #a32423;
  --red-lt:  #d4553d;

  --display: "Cormorant Garamond", Georgia, serif;
  --text:    "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
}

@supports (height:1svh){ :root{ --u: min(1vw, 1.5svh); } }

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--white);
  font-family:var(--text);
  overflow:hidden;                 /* one screen, never scrolls */
  -webkit-font-smoothing:antialiased;
}
img{ display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2{ margin:0; font-weight:400; }
p,figure,blockquote{ margin:0; }

/* the 1536 x 1024 stage, centred in the window ------------- */
.stage{
  position:relative;
  width:calc(var(--u) * 100);
  height:calc(var(--u) * 66.667);
  margin:0 auto;
  top:50%; transform:translateY(-50%);
}
/* photographs bleed to the window edge, behind the stage */
.bleed{ position:fixed; inset:0; z-index:0; overflow:hidden; }

/* ---------------------------------------------------------
   NAV   mock-up: bar 0-96,  logo x43-124 y10-92,
                  links x346-1385 cap-height y50-60
   --------------------------------------------------------- */
.nav{
  position:absolute; left:0; right:0; top:0;
  height:calc(var(--u) * 8.2);
  display:flex; align-items:center; z-index:5;
}
/* the mark is stamped on the page like a seal, and a slow
   glint travels across the gold every few seconds          */
.nav__logo{
  position:absolute; left:calc(var(--u) * 1.4); top:calc(var(--u) * 0.4);
  width:calc(var(--u) * 10.4); aspect-ratio:1; display:block;
  overflow:visible;
  animation:markIn 1.8s var(--ease) both;
  transition:transform 1.6s var(--ease);
}
.brand-link:hover .nav__logo{ transform:rotate(90deg); }

.nav__links{
  position:absolute; left:calc(var(--u) * 17.5); right:calc(var(--u) * 2.8);
  top:calc(var(--u) * 3.5);
  display:flex; justify-content:space-between; align-items:center;
}
.nav__links a{
  font-family:var(--text); font-weight:500;
  font-size:calc(var(--u) * 1.12);
  line-height:1;
  letter-spacing:0.13em; text-transform:uppercase;
  color:var(--grey); white-space:nowrap;
  padding:calc(var(--u) * 0.6) 0;
  transition:color .3s ease;
}
.nav__links a:hover{ color:var(--gold-lt); }
.nav__links a[aria-current="page"]{ color:var(--white); position:relative; }
.nav__links a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0.19em;
  bottom:calc(var(--u) * 0.15); height:1px; background:var(--red);
}

/* ---------------------------------------------------------
   CHAPTER PAGES
   mock-up: number x84 y164-190 · rule y336 x83-182
            title x84 cap y222-276
            lead  x84 rows 395/441 (lh 46)
            body  x84 rows 508/551/594 (lh 43)
            quote x137 rows 699/748/797/847 (lh 49)
   --------------------------------------------------------- */
/* --- the still lifes: the full frame, feathered into the page --- */
.photo--bleed{
  position:absolute; z-index:0;
  left:calc(var(--u) * 43.359);
  right:calc((100vw - var(--u) * 100) / -2);
  top:calc((100vh - var(--u) * 66.667) / -2);
  bottom:calc((100vh - var(--u) * 66.667) / -2);
  overflow:hidden;
}
.photo--bleed .plate{ display:block; width:100%; height:100%; padding:0;
                      background:none; border:0; box-shadow:none;
                      animation:fade 2s ease both .2s; }
.photo--bleed img{
  width:100%; height:100%; object-fit:cover;
  object-position:var(--focus, 50% 50%);
  animation:settle 2.4s var(--ease) both;
}
.photo--bleed img[style*="scaleX(-1)"]{ animation-name:settleFlip; }
.photo--bleed::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(6,7,6,.9) 0%, rgba(6,7,6,.45) 7%,
      rgba(6,7,6,0) 14%, rgba(6,7,6,0) 88%, rgba(6,7,6,.5) 100%),
    linear-gradient(90deg,
      var(--bg) 0%, rgba(6,7,6,.92) 8%, rgba(6,7,6,.62) 19%,
      rgba(6,7,6,.28) 30%, rgba(6,7,6,0) 44%);
}

/* --- his portraits: a small mounted print in a gold frame,
       never scaled past its own resolution, with a glint
       travelling round the mount                              --- */
.photo--plate{
  position:absolute; z-index:0;
  left:calc(var(--u) * 43.359); right:calc(var(--u) * 4);
  top:50%; transform:translateY(-50%);
  height:calc(var(--u) * 34);
  display:flex; align-items:center; justify-content:center;
}
.photo--plate .plate{
  position:relative; display:block; height:100%; box-sizing:border-box;
  padding:calc(var(--u) * .72);
  overflow:hidden;
  background:linear-gradient(152deg,#7a5c2a 0%,#c9a24a 26%,#f2e0b0 46%,
             #b98f3f 62%, #8a6733 80%, #d8b877 100%);
  box-shadow:0 calc(var(--u) * 1.5) calc(var(--u) * 4.4) rgba(0,0,0,.68),
             0 0 calc(var(--u) * 2.2) rgba(215,161,101,.16);
  animation:fade 2s ease both .25s;
}
.photo--plate .plate::before{          /* the glint on the frame */
  content:""; position:absolute; top:-40%; left:0; width:42%; height:180%;
  background:linear-gradient(102deg, rgba(255,250,232,0) 0%,
    rgba(255,250,232,.92) 50%, rgba(255,250,232,0) 100%);
  transform:translateX(-180%) rotate(9deg);
  animation:glint 8s cubic-bezier(.5,0,.35,1) infinite 3s;
}
.photo--plate img{
  position:relative; z-index:1;
  display:block; height:100%; width:auto; max-width:100%;
  object-fit:cover; object-position:var(--focus, 50% 50%);
  box-shadow:0 0 0 1px rgba(6,7,6,.75);
  animation:settle 2.4s var(--ease) both .3s;
}
.photo--plate img[style*="scaleX(-1)"]{ animation-name:settleFlip; }
.chapter .stage{ z-index:1; }

.copy{
  position:absolute;
  left:calc(var(--u) * 5.469);
  top:calc(50% + var(--u) * 4.1);        /* centred below the mark */
  width:calc(var(--u) * 36);
}
.num{
  font-family:var(--display);
  font-size:calc(var(--u) * 2.539);      /* 39px */
  line-height:1; letter-spacing:.09em; color:var(--gold);
}
/* the small rule that separates thoughts inside a chapter */
.num-rule{
  display:block; width:calc(var(--u) * 3.255); height:1px;
  background:var(--gold-dk); margin:calc(var(--u) * 2.4) 0;
}
.title{
  width:max-content; max-width:100%;
  font-family:var(--display); font-weight:600;
  font-size:calc(var(--u) * 5.273);      /* 81px */
  line-height:1.06; letter-spacing:.018em; text-transform:uppercase;
  color:var(--gold-lt);
  background:linear-gradient(100deg,#f0dcae,#d8b36a 52%,#e8cf9c);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.title-rule{
  display:block; width:calc(var(--u) * 6.445); height:1px;
  background:var(--gold-dk);
  margin:calc(var(--u) * 2.865) 0 calc(var(--u) * 3.223);
}
.lead{
  font-family:var(--display); font-weight:500;
  font-size:calc(var(--u) * 2.6);
  line-height:calc(var(--u) * 3.1);
  color:var(--white); letter-spacing:.004em;
}
.lead--italic{ font-style:italic; font-weight:500; color:var(--gold-lt); }
.lead + .lead{ margin-top:calc(var(--u) * 2.2); }
.body{
  font-family:var(--text); font-weight:400;
  font-size:calc(var(--u) * 1.62);
  line-height:calc(var(--u) * 2.72);
  color:var(--grey); letter-spacing:.002em;
  margin-top:calc(var(--u) * 1.9);
}
.quote{
  position:relative; margin-top:calc(var(--u) * 3.841);
  padding-left:calc(var(--u) * 3.451);   /* text x137 vs block x84 */
  font-family:var(--display); font-style:italic; font-weight:500;
  font-size:calc(var(--u) * 2.12);
  line-height:calc(var(--u) * 3.190);
  color:var(--gold-lt);
}
.quote::before{
  content:"\201C"; position:absolute; left:0; top:calc(var(--u) * -0.9);
  font-size:calc(var(--u) * 4.2); line-height:1;
  font-style:normal; color:var(--red);
}
.quote cite{
  display:block; margin-top:calc(var(--u) * 1.2);
  font-family:var(--text); font-style:normal; font-weight:500;
  font-size:calc(var(--u) * 1.0); letter-spacing:.13em;
  text-transform:uppercase; color:var(--gold-dk);
}
.quote cite i{ font-style:italic; text-transform:none; letter-spacing:.04em; }

.glyph{ display:block; width:calc(var(--u) * 2.6); height:calc(var(--u) * 2.6);
        color:var(--gold); margin:calc(var(--u) * 2.2) 0 0; }
.services{ margin-top:calc(var(--u) * 1.2); display:grid; gap:calc(var(--u) * 1.5); }
.services li{
  display:flex; align-items:center; gap:calc(var(--u) * 1.1);
  font-family:var(--text); font-weight:400;
  font-size:calc(var(--u) * 1.42); color:var(--white); letter-spacing:.01em;
}
.services svg{ width:calc(var(--u) * 1.9); height:calc(var(--u) * 1.9);
               color:var(--gold); flex:none; }
.soon{
  font-family:var(--display); font-style:italic; font-weight:500;
  font-size:calc(var(--u) * 2.05); color:var(--gold-lt);
  margin-top:calc(var(--u) * 2.2);
}
.ornament{ display:flex; align-items:center; gap:calc(var(--u) * .9);
           width:calc(var(--u) * 11.5); margin-top:calc(var(--u) * 3.4); }
.ornament span{ flex:1; height:1px; background:var(--gold-dk); }
.ornament .orn{ width:calc(var(--u) * 1.9); aspect-ratio:1; flex:none; }

/* per-page fit: chapters whose mock-up carries more copy ---- */
.copy{ transform-origin:left center;
       transform:translateY(-50%) scale(var(--s,1)); }

/* ---------------------------------------------------------
   HOME  — every rectangle measured from home.png
   photo 0,96 → 803,518 · panel 803,96 → 1536,427
   tiles 666,427 → 1536,684 · stats 0,518 → 666,684
   band  0,684 → 1536,956 (391 | 795 | 1225) · footer 956 → 1024
   --------------------------------------------------------- */
/* =========================================================
   HOME — one margin all round, two rows, four columns.
   Everything begins and ends on the same lines:
   left edge 2.8u · right edge 97.2u
   row 1  9.6u → 44u   ·   row 2  45.6u → 61u
   ========================================================= */
.home{ background:var(--bg); }
.home .stage{ z-index:1; background:var(--bg); }

/* --- row 1, left: the portrait, mounted like everything else --- */
.hero-photo{
  position:absolute;
  left:calc((100vw - var(--u) * 100) / -2); right:calc(var(--u) * 53);
  top:calc(var(--u) * 6.25); bottom:calc(var(--u) * 22.667);
  overflow:hidden;
}
.hero-photo img{
  position:relative; z-index:1;
  width:100%; height:100%; object-fit:cover; object-position:50% 26%;
}
/* a soft sweep of light travels over the picture, no frame */
.hero-photo::before{
  content:""; position:absolute; top:-40%; left:0; width:58%; height:180%;
  z-index:2; pointer-events:none;
  background:linear-gradient(102deg, rgba(255,250,232,0) 0%,
    rgba(255,250,232,.16) 50%, rgba(255,250,232,0) 100%);
  transform:translateX(-180%) rotate(9deg);
  animation:glint 10s cubic-bezier(.5,0,.35,1) infinite 2.2s;
}
/* the corners breathe out into the page instead of stopping dead */
.hero-photo::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  z-index:3;
  background:radial-gradient(118% 108% at 50% 42%,
    rgba(6,7,6,0) 58%, rgba(6,7,6,.35) 84%, rgba(6,7,6,.72) 100%);
}

/* --- row 1, right: the name --- */
.hero-panel{
  position:absolute; left:calc(var(--u) * 48.6); right:calc(var(--u) * 17);
  top:calc(var(--u) * 9.6); height:calc(var(--u) * 34.4);
  display:flex; flex-direction:column; justify-content:center; z-index:2;
}
.hero-title{
  font-family:var(--display); font-weight:600; line-height:1;
  font-size:calc(var(--u) * 3.9); letter-spacing:.012em; text-transform:uppercase;
  background:linear-gradient(100deg,#f2dfb4,#d8b36a 52%,#eed3a2);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  white-space:nowrap;
}
.hero-tag{
  margin-top:calc(var(--u) * 1.5);
  font-family:var(--display); font-style:italic; font-weight:500; line-height:1;
  font-size:calc(var(--u) * 1.9); color:var(--gold-lt);
}
.hero-rule{
  display:block; margin-top:calc(var(--u) * 1.8);
  width:calc(var(--u) * 4.2); height:1px; background:var(--gold-dk);
}
.hero-copy{
  margin-top:calc(var(--u) * 1.9);
  font-family:var(--text); font-weight:400;
  font-size:calc(var(--u) * 1.32); line-height:calc(var(--u) * 2.05);
  color:var(--grey); letter-spacing:.004em;
}
.hero-cta{
  margin-top:calc(var(--u) * 2.6); align-self:flex-start;
  display:inline-flex; align-items:center; gap:calc(var(--u) * .9);
  font-family:var(--text); font-weight:600;
  font-size:calc(var(--u) * 1.02); line-height:1;
  letter-spacing:.18em; text-transform:uppercase; color:var(--red-lt);
  transition:color .3s ease;
}
.hero-cta span{ transition:transform .35s ease; }
.hero-cta:hover{ color:var(--gold-lt); }
.hero-cta:hover span{ transform:translateX(.5em); }

/* the ring holds still, the needle looks for a bearing */
.hero-compass{
  position:absolute; right:calc(var(--u) * 2.8); top:calc(var(--u) * 26.8);
  transform:translateY(-50%);
  width:calc(var(--u) * 12.4); aspect-ratio:1; display:block;
  opacity:.75; z-index:2; overflow:visible;
}
.needle{ transform-box:fill-box; transform-origin:50% 50%; }

/* --- row 2, left: the figures --- */
.stats{
  position:absolute;
  left:calc((100vw - var(--u) * 100) / -2); right:calc(var(--u)*53);
  top:calc(var(--u)*45.6); bottom:calc(var(--u)*5.667);
  padding-left:calc(var(--u)*2.8);
  border-top:1px solid rgba(216,179,106,.16);
  border-bottom:1px solid rgba(216,179,106,.16);
  display:grid; grid-template-columns:repeat(3,1fr); z-index:1;
}
.stat{ position:relative; display:flex; flex-direction:column;
       align-items:center; justify-content:center; }
.stat+.stat::before{
  content:""; position:absolute; left:0; top:16%;
  width:1px; height:68%;
  background:linear-gradient(180deg,transparent,rgba(216,179,106,.35),transparent);
}
.stat b{
  font-family:var(--display); font-weight:600; line-height:1;
  font-size:calc(var(--u)*3.05); color:var(--gold-lt);
}
.stat i{
  margin-top:calc(var(--u)*1.4); text-align:center;
  font-style:normal; font-family:var(--text); font-weight:500;
  font-size:calc(var(--u)*1.0); line-height:1.3; white-space:nowrap;
  letter-spacing:.1em; text-transform:uppercase; color:var(--white);
}
.stat s{
  margin-top:calc(var(--u)*1.2);
  width:calc(var(--u)*1.563); height:1px; background:var(--red);
}

/* --- row 2, right: the four objects, in the same frame --- */
.tiles{
  position:absolute;
  left:calc(var(--u)*48.6); right:calc((100vw - var(--u) * 100) / -2);
  top:calc(var(--u)*45.6); bottom:calc(var(--u)*5.667);
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:calc(var(--u)*0.85); z-index:1;
}
.tiles li{ position:relative; overflow:hidden; background:var(--bg);
           transition:transform .9s var(--ease); }
.tiles li:hover{ transform:translateY(calc(var(--u)*-.4)); }
.tiles li::before{
  content:""; position:absolute; top:-40%; left:0; width:60%; height:180%;
  z-index:2; pointer-events:none;
  background:linear-gradient(102deg, rgba(255,250,232,0) 0%,
    rgba(255,250,232,.22) 50%, rgba(255,250,232,0) 100%);
  transform:translateX(-180%) rotate(9deg);
  animation:glint 10s cubic-bezier(.5,0,.35,1) infinite;
}
.tiles li:nth-child(1)::before{ animation-delay:3.2s }
.tiles li:nth-child(2)::before{ animation-delay:3.8s }
.tiles li:nth-child(3)::before{ animation-delay:4.4s }
.tiles li:nth-child(4)::before{ animation-delay:5.0s }
.tiles img{ position:relative; z-index:1;
            width:100%; height:100%; object-fit:cover;
            transition:transform 2.4s var(--ease); }
.tiles li:hover img{ transform:scale(1.04); }

/* --- the closing line --- */
.foot{
  position:absolute; left:calc((100vw - var(--u) * 100) / -2); right:calc((100vw - var(--u) * 100) / -2);
  top:calc(var(--u)*62.6); bottom:0; z-index:2;
}
.foot p{
  position:absolute; left:0; right:0; top:calc(var(--u)*1.1);
  text-align:center; font-family:var(--text); font-weight:500;
  font-size:calc(var(--u)*1.08); line-height:1;
  letter-spacing:.26em; text-transform:uppercase; color:var(--grey);
}
.foot ul{ position:absolute; top:calc(var(--u)*.85); display:flex;
         right:calc((100vw - var(--u) * 100) / 2 + var(--u) * 2.8); }
.foot svg{ width:calc(var(--u)*1.25); height:calc(var(--u)*1.25); color:#b3aa9c;
           transition:color .3s ease; }
.foot a:hover svg{ color:var(--gold-lt); }

/* =========================================================
   MOTION — everything here is slow, small and optional.
   Nothing moves more than a few pixels; nothing loops fast.
   ========================================================= */
@keyframes rise{
  from{ opacity:0; transform:translateY(calc(var(--u) * 1.1)); }
  to  { opacity:1; transform:none; }
}
@keyframes riseTitle{
  from{ opacity:0; transform:translateY(calc(var(--u) * 1.4)); letter-spacing:.12em; }
  to  { opacity:1; transform:none; letter-spacing:.018em; }
}
@keyframes draw{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes settle{
  from{ transform:scale(1.05); opacity:0; }
  to  { transform:none; opacity:1; }
}
@keyframes settleFlip{
  from{ transform:scaleX(-1) scale(1.05); opacity:0; }
  to  { transform:scaleX(-1); opacity:1; }
}
@keyframes turn{ to{ transform:rotate(360deg); } }
@keyframes glint{
  0%   { transform:translateX(-180%) rotate(9deg); }
  24%  { transform:translateX(300%)  rotate(9deg); }
  100% { transform:translateX(300%)  rotate(9deg); }
}
@keyframes markIn{
  from{ opacity:0; transform:rotate(-26deg) scale(.88); }
  to  { opacity:1; transform:none; }
}

:root{ --ease:cubic-bezier(.19,1,.22,1); }

/* — the mark settles like a compass needle finding north — */
.nav__logo{
  animation:markIn 1.6s var(--ease) both;
  transition:transform 1.4s var(--ease);
}


.nav__links a{ animation:fade 1.2s ease both; }
.nav__links a:nth-child(1){ animation-delay:.30s }
.nav__links a:nth-child(2){ animation-delay:.37s }
.nav__links a:nth-child(3){ animation-delay:.44s }
.nav__links a:nth-child(4){ animation-delay:.51s }
.nav__links a:nth-child(5){ animation-delay:.58s }
.nav__links a:nth-child(6){ animation-delay:.65s }
.nav__links a:nth-child(7){ animation-delay:.72s }
.nav__links a:nth-child(8){ animation-delay:.79s }
.nav__links a::after{
  content:""; position:absolute; left:50%; right:50%;
  bottom:calc(var(--u)*.15); height:1px; background:var(--gold);
  transition:left .5s var(--ease), right .5s var(--ease);
}
.nav__links a:hover::after{ left:0; right:.19em; }
.nav__links a[aria-current="page"]::after{ left:0; right:.19em; background:var(--red); }

/* — the photograph breathes in from a hair too close — */
.photo img{ animation:settle 2.4s var(--ease) both; }
.photo img[style*="scaleX(-1)"]{ animation-name:settleFlip; }
.hero-photo img{ animation:settle 2.4s var(--ease) both; }

/* — the copy rises, line after line, like a page being read — */
.copy > *{ animation:rise 1.3s var(--ease) both; }
.copy > *:nth-child(1){ animation-delay:.45s }
.copy > *:nth-child(2){ animation-delay:.58s }
.copy > *:nth-child(3){ animation-delay:.71s }
.copy > *:nth-child(4){ animation-delay:.84s }
.copy > *:nth-child(5){ animation-delay:.97s }
.copy > *:nth-child(6){ animation-delay:1.10s }
.copy > .title{ animation-name:riseTitle; animation-duration:1.6s; }
.copy > .num-rule, .copy > .title-rule{
  transform-origin:left center;
  animation-name:draw; animation-duration:1.1s;
}

/* — home: the same rhythm, in the order the eye travels — */
.hero-title  { animation:riseTitle 1.7s var(--ease) both .35s; }
.hero-tag    { animation:rise 1.3s var(--ease) both .55s; }
.hero-rule   { transform-origin:left center; animation:draw 1.1s var(--ease) both .70s; }
.hero-copy   { animation:rise 1.3s var(--ease) both .80s; }
.hero-cta    { animation:rise 1.3s var(--ease) both .95s; }
.hero-compass{ animation:fade 2.4s ease both .9s; }
.needle{ animation:bearing 24s cubic-bezier(.33,1,.42,1) infinite 2.2s; }
@keyframes bearing{
  0%,6%    { transform:rotate(0deg) }
  14%      { transform:rotate(78deg) }
  18%      { transform:rotate(66deg) }
  22%      { transform:rotate(72deg) }
  36%      { transform:rotate(72deg) }
  46%      { transform:rotate(-124deg) }
  50%      { transform:rotate(-112deg) }
  54%      { transform:rotate(-117deg) }
  68%      { transform:rotate(-117deg) }
  80%      { transform:rotate(6deg) }
  85%      { transform:rotate(-2deg) }
  90%,100% { transform:rotate(0deg) }
}
.tiles li    { animation:fade 1.6s ease both; }
.tiles li:nth-child(1){ animation-delay:.85s }
.tiles li:nth-child(2){ animation-delay:.97s }
.tiles li:nth-child(3){ animation-delay:1.09s }
.tiles li:nth-child(4){ animation-delay:1.21s }
.stat b      { animation:rise 1.4s var(--ease) both 1.05s; }
.stat i      { animation:rise 1.4s var(--ease) both 1.15s; }
.stat s      { transform-origin:center; animation:draw 1s var(--ease) both 1.3s; }
.foot        { animation:fade 1.8s ease both 1.55s; }

/* — the compass in the ornament turns once, very slowly — */
.ornament .orn{ animation:turn 300s linear infinite; }

/* — a whisper of film grain, for the vintage paper feel — */
body::after{
  content:""; position:fixed; inset:0; z-index:9; pointer-events:none;
  opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
/* — and a soft vignette, the way old film falls off at the edge — */
body::before{
  content:""; position:fixed; inset:0; z-index:8; pointer-events:none;
  background:radial-gradient(120% 95% at 50% 45%,
    rgba(6,7,6,0) 45%, rgba(6,7,6,.28) 78%, rgba(6,7,6,.6) 100%);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    animation-delay:0s !important; transition-duration:.001ms !important;
  }
}

/* =========================================================
   SMALL SCREENS
   The 1536x1024 poster cannot survive a phone, so below
   900px the same material is re-set as a vertical column:
   one photograph, one column of type, centred.
   ========================================================= */
.burger{ display:none; }

@media (max-width:900px){
  body{ overflow-y:auto; overflow-x:hidden; }

  /* --- header --- */
  /* no backdrop-filter here: it would trap the fixed menu inside the bar */
  .nav{ position:fixed; height:18vw; max-height:80px;
        background:linear-gradient(180deg, rgba(6,7,6,.97), rgba(6,7,6,.86));
        border-bottom:1px solid rgba(215,161,101,.14); }
  .brand-link{ position:relative; z-index:30; }
  .nav__logo{ left:6vw; top:50%; transform:translateY(-50%);
              width:10vw; max-width:46px; }
  .brand-link:hover .nav__logo{ transform:translateY(-50%); }

  .burger{ display:block; position:absolute; right:4vw; top:50%;
           transform:translateY(-50%); width:11vw; height:11vw;
           max-width:48px; max-height:48px;
           background:none; border:0; padding:0; cursor:pointer; z-index:30; }
  .burger span{ display:block; width:26px; height:1px; margin:0 auto;
                background:var(--gold-lt); transition:transform .45s var(--ease); }
  .burger span+span{ margin-top:7px; }
  body.menu-open .burger span:first-child{ transform:translateY(4px) rotate(45deg); }
  body.menu-open .burger span:last-child{ transform:translateY(-4px) rotate(-45deg); }

  .nav__links{
    position:fixed; inset:0; left:auto; top:0; width:100%;
    background:var(--bg);
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    gap:4.5vw; opacity:0; visibility:hidden; z-index:20;
    transition:opacity .45s var(--ease), visibility .45s;
  }
  body.menu-open{ overflow:hidden; }
  body.menu-open .nav__links{ opacity:1; visibility:visible; }
  .nav__links a{ font-size:4.6vw; letter-spacing:.28em; text-indent:.28em;
                 padding:1vw 0; animation:none; }
  .nav__links a::after{ display:none; }
  .nav__links a[aria-current="page"]{ color:var(--gold-lt); }

  /* --- the stage stops being a poster --- */
  .stage{ position:static; width:100%; height:auto; margin:0;
          top:auto; transform:none; }


  /* --- chapters --- */
  .chapter .photo{
    position:relative; left:auto; right:auto; top:auto; bottom:auto;
    transform:none; width:100%; height:auto; margin-top:18vw;
    display:block;
  }
  .photo--bleed .plate{ height:52svh; }
  .photo--bleed img{ height:52svh; object-position:50% 45% !important; }
  .photo--bleed::after{
    background:linear-gradient(180deg, rgba(6,7,6,.55) 0%, rgba(6,7,6,.05) 22%,
      rgba(6,7,6,.35) 72%, var(--bg) 100%);
  }
  /* his portraits keep their frame, centred, a little smaller */
  .photo--plate{ padding:0 8vw; }
  .photo--plate .plate{ height:auto; width:100%; padding:1.8vw;
                        margin:0 auto; }
  .photo--plate img{ width:100%; height:auto; max-height:56svh;
                     object-position:50% 40% !important; }
  .copy{
    position:relative; left:auto; top:auto; transform:none !important;
    width:100%; padding:2vw 8vw 14vw; text-align:center;
    display:flex; flex-direction:column; align-items:center;
  }
  .title{ width:auto; max-width:100%; font-size:11vw; letter-spacing:.05em;
          text-indent:.05em; line-height:1.08; }
  .title-rule, .num-rule{ margin:5vw auto; width:14vw; transform-origin:center; }
  .lead{ font-size:5.4vw; line-height:7.8vw; }
  .body{ font-size:3.8vw; line-height:6.8vw; margin-top:6vw; }
  .body br{ display:none; }
  .lead br{ display:none; }
  .quote{ margin-top:8vw; padding-left:0; padding-top:9vw;
          font-size:5vw; line-height:8.4vw; }
  .quote br{ display:none; }
  .quote::before{ left:50%; top:0; transform:translateX(-50%);
                  font-size:13vw; }
  .quote cite{ margin-top:5vw; font-size:3.2vw; }
  .glyph{ width:9vw; height:9vw; margin:5vw auto; }
  .services{ gap:4vw; margin-top:6vw; }
  .services li{ font-size:4vw; justify-content:center; }
  .services svg{ width:6vw; height:6vw; }
  .soon{ font-size:5.4vw; margin-top:5vw; }
  .ornament{ width:46vw; margin:7vw auto 0; gap:3vw; }
  .ornament .orn{ width:6vw; }

  /* --- home --- */
  .home .stage{ display:flex; flex-direction:column; padding-top:18vw; }
  .hero-photo{ position:relative; left:auto; right:auto; top:auto; bottom:auto;
               order:1; width:100%; height:56svh; }
  .hero-photo::after{ background:linear-gradient(180deg,
    rgba(6,7,6,.5) 0%, rgba(6,7,6,0) 20%,
    rgba(6,7,6,0) 72%, rgba(6,7,6,.6) 92%, var(--bg) 100%); }

  .hero-panel{ position:relative; left:auto; right:auto; top:auto; height:auto;
               order:2; padding:8vw 8vw 0; text-align:center; align-items:center; }
  .hero-title{ font-size:10.4vw; white-space:normal; letter-spacing:.04em; }
  .hero-tag{ margin-top:4.5vw; font-size:5vw; }
  .hero-rule{ margin:6vw auto 0; width:14vw; }
  .hero-copy{ margin-top:6vw; font-size:3.8vw; line-height:6.8vw; }
  .hero-cta{ align-self:center; margin-top:8vw; font-size:3.5vw; }

  .hero-compass{ position:relative; right:auto; top:auto; transform:none;
                 order:3; width:36vw; margin:11vw auto 0; opacity:.8; }

  .stats{ position:relative; left:auto; right:auto; top:auto; bottom:auto;
          order:4; width:100%; height:auto; margin-top:13vw;
          padding:11vw 6vw; grid-template-columns:1fr; gap:9vw; }
  .stat b{ font-size:12vw; }
  .stat i{ margin-top:3vw; font-size:3.5vw; }
  .stat s{ margin-top:3vw; width:8vw; }
  .stat+.stat::before{ left:20%; top:-4.5vw; width:60%; height:1px;
    background:linear-gradient(90deg,transparent,rgba(216,179,106,.3),transparent); }

  .tiles{ position:relative; left:auto; right:auto; top:auto; bottom:auto;
          order:5; height:auto; margin-top:13vw; padding:0 6vw;
          grid-template-columns:1fr 1fr; gap:3vw; }
  .tiles li{ aspect-ratio:3/4; }

  .foot{ position:relative; left:auto; right:auto; top:auto; bottom:auto;
         order:6; height:auto; padding:12vw 6vw 14vw; margin-top:6vw;
         border-top:1px solid rgba(216,179,106,.14); }
  .foot p{ position:relative; top:auto; font-size:3.5vw; letter-spacing:.22em; }
  .foot ul{ position:relative; right:auto; top:auto;
            justify-content:center; margin-top:8vw; }
  .foot svg{ width:5.4vw; height:5.4vw; }

  body::before{ background:radial-gradient(130% 80% at 50% 40%,
    rgba(6,7,6,0) 55%, rgba(6,7,6,.35) 100%); }
}

@media (max-width:900px) and (orientation:landscape){
  .chapter .photo{ height:70svh; }
  .hero-photo{ height:78svh; }
}