/* The Rice Guide — shared styles (hub + articles). Visual language follows the
   home page "Know Your Rice" card: saffron + red, Titan One titles, Nunito body. */
:root{
  --cream:#F6E6D9; --paper:#FFFBF5; --line:rgba(19,23,40,.12);
  --saffron:#FFB82E; --saffron-2:#FFC95C; --saffron-soft:#FFE7B8;
  --red:#D70321; --red-deep:#A8021A;
  --ink:#131728; --ink-soft:#3A3530; --muted:#6E6254;
  --lime:#DAD73C; --orange:#FD5225;
  --nav-h:78px; --nav-top:10px;
  --ease:cubic-bezier(.2,.8,.1,1); --spring:cubic-bezier(.3,1.6,.5,1);
  --gut:clamp(16px,4vw,48px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:110px}
body{margin:0; background:var(--cream); color:var(--ink); font-family:'Nunito',system-ui,sans-serif; font-weight:600; -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:inherit; text-decoration:none}
button,input{font:inherit; color:inherit}
img{display:block; max-width:100%}
:focus-visible{outline:3px solid var(--red); outline-offset:3px; border-radius:6px}
.wrap{max-width:1240px; margin:0 auto; padding:0 var(--gut)}
.title{font-family:'Titan One',sans-serif; font-weight:400; text-transform:uppercase; line-height:.92; margin:0}
.eyebrow{font-weight:900; font-size:12.5px; letter-spacing:.18em; text-transform:uppercase}
.arrow{width:20px; height:20px; border-radius:50%; display:grid; place-items:center; flex:none}
.arrow svg{width:.7em; height:.7em}

/* ---------- navbar (same as main site) ---------- */
.nav{position:fixed; left:0; right:0; top:var(--nav-top); z-index:50; padding:0 clamp(10px,2.5vw,36px); pointer-events:none}
.nav__bar{pointer-events:auto; max-width:1400px; margin:0 auto; height:var(--nav-h); background:var(--ink); color:var(--cream); border-radius:22px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 14px; box-shadow:0 14px 34px rgba(19,23,40,.22)}
.nav__links{display:flex; gap:4px; font-weight:800; font-size:16px}
.nav__links a{padding:11px 16px; border-radius:12px; transition:background-color .25s, color .25s}
.nav__links a:hover{background:var(--cream); color:var(--ink)}
.brand{display:flex; align-items:center; gap:10px; transition:transform .4s var(--spring)}
.brand:hover{transform:rotate(-1.5deg) scale(1.03)}
.brand span{font-family:'Thesead','Titan One',sans-serif; font-size:34px; line-height:1; white-space:nowrap}
.brand img{height:50px; width:auto}
.nav__cta{display:flex; justify-content:flex-end; gap:10px}
.btn{display:inline-flex; align-items:center; gap:10px; padding:13px 18px; border-radius:12px; font-weight:900; font-size:15px; white-space:nowrap; transition:transform .3s var(--spring), background-color .2s, color .2s}
.btn:hover{transform:translateY(-3px)}
.btn--ghost-light{border:1.5px solid var(--cream)} .btn--ghost-light .arrow{background:var(--cream); color:var(--ink)}
.btn--light{background:var(--cream); color:var(--ink)} .btn--light:hover{background:var(--lime)} .btn--light .arrow{background:var(--ink); color:var(--cream)}
.btn--red{background:var(--red); color:#fff} .btn--red:hover{background:var(--red-deep)} .btn--red .arrow{background:#fff; color:var(--red)}
.btn--outline-red{border:2px solid var(--red); color:var(--red); padding:11px 16px} .btn--outline-red .arrow{background:var(--red); color:var(--saffron)}
.btn--ink{background:var(--ink); color:var(--cream)} .btn--ink .arrow{background:var(--cream); color:var(--ink)}
.btn--cream{background:var(--cream); color:var(--red-deep)} .btn--cream .arrow{background:var(--red); color:#fff}
.btn--ghost-cream{border:2px solid rgba(246,230,217,.7); color:var(--cream); padding:11px 16px} .btn--ghost-cream .arrow{background:var(--cream); color:var(--red)}
.nav__menu{display:none; width:48px; height:48px; border-radius:12px; background:var(--cream); color:var(--ink); place-items:center; border:0; cursor:pointer}
.nav__menu i{display:block; width:20px; height:2.5px; border-radius:2px; background:currentColor; position:relative; transition:background-color .2s}
.nav__menu i::before,.nav__menu i::after{content:""; position:absolute; left:0; width:20px; height:2.5px; border-radius:2px; background:var(--ink); transition:transform .3s}
.nav__menu i::before{top:-7px} .nav__menu i::after{top:7px}
.nav[data-open="true"] .nav__menu i{background:transparent}
.nav[data-open="true"] .nav__menu i::before{transform:translateY(7px) rotate(45deg)}
.nav[data-open="true"] .nav__menu i::after{transform:translateY(-7px) rotate(-45deg)}
.nav__drawer{max-width:1400px; margin:8px auto 0; background:var(--ink); color:var(--cream); border-radius:22px; padding:10px; display:grid; gap:2px; font-family:'Titan One'; font-size:26px; text-transform:uppercase; transition:opacity .3s, transform .4s var(--ease); opacity:0; transform:translateY(-8px); pointer-events:none}
.nav[data-open="true"] .nav__drawer{opacity:1; transform:none; pointer-events:auto}
.nav__drawer a{padding:12px 14px; border-radius:14px} .nav__drawer a:hover{color:var(--lime)}
@media (max-width:899px){
  :root{--nav-h:64px}
  .nav__bar{grid-template-columns:1fr auto; padding:0 8px 0 16px}
  .nav__links,.nav__cta{display:none}
  .nav__menu{display:grid}
  .brand span{font-size:26px} .brand img{height:40px}
}
@media (min-width:900px){ .nav__drawer{display:none} }

/* ---------- hero (hub + article) ---------- */
.hero{position:relative; overflow:hidden; background:var(--saffron); color:var(--red); border-radius:0 0 40px 40px; padding:calc(var(--nav-top) + var(--nav-h) + clamp(40px,6vw,84px)) 0 clamp(44px,6vw,80px)}
.hero .wrap{position:relative; z-index:1}
.grains{position:absolute; right:-6vw; top:50%; width:clamp(300px,40vw,620px); aspect-ratio:1; transform:translateY(-42%); pointer-events:none; color:var(--red); opacity:.13}
.grains svg{width:100%; height:100%; animation:spin 140s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-weight:800; font-size:14px; color:var(--red-deep); margin:0 0 20px; padding:0; list-style:none}
.crumbs li{display:flex; align-items:center; gap:8px}
.crumbs li + li::before{content:""; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.5}
.crumbs a{opacity:.75; transition:opacity .2s} .crumbs a:hover{opacity:1; text-decoration:underline; text-underline-offset:3px}
.hero .eyebrow{color:var(--red-deep)}
.mask{display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em}
.mask > span{display:block; transform:translateY(108%); transition:transform 1s var(--ease)}
.mask + .mask > span{transition-delay:.08s}
.is-in .mask > span{transform:none}
.rise{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .9s var(--ease)}
.is-in .rise{opacity:1; transform:none}
.is-in .rise.d1{transition-delay:.18s} .is-in .rise.d2{transition-delay:.28s} .is-in .rise.d3{transition-delay:.38s}

/* hub hero */
.hub-hero h1{font-size:clamp(56px,10.5vw,168px); margin-top:14px}
.hub-hero__lead{max-width:560px; margin:22px 0 0; font-size:clamp(17px,1.5vw,21px); line-height:1.5; font-weight:700; color:var(--red-deep)}
.search{position:relative; max-width:640px; margin-top:30px}
.search input{width:100%; height:62px; border-radius:18px; border:2px solid var(--red); background:var(--paper); color:var(--ink); padding:0 20px 0 54px; font-weight:700; font-size:17px; outline:none; transition:box-shadow .25s}
.search input::placeholder{color:#9A8E80}
.search input:focus{box-shadow:0 0 0 5px rgba(215,3,33,.18)}
.search svg{position:absolute; left:19px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--red)}
.popular{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; align-items:center}
.popular span{font-weight:900; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--red-deep); margin-right:4px}
.chip{display:inline-block; padding:7px 13px; border-radius:999px; border:1.5px solid var(--red); color:var(--red); font-weight:800; font-size:13.5px; transition:background-color .2s, color .2s}
a.chip:hover{background:var(--red); color:var(--saffron)}

/* product tabs (rice now, more later) */
.ptabs{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin:clamp(28px,4vw,44px) calc(-1 * var(--gut)) 0; padding:4px var(--gut)}
.ptab{flex:none}
.ptab{display:inline-flex; align-items:center; gap:8px; padding:11px 16px; border-radius:14px; font-weight:900; font-size:15px; border:2px solid var(--ink)}
.ptab[aria-current="page"]{background:var(--ink); color:var(--cream)}
.ptab[aria-disabled="true"]{border-color:var(--line); color:var(--muted); cursor:default}
.ptab small{font-size:11px; min-width:22px; text-align:center; padding:2px 7px; border-radius:999px; background:rgba(19,23,40,.08)}
.ptab:not([aria-current]){transition:background-color .2s, color .2s}
.ptab:not([aria-current]):hover{background:var(--saffron); border-color:var(--saffron); color:var(--red)}
.ptab[aria-current] small{background:rgba(246,230,217,.2)}

/* topic sections */
.topics{padding:clamp(20px,3vw,32px) 0 clamp(40px,6vw,80px)}
.topic{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:clamp(20px,4vw,64px); padding:clamp(36px,5vw,64px) 0; border-top:1.5px solid var(--line)}
.topic:first-child{border-top:0}
.topic__head{position:sticky; top:110px; align-self:start}
.topic__num{font-family:'Titan One'; font-size:15px; color:var(--red)}
.topic__head h2{font-size:clamp(30px,3.4vw,48px); margin:8px 0 10px}
.topic__head p{margin:0; color:var(--muted); font-weight:700; line-height:1.5; max-width:30ch}
.qlist{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.q{display:grid; grid-template-columns:1fr auto; gap:6px 18px; align-items:center; padding:20px 22px; border-radius:20px; background:var(--paper); border:1.5px solid transparent; transition:border-color .25s, transform .35s var(--ease), box-shadow .35s}
.q:hover{border-color:var(--red); transform:translateY(-2px); box-shadow:0 18px 34px -24px rgba(168,2,26,.45)}
.q h3{margin:0; font-weight:900; font-size:clamp(17px,1.5vw,20px); line-height:1.25}
.q p{grid-column:1; margin:0; color:var(--muted); font-weight:700; font-size:14.5px; line-height:1.45}
.q .go{grid-row:1 / span 2; grid-column:2; width:42px; height:42px; border-radius:50%; background:var(--saffron); color:var(--red); display:grid; place-items:center; transition:transform .35s var(--spring), background-color .2s}
.q .go svg{width:14px; height:14px}
.q:hover .go{transform:translateX(4px); background:var(--red); color:var(--saffron)}
.q__urdu{font-style:italic; font-weight:700; color:var(--red-deep); font-size:13.5px}
.empty{display:none; padding:30px; border-radius:20px; background:var(--paper); font-weight:800; text-align:center; color:var(--muted)}

/* at a glance */
.glance{background:var(--saffron); color:var(--red); border-radius:40px; padding:clamp(32px,4.4vw,60px) clamp(20px,4vw,56px)}
.glance__head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px 24px; margin-bottom:clamp(20px,3vw,32px)}
.glance__head h2{font-size:clamp(30px,3.6vw,50px)}
.glance__head p{margin:0; max-width:380px; color:var(--red-deep); font-weight:700; line-height:1.5}
.vgrid{display:grid; grid-template-columns:repeat(var(--n,5),minmax(0,1fr)); gap:14px}
.variety{display:flex; flex-direction:column; gap:10px; padding:12px 12px 18px; border-radius:24px; background:rgba(255,251,245,.55); transition:background-color .25s, transform .35s var(--ease)}
.variety:hover{background:var(--paper); transform:translateY(-4px)}
.variety__img{aspect-ratio:1; width:100%; border-radius:16px; overflow:hidden}
.variety__img img{width:100%; height:100%; object-fit:cover}
.variety h3{font-family:'Titan One'; font-weight:400; font-size:19px; text-transform:uppercase; margin:6px 4px 0; line-height:1}
.variety p{margin:0 4px; font-size:13.5px; line-height:1.4; font-weight:800; color:var(--red-deep)}
.variety .meta{margin:0 4px; display:flex; align-items:center; justify-content:space-between; gap:8px}
.aroma{display:flex; gap:5px}
.aroma i{width:8px; height:19px; border-radius:50%; background:var(--red); opacity:.22}
.aroma i.on{opacity:1}
.variety .more{font-weight:900; font-size:13px; display:inline-flex; gap:6px; align-items:center}
@media (max-width:1000px){ .vgrid{grid-template-columns:repeat(min(var(--n,5),3),minmax(0,1fr))} }
@media (max-width:700px){ .vgrid{grid-template-columns:repeat(2,minmax(0,1fr))} .variety:last-child:nth-child(odd){grid-column:span 2} .variety:last-child:nth-child(odd) .variety__img{aspect-ratio:2/1} }

/* pairing grid (achaar hub) */
.pairs-wrap{padding-bottom:clamp(48px,7vw,90px)}
.pairs__head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px 40px; align-items:end; margin-bottom:24px}
.pairs__head .eyebrow{grid-column:1 / -1}
.pairs__head h2{font-size:clamp(30px,3.6vw,50px)}
.pairs__head p{margin:0; color:var(--muted); font-weight:700; line-height:1.5; max-width:40ch; justify-self:end}
.pairs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.pair{display:grid; gap:14px; padding:22px; border-radius:24px; background:var(--paper); border:1.5px solid transparent; transition:border-color .25s, transform .35s var(--ease), box-shadow .35s}
.pair:hover{border-color:var(--red); transform:translateY(-3px); box-shadow:0 18px 34px -24px rgba(19,23,40,.35)}
.pair__dish{font-family:'Titan One'; font-size:clamp(22px,2vw,28px); text-transform:uppercase; line-height:1; color:var(--ink)}
.pair__with{display:flex; align-items:center; gap:12px}
.pair__img{width:56px; height:56px; border-radius:16px; overflow:hidden; flex:none; transform:rotate(-4deg); transition:transform .4s var(--spring)}
.pair:hover .pair__img{transform:rotate(3deg) scale(1.06)}
.pair__img img{width:100%; height:100%; object-fit:cover}
.pair__img .ph{font-size:0; gap:0} .pair__img .ph svg{width:20px; height:20px}
.pair__with small{display:block; font-weight:900; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.pair__with b{display:block; font-weight:900; font-size:17px; color:var(--red)}
.pair__note{color:var(--muted); font-weight:700; font-size:14.5px; line-height:1.45}
@media (max-width:900px){ .pairs{grid-template-columns:repeat(2,minmax(0,1fr))} .pairs__head{grid-template-columns:1fr} .pairs__head p{justify-self:start} }
@media (max-width:520px){ .pairs{grid-template-columns:1fr} }

/* CTA band */
.cta{margin:clamp(56px,8vw,110px) auto 0; background:var(--red); color:var(--cream); border-radius:40px; padding:clamp(36px,5vw,72px) clamp(22px,4vw,64px); display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:28px; align-items:end; position:relative; overflow:hidden}
.cta h2{font-size:clamp(34px,4.6vw,64px)}
.cta h2 em{font-style:normal; color:var(--saffron)}
.cta p{margin:14px 0 0; max-width:440px; line-height:1.55; font-weight:700; color:rgba(246,230,217,.88)}
.cta__btns{display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end}
@media (max-width:820px){ .cta{grid-template-columns:1fr} .cta__btns{justify-content:flex-start} }

/* ---------- article ---------- */
.a-hero h1{font-size:clamp(38px,6vw,88px); max-width:16ch; margin-top:12px; color:var(--red)}
.a-urdu{margin:18px 0 0; font-style:italic; font-weight:800; font-size:clamp(16px,1.4vw,19px); color:var(--red-deep)}
.a-meta{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:22px; font-weight:800; font-size:14px; color:var(--red-deep)}
.a-meta span{display:inline-flex; align-items:center; gap:8px}
.a-meta span + span::before{content:""; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.5}
.a-layout{display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:clamp(28px,5vw,72px); padding-top:clamp(36px,5vw,64px); align-items:start}
.short{position:relative; background:var(--paper); border-radius:26px; padding:clamp(22px,3vw,32px); border:2px solid var(--red)}
.short .eyebrow{color:var(--red); display:flex; align-items:center; gap:10px; margin-bottom:12px}
.short .eyebrow::before{content:""; width:10px; height:24px; border-radius:50%; background:var(--red)}
.short p{margin:0; font-size:clamp(18px,1.6vw,21px); line-height:1.55; font-weight:700; color:var(--ink)}
.short strong{color:var(--red-deep)}
.prose{font-size:17.5px; line-height:1.7; color:var(--ink-soft); font-weight:600}
.prose section{padding-top:clamp(34px,4vw,48px)}
.prose h2{font-family:'Titan One'; font-weight:400; text-transform:uppercase; font-size:clamp(24px,2.4vw,32px); line-height:1; color:var(--ink); margin:0 0 16px}
.prose p{margin:0 0 14px}
.prose strong{color:var(--ink)}
.steps{list-style:none; counter-reset:s; margin:0; padding:0; display:grid; gap:12px}
.steps li{counter-increment:s; display:grid; grid-template-columns:38px 1fr; gap:14px; align-items:start}
.steps li::before{content:counter(s); width:38px; height:38px; border-radius:50%; background:var(--saffron); color:var(--red); font-family:'Titan One'; font-size:17px; display:grid; place-items:center}
.steps li span{padding-top:6px}
.ticks{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.ticks li{position:relative; padding-left:30px}
.ticks li::before{content:""; position:absolute; left:4px; top:7px; width:9px; height:20px; border-radius:50%; background:var(--red)}
.table{overflow-x:auto; border-radius:20px; background:var(--paper); border:1.5px solid var(--line)}
.table table{width:100%; border-collapse:collapse; font-size:15.5px; line-height:1.4; min-width:420px}
.table th,.table td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:top}
.table thead th{font-weight:900; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--red); background:var(--saffron-soft)}
.table tbody th{font-weight:900; color:var(--ink)}
.table tbody tr:last-child th,.table tbody tr:last-child td{border-bottom:0}
.tip{margin-top:clamp(28px,3.4vw,40px); background:var(--ink); color:var(--cream); border-radius:22px; padding:20px 22px; display:grid; gap:6px}
.tip strong{font-weight:900; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--saffron)}
.tip p{margin:0; font-size:16px; line-height:1.55; color:rgba(246,230,217,.9)}

