/* Freddy Craddock · Guardian Dog Field Books — "the tack room off the barn, first light" */
:root{
  --canvas:#cdb98f; --canvas-2:#bfa87a;
  --saddle:#5a3a1e; --saddle-2:#3d2712; --oxblood:#6b1f1a; --black:#1a1817;
  --tape:#eadfc2; --paint:#f5f0e4; --brass:#a8823a; --sage:#6f7a52; --cork:#b4915a;
  --ink:#1a1817; --muted:#4a3d2c;
  --display:"Permanent Marker","Marker Felt","Comic Sans MS",sans-serif;
  --label:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --body:"Barlow",Arial,Helvetica,sans-serif;
  --wrap:1120px;
  --wire:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='14' viewBox='0 0 120 14'><path d='M0 7c15-6 30 6 45 0s30-6 45 0 30 6 30 0' fill='none' stroke='%233d2712' stroke-width='1.6'/><path d='M0 7c15 6 30-6 45 0s30 6 45 0 30-6 30 0' fill='none' stroke='%235a3a1e' stroke-width='1.6'/><path d='M40 2l5 5-5 5M35 7h10M100 2l5 5-5 5M95 7h10' fill='none' stroke='%233d2712' stroke-width='1.4' stroke-linecap='round'/></svg>");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-width:none}
html::-webkit-scrollbar{display:none}
body{margin:0;font-family:var(--body);font-size:18px;line-height:1.6;color:var(--ink);overflow-x:hidden;
  background-color:var(--canvas);
  background-image:
    repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px),
    radial-gradient(rgba(60,40,10,.08) .6px,transparent .7px);
  background-size:3px 3px,3px 3px,7px 7px;}
@media(min-width:900px){body{font-size:19px}}
[hidden]{display:none!important}
img{max-width:100%;height:auto;display:block}
picture{display:block;width:100%;height:100%}
a{color:var(--saddle-2)}
h1,h2,h3{margin:0;line-height:1.1}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.eyebrow{font-family:var(--label);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:15px}

/* ---------- objects ---------- */
/* barbed wire strip */
.wire{height:14px;background:var(--wire) repeat-x center/120px 14px;opacity:.9}
/* masking tape label */
.tape{display:inline-block;background:var(--tape);color:var(--ink);font-family:var(--label);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:15px;padding:6px 16px;line-height:1.2;
  clip-path:polygon(2% 0,98% 4%,100% 50%,97% 100%,3% 96%,0 55%);transform:rotate(-1.2deg);box-shadow:0 1px 2px rgba(0,0,0,.18);position:relative}
.tape.r{transform:rotate(1.1deg)}
/* taped snapshot */
.snap{position:relative;background:#f6f1e6;padding:12px 12px 16px;box-shadow:0 8px 22px rgba(30,20,5,.28),0 1px 2px rgba(0,0,0,.2);transform:rotate(-1.4deg)}
.snap::before,.snap::after{content:"";position:absolute;width:88px;height:26px;background:rgba(234,223,194,.85);box-shadow:0 1px 2px rgba(0,0,0,.15);top:-12px}
.snap::before{left:-22px;transform:rotate(-38deg)}
.snap::after{right:-22px;transform:rotate(38deg)}
.snap.r{transform:rotate(1.3deg)}
.snap.flat{transform:none}
/* leather notebook panel */
.leather{position:relative;color:var(--paint);background-color:var(--saddle);border-radius:8px;padding:34px 60px 34px 34px;overflow:hidden;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 2px,transparent 2px 5px),radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.12),transparent 60%),radial-gradient(ellipse at 100% 100%,rgba(0,0,0,.35),transparent 55%);
  box-shadow:0 14px 34px rgba(30,20,5,.35),inset 0 0 0 1px rgba(255,255,255,.06)}
