/* ==========================================================================
   Here There Bread
   --------------------------------------------------------------------------
   Everything here is drawn from the client's own sticker sheet and activation
   guide: cream stock, one brown ink, engraved line work, and book typography.

   Three typefaces, each doing a job the others cannot:
     Cormorant Garamond  display only -- its hairlines are gorgeous at 80px and
                         illegible at 16px
     EB Garamond         everything you actually read
     Pinyon Script       the copperplate asides, exactly as on the guide

   Colours are sampled from the reference artwork, not invented.
   ========================================================================== */

/* --- typefaces, self-hosted (see tools/fetch_fonts.py) ------------------- */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/cormorant-garamond-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/cormorant-garamond-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/cormorant-garamond-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/eb-garamond-400.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/eb-garamond-500.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/eb-garamond-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Pinyon Script';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/pinyon-script-400.woff2') format('woff2');
}

/* --- the palette --------------------------------------------------------- */

:root {
  --paper:      #f4efe5;
  --paper-warm: #efe7d8;
  --paper-deep: #e8dfcb;
  --ink:        #2b2721;
  --ink-soft:   #5c5449;
  --ink-faint:  #6a6152;   /* 4.6:1 on the deepest panel -- the lightest
                              muted tone that still clears WCAG AA at 12px */
  --sepia:      #6b5740;
  --sepia-deep: #5a4833;
  --rule:       rgba(90, 72, 51, .2);
  --rule-firm:  rgba(90, 72, 51, .42);

  --gutter: clamp(1.35rem, 5.2vw, 5rem);
  --measure: 33rem;

  /* one easing for the whole site: slow out, no bounce. Dough does not spring. */
  --ease: cubic-bezier(.16, .68, .24, 1);
  --ease-io: cubic-bezier(.42, 0, .3, 1);
}

/* --- foundations --------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 clamp(1.0625rem, 1rem + .28vw, 1.1875rem)/1.66 'EB Garamond', Georgia, 'Times New Roman', serif;
  /* old-style figures are the single cheapest signal that a page was set by
     someone who cares -- lining numerals in a Garamond look borrowed */
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* paper grain. Multiplied over everything, well under the threshold where you
   would call it a texture -- you should only notice it if it is removed. */
body::before {
  content: '';
  position: fixed;
  inset: -10%;
  z-index: 90;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* the faint warmth that collects at the edges of a printed sheet */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 89;
  pointer-events: none;
  background: radial-gradient(125% 88% at 50% 4%, transparent 54%, rgba(90, 72, 51, .075) 100%);
}

::selection { background: rgba(107, 87, 64, .22); }

:focus-visible {
  outline: 1.5px solid var(--sepia);
  outline-offset: 3px;
}

img, svg { max-width: 100%; }

/* --- shared type --------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: 74rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.script {
  font-family: 'Pinyon Script', 'Cormorant Garamond', cursive;
  font-weight: 400;
  /* Pinyon runs small for its point size and sits high; both are corrected
     here rather than by guessing at every call site */
  font-size: 1.34em;
  line-height: 1.1;
  color: var(--sepia);
}

.label {
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-variant-numeric: lining-nums;
}

.display {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  line-height: .94;
  letter-spacing: -.01em;
  margin: 0;
}

.lede {
  max-width: var(--measure);
  font-size: 1.16em;
  line-height: 1.6;
  color: var(--ink-soft);
}

.rule {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin: 0;
}

/* dotted rule, lifted from the printed guide */
.rule--dotted {
  height: 2px;
  background: none;
  border-top: 2px dotted var(--rule-firm);
  opacity: .8;
}

/* --- links --------------------------------------------------------------- */

a { color: inherit; text-decoration: none; }

.link {
  position: relative;
  display: inline-block;
  padding-bottom: .14em;
  cursor: pointer;
}
/* These links live in small type. WCAG 2.2 wants 24px of target, so the hit
   area is grown behind the text without moving a single glyph. */
.link::before {
  content: '';
  position: absolute;
  inset: -.5em -.3em;
}
.link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: .34;
  transform-origin: left center;
  transition: opacity .28s var(--ease), transform .5s var(--ease);
}
.link:hover::after,
.link:focus-visible::after { opacity: .9; }

/* the one large call to action. The rule under it draws itself in from the
   left on hover, at reading speed -- the same gesture as underlining by hand. */
