/* ==========================================================
   D.I.G.G.E.R. FIELD JOURNAL
   PAGE 87 — RECOMMENDED RESOURCES
   ========================================================== */


/* ----------------------------------------------------------
   PAGE
   ---------------------------------------------------------- */

.resources-page {
  --resources-green: #405e4d;
  --resources-green-dark: #2f473a;
  --resources-green-light: #edf2ee;

  --resources-bronze: #8b6944;
  --resources-bronze-light: #f4efe7;

  --resources-ink: #292d2a;
  --resources-muted: #626862;

  --resources-rule: #b9c0ba;
  --resources-rule-light: #d9ddd9;

  position: relative;

  box-sizing: border-box;

  width: 8.5in;
  height: 11in;

  padding:
    0.48in 0.58in 0.42in 0.72in;

  overflow: hidden;
}


/* ----------------------------------------------------------
   HEADER
   ---------------------------------------------------------- */

.resources-header {
  margin-bottom: 0.15in;
  padding-bottom: 0.13in;

  border-bottom: 1px solid var(--resources-rule);
}

.resources-header .tool-ribbon {
  margin-bottom: 0.1in;
}

.resources-header__eyebrow {
  margin: 0 0 0.025in;

  color: var(--resources-green);

  font-family: "Alegreya Sans", sans-serif;
  font-size: 6.8pt;
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1;
  text-transform: uppercase;
}

.resources-header__title {
  margin: 0;

  color: var(--resources-ink);

  font-family: "Alegreya", serif;
  font-size: 24pt;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 0.98;
}

.resources-header__subtitle {
  margin: 0.055in 0 0;

  color: var(--resources-bronze);

  font-family: "Alegreya", serif;
  font-size: 10pt;
  font-style: italic;
  line-height: 1.15;
}

.resources-header__introduction {
  max-width: 6.85in;

  margin: 0.075in 0 0;

  color: var(--resources-muted);

  font-family: "Alegreya", serif;
  font-size: 8.15pt;
  line-height: 1.27;
}


/* ----------------------------------------------------------
   MAIN GRID
   ---------------------------------------------------------- */

.resources-grid {
  display: grid;
  grid-template-columns: 0.91fr 1.09fr;
  gap: 0.18in;

  align-items: start;
}

.resources-column {
  min-width: 0;
}

.resources-section {
  break-inside: avoid;
}

.resources-section+.resources-section {
  margin-top: 0.13in;
}


/* ----------------------------------------------------------
   SECTION HEADINGS
   ---------------------------------------------------------- */

.resources-section__header {
  display: flex;
  gap: 0.07in;

  align-items: flex-start;

  margin-bottom: 0.065in;
}

.resources-section__number {
  display: flex;
  flex: 0 0 auto;

  align-items: center;
  justify-content: center;

  width: 0.23in;
  height: 0.23in;

  box-sizing: border-box;

  border: 1px solid var(--resources-green);
  border-radius: 50%;

  color: var(--resources-green);

  font-family: "Alegreya Sans", sans-serif;
  font-size: 7.3pt;
  font-weight: 700;
  line-height: 1;
}

