/* The Kublai Tour — one page, no JavaScript.
   Palette: the Mongolian sky and the gold of a painted ger door, on white felt.
   The one ornament is the alkhan khee (interlocking hammer) border, used as a
   lintel and threshold around the photograph and to bookend the page. */

:root {
  --sky:      #1B3C8C;
  --sky-deep: #10265C;
  --felt:     #F9F8F4;
  --felt-2:   #F0EEE7;
  --ink:      #161A38;
  --muted:    #4A4E6A;
  --gold:     #E2AC3F;
  --rule:     #D9D5C9;

  --serif: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
  --sans:  "Jost", Futura, "Century Gothic", "Trebuchet MS", sans-serif;

  --wrap: 1180px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);

  /* A data URI, so there is no relative-path trap when it is substituted. */
  --khee: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M0 1.5H16M0 14.5H16M4 1.5V10.5M1 10.5H7M12 14.5V5.5M9 5.5H15'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--felt);
  color: var(--ink);
  font: 400 1.125rem/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
p { text-wrap: pretty; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
/* Narrow sections keep the page's left edge; only the measure narrows. */
.narrow > * { max-width: 820px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 10; background: var(--gold); color: var(--ink); padding: .6rem 1rem; }

.draft {
  background: var(--gold); color: var(--ink);
  font-size: .9rem; line-height: 1.4; text-align: center;
  padding: .55rem var(--gutter);
}

/* ---------- the border ---------- */
.khee {
  height: 20px;
  background: var(--gold);
  -webkit-mask: var(--khee) 0 0 / 20px 20px repeat-x;
          mask: var(--khee) 0 0 / 20px 20px repeat-x;
}

/* Bodoni's display cut has hairlines too fine for anything under ~40px, so
   smaller serif settings use its text optical size, which has sturdier strokes. */
.mark, .lede, .dates strong, .company h3, .from, .work h3, .coda, .big, .foot-mark {
  font-variation-settings: "opsz" 11;
}

/* ---------- header ---------- */
.top { background: var(--sky); color: #fff; }
.top .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 1.2rem;
}
.mark {
  font-family: var(--serif); font-weight: 600; font-size: 1.35rem;
  text-decoration: none; white-space: nowrap;
}
.top nav { display: flex; gap: clamp(1rem, 2.4vw, 2rem); font-size: 1rem; }
.top nav a {
  text-decoration: none; padding-block: .3rem;
  border-bottom: 1px solid transparent;
}
.top nav a:hover { border-bottom-color: var(--gold); }
@media (max-width: 720px) { .top nav a:not(:last-child) { display: none; } }

/* ---------- hero ---------- */
.hero { background: var(--sky); color: #fff; padding-top: clamp(1.5rem, 5vw, 3.5rem); }
.hero .khee { margin-bottom: 1.1rem; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }

h1 { margin: 0; font-family: var(--serif); font-weight: 400; line-height: .95; }
h1 span { display: block; }
h1 .pre, h1 .post {
  font-style: italic; font-weight: 500; color: var(--gold);
  font-variation-settings: "opsz" 24;
  font-size: clamp(1.6rem, 3.2vw, 2.35rem); line-height: 1.1;
}
h1 .name {
  font-weight: 600; letter-spacing: -.015em;
  font-variation-settings: "opsz" 36;   /* keeps the thin strokes visible at this size */
  font-size: clamp(3.4rem, 9.6vw, 7.2rem);
  margin-block: .06em .1em;
}

.lede {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem); line-height: 1.4;
  max-width: 30ch; margin: 1.6rem 0 0;
}
.ra { margin: 1rem 0 0; max-width: 44ch; color: rgba(255,255,255,.86); }
.ra cite { font-style: italic; }

.dates {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1.4rem;
  max-width: 34rem; margin: 2rem 0 0; padding-top: 1.1rem;
  border-top: 1px solid rgba(226,172,63,.6);
}
.dates strong { font-family: var(--serif); font-weight: 600; font-size: 1.45rem; color: var(--gold); }
.dates span { color: rgba(255,255,255,.88); }

.ctas { display: flex; flex-wrap: wrap; gap: .8rem; margin: 2rem 0 0; }
.btn {
  display: inline-block; padding: .85rem 1.4rem;
  font-weight: 500; line-height: 1.2; text-decoration: none;
  border: 1.5px solid var(--gold); border-radius: 2px;
}
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: #EDBE5A; border-color: #EDBE5A; }
.btn-line { color: #fff; }
.btn-line:hover { background: rgba(226,172,63,.16); }

/* The photograph, framed like a painted ger door: patterned lintel and threshold. */
.door { margin: 0; }
.door-frame { position: relative; border: 1.5px solid var(--gold); padding: 1.85rem .65rem; }
.door-frame::before, .door-frame::after {
  content: ""; position: absolute; left: .65rem; right: .65rem; height: 16px;
  background: var(--gold);
  -webkit-mask: var(--khee) 0 0 / 16px 16px repeat-x;
          mask: var(--khee) 0 0 / 16px 16px repeat-x;
}
.door-frame::before { top: .45rem; }
.door-frame::after  { bottom: .45rem; }
.door img { width: 100%; }
.door figcaption {
  margin-top: .85rem; max-width: 48ch;
  font-size: .95rem; line-height: 1.45; color: rgba(255,255,255,.84);
}

/* ---------- sections ---------- */
.sec   { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.felt  { background: var(--felt); }
.alt   { background: var(--felt-2); }
.band  { background: var(--sky); color: #fff; }
.deep  { background: var(--sky-deep); color: #fff; padding-top: 0; }
.deep .khee { margin-bottom: clamp(3rem, 7vw, 5.5rem); }

h2 {
  margin: 0 0 1.2rem;
  font-family: var(--serif); font-weight: 600; font-style: italic;
  font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1;
  font-variation-settings: "opsz" 18;
  color: var(--sky);
}
.band h2, .deep h2 { color: var(--gold); }

.split {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 5rem); align-items: start;
}
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } }
.intro { margin: 0; max-width: 36ch; font-size: 1.2rem; }

/* Full-width stage photograph. Its blue backdrop runs into the dates band below. */
.photo-band { position: relative; margin: 0; background: var(--sky); }
.photo-band img { width: 100%; aspect-ratio: 12 / 5; object-fit: cover; object-position: 60% 30%; }
@media (max-width: 700px) { .photo-band img { aspect-ratio: 4 / 3; object-position: 62% 35%; } }
.photo-band figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding-block: 3rem .9rem;
  background: linear-gradient(rgba(16,38,92,0), rgba(16,38,92,.88));
  color: #fff; font-size: .95rem;
}
.photo-band figcaption .wrap { display: block; }

/* Who: one photograph for each part of the company. */
.who-head .intro { max-width: 40ch; }
.company {
  list-style: none; margin: 2.6rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.8rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 700px) { .company { grid-template-columns: minmax(0, 1fr); } }
.company img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.company h3 {
  margin: 1rem 0 .35rem;
  font-family: var(--serif); font-weight: 500; line-height: 1.2;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
}
.company p { margin: 0; max-width: 48ch; color: var(--muted); font-size: 1rem; line-height: 1.5; }
.company .pictured { margin-top: .3rem; font-size: .9rem; }

/* What: one photograph under the introduction. */
.side-photo { margin: 2.2rem 0 0; max-width: 440px; }
.side-photo img { width: 100%; }
.side-photo figcaption { margin-top: .6rem; font-size: .95rem; color: var(--muted); }

/* What: "From ... To", as Graham framed it. */
.from {
  margin: 0 0 .4rem;
  font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 1.3rem; color: var(--sky);
}
.work + .from { margin-top: 2.2rem; }
.work { padding-block: 1.1rem 1.3rem; border-top: 1px solid var(--rule); }
.work-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; }
.work h3 {
  margin: 0; font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.1;
}
.by { font-size: 1rem; color: var(--muted); }
.work p { margin: .45rem 0 0; max-width: 52ch; }
.coda {
  margin: 2rem 0 0; max-width: 40ch;
  font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.3rem; line-height: 1.4;
}

