:root{--bg:#050609;--ink:#eee7dd;--muted:#948d88;--lav:#c9a7ff;--pink:#eaa4cf;--blue:#8fcfe2;--sage:#bad6a5;--amber:#dfb47c;--paper:#cbb99e;--paper2:#b5a082;--line:#ffffff14}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#050609;color:var(--ink);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden;background-image:radial-gradient(circle at 12% 30%,#6f558013,transparent 31%),radial-gradient(circle at 86% 45%,#416e7912,transparent 34%)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:80;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E")}
a{color:inherit}.site-header{height:60px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;position:fixed;top:0;left:0;right:0;z-index:60;background:#050609c9;backdrop-filter:blur(15px);border-bottom:1px solid var(--line)}
.brand{font:700 14px Georgia,serif;letter-spacing:.13em;text-decoration:none;color:#e6d7ff;text-shadow:0 0 8px #b982ff55}nav{display:flex;gap:26px}nav a{font-size:9px;letter-spacing:.18em;text-decoration:none;color:#aaa4ad;padding:22px 0 17px;border-bottom:1px solid transparent}nav a:hover,nav .active{color:#ead9fa;border-color:#b995dc;text-shadow:0 0 8px #c59cff66}.new-story{border:1px solid #a989b766;background:#100b12;color:#dbc6e2;font-size:8px;letter-spacing:.14em;padding:9px 12px;border-radius:4px;cursor:pointer;box-shadow:0 0 12px #8b62931c}
.patio-hero{height:650px;position:relative;overflow:hidden;background:url('assets/bar-hill-hero.jpg') center 42%/cover no-repeat;border-bottom:1px solid #ffffff11}.patio-hero:after{content:"";position:absolute;inset:auto 0 0;height:210px;background:linear-gradient(transparent,#050609 94%)}.night-wash{position:absolute;inset:0;background:linear-gradient(90deg,#050609d9 0%,#05060972 30%,#0506092d 58%,#0506098c 100%),linear-gradient(180deg,#05050a88,transparent 32%,#05060975)}
.patio-logo{position:absolute;z-index:2;left:4vw;top:92px;font:italic 52px/.77 Georgia,serif;transform:rotate(-2deg)}.patio-logo span{display:block}.patio-logo span:first-child{color:#edc0a0;text-shadow:0 0 8px #b77b6e,0 0 22px #8b526977}.patio-logo span:nth-child(2){color:#bad79d;text-shadow:0 0 8px #8ba97c,0 0 22px #5e867477}.patio-logo b{display:block;margin:20px 0 0 40px;color:#c7a8da;font-style:normal;font-size:40px;text-shadow:0 0 9px #9679ad77}
.patio-copy{position:absolute;z-index:3;left:4vw;bottom:66px;width:min(390px,32vw);padding:18px 19px;background:linear-gradient(135deg,#090a0dcc,#0c0910b8);border:1px solid #b89ac72e;backdrop-filter:blur(9px);box-shadow:0 16px 42px #0007}.eyebrow{font-size:8px;letter-spacing:.2em;color:#9cc9d4;font-weight:700}.glow{text-shadow:0 0 9px #76c5d155}.patio-copy h1{font:400 clamp(30px,3.6vw,50px)/.98 Georgia,serif;margin:11px 0;color:#e8dfd8}.patio-copy h1 em{color:#d7a5ca;font-weight:400}.patio-copy p{font:13px/1.55 Georgia,serif;color:#bdb5b7;margin:0 0 17px}.patio-copy button,.rail-post{border:1px solid #a689b977;background:#100c13;color:#d9c3e1;padding:10px 12px;font-size:8px;letter-spacing:.16em;cursor:pointer;box-shadow:0 0 12px #8b67972a}
.quiet-sign{position:absolute;z-index:2;right:4vw;top:102px;border:1px solid #9fb39a66;background:#08090cad;padding:14px 17px;text-align:center;font:italic 14px/1.65 Georgia,serif;color:#b9d4a6;box-shadow:0 0 16px #72936d22}.quiet-sign i{font-style:normal;color:#d7a8ce}.quiet-sign em{font-style:normal;color:#9ecbd7}.quiet-sign small{display:block;color:#c7a8da;margin-top:4px}.patio-note{position:absolute;z-index:2;right:4vw;bottom:70px;font:italic 11px/1.6 Georgia,serif;letter-spacing:.1em;color:#d4b98f;text-align:right;text-shadow:0 0 11px #9a72515a}
.stories-shell{padding:58px 4vw 80px}.stories-top{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;padding-bottom:14px;border-bottom:1px solid #ffffff12;margin-bottom:26px}.stories-top h2{font:italic 32px/1 Georgia,serif;font-weight:400;color:#ddd4e5;margin:8px 0 0}.filters{display:flex;gap:8px;flex-wrap:wrap}.filters button{background:#09090c;border:1px solid transparent;color:#8f8985;padding:8px 10px;font-size:8px;letter-spacing:.13em;cursor:pointer}.filters .on{color:#d8c6e5;border-color:#9f7caf66;box-shadow:0 0 11px #8a619122}
.story-layout{display:grid;grid-template-columns:220px 1fr;gap:26px}.patio-rail{display:flex;flex-direction:column;gap:14px}.rail-card{padding:18px;background:#0b0a0d;border:1px solid #ffffff12}.quote-card{background:linear-gradient(155deg,#261c1d,#100d10);border-color:#a47d7245;transform:rotate(-1deg)}.quote-card>span{font:48px Georgia,serif;color:#c8a58c;line-height:.6}.quote-card p{font:italic 20px/1.25 Georgia,serif;color:#d8c7b5;margin:10px 0 12px}.quote-card small,.community-note small{font-size:7px;letter-spacing:.17em;color:#8f8580}.community-note p{font:14px/1.5 Georgia,serif;color:#b8adb2}.rail-post{width:100%}
.story-feed{column-count:3;column-gap:14px}.story-card{break-inside:avoid;margin:0 0 14px;background:#c8b79e;color:#28231e;border:1px solid #8f7d68;border-radius:2px;padding:16px;position:relative;box-shadow:0 12px 28px #0007;transform:rotate(var(--tilt,0deg));background-image:linear-gradient(#ffffff18 1px,transparent 1px);background-size:100% 26px}.story-card:nth-child(2n){--tilt:.35deg;background-color:#bca78a}.story-card:nth-child(3n){--tilt:-.45deg;background-color:#d0bea4}.story-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:13px}.story-person{display:flex;align-items:center;gap:8px}.avatar{width:28px;height:28px;border-radius:50%;background:#332b27;color:#e7d5c1;display:grid;place-items:center;font:700 10px Georgia,serif}.story-person strong{display:block;font:700 10px Georgia,serif;text-transform:uppercase;letter-spacing:.08em}.story-person small,.story-time{font-size:8px;color:#63594e}.story-card h3{font:italic 24px/1.05 Georgia,serif;font-weight:400;margin:9px 0 12px}.story-card p{font:14px/1.6 Georgia,serif;margin:0 0 13px}.story-photo{margin:8px -3px 12px;background:#201b18;padding:6px 6px 22px;box-shadow:0 5px 12px #0004;transform:rotate(-.6deg)}.story-photo img{display:block;width:100%;max-height:310px;object-fit:cover}.story-tag{display:inline-block;background:#a59174;color:#392f26;font-size:8px;letter-spacing:.12em;padding:5px 7px;margin-bottom:10px}.story-actions{display:flex;gap:14px;align-items:center;border-top:1px solid #675b4e55;padding-top:10px}.story-actions button{border:0;background:none;padding:0;color:#4d433b;font:12px Georgia,serif;cursor:pointer}.story-actions button.liked{color:#7e314b}.comment-box{display:none;margin-top:11px;padding-top:10px;border-top:1px dashed #76695a}.comment-box.open{display:block}.comment-list{font:11px/1.45 Georgia,serif;color:#463e37;margin-bottom:8px}.comment-list div{margin-bottom:6px}.comment-entry{display:flex;gap:5px}.comment-entry input{min-width:0;flex:1;border:1px solid #786b5c;background:#d9cab4;color:#2b241f;padding:7px;font:11px Georgia,serif}.comment-entry button{border:1px solid #746758;background:#b29f85;color:#2d2721;padding:7px 9px;font-size:8px;cursor:pointer}
footer{padding:30px 4vw 34px;border-top:1px solid #ffffff10;display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:24px;align-items:center}.footer-sign{border:1px solid #759db075;padding:12px 14px;font:italic 13px/1.5 Georgia,serif;color:#a4ccdc;box-shadow:0 0 14px #51718c22}.footer-sign.green{color:#b8d4a4;border-color:#a1879e66}.footer-sign span{margin-left:8px}.footer-center{text-align:center}.footer-center b{font:italic 13px/1.5 Georgia,serif;color:#d3a2a1;font-weight:400}.footer-center small{display:block;margin-top:10px;font-size:7px;letter-spacing:.16em;color:#716b67}
.composer{position:fixed;inset:0;z-index:100;background:#030305e8;backdrop-filter:blur(14px);display:none;align-items:center;justify-content:center;padding:20px}.composer.open{display:flex}.composer-card{position:relative;width:min(700px,96vw);max-height:92vh;overflow:auto;background:#0b0b0e;border:1px solid #a987b947;padding:28px;box-shadow:0 24px 90px #000}.close-composer{position:absolute;right:15px;top:8px;border:0;background:none;color:#cfc4c8;font-size:28px;cursor:pointer}.composer-card h2{font:italic 35px Georgia,serif;font-weight:400;color:#ddd2e4;margin:8px 0}.composer-intro{font:12px Georgia,serif;color:#8e878b}.composer form{display:grid;gap:13px}.composer label{display:grid;gap:6px;font-size:8px;letter-spacing:.14em;color:#a59ca7}.composer input,.composer textarea,.composer select{width:100%;border:1px solid #ffffff18;background:#07080a;color:#ded7d4;padding:11px;font:13px Georgia,serif;outline:none}.composer input:focus,.composer textarea:focus,.composer select:focus{border-color:#9b7cac66}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.preview img{max-width:210px;max-height:160px;object-fit:cover;border:5px solid #c4b299}.publish{justify-self:start;border:1px solid #9c7daf77;background:#120d16;color:#e1cae6;padding:11px 15px;font-size:8px;letter-spacing:.15em;cursor:pointer}
@media(max-width:1050px){nav{gap:15px}.story-feed{column-count:2}.patio-copy{width:min(370px,43vw)}}
@media(max-width:760px){.site-header nav{display:none}.patio-hero{height:690px;background-position:59% 43%}.patio-logo{top:86px}.quiet-sign{display:none}.patio-copy{left:4vw;right:4vw;bottom:42px;width:auto}.patio-note{display:none}.stories-top{align-items:flex-start;flex-direction:column}.story-layout{grid-template-columns:1fr}.patio-rail{display:grid;grid-template-columns:1fr 1fr}.rail-post{grid-column:span 2}.story-feed{column-count:1}.form-row{grid-template-columns:1fr}footer{grid-template-columns:1fr;text-align:center}.story-card{transform:none}}


/* ===== HOOD HIPPIE STORIES POLISH PASS 1 ===== */

/* Warmer night atmosphere behind the story wall */
body {
  background:
    radial-gradient(
      circle at 16% 18%,
      rgba(116, 62, 95, .18),
      transparent 32%
    ),
    radial-gradient(
      circle at 82% 32%,
      rgba(223, 180, 92, .07),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #050609 0%,
      #08080d 55%,
      #050609 100%
    );
}

/* Give the whole Stories area more breathing room */
.stories-shell {
  padding-top: 64px;
  padding-bottom: 100px;
}

/* Stronger title area */
.stories-top {
  padding-bottom: 22px;
  margin-bottom: 32px;
  border-bottom: 1px solid rgba(201, 167, 255, .16);
}

.stories-top h2 {
  font-size: clamp(34px, 3.2vw, 48px);
  line-height: 1;
  color: #e7dff2;
}

.stories-top small {
  color: #9edfd6;
  letter-spacing: .20em;
}

/* Filters feel less like website buttons */
.filters {
  gap: 8px;
}

.filters button {
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(7, 8, 11, .72);
  border: 1px solid rgba(201, 167, 255, .12);
  font-size: 9px;
  letter-spacing: .15em;
}

.filters button:hover,
.filters .on {
  background: rgba(166, 92, 255, .08);
  border-color: rgba(201, 167, 255, .42);
  box-shadow: 0 0 18px rgba(166, 92, 255, .08);
}

/* Main paper cards */
.story-card {
  background:
    linear-gradient(
      145deg,
      #d1bea0 0%,
      #c9b58f 52%,
      #bea987 100%
    );

  border: 1px solid rgba(70, 48, 35, .20);

  box-shadow:
    0 18px 36px rgba(0,0,0,.34),
    0 2px 0 rgba(255,255,255,.16) inset;

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

/* tiny paper grain without using an image */
.story-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(70, 48, 35, .018) 0px,
      rgba(70, 48, 35, .018) 1px,
      transparent 1px,
      transparent 4px
    );

  opacity: .55;
}

/* Make the cards feel hand-placed */
.story-card:nth-child(3n+1) {
  transform: rotate(-.45deg);
}

.story-card:nth-child(3n+2) {
  transform: rotate(.35deg);
}

.story-card:nth-child(3n+3) {
  transform: rotate(-.18deg);
}

.story-card:hover {
  transform: translateY(-5px) rotate(0deg);

  box-shadow:
    0 24px 48px rgba(0,0,0,.46),
    0 0 25px rgba(223,180,92,.05);
}

/* Better typography on the paper */
.story-card h3 {
  font-size: 27px;
  line-height: 1.02;
  margin-bottom: 14px;
  color: #332822;
}

.story-card p {
  font-size: 15px;
  line-height: 1.55;
  color: #3b3029;
}

.story-person strong {
  font-size: 11px;
  letter-spacing: .10em;
}

.story-time,
.story-person small {
  font-size: 9px;
  opacity: .66;
}

/* Polaroid/photo treatment */
.story-photo {
  margin: 12px -2px 14px;
  padding: 7px 7px 22px;

  background: #171719;

  box-shadow:
    0 8px 18px rgba(0,0,0,.35);

  transform: rotate(-.45deg);
}

.story-photo img {
  width: 100%;
  display: block;
  object-fit: cover;
}

/* Left-side quote feels like something pinned to the wall */
.quote-card {
  background:
    linear-gradient(
      150deg,
      rgba(55, 33, 35, .94),
      rgba(27, 18, 23, .98)
    );

  border: 1px solid rgba(215, 170, 135, .20);

  box-shadow:
    0 16px 36px rgba(0,0,0,.36);

  transform: rotate(-1deg);
}

.quote-card span {
  color: rgba(229, 204, 175, .42);
}

.quote-card p {
  color: #ddc8b8;
}

/* Patio rule card */
.community-note {
  background:
    linear-gradient(
      145deg,
      rgba(9,10,14,.96),
      rgba(17,13,19,.96)
    );

  border: 1px solid rgba(201,167,255,.13);

  box-shadow:
    0 12px 30px rgba(0,0,0,.30);
}

/* Leave a Story button */
.rail-post {
  border-color: rgba(201,167,255,.36);
  background: rgba(166,92,255,.035);
  transition: .25s ease;
}

.rail-post:hover {
  border-color: rgba(243,160,216,.55);
  background: rgba(243,160,216,.055);
  box-shadow: 0 0 20px rgba(243,160,216,.07);
}

/* Mobile */
@media (max-width: 760px) {
  .stories-shell {
    padding-top: 42px;
  }

  .story-card h3 {
    font-size: 25px;
  }

  .story-card p {
    font-size: 15px;
  }
}

/* ===== HOOD HIPPIE STORIES POLISH PASS 2 — PATIO ATMOSPHERE ===== */

body {
  position: relative;
}

/* Soft city-light haze behind the wall */
body::after {
  content: "";
  position: fixed;
  inset: 60px 0 0 0;
  pointer-events: none;
  z-index: -1;

  background:
    radial-gradient(circle at 14% 72%, rgba(255, 176, 92, .10), transparent 20%),
    radial-gradient(circle at 78% 66%, rgba(255, 196, 120, .07), transparent 18%),
    radial-gradient(circle at 62% 20%, rgba(130, 92, 185, .09), transparent 26%),
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(5, 6, 9, .08) 55%,
      rgba(3, 4, 7, .70) 100%
    );
}

/* Warm lamp glow on the left side */
.patio-rail::before {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  left: -90px;
  top: 160px;

  background:
    radial-gradient(
      circle,
      rgba(255, 185, 105, .13) 0%,
      rgba(255, 185, 105, .045) 36%,
      transparent 70%
    );

  filter: blur(10px);
  pointer-events: none;
}

/* Slight glow behind the story feed */
.story-feed {
  position: relative;
}

.story-feed::before {
  content: "";
  position: absolute;
  inset: -30px -25px;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(
      ellipse at 48% 12%,
      rgba(201, 167, 255, .035),
      transparent 58%
    );
}

/* Patio rail / shadow line */
.stories-shell::after {
  content: "";
  display: block;
  height: 70px;
  margin-top: 65px;

  border-top: 1px solid rgba(214, 190, 170, .10);

  background:
    linear-gradient(
      180deg,
      rgba(10, 10, 14, .18),
      rgba(2, 3, 5, .72)
    );

  box-shadow:
    0 -18px 40px rgba(0, 0, 0, .22);
}

/* Slight depth variation between cards */
.story-card:nth-child(odd) {
  box-shadow:
    0 18px 40px rgba(0,0,0,.38),
    0 1px 0 rgba(255,255,255,.14) inset;
}

.story-card:nth-child(even) {
  box-shadow:
    0 14px 32px rgba(0,0,0,.32),
    0 1px 0 rgba(255,255,255,.12) inset;
}

/* Warm up quote card like candlelight is nearby */
.quote-card {
  box-shadow:
    0 16px 38px rgba(0,0,0,.42),
    -10px 10px 35px rgba(255, 176, 92, .035);
}

/* Tiny ambient lights */
.stories-shell {
  background-image:
    radial-gradient(circle at 9% 22%, rgba(255, 210, 140, .35) 0 1px, transparent 2px),
    radial-gradient(circle at 92% 18%, rgba(201, 167, 255, .35) 0 1px, transparent 2px),
    radial-gradient(circle at 83% 63%, rgba(255, 190, 115, .24) 0 1px, transparent 2px);
}