/* Hollowfield Collective, field-guide draft.
   Palette taken from the supplied artwork rather than chosen beside it:
   slate and brass off the wordmark, cream off the patch ring. */

:root {
  --paper:      #f3ede1;
  --paper-warm: #e9e0cd;
  --paper-edge: #d4c8ae;
  --slate:      #2d3235;   /* wordmark ground */
  --slate-deep: #23282a;
  --ink:        #22262a;
  --ink-soft:   #4d555a;
  --ink-faint:  #8a8d84;
  --brass:      #8a7336;   /* wordmark lettering, darkened to hold on paper */
  --brass-lit:  #bfad82;   /* the lettering as it actually is, for dark grounds */
  --cream:      #e6e6d7;   /* patch ring */
  --measure:    34rem;
  --wide:       64rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font: 400 17px/1.65 "Archivo", system-ui, -apple-system, sans-serif;
  position: relative;
}

/* Paper grain.

   The waves are generated as true sines whose period divides the tile width
   exactly, so the value and the slope both match at the left and right edges
   and the tile actually repeats. The previous version was hand-written cubics
   that matched at neither, which is why a seam ran down the page wherever the
   tile wrapped and the lines appeared to stop mid-stroke. See the generator
   note in the README before editing this by hand. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.3;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27320%27%20height%3D%27150%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23c2b291%27%20stroke-width%3D%270.7%27%3E%3Cpath%20d%3D%27M0%2018.00%20C26.67%2021.67%2053.33%2025.00%2080.00%2025.00%20C106.67%2025.00%20133.33%2021.67%20160.00%2018.00%20C186.67%2014.33%20213.33%2011.00%20240.00%2011.00%20C266.67%2011.00%20293.33%2014.33%20320.00%2018.00%27%2F%3E%3Cpath%20d%3D%27M0%2052.46%20C13.33%2053.64%2026.67%2052.60%2040.00%2050.27%20C53.33%2047.93%2066.67%2044.73%2080.00%2043.54%20C93.33%2042.36%20106.67%2043.40%20120.00%2045.73%20C133.33%2048.07%20146.67%2051.27%20160.00%2052.46%20C173.33%2053.64%20186.67%2052.60%20200.00%2050.27%20C213.33%2047.93%20226.67%2044.73%20240.00%2043.54%20C253.33%2042.36%20266.67%2043.40%20280.00%2045.73%20C293.33%2048.07%20306.67%2051.27%20320.00%2052.46%27%2F%3E%3Cpath%20d%3D%27M0%2083.97%20C26.67%2081.17%2053.33%2075.79%2080.00%2072.67%20C106.67%2069.55%20133.33%2069.24%20160.00%2072.03%20C186.67%2074.83%20213.33%2080.21%20240.00%2083.33%20C266.67%2086.45%20293.33%2086.76%20320.00%2083.97%27%2F%3E%3Cpath%20d%3D%27M0%20109.95%20C13.33%20112.36%2026.67%20113.62%2040.00%20112.61%20C53.33%20111.59%2066.67%20108.46%2080.00%20106.05%20C93.33%20103.64%20106.67%20102.38%20120.00%20103.39%20C133.33%20104.41%20146.67%20107.54%20160.00%20109.95%20C173.33%20112.36%20186.67%20113.62%20200.00%20112.61%20C213.33%20111.59%20226.67%20108.46%20240.00%20106.05%20C253.33%20103.64%20266.67%20102.38%20280.00%20103.39%20C293.33%20104.41%20306.67%20107.54%20320.00%20109.95%27%2F%3E%3Cpath%20d%3D%27M0%20134.90%20C26.67%20131.62%2053.33%20130.10%2080.00%20131.72%20C106.67%20133.34%20133.33%20137.81%20160.00%20141.10%20C186.67%20144.38%20213.33%20145.90%20240.00%20144.28%20C266.67%20142.66%20293.33%20138.19%20320.00%20134.90%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: 320px 150px;
}

.sheet { position: relative; z-index: 1; }

.wrap   { max-width: var(--wide); margin: 0 auto; padding: 0 28px; }
.narrow { max-width: var(--measure); }

p { margin: 0 0 1.1rem; }
a { color: var(--brass); text-decoration-thickness: 1px; text-underline-offset: 3px; }

h1, h2, h3 {
  font-family: "Zilla Slab", Georgia, serif;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.12;
  margin: 0;
}

.label {
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-faint);
  margin: 0 0 1.25rem;
}

/* ------------------------------------------------------------ the sign */
/* The wordmark is a rendered plaque with its own edges, vignette and contour
   lines. Its corner pixels run from near-black to near-white, so it will never
   blend into a flat band. Treated as an object hung on the paper instead,
   which also keeps the page light: the README is firm that this site is the
   daylight inversion of the Institute, and a dark page would undo that. */

