/* Longproof: the bake sheet. Chalk paper ruled in ink, crust marker, one cobalt band for the shelf and the van. */
@font-face { font-family: "Zilla Slab"; src: url(/assets/fonts/specimen/zilla-slab-700.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Alan Sans"; src: url(/assets/fonts/specimen/alan-sans-var.woff2) format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Just Another Hand"; src: url(/assets/fonts/specimen/just-another-hand-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

body.spec-longproof { margin: 0; background: #EEECE6; }

.lp-root {
  --lp-paper: #EEECE6; --lp-ink: #17140F; --lp-crust: #7A2E10; --lp-flour: #FAF9F5; --lp-cobalt: #1E3DB8; --lp-hover: #E2DFD7;
  --lp-ground: var(--lp-paper);
  --lp-rule: rgba(23, 20, 15, 0.22); --lp-rule-soft: rgba(23, 20, 15, 0.1);
  --lp-disp: "Zilla Slab", "Rockwell", "Roboto Slab", Georgia, serif;
  --lp-sans: "Alan Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --lp-hand: "Just Another Hand", "Marker Felt", "Comic Sans MS", cursive;
  --lp-m: clamp(16px, 4vw, 64px); --lp-out: max(var(--lp-m), (100vw - 1320px) / 2); --lp-g: 24px; --lp-line: 32px; --lp-nav: 64px;
  --lp-lift: 0 1px 0 rgba(23, 20, 15, 0.18), 0 12px 28px -16px rgba(23, 20, 15, 0.4);
  --lp-marker: clamp(1.625rem, 1.3rem + 1vw, 2.25rem);
  --lp-cellf: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem);
  --lp-ruled: repeating-linear-gradient(to bottom, transparent 0 calc(var(--lp-line) - 1px), var(--lp-rule-soft) calc(var(--lp-line) - 1px) var(--lp-line));
  position: relative;
  color: var(--lp-ink);
  background-color: var(--lp-paper);
  font: 400 clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem) / 1.55 var(--lp-sans);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}
.lp-root *, .lp-root *::before, .lp-root *::after { box-sizing: border-box; }
.lp-root :focus-visible { outline: 3px solid var(--lp-crust); outline-offset: 2px; }
.lp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.lp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lp-w { width: min(1320px, 100% - 2 * var(--lp-m)); margin-inline: auto; }

/* ruled cells: every button on the sheet */
.lp-do, .lp-again, .lp-cellbtn, .lp-back, .lp-send, .lp-sb, .lp-menu { background: transparent; border: 1.5px solid var(--lp-ink); border-radius: 0; color: var(--lp-ink); cursor: pointer; }

/* the nav */
.lp-nav { position: sticky; top: var(--bar-h, 40px); z-index: 60; background: var(--lp-ground); border-bottom: 2px solid var(--lp-ink); }
.lp-nav-in { width: min(1320px, 100% - 2 * var(--lp-m)); margin-inline: auto; height: var(--lp-nav); display: flex; align-items: center; gap: clamp(16px, 2.2vw, 32px); }
.lp-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--lp-ink); text-decoration: none; font: 700 22px/1 var(--lp-disp); letter-spacing: 0.005em; margin-right: auto; white-space: nowrap; }
.lp-mark { width: 46px; height: 38px; flex: none; }
.lp-links { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 30px); list-style: none; margin: 0; padding: 0; }
.lp-links a { display: inline-block; color: var(--lp-ink); text-decoration: none; font: 620 15px/1 var(--lp-sans); letter-spacing: 0.01em; padding: 10px 0 8px; border-bottom: 2px solid transparent; transition: border-color 0.12s; }
.lp-links a:hover { border-bottom-color: var(--lp-crust); }
.lp-links-next { display: none; }
.lp-nav-next { margin: 0; font: 400 27px/1 var(--lp-hand); color: var(--lp-crust); transform: rotate(-2deg); white-space: nowrap; padding-left: clamp(8px, 1.4vw, 20px); border-left: 1px solid var(--lp-rule); }
.lp-nav-shelf, .lp-menu { display: none; }
.lp-menu { align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; font: 700 14px/1 var(--lp-sans); }
.lp-menu-bars { width: 14px; height: 10px; border-top: 2px solid; border-bottom: 2px solid; position: relative; }
.lp-menu-bars::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; border-top: 2px solid; }

/* the first screen: the sheet's header, then the loaf on the stage, the heading set on the sheet and a strip of tools */
.lp-top { background-image: var(--lp-ruled); }
.lp-top-grid { display: flex; flex-direction: column; min-height: calc(100svh - var(--bar-h, 40px) - var(--lp-nav)); }
.lp-head { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: stretch; margin: 0; border-bottom: 1px solid var(--lp-rule); font: 700 13px/1.2 var(--lp-sans); letter-spacing: 0.02em; position: relative; z-index: 4; }
.lp-head > span { padding: 13px 18px 12px; border-left: 1px solid var(--lp-rule); white-space: nowrap; }
.lp-head > span:first-child { padding-left: 0; border-left: 0; }
.lp-head .lp-head-d { margin-left: auto; }
.lp-head .lp-short { display: none; }
.lp-head-b, .lp-head-c, .lp-head-d { font-weight: 520; }
.lp-gut { margin: 0; }
.lp-time { display: block; margin: 0; font: 400 clamp(2rem, 1.4rem + 2vw, 3.5rem) / 0.9 var(--lp-hand); color: var(--lp-crust); transform: rotate(-2deg); transform-origin: 0 50%; }
.lp-gut-top { position: absolute; right: 0; top: 16px; z-index: 3; margin: 0; pointer-events: none; }
.lp-gut-top .lp-time { white-space: nowrap; font-size: clamp(2rem, 1.5rem + 1.4vw, 3rem); }

.lp-stage { position: relative; flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; min-height: 440px; }
.lp-intro { position: absolute; left: 0; top: clamp(20px, 4.5vh, 56px); z-index: 3; width: min(52%, 760px); pointer-events: none; }
.lp-h1 { margin: 0; font: 700 clamp(3rem, min(7.4vw, 11.5vh), 7.75rem) / 0.88 var(--lp-disp); letter-spacing: -0.025em; color: var(--lp-ink); }
.lp-h1-b { display: block; }
.lp-sub { margin: clamp(14px, 2.6vh, 28px) 0 0; max-width: 33ch; font-weight: 440; font-size: clamp(1.0625rem, 0.96rem + 0.34vw, 1.25rem); line-height: 1.45; text-wrap: pretty; }

