/* ==========================================================================
   Nona Social · Social media examples
   Every post is a 4:5 (1080×1350) canvas. Sizes inside a post use cqw so
   the whole design scales as one piece at any card width.
   ========================================================================== */

.social-top {
  border-bottom: 1.5px solid var(--line);
  background: var(--paper);
}
.social-top .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.social-intro { padding: clamp(48px, 8vw, 110px) 0 clamp(32px, 5vw, 56px); }
.social-intro .section-title { max-width: 900px; }
.social-intro .section-sub { max-width: 640px; }
.spec-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.spec {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
}
.spec.fill { background: var(--ink); color: var(--paper); }
.spec.swatch { display: inline-flex; align-items: center; gap: 8px; }
.spec.swatch i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); border: 1px solid rgba(0,0,0,.2); }

.feed {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 36px);
  padding-bottom: var(--section);
}
@media (max-width: 1000px) { .feed { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .feed { grid-template-columns: 1fr; } }

.slot-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.slot-label { flex-wrap: wrap; }
.slot-label span:last-child { color: var(--muted); }

/* ---------- Instagram frame ---------- */

.ig {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 18px 40px -24px rgba(21,19,19,.35);
}
.ig-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.2;
}
.ig-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: var(--f-logo);
  font-weight: 700;
  font-size: 11px;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ig-head b { display: block; font-weight: 700; }
