/* Public coffee journal: print details, useful illustrations and warm colour.
   Kept separate from the customer portal and staff workspaces. */
.public-site { --coffee-green:#344e43; --coffee-peach:#f0d8c4; --coffee-sage:#e3e7d8; }
.coffee-doodle { display:inline-grid; place-items:center; width:5rem; height:5rem; flex-shrink:0; color:currentColor; font-size:3.8rem; line-height:1; }
.coffee-doodle .ti { font-size:1em!important; }
.drink-summary__art .coffee-doodle { width:7rem; height:7rem; font-size:5.5rem; }
.editorial-kicker { display:flex; align-items:center; gap:.7rem; }
.editorial-kicker .coffee-doodle { width:2rem; height:2rem; color:var(--red); }
.editorial-kicker .coffee-doodle { font-size:1.7rem; }
.editorial-kicker .eyebrow { margin:0; }
.editorial-note { font-family:"Caveat","Segoe Print",cursive; font-size:1.8rem; font-weight:500; line-height:1.15; }

/* Number labels stay upright, equal-height and evenly spaced. */
.menu-page .product-card__meta strong,
.menu-page .choice-guide__steps li > span,
.public-b2b .hero__facts dt,
.public-b2b .steps li > span {
  font-family:var(--body);
  font-style:normal;
  font-weight:700;
  font-variant-numeric:lining-nums tabular-nums;
  letter-spacing:0;
}

/* The original Fox remains the centre of the first screen. */
.public-home .fox-stage::before {
  background-color:#eadbaa;
  border:1px solid #ba956633;
}
.fox-stage__print { position:absolute; inset:0 0 4.75rem; border-radius:var(--public-media-radius); overflow:hidden; z-index:-1; pointer-events:none; }
.fox-stage__print > span:not(.coffee-doodle) { position:absolute; bottom:1.4rem; left:1.5rem; font-size:clamp(3.5rem,7vw,7rem); line-height:.85; font-weight:850; letter-spacing:-.07em; color:#b92b3220; }
.fox-stage__print > .coffee-doodle { position:absolute; top:1.6rem; right:1.4rem; bottom:auto; left:auto; width:3.7rem; height:3.7rem; color:#936d3d; transform:rotate(12deg); }
.fox-stage__print > .coffee-doodle { font-size:3rem; }
.public-home .fox-home-hero h1 em { position:relative; display:inline-block; padding-bottom:.1em; }
.public-home .fox-home-hero h1 em::after { content:''; position:absolute; left:0; right:0; bottom:0; height:.12em; border-top:2px solid #b92b3270; border-radius:50%; transform:rotate(-2deg); }
.public-home .fox-home-hero__note::before { width:1.05rem; height:1.05rem; flex-shrink:0; background:var(--red); clip-path:polygon(50% 0,61% 36%,100% 50%,63% 61%,50% 100%,37% 63%,0 50%,36% 38%); }

/* A small illustrated tasting menu, with every card leading to its selection. */
.public-home .main-menu-story { grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:clamp(2rem,5vw,5rem); }
.public-home .main-menu-story__tastes { gap:.7rem; }
.taste-notebook__heading { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:0 .3rem .6rem; color:var(--red-dark); }
.public-home .main-menu-story__tastes .taste-notebook__heading small { flex-shrink:0; font:500 .65rem/1.3 var(--body); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.public-home .main-menu-story__tastes a { position:relative; grid-template-columns:5rem minmax(0,1fr) auto; gap:1.3rem; padding:1.3rem 1.5rem; border:1px solid #aa79542d; border-radius:1rem; background:var(--coffee-peach); }
.public-home .main-menu-story__tastes a[data-flavour=bright] { background:#e7e8d5; }
.public-home .main-menu-story__tastes a[data-flavour=bold] { background:#e8ddd2; }
.public-home .main-menu-story__tastes .coffee-doodle { color:#9f4537; }
.public-home .main-menu-story__tastes [data-flavour=bright] .coffee-doodle { color:#55633b; }
.public-home .main-menu-story__tastes [data-flavour=bold] .coffee-doodle { color:#685044; }
.public-home .main-menu-story__tastes small { font-size:clamp(1.45rem,2.4vw,2.15rem); }
.public-home .main-menu-story__tastes strong { font-size:.8rem; font-weight:500; }
.public-home .main-menu-story__tastes a > i { display:grid; place-items:center; width:2rem; height:2rem; border:1px solid #6a45352e; border-radius:50%; font-style:normal; font-size:1rem; }
.public-home .main-menu-story__tastes a:hover { color:var(--ink); background:#f5dfcb; }
.public-home .main-menu-story__tastes a[data-flavour=bright]:hover { background:#dce2c5; }
.public-home .main-menu-story__tastes a[data-flavour=bold]:hover { background:#dfcdbd; }
.public-home .main-menu-story__tastes a:hover strong { color:var(--muted); }
.public-home .main-menu-story__tastes a:focus-visible { outline-offset:4px; }

/* Editorial captions and small print keep the large surfaces from feeling blank. */
.public-home .coffee-pause { position:relative; background:#e7e7d7; border:1px solid #4c55321f; }
.public-home .coffee-pause > img { height:100%; min-height:31rem; }
.coffee-pause__caption { display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem; color:var(--coffee-green); }
.coffee-pause__caption .coffee-doodle { width:3.5rem; height:3.5rem; }
.coffee-pause__caption .coffee-doodle { font-size:2.8rem; }
.coffee-pause__caption .editorial-note { transform:rotate(-4deg); }
.public-home .main-about { background-color:var(--ink); padding-inline:var(--public-gutter); }
.public-home .main-about__body dl div { border-color:#f6efdf38; }
.public-home .main-about__body dt { color:#efc993; }
.public-home .main-proof { gap:1.25rem; grid-template-columns:minmax(14rem,.65fr) minmax(0,1.35fr); }
.public-home .main-proof__label { position:relative; align-items:flex-start; border:0; border-radius:1rem; padding:2rem; overflow:hidden; background:var(--red); }
.public-home .main-proof__label > .coffee-doodle { width:6.5rem; height:6.5rem; margin:1rem 0; color:#f5dbb3; transform:rotate(-12deg); }
.public-home .main-proof__label > .coffee-doodle { font-size:5.5rem; }
.public-home .main-proof__label > span:not(.coffee-doodle) { line-height:.9; font-size:clamp(3rem,5vw,5rem); }
.public-home .main-proof__label small { max-width:15rem; font-weight:500; line-height:1.65; }
.public-home .main-proof__grid { border:0; gap:1rem; }
.public-home .main-proof__grid article { position:relative; min-height:11rem; padding:1.5rem; border:1px solid #816c4433; border-radius:1rem; background:#ede4d3; }
.public-home .main-proof__grid article:nth-child(2),.public-home .main-proof__grid article:nth-child(3) { background:#e4e8dc; }
.public-home .main-proof__grid .coffee-doodle { position:absolute; right:1rem; top:.75rem; width:3.25rem; height:3.25rem; color:var(--coffee-green); }
.public-home .main-proof__grid .coffee-doodle { font-size:2.6rem; }
.public-home .main-proof__grid strong { margin-top:3rem; font-weight:650; }
.public-home .main-contact { border-top:1px solid var(--line); }

/* Menu remains compact: paper labels, colour by taste and a useful brewing note. */
.menu-page .menu-section__heading { padding-bottom:1.25rem; border-bottom:1px solid var(--ink); margin-bottom:0; }
.menu-page .menu-filters { border:0; border-bottom:1px solid var(--line); border-radius:0; padding-block:1.2rem; margin-bottom:1.5rem; }
.menu-page .product-card { border-color:#b5a28b70; }
.menu-page .product-card[data-taste=soft] { background:#fcf4e8; }
.menu-page .product-card[data-taste=bright] { background:#f0f2e6; }
.menu-page .product-card[data-taste=bold] { background:#f4ebe1; }
.menu-page .product-card__meta > span { width:fit-content; padding:.32rem .65rem; border:1px solid #9579573b; border-radius:2rem; background:#fffaf580; color:#5d493a; }
.menu-page .product-card__meta strong { font-size:1rem; color:#8e715e; }
.menu-page .product-card__bottom { border-top-style:dashed; }
.menu-page .product-card__bottom > strong { color:var(--red-dark); }
.menu-page .choice-guide { align-items:stretch; gap:clamp(2rem,5vw,5rem); }
.choice-guide__drawing { display:flex; align-items:center; gap:1rem; margin-top:2.25rem; color:var(--coffee-green); }
.choice-guide__drawing .coffee-doodle { width:5rem; height:5rem; transform:rotate(-5deg); }
.choice-guide__drawing .editorial-note { max-width:12rem; transform:rotate(-3deg); }
.menu-page .choice-guide__steps { align-content:stretch; border:1px solid #ac97744d; border-radius:1rem; background:#ede7d8; padding:0 1.7rem; }
.menu-page .choice-guide__steps li { min-height:8rem; align-items:center; padding:1.5rem 0; border-bottom-style:dashed; }
.menu-page .choice-guide__steps li:last-child { border-bottom:0; }
.menu-page .choice-guide__steps li > span { font-size:1.7rem; }

/* About: an editorial spread with a still life, personal copy and illustrated values. */
.public-about .about-story { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2rem 4rem; }
.public-about .about-story > .eyebrow { grid-column:1/-1; margin:0; }
.public-about .about-story > h2 { grid-column:1/-1; max-width:22ch; margin:0 0 1rem; font-size:clamp(2.5rem,4.4vw,4.6rem); }
.about-story__photo { margin:0; position:relative; align-self:stretch; min-height:20rem; }
.about-story__photo > img { width:100%; height:100%; max-height:29rem; object-fit:cover; border-radius:var(--public-media-radius); }
.about-story__photo figcaption { position:absolute; bottom:1.2rem; left:1.2rem; right:1.2rem; width:fit-content; max-width:calc(100% - 2.4rem); margin:0; padding:.65rem 1rem; border-radius:.35rem; background:#fff7e7; color:#713d2d; box-shadow:2px 3px 0 #33211420; transform:rotate(-3deg); }
.public-about .about-story__body { align-self:center; padding-block:1rem; }
.public-about .about-story__body > p { font-size:1.15rem; line-height:1.75; }
.public-about .fox-inline { border:0; border-top:1px dashed #ac9670; border-radius:0; background:none; padding:1.5rem 0 0; margin:1.75rem 0 0; }
.public-about .fox-inline img { width:6rem; height:6rem; }
.public-about .fox-inline p { font-family:"Caveat","Segoe Print",cursive; font-size:1.9rem; line-height:1.1; }
.public-about .about-principles { background:var(--coffee-green); gap:0; padding:3.5rem var(--public-gutter); }
.public-about .about-principles article { position:relative; padding:1rem 2.25rem; border-color:#f4e9d936; }
.public-about .about-principles article:first-child { padding-left:0; }
.public-about .about-principles article:last-child { padding-right:0; }
.public-about .about-principles article > span { color:#dfbb87; }
.public-about .about-principles .coffee-doodle { margin:1rem 0 1.5rem; width:5rem; height:5rem; color:#efd7aa; }
.public-about .about-principles h3 { font-size:clamp(1.45rem,2vw,2rem); text-transform:none; }
.public-about #documents .desk-panel { border-radius:1rem; background:#fbf6eb; }
.public-about #documents .desk-panel--padded { border-top:3px solid var(--red); }
.public-about .about-contact { background-color:#ece2ce; }
.public-about .about-visit { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(16rem,.8fr); gap:2rem; align-items:end; padding:clamp(2.5rem,5vw,5rem) var(--public-gutter); background:var(--coffee-green); color:#fffaf1; }
.public-about .about-visit h2 { margin:.6rem 0 1rem; font-family:var(--display); font-size:clamp(2.4rem,4vw,4.5rem); line-height:1; letter-spacing:-.04em; }
.public-about .about-visit p:not(.eyebrow) { max-width:44rem; line-height:1.65; }
.public-about .about-visit__actions { display:grid; justify-items:start; gap:1.25rem; }
.public-about .about-visit__actions strong { font-size:clamp(1.1rem,1.6vw,1.5rem); }
.public-about .about-visit__actions>a:not(.button) { color:inherit; text-underline-offset:.3em; }
.public-about .about-contact address small { display:block; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; }
.public-about .about-contact .desk-form { background:var(--paper); border-radius:1rem; }

/* B2B keeps the same identity, with more precise technical print details. */
.public-b2b .hero__facts { gap:1rem; }
.public-b2b .hero__facts > div { position:relative; border-top:1px solid #aa886866; padding-top:1.1rem; }
.public-b2b .hero__facts dt { display:grid; place-items:center; width:2rem; height:2rem; border:1px solid #ba302948; border-radius:50%; background:#efe1cd; color:var(--red-dark); font-size:1rem; line-height:1; }
.public-b2b .system-card__number { padding:.3rem .55rem; border:1px solid currentColor; border-radius:.35rem; opacity:.7; }
.public-b2b .system-card__note { border-top-style:dashed; }
.public-b2b .service-story { border:1px solid #a68e682e; }
.public-b2b .service-story figcaption { background:var(--ink); color:var(--paper); }
.public-b2b .service-story figcaption > small { color:var(--amber); }
.public-b2b .steps { gap:1rem; border-top:0; }
.public-b2b .steps li { position:relative; padding:1.6rem; border:1px solid #a88b653f; border-radius:1rem; background:#eee5d5; }
.public-b2b .steps li:nth-child(even) { background:#e5e7da; }
.public-b2b .steps li > span { display:block; font-size:3.75rem; line-height:1; color:var(--red-dark); }
.public-b2b .steps h3 { margin-top:1.7rem; font-size:1.35rem; text-transform:none; }

@media (min-width:55.01rem) {
  .public-home .main-menu-story__tastes a { min-height:8.25rem; }
}
@media (max-width:65rem) {
  .public-home .main-menu-story { gap:2rem; }
  .public-home .main-menu-story__tastes a { grid-template-columns:4rem minmax(0,1fr) auto; gap:.8rem; padding:1rem; }
  .public-home .main-menu-story__tastes .coffee-doodle { width:4rem; height:4rem; font-size:3.1rem; }
  .public-about .about-story { gap:1.5rem 2rem; }
  .public-about .about-visit { grid-template-columns:1fr; }
  .public-about .about-principles article { padding-inline:1.5rem; }
}
@media (max-width:55rem) {
  .public-home .main-menu-story,.public-about .about-story { grid-template-columns:minmax(0,1fr); }
  .public-home .main-proof { grid-template-columns:minmax(0,1fr); }
  .public-home .coffee-pause > img { height:22rem; min-height:0; }
  .public-home .main-proof__label { display:grid; grid-template-columns:minmax(0,1fr) 6rem; gap:1rem; }
  .public-home .main-proof__label > .coffee-doodle { grid-column:2; grid-row:1/3; margin:0; width:6rem; height:6rem; font-size:5rem; }
  .public-home .main-proof__label small { max-width:100%; }
  .public-about .about-story__photo { min-height:0; }
  .about-story__photo > img { height:21rem; }
  .public-about .about-principles article,.public-about .about-principles article:first-child,.public-about .about-principles article:last-child { padding:1.75rem 0; }
  .public-about .about-principles .coffee-doodle { position:absolute; top:1.4rem; right:0; width:4rem; height:4rem; margin:0; font-size:3.1rem; }
  .public-about .about-principles h3 { margin-top:2rem; padding-right:4rem; }
  .public-about .about-principles p { max-width:40rem; }
  .public-about .about-principles { padding-block:1rem; }
}
@media (max-width:35rem) {
  .public-home .main-menu-story__tastes a { grid-template-columns:3.75rem minmax(0,1fr) 1.5rem; padding:1rem .85rem; gap:.75rem; }
  .public-home .main-menu-story__tastes .coffee-doodle { width:3.75rem; height:3.75rem; font-size:3rem; }
  .public-home .main-menu-story__tastes a > i { width:1.5rem; height:1.5rem; font-size:.8rem; }
  .public-home .main-menu-story__tastes strong { font-size:.72rem; line-height:1.4; }
  .taste-notebook__heading { flex-wrap:wrap; gap:.5rem; }
  .public-home .main-proof__grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
  .public-home .main-proof__grid article { padding:1rem; min-height:10rem; }
  .public-home .main-proof__grid strong { font-size:1.03rem; line-height:1.35; }
  .public-home .main-proof__grid .coffee-doodle { width:2.75rem; height:2.75rem; right:.7rem; font-size:2.2rem; }
  .public-home .main-proof__label { padding:1.5rem; }
  .coffee-pause__caption { gap:.75rem; margin-bottom:1rem; }
  .coffee-pause__caption .editorial-note { font-size:1.6rem; }
  .fox-stage__print > .coffee-doodle { width:2.75rem; height:2.75rem; right:.7rem; top:.9rem; font-size:2.2rem; }
  .menu-page .product-card__meta > span { padding:.25rem .5rem; }
  .menu-page .choice-guide__steps { padding-inline:1.25rem; }
  .public-about .about-story__body > p { font-size:1rem; }
  .public-about .fox-inline img { width:4rem; height:4rem; }
  .public-about .fox-inline p { font-size:1.6rem; }
  .about-story__photo > img { height:18rem; }
  .public-b2b .steps li,.public-b2b .steps li:nth-child(2) { padding:1.4rem; border:1px solid #a88b653f; }
}
@media (max-width:48rem) {
  .public-b2b .hero__facts > div { column-gap:.85rem; align-items:center; }
  .public-b2b .hero__facts dt { margin-bottom:0; }
}
@media (prefers-reduced-motion:no-preference) {
  .main-menu-story__tastes .coffee-doodle { transition:transform .25s ease; }
  .main-menu-story__tastes a:hover .coffee-doodle { transform:rotate(-7deg) translateY(-2px); }
}

/* Solid offset shadows are part of the brand, like the mark in the header. */
.public-site { --public-card-depth:6px; --public-card-lift:3px; --public-card-shadow:var(--red); }
.public-home .main-menu-story__tastes a,
.public-home .main-proof__label,
.public-home .main-proof__grid article,
.public-home .coffee-pause,
.public-home .fox-stage::before,
.public-site .product-grid .product-card,
.public-b2b .system-card,
.public-b2b .steps li,
.public-b2b .hero__visual,
.public-b2b .service-story,
.public-b2b .calculator-story,
.public-about .about-hero figure > img,
.public-about .about-story__photo > img,
.public-about #documents .desk-panel,
.public-about .about-contact .desk-form {
  box-shadow:var(--public-card-depth) var(--public-card-depth) 0 var(--public-card-shadow);
}
.public-home .main-proof__label,
.public-b2b .system-card--red { --public-card-shadow:var(--ink); }
.public-home .main-menu-story__tastes a:is(:hover,:focus-visible) { transform:none; }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .public-home .main-menu-story__tastes a,
  .public-site .product-grid .product-card { transition:transform .18s ease,box-shadow .18s ease,background .18s ease; }
  .public-home .main-menu-story__tastes a:is(:hover,:focus-visible),
  .public-site .product-grid .product-card:hover {
    transform:translate(calc(-1 * var(--public-card-lift)),calc(-1 * var(--public-card-lift)));
    box-shadow:calc(var(--public-card-depth) + var(--public-card-lift)) calc(var(--public-card-depth) + var(--public-card-lift)) 0 var(--public-card-shadow);
  }
}
@media (max-width:48rem) { .public-site { --public-card-depth:4px; --public-card-lift:2px; } }
