/* ═══════════════ SWEETYPEDIA ═══════════════
   Loud by construction. One shouting colour (Swiggy orange) as the FIELD, not the trim, plus ink and
   paper. Type at billboard scale. Everything hand-drawn is real SVG linework, not a texture image.

   Rules held from earlier passes: solid colour only, never a gradient. No em dashes anywhere in copy.
   A null count renders as nothing at all, never a zero. */

:root{
  --or:#EE6823;        /* the official orange, sampled from the supplied logo artwork */
  --or-d:#D2410A;      /* the shadow side of orange */
  --ink:#141210;
  --paper:#FFF6EA;
  --acid:#FFE600;      /* the highlighter */
  --pink:#FF3D8A;
  --lilac:#7B6CF6;
  --mint:#20E3A2;
  --varak:#E8C87A;     /* the gold leaf on the kaju katli */

  --ig:#C13584; --li:#0A66C2; --x:#111; --rd:#FF4500; --yt:#FF0000;
  --pr:#1F7A4D; --th:#333; --fb:#1877F2; --qu:#B92B27;

  --poster:"Anton","Arial Narrow",Impact,system-ui,sans-serif;
  --disp:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;
  --sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;

  --b:4px solid var(--ink);
  --pop:8px 8px 0 var(--ink);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.5 var(--sans);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
.wrap{max-width:1240px;margin:0 auto;padding:0 22px}
a{color:inherit}

/* the highlighter swipe. a solid acid block behind the words, knocked slightly off square so it
   reads as a marker stroke rather than a <span> with a background. */
mark, em{
  font-style:normal;color:var(--ink);background:var(--acid);
  padding:0 .14em;margin:0 -.04em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
  clip-path:polygon(0.4% 6%,99.6% 2%,99.3% 95%,0.8% 98%)}
em.pink{background:var(--pink);color:var(--paper)}

/* hand-drawn wobble. feTurbulence shoves the edges around so a straight CSS border reads as ink.
   Decoration only: never put it on anything holding body text, it makes small type swim. */
.sketch{filter:url(#wobble)}

/* ═══════════════ the bar ═══════════════ */
.top{position:sticky;top:0;z-index:40;background:var(--or);border-bottom:var(--b)}
.top .wrap{display:flex;align-items:center;gap:18px;padding:14px 22px;flex-wrap:wrap}
.mark{display:flex;align-items:center;gap:13px;text-decoration:none;flex:0 0 auto}
/* the mark alone, cut from the supplied artwork. Sized to sit level with the wordmark, not under it. */
.lockup{height:46px;width:auto;display:block;flex:0 0 auto}
.markword{font:400 38px/1 var(--poster);letter-spacing:.005em;text-transform:uppercase}
.searchrow{flex:1 1 340px;display:flex;gap:10px;min-width:0}
.searchrow input{flex:1;min-width:0;padding:15px 20px;font:600 17px var(--sans);
  border:var(--b);border-radius:0;background:var(--paper);color:var(--ink);outline:none;
  box-shadow:5px 5px 0 var(--ink)}
.searchrow input::placeholder{color:#9A8977;font-weight:600}
.searchrow input:focus{background:#fff;box-shadow:7px 7px 0 var(--ink)}
.searchrow button{padding:15px 26px;font:400 20px var(--poster);letter-spacing:.03em;text-transform:uppercase;
  border:var(--b);background:var(--ink);color:var(--acid);cursor:pointer;white-space:nowrap;
  box-shadow:5px 5px 0 var(--or-d)}
.searchrow button:hover{background:var(--acid);color:var(--ink);box-shadow:5px 5px 0 var(--ink)}
.searchrow button:active{transform:translate(4px,4px);box-shadow:none}

/* ═══════════════ landing ═══════════════ */
.hello{background:var(--or);border-bottom:var(--b);padding:70px 0 80px;position:relative;overflow:hidden}
.hello h1{
  font:400 clamp(52px,11.4vw,150px)/.95 var(--poster);letter-spacing:-.005em;text-transform:uppercase;
  margin:0 0 30px;max-width:14ch}
/* The highlight box is as tall as the line box it sits in, so at poster scale it swallows the
   paragraph beneath. Shrinking line-height alone is a trap: it shrinks the LINE BOX too, so the
   highlighted line rides up into the one above it. inline-block gives the swipe its own height
   while still reserving its full space in the flow. */
.hello h1 mark,.hello h1 em{display:inline-block;line-height:.78;padding:.08em .12em}
.sub{font:600 clamp(18px,2.2vw,24px)/1.35 var(--sans);max-width:36ch;margin:0 0 32px}

.pool{display:inline-block;font:700 15px/1.6 var(--sans);margin:0 0 30px;
  background:var(--paper);border:var(--b);padding:14px 20px;box-shadow:var(--pop);transform:rotate(-.8deg)}
.pool b{font-family:var(--poster);font-weight:400;font-size:24px;letter-spacing:.01em}

.chips{display:flex;flex-wrap:wrap;gap:12px;max-width:940px}
.chip{background:var(--paper);border:var(--b);padding:12px 20px;font:700 16px var(--sans);
  cursor:pointer;box-shadow:5px 5px 0 var(--ink)}
.chip:nth-child(3n+1){background:var(--acid)}
.chip:nth-child(3n+2){background:var(--paper)}
.chip:nth-child(3n+3){background:var(--mint)}
.chip:nth-child(odd){transform:rotate(-1.4deg)}
.chip:nth-child(even){transform:rotate(1.1deg)}
.chip:hover{transform:rotate(0) translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.chip:active{transform:translate(3px,3px);box-shadow:none}

/* the pool, as solid platform tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(136px,1fr));gap:14px;margin-top:44px;max-width:1060px}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;cursor:pointer;
  border:var(--b);padding:18px 16px 15px;color:#fff;background:var(--ink);box-shadow:6px 6px 0 var(--ink)}
.tile:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--ink)}
.tile:active{transform:translate(3px,3px);box-shadow:none}
.tile .tv{font:400 42px/1 var(--poster);letter-spacing:0}
.tile .tl{font:800 11px var(--disp);letter-spacing:.14em;text-transform:uppercase;opacity:.92}
.t-instagram{background:var(--ig)} .t-linkedin{background:var(--li)} .t-x{background:var(--x)}
.t-reddit{background:var(--rd)} .t-youtube{background:var(--yt)} .t-press{background:var(--pr)}
.t-threads{background:var(--th)}

/* ── the box, lying in the layout ── */
.box{position:absolute;right:4%;top:84px;width:300px;height:300px;pointer-events:none;
  display:none}
@media (min-width:1080px){.box{display:block}}
.boxlid{position:absolute;inset:0;background:var(--or-d);border:var(--b);
  box-shadow:14px 14px 0 rgba(20,18,16,.3);transform:rotate(-9deg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.boxmark{width:104px;height:auto;display:block}
.boxword{font:400 54px/1 var(--poster);color:var(--paper);letter-spacing:.01em}
.boxline{font:700 12px var(--sans);color:var(--paper);letter-spacing:.04em;opacity:.95}
/* kaju katli, spilled. the sweets are where sweets should not be. */
.box i{position:absolute;width:52px;height:34px;background:var(--varak);
  border:3px solid var(--ink);transform:rotate(45deg) skewX(-12deg)}
.katli1{left:-40px;top:34px;transform:rotate(38deg) skewX(-14deg)}
.katli2{left:-16px;bottom:-26px;transform:rotate(-24deg) skewX(-10deg)}
.katli3{right:-34px;bottom:48px;transform:rotate(62deg) skewX(-12deg)}

/* ═══════════════ results ═══════════════ */
.results{padding:40px 0 110px}
.answer mark{display:inline-block;line-height:.78;padding:.06em .1em}
.answer{font:400 clamp(32px,6vw,78px)/1 var(--poster);text-transform:uppercase;
  letter-spacing:-.005em;margin:0 0 16px;max-width:17ch}
.readas{display:inline-block;font:700 14px var(--sans);margin:0 0 34px;
  background:var(--ink);color:var(--paper);padding:8px 16px}
.loading{font:400 30px var(--poster);text-transform:uppercase;color:var(--or-d);padding:40px 0;display:block}

/* ── the hero: one document, drawn as a poster ── */
.hero:not(:empty){margin:0 0 54px}
.herocard{position:relative;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  background:#fff;border:var(--b);box-shadow:12px 12px 0 var(--ink);cursor:pointer}
.herocard:hover{transform:translate(-4px,-4px);box-shadow:16px 16px 0 var(--ink)}
/* the screengrab IS the archive. It is shown as captured, uncropped, as big as the card allows. */
.herocard .shot{margin:0;background:var(--or);border-right:var(--b);padding:18px;
  display:flex;align-items:center;justify-content:center}
.herocard .shot img{width:100%;height:auto;max-height:760px;object-fit:contain;display:block;
  border:3px solid var(--ink)}
.herocard .body{padding:34px 36px 28px;min-width:0;display:flex;flex-direction:column;gap:16px}
.herocard .body .text{font:600 22px/1.4 var(--sans)}
/* No screengrab means no screengrab. It is set as a quote in reading type and SAYS it has no
   picture. Re-typesetting a post in a display face and calling it the visual is a lie about what
   the archive holds. */
.herocard.noshot{grid-template-columns:1fr;background:var(--acid)}
.herocard.noshot .body{padding:36px 38px 28px}
.herocard.noshot .body .text{font:600 clamp(19px,2.2vw,25px)/1.45 var(--sans);text-transform:none;
  display:-webkit-box;-webkit-line-clamp:16;-webkit-box-orient:vertical;overflow:hidden}
.herocard.noshot .body::before{content:"no screengrab captured for this one";
  font:800 10.5px var(--disp);letter-spacing:.18em;text-transform:uppercase;color:#8A7A3A}
.heroflag{align-self:flex-start;background:var(--ink);color:var(--acid);
  font:400 15px var(--poster);letter-spacing:.14em;text-transform:uppercase;padding:7px 15px;
  transform:rotate(-2.5deg);display:flex;align-items:center;gap:9px}
.heroflag::before{content:"";width:12px;height:12px;background:var(--varak);
  border:2px solid var(--acid);transform:rotate(45deg)}
.herocard .body::after{content:"sweetypedia · .tangibl";margin-top:auto;padding-top:16px;
  font:800 11px var(--disp);letter-spacing:.2em;text-transform:uppercase;color:#9A8977}

/* ── sections ── */
.sechead{display:flex;align-items:center;gap:14px;margin:54px 0 20px;flex-wrap:wrap}
.sechead h2{font:400 clamp(26px,3.6vw,44px) var(--poster);text-transform:uppercase;letter-spacing:0;margin:0}
.sechead .count{font:800 12px var(--disp);letter-spacing:.11em;text-transform:uppercase;
  background:var(--acid);border:3px solid var(--ink);padding:5px 12px}
/* kaju katli, laid out in a tray. the campaign's own sweet, used as the rule between sections. */
.sechead .katli{flex:1;min-width:40px;height:18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='18'%3E%3Cpath d='M15 1 L27 9 L15 17 L3 9 Z' fill='%23E8C87A' stroke='%23141210' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-position:left center}
/* the tray: sweets packed in rows. a gold hairline inside the ink border is the varak. */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:20px}

.card{background:#fff;border:var(--b);overflow:hidden;cursor:pointer;display:flex;flex-direction:column;
  box-shadow:7px 7px 0 var(--ink);outline:2px solid var(--varak);outline-offset:-7px}
.card:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--or-d)}
.card:focus-visible{outline:none;transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--lilac)}
.card .shot{margin:0;background:var(--or);padding:10px;border-bottom:var(--b);
  display:flex;align-items:center;justify-content:center;min-height:150px}
.card .shot img{width:100%;height:auto;max-height:440px;object-fit:contain;display:block;
  border:2px solid var(--ink)}
.card .body{padding:17px 18px 18px;display:flex;flex-direction:column;gap:11px;flex:1;min-width:0}
.card .text{font:500 15.5px/1.44 var(--sans);overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}

.who{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.badge{font:800 10px var(--disp);letter-spacing:.13em;text-transform:uppercase;color:#fff;
  padding:4px 10px;flex:0 0 auto;border:2px solid var(--ink)}
.b-instagram{background:var(--ig)} .b-linkedin{background:var(--li)} .b-x{background:var(--x)}
.b-reddit{background:var(--rd)} .b-youtube{background:var(--yt)} .b-press{background:var(--pr)}
.b-threads{background:var(--th)} .b-facebook{background:var(--fb)} .b-quora{background:var(--qu)}
.author{font:800 14.5px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta{font-size:12px;color:#9A8977;font-weight:700;display:flex;gap:12px;flex-wrap:wrap;
  margin-top:auto;padding-top:6px}
.meta .n b{color:var(--ink);font-family:var(--poster);font-weight:400;font-size:17px;letter-spacing:.01em}
.owned{background:var(--or);border:2px solid var(--ink);font:800 10px var(--disp);
  letter-spacing:.1em;text-transform:uppercase;padding:3px 9px}
.tone{display:flex;gap:6px;flex-wrap:wrap}
.t{font:800 10px var(--disp);letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border:2px solid var(--ink)}
.t-funny{background:var(--acid)} .t-critical{background:#FF7A5C} .t-praise{background:var(--mint)}

/* ═══════════════ findings ═══════════════ */
.findings{margin-top:60px;display:flex;flex-direction:column;gap:28px}
.finding{background:#fff;border:var(--b);padding:30px 32px;box-shadow:8px 8px 0 var(--ink)}
.finding h3{font:400 clamp(24px,3vw,36px) var(--poster);text-transform:uppercase;margin:0 0 20px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:22px}
.stat{border-left:6px solid var(--or);padding-left:16px}
.stat:nth-child(4n+2){border-left-color:var(--pink)}
.stat:nth-child(4n+3){border-left-color:var(--lilac)}
.stat:nth-child(4n+4){border-left-color:var(--mint)}
.stat .v{font:400 clamp(40px,5.4vw,62px)/.9 var(--poster)}
.stat .l{font:800 12px var(--disp);text-transform:uppercase;letter-spacing:.12em;margin-top:8px}
.stat .n{font-size:12.5px;color:#9A8977;margin-top:5px;line-height:1.4;font-weight:600}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:420px}
th,td{text-align:left;padding:11px 16px 11px 0;border-bottom:2px solid var(--ink);white-space:nowrap}
th{font:800 11px var(--disp);text-transform:uppercase;letter-spacing:.12em}
td{font-weight:700}
td:first-child{white-space:normal}
.note{font-size:13.5px;color:#9A8977;margin:18px 0 0;line-height:1.5;font-weight:600}

/* ═══════════════ panel ═══════════════ */
.scrim{position:fixed;inset:0;background:rgba(20,18,16,.72);z-index:50}
.panel{position:fixed;top:0;right:0;bottom:0;width:min(680px,100%);background:var(--paper);z-index:51;
  overflow-y:auto;border-left:var(--b);padding:30px 34px 90px;-webkit-overflow-scrolling:touch}
.panelclose{position:sticky;top:0;float:right;background:var(--ink);color:var(--acid);border:3px solid var(--ink);
  width:46px;height:46px;font:400 26px var(--poster);line-height:1;cursor:pointer;z-index:2}
.panelclose:hover{background:var(--pink);color:var(--ink)}
.panel .shot{margin:20px 0 22px;border:var(--b);overflow:hidden;background:var(--ink);box-shadow:8px 8px 0 var(--or)}
.panel .shot img{width:100%;display:block}
.panel .full{font:500 17.5px/1.6 var(--sans);white-space:pre-wrap;overflow-wrap:anywhere;margin:18px 0}
.panel h3{font:400 clamp(26px,3.6vw,38px) var(--poster);text-transform:uppercase;margin:16px 0 8px;line-height:.98}
.panel .src{display:inline-block;margin-top:14px;font:400 18px var(--poster);text-transform:uppercase;
  letter-spacing:.03em;text-decoration:none;background:var(--or);border:var(--b);padding:11px 20px;
  box-shadow:5px 5px 0 var(--ink)}
.panel .src:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.replies{margin-top:32px;border-top:var(--b);padding-top:20px}
.replies h4{font:400 20px var(--poster);text-transform:uppercase;margin:0 0 14px}
.reply{border-bottom:2px solid #E6D6BE;padding:14px 0}
.reply .author{font-size:13.5px}
.reply .text{font:500 15px/1.45 var(--sans);margin-top:4px;overflow-wrap:anywhere}

/* ═══════════════ the spin: the habit loop ═══════════════ */
.spinbar{position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--ink);border-top:var(--b);
  display:flex;align-items:center;gap:14px;padding:11px 22px}
.spinbar .lbl{font:800 11px var(--disp);letter-spacing:.16em;text-transform:uppercase;color:#9A8977;
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spin{font:400 22px var(--poster);text-transform:uppercase;letter-spacing:.04em;cursor:pointer;
  background:var(--acid);color:var(--ink);border:3px solid var(--acid);padding:9px 26px;white-space:nowrap}
.spin:hover{background:var(--or);border-color:var(--or)}
.spin:active{transform:translateY(3px)}
body{padding-bottom:98px}

/* ═══════════════ empty + footer ═══════════════ */
.empty{padding:90px 0}
.empty p{font:400 clamp(30px,5vw,56px) var(--poster);text-transform:uppercase;max-width:18ch;line-height:1}
.empty mark{display:inline-block;line-height:.78;padding:.06em .1em}
.foot{border-top:var(--b);background:var(--ink);color:var(--paper);padding:42px 0 50px;margin-top:60px}
.foot p{font-size:14px;line-height:1.6;max-width:70ch;margin:0 0 12px;color:#C9B9A6;font-weight:600}
.foot b{color:var(--or)}
.tangibl{font:400 24px var(--poster)!important;text-transform:uppercase;color:var(--paper)!important}

@media (max-width:780px){
  .herocard{grid-template-columns:1fr}
  .herocard .shot{border-right:0;border-bottom:var(--b)}
  .herocard .shot img{max-height:380px}
  .herocard .body{padding:24px}
  .hello{padding:46px 0 60px}
  .panel{padding:22px 20px 90px;border-left:0;border-top:var(--b)}
  .grid{grid-template-columns:1fr}
  .markword{font-size:28px}
  .lockup{height:36px}
  .spinbar .lbl{display:none}
  .spin{flex:1;text-align:center}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}