@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 700;font-display:swap;src:url("fonts/newsreader/newsreader-normal-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 700;font-display:swap;src:url("fonts/newsreader/newsreader-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300 700;font-display:swap;src:url("fonts/newsreader/newsreader-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300 700;font-display:swap;src:url("fonts/newsreader/newsreader-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 600;font-display:swap;src:url("fonts/hanken-grotesk/hanken-grotesk-normal-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 600;font-display:swap;src:url("fonts/hanken-grotesk/hanken-grotesk-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  color-scheme:light;
  --paper:#F1F4F3; --paper-2:#E4EAE8;
  --ink:#0E1517; --ink-2:#36444A; --muted:#586870; --line:#C6D0D0;
  --deep:#0C262C; --deep-2:#11333B; --deep-ink:#E6EEEE; --deep-muted:#8FA9AC; --deep-line:#2A4F56;
  --accent:#8B5527; --accent-on-deep:#E6B97A;
  --logo-filter:grayscale(1) brightness(.3);
  --display:'Newsreader',Georgia,serif; --text:'Newsreader',Georgia,serif; --ui:'Hanken Grotesk',system-ui,sans-serif;
  --display-weight:400; --display-tracking:-.022em;
}
/* Brandon Wilson — site stylesheet. Single light palette; see docs/plans/2026-09-22-site-redesign-design.md */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"kern","liga"}
body{font-size:17.5px}
.hero h1,.feature .feature-title,.closing h2,.project h3,.essay h3{font-variation-settings:"opsz" 72}
img,svg{display:block}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:1.5px solid var(--accent);outline-offset:6px}
.closing a:focus-visible,.feature .arrow-link:focus-visible{outline-color:var(--accent-on-deep)}
h1,h2,h3,p{margin:0}
::selection{background:var(--accent);color:var(--paper)}

