*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Palatino Linotype',Palatino,'Book Antiqua',serif;line-height:1.9;color:#2a2a2a;background:#fefefe}
.css-jial5ub{max-width:640px;margin:0 auto;padding:0 20px}
.css-oonpe4u{padding:60px 0 40px;border-bottom:1px solid #ccc;margin-bottom:48px}
.css-oonpe4u h1{font-size:24px;font-weight:400;letter-spacing:-.5px}
.css-oonpe4u p{font-size:14px;color:#777;margin-top:6px;font-style:italic}
.css-oonpe4u a{color:#2a2a2a;text-decoration:none;font-size:24px;font-weight:400;letter-spacing:-.5px}
.css-1gsfelo{padding:20px 0}
.css-1gsfelo h2{font-size:18px;font-weight:400;margin-bottom:4px}
.css-1gsfelo h2 a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.css-1gsfelo h2 a:hover{border-bottom-color:#2a2a2a}
.css-1gsfelo .css-h009cnp{font-size:12px;color:#aaa;margin-bottom:6px}
.css-1gsfelo p{font-size:14px;color:#666}
.css-qk3b24w{color:#888;font-size:13px;text-decoration:none}
.css-qk3b24w:hover{color:#2a2a2a}
.css-ba7cq70{padding-bottom:60px}
.css-ba7cq70 h1{font-size:28px;font-weight:400;margin-bottom:8px}
.css-ba7cq70 .css-h009cnp{font-size:12px;color:#aaa;display:block;margin-bottom:32px}
.css-ba7cq70 h2{font-size:21px;font-weight:400;margin:40px 0 12px;border-bottom:1px solid #eee;padding-bottom:6px}
.css-ba7cq70 h3{font-size:17px;margin:28px 0 8px}
.css-ba7cq70 p{margin-bottom:18px;font-size:16px}
.css-ba7cq70 ul,.css-ba7cq70 ol{margin:0 0 18px 20px}
.css-ba7cq70 a{color:#555;border-bottom:1px solid #ccc}
.css-ba7cq70 a:hover{color:#000;border-bottom-color:#000}
.css-ba7cq70 img{max-width:100%;height:auto;margin:24px 0}
.css-uh9gac3{border-top:1px solid #ddd;padding:20px 0;margin-top:48px;text-align:center;font-size:12px;color:#aaa}
.css-uh9gac3 a{color:#aaa;text-decoration:none}
.css-tpzln0n{padding:0 0 16px;margin-bottom:24px;font-size:12px;color:#aaa;font-style:italic;border-bottom:1px solid #eee}
.css-9uya53j{padding:16px 0 0;margin-top:32px;font-size:11px;color:#999;border-top:1px solid #eee}
.css-u4cnhh8{font-size:12px;color:#aaa;margin:-26px 0 32px;font-weight:300}
.css-dw45fik{margin:0 auto 32px;max-width:720px}
.css-eco1qkh{width:100%;height:auto}
.css-dv7f8dy{margin-top:40px;padding-top:20px;border-top:1px solid #eee;font-size:14px;color:#888}
.css-dv7f8dy em{color:#aaa}
.css-dv7f8dy a{color:#555;border-bottom:1px solid #ddd;text-decoration:none}
.css-bmqr24m{padding:24px 0 0;border-top:1px solid #eee;margin-top:24px}
.css-bmqr24m p{padding:3px 0;margin:0;font-size:15px}
.css-bmqr24m a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.css-bmqr24m a:hover{border-bottom-color:#2a2a2a}

:root{--primary:#5C3D5C;--accent:#B58B2D;--bg:#ECDEB5;--fg:#1A1419;--border:#C9B69A;--r:15px;--fb:'Albert Sans';--fh:'Fjalla One'}

@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,400;0,500;0,700;1,400&family=Fjalla+One&display=swap');

:root body {
  font-family: var(--fb), system-ui, -apple-system, sans-serif;
  color: var(--fg);
  background: var(--bg);
  line-height: 1.85;
  font-size: 16px;
}
::selection { background: var(--primary); color: var(--bg); }
:root hr { border: 0; border-top: 1px solid var(--border); margin: 28px 0; }

:root header {
  border-bottom: 3px solid var(--primary);
  padding: 56px 0 26px;
  margin-bottom: 40px;
  background: transparent;
}
:root header h1 {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 32px;
  font-weight: 400;
  color: var(--primary);
  letter-spacing: .02em;
  line-height: 1.1;
  text-transform: uppercase;
}
:root header h1 + p {
  font-family: var(--fb), system-ui, sans-serif;
  font-size: 13.5px;
  color: var(--fg);
  opacity: .78;
  margin-top: 8px;
  font-style: italic;
}
:root header a {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 22px;
  color: var(--primary);
  text-decoration: none;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: uppercase;
}

:root main { padding-bottom: 80px; }

:root main > h1 {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 28px;
  line-height: 1.16;
  color: var(--primary);
  font-weight: 400;
  margin: 8px 0 6px;
  letter-spacing: .01em;
  text-transform: none;
}
:root main > span {
  display: block;
  font-family: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
  font-size: 11px;
  color: var(--accent);
  margin-bottom: 32px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
}

:root main > article > p { margin-bottom: 18px; font-size: 16.5px; }
:root main > article > h2 {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--primary);
  margin: 40px 0 14px;
  padding-bottom: 6px;
  border-bottom: 3px solid var(--accent);
  text-transform: none;
  letter-spacing: .01em;
}
:root main > article > h3 {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  color: var(--accent);
  margin: 26px 0 10px;
  text-transform: none;
  letter-spacing: .01em;
}
:root main > article ul,
:root main > article ol { margin: 0 0 18px 22px; }
:root main > article li { margin-bottom: 6px; }
:root main > article blockquote {
  border-left: 4px solid var(--accent);
  padding: 8px 0 8px 18px;
  margin: 24px 0;
  font-style: italic;
  color: var(--primary);
  background: rgba(181, 139, 45, .07);
  border-radius: 0 var(--r) var(--r) 0;
}

:root main > article > p a,
:root main > article > p a:visited {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1.5px solid var(--accent);
  padding-bottom: 1px;
  font-weight: 500;
}
:root main > article > p a:hover {
  color: var(--accent);
  border-bottom-color: var(--primary);
}

:root main > article > p a[href^="/ref/"],
:root main > article > p a[href^="/try/"],
:root main > article > p a[href^="/check/"] {
  font-family: var(--fb);
  font-size: inherit;
  color: var(--accent);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--accent);
  padding: 0;
  border-radius: 0;
  text-decoration: none;
  letter-spacing: normal;
  text-transform: none;
  font-weight: 700;
}
:root main > article > p a[href^="/ref/"]:hover,
:root main > article > p a[href^="/try/"]:hover,
:root main > article > p a[href^="/check/"]:hover {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

:root main > article > img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 0 28px;
  border: 1px solid var(--accent);
  border-radius: var(--r);
}

:root main > article > aside {
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
  margin-top: 32px;
  font-size: 13.5px;
  color: var(--fg);
  font-family: var(--fb), system-ui, sans-serif;
  font-style: italic;
  background: rgba(92, 61, 92, .04);
  padding-left: 14px;
}
:root main > article > aside b {
  color: var(--primary);
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .12em;
  display: inline-block;
  margin-right: 8px;
  font-family: var(--fh), system-ui, sans-serif;
}

:root main > div {
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
}
:root main > div:last-of-type { border-bottom: 0; }
:root main > div > p:first-child {
  font-family: 'SFMono-Regular', 'Menlo', monospace;
  font-size: 11px;
  color: var(--accent);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-weight: 700;
}
:root main > div > h2 {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 6px;
  line-height: 1.22;
  letter-spacing: .01em;
  text-transform: none;
}
:root main > div > h2 a {
  color: var(--primary);
  text-decoration: none;
}
:root main > div > h2 a:hover {
  color: var(--accent);
}
:root main > div > p:not(:first-child) {
  font-size: 14.5px;
  color: var(--fg);
  opacity: .85;
  margin-bottom: 10px;
}
:root main > div > a:last-child {
  font-family: 'SFMono-Regular', 'Menlo', monospace;
  font-size: 11px;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
}
:root main > div > a:last-child:hover {
  color: var(--primary);
}

:root main > nav {
  margin-top: 48px;
  padding-top: 18px;
  border-top: 3px solid var(--primary);
  font-size: 14px;
}
:root main > nav p em {
  font-family: 'SFMono-Regular', 'Menlo', monospace;
  font-size: 11px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-style: normal;
  margin-right: 6px;
  font-weight: 700;
}
:root main > nav p a {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1px;
  font-weight: 500;
}
:root main > nav p a:hover {
  border-bottom-color: var(--accent);
  color: var(--accent);
}

:root footer {
  background: transparent;
  border-top: 1px solid var(--border);
  padding: 24px 0 36px;
  margin-top: 60px;
  text-align: center;
  font-family: 'SFMono-Regular', 'Menlo', monospace;
  font-size: 11px;
  color: var(--fg);
  opacity: .60;
  letter-spacing: .08em;
  text-transform: uppercase;
}
:root footer a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px dotted var(--border);
}
:root footer a:hover {
  color: var(--primary);
  border-bottom-color: var(--accent);
}

:root header a + p.site-tagline {
  display: block;
  font-family: var(--fb), system-ui, sans-serif;
  font-size: 13.5px;
  color: var(--fg);
  opacity: .78;
  margin-top: 8px;
  font-style: italic;
}

:root main > span {
  font-size: 13px;
  color: var(--primary);
  letter-spacing: 0.02em;
}

:root main > div > a:last-child {
  font-size: 13px;
  font-weight: 600;
}

:root main > article table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95em;
  margin: 1.5em 0;
}
:root main > article table th {
  background: #E8D49A;
  padding: 10px 14px;
  text-align: left;
  font-weight: 700;
}
:root main > article table td {
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
}

:root main > article > h2 {
  margin-top: 2.2em;
  margin-bottom: 0.4em;
}

:root main > div:first-of-type > h2 {
  font-size: 26px;
  border-left: 3px solid var(--accent);
  padding-left: 12px;
}

:root main > div > p:first-child {
  font-size: 13px;
}

:root main > div > a:last-child {
  font-family: var(--fb), system-ui, sans-serif;
  text-transform: none;
  letter-spacing: normal;
  font-size: 13px;
  font-weight: 600;
}

:root main > article table {
  border: 1px solid var(--border);
}

:root {
  --paper: #f5efe1;
  --paper-2: #f8f2e6;
  --moment: #7C4A5C;
  --hair: rgba(92, 61, 92, .14);
  --hair-soft: rgba(92, 61, 92, .22);
}

:root header {
  position: relative;
  background: linear-gradient(rgba(24, 18, 22, .74), rgba(24, 18, 22, .88)),
              url("/files/top-image.jpg") center / cover no-repeat;
  border-bottom: 3px solid var(--accent);
  padding: 56px 0 40px;
  margin-bottom: 76px;
}
:root header > div { position: relative; }

:root header > div::before {
  content: "";
  display: block;
  width: 42px;
  height: 42px;
  margin: 0 0 16px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M13%202%204%2014h6l-1%208%209-12h-6z'%20fill='none'%20stroke='%23B58B2D'%20stroke-width='1.5'%20stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
:root header h1 {
  color: var(--paper);
  font-size: 40px;
  letter-spacing: .045em;
}
:root header h1 + p {
  color: #e8ddc6;
  opacity: 1;
  font-size: 14px;
  line-height: 1.62;
  max-width: 58ch;
  margin-top: 15px;
  padding-left: 15px;
  border-left: 3px solid var(--moment);   
}
:root header a {
  color: var(--paper);
  font-size: 24px;
}
:root header a + p {
  color: #e8ddc6;
  opacity: 1;
  padding-left: 15px;
  border-left: 3px solid var(--moment);
}

:root main:not(:has(> article)) { padding-bottom: 48px; }

:root main:not(:has(> article)) > div:first-of-type {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--hair);
  border-radius: 10px;
  box-shadow: 0 2px 16px rgba(26, 20, 25, .06);
  padding: 52px 40px 40px;
  margin-bottom: 22px;
}
:root main:not(:has(> article)) > div:first-of-type::before {
  content: "LATEST DISPATCH";
  position: absolute;
  top: 22px;
  left: 40px;
  font-family: 'SFMono-Regular', 'Menlo', monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .26em;
  color: var(--accent);
}
:root main:not(:has(> article)) > div:first-of-type > p:first-child {
  margin-top: 12px;
}
:root main:not(:has(> article)) > div:first-of-type > p:first-child::before {
  content: "By Derek Ramirez · ";
}
:root main:not(:has(> article)) > div:first-of-type > p:first-child::after {
  content: " · Field Log";
}
:root main:not(:has(> article)) > div:first-of-type > h2 {
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: .01em;
  margin: 8px 0 18px;
  text-transform: none;
  border-left: 0;
  padding-left: 0;
}
:root main:not(:has(> article)) > div:first-of-type > p:not(:first-child) {
  font-size: 19px;
  line-height: 1.55;
  opacity: 1;
  color: var(--fg);
  max-width: 60ch;
}
:root main:not(:has(> article)) > div:first-of-type > p:nth-of-type(2)::first-letter {
  float: left;
  font-family: var(--fh), serif;
  font-size: 62px;
  line-height: .82;
  padding: 6px 12px 0 0;
  color: var(--moment);                    
}
:root main:not(:has(> article)) > div:first-of-type > a:last-child {
  display: inline-block;
  margin-top: 24px;
  font-family: 'SFMono-Regular', 'Menlo', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--primary);
  padding: 11px 24px;
  border-radius: 8px;
  border: 1px solid var(--primary);
}
:root main:not(:has(> article)) > div:first-of-type > a:last-child:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--fg);
}

:root main:not(:has(> article)) > div:nth-of-type(2),
:root main:not(:has(> article)) > div:nth-of-type(3) {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(26, 20, 25, .05);
  padding: 28px 34px;
  margin: 0 0 22px;
}
:root main:not(:has(> article)) > div:nth-of-type(2) { margin-top: 70px; }

:root main:not(:has(> article)) > div:nth-of-type(2)::before {
  content: "Editor\2019s Picks \2014 Start Here";
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 100%;
  margin-bottom: 26px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hair-soft);
  font-family: 'SFMono-Regular', 'Menlo', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--primary);
}
:root main:not(:has(> article)) > div:nth-of-type(2)::after { content: "N\00BA I"; }
:root main:not(:has(> article)) > div:nth-of-type(3)::after { content: "N\00BA II"; }
:root main:not(:has(> article)) > div:nth-of-type(2)::after,
:root main:not(:has(> article)) > div:nth-of-type(3)::after {
  position: absolute;
  top: 24px;
  right: 30px;
  font-family: 'SFMono-Regular', 'Menlo', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--accent);
}
:root main:not(:has(> article)) > div:nth-of-type(2) > h2,
:root main:not(:has(> article)) > div:nth-of-type(3) > h2 {
  font-size: 21px;
  line-height: 1.2;
  text-transform: none;
  padding-right: 42px;
}
:root main:not(:has(> article)) > div:nth-of-type(2) > p:not(:first-child),
:root main:not(:has(> article)) > div:nth-of-type(3) > p:not(:first-child) {
  font-size: 15.5px;
  line-height: 1.6;
  opacity: .9;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

:root main:not(:has(> article)) > div:nth-of-type(n+4) {
  background: transparent;
  border: 0;
  border-bottom: 1px dotted var(--hair-soft);
  border-radius: 0;
  box-shadow: none;
  padding: 26px 4px;
  margin: 0;
}

:root main:not(:has(> article)) > div:nth-of-type(4)::before {
  content: "The Feed";
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  margin: 30px 0 44px;
  background: linear-gradient(rgba(20, 24, 28, .55), rgba(20, 24, 28, .25)),
              url("/files/essay-photo.jpg") center 30% / cover no-repeat;
  border-radius: 10px;
  color: #f3ede1;
  font-family: 'SFMono-Regular', 'Menlo', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .55);
}
:root main:not(:has(> article)) > div:nth-of-type(n+4) > h2 { font-size: 20px; }

:root main:not(:has(> article)) > nav {
  margin-top: 44px;
  padding: 30px 34px 34px;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-top: 3px solid var(--primary);
  border-radius: 10px;
  box-shadow: 0 1px 6px rgba(26, 20, 25, .05);
}
:root main:not(:has(> article)) > nav::before {
  content: "See All";
  display: flex;
  align-items: center;
  justify-content: center;
  height: 210px;
  margin: -30px -34px 30px;
  background: linear-gradient(rgba(20, 24, 28, .55), rgba(20, 24, 28, .25)),
              url("/files/essay-photo.jpg") center 70% / cover no-repeat;
  border-radius: 10px 10px 0 0;
  color: #f3ede1;
  font-family: 'SFMono-Regular', 'Menlo', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .55);
}
:root main:not(:has(> article)) > nav h2,
:root main:not(:has(> article)) > nav h3 {
  font-family: var(--fh), sans-serif;
  font-size: 18px;
  font-weight: 400;
  text-transform: none;
  color: var(--primary);
  letter-spacing: .01em;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hair-soft);
}
:root main:not(:has(> article)) > nav ul {
  columns: 2;
  column-gap: 36px;
  margin: 0;
  padding: 0;
}
:root main:not(:has(> article)) > nav li {
  break-inside: avoid;
  list-style: none;
  margin-bottom: 11px;
}
:root main:not(:has(> article)) > nav a {
  color: var(--primary);
  font-weight: 500;
  border-bottom: 1px dotted var(--hair-soft);
}
:root main:not(:has(> article)) > nav a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

:root main:not(:has(> article)) > nav > * { background: transparent !important; }

:root main > h1 { font-size: 34px; line-height: 1.12; }
:root main > article > p { font-size: 17.5px; line-height: 1.78; margin-bottom: 20px; }

:root main > article > p:first-of-type::first-letter {
  float: left;
  font-family: var(--fh), serif;
  font-size: 56px;
  line-height: .8;
  padding: 6px 10px 0 0;
  color: var(--primary);
}

:root main > article > h2 {
  border-bottom: 0;
  padding-bottom: 0;
  font-size: 24px;
  text-transform: none;
}
:root main > article > h2::before {
  content: "\2726 \2726 \2726";
  display: block;
  text-align: center;
  color: var(--accent);
  font-size: 12px;
  letter-spacing: .5em;
  margin: 4px 0 22px;
  opacity: .65;
}

:root main > article > blockquote {
  position: relative;
  padding-left: 30px;
}
:root main > article > blockquote::before {
  content: "\201C";
  position: absolute;
  left: 4px;
  top: 2px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 46px;
  line-height: 1;
  color: var(--accent);
  opacity: .4;
}

:root main > article > p a[href^="/ref/"],
:root main > article > p a[href^="/try/"],
:root main > article > p a[href^="/check/"] {
  font-family: 'SFMono-Regular', 'Menlo', monospace;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--fg);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  padding: 3px 12px;
  border-radius: 7px;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
:root main > article > p a[href^="/ref/"]:hover,
:root main > article > p a[href^="/try/"]:hover,
:root main > article > p a[href^="/check/"]:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--paper);
}

:root main > nav p,
:root main > section p {
  line-height: 1.85;
  margin: 0;
}
:root main > nav a,
:root main > section a {
  display: inline-block;
  margin: 0 4px;
  padding: 0 2px;
}

:root html, :root body { overflow-x: hidden; max-width: 100%; }
@media (max-width: 920px) {
  :root main > * { max-width: 100%; }
  :root main { overflow-x: hidden; }
}

@media (max-width: 640px) {
  :root main,
  :root main > article,
  :root main > div,
  :root main > section,
  :root main > nav {
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
  }
  :root main > article > *,
  :root main > div > *,
  :root main > section > *,
  :root main > nav > * {
    max-width: 100%;
  }
  :root main h1,
  :root main h2,
  :root main h3,
  :root main h4 {
    overflow-wrap: break-word;
    word-break: normal;
  }
  
  :root main :is(ul, ol, section, div, nav)[style*="grid-template-columns"],
  :root main > section > ul,
  :root main > nav > ul,
  :root main > div > ul {
    grid-template-columns: 1fr !important;
  }
  
  :root main :is(ul, ol, section, div, p) {
    columns: 1;
  }
  
  :root main img,
  :root main figure {
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 640px) {
  :root main {
    padding-left: 20px;
    padding-right: 20px;
  }
}

:root > body > header {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}
:root > body > header > h1,
:root > body > header > p,
:root > body > header > a,
:root > body > header > div {
  display: block;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

:root > body > main:not(:has(> h1)) {
  max-width: 1120px;
  width: calc(100% - 48px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px 24px;
  align-items: stretch;
}
:root main:not(:has(> h1)) > div {
  grid-column: 1 / -1;
}
:root main:not(:has(> h1)) > div:first-of-type {
  order: 1;
}
:root main:not(:has(> h1)) > div:nth-of-type(2),
:root main:not(:has(> h1)) > div:nth-of-type(3) {
  order: 2;
}
:root main:not(:has(> h1)) > div:nth-of-type(n+4):nth-of-type(-n+11) {
  order: 4;
}
:root main:not(:has(> h1))::after {
  content: "See All";
  order: 5;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 210px;
  margin: 30px 0 18px;
  background: linear-gradient(rgba(20, 24, 28, .68), rgba(20, 24, 28, .42)),
              url("/files/essay-photo.jpg") center 70% / cover no-repeat;
  border-radius: 10px;
  color: #f3ede1;
  font-family: 'SFMono-Regular', 'Menlo', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .55);
}
:root main:not(:has(> h1)):has(> nav)::after,
:root main:not(:has(> h1)):has(> section)::after {
  content: none;
}

:root main:not(:has(> h1)) > div:nth-of-type(n+12),
:root main:not(:has(> h1)) > p:has(> a),
:root main:not(:has(> h1)) > a[href] {
  order: 6;
  grid-column: span 2;
  height: 100%;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(26, 20, 25, .05);
  padding: 20px 22px;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
:root main:not(:has(> h1)) > div:nth-of-type(n+12):hover,
:root main:not(:has(> h1)) > p:has(> a):hover,
:root main:not(:has(> h1)) > a[href]:hover {
  transform: translateY(-2px);
  border-color: var(--hair-soft);
  box-shadow: 0 4px 14px rgba(26, 20, 25, .08);
}
:root main:not(:has(> h1)) > div:nth-of-type(n+12) > p,
:root main:not(:has(> h1)) > div:nth-of-type(n+12) > a:last-child {
  display: none;
}
:root main:not(:has(> h1)) > div:nth-of-type(n+12) > h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.28;
  font-weight: 400;
  letter-spacing: .01em;
}
:root main:not(:has(> h1)) > div:nth-of-type(n+12) > h2 a,
:root main:not(:has(> h1)) > p:has(> a) > a,
:root main:not(:has(> h1)) > a[href] {
  color: var(--primary);
  text-decoration: none;
  border: 0;
}
:root main:not(:has(> h1)) > div:nth-of-type(n+12) > h2 a:hover,
:root main:not(:has(> h1)) > p:has(> a) > a:hover,
:root main:not(:has(> h1)) > a[href]:hover {
  color: var(--accent);
}
:root main:not(:has(> h1)) > p:has(> a) {
  font-size: 0;
  line-height: 1.28;
}
:root main:not(:has(> h1)) > p:has(> a) > a,
:root main:not(:has(> h1)) > a[href] {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: .01em;
}

:root main:not(:has(> h1)) > nav,
:root main:not(:has(> h1)) > section,
:root main:not(:has(> h1)) > ul {
  order: 6;
  grid-column: 1 / -1;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
:root main:not(:has(> h1)) > nav::before,
:root main:not(:has(> h1)) > section::before,
:root main:not(:has(> h1)) > ul::before {
  content: "See All";
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 210px;
  margin: 30px 0 28px;
  background: linear-gradient(rgba(20, 24, 28, .68), rgba(20, 24, 28, .42)),
              url("/files/essay-photo.jpg") center 70% / cover no-repeat;
  border-radius: 10px;
  color: #f3ede1;
  font-family: 'SFMono-Regular', 'Menlo', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .55);
}
:root main:not(:has(> h1)) > nav p,
:root main:not(:has(> h1)) > section p {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 16px;
  margin: 0;
  font-size: 0;
  line-height: 1.28;
}
:root main:not(:has(> h1)) > nav ul,
:root main:not(:has(> h1)) > section ul,
:root main:not(:has(> h1)) > ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 16px;
  columns: auto;
  column-gap: normal;
  margin: 0;
  padding: 0;
}
:root main:not(:has(> h1)) > nav li,
:root main:not(:has(> h1)) > section li,
:root main:not(:has(> h1)) > ul > li {
  list-style: none;
  margin: 0;
  min-height: 100%;
}
:root main:not(:has(> h1)) > nav p em,
:root main:not(:has(> h1)) > section p em,
:root main:not(:has(> h1)) > nav h2,
:root main:not(:has(> h1)) > nav h3,
:root main:not(:has(> h1)) > section h2,
:root main:not(:has(> h1)) > section h3 {
  grid-column: 1 / -1;
  display: block;
  margin: 0 0 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hair-soft);
  color: var(--primary);
  font-family: 'SFMono-Regular', 'Menlo', monospace;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.4;
  text-transform: uppercase;
}
:root main:not(:has(> h1)) > nav p a,
:root main:not(:has(> h1)) > section p a,
:root main:not(:has(> h1)) > nav li a,
:root main:not(:has(> h1)) > section li a,
:root main:not(:has(> h1)) > ul > li > a {
  display: block;
  height: 100%;
  min-height: 100%;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(26, 20, 25, .05);
  padding: 20px 22px;
  color: var(--primary);
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: .01em;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
:root main:not(:has(> h1)) > nav p a:hover,
:root main:not(:has(> h1)) > section p a:hover,
:root main:not(:has(> h1)) > nav li a:hover,
:root main:not(:has(> h1)) > section li a:hover,
:root main:not(:has(> h1)) > ul > li > a:hover {
  color: var(--accent);
  border-color: var(--hair-soft);
  box-shadow: 0 4px 14px rgba(26, 20, 25, .08);
  transform: translateY(-2px);
}

:root main:has(> h1) > span::before {
  content: "By Derek Ramirez \00b7 ";
}
:root main:has(> h1) > span::after {
  content: " \00b7 Phoenix garage field note";
}

@media (max-width: 640px) {
  :root > body > header > h1,
  :root > body > header > p,
  :root > body > header > a,
  :root > body > header > div {
    padding-left: 20px;
    padding-right: 20px;
  }
  :root > body > main:not(:has(> h1)) {
    width: 100%;
    max-width: 100%;
    grid-template-columns: 1fr;
    gap: 18px;
    padding-left: 20px;
    padding-right: 20px;
  }
  :root main:not(:has(> h1)) > div,
  :root main:not(:has(> h1)) > p:has(> a),
  :root main:not(:has(> h1)) > a[href],
  :root main:not(:has(> h1)) > nav,
  :root main:not(:has(> h1)) > section,
  :root main:not(:has(> h1)) > ul {
    grid-column: 1 / -1;
  }
  :root main:not(:has(> h1))::after,
  :root main:not(:has(> h1)) > nav::before,
  :root main:not(:has(> h1)) > section::before,
  :root main:not(:has(> h1)) > ul::before {
    min-height: 190px;
    margin: 24px 0 18px;
    border-radius: 8px;
  }
  :root main:not(:has(> h1)) > nav p,
  :root main:not(:has(> h1)) > section p,
  :root main:not(:has(> h1)) > nav ul,
  :root main:not(:has(> h1)) > section ul,
  :root main:not(:has(> h1)) > ul {
    grid-template-columns: 1fr;
  }
}

:root main > article {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  background: var(--paper-2);
  border: 1px solid var(--hair);
  border-radius: 10px;
  box-shadow: 0 2px 16px rgba(26, 20, 25, .055);
  padding: 38px 42px 42px;
  box-sizing: border-box;
}

@media (max-width: 640px) {
  :root main:not(:has(> h1)) > div:first-of-type {
    padding: 52px 32px 36px;
  }
  :root main:not(:has(> h1)) > div:first-of-type::before {
    left: 32px;
  }
  :root main:not(:has(> h1)) > div:nth-of-type(2),
  :root main:not(:has(> h1)) > div:nth-of-type(3) {
    padding-left: 32px;
    padding-right: 32px;
  }
  :root main > article {
    padding: 30px 32px 34px;
  }
  :root main > article p {
    font-size: 18px;
    line-height: 1.82;
    margin-bottom: 24px;
  }
  :root main > article li {
    line-height: 1.78;
    margin-bottom: 10px;
  }
}

@media (min-width: 641px) {
  
  :root main:not(:has(> h1)) > div:nth-of-type(n+12):nth-of-type(3n):last-of-type {
    grid-column: 1 / -1;
  }
  
  :root main:not(:has(> h1)) > div:nth-of-type(n+12):nth-of-type(3n+1):last-of-type {
    grid-column: 3 / -1;
  }
}