/* aaronnoblephotography.com ("Second Shooter") — style-v1
   Swish List PBN. Caption-mosaic archetype: image tiles with the headline set
   over the foot of the picture, two up, every third tile spanning full width.
   Centred crest above a centred nav; nav collapses at 700px (measured need
   613px, 87px headroom). 2-column footer split.
   Palette is deliberately NOT theswishlist.com's — a PBN must not share a
   design language with the site it links. */

:root{
  --leaf:#fcfbf9;
  --char:#1f1d1b;
  --dust:#6e6862;
  --ink:#2b2825;
  --brass:#8a6a3a;
  --slate:#3f5560;
  --edge:#e6e1da;
  --grid:1180px;
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--leaf);color:var(--ink);
  font-family:Jost,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--slate)}
p{text-wrap:pretty}
h1,h2,h3,h4{margin:0;font-family:Lora,Georgia,serif;text-wrap:balance}

.grid{width:100%;max-width:var(--grid);margin:0 auto;padding:0 30px}

/* ---------- centred crest over centred nav ---------- */
.crown{border-bottom:1px solid var(--edge);background:var(--leaf)}
.crownmid{display:flex;flex-direction:column;align-items:center;padding-top:30px;padding-bottom:16px;position:relative}
.crest{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:inherit;gap:8px}
.crest img{width:58px;height:auto}
.crestname{
  font-family:Lora,Georgia,serif;font-weight:600;font-size:26px;
  letter-spacing:.055em;text-transform:uppercase;line-height:1;
}
.crestsub{font-size:12.5px;color:var(--dust);letter-spacing:.09em}
.nv{display:flex;justify-content:center;gap:24px;padding-bottom:14px}
.nv a{
  color:var(--ink);text-decoration:none;font-size:15px;font-weight:500;
  white-space:nowrap;padding:5px 0;border-bottom:1px solid transparent;
}
.nv a:hover{border-bottom-color:var(--brass)}
.nv a.live{border-bottom-color:var(--brass);color:var(--brass)}
.tap{
  display:none;position:absolute;right:30px;top:34px;background:none;border:0;
  cursor:pointer;width:42px;height:42px;padding:9px;flex-direction:column;justify-content:center;gap:5px;
}
.tap span{display:block;height:2px;background:var(--char);border-radius:2px}

@media (max-width:700px){
  .tap{display:flex}
  .nv{display:none;flex-direction:column;align-items:stretch;gap:0;padding-bottom:8px}
  .nv.show{display:flex}
  .nv a{padding:12px 0;border-bottom:1px solid var(--edge);text-align:center}
  .nv a:hover,.nv a.live{border-bottom-color:var(--edge)}
  .nv a.live{color:var(--brass)}
}

.leaf{padding-top:46px;padding-bottom:70px}

.intro{max-width:660px;margin:0 auto 48px;text-align:center}
.intro h1{font-size:clamp(29px,4.4vw,41px);font-weight:600;line-height:1.15;margin-bottom:14px}
.intro p{margin:0;color:var(--dust);font-size:17px}

/* ---------- caption mosaic ---------- */
.mosaic{display:grid;grid-template-columns:repeat(2,1fr);gap:44px 34px}
.tile--wide{grid-column:1 / -1}
@media (max-width:760px){
  .mosaic{grid-template-columns:1fr;gap:36px}
  .tile--wide{grid-column:auto}
}
.tilepic{position:relative;display:block;text-decoration:none}
.tilepic img{width:100%;aspect-ratio:3/2;object-fit:cover}
.tile--wide .tilepic img{aspect-ratio:2.4/1}
@media (max-width:760px){.tile--wide .tilepic img{aspect-ratio:3/2}}
.tilecap{
  position:absolute;left:0;right:0;bottom:0;padding:44px 22px 18px;
  background:linear-gradient(to top,rgba(24,21,19,.9),rgba(24,21,19,.55) 55%,rgba(24,21,19,0));
  color:#fff;display:block;
}
.tileflag{
  display:block;font-family:Jost,sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-bottom:6px;
}
.tilecap h2,.tilecap h3{font-size:23px;font-weight:600;line-height:1.24;color:#fff}
.tile--wide .tilecap h2{font-size:27px}
.tilepic:hover .tilecap h2,.tilepic:hover .tilecap h3{text-decoration:underline;text-underline-offset:4px}
.tiledek{margin:12px 0 0;color:var(--dust);font-size:16px;max-width:62ch}

/* Over a picture the flag is WHITE (brass loses against the photo, whatever the
   gradient does). Outside a picture — the article kicker — it stays brass on paper. */
.tilecap .tileflag{color:#fff}
.body > .tileflag{color:var(--brass)}

/* ---------- article ---------- */
.body{max-width:690px;margin:0 auto}
.body h1{font-size:clamp(28px,4.2vw,39px);font-weight:600;line-height:1.16;margin:9px 0 12px}
.stamp{color:var(--dust);font-size:14px;margin:0 0 26px}
.bodypic{margin:0 0 28px}
.bodypic img{width:100%;aspect-ratio:3/2;object-fit:cover}
.pull{
  font-family:Lora,Georgia,serif;font-size:20.5px;line-height:1.5;font-style:italic;
  color:var(--char);margin:0 0 30px;padding-left:22px;border-left:2px solid var(--brass);
}
.body h2{font-size:24px;font-weight:600;line-height:1.3;margin:36px 0 12px}
.body p{margin:0 0 17px}
.body a{text-underline-offset:3px}

.onward{margin-top:70px;padding-top:36px;border-top:1px solid var(--edge)}
.onwardhead{
  font-family:Jost,sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass);margin-bottom:28px;text-align:center;
}

/* ---------- 2-column footer split ---------- */
.hem{margin-top:64px;border-top:1px solid var(--edge);background:#f5f2ec}
.hemsplit{display:grid;grid-template-columns:1.6fr 1fr;gap:56px;padding-top:48px;padding-bottom:34px}
@media (max-width:760px){.hemsplit{grid-template-columns:1fr;gap:32px}}
.hemname{
  font-family:Lora,Georgia,serif;font-size:19px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--char);margin:0 0 10px;
}
.hemabout p{margin:0;font-size:15.5px;color:var(--dust);max-width:52ch}
.hemnav h4{
  font-family:Jost,sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--char);margin-bottom:11px;
}
.hemnav2{margin-top:22px}
.hemlinks{display:flex;flex-direction:column;gap:8px}
.hemlinks a{color:var(--dust);text-decoration:none;font-size:15px}
.hemlinks a:hover{color:var(--brass)}
.hemrule{border-top:1px solid var(--edge);padding-top:18px;padding-bottom:26px}
.hemrule p{margin:0;font-size:13.5px;color:var(--dust)}