/* Homepage (2026-10-15, third pass): Nolan Barret's top bar + small intro,
   Formo's work layout (label column on the left, title above a faint gray
   rounded plate on the right). One font (Switzer) at one size, like both.
   Earlier attempts: home-nolan.css / nolan-backup.html, ebook-backup.html. */

:root {
  --ink: #000;
  --muted: rgba(0,0,0,.5);
  --plate: rgba(0,0,0,.035);
  --bg: #fff;
  --edge: 12px;
  --gap: 12px;
  --top-h: 44px;
  --peek: 57px;   /* the "Selected work" label's height (45px) + 12px, so it sits in the bottom corner */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.4 "Switzer", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
ol { list-style: none; }
h2 { font: inherit; }
.muted { color: var(--muted); }

/* Everything lines up to one four-column frame */
.top, .hero, .row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--gap);
  padding-left: var(--edge); padding-right: var(--edge);
}

/* Top bar: name | · | NY clock | links */
.top {
  position: sticky; top: 0; z-index: 10;
  height: var(--top-h); align-items: center;
  background: var(--bg);
}
/* Both clocks sit dead center on the page, whatever the columns do. */
/* Hide-and-reveal (see topbar.js). */
.top { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.top.top-hidden { transform: translateY(-100%); }

.clock {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; gap: 28px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.top nav { grid-column: 4; display: flex; justify-content: flex-end; gap: 24px; }
.top a { transition: opacity .2s; }
.top a:hover { opacity: .5; }

/* Intro */
.hero { min-height: calc(100svh - var(--top-h) - var(--peek)); padding-top: 28vh; padding-bottom: 48px; }
.hero h1 {
  grid-column: 1 / span 2;
  max-width: 30em;
  font-size: clamp(19px, 1.65vw, 24px);
  font-weight: 500; line-height: 1.25; letter-spacing: -0.01em;
  text-wrap: pretty;
}

/* Section rows: label in column 1, content across columns 2–4 */
.row { margin-bottom: 160px; align-items: start; }
.side { position: sticky; top: calc(var(--top-h) + 16px); }
.side h2 { display: flex; align-items: center; gap: 10px; }
.side h2::before {
  content: ""; width: 12px; height: 12px; flex: none;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 12px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 1px 12px no-repeat;
}
.side p { color: var(--muted); padding-left: 22px; }
.main { grid-column: 2 / -1; }

/* Projects */
/* The first screen ends with the "Selected work" label; the pictures sit level
   with it but are pushed out of sight and slide up as you start scrolling
   (see the script in index.html). The chevron glides there in one click. */
.projects { display: grid; grid-template-columns: 1fr 1fr; gap: 72px clamp(24px, 2.5vw, 40px); }
.lead-in > .main { will-change: transform; }
.stage-inner { position: sticky; top: var(--top-h); }
/* The chevron takes the place of the "+" in front of "Selected work". */
.side h2.chev::before { display: none; }
.down {
  display: grid; place-items: center; flex: none;
  width: 12px; height: 12px; padding: 0;
  border: 0; background: none; color: var(--ink); cursor: pointer;
}
.down svg { width: 12px; height: 12px; animation: nudge 2.4s ease-in-out infinite; }
.down::after { content: ""; position: absolute; inset: -10px; } /* bigger tap area */
.down { position: relative; }
/* The whole label (chevron + title + subtitle) is clickable, not just the chevron. */
.side.go { cursor: pointer; transition: opacity .2s; justify-self: start; }
@media (hover: hover) { .side.go:hover { opacity: .5; } }
@keyframes nudge { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(3px); } 90% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .down svg { animation: none; } html { scroll-behavior: auto; } }
.head { display: flex; justify-content: space-between; margin-bottom: 8px; }
.head b { font-weight: 400; }
.head span { color: var(--muted); }

.plate {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--plate);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
}
.plate img {
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 12px 32px rgba(0,0,0,.08);
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.project:hover .plate img { transform: translateY(-4px); }

/* A single screenshot runs off the right and bottom edges, so it fills the plate. */
.plate.bleed img { width: 112%; max-width: none; margin: 8% 0 0 8%; align-self: flex-start; flex: none; }

/* Each project gets its own treatment, so the grid doesn't repeat itself:
   bleed (OTS), collage (PM Tools), stagger (Sotheby's), zoom (Viyet),
   fill (Reserve), plain phone row (Namesake). */

/* Collage: the two long strips overlap like sheets of paper on a desk. */
.plate.collage { display: block; }
.plate.collage img { position: absolute; width: 80%; max-width: none; }
.plate.collage img:nth-child(1) { left: 5%; top: 0; margin-top: 21%; }
.plate.collage img:nth-child(2) { left: 15%; top: 0; margin-top: 34%; }
/* Hairline edge + a deeper shadow so each sheet reads on its own, and the
   top sheet visibly casts onto the one underneath. */
.plate.collage img {
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.06), 0 18px 40px rgba(0,0,0,.14);
}

/* Zoom: crop in on the product photo; multiply blends its white background
   into the gray plate so the figures stand in the box. */
