/* Coble & Cliff. Faustina + Hanken Grotesk on a deep sea-slate ground.
   ⛔ THE GROUND IS THE FOOTPRINT AXIS, above accent colour. 14 of 30 siblings are warm
   off-white; this is one of three darks and the only blue-biased one. */
:root{--gr:#16232b;--gr2:#1b2c36;--ch:#e8e4dc;--dim:#9dabb3;--ac:#c25a3f;--ln:#2b3f4a}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--gr);color:var(--ch);
  font:400 17px/1.68 "Hanken Grotesk",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding:0 26px}
a{color:inherit}
h1,h2,h3,.pl-h,.fname{font-family:Faustina,Georgia,serif;font-weight:600;
  letter-spacing:-.01em;text-wrap:balance}
img{display:block;max-width:100%;height:auto}
.k{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ac);
  font-weight:600}

/* ---- header. ⭐ INLINE EXPAND: the panel is IN THE FLOW, so opening it pushes the
   page down instead of covering it. No overlay, no fixed positioning, no js. ---- */
.hd{border-bottom:1px solid var(--ln)}
.hd-in{display:flex;align-items:center;gap:26px;padding:20px 26px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto}
.mk{width:52px;height:29px;color:var(--ch)}
.bt{font-family:Faustina,Georgia,serif;font-size:23px;font-weight:600;letter-spacing:.01em}
.nv{margin-left:auto;display:flex;gap:26px}
.nv a{text-decoration:none;font-size:15px;color:var(--dim);padding-bottom:2px;
  border-bottom:1px solid transparent}
.nv a:hover,.nv a.on{color:var(--ch);border-bottom-color:var(--ac)}
.tog{display:none;margin-left:auto;text-decoration:none;font-size:14px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ch);
  border:1px solid var(--ln);padding:8px 14px;border-radius:2px}
/* ⚠️ the panel is height:0 + overflow hidden rather than display:none, so the open
   state can animate the page opening up. :target is the whole mechanism. */
.panel{max-height:0;overflow:hidden;transition:max-height .32s ease;border-bottom:0 solid var(--ln)}
.panel:target{max-height:340px;border-bottom-width:1px}
.panel .wrap{display:flex;flex-direction:column;padding-top:8px;padding-bottom:18px}
.panel a{text-decoration:none;color:var(--ch);font-size:19px;padding:11px 0;
  border-bottom:1px solid var(--ln)}
.panel a:last-child{border-bottom:0}
.panel:target ~ *{}
@media(max-width:860px){
  .nv{display:none} .tog{display:inline-block} .cl{display:none}
  .panel:target{max-height:340px}
  .hd-in{padding:16px 22px} .bt{font-size:20px} .mk{width:44px;height:25px}
}

