/* The Back Room: guide-only styles layered over ../css/main.css */

.gmast {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  max-width: 980px;
  margin: 0 auto;
  padding: 56px 6vw 34px;
  border-bottom: 1px solid rgba(84, 66, 46, 0.3);
}
.gmast h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); font-weight: 700; line-height: 1.05; }
.gmast .tagline { max-width: 58ch; }
.gmast .guide-link { flex: none; margin-bottom: 8px; }

.gwrap { max-width: 980px; margin: 0 auto; padding: 26px 6vw 90px; }

.gsec { padding: 44px 0 10px; }
.gsec h2 {
  font-size: clamp(1.5rem, 2.4vw, 1.85rem);
  font-weight: 600;
  margin-bottom: 22px;
}
.gsec h2::before {
  content: '';
  display: block;
  width: 46px; height: 3px;
  border-radius: 2px;
  background: var(--green);
  opacity: 0.75;
  margin-bottom: 18px;
}
.gsec p { max-width: 68ch; text-wrap: pretty; }
.gsec p + p { margin-top: 16px; }
.gsec em { font-style: italic; color: var(--timber-ink); }

pre {
  margin: 26px 0;
  padding: 24px 28px;
  background: #372a1c;
  border-radius: 9px 9px 9px 3px;
  overflow-x: auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 3px 14px -6px rgba(40, 24, 8, 0.4);
}
pre code {
  font: 400 13px/1.66 ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  color: #ecd9b4;
  white-space: pre;
}
pre .c { color: #a08b68; }

.gmap { margin: 26px 0 0; display: grid; gap: 18px; }
.gmap > div {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 18px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px dashed rgba(84, 66, 46, 0.28);
}
.gmap > div:last-child { border-bottom: 0; }
.gmap dt { font: 600 17px 'Domine', serif; color: var(--timber-ink); }
.gmap dd { margin: 0; color: var(--ink-soft); font-size: 16px; }
.gmap strong { color: var(--green); font-weight: 600; }

.gchips {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 14px 26px;
  margin: 24px 0 0; padding: 0;
}
.gchips li {
  display: inline-flex; align-items: center; gap: 9px;
  font: 500 12px 'Oswald', sans-serif;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--timber-soft);
}
.swatch {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(40, 26, 10, 0.25), 0 1px 2px rgba(40, 26, 10, 0.2);
}
.gsmall { margin-top: 20px; font-size: 14.5px; color: var(--timber-soft); }

.gpass { list-style: none; margin: 10px 0 0; padding: 0; counter-reset: gp; }
.gpass > li {
  counter-increment: gp;
  position: relative;
  padding: 4px 0 26px 56px;
}
.gpass > li::before {
  content: counter(gp);
  position: absolute; left: 0; top: 2px;
  width: 34px; height: 34px;
  border: 1px solid rgba(224, 112, 32, 0.5);
  border-radius: 50%;
  color: var(--orange);
  font: 600 21px/34px 'Caveat', cursive;
  text-align: center;
}
.gpass > li::after {
  content: '';
  position: absolute; left: 17px; top: 44px; bottom: 4px;
  width: 1px;
  background: rgba(84, 66, 46, 0.25);
}
.gpass > li:last-child::after { display: none; }
.gpass h3 {
  font: 500 12px 'Oswald', sans-serif;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--timber-soft);
  margin-bottom: 8px;
}
.gpass p { max-width: 66ch; font-size: 16px; color: var(--ink-soft); }

@media (max-width: 760px) {
  .gmast { flex-direction: column; align-items: flex-start; gap: 18px; }
  .gmap > div { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; }
  pre { padding: 18px 18px; margin-left: -8px; margin-right: -8px; }
  .gpass > li { padding-left: 48px; }
}