/* Terra — First Crack Coffee Roasters.
   1970s expressive-maximalist design system. Shared tokens + components.
   All geometry (sunburst rays, curved arc, arch semicircles) is
   build-time computed — see scratch geometry script; no eyeballed path data. */

/* ---------- Fonts (self-hosted woff2, no CDN) ---------- */

@font-face {
  font-family: "Fraunces";
  src: url("./assets/fonts/fraunces-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("./assets/fonts/fraunces-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("./assets/fonts/dm-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("./assets/fonts/dm-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("./assets/fonts/dm-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  /* Sand ground family */
  --sand: #f3e7d0;
  --sand-deep: #ecd9b8;
  --sand-raise: #f8f0dd;
  /* Cocoa ink / dark bands */
  --cocoa: #3a2a1e;
  --cocoa-deep: #2c2015;
  --cocoa-soft: #4d3a2a;
  /* Accents */
  --burnt: #c85a2b;
  --burnt-deep: #a5461f;
  --ochre: #d9a441;
  --ochre-ink: #8a5e14;
  --avocado: #6b7a3a;
  --avocado-deep: #54622c;
  /* Text */
  --ink: #3a2a1e;
  --ink-soft: #5c4632;
  --on-dark: #f3e7d0;
  --on-dark-soft: #cbb490;
  --hairline: #dcc9a6;

  /* Radii */
  --r-pill: 9999px;
  --r-lg: 20px;

  /* Layout */
  --maxw: 1180px;
  --gutter: 28px;
  --pad-x: 24px;
}

/* ---------- Reset / base ---------- */

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

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

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; }

h1, h2, h3, h4, p { margin: 0; }

/* Branded focus ring */
:focus-visible {
  outline: 3px solid var(--burnt);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Typography ---------- */

.display-xl,
.display-l,
.display-m,
.display-s {
  font-family: "Fraunces", Georgia, serif;
  color: var(--ink);
  font-style: normal;
}

.display-xl {
  font-weight: 900;
  font-size: 88px;
  line-height: 0.98;
  letter-spacing: -0.02em;
}
.display-l {
  font-weight: 900;
  font-size: 60px;
  line-height: 1.02;
  letter-spacing: -0.015em;
}
.display-m {
  font-weight: 700;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.display-s {
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.lead {
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.title {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.4;
}
.body { font-size: 18px; line-height: 1.65; }
.meta {
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Eyebrow with tiny three-ray sun tick */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ochre-ink);
}
.eyebrow .tick { color: var(--burnt); flex: none; }
.eyebrow--on-dark { color: var(--ochre); }
.eyebrow--on-dark .tick { color: var(--ochre); }

/* Dark-band text helpers */
.on-dark { color: var(--on-dark); }
.on-dark .lead,
.lead--on-dark { color: var(--on-dark-soft); }

/* ---------- Layout ---------- */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.section { padding: 112px 0; }
.section--tight { padding: 72px 0; }

/* Band surfaces */
.band-sand { background: var(--sand); color: var(--ink); }
.band-sand-deep { background: var(--sand-deep); color: var(--ink); }
.band-cocoa { background: var(--cocoa); color: var(--on-dark); }
.band-cocoa-deep { background: var(--cocoa-deep); color: var(--on-dark); }
.band-burnt { background: var(--burnt); color: var(--sand); }

.band-cocoa .lead,
.band-cocoa-deep .lead { color: var(--on-dark-soft); }
.band-cocoa .display-xl,
.band-cocoa .display-l,
.band-cocoa .display-m,
.band-cocoa .display-s,
.band-cocoa-deep .display-m,
.band-cocoa-deep .display-s { color: var(--on-dark); }
.band-burnt .display-l,
.band-burnt .display-m,
.band-burnt .display-s { color: var(--sand); }
.band-burnt .lead { color: #f6ead2; }

.stack { display: flex; flex-direction: column; align-items: flex-start; }
.stack > * + * { margin-top: 20px; }
.stack--center { align-items: center; text-align: center; }

.measure { max-width: 60ch; }
.measure-sm { max-width: 46ch; }

.section-head { max-width: 720px; margin-bottom: 48px; }
.section-head .display-m { margin-top: 12px; }
.section-head .lead { margin-top: 16px; }

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--sand-raise);
  border-bottom: 1px solid var(--hairline);
}
.nav__inner {
  min-height: 72px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 20px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: "Fraunces", serif;
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.wordmark .sun-mark { color: var(--burnt); flex: none; }

.nav__links {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.nav__link {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  color: var(--ink);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  transition: background-color 120ms ease-out, color 120ms ease-out;
}
.nav__link:hover { background: var(--sand-deep); }
.nav__link[aria-current="page"] {
  background: var(--ochre);
  color: var(--cocoa);
}
.nav__cta { margin-left: 10px; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  padding: 14px 24px;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease-out, color 120ms ease-out,
    transform 120ms ease-out, border-color 120ms ease-out;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--burnt); color: var(--sand); }
.btn-primary:hover { background: var(--burnt-deep); }
.btn-primary:active { background: var(--burnt-deep); }

.btn-secondary {
  background: var(--sand);
  color: var(--cocoa);
  border-color: var(--cocoa);
}
.btn-secondary:hover { background: var(--sand-deep); }

/* On dark bands */
.band-cocoa .btn-secondary,
.band-cocoa-deep .btn-secondary,
.band-burnt .btn-secondary {
  background: var(--cocoa-soft);
  color: var(--on-dark);
  border-color: var(--cocoa-soft);
}
.band-cocoa .btn-secondary:hover,
.band-cocoa-deep .btn-secondary:hover,
.band-burnt .btn-secondary:hover { background: var(--cocoa); }

.actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Sun marks (inline SVG) ---------- */

.sun-mark { width: 24px; height: 24px; display: block; }
.sun-tick { width: 14px; height: 14px; display: block; }
.sun-hero { width: 100%; max-width: 520px; height: auto; display: block; }
.rays { fill: var(--burnt); }
.sun-disc { fill: var(--ochre); }

/* ---------- Curved headline ---------- */

.curve {
  width: 100%;
  max-width: 560px;
  height: auto;
  display: block;
  overflow: visible;
}
.curve text {
  font-family: "Fraunces", serif;
  font-weight: 900;
  font-size: 25px;
  letter-spacing: 0.005em;
  fill: var(--burnt-deep);
}

/* ---------- Hero ---------- */

.hero { padding: 84px 0 104px; position: relative; overflow: hidden; }
.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero__sun { margin-bottom: -18px; }
.hero__curve { margin-bottom: 6px; }
.hero .display-xl { max-width: 14ch; }
.hero__lead { margin-top: 20px; max-width: 54ch; }
.hero .actions { margin-top: 28px; justify-content: center; }
.hero__photo { margin-top: 56px; width: 100%; max-width: 560px; }

/* ---------- Arch-topped photo frame (exact semicircle top) ----------
   aspect-ratio fixes W:H = 4:5, so W/2 == 40% of H -> perfect semicircle. */

.photo {
  margin: 0;
  background: var(--sand-deep);
  border: 1px solid var(--hairline);
  padding: 6px;
  border-radius: 50% 50% calc(var(--r-lg) + 6px) calc(var(--r-lg) + 6px)
    / 40% 40% calc(var(--r-lg) + 6px) calc(var(--r-lg) + 6px);
}
.photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 50% 50% var(--r-lg) var(--r-lg) / 40% 40% var(--r-lg) var(--r-lg);
}
.photo--wide img { aspect-ratio: 5 / 6; }

/* ---------- Two-column editorial split ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.split--photo-right .split__text { order: 1; }
.split__narrow-photo { max-width: 420px; width: 100%; }

/* ---------- Origin cards ---------- */

.origins {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  align-items: start;
}

.origin {
  display: flex;
  flex-direction: column;
  transition: transform 120ms ease-out;
}
.origin:hover { transform: scale(1.02); }

/* arch image: exact semicircle top, square bottom (clamp trick, any height) */
.origin__arch {
  background: var(--sand-deep);
  border: 1px solid var(--hairline);
  border-bottom: 0;
  padding: 6px;
  border-radius: 9999px 9999px 0 0;
}
.origin__arch img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 9999px 9999px 0 0;
}
.origin__body {
  flex: 1;
  background: var(--sand-deep);
  border: 1px solid var(--hairline);
  border-top: 0;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: 22px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Two-class specificity so cards on the cocoa band keep dark text on their
   light bodies (beats `.band-cocoa .display-s`). */
.origin .origin__name { color: var(--ink); }
.origin__notes { color: var(--ink-soft); }
.origin__meta {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
  color: var(--ink-soft);
}

/* House origin (San Agustin on a dark band) — burnt arch trim, body stays
   light so the card reads against a cocoa band. The full cocoa-flip below is
   used on the beans grid where the ground is light. */
.origin--house .origin__arch {
  background: var(--burnt);
  border-color: var(--burnt-deep);
}

/* Featured (San Agustin) — cocoa flip, burnt arch trim */
.origin--featured .origin__arch {
  background: var(--burnt);
  border-color: var(--burnt-deep);
}
.origin--featured .origin__body {
  background: var(--cocoa);
  border-color: var(--cocoa-deep);
  color: var(--on-dark);
}
.origin--featured .origin__name { color: var(--on-dark); }
.origin--featured .origin__notes { color: var(--on-dark-soft); }
.origin--featured .origin__meta {
  color: var(--on-dark-soft);
  border-top-color: var(--cocoa-soft);
}

/* Arch trim follows the roast-level color map (light=ochre, dark=avocado);
   medium=burnt is the featured house card's burnt arch above. */
.origin--light .origin__arch { border-color: var(--ochre); }
.origin--dark .origin__arch { border-color: var(--avocado); }

/* Roast badge — fixed color map: light=ochre, medium=burnt, dark=avocado */
.roast-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: var(--r-pill);
}
.roast-badge--light { background: var(--ochre); color: var(--cocoa); }
.roast-badge--medium { background: var(--burnt); color: var(--sand); }
.roast-badge--dark { background: var(--avocado); color: var(--sand); }

.house-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ochre);
}

/* ---------- Brew tickets ---------- */

.tickets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
}
.ticket {
  position: relative;
  background: var(--sand-raise);
  border: 1px solid var(--hairline);
  border-radius: 28px 28px var(--r-lg) var(--r-lg);
  padding: 40px 30px 30px;
  margin-top: 14px;
}
.ticket__tab {
  position: absolute;
  top: -14px;
  left: 26px;
  background: var(--avocado);
  color: var(--sand);
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 8px 8px 0 0;
}
.ticket__figures {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 22px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--hairline);
}
.figure { display: flex; flex-direction: column; }
.figure__num {
  font-family: "Fraunces", serif;
  font-weight: 700;
  font-size: 46px;
  line-height: 1;
  color: var(--burnt);
  letter-spacing: -0.01em;
}
.figure__unit {
  margin-top: 6px;
  font-weight: 500;
  font-size: 14px;
  color: var(--ink-soft);
}
.ticket__rows { display: flex; flex-direction: column; gap: 12px; }
.ticket__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 8px;
}
.ticket__row .k {
  font-weight: 500;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.ticket__row .dots {
  border-bottom: 2px dotted var(--hairline);
  transform: translateY(-5px);
}
.ticket__row .v {
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}

/* ---------- Info panel ---------- */

.panel {
  background: var(--sand-deep);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 32px;
}
.panel + .panel { margin-top: var(--gutter); }
.info-list { display: flex; flex-direction: column; gap: 20px; }
.info-item .info-item__label {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ochre-ink);
  margin-bottom: 4px;
}
.info-item .info-item__value { font-size: 18px; color: var(--ink); }

/* ---------- Feature list (process / schedule steps) ---------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}
.feature {
  border-top: 2px solid var(--avocado);
  padding-top: 18px;
}
.feature__k {
  font-family: "Fraunces", serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--burnt);
  margin-bottom: 8px;
}
.feature__t { margin-bottom: 6px; }
.feature__d { color: var(--ink-soft); font-size: 16px; }
/* On the cocoa schedule band the caption needs a legible cream — the default
   sand-ground --ink-soft is unreadable on dark. AA-comfortable on cocoa. */
.band-cocoa .feature__d,
.band-cocoa-deep .feature__d { color: #d8c39c; }

/* Chips (roast-day notes) */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sand-raise);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
}
.chip .tick { color: var(--burnt); flex: none; }
.band-cocoa .chip,
.band-cocoa-deep .chip {
  background: var(--cocoa-soft);
  border-color: var(--cocoa-soft);
  color: var(--on-dark);
}

/* ---------- Sunburst stripe divider (hard-edged flat color) ---------- */

.divider {
  height: 10px;
  border: 0;
  margin: 0;
  background: repeating-linear-gradient(
    90deg,
    var(--burnt) 0 18px,
    var(--ochre) 18px 36px,
    var(--sand-deep) 36px 54px
  );
}

/* ---------- CTA band ---------- */

.cta-band { text-align: center; }
.cta-band .display-l { max-width: 20ch; margin: 0 auto; }
.cta-band .lead { max-width: 52ch; margin: 16px auto 0; }
.cta-band .actions { justify-content: center; margin-top: 30px; }

/* ---------- Footer ---------- */

.footer { background: var(--cocoa-deep); color: var(--on-dark); }
.footer__inner { padding: 64px 0 48px; }
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
}
.footer .wordmark { color: var(--on-dark); }
.footer .wordmark .sun-mark { color: var(--sand); }
.footer__blurb {
  margin-top: 16px;
  color: var(--on-dark-soft);
  max-width: 34ch;
  font-size: 16px;
}
.footer__col h3 {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ochre);
  margin-bottom: 14px;
}
.footer__col a {
  display: block;
  text-decoration: none;
  color: var(--on-dark-soft);
  padding: 5px 0;
  transition: color 120ms ease-out;
}
.footer__col a:hover { color: var(--sand); }
.footer__note {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--cocoa-soft);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--on-dark-soft);
  font-size: 14px;
}
.footer__note .accent { color: var(--ochre); }

/* ---------- Page header (beans / about) ---------- */

.page-head { padding: 88px 0 40px; text-align: center; }
.page-head .eyebrow { justify-content: center; }
.page-head .display-l { margin-top: 14px; }
.page-head .lead { margin: 18px auto 0; max-width: 60ch; }

/* ---------- Motion: hero sun rays sweep + curved headline fade ---------- */

.rays {
  transform-box: view-box;
  transform-origin: 260px 250px;
  animation: rays-in 1200ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes rays-in {
  from { transform: rotate(-9deg); opacity: 0; }
  to { transform: rotate(0deg); opacity: 1; }
}
.hero__curve { animation: curve-in 800ms ease-out 900ms both; }
@keyframes curve-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .rays { animation: none; transform: none; opacity: 1; }
  .hero__curve { animation: none; opacity: 1; transform: none; }
  .origin:hover { transform: none; }
  .btn:hover { transform: none; }
  * { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split--photo-right .split__text { order: 0; }
  .origins { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .tickets { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  body { font-size: 16px; line-height: 1.6; }
  .section { padding: 64px 0; }
  .section--tight { padding: 56px 0; }
  .hero { padding: 56px 0 72px; }

  .display-xl { font-size: 46px; line-height: 1.02; }
  .display-l { font-size: 36px; line-height: 1.05; }
  .display-m { font-size: 30px; line-height: 1.14; }
  .display-s { font-size: 24px; line-height: 1.25; }
  .lead { font-size: 19px; }
  .title { font-size: 18px; }
  .body { font-size: 16px; }
  .meta { font-size: 14px; }
  .eyebrow { font-size: 12px; }

  .figure__num { font-size: 40px; }
  .ticket__figures { gap: 28px; }
  .section-head { margin-bottom: 32px; }
  .footer__top { grid-template-columns: 1fr; gap: 28px; }
  .nav__links { gap: 4px; }
  .nav__link { padding: 8px 12px; }
  .nav__cta { padding: 10px 16px; }
  .panel { padding: 24px; }
}