/* thegardenshouston.com ("Under the Oaks") — style-v1
   Departments-grid archetype: the homepage is four category blocks, not a
   stream. Typographic wordmark in the header (no image mark); logo.png runs
   large in the footer instead. Nav collapses at 960px — measured need 987px
   at full width, so the fold appears just before the collision. */

:root{
  --page:#fdfcf9;
  --ink:#22261f;
  --soft:#6f7568;
  --oak:#4a6741;
  --terra:#a2542f;
  --line:#e5e2d8;
  --belt:1160px;
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--page);color:var(--ink);
  font-family:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--oak)}
p{text-wrap:pretty}
h1,h2,h3{margin:0;font-family:"EB Garamond",Georgia,serif;text-wrap:balance}

.belt{width:100%;max-width:var(--belt);margin:0 auto;padding:0 30px}

/* header: typographic wordmark only */
.band{background:var(--page);border-bottom:1px solid var(--line)}
.beltrow{display:flex;align-items:center;justify-content:space-between;gap:56px;padding-top:22px;padding-bottom:20px}
.word{display:flex;flex-direction:column;text-decoration:none;color:inherit;line-height:1.12;flex:0 0 auto}
.word b{font-family:"EB Garamond",Georgia,serif;font-weight:600;font-size:27px;letter-spacing:.005em}
.word i{font-style:italic;font-size:13px;color:var(--soft);font-family:"EB Garamond",Georgia,serif}
.spread{display:flex;align-items:center;gap:24px}
.spread a{
  color:var(--ink);text-decoration:none;font-size:15px;white-space:nowrap;
  padding-bottom:3px;border-bottom:2px solid transparent;
}
.spread a:hover{border-bottom-color:var(--oak)}
.spread a.at{border-bottom-color:var(--terra);color:var(--terra)}
.fold{display:none}

@media (max-width:960px){
  .beltrow{gap:0}
  .spread{display:none}
  .fold{display:block}
  .fold summary{
    list-style:none;display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;padding:10px;cursor:pointer;
  }
  .fold summary::-webkit-details-marker{display:none}
  .fold summary span{display:block;height:2px;background:var(--ink);border-radius:2px}
  .foldout{
    position:absolute;left:0;right:0;z-index:20;background:var(--page);
    border-bottom:1px solid var(--line);display:flex;flex-direction:column;padding:2px 30px 14px;
  }
  .foldout a{color:var(--ink);text-decoration:none;font-size:16px;padding:12px 0;border-bottom:1px solid var(--line)}
  .foldout a.at{color:var(--terra)}
  .band{position:relative}
}

.topshot img{width:100%;height:420px;object-fit:cover}
@media (max-width:960px){.topshot img{height:260px}}

.sheet{padding-top:48px;padding-bottom:70px}
.say{max-width:680px;margin-bottom:52px}
.say h1{font-size:clamp(30px,4.5vw,43px);font-weight:600;line-height:1.13;margin-bottom:14px}
.say p{margin:0;color:var(--soft);font-size:17.5px}

/* departments grid */
.depts{display:grid;grid-template-columns:repeat(2,1fr);gap:52px 46px}
@media (max-width:820px){.depts{grid-template-columns:1fr;gap:44px}}
.depthead{
  font-size:13px;font-family:Archivo,sans-serif;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;padding-bottom:10px;border-bottom:2px solid var(--ink);margin-bottom:16px;
}
.depthead a{color:var(--ink);text-decoration:none}
.depthead a:hover{color:var(--terra)}
.deptpic{display:block;margin-bottom:14px}
.deptpic img{width:100%;aspect-ratio:16/9;object-fit:cover}
.deptlist{list-style:none;margin:0;padding:0}
.deptlist li{display:flex;justify-content:space-between;gap:18px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line)}
.deptlist li:last-child{border-bottom:0}
.deptlist a{
  color:var(--ink);text-decoration:none;font-family:"EB Garamond",Georgia,serif;
  font-size:19px;line-height:1.3;
}
.deptlist a:hover{color:var(--oak)}
.deptlist span{font-size:12px;color:var(--soft);white-space:nowrap;font-variant-numeric:tabular-nums}

/* briefs (category pages + more-in) */
.briefs{display:flex;flex-direction:column;gap:30px}
.brief{display:flex;gap:24px;align-items:flex-start}
.brief .briefpic{flex:0 0 240px}
.brief .briefpic img{width:100%;aspect-ratio:3/2;object-fit:cover}
.brief h3{font-size:22px;font-weight:600;line-height:1.25;margin:6px 0 7px}
.brief h3 a{color:var(--ink);text-decoration:none}
.brief h3 a:hover{color:var(--oak)}
.brief p{margin:0;color:var(--soft);font-size:16px}
@media (max-width:640px){.brief{flex-direction:column;gap:12px}.brief .briefpic{flex:none;width:100%}}
.stub{font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--terra)}

/* article */
.text{max-width:700px}
.text h1{font-size:clamp(28px,4.3vw,40px);font-weight:600;line-height:1.15;margin:9px 0 12px}
.hand{color:var(--soft);font-size:14px;margin:0 0 26px}
.textpic{margin:0 0 28px}
.textpic img{width:100%;aspect-ratio:3/2;object-fit:cover}
.say2{
  font-family:"EB Garamond",Georgia,serif;font-size:21px;line-height:1.48;
  margin:0 0 30px;padding-left:20px;border-left:3px solid var(--oak);
}
.text h2{font-size:25px;font-weight:600;line-height:1.28;margin:36px 0 12px}
.text p{margin:0 0 17px}
.text a{text-underline-offset:3px}
.alongside{margin-top:68px;padding-top:34px;border-top:2px solid var(--ink);max-width:860px}
.alonghead{
  font-family:Archivo,sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--terra);margin-bottom:26px;
}

/* footer: centred logo block */
.closing{margin-top:64px;border-top:1px solid var(--line);background:#f4f1e9}
.closemid{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:44px;padding-bottom:38px}
.closemark{width:74px;height:auto;margin-bottom:14px}
.closename{
  font-family:"EB Garamond",Georgia,serif;font-size:22px;font-weight:600;margin:0 0 4px;color:var(--ink);
}
.closetag{margin:0 0 20px;font-size:14px;color:var(--soft);font-style:italic}
.closelinks{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-bottom:20px}
.closelinks a{color:var(--soft);text-decoration:none;font-size:14.5px}
.closelinks a:hover{color:var(--oak)}
.closefine{margin:0;font-size:13px;color:var(--soft)}