/* canamediterranean.com
 *
 * Same cream / olive / brass as the boards and the printed menus — one brand,
 * three surfaces. Menu content is rendered from data/menu.json, so a price
 * only ever gets changed in one place.
 */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 76px; }

body {
  /* The grain tiles under everything. Without it the cream is a flat digital
   * field; with it the page reads as stock that was printed on. */
  background-color: var(--paper);
  background-image: url('../assets/grain.svg');
  background-repeat: repeat;
  color: var(--ink);
  font-family: var(--serif-text);
  font-size: 19px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

.skip {
  position: absolute;
  left: -9999px;
  background: var(--green);
  color: var(--paper);
  padding: 12px 18px;
  z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }

.eyebrow {
  font-family: var(--serif-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 14px;
}

.btn {
  display: inline-block;
  font-family: var(--serif-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  text-transform: uppercase;
  padding: 13px 26px;
  text-decoration: none;
  border: 1px solid currentColor;
  transition: background-color .18s, color .18s;
}

.btn-solid { background: var(--green); border-color: var(--green); color: var(--paper); }
.btn-solid:hover { background: #142418; }

.btn-ghost { color: var(--green); }
.btn-ghost:hover { background: var(--green); color: var(--paper); }

/* ---------- announcement ---------- */

.announce[hidden] { display: none; }

.announce {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--green);
  color: var(--paper);
  padding: 11px 20px;
  text-align: center;
}

.announce p {
  font-family: var(--serif-display);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  text-transform: uppercase;
}

.announce strong { font-weight: 600; }
.announce span:not(.announce-star) { color: #cbb79a; font-weight: 400; }
.announce span:not(.announce-star):not(:empty)::before { content: ' — '; }

.announce-star {
  flex: none;
  width: 11px;
  height: 11px;
  background-color: var(--brass);
  -webkit-mask: url('../assets/star.svg') center / contain no-repeat;
  mask: url('../assets/star.svg') center / contain no-repeat;
}

/* The nav sticks below the announcement rather than over it. */
.has-announce .nav { top: 0; }

@media (max-width: 620px) {
  .announce { gap: 11px; padding: 9px 12px; }
  .announce p { font-size: 10.5px; letter-spacing: 0.1em; }
  .announce span:not(.announce-star) { display: block; }
  .announce span:not(.announce-star):not(:empty)::before { content: none; }
}

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 16px 40px;
  background: rgba(246, 241, 228, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--panel-edge);
}

.nav-brand {
  font-family: var(--serif-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: var(--green);
  text-decoration: none;
}

.nav-links { display: flex; gap: 28px; margin-left: auto; }

.nav-links a {
  font-family: var(--serif-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.nav-links a:hover { border-bottom-color: var(--brass); }

.nav-order { padding: 10px 20px; font-size: 11px; }

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

.hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 92px 24px 76px;
}

/* The olive branches that frame the bag's label. Kept well back so they read
 * as paper the type sits on, not as decoration competing with it.
 *
 * Masked rather than placed in an <img>: currentColor inside an image can't
 * see this page's CSS, so an <img> silently renders the branch black and the
 * opacity just makes it grey. The mask takes the shape, the background takes
 * the colour, and the palette actually applies. */
.hero-branch {
  position: absolute;
  top: 50%;
  width: clamp(150px, 19vw, 310px);
  aspect-ratio: 300 / 500;
  background-color: var(--olive);
  -webkit-mask: url('../assets/olive-branch.svg') center / contain no-repeat;
  mask: url('../assets/olive-branch.svg') center / contain no-repeat;
  opacity: 0.34;
  transform: translateY(-50%);
  pointer-events: none;
}

.hero-branch-l { left: clamp(-40px, 2vw, 60px); }
.hero-branch-r { right: clamp(-40px, 2vw, 60px); transform: translateY(-50%) scaleX(-1); }

/* Lift the content above the decoration. This must exclude every decorative
 * element — it previously named only .hero-branch, and its specificity then
 * reset .hero-coast from absolute back to relative, which took the coastline
 * out of the hero entirely without any visible error. */
.hero > *:not(.hero-deco) { position: relative; }

.hero-script {
  font-family: var(--script);
  margin: 20px auto 0;
  max-width: 24em;
  font-size: clamp(25px, 3.1vw, 34px);
  line-height: 1.45;
  color: var(--brass-lit);
}

/* The bag's ORIGIN / ROAST / PROFILE table, which does a lot of work for very
 * little ink. */
.spec {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  margin: 30px auto 24px;
  max-width: 560px;
  border-block: 1px solid rgba(233, 226, 208, 0.26);
  padding: 18px 0;
}

.spec > div + div { border-left: 1px solid rgba(233, 226, 208, 0.22); }

.spec dt {
  font-family: var(--serif-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: var(--brass-on-dark);
  margin-bottom: 7px;
}

.spec dd { font-size: 17px; color: #e4dcc8; line-height: 1.35; padding: 0 10px; }

@media (max-width: 700px) {
  .spec { grid-auto-flow: row; max-width: 300px; }
  .spec > div + div { border-left: 0; border-top: 1px solid rgba(233, 226, 208, 0.22); padding-top: 14px; margin-top: 14px; }
  .hero-branch { opacity: 0.18; width: 130px; }
}

/* The mark from the coffee bag. Drawn from a photograph of the bag, so it is
 * a stand-in until the printer sends the vector artwork. */
.hero-mark {
  display: block;
  width: clamp(104px, 11vw, 150px);
  height: auto;
  margin: 0 auto 4px;
}

/* The engraved coastline that sits under the bag's label — a horizon the type
 * rests on, not a picture. */
.hero-coast {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(1200px, 108%);
  aspect-ratio: 1200 / 300;
  transform: translateX(-50%);
  background-color: var(--brass);
  -webkit-mask: url('../assets/coastline.svg') bottom center / 100% auto no-repeat;
  mask: url('../assets/coastline.svg') bottom center / 100% auto no-repeat;
  opacity: 0.18;
  pointer-events: none;
}

/* The four-pointed star the bag uses to part one thought from the next. */
.rule-star {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 34px auto 0;
  max-width: 320px;
  color: var(--brass);
}

.rule-star span { flex: 1 1 auto; height: 1px; background: currentColor; opacity: .42; }

.rule-star i {
  flex: none;
  width: 13px;
  height: 13px;
  background-color: currentColor;
  -webkit-mask: url('../assets/star.svg') center / contain no-repeat;
  mask: url('../assets/star.svg') center / contain no-repeat;
}

.hero-brand {
  font-family: var(--serif-display);
  font-size: clamp(56px, 11vw, 116px);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  line-height: 1;
  color: var(--green);
}

.hero-tagline {
  margin-top: 14px;
  font-family: var(--serif-display);
  font-size: clamp(9px, 1.5vw, 12px);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--brass);
}

.hero-line {
  margin-top: 44px;
  font-family: var(--serif-display);
  font-size: clamp(32px, 5.2vw, 56px);
  font-weight: 400;
  line-height: 1.16;
  color: var(--green);
}
.hero-line em { font-style: italic; color: var(--brass-lit); }

.hero-sub {
  margin: 18px auto 0;
  max-width: 30em;
  font-size: 20px;
  font-style: italic;
  color: var(--ink-soft);
}

/* The founding line their previous site carried, kept quiet. */
.hero-est {
  margin-top: 22px;
  font-family: var(--serif-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hero-est:empty { display: none; }

.hero-actions { margin-top: 28px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- facts strip ---------- */

.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid var(--rule);
  background-color: var(--panel);
  background-image: url('../assets/grain.svg');
}

.facts div {
  padding: 22px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.facts div + div { border-left: 0; }

/* The star from the bag doing the separating, rather than a box rule. */
.facts div + div::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 9px;
  height: 9px;
  transform: translate(-50%, -50%);
  background-color: var(--brass);
  -webkit-mask: url('../assets/star.svg') center / contain no-repeat;
  mask: url('../assets/star.svg') center / contain no-repeat;
  opacity: .8;
}

.facts div { position: relative; }

.facts-label {
  font-family: var(--serif-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
}

.facts span:last-child { font-size: 17px; color: var(--ink); }

/* ---------- dark bands ---------- */

/* Rhythm, not a metronome: the hero breathes, the roastery is tighter, the
 * menu opens out again, the order call is compact. Equal padding everywhere is
 * what makes a page feel generated. */
.band {
  background-color: var(--green);
  background-image: url('../assets/grain.svg');
  color: var(--paper);
  padding: 104px 24px 96px;
}

.band .eyebrow { color: var(--brass-on-dark); }

.band-inner { max-width: 640px; margin: 0 auto; text-align: center; }

.band-title {
  font-family: var(--serif-display);
  font-size: clamp(30px, 4.6vw, 48px);
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 20px;
}

.band-copy { font-size: 19px; color: #ddd8c8; line-height: 1.6; }
.band-copy + .band-copy { margin-top: 14px; }
.band-copy-quiet { font-style: italic; color: #a9a894; font-size: 17px; }

.band-split { background-color: var(--green-mid); padding: 72px 24px 76px; position: relative; overflow: hidden; }

/* The mark, oversized and barely there, the way the previous site set the
 * logo into its green panel. */
.band-watermark {
  position: absolute;
  right: -3%;
  top: 50%;
  width: min(420px, 38%);
  aspect-ratio: 210 / 190;
  transform: translateY(-50%);
  background-color: var(--paper);
  -webkit-mask: url('../assets/cana-mark.svg') center / contain no-repeat;
  mask: url('../assets/cana-mark.svg') center / contain no-repeat;
  opacity: 0.06;
  pointer-events: none;
}

.band-split .band-inner { position: relative; }

.foot-social { display: flex; gap: 18px; margin-top: 14px; }
.foot-social a { color: #cbb79a; text-decoration: none; font-size: 15px; letter-spacing: .04em; }
.foot-social a:hover { color: var(--paper); }
.foot-social:empty { display: none; }

.order-links { margin-top: 28px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.order-links a {
  font-family: var(--serif-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 12px 24px;
  border: 1px solid #5d6b4e;
  color: var(--paper);
  text-decoration: none;
}
.order-links a:hover { background: var(--paper); color: var(--green); border-color: var(--paper); }

/* Not a button — there is nowhere to send them yet, so it reads as a line of
 * text rather than something that looks clickable and isn't. */
.order-links .pending {
  border: 0;
  padding: 0;
  font-family: var(--serif-text);
  font-size: 19px;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: #b9b6a4;
}

/* ---------- menu ---------- */

.menu { padding: 110px 24px 104px; max-width: 1180px; margin: 0 auto; }

.section-head { text-align: center; margin-bottom: 40px; }

.section-title {
  font-family: var(--serif-display);
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 400;
  color: var(--green);
  line-height: 1.15;
}

.section-note { margin-top: 12px; font-style: italic; color: var(--ink-soft); }

/* Set as a line of small caps with a rule beneath the current one, the way a
 * menu names its courses — not three outlined buttons, which is a web control
 * wearing a restaurant's clothes. */
.tabs {
  display: flex;
  gap: 40px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 52px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0;
}

.tab {
  position: relative;
  font-family: var(--serif-display);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  padding: 0 2px 16px;
  background: none;
  border: 0;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color .15s;
}

.tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--brass);
  opacity: 0;
  transition: opacity .15s;
}

.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--green); font-weight: 600; }
.tab[aria-selected="true"]::after { opacity: 1; }

@media (max-width: 700px) { .tabs { gap: 22px; } .tab { font-size: 11px; letter-spacing: .12em; } }

.menu-body { columns: 2; column-gap: 56px; }

.m-section { break-inside: avoid; margin-bottom: 34px; }

.m-name {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--serif-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 12px;
}
.m-name::before, .m-name::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--rule); }

.m-note { text-align: center; font-style: italic; color: var(--ink-soft); font-size: 16px; margin: -6px 0 12px; }

.m-item { margin-bottom: 11px; break-inside: avoid; }

.m-line { display: flex; align-items: baseline; gap: 8px; }

.m-item-name { font-weight: 500; }

.m-dots { flex: 1 1 auto; border-bottom: 1px dotted var(--panel-edge); transform: translateY(-4px); }

.m-price {
  font-weight: 600;
  color: var(--brass-lit);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

.m-desc { font-size: 16.5px; font-style: italic; color: var(--ink-soft); line-height: 1.35; }

.m-sizes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(var(--cols, 3), 62px);
  gap: 8px;
  align-items: baseline;
}

.m-sizehead {
  font-family: var(--serif-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  border-bottom: 1px solid var(--panel-edge);
  padding-bottom: 3px;
  margin-bottom: 8px;
}
.m-sizehead span { text-align: right; }
.m-sizes .m-price { text-align: right; }

/* ---------- photography ---------- */

/* A band of plated dishes, as the previous site had between the menu and the
 * order call. Hidden entirely until there are real photographs — an empty grid
 * of placeholders is worse than no grid. */
.gallery[hidden] { display: none; }
.gallery { padding: 0; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--panel-edge);
}

.gallery-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

@media (max-width: 860px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- visit ---------- */

.visit { padding: 94px 24px 104px; background: var(--panel); border-top: 1px solid var(--panel-edge); }

.visit-inner {
  max-width: 940px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: start;
}

.visit-address { margin-top: 14px; font-size: 19px; color: var(--ink-soft); white-space: pre-line; line-height: 1.6; }
.visit-actions { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }

.hours { width: 100%; border-collapse: collapse; margin-top: 4px; }
.hours td { padding: 9px 0; border-bottom: 1px solid var(--panel-edge); font-size: 17px; }
.hours td:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.hours tr.today td { color: var(--green); font-weight: 600; }
.hours tr.today td:last-child { color: var(--brass-lit); }
.hours td.closed { font-style: italic; }

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

.foot { background: var(--green); color: #d8d4c4; padding: 64px 40px 28px; }

.foot-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
}

.foot .eyebrow { color: var(--brass-lit); }

.foot-brand {
  font-family: var(--serif-display);
  font-size: 26px;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: var(--paper);
}

.foot-tag { margin-top: 12px; font-size: 19px; color: var(--paper); line-height: 1.4; }
.foot-city { margin-top: 10px; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #9a9a86; }

.foot-links { list-style: none; display: grid; gap: 9px; }
.foot-links a { color: #d8d4c4; text-decoration: none; font-size: 17px; }
.foot-links a:hover { color: var(--paper); }

.foot-contact { white-space: pre-line; font-size: 17px; line-height: 1.6; }

.foot-legal {
  max-width: 1100px;
  margin: 48px auto 0;
  padding-top: 20px;
  border-top: 1px solid #2e4231;
  font-size: 14px;
  color: #a8a893;
}

/* ---------- narrow ---------- */

@media (max-width: 860px) {
  body { font-size: 18px; }
  .nav { padding: 12px 20px; gap: 16px; }
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 11px; }
  .menu-body { columns: 1; }
  .visit-inner, .foot-inner { grid-template-columns: 1fr; gap: 36px; }
  .facts { grid-template-columns: 1fr; }
  .facts div + div { border-left: none; border-top: 1px solid var(--panel-edge); }
  .hero { padding: 56px 20px 48px; }
}

@media (max-width: 560px) {
  .nav-links { display: none; }
}

/* ---------- closing panel ---------- */

/* One deep-olive panel carrying the pitch, the address, the hours and the
 * order link, with the mark ghosted into an arch on the right — the layout
 * the previous site closed on. */
.close {
  background-color: var(--closing);
  background-image: url('../assets/grain.svg');
  color: #e8e4d4;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: stretch;
}

.close-main { padding: 88px clamp(24px, 5vw, 76px) 84px; max-width: 620px; justify-self: end; width: 100%; }
.close .eyebrow { color: #cfc596; }

.close-title {
  font-family: var(--serif-display);
  font-size: clamp(32px, 4.4vw, 50px);
  font-weight: 400;
  line-height: 1.1;
  white-space: pre-line;
  margin-bottom: 18px;
}

.close-copy { font-size: 18px; line-height: 1.6; color: #cfcbb6; max-width: 46ch; }

.close-visit { margin-top: 40px; }
.close-street { font-size: 26px; color: #f2eee0; }
.close .visit-address { margin-top: 6px; font-size: 17px; color: #b8b49f; white-space: pre-line; }

/* Two compact columns rather than seven full-width rows — the hours are a
 * reference, not the point of the panel. */
.hours-olive { margin-top: 30px; border-collapse: collapse; width: 100%; max-width: 440px; }
.hours-olive td { padding: 7px 0; border-bottom: 1px solid var(--closing-line); font-size: 15px; color: #cfcbb6; }
/* The base .hours rule paints this column with --ink-soft for the light
 * page; at equal specificity it would otherwise leave dark grey text on the
 * olive. Colour has to be restated here, not just alignment. */
.hours-olive td:last-child { text-align: right; font-variant-numeric: tabular-nums; color: #cfcbb6; }
.hours-olive tr.today td { color: #f2eee0; font-weight: 600; }
.hours-olive tr.today td:last-child { color: #e0c98a; }
.hours-olive td.closed { font-style: italic; }

.close-actions { margin-top: 28px; display: flex; gap: 10px; flex-wrap: wrap; }

.btn-onolive {
  border: 1px solid var(--closing-line);
  color: #e8e4d4;
  background: none;
}
.btn-onolive:hover { background: #e8e4d4; color: var(--closing); border-color: #e8e4d4; }

.close .order-links { margin-top: 18px; justify-content: flex-start; }
.close .order-links a { border-color: var(--closing-line); }
.close .order-links a:hover { background: #e8e4d4; color: var(--closing); border-color: #e8e4d4; }
.close .order-links .pending { color: #b8b49f; }

.close .foot-social { margin-top: 26px; }
.close .foot-social a { color: #c9c08e; }
.close .foot-social a:hover { color: #f2eee0; }

/* The arch is drawn, not an image — a hairline round-topped frame with the
 * mark set inside it at low contrast. */
.close-arch {
  position: relative;
  /* A shade lighter than the panel, the way the previous site set its arch
   * off — not darker, which reads as a separate block. */
  background: var(--closing-arch);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 40px;
}

.close-arch::before {
  content: '';
  position: absolute;
  inset: 46px clamp(28px, 7%, 84px);
  border: 1px solid rgba(232, 228, 212, 0.22);
  border-radius: 50vw 50vw 2px 2px;
}

.close-mark {
  width: min(280px, 62%);
  aspect-ratio: 210 / 190;
  background-color: #e8e4d4;
  -webkit-mask: url('../assets/cana-mark.svg') center / contain no-repeat;
  mask: url('../assets/cana-mark.svg') center / contain no-repeat;
  opacity: 0.17;
}

@media (max-width: 860px) {
  .close { grid-template-columns: 1fr; }
  .close-main { justify-self: stretch; max-width: none; padding-bottom: 64px; }
  .close-arch { padding: 56px 24px 64px; }
  .close-mark { width: min(200px, 48%); }
}

/* ---------- the roastery band's bean field ---------- */

/* The previous site floated photographed beans around a warm glow here. The
 * beans are drawn instead — the same engraved treatment as the branch and the
 * coastline — because generated coffee photography is exactly what the shop
 * objected to. The glow is a gradient, not an image. */
.band { position: relative; overflow: hidden; }
.band-inner { position: relative; z-index: 1; }

.band-glow {
  position: absolute;
  left: 50%; top: 50%;
  width: min(900px, 90%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(217, 128, 47, 0.22) 0%,
    rgba(217, 128, 47, 0.10) 38%,
    rgba(217, 128, 47, 0) 68%);
  pointer-events: none;
}

.band-beans { position: absolute; inset: 0; pointer-events: none; }

.band-beans i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  aspect-ratio: 100 / 68;
  transform: translate(-50%, -50%);
  opacity: var(--o);
}

/* The bean itself is an inner layer: the outer element carries the scroll
 * parallax, this one carries the slow drift the original site's beans had,
 * so the two transforms never fight. Warm, not paper — at these opacities a
 * cream fill goes grey against the dark and reads as pebbles. */
.band-beans i::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: #c98a52;
  -webkit-mask: url('../assets/bean.svg') center / contain no-repeat;
  mask: url('../assets/bean.svg') center / contain no-repeat;
  transform: rotate(var(--r));
  animation: bean-drift var(--dur, 18s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

/* A long, lazy arc — up and across and a few degrees of turn, then back.
 * Durations run 16 to 26 seconds and every bean starts at a different point
 * in its cycle, so no two ever move together. */
@keyframes bean-drift {
  0%   { transform: translate(0, 0)        rotate(var(--r)); }
  33%  { transform: translate(9px, -16px)  rotate(calc(var(--r) + 6deg)); }
  66%  { transform: translate(-7px, -9px)  rotate(calc(var(--r) - 4deg)); }
  100% { transform: translate(0, 0)        rotate(var(--r)); }
}
@media (prefers-reduced-motion: reduce) { .band-beans i::before { animation: none; } }

/* At phone width the copy runs the full column, so the beans are pulled back
 * to the edges rather than sitting behind the text. */
@media (max-width: 720px) {
  .band-beans i { opacity: calc(var(--o) * 0.55); }
}

/* Single-serving drink in a by-size section — the price spans the size
 * columns rather than sitting under one of them. */
.m-line.m-sizes .m-price-one { grid-column: 2 / -1; text-align: right; }

/* The bag prints "ETHICALLY SOURCED · SMALL BATCH ROASTED" on a hairline
 * under the spec row; the band repeats it in the same register. */
.seal {
  margin-top: 26px;
  font-family: var(--serif-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-on-dark);
}
.seal:empty { display: none; }

/* Shop credit on one line with the copyright at desk width, stacked on a
 * phone rather than squeezed. */
.foot-legal { display: flex; flex-wrap: wrap; gap: 6px 28px; justify-content: space-between; }
.foot-credit a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.foot-credit a:hover { color: var(--paper); }

/* ---------- the old page's layout ---------- */

/* Stacked CA / NA monogram, as the old nav and footer set it. */
.mono { display: inline-grid; line-height: 0.92; font-family: var(--serif-display); font-weight: 500; letter-spacing: 0.12em; text-indent: 0.12em; }

/* The stacked monogram carries the star in its C as well — it is the same
 * mark, just set on two lines. The C is its own span so the ornament has
 * something to sit inside. */
.mono .wm-c { position: relative; display: inline-block; font-style: normal; }
.mono .wm-c::after {
  content: '';
  position: absolute;
  /* A touch larger than on the full wordmark: the monogram is set small, and
   * at nav size a 0.22em star disappears. */
  left: 0.23em;
  top: 0.415em;
  width: 0.26em;
  height: 0.26em;
  background-color: var(--brass);
  -webkit-mask: url('../assets/star.svg') center / contain no-repeat;
  mask: url('../assets/star.svg') center / contain no-repeat;
}
.nav-brand .mono { font-size: 15px; }
.foot-brand .mono { font-size: 22px; }

/* Pill buttons. */
.btn { border-radius: 999px; padding-left: 26px; padding-right: 26px; }

/* "Established 2017 by Adel", the name in script. */
.hero-by { font-family: var(--script); font-style: normal; text-transform: none; letter-spacing: 0; font-size: 1.9em; color: var(--brass); vertical-align: -0.12em; }

/* The old roastery band was near-black, warm at the centre, and tall enough
 * to be a scene rather than a strip. The green stays for the closing panel. */
.band#roastery {
  background-color: #1c1815;
  min-height: 82vh;
  display: grid;
  align-content: center;
  padding-top: 120px;
  padding-bottom: 120px;
}
.band#roastery .band-glow { width: min(1100px, 100%); }
.band#roastery .band-beans i { opacity: calc(var(--o) * 1.35); }

/* ---------- the arch, as the owner's artwork sets it ---------- */

/* Mark above, wordmark below, both in the same pale sage, inside the
 * hairline arch. Opacity lifted from the ghost it was to the artwork's. */
.close-arch { flex-direction: column; gap: 22px; }
.close-mark { opacity: 0.55; background-color: #c9cfb3; width: min(240px, 54%); }
.close-wm {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: clamp(36px, 4.2vw, 56px);
  color: #c9cfb3;
  opacity: 0.85;
  line-height: 1;
}
/* the ornaments take the same sage as the letters inside the arch */
.close-wm .wm-c::after, .close-wm .wm-a::after { background-color: #c9cfb3; }
.close-arch::before { border-color: rgba(201, 207, 179, 0.45); }

/* ---------- the beans move with the page, not on a loop ---------- */

/* A looping bob is the tell of a generated page: everything floating in
 * sine waves. These beans instead sit at different depths and shift at
 * different rates as the page scrolls — the near ones more, the far ones
 * less — which reads as a scene with depth rather than decoration. site.js
 * writes --py; the transform reads it. Nothing moves while the page is
 * still. */
.band-beans i {
  --py: 0px;
  transform: translate(-50%, calc(-50% + var(--py)));
  will-change: transform;
}
.band-beans i:nth-child(1) { --depth: 0.22; }
.band-beans i:nth-child(2) { --depth: 0.09; }
.band-beans i:nth-child(3) { --depth: 0.05; }
.band-beans i:nth-child(4) { --depth: 0.16; }
.band-beans i:nth-child(5) { --depth: 0.26; }
.band-beans i:nth-child(6) { --depth: 0.07; }
.band-beans i:nth-child(7) { --depth: 0.04; }
@media (prefers-reduced-motion: reduce) { .band-beans i { --py: 0px !important; } }