#spec{
 --char:#30373E; --char-l:#3C444C; --cream:#F4F1EA; --cream-d:#EAE6DC; --paper:#FFFFFF;
 --cop:#AF6029; --cop-d:#8E4C1F; --cop-soft:#F5E7DA;
 --warm:#A49E8F;
 --bg:var(--cream); --surf:var(--paper); --surf2:var(--cream-d);
 --ink:#20242A; --ink2:#4A5057; --mut:#7C8189; --line:#DED9CE; --line2:#C9C3B5;
 --sh:0 1px 2px rgba(32,36,42,.05),0 6px 20px rgba(32,36,42,.07);
 --serif:"Libre Caslon Display","Libre Caslon Text",Georgia,serif;
 --sans:"Work Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
 --mono:"IBM Plex Mono",ui-monospace,monospace;
}
#spec *{box-sizing:border-box}
#spec{margin:0;background:var(--bg);color:var(--ink);font:300 15.5px/1.62 var(--sans);-webkit-font-smoothing:antialiased}
#spec h1,#spec h2,#spec h3{font-family:var(--serif);font-weight:400;margin:0;text-wrap:balance;letter-spacing:-.004em}
#spec .mono{font-family:var(--mono)}
#spec .wrap{max-width:1180px;margin:0 auto;padding:0 26px}
#spec button{font:inherit;cursor:pointer}
#spec :focus-visible{outline:2px solid var(--cop);outline-offset:2px}
/* hero */
#spec .hero{background:var(--char);color:var(--cream);padding:30px 0 0;border-bottom:3px solid var(--cop)}
#spec .eyebrow{font:500 10.5px/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--cop);margin-bottom:18px}
#spec .hero h1{font-size:clamp(27px,3.4vw,40px);line-height:1.06;color:#fff;max-width:20ch}
#spec .hero h1 em{font-family:"Libre Caslon Text",Georgia,serif;font-style:italic;color:var(--warm)}
#spec .hero .sub{margin:12px 0 0;max-width:62ch;color:var(--warm);font-size:15px}
#spec .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:22px;border-top:1px solid rgba(244,241,234,.16)}
#spec .step{padding:13px 26px 16px 0;margin-right:26px}
#spec .step b{display:block;font:500 10.5px var(--mono);letter-spacing:.18em;color:var(--cop);margin-bottom:7px}
#spec .step span{color:var(--cream);font-size:13.5px;font-weight:300;line-height:1.45}
/* sticky spec bar */
#spec .bar{position:-webkit-sticky;position:sticky;top:0;z-index:40;background:var(--surf);border-bottom:1px solid var(--line);box-shadow:var(--sh)}
#spec .barin{display:flex;gap:16px;align-items:center;padding:11px 0;flex-wrap:wrap}
#spec .slot{display:flex;align-items:center;gap:10px;min-width:0;background:none;border:0;padding:6px 8px;
 text-align:left;cursor:pointer;font:inherit;color:inherit}
#spec .slot:hover{background:var(--cop-soft)}
#spec .slot .lbl b .chg{opacity:0;font-weight:400;letter-spacing:0;text-transform:none;color:var(--cop);margin-left:6px}
#spec .slot:hover .lbl b .chg{opacity:1}
#spec .slot .thumb{width:34px;height:46px;border:1px solid var(--line2);background:var(--surf2);flex:none;overflow:hidden}
#spec .slot .thumb img{width:100%;height:100%;object-fit:cover;display:block}
#spec .slot .chipbox{width:34px;height:46px;border:1px solid var(--line2);flex:none;background:var(--surf2)}
#spec .slot .lbl{min-width:0}
#spec .slot .lbl b{display:block;font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
#spec .slot .lbl span{display:block;font-size:13.5px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px}
#spec .slot .lbl span.none{color:var(--mut);font-weight:300;font-style:italic}
#spec .barin .go{margin-left:auto;display:flex;gap:8px}
#spec .btn{background:var(--cop);color:#fff;border:1px solid var(--cop);padding:9px 17px;font-size:13.5px;font-weight:500}
#spec .btn:hover{background:var(--cop-d);border-color:var(--cop-d)}
#spec .btn.ghost{background:transparent;color:var(--ink);border-color:var(--line2)}
#spec .btn.ghost:hover{border-color:var(--cop);color:var(--cop);background:transparent}
#spec .btn[disabled]{opacity:.4;pointer-events:none}
/* sections */
#spec section{padding:56px 0;border-bottom:1px solid var(--line);scroll-margin-top:92px}
#spec .hd{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:8px}
#spec .hd h2{font-size:29px}
#spec .hd .n{font:400 11.5px var(--mono);color:var(--mut);letter-spacing:.08em;text-transform:uppercase}
#spec .lede{color:var(--ink2);max-width:66ch;margin:0 0 26px;font-size:15px}
/* doors */
#spec .doors{display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:11px}
#spec .door{display:block;padding:0;border:1px solid var(--line);background:var(--paper);text-align:left;box-shadow:var(--sh)}
#spec .door.hide{display:none}
#spec .door .ph{display:block;aspect-ratio:65/100;overflow:hidden;background:#fff}
#spec .door .ph img{width:100%;height:100%;object-fit:cover;display:block}
#spec .door .cap{display:block;padding:8px 9px 10px}
#spec .door .dn{display:block;font:500 13px var(--mono);letter-spacing:.02em;color:var(--ink)}
#spec .door .al{display:block;font-size:11px;color:var(--ink2);margin-top:1px;line-height:1.25}
#spec .door[aria-pressed=true]{border-color:var(--cop);box-shadow:0 0 0 2px var(--cop)}
/* stain matrix */
#spec .scroll{overflow-x:auto;border:1px solid var(--line);background:var(--surf);box-shadow:var(--sh)}
#spec table{border-collapse:collapse;width:100%}
#spec th,#spec td{padding:5px;border-bottom:1px solid var(--line);font-size:13.5px;font-weight:300;text-align:left}
#spec thead th{background:var(--char);color:#fff;font:500 10.5px var(--sans);letter-spacing:.05em;
 text-transform:uppercase;text-align:center;border-bottom:0;padding:11px 5px}
