/*
  sh.kroupa.cc — terminal site (Terminal / monospace)
  Committed dark "CRT shell" world (single theme by design).
*/

:root{
  --bg:#080b0a; --panel:#0c110f; --line:#18211d;
  --fg:#c4cec8; --dim:#5f6f68; --amber:#f2a83a; --cyan:#5cc2cf; --mag:#d76b7f;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code",Menlo,Consolas,monospace;
  --gap:clamp(10px,2.2vw,18px);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--fg); font-family:var(--mono);
  font-size:clamp(13px,1.05vw,15px); line-height:1.65;
  -webkit-font-smoothing:antialiased; letter-spacing:.01em; min-height:100vh;
  background-image:
    radial-gradient(120% 90% at 50% -10%, #0f1714 0%, transparent 55%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px);
}
a{color:var(--cyan);text-decoration:none}
a:hover{color:var(--amber)}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}

.shell{max-width:1120px;margin:0 auto;min-height:100vh;padding:clamp(14px,3vw,30px);
  display:flex;flex-direction:column}
.win{border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),#090d0c);
  border-radius:8px;flex:1;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 30px 80px -40px #000, inset 0 1px 0 rgba(255,255,255,.03)}
.bar{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);
  color:var(--dim);font-size:.82em}
.dot{width:11px;height:11px;border-radius:50%;background:#2a3531}
.dot.r{background:#8a4a44}.dot.y{background:#8a7a3f}.dot.g{background:#4a7a52}
.bar .path{margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .rt{margin-left:auto;white-space:nowrap;color:var(--dim);transition:color .2s}
.bar .rt:hover{color:var(--amber)}
@media(max-width:640px){.bar .path{display:none}}

.body{padding:clamp(16px,3vw,34px);flex:1;overflow-y:auto}
.prompt{color:var(--dim);margin:0}
.prompt b{color:var(--amber);font-weight:400}
.prompt .u{color:var(--cyan)}
.prompt .tld{color:var(--cyan)}
.cmd{color:var(--fg)}
.out{margin:.3em 0 1.9em;color:var(--fg)}
.row{opacity:0;transform:translateY(4px);animation:in .5s forwards}
@keyframes in{to{opacity:1;transform:none}}

h1{font-family:var(--mono);font-size:clamp(1.9em,6vw,3.4em);line-height:1;margin:.15em 0 .1em;
  font-weight:700;letter-spacing:-.02em;color:#eef3f0}
.role{margin:0;color:var(--dim)}
.role .k{color:var(--amber)}
.tag{color:var(--mag)}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-top:.4em}
@media(max-width:820px){.grid{grid-template-columns:repeat(2,1fr)}}
figure{margin:0}
.ph{position:relative;aspect-ratio:1/1;border:1px solid var(--line);border-radius:4px;
  overflow:hidden;cursor:pointer;display:block;padding:0;width:100%;color:inherit;font:inherit;
  transition:transform .25s, border-color .25s, box-shadow .25s;
  background:
    radial-gradient(120% 85% at 28% 18%, hsl(var(--h,20) 42% 34% / .95), transparent 62%),
    radial-gradient(100% 100% at 82% 92%, hsl(var(--h2,30) 46% 24%), transparent 58%),
    linear-gradient(158deg, hsl(var(--h,20) 30% 17%), hsl(var(--h2,30) 34% 9%));}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.ph:not(.has-img)::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.09;mix-blend-mode:overlay;box-shadow:inset 0 0 60px 10px rgba(0,0,0,.55)}
.ph:hover{transform:translateY(-3px);border-color:var(--amber);
  box-shadow:0 16px 34px -18px #000, 0 0 0 1px var(--amber) inset}
figcaption{display:flex;justify-content:space-between;gap:8px;color:var(--dim);
  font-size:.78em;margin-top:7px;letter-spacing:.02em}
figcaption .n{color:var(--amber)}
.plabel{position:absolute;left:7px;top:7px;font-size:.62em;letter-spacing:.14em;z-index:3;
  text-transform:uppercase;color:rgba(255,255,255,.5);background:rgba(0,0,0,.35);
  padding:2px 6px;border-radius:3px;backdrop-filter:blur(2px)}

.links{display:flex;flex-wrap:wrap;gap:10px;margin-top:.3em}
.links a{border:1px solid var(--line);padding:9px 15px;border-radius:5px;color:var(--fg);
  display:inline-flex;gap:9px;align-items:center;transition:border-color .2s,background .2s}
.links a .k{color:var(--dim)}
.links a.primary{border-color:var(--amber);color:var(--amber)}
.links a:hover{border-color:var(--amber);background:rgba(242,168,58,.06);color:var(--amber)}
.cursor{display:inline-block;width:.6em;height:1.05em;background:var(--amber);
  vertical-align:-.16em;margin-left:2px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* lightbox */
.lb{position:fixed;inset:0;background:rgba(4,6,5,.92);display:none;place-items:center;
  z-index:50;padding:4vmin;backdrop-filter:blur(4px)}
.lb.on{display:grid}
.lb .frame{width:fit-content;max-width:min(92vw,860px);margin:0 auto}
.lb .big{cursor:default}
/* show the whole photo, portrait or landscape — no forced crop in the viewer */
.lb .big:not(.has-img){aspect-ratio:3/2;border:1px solid var(--line);border-radius:6px}
.lb .big.has-img{background:none;overflow:hidden;line-height:0;aspect-ratio:auto;
  width:fit-content;border:1px solid var(--line);border-radius:6px}
.lb .big.has-img img{position:static;width:auto;height:auto;
  max-width:min(92vw,860px);max-height:82vh;display:block}
.lb .meta{display:flex;justify-content:space-between;color:var(--dim);margin-top:12px;font-size:.85em}
.lb .meta .n{color:var(--amber)}
.lb .close{position:fixed;top:18px;right:22px;color:var(--dim);background:none;border:0;
  font-family:var(--mono);font-size:1.5em;cursor:pointer}
.lb .close:hover{color:var(--amber)}

@media (prefers-reduced-motion:reduce){
  .row{animation:none;opacity:1;transform:none}
  .cursor{animation:none}
  .ph{transition:none}
}