.aside{display:grid; gap:16px}
@media (min-height:940px) and (min-width:981px){ .aside{position:sticky; top:110px} }
.toc{background:var(--paper); border-radius:22px; padding:18px 18px 14px}
.toc .eyebrow{color:var(--muted); font-size:11.5px; display:block; margin-bottom:10px}
.toc ol{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.toc a{display:block; padding:8px 10px 8px 14px; border-radius:10px; font-weight:800; font-size:14.5px; line-height:1.3; color:var(--muted); border-left:3px solid transparent; transition:color .2s, background-color .2s, border-color .2s}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--red); background:var(--saffron-soft); border-left-color:var(--red)}

/* our pick card (Know Your Rice style) */
.pick{background:var(--saffron); color:var(--red); border-radius:28px; padding:20px; display:grid; gap:12px; overflow:hidden}
.pick .eyebrow{color:var(--red-deep); font-size:11.5px}
.pick__img{width:72%; justify-self:center; aspect-ratio:1; border-radius:20px; overflow:hidden; transform:rotate(-3deg); box-shadow:0 30px 50px -28px rgba(120,40,0,.6); transition:transform .5s var(--spring)}
.pick:hover .pick__img{transform:rotate(1deg) scale(1.03)}
.pick__img img{width:100%; height:100%; object-fit:cover}
/* product photo placeholder (until real photos are added) */
.ph{width:100%; height:100%; background:var(--tone); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; color:rgba(19,23,40,.55); font-weight:800; font-size:12px; line-height:1.3; padding:10px; background-image:radial-gradient(rgba(19,23,40,.08) 1.2px, transparent 1.3px); background-size:12px 12px}
.ph svg{width:30px; height:30px; color:rgba(19,23,40,.35)}
.pick h3{font-family:'Titan One'; font-weight:400; text-transform:uppercase; font-size:26px; line-height:.95; margin:4px 0 0}
.pick__line{margin:0; font-weight:800; font-size:14.5px; line-height:1.45; color:var(--red-deep)}
.pick__row{display:flex; justify-content:space-between; align-items:center; gap:10px; font-weight:900; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--red-deep)}
.pick__chips{display:flex; flex-wrap:wrap; gap:6px}
.pick__chips span{padding:4px 10px; border-radius:999px; border:1.5px solid var(--red); font-weight:800; font-size:12.5px}
.pick__btns{display:grid; gap:8px; margin-top:4px}
.pick__btns .btn{justify-content:center}
.pick--wide{grid-template-columns:200px 1fr; align-items:center; gap:22px; padding:24px}
.pick--wide .pick__img{width:100%}