#spec tbody th{font-weight:500;min-width:99px;position:sticky;left:0;background:var(--surf);font-family:var(--sans)}
#spec td{padding:5px;text-align:center}
#spec tbody tr:last-child td,#spec tbody tr:last-child th{border-bottom:0}
#spec .sw{display:block;width:100%;padding:0;border:1px solid var(--line2);background:var(--surf);overflow:hidden;min-width:104px}
#spec .sw img{width:100%;height:66px;object-fit:cover;display:block}
#spec .sw .sn{display:block;font-size:11px;font-weight:400;padding:6px 2px;color:var(--ink)}
#spec .sw:hover{border-color:var(--cop)}
#spec .sw[aria-pressed=true]{border-color:var(--cop);box-shadow:0 0 0 2px var(--cop)}
#spec .sw.ask{border-style:dashed;background:var(--surf2)}
#spec .askin{display:flex;flex-direction:column;justify-content:center;height:92px;font-size:11.5px;color:var(--ink2);padding:4px}
#spec .askin em{font-style:normal;font-size:10px;color:var(--mut);margin-top:4px}
/* paint */
#spec .paints{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
#spec .paint{display:flex;flex-direction:column;gap:2px;text-align:left;background:var(--surf);
 border:1px solid var(--line);padding:13px 15px;box-shadow:var(--sh)}
#spec .paint .pn{font-size:14.5px;font-weight:400;color:var(--ink)}
#spec .paint .pc{font:400 11.5px var(--mono);color:var(--mut);letter-spacing:.03em}
#spec .paint:hover{border-color:var(--cop)}
#spec .paint[aria-pressed=true]{border-color:var(--cop);box-shadow:0 0 0 2px var(--cop)}
#spec .sublabel{font:500 10.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mut);margin:26px 0 12px}
#spec .sublabel:first-of-type{margin-top:0}

/* paint chips */
#spec .anyshade{background:var(--char);color:var(--cream);padding:34px 36px;margin:0 0 34px;border-left:4px solid var(--cop)}
#spec .anyshade h3{font-family:var(--serif);font-size:29px;color:#fff;margin:0 0 12px;font-weight:400}
#spec .anyshade p{margin:0;max-width:66ch;color:var(--cream);font-size:15px;font-weight:300}
#spec .anyshade p + p{margin-top:12px;color:var(--warm)}
#spec .anyshade .brands{margin-top:20px;padding-top:18px;border-top:1px solid rgba(244,241,234,.18);
 font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cop)}
#spec .chips{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
#spec .chips.coty3{grid-template-columns:repeat(3,1fr);max-width:760px}
@media(max-width:1300px){
 /* keep the full matrix legible AND on-screen on a 1024-1300px laptop,
    rather than making it a sideways scroller */
 #spec tbody th{min-width:96px;font-size:12.5px}
 #spec .sw{min-width:82px}
 #spec .sw img{height:58px}
 #spec .sw .sn{font-size:10.5px;padding:5px 2px}
 #spec .askin{height:82px;font-size:10.5px}
 #spec th,#spec td{padding:4px}
}
@media(max-width:1000px){#spec .chips{grid-template-columns:repeat(2,1fr)}#spec .chips.coty3{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){#spec .chips.coty3{grid-template-columns:1fr}}
#spec .chip{display:block;padding:0;border:1px solid var(--line);background:var(--surf);text-align:left;box-shadow:var(--sh)}
#spec .chip .swatch{display:flex;align-items:flex-end;justify-content:flex-end;height:104px;padding:8px 10px}
#spec .chip .hx{font:400 10px var(--mono);letter-spacing:.04em;opacity:0;transition:opacity .15s}
#spec .chip:hover .hx{opacity:.85}
#spec .chip .meta{display:block;padding:11px 12px 13px}
#spec .chip .brand{display:block;font:500 9.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cop);margin-bottom:3px}
#spec .chip .cn{display:block;font-size:14px;font-weight:400;color:var(--ink);line-height:1.25}
#spec .chip .cc{display:block;font:400 11.5px var(--mono);color:var(--mut);margin-top:2px}
#spec .chip .lrv{display:block;font:400 10.5px var(--mono);color:var(--mut);margin-top:3px}
#spec .chip .flag{display:inline-block;margin-top:7px;font:500 9.5px var(--mono);letter-spacing:.08em;
 text-transform:uppercase;background:var(--cop-soft);color:var(--cop-d);padding:3px 7px}
