/* ==========================================================================
   Vera Holcomb — author page (pen-name level, NOT book level).
   Deliberately reusable: nothing here knows about coins. Adding a title means
   adding one <article class="guide"> in the HTML and one image. Nothing else.
   Same type and palette family as the companion landings, so a reader who
   arrives from a book recognises the house.
   Mobile-first: base rules are the phone; media queries only widen.
   ========================================================================== */

@font-face{
  font-family:'Oswald';
  src:url('fonts/oswald-var-latin.woff2') format('woff2');
  font-weight:200 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';
  src:url('fonts/archivo-var-latin.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --teal:#0B3A3F;
  --teal-deep:#072A2E;
  --gold:#F2C452;
  --gold-ink:#8A6512;
  --paper:#F7F4EC;
  --cream:#EFEADD;
  --ink:#1C2426;
  --ink-soft:#465055;
  --line:#D9D2C2;
  --shadow:0 10px 28px rgba(11,58,63,.16);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.62;font-synthesis-weight:none;overflow-wrap:break-word;
}
img{max-width:100%;height:auto;display:block}
a{color:#0E5B62}
a:hover{color:#8A2B22}

.wrap{width:100%;max-width:660px;margin:0 auto;padding:0 20px}

h1,h2,h3{
  font-family:'Oswald',Impact,'Arial Narrow',sans-serif;
  font-weight:600;line-height:1.12;text-transform:uppercase;margin:0 0 .45em;
}
h1{font-size:clamp(2.15rem,10vw,3.4rem)}
h2{font-size:clamp(1.45rem,6vw,2.05rem);color:var(--teal)}
h3{font-size:clamp(1.2rem,5vw,1.5rem);color:var(--teal)}
h2.on-dark,h3.on-dark{color:var(--gold)}
p{margin:0 0 1.05em}
.on-dark{color:#E4EDEF}

.eyebrow{
  font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;
  letter-spacing:.16em;font-size:.76rem;color:var(--gold);margin:0 0 .7em;
}

/* --------------------------------------------------------------------- hero */
.hero{
  background:
    radial-gradient(120% 90% at 88% 10%, rgba(242,196,82,.14), rgba(242,196,82,0) 58%),
    linear-gradient(178deg,var(--teal) 0%,var(--teal-deep) 100%);
  color:#E9F0F1;padding:34px 0 38px;border-bottom:5px solid var(--gold);
}
.hero-grid{display:grid;gap:24px;grid-template-columns:1fr}
.hero h1{color:#F4F5F2;margin-bottom:.25em}
.portrait{
  width:190px;border-radius:8px;border:3px solid var(--gold);
  box-shadow:0 14px 34px rgba(0,0,0,.36);
}
.deck{font-size:1.2rem;color:var(--gold);font-weight:600;margin-bottom:.5em}
.deck-sub{font-size:1.03rem;color:#B9CACC;margin:0}

/* -------------------------------------------------------------------- bands */
.band{padding:42px 0;background:var(--paper)}
.band-cream{background:var(--cream)}
.band-dark{
  background:linear-gradient(180deg,var(--teal) 0%,var(--teal-deep) 100%);
  border-top:4px solid var(--gold);border-bottom:4px solid var(--gold);
}
.band-photo{
  background:var(--teal-deep);padding:0 0 40px;
  border-top:4px solid var(--gold);border-bottom:4px solid var(--gold);
}
.band-photo .wide{width:100%;margin-bottom:32px}
.big{font-size:1.09rem}
.lede{font-size:1.05rem;color:var(--ink-soft);margin-bottom:1.4em}
.note{
  font-size:.93rem;color:var(--ink-soft);
  border-left:3px solid var(--gold);padding-left:14px;margin-top:1.6em;
}

/* ------------------------------------------------------------------- guides */
.guide{
  display:grid;gap:20px;grid-template-columns:1fr;align-items:start;
  padding:22px;margin:0 0 22px;
  background:#fff;border:1px solid var(--line);border-top:4px solid var(--gold);
  border-radius:12px;box-shadow:0 6px 18px rgba(11,58,63,.08);
}
.guide .cover{width:150px;border-radius:5px;border:1px solid var(--line);box-shadow:var(--shadow)}
.guide h3{margin-bottom:.3em}
.guide-line{
  font-family:'Oswald',sans-serif;font-weight:500;font-size:1.02rem;
  color:var(--gold-ink);text-transform:none;margin-bottom:.8em;
}
.guide-extra{margin:0;font-weight:700}

/* ------------------------------------------------------------------- checks */
.checks{margin:0;padding:0;list-style:none;counter-reset:c}
.checks li{counter-increment:c;position:relative;padding-left:50px;margin-bottom:22px}
.checks li::before{
  content:counter(c);position:absolute;left:0;top:-2px;
  width:34px;height:34px;border-radius:50%;
  background:var(--teal);color:var(--gold);
  font-family:'Oswald',sans-serif;font-size:1.1rem;font-weight:600;
  display:flex;align-items:center;justify-content:center;
}
.checks strong{display:block;color:var(--teal)}

/* -------------------------------------------------------------------- facts */
.facts{margin:0;padding:0;list-style:none}
.facts li{
  padding-left:18px;border-left:2px solid var(--gold);
  margin-bottom:18px;font-size:1rem;line-height:1.6;
}
.facts strong{color:var(--gold)}

/* ------------------------------------------------------------------ contact */
.contact{display:grid;gap:22px;grid-template-columns:1fr}
.hands{border-radius:10px;border:1px solid var(--line);box-shadow:var(--shadow)}
.mail{font-family:'Oswald',sans-serif;font-size:1.24rem;font-weight:500;word-break:break-all}

/* ------------------------------------------------------------------- footer */
.foot{background:var(--teal-deep);color:#8FA6A9;padding:28px 0;border-top:4px solid var(--gold)}
.legal{font-size:.82rem;line-height:1.55;margin:0 0 .8em}
.foot a{color:var(--gold)}

/* ============================== wider screens ============================= */
@media (min-width:560px){
  .portrait{width:230px}
  .guide{grid-template-columns:150px 1fr;gap:24px;padding:24px}
}
@media (min-width:760px){
  body{font-size:18px}
  .wrap{max-width:960px;padding:0 32px}
  .hero{padding:56px 0 60px}
  .hero-grid{grid-template-columns:280px 1fr;gap:40px;align-items:center}
  .portrait{width:280px}
  .band{padding:60px 0}
  .band-photo{padding:0 0 56px}
  .band-photo .wide{max-height:420px;object-fit:cover;object-position:center 38%}
  .guide{grid-template-columns:180px 1fr;gap:30px;padding:28px}
  .guide .cover{width:180px}
  .contact{grid-template-columns:340px 1fr;gap:36px;align-items:center}
  .big{font-size:1.16rem}
}

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