.ig-head small { color: var(--muted); font-size: 12px; }
.ig-actions {
  display: flex;
  gap: 14px;
  padding: 10px 12px 4px;
}
.ig-actions svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.8; }
.ig-actions svg:last-child { margin-left: auto; }
.ig-cap {
  padding: 4px 12px 14px;
  font-size: 14px;
  line-height: 1.45;
}
.ig-cap b { font-weight: 700; margin-right: 4px; }
.ig-cap .tags { color: #2d5b8a; }

/* ---------- Post canvas ---------- */

.post {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  font-family: var(--f-display);
  color: var(--ink);
  isolation: isolate;
}
.post .cv { position: absolute; inset: 0; }

.d {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 112;
  font-weight: 800;
  text-transform: uppercase;
  line-height: .9;
  letter-spacing: -.01em;
  margin: 0;
}
.cs { font-family: var(--f-script); font-weight: 700; line-height: 1; text-transform: none; }
.bg { background-image: var(--img); background-size: var(--zoom, cover); background-position: var(--pos, center); background-repeat: no-repeat; }

/* Logo mark, scales from one font-size */
.mk {
  font-family: var(--f-logo);
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  font-size: var(--mk, 5cqw);
  color: currentColor;
}
.mk-nona { font-weight: 700; letter-spacing: .02em; display: flex; align-items: flex-start; }
.mk-o {
  display: inline-block;
  font-size: .56em;
  line-height: .9;
  margin: .04em .06em 0;
  padding-bottom: .1em;
  border-bottom: .16em solid currentColor;
}
.mk-social {
  font-weight: 600;
  font-size: .324em;
  letter-spacing: .72em;
  margin-top: .45em;
  padding-bottom: .27em;
  border-bottom: .18em solid currentColor;
  text-align: center;
  margin-right: -.72em;
  padding-right: .72em;
}
.mk-bk { font-weight: 600; font-size: .22em; letter-spacing: .42em; margin-top: .55em; text-align: center; }

/* 01 · Photo overlay ------------------------------------------------------ */
.p-overlay { background: var(--ink); color: #fff; }
.p-overlay .cv.bg { --img: url(assets/old-fashioned.jpg); --pos: 58% 50%; }
.p-overlay .shade { background: radial-gradient(ellipse at 50% 52%, rgba(0,0,0,.05), rgba(0,0,0,.55) 75%), linear-gradient(transparent 60%, rgba(0,0,0,.55)); }
.p-overlay .top { position: absolute; top: 6cqw; left: 0; right: 0; text-align: center; --mk: 4.4cqw; }
.p-overlay h3 {
  position: absolute;
  top: 46%;
  left: 6cqw;
  right: 6cqw;
  transform: translateY(-50%);
  text-align: center;
  font-size: 10.4cqw;
  text-shadow: 0 .4cqw 3cqw rgba(0,0,0,.35);
}
.p-overlay .foot {
  position: absolute;
  bottom: 6cqw;
  left: 0;
  right: 0;
  text-align: center;
  font-weight: 700;
  font-size: 3cqw;
  letter-spacing: .02em;
}
.p-overlay .foot em { font-style: normal; color: var(--accent); }

/* 02 · Solid colour hero -------------------------------------------------- */
.p-solid {
  background: radial-gradient(circle at 50% 42%, #ff9a52 0%, var(--accent) 45%, var(--accent-ink) 100%);
  color: #fff;
}
.p-solid .top { position: absolute; top: 6cqw; left: 0; right: 0; text-align: center; --mk: 4cqw; }
.p-solid h3 {
  position: absolute;
  top: 17cqw;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 20.5cqw;
  font-variation-settings: "wdth" 125;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: .8;
  z-index: 2;
}
.p-solid .arch {
  position: absolute;
  left: 18cqw;
  right: 18cqw;
  top: 39cqw;
  bottom: 18cqw;
  border-radius: 50cqw 50cqw 3cqw 3cqw;
  border: 1.2cqw solid #fff;
  --img: url(assets/food-spread.jpg);
  --zoom: 330%;
  --pos: 76% 58%;
  box-shadow: 0 3cqw 6cqw -2cqw rgba(80,20,0,.5);
  z-index: 1;
}
.p-solid .tag {
  position: absolute;
  right: 8cqw;
  top: 44cqw;
  font-size: 7.2cqw;
  transform: rotate(-8deg);
  z-index: 3;
  color: var(--ink);
}
.p-solid .sauce-row {
  position: absolute;
  left: 5cqw;
  right: 5cqw;
  bottom: 6.5cqw;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.4cqw 3cqw;
  font-weight: 700;
  font-size: 2.5cqw;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.p-solid .sauce-row span + span::before { content: "●"; margin-right: 3cqw; font-size: .7em; vertical-align: .15em; opacity: .7; }

/* 03 · Price callout ------------------------------------------------------ */
.p-price { background: #ece7de; }
.p-price .light {
  background:
    linear-gradient(115deg, transparent 18%, rgba(255,255,255,.75) 18% 26%, transparent 26% 34%, rgba(255,255,255,.7) 34% 41%, transparent 41%),
    linear-gradient(25deg, transparent 55%, rgba(255,255,255,.6) 55% 62%, transparent 62%);
  filter: blur(2.4cqw);
  inset: -6cqw;
}
.p-price .row {
  position: absolute;
  top: 7cqw;
  left: 8cqw;
  right: 8cqw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  --mk: 3.4cqw;
}
.p-price .row b { font-size: 3.2cqw; font-weight: 800; font-style: italic; letter-spacing: -.01em; }
.p-price h3 {
  position: absolute;
  top: 18cqw;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 14cqw;
  font-variation-settings: "wdth" 100;
  text-transform: none;
  letter-spacing: -.03em;
  line-height: .86;
  color: var(--accent);
}
.p-price .plate {
  position: absolute;
  left: 22cqw;
  width: 56cqw;
  top: 49cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  --img: url(assets/food-spread.jpg);
  --zoom: 290%;
  --pos: 30% 25%;
  box-shadow: 0 4cqw 8cqw -3cqw rgba(21,19,19,.45);
}
.p-price .deal {
  position: absolute;
  left: 7cqw;
  top: 58cqw;
  width: 26cqw;
  height: 19cqw;
  display: grid;
  place-items: center;
  text-align: center;
  transform: rotate(-10deg);
  color: var(--accent);
  z-index: 2;
}
.p-price .deal svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.p-price .deal svg path { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; }
.p-price .deal small { display: block; font-family: var(--f-script); font-weight: 700; font-size: 5cqw; line-height: .8; }
.p-price .deal strong { display: block; font-weight: 900; font-size: 8cqw; letter-spacing: -.04em; line-height: .9; }
.p-price p {
  position: absolute;
  left: 10cqw;
  right: 10cqw;
  bottom: 7cqw;
  text-align: center;
  font-style: italic;
  font-size: 3.5cqw;
  line-height: 1.3;
}

/* 04 · Editorial poster --------------------------------------------------- */
.p-editorial { background: #fff; }
.p-editorial .inner { position: absolute; inset: 8cqw 8cqw 8cqw; }
.p-editorial .cs { font-size: 6cqw; color: var(--accent); }
.p-editorial h3 {
  margin-top: 2cqw;
  font-size: 18cqw;
  font-variation-settings: "wdth" 125;
  font-weight: 900;
  font-style: italic;
  line-height: .8;
  letter-spacing: -.04em;
}
.p-editorial p { margin-top: 4cqw; font-size: 3.4cqw; line-height: 1.3; max-width: 62cqw; font-weight: 500; }
.p-editorial .ph {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 52cqw;
  --img: url(assets/drinks.jpg);
  --pos: 55% 60%;
}
.p-editorial .sticker {
  position: absolute;
  right: 6cqw;
  bottom: 44cqw;
  width: 19cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-content: center;
  text-align: center;
  transform: rotate(10deg);
  z-index: 2;
  line-height: .9;
}
.p-editorial .sticker b { font-size: 6.4cqw; font-weight: 900; font-variation-settings: "wdth" 110; }
.p-editorial .sticker span { font-size: 2.2cqw; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* 05 · Scoreboard --------------------------------------------------------- */
.p-score { background: var(--ink); color: var(--paper); }
.p-score .inner { position: absolute; inset: 8cqw; display: flex; flex-direction: column; }
.p-score .cs { font-size: 6.4cqw; color: var(--accent); }
.p-score h3 { margin-top: 2.4cqw; font-size: 9.2cqw; white-space: nowrap; }
.p-score .sub { margin-top: 2.4cqw; font-size: 6cqw; color: var(--paper); }
.p-score ul { list-style: none; margin: auto 0 0; padding: 0; }
.p-score li {
  display: grid;
  grid-template-columns: 17cqw 1fr auto;
  align-items: baseline;
  gap: 3cqw;
  padding: 2.7cqw 0;
  border-top: .3cqw solid rgba(244,239,230,.18);
}
.p-score li:last-child { border-bottom: .3cqw solid rgba(244,239,230,.18); }
.p-score .day { font-weight: 800; font-size: 2.6cqw; letter-spacing: .14em; color: var(--gold); }
.p-score .nm { font-weight: 800; font-size: 4.6cqw; font-variation-settings: "wdth" 110; text-transform: uppercase; }
.p-score .live { width: 2cqw; height: 2cqw; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1cqw rgba(232,80,31,.25); }
.p-score .foot {
  margin-top: 5cqw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 3cqw;
  font-weight: 600;
  --mk: 3.6cqw;
}

/* 06 · Bingo card --------------------------------------------------------- */
.p-bingo { background: var(--gold); }
.p-bingo .inner { position: absolute; inset: 7.5cqw; display: flex; flex-direction: column; align-items: center; text-align: center; }
.p-bingo .when {
  font-weight: 800;
  font-size: 2.8cqw;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--gold);
  padding: 1.2cqw 3cqw;
  border-radius: 99px;
}
.p-bingo h3 { margin-top: 4cqw; font-size: 16cqw; font-variation-settings: "wdth" 120; font-weight: 900; }
.p-bingo .cs { margin-top: 1.4cqw; font-size: 6cqw; color: #fff; text-shadow: 0 .3cqw 0 rgba(21,19,19,.25); }
.p-bingo .card {
  margin-top: auto;
  width: 64cqw;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .8cqw;
  background: var(--ink);
  padding: .8cqw;
  border-radius: 2cqw;
  transform: rotate(-3deg);
  box-shadow: 0 3cqw 6cqw -3cqw rgba(21,19,19,.6);
}
.p-bingo .card span {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: var(--paper);
  font-weight: 800;
  font-size: 4.2cqw;
  border-radius: 1cqw;
  position: relative;
}
.p-bingo .card .h { background: var(--ink); color: var(--gold); font-size: 5.6cqw; font-weight: 900; }
.p-bingo .card .x::after {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: rgba(232,80,31,.82);
}
.p-bingo .card .free { background: var(--accent); color: #fff; font-size: 2cqw; letter-spacing: .06em; line-height: 1; }

/* 07 · Headline over photo ------------------------------------------------ */
.p-table { background: var(--ink); color: #fff; }
.p-table .cv.bg { --img: url(assets/food-spread.jpg); --pos: 42% 60%; --zoom: auto 118%; }
.p-table .shade { background: linear-gradient(180deg, rgba(21,19,19,.85) 0%, rgba(21,19,19,.35) 38%, transparent 55%, rgba(21,19,19,.2) 100%); }
.p-table h3 { position: absolute; top: 7cqw; left: 7cqw; font-size: 13cqw; }
.p-table h3 span { color: var(--accent); }
.p-table .cs { position: absolute; top: 44cqw; left: 7cqw; font-size: 6cqw; color: var(--paper); transform: rotate(-4deg); }
.p-table .badge {
  position: absolute;
  right: 6cqw;
  bottom: 6cqw;
  width: 23cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent);
  display: grid;
  place-content: center;
  text-align: center;
  line-height: 1;
  transform: rotate(-8deg);
  box-shadow: 0 2cqw 5cqw rgba(0,0,0,.35);
}
.p-table .badge span { font-size: 2.4cqw; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.p-table .badge strong { font-size: 7.4cqw; font-weight: 900; font-variation-settings: "wdth" 110; margin: .6cqw 0; }

/* 08 · Big number --------------------------------------------------------- */
.p-num { background: var(--accent); color: var(--ink); }
.p-num .inner { position: absolute; inset: 7cqw 7cqw 0; }
.p-num .row { display: flex; justify-content: space-between; align-items: flex-start; --mk: 3.8cqw; }
.p-num .row b { font-size: 2.8cqw; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; text-align: right; line-height: 1.3; }
.p-num h3 {
  margin-top: 5cqw;
  font-size: 33cqw;
  font-variation-settings: "wdth" 125;
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: .78;
  margin-left: -1.5cqw;
}
.p-num p { margin-top: 5cqw; font-size: 7.4cqw; font-weight: 800; font-variation-settings: "wdth" 110; text-transform: uppercase; line-height: .95; }
.p-num p span { color: #fff; }
.p-num p.cs { text-transform: none; margin-top: 3cqw; font-size: 6cqw; color: #fff; }
.p-num .strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--ink);
  color: var(--paper);
  white-space: nowrap;
  overflow: hidden;
  padding: 2.4cqw 0;
  font-weight: 700;
  font-size: 2.8cqw;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.p-num .strip i { font-style: normal; color: var(--accent); margin: 0 2.4cqw; }

/* 09 · Parties ------------------------------------------------------------ */
.p-party { background: var(--paper); }
.p-party .inner { position: absolute; inset: 8cqw; display: flex; flex-direction: column; }
.p-party .cs { font-size: 6.4cqw; color: var(--accent); }
.p-party h3 { margin-top: 2cqw; font-size: 12cqw; }
.p-party h3 span { color: var(--accent); }
.p-party .pill {
  margin-top: 5cqw;
  height: 26cqw;
  border-radius: 99cqw;
  --img: url(assets/drinks.jpg);
  --pos: 50% 62%;
  --zoom: 150%;
}
.p-party ul { list-style: none; padding: 0; margin: 5cqw 0 0; display: grid; gap: 1.8cqw; }
.p-party li { font-size: 3.8cqw; font-weight: 600; display: flex; align-items: center; gap: 2.4cqw; }
.p-party li::before {
  content: "✦";
  color: var(--accent);
  font-size: 3.2cqw;
}
.p-party .cta {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  --mk: 3.6cqw;
}
.p-party .cta b {
  background: var(--ink);
  color: var(--paper);
  font-size: 2.8cqw;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 2.2cqw 4cqw;
  border-radius: 99px;
}