*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--kit-bg);color:var(--kit-ink);font:400 17px/1.6 var(--kit-text);
  background-image:radial-gradient(rgba(87,73,58,.05) 1px,transparent 1px);background-size:5px 5px;overflow-x:hidden}
a{color:var(--kit-primary)}
.mono{font-family:var(--kit-mono)}
.small{font-size:.72rem;font-weight:400;letter-spacing:.04em}
:focus-visible{outline:3px solid var(--kit-signal);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--kit-surface);padding:.5rem 1rem}
.skip:focus{left:1rem;z-index:20}
[hidden]{display:none!important}

/* masthead */
.mast{display:flex;align-items:center;gap:1.5rem;padding:.7rem 2rem;border-bottom:var(--dir-rule);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--kit-ink)}
.brand-mark{font:800 1.1rem/1 var(--kit-display);color:var(--kit-surface);background:var(--kit-primary);padding:.45rem .5rem;border-radius:var(--dir-radius)}
.brand-name{font:800 1.45rem/1 var(--kit-display);text-transform:uppercase;letter-spacing:.02em}
.brand-name em{font-style:normal;color:var(--kit-accent)}
.tabs{display:flex;flex-wrap:wrap;gap:.25rem;margin-left:auto;align-self:flex-end;margin-bottom:-.72rem}
.tabs a{font:600 .8rem/1 var(--kit-mono);text-transform:uppercase;letter-spacing:.06em;text-decoration:none;color:var(--kit-muted);
  padding:.6rem .9rem;border:var(--dir-border-width) solid rgba(87,73,58,.35);border-bottom:0;border-radius:var(--dir-radius) var(--dir-radius) 0 0;background:rgba(247,242,232,.5)}
.tabs a[aria-current="page"]{background:var(--kit-surface);color:var(--kit-primary);border-color:var(--kit-muted)}
.sheet{font-size:.7rem;color:var(--kit-muted);letter-spacing:.08em}

/* board */
.board{position:relative;margin:1.25rem 2rem 0;border:var(--dir-border-width) solid var(--kit-primary);background:#E9E6DF;
  min-height:900px;height:calc((100vw - 4rem) * 7 / 12);overflow:hidden;box-shadow:var(--dir-shadow)}
.plan{position:absolute;inset:0;width:100%;height:100%}
.ticks{position:absolute;z-index:1;pointer-events:none}
.ticks-top{left:0;right:0;top:0;height:10px;background:repeating-linear-gradient(90deg,var(--kit-accent) 0 1px,transparent 1px 24px)}
.ticks-left{top:0;bottom:0;left:0;width:10px;background:repeating-linear-gradient(180deg,var(--kit-accent) 0 1px,transparent 1px 24px)}
.dimline{stroke-dasharray:240;stroke-dashoffset:240;animation:draw 1.4s ease-out .3s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.board-inner{position:absolute;inset:0;z-index:2}

.title-block{position:absolute;right:3%;top:5%;width:min(34%,440px);background:var(--kit-surface);border:2px solid var(--kit-primary);
  padding:1.1rem 1.3rem 1.2rem;border-radius:2px}
.title-block::before{content:"TITLE";position:absolute;top:-1px;right:-1px;font:600 .62rem/1 var(--kit-mono);letter-spacing:.12em;background:var(--kit-primary);color:var(--kit-surface);padding:.3rem .5rem}
.kicker{margin:0 0 .4rem;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--kit-accent)}
h1{font:800 clamp(2.2rem,3.6vw,3.4rem)/.95 var(--kit-display);text-transform:uppercase;margin:0 0 .6rem;color:var(--kit-primary);letter-spacing:.01em}
.lede{margin:0;font-size:1rem;color:var(--kit-muted)}

/* kraft tag calculator */
.tag{position:absolute;left:3%;top:4%;width:min(470px,36%);background:#CBA978;color:var(--kit-ink);
  background-image:radial-gradient(rgba(28,22,15,.07) 1px,transparent 1.2px);background-size:4px 4px;
  padding:1.3rem 1.3rem 1.1rem 1.3rem;border-radius:var(--dir-radius);box-shadow:var(--dir-shadow);
  clip-path:polygon(9% 0,100% 0,100% 100%,0 100%,0 4%)}
