/* r8cobra.com — solarized dark × international orange
   one sheet, two pages. no webfonts, no frameworks. */

:root{
  /* solarized dark */
  --base03:#002b36; --base02:#073642; --base01:#586e75; --base00:#657b83;
  --base0:#839496;  --base1:#93a1a1;
  --yellow:#b58900; --red:#dc322f; --green:#859900; --cyan:#2aa198;
  /* international orange — aerospace */
  --io:#ff4f00;
  --io-hi:#ff9d3d;   /* sun-top orange, readable at small sizes on dark */
  --hairline:rgba(88,110,117,.25);
  --mono:ui-monospace,'Cascadia Code','JetBrains Mono','Fira Code',Consolas,'SF Mono',monospace;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  min-height:100svh;display:flex;flex-direction:column;
  background:var(--base03);color:var(--base0);
  font-family:var(--mono);overflow-x:hidden;
}
::selection{background:var(--io);color:var(--base03)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ---------- scene ---------- */
.scene{--sun-size:min(40vmin,280px);--sink:70px;
  position:fixed;inset:0;z-index:0;overflow:hidden;
  background:linear-gradient(180deg,#002b36 0%,#01313f 45%,#073642 62%,#0b4150 74%,#0b4150 100%);
}
.stars{position:absolute;inset:0 0 45% 0;background-image:
  radial-gradient(1.5px 1.5px at 12% 22%, rgba(147,161,161,.9), transparent 60%),
  radial-gradient(1px 1px     at 28% 8%,  rgba(131,148,150,.8), transparent 60%),
  radial-gradient(1.5px 1.5px at 44% 30%, rgba(147,161,161,.7), transparent 60%),
  radial-gradient(1px 1px     at 61% 12%, rgba(147,161,161,.9), transparent 60%),
  radial-gradient(1.5px 1.5px at 73% 26%, rgba(131,148,150,.75),transparent 60%),
  radial-gradient(1px 1px     at 86% 9%,  rgba(147,161,161,.85),transparent 60%),
  radial-gradient(1px 1px     at 93% 34%, rgba(131,148,150,.7), transparent 60%),
  radial-gradient(1.5px 1.5px at 7% 44%,  rgba(147,161,161,.6), transparent 60%),
  radial-gradient(1px 1px     at 52% 40%, rgba(131,148,150,.6), transparent 60%),
  radial-gradient(1px 1px     at 81% 47%, rgba(147,161,161,.55),transparent 60%);
}
.glow{position:absolute;left:50%;bottom:38%;transform:translate(-50%,50%);
  width:120vmin;height:60vmin;filter:blur(12px);
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,79,0,.30), rgba(203,75,22,.12) 45%, transparent 70%);
}
/* sky clips at the horizon — sun and halo end exactly at the line,
   and the halo is a radial ring, not a filter, so no box artifact */
