:root{
  color-scheme:dark;
  --bg:#111413;
  --panel:#181c1a;
  --text:#e7e9e3;
  --muted:#a0aaa2;
  --line:#303831;
  --accent:#c4dda3;
  --mono:'Cascadia Code','SFMono-Regular',Consolas,monospace;
  font-family:Inter,'Segoe UI',Arial,sans-serif;
  font-synthesis:none
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-size:16px;
  line-height:1.65
}
a{
  color:inherit;
  text-decoration:none
}
button,select{
  font:inherit
}
button,a,select{
  -webkit-tap-highlight-color:transparent
}
button{
  cursor:pointer
}
a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:6px
}
button{
  color:inherit
}
a:hover{
  color:var(--accent)
}
main:focus{
  outline:none
}
header{
  border-bottom:1px solid var(--line)
}
.header-inner{
  max-width:1400px;
  margin:auto;
  min-height:96px;
  padding:0 64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px
}
.brand{
  display:flex;
  align-items:center;
  gap:20px
}
.monogram{
  font-weight:750;
  font-size:35px;
  letter-spacing:-3px
}
.monogram span{
  color:var(--accent)
}
.brand-name{
  font-size:13px;
  font-weight:550
}
.header-inner nav{
  display:flex;
  gap:34px;
  font-size:14px;
  margin-left:auto;
  margin-right:50px
}
.header-inner nav a{
  color:var(--muted);
  position:relative;
  padding:10px 0
}
.header-inner nav a[aria-current]{
  color:var(--text)
}
.header-inner nav a[aria-current]:after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  width:16px;
  height:2px;
  background:var(--accent)
}
.languages{
  display:flex;
  border:1px solid var(--line);
  padding:3px;
  border-radius:4px
}
.languages button{
  border:0;
  background:none;
  padding:5px 8px;
  font:11px var(--mono);
  color:var(--muted)
}
.languages button[aria-pressed=true]{
  background:#30392e;
  color:var(--accent)
}
main{
  max-width:1400px;
  margin:auto;
  padding:0 64px
}
.mono,.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:1.3px
}
.eyebrow{
  color:var(--accent);
  margin:0 0 24px;
  display:flex;
  align-items:center;
  gap:10px
}
.eyebrow span:not(.dot){
  color:var(--muted)
}
.dot{
  display:inline-block;
  flex-shrink:0;
  width:6px;
  height:6px;
  background:var(--accent);
  border-radius:50%
}
.muted{
  color:var(--muted)
}
h1,h2,h3,p{
  margin-top:0
}
h1{
  font-size:clamp(48px,6.8vw,94px);
  line-height:1.06;
  letter-spacing:-5px;
  font-weight:500;
  margin-bottom:28px
}
h1 em{
  font-style:normal;
  color:var(--accent)
}
h2{
  font-size:34px;
  line-height:1.2;
  letter-spacing:-1.2px;
  font-weight:500;
  margin-bottom:24px
}
h3{
  font-size:29px;
  letter-spacing:-.8px;
  font-weight:500;
  line-height:1.25;
  margin:0 0 14px
}
p{
  color:var(--muted)
}
.hero{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:70px;
  align-items:center;
  padding:86px 0 88px
}
.hero-intro{
  max-width:440px;
  font-size:16px;
  line-height:1.8;
  margin:28px 0 30px
}
.actions{
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap
}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  border:1px solid var(--line);
  padding:12px 18px;
  border-radius:3px;
  background:transparent;
  font-size:13px;
  font-weight:550
}
.button.primary{
  background:var(--accent);
  color:#1d2819;
  border-color:var(--accent)
}
.button:hover{
  background:#2a3427;
  color:var(--text)
}
.text-link{
  font-size:13px;
  border-bottom:1px solid #626f56;
  padding-bottom:5px;
  display:inline-block
}
.edition{
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  padding-bottom:16px
}
.hero-aside{
  padding-top:35px
}
.system{
  background:var(--panel);
  border:1px solid var(--line);
  overflow:hidden;
  position:relative;
  min-height:230px;
  display:flex;
  flex-direction:column;
  background-image:radial-gradient(#3b443a 0.7px,transparent .7px);
  background-size:19px 19px
}
.system.large{
  min-height:340px
}
.system-top,.system-bottom{
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:18px 22px;
  font-size:9px;
  color:var(--muted)
}
.system-top{
  border-bottom:1px solid #30383170;
  align-items:center;
  background:#181c1ad9
}
.system-bottom{
  margin-top:auto;
  background:#181c1ad9
}
.diagram{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1;
  padding:38px 24px
}
.node{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:13px;
  position:relative;
  background:#1c241e;
  border:1px solid #56634e;
  padding:17px 12px;
  min-width:92px;
  font:11px var(--mono);
  color:var(--accent)
}
.node small{
  position:absolute;
  top:-8px;
  left:9px;
  background:#1c241e;
  padding:0 5px;
  font-size:8px
}
.node-icon{
  font-size:25px;
  line-height:1
}
.wire{
  width:35px;
  height:1px;
  background:#80966c;
  position:relative
}
.wire:after{
  content:'';
  border:3px solid transparent;
  border-left-color:#80966c;
  position:absolute;
  right:-2px;
  top:-3px
}
.narrowcasting .node{
  color:#b4cddd;
  border-color:#566773;
  background:#1d262b
}
.narrowcasting .wire{
  background:#758e9d
}
.refactoring .node{
  color:#d5c3a9;
  border-color:#70624e;
  background:#28241e
}
.refactoring .wire{
  background:#a49276
}
.aside-caption{
  display:flex;
  gap:19px;
  padding:24px 0;
  border-bottom:1px solid var(--line);
  align-items:center
}
.aside-caption>.mono{
  color:var(--accent)
}
.aside-caption strong{
  font-size:14px;
  font-weight:500
}
.aside-caption p{
  margin:5px 0 0;
  font-size:12px
}
.circle-link{
  border:1px solid var(--line);
  border-radius:50%;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  margin-left:auto
}
.study-stamp{
  display:flex;
  gap:16px;
  margin-top:24px;
  font-size:11px;
  color:var(--muted)
}
.study-stamp>span:last-child{
  margin-left:auto
}
.section{
  padding:60px 0 65px;
  border-top:1px solid var(--line)
}
.section-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:22px
}
.section-heading .eyebrow{
  margin-bottom:16px
}
.section-heading h2{
  margin-bottom:16px
}
.project-row{
  display:grid;
  grid-template-columns:50px 1fr 160px;
  gap:20px;
  align-items:start;
  padding:33px 0;
  border-bottom:1px solid var(--line)
}
.project-number{
  color:var(--muted);
  padding-top:5px
}
.project-copy .eyebrow{
  font-size:10px;
  margin-bottom:14px
}
.project-copy p:not(.eyebrow){
  font-size:14px;
  max-width:650px;
  margin-bottom:20px
}
.tags{
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.tag{
  font:10px var(--mono);
  border:1px solid var(--line);
  border-radius:3px;
  padding:5px 8px;
  color:var(--muted)
}
.row-link{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-self:center;
  font-size:12px
}
.row-link span:last-child{
  font-size:23px;
  color:var(--accent)
}
.exam-callout{
  margin:15px 0 90px;
  padding:45px;
  border:1px solid var(--line);
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:80px;
  background:#151a16
}
.exam-callout p:not(.eyebrow){
  font-size:14px;
  max-width:600px
}
.index-preview{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:0;
  font:11px var(--mono)
}
.index-preview>div{
  display:flex;
  align-items:center;
  gap:22px;
  border-bottom:1px solid var(--line);
  padding:13px 0
}
.index-preview>div>span:first-child{
  color:var(--muted);
  font-size:9px
}
.index-preview strong{
  font-weight:400;
  letter-spacing:2px
}
.small-line{
  height:3px;
  background:#71855c;
  width:38px;
  margin-left:auto
}
.index-preview>div:nth-child(2) .small-line{
  width:62px
}
.index-preview>div:nth-child(3) .small-line{
  width:85px
}
footer{
  max-width:1272px;
  margin:auto;
  border-top:1px solid var(--line);
  padding:32px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}
footer p{
  font-size:12px;
  margin:10px 0 0
}
.footer-links{
  display:flex;
  gap:25px;
  font-size:12px
}
footer>.mono{
  font-size:9px
}
.skip{
  position:fixed;
  top:-100px;
  left:15px;
  padding:12px;
  background:var(--accent);
  color:#111;
  z-index:100
}
.skip:focus{
  top:15px
}
.page-heading{
  padding:70px 0 55px;
  max-width:920px
}
.page-heading h1{
  font-size:clamp(42px,6vw,80px);
  letter-spacing:-3px
}
.page-heading>p:not(.eyebrow){
  max-width:680px;
  font-size:17px
}
.work-list{
  border-top:0;
  padding-top:0;
  display:grid;
  gap:50px
}
.work-list .system{
  max-width:100%
}
.work-list .diagram{
  max-width:700px;
  width:100%;
  margin:auto
}
.work-list .node{
  min-width:160px
}
.work-list .wire{
  width:90px
}
.archive-link{
  margin-bottom:75px
}
.back-link{
  font-size:12px;
  color:var(--muted);
  display:inline-block;
  margin-bottom:35px
}
.accent{
  color:var(--accent)
}
.project-heading{
  max-width:1000px
}
.project-layout{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:80px;
  padding:65px 0 85px
}
.project-meta{
  font-size:13px
}
.project-meta dt{
  color:var(--muted);
  font-size:11px;
  margin-top:24px
}
.project-meta dd{
  margin:5px 0 0
}
.project-meta .text-link{
  margin-top:25px
}
.project-story{
  max-width:760px
}
.project-story section{
  margin-bottom:50px
}
.project-story .eyebrow{
  margin-bottom:15px
}
.project-story h2{
  font-size:29px
}
.project-story p{
  font-size:15px
}
.evidence-links{
  border-top:1px solid var(--line);
  margin-top:25px
}
.evidence-links>a,.evidence-entry{
  border-bottom:1px solid var(--line);
  padding:17px 0;
  font-size:13px
}
.evidence-links>a,.evidence-entry>a:first-child{
  display:flex;
  justify-content:space-between;
  gap:18px
}
.evidence-links small{
  font-size:9px;
  display:inline-block;
  min-width:55px;
  color:var(--accent)
}
.reflection{
  border:1px solid var(--line);
  padding:28px;
  background:var(--panel)
}
.reflection p:last-child{
  margin-bottom:0
}
.evidence-toolbar{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:end;
  margin-bottom:28px
}
.evidence-toolbar label{
  display:block;
  font:11px var(--mono);
  margin-bottom:12px;
  color:var(--muted)
}
select{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:3px;
  color:var(--text);
  padding:12px;
  font-size:13px;
  max-width:100%
}
.notice{
  display:flex;
  gap:15px;
  border-left:2px solid #af9564;
  background:#1f211b;
  padding:20px 24px;
  margin-bottom:30px
}
.notice p{
  font-size:13px;
  margin:0;
  max-width:900px;
  color:#c0c2b2
}
.status-dot{
  height:6px;
  width:6px;
  border-radius:50%;
  background:#c3ad80;
  flex-shrink:0;
  margin-top:8px
}
.process{
  border-bottom:1px solid var(--line)
}
.process:first-child{
  border-top:1px solid var(--line)
}
.process summary{
  list-style:none;
  display:grid;
  grid-template-columns:130px 1fr 110px 20px;
  gap:20px;
  align-items:center;
  padding:25px 0;
  cursor:pointer
}
.process summary::-webkit-details-marker{
  display:none
}
.process-code{
  font-size:11px;
  color:var(--muted);
  letter-spacing:0
}
.process-title{
  font-size:18px
}
.evidence-status{
  font:10px var(--mono)
}
.located{
  color:var(--accent)
}
.missing{
  color:#c9b48e
}
.expand{
  font-size:22px;
  color:var(--muted)
}
details[open] .expand{
  transform:rotate(45deg)
}
.process-content{
  padding:0 0 30px 150px;
  max-width:960px
}
.process-content>p{
  font-size:14px
}
.evidence-project{
  font-size:11px;
  color:var(--muted);
  margin:8px 0 0 55px;
  display:inline-block
}
.pending{
  margin-top:20px;
  font-size:12px!important
}
.empty-state{
  border:1px dashed #51594c;
  color:var(--muted);
  padding:22px;
  font-size:13px
}
.source-note{
  margin:50px 0 70px;
  max-width:800px;
  font-size:13px
}
.source-note .mono{
  color:var(--accent)
}
.about-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:100px;
  border-top:1px solid var(--line);
  padding:60px 0
}
.about-grid p{
  font-size:15px
}
.profile-facts>div{
  border-bottom:1px solid var(--line);
  padding:19px 0;
  display:flex;
  justify-content:space-between;
  gap:25px;
  font-size:13px
}
.profile-facts span{
  color:var(--muted)
}
.profile-facts strong{
  font-weight:500
}
.contact-section{
  border-top:1px solid var(--line);
  padding:60px 0 80px
}
.contact-section>p:last-child{
  font-size:12px;
  margin-top:24px
}
@media(min-width:1500px){
  .hero{
    padding-top:100px;
    padding-bottom:100px
  }
}
@media(max-width:1100px){
  .header-inner{
    padding:0 32px
  }
  .hero{
    gap:35px
  }
  main{
    padding:0 32px
  }
  footer{
    margin:0 32px
  }
  .node{
    min-width:75px;
    font-size:10px
  }
  .wire{
    width:22px
  }
  .diagram{
    padding:35px 18px
  }
  .hero h1{
    font-size:68px
  }
  .hero .actions{
    gap:17px
  }
  .brand-name{
    display:none
  }
  .exam-callout{
    gap:40px
  }
  .project-layout{
    gap:45px;
    grid-template-columns:200px 1fr
  }
  .study-stamp{
    gap:10px
  }
}
@media(max-width:760px){
  .header-inner{
    padding:0 22px;
    min-height:78px;
    gap:16px
  }
  .header-inner nav{
    gap:18px;
    margin:0 auto;
    font-size:12px
  }
  .monogram{
    font-size:28px
  }
  main{
    padding:0 22px
  }
  .hero{
    grid-template-columns:1fr;
    padding:48px 0;
    gap:20px
  }
  .hero h1{
    font-size:65px;
    letter-spacing:-3.5px
  }
  .hero-intro{
    max-width:530px
  }
  .hero-aside{
    padding-top:10px
  }
  .system.large{
    min-height:280px
  }
  .hero .node{
    min-width:95px
  }
  .hero .wire{
    width:35px
  }
  .section{
    padding:42px 0
  }
  .section-heading{
    align-items:end
  }
  .section-heading>.mono{
    display:none
  }
  h2{
    font-size:29px
  }
  .project-row{
    grid-template-columns:28px 1fr;
    gap:14px;
    padding:28px 0
  }
  .row-link{
    grid-column:2;
    justify-content:flex-start;
    gap:20px
  }
  .project-copy h3{
    font-size:25px
  }
  .project-copy .eyebrow{
    display:block;
    line-height:2
  }
  .exam-callout{
    padding:26px;
    grid-template-columns:1fr;
    gap:20px;
    margin-bottom:50px
  }
  .index-preview{
    display:none
  }
  footer{
    margin:0 22px;
    flex-wrap:wrap;
    gap:24px
  }
  .footer-links{
    gap:18px
  }
  footer>.mono{
    width:100%
  }
  .page-heading{
    padding:45px 0 35px
  }
  .page-heading h1{
    font-size:52px;
    letter-spacing:-2px
  }
  .page-heading>p:not(.eyebrow){
    font-size:15px
  }
  .work-list .node{
    min-width:90px
  }
  .work-list .wire{
    width:30px
  }
  .project-layout{
    grid-template-columns:1fr;
    gap:45px;
    padding-top:35px
  }
  .project-meta dl{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px
  }
  .project-meta dt{
    margin:0
  }
  .project-meta dd{
    margin:0
  }
  .project-story h2{
    font-size:26px
  }
  .evidence-toolbar{
    align-items:stretch;
    flex-wrap:wrap
  }
  .evidence-toolbar>div{
    width:100%
  }
  select{
    width:100%
  }
  .process summary{
    grid-template-columns:1fr 90px 15px;
    gap:8px;
    padding:20px 0
  }
  .process-code{
    grid-column:1/-1
  }
  .process-title{
    font-size:16px
  }
  .process-content{
    padding-left:0
  }
  .notice{
    padding:17px
  }
  .about-grid{
    grid-template-columns:1fr;
    gap:25px;
    padding:35px 0
  }
  .contact-section{
    padding-top:40px
  }
  .evidence-links small{
    min-width:42px
  }
}
@media(max-width:380px){
  .header-inner{
    padding:0 14px;
    gap:10px
  }
  .header-inner nav{
    gap:12px
  }
  .languages button{
    padding:5px
  }
  .hero h1{
    font-size:57px
  }
  .hero .node{
    min-width:75px
  }
  .hero .wire{
    width:20px
  }
  .system-top,.system-bottom{
    padding:14px;
    font-size:8px
  }
  .diagram{
    padding:35px 12px
  }
}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
  *{
    transition:none!important
  }
}
@media print{
  :root{
    color-scheme:light;
    --bg:white;
    --text:#111;
    --muted:#444;
    --line:#bbb;
    --accent:#314826
  }
  body{
    background:white;
    color:#111;
    font-size:11pt
  }
  header,footer,.evidence-toolbar,.skip,.expand{
    display:none!important
  }
  main{
    padding:0;
    max-width:none
  }
  .page-heading{
    padding:0 0 20px
  }
  .page-heading h1{
    font-size:34pt;
    letter-spacing:-1px
  }
  .notice{
    background:none
  }
  .notice p{
    color:#333
  }
  .process summary{
    padding:15px 0;
    grid-template-columns:110px 1fr 100px
  }
  .process-content{
    padding-left:0
  }
  .process{
    break-inside:avoid
  }
  .evidence-status{
    color:#333
  }
  .process-title{
    font-size:14pt
  }
  .source-note{
    margin-bottom:0
  }
  .evidence-links a{
    overflow-wrap:anywhere
  }
  .evidence-links a[href^=http]:after{
    content:' (' attr(href) ')';
    font-size:8pt;
    display:block;
    max-width:75%;
    color:#444
  }
  .evidence-links>a,.evidence-entry>a:first-child{
    display:block
  }
  .system{
    background:none
  }
  .reflection{
    background:none
  }
}
.hero>*{
  min-width:0
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
/* Phone layouts: readable diagrams and comfortable touch controls. */
@media screen and (max-width:760px){
  .project-copy,.project-story,.project-meta,.process-title{
    min-width:0;
    overflow-wrap:anywhere;
  }
  .languages button{
    min-width:44px;
    min-height:44px;
  }
  .button,.circle-link,.row-link{
    min-height:44px;
  }
  .circle-link{
    min-width:44px;
  }
  .text-link,.footer-links a{
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }
  .evidence-toolbar select{
    min-height:48px;
    font-size:16px;
  }
  .project-meta dl{
    grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  }
  .diagram .node{
    flex:1;
    max-width:140px;
    overflow-wrap:anywhere;
  }
  .system .diagram .node{
    font-size:11px;
  }
  .system-top,.system-bottom{
    font-size:10px;
    letter-spacing:.5px;
    flex-wrap:wrap;
  }
  .study-stamp{
    flex-wrap:wrap;
  }
}
@media screen and (max-width:480px){
  .header-inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:6px 12px;
    padding:12px 20px 4px;
  }
  .header-inner .languages{
    grid-column:2;
    grid-row:1;
  }
  .header-inner nav{
    grid-column:1 / -1;
    grid-row:2;
    width:100%;
    justify-content:space-between;
    gap:16px;
    margin:0;
    font-size:14px;
  }
  .header-inner nav a{
    min-height:44px;
    display:flex;
    align-items:center;
  }
  .hero{
    padding-top:34px;
  }
  .hero .actions{
    align-items:stretch;
    flex-direction:column;
    gap:12px;
  }
  .hero .actions .text-link{
    align-self:flex-start;
  }
  .process summary{
    grid-template-columns:minmax(0,1fr) 76px 16px;
  }
  .reflection{
    padding:22px;
  }
}
@media(max-width:760px){
  .hero h1{
    font-size:clamp(42px,12.5vw,65px);
    letter-spacing:-2.5px
  }
  .hero .node,.work-list .node{
    min-width:0;
    flex:1;
    max-width:110px;
    padding:17px 7px;
    font-size:9px
  }
  .hero .wire,.work-list .wire{
    width:22px;
    flex-shrink:0
  }
  .hero .diagram{
    padding:35px 16px
  }
  .project-heading h1{
    font-size:clamp(35px,10vw,52px);
    overflow-wrap:anywhere
  }
  .system .node{
    min-width:0
  }
  .system .diagram{
    min-width:0
  }
  .system .wire{
    flex-shrink:0
  }
}