/* ============================================================
   Taylor Fox — Portfolio
   Palette sampled directly from the fox illustration:
   paper cream ground, near-black ink linework, amber-orange accent.
   Hand-drawn/ink aesthetic throughout: wobbly borders, ink-stroke
   dividers, splatter accents, paper grain.
   ============================================================ */

:root {
  /* --cream matches the fox illustration's paper color exactly,
     so the hero art blends into the page with no visible edge */
  --cream: #f0e9db;
  --cream-soft: #f7f2e7;
  --cream-deep: #e9dfc9;
  --ink: #17120f;
  --ink-soft: #4a423a;
  --ink-faint: #7a7168;
  --orange: #f2900e;
  --orange-dark: #c96f05;
  --orange-light: #fbe0b4;
  --border: rgba(23, 18, 15, 0.16);

  --font-display: ui-serif, Georgia, Cambria, 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --max-width: 1140px;

  /* wobbly hand-drawn corner radii, reused everywhere */
  --wobble: 14px 7px 17px 8px / 8px 18px 7px 15px;
  --wobble-sm: 9px 5px 11px 6px / 6px 11px 5px 9px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
/* paper grain over everything */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: 0.05;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- Ink-stroke dividers (rough, broken, hand-drawn) ---------- */
.divider {
  width: 100%;
  height: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 26' preserveAspectRatio='none'%3E%3Cpath d='M6 14 C 60 8, 118 19, 188 12 S 316 6, 394 13' fill='none' stroke='%2317120f' stroke-width='2.6' stroke-linecap='round' opacity='0.7'/%3E%3Cpath d='M10 16 C 72 11, 140 20, 212 14 S 330 9, 390 15' fill='none' stroke='%2317120f' stroke-width='1.1' stroke-linecap='round' opacity='0.4'/%3E%3Ccircle cx='44' cy='8' r='1.6' fill='%2317120f' opacity='0.5'/%3E%3Ccircle cx='232' cy='21' r='1.2' fill='%2317120f' opacity='0.45'/%3E%3Ccircle cx='352' cy='7' r='1.9' fill='%2317120f' opacity='0.5'/%3E%3Ccircle cx='150' cy='6' r='1' fill='%23f2900e' opacity='0.8'/%3E%3C/svg%3E") repeat-x center / 400px 26px;
}
.divider--orange {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 26' preserveAspectRatio='none'%3E%3Cpath d='M6 14 C 60 8, 118 19, 188 12 S 316 6, 394 13' fill='none' stroke='%23f2900e' stroke-width='3' stroke-linecap='round' opacity='0.9'/%3E%3Cpath d='M10 16 C 72 11, 140 20, 212 14 S 330 9, 390 15' fill='none' stroke='%23c96f05' stroke-width='1.2' stroke-linecap='round' opacity='0.55'/%3E%3Ccircle cx='44' cy='8' r='1.7' fill='%23f2900e' opacity='0.85'/%3E%3Ccircle cx='232' cy='21' r='1.2' fill='%23c96f05' opacity='0.7'/%3E%3Ccircle cx='352' cy='7' r='2' fill='%23f2900e' opacity='0.85'/%3E%3Ccircle cx='120' cy='20' r='1' fill='%2317120f' opacity='0.4'/%3E%3C/svg%3E") repeat-x center / 400px 26px;
}

/* ---------- Sketch accents ---------- */
.underline-sketch {
  position: relative;
  display: inline-block;
  z-index: 0;
}
.underline-sketch::after {
  content: '';
  position: absolute;
  left: -3%;
  right: -3%;
  bottom: 0.02em;
  height: 0.32em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 8 C 40 3, 72 12, 112 7 S 172 2, 197 8' fill='none' stroke='%23f2900e' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M8 11 C 60 7, 120 12, 192 9' fill='none' stroke='%23f2900e' stroke-width='2' stroke-linecap='round' opacity='0.6'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  z-index: -1;
}

/* scattered ink + orange splatter, used as pseudo-element flair */
.hero::before,
.page-hero::before {
  content: '';
  position: absolute;
  width: 230px;
  height: 230px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'%3E%3Cg fill='%2317120f'%3E%3Ccircle cx='30' cy='40' r='2.6' opacity='0.5'/%3E%3Ccircle cx='70' cy='20' r='1.4' opacity='0.38'/%3E%3Ccircle cx='120' cy='50' r='3.2' opacity='0.45'/%3E%3Ccircle cx='170' cy='30' r='1.8' opacity='0.4'/%3E%3Ccircle cx='200' cy='70' r='1.2' opacity='0.35'/%3E%3Ccircle cx='60' cy='90' r='1.6' opacity='0.38'/%3E%3Ccircle cx='150' cy='110' r='2.2' opacity='0.42'/%3E%3Ccircle cx='100' cy='140' r='1.3' opacity='0.32'/%3E%3Ccircle cx='40' cy='160' r='2.8' opacity='0.42'/%3E%3Ccircle cx='180' cy='170' r='1.5' opacity='0.36'/%3E%3C/g%3E%3Cg fill='%23f2900e'%3E%3Ccircle cx='90' cy='30' r='1.8' opacity='0.8'/%3E%3Ccircle cx='140' cy='80' r='2.4' opacity='0.72'/%3E%3Ccircle cx='55' cy='125' r='1.5' opacity='0.66'/%3E%3Ccircle cx='185' cy='120' r='1.2' opacity='0.66'/%3E%3Ccircle cx='120' cy='185' r='2' opacity='0.72'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}
.hero::before { top: 30px; left: -60px; transform: rotate(12deg); }
.page-hero::before { top: 20px; right: -50px; transform: rotate(-8deg); opacity: 0.85; }

/* ---------- Buttons (wobbly, ink-drawn) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--wobble-sm);
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid var(--ink);
  box-shadow: 3px 4px 0 rgba(23, 18, 15, 0.14);
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}
.btn:hover { box-shadow: 1px 2px 0 rgba(23, 18, 15, 0.18); }
.btn--primary {
  background: var(--ink);
  color: var(--cream-soft);
}
.btn--primary:hover { background: var(--orange); border-color: var(--orange); color: var(--ink); transform: translate(1px, 2px); }
.btn--outline {
  background: transparent;
  color: var(--ink);
}
.btn--outline:hover { background: var(--ink); color: var(--cream-soft); transform: translate(1px, 2px); }
.btn--orange {
  background: var(--orange);
  border-color: var(--ink);
  color: var(--ink);
}
.btn--orange:hover { background: var(--orange-dark); transform: translate(1px, 2px); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
}
.brand img {
  height: 46px;
  width: 46px;
  object-fit: cover;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 42%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 50%, #000 42%, transparent 72%);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after {
  content: '';
  display: block;
  width: 26px;
  height: 2.5px;
  background: var(--ink);
  margin: 5px 0;
  border-radius: 2px;
}
.nav-toggle::before { transform: rotate(-1.6deg); }
.nav-toggle::after { transform: rotate(1.2deg); }

.main-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.main-nav a {
  padding: 8px 10px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-soft);
  border-radius: var(--wobble-sm);
  transition: color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.main-nav a:hover, .main-nav a[aria-current="page"] {
  color: var(--ink);
  background: var(--orange-light);
}

@media (max-width: 1080px) {
  .nav-toggle { display: block; }
  .main-nav {
    display: none;
    position: absolute;
    top: 78px;
    left: 0;
    right: 0;
    background: var(--cream-soft);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 32px rgba(23, 18, 15, 0.08);
  }
  .main-nav.open { display: block; }
  .main-nav ul {
    flex-direction: column;
    padding: 12px 28px 24px;
    gap: 2px;
  }
  .main-nav a { display: block; padding: 12px 8px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 56px 0 40px;
}
.hero .wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 36px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero h1 {
  font-size: clamp(2.6rem, 5.4vw, 4rem);
  margin-bottom: 0.28em;
}
.hero .credentials {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  font-size: 1rem;
  margin-bottom: 18px;
}
.hero p.lede {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 46ch;
  margin-bottom: 28px;
}
.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
/* The illustration shares the page's paper color; the radial mask
   feathers its edges so it reads as drawn onto the page itself. */
.hero-art { position: relative; }
.hero-art img {
  width: 118%;
  max-width: none;
  margin: -6% -9%;
  -webkit-mask-image: radial-gradient(ellipse 62% 60% at 50% 47%, #000 52%, transparent 76%);
  mask-image: radial-gradient(ellipse 62% 60% at 50% 47%, #000 52%, transparent 76%);
}

@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; text-align: left; }
  .hero-art { order: -1; max-width: 360px; margin: 0 auto; }
  .hero-art img { width: 112%; margin: -8% -6%; }
}

/* ---------- Sections ---------- */
section { padding: 72px 0; position: relative; }
.section-head { max-width: 62ch; margin-bottom: 40px; }
.section-head .kicker,
.page-hero .kicker {
  display: block;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange-dark);
  margin-bottom: 10px;
}
.section-head .kicker::before,
.page-hero .kicker::before {
  content: '';
  display: inline-block;
  width: 26px;
  height: 3px;
  background: var(--orange);
  border-radius: 3px 1px 3px 2px;
  margin-right: 10px;
  vertical-align: middle;
  transform: rotate(-2deg);
}
.section-head h2 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); }
.section-head h2::after {
  content: '';
  display: block;
  width: 130px;
  height: 10px;
  margin-top: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 10' preserveAspectRatio='none'%3E%3Cpath d='M3 6 C 30 2, 60 9, 95 5 S 120 3, 127 6' stroke='%23f2900e' stroke-width='3.4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M6 8 C 40 5, 80 9, 124 7' stroke='%23f2900e' stroke-width='1.5' fill='none' stroke-linecap='round' opacity='0.65'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.section-head p { color: var(--ink-soft); font-size: 1.05rem; }

.bg-soft { background: var(--cream-soft); }
.bg-deep { background: var(--cream-deep); }

/* ---------- Cards (sketchbook style: wobbly, tilted, offset ink shadow) ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}
.card {
  background: var(--cream-soft);
  border: 2px solid rgba(23, 18, 15, 0.75);
  border-radius: var(--wobble);
  padding: 30px;
  position: relative;
  box-shadow: 5px 6px 0 rgba(23, 18, 15, 0.09);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card-grid > .card:nth-child(odd) { transform: rotate(-0.6deg); }
.card-grid > .card:nth-child(even) { transform: rotate(0.5deg); }
.card:hover, .card-grid > .card:nth-child(odd):hover, .card-grid > .card:nth-child(even):hover {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 7px 9px 0 rgba(23, 18, 15, 0.12);
}
.card .tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange-dark);
  margin-bottom: 12px;
}
.card h3 { font-size: 1.25rem; margin-bottom: 10px; }
.card p { color: var(--ink-soft); font-size: 0.98rem; }
.card .stat {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--ink);
  display: inline-block;
  margin-top: 14px;
  padding: 2px 14px;
  background: var(--orange-light);
  border-radius: 12px 5px 10px 6px / 6px 10px 5px 12px;
  transform: rotate(-1deg);
}

/* ---------- Expertise tiles ---------- */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.tile-grid .tile:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .tile-grid { grid-template-columns: 1fr; }
  .tile-grid .tile:last-child:nth-child(3n + 1) { grid-column: auto; }
}
.tile {
  border-left: 3px solid var(--orange);
  border-radius: 2px 0 0 2px;
  padding: 6px 0 6px 20px;
}
.tile h3 {
  font-size: 1.05rem;
  font-family: var(--font-body);
  font-weight: 700;
  margin-bottom: 8px;
}
.tile ul { display: flex; flex-direction: column; gap: 5px; }
.tile li {
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* ---------- Quotes / Recommendations ---------- */
.quote-card {
  background: var(--cream-soft);
  border: 2px solid rgba(23, 18, 15, 0.75);
  border-radius: var(--wobble);
  padding: 32px;
  position: relative;
  box-shadow: 5px 6px 0 rgba(23, 18, 15, 0.09);
}
.card-grid > .quote-card:nth-child(odd) { transform: rotate(-0.7deg); }
.card-grid > .quote-card:nth-child(even) { transform: rotate(0.6deg); }
.card-grid > .quote-card:hover { transform: rotate(0deg); }
.quote-card .mark {
  font-family: var(--font-display);
  font-size: 3.4rem;
  color: var(--orange);
  line-height: 1;
  display: block;
  margin-bottom: 6px;
}
.quote-card blockquote {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--ink);
}
.quote-card .attribution { font-weight: 700; font-size: 0.95rem; }
.quote-card .role { color: var(--ink-faint); font-size: 0.88rem; }
.quote-card .full-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--orange-dark);
  border-bottom: 2px solid var(--orange);
}

