/*
Theme Name: Eric's Dart Frogs
Theme URI: https://ericfixit.com/
Author: Eric
Description: A responsive editorial theme for Eric's dart frog husbandry guides and vivarium data.
Version: 1.0.4
Text Domain: ericfixit-frogs
*/

:root { --ink:#122019; --ink-soft:#405047; --paper:#f5f3ea; --paper-deep:#e9e5d8; --forest:#123e30; --forest-dark:#071e18; --moss:#bddb72; --mint:#8de2c0; --sun:#efcf61; --white:#fffef8; --line:rgba(18,32,25,.14); --shadow:0 18px 48px rgba(11,31,24,.12); --radius:22px; --serif:Georgia,'Times New Roman',serif; --sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); line-height:1.55; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.skip-link { position:fixed; z-index:100; top:10px; left:10px; transform:translateY(-150%); padding:.7rem 1rem; background:var(--white); color:var(--ink); }
.skip-link:focus { transform:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.site-header { position:relative; z-index:20; width:100%; min-height:90px; padding:18px clamp(22px,5vw,76px); display:flex; align-items:center; justify-content:space-between; color:var(--white); background:var(--forest-dark); border-bottom:1px solid rgba(255,255,255,.2); }
.home .site-header, .front-page .site-header { position:absolute; top:0; left:0; background:transparent; }
.brand { display:inline-flex; align-items:center; gap:12px; text-decoration:none; }
.brand-mark { display:inline-grid; place-items:center; flex:none; width:42px; height:42px; border:1px solid rgba(255,255,255,.55); border-radius:50%; font-family:var(--serif); font-weight:700; font-style:italic; }
.brand strong,.brand small { display:block; }
.brand strong { font-family:var(--serif); font-size:1.06rem; letter-spacing:.01em; }
.brand small { margin-top:1px; color:rgba(255,255,255,.7); font-size:.67rem; letter-spacing:.12em; text-transform:uppercase; }
#site-nav { display:flex; align-items:center; gap:clamp(18px,2.4vw,38px); }
#site-nav a { position:relative; color:rgba(255,255,255,.82); font-size:.74rem; font-weight:700; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; }
#site-nav a::after { content:''; position:absolute; left:0; bottom:-8px; width:100%; height:1px; background:var(--moss); transform:scaleX(0); transform-origin:left; transition:transform .2s ease; }
#site-nav a:hover::after,#site-nav a:focus-visible::after,#site-nav .current-menu-item a::after { transform:scaleX(1); }
.menu-toggle { display:none; color:var(--white); background:transparent; border:0; padding:10px; }
.menu-toggle > span:not(.sr-only) { display:block; width:24px; height:2px; margin:5px 0; background:currentColor; }

.section { padding:110px clamp(24px,7.7vw,122px); }
h1,h2,h3 { font-family:var(--serif); font-weight:400; line-height:1.06; letter-spacing:-.035em; }
h1 { margin:0; font-size:clamp(3.2rem,6vw,6rem); }
h2 { margin:0; font-size:clamp(2.6rem,4.7vw,5rem); }
h3 { margin:0; font-size:clamp(1.55rem,2.4vw,2.1rem); }
.section-kicker,.eyebrow { margin:0 0 20px; color:#5c765f; font-size:.72rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.section-kicker-light,.eyebrow { color:var(--mint); }
.lead { color:var(--ink-soft); font-size:1.15rem; line-height:1.75; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 23px; border:1px solid transparent; border-radius:999px; font-size:.76rem; font-weight:800; letter-spacing:.075em; text-decoration:none; text-transform:uppercase; transition:transform .2s ease,background .2s ease; }
.button:hover { transform:translateY(-2px); }
.button-primary { background:var(--moss); color:var(--forest-dark); }
.button-ghost { border-color:rgba(255,255,255,.46); color:var(--white); }
.button-dark { background:var(--forest-dark); color:var(--white); }
.text-link { display:inline-flex; gap:10px; margin-top:15px; padding-bottom:5px; border-bottom:1px solid currentColor; color:var(--forest); font-size:.76rem; font-weight:800; letter-spacing:.08em; text-decoration:none; text-transform:uppercase; }

.hero { position:relative; min-height:790px; display:grid; align-items:center; color:var(--white); overflow:hidden; }
.hero-image,.hero-shade { position:absolute; inset:0; }
.hero-image { background:url('../../uploads/2020/08/Frogs-July-2020-1-3.jpg') center 63% / cover; transform:scale(1.02); }
.hero-shade { background:linear-gradient(90deg,rgba(2,18,12,.88),rgba(4,25,18,.67) 43%,rgba(4,22,17,.18) 76%),linear-gradient(0deg,rgba(3,18,14,.5),transparent 45%); }
.hero-content { position:relative; z-index:2; width:min(760px,86vw); margin-left:clamp(24px,8vw,126px); padding:92px 0 150px; }
.hero h1 { max-width:690px; font-size:clamp(3.55rem,7.4vw,7.3rem); }
.hero h1 em { color:var(--moss); font-weight:400; }
.hero-copy { max-width:650px; margin:28px 0 0; color:rgba(255,255,255,.82); font-size:clamp(1.05rem,1.55vw,1.28rem); }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:38px; }
.live-ribbon { position:absolute; z-index:3; right:clamp(22px,5vw,76px); bottom:0; left:clamp(22px,5vw,76px); display:grid; grid-template-columns:1.3fr 1fr 1fr auto; align-items:center; min-height:105px; padding:20px 28px; background:rgba(7,30,24,.9); border:1px solid rgba(255,255,255,.15); border-bottom:0; }
.live-ribbon > div { min-height:44px; padding:0 25px; display:flex; flex-direction:column; justify-content:center; border-left:1px solid rgba(255,255,255,.13); }
.live-ribbon .live-label { padding-left:0; flex-direction:row; justify-content:flex-start; align-items:center; gap:13px; border-left:0; }
.live-ribbon small { color:rgba(255,255,255,.55); font-size:.67rem; letter-spacing:.1em; text-transform:uppercase; }
.live-ribbon strong { font-size:.94rem; }.live-ribbon a { color:var(--moss); font-size:.75rem; font-weight:800; text-decoration:none; text-transform:uppercase; }.pulse { width:11px;height:11px;border-radius:50%;background:#8fe69b;box-shadow:0 0 0 6px rgba(143,230,155,.12); }

.intro,.automation { background:var(--white); }.intro-grid,.automation { display:grid; grid-template-columns:1.15fr 1fr; gap:10vw; align-items:start; }
.guide-section { background:var(--paper); }.section-heading,.data-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:46px; }.section-heading h2 { max-width:820px; }.section-heading > p { max-width:430px; margin:0 0 8px; color:var(--ink-soft); }
.guide-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }.guide-card { position:relative; min-height:375px; padding:33px 28px 28px; display:flex; flex-direction:column; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:transform .2s ease,box-shadow .2s ease; }.guide-card:hover { z-index:1; transform:translateY(-5px); box-shadow:var(--shadow); }.guide-card-featured { background:var(--forest); color:var(--white); }.card-number,.card-tag { color:#789080; }.card-number { font-family:var(--serif); }.card-tag { margin:auto 0 12px; font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }.guide-card-featured .card-number,.guide-card-featured .card-tag { color:var(--mint); }.guide-card p:not(.card-tag) { color:var(--ink-soft); font-size:.88rem; }.guide-card-featured p:not(.card-tag) { color:rgba(255,255,255,.7); }.guide-card a { margin-top:18px; font-size:.73rem; font-weight:800; text-decoration:none; }

.data-section { background:var(--forest-dark); color:var(--white); }.data-heading > div:first-child { max-width:850px; }.data-heading p:not(.section-kicker) { max-width:680px; color:rgba(255,255,255,.62); }.range-picker { display:flex; padding:4px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13); border-radius:999px; }.range-button { min-width:60px; padding:9px 13px; border:0; border-radius:999px; background:transparent; color:rgba(255,255,255,.56); cursor:pointer; font:700 .72rem var(--sans); }.range-button.active { background:var(--white); color:var(--forest-dark); }.prototype-note { margin:32px 0 20px; padding:11px 15px; border:1px solid rgba(239,207,97,.25); background:rgba(239,207,97,.08); color:rgba(255,255,255,.69); font-size:.75rem; }.tank-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }.tank-card { padding:28px; background:#0f2b23; border:1px solid rgba(255,255,255,.11); border-radius:var(--radius); }.tank-card-header,.tank-footer { display:flex; justify-content:space-between; align-items:center; gap:18px; }.tank-label { margin:0 0 3px; color:var(--mint); font-size:.65rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }.status { display:inline-flex; align-items:center; gap:8px; color:#a7dcb1; font-size:.72rem; font-weight:700; }.status i { width:7px;height:7px;border-radius:50%;background:#8fe69b;box-shadow:0 0 0 5px rgba(143,230,155,.09); }.metrics { display:grid; grid-template-columns:1fr 1fr; margin:25px 0; border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); }.metrics > div { padding:22px 10px 22px 0; display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:2px 10px; }.metrics > div + div { padding-left:23px; border-left:1px solid rgba(255,255,255,.1); }.metrics span { grid-column:1/-1; color:rgba(255,255,255,.52); font-size:.69rem; text-transform:uppercase; }.metrics strong { font:400 2.9rem var(--serif); }.metrics strong small { margin-left:3px; color:rgba(255,255,255,.65); font:400 1rem var(--sans); }.metrics em { color:rgba(255,255,255,.48); font-size:.67rem; font-style:normal; }.chart-wrap { position:relative; min-height:230px; }.tank-chart { display:block; width:100%; height:230px; }.tank-footer { margin-top:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.45); font-size:.7rem; }.tank-footer a { color:var(--mint); font-weight:700; text-decoration:none; }

.build-section { display:grid; grid-template-columns:1.18fr 1fr; min-height:730px; }.build-photo { min-height:620px; background:url('../../uploads/2020/08/New-tank-June-2020-2-2.jpg') center / cover; }.build-copy { display:flex; flex-direction:column; justify-content:center; padding:clamp(60px,8vw,120px); background:#d9e4b6; }.build-copy > p:not(.section-kicker) { color:var(--ink-soft); }.build-copy ul,.tech-list { margin:24px 0 0; padding:0; list-style:none; border-top:1px solid var(--line); }.build-copy li { display:flex; gap:20px; padding:13px 0; border-bottom:1px solid var(--line); font-size:.83rem; font-weight:700; }.build-copy li span { color:#66815c; font-family:var(--serif); }.automation-copy { max-width:700px; }.tech-list div { display:grid; grid-template-columns:145px 1fr; padding:15px 0; border-bottom:1px solid var(--line); }.tech-list span { color:var(--ink-soft); }.automation-image { margin:0; }.automation-image img { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow); }.automation-image figcaption { margin-top:10px; color:var(--ink-soft); font-size:.7rem; text-align:right; }
.gallery-section { background:var(--paper-deep); }.photo-grid { display:grid; grid-template-columns:2fr 1fr; grid-template-rows:repeat(2,minmax(240px,34vh)); gap:12px; }.photo-grid figure { position:relative; margin:0; overflow:hidden; background:var(--forest); }.photo-grid .photo-main { grid-row:1/3; }.photo-grid img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }.photo-grid figure:hover img { transform:scale(1.025); }.photo-main figcaption { position:absolute; right:0; bottom:0; left:0; padding:70px 26px 24px; background:linear-gradient(transparent,rgba(3,18,13,.83)); color:var(--white); }.photo-main figcaption span,.photo-main figcaption strong { display:block; }.photo-main figcaption span { color:var(--moss); font-size:.68rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }.photo-main figcaption strong { margin-top:5px; font:400 1.8rem var(--serif); }

.content-page { min-height:60vh; background:var(--white); }.entry-header { max-width:900px; margin:0 auto 38px; }.entry-featured-image,.entry-content { max-width:760px; margin-right:auto; margin-left:auto; }.entry-featured-image { margin-bottom:34px; }.entry-featured-image img { width:100%; border-radius:var(--radius); }.entry-content > * + * { margin-top:1.35rem; }.entry-content a { color:var(--forest); }.entry-content blockquote { margin:2rem 0; padding:1rem 1.5rem; border-left:4px solid var(--moss); color:var(--ink-soft); font:1.35rem/1.5 var(--serif); }
.site-footer { padding:55px clamp(24px,7.7vw,122px); display:grid; grid-template-columns:1fr auto; align-items:center; gap:35px; background:var(--forest-dark); color:var(--white); }.footer-brand { display:flex; align-items:center; gap:13px; }.footer-brand strong,.footer-brand small { display:block; }.footer-brand strong { font-family:var(--serif); }.footer-brand small,.site-footer p { color:rgba(255,255,255,.46); font-size:.7rem; }.footer-links { display:flex; gap:26px; }.footer-links a { font-size:.68rem; font-weight:800; text-decoration:none; text-transform:uppercase; }.site-footer p { grid-column:1/-1; margin:0; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); }

