/* Carpenter Studios — shared styles for subpages.
   Header, footer, tokens, and buttons are copied verbatim from index.html. */
:root{
  --bg:#FBF8F1;--ink:#20211C;--muted:#5C5B52;
  --green:#2E4636;--green-br:#3C5E45;--sage:#94A08C;
  --panel:#F4EFE4;--card:#FFFFFF;--rule:rgba(32,33,28,.13);
  --display:"Bricolage Grotesque",sans-serif;
  --body:"Hanken Grotesk",system-ui,sans-serif;
  --mono:"Space Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
main{flex:1 0 auto;width:100%}
header,footer{flex:0 0 auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 30px}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.06;letter-spacing:-.02em}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--green)}
a:focus-visible,button:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:6px}

/* ---- HEADER (verbatim from index) ---- */
header{border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:40;background:rgba(251,248,241,.85);backdrop-filter:blur(8px)}
.nav{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:16px;height:clamp(124px,19vh,250px)}
.brand{grid-column:2;font-family:var(--display);font-weight:700;font-size:1.2rem;letter-spacing:-.02em}
.brand .logo{position:relative;display:block}
.brand .logo img{height:clamp(105px,16vh,213px);width:auto;display:block;position:relative;z-index:1}
/* The blade spins behind the wordmark. Geometry is measured, not eyeballed: the
   blade inside logo-header.png is a circle at (317,164) r=156.3 in a 640x440
   box, and icon-mark.png is its own tip radius 538.8 of 1112, centred on the
   axis -- so these percentages land the two circles on top of each other at any
   header size. The box stops at the rule (y=189 of 440), which is wider than
   the blade there and hides the cut.
   It turns at 33 1/3 rpm -- 60/(100/3) = 1.8s a revolution exactly -- since
   the mark is as much a record as a saw blade. */
.brand .blade{position:absolute;left:24.33%;top:0;width:50.40%;height:42.95%;overflow:hidden;pointer-events:none}
.brand .blade::before{content:"";position:absolute;left:0;top:1.43%;width:100%;height:170.68%;background:url(img/icon-mark.png) no-repeat center/100% 100%;animation:bladespin 1.8s linear infinite}
@keyframes bladespin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.brand .blade::before{animation:none}}
.nav-links{grid-column:3;justify-self:end;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:12px clamp(14px,2.2vw,30px)}
.nav-links a{font-size:.95rem;color:var(--muted);transition:color .2s}
.nav-links a:hover{color:var(--ink)}

/* buttons */
.btn{display:inline-block;font-weight:600;font-size:.95rem;padding:11px 22px;border-radius:8px;transition:transform .15s,background .2s,color .2s;border:none;cursor:pointer;font-family:var(--body)}
.btn-solid{background:var(--green);color:var(--bg)}
.btn-solid:hover{background:var(--green-br);transform:translateY(-1px)}
.btn-outline{background:none;color:var(--green);box-shadow:inset 0 0 0 1.5px var(--green)}
.btn-outline:hover{background:var(--green);color:var(--bg)}

/* ---- PAGE CONTENT ---- */
main.page{max-width:760px;margin:0 auto;padding:56px 30px 64px}
.page .eyebrow{margin-bottom:14px}
.page h1{font-size:2.4rem;font-weight:700;margin-bottom:16px}
.lead{font-size:1.2rem;color:var(--muted);line-height:1.5;max-width:60ch;margin-bottom:28px}
.page h2{font-size:1.35rem;margin:34px 0 10px}
.page p{margin-bottom:16px;max-width:64ch}
.page>ul{margin:0 0 16px 1.1em;max-width:64ch}
.page>ul li{margin-bottom:7px}
.divider{height:1px;background:var(--rule);border:0;margin:34px 0}
.offer{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));list-style:none;margin-bottom:8px}
.offer li{background:var(--panel);border:1px solid var(--rule);border-radius:14px;padding:16px 18px}
.offer h3{font-size:1.02rem;margin-bottom:4px}
.offer p{font-size:.92rem;color:var(--muted)}
.faq details{border-bottom:1px solid var(--rule);padding:14px 0}
.faq summary{font-family:var(--display);font-weight:600;font-size:1.02rem;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--green);font-family:var(--mono)}
.faq details[open] summary::after{content:"–"}
.faq p{margin:10px 0 2px;font-size:.96rem;color:var(--muted)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* ---- FOOTER (verbatim from index) ---- */
footer{background:#6A2A2E}
footer .wrap{padding:clamp(22px,4vh,56px) 30px;text-align:center;position:relative;max-width:1000px;margin:0 auto}
.fowl{display:block;margin:0 auto clamp(10px,2vh,18px);height:clamp(64px,10vh,120px);width:auto}
.ftag{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(243,236,225,.72);margin-bottom:clamp(8px,1.5vh,16px)}
.fcopy{color:rgba(243,236,225,.55);font-size:.82rem}

@media (max-width:780px){
  .nav-links{display:none}
  .nav{height:clamp(105px,15vh,160px)}
  .brand .logo img{height:clamp(85px,11.9vh,128px)}
  main.page{padding:36px 22px 48px}
  .page h1{font-size:1.9rem}
  .lead{font-size:1.08rem}
  footer .wrap{padding:clamp(18px,3vh,30px) 22px}
  .fowl{height:clamp(56px,8vh,84px)}
}