/* Von Thünen Model: Rural Land-Use Sandbox — styles */
  :root{
    --paper:#ECEEE6; --paper-2:#E2E6DC; --paper-3:#D8DDD1;
    --ink:#17221B; --ink-2:#4A574E; --ink-3:#7C877F; --rule:#B9C2B4;
    --river:#2E5A9C; --river-light:#9DB6DA;
    --c-gardens:#7BB661; --c-forest:#2F5D3A; --c-grain:#D9B44A; --c-ranch:#A67B5B; --c-wild:#D7DBD1;
    --display:'Archivo',system-ui,sans-serif;
    --body:'Newsreader',Georgia,'Times New Roman',serif;
    --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  }
  *{box-sizing:border-box}
  html{background:var(--paper)}
  body{margin:0; color:var(--ink); background:var(--paper); font-family:var(--body); font-size:17px; line-height:1.5; -webkit-font-smoothing:antialiased}
  :focus-visible{outline:2px solid var(--river); outline-offset:3px}
  .sheet{max-width:1240px; margin:0 auto; padding:28px 24px 80px}

  header{display:grid; grid-template-columns:1fr auto; gap:24px; align-items:end; border-bottom:1.5px solid var(--ink); padding-bottom:18px; margin-bottom:26px}
  .eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); margin:0 0 6px}
  h1{font-family:var(--display); font-variation-settings:'wdth' 68; font-weight:800; font-size:clamp(36px,5.6vw,68px); line-height:.9; letter-spacing:-.01em; margin:0; text-transform:uppercase}
  h1 span{font-weight:400; color:var(--ink-2)}
  .thesis{max-width:52ch; margin:14px 0 0; font-size:19px; line-height:1.4}
  .legend{display:flex; flex-direction:column; gap:6px; font-family:var(--mono); font-size:12.5px; min-width:220px}
  .legend div{display:flex; align-items:center; gap:10px}
  .sw{width:22px; height:14px; border:1px solid var(--ink); flex:none}
  .sw.wild{background:repeating-linear-gradient(135deg,var(--c-wild) 0 3px,var(--paper-3) 3px 4px)}

  .lab{display:grid; grid-template-columns:minmax(0,640px) minmax(320px,1fr); gap:32px; align-items:start}
  .stage{position:sticky; top:14px}

  .map-frame{position:relative; border:1.5px solid var(--ink); background:var(--paper-3); aspect-ratio:1/1; overflow:hidden}
  .map-frame canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
  .map-frame svg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
  .map-caption{display:flex; justify-content:space-between; gap:12px; font-family:var(--mono); font-size:12px; color:var(--ink-2); padding:8px 2px 0}

  .chart-head{display:flex; justify-content:space-between; align-items:baseline; margin:22px 0 4px; border-top:1px solid var(--ink); padding-top:10px}
  .chart-head h2{margin:0}
  .chart-head small{font-family:var(--mono); font-size:12px; color:var(--ink-2)}
  h2{font-family:var(--display); font-variation-settings:'wdth' 75; font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:15px; margin:0 0 10px}
  #chart{width:100%; height:auto; display:block}
  #chart text{font-family:var(--mono); font-size:11px; fill:var(--ink-2)}
  #chart .axis{stroke:var(--ink); stroke-width:1}
  #chart .grid{stroke:var(--rule); stroke-width:1}
  #chart .cut{stroke:var(--ink); stroke-width:1; stroke-dasharray:3 3}
  #chart .curve{fill:none; stroke-width:2.4; stroke-linejoin:round}
  #chart .curve.rival{stroke-dasharray:6 4; stroke-width:1.8}

  .panel{border-top:1.5px solid var(--ink); padding-top:12px; margin-bottom:26px}
  .panel-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
  .hint{font-size:15px; color:var(--ink-2); margin:0 0 12px; line-height:1.4}
  .presets{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px}
  button{font-family:var(--display); font-variation-settings:'wdth' 85; font-weight:600; font-size:13.5px; letter-spacing:.02em; background:transparent; color:var(--ink); border:1.5px solid var(--ink); padding:7px 12px; cursor:pointer; border-radius:2px}
  button:hover{background:var(--ink); color:var(--paper)}
  button.quiet{border-color:var(--rule); color:var(--ink-2)}
  button.quiet:hover{background:var(--paper-3); color:var(--ink)}
  button.on{background:var(--ink); color:var(--paper); border-color:var(--ink)}
  .preset-note{font-size:15.5px; color:var(--ink-2); min-height:1.5em; margin:0; font-style:italic}

  .ctl{display:grid; grid-template-columns:1fr auto; gap:4px 14px; align-items:center; padding:9px 0; border-bottom:1px solid var(--rule)}
  .ctl:last-child{border-bottom:0}
  .ctl label{font-family:var(--display); font-variation-settings:'wdth' 85; font-weight:600; font-size:14.5px}
  .ctl output{font-family:var(--mono); font-size:13px; color:var(--ink); text-align:right; min-width:9ch}
  .ctl input[type=range]{grid-column:1/-1; width:100%; margin:2px 0 0; accent-color:var(--ink); height:22px}
  .ctl .sub{grid-column:1/-1; font-size:14px; color:var(--ink-3); line-height:1.35}
  .toggle{display:flex; align-items:center; gap:10px}
  .toggle input{width:18px; height:18px; accent-color:var(--river); margin:0}

  .crop{border:1px solid var(--rule); border-left:6px solid; padding:10px 12px 4px; margin-bottom:10px; background:rgba(255,255,255,.28)}
  .crop-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:2px}
  .crop-head b{font-family:var(--display); font-variation-settings:'wdth' 80; font-weight:700; font-size:15px; text-transform:uppercase; letter-spacing:.03em}
  .crop-head span{font-family:var(--mono); font-size:12px; color:var(--ink-2); text-align:right}
  .crop .ctl{padding:6px 0}
  .crop .ctl label{font-weight:500; font-size:14px}

  table{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:13px}
  th{font-weight:500; text-align:left; color:var(--ink-2); border-bottom:1px solid var(--ink); padding:4px 6px 6px 0; letter-spacing:.04em; text-transform:uppercase; font-size:11px}
  td{padding:7px 6px 7px 0; border-bottom:1px solid var(--rule); vertical-align:middle}
  td.num,th.num{text-align:right; padding-right:0}
  td .sw{display:inline-block; vertical-align:-2px; margin-right:8px; width:14px; height:12px}
  tr.gone td{color:var(--ink-3)}
  tr.rival td{font-style:italic}

  .learn{margin-top:40px; border-top:1.5px solid var(--ink); padding-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:36px}
  .learn p{margin:0 0 10px}
  .assume{list-style:none; padding:0; margin:12px 0 14px; border-left:3px solid var(--ink); font-size:16px}
  .assume li{padding:5px 14px; border-bottom:1px solid var(--rule)}
  .assume li:last-child{border-bottom:0}
  .assume b{font-family:var(--display); font-variation-settings:'wdth' 85; font-weight:600; font-size:14px; text-transform:uppercase; letter-spacing:.03em; margin-right:8px}
  details{border:1px solid var(--rule); padding:10px 14px; margin-bottom:10px; background:rgba(255,255,255,.28)}
  summary{cursor:pointer; font-family:var(--display); font-variation-settings:'wdth' 85; font-weight:600; font-size:15px}
  details p{margin:8px 0 2px; font-size:16px}
  .credit{margin-top:28px; border-top:1.5px solid var(--ink); padding-top:14px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px 24px; font-family:var(--mono); font-size:12px; color:var(--ink-2)}
  .credit a{color:var(--ink); text-decoration-color:var(--rule); text-underline-offset:3px}
  .credit a:hover{text-decoration-color:var(--ink)}
  footer{margin-top:40px; font-family:var(--mono); font-size:11.5px; color:var(--ink-3); border-top:1px solid var(--rule); padding-top:12px}

  @media (max-width:900px){
    .lab{grid-template-columns:1fr}
    .stage{position:static}
    header{grid-template-columns:1fr}
    .legend{flex-direction:row; flex-wrap:wrap; gap:8px 16px}
    .learn{grid-template-columns:1fr}
  }