:root{
  --paper:#F2F0E9;
  --paper-dim:#E8E5DA;
  --ink:#211F1B;
  --ink-soft:#57544C;
  --pine:#2C4634;
  --pine-deep:#1D3024;
  --rust:#B15E2A;
  --line:#C9C4B4;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Source Serif 4', serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
.mono{font-family:'IBM Plex Mono', monospace; letter-spacing:0.02em;}
.display{font-family:'Fraunces', serif;}

/* ---- Header ---- */
header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px;
  background:rgba(242,240,233,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.logo{
  font-family:'IBM Plex Mono', monospace;
  font-weight:600;
  font-size:17px;
  letter-spacing:0.03em;
  color:var(--pine-deep);
  cursor:pointer;
  background:none; border:none;
}
.logo span{color:var(--rust);}
nav{display:flex; gap:4px; flex-wrap:wrap;}
nav a{
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  background:none;
  border:none;
  color:var(--ink-soft);
  padding:8px 12px;
  cursor:pointer;
  border-radius:2px;
  transition:color .15s, background .15s;
  display:inline-block;
}
nav a:hover{color:var(--ink); background:var(--paper-dim);}
nav a.active{color:var(--paper); background:var(--pine);}
nav a:focus-visible, .logo:focus-visible, .card:focus-visible, input:focus-visible, textarea:focus-visible, .submit-btn:focus-visible{
  outline:2px solid var(--rust); outline-offset:2px;
}

/* ---- Boundary marker divider (signature element) ---- */
.marker-line{
  display:flex; align-items:center; gap:10px;
  margin:56px 0;
  color:var(--ink-soft);
}
.marker-line .tick{flex:0 0 auto; width:1px; height:14px; background:var(--line);}
.marker-line .rule{flex:1; height:1px; background:var(--line); position:relative;}
.marker-line .rule::before{
  content:''; position:absolute; left:0; top:-1px; height:3px; width:100%;
  background:#FFFFFF;
  opacity:0.9;
}
.marker-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.08em;
  white-space:nowrap;
  color:var(--pine-deep);
}

main{max-width:920px; margin:0 auto; padding:0 32px 120px;}
.page-fade{animation:fadeIn .3s ease;}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

/* ---- Home ---- */
.hero{padding:72px 0 8px;}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--rust); margin-bottom:18px;
}
h1.wordmark{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:clamp(38px, 7vw, 72px);
  line-height:0.95;
  margin:0 0 28px;
  color:var(--pine-deep);
}
.wordmark em{font-style:italic; font-weight:300; color:var(--rust);}
.lede{
  font-size:19px; line-height:1.65; max-width:560px; color:var(--ink);
}

/* ---- Recently (featured rotator) ---- */
.featured-wrap{position:relative; margin-top:8px;}
.featured-card{
  display:none; grid-template-columns:220px 1fr; align-items:stretch;
  border:1px solid var(--line); background:var(--paper-dim);
}
.featured-card.active{display:grid; animation:fadeIn .4s ease;}
.featured-visual{min-height:200px; background-size:cover; background-position:center;}
.featured-info{padding:26px 26px 26px 24px; display:flex; flex-direction:column; justify-content:center;}
.featured-tag{font-size:11px; color:var(--rust); display:block; margin-bottom:10px;}
.featured-info h3{font-family:'Fraunces', serif; font-weight:500; font-size:28px; margin:0 0 10px; color:var(--pine-deep);}
.featured-info p{font-size:15.5px; line-height:1.6; color:var(--ink-soft); margin:0 0 18px; max-width:440px;}
.featured-link{
  align-self:flex-start; font-family:'IBM Plex Mono', monospace; font-size:12px; text-transform:uppercase;
  letter-spacing:0.05em; background:none; border:none; color:var(--pine-deep); cursor:pointer; padding:0 0 2px;
  border-bottom:1px solid var(--pine-deep); display:inline-block;
}
.featured-link:hover{color:var(--rust); border-color:var(--rust);}
.featured-dots{display:flex; gap:8px; justify-content:center; margin-top:16px;}
.featured-dots .dot{width:7px; height:7px; border-radius:50%; background:var(--line); border:none; cursor:pointer; padding:0;}
.featured-dots .dot.active{background:var(--pine);}

/* ---- More from CountyLine ---- */
.more-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:8px;}
.more-card{
  border:1px solid var(--line); padding:18px 16px; cursor:pointer;
  background:var(--paper); transition:transform .15s, border-color .15s;
  text-align:left; font-family:inherit; color:inherit; display:block;
}
.more-card:hover{transform:translateY(-2px); border-color:var(--pine);}
.more-card .mono{font-size:10.5px; color:var(--rust); display:block; margin-bottom:7px;}
.more-card h4{font-family:'Fraunces', serif; font-size:16.5px; margin:0 0 5px; font-weight:500;}
.more-card p{font-size:13px; color:var(--ink-soft); margin:0; line-height:1.5;}