/* grid + measure */
.wrap{max-width:1320px;margin:0 auto;padding-inline:56px}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px}
.eyebrow{font-family:var(--ui);font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ui{font-family:var(--ui)}
.arrow-link{font-family:var(--ui);font-size:13px;font-weight:500;letter-spacing:.01em;color:var(--accent);display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.arrow-link i{display:inline-block;width:22px;height:1px;background:currentColor;position:relative;transition:width .25s cubic-bezier(.2,.7,.2,1)}
.arrow-link i::after{content:"";position:absolute;right:-1px;top:-3px;width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
a:hover .arrow-link i,.arrow-link:hover i{width:34px}
.hair{height:1px;background:var(--line);border:0;margin:0}

/* masthead */
.mast{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:76px;position:relative}
.mast::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
.mast nav{display:flex;gap:30px;font-family:var(--ui);font-size:12.5px;letter-spacing:.02em;color:var(--ink-2)}
.mast nav a{padding:6px 0;position:relative}
.mast nav a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:var(--ink);transition:right .25s ease}
.mast nav a:hover::after{right:0}
.wordmark{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);text-align:center}
.mast-right{display:flex;justify-content:flex-end}

/* hero */
.hero{padding-block:120px 104px;align-items:end}
.hero > span[id]{position:absolute}
.hero .eyebrow{grid-column:1/-1;margin-bottom:40px}
.hero h1{grid-column:1/10;font-family:var(--display);font-weight:var(--display-weight,400);font-size:clamp(46px,5.6vw,82px);line-height:1.02;letter-spacing:var(--display-tracking,-.02em);text-wrap:balance;color:var(--ink)}
.hero h1 em{font-style:italic;font-weight:inherit;color:var(--accent)}
.hero-aside{grid-column:10/13;align-self:end;padding-bottom:6px}
.hero-aside p{font-size:15.5px;line-height:1.6;color:var(--ink-2);margin-bottom:22px}

/* section head */
.section-head{display:flex;justify-content:space-between;align-items:baseline;padding:22px 0 0;border-top:1px solid var(--line);margin-bottom:44px}
.section-head h2{font-weight:500}

/* writing */
.writing{padding-block:0 120px}
.writing .grid{align-items:stretch}
.feature{grid-column:1/8;position:relative;overflow:hidden;background:var(--deep);color:var(--deep-ink);padding:52px 52px 48px;display:flex;flex-direction:column;justify-content:space-between;min-height:520px;transition:background .3s ease}
.feature:hover{background:var(--deep-2)}
.feature .eyebrow{color:var(--deep-muted)}
.feature .feature-title{font-family:var(--display);font-weight:var(--display-weight,400);font-size:clamp(44px,4.6vw,68px);line-height:.98;letter-spacing:var(--display-tracking,-.02em);margin:64px 0 18px}
.feature .feature-title em{font-style:italic;font-weight:inherit;color:var(--accent-on-deep)}
.feature .sub{font-family:var(--ui);font-size:13px;color:var(--deep-muted);letter-spacing:.02em}
.feature-foot{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-top:56px;padding-top:26px;border-top:1px solid var(--deep-line)}
.feature-foot p{font-size:16px;line-height:1.55;color:var(--deep-ink);max-width:34ch}
.feature .arrow-link{color:var(--accent-on-deep)}
.feature .pattern{position:absolute;right:-140px;top:-160px;width:640px;height:640px;opacity:.55;pointer-events:none}
.feature .pattern circle{fill:none;stroke:var(--deep-line);stroke-width:1}
.essays{grid-column:8/13;display:flex;flex-direction:column}
.essay{display:block;padding:26px 0 28px;border-bottom:1px solid var(--line);flex:1}
.essay:first-child{padding-top:0}
.essay .meta{display:flex;gap:14px;align-items:baseline;margin-bottom:14px}
.essay .meta .eyebrow{font-size:10.5px}
.essay .meta time{font-family:var(--ui);font-size:11.5px;color:var(--muted);letter-spacing:.02em}
.essay h3{font-family:var(--display);font-weight:var(--display-weight,400);font-size:27px;line-height:1.18;letter-spacing:var(--display-tracking,-.015em);margin-bottom:10px;transition:color .2s}
.essay:hover h3{color:var(--accent)}
.essay p{font-size:14.5px;line-height:1.55;color:var(--ink-2);max-width:44ch}

/* experience ledger */
.experience{padding-block:0 120px}
.ledger{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:120px 200px 1fr;column-gap:32px;align-items:start;padding:30px 0;border-bottom:1px solid var(--line)}
.row .years{font-family:var(--ui);font-size:11.5px;letter-spacing:.06em;color:var(--muted);padding-top:6px;font-variant-numeric:tabular-nums;white-space:nowrap}
.row .now{color:var(--accent)}
.row .logo{display:flex;align-items:center;gap:14px;min-height:32px}
.row .logo.stacked{flex-direction:column;align-items:flex-start;gap:14px}
.row .logo img{height:auto;max-width:100%;filter:var(--logo-filter);opacity:.9}
.row p{font-size:15.5px;line-height:1.65;color:var(--ink-2);max-width:62ch}
.row p small{display:block;margin-top:8px;font-size:13px;color:var(--muted)}
.row.current p{color:var(--ink)}

/* projects band */
.band{background:var(--paper-2)}
.projects{padding-block:96px 104px}
.projects .section-head{border-top-color:var(--line)}
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:0}
.project{display:flex;flex-direction:column;gap:0;padding:0 40px 8px;border-left:1px solid var(--line);min-height:300px}
.project:first-child{padding-left:0;border-left:0}
.project:last-child{padding-right:0}
.project .glyph{height:64px;margin-bottom:44px;color:var(--ink);opacity:.8}
.project .glyph svg{height:100%;width:auto;stroke:currentColor;fill:none;stroke-width:1.1}
.project .eyebrow{margin-bottom:16px}
.project h3{font-family:var(--display);font-weight:var(--display-weight,400);font-size:38px;letter-spacing:var(--display-tracking,-.02em);line-height:1;margin-bottom:16px;transition:color .2s}
.project:hover h3{color:var(--accent)}
.project p{font-size:15px;line-height:1.6;color:var(--ink-2);max-width:30ch;margin-bottom:22px}
.project .arrow-link{margin-top:auto}

