/* ============================================================
   PETTY ASS — visual identity. Site-specific. Nothing shared.

   WHO BUYS FROM THIS SITE
   Adults, mostly 25-45, who live in group chats and send each
   other screenshots. "Petty" is a word they use about themselves
   with affection - it's in-group humour, self-aware, and a bit
   proud. A lot of the buying is gifting: the mug for the friend
   who remembers everything, the hoodie for the sister who
   "said what she said". Purchases are impulse-sized, $20-45,
   and they happen in the moment a line makes someone laugh.

   WHAT THAT MEANS FOR THE DESIGN
   The site has to feel like the merch. If a quote doesn't make
   you want to screenshot it, it won't sell on a hoodie either.
   Type is the product here, so the type gets the space.

   WHY DARK
   Every other site in this portfolio is light. This one isn't,
   on purpose: petty lives in the group chat at 11:47pm, and
   bright pink and lemon type on near-black is how a phone screen
   looks at that hour. It also makes product colours pop. Dark was
   wrong for the children's site; for adult humour it's the right
   register.

   WHY NOT "RECEIPTS"
   Receipts are the obvious petty motif, and Shade For Days already
   owns a claims ledger. This site uses the chat thread instead:
   left on read, typing dots, the message you sent anyway.

   COLOUR
   Hot pink carries attitude and it's the colour people associate
   with this kind of joke-with-teeth. Lemon is for highlights and
   the focus ring. Lilac is a third merch tile colour. All text
   pairs measured: the lowest is 6.5:1.

   TYPE
   Shrikhand only for the wordmark and quote tiles - it's loud and
   it looks like something you'd print on a cup, and it's too
   decorative for anything longer. Bricolage Grotesque for
   headings, Figtree for reading.
   ============================================================ */

:root {
  --night:     #17131c;   /* ground */
  --surface:   #221b29;
  --them:      #2e2536;   /* incoming bubble. Text on it 13.0:1 */
  --line:      #3a3042;
  --text:      #f7eff4;   /* 16.2:1 on night */
  --text-soft: #c9bccd;   /* 10.1:1 on night */
  --time:      #a999ae;   /*  6.9:1 on night - timestamps, "Read" */
  --pink:      #ff6fb1;   /*  7.1:1 on night; night-on-pink 7.1:1 */
  --lemon:     #ffe45c;   /* 14.4:1 on night */
  --lilac:     #c8a8ff;   /* night-on-lilac 9.2:1 */
  --ad-box:    #f3eff5;
  --ad-label:  #5b5160;   /*  6.6:1 on ad box */

  --paper:     var(--night);
  --ink:       var(--text);
  --accent:    var(--pink);
  --accent-ink: var(--night);
  --focus:     var(--lemon);   /* 14.4:1 on night, 13.1:1 on surface */
  --measure:   62ch;

  --wordmark: 'Shrikhand', 'Cooper Black', Georgia, serif;
  --display:  'Bricolage Grotesque', 'Arial Black', system-ui, sans-serif;
  --body:     'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html { color-scheme: dark; }
body {
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  background: var(--night);
  color: var(--text);
}

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

h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.6rem, 7vw, 5rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 0.75rem; }
h3 { font-size: 1.35rem; margin-bottom: 0.35rem; letter-spacing: -0.01em; }
p + p { margin-top: 0.85rem; }
a { color: var(--pink); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--lemon); }
::selection { background: var(--pink); color: var(--night); }

.tag {
  display: inline-block;
  font-family: var(--display); font-weight: 600; font-size: 0.8125rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--lemon); margin-bottom: 0.6rem;
}
.lede { font-size: 1.25rem; color: var(--text-soft); max-width: 36ch; }

/* ---- 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 {
  font-family: var(--wordmark); font-size: 1.9rem; line-height: 1;
  color: var(--pink); text-decoration: none;
  display: inline-flex; align-items: baseline; gap: 0.5rem; min-height: 44px;
}
.brand small { font-family: var(--body); font-size: 0.8125rem; color: var(--text-soft); font-weight: 600; }
.brand:hover { color: var(--pink); }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0 1.25rem; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--text); text-decoration: none; font-weight: 600;
  border-bottom: 3px solid transparent;
}
.site-nav a:hover { border-bottom-color: var(--pink); color: var(--text); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--lemon); }

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

/* ---- Hero -------------------------------------------------- */
.hero {
  display: grid; gap: 2.5rem; align-items: center;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  padding-bottom: 3rem; border-bottom: 1px solid var(--line);
}
.hero h1 { margin-bottom: 1rem; max-width: 12ch; }
.hero h1 em { font-style: normal; color: var(--pink); }

.section { margin-top: 3.75rem; }

/* ---- THE CHAT THREAD ---------------------------------------
   The signature component. Incoming messages on the left in a
   dark bubble, yours on the right in pink. Every bubble carries a
   visually hidden speaker label so a screen reader announces who
   is talking - without it a thread is just a list of lines. */