.related{padding-top:clamp(48px,7vw,90px)}
.related h2{font-size:clamp(28px,3.2vw,44px); margin-bottom:20px}
.rgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.rcard{display:flex; flex-direction:column; gap:10px; padding:22px; border-radius:22px; background:var(--paper); border:1.5px solid transparent; min-height:170px; transition:border-color .25s, transform .35s var(--ease)}
.rcard:hover{border-color:var(--red); transform:translateY(-3px)}
.rcard .eyebrow{color:var(--red); font-size:11px}
.rcard h3{margin:0; font-weight:900; font-size:18px; line-height:1.3}
.rcard .more{margin-top:auto; font-weight:900; font-size:14px; color:var(--red); display:inline-flex; gap:6px; align-items:center}
.back{display:inline-flex; align-items:center; gap:8px; margin-top:26px; font-weight:900; color:var(--red)}

@media (max-width:980px){
  .a-layout{grid-template-columns:1fr}
  .aside{position:static; order:2}
  .toc{display:none}
  .pick{grid-template-columns:150px 1fr; align-items:center}
  .pick .pick__img{grid-row:1 / span 6; width:100%}
}
@media (max-width:820px){
  .topic{grid-template-columns:1fr}
  .topic__head{position:static}
  .rgrid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .pick{grid-template-columns:1fr}
  .pick .pick__img{grid-row:auto; width:64%}
  .q{padding:18px}
  .prose{font-size:16.5px}
}

