/* Overlanding Voyages — one stylesheet. Hand-coded, no build step, no JS. */

/* ---------- Fonts: self-hosted, latin subset, SIL OFL ---------- */
@font-face{
  font-family:"Newsreader";
  src:url(fonts/newsreader-latin-var.woff2) format("woff2");
  font-weight:400 500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Inter Tight";
  src:url(fonts/intertight-latin-var.woff2) format("woff2");
  font-weight:400 600;
  font-style:normal;
  font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  --ground:#F7F6F3;
  --ground-2:#EDEBE6;
  --ink:#22201C;
  --ink-deep:#161512;
  --muted:#635E55;
  --accent:#8A5418;
  --accent-on-dark:#D9A05B;
  --muted-on-dark:#B8B0A2;
  --rule:rgba(34,32,28,0.13);
  --rule-on-dark:rgba(247,246,243,0.16);

  --display:"Newsreader",Georgia,serif;
  --text:"Inter Tight",Helvetica,Arial,sans-serif;

  --gutter:24px;
  --measure:66ch;
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:var(--text);
  font-weight:400;
  font-size:17px;
  line-height:1.7;
}
img,svg,picture{display:block;max-width:100%}

/* ---------- Type scale ---------- */
h1{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.5rem,5.5vw,3.75rem);
  line-height:1.08;
  letter-spacing:-0.01em;
  text-align:left;
  text-wrap:balance;
}
h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.75rem,3vw,2.25rem);
  line-height:1.15;
}
h3{font-family:var(--text);font-size:12px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent)}
p{max-width:var(--measure)}

.lede{
  font-family:var(--display);
  font-weight:400;
  font-size:21px;
  line-height:1.45;
  color:var(--ink);
  max-width:var(--measure);
}
.term{
  font-family:var(--display);
  font-weight:500;
  font-size:17px;
  color:var(--ink);
  text-transform:none;
}
.eyebrow{
  font-family:var(--text);
  font-weight:600;
  font-size:12px;
  line-height:1.4;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
}
.datum{
  font-family:var(--text);
  font-weight:600;
  font-size:11px;
  line-height:1.5;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--muted);
  max-width:none;
}
figcaption{
  font-family:var(--text);
  font-weight:400;
  font-size:12px;
  line-height:1.5;
  color:var(--muted);
}

a{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:0.2em;
  text-decoration-thickness:1px;
}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.eyebrow-rule{
  display:block;
  width:40px;
  height:2px;
  background:var(--accent);
  border:0;
  margin:0 0 1rem;
}

/* ---------- Grid ---------- */
.wrap{max-width:1200px;margin-inline:auto;padding-inline:var(--gutter)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter)}
.col-text{grid-column:1/-1}
.col-wide{grid-column:1/-1}
@media(min-width:720px){
  .col-text{grid-column:2/9}
  .col-wide{grid-column:2/12}
}
section{padding-block:clamp(3rem,7vw,5.5rem)}
.section-tight{padding-block:clamp(2rem,4vw,3rem)}
/* a section following a full-bleed band: a considered pause, not a gap */
.after-band{padding-top:clamp(1.75rem,3vw,2.5rem);padding-bottom:clamp(3rem,7vw,5.5rem)}
.stack>*+*{margin-top:1.1rem}
.stack-lg>*+*{margin-top:1.75rem}

/* ---------- COMPONENT 1: .ledger ---------- */
.ledger{list-style:none;counter-reset:ledger;max-width:none}
.ledger li{
  counter-increment:ledger;
  position:relative;
  border-top:1px solid var(--rule);
  padding-block:20px;
  max-width:var(--measure);
}
.ledger li::before{
  content:counter(ledger,decimal-leading-zero);
  display:block;
  margin-bottom:8px;
  font-family:var(--text);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.12em;
  color:var(--muted);
}
.ledger strong{
  font-family:var(--display);
  font-weight:500;
  font-size:17px;
  color:var(--ink);
  text-transform:none;
}
@media(min-width:900px){
  .ledger li::before{
    position:absolute;
    left:-72px;
    top:20px;
    margin-bottom:0;
    width:56px;
    text-align:right;
  }
}
.band .ledger li{border-top-color:var(--rule-on-dark)}
.band .ledger li::before{color:var(--muted-on-dark)}
.band .ledger strong{color:var(--ground)}

