/* Machiavellian Engineering — site styles.
   One heavy face, lowercase, at sizes that do the work. Paper and ink; orange is the
   one signal on a page (the App Store button). No cards, no shadows: rules and space. */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("/assets/fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("/assets/fonts/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 800; font-display: swap; src: url("/assets/fonts/Inter-ExtraBold.woff2") format("woff2"); }

:root {
  --paper: #ECECEA;
  --ink: #111111;
  --muted: #5E5E5B;
  --rule: #CFCFCB;
  --screen: #DCDCD8;
  --bezel: #111111;
  --signal: #FF5A1F;
  --on-signal: #111111;
  --logo-lion: #111111;   /* the lion: ink on light, rust on dark */
  --logo-detail: #111111; /* fox ear tip, eye, nose: ink on light, the background on dark */

  --face: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gutter: max(20px, 4vw);
  --max: 1360px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1E1E1D;
    --ink: #ECECEA;
    --muted: #A3A39F;
    --rule: #383836;
    --screen: #2A2A28;
    --bezel: #000000;
    --logo-lion: #8F3412;
    --logo-detail: #1E1E1D;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 18px/1.55 var(--face);
  font-feature-settings: "cv11", "ss01";
  text-transform: lowercase; /* everything, site wide; the source keeps normal case for screen readers */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
::selection { background: var(--signal); color: var(--on-signal); }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

/* Type */
.display, h1, h2 {
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.86;
  margin: 0;
}
.display { font-size: clamp(120px, 30vw, 420px); margin-left: -0.04em; }
h1 { font-size: clamp(56px, 10vw, 136px); text-wrap: balance; }
h1.wordmark-hero { font-size: clamp(44px, 12.9vw, 186px); }
h2 { font-size: clamp(36px, 5.2vw, 68px); line-height: 0.95; letter-spacing: -0.04em; text-wrap: balance; }
h3 { font-size: 18px; font-weight: 500; margin: 0; }
.lede { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.3; font-weight: 500; letter-spacing: -0.012em; max-width: 26ch; margin: 0; }
.small, .meta { font-size: 14px; line-height: 1.45; font-weight: 500; color: var(--muted); }
p { margin: 0; max-width: 60ch; }
.prose { display: grid; gap: 1em; }
.prose h2 { margin-top: 1.2em; }
.prose h3 { margin-top: 0.8em; }
.prose ul { margin: 0; padding-left: 1.1em; display: grid; gap: 0.4em; max-width: 60ch; }

/* Header */
.site-header { border-bottom: 1px solid var(--rule); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 18px; padding-bottom: 18px; }
.logo { display: block; line-height: 0; }
.logo svg { display: block; height: 28px; width: auto; aspect-ratio: 1388.88 / 145.51; }
.lg-lion { fill: var(--logo-lion); }
.lg-fox { fill: var(--signal); }
.lg-det { fill: var(--logo-detail); }
.lg-text { fill: var(--ink); }
.site-nav { display: flex; gap: 28px; font-size: 16px; font-weight: 500; }
.site-nav a { text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { text-decoration: underline; }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.button {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--signal); color: var(--on-signal);
  font: 500 17px/1 var(--face); text-decoration: none;
  padding: 16px 22px 16px 20px; border-radius: 999px;
}
.button svg { width: 18px; height: 18px; }
.button { transition: background-color 0.2s ease, color 0.2s ease; }
.button:hover { background: var(--ink); color: var(--paper); }
.button[aria-disabled="true"] { pointer-events: none; }
.link { font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; overflow-wrap: anywhere; }
.link:hover { border-bottom-width: 2px; }

/* Sections */
section { padding-top: clamp(64px, 9vw, 128px); }
.rule-top { border-top: 1px solid var(--rule); padding-top: 24px; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px var(--gutter); align-items: start; }

/* Home: the name, set as big as the page allows */
.wordmark-hero { font-size: clamp(44px, 12.9vw, 186px); line-height: 0.86; letter-spacing: -0.045em; margin: 0 0 clamp(28px, 4vw, 56px) -0.04em; text-wrap: balance; max-width: 7.2em; }
.home-hero { padding-top: clamp(40px, 7vw, 104px); }
/* The tagline sits right under the name, on the same left edge. */
.home-hero .wordmark-hero { margin-bottom: clamp(20px, 2.6vw, 36px); }
.home-hero .intro { display: block; }

/* Hero */
.hero { padding-top: clamp(28px, 5vw, 64px); }
.hero .display { margin-bottom: clamp(20px, 3vw, 40px); }
.hero .intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px var(--gutter); align-items: end; }

/* Devices: screenshot slots at each platform's real proportions.
   Drop a file at the path in each <img> and it shows; until then the slot names its size. */