.sky{position:absolute;left:0;right:0;top:0;bottom:38%;overflow:hidden}
.halo{position:absolute;left:50%;bottom:calc(var(--sun-size) * -0.45 - var(--sink));
  transform:translateX(-50%);
  width:calc(var(--sun-size) * 1.9);height:calc(var(--sun-size) * 1.9);border-radius:50%;
  background:radial-gradient(circle closest-side,
    transparent 48%, rgba(255,79,0,.5) 53%, rgba(255,79,0,.16) 72%, transparent 100%);
}
.sun{position:absolute;left:50%;bottom:calc(-1 * var(--sink));transform:translateX(-50%);
  width:var(--sun-size);height:var(--sun-size);border-radius:50%;
  background:linear-gradient(180deg,#ff9d3d 0%, var(--io) 45%, var(--red) 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0 56%,transparent 56% 100%),
                     repeating-linear-gradient(180deg,#000 0 11px,transparent 11px 17px);
  mask-image:linear-gradient(180deg,#000 0 56%,transparent 56% 100%),
             repeating-linear-gradient(180deg,#000 0 11px,transparent 11px 17px);
}
.horizon{position:absolute;left:0;right:0;bottom:38%;height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan) 20% 80%,transparent);
  box-shadow:0 0 10px var(--cyan),0 0 28px rgba(42,161,152,.55);opacity:.9;
}

/* grid: perspective on the container, motion on a child transform —
   compositor-friendly, no per-frame background repaint */
.grid{--vline:90px;--hline:64px;
  position:absolute;left:-60vw;right:-60vw;bottom:0;height:38%;
  transform-origin:50% 0;transform:perspective(340px) rotateX(60deg);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 24%);
  mask-image:linear-gradient(180deg,transparent,#000 24%);
  overflow:hidden;
}
.grid-lines{
  position:absolute;left:0;right:0;top:0;height:calc(100% + var(--hline));
  background:
    repeating-linear-gradient(90deg, rgba(42,161,152,.40) 0 2px, transparent 2px var(--vline)),
    repeating-linear-gradient(0deg,  rgba(42,161,152,.40) 0 2px, transparent 2px var(--hline));
  transform:translateY(calc(-1 * var(--hline)));
  animation:drive 4s linear infinite;
  will-change:transform;
}
@keyframes drive{to{transform:translateY(0)}}

.scan{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:.3;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px);
}

/* ---------- content ---------- */
main{position:relative;z-index:2;flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(2rem,7vh,3.5rem);padding:4vh 1rem;text-align:center;
}
h1{font-size:clamp(2.4rem,11vw,5.2rem);font-weight:700;letter-spacing:.02em;color:#fff7f0;
  text-shadow:0 0 1px #fff,0 0 12px rgba(255,79,0,.9),0 0 34px rgba(255,79,0,.55),
              0 2px 22px rgba(0,20,26,.85);
}
h1 .tld{color:#eafffd;font-weight:600;
  text-shadow:0 0 1px #fff,0 0 12px rgba(42,161,152,.9),0 0 34px rgba(42,161,152,.5),
              0 2px 22px rgba(0,20,26,.85);
}
.h1-sub{font-size:clamp(2rem,9vw,3.4rem)}
.back{display:inline-block;margin-bottom:.9rem;color:var(--base0);
  font-size:.85rem;letter-spacing:.1em;text-decoration:none;
  text-shadow:0 1px 12px rgba(0,26,33,.95);
}
.back:hover{color:var(--io)}

/* ---------- card ---------- */
.card{position:relative;width:min(92vw,26rem);text-align:left;
  background:rgba(7,54,66,.66);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(42,161,152,.28);border-radius:12px;
  padding:1.1rem 1.2rem 1.15rem;
  box-shadow:0 10px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(147,161,161,.08);
}
.card::before{content:"";position:absolute;top:0;bottom:0;left:0;width:3px;
  border-radius:12px 0 0 12px;background:linear-gradient(var(--io),var(--red));
}
.card-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem}
.card-head svg{flex:none}
h2{font-size:.95rem;letter-spacing:.14em;color:var(--base1);font-weight:700}
.badge{margin-left:auto;display:inline-flex;align-items:center;gap:.4rem;
  font-size:.78rem;color:var(--base0);white-space:nowrap;
  background:rgba(0,43,54,.55);border:1px solid rgba(88,110,117,.4);
  padding:.28rem .6rem;border-radius:999px;
}
.dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--base01);flex:none}
.dot.on{background:var(--green);box-shadow:0 0 8px var(--green)}
.dot.off{background:var(--base01)}
.dot.unk{background:var(--yellow);box-shadow:0 0 6px rgba(181,137,0,.7)}
.addr{display:flex;gap:.5rem}
.addr code{flex:1;min-width:0;overflow-wrap:anywhere;user-select:all;
  background:#002b36;border:1px solid rgba(88,110,117,.5);border-radius:8px;
  padding:.65rem .8rem;color:var(--base1);font-size:.95rem;letter-spacing:.02em;
}
.btn{background:var(--io);color:#002b36;border:0;border-radius:8px;
  padding:.65rem .95rem;font:inherit;font-weight:700;letter-spacing:.04em;cursor:pointer;
}
.btn:hover{background:#ff6a26}
.btn-ghost{background:transparent;border:1px solid rgba(255,79,0,.5);color:var(--io-hi);
  padding:.45rem .7rem;font-size:.78rem;
}
.btn-ghost:hover{background:var(--io);border-color:var(--io);color:var(--base03)}

.wl{margin-top:.85rem;display:flex;align-items:center;flex-wrap:wrap;gap:.5rem .6rem;
  font-size:.84rem;color:var(--base0);
}
.wl b{color:var(--base1)}
.pill{padding:.2rem .6rem;border:1px solid rgba(255,79,0,.55);border-radius:999px;
  color:var(--io-hi);font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap;
}
.meta{margin-top:.55rem;font-size:.78rem;color:var(--base01);letter-spacing:.05em}

/* ---------- contact rows ---------- */
.card-contact{width:min(92vw,28rem)}
.crow{display:grid;grid-template-columns:5rem minmax(0,1fr) auto;
  gap:.4rem .8rem;align-items:center;padding:.85rem 0;border-top:1px solid var(--hairline);
}
.crow:first-child{border-top:0;padding-top:.1rem}
.clabel{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--base01);
}
.cval{font-family:var(--mono);font-size:.95rem;color:var(--base1);
  overflow-wrap:anywhere;user-select:all;letter-spacing:.02em;
}
.fp span{display:block;letter-spacing:.05em}
.card-foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.4rem 1rem;margin-top:.85rem;padding-top:.85rem;border-top:1px solid var(--hairline);
}
.keylink{color:var(--io-hi);text-decoration:none;font-size:.84rem;font-weight:700}
.keylink:hover{color:var(--io)}
.mailnote{font-size:.72rem;color:var(--base01);letter-spacing:.03em}
@media (max-width:430px){
  .crow{grid-template-columns:minmax(0,1fr) auto}
  .clabel{grid-column:1/-1}
}

