/* Liquid Forest — editorial aquascaping catalog
   type: Georgia/Palatino display + system mono labels, no webfont deps */
:root{
  --ink:#10140f;
  --ink-soft:#3c4438;
  --paper:#f4f1e8;
  --paper-2:#eae5d6;
  --line:#c9c2ad;
  --line-strong:#8f8a76;
  --moss:#2f5d3a;
  --moss-deep:#1d3b26;
  --rust:#a8451f;
  --amber:#c98a1e;
  --water:#1f5f6b;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono","Cascadia Mono",Consolas,"DejaVu Sans Mono",monospace;
  --sans:"Inter","Segoe UI",Helvetica,Arial,sans-serif;
  --gut:clamp(16px,3.2vw,40px);
  --maxw:1420px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:17px;line-height:1.62;
  background-image:
    repeating-linear-gradient(90deg,rgba(16,20,15,.028) 0 1px,transparent 1px 46px),
    radial-gradient(1200px 600px at 80% -10%,rgba(47,93,58,.10),transparent 70%);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.015em;line-height:1.08}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.rule{height:1px;background:var(--line);border:0;margin:0}
.rule-thick{height:3px;background:var(--ink);border:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- top strip ---------- */
.ticker{background:var(--moss-deep);color:#e8e3d2;overflow:hidden;border-bottom:1px solid var(--ink)}
.ticker__track{display:flex;gap:52px;white-space:nowrap;padding:7px 0;animation:slide 42s linear infinite;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase}
.ticker__track span::before{content:"◆";margin-right:14px;color:var(--amber)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker__track{animation:none}}

/* ---------- masthead ---------- */
.masthead{border-bottom:3px solid var(--ink);background:var(--paper)}
.masthead__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;padding:14px 0 12px}
.brand{display:flex;align-items:center;gap:11px;justify-self:center;text-align:center}
.brand__mark{width:34px;height:34px;flex:0 0 auto}
.brand__name{font-size:clamp(21px,3vw,30px);letter-spacing:-.03em;font-weight:600}
.brand__name em{font-style:italic;color:var(--moss)}
.brand__sub{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.34em;color:var(--ink-soft);margin-top:2px}
.mast-left,.mast-right{display:flex;align-items:center;gap:16px}
.mast-right{justify-content:flex-end}
.iconbtn{background:none;border:0;padding:6px;cursor:pointer;display:inline-flex;position:relative}
.iconbtn svg{width:21px;height:21px;stroke:var(--ink);fill:none;stroke-width:1.5}
.cartdot{position:absolute;top:0;right:0;min-width:16px;height:16px;border-radius:9px;background:var(--rust);color:#fff;font-family:var(--mono);font-size:9.5px;display:grid;place-items:center;padding:0 4px}
.searchbox{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line-strong);padding:3px 0;min-width:170px}
.searchbox input{border:0;background:none;outline:none;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;width:100%;padding:2px 0}
.searchbox svg{width:15px;height:15px;stroke:var(--ink-soft);fill:none;stroke-width:1.6;flex:0 0 auto}

/* ---------- nav ---------- */
.nav{border-bottom:1px solid var(--ink);background:var(--paper-2);position:sticky;top:0;z-index:40}
.nav__in{display:flex;gap:0;overflow-x:auto;scrollbar-width:none}
.nav__in::-webkit-scrollbar{display:none}
.nav a{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;padding:11px 15px;border-right:1px solid var(--line);white-space:nowrap;color:var(--ink-soft)}
.nav a:first-child{border-left:1px solid var(--line)}
.nav a:hover{background:var(--ink);color:var(--paper)}
.nav a.is-on{background:var(--moss);color:#fff}

/* ---------- footer ---------- */
.foot{border-top:3px solid var(--ink);background:var(--moss-deep);color:#ddd8c6;margin-top:64px}
.foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;padding:46px 0 30px}
.foot h4{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--amber);margin-bottom:13px}
.foot ul{list-style:none;margin:0;padding:0;font-size:14.5px;line-height:2}
.foot a:hover{color:#fff;text-decoration:underline}
.foot__brand{font-size:26px;letter-spacing:-.02em;color:#f4f1e8}
.foot__note{font-size:14px;max-width:34ch;color:#b8b3a1;margin-top:10px}
.foot__bar{border-top:1px solid rgba(255,255,255,.16);padding:15px 0 30px;display:flex;justify-content:space-between;gap:14px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#9d9887;flex-wrap:wrap}
@media(max-width:880px){.foot__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){
  .masthead__in{grid-template-columns:auto 1fr;gap:10px}
  .brand{justify-self:start;order:1}
  .mast-left{order:2;justify-content:flex-end}
  .mast-right{display:none}
  .foot__grid{grid-template-columns:1fr}
}