/*
 * File:     kikoworks/08_case_studies/case_d_kapet_buhay/posts.css
 * Project:  KikoWorks (Case D, practice project)
 * Purpose:  Design system for the twelve 1080x1080 social posts.
 * Author:   John Francis Sagadraca
 * Created:  2026-10-03 (first commit)
 * Notes:    Change a token here and every post updates.
 */
/* ==========================================================================
   Kape't Buhay — social post design system  (KikoWorks · Case Study D)
   ONE stylesheet drives all 12 posts. Change a token here → every post updates.
   Every post is authored at 1080×1080; feed_board.html scales them down.
   ========================================================================== */
:root{
  /* --- the 4 brand colors (this is the whole palette) --- */
  --espresso:#33231C;
  --persimmon:#DB6039;
  --cream:#F6EEE1;
  --olive:#6F7B45;
  /* derived tints (not new colors — just opacity/shade of the 4) */
  --espresso-80:#4A382F;
  --persimmon-12:rgba(219,96,57,.12);
  --cream-70:rgba(246,238,225,.70);

  /* --- the 2 brand fonts --- */
  --display:"Bricolage Grotesque","Trebuchet MS",sans-serif;
  --body:"DM Sans",system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}

/* ---- the canvas: every post is exactly 1080×1080 ---- */
.post{
  width:1080px;height:1080px;position:relative;overflow:hidden;
  font-family:var(--body);display:flex;flex-direction:column;
  padding:80px;
}

/* ---- color themes (bg + ink + accent), applied per post ---- */
.t-cream{background:var(--cream);--ink:var(--espresso);--accent:var(--persimmon);--accent2:var(--olive);}
.t-espresso{background:var(--espresso);--ink:var(--cream);--accent:var(--persimmon);--accent2:var(--olive);}
.t-persimmon{background:var(--persimmon);--ink:var(--cream);--accent:var(--espresso);--accent2:var(--cream);}
.t-olive{background:var(--olive);--ink:var(--cream);--accent:var(--cream);--accent2:var(--espresso);}
.post{color:var(--ink);}

/* soft background motif (coffee ring) — subtle, shared */
.post::after{
  content:"";position:absolute;right:-160px;bottom:-160px;width:560px;height:560px;
  border-radius:50%;border:40px solid currentColor;opacity:.05;
}

/* ---- SVG motif fills (classed so they can read theme vars) ---- */
.i-cup .ink,.i-avatar .ink{fill:var(--ink);}
.i-cup .acc{fill:var(--accent);}
.i-cup .steam{stroke:var(--accent);stroke-width:7;stroke-linecap:round;fill:none;}
.i-avatar .ring{fill:var(--accent);opacity:.18;}

/* ---- brand bar: logo lockup, ALWAYS top-left (the placement rule) ---- */
.brandbar{display:flex;align-items:center;gap:16px;position:relative;z-index:2;}
.brandbar .cup{width:46px;height:52px;flex:0 0 auto;}
.brandbar .wm{font-family:var(--display);font-weight:700;font-size:40px;letter-spacing:-.01em;line-height:1;}
.brandbar .wm b{color:var(--accent);}

/* ---- category tag ---- */
.cat-tag{
  display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  font-family:var(--body);font-weight:700;font-size:23px;letter-spacing:.22em;text-transform:uppercase;
  padding:11px 22px;border-radius:999px;border:2px solid currentColor;margin-top:6px;
}
.cat-tag.solid{background:var(--accent);color:var(--cream);border-color:var(--accent);}
.t-persimmon .cat-tag.solid{color:var(--persimmon);}
.t-olive .cat-tag.solid{color:var(--olive);}

/* ---- shared body wrapper ---- */
.body{flex:1;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2;}

/* ---- handle footer, shared ---- */
.handle{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:2;
  font-size:28px;font-weight:500;color:var(--ink);opacity:1;}
.handle .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block;margin:0 14px;vertical-align:middle;}

/* ======================= MENU ======================= */
.post--menu .body{flex-direction:row;align-items:center;gap:40px;}
.post--menu .art{flex:0 0 300px;display:flex;align-items:center;justify-content:center;}
.post--menu .art svg{width:300px;height:auto;}
.post--menu .info{flex:1;}
.post--menu .name{font-family:var(--display);font-weight:700;font-size:88px;line-height:.98;letter-spacing:-.02em;margin-bottom:22px;}
.post--menu .desc{font-size:36px;line-height:1.4;opacity:1;max-width:16ch;margin-bottom:30px;}
/* price is always the persimmon hero color — readable on every theme (incl. olive,
   where --accent is cream and would vanish) and consistent with the style sheet. */
.post--menu .price{display:inline-flex;align-items:baseline;gap:4px;background:var(--persimmon);color:var(--cream);
  font-family:var(--display);font-weight:700;font-size:56px;padding:14px 30px;border-radius:18px;}
.post--menu .price .cur{font-size:34px;}

/* ======================= STORY ======================= */
.post--story .body{justify-content:center;}
.post--story .art{margin-bottom:36px;}
/* .avatar is an inline <span>; give it a box AND size the SVG inside, or the
   SVG (viewBox, no intrinsic size) balloons to fill the body and clips the text. */
.post--story .avatar{display:inline-block;width:190px;height:190px;}
.post--story .avatar svg{display:block;width:100%;height:100%;}
.post--story .stat{font-family:var(--display);font-weight:700;font-size:280px;line-height:.82;letter-spacing:-.03em;color:var(--accent);}
.post--story .headline{font-family:var(--display);font-weight:700;font-size:82px;line-height:1.02;letter-spacing:-.02em;margin-bottom:24px;max-width:15ch;}
.post--story .sub{font-size:40px;line-height:1.4;opacity:1;max-width:22ch;}
.post--story .sub b{color:var(--accent);}

/* ======================= PROMO ======================= */
.post--promo .body{justify-content:center;}
.post--promo .kicker{font-family:var(--body);font-weight:700;font-size:34px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:20px;opacity:1;}
.post--promo .offer{font-family:var(--display);font-weight:700;font-size:150px;line-height:.9;letter-spacing:-.03em;margin-bottom:30px;}
.post--promo .cond{font-size:40px;line-height:1.35;max-width:20ch;opacity:1;}
.post--promo .cond b{color:var(--accent);border-bottom:5px solid var(--accent);}

/* ======================= QUOTE ======================= */
.post--quote .body{justify-content:center;}
.post--quote .mark{font-family:var(--display);font-weight:700;font-size:260px;line-height:.6;color:var(--accent);height:130px;}
.post--quote .q{font-family:var(--display);font-weight:600;font-size:74px;line-height:1.18;letter-spacing:-.01em;margin-bottom:34px;max-width:17ch;}
.post--quote .by{font-size:34px;font-weight:500;opacity:1;}
.post--quote .by b{color:var(--accent);font-weight:700;}

/* Text contrast variants retain the original brand swatches. */
.cat-tag.solid{background:var(--espresso);color:var(--cream);border-color:var(--espresso)}
.t-espresso .cat-tag.solid,.t-olive .cat-tag.solid{background:var(--cream);color:var(--espresso);border-color:var(--cream)}
.t-persimmon .cat-tag.solid{color:var(--cream)}
.t-cream .by b{color:#A13F22}