/* Jome Industries — static retro-desktop website for Cloudflare Pages */
:root {
  color-scheme: dark;
  --background: #1a3046; /* solid background, no gradient or wallpaper */
  --panel: #102236;
  --panel-top: #13283e;
  --border: #719cc5;
  --border-subtle: #365873;
  --text: #b9d7f5;
  --muted: #95b6d4;
  --accent: #81c6fa;
  --pink: #d7a4c8;
  --shadow: #081525;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:320px;background:var(--background);color:var(--text);font:16px/1.42 "Cascadia Mono","Consolas","Liberation Mono",Menlo,monospace;-webkit-font-smoothing:antialiased}
a{color:inherit}
a:focus-visible,summary:focus-visible{outline:2px solid var(--pink);outline-offset:4px}
::selection{background:var(--accent);color:var(--panel)}
.skip-link{position:absolute;left:12px;top:-50px;background:var(--text);color:var(--panel);padding:8px 12px;z-index:5}
.skip-link:focus{top:12px}
.desktop{width:min(1920px,calc(100% - 48px));margin:clamp(18px,2.4vw,45px) auto 26px}
.upper-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:18px;align-items:stretch}
.lower-grid{display:grid;grid-template-columns:minmax(0,1.95fr) minmax(0,1.04fr) minmax(0,.93fr);gap:18px;margin-top:18px;align-items:stretch}
.right-stack{min-width:0;display:grid;grid-template-rows:auto 1fr;gap:18px}
.window{min-width:0;background:var(--panel);border:1px solid var(--border);box-shadow:inset 0 0 0 2px rgba(5,17,28,.5), 0 4px 15px rgba(7,18,29,.13)}
.titlebar{height:35px;padding:0 10px 0 15px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--border);background:var(--panel-top);white-space:nowrap}
.titlebar-title{margin:0;font:inherit;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d3e6fd}
.title-icon{color:var(--accent);font-size:12px}
.window-decor{display:flex;align-items:center;gap:17px;font-size:22px;font-weight:normal;line-height:1;color:#9fcaec;user-select:none}
.window-decor span:first-child{font-size:18px;transform:translateY(-4px)}
.terminal-window{min-height:437px;display:flex;flex-direction:column}
.terminal-inner{display:flex;align-items:center;justify-content:center;gap:24px;flex:1;padding:37px 28px 24px}
.terminal-logo{width:min(40%,196px);height:auto;flex-shrink:0;image-rendering:pixelated;filter:drop-shadow(0 0 12px rgba(99,154,207,.13))}
.terminal-info{min-width:0;font-size:clamp(11px,1.05vw,16px);line-height:1.7;letter-spacing:-.2px}
.prompt{margin:0;color:var(--muted)}
.prompt span{color:var(--pink)}
.terminal-line{color:var(--border);max-width:100%;overflow:hidden;white-space:nowrap;line-height:1.3}
.specs{margin:8px 0 0}
.specs div{display:flex;flex-wrap:wrap;column-gap:7px}
.specs dt{color:var(--muted)}
.specs dd{margin:0;color:var(--text)}
.online{color:var(--accent)}
.cursor{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.swatches{display:grid;grid-template-columns:repeat(7,1fr);width:min(254px,100%);margin-top:22px;height:30px}
.swatches i:nth-child(1){background:#1a3046}.swatches i:nth-child(2){background:#294a6b}.swatches i:nth-child(3){background:#42698f}.swatches i:nth-child(4){background:#5e8fba}.swatches i:nth-child(5){background:#86afd9}.swatches i:nth-child(6){background:#b1d3f5}.swatches i:nth-child(7){background:#d8a8ca}
.terminal-bottom{margin:0 18px 13px;text-transform:uppercase;letter-spacing:1.5px;color:#577fa1;font-size:10px}
.terminal-bottom span{color:var(--accent);margin:0 5px}
.brand-window{min-height:171px}
.brand-inner{min-height:132px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 27px 20px 34px}
.brand-inner h1{font-size:clamp(21px,2.55vw,46px);letter-spacing:2px;font-weight:400;line-height:1.12;color:#94b9e2;margin:0 0 9px;white-space:nowrap;text-shadow:2px 2px 0 #365676}
.brand-inner p{margin:0;color:#93bfe7;font-size:clamp(10px,1.01vw,17px);letter-spacing:clamp(1px,.22vw,3px);white-space:nowrap}
.brand-inner b{font-weight:normal;margin:0 11px;color:#b3c9e1}
.planet{width:74px;height:auto;flex-shrink:0}
.about-window{min-height:246px}
.about-inner{display:flex;align-items:center;gap:28px;padding:19px 26px 15px}
.about-picture{width:150px;height:146px;object-fit:cover;border:1px solid var(--border);image-rendering:pixelated;flex-shrink:0;box-shadow:5px 5px 0 #0b1a2d,-5px -5px 0 #0b1a2d}
.about-copy{min-width:0;font-size:clamp(12px,1.08vw,16px);line-height:1.44}
.about-copy p{margin:0 0 8px}
.action-link{display:inline-block;margin-top:2px;color:var(--accent);text-decoration:none}
.action-link:hover,.hint:hover{color:#d9ecfc}
.action-link span{padding-left:8px}
.projects-window,.links-window,.contact-window{min-height:365px}
.projects-inner{padding:14px 24px 8px}
.project{margin:0 0 10px}
.project summary{list-style:none;display:grid;grid-template-columns:120px minmax(0,1fr) 22px;gap:18px;align-items:center;cursor:pointer}
.project summary::-webkit-details-marker{display:none}
.project summary img{display:block;width:120px;height:73px;border:1px solid var(--border);image-rendering:pixelated;object-fit:cover}
.project-text{display:flex;flex-direction:column;line-height:1.36;min-width:0}
.project-text strong{font-size:15px;font-weight:400;color:#d7e9fb}
.project-text>span{font-size:13px;color:var(--muted)}
.project-arrow{font-size:22px;color:var(--accent);transition:transform .18s}
.project[open] .project-arrow{transform:rotate(90deg)}
.project summary:hover .project-text strong{color:var(--accent)}
.project-detail{margin:9px 0 5px 138px;padding:8px 12px;border-left:2px solid var(--border);font-size:12px;color:var(--muted);background:#19314a}
.hint{font-size:13px;color:var(--accent);margin:12px 0 0}
.link-list{list-style:none;margin:9px 18px;padding:0}
.link-list li{min-width:0}
.link-list a,.link-list li.disabled{display:grid;grid-template-columns:37px minmax(0,1fr) 20px;align-items:center;gap:8px;min-height:49px;border-bottom:1px solid var(--border-subtle);text-decoration:none;font-size:14px;padding:4px 3px}
.link-list li:last-child a,.link-list li:last-child.disabled{border-bottom:0}
.link-list a:hover{background:#1b3651;color:var(--accent)}
.link-icon{width:27px;font-size:25px;font-weight:700;color:#a4c9f0;line-height:1;text-align:center}
.link-icon.pink{color:var(--pink)}
.link-icon.arch{color:var(--accent)}
.external{font-size:22px;text-align:right;color:var(--accent)}
.link-list .disabled{color:#84a0b7}
.link-list small{display:block;font-size:10px;color:#7797b4}
.contact-inner{padding:13px 17px}
.contact-method{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;column-gap:8px;min-height:57px;border-bottom:1px solid var(--border-subtle);font-size:14px}
.contact-icon{font-size:30px;color:#a3caee;text-align:center;grid-row:span 2;line-height:1}
.contact-method small{font-size:10px;color:#7d9cb9;margin-top:-8px}
.contact-note{margin:21px 0 0;border-top:1px solid var(--border);padding:17px 0 0;color:var(--muted);font-size:13px;line-height:1.5}
.site-footer{display:flex;gap:20px;align-items:center;justify-content:space-between;padding:20px 1px 3px;font-size:10px;color:#86a8c5;letter-spacing:.6px;flex-wrap:wrap}
.site-footer nav{display:flex;gap:14px;flex-wrap:wrap}
.site-footer nav a{text-decoration:none}.site-footer nav a:hover{color:var(--accent)}
.footer-star{color:var(--pink)}
/* Keep the larger desktop layout spacious, with fewer columns on laptops. */
@media(max-width:1550px){
  .desktop{width:calc(100% - 40px)}
  .terminal-inner{padding:22px 18px;gap:16px}
  .brand-inner{padding:16px 20px}
  .planet{width:60px}
  .brand-inner b{margin:0 6px}
  .about-inner{gap:17px;padding:18px}
  .about-picture{width:125px;height:132px}
  .lower-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .projects-window{grid-column:1 / -1;min-height:unset}
  .links-window,.contact-window{min-height:320px}
  .project summary{grid-template-columns:120px minmax(0,1fr) 22px;gap:18px}
}
@media(max-width:1100px){
  .upper-grid{grid-template-columns:1fr;gap:16px}
  .right-stack{grid-template-rows:auto auto;gap:16px}
  .brand-window{grid-row:1}
  .terminal-window{min-height:310px}
  .lower-grid{margin-top:16px;gap:16px}
  .brand-inner h1{font-size:clamp(24px,4.4vw,46px)}
  .brand-inner p{font-size:clamp(10px,1.7vw,17px)}
  .terminal-inner{justify-content:center;padding:20px 25px}
  .terminal-info{font-size:clamp(12px,1.6vw,16px)}
  .terminal-logo{width:190px}
  .about-copy{font-size:14px}
}
@media(max-width:760px){
  .desktop{width:calc(100% - 24px);margin-top:12px}
  .upper-grid,.right-stack,.lower-grid{gap:12px}
  .lower-grid{grid-template-columns:1fr;margin-top:12px}
  .projects-window,.links-window,.contact-window{grid-column:auto;grid-row:auto;min-height:unset}
  .projects-inner{padding:14px}
  .site-footer{gap:10px}
}
@media(max-width:620px){
  body{font-size:14px}
  .desktop{width:calc(100% - 20px);margin-top:10px}
  .titlebar{height:33px;padding-left:10px}
  .titlebar-title{font-size:13px}
  .window-decor{gap:9px;font-size:20px}
  .brand-window{min-height:125px}
  .brand-inner{min-height:91px;padding:14px 12px}
  .brand-inner h1{font-size:clamp(19px,5.6vw,33px);letter-spacing:.4px}
  .brand-inner p{letter-spacing:.3px;font-size:clamp(8px,2.4vw,13px)}
  .brand-inner b{margin:0 4px}
  .planet{width:42px}
  .terminal-window{min-height:285px}
  .terminal-inner{gap:8px;padding:14px 10px}
  .terminal-logo{width:37%;min-width:90px}
  .terminal-info{font-size:clamp(10px,2.65vw,13px)}
  .terminal-line{max-width:175px}
  .swatches{height:22px;margin-top:13px}
  .about-inner{padding:14px;gap:14px;align-items:flex-start}
  .about-picture{width:95px;height:115px}
  .about-copy{font-size:12px}
  .about-copy p{margin-bottom:7px}
  .projects-inner{padding:14px}
  .project summary{grid-template-columns:76px minmax(0,1fr) 17px;gap:10px}
  .project summary img{width:76px;height:68px}
  .project-text strong{font-size:13px}
  .project-text>span{font-size:11px}
  .project-arrow{font-size:16px}
  .project-detail{margin-left:86px}
  .link-list{margin:8px 14px}
  .link-list a,.link-list li.disabled{min-height:45px}
  .contact-inner{padding:10px 16px}
  .contact-note{margin-top:15px}
  .site-footer{font-size:9px;padding:12px 4px 15px;gap:9px}
  .site-footer nav{order:3;width:100%;gap:12px}
}
@media(max-width:390px){
  .planet{display:none}
  .brand-inner h1{font-size:clamp(19px,6.2vw,24px)}
  .terminal-logo{min-width:74px}
  .about-picture{width:72px;height:94px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.cursor{animation:none}.project-arrow{transition:none}}