#spec .chip:hover{border-color:var(--cop)}
#spec .chip[aria-pressed=true]{border-color:var(--cop);box-shadow:0 0 0 2px var(--cop)}
#spec .chip.coty .swatch{height:140px}
#spec .brandhd{display:flex;align-items:baseline;gap:12px;margin:38px 0 14px;padding-bottom:9px;border-bottom:1px solid var(--line)}
#spec .brandhd h3{font-family:var(--serif);font-size:21px;font-weight:400;margin:0}
#spec .brandhd span{font:400 11px var(--mono);color:var(--mut);letter-spacing:.06em;text-transform:uppercase}
/* spec block */
#spec .specwrap{display:grid;grid-template-columns:1.15fr 1fr;gap:26px;align-items:start}
#spec .spec{background:var(--char);color:var(--cream);padding:24px 26px;font-family:var(--mono);font-size:13px;line-height:1.75}
#spec .spec .k{color:var(--warm)}
#spec .spec .v{color:#fff}
#spec .spec .cop{color:var(--cop)}
#spec .note{background:var(--surf);border:1px solid var(--line);border-left:3px solid var(--cop);padding:16px 18px;font-size:14px}
#spec .note b{color:var(--cop);font-weight:500}
#spec .rowdemo{overflow-x:auto;border:1px solid var(--line);background:var(--surf);margin-top:18px}
#spec .rowdemo table{font-size:12.5px}
#spec .rowdemo th{background:var(--surf2);color:var(--ink);font:500 10.5px var(--sans);letter-spacing:.06em;
 text-transform:uppercase;text-align:left;padding:9px 12px;border-bottom:1px solid var(--line)}
#spec .rowdemo td{text-align:left;padding:9px 12px;font-weight:300}
#spec .rowdemo .mono{font-size:12px}

/* ---- schedule builder ---- */
#spec .build{background:var(--surf);border:1px solid var(--line);box-shadow:var(--sh);padding:22px 24px;margin-bottom:24px}
#spec .proj{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px;
 padding-bottom:20px;border-bottom:1px solid var(--line)}
#spec .fld{display:flex;flex-direction:column;gap:5px}
#spec .fld label{font:500 10px var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--mut)}
#spec .fld input,#spec .fld select{font:400 14px var(--sans);padding:9px 11px;border:1px solid var(--line2);
 background:var(--bg);color:var(--ink);border-radius:0;width:100%}
#spec .addrow{display:grid;grid-template-columns:1.4fr 1fr auto;gap:14px;align-items:end}
#spec .picked{display:flex;gap:14px;align-items:center;padding:12px 0 0;font-size:13px;color:var(--ink2);flex-wrap:wrap}
#spec .picked .pill2{display:inline-flex;align-items:center;gap:7px;background:var(--surf2);
 border:1px solid var(--line);padding:5px 10px;font:400 12.5px var(--mono)}
#spec .picked .pill2 i{width:16px;height:16px;display:block;border:1px solid var(--line2);font-style:normal;flex:none}
#spec .picked .warn{color:var(--cop);font-weight:500}
#spec .sched{width:100%;border-collapse:collapse;margin-top:20px}
#spec .sched th{background:var(--char);color:#fff;font:500 10.5px var(--sans);letter-spacing:.08em;
 text-transform:uppercase;padding:10px 12px;text-align:left;border:0}
#spec .sched td{padding:11px 12px;border-bottom:1px solid var(--line);font-size:13.5px;font-weight:300;vertical-align:top}
#spec .sched .tg{font:500 13px var(--mono);color:var(--cop)}
#spec .sched .dz{font:400 13px var(--mono)}
#spec .sched tr:last-child td{border-bottom:0}
#spec .sched .rm{background:none;border:1px solid var(--line2);color:var(--mut);width:26px;height:26px;
 line-height:1;font-size:15px;padding:0}
#spec .sched .rm:hover{border-color:var(--cop);color:var(--cop)}
#spec .room-line{display:flex;align-items:baseline;gap:8px;min-width:0}
#spec .room-value{min-width:0;overflow-wrap:anywhere}
#spec .edit-room{flex:none;min-width:44px;min-height:32px;padding:3px 6px;border:0;background:none;color:var(--cop-d);
 font:600 10.5px var(--sans);text-decoration:underline;text-underline-offset:2px}
