/* ============================================================
   Sahib Salaam
   Palette: indigo (the dye India gave its name to), brass, unbleached paper.
   Light and dark are the same colours with their roles swapped.
   ============================================================ */

:root{
  --paper:#EFE9DD;
  --paper-2:#E5DDCC;
  --paper-3:#DACFB9;
  --deep:#111629;
  --deep-2:#1A2138;
  --on-deep:#EFE9DD;
  --ink:#15192B;
  --ink-soft:#4C546E;
  --ink-faint:#8A8E9C;
  --rule:#CFC6B1;
  --rule-soft:#DED5C2;
  --brass:#8A6A22;
  --brass-bright:#B08A33;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0E1320;
    --paper-2:#151C2E;
    --paper-3:#1D253C;
    --deep:#080B14;
    --deep-2:#131A2B;
    --on-deep:#E7E2D6;
    --ink:#E7E2D6;
    --ink-soft:#A6ACBE;
    --ink-faint:#757C90;
    --rule:#2A3350;
    --rule-soft:#1E2740;
    --brass:#C9A153;
    --brass-bright:#DDB870;
  }
}

:root[data-theme="dark"]{
  --paper:#0E1320;
  --paper-2:#151C2E;
  --paper-3:#1D253C;
  --deep:#080B14;
  --deep-2:#131A2B;
  --on-deep:#E7E2D6;
  --ink:#E7E2D6;
  --ink-soft:#A6ACBE;
  --ink-faint:#757C90;
  --rule:#2A3350;
  --rule-soft:#1E2740;
  --brass:#C9A153;
  --brass-bright:#DDB870;
}

*{box-sizing:border-box}
img{max-width:100%}
[hidden]{display:none !important}
html{color-scheme:light dark}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Spectral","Iowan Old Style",Georgia,serif;
  font-weight:300;
  font-size:1.075rem;
  line-height:1.78;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------------- primitives ---------------- */

.sheet{
  width:100%;
  max-width:1240px;
  margin-inline:auto;
  padding-inline:26px;
}
@media (max-width:640px){ .sheet{padding-inline:20px} }

.measure{max-width:33rem}
.measure-wide{max-width:44rem}

.mono{
  font-family:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  font-size:.66rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:400;
}

.display{
  font-family:"Newsreader","Iowan Old Style",Georgia,serif;
  font-weight:300;
  line-height:1.02;
  letter-spacing:-.022em;
  text-wrap:balance;
}

a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
em{font-style:italic}
figure{margin:0}

.tbc{color:var(--brass);border-bottom:1px dotted var(--brass);font-style:normal}

/* ---------------- masthead ---------------- */

.masthead .sheet{
  padding-block:30px 24px;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px 32px;flex-wrap:wrap;
}
.masthead.over{
  position:absolute;top:0;left:0;right:0;z-index:3;
}
.masthead.over .sheet{border:0}
.masthead.over .wordmark .name,
.masthead.over .wordmark .sub,
.masthead.over nav.top a{color:rgba(239,233,221,.94)}
.masthead.over nav.top a:hover{color:#fff}

.wordmark{text-decoration:none;display:block;line-height:1}
.wordmark .name{
  font-family:"Newsreader",Georgia,serif;font-weight:300;
  font-size:1.28rem;letter-spacing:.34em;text-transform:uppercase;display:block;
}
.wordmark .sub{display:block;margin-top:8px;color:var(--ink-faint)}

nav.top{display:flex;gap:28px;flex-wrap:wrap}
nav.top a{
  text-decoration:none;color:var(--ink-soft);
  border-bottom:1px solid transparent;padding-bottom:3px;
  transition:color .2s ease,border-color .2s ease;
}
nav.top a:hover,nav.top a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--brass)}

/* ---------------- sections & rhythm ---------------- */

section{padding-block:clamp(58px,8vw,116px)}
section.tight{padding-block:clamp(34px,4vw,56px)}
section.flush{padding-block:0}

.eyebrow{color:var(--brass);display:block;margin-bottom:26px}

h1.hero{font-size:clamp(3rem,8.5vw,6.4rem);margin:0}