.resources-section__eyebrow {
  margin: 0 0 0.01in;

  color: var(--resources-green);

  font-family: "Alegreya Sans", sans-serif;
  font-size: 5.9pt;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.resources-section__title {
  margin: 0;

  color: var(--resources-ink);

  font-family: "Alegreya", serif;
  font-size: 12.3pt;
  font-weight: 600;
  line-height: 1;
}


/* ----------------------------------------------------------
   WORK IN THIS ORDER
   ---------------------------------------------------------- */

.resource-order {
  position: relative;

  display: grid;
  gap: 0.034in;

  margin: 0;
  padding: 0;

  list-style: none;
}

.resource-order::before {
  content: "";

  position: absolute;

  top: 0.1in;
  bottom: 0.1in;
  left: 0.115in;

  width: 1px;

  background: var(--resources-rule-light);
}

.resource-order__item {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns: 0.23in 1fr;
  gap: 0.055in;

  align-items: start;
}

.resource-order__number {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 0.23in;
  height: 0.23in;

  box-sizing: border-box;

  border: 1px solid var(--resources-rule);
  border-radius: 50%;

  color: var(--resources-green-dark);
  background: #ffffff;

  font-family: "Alegreya Sans", sans-serif;
  font-size: 6.4pt;
  font-weight: 700;
  line-height: 1;
}

.resource-order__item>div {
  padding-top: 0.008in;
}

.resource-order__item strong {
  display: block;

  color: var(--resources-ink);

  font-family: "Alegreya", serif;
  font-size: 7.4pt;
  font-weight: 600;
  line-height: 1.05;
}

.resource-order__item p {
  margin: 0.008in 0 0;

  color: var(--resources-muted);

  font-family: "Alegreya", serif;
  font-size: 6.65pt;
  line-height: 1.15;
}

.resource-order__item--emphasis>div {
  margin: -0.01in 0;

  padding:
    0.04in 0.055in 0.045in;

  border-left: 2px solid var(--resources-bronze);

  background: var(--resources-bronze-light);
}

.resource-order__item--emphasis .resource-order__number {
  border-color: var(--resources-bronze);

  color: #ffffff;
  background: var(--resources-bronze);
}


/* ----------------------------------------------------------
   GUIDING PRINCIPLE
   ---------------------------------------------------------- */

.resource-principle {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.07in;

  align-items: center;

  margin-top: 0.065in;

  padding:
    0.05in 0.065in;

  border-top: 1px solid var(--resources-bronze);
  border-bottom: 1px solid var(--resources-bronze);

  background: var(--resources-bronze-light);
}

.resource-principle__label {
  color: var(--resources-bronze);

  font-family: "Alegreya Sans", sans-serif;
  font-size: 5.7pt;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.resource-principle p {
  margin: 0;

  color: var(--resources-ink);

  font-family: "Alegreya", serif;
  font-size: 7.15pt;
  font-weight: 600;
  line-height: 1.12;
}


/* ----------------------------------------------------------
   RESOURCE TOOL CARDS
   ---------------------------------------------------------- */

.resource-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.05in;
}

.resource-tool {
  box-sizing: border-box;

  min-height: 0.68in;

  padding:
    0.048in 0.058in 0.052in;

  border: 1px solid var(--resources-rule-light);
  border-top: 2px solid var(--resources-green);

  background: #ffffff;
}

.resource-tool--wide {
  grid-column: 1 / -1;
  min-height: 0;
}

.resource-tool h3 {
  margin: 0 0 0.023in;

  color: var(--resources-green-dark);

  font-family: "Alegreya Sans", sans-serif;
  font-size: 6.8pt;
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: 1;
  text-transform: uppercase;
}

.resource-tool p {
  margin: 0 0 0.014in;

  color: var(--resources-muted);

  font-family: "Alegreya", serif;
  font-size: 5.95pt;
  line-height: 1.14;
}

.resource-tool p:last-child {
  margin-bottom: 0;
}

.resource-tool strong {
  color: var(--resources-ink);
  font-weight: 600;
}

.resource-tool__warning {
  padding-top: 0.014in;

  border-top: 1px dotted var(--resources-rule-light);
}


/* ----------------------------------------------------------
   RESOURCE EVALUATION
   ---------------------------------------------------------- */

.resource-evaluation {
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  gap: 0.055in;
}

.resource-evaluation__panel {
  padding:
    0.055in 0.06in;

  border: 1px solid var(--resources-rule-light);
  border-top: 2px solid var(--resources-green);

  background: var(--resources-green-light);
}

.resource-evaluation__panel--caution {
  border-top-color: var(--resources-bronze);
  background: var(--resources-bronze-light);
}

.resource-evaluation__panel h3 {
  margin: 0 0 0.03in;

  color: var(--resources-ink);

  font-family: "Alegreya Sans", sans-serif;
  font-size: 6.5pt;
  font-weight: 700;
  line-height: 1.1;
}

.resource-checklist,
.resource-caution-list {
  margin: 0;
  padding: 0;

  list-style: none;
}

.resource-checklist li,
.resource-caution-list li {
  position: relative;

  margin-bottom: 0.017in;
  padding-left: 0.12in;

  color: var(--resources-muted);

  font-family: "Alegreya", serif;
  font-size: 6.05pt;
  line-height: 1.13;
}

.resource-checklist li:last-child,
.resource-caution-list li:last-child {
  margin-bottom: 0;
}

.resource-checklist li::before,
.resource-caution-list li::before {
  position: absolute;
  left: 0;
  top: 0;

  font-family: "Alegreya Sans", sans-serif;
  font-size: 6.3pt;
  font-weight: 700;
}

.resource-checklist li::before {
  content: "✓";

  color: var(--resources-green);
}

.resource-caution-list li::before {
  content: "—";

  color: var(--resources-bronze);
}


/* ----------------------------------------------------------
   STARTER LIBRARY
   ---------------------------------------------------------- */

.resource-library__introduction {
  margin:
    -0.01in 0 0.05in 0.3in;

  color: var(--resources-muted);

  font-family: "Alegreya", serif;
  font-size: 6.45pt;
  line-height: 1.15;
}

.resource-library {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.05in;
}

.resource-library__group {
  padding:
    0.05in 0.06in;

  border: 1px solid var(--resources-rule-light);

  background: #ffffff;
}

.resource-library__group h3 {
  margin: 0 0 0.026in;
  padding-bottom: 0.02in;

  border-bottom: 1px solid var(--resources-rule-light);

  color: var(--resources-green-dark);

  font-family: "Alegreya Sans", sans-serif;
  font-size: 6.45pt;
  font-weight: 700;
  line-height: 1;
}

.resource-library__group ul {
  margin: 0;
  padding-left: 0.105in;
}

.resource-library__group li {
  margin-bottom: 0.013in;

  color: var(--resources-muted);

  font-family: "Alegreya", serif;
  font-size: 5.85pt;
  line-height: 1.12;
}

.resource-library__group li:last-child {
  margin-bottom: 0;
}

.resource-library__group cite {
  font-style: italic;
}

.resource-library__group span {
  display: inline-block;

  margin-left: 0.018in;

  color: var(--resources-bronze);

  font-family: "Alegreya Sans", sans-serif;
  font-size: 4.9pt;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.resource-library__note {
  margin: 0.04in 0 0;

  padding-left: 0.065in;

  border-left: 2px solid var(--resources-bronze);

  color: var(--resources-muted);

  font-family: "Alegreya", serif;
  font-size: 6.05pt;
  font-style: italic;
  line-height: 1.14;
}


/* ----------------------------------------------------------
   REMEMBER PANEL
   ---------------------------------------------------------- */

.resources-remember {
  display: grid;
  grid-template-columns: 0.72in 1fr;

  min-height: 0.62in;

  margin-top: 0.12in;

  border: 1px solid var(--resources-green-dark);

  background: var(--resources-green-light);
}

.resources-remember__label {
  display: flex;

  align-items: center;
  justify-content: center;

  padding: 0.05in;

  color: #ffffff;
  background: var(--resources-green-dark);

  font-family: "Alegreya Sans", sans-serif;
  font-size: 6.1pt;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.resources-remember__content {
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding:
    0.065in 0.1in;
}

.resources-remember__primary {
  margin: 0;

  color: var(--resources-green-dark);

  font-family: "Alegreya", serif;
  font-size: 9.5pt;
  font-weight: 600;
  line-height: 1.05;
}

.resources-remember__secondary {
  margin: 0.022in 0 0;

  color: var(--resources-muted);

  font-family: "Alegreya", serif;
  font-size: 6.9pt;
  font-style: italic;
  line-height: 1.12;
}


/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */

.resources-footer {
  position: absolute;

  left: 0.72in;
  right: 0.58in;
  bottom: 0.2in;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.1in;

  align-items: center;

  padding-top: 0.035in;

  border-top: 1px solid var(--resources-rule);

  color: var(--resources-muted);

  font-family: "Alegreya Sans", sans-serif;
  font-size: 5.3pt;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.resources-footer span:nth-child(2) {
  text-align: center;
}

.resources-footer span:last-child {
  text-align: right;
}


/* ----------------------------------------------------------
   PRINT
   ---------------------------------------------------------- */

@media print {
  .resources-page {
    margin: 0;

    page-break-after: always;
    break-after: page;
  }
}