/* ---- Home visuals carousel ---- */
.visual-carousel{display:flex; align-items:center; gap:10px; margin-top:8px;}
.carousel-track{
  display:flex; gap:14px; overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x mandatory;
  padding-bottom:4px;
}
.carousel-track::-webkit-scrollbar{height:6px;}
.carousel-track::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px;}
.carousel-track .archive-tile{flex:0 0 200px; scroll-snap-align:start;}
.carousel-arrow{
  flex:0 0 auto; width:34px; height:34px; border:1px solid var(--line); background:var(--paper-dim);
  color:var(--pine-deep); font-size:16px; cursor:pointer; border-radius:2px;
}
.carousel-arrow:hover{border-color:var(--pine); background:var(--paper);}

/* ---- Section headers ---- */
.page-head{padding-top:64px;}
.page-head h2{
  font-family:'Fraunces', serif; font-weight:500; font-size:clamp(32px,5vw,48px);
  margin:0 0 12px; color:var(--pine-deep);
}
.page-head p{color:var(--ink-soft); font-size:16px; max-width:520px; margin:0;}

/* ---- Articles / listing rows ---- */
.article-list{display:flex; flex-direction:column;}
.article-row{
  display:flex; align-items:center;
  gap:20px; padding:26px 0; border-bottom:1px solid var(--line);
}
.article-row:hover h3{color:var(--rust);}
.article-row .thumb{
  flex:0 0 88px; width:88px; height:88px; object-fit:cover; border:1px solid var(--line);
}
.article-row .meta{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-soft); flex:0 0 110px;}
.article-row .body{flex:1;}
.article-row h3{font-family:'Fraunces', serif; font-weight:500; font-size:22px; margin:0 0 8px; transition:color .15s;}
.article-row p{margin:0; color:var(--ink-soft); font-size:14.5px; line-height:1.55; max-width:520px;}
.status-tag{
  font-family:'IBM Plex Mono', monospace; font-size:10px; text-transform:uppercase;
  letter-spacing:0.06em; padding:3px 7px; border:1px solid var(--line); color:var(--ink-soft);
}

