/* The journal (local-blog.js): the list of pieces, one piece, and the page the shop writes them on.
   Colours and type follow the rest of the site — deep green, gold, cream, Georgia for headings. */
.gb {
  --gb-ink: var(--g-800, #083B3D);
  --gb-rim: #E6DCC9;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) 20px clamp(40px, 7vw, 80px);
  color: var(--gb-ink);
}

.gb-crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; font-size: 13px; color: #6B7F7F; }
.gb-crumbs a { color: #0E5E62; }

.gb-head { max-width: 760px; margin: 0 0 clamp(26px, 4vw, 44px); }
.gb-eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #7A5A16; }
.gb-head h1 { margin: 0 0 14px; font: 400 clamp(26px, 3.4vw, 42px)/1.18 Georgia, "Times New Roman", serif; color: var(--gb-ink); }
.gb-lead { margin: 0; font-size: clamp(15px, 1.7vw, 17px); line-height: 1.6; color: #4A5E5E; }

/* ---- the list ---- */
.gb-list { display: grid; gap: clamp(18px, 2.6vw, 28px); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.gb-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--gb-rim); border-radius: 14px; overflow: hidden;
  background: #fff;
}
.gb-card__photo { display: block; aspect-ratio: 16 / 9; background: #F4ECDF; }
.gb-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gb-card__text { display: flex; flex-direction: column; gap: 10px; padding: clamp(16px, 2.2vw, 22px); }
.gb-card__date { margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #7A8C8C; }
.gb-card h2 { margin: 0; font: 400 clamp(18px, 2vw, 22px)/1.3 Georgia, "Times New Roman", serif; }
.gb-card h2 a { color: var(--gb-ink); text-decoration: none; }
.gb-card h2 a:hover { color: #0E5E62; text-decoration: underline; }
.gb-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #4A5E5E; }
.gb-more {
  align-self: flex-start; margin-top: 2px;
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #0E5E62; text-decoration: none; border-bottom: 1.5px solid var(--gold, #C79A3C); padding-bottom: 2px;
}
.gb-empty { font-size: 16px; color: #4A5E5E; }

/* ---- ranking, keywords, recommendations ---- */
.gb-card--top { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.gb-card--top .gb-card__photo { aspect-ratio: auto; min-height: 260px; }
.gb-card--top h2 { font-size: clamp(22px, 2.6vw, 30px); }
.gb-top { display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 999px; background: #B8862D; color: #fff; font-weight: 700; letter-spacing: .06em; }
.gb-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.gb-tags li { padding: 3px 10px; border: 1px solid var(--gb-rim, #E6DCC9); border-radius: 999px; background: #FBF8F3; font-size: 12.5px; color: #4A5E5E; }
.gb-body + .gb-tags { margin: 6px 0 0; }
.gb-picks, .gb-related { padding-top: 0; }
.gb-picks h2, .gb-related h2 { margin: 0 0 16px; font: 400 clamp(21px, 2.3vw, 27px)/1.3 Georgia, "Times New Roman", serif; color: var(--g-800, #083B3D); }
.gb-picks .gt-home { display: block; }
.gb-related h3 { margin: 0; font: 400 clamp(17px, 1.9vw, 20px)/1.3 Georgia, "Times New Roman", serif; }
.gb-related h3 a { color: var(--g-800, #083B3D); text-decoration: none; }
@media (max-width: 749px) {
  .gb-card--top { display: flex; }
  .gb-card--top .gb-card__photo { aspect-ratio: 16 / 9; min-height: 0; }
}

/* ---- one piece ---- */
.gb-post { max-width: 780px; }
.gb-post__photo { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; margin: 0 0 clamp(22px, 3vw, 34px); }
.gb-body { font-size: clamp(16px, 1.8vw, 17.5px); line-height: 1.75; color: #27403F; }
.gb-body h2 { margin: clamp(26px, 3.4vw, 38px) 0 12px; font: 400 clamp(20px, 2.3vw, 26px)/1.3 Georgia, "Times New Roman", serif; color: var(--gb-ink); }
.gb-body p { margin: 0 0 16px; }
.gb-body ul { margin: 0 0 18px; padding-left: 22px; }
.gb-body li { margin: 0 0 8px; }
.gb-foot {
  margin: clamp(30px, 4vw, 48px) 0 0; padding: clamp(18px, 2.6vw, 26px);
  border: 1px solid var(--gb-rim); border-radius: 14px; background: var(--cream-2, #F4ECDF);
}
.gb-foot p { margin: 0 0 14px; font-size: 15px; line-height: 1.6; }
.gb-foot a { color: #0E5E62; }

/* ---- the page the shop writes on ---- */
.gb-login, .gb-write { display: grid; gap: 10px; max-width: 760px; margin: 0 auto; }
.gb-login { max-width: 380px; }
.gb-login h1 { margin: 0; font: 400 26px/1.2 Georgia, "Times New Roman", serif; }
/* the theme title-cases labels (gem-theme.css); a sentence should stay a sentence */
.gb-write label, .gb-write label small, .gb-login label, .gb-check { text-transform: none; letter-spacing: 0; }
.gb-write label { margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--gb-ink); }
.gb-write label small { font-weight: 400; color: #6B7F7F; }
.gb-write input[type="text"], .gb-write input:not([type]), .gb-write input[type="password"], .gb-write textarea, .gb-login input {
  width: 100%; padding: 11px 13px; border: 1px solid #C9D6D4; border-radius: 8px;
  background: #fff; color: var(--gb-ink); font: inherit; font-size: 15px;
}
.gb-write textarea { min-height: 320px; line-height: 1.6; resize: vertical; }
.gb-hint { margin: 2px 0 0; font-size: 13px; color: #6B7F7F; }
.gb-check { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-weight: 700; }
/* the theme hides checkboxes (base.css: input[type=checkbox]{display:none}) */
.gb-check input[type="checkbox"] {
  display: inline-block; width: 20px; height: 20px; margin: 0; accent-color: var(--g-700, #0A4A4D);
  opacity: 1; position: static; clip: auto;
}
.gb-write__buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.gb-notice {
  margin: 0 auto 16px; max-width: 760px; padding: 11px 14px;
  border: 1px solid #BFD9BF; border-radius: 8px; background: #EFF7EF; color: #1D5B2A; font-size: 14px;
}
.gb-admin { max-width: 760px; margin: clamp(30px, 4vw, 46px) auto 0; }
.gb-admin h2 { margin: 0 0 12px; font: 400 20px/1.3 Georgia, "Times New Roman", serif; }
.gb-admin ul { margin: 0; padding: 0; list-style: none; }
.gb-admin__row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  padding: 11px 0; border-bottom: 1px solid var(--gb-rim); font-size: 14.5px;
}
.gb-admin__row a { color: #0E5E62; }
.gb-admin__state { font-size: 13px; color: #6B7F7F; }
.gb-admin__when { margin-left: auto; font-size: 13px; color: #7A8C8C; }

@media (max-width: 749px) {
  .gb-admin__when { margin-left: 0; }
}