:root {
    --bg: #efede8;
    --bg-2: #e7e4dd;
    --ink: #111111;
    --ink-2: #4a4945;
    --ink-3: #67645e;
    --line: #d5d1c8;
    --card: #1b1b1a;
    --accent: #3b5bff;
    --display: "Archivo", system-ui, sans-serif;
    --serif: "Instrument Serif", Georgia, serif;
    --mono: "JetBrains Mono", ui-monospace, monospace;
    --gutter: clamp(16px, 4vw, 48px);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #121211; --bg-2: #191918; --ink: #f1efea; --ink-2: #b7b4ac;
      --ink-3: #8f8b83; --line: #2c2b29; --card: #0a0a0a; --accent: #7d93ff;
    }
  }
  :root[data-theme="dark"] {
    --bg: #121211; --bg-2: #191918; --ink: #f1efea; --ink-2: #b7b4ac;
    --ink-3: #8f8b83; --line: #2c2b29; --card: #0a0a0a; --accent: #7d93ff;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--bg); color: var(--ink);
    font-family: var(--display); font-stretch: 100%;
    -webkit-font-smoothing: antialiased; overflow-x: hidden;
    transition: background .3s, color .3s;
  }
  a { color: inherit; text-decoration: none; }
  em { font-family: var(--serif); font-style: italic; font-weight: 400; font-stretch: 100%; letter-spacing: -0.01em; }
  .mono { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }

  /* ---------- intro loader ---------- */
  .loader {
    position: fixed; inset: 0; z-index: 100; background: var(--bg);
    display: grid; place-items: center;
    animation: loaderOut .6s ease 1.1s forwards;
  }
  .loader svg { width: 72px; animation: pop .9s cubic-bezier(.2,.9,.2,1) both; }
  @keyframes pop { from { transform: scale(.4) rotate(-20deg); opacity: 0 } to { transform: none; opacity: 1 } }
  @keyframes loaderOut { to { opacity: 0; visibility: hidden } }

  /* ---------- nav ---------- */
  .nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    height: 56px; display: flex; align-items: stretch;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);
  }
  .nav .logo { width: 56px; display: grid; place-items: center; border-right: 1px solid var(--line); }
  .nav .logo svg { width: 26px; }
  .nav ul { list-style: none; display: flex; align-items: center; gap: 4px; padding: 0 12px; }
  .nav ul a { padding: 6px 10px; border-radius: 2px; color: var(--ink-2); transition: .2s; }
  .nav ul a:hover { color: var(--ink); }
  .nav ul a.active { background: var(--ink); color: var(--bg); }
  .nav .spacer { flex: 1; }
  .nav .icon-btn {
    width: 56px; display: grid; place-items: center; border-left: 1px solid var(--line);
    background: none; border-top: 0; border-bottom: 0; border-right: 0; color: var(--ink); cursor: pointer;
  }
  .nav .icon-btn svg { width: 16px; }
  .nav .cta { display: grid; place-items: center; padding: 0 22px; background: var(--ink); color: var(--bg); }
  .nav .cta:hover { opacity: .85; }

  /* ---------- side ruler ---------- */
  .ruler {
    position: fixed; right: 0; top: 56px; bottom: 0; width: 22px; z-index: 40;
    border-left: 1px solid var(--line);
    background-image: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 12px);
    background-size: 8px 100%; background-repeat: repeat-y; background-position: right;
  }
  .ruler .bar { position: absolute; right: 0; top: 0; width: 22px; height: 2px; background: var(--accent); }
  .ruler .pct { position: absolute; right: 26px; font-family: var(--mono); font-size: 9px; color: var(--accent); transform: translateY(-50%); }
  .index {
    position: fixed; right: 40px; bottom: 28px; z-index: 40; text-align: right;
    font-stretch: 125%; font-weight: 700; font-size: 13px; line-height: 1.1; text-transform: uppercase;
    pointer-events: none;
  }
  .index a { display: block; color: var(--ink-3); transition: .3s; pointer-events: auto; }
  .index a.on { color: var(--ink); font-size: 26px; }

  /* ---------- layout ---------- */
  main { padding-right: 22px; }
  main:focus { outline: none; }
  section { position: relative; border-bottom: 1px solid var(--line); }
  .sec-head {
    display: flex; justify-content: space-between; padding: 14px var(--gutter);
    border-bottom: 1px solid var(--line); color: var(--ink-3);
  }
  .wrap { padding: clamp(56px, 9vw, 120px) var(--gutter); }
  h2 {
    font-stretch: 125%; font-weight: 800; font-size: clamp(38px, 6.4vw, 92px);
    line-height: .98; letter-spacing: -0.03em;
  }
  h2 em { font-size: 1.08em; }
  .lead { max-width: 560px; margin-top: 24px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }

  .btn {
    display: inline-flex; align-items: center; gap: 10px; padding: 15px 22px;
    font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    border: 1px solid var(--ink); transition: transform .2s, box-shadow .2s;
  }
  .btn svg { width: 14px; }
  .btn.solid { background: var(--ink); color: var(--bg); }
  .btn:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--ink); }

  /* ---------- hero ---------- */
  .hero {
    min-height: 100svh; padding: 120px var(--gutter) 80px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center; overflow: hidden;
  }
  #vortex {
    position: absolute; inset: 0; width: 100%; height: 100%; display: block;
    opacity: 0; animation: fadeIn 1.6s ease 1.2s forwards;
  }
  @keyframes fadeIn { to { opacity: 1 } }
  /* Static hero for devices that skip the 3D vortex */
  .hero.static #vortex { display: none; }
  .hero.static {
    background:
      radial-gradient(closest-side, var(--bg) 30%, transparent 100%) center / 70% 70% no-repeat,
      repeating-radial-gradient(circle at 50% 50%, transparent 0 58px, var(--line) 59px 60px);
  }
  .hero-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; pointer-events: none; will-change: transform; }
  .hero-inner a { pointer-events: auto; }
  .hero-inner::before {
    content: ""; position: absolute; inset: -90px -140px; z-index: -1;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--bg) 90%, transparent), transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    mask-image: radial-gradient(closest-side, #000 45%, transparent 100%);
    -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent 100%);
  }
  .hero-inner > :not(.wordmark) { opacity: 0; animation: up .9s cubic-bezier(.2,.9,.2,1) forwards; }
  .hero-inner > h1 { animation-delay: 1.9s } .hero-inner > p { animation-delay: 2.0s }
  .hero-inner > .actions { animation-delay: 2.1s } .hero-inner > .meta { animation-delay: 2.2s }
  @keyframes up { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }
  .wordmark {
    font-stretch: 125%; font-weight: 900; font-size: clamp(54px, 13.5vw, 210px);
    letter-spacing: -0.045em; line-height: .9; display: flex; align-items: center; gap: .04em;
  }
  .wordmark svg { height: .74em; width: auto; flex: none; }
  .wordmark svg, .wordmark span { display: inline-block; animation: rise 1s cubic-bezier(.2,.9,.2,1) 1.1s both; }
  .wordmark span { animation-delay: 1.18s; }
  @keyframes rise { from { transform: translateY(40%); opacity: 0 } to { transform: none; opacity: 1 } }
  .hero h1 { margin-top: 28px; font-weight: 700; font-size: clamp(24px, 3.4vw, 40px); letter-spacing: -0.02em; }
  .hero p { max-width: 520px; margin: 18px auto 0; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
  .hero .actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 36px; }
  .hero .meta { margin-top: 40px; color: var(--ink-3); display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

  /* ---------- marquee ---------- */
  .marquee { overflow: hidden; border-bottom: 1px solid var(--line); background: var(--ink); color: var(--bg); }
  .marquee .track { display: flex; width: max-content; animation: scroll 40s linear infinite; }
  .marquee span { padding: 16px 22px; font-stretch: 125%; font-weight: 700; font-size: 15px; letter-spacing: .04em; white-space: nowrap; }
  .marquee span::after { content: "▪"; margin-left: 44px; color: var(--accent); }
  @keyframes scroll { to { transform: translateX(-50%) } }

  /* ---------- feature grid ---------- */
  .grid { display: grid; grid-template-columns: repeat(2, 1fr); }
  .card { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; }
  .card:nth-child(2n) { border-right: 0; }
  .card .label { display: flex; justify-content: space-between; padding: 12px 20px; color: var(--ink-3); border-bottom: 1px solid var(--line); }
  .card .visual { aspect-ratio: 16/9; background: var(--card); position: relative; overflow: hidden; }
  .card .body { padding: 28px 24px 36px; }
  .card h3 { font-weight: 700; font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.02em; }
  .card p { margin-top: 10px; line-height: 1.6; color: var(--ink-2); max-width: 480px; }
  .visual svg { position: absolute; inset: 0; width: 100%; height: 100%; }

  /* visual animations */
  .pulse { animation: pulse 2.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
  .pulse.d1 { animation-delay: .4s } .pulse.d2 { animation-delay: .8s } .pulse.d3 { animation-delay: 1.2s }
  @keyframes pulse { 0%,100% { opacity: .35 } 50% { opacity: 1 } }
  .dash { stroke-dasharray: 6 8; animation: dash 1.6s linear infinite; }
  @keyframes dash { to { stroke-dashoffset: -28 } }
  .bar-grow { animation: grow 3s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: bottom; }
  @keyframes grow { from { transform: scaleY(.35) } to { transform: scaleY(1) } }
  .type::after { content: "▌"; animation: blink 1s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0 } }

  /* ---------- three columns ---------- */
  .tri { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
  .tri > div { padding: 22px var(--gutter) 48px 24px; border-right: 1px solid var(--line); }
  .tri > div:first-child { padding-left: var(--gutter); }
  .tri > div:last-child { border-right: 0; }
  .tri .mono { color: var(--ink-3); }
  .tri h3 { margin-top: 40px; font-weight: 700; font-size: 24px; letter-spacing: -0.02em; }
  .tri p { margin-top: 10px; line-height: 1.6; color: var(--ink-2); }

  /* ---------- stats ---------- */
  .stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
  .stats > div { padding: 36px 24px; border-right: 1px solid var(--line); }
  .stats > div:first-child { padding-left: var(--gutter); }
  .stats > div:last-child { border-right: 0; }
  .stats b { display: block; font-stretch: 125%; font-weight: 800; font-size: clamp(36px, 4.6vw, 64px); letter-spacing: -0.03em; }
  .stats span { color: var(--ink-3); }

  .process b { font-size: clamp(22px, 2.3vw, 30px); letter-spacing: -0.02em; margin: 14px 0 10px; }
  .process p { color: var(--ink-2); line-height: 1.55; font-size: 15px; }
  .process span { color: var(--ink-3); }

  /* ---------- apps ---------- */
  .apps { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); }
  .app { border-right: 1px solid var(--line); display: flex; flex-direction: column; }
  .app:last-child { border-right: 0; }
  .app .visual { aspect-ratio: 4/3; position: relative; overflow: hidden; background: var(--card); }
  .app .body { padding: 28px 24px 40px; flex: 1; display: flex; flex-direction: column; }
  .app h3 { font-stretch: 125%; font-weight: 800; font-size: clamp(22px, 2.6vw, 34px); letter-spacing: -0.03em; }
  .app .tag { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--ink-2); margin-top: 4px; }
  .app p { margin-top: 14px; line-height: 1.6; color: var(--ink-2); max-width: 520px; }
  .chips { display: flex; gap: 6px; margin: 20px 0 28px; flex-wrap: wrap; }
  .chips span { border: 1px solid var(--line); padding: 5px 9px; color: var(--ink-2); }
  .app .btn { align-self: flex-start; margin-top: auto; }
  .play {
    position: absolute; left: 14px; bottom: 14px; background: rgba(0,0,0,.65); color: #fff;
    padding: 7px 11px; display: flex; gap: 8px; align-items: center; backdrop-filter: blur(6px);
  }

  /* ---------- CTA ---------- */
  .cta-sec { text-align: center; }
  .cta-sec .mono { color: var(--ink-3); }
  .cta-sec h2 { margin-top: 18px; }
  .cta-sec .lead { margin: 22px auto 0; }
  .cta-sec .actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 36px; }

  /* ---------- footer ---------- */
  footer { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); padding-right: 22px; }
  footer > div { padding: 40px 24px 56px; border-right: 1px solid var(--line); }
  footer > div:first-child { padding-left: var(--gutter); }
  footer > div:last-child { border-right: 0; }
  footer svg { width: 32px; }
  footer .about p { margin-top: 18px; line-height: 1.6; max-width: 280px; }
  footer .about .mono { margin-top: 20px; color: var(--ink-3); text-transform: none; letter-spacing: .04em; }
  footer h4 { color: var(--ink-3); margin-bottom: 18px; font-weight: 400; }
  footer li { list-style: none; margin-bottom: 10px; }
  footer li a { color: var(--ink-2); } footer li a:hover { color: var(--ink); }
  .bottom { display: flex; justify-content: space-between; padding: 16px var(--gutter); padding-right: calc(var(--gutter) + 22px); border-top: 1px solid var(--line); color: var(--ink-3); gap: 12px; flex-wrap: wrap; }

  /* reveal on scroll */
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s, transform .8s cubic-bezier(.2,.9,.2,1); }
  .reveal.in { opacity: 1; transform: none; }

  /* ---------- responsive ---------- */
  @media (max-width: 1000px) {
    .nav ul { display: none; }
    .index { display: none; }
    .tri, .stats { grid-template-columns: 1fr 1fr; }
    .tri > div:nth-child(2) { border-right: 0; }
    .tri > div, .tri > div:first-child { padding-left: var(--gutter); border-bottom: 1px solid var(--line); }
    .stats > div:nth-child(2) { border-right: 0; }
    .stats > div { border-bottom: 1px solid var(--line); padding-left: var(--gutter); }
    footer { grid-template-columns: 1fr 1fr; }
    footer > div { border-bottom: 1px solid var(--line); padding-left: var(--gutter); }
  }
  @media (max-width: 700px) {
    main, footer { padding-right: 0; }
    .ruler { display: none; }
    .bottom { padding-right: var(--gutter); }
    .grid, .apps, .tri { grid-template-columns: 1fr; }
    .card, .app { border-right: 0; }
    .app { border-bottom: 1px solid var(--line); }
    .tri > div { border-right: 0; }
    .nav .cta { padding: 0 14px; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .reveal { opacity: 1; transform: none; }
    .loader { display: none; }
  }

  /* =====================================================================
     Inner pages (apps, blog, posts, app viewer, 404)
     ===================================================================== */
  body:not(.home) main, body:not(.home) footer { padding-right: 0; }
  body:not(.home) .bottom { padding-right: var(--gutter); }
  body:not(.home) .ruler, body:not(.home) .index { display: none; }

  .page-head {
    padding: calc(56px + clamp(48px, 8vw, 110px)) var(--gutter) clamp(44px, 6vw, 80px);
    border-bottom: 1px solid var(--line);
  }
  .crumb { color: var(--ink-3); display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
  .crumb a:hover { color: var(--ink); }
  .page-head h1 {
    font-stretch: 125%; font-weight: 800; font-size: clamp(40px, 7vw, 104px);
    line-height: .96; letter-spacing: -0.035em;
  }
  .page-head h1 em { font-size: 1.08em; }

  /* blog index */
  .filters { display: flex; gap: 6px; flex-wrap: wrap; padding: 16px var(--gutter); border-bottom: 1px solid var(--line); }
  .filters button {
    font: inherit; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    padding: 7px 11px; border: 1px solid var(--line); background: none; color: var(--ink-2); cursor: pointer;
  }
  .filters button:hover { color: var(--ink); border-color: var(--ink-3); }
  .filters button.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .posts { display: grid; grid-template-columns: repeat(3, 1fr); }
  .post-card { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; }
  .post-card:nth-child(3n) { border-right: 0; }
  .post-card .label { display: flex; justify-content: space-between; padding: 12px 20px; color: var(--ink-3); border-bottom: 1px solid var(--line); }
  .post-card .thumb { aspect-ratio: 16/9; overflow: hidden; background: var(--card); }
  .post-card .thumb img, .post-card .thumb svg { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.9,.2,1); }
  .post-card:hover .thumb img, .post-card:hover .thumb svg { transform: scale(1.04); }
  .post-card .body { padding: 24px 22px 32px; display: flex; flex-direction: column; flex: 1; }
  .post-card h3 { font-weight: 700; font-size: 21px; line-height: 1.25; letter-spacing: -0.015em; }
  .post-card p { margin-top: 10px; line-height: 1.6; color: var(--ink-2); }
  .post-card .more { margin-top: auto; padding-top: 22px; color: var(--ink); }
  .post-card.feature { grid-column: span 3; flex-direction: row; border-right: 0; }
  .post-card.feature .label { display: none; }
  .post-card.feature .thumb { flex: 1.3; aspect-ratio: auto; min-height: 340px; }
  .post-card.feature .body { flex: 1; padding: clamp(28px, 4vw, 56px); justify-content: center; }
  .post-card.feature .kicker { color: var(--ink-3); margin-bottom: 18px; }
  .post-card.feature h3 { font-stretch: 125%; font-weight: 800; font-size: clamp(26px, 3vw, 42px); letter-spacing: -0.03em; line-height: 1.05; }
  .post-card.feature p { font-size: 17px; }
  .post-card.feature .more { flex: 0; }
  .post-card[hidden] { display: none; }

  /* home "latest posts" strip reuses .posts */
  .see-all { display: flex; justify-content: flex-end; padding: 18px var(--gutter); }

  /* article */
  .article-hero { aspect-ratio: 21/8; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--card); }
  .article-hero img, .article-hero svg { width: 100%; height: 100%; object-fit: cover; display: block; }
  .article-meta { display: flex; gap: 22px; flex-wrap: wrap; color: var(--ink-3); margin-top: 28px; }
  .article-meta b { color: var(--ink); font-weight: 500; }
  .article-head h1 { font-size: clamp(34px, 5.2vw, 76px); max-width: 1100px; }
  .prose { max-width: 720px; margin: 0 auto; padding: clamp(48px, 7vw, 96px) var(--gutter); }
  .prose p { font-size: 18px; line-height: 1.75; color: var(--ink-2); margin-bottom: 1.25em; }
  .prose p:first-child { font-size: 21px; line-height: 1.6; color: var(--ink); }
  .prose h2 { font-stretch: 112%; font-weight: 800; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.02em; line-height: 1.15; margin: 1.8em 0 .6em; }
  .prose h3 { font-weight: 700; font-size: 21px; letter-spacing: -0.01em; margin: 1.6em 0 .5em; }
  .pager { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
  .pager a { padding: 28px var(--gutter) 36px; border-right: 1px solid var(--line); transition: background .2s; }
  .pager > :last-child { border-right: 0; text-align: right; }
  .pager > span:first-child { border-right: 1px solid var(--line); }
  .pager a:hover { background: var(--bg-2); }
  .pager .mono { color: var(--ink-3); display: block; margin-bottom: 10px; }
  .pager b { font-weight: 700; font-size: 19px; line-height: 1.3; }

  /* app pages */
  .app-detail { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
  .app-detail .visual { background: var(--card); min-height: 420px; overflow: hidden; }
  .app-detail .visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .viewer { display: flex; flex-direction: column; height: calc(100svh - 56px); margin-top: 56px; }
  .viewer .bar {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 10px var(--gutter); border-bottom: 1px solid var(--line); color: var(--ink-3);
  }
  .viewer .bar a:hover { color: var(--ink); }
  .viewer iframe { flex: 1; width: 100%; border: 0; background: #fff; }

  /* contact */
  .contact { display: grid; grid-template-columns: 1.5fr 1fr; border-bottom: 1px solid var(--line); }
  .contact-form { padding: clamp(32px, 5vw, 64px) var(--gutter); border-right: 1px solid var(--line); display: grid; gap: 18px; }
  .contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .contact-form label { display: grid; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
  .contact-form label span { text-transform: none; letter-spacing: 0; }
  .contact-form input, .contact-form select, .contact-form textarea {
    font: 16px/1.5 var(--display); color: var(--ink); background: var(--bg); text-transform: none; letter-spacing: 0;
    border: 1px solid var(--line); padding: 12px 14px; border-radius: 0; width: 100%;
  }
  .contact-form textarea { resize: vertical; min-height: 150px; }
  .contact-form :is(input, select, textarea):focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
  .contact-form .btn { justify-self: start; cursor: pointer; }
  .contact-form .btn:disabled { opacity: .6; cursor: wait; }
  .contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .notice { padding: 14px 16px; border: 1px solid var(--line); font-size: 15px; }
  .notice.ok { border-color: #2f9e62; background: color-mix(in srgb, #2f9e62 10%, var(--bg)); }
  .notice.err { border-color: #d0453a; background: color-mix(in srgb, #d0453a 10%, var(--bg)); }
  .contact-aside { padding: clamp(32px, 5vw, 64px) var(--gutter); display: grid; gap: 32px; align-content: start; }
  .contact-aside .mono { display: block; color: var(--ink-3); margin-bottom: 8px; }
  .contact-aside a { font-weight: 700; font-size: 19px; }
  .contact-aside p, .contact-aside li { color: var(--ink-2); line-height: 1.6; }
  .contact-aside ol { padding-left: 20px; display: grid; gap: 6px; }

  /* 404 */
  .notfound { min-height: 80svh; display: grid; place-items: center; text-align: center; padding: 120px var(--gutter) 80px; }
  .notfound .big { font-stretch: 125%; font-weight: 900; font-size: clamp(90px, 22vw, 300px); line-height: .85; letter-spacing: -0.05em; }

  @media (max-width: 1000px) {
    .posts { grid-template-columns: 1fr 1fr; }
    .post-card:nth-child(3n) { border-right: 1px solid var(--line); }
    .post-card:nth-child(2n) { border-right: 0; }
    .post-card.feature { grid-column: span 2; }
  }
  @media (max-width: 700px) {
    .posts, .app-detail, .pager, .contact, .contact-form .row { grid-template-columns: 1fr; }
    .contact-form { border-right: 0; border-bottom: 1px solid var(--line); }
    .post-card, .post-card:nth-child(3n) { border-right: 0; }
    .post-card.feature { grid-column: span 1; flex-direction: column; }
    .post-card.feature .thumb { min-height: 0; aspect-ratio: 16/9; flex: none; }
    .app-detail .visual { min-height: 0; aspect-ratio: 1; }
    .pager a { border-right: 0; border-bottom: 1px solid var(--line); }
    .pager a:last-child { text-align: left; }
  }