/* ---- Archives ---- */
.archive-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:8px;}
.archive-tile{
  aspect-ratio:4/5; border:1px solid var(--line); position:relative; overflow:hidden;
  display:flex; align-items:flex-end; padding:14px;
}
.archive-tile .cap{font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--paper); position:relative; z-index:1;}
.archive-tile{background-size:cover; background-position:center;}
.archive-tile::before{content:''; position:absolute; inset:0;}
.archive-tile.t1::before{background:linear-gradient(160deg,#3B5744,#20301F);}
.archive-tile.t2::before{background:linear-gradient(160deg,#8A6B45,#4A3A28);}
.archive-tile.t3::before{background:linear-gradient(160deg,#5B6B6C,#2B3839);}
.archive-tile.t4::before{background:linear-gradient(160deg,#9C5A34,#5A3319);}
.archive-tile.t5::before{background:linear-gradient(160deg,#46504A,#232B26);}
.archive-tile.t6::before{background:linear-gradient(160deg,#7A7057,#3E3826);}
.archive-tile.has-image::before{background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.6) 100%);}

/* ---- Projects ---- */
.project-item{border-left:2px solid var(--pine); padding:6px 0 6px 22px; margin-bottom:34px; display:block;}
.project-item .mono{font-size:11px; color:var(--rust); text-transform:uppercase; letter-spacing:0.06em;}
.project-item h3{font-family:'Fraunces', serif; font-size:22px; font-weight:500; margin:8px 0 8px;}
.project-item p{color:var(--ink-soft); font-size:15px; line-height:1.6; max-width:560px; margin:0;}

/* ---- Products ---- */
.products-empty{
  border:1px dashed var(--line); padding:60px 30px; text-align:center; margin-top:20px;
}
.products-empty p.display{font-size:24px; color:var(--pine-deep); margin:0 0 10px;}
.products-empty p.mono{font-size:12px; color:var(--ink-soft); margin:0;}

/* ---- About / long-form body copy ---- */
.about-body{font-size:17px; line-height:1.75; max-width:620px; margin-bottom:20px;}
.about-body strong{color:var(--pine-deep); font-weight:600;}

/* ---- Post detail page ---- */
.post-visual{aspect-ratio:16/6; border:1px solid var(--line); margin-bottom:40px; background-size:cover; background-position:center;}
.post-visual.t1{background:linear-gradient(160deg,#3B5744,#20301F);}
.post-visual.t2{background:linear-gradient(160deg,#8A6B45,#4A3A28);}
.post-visual.t3{background:linear-gradient(160deg,#5B6B6C,#2B3839);}
.post-visual.t4{background:linear-gradient(160deg,#9C5A34,#5A3319);}
.post-visual.t5{background:linear-gradient(160deg,#46504A,#232B26);}
.post-visual.t6{background:linear-gradient(160deg,#7A7057,#3E3826);}
.post-body{font-size:17px; line-height:1.75; max-width:640px;}
.post-body p{margin:0 0 20px;}
.post-body h2, .post-body h3{font-family:'Fraunces', serif; font-weight:500; color:var(--pine-deep); margin:34px 0 12px;}
.post-body ul, .post-body ol{margin:0 0 20px; padding-left:22px;}
.post-body li{margin-bottom:8px;}
.post-body a{color:var(--pine); text-decoration:underline;}
.post-body img{max-width:100%; height:auto; display:block; border:1px solid var(--line); margin:28px 0;}
.post-body figcaption{font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--ink-soft); margin:-20px 0 28px;}
.post-body .video-embed{position:relative; padding-bottom:56.25%; height:0; margin:28px 0; border:1px solid var(--line); background:var(--paper-dim);}
.post-body .video-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.back-link{
  display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:12px; text-transform:uppercase;
  letter-spacing:0.05em; color:var(--ink-soft); margin-top:48px; border-top:1px solid var(--line); padding-top:20px;
}
.back-link:hover{color:var(--pine-deep);}

/* ---- Contact ---- */
form{max-width:480px; margin-top:20px;}
label{display:block; font-family:'IBM Plex Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); margin:0 0 6px;}
input, textarea{
  width:100%; padding:11px 12px; margin-bottom:20px; font-family:'Source Serif 4', serif;
  font-size:15px; background:var(--paper-dim); border:1px solid var(--line); color:var(--ink);
  border-radius:2px;
}
textarea{resize:vertical; min-height:110px;}
.submit-btn{
  font-family:'IBM Plex Mono', monospace; font-size:12.5px; text-transform:uppercase; letter-spacing:0.05em;
  background:var(--pine); color:var(--paper); border:none; padding:12px 22px; cursor:pointer; border-radius:2px;
}
.submit-btn:hover{background:var(--pine-deep);}
.contact-note{font-size:13px; color:var(--ink-soft); margin-top:16px; max-width:480px; line-height:1.5;}

/* ---- Legal (Privacy / Terms) ---- */
.legal-body{max-width:640px;}
.legal-body h3{font-family:'Fraunces', serif; font-weight:500; font-size:19px; color:var(--pine-deep); margin:34px 0 10px;}
.legal-body h3:first-child{margin-top:0;}
.legal-body p{font-size:15px; line-height:1.7; color:var(--ink); margin:0 0 14px;}
.legal-body ul{margin:0 0 14px; padding-left:20px;}
.legal-body li{font-size:15px; line-height:1.7; color:var(--ink); margin-bottom:6px;}
.legal-body a{color:var(--pine); text-decoration:underline;}

footer{
  border-top:1px solid var(--line); padding:24px 32px 20px; margin-top:80px;
  display:flex; flex-direction:column; gap:14px;
  font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-soft);
}
.footer-top{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}
.footer-legal{
  display:flex; justify-content:center; align-items:center; gap:10px;
  text-align:center;
}
.footer-legal a{
  font-family:inherit; font-size:inherit; letter-spacing:inherit; color:inherit;
  background:none; border:none; cursor:pointer; padding:0;
}
.footer-legal a:hover{color:var(--ink);}
.footer-legal .dot{opacity:0.5;}

@media(max-width:720px){
  header{padding:14px 18px; flex-wrap:wrap; gap:10px;}
  nav{gap:0; width:100%; justify-content:flex-start; overflow-x:auto;}
  main{padding:0 18px 100px;}
  .archive-grid{grid-template-columns:repeat(2,1fr);}
  .article-row{flex-direction:column; align-items:flex-start; gap:6px;}
  .article-row .meta{flex:none;}
  .article-row .thumb{width:100%; height:auto; aspect-ratio:16/9;}
  .featured-card{grid-template-columns:1fr;}
  .featured-visual{min-height:140px;}
  .featured-info{padding:20px;}
  .more-grid{grid-template-columns:1fr;}
  .carousel-track .archive-tile{flex:0 0 160px;}
}