/* ---- the homepage hero: text INSIDE the photograph ---- */
.hero,.ph{position:relative;background:#0e1a20}
.hero-img{width:100%;height:clamp(420px,62vh,660px);object-fit:cover;opacity:.72}
.ph-img{width:100%;height:clamp(340px,48vh,520px);object-fit:cover;opacity:.66}
.ph.sm .ph-img{height:clamp(240px,32vh,360px)}
/* ⭐⭐ THE SCRIM IS A GRADIENT FROM THE BOTTOM LEFT, not a flat overlay. The photos were
   briefed with a calm lower-left for exactly this - a flat 40% wash over the whole frame
   kills the picture, a corner gradient leaves most of it alone. */
.hero-t,.ph-t{position:absolute;inset:0;display:flex;align-items:flex-end;
  background:linear-gradient(to top,rgba(10,20,26,.88) 0%,rgba(10,20,26,.55) 34%,rgba(10,20,26,0) 68%)}
.hero-t .wrap,.ph-t .wrap{width:100%;padding-bottom:clamp(28px,5vw,56px)}
.hero-t h1{font-size:clamp(34px,6vw,62px);line-height:1.04;margin:10px 0 14px;max-width:15ch}
.ph-t h1{font-size:clamp(28px,4.6vw,48px);line-height:1.08;margin:9px 0 12px;max-width:20ch}
.ph-t .k a{text-decoration:none}
.stand{font-size:clamp(17px,2vw,20px);color:#cfd8dc;max-width:52ch;text-wrap:pretty}

/* ---- ⭐ ASYMMETRIC PHOTO-PLATE RHYTHM: one full, then a pair of halves ---- */
.rhythm{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px 0 0}
.pl{position:relative;display:block;text-decoration:none;overflow:hidden;background:#0e1a20}
.pl.full{grid-column:1/-1}
.plate-img{width:100%;height:100%;object-fit:cover;opacity:.62;
  transition:opacity .5s,transform .8s cubic-bezier(.2,.6,.2,1)}
.pl.full .plate-img{height:clamp(300px,42vw,460px)}
.pl.half .plate-img{height:clamp(230px,28vw,340px)}
.pl:hover .plate-img{opacity:.78;transform:scale(1.035)}
.pl-t{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(20px,3vw,38px);
  background:linear-gradient(to top,rgba(10,20,26,.9) 0%,rgba(10,20,26,.4) 42%,rgba(10,20,26,0) 76%)}
.pl-k{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ac);
  font-weight:600;margin-bottom:7px}
.pl-h{font-size:clamp(20px,2.4vw,31px);line-height:1.14;max-width:19ch;text-wrap:balance}
.pl.half .pl-h{font-size:clamp(18px,1.9vw,24px)}
@media(max-width:720px){
  .rhythm{grid-template-columns:1fr}
  .pl.half{grid-column:1/-1}
  .pl.half .plate-img{height:clamp(230px,46vw,300px)}
}

/* ---- article ---- */
.bd{max-width:660px;margin:0 auto;padding:clamp(40px,6vw,68px) 0 20px}
.by{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);
  padding-bottom:20px;margin-bottom:26px;border-bottom:1px solid var(--ln)}
.by span{color:var(--ac);padding:0 5px}
.bd p{margin:0 0 20px;color:#cdd6da;text-wrap:pretty}
.bd h2{font-size:clamp(21px,2.6vw,26px);margin:38px 0 14px;color:var(--ch)}
.bd a{color:var(--ac);text-decoration:none;
  border-bottom:1px solid rgba(194,90,63,.42);padding-bottom:1px}
.bd a:hover{border-bottom-color:var(--ac)}
.ch{max-width:640px;padding:clamp(44px,6vw,72px) 0 clamp(26px,4vw,40px)}
.ch h1{font-size:clamp(32px,5vw,50px);line-height:1.06;margin:10px 0 14px}

/* ---- more from ---- */
.more{max-width:660px;margin:0 auto;padding:14px 0 clamp(50px,7vw,80px)}
.mh{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  padding-top:26px;border-top:1px solid var(--ln);margin-bottom:18px}
.mg{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mg a{text-decoration:none;font-family:Faustina,Georgia,serif;font-size:19px;line-height:1.26;
  background:var(--gr2);padding:19px 20px;border-radius:2px;text-wrap:balance;
  transition:background .25s}
.mg a:hover{background:#223641}
.mg span{display:block;font-family:"Hanken Grotesk",sans-serif;font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ac);margin-bottom:6px}
@media(max-width:640px){.mg{grid-template-columns:1fr}}

/* ---- footer. ⭐ centred mark over a centred single row, and NO copyright line -
   the About/Contact/Privacy triplet and a universal © are both network footprints. ---- */
.ft{border-top:1px solid var(--ln);margin-top:0;padding:clamp(46px,6vw,70px) 0 clamp(40px,5vw,58px);
  text-align:center;background:#121e25}
.fmark{display:inline-block;color:var(--ch);opacity:.9}
.fmark .mk{width:74px;height:41px}
.fname{font-size:21px;margin:12px 0 4px}
.ftag{font-size:14.5px;color:var(--dim);margin-bottom:26px}
.fl{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px}
.fl a{text-decoration:none;font-size:14px;color:var(--dim)}
.fl a:hover{color:var(--ch)}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}