/* An interactive magazine spread, based on Andrew's Linux tools. */
.linux-issue{border-top:8px solid var(--ink);padding:32px 36px 50px;background:var(--paper)}
.linux-heading{display:flex;justify-content:space-between;gap:30px;align-items:end;margin:38px 0 28px}.linux-heading h2{font:900 clamp(70px,9vw,145px)/.8 'Barlow Condensed',Impact,sans-serif;letter-spacing:-3px;margin:0}.linux-heading h2 em{font:italic .92em Georgia,serif;color:var(--red)}.linux-heading p{max-width:290px;font-size:14px;line-height:1.7;margin:0}.linux-tabs{display:flex;border-top:1px solid;border-bottom:1px solid;margin-bottom:25px}.linux-tabs button{flex:1;border:0;background:none;text-align:left;padding:16px 12px;cursor:pointer;font:800 22px 'Barlow Condensed',sans-serif}.linux-tabs button span{font:700 9px 'DM Sans',sans-serif;margin-right:12px}.linux-tabs button[aria-pressed=true]{background:var(--ink);color:var(--acid)}.linux-tabs button:hover{box-shadow:inset 0 -4px var(--red)}.linux-issue button:focus-visible,.linux-issue input:focus-visible{outline:3px solid var(--red);outline-offset:4px}
.linux-layout{display:grid;grid-template-columns:minmax(0,1fr) 255px;gap:28px}.linux-stage{height:610px;position:relative;background:#dedbcc;isolation:isolate;overflow:hidden;border:1px solid var(--ink);--scene-accent:var(--acid)}.linux-stage::before{content:'';position:absolute;width:570px;height:570px;border-radius:50%;background:var(--scene-accent);left:-130px;top:120px;background-image:radial-gradient(#19191855 1px,transparent 1px);background-size:7px 7px;z-index:-1;transition:background-color .6s}.linux-stage[data-mode=cast]{--scene-accent:#d0503d}.linux-stage[data-mode=remote]{--scene-accent:#aaa1d5}.scene-kicker{position:absolute;left:22px;top:20px;font:700 9px 'DM Sans',sans-serif;letter-spacing:1px}.scene-scrawl{position:absolute;bottom:32px;left:34%;font:italic 24px Georgia,serif;transform:rotate(-8deg);max-width:180px}.scene-person{position:absolute;width:45%;height:68%;object-fit:contain;object-position:bottom;bottom:0;right:-2%;z-index:3;pointer-events:none;filter:drop-shadow(6px 5px 0 #f0ecdf)}
.scene-monitor{position:absolute;top:65px;left:5%;width:72%;height:320px;border:8px solid var(--ink);border-bottom-width:21px;border-radius:10px;background:#242424;color:var(--paper);box-shadow:8px 9px 0 #19191825}.scene-monitor::before{content:'';position:absolute;width:50px;height:46px;background:var(--ink);left:calc(50% - 25px);top:calc(100% + 20px)}.scene-monitor::after{content:'';position:absolute;width:130px;height:8px;background:var(--ink);left:calc(50% - 65px);top:calc(100% + 60px);border-radius:50%}.monitor-menu{display:flex;justify-content:space-between;padding:8px 12px;font-size:7px;opacity:.7}.monitor-desktop{position:absolute;inset:32px 0 0;overflow:hidden;background:radial-gradient(ellipse at 80% 80%,#677b78 0,transparent 55%),#283e3c}.desktop-word{position:absolute;bottom:20px;left:18px;font:900 clamp(24px,3.2vw,50px)/.85 'Barlow Condensed',sans-serif;letter-spacing:-1px;opacity:.8}.desktop-word em{font-family:Georgia,serif;font-weight:400}.desktop-window{position:absolute;right:18px;top:78px;width:42%;padding:14px;border:1px solid #ffffff30;background:#f0ecdf12;border-radius:8px;font-size:10px;line-height:1.6}.desktop-window b{color:var(--acid);display:block;font-size:15px}
.demo-island{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:145px;min-height:30px;border:1px solid #ffffff25;background:#111;color:white;border-radius:18px;z-index:4;padding:8px 12px;cursor:pointer;transition:width .45s cubic-bezier(.16,1,.3,1),border-radius .45s}.demo-island.expanded{width:260px;border-radius:20px}.island-bar{display:flex;justify-content:space-between;align-items:center;font-size:9px}.island-dot{height:6px;width:6px;border-radius:50%;background:var(--acid);box-shadow:0 0 7px #e7ee5188}.island-detail{display:none;text-align:left;margin-top:18px;padding-bottom:8px}.expanded .island-detail{display:block}.island-detail b{font-size:14px}.island-detail small{display:block;margin:5px 0 14px;opacity:.6}.island-controls{display:flex;gap:15px;font-size:16px;align-items:center}.sound-bars{display:flex;gap:3px;height:15px;margin-left:auto;align-items:center}.sound-bars i{width:3px;height:8px;background:var(--acid)}.linux-stage.is-playing .sound-bars i{animation:audio-bar .7s ease-in-out infinite alternate}.sound-bars i:nth-child(2){animation-delay:.15s!important;height:15px}.sound-bars i:nth-child(3){animation-delay:.3s!important}.sound-bars i:nth-child(4){animation-delay:.08s!important;height:12px}
.scene-film{position:absolute;inset:0;display:none;background:#b43b28;overflow:hidden}.linux-stage[data-mode=remote] .scene-film,.linux-stage[data-mode=cast].cast-arrived .scene-film{display:block}.linux-stage[data-mode=remote] .desktop-word,.linux-stage[data-mode=remote] .desktop-window{display:none}.film-sun{position:absolute;width:135px;height:135px;border-radius:50%;background:var(--acid);right:25px;top:28px;box-shadow:0 0 0 22px #e7ee5120,0 0 0 44px #e7ee5110}.film-orbit{position:absolute;width:250px;height:68px;border:1px solid var(--paper);border-radius:50%;right:-20px;top:62px;transform:rotate(-35deg)}.film-title{position:absolute;left:18px;bottom:38px;font:900 47px/.8 'Barlow Condensed',sans-serif;letter-spacing:-1px}.film-title span{font:italic 40px Georgia,serif;display:block}.film-meta{position:absolute;bottom:12px;left:18px;right:18px;display:flex;justify-content:space-between;font-size:8px}.scene-film::after{content:'';position:absolute;bottom:0;left:0;height:3px;width:var(--progress,25%);background:var(--acid);transition:width .3s}.film-paused{position:absolute;inset:0;display:grid;place-items:center;font-size:45px;opacity:0;background:#19191833}.linux-stage:not(.is-playing) .film-paused{opacity:1}
.scene-phone{position:absolute;bottom:27px;left:6%;width:168px;height:245px;background:var(--paper);border:6px solid var(--ink);border-radius:24px;z-index:5;transform:rotate(-7deg);box-shadow:5px 6px 0 #19191830;display:flex;flex-direction:column;padding:12px;gap:10px}.phone-top{font:700 7px 'DM Sans',sans-serif;display:flex;justify-content:space-between}.phone-title{font:900 29px/.88 'Barlow Condensed',sans-serif;margin-top:13px}.phone-title em{font:italic 26px Georgia,serif;color:var(--red)}.phone-sub{font-size:8px;line-height:1.5;min-height:23px}.phone-action{margin-top:auto;border:0;padding:12px 4px;background:var(--ink);color:var(--acid);font:800 13px 'Barlow Condensed',sans-serif;cursor:pointer;border-radius:5px}.remote-buttons{display:none;grid-template-columns:1fr 1fr 1fr;gap:6px}.remote-buttons button{background:var(--ink);color:var(--paper);border:0;border-radius:5px;padding:9px 0;font-size:11px;cursor:pointer}.remote-buttons button:nth-child(2){background:var(--red)}.remote-next{display:none;border:0;background:var(--ink);color:var(--acid);padding:8px;font:700 9px 'DM Sans',sans-serif;cursor:pointer}.linux-stage[data-mode=remote] .remote-buttons{display:grid}.linux-stage[data-mode=remote] .remote-next{display:block}.linux-stage[data-mode=remote] .phone-action{display:none}.linux-stage[data-mode=remote] .phone-title{font-size:25px;margin-top:8px}.phone-seek{display:none;width:100%;accent-color:var(--red);margin:0}.linux-stage[data-mode=remote] .phone-seek{display:block}.cast-ticket{position:absolute;left:17%;top:68%;width:50px;height:35px;background:var(--red);color:white;display:grid;place-items:center;z-index:6;opacity:0;pointer-events:none;border:1px solid var(--ink)}.sending .cast-ticket{animation:send-ticket .85s cubic-bezier(.3,0,.2,1) both}.scene-reset{position:absolute;right:12px;bottom:12px;border:0;border-bottom:1px solid;background:var(--paper);padding:5px 8px;z-index:7;font:700 8px 'DM Sans',sans-serif;cursor:pointer}
.linux-notes{padding-top:8px}.linux-notes .note-number{font:italic 55px Georgia,serif;color:var(--red)}.linux-notes h3{font:900 39px/.92 'Barlow Condensed',sans-serif;margin:15px 0 20px}.linux-notes>p{font-size:13px;line-height:1.75}.scene-instruction{border-top:1px solid;margin-top:24px;padding-top:16px;font:italic 18px/1.5 Georgia,serif}.scene-status{font-size:10px;line-height:1.6;min-height:42px;margin-top:20px;border-left:3px solid var(--red);padding-left:10px}.scene-caption{display:flex;justify-content:space-between;gap:20px;margin-top:18px;font-size:9px;line-height:1.6}.linux-closer{font:italic 23px Georgia,serif;margin:35px 0 0;text-align:right}
@keyframes audio-bar{to{height:3px}}@keyframes send-ticket{0%{opacity:0;transform:translate(0,0) scale(.65) rotate(-10deg)}15%{opacity:1;transform:translate(-8px,5px) scale(1)}75%{opacity:1;transform:translate(100px,-210px) scale(1.4) rotate(8deg)}100%{opacity:0;transform:translate(120px,-225px) scale(1)}}
@media(max-width:950px){.linux-layout{grid-template-columns:1fr 210px;gap:20px}.linux-stage{height:530px}.scene-monitor{width:88%;height:265px;left:4%;top:65px}.scene-person{width:51%;height:62%;right:-4%}.scene-phone{bottom:22px;left:5%;width:150px;height:225px}.scene-scrawl{left:38%;bottom:42px;font-size:20px}.film-title{font-size:35px}.film-title span{font-size:30px}.linux-heading h2{font-size:90px}.linux-heading p{font-size:12px;max-width:220px}.film-sun{width:100px;height:100px}.linux-notes h3{font-size:32px}}
@media(max-width:600px){.linux-issue{padding:25px 16px 35px}.linux-heading{display:block;margin:28px 0 22px}.linux-heading h2{font-size:80px;letter-spacing:-2px}.linux-heading p{max-width:280px;margin:22px 0 0}.linux-tabs button{font-size:17px;padding:12px 5px}.linux-tabs button span{display:block;font-size:7px;margin-bottom:4px}.linux-layout{grid-template-columns:1fr;gap:22px}.linux-stage{height:530px}.scene-monitor{height:246px;width:89%;left:5%;top:57px}.scene-person{width:55%;height:58%;right:-6%}.scene-phone{width:145px;height:220px;bottom:22px;left:6%}.scene-scrawl{left:46%;bottom:70px;max-width:120px;font-size:18px}.linux-notes{position:relative;padding-left:58px}.linux-notes .note-number{position:absolute;left:0;top:6px;font-size:43px}.linux-notes h3{font-size:33px;margin:0 0 12px}.linux-notes>p{font-size:12px;margin:0}.scene-instruction{margin-top:15px;padding-top:10px;font-size:16px}.scene-caption{display:block;font-size:8px}.scene-caption span{display:block}.linux-closer{font-size:19px}.demo-island.expanded{width:240px}.film-title{font-size:35px}.film-title span{font-size:32px}.scene-status{margin:12px 0 0}}
@media(prefers-reduced-motion:reduce){.linux-issue *{animation:none!important;transition:none!important}.sending .cast-ticket{display:none}}
.island-trigger{display:block;width:100%;padding:0;background:none;border:0;color:inherit;cursor:pointer}.island-controls button{border:0;background:none;color:var(--paper);padding:5px;font-size:16px;cursor:pointer}.island-controls button:hover{color:var(--acid)}.linux-stage:not(.scene-visible) .sound-bars i{animation-play-state:paused!important}.linux-stage.is-playing.scene-visible .film-orbit{animation:film-drift 8s ease-in-out infinite alternate}@keyframes film-drift{to{transform:rotate(-15deg) translateY(8px)}}
.click-invitation{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 24px;margin:0 0 22px;background:var(--acid);border:1px solid var(--ink)}.click-invitation strong{font:900 39px/.85 'Barlow Condensed',sans-serif;letter-spacing:-.6px}.click-invitation strong em{font-style:normal;color:var(--red)}.click-invitation p{font-size:12px;line-height:1.6;margin:0}.scene-start{padding:17px 20px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);font:800 17px 'Barlow Condensed',sans-serif;cursor:pointer;box-shadow:4px 4px 0 var(--red)}.scene-start:hover{background:var(--red);box-shadow:2px 2px 0 var(--ink)}.scene-start:active{box-shadow:none;transform:translate(2px,2px)}.needs-click[data-mode=island] .demo-island,.needs-click[data-mode=cast] .phone-action,.needs-click[data-mode=remote] [data-control=toggle]{outline:3px solid var(--acid);outline-offset:4px;box-shadow:0 0 0 6px var(--red)}
@media(max-width:950px){.click-invitation{gap:15px;padding:18px}.click-invitation strong{font-size:31px}.scene-start{padding:14px;font-size:15px}.click-invitation p{font-size:10px}}
@media(max-width:600px){.click-invitation{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:18px;margin-bottom:18px}.click-invitation strong{font-size:33px}.click-invitation p{font-size:10px}.scene-start{grid-column:1/-1;width:100%;font-size:18px;padding:14px}}