/* ---------- COMPONENT 2: .datum ---------- */
.datum-line{
  border-bottom:1px solid var(--rule);
  padding-bottom:10px;
  margin-bottom:20px;
}
.band .datum{color:var(--muted-on-dark)}
.band .datum-line{border-bottom-color:var(--rule-on-dark)}

/* ---------- COMPONENT 3: figure + figcaption ---------- */
figure{margin:0}
figcaption{margin-top:10px}
figcaption::before{
  content:"";
  display:block;
  width:24px;
  height:1px;
  background:var(--accent);
  margin-bottom:10px;
}
.band figcaption{color:var(--muted-on-dark)}
.band figcaption::before{background:var(--accent-on-dark)}

/* ---------- COMPONENT 4: .split ---------- */
.split{display:grid;grid-template-columns:1fr}
.split-media{display:flex;flex-direction:column;margin:0}
.split-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  border:0;
  border-radius:0;
  aspect-ratio:16/9;
}
.split-media figcaption{padding:10px var(--gutter) 0}
.split-panel{
  background:var(--ground);
  padding:clamp(2rem,5vw,72px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.split-panel>*{max-width:60ch}
@media(min-width:900px){
  .split{grid-template-columns:1fr 1fr;min-height:min(78vh,720px)}
  .split-media{display:grid;grid-template-rows:1fr auto}
  .split-media img{height:100%;min-height:0;aspect-ratio:auto}
  .split-media figcaption{padding-bottom:20px}
}

/* ---------- COMPONENT 5: .band ---------- */
.band{
  background:var(--ink-deep);
  color:var(--ground);
  padding-block:clamp(3rem,6vw,4.5rem);
}
.band h1,.band h2,.band .lede,.band .term,.band strong{color:var(--ground)}
.band .eyebrow,.band h3{color:var(--accent-on-dark)}
.band .eyebrow-rule{background:var(--accent-on-dark)}
.band a{color:var(--accent-on-dark)}
.band .muted{color:var(--muted-on-dark)}
.band hr{border-color:var(--rule-on-dark)}

/* ---------- COMPONENT 6: .spec ---------- */
.spec{max-width:none}
.spec div{
  display:grid;
  grid-template-columns:1fr;
  gap:4px;
  border-top:1px solid var(--rule);
  padding-block:14px;
}
.spec dt{
  font-family:var(--text);
  font-weight:600;
  font-size:12px;
  line-height:1.4;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
}
.spec dd{font-family:var(--text);font-size:15px;line-height:1.6;color:var(--ink);max-width:var(--measure)}
@media(min-width:720px){
  .spec div{grid-template-columns:minmax(0,11rem) 1fr;column-gap:var(--gutter);row-gap:6px;align-items:baseline}
  .spec dt{grid-column:1;grid-row:1}
  .spec dd{grid-column:2}
  /* a term that wraps must not stretch the first value row */
  .spec-group dt{grid-row:1 / span 20;align-self:start}
}
.spec-group>div{padding-block:18px}
.band .spec div{border-top-color:var(--rule-on-dark)}
.band .spec dt{color:var(--accent-on-dark)}
.band .spec dd{color:var(--ground)}

/* ---------- Pull quotes ---------- */
.pull{
  font-family:var(--display);
  font-size:clamp(1.35rem,2.6vw,1.75rem);
  line-height:1.4;
  max-width:38ch;
  text-align:left;
}
.pull-single{text-align:center;margin-inline:auto}

/* ---------- Closing statement (ledger tail) ---------- */
.ledger-close{
  font-family:var(--display);
  font-size:21px;
  line-height:1.45;
  text-align:left;
  border-top:1px solid var(--rule);
  margin-top:32px;
  padding-top:32px;
  max-width:var(--measure);
}

/* ---------- Header ---------- */
.site-head{border-bottom:1px solid var(--rule);background:var(--ground)}
.site-head .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem 2rem;padding-block:1.1rem}
.brand{
  font-family:var(--display);
  font-weight:500;
  font-size:26px;
  line-height:1.1;
  letter-spacing:0.06em;
  color:var(--ink);
  text-decoration:none;
  white-space:nowrap;
}
.brand:hover{color:var(--accent)}
.site-nav{display:flex;flex-wrap:wrap;gap:0.25rem;margin-left:auto}
.site-nav a{
  color:var(--ink);
  text-decoration:none;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  padding:0.75rem 0.9rem;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  border-bottom:2px solid transparent;
  transition:color 180ms ease;
}
.site-nav a:hover{color:var(--accent)}
.site-nav a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- Hero ---------- */
.hero{height:clamp(52vh,60vh,640px);overflow:hidden}
.hero picture,.hero img{width:100%;height:100%;object-fit:cover}

/* Credentials strip (inside .band) */
.creds-list{list-style:none;display:grid;grid-template-columns:1fr;column-gap:var(--gutter);max-width:none}
@media(min-width:640px){.creds-list{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.creds-list{grid-template-columns:repeat(4,1fr)}}
.creds-list li{
  font-family:var(--text);
  font-size:11px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--muted-on-dark);
  border-top:1px solid var(--rule-on-dark);
  padding-block:14px;
}

/* ---------- Cards ---------- */
.card{background:var(--ground-2);border:0;border-radius:0;padding:clamp(1.75rem,4vw,48px)}
.cards{display:grid;gap:var(--gutter);grid-template-columns:1fr}
@media(min-width:640px){.cards{grid-template-columns:1fr 1fr}}
.card p{max-width:56ch}
.card-link{display:block;text-decoration:none;color:inherit;transition:background-color 180ms ease}
.card-link:hover{background:#E4E1DA}
.card-link .card-title{margin-bottom:0.6rem}
.card-link .card-body{color:var(--muted)}

/* ---------- Figures ---------- */
.figure-full img{width:100%;height:clamp(320px,52vh,560px);object-fit:cover}
.figure-inset img{width:100%;height:auto;border:1px solid var(--rule)}

/* ---------- Contract chain ---------- */
.chain{background:var(--ground-2);padding:clamp(1.75rem,4vw,48px)}
.chain-row{
  display:flex;flex-wrap:wrap;gap:0.6rem 1rem;align-items:baseline;
  font-family:var(--display);font-size:clamp(1.1rem,2vw,1.35rem);line-height:1.4;
}
.chain-row .arrow{color:var(--accent)}
/* stacked on narrow screens — the arrow must point the way the chain runs */
@media(max-width:899px){
  .chain-row{flex-direction:column;align-items:flex-start;gap:0.35rem}
  .chain-row .arrow{display:inline-block;transform:rotate(90deg)}
}
.chain figcaption{color:var(--muted);margin-top:1rem;max-width:var(--measure)}
.chain figcaption::before{content:none}


/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  background:var(--ink);
  color:var(--ground);
  border:0;
  border-radius:0;
  padding:16px 32px;
  font-family:var(--text);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:background-color 180ms ease;
}
.btn:hover{background:var(--accent)}

/* ---------- Forms ---------- */
form{max-width:34rem}
label{
  display:block;
  margin-top:1.75rem;
  margin-bottom:0.5rem;
  font-family:var(--text);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
}
input[type="text"],input[type="email"],textarea{
  width:100%;
  padding:14px;
  font:inherit;
  color:var(--ink);
  background:var(--ground-2);
  border:1px solid var(--rule);
  border-radius:0;
}
textarea{min-height:7rem;resize:vertical}
.form-note{color:var(--muted);margin-top:1.25rem;max-width:var(--measure)}
.hidden-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Footer ---------- */
.site-foot{border-top:1px solid var(--rule);padding-block:clamp(2.5rem,5vw,3.5rem);color:var(--muted);font-size:14px}
.foot-mark{display:flex;align-items:baseline;gap:12px;margin-bottom:1.25rem;max-width:none}
.foot-mark img{width:28px;height:28px;flex:none;align-self:baseline}
.foot-brand{
  font-family:var(--display);
  font-weight:500;
  font-size:19px;
  line-height:1.1;
  letter-spacing:0.06em;
  color:var(--ink);
}
.site-foot p{max-width:none}

/* ---------- Utilities ---------- */
.contact{color:var(--muted)}
.rule{border:none;border-top:1px solid var(--rule);max-width:1200px;margin-inline:auto}

/* ---------- Motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}