@media (max-width:1050px) { .site-header { min-height:76px; }.menu-toggle { display:block; } #site-nav { position:absolute; top:100%; right:0; left:0; padding:12px 24px 24px; display:none; flex-direction:column; align-items:flex-start; gap:20px; background:rgba(7,30,24,.98); border-bottom:1px solid rgba(255,255,255,.14); } #site-nav.open { display:flex; }.hero { min-height:850px; }.hero-content { margin-left:clamp(24px,6vw,70px); }.live-ribbon { grid-template-columns:1fr 1fr; gap:18px 0; }.live-ribbon > div:nth-child(3) { border-left:0; padding-left:0; }.guide-grid { grid-template-columns:repeat(2,1fr); }.tank-grid { grid-template-columns:1fr; }.build-section { grid-template-columns:1fr; }.build-photo { min-height:540px; } }
@media (max-width:760px) { .site-header { padding:14px 18px; }.brand small { display:none; }.hero { min-height:840px; }.hero-image { background-position:58% center; }.hero-content { width:auto; margin:0; padding:96px 22px 260px; }.hero h1 { font-size:clamp(3.2rem,15vw,5rem); }.hero-copy { font-size:1rem; }.hero-actions { align-items:stretch; flex-direction:column; }.button { width:100%; }.live-ribbon { right:14px; left:14px; grid-template-columns:1fr 1fr; min-height:214px; padding:20px; }.live-ribbon > div { padding:0 0 0 15px; }.live-ribbon .live-label { grid-column:1/-1; padding:0 0 14px; border-bottom:1px solid rgba(255,255,255,.13); }.live-ribbon > div:nth-child(2) { padding-left:0; border-left:0; }.live-ribbon > div:nth-child(3) { padding-left:15px; border-left:1px solid rgba(255,255,255,.13); }.live-ribbon > a { grid-column:1/-1; }.section { padding:75px 20px; }.intro-grid,.automation { grid-template-columns:1fr; gap:35px; }.section-heading,.data-heading { align-items:flex-start; flex-direction:column; } h2 { font-size:2.75rem; }.guide-grid { grid-template-columns:1fr; }.guide-card { min-height:315px; }.tank-card { padding:20px 16px; }.metrics strong { font-size:2.15rem; }.metrics > div + div { padding-left:14px; }.chart-wrap,.tank-chart { min-height:190px; height:190px; }.tank-footer { align-items:flex-start; flex-direction:column; }.build-photo { min-height:420px; }.build-copy { padding:70px 22px; }.automation-image { grid-row:1; }.photo-grid { grid-template-columns:1fr 1fr; grid-template-rows:460px 190px; }.photo-grid .photo-main { grid-column:1/-1; grid-row:1; }.site-footer { grid-template-columns:1fr; }.footer-links { flex-wrap:wrap; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; } }

.ef-section-heading { display:flex; justify-content:space-between; align-items:end; gap:2rem; margin-bottom:2rem; }
.ef-section-heading a { color:var(--forest); font-size:.75rem; font-weight:800; letter-spacing:.08em; text-decoration:none; text-transform:uppercase; }
.ef-history-note { margin:1.5rem 0 0; color:rgba(255,255,255,.58); font-size:.75rem; }
.ef-legacy-content { max-width:1180px; margin:0 auto; padding:clamp(3rem,7vw,7rem) clamp(20px,4vw,48px); background:var(--white); }
.ef-legacy-content > h2,.ef-legacy-content > h3 { margin-top:3rem; }
.ef-legacy-content .wp-block-gallery,.ef-legacy-content [class*="gallery"] { max-width:none; }
.ef-legacy-content img { border-radius:4px; }
.ef-photo-section { background:var(--paper-deep); }
.ef-photo-grid { display:grid; grid-template-columns:2fr 1fr; grid-template-rows:repeat(2,minmax(240px,34vh)); gap:12px; }
.ef-photo-grid figure { position:relative; margin:0; overflow:hidden; background:var(--forest); }
.ef-photo-grid__main { grid-row:1/3; }
.ef-photo-grid img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.ef-photo-grid figure:hover img { transform:scale(1.025); }
.ef-photo-grid figcaption { position:absolute; right:0; bottom:0; left:0; padding:70px 26px 24px; background:linear-gradient(transparent,rgba(3,18,13,.83)); color:var(--white); }
.ef-photo-grid figcaption small,.ef-photo-grid figcaption strong { display:block; }
.ef-photo-grid figcaption small { color:var(--moss); font-size:.68rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.ef-photo-grid figcaption strong { margin-top:5px; font:400 1.8rem var(--serif); }

@media (max-width:760px) {
	.ef-section-heading { align-items:flex-start; flex-direction:column; }
	.ef-photo-grid { grid-template-columns:1fr 1fr; grid-template-rows:460px 190px; }
	.ef-photo-grid__main { grid-column:1/-1; grid-row:1; }
}