/* Design B: Field Journal. Every colour, font and size is a token here. */
:root {
  --fj-paper: #f4ede0; --fj-paper-2: #ebe1cf; --fj-card: #fffaf1; --fj-ink: #1f2a2e; --fj-soft: #5b625f;
  --fj-rust: #b4482a; --fj-sea: #1f5c6b; --fj-rule: #cdbfa6; --fj-tape: rgba(214, 196, 150, .75);
  --fj-display: "Playfair Display", Georgia, serif; --fj-body: "Source Serif 4", Georgia, serif; --fj-mono: "IBM Plex Mono", ui-monospace, monospace;
  --fj-max: 1240px; --fj-gut: clamp(16px, 4vw, 40px); --fj-gap: clamp(16px, 2.4vw, 32px);
  --fj-h1: clamp(34px, 5vw, 64px); --fj-h2: clamp(28px, 3.4vw, 44px); --fj-label: 12px; --fj-shadow: 0 10px 24px rgba(60, 40, 10, .14);
}
* { box-sizing: border-box; }
body.fj { margin: 0; background: var(--fj-paper); color: var(--fj-ink); font: 18px/1.65 var(--fj-body); }
.fj img { display: block; max-width: 100%; }
.fj a { color: inherit; }
.fj-mast { max-width: var(--fj-max); margin: 0 auto; padding: 18px var(--fj-gut) 0; text-align: center; }
.fj-issue { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font: 400 var(--fj-label) var(--fj-mono); letter-spacing: .14em;
  text-transform: uppercase; border-bottom: 3px double var(--fj-ink); padding-bottom: 10px; margin: 0; }
.fj-mast > a img { margin: 22px auto 14px; height: 74px; width: auto; mix-blend-mode: multiply; }
.fj-mast nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 28px; border-block: 1px solid var(--fj-ink); padding: 10px 0;
  font: 600 13px var(--fj-mono); letter-spacing: .12em; text-transform: uppercase; }
.fj-mast nav a { text-decoration: none; } .fj-mast nav a:hover { color: var(--fj-rust); }
.fj-cover { max-width: var(--fj-max); margin: 34px auto 0; padding: 0 var(--fj-gut); display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--fj-gap); }
.fj-lead { position: relative; grid-row: span 2; }
.fj-lead img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.fj-tag { position: absolute; top: 16px; left: 16px; background: var(--fj-rust); color: var(--fj-card); font: 600 var(--fj-label) var(--fj-mono);
  letter-spacing: .14em; text-transform: uppercase; padding: 6px 10px; }
.fj-lead-txt h1 { font: 900 var(--fj-h1)/1.02 var(--fj-display); margin: 0 0 14px; }
.fj-lead-txt p { color: var(--fj-soft); }
.fj-lead-txt a, .fj-tx > a { font: 600 14px var(--fj-mono); color: var(--fj-rust); letter-spacing: .06em; }
.fj-side { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-self: end; }
.fj-side a { text-decoration: none; } .fj-side img { aspect-ratio: 1; object-fit: cover; }
.fj-side b { display: block; font: 600 16px/1.3 var(--fj-display); margin-top: 6px; }
.fj-sec { max-width: var(--fj-max); margin: 0 auto; padding: 72px var(--fj-gut) 0; }
.fj-h { font: 900 var(--fj-h2)/1.05 var(--fj-display); margin: 0 0 26px; }
.fj-h small { display: block; font: 600 var(--fj-label) var(--fj-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--fj-rust); margin-bottom: 8px; }
.fj-manifest { width: 100%; border-collapse: collapse; background: var(--fj-card); box-shadow: var(--fj-shadow); }
.fj-manifest th { font: 600 var(--fj-label) var(--fj-mono); letter-spacing: .16em; text-transform: uppercase; text-align: left; padding: 14px 18px;
  border-bottom: 2px solid var(--fj-ink); }
.fj-manifest td { padding: 18px; border-bottom: 1px dashed var(--fj-rule); vertical-align: middle; font-size: 15px; }
.fj-manifest td:first-child { display: grid; grid-template-columns: 110px 1fr; column-gap: 16px; }
.fj-manifest td:first-child img { grid-row: span 2; width: 110px; height: 80px; object-fit: cover; }
.fj-manifest b { font: 600 20px var(--fj-display); } .fj-manifest small { color: var(--fj-soft); font-size: 14px; line-height: 1.45; }
.fj-stamp { display: inline-block; border: 2px solid var(--fj-rust); color: var(--fj-rust); padding: 8px 14px; font: 600 13px var(--fj-mono);
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transform: rotate(-2deg); white-space: nowrap; }
.fj-stamp:hover { background: var(--fj-rust); color: var(--fj-card); }
.fj-note { font: 400 13px var(--fj-mono); color: var(--fj-soft); }
.fj-deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--fj-gap); }
.fj-card { background: var(--fj-card); padding: 12px 12px 18px; box-shadow: var(--fj-shadow); text-decoration: none; display: flex; flex-direction: column; gap: 4px;
  transition: transform .25s; }
