/* base: fonts, reset, a11y, and the switch mechanics. /fonts is filled in by build.mjs. */
@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-full.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-full-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/fonts/plexmono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/fonts/plexmono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Londrina"; src: url("/fonts/londrina-900.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("/fonts/caveat-wght.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: auto; }
/* Rotated boards and taped corners may poke past the edge; never let that make the page scroll sideways. */
body { margin: 0; overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset, table { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
table { border-collapse: collapse; }
th { font-weight: inherit; text-align: left; }
a { color: inherit; }
h1, h2, h3 { text-wrap: balance; font-weight: inherit; font-size: inherit; }
p { text-wrap: pretty; }
img, svg { max-width: 100%; }
.defs { position: absolute; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; padding: .6em 1em; background: #fff; color: #000; z-index: 10; }
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--focus, currentColor); outline-offset: 3px; }
[id] { scroll-margin-top: 16px; }

.jarcard-label { display: contents; }

/* ----- the switch: two radio buttons, no script -----
   The table always holds both columns (reader mode, screen readers, link unfurlers get both).
   Where :has() works, one column shows at a time and the control flips it. */
.sw-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sw-control { display: flex; align-items: center; }
.sw-l { cursor: pointer; user-select: none; -webkit-user-select: none; }
.sw-toggle { position: relative; display: inline-block; flex: none; }
.sw-hit { position: absolute; inset: -6px; cursor: pointer; z-index: 3; }
.switch:has(#sw-before:checked) .sw-hit-before,
.switch:has(#sw-after:checked) .sw-hit-after { display: none; }
.sw-control:has(.sw-input:focus-visible) .sw-toggle { outline: 3px solid var(--focus, currentColor); outline-offset: 5px; }
.sw-table td .v, .sw-table td .n { display: block; }
.sw-table td, .sw-table th { vertical-align: top; }

@supports selector(:has(*)) {
  .sw-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .sw-table, .sw-table tbody { display: block; }
  .sw-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.25rem; align-items: baseline; }
  .sw-table tbody th { grid-column: 1; grid-row: 1; }
  .sw-table tbody td { grid-column: 2; grid-row: 1; text-align: right; transition: opacity .26s ease, transform .26s ease; }
  .switch:has(#sw-before:checked) td.col-after,
  .switch:has(#sw-after:checked) td.col-before { opacity: 0; transform: translateY(.3em); pointer-events: none; user-select: none; -webkit-user-select: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Plain paper: the base for every page (look 1). The jar page is this, unchanged except the name has no period. */
.t-plain {
  --paper: #FAF6EE; --ink: #1C1A17; --mute: #6F695E; --rule: #DCD4C4; --peach: #D95F30; --peach-soft: #F6D2B8; --focus: #D95F30;
  background: var(--paper); color: var(--ink);
  font-family: "Fraunces", Georgia, serif; font-optical-sizing: auto; font-variation-settings: "SOFT" 40, "WONK" 0;
  font-size: 19px; line-height: 1.55;
}
.t-plain .page { max-width: 1128px; margin: 0 auto; padding: 0 32px; }
.t-plain a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.t-plain a:hover { color: var(--peach); }
.t-plain .mono, .t-plain .plain, .t-plain .shelfnav, .t-plain .sign-open, .t-plain .season, .t-plain .jarcard-no, .t-plain .jarcard-name,
.t-plain .jarcard-packed, .t-plain .second-when, .t-plain .addr, .t-plain .foot, .t-plain .masthead, .t-plain .label-shelf, .t-plain .label-parts dt,
.t-plain .sw-l, .t-plain .sw-table .n, .t-plain .sw-note, .t-plain .open-jar, .t-plain .batch-when, .t-plain .cta-addr, .t-plain .next {
  font-family: "Plex Mono", ui-monospace, Menlo, monospace; font-variation-settings: normal; font-style: normal;
}

/* the sign */
.t-plain .sign { padding: 44px 0 24px; }
.t-plain .sign-board { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 40px; }
.t-plain .sign-name { grid-row: 1 / span 2; font-size: clamp(52px, 7.6vw, 108px); white-space: nowrap; line-height: .9; letter-spacing: -.035em; font-weight: 360; font-variation-settings: "SOFT" 100, "WONK" 1; }
.t-plain .sign-line { font-size: 21px; font-style: italic; text-align: right; line-height: 1.3; }
.t-plain .sign-open { font-size: 12px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--mute); text-align: right; margin-top: 6px; }

.t-plain .shelfnav { border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--rule); }
.t-plain .shelfnav ul { display: flex; flex-wrap: wrap; gap: 4px 30px; padding: 11px 0; font-size: 12.5px; font-weight: 500; letter-spacing: .11em; text-transform: uppercase; }
.t-plain .shelfnav a { text-decoration: none; }

/* home */
.t-plain.p-home main { display: grid; grid-template-columns: 7fr 1fr 4fr; }
.t-plain .who { grid-column: 1; padding: 34px 0 36px; font-size: 27px; line-height: 1.33; font-weight: 340; letter-spacing: -.012em; }
.t-plain .shelf { grid-column: 1 / -1; border-top: 1.5px solid var(--ink); padding: 16px 0 60px; display: grid; grid-template-columns: 3fr 9fr; column-gap: 32px; align-items: start; }
.t-plain .shelf > * { grid-column: 2; }
.t-plain .shelf > .shelf-head { grid-column: 1; grid-row: 1 / span 4; }
.t-plain .shelf-name { font-size: 30px; font-style: italic; font-weight: 400; letter-spacing: -.012em; line-height: 1.1; }
.t-plain .plain { font-size: 12.5px; line-height: 1.5; color: var(--mute); margin-top: 8px; max-width: 26ch; }

.t-plain .shelf-fresh { grid-column: 3; border-top: 0; padding: 40px 0 34px; display: block; }
.t-plain .shelf-fresh .shelf-name { font-size: 19px; }
.t-plain .shelf-fresh .plain { margin-top: 2px; }
.t-plain .fresh-list { margin-top: 14px; border-top: 1px solid var(--rule); }
.t-plain .fresh-list li { font-size: 15.5px; line-height: 1.4; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.t-plain .season { display: block; font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--peach); }

.t-plain .jars { margin-top: -16px; }
.t-plain .jarcard { border-bottom: 1px solid var(--rule); }
.t-plain .jarcard-a { display: block; text-decoration: none; padding: 16px 0 19px; }
.t-plain .jarcard-body { display: grid; grid-template-columns: 3.4rem 1fr auto; column-gap: 8px; align-items: baseline; }
.t-plain .jarcard-no, .t-plain .jarcard-name, .t-plain .jarcard-packed { font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.t-plain .jarcard-packed { grid-column: 3; grid-row: 1; text-align: right; white-space: nowrap; }
.t-plain .jarcard-title { grid-column: 2 / -1; grid-row: 2; font-size: 31px; line-height: 1.14; font-weight: 400; letter-spacing: -.018em; margin-top: 3px; }
.t-plain .jarcard-a:hover .jarcard-title { color: var(--peach); }

.t-plain .shelf-sign { font-size: 36px; font-style: italic; font-weight: 330; line-height: 1.12; letter-spacing: -.015em; margin: -2px 0 30px; }
.t-plain .seconds-list { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.t-plain .second-title { font-size: 22px; font-weight: 520; line-height: 1.2; letter-spacing: -.01em; }
.t-plain .second-when { font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin: 5px 0 12px; }
.t-plain .second p + p { margin-top: .8em; }
.t-plain .second > p { font-size: 17px; line-height: 1.56; }

.t-plain .farmer-body { max-width: 62ch; font-size: 20px; line-height: 1.5; }
.t-plain .more { margin-top: 14px; font-style: italic; font-size: 18px; }

.t-plain .doors { margin-top: -16px; }
.t-plain .door { border-bottom: 1px solid var(--rule); }
.t-plain .door a { display: grid; grid-template-columns: 5fr 7fr; column-gap: 32px; align-items: baseline; padding: 15px 0 16px; text-decoration: none; }
.t-plain .door-head { font-size: 25px; font-style: italic; font-weight: 400; letter-spacing: -.01em; line-height: 1.2; }
.t-plain .door-line { font-size: 17px; line-height: 1.45; color: #3B3833; }
.t-plain .door a:hover .door-line { color: var(--ink); }
.t-plain .promise { margin-top: 26px; font-size: 20px; font-style: italic; }
.t-plain .addr { margin-top: 6px; font-size: 13px; }

.t-plain .foot { border-top: 1.5px solid var(--ink); padding: 16px 0 44px; font-size: 12px; line-height: 1.5; color: var(--mute); }

/* jar page */
.t-plain .masthead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; padding: 18px 0 13px; border-bottom: 1.5px solid var(--ink); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.t-plain .mast-name { font-family: "Fraunces", serif; font-variation-settings: "SOFT" 100, "WONK" 1; font-size: 23px; font-weight: 420; letter-spacing: -.02em; text-transform: none; text-decoration: none; }
.t-plain .mast-line { color: var(--mute); }
.t-plain .mast-who { margin-left: auto; }

.t-plain .jar { display: grid; grid-template-columns: 7fr 1fr 4fr; align-items: start; }
.t-plain .label { grid-column: 1 / -1; padding: 36px 0 26px; }
.t-plain .label-shelf { font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.t-plain .label-shelf .label-no::before, .t-plain .label-shelf .label-name::before { content: "/ "; opacity: .6; }
.t-plain .label-title { font-size: clamp(40px, 6.6vw, 84px); line-height: .98; letter-spacing: -.032em; font-weight: 360; font-variation-settings: "SOFT" 100, "WONK" 1; margin: 12px 0 26px; max-width: 13.5em; }
.t-plain .label-parts { display: grid; grid-template-columns: 7fr 1fr 2fr 2fr; column-gap: 0; border-top: 1px solid var(--rule); padding-top: 12px; }
.t-plain .label-parts > div:nth-child(2) { grid-column: 3; padding-right: 20px; }
.t-plain .label-parts > div:nth-child(3) { grid-column: 4; }
.t-plain .label-parts dt { font-size: 11px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--mute); }
.t-plain .label-parts dd { font-size: 16.5px; font-style: italic; line-height: 1.35; margin-top: 3px; }

.t-plain .label-view { grid-column: 1; padding: 6px 0 34px; font-size: 20px; line-height: 1.52; }
.t-plain .label-view p + p { margin-top: .85em; }

.t-plain .switch { grid-column: 3; padding: 8px 0 34px; }
.t-plain .sw-control { gap: 12px; padding-bottom: 14px; border-bottom: 1.5px solid var(--ink); }
.t-plain .sw-l { font-size: 12px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--mute); padding: 4px 0; }
.t-plain .switch:has(#sw-before:checked) .sw-l-before, .t-plain .switch:has(#sw-after:checked) .sw-l-after { color: var(--ink); }
.t-plain .sw-toggle { width: 58px; height: 30px; }
.t-plain .sw-track { position: absolute; inset: 0; border: 1.5px solid var(--ink); border-radius: 99px; background: transparent; transition: background-color .26s ease; }
.t-plain .sw-knob { position: absolute; top: 5px; left: 5px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); transition: transform .26s cubic-bezier(.3, 1.3, .5, 1); }
.t-plain .switch:has(#sw-after:checked) .sw-track { background: var(--peach); }
.t-plain .switch:has(#sw-after:checked) .sw-knob { transform: translateX(28px); }
.t-plain .sw-hint { margin-left: auto; font-size: 17px; font-style: italic; color: var(--mute); }
.t-plain .sw-table { width: 100%; }
.t-plain .sw-table tbody tr { border-bottom: 1px solid var(--rule); padding: 13px 0 12px; }
.t-plain .sw-rowlabel { font-size: 16.5px; line-height: 1.3; display: block; max-width: 11em; }
.t-plain .sw-table .v { font-family: "Plex Mono", monospace; font-variation-settings: normal; font-size: 34px; font-weight: 500; letter-spacing: -.04em; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; }
.t-plain .sw-table td.col-after .v { color: var(--peach); }
.t-plain .sw-table .n { font-size: 11px; line-height: 1.35; color: var(--mute); margin-top: 4px; max-width: 21ch; margin-left: auto; }
.t-plain .sw-note { font-size: 11.5px; line-height: 1.5; color: var(--mute); margin-top: 12px; }
.t-plain .sw-note .k { color: var(--ink); }

.t-plain .open-jar { grid-column: 1 / -1; border-top: 1.5px solid var(--ink); padding: 11px 0 0; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.t-plain .open-jar a { text-decoration: none; }
.t-plain .open-jar a::after { content: " \2193"; color: var(--peach); }

.t-plain .opened { grid-column: 1 / -1; padding-top: 34px; }
.t-plain .part { display: grid; grid-template-columns: 3fr 7fr 2fr; column-gap: 32px; padding: 0 0 42px; }
.t-plain .part > h2 { font-size: 27px; font-style: italic; font-weight: 400; letter-spacing: -.012em; line-height: 1.12; }
.t-plain .part-body { font-size: 19.5px; line-height: 1.56; }
.t-plain .part-body p + p { margin-top: .85em; }
.t-plain .lede { font-style: italic; }
.t-plain .batches { margin-top: 18px; border-top: 1px solid var(--rule); }
.t-plain .batches li { display: grid; grid-template-columns: 8.2rem 1fr; column-gap: 16px; padding: 13px 0 14px; border-bottom: 1px solid var(--rule); }
.t-plain .batch-when { font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--peach); padding-top: 6px; }
.t-plain .batches p { font-size: 18px; line-height: 1.5; }
.t-plain .part-bring { border-top: 1.5px solid var(--ink); padding-top: 18px; }
.t-plain .part-bring .part-body > p:first-child { font-size: 27px; line-height: 1.3; font-weight: 340; letter-spacing: -.012em; }
.t-plain .cta-row { margin-top: 16px !important; }
.t-plain .cta { font-size: 46px; font-style: italic; font-weight: 380; letter-spacing: -.02em; color: var(--peach); text-decoration-thickness: 2px; text-underline-offset: 6px; line-height: 1.1; }
.t-plain .cta:hover { color: var(--ink); }
.t-plain .cta-addr { font-size: 12.5px; color: var(--mute); margin-top: 12px !important; }

.t-plain .next { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 32px; border-top: 1px solid var(--rule); padding: 16px 0 40px; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.t-plain .next a { text-decoration: none; }
.t-plain .next .k { color: var(--mute); }
.t-plain .next .v { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

@media (max-width: 820px) {
  .t-plain { font-size: 18px; }
  .t-plain .page { padding: 0 20px; }
  .t-plain .sign { padding: 34px 0 20px; }
  .t-plain .sign-board { grid-template-columns: 1fr; }
  .t-plain .sign-name { grid-row: auto; font-size: clamp(50px, 15.5vw, 96px); white-space: normal; }
  .t-plain .sign-line, .t-plain .sign-open { text-align: left; }
  .t-plain .sign-line { margin-top: 16px; font-size: 19px; }
  .t-plain .shelfnav ul { gap: 4px 18px; font-size: 11.5px; }
  .t-plain.p-home main, .t-plain .jar { display: block; }
  .t-plain .who { font-size: 22px; padding: 26px 0 28px; }
  .t-plain .shelf { display: block; padding: 14px 0 40px; }
  .t-plain .shelf-fresh { border-top: 1.5px solid var(--ink); padding: 14px 0 34px; }
  .t-plain .shelf-fresh .shelf-name, .t-plain .shelf-name { font-size: 27px; }
  .t-plain .shelf-fresh .plain { margin-top: 8px; }
  .t-plain .plain { max-width: none; margin-bottom: 16px; }
  .t-plain .jars, .t-plain .doors { margin-top: 0; border-top: 1px solid var(--rule); }
  .t-plain .jarcard-body { grid-template-columns: 3.2rem 1fr; }
  .t-plain .jarcard-packed { grid-column: 1 / -1; grid-row: 3; text-align: left; margin-top: 8px; white-space: normal; }
  .t-plain .jarcard-title { grid-column: 1 / -1; font-size: 25px; }
  .t-plain .shelf-sign { font-size: 29px; margin: 4px 0 24px; }
  .t-plain .seconds-list { grid-template-columns: 1fr; gap: 30px; }
  .t-plain .farmer-body { font-size: 18.5px; }
  .t-plain .door a { display: block; }
  .t-plain .door-head { display: block; font-size: 23px; }
  .t-plain .door-line { display: block; margin-top: 3px; }
  .t-plain .masthead { padding-top: 14px; }
  .t-plain .mast-line { display: none; }
  .t-plain .label { padding: 30px 0 22px; }
  .t-plain .label-title { font-size: clamp(38px, 11.6vw, 64px); margin: 12px 0 22px; }
  .t-plain .label-parts { grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .t-plain .label-parts > div:nth-child(1) { grid-column: 1 / -1; }
  .t-plain .label-parts > div:nth-child(2) { grid-column: 1; padding-right: 0; }
  .t-plain .label-parts > div:nth-child(3) { grid-column: 2; }
  .t-plain .label-view { font-size: 18.5px; padding-bottom: 26px; }
  .t-plain .switch { border-top: 1.5px solid var(--ink); padding-top: 16px; }
  .t-plain .sw-table .v { font-size: 32px; }
  .t-plain .part { display: block; padding-bottom: 32px; }
  .t-plain .part > h2 { margin-bottom: 8px; font-size: 25px; }
  .t-plain .part-body { font-size: 18.5px; }
  .t-plain .batches li { display: block; }
  .t-plain .batch-when { padding: 0 0 3px; }
  .t-plain .part-bring .part-body > p:first-child { font-size: 22px; }
  .t-plain .cta { font-size: 40px; }
}

/* the jar page: the switch and a pinned film print share the right-hand column */
.t-plain .jar-side { grid-column: 3; }
.t-plain .jar-side .switch { grid-column: auto; }
.t-plain .sw-none { padding: 14px 0 12px; border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--rule); font-size: 17px; font-style: italic; line-height: 1.45; color: #3B3833; }
.t-plain .jar-print { position: relative; margin: 6px 0 36px 18px; max-width: 300px; background: #FDFCF8; padding: 10px 10px 0; transform: rotate(1.6deg);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .15), 5px 10px 12px rgba(24, 14, 4, .28); }
.t-plain .jar-print img { display: block; width: 100%; height: auto; }
.t-plain .jar-print figcaption { padding: 7px 2px 10px; font-family: "Caveat", cursive; font-size: 17px; font-weight: 600; line-height: 1.1; color: #22304A; }
.t-plain .jar-print .tack { position: absolute; z-index: 2; top: -6px; left: 50%; margin-left: -7px; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F4D98A, #BC8C2C 58%, #6E5016); box-shadow: 2px 3px 2px rgba(0, 0, 0, .35); }
@media (max-width: 820px) { .t-plain .jar-print { margin: 0 0 30px 8px; max-width: 260px; } }
.t-plain .plain-h { margin-top: 18px; font-family: "Plex Mono", monospace; font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.t-plain .plain-list { margin-top: 6px; border-top: 1px solid var(--rule); }
.t-plain .plain-list li { padding: 7px 0 8px; border-bottom: 1px solid var(--rule); font-size: 16.5px; line-height: 1.35; }

/* The stand: the home page and the 404. His film photo of the orchard is the ground the page stands on: the
   name sits in its sky, then the inside of an old peach shed (a tin roof over a board ceiling, dark timber posts
   with knee braces, a header beam with a painted board) and three bays of worn plank shelving on 2x4 brackets,
   the jars in light pine crates turned on their side. The shed is open at the back: the orchard shows behind the
   shelves, in the shed's shade (his pick over a board back wall, 10-10). The page ends back in the orchard at dusk.
   Every piece of text sits on an object: a tacked notice, the chalkboard, a shelf tag, a print, a painted board.
   The light comes from the upper left, as in the photo; every object casts its shadow that way. */

.p-home, .p-404 {
  --timber-c: #4A3524; --plank-c: #6B5440; --pine-c: #D9C29A; --nail: #2B241D;
  --timber: url("/img/stand/timber-dark.jpg"); --timber-v: url("/img/stand/timber-dark-v.jpg"); --plank: url("/img/stand/plank-worn.jpg");
  --siding: url("/img/stand/siding-boards.jpg"); --ceiling: url("/img/stand/ceiling-boards.jpg"); --tin: url("/img/stand/tin.jpg");
  --pine-light: url("/img/stand/pine-light.jpg"); --painted: url("/img/stand/painted-board.jpg");
  --paint: #8A2216; --kraft: #C9A06A; --pen: #22304A;
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --shadow: 6px 12px 10px rgba(24, 14, 4, .38);
  background: #2B2A22;
}

/* ---------- the photo behind everything (a fixed element, not background-attachment: iOS ignores that) ---------- */
.backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100lvh; z-index: -1; }
.backdrop img, .road-photo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 42%; }
.p-home .backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(250, 246, 238, .28), rgba(250, 246, 238, .04) 46%, rgba(30, 25, 15, .22)); }
.caption { font-family: "Plex Mono", monospace; font-size: 11px; letter-spacing: .06em; color: rgba(255, 252, 245, .92); text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }

/* ---------- the first screen: the orchard, with the name and the shelves in its sky ---------- */
.p-home .hero { position: relative; min-height: 94svh; display: flex; flex-direction: column; }
.p-home .hero > .page { width: 100%; } /* auto margins on a flex item would shrink it to its content */
.p-home .topnav { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 28px; padding-top: 22px; padding-bottom: 12px;
  font-family: "Plex Mono", monospace; font-size: 12.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.p-home .topnav::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 120px; z-index: -1; background: linear-gradient(rgba(250, 246, 238, .55), rgba(250, 246, 238, 0)); }
.p-home .topnav ul { display: flex; flex-wrap: wrap; gap: 4px 26px; }
.p-home .topnav a { text-decoration: none; border-bottom: 1px solid rgba(28, 26, 23, .35); padding-bottom: 2px; }
.p-home .topnav a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.p-home .hero-sign { padding-top: clamp(28px, 7vh, 90px); }
.p-home .hero-name { font-size: clamp(64px, 10.5vw, 168px); line-height: .86; letter-spacing: -.04em; font-weight: 340; font-variation-settings: "SOFT" 100, "WONK" 1; max-width: 9em; }
.p-home .hero-line { margin-top: 18px; font-size: clamp(21px, 2.2vw, 30px); font-style: italic; font-weight: 360; letter-spacing: -.01em; }
.p-home .hero .caption { margin-top: auto; padding-top: 24px; padding-bottom: 18px; }

/* ---------- wood: dark old timber for the frame, worn planks for shelves, pale pine for crates ---------- */
.post, .sp-post { background: var(--timber-c) var(--timber-v) center / cover; border-radius: 1px;
  box-shadow: inset -8px 0 12px rgba(10, 6, 2, .45), inset 3px 0 3px rgba(255, 238, 210, .12), 10px 0 18px rgba(14, 8, 2, .45); }
.beam, .brace { background: var(--timber-c) var(--timber) center / cover; }
.rail, .plank, .jars::before { background: var(--plank-c) var(--plank) center 30% / cover; }
.plank, .jars::before { border-radius: 2px 2px 3px 3px;
  box-shadow: inset 0 5px 0 rgba(255, 236, 210, .14), inset 0 6px 0 rgba(20, 12, 4, .3), inset 0 -4px 6px rgba(10, 6, 2, .45), 0 16px 18px -4px rgba(14, 8, 2, .55); }
/* 2x4 brackets under each shelf */
.plank::after, .jars::after { content: ""; position: absolute; top: 100%; left: 9%; right: 9%; height: 46px; pointer-events: none;
  background: linear-gradient(90deg, var(--timber-c) 0 14px, transparent 14px calc(100% - 14px), var(--timber-c) calc(100% - 14px)); opacity: .95;
  -webkit-mask-image: linear-gradient(#000, #000 60%, transparent); mask-image: linear-gradient(#000, #000 60%, transparent); }
.rail { box-shadow: inset 0 2px 0 rgba(255, 236, 210, .14), inset 0 -3px 4px rgba(10, 6, 2, .4), 0 8px 10px rgba(14, 8, 2, .35); }
/* hand-painted lettering on a painted board */
.beam-board span, .bay-sign span, .sp-board span { display: inline-block; filter: url(#paint); }
.beam-board, .bay-sign, .sp-board { background: #ECE6D8 var(--painted) center / cover; color: var(--paint); font-family: "Londrina", "Arial Black", sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(60, 40, 20, .2), inset 0 -3px 5px rgba(60, 40, 20, .2), var(--shadow); border-radius: 1px; }
.beam-board::before, .beam-board::after, .bay-sign::before, .sp-board::before, .sp-board::after { content: ""; position: absolute; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #8A8279, var(--nail) 70%); }
.beam-board::before, .bay-sign::before, .sp-board::before { left: 9px; } .beam-board::after, .sp-board::after { right: 9px; }

/* ---------- paper ---------- */
.notice { position: relative; background: #FBF7EE var(--paper-grain); padding: 34px 36px 30px; border-radius: 1px; transform: rotate(-.5deg);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .12), 0 3px 4px rgba(24, 14, 4, .12), var(--shadow); }
.tack { position: absolute; top: 12px; width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F4D98A, #BC8C2C 58%, #6E5016); box-shadow: 2px 3px 2px rgba(0, 0, 0, .35); }
.tack-l { left: 16px; } .tack-r { right: 16px; }

/* ---------- the stand ---------- */
.p-home .stand { position: relative; max-width: 1240px; margin: 0 auto; padding: 0 58px; }
.p-home .post { position: absolute; top: 0; bottom: -90px; width: 42px; z-index: 2; }
.p-home .post-l { left: 8px; } .p-home .post-r { right: 8px; }
.p-home .roof { position: relative; z-index: 3; height: 96px; margin: 0 -58px; }
.p-home .tin { position: absolute; left: -24px; right: -24px; top: 0; height: 30px; background: #9EA3A3 var(--tin) 0 0 / auto 100% repeat-x; border-radius: 2px;
  box-shadow: inset 0 -3px 4px rgba(0, 0, 0, .3), 0 10px 14px rgba(14, 8, 2, .45); }
/* the underside of the roof: boards between dark rafters, in the shed's shadow */
.p-home .ceiling { position: absolute; left: 0; right: 0; top: 26px; bottom: 0; background:
  repeating-linear-gradient(90deg, transparent 0 130px, rgba(20, 12, 5, .9) 130px 152px, transparent 152px 156px),
  linear-gradient(rgba(10, 6, 2, .55), rgba(10, 6, 2, .25)), #3A2C20 var(--ceiling) center / cover; box-shadow: inset 0 -10px 16px rgba(0, 0, 0, .35); }
.p-home .beam { position: relative; z-index: 3; height: 50px; margin: 0 -58px; border-radius: 1px; box-shadow: inset 0 3px 0 rgba(255, 236, 210, .14), inset 0 -8px 10px rgba(10, 6, 2, .45), 0 18px 22px rgba(14, 8, 2, .5); }
/* knee braces from each post up to the beam */
.p-home .brace { position: absolute; z-index: -1; top: calc(100% + 78px); width: 124px; height: 18px; box-shadow: inset 0 -4px 5px rgba(10, 6, 2, .45), 6px 8px 10px rgba(14, 8, 2, .4); }
.p-home .brace-l { left: 44px; transform-origin: 0 50%; transform: rotate(-45deg); }
.p-home .brace-r { right: 44px; transform-origin: 100% 50%; transform: rotate(45deg); }
.p-home .beam-board { position: absolute; left: 50%; top: 30px; margin: 0; padding: 15px 36px 12px; font-size: clamp(24px, 3vw, 38px); transform: translateX(-50%) rotate(-1deg); white-space: nowrap; }
/* the shade under the stand: the orchard still shows through */
.p-home .bays { position: relative; padding: 84px 0 56px; }
.p-home .bays { background: linear-gradient(rgba(16, 10, 4, .5), rgba(16, 10, 4, .2) 22%, rgba(16, 10, 4, .12) 60%, rgba(16, 10, 4, .2)); }
.p-home .bay { position: relative; padding: 48px 40px 0; }
.p-home .bay + .bay { margin-top: 72px; }
.p-home .rail { position: absolute; left: 0; right: 0; top: 26px; height: 20px; }
.p-home .plank { display: block; position: relative; height: 30px; margin: 0 -40px; }

/* bay heads: a small painted board nailed to the rail, and a paper strip that says what the shelf is */
.p-home .bay-head { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: -36px 0 26px; }
.p-home .bay-sign { position: relative; padding: 12px 22px 9px 26px; font-size: 26px; transform: rotate(-1.2deg); }
.p-home .bay-farmer .bay-sign { transform: rotate(.8deg); }
.p-home .bay-plain { background: #FDFBF5 var(--paper-grain); padding: 6px 14px 5px; font-family: "Caveat", cursive; font-size: 21px; font-weight: 600; line-height: 1.1; color: var(--pen); transform: rotate(.8deg); box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 3px 5px 5px rgba(14, 8, 2, .35); }

/* bay 1: the notice and the chalkboard */
.p-home .bay-intro .bay-in { display: grid; grid-template-columns: 7fr 4fr; gap: 40px; align-items: start; padding-bottom: 26px; }
.p-home .notice-who p { font-size: 25px; line-height: 1.38; font-weight: 340; letter-spacing: -.01em; }
.p-home .chalk { position: relative; align-self: end; margin-top: 40px; background: radial-gradient(120% 80% at 30% 20%, #33453E, #202C28 70%); border: 12px solid var(--timber-c); border-image: var(--timber) 30 / 12px / 0 stretch; border-radius: 4px;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .5), var(--shadow); padding: 16px 20px 10px; transform: rotate(1.4deg); transform-origin: bottom center; }
.p-home .chalk-head { font-family: "Caveat", cursive; font-size: 30px; font-weight: 700; color: #F9B98F; line-height: 1; filter: url(#chalk); }
.p-home .fresh-list li { font-family: "Caveat", cursive; font-size: 22px; font-weight: 600; line-height: 1.14; color: #F3EFE4; padding: 6px 0 9px; filter: url(#chalk); }
.p-home .fresh-list li + li { border-top: 2px dashed rgba(243, 239, 228, .28); padding-top: 8px; }
.p-home .season { font-weight: 700; color: #F9B98F; }

/* bay 2: jars on the plank, a shelf tag under each */
.p-home .shelf-row { margin: 0 -40px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.p-home .shelf-row::-webkit-scrollbar { display: none; }
.p-home .jars { --jar-h: 300px; position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; width: max-content; min-width: 100%; padding: 10px 40px 34px; }
.p-home .jars::before { content: ""; position: absolute; left: 0; right: 0; top: calc(10px + var(--jar-h)); height: 30px; }
.p-home .jars { isolation: isolate; }
.p-home .jars::after { top: calc(40px + var(--jar-h)); z-index: -1; } /* brackets behind the tags */
.p-home .jar-a, .p-home .jar-waiting, .p-home .jar-note { display: grid; grid-template-rows: var(--jar-h) auto; justify-items: center; text-decoration: none; }
.p-home .jar-glass { position: relative; display: block; line-height: 0; transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
/* a light pine produce crate turned on its side: slats at the back with dark gaps, the jar standing inside */
.p-home .crate { align-self: end; position: relative; display: flex; align-items: flex-end; justify-content: center; width: 198px; height: calc(var(--jar-h) - 6px); padding: 0 10px 2px;
  border: 13px solid var(--pine-c); border-image: var(--pine-light) 40 / 13px stretch;
  background: repeating-linear-gradient(rgba(25, 15, 5, .62) 0 7px, transparent 7px 52px), linear-gradient(rgba(20, 12, 4, .45), rgba(20, 12, 4, .2)), var(--pine-c) var(--pine-light) center / cover;
  box-shadow: inset 0 0 26px rgba(20, 12, 4, .55), 7px 10px 12px rgba(14, 8, 2, .42); }
.p-home .jars > li:nth-child(odd) .crate { transform: rotate(-.4deg); }
.p-home .jar-pic img { display: block; max-width: none; height: var(--h, 240px); width: calc(var(--h, 240px) * var(--ar, .6)); filter: drop-shadow(8px 6px 6px rgba(24, 14, 4, .4)); }
/* each photo's width over its height (the files are 700 px tall), so the shelf can size before the images load */
.p-home .jar--peach-quart { --ar: .561; } .p-home .jar--red-jelly { --ar: .659; } .p-home .jar--green-pint { --ar: .453; } .p-home .jar--cloth-cap { --ar: .621; } .p-home .jar--empty-1 { --ar: .69; } .p-home .jar--purple { --ar: .65; }
.p-home .jar--peach-quart { --h: 252px; } .p-home .jar--red-jelly { --h: 186px; } .p-home .jar--green-pint { --h: 246px; }
.p-home .jar--cloth-cap { --h: 230px; } .p-home .jar--empty-1 { --h: 206px; } .p-home .jar--empty-2 { --h: 190px; } .p-home .jar--purple { --h: 200px; }
.p-home .jar-a:hover .jar-glass, .p-home .jar-a:focus-visible .jar-glass, .p-home .jar-a:active .jar-glass { transform: translateY(-10px) rotate(-1deg); }
.p-home .jar-a:focus-visible { outline: none; } .p-home .jar-a:focus-visible .tag { outline: 3px solid var(--focus); outline-offset: 4px; }
/* the kraft label, wrapped on the glass: name and number typed, the season in pen */
.p-home .jar-label { position: absolute; left: var(--lx, 16%); right: var(--rx, 16%); top: var(--ly, 42%); bottom: var(--by, 16%); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 3px; padding: 6px 8px;
  line-height: 1.1; color: #2B1A0C; background: var(--kraft) var(--paper-grain);
  background-image: linear-gradient(90deg, rgba(60, 35, 10, .38), rgba(255, 240, 210, 0) 16%, rgba(255, 240, 210, .16) 48%, rgba(255, 240, 210, 0) 80%, rgba(60, 35, 10, .38)), var(--paper-grain); border-radius: 2px; }
.p-home .jar-label { overflow: hidden; }
.p-home .jar-no { font-family: "Plex Mono", monospace; font-size: calc(10px * var(--lf, 1)); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.p-home .jar-name { font-family: "Fraunces", serif; font-size: calc(19px * var(--lf, 1)); font-weight: 600; letter-spacing: -.01em; }
.p-home .jar-packed { font-family: "Caveat", cursive; font-size: calc(16px * var(--lf, 1)); font-weight: 600; color: var(--pen); }
/* the shelf tag, tacked to the front of the plank */
.p-home .tag { position: relative; margin-top: 12px; display: flex; flex-direction: column; gap: 6px; width: 186px; padding: 16px 16px 12px; background: #FBF4E2 var(--paper-grain); color: var(--ink); border-radius: 1px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .15), 4px 8px 8px rgba(24, 14, 4, .35); transform: rotate(-1.4deg); }
.p-home .tag::before { content: ""; position: absolute; top: 5px; left: 50%; margin-left: -5px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F4D98A, #BC8C2C 58%, #6E5016); box-shadow: 1px 2px 2px rgba(0, 0, 0, .35); }
.p-home .tag-claim { font-size: 18.5px; line-height: 1.15; letter-spacing: -.01em; }
.p-home .jars > li:nth-child(even) .tag { transform: rotate(1.2deg); }
.p-home .tag-open { font-family: "Plex Mono", monospace; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--peach); }
.p-home .tag-open::after { content: " \2192"; }
.p-home .jar-a:hover .tag-claim { color: var(--peach); }
.p-home .tag-small { width: 180px; transform: rotate(1.6deg); }
.p-home .jar-note .tag { grid-row: 2; }
.p-home .tag-small .tag-claim { font-family: "Caveat", cursive; font-size: 22px; font-weight: 700; }
.p-home .tag-small .tag-open { font-family: "Fraunces", serif; font-size: 14px; font-style: italic; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--mute); }
.p-home .tag-small .tag-open::after { content: none; }

/* the Seconds bin: a cardboard sign in marker, and each Second on its own tacked notice */
.p-home .bay-seconds .bay-in { display: grid; gap: 24px; padding-bottom: 30px; }
.p-home .seconds-sign { justify-self: start; position: relative; padding: 14px 26px 12px; background: #C59F6E url("/img/stand/cardboard.jpg") center / cover; color: #24170A;
  font-family: "Caveat", cursive; font-size: 32px; font-weight: 700; line-height: 1.05; transform: rotate(-1.6deg); box-shadow: inset 0 0 0 1px rgba(90, 60, 25, .25), var(--shadow); }
.p-home .seconds-list { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.p-home .second { padding: 32px 30px 24px; } .p-home .second-2 { transform: rotate(.6deg); }
.p-home .second-title { font-size: 23px; font-weight: 520; line-height: 1.2; letter-spacing: -.01em; }
.p-home .second-when { margin: 4px 0 12px; font-family: "Plex Mono", monospace; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.p-home .second > p:not(.second-when) { font-size: 17px; line-height: 1.55; } .p-home .second > p + p:not(.second-when) { margin-top: .75em; }

/* bay 3: the notice and the prints on twine */
.p-home .bay-farmer .bay-in { display: grid; grid-template-columns: 7fr 5fr; gap: 40px; align-items: start; padding-bottom: 30px; }
.p-home .notice-farmer { transform: rotate(.4deg); }
.p-home .notice-farmer p { font-size: 18.5px; line-height: 1.55; } .p-home .notice-farmer p + p { margin-top: .8em; }
.p-home .lines { display: grid; gap: 18px; padding-top: 4px; }
.p-home .line { position: relative; padding-top: 10px; }
.p-home .twine { position: absolute; left: -12px; right: -12px; top: 0; width: calc(100% + 24px); height: 40px; overflow: visible; }
.p-home .twine path { fill: none; stroke: #8C6A3E; stroke-width: 2.4; vector-effect: non-scaling-stroke; filter: drop-shadow(2px 4px 2px rgba(24, 14, 4, .35)); }
.p-home .prints { position: relative; display: flex; align-items: flex-start; justify-content: space-around; gap: 16px; }
.p-home .print { position: relative; width: 46%; max-width: 210px; background: #FDFCF8; padding: 9px 9px 0; transform-origin: 50% 0; transform: rotate(var(--r, -2deg)); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .15), 5px 10px 9px rgba(24, 14, 4, .4); }
.p-home .print-1 { --r: -2.5deg; margin-top: 8px; } .p-home .print-2 { --r: 2deg; margin-top: 22px; } .p-home .print-3 { --r: 1.5deg; margin-top: 10px; } .p-home .print-4 { --r: -1.8deg; margin-top: 24px; }
.p-home .print:hover, .p-home .print:active { transform: rotate(calc(var(--r) * -1.6)); }
.p-home .print img { display: block; width: 100%; height: auto; }
.p-home .print-cap { display: block; padding: 6px 2px 9px; font-family: "Caveat", cursive; font-size: 16px; font-weight: 600; line-height: 1.1; color: var(--pen); }
.p-home .pin { position: absolute; z-index: 2; left: 50%; top: -18px; width: 12px; height: 34px; margin-left: -6px; border-radius: 2px; background: linear-gradient(90deg, #C9A56E, #E8CD98 45%, #B48A50); box-shadow: inset 0 0 0 1px rgba(90, 55, 20, .3), 2px 3px 3px rgba(24, 14, 4, .35); }
.p-home .pin::after { content: ""; position: absolute; left: 2px; right: 2px; top: 12px; height: 4px; background: #9A9EA2; border-radius: 1px; }

/* ---------- the end of the road: back in the orchard at dusk, at the sign post ---------- */
.p-home .road { position: relative; isolation: isolate; min-height: 100svh; display: flex; }
.p-home .road-photo { position: absolute; inset: 0; z-index: -1; -webkit-mask-image: linear-gradient(transparent, #000 160px); mask-image: linear-gradient(transparent, #000 160px); }
.p-home .road-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(250, 240, 225, .2), rgba(250, 240, 225, 0) 40%, rgba(20, 14, 8, .55)); }
.p-home .road-in { display: flex; flex-direction: column; width: 100%; padding-top: clamp(80px, 14vh, 160px); }
.p-home .signpost { --post-x: 250px; position: relative; max-width: 860px; padding-bottom: 30px; }
.p-home .sp-post { position: absolute; left: var(--post-x); top: 40px; bottom: -40px; width: 36px; }
.p-home .sp-board { position: relative; z-index: 2; display: inline-block; margin-left: calc(var(--post-x) - 150px); padding: 20px 46px 15px; font-size: clamp(44px, 6vw, 76px); transform: rotate(-1.6deg); }
.p-home .sp-plain { position: relative; z-index: 2; display: inline-block; margin: 18px 0 0 calc(var(--post-x) - 120px); max-width: 30em; background: #FBF7EE var(--paper-grain); padding: 8px 14px 7px; font-size: 15px; font-style: italic; transform: rotate(.8deg); box-shadow: 4px 7px 7px rgba(24, 14, 4, .35); }
.p-home .arrows { position: relative; z-index: 2; display: grid; gap: 16px; margin-top: 30px; }
.p-home .arrow { width: min(560px, 100%); filter: drop-shadow(7px 11px 8px rgba(24, 14, 4, .45)); }
.p-home .arrow-l { transform: rotate(-.8deg); } .p-home .arrow-r { margin-left: calc(var(--post-x) - 120px); transform: rotate(.7deg); }
.p-home .arrow a { display: block; position: relative; text-decoration: none; color: #2B1A0C; padding: 14px 40px 13px 58px; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1);
  clip-path: polygon(40px 0, 100% 0, 100% 100%, 40px 100%, 0 50%); }
.p-home .arrow-r a { padding: 14px 58px 13px 30px; clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 50%, calc(100% - 40px) 100%, 0 100%); }
.p-home .arrow a { background: #ECE6D8 var(--painted) center / cover; }
.p-home .arrow a::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255, 255, 255, .1), rgba(60, 40, 20, .1)); pointer-events: none; }
.p-home .arrow-head, .p-home .arrow-line { position: relative; }
.p-home .arrow-l a:hover, .p-home .arrow-l a:active { transform: translateX(-8px); } .p-home .arrow-r a:hover, .p-home .arrow-r a:active { transform: translateX(8px); }
.p-home .arrow-head { display: block; font-size: 25px; font-style: italic; font-weight: 500; letter-spacing: -.01em; line-height: 1.15; }
.p-home .arrow-line { display: block; margin-top: 3px; font-size: 15.5px; line-height: 1.35; color: #3A2714; }
.p-home .arrow a:hover .arrow-head { color: var(--paint); }
.p-home .notice-addr { z-index: 2; display: inline-block; margin: 34px 0 0 calc(var(--post-x) - 90px); padding: 30px 30px 20px; transform: rotate(-1deg); }
.p-home .notice-addr .promise { font-size: 20px; font-style: italic; }
.p-home .notice-addr .addr { margin-top: 6px; font-family: "Plex Mono", monospace; font-size: 13px; }
.p-home .road .caption { margin-top: auto; padding-top: 60px; padding-bottom: 4px; }
.p-home .road .foot { border-top: 1px solid rgba(255, 252, 245, .35); color: rgba(255, 252, 245, .85); padding-bottom: 28px; }

@media (max-width: 820px) {
  .p-home .backdrop img { object-position: 50% 30%; }
  .p-home .topnav { padding-top: 16px; font-size: 11.5px; letter-spacing: .1em; }
  .p-home .topnav-who { display: none; }
  .p-home .topnav ul { gap: 6px 18px; }
  .p-home .hero { min-height: 88svh; }
  .p-home .hero-sign { padding-top: 26px; }
  .p-home .hero-name { font-size: clamp(56px, 17vw, 96px); }
  .p-home .hero-line { font-size: 20px; margin-top: 14px; }

  .p-home .stand { padding: 0 14px; }
  .p-home .post { width: 13px; } .p-home .post-l { left: 0; } .p-home .post-r { right: 0; }
  .p-home .beam { margin: 0 -14px; height: 34px; }
  .p-home .roof { margin: 0 -14px; height: 58px; } .p-home .tin { height: 20px; left: 0; right: 0; } .p-home .ceiling { top: 17px; }
  .p-home .brace { width: 66px; height: 12px; top: calc(100% + 40px); } .p-home .brace-l { left: 12px; } .p-home .brace-r { right: 12px; }
    .p-home .beam-board { top: 22px; padding: 10px 20px 8px; font-size: 21px; }
  .p-home .bays { padding-top: 64px; }
  .p-home .bay { padding: 44px 12px 0; }
  .p-home .bay + .bay { margin-top: 56px; }
  .p-home .plank { margin: 0 -12px; height: 24px; }
  .p-home .bay-sign { font-size: 21px; padding: 10px 16px 8px 20px; }
  .p-home .bay-intro .bay-in, .p-home .bay-farmer .bay-in { display: block; padding-bottom: 22px; }
  .notice { padding: 30px 20px 22px; }
  .p-home .notice-who p { font-size: 20px; }
  .p-home .chalk { margin-top: 26px; transform: rotate(.8deg); }
  .p-home .shelf-row { margin: 0 -12px; }
  .p-home .jars { --jar-h: 248px; gap: 10px; padding: 8px 14px 28px; }
  .p-home .crate { width: 172px; }
  .p-home .jars::before { top: calc(8px + var(--jar-h)); height: 24px; }
  .p-home .jar--peach-quart { --h: 206px; } .p-home .jar--red-jelly { --h: 156px; } .p-home .jar--green-pint { --h: 202px; }
  .p-home .jar--cloth-cap { --h: 190px; } .p-home .jar--empty-1 { --h: 170px; } .p-home .jar--empty-2 { --h: 148px; } .p-home .jar--purple { --h: 156px; }
  .p-home .jar-name { font-size: calc(15.5px * var(--lf, 1)); } .p-home .jar-packed { font-size: calc(13.5px * var(--lf, 1)); } .p-home .jar-no { font-size: calc(9px * var(--lf, 1)); }
  .p-home .tag { width: 200px; } .p-home .tag-claim { font-size: 18px; }
  .p-home .notice-farmer p { font-size: 17.5px; }
  .p-home .seconds-list { grid-template-columns: 1fr; gap: 22px; }
  .p-home .seconds-sign { font-size: 26px; }
  .p-home .second { padding: 30px 20px 20px; }
  .p-home .lines { margin-top: 34px; }
  .p-home .print-cap { font-size: 15px; }

  .p-home .road-in { padding-top: 64px; }
  .p-home .signpost { --post-x: 22px; }
  .p-home .sp-post { width: 22px; top: 30px; }
  .p-home .sp-board { margin-left: 0; font-size: 44px; padding: 16px 30px 12px; }
  .p-home .sp-plain { margin-left: 30px; }
  .p-home .arrow, .p-home .arrow-r { width: calc(100% - 6px); margin-left: 6px; }
  .p-home .arrow-l a { padding: 12px 18px 11px 46px; clip-path: polygon(30px 0, 100% 0, 100% 100%, 30px 100%, 0 50%); }
  .p-home .arrow-r a { padding: 12px 46px 11px 18px; clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 50%, calc(100% - 30px) 100%, 0 100%); }
  .p-home .arrow-head { font-size: 21px; } .p-home .arrow-line { font-size: 14.5px; }
  .p-home .notice-addr { margin-left: 30px; }
}

/* ---------- 404: the washed-out road ---------- */
.p-404 .masthead { position: relative; border-bottom-color: rgba(255, 252, 245, .6); color: #FFFCF5; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.p-404 .masthead .mast-line { color: rgba(255, 252, 245, .85); }
.p-404 .backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(20, 14, 8, .45), rgba(20, 14, 8, .05) 30%, rgba(20, 14, 8, .4)); }
.p-404 .lost { min-height: calc(100svh - 70px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 40px 0 24px; }
.p-404 .notice-lost { max-width: 34em; padding: 40px 40px 30px; transform: rotate(-1deg); }
.p-404 .notice-lost h1 { font-size: clamp(36px, 5.5vw, 64px); line-height: .98; letter-spacing: -.03em; font-weight: 360; font-variation-settings: "SOFT" 100, "WONK" 1; }
.p-404 .notice-lost p { margin-top: 14px; font-size: 22px; font-style: italic; }
.p-404 .notice-lost .back { margin-top: 22px; font-family: "Plex Mono", monospace; font-style: normal; font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.p-404 .lost .caption { margin-top: auto; padding-top: 40px; }

/* ---------- link preview canvases (rendered to PNG, never deployed) ---------- */
.p-og { width: 1200px; height: 630px; overflow: hidden !important; }
.og { width: 1200px; height: 630px; position: relative; overflow: hidden; background: var(--paper); }
.og-inner { position: absolute; inset: 56px 64px; display: flex; flex-direction: column; }
.og-shelf { font: 500 20px "Plex Mono", monospace; letter-spacing: .13em; text-transform: uppercase; color: var(--mute); border-top: 2px solid var(--ink); padding-top: 18px; }
.og-title { font-size: 112px; line-height: .96; letter-spacing: -.035em; font-weight: 360; font-variation-settings: "SOFT" 100, "WONK" 1; margin-top: 36px; text-wrap: balance; }
.og-brand { margin-top: auto; display: flex; align-items: baseline; gap: 22px; }
.og-name { font-size: 40px; font-weight: 420; letter-spacing: -.02em; font-variation-settings: "SOFT" 100, "WONK" 1; }
.og-line { font-size: 26px; font-style: italic; color: var(--mute); }
.og-domain { position: absolute; right: 0; bottom: 6px; font: 500 20px "Plex Mono", monospace; color: var(--mute); }

/* ---------- plain paper's old home rules, switched off for the stand ---------- */
.t-plain.p-home main.bays { display: block; }
.p-home .fresh-list { margin-top: 8px; border-top: 0; }
.p-home .fresh-list li { border-bottom: 0; }
.p-home .season { display: inline; font-family: "Caveat", cursive; font-size: inherit; letter-spacing: 0; text-transform: none; }

/* where each jar's label sits on its photo (percent of the image; from CREDITS.md "Label areas"), and how big its type runs */
.p-home .jar--peach-quart { --lx: 12%; --rx: 12%; --ly: 40%; --by: 26%; --lf: 1; }
.p-home .jar--red-jelly { --lx: 11%; --rx: 13%; --ly: 41%; --by: 11%; --lf: .84; }
.p-home .jar--green-pint { --lx: 7%; --rx: 7%; --ly: 35%; --by: 22%; --lf: .8; }
.p-home .jar--cloth-cap { --lx: 3%; --rx: 3%; --ly: 39%; --by: 4%; --lf: .84; } /* opaque and wide: covers the printed label on the stock photo */
.p-home .jar--purple { --lx: 10%; --rx: 10%; --ly: 40%; --by: 18%; --lf: .84; }
/* the jar page's .jar layout must not reach the jars on this shelf */
.p-home .jars > li { grid-template-columns: none; }
.p-home .jars > li.jar:not(.jar-waiting) { display: block; }

/* ---------- real stand objects on the planks ---------- */
.p-home .obj { position: absolute; z-index: 1; line-height: 0; pointer-events: none; }
.p-home .obj img { display: block; width: 100%; height: auto; filter: drop-shadow(8px 8px 7px rgba(14, 8, 2, .45)); }
.p-home .bay-intro .bay-in { padding-bottom: 170px; }
.p-home .bay-intro .chalk { margin-bottom: -170px; } /* the chalkboard leans on the plank; the basket and scale sit in front of the notice */
.p-home .obj-basket-peaches { left: 70px; bottom: 26px; width: 150px; }
.p-home .obj-peaches-loose { left: 232px; bottom: 26px; width: 104px; transform: rotate(-3deg); }
.p-home .obj-scale { left: 400px; bottom: 26px; width: 118px; }
.p-home .bay-seconds .bay-in { padding-bottom: 170px; }
.p-home .obj-crate { right: 80px; bottom: 26px; width: 176px; }
.p-home .signpost .obj-honor-box { position: relative; display: block; z-index: 3; width: 120px; margin: 26px 0 0 calc(var(--post-x) - 40px); transform: rotate(-1deg); }
@media (max-width: 820px) {
  .p-home .bay-intro .bay-in { padding-bottom: 130px; }
  .p-home .bay-intro .chalk { margin-bottom: 0; }
  .p-home .obj-basket-peaches { left: 18px; bottom: 20px; width: 112px; }
  .p-home .obj-peaches-loose { left: 136px; bottom: 20px; width: 78px; }
  .p-home .obj-scale { left: auto; right: 18px; bottom: 20px; width: 88px; }
  .p-home .bay-seconds .bay-in { padding-bottom: 130px; }
  .p-home .obj-crate { right: 22px; bottom: 20px; width: 132px; }
  .p-home .signpost .obj-honor-box { width: 96px; margin-left: 12px; }
}