/* ==========================================================================
   SECTIONS — page-specific layout
   ========================================================================== */

/* ---- Hero ------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--teal);
  color: var(--sand);
  overflow: hidden;
  padding-block: var(--sp-5) var(--sp-6);
}
.hero::before {
  content: "";
  position: absolute;
  width: 900px; height: 900px;
  right: -320px; top: -420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,176,32,.22), rgba(255,176,32,0) 66%);
  pointer-events: none;
}
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--sp-6);
  align-items: center;
}
.hero h1 { color: var(--white); }
.hero h1 .accent { color: var(--citrus); }
.hero__flourish { margin-bottom: 0.15rem; }
.hero__flourish .script { color: var(--citrus); font-size: 2rem; }
.hero__lead { color: rgba(251,243,230,.85); margin-top: var(--sp-3); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  margin-top: var(--sp-4);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(251,243,230,.62);
}
.hero__meta li { list-style: none; }

/* Cover stack — the current issue, tilted */
.hero__cover { position: relative; display: flex; justify-content: center; }
/* A thick cream border turns the cover into a photo print pinned to the page
   rather than a flat image tile. The dark line is drawn as a spread shadow so
   it sits outside the paper border instead of replacing it. */
.cover-card {
  position: relative;
  width: min(100%, 380px);
  aspect-ratio: 620 / 820;
  border: 13px solid var(--paper);
  border-bottom-width: 34px;
  border-radius: 12px;
  box-shadow: 0 0 0 3px var(--line), var(--sh-3);
  transform: rotate(-3deg);
  transition: transform var(--dur) var(--ease);
  text-decoration: none;
  color: var(--white);
  display: block;
}
.cover-card:hover { transform: rotate(-1.2deg) translateY(-6px); }

/* Handwritten caption in the wide bottom margin of the print. */
.cover-card__caption {
  position: absolute;
  left: 0; right: 0;
  bottom: -30px;
  z-index: 4;
  text-align: center;
  font-family: var(--script);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--muted);
  transform: rotate(-1deg);
}
/* The card itself must not clip — the stamp deliberately hangs off its
   corner. So the photo and its wash are clipped individually instead. */
.cover-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 2px;
}
.cover-card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 2px;
  background: linear-gradient(to bottom, rgba(23,89,92,.66), rgba(14,66,69,.92));
}
.cover-card__inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; padding: 8%; }
.cover-card__mast {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.8rem, 4.6vw, 2.6rem);
  line-height: .92;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
.cover-card__mast .accent { color: var(--citrus); }
.cover-card__rule { height: 3px; background: var(--citrus); margin: 0.7rem 0; }
.cover-card__issue {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
}
.cover-card__head {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-top: auto;
}
.cover-card__cta {
  margin-top: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  background: var(--citrus);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: -0.015em;
  padding: 0.55rem 0.95rem;
  border-radius: var(--r-pill);
}
/* Rubber-stamped onto the print, overlapping the paper border. */
.cover-card__free {
  position: absolute;
  top: -14px; right: -14px;
  z-index: 5;
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--citrus);
  color: var(--ink);
  border: var(--bw-2) dashed var(--line);
  border-radius: var(--r-sm);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.3;
  padding: 0.5rem 0.7rem;
  transform: rotate(9deg);
  box-shadow: var(--sh-1);
}
.cover-card__free strong {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .hero__cover { order: -1; }
  .cover-card { width: min(100%, 300px); }
}

/* ---- How it works ----------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.step {
  border: var(--bw) solid var(--line);
  border-radius: var(--r);
  background: var(--white);
  padding: var(--sp-3);
}
.step__n {
  font-family: var(--display);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--coral);
}
.step h3 { margin: 0.6rem 0 0.35rem; font-size: var(--step-1); }
.step p { font-size: 0.94rem; color: var(--muted); }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }

/* ---- Two-up feature cards -------------------------------------------- */
.twoup { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 820px) { .twoup { grid-template-columns: 1fr; } }

.feature {
  border: var(--bw) solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
}
.feature--accent { background: var(--ink); color: var(--sand); border-color: var(--ink); }
.feature--accent h3 { color: var(--white); }
.feature--accent p { color: rgba(251,243,230,.78); }
.feature h3 { font-size: var(--step-2); margin-bottom: 0.5rem; }
.feature p { color: var(--muted); }
.feature .btn { margin-top: var(--sp-3); align-self: flex-start; }