h2{
  font-family:"Newsreader",Georgia,serif;font-weight:300;
  font-size:clamp(1.85rem,4vw,3rem);
  line-height:1.1;letter-spacing:-.018em;margin:0 0 30px;text-wrap:balance;
}
h3{font-family:"Newsreader",Georgia,serif;font-weight:400;font-size:1.25rem;line-height:1.3;margin:0 0 10px}

p{margin:0 0 1.2em}
p:last-child{margin-bottom:0}

.lede{
  font-family:"Newsreader",Georgia,serif;font-weight:300;
  font-size:clamp(1.3rem,2.7vw,1.85rem);
  line-height:1.38;letter-spacing:-.012em;color:var(--ink);
}
.aside-note{color:var(--ink-soft)}

/* ---------------- photographs ---------------- */
/* No scrim, no stamped label. The caption sits quietly underneath. */

.shot{display:block}
.frame{
  position:relative;width:100%;overflow:hidden;
  background:linear-gradient(152deg,var(--deep) 0%,var(--paper-3) 100%);
}
/* the photograph fills its frame, whatever its own proportions */
.frame > img{
  position:absolute;inset:0;
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center;
}
.frame.w{aspect-ratio:16/9}
.frame.ww{aspect-ratio:21/9}
.frame.t{aspect-ratio:4/5}
.frame.sq{aspect-ratio:1/1}
.frame.p{aspect-ratio:3/4}

.cap{
  display:block;margin-top:12px;
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);line-height:1.75;max-width:46ch;
}
.cap b{color:var(--ink-soft);font-weight:400}
.cap a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule)}
.cap a:hover{color:var(--brass);border-bottom-color:var(--brass)}

/* full-bleed: sits directly in <section>, outside .sheet */
.bleed{width:100%;display:block}
.bleed .frame{aspect-ratio:21/9}
@media (max-width:760px){ .bleed .frame{aspect-ratio:4/3} }
.bleed .cap{max-width:1240px;margin-inline:auto;padding-inline:26px}

/* two photographs side by side */
.duo{display:grid;gap:26px;grid-template-columns:1fr}
@media (min-width:720px){ .duo{grid-template-columns:1fr 1fr;gap:30px} }

/* a photograph and a block of text, side by side, alternating */
.pair{display:grid;gap:30px;align-items:center}
@media (min-width:900px){
  .pair{grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,84px)}
  .pair.flip .pair-media{order:2}
}
.pair-body{max-width:34rem}

/* ---------------- the opening ---------------- */