.phone {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 28px; padding: 1.25rem 1rem 1rem;
  max-width: 24rem; width: 100%; justify-self: end;
}
.phone-top {
  text-align: center; font-size: 0.8125rem; color: var(--time);
  border-bottom: 1px solid var(--line); padding-bottom: 0.6rem; margin-bottom: 0.9rem;
}
.phone-top b { display: block; color: var(--text); font-size: 0.9375rem; }
.thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.msg {
  max-width: 82%; padding: 0.55rem 0.9rem; border-radius: 20px;
  font-size: 1rem; line-height: 1.4;
}
.msg--them { align-self: flex-start; background: var(--them); color: var(--text); border-bottom-left-radius: 6px; }
.msg--me   { align-self: flex-end; background: var(--pink); color: var(--night); border-bottom-right-radius: 6px; font-weight: 600; }
.seen { align-self: flex-end; font-size: 0.75rem; color: var(--time); padding-right: 0.3rem; }
.typing {
  align-self: flex-start; background: var(--them); border-radius: 20px;
  padding: 0.7rem 0.9rem; display: inline-flex; gap: 0.3rem;
}
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--time); display: block; }
@media (prefers-reduced-motion: no-preference) {
  .typing span { animation: blink 1.2s infinite ease-in-out; }
  .typing span:nth-child(2) { animation-delay: 0.2s; }
  .typing span:nth-child(3) { animation-delay: 0.4s; }
  @keyframes blink { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }
}

/* ---- Story blocks ------------------------------------------ */
.stories { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.story { max-width: none; }
.story .phone { justify-self: stretch; max-width: none; }
.story-head { margin-bottom: 0.75rem; }
.story-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; margin-top: 0.35rem; }
.chip {
  display: inline-block; font-size: 0.8125rem; font-weight: 600;
  padding: 0.15rem 0.6rem; border-radius: 999px; border: 1px solid var(--line); color: var(--text-soft);
}
.chip--level { border-color: var(--lemon); color: var(--lemon); }
.story-after { margin-top: 0.75rem; color: var(--text-soft); font-size: 0.9375rem; }

/* ---- Quote tiles: the merch, before it's merch ------------- */
.quotes { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); }
.quote {
  max-width: none; min-height: 12rem; border-radius: 18px; padding: 1.4rem;
  display: flex; flex-direction: column; justify-content: space-between; gap: 1rem;
  color: var(--night);
}
.quote:nth-child(3n+1) { background: var(--pink); }
.quote:nth-child(3n+2) { background: var(--lemon); }
.quote:nth-child(3n)   { background: var(--lilac); }
.quote p { font-family: var(--wordmark); font-size: 1.6rem; line-height: 1.15; max-width: none; }
.quote .on { font-size: 0.875rem; font-weight: 700; font-family: var(--body); }

/* ---- Products ---------------------------------------------- */
.products { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.product { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 1.4rem; max-width: none; }
.product h3 { color: var(--lemon); }
.product .soon { display: inline-block; margin-top: 0.75rem; font-weight: 700; color: var(--text-soft); }

/* ---- Ad slot ------------------------------------------------
   In-content ad placements, reserved now so the page doesn't jump
   when ads load (layout shift hurts both readers and search).
   Always labelled "Advertisement", always visually distinct from
   stories, so nobody mistakes an ad for content. Empty until a
   network approves the site. */
.ad {
  background: var(--ad-box); color: var(--night);
  border-radius: 12px; padding: 0.5rem 0.75rem 0.75rem;
  min-height: 290px; margin-top: 3rem;
  display: flex; flex-direction: column;
}
.ad-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ad-label); }
.ad-space { flex: 1; display: grid; place-items: center; color: var(--ad-label); font-size: 0.875rem; text-align: center; }

/* ---- Panels & lists ---------------------------------------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: clamp(1.25rem, 3vw, 2rem); }
.panel--pink { border-color: var(--pink); }
.rules { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.rules li { padding-left: 1.6rem; position: relative; max-width: none; }
.rules li::before { content: "✕"; position: absolute; left: 0; color: var(--pink); font-weight: 800; }
.rules--yes li::before { content: "✓"; color: var(--lemon); }

/* ---- Buttons ------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.4rem;
  background: var(--pink); color: var(--night); border: 0; border-radius: 999px;
  font-family: var(--display); font-weight: 800; font-size: 1rem; text-decoration: none;
}
.btn:hover { background: var(--lemon); color: var(--night); }
.btn--line { background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px var(--text); }
.btn--line:hover { background: var(--text); color: var(--night); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

/* ---- Prose -------------------------------------------------- */
.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 ------------------------------------------------- */
.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(--text-soft); border-radius: 12px; background: var(--night); color: var(--text); }
.signup button { justify-self: start; cursor: pointer; }
.fine { font-size: 0.875rem; color: var(--text-soft); margin-top: 0.75rem; }

/* ---- Footer ------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); padding-block: 2.5rem 3rem; background: #120f16; }
.site-footer .cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
.site-footer h2 { font-size: 1rem; letter-spacing: 0.02em; color: var(--lemon); margin-bottom: 0.5rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer a { color: var(--text); display: inline-block; padding-block: 0.3rem; }
.site-footer .footer-mark { font-family: var(--wordmark); color: var(--pink); font-size: 1.6rem; }

@media (max-width: 46rem) {
  .hero { grid-template-columns: 1fr; }
  .phone { justify-self: stretch; max-width: none; }
  .quote p { font-size: 1.45rem; }
}

@media (forced-colors: active) {
  .msg, .phone, .quote, .product, .panel, .ad, .chip, .btn { border: 1px solid; }
}

/* Narrow screens: keep every page within 320px (WCAG 1.4.10 reflow). Added 2026-09-17 audit. */
.phone { min-width: 0; }
.msg, .story-after { overflow-wrap: anywhere; }