/* ============================================================
   200 NATIONALITIES — STYLESHEET
   Brand Identity Guidelines v1.0 (2026)
   ============================================================ */

/* ---------- brand tokens ------------------------------------ */
:root{
  --red:#C8001A;
  --green:#006B2B;
  --black:#000000;
  --white:#FFFFFF;
  --ink:#0C0C0A;
  --paper:#F2EFE8;

  /* greys are Ink at opacity — no colours outside the palette */
  --ink-soft:rgba(12,12,10,.72);
  --ink-mute:rgba(12,12,10,.58);
  --hair:rgba(12,12,10,.15);
  --hair-light:rgba(255,255,255,.22);

  --display:"Barlow Condensed",Impact,sans-serif;
  --serif:"Playfair Display",Georgia,serif;
  --body:"Lora",Georgia,serif;

  --measure:62ch;
  --gutter:clamp(20px,5vw,72px);

  /* Kerning of "200" in the CSS stand-in lockup. The official mark
     kerns the numerals until they touch; Barlow Condensed has its
     own sidebearings, so it needs more negative tracking than the
     -2 to -4px the guidelines specify for display type. Nudge this
     value to taste. The proper fix is swapping in the SVG, at which
     point this stops mattering. */
  --num-track:-.055em;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:4px}

/* ---------- the lockup -------------------------------------- */
.lockup{display:flex;align-items:stretch;gap:clamp(14px,2vw,26px)}
.lockup-img{width:min(620px,86vw);height:auto;display:block}

/* UAE flag stripe: Red / White / Green, equal thirds */
.stripe{
  width:clamp(9px,1.1vw,14px);flex:none;
  display:grid;grid-template-rows:repeat(3,1fr);
}
.stripe i{display:block}
.stripe i:nth-child(1){background:var(--red)}
.stripe i:nth-child(2){background:var(--white)}
.stripe i:nth-child(3){background:var(--green)}

.wordmark{display:block}
.wordmark__num{
  display:block;
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(72px,12.5vw,150px);
  line-height:.8;
  letter-spacing:var(--num-track);
  color:var(--ink);
}
.wordmark__rule{display:block;width:112%;height:2px;background:var(--green);margin:.22em 0 .18em}
.wordmark__word{
  display:block;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(15px,2.6vw,31px);
  line-height:1;
  letter-spacing:.4em;
  margin-right:-.4em;              /* cancel trailing tracking */
  text-transform:uppercase;
  color:var(--ink-mute);
}

/* ---------- hero -------------------------------------------- */
.hero{position:relative;min-height:100svh;overflow:hidden;background:var(--white)}

.hero__faces{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.strip{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#EFEBE3 0%,#E4DFD5 60%,#EDE9E1 100%); /* tonal fallback, Paper family */
}
.strip::after{
  content:"";position:absolute;inset:0;
  background-image:var(--portrait,none);
  background-size:cover;background-position:center 22%;
  opacity:.38;
  filter:grayscale(.15) contrast(.9) brightness(1.16);
}
.strip:nth-child(1){margin-top:2.5%}
.strip:nth-child(3){margin-bottom:3%}
.strip:nth-child(5){margin-top:4%}

/* SWAP IN REAL PORTRAITS — set the five paths, nothing else */
.strip:nth-child(1){--portrait:url("images/face-01.jpg")}
.strip:nth-child(2){--portrait:url("images/face-02.jpg")}
.strip:nth-child(3){--portrait:url("images/face-03.jpg")}
.strip:nth-child(4){--portrait:url("images/face-04.jpg")}
.strip:nth-child(5){--portrait:url("images/face-05.jpg")}

.hero__wash{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(190deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.18) 40%,rgba(242,239,232,.94) 88%);
}
.hero__inner{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--gutter);
  padding-bottom:clamp(36px,7vh,88px);
}
.hero__mark{display:flex;align-items:flex-end;gap:clamp(16px,3vw,40px);flex-wrap:wrap}

.hero__tagline{
  margin:clamp(26px,4.5vh,52px) 0 0;
  max-width:20ch;
  font-family:var(--serif);
  font-weight:700;font-style:italic;
  font-size:clamp(1.5rem,1.1rem + 2.1vw,2.85rem);
  line-height:1.22;
}

/* ---------- sections ---------------------------------------- */
.band{padding:clamp(64px,11vh,132px) var(--gutter)}
.band--paper{background:var(--paper);border-top:1px solid var(--hair)}
.band--white{background:var(--white);border-top:1px solid var(--hair)}

.h-display{
  margin:0 0 .55em;
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(1.9rem,1.3rem + 2.6vw,3.4rem);
  line-height:.98;
  letter-spacing:-.025em;
  text-transform:uppercase;
}
.h-serif{
  margin:0 0 .7em;
  font-family:var(--serif);
  font-weight:700;font-style:italic;
  font-size:clamp(1.7rem,1.25rem + 2vw,2.7rem);
  line-height:1.2;
}