.sign {
  padding: clamp(40px, 6vw, 76px) 0 clamp(8px, 2vw, 20px);
}

.sign__board {
  display: block;
  width: min(620px, 100%);
  height: auto;
  border-radius: 2px;
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.5),
    0 14px 30px -14px rgb(45 50 53 / 0.45),
    0 2px 6px -2px rgb(45 50 53 / 0.3);
}

.sign__place {
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 1.4rem 0 0;
}

/* ------------------------------------------------------------ statement */
/* One sentence at real size with air around it, the move the golf club
   reference gets most of its presence from. */

.statement {
  padding: clamp(56px, 9vw, 104px) 0 clamp(40px, 6vw, 64px);
}

.statement h1 {
  font-size: clamp(2rem, 5.6vw, 3.4rem);
  max-width: 17ch;
  letter-spacing: -0.015em;
}

.statement h1 em { font-style: normal; color: var(--brass); }

.statement .sub {
  margin-top: 1.75rem;
  max-width: var(--measure);
  font-size: 1.0625rem;
}

/* ------------------------------------------------------------ the offer */

.offer {
  background: var(--slate);
  color: var(--cream);
  padding: clamp(40px, 6vw, 68px) 0;
  position: relative;
}

.offer .label { color: rgb(230 230 215 / 0.55); }
.offer h2 { color: var(--cream); font-size: clamp(1.4rem, 3.2vw, 1.9rem); margin-bottom: 1.5rem; }
.offer p { color: rgb(230 230 215 / 0.82); }
.offer a { color: var(--brass-lit); }

.offer__grid {
  display: grid;
  gap: clamp(24px, 4vw, 54px);
  grid-template-columns: 1fr;
}

@media (min-width: 820px) {
  .offer__grid { grid-template-columns: 1.15fr 1fr; }
}

.offer__terms {
  border-left: 2px solid rgb(191 173 130 / 0.45);
  padding-left: 22px;
}

.offer__terms dt {
  font-family: "Zilla Slab", Georgia, serif;
  color: var(--brass-lit);
  font-size: 0.95rem;
  margin-top: 1.1rem;
}
.offer__terms dt:first-child { margin-top: 0; }
.offer__terms dd { margin: 0.2rem 0 0; color: rgb(230 230 215 / 0.78); font-size: 0.95rem; }

/* -------------------------------------------------------------- catalogue */
/* A numbered field-guide list, not five identical cards. Shipped entries get
   a plate and full weight; unshipped ones are quieter by design, so the
   difference is visible before you read a word. */

.catalogue { padding: clamp(48px, 7vw, 88px) 0; }

.entry {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: clamp(26px, 4vw, 40px) 0;
  border-top: 1px solid var(--paper-edge);
  align-items: start;
}

.entry:last-child { border-bottom: 1px solid var(--paper-edge); }

@media (min-width: 760px) {
  .entry { grid-template-columns: 112px 1fr; gap: 36px; }
}

.entry__plate {
  width: 112px;
  aspect-ratio: 1;
  flex: 0 0 auto;
  /* The plate draws its own two rings, so there are no box-shadow rings here.
     Only the shadow that sits it on the paper. */
  filter: drop-shadow(0 5px 10px rgb(45 50 53 / 0.22));
}

