/* Silent Griffin — shared lattice design system */

:root{
  --lattice-charcoal:#2A3136;
  --washi-green:#4C7358;
  --screen-grey:#B4BAB8;
  --shoji-white:#FBFBF9;
  --paper-grey:#EBEEEC;
  --cinnabar:#A54634;
  --frame-black:#171C1F;
  --soft-slate:#4A5457;
  --rule-w:1px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:linear-gradient(to bottom, var(--shoji-white), var(--paper-grey));
  color:var(--soft-slate);
  font-family:'Source Sans 3','Segoe UI',Arial,sans-serif;
  font-size:16.5px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,.font-head{
  font-family:'DM Sans','Segoe UI',Arial,sans-serif;
  font-weight:700;
  color:var(--frame-black);
  line-height:1.2;
}

.font-mono,.caption,code,.figure{
  font-family:'Space Mono','Courier New',monospace;
  font-weight:400;
  font-size:12px;
  letter-spacing:0.02em;
}

a{color:inherit;text-decoration:none;}

/* Focus outline — visible 3px offset everywhere */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--cinnabar);
  outline-offset:3px;
}

/* Lattice grid system */
.lattice{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:var(--rule-w) solid var(--lattice-charcoal);
  border-left:var(--rule-w) solid var(--lattice-charcoal);
}
.pane{
  border-right:var(--rule-w) solid var(--lattice-charcoal);
  border-bottom:var(--rule-w) solid var(--lattice-charcoal);
  padding:2.25rem 1.75rem;
  background:var(--shoji-white);
  transition:background-color .18s ease, border-color .18s ease;
}
.pane.tint{background:var(--paper-grey);}
.pane:hover{background:#E4E8E5;border-color:var(--lattice-charcoal);border-width:2px;}
.pane.span-2{grid-column:span 2;}
.pane.span-3{grid-column:span 3;}
.pane.span-4{grid-column:span 4;}

@media (max-width:900px){
  .lattice{grid-template-columns:repeat(2,1fr);}
  .pane.span-3,.pane.span-4{grid-column:span 2;}
}
@media (max-width:620px){
  .lattice{grid-template-columns:1fr;}
  .pane.span-2,.pane.span-3,.pane.span-4{grid-column:span 1;}
}

/* Top bar */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.5rem;
  background:var(--shoji-white);
  border-bottom:var(--rule-w) solid var(--lattice-charcoal);
}
.logo{
  font-family:'DM Sans',sans-serif;font-weight:700;font-size:1.15rem;color:var(--frame-black);
  letter-spacing:0.01em;
}
.nav-links{display:flex;gap:1.75rem;align-items:center;}
.nav-links a{
  font-size:0.95rem;color:var(--soft-slate);padding:0.35rem 0.1rem;border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.nav-links a:hover,.nav-links a.active{color:var(--frame-black);border-color:var(--washi-green);}

.btn{
  display:inline-block;padding:0.65rem 1.4rem;border:1.5px solid var(--cinnabar);color:var(--cinnabar);
  font-family:'DM Sans',sans-serif;font-weight:700;font-size:0.92rem;border-radius:2px;
  transition:background-color .15s ease,color .15s ease;
  background:transparent;cursor:pointer;
}
.btn:hover{background:var(--cinnabar);color:var(--shoji-white);}
.btn-solid{background:var(--cinnabar);color:var(--shoji-white);border-color:var(--cinnabar);}
.btn-solid:hover{background:#8A3A2B;border-color:#8A3A2B;}

/* Burger */
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:0.4rem;}
.burger span{width:22px;height:2px;background:var(--frame-black);display:block;}
.mobile-nav{display:none;flex-direction:column;gap:0;border-bottom:var(--rule-w) solid var(--lattice-charcoal);background:var(--shoji-white);}
.mobile-nav a{padding:0.9rem 1.5rem;border-top:var(--rule-w) solid var(--screen-grey);font-size:0.95rem;}
@media (max-width:860px){
  .nav-links{display:none;}
  .burger{display:flex;}
}

/* Lattice index (section grid) */
.lattice-index{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:var(--rule-w) solid var(--lattice-charcoal);
  border-left:var(--rule-w) solid var(--lattice-charcoal);
}
.lattice-index a{
  border-right:var(--rule-w) solid var(--lattice-charcoal);
  border-bottom:var(--rule-w) solid var(--lattice-charcoal);
  padding:0.85rem 0.9rem;font-size:0.82rem;color:var(--soft-slate);
  font-family:'Space Mono',monospace;
  transition:background-color .15s ease;
}
.lattice-index a:hover{background:var(--paper-grey);color:var(--frame-black);}
@media (max-width:900px){.lattice-index{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.lattice-index{grid-template-columns:1fr;}}

/* Chips */
.chip{
  display:inline-block;padding:0.4rem 0.95rem;border:1px solid var(--screen-grey);color:var(--soft-slate);
  font-size:0.85rem;border-radius:999px;background:transparent;cursor:default;
}
.chip.selected{background:var(--cinnabar);border-color:var(--cinnabar);color:var(--shoji-white);}

/* Retrieval example */
.retrieval{
  display:grid;grid-template-columns:1fr 1fr;
  border-top:var(--rule-w) solid var(--lattice-charcoal);border-left:var(--rule-w) solid var(--lattice-charcoal);
}
.retrieval > div{
  border-right:var(--rule-w) solid var(--lattice-charcoal);border-bottom:var(--rule-w) solid var(--lattice-charcoal);
  padding:1.75rem;
}
@media (max-width:620px){.retrieval{grid-template-columns:1fr;}}

/* Access panel table */
.access-table{width:100%;border-collapse:collapse;}
.access-table th,.access-table td{
  border:var(--rule-w) solid var(--screen-grey);padding:0.75rem 1rem;text-align:left;font-size:0.92rem;
}
.access-table th{background:var(--paper-grey);font-family:'DM Sans',sans-serif;color:var(--washi-green);font-weight:700;font-size:0.85rem;text-transform:uppercase;letter-spacing:0.03em;}
@media (max-width:620px){
  .access-table thead{display:none;}
  .access-table,.access-table tbody,.access-table tr,.access-table td{display:block;width:100%;}
  .access-table tr{border:var(--rule-w) solid var(--screen-grey);margin-bottom:0.75rem;}
  .access-table td{border:none;border-bottom:1px solid var(--screen-grey);}
  .access-table td:before{content:attr(data-label);display:block;font-family:'Space Mono',monospace;font-size:11px;color:var(--washi-green);margin-bottom:0.2rem;}
}

footer{border-top:var(--rule-w) solid var(--lattice-charcoal);background:var(--shoji-white);}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);border-left:var(--rule-w) solid var(--lattice-charcoal);}
.footer-grid > div{border-right:var(--rule-w) solid var(--lattice-charcoal);padding:1.75rem;}
@media (max-width:900px){.footer-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.footer-grid{grid-template-columns:1fr;}}
.footer-grid a{display:block;padding:0.25rem 0;font-size:0.9rem;color:var(--soft-slate);}
.footer-grid a:hover{color:var(--washi-green);}

.hero-img{width:100%;height:280px;object-fit:cover;border-bottom:var(--rule-w) solid var(--lattice-charcoal);}

details summary{cursor:pointer;font-family:'DM Sans',sans-serif;font-weight:700;color:var(--frame-black);}
details{border-bottom:var(--rule-w) solid var(--screen-grey);padding:1rem 0;}

.eyebrow{font-family:'Space Mono',monospace;font-size:12px;color:var(--washi-green);letter-spacing:0.06em;text-transform:uppercase;margin-bottom:0.5rem;display:block;}

.price{font-family:'Space Mono',monospace;font-size:1.4rem;color:var(--frame-black);}

.simple-wrap{max-width:760px;margin:0 auto;padding:3rem 1.5rem;}