#spec .edit-room:hover{color:var(--ink)}
#spec .edit-room:focus-visible{outline:2px solid var(--cop);outline-offset:2px}
#spec .acts{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
#spec .acts .btn{min-height:44px}
#spec .export-help{margin:9px 0 0;color:var(--ink2);font-size:12.5px;line-height:1.5}
#spec .empty{padding:34px 0;text-align:center;color:var(--mut);font-size:14px;font-style:italic}
/* ---- print document ---- */
#printdoc{display:none}
@media print{
 /* PDF paper stays light while the screen keeps its selected theme. */
 #printdoc{-webkit-print-color-adjust:exact;print-color-adjust:exact}
 #printdoc{display:block!important}
 @page{size:letter;margin:14mm}
 #printdoc{font:11pt/1.45 var(--sans);color:#000}
 .pdhead{border-bottom:2.5pt solid #30373E;padding-bottom:9pt;margin-bottom:14pt}
 .pdhead .wm{font-family:var(--serif);font-size:19pt;letter-spacing:.01em}
 .pdhead .wm em{font-style:normal;color:#AF6029}
 .pdhead .sub{font:500 7.5pt var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#AF6029;margin-top:3pt}
 .pdmeta{display:flex;gap:26pt;flex-wrap:wrap;margin:10pt 0 16pt;font-size:9.5pt}
 .pdmeta b{font:500 7pt var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#666;display:block}
 table.pd{width:calc(100% - 4pt);border-collapse:collapse;font-size:10pt;table-layout:fixed}
 table.pd th{background:#30373E;color:#fff;text-align:left;padding:6pt 8pt;font-size:7.5pt;
  letter-spacing:.1em;text-transform:uppercase;font-weight:600}
 table.pd td{padding:7pt 8pt;border-bottom:.5pt solid #ccc;vertical-align:top}
 table.pd .tg{font-family:var(--mono);font-weight:600;color:#AF6029}
 table.pd .dz{font-family:var(--mono)}
 .pdblock{width:calc(100% - 4pt);margin-top:16pt;border:.75pt solid #30373E;padding:10pt 12pt;font-size:9pt;page-break-inside:avoid}
 .pdblock b{font:500 7pt var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#AF6029;display:block;margin-bottom:4pt}
 .pdnote{margin-top:10pt;font-size:8pt;color:#555;line-height:1.4}
 .board{page-break-before:always;padding-top:4pt}
 .board h2{font-family:var(--serif);font-size:16pt;margin:0 0 3pt;font-weight:400}
 .board .bsub{font-size:9pt;color:#555;margin-bottom:12pt}
 #printdoc{max-width:100%}
}
@media(max-width:820px){#spec .proj{grid-template-columns:1fr}#spec .addrow{grid-template-columns:1fr}}

#spec .again{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--cop-soft);
 border:1px solid var(--cop);padding:14px 18px;margin-top:18px}
#spec .again p{margin:0;font-size:14px;color:var(--ink);flex:1;min-width:200px}
#spec .again p b{font-weight:500}
/* ---- guidance: stepper, FAB, ghost row ---- */
#spec .stepper{display:flex;gap:0;margin:0 0 22px;flex-wrap:wrap}
#spec .stp{display:flex;align-items:center;gap:9px;padding:11px 18px 11px 14px;background:var(--surf);
 border:1px solid var(--line);border-right:0;flex:1;min-width:190px}
#spec .stp:last-child{border-right:1px solid var(--line)}
#spec .stp .num{width:23px;height:23px;flex:none;border:1px solid var(--line2);color:var(--mut);
 display:flex;align-items:center;justify-content:center;font:500 11px var(--mono)}
#spec .stp .txt{font-size:13.5px;color:var(--ink2);line-height:1.3}
#spec .stp .txt b{display:block;font-weight:500;color:var(--ink);font-size:13.5px}
#spec .stp.done{background:var(--cop-soft);border-color:var(--cop)}
#spec .stp.done .num{background:var(--cop);border-color:var(--cop);color:#fff}
#spec .stp.done .txt b{color:var(--cop-d)}
#spec .stp.now{border-color:var(--cop);box-shadow:inset 0 0 0 1px var(--cop)}
#spec .fab{position:fixed;right:20px;bottom:20px;z-index:70;display:none;align-items:center;gap:10px;
 background:var(--cop);color:#fff;border:0;padding:14px 20px;font:500 14px var(--sans);
 box-shadow:0 4px 18px rgba(32,36,42,.28);cursor:pointer}
#spec .fab.show{display:flex}
#spec .fab:hover{background:var(--cop-d)}
#spec .fab .cnt{background:rgba(255,255,255,.22);padding:2px 9px;font:500 12px var(--mono)}
@media print{}
#spec .exrow{opacity:.5}
#spec .exrow td{font-style:italic}
#spec .ghostlbl{display:inline-block;font:500 9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;
 background:var(--surf2);color:var(--mut);padding:3px 8px;margin-bottom:9px}
/* contact */
#spec .contact{background:var(--char);color:var(--cream);padding:52px 0}
#spec .contact h2{color:#fff;font-size:31px}
#spec .contact .lede{color:var(--warm);max-width:58ch}
#spec .cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px;margin-top:30px;
 border-top:1px solid rgba(244,241,234,.16);padding-top:26px}
#spec .cgrid b{display:block;font:500 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cop);margin-bottom:7px}
#spec .cgrid a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28)}
#spec .cgrid a:hover{border-color:var(--cop)}
#spec .cgrid span{color:var(--cream)}
#spec footer.wrap{padding-top:30px;padding-bottom:46px}
#spec footer{color:var(--mut);font-size:12.5px;max-width:76ch}
#spec .toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--char);
 color:#fff;padding:12px 22px;font:500 13px var(--mono);z-index:80;border-bottom:2px solid var(--cop);
 transition:transform .22s ease}
#spec .toast.on{transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion:reduce){#spec *{transition:none!important}}
@media(max-width:860px){#spec .specwrap{grid-template-columns:1fr}#spec .steps{grid-template-columns:1fr}
 #spec .step{padding:14px 0;margin:0;border-bottom:1px solid rgba(244,241,234,.12)}}
@media print{}

/* ---- V1.5: no white bar above a card ----
   .chip and .door are <button>s. A grid row stretches every card to the tallest
   one, and a button vertically CENTERS its contents when it is taller than they
   are - so a card without a "recently specified" badge (or without a door alias)
   got the slack split evenly, half of it as a white bar ABOVE the color.
   Laying the button out as a column and letting the lower block absorb the slack
   keeps the color flush to the top edge and pushes all spare height below. */
#spec .chip{display:flex;flex-direction:column;align-items:stretch}
#spec .chip .swatch{flex:0 0 auto}
#spec .chip .meta{flex:1 1 auto}
#spec .door{display:flex;flex-direction:column;align-items:stretch}
#spec .door .ph{flex:0 0 auto}
#spec .door .cap{flex:1 1 auto}

/* ---- V1.6: the hero and the bar were reading as one 533px block ----
   In dark mode the hero (rgb 48,55,62) and the bar (rgb 37,42,48) sat 11 points
   apart, so the eye parsed a header stacked on a header. Light mode never had the
   problem because the bar is white. Lift the hero away from the bar in dark, and
   give the bar a real edge so it always reads as a control strip, not as chrome. */
#spec .bar{box-shadow:0 1px 0 var(--line2),0 6px 18px rgba(0,0,0,.10)}

/* ---- V1.6 item 3: Door - Finish - Room, all three in the bar ---- */
#spec .roomslot{display:flex;flex-direction:column;gap:3px;flex:1 1 190px;min-width:120px;max-width:280px;padding:2px 0}
#spec .roomslot label{font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
#spec .roomslot input{font:400 13.5px var(--sans);padding:6px 9px;border:1px solid var(--line2);
 background:var(--bg);color:var(--ink);border-radius:0;width:100%}
#spec .roomslot input::placeholder{color:var(--mut);font-style:italic}
#spec .roomslot.ready input{border-color:var(--cop)}

/* ---- V1.6 item A: bottom-right is where every browser extension parks ---- */
#spec .fab{left:20px;right:auto}

/* ---- V1.6 item 9: how we like to receive a job ---- */
#spec .howto{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;margin-top:26px;
 border-top:1px solid rgba(244,241,234,.16)}
#spec .howto .h{padding:16px 24px 18px 0;margin-right:24px}
#spec .howto .h b{display:block;font:500 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;
 color:var(--cop);margin-bottom:6px}
#spec .howto .h span{color:var(--cream);font-size:13.5px;font-weight:300;line-height:1.5}
#spec .waitlist{margin-top:24px;padding-top:22px;border-top:1px solid rgba(244,241,234,.16)}
#spec .waitlist h3{font-family:var(--serif);font-size:20px;font-weight:400;color:#fff;margin:0 0 8px}
#spec .waitlist p{margin:0 0 14px;color:var(--warm);font-size:14.5px;max-width:60ch;font-weight:300}
#spec .waitlist a.btn{display:inline-block;background:var(--cop);color:#fff;border:1px solid var(--cop);
 padding:11px 20px;font:500 13.5px var(--sans);text-decoration:none}
#spec .waitlist a.btn:hover{background:var(--cop-d);border-color:var(--cop-d)}

/* ==================== phone: species switcher + phone layout ==================== */
#spec .swmob{display:none}
#spec .spsel{display:flex;gap:8px;overflow-x:auto;padding:0 0 12px;margin:0 0 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#spec .spsel::-webkit-scrollbar{display:none}
#spec .sppill{flex:none;background:var(--surf);border:1px solid var(--line2);padding:9px 15px;
 font:500 12.5px var(--sans);color:var(--ink2);white-space:nowrap}