/* ---- Deals grid ------------------------------------------------------- */
.deals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: var(--sp-3);
}

/* ---- Stats band ------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  position: relative;
  z-index: 1;
}
/* On a dark surface the outline has to invert — the near-black --line used by
   every card on cream is effectively invisible here. Same weight, cream ink. */
.stat {
  border: var(--bw) solid rgba(251,243,230,.52);
  border-radius: var(--r);
  padding: var(--sp-3);
  background: rgba(255,255,255,.07);
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.stat:hover { border-color: var(--citrus); background: rgba(255,255,255,.10); }
.stat__num {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--citrus);
}
.stat__label {
  margin-top: 0.5rem;
  font-size: 0.92rem;
  color: rgba(251,243,230,.78);
}
.stat__foot {
  margin-top: 0.35rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(251,243,230,.45);
}
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .stats { grid-template-columns: 1fr; } }

/* ---- CTA band --------------------------------------------------------- */
.cta-band { text-align: center; position: relative; z-index: 1; }
.cta-band h2 { max-width: 20ch; margin-inline: auto; }
.cta-band .lead { margin-inline: auto; margin-top: var(--sp-3); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-4); }

/* ---- Archive rail ----------------------------------------------------- */
.archive { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
@media (max-width: 720px) { .archive { grid-template-columns: repeat(2, 1fr); } }
.arch {
  position: relative;
  aspect-ratio: 620 / 820;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: var(--bw) solid var(--line);
  display: block;
  text-decoration: none;
  color: var(--white);
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.arch:hover { transform: translateY(-4px); border-color: var(--coral); }
.arch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.arch::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(14,92,99,.5), rgba(10,40,44,.9));
}
.arch__label {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-2);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.03em;
}
.arch__label small {
  display: block;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--citrus);
  margin-top: 0.2rem;
}

/* ---- Rates table ------------------------------------------------------ */
.rates-wrap { overflow-x: auto; border: var(--bw) solid var(--line); border-radius: var(--r); background: var(--white); }
.rates { width: 100%; border-collapse: collapse; min-width: 620px; }
.rates th, .rates td { padding: 0.95rem 1.1rem; text-align: left; border-bottom: 1px solid var(--rule); }
.rates thead th {
  background: var(--ink);
  color: var(--sand);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.rates tbody tr:last-child td { border-bottom: 0; }
.rates tbody tr:hover { background: var(--sand); }
.rates td:first-child { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; }
.rates .price { font-family: var(--mono); font-weight: 500; color: var(--coral-dark); white-space: nowrap; }
.rates .muted-cell { color: var(--muted); font-size: 0.9rem; }

/* ---- Split (contact) -------------------------------------------------- */
.split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--sp-5); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.info-card {
  border: var(--bw) solid var(--line);
  border-radius: var(--r);
  background: var(--white);
  padding: var(--sp-4);
}
.info-card + .info-card { margin-top: var(--sp-3); }
.info-card h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.94rem;
}
.info-list li:last-child { border-bottom: 0; }
.info-list span { font-family: var(--mono); font-size: 0.84rem; color: var(--muted); text-align: right; }

/* ---- About: alternating rows ----------------------------------------- */
.row-alt { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: center; }
.row-alt + .row-alt { margin-top: var(--sp-6); }
.row-alt:nth-child(even) .row-alt__media { order: -1; }
.row-alt__media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/3; border: var(--bw) solid var(--line); }
.row-alt__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .row-alt { grid-template-columns: 1fr; gap: var(--sp-3); }
  .row-alt:nth-child(even) .row-alt__media { order: 0; }
}

/* ---- Page header (inner pages) --------------------------------------- */
.page-head {
  background: var(--teal);
  color: var(--sand);
  padding-block: var(--sp-6);
  position: relative;
  overflow: hidden;
}
.page-head::before {
  content: "";
  position: absolute;
  width: 620px; height: 620px;
  right: -240px; bottom: -320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,176,32,.18), rgba(255,176,32,0) 68%);
}
.page-head > * { position: relative; z-index: 1; }
.page-head h1 { color: var(--white); font-size: var(--step-4); }
.page-head .lead { color: rgba(251,243,230,.82); margin-top: var(--sp-3); }