/* DraperyDesk — cream, sage, wheat, soft ink. Fabric and light. Not a grey dashboard. */
:root{
  --paper:#f3ebe0;
  --paper-2:#e8dfd0;
  --paper-3:#ddd2c2;
  --ink:#2c2824;
  --ink-2:#5a524b;
  --ink-3:#7a7268;
  --sage:#6f8a6a;
  --sage-2:#4f6a4c;
  --wheat:#c4a574;
  --wheat-hi:#d4ba9e;
  --line:rgba(44,40,36,.14);
  --danger:#b54a3c;
  --ok:#4a6b4e;
  --display:'Iowan Old Style',Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.5}
a{color:var(--sage-2)}
a:hover{color:var(--ink)}
.skip{position:absolute;left:-9999px}
.top{
  display:flex;align-items:center;gap:18px;
  padding:10px 22px;border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  position:sticky;top:0;z-index:10;
}
.brand{font-family:var(--display);font-style:italic;font-size:1.35rem;color:var(--wheat);text-decoration:none}
.brand small{display:block;font-style:normal;font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-3)}
.nav a{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;margin-right:14px;
}
.nav a.on,.nav a:hover{color:var(--sage-2)}
.who{margin-left:auto;font-size:13px;color:var(--ink-3)}
main{width:min(1120px,calc(100% - 36px));margin:0 auto;padding:28px 0 80px}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.02em;margin:0 0 8px}
h1{font-size:clamp(1.8rem,4vw,2.6rem)}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--sage);margin:0 0 10px}
.hair{border:0;border-top:1px solid var(--line);margin:22px 0}
label{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:12px 0 4px}
input,select,textarea{
  width:100%;max-width:28rem;padding:9px 10px;border:1px solid var(--line);
  background:#fffaf3;color:var(--ink);font:inherit;border-radius:4px;
}
textarea{min-height:90px}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px 16px;max-width:52rem}
button,.btn{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  background:var(--sage);color:#f7f3ea;border:0;padding:10px 14px;border-radius:4px;cursor:pointer;
  text-decoration:none;display:inline-block;
}
button.ghost,.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);padding:8px 6px;border-bottom:1px solid var(--line)}
td{padding:10px 6px;border-bottom:1px solid var(--line);vertical-align:top}
.pill{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--sage-2)}
.measure{color:#6a5a38}
.install{color:var(--sage-2)}
.muted{color:var(--ink-3)}
.sample{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--wheat)}
.foot{
  width:min(1120px,calc(100% - 36px));margin:0 auto;padding:24px 0 40px;
  border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;
  font-size:12px;color:var(--ink-3);
}
.foot img{width:22px;height:22px}
.gate{max-width:22rem;margin:12vh auto;padding:0 20px}
@media print{
  .top,.foot,button,.btn,.nav,.who{display:none !important}
  main{width:auto;padding:0}
  body{background:#fff}
}
@media(max-width:700px){
  .top{flex-wrap:wrap}
  .nav{width:100%}
}