:root{
  --ink:#0e2229;
  --ink-2:#16333a;
  --jade:#2f6f6b;
  --jade-deep:#1f4f4d;
  --gold:#c6a35c;
  --gold-soft:#e0c894;
  --mist:#edf1ef;
  --mist-2:#e2e9e6;
  --body:#23383c;
  --muted:#5d7378;
  --line:#cdd9d5;
  --serif:"Lora",Georgia,"Times New Roman",serif;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --measure:34rem;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--mist);
  color:var(--body);
  font-family:var(--serif);
  font-size:1.0625rem;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--jade-deep);text-decoration-thickness:1px;text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
h1,h2,h3{font-weight:500;text-wrap:balance;margin:0}
.wrap{width:100%;max-width:62rem;margin-inline:auto;padding-inline:22px}
.measure{max-width:var(--measure)}

/* ---- top bar ---- */
.bar{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:40;
  background:rgba(237,241,239,.93);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.bar-in{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding-block:13px;width:100%;max-width:62rem;margin-inline:auto;padding-inline:22px}
.mark{font-family:var(--sans);font-weight:600;font-size:.82rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;white-space:nowrap}
.mark span{color:var(--gold);}
nav{display:flex;flex-wrap:wrap;gap:4px 2px;margin-left:auto}
nav a{
  font-family:var(--sans);font-size:.755rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;padding:6px 9px;border-radius:2px;
}
nav a:hover{color:var(--ink);background:var(--mist-2)}
nav a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--gold)}

/* ---- painting bands ---- */
.band{position:relative;overflow:hidden;background:var(--ink)}
.band img{width:100%;height:clamp(180px,34vw,360px);object-fit:cover;opacity:.96}
.band.tall img{height:clamp(230px,46vw,480px)}
.band-cap{
  position:absolute;inset:auto 0 0 0;padding:64px 0 20px;
  background:linear-gradient(to top,
    rgba(14,34,41,.97) 0%,
    rgba(14,34,41,.93) 38%,
    rgba(14,34,41,.62) 68%,
    rgba(14,34,41,0) 100%);
}
.band-cap .wrap{color:#fff}
.eyebrow{font-family:var(--sans);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin:0 0 6px}
.band-cap h1,.band-cap h2{font-size:clamp(1.6rem,4.4vw,2.5rem);line-height:1.18;color:#fff}

/* ---- sections ---- */
main{display:block}
.pad{padding-block:clamp(38px,6vw,68px)}
.pad-s{padding-block:clamp(26px,4vw,40px)}
h2.head{font-size:clamp(1.35rem,3.2vw,1.85rem);line-height:1.25;margin-bottom:.5em}
h3.sub{font-family:var(--sans);font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--jade);margin:0 0 .6em}
p{margin:0 0 1.05em}
.lead{font-size:1.19rem;line-height:1.62}
.rule{border:0;border-top:1px solid var(--line);margin-block:clamp(30px,4vw,46px)}

/* ---- pull quote ---- */
.pull{font-style:italic;font-size:clamp(1.18rem,2.8vw,1.55rem);line-height:1.46;
  color:var(--ink);border-left:2px solid var(--gold);padding-left:clamp(14px,3vw,26px);margin:0}
.pull cite{display:block;font-style:normal;font-family:var(--sans);font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:.9em}

/* ---- cards ---- */
.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:680px){.grid.two{grid-template-columns:1fr 1fr}}
@media(min-width:880px){.grid.four{grid-template-columns:repeat(4,1fr)}}
@media(min-width:680px) and (max-width:879px){.grid.four{grid-template-columns:1fr 1fr}}
.card{background:var(--mist);padding:22px 20px 24px;display:flex;flex-direction:column;gap:.35em}
.card h3{font-size:1.08rem;margin:0}
.card p{font-size:.95rem;color:var(--muted);margin:0}
.card a{font-family:var(--sans);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  margin-top:auto;padding-top:.9em;text-decoration:none;color:var(--jade-deep)}
.card a:hover{text-decoration:underline}