.lp-loaf { grid-row: 1; position: relative; min-height: 0; margin: 0 calc(-1 * var(--lp-out)); touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.lp-root .lp-loaf:focus-visible { outline: none; }
.lp-root .lp-loaf:focus-visible::after { content: ""; position: absolute; inset: 12px var(--lp-out); pointer-events: none; border: 3px solid var(--lp-crust); mask: conic-gradient(at 30px 30px, #0000 75%, #000 0) 0 0 / calc(100% - 30px) calc(100% - 30px); }
.lp-poster { position: absolute; top: 0; bottom: 0; left: 34%; right: var(--lp-out); display: block; transition: opacity 0.45s ease, visibility 0s linear 0s; }
.lp-poster img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 55%; }
.lp-poster-cut { display: none; }
.lp-poster-cut img { -webkit-mask-image: linear-gradient(to right, #000 92%, transparent 99.5%); mask-image: linear-gradient(to right, #000 92%, transparent 99.5%); }
.lp-cutshow .lp-poster-cut { display: block; animation: lp-fade 0.2s ease both; }
.lp-cutshow .lp-poster-whole { opacity: 0; }
@keyframes lp-fade { from { opacity: 0; } }
.lp-gl { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.45s ease; }
.lp-live .lp-gl { opacity: 1; }
.lp-live .lp-poster { opacity: 0; visibility: hidden; transition: opacity 0.45s ease, visibility 0s linear 0.45s; }
.lp-loaf.lp-over[data-phase="dough"], .lp-loaf.lp-over[data-phase="scored"] { cursor: url(/assets/work/longproof/cur-blade.svg) 2 2, crosshair; }
.lp-loaf.lp-over[data-phase="baked"] { cursor: url(/assets/work/longproof/cur-knife.svg) 3 29, crosshair; }

/* the blade on the bench beside the loaf; the bread knife once it's baked */
.lp-lame, .lp-bknife { position: absolute; right: calc(var(--lp-out) + 1%); bottom: 7%; z-index: 1; height: auto; overflow: visible; pointer-events: none; transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.3, 0.7, 0.2, 1); filter: drop-shadow(0 6px 5px rgba(23, 20, 15, 0.22)); }
.lp-lame { width: clamp(210px, 19vw, 290px); transform: rotate(-14deg); }
.lp-bknife { width: clamp(220px, 20vw, 320px); transform: translateX(30px) rotate(-10deg); opacity: 0; }
.lp-loaf[data-phase="baking"] .lp-lame, .lp-loaf[data-phase="baked"] .lp-lame, .lp-loaf[data-phase="cutting"] .lp-lame, .lp-loaf[data-phase="cut"] .lp-lame { opacity: 0; transform: translateX(30px) rotate(-14deg); }
.lp-loaf[data-phase="baked"] .lp-bknife, .lp-loaf[data-phase="cutting"] .lp-bknife, .lp-loaf[data-phase="cut"] .lp-bknife { opacity: 1; transform: rotate(-10deg); }
.lp-root:not(.lp-js) .lp-lame, .lp-root:not(.lp-js) .lp-bknife { display: none; }

/* the marker note beside the loaf */
.lp-note { position: absolute; left: 62%; top: 5%; z-index: 2; margin: 0; max-width: 18ch; text-wrap: balance; font: 400 var(--lp-marker) / 0.95 var(--lp-hand); color: var(--lp-ink); transform: rotate(-2.5deg); pointer-events: none; }
.lp-arrow { position: absolute; right: 100%; top: 40%; width: 92px; height: 62px; overflow: visible; transform: scale(-1, 1) rotate(-6deg); }
.lp-arrow path, .lp-mn-arr path, .lp-t-arr path { fill: none; stroke: var(--lp-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#lp-note { display: inline-block; }
.lp-noted #lp-note { animation: lp-write 0.5s ease both; }
@keyframes lp-write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.lp-loaf.lp-nogl .lp-note, .lp-root:not(.lp-js) .lp-note { left: 66%; top: 4%; }
.lp-nogl .lp-arrow, .lp-root:not(.lp-js) .lp-arrow { display: none; }

/* the tool strip along the bottom edge: a row of the sheet */
.lp-steps { grid-row: 2; position: relative; z-index: 4; display: flex; align-items: stretch; background: var(--lp-ground); border-top: 2px solid var(--lp-ink); border-bottom: 1px solid var(--lp-rule); }
.lp-step { display: flex; align-items: center; gap: 4px 14px; min-width: 0; padding: 0 22px; border-left: 1px solid var(--lp-rule); }
.lp-step:first-child { padding-left: 0; border-left: 0; }
.lp-do { display: flex; align-items: center; gap: 12px; min-height: 62px; margin: 0; padding: 0 10px 0 2px; border: 0; font: 720 1.0625rem/1 var(--lp-sans); letter-spacing: 0.01em; text-align: left; transition: background-color 0.12s; -webkit-tap-highlight-color: transparent; }
.lp-do:hover, .lp-again:hover, .lp-cellbtn:hover, .lp-ib:hover, .lp-back:hover, .lp-send:hover, .lp-sb:hover { background: var(--lp-hover); }
.lp-do:active, .lp-again:active, .lp-cellbtn:active, .lp-ib:active, .lp-back:active, .lp-send:active, .lp-sb:active { transform: translateY(1px); }
.lp-do:focus-visible { position: relative; z-index: 1; }
.lp-box { position: relative; flex: none; width: 28px; height: 28px; border: 1.5px solid var(--lp-ink); background: var(--lp-flour); }
.lp-tick { position: absolute; left: -3px; top: -12px; width: 42px; height: 36px; overflow: visible; }
.lp-tick path, .lp-glyph path, .lp-chk path { fill: none; stroke: var(--lp-crust); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.lp-tick path { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.lp-done .lp-tick path { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset 0.3s cubic-bezier(0.3, 0.7, 0.3, 1), opacity 0s; }
.lp-done .lp-tick path + path { transition: stroke-dashoffset 0.38s cubic-bezier(0.3, 0.7, 0.3, 1) 0.34s, opacity 0s 0.34s; }
.lp-glyph { display: inline-block; vertical-align: -3px; width: 44px; height: 17px; margin-left: 8px; overflow: visible; }
.lp-glyph path { stroke-width: 3.8; }
.lp-hint, .lp-when { display: block; white-space: nowrap; font: 400 clamp(1.25rem, 1.1rem + 0.35vw, 1.5rem) / 0.95 var(--lp-hand); color: var(--lp-crust); }
.lp-hint { color: rgba(122, 46, 16, 0.8); }
.lp-hint-s { display: none; }
.lp-when:not(.lp-on) { display: none; }
.lp-step.lp-done .lp-hint { display: none; }
.lp-baking #lp-h-bake { color: var(--lp-crust); }
.lp-steps-end { display: flex; align-items: center; gap: 8px 18px; margin: 0 0 0 auto; padding-left: 22px; border-left: 1px solid var(--lp-rule); }
.lp-next { font: 400 clamp(1.5rem, 1.3rem + 0.5vw, 1.875rem) / 1 var(--lp-hand); color: var(--lp-crust); transform: rotate(-1deg); white-space: nowrap; }
.lp-again { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; font: 700 15px/1 var(--lp-sans); white-space: nowrap; }
.lp-next-s { display: none; }
.lp-again[hidden] { display: none; }
.lp-again kbd { font: 700 12px/1 var(--lp-sans); padding: 3px 5px; border: 1px solid var(--lp-rule); }
.lp-root:not(.lp-js) .lp-steps { display: none; }
.lp-root:not(.lp-js) .lp-stage { grid-template-rows: minmax(0, 1fr); }

/* 1024 to 1279: the tool strip drops the long hints */
@media (min-width: 1024px) and (max-width: 1279px) {
  .lp-step { padding: 0 16px; }
  .lp-hint-l { display: none; }
  .lp-hint-s { display: inline; }
  .lp-next { font-size: 1.5rem; }
  .lp-next-l { display: none; }
  .lp-next-s { display: inline; }
}
/* short desktop windows (1280 x 720, 1366 x 768): the heading keeps its two lines, the loaf keeps its room */
@media (min-width: 1024px) and (max-height: 820px) {
  .lp-intro { top: 18px; }
  .lp-sub { max-width: 31ch; font-size: 1.0625rem; line-height: 1.4; }
  .lp-do { min-height: 54px; }
}

/* below 1024: heading, then the loaf, then the strip */
@media (max-width: 1023px) {
  .lp-top-grid { display: block; min-height: 0; }
  .lp-stage { display: block; min-height: 0; }
  .lp-intro { position: static; width: auto; padding-top: 30px; pointer-events: auto; }
  .lp-h1 { font-size: clamp(2.75rem, 1.4rem + 6vw, 5.25rem); }
  .lp-sub { max-width: 40ch; }
  .lp-gut-top { top: 60px; }
  .lp-loaf { margin: 0 calc(-1 * var(--lp-m)); height: clamp(320px, 44svh, 500px); }
  .lp-poster { left: var(--lp-m); right: var(--lp-m); }
  .lp-root .lp-loaf:focus-visible::after { inset: 8px var(--lp-m); }
  .lp-lame, .lp-bknife { right: calc(var(--lp-m) + 2%); bottom: 4%; }
  .lp-note { left: auto; right: var(--lp-m); top: 4%; text-align: right; }
  .lp-arrow { right: 30%; top: 100%; width: 60px; height: 42px; transform: rotate(40deg); }
  .lp-loaf.lp-nogl .lp-note, .lp-root:not(.lp-js) .lp-note { left: auto; right: var(--lp-m); }
  .lp-step { padding: 0 14px; flex-wrap: wrap; }
}
@media (min-width: 701px) and (max-width: 1023px) {
  .lp-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 32px; align-items: end; }
  .lp-sub { margin: 0 0 6px; }
  .lp-hint-l { display: none; }
  .lp-hint-s { display: inline; }
  .lp-steps-end { display: none; }
}
@media (max-width: 860px) {
  .lp-intro { display: block; }
  .lp-sub { margin-top: 16px; }
}

/* phones: the three steps as three cells, the next bake on its own line */
@media (max-width: 700px) {
  .lp-head { font-size: 12px; }
  .lp-head > span { padding: 10px 12px 9px; }
  .lp-head .lp-head-c, .lp-head .lp-head-d { display: none; }
  .lp-head .lp-long { display: none; }
  .lp-head .lp-short { display: inline; }
  .lp-gut-top { top: 44px; }
  .lp-gut-top .lp-time { font-size: 1.75rem; }
  .lp-intro { padding-top: 22px; }
  .lp-h1 { font-size: clamp(2.625rem, 1.2rem + 7.4vw, 3.5rem); }
  .lp-sub { margin-top: 12px; font-size: 1.0625rem; line-height: 1.42; }
  .lp-loaf { height: clamp(230px, 34svh, 320px); }
  .lp-lame, .lp-bknife { display: none; }
  .lp-note { top: 2%; max-width: 12ch; font-size: 1.6rem; }
  .lp-arrow { display: none; }
  .lp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-step { flex-direction: column; align-items: flex-start; gap: 0; padding: 0 0 8px 10px; }
  .lp-step:first-child { padding-left: 0; }
  .lp-do { width: 100%; min-height: 54px; gap: 8px; padding: 0 4px 0 0; font-size: 1rem; }
  .lp-box { width: 24px; height: 24px; }
  .lp-tick { left: -3px; top: -10px; width: 36px; height: 31px; }
  .lp-hint, .lp-when { font-size: 1.25rem; white-space: normal; }
  .lp-hint-l { display: none; }
  .lp-hint-s { display: inline; }
  .lp-steps-end { grid-column: 1 / -1; margin: 0; padding: 8px 0 10px; border-left: 0; border-top: 1px solid var(--lp-rule); justify-content: space-between; }
  .lp-next { white-space: normal; font-size: 1.5rem; }
}
@media (max-width: 700px) and (max-height: 700px) {
  .lp-loaf { height: 210px; }
  .lp-sub { font-size: 1rem; }
}
/* short phones (375x553, 320x568): the heading, the loaf and the three boxes all on the first screen;
   the how-to sentence and the strip's hints step aside for the note on the loaf ("drag your thumb along it") */
@media (max-width: 700px) and (max-height: 640px) {
  .lp-intro { padding-top: 14px; }
  .lp-h1 { font-size: clamp(2.375rem, 1.1rem + 6.6vw, 2.75rem); }
  .lp-sub { margin-top: 8px; }
  .lp-sub-b, .lp-hint { display: none; }
  .lp-loaf { height: 196px; }
  .lp-do { min-height: 48px; }
  .lp-step { padding-bottom: 4px; }
}
@media (max-width: 380px) {
  .lp-do { gap: 6px; font-size: 0.9375rem; }
  .lp-box { width: 22px; height: 22px; }
}
@media (max-width: 359px) {
  .lp-hint { display: none; }
  .lp-head > span { padding-inline: 8px; }
}

/* the cobalt band: the shelf and the van, one field of colour; the notes and the docket stay paper */
.lp-band { --lp-ground: var(--lp-cobalt); --lp-ink: #FAF9F5; --lp-crust: #FAF9F5; --lp-hover: rgba(250, 249, 245, 0.12);
  --lp-rule: rgba(250, 249, 245, 0.34); --lp-rule-soft: rgba(250, 249, 245, 0.16);
  --lp-ruled: repeating-linear-gradient(to bottom, transparent 0 calc(var(--lp-line) - 1px), rgba(250, 249, 245, 0.09) calc(var(--lp-line) - 1px) var(--lp-line));
  background-color: var(--lp-cobalt); color: var(--lp-ink); }
.lp-band + .lp-band { border-top-color: rgba(250, 249, 245, 0.5); }
.lp-band .lp-sn, .lp-band .lp-form, .lp-band .lp-ib[aria-expanded="true"] { --lp-ground: var(--lp-flour); --lp-ink: #17140F; --lp-crust: #7A2E10; --lp-hover: #E2DFD7;
  --lp-rule: rgba(23, 20, 15, 0.22); --lp-rule-soft: rgba(23, 20, 15, 0.1); color: var(--lp-ink); }
.lp-band .lp-hint, .lp-band .lp-here-c { color: inherit; }

/* rows of the sheet */
.lp-row { border-top: 2px solid var(--lp-ink); background-image: var(--lp-ruled); background-position: 0 var(--lp-ry, 0px); }
.lp-row > .lp-w, .lp-top-grid { position: relative; }
.lp-row > .lp-w { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--lp-g); padding-bottom: clamp(64px, 8vw, 128px); }
.lp-row > .lp-w::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc((100% - 11 * var(--lp-g)) / 6 + 1.5 * var(--lp-g)); border-left: 1px solid var(--lp-rule-soft); pointer-events: none; }
.lp-row .lp-gut { grid-column: 1 / 3; grid-row: 1; padding-top: 58px; min-width: 0; }
.lp-gut-in { position: sticky; top: calc(var(--bar-h, 40px) + var(--lp-nav) + 22px); }
.lp-row .lp-time { max-width: 5.4em; text-wrap: balance; }
.lp-time { position: relative; }
.lp-rt { color: var(--lp-crust); position: absolute; left: -0.78em; top: 0.1em; width: 0.62em; height: 0.53em; opacity: 0; transition: opacity 0.3s; }
.lp-past .lp-rt { opacity: 1; }
.lp-t-arr { width: 0.62em; height: 0.36em; margin-left: 0.1em; vertical-align: 0.04em; overflow: visible; }
.lp-t-arr path { stroke: var(--lp-crust); stroke-width: 2.6; }
.lp-body { grid-column: 3 / 13; grid-row: 1; display: grid; grid-template-columns: subgrid; align-content: start; padding-top: 64px; min-width: 0; }
.lp-body > * { grid-column: 1 / -1; min-width: 0; }
.lp-body > h2 { grid-column: 1 / 8; margin: 0 0 28px; max-width: 18ch; font: 700 clamp(2rem, 1.2rem + 2.8vw, 4rem) / 1 var(--lp-disp); letter-spacing: -0.01em; text-wrap: balance; }
.lp-lead { grid-column: 1 / 6; margin: 0; max-width: 62ch; font-weight: 430; font-size: clamp(1.1875rem, 1rem + 0.6vw, 1.4375rem); line-height: var(--lp-line); text-wrap: pretty; }

/* column heads on the sheet: bold, small, sentence case */
.lp-sheet-cap, .lp-fg-h, .lp-field-l, .lp-post-h, .lp-shelf-how, .lp-their-h, .lp-f > label, .lp-f legend { font: 700 0.8125rem/1.2 var(--lp-sans); letter-spacing: 0.02em; }

/* marker notes: crust, tilted a little, never over copy */
.lp-mn { margin: 0; font: 400 var(--lp-marker) / 0.95 var(--lp-hand); color: var(--lp-crust); transform: rotate(var(--lp-tilt, -1.5deg)); }
.lp-mn-arr { position: absolute; width: 58px; height: 36px; overflow: visible; }
.lp-mn-arr path { stroke: var(--lp-crust); }

/* sheet tables: ruled rows, sentence-case heads, tabular figures */
.lp-sheet { width: 100%; border-collapse: collapse; background: var(--lp-ground); font: 480 var(--lp-cellf) / 1.35 var(--lp-sans); font-variant-numeric: tabular-nums; }
.lp-sheet th, .lp-sheet td { padding: 11px 14px 10px; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--lp-rule); }
.lp-sheet th:first-child { padding-left: 0; }
.lp-sheet thead th { padding-top: 4px; padding-bottom: 9px; font-weight: 700; font-size: 0.8125rem; line-height: 1.2; letter-spacing: 0.02em; border-bottom: 1.5px solid var(--lp-ink); }
.lp-sheet tbody th, .lp-sheet tfoot th { font-weight: 620; }
.lp-sheet td { border-left: 1px solid var(--lp-rule-soft); }
.lp-sheet-cap { caption-side: top; text-align: left; padding: 0 0 12px; }
.lp-num { white-space: nowrap; }
.lp-small { display: block; font-size: 0.8125rem; font-weight: 520; opacity: 0.8; }

/* photographs: bleed-cropped off the sheet's right edge, no mat */
.lp-pin { position: relative; margin: 0; padding: 0; overflow: visible; }
.lp-pin picture { display: block; overflow: hidden; }
.lp-pin img { display: block; width: 100%; height: auto; }
.lp-bleed { margin-right: calc(-1 * var(--lp-out)); }
.lp-cap { position: absolute; right: var(--lp-out); bottom: -36px; margin: 0; font: 400 clamp(1.5rem, 1.3rem + 0.5vw, 1.875rem) / 1 var(--lp-hand); color: var(--lp-crust); transform: rotate(-2deg); white-space: nowrap; }

/* the ticks: marker drawn over a ruled box, stroke by stroke */
.lp-cb { position: relative; flex: none; display: inline-block; width: 26px; height: 26px; border: 1.5px solid var(--lp-ink); background: var(--lp-flour); }
.lp-chk { position: absolute; left: -3px; top: -11px; width: 38px; height: 33px; overflow: visible; }
.lp-chk path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.lp-on .lp-chk path { stroke-dashoffset: 0; }
.lp-inl { color: var(--lp-crust); width: 30px; height: 26px; margin-left: 6px; vertical-align: -4px; overflow: visible; }

/* 3:00 pm, the levain */
.lp-row-lev .lp-body > h2 { grid-column: 1 / 7; }
.lp-lev-sheet { grid-column: 1 / 7; position: relative; margin-top: 44px; }
.lp-sheet-lev thead th:nth-child(4), .lp-sheet-lev td:nth-child(4) { width: 34%; }
.lp-fixc { white-space: nowrap; }
.lp-fix { position: relative; display: inline-block; }
.lp-was { position: relative; text-decoration: none; }
.lp-now { display: inline-block; margin: 0 1px 0 4px; font: 400 1.9em/0.8 var(--lp-hand); color: var(--lp-crust); text-decoration: none; transform: translateY(-0.22em) rotate(-5deg); }
.lp-strike { position: absolute; left: -4px; top: 50%; width: calc(100% + 8px); height: 10px; margin-top: -4px; overflow: visible; }
.lp-strike path { fill: none; stroke: var(--lp-crust); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; }
.lp-sheet-lev th:nth-child(1) { width: 25%; }
.lp-sheet-lev th:nth-child(2) { width: 26%; }
.lp-sheet-lev th:nth-child(3) { width: 17%; }
.lp-mn-warm { position: absolute; left: calc(51% + 50px); top: calc(100% + 14px); --lp-tilt: -3deg; }
.lp-mn-warm .lp-mn-arr { left: -54px; top: -30px; transform: rotate(-12deg) scale(0.8); }
.lp-jar { grid-column: 7 / 11; grid-row: 1 / span 3; align-self: center; justify-self: center; position: relative; margin: 0; width: min(100%, 290px); }
.lp-jar-svg { display: block; width: 100%; height: auto; overflow: visible; }
.lp-starter { transform: translateY(0); }
.lp-jar-cap { margin: 0; }
.lp-jar-l { position: absolute; right: 90%; font: 400 1.625rem/1 var(--lp-hand); color: var(--lp-crust); white-space: nowrap; text-align: right; transform: rotate(-3deg); }
.lp-jar-l1 { top: 52%; }
.lp-jar-l2 { top: 27%; }

/* 5:30 pm, the mix */
.lp-mixbox { grid-column: 6 / 11; grid-row: 2 / span 2; position: relative; align-self: start; margin-top: 6px; }
.lp-sheet-mix td { text-align: right; width: 30%; }
.lp-sheet-mix thead th:not(:first-child) { text-align: right; }
.lp-sheet-mix tfoot th, .lp-sheet-mix tfoot td { font-weight: 720; border-top: 1.5px solid var(--lp-ink); }
.lp-sheet-mix .lp-temp th, .lp-sheet-mix .lp-temp td { font-weight: 520; border-top: 0; }
.lp-sheet-mix .lp-temp td { text-align: left; }
.lp-mn-88 { position: absolute; right: -6px; top: calc(100% + 10px); --lp-tilt: -2deg; }
.lp-mn-in { margin-left: 8px; font: 400 1.45em/0.8 var(--lp-hand); color: var(--lp-crust); white-space: nowrap; display: inline-block; transform: rotate(-4deg); }

/* 6:00 pm, folds and shaping */
.lp-folds { display: flex; flex-wrap: wrap; gap: 24px 48px; margin-top: 48px; }
.lp-fg-h { margin: 0 0 10px; }
.lp-fl { display: flex; margin: 0; padding: 0; list-style: none; background: var(--lp-ground); border-top: 1.5px solid var(--lp-ink); border-bottom: 1px solid var(--lp-rule); }
.lp-fl li { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 18px; border-left: 1px solid var(--lp-rule-soft); }
.lp-fl li:first-child { border-left: 0; padding-left: 2px; }
.lp-fl-t { font: 600 var(--lp-cellf)/1 var(--lp-sans); font-variant-numeric: tabular-nums; }
.lp-fl-w { font: 480 var(--lp-cellf)/1.2 var(--lp-sans); white-space: nowrap; }
.lp-fl-m { font: 400 1.75rem/0.9 var(--lp-hand); color: var(--lp-crust); white-space: nowrap; transform: rotate(-2deg); }
.lp-pin-shape { grid-column: 3 / 11; margin-top: 72px; }
.lp-label { position: relative; z-index: 2; margin: 0; white-space: nowrap; padding: 14px 22px 12px; background: var(--lp-flour); border-radius: 2px; box-shadow: var(--lp-lift); font: 700 clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem) / 1 var(--lp-disp); letter-spacing: -0.005em; color: var(--lp-crust); }
.lp-label-shape { grid-column: 1 / 5; justify-self: start; align-self: start; margin-top: -84px; margin-left: 12px; transform: rotate(-1.8deg); }

/* 10:30 pm, the long proof and the crumb */
.lp-row-proof .lp-body > h2 { grid-column: 1 / -1; max-width: 15ch; font-size: clamp(2.4rem, 1rem + 4.8vw, 6rem); line-height: 0.95; margin-bottom: 36px; position: relative; z-index: 1; }
.lp-mn-rye { grid-column: 7 / 11; grid-row: 2; align-self: end; justify-self: start; margin-bottom: 8px; --lp-tilt: -3deg; }
.lp-crumb { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; margin-top: 64px; }
.lp-set { grid-column: 7 / 11; grid-row: 1; align-self: start; background: var(--lp-ground); border-top: 1.5px solid var(--lp-ink); }
.lp-field { min-width: 0; padding: 12px 0 14px; border-bottom: 1px solid var(--lp-rule); }
.lp-field-l { display: block; }
.lp-range { position: relative; padding-top: 30px; }
.lp-val { position: absolute; top: 0; left: calc(var(--lp-p, 0.5) * (100% - 26px) + 13px); transform: translateX(-50%) rotate(-3deg); font: 400 1.875rem/1 var(--lp-hand); color: var(--lp-crust); white-space: nowrap; pointer-events: none; }
.lp-rng { display: block; width: 100%; height: 34px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.lp-rng::-webkit-slider-runnable-track { height: 2px; background: var(--lp-ink); }
.lp-rng::-moz-range-track { height: 2px; background: var(--lp-ink); }
.lp-rng::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -12px; background: var(--lp-flour); border: 1.5px solid var(--lp-ink); border-radius: 0; box-shadow: 0 2px 0 rgba(23, 20, 15, 0.25); }
.lp-rng::-moz-range-thumb { width: 26px; height: 26px; background: var(--lp-flour); border: 1.5px solid var(--lp-ink); border-radius: 0; }
.lp-rng:focus-visible { outline-offset: 4px; }
.lp-cellbtn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; margin: 18px 0 0; padding: 0 20px; font: 720 1rem/1 var(--lp-sans); white-space: nowrap; }
.lp-knife { width: 30px; height: 15px; }
.lp-knife path { fill: var(--lp-flour); stroke: var(--lp-ink); stroke-width: 1.6; stroke-linejoin: round; }
.lp-board { grid-column: 1 / 7; grid-row: 1 / span 2; margin: 0; }
.lp-board-in { position: relative; aspect-ratio: 5 / 4; max-width: 640px; background: var(--lp-flour); border-radius: 2px; box-shadow: var(--lp-lift); overflow: hidden; }
.lp-board-c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lp-board-ph { display: none; }
.lp-board-ph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 22% 42%; transform: scale(1.55); transform-origin: 26% 44%; }
.lp-yl { position: absolute; left: 22px; top: 18px; margin: 0; display: flex; align-items: center; gap: 8px; font: 400 1.625rem/1 var(--lp-hand); color: var(--lp-crust); transform: rotate(-2deg); }
.lp-yl-g { width: 52px; height: 20px; overflow: visible; }
.lp-yl-g path, .lp-sign-g path { fill: none; stroke: var(--lp-crust); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lp-mm { position: absolute; right: 26px; bottom: 20px; margin: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font: 600 0.8125rem/1 var(--lp-sans); letter-spacing: 0.02em; }
.lp-mm-bar { display: block; width: var(--lp-mm, 48px); height: 8px; border: 1.5px solid var(--lp-ink); border-top: 0; }
.lp-board-cap { margin: 14px 0 0; max-width: 640px; font: 480 0.875rem/1.4 var(--lp-sans); }
.lp-cap-nj { display: none; }
.lp-read { grid-column: 7 / 11; grid-row: 2; align-self: start; margin: 40px 0 0; }
.lp-read p { margin: 0; }
.lp-read-w { font: 400 var(--lp-marker) / 1 var(--lp-hand); color: var(--lp-crust); }
.lp-open { --lp-wght: 600; display: block; margin-bottom: 6px; font: 400 clamp(3rem, 1.6rem + 3.6vw, 5.5rem) / 0.9 var(--lp-sans); font-variation-settings: "wght" var(--lp-wght); letter-spacing: -0.02em; color: var(--lp-ink); transition: font-variation-settings 0.3s ease; }
.lp-read-m { display: block; max-width: 14em; transform: rotate(-1.5deg); }
.lp-read-n { max-width: 30ch; margin-top: 22px !important; padding-top: 14px; border-top: 1px solid var(--lp-rule); font: 480 var(--lp-cellf)/1.45 var(--lp-sans); font-variant-numeric: tabular-nums; }

/* 3:00 am, the bake */
.lp-post { grid-column: 1 / 7; position: relative; margin-top: 56px; }
.lp-post-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0 0 10px; }
.lp-post-n { font: 400 1.75rem/1 var(--lp-hand); letter-spacing: 0; color: var(--lp-crust); transform: rotate(-2deg); }
.lp-sched { margin: 0; padding: 0; list-style: none; background: var(--lp-ground); border-top: 1.5px solid var(--lp-ink); }
.lp-sched li { position: relative; display: grid; grid-template-columns: 4.2em minmax(0, 1fr) auto; align-items: center; column-gap: 20px; min-height: 64px; padding: 8px 0; border-bottom: 1px solid var(--lp-rule); font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3.25rem); }
.lp-sched-t { position: relative; justify-self: start; font: 700 1em/1 var(--lp-disp); font-variant-numeric: tabular-nums; }
.lp-sched-w { font: 600 clamp(1.0625rem, 1rem + 0.3vw, 1.25rem) / 1.3 var(--lp-sans); }
.lp-sched-s { display: block; font-weight: 480; font-size: 0.875em; }
.lp-sched-open .lp-sched-w { font-weight: 480; font-style: normal; }
.lp-sched .lp-cb { margin-right: 6px; }
.lp-ring { position: absolute; left: -0.3em; right: -0.34em; top: 50%; height: 1.5em; margin-top: -0.78em; pointer-events: none; }
.lp-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lp-ring path { fill: none; stroke: var(--lp-crust); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.lp-ring-t { position: absolute; left: calc(100% - 0.2em); top: -0.34em; font: 400 1.625rem/1 var(--lp-hand); color: var(--lp-crust); white-space: nowrap; transform: rotate(-8deg); }
.lp-ring[hidden] { display: none; }
.lp-xout { position: absolute; left: 0; top: 40px; width: 100%; height: calc(100% - 40px); overflow: visible; pointer-events: none; display: none; }
.lp-xout path { fill: none; stroke: var(--lp-crust); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.lp-off .lp-xout { display: block; }
.lp-off .lp-sched { opacity: 0.55; }
.lp-pin-oven { grid-column: 7 / 11; grid-row: 2 / span 2; align-self: start; margin-top: 10px; }
.lp-pin-oven img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 62% 50%; }
.lp-pl { margin: 0; font: 700 clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem) / 1.02 var(--lp-disp); letter-spacing: -0.005em; color: var(--lp-crust); text-wrap: balance; }
.lp-pl-bake { grid-column: 7 / 11; grid-row: 3; align-self: end; margin-top: 64px; }
.lp-row-bake .lp-post { grid-row: 3; }

