/* Oxblood palette — light = cream bg (visually light), dark = oxblood bg (visually dark) */
:root[data-theme="light"]{--paper:#f4ecd8;--ink:#4a1414;--muted:#8a4040;--line:#4a1414;--soft:#e8dec0;--accent:#8a4a14;--panel:#ebe2cc}
:root[data-theme="dark"]{--paper:#4a1414;--ink:#f4ecd8;--muted:#c4b8a0;--line:#853232;--soft:#5a1818;--accent:#d4a44e;--panel:#3d1010}

/* Quiet Rail layout */
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink)}
body{font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

.main{min-height:calc(100svh - 100px);padding:clamp(22px,4vw,52px);padding-bottom:0;display:grid;grid-template-columns:minmax(360px,.58fr) minmax(280px,.42fr);gap:clamp(24px,5vw,52px) clamp(36px,7vw,92px);align-content:center}

/* Controls */
.site-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:clamp(16px,3vw,24px) clamp(22px,4vw,52px);border-bottom:1px solid color-mix(in srgb,var(--line),transparent 70%)}
.brand{position:relative;font-weight:700;font-size:1.02rem;padding-bottom:8px}
.brand::before{content:"/";color:var(--accent);margin-right:9px;font-weight:800}
.nav{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.nav a{position:relative;font-size:.85rem;color:var(--muted);padding:8px 14px;padding-bottom:8px;border:1px solid transparent;transition:color .15s}
.nav a:hover{color:var(--ink)}
.nav a.active{color:var(--accent)}
.brand::after{content:"";position:absolute;left:0;right:-10px;bottom:1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .24s ease}
.nav a::after{content:"";position:absolute;left:5px;right:5px;bottom:1px;height:1.5px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .24s ease}
.brand:hover::after,.brand.active::after,.nav a:hover::after,.nav a.active::after{transform:scaleX(1)}
.controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.js-theme{font-family:inherit;font-size:.8rem;background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:0;padding:7px 14px;cursor:pointer;transition:background .18s,color .18s}
.js-theme::after{content:"Dark"}
:root[data-theme="light"] .js-theme::after{content:"Light"}
.js-theme:hover{background:var(--accent);border-color:var(--accent);color:#fff}

/* Subpage layout — prose-focused single column */
.page{max-width:760px;margin:0 auto;padding:clamp(48px,7vw,96px) clamp(22px,4vw,52px) clamp(64px,9vw,120px)}
.page-kicker{display:inline-block;border:1px solid var(--line);padding:8px 12px;margin-bottom:clamp(32px,5vw,56px);font-size:.82rem;font-weight:700;line-height:1.05;color:var(--muted)}
.page-title{margin:0 0 clamp(28px,4vw,44px);font-family:Georgia,serif;font-size:clamp(2.4rem,6vw,4rem);font-weight:400;letter-spacing:-.035em;line-height:.95;text-wrap:balance}
.page-lede{margin:0 0 clamp(40px,6vw,64px);font-family:Georgia,serif;font-size:clamp(1.1rem,1.7vw,1.32rem);line-height:1.5;color:var(--muted);max-width:62ch}
.prose{font-family:Georgia,serif;font-size:clamp(1rem,1.4vw,1.12rem);line-height:1.65;color:var(--ink);max-width:62ch}
.prose p{margin:0 0 1.4em}
.prose h2{font-family:Arial,Helvetica,sans-serif;font-size:1.1rem;font-weight:700;letter-spacing:.02em;margin:2.4em 0 .8em;color:var(--accent);text-transform:uppercase}
.prose h2::before{content:"§ "}
.prose strong{color:var(--ink);font-weight:700}
.prose em{color:var(--muted);font-style:italic}
.prose blockquote{margin:1.8em 0;padding:0 0 0 20px;border-left:2px solid var(--accent);font-style:italic;color:var(--muted)}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* Practice project entries */
.proj-list{display:flex;flex-direction:column;gap:0;border-top:1px solid color-mix(in srgb,var(--line),transparent 60%)}
.proj-entry{padding:clamp(28px,4vw,44px) 0;border-bottom:1px solid color-mix(in srgb,var(--line),transparent 60%);display:grid;grid-template-columns:1fr 2fr;gap:clamp(20px,3vw,36px);align-items:start}
.proj-entry:last-child{border-bottom:0}
.proj-name{font-family:Georgia,serif;font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:400;line-height:1.1;color:var(--ink)}
.proj-tag{display:block;margin-top:8px;font-family:Arial,Helvetica,sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.proj-body{font-family:Georgia,serif;font-size:clamp(.98rem,1.3vw,1.08rem);line-height:1.6;color:var(--muted)}
.proj-body p{margin:0 0 1em}
.proj-body p:last-child{margin-bottom:0}

/* Contact list */
.contact-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;border-top:1px solid color-mix(in srgb,var(--line),transparent 60%)}
.contact-list li{padding:clamp(20px,3vw,28px) 0;border-bottom:1px solid color-mix(in srgb,var(--line),transparent 60%);display:grid;grid-template-columns:1fr 2fr;gap:clamp(20px,3vw,36px);align-items:baseline}
.contact-list li:last-child{border-bottom:0}
.contact-label{font-family:Arial,Helvetica,sans-serif;font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.contact-value{font-family:Georgia,serif;font-size:clamp(1rem,1.4vw,1.15rem);line-height:1.5;color:var(--ink)}
.contact-value a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.contact-note{display:block;margin-top:6px;font-size:.9rem;color:var(--muted);line-height:1.45}

@media(max-width:680px){
  .proj-entry,.contact-list li{grid-template-columns:1fr;gap:8px}
}

/* Hero */
.hero{grid-column:1;display:flex;flex-direction:column;justify-content:center;gap:0}
.kicker{display:inline-block;border:1px solid var(--line);padding:10px 12px;margin-bottom:clamp(40px,7vw,80px);font-size:.9rem;font-weight:700;line-height:1.05;align-self:flex-start}
.display{max-width:720px;margin:0 0 24px;font-family:Georgia,serif;font-size:clamp(3.6rem,8vw,6rem);font-weight:400;letter-spacing:-.04em;line-height:.91;text-wrap:balance}
.lede{max-width:560px;margin:0;color:var(--muted);font-family:Georgia,serif;font-size:clamp(1.12rem,1.8vw,1.32rem);line-height:1.42}

/* Rail */
.rail{grid-column:2;height:72vh;min-height:520px;overflow:hidden;border-left:1px solid color-mix(in srgb,var(--line),transparent 64%);align-self:center}
.rail svg{width:100%;height:100%;fill:none;stroke:var(--line);stroke-width:1.25;transition:stroke .2s}
:root[data-theme="dark"] .rail svg{stroke:#8a3838}
:root[data-theme="light"] .rail:hover svg{stroke:#8a1818}
:root[data-theme="dark"] .rail:hover svg{stroke:var(--accent)}

/* Work — full-bleed 3-gate grid */
.work{grid-column:1 / -1;margin:0 calc(-1 * clamp(22px,4vw,52px));display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:color-mix(in srgb,var(--line),transparent 68%);border-top:1px solid color-mix(in srgb,var(--line),transparent 68%)}
.item{background:var(--paper);padding:clamp(24px,3vw,36px);transition:background .18s;display:flex;flex-direction:column}
.item:hover{background:color-mix(in srgb,var(--soft),var(--paper) 72%)}
.gate-name{margin:0 0 12px;font-size:1.4rem;font-weight:700;color:var(--accent);letter-spacing:-.01em}
.gate-desc{margin:0 0 20px;color:var(--muted);line-height:1.5;font-size:.95rem;font-family:Georgia,serif}
.gate-list{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:10px}
.gate-list li{font-size:.9rem;line-height:1.4}
.gate-list .proj{font-weight:700;color:var(--ink)}
.gate-list .proj::after{content:" — "}
.gate-list .what{color:var(--muted)}
.gate-link{position:relative;align-self:flex-start;margin-top:auto;font-size:.85rem;font-weight:700;color:var(--accent);text-decoration:none;padding-bottom:4px;min-width:15rem}
.gate-link::after{content:" →"}
.gate-link::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .24s ease}
.gate-link:hover::before{transform:scaleX(1)}

.site-foot{display:flex;justify-content:space-between;gap:12px;font-size:.8rem;color:var(--muted);flex-wrap:wrap;padding:clamp(16px,3vw,24px) clamp(22px,4vw,52px);border-top:1px solid color-mix(in srgb,var(--line),transparent 70%)}

@media(max-width:840px){
  .main{grid-template-columns:1fr}
  .hero,.rail,.work{grid-column:1}
  .rail{height:280px;min-height:0;border-left:0;border-top:1px solid color-mix(in srgb,var(--line),transparent 64%)}
  .work{grid-template-columns:1fr}
  .site-head{flex-direction:column;align-items:flex-start}
  .controls{flex-wrap:wrap}
}