.opening{position:relative;isolation:isolate}
.opening .frame{aspect-ratio:auto;height:clamp(460px,76vh,780px)}
.opening .frame::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,13,24,.82) 0%,rgba(10,13,24,.34) 42%,rgba(10,13,24,.28) 100%);
}
.opening .titling{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding-block:0 clamp(38px,6vw,72px);
}
.opening .titling .eyebrow{color:rgba(239,233,221,.8)}
.opening h1.hero{color:#F4EFE4}
.opening .cap{
  color:rgba(239,233,221,.5);margin-top:18px;
}
.opening .cap a{border-bottom-color:rgba(239,233,221,.3)}
.opening .cap a:hover{color:rgba(239,233,221,.9)}

/* ---------------- pull quote ---------------- */

.pull{
  max-width:40rem;margin-block:0;
  padding-top:30px;border-top:1px solid var(--brass);
}
.pull p{
  font-family:"Newsreader",Georgia,serif;font-weight:300;
  font-size:clamp(1.55rem,3.4vw,2.45rem);
  line-height:1.22;letter-spacing:-.018em;margin:0;text-wrap:balance;
}
.pull .who{
  display:block;margin-top:20px;color:var(--ink-faint);
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
}

/* ---------------- marginal rail ---------------- */

.railed{display:grid;gap:40px}
@media (min-width:980px){
  .railed{grid-template-columns:14rem 1fr;gap:0 clamp(48px,6vw,96px);align-items:start}
}
.rail{display:grid;gap:18px;border-top:1px solid var(--rule);padding-top:18px}
.rail div{display:grid;gap:3px}
.rail .k{
  color:var(--ink-faint);font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-size:.6rem;letter-spacing:.17em;text-transform:uppercase;
}
.rail .v{font-size:.95rem;line-height:1.5;color:var(--ink)}
.rail-portrait{
  width:100%;max-width:190px;          /* stays a portrait when the rail collapses */
  aspect-ratio:4/5;object-fit:cover;display:block;margin-bottom:24px;
}

/* ---------------- zone index ---------------- */

.places{border-top:1px solid var(--rule);margin-top:10px}
.place{
  border-bottom:1px solid var(--rule-soft);
  display:grid;gap:6px 3rem;padding-block:30px;
  text-decoration:none;color:inherit;
}
@media (min-width:780px){ .place{grid-template-columns:18rem 1fr;align-items:baseline} }
.place .name{
  font-family:"Newsreader",Georgia,serif;font-weight:400;
  font-size:1.45rem;line-height:1.16;letter-spacing:-.012em;
}
.place .where{
  display:block;color:var(--ink-faint);
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;margin-top:9px;
}
.place .angle{color:var(--ink-soft);max-width:40rem;display:block}
.place[href]{transition:background .22s ease}
.place[href]:hover{background:var(--paper-2)}
.place[href]:hover .name{color:var(--brass)}
.place .more{
  color:var(--brass);font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  display:inline-block;margin-top:12px;
}

/* ---------------- three-step sequence ---------------- */

.steps{display:grid;gap:36px}
@media (min-width:860px){ .steps{grid-template-columns:repeat(3,1fr);gap:0 clamp(28px,3.4vw,54px)} }
.step{border-top:1px solid var(--rule);padding-top:20px}
.step .k{
  color:var(--brass);font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;display:block;margin-bottom:16px;
}
.step p{color:var(--ink-soft);font-size:1rem}

/* ---------------- dark panel ---------------- */

.deep{background:var(--deep);color:var(--on-deep)}
.deep h2,.deep .lede,.deep .pull p{color:var(--on-deep)}
.deep p{color:rgba(239,233,221,.8)}
.deep .aside-note{color:rgba(239,233,221,.6)}
.deep .eyebrow{color:var(--brass-bright)}
.deep .rail{border-color:rgba(239,233,221,.22)}
.deep .rail .k{color:rgba(239,233,221,.48)}
.deep .rail .v{color:var(--on-deep)}
.deep a{color:var(--brass-bright)}
.deep .pull{border-top-color:var(--brass-bright)}
.deep .pull .who{color:rgba(239,233,221,.5)}
.deep .cap{color:rgba(239,233,221,.45)}
.deep .entry{border-color:rgba(239,233,221,.18)}
.deep .entry .when{color:var(--brass-bright)}
.deep .notfor li{border-color:rgba(239,233,221,.18);color:rgba(239,233,221,.82)}

/* ---------------- entries (days, experiences, places-in-a-zone) ---------------- */

.entries{display:grid;gap:0;border-top:1px solid var(--rule)}
.entry{
  display:grid;gap:8px 3rem;
  padding-block:30px;border-bottom:1px solid var(--rule-soft);
}
@media (min-width:820px){ .entry{grid-template-columns:10rem 1fr;align-items:baseline} }
.entry .when{
  color:var(--brass);font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;line-height:2;
}
.entry .what{max-width:38rem}
.entry .what strong{
  font-weight:400;font-family:"Newsreader",Georgia,serif;
  font-size:1.2rem;line-height:1.3;display:block;margin-bottom:.45em;
}

/* ---------------- plainly (not-for) ---------------- */

.notfor{display:grid;gap:0;border-top:1px solid var(--rule);max-width:42rem;padding-left:0;margin:0}
.notfor li{
  list-style:none;border-bottom:1px solid var(--rule-soft);
  padding-block:17px;color:var(--ink-soft);padding-left:1.7rem;position:relative;
}
.notfor li::before{content:"—";position:absolute;left:0;color:var(--brass)}

/* ---------------- people ---------------- */

.folk{display:grid;gap:36px 2.4rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:44px}
.folk .frame{aspect-ratio:1/1}
.folk .who{
  font-family:"Newsreader",Georgia,serif;font-weight:400;
  font-size:1.16rem;line-height:1.25;margin-top:18px;display:block;
}
.folk .role{
  color:var(--brass);font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;display:block;margin-top:8px;
}
.folk p{color:var(--ink-soft);font-size:.97rem;margin-top:10px}
.folk .placeholder{
  display:flex;align-items:center;justify-content:center;padding:20px;
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(239,233,221,.55);text-align:center;line-height:1.8;
}

/* ---------------- one guest quoted ---------------- */

.quote{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding-block:38px;max-width:40rem}
.quote blockquote{
  margin:0;font-family:"Newsreader",Georgia,serif;font-weight:300;
  font-size:clamp(1.2rem,2.3vw,1.5rem);line-height:1.46;color:var(--ink);
}
.quote blockquote p + p{margin-top:.9em}
.quote .attrib{
  display:block;margin-top:24px;color:var(--ink-faint);
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
}

/* ---------------- the letter ---------------- */

.letter{display:grid;gap:20px;max-width:36rem;margin-top:38px}
.field{display:grid;gap:9px}
.field label{
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);
}
.deep .field label{color:rgba(239,233,221,.55)}
.field input,.field textarea{
  font-family:"Spectral",Georgia,serif;font-weight:300;font-size:1rem;
  color:inherit;background:transparent;border:0;border-bottom:1px solid var(--rule);
  padding:10px 2px;border-radius:0;
}
.deep .field input,.deep .field textarea{border-bottom-color:rgba(239,233,221,.3)}
.field textarea{resize:vertical;min-height:5.5rem;line-height:1.6}
.field input:focus,.field textarea:focus{outline:0;border-bottom-color:var(--brass)}