/* premise */
.premise{max-width:var(--measure);margin:0 auto}
.premise p{margin:0 0 1.3em}
.premise p:last-child{margin-bottom:0}

/* what we're making — the strip motif, again */
.works__lead{
  max-width:46ch;
  margin:0;
  font-family:var(--serif);
  font-weight:700;font-style:italic;
  font-size:clamp(1.15rem,1rem + .8vw,1.45rem);
  line-height:1.4;
  color:var(--ink);
}
.works{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(26px,3.4vw,52px);
  max-width:1200px;margin:clamp(32px,5vh,52px) auto 0;
}
.work{padding-top:16px;border-top:2px solid var(--ink)}
.work p.work__eyebrow{
  margin:0 0 .7em;
  font-family:var(--display);
  font-weight:500;
  font-size:13px;
  letter-spacing:.22em;
  line-height:1.3;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.work h3{
  margin:0 0 .55em;
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(1.05rem,.9rem + .7vw,1.4rem);
  line-height:1.05;
  letter-spacing:-.015em;
  text-transform:uppercase;
}
.work p{margin:0;font-size:.94rem;line-height:1.65;color:var(--ink-soft)}

/* the question asked of every participant */
.work p.work__q{
  margin:.95em 0 0;
  padding-top:.85em;
  border-top:1px solid var(--hair);
  font-family:var(--serif);
  font-weight:700;font-style:italic;
  font-size:clamp(1.02rem,.95rem + .35vw,1.18rem);
  line-height:1.4;
  color:var(--ink);
}

/* ---------- the two doors ----------------------------------- */
.doors{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--hair)}
.door{padding:clamp(48px,8vh,96px) var(--gutter);border-left:5px solid transparent}
.door + .door{border-inline-start:1px solid var(--hair)}
.door--partner{border-left-color:var(--red);background:var(--paper)}
.door--story{border-left-color:var(--green);background:var(--white)}
.door h2{
  margin:0 0 .5em;
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(1.6rem,1.2rem + 1.7vw,2.4rem);
  line-height:1;
  letter-spacing:-.02em;
  text-transform:uppercase;
}
.door p{margin:0 0 1.5em;max-width:38ch;color:var(--ink-soft)}
.door p.door__pillars{
  margin:1.4em 0 0;
  font-family:var(--display);
  font-weight:500;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-mute);
  max-width:34ch;
}
.mail{
  display:inline-block;
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(1.2rem,.9rem + 1.6vw,1.9rem);
  line-height:1.15;
  letter-spacing:-.015em;
  text-decoration:none;
  border-bottom:3px solid currentColor;
  padding-bottom:3px;
  word-break:break-word;
  transition:color .18s ease;
}
.door--partner .mail{color:var(--red)}
.door--story .mail{color:var(--green)}
.mail:hover{color:var(--ink)}

/* ---------- footer (dark lockup variant) -------------------- */
.foot{background:var(--ink);color:var(--white);padding:clamp(48px,8vh,88px) var(--gutter)}
.foot__grid{
  display:flex;flex-wrap:wrap;gap:36px 56px;
  align-items:flex-end;justify-content:space-between;
}
.foot .wordmark__num{font-size:clamp(46px,7vw,76px);color:var(--white)}
.foot .wordmark__word{font-size:clamp(11px,1.5vw,16px);color:rgba(255,255,255,.72)}
.foot .lockup{gap:14px}
.foot .stripe{width:8px}
.foot__meta{font-size:.88rem;line-height:1.8;color:rgba(255,255,255,.72)}
.foot__meta p{margin:0}
.foot__meta a{text-decoration:none;border-bottom:1px solid var(--hair-light);color:var(--white)}
.foot__legal{
  margin-top:clamp(30px,5vh,48px);
  padding-top:22px;
  border-top:1px solid var(--hair-light);
  font-family:var(--display);
  font-weight:500;
  font-size:13px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
}

/* ---------- responsive -------------------------------------- */
@media (max-width:900px){
  .works{grid-template-columns:1fr 1fr}
  .doors{grid-template-columns:1fr}
  .door + .door{border-inline-start:0;border-top:1px solid var(--hair)}
}
@media (max-width:680px){
  .hero__faces{grid-template-columns:repeat(3,1fr)}
  .strip:nth-child(4),.strip:nth-child(5){display:none}
  .hero__mark{gap:14px}
  .works{grid-template-columns:1fr}
  .foot__grid{flex-direction:column;align-items:flex-start}
}

/* ---------- one entrance, then stillness -------------------- */
@media (prefers-reduced-motion:no-preference){
  .strip{animation:rise .9s cubic-bezier(.22,.61,.36,1) both}
  .strip:nth-child(1){animation-delay:.05s}
  .strip:nth-child(2){animation-delay:.17s}
  .strip:nth-child(3){animation-delay:.29s}
  .strip:nth-child(4){animation-delay:.41s}
  .strip:nth-child(5){animation-delay:.53s}
  .hero__inner > *{animation:settle .8s ease .72s both}
  @keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
  @keyframes settle{from{opacity:0}to{opacity:1}}
}