:root { --bg:#09090a; --surface:#111113; --surface-2:#171719; --text:#f3f3f1; --secondary:#a5a5a2; --muted:#737370; --line:#27272a; --accent:#b9d8ff; --max:1080px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--bg); }
body { margin:0; background:var(--bg); color:var(--text); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
img { display:block; max-width:100%; }
[hidden] { display:none !important; }
.skip-link { position:fixed; top:-60px; left:1rem; z-index:100; padding:.7rem 1rem; background:var(--text); color:var(--bg); border-radius:0 0 10px 10px; }
.skip-link:focus { top:0; }
.site-header, main, .site-footer { width:min(calc(100% - 3rem),var(--max)); margin-inline:auto; }
.site-header { height:80px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; position:relative; z-index:20; }
.wordmark { justify-self:start; display:flex; align-items:center; gap:.65rem; font-weight:550; font-size:.9rem; letter-spacing:-.02em; }
.wordmark-mark { color:var(--accent); font-weight:650; letter-spacing:-.05em; }
.wordmark-name { color:var(--secondary); }
.site-nav { display:flex; align-items:center; gap:.35rem; padding:.32rem; border:1px solid var(--line); background:rgba(17,17,19,.88); border-radius:999px; }
.site-nav a { padding:.55rem .82rem; border-radius:999px; color:var(--secondary); font-size:.82rem; line-height:1; white-space:nowrap; transition:background .2s,color .2s; }
.site-nav a:hover,.site-nav a.active { color:var(--text); background:var(--surface-2); }
.language { justify-self:end; border:0; border-bottom:1px solid var(--line); background:none; color:var(--secondary); padding:.35rem 0; cursor:pointer; font-size:.8rem; }
.language:hover { color:var(--text); }
.overline { margin:0; color:var(--muted); font-size:.78rem; letter-spacing:.02em; }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:46px; padding:0 1.1rem; border-radius:999px; font-size:.88rem; white-space:nowrap; }
.primary-button { color:#101011; background:var(--text); }
.primary-button:hover { background:#fff; transform:translateY(-1px); }
.text-button { color:var(--secondary); }
.text-button:hover { color:var(--text); }

.home-hero { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:clamp(3rem,7vw,6rem); align-items:center; padding:5rem 0 5.5rem; border-bottom:1px solid var(--line); }
.home-hero h1 { max-width:690px; margin:1.15rem 0 1.5rem; font-size:clamp(2.7rem,5vw,4.6rem); line-height:1.02; letter-spacing:-.055em; font-weight:450; }
.lede { max-width:620px; margin:0; color:var(--secondary); font-size:clamp(1rem,1.6vw,1.22rem); line-height:1.6; }
.hero-actions { display:flex; align-items:center; gap:.4rem; margin-top:1.4rem; }
.hero-actions .text-button { min-height:auto; padding:.35rem 0; border-bottom:1px solid var(--line); border-radius:0; }
.hero-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:3rem 0 0; }
.hero-facts div { padding-top:1rem; border-top:1px solid var(--line); }
.hero-facts dt { font-size:1.25rem; letter-spacing:-.04em; }
.hero-facts dd { margin:.35rem 0 0; color:var(--muted); font-size:.74rem; line-height:1.4; }
.home-portrait { width:280px; margin:0; align-self:center; justify-self:end; }
.home-portrait img { width:100%; height:auto; object-fit:cover; object-position:center; border-radius:24px; filter:saturate(.88) contrast(1.03); }
.home-portrait figcaption,.about-photo figcaption { display:flex; justify-content:space-between; gap:1rem; margin-top:.75rem; color:var(--muted); font-size:.72rem; }

.featured,.home-story,.journey-section,.belief-section,.contact-band,.catalog { padding:5rem 0; border-bottom:1px solid var(--line); }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:2rem; margin-bottom:2.4rem; }
.section-heading h2 { max-width:720px; margin:.7rem 0 0; font-size:clamp(1.9rem,3.4vw,3.2rem); line-height:1.08; letter-spacing:-.045em; font-weight:450; }
.section-heading>a,.catalog-heading>a,.home-story a { color:var(--secondary); font-size:.86rem; white-space:nowrap; }
.section-heading>a:hover,.catalog-heading>a:hover,.home-story a:hover { color:var(--text); }
.featured-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; }
.featured-app { min-height:300px; position:relative; display:flex; flex-direction:column; justify-content:space-between; padding:1.5rem; border:1px solid var(--line); border-radius:22px; background:var(--surface); transition:transform .22s,border-color .22s,background .22s; }
.featured-app:hover { transform:translateY(-4px); border-color:#3c3c40; background:var(--surface-2); }
.featured-app img { width:74px; height:74px; border-radius:17px; box-shadow:0 16px 38px rgba(0,0,0,.35); }
.featured-app>div { margin-top:auto; padding-top:3rem; }
.featured-app h3 { margin:.45rem 0 .75rem; font-size:1.55rem; letter-spacing:-.04em; font-weight:500; }
.featured-app p { max-width:290px; margin:0; color:var(--muted); font-size:.86rem; line-height:1.55; }
.app-kicker { color:var(--secondary); font-size:.76rem; }
.card-arrow { position:absolute; right:1.4rem; top:1.4rem; color:var(--muted); }
.home-story { display:grid; grid-template-columns:180px 1fr; gap:3rem; }
.home-story h2 { max-width:760px; margin:0 0 1.4rem; font-size:clamp(2.1rem,3.8vw,3.6rem); line-height:1.06; letter-spacing:-.05em; font-weight:450; }
.home-story p { max-width:650px; margin:0 0 2rem; color:var(--secondary); font-size:1.05rem; line-height:1.7; }

.apps-hero { min-height:330px; display:grid; grid-template-columns:140px 1fr; gap:3rem; align-items:end; padding:4rem 0 4.5rem; border-bottom:1px solid var(--line); }
.apps-hero>div { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr); gap:3rem; align-items:end; }
.apps-hero h1 { margin:0; max-width:700px; font-size:clamp(2.7rem,4.8vw,4.4rem); line-height:1; letter-spacing:-.055em; font-weight:450; }
.apps-hero p:last-child { margin:0; color:var(--secondary); font-size:1rem; line-height:1.7; }
.catalog-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:2rem; }
.catalog-heading h2 { margin:0; font-size:1rem; font-weight:500; }
.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.project { min-height:132px; display:grid; grid-template-columns:78px minmax(0,1fr) auto; gap:1.2rem; align-items:center; position:relative; padding:1.25rem; border:1px solid var(--line); border-radius:22px; background:var(--surface); transition:transform .2s,border-color .2s,background .2s; }
.project:hover { transform:translateY(-3px); border-color:#3a3a3e; background:var(--surface-2); }
.project img { width:78px; height:78px; border-radius:18px; box-shadow:0 12px 30px rgba(0,0,0,.3); }
.project-copy { min-width:0; display:flex; flex-direction:column; }
.project-title { font-size:1rem; font-weight:500; letter-spacing:-.02em; }
.project-subtitle { margin-top:.2rem; color:var(--secondary); font-size:.8rem; }
.project-description { margin-top:.65rem; color:var(--muted); font-size:.76rem; line-height:1.45; }
.project .card-arrow { position:static; align-self:start; }

.about-hero { display:grid; grid-template-columns:270px minmax(0,1fr); gap:clamp(3rem,7vw,6rem); align-items:center; padding:5rem 0 6rem; border-bottom:1px solid var(--line); }
.about-photo { width:270px; margin:0; }
.about-photo img { width:100%; height:auto; object-fit:cover; object-position:center; border-radius:24px; filter:saturate(.9) contrast(1.03); }
.about-intro h1 { max-width:690px; margin:1rem 0 1.6rem; font-size:clamp(2.5rem,4.6vw,4.2rem); line-height:1.02; letter-spacing:-.055em; font-weight:450; }
.about-lead { max-width:660px; margin:0 0 1.2rem; color:var(--text) !important; font-size:clamp(1.1rem,1.8vw,1.4rem) !important; }
.about-intro>p:not(.overline) { max-width:660px; color:var(--secondary); line-height:1.7; font-size:1rem; }
.journey-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; }
.journey-grid article { min-height:260px; display:flex; flex-direction:column; padding:1.6rem; border:1px solid var(--line); border-radius:22px; background:var(--surface); }
.journey-grid span { color:var(--accent); font-size:.78rem; }
.journey-grid h3 { margin:auto 0 1rem; font-size:1.45rem; line-height:1.2; letter-spacing:-.035em; font-weight:450; }
.journey-grid p { margin:0; color:var(--secondary); font-size:.88rem; line-height:1.65; }
.belief-section { display:grid; grid-template-columns:180px 1fr; gap:3rem; }
.belief-section blockquote { max-width:760px; margin:0; font-size:clamp(1.7rem,2.8vw,2.6rem); line-height:1.25; letter-spacing:-.04em; font-weight:450; }
.contact-band { display:grid; grid-template-columns:1fr auto; gap:4rem; align-items:end; }
.contact-band h2 { max-width:650px; margin:.7rem 0 0; font-size:clamp(1.8rem,3vw,2.8rem); line-height:1.15; letter-spacing:-.04em; font-weight:450; }
.contact-actions { display:flex; align-items:center; justify-content:flex-end; gap:.9rem; flex-wrap:wrap; }
.contact-actions>a:not(.button) { color:var(--secondary); font-size:.84rem; }

