/* ============================================================
   ELEPHANT SWAG: visual identity. Site-specific. Nothing shared.

   WHO THIS IS FOR
   Two people. The first is ordering swag: a small business
   owner, an event organiser, a marketer, a creator putting
   together a PR box or a first merch drop. They have a budget
   and a real fear of spending it on logo-covered junk that
   ends up in a bin by Friday. The second loves swag: the
   person who posts a conference haul or an unboxing. They
   bring the attention; the first one spends the money.

   THE IDEA THE WHOLE SITE HANGS ON
   Elephants never forget. Good swag doesn't get forgotten
   either. Everything here is about the one question that
   matters: will someone still be using this in a year?

   WHY IT DOESN'T LOOK LIKE A PROMO CATALOG
   Promo-product sites are cluttered primary red and blue with
   clip-art pens. Influencer PR sites are pastel and soft. The
   buyer here wants to look like they have taste, so the site
   looks like a good brand kit: lots of white, one confident
   colour, and restraint.

   COLOUR
   Cobalt is the brand-kit colour: confident, memorable, and
   nowhere else in this portfolio. Elephant greys carry the
   mascot without needing a drawing. Tissue pink is the tissue
   paper you pull back in a really good unboxing. The three
   bin colours (keeper green, junk-drawer amber, donation-bin
   red) always sit next to the word. All text pairs measured;
   the lowest is 5.6:1.

   TYPE
   Lilita One for display: chunky, rounded, sticker-like, the
   feel of good merch. Outfit for reading: clean and modern.

   THE MASCOT
   Deliberately not drawn in code. A real elephant mascot needs
   a designer, the same way Underwater Princess did.
   ============================================================ */

:root {
  --paper:       #ffffff;
  --tissue:      #ffe3ea;
  --hide:        #e7e4e0;   /* elephant hide, light */
  --line:        #d9d4ce;
  --ink:         #2b2826;   /* elephant charcoal. 14.6:1 on white */
  --ink-soft:    #5e5955;   /*  6.9:1 on white */
  --cobalt:      #2446e8;   /*  6.7:1 on white; white on cobalt 6.7:1 */
  --cobalt-deep: #1a33b0;
  --mint:        #c9f0dd;

  --keeper:      #1d6b45;   /* 6.5:1 */
  --drawer:      #8a5a00;   /* 5.9:1 */
  --bin:         #a8332a;   /* 6.6:1 */

  --accent:      var(--cobalt);
  --accent-ink:  #ffffff;
  /* 5.2:1 on white. Offset 2px by base.css, so it always sits on the
     page, never on the cobalt button it surrounds. */
  --focus:       #c2410c;
  --measure:     64ch;

  --display: 'Lilita One', 'Arial Rounded MT Bold', 'Arial Black', system-ui, sans-serif;
  --body:    'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body { font-family: var(--body); font-size: 1.0625rem; line-height: 1.65; background: var(--paper); color: var(--ink); }

.wrap { width: min(70rem, 100% - 2.5rem); margin-inline: auto; }
.narrow { max-width: 44rem; }

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.05; letter-spacing: 0.005em; }
h1 { font-size: clamp(2.6rem, 6.8vw, 4.6rem); }
h2 { font-size: clamp(1.8rem, 3.8vw, 2.6rem); margin-bottom: 0.75rem; }
h3 { font-size: 1.35rem; margin-bottom: 0.3rem; }
p + p { margin-top: 0.85rem; }
a { color: var(--cobalt); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--cobalt-deep); }

.kicker { font-weight: 600; font-size: 0.9375rem; color: var(--ink-soft); margin-bottom: 0.5rem; }
.kicker b { color: var(--cobalt); font-weight: 700; }
.lede { font-size: 1.25rem; color: var(--ink-soft); max-width: 40ch; }

/* ---- Header ------------------------------------------------ */
.site-header { border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; padding-block: 0.9rem; }
.brand { display: inline-flex; flex-direction: column; text-decoration: none; min-height: 44px; justify-content: center; }
.brand b { font-family: var(--display); font-weight: 400; font-size: 1.85rem; line-height: 1; color: var(--cobalt); }
.brand small { font-size: 0.8125rem; font-weight: 600; color: var(--ink-soft); letter-spacing: 0.02em; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0 1.35rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 3px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--tissue); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--cobalt); color: var(--cobalt); }

main { padding-block: 3rem 4.5rem; }

/* ---- Hero -------------------------------------------------- */
.hero { display: grid; gap: 2.5rem; align-items: center; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); padding-bottom: 3rem; border-bottom: 1px solid var(--line); }
.hero--single { grid-template-columns: 1fr; }
.hero h1 { margin-bottom: 1rem; max-width: 13ch; }
.hero-box {
  background: var(--tissue); border-radius: 22px; padding: 1.75rem;
  display: grid; gap: 0.9rem;
}
.hero-box h2 { font-size: 1.6rem; }

.section { margin-top: 3.75rem; }

/* ---- THE GIFT TAG ------------------------------------------
   The signature component. A hang tag: punched hole, string,
   rounded body. It carries one swag item and its verdict. The
   verdict word is always printed; colour only backs it up. */