/* 7:00 am, on the shelf */
.lp-pin-shelf { margin-top: 56px; }
.lp-pin-shelf img { aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 60%; }
.lp-shelf-how { display: flex; align-items: baseline; gap: 16px; margin: 48px 0 12px; }
.lp-shelf-hn { font: 400 1.5rem/1 var(--lp-hand); letter-spacing: 0; color: var(--lp-crust); transform: rotate(-2deg); }
.lp-shelf-grid { background: var(--lp-ground); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; margin: 0; padding: 0; list-style: none; border-top: 1.5px solid var(--lp-ink); border-left: 1px solid var(--lp-rule); }
.lp-item { display: contents; }
.lp-ib { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: 168px; min-width: 0; padding: 14px 16px 16px; background: transparent; border: 0; border-right: 1px solid var(--lp-rule); border-bottom: 1px solid var(--lp-rule); border-radius: 0; color: var(--lp-ink); text-align: left; cursor: pointer; transition: background-color 0.12s; }
.lp-sil { width: 80px; height: 48px; margin: 0 0 auto -6px; color: var(--lp-crust); }
.lp-ib-n { display: block; margin-top: 12px; font: 700 clamp(1.375rem, 1rem + 1vw, 1.875rem) / 1.05 var(--lp-disp); }
.lp-ib-o, .lp-ib-g { display: block; font: 400 1.5rem/1 var(--lp-hand); color: var(--lp-crust); }
.lp-ib-o { margin-top: 8px; }
.lp-ib-y { display: none; }
.lp-ib.lp-out .lp-ib-y { display: inline; }
.lp-ib[aria-expanded="true"] { background: var(--lp-flour); }
.lp-ib[aria-expanded="true"]::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 22px; height: 12px; margin-left: -11px; background: var(--lp-ink); clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.lp-sn { grid-column: 1 / -1; position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px 40px; margin: 18px 12px 26px; padding: 28px 32px 26px; background: var(--lp-flour); border-radius: 2px; box-shadow: var(--lp-lift); transform: rotate(-0.6deg); }
.lp-sn[hidden] { display: none; }
.lp-sn h3 { margin: 0 0 12px; font: 700 clamp(1.625rem, 1.1rem + 1.4vw, 2.5rem) / 1 var(--lp-disp); color: var(--lp-crust); outline-offset: 4px; }
.lp-sn-s { margin: 0; max-width: 36ch; }
.lp-sn-y { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; font: 400 1.75rem/1 var(--lp-hand); color: var(--lp-crust); transform: rotate(-2deg); }
.lp-dl { margin: 0; border-top: 1.5px solid var(--lp-ink); font: 480 var(--lp-cellf)/1.35 var(--lp-sans); font-variant-numeric: tabular-nums; }
.lp-dl div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 12px; padding: 9px 0 8px; border-bottom: 1px solid var(--lp-rule); }
.lp-dl dt { font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.02em; padding-top: 2px; }
.lp-dl dd { margin: 0; }
.lp-sn-a { grid-column: 1; grid-row: 1; }
.lp-sn .lp-dl { grid-column: 2; grid-row: 1 / span 2; }
.lp-back { grid-column: 1; grid-row: 2; align-self: end; justify-self: start; display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; font: 400 1.5rem/1 var(--lp-hand); }
.lp-mn-glaze { margin-top: 36px; --lp-tilt: -1.5deg; }
@supports (view-transition-name: none) {
  ::view-transition-group(lp-card), ::view-transition-group(lp-card2), ::view-transition-group(lp-name), ::view-transition-group(lp-name2) { animation-duration: 0.32s; animation-timing-function: cubic-bezier(0.2, 0.7, 0.1, 1); }
  ::view-transition-old(lp-card), ::view-transition-new(lp-card), ::view-transition-old(lp-card2), ::view-transition-new(lp-card2) { height: 100%; object-fit: fill; }
  ::view-transition-group(root) { animation-duration: 0.24s; }
}

