/* ==========================================================================
   DEAR DIGI — The Digi Guide
   ==========================================================================

   Loaded only by /guides and the article pages, so the homepage and product
   pages carry none of this weight.

   Everything inherits the site's tokens from css/style.css — palette, fonts,
   radii, --max-w, --pad-x. Nothing new is invented here except layout that
   only guides need.

   READING MEASURE
   ---------------
   --g-measure is the column width for prose: wide enough that paragraphs do
   not turn into a narrow ribbon stranded in whitespace, narrow enough to stay
   comfortable. Figures and grids are allowed to break out past it; body text
   never is.
   ========================================================================== */

.guide-page {
  --g-measure: 44rem;           /* ~704px, inside the 650-760 band */
  --g-wide: 58rem;              /* figures and grids may reach this */
  --g-gap: clamp(1.6rem, 3.4vw, 2.6rem);
}

/* ------------------------------------------------------------------ shared */
.g-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* =============================================================== THE HUB == */
/* The nav is fixed; every page owes it this clearance or the h1 sits under it. */
.guide-page main > .section:first-child {
  padding-top: calc(var(--nav-h) + var(--top-h) + clamp(1.5rem, 4vw, 3rem));
}

.guide-hub-head {
  max-width: 46rem;
  margin: 0 auto clamp(2.4rem, 5vw, 3.6rem);
  text-align: center;
}
.guide-hub-head h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 6vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 0.7rem;
}
.guide-hub-head .guide-lede {
  font-size: clamp(1.02rem, 1.5vw, 1.15rem);
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}

/* Category chips: present, findable, deliberately not the loudest thing. */
.guide-cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.7rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}
.guide-cats li {
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.32rem 0.8rem;
}

/* The listing. Not a three-up blog grid: a two-column flow where cards take
   different proportions, so the page reads as a spread rather than a table. */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.8rem, 4vw, 3.2rem);
  align-items: start;
  /* Narrower than --max-w on purpose. These are compact-camera photographs;
     stretched to the full grid they only show their own noise. */
  max-width: 62rem;
  margin: 0 auto;
}
.gh-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
/* A wide card spans the row; a tall one sits in a single column. Mixing the
   two is what stops the hub looking like a feed. */
.gh-card.gh-wide { grid-column: 1 / -1; }

.gh-frame {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  aspect-ratio: 4 / 5;                 /* reserved box — no layout shift */
}
.gh-card.gh-wide .gh-frame {
  aspect-ratio: 16 / 9;
  /* aspect-ratio still reserves the box (no layout shift), the cap stops a
     lone wide card turning into a billboard */
  max-height: 27rem;
}
.gh-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-out);
}
@media (hover: hover) {
  .gh-card:hover .gh-frame img { transform: scale(1.02); }
}

.gh-body { display: block; padding: 1.05rem 0.1rem 0; }
.gh-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.gh-cat {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--clay-deep);
}
.gh-no {
  font-family: var(--font-display);
  font-size: 0.72rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.gh-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.1vw, 1.5rem);
  line-height: 1.22;
  color: var(--ink);
  margin-bottom: 0.4rem;
  text-wrap: balance;
}
.gh-card.gh-wide .gh-title { font-size: clamp(1.35rem, 2.6vw, 1.95rem); }
.gh-blurb {
  display: block;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 46ch;
}
.gh-go {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.7rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--clay-deep);
}
.gh-go svg { transition: transform 0.3s var(--ease-out); }
@media (hover: hover) { .gh-card:hover .gh-go svg { transform: translateX(3px); } }

.gh-empty { text-align: center; color: var(--ink-faint); }

/* ========================================================== THE ARTICLE == */
.g-article { padding-bottom: clamp(3rem, 7vw, 5rem); }

.g-crumb {
  max-width: var(--g-wide);
  margin: 0 auto clamp(1.4rem, 3vw, 2rem);
  font-size: 0.74rem;
  color: var(--ink-faint);
}
.g-crumb a { color: var(--ink-faint); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.g-crumb a:hover { color: var(--clay-deep); }
.g-crumb span { margin: 0 0.45rem; opacity: 0.6; }

.g-head { max-width: var(--g-wide); margin: 0 auto clamp(1.8rem, 4vw, 2.6rem); }
.g-head .g-cat {
  display: block;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay-deep);
  margin-bottom: 0.7rem;
}
.g-article h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 0.9rem;
  max-width: 20ch;
  text-wrap: balance;
}
.g-standfirst {
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 0;
}