.cta {
  display: inline-flex;
  align-items: baseline;
  gap: .6em;
  position: relative;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 1.1rem + 2.1vw, 2.6rem);
  line-height: 1.1;
  color: var(--sepia-deep);
  padding-bottom: .16em;
  cursor: pointer;
}
.cta::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: .5;
  transform: scaleX(.999);
  transform-origin: left center;
  transition: transform .6s var(--ease), opacity .3s var(--ease);
}
.cta:hover::after,
.cta:focus-visible::after { opacity: 1; }
.cta__arrow {
  font-size: .62em;
  transition: transform .45s var(--ease);
}
.cta:hover .cta__arrow { transform: translateX(.42em); }

/* --- masthead ------------------------------------------------------------ */

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(1.4rem, 3.4vw, 2.4rem) clamp(1rem, 2.4vw, 1.6rem);
}

.wordmark {
  display: inline-block;
  line-height: 1;
  color: var(--sepia-deep);
}
.wordmark__here {
  display: block;
  font-size: .66rem;
  letter-spacing: .42em;
  text-indent: .42em;          /* optical: kill the trailing letterspace */
  text-transform: uppercase;
  color: var(--ink-faint);
}
.wordmark__bread {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 1.34rem;
  letter-spacing: .2em;
  text-indent: .2em;
  text-transform: uppercase;
  margin-top: .16em;
}

.masthead__est {
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-variant-numeric: lining-nums;
}

/* the rule runs the full width of the sheet, not the width of the text block */
.bleed-rule {
  height: 1px;
  background: var(--rule);
  width: 100%;
}

/* --- hero ---------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.6rem, 6vw, 4rem);
  padding-block: clamp(3rem, 9vw, 6.5rem) clamp(3rem, 8vw, 5.5rem);
  align-items: end;
}

@media (min-width: 54rem) {
  .hero {
    /* not halves. The type carries the page; the jar is the smaller voice. */
    grid-template-columns: 1.42fr .58fr;
    gap: clamp(2rem, 5vw, 5rem);
  }
}

.hero__mark { margin-bottom: clamp(1.6rem, 3.6vw, 2.4rem); }

.hero__here {
  display: block;
  font-size: clamp(.78rem, .6rem + .5vw, 1rem);
  letter-spacing: .52em;
  text-indent: .52em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: clamp(.5rem, 1.4vw, .9rem);
}

.hero__bread {
  font-size: clamp(4.4rem, 2rem + 16vw, 12rem);
  letter-spacing: .06em;
  text-indent: .06em;
  text-transform: uppercase;
  color: var(--sepia-deep);
  font-weight: 300;
}

.hero__script {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  margin-bottom: clamp(.9rem, 2vw, 1.3rem);
}

.hero__note {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  font-size: .92em;
  color: var(--ink-faint);
  font-style: italic;
}

.hero__jar {
  justify-self: center;
  width: clamp(11rem, 40vw, 16rem);
}
@media (min-width: 54rem) {
  .hero__jar {
    justify-self: end;
    /* drop it below the baseline of the type so the two do not line up like
       a slide layout */
    margin-bottom: -1.4rem;
  }
}

/* --- the jar ------------------------------------------------------------- */

.jar { display: block; width: 100%; height: auto; overflow: visible; }

/* The rise: about nineteen seconds from slack to peak and back. Real dough is
   slower by four orders of magnitude, but the shape of the curve is right --
   long climb, brief hold, slow collapse. */
.jar-mass {
  transform-origin: 50% 100%;
  animation: rise 19s var(--ease-io) infinite;
}
@keyframes rise {
  0%   { transform: translateY(15px) scaleY(.945); }
  44%  { transform: translateY(-11px) scaleY(1.05); }
  58%  { transform: translateY(-9px) scaleY(1.04); }
  100% { transform: translateY(15px) scaleY(.945); }
}

.bub {
  opacity: 0;
  animation: bubble var(--t, 10s) linear var(--d, 0s) infinite;
}
@keyframes bubble {
  0%   { transform: translateY(0) scale(.55); opacity: 0; }
  9%   { opacity: .8; }
  74%  { opacity: .66; }
  100% { transform: translateY(-108px) scale(1.2); opacity: 0; }
}

/* --- the wheat sprig ----------------------------------------------------- */