/* 4:45 am, the van and the standing order */
.lp-row-ws .lp-lead { grid-column: 1 / 5; }
.lp-their { grid-column: 5 / 7; grid-row: 2; align-self: start; }
.lp-their-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; margin: 0 0 10px; }
.lp-tag { padding: 3px 6px 2px; border: 1px solid var(--lp-ink); font-size: 0.75rem; font-weight: 620; }
.lp-sheet-their { font-size: 0.9375rem; }
.lp-sheet-their th, .lp-sheet-their td { padding: 9px 8px 8px; white-space: nowrap; }
.lp-sheet-their tbody th { font-weight: 480; }
.lp-pin-van { grid-column: 7 / 11; grid-row: 2; align-self: start; }

.lp-form { grid-column: 1 / 9; position: relative; margin: 96px 0 0; padding: clamp(28px, 3vw, 44px) clamp(20px, 3vw, 44px) clamp(24px, 2.6vw, 36px); background: var(--lp-flour); border-radius: 2px; box-shadow: var(--lp-lift); }
.lp-form-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; padding-bottom: 14px; margin-bottom: 8px; border-bottom: 1.5px solid var(--lp-ink); }
.lp-form-head h3 { margin: 0; font: 700 clamp(1.75rem, 1.2rem + 1.4vw, 2.625rem) / 1 var(--lp-disp); letter-spacing: -0.005em; color: var(--lp-crust); }
.lp-form-sub { margin: 0; font: 400 1.75rem/1 var(--lp-hand); color: var(--lp-crust); transform: rotate(-2deg); }
.lp-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; }
.lp-f { margin: 0; padding: 18px 0 0; min-width: 0; border: 0; }
.lp-f > label, .lp-f legend { display: block; padding: 0; margin: 0 0 4px; }
.lp-f .lp-c { display: inline-flex; margin: 0; }
.lp-f input[type="text"], .lp-f input[type="time"], .lp-f select, .lp-f textarea, .lp-stepr input {
  display: block; width: 100%; min-height: 46px; margin: 0; padding: 8px 2px 6px; background: transparent; border: 0; border-bottom: 1.5px solid var(--lp-ink); border-radius: 0; color: var(--lp-ink); font: 480 1.0625rem/1.3 var(--lp-sans); font-variant-numeric: tabular-nums; }
