/* Oro Rich — public site.
   One stylesheet, no framework, no webfont. The people this site is for open it on a
   ₹6,000 Android over 2G, and every kilobyte is theirs to pay for. BRAND.md colours. */
:root {
  --green-950: #041F12; --green-900: #06301B; --green-800: #0B4C2B; --green-700: #0C5A33; --primary: #0F6B3C;
  --green-600: #148A4D; --green-200: #A7DDBF; --green-50: #EEF8F1;
  --gold-700: #B7791F; --gold-500: #D9A441; --gold-50: #FDF6E7;
  --ink: #1A1916; --body: #3F3C36; --muted: #6B665C; --line: #E4E0D8; --paper: #FFFDF9;
  --max: 1100px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--body);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px; line-height: 1.6;
}
img { max-width: 100%; height: auto; }
a { color: var(--green-700); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.25rem; }

/* The header is near-black rather than brand green: the logo's own leaf is green, and
   on a green field the mark disappears into it. The reversed lockup is used here so
   the wordmark and the tagline under it stay legible, and it is sized so that tagline
   can actually be read rather than reduced to a grey smear. */
header.site {
  background: var(--green-950, #041F12); position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid rgba(217, 164, 65, .35);
}
header.site .wrap {
  display: flex; align-items: center; gap: 1rem 1.5rem;
  min-height: 76px; flex-wrap: wrap; padding-top: .5rem; padding-bottom: .5rem;
}
/* The lockup, rebuilt.
   The artwork's own tagline is ~13px tall inside a 120px image — at header size it is
   a smudge rather than words, and setting it beside the mark looked bolted on. So the
   droplet and the wordmark are separate images and the tagline is real text sitting
   directly under "ORO RICH", exactly where the printed lockup puts it: crisp at any
   size, and it lines up with the wordmark rather than floating in the header. */
.brand { display: inline-flex; align-items: center; gap: 0.6rem; flex: none; text-decoration: none; }
.brand-drop { height: 54px; width: auto; display: block; }
.brand-words { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.brand-word { height: 26px; width: auto; display: block; }
.brand-tag {
  color: #C6DED0; font-size: 10px; font-weight: 700; line-height: 1;
  text-transform: uppercase; white-space: nowrap;
  /* Tracked out so the line sits flush under the wordmark, the way it is drawn. */
  letter-spacing: 0.088em;
}

nav.site { margin-left: auto; display: flex; gap: 0.25rem 1.25rem; flex-wrap: wrap; }
nav.site a {
  color: #E9F5EE; text-decoration: none; font-size: 15px; font-weight: 600;
  padding: 0.6rem 0; min-height: 44px; display: inline-flex; align-items: center;
}
nav.site a:hover, nav.site a[aria-current="page"] { color: var(--gold-500); }

/* Phones: the logo goes full-width-ish so the tagline survives, and the navigation
   becomes a scrollable row of 44px targets rather than a cramped wrap. */
@media (max-width: 720px) {
  header.site .wrap { min-height: 0; gap: 0.25rem; }
  .brand { width: 100%; gap: 0.5rem; }
  .brand-drop { height: 46px; }
  .brand-word { height: 22px; }
  .brand-tag { font-size: 8.5px; letter-spacing: 0.075em; }
  nav.site {
    margin-left: 0; width: 100%; gap: 1rem;
    overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 0.25rem;
  }
  nav.site::-webkit-scrollbar { display: none; }
  nav.site a { white-space: nowrap; font-size: 15px; }
}

.hero { background: linear-gradient(160deg, var(--green-900), var(--green-700)); color: #F3FAF6; }
.hero .wrap { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.hero h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.15; margin: 0 0 1rem; color: #fff; }
.hero h1 span { color: var(--gold-500); }
.hero p { font-size: 1.125rem; max-width: 44ch; margin: 0 0 1.75rem; color: #D8EDE1; }
.btn {
  display: inline-block; background: var(--gold-500); color: var(--green-900);
  padding: 0.85rem 1.5rem; border-radius: 8px; text-decoration: none; font-weight: 700;
  min-height: 48px; line-height: 1.6;
}
.btn:hover { background: #E8B85C; }
.btn-ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.5); }
.btn-ghost:hover { background: rgba(255,255,255,.1); }

section { padding: 3rem 0; }
section.alt { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); color: var(--ink); margin: 0 0 0.5rem; }
h3 { color: var(--ink); margin: 2rem 0 0.5rem; font-size: 1.15rem; }
.lede { color: var(--muted); max-width: 62ch; margin: 0 0 2rem; }

.grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1.25rem;
}
.card h3 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.card .cat { color: var(--gold-700); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.card p { margin: 0.5rem 0 0.75rem; font-size: 15px; color: var(--muted); }
.card img { border-radius: 8px; margin-bottom: 0.75rem; aspect-ratio: 1/1; object-fit: contain; background: var(--green-50); width: 100%; }

table.price { width: 100%; border-collapse: collapse; background: #fff; font-size: 15px; }
table.price th, table.price td { text-align: left; padding: 0.75rem; border-bottom: 1px solid var(--line); }
table.price th { background: var(--green-50); color: var(--green-800); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
table.price td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.scroller { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }

.note { background: var(--gold-50); border-left: 4px solid var(--gold-500); padding: 1rem 1.25rem; border-radius: 0 8px 8px 0; }
.prose { max-width: 70ch; }
.prose h2 { margin-top: 2.5rem; font-size: 1.35rem; }
.prose ul { padding-left: 1.25rem; }
.prose li { margin: 0.35rem 0; }

footer.site { background: var(--green-900); color: #C9E3D5; font-size: 14px; padding: 2.5rem 0; }
footer.site a { color: #E9F5EE; }
footer.site .cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
footer.site h4 { color: #fff; margin: 0 0 0.5rem; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; }
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site li { margin: 0.3rem 0; }
footer.site .legal { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.15); color: #9CBCA9; }

/* --- Phones ---------------------------------------------------------------
   These pages are read on a ₹6,000 Android held in one hand. Everything below is
   about not making that person pinch, scroll sideways, or hunt for a tap target. */
@media (max-width: 720px) {
  body { font-size: 16px; }
  .wrap { padding: 0 1rem; }
  .hero .wrap { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .hero p { font-size: 1.0625rem; }
  section { padding: 2.25rem 0; }
  .btn { display: block; text-align: center; width: 100%; }
  .grid { grid-template-columns: 1fr; gap: 1rem; }
  /* The price table is the one thing that cannot shrink: it scrolls inside its own
     box so the PAGE never scrolls sideways. */
  table.price { font-size: 14px; min-width: 34rem; }
  table.price th, table.price td { padding: 0.6rem 0.5rem; }
  footer.site .cols { gap: 1.5rem; }
}
@media (max-width: 560px) {
  /* The lockup keeps its shape all the way down — droplet, wordmark, tagline under it
     — because breaking it apart on a phone is what made it look wrong in the first
     place. It simply gets smaller. */
  .brand-drop { height: 42px; }
  .brand-word { height: 20px; }
  .brand-tag { font-size: 7.5px; letter-spacing: 0.07em; }
}

/* --- Pack photography ------------------------------------------------------
   Only some packs have been photographed so far. A missing photo must not leave a
   hole or a broken-image icon on a page a customer is judging the brand by, so it
   falls back to a tinted tile carrying the pack name — legible, on-brand, and
   obviously deliberate rather than broken. */
.shot-none {
  display: grid; place-items: center; text-align: center;
  background: linear-gradient(150deg, var(--green-50), #FFF6E3);
  border: 1px dashed var(--green-200); border-radius: 8px;
  color: var(--green-800); font-weight: 700; font-size: 14px; line-height: 1.25;
  padding: 0.75rem; aspect-ratio: 1 / 1; margin-bottom: 0.75rem;
}
.shot-none-sm {
  aspect-ratio: 1 / 1; width: 56px; height: 56px; margin: 0; padding: 0;
  font-size: 11px; letter-spacing: .02em;
}
td.shot { width: 88px; }
td.shot img {
  width: 56px; height: 56px; object-fit: contain; border-radius: 8px;
  background: var(--green-50); display: block;
}
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
@media (max-width: 720px) {
  td.shot { width: 64px; }
  td.shot img, .shot-none-sm { width: 44px; height: 44px; }
}