.sprig { display: block; height: auto; overflow: visible; }
.sprig--sway {
  transform-origin: 50% 96%;
  animation: sway 13s var(--ease-io) infinite;
}
@keyframes sway {
  0%, 100% { transform: rotate(-1deg); }
  50%      { transform: rotate(1.3deg); }
}

/* --- running text -------------------------------------------------------- */

.prose {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 3.4rem);
  padding-block: clamp(3rem, 7vw, 5rem);
}
@media (min-width: 54rem) {
  .prose { grid-template-columns: minmax(0, 1.55fr) minmax(0, .95fr); }
}
.prose p { margin: 0 0 1.1em; max-width: var(--measure); }
.prose p:last-child { margin-bottom: 0; }

.prose__aside {
  font-style: italic;
  color: var(--ink-soft);
  font-size: .97em;
  border-left: 1px solid var(--rule);
  padding-left: clamp(1rem, 2.4vw, 1.6rem);
  max-width: 26rem;
}
.prose__aside p { margin-bottom: .8em; }

/* --- the starter panel: the only thing on this page that matters --------- */

.panel {
  background: var(--paper-deep);
  border-block: 1px solid var(--rule);
  padding-block: clamp(3.4rem, 8vw, 6rem);
}

.panel__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 48rem) {
  .panel__grid { grid-template-columns: 5rem minmax(0, 1fr); }
}

.panel__sprig { width: 4.4rem; justify-self: start; }
@media (max-width: 47.99rem) { .panel__sprig { width: 3.2rem; } }

.panel h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem);
  line-height: 1.02;
  margin: .28em 0 .5em;
  color: var(--sepia-deep);
}
.panel p { max-width: var(--measure); margin: 0 0 1.6em; color: var(--ink-soft); }

.panel__url {
  display: block;
  margin-top: 1.1rem;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-variant-numeric: lining-nums;
}

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

.foot {
  padding-block: clamp(2.6rem, 6vw, 4rem);
  display: flex;
  flex-wrap: wrap;
  gap: .9rem clamp(1.5rem, 5vw, 4rem);
  align-items: baseline;
  justify-content: space-between;
  font-size: .84rem;
  letter-spacing: .1em;
  color: var(--ink-faint);
}
.foot a { color: var(--ink-soft); }

/* --- the reveal ---------------------------------------------------------- */

/* Ink settling onto paper: it arrives slightly soft and slightly low, then
   sharpens. Delays are set per element in the markup, by eye, because a
   uniform stagger is what a generated page does. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(11px);
    filter: blur(2px);
  }
  .js [data-reveal].is-in {
    opacity: 1;
    transform: none;
    filter: none;
    transition:
      opacity .8s var(--ease) var(--d, 0s),
      transform .95s var(--ease) var(--d, 0s),
      filter .8s var(--ease) var(--d, 0s);
  }
}

/* --- activation guide (/starter) ----------------------------------------- */

.guide { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 8vw, 5rem); }

.guide__head { text-align: center; padding-block: clamp(1rem, 3vw, 2rem) clamp(2rem, 5vw, 3rem); }
.guide__eyebrow {
  font-size: clamp(1.5rem, 1rem + 2.6vw, 2.6rem);
  letter-spacing: .14em;
  text-indent: .14em;
  text-transform: uppercase;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  color: var(--sepia-deep);
  margin: 0;
  line-height: 1.06;
}
.guide__title {
  font-size: clamp(2.6rem, 1.6rem + 5.4vw, 5rem);
  margin: .1em 0 0;
  line-height: 1;
}

/* the framed thank-you, ruled exactly like the printed sheet */
.welcome {
  border: 1px solid var(--rule-firm);
  padding: clamp(1.3rem, 3.4vw, 2.2rem) clamp(1.2rem, 4vw, 3rem);
  text-align: center;
  max-width: 40rem;
  margin: 0 auto clamp(2.6rem, 6vw, 4rem);
  color: var(--ink-soft);
  font-size: 1.04em;
}
.welcome p { margin: 0; }

/* --- video --------------------------------------------------------------- */

.film { margin-bottom: clamp(2.6rem, 6vw, 4rem); }
.film__label { display: block; margin-bottom: .9rem; }

.player {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--rule-firm);
  background: var(--paper-warm);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.player__art {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: .42;
}
/* An SVG carrying only a viewBox has no intrinsic size, and a percentage
   height against an absolutely-positioned grid area does not resolve the way
   you would hope. Give it a real height and let the ratio do the rest. */