/* Where and when */
.run { margin: 0; font-size: 1.1rem; color: rgba(255,255,255,.88); }
.big-dates {
  margin: .3rem 0 2.2rem;
  font-family: var(--serif); font-weight: 600; line-height: 1.02; letter-spacing: -.01em;
  font-size: clamp(2.7rem, 8.4vw, 6.2rem);
  font-variation-settings: "opsz" 36;
}
.big-dates span { font-weight: 500; font-style: italic; font-size: .55em; color: var(--gold); padding-inline: .12em; }
.where {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 1rem clamp(2rem, 6vw, 5rem);
  padding-top: 1.4rem; border-top: 1px solid rgba(226,172,63,.6);
}
.where p { margin: 0; max-width: 46ch; color: rgba(255,255,255,.92); }
@media (max-width: 760px) { .where { grid-template-columns: minmax(0, 1fr); } }

/* Why and next */
.big {
  margin: 0 0 1.4rem;
  font-family: var(--serif); font-weight: 500; font-size: clamp(1.45rem, 2.8vw, 2.05rem); line-height: 1.35;
}
.why-body { margin: 0; max-width: 62ch; }
.film { margin: 2.6rem 0 0; }
.film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.film figcaption { margin-top: .7rem; max-width: 62ch; font-size: .95rem; color: var(--muted); }
.tbc {
  display: inline-block; margin: .2rem 0 0; padding: .9rem 1.2rem;
  border: 1.5px dashed rgba(226,172,63,.75); color: var(--gold); font-size: 1.1rem;
}

/* ---------- footer ---------- */
.foot { background: var(--sky-deep); color: rgba(255,255,255,.76); font-size: .95rem; border-top: 1px solid rgba(255,255,255,.12); }
.foot .wrap {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem;
  padding-block: 1.6rem;
}
.foot p { margin: 0; }
.foot-mark { font-family: var(--serif); color: #fff; }

.contact-line { margin: .2rem 0 0; font-size: 1.15rem; line-height: 1.6; color: rgba(255,255,255,.9); }
.contact-line strong { color: #fff; font-weight: 500; }
.contact-line a {
  font-family: var(--serif); font-variation-settings: "opsz" 11; font-weight: 500;
  font-size: clamp(1.4rem, 3vw, 2rem); color: var(--gold);
  text-decoration-thickness: 1px; text-underline-offset: .2em;
}