/* ---- The Saga — shared by all three product pages. A parchment leaf: no boxes, no fills; hairline rules and gold ornaments only ---- */
.gs{position:relative;background:var(--ivory-beige) url("collection-hero-crest-v2.webp") center / cover no-repeat;background-attachment:fixed;padding:clamp(56px,5.4vw,88px) 0 clamp(64px,6vw,96px);overflow:hidden}
/* soft white bloom so the paper never fights the type */
.gs-glow{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 40%,rgba(255,252,245,.55) 72%,rgba(255,252,245,.62) 88%,rgba(255,252,245,.6) 100%),radial-gradient(118% 82% at 50% 42%,rgba(255,253,248,.93) 0%,rgba(255,252,245,.8) 42%,rgba(255,250,241,.52) 70%,rgba(255,250,241,.34) 90%,rgba(255,250,241,.28) 100%);-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 74%,rgba(0,0,0,.72) 87%,rgba(0,0,0,.3) 95%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 74%,rgba(0,0,0,.72) 87%,rgba(0,0,0,.3) 95%,transparent 100%)}
.gs-leaf{position:relative;z-index:1}

/* shared atoms */
.gs-eyebrow,.gs-tag{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-700)}
.gs-label{font-family:var(--font-display);font-weight:600;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--espresso-brown)}
.gs-orn{display:block;height:12px;width:min(300px,74%);background:url("fleur-divider-thin.webp") left center / auto 12px no-repeat;opacity:.85;margin:20px 0}
.gs-ico{width:44px;height:34px;color:var(--gold-700);opacity:.92}
.gs-ico--sm{width:40px;height:34px}

/* ---- top: the name, and the estate quadrant ---- */
.gs-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:clamp(32px,4.6vw,76px);align-items:start}
.gs-title{font-family:var(--font-body);font-variant-caps:small-caps;font-weight:600;font-size:clamp(52px,6vw,86px);line-height:.98;letter-spacing:.005em;color:var(--espresso-brown);margin:14px 0 0}
.gs-roastline{font-family:var(--font-display);font-weight:700;font-size:clamp(12px,1.05vw,14px);letter-spacing:.2em;text-transform:uppercase;color:var(--espresso-brown);margin:0}
.gs-lede{font-family:var(--font-body);font-size:17px;line-height:27px;color:var(--espresso-brown);margin:22px 0 0;max-width:44ch;text-wrap:pretty}

.gs-facts{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(20px,2.4vw,40px);row-gap:clamp(20px,2.4vw,36px);position:relative;padding-top:6px}
.gs-fact{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:clamp(8px,1.4vw,20px) clamp(6px,1.4vw,24px);min-width:0}
.gs-fact .gs-ico{margin-bottom:8px}
.gs-value{font-family:var(--font-body);font-variant-caps:small-caps;font-weight:600;font-size:clamp(34px,3.2vw,44px);line-height:1;color:var(--espresso-brown);white-space:nowrap}
.gs-value em{font-style:normal;font-size:.6em;letter-spacing:.02em;margin-left:.12em}
/* The place is deliberately set smaller than the numerals, which left its line
   box ~11px shorter than theirs — so "Karnataka" sat above "Grown at Elevation"
   instead of level with it. Reserving the numerals' band and centring in it puts
   the two labels back on one line without changing the type size. */
.gs-value--place{font-size:clamp(23px,2.15vw,30px);line-height:1.1;letter-spacing:.01em;white-space:normal;min-height:clamp(34px,3.2vw,44px);display:flex;align-items:center}
.gs-sub{font-family:var(--font-display);font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--espresso-brown);opacity:.86}
.gs-split{display:flex;align-items:flex-start;justify-content:center;gap:clamp(12px,1.4vw,22px);width:100%}
.gs-split-part{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.gs-split-part .gs-value{font-size:clamp(26px,2.3vw,33px)}
.gs-split-rule{width:1px;align-self:stretch;margin:4px 0 2px;background:var(--hairline-light)}
/* the cross rules + gold pips, drawn on the grid itself */
.gs-facts::before,.gs-facts::after{content:"";position:absolute;background:var(--hairline-light);pointer-events:none}
.gs-facts::before{left:50%;top:4%;bottom:4%;width:1px}
.gs-facts::after{left:0;right:0;top:50%;height:1px}
.gs-facts .gs-fact:nth-child(1)::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;background:var(--regal-gold);transform:translate(-50%,-50%) rotate(45deg)}
.gs-fact:nth-child(1){position:static}
.gs-facts{isolation:isolate}