/* closing */
.closing{background:var(--deep);color:var(--deep-ink);position:relative;overflow:hidden}
.closing .grid{padding-block:120px 128px;align-items:end}
.closing h2{grid-column:1/7;font-family:var(--display);font-weight:var(--display-weight,400);font-size:clamp(56px,7vw,104px);letter-spacing:var(--display-tracking,-.025em);line-height:.95}
.closing h2 em{font-style:italic;font-weight:inherit;color:var(--accent-on-deep)}
.closing .aside{grid-column:8/13;padding-bottom:10px}
.closing .aside p{font-size:17px;line-height:1.55;color:var(--deep-muted);max-width:36ch;margin-bottom:26px}
.closing .arrow-link{color:var(--accent-on-deep)}
.closing .pattern{position:absolute;left:-220px;bottom:-320px;width:720px;height:720px;opacity:.5;pointer-events:none}
.closing .pattern circle{fill:none;stroke:var(--deep-line);stroke-width:1}

/* footer */
.foot{display:flex;justify-content:space-between;align-items:center;padding-block:26px 34px;font-family:var(--ui);font-size:12px;color:var(--muted);letter-spacing:.02em}
.foot .links{display:flex;gap:28px}
.foot a:hover{color:var(--ink)}

.preview-note{font-family:var(--ui);font-size:13px;line-height:1.6;color:var(--muted);border:1px dashed var(--line);padding:18px 20px}

/* motion: one orchestrated page load */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rise{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}.d4{animation-delay:.35s}
@media (prefers-reduced-motion:reduce){.rise{animation:none}*{transition:none!important}html{scroll-behavior:auto}}

/* responsive */
@media (max-width:1100px){
  .wrap{padding-inline:40px}
  .grid{column-gap:24px}
  .hero h1{grid-column:1/-1}
  .hero-aside{grid-column:1/8;margin-top:36px}
  .feature{grid-column:1/-1;min-height:420px}
  .essays{grid-column:1/-1;margin-top:40px;flex-direction:row;gap:40px}
  .essay{border-bottom:0;border-top:1px solid var(--line);padding-top:22px}
  .row{grid-template-columns:100px 170px 1fr;column-gap:24px}
}
@media (max-width:760px){
  .wrap{padding-inline:22px}
  .mast{grid-template-columns:auto 1fr;height:auto;padding-block:16px 14px;row-gap:12px}
  .grid{column-gap:16px}
  .wordmark{grid-column:1;text-align:left}
  .mast-right{grid-column:2;grid-row:1}
  .mast nav{grid-column:1/-1;grid-row:2;gap:22px}
  .hero{padding-block:72px 64px}
  .hero .eyebrow{margin-bottom:28px}
  .hero h1{font-size:clamp(38px,10.5vw,54px)}
  .hero-aside{grid-column:1/-1;margin-top:28px}
  .section-head{margin-bottom:28px}
  .writing,.experience{padding-bottom:72px}
  .feature{padding:32px 26px 30px;min-height:0}
  .feature .feature-title{margin-top:40px;font-size:clamp(38px,11vw,52px)}
  .feature-foot{flex-direction:column;align-items:flex-start;gap:18px;margin-top:34px}
  .feature .pattern{width:420px;height:420px;right:-160px;top:-180px}
  .essays{flex-direction:column;gap:0;margin-top:28px}
  .essay{border-top:0;border-bottom:1px solid var(--line);padding:22px 0}
  .essay h3{font-size:24px}
  .row{grid-template-columns:1fr;row-gap:12px;padding:22px 0}
  .row .years{grid-column:1;grid-row:1;padding-top:0}
    .row .logo{grid-column:1/-1;grid-row:2}
  .row p{grid-column:1/-1;grid-row:3}
  .projects{padding-block:64px 68px}
  .project-grid{grid-template-columns:1fr;row-gap:36px}
  .project,.project:first-child,.project:last-child{padding:0 0 32px;border-left:0;border-bottom:1px solid var(--line);min-height:0}
  .project:last-child{border-bottom:0;padding-bottom:0}
  .project .glyph{height:48px;margin-bottom:28px}
  .project h3{font-size:34px}
  .closing .grid{padding-block:72px 80px}
  .closing h2{grid-column:1/-1;font-size:clamp(48px,14vw,72px);margin-bottom:28px}
  .closing .aside{grid-column:1/-1}
  .foot{flex-direction:column;align-items:flex-start;gap:14px}
}