/* reveal */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .9s var(--ease)}
.reveal.is-in{opacity:1; transform:none}

/* ---------- footer (same as main site) ---------- */
.footer{margin-top:clamp(56px,8vw,110px); background:var(--ink); color:var(--cream); border-radius:40px 40px 0 0; padding:clamp(48px,7vw,90px) var(--gut) 0; overflow:hidden}
.footer__in{max-width:1400px; margin:0 auto}
.footer__cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:36px 28px}
.footer h3{font-family:'Titan One'; font-weight:400; font-size:18px; text-transform:uppercase; color:var(--lime); margin:0 0 16px}
.footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; font-weight:700}
.footer ul a{transition:color .2s} .footer ul a:hover{color:var(--orange)}
.footer__about img{height:110px; margin-bottom:18px}
.footer__about p{margin:0 0 18px; line-height:1.55; color:rgba(246,230,217,.8); max-width:280px; font-weight:700}
.pill{display:inline-block; padding:9px 14px; border-radius:999px; border:1.5px solid rgba(246,230,217,.4); font-weight:800; font-size:13px; transition:background-color .2s, color .2s}
.pill:hover{background:var(--cream); color:var(--ink)}
.footer__word{font-family:'Thesead','Titan One',sans-serif; font-size:clamp(44px,11.5vw,170px); line-height:.85; text-align:center; white-space:nowrap; margin:clamp(40px,6vw,72px) 0 0}
.footer__base{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; border-top:1px solid rgba(246,230,217,.15); margin-top:18px; padding:18px 0 24px; font-size:13px; font-weight:700; color:rgba(246,230,217,.6)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important; animation:none !important}
  .mask > span,.rise,.reveal{transform:none; opacity:1}
}

/* ---------- guide themes (rice = default saffron/red, like Know Your Rice) ---------- */
body.t-achaar{--saffron:#FD5225; --saffron-2:#FE7B55; --saffron-soft:#FFD9CC; --red:#5C0606; --red-deep:#3F0303}
body.t-daal{--saffron:#31A0A9; --saffron-2:#62BEC4; --saffron-soft:#CFE8E9; --red:#0B4550; --red-deep:#072F37}
body.t-atta{--saffron:#F4E4F1; --saffron-2:#E9CFE3; --saffron-soft:#F8EEF6; --red:#A80A44; --red-deep:#7E0733}
body.t-achaar .grains,body.t-daal .grains{opacity:.16}
body.t-atta .grains{opacity:.1}
.pick__price{margin:8px 0 0; font-weight:800; color:var(--red-deep)} .pick__price strong{font-size:20px} .pick__price s{opacity:.55; margin-left:4px}