.lp-f select { -webkit-appearance: none; appearance: none; padding-right: 28px; background: linear-gradient(45deg, transparent 50%, var(--lp-ink) 50%) calc(100% - 13px) 55% / 6px 6px no-repeat, linear-gradient(-45deg, transparent 50%, var(--lp-ink) 50%) calc(100% - 7px) 55% / 6px 6px no-repeat; }
.lp-f textarea { resize: vertical; min-height: 96px; background-image: repeating-linear-gradient(to bottom, transparent 0 31px, var(--lp-rule) 31px 32px); line-height: 32px; padding-top: 0; }
.lp-f input:focus-visible, .lp-f select:focus-visible, .lp-f textarea:focus-visible { outline: none; border-bottom-color: var(--lp-crust); box-shadow: 0 2px 0 var(--lp-crust); }
.lp-fh { display: block; margin-top: 6px; font: 400 1.375rem/1 var(--lp-hand); color: var(--lp-crust); }
.lp-cells { grid-column: 1 / -1; }
.lp-cells legend { float: left; width: 100%; }
.lp-c { position: relative; display: inline-flex; margin: 0 0 0 -1.5px !important; }
.lp-cells legend + .lp-c { margin-left: 0 !important; }
.lp-c input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lp-c span { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 16px 0 12px; border: 1.5px solid var(--lp-ink); font: 600 0.9375rem/1.1 var(--lp-sans); cursor: pointer; user-select: none; transition: background-color 0.12s; }
.lp-c span::before { content: ""; flex: none; width: 16px; height: 16px; border: 1.5px solid var(--lp-ink); background: var(--lp-flour) center / 22px 19px no-repeat; }
.lp-c input[type="radio"] + span::before { border-radius: 50%; }
.lp-c:hover span { background: var(--lp-hover); }
.lp-c input:checked + span { background: #DCE2F4; }
.lp-c input:checked + span::before { background-image: url(/assets/work/longproof/tick.svg); background-position: 3px -5px; }
.lp-c input:focus-visible + span { outline: 3px solid var(--lp-crust); outline-offset: 2px; position: relative; z-index: 1; }
.lp-f-days .lp-c span { min-width: 72px; }
.lp-stepr { display: flex; align-items: stretch; max-width: 220px; }
.lp-stepr input { text-align: center; -moz-appearance: textfield; }
.lp-stepr input::-webkit-inner-spin-button, .lp-stepr input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.lp-sb { flex: none; width: 48px; min-height: 46px; font: 600 1.375rem/1 var(--lp-sans); }
.lp-f-else { grid-column: 1 / -1; }
.lp-f-send { display: flex; align-items: flex-end; }
.lp-send { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 0 24px; font: 760 1.0625rem/1 var(--lp-sans); }
.lp-send-t { position: relative; }
.lp-send-x { position: absolute; left: 50%; top: 50%; width: 180px; height: 30px; margin: -15px 0 0 -90px; overflow: visible; pointer-events: none; }
.lp-send-x path { fill: none; stroke: var(--lp-crust); stroke-width: 3.4; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.lp-sent .lp-send-x path { opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 0.3s ease-out, opacity 0s; }
.lp-sent .lp-send-x path + path { transition: stroke-dashoffset 0.34s ease-out 0.28s, opacity 0s 0.28s; }
.lp-status { min-height: 1.5em; margin: 16px 0 0; font: 600 1rem/1.4 var(--lp-sans); }

/* 1:00 pm, the foot of the sheet */
.lp-foot-grid { grid-column: 1 / 7; grid-row: 2; }
.lp-hours th { width: 38%; }
.lp-where { margin: 20px 0 0; font-weight: 480; }
.lp-sign { grid-column: 8 / 11; grid-row: 2; align-self: end; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: 10px; margin: 0; font: 400 clamp(2rem, 1.5rem + 1.2vw, 2.75rem) / 1 var(--lp-hand); color: var(--lp-crust); }
.lp-sign-a { padding-bottom: 14px; }
.lp-sign-b { grid-column: 1 / -1; justify-self: end; margin-top: 4px; font-size: 0.8em; transform: rotate(-2deg); }
.lp-sign-g { width: 100%; height: auto; aspect-ratio: 4; overflow: visible; }
.lp-root .lp-sign-g .lp-sign-line { fill: none; stroke: var(--lp-ink); stroke-width: 1.5; stroke-dasharray: none; vector-effect: non-scaling-stroke; animation: none; }
.lp-sign-g path { stroke-width: 3.2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.lp-last { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; margin: 72px 0 0; padding-top: 28px; border-top: 1px solid var(--lp-rule); font: 700 clamp(1.375rem, 1rem + 1vw, 1.875rem) / 1.1 var(--lp-disp); }
.lp-mark-lg { width: 58px; height: 48px; }

/* the clip: on the row the bakery is at now */
.lp-here { position: relative; display: flex; align-items: flex-start; gap: 6px; margin-top: 18px; }
.lp-here[hidden] { display: none; }
.lp-here-c { flex: none; width: 40px; height: 51px; filter: drop-shadow(0 3px 2px rgba(23, 20, 15, 0.28)); }
.lp-here-t { margin: 14px 0 0; font: 400 1.75rem/0.95 var(--lp-hand); color: var(--lp-crust); transform: rotate(-4deg); max-width: 6em; }

/* marks draw on as their row comes into view (scroll-driven where the browser has it) */
.lp-row .lp-sign-g path, .lp-row .lp-strike path, .lp-row .lp-ring path, .lp-row .lp-xout path { stroke-dashoffset: 0; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lp-sda .lp-row .lp-on .lp-chk path { animation: lp-draw linear both; animation-timeline: view(); animation-range: cover calc(8% + var(--d, 0) * 4%) cover calc(20% + var(--d, 0) * 4%); }
    .lp-sda .lp-row .lp-on .lp-chk path + path { animation-range: cover calc(18% + var(--d, 0) * 4%) cover calc(28% + var(--d, 0) * 4%); }
    .lp-fl li { --d: var(--i, 0); }
    .lp-sda .lp-strike path, .lp-sda .lp-ring path, .lp-sda .lp-xout path, .lp-sda .lp-sign-g [data-lp-yours] { animation: lp-draw linear both; animation-timeline: view(); animation-range: entry 40% cover 40%; }
    .lp-sda .lp-starter { animation: lp-rise linear both; animation-timeline: view(); animation-range: entry 30% cover 55%; }
  }
}
@keyframes lp-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes lp-rise { from { transform: translateY(58px); } to { transform: translateY(0); } }
/* no scroll timelines: drawn when the row arrives */
.lp-io .lp-row:not(.lp-drawn) .lp-on .lp-chk path, .lp-io .lp-row:not(.lp-drawn) .lp-strike path, .lp-io .lp-row:not(.lp-drawn) .lp-sign-g path { stroke-dashoffset: 1; }
.lp-io .lp-row:not(.lp-drawn) .lp-starter { transform: translateY(58px); }
.lp-io .lp-row .lp-chk path, .lp-io .lp-row .lp-strike path, .lp-io .lp-row .lp-sign-g path { transition: stroke-dashoffset 0.36s cubic-bezier(0.3, 0.7, 0.3, 1) calc(var(--i, 0) * 0.16s); }
.lp-io .lp-starter { transition: transform 1.6s cubic-bezier(0.3, 0.7, 0.2, 1) 0.2s; }

/* without JavaScript: the photograph on the board, no controls, every shelf note open */
.lp-root:not(.lp-js) .lp-board-ph { display: block; }
.lp-root:not(.lp-js) .lp-board-c, .lp-root:not(.lp-js) .lp-set, .lp-root:not(.lp-js) .lp-read, .lp-root:not(.lp-js) .lp-yl, .lp-root:not(.lp-js) .lp-mm, .lp-root:not(.lp-js) .lp-cap-js, .lp-root:not(.lp-js) .lp-back, .lp-root:not(.lp-js) .lp-shelf-how { display: none; }
.lp-root:not(.lp-js) .lp-cap-nj { display: inline; }
.lp-root:not(.lp-js) .lp-sched .lp-cb { display: none; }
.lp-root:not(.lp-js) .lp-crumb { margin-top: 40px; }
.lp-root:not(.lp-js) .lp-sn { margin: 0 0 18px; transform: none; box-shadow: none; border-bottom: 1px solid var(--lp-rule); }
.lp-board.lp-failed .lp-board-ph { display: block; }
.lp-board.lp-failed .lp-board-c { display: none; }

/* 1024 to 1379: rows loosen a little */
@media (min-width: 1024px) and (max-width: 1379px) {
  .lp-lead { grid-column: 1 / 7; }
  .lp-row-lev .lp-body > h2, .lp-lev-sheet { grid-column: 1 / 7; }
  .lp-jar { grid-column: 7 / 11; width: min(100%, 200px); }
  .lp-jar-l { font-size: 1.5rem; }
  .lp-mixbox { grid-column: 7 / 11; margin-top: 0; }
  .lp-mn-88 { right: auto; left: 40%; }
  .lp-pin-shape { grid-column: 2 / 11; }
  .lp-board, .lp-post { grid-column: 1 / 7; }
  .lp-read, .lp-pin-oven, .lp-pl-bake { grid-column: 7 / 11; }
  .lp-shelf-grid .lp-ib { min-height: 150px; }
  .lp-row-ws .lp-lead { grid-column: 1 / 6; }
  .lp-their { grid-column: 6 / 11; }
  .lp-pin-van { grid-column: 6 / 11; grid-row: 3; margin-top: 40px; }
  .lp-form { grid-column: 1 / -1; }
}
/* wide: the shaping copy beside its photograph */
@media (min-width: 1380px) {
  .lp-row-shape .lp-lead { grid-column: 1 / 5; grid-row: 2; }
  .lp-pin-shape { grid-column: 5 / 11; grid-row: 2 / span 2; align-self: start; margin-top: 10px; }
  .lp-label-shape { grid-column: 3 / 9; grid-row: 3; align-self: end; margin: 0 0 -34px 0; }
  .lp-folds { grid-row: 4; margin-top: 88px; }
}
@media (min-width: 1024px) and (min-height: 1000px) {
}
/* short desktop windows: everything the first screen needs, still on it */
@media (min-width: 1000px) and (max-height: 800px) {
}

/* below 1024: the time sits above the heading */
@media (max-width: 1023px) {
  .lp-row > .lp-w::before { display: none; }
  .lp-row > .lp-w { display: block; }
  .lp-row .lp-gut { padding-top: 26px; }
  .lp-gut-in { position: static; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
  .lp-rt { position: static; margin-left: 0.14em; vertical-align: -0.02em; }
  .lp-row .lp-time { max-width: none; }
  .lp-here { margin-top: -12px; }
  .lp-body { display: block; padding-top: 18px; }
  .lp-body > h2 { max-width: 20ch; }
  .lp-row-proof .lp-body > h2 { max-width: 14ch; }
  .lp-lead { max-width: 40em; }
  .lp-lev-sheet { margin-top: 40px; max-width: 640px; }
  .lp-mn-warm { position: static; margin: 14px 0 0 40%; }
  .lp-mn-warm .lp-mn-arr { display: none; }
  .lp-jar { width: 200px; margin: 36px auto 0 12%; }
  .lp-mixbox { margin: 40px 0 0; max-width: 560px; }
  .lp-mn-88 { position: static; margin: 16px 0 0 auto; text-align: right; }
  .lp-pin-shape { margin: 60px 0 0; }
  .lp-label-shape { display: inline-block; margin: -30px 0 0 16px; }
  .lp-mn-rye { margin: 22px 0 0; }
  .lp-crumb { display: block; margin-top: 48px; }
  .lp-set { max-width: 640px; }
  .lp-board-in { max-width: 560px; }
  .lp-read { margin-top: 28px; max-width: 560px; }
  .lp-post { margin-top: 48px; max-width: 680px; }
  .lp-pin-oven { margin: 56px 0 0; max-width: 640px; }
  .lp-pin-oven img { aspect-ratio: 16 / 9; object-position: 60% 60%; }
  .lp-pl-bake { margin-top: 54px; }
  .lp-shelf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-their { margin-top: 40px; max-width: 420px; }
  .lp-pin-van { margin-top: 48px; max-width: 640px; }
  .lp-form { margin-top: 72px; }
  .lp-foot-grid { max-width: 640px; }
  .lp-sign { max-width: 420px; }
}
@media (min-width: 701px) and (max-width: 1023px) {
  .lp-row-lev .lp-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 32px; align-items: center; }
  .lp-row-lev .lp-body > h2, .lp-row-lev .lp-lead { grid-column: 1 / -1; }
  .lp-row-lev .lp-lev-sheet { grid-column: 1; margin-top: 40px; }
  .lp-row-lev .lp-jar { grid-column: 2; grid-row: 3; justify-self: end; width: 180px; margin: 40px 0 0; }
  .lp-mixbox { margin-left: auto; margin-right: 0; }
  .lp-crumb { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: 32px; }
  .lp-set { grid-column: 1 / -1; max-width: none; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; column-gap: 20px; border-bottom: 1px solid var(--lp-rule); }
  .lp-field { border-bottom: 0; }
  .lp-field + .lp-field { padding-left: 20px; border-left: 1px solid var(--lp-rule-soft); }
  .lp-cellbtn { width: auto; margin: 0; }
  .lp-set { grid-row: 1; }
  .lp-board { grid-column: 1; grid-row: 2; margin-top: 24px; }
  .lp-read { grid-column: 2; grid-row: 2; align-self: center; margin-top: 0; }
  .lp-open { font-size: 3.5rem; }
  .lp-row-ws .lp-body { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: 32px; }
  .lp-row-ws .lp-body > h2, .lp-row-ws .lp-lead, .lp-form { grid-column: 1 / -1; }
  .lp-their { grid-column: 1; grid-row: 3; align-self: start; }
  .lp-pin-van { grid-column: 2; grid-row: 3; margin-top: 44px; }
  .lp-foot .lp-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); column-gap: 40px; }
  .lp-foot .lp-body > h2, .lp-last { grid-column: 1 / -1; }
  .lp-foot-grid { grid-column: 1; grid-row: 2; }
  .lp-sign { grid-column: 2; grid-row: 2; }
}
@media (max-width: 860px) {
  .lp-links { display: none; }
  .lp-nav-next { display: none; }
  .lp-nav-shelf { display: inline-block; color: var(--lp-ink); font: 620 15px/1 var(--lp-sans); text-decoration: none; white-space: nowrap; padding: 10px 0 8px; border-bottom: 2px solid var(--lp-crust); }
  .lp-menu { display: inline-flex; }
  .lp-menu-open .lp-links { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; top: calc(100% + 8px); right: var(--lp-m); width: min(300px, calc(100vw - 2 * var(--lp-m))); padding: 10px 20px 16px; background: var(--lp-flour); border-radius: 2px; box-shadow: var(--lp-lift); transform: rotate(-0.8deg); }
  .lp-menu-open .lp-links a { display: block; padding: 14px 0; font-size: 17px; border-bottom: 1px solid var(--lp-rule); }
  .lp-menu-open .lp-links-next { display: block; padding-top: 12px; font: 400 26px/1 var(--lp-hand); color: var(--lp-crust); }
}

