/* ═══════════════════════════════════════════════════════════════════
   "SKY" — art direction after joshwcomeau.com
   Sky/cloud hero · playful pink + blue + violet accents · pale-blue
   cards · two-column body with a sidebar · full light and dark themes.
   Shared by index.html and about.html.
   ═══════════════════════════════════════════════════════════════════ */

/* ── tokens: light ───────────────────────────────────────────────── */
:root {
  --sky-top:      #7ec8ee;
  --sky-bottom:   #b6e2f6;
  --cloud-far:    #d8eefb;
  --cloud-mid:    #eaf7fd;
  --cloud-near:   #ffffff;

  --page:         #ffffff;
  --page-alt:     #f7fbfe;

  --text:         #1f2933;
  --text-body:    #4a5568;
  --text-muted:   #718096;

  --pink:         #d6236a;   /* section labels — the signature accent */
  --violet:       #6d28d9;   /* wordmark, links */
  --violet-soft:  #7c3aed;
  --blue-deep:    #1f4d6b;   /* text on pale cards */

  --card:         #d9ecfa;   /* pale blue — stays pale in dark too */
  --card-border:  #bcdcf2;
  --pill:         #d9ecfa;
  --pill-text:    #1f4d6b;

  --rule:         #e3ebf2;
  --up:           #2f7d4f;

  --display: "Outfit", "Plus Jakarta Sans", system-ui, sans-serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --wrap: 1120px;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(31,41,51,.05), 0 8px 24px -14px rgba(31,41,51,.18);
}

/* ── tokens: dark. OS preference by default … ────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sky-top:    #1b2635;
    --sky-bottom: #26333f;
    --cloud-far:  #2b3947;
    --cloud-mid:  #323f4d;
    --cloud-near: #ffffff;

    --page:       #232f3d;
    --page-alt:   #1e2937;

    --text:       #f2f6fa;
    --text-body:  #c6d2de;
    --text-muted: #94a3b3;

    --pink:       #ff5fa2;
    --violet:     #b79bff;
    --violet-soft:#c4aeff;

    --rule:       #35424f;
    --up:         #7ec898;
    --shadow: 0 1px 2px rgba(0,0,0,.28), 0 8px 24px -14px rgba(0,0,0,.55);
  }
}
/* … and the toggle wins in both directions. */
:root[data-theme="dark"] {
  --sky-top:#1b2635; --sky-bottom:#26333f;
  --cloud-far:#2b3947; --cloud-mid:#323f4d; --cloud-near:#ffffff;
  --page:#232f3d; --page-alt:#1e2937;
  --text:#f2f6fa; --text-body:#c6d2de; --text-muted:#94a3b3;
  --pink:#ff5fa2; --violet:#b79bff; --violet-soft:#c4aeff;
  --rule:#35424f; --up:#7ec898;
  --shadow: 0 1px 2px rgba(0,0,0,.28), 0 8px 24px -14px rgba(0,0,0,.55);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--page);
  color: var(--text-body);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
p { margin: 0 0 18px; }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4 { font-family: var(--display); color: var(--text);
                 font-weight: 700; margin: 0; letter-spacing: -0.015em; }
h1 { font-size: clamp(38px, 6vw, 60px); line-height: 1.05; }
h2 { font-size: clamp(26px, 3.4vw, 34px); line-height: 1.15; }
h3 { font-size: 22px; line-height: 1.25; }

a { color: var(--violet); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 6px;
}

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

/* section label — the pink uppercase signature */
.eyebrow {
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--pink); margin: 0 0 22px;
}

/* ── notice bar (preview only, not part of the design) ───────────── */
.notice {
  background: var(--page-alt); border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11.5px; color: var(--text-muted);
  padding: 7px 24px; text-align: center; position: relative; z-index: 6;
}

/* ── sky hero ───────────────────────────────────────────────────── */
.sky {
  position: relative;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 62%);
  padding-bottom: 0;
  overflow: hidden;
}
.clouds { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1;
          pointer-events: none; line-height: 0; }
.clouds svg { display: block; width: 100%; height: auto; }
.cloud-far  { fill: var(--cloud-far); }
.cloud-mid  { fill: var(--cloud-mid); }
.cloud-near { fill: var(--cloud-near); }