.tag-hole{position:absolute;left:4.5%;top:1.1rem;width:14px;height:14px;border-radius:50%;background:#E9E6DF;border:2px solid var(--kit-accent)}
.tag .tag-h{font:800 1.7rem/1 var(--kit-display);text-transform:uppercase;margin:0 0 .35rem 1.8rem;display:flex;flex-direction:column;gap:.15rem}
.sample{font-size:.7rem;line-height:1.4;margin:0 0 .6rem;padding:.35rem .5rem;border:var(--dir-rule);color:var(--kit-ink)}
fieldset{border:0;padding:0;margin:0 0 .6rem}
legend{font:700 .8rem/1 var(--kit-text);text-transform:uppercase;letter-spacing:.06em;padding:0;margin-bottom:.35rem}
.row4{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}
.row4 label{font:600 .66rem/1.2 var(--kit-mono);text-transform:uppercase;display:flex;flex-direction:column;gap:.2rem}
input{font:600 .95rem/1 var(--kit-mono);width:100%;min-width:0;padding:.45rem .4rem;background:var(--kit-surface);color:var(--kit-ink);
  border:var(--dir-border-width) solid var(--kit-muted);border-radius:2px}
.openings{display:grid;gap:.3rem}
.op{display:grid;grid-template-columns:1fr 4.6rem auto 4.6rem;align-items:center;gap:.35rem;font-size:.85rem;font-weight:600}
.op i{font:400 .8rem var(--kit-mono);font-style:normal}
.stamp-btn{display:inline-block;font:800 1.15rem/1 var(--kit-display);text-transform:uppercase;letter-spacing:.06em;color:var(--kit-signal);
  background:transparent;border:2px solid var(--kit-signal);border-radius:var(--dir-button-radius);padding:.6rem 1rem;cursor:pointer;
  text-decoration:none;box-shadow:inset 0 0 0 2px rgba(168,50,30,.18)}
.stamp-btn:hover{background:var(--kit-signal);color:var(--kit-surface)}
.stamp-btn:active{transform:translateY(1px)}
.tag .stamp-btn{width:100%;background:var(--kit-signal);color:var(--kit-surface);font-size:1.25rem}
.tag .stamp-btn:hover{background:var(--kit-ink);border-color:var(--kit-ink)}
.results{list-style:none;margin:.7rem 0 0;padding:0;display:grid;gap:.3rem}
.results li{display:grid;grid-template-columns:6.5rem auto;column-gap:.5rem;font-size:.78rem;line-height:1.3;padding:.35rem .45rem;background:var(--kit-surface);border-radius:2px;border-left:4px solid var(--kit-muted)}
.results li b{font-size:.8rem}
.results li span:last-child{grid-column:1/-1}
.results li.pass{border-left-color:var(--kit-primary)}
.results li.tight{border-left-color:var(--kit-accent)}
.results li.fail{border-left-color:var(--kit-signal)}
.results li.sum{display:block;font-weight:700;background:transparent;border:var(--dir-rule);border-left-width:4px}
.results li.flash{outline:2px solid var(--kit-signal)}
.stamp{justify-self:start;font-weight:600;font-size:.68rem;letter-spacing:.1em;padding:.05rem .35rem;border:1.5px solid currentColor;transform:rotate(-3deg);animation:press .25s ease-out}
.pass .stamp{color:var(--kit-primary)}.tight .stamp{color:var(--kit-accent)}.fail .stamp{color:var(--kit-signal)}
@keyframes press{from{transform:scale(1.5) rotate(-3deg);opacity:0}to{transform:scale(1) rotate(-3deg);opacity:1}}

/* pins on plan (map coordinates in % of 1200x700) */
.pin{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:.3rem;background:var(--kit-surface);
  border:var(--dir-border-width) solid var(--kit-primary);border-radius:var(--dir-radius);padding:.25rem .4rem;cursor:pointer;color:var(--kit-primary);font-size:.75rem;box-shadow:var(--dir-shadow)}
.pin::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--kit-primary)}
.pin .st{font:600 .7rem/1 var(--kit-mono);letter-spacing:.1em}
.pin[data-st] .st{padding:.15rem .3rem;border:1.5px solid currentColor;transform:rotate(-4deg);animation:press .25s ease-out}
.pin[data-st="pass"]{color:var(--kit-primary)}
.pin[data-st="tight"]{color:var(--kit-accent);border-color:var(--kit-accent)}
.pin[data-st="fail"]{color:var(--kit-signal);border-color:var(--kit-signal)}
.pin[data-st="fail"]::before{background:var(--kit-signal)}
.p1{left:53.3%;top:91.4%}.p2{left:71.7%;top:67.9%}.p3{left:62%;top:47.1%}.p4{left:84.6%;top:76%}