.tags { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.tag {
  position: relative; max-width: none;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 14px 14px 18px 18px;
  padding: 2.4rem 1.3rem 1.3rem;
  box-shadow: 6px 6px 0 var(--hide);
}
.tag::before { /* the punched hole */
  content: ""; position: absolute; top: 0.9rem; left: 50%; width: 0.85rem; height: 0.85rem;
  margin-left: -0.425rem; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper);
}
.tag::after { /* the string */
  content: ""; position: absolute; top: -1.4rem; left: 50%; width: 2px; height: 2.3rem; background: var(--ink-soft);
  transform: rotate(18deg); transform-origin: bottom;
}
@media (prefers-reduced-motion: no-preference) {
  .tag { transition: transform 0.2s ease; transform-origin: top center; }
  .tag:hover { transform: rotate(-1.5deg); }
}
.tag h3 { margin-bottom: 0.5rem; }
.tag p { max-width: none; font-size: 0.9875rem; }

.bin { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.875rem; padding: 0.2rem 0.65rem; border-radius: 999px; border: 2px solid currentColor; margin-bottom: 0.7rem; }
.bin::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: currentColor; }
.bin--keeper { color: var(--keeper); }
.bin--drawer { color: var(--drawer); }
.bin--donate { color: var(--bin); }

/* ---- The test ----------------------------------------------- */
.test { counter-reset: q; list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; }
.test > li { counter-increment: q; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 1.2rem 1.3rem 1.2rem 4.2rem; position: relative; max-width: none; }
.test > li::before { content: counter(q); position: absolute; left: 1.1rem; top: 1rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--cobalt); color: #fff; font-family: var(--display); font-size: 1.2rem; display: grid; place-items: center; }

.bins { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.bins li { background: var(--hide); border-radius: 16px; padding: 1.2rem 1.3rem; max-width: none; }

/* ---- Budget tiers ------------------------------------------- */
.tiers { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.tier { border-radius: 18px; padding: 1.4rem; max-width: none; background: var(--paper); border: 2px solid var(--line); }
.tier:nth-child(2) { border-color: var(--cobalt); }
.tier .price { font-family: var(--display); font-size: 1.9rem; color: var(--cobalt); line-height: 1; }
.tier .per { font-size: 0.875rem; color: var(--ink-soft); font-weight: 600; margin-bottom: 0.8rem; }
.tier ul { padding-left: 1.1rem; margin: 0.5rem 0 0; }

/* ---- Panels, lists ----------------------------------------- */
.panel { background: var(--hide); border-radius: 22px; padding: clamp(1.25rem, 3vw, 2rem); }
.panel--tissue { background: var(--tissue); }
.panel--cobalt { background: var(--cobalt); color: #fff; }
.panel--cobalt a { color: #fff; }
.panel--cobalt :focus-visible { outline-color: #ffffff; }
.checks { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.checks li { position: relative; padding-left: 1.8rem; max-width: none; }
.checks li::before { content: ""; position: absolute; left: 0; top: 0.4rem; width: 1rem; height: 1rem; border-radius: 4px; border: 2px solid var(--cobalt); }
.nos li::before { border-color: var(--bin); background: linear-gradient(45deg, transparent 44%, var(--bin) 44% 56%, transparent 56%); }

.empty { border: 2px dashed var(--line); border-radius: 22px; padding: 2rem; text-align: center; }
.empty h2 { font-size: 1.8rem; }

/* ---- Buttons ------------------------------------------------ */
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.4rem; background: var(--cobalt); color: #fff; border: 2px solid var(--cobalt); border-radius: 999px; font-weight: 700; text-decoration: none; }
.btn:hover { background: var(--cobalt-deep); border-color: var(--cobalt-deep); color: #fff; }
.btn--ghost { background: transparent; color: var(--cobalt); }
.btn--ghost:hover { background: var(--tissue); color: var(--cobalt-deep); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

.prose h2 { margin-top: 2.25rem; font-size: clamp(1.5rem, 3vw, 2rem); }
.prose ul, .prose ol { padding-left: 1.25rem; margin-top: 0.5rem; }
.prose li { margin-bottom: 0.45rem; }

.signup { display: grid; gap: 0.6rem; max-width: 26rem; margin-top: 1rem; }
.signup label { font-weight: 700; }
.signup input { padding: 0.6rem 0.9rem; border: 2px solid var(--ink-soft); border-radius: 12px; background: #fff; }
.signup button { justify-self: start; cursor: pointer; }
.fine { font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.75rem; }
.slot { border: 2px dashed var(--line); border-radius: 16px; padding: 1rem 1.25rem; color: var(--ink-soft); }

/* ---- Footer ------------------------------------------------- */
.site-footer { background: var(--hide); margin-top: 2rem; padding-block: 2.5rem 3rem; }
.site-footer .cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.site-footer h2 { font-family: var(--body); font-weight: 700; font-size: 0.9375rem; color: var(--ink); margin-bottom: 0.5rem; }
.site-footer .mark { font-family: var(--display); font-size: 1.6rem; color: var(--cobalt); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer a { color: var(--ink); display: inline-block; padding-block: 0.3rem; }

@media (max-width: 46rem) {
  .hero { grid-template-columns: 1fr; }
}
@media (forced-colors: active) {
  .tag, .bin, .tier, .panel, .test > li, .btn, .empty { border: 1px solid; }
}