button.send{
  justify-self:start;margin-top:10px;background:transparent;color:var(--brass);
  border:1px solid var(--brass);padding:14px 32px;
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;
  transition:background .22s ease,color .22s ease;
}
.deep button.send{color:var(--brass-bright);border-color:var(--brass-bright)}
button.send:hover{background:var(--brass);color:var(--paper)}
.deep button.send:hover{background:var(--brass-bright);color:var(--deep)}
.sent{color:var(--brass);margin-top:16px}
.deep .sent{color:var(--brass-bright)}

/* ---------------- footer ---------------- */

footer{border-top:1px solid var(--rule);color:var(--ink-faint)}
footer .sheet{padding-block:48px 64px;display:flex;gap:20px 48px;flex-wrap:wrap;justify-content:space-between;align-items:flex-end}
footer nav{display:flex;gap:26px;flex-wrap:wrap}
footer a{text-decoration:none;color:var(--ink-soft)}
footer a:hover{color:var(--brass)}

@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* ---------------- bands: photographs running left to right, edge to edge ---------------- */
/* The dominant image device. A band spans the full width of the page with no
   outer gutter, so the photographs read as one continuous horizontal register. */

.band{width:100%;display:block}
.band-row{
  display:grid;
  gap:2px;                       /* hairline, so the band reads as one object */
  grid-template-columns:1fr;
}
.band-row .frame{aspect-ratio:3/2}

@media (min-width:700px){
  .band-row.two{grid-template-columns:1fr 1fr}
  .band-row.two .frame{aspect-ratio:4/3}
}
@media (min-width:900px){
  .band-row.three{grid-template-columns:repeat(3,1fr)}
  .band-row.three .frame{aspect-ratio:1/1}
  .band-row.wide-centre{grid-template-columns:1fr 1.5fr 1fr}
  .band-row.wide-centre .frame{aspect-ratio:1/1}
}

/* a band whose captions sit under it, aligned to the page gutter */
.band .cap{
  max-width:1240px;margin-inline:auto;padding-inline:26px;margin-top:14px;
}
@media (max-width:640px){ .band .cap{padding-inline:20px} }

/* tall band — for a single sweeping horizontal photograph */
.band.tallish .frame{aspect-ratio:21/9}
@media (max-width:760px){ .band.tallish .frame{aspect-ratio:4/3} }

/* a band set inside the dark panel keeps its own ground */
.deep .band-row{background:rgba(239,233,221,.1)}