/* ── nav ────────────────────────────────────────────────────────── */
.nav { position: relative; z-index: 5; }
.nav-in { display: flex; align-items: center; gap: 20px; height: 74px; }
.brand { display: inline-flex; align-items: baseline; gap: 4px;
         font-family: var(--display); font-weight: 700; font-size: 21px;
         color: var(--violet); }
.brand:hover { text-decoration: none; }
.brand .mid { font-size: 12px; color: var(--violet-soft); transform: translateY(-6px);
              display: inline-block; }
.nav-links { display: flex; align-items: center; gap: 26px; margin-left: 26px; }
.nav-links a { color: var(--text); font-weight: 500; font-size: 15.5px; }
.nav-links a:hover { color: var(--violet); }
.nav-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.iconbtn {
  width: 38px; height: 38px; display: inline-flex; align-items: center;
  justify-content: center; border: 0; border-radius: 50%;
  background: transparent; color: var(--text); cursor: pointer;
  transition: background-color .15s, color .15s;
}
.iconbtn:hover { background: rgba(255,255,255,.45); color: var(--violet); }
:root[data-theme="dark"] .iconbtn:hover { background: rgba(255,255,255,.10); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .iconbtn:hover { background: rgba(255,255,255,.10); }
}
.iconbtn svg { width: 20px; height: 20px; }
.hamburger { display: none; }

/* ── hero content ───────────────────────────────────────────────── */
.hero-in {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 32px;
  align-items: center; padding: 28px 0 132px;
}
@media (max-width: 900px) {
  .hero-in { grid-template-columns: 1fr; padding-bottom: 120px; }
  .hero-art { order: -1; }
}
.hero h1 { color: var(--text); }
.hero .tagline { margin-top: 20px; font-size: 18.5px; color: var(--text-body); max-width: 34em; }
:root[data-theme="dark"] .hero .tagline { color: var(--text-body); }
.hero-cta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: 15px;
  background: var(--violet); color: #fff; border: 2px solid var(--violet);
  transition: transform .14s, box-shadow .14s;
}
.btn:hover { text-decoration: none; transform: translateY(-2px);
             box-shadow: 0 8px 20px -8px rgba(109,40,217,.6); }
.btn.ghost { background: rgba(255,255,255,.72); color: var(--violet);
             border-color: rgba(255,255,255,.9); }
:root[data-theme="dark"] .btn.ghost { background: rgba(255,255,255,.10);
             color: var(--violet); border-color: rgba(255,255,255,.18); }
.btn svg { width: 17px; height: 17px; }

/* floating avatar + confetti */
.hero-art { position: relative; display: flex; justify-content: center; }
.avatar { width: min(280px, 70vw); position: relative; z-index: 2; }
.float { animation: bob 5.2s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-12px) } }
.confetti { position: absolute; inset: -10% -18%; z-index: 1; pointer-events: none; }
.confetti span {
  position: absolute; width: 5px; height: 12px; border-radius: 2px; opacity: .85;
}

/* ── body layout: main + sidebar ─────────────────────────────────── */
.body-grid {
  display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 56px;
  padding: 56px 0 24px;
}
@media (max-width: 940px) { .body-grid { grid-template-columns: 1fr; gap: 40px; } }

/* entry (a system) */
.entry { padding: 0 0 34px; margin-bottom: 34px; border-bottom: 1px solid var(--rule); }
.entry:last-child { border-bottom: 0; }
.entry h3 a { color: var(--text); }
.entry h3 a:hover { color: var(--violet); }
.entry .sub { margin: 6px 0 0; color: var(--violet); font-size: 16px; font-weight: 500; }
.entry .desc { margin-top: 12px; }
.entry .facts { margin-top: 12px; font-family: var(--mono); font-size: 12.5px;
                color: var(--text-muted); font-variant-numeric: tabular-nums; }
.entry .more { margin-top: 14px; display: inline-block; font-weight: 700; color: var(--text); }
.entry .more:hover { color: var(--violet); }

/* sidebar */
.side h4 { font-family: var(--sans); font-size: 13px; font-weight: 700;
           letter-spacing: .13em; text-transform: uppercase; color: var(--pink);
           margin: 0 0 16px; }
.side + .side, .side-block + .side-block { margin-top: 44px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.pills li a, .pills li span {
  display: inline-block; padding: 5px 13px; border-radius: 999px;
  background: var(--pill); color: var(--pill-text);
  font-size: 14px; font-weight: 500; border: 1px solid var(--card-border);
}
.pills li a:hover { text-decoration: none; filter: brightness(.96); }
.arrowlist { list-style: none; margin: 0; padding: 0; }
.arrowlist li { display: flex; gap: 12px; margin-bottom: 14px; align-items: flex-start; }
.arrowlist li svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 6px;
                    color: var(--text-muted); }
.arrowlist a { color: var(--text); font-weight: 500; }
.arrowlist a:hover { color: var(--violet); }

/* live systems card */
.livecard {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 16px 18px;
}
.livecard table { width: 100%; border-collapse: collapse; font-family: var(--mono);
                  font-size: 12px; font-variant-numeric: tabular-nums; }
.livecard td { padding: 2px 0; color: var(--blue-deep); white-space: nowrap; }
.livecard td.u { text-align: right; color: var(--up); font-weight: 500; }
.livecard .foot { margin: 10px 0 0; font-family: var(--mono); font-size: 10.5px;
                  color: var(--blue-deep); opacity: .75; }

/* ── generic sections ───────────────────────────────────────────── */
.section { padding: 64px 0; }
.section.alt { background: var(--page-alt); }

/* experience */
.role { padding: 26px 0; border-top: 1px solid var(--rule); }
.role:first-of-type { border-top: 0; padding-top: 0; }
.role-head { display: flex; flex-wrap: wrap; gap: 6px 16px;
             align-items: baseline; justify-content: space-between; }
.role-head .when { font-family: var(--mono); font-size: 12.5px; color: var(--text-muted);
                   font-variant-numeric: tabular-nums; }
.role .who { margin: 4px 0 0; color: var(--text-muted); font-size: 15px; }
.role ul { margin: 14px 0 0; padding: 0; list-style: none; }
.role li { position: relative; padding-left: 20px; margin-bottom: 9px; font-size: 15.5px; }
.role li::before { content: ""; position: absolute; left: 2px; top: 11px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--card);
  border: 1.5px solid var(--card-border); }

/* ── work grid: real screenshots in the pale-card idiom ─────────── */
.work { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 760px) { .work { grid-template-columns: 1fr; } }
.wcard {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); overflow: hidden; display: flex;
  flex-direction: column; transition: transform .16s, box-shadow .16s;
}
.wcard:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.wcard.feature { grid-column: span 2; }
@media (max-width: 760px) { .wcard.feature { grid-column: span 1; } }
.wshot { display: block; background: var(--page-alt); line-height: 0;
         border-bottom: 1px solid var(--card-border); }
.wshot img { width: 100%; height: 200px; object-fit: cover; object-position: top; display: block; }
.wcard.feature .wshot img { height: 260px; }
.wbody { padding: 18px 20px 20px; }
.wbody h3 { font-size: 19px; }
.wbody h3 a { color: var(--blue-deep); }
:root[data-theme="dark"] .wbody h3 a { color: var(--blue-deep); }
.wbody p { margin: 8px 0 0; font-size: 14.5px; color: var(--blue-deep);
           opacity: .85; line-height: 1.55; }
.wtags { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px;
         list-style: none; padding: 0; }
.wtags li { font-family: var(--mono); font-size: 11px; color: var(--blue-deep);
            background: rgba(31,77,107,.10); border-radius: 999px; padding: 3px 9px; }
.wmeta { margin-top: 12px; font-family: var(--mono); font-size: 11.5px;
         color: var(--blue-deep); opacity: .7; }

/* ── case-study page ───────────────────────────────────────────── */
.study { max-width: 760px; }
.study .back { font-family: var(--mono); font-size: 12.5px; }
.study h2 { margin-top: 44px; font-size: 26px; }
.study .block-label {
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--pink);
  margin: 40px 0 12px;
}
.study .facts { font-family: var(--mono); font-size: 13px; color: var(--text-muted);
                font-variant-numeric: tabular-nums; margin-top: 10px; }
.tradeoff {
  margin: 28px 0; background: var(--card); border: 1px solid var(--card-border);
  border-left: 4px solid var(--pink); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 22px; color: var(--blue-deep);
}
.tradeoff .block-label { margin: 0 0 8px; }
.tradeoff p { margin: 0; color: var(--blue-deep); font-size: 15.5px; }
.diagram { background: var(--card); border: 1px solid var(--card-border);
           border-radius: var(--radius); padding: 28px 16px; margin: 24px 0 8px; }
.diagram svg { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; }
.diagram text { font-family: var(--mono); font-size: 11px; fill: var(--blue-deep); }
.diagram .box  { fill: none; stroke: #1f4d6b; stroke-width: 1.3; }
.diagram .flow { stroke: #1f4d6b; stroke-width: 1.3; fill: none; }
.diagram .dash { stroke-dasharray: 4 4; }
figcaption { font-family: var(--mono); font-size: 11.5px; color: var(--text-muted);
             text-align: center; margin-top: 10px; }
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; }
@media (max-width: 700px) { .shots { grid-template-columns: repeat(2, 1fr); } }
.shots figure { margin: 0; }
.shots img { width: 100%; height: 190px; object-fit: cover; object-position: top;
             border-radius: 10px; border: 1px solid var(--card-border); display: block; }
.shots figcaption { text-align: left; margin-top: 7px; }

/* bento grid (About) */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; } }
.tile {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 20px; color: var(--blue-deep);
  font-size: 15px; line-height: 1.55; text-align: center;
}
.tile.wide { grid-column: span 2; }
@media (max-width: 560px) { .tile.wide { grid-column: span 1; } }
.tile strong { color: var(--blue-deep); }
.tile .big { font-family: var(--display); font-size: 30px; font-weight: 700;
             display: block; color: var(--blue-deep); line-height: 1.1; }
.tile .cap { display: block; margin-top: 6px; font-size: 13.5px; opacity: .85; }
.tile svg { color: var(--blue-deep); }
.saybtn { background: none; border: 0; cursor: pointer; color: var(--blue-deep);
          padding: 2px; vertical-align: middle; }
.saybtn svg { width: 17px; height: 17px; }

/* about hero photo slot */
.photo-slot { width: min(340px, 78vw); }

/* footer */
.foot { border-top: 1px solid var(--rule); padding: 30px 0 44px; }
.foot-in { display: flex; flex-wrap: wrap; gap: 10px 26px;
           justify-content: space-between; align-items: baseline; }
.foot .meta { font-family: var(--mono); font-size: 12px; color: var(--text-muted); }

