/* ==========================================================================
   recycalize.com — archive stylesheet
   Single shared stylesheet. Replaces the five duplicated 505 KB Squarespace
   copies that lived in about/assets/, how-it-works/assets/, etc.
   ========================================================================== */

:root {
  --ink:      #1d2b21;
  --muted:    #5c6f62;
  --paper:    #f7f5ef;
  --surface:  #ffffff;
  --rule:     #ddd8cc;
  --accent:   #3f7d55;
  --accent-d: #2c5c3d;
  --notice:   #fdf5e3;
  --notice-b: #e4c98a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:      #dfe6e0;
    --muted:    #9bab9f;
    --paper:    #10160f;
    --surface:  #18211a;
    --rule:     #2c3a2f;
    --accent:   #74b98c;
    --accent-d: #96cfa9;
    --notice:   #26200f;
    --notice-b: #5c4d24;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* --- layout ------------------------------------------------------------ */
.wrap { width: min(100% - 2.5rem, 46rem); margin-inline: auto; }
main  { padding-block: 2.5rem 4rem; }

/* --- masthead ---------------------------------------------------------- */
.masthead { padding-block: 1.75rem; border-bottom: 1px solid var(--rule); background: var(--surface); }
.masthead .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.5rem; }
.brand { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.brand-note { font-size: .9rem; color: var(--muted); }

/* --- hero image -------------------------------------------------------- */
.hero { display: block; width: 100%; height: auto; margin-block: 0 2rem; border-radius: .5rem; }

/* --- typography -------------------------------------------------------- */
h1 { margin: 0 0 .75rem; font-size: clamp(1.8rem, 5.5vw, 2.6rem); line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
h2 { margin: 2.5rem 0 .75rem; font-size: clamp(1.3rem, 3.6vw, 1.7rem); line-height: 1.2; letter-spacing: -.015em; }
h3 { margin: 1.75rem 0 .5rem; font-size: 1.1rem; line-height: 1.3; }
p  { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }
a  { color: var(--accent); text-underline-offset: .18em; }
a:hover { color: var(--accent-d); }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
ul, ol { margin: 0 0 1.1rem; padding-left: 1.4rem; }
li { margin-bottom: .35rem; }
hr { height: 1px; margin: 2.5rem 0; border: 0; background: var(--rule); }

/* --- shutdown notice --------------------------------------------------- */
.notice {
  margin: 0 0 2.5rem;
  padding: 1.25rem 1.4rem;
  background: var(--notice);
  border: 1px solid var(--notice-b);
  border-radius: .5rem;
}
.notice h1 { font-size: clamp(1.5rem, 4.5vw, 2rem); }
.notice p:last-child { margin-bottom: 0; }

/* --- archive marker ---------------------------------------------------- */
.archive-label {
  display: inline-block;
  margin-bottom: 1rem;
  padding: .25rem .6rem;
  border-radius: .25rem;
  background: var(--rule);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* --- media ------------------------------------------------------------- */
figure { margin: 2rem 0; }
figure img { display: block; width: 100%; height: auto; border-radius: .4rem; }
figcaption { margin-top: .5rem; color: var(--muted); font-size: .9rem; text-align: center; }

.video { position: relative; aspect-ratio: 16 / 9; margin: 2rem 0; border-radius: .4rem; overflow: hidden; background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.badges { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 1.5rem 0; }
.badges img { height: 44px; width: auto; opacity: .55; filter: grayscale(1); }

/* --- footer ------------------------------------------------------------ */
footer { padding-block: 2rem 3rem; border-top: 1px solid var(--rule); background: var(--surface); }
footer nav { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; margin-bottom: 1rem; }
footer nav a { font-weight: 600; }
footer p { color: var(--muted); font-size: .9rem; }

/* --- wide content must not scroll the page ----------------------------- */
table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }