/* ============================================================
   AEK Coffee - light-mode specialty coffee showcase
   Design: GattyWorks. Palette warm-paper + espresso + a live
   green->ripe-red ripening spectrum. Fraunces / Archivo / Martian Mono.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

:root {
  --paper:   #f6efe2;
  --paper-2: #efe5d3;
  --paper-3: #e8dcc5;
  --ink:     #291a0e;
  --ink-2:   #6f4a2a;
  --ink-dim: #927053;
  --line:    rgba(41,26,14,0.14);
  --line-2:  rgba(41,26,14,0.24);
  --accent:  #c05122;   /* roast orange */
  --accent-2:#8f1d16;   /* ripe crimson */

  /* ripening spectrum */
  --r-green:  #6ea343;
  --r-lime:   #b6c24a;
  --r-gold:   #e6b93f;
  --r-orange: #e07a2c;
  --r-red:    #c33421;
  --r-ripe:   #8f1d16;

  --serif: "Fraunces", Georgia, serif;
  --sans:  "Archivo", system-ui, sans-serif;
  --mono:  "Martian Mono", ui-monospace, monospace;

  --wrap: 1200px;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }

/* paper grain + warm vignette on the whole page */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120% 80% at 80% -10%, rgba(224,122,44,0.10), transparent 60%),
    radial-gradient(90% 70% at 0% 110%, rgba(143,29,22,0.08), transparent 55%),
    var(--paper);
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

/* ---- reveal ---- */
.rise { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.rise.in { opacity: 1; transform: none; }
.rise.d1 { transition-delay: .09s; }
.rise.d2 { transition-delay: .18s; }
.rise.d3 { transition-delay: .27s; }

/* ---- type helpers ---- */
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); }
.eyebrow b { color: var(--accent); font-weight: 400; margin: 0 2px; }
.serif-it { font-family: var(--serif); font-style: italic; font-weight: 300; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent-2); }

h1, h2 { font-family: var(--serif); font-weight: 340; letter-spacing: -0.015em; line-height: 1.0; margin: 0; }

/* ===================== TICKER ===================== */
.ticker { position: relative; z-index: 30; background: var(--ink); color: var(--paper); overflow: hidden; border-bottom: 1px solid rgba(0,0,0,.3); }
.ticker .trk { display: inline-flex; white-space: nowrap; will-change: transform; animation: tick 34s linear infinite; }
.ticker span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; padding: 9px 22px; opacity: .82; }
.ticker i { color: var(--r-gold); font-style: normal; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ===================== HEADER ===================== */
.head { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3); border-bottom: 1px solid var(--line); }
.head .wrap { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand__mark { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--ink); display: inline-flex; align-items: center; justify-content: center; position: relative; }
.brand__cherry { width: 11px; height: 11px; border-radius: 50%; background: var(--r-ripe); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.brand__word { font-family: var(--serif); font-weight: 600; font-size: 21px; letter-spacing: -0.01em; }
.brand__word b { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); margin-left: 7px; vertical-align: middle; }
.head nav { display: flex; gap: 26px; }
.head nav a { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); transition: color .2s; }
.head nav a:hover { color: var(--accent); }

/* ===================== HERO ===================== */
.hero { position: relative; overflow: hidden; padding: clamp(40px, 7vw, 92px) 0 clamp(48px, 6vw, 80px); }
/* Looping warm ambient background video, softened + scrimmed so copy stays legible. */
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; opacity: .92; }
/* Rising warm-aroma particle field: real, always-on motion over the video. */
.hero-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.hero-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--paper) 82%, transparent), color-mix(in srgb, var(--paper) 46%, transparent) 46%, color-mix(in srgb, var(--paper) 18%, transparent)),
    linear-gradient(180deg, transparent 56%, var(--paper) 100%);
}
.hero > .wrap, .hero > .scrollcue { position: relative; z-index: 3; }
@media (prefers-reduced-motion: reduce) { .hero-bg { display: none; } .hero-fx { display: none; } }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(24px, 4vw, 60px); align-items: center; }
.kicker { display: inline-flex; align-items: center; gap: 9px; }
.kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--r-ripe); box-shadow: 0 0 0 4px rgba(143,29,22,.14); }
.hero h1 { font-size: clamp(58px, 9.5vw, 138px); margin: 18px 0 0; }
.hero-sub { max-width: 30em; font-size: clamp(16px, 1.4vw, 19px); color: var(--ink-2); margin: 22px 0 0; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; }
.btn { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; padding: 13px 22px; border-radius: 999px; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); transition: transform .15s ease, background .2s, color .2s; display: inline-flex; align-items: center; gap: 8px; }
.btn:hover { transform: translateY(-2px); background: var(--accent); border-color: var(--accent); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: transparent; color: var(--accent); border-color: var(--accent); }
.hero-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 40px 0 0; border-top: 1px solid var(--line); padding-top: 22px; }
.hero-meta div { display: flex; flex-direction: column; font-size: 13px; color: var(--ink-dim); }
.hero-meta b { font-family: var(--serif); font-weight: 500; font-size: 16px; color: var(--ink); margin-bottom: 3px; }

/* ---- the ripening branch ---- */
.branch-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 420px; }
.branch-halo { position: absolute; inset: 8% 12%; border-radius: 50%; background: radial-gradient(circle at 55% 45%, rgba(224,122,44,.22), rgba(143,29,22,.10) 45%, transparent 70%); filter: blur(8px); }
.branch { position: relative; width: min(100%, 440px); height: auto; overflow: visible; }
.branch .stem, .branch .twig { stroke: #6a4526; stroke-width: 7; stroke-linecap: round; fill: none; }
.branch .twig { stroke-width: 4.5; }
.branch .leaf { fill: #7d8a3f; opacity: .9; }
.branch .cherry circle { stroke: rgba(60,20,10,.28); stroke-width: 1.5; animation: ripen 5.5s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
/* Spherical 3D shading overlay: highlight top-left, shadow at the rim; static
   (not ripen-animated) so it sculpts the flat ripen colour into a sphere. */
.branch .cherry circle.cherry-shade { animation: none; fill: url(#cherrySphere); stroke: none; }
.branch .cherry .sheen { fill: #fff; opacity: .58; }
.branch .cherry .crease { stroke: rgba(50,14,8,.28); stroke-width: 1.6; fill: none; stroke-linecap: round; opacity: .68; }
.branch .cherry { transform-box: fill-box; transform-origin: center; filter: drop-shadow(1.4px 3px 2.6px rgba(34,10,6,0.5)); }
.branch .cherry.ripe { animation: bob 6s ease-in-out infinite; }
@keyframes ripen {
  0%   { fill: var(--r-green); }
  22%  { fill: var(--r-lime); }
  42%  { fill: var(--r-gold); }
  62%  { fill: var(--r-orange); }
  82%  { fill: var(--r-red); }
  100% { fill: var(--r-ripe); }
}
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.branch-caption { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); }
.branch-caption .sw { width: 11px; height: 11px; border-radius: 50%; }
.branch-caption .sw[data-s=green]  { background: var(--r-green); }
.branch-caption .sw[data-s=yellow] { background: var(--r-gold); }
.branch-caption .sw[data-s=orange] { background: var(--r-orange); }
.branch-caption .sw[data-s=red]    { background: var(--r-red); }
.branch-caption .sw[data-s=ripe]   { background: var(--r-ripe); }
.branch-caption em { margin-left: 6px; font-size: 10px; color: var(--ink-2); }

.scrollcue { display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 44px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-dim); }
.scrollcue i { width: 1px; height: 30px; background: linear-gradient(var(--ink-dim), transparent); animation: cue 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0%,100% { transform: scaleY(.4); opacity:.4; } 50% { transform: scaleY(1); opacity:1; } }

/* ===================== shared section heads ===================== */
section { position: relative; }
.origin, .ripening, .menu, .manifest, .visit { padding: clamp(64px, 8vw, 120px) 0; }
.head-row { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: end; margin-bottom: clamp(40px, 5vw, 66px); }
.head-row h2 { font-size: clamp(38px, 5.2vw, 72px); margin-top: 14px; }
.lede { color: var(--ink-2); font-size: clamp(16px,1.3vw,19px); }
.flag { display: inline; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--accent); background: rgba(192,81,34,.10); padding: 1px 6px; border-radius: 4px; }

/* ===================== ORIGIN ===================== */
.origin { border-top: 1px solid var(--line); }
.origin-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ocard { background: var(--paper-2); border: 1px solid var(--line); border-radius: 16px; padding: 24px 22px 26px; display: flex; flex-direction: column; min-height: 200px; transition: transform .3s ease, box-shadow .3s ease, border-color .3s; }
.ocard:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -26px rgba(41,26,14,.4); border-color: var(--line-2); }
.ocard .on { font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: .1em; }
.ocard b { font-family: var(--serif); font-weight: 500; font-size: 23px; margin: 14px 0 8px; }
.ocard span:last-child { font-size: 14.5px; color: var(--ink-dim); line-height: 1.5; }

/* ===================== RIPENING (journey) ===================== */
.ripening { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.journey { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; position: relative; }
.journey::before { content: ''; position: absolute; top: 46px; left: 8%; right: 8%; height: 2px; background: linear-gradient(90deg, var(--r-green), var(--r-gold), var(--r-red), var(--ink-2)); opacity: .5; border-radius: 2px; }
.jstep { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.jbead { width: 92px; height: 92px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px -18px rgba(41,26,14,.5); }
.jcherry { width: 46px; height: 46px; border-radius: 50%; box-shadow: inset 0 3px 4px rgba(255,255,255,.4), inset 0 -5px 8px rgba(0,0,0,.18); position: relative; }
.jcherry::after { content: ''; position: absolute; top: 9px; left: 12px; width: 12px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); }
.jcherry.s-green  { background: radial-gradient(circle at 38% 30%, #8bbd58, var(--r-green)); }
.jcherry.s-yellow { background: radial-gradient(circle at 38% 30%, #f0d06a, var(--r-gold)); }
.jcherry.s-red    { background: radial-gradient(circle at 38% 30%, #d95a3f, var(--r-ripe)); }
.jcherry.s-bean   { background: radial-gradient(circle at 38% 30%, #b7c07a, #8a9152); border-radius: 50% 50% 48% 48%; }
.jcherry.s-bean::before { content:''; position:absolute; inset: 40% 46% 6% 46%; background: rgba(60,50,20,.4); border-radius: 2px; transform: rotate(6deg); }
.jcherry.s-roast  { background: radial-gradient(circle at 38% 30%, #5a3a22, #2e1a0e); }
.jcherry.s-roast::before { content:''; position:absolute; inset: 40% 46% 6% 46%; background: rgba(0,0,0,.5); border-radius: 2px; transform: rotate(6deg); }
.jstep b { font-family: var(--serif); font-weight: 500; font-size: 19px; margin: 18px 0 5px; }
.jstep span { font-size: 13px; color: var(--ink-dim); max-width: 15em; }
.ripening-note { text-align: center; max-width: 40em; margin: clamp(40px,5vw,60px) auto 0; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(18px,1.8vw,24px); color: var(--ink-2); }

/* ===================== MENU ===================== */
.menu .top { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 36px; flex-wrap: wrap; }
.menu .top h2 { font-size: clamp(40px, 6vw, 84px); }
.menu .note { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.plist { border-top: 1px solid var(--line-2); }
.prow { display: grid; grid-template-columns: 44px 1.1fr 2fr auto; align-items: baseline; gap: 16px; padding: 20px 4px; border-bottom: 1px solid var(--line); transition: padding-left .25s ease, background .25s; }
.prow:hover { padding-left: 16px; background: linear-gradient(90deg, rgba(192,81,34,.06), transparent); }
.prow .pn { font-family: var(--mono); font-size: 12px; color: var(--ink-dim); }
.prow .pnm { font-family: var(--serif); font-weight: 500; font-size: 22px; }
.prow .pd { color: var(--ink-dim); font-size: 15px; }
.prow .pp { font-family: var(--mono); font-size: 16px; color: var(--accent); }

/* ===================== MANIFESTO ===================== */
.manifest { text-align: center; border-top: 1px solid var(--line); }
.manifest h2 { font-size: clamp(44px, 8vw, 108px); }
.manifest p { max-width: 34em; margin: 26px auto 0; color: var(--ink-2); font-size: clamp(16px,1.5vw,20px); }

/* ===================== VISIT ===================== */
.visit { background: var(--ink); color: var(--paper); }
.visit .eyebrow { color: #d7a765; }
.visit .eyebrow b { color: var(--r-gold); }
.visit-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px,4vw,64px); align-items: center; }
.visit h2 { font-size: clamp(40px, 6vw, 82px); color: var(--paper); margin: 14px 0 30px; }
.visit em { color: #eaa24e; }
.vlist { display: flex; flex-direction: column; }
.vrow { display: grid; grid-template-columns: 92px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid rgba(246,239,226,.16); }
.vrow .k { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #c79a63; padding-top: 3px; }
.vrow .v { font-size: 16px; color: var(--paper); }
.vrow .v a { color: #eaa24e; border-bottom: 1px solid rgba(234,162,78,.4); }
.visit .flag { background: rgba(234,162,78,.16); color: #eaa24e; }
.visit-cta { margin-top: 30px; }
.visit .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.visit .btn:hover { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.map-frame { border-radius: 18px; overflow: hidden; border: 1px solid rgba(246,239,226,.2); aspect-ratio: 4/3; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.map-frame iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.3) sepia(.15); }

/* ===================== FOOTER ===================== */
.foot { background: var(--paper-3); border-top: 1px solid var(--line-2); padding: 44px 0 40px; overflow: hidden; }
.foot .wrap { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.foot .col a { color: var(--ink-2); transition: color .2s; }
.foot .col a:hover { color: var(--accent); }
.foot .by { margin-top: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-dim); }
.gw-credit { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.gw-credit__a { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); transition: opacity .2s; }
.gw-credit__a:hover { opacity: .65; }
.gw-credit__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line-2); }
.foot .big { font-family: var(--serif); font-weight: 600; font-size: clamp(80px, 16vw, 220px); line-height: .8; color: transparent; -webkit-text-stroke: 1.5px var(--line-2); letter-spacing: -0.02em; user-select: none; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .branch-stage { order: -1; min-height: 340px; margin-bottom: 6px; }
  .branch { width: min(74%, 340px); }
  .head-row { grid-template-columns: 1fr; gap: 18px; }
  .origin-grid { grid-template-columns: repeat(2, 1fr); }
  .journey { grid-template-columns: repeat(2, 1fr); gap: 26px 14px; }
  .journey::before { display: none; }
  .visit-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap { padding: 0 18px; }
  .head nav { display: none; }
  .hero h1 { font-size: clamp(33px, 9.2vw, 54px); line-height: 1.05; }
  .hero-meta { grid-template-columns: 1fr; gap: 12px; }
  .origin-grid { grid-template-columns: 1fr; }
  .journey { grid-template-columns: 1fr; }
  .prow { grid-template-columns: 30px 1fr auto; }
  .prow .pd { display: none; }
  .foot .wrap { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1 !important; transform: none !important; }
  .ticker .trk { animation: none; }
  .branch .cherry circle { animation: none; fill: var(--r-ripe); }
  .branch .cherry.ripe, .scrollcue i { animation: none; }
}