/* motion */
.rise { opacity: 0; transition: opacity .22s ease-out; }
.rise.in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .rise { opacity: 1; }
  .float { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE SYSTEM
   Breakpoints: 1024 (tablet landscape) · 860 (mobile nav) · 760 (grids)
                560 (phone) · 380 (small phone). Tested down to 320px.
   ═══════════════════════════════════════════════════════════════════ */

/* nothing may cause a horizontal scrollbar */
html, body { max-width: 100%; overflow-x: hidden; }
body { overflow-wrap: break-word; }
img, svg, video { height: auto; }

/* brand mark scales with the header */
.brand { gap: 9px; font-size: 20px; white-space: nowrap; }
.brand-mark { width: 27px; height: 27px; flex: 0 0 auto; border-radius: 7px; }

/* ── ≤1024: tighten the sidebar before it collapses ── */
@media (max-width: 1024px) {
  .body-grid { grid-template-columns: minmax(0,1fr) 260px; gap: 40px; }
  .nav-links { gap: 20px; margin-left: 20px; }
  .nav-links a { font-size: 15px; }
}

/* ── ≤860: mobile navigation ──
   The links list becomes a dropdown panel. Same markup, no duplication. */
@media (max-width: 860px) {
  .nav-in { height: 64px; gap: 12px; }
  .hamburger { display: inline-flex; }

  .nav-links {
    display: none;
    position: absolute; left: 12px; right: 12px; top: calc(100% - 6px);
    z-index: 40;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    background: var(--page); border: 1px solid var(--rule);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 6px;
  }
  .nav-links.open { display: flex; }
  .nav-links a {
    padding: 13px 14px; border-radius: 9px; font-size: 16px;
    min-height: 44px; display: flex; align-items: center;
  }
  .nav-links a:hover { background: var(--page-alt); text-decoration: none; }
  .nav { position: relative; }

  /* the social icons live in the footer and contact block too — drop them
     here so the header never crowds at 320px */
  .nav-tools .iconbtn.social { display: none; }
}

/* ── ≤900: hero stacks ── */
@media (max-width: 900px) {
  .hero-in { gap: 20px; padding: 18px 0 116px; }
  .avatar { width: min(210px, 52vw); }
  .hero .tagline { font-size: 17.5px; }
}

/* ── ≤760: content grids to one column ── */
@media (max-width: 760px) {
  .section { padding: 52px 0; }
  .wrap { padding: 0 18px; }
  .wshot img, .wcard.feature .wshot img { height: 172px; }
  .role-head { gap: 2px 12px; }
}

/* ── ≤560: phone ── */
@media (max-width: 560px) {
  body { font-size: 16px; }
  .notice { font-size: 10.5px; padding: 6px 14px; line-height: 1.5; }
  .avatar { width: min(172px, 46vw); }
  .hero-in { padding-bottom: 104px; }
  .hero-cta { gap: 10px; }
  .btn { padding: 12px 18px; font-size: 14.5px; }
  .hero-cta .btn { flex: 1 1 auto; justify-content: center; }
  .eyebrow { font-size: 12px; letter-spacing: .11em; }
  .shots { grid-template-columns: 1fr 1fr; gap: 10px; }
  .shots img { height: 148px; }
  .tile { padding: 17px; }
  .tile .big { font-size: 25px; }
  .study .block-label { margin-top: 32px; }
  .livecard { padding: 14px 15px; }
  .livecard table { font-size: 11px; }
  .foot-in { gap: 6px; }
  /* full-width tap targets in the contact row */
  .section p .btn { flex: 1 1 auto; justify-content: center; }
}

/* ── ≤380: small phone (iPhone SE, Android compact) ── */
@media (max-width: 380px) {
  .wrap { padding: 0 14px; }
  .brand { font-size: 17px; gap: 7px; }
  .brand-mark { width: 24px; height: 24px; }
  .shots { grid-template-columns: 1fr; }
  .shots img { height: 200px; }
  .wtags li { font-size: 10px; padding: 2px 7px; }
  .pills li a, .pills li span { font-size: 13px; padding: 4px 11px; }
}

/* ── touch devices: no hover-only affordances, bigger targets ── */
@media (hover: none) {
  .wcard:hover { transform: none; box-shadow: none; }
  .btn:hover { transform: none; }
  .arrowlist a, .nav-links a, .pills li a { min-height: 32px; }
}

/* ── all interactive targets meet 44px ── */
.iconbtn { width: 44px; height: 44px; }
.saybtn { min-width: 44px; min-height: 44px; }

/* ── landscape phones: the hero shouldn't eat the whole viewport ── */
@media (max-height: 520px) and (orientation: landscape) {
  .hero-in { padding: 12px 0 92px; }
  .avatar { width: min(150px, 24vw); }
  h1 { font-size: 30px; }
}

/* ═══════════════════════════════════════════════════════════════════
   DEVICE FRAMES + SLIDER
   Phone frames for app screenshots (718x1599), browser frames for
   desktop captures (1440x810 / 1918x870).
   ═══════════════════════════════════════════════════════════════════ */

/* ── phone frame ── */
.phone {
  position: relative; width: 100%; max-width: 300px; margin: 0 auto;
  background: #14161c; border-radius: 34px; padding: 10px;
  box-shadow: 0 2px 4px rgba(20,22,28,.2), 0 24px 50px -22px rgba(20,22,28,.55);
}
.phone::before {           /* notch */
  content: ""; position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  width: 74px; height: 6px; border-radius: 99px; background: #2c3038; z-index: 3;
}
.phone-screen {
  position: relative; border-radius: 26px; overflow: hidden;
  background: #0b0d11; aspect-ratio: 718 / 1599;
}

/* ── browser frame ── */
.browser {
  width: 100%; border-radius: 12px; overflow: hidden; background: #14161c;
  box-shadow: 0 2px 4px rgba(20,22,28,.18), 0 20px 44px -24px rgba(20,22,28,.5);
}
.browser-bar {
  display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #22262e;
}
.browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: #3b414c; }
.browser-bar i:nth-child(1) { background: #ff6058; }
.browser-bar i:nth-child(2) { background: #ffbd2e; }
.browser-bar i:nth-child(3) { background: #29ca41; }
.browser-bar span {
  margin-left: 8px; flex: 1; height: 16px; border-radius: 99px; background: #2f343d;
}
.browser-screen { position: relative; overflow: hidden; background: #0b0d11;
                  aspect-ratio: 16 / 9; }

/* ── slider ── */
.slider { position: relative; }
.slider-track {
  display: flex; height: 100%; width: 100%;
  transition: transform .38s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.slider-track > img {
  flex: 0 0 100%; width: 100%; height: 100%;
  object-fit: cover; object-position: top; display: block;
  user-select: none; -webkit-user-drag: none;
}
.slider-ui {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 16px; flex-wrap: wrap;
}
.sbtn {
  width: 44px; height: 44px; flex: 0 0 auto; display: inline-flex;
  align-items: center; justify-content: center;
  border: 1px solid var(--card-border); border-radius: 50%;
  background: var(--card); color: var(--blue-deep); cursor: pointer;
  transition: filter .14s;
}
.sbtn:hover { filter: brightness(.95); }
.sbtn svg { width: 18px; height: 18px; }
.dots { display: flex; gap: 7px; align-items: center; }
.dots button {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
  background: var(--card-border); cursor: pointer; transition: background-color .15s, width .15s;
}
.dots button[aria-current="true"] { background: var(--pink); width: 22px; border-radius: 99px; }
.slider-cap {
  margin: 12px 0 0; text-align: center; font-size: 14.5px; color: var(--text-muted);
  min-height: 3.2em;
}
.slider-count { font-family: var(--mono); font-size: 12px; color: var(--text-muted);
                font-variant-numeric: tabular-nums; }

/* ── showcase layout ── */
.showcase { padding: 64px 0; border-top: 1px solid var(--rule); }
.showcase:first-of-type { border-top: 0; }
.show-grid { display: grid; grid-template-columns: 340px minmax(0,1fr); gap: 48px;
             align-items: start; }
.show-grid.wide-left { grid-template-columns: minmax(0,1fr) 300px; }
@media (max-width: 900px) {
  .show-grid, .show-grid.wide-left { grid-template-columns: 1fr; gap: 30px; }
}
.show-meta h3 { font-size: 24px; }
.show-meta .role { margin-top: 10px; font-size: 15.5px; }
.show-meta .kv { margin-top: 16px; display: grid; grid-template-columns: 84px 1fr;
                 gap: 6px 14px; font-size: 14.5px; }
.show-meta .kv dt { font-family: var(--mono); font-size: 11.5px; text-transform: uppercase;
                    letter-spacing: .07em; color: var(--text-muted); padding-top: 4px; }
.show-meta .kv dd { margin: 0; color: var(--text-body); }
.show-links { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px;
  border-radius: 999px; font-size: 14px; font-weight: 600;
  background: var(--card); color: var(--blue-deep); border: 1px solid var(--card-border);
}
.chip:hover { text-decoration: none; filter: brightness(.96); }
.chip.solid { background: var(--violet); color: #fff; border-color: var(--violet); }
.chip svg { width: 15px; height: 15px; }
.nosource { font-family: var(--mono); font-size: 12px; color: var(--text-muted);
            margin-top: 14px; }

/* mobile companion shots beside a desktop slider */
.mob-row { display: flex; gap: 14px; margin-top: 22px; }
.mob-row .phone { max-width: 132px; padding: 6px; border-radius: 20px; }
.mob-row .phone::before { width: 40px; height: 4px; top: 10px; }
.mob-row .phone-screen { border-radius: 15px; aspect-ratio: 720 / 1558; }
.mob-row img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
@media (max-width: 560px) { .mob-row .phone { max-width: 100px; } .mob-row { gap: 10px; } }

/* filter bar */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.filters button {
  padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600;
  background: transparent; color: var(--text-body);
  border: 1px solid var(--rule); cursor: pointer; transition: all .15s;
}
.filters button[aria-pressed="true"] {
  background: var(--violet); color: #fff; border-color: var(--violet);
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE PASS 2 — covers the components added after pass 1
   (device frames, sliders, showcase grids, filters, page heroes).
   Appended last so these win over the base rules above.
   ═══════════════════════════════════════════════════════════════════ */

/* page hero used by /work and the case study — was hard-coded inline */
.page-hero { position: relative; z-index: 3; max-width: 860px;
             padding-top: 18px; padding-bottom: 126px; }
@media (max-width: 760px) { .page-hero { padding-bottom: 104px; } }
@media (max-width: 560px) { .page-hero { padding-top: 8px; padding-bottom: 88px; } }

/* home page's app-slider card */
.show-grid.app { grid-template-columns: 280px minmax(0,1fr); gap: 34px; align-items: center; }
@media (max-width: 900px) { .show-grid.app { grid-template-columns: 1fr; gap: 26px; } }

/* ── mobile-view phone row: must never push the page sideways ── */
.mob-row {
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  padding-bottom: 4px;
}
.mob-row .phone { flex: 0 0 auto; }
@media (max-width: 420px) { .mob-row .phone { max-width: 96px; } }

/* ── filter bar: scroll rather than wrap into three rows ── */
@media (max-width: 620px) {
  .filters {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 4px;
  }
  .filters::-webkit-scrollbar { display: none; }
  .filters button { flex: 0 0 auto; }
}

/* ── slider controls on small screens ── */
@media (max-width: 480px) {
  .slider-ui { gap: 8px; margin-top: 13px; }
  .slider-count { display: none; }          /* dots already convey position */
  .slider-cap { font-size: 13.5px; min-height: 4em; }
  .dots { gap: 6px; }
  .dots button { width: 8px; height: 8px; }
  .dots button[aria-current="true"] { width: 18px; }
}

/* ── device frames scale down ── */
@media (max-width: 560px) {
  .phone { max-width: 258px; border-radius: 28px; padding: 8px; }
  .phone-screen { border-radius: 21px; }
  .phone::before { width: 62px; top: 13px; }
  .browser { border-radius: 10px; }
  .browser-bar { padding: 7px 10px; }
  .browser-bar i { width: 7px; height: 7px; }
  .browser-bar span { height: 13px; }
}
@media (max-width: 380px) {
  .phone { max-width: 100%; }
}

/* ── showcase spacing + meta list ── */
@media (max-width: 760px) {
  .showcase { padding: 44px 0; }
  .show-meta h3 { font-size: 21px; }
  .show-meta .role { font-size: 15px; }
}
@media (max-width: 430px) {
  .show-meta .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .show-meta .kv dt { padding-top: 10px; }
  .show-links { gap: 8px; }
  .chip { padding: 9px 14px; font-size: 13.5px; }
}

/* ── entries / notes on very small screens ── */
@media (max-width: 480px) {
  .entry { padding-bottom: 26px; margin-bottom: 26px; }
  .entry h3 { font-size: 19px; }
  .entry .sub { font-size: 15px; }
  .wbody { padding: 15px 16px 17px; }
}

/* ── logo specimen page ── */
@media (max-width: 620px) {
  .specimens { grid-template-columns: 1fr 1fr; }
  .spec { padding: 20px 12px; }
  .spec:nth-child(2n) { border-right: 0; }
}
@media (max-width: 380px) { .specimens { grid-template-columns: 1fr; }
  .spec { border-right: 0; } }

/* ── belt and braces: no fixed-width child may exceed the viewport ── */
.wrap > *, .show-grid > *, .body-grid > * { min-width: 0; }
table { max-width: 100%; }

/* ── FIX: pass-1's 1024px rule re-declared .body-grid as two columns, and
   being later in the file it beat the original 940px collapse. At 320px that
   squeezed the main column to nothing and stacked the heading letter by
   letter. Re-assert the collapse here, after both. ── */
@media (max-width: 940px) {
  .body-grid { grid-template-columns: 1fr; gap: 36px; padding: 44px 0 16px; }
  .side-block + .side-block { margin-top: 32px; }
}

/* two hero buttons side by side is too tight under ~400px */
@media (max-width: 400px) {
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
}