/* Lbctracking 2026 — Field Notes redesign
   A bright, modern pet-care journal built around clarity, warmth and motion. */
:root{
  --orange:#e4573d;
  --amber:#f0b429;
  --ink:#173b32;
  --muted:#66756f;
  --paper:#f3f5ed;
  --line:#ced8ce;
  --forest:#173b32;
  --leaf:#4f7d66;
  --lime:#dfff73;
  --sun:#ffd45a;
  --coral:#ef6b50;
  --cream:#fffdf5;
  --card:#fffef9;
  --blue:#4267e9;
  --shell:min(1240px,calc(100% - 56px));
  color:var(--ink);
  background:var(--paper)
}
*{scroll-margin-top:100px}
body{background:var(--paper);color:var(--ink)}
body:before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:linear-gradient(#173b3208 1px,transparent 1px),linear-gradient(90deg,#173b3208 1px,transparent 1px);
  background-size:42px 42px
}
::selection{background:var(--lime);color:var(--forest)}
a,button{outline-offset:4px}
a:focus-visible,button:focus-visible{outline:3px solid var(--blue)}

/* Floating navigation */
.site-header{
  position:sticky;top:0;height:88px;background:rgba(243,245,237,.88);border:0;
  box-shadow:none;backdrop-filter:blur(18px);isolation:isolate
}
.site-header:after{content:"";position:absolute;inset:12px 18px;z-index:-1;border:1px solid #c8d4c9;border-radius:19px;background:rgba(255,253,245,.92);box-shadow:0 10px 35px #173b3212}
.header-inner{height:100%;padding-inline:2px}
.brand,.footer-brand{gap:11px}
.brand img{width:43px;height:43px;border:0;border-radius:13px;background:#fff;box-shadow:0 0 0 2px var(--forest)}
.brand b{font-family:Arial,sans-serif;font-size:21px;font-weight:950;letter-spacing:-.055em;background:none;color:var(--forest)}
.brand small{margin-top:3px;color:var(--leaf);font-size:8px;letter-spacing:.22em}
.desktop-nav{gap:3px;padding:4px;border:0;border-radius:13px;background:#eef1e8}
.desktop-nav a{position:relative;padding:9px 12px;border-radius:10px;color:#49635b;font-size:10px;font-weight:850;letter-spacing:.1em;text-transform:uppercase;transition:.2s}
.desktop-nav a:after{display:none}
.desktop-nav a:hover{background:var(--forest);color:#fff;box-shadow:none;transform:translateY(-1px)}
.menu-button{background:var(--forest);border-radius:12px}
.menu-button span{background:#fff}

/* Type system */
.section{padding-block:86px}
.section-head{align-items:flex-end;margin-bottom:34px;padding-bottom:18px;border-bottom:2px solid var(--forest)}
.section-head h2,.hero-content h1,.category-title h1,.category-feature h2,.article-heading h1,.info-hero h1,.info-page h1,.deep-card h2{
  font-family:Arial,sans-serif;font-weight:950;letter-spacing:-.06em
}
.section-kicker,.section-head span,.hero-content>span,.category-feature>div+div>span,.deep-card>div:last-child>span{
  color:var(--leaf);font-size:10px;font-weight:900;letter-spacing:.19em
}
.section-head h2{font-size:clamp(34px,4.3vw,58px);line-height:.92}
.section-head>small{padding:7px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted);background:#fffdf5;font-weight:750}

/* Split-cover home hero */
.home-hero{padding:30px 0 54px;background:#dfe9df;overflow:hidden}
.home-hero:before{background:radial-gradient(circle at 0 0,#dfff7399,transparent 28%),radial-gradient(circle at 100% 100%,#ffd45a66,transparent 26%)}
.home-hero:after{content:"CARE / PLAY / LIVE WELL";position:absolute;right:18px;bottom:12px;color:#173b3220;font:900 11px/1 Arial,sans-serif;letter-spacing:.22em}
.home-hero .shell{position:relative}
.section-kicker.light{display:inline-flex;margin-left:5px;padding:8px 12px;border-radius:999px;background:var(--forest);color:var(--lime)}
.hero-stage{height:575px;overflow:hidden;border:2px solid var(--forest);border-radius:24px;background:var(--cream);box-shadow:11px 11px 0 var(--forest)}
.hero-slide{background:var(--cream)}
.hero-slide>.cover,.hero-slide>.cover-fallback{left:auto;right:0;width:55%;height:100%;object-fit:cover;clip-path:polygon(10% 0,100% 0,100% 100%,0 100%)}
.hero-shade{background:linear-gradient(90deg,var(--cream) 0 43%,#fffdf5dc 51%,transparent 68%)}
.hero-content{left:clamp(30px,5.5vw,76px);bottom:50%;width:min(620px,49%);transform:translateY(50%);color:var(--forest)}
.hero-content>span{display:inline-block;margin-bottom:18px;padding:7px 10px;border-radius:8px;background:var(--lime);color:var(--forest)}
.hero-content h1{font-size:clamp(40px,4.6vw,68px);line-height:.92;text-wrap:balance}
.hero-content p{margin:22px 0 27px;color:#566a63;font-size:14px;line-height:1.7}
.hero-content>a,.category-feature b,.deep-card>div:last-child>b{
  padding:13px 18px;border:2px solid var(--forest);border-radius:11px;background:var(--forest);color:#fff;box-shadow:4px 4px 0 var(--lime);transition:.2s
}
.hero-content>a:hover,.category-feature b:hover,.deep-card>div:last-child>b:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--lime)}
.hero-dots{right:30px;left:auto;bottom:28px}
.hero-dots button{width:10px;height:10px;background:#9aaba3}
.hero-dots button.is-active{width:33px;background:var(--forest)}

/* Topic chips */
.topic-strip{background:var(--forest);border:0}
.topic-strip .shell{padding-block:22px}
.topic-row{gap:10px}
.topic-row a{padding:8px 15px 8px 8px;border:1px solid #ffffff38;border-radius:12px;background:#ffffff0d;color:#fff;font-size:12px;font-weight:760;transition:.2s}
.topic-row a:hover{border-color:var(--lime);background:#ffffff18;transform:translateY(-2px)}
.topic-row i{width:34px;height:34px;border-radius:9px;background:var(--lime);color:var(--forest)}

/* Editorial cards */
.home-module{padding-top:94px}
.home-grid,.card-grid{gap:22px}
.article-card{overflow:hidden;border:1.5px solid var(--forest);border-radius:16px;background:var(--card);box-shadow:4px 4px 0 #bed0c4;transition:.25s}
.article-card:hover{transform:translate(-3px,-4px);border-color:var(--forest);box-shadow:9px 10px 0 var(--sun)}
.card-media{min-height:205px;background:#dbe5dc}
.card-media:after{content:"";position:absolute;inset:0;border:1px solid #ffffff55;pointer-events:none}
.article-card:hover .cover{transform:scale(1.045)}
.category-tag{left:14px;top:14px;padding:6px 9px;border:1px solid #ffffffbb;border-radius:7px;color:#fff;box-shadow:2px 2px 0 var(--forest);font-size:8px;letter-spacing:.12em}
.card-copy{padding:20px 20px 22px}
.card-copy h3{font-family:Arial,sans-serif;font-size:19px;font-weight:900;line-height:1.16;letter-spacing:-.035em}
.card-copy p{color:var(--muted);line-height:1.6}
.meta{border-color:#dfe6df;color:#73847d;letter-spacing:.04em}

.home-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:row dense;align-items:stretch;gap:22px}
.home-grid .article-card{grid-column:span 4}
.home-grid .article-card:first-child{grid-column:span 7;grid-row:span 2;background:var(--forest);color:#fff;border-color:var(--forest);box-shadow:8px 8px 0 var(--lime)}
.home-grid .article-card:first-child .card-media{height:360px;min-height:360px;aspect-ratio:auto}
.home-grid .article-card:first-child .card-copy{padding:29px 29px 32px}
.home-grid .article-card:first-child .card-copy h3{max-width:640px;color:#fff;font-size:clamp(28px,3vw,41px);line-height:1.02}
.home-grid .article-card:first-child .card-copy p{color:#bed0c8;font-size:14px}
.home-grid .article-card:first-child .meta{border-color:#ffffff23;color:#b8c8c1}
.home-grid .article-card:nth-child(2),.home-grid .article-card:nth-child(3){grid-column:span 5;display:grid;grid-template-columns:44% 56%;min-height:290px}
.home-grid .article-card:nth-child(2) .card-media,.home-grid .article-card:nth-child(3) .card-media{height:100%;min-height:290px;aspect-ratio:auto}
.home-grid .article-card:nth-child(2) .card-copy,.home-grid .article-card:nth-child(3) .card-copy{padding:22px}
.home-grid .article-card:nth-child(7),.home-grid .article-card:nth-child(8){grid-column:span 6;display:grid;grid-template-columns:43% 57%;min-height:280px}
.home-grid .article-card:nth-child(7) .card-media,.home-grid .article-card:nth-child(8) .card-media{height:100%;min-height:280px;aspect-ratio:auto}

.popular-section{position:relative;overflow:hidden;padding-block:90px;background:var(--forest);color:#fff}
.popular-section:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 55%,#dfff7310 55%),radial-gradient(#ffffff16 1px,transparent 1px);background-size:auto,24px 24px}
.popular-section .shell{position:relative}
.section-head.inverse{border-color:#ffffff5c}
.section-head.inverse h2{color:#fff}
.section-head.inverse span{color:var(--lime)}
.section-head.inverse small{border-color:#ffffff2c;background:#ffffff0d;color:#cbd8d2}
.popular-grid{gap:0;border-top:1px solid #ffffff2f}
.popular-grid>a{grid-template-columns:58px 1fr auto;padding:25px 10px;border:0;border-bottom:1px solid #ffffff2f;border-radius:0;background:transparent}
.popular-grid>a:hover{border-color:#ffffff2f;background:linear-gradient(90deg,#ffffff0c,transparent);transform:translateX(6px)}
.popular-grid>a>b{font:900 30px/1 Arial,sans-serif;color:var(--lime)}
.popular-grid h3{font-family:Arial,sans-serif;font-size:17px;font-weight:850}
.popular-grid p{color:#a9bbb4}
.popular-grid strong{color:var(--sun)}

.learn-grid{gap:22px}
.learn-grid>a{overflow:hidden;border:1.5px solid var(--forest);border-radius:16px;background:var(--card);box-shadow:4px 4px 0 #bed0c4}
.learn-grid>a:hover{transform:translate(-3px,-4px);box-shadow:9px 10px 0 var(--sun)}
.learn-media{height:220px}
.learn-media>i{border:2px solid var(--forest);border-radius:9px;background:var(--lime);box-shadow:3px 3px 0 var(--forest);color:var(--forest)}
.learn-grid>a>div:last-child{padding:22px 23px 27px}
.learn-grid h3{font-family:Arial,sans-serif;font-size:20px;font-weight:900;line-height:1.18}
.learn-grid b{color:var(--leaf)}

.deep-card{border:2px solid var(--forest);border-radius:22px;background:var(--forest);box-shadow:9px 9px 0 var(--sun)}
.deep-shade{background:linear-gradient(90deg,#102f27f2,#102f27a8 58%,transparent),linear-gradient(0deg,#102f27c7,transparent)}
.quick-box{border:1.5px solid var(--forest);border-radius:18px;background:linear-gradient(135deg,#fffdf5,#fff 55%,#e4f0e7);box-shadow:6px 6px 0 #bed0c4}
.quick-grid>a{border-color:#d6dfd7;border-radius:11px;background:#fffef9}
.quick-grid>a:hover{border-color:var(--forest);box-shadow:4px 4px 0 var(--lime)}

/* Category pages */
.category-hero{background:#dfe9df;color:var(--forest)}
.category-hero:before{background-image:linear-gradient(90deg,#dfe9dff7 0%,#dfe9dfde 48%,#dfe9df6c 100%),var(--category-image)}
.category-hero:after{width:500px;height:500px;right:-80px;top:-220px;background:var(--lime);filter:blur(100px);opacity:.56}
.category-hero .shell{padding-block:42px 68px}
.breadcrumb{color:#536d64;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.breadcrumb a:hover{color:var(--forest)}
.category-title h1{font-size:clamp(58px,8vw,105px);line-height:.85}
.category-title span{color:var(--leaf)}
.category-title p{max-width:700px;color:#49645b;font-size:16px}
.category-title>i{flex-basis:136px;height:136px;border:2px solid var(--forest);border-radius:22px;background:var(--lime);box-shadow:7px 7px 0 var(--forest);font-size:58px}
.category-tools>span,.category-tools>div{border-color:#9bafa2;background:#ffffff60;color:var(--forest)}
.category-tools a{color:#5d746b}
.category-tools a.active{background:var(--forest);color:#fff}
.category-feature{border:2px solid var(--forest);border-radius:20px;background:var(--forest);box-shadow:9px 9px 0 var(--lime)}
.category-feature h2{font-size:clamp(34px,4.3vw,55px);line-height:.98}
.category-feature p{color:#c4d1cc}
.category-feature small{color:#9eb1aa}
.category-list-head{margin-top:74px;border-color:var(--line)}
.pagination a{border-color:var(--forest);border-radius:9px;background:var(--card);box-shadow:2px 2px 0 #b8c8be}
.pagination a.active{border-color:var(--forest);background:var(--forest);color:#fff;box-shadow:3px 3px 0 var(--lime)}

/* Article reading */
.article-hero{min-height:690px;background:var(--forest)}
.article-shade{background:linear-gradient(0deg,#102f27fa 4%,#102f27d2 45%,#102f276b 88%)}
.article-heading{bottom:72px}
.article-category{padding:7px 11px;border:1px solid #ffffffc4;border-radius:7px;box-shadow:3px 3px 0 var(--lime)}
.article-heading h1{max-width:1060px;font-size:clamp(44px,6.2vw,82px);line-height:.92;text-wrap:balance}
.article-heading>p{max-width:800px;color:#d8e2de}
.reading-progress{height:4px;background:linear-gradient(90deg,var(--lime),var(--sun),var(--coral))}
.article-layout{grid-template-columns:225px minmax(0,780px);gap:68px;padding-block:82px}
.article-aside>a,.article-aside>div{border:1.5px solid var(--forest);border-radius:12px;background:var(--card);box-shadow:4px 4px 0 #c5d3c8}
.prose{font-family:Georgia,"Times New Roman",serif;font-size:19px;line-height:1.9;color:#384e47}
.prose h1,.prose h2,.prose h3{font-family:Arial,sans-serif;color:var(--forest);font-weight:900}
.prose h2{font-size:32px;letter-spacing:-.035em}
.prose img{border:1px solid var(--forest);border-radius:16px;box-shadow:8px 8px 0 #c4d7c8}
.prose blockquote{border-left:5px solid var(--forest);border-radius:0 12px 12px 0;background:#e8eee5;color:var(--forest)}
.prose a{color:#356e59}
.prose pre{border-radius:12px;background:var(--forest)}
.related{padding-block:85px;background:#e6ece3;border-top:1px solid var(--line)}

/* Information pages */
.info-body{background:var(--paper)}
.info-hero{position:relative;overflow:hidden;padding-block:100px;background:#dfe9df;color:var(--forest)}
.info-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 86% 14%,#dfff73bb,transparent 24%),radial-gradient(circle at 12% 94%,#ffd45a6b,transparent 23%)}
.info-hero:after{background-image:radial-gradient(circle at 1px 1px,#173b3217 1px,transparent 0)}
.info-hero .shell{position:relative}
.info-hero span{color:var(--leaf)}
.info-hero h1{font-size:clamp(54px,8vw,96px);line-height:.88}
.info-hero h1 em{color:var(--coral)}
.info-hero p{color:#536c63}
.info-wrap{padding-block:78px}
.info-section{border-color:var(--line)}
.info-section>h2,.info-content h2{font-family:Arial,sans-serif;color:var(--forest);font-size:34px;font-weight:900;letter-spacing:-.04em}
.info-panel,.info-card,.info-toc,.info-notice,.info-note,.info-warning{border:1.5px solid var(--forest);border-radius:15px;background:var(--card);box-shadow:4px 4px 0 #c3d2c6}
.info-card{transition:.2s}
a.info-card:hover{transform:translate(-2px,-3px);box-shadow:7px 8px 0 var(--lime)}
.info-card i,.info-kicker,.info-page>span{color:var(--leaf)}
.info-card i{border:1px solid #bfd0c3;background:#e3eee5}
.info-callout{border:2px solid var(--forest);border-radius:18px;background:var(--forest);color:#d7e1dd;box-shadow:7px 7px 0 var(--lime)}
.info-contact{border-color:var(--forest);border-radius:15px;background:var(--card)}
.info-dark{border-radius:18px;background:var(--forest);box-shadow:7px 7px 0 var(--sun)}

/* Footer */
.site-footer{position:relative;overflow:hidden;padding-top:70px;background:var(--forest);color:#a9bbb4}
.site-footer:before{content:"GOOD PET DAYS";position:absolute;right:-14px;bottom:-28px;color:#ffffff06;font:900 116px/1 Arial,sans-serif;letter-spacing:-.08em;white-space:nowrap}
.footer-grid{position:relative;padding-bottom:56px}
.footer-brand img{width:43px;height:43px;border:1px solid #fff;border-radius:12px;box-shadow:4px 4px 0 var(--lime)}
.footer-brand b{font-family:Arial,sans-serif;font-size:24px;font-weight:950;letter-spacing:-.045em}
.footer-grid h3{color:var(--lime)}
.footer-grid a:hover{color:var(--sun)}
.copyright{position:relative;border-color:#ffffff20}
.to-top{width:46px;height:46px;border:2px solid var(--forest);border-radius:12px;background:var(--lime);color:var(--forest);box-shadow:4px 4px 0 var(--forest);font-weight:900}

@media(max-width:1060px){
  .desktop-nav{gap:0}.desktop-nav a{padding-inline:9px}
  .home-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-grid .article-card,.home-grid .article-card:nth-child(2),.home-grid .article-card:nth-child(3),.home-grid .article-card:nth-child(7),.home-grid .article-card:nth-child(8){grid-column:span 1;display:flex;min-height:0}
  .home-grid .article-card:first-child{grid-column:1/-1;grid-row:auto;display:grid;grid-template-columns:1.1fr 1fr;min-height:390px}
  .home-grid .article-card:first-child .card-media{height:100%;min-height:390px}
  .home-grid .article-card:nth-child(2) .card-media,.home-grid .article-card:nth-child(3) .card-media,.home-grid .article-card:nth-child(7) .card-media,.home-grid .article-card:nth-child(8) .card-media{height:auto;min-height:0;aspect-ratio:4/3}
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .article-layout{gap:40px}
}

@media(max-width:960px){
  .mobile-panel{top:88px;height:calc(100vh - 88px);padding:24px;background:var(--cream);border-left:1px solid var(--line);box-shadow:-24px 24px 60px #173b322b}
  .mobile-panel a{border-radius:11px;color:var(--forest)}
  .mobile-panel a:hover{background:#e4eee5;color:var(--forest)}
  .mobile-panel a span{background:var(--lime)}
  .article-layout{grid-template-columns:minmax(0,780px)}
}

@media(max-width:720px){
  :root{--shell:min(100% - 28px,1240px)}
  .site-header{height:74px}.site-header:after{inset:8px 10px}
  .brand img{width:39px;height:39px}.brand b{font-size:20px}
  .mobile-panel{top:74px;height:calc(100vh - 74px)}
  .home-hero{padding:22px 0 38px}.home-hero:after{display:none}
  .hero-stage{height:650px;border-radius:18px;box-shadow:7px 7px 0 var(--forest)}
  .hero-slide>.cover,.hero-slide>.cover-fallback{top:0;width:100%;height:43%;clip-path:none}
  .hero-shade{background:linear-gradient(0deg,var(--cream) 0 55%,transparent 73%)}
  .hero-content{left:22px;bottom:58px;width:calc(100% - 44px);transform:none}
  .hero-content>span{margin-bottom:12px}.hero-content h1{font-size:38px;line-height:.94}
  .hero-content p{margin:15px 0 20px;color:#5c7069;font-size:13px;-webkit-line-clamp:2}
  .hero-dots{right:22px;left:auto;bottom:22px}
  .section{padding-block:60px}.section-head{align-items:flex-end}.section-head h2{font-size:37px}.section-head>small{max-width:125px;text-align:right}
  .home-grid,.card-grid,.learn-grid{grid-template-columns:1fr;gap:19px}
  .home-grid .article-card,.home-grid .article-card:first-child,.home-grid .article-card:nth-child(2),.home-grid .article-card:nth-child(3),.home-grid .article-card:nth-child(7),.home-grid .article-card:nth-child(8){grid-column:1;display:flex;grid-template-columns:none;min-height:0}
  .home-grid .article-card:first-child .card-media,.home-grid .article-card:nth-child(2) .card-media,.home-grid .article-card:nth-child(3) .card-media,.home-grid .article-card:nth-child(7) .card-media,.home-grid .article-card:nth-child(8) .card-media{height:auto;min-height:0;aspect-ratio:4/3}
  .home-grid .article-card:first-child{box-shadow:6px 6px 0 var(--lime)}
  .card-media{height:235px}
  .popular-grid{grid-template-columns:1fr}.popular-grid>a{grid-template-columns:46px 1fr auto}
  .deep-card{min-height:500px;border-radius:18px;box-shadow:7px 7px 0 var(--sun)}
  .category-hero .shell{padding-block:28px 48px}.category-title h1{font-size:53px}.category-title>i{flex-basis:76px;height:76px;border-radius:15px;font-size:34px;box-shadow:4px 4px 0 var(--forest)}
  .category-feature{grid-template-columns:1fr;border-radius:18px;box-shadow:7px 7px 0 var(--lime)}.category-feature>div:first-child{min-height:270px}
  .article-hero{min-height:670px}.article-heading{bottom:48px}.article-heading h1{font-size:42px}
  .article-layout{padding-block:54px}.prose{font-size:17px;line-height:1.84}.prose img{border-radius:12px;box-shadow:5px 5px 0 #c4d7c8}
  .info-hero{padding-block:72px}.info-hero h1{font-size:48px}.footer-grid{gap:38px}.site-footer:before{font-size:70px}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}