.plate.zoom { display: block; }
.plate.zoom img {
  position: absolute; left: 0; top: 0;
  width: 180%; max-width: none; margin: -23% 0 0 -19%;
  border-radius: 0; box-shadow: none; mix-blend-mode: multiply;
}
.project:hover .plate.zoom img { transform: scale(1.02); }

/* Fill: an image that is already a finished mockup covers the whole plate. */
.plate.fill img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 0; box-shadow: none;
}
.project:hover .plate.fill img { transform: scale(1.02); }

/* Strip: a very wide, short screenshot (PM Tools) shown big, starting at its
   left edge and running off the right of the box. */
.plate.strip { align-items: center; }
.plate.strip img { height: var(--h, 46%); width: auto; max-width: none; flex: none; margin-left: 8%; }

/* Three phone screens side by side. */
.plate.phones { align-items: center; justify-content: center; gap: 4%; }
.plate.phones img { width: 26%; border-radius: 10px; }
.plate.phones.four { gap: 3%; }
.plate.phones.four img { width: 20%; }
/* Stagger: the middle phone sits higher than the other two. */
.plate.phones.stagger img { translate: 0 5%; }
.plate.phones.stagger img:nth-child(2) { translate: 0 -6%; }

/* Cards (Namesake): the app's cards cut out of the screenshots and laid in the
   box like a dealt hand, usually running off the bottom. Each image sets its
   own spot: --x / --t (left / top), --w (width), --r (tilt). */
.plate.cards { display: block; }
.plate.cards img {
  position: absolute; left: var(--x, 29%); top: var(--t, 9%);
  width: var(--w, 42%); max-width: none; rotate: var(--r, 0deg);
  border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.06)) drop-shadow(0 14px 28px rgba(0,0,0,.10));
}
/* Full app screens are white on white: a hairline edge keeps them from melting into the box. */
.plate.cards img.edge {
  filter: drop-shadow(0 0 .6px rgba(0,0,0,.3)) drop-shadow(0 1px 2px rgba(0,0,0,.06)) drop-shadow(0 14px 28px rgba(0,0,0,.10));
}

/* About + skills */
.about p + p { margin-top: 14px; }
.about { max-width: 40em; }
.about .lead { font-size: clamp(19px, 1.65vw, 24px); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 20px; }

/* One list style for every "short title + gray line" grid on the site:
   homepage Skills, project "How we got there" and project Results. Two
   columns, black title over a gray line. Skills and steps are numbered
   (they're a sequence); Results aren't. */
.skills, .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 32px clamp(24px, 2.5vw, 40px); }
.skills { counter-reset: s; }
.skills li { counter-increment: s; }
.skills li::before { content: counter(s, decimal-leading-zero); display: block; color: var(--muted); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.skills b, .tiles b { display: block; font-weight: 400; color: var(--ink); }
.skills p, .tiles small { display: block; font-size: inherit; color: var(--muted); margin-top: 2px; max-width: 24em; }

/* Contact */
.contact { margin-bottom: 0; padding-bottom: 16px; }
/* Email and the "Next" link use the site's one big text size, and their
   first line sits on the same baseline as the label on the left. */
.contact, .next { align-items: baseline; }
.contact .big, .next-link { font-size: clamp(19px, 1.65vw, 24px); font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; color: var(--ink); }
.contact .big a { transition: opacity .2s; }
.contact .big a:hover { opacity: .5; }
.links { margin-top: 14px; }
.links a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(0,0,0,.25); }
.fine {
  grid-column: 1 / -1; display: flex; justify-content: space-between;
  margin-top: 140px; color: var(--muted); font-size: 13px;
}

/* Phone: everything in one column */
@media (max-width: 720px) {
  :root { --edge: 16px; }
  .top, .hero, .row { grid-template-columns: 1fr 1fr; }
  .clock { display: none; }
  /* Project pages on phones: no room for Back + name + two links, so the
     top bar is just "‹ Back" and the centered name. Contact is at the bottom. */
  .case .top nav { display: none; }
  .top nav { grid-column: 2; }
  .hero { padding-top: 22vh; }
  .hero h1, .main, .side { grid-column: 1 / -1; }
  .side { position: static; margin-bottom: 24px; }
  /* Section labels are centered on phones, like chapter breaks (same look as
     "Selected work", minus the chevron). The content below stays left-aligned. */
  .side h2::before { display: none; }
  .side p { padding-left: 0; }
  .side { text-align: center; margin-bottom: 32px; }
  .side h2 { justify-content: center; }
  /* Same chevron as "Selected work" (drawn here, not a button), same gap. */
  .row:not(.lead-in) > .side::after {
    content: ""; display: block; width: 12px; height: 12px; margin: 18px auto 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.1'%3E%3Cpath d='M1.5 4l4.5 4.5L10.5 4'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.1'%3E%3Cpath d='M1.5 4l4.5 4.5L10.5 4'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  /* "Selected work" is centered like a divider, sitting 20px above the bottom
     edge of the first screen, with the chevron centered underneath.
     --peek = its height (22 + 22 + 30 for the chevron) + the 20px gap. */
  :root { --peek: 95px; }
  .lead-in .side { text-align: center; padding-bottom: 30px; margin-bottom: 0; }
  .lead-in .side h2 { justify-content: center; }
  .lead-in .side p { padding-left: 0; }
  .lead-in .down { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); }
  .lead-in .side { position: relative; top: auto; }
  .lead-in > .main { margin-top: 48px; }
  .row { margin-bottom: 130px; }
  /* "Next" and "Contact" hold just a line or two, so on phones they center under
     their centered label instead of hugging the left edge. */
  .next .next-link { justify-self: center; justify-content: center; }
  .contact .main { text-align: center; }
  .side.go { justify-self: stretch; }
  .projects { grid-template-columns: 1fr; gap: 40px; }
  .skills, .tiles { grid-template-columns: 1fr; gap: 24px; }
  /* Steps run four or five lines on phones, so they need more air between them. */
  .skills { gap: 40px; }
}