/* ---- prices ---- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);background:#fff}
table{border-collapse:collapse;width:100%;min-width:30rem;font-variant-numeric:tabular-nums}
caption{text-align:left;font-family:var(--sans);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);padding:14px 16px 0}
th,td{text-align:left;padding:11px 16px;border-bottom:1px solid var(--line);font-size:.97rem}
thead th{font-family:var(--sans);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
tbody tr:last-child td{border-bottom:0}
td.num,thead th.num{text-align:right;white-space:nowrap}
td.save{color:var(--jade);font-size:.86rem;white-space:nowrap}

/* ---- ink block / CTA ---- */
.ink{background:var(--ink);color:#e7eeec}
.ink h2,.ink h3{color:#fff}
.ink a{color:var(--gold-soft)}
.ink .muted{color:#9fb3b2}
.btn{display:inline-block;font-family:var(--sans);font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;padding:14px 26px;border:1px solid var(--gold);color:var(--gold-soft);
  text-decoration:none;border-radius:1px;transition:background .2s,color .2s}
.btn:hover{background:var(--gold);color:var(--ink)}
.btn.solid{background:var(--gold);color:var(--ink)}
.btn.solid:hover{background:var(--gold-soft)}
.btn.light{border-color:var(--jade);color:var(--jade-deep)}
.btn.light:hover{background:var(--jade);color:#fff}

/* ---- lists ---- */
ol.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:.55em}
ol.steps li{counter-increment:s;padding-left:2.3em;position:relative}
ol.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:.18em;
  font-family:var(--sans);font-size:.7rem;letter-spacing:.08em;color:var(--gold)}
ul.plain{list-style:none;padding:0;margin:0 0 1.05em;display:grid;gap:.5em}
ul.plain li{padding-left:1.1em;position:relative}
ul.plain li::before{content:"—";position:absolute;left:0;color:var(--gold)}

/* ---- gallery ---- */
.gal{display:grid;gap:14px}
@media(min-width:720px){.gal{grid-template-columns:1fr 1fr}}
.gal figure{margin:0;background:#fff;border:1px solid var(--line)}
.gal img{width:100%;height:auto}
.gal figcaption{font-family:var(--sans);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);padding:10px 14px}

/* ---- portrait ---- */
.portrait-row{display:grid;gap:clamp(20px,3vw,36px);align-items:start}
@media(min-width:800px){.portrait-row{grid-template-columns:17rem 1fr}}
.portrait{margin:0;background:#fff;border:1px solid var(--line);padding:9px}
.portrait img{width:100%;height:auto}
@media(min-width:800px){.portrait{position:sticky;top:calc(env(safe-area-inset-top,0px) + 86px)}}
@media(max-width:799px){.portrait{max-width:17rem}}

/* ---- video ---- */
.video{position:relative;aspect-ratio:16/9;max-width:100%;background:var(--ink);
  border:1px solid var(--line);margin-block:1.2em}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-note{font-size:.9rem;color:var(--muted);margin-top:-.4em}

/* ---- notes ---- */
.note{background:var(--mist-2);border-left:2px solid var(--jade);padding:16px 18px;font-size:.96rem}
.note p:last-child{margin-bottom:0}

/* ---- footer ---- */
footer{background:var(--ink);color:#b9c9c7;font-size:.94rem}
footer .cols{display:grid;gap:26px;padding-block:clamp(34px,5vw,54px)}
@media(min-width:720px){footer .cols{grid-template-columns:1.3fr 1fr 1fr}}
footer h4{font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin:0 0 .8em;font-weight:600}
footer a{color:#dbe6e3;text-decoration:none}
footer a:hover{text-decoration:underline}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.45em}
.legal{border-top:1px solid rgba(255,255,255,.12);padding-block:18px;font-size:.8rem;color:#7d9391;
  display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between}

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