/* ---------- Document list (Statements / Resume) ---------- */
.doc-list { display: flex; flex-direction: column; gap: 18px; }
.doc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--cream-soft);
  border: 2px solid rgba(23, 18, 15, 0.55);
  border-radius: var(--wobble-sm);
  box-shadow: 3px 4px 0 rgba(23, 18, 15, 0.07);
  padding: 22px 26px;
}
.doc-row h3 { font-size: 1.1rem; margin-bottom: 4px; }
.doc-row p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; max-width: 60ch; }

/* ---------- About / Timeline ---------- */
.timeline { display: flex; flex-direction: column; gap: 30px; }
.timeline-item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
}
.timeline-item .year { font-family: var(--font-display); font-weight: 600; color: var(--orange-dark); }
.timeline-item h3 { font-size: 1.1rem; margin-bottom: 6px; }
.timeline-item p { color: var(--ink-soft); }
@media (max-width: 620px) {
  .timeline-item { grid-template-columns: 1fr; gap: 4px; }
}

/* hand-drawn photo frame */
.sketch-frame {
  border: 2px solid var(--ink);
  border-radius: var(--wobble);
  box-shadow: 6px 7px 0 rgba(23, 18, 15, 0.11);
  transform: rotate(-1.3deg);
}

/* ---------- AI stakes banner (dark, standout) ---------- */
.ai-banner {
  background: var(--ink);
  color: var(--cream-soft);
  padding: 70px 0;
  text-align: center;
}
.ai-banner .kicker {
  display: block;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 16px;
}
.ai-banner p.big {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  line-height: 1.35;
  max-width: 26ch;
  margin: 0 auto;
}
.ai-banner .underline-sketch::after { bottom: -0.06em; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: var(--cream-soft);
  padding: 56px 0 30px;
}
.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 28px;
}
.site-footer h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--orange);
  margin-bottom: 12px;
}
.site-footer a { color: var(--cream-soft); opacity: 0.85; }
.site-footer a:hover { opacity: 1; color: var(--orange); }
.footer-links { display: flex; flex-direction: column; gap: 8px; }
.footer-bottom {
  max-width: var(--max-width);
  margin: 40px auto 0;
  padding: 20px 28px 0;
  border-top: 1px solid rgba(247, 242, 231, 0.15);
  font-size: 0.85rem;
  opacity: 0.65;
}

