:root{
  --bg:#07111f;
  --panel:#0b1727;
  --cream:#f1eadf;
  --muted:#8994a2;
  --line:rgba(241,234,223,.15);
  --orange:#ff531c;
  --orange-dark:#ce3710;
  --orange-soft:#ff7b4c;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%}
body{
  overflow:hidden;
  background:var(--bg);
  color:var(--cream);
  font-family:"Courier New", Courier, monospace;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit}
.page{
  width:100%;
  height:100dvh;
  padding:10px;
  display:grid;
  grid-template-rows:46px minmax(0,1fr) 26px;
  gap:8px;
  background:
    radial-gradient(circle at 82% 12%, rgba(255,83,28,.12), transparent 24%),
    linear-gradient(180deg,#07111f 0%,#040a13 100%);
}
.nav,.footer{
  border:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 14px;
}
.logo{
  font-family:Arial Black,Arial,sans-serif;
  font-size:15px;
  font-style:italic;
  letter-spacing:-.03em;
}
.nav-center,.footer{
  color:var(--muted);
  font-size:8px;
  font-weight:700;
  letter-spacing:.16em;
}
.nav-x{justify-self:end;font-size:9px;font-weight:900}
.stage{
  min-height:0;
  display:grid;
  grid-template-columns:minmax(320px,.78fr) minmax(0,1.5fr);
  gap:8px;
}
.copy-panel{
  min-height:0;
  border:1px solid var(--line);
  background:
    linear-gradient(180deg,rgba(255,255,255,.015),transparent),
    #081424;
  padding:clamp(18px,2.6vw,38px);
  display:flex;
  flex-direction:column;
}
.stamp{
  align-self:flex-start;
  padding:6px 9px;
  border:1px solid rgba(255,83,28,.45);
  color:#ff916a;
  font-size:8px;
  font-weight:900;
  letter-spacing:.18em;
}
h1{
  margin:clamp(22px,4vh,48px) 0 0;
  font-family:Arial Black,Impact,Haettenschweiler,sans-serif;
  font-size:clamp(64px,8.8vw,140px);
  font-style:italic;
  line-height:.68;
  letter-spacing:-.075em;
  text-transform:uppercase;
  transform:skewX(-4deg);
  transform-origin:left center;
}
h1 span{
  color:transparent;
  -webkit-text-stroke:2px var(--orange);
  text-stroke:2px var(--orange);
}
.tagline{
  margin:24px 0 0;
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(12px,1.2vw,16px);
  font-weight:900;
  line-height:1.45;
  letter-spacing:.1em;
}
.actions{
  margin-top:28px;
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr .8fr;
  gap:10px;
}
.action{
  position:relative;
  isolation:isolate;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 18px;
  border-radius:999px;
  border:1px solid rgba(241,234,223,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 42%),
    linear-gradient(180deg, rgba(16,36,59,.95), rgba(9,22,37,.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 8px 18px rgba(0,0,0,.24);
  font-family:Arial,Helvetica,sans-serif;
  font-size:10px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.action::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  background:linear-gradient(120deg, rgba(255,255,255,.08), rgba(255,255,255,0) 38%, rgba(255,83,28,.06) 100%);
  opacity:.9;
  z-index:-1;
}
.action:hover{
  transform:translateY(-2px);
  border-color:rgba(255,123,76,.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.24),
    0 12px 24px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,83,28,.10);
}
.action:active{transform:translateY(0)}
.action-primary{
  color:#08111f;
  border-color:rgba(255,123,76,.45);
  background:
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0) 36%),
    linear-gradient(180deg, #ff7d4c 0%, var(--orange) 55%, var(--orange-dark) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(110,22,0,.45),
    0 10px 24px rgba(255,83,28,.28);
}
.action-primary::before{
  background:linear-gradient(135deg, rgba(255,255,255,.42), rgba(255,255,255,0) 46%);
}
.action-primary:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.36),
    inset 0 -1px 0 rgba(110,22,0,.48),
    0 14px 28px rgba(255,83,28,.36);
}
.action:not(.action-primary):not(.is-disabled){
  color:var(--cream);
}
.action#fomoBtn,
.action[href*="fomo"],
.action[data-variant="accent"]{
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 45%),
    linear-gradient(180deg, rgba(255,100,48,.22), rgba(255,83,28,.11));
  border-color:rgba(255,123,76,.35);
}
.nav-x,
#topX{
  transition:opacity .18s ease;
}
.nav-x:hover,
#topX:hover{opacity:.8}
.is-disabled{
  opacity:.38;
  cursor:default;
  filter:saturate(.72);
}
.contract{
  margin-top:14px;
  padding:13px;
  border:1px solid var(--line);
  background:#050d18;
}
.contract-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--muted);
  font-size:8px;
  font-weight:900;
  letter-spacing:.17em;
}
.contract-top button{
  border:1px solid rgba(255,123,76,.28);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 45%), #0f2237;
  color:#ff9b75;
  padding:7px 12px;
  font-size:8px;
  font-weight:900;
  letter-spacing:.14em;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 8px 14px rgba(0,0,0,.18);
}
.contract code{
  display:block;
  margin-top:9px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-family:inherit;
  font-size:11px;
  font-weight:700;
}
.note{
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:8px;
  font-weight:900;
  letter-spacing:.15em;
}
.gallery{
  min-height:0;
  display:grid;
  place-items:center;
  padding:clamp(12px,1.3vw,20px);
  border:1px solid var(--line);
  background:
    radial-gradient(circle at 75% 20%, rgba(255,83,28,.10), transparent 26%),
    #081526;
}
.photo{
  position:relative;
  width:min(100%, calc((100dvh - 126px) * 16 / 9));
  aspect-ratio:16 / 9;
  overflow:hidden;
  border:1px solid rgba(241,234,223,.18);
  background:#071426;
  box-shadow:0 24px 70px rgba(0,0,0,.34);
}
.photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.photo::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}
.photo-featured::before{
  content:"FURFROG / 01";
  position:absolute;
  z-index:2;
  left:12px;
  top:12px;
  padding:6px 8px;
  background:rgba(7,17,31,.78);
  border:1px solid rgba(255,255,255,.16);
  color:#f1eadf;
  font-size:8px;
  font-weight:900;
  letter-spacing:.14em;
  backdrop-filter:blur(6px);
}
.footer{grid-template-columns:1fr auto 1fr;border-color:var(--line)}
.footer span:last-child{justify-self:end;color:#ff8a61}
@media(max-width:900px){
  body{overflow:auto}
  .page{height:auto;min-height:100dvh;grid-template-rows:44px auto 24px;padding:6px;gap:6px}
  .stage{grid-template-columns:1fr}
  .copy-panel{min-height:500px}
  .gallery{min-height:0;padding:10px}
}
@media(max-width:620px){
  .nav-center{display:none}
  .nav{grid-template-columns:1fr auto}
  .copy-panel{padding:18px;min-height:460px}
  h1{font-size:58px}
  .actions{grid-template-columns:1fr 1fr}
  .gallery{min-height:0;padding:8px}
  .photo{width:100%;aspect-ratio:16/9}
  .footer{grid-template-columns:1fr auto}
  .footer span:nth-child(2){display:none}
}