/* ---- Page background: gradient only ---- */
body {
  background: linear-gradient(180deg, #fafafa 0%, #f5f7fb 100%);
  margin: 0;
  font-family: sans-serif;
  color: var(--field-text);
  min-height: 100vh;
  position: relative; /* to establish stacking context for ::before */
}

/* ---- Blurred photo overlay ---- */
body::before {
  content: "";
  position: fixed; /* stays behind as you scroll */
  inset: 0;
  background: url('https://smokies.neocities.org/Rockytop_and_Patterson_Ridges_(13083210443).jpg')
              center / cover no-repeat;
  filter: blur(6px);
  z-index: -1;             /* behind all content */
  pointer-events: none;    /* ensure it never blocks interactions */
}

/* ---- Variables ---- */
:root {
  --field-bg: #f8f2e7;
  --field-text: #2a2a2a;
  --field-border: #e0d6c7;
  --field-radius: 16px;
  --field-shadow: 0 10px 24px rgba(0,0,0,0.08);

  --ribbon-img: url('https://smokies.neocities.org/images/quilt_star_padding.jpeg');
  --ribbon-width: 56px;
  --gap: 20px;
  --content-pad: clamp(16px, 2.5vw, 28px);
}

/* ---- Layout (same as Option A) ---- */
.ribbon-field {
  display: grid;
  place-items: center;
  padding: clamp(24px, 6vw, 64px) 16px;
}

/* The inner grid should shrink to the content of the middle column */

.ribbon-field__inner {
  display: grid;
  grid-template-columns: var(--ribbon-width) max-content var(--ribbon-width);
  gap: var(--gap);
  align-items: stretch;

  /* Shrink-wrap to content, but never exceed viewport width. 
     Subtract ribbon columns and inter-column gaps from viewport. */
  width: min(
    max-content,
    calc(100vw - (2 * var(--ribbon-width)) - (2 * var(--gap)))
  );

  margin-inline: auto; /* keep centered */
}


/* The content box must not stretch to 100%—let it size to its text */

.ribbon-field__content {
  /* Remove width:100% so it can shrink-wrap */
  /* width: 100%;  <-- remove */

  /* Make the box shrink to the longest line, BUT allow it to wrap
     when the viewport is smaller than that line. */
  inline-size: max-content;
  max-inline-size: calc(100vw - (2 * var(--content-pad)) - 20px);
  /* ^ subtract horizontal padding and border (10px each side = 20px).
     Adjust if your border size changes. */

  /* Force break opportunities for long words/URLs */
  overflow-wrap: anywhere; /* modern, strongest option */
  /* alternatively: word-break: break-word; */

  background: var(--field-bg);
  color: var(--field-text);
  border: 10px solid var(--field-border);
  border-radius: var(--field-radius);
  box-shadow: var(--field-shadow);
  padding: var(--content-pad);
  line-height: 1.6;
  box-sizing: border-box;
  margin: 0;
}


.ribbon {
  background: var(--ribbon-img) center top / contain repeat-y;
  min-height: 100%;
}
.ribbon::before {
  content: "";
  display: block;
  min-height: 100%;
}
.ribbon-field__content h1,
.ribbon-field__content h2,
.ribbon-field__content h3 {
  margin: 0 0 0.6em;
  line-height: 1.2;
}
.ribbon-field__content p { margin: 0 0 1em; }


/* ---- Tables ---- */
table, th, td {
  border: 1px solid #000;
}
table {
  margin: 0 auto;
  background: #fcd362;
  border-collapse: collapse;
  max-width: 100%;              /* let table span container */
  width: 100%
  table-layout: fixed;      /* equal column distribution */
}
th, td {
  padding: 10px;
  word-wrap: break-word;    /* allow text to wrap inside cells */
}


@media (max-width: 800px) {
  /* --- Inner grid: keep 3 columns so ribbons stay visible --- */
  .ribbon-field__inner {
    /* use one set of numbers for consistent math */
    --ribbon-width-mobile: 24px;
    --gap-mobile: 8px;

    display: grid;
    grid-template-columns:
      var(--ribbon-width-mobile)          /* left ribbon */
      minmax(0, 1fr)                      /* content */
      var(--ribbon-width-mobile);         /* right ribbon */

    gap: var(--gap-mobile);
    align-items: stretch;

    /* center the whole block */
    width: 90vw;                          /* if you prefer 100vw, change here AND below */
    max-width: 90vw;
    margin-inline: auto;
    box-sizing: border-box;               /* prevents subtle width overflow from padding/borders */
  }

  /* --- Ribbons: unchanged, still grid items --- */
  .ribbon {
    display: block;
    background: var(--ribbon-img) center top / contain repeat-y;
    min-height: 100%;                     /* span inner container height; no overlay */
  }

  /* --- Content: centered between ribbons and never overlaps them --- */
  .ribbon-field__content {
    /* center the content within the middle column */
    justify-self: center;

    /* wrap long tokens (URLs/long words) so the block never expands past viewport */
    overflow-wrap: anywhere;

    /* IMPORTANT: use the SAME base width as the container above (90vw here).
       Subtract both ribbons + both gaps + both borders + both paddings.
       This guarantees centering and prevents overlap with the ribbon columns. */
    max-inline-size: calc(
      90vw
      - (2 * var(--ribbon-width-mobile))   /* left & right ribbon columns */
      - (2 * var(--gap-mobile))            /* symmetric gaps */
      - 20px                               /* 10px border on each side of content */
      - (2 * var(--content-pad))           /* content padding both sides */
    );

    /* normal flow; no absolute/fixed */
    position: static;
  }
  
  
  th, td {
    font-size: 0.75rem; /* smaller font */
  }

}

``