/* Evan Mickens — portfolio
   Plain CSS, mobile first. Structure and feel follow the CallumHayes Framer template.

   System
   - Type: six sizes (sm, base, md, lg, xl, 2xl), two weights (400 text, 500 UI/titles).
     Every line-height is a multiple of 4px.
   - Space: a 4pt scale (--s-*). All fixed padding, margins, gaps, heights and radii
     use it. Only the page gutter is fluid.
   - Color: white paper, off-white page, near-black text, one grey, dark band, dark footer. */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/manrope.woff2") format("woff2");
}

:root {
  /* color */
  --paper: #ffffff;
  --page: #f2f2f0;
  --text: #2b2b2b;
  --muted: #5c5c5c;
  --nav: #4a4a45;
  --line: #e3e3e0;
  --band: #474747;
  --ink: #2c2c2c;
  --accent: #1f4fd1;
  /* space (4pt) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-14: 56px; --s-16: 64px;
  --s-20: 80px; --s-22: 88px; --s-24: 96px; --s-28: 112px;
  --r: 12px; --r-lg: 40px;
  --gutter: var(--s-5);
  --col: 1600px;
  --measure: 720px;
  /* type: mobile */
  --fs-sm: 14px; --lh-sm: 20px;
  --fs-base: 16px; --lh-base: 24px;
  --fs-md: 20px; --lh-md: 28px;
  --fs-lg: 24px; --lh-lg: 32px;
  --fs-xl: 32px; --lh-xl: 40px;
  --fs-2xl: 36px; --lh-2xl: 44px;
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (min-width: 720px) {
  :root {
    --gutter: clamp(48px, 7.4vw, 120px);
    --fs-base: 18px; --lh-base: 28px;
    --fs-md: 24px; --lh-md: 32px;
    --fs-lg: 32px; --lh-lg: 40px;
    --fs-xl: 44px; --lh-xl: 52px;
    --fs-2xl: 56px; --lh-2xl: 64px;
  }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
/* Elastic overscroll stays on. The root background is what browsers paint in the
   bounce area, so it is fixed to the viewport: white at the top (matches the header),
   footer-dark at the bottom (matches the footer). */
html { -webkit-text-size-adjust: 100%; background: linear-gradient(to bottom, var(--paper) 50%, var(--ink) 50%) fixed; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--page); color: var(--text); font-family: var(--font); font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 400; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: var(--s-1); }
.skip { position: absolute; left: var(--s-4); top: -60px; background: var(--text); color: #fff; padding: var(--s-2) var(--s-3); border-radius: var(--s-2); z-index: 10; }
.skip:focus { top: var(--s-4); }

/* Type */
h1, h2, h3 { margin: 0; font-weight: 400; letter-spacing: -0.02em; }
h1 { font-size: var(--fs-2xl); line-height: var(--lh-2xl); }
h2 { font-size: var(--fs-xl); line-height: var(--lh-xl); }
h3, .h3 { font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: 500; letter-spacing: -0.01em; }
p { margin: 0; }
p + p { margin-top: var(--s-4); }
.lede { font-size: var(--fs-md); line-height: var(--lh-md); color: var(--muted); max-width: 900px; margin-top: var(--s-6); }
.small { font-size: var(--fs-sm); line-height: var(--lh-sm); }
.muted { color: var(--muted); }

/* Layout */
.wrap { width: 100%; max-width: var(--col); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--s-12) 0; }
.paper { background: var(--paper); border-radius: 0 0 var(--s-6) var(--s-6); }
.paper .section:first-child { padding-top: var(--s-12); }
@media (min-width: 720px) {
  .section { padding: var(--s-16) 0; }
  .paper { border-radius: 0 0 var(--r-lg) var(--r-lg); }
}

/* Header: sticky, white at rest, translucent once scrolled (class set by a small script) */
.site-header { position: sticky; top: 0; z-index: 5; background: var(--paper); border-bottom: 1px solid var(--line); transition: background-color .2s ease, transform .3s ease; }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 100vh; background: inherit; pointer-events: none; }
.site-header.is-scrolled { background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); border-bottom-color: rgba(0,0,0,.06); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); height: var(--s-20); }
.brand { color: var(--text); font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 500; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.site-nav { display: flex; align-items: center; gap: var(--s-4); }
.site-nav a { color: var(--nav); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.site-nav a:hover { text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--text); }
.site-nav .btn { color: var(--text); transition: color .15s ease, border-color .15s ease, background-color .15s ease; }
/* Contact button: light border at rest, fills near-black with white text on hover. */
.site-nav .btn:hover { color: #fff; background: var(--ink); border-color: var(--ink); }
/* Name and text links fade lighter on hover. */
.brand, .site-nav a:not(.btn) { transition: color .15s ease; }
.brand:hover, .site-nav a:not(.btn):hover { color: #8e8e89; }
@media (min-width: 720px) {
  .site-header .wrap { height: var(--s-22); }
  .site-nav { gap: var(--s-8); }
}

/* Buttons + icon circles */
.btn { display: inline-flex; align-items: center; justify-content: center; height: var(--s-10); padding: 0 var(--s-4); border-radius: var(--r); font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: 500; border: 1px solid var(--line); background: var(--paper); color: var(--text); white-space: nowrap; }
.btn:hover { text-decoration: none; border-color: #bdbdb8; }
.btn-lg { height: var(--s-12); padding: 0 var(--s-6); font-size: var(--fs-base); line-height: var(--lh-base); }
.circles { display: flex; flex-wrap: wrap; gap: var(--s-3); padding: 0; margin: 0; list-style: none; }
.circles a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--text); }
.circles a:hover { border-color: #bdbdb8; text-decoration: none; }
.circles svg { width: var(--s-4); height: var(--s-4); fill: currentColor; }
.circles a.todo { border-style: dashed; }

/* Hero: one centered statement and a pill, in a short band pinned to the viewport
   so the carousel sits mostly on screen at landing. */
.portrait, .ph.portrait { width: var(--s-24); height: var(--s-24); border-radius: 50%; object-fit: cover; }
.hero { padding: var(--s-12) 0 var(--s-10); }
.hero-stmt { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: clamp(280px, calc(100vh - 460px), 420px); }
.hero h1 { max-width: 880px; font-size: var(--fs-xl); line-height: var(--lh-xl); }
.hero h1 strong { font-weight: 600; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: var(--s-3); margin-top: var(--s-10); }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3); height: 56px; padding: 0 var(--s-8) 0 var(--s-10); border-radius: 999px; background: #ededeb; color: var(--text); font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: 500; transition: background-color .15s ease; }
.pill:hover { background: #f6f6f4; text-decoration: none; }
.pill svg { width: var(--s-4); height: var(--s-4); }
/* Load sequence: statement rises in, then the button, then the carousel fades in and
   starts moving about 0.85s after it appears. */
@media (prefers-reduced-motion: no-preference) {
  .hero h1 { animation: rise .5s cubic-bezier(.2,.7,.2,1) .05s both; }
  .hero-actions { animation: rise .4s cubic-bezier(.2,.7,.2,1) .4s both; }
  .marquee { animation: fade .5s ease .75s both; }
  .marquee .strip { animation-delay: 1.6s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 720px) {
  .hero h1 { font-size: 44px; line-height: 60px; }
}

/* Subpage load: the same rise as the landing page, shorter and with a tighter stagger
   (about 0.65s in total versus 1.25s on the landing page). */
@media (prefers-reduced-motion: no-preference) {
  .case-head .narrow > *, #about-h, .about-grid > * { animation: rise-sm .35s cubic-bezier(.2,.7,.2,1) both; }
  .case-head .narrow > :nth-child(2) { animation-delay: .06s; }
  .case-head .narrow > :nth-child(3) { animation-delay: .12s; }
  .case-head .narrow > :nth-child(4) { animation-delay: .18s; }
  .case-head .narrow > :nth-child(5) { animation-delay: .24s; }
  .case-head .narrow > :nth-child(6) { animation-delay: .30s; }
  .about-grid > :nth-child(1) { animation-delay: .08s; }
  .about-grid > :nth-child(2) { animation-delay: .16s; }
  .case-body, .about-more { animation: fade .35s ease .3s both; }
}
@keyframes rise-sm { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Placeholders — never ship to production */
.ph { display: grid; place-items: center; background: #f4f4f2; border: 2px dashed #c4c4bf; border-radius: var(--r); color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: 500; text-align: center; padding: var(--s-3); width: 100%; }
.ph.portrait { padding: var(--s-1); }
.r-4x3 { aspect-ratio: 4 / 3; }
.r-21x9 { aspect-ratio: 21 / 9; }
.r-16x10 { aspect-ratio: 16 / 10; }
.r-3x4 { aspect-ratio: 3 / 4; }
.r-1x1 { aspect-ratio: 1 / 1; }
.r-16x9 { aspect-ratio: 16 / 9; }
.r-10x7 { aspect-ratio: 10 / 7; }
.todo { background: #fff3a8; color: #3d3400; padding: 0 3px; border-radius: 3px; }

/* Image strip: a marquee clipped to the content column. Two identical lists scroll
   left forever (the second is aria-hidden); hover slows it via the script. */
.strip-section { padding: 0 0 var(--s-12); }
.marquee { display: flex; gap: var(--s-4); overflow: hidden; border-radius: var(--r); }
.strip { display: flex; gap: var(--s-4); flex: 0 0 auto; margin: 0; padding: 0; list-style: none; animation: marquee 34s linear infinite; }
.strip li { flex: 0 0 min(78vw, 340px); }
.strip img, .strip .ph { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; border-radius: var(--r); }
/* Each screenshot is a button: hover zooms the image inside its frame, the same as the
   project cards below; a click opens the lightbox. */
.shot { display: block; width: 100%; padding: 0; border: 0; background: none; border-radius: var(--r); overflow: hidden; cursor: zoom-in; }
.shot img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) { .shot:hover img { transform: scale(1.05); } }
.shot:focus-visible { outline-offset: -3px; }

/* Lightbox for strip screenshots */
.lightbox { padding: 0; border: 0; background: none; overflow: visible; max-width: none; max-height: none; cursor: zoom-out; }
.lightbox[open] { display: flex; flex-direction: column; align-items: center; gap: var(--s-5); }
.lightbox::backdrop { background: rgba(10,10,10,.82); }
.lightbox:focus { outline: none; }
.lightbox img { display: block; width: auto; height: auto; max-width: min(100vw - 112px, 1200px); max-height: calc(88vh - 76px); border-radius: var(--r); }
.lightbox-go { cursor: pointer; }
.lightbox-close { position: absolute; top: -42px; right: -42px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: #e6e6e6; cursor: pointer; transition: color .15s ease; }
.lightbox-close:hover { color: #8a8a8a; }
.lightbox-close svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] img { animation: pop .2s cubic-bezier(.2,.7,.2,1) both; }
  .lightbox[open]::backdrop { animation: fade .2s ease both; }
}
@keyframes pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
/* Carousel controls, shown only when the open shot belongs to a set */
.lightbox-count, .lightbox-caption { margin: 0; color: #d9d9d9; font-size: var(--fs-sm); line-height: var(--lh-sm); text-align: center; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: #e6e6e6; cursor: pointer; transition: color .15s ease; }
.lightbox-nav:hover { color: #8a8a8a; }
.lightbox-prev { left: -52px; }
.lightbox-next { right: -52px; }
.lightbox-nav svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lightbox:not(.has-set) .lightbox-nav, .lightbox:not(.has-set) .lightbox-count { display: none; }

/* Side-by-side comparison (Lytra, Designing it): two labelled columns, e.g. mockups vs launch */
.side-by-side { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.side-by-side figcaption { grid-column: 1 / -1; }
.side-by-side img { display: block; width: 100%; border-radius: var(--r); }
.side-label { margin: 0 0 var(--s-2); color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-sm); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(calc(-100% - var(--s-4))); } }
@media (min-width: 720px) { .strip-section { padding: 0 0 var(--s-16); } }
@media (prefers-reduced-motion: reduce) {
  .strip { animation: none; }
  .marquee { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .marquee::-webkit-scrollbar { display: none; }
  .strip li { scroll-snap-align: start; }
  .strip[aria-hidden="true"] { display: none; }
}

/* Photo row: a hand-scrolled strip of mixed-ratio images (About page), fixed height */
.row { display: flex; gap: var(--s-4); margin: var(--s-12) 0 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
/* Chevrons at either end of a photo row, shown only while that side has more to scroll */
.row-scroller { position: relative; margin: var(--s-12) 0 0; }
.row-scroller > .row { margin-top: 0; }
.row-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--text); cursor: pointer; box-shadow: 0 1px 6px rgba(0,0,0,.18); opacity: 0; pointer-events: none; transition: opacity .15s ease, color .15s ease; }
.row-nav.is-on { opacity: 1; pointer-events: auto; }
.row-nav:hover { color: var(--muted); }
.row-nav svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.row-prev { left: var(--s-2); }
.row-next { right: var(--s-2); }
.row-prev svg { transform: translateX(-1px); }  /* optical centering: nudge each chevron toward its edge */
.row-next svg { transform: translateX(1px); }
.row::-webkit-scrollbar { display: none; }
.row li { flex: 0 0 auto; height: 240px; scroll-snap-align: start; }
.row li > * { height: 100%; width: auto; }
.row img { height: 100%; width: auto; object-fit: cover; border-radius: var(--r); }
.row .shot, .row .shot img { width: 100%; }  /* fill the slot's ratio; the lightbox shows the whole photo */
@media (min-width: 720px) { .row, .row-scroller { margin-top: var(--s-16); } .row-scroller > .row { margin-top: 0; } .row li { height: 400px; } }

/* Figures */
figure { margin: 0; }
figure img { border-radius: var(--r); width: 100%; }
figcaption { color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-sm); margin-top: var(--s-2); }

/* Project cards: image, title, description, link revealed on hover */
.cards { display: grid; gap: var(--s-12); margin-top: var(--s-6); }
.card-media { overflow: hidden; border-radius: var(--r); margin-bottom: var(--s-6); }
.card img, .card .ph { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; border-radius: var(--r); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.card:hover img, .card:hover .ph, .card:focus-within img { transform: scale(1.05); }
.card h3 { margin-bottom: var(--s-2); }
/* The title link stretches over the whole card, so a click anywhere opens the project. */
.card { position: relative; }
.card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); }
.card h3 a:hover { text-decoration: none; }
.card p { color: var(--muted); text-wrap: pretty; }
.more { display: inline-block; margin-top: var(--s-4); font-weight: 500; color: var(--text); opacity: 0; transform: translateY(4px); transition: opacity .3s ease, transform .3s ease; }
.more:hover { text-decoration: none; }
.card:hover .more, .card:focus-within .more, .more:focus-visible { opacity: 1; transform: none; }
@media (hover: none) { .more { opacity: 1; transform: none; } }
@media (min-width: 720px) { .cards { grid-template-columns: 1fr 1fr; gap: var(--s-10); margin-top: var(--s-8); } }

/* Two-column text */
.two-col { display: grid; gap: var(--s-8); margin-top: var(--s-6); }
.two-col p { color: var(--muted); margin-top: 0; }
@media (min-width: 720px) {
  .two-col { grid-template-columns: 1fr 1fr; gap: var(--s-16); }
}

/* CTA band: dark, full bleed */
.cta { background: #222; color: #fff; padding: var(--s-12) 0 var(--s-8); }
.cta h2 { margin-bottom: var(--s-3); }
.cta p { color: #d9d9d9; max-width: 640px; margin-bottom: var(--s-8); }
.cta .btn { background: #fff; border-color: #fff; color: var(--ink); transition: background-color .15s ease; }
.cta .btn:hover { background: #e6e6e3; border-color: #e6e6e3; }
.cta .email { display: inline-block; margin-left: var(--s-4); color: #d9d9d9; }
.cta .email:hover { color: #fff; }
@media (min-width: 720px) { .cta { padding: var(--s-20) 0 var(--s-12); } }

/* Testimonials (hidden until there is a quote) */
.quotes { display: grid; gap: var(--s-8); margin-top: var(--s-12); }
@media (min-width: 720px) { .quotes { margin-top: var(--s-16); } }
.quote { background: var(--paper); border-radius: var(--r); padding: var(--s-6); }
.quote blockquote { margin: 0 0 var(--s-3); font-size: var(--fs-md); line-height: var(--lh-md); }
.quote cite { font-style: normal; color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-sm); }

/* Footer: dark */
.site-footer { background: #222; color: #b9b9b9; padding: 0 0 var(--s-6); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5) var(--s-8); padding-top: var(--s-8); border-top: 1px solid rgba(255,255,255,.14); }
.foot-right { display: flex; align-items: center; gap: var(--s-6); }
.foot-left { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-8); }
.foot-left .brand { color: #fff; }
.site-footer ul { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin: 0; padding: 0; list-style: none; }
.site-footer ul a { color: #b9b9b9; }
.site-footer ul a:hover { color: #fff; }
.site-footer .circles a { background: transparent; border-color: rgba(255,255,255,.45); color: #fff; }
.site-footer .circles a:hover { border-color: #fff; }
.copy { margin: 0; }
@media (min-width: 720px) { .site-footer { padding: 0 0 var(--s-8); } }

/* Case study: an 800px centered column like the template's project page.
   Text is indented inside the column; images run the column's full width. */
.narrow { max-width: 800px; margin: 0 auto; }
.case-head h1 { font-size: var(--fs-xl); line-height: var(--lh-xl); }
/* App name above a case study headline: icon and name, like an App Store listing */
.app-id { display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-6); color: var(--text); font-size: var(--fs-md); line-height: var(--lh-md); font-weight: 500; }
.app-id img { width: 56px; height: 56px; }
.app-id a { display: inline-flex; align-items: center; gap: var(--s-3); color: inherit; }
.app-id a:hover { text-decoration: none; }
/* Arrow after the name fades in and nudges up-right on hover; always shown on touch screens. */
.app-id .go { width: var(--s-5); height: var(--s-5); margin-left: calc(-1 * var(--s-1)); opacity: 0; transform: translate(-4px, 4px); transition: opacity .2s ease, transform .2s ease; }
.app-id a:hover .go, .app-id a:focus-visible .go { opacity: 1; transform: none; }
@media (hover: none) { .app-id .go { opacity: 1; transform: none; } }
.case-head .lede { color: var(--text); margin-top: var(--s-6); font-size: var(--fs-md); line-height: var(--lh-md); }
.case-body { padding-top: 0; }
.tldr { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin: var(--s-8) 0; padding: 0; list-style: none; }
.tldr li { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-4); }
.tldr b { display: block; color: var(--text); font-weight: 500; font-size: var(--fs-sm); line-height: var(--lh-sm); margin-bottom: var(--s-1); }
@media (min-width: 720px) { .tldr { grid-template-columns: repeat(3, 1fr); } }
.case-hero img, .case-hero .ph { aspect-ratio: 10 / 7; width: 100%; object-fit: cover; border-radius: var(--r); }
.prose a:not(.btn) { text-decoration: underline; }
/* Case study section list: a sticky column in the empty space left of the text,
   from 1280px up, with the section being read marked. Hidden on smaller screens. */
.toc { display: none; }
@media (min-width: 1280px) {
  .case-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 800px) minmax(0, 1fr); column-gap: var(--s-8); }
  .case-grid > .narrow { grid-column: 2; grid-row: 1; width: 100%; }
  .toc { display: block; grid-column: 1; grid-row: 1; justify-self: end; align-self: start; position: sticky; top: var(--s-24); width: 180px; font-size: var(--fs-sm); line-height: var(--lh-sm); }
}
.toc p { color: var(--text); font-weight: 500; margin: 0 0 var(--s-3); }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.toc a { display: block; margin-left: -1px; padding: var(--s-1) 0 var(--s-1) var(--s-3); border-left: 1px solid transparent; color: var(--muted); transition: color .15s ease, border-color .15s ease; }
.toc a:hover { color: var(--text); text-decoration: none; }
.toc a[aria-current] { color: var(--text); border-left-color: var(--text); }
.prose h2[id] { scroll-margin-top: var(--s-24); }
@media (min-width: 720px) { .prose > :not(figure):not(.gallery) { margin-left: var(--s-12); margin-right: var(--s-12); } }
.prose h2 { font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: 500; letter-spacing: -0.01em; margin: var(--s-12) 0 var(--s-4); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--muted); }
.prose li strong { color: var(--text); font-weight: 500; }
.prose li em { font-style: normal; color: var(--text); }
.prose ul, .prose ol { padding-left: var(--s-5); }
.prose li + li { margin-top: var(--s-2); }
.prose p + p { margin-top: var(--s-4); }
.prose figure, .prose .gallery, .prose .compare { margin: var(--s-8) 0; }
.gallery { display: grid; gap: var(--s-4); }
.gallery .ph, .gallery img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; border-radius: var(--r); }
.prose .gallery figure { margin: 0; }
@media (min-width: 560px) { .gallery { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }
.compare { display: grid; gap: var(--s-4); }
.compare > div { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-5); }
.compare .tag { display: inline-block; font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: 500; padding: var(--s-1) var(--s-3); border-radius: 999px; margin-bottom: var(--s-3); }
.tag-no { background: #ebebe8; color: #555; }
.tag-yes { background: #e2f3e8; color: #1b5e34; }
.compare h3 { font-size: var(--fs-base); line-height: var(--lh-base); margin-bottom: var(--s-2); }
.compare p { color: var(--muted); }
@media (min-width: 560px) { .compare { grid-template-columns: 1fr 1fr; } }

/* Slider: horizontal scroll-snap track, dot indicators, caption that follows the slide */
.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--r); }
.slides::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: start; }
.slide img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r); }
.slider-foot { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); margin-top: var(--s-3); }
.dots { display: flex; gap: var(--s-1); }
.dot { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.dot::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: #c9c9c4; transition: width .2s ease, background-color .2s ease; }
.dot[aria-current="true"]::before { width: 20px; background: var(--text); }
.dot:hover::before { background: #9a9a95; }
.dot[aria-current="true"]:hover::before { background: var(--text); }
.slider figcaption { margin-top: 0; text-align: center; min-height: var(--lh-sm); }

/* Other projects: thumbnail + title + description rows */
.others { display: grid; gap: var(--s-8); margin: var(--s-12) 0 0; padding: 0; list-style: none; }
.other { display: grid; gap: var(--s-6); color: inherit; }
.other:hover { text-decoration: none; }
.other:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.other-thumb { overflow: hidden; border-radius: var(--r); }
/* 4:3 to match the framed screenshots, so the whole window or phone shows uncropped. */
.other-thumb img, .other-thumb .ph { aspect-ratio: 4 / 3; width: 100%; height: auto; object-fit: cover; border-radius: var(--r); }
.other-thumb img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) { .other:hover .other-thumb img, .other:focus-visible .other-thumb img { transform: scale(1.05); } }
.other h3 { margin-bottom: var(--s-2); }
.other p { color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-sm); }
@media (min-width: 720px) { .other { grid-template-columns: 240px 1fr; align-items: start; } .other p { font-size: var(--fs-base); line-height: var(--lh-base); } }

/* About */
.about-grid { display: grid; gap: var(--s-8); margin-top: var(--s-12); align-items: start; }
.about-grid img, .about-grid .ph { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; border-radius: var(--r); }
.about-grid .lead { font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: 500; letter-spacing: -0.01em; color: var(--text); margin-bottom: var(--s-5); }
.about-grid p { color: var(--muted); }
@media (min-width: 900px) { .about-grid { grid-template-columns: 1fr 1fr; gap: var(--s-16); margin-top: var(--s-16); } }
/* About intro: the gaps above and below the title shrink with the viewport so the title, photo
   and text all fit in the first screen. Photo height follows from the column width (4:3, half
   the column); whatever height is left after the header, title and photo is split between the
   two gaps, between 16px and 64px, after keeping 40px clear below the photo. */
@media (min-width: 900px) {
  .about-intro {
    --about-photo-h: calc((min(100vw, var(--col)) - 2 * var(--gutter) - var(--s-16)) * 3 / 8);
    --about-bottom: var(--s-10);  /* breathing room kept below the photo */
    --about-gap: clamp(var(--s-4), calc((100vh - var(--s-22) - 1px - var(--lh-2xl) - var(--about-photo-h) - var(--about-bottom)) / 2), var(--s-16));
  }
  .paper .section.about-intro { padding-top: var(--about-gap); }
  .about-intro .about-grid { margin-top: var(--about-gap); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print { .site-header, .cta, .site-footer, .next { display: none; } body { background: #fff; } }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}