/* Explain the uploaded photo without covering the image or adding a frame. */
.add-brew-chapter{display:none}
.hero-add-brew-cue{display:none}
.hero-log-link{display:inline-block;color:inherit;text-decoration:none;cursor:pointer;transition:transform .18s ease}
.hero-log-link:hover{transform:translateY(-2px)}
.hero-log-link:focus-visible{outline:2px solid var(--gold);outline-offset:6px;border-radius:3px}
@media(min-width:801px){
  /* The first upload sits below the first fold; keep the prompt on the hero. */
  #product>.intro-hero{min-height:max(100svh,var(--hero-min-height,0px))!important;padding-bottom:76px!important}
  .hero-add-brew-cue{display:block;position:absolute;bottom:52px;left:50%;transform:translateX(-50%) rotate(2deg);width:max-content;max-width:80%;text-align:center}
  .hero-add-brew-cue h2{font:700 28px/1.25 'Courier Prime',monospace;letter-spacing:.6px;color:var(--gold);margin:0}
  .add-brew-chapter{--add-brew-width:clamp(260px,22vw,320px);--callout-width:clamp(180px,21vw,270px);--callout-gap:clamp(32px,5vw,72px);display:block;position:relative;width:min(1100px,91.111112%);margin:0 auto;scroll-margin-top:120px}
  /* Shadow is copied from the calendar film by layout-runtime, including edits.
     Rounded shadow outline only: the original PNG is not clipped or stretched. */
  .add-brew-figure{--add-brew-edge-shadow:0 -5px 14px -4px rgb(83 55 34 / 16%);width:var(--add-brew-width);margin:0 auto;transform:rotate(-3deg);border-radius:10% / 5.5%;box-shadow:var(--add-brew-edge-shadow),0 4px 8px rgb(83 55 34 / 2.4%),0 22px 38px -22px rgb(83 55 34 / 24%)}
  .add-brew-image{display:block;width:100%;height:auto}
  .add-brew-callout{position:absolute;width:var(--callout-width);color:#8A7C78;z-index:1;pointer-events:none}
  .add-brew-callout p{position:relative;margin:0;font:400 20px/1.4 'Courier Prime',monospace;letter-spacing:.2px;text-align:center}
  .add-brew-callout [data-annotation-copy]{white-space:pre-line;overflow-wrap:anywhere}
  .add-brew-arrow{display:block;position:absolute;width:120px;aspect-ratio:100/64;transform-origin:center}
  .add-brew-arrow svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
  .add-brew-callout path{vector-effect:non-scaling-stroke}
  .add-brew-cutout,.add-brew-location{right:calc(50% + var(--add-brew-width)/2 + var(--callout-gap))}
  .add-brew-cutout{top:7%}
  .add-brew-cutout p{transform:rotate(-3deg)}
  .add-brew-cutout .add-brew-arrow{left:calc(100% + var(--callout-gap) - 36px);top:50px;transform:rotate(-20deg)}
  .add-brew-time{left:calc(50% + var(--add-brew-width)/2 + var(--callout-gap));top:38%}
  .add-brew-time p{transform:rotate(2deg)}
  .add-brew-time .add-brew-arrow{right:calc(100% - 24px);top:30px;transform:rotate(5deg)}
  .add-brew-time .add-brew-arrow svg{transform:scaleX(-1)}
  .add-brew-location{top:49%}
  .add-brew-location p{transform:rotate(-2deg)}
  .add-brew-location .add-brew-arrow{left:calc(100% + var(--callout-gap) - 48px);top:14px;transform:rotate(-15deg)}
  .add-brew-upload,.add-brew-momento{right:calc(50% + var(--add-brew-width)/2 + var(--callout-gap))}
  .add-brew-upload{top:0}
  .add-brew-upload p{transform:rotate(-3deg)}
  .add-brew-upload .add-brew-arrow{left:calc(100% - 14px);top:72px;width:136px;transform:translate(24px,-24px) rotate(-8deg)}
  .add-brew-momento{top:34%}
  .add-brew-momento p{font-size:24px;font-weight:700;line-height:1.25;color:var(--gold);transform:rotate(-3deg)}
  .add-brew-momento .add-brew-arrow{left:calc(100% - 20px);top:-38px;width:125px;transform:rotate(-20deg)}
}