/* FORSPEC drawings: /drawings/ and /drawings/<id>/. Owned by chat 03. Phone first.
   Look: "drawing office": black stage, white sheets lit like paper, title-block type, sheet numbers in mono. */
.dw{padding-top:73px;--paper:#fff;--edge:var(--line);--edge2:rgba(255,255,255,.34);--mono:"JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace,monospace}
.dw .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.dw h2{font-size:clamp(30px,4.2vw,56px);margin:0}
.dw h2.cond span,.dw h1.cond span{color:var(--redT)}
.dw p{margin:0}
.dwCrumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-block:14px 0;font:700 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.dwCrumbs a{padding:6px 0}.dwCrumbs a:hover{color:var(--text)}.dwCrumbs b{color:var(--text)}
:is(.dwSearch input,.dwSel select,.dwB,.dwStage,.dwMore,.dwTabs button,.dwLb button,.dwLb a,.dwThumb,.dwSys,.dwSheet):focus-visible{outline:2px solid var(--redT);outline-offset:2px}

/* section heading: title on the left, a title-block caption on the right, a ruled line under */
.dwSecH{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;border-bottom:1px solid var(--edge2);padding-bottom:10px;margin-bottom:16px}
.dwSecH>span{font:700 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap;padding-bottom:4px}

/* ---------- library hero: drafting grid */
.dwHero{padding-block:22px 26px;border-bottom:1px solid var(--line);background:
  linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/100% 32px,
  linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/32px 100%,
  linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/100% 160px,
  linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/160px 100%,
  radial-gradient(ellipse at 85% -30%,rgba(221,36,43,.24),transparent 55%)}
.dwHero h1{font-size:clamp(40px,6.6vw,104px);margin:12px 0 14px;max-width:16ch}
.dwHero .lead{max-width:680px}
.dwStats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:20px;max-width:760px;border:1px solid var(--edge2);background:var(--panel)}
.dwStats div{padding:10px 12px;min-width:0;border-right:1px solid var(--edge)}.dwStats div:last-child{border-right:0}
.dwStats b{display:block;font:800 clamp(17px,2.2vw,28px)/1.05 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif,sans-serif;font-stretch:68%;white-space:nowrap}
.dwStats span{font:700 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}

/* ---------- find */
.dwLib{padding-block:30px 44px}
.dwFind{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.dwSearch{grid-column:1/-1}
.dwSearch,.dwSel{position:relative;display:block;border:1.5px solid var(--edge2);background:var(--panel)}
.dwFind .cap{display:block;font:700 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding:6px 12px 0}
.dwSearch input,.dwSel select{display:block;width:100%;height:34px;background:none;border:0;color:var(--text);font:600 16px "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif,sans-serif;padding:0 12px 4px;border-radius:0;appearance:none;-webkit-appearance:none;outline:0;text-overflow:ellipsis}
.dwSel select{padding-right:30px;cursor:pointer}.dwSel select option{color:#111;background:#fff}
.dwSearch input::placeholder{color:var(--dim);font-weight:400}
.dwSel::after{content:"▾";position:absolute;right:12px;bottom:9px;pointer-events:none;color:var(--redT)}
.dwSearch:focus-within,.dwSel:focus-within{border-color:var(--redT)}
.dwCount{display:flex;justify-content:space-between;gap:12px;font:700 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:12px 0 14px !important}
.dwCount span:first-child{color:var(--text)}.dwCount span:last-child{text-align:right}

/* ---------- cards: sheet + mini title block */
.dwGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
.dwCard{display:flex;flex-direction:column;min-width:0}
.dwCard[hidden]{display:none}
.dwThumb{position:relative;display:block;background:var(--paper);aspect-ratio:520/368;overflow:hidden;box-shadow:0 0 0 1px var(--edge),0 18px 40px -18px rgba(0,0,0,.9);transition:transform .2s,box-shadow .2s}
.dwThumb img{width:100%;height:100%;object-fit:contain;display:block}
.dw3d{position:absolute;right:6px;top:6px;background:var(--red);color:#fff;font:700 12px var(--mono);font-style:normal;padding:2px 6px}
.dwIdx{position:absolute;left:0;bottom:0;background:var(--bg);color:var(--text);font:700 12px var(--mono);font-style:normal;padding:2px 6px;letter-spacing:.04em}
.dwTb{display:grid;grid-template-columns:1.5fr .7fr 1fr;margin:0;border:1px solid var(--edge2);border-top:0;background:var(--panel)}
.dwTb div{padding:5px 8px;border-right:1px solid var(--edge);min-width:0}.dwTb div:last-child{border-right:0}
.dwTb dt{font:700 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);line-height:1.2}
.dwTb dd{margin:1px 0 0;font:700 14px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dwTb dd.no{color:var(--redT);font-size:15px}
.dwCard h3{font:600 15px/1.3 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif,sans-serif;margin:10px 0 4px}
.dwApp{font-size:12px;line-height:1.35;color:var(--dim);margin-bottom:10px !important}
.dwBtns{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:auto}
.dwB{display:flex;align-items:center;justify-content:center;min-height:50px;border:1.5px solid rgba(255,255,255,.45);font:700 13px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.dwB.view{grid-column:1/-1;background:var(--red);border-color:var(--red);color:#fff}
.dwMore{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:50px;margin-top:18px;background:var(--red);border:0;color:#fff;font:700 14px var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.dwEmpty{display:grid;gap:10px;justify-items:start;border:1px dashed var(--edge2);padding:20px;background:var(--panel)}
.dwEmpty[hidden]{display:none}.dwEmpty span{color:var(--dim)}.dwEmptyB{display:grid;gap:8px;width:100%}.dwEmptyB .btn{width:100%}
/* phone: four cards, tablet: six, then "Show all" (the script removes .clip when a filter or search is used) */
.dwLib.clip .dwCard.more{display:none}
@media (max-width:599px){.dwLib.clip .dwCard.more4{display:none}}
.dwLib:not(.clip) .dwMore{display:none}

/* ---------- 3D band */
.dw3{padding-block:34px;border-top:1px solid var(--line);display:grid;gap:18px}
.dw3T{display:grid;gap:12px;justify-items:start}.dw3T p{color:var(--dim);max-width:520px}
.dw3Pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:1200px}
.dw3Pair img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:var(--paper);display:block}

/* ---------- the wheel of sheets. The script sizes the sheets so the whole ring fits the width: nothing is cut off. */
.dwWheel{padding-block:34px 30px;border-top:1px solid var(--line);background:radial-gradient(ellipse at 50% 60%,rgba(255,255,255,.07),transparent 60%)}
.dwRingWrap{position:relative;height:300px;perspective:1600px;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.dwRing{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.dwSheet{position:absolute;background:var(--paper) center/contain no-repeat;box-shadow:0 0 0 1px rgba(0,0,0,.25),0 22px 44px -18px rgba(0,0,0,.9);cursor:pointer;overflow:hidden}
.dwSheet i{position:absolute;left:0;bottom:0;background:var(--bg);color:var(--text);font:700 12px var(--mono);font-style:normal;padding:1px 5px}
.dwWheelP{text-align:center;font:700 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-top:6px !important}

/* ---------- job band */
.dwJob{padding-block:34px 44px;border-top:1px solid var(--line);display:grid;gap:18px;background:radial-gradient(ellipse at 10% 120%,rgba(221,36,43,.2),transparent 55%)}
.dwJob p{color:var(--dim);max-width:560px;margin-top:6px}
.dwJobBtns{display:grid;grid-template-columns:1fr;gap:8px}
.dwJobBtns .btn{width:100%;padding-inline:10px;font-size:13px}

/* ---------- detail page */
.dwHead{padding-block:14px 14px}
.dwHead h1{font-size:clamp(28px,4.4vw,64px);line-height:.96;margin:10px 0 14px;max-width:24ch}
.dwHead h1 em{font-style:normal;color:var(--redT);font-family:var(--mono);font-stretch:100%;font-weight:700;font-size:.62em;letter-spacing:0;white-space:nowrap;vertical-align:.14em}
.dwFacts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0;border:1px solid var(--edge2);background:var(--panel)}
.dwFacts div{padding:8px 10px;border-right:1px solid var(--edge);min-width:0}.dwFacts div:last-child{border-right:0}
.dwFacts dt{font:700 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.dwFacts dd{margin:2px 0 0;font:700 15px "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif,sans-serif;white-space:nowrap}
.dwView{padding-block:6px 26px}
.dwTabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1.5px solid var(--edge2);margin-bottom:10px}
.dwTabs button{min-height:50px;background:none;border:0;color:var(--text);font:700 13px var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.dwTabs button.on{background:var(--red);color:#fff}
.dwStage{position:relative;display:block;width:100%;padding:0;border:0;background:var(--paper);cursor:zoom-in;aspect-ratio:1600/1131;box-shadow:0 0 0 1px var(--edge),0 30px 80px -30px #000;margin-inline:auto;max-width:1400px}
.dwStage img{width:100%;height:100%;object-fit:contain;display:block}
.dwZoom{position:absolute;right:8px;bottom:8px;background:rgba(11,13,16,.9);color:var(--text);font:700 12px var(--mono);letter-spacing:.06em;padding:6px 9px;text-transform:uppercase}
.dwDl{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;max-width:1400px;margin-inline:auto}
.dwDl .btn{padding-inline:6px;font-size:13px;white-space:nowrap;letter-spacing:.04em}
.dwDl #dwOpen{grid-column:1/-1;display:none}
.dwNote{font-size:15px;line-height:1.45;color:var(--dim);margin-top:12px !important;max-width:760px}
.dwInfo{display:grid;gap:14px;padding-block:8px 34px}
.dwBox{border:1px solid var(--edge2);background:var(--panel);padding:16px}
.dw .dwBox h2{font:700 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:0 0 10px}
.dwViews{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.dwViews li{display:grid;gap:1px}.dwViews b{font:700 13px var(--mono);color:var(--redT);letter-spacing:.04em;text-transform:uppercase}.dwViews span{font-size:15px;line-height:1.35}
.dwSysL{display:grid;gap:8px;margin-bottom:8px}
.dwSys{display:grid;grid-template-columns:1fr auto;gap:0 10px;align-items:center;min-height:50px;padding:8px 12px;border:1.5px solid var(--edge2);background:var(--panel)}
.dwSys span{grid-column:1;font:700 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.dwSys b{grid-column:1;font:600 15px/1.25 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif,sans-serif}.dwSys i{grid-column:2;grid-row:1/3;font-style:normal;color:var(--redT);font-size:18px}
.dwBox>.dwSys+.dwSys{margin-top:8px}.dwBox .dwSys{background:var(--panel2)}
.dwInfo.one{grid-template-columns:minmax(0,1fr)}
.dwGo{grid-column:1/-1;display:grid;grid-template-columns:1fr;gap:8px}
@media (min-width:600px){.dwGo{grid-template-columns:repeat(3,minmax(0,1fr))}}
.dwNext{padding-block:30px 34px;border-top:1px solid var(--line)}
.dwNextG{display:grid;grid-template-columns:1fr;gap:8px}
@media (min-width:600px){.dwNextG{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1025px){.dwNextG{grid-template-columns:repeat(3,minmax(0,1fr))}.dwNext{padding-block:48px}}
@media (min-width:1500px){.dwNextG{grid-template-columns:repeat(4,minmax(0,1fr))}}
.dwModel{padding-block:8px 30px}
.dwModel .fs3d{max-width:900px;margin-inline:auto;aspect-ratio:1/1;box-shadow:0 0 0 1px var(--edge),0 30px 80px -30px #000}
@media (min-width:1025px){.dwModel .fs3d{aspect-ratio:16/10}}
.dwRel{padding-block:30px 40px;border-top:1px solid var(--line)}
.dwRel h2{margin-bottom:16px}
.dwRel .dwAll{margin-top:18px;width:100%}

/* ---------- the pop-up viewer: bar, info line, the sheet (whole, then zoom), tool row */
.dwLb{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--bg);color:var(--text);overflow:hidden}
.dwLb[open]{display:flex;flex-direction:column}
.dwLb::backdrop{background:#000}
.dwLbBar{display:flex;align-items:center;gap:10px;padding:8px max(10px,env(safe-area-inset-left)) 8px;padding-top:calc(8px + env(safe-area-inset-top));background:var(--panel);border-bottom:1px solid var(--edge2)}
.dwLbBar b{font:700 16px var(--mono);color:var(--redT);white-space:nowrap}
.dwLbBar .t{flex:1;min-width:0;font:600 15px/1.2 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dwLb button,.dwLb a.dl{display:flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 10px;background:none;border:1.5px solid rgba(255,255,255,.4);color:var(--text);font:700 14px var(--mono);cursor:pointer;flex:none}
.dwLb button[hidden]{display:none}
.dwLb #dwX{font-size:24px;background:var(--red);border-color:var(--red);color:#fff}
.dwLbInfo{display:flex;gap:10px;align-items:center;padding:6px 10px;font:700 12px var(--mono);letter-spacing:.06em;color:var(--dim);border-bottom:1px solid var(--edge);background:var(--panel)}
.dwLbInfo span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dwLbInfo a{color:var(--text);white-space:nowrap;padding:6px 0;border-bottom:1px solid var(--redT)}.dwLbInfo a[hidden]{display:none}
.dwLbTabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border-bottom:1px solid var(--edge)}
.dwLbTabs[hidden]{display:none}
.dwLb .dwLbTabs button{border:0;height:44px;font-size:13px;letter-spacing:.06em;text-transform:uppercase}.dwLb .dwLbTabs button.on{background:var(--red);color:#fff}
.dwLbStage{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none;cursor:grab;background:
  linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/100% 32px,linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/32px 100%,var(--bg)}
.dwLbStage.drag{cursor:grabbing}
.dwLbStage img{position:absolute;left:0;top:0;transform-origin:0 0;background-color:var(--paper);background-size:100% 100%;max-width:none;user-select:none;-webkit-user-drag:none;will-change:transform;box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.dwLbMore{position:absolute;left:0;right:0;padding:0 14px;display:grid;gap:8px;pointer-events:none}
.dwLbMore[hidden]{display:none}
.dwLbMore b{font:700 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.dwLbMore p{font-size:15px;line-height:1.3;margin:0}.dwLbMore i{display:block;font:700 12px var(--mono);font-style:normal;color:var(--redT);letter-spacing:.04em;text-transform:uppercase}
.dwLbMore em{font-style:normal;font-size:13px;color:var(--dim);border-top:1px solid var(--edge);padding-top:8px}
.dwLbFoot{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:var(--panel);border-top:1px solid var(--edge2)}
.dwLbFoot span{font:700 12px var(--mono);color:var(--dim);min-width:42px;text-align:center}
.dwLbFoot a.dl{background:var(--red);border-color:var(--red);color:#fff}
.dwLbFoot .dwLbNav{font-size:22px}

@media (max-width:599px){
  .dwFacts{grid-template-columns:1fr 1fr}.dwFacts div:nth-child(2){border-right:0}.dwFacts div:nth-child(-n+2){border-bottom:1px solid var(--edge)}
  .dwFacts div{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.dwFacts dd{margin:0}
  .dwLbFoot span{display:none}.dwLbFoot{gap:5px}.dwLb .dwLbFoot button,.dwLb .dwLbFoot a.dl{padding:0 6px}
  .dwCount span:last-child{display:none}
  .dwSecH>span{display:none}
}
/* ---------- tablet */
@media (min-width:600px){
  .dwFind{grid-template-columns:1.4fr 1fr 1fr}.dwSearch{grid-column:auto}
  .dwGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 16px}
  .dwJobBtns{grid-template-columns:repeat(2,minmax(0,280px))}
  .dwEmptyB{grid-template-columns:repeat(2,minmax(0,280px))}
  .dwDl{grid-template-columns:repeat(3,1fr)}.dwDl #dwOpen{display:inline-flex;grid-column:auto}
  .dwInfo{grid-template-columns:1fr 1fr}
  .dwRel .dwAll{width:auto}
  .dwBtns{grid-template-columns:1.2fr 1fr 1fr}.dwB.view{grid-column:auto}
  .dwLbBar b{font-size:18px}.dwLbBar .t{font-size:17px}
}
@media (max-width:900px){.dw{padding-bottom:8px}}
/* ---------- desktop */
@media (min-width:1025px){
  .dwHero{padding-block:34px 40px}
  .dwLib{padding-block:44px 64px}
  .dwLib.clip .dwCard.more{display:flex}.dwLib .dwMore{display:none}
  .dwFind{max-width:1100px}
  .dwGrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 20px}
  .dwThumb:hover{transform:translateY(-4px);box-shadow:0 0 0 2px var(--redT),0 30px 60px -20px #000}
  .dwB:hover,.dwSys:hover{border-color:var(--text)}.dwLb button:hover,.dwLb a.dl:hover{border-color:var(--text)}
  .dw3{padding-block:56px;gap:24px}.dw3T{grid-template-columns:1fr auto;align-items:end;gap:8px 40px}.dw3T .tag,.dw3T h2,.dw3T p{grid-column:1}.dw3T .btn{grid-column:2;grid-row:1/4;align-self:end}
  .dwWheel{padding-block:56px 44px}
  .dwJob{grid-template-columns:1fr auto;align-items:end;padding-block:56px 64px}
  .dwHead{padding-block:20px 18px}.dwFacts{max-width:640px}
  .dwInfo{max-width:1400px;margin-inline:auto}
  .dwNote{margin-left:max(0px,calc((100% - 1400px)/2));margin-right:auto;max-width:860px}
}
@media (min-width:1500px){.dwGrid{grid-template-columns:repeat(5,minmax(0,1fr))}.dwRel .dwGrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:2200px){.dwGrid{grid-template-columns:repeat(6,minmax(0,1fr))}.dw>section,.dw>nav{max-width:2200px;margin-inline:auto}}
@media (prefers-reduced-motion:reduce){.dwThumb{transition:none}}
/* ---------- DWG button (shown only where the .dwg file exists): three formats across, View on its own row */
.dwLb a[hidden]{display:none}
.dwBtns.d3{grid-template-columns:repeat(3,1fr)}.dwBtns.d3 .dwB.view{grid-column:1/-1}
.dwDl.d3{grid-template-columns:repeat(3,1fr)}
@media (min-width:600px){.dwDl.d3{grid-template-columns:repeat(4,1fr)}}
@media (max-width:599px){.dwLb .dwLbFoot:has(#dwLbDwg:not([hidden])){gap:4px;padding-inline:4px}.dwLb .dwLbFoot:has(#dwLbDwg:not([hidden]))>*{min-width:38px;padding:0 2px;flex:1 1 38px;max-width:48px}}