/* ---- bottom: plate, meaning, notes ---- */
.gs-bottom{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,.82fr) minmax(0,1.2fr);gap:clamp(20px,2.4vw,38px);align-items:start;margin-top:clamp(34px,3.6vw,54px);padding-top:clamp(30px,3.4vw,48px);border-top:1px solid var(--hairline-light)}
.gs-plate{margin:0;min-width:0}
/* One scale for all five plates. The frame height is shared, but each engraving
   fills its own canvas differently — Airavata's pavilion takes the top 27% where
   the other headdresses take 6–15%, and Padmaja is drawn wider and without a
   blanket. Left on a common frame the animals themselves render 205–249px, a 21%
   spread that reads as five different sizes. Each frame is scaled so the animal's
   own footprint — sqrt(torso height × torso width) — lands on the set median.
   Height rather than transform: scale(), which would overflow the column; this
   just makes the grid row taller. Dhrona is the median and keeps the base. */
.pp[data-product="washed"] .gs-plate-img{height:clamp(225px,20.62vw,296px)}      /* Arjuna   ×1.02 */
.pp[data-product="honey"] .gs-plate-img{height:clamp(212px,19.43vw,279px)}       /* Gajendra ×0.96 */
.pp[data-product="airavata"] .gs-plate-img{height:clamp(251px,23.09vw,331px)}    /* Airavata ×1.14 */
.pp[data-product="natural"] .gs-plate-img{height:clamp(207px,19.01vw,273px)}     /* Padmaja  ×0.94 */
/* plate sizes are 12% down from the original 250/23vw/330 — the engravings were
   reading heavier than the type around them */
.gs-plate-img{display:block;width:115%;max-width:none;height:clamp(220px,20.2vw,290px);object-fit:contain;object-position:center bottom;mix-blend-mode:multiply;transform:translate(-7.5%,-22px)}
.gs-meaning,.gs-notes{position:relative;min-width:0}
.gs-notes{padding-left:clamp(24px,2.6vw,44px)}
.gs-notes::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;background:linear-gradient(180deg,rgba(198,135,27,0),var(--regal-gold) 12%,var(--regal-gold) 88%,rgba(198,135,27,0))}
/* No max-width: the 30ch cap here held the text to ~243px inside a ~294px
   column, leaving its own column part empty and running a longer elephant
   write-up long instead of wide. It now fills the column it already has —
   the column widths themselves are unchanged. */
.gs-def{font-family:var(--font-body);font-size:17px;line-height:1.62;color:var(--espresso-brown);margin:22px 0 0;text-wrap:pretty}
.gs-notes-list{--ngap:clamp(10px,1.3vw,20px);list-style:none;margin:clamp(24px,2.6vw,30px) 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(20px,2.2vw,28px) var(--ngap)}
.gs-note{flex:0 0 calc((100% - 2*var(--ngap)) / 3);display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;min-width:0}
.gs-note-name{font-family:var(--font-body);font-style:italic;font-size:clamp(17px,1.35vw,19px);line-height:1.32;color:var(--espresso-brown);text-wrap:balance}

/* ---- Tweak: Saga · Bloom (white glow behind the leaf) ---- */
[data-bloom="soft"] .gs-glow{background:linear-gradient(180deg,transparent 44%,rgba(255,252,244,.3) 74%,rgba(255,252,244,.34) 100%),radial-gradient(122% 84% at 50% 42%,rgba(255,253,247,.56) 0%,rgba(255,252,244,.4) 46%,rgba(255,251,243,.24) 78%,rgba(255,251,243,.18) 100%)}
[data-bloom="off"] .gs-glow{display:none}
/* ---- Tweak: Saga · Estate rules ---- */
[data-facts="plain"] .gs-facts::before,[data-facts="plain"] .gs-facts::after,[data-facts="plain"] .gs-facts .gs-fact:nth-child(1)::after{display:none}

