:root{
    --forest:#1F2E17; --olive:#A6A86B; --safety:#F2C200; --cream:#F5F1E6;
    --link:#0000EE; --visited:#551A8B; --pink:#FF1493; --lime:#32CD32; --cyan:#00FFFF;
    --wood:#6b4423; --wood-dark:#3b2413; --wood-light:#7a4f2a;
    --comic:"Comic Sans MS","Chalkboard SE","Comic Neue",cursive;
    --times:"Times New Roman",Times,serif;
    --mono:"Courier New",Courier,monospace;
  }

  html{background:var(--wood);}
  body{
    margin:0; padding:0 10px 96px;
    background-color:var(--wood);
    background-image:
      repeating-linear-gradient(90deg, rgba(0,0,0,.30) 0 2px, transparent 2px 5px),
      repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 11px),
      repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 1px, transparent 1px 190px),
      repeating-linear-gradient(90deg, var(--wood) 0 56px, var(--wood-dark) 56px 60px,
        var(--wood-light) 60px 118px, var(--wood-dark) 118px 122px);
    background-attachment:fixed;
    font-family:var(--times); font-size:16px; color:#111; text-align:center;
  }

  /* ---------- THE HAZARD BANNER. Highest value pixels on the site. ---------- */
  .alarm{
    max-width:820px; margin:0 auto; box-sizing:border-box;
    background:#111; border:5px solid var(--safety);
    border-top:0;
    padding:0 0 12px;
  }
  .alarm .stripe{height:16px; background:repeating-linear-gradient(45deg,var(--safety) 0 16px,#111 16px 32px);}
  .alarm .msg{
    font-family:var(--comic); color:var(--safety);
    font-size:19px; line-height:1.35; padding:14px 16px 4px; margin:0;
  }
  .alarm .sub{font-family:var(--times); color:#e8e2cd; font-size:14px; margin:6px 16px 0;}
  .alarm b{color:#fff;}

  .page{
    width:820px; max-width:100%; margin:14px auto 0;
    background:var(--cream);
    border:6px outset #d8d2bd;
    box-shadow:6px 6px 0 rgba(0,0,0,.45);
    padding:10px 16px 22px; box-sizing:border-box;
  }

  a{color:var(--link); text-decoration:underline;}
  a:visited{color:var(--visited);}
  a:hover{color:var(--pink);}
  a:focus-visible{outline:3px solid var(--pink); outline-offset:2px;}

  h1,h2,h3,.comic{font-family:var(--comic);}
  h1{margin:6px 0 0;}
  h2{font-size:30px; color:var(--forest); margin:6px 0 2px; text-shadow:1px 1px 0 var(--safety);}
  h3{font-size:21px; color:#7a1f1f; margin:14px 0 4px;}
  p{margin:.6em 0; line-height:1.5;}

  /* mismatched on purpose. do not normalize. */
  #notice h2{font-size:36px; color:#c00; text-shadow:2px 2px 0 var(--safety);}
  #lawn h2{font-size:26px; color:var(--safety); text-shadow:2px 2px 0 #000;}
  #opinions h2{font-size:34px; color:#7a1f1f; text-shadow:1px 1px 0 var(--cyan);}
  #guestbook h2{font-size:24px; color:#000080; text-shadow:none;}
  #safety h2{font-size:33px; color:#a00; text-shadow:1px 1px 0 var(--safety);}

  .wordart{
    display:block; font-family:var(--comic); font-size:58px; line-height:1.05;
    font-weight:bold; letter-spacing:1px; transform:skewY(-1.5deg);
    background:linear-gradient(180deg,#ff2d2d 0%,#ff9d00 18%,#ffe600 36%,#38d430 54%,#12a5ff 72%,#8a2be2 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    -webkit-text-stroke:2px #1a1a1a; paint-order:stroke fill;
    filter:drop-shadow(3px 3px 0 rgba(0,0,0,.55));
  }
  .wordart-sub{display:block; font-family:var(--comic); font-size:19px; color:#000080; margin:4px 0 0; transform:skewY(-1.5deg);}
  .wordart-subsub{font-family:var(--times); font-size:14px; font-style:italic; color:#555; margin:5px 0 10px;}

  .hr{
    height:8px; margin:20px 0; border:1px solid #333;
    background:linear-gradient(90deg,#ff0000,#ff8c00,#ffd700,#32cd32,#00bfff,#8a2be2,#ff1493,#ff0000);
    background-size:200% 100%; animation:slide 6s linear infinite;
  }
  @keyframes slide{from{background-position:0 0}to{background-position:200% 0}}

  .marquee{
    overflow:hidden; white-space:nowrap; background:#000080; color:var(--safety);
    border:3px ridge var(--cyan); font-family:var(--comic); font-size:17px; padding:5px 0; margin:10px 0;
  }
  .marquee span{display:inline-block; padding-left:100%; animation:march 34s linear infinite;}
  @keyframes march{to{transform:translateX(-100%)}}

  .blink{animation:bl 1s steps(1) infinite; font-weight:bold;}
  @keyframes bl{50%{opacity:0}}

  .counter{
    display:inline-block; background:#000; border:3px inset #888; padding:4px 6px;
    font-family:var(--mono); font-size:22px; font-weight:bold; letter-spacing:3px;
    color:#ff8800; text-shadow:0 0 6px #ff5500;
  }
  .counter.flash{animation:cf .35s steps(1) 3;}
  @keyframes cf{50%{color:#fff; text-shadow:0 0 10px #fff}}
  .counter-cap{font-family:var(--comic); font-size:15px; color:#000080; margin:6px 0 2px;}

  .faxjump{margin:10px 0 2px;}
  .faxjump a{font-family:var(--comic); font-size:15px; color:#000080 !important; text-decoration:none; background:#fffbe6; border:3px outset var(--safety); padding:5px 12px; display:inline-block; animation:bl 1.4s steps(1) infinite;}
  .faxjump a:hover{background:var(--safety);}

  .statusbar{
    position:fixed; left:0; right:0; bottom:0; z-index:800;
    background:#d4d0c8; border-top:2px solid #fff; box-shadow:inset 0 1px 0 #808080;
    font-family:Arial,Helvetica,sans-serif; font-size:13px; color:#333;
    padding:5px 12px; text-align:center; line-height:1.4;
  }
  .statusbar b{color:#000;}
  .statusbar a{color:#00008b !important;}
  @media(max-width:600px){
    .statusbar{font-size:12px; padding:5px 8px;}
    .wordart{font-size:clamp(34px, 11vw, 48px); line-height:1; -webkit-text-stroke-width:1.5px;}
    .wordart-sub{font-size:17px;}
    h2{font-size:25px;}
    table.op, table.op tbody, table.op tr, table.op td{display:block; width:100%; box-sizing:border-box;}
    table.op thead{position:absolute; left:-9999px;}
    table.op tr{margin-bottom:12px; border:2px solid #999;}
    table.op td{border:0;}
    table.op td:first-child{width:100%; background:#f0efe2;}
  }
  @media(max-width:900px){
    body{padding-left:8px; padding-right:8px;}
    .page{border-width:4px; padding-left:14px; padding-right:14px;}
    .langsel{position:static; margin:0 0 8px; text-align:center;}
    .nav{gap:8px;}
  }

  .social-top{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:12px 0 8px;}
  .social-top a{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border:3px outset var(--olive);background:#eef0cf;color:#000 !important;font-family:var(--comic);font-size:14px;text-decoration:none;}
  .social-top a:hover{background:var(--safety);}
  .social-top svg{width:18px;height:18px;fill:currentColor;flex:none;}

  .langbar{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:10px 0 2px;}
  .langbar a{text-decoration:none;padding:3px 9px;border:2px outset var(--olive);background:#eef0cf;color:#000 !important;font-family:var(--comic);font-size:13px;}
  .langbar a.on{background:var(--safety);}
  .langbar a:hover{background:var(--safety);}
  .langsel{position:absolute; top:10px; right:12px;}
  .langsel select{font-family:var(--comic); font-size:13px; color:#000; background:#eef0cf; border:2px outset var(--olive); padding:3px 6px; cursor:pointer;}
  header{position:relative;}

  .nav{display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:12px 0 6px;}
  .nav a{
    font-family:var(--comic); font-size:14px; text-decoration:none; color:#000 !important;
    background:linear-gradient(180deg,var(--olive),#8b8d52);
    border:3px outset var(--olive); padding:6px 10px; display:inline-block;
  }
  .nav a:active{border-style:inset;}
  .nav a:hover{background:linear-gradient(180deg,var(--safety),#c99e00);}
  .nav a.hot{background:linear-gradient(180deg,#e04040,#a01818); color:#fff !important; border-color:#e04040;}

  .new{
    display:inline-block; vertical-align:middle; width:54px; height:54px;
    background:#e00000; color:#fff; font-family:var(--comic); font-size:13px;
    font-weight:bold; line-height:54px; margin:0 4px;
    clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
    animation:bl 1s steps(1) infinite;
  }

  .stamp{
    display:inline-block; padding:5px 10px; margin:4px 6px;
    border:4px double #9b1c1c; color:#9b1c1c; background:#fffdf3;
    font-family:var(--mono); font-size:14px; font-weight:bold;
    letter-spacing:2px; text-transform:uppercase; transform:rotate(-2deg);
  }
  .file-links{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:12px 0;}
  .file-links a{font-family:var(--comic); background:#d4d0c8; color:#000!important; border:3px outset #d4d0c8; padding:7px 10px; text-decoration:none;}
  .file-links a:active{border-style:inset;}

  .sec{padding:4px 0 8px;}
  .box{border:3px double #444; background:#fffdf3; padding:12px 16px; text-align:left; margin:10px 0;}
  .box.danger{border:5px double #c00; background:#fff6f6;}

  .cols{display:flex; gap:18px; align-items:flex-start; text-align:left;}
  .col-l{flex:0 0 300px;}
  .col-r{flex:1; margin-top:7px; margin-left:-4px;} /* it has always been misaligned */
  @media(max-width:700px){ .cols{display:block} .col-l{margin:0 auto 14px} .col-r{margin:0} }

  .hero{margin:14px 0 4px;}
  .hero img{width:300px; max-width:78%; height:auto; border:6px ridge var(--safety); box-shadow:4px 4px 0 rgba(0,0,0,.4);}
  .hero-cap{font-family:var(--times); font-size:14px; font-style:italic; color:#444; max-width:440px; margin:8px auto 0; line-height:1.5;}
  .shield{width:120px; height:auto; margin:10px auto 0; display:block;}

  /* ---------- PHOTOS ---------- */
  .photo-grid{display:flex; flex-wrap:wrap; gap:14px; justify-content:center;}
  .photo-grid figure{margin:0; width:190px;}
  .photo-grid img{width:100%; height:auto; border:4px ridge #bbb; display:block;}
  .ph-cap{font-family:var(--times); font-size:13px; font-style:italic; color:#444; margin:4px 0 0;}

  /* ---------- LAWN ---------- */
  #lawn .box{background:var(--forest); color:var(--cream); border:0; padding:0;}
  .hazard{height:14px; background:repeating-linear-gradient(45deg,var(--safety) 0 14px,#111 14px 28px);}
  .lawn-body{padding:14px 18px;}
  #lawn h3{color:var(--safety); border-bottom:1px solid #4a5a3a; padding-bottom:3px;}
  #lawn ul{margin:.4em 0; padding-left:20px;}
  #lawn li{margin:.25em 0;}
  .stencil{font-family:var(--comic); font-size:13px; letter-spacing:2px; color:var(--olive); text-transform:uppercase;}

  /* ---------- OPINIONS ---------- */
  table.op{border-collapse:collapse; width:100%; background:#fff; font-size:15px; text-align:left;}
  table.op th{background:#000080; color:var(--safety); font-family:var(--comic); padding:6px 8px; border:2px solid #333;}
  table.op td{border:2px solid #999; padding:6px 8px; vertical-align:top;}
  table.op tr:nth-child(even) td{background:#f0efe2;}
  table.op td:first-child{width:34%; font-weight:bold; font-family:var(--comic); color:#7a1f1f;}
  .dale img{width:100%; max-width:230px; border:4px ridge #999; height:auto;}

  /* ---------- FAQ ---------- */
  .faq{text-align:left;}
  .faq dt{font-family:var(--comic); font-size:19px; color:#a00; margin:16px 0 2px; padding-left:26px; position:relative;}
  .faq dt::before{content:"Q:"; position:absolute; left:0; color:#000080;}
  .faq dd{margin:0 0 6px 26px; line-height:1.55;}

  /* ---------- FAX ---------- */
  .faxbox{background:#e9e6d8; border:3px inset #ccc; padding:14px; text-align:center;}
  .faxmachine{position:relative; display:inline-block; width:220px;}
  .faxmachine.printing{animation:shudder .12s steps(2) infinite;}
  @keyframes shudder{50%{transform:translate(1px,-1px)}}
  .paper{max-height:0; overflow:hidden; transition:max-height .9s ease-out; background:#fff; border:1px solid #bbb; border-top:0; width:230px; margin:0 auto; text-align:left;}
  .paper.out{max-height:420px;}
  .paper-inner{padding:10px 10px 16px; font-family:var(--mono); font-size:12px; line-height:1.45; color:#222;}
  .paper-hdr{border-bottom:1px dashed #999; padding-bottom:5px; margin-bottom:8px; font-size:10px; color:#666; white-space:pre-line;}
  .paper-sig{display:flex; align-items:center; gap:8px; margin-top:10px; border-top:1px dashed #999; padding-top:8px;}
  .paper-sig img{width:38px; height:38px; border:1px solid #999; filter:grayscale(1) contrast(1.5);}
  .paper-sig b{font-family:var(--comic); font-size:13px; color:#000;}
  .torn{height:8px; background:repeating-linear-gradient(135deg,#fff 0 5px,transparent 5px 10px), #ddd; margin:0 auto; width:230px;}
  .faxbox textarea{width:100%; max-width:420px; box-sizing:border-box; height:60px; font-family:var(--mono); font-size:14px; border:2px inset #ccc; padding:6px; margin:10px 0 6px;}

  /* ---------- GUESTBOOK ---------- */
  .gb{background:#fff; border:3px inset #ccc; padding:10px 14px; text-align:left;}
  .gb .entry{border-bottom:1px dashed #bbb; padding:7px 0;}
  .gb .entry:last-child{border-bottom:0;}
  .gb .who{font-family:var(--comic); color:#000080; font-size:14px;}
  .gb .when{font-family:var(--mono); font-size:11px; color:#888;}
  .gb .pending{font-family:var(--mono); font-size:10px; color:#c07000;}
  .gb textarea{width:100%; box-sizing:border-box; height:56px; font-family:var(--times); font-size:15px; border:2px inset #ccc; padding:6px; margin-top:8px;}
  .btn95{font-family:var(--comic); font-size:15px; background:#d4d0c8; border:3px outset #d4d0c8; padding:5px 14px; cursor:pointer; color:#000;}
  .btn95:active{border-style:inset;}

  /* ---------- FURNITURE ---------- */
  .uc{background:repeating-linear-gradient(45deg,var(--safety) 0 16px,#111 16px 32px); padding:10px; border:3px outset #999; margin:16px 0;}
  .uc-inner{background:var(--cream); padding:12px; border:2px solid #000;}
  .uc h3{margin:6px 0 2px; color:#000; font-size:22px;}
  .digger{width:90px; height:70px;}
  .digger .arm{transform-origin:52px 30px; animation:dig 1.4s ease-in-out infinite;}
  @keyframes dig{0%,100%{transform:rotate(-18deg)} 50%{transform:rotate(28deg)}}

  .awards{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:12px 0;}
  .award{width:150px; padding:8px 6px; border:4px ridge var(--safety); background:linear-gradient(180deg,#fffbe6,#e8dfae); font-family:var(--comic); font-size:11px; color:#5a4a00; line-height:1.25;}
  .award b{display:block; font-size:13px; color:#7a1f1f; margin-bottom:2px;}

  .badge{display:inline-block; margin:6px 4px; font-family:var(--mono); font-size:11px; background:#000; color:var(--lime); border:2px outset #666; padding:5px 8px;}
  .badge.ns{background:#0a0a5a; color:#fff;}
  .webring{border:3px groove var(--olive); background:#eef0dd; padding:10px; margin:14px 0; font-family:var(--comic); font-size:14px;}
  .webring .ring-name{color:var(--forest); font-size:15px; display:block; margin-bottom:5px;}

  footer{margin-top:18px; padding-top:10px; border-top:2px solid #999;}
  .lockup{width:190px; height:auto; margin:8px auto 4px; display:block;}
  .smallprint{
    text-align:left; background:#eee; border:1px solid #bbb; padding:12px 14px; margin:16px 0 8px;
    font-family:Arial,Helvetica,sans-serif; font-size:11.5px; line-height:1.6; color:#555;
  }
  .smallprint b{color:#333;}
  .smallprint .sp-head{font-size:12px; letter-spacing:1px; text-transform:uppercase; color:#333; display:block; margin-bottom:6px;}
  .smallprint.loud{background:#fff4f4; border:2px solid #c00;}
  .smallprint.loud .sp-head{color:#c00;}
  .smallprint img{width:80px; height:auto; border:1px solid #bbb; float:left; margin:2px 12px 6px 0;}
  .copy{font-size:12px; color:#777; margin-top:10px;}

  .music{position:fixed; right:12px; bottom:44px; z-index:850; text-align:right;}
  .nowplaying{display:none; margin-top:5px; background:#000; color:var(--lime); font-family:var(--mono); font-size:11px; border:2px inset #666; padding:3px 6px; max-width:190px; overflow:hidden; white-space:nowrap;}
  .nowplaying span{display:inline-block; padding-left:100%; animation:march 9s linear infinite;}

  .scrim{display:none; position:fixed; inset:0; z-index:900; background:rgba(0,0,0,.35); align-items:center; justify-content:center;}
  .scrim.on{display:flex;}
  .dlg{width:360px; max-width:92vw; background:#d4d0c8; border:3px outset #fff; box-shadow:5px 5px 0 rgba(0,0,0,.5); font-family:Arial,Helvetica,sans-serif; text-align:left;}
  .dlg-bar{background:linear-gradient(90deg,#000080,#1084d0); color:#fff; font-weight:bold; font-size:13px; padding:4px 7px; display:flex; justify-content:space-between;}
  .dlg-body{padding:16px 14px; font-size:14px; color:#000;}
  .dlg-foot{padding:0 14px 14px; text-align:center;}

  .sparkle{position:fixed; z-index:999; pointer-events:none; font-family:var(--mono); font-weight:bold; font-size:15px; animation:sp .7s linear forwards;}
  @keyframes sp{from{opacity:1; transform:translate(-50%,-50%) scale(1.15)} to{opacity:0; transform:translate(-50%,10px) scale(.4)}}

  .env{display:inline-block; width:34px; height:24px; animation:spin 3.2s linear infinite; vertical-align:middle;}
  @keyframes spin{to{transform:rotateY(360deg)}}

  @media(prefers-reduced-motion:reduce){
    .hr,.marquee span,.blink,.new,.digger .arm,.env,.nowplaying span,.sparkle,.counter.flash,.faxmachine.printing,.faxjump a{animation:none !important;}
    .marquee span{padding-left:0;}
    .paper{transition:none;}
  }

/* ---------- SITE DIRECTORY (added when the site went multi-page) ---------- */
.dir{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin:14px 0; text-align:left;}
.dir a{display:block; text-decoration:none; background:#fffdf3; border:4px outset var(--olive); padding:12px 14px; color:#000 !important;}
.dir a:hover{background:var(--safety); border-color:var(--safety);}
.dir a:active{border-style:inset;}
.dir b{display:block; font-family:var(--comic); font-size:18px; color:var(--forest); margin-bottom:3px;}
.dir span{font-family:var(--times); font-size:13.5px; font-style:italic; color:#555; line-height:1.4;}
.records{border:3px double #666; background:#efede2; padding:14px 16px; text-align:left; margin:10px 0;}
.records h3{color:#333; margin-top:2px;}
.records ul{margin:.4em 0; padding-left:20px; line-height:1.7;}
.crumb{font-family:var(--comic); font-size:14px; margin:10px 0 2px; text-align:left;}
.crumb a{color:#000080 !important;}
.subnav{display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:16px 0 6px; padding-top:12px; border-top:2px solid #999;}
.subnav a{font-family:var(--comic); font-size:13px; text-decoration:none; color:#000 !important; background:linear-gradient(180deg,var(--olive),#8b8d52); border:3px outset var(--olive); padding:5px 9px;}
.subnav a:hover{background:linear-gradient(180deg,var(--safety),#c99e00);}
.subnav a:active{border-style:inset;}
.pagehead .shield{width:90px; margin-top:4px;}
.pagehead .wordart{font-size:44px;}
@media(max-width:600px){ .pagehead .wordart{font-size:clamp(30px,10vw,40px);} }

/* subpages: statusbar sits in flow instead of pinned */
.statusbar.inflow{position:static; margin:16px -10px -0px; border-bottom:2px solid #808080;}
body.nofix{padding-bottom:14px;}