/* Big Top skin for /honkler/ pages: tent stripes, valance, spotlight, marquee bulbs, poster lettering.
   The cast (Pepes, clown Earth, YOU ARE HERE cloud) comes from clown.world, which is also ours. */
:root{--y:#f1c232;--gold:#f1c232;--red:#b5121b;--deep:#7a0d12;--cream:#fbf5e6;--navy:#1b2552;--blue:#1f3f99;--ink:#1a1410;--paper:#fbf5e6;--dim:#5e5448;--orange:#ff9900}
*{box-sizing:border-box}
html{background:
  linear-gradient(180deg,rgba(25,8,6,.62),rgba(25,8,6,.18) 420px,rgba(25,8,6,.28) 70%,rgba(25,8,6,.55)),
  repeating-linear-gradient(90deg,var(--red) 0 64px,#f2e6cc 64px 128px);background-color:var(--red)}
body{margin:0;color:var(--ink);font:18px/1.5 'Old Standard TT',Georgia,serif}
/* the scalloped valance along the top of the tent */
body:before{content:"";display:block;height:52px;border-top:10px solid var(--deep);
  background:
    radial-gradient(circle at 32px 0,var(--red) 31px,transparent 32px) 0 0/128px 40px repeat-x,
    radial-gradient(circle at 32px 0,#f2e6cc 31px,transparent 32px) 64px 0/128px 40px repeat-x,
    linear-gradient(var(--gold),var(--gold)) 0 0/100% 5px no-repeat;
  filter:drop-shadow(0 5px 3px rgba(0,0,0,.45))}
a{color:var(--blue);text-decoration:none;font-weight:700}a:hover{text-decoration:underline}
.num,.mono{font-family:Consolas,Menlo,monospace;font-variant-numeric:tabular-nums}
.mono{overflow-wrap:anywhere;font-size:14px}
.wrap{max-width:1040px;margin:0 auto;padding:4px 16px 30px;position:relative}

/* circus-poster lettering */
.fx{font-family:Rye,'Old Standard TT',serif;font-weight:400;color:var(--gold);-webkit-text-stroke:1.5px #3a0a0a;paint-order:stroke fill;text-transform:uppercase;letter-spacing:.02em;
  text-shadow:3px 3px 0 var(--deep),6px 6px 0 #000}
h1.fx{font-size:clamp(40px,8.4vw,84px);line-height:1.02;margin:0}
h2.fx{display:table;font-size:clamp(22px,4vw,32px);line-height:1;margin:46px 0 16px;padding:12px 34px 10px;background:var(--navy);-webkit-text-stroke:0;text-shadow:2px 2px 0 #000;
  clip-path:polygon(0 0,100% 0,calc(100% - 16px) 50%,100% 100%,0 100%,16px 50%)}
.tagline{display:table;margin:14px auto 0;padding:8px 18px;max-width:100%;background:var(--navy);border:3px solid var(--gold);border-radius:8px;box-shadow:0 6px 12px rgba(0,0,0,.45);font:italic 700 18px/1.35 'Old Standard TT',Georgia,serif;color:var(--cream);text-align:center}
.tagline a{color:var(--gold)}

/* header: spotlight, clown earth, the cast on their pedestals */
.cw-head{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:6px;padding:24px 0 8px;isolation:isolate}
.cw-head .burst{position:absolute;inset:-10px -16px 0;z-index:-1;background:radial-gradient(ellipse 60% 75% at 50% 42%,rgba(255,238,175,.85),rgba(255,226,140,.35) 45%,rgba(255,226,140,0) 70%)}
.cw-head .mid{text-align:center}
.cw-head .earth{width:min(230px,44vw);display:block;margin:10px auto 0;cursor:pointer;animation:bob 3.2s ease-in-out infinite;filter:drop-shadow(0 8px 6px rgba(0,0,0,.4))}
.cw-head .tent{filter:drop-shadow(0 8px 6px rgba(0,0,0,.4))}
.cast{display:flex;flex-direction:column;align-items:center}
.cast img{width:clamp(90px,15vw,170px);display:block;cursor:pointer;margin-bottom:-6px;position:relative;z-index:1}
/* circus drum pedestals */
.box{width:clamp(84px,13vw,150px);height:clamp(54px,8vw,92px);border:4px solid #2a0a06;border-radius:50%/18%;position:relative;
  background:linear-gradient(180deg,var(--gold) 0 14%,transparent 14% 86%,var(--gold) 86%),repeating-linear-gradient(90deg,var(--red) 0 18px,var(--cream) 18px 36px);box-shadow:0 8px 6px rgba(0,0,0,.4)}
.box.y{background:linear-gradient(180deg,var(--red) 0 14%,transparent 14% 86%,var(--red) 86%),repeating-linear-gradient(90deg,var(--gold) 0 18px,var(--navy) 18px 36px)}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
@media (max-width:620px){.cw-head{grid-template-columns:1fr 1fr}.cw-head .mid{grid-column:1/-1;order:-1}}

/* panels */
.card{background:var(--paper);border:4px solid #2a1a10;border-radius:6px;padding:16px 18px;position:relative;box-shadow:0 10px 18px rgba(0,0,0,.45)}
/* marquee bulbs */
.stripe{border:16px solid var(--deep);border-radius:4px}
.stripe:before{content:"";position:absolute;inset:-16px;pointer-events:none;border-radius:4px;
  background:
    radial-gradient(circle,#fff6cf 0 3px,var(--gold) 4px,transparent 5.5px) 0 0/24px 16px repeat-x,
    radial-gradient(circle,#fff6cf 0 3px,var(--gold) 4px,transparent 5.5px) 0 100%/24px 16px repeat-x,
    radial-gradient(circle,#fff6cf 0 3px,var(--gold) 4px,transparent 5.5px) 0 0/16px 24px repeat-y,
    radial-gradient(circle,#fff6cf 0 3px,var(--gold) 4px,transparent 5.5px) 100% 0/16px 24px repeat-y;
  animation:bulbs 1.4s steps(1) infinite}
@keyframes bulbs{50%{filter:brightness(.62) saturate(.8)}}
.yellow{background:#fff3c9}
.cyan{background:var(--navy);border-color:#0d1230}
.green{background:var(--cream)}
.sign{display:inline-block;background:var(--navy);color:var(--gold);font:400 22px/1 Rye,'Old Standard TT',serif;letter-spacing:.1em;padding:12px 26px 10px;border-radius:8px;border:4px solid var(--gold);box-shadow:0 6px 0 #000,0 10px 16px rgba(0,0,0,.4);text-transform:uppercase}
.signrow{text-align:center;margin:44px 0 0}
.hang{position:relative;margin-top:40px}
.hang:before,.hang:after{content:"";position:absolute;top:-44px;width:5px;height:44px;background:repeating-linear-gradient(180deg,#d9c79c 0 5px,#8a7448 5px 8px)}
.hang:before{left:20%}.hang:after{right:20%}
.lead{font-size:20px;margin:0}
.k{color:var(--dim);font-size:15px;margin:10px 0 0}
.links{display:flex;flex-wrap:wrap;gap:4px 14px;margin:4px 0 0}.links a{white-space:nowrap}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 4px}
.btn{display:inline-block;background:var(--ink);color:#fff;font:400 17px/1 Acme,Impact,sans-serif;letter-spacing:.08em;padding:11px 18px;border-radius:999px;border:3px solid #000;box-shadow:0 4px 0 #000;text-transform:uppercase}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn.y{background:var(--gold);color:#000}.btn.r{background:var(--red)}.btn.b{background:var(--navy)}
.disclaim{margin:22px 0 0;padding:12px 16px;background:#fff8e6;border:4px solid #2a1a10;border-left:12px solid var(--orange);border-radius:6px;font:15px/1.5 'Segoe UI',system-ui,sans-serif;box-shadow:0 10px 18px rgba(0,0,0,.45)}
.disclaim b{color:#c25e00}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px}

.ribbon{display:table;margin:46px auto 0;padding:14px 40px 12px;text-align:center;font:400 clamp(16px,3.4vw,26px)/1.25 Rye,'Old Standard TT',serif;color:var(--gold);background:var(--navy);text-shadow:2px 2px 0 #000;
  clip-path:polygon(0 0,100% 0,calc(100% - 18px) 50%,100% 100%,0 100%,18px 50%)}

/* honk toggle */
.honk{margin-top:12px;background:var(--gold);border:3px solid #000;border-radius:999px;box-shadow:0 4px 0 #000;font:400 16px/1 Acme,Impact,sans-serif;padding:10px 16px;cursor:pointer;letter-spacing:.04em}
@media (min-width:900px){.honk{position:fixed;right:14px;bottom:14px;z-index:20;margin:0}}
.honk[aria-pressed=true]{background:var(--red);color:#fff}

/* footer keeps the house copyright exactly */
.copyright{margin:40px 0 0;padding:18px 16px 16px;background:#111;border-top:6px solid var(--gold);text-align:center;font:13px/1.5 'Segoe UI',system-ui,sans-serif;color:#ff9900}
.copyright a{color:inherit;text-decoration:none;font-weight:400}.copyright a:hover{text-shadow:0 0 8px #ffcc66}
.copyright em{color:#ffcc66;font-style:normal;opacity:.85}
@media (prefers-reduced-motion:reduce){.cw-head .earth,.stripe:before{animation:none}}

/* project links under the tagline */
.projects{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:14px 0 0}
.projects a{background:var(--cream);color:var(--navy);border:3px solid #000;border-radius:999px;box-shadow:0 3px 0 #000;padding:5px 14px;font:400 15px/1.2 Acme,Impact,sans-serif;letter-spacing:.04em;white-space:nowrap}
.projects a:hover{text-decoration:none;background:var(--gold)}