@font-face{font-family:'Fredoka';src:url(fonts/fredoka-latin-wght-normal.woff2) format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'Outfit';src:url(fonts/outfit-latin-wght-normal.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
:root{--bg:#ffffff;--ink:#2a2330;--mut:#5d5560;--line:#ebe2d4;--accent:#2f6fb5;--on-accent:#ffffff;--focus:#2f6fb5;--link:#285c99;--tint:#fbf5ec;--timber:#d9b07a;--timber-d:#b98a4f;--red:#d9473b;--red-d:#c23b30;--blue:#2f6fb5;--green:#3d9a5f;--green-d:#2f7d4b;--felt:#f3ece1;--font-display:'Fredoka',ui-rounded,system-ui,sans-serif;--font-body:'Outfit',system-ui,sans-serif;color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{text-wrap:balance;margin:0}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0}
table{border-collapse:collapse}
[hidden]{display:none!important}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:3px solid var(--focus,var(--accent));outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:12px;top:-60px;z-index:999;background:var(--ink);color:var(--bg);padding:10px 16px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.legal-wrap{max-width:74ch;margin:0 auto;padding:clamp(40px,7vw,88px) 20px clamp(56px,8vw,110px)}
.legal-wrap h1{font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem);line-height:1.1;margin-bottom:.4em}
.legal-wrap h2{font-family:var(--font-display);font-size:1.35rem;line-height:1.25;margin:2.2em 0 .6em}
.legal-wrap h3{font-size:1.05rem;margin:1.6em 0 .4em}
.legal-wrap p,.legal-wrap li{margin:0 0 .85em}
.legal-wrap ul{padding-left:1.25em}
.legal-wrap a{color:var(--link,var(--ink));text-decoration:underline}
.legal-tablewrap{overflow-x:auto;margin:1.2em 0}
.legal-wrap table{width:100%;font-size:.92rem}
.legal-wrap th,.legal-wrap td{border:1px solid var(--line);padding:.55em .7em;text-align:left;vertical-align:top}
.legal-wrap th{background:var(--tint,transparent)}
.nf{min-height:60vh;display:grid;place-content:center;gap:18px;padding:60px 20px;text-align:center;justify-items:center}
.nf h1{font-family:var(--font-display);font-size:clamp(2rem,5vw,3.4rem);line-height:1.1}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

::selection{background:#2f6fb5;color:#fff}
html{scrollbar-color:#d9b07a #fbf5ec}
.wm{font-family:var(--font-display);font-weight:600;font-size:1.32rem;letter-spacing:-.005em;white-space:nowrap;color:var(--ink)}
.wm span{font-weight:400;color:var(--mut)}
.top{position:sticky;top:0;z-index:40;background:#fff}
.top::after{content:"";display:block;height:5px;background:repeating-linear-gradient(90deg,#d9473b 0 56px,#d9b07a 56px 112px,#2f6fb5 112px 168px,#3d9a5f 168px 224px)}
.top-in{max-width:1320px;margin:0 auto;padding:10px clamp(16px,3vw,40px);display:flex;align-items:center;gap:14px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto;min-height:44px}
.logo svg{width:38px;height:38px;flex:none}
.dnav{display:flex;gap:2px}
.dnav a{text-decoration:none;font-weight:500;font-size:1rem;padding:10px 14px;border-radius:10px}
.dnav a:hover{background:var(--tint)}
.dnav a[aria-current]{box-shadow:inset 0 -3px 0 #d9473b;border-radius:10px 10px 2px 2px}
.fam-slot{display:flex;align-items:center;justify-content:center;min-width:1px;min-height:1px}
.btn-top{background:var(--ink);color:#fff;text-decoration:none;font-family:var(--font-display);font-weight:500;font-size:.98rem;padding:11px 16px;border-radius:11px;white-space:nowrap;box-shadow:inset 0 -3px 0 rgba(0,0,0,.35)}
.btn-top:hover{background:#2f6fb5}
.mnav{display:none}
.mnav summary{list-style:none;cursor:pointer;width:46px;height:46px;display:grid;place-items:center;border-radius:11px;background:var(--tint)}
.mnav summary::-webkit-details-marker{display:none}
.mnav[open] summary{background:#d9b07a}
.mnav nav{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:5px solid #d9b07a;display:grid;padding:6px 16px 16px;box-shadow:0 20px 30px -20px rgba(60,40,10,.35)}
.mnav nav a{padding:13px 4px;text-decoration:none;font-weight:600;font-family:var(--font-display);font-size:1.1rem;border-bottom:1px solid var(--line)}
.mnav nav a[aria-current]{color:#c23b30}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:12px 22px;border-radius:13px;font-family:var(--font-display);font-weight:600;font-size:1.06rem;text-decoration:none;cursor:pointer;border:0;transition:transform .22s cubic-bezier(.2,.8,.3,1),background-color .2s}
.btn:hover{transform:translateY(-2px)}
.btn-red{background:#c23b30;color:#fff;box-shadow:inset 0 -4px 0 rgba(0,0,0,.22)}
.btn-red:hover{background:#ad3127}
.btn-line{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink),inset 0 -5px 0 0 var(--ink)}
.btn-line:hover{background:var(--tint)}
.btn-s{min-height:46px;padding:10px 18px;font-size:1rem}
.tl{color:var(--link);font-weight:600;text-decoration:underline;text-underline-offset:.22em}
.tl:hover{color:#c23b30}

/* headline blocks */
.hstack{display:flex;flex-direction:column;align-items:flex-start;font-family:var(--font-display);font-weight:600;font-size:clamp(1.8rem,3.55vw,3.3rem);line-height:1.04;letter-spacing:-.012em}
.hb{display:block;max-width:calc(100% - var(--x,0px));padding:.13em .36em .17em;border-radius:.17em;margin-top:-.03em;transform:translateX(var(--x,0px)) rotate(var(--r,0deg));box-shadow:inset 0 -.1em 0 rgba(0,0,0,.15),inset 0 .05em 0 rgba(255,255,255,.28),0 .12em .22em -.08em rgba(70,45,10,.3);animation:hdrop .9s both;animation-delay:var(--d,0s)}
.hb1{background:repeating-linear-gradient(96deg,rgba(122,78,30,.11) 0 1px,transparent 1px 7px,rgba(122,78,30,.06) 7px 9px,transparent 9px 17px),#d9b07a;color:var(--ink);--r:-.7deg;--d:.36s}
.hb2{background:repeating-linear-gradient(96deg,rgba(255,255,255,.07) 0 1px,transparent 1px 8px,rgba(0,0,0,.04) 8px 10px,transparent 10px 18px),#d9473b;color:#fff;--x:.85em;--r:.6deg;--d:.24s}
.hb3{background:repeating-linear-gradient(96deg,rgba(255,255,255,.07) 0 1px,transparent 1px 8px,rgba(0,0,0,.04) 8px 10px,transparent 10px 18px),#2f6fb5;color:#fff;--x:.25em;--r:-.45deg;--d:.12s}
.hb4{background:repeating-linear-gradient(96deg,rgba(255,255,255,.07) 0 1px,transparent 1px 8px,rgba(0,0,0,.04) 8px 10px,transparent 10px 18px),#2f7d4b;color:#fff;--x:1.3em;--r:.8deg;--d:0s}
@keyframes hdrop{0%{transform:translate(var(--x,0px),-1.6em) rotate(calc(var(--r,0deg) * -5));opacity:0;animation-timing-function:cubic-bezier(.45,0,.8,.6)}
18%{opacity:1}
58%{transform:translate(var(--x,0px),0) rotate(var(--r,0deg));animation-timing-function:cubic-bezier(.2,.7,.4,1)}
72%{transform:translate(var(--x,0px),-.12em) rotate(calc(var(--r,0deg) * 1.8));animation-timing-function:cubic-bezier(.5,0,.7,1)}
86%{transform:translate(var(--x,0px),0) rotate(var(--r,0deg))}
93%{transform:translate(var(--x,0px),-.03em) rotate(var(--r,0deg))}
100%{transform:translate(var(--x,0px),0) rotate(var(--r,0deg));opacity:1}}

/* hero */
.hero{max-width:1320px;margin:0 auto;padding:clamp(22px,3.2vw,40px) clamp(16px,3vw,40px) clamp(48px,6vw,88px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:"copy tool" "photo tool";grid-template-rows:auto 1fr;column-gap:clamp(28px,4vw,60px);row-gap:28px;align-items:start}
.h-copy{grid-area:copy}
.tool{grid-area:tool}
.h-photo{grid-area:photo;margin:0}
.lede{font-size:clamp(1.06rem,1.3vw,1.2rem);line-height:1.55;color:var(--mut);margin-top:22px;max-width:36em}
.h-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.h-photo img{width:100%;aspect-ratio:2.05/1;object-fit:cover;object-position:50% 74%;border-radius:22px}

/* tool */
.tool{background:var(--tint);border-radius:26px;padding:clamp(18px,1.7vw,24px) clamp(18px,2.2vw,30px) clamp(20px,2vw,26px);position:relative}
.tool-h{font-family:var(--font-display);font-weight:600;font-size:1.32rem;line-height:1.2}
.tool-p{color:var(--mut);font-size:.97rem;margin-top:2px}
.stacks{--bh:clamp(34px,2.65vw,40px);display:grid;grid-template-columns:1fr 1fr;margin-top:10px}
.stack{appearance:none;border:0;background:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:stretch;text-align:center;color:inherit;border-radius:14px;font:inherit}
.blocks{display:flex;flex-direction:column-reverse;align-items:center;justify-content:flex-start;min-height:calc(var(--bh) * 5 + 36px)}
.blk{display:grid;place-items:center;width:clamp(84px,7.6vw,112px);height:var(--bh);border-radius:8px;margin-top:-1px;font-family:var(--font-display);font-weight:600;font-size:1.5rem;line-height:1;color:#fff;transform:translate(var(--x),var(--lift,0px)) rotate(var(--r));transition:transform .28s cubic-bezier(.2,.8,.3,1);box-shadow:inset 0 -4px 0 rgba(0,0,0,.17),inset 0 2px 0 rgba(255,255,255,.28)}
.b1{background:repeating-linear-gradient(96deg,rgba(122,78,30,.11) 0 1px,transparent 1px 7px,rgba(122,78,30,.06) 7px 9px,transparent 9px 17px),#d9b07a;color:var(--ink)}
.b2{background:repeating-linear-gradient(96deg,rgba(255,255,255,.07) 0 1px,transparent 1px 8px,rgba(0,0,0,.04) 8px 10px,transparent 10px 18px),#d9473b}
.b3{background:repeating-linear-gradient(96deg,rgba(255,255,255,.07) 0 1px,transparent 1px 8px,rgba(0,0,0,.04) 8px 10px,transparent 10px 18px),#2f6fb5}
.b4{background:repeating-linear-gradient(96deg,rgba(255,255,255,.07) 0 1px,transparent 1px 8px,rgba(0,0,0,.04) 8px 10px,transparent 10px 18px),#2f7d4b}
.b5{background:repeating-linear-gradient(96deg,rgba(122,78,30,.11) 0 1px,transparent 1px 7px,rgba(122,78,30,.06) 7px 9px,transparent 9px 17px),#c89458;color:var(--ink)}
.stack:hover .blk{--lift:-3px}
.stack:hover .blk:nth-child(2){--lift:-5px}.stack:hover .blk:nth-child(3){--lift:-7px}.stack:hover .blk:nth-child(4){--lift:-9px}.stack:hover .blk:nth-child(5){--lift:-11px}
.flag{display:block;width:30px;height:34px;margin-bottom:-2px;visibility:hidden;transform-origin:50% 100%}
.flag svg{width:30px;height:34px}
.stack[aria-pressed=true] .flag{visibility:visible;animation:flagup .5s .5s cubic-bezier(.2,.8,.3,1.3) both}
@keyframes flagup{0%{transform:scaleY(0)}100%{transform:scaleY(1)}}
.drop .blk{animation:bdrop .8s both;animation-delay:calc(var(--i) * 95ms + var(--sd,0ms))}
.stack[data-i="1"]{--sd:160ms}
@keyframes bdrop{0%{transform:translate(var(--x),-120px) rotate(calc(var(--r) * -6));opacity:0;animation-timing-function:cubic-bezier(.45,0,.85,.55)}
15%{opacity:1}
56%{transform:translate(var(--x),0) rotate(var(--r));animation-timing-function:cubic-bezier(.2,.7,.4,1)}
70%{transform:translate(var(--x),-8px) rotate(calc(var(--r) * 2));animation-timing-function:cubic-bezier(.5,0,.7,1)}
84%{transform:translate(var(--x),0) rotate(var(--r))}
92%{transform:translate(var(--x),-2px) rotate(var(--r))}
100%{transform:translate(var(--x),0) rotate(var(--r));opacity:1}}
.plank{display:block;height:14px;background:repeating-linear-gradient(96deg,rgba(122,78,30,.11) 0 1px,transparent 1px 7px,rgba(122,78,30,.06) 7px 9px,transparent 9px 17px),#c89458;box-shadow:inset 0 3px 0 rgba(255,255,255,.3),0 10px 14px -10px rgba(80,50,10,.6)}
.stack:first-child .plank{border-radius:6px 0 0 6px}.stack:last-child .plank{border-radius:0 6px 6px 0}
.cap{display:grid;justify-items:center;gap:3px;padding:9px 4px 0}
.cap b{font-family:var(--font-display);font-weight:600;font-size:1.12rem;padding:3px 12px;border-radius:9px;transition:background-color .2s}
.cap-c{color:var(--mut);font-size:.9rem;font-variant-numeric:tabular-nums;letter-spacing:.02em}.cap-c span{white-space:nowrap}.cap-c span+span::before{content:"";display:inline-block;width:7px;height:7px;border-radius:2px;background:#c89458;margin:0 7px 2px 3px;transform:rotate(10deg)}
.stack[aria-pressed=true] .cap b{background:#c23b30;color:#fff;box-shadow:inset 0 -3px 0 rgba(0,0,0,.2)}
.stack:focus-visible{outline-offset:4px}
.qd{margin-top:14px;padding-top:14px;border-top:2px dashed #d3b386}
.qd-t{font-family:var(--font-display);font-weight:600;font-size:clamp(1.22rem,1.6vw,1.45rem);line-height:1.2}
.qd-m{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:5px;color:var(--mut);font-size:.97rem}
.qd-code{font-weight:600;color:var(--ink);letter-spacing:.03em}
.qd-h{font-weight:600;font-size:.95rem;margin-top:12px}
.qd-f{list-style:none;display:flex;flex-wrap:wrap;gap:3px 14px;margin-top:4px;font-size:.95rem}
.qd-f li{display:flex;align-items:center;gap:7px}
.qd-f li::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);flex:none;transform:rotate(9deg)}
.qd-p{list-style:none;margin-top:12px;border-top:1px solid #e6d8c2}
.qd-p li{border-bottom:1px solid #e6d8c2}
.qd-p a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;padding:6px 0;text-decoration:none}
.qd-p a:hover span{color:var(--link);text-decoration:underline}
.qd-p em{font-style:normal;white-space:nowrap;display:flex;align-items:baseline;gap:8px}
.qd-p b{font-variant-numeric:tabular-nums;font-weight:600;font-size:1.05rem}
.qd-p s{color:var(--mut);font-size:.86rem;font-variant-numeric:tabular-nums}
.qd-n{font-size:.8rem;line-height:1.45;color:var(--mut);margin-top:8px}
.qd-a{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:14px}.qd-a+.qd-p{margin-top:16px}
.preo{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;font-weight:600;color:#9a2c22}
.preo::before{content:"";width:8px;height:8px;border-radius:2px;background:#d9473b;transform:rotate(9deg)}

/* needs */
.needs{background:#fff}
.needs-in{max-width:1320px;margin:0 auto;padding:clamp(40px,6vw,96px) clamp(16px,3vw,40px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start}
.needs-h{position:sticky;top:110px}
.needs h2,.where h2,.board-h h2,.shelf-h h2,.close h2{font-family:var(--font-display);font-weight:600;font-size:clamp(1.85rem,3.4vw,3rem);line-height:1.08;letter-spacing:-.012em}
.needs-h p{margin-top:16px;font-size:1.1rem;color:var(--mut);max-width:30em}
.needs-l{list-style:none;border-top:2px solid var(--ink)}
.needs-l li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:20px;padding:22px 0;border-bottom:1px solid var(--line);align-items:start}
.needs-l .fs{width:46px;height:46px;margin-top:2px}
.needs-l h3{font-family:var(--font-display);font-weight:600;font-size:1.3rem;line-height:1.2}
.needs-l p{margin-top:5px;color:var(--mut);font-size:1.04rem;max-width:40em}

/* educator photo */
.where{max-width:1320px;margin:0 auto;padding:clamp(16px,2vw,24px) clamp(16px,3vw,40px) clamp(56px,7vw,110px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:center}
.where-img{margin:0;position:relative}
.where-img img{width:100%;aspect-ratio:4/3.1;object-fit:cover;object-position:38% 40%;border-radius:22px}
.where-copy p{margin-top:16px;font-size:1.1rem;line-height:1.6;color:#463d48;max-width:34em}
.where-copy a:not(.tl){color:var(--link)}

/* felt board */
.board-s{max-width:1320px;margin:0 auto;padding:0 clamp(16px,3vw,40px) clamp(56px,7vw,110px)}
.board-h{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 60px;align-items:end;margin-bottom:28px}
.board-h p{font-size:1.08rem;color:var(--mut);max-width:34em}
.board{position:relative;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .33 0 0 0 0 .22 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),#f3ece1;border-radius:18px;border:16px solid #d9b07a;border-image:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),inset 0 6px 18px rgba(80,55,20,.12),0 22px 40px -28px rgba(80,50,10,.6);padding:clamp(22px,3vw,44px)}
.board::before{content:"";position:absolute;inset:-16px;border-radius:18px;pointer-events:none;background:repeating-linear-gradient(96deg,rgba(122,78,30,.11) 0 1px,transparent 1px 7px,rgba(122,78,30,.06) 7px 9px,transparent 9px 17px);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:16px}
.deco{position:absolute;pointer-events:none}
.deco.sun{width:clamp(70px,8vw,112px);top:-46px;right:clamp(16px,6vw,90px);transform:rotate(12deg)}
.deco.tree{width:clamp(80px,9vw,130px);bottom:-14px;left:-34px;z-index:2}
.pieces{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-areas:"la la la ak ak ak" "la la la lr lr lr" "rp rp ll ll ts ts" "vp vp vp er er er";gap:clamp(14px,1.6vw,22px)}
.pc{position:relative;padding:clamp(18px,2vw,28px);border-radius:14px 22px 16px 20px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .33 0 0 0 0 .22 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");box-shadow:0 2px 0 rgba(0,0,0,.08),0 12px 18px -14px rgba(60,40,10,.55)}
.pc::before{content:"";position:absolute;top:10px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#fff;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.25)}
.pc h3{font-family:var(--font-display);font-weight:600;font-size:clamp(1.2rem,1.55vw,1.45rem);line-height:1.2;margin-top:6px}
.pc p{margin-top:8px;font-size:1rem;line-height:1.5}
.pc .pc-l{font-size:.9rem;font-weight:600;margin-top:12px}
.pc .pc-a{margin-top:6px}
.pc a{font-weight:600;text-decoration:underline;text-underline-offset:.2em;display:inline-block;padding:6px 0}
.pc-la{grid-area:la;border-radius:clamp(60px,9vw,140px) clamp(60px,9vw,140px) 16px 16px;padding-top:clamp(56px,6vw,92px);padding-left:clamp(26px,3vw,48px);padding-right:clamp(26px,3vw,48px);transform:rotate(-.6deg)}
.pc-la h3{font-size:clamp(1.5rem,2.3vw,2.1rem)}
.pc-la p{font-size:1.08rem;max-width:30em}
.pc-ak{grid-area:ak;transform:rotate(.5deg)}
.pc-lr{grid-area:lr;transform:rotate(-.4deg)}
.pc-rp{grid-area:rp;transform:rotate(.8deg)}
.pc-ll{grid-area:ll;transform:rotate(-.7deg)}
.pc-ts{grid-area:ts;transform:rotate(.4deg)}
.pc-vp{grid-area:vp;transform:rotate(.6deg)}
.pc-er{grid-area:er;transform:rotate(-.5deg)}
.f-red{background-color:#c23b30;color:#fff}
.f-blue{background-color:#2f6fb5;color:#fff}
.f-green{background-color:#2f7d4b;color:#fff}
.f-timber{background-color:#e2bd8b;color:var(--ink)}
.f-white{background-color:#fffdf9;color:var(--ink)}
.f-rose{background-color:#f6d5cc;color:var(--ink)}
.f-greenl{background-color:#cfe8d5;color:var(--ink)}
.f-red a,.f-blue a,.f-green a{color:#fff}
.f-timber a,.f-white a,.f-rose a,.f-greenl a{color:#1f4f86}

/* product shelf */
.shelf-s{background:var(--tint);padding:clamp(48px,7vw,104px) max(clamp(16px,3vw,40px),calc((100% - 1240px)/2))}
.shelf-h{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 60px;align-items:end;margin-bottom:clamp(28px,4vw,48px)}
.shelf-h p{color:var(--mut);font-size:1.08rem;max-width:32em}
.srow{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(18px,3vw,40px);align-items:end;margin-top:clamp(26px,3vw,40px)}
.slab{display:grid;gap:2px;padding-bottom:22px}
.slab b{font-family:var(--font-display);font-weight:600;font-size:1.6rem;line-height:1.1}
.slab span{color:var(--mut);font-variant-numeric:tabular-nums;letter-spacing:.03em}
.slab a{margin-top:8px;color:var(--link);font-weight:600;padding:8px 0;display:inline-block}
.sitems ul{list-style:none;display:flex;align-items:flex-end;gap:clamp(12px,1.6vw,22px);padding:0 clamp(8px,2vw,28px)}
.pb{flex:1 1 0;min-width:0}
.pb-red{flex-grow:1.35}
.pb a{display:grid;gap:6px;padding:20px 22px 18px;border-radius:12px 12px 4px 4px;text-decoration:none;color:var(--ink);background:repeating-linear-gradient(96deg,rgba(122,78,30,.11) 0 1px,transparent 1px 7px,rgba(122,78,30,.06) 7px 9px,transparent 9px 17px),#e7c697;box-shadow:inset 0 -5px 0 rgba(0,0,0,.12),inset 0 2px 0 rgba(255,255,255,.35);position:relative;transition:transform .25s cubic-bezier(.2,.8,.3,1)}
.pb a::before{content:"";position:absolute;left:22px;right:22px;top:0;height:8px;border-radius:0 0 6px 6px;background:var(--pc,#2f6fb5)}
.pb-red a{--pc:#d9473b;min-height:228px}
.pb-blue a{--pc:#2f6fb5;min-height:196px}
.pb a:hover{transform:translateY(-6px)}
.pb-f{font-family:var(--font-display);font-weight:600;font-size:1.3rem;line-height:1.15;margin-top:4px}
.pb-q{font-size:.92rem;color:#4a3c2c;line-height:1.35}
.pb-pr{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:auto;padding-top:6px}
.pb-pr b{font-family:var(--font-display);font-weight:600;font-size:clamp(1.7rem,2.6vw,2.2rem);line-height:1;font-variant-numeric:tabular-nums}
.pb-pr s{font-size:.92rem;color:#4a3c2c;font-variant-numeric:tabular-nums}
.pb-go{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.95rem;color:#1f4f86}
.pb-go svg{width:20px;height:12px}
.pb a:hover .pb-go{text-decoration:underline}
.plank.long{height:16px;border-radius:6px}
.shelf-n{margin-top:26px;font-size:.88rem;color:var(--mut);max-width:60em}

/* close */
.close-in{max-width:1320px;margin:0 auto;padding:clamp(56px,8vw,120px) clamp(16px,3vw,40px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:40px;align-items:center}
.close h2{font-size:clamp(2.2rem,5vw,4.2rem)}
.close p{margin-top:14px;font-size:1.12rem;color:var(--mut);max-width:36em}
.close p a:not(.btn){color:var(--link);font-weight:600}
.close .h-cta{margin-top:26px}
.abc{width:100%;max-width:300px;justify-self:center}

/* inner pages */
.page-head{max-width:1240px;margin:0 auto;padding:clamp(36px,6vw,80px) clamp(16px,3vw,40px) 12px;display:grid;grid-template-columns:minmax(0,8fr) minmax(0,3fr);gap:40px;align-items:end}
.page-head h1,.read h1,.ct h1{font-family:var(--font-display);font-weight:600;font-size:clamp(2.2rem,4.6vw,3.8rem);line-height:1.05;letter-spacing:-.015em}
.page-head .ph-c>p{margin-top:14px;font-size:1.12rem;color:var(--mut);max-width:40em}
.ph-blocks{align-self:center}.ph-blocks .abc{max-width:230px}
.find{margin-top:26px;max-width:600px}
.find label{display:block;font-weight:600;margin-bottom:8px}
.find-row{display:flex;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 2px var(--ink);padding:5px}
.find-row:focus-within{box-shadow:inset 0 0 0 3px #2f6fb5}
.find input[type=search]{flex:1;min-width:0;border:0;padding:10px 12px;font-size:1.08rem;letter-spacing:.02em;background:transparent;outline:0}
.find input::placeholder{color:#6f6670}
.find button{border:0;background:#c23b30;color:#fff;font-family:var(--font-display);font-weight:600;font-size:1rem;padding:0 20px;border-radius:10px;cursor:pointer;white-space:nowrap;min-height:44px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.2)}
.find button:hover{background:#ad3127}
.find-try{margin-top:10px;font-size:.95rem;color:var(--mut)}
.find-try a{color:var(--link);font-weight:600}
.sec{max-width:1240px;margin:0 auto;padding:clamp(32px,4.5vw,64px) clamp(16px,3vw,40px) 0}
.sec-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 30px;margin-bottom:16px}
.sec-h h2{font-family:var(--font-display);font-weight:600;font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.1}
.sec-h p{color:var(--mut);max-width:44em}
.sec-h p a{color:var(--link)}
.count{font-weight:600;color:var(--ink)!important}
.tw{overflow-x:auto}
.qt,.mt{width:100%;font-size:1rem}
.qt thead th,.mt thead th{font-weight:600;font-size:.92rem;text-align:left;padding:10px 14px;background:var(--tint);border-bottom:2px solid var(--ink)}
.qt td,.qt tbody th,.mt td,.mt tbody th{padding:16px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;font-weight:400}
.qt .code{font-weight:600;letter-spacing:.03em;white-space:nowrap}
.qt .t{font-family:var(--font-display);font-weight:500;font-size:1.12rem;line-height:1.25}
.qt a{color:var(--link);font-weight:600;white-space:nowrap;display:inline-block;padding:8px 0}
.qt .find-l{background:#c23b30;color:#fff;text-decoration:none;padding:10px 16px;border-radius:10px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.2);font-family:var(--font-display)}
.qt .find-l:hover{background:#ad3127}
.lv{white-space:nowrap;color:var(--mut)}
.lvb{display:inline-flex;flex-direction:column-reverse;gap:1px;vertical-align:middle;margin-right:10px}
.lvb i{display:block;width:16px;height:6px;border-radius:2px;background:#d9b07a}
.lvb i:nth-child(2){background:#d9473b}.lvb i:nth-child(3){background:#2f6fb5}.lvb i:nth-child(4){background:#2f7d4b}.lvb i:nth-child(5){background:#c89458}
.qnone{margin-top:14px;font-weight:500}
.cur{margin-top:14px;font-size:.95rem;color:var(--mut)}
.mt thead th span{display:block;font-weight:400;color:var(--mut);font-size:.85rem;letter-spacing:.03em}
.mt td{width:24%}
.mt td.yes svg{width:24px;height:24px}
.mt td.no{color:var(--mut);font-size:.92rem}
.mt tbody th{font-weight:600}.mf{display:flex;align-items:center;gap:10px}.mf .fs{width:18px;height:18px;flex:none}.mt thead th{white-space:nowrap}
.pl{list-style:none;border-top:2px solid var(--ink)}
.pl li{border-bottom:1px solid var(--line)}
.pl a{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,6fr) minmax(0,3fr);gap:16px;align-items:baseline;padding:18px 4px;text-decoration:none}
.pl a:hover .pl-t{color:var(--link);text-decoration:underline}
.pl-f{font-family:var(--font-display);font-weight:600;font-size:1.15rem}
.pl-t{color:var(--mut)}
.pl-p{text-align:right;display:flex;justify-content:flex-end;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.pl-p b{font-family:var(--font-display);font-weight:600;font-size:1.4rem;font-variant-numeric:tabular-nums}
.pl-p s{color:var(--mut);font-size:.9rem;font-variant-numeric:tabular-nums}
.colls{padding-bottom:clamp(56px,8vw,110px)}
.cl{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;border-top:2px solid var(--ink)}
.cl li{border-bottom:1px solid var(--line)}
.cl a{display:grid;gap:2px;padding:14px 0;text-decoration:none}
.cl b{font-weight:600;font-size:1.06rem}
.cl span{color:var(--mut);font-size:.94rem}
.cl a:hover b{color:var(--link);text-decoration:underline}

/* reading */
.guide-w{max-width:1240px;margin:0 auto;padding:0 clamp(16px,3vw,40px);display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:clamp(24px,5vw,72px)}
.guide-w.solo{grid-template-columns:minmax(0,1fr);max-width:860px}
.toc{position:sticky;top:110px;align-self:start;margin-top:clamp(48px,7vw,96px);padding:22px;background:var(--tint);border-radius:18px}
.toc p{font-family:var(--font-display);font-weight:600;font-size:1.1rem}
.toc ol{list-style:none;margin-top:10px;counter-reset:t}
.toc li{counter-increment:t}
.toc a{display:flex;gap:10px;align-items:center;padding:8px 0;text-decoration:none;font-weight:500}
.toc a::before{content:"";width:12px;height:12px;border-radius:3px;background:#d9b07a;flex:none;transform:rotate(8deg)}
.toc li:nth-child(2) a::before{background:#d9473b}.toc li:nth-child(3) a::before{background:#2f6fb5}.toc li:nth-child(4) a::before{background:#3d9a5f}.toc li:nth-child(5) a::before{background:#c89458}
.toc a:hover{color:var(--link);text-decoration:underline}
.read{max-width:70ch;padding:clamp(40px,6vw,88px) 0 clamp(56px,8vw,110px)}
.read .lede{margin:18px 0 1.6em;font-size:1.18rem}
.read h2{font-family:var(--font-display);font-weight:600;font-size:clamp(1.5rem,2.4vw,1.9rem);line-height:1.15;margin:1.9em 0 .5em;scroll-margin-top:100px}
.read p{margin-bottom:.95em;font-size:1.09rem;line-height:1.7}
.read ul{padding-left:1.2em;margin-bottom:1em}
.read li{margin-bottom:.45em;font-size:1.09rem;line-height:1.6}
.read li::marker{color:#c23b30}
.read a:not(.btn){color:var(--link)}
.read-fig{margin:2em 0}
.read-fig img{border-radius:20px;width:100%}
.read-next{margin-top:2em}
.fmts{margin:1.2em 0 1.4em;border-top:2px solid var(--ink)}
.fmts div{padding:14px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr);gap:6px 24px}
.fmts dt{font-family:var(--font-display);font-weight:600;font-size:1.08rem;display:flex;gap:10px;align-items:flex-start}
.fmts dt .fs{width:20px;height:20px;flex:none;margin-top:3px}
.fmts dd{margin:0;color:#463d48;line-height:1.55}

/* contact */
.ct{max-width:1240px;margin:0 auto;padding:clamp(36px,6vw,80px) clamp(16px,3vw,40px) clamp(56px,8vw,110px);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:start}
.ct .lede{margin-top:16px}
.c-ways{margin-top:26px;border-top:2px solid var(--ink)}
.c-ways a{display:block;padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none}
.c-ways span{display:block;font-size:.92rem;color:var(--mut)}
.c-ways b{font-family:var(--font-display);font-weight:600;font-size:1.5rem;overflow-wrap:anywhere}
.c-ways a:hover b{color:#c23b30}
.c-addr{margin-top:16px;color:var(--mut)}
.c-form{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .33 0 0 0 0 .22 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),#f3ece1;border-radius:22px;border:12px solid #d9b07a;padding:clamp(20px,3vw,32px);display:grid;gap:14px}
.c-form h2{font-family:var(--font-display);font-weight:600;font-size:1.6rem}
.c-note{font-size:.94rem;color:var(--mut)}
.c-form label{display:grid;gap:6px;font-weight:600;min-width:0}
.c-form select{width:100%;min-width:0;text-overflow:ellipsis}
.c-form input,.c-form textarea,.c-form select{border:2px solid #cdb795;background:#fff;padding:11px 12px;font-weight:400;border-radius:10px;min-height:46px}
.c-form input:focus,.c-form textarea:focus,.c-form select:focus{border-color:#2f6fb5;outline:0;box-shadow:0 0 0 3px rgba(47,111,181,.25)}
.c-form button{justify-self:start}

/* legal and 404 */
.legal-wrap h1,.legal-wrap h2{font-weight:600}
.legal-wrap a{color:var(--link)}
.nf h1{font-weight:600}
.nf::before{content:"";width:150px;height:52px;background:linear-gradient(#d9473b,#d9473b) 0 100%/46px 24px no-repeat,linear-gradient(#2f6fb5,#2f6fb5) 50px 100%/46px 24px no-repeat,linear-gradient(#d9b07a,#d9b07a) 26px 0/46px 24px no-repeat;transform:rotate(-2deg)}
.nf a{color:var(--link);font-weight:600}

/* footer */
.ft{background:var(--tint)}
.ft::before{content:"";display:block;height:5px;background:repeating-linear-gradient(90deg,#3d9a5f 0 56px,#2f6fb5 56px 112px,#d9b07a 112px 168px,#d9473b 168px 224px)}
.ft-in{max-width:1320px;margin:0 auto;padding:clamp(40px,5vw,64px) clamp(16px,3vw,40px);display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) minmax(0,2.2fr) minmax(0,1.5fr);gap:32px}
.ft-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.ft-logo svg{width:34px;height:34px}
.ft-brand p{margin-top:12px;font-size:.93rem;color:var(--mut);max-width:32em}
.ft-brand .ft-sm{font-size:.86rem}
.ft h2{font-family:var(--font-display);font-size:1.05rem;font-weight:600;margin-bottom:8px}
.ft ul{list-style:none}
.ft li a{display:inline-block;padding:4px 0;font-size:.93rem;text-decoration:none}
.ft li a:hover{text-decoration:underline;color:#c23b30}
.ft-pol ul{columns:2;column-gap:20px}
.ft-base{max-width:1240px;width:calc(100% - 2 * clamp(16px,3vw,40px));margin:0 auto;padding:16px 0 26px;border-top:1px solid #e6d8c2;display:flex;justify-content:space-between;gap:10px 20px;flex-wrap:wrap;font-size:.86rem;color:var(--mut)}

/* responsive */
@media (max-width:1100px){.dnav{display:none}.mnav{display:block}}
@media (max-width:1000px){
.hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "tool" "photo"}
.stacks{--bh:44px}
.needs-in,.where,.close-in,.ct,.guide-w{grid-template-columns:minmax(0,1fr)}
.needs-h{position:static}
.where-img::before{display:none}
.board-h,.shelf-h{grid-template-columns:minmax(0,1fr)}
.pieces{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"la la" "ak lr" "rp ll" "ts vp" "er er"}
.srow{grid-template-columns:minmax(0,1fr);gap:8px}
.slab{padding-bottom:4px;grid-template-columns:auto auto 1fr;align-items:baseline;gap:4px 14px}
.slab a{margin-top:0;justify-self:end}
.toc{position:static;margin-top:32px}
.read{padding-top:28px}
.page-head{grid-template-columns:minmax(0,1fr)}
.ph-blocks{display:none}
.abc{max-width:220px;justify-self:start}
.ft-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ft-brand,.ft-pol{grid-column:1/-1}
}
@media (max-width:640px){
.btn-top{display:none}
.wm{font-size:1.18rem}
.logo svg{width:34px;height:34px}
.hero{row-gap:22px}
.h-cta .btn{flex:1 1 auto}
.stacks{--bh:38px}
.blk{width:clamp(76px,24vw,100px)}
.tool{border-radius:20px}
.qd-p a{flex-wrap:wrap;gap:2px 12px}.qd-p a span{flex:1 1 100%}
.pieces{grid-template-columns:minmax(0,1fr);grid-template-areas:"la" "ak" "lr" "rp" "ll" "ts" "vp" "er"}
.pc-la{border-radius:80px 80px 16px 16px;padding-top:56px}
.board{border-width:12px;padding:16px}
.board::before{inset:-12px;padding:12px}
.deco.tree{display:none}
.deco.sun{top:-40px;right:6px;width:64px}
.sitems ul{flex-direction:column;align-items:stretch;padding:0 6px}
.pb a,.pb-red a,.pb-blue a{min-height:0}
.slab{grid-template-columns:minmax(0,1fr) auto}
.slab b{grid-column:1/-1}
.qt thead{display:none}
.qt,.qt tbody,.qt tr,.qt td,.qt tbody th{display:block}
.qt tr{padding:14px 0;border-bottom:1px solid var(--line)}
.qt td,.qt tbody th{border:0;padding:4px 0}
.qt td:nth-child(4),.qt td:nth-child(5){display:inline-block;margin-right:14px}
.pl a{grid-template-columns:minmax(0,1fr);gap:4px}
.pl-p{justify-content:flex-start}
.cl{grid-template-columns:minmax(0,1fr)}
.fmts div{grid-template-columns:minmax(0,1fr)}
.ft-in{grid-template-columns:minmax(0,1fr)}
.ft-pol ul{columns:1}
.find button{padding:0 14px}
.abc{max-width:180px}
.cap-c span{display:block}.cap-c span+span::before{display:none}
.mt th,.mt td{padding-left:8px!important;padding-right:8px!important}.mt{font-size:.94rem}.mf{gap:8px}
}