/* phones */
@media (max-width: 700px) {
  .lp-root { --lp-g: 16px; --lp-line: 28px; --lp-nav: 52px; }
  .lp-mark { width: 34px; height: 28px; }
  .lp-brand { font-size: 22px; gap: 7px; }
  .lp-head { font-size: 12px; }
  .lp-head > span { padding: 10px 12px 9px; }
  .lp-head .lp-head-c, .lp-head .lp-head-d { display: none; }
  .lp-head .lp-long { display: none; }
  .lp-head .lp-short { display: inline; }

  .lp-row .lp-gut { padding-top: 20px; }
  .lp-row .lp-time { font-size: 2rem; }
  .lp-here-c { width: 32px; height: 41px; }
  .lp-here-t { font-size: 1.5rem; margin-top: 10px; }
  .lp-body { padding-top: 12px; }
  .lp-body > h2 { margin-bottom: 20px; }
  .lp-cap { right: 10px; bottom: -32px; font-size: 1.5rem; }
  .lp-sheet th, .lp-sheet td { padding: 10px 10px 9px; }
  .lp-sheet-lev thead { display: none; }
  .lp-sheet-lev tbody tr { display: grid; grid-template-columns: 1.05fr 0.8fr 1.25fr; border-top: 1.5px solid var(--lp-ink); }
  .lp-sheet-lev tbody th { grid-column: 1 / -1; width: auto; padding: 9px 0 8px; border-left: 0; border-bottom: 1px solid var(--lp-rule-soft); }
  .lp-sheet-lev td { width: auto !important; padding: 8px 8px 10px; }
  .lp-sheet-lev td:nth-child(2) { border-left: 0; padding-left: 0; }
  .lp-sheet-lev td::before { content: attr(data-h); display: block; margin-bottom: 10px; font: 700 0.75rem/1.2 var(--lp-sans); letter-spacing: 0.02em; }
  .lp-fixc { white-space: normal; }
  .lp-jar { width: 180px; margin: 36px auto 0 8%; }
  .lp-jar-l { font-size: 1.5rem; right: auto; left: 90%; text-align: left; }
  .lp-fl { flex-wrap: wrap; }
  .lp-fl li { min-height: 56px; padding: 0 12px; }
  .lp-fg { width: 100%; }
  .lp-fg:first-child .lp-fl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lp-fg:first-child .lp-fl li { justify-content: center; gap: 8px; padding: 0 4px; }
  .lp-fg:first-child .lp-fl li:first-child { justify-content: flex-start; }
  .lp-fg:first-child .lp-fl li.lp-fl-wob { grid-column: 1 / -1; justify-content: flex-start; border-left: 0; border-top: 1px solid var(--lp-rule); padding-left: 2px; }
  .lp-fg:last-child .lp-fl { flex-direction: column; }
  .lp-fg:last-child .lp-fl li { border-left: 0; padding-left: 2px; border-top: 1px solid var(--lp-rule-soft); }
  .lp-fg:last-child .lp-fl li:first-child { border-top: 0; }
  .lp-fl-w { margin-right: auto; }
  .lp-label-shape { font-size: 1.625rem; padding: 10px 16px 9px; margin-top: -24px; max-width: calc(100% - 16px); white-space: normal; }
  .lp-set { display: block; }
  .lp-field { padding: 12px 0 14px; }

  .lp-rng { height: 44px; }
  .lp-rng::-webkit-slider-thumb { width: 36px; height: 36px; margin-top: -17px; }
  .lp-rng::-moz-range-thumb { width: 36px; height: 36px; }
  .lp-val { left: calc(var(--lp-p, 0.5) * (100% - 36px) + 18px); }
  .lp-cellbtn { width: 100%; min-height: 52px; margin: 16px 0 0; }
  .lp-board { margin-top: 20px; }
  .lp-board-in { width: min(100%, 58svh); margin-inline: auto; }
  .lp-yl { left: 14px; top: 12px; font-size: 1.375rem; }
  .lp-yl-g { width: 40px; height: 16px; }
  .lp-mm { right: 16px; bottom: 12px; }
  .lp-open { font-size: 3.25rem; }
  .lp-sched li { grid-template-columns: 3.9em minmax(0, 1fr) auto; column-gap: 12px; min-height: 56px; font-size: 1.875rem; }
  .lp-sched-w { font-size: 1rem; }
  .lp-ring { left: -12px; }
  .lp-ring-t { font-size: 1.375rem; left: 50%; top: -1.15em; transform: translateX(-50%) rotate(-5deg); }
  .lp-pin-oven img { aspect-ratio: 3 / 4; object-position: 50% 50%; }
  .lp-pin-shelf img { aspect-ratio: 3 / 4; }
  .lp-shelf-grid { grid-template-columns: minmax(0, 1fr); border-left: 0; }
  .lp-ib { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 14px; align-items: center; min-height: 0; padding: 14px 4px 14px 0; border-right: 0; }
  .lp-sil { grid-row: 1 / span 3; margin: 0; }
  .lp-ib-n { margin-top: 0; }
  .lp-ib-o { margin-top: 4px; }
  .lp-ib-o, .lp-ib-g { font-size: 1.375rem; }
  .lp-ib[aria-expanded="true"]::after { left: 32px; }
  .lp-sn { display: block; margin: 14px 0 22px; padding: 22px 18px 20px; transform: rotate(-0.4deg); }
  .lp-sn .lp-dl { margin-top: 18px; }
  .lp-dl div { grid-template-columns: 8.2em minmax(0, 1fr); }
  .lp-back { margin-top: 16px; min-height: 44px; }
  .lp-form { padding: 28px 16px 22px; }
  .lp-fgrid { display: block; }
  .lp-c span { padding: 0 12px 0 10px; }
  .lp-f-days { display: flex; flex-wrap: wrap; }
  .lp-f-days legend { flex: 0 0 100%; }
  .lp-f-days .lp-c { flex: 1 1 0; }
  .lp-f-days .lp-c span { min-width: 0; width: 100%; padding: 0 6px; gap: 6px; }
  .lp-f-want .lp-c { width: 50%; }
  .lp-f-want .lp-c span { width: 100%; margin-top: -1.5px; }
  .lp-f-send { margin-top: 26px; }
  .lp-sign { margin-top: 48px; }
  .lp-sign-g { max-width: 250px; }
}
@media (max-width: 380px) {
  .lp-nav-in { gap: 12px; }
  .lp-menu { padding: 0 10px; }
  .lp-fl li, .lp-fg:first-child .lp-fl li { padding: 0 4px; gap: 6px; }
  .lp-fl .lp-cb { width: 22px; height: 22px; }
  .lp-fl .lp-chk { width: 32px; height: 28px; top: -9px; }
  .lp-fl-t { font-size: 0.875rem; }
  .lp-f-want .lp-c { width: 100%; }
  .lp-f-days .lp-c { min-width: 0; }
  .lp-f-days .lp-c span { justify-content: center; padding: 0 4px; }
  .lp-f-days .lp-c span::before { display: none; }
}
@media (max-width: 374px) {
  .lp-nav-shelf { display: none; }
}
@media (max-width: 359px) {
  .lp-head > span { padding-inline: 8px; }
  .lp-f-days .lp-c span { padding: 0 8px 0 7px; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-root *, .lp-root *::before, .lp-root *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; }
}