/* ---- More from the Collection — continues the beige parchment ground ---- */
.pp-others{background:var(--ivory-beige) url("collection-hero-crest-v2.webp") center / cover no-repeat;background-attachment:fixed}
.pp-others .pp-others-title{color:var(--midnight-navy)}

/* ---- tablet ---- */
@media (max-width:1080px){
  .gs-top{grid-template-columns:1fr;gap:clamp(30px,4vw,44px)}
  .gs-lede{max-width:56ch}
  .gs-orn{width:min(340px,100%)}
  .gs-facts{padding-top:0}
  .gs-bottom{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);row-gap:clamp(28px,3.4vw,40px)}
  .gs-notes{grid-column:1 / -1;padding-left:0;padding-top:26px;border-top:1px solid var(--hairline-light)}
  .gs-notes::before{display:none}
  .gs-notes-list{margin-top:22px}
}
/* ---- mobile: two-up facts and notes stay side by side; prose goes full width ---- */
@media (max-width:680px){
  .gs{padding:48px 0 56px;background-attachment:scroll}
  .gs-title{font-size:clamp(44px,13vw,58px);margin-top:10px}
  .gs-orn{width:200px;margin:16px 0}
  .gs-lede{margin-top:18px;max-width:none}
  /* Chicory is the only fact carrying a .gs-sub, which made the top row taller than
     the bottom one — so the cross rule and its pip, both pinned to 50%, landed inside
     that row and struck through "Nothing but the Bean". Equal rows put the gutter back
     at the middle; the +pad/2 accounts for the cross being measured from the padding
     box while the rows sit in the content box. */
  .gs-facts{--facts-top-pad:26px;column-gap:6px;row-gap:24px;margin-top:30px;padding-top:var(--facts-top-pad);border-top:1px solid var(--hairline-light);grid-auto-rows:1fr}
  .gs-facts::after,.gs-facts .gs-fact:nth-child(1)::after{top:calc(50% + var(--facts-top-pad) / 2)}
  .gs-fact{padding:6px 2px;gap:4px}
  .gs-fact .gs-ico{width:36px;height:28px;margin-bottom:5px}
  .gs-value{font-size:32px}
  .gs-label{font-size:10.5px;letter-spacing:.16em}
  .gs-sub{font-size:10px;letter-spacing:.1em}
  .gs-facts::before{top:2%;bottom:2%}
  .gs-bottom{grid-template-columns:1fr;margin-top:30px;padding-top:30px;gap:26px}
  .gs-plate{max-width:340px;margin:0 auto}
  .gs-plate-img{height:202px}
  /* the per-plate scales above outrank this line on specificity, so each one
     carries its own phone value — the same factors applied to 202px */
  .pp[data-product="washed"] .gs-plate-img{height:206px}
  .pp[data-product="honey"] .gs-plate-img{height:194px}
  .pp[data-product="airavata"] .gs-plate-img{height:231px}
  .pp[data-product="natural"] .gs-plate-img{height:190px}
  .gs-def{margin-top:16px;max-width:none}
  /* on phones the notes lead the bottom half — the elephant and its significance
     follow. The separating rule the notes carried below 1080px moves to their
     underside with them, so it still parts notes from plate and never doubles up
     with .gs-bottom's own top border. */
  .gs-notes{order:-1;padding-top:0;padding-bottom:24px;border-top:0;border-bottom:1px solid var(--hairline-light)}
  .gs-notes-list{margin-top:18px;--ngap:8px;gap:16px var(--ngap)}
  .gs-value--place{font-size:21px;min-height:32px}
  .gs-split{gap:10px}
  .gs-split-part .gs-value{font-size:24px}
  .gs-note{gap:9px}
  .gs-note .gs-ico{width:34px;height:28px}
  .gs-note-name{font-size:16px}
}