@font-face {
  font-family: "Plex";
  src: url("assets/fonts/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Plex";
  src: url("assets/fonts/IBMPlexSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
:root {
  --paper: #f0efe9;
  --ink: #28373c;
  --secondary: #58666a;
  --accent: #8c5742;
  --line: #c1c7c5;
  --gutter: clamp(1.25rem, 4.5vw, 6rem);
  --mono: "Plex Mono", monospace;
}
* { box-sizing: border-box; }
html {
  background: var(--paper);
  color: var(--ink);
  scroll-behavior: smooth;
  scroll-padding-top: 2rem;
}
body { margin: 0; font: 400 1rem/1.65 "Plex", sans-serif; }
a { color: inherit; text-underline-offset: .3em; }
button, input { font: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
::selection { background: #d5dfe0; }
.frame { width: calc(100% - var(--gutter) * 2); max-width: 1800px; margin-inline: auto; }
.keep-together { white-space: nowrap; }
.skip-link { position: fixed; top: 1rem; left: 1rem; z-index: 10; padding: .7rem 1rem; background: var(--ink); color: var(--paper); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.opening { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: 1.5rem; padding-block: clamp(3.2rem, 5.2vw, 6.5rem) 3.5rem; }
.opening-copy { grid-column: 1 / 7; grid-row: 1; padding-top: 2rem; }
h1 { margin: 0; font-size: clamp(3.2rem, 5.1vw, 6.8rem); line-height: 1.06; font-weight: 400; letter-spacing: -.055em; }
.opening-description { max-width: 28rem; margin: 2rem 0 0; color: var(--secondary); font-size: 1.05rem; line-height: 1.8; text-wrap: pretty; }
.text-link { display: inline-flex; align-items: center; gap: 3rem; min-height: 44px; margin-top: 2rem; padding-bottom: .4rem; border-bottom: 1px solid var(--line); font: .8rem/1.5 var(--mono); text-decoration: none; }
.maker-signature { --mark-offset: 1.4rem; position: relative; grid-column: 1 / 7; grid-row: 2; align-self: center; display: grid; grid-template-columns: max-content max-content; align-items: baseline; column-gap: .45em; width: fit-content; margin: 2rem auto; font-size: clamp(2.25rem, 2.8vw, 3rem); font-weight: 500; line-height: 1.08; letter-spacing: -.045em; }
.maker-signature::before, .maker-signature::after { content: ""; position: absolute; width: 14px; height: 14px; color: var(--accent); opacity: .4; background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat, linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat; pointer-events: none; }
.maker-signature::before { left: calc(-1 * var(--mark-offset)); bottom: -1.25rem; }
.maker-signature::after { right: calc(-1 * var(--mark-offset)); top: -1.25rem; }
.maker-domain { display: flex; align-items: baseline; gap: .7em; font: 400 .45em/1 var(--mono); letter-spacing: -.07em; white-space: nowrap; }
.maker-divider { color: #8a9697; }
.domain-cursor { color: var(--accent); }
.maker-cursor { margin-left: .08em; color: var(--accent); font-family: var(--mono); font-weight: 400; text-shadow: 0 0 7px transparent; transition: color .25s ease, text-shadow .25s ease; }
.assembly-study.power-on + .maker-signature .maker-cursor { color: #a46845; text-shadow: 0 0 7px #c18360aa; }
.assembly-study { grid-column: 7 / -1; grid-row: 1 / 3; align-self: start; margin: 0; }
.drawing-viewport { padding-block: 1.3rem .8rem; }
.enclosure { display: block; width: 104%; max-width: none; height: auto; margin-left: -2%; color: #34464d; stroke-linejoin: round; }
.enclosure polygon, .enclosure polyline, .enclosure path, .enclosure ellipse { vector-effect: non-scaling-stroke; }
.surface, .standoff, .fastener, .fastener-head { fill: var(--paper); stroke: currentColor; stroke-width: 1; }
.edge { fill: #e3e6e2; stroke: currentColor; stroke-width: 1; }
.hatching { fill: url(#section-hatch); stroke: currentColor; stroke-width: .85; }
.recess { fill: #e8eae4; stroke: currentColor; stroke-width: .8; }
.bore { fill: var(--paper); stroke: currentColor; stroke-width: .7; }
.detail, .fine, .trace { fill: none; stroke: currentColor; stroke-width: .7; }
.fine { opacity: .35; }
.trace { stroke: #6c8985; stroke-width: .65; }
.vent-slot { fill: #d0d7d2; stroke: currentColor; stroke-width: .65; }
.port { fill: #ced4d0; stroke: currentColor; stroke-width: .8; }
.axis { fill: none; stroke: #87979a; stroke-width: .65; stroke-dasharray: 8 3 1 3; }
.assembly-guides { opacity: var(--guide-opacity, .4); }
.board-surface { fill: #e0e6de; stroke: currentColor; stroke-width: .9; }
.chip-surface { fill: #47595e; stroke: currentColor; stroke-width: .8; }
.chip-outline { fill: none; stroke: #a3b4b5; stroke-width: .5; }
.chip-mark { fill: #b8c9c2; }
.pin { stroke: #536267; stroke-width: 1; fill: none; }
.component-surface { fill: #bdc6ba; stroke: currentColor; stroke-width: .7; }
.metal-surface { fill: #e9eae3; stroke: currentColor; stroke-width: .8; }
.connector-mouth { fill: #34464d; stroke: currentColor; stroke-width: .6; }
.contact { stroke: #c7b998; stroke-width: .8; fill: none; }
.hex-socket { fill: #546467; stroke: currentColor; stroke-width: .5; }
.thread { fill: none; stroke: currentColor; stroke-width: .5; }
.carrier { transform: translateY(var(--board-shift, 0px)); }
.cover { transform: translateY(var(--cover-shift, 0px)); }
.screws { transform: translateY(var(--screw-shift, 0px)); }
.fastener, .thread { opacity: var(--shaft-opacity, 1); }
.led-glow { fill: #9aca97; opacity: 0; filter: url(#led-soft-glow); transition: opacity .25s ease; }
.led-ring { fill: #d2d8d1; stroke: currentColor; stroke-width: .7; }
.led-lens { fill: #505e57; transition: fill .25s ease; }
.power-on .led-glow { opacity: .7; }
.power-on .led-lens { fill: #a5d69d; }
.assembly-caption { border-top: 1px solid var(--line); padding-top: 1rem; }
.assembly-caption > p:first-child { margin: 0; font-size: 1.1rem; }
.reference-marks { opacity: var(--reference-opacity, 1); }
.reference-line, .datum { fill: none; stroke: var(--accent); stroke-width: .65; }
.datum { opacity: .65; }
.reference-marks text { font: 13px var(--mono); fill: var(--accent); }
.part-key { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin: .7rem 0 0; padding: 0; list-style: none; font: .8rem/1.65 var(--mono); }
.part-key span { margin-right: .5rem; color: var(--accent); }
.work { border-top: 1px solid var(--line); padding-block: 3rem 5rem; }
h2 { font-size: clamp(2rem, 3.3vw, 4.4rem); font-weight: 400; line-height: 1.18; letter-spacing: -.04em; margin: 0; }
.workshop-intro > p { max-width: 48rem; margin: 1.2rem 0 0; font-size: 1.15rem; line-height: 1.75; color: var(--secondary); text-wrap: pretty; }
.areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4rem; margin-top: 3.5rem; }
.areas > div { border-top: 1px solid var(--line); padding-top: 1.2rem; }
.areas h3 { margin: 0 0 .75rem; font-size: 1.5rem; line-height: 1.25; font-weight: 400; }
.areas p { max-width: 26rem; margin: 0; font-size: 1.05rem; line-height: 1.75; color: var(--secondary); text-wrap: pretty; }
.horizon { position: relative; overflow: hidden; isolation: isolate; background: #182b34; color: #e1e6e5; }
.horizon-content { position: relative; z-index: 1; padding-block: clamp(4rem, 7vw, 7rem) 3rem; }
.horizon h2 { font-size: clamp(2.8rem, 4.7vw, 6rem); line-height: 1.12; letter-spacing: -.035em; }
.horizon-sky { position: absolute; z-index: 0; inset: 0; overflow: hidden; }
.horizon-arc { position: absolute; width: 110vw; height: 110vw; min-width: 1000px; min-height: 1000px; border: 1px solid #8fa7b539; border-radius: 50%; top: 26%; left: 40%; background: radial-gradient(ellipse at 20% 0%, #5175880c, transparent 60%); }
.horizon-line { position: absolute; inset: auto 0 29%; height: 1px; background: linear-gradient(90deg, transparent 40%, #88a3b02b 75%, transparent); }
.star { position: absolute; width: 2px; height: 2px; background: #c4d6de; }
.star-one { top: 18%; left: 76%; }
.star-one::before, .star-one::after { content: ""; position: absolute; background: #c4d6de66; }
.star-one::before { width: 10px; height: 1px; top: .5px; left: -4px; }
.star-one::after { width: 1px; height: 10px; top: -4px; left: .5px; }
.star-two { top: 37%; left: 89%; opacity: .35; width: 1px; height: 1px; }
.star-three { top: 12%; left: 55%; opacity: .4; width: 1px; height: 1px; }
.invitation { display: flex; justify-content: space-between; align-items: end; gap: 3rem; margin-top: 6rem; padding-top: 1.5rem; border-top: 1px solid #9eb2bb36; }
.invitation p { font-size: 1.05rem; line-height: 1.8; color: #b8c7ca; max-width: 34rem; margin: 0; text-wrap: pretty; }
.invitation a { display: inline-flex; align-items: baseline; gap: .4em; padding-bottom: .4rem; text-decoration: none; border-bottom: 1px solid #a7b6be; font-size: 1.25rem; white-space: nowrap; }
.contact-phrase { font-family: Georgia, serif; font-style: italic; }
.invitation .contact-arrow { margin-left: 1.5rem; }
.footer-links { margin-top: 2.25rem; font: .75rem/1.65 var(--mono); }
.footer-links a { color: #b8c7ca; text-decoration: none; }
.footer-links span { margin-left: 1rem; }
@media (min-width: 1700px) {
  .opening-copy { padding-top: 3.5rem; }
  .opening-description { font-size: 1.15rem; max-width: 32rem; }
}
@media (max-width: 1100px) {
  .opening { column-gap: 1rem; }
  h1 { font-size: 5.2vw; }
  .opening-copy { padding-top: 1rem; }
  .opening-description { font-size: 1rem; }
  .areas { gap: 2rem; }
}
@media (max-width: 760px) {
  :root { --gutter: 1.3rem; }
  .opening { display: block; padding-top: 2.7rem; }
  .opening-copy { padding-top: 0; }
  h1 { font-size: clamp(2.8rem, 8.65vw, 4.5rem); line-height: 1.1; }
  .opening-description { font-size: 1rem; max-width: 29rem; margin-top: 1.2rem; }
  .text-link { margin-top: 1.5rem; }
  .maker-signature { margin-block: 2.5rem .5rem; font-size: 2.25rem; }
  .assembly-study { margin-top: 3rem; }
  .drawing-viewport { padding-block: 1rem .5rem; }
  .enclosure { width: 106%; margin-left: -3%; }
  .work { padding-block: 2rem 3rem; }
  .workshop-intro > p { margin-top: 1.5rem; font-size: 1.05rem; }
  .areas { grid-template-columns: 1fr; gap: 1.7rem; margin-top: 2.5rem; }
  .areas h3 { font-size: 1.4rem; }
  .areas p { max-width: none; }
  h2 { font-size: clamp(1.95rem, 5.5vw, 2.7rem); }
  .horizon-content { padding-block: 3.5rem 2.5rem; }
  .horizon h2 { font-size: clamp(2.55rem, 7.8vw, 4rem); }
  .horizon-arc { top: 33%; left: 34%; }
  .star-one { top: 12%; left: 84%; }
  .star-three { top: 8%; left: 64%; }
  .invitation { display: block; margin-top: 4rem; }
  .invitation p { font-size: 1rem; }
  .invitation a { margin-top: 1.5rem; font-size: 1.2rem; }
  .footer-links { margin-top: 2rem; }
}
@media (max-width: 360px) {
  .maker-signature { --mark-offset: .75rem; }
  h1 { font-size: 2.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .carrier, .cover, .screws, .assembly-guides, .fastener, .thread, .led-glow, .led-lens, .maker-cursor { transition: none !important; }
}