.devices { display: grid; grid-template-columns: 2.2fr 3.1fr 1.9fr 0.8fr; gap: clamp(16px, 2.5vw, 40px); align-items: end; }
.device { display: grid; gap: 14px; min-width: 0; margin: 0; }
.device figcaption { font-size: 14px; font-weight: 500; color: var(--muted); }
.screen {
  position: relative; overflow: hidden;
  background: var(--screen);
  border: solid var(--bezel);
}
.screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.screen .slot {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  font-size: 13px; font-weight: 500; color: var(--muted); padding: 12px; line-height: 1.35;
}
.screen .slot > span { position: relative; z-index: 1; background: var(--screen); padding: 4px 6px; }
.phone .screen { aspect-ratio: 1179 / 2556; border-width: 6px; border-radius: 13% / 6%; }
.duo .screen { aspect-ratio: 2670 / 1878; border-width: 7px; border-radius: 5% / 7%; }
/* The fold: a faint crease down the middle of the open screen. */
.duo .screen::after { content: ""; position: absolute; z-index: 0; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--bezel); opacity: 0.18; pointer-events: none; }
.tablet .screen { aspect-ratio: 2732 / 2048; border-width: 10px; border-radius: 4.5% / 6%; }
.laptop .screen { aspect-ratio: 2880 / 1800; border-width: 10px 10px 16px; border-radius: 3% 3% 0 0 / 4.5% 4.5% 0 0; }
.laptop .base { height: 12px; background: var(--bezel); border-radius: 0 0 14px 14px / 0 0 10px 10px; margin: 0 -4%; opacity: 0.9; }

/* Facts table */
.facts { width: 100%; border-collapse: collapse; font-size: 17px; }
.facts th, .facts td { text-align: left; vertical-align: top; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.facts th { width: 34%; font-weight: 500; color: var(--muted); padding-right: 24px; }
.facts tr:first-child th, .facts tr:first-child td { border-top: 1px solid var(--ink); }

/* Feature list */
.features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gutter); }
.features li { border-top: 1px solid var(--ink); padding-top: 16px; display: grid; gap: 8px; align-content: start; }
.features p { color: var(--muted); font-size: 17px; }

/* Projects: an index, not cards. Image slot, name, discipline, one line. */
.section-head { margin-bottom: clamp(28px, 4vw, 48px); }
.projects { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(48px, 6vw, 88px) var(--gutter); }
.project, .project > a { display: grid; gap: 18px; align-content: start; text-decoration: none; color: inherit; }
.shot { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--screen); }
.wide-shot { aspect-ratio: 16 / 9; }
.shot.bare { background: none; aspect-ratio: 2.3 / 1; }
/* Stand-in projects: an empty dark panel, the label set small. */
.project.quiet .shot { background: var(--ink); }
.project.quiet .shot .slot { color: var(--paper); opacity: 0.7; font-size: 14px; letter-spacing: 0.02em; }
.project.quiet .shot .slot > span { background: transparent; }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shot .slot { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font-size: 13px; font-weight: 500; color: var(--muted); line-height: 1.35; }
.project-text { display: grid; gap: 6px; }
.project h3 { font-size: clamp(28px, 3vw, 40px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.project p { color: var(--muted); max-width: 44ch; }
.project.featured { grid-column: 1 / -1; }
.project.featured > a { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 18px var(--gutter); align-items: end; }
.project.featured .shot { aspect-ratio: 16 / 9; }
.project.featured h3 { font-size: clamp(56px, 8vw, 120px); line-height: 0.86; letter-spacing: -0.045em; }
.project > a:hover h3 { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.12em; }

/* The name: the mark and the line it comes from */
.origin { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px var(--gutter); align-items: center; }
.origin { align-items: start; }
.origin .mark { display: block; width: clamp(140px, 22vw, 320px); height: auto; aspect-ratio: 1; }
.origin .prose blockquote { margin-top: 0.4em; }
blockquote { margin: 0; font-size: clamp(24px, 2.8vw, 36px); line-height: 1.15; font-weight: 800; letter-spacing: -0.03em; max-width: 24ch; }
blockquote + .meta { margin-top: 14px; }

/* Footer */
.site-footer { margin-top: clamp(80px, 11vw, 160px); border-top: 1px solid var(--rule); }
.site-footer .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 32px; padding-top: 28px; padding-bottom: max(36px, env(safe-area-inset-bottom)); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; font-weight: 500; }
.site-footer nav a { text-decoration: none; }
.site-footer nav a:hover { text-decoration: underline; }
.site-footer .meta { grid-column: 1 / -1; }

/* Narrow screens */
@media (max-width: 820px) {
  body { font-size: 17px; }
  .hero .intro, .split { grid-template-columns: 1fr; }
  .devices { grid-template-columns: 2.4fr 1fr; }
  .devices .laptop, .devices .tablet { grid-column: 1 / -1; }
  .devices .laptop { order: -1; }
  .features { grid-template-columns: 1fr; gap: 28px; }
  .projects { grid-template-columns: 1fr; }
  .project.featured > a { grid-template-columns: 1fr; }
  .origin { grid-template-columns: 1fr; }
  .site-footer .wrap { grid-template-columns: 1fr; }
  .laptop .base { margin: 0 -2%; }
  .site-nav { gap: 20px; }
  .logo svg { height: 24px; }
}
@media (max-width: 480px) {
  .site-header .wrap { flex-wrap: wrap; row-gap: 12px; padding-top: 16px; padding-bottom: 14px; }
  .logo svg { height: 22px; }
  .site-nav { font-size: 15px; gap: 20px; width: 100%; }
}
/* Motion: the hero rises in on load; blocks further down rise as they scroll into view
   (site.js adds .reveal, then .in); images fade in once loaded. Kept short and quiet. */
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
.hero h1, .hero .intro > * { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero .intro > :nth-child(1) { animation-delay: 0.12s; }
.hero .intro > :nth-child(2) { animation-delay: 0.22s; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--delay, 0s); }
.reveal.in { opacity: 1; transform: none; }
.shot img, .screen img { transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
img.loading { opacity: 0; }
.project > a:hover .shot img { transform: scale(1.03); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
.contact-mail { max-width: none; }