/* ============================================================
   mekhisimpson.com — one stylesheet for every page.

   Oct 26, 2026 redesign. A personal portfolio that reads like a
   publication. References Mekhi picked:
     - Wix Blog ("How to Start a Blog"): the masthead and the hero,
       a big headline left and a bold image on a color block right.
       Used on EVERY page.
     - Adobe Create: the card grid with small orange mono tags.
       The tag says where a piece came from (Shortlist, Roar, Ligo).
     - Penny Hoarder: thumbnail rows with a date, and a boxed
       sidebar card.
   Oct 26 (later), Mekhi: "more editorial", with the theme of the
   Ligo free-food landing page (meetligo.com/food) "but not that
   ugly orange". So: Ligo's warm cream page, a soft serif set tight
   (Fraunces standing in for Ligo's Gelica), two-tone headlines,
   Inter body, rounded buttons with soft shadows, and the big
   rounded gradient card with tilted pictures in it. The orange is
   now a deep green. Serif replaces the handwritten Caveat.

   HOW TO READ IT: tokens at the top, then base text, then each
   piece of the page in the order it appears.
   ============================================================ */

/* ---------- DESIGN TOKENS ---------- */
:root {
  --cream: #FAF6EF;       /* page background (Ligo's cream) */
  --paper: #FFFFFF;       /* cards */
  --ink: #171717;         /* headings, filled buttons */
  --ink-soft: #5C5C5C;    /* body paragraphs */
  --ink-faint: #A3A09A;   /* the gray half of two-tone headlines */
  --line: #E8E2D8;        /* hairlines */
  --accent: #1F5A45;      /* deep green: tags, links, buttons */
  --accent-soft: #E3EDE6; /* the New tag, soft panels */
  /* The Ligo gradient card, in green: sage from the top left into cream. */
  --glow: radial-gradient(120% 90% at 0% 0%, #B7D2C1 0%, #DCE8DF 38%, #F4F1E9 78%);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
  --shadow-card: 0 1px 2px rgba(23,23,23,.06), 0 0 0 1px rgba(23,23,23,.08), 0 18px 36px -14px rgba(23,23,23,.28);

  --panel-green: var(--grain), radial-gradient(70% 80% at 0% 0%, rgba(31,90,69,.85), rgba(31,90,69,0) 70%), radial-gradient(65% 75% at 100% 100%, rgba(31,90,69,.9), rgba(31,90,69,0) 70%), radial-gradient(45% 50% at 100% 0%, rgba(140,190,160,.7), rgba(140,190,160,0) 70%), #E4ECE5; /* the Ligo food page's grainy panel, in green */
  --block: "Saira Semi Condensed", "Arial Narrow", sans-serif; /* bold condensed caps for case studies */
  --display: "Fraunces", Georgia, "Times New Roman", serif; /* headings */
  --sans: "Inter", -apple-system, system-ui, sans-serif;    /* body */
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;   /* tags */

  --container: 1120px;
  --gutter: 48px;
  --measure: 680px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--cream); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent-soft); }
a { color: var(--accent); }
img { display: block; max-width: 100%; }
p { max-width: var(--measure); }
[id] { scroll-margin-top: 24px; }

/* Ligo-style headline: soft serif, regular weight, set tight. */
h1, h2 {
  font-family: var(--display); font-weight: 400; letter-spacing: -0.035em;
  font-variation-settings: "SOFT" 100, "opsz" 96;
}
h1 { font-size: clamp(44px, 5.6vw, 72px); line-height: 1.04; }
h2 { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.08; letter-spacing: -0.03em; }
h3 { font-weight: 600; font-size: 19px; line-height: 1.35; }
/* Two-tone headline, like "Find free food. / It's all on Ligo." */
.soft { color: var(--ink-faint); }

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--ink-soft); }

/* The source tag: just where it ran ("Roar", "Shortlist"). Plain
   sentence case, green. Mekhi, Oct 26: the mono all-caps "LATEST ·
   SHORTLIST / BREAKDOWN" labels read as AI-generated. */
.tag {
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  color: var(--accent); letter-spacing: 0;
}

/* "New" pill, added by new-badge.js for a week after publishing. */
.tag-new {
  display: inline-block; margin-left: 8px; padding: 1px 8px; vertical-align: 2px;
  border-radius: 999px; background: var(--accent-soft); color: var(--accent);
  font-family: var(--sans); font-size: 12px; font-weight: 600;
}

/* ---------- MASTHEAD (Wix) ----------
   Wordmark left; section links and a Say hi pill on the right,
   with one dark rule underneath. */
.masthead { padding-top: 22px; }
.masthead-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-bottom: 18px; border-bottom: 1px solid var(--line);
}
/* Serif wordmark, upright like the headlines. */
.wordmark {
  font-family: var(--display); font-weight: 450; font-size: 26px;
  letter-spacing: -0.02em; line-height: 1; color: var(--ink); text-decoration: none;
  font-variation-settings: "SOFT" 100;
}
.sections { display: flex; align-items: center; gap: 6px; }
.sections a { font-size: 15px; font-weight: 500; color: rgba(23,23,23,.7); text-decoration: none; padding: 6px 12px; border-radius: 999px; }
.sections a:hover { color: var(--ink); background: rgba(23,23,23,.05); }
.sections a[aria-current="page"] { color: var(--ink); background: rgba(23,23,23,.06); }
/* Filled green button with a soft colored shadow (Ligo's App Store button). */
.pill {
  display: inline-block; padding: 9px 18px; border-radius: 14px;
  font-size: 14px; font-weight: 600; text-decoration: none;
  background: var(--accent); color: #fff; transition: transform .15s, box-shadow .15s;
  box-shadow: 0 12px 26px -10px rgba(31, 90, 69, 0.6);
}
.sections .pill { color: #fff; margin-left: 8px; }
.pill:hover, .sections .pill:hover { background: var(--accent); color: #fff; transform: translateY(-1px); }
/* Hamburger (Mekhi, Oct 27). Hidden on desktop; on phones it opens
   the section links as a panel under the masthead (menu.js). Three
   lines drawn from one span and its two pseudo-elements; they turn
   into an X while open. */
.menu-btn {
  display: none; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none;
  cursor: pointer; align-items: center; justify-content: center; border-radius: 12px;
}
.menu-btn span, .menu-btn span::before, .menu-btn span::after {
  display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--ink);
  transition: transform .2s, background .2s;
}
.menu-btn span { position: relative; }
.menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; }
.menu-btn span::before { top: -7px; }
.menu-btn span::after { top: 7px; }
.masthead.open .menu-btn span { background: transparent; }
.masthead.open .menu-btn span::before { transform: translateY(7px) rotate(45deg); }
.masthead.open .menu-btn span::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------- HERO (Wix) ----------
   Headline top left, "Read more" bottom left on a long rule,
   bold image on a color block right. */
.hero { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; padding-top: 44px; padding-bottom: 64px; align-items: stretch; }
.hero-text { display: flex; flex-direction: column; gap: 18px; }
.hero-text .lede { color: var(--ink-soft); font-size: 18px; }
.read-more {
  margin-top: auto; padding-bottom: 12px; border-bottom: 1.5px solid var(--ink);
  font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; max-width: 300px;
}
.read-more:hover { color: var(--accent); border-color: var(--accent); }
/* The Ligo gradient card: big radius, sage glow, film grain, and
   the picture tilted inside it with a soft shadow. */
.hero-art {
  background: var(--grain), var(--glow); border-radius: 28px; padding: 48px;
  display: flex; align-items: center; justify-content: center; min-height: 380px;
}
.hero-art img {
  width: 100%; height: auto; max-height: 420px; object-fit: cover;
  border-radius: 14px; border: 5px solid #fff; box-shadow: var(--shadow-card);
  transform: rotate(-3deg);
}
.hero-art--soft { background: var(--grain), var(--glow); }