/* ---------- footer ---------- */
footer{position:relative;z-index:2;padding:1.1rem;text-align:center;
  color:var(--base01);font-size:.72rem;letter-spacing:.12em;
}
footer a{color:var(--base0);text-decoration:none;border-bottom:1px solid var(--hairline)}
footer a:hover{color:var(--io);border-bottom-color:var(--io)}

@media (prefers-reduced-motion:reduce){.grid-lines{animation:none}}

/* ---------- desktop ---------- */
@media (min-width:900px){
  main{gap:clamp(2.5rem,8vh,4.5rem)}
  h1{font-size:clamp(4.5rem,7vw,7rem);letter-spacing:.03em}
  .h1-sub{font-size:clamp(2.6rem,4vw,4rem)}
  .scene{--sun-size:min(48vmin,460px);--sink:120px}
  .sun{
    -webkit-mask-image:linear-gradient(180deg,#000 0 56%,transparent 56% 100%),
                       repeating-linear-gradient(180deg,#000 0 15px,transparent 15px 23px);
    mask-image:linear-gradient(180deg,#000 0 56%,transparent 56% 100%),
               repeating-linear-gradient(180deg,#000 0 15px,transparent 15px 23px);
  }
  .glow{width:150vmin;height:70vmin}
  .grid{--vline:130px;--hline:88px;transform:perspective(460px) rotateX(60deg)}
  .card{width:32rem;padding:1.35rem 1.5rem 1.4rem}
  .card-contact{width:34rem}
  h2{font-size:1.05rem}
  .badge{font-size:.85rem}
  .addr code{font-size:1.05rem;padding:.75rem .9rem}
  .btn{padding:.75rem 1.1rem}
  .btn-ghost{padding:.5rem .8rem;font-size:.82rem}
  .cval{font-size:1.02rem}
  .wl{font-size:.9rem}
  .meta{font-size:.85rem}
  footer{font-size:.8rem}
}