/* skip link + reading pages */
.skip{position:absolute;left:-10000px}
.skip:focus{left:20px;top:12px;background:var(--paper);color:var(--ink);padding:10px 14px;z-index:10;font-family:var(--ui);font-size:13px;outline:1.5px solid var(--accent)}
.reading{max-width:820px;padding-block:88px 112px;overflow-wrap:anywhere}
.reading h1{font-family:var(--display);font-weight:400;font-size:clamp(40px,5vw,64px);line-height:1.06;letter-spacing:-.02em;margin-bottom:40px;text-wrap:balance}
.reading p{font-size:18px;line-height:1.75;color:var(--ink-2);margin-bottom:26px}
.reading p.opening{font-family:var(--display);font-size:29px;line-height:1.4;letter-spacing:-.015em;color:var(--ink);margin-bottom:34px}
.reading a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.reading a:hover{color:var(--ink)}
.reading h2{font-family:var(--display);font-weight:400;font-size:34px;letter-spacing:-.02em;line-height:1.15;margin:56px 0 22px}
.reading h3{font-family:var(--display);font-weight:400;font-size:26px;letter-spacing:-.015em;line-height:1.25;margin:36px 0 18px}
.reading li{font-size:18px;line-height:1.75;color:var(--ink-2);margin-bottom:8px}
.reading ul,.reading ol{padding-left:1.4em;margin:0 0 26px}
.reading h4{font-family:var(--display);font-weight:500;font-size:20px;line-height:1.3;margin:32px 0 12px}
.reading hr{border:0;height:1px;background:var(--line);margin:48px 0}
.reading code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:var(--paper-2);padding:.1em .35em}
.reading pre code{background:none;padding:0;font-size:inherit}
.reading img,.reading svg{max-width:100%;height:auto}
.reading figure{margin:40px 0}
.reading table{display:block;overflow:auto;font-family:var(--ui);font-size:14px;border-collapse:collapse;margin:32px 0}
.reading th,.reading td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.reading th{background:var(--paper-2);font-weight:600}
.reading pre{max-width:100%;overflow:auto;padding:20px;background:var(--paper-2);font-size:14px;line-height:1.55}
.reading blockquote{margin:32px 0;padding:4px 0 4px 26px;border-left:1px solid var(--accent);font-family:var(--display);font-size:23px;line-height:1.45;color:var(--ink)}
.reading blockquote p{font-size:inherit;color:inherit;line-height:inherit}
.reading blockquote p:last-child{margin-bottom:0}
.reading .article-date{font-family:var(--ui);font-size:12px;letter-spacing:.04em;color:var(--muted);margin:-24px 0 40px}
.reading-links{display:flex;gap:30px;margin-top:40px}
.reading-links a{text-decoration:none}
.reading .essay{padding:24px 0;color:var(--ink);text-decoration:none}
.reading .essay:hover{color:var(--ink)}
.reading .essay h3{margin:0 0 10px;font-size:27px;line-height:1.18}
.reading .essay p{font-size:14.5px;line-height:1.55;color:var(--ink-2);margin:0}
.reading .essay .meta time{color:var(--muted)}
.reading .project-story{padding:44px 0 12px;border-top:1px solid var(--line);margin-top:40px;scroll-margin-top:30px}
.reading .project-story h2{margin:0 0 22px;font-size:44px}
.reading .project-story .eyebrow{display:block;margin-bottom:18px;font-size:11.5px;line-height:1.6;color:var(--muted)}
.reading .project-postscript{font-size:16px;margin:36px 0 0;color:var(--muted)}

@media (max-width:760px){
  .reading{padding-block:56px 72px}
  .reading h1{font-size:clamp(34px,9vw,44px);margin-bottom:28px}
  .reading p.opening{font-size:24px}
  .reading h2{font-size:28px;margin:44px 0 18px}
  .reading .project-story h2{font-size:36px}
}

/* print */
@media print{
  body{background:#fff;color:#000;font-size:11pt}
  .mast nav,.mast-right,.skip,.arrow-link i,.pattern{display:none}
  .feature,.closing,.band{background:#fff!important;color:#000!important;border:1px solid #999}
  .feature *,.closing *{color:#000!important}
  .row .logo img{filter:none}
  .rise{animation:none}
  .reading a{color:#000}
  a{color:#000}
}