/* archetype: letterpress — an old shop with a printed menu; centred titles, hairline
   rules, nothing rounded by default. Tuned to "ORYZO AI — darkroom product editorial"
   (see company-profile.md, Brand): the page runs dark on walnut, cream is the only
   text colour, bark brown is the one filled button surface, dividers are dashed
   hairlines, and ember rust never touches a button. This is what makes it read as
   ORYZO-dark rather than a sixth light letterpress client. */

:root { --color-cork: #40372e; } /* finer hairlines than driftwood --color-border, per tokens.css */

h1 { font-size: clamp(2.4rem, 7.5vw, 4rem); line-height: 1.08; letter-spacing: 0.01em; }
h2 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); letter-spacing: 0.01em; }
body { letter-spacing: 0.005em; }
.container { width: min(100% - 2.5rem, 56rem); }
.brand-name { letter-spacing: 0.18em; text-transform: uppercase; font-size: 1.15rem; }
.nav-list a { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; font-weight: 600; }
.site-header { background: var(--color-bg); backdrop-filter: none; }

/* Titles and eyebrows stay the printed-label centre; sentences never do (never
   centre-align body copy). The centred block still sits mid-page via margin-inline. */
.hero, .page-hero, .section-head { text-align: center; }
.hero { min-height: min(72vh, 42rem); align-items: center; }
.hero h1, .hero .lead { max-width: none; margin-inline: auto; }
.hero-meta, .hero .btn-row { justify-content: center; }
.eyebrow { letter-spacing: 0.22em; font-size: 0.72rem; }
.lead, .prose, .card-body p, .menu-item-desc, .quote, .contact-list, .visit-details,
.book-panel .prose, .legal-page .prose { text-align: left; }
/* Only centre the lead as a block where its heading is centred too. Applied
   everywhere, margin-inline:auto floats a left-aligned sentence into the middle of a
   left-aligned section, which is what it was doing under "Follow along". */
.hero .lead, .page-hero .lead, .section-head .lead { margin-inline: auto; }

/* Page-hero and the footer are the two places base.css paints --color-primary (here
   the light cream) as a background: taken back to the dark canvas so the page does
   not flip pale at the top and bottom of every inner page. */
.hero, .page-hero, .site-footer { background: var(--color-bg); color: var(--color-ink); }
.hero h1, .hero .lead { color: var(--color-ink); } /* base.css hardcodes white/translucent-white here; cream is the only text colour */
.hero .eyebrow { color: var(--color-accent); } /* base.css hardcodes translucent white; eyebrows stay rust everywhere else */
.hero-meta { color: var(--color-muted); } /* base.css hardcodes translucent white here too */
.page-hero { border-bottom: 1px solid var(--color-border); border-bottom-style: dashed; }
.page-hero .eyebrow { color: var(--color-accent); opacity: 1; } /* base.css forces this to inherit the (here cream) heading colour; eyebrows stay rust everywhere else */
.site-footer { border-top: 1px solid var(--color-border); border-top-style: dashed; }
.site-footer .socials a { border-color: var(--color-border); color: var(--color-ink); background: transparent; }
.footer-bottom { border-top: 1px solid var(--color-border); border-top-style: dashed; opacity: 1; }
.footer-bottom a[rel~="nofollow"] { color: var(--color-accent); } /* ember: credit lines and the studio link only */

/* Buttons: bark brown is the single filled surface; rust never fills one. Ghost pill
   22.5px, filled pill 36px, per the reference. */
.btn, .nav-toggle, .card, .menu-note, .book-panel, .map-embed, .map-facade-inner, .status-pill, .gallery img { border-radius: var(--radius-sm); }
.btn { background: transparent; border: 1px solid var(--color-ink); color: var(--color-ink); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 600; padding: 0.9rem 1.6rem; border-radius: 22.5px; }
.btn:hover { transform: none; background: color-mix(in srgb, var(--color-ink) 8%, transparent); }
.btn-ghost { border-color: var(--color-ink); color: var(--color-ink); }
.hero .btn { border-color: var(--color-ink); color: var(--color-ink); }
.btn-primary { background: var(--color-surface); color: var(--color-ink); border-color: transparent; border-radius: 36px; }
.btn-primary:hover { background: var(--color-surface); } /* .btn:hover's tint would otherwise win on specificity and show through */
.nav-list a.nav-cta { background: var(--color-surface); color: var(--color-ink); } /* dormant while book.url is empty; kept off rust regardless */
.card, .status-pill { border-radius: var(--radius); }
.status-pill { border-radius: 999px; }
.card { border: 0; box-shadow: none; } /* no drop shadows anywhere — depth is the bark-brown fill alone */
.menu-item-desc, .quote { font-style: italic; }
/* One filled button per section is the rule; the visit/contact map panel already has
   its own "Get directions" filled action, so its "Show map" button is demoted to
   ghost styling rather than doubling the filled surface. */
