/* SJ / FIELD NOTES — an editorial portfolio with a physical patch-field motif. */
.field-site{--paper:#efece3;--ink:#20241f;--orange:#e95728;--rule:#cbcbbf;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.5}
.field-site a{color:inherit}.field-site .site-main{max-width:1440px;padding:0 4.5%;}.field-site .site-nav{max-width:1440px;width:100%;margin:auto;padding:20px 4.5%;background:transparent;border:0;box-shadow:none}.field-site .brand-mark{display:none}.field-site .brand-name{font-size:27px;letter-spacing:-1.5px;font-weight:900}.field-site .brand-tagline{font:10px/1.7 monospace;letter-spacing:.08em;text-transform:uppercase}.field-site .navbar-nav .nav-link{font:12px/1.4 monospace;padding:10px 16px;border-radius:0}.field-site .navbar-nav .active .nav-link{background:var(--ink);color:var(--paper)}.field-site .navbar-toggler{border-color:var(--ink);border-radius:0}.field-site .site-footer{background:transparent;border-color:var(--rule);margin-top:0}.field-site .footer-inner{max-width:1440px;padding:0 4.5%}.field-site .social-icons a{border-color:var(--rule)}.field-site :focus-visible{outline:3px solid #b74316;outline-offset:5px}.micro,.field-index,.board-top,.board-foot,.work-tags,.work-number,.section-aside,.note-label,.note-foot,.portrait-frame>span{font-family:monospace;font-size:11px;font-weight:500;letter-spacing:.06em;line-height:1.6}.field-index{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--ink);padding-top:15px}.field-index span:nth-child(2){color:#666d60}.intro{padding:58px 0 54px}.intro-heading{position:relative}.intro .micro{margin-bottom:22px}.intro h1{position:relative;z-index:1;font-size:clamp(62px,8.8vw,126px);font-weight:900;letter-spacing:-.065em;line-height:.91;margin:0;max-width:100%;}.intro h1 em{font-family:Georgia,serif;font-weight:400;letter-spacing:-.09em}.intro-star{position:absolute;right:4%;top:24px;font-family:Georgia,serif;font-size:clamp(140px,24vw,340px);color:var(--orange);line-height:1;transform:rotate(-12deg)}.intro-bottom{display:flex;align-items:center;gap:30px;margin-top:42px}.intro-bottom p{margin:0 auto 0 0;font-size:17px;line-height:1.65}.field-button{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;padding:17px 22px;background:var(--orange);color:#171e17!important;border:1px solid var(--orange);font-size:14px;font-weight:700;white-space:nowrap;transition:background .15s}.field-button span{font-size:23px;line-height:1}.field-button:hover{background:#f37545;text-decoration:none}.text-link{font-size:12px;border-bottom:1px solid currentColor;padding-bottom:5px;display:inline-flex;gap:18px;white-space:nowrap}.text-link:hover{color:#a03b14!important;text-decoration:none}.signal-lab{display:grid;grid-template-columns:1fr 1.4fr;gap:5%;background:#222921;color:#efece3;padding:44px;margin-bottom:92px}.lab-copy .micro{color:#b4bea9}.lab-copy h2{font-size:clamp(36px,4.5vw,64px);font-weight:700;line-height:1;letter-spacing:-.055em;margin:28px 0 22px}.lab-copy>p{max-width:290px;color:#c2c8bd;font-size:15px;line-height:1.75}.lab-copy .lab-instruction{font-size:12px;margin-top:26px}.port-controls{display:flex;gap:9px;margin-top:18px}.port-control{background:transparent;color:#efece3;border:1px solid #6b7664;padding:10px 12px;min-height:48px;font:12px monospace;cursor:pointer}.port-control span{display:block;font-size:10px;margin-top:5px}.port-control.selected{background:#ec6b38;color:#152116;border-color:#ec6b38}.port-control:hover{border-color:#e6eddf}.patch-board{min-width:0;align-self:center;background:#171d17;border:1px solid #505a49;padding:18px 18px 12px}.board-top{display:flex;justify-content:space-between;gap:12px;color:#b5c2aa;font-size:9px;border-bottom:1px solid #424d3c;padding-bottom:12px}.board-led{display:flex;align-items:center;gap:7px}.board-led:before{content:'';width:5px;height:5px;background:#a7c680;border-radius:50%;flex-shrink:0}.patch-art{display:block;width:100%;height:auto;margin:20px 0 8px}.rack rect{fill:#30382c;stroke:#626c58}.screw{fill:#b7b9a8}.socket{fill:#11160f;stroke:#818b75;stroke-width:2}.cable path{fill:none;stroke-width:9;stroke-linecap:round;stroke:#707466;opacity:.33;transition:stroke .2s,opacity .2s}.cable .signal-trace{display:none;stroke-width:3;stroke:#ffe6b1;stroke-dasharray:5 50;animation:trace 3s linear infinite}.patch-board[data-active=fiber] .cable-fiber path,.patch-board[data-active=linux] .cable-linux path,.patch-board[data-active=python] .cable-python path{stroke:#ec6b38;opacity:1}.patch-board[data-active=fiber] .cable-fiber .signal-trace,.patch-board[data-active=linux] .cable-linux .signal-trace,.patch-board[data-active=python] .cable-python .signal-trace{display:block;stroke:#ffe6b1}.port-label{font:11px monospace;fill:#b5c2aa}.signal-readout{border-top:1px solid #424d3c;padding-top:18px;min-height:124px}.signal-readout>span{font:10px monospace;color:#f39462}.signal-readout h3{font-size:17px;line-height:1.4;margin:10px 0 6px;font-weight:600}.signal-readout p{font-size:12px;line-height:1.6;color:#b5c2aa;margin:0;max-width:430px}.board-foot{font-size:8px;color:#a7b39d;margin:18px 0 0}.section-heading{display:grid;grid-template-columns:1fr 1.8fr .8fr;align-items:start;gap:20px;margin-bottom:40px}.section-heading .micro{padding-top:8px}.section-heading h2{font-size:clamp(34px,4.2vw,58px);line-height:1.02;letter-spacing:-.05em;font-weight:700;margin:0}.section-aside{text-align:right;color:#666d60;padding-top:8px}.work-section{scroll-margin-top:25px}.work-row{display:grid;grid-template-columns:.25fr 1fr 1.65fr .2fr;gap:30px;align-items:start;border-top:1px solid var(--rule);padding:32px 0}.work-row:last-child{border-bottom:1px solid var(--rule)}.work-number{color:#676d62;padding-top:8px}.work-row h3{font-size:29px;letter-spacing:-1px;line-height:1.2;font-weight:700;margin:0}.work-row p{font-size:15px;line-height:1.75;max-width:520px;margin:0 0 12px;color:#4a5147}.work-tags{font-size:9px;color:#62695d}.row-arrow{font-size:32px;text-align:right;line-height:1}.about-strip{display:grid;grid-template-columns:1fr 2fr;gap:7%;padding:80px 7%;margin:64px 0 80px;background:#e1e2d7}.portrait-frame{align-self:center;transform:rotate(-3deg);max-width:240px;background:var(--paper);padding:12px 12px 16px;box-shadow:5px 9px 0 #c9ccbe}.portrait-frame img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;filter:grayscale(1);display:block}.portrait-frame>span{display:block;font-size:9px;margin-top:12px}.about-copy h2{font-size:clamp(36px,4vw,55px);line-height:1.04;letter-spacing:-.05em;font-weight:700;margin:20px 0}.about-copy p{font-size:15px;line-height:1.8;color:#4a5147;max-width:490px;margin-bottom:24px}.note-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--rule)}.note{padding:28px;display:flex;flex-direction:column;min-width:0}.note+.note{border-left:1px solid var(--rule)}.note-label{color:#62695d;font-size:10px}.note h3{font-size:31px;font-weight:700;letter-spacing:-1px;line-height:1.05;margin:32px 0 20px}.note p{font-size:14px;color:#4a5147;line-height:1.75;margin-bottom:32px}.note-foot{display:flex;justify-content:space-between;margin-top:auto;font-size:10px}.note-foot span{font-size:18px}.credentials-strip{display:flex;justify-content:space-between;align-items:center;gap:25px;border-bottom:1px solid var(--rule);padding:40px 0;margin-bottom:80px}.credentials-strip p{font-size:19px;font-weight:700;line-height:1.5;margin:0}.credentials-strip p span{color:#797f73;margin:0 9px}.credentials-strip small{font-size:12px;font-weight:400;color:#62695d}.contact-finale{background:var(--orange);padding:45px 4%;margin-bottom:0}.contact-finale h2{font-size:clamp(38px,6.7vw,94px);line-height:.95;letter-spacing:-.06em;font-weight:900;margin:32px 0}.contact-finale h2 em{font-family:Georgia,serif;font-weight:400}.contact-finale>div{display:flex;align-items:center;justify-content:space-between;gap:20px}.contact-finale p{margin:0;font-size:15px;line-height:1.7}.contact-finale .field-button{background:var(--ink);color:var(--paper)!important;border-color:var(--ink)}.finale-email{display:inline-block;font:12px monospace;margin-top:32px;border-bottom:1px solid}.field-site .site-footer{padding:28px 0}.field-site .footer-name{font-size:15px}.field-site .footer-note{font:10px monospace}.field-site .skip-link{color:#20241f}.signal-lab :focus-visible{outline-color:#ffb189}
@keyframes trace{to{stroke-dashoffset:-220}}
@media(min-width:1440px){.intro h1{font-size:126px}}
@media(max-width:1100px){.intro-bottom{flex-wrap:wrap;gap:20px}.intro-bottom p{flex-basis:100%}.signal-lab{padding:30px;gap:25px}.section-heading{grid-template-columns:1fr 2fr}.section-aside{display:none}.credentials-strip{flex-wrap:wrap}.work-row{gap:20px}.note{padding:22px}.note h3{font-size:26px}}
@media(max-width:767px){.field-site .site-nav{padding:16px 5%}.field-site .site-main{padding:0 5%}.field-index{font-size:9px}.field-index span:nth-child(2){display:none}.intro{padding:40px 0}.intro h1{font-size:clamp(51px,11.8vw,88px);letter-spacing:-.065em}.intro-star{font-size:110px;right:0;top:25px;opacity:.22}.intro .micro{margin-bottom:20px}.intro-bottom{margin-top:28px;gap:18px}.intro-bottom p{font-size:15px}.intro-bottom .text-link{margin-left:0}.signal-lab{grid-template-columns:1fr;padding:25px 20px;margin-bottom:55px;gap:28px}.lab-copy h2{font-size:42px;margin:20px 0}.lab-copy h2 br{display:none}.lab-copy>p{max-width:100%}.lab-copy .lab-instruction{margin-top:20px}.port-controls{margin-top:12px}.port-control{flex:1}.port-control span{display:inline;margin-left:6px}.patch-board{padding:14px}.board-top{font-size:8px;gap:8px}.board-led{font-size:7px}.signal-readout{min-height:145px}.signal-readout h3{font-size:16px}.section-heading{grid-template-columns:1fr;gap:16px;margin-bottom:28px}.section-heading h2{font-size:40px}.work-row{grid-template-columns:24px 1fr;padding:25px 0;gap:12px 16px}.work-row h3{font-size:27px}.work-row>div{grid-column:2}.work-row p{font-size:14px}.row-arrow{display:none}.about-strip{grid-template-columns:1fr;padding:30px 24px;gap:34px;margin:44px 0 50px}.portrait-frame{width:150px;margin-left:5px}.about-copy h2{font-size:40px}.note-grid{grid-template-columns:1fr}.note{padding:26px}.note+.note{border-left:0;border-top:1px solid var(--rule)}.note h3{font-size:32px;margin:22px 0 16px}.note p{margin-bottom:22px}.credentials-strip{align-items:flex-start;flex-direction:column;padding:30px 0;gap:16px;margin-bottom:44px}.credentials-strip p{font-size:17px}.credentials-strip p span{margin:0 5px}.contact-finale{padding:30px 22px}.contact-finale h2{font-size:clamp(32px,8vw,57px);margin:24px 0}.contact-finale>div{align-items:flex-start;flex-direction:column;gap:24px}.field-site .footer-inner{align-items:flex-start;text-align:left}.field-site .navbar-nav .nav-link{padding:12px}.desktop-break{display:none}}
@media(prefers-reduced-motion:reduce){.cable .signal-trace{animation:none}.field-button,.cable path{transition:none}}
@media print{.field-site{background:white}.field-site .site-nav,.field-site .site-footer,.signal-lab,.contact-finale{display:none}.intro-star{display:none}.intro h1{font-size:60px}.about-strip{break-inside:avoid}.note-grid{display:block}.note{break-inside:avoid}.field-site a{color:black}}