/* ---------- Interior page hero ---------- */
.page-hero {
  padding: 56px 0 36px;
  position: relative;
  overflow: hidden;
}
.page-hero h1 { font-size: clamp(2rem, 4vw, 2.9rem); max-width: 22ch; position: relative; z-index: 1; }
.page-hero p.lede { color: var(--ink-soft); font-size: 1.1rem; max-width: 60ch; position: relative; z-index: 1; }

.prose { max-width: 72ch; }
.prose p { color: var(--ink-soft); font-size: 1.05rem; margin-bottom: 1.1em; }
.prose h3 { margin-top: 1.6em; font-size: 1.3rem; }

.callout {
  border: 2px solid rgba(23, 18, 15, 0.6);
  border-left: 4px solid var(--orange);
  background: var(--orange-light);
  padding: 22px 26px;
  border-radius: var(--wobble-sm);
  box-shadow: 4px 5px 0 rgba(23, 18, 15, 0.08);
  transform: rotate(-0.4deg);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
@media (max-width: 780px) {
  .two-col { grid-template-columns: 1fr; }
}

/* ---------- Photo gallery (flush rows, featured photo, overlay captions) ---------- */
.gallery { display: flex; flex-direction: column; gap: 26px; }
.gallery-row { display: flex; gap: 26px; align-items: stretch; }
.gallery-row figure {
  margin: 0;
  position: relative;
  flex: 1;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: var(--wobble);
  box-shadow: 5px 6px 0 rgba(23, 18, 15, 0.1);
  aspect-ratio: 4 / 3;
  min-width: 0;
}
.gallery-row figure.g-feature {
  flex: 2;
  aspect-ratio: 4 / 3;
}
.g-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-width: 0;
}
.g-stack figure { flex: 1; aspect-ratio: auto; }
.gallery-row figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-row figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(247, 242, 231, 0.94);
  border-top: 1.5px solid rgba(23, 18, 15, 0.35);
  padding: 8px 14px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--ink-soft);
}
.gallery-row figcaption strong { color: var(--ink); }
@media (max-width: 720px) {
  .gallery-row { flex-direction: column; }
  .gallery-row figure.g-feature, .g-stack figure { aspect-ratio: 4 / 3; }
}

.pill-list { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 7px 14px;
  border: 1.5px solid rgba(23, 18, 15, 0.5);
  border-radius: var(--wobble-sm);
  color: var(--ink-soft);
}
.pill:nth-child(even) { transform: rotate(0.6deg); }
.pill:nth-child(odd) { transform: rotate(-0.5deg); }