We craft
remarkable
digital things.

-- ═══════════════════════════════════════════════════════════
--  STUDIO NULL — A website, written entirely in PostgreSQL
--  Called live on every HTTP request by server.js
-- ═══════════════════════════════════════════════════════════

WITH

-- ─── STYLES ─────────────────────────────────────────────────
styles AS (
  SELECT $css$
    @import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Space+Mono:wght@400;700&display=swap');
    :root {
      --bg:      #0d0d10;
      --surface: #13131a;
      --fg:      #f0ede6;
      --muted:   #7a7870;
      --accent:  #c8a96e;
      --border:  rgba(200,169,110,0.18);
    }
    * { margin:0; padding:0; box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body { background:var(--bg); color:var(--fg);
           font-family:'EB Garamond',Georgia,serif;
           font-size:18px; line-height:1.6; }
    a { color:inherit; text-decoration:none; }

    nav { display:flex; justify-content:space-between; align-items:center;
          padding:1.8rem clamp(1.5rem,4vw,4rem); border-bottom:1px solid var(--border);
          position:sticky; top:0; background:rgba(13,13,16,0.92);
          backdrop-filter:blur(12px); z-index:100; }
    .logo { font-family:'Space Mono',monospace; font-size:.85rem;
            letter-spacing:.2em; color:var(--accent); }
    nav .links a { font-family:'Space Mono',monospace; font-size:.72rem;
                   letter-spacing:.15em; margin-left:2.4rem;
                   color:var(--muted); transition:color .2s; }
    nav .links a:hover { color:var(--fg); }

    .hero { min-height:90vh; display:flex; align-items:center;
            padding:6rem 4rem; position:relative; overflow:hidden; }
    .hero::before { content:''; position:absolute; top:-20%; right:-10%;
      width:55vw; height:55vw; border-radius:50%;
      background:radial-gradient(circle,rgba(200,169,110,.07) 0%,transparent 70%);
      pointer-events:none; }
    .eyebrow { font-family:'Space Mono',monospace; font-size:.72rem;
               letter-spacing:.25em; color:var(--accent);
               display:block; margin-bottom:2rem; }
    .hero h1 { font-size:clamp(3.5rem,7vw,7rem); font-weight:400;
               line-height:1.05; letter-spacing:-.02em; max-width:700px; }
    .hero h1 em { font-style:italic; color:var(--accent); }
    .hero p { font-size:1.25rem; color:var(--muted); margin:2rem 0 3rem; max-width:440px; }
    .cta { display:inline-block; font-family:'Space Mono',monospace;
           font-size:.75rem; letter-spacing:.15em; padding:.9rem 2rem;
           border:1px solid var(--accent); color:var(--accent); transition:all .25s; }
    .cta:hover { background:var(--accent); color:var(--bg); }

    .services { padding:7rem 4rem; border-top:1px solid var(--border); }
    .services h2 { font-family:'Space Mono',monospace; font-size:.72rem;
                   letter-spacing:.25em; color:var(--muted); margin-bottom:4rem; }
    .service-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; }
    .service-item { display:flex; gap:2rem; padding:2.5rem 2.5rem 2.5rem 0;
                    border-bottom:1px solid var(--border); }
    .service-item:nth-child(odd) { padding-right:4rem; border-right:1px solid var(--border); }
    .service-item:nth-child(even) { padding-left:3rem; }
    .service-item:nth-last-child(-n+2) { border-bottom:none; }
    .num { font-family:'Space Mono',monospace; font-size:.7rem;
           color:var(--accent); flex-shrink:0; padding-top:.35rem; }
    .service-item h3 { font-size:1.5rem; font-weight:400; margin-bottom:.6rem; }
    .service-item p { color:var(--muted); font-size:1rem; line-height:1.7; }

    .stats { display:grid; grid-template-columns:repeat(4,1fr);
             border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
    .stat { padding:3.5rem 2rem; border-right:1px solid var(--border);
            display:flex; flex-direction:column; gap:.5rem; }
    .stat:last-child { border-right:none; }
    .stat-val { font-size:3.5rem; font-weight:400; line-height:1; letter-spacing:-.03em; }
    .stat-label { font-family:'Space Mono',monospace; font-size:.65rem;
                  letter-spacing:.18em; color:var(--muted); text-transform:uppercase; }

    .contact { padding:9rem 4rem; text-align:center; position:relative; }
    .contact::before { content:''; position:absolute; bottom:-10%; left:50%;
      transform:translateX(-50%); width:40vw; height:40vw; border-radius:50%;
      background:radial-gradient(circle,rgba(200,169,110,.06) 0%,transparent 70%);
      pointer-events:none; }
    .contact h2 { font-size:clamp(2.5rem,5vw,5rem); font-weight:400;
                  letter-spacing:-.02em; margin-bottom:1.5rem; }
    .contact > p { color:var(--muted); font-size:1.15rem;
                   margin-bottom:3rem; line-height:1.8; }
    .email { font-family:'Space Mono',monospace; font-size:1.1rem;
             letter-spacing:.05em; color:var(--accent);
             border-bottom:1px solid var(--border); padding-bottom:.25rem;
             transition:border-color .2s; }
    .email:hover { border-color:var(--accent); }

    footer { display:flex; justify-content:space-between; align-items:center;
             padding:2rem 4rem; border-top:1px solid var(--border); }
    footer span { font-family:'Space Mono',monospace; font-size:.65rem;
                  letter-spacing:.12em; color:var(--muted); }
    .pg-badge { color:var(--accent) !important; }

    /* SQL source page */
    .sql-page { padding:4rem; max-width:900px; margin:0 auto; }
    .sql-page h1 { font-family:'Space Mono',monospace; font-size:.8rem;
                   letter-spacing:.2em; color:var(--accent); margin-bottom:2rem; }
    .sql-page pre { background:var(--surface); border:1px solid var(--border);
                    padding:2rem; border-radius:4px; overflow-x:auto;
                    font-size:.78rem; line-height:1.8; color:#bbb;
                    font-family:'Space Mono',monospace; white-space:pre-wrap;
                    word-break:break-word; }

    /* work / experiments section */
    .work { padding:7rem 4rem; border-top:1px solid var(--border); }
    .work h2 { font-family:'Space Mono',monospace; font-size:.72rem;
               letter-spacing:.25em; color:var(--muted); margin-bottom:4rem; }
    .work-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0;
                 border:1px solid var(--border); }
    .work-card {
      padding:3rem 3rem; border-right:1px solid var(--border);
      display:flex; flex-direction:column; gap:1rem;
      text-decoration:none; color:inherit;
      transition:background .25s;
    }
    .work-card:last-child { border-right:none; }
    .work-card:hover { background:var(--surface); }
    .work-tag { font-family:'Space Mono',monospace; font-size:.62rem;
                letter-spacing:.18em; color:var(--accent); text-transform:uppercase; }
    .work-title { font-size:2rem; font-weight:400; letter-spacing:-.01em;
                  line-height:1.15; }
    .work-title em { font-style:italic; }
    .work-desc { font-size:1rem; color:var(--muted); line-height:1.75; flex:1; }
    .work-link { font-family:'Space Mono',monospace; font-size:.65rem;
                 letter-spacing:.14em; color:var(--muted); align-self:flex-start;
                 border-bottom:1px solid var(--border); padding-bottom:.2rem;
                 transition:color .2s, border-color .2s; }
    .work-card:hover .work-link { color:var(--accent); border-color:var(--accent); }

    /* ── SQL TOGGLE PANEL ── */
    #sql-toggle-btn {
      font-family:'Space Mono',monospace; font-size:.72rem; letter-spacing:.15em;
      margin-left:2.4rem; color:var(--accent); background:none; border:none;
      cursor:pointer; padding:0; transition:opacity .2s;
    }
    #sql-toggle-btn:hover { opacity:.7; }
    #sql-panel {
      position:fixed; inset:0; z-index:999;
      background:var(--bg); display:flex; flex-direction:column;
      transform:translateY(100%); transition:transform .38s cubic-bezier(.4,0,.2,1);
      overflow:hidden;
    }
    #sql-panel.open { transform:translateY(0); }
    #sql-panel-header {
      display:flex; justify-content:space-between; align-items:center;
      padding:1.2rem 4rem; border-bottom:1px solid var(--border);
      background:rgba(13,13,16,.96); backdrop-filter:blur(12px);
      flex-shrink:0;
    }
    #sql-panel-filename {
      font-family:'Space Mono',monospace; font-size:.65rem;
      letter-spacing:.22em; color:var(--accent); text-transform:uppercase;
    }
    #sql-panel-close {
      font-family:'Space Mono',monospace; font-size:.65rem; letter-spacing:.14em;
      color:var(--muted); background:none; border:none; cursor:pointer;
      transition:color .2s;
    }
    #sql-panel-close:hover { color:var(--fg); }
    #sql-panel-body { flex:1; overflow-y:auto; padding:2.5rem 4rem 4rem; }
    #sql-panel-pre {
      font-family:'Space Mono',monospace; font-size:.72rem; line-height:1.85;
      white-space:pre-wrap; word-break:break-word; color:#bbb;
      background:none; border:none; padding:0; margin:0;
    }
    .sk { color:#c8a96e; font-weight:700; }
    .ss { color:#a8c97f; }
    .sc { color:#4a5060; font-style:italic; }
    .sn { color:#79b8e0; }

    /* ── MOBILE ── */
    @media (max-width: 768px) {
      nav { padding:1.2rem 1.5rem; }
      nav .links a { font-size:.6rem; letter-spacing:.08em; margin-left:1.2rem; }
      #sql-toggle-btn { font-size:.6rem; margin-left:1.2rem; }

      .hero { padding:4rem 1.5rem; min-height:80vh; }
      .hero h1 { font-size:clamp(2.8rem,10vw,4.5rem); }
      .hero p { font-size:1.1rem; }

      .services { padding:4rem 1.5rem; }
      .service-grid { grid-template-columns:1fr; }
      .service-item { padding:2rem 0 !important; border-right:none !important; }
      .service-item:nth-last-child(-n+2) { border-bottom:1px solid var(--border); }
      .service-item:last-child { border-bottom:none; }

      .stats { grid-template-columns:1fr 1fr; }
      .stat { padding:2.2rem 1.5rem; border-right:none !important;
              border-bottom:1px solid var(--border); }
      .stat:nth-child(odd) { border-right:1px solid var(--border) !important; }
      .stat:nth-last-child(-n+2) { border-bottom:none; }
      .stat-val { font-size:2.8rem; }

      .work { padding:4rem 1.5rem; }
      .work-grid { grid-template-columns:1fr; }
      .work-card { border-right:none !important; border-bottom:1px solid var(--border); }
      .work-card:last-child { border-bottom:none; }

      .contact { padding:5rem 1.5rem; }

      footer { padding:1.5rem; flex-direction:column; gap:.8rem; text-align:center; }

      #sql-panel-header { padding:1rem 1.5rem; }
      #sql-panel-body { padding:1.5rem; }
      #sql-panel-pre { font-size:.62rem; }
    }

    @media (max-width: 480px) {
      nav .links a:not(:last-child) { display:none; }
      #sql-toggle-btn { margin-left:.8rem; }
    }
  $css$ AS css
),

-- ─── NAVIGATION ─────────────────────────────────────────────
nav AS (
  SELECT
    '<nav>'
      '<div class="logo">STUDIO NULL</div>'
      '<div class="links">'
        '<a href="#work">Experiments</a>'
        '<a href="#services">Services</a>'
        '<a href="#contact">Contact</a>'
        '<button id="sql-toggle-btn" onclick="toggleSQL()">[ sql ]</button>'
      '</div>'
    '</nav>'
  AS html
),

-- ─── HERO ───────────────────────────────────────────────────
hero AS (
  SELECT format(
    '<section class="hero">'
      '<div>'
        '<span class="eyebrow">Est. %s — Denver, CO</span>'
        '<h1>We craft<br><em>remarkable</em><br>digital things.</h1>'
        '<p>A small studio doing precise work<br>for ambitious clients worldwide.</p>'
        '<a href="#contact" class="cta">Begin a conversation →</a>'
      '</div>'
    '</section>',
    extract(year from now())::int
  ) AS html
),

-- ─── SERVICES ───────────────────────────────────────────────
service_data AS (
  SELECT *
  FROM (VALUES
    ('01', 'Brand Identity',   'Marks, systems, and the visual language that makes you unmistakable.'),
    ('02', 'Web Design',       'Considered interfaces built to perform and endure the test of time.'),
    ('03', 'Development',      'Fast, accessible, maintainable code — only what the project needs.'),
    ('04', 'Creative Direction','Strategic vision that unifies your work across every touchpoint.')
  ) AS t(num, name, description)
),
services AS (
  SELECT
    '<section class="services" id="services">'
      '<h2>— Services</h2>'
      '<div class="service-grid">' ||
    string_agg(
      '<div class="service-item">'
        '<span class="num">' || num || '</span>'
        '<div><h3>' || name || '</h3><p>' || description || '</p></div>'
      '</div>',
      ''
      ORDER BY num
    ) ||
    '</div></section>'
  AS html
  FROM service_data
),

-- ─── EXPERIMENTS / WORK ─────────────────────────────────────
work_data AS (
  SELECT * FROM (VALUES
    ('/chronolith',  'Chronolith',         'A typographic time installation.',
     'One SQL query computes the current moment — moon phase via epoch arithmetic, Unix timestamp, days until Y2K38. Every number is a live SQL expression. No JavaScript.',
     'Open →'),
    ('/guestbook',   'The Guestbook',      'A SQL-rendered memory.',
     'Sign your name. PostgreSQL stores it. SQL renders the full roll on every request. A record in the oldest sense.',
     'Sign →'),
    ('/write',       'Dead Letter Office', 'Write something that goes nowhere.',
     'Letters stored permanently in a database. Never delivered. No one will read them. Some things need to be said without needing to arrive.',
     'Write →'),
    ('/reckoning',   'Dead Reckoning',     'How much time remains.',
     'Enter a birth year. SQL computes your age, days lived, estimated time remaining against an actuarial table, heartbeats elapsed, and the statistical year of your death.',
     'Reckon →'),
    ('/oracle',      'The Oracle',         'A conversation with the site itself.',
     'Ask anything. The response streams live from an LLM with full knowledge of this site''s SQL source. Every exchange stored in PostgreSQL and rendered by the database.',
     'Ask →'),
    ('/reactor',     'The Reactor',        'Chemistry on the GPU.',
     'Gray-Scott reaction-diffusion running entirely in WebGPU compute shaders. The initial conditions are seeded by the current timestamp. Every load grows a different organism.',
     'Open →')
  ) AS t(href, title, subtitle, description, cta)
),
work AS (
  SELECT
    '<section class="work" id="work">'
    || '<h2>— Experiments</h2>'
    || '<div class="work-grid">'
    || string_agg(
         '<a href="' || href || '" class="work-card">'
         || '<span class="work-tag">' || subtitle || '</span>'
         || '<div class="work-title">' || title || '</div>'
         || '<p class="work-desc">' || description || '</p>'
         || '<span class="work-link">' || cta || '</span>'
         || '</a>',
         '' ORDER BY href
       )
    || '</div></section>'
  AS html
  FROM work_data
),

-- ─── STATS ──────────────────────────────────────────────────
stat_data AS (
  SELECT *
  FROM (VALUES
    ('47', 'Projects shipped'),
    ('8',  'Years in practice'),
    ('∞',  'Care applied'),
    ('1',  'Studio, no fluff')
  ) AS t(val, label)
),
stats AS (
  SELECT
    '<section class="stats">' ||
    string_agg(
      '<div class="stat">'
        '<span class="stat-val">' || val || '</span>'
        '<span class="stat-label">' || label || '</span>'
      '</div>',
      ''
    ) ||
    '</section>'
  AS html
  FROM stat_data
),

-- ─── CONTACT ────────────────────────────────────────────────
contact AS (
  SELECT
    '<section class="contact" id="contact">'
      '<h2>Let''s make<br>something.</h2>'
      '<p>We take on a small number of<br>new clients each quarter.</p>'
      '<a href="mailto:hello@studionull.io" class="email">hello@studionull.io</a>'
    '</section>'
  AS html
),

-- ─── FOOTER — live data from Postgres itself ─────────────────
footer AS (
  SELECT format(
    '<footer>'
      '<span>© %s Studio Null — All rights reserved</span>'
      '<span class="pg-badge">⚡ Generated live by PostgreSQL %s in %sms</span>'
    '</footer>',
    extract(year from now())::int,
    current_setting('server_version'),
    -- query_start_ms placeholder — server.js injects actual timing
    '__QUERY_MS__'
  ) AS html
),

-- ─── ASSEMBLE ────────────────────────────────────────────────
page AS (
  SELECT
    '<!DOCTYPE html>'
    '<html lang="en">'
    '<head>'
      '<meta charset="UTF-8">'
      '<meta name="viewport" content="width=device-width,initial-scale=1.0">'
      '<title>Studio Null</title>'
      '<link rel="icon" type="image/svg+xml" href="/favicon.svg">'
      '<style>' || styles.css || '</style>'
    '</head>'
    '<body>'
    || nav.html
    || hero.html
    || work.html
    || services.html
    || stats.html
    || contact.html
    || footer.html
    || '__SQL_PANEL__'
    || '</body></html>'
  AS html
  FROM styles, nav, hero, work, services, stats, contact, footer
)

SELECT html FROM page;