/* Apistogrammarama: 1970s hobby-zine / theatre marquee for tiny blackwater cichlids.
   Fonts load via <link> in each page head (Shrikhand display, Karla body). */

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --tannin:#2a1a10;
  --amber:#d98e04;
  --orange:#ff6a13;
  --orange-ink:#a63a00;
  --cobalt:#2a4bff;
  --lemon:#ffd23f;
  --magenta:#e0368a;
  --paper:#fff7e6;
  --ink:#2a1a10;
  --ink-soft:#5a4332;
  --font-display:'Shrikhand','Rockwell','Georgia',serif;
  --font-body:'Karla',system-ui,-apple-system,'Segoe UI',sans-serif;
  --bulb:26px;
}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--ink);
  background:var(--amber);
}

.container{max-width:1080px;margin:0 auto;padding:0 1.25rem}
a{color:var(--cobalt)}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--magenta);outline-offset:3px;background:var(--lemon);color:var(--tannin)}
.navbar a:focus-visible,.footer a:focus-visible,.hero a:focus-visible{outline-color:var(--lemon);background:transparent;color:var(--lemon)}

/* Navigation: dark tannin theatre strip */
.navbar{background:var(--tannin);padding:.9rem 0;border-bottom:6px solid var(--orange);position:relative;z-index:10}
.navbar .container{display:flex;justify-content:space-between;align-items:center;gap:.6rem 2rem;flex-wrap:wrap}
.logo{font-family:var(--font-display);font-size:1.7rem;line-height:1.1;color:var(--lemon);text-shadow:3px 3px 0 var(--magenta)}
.nav-links{display:flex;flex-wrap:wrap;list-style:none;gap:.2rem 1.3rem}
.nav-links a{color:#fff7e6;text-decoration:none;font-weight:700;font-size:.95rem;padding:.2rem 0;border-bottom:3px solid transparent}
.nav-links a:hover{border-bottom-color:var(--lemon);color:var(--lemon)}

/* Hero: marquee frame of bulbs */
.hero{
  position:relative;color:var(--paper);background-color:var(--tannin);
  padding:calc(var(--bulb) + 3.2rem) 0 calc(var(--bulb) + 3rem);
  overflow:hidden;isolation:isolate;
}
.hero::before,.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    radial-gradient(circle at center,var(--b) 0 5px,transparent 6px) 0 0/var(--bulb) var(--bulb) repeat-x,
    radial-gradient(circle at center,var(--b) 0 5px,transparent 6px) 0 100%/var(--bulb) var(--bulb) repeat-x,
    radial-gradient(circle at center,var(--b) 0 5px,transparent 6px) 0 0/var(--bulb) var(--bulb) repeat-y,
    radial-gradient(circle at center,var(--b) 0 5px,transparent 6px) 100% 0/var(--bulb) var(--bulb) repeat-y;
}
.hero::before{--b:var(--lemon)}
.hero::after{--b:var(--orange);background-position:calc(var(--bulb)/2) 0,calc(var(--bulb)/2) 100%,0 calc(var(--bulb)/2),100% calc(var(--bulb)/2)}
.hero::after{animation:chase 1.1s steps(1,end) infinite}
@keyframes chase{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.hero::after{animation:none}}

.hero .container{position:relative;z-index:3;max-width:1080px}
.hero .container>*{max-width:34rem}
.hero .eyebrow{display:block;color:var(--lemon);font-weight:700;font-size:1rem;margin-bottom:.8rem}
.hero h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2.3rem,5.2vw,3.7rem);line-height:1.08;margin-bottom:1.1rem;color:var(--paper);text-shadow:4px 4px 0 var(--magenta)}
.hero .tagline{font-size:1.18rem;margin-bottom:1.8rem;color:var(--paper)}

/* The real hero photo sits as a poster to the right of the copy */
.hero .poster{display:none}
.hero .container::after{
  content:"";position:absolute;z-index:-1;right:1.25rem;top:-.8rem;bottom:-.8rem;width:38%;
  background:var(--cobalt) url('https://cdn.shopify.com/s/files/1/0831/1894/8581/files/4AED6603-6CCD-4C89-A6F9-3006FE717EC0__84138.1637086722.1280.1280.jpg?v=1791145268') center/cover no-repeat;
  border:5px solid var(--paper);box-shadow:10px 10px 0 var(--magenta);transform:rotate(2deg);
}
.hero .photo-credit{position:absolute;z-index:3;bottom:calc(var(--bulb) + .5rem);left:max(1.25rem,calc((100% - 1080px)/2 + 1.25rem));font-size:.78rem;color:var(--paper);opacity:.85;max-width:55%}
.hero .photo-credit a{color:var(--lemon)}