#spec .sppill[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--bg);font-weight:600}
#spec .swgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#spec .spnote{margin:16px 0 0;font-size:13px;color:var(--ink2);border-left:2px solid var(--cop);padding-left:12px}

@media(max-width:1000px){
 /* The wide matrix needs ~1194px. Below that the wood becomes an explicit
    switch - but ONLY when scripts are running, because the switch is built by
    JS. With scripts off (iOS QuickLook previews block them) the real table is
    still here and simply stacks itself, species by species, in pure CSS. */
 #spec #stains .scroll{overflow:visible;border:0;background:none;box-shadow:none}
 #spec #stains table{display:block;width:auto}
 #spec #stains thead{display:none}
 #spec #stains tbody{display:block}
 #spec #stains tbody tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;margin-bottom:26px;border:0}
 #spec #stains tbody th{grid-column:1/-1;position:static;background:none;border:0;padding:0;
  min-width:0;text-align:left;font:500 16px var(--sans);color:var(--ink)}
 #spec #stains tbody td{display:block;padding:0;border:0;text-align:left}
 #spec #stains tbody .sw{min-width:0;width:100%}
 #spec #stains tbody .sw img{height:118px}
 #spec #stains tbody .askin{height:146px}
 html.jsok #spec #stains .scroll{display:none}
 html.jsok #spec .swmob{display:block}
 #spec .spsel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;overflow:visible;padding:0}
 #spec .sppill{text-align:center;padding:10px 8px}
 #spec .swgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
 #spec .swgrid .sw{min-width:0;width:100%}
 #spec .swgrid .sw img{height:118px}
 #spec .swgrid .askin{height:146px}
}
@media(max-width:700px){
 #spec .wrap{padding:0 16px}
 #spec section{padding:38px 0}
 #spec .hd h2{font-size:25px}
 #spec .lede{font-size:14.5px;margin-bottom:20px}
 /* hero */
 #spec .hero{padding:34px 0 0}
 #spec .hero .sub{font-size:15px;margin-top:14px}
 #spec .steps{margin-top:24px}
 #spec .step{padding:12px 0}
 #spec .step span{font-size:13.5px}
 /* sticky bar: one row that never wraps */
 #spec .bar .barin{flex-wrap:nowrap;gap:8px;padding:8px 16px}
 #spec .slot{flex:1 1 0;min-width:0;padding:2px;gap:8px}
 #spec #slotDoor{flex:0 0 auto}
 #spec #slotFin{flex:1 1 0;min-width:0}
 #spec .slot .thumb,#spec .slot .chipbox{width:26px;height:34px}
 #spec .slot .lbl{flex:1 1 auto;min-width:0}
 #spec .slot .lbl b{font-size:9px;letter-spacing:.1em}
 #spec .slot .lbl b .chg{display:none}
 #spec .slot .lbl span{font-size:12px;max-width:none}
 #spec .barin .go{margin-left:0;flex:none;gap:6px}
 #spec .barin .go #clear{display:none}
 /* The bar stays one slim row until there is something to name. Only when a door
    AND a finish are picked does it grow a second row for Room + Add - otherwise
    the Add button forces a wrap and costs 46px on every screen for nothing. */
 #spec .bar .barin{flex-wrap:wrap;row-gap:8px}
 #spec .barin .go #barAdd{display:none}
 #spec .roomslot{flex:1 1 100%;max-width:none;order:3;display:none}
 html.pickready #spec .roomslot{flex:1 1 62%;order:3;display:flex}
 html.pickready #spec .barin .go{order:4;flex:0 0 auto}
 html.pickready #spec .barin .go #barAdd{display:inline-block}
 html.pickready #spec .barin .go #copy,html.pickready #spec .barin .go .tgl{display:none}
 #spec .roomslot label{display:none}
 #spec .barin .go .btn{padding:9px 12px;font-size:12.5px}
 /* doors: three across */
 #spec .doors{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 #spec .door .cap{padding:6px 6px 8px}
 #spec .door .dn{font-size:11.5px}
 #spec .door .al{font-size:9.5px;line-height:1.2}
 /* stain grid tightens further on a phone */
 #spec .spsel{grid-template-columns:repeat(2,minmax(0,1fr))}
 #spec .swgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #spec .swgrid .sw img{height:106px}
 #spec .swgrid .sw .sn{font-size:12px;padding:7px 3px}
 #spec .swgrid .askin{height:132px}
 /* paint */
 #spec .anyshade{padding:24px 20px;margin-bottom:26px}
 #spec .anyshade h3{font-size:22px}
 #spec .anyshade p{font-size:14.5px}
 #spec .chips{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 #spec .chips.coty3{grid-template-columns:1fr;max-width:none}
 #spec .chip .swatch{height:74px}
 #spec .chip.coty .swatch{height:100px}
 #spec .chip .hx{opacity:.8}
 #spec .chip .meta{padding:9px 10px 11px}
 #spec .chip .cn{font-size:13px}
 #spec .brandhd{margin:28px 0 12px}
 #spec .brandhd h3{font-size:19px}
 #spec .sublabel{margin:20px 0 10px}
 /* spec block */
 #spec .spec{padding:18px;font-size:12px;line-height:1.7}
 #spec .note{padding:14px 15px;font-size:13.5px}
 /* stepper */
 #spec .stepper{margin-bottom:18px}
 #spec .stp{min-width:0;flex:1 1 0;padding:10px 8px;gap:7px;align-items:flex-start}
 #spec .stp .num{width:20px;height:20px;font-size:10px}
 #spec .stp .txt b{font-size:11.5px;line-height:1.25}
 #spec .stp .txt .sd{display:none}
 /* builder */
 #spec .build{padding:18px 16px}
 #spec .acts .btn{flex:1 1 auto;text-align:center}
 #spec .again{padding:13px 15px}
 #spec .again p{font-size:13.5px}
 /* schedule rows become cards */
 #spec .sched{margin-top:16px}
 #spec .sched thead{display:none}
 #spec .sched,#spec .sched tbody,#spec .sched tr,#spec .sched td{display:block;width:100%}
 #spec .sched tr{border:1px solid var(--line);margin-bottom:10px;padding:11px 42px 11px 13px;position:relative;background:var(--bg)}
 #spec .sched td{border:0;padding:2px 0;font-size:13.5px;text-align:left;display:flex;gap:9px;align-items:baseline}
 #spec .sched td:before{content:attr(data-l);flex:none;width:56px;
  font:500 9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
 #spec .sched td.act{position:absolute;top:9px;right:10px;width:auto;padding:0}
 #spec .sched td.act:before{content:none}
 #spec .sched td.room-cell{align-items:flex-start}
 #spec .sched td.room-cell:before{padding-top:8px}
 #spec .sched .room-line{flex:1 1 auto;align-items:center}
 #spec .sched .edit-room{min-height:44px}
 #spec .sched .tg{font-size:14px}
 #spec .sched tr:last-child td{border-bottom:0}
 /* the floating pill becomes a bottom action bar */
 #spec .fab{left:0;right:0;bottom:0;width:100%;justify-content:center;padding:15px 18px;
  padding-bottom:calc(15px + env(safe-area-inset-bottom));box-shadow:0 -3px 18px rgba(32,36,42,.22)}
 #spec footer.wrap{padding-bottom:112px}
 #spec section{scroll-margin-top:64px}
 #spec .toast{bottom:86px;font-size:12px;padding:11px 18px;transform:translateX(-50%) translateY(230px)}
 #spec .contact{padding:38px 0}
 #spec .contact h2{font-size:26px}
}
@media(max-height:540px) and (orientation:landscape){
 #spec .hero{padding:22px 0 0}
 #spec .hero h1{font-size:30px}
 #spec .hero .sub{font-size:14px;margin-top:10px}
 #spec .steps{margin-top:16px}
 #spec .step{padding:9px 0}
 #spec .bar .barin{flex-wrap:nowrap;gap:10px;padding:6px 20px}
 #spec .slot{padding:2px;gap:8px}
 #spec .slot .thumb,#spec .slot .chipbox{width:24px;height:32px}
 #spec .slot .lbl b{font-size:9px}
 #spec .slot .lbl span{font-size:12px;max-width:200px}
 #spec .barin .go .btn{padding:7px 12px;font-size:12.5px}
 #spec section{padding:30px 0;scroll-margin-top:56px}
}
@media print{}

