:root{
    --ink:#1b2019;
    --paper:#e9ece0;
    --card:#f5f4ec;
    --euc:#2f5d3a;
    --euc-deep:#1e3c27;
    --ochre:#b9772f;
    --teal:#0e8c86;
    --gold:#e2a72c;
    --line:rgba(30,60,39,.16);
    --muted:#566052;
    --display:'Bricolage Grotesque',serif;
    --body:'Inter',system-ui,sans-serif;
    --mono:'Space Mono',monospace;
    --maxw:1080px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;background:var(--paper);color:var(--ink);
    font-family:var(--body);font-size:17px;line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit}
  img{max-width:100%}

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  main{min-height:60vh}
  .page{display:none;animation:fade .4s ease both}
  .page.active{display:block}
  @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){.page{animation:none}}

  header.site{position:sticky;top:0;z-index:50;background:rgba(233,236,224,.86);
    backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
    max-width:var(--maxw);margin:0 auto;padding:14px 24px}
  .brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;font-family:var(--display);
    font-weight:800;font-size:1.35rem;letter-spacing:-.02em;color:var(--euc-deep)}
  .brand .pc{font-family:var(--mono);font-size:.7rem;font-weight:700;color:var(--paper);
    background:var(--euc);padding:3px 7px;border-radius:5px;letter-spacing:.04em;transform:translateY(-3px)}
  nav.main{display:flex;gap:4px;flex-wrap:wrap}
  nav.main a{font-family:var(--mono);font-size:.78rem;text-decoration:none;color:var(--muted);
    padding:7px 11px;border-radius:7px;letter-spacing:.01em;transition:.18s}
  nav.main a:hover{color:var(--euc-deep);background:rgba(47,93,58,.09)}
  nav.main a.on{color:var(--paper);background:var(--euc)}
  .navtoggle{display:none;background:none;border:1px solid var(--line);border-radius:8px;
    padding:8px 12px;font-family:var(--mono);font-size:.8rem;cursor:pointer;color:var(--euc-deep)}

  .hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
  .heroart{position:absolute;inset:0;width:100%;height:100%;z-index:0}
  .heroinner{position:relative;z-index:2;padding:78px 0 220px}
  .eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--teal);font-weight:700;margin:0 0 18px}
  h1.lead{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:.98;
    font-size:clamp(2.8rem,7vw,5.2rem);margin:0 0 22px;color:var(--euc-deep);max-width:15ch}
  .lede{font-size:clamp(1.05rem,2.2vw,1.3rem);max-width:50ch;color:#33402f;margin:0 0 30px}
  .herobtns{display:flex;gap:12px;flex-wrap:wrap}
  .btn{font-family:var(--mono);font-size:.82rem;text-decoration:none;padding:12px 18px;border-radius:9px;
    font-weight:700;letter-spacing:.02em;transition:.18s;display:inline-block}
  .btn.solid{background:var(--euc);color:var(--paper)}
  .btn.solid:hover{background:var(--euc-deep)}
  .btn.ghost{border:1px solid var(--euc);color:var(--euc-deep)}
  .btn.ghost:hover{background:rgba(47,93,58,.08)}

  .facts{position:relative;z-index:2;background:var(--euc-deep);color:#dfe7d6}
  .facts .row{display:flex;flex-wrap:wrap;gap:0;max-width:var(--maxw);margin:0 auto}
  .fact{flex:1 1 160px;padding:18px 22px;border-right:1px solid rgba(255,255,255,.1)}
  .fact:last-child{border-right:0}
  .fact b{display:block;font-family:var(--display);font-weight:700;font-size:1.5rem;color:#fff;line-height:1.1}
  .fact span{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;opacity:.72}

  .phead{padding:64px 0 30px}
  .phead .eyebrow{color:var(--ochre)}
  .ptitle{font-family:var(--display);font-weight:800;letter-spacing:-.025em;
    font-size:clamp(2rem,4.6vw,3.1rem);line-height:1.02;margin:0 0 18px;color:var(--euc-deep);max-width:18ch}
  .pintro{font-size:1.12rem;max-width:62ch;color:#33402f;margin:0}

  section.block{padding:14px 0 40px}
  h3.sec{font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:-.01em;
    margin:36px 0 6px;color:var(--euc-deep)}
  .sec-k{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
    color:var(--teal);font-weight:700;margin:0 0 22px}
  p.body{max-width:64ch;margin:0 0 16px}

  .grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));margin:8px 0 10px}
  .card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;
    transition:.2s;display:flex;flex-direction:column}
  a.card{text-decoration:none}
  a.card:hover{transform:translateY(-3px);border-color:var(--euc);box-shadow:0 14px 30px -18px rgba(30,60,39,.4)}
  .card .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ochre);font-weight:700}
  .card h4{font-family:var(--display);font-weight:700;font-size:1.22rem;margin:8px 0 7px;color:var(--euc-deep);letter-spacing:-.01em}
  .card p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.55}
  .card .meta{margin-top:14px;font-family:var(--mono);font-size:.72rem;color:var(--teal);font-weight:700}
  .arrow{margin-top:auto;padding-top:16px;font-family:var(--mono);font-size:.74rem;color:var(--euc);font-weight:700}

  .listing{border-top:1px solid var(--line);padding:20px 0;display:grid;grid-template-columns:1fr auto;gap:8px 24px;align-items:start}
  .listing:last-child{border-bottom:1px solid var(--line)}
  .listing h4{font-family:var(--display);font-weight:700;font-size:1.25rem;margin:0 0 5px;color:var(--euc-deep)}
  .listing p{margin:0;color:var(--muted);font-size:.96rem;max-width:60ch}
  .listing .addr{font-family:var(--mono);font-size:.74rem;color:var(--teal);text-align:right;white-space:nowrap}
  .listing .links{margin-top:9px;font-family:var(--mono);font-size:.72rem;letter-spacing:.02em}
  .listing .links a{color:var(--teal);text-decoration:none;font-weight:700}
  .listing .links a:hover{text-decoration:underline}
  .listing .links .sep{color:var(--muted);margin:0 7px}
  .listing .links .none{color:var(--muted);font-weight:400}
  @media(max-width:620px){.listing{grid-template-columns:1fr}.listing .addr{text-align:left}}

  .note{background:rgba(14,140,134,.08);border:1px solid rgba(14,140,134,.28);border-radius:12px;
    padding:16px 20px;font-size:.92rem;color:#234b48;margin:26px 0;max-width:64ch}
  .note b{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);display:block;margin-bottom:4px}

  /* photo slot: marks where a real image goes, with its source */
  .photoslot{position:relative;border:1.5px dashed rgba(30,60,39,.4);border-radius:14px;
    background:repeating-linear-gradient(45deg,rgba(47,93,58,.05),rgba(47,93,58,.05) 12px,transparent 12px,transparent 24px);
    min-height:200px;display:flex;flex-direction:column;justify-content:center;align-items:center;
    text-align:center;padding:28px 24px;margin:8px 0 6px;gap:8px}
  .photoslot.tall{min-height:300px}
  .photoslot .cam{width:34px;height:34px;opacity:.55}
  .photoslot .shot{font-family:var(--display);font-weight:700;font-size:1.1rem;color:var(--euc-deep);max-width:34ch}
  .photoslot .src{font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--muted);max-width:46ch;line-height:1.5}
  .photoslot .tag{position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:.62rem;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;background:var(--euc);color:var(--paper);padding:4px 9px;border-radius:5px}
  .photoslot .tag.free{background:var(--teal)}
  .photoslot .tag.perm{background:var(--ochre)}
  .photoslot .tag.shoot{background:var(--euc-deep)}

  /* embedded real photo with credit */
  figure.photo{margin:8px 0 6px;border-radius:14px;overflow:hidden;border:1px solid var(--line);position:relative;background:#dfe3d6}
  figure.photo img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
  figure.photo.tall img{aspect-ratio:16/11}
  figure.photo figcaption{font-family:var(--mono);font-size:.7rem;letter-spacing:.02em;color:var(--muted);
    padding:9px 14px;background:var(--card);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
  figure.photo figcaption a{color:var(--teal);text-decoration:none;font-weight:700}
  figure.photo figcaption a:hover{text-decoration:underline}
  figure.photo .cap-shot{color:var(--euc-deep)}
  figure.photo .phtag{position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:.62rem;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;background:var(--ochre);color:var(--paper);padding:4px 9px;border-radius:5px;z-index:2}
  figure.photo.ph img{filter:saturate(.92)}

  .crosslinks{margin:40px 0 10px;padding:26px 0;border-top:1px solid var(--line)}
  .crosslinks .sec-k{margin-bottom:14px}
  .chips{display:flex;flex-wrap:wrap;gap:10px}
  .chip{font-family:var(--mono);font-size:.78rem;text-decoration:none;padding:8px 14px;border-radius:20px;
    border:1px solid var(--euc);color:var(--euc-deep);transition:.18s}
  .chip:hover{background:var(--euc);color:var(--paper)}

  footer.site{background:var(--euc-deep);color:#cfdac6;margin-top:50px;padding:54px 0 34px}
  footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:34px}
  footer h5{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#9fb697;margin:0 0 14px}
  footer a{display:block;text-decoration:none;color:#dfe7d6;font-size:.92rem;padding:4px 0;opacity:.9}
  footer a:hover{opacity:1;color:#fff}
  footer .fbrand{font-family:var(--display);font-weight:800;font-size:1.7rem;color:#fff;letter-spacing:-.02em;margin:0 0 8px}
  footer .fnote{font-size:.82rem;opacity:.7;max-width:34ch;line-height:1.55}
  footer .base{margin-top:36px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);
    font-family:var(--mono);font-size:.72rem;opacity:.6;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
  @media(max-width:760px){footer .cols{grid-template-columns:1fr 1fr}}
  @media(max-width:520px){footer .cols{grid-template-columns:1fr}}

  @media(max-width:860px){
    .navtoggle{display:block}
    nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);
      border-bottom:1px solid var(--line);flex-direction:column;padding:10px 24px 18px;gap:2px}
    nav.main.open{display:flex}
    nav.main a{padding:11px 12px;font-size:.9rem}
    header.site{position:relative}
  }
  :focus-visible{outline:2.5px solid var(--teal);outline-offset:3px;border-radius:4px}

/* standalone multi-page: always show page sections */
.page{display:block}