.leather::after{content:"";position:absolute;top:0;bottom:0;right:22px;width:11px;background:linear-gradient(90deg,#0d0c0b,#2a2725 40%,#0d0c0b);box-shadow:0 0 6px rgba(0,0,0,.5)}
.leather.ox{background-color:var(--oxblood)}
.leather.blk{background-color:var(--black)}
.leather a{color:var(--paint)}
/* cedar rail */
.rail{height:22px;width:100%;position:relative;
  background:linear-gradient(180deg,#8f6a45 0,#7a5838 20%,#6a4a2d 45%,#7c5a3a 60%,#5e4128 100%);
  background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 2px,transparent 2px 9px,rgba(255,255,255,.05) 9px 10px,transparent 10px 23px),linear-gradient(180deg,#8f6a45 0,#7a5838 20%,#6a4a2d 45%,#7c5a3a 60%,#5e4128 100%);
  box-shadow:0 10px 16px rgba(30,20,5,.35)}
.rail::before,.rail::after{content:"";position:absolute;top:6px;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#d9c39a,#6b5537 70%);box-shadow:0 1px 1px rgba(0,0,0,.5)}
.rail::before{left:14px}.rail::after{right:14px}
/* brass ear tag */
.brasstag{display:inline-flex;align-items:center;gap:8px;font-family:var(--label);font-weight:700;font-size:20px;color:#2b2010;background:linear-gradient(160deg,#d9bd76,#a8823a 55%,#7d5f26);border-radius:12px 12px 16px 16px;padding:8px 16px 8px 12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 4px rgba(0,0,0,.35);position:relative;letter-spacing:.04em}
.brasstag::before{content:"";width:9px;height:9px;border-radius:50%;background:radial-gradient(circle,#3a2b10 45%,#c9ad68 55%);box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}
/* cork board */
.cork{background-color:var(--cork);background-image:radial-gradient(rgba(0,0,0,.12) 1px,transparent 1.4px),radial-gradient(rgba(255,255,255,.12) 1px,transparent 1.4px);background-size:9px 9px,13px 13px;background-position:0 0,4px 6px;border:10px solid #5a3a1e;border-image:linear-gradient(180deg,#7a5838,#4a3019) 1;box-shadow:inset 0 0 40px rgba(0,0,0,.25),0 12px 30px rgba(30,20,5,.3)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:14px 28px;border-radius:6px;font-family:var(--label);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:19px;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn-primary{background:var(--saddle);color:var(--paint);box-shadow:0 6px 14px rgba(30,20,5,.35),inset 0 1px 0 rgba(255,255,255,.15)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(30,20,5,.4)}
.btn-ghost{background:transparent;color:var(--saddle-2);border-color:var(--saddle-2)}
.btn-ghost:hover{background:rgba(90,58,30,.08)}
.btn-block{width:100%}
.btn-paint,.leather .btn-paint{background:var(--paint);color:var(--saddle-2)}
.btn-paint:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(0,0,0,.35)}

/* ---------- topbar ---------- */
.topbar{position:sticky;top:0;z-index:50;background:var(--saddle-2);color:var(--paint);box-shadow:0 2px 10px rgba(0,0,0,.35)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:66px}
.brand{display:flex;align-items:center;gap:12px;color:var(--paint);text-decoration:none;font-family:var(--label);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:18px;line-height:1.05}
.brand svg{width:38px;height:38px;flex:none}
.brand small{display:block;font-weight:600;font-size:12px;letter-spacing:.14em;opacity:.8}
.topbar .brasstag{opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .25s;text-decoration:none}
.topbar.is-stuck .brasstag{opacity:1;transform:none}
.topbar .brasstag:hover{filter:brightness(1.08)}

/* ---------- hero ---------- */
.hero{padding:44px 0 0;position:relative}
.hero .wrap{display:grid;gap:36px;align-items:end}
@media(min-width:900px){.hero .wrap{grid-template-columns:1fr 1fr;gap:40px}}
.hero-copy{padding-bottom:36px}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(36px,4.6vw,58px);line-height:1.02;color:var(--saddle-2);margin:18px 0 20px;text-shadow:0 1px 0 rgba(255,255,255,.25)}
.hero .lead{font-size:20px;max-width:560px;color:var(--muted)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin:26px 0 16px}
.trust{font-family:var(--label);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 12px}
.trust span::before{content:"·";margin-right:12px}
.trust span:first-child::before{content:""}
.stage{position:relative}
.covers{position:relative;height:460px}
@media(min-width:900px){.covers{height:560px}}
.covers .book{position:absolute;bottom:0;width:46%;box-shadow:0 18px 30px rgba(20,12,2,.45),0 2px 4px rgba(0,0,0,.3);border-radius:3px;transition:transform .3s;transform-origin:bottom center}
.covers .book img{border-radius:3px}
.covers .b1{left:25%;z-index:3;width:50%}
.covers .b2{left:0;z-index:2;transform:rotate(-7deg)}
.covers .b3{right:0;z-index:2;transform:rotate(7deg)}
.covers .book:hover{transform:translateY(-14px) rotate(0);z-index:5}
@media(prefers-reduced-motion:no-preference){
  .covers .book{animation:settle .55s cubic-bezier(.2,.8,.3,1) both}
  .covers .b2{animation-delay:.08s}.covers .b3{animation-delay:.16s}
  @keyframes settle{from{opacity:0;transform:translateY(-22px) rotate(-3deg)}}
  .covers .b2{animation-name:settle2}.covers .b3{animation-name:settle3}
  @keyframes settle2{from{opacity:0;transform:translateY(-22px) rotate(-14deg)}to{transform:rotate(-7deg)}}
  @keyframes settle3{from{opacity:0;transform:translateY(-22px) rotate(14deg)}to{transform:rotate(7deg)}}
}
.stage .rail{margin-top:-2px}

/* ---------- sections ---------- */
section{padding:72px 0}
.sec-head{margin-bottom:34px}
.sec-head h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,4vw,46px);color:var(--saddle-2);margin-top:14px}
.sec-head .rule{height:14px;width:180px;background:var(--wire) repeat-x left/120px 14px;margin-top:14px;opacity:.85}
.leather .sec-head h2{color:var(--paint)}

/* pains on cork */
.pains{padding:40px 24px}
.pain-grid{display:grid;gap:34px 26px}
@media(min-width:640px){.pain-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.pain-grid{grid-template-columns:repeat(4,1fr)}}
.pain{font-size:17px;line-height:1.45;color:var(--ink);min-height:150px}
.pain svg{display:block;width:34px;height:34px;stroke:var(--saddle);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-bottom:10px}
.pain:nth-child(2n){transform:rotate(1.2deg)}
.pain:nth-child(3n){transform:rotate(-.6deg)}
.pain-close{margin:38px auto 0;max-width:640px;text-align:center}
.pain-close .tape{font-size:18px;padding:10px 22px}

/* books */
.book-card{display:grid;gap:28px;margin-bottom:34px}
@media(min-width:900px){.book-card{grid-template-columns:300px 1fr;gap:44px;padding-right:70px}
  .book-card.alt{grid-template-columns:1fr 300px}.book-card.alt .cover{order:2}}
.book-card .cover img{border-radius:3px;box-shadow:0 14px 28px rgba(0,0,0,.45);transition:transform .3s}
.book-card .cover:hover img{transform:translateY(-6px)}
.book-card h3{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.2vw,38px);line-height:1.05;margin:10px 0 6px}
.book-card .sub{font-family:var(--label);text-transform:uppercase;letter-spacing:.06em;font-size:16px;opacity:.85;margin-bottom:14px}
.book-card .epi{font-style:italic;opacity:.9;border-left:3px solid rgba(255,255,255,.35);padding-left:14px;margin:0 0 16px}
.book-card .inside{margin:14px 0 0}
.book-card .inside b{font-family:var(--label);text-transform:uppercase;letter-spacing:.08em;font-size:14px;display:block;margin-bottom:8px;opacity:.85}
.book-card ol{margin:0;padding-left:1.3em;columns:1;font-size:16.5px;line-height:1.45}
@media(min-width:700px){.book-card ol{columns:2;column-gap:28px}}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.pills .tape{font-size:13px;padding:5px 12px}
.pages{font-family:var(--label);text-transform:uppercase;letter-spacing:.08em;font-size:14px;opacity:.85;margin-top:14px}

/* why three */
.tiles{display:grid;gap:18px}
@media(min-width:800px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tile{padding:26px 44px 26px 24px;min-height:150px}
.tile h3{font-family:var(--display);font-weight:400;font-size:24px;margin-bottom:8px}
.tile p{margin:0;font-size:16.5px;opacity:.92}

/* look inside */
.inside-grid{display:grid;gap:40px 30px;padding:20px 10px}
@media(min-width:760px){.inside-grid{grid-template-columns:repeat(3,1fr)}}
.inside-grid button{all:unset;cursor:pointer;display:block}
.inside-grid .snap{width:100%}
.inside-grid .snap img{aspect-ratio:2/3;object-fit:cover;object-position:top;width:100%}
.inside-grid figcaption{font-family:var(--label);text-transform:uppercase;letter-spacing:.06em;font-size:14px;margin-top:10px;color:var(--muted)}

/* about */
.about{display:grid;gap:36px;align-items:center}
@media(min-width:900px){.about{grid-template-columns:340px 1fr;gap:56px}}
.about .snap{max-width:340px;margin:16px auto 0}
.about .snap img{aspect-ratio:4/5;object-fit:cover}
.about .sig{font-family:var(--display);font-size:30px;color:var(--saddle-2);margin-top:10px;transform:rotate(-2deg);display:inline-block}

/* what you get */
.check{list-style:none;margin:0;padding:0;display:grid;gap:12px 24px}
@media(min-width:700px){.check{grid-template-columns:1fr 1fr}}
.check li{position:relative;padding-left:34px;font-size:18px}
.check li::before{content:"";position:absolute;left:0;top:5px;width:20px;height:20px;border:2px solid var(--saddle);border-radius:3px}
.check li::after{content:"";position:absolute;left:5px;top:2px;width:8px;height:16px;border:solid var(--saddle);border-width:0 3px 3px 0;transform:rotate(40deg)}
.paper{background:#f6f1e6;padding:34px;box-shadow:0 10px 26px rgba(30,20,5,.25);position:relative}
.paper .tape{position:absolute;top:-16px;left:50%;transform:translateX(-50%) rotate(-1.5deg)}

/* offer */
.offer{max-width:760px;margin:0 auto;text-align:center;padding:44px 70px 40px 34px}
.offer .price{font-family:var(--display);font-size:clamp(56px,8vw,88px);line-height:1;margin:10px 0 4px}
.offer .once{font-family:var(--label);text-transform:uppercase;letter-spacing:.1em;font-size:15px;opacity:.85}
.offer ul{list-style:none;padding:0;margin:22px auto 26px;max-width:460px;text-align:left;font-size:17px}
.offer li{padding:6px 0 6px 28px;position:relative;border-bottom:1px solid rgba(255,255,255,.12)}
.offer li::before{content:"✓";position:absolute;left:4px;color:#d9bd76;font-weight:700}
.guar{display:flex;gap:14px;align-items:flex-start;text-align:left;background:rgba(0,0,0,.25);border-radius:6px;padding:16px;margin-top:22px;font-size:16px}
.guar svg{width:44px;height:44px;flex:none}
.guar b{display:block;font-family:var(--label);text-transform:uppercase;letter-spacing:.08em;font-size:15px;margin-bottom:4px}
.cards{display:flex;gap:10px;justify-content:center;margin-top:16px;opacity:.85;font-family:var(--label);text-transform:uppercase;letter-spacing:.08em;font-size:13px;flex-wrap:wrap}
.cards span{border:1px solid rgba(255,255,255,.35);border-radius:4px;padding:3px 9px}
.tiny{font-size:14px;opacity:.85}

/* reviews */
.reviews-list{display:grid;gap:30px 24px}
@media(min-width:800px){.reviews-list{grid-template-columns:repeat(3,1fr)}}
.review{margin:0;padding:22px}
.review .stars{color:var(--brass);letter-spacing:2px;margin-bottom:8px}
.review blockquote{margin:0 0 10px;font-size:17px}
.review figcaption{font-family:var(--label);text-transform:uppercase;letter-spacing:.06em;font-size:14px;color:var(--muted)}

/* faq */
.faq{max-width:820px;margin:0 auto}
.faq-item{background:#f6f1e6;margin-bottom:12px;box-shadow:0 4px 12px rgba(30,20,5,.18);border-left:6px solid var(--saddle)}
.faq-item:nth-child(3n+2){border-left-color:var(--oxblood)}
.faq-item:nth-child(3n){border-left-color:var(--black)}
.faq-item summary{cursor:pointer;padding:18px 20px;font-family:var(--label);font-weight:700;font-size:20px;letter-spacing:.02em;list-style:none;display:flex;justify-content:space-between;gap:16px;min-height:56px;align-items:center}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:26px;color:var(--saddle);flex:none}
.faq-item[open] summary::after{content:"–"}
.faq-item p{padding:0 20px 18px;margin:0;font-size:17px}

/* final cta */
.final{text-align:center;padding:60px 0 0}
.final h2{font-family:var(--display);font-weight:400;font-size:clamp(34px,5vw,58px);color:var(--saddle-2)}
.final p{font-size:19px;color:var(--muted);margin:14px auto 26px;max-width:560px}
.final .rail{margin-top:44px}

footer{background:var(--saddle-2);color:var(--paint);padding:26px 0}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-family:var(--label);text-transform:uppercase;letter-spacing:.08em;font-size:14px}
footer a{color:var(--paint)}

/* lightbox */
#lightbox{position:fixed;inset:0;background:rgba(20,14,5,.9);z-index:100;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:20px}
#lightbox img{max-height:82vh;width:auto;box-shadow:0 20px 50px rgba(0,0,0,.6)}
#lightbox .lb-cap{color:var(--paint);font-family:var(--label);text-transform:uppercase;letter-spacing:.08em;margin-top:12px}
#lightbox .lb-close{position:absolute;top:16px;right:16px;background:var(--tape);border:0;border-radius:4px;font-size:22px;width:48px;height:48px;cursor:pointer}

/* inner pages (checkout/thanks/support) */
.page{padding:44px 0 70px}
.page h1{font-family:var(--display);font-weight:400;font-size:clamp(32px,4.4vw,50px);color:var(--saddle-2);margin:12px 0 26px}
.cols{display:grid;gap:26px}
@media(min-width:900px){.cols{grid-template-columns:.9fr 1.1fr}}
.panel{background:#f6f1e6;padding:28px;box-shadow:0 10px 26px rgba(30,20,5,.25)}
.panel h3{font-family:var(--label);text-transform:uppercase;letter-spacing:.06em;font-size:20px}
.summary-covers{display:flex;gap:10px}
.summary-covers img{width:32%;border-radius:3px;box-shadow:0 8px 16px rgba(0,0,0,.35)}
.total{display:flex;justify-content:space-between;font-family:var(--label);text-transform:uppercase;letter-spacing:.08em;font-size:20px;border-top:2px solid var(--canvas-2);margin-top:18px;padding-top:14px}
.panel .guar{background:rgba(90,58,30,.08)}
.whop-wrap{background:#fbf7ee;min-height:420px}
.dl{display:grid;gap:22px;margin-top:26px}
@media(min-width:760px){.dl{grid-template-columns:repeat(3,1fr)}}
.card{background:#f6f1e6;padding:16px;box-shadow:0 10px 26px rgba(30,20,5,.25);display:flex;flex-direction:column;gap:10px}
.card img{border-radius:3px;box-shadow:0 8px 16px rgba(0,0,0,.35)}
.card h3{font-family:var(--display);font-weight:400;font-size:22px}
.card small{font-family:var(--label);text-transform:uppercase;letter-spacing:.06em;font-size:13px;color:var(--muted)}
.notice{background:#f6f1e6;border-left:6px solid var(--oxblood);padding:18px;margin:18px 0}
.formwrap{background:#f6f1e6;padding:10px;box-shadow:0 10px 26px rgba(30,20,5,.25)}
.formwrap iframe{width:100%;min-height:900px;border:0}