/* fallback for viewers where position:sticky does not stick (an ancestor,
   not the document, is what scrolls) - detected at runtime, never guessed */
html.barfixed #spec .bar{position:fixed;top:0;left:0;right:0;z-index:60}
html.barfixed #spec{padding-top:58px}
@media(min-width:701px){html.barfixed #spec{padding-top:85px}}
/* the full matrix stays reachable on a phone for anyone who wants it */
#spec .matbtn{display:none;margin-top:16px;background:transparent;border:1px solid var(--line2);
 color:var(--ink2);padding:10px 15px;font:500 12.5px var(--sans);width:100%}
#spec .matbtn:hover{border-color:var(--cop);color:var(--cop)}
@media(max-width:1000px){
 html.jsok #spec .matbtn{display:block}
 html.jsok.showmatrix #spec #stains .scroll{display:block;margin-top:14px}
 html.jsok.showmatrix #spec .swgrid,html.jsok.showmatrix #spec .spsel,html.jsok.showmatrix #spec .spnote{display:none}
}
#spec .stamp{display:block;margin-top:14px;font:400 10.5px var(--mono);letter-spacing:.06em;color:var(--mut)}

/* ---- viewers that size the webview to the whole document ----
   In a file preview or an in-app browser the "viewport" can BE the document:
   window.innerHeight comes back as the full page height and an outer container
   does the scrolling. position:fixed and position:sticky are then useless -
   pinned chrome sits thousands of pixels away and never appears. Detected at
   runtime; when it happens the page stops floating anything and puts the same
   actions in the flow instead. */