.map-facade .btn-primary { background: transparent; border: 1px solid var(--color-ink); color: var(--color-ink); border-radius: 22.5px; }
.map-facade-inner svg { fill: var(--color-ink); } /* rust fails 3:1 on bark brown; cream carries the icon instead */

/* Dashed hairlines: driftwood for section breaks, cork for finer rows. */
.section, .section + .section { border-top-color: var(--color-border); border-top-style: dashed; }
.hours-table th, .hours-table td, .legal-page th, .legal-page td { border-bottom-color: var(--color-cork); border-bottom-style: dashed; }
.menu-section h3 { text-align: center; text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.95rem; border-bottom: 0; }
.menu-section h3::after { content: ""; display: block; width: 3rem; height: 2px; margin: 0.6rem auto 0; background-image: repeating-linear-gradient(90deg, var(--color-accent) 0 6px, transparent 6px 12px); background-size: 200% 100%; }
.menu-item { border-bottom: 1px dashed var(--color-cork); padding: 0.65rem 0; }
.menu-item-price:empty { display: none; }

/* Status pill: base.css hardcodes #1f7a3f/#9b3b2a, both under 3:1 on the pill's own
   bark-brown fill. These read 6.6:1 / 5.4:1 there and stay warm, not traffic-light. */
.status-pill.is-open { color: #6fbf7f; }
.status-pill.is-closed { color: #e2836a; }

/* Motion, translated from oryzo.ai's own measured behaviour (see company-profile.md):
   opacity 3s ease for slow reveals, filter transitions rather than movement, and an
   animated dashed stroke. Everything sits behind no-preference; without it every
   element above is already fully visible and static. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes emerge { from { opacity: 0; } to { opacity: 1; } }
  .page-hero, .hero::after { animation: emerge 3s ease both; }
  @keyframes dash-travel { to { background-position: -24px 0; } }
  .menu-section h3::after { animation: dash-travel 3s linear infinite; }
  .card, .btn-primary { transition: filter 0.5s ease; }
  .card:hover { filter: brightness(1.15); }
  .menu-section:last-child .menu-item { transition: background 0.3s ease, filter 0.5s ease; }
  .menu-section:last-child .menu-item:hover { background: color-mix(in srgb, var(--color-surface) 55%, transparent); filter: brightness(1.2); }
  /* Anticipation easing, reserved for the one filled surface in the system. */
  .btn-primary { transition: transform 0.3s cubic-bezier(.3,0,.66,-.3), filter 0.5s ease; }
  .btn-primary:hover { transform: translateY(-2px); filter: brightness(1.15); }
  .site-header { will-change: background-color; }
}

/* No photographs ship with this build (see company-profile.md, Gaps): image
   generation is unavailable and there is no real roastery to photograph. These
   collapse the reserved image tracks so an empty src leaves no hole. */
.hero-media:has(img:not([src])) { display: none; }
.feature:has(img:not([src])) { grid-template-columns: 1fr; }
.feature:has(img:not([src])) img { display: none; }
.feature:has(img:not([src])) > :not(img) { max-width: 48rem; }

/* The announcement bar is dormant on this build (announcement.text is empty) but it is
   one field in the admin away from being live, and base.css paints it
   --color-accent on --color-on-accent, which here is cream on rust: 3.53:1, a pair
   this site's own contrast table rules out, and a filled rust surface, which the style
   allows nowhere. Restyled so it is right whenever the owner first uses it, rather than
   wrong the moment they do. */
.announcement {
  background: var(--color-surface);
  color: var(--color-ink);
  border-bottom: 1px dashed var(--color-border);
}
/* The link stays cream and takes an underline: rust on bark is 3.62:1, and rust is for
   credit lines anyway. Cream on bark is 12.81:1. */
.announcement a { color: var(--color-ink); text-decoration: underline; }