<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>PARK CLOSED</title>
  <style>
    :root{
      --bg-wood:#6b4b2a;
      --plank-dark:#5a3f28;
      --plank-light:#8b5e3c;
      --text:#f7f3ee;
      --accent:#d9534f;
    }
    @media (prefers-color-scheme:dark){
      :root{
        --bg-wood:#2b1d14;
        --plank-dark:#24170f;
        --plank-light:#3b2a1f;
        --text:#fff8f2;
        --accent:#ff6b6b;
      }
    }

    html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;}
    /* Boarded-up background using repeating gradients to simulate planks and nails */
    body{
      min-height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      background:
        radial-gradient(ellipse at 20% 10%, rgba(0,0,0,0.08) 0%, transparent 40%),
        repeating-linear-gradient(90deg, var(--plank-dark) 0 60px, var(--plank-light) 60px 120px),
        linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.02));
      color:var(--text);
      padding:24px;
    }

    .boarded {
      width:100%;
      max-width:1100px;
      padding:48px;
      border-radius:8px;
      text-align:center;
      position:relative;
      box-shadow: 0 12px 40px rgba(2,6,23,0.45);
      overflow:hidden;
    }

    /* darkened vignette to feel abandoned */
    .boarded::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.32));
      pointer-events:none;
    }

    /* Big roughed-up title */
    h1 {
      margin:0;
      font-size:clamp(48px, 12vw, 180px);
      line-height:0.9;
      letter-spacing:6px;
      font-weight:900;
      text-transform:uppercase;
      color:var(--text);
      text-shadow:
        0 2px 0 rgba(0,0,0,0.35),
        0 8px 30px rgba(0,0,0,0.45);
      transform:skewX(-6deg);
      display:inline-block;
      padding:12px 28px;
      background:linear-gradient(180deg, rgba(0,0,0,0.12), rgba(255,255,255,0.02));
      border-radius:6px;
      box-decoration-break: clone;
    }

    /* Painted-on look for the board text */
    .stencil {
      position:relative;
      display:inline-block;
      color:var(--text);
      background:
        repeating-linear-gradient(
          90deg,
          rgba(0,0,0,0.12) 0 2px,
          rgba(255,255,255,0.02) 2px 4px
        );
      -webkit-mask-image: linear-gradient(#000, #000);
    }

    p.lead{
      margin:20px 0 0;
      font-size:18px;
      color:rgba(255,255,255,0.85);
    }

    .actions{
      margin-top:26px;
      display:flex;
      gap:12px;
      justify-content:center;
      align-items:center;
      flex-wrap:wrap;
    }

    .btn {
      background:var(--accent);
      color:white;
      padding:12px 20px;
      border-radius:8px;
      text-decoration:none;
      font-weight:700;
      box-shadow:0 8px 20px rgba(0,0,0,0.32);
    }

    .link {
      color:rgba(255,255,255,0.9);
      text-decoration:underline;
      font-weight:600;
    }

    /* decorative nails */
    .nail{
      width:14px;height:14px;border-radius:50%;
      position:absolute;background:radial-gradient(circle at 35% 30%, #fff8, #0003 40%);
      box-shadow:0 2px 6px rgba(0,0,0,0.6);
      transform:translate(-50%,-50%);
      mix-blend-mode:multiply;
      opacity:0.9;
    }

    /* responsive smaller paddings */
    @media (max-width:720px){
      .boarded{padding:28px}
      p.lead{font-size:15px}
    }
  </style>
</head>
<body>
  <main class="boarded" role="main" aria-labelledby="page-title">
    <!-- decorative nails placed around -->
    <div class="nail" style="left:8%;top:12%;"></div>
    <div class="nail" style="left:92%;top:14%;"></div>
    <div class="nail" style="left:6%;top:86%;"></div>
    <div class="nail" style="left:94%;top:84%;"></div>

    <h1 id="page-title" class="stencil">PARK CLOSED</h1>

    <p class="lead">We're sorry — this page is temporarily closed.</p>

    <div class="actions" role="group" aria-label="navigation">
      <a class="btn" href="/">Home</a>
      <a class="link" href="/search/">Search</a>
      <a class="link" href="/contact/">Contact Us</a>
    </div>
  </main>
</body>
</html>