/* Buttons: one block button, one plain text link */
.cta-buttons{display:flex;gap:1.3rem;flex-wrap:wrap;align-items:center}
.btn{display:inline-block;text-decoration:none;font-weight:800;font-size:1.02rem}
.btn-primary{background:var(--lemon);color:var(--tannin);padding:.75rem 1.5rem;border:3px solid var(--tannin);box-shadow:5px 5px 0 var(--orange)}
.btn-primary:hover{background:var(--paper)}
.btn-secondary{color:var(--paper);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.3em;text-decoration-color:var(--orange)}
.btn-secondary:hover{color:var(--lemon)}

/* Main */
main{padding-top:3rem;padding-bottom:3rem}
h2{font-family:var(--font-display);font-weight:400;font-size:2rem;line-height:1.2;margin-bottom:1.1rem;color:var(--tannin)}
h3{font-family:var(--font-body);font-weight:800;font-size:1.3rem;line-height:1.25;margin-bottom:.6rem}
section{margin-bottom:2.5rem}
.intro{background:var(--lemon);border:4px solid var(--tannin);padding:2rem clamp(1.2rem,4vw,2.5rem);box-shadow:8px 8px 0 var(--tannin)}
.intro p{max-width:66ch;margin-bottom:1rem}
.intro a{color:var(--cobalt);font-weight:700}