/* topics */
.topics{margin:2.5rem 2rem 0}
.topics-head{display:flex;align-items:baseline;gap:1.5rem;flex-wrap:wrap;border-bottom:var(--dir-rule);padding-bottom:.6rem;margin-bottom:1.2rem}
.topics-head h2{font:800 2.3rem/1 var(--kit-display);text-transform:uppercase;margin:0;color:var(--kit-primary)}
.topics-head p{margin:0;color:var(--kit-muted)}
.rooms{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.room{display:flex;flex-direction:column;gap:.8rem;padding-top:.3rem;border-top:3px solid var(--kit-primary)}
.room-label{margin:0;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--kit-primary)}
.card{display:flex;flex-direction:column;gap:.3rem;text-decoration:none;color:var(--kit-ink);background:var(--kit-surface);
  border:var(--dir-border-width) solid rgba(87,73,58,.4);border-radius:var(--dir-radius);box-shadow:var(--dir-shadow);padding:.8rem .9rem .9rem;
  background-image:linear-gradient(transparent 1.9rem,rgba(168,50,30,.35) 1.9rem,rgba(168,50,30,.35) calc(1.9rem + 1px),transparent calc(1.9rem + 1px)),repeating-linear-gradient(transparent 0 1.5rem,rgba(30,85,118,.1) 1.5rem calc(1.5rem + 1px))}
.card .num{font-size:.7rem;color:var(--kit-accent);letter-spacing:.1em}
.card strong{font-size:1.02rem;line-height:1.25}
.card span:not(.num){font-size:.88rem;color:var(--kit-muted);line-height:1.45}
.card em{font-style:normal;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--kit-primary)}
a.card:hover{border-color:var(--kit-primary)}

.fy-ad:empty{display:none}
.fy-ad{margin:1.6rem 0;padding:.6rem 0;border-top:var(--dir-rule);border-bottom:var(--dir-rule);clear:both}
.fy-ad::before{content:"Advertisement";display:block;font:600 .62rem/1 var(--kit-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--kit-muted);margin-bottom:.4rem}

