/* =========================
   1) Font Faces (names unchanged)
   ========================= */
   @font-face {
   	font-family: "Costa";
   	src: url(../fonts/fonnts.com-Costa_Std.otf) format("opentype");
   }
   @font-face {
   	font-family: "Gotham Book";
   	src: url(../fonts/GothamBook.ttf) format("truetype");
   }
   @font-face {
   	font-family: "Gotham Medium";
   	src: url(../fonts/GothamMedium.ttf) format("truetype");
   }

/* =========================
   2) Modern Reset / Base
   ========================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

html {
  /* Base font-size ~16px; we’ll scale at breakpoints */
  font-size: 100%;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Keep your original page padding behavior */
  padding-top: 2rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

body {
  /* Keep Costa as your baseline font as in your reset */
  font-family: "Costa", serif;
  color: #48494a;
  background-color: #fff;
  min-height: 100dvh;

  /* Center the main column similar to your header/body/footer constraints */
  margin-inline: auto;
  max-width: 850px;
  padding-right: 10px;
  padding-left: 1px;
}

/* Media-safe media */
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Lists */
ul,
ol {
  padding-left: 1.25rem;
}

li {
  margin: 0 1em 0 0;
}

/* Semantic sections block-level */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

/* =========================
   3) Design Tokens
   ========================= */
:root {
  --color-text: #48494a;
  --color-primary: #003c7f;

  /* Type scale (rem) */
  --step--1: 0.875rem; /* ~14px */
  --step-0: 1rem;      /* ~16px base body */
  --step-1: 1.25rem;   /* ~20px */
  --step-2: 1.5rem;    /* ~24px */
  --step-3: 2.75rem;   /* ~44px (mobile h1) */
  --step-4: 3.25rem;   /* ~52px (desktop h1) */
}

/* =========================
   4) Typography (keep same font usage)
   ========================= */

/* Headings baseline (Costa for all except h3, same as your original) */
h1,
h2,
h4,
h5,
h6 {
  font-family: "Costa", serif;
  color: var(--color-primary);
  font-weight: 300;
  letter-spacing: 0.025em;
  line-height: 1.4;
  margin: 0;
}

/* h3 is Gotham Medium in your original; preserve that */
h3 {
  font-family: "Gotham Medium", "Gotham Book";
  color: var(--color-primary);
  font-weight: 500;
  letter-spacing: 0.025em;
  line-height: 1.4;
  margin: 0;
}

/* Sizes (converted to rem) */
h1 {
  font-size: var(--step-4); /* ~52px */
  text-align: center;
  margin-bottom: 1.5rem;
}

h2 {
  font-size: var(--step-2); /* ~24px */
}

h3 {
  font-size: var(--step-1); /* ~20px */
}

h4 {
  font-size: 1.75rem; /* ~28px */
  font-weight: 700;   /* You had bold */
}

h5 {
  font-size: 1.125rem; /* ~18px */
  font-weight: 700;     /* You had bold */
}

/* Body text & general elements (Gotham Book as you had) */
p,
li,
div,
span,
ul,
a,
td,
table {
  font-family: "Gotham Book";
  font-weight: 300;
  color: var(--color-text);
  font-size: var(--step-0);
  vertical-align: baseline;
}

/* Paragraph spacing */
p {
  margin-bottom: 1rem;
}

/* Links */
a {
  transition: color 0.2s ease, border-bottom-color 0.2s ease;
  border-bottom: 1px dotted currentColor;
  color: inherit;
  text-decoration: none;
}
a:hover {
  border-bottom-color: transparent;
}

/* =========================
   5) Header/Main/Footer container (keep your max-width behavior)
   ========================= */
header,
main,
footer {
  margin-inline: auto;
  max-width: 850px;
  padding-right: 10px;
  padding-left: 1px;
}

/* =========================
   6) Utilities
   ========================= */
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  max-width: 100%;
}

/* Replace absolute-positioned .caution with responsive block */
.caution {
  display: block;
  margin: 0 auto 1rem;
  max-width: 80px;
  height: auto;
}

/* =========================
   7) Article rows with dotted leaders (performant)
   ========================= */
.article {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.article .item,
.article .price {
  flex: 0 0 auto;
}

/* Growable dotted leader using border (replaces heavy ::before) */
.article .dots {
  flex: 1 1 auto;
  border-bottom: 1px dotted #999;
  translate: 0 0.3em; /* aligns with baseline visually */
}

/* Important: scope flex to anchors inside .article only */
.article a {
  flex: 0 0 auto;
}

/* =========================
   8) Tables (responsive-friendly)
   ========================= */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px; /* enables horizontal scroll on narrow screens */
}

th,
td {
  text-align: left;
  border-bottom: 1px solid #ddd;
  padding: 0.5rem;
  vertical-align: top;
}

th {
  background-color: #f2f2f2;
  font-weight: 600;
}

.internet {
  text-align: center;
}

.carbon {
  margin-left: 1.5rem; /* ~30px */
}

/* =========================
   9) Sections & Footer
   ========================= */
section {
  margin-bottom: 2rem;
}

footer {
  text-align: center;
  padding: 2rem 0;
  margin-top: 2rem;
}

/* =========================
   10) Media Queries (scale root size only)
   ========================= */
@media (max-width: 736px) {
  html {
    font-size: 90%; /* ~14.4px base */
  }
  h1 {
    font-size: var(--step-3); /* ~44px */
  }
}

@media (max-width: 600px) {
  html {
    font-size: 85%; /* ~13.6px base */
  }
  header,
  main,
  footer {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}