/* Hero carousel (Mekhi, Oct 27): three featured pieces. Once
   hero-carousel.js runs, the slides stack in one grid cell so the page
   never jumps between a short and a long headline, and they cross-fade.
   Every slide's title matches the h1 size, h2 or not. */
.hero-carousel { display: grid; padding-bottom: 36px; }
.hero-carousel .hero { padding-bottom: 28px; }
.hero-title { font-size: clamp(44px, 5.6vw, 72px); line-height: 1.04; }
.hero-carousel.is-ready .slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.hero-carousel.is-ready .slide.is-active { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.carousel-nav { display: none; align-items: center; gap: 14px; }
.hero-carousel.is-ready .carousel-nav { display: flex; }
.carousel-arrow {
  width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper);
  font-size: 17px; color: var(--ink); cursor: pointer; transition: border-color .15s, color .15s;
}
.carousel-arrow:hover { border-color: var(--accent); color: var(--accent); }
.carousel-dots { display: flex; gap: 8px; }
.carousel-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: var(--line); cursor: pointer; transition: width .25s, background .25s; }
.carousel-dots button[aria-current="true"] { width: 26px; background: var(--accent); }
@media (prefers-reduced-motion: reduce) { .hero-carousel.is-ready .slide { transition: none; } }

/* ---------- SECTION HEADS ----------
   A hairline above each section; the "All 18" link small and green. */
.block { padding-top: 64px; padding-bottom: 64px; border-top: 1px solid var(--line); }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 32px; }
.block-head a { font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; }
.block-head a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- CARD GRID (Adobe / Wix) ----------
   Titles in the serif, like a magazine contents page. */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 32px; }
.card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink); }
.card-img { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 16px; background: var(--line); box-shadow: 0 0 0 1px rgba(23,23,23,.06); }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.card:hover .card-img img { transform: scale(1.04); }
.card .tag { margin-top: 6px; }
.card .title {
  font-family: var(--display); font-size: 24px; font-weight: 400; line-height: 1.18;
  letter-spacing: -0.02em; font-variation-settings: "SOFT" 100, "opsz" 36;
}
.card:hover .title { color: var(--accent); }
.card .date { font-size: 13px; color: var(--ink-soft); }
.card[hidden] { display: none; }

/* Filter tabs above the writing grid: a quiet segmented control. */
.tabs {
  display: inline-flex; gap: 4px; flex-wrap: wrap; padding: 5px; margin-bottom: 40px;
  background: rgba(23,23,23,.05); border-radius: 14px;
}
.tabs button {
  font: 500 14px var(--sans); color: var(--ink-soft); background: none;
  border: 0; padding: 8px 16px; border-radius: 10px; cursor: pointer;
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(23,23,23,.08), 0 0 0 1px rgba(23,23,23,.06); }

/* ---------- THUMBNAIL ROWS (Penny Hoarder) ----------
   Hairlines between rows, serif titles. */
.rows { list-style: none; display: grid; gap: 0; }
.rows li + li .row-link { border-top: 1px solid var(--line); }
.row-link { display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: center; padding: 18px 0; text-decoration: none; color: var(--ink); }
.rows li:first-child .row-link { padding-top: 0; }
.row-link .thumb { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 12px; background: var(--line); }
.row-link .thumb img { width: 100%; height: 100%; object-fit: cover; }
.row-link .title {
  display: block; font-family: var(--display); font-size: 21px; font-weight: 400; line-height: 1.22;
  letter-spacing: -0.02em; margin: 6px 0; font-variation-settings: "SOFT" 100, "opsz" 36;
}
.row-link:hover .title { color: var(--accent); }
.row-link .date { font-size: 12.5px; color: var(--ink-soft); }

/* ---------- HOME: writing left, about card right ----------
   The about card is the Ligo gradient card. */
.home-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 56px; align-items: start; }
.about-card {
  background: var(--grain), var(--glow); border-radius: 28px;
  padding: 32px 28px; text-align: center;
}
.about-card .portrait { width: 150px; margin: 0 auto 8px; }
.about-card h2 { font-size: 34px; margin-bottom: 10px; }
.about-card p { font-size: 15.5px; color: var(--ink-soft); margin: 0 auto 12px; }
.about-card a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.about-card a:hover { color: var(--accent); }

/* Games preview at the bottom of home. */
.game-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.game-card { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ink); }
.game-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px; transition: transform .2s ease; }
.game-card:hover img { transform: translateY(-3px); }
.game-card .name { font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1.05; letter-spacing: -0.03em; font-variation-settings: "SOFT" 100; margin-top: 2px; }
.game-card:hover .name { color: var(--accent); }
.game-card .blurb { font-size: 15px; color: var(--ink-soft); }

/* ---------- CASE STUDY BITS ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.stat-box { background: var(--paper); border-radius: 20px; padding: 26px 24px; box-shadow: 0 0 0 1px rgba(23,23,23,.06), 0 10px 24px -16px rgba(23,23,23,.25); }
.stat { font-family: var(--display); font-weight: 400; font-size: clamp(46px, 5vw, 58px); line-height: 1; letter-spacing: -0.04em; color: var(--accent); font-variation-settings: "SOFT" 100, "opsz" 96; }
.stat-box p { color: var(--ink-soft); font-size: 15.5px; margin-top: 10px; }

/* Case study sections (Mekhi, Oct 27: "brand and social should be the
   title of the section, and then everything needs to be centered").
   The heading sits on top as the section title; heading and body share
   one centered column. */
.detail { padding-top: 56px; padding-bottom: 56px; border-top: 1px solid var(--line); }
.detail-head, .detail-body { max-width: 880px; margin-left: auto; margin-right: auto; }
.detail-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.detail-body { display: flex; flex-direction: column; gap: 20px; }
.detail-body p { color: var(--ink-soft); }
.detail-body .go, .acc-body .go { font-weight: 500; color: var(--ink); }
.detail-body .go:hover, .acc-body .go:hover { color: var(--accent); }
.shot { border-radius: 16px; border: 1px solid var(--line); }
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.shots--2 { grid-template-columns: repeat(2, 1fr); align-items: center; }
.shots img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); }
.sub { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid var(--line); }
.sub:first-child { padding-top: 0; border-top: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 36px; }
.grid-2 p { color: var(--ink-soft); font-size: 16px; margin-top: 6px; }
.note { font-size: 14px; color: var(--ink-soft); border-left: 2px solid var(--line); padding-left: 14px; margin-top: 28px; }

/* ---------- HOBBIES ----------
   Visual first: each thing gets a big image, then the name and a
   short explanation side by side underneath. */
.hobbies { padding-top: 44px; padding-bottom: 40px; }
.hobbies-intro { display: flex; flex-direction: column; gap: 16px; margin-bottom: 48px; }
.hobbies-intro p { color: var(--ink-soft); font-size: 18px; }
.hobbies-intro a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.showcase { display: flex; flex-direction: column; gap: 16px; padding-bottom: 64px; }
.showcase + .showcase { padding-top: 56px; border-top: 1px solid var(--line); }
.showcase img { width: 100%; height: auto; border-radius: 22px; }
.showcase-main { aspect-ratio: 16 / 9; object-fit: cover; }
.showcase a:hover .showcase-main { opacity: 0.94; }
.showcase-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.showcase-pair img { aspect-ratio: 16 / 9; object-fit: cover; }
.showcase-text { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; margin-top: 12px; }
.showcase-text h2 { font-size: clamp(40px, 4.6vw, 56px); margin-top: 6px; }
.showcase-text p { color: var(--ink-soft); font-size: 18px; }
.showcase-text .go { display: inline-block; margin-top: 14px; font-weight: 500; color: var(--ink); }
.showcase-text .go:hover { color: var(--accent); }