/* guide */
.guide-wrap{display:grid;grid-template-columns:minmax(0,44rem) 16rem;gap:3rem;justify-content:center;padding:2rem 2rem 0}
.article{background:var(--kit-surface);border:var(--dir-border-width) solid rgba(87,73,58,.35);border-radius:var(--dir-radius);box-shadow:var(--dir-shadow);padding:2.2rem 2.6rem 2.4rem}
.crumbs{font-size:.75rem;margin:0 0 .8rem;color:var(--kit-muted);letter-spacing:.05em}
.article h1{font-size:clamp(2.2rem,5vw,3.3rem)}
.meta{font-size:.75rem;color:var(--kit-muted);display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin:0 0 1.4rem;padding-bottom:1rem;border-bottom:var(--dir-rule)}
.checked{color:var(--kit-signal);border:1.5px solid var(--kit-signal);padding:.15rem .45rem;transform:rotate(-2deg);display:inline-block;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.article p{font-size:1.1rem;line-height:1.72;margin:0 0 1.15rem;max-width:68ch}
.article .lead{font-size:1.22rem}
.article h2{font:800 1.9rem/1.05 var(--kit-display);text-transform:uppercase;color:var(--kit-primary);margin:2rem 0 .7rem}
sup a{font-family:var(--kit-mono);font-size:.75em;text-decoration:none;padding:0 .15em}
.photo{margin:1.6rem 0}
.photo img{width:100%;height:auto;display:block;border-radius:var(--dir-radius);filter:sepia(.15)}
.photo figcaption{font-size:.75rem;color:var(--kit-muted);margin-top:.4rem}
.checklist{background:#CBA978;border-radius:var(--dir-radius);padding:1rem 1.3rem;margin:1.6rem 0;box-shadow:var(--dir-shadow)}
.checklist h3{margin:0 0 .4rem;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.checklist ol{margin:0;padding-left:1.3rem}
.checklist li{margin:.2rem 0}
.sources{font-size:.78rem;line-height:1.5;color:var(--kit-muted);border-top:var(--dir-rule);padding:1rem 0 0 1.4rem;margin:2rem 0 0}
.sources li{margin-bottom:.4rem}
.margin{display:flex;flex-direction:column;gap:1.5rem}
.margin .side{position:sticky;top:1rem}
.margin .side p{margin:0 0 .6rem;font-size:.9rem;color:var(--kit-muted)}
.small-btn{font-size:1rem;margin-top:.3rem}

.foot{margin:3rem 2rem 0;padding:1.2rem 0 2rem;border-top:var(--dir-rule);color:var(--kit-muted);font-size:.9rem}
.foot p{margin:.2rem 0}
.foot .mono{font-size:.75rem}

@media (max-width:1279px){
  .board{height:auto;min-height:0;padding:1.2rem}
  .board-inner{position:relative;display:flex;flex-direction:column;gap:1rem}
  .plan{opacity:.7}
  .tag,.title-block{position:relative;left:auto;top:auto;right:auto;bottom:auto;width:auto;max-width:560px}
  .title-block{order:-1}
  .pin{display:none}
  .rooms{grid-template-columns:repeat(2,1fr)}
  .guide-wrap{grid-template-columns:minmax(0,1fr)}
  .margin .side{position:static}
}
@media (max-width:600px){
  body{font-size:16px}
  .mast{padding:.6rem 1rem;gap:.6rem}
  .sheet{display:none}
  .tabs{margin-left:0;width:100%}
  .tabs a{padding:.55rem .6rem;font-size:.72rem}
  .board{margin:1rem .6rem 0;padding:.8rem .6rem}
  .tag{padding:1.1rem .8rem .9rem}
  .title-block{padding:.8rem .9rem .9rem}
  .title-block h1{font-size:2rem}
  .title-block .lede{font-size:.92rem;line-height:1.45}
  .row4{gap:.35rem}
  .row4{grid-template-columns:repeat(2,1fr)}
  .op{grid-template-columns:1fr 3.9rem auto 3.9rem;font-size:.8rem}
  .topics{margin:2rem 1rem 0}
  .rooms{grid-template-columns:1fr}
  .guide-wrap{padding:1rem .6rem 0}
  .article{padding:1.4rem 1.1rem 1.6rem}
  .article p{font-size:1.05rem}
  .foot{margin:2rem 1rem 0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .dimline{stroke-dashoffset:0}
}

/* production additions */
.units{display:flex;align-items:center;gap:.5rem;margin:0 0 .5rem;font:700 .8rem/1 var(--kit-text);text-transform:uppercase;letter-spacing:.06em}
select{font:600 .9rem/1 var(--kit-mono);padding:.35rem .4rem;background:var(--kit-surface);color:var(--kit-ink);border:var(--dir-border-width) solid var(--kit-muted);border-radius:2px}
.op span{font-weight:600}
input[aria-invalid="true"]{border:2px solid var(--kit-signal);background:#FBEDE9}
.fit-error{margin:.2rem 0 .6rem;padding:.45rem .6rem;background:var(--kit-surface);border-left:4px solid var(--kit-signal);font-size:.85rem;font-weight:600;color:var(--kit-signal)}
.results li.err{display:block;border-left-color:var(--kit-signal);font-weight:600}
.results li.skip-op{opacity:.85}
.utility-wrap{margin:1.6rem 0}
.utility-wrap .tag{position:relative;left:auto;top:auto;right:auto;width:auto;max-width:none}
.utility-wrap .tag p{font-size:.72rem;max-width:none;margin:0 0 .6rem;line-height:1.4}
.utility-wrap .tag .fit-error{font-size:.85rem}
.is-home .tag{z-index:3}

.prose h3{font:700 1.2rem/1.3 var(--kit-text);color:var(--kit-ink);margin:1.6rem 0 .5rem}
.prose ul,.prose ol{font-size:1.05rem;line-height:1.65;margin:0 0 1.2rem;padding-left:1.4rem;max-width:66ch}
.prose li{margin:.25rem 0}
.prose code{font-family:var(--kit-mono);font-size:.9em}
.checklist .ck-h,.note .note-h{margin:0 0 .4rem;font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.article .checklist p{font-size:1rem}
.checklist a{color:var(--kit-ink)}
.checklist ol,.checklist ul{margin:0;padding-left:1.3rem;font-size:1rem}
.note{border:var(--dir-border-width) solid var(--kit-signal);border-left-width:5px;border-radius:var(--dir-radius);padding:.9rem 1.2rem;margin:1.6rem 0;background:#FBF6EE}
.note .note-h{color:var(--kit-signal)}
.article .note p{font-size:1rem;margin:0 0 .5rem}
.table-wrap{overflow-x:auto;margin:1.4rem 0;border:var(--dir-border-width) solid rgba(87,73,58,.4);border-radius:var(--dir-radius)}
table{border-collapse:collapse;width:100%;font-size:.95rem;line-height:1.45;background:repeating-linear-gradient(transparent 0 2.4rem,transparent 2.4rem)}
th,td{text-align:left;vertical-align:top;padding:.55rem .7rem;border-bottom:1px solid rgba(30,85,118,.18)}
thead th{font:600 .72rem/1.2 var(--kit-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--kit-primary);border-bottom:2px solid var(--kit-signal);background:#F1EADC}
tbody th{font-weight:700}
.sources-h,.related h2{font:800 1.4rem/1 var(--kit-display);text-transform:uppercase;color:var(--kit-primary);margin:2.2rem 0 .3rem}
.related{border-top:var(--dir-rule);margin-top:2rem}
.related ul{list-style:none;padding:0;margin:.6rem 0 0;display:grid;gap:.4rem}
.related li a{font-weight:600}
.related li::before{content:"\25B8\00a0";color:var(--kit-accent)}
.crumbs a{color:var(--kit-primary)}
.guide-wrap.single{grid-template-columns:minmax(0,44rem)}
.margin .side strong{display:block;margin-bottom:.3rem}
.how{margin:3rem 2rem 0;border-top:3px solid var(--kit-primary);padding-top:.8rem}
.how h2{font:800 2rem/1 var(--kit-display);text-transform:uppercase;color:var(--kit-primary);margin:0 0 1rem}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.how-grid p{margin:0;line-height:1.65;max-width:60ch}
.foot-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.4rem;margin-bottom:1.4rem}
.foot-col h2{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--kit-primary);margin:0 0 .5rem}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li{margin:.3rem 0;line-height:1.3}
.foot-col a{color:var(--kit-ink);font-size:.88rem}
.contact-form{display:grid;gap:1rem;max-width:34rem;margin:1.2rem 0}
.field{display:grid;gap:.3rem}
.field label{font-weight:700}
.field input,textarea{font:400 1rem/1.4 var(--kit-text);width:100%;padding:.6rem .7rem;background:#FFFDF8;color:var(--kit-ink);border:var(--dir-border-width) solid var(--kit-muted);border-radius:2px}
.contact-form .stamp-btn{justify-self:start}
.small-print{font-size:.9rem!important;color:var(--kit-muted)}
.link-list{columns:2;column-gap:2rem;padding-left:1.2rem}
.link-list li{margin:.3rem 0;break-inside:avoid}
@media (max-width:1279px){
  .how-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:repeat(2,1fr)}
  .margin [data-foundry-ad="sidebar"]{display:none}
}
@media (max-width:600px){
  .how{margin:2rem 1rem 0}
  .foot-grid{grid-template-columns:1fr}
  .link-list{columns:1}
  .utility-wrap{margin:1.2rem -.4rem}
  .prose ul,.prose ol{font-size:1rem}
}
.home > .fy-ad,body > .fy-ad{margin:2rem 2rem 0}