.post-list { border-top:1px solid var(--line); }
.post-row { display:grid; grid-template-columns:1fr auto; gap:2rem; padding:1.5rem 0; border-bottom:1px solid var(--line); }
.post-row h3 { margin:0; font-size:1.15rem; font-weight:500; }
.post-row p { margin:.35rem 0 0; color:var(--secondary); font-size:.9rem; }
.post-row time { color:var(--muted); font-size:.8rem; white-space:nowrap; }
.site-footer { min-height:120px; display:flex; justify-content:space-between; align-items:center; gap:2rem; color:var(--muted); font-size:.78rem; }
.footer-links { display:flex; align-items:center; justify-content:flex-end; gap:1.3rem; flex-wrap:wrap; }
.site-footer a:hover { color:var(--text); }
.article-back { justify-self:center; color:var(--secondary); font-size:.88rem; }
.article-shell { max-width:760px; padding:7rem 0 10rem; }
.article-shell article>time { color:var(--muted); font-size:.82rem; }
.article-shell h1 { margin:1.5rem 0; font-size:clamp(3rem,7vw,5.8rem); line-height:1; letter-spacing:-.06em; font-weight:450; }
.article-excerpt { margin:0 0 4rem; color:var(--secondary); font-size:1.2rem; }
.article-body { color:#c2c2bf; line-height:1.8; }
.article-body p { margin:0 0 1.4rem; }
.article-body h2,.article-body h3 { margin:2.5rem 0 1rem; color:var(--text); line-height:1.2; letter-spacing:-.035em; font-weight:500; }
.article-body h2 { font-size:1.8rem; }
.article-body h3 { font-size:1.35rem; }
.article-body a { color:var(--text); border-bottom:1px solid var(--muted); }
.article-body img { width:auto; max-width:100%; height:auto; margin:2rem 0; border-radius:18px; }
.article-body blockquote { margin:2rem 0; padding-left:1.25rem; border-left:2px solid var(--line); color:var(--text); }
.article-body ul,.article-body ol { padding-left:1.4rem; }
.article-missing { padding:8rem 0; }

@media (max-width:900px) {
  .site-header { height:116px; grid-template-columns:1fr auto; align-content:center; row-gap:.75rem; }
  .site-nav { grid-column:1/-1; grid-row:2; justify-self:stretch; justify-content:center; max-width:100%; overflow:visible; }
  .home-hero,.about-hero { grid-template-columns:1fr; gap:3rem; padding-top:4rem; }
  .home-portrait,.about-photo { width:260px; max-width:100%; justify-self:start; }
  .featured-grid,.journey-grid { grid-template-columns:1fr; }
  .featured-app { min-height:260px; }
  .apps-hero { grid-template-columns:1fr; gap:1.5rem; }
  .apps-hero>div { grid-template-columns:1fr; }
  .project-grid { grid-template-columns:1fr; }
  .home-story,.belief-section { grid-template-columns:1fr; gap:2rem; }
  .contact-band { grid-template-columns:1fr; }
  .contact-actions { justify-content:flex-start; }
}

@media (max-width:560px) {
  .site-header,main,.site-footer { width:min(calc(100% - 2rem),var(--max)); }
  .site-header { height:112px; }
  .site-nav { width:100%; justify-content:space-between; gap:.15rem; }
  .site-nav a { padding:.52rem .62rem; font-size:.76rem; }
  .home-hero { min-height:auto; padding:4rem 0 5rem; }
  .wordmark-name { display:none; }
  .home-hero h1 { font-size:clamp(2.6rem,12vw,3.8rem); }
  .hero-actions { align-items:flex-start; flex-direction:column; }
  .hero-facts { grid-template-columns:1fr; gap:.6rem; margin-top:3rem; }
  .hero-facts div { display:grid; grid-template-columns:52px 1fr; align-items:center; }
  .hero-facts dd { margin:0; }
  .home-portrait img,.about-photo img { aspect-ratio:auto; }
  .featured,.home-story,.journey-section,.belief-section,.contact-band,.catalog { padding:5rem 0; }
  .section-heading { align-items:flex-start; flex-direction:column; }
  .featured-app { min-height:230px; }
  .apps-hero { min-height:auto; padding:4rem 0; }
  .apps-hero h1 { font-size:clamp(2.8rem,13vw,4.1rem); }
  .catalog-heading { align-items:flex-start; flex-direction:column; gap:1rem; }
  .project { grid-template-columns:64px minmax(0,1fr) auto; padding:1rem; }
  .project img { width:64px; height:64px; border-radius:15px; }
  .project-description { display:none; }
  .about-hero { min-height:auto; padding:4rem 0 5rem; }
  .about-photo { order:2; }
  .about-intro h1 { font-size:clamp(2.5rem,12vw,3.6rem); }
  .journey-grid article { min-height:260px; }
  .contact-actions { align-items:flex-start; flex-direction:column; }
  .site-footer { min-height:auto; align-items:flex-start; flex-direction:column; padding:2.5rem 0; }
  .footer-links { justify-content:flex-start; gap:1rem; }
}

@media (max-width:380px) {
  .site-nav a { padding:.48rem .4rem; font-size:.69rem; }
}

@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.featured-app,.project,.button{transition:none!important} }
