/* App screenshots are rounded the way the App Store shows them: corners about 6% of the shot's width. The vertical
   radius is the same length as a share of the height (520x1130 shots), so the corners are true circles at any size. */
:root { --app-shot-r: 6% / 2.76%; }
/* Apps page case studies (meridian-ads-51, Evan 2026-10-01): a short preview per app,
   full details in the shared project window (js/project-window.js). Light section. */
.aw { background: #fff; color: #000; }
/* One app per section: the section's own padding is dropped so the two read as one list, no empty bands. */
section.section.aw { padding-block: 0; }
#guac.aw { padding-top: clamp(16px, 3vw, 40px); }
.aw .aw-kicker { color: #6e6e73; font-size: 14px; line-height: 1.4; margin: 0 0 14px; }
.aw .aw-name { color: #000; font-size: clamp(48px, 6vw, 88px); line-height: .95; letter-spacing: -.035em; font-weight: 500; margin: 0 0 16px; }
.aw .aw-tag { color: #000; font-size: clamp(20px, 2vw, 26px); line-height: 1.25; margin: 0 0 36px; max-width: 22ch; }
.aw-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0 0 36px; }
.aw-meta div { border-top: 1px solid #000; padding-top: 12px; }
.aw-meta dt { color: #6e6e73; font-size: 13px; line-height: 1.4; margin-bottom: 4px; font-weight: 400; }
.aw-meta dd { margin: 0; font-size: 15px; line-height: 1.35; color: #000; }
.aw-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.aw-pill { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px 0 20px; border-radius: 30px; border: 1px solid #000; font: inherit; font-size: 15px; font-weight: 500; line-height: 1; cursor: pointer; text-decoration: none; }
.aw-pill.is-solid { background: #000; color: #fff; }
.aw-pill.is-line { background: transparent; color: #000; padding-right: 20px; }
.aw-arr { width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; transition: transform .5s cubic-bezier(.7, 0, .3, 1); }
.aw-arr svg { width: 12px; height: 12px; }
.aw-pill:hover .aw-arr, .aw-pill:focus-visible .aw-arr { transform: rotate(-45deg); }

/* The View project window styles now live in css/project-window.css (shared with Websites). */
@media (max-width: 820px) {
  .aw-meta { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .aw-arr { transition: none; } }

/* "Apps we've built" bridge (Evan picked split words, 2026-10-01): the two halves of the heading slide in
   from the sides as you scroll, a Guac and a Daily Dose screen tilt into the gap. Echoes the hero's split line. */
section.ahc, #work, #guac, #daily-dose { box-shadow: none !important; }
#work.aw-split-sec { padding-top: clamp(120px, 16vw, 240px) !important; padding-bottom: clamp(24px, 4vw, 64px) !important; overflow: hidden; background: #fff; }
.aw-sw-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.aw-sw-h { font-size: clamp(56px, 9vw, 152px); font-weight: 500; line-height: .9; letter-spacing: -.045em; color: #000; margin: 0; white-space: nowrap; will-change: transform; }
.aw-sw-mid { display: flex; gap: 12px; flex: none; }
.aw-sw-mid img { width: clamp(64px, 7vw, 110px); height: auto; border: 1px solid #e3e3e3; border-radius: var(--app-shot-r); display: block; will-change: transform; }
.aw-sw-sub { color: #6e6e73; font-size: 15px; text-align: center; margin: 40px 0 0; }
@media (max-width: 767px) {
  .aw-sw-row { flex-direction: column; align-items: flex-start; }
  .aw-sw-h { white-space: normal; }
  .aw-sw-mid { order: 3; }
  .aw-sw-sub { text-align: left; }
}
.aw-sw-r-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Spotlight panels (Evan picked B, 2026-10-04): each app gets a rounded panel in its own colour, text left, three
   store-style posters stacked right. The front poster rotates every few seconds; hovering fans them out. Daily Dose
   has no store art, so its posters are built here: a headline over the real screen in a phone frame. */
.aw-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 40px; margin-block: clamp(24px, 3vw, 40px); padding: clamp(36px, 5vw, 72px); border-radius: 36px; overflow: hidden; }
.aw-panel .aw-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; }
.aw-guac { background: #3f9be8; }
.aw-guac .aw-kicker, .aw-guac .aw-meta dt { color: rgba(255, 255, 255, .78); }
.aw-guac .aw-name, .aw-guac .aw-tag, .aw-guac .aw-meta dd { color: #fff; }
.aw-guac .aw-meta div { border-color: rgba(255, 255, 255, .6); }
.aw-guac .aw-pill.is-solid { background: #fff; color: #000; border-color: #fff; }
.aw-guac .aw-pill.is-solid .aw-arr { background: #000; color: #fff; }
.aw-store { display: inline-flex; border-radius: 8px; }
.aw-store img { display: block; height: 44px; width: auto; }
.aw-store:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.aw-dd { background: #ffcc00; }
.aw-dd .aw-kicker, .aw-dd .aw-meta dt, .aw-dd .aw-name, .aw-dd .aw-tag, .aw-dd .aw-meta dd { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .14), 0 2px 14px rgba(0, 0, 0, .16); }
.aw-dd .aw-meta div { border-color: #fff; }
.aw-dd .aw-pill.is-solid { background: #fff; color: #000; border-color: #fff; }
.aw-dd .aw-pill.is-solid .aw-arr { background: #000; color: #fff; }
.aw-stack { position: relative; height: clamp(420px, 40vw, 560px); }
.aw-post { position: absolute; top: 0; left: 50%; height: 100%; aspect-ratio: 520 / 1130; margin: 0; border-radius: 26px; overflow: hidden; background: #f2f2f4; box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .35);
  transform: translateX(-50%) translateX(var(--x, 0)) rotate(var(--r, 0)) scale(var(--s, .86)); transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.aw-post > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.aw-post.front { --x: 0px; --r: 0deg; --s: 1; z-index: 3; }
.aw-post.l { --x: -38%; --r: -7deg; z-index: 2; }
.aw-post.rt { --x: 38%; --r: 7deg; z-index: 1; }
.aw-post.l, .aw-post.rt { cursor: pointer; }
.aw-stack:hover .aw-post.l { --x: -64%; --r: -10deg; }
.aw-stack:hover .aw-post.rt { --x: 64%; --r: 10deg; }
.aw-post-dd { display: flex; flex-direction: column; align-items: center; padding-top: 9%; background: #fff; }
.aw-post-h { margin: 0 8% 7%; text-align: center; font-size: clamp(20px, 2.2vw, 34px); line-height: 1.02; letter-spacing: -.03em; font-weight: 500; color: #1d1d1f; }
.aw-post-ph { display: block; width: 78%; padding: 2.4% 2.4% 0; border-radius: 30px 30px 0 0; background: #111; overflow: hidden; }
.aw-post-ph img { display: block; width: 100%; border-radius: 24px 24px 0 0; }
@media (max-width: 991px) { .aw-panel { grid-template-columns: 1fr; } .aw-stack { height: 440px; } }
@media (prefers-reduced-motion: reduce) { .aw-post { transition: none; } }