/* Glass design: a full-screen sky photo, a giant title, and a floating frosted-glass menu.
   Everything below the first screen sits on frosted glass cards over the same photo.
   One stylesheet for every page; the class on <body> picks the photo. */
@font-face { font-family: "Inter Tight"; src: url(/fonts/inter-tight-latin.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --ink: #15223b;
  --steel: #46526a;
  --white: #ffffff;
  --glass: rgba(21, 34, 59, .4);    /* navy-tinted glass keeps white menu text readable on bright skies */
  --glass-edge: rgba(255, 255, 255, .42);
  --card: rgba(255, 255, 255, .62);
  --card-edge: rgba(255, 255, 255, .7);
  --accent: #4a3abd;
  --font: "Inter Tight", "Segoe UI", system-ui, sans-serif;
  --w: 1120px;
  --r: 28px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow: 0 10px 40px rgba(21, 34, 59, .16);
}
.bg-clouds { --fill: #b8acd1; --photo: url(/img/lavender-2880.webp); --photo-s: url(/img/lavender-phone.webp); --veil: rgba(40, 30, 90, .34); --veil-mid: rgba(40, 30, 90, .14); --name-shadow: 0 2px 34px rgba(21, 34, 59, .5), 0 1px 2px rgba(21, 34, 59, .7); --glass: rgba(21, 34, 59, .46); --accent: #4a3abd; }
/* The first clouds photo, kept as an alternate (files in /img/alt) */
.bg-clouds-old { --fill: #8b7a87; --photo: url(/img/alt/clouds-2400.webp); --photo-s: url(/img/alt/clouds-1280.webp); --veil: rgba(40, 30, 90, .28); --accent: #4a3abd; }
/* Saved alternates for the homepage (photos in /img/alt) */
.bg-gulf { --photo: url(/img/alt/gulf-2400.webp); --photo-s: url(/img/alt/gulf-1280.webp); --veil: rgba(30, 30, 70, .22); --accent: #b4521e; }
.bg-sunset { --photo: url(/img/alt/sunset-2400.webp); --photo-s: url(/img/alt/sunset-1280.webp); --veil: rgba(40, 40, 110, .3); --accent: #c43d6b; }
/* Project pages: lighter skies, so navy titles and a darker glass menu. --cut is the subject cut out of the
   same photo; it sits on top of the title (the 3D trick). --pos / --pos-s place the photo on desktop / phone,
   --top / --top-s / --bot-s move the title so the cut-out lands on the right letters. */
.bg-pipes { --photo: url(/img/pipes-2400.webp); --photo-s: url(/img/pipes-1280.webp); --cut: url(/img/pipes-cut-2400.webp); --cut-s: url(/img/pipes-cut-1280.webp); --pos: 0% 50%; --pos-s: 27.5% 50%; --nudge: 9vw; --veil: transparent; --glass: rgba(21, 34, 59, .5); --fill: #bcc3c5; --accent: #2f6f8f; }
.bg-cams { --photo: url(/img/cams-2400.webp); --photo-s: url(/img/cams-1280.webp); --cut: url(/img/cams-cut-2400.webp); --cut-s: url(/img/cams-cut-1280.webp); --pos: 50% 50%; --pos-s: 45% 50%; --top: 190px; --top-s: 110px; --bot-s: 484px; --nudge: 0px; --veil: transparent; --fill: #5f91a6; --accent: #3b6ea8; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fill, #8b7a87); color: var(--ink); font: 400 19px/1.6 var(--font); min-height: 100vh; }
/* The photo sits on its own fixed layer, so it stays put while the glass cards scroll over it */
/* Sized to the tallest screen height (lvh), so it never resizes, and looks like zooming, while Safari's
   address bar shrinks and grows during a scroll. will-change keeps it on its own layer for smooth scrolling. */
body::before, .cut { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; background: var(--photo) var(--pos, center) / cover no-repeat; animation: settle 2.6s var(--ease) both; pointer-events: none; will-change: transform; }
body::before { z-index: -2; }
body::after { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: -1; background: linear-gradient(180deg, var(--veil), var(--veil-mid, transparent) 30%, var(--veil-mid, transparent) 55%, var(--veil)); }
/* The cut-out comes after the hero in the page, so it paints over the title but under the cards */
.cut { background-image: var(--cut); }
@media (max-width: 900px) {
  body::before, .cut { background-image: var(--photo-s); background-position: var(--pos-s, center); }
  .cut { background-image: var(--cut-s); }
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; box-shadow: 0 0 0 6px var(--ink); }
.skip { position: absolute; left: 12px; top: -60px; background: var(--ink); color: var(--white); padding: 10px 14px; border-radius: 12px; z-index: 9; }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Floating glass menu: one rounded pill near the top of the screen */
.top { position: fixed; top: max(14px, env(safe-area-inset-top)); left: 0; right: 0; z-index: 5; padding: 0 16px; pointer-events: none; animation: drop 1s .3s var(--ease) both; }
.pill { pointer-events: auto; max-width: 820px; margin: 0 auto; display: flex; align-items: center; gap: .5rem; padding: 7px 7px 7px 18px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-edge); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 8px 32px rgba(21, 34, 59, .18), inset 0 1px 0 rgba(255, 255, 255, .5); color: var(--white); transition: background-color .3s; }
.scrolled .pill { background: rgba(21, 34, 59, .66); }
.mark { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; text-decoration: none; white-space: nowrap; min-height: 44px; }
.mark svg { width: 28px; height: 28px; flex: none; }
.pill ul { list-style: none; display: flex; gap: .1rem; margin: 0 auto; padding: 0; }
.pill ul a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .85rem; border-radius: 999px; text-decoration: none; font-size: .9rem; color: var(--white); transition: background-color .2s; }
.pill ul a:hover, .pill ul a[aria-current] { background: rgba(255, 255, 255, .18); }
.cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.2rem; border-radius: 999px; background: var(--white); color: var(--ink); font-weight: 600; font-size: .92rem; text-decoration: none; white-space: nowrap; box-shadow: 0 2px 10px rgba(21, 34, 59, .15); transition: transform .2s var(--ease); }
.cta:hover { transform: scale(1.04); }
/* Menu button and slide-in panel: phones only (see the 760px block below) */
.sheet, .menu-btn { display: none; }
.menu-btn { align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 0; border-radius: 999px; background: var(--white); color: var(--ink); font: 600 .95rem var(--font); cursor: pointer; }
.menu-btn svg { width: 18px; height: 18px; }
.menu-btn .x, .menu-open .menu-btn .bars { display: none; }
.menu-open .menu-btn .x { display: block; }

/* First screen: the photo, the giant name, a line on each side under it */
.hero { min-height: 100vh; min-height: 100svh; display: grid; place-content: center; padding: var(--top, 120px) max(20px, env(safe-area-inset-right)) 120px max(20px, env(safe-area-inset-left)); color: var(--white); text-align: center; position: relative; }
.hero h1 { margin: 0; font-weight: 700; font-size: clamp(3.4rem, 13vw, 11.5rem); line-height: .9; letter-spacing: -.045em; text-shadow: var(--name-shadow, 0 2px 30px rgba(21, 34, 59, .28)); }
.hero h1 span { display: inline-block; animation: rise 1.4s var(--ease) both; }
.hero h1 span + span { animation-delay: .15s; }
.sides { display: flex; justify-content: space-between; gap: 1rem 3rem; margin: 1.2rem 0 0; padding: 0 1.2%; font-weight: 500; font-size: clamp(1rem, 1.6vw, 1.2rem); text-shadow: 0 1px 12px rgba(21, 34, 59, .4); animation: fade 1.2s .7s both; }
.sides p { margin: 0; }
/* Homepage: the two white lines sit on small glass chips so they stay readable over bright clouds */
.hero:not(.dark) .sides p { padding: .3em .95em; border-radius: 999px; background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.down { position: absolute; left: 50%; bottom: max(28px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1.2rem; border-radius: 999px; color: var(--white); text-decoration: none; font-size: .95rem; background: var(--glass); border: 1px solid var(--glass-edge); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: fade 1s 1.2s both; }
.down svg { width: 16px; height: 16px; }
.sides, .down { position: relative; z-index: 1; }
.down { position: absolute; }
/* Project pages: navy title, nudged sideways so the cut-out lands on the right letters */
.hero.dark { color: var(--ink); }
.hero.dark h1, .hero.dark .sides { text-shadow: none; translate: var(--nudge, 0) 0; }
.hero.dark .sides { font-weight: 600; }
@media (min-width: 761px) {
  .bg-pipes .sides { padding-left: 5%; }
  .bg-cams .sides { margin-inline: -16vw; padding-left: 11vw; }
}

/* Everything below: frosted glass cards over the photo */
.cards { position: relative; z-index: 1; max-width: var(--w); margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-right)) 2rem max(16px, env(safe-area-inset-left)); display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
.card { background: var(--card); border: 1px solid var(--card-edge); border-radius: var(--r); padding: clamp(1.6rem, 4vw, 3rem); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); box-shadow: var(--shadow); scroll-margin-top: 100px; }
h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1; letter-spacing: -.035em; font-weight: 700; margin: 0 0 1rem; text-wrap: balance; }
h3 { font-size: 1.4rem; letter-spacing: -.02em; margin: 1.2rem 0 .3rem; }
.lead { font-size: 1.2rem; color: var(--steel); max-width: 32em; }
mark { background: none; color: var(--accent); }

.btn { display: inline-flex; align-items: center; min-height: 48px; font: 600 1rem var(--font); padding: 0 1.4em; background: var(--ink); color: var(--white); text-decoration: none; border: 0; border-radius: 999px; margin: .3em .5em .3em 0; cursor: pointer; transition: transform .2s var(--ease), background-color .2s; }
.btn:hover { transform: translateY(-2px); background: var(--accent); }
.btn.alt { background: rgba(255, 255, 255, .7); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn.alt:hover { background: var(--white); }
.more { font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.more:hover { color: var(--accent); }

.about { display: grid; gap: 2rem; }
.about .lead { color: var(--ink); font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.4; margin: 0; max-width: 24em; }
.exp { display: grid; gap: 1rem; margin: 0; }
.exp div { display: flex; flex-direction: column-reverse; background: rgba(255, 255, 255, .6); border-radius: 20px; padding: 1rem 1.2rem; }
.exp dd { margin: 0; font-weight: 700; font-size: 2.4rem; line-height: 1.1; letter-spacing: -.03em; color: var(--accent); }
.exp dt { color: var(--steel); }

.apps { display: grid; gap: 2rem; margin-top: 1.6rem; }
.app p { color: var(--steel); max-width: 26em; }
.badge { display: inline-block; margin-left: .3rem; padding: .2rem .65rem; border-radius: 999px; background: var(--accent); color: var(--white); font-size: .78rem; font-weight: 700; letter-spacing: 0; vertical-align: .25em; }
.about .end { margin: 1.2rem 0 0; }
.seek { margin: 1rem 0 0; padding: .9rem 1.1rem; border-radius: 18px; background: rgba(255, 255, 255, .6); font-weight: 600; max-width: 30em; }
.seek p { margin: 0; }
.seek .btn { margin: .8rem 0 0; }
.btn .sub { margin-left: .45em; font-size: .78em; font-weight: 600; opacity: .75; }
/* Hero chip: what Chris is looking for, with a green "available" dot */
.open { position: relative; z-index: 1; margin: 1.3rem 0 0; animation: fade 1.2s 1s both; }
.open a { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: 0 1.1rem; border-radius: 999px; background: var(--white); color: var(--ink); font-weight: 600; font-size: .98rem; text-decoration: none; box-shadow: 0 6px 20px rgba(21, 34, 59, .2); }
.open a::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #1fae5b; box-shadow: 0 0 0 4px rgba(31, 174, 91, .2); }
.shot { background: linear-gradient(160deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .35)); border-radius: 22px; height: 340px; overflow: hidden; display: flex; justify-content: center; align-items: flex-start; padding-top: 2rem; }
.shot img { width: 210px; border-radius: 22px 22px 0 0; box-shadow: 0 10px 30px rgba(21, 34, 59, .25); }

.list { width: 100%; border-collapse: collapse; margin: 1.4rem 0 0; font-size: 1.02rem; }
.list th, .list td { text-align: left; vertical-align: top; padding: .7rem .8rem .7rem 0; border-bottom: 1px solid rgba(21, 34, 59, .15); }
.list thead th { font-size: .9rem; font-weight: 400; color: var(--steel); }
.list td { color: var(--steel); }
.photos { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; }
.photos figure { margin: 0; }
.photos img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; }
.photos figcaption { font-size: .95rem; color: var(--steel); padding: .5rem .2rem 0; }
.why { font-size: clamp(1.25rem, 2.4vw, 1.7rem); font-weight: 600; line-height: 1.35; letter-spacing: -.01em; max-width: 30em; margin: 2.5rem 0 1.2rem; }

/* Parts: the eBay logo as a link, recent listings as photo tiles with a For sale / Sold tag */
.parts-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.parts-head .lead { margin: 0; }
.ebay { display: inline-flex; padding: .8rem 1.2rem; border-radius: 20px; background: var(--white); box-shadow: var(--shadow); transition: transform .2s var(--ease); }
.ebay:hover { transform: translateY(-3px) rotate(-1.5deg); }
.ebay svg { display: block; width: 130px; height: auto; }
.listings { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.listings a { position: relative; display: block; border-radius: 22px; overflow: hidden; background: var(--white); color: var(--ink); text-decoration: none; box-shadow: 0 6px 20px rgba(21, 34, 59, .14); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.listings a:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(21, 34, 59, .22); }
.listings img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .5s var(--ease); }
.listings a:hover img { transform: scale(1.05); }
.tag { position: absolute; top: .8rem; left: .8rem; padding: .3rem .8rem; border-radius: 999px; font-size: .82rem; font-weight: 700; color: var(--white); background: rgba(21, 34, 59, .82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.tag.sale { background: #1d6b3a; }
.listings .name { display: block; padding: .8rem 1rem .9rem; font-weight: 600; }
.parts .end { margin-top: 1.4rem; }
.parts .end .note { margin: 0; }

.contact { display: grid; gap: 2rem; }
.note { font-size: .95rem; color: var(--steel); }
.form { display: grid; gap: 1.1rem; }
.form fieldset { border: 0; padding: 0; margin: 0; }
.form legend { font-weight: 600; margin-bottom: .4rem; }
.radios { display: flex; flex-wrap: wrap; gap: .5rem; }
.radios label { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 1rem; border-radius: 999px; background: rgba(255, 255, 255, .6); cursor: pointer; }
.radios label:has(:checked) { background: var(--ink); color: var(--white); }
.radios input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; }
.f { display: block; font-weight: 600; }
.form input:not([type=radio]), .form textarea { display: block; width: 100%; margin-top: .3rem; font: inherit; font-weight: 400; color: inherit; background: rgba(255, 255, 255, .78); border: 1px solid rgba(21, 34, 59, .25); border-radius: 16px; padding: .7rem .9rem; }
.form textarea { resize: vertical; }
.form .btn { justify-self: start; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hint { margin: -.4rem 0 0; font-size: .95rem; color: var(--steel); }
.send { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.2rem; }
.send .note { margin: 0; }
.note.ok { color: #1d6b3a; font-weight: 600; }
.alt { margin: 1.2rem 0 0; color: var(--steel); }
.alt span { color: var(--ink); font-weight: 600; }
.copy { margin-left: .6rem; min-height: 36px; padding: 0 .9rem; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .75); box-shadow: inset 0 0 0 1px rgba(21, 34, 59, .3); font: 600 .9rem var(--font); color: var(--ink); cursor: pointer; }
.copy:hover { background: var(--white); }

/* Project pages: the app screen with its three big points, then the story in cards */
.app-card { display: grid; gap: 2rem; align-items: center; }
.app-card .shot { height: auto; padding: 2rem 1rem 0; }
.app-card .shot img { width: min(260px, 70%); }
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.points li { font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 2.4rem); letter-spacing: -.03em; line-height: 1.1; }
.points li::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .4em; border-radius: 50%; background: var(--accent); vertical-align: .1em; }
.facts { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.facts li { padding: .45rem 1rem; border-radius: 999px; background: rgba(255, 255, 255, .7); font-size: .95rem; }
.text { max-width: 40em; }
.text p { color: var(--steel); }
.text p strong { color: var(--ink); }
.built { display: grid; gap: 2rem; margin-top: 1rem; }
.screens { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.screens figure { margin: 0; }
.screens img { border-radius: 20px; box-shadow: 0 8px 24px rgba(21, 34, 59, .2); }
.screens figcaption { font-size: .95rem; color: var(--steel); padding-top: .5rem; }
.screens.one { grid-template-columns: 1fr; max-width: 260px; justify-self: center; }
.hood { margin-top: 2.5rem; }
.hood caption { text-align: left; font-weight: 700; font-size: 1.4rem; letter-spacing: -.02em; padding-bottom: .4rem; }
.steps { list-style: none; counter-reset: s; margin: 1.4rem 0; padding: 0; display: grid; gap: .6rem; }
.steps li { counter-increment: s; position: relative; padding: .9rem 1rem .9rem 3.6rem; border-radius: 18px; background: rgba(255, 255, 255, .6); color: var(--steel); }
.steps li strong { color: var(--ink); }
.steps li::before { content: counter(s); position: absolute; left: .9rem; top: .85rem; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--white); font-weight: 700; font-size: .95rem; }
.result { background: rgba(21, 34, 59, .78); color: var(--white); }
.result .btn.alt { background: var(--white); box-shadow: none; }
.checks li::before { content: "\2713"; }
.tools { margin-top: .4rem; }
.result p { font-size: 1.2rem; max-width: 34em; margin: 0; color: rgba(255, 255, 255, .88); }
.end { margin-top: 1.6rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.4rem; }

/* Footer: a navy glass strip, so the white text reads on any sky */
.foot { position: relative; z-index: 1; width: min(var(--w), calc(100% - 32px)); margin: .6rem auto max(16px, env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 2rem; padding: 1rem 1.4rem; border-radius: 22px; background: rgba(21, 34, 59, .66); border: 1px solid var(--glass-edge); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--white); font-size: .95rem; }
.foot .links { display: flex; gap: 1.2rem; }
.foot a { color: inherit; text-underline-offset: 3px; }

/* How I Build: a mockup of a Claude Code session. Lines appear one by one when it scrolls into view */
.term { margin: 1.6rem 0 0; border-radius: 20px; overflow: hidden; background: #1d1c21; box-shadow: 0 18px 50px rgba(21, 34, 59, .35); }
.term-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #2a2930; }
.term-bar i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.term-bar i:nth-child(2) { background: #febc2e; }
.term-bar i:nth-child(3) { background: #28c840; }
.term-bar span { margin-left: 10px; color: #a8a49c; font: 500 .85rem var(--font); }
.term-body { padding: 18px 20px 22px; font: 400 .92rem/1.65 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #ece9e4; }
.term .ln { margin: 0 0 .35rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.term .ln b { color: #fff; }
.term .me { margin: .4rem 0 .8rem; padding: .45rem .8rem; border-radius: 10px; background: #2f2e35; color: #fff; }
.term .me b { color: #e28a68; margin-right: .3rem; }
.term .out { padding-left: 1.4rem; color: #a8a49c; }
.term em { font-style: normal; color: #7fd49b; }
.term figcaption { padding: 0 20px 16px; color: #a8a49c; font-size: .85rem; }
.cursor { display: inline-block; width: .55em; height: 1.1em; margin-left: .3em; vertical-align: -.2em; background: #e28a68; animation: blink 1s steps(1) 4; }
.anim .term:not(.play) .ln { opacity: 0; }
.term.play .ln { animation: lineIn .45s var(--ease) both; }
.term.play .ln:nth-child(2) { animation-delay: 0.38s; }
.term.play .ln:nth-child(3) { animation-delay: 0.76s; }
.term.play .ln:nth-child(4) { animation-delay: 1.14s; }
.term.play .ln:nth-child(5) { animation-delay: 1.52s; }
.term.play .ln:nth-child(6) { animation-delay: 1.90s; }
.term.play .ln:nth-child(7) { animation-delay: 2.28s; }
.term.play .ln:nth-child(8) { animation-delay: 2.66s; }
.term.play .ln:nth-child(9) { animation-delay: 3.04s; }
.term.play .ln:nth-child(10) { animation-delay: 3.42s; }
.term.play .ln:nth-child(11) { animation-delay: 3.80s; }
.term.play .ln:nth-child(12) { animation-delay: 4.18s; }

/* 404 page: one glass card in the middle of the sky */
.nf { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 120px 16px 60px; }
.nf .card { max-width: 560px; text-align: center; }
.nf .code { margin: 0; font-weight: 700; font-size: clamp(4.5rem, 16vw, 7rem); line-height: 1; letter-spacing: -.05em; color: var(--accent); }
.nf h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.1; letter-spacing: -.03em; margin: .4rem 0 .8rem; text-wrap: balance; }
.nf .end { justify-content: center; }

@media (min-width: 800px) {
  .about { grid-template-columns: 1.3fr 1fr; align-items: center; }
  .apps { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
  .photos { grid-template-columns: repeat(3, 1fr); }
  .contact { grid-template-columns: 1fr 1.2fr; }
  .app-card { grid-template-columns: 1fr 1fr; }
  .built { grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: start; }
}

/* Phones: the menu keeps the name and the button; the links move to a second glass pill */
@media (max-width: 760px) {
  /* Golden bar: one slim bar split 61.8% name / 38.2% Menu. Sizes are Fibonacci steps (13, 21, 34, 55). */
  .top { top: max(13px, env(safe-area-inset-top)); padding: 0 13px; }
  .pill { height: 55px; padding: 5px 5px 5px 13px; gap: 0; }
  .mark { flex: 0 0 61.8%; }
  .pill ul, .pill .cta { display: none; }
  .menu-btn { display: inline-flex; flex: 1; height: 100%; }
  /* Lift "See my work" above Safari's floating address bar */
  .down { bottom: calc(max(28px, env(safe-area-inset-bottom)) + 64px); }
  /* The links slide in from the right on a glass panel 61.8% of the screen wide, starting near the golden line */
  .sheet { display: grid; position: fixed; z-index: 4; top: calc(max(13px, env(safe-area-inset-top)) + 68px); right: 13px; bottom: max(13px, env(safe-area-inset-bottom)); width: 61.8vw; align-content: start; gap: 8px; padding: max(21px, calc(38.2svh - 170px)) 13px 21px; border-radius: 34px; background: rgba(21, 34, 59, .78); border: 1px solid var(--glass-edge); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); box-shadow: 0 20px 50px rgba(21, 34, 59, .35); overflow-y: auto; visibility: hidden; opacity: 0; transform: translateX(34px); transition: opacity .3s var(--ease), transform .35s var(--ease), visibility 0s .35s; }
  .menu-open body .sheet { visibility: visible; opacity: 1; transform: none; transition: opacity .3s var(--ease), transform .35s var(--ease); }
  .sheet a { display: flex; align-items: center; min-height: 55px; padding: 0 13px; border-radius: 18px; color: var(--white); text-decoration: none; font-size: 1.12rem; font-weight: 600; background: rgba(255, 255, 255, .08); }
  .sheet a[aria-current] { background: rgba(255, 255, 255, .2); }
  .sheet a.cta { justify-content: center; margin-top: 13px; background: var(--white); color: var(--ink); font-size: 1.05rem; }
  /* Name on the golden line: 38.2% down the screen (the project pages keep their own spots for the cut-outs) */
  .hero:not(.dark) { place-content: start center; padding-top: calc(38.2svh - 4.2rem); }
  .sides { flex-direction: column; align-items: center; gap: .3rem; }
  .hero h1 { font-size: clamp(3.4rem, 19vw, 6rem); }
  .card { scroll-margin-top: 89px; }
  .card { backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
  .bg-pipes { --nudge: 0px; }
  .hero { padding-top: var(--top-s, 120px); padding-bottom: var(--bot-s, 120px); }
  .bg-cams .sides { order: -1; margin: 0 0 1rem; }
  .term-body { padding: 14px 14px 18px; font-size: .8rem; }
  .term .out { padding-left: .9rem; }
  .listings { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .6rem; margin-inline: -.4rem; padding-inline: .4rem; }
  .listings li { scroll-snap-align: start; }
}

/* Opening: the photo drifts into place, the name rises out of a blur, the menu drops in */
@keyframes settle { from { transform: scale(1.12); } to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(.35em); filter: blur(14px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lineIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes drop { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}