/* Standalone project stories keep the notebook's paper, ink and type. */
.project-page { --project-blue: #285be3; --project-blue-soft: #dce8fc; overflow-x: hidden; overflow-y: auto; background-color: var(--paper); background-image: radial-gradient(circle, var(--canvas-dot) 0 .65px, transparent .9px); background-size: var(--canvas-grid) var(--canvas-grid); }
.project-page .project-header { position: sticky; top: 0; padding: 28px 40px; background: var(--paper); border-bottom: 1px solid rgb(32 32 30 / .12); }
/* The way back replaces the wordmark: back link left, Contact right. */
.project-header .header-nav { flex: 1; justify-content: space-between; }
.project-back { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.project-back:hover { text-decoration: underline; text-underline-offset: 5px; }
.project-main { max-width: 1440px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 80px); }
.project-hero { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: center; gap: clamp(36px, 6vw, 100px); padding: clamp(48px, 6vw, 88px) 0 60px; }
.project-kicker, .project-status { display: flex; align-items: center; gap: 10px; margin: 0 0 28px; font-size: 1rem; line-height: 1.4; letter-spacing: .09em; }
.project-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--project-blue); }
.project-hero h1 { max-width: 780px; font-size: clamp(44px, 4.8vw, 72px); font-weight: 650; line-height: 1.04; letter-spacing: -.06em; }
.project-marker { background: linear-gradient(transparent 62%, rgb(40 91 227 / .16) 62%); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.project-deck { max-width: 39ch; margin: 28px 0 32px; font-size: clamp(20px, 1rem + .65vw, 26px); line-height: 1.45; letter-spacing: -.025em; color: var(--muted); }
.project-story-link { display: inline-flex; align-items: center; gap: 20px; padding: 10px 0; font-size: 1rem; line-height: 1.4; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.project-story-link span { color: var(--project-blue); font-size: 24px; }
/* External demos read as buttons; the arrow says the link leaves the page. */
.project-cta { gap: .55em; min-height: 46px; padding: .7em 1.35em; border-radius: 999px; color: var(--paper); background: var(--ink); font-weight: 400; text-decoration: none; transition: background-color .2s ease; }
.project-cta:hover { background: #3a3a36; }
.project-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.project-cta .project-cta-arrow { color: inherit; font-size: 1.15em; line-height: 1; transition: transform .2s ease; }
.project-cta:hover .project-cta-arrow { transform: translate(2px, -2px); }
@media (prefers-reduced-motion: reduce) { .project-cta, .project-cta .project-cta-arrow { transition: none; } }
/* Covers show the mockup straight on the page, like the Selected work board. */
.project-cover { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; margin: 0; }
.project-cover .device-composition, .project-cover .ranny-cover-device { padding: 0 0 12px; }
.project-cover .device-mockup { width: min(82%, 260px); }
.project-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 28px 0; border-top: 1px solid rgb(32 32 30 / .25); border-bottom: 1px solid rgb(32 32 30 / .25); }
.project-facts dt { margin-bottom: 10px; color: var(--muted); font-size: 1rem; line-height: 1.4; }
.project-facts dd { margin: 0; font-size: 1rem; line-height: 1.55; }
.project-section { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.7fr); gap: clamp(36px, 6vw, 100px); padding: clamp(64px, 7vw, 104px) 0; border-bottom: 1px solid rgb(32 32 30 / .16); scroll-margin-top: 140px; }
.project-section-label > span { display: block; font-size: 1rem; line-height: 1.4; letter-spacing: .05em; color: var(--muted); }
.project-section-content { min-width: 0; }
.project-section h2 { margin: 0 0 28px; font-size: clamp(32px, 2.8vw, 44px); font-weight: 650; line-height: 1.08; letter-spacing: -.045em; }
.project-section-content > p { margin: 0 0 20px; max-width: 62ch; font-size: clamp(18px, 1rem + .35vw, 21px); line-height: 1.65; letter-spacing: -.015em; }
.project-section-content > p:last-child { margin-bottom: 0; }
.project-section blockquote { margin: 32px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--project-blue); font-size: clamp(24px, 2vw, 32px); font-weight: 400; line-height: 1.3; letter-spacing: -.035em; }
.project-scroll-link { margin-left: 24px; }
/* Same upright frame as the homepage board (assets/projects/mockups/iphone-front.svg);
   the screen sits in its 390 × 830 opening at 19, 19 of 428 × 868. */
