/* ============================================================================
   silo.css — article pages for sanddollarshelling.com
   Loaded AFTER css/chrome.css. chrome.css scopes its own palette to
   .topbar/.header/.footer/.scrim/.megamenu, so the article body needs its own
   tokens: these match the homepage's palette exactly.
   ============================================================================ */
/* Base reset. The homepage carries this in its own inline <style>, and
   chrome.css depends on it (without it, every nav and footer link renders with
   the browser's default underline). These generated pages have no inline
   stylesheet, so the reset lives here. silo.css loads only on generated pages,
   so this cannot affect the homepage. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #FFF7E8; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; height: auto; }

.art {
  --teal:#2EC4B6; --teal-d:#1FA096;
  --sun:#FFC93C;  --sun-2:#FFD973;
  --coral:#FF6B5C; --coral-d:#E8503F;
  --deep:#0B3142; --ink:#14262E;
  --sand:#F4E4C1; --cream:#FFF7E8; --mist:#E9F3F4; --pearl:#FFE5DC;
  --line:rgba(11,49,66,.12);
  --r-sm:10px; --r-md:18px; --r-lg:28px;
  --sh-sm:0 4px 14px rgba(11,49,66,.08);
  --sh-md:0 14px 40px rgba(11,49,66,.13);
  --display:"Fraunces",Georgia,serif;
  --sans:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --script:"Caveat",cursive;
  background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-size:17.5px; line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
.art *,.art *::before,.art *::after{box-sizing:border-box}
.art .wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 28px}
.art .col{max-width:760px;margin:0 auto}

/* ---------- hero ---------- */
.art__hero{
  background:linear-gradient(157deg,var(--deep) 0%,#12495c 52%,#0d6070 100%);
  color:#fff;padding:54px 0 62px;position:relative;overflow:hidden}
.art__hero::before,.art__hero::after{content:"";position:absolute;border-radius:50%;opacity:.13;pointer-events:none}
.art__hero::before{width:460px;height:460px;background:var(--teal);right:-150px;top:-180px}
.art__hero::after{width:300px;height:300px;background:var(--sun);left:-120px;bottom:-150px}
.art__hero .wrap{position:relative;z-index:1}
/* Two-column hero when a verified photo exists; single column when it does not,
   so a page without an honest image still looks deliberate rather than broken. */
.art__hero-in{display:grid;gap:34px;align-items:center}
.art__hero--img .art__hero-in{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.art__hero-txt{min-width:0}
.art__shot{margin:0;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 26px 60px rgba(0,0,0,.34);border:5px solid rgba(255,255,255,.1);
  transform:rotate(1.1deg);max-width:400px;justify-self:end}
.art__shot img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.crumb{font-size:.8rem;letter-spacing:.04em;color:rgba(233,243,244,.72);margin-bottom:18px}
.crumb a{color:rgba(233,243,244,.9);text-decoration:none;border-bottom:1px solid rgba(233,243,244,.3)}
.crumb a:hover{color:var(--sun);border-color:var(--sun)}
.crumb span{opacity:.55;margin:0 7px}
.art__eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.19em;font-size:.72rem;
  font-weight:800;color:var(--sun);margin-bottom:14px}
.art__hero h1{font-family:var(--display);font-weight:700;letter-spacing:-.016em;line-height:1.1;
  font-size:clamp(2rem,4.6vw,3.15rem);margin:0 0 .45em;color:#fff;max-width:17ch}
.art__tldr{font-size:clamp(1.02rem,1.7vw,1.19rem);line-height:1.62;color:#DCEFF2;max-width:60ch;margin:0}

/* ---------- body ---------- */
.art__body{padding:52px 0 20px}
.art__body h2{font-family:var(--display);font-weight:700;letter-spacing:-.012em;
  font-size:clamp(1.42rem,2.6vw,1.85rem);line-height:1.2;color:var(--deep);margin:2.1em 0 .55em}
.art__body h2:first-child{margin-top:0}
.art__body h3{font-family:var(--display);font-weight:600;font-size:1.16rem;color:var(--deep);margin:1.7em 0 .4em}
.art__body p{margin:0 0 1.15em}
.art__body a{color:var(--teal-d);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px;text-decoration-color:rgba(31,160,150,.4)}
.art__body a:hover{text-decoration-color:var(--teal-d)}
.art__body strong{font-weight:800;color:var(--deep)}
.art__body ul,.art__body ol{margin:0 0 1.25em;padding-left:1.3em}
.art__body li{margin-bottom:.5em}
.art__body ul li::marker{color:var(--teal)}
.art__body ol li::marker{color:var(--teal);font-weight:800}
.art__body blockquote{margin:1.5em 0;padding:16px 22px;background:var(--mist);
  border-left:5px solid var(--teal);border-radius:0 var(--r-sm) var(--r-sm) 0;font-style:normal}
.art__body blockquote p:last-child{margin-bottom:0}

/* tables scroll rather than breaking the page */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.5em 0;
  border-radius:var(--r-md);box-shadow:var(--sh-sm);background:#fff}
.art__body table{width:100%;border-collapse:collapse;font-size:.94rem;min-width:460px}
.art__body th,.art__body td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.art__body thead th{background:var(--deep);color:#fff;font-family:var(--display);font-weight:600;font-size:.9rem}
.art__body tbody tr:last-child td{border-bottom:0}
.art__body tbody tr:nth-child(even){background:rgba(233,243,244,.45)}

/* ---------- key facts ---------- */
.kf{background:#fff;border-radius:var(--r-lg);padding:26px 30px;margin:34px 0;
  box-shadow:var(--sh-sm);border-top:5px solid var(--sun)}
.kf h2{font-family:var(--display);font-size:1.12rem!important;color:var(--deep);margin:0 0 14px!important}
.kf ul{margin:0;padding-left:1.15em}
.kf li{margin-bottom:.55em;font-size:.97rem}
.kf li::marker{color:var(--sun)}
.kf li:last-child{margin-bottom:0}

/* ---------- faq ---------- */
.faq{background:var(--mist);padding:52px 0}
.faq h2{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,2.7vw,2rem);
  color:var(--deep);margin:0 0 24px}
.faq__item{background:#fff;border-radius:var(--r-md);padding:20px 24px;margin-bottom:12px;box-shadow:var(--sh-sm)}
.faq__item h3{font-family:var(--display);font-weight:600;font-size:1.06rem;color:var(--deep);margin:0 0 8px}
.faq__item p{margin:0;font-size:.97rem;color:#31505c}

/* ---------- related links ---------- */
.rel{padding:52px 0}
.rel h2{font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,2.5vw,1.85rem);
  color:var(--deep);margin:0 0 20px}
.rel__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px}
.rel__card{display:block;background:#fff;border-radius:var(--r-md);padding:18px 22px;
  box-shadow:var(--sh-sm);text-decoration:none;color:var(--deep);
  border-left:5px solid var(--teal);transition:transform .2s,box-shadow .2s}
.rel__card:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.rel__card b{display:block;font-family:var(--display);font-weight:600;font-size:1rem;line-height:1.34}
.rel__card span{display:block;margin-top:5px;font-size:.83rem;color:var(--teal-d);font-weight:700}

/* ---------- sources ---------- */
.src{background:var(--sand);padding:34px 0}
.src h2{font-family:var(--display);font-weight:700;font-size:1.1rem;color:var(--deep);margin:0 0 12px}
.src p{margin:0 0 10px;font-size:.9rem;color:#3d5460}
.src ul{margin:0;padding-left:1.15em;columns:2;column-gap:32px}
.src li{margin-bottom:.4em;font-size:.88rem;break-inside:avoid}
.src a{color:var(--teal-d)}

/* ---------- cta band ---------- */
.ctab{background:linear-gradient(140deg,var(--deep),#0d5566);color:#fff;padding:52px 0;text-align:center}
.ctab h2{font-family:var(--display);font-weight:700;font-size:clamp(1.55rem,3vw,2.15rem);color:#fff;margin:0 0 .4em}
.ctab p{max-width:52ch;margin:0 auto 26px;color:#DCEFF2}
.ctab__row{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}
.btnx{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;
  font-size:1rem;padding:14px 30px;border-radius:999px;text-decoration:none;transition:transform .2s,box-shadow .2s}
.btnx--coral{background:linear-gradient(135deg,#FF8368,var(--coral-d));color:#fff;
  box-shadow:0 10px 26px rgba(232,80,63,.38)}
.btnx--ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.42)}
.btnx:hover{transform:translateY(-2px)}
.btnx--ghost:hover{background:rgba(255,255,255,.1)}

/* ---------- 404 ---------- */
.nf{min-height:58vh;display:grid;place-items:center;text-align:center;padding:64px 0}
.nf h1{font-family:var(--display);font-size:clamp(2.2rem,5vw,3.4rem);color:var(--deep);margin:0 0 .35em}
.nf p{max-width:46ch;margin:0 auto 26px;color:#3d5460}
.nf__code{font-family:var(--script);font-size:2.4rem;color:var(--coral);line-height:1;margin-bottom:6px}

@media(max-width:860px){
  .art__hero--img .art__hero-in{grid-template-columns:1fr}
  .art__shot{justify-self:start;max-width:320px;transform:none}
  .art__shot img{aspect-ratio:4/3}
}
@media(max-width:760px){
  .art{font-size:17px}
  .art .wrap{padding:0 20px}
  .art__hero{padding:40px 0 46px}
  .art__body{padding:40px 0 12px}
  .src ul{columns:1}
}
@media(prefers-reduced-motion:reduce){
  .rel__card,.btnx{transition:none}
  .rel__card:hover,.btnx:hover{transform:none}
}