.fj-card:nth-child(odd) { transform: rotate(-1deg); } .fj-card:nth-child(even) { transform: rotate(1deg); }
.fj-card:hover { transform: rotate(0) translateY(-4px); }
.fj-card img { aspect-ratio: 4/3; object-fit: cover; margin-bottom: 8px; }
.fj-no { font: 600 11px var(--fj-mono); letter-spacing: .16em; color: var(--fj-rust); }
.fj-card b { font: 600 21px var(--fj-display); } .fj-card small { color: var(--fj-soft); font-size: 14px; line-height: 1.45; }
.fj-chart { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--fj-gap); align-items: center; }
.fj-chart figure { margin: 0; background: var(--fj-card); padding: 14px; box-shadow: var(--fj-shadow); }
.fj-chart figcaption { font: 400 13px var(--fj-mono); color: var(--fj-soft); margin-top: 8px; }
.fj-chart ol { columns: 2; column-gap: 28px; padding-left: 22px; margin: 0; font: 600 18px/2 var(--fj-display); }
.fj-chart li::marker { font: 600 13px var(--fj-mono); color: var(--fj-rust); }
.fj-chart ol a { text-decoration: none; border-bottom: 1px solid var(--fj-rule); }
.fj-treasure { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--fj-gap); align-items: center; }
.fj-drop::first-letter { float: left; font: 900 76px/.8 var(--fj-display); color: var(--fj-rust); margin: 6px 10px 0 0; }
.fj-polas { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fj-pola { background: var(--fj-card); padding: 10px 10px 30px; box-shadow: var(--fj-shadow); text-decoration: none; position: relative; }
.fj-pola::before { content: ""; position: absolute; top: -10px; left: 35%; width: 30%; height: 22px; background: var(--fj-tape); }
.fj-pola:nth-child(1) { transform: rotate(-4deg); } .fj-pola:nth-child(3) { transform: rotate(3deg) translateY(16px); }
.fj-pola img { aspect-ratio: 1; object-fit: cover; }
.fj-pola span { display: block; font: 600 14px/1.3 var(--fj-display); margin-top: 8px; text-align: center; }
.fj-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.fj-grid a { text-decoration: none; } .fj-grid img { aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 4px solid var(--fj-card); box-shadow: var(--fj-shadow); }
.fj-grid b { display: block; text-align: center; font: 600 16px/1.3 var(--fj-display); margin-top: 10px; }
.fj-two { display: grid; grid-template-columns: 1fr 1.3fr; gap: calc(var(--fj-gap) * 2); }
.fj-list { list-style: none; padding: 0; margin: 0; }
.fj-list a { display: block; padding: 12px 0; border-bottom: 1px dashed var(--fj-rule); font: 600 20px var(--fj-display); text-decoration: none; }
.fj-list a::before { content: "→ "; color: var(--fj-rust); }
.fj-faq h3 { font: 600 20px var(--fj-display); margin: 0 0 4px; } .fj-faq p { margin: 0 0 20px; color: var(--fj-soft); }
.fj-foot { margin-top: 96px; background: var(--fj-paper-2); border-top: 3px double var(--fj-ink); padding: 44px var(--fj-gut); display: grid;
  grid-template-columns: 3fr 4fr 3fr; gap: var(--fj-gap); font-size: 15px; color: var(--fj-soft); }
.fj-foot img { height: 50px; width: auto; mix-blend-mode: multiply; }
.fj-foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; font: 600 13px var(--fj-mono); letter-spacing: .1em; text-transform: uppercase; }
.fj-foot nav a { text-decoration: none; }
.fj-press { justify-self: end; text-align: right; text-decoration: none; } .fj-press img { margin-left: auto; height: 56px; }
@media (max-width: 860px) {
  .fj-cover, .fj-chart, .fj-treasure, .fj-two, .fj-foot { grid-template-columns: 1fr; }
  .fj-grid { grid-template-columns: repeat(2, 1fr); } .fj-chart ol { columns: 1; }
  .fj-manifest thead { display: none; } .fj-manifest td { display: block; border: 0; padding: 8px 14px; }
  .fj-manifest tr { display: block; border-bottom: 1px dashed var(--fj-rule); padding: 8px 0; }
  .fj-press { justify-self: start; text-align: left; } .fj-press img { margin-left: 0; }
}