.device-mockup { position: relative; flex: none; width: min(100%, 300px); aspect-ratio: 428 / 868; filter: drop-shadow(0 9px 10px rgb(32 32 30 / .1)); }
.device-viewport { position: absolute; inset: 2.18894% 4.43925%; overflow: hidden; border-radius: 12.5641% / 5.90361%; background: #fff; }
/* Browser captures need room for the camera island; app exports have status bars. */
.device-viewport-web { padding-top: 11.53846%; background: var(--screen-paper, #fff); }
.device-mockup .device-screen { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.device-mockup .device-hardware { position: relative; display: block; width: 100%; height: 100%; pointer-events: none; }
.project-screen-figure { margin: 36px 0 0; }
.project-screen-figure + p { margin-top: 40px; }
.screen-stage { position: relative; display: flex; align-items: center; justify-content: center; gap: 28px; min-width: 0; padding: 32px 24px; background: #e9effc; background-image: radial-gradient(circle, rgb(40 91 227 / .13) .7px, transparent 1px); background-size: 24px 24px; }
.assignment-figure .device-mockup, .household-figure .device-mockup { width: min(62%, 300px); }
.project-screen-figure figcaption { margin: 18px 0 0; max-width: 52ch; color: var(--muted); font-size: 1rem; line-height: 1.5; }
.project-screen-figure figcaption > span { display: block; margin-bottom: 6px; color: var(--ink); font-weight: 650; }
.project-screen-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 32px 0; }
.project-screen-pair .project-screen-figure { margin: 0; }
.project-screen-pair .screen-stage { padding: 24px 12px; }
.project-screen-pair .device-mockup { width: min(100%, 280px); }
.payment-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 0; margin: 32px 0 0; list-style: none; }
.payment-steps li { border-top: 1px solid #a9bce7; padding-top: 16px; font-size: 1rem; line-height: 1.5; }
.payment-steps span { display: block; margin-bottom: 8px; color: var(--project-blue); font-size: 1rem; }
.project-next .project-status { font-size: 1rem; line-height: 1.4; color: var(--project-blue); margin-bottom: 22px; }
.project-test-goals { margin: 24px 0 0; padding-left: 22px; font-size: clamp(18px, 1rem + .35vw, 21px); line-height: 1.65; }
.project-test-goals li { margin: 10px 0; padding-left: 6px; }
.project-test-goals li::marker { color: var(--project-blue); }
.project-footer { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding: 48px 0 60px; }
.project-footer p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.project-footer a { display: inline-flex; align-items: center; gap: 16px; font-size: clamp(20px, 1rem + .5vw, 24px); line-height: 1.4; text-decoration-thickness: 1px; text-underline-offset: 7px; }
/* Northline uses the shared story layout with its warmer brand and web previews. */
.northline-page { --project-blue: #a64d23; --project-blue-soft: #f0dfc9; }
.northline-page .project-marker { background: linear-gradient(transparent 62%, rgb(184 86 39 / .17) 62%); }
.northline-page .project-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); }
.device-composition { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .24fr); align-items: end; gap: 4%; width: 100%; padding: 28px 3% 38px 6%; }
.northline-web-figure > .device-composition { background: #f1e7d5; background-image: radial-gradient(circle, rgb(143 104 51 / .18) .7px, transparent 1px); background-size: 24px 24px; border: 1px solid #e1d0b5; }
.macbook-mockup { display: block; position: relative; width: 100%; min-width: 0; text-decoration: none; filter: drop-shadow(0 12px 10px rgb(47 39 26 / .15)); }
.macbook-mockup:focus-visible, .device-phone-link:focus-visible { outline-offset: 7px; }
.macbook-lid { position: relative; padding: 2.2% 2.2% 3.3%; border: 1px solid #707071; border-radius: 3.2% 3.2% 1% 1%; background: linear-gradient(135deg, #363638, #101011 45%, #232325); box-shadow: inset 0 0 0 1px #181819, 0 0 0 1px #c7c7c9; }
.macbook-display { position: relative; overflow: hidden; border-radius: 2px; background: #111; }
.macbook-display::after { content: ""; position: absolute; top: 0; left: 44%; width: 12%; height: 3.6%; border-radius: 0 0 4px 4px; background: #171719; pointer-events: none; }
.macbook-display > img { display: block; width: 100%; height: auto; }
.macbook-base { position: relative; left: -5%; width: 110%; height: clamp(7px, .8vw, 12px); border-radius: 1px 1px 45% 45% / 1px 1px 85% 85%; background: linear-gradient(#e5e5e7 0%, #a9a9ad 44%, #d1d1d4 52%, #77777b 100%); box-shadow: 0 2px 1px rgb(0 0 0 / .15); }
.macbook-base::before { content: ""; position: absolute; top: 0; left: 42%; width: 16%; height: 35%; border-radius: 0 0 6px 6px; background: linear-gradient(#858589, #bdbdc1); }
.northline-page .device-composition .device-mockup { width: 100%; transform: translateY(12px); }
.device-phone-link { display: block; text-decoration: none; border-radius: 12%; }
.northline-web-figure { margin: 32px 0; }
.northline-web-figure figcaption { margin: 18px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.5; }
.northline-page .project-status { font-size: 1rem; line-height: 1.5; letter-spacing: .04em; }
.northline-page .screen-stage { background-color: #f1e7d5; background-image: radial-gradient(circle, rgb(143 104 51 / .18) .7px, transparent 1px); }
.northline-mobile-figure .device-mockup { width: min(62%, 280px); }
/* Kazuki connects a customer phone experience with redacted staff-side views. */
.kazuki-page { --project-blue: #b82c24; --project-blue-soft: #f4e2df; }
.kazuki-page .project-marker { background: linear-gradient(transparent 62%, rgb(184 44 36 / .17) 62%); }
.kazuki-page .payment-steps li { border-color: #d8b3ac; }
.kazuki-reward-figure { margin: 32px 0 0; padding: 30px; background: #f4e6e0; }
.kazuki-reward-figure > img { display: block; width: min(100%, 347px); height: auto; margin: 0 auto; }
.kazuki-reward-figure figcaption, .kazuki-backend-figure figcaption { margin: 20px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.5; }
.kazuki-testing-result { display: flex; align-items: center; gap: 28px; padding: 28px 0; margin: 0 0 24px; border-top: 1px solid #d8b3ac; border-bottom: 1px solid #d8b3ac; }
.kazuki-testing-result strong { flex: none; color: var(--project-blue); font-size: clamp(56px, 6vw, 80px); font-weight: 650; line-height: 1; letter-spacing: -.06em; }
.kazuki-testing-result p { margin: 0; max-width: 28ch; font-size: clamp(18px, 1rem + .35vw, 21px); line-height: 1.5; }
.kazuki-iteration { margin: 28px 0; padding: 28px; background: #f4e6e0; border-left: 3px solid var(--project-blue); }
.kazuki-iteration .excerpt-label { color: #80534b; font-size: 1rem; line-height: 1.4; letter-spacing: .06em; }
.kazuki-iteration h3 { margin: 16px 0; font-size: clamp(22px, 1rem + .7vw, 28px); font-weight: 650; line-height: 1.25; letter-spacing: -.025em; }
.kazuki-iteration p { margin: 0; font-size: 1.125rem; line-height: 1.5; }
.kazuki-backend-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 32px 0 0; }
.kazuki-backend-figure { margin: 0; }
.kazuki-backend-stage { padding: 34px 8% 42px; background: #f4e6e0; background-image: radial-gradient(circle, rgb(184 44 36 / .15) .7px, transparent 1px); background-size: 24px 24px; }
.kazuki-backend-stage .macbook-display { aspect-ratio: 16 / 10; display: grid; align-items: center; background: #f7f7f8; }
.kazuki-backend-stage .macbook-display > img { width: 100%; height: auto; }
@media (max-width: 900px) {
  .project-page .project-header { padding: 24px; }
  .project-hero { gap: 30px; }
  .project-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-section { grid-template-columns: minmax(0, .65fr) minmax(0, 1.7fr); gap: 32px; }
  .project-screen-pair { gap: 16px; }
  .assignment-figure .device-mockup, .household-figure .device-mockup { width: min(100%, 300px); }
}
@media (max-width: 640px) {
  .project-page .project-header { align-items: center; gap: 16px; padding: 20px 24px; }
  .project-header .header-nav { flex-shrink: 1; font-size: 1rem; }
  .project-back { gap: 6px; }
  .project-main { padding: 0 24px; }
  .project-hero { grid-template-columns: 1fr; gap: 36px; padding: 44px 0 40px; }
  .project-kicker { margin-bottom: 22px; font-size: 1rem; letter-spacing: .03em; }
  .project-hero h1 { font-size: clamp(38px, 9.7vw, 56px); }
  .project-deck { margin: 24px 0; font-size: 20px; }
  .project-story-link { gap: 12px; }
  .project-cover { width: 100%; max-width: 390px; justify-self: center; }
  .project-cover .device-mockup { width: 200px; }
  .project-facts { gap: 24px 20px; padding: 24px 0; }
  .project-section { grid-template-columns: 1fr; gap: 28px; padding: 48px 0; scroll-margin-top: 110px; }
  .project-section h2 { font-size: 32px; margin-bottom: 24px; }
  .project-section-content > p { font-size: 18px; line-height: 1.6; }
  .project-section blockquote { padding-left: 18px; font-size: 25px; }
  .project-scroll-link { display: flex; width: fit-content; margin: 12px 0 0; }
  .project-screen-figure { margin-top: 28px; }
  .screen-stage { padding: 24px 18px; }
  .project-screen-pair { grid-template-columns: 1fr; gap: 28px; }
  .project-screen-pair .screen-stage { padding: 24px 18px; }
  .project-screen-pair .device-mockup { width: min(100%, 280px); }
  .payment-steps { grid-template-columns: 1fr; gap: 14px; }
  .payment-steps li { display: flex; align-items: baseline; gap: 14px; padding-top: 12px; }
  .payment-steps span { margin: 0; }
  .project-test-goals { font-size: 18px; }
  .project-footer { flex-direction: column; align-items: flex-start; padding: 36px 0 48px; }
  .northline-page .project-hero { grid-template-columns: 1fr; gap: 36px; }
  .northline-page .project-cover { max-width: none; }
  .northline-cover .device-composition { gap: 4%; }
  .northline-web-figure > .device-composition { grid-template-columns: 1fr; gap: 32px; padding: 24px 24px 36px; }
  .northline-page .northline-web-figure .device-composition .device-mockup { justify-self: center; width: min(80%, 220px); transform: none; }
  .northline-mobile-figure .device-mockup { width: min(100%, 280px); }
  .kazuki-testing-result { gap: 20px; }
  .kazuki-reward-figure { padding: 24px 18px; }
  .kazuki-iteration { padding: 24px 20px; }
  .kazuki-backend-stage { padding: 24px 8% 30px; }
  .kazuki-backend-pair { grid-template-columns: 1fr; gap: 28px; }
}

/* Stride project story */
.stride-page { --project-blue: #375bd2; --project-blue-soft: #e1e8f7; --screen-paper: #181e1e; }
.stride-page .device-composition .device-mockup { width: 100%; transform: translateY(12px); }
.stride-web-figure { margin: 32px 0; }
.stride-stage { padding: 30px 8% 40px; background: #e4e9f1; }
.stride-web-figure figcaption { margin: 18px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.5; }
@media (max-width: 640px) {
 .stride-page .project-hero { grid-template-columns: 1fr; }
 .stride-stage { padding: 22px 7% 28px; }
}

/* Ranny Brief editorial project */
.ranny-page { --project-blue: #6864a2; --project-blue-soft: #e9e6f3; }
.ranny-cover-device { width: 100%; }
.ranny-web-figure { margin: 32px 0; }
.ranny-stage { padding: 30px 8% 40px; background: #eeebf2; }
.ranny-web-figure figcaption { margin: 18px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.5; }
@media (max-width: 640px) {
 .ranny-page .project-hero { grid-template-columns: 1fr; }
 .ranny-stage { padding: 22px 7% 28px; }
}