/* Attribution — quiet, factual, never a byline badge. */
.g-by {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.3rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--ink-faint);
}
.g-by strong { color: var(--ink-soft); font-weight: 600; }
.g-by svg { width: 14px; height: 14px; color: var(--clay); flex: 0 0 14px; }

/* -------------------------------------------------------------- the body */
.g-body { max-width: var(--g-measure); margin: 0 auto; }

.g-body > p {
  font-size: 1.05rem;
  line-height: 1.78;
  color: var(--ink-soft);
  margin: 0 0 1.35rem;
}
.g-body > p:last-child { margin-bottom: 0; }
.g-body a { color: var(--clay-deep); text-decoration: none; border-bottom: 1px solid var(--clay-soft); }
.g-body a:hover { border-bottom-color: var(--clay-deep); }

.g-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  line-height: 1.22;
  color: var(--ink);
  margin: clamp(2.4rem, 5vw, 3.2rem) 0 0.9rem;
  text-wrap: balance;
}
.g-h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 1.9rem 0 0.6rem;
}
.g-body ul, .g-body ol { margin: 0 0 1.35rem; padding-left: 1.15rem; }
.g-body li { font-size: 1.05rem; line-height: 1.7; color: var(--ink-soft); margin-bottom: 0.5rem; }

/* --------------------------------------------------------------- figures
   Break out past the measure, but never to full bleed: these photographs are
   from compact cameras and enlarging them past their resolution only shows
   the noise. */
.g-figure {
  margin: clamp(2rem, 4.5vw, 2.8rem) auto;
  max-width: var(--g-wide);
}
.g-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  background: var(--paper-2);
}
/* These sample photographs are portrait 3:4 straight off a compact. At the
   full column width that is over 1200px tall — a single image taller than the
   viewport, pushing the article off the screen. Cap the height and crop rather
   than letting one photo become the whole page. */
.g-figure.g-hero img {
  max-height: 30rem;
  object-fit: cover;
  object-position: center 28%;
}
.g-figure figcaption,
.g-cap {
  margin-top: 0.7rem;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--ink-faint);
  text-align: center;
}
/* Museum label: model on one line, place and year beneath. Printed only when
   the attribution is genuinely true of that photograph. */
.g-cap b { display: block; font-weight: 600; color: var(--ink-soft); font-size: 0.8rem; }
.g-cap em { font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.66rem; }

.g-duo, .g-trio {
  display: grid;
  gap: clamp(0.7rem, 1.6vw, 1.1rem);
  margin: clamp(2rem, 4.5vw, 2.8rem) auto;
  max-width: var(--g-wide);
}
.g-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-duo img, .g-trio img {
  width: 100%; height: 100%; display: block;
  aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--paper-2);
}
.g-duo figure, .g-trio figure { margin: 0; }

/* ----------------------------------------------------------------- blocks */
.g-tip {
  margin: clamp(1.8rem, 4vw, 2.4rem) 0;
  padding: 1.25rem 1.4rem;
  background:
    radial-gradient(120% 100% at 50% -10%, rgba(223, 126, 150, 0.12), transparent 62%),
    var(--print);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
}
.g-tip h4 {
  margin: 0 0 0.4rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--clay-deep);
}
.g-tip p { margin: 0; font-size: 0.98rem; line-height: 1.65; color: var(--ink-soft); }

.g-quote {
  margin: clamp(2rem, 4.5vw, 2.8rem) 0;
  padding-left: 1.2rem;
  border-left: 2px solid var(--clay-soft);
}
.g-quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.42;
  color: var(--ink);
  margin: 0;
}

/* Comparison table that stays a table on desktop and becomes readable rows
   on a phone rather than scrolling sideways. */
.g-compare { margin: clamp(1.8rem, 4vw, 2.4rem) 0; width: 100%; border-collapse: collapse; }
.g-compare th, .g-compare td {
  text-align: left;
  padding: 0.75rem 0.8rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.g-compare th {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-faint);
}
.g-compare td:first-child { color: var(--ink); font-weight: 600; }