/* Pillars: saturated colour blocks */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0;border:4px solid var(--tannin)}
.pillar{padding:1.6rem 1.4rem;display:block}
.pillar:nth-child(1){background:var(--cobalt);color:#fff}
.pillar:nth-child(2){background:var(--orange);color:var(--tannin)}
.pillar:nth-child(3){background:var(--lemon);color:var(--tannin)}
.pillar:nth-child(4){background:var(--tannin);color:var(--paper)}
.pillar h3{font-family:var(--font-display);font-weight:400;font-size:1.55rem}
.pillar h3 a{color:inherit;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.2em}
.pillar:nth-child(4) h3 a{color:var(--lemon)}
.pillar h3 a:hover{background:var(--magenta);color:#fff;text-decoration:none}
.pillar p{max-width:40ch}

/* Species cards */
.species-grid{align-items:start;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem}
.species-card{border:4px solid var(--tannin);background:var(--lemon);color:var(--tannin);padding:0 0 1.2rem;display:flex;flex-direction:column;box-shadow:6px 6px 0 var(--tannin)}
.species-card>*{margin-left:1.2rem;margin-right:1.2rem}
.species-card:nth-child(4n+2){background:var(--cobalt);color:#fff}
.species-card:nth-child(4n+3){background:var(--orange)}
.species-card:nth-child(4n+4){background:var(--paper)}
.species-card:not(.has-photo):not(:has(.swatch)){padding-top:1.2rem}
.species-card .thumb{width:calc(100% + 0px);margin:0 0 1rem;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--tannin)}
.species-card .swatch{margin:0 0 1rem}
.species-card .body{margin:0 1.2rem}
.species-card .sci-name-small{display:block;font-style:italic;font-size:.9rem;margin-bottom:.3rem}
.species-card h3{font-size:1.3rem}
.species-card h3 a{color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
.species-card h3 a:hover{background:var(--tannin);color:var(--lemon);text-decoration:none}
.species-card:nth-child(4n+2) h3 a:hover{background:var(--lemon);color:var(--tannin)}
.species-card strong{font-weight:800}
.species-card p{margin-bottom:.5rem}
.species-card:nth-child(4n+2) a:focus-visible{color:var(--lemon)}

/* Swatch strips pulled from each fish's real colours */
.swatch,.strip{display:flex;height:4.2rem;position:relative}
.swatch i,.strip i{flex:1;display:block}
.swatch .sci-name{position:absolute;left:.7rem;bottom:.5rem;background:var(--tannin);color:var(--paper);font-size:.8rem;font-style:italic;padding:.1rem .5rem}

/* Closing block */
.cta-footer{background:var(--magenta);color:#fff;border:4px solid var(--tannin);padding:2rem clamp(1.2rem,4vw,2.5rem);box-shadow:8px 8px 0 var(--tannin);background:var(--tannin);border-color:var(--lemon)}
.cta-footer h2{color:var(--lemon)}
.cta-footer p{color:var(--paper);max-width:60ch}
.cta-footer a{color:var(--lemon);font-weight:800}
.cta-footer a:hover{background:var(--magenta);color:#fff}

/* Footer */
.footer{background:var(--tannin);color:var(--paper);padding:2.2rem 0;border-top:6px solid var(--orange)}
.footer .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.footer p{font-size:.92rem}
.footer-links{list-style:none;display:flex;gap:.4rem 1.3rem;flex-wrap:wrap}
.footer-links a{color:var(--lemon);text-decoration:none;font-size:.95rem;font-weight:700}
.footer-links a:hover{text-decoration:underline}

/* Species page header: tannin band with the colour-swatch strip */
.species-hero{background:var(--tannin);color:var(--paper);padding:0 1.25rem 2.2rem;border-bottom:6px solid var(--orange)}
.species-hero .strip{height:1.6rem;margin:0 -1.25rem 2rem}
.species-hero .sci-name{display:block;max-width:1080px;margin:0 auto .3rem;font-style:italic;color:var(--lemon);font-weight:700}
.species-hero h1{max-width:1080px;margin:0 auto;font-family:var(--font-display);font-weight:400;font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.1;color:var(--paper);text-shadow:4px 4px 0 var(--magenta)}

/* Reading panel */
.content{
  max-width:calc(74ch + 7rem);margin:2.5rem auto 3rem;padding:2.5rem clamp(1.1rem,5vw,3.5rem) 3rem;
  background:var(--paper);border:4px solid var(--tannin);box-shadow:10px 10px 0 var(--tannin);
}
main.container.content{max-width:calc(74ch + 7rem);width:calc(100% - 2.5rem)}
.content>*{max-width:72ch}
.content>.specs-table,.content>div[style*="overflow"]{max-width:none}
.content h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2rem,5vw,2.8rem);line-height:1.12;margin-bottom:.5rem;color:var(--tannin);text-shadow:3px 3px 0 var(--lemon)}
.content .meta{color:var(--ink-soft);font-size:.95rem;font-weight:500;margin-bottom:1.8rem}
.content h2{font-size:1.75rem;color:var(--cobalt);margin-top:2.6rem;margin-bottom:.9rem;padding-top:1.1rem;border-top:6px solid var(--lemon)}
.content h3{margin-top:1.7rem;color:var(--tannin)}
.content p{margin-bottom:1.1rem;line-height:1.8}
.content ul,.content ol{margin-left:1.5rem;margin-bottom:1.1rem;line-height:1.75}
.content li{margin-bottom:.5rem}
.content li::marker{color:var(--orange-ink);font-weight:800}
.content strong{font-weight:800}
.content em{font-style:italic}
.content a{color:var(--cobalt);font-weight:700;text-underline-offset:.2em;text-decoration-thickness:2px}
.content a:hover{background:var(--lemon);color:var(--tannin)}
.content figure{margin:2rem 0}
.content figure img{width:100%;display:block;border:4px solid var(--tannin)}
.content figcaption{font-size:.85rem;color:var(--ink-soft);margin-top:.5rem}

.specs-table{width:100%;border-collapse:collapse;margin:1.7rem 0;min-width:46rem}
.specs-table th{background:var(--tannin);color:var(--lemon);padding:.75rem .8rem;text-align:left;font-weight:800;font-size:.95rem}
.specs-table td{padding:.75rem .8rem;border-bottom:2px solid var(--tannin);font-size:.95rem}
.specs-table tr:nth-child(even) td{background:#ffe9b8}

.callout{background:var(--lemon);border:4px solid var(--tannin);padding:1.4rem 1.6rem;margin:1.8rem 0;box-shadow:6px 6px 0 var(--orange)}
.callout strong{display:block;margin-bottom:.6rem;font-family:var(--font-display);font-weight:400;font-size:1.3rem;color:var(--tannin)}
.callout li::marker{content:""}
.callout p{max-width:none}

@media (max-width:768px){
  body{font-size:1rem}
  .hero{padding-top:calc(var(--bulb) + 1.6rem)}
  .hero .container>*{max-width:none}
  .hero .container::after{position:static;display:block;width:auto;height:190px;margin:2rem .6rem 1.4rem;transform:rotate(-1.5deg);z-index:auto;order:9}
  .hero .photo-credit{position:static;max-width:none;padding:.9rem 1.25rem 0;font-size:.78rem}
  h2{font-size:1.6rem}
  .footer .container{flex-direction:column;align-items:flex-start}
  .content{box-shadow:6px 6px 0 var(--tannin);margin-top:1.8rem}
  .logo{font-size:1.45rem}
}
@media (max-width:480px){
  .pillars{grid-template-columns:1fr}
  .species-hero .strip{height:1.2rem}
}

/* Accessibility */
main{display:block}
.skip-link{position:absolute;left:12px;top:-60px;z-index:1000;background:var(--tannin);color:var(--lemon);padding:.6rem 1rem;font-size:.9rem;font-weight:800;text-decoration:none;border-radius:2px}
.skip-link:focus{top:12px}
.nav-links a[aria-current="page"]{border-bottom-color:var(--lemon);color:var(--lemon)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}}