/* V2: one continuous ink field. Current user-selected version. */
:root {
  --paper: #14212a;
  --letter: #14212a;
  --ink: #f0eadd;
  --brass: #d4b782;
  --midnight: #14212a;
  --soft: #21313a;
  --on-dark: #f0eadd;
  --muted: #bbc5c6;
  --screen-mat: #1b2b34;
  color-scheme: dark;
}
::selection { background: var(--brass); color: var(--paper); }
.site-header { min-height: 100px; }
.hero { padding: 48px; background: transparent; overflow: hidden; }
/* A neutral image scrim keeps the lettering readable without a separate card. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, var(--paper) 0%, rgba(20,33,42,.98) 24%, rgba(20,33,42,.88) 35%, rgba(20,33,42,0) 65%);
}
/* The image's own study dissolves into the page; this is an image edge, not a section fill. */
.hero-art { mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%); }
.hero-copy { z-index: 1; padding: 40px 0; background: transparent; }
.hero-description { max-width: 27ch; }
.hero-signoff { color: var(--muted); }
.button:hover { background: var(--brass); color: var(--paper); }
.projects { padding-top: 80px; }
.tools-intro p { color: var(--muted); }
.tools-intro { display: flex; align-items: end; justify-content: space-between; gap: 48px; margin-bottom: 40px; }
.tools-intro h2 { max-width: 14ch; }
.tools-intro p { max-width: 37ch; margin-top: 0; }
.apps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.app-entry { display: flex; flex-direction: column; min-width: 0; }
.app-preview { display: block; padding: 12px; background: var(--screen-mat); overflow: hidden; }
.app-preview img { aspect-ratio: 1905/929; object-fit: contain; transition: transform .35s var(--ease); }
.app-preview:hover img { transform: scale(1.015); }
.app-details { display: flex; flex-direction: column; align-items: start; flex: 1; padding-top: 28px; }
.app-details h3 { font-size: 36px; min-height: 2.08em; max-width: 18ch; }
.app-details p { color: var(--muted); margin-top: 16px; flex: 1; }
.app-details .button { margin-top: 28px; }
.projects > .finance-feature { margin-top: 120px; }
.finance-copy h2 { font-size: var(--heading); max-width: 13ch; }
.finance-feature { background: transparent; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; }
.finance-media { background: transparent; mix-blend-mode: lighten; }
.finance-media > a { height: auto; }
.finance-media video { min-height: 0; height: auto; aspect-ratio: 16/10; object-fit: contain; mix-blend-mode: lighten; }
.finance-copy { padding: 16px 0; }
.finance-copy p { color: var(--muted); }
.finance-copy h3 { max-width: 13ch; }
.video-toggle { background: var(--soft); color: var(--ink); }
.video-toggle:hover { background: var(--brass); color: var(--paper); }
.film { background: transparent; padding-block: 0; margin-top: 128px; }
.film-layout { gap: 64px; }
.film-copy p, .film-duration { color: var(--muted); }
.film-still { background: transparent; }
.film-layout > figure { mix-blend-mode: lighten; }
.film-still img { mix-blend-mode: lighten; }
.note { gap: 64px; margin-block: 128px; align-items: center; }
.note-visual { background: transparent; align-self: stretch; }
.note-visual img { mask-image: linear-gradient(to right, #000 0%, #000 82%, transparent 100%); }
.note-letter { background: transparent; padding: 16px 0; }
.note-letter > p:not(.greeting) { color: var(--muted); }
.signature span, .tags-project p { color: var(--muted); }
.site-footer { background: transparent; padding-top: 32px; }
.footer-top p, .footer-bottom { color: var(--muted); }
.site-footer a:focus-visible, .film a:focus-visible { outline-color: var(--brass); }
@media (max-width: 1100px) {
  .apps-grid { gap: 24px; }
  .app-details h3 { font-size: 32px; }
  .hero { padding: 32px; }
  .hero-copy { padding: 32px 0; }
  .finance-feature, .film-layout, .note { gap: 40px; }
}
@media (max-width: 950px) and (min-width: 601px) {
  .apps-grid { grid-template-columns: 1fr; gap: 80px; }
  .app-entry { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 32px; }
  .app-details { padding-top: 0; }
  .app-details h3 { min-height: 0; }
  .app-details p { margin-top: 16px; }
  .app-details .button { margin-top: 20px; }
}
@media (max-width: 850px) {
  .site-header { min-height: 88px; }
  .hero { padding: 24px; }
  .hero-copy { padding: 32px 0; }
  .hero::after { background: linear-gradient(90deg, var(--paper) 0%, rgba(20,33,42,.96) 30%, rgba(20,33,42,.8) 42%, rgba(20,33,42,0) 70%); }
  .finance-feature { gap: 32px; }
  .finance-copy { padding: 0; }
  .film-layout { gap: 32px; }
  .note { gap: 32px; }
  .note-visual img { mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%); }
  .note-letter { padding: 0; }
}
@media (max-width: 600px) {
  .tools-intro { display: block; margin-bottom: 32px; }
  .tools-intro h2 { max-width: none; }
  .tools-intro p { margin-top: 20px; max-width: none; }
  .apps-grid { grid-template-columns: 1fr; gap: 56px; }
  .app-details { padding-top: 24px; }
  .app-details h3 { min-height: 0; font-size: 36px; max-width: 18ch; }
  .app-details .button { margin-top: 24px; }
  .projects > .finance-feature { margin-top: 80px; }
  .finance-copy h2 { font-size: 36px; max-width: none; }
  .site-header { min-height: 76px; }
  .hero { padding: 0; }
  .hero::after { display: none; }
  .hero-copy { padding: 28px 0 32px; }
  .hero-art { mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%); }
  .projects { padding-top: 48px; }
  .finance-feature { grid-template-columns: 1fr; gap: 20px; }
  .finance-copy { padding: 0; }
  .finance-media video { aspect-ratio: 4/3; }
  .video-toggle { left: 0; bottom: 4px; }
  .film { margin-top: 80px; padding-block: 0; }
  .film-layout { gap: 24px; }
  .note { gap: 24px; margin-block: 80px; }
  .note-letter { padding: 0; }
  .note-visual img { height: 350px; }
  .site-footer { padding-top: 16px; }
}
@media (max-width: 360px) { .app-details h3 { font-size: 32px; } }
@media (prefers-reduced-motion: reduce) {
  .app-preview img { transition: none; }
  .app-preview:hover img { transform: none; }
}