/* Tested-by block. Facts only; never populated with anything unverified. */
.g-tested {
  margin: clamp(1.8rem, 4vw, 2.4rem) 0;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
}
.g-tested h4 {
  margin: 0 0 0.8rem;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.17em;
  text-transform: uppercase; color: var(--clay-deep);
}
.g-tested dl { display: grid; grid-template-columns: auto 1fr; gap: 0.45rem 1rem; margin: 0; }
.g-tested dt { font-size: 0.86rem; color: var(--ink-faint); }
.g-tested dd { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }

.g-note {
  margin: 1.4rem 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-faint);
  padding-left: 0.9rem;
  border-left: 1px solid var(--line-strong);
}

/* Handwritten aside — Caveat is already loaded site-wide. Used sparingly. */
.g-hand {
  font-family: 'Caveat', cursive;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--clay-deep);
  margin: 1.2rem 0;
}

/* ------------------------------------------- cameras we'd look at (inline) */
.g-products {
  margin: clamp(2.4rem, 5vw, 3.4rem) auto;
  max-width: var(--g-wide);
}
.g-products h2 { margin-top: 0; }
.g-products .g-intro {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 0 0 1.5rem;
}
/* Reuses .card from style.css untouched — this only sets the track count. */
.g-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.g-none { font-size: 0.95rem; color: var(--ink-faint); }
.g-none a { color: var(--clay-deep); text-decoration: none; border-bottom: 1px solid var(--clay-soft); }

/* --------------------------------------------------------- keep reading */
.g-related { max-width: var(--g-wide); margin: clamp(3rem, 6vw, 4.2rem) auto 0; padding-top: clamp(2rem, 4vw, 2.8rem); border-top: 1px solid var(--line); }
.g-related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.4rem, 3vw, 2.2rem); }
.g-related-grid .gh-card.gh-wide { grid-column: auto; }
.g-related-grid .gh-frame { aspect-ratio: 16 / 10; }
.g-related-grid .gh-title { font-size: 1.05rem; }
.g-related-grid .gh-blurb { display: none; }

/* ================================================================ MOBILE ==
   Not a shrunken desktop. Body text lands at 17px, images get real breathing
   room before the next paragraph, and nothing sits edge to edge. */
@media (max-width: 760px) {
  .guide-page { --g-measure: 100%; --g-wide: 100%; }

  .guide-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .gh-card.gh-wide { grid-column: auto; }
  .gh-frame, .gh-card.gh-wide .gh-frame { aspect-ratio: 3 / 2; }
  .gh-title, .gh-card.gh-wide .gh-title { font-size: 1.2rem; }

  .g-body > p, .g-body li { font-size: 1.0625rem; line-height: 1.75; }

  /* the gap that stops a photograph touching the sentence after it */
  .g-figure, .g-duo, .g-trio { margin: 2rem auto 2.2rem; }
  .g-trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-trio figure:last-child { grid-column: 1 / -1; }
  .g-trio figure:last-child img { aspect-ratio: 3 / 2; }

  .g-article h1 { max-width: none; font-size: clamp(1.85rem, 7.4vw, 2.4rem); }
  .g-standfirst { font-size: 1.05rem; }

  /* recommendations stay swipeable rather than stacking into a long column */
  .g-product-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.4rem;
  }
  .g-product-grid::-webkit-scrollbar { display: none; }
  .g-product-grid > * { scroll-snap-align: start; }

  .g-related-grid { grid-template-columns: 1fr; }
  .g-compare, .g-compare thead, .g-compare tbody, .g-compare tr, .g-compare th, .g-compare td { display: block; }
  .g-compare thead { display: none; }
  .g-compare tr { padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
  .g-compare td { border: 0; padding: 0.15rem 0; }
  .g-compare td:first-child { font-size: 1rem; }
}

@media (max-width: 480px) {
  .g-trio { grid-template-columns: 1fr; }
  .g-trio figure:last-child img { aspect-ratio: 4 / 5; }
  .g-duo { grid-template-columns: 1fr; }
  .g-product-grid { grid-auto-columns: 74%; }
}

@media (prefers-reduced-motion: reduce) {
  .gh-frame img, .gh-go svg { transition: none; }
  .gh-card:hover .gh-frame img { transform: none; }
}