.player__art .jar {
  width: auto;
  height: clamp(6.5rem, 30vw, 22rem);
  max-height: 72%;
  aspect-ratio: 200 / 300;
}

/* the hairline inside the frame, as on a printed plate */
.player::before {
  content: '';
  position: absolute;
  inset: clamp(.5rem, 1.4vw, .85rem);
  border: 1px solid var(--rule);
  pointer-events: none;
  z-index: 2;
}
.player[data-loaded]::before { display: none; }
.player__mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
}
.player__disc {
  width: clamp(3.4rem, 9vw, 4.6rem);
  height: clamp(3.4rem, 9vw, 4.6rem);
  border: 1px solid var(--sepia-deep);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(244, 239, 229, .82);
  transition: transform .45s var(--ease), background-color .3s var(--ease);
}
.player:hover .player__disc { transform: scale(1.06); background: rgba(244, 239, 229, .95); }
.player__disc svg { width: 34%; margin-left: 12%; }
.player__caption {
  position: absolute;
  left: 0; right: 0; bottom: clamp(.9rem, 2.5vw, 1.4rem);
  text-align: center;
}
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.film__credit {
  margin: .8rem 0 0;
  font-size: .84em;
  font-style: italic;
  color: var(--ink-faint);
}

/* --- the days ------------------------------------------------------------ */

.days {
  display: grid;
  gap: clamp(2.2rem, 5vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 44rem) { .days { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 70rem) {
  .days {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.6rem, 3vw, 2.4rem);
  }
}

.day { min-width: 0; }
.day + .day { border-top: 1px solid var(--rule); padding-top: clamp(1.6rem, 4vw, 2.2rem); }
@media (min-width: 44rem) {
  .day + .day { border-top: 0; padding-top: 0; }
  .day:nth-child(n + 2) { border-left: 1px solid var(--rule); padding-left: clamp(1.4rem, 3vw, 2rem); }
  .day:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (min-width: 70rem) {
  .day:nth-child(3) { border-left: 1px solid var(--rule); padding-left: clamp(1.4rem, 3vw, 2rem); }
}

.day__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.75rem);
  letter-spacing: .12em;
  text-indent: .12em;
  text-transform: uppercase;
  margin: 0;
  color: var(--sepia-deep);
}
.day__sub { display: block; margin: .8rem 0 1.3rem; }
.day__dots { margin: .7rem 0 0; }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li {
  position: relative;
  padding-left: 2.1rem;
  margin-bottom: 1.05em;
  color: var(--ink-soft);
}
.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: .04em;
  width: 1.35rem;
  text-align: right;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.16em;
  color: var(--sepia);
  font-variant-numeric: oldstyle-nums;
}

/* the feed ratio, set as a small table the way the printed guide sets it */
.feed { margin: 0 0 1.3rem; }
.feed div {
  display: flex;
  align-items: baseline;
  gap: .8em;
  padding: .42em 0;
  border-bottom: 1px solid var(--rule);
}
.feed div:last-child { border-bottom: 0; }
.feed dt {
  flex: 0 0 3.4rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.12em;
  color: var(--sepia-deep);
}
.feed dd { margin: 0; color: var(--ink-soft); }

.checks { list-style: none; margin: 0; padding: 0; }
.checks li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 1em;
  color: var(--ink-soft);
}
.checks li::before {
  content: '';
  position: absolute;
  left: .1rem;
  top: .62em;
  width: .62rem;
  height: 1px;
  background: var(--sepia);
  opacity: .6;
}

.day__closing { margin-top: 1.4rem; }

/* --- notes at the foot of the guide -------------------------------------- */

.notes {
  display: grid;
  gap: clamp(1rem, 3vw, 2rem);
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(3rem, 7vw, 4.5rem);
}
@media (min-width: 44rem) { .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.note {
  border: 1px solid var(--rule);
  padding: clamp(1rem, 2.6vw, 1.4rem) clamp(1.1rem, 3vw, 1.6rem);
  font-style: italic;
  color: var(--ink-soft);
  font-size: .97em;
}
.note p { margin: 0; }

.sign-off {
  text-align: center;
  margin-top: clamp(2.6rem, 6vw, 4rem);
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.6rem);
}

.back {
  display: inline-block;
  margin-top: clamp(2.4rem, 5vw, 3.4rem);
  font-size: .84rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* --- motion, for those who would rather not ------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .jar-mass { animation: none; }
  .bub { display: none; }
}