/* Face Out: shared look ("Bookshop warm"). Fonts are self-hosted (SIL Open Font License). */
@font-face{font-family:"Fraunces";src:url(/fonts/fraunces-latin-wght-normal.woff2) format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(/fonts/fraunces-latin-wght-italic.woff2) format("woff2");font-weight:300 900;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url(/fonts/inter-latin-wght-normal.woff2) format("woff2");font-weight:300 800;font-style:normal;font-display:swap}
:root{
  --paper:#F6EFE3; --paper-2:#FBF7F0; --card:#FFFDF8; --ink:#1F2A28; --muted:#5A544A; --line:#E4D8C4;
  --green:#1F4D47; --green-dark:#163A35; --green-soft:#E3ECE7; --gold:#C9782A; --gold-soft:#F6E5C9; --oxblood:#8C3B2E;
  --good:#2E6B3A; --good-soft:#E3F0E2; --warn-soft:#FBF0D9; --bad:#9B2C2C; --bad-soft:#F8E4E4;
  --serif:"Fraunces","Iowan Old Style",Georgia,serif; --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --radius:10px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--green)}
a:hover{color:var(--green-dark)}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;line-height:1.15}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* Header */
.site-head{position:sticky;top:0;z-index:20;background:rgba(246,239,227,.92);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--line)}
.site-head .in{max-width:1180px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo{gap:14px}
.logo .mark{display:block;width:62px;height:50px;flex:none}
.logo .wm{display:flex;flex-direction:column;line-height:1}
.logo .wm b{font:700 31px/1 var(--serif);letter-spacing:-.015em;color:var(--green-dark)}
.logo .wm b em{font-style:italic;font-weight:600;color:var(--oxblood)}
.logo .wm small{font:600 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.logo:hover .wm b{color:var(--green)}
.site-head nav{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.site-head nav a{text-decoration:none;color:var(--ink);font-size:15px;padding:7px 12px;border-radius:999px}
.site-head nav a:hover{background:var(--gold-soft)}
.site-head nav a[aria-current="page"]{background:var(--green);color:#fff}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--sans);text-decoration:none;border-radius:999px;padding:13px 22px;border:1.5px solid var(--green);color:var(--green);background:transparent;cursor:pointer}
.btn:hover{background:var(--green-soft);color:var(--green-dark)}
.btn.primary{background:var(--green);color:#fff}
.btn.primary:hover{background:var(--green-dark);color:#fff}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#fff}
.btn.gold:hover{background:#B4691F}
.btn.small{padding:8px 14px;font-size:14px}

/* Step bar (shown on the tool pages) */
.steps{max-width:1180px;margin:18px auto 6px;padding:0 24px;display:flex;gap:10px;flex-wrap:wrap}
.steps a{flex:1 1 200px;display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--muted);background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:8px 14px 8px 8px;font-size:14px}
.steps a .n{flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center;font:600 14px var(--sans);background:var(--gold-soft);color:var(--green)}
.steps a b{color:var(--ink);font-weight:600}
.steps a[aria-current="step"]{background:var(--green);border-color:var(--green);color:#E3ECE7}
.steps a[aria-current="step"] b{color:#fff}
.steps a[aria-current="step"] .n{background:var(--gold);color:#fff}

/* Photo banners with parallax */
.banner{position:relative;overflow:hidden;color:#fff;isolation:isolate}
.banner .ph{position:absolute;inset:-28% 0;background-size:cover;background-position:center;will-change:transform;z-index:-2}
.banner::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(22,38,35,.82) 0%,rgba(22,38,35,.55) 45%,rgba(22,38,35,.15) 100%)}
.banner .in{max-width:1180px;margin:0 auto;padding:46px 24px}
.banner h1{color:#fff;margin:0 0 8px;font-size:clamp(28px,4vw,42px)}
.banner p{margin:0;max-width:640px;color:#F3EBDD;font-size:17px}
.banner .credit{position:absolute;right:10px;bottom:6px;font-size:11px;color:rgba(255,255,255,.7)}
.banner .credit a{color:inherit}

/* Cards and misc */
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px}
.why{font-size:14px}
.why summary{cursor:pointer;color:var(--green);font-weight:600;list-style:none;display:inline}
.why summary::-webkit-details-marker{display:none}
.why summary::after{content:" +";}
.why[open] summary::after{content:" –"}
.why p{margin:6px 0 0;color:var(--muted)}

/* Footer */
.site-foot{margin-top:56px;background:var(--green-dark);color:#D7E2DD;font-size:14px}
.site-foot .in{max-width:1180px;margin:0 auto;padding:28px 24px;display:flex;gap:28px;flex-wrap:wrap;justify-content:space-between}
.site-foot a{color:#F6E5C9}
.site-foot b{font:600 18px var(--serif);color:#fff}
.site-foot p{margin:4px 0}

@media (max-width:640px){.logo{gap:10px}.logo .mark{width:46px;height:37px}.logo .wm b{font-size:25px}.logo .wm small{font-size:9px;letter-spacing:.16em;margin-top:5px}.site-head .in{padding:10px 16px;gap:8px}.site-head nav{margin-left:0;width:100%;gap:2px;flex-wrap:nowrap;overflow-x:auto}.site-head nav a{font-size:14px;padding:6px 10px;white-space:nowrap}.banner .ph{inset:0}}
@media (prefers-reduced-motion:reduce){.banner .ph{transform:none!important}html{scroll-behavior:auto}}
@media print{.site-head,.steps,.site-foot,.banner{display:none!important}body{background:#fff}}