.entry__plate svg { width: 100%; height: 100%; display: block; }



.entry__num {
  font-family: "Zilla Slab", Georgia, serif;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 0.4rem;
}

.entry h3 { font-size: 1.4rem; display: inline; }

.entry__meta {
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-left: 12px;
  white-space: nowrap;
}

.entry__meta--soon { color: var(--brass); }

.entry p { margin: 0.7rem 0 0; max-width: 54ch; }
.entry .links { margin-top: 0.9rem; font-size: 0.9375rem; }

.entry--soon .entry__plate { opacity: 0.62; }
.entry--soon h3 { color: var(--ink-soft); }

/* ---------------------------------------------------------------- footer */

.foot {
  background: var(--slate-deep);
  color: rgb(230 230 215 / 0.72);
  padding: clamp(40px, 6vw, 64px) 0 clamp(32px, 5vw, 48px);
  font-size: 0.9375rem;
}

.foot a { color: var(--brass-lit); }

.foot__row {
  display: flex;
  gap: 32px;
  align-items: center;
  flex-wrap: wrap;
}

.foot__patch { width: 96px; height: auto; flex: 0 0 auto; }

.foot__contact { font-family: "Zilla Slab", Georgia, serif; font-size: 1.25rem; }

.foot__note { margin-top: 2rem; font-size: 0.8125rem; color: rgb(230 230 215 / 0.45); }

/* ------------------------------------------------- inner document pages */
/* The privacy policies and the 404 were written against the old stylesheet
   and use its class names. Rather than rewrite four files of legal text and
   risk changing a word of it, the names are taught to this sheet in the new
   palette. Those pages change one line each: the stylesheet they link. */

.prose { padding: clamp(36px, 6vw, 64px) 0 clamp(48px, 7vw, 88px); }

.prose .backlink {
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 2.25rem;
}
.prose .backlink a { color: var(--ink-faint); text-decoration: none; }
.prose .backlink a:hover { color: var(--brass); text-decoration: underline; }

.prose .masthead {
  border-bottom: 2px solid var(--slate);
  padding-bottom: 1.1rem;
  margin-bottom: 2rem;
  max-width: var(--measure);
}

.prose .masthead h1 {
  font-size: clamp(1.7rem, 4.2vw, 2.4rem);
  letter-spacing: -0.012em;
}

.prose .sub {
  font-family: "Zilla Slab", Georgia, serif;
  color: var(--brass);
  font-size: 1.05rem;
  margin: 0.45rem 0 0;
}

.prose .updated {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0.8rem 0 0;
}

.prose .lede {
  font-family: "Zilla Slab", Georgia, serif;
  font-size: clamp(1.1rem, 2.6vw, 1.3rem);
  line-height: 1.45;
  color: var(--ink);
  max-width: var(--measure);
}

.prose p, .prose ul, .prose ol { max-width: var(--measure); }

.prose .section {
  margin-top: 2.5rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--paper-edge);
}

.prose .section h2 {
  font-size: 1.2rem;
  margin-bottom: 0.7rem;
}

.prose ul, .prose ol { padding-left: 1.1rem; margin: 0 0 1.1rem; }
.prose li { margin-bottom: 0.45rem; }

.prose .footer {
  margin-top: 3.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--paper-edge);
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

/* The 404 borrows the home page's own blocks, so it only needs these. */
.intro { padding: clamp(28px, 5vw, 48px) 0 0; }
.intro .lede {
  font-family: "Zilla Slab", Georgia, serif;
  font-size: clamp(1.25rem, 3.2vw, 1.6rem);
  color: var(--ink);
  max-width: var(--measure);
}
.contact { margin-top: 2.5rem; }
.contact .lede { font-family: "Zilla Slab", Georgia, serif; font-size: 1.25rem; }
.footer { margin-top: 3rem; font-size: 0.8125rem; color: var(--ink-faint); }
.masthead h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); }
.masthead .sub {
  font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0.5rem 0 0;
}
.section { margin-top: 2rem; }