/* Plain link list (kept for simple pages). */
.clips { list-style: none; border-top: 1px solid var(--line); }
.clips li { border-bottom: 1px solid var(--line); }
.clips a, .clips .row { display: flex; justify-content: space-between; gap: 24px; align-items: baseline; padding: 18px 4px; text-decoration: none; color: var(--ink); }
.clips a:hover { color: var(--accent); }
.clips .title { font-weight: 500; }
.clips .date { font-size: 14px; color: var(--ink-soft); white-space: nowrap; }

/* ---------- FOOTER ---------- */
footer { border-top: 1px solid var(--line); margin-top: 40px; }
.footer-inner { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 28px; padding-bottom: 44px; font-size: 15px; color: var(--ink-soft); }
.footer-inner .wordmark { font-size: 22px; }
.footer-inner a { color: var(--ink-soft); }
.footer-inner a:hover { color: var(--accent); }

/* ---------- PHONE ---------- */
@media (max-width: 860px) {
  :root { --gutter: 20px; }
  .hero, .home-grid, .showcase-text { grid-template-columns: 1fr; gap: 28px; }
  .showcase-text { gap: 10px; }
  .hero { padding-top: 28px; padding-bottom: 44px; }
  .hero-art { min-height: 0; padding: 24px; }
  .read-more { margin-top: 8px; }
  .cards { grid-template-columns: 1fr 1fr; gap: 32px 18px; }
  .card .title { font-size: 17px; }
  .stats, .game-cards, .grid-2 { grid-template-columns: 1fr; }
  .shots { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  /* Phone: wordmark and the menu button on one line; the links
     open underneath as a full-width list, Say hi as a button last. */
  .masthead { padding-top: 14px; }
  .masthead-top { flex-wrap: wrap; padding-bottom: 14px; }
  .wordmark { font-size: 23px; }
  .menu-btn { display: flex; }
  .sections { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-top: 8px; }
  .masthead.open .sections { display: flex; }
  .sections a { font-size: 17px; padding: 14px 4px; border-radius: 0; border-bottom: 1px solid var(--line); }
  .sections a:hover, .sections a[aria-current="page"] { background: none; }
  .sections a[aria-current="page"] { color: var(--accent); }
  .sections .pill { margin: 18px 0 4px; padding: 14px 18px; text-align: center; border-bottom: 0; border-radius: 14px; font-size: 16px; }
  .cards { grid-template-columns: 1fr; }
  .row-link { grid-template-columns: 110px 1fr; gap: 14px; }
  .row-link .title { font-size: 16px; }
  .clips a, .clips .row { flex-direction: column; gap: 4px; }
}

/* ---------- ADDED OCT 26: case study parts ---------- */
/* Four stats in a row (Ligo, the capstone). */
.stats--4 { grid-template-columns: repeat(4, 1fr); }
.stats--4 .stat { font-size: clamp(40px, 4vw, 52px); }
/* Results, two by two, at the end of the Ligo page (Mekhi, Oct 27: the
   cards weren't clear and shouldn't be the first thing people see).
   Each card names what it measures above the number. */
.stats--2 { grid-template-columns: repeat(2, 1fr); }
.stats--2 .stat { font-size: clamp(40px, 4.4vw, 56px); margin-top: 8px; }
.stat-box .tag { display: block; }
/* Admin panel screenshots: the dashboard full width, two pages under it. */
.admin-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.admin-shots img { width: 100%; height: auto; display: block; }
.admin-shots img:first-child { grid-column: 1 / -1; }
.admin-shots + .note { margin-top: 0; }
@media (max-width: 560px) { .admin-shots { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .stats--2 { grid-template-columns: 1fr; } }
/* Three results across (Oct 27: the spring growth number came out, since
   it can't be backed up). */
.stats--3 { grid-template-columns: repeat(3, 1fr); }
.stats--3 .stat { font-size: clamp(40px, 4.4vw, 56px); margin-top: 8px; }
@media (max-width: 760px) { .stats--3 { grid-template-columns: 1fr; } }

/* Two cards across, for the Case studies index. */
.cards--2 { grid-template-columns: repeat(2, 1fr); }

/* Typographic art for work that has no picture yet (the capstone).
   Works inside .hero-art and inside a .card-img. */
.type-art {
  width: 100%; height: 100%; min-height: 220px; display: flex; flex-direction: column;
  justify-content: center; gap: 10px; padding: 28px; border-radius: 16px;
  background: var(--accent); color: var(--cream); box-shadow: var(--shadow-card);
}
.hero-art .type-art { transform: rotate(-3deg); min-height: 300px; }
.card-img .type-art { border-radius: 0; box-shadow: none; }
.type-art__kicker { font-size: 14px; font-weight: 600; color: #B7D2C1; }
.type-art__big { font-family: var(--display); font-weight: 400; font-size: clamp(38px, 4.8vw, 64px); line-height: 1.02; letter-spacing: -0.035em; font-variation-settings: "SOFT" 100, "opsz" 96; }
.type-art__sub { font-size: 15px; color: rgba(251, 246, 237, 0.75); }

/* The four post categories, as tagged mini boxes (from the PDF). */
.mini-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 24px; }
.mini-cats > div { border-top: 2px solid var(--accent); padding-top: 8px; }
.mini-cats p { font-size: 15px; color: var(--ink-soft); margin-top: 4px; }

/* Brand kit: the design system cover beside the move-in flyer,
   both cropped to the same height; the badges board goes under. */
.kit { display: grid; grid-template-columns: 2.25fr 1fr; gap: 16px; margin-bottom: 16px; }
.kit img { width: 100%; height: auto; display: block; border-radius: 14px; border: 1px solid var(--line); }
video.shot { display: block; width: 100%; height: auto; background: var(--ink); }
@media (max-width: 560px) { .kit { grid-template-columns: 1fr; } }
/* Type panels inside a card thumbnail: smaller so two lines fit. */
.card-img .type-art { padding: 22px 24px; gap: 8px; }
.card-img .type-art__big { font-size: clamp(30px, 3vw, 40px); }
.card-img .type-art__kicker { font-size: 13px; }

/* Portrait (4:5) posts, four across. */
.posts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.posts img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); }

/* "In place of" table for the marketing system. */
.sys { border-top: 1px solid var(--ink); }
.sys-head { display: flex; justify-content: space-between; padding: 10px 0; font-family: var(--mono); font-size: 12px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; }
.sys-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 14px 0; border-top: 1px solid var(--line); }
.sys-row h3 { font-size: 17px; }
.sys-row p { font-size: 15px; color: var(--ink-soft); }
.sys-row .tag { white-space: nowrap; }

/* Share-of-code bars. */
.bars { display: grid; gap: 12px; max-width: 640px; }
.bar { display: grid; grid-template-columns: 130px 1fr 48px; align-items: center; gap: 14px; font-size: 15px; }
.bar .track { height: 12px; background: var(--line); border-radius: 999px; overflow: hidden; }
.bar .track span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.bar span:last-child { text-align: right; color: var(--ink-soft); }
.bar--all { font-weight: 600; }
.bar--all .track span { background: var(--ink); }
.dots { padding-left: 20px; color: var(--ink-soft); display: grid; gap: 8px; }
.dots li::marker { color: var(--accent); }

