/* s04 tech: drafting table. Cold blue-grey paper, fine grid, ink. Scoped to #s-tech. */
#s-tech.z7{background:#d2d9e0;color:#16263a;padding:0;position:relative;overflow:hidden;isolation:isolate}
#s-tech .t4-paper{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(31,58,92,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(31,58,92,.13) 1px,transparent 1px),
    linear-gradient(rgba(31,58,92,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(31,58,92,.055) 1px,transparent 1px);
  background-size:96px 96px,96px 96px,16px 16px,16px 16px;background-position:-1px -1px}
#s-tech .t4-paper::after{content:"";position:absolute;inset:0;opacity:.35;mix-blend-mode:multiply;
  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 .55 0 0 0 0 .6 0 0 0 0 .66 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
#s-tech .t4-lamp{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 55% 50% at 66% 42%,rgba(250,252,255,.62),rgba(250,252,255,0) 72%),
             radial-gradient(ellipse 90% 80% at 50% 50%,rgba(20,40,64,0) 55%,rgba(20,40,64,.26) 100%)}

#s-tech .t4-in{position:relative;box-sizing:border-box;max-width:1480px;margin:0 auto;padding:72px 16px 56px}
#s-tech .t4-frame{display:none}
#s-tech .t4-head{display:flex;flex-direction:column;align-items:flex-start;gap:12px;position:relative;z-index:3}
#s-tech .t4-num{font-family:var(--serif,'Gloock',Georgia,serif);font-size:clamp(64px,8.4vw,128px);line-height:.82;letter-spacing:-.03em;flex:none;
  background:linear-gradient(180deg,#dcbc63 0%,#c9a84c 40%,#9c7a2c 72%,#6d5419 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
#s-tech .t4-eye{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#7d6020}
#s-tech .t4-h{font-family:var(--serif,'Gloock',Georgia,serif);font-weight:400;font-size:clamp(28px,3.2vw,52px);line-height:1.04;letter-spacing:-.012em;color:#122238;margin:0;max-width:17ch;text-wrap:balance}

#s-tech .t4-stage{position:relative;height:clamp(340px,98vw,470px);margin:18px -16px 8px}
#s-tech .t4-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2}
/* the photograph (16:9 on black) arrives inside its own pool of dark, so the black frame never shows a hard edge on the paper */
#s-tech .t4-ph{position:absolute;left:0;top:0;width:10px;aspect-ratio:16/9;transform-origin:0 0;z-index:1;opacity:0;pointer-events:none;will-change:transform,opacity}
#s-tech .t4-dark{position:absolute;inset:-30% -24%;background:radial-gradient(ellipse closest-side,#050705 0%,#050705 55%,rgba(5,7,5,0) 100%)}
#s-tech .t4-photo{position:absolute;inset:0;width:100%;height:100%;display:block;filter:brightness(1.04) contrast(1.02);
  -webkit-mask-image:radial-gradient(closest-side,#000 74%,transparent 100%);mask-image:radial-gradient(closest-side,#000 74%,transparent 100%)}
#s-tech .t4-labels{position:absolute;inset:0;z-index:3;pointer-events:none}
#s-tech .t4-labels span{position:absolute;left:0;top:0;display:flex;align-items:center;gap:7px;white-space:nowrap;opacity:0;will-change:transform,opacity;
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#1f3a5c;
  background:rgba(222,228,234,.94);border:1px solid rgba(31,58,92,.4);padding:5px 9px 5px 8px;border-radius:2px;transition:background .3s,color .3s}
#s-tech .t4-labels i{width:6px;height:6px;background:#b08a33;transform:rotate(45deg);flex:none}
#s-tech .t4-labels span.on{background:#1f3a5c;color:#f1e6c6;border-color:#1f3a5c}

#s-tech .t4-block{position:relative;z-index:3;border-top:1.5px solid rgba(22,38,58,.55);background:rgba(214,221,228,.72);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
#s-tech .t4-pillars{list-style:none;margin:0;padding:0;display:grid}
#s-tech .t4-pillars li{position:relative;padding:14px 4px 14px 0;border-bottom:1px solid rgba(22,38,58,.22);cursor:default;outline:none;transition:background .3s}
#s-tech .t4-pillars li::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:#b08a33;transform:scaleX(0);transform-origin:0 50%;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
#s-tech .t4-pillars li.on::before,#s-tech .t4-pillars li:focus-visible::before{transform:scaleX(1)}
#s-tech .t4-pillars li:focus-visible{background:rgba(176,138,51,.12)}
#s-tech .t4-pillars b{display:block;font-family:var(--serif,'Gloock',Georgia,serif);font-weight:400;font-size:22px;line-height:1.1;color:#122238;margin-bottom:5px}
#s-tech .t4-pillars li.on b{color:#7d6020}
#s-tech .t4-pillars span{display:block;font-size:14px;line-height:1.45;color:#3b4d62}
#s-tech .t4-backed{padding:16px 0 4px}
#s-tech .t4-backed p{margin:0 0 14px;font-size:14px;line-height:1.5;color:#3b4d62}
#s-tech .t4-bk{display:block;font-family:var(--serif,'Gloock',Georgia,serif);font-size:26px;line-height:1.05;color:#7d6020;margin-bottom:6px}
#s-tech .t4-btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:14px;padding:11px 18px;border-radius:999px;border:1.5px solid #16263a;color:#16263a;background:transparent;text-decoration:none;transition:background .25s,color .25s}
#s-tech .t4-btn .ar{width:16px;height:16px}
#s-tech .t4-btn:hover,#s-tech .t4-btn:focus-visible{background:#16263a;color:#e8e2d4}

/* desktop: one pinned drawing sheet */
@media (min-width:900px){
  #s-tech.t4-desk .t4-in{height:100vh;min-height:660px;padding:calc(var(--hdr,58px) + var(--tabs,44px) + 30px) clamp(36px,4.2vw,72px) 0;
    display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);grid-template-rows:minmax(0,1fr) auto}
  #s-tech.t4-desk .t4-frame{display:block;position:absolute;left:clamp(16px,1.8vw,30px);right:clamp(16px,1.8vw,30px);top:calc(var(--hdr,58px) + var(--tabs,44px) + 14px);bottom:16px;
    border:1px solid rgba(22,38,58,.42);pointer-events:none;z-index:1;
    background:
      repeating-linear-gradient(90deg,rgba(22,38,58,.5) 0 1px,transparent 1px 48px) top/100% 7px no-repeat,
      repeating-linear-gradient(90deg,rgba(22,38,58,.5) 0 1px,transparent 1px 48px) bottom/100% 7px no-repeat,
      repeating-linear-gradient(180deg,rgba(22,38,58,.5) 0 1px,transparent 1px 48px) left/7px 100% no-repeat,
      repeating-linear-gradient(180deg,rgba(22,38,58,.5) 0 1px,transparent 1px 48px) right/7px 100% no-repeat}
  #s-tech .t4-frame i{position:absolute;width:18px;height:18px;border:0 solid #b08a33}
  #s-tech .t4-frame .c1{left:-1px;top:-1px;border-left-width:2px;border-top-width:2px}
  #s-tech .t4-frame .c2{right:-1px;top:-1px;border-right-width:2px;border-top-width:2px}
  #s-tech .t4-frame .c3{left:-1px;bottom:-1px;border-left-width:2px;border-bottom-width:2px}
  #s-tech .t4-frame .c4{right:-1px;bottom:-1px;border-right-width:2px;border-bottom-width:2px}
  #s-tech.t4-desk .t4-head{grid-column:1;grid-row:1;flex-direction:column;align-items:flex-start;gap:14px;align-self:start;padding-top:8px}
  #s-tech.t4-desk .t4-h{font-size:clamp(34px,3.5vw,56px);max-width:13.5ch}
  #s-tech.t4-desk .t4-stage{grid-column:1 / span 2;grid-row:1;height:auto;margin:0 calc(-1 * clamp(36px,4.2vw,72px)) 0 34%;min-height:0}
  #s-tech.t4-desk .t4-block{grid-column:1 / span 2;grid-row:2;display:grid;grid-template-columns:3fr 1.25fr;margin:0 calc(-1 * clamp(36px,4.2vw,72px) + clamp(16px,1.8vw,30px) + 1px) 17px}
  #s-tech.t4-desk .t4-pillars{grid-template-columns:repeat(3,minmax(0,1fr))}
  #s-tech.t4-desk .t4-pillars li{padding:18px 22px 20px;border-bottom:0;border-right:1px solid rgba(22,38,58,.3)}
  #s-tech.t4-desk .t4-pillars li:hover{background:rgba(176,138,51,.1)}
  #s-tech.t4-desk .t4-pillars li::before{top:-1.5px}
  #s-tech.t4-desk .t4-pillars b{font-size:26px}
  #s-tech.t4-desk .t4-backed{padding:18px 22px 18px;display:flex;flex-direction:column;justify-content:space-between}
  #s-tech.t4-desk .t4-backed p{font-size:13.5px}
}
@media (min-width:900px) and (max-height:760px){
  #s-tech.t4-desk .t4-pillars li{padding:12px 18px 14px}
  #s-tech.t4-desk .t4-pillars span,#s-tech.t4-desk .t4-backed p{font-size:12.5px}
  #s-tech.t4-desk .t4-bk{font-size:22px}
}
#s-tech.t4-nogl .t4-stage canvas,#s-tech.t4-nogl .t4-labels,#s-tech.t4-nogl .t4-dark{display:none}
#s-tech.t4-nogl .t4-ph{opacity:1;position:relative;display:block;width:min(100%,560px);margin:0 auto;transform:none;border-radius:6px;overflow:hidden}
#s-tech.t4-nogl .t4-photo{position:relative;-webkit-mask-image:none;mask-image:none}