/* ---------- Project (case study) pages ---------- */
/* Same frame as the homepage: label in column 1, content in columns 2–4. */

/* Top bar on project pages: "‹ Back" on the left, your name dead center
   (where the homepage clock sits), so a page reached from a shared link
   still says whose work it is. Shown on phones too. */
.topname { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.top-left { display: flex; align-items: baseline; gap: 24px; }
.topback { display: inline-flex; align-items: center; gap: 6px; }
.topback svg { width: 11px; height: 11px; }

.prose { max-width: 40em; }
.prose p + p { margin-top: 14px; }
/* Highlights in project copy: body text a shade softer, highlights heavier
   and full black, so they read at a glance. */
.case .prose p { color: rgba(0,0,0,.68); }
.case strong { font-weight: 600; color: var(--ink); }

/* Features: short text on the left, a smaller picture box on the right. */
.features { display: grid; gap: 96px; }
.feature { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(24px, 2.5vw, 40px); align-items: start; }
.ftext h3 { font: inherit; display: flex; gap: 12px; margin-bottom: 8px; }
.ftext h3 span { color: var(--muted); font-variant-numeric: tabular-nums; }
.ftext p { color: var(--muted); }
.ftext p strong { color: var(--ink); }
.ftext p + p { margin-top: 10px; }
/* Key numbers: one per line, the number in black. */
.stats { list-style: none; margin-top: 16px; display: grid; gap: 6px; }
.stats li { color: var(--muted); }
.stats b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
/* Result numbers (.result): a faint rule, then small tiles like the Results
   section, number in black over a gray note, so they read as their own block. */
.stats.result { grid-template-columns: 1fr 1fr; gap: 16px 24px; margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(0,0,0,.1); }
/* A number left alone on its row (one, or the third of three) spans the row
   instead of squeezing into half. */
.stats.result li:nth-child(odd):last-child { grid-column: 1 / -1; }
.stats.result b, .stats.result small { display: block; }
.stats.result small { font-size: inherit; color: var(--muted); margin-top: 2px; }
/* Phone-only sentence version of the numbers ("Results: 67% of users…"). */
.result-line { display: none; }
.ftext .result-line b { font-weight: 500; color: var(--ink); }

/* Whole: the full screenshot, centered. Width per image (--w) is set so it
   fits the box's height. */
.plate.whole { align-items: center; justify-content: center; }
.plate.whole img { width: var(--w, 80%); }
/* Pair: two narrow screens side by side, running off the bottom edge. */
.plate.pair { align-items: flex-start; justify-content: center; gap: 4%; padding-top: 9%; }
.plate.pair img { width: var(--w, 36%); }

/* Results: the number in the big style, the explanation beside it. */
.results { display: grid; gap: 28px; }
.results > div { display: grid; grid-template-columns: 1fr 2fr; gap: var(--gap); align-items: baseline; }
.results dt { font-size: clamp(19px, 1.65vw, 24px); font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.results dd { color: var(--muted); max-width: 30em; }
.coda { margin-top: 40px; max-width: 40em; }

.next-link { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; transition: opacity .2s; justify-self: start; }
.next-link:hover { opacity: .5; }
.next-link .muted { color: var(--muted); }

@media (max-width: 720px) {
  .features { gap: 64px; }
  .feature { grid-template-columns: 1fr; gap: 20px; }
  /* On phones, a feature's numbers (.result) move below its screenshot, so
     they don't blur into the gray sentence above. */
  .feature:has(.stats.result) { gap: 0; }
  .feature:has(.stats.result) .ftext { display: contents; }
  .feature:has(.stats.result) .plate { margin-top: 20px; }
  .stats.result { display: none; }
  .ftext .result-line { display: block; order: 2; margin-top: 16px; }
  .results > div { grid-template-columns: 1fr; gap: 2px; }
}

/* Inline text links (e.g. "See PM Tools"): black and underlined so they read as links. */
a.ul { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(0,0,0,.3); text-underline-offset: 3px; transition: text-decoration-color .2s; }
a.ul:hover { text-decoration-color: var(--ink); }