@media (max-width: 860px) {
  .stats--4, .mini-cats { grid-template-columns: 1fr 1fr; }
  .cards--2 { grid-template-columns: 1fr; }
  .posts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .stats--4 { grid-template-columns: 1fr; }
  .bar { grid-template-columns: 100px 1fr 40px; }
  .sys-row { flex-direction: column; align-items: flex-start; gap: 6px; }
}
/* The library has no screenshot yet: a 16:9 type panel in its place. */
.type-art--library { aspect-ratio: 16 / 9; border-radius: 22px; box-shadow: none; align-items: center; text-align: center; }
/* Campus Feed launch: the 4:5 feed post, then the story strip full width. */
.feed-launch { display: grid; grid-template-columns: 1fr; gap: 14px; }
.feed-launch img:first-child { max-width: 440px; }
.feed-launch img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); }
@media (max-width: 860px) { .feed-launch { grid-template-columns: 1fr; } }

/* ---------- ADDED OCT 26: PR coursework ---------- */
/* The "this is class work" notice at the top of the page. */
.notice { max-width: none; background: var(--accent-soft); padding: 16px 20px; border-radius: 14px; font-size: 16px; color: var(--ink); }

/* A document shown as a sheet of paper: pitches, releases, advisories. */
.paper {
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  padding: 36px 40px; box-shadow: 0 10px 30px rgba(23, 20, 15, 0.08);
  font-size: 16px; line-height: 1.65; display: grid; gap: 14px;
}
.paper p { max-width: 64ch; color: var(--ink); }
.paper-meta { font-family: var(--mono); font-size: 13px; color: var(--ink-soft) !important; }
.paper-head { font-weight: 600; font-size: 19px; line-height: 1.35; }

/* The hero's mini document. */
.paper--hero { transform: rotate(-3deg); width: 100%; max-width: 440px; gap: 12px; box-shadow: var(--shadow-card); }
.paper-kicker { font-size: 13px; font-weight: 600; color: var(--accent); }
.paper-title { font-weight: 600; font-size: 22px; line-height: 1.3; }
.paper-line { display: block; height: 9px; border-radius: 9px; background: var(--line); }
.paper-line--short { width: 60%; }

/* Instructor feedback, quoted. */
.feedback { display: grid; gap: 10px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.feedback blockquote { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.25; letter-spacing: -0.02em; }

/* OKR blocks, two across. */
.okrs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.okr { display: grid; gap: 10px; padding: 22px; background: var(--paper); border-radius: 18px; box-shadow: 0 0 0 1px rgba(23,23,23,.06); }
.okr .muted { font-size: 15px; }

/* Run of show: time on the left, what happens on the right. */
.runshow { display: grid; border-top: 1px solid var(--ink); }
.runshow > div { display: grid; grid-template-columns: 80px 1fr; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }

/* One-line pointer from Writing to the PR coursework. */
.also { margin-top: 32px; font-size: 16px; color: var(--ink-soft); }

@media (max-width: 860px) {
  .okrs { grid-template-columns: 1fr; }
  .paper { padding: 24px 20px; }
}

/* ---------- ADDED OCT 26: Georgetown Athletics ---------- */
/* Sport-by-sport blocks, two across. */
.sports { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.sport { display: grid; gap: 8px; align-content: start; padding: 24px; background: var(--paper); border-radius: 18px; box-shadow: 0 0 0 1px rgba(23,23,23,.06); }
.sport p { font-size: 16px; color: var(--ink-soft); }
.runshow > div b { color: var(--ink); }
@media (max-width: 860px) { .sports { grid-template-columns: 1fr; } }
/* The first line of the about card: Mekhi's own description, set larger. */
.about-card .about-lead { font-family: var(--display); font-size: 21px; font-weight: 400; color: var(--ink); line-height: 1.3; letter-spacing: -0.015em; font-variation-settings: "SOFT" 100; }

/* ---------- ADDED OCT 26: Hobbies mirrors hesperstudios.com ----------
   Two cards across, like the Hesper home: picture on top, a white
   body with the name in the serif and one line under it. */
.places { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.place { background: var(--paper); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-card); }
.place img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
.place-body { padding: 22px 24px 26px; display: grid; gap: 8px; }
.place-body h2 { font-size: 30px; }
.place-body p { color: var(--ink-soft); font-size: 16.5px; }
.places-note { margin-top: 32px; color: var(--ink-soft); }
.places-note a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
@media (max-width: 860px) { .places { grid-template-columns: 1fr; } }
/* The place cards are links (Mekhi, Oct 27). */
.place { display: block; text-decoration: none; color: var(--ink); transition: transform .2s ease; }
.place:hover { transform: translateY(-3px); }
.place .go { font-size: 15px; font-weight: 600; color: var(--accent); margin-top: 4px; }

/* ---------- ADDED OCT 27: logo panels ----------
   Mekhi: each case study shows the org's own logo, not a screenshot.
   A white tile, level (no tilt), sitting in the gradient card; inside a
   .card-img it fills the image box. */
.logo-art {
  width: 100%; min-height: 300px; display: flex; align-items: center; justify-content: center;
  gap: 36px; padding: 40px; background: var(--paper); border-radius: 18px; box-shadow: var(--shadow-card);
}
.card-img .logo-art { min-height: 0; height: 100%; border-radius: 0; box-shadow: none; gap: 24px; padding: 24px; }
.logo-art img { display: block; width: auto; height: auto; }
.logo-art .divider { width: 1px; align-self: stretch; margin: 24px 0; background: var(--line); }
.logo-gu { max-height: 150px; border-radius: 6px; }
.logo-wnba { max-width: 220px; }
.logo-hoyas { max-height: 230px; max-width: 80%; }
.card-img .logo-gu { max-height: 96px; }
.card-img .logo-wnba { max-width: 150px; }
.card-img .logo-hoyas { max-height: 150px; }
/* Ligo's lockup: the mark and "Ligo" in an italic serif, as on meetligo.com. */
.ligo-lockup { display: flex; align-items: center; gap: 16px; }
.ligo-lockup img { width: 72px; height: 72px; }
.ligo-lockup span {
  font-family: var(--display); font-style: italic; font-weight: 500; font-size: 76px; line-height: 1;
  letter-spacing: -0.01em; color: var(--ink); font-variation-settings: "SOFT" 100;
}
.card-img .ligo-lockup img { width: 48px; height: 48px; }
.card-img .ligo-lockup span { font-size: 50px; }
@media (max-width: 560px) {
  .logo-art { min-height: 220px; gap: 20px; padding: 24px; }
  .logo-wnba { max-width: 140px; } .logo-gu { max-height: 100px; }
  .ligo-lockup span { font-size: 54px; } .ligo-lockup img { width: 52px; height: 52px; }
}
/* Logos are not photos: undo the hero's tilt, frame, and full width. */
.hero-art .logo-art img, .card-img .logo-art img {
  transform: none; border: 0; box-shadow: none; border-radius: 0; width: auto; height: auto; max-width: 100%; object-fit: contain;
}
.hero-art .logo-art .logo-gu, .card-img .logo-art .logo-gu { border-radius: 6px; max-height: 150px; }
.hero-art .logo-art .logo-wnba { max-width: 42%; }
.hero-art .logo-art .logo-hoyas { max-height: 230px; max-width: 80%; }
.hero-art .ligo-lockup img { width: 72px; height: 72px; }
.card-img .logo-art .logo-gu { max-height: 96px; }
.card-img .logo-art .logo-wnba { max-width: 40%; }
.card-img .logo-art .logo-hoyas { max-height: 150px; }
.card-img .ligo-lockup img { width: 48px; height: 48px; }
.card:hover .card-img .logo-art img { transform: none; }
@media (max-width: 560px) {
  .hero-art { padding: 20px; }
  .hero-art .logo-art { min-height: 200px; gap: 18px; padding: 24px 20px; }
  .hero-art .logo-art .logo-gu { max-height: 84px; }
  .hero-art .logo-art .logo-wnba { max-width: 45%; }
  .hero-art .logo-art .logo-hoyas { max-height: 160px; }
  .hero-art .ligo-lockup img { width: 52px; height: 52px; }
}

/* ---------- ADDED OCT 27: PR coursework, after the Ligo food page ----------
   Centered two-tone serif headings with a green period, a short line
   under each, and a grainy green gradient panel holding the real
   documents as tilted cards with dark pill labels (meetligo.com/food). */
.pr-hero { text-align: center; padding-top: 72px; padding-bottom: 40px; display: grid; gap: 20px; justify-items: center; }
.pr-hero h1 { font-size: clamp(42px, 5.4vw, 68px); }
.dot { color: var(--accent); }
.soft { color: var(--ink-faint); }
.pr-hero p, .pr-sec > p { color: var(--ink-soft); font-size: 18px; max-width: 46ch; }
.pr-panel {
  position: relative; overflow: hidden; border-radius: 28px; padding: 72px 24px 96px;
  background: var(--panel-green);
  box-shadow: 0 0 0 1px rgba(23,23,23,.05);
}
.pr-panel--doc { padding: 56px clamp(20px, 6vw, 80px); }
.pr-panel .paper { max-width: 680px; margin: 0 auto; }
.pr-panel .doc-shot { max-width: 760px; margin: 0 auto; }
.pr-panel .doc-shot img { box-shadow: 0 24px 48px -16px rgba(0,0,0,.35); }
.pr-panel .doc-shot figcaption { color: var(--ink); text-align: center; }
.fan { display: flex; justify-content: center; align-items: flex-start; }
.fan-card { position: relative; flex: 0 0 auto; width: clamp(104px, 15vw, 210px); margin: 0 calc(-1 * clamp(14px, 1.6vw, 22px)); transform: translateY(var(--y)) rotate(var(--r)); transition: transform .25s ease; text-decoration: none; }
.fan-card:hover { transform: translateY(calc(var(--y) - 10px)) rotate(var(--r)); z-index: 2; }
.fan-card--wide { width: clamp(160px, 24vw, 340px); z-index: 1; }
.fan-card img, .fan-paper { display: block; width: 100%; border-radius: 12px; border: 5px solid #fff; background: #fff; box-shadow: 0 18px 36px -12px rgba(0,0,0,.4); }
.fan-paper { aspect-ratio: 640 / 662; padding: 8% 9%; display: grid; align-content: start; gap: 6px; font-size: clamp(6px, .75vw, 10.5px); line-height: 1.45; color: var(--ink-soft); overflow: hidden; }
.fan-paper-k { font-family: var(--mono); font-size: clamp(5.5px, .65vw, 9px); color: var(--accent); }
.fan-paper b { font-size: clamp(7.5px, .9vw, 12.5px); color: var(--ink); line-height: 1.3; }
.fan-pill { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); white-space: nowrap; background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 99px; }
.fan--two { gap: 36px; align-items: center; }
.fan--two .fan-card { width: 300px; margin: 0; }
.fan-note { transform: rotate(var(--r)); background: #fff; border-radius: 16px; padding: 24px 26px; display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: baseline; max-width: 300px; box-shadow: 0 18px 36px -12px rgba(0,0,0,.4); }
.fan-note b { font-family: var(--display); font-weight: 400; font-size: 34px; color: var(--accent); letter-spacing: -0.02em; }
.fan-note span { font-size: 14px; color: var(--ink-soft); }
.pr-fine { text-align: center; font-size: 14px; color: var(--ink-soft); margin: 18px auto 0; max-width: 60ch; }
.pr-sec:last-of-type { padding-bottom: 96px; }
.pr-sec { display: grid; gap: 18px; justify-items: center; text-align: center; padding-top: 96px; }
.pr-sec h2 { font-size: clamp(32px, 4vw, 50px); }
.pr-sec .pr-panel { width: 100%; margin-top: 12px; text-align: left; }
.pr-pill { font-size: 13px; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 6px 12px; border-radius: 99px; }
.pr-quote { font-family: var(--display); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.25; letter-spacing: -0.02em; max-width: 30ch; margin: 18px auto 0; }
.pr-quote cite { display: block; font-family: var(--sans, inherit); font-style: normal; font-size: 14px; color: var(--ink-soft); margin-top: 10px; letter-spacing: 0; }
.doc-shot { margin: 0; display: grid; gap: 12px; }
.doc-shot img { width: 100%; height: auto; border-radius: 12px; }
.doc-shot figcaption { font-size: 14px; }
@media (max-width: 860px) {
  .pr-hero { padding-top: 44px; }
  .pr-panel { padding: 44px 8px 60px; border-radius: 22px; }
  .fan-paper { gap: 3px; }
  .pr-panel--doc { padding: 28px 14px; }
  .fan-pill { font-size: 10px; padding: 4px 8px; }
  .fan-edge { display: none; }
  .fan--two { flex-direction: column; gap: 32px; }
  .fan--two .fan-card { width: 220px; }
  .pr-sec { padding-top: 72px; }
}

/* ---------- ADDED OCT 27: the food-page look on other case studies ----------
   Mekhi: same design elements as the PR page, but each page keeps its
   own layout. body.fx swaps in the two-tone headings (markup), pill
   tags, the grainy green panel behind the hero art, stats and sport
   cards, and white cards that tilt a little with a deeper shadow. */
.fx .hero-art { background: var(--panel-green); }
.fx .hero-art .logo-art { transform: rotate(-3deg); box-shadow: 0 24px 48px -14px rgba(0,0,0,.45); }
.fx .hero-text .tag, .fx .detail-head .tag { align-self: flex-start; font-size: 13px; background: var(--accent-soft); padding: 6px 12px; border-radius: 99px; }
.fx .stats, .fx .sports { background: var(--panel-green); border-radius: 28px; padding: clamp(28px, 4vw, 56px); gap: 24px; }
.fx .stat-box, .fx .sport { box-shadow: 0 18px 36px -14px rgba(0,0,0,.4); transition: transform .25s ease; }
.fx .stat-box:nth-child(odd), .fx .sport:nth-child(odd) { transform: rotate(-1.5deg); }
.fx .stat-box:nth-child(even), .fx .sport:nth-child(even) { transform: rotate(1.5deg); }
.fx .stat-box:hover, .fx .sport:hover { transform: translateY(-6px) rotate(0deg); }
.fx .sport .tag { justify-self: start; font-size: 12px; font-weight: 600; color: #fff; background: var(--ink); padding: 4px 10px; border-radius: 99px; }
.fx .grid-2 > div { background: var(--paper); border-radius: 18px; padding: 22px 24px; box-shadow: 0 0 0 1px rgba(23,23,23,.06); }
.fx .hero h1 { font-size: clamp(38px, 4.2vw, 56px); }
.fx .stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats .stat--long { font-size: clamp(26px, 2.5vw, 36px); line-height: 1.1; }
@media (max-width: 860px) { .fx .stats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fx .stats--4 { grid-template-columns: 1fr; } .fx .stats, .fx .sports { padding: 22px 18px; } }

/* ---------- ADDED OCT 27: editorial index (Writing, Case studies) ----------
   After lovable.dev/blog: a sticky sidebar (title, one line, a short
   rule, categories that filter) beside a two-column grid of big image
   cards with category, serif title, a two-line excerpt, and
   publication with date. editorial.js does the filtering. */
.ed { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 72px; padding-top: 72px; padding-bottom: 104px; }
.ed-side { position: sticky; top: 32px; align-self: start; display: grid; gap: 18px; }
.ed-side h1 { font-size: clamp(44px, 4.4vw, 60px); }
.ed-side > p { color: var(--ink-soft); font-size: 16px; }
.ed-rule { display: block; width: 64px; height: 1px; background: var(--line); margin: 14px 0 10px; }
.ed-cats { display: grid; gap: 2px; justify-items: start; }
.ed-cats button { font: inherit; font-size: 17px; color: var(--ink-soft); background: none; border: 0; padding: 8px 0; cursor: pointer; text-align: left; }
.ed-cats button:hover { color: var(--ink); }
.ed-cats button[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.ed-aside { font-size: 14px !important; margin-top: 18px; }
.ed-aside a { color: var(--accent); }
.ed-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 40px; }
.ed-card { display: grid; gap: 10px; align-content: start; text-decoration: none; color: var(--ink); }
.ed-card[hidden] { display: none; }
.ed-img { aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--line); }
.ed-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.ed-card:hover .ed-img img { transform: scale(1.04); }
.ed-art { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; padding: 24px; }
.ed-art .logo-art { min-height: 0; width: 100%; height: 100%; padding: 20px; gap: 18px; background: none; box-shadow: none; }
.ed-art .logo-art img { max-height: 100%; width: auto; object-fit: contain; }
.ed-art .logo-art .logo-wnba { max-width: 40%; }
.ed-card:hover .ed-art .logo-art img { transform: none; }
.ed-cat { font-size: 14px; color: var(--ink-soft); margin-top: 10px; }
.ed-card .title { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -0.02em; }
.ed-card:hover .title { color: var(--accent); }
.ed-dek { color: var(--ink-soft); font-size: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ed-meta { font-size: 14px; color: var(--ink-soft); }
/* "Ligo Inc.: Mar–Oct 2026" -- a colon between the two parts, not a dot (Mekhi, Oct 28). */
.ed-meta i { font-style: normal; margin-right: .3em; }
.ed-meta i::before { content: ":"; }
.ed-main .note { margin-top: 56px; }
@media (max-width: 960px) {
  .ed { grid-template-columns: 1fr; gap: 32px; padding-top: 40px; }
  .ed-side { position: static; }
  .ed-rule { display: none; }
  .ed-cats { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); scrollbar-width: none; }
  .ed-cats button { white-space: nowrap; font-size: 15px; padding: 8px 14px; border-radius: 99px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
  .ed-cats button[aria-pressed="true"] { background: var(--ink); color: #fff; }
}
@media (max-width: 640px) { .ed-grid { grid-template-columns: 1fr; gap: 48px; } }

/* ---------- ADDED OCT 27: case-study pages after the UX portfolio template ----------
   Mekhi liked the "Andrei Dorin" template for individual case studies,
   and the same hero on the home page, but not its black ("the black
   theme sucks", Oct 28), so it's light: a cream hero band (the masthead
   stays the site's serif one) with bold condensed caps and square ink
   buttons; then .tone-green (solid color block) and .tone-light (white,
   rows split by thin rules) sections; square
   corners on everything inside body.cs. Full bleed comes from a huge
   box-shadow clipped sideways, so the markup keeps its .wrap. */
.band, .tone-green, .tone-light { position: relative; clip-path: inset(0 -100vmax); }
.band { color: var(--ink); padding-top: 56px; padding-bottom: 72px; }
.tone-green { background: var(--accent); box-shadow: 0 0 0 100vmax var(--accent); color: #fff; border-top: 0 !important; }
.tone-light { background: var(--paper); box-shadow: 0 0 0 100vmax var(--paper); color: var(--ink); border-top: 0 !important; }

.band h1, .band .hero-title { font-family: var(--block); font-weight: 700; text-transform: uppercase; letter-spacing: .01em; line-height: 1.1; color: var(--ink); font-size: clamp(36px, 4.2vw, 58px); font-variation-settings: normal; }
.band .soft { color: var(--ink-faint); }
.band .dot { color: var(--accent); }
.band .lede, .band p { color: var(--ink-soft); }
.band .tag { font-family: var(--block); text-transform: uppercase; letter-spacing: .14em; font-size: 13px; color: var(--accent); background: none; padding: 0; }
.band .read-more { align-self: flex-start; display: inline-block; font-family: var(--block); text-transform: uppercase; letter-spacing: .08em; font-size: 14px; font-weight: 600; color: #fff; background: var(--ink); border: 1px solid var(--ink); padding: 11px 18px; text-decoration: none; }
.band .read-more:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.band .hero-art { background: var(--line); padding: 0; border-radius: 0; min-height: 420px; overflow: hidden; }
.band .hero-art img { transform: none; border: 0; border-radius: 0; box-shadow: none; width: 100%; height: 100%; max-height: none; object-fit: cover; }
.band .hero-art .logo-art { border-radius: 0; box-shadow: none; transform: none; width: 100%; height: 100%; min-height: 420px; }
.band .hero-art .logo-art img { width: auto; height: auto; object-fit: contain; }
.band .carousel-arrow { color: var(--ink); border-color: var(--ink); background: none; border-radius: 0; }
.band .carousel-arrow:hover { color: #fff; background: var(--ink); }
.band .carousel-dots button { background: var(--line); border-radius: 0; }
.band .carousel-dots button[aria-current="true"] { background: var(--ink); }
.hero-carousel.band { padding-bottom: 48px; }

/* Headings and labels inside the case-study pages. */
.cs h2, .cs .pr-sec h2 { font-family: var(--block); font-weight: 700; text-transform: uppercase; letter-spacing: .01em; line-height: 1.1; font-size: clamp(28px, 3vw, 42px); font-variation-settings: normal; }
.cs h3 { font-family: var(--block); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 18px; }
.cs .tag, .cs .pr-pill, .cs .ed-cat { font-family: var(--block); text-transform: uppercase; letter-spacing: .12em; font-size: 13px; }
.cs .pr-pill { border-radius: 0; }
.cs .stat-box, .cs .sport, .cs .okr, .cs .grid-2 > div, .cs .paper, .cs .feedback, .cs .card-img, .cs .doc-shot img, .cs .pr-panel, .cs .fan-card img, .cs .fan-paper, .cs .fan-note, .cs .notice, .cs .admin-shots img, .cs .kit img { border-radius: 0 !important; }
.cs .fan-pill { border-radius: 0; font-family: var(--block); text-transform: uppercase; letter-spacing: .08em; }
.cs .pr-panel { background: var(--accent-soft); }
.cs .stat { font-family: var(--block); font-weight: 700; letter-spacing: 0; font-variation-settings: normal; }

/* Green block: the numbers sit straight on the color, split by rules. */
.tone-green .stats { gap: 0; }
.tone-green .stat-box { background: none; box-shadow: none; padding: 8px 24px; border-left: 1px solid rgba(255,255,255,.25); transform: none; }
.tone-green .stat-box:first-child { border-left: 0; padding-left: 0; }
.tone-green .stat, .tone-green h2 { color: #fff; }
.tone-green .stat-box p, .tone-green p { color: rgba(255,255,255,.8); }
.tone-green .tag { color: #BFE5D1; }

/* White block: two-column text becomes ruled rows. */
.tone-light .tag { color: var(--accent); background: none; padding: 0; }
.tone-light .grid-2 { gap: 0 48px; }
.tone-light .grid-2 > div { background: none; box-shadow: none; padding: 20px 0; border-top: 1px solid var(--ink); }

/* Sport by sport: ruled rows, the sport on the left. No numbers
   (Mekhi, Oct 28: numbering "looks clearly ai generated"). */
.cs .sports { grid-template-columns: 1fr; gap: 0; background: none !important; padding: 0 !important; border-top: 1px solid var(--ink); }
.cs .sport { background: none; box-shadow: none !important; transform: none !important; padding: 22px 0; border-bottom: 1px solid var(--line); grid-template-columns: 200px 1fr; column-gap: 32px; }
.cs .sport .tag { grid-row: 1 / span 2; color: var(--accent); background: none; padding: 0; font-size: 14px; }
.cs .sport h3 { font-size: 20px; }
@media (max-width: 860px) {
  .band .hero-art, .band .hero-art .logo-art { min-height: 260px; }
  .tone-green .stat-box { border-left: 0; border-top: 1px solid rgba(255,255,255,.25); padding: 18px 0; }
  .tone-green .stat-box:first-child { border-top: 0; }
  .cs .sport { grid-template-columns: 1fr; }
  .cs .sport .tag { grid-row: auto; }
}
.band .read-more { margin-top: 10px; max-width: none; }
.band .hero-text { justify-content: center; }
.band .hero-art--doc { background: #fff; display: grid; place-items: center; padding: 24px; }
.band .hero-art--doc img { object-fit: contain; height: auto; }
/* Home intro slide (Oct 28): two square buttons like the template's
   "Let's talk / See my work", and Mekhi's photo framed on the right. */
.band-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.band-btns .read-more { margin-top: 0; }
.band .read-more--ghost { background: transparent; color: var(--ink); }
.band .read-more--ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.hero--intro .hero-art { max-width: 480px; justify-self: end; width: 100%; }
.hero--intro .hero-art img { object-position: center top; }

/* ---------- ADDED OCT 28: case studies in the Writing layout ----------
   Same sidebar + column as the Writing page. The sidebar holds the
   title, deck and a list of this page's sections (the one on screen
   goes bold); the column opens with a cover image, and the green and
   white blocks sit inside the column instead of running full width. */
.ed--case { grid-template-columns: 300px minmax(0, 1fr); }
.ed--case .ed-side h1 { font-family: var(--block); font-weight: 700; text-transform: uppercase; letter-spacing: .01em; line-height: 1.1; font-size: clamp(28px, 2.4vw, 38px); font-variation-settings: normal; }
.ed--case .ed-side .tag { font-family: var(--block); text-transform: uppercase; letter-spacing: .12em; font-size: 13px; }
.ed-toc { display: grid; justify-items: start; }
.ed-toc a { font-size: 16px; color: var(--ink-soft); text-decoration: none; padding: 7px 0; }
.ed-toc a:hover { color: var(--ink); }
.ed-toc a.is-current { color: var(--ink); font-weight: 600; }
.case-cover { aspect-ratio: 16 / 9; overflow: hidden; background: var(--line); display: grid; place-items: center; }
.case-cover > img { width: 100%; height: 100%; object-fit: cover; }
.case-cover .logo-art { width: 100%; height: 100%; min-height: 0; border-radius: 0; box-shadow: none; }
.case-cover .logo-art img { max-height: 70%; width: auto; }
.case-cover .logo-art .logo-wnba { max-width: 34%; }
.case-cover--doc { background: #fff; padding: 24px; box-shadow: inset 0 0 0 1px var(--line); }
.case-cover--doc > img { object-fit: contain; }
.ed--case .ed-main > section { padding: 64px 0 0; border-top: 0; scroll-margin-top: 24px; }
.ed--case .detail-head, .ed--case .detail-body { max-width: none; margin: 0; }
.ed--case .ed-main > .tone-green, .ed--case .ed-main > .tone-light { clip-path: none; box-shadow: none; padding: 40px; margin-top: 64px; }
.ed--case .tone-light { box-shadow: 0 0 0 1px var(--line); }
.ed--case .pr-sec { justify-items: start; text-align: left; }
.ed--case .pr-sec > p { max-width: 60ch; }
.ed--case .pr-fine { text-align: left; margin-left: 0; }
.ed--case .pr-quote { margin-left: 0; }
@media (max-width: 960px) {
  .ed--case { grid-template-columns: 1fr; }
  .ed-toc { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); scrollbar-width: none; }
  .ed-toc a { white-space: nowrap; font-size: 15px; padding: 8px 14px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
  .ed--case .ed-main > .tone-green, .ed--case .ed-main > .tone-light { padding: 28px 20px; margin-top: 48px; }
  .ed--case .ed-main > section { padding-top: 48px; }
}
.ed--case .stats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
.ed--case .tone-green .stat-box:nth-child(3) { border-left: 0; padding-left: 0; }
@media (max-width: 860px) { .ed--case .tone-green .stat-box:nth-child(2) { border-top: 0; padding-top: 8px; } }
/* PR cover (Oct 28): type on green, no screenshots. */
.case-cover--quote { background: var(--accent); color: #fff; padding: clamp(28px, 5vw, 64px); place-items: start; align-content: center; gap: 18px; }
.case-cover--quote blockquote { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 3vw, 42px); line-height: 1.15; letter-spacing: -0.02em; max-width: 22ch; }
.case-cover--quote span { font-family: var(--block); text-transform: uppercase; letter-spacing: .12em; font-size: 13px; color: #BFE5D1; }
.ed--case .notice { margin-top: 24px; border-radius: 0; }

/* ---------- ADDED OCT 28: dropdown rows (PR coursework) ----------
   After the template's process list, without numbers: rows split by
   rules, the title in bold condensed caps with a plus that becomes a
   minus, and the open row on a soft shaded panel. */
.acc-list { border-top: 1px solid var(--ink); margin-top: 8px; }
.ed--case .ed-main > .acc-list { padding-top: 0; margin-top: 8px; }
.acc { border-bottom: 1px solid var(--line); scroll-margin-top: 24px; }
.acc summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; column-gap: 24px; row-gap: 4px; align-items: center; padding: 22px 20px; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; grid-column: 2; grid-row: 1 / span 2; font-size: 26px; font-weight: 300; line-height: 1; color: var(--ink); }
.acc[open] summary::after { content: "\2212"; }
.acc-title { font-family: var(--block); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 20px; color: var(--ink); }
.acc-meta { font-size: 15px; color: var(--ink-soft); }
.acc summary:hover .acc-title { color: var(--accent); }
.acc[open] { background: #EFEBE3; }
.acc-body { display: grid; gap: 18px; padding: 0 20px 28px; }
.acc-body p { color: var(--ink-soft); max-width: 64ch; }
.acc-body .paper { box-shadow: none; }
@media (max-width: 560px) {
  .acc summary { padding: 18px 14px; }
  .acc-body { padding: 0 14px 22px; }
  .acc-title { font-size: 18px; }
}
.ed-side .notice { font-size: 15px; padding: 14px 16px; border-radius: 0; }
/* Title and disclaimer in one box (PR coursework sidebar, Oct 28). */
.ed-box { background: var(--accent-soft); padding: 28px 26px; display: grid; gap: 14px; }
.ed-box p { font-size: 15px; color: var(--ink-soft); }
/* Two app screens side by side in a card (Ligo, Oct 28). */
.card-img--phones { display: flex; justify-content: center; align-items: center; gap: 6%; padding: 6% 0 0; background: var(--accent-soft); }
.card-img--phones img { width: auto !important; height: 100% !important; object-fit: contain; object-position: top; }
.ed--case .ed-main > .acc-list--spaced { margin-top: 64px; }
.acc-body .bars, .acc-body .grid-2 { max-width: 100%; }
/* Title across the top, content full width underneath (Ligo, Oct 28:
   once the sidebar held only the title, it was wasting a column). */
.ed--top { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.ed--top .ed-side { position: static; max-width: 760px; }
.ed--top .ed-main > section:first-child { padding-top: 0; }
.ed--top .ed-side h1 { font-size: clamp(34px, 4vw, 56px); }
/* Top layout on pages that keep a section list: the list becomes one
   row of links under the description, and the logo cover gets wider
   and shorter so it doesn't fill the screen. */
.ed--top .ed-rule { display: none; }
/* At every width (Oct 28, Mekhi: "this dont look good" at ~890px, where the
   links turned into boxed white chips from the older sidebar layout). They
   wrap to a second line on a phone instead of scrolling. */
.ed--top .ed-toc { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 6px 0 0; padding: 0; overflow: visible; }
.ed--top .ed-toc a { padding: 4px 0; font-size: 15px; background: none; box-shadow: none; white-space: nowrap; }
.ed--top .case-cover { aspect-ratio: 21 / 8; }
@media (min-width: 961px) {
  .ed--top .ed-cats { display: flex; flex-wrap: wrap; gap: 4px 22px; }
  .ed--top .ed-cats button { padding: 4px 0; }
}
.ed--top .ed-aside { margin-top: 4px; }
.ed-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 32px; }
@media (max-width: 960px) { .ed-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ed-grid--3 { grid-template-columns: 1fr; } }
/* Design pages (Oct 28): a back link as the label, and links at the end. */
.ed-back { text-decoration: none; }
.ed-back:hover { color: var(--ink); }
.ed-more { margin-top: 56px; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.ed-more .go { color: var(--ink); font-weight: 500; text-decoration: none; }
.ed-more .go:hover { color: var(--accent); }
/* Smaller home hero (Mekhi, Oct 28): less padding, a smaller title,
   and a shorter picture, so the featured writing shows sooner. */
.hero-carousel.band { padding-top: 28px; padding-bottom: 28px; }
.hero-carousel.band .hero { padding-top: 0; padding-bottom: 20px; gap: 40px; }
.hero-carousel.band .hero-title { font-size: clamp(30px, 3.2vw, 44px); }
.hero-carousel.band .lede { font-size: 16px; }
.hero-carousel.band .hero-art { min-height: 0; height: clamp(260px, 30vw, 400px); }
.hero-carousel.band .hero--intro .hero-art { max-width: 340px; }
/* Home about band (Oct 28): the "Hi, I'm Mekhi" card as a wide band
   above the footer, portrait on the left and the text beside it. */
.about-foot-inner { display: grid; grid-template-columns: 180px minmax(0, 1fr); column-gap: 48px; row-gap: 12px; align-items: start; background: var(--grain), var(--glow); padding: 44px 48px; border-radius: 20px; }
.about-foot-inner .portrait { grid-row: 1 / span 10; width: 180px; height: auto; }
.about-foot-inner h2 { margin: 0; }
.about-foot-inner .about-lead { font-family: var(--display); font-size: 22px; line-height: 1.3; color: var(--ink); max-width: 36ch; }
.about-foot-inner p { color: var(--ink-soft); max-width: 64ch; }
.about-foot-inner a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
@media (max-width: 700px) {
  .about-foot-inner { grid-template-columns: 1fr; padding: 32px 22px; text-align: center; justify-items: center; }
  .about-foot-inner .portrait { grid-row: auto; width: 130px; }
}

/* ---------- ADDED OCT 28: no scrunching ----------
   Mekhi: "the site should never scrunch." The full masthead needs
   about 780px, so under 860px (where the hero stacks too) the menu
   button takes over instead of squeezing the links onto two lines.
   These repeat the 560px phone rules at the wider width. */
.wordmark, .sections a, .band .read-more { white-space: nowrap; }
@media (max-width: 860px) {
  .masthead { padding-top: 14px; }
  .masthead-top { flex-wrap: wrap; padding-bottom: 14px; }
  .wordmark { font-size: 23px; }
  .menu-btn { display: flex; }
  .sections { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-top: 8px; }
  .masthead.open .sections { display: flex; }
  .sections a { font-size: 17px; padding: 14px 4px; border-radius: 0; border-bottom: 1px solid var(--line); }
  .sections a:hover, .sections a[aria-current="page"] { background: none; }
  .sections a[aria-current="page"] { color: var(--accent); }
  .sections .pill { margin: 18px 0 4px; padding: 14px 18px; text-align: center; border-bottom: 0; border-radius: 14px; font-size: 16px; }

  /* Stacked home hero: every picture is the same 16:9 box, full width,
     so nothing jumps as the slides change or the window resizes. The
     picture sits at the bottom of each slide, right above the arrows,
     and any spare height goes between the text and the picture. */
  .hero-carousel.band .hero { grid-template-rows: 1fr auto; }
  .hero-carousel.band .hero-text { justify-content: flex-start; }
  .hero-carousel.band .hero-art,
  .hero-carousel.band .hero--intro .hero-art { height: auto; min-height: 0; max-width: none; justify-self: stretch; aspect-ratio: 16 / 9; }
  .hero-carousel.band .hero--intro .hero-art img { object-position: center 12%; }
}

/* Phone: the Ligo page's four post types (Founding partners, Club
   spotlight...) go one per row instead of two 140px columns. */
@media (max-width: 560px) { .mini-cats { grid-template-columns: 1fr; } }
/* Stat blocks on smaller screens (Oct 28): two columns need a gap so
   the captions don't run into each other; on phones, one stat per
   row with a thin rule between them. */
@media (max-width: 860px) { .ed--case .tone-green .stats { column-gap: 28px; } }
@media (max-width: 560px) {
  .ed--case .stats--4 { grid-template-columns: 1fr; row-gap: 0; }
  .ed--case .tone-green .stat-box:nth-child(n) { border-left: 0; border-top: 1px solid rgba(255,255,255,.25); padding: 20px 0; }
  .ed--case .tone-green .stat-box:first-child { border-top: 0; padding-top: 0; }
  .ed--case .tone-green .stat-box:last-child { padding-bottom: 0; }
}
/* Key takeaways list (WNBA, Oct 28). */
.takeaways { font-size: 17px; gap: 12px; }
.takeaways li { color: var(--ink); }
/* Section headings on case studies (Oct 28): one plain line, a little
   smaller, and room between the heading and the text under it. */
.ed--case .detail-head { margin-bottom: 20px; }
.ed--case .ed-main h2 { font-size: clamp(24px, 2.4vw, 32px); }

/* ---------- ADDED OCT 28: bar charts (WNBA five-year model) ----------
   Two single-series charts side by side on one shared scale. Thin
   rounded bars on the baseline, recessive grid, values on the first
   and last bar, every value on hover/focus. Text stays in ink colors;
   only the bars carry the accent. */
.charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin: 8px 0 4px; }
.chart { margin: 0; display: grid; gap: 12px; }
.chart figcaption { display: flex; align-items: baseline; gap: 10px; }
.chart figcaption b { font-family: var(--block); text-transform: uppercase; letter-spacing: .04em; font-size: 16px; color: var(--ink); }
.chart figcaption span { font-size: 14px; color: var(--ink-soft); }
.chart-plot { position: relative; height: 220px; margin-left: 44px; }
.chart-grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; }
.chart-grid i { position: relative; height: 0; border-top: 1px solid var(--line); }
.chart-grid i:last-child { border-top-color: var(--ink-faint); }
.chart-grid i::before { content: attr(data-y); position: absolute; right: calc(100% + 8px); top: -8px; font-size: 12px; font-style: normal; color: var(--ink-soft); white-space: nowrap; }
.chart-bars { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; align-items: end; padding: 0 6px; }
.cbar { position: relative; height: var(--h); margin: 0 18%; background: var(--accent); border-radius: 4px 4px 0 0; outline: none; transition: filter .15s; }
.cbar span { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; opacity: 0; transition: opacity .15s; }
.cbar--label span, .cbar:hover span, .cbar:focus span { opacity: 1; }
.cbar:hover, .cbar:focus { filter: brightness(1.25); }
.chart-bars:hover .cbar--label:not(:hover) span { opacity: 0; }
.chart-x { display: grid; grid-template-columns: repeat(5, 1fr); margin-left: 44px; padding: 0 6px; font-size: 12.5px; color: var(--ink-soft); text-align: center; }
@media (max-width: 640px) {
  .charts { grid-template-columns: 1fr; gap: 28px; }
  .chart-plot { height: 180px; }
}
.cbar:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }