/* The Squiggle — recreated from the WordPress (Creatio 2) build.
   Measured at a 1751px viewport: wide container 1200px, reading column 620px,
   body 20px/30px Neue Haas Unica Light, ink #203033 on paper #f4f7f7. */

@font-face {
  font-family: "Neue Haas Unica";
  src: url("/fonts/neue-haas-unica-light.woff2") format("woff2");
  font-weight: 100 900; /* single Light face; heavier weights are synthesised, as on the original */
  font-display: swap;
}
@font-face {
  font-family: "Neue Haas Unica Regular";
  src: url("/fonts/neue-haas-unica-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #203033;
  --paper: #f4f7f7;
  --white: #fff;
  --wide: 1200px;
  --column: 620px;
  --gutter: 28px;
  --font: "Neue Haas Unica", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 20px;
  line-height: 1.5;
  font-weight: 400;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1.25px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
strong, b { font-weight: 700; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.15; margin: 0; }
p { margin: 0; }
ol, ul { margin: 0; padding-left: 1.2em; }
li { margin: 0; }
hr { border: 0; border-top: 1px solid rgba(32,48,51,.2); margin: 0; }

/* ---------- layout containers ---------- */
.wide { width: min(var(--wide), 100% - 2 * var(--gutter)); margin-left: auto; margin-right: auto; }
.column { width: min(var(--column), 100% - 2 * var(--gutter)); margin-left: auto; margin-right: auto; }
.flow > * + * { margin-top: 28px; }
.flow img { margin-top: 28px; }
.flow h2 { font-size: 39px; }
.flow h3 { font-size: 30px; }
.flow ol, .flow ul { padding-left: 1.2em; }
.flow li + li { margin-top: 0; }
.flow figure { margin: 0; }

/* ---------- header ---------- */
.site-header { padding: 40px 0 80px; }
.site-header .wide { display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 28px; text-decoration: none; }
.brand img { width: 139px; height: 68px; object-fit: cover; }
.brand-title { font-size: 20px; font-weight: 600; line-height: 1.13; }
.brand-tagline { font-size: 17px; line-height: 1.5; }
.site-nav { margin-left: auto; }
.site-nav ul { list-style: none; display: flex; gap: 20px; padding: 0; margin: 0; font-size: 17px; line-height: 1.5; }
.site-nav a { text-decoration: none; }
.site-nav a:hover { text-decoration: underline; }

/* ---------- page title ---------- */
.page-title { font-size: 61px; line-height: 1.15; font-weight: 600; margin: 4px 0 56px; }
main { padding-bottom: 84px; }
.page-main { padding-top: 0; }

/* ---------- hero (cover) ---------- */
.hero { position: relative; min-height: 787px; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--white); overflow: hidden; margin: 0 0 84px; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-overlay { position: absolute; inset: 0; background: #000; opacity: .2; }
.hero-inner { position: relative; width: min(var(--column), 100% - 2 * var(--gutter)); margin: 0 auto; padding: 28px 0; }
.hero h1 { font-size: 48.8px; font-weight: 600; line-height: 1.15; }
.hero p { font-size: 20px; line-height: 1.5; margin-top: 19px; }
.hero .button { margin-top: 19px; }
.button { display: inline-block; background: var(--white); color: #000; text-decoration: none; font-size: 20px; line-height: 1; padding: 16px 28.66px; border-radius: 4px; border: 0; font-family: inherit; cursor: pointer; }
.button:hover { background: #e9eded; text-decoration: none; }

/* ---------- observed list ---------- */
.observed-list, .flow .observed-list { list-style: none; padding: 0; margin: 28px 0 0; }
.observed-list li + li { margin-top: 28px; }
.observed-list img { width: 150px; height: 150px; object-fit: cover; }
.observed-list .item-title { display: inline-block; margin-top: 10px; }
.observed-list .item-blurb { margin-top: 10px; }

/* ---------- observed entry (post) ---------- */
.entry-head { text-align: center; }
.entry-terms { font-size: 12.8px; line-height: 1.5; }
.entry-terms a { text-decoration-thickness: .8px; }
.entry-title { font-size: 48.8px; font-weight: 600; line-height: 1.15; margin-top: 16px; }
.entry-meta { font-size: 12.8px; line-height: 1.5; margin-top: 16px; }
.entry-image { margin-top: 28px; }
.entry-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.entry-body { margin-top: 28px; }
.entry-links { margin-top: 28px; }
.post-nav { display: flex; justify-content: space-between; gap: 28px; margin-top: 84px; font-size: 20px; }
.post-nav .next { text-align: right; margin-left: auto; }
.post-nav .label { display: block; }

/* ---------- t shirts ---------- */
.tee-cover { margin: 0 0 49px; }
.tee-cover img { width: 100%; height: auto; max-height: 1313px; object-fit: cover; }
.tee-intro { display: grid; grid-template-columns: 415px 1fr; column-gap: 28px; align-items: start; }
.tee-intro h2 { font-size: 39px; font-weight: 600; line-height: 1.15; }
.tee-intro .flow { max-width: 593px; margin-left: auto; }
.tee-grid { list-style: none; padding: 0; margin: 63px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.tee-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.tee-grid .tee-title { display: inline-block; margin-top: 28px; font-size: 20px; }
.tee-grid .tee-title.plain { text-decoration: none; }
.tee-outro { margin-top: 56px; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: var(--white); padding: 123px 0 84px; font-size: 14px; line-height: 1.43; }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.footer-cols h2 { font-size: 19px; font-weight: 600; line-height: 1.47; color: var(--paper); margin-bottom: 32px; }
.footer-cols ul { list-style: none; padding: 0; margin: 0; }
.footer-cols li + li { margin-top: 0; }
.footer-cols a { text-decoration: none; }
.footer-cols a:hover { text-decoration: underline; }
.footer-cols .flow > * + * { margin-top: 14px; }
.footer-cols .flow p + p { margin-top: 20px; }
.footer-credit { margin-top: 56px; text-align: right; font-size: 14px; }
.footer-credit a { text-decoration: underline; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .tee-intro { grid-template-columns: 1fr; row-gap: 28px; }
  .tee-intro .flow { margin-left: 0; }
  .tee-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-cols { grid-template-columns: repeat(2, 1fr); row-gap: 56px; }
}
@media (max-width: 780px) {
  body { font-size: 18px; }
  .site-header { padding: 24px 0 40px; }
  .site-header .wide { flex-wrap: wrap; gap: 16px 28px; }
  .site-nav { margin-left: 0; width: 100%; }
  .site-nav ul { flex-wrap: wrap; gap: 8px 20px; }
  .page-title { font-size: 44px; margin-bottom: 36px; }
  .hero { min-height: 560px; margin-bottom: 56px; }
  .hero h1 { font-size: 36px; }
  .entry-title { font-size: 34px; }
  .flow h2, .tee-intro h2 { font-size: 30px; }
  .tee-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .footer-cols { grid-template-columns: 1fr; row-gap: 40px; }
  .site-footer { padding: 72px 0 56px; }
  .footer-credit { text-align: left; }
  .post-nav { flex-direction: column; }
  .post-nav .next { text-align: left; margin-left: 0; }
  main { padding-bottom: 56px; }
}
@media (max-width: 480px) {
  :root { --gutter: 16px; }
  .brand { gap: 16px; }
  .brand img { width: 110px; height: 54px; }
  .tee-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}