/* ==========================================================================
   The Sixty-Second Checklist — bonus landing for "Error Coin Values Book"
   Palette and type taken from the printed cover (04-cover/STATO-E-RIPRESA.md §4):
     teal #0B3A3F · gold #F2C452 · red #C63A2F · off-white #F4F5F2
     Oswald (headings, condensed caps) · Archivo (everything else)
   Mobile-first: the 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;
  --red:#C63A2F;
  --paper:#F7F4EC;
  --cream:#EFEADD;
  --white:#FDFCF9;
  --ink:#1C2426;
  --ink-soft:#465055;
  --line:#D9D2C2;
  --rule-dark:rgba(242,196,82,.35);
  --shadow:0 10px 28px rgba(11,58,63,.16);
  --radius:12px;
}

*,*::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:var(--red)}

.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; letter-spacing:.005em;
  text-transform:uppercase; margin:0 0 .45em;
}
h1{font-size:clamp(2rem,9vw,3.1rem)}
h2{font-size:clamp(1.5rem,6.2vw,2.15rem);color:var(--teal)}
h2.on-dark{color:var(--gold)}
p{margin:0 0 1.05em}
.on-dark{color:#E4EDEF}
strong{font-weight:700}

/* ---------------------------------------------------------------- eyebrow */
.eyebrow{
  font-family:'Oswald',sans-serif;font-weight:500;
  text-transform:uppercase;letter-spacing:.13em;
  font-size:.78rem;color:var(--gold-ink);margin:0 0 .7em;
}
.eyebrow-light{color:var(--gold)}
.hero .eyebrow{color:var(--gold)}

/* ------------------------------------------------------------------- hero */
.hero{
  background:
    radial-gradient(120% 90% at 84% 8%, rgba(242,196,82,.16), rgba(242,196,82,0) 58%),
    linear-gradient(178deg,var(--teal) 0%,var(--teal-deep) 100%);
  color:#E9F0F1;
  padding:38px 0 34px;
  border-bottom:5px solid var(--gold);
}
.hero h1{color:#F4F5F2;text-shadow:0 2px 0 rgba(0,0,0,.18)}
.hero .deck{
  font-size:1.09rem;color:#CFDDDF;margin-bottom:1.5em;max-width:34em;
}
.hero .micro{margin-top:.85em}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:block;width:100%;
  min-height:56px;padding:16px 22px;
  font-family:'Oswald',sans-serif;font-size:1.14rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.045em;
  text-align:center;text-decoration:none;
  border:0;border-radius:999px;cursor:pointer;
  transition:transform .08s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{
  background:var(--gold);color:#26200A;
  box-shadow:0 6px 0 #C79A2C, var(--shadow);
}
.btn-primary:hover{background:#F7D170;color:#26200A}
.btn-gold{
  background:var(--gold);color:#26200A;box-shadow:0 6px 0 #C79A2C;
}
.btn-gold:hover{background:#F7D170;color:#26200A}
.btn-repeat{margin-top:26px}

.micro{
  font-size:.87rem;line-height:1.5;color:#B9CACC;margin:0;
}
.band .micro,.band-cream .micro{color:var(--ink-soft)}
.band-dark .micro{color:#A9BEC1}
.band-dark .micro a{color:var(--gold)}

/* ------------------------------------------------------------ hero figure */
.hero-card{margin:26px 0 0}
.hero-card img{
  border-radius:10px;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 14px 34px rgba(0,0,0,.34);
}
figcaption{
  font-size:.85rem;line-height:1.5;color:var(--ink-soft);margin-top:.7em;
}
.hero-card figcaption{color:#9FB4B7;text-align:center}

/* ------------------------------------------------------------------ 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);
}
.lede{font-size:1.07rem;color:var(--ink-soft);margin-bottom:1.4em}
.lede.on-dark{color:#CFDDDF}
.note{
  font-size:.92rem;color:var(--ink-soft);
  border-left:3px solid var(--gold);padding-left:14px;margin-top:1.6em;
}

/* --------------------------------------------------------- two-up panels */
.two{display:grid;gap:30px;grid-template-columns:1fr}
.panel img{
  border-radius:10px;border:1px solid var(--line);
  box-shadow:0 6px 18px rgba(11,58,63,.10);background:#fff;
}
.panel{margin:0}

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

/* ------------------------------------------------------------------- form */
.optin{margin:22px 0 16px}
.optin input[type=text],.optin input[type=email]{
  display:block;width:100%;
  min-height:54px;padding:14px 16px;margin-bottom:12px;
  font-family:inherit;font-size:1.02rem;color:var(--ink);
  background:var(--white);
  border:2px solid #6E8B8E;border-radius:10px;
}
.optin input::placeholder{color:#7B8A8C}
.optin input:focus{outline:3px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.form-msg{
  margin:.9em 0 0;font-size:.95rem;font-weight:600;min-height:1.2em;color:#CFDDDF;
}
.form-msg.ok{color:var(--gold)}
.form-msg.err{color:#FFB3AC}

/* ----------------------------------------------------------------- author */
.author{display:grid;gap:20px;grid-template-columns:1fr}
.portrait{
  width:150px;height:150px;border-radius:50%;
  border:3px solid var(--gold);box-shadow:var(--shadow);
  object-fit:cover;
}
.author h2{margin-bottom:.35em}

/* ------------------------------------------------------------------- book */
.book{display:grid;gap:20px;grid-template-columns:1fr;align-items:start}
.cover{
  width:180px;border-radius:6px;border:1px solid var(--line);
  box-shadow:var(--shadow);
}

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

/* ============================== wider screens ============================ */
@media (min-width:560px){
  .btn{display:inline-block;width:auto;min-width:300px}
  .optin input[type=text],.optin input[type=email]{max-width:420px}
  .portrait{width:170px;height:170px}
}
@media (min-width:760px){
  body{font-size:18px}
  .wrap{max-width:960px;padding:0 32px}
  .hero{padding:60px 0 52px}
  .band{padding:62px 0}
  .two{grid-template-columns:1fr 1fr;gap:36px;align-items:start}
  .two-print{grid-template-columns:1.15fr .85fr;align-items:center}
  .author{grid-template-columns:190px 1fr;gap:32px;align-items:center}
  .book{grid-template-columns:210px 1fr;gap:34px}
  .cover{width:210px}
  .hero-card img{max-width:640px;margin:0 auto}
  .hero .deck{font-size:1.18rem}
}

/* --------------------------------------------------- privacy / doc pages */
.doc{max-width:660px;margin:0 auto;padding:34px 20px 56px}
.doc h1{color:var(--teal)}
.doc h2{font-size:1.25rem;margin-top:1.6em}

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