#spec .inflow{display:none;margin-top:24px}
html.nofloat #spec .inflow{display:block}
html.nofloat #spec .bar{position:static;box-shadow:none}
html.nofloat #spec .fab{display:none!important}
html.nofloat #spec .toast{display:none!important}
html.nofloat #spec{padding-top:0}
html.nofloat #spec footer.wrap{padding-bottom:46px}
#spec .btn.wide{width:100%;padding:15px 18px;font-size:14.5px}
#spec .inflow .hint{margin:0 0 9px;font-size:13px;color:var(--ink2)}
/* light / dark switch, so a phone locked to one mode is not stuck with it */
#spec .tgl{padding:9px 12px;line-height:1;font-size:15px;min-width:40px;text-align:center}

/* ---- scripts off (iOS QuickLook file preview, some mail clients) ----
   Everything that is a picture or a word still works; everything interactive
   says so plainly instead of silently doing nothing. */
#spec .nojs{display:block;background:var(--cop-soft);border-left:4px solid var(--cop);
 padding:15px 18px;margin:0 0 8px;font-size:14px;color:var(--ink)}
#spec .nojs b{font-weight:600;color:var(--cop-d)}
html.jsok #spec .nojs{display:none}
html:not(.jsok) #spec .bar,html:not(.jsok) #spec .stepper,html:not(.jsok) #spec .build{display:none}
html:not(.jsok) #spec .inflow{display:block}
#spec a.btn{display:block;text-align:center;text-decoration:none}

/* Mobile header review: explicit selection and room rows; screen only. */
@media screen and (max-width:700px){
  #spec .bar .barin{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) 44px;
    gap:8px;
    align-items:center;
    padding:8px 16px;
  }
  #spec .bar #slotDoor{grid-column:1;grid-row:1}
  #spec .bar #slotFin{grid-column:2;grid-row:1}
  #spec .bar .slot{width:100%;min-width:0;min-height:44px;padding:4px 0;gap:8px}
  #spec .bar .slot .thumb,#spec .bar .slot .chipbox{width:24px;height:32px;overflow:hidden}
  #spec .bar .slot .lbl{min-width:0;flex:1}
  #spec .bar .slot .lbl b{font-size:9px;line-height:1.3;letter-spacing:.08em}
  #spec .bar .slot .lbl span{font-size:12px;line-height:1.4;max-width:none}
  #spec .bar .barin .go{grid-column:3;grid-row:1;margin:0;gap:0;justify-content:stretch}
  #spec .bar .barin .go #copy{display:none}
  #spec .bar .barin .go .btn{min-height:44px;padding:8px 12px;line-height:1.2}
  #spec .bar .barin .go .tgl{width:44px;padding:8px;font-size:17px}
  html.pickready #spec .bar .barin{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 64px}
  html.pickready #spec .bar #slotFin{grid-column:2 / 4}
  html.pickready #spec .bar .roomslot{
    grid-column:1 / 3;grid-row:2;order:initial;
    display:flex;min-width:0;max-width:none;padding:0;
  }
  html.pickready #spec .bar .roomslot input{
    min-width:0;height:44px;font-size:16px;line-height:1.25;padding:10px 12px;
  }
  html.pickready #spec .bar .barin .go{grid-column:3;grid-row:2;order:initial}
  html.pickready #spec .bar .barin .go #barAdd{width:100%;height:44px}
  #spec section{scroll-margin-top:69px}
  html.pickready #spec section{scroll-margin-top:121px}
  html.barfixed:not(.nofloat) #spec{padding-top:61px}
  html.barfixed.pickready:not(.nofloat) #spec{padding-top:113px}
}

/* Mobile schedule shortcut: compact neutral surface, copper count accent. */
@media screen and (max-width:700px){
  #spec .fab{
    left:50%;right:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px));
    width:max-content;max-width:calc(100% - 32px);min-height:44px;
    transform:translateX(-50%);gap:10px;padding:10px 16px;
    border:1px solid var(--line2);border-radius:10px;
    background:var(--surf);color:var(--ink);font-size:14px;line-height:1.2;
    box-shadow:0 3px 12px rgba(0,0,0,.18);
  }
  #spec .fab:hover{background:var(--surf2);border-color:var(--cop)}
  #spec .fab .cnt{
    min-width:24px;padding:2px 7px;border-radius:4px;
    background:var(--cop-soft);color:var(--cop);text-align:center;
  }
  #spec .toast{bottom:calc(68px + env(safe-area-inset-bottom,0px))}
}


#spec .sitebar{background:var(--char);color:#F4F1EA;font-size:13px}
#spec .sitebar .in{max-width:1240px;margin:0 auto;padding:10px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
#spec .sitebar a{color:#F4F1EA;text-decoration:none}
#spec .sitebar a:hover{text-decoration:underline}
#spec .sitebar .cta{background:var(--cop);padding:7px 14px;border-radius:6px;font-weight:600}
@media print{}
#spec #leadgate{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;background:rgba(20,22,25,.6);padding:16px}
#spec #leadgate.on{display:flex}
#spec #leadgate .box{background:var(--surf);color:var(--ink);max-width:440px;width:100%;border-radius:12px;padding:28px 26px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
#spec #leadgate h3{font-family:var(--serif);font-weight:400;font-size:24px;margin:0 0 6px}
#spec #leadgate p{margin:0 0 16px;color:var(--ink2);font-size:14px;line-height:1.55}
#spec #leadgate label{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin:12px 0 4px}
#spec #leadgate input{width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid var(--line2);border-radius:6px;font-size:15px;background:var(--surf);color:var(--ink)}
#spec #leadgate .row{display:flex;gap:10px;align-items:center;margin-top:18px;flex-wrap:wrap}
#spec #leadgate .skip{background:none;border:0;color:var(--mut);font-size:13px;text-decoration:underline;cursor:pointer;padding:0}
#spec #leadgate .err{color:#b3452c;font-size:13px;margin-top:10px;min-height:1em}
/* ---- site integration ---- */
#printdoc{--serif:"Libre Caslon Display","Libre Caslon Text",Georgia,serif;--sans:"Work Sans",ui-sans-serif,system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace}
#spec{background:var(--bg);color:var(--ink);font:300 15.5px/1.62 var(--sans);-webkit-font-smoothing:antialiased;color-scheme:light}
#spec .bar{top:var(--spec-nav,0px);z-index:40}
html.barfixed #spec .bar{top:var(--spec-nav,0px)}
html.barfixed #spec{padding-top:0!important}
#spec #theme{display:none!important}
#spec .stepstrip{background:var(--cream-d);border-bottom:1px solid var(--line)}
#spec .stepstrip .steps{margin-top:0;border-top:0;padding:6px 0}
#spec .stepstrip .step span{color:var(--ink2)}
#spec .specnote{max-width:76ch;margin:0 auto;padding:34px 26px 54px;text-align:center;color:var(--mut);font-size:12.5px}
#spec .specnote .stamp{display:block;margin-top:8px;opacity:.7}
@media print{#spec{display:none!important}}
@media print{ body>*:not(#printdoc){display:none!important} #printdoc{display:block!important} html,body{background:#fff!important} }
/* schedule table: cell text lines up with its column header */
#spec table.sched td{text-align:left}
#spec table.sched td.tg{text-align:left}
/* soft highlight: a touch darker cream (was a pinkish peach) so it matches the site */
#spec{--cop-soft:#ECE3D0}
/* "sample on request" tiles: warm cream instead of flat gray, so they sit with the wood swatches */
#spec .sw.ask{background:#FAF5EA;border-color:#D6BC98;border-style:dashed}
#spec .sw.ask .nm,#spec .sw.ask b{color:var(--cop-d)}
/* table header rows: darker cream with a copper rule instead of the dark gray bar */
#spec thead th,#spec .sched th{background:#E6DCC4;color:#20242A;border-bottom:2px solid #AF6029}
/* paint panel + spec output: cream with a copper edge instead of the dark gray block */
#spec .anyshade{background:#ECE3D0;color:var(--ink);border-left:4px solid var(--cop)}
#spec .anyshade h3{color:var(--ink)}
#spec .anyshade p{color:var(--ink2)}
#spec .anyshade p + p{color:var(--ink2)}
#spec .anyshade .brands{border-top:1px solid rgba(32,36,42,.16);color:var(--cop-d)}
#spec .spec{background:#ECE3D0;color:var(--ink);border-left:4px solid var(--cop)}
#spec .spec .k{color:var(--mut)}
#spec .spec .v{color:var(--ink)}
#spec .spec .cop{color:var(--cop-d)}
/* hide the version stamp / screen-width line and the usage-tracking notice (tracking is inactive on this site) */
#spec #stamp,#spec #tracknote{display:none!important}
/* small print: two short centered paragraphs, balanced lines, no mid-word breaks */
#spec .specnote{max-width:760px;padding:40px 26px 56px}
#spec .specnote p{margin:0 0 14px;text-wrap:balance;hyphens:none;overflow-wrap:normal;line-height:1.7}
#spec .specnote p:first-child{color:var(--ink2);font-size:13px}
/* Finish Board (print): these live in the print document, outside #spec, so they are not scoped */
@media print{
 .bgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12pt;width:calc(100% - 4pt)}
 .bcard{border:.75pt solid #bbb;page-break-inside:avoid;overflow:hidden;box-sizing:border-box;min-width:0}
 .bimgs{display:flex;height:132pt;background:#fff}
 .bimgs img{display:block;object-fit:cover}
 .bimgs .bd{width:46%;height:100%;object-fit:contain;background:#fff;border-right:.5pt solid #ddd}
 .bimgs .bf{width:54%;height:100%;object-fit:cover}
 .bimgs .bfc{width:54%;height:100%}
 .bmeta{padding:7pt 9pt;min-width:0}
 .bmeta .btag{font:600 8pt var(--mono);color:#AF6029;letter-spacing:.1em}
 .bmeta .brooms{font-size:10pt;margin:2pt 0 4pt}
 .bmeta .bspec{font-family:var(--mono);font-size:7.5pt;color:#333;line-height:1.5;word-break:break-word}
}