/* =========================================================
   CAFE SOCIETY VALLETTA — built directly from the Paper design
   (file "Jazzy feather") — 7 screens, mobile-locked layout.
   ========================================================= */

:root{
  --black:#0A0A0A;
  --white:#FFFFFF;
  --cream:#F4F1EA;
  --navy:#12305C;
  --maroon:#2A0A0A;
  --green-neon:#39FF6A;
  --grey-placeholder:#8C8C8C;

  --font-logo:'Permanent Marker', cursive;
  --font-display:'Space Grotesk', sans-serif;
  --font-script:'Caveat', cursive;
  --font-gothic:'Eater', system-ui;
  --font-mono-body:'Courier Prime', monospace;
  --font-mono-terminal:'VT323', monospace;
  --font-pixel:'Press Start 2P', monospace;

  --maxw:402px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--black); font-family:var(--font-display); }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

.page{ max-width:var(--maxw); margin:0 auto; overflow:hidden; position:relative; }

/* ---------- shared mini nav (not part of the Paper mockups — added only so
   the 6 inner screens, which show no nav at all, can link to one another) ---------- */
.mini-nav{ display:flex; flex-wrap:wrap; gap:12px 16px; padding:16px 20px; }
.mini-nav a{ font-family:var(--font-display); font-weight:700; font-size:10px; letter-spacing:.1em; text-transform:uppercase; opacity:.65; }
.mini-nav a:hover{ opacity:1; }

/* =========================================================
   HOME  (artboard "®")
   ========================================================= */
.home{ background:#000000; color:var(--white); display:flex; flex-direction:column; }
.home-logo-row{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:56px 24px 0; text-align:center; }
.home-logo{ font-family:var(--font-logo); font-size:40px; line-height:100%; }
.home-address{ font-family:var(--font-display); font-size:15px; font-weight:700; letter-spacing:.04em; line-height:130%; text-transform:uppercase; }
.home-nav{ display:flex; flex-direction:column; align-items:center; gap:22px; padding:36px 24px 0; }
.home-nav a, .home-nav span{ font-family:var(--font-display); font-size:15px; font-weight:700; letter-spacing:.15em; line-height:18px; text-transform:uppercase; color:var(--white); }
.home-sub{ display:flex; flex-direction:column; align-items:center; gap:26px; padding:34px 24px 64px; }
.home-sub-item{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.home-sub-item .script{ font-family:var(--font-script); font-weight:600; line-height:100%; }
.home-sub-item .caps{ font-family:var(--font-display); font-size:12px; font-weight:700; letter-spacing:.14em; line-height:16px; text-transform:uppercase; }
.home-sub-lostsouls .script{ font-size:26px; }
.home-sub-shop .script{ font-size:24px; }
.home-sub-board .title{ font-family:var(--font-display); font-size:19px; font-weight:700; letter-spacing:.02em; line-height:24px; text-transform:uppercase; }

/* =========================================================
   ABOUT  (artboard "02 About")
   ========================================================= */
.about{ background:var(--cream); color:var(--black); }
.about-collage{ width:100%; height:130px; object-fit:cover; }
.about-headline{ margin:0; padding:20px 20px 0; font-family:var(--font-display); font-size:56px; font-weight:700; letter-spacing:.02em; line-height:92%; text-transform:uppercase; }
.about-body{ display:flex; flex-direction:column; gap:14px; padding:24px 20px 40px; }
.about-body p{ margin:0; font-family:var(--font-display); font-size:14px; line-height:150%; text-align:justify; }

/* =========================================================
   EVENTS  (artboard "03 Events")
   ========================================================= */
.events{ background:var(--black); color:var(--white); }
.events-header{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding:28px 20px 0; }
.events-header .logo{ font-family:var(--font-logo); font-size:26px; line-height:32px; }
.events-header h1{ margin:0; font-family:var(--font-display); font-size:34px; font-weight:300; letter-spacing:.02em; line-height:42px; text-transform:lowercase; }
.events-tabs{ display:flex; align-items:center; justify-content:space-between; padding:22px 20px 0; }
.events-tabs button{ background:none; border:none; padding:0; cursor:pointer; font-family:var(--font-display); font-size:15px; line-height:18px; color:var(--white); }
.events-tabs button[data-active="false"]{ color:var(--grey-placeholder); }
.events-cards{ display:flex; flex-direction:column; gap:4px; padding:20px 20px 40px; }
.event-card{ position:relative; height:220px; width:100%; overflow:hidden; }
.event-card img{ width:100%; height:100%; object-fit:cover; }
.event-card .label{ position:absolute; left:0; right:0; bottom:0; padding:14px 12px; font-family:var(--font-display); font-size:12px; letter-spacing:.1em; line-height:16px; text-transform:uppercase; color:var(--white); background:linear-gradient(transparent, rgba(0,0,0,.8)); }
.event-card[hidden]{ display:none; }

/* =========================================================
   GALLERY  (artboard "04 Gallery")
   ========================================================= */
.gallery{ background:var(--black); color:var(--white); }
.gallery-header{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; padding:24px 20px 0; }
.gallery-header .logo{ font-family:var(--font-logo); font-size:22px; line-height:28px; }
.gallery-header h1{ margin:0; font-family:var(--font-display); font-size:24px; font-weight:700; letter-spacing:.04em; line-height:30px; text-transform:uppercase; }
.gallery-tabs{ display:flex; align-items:center; flex-wrap:wrap; gap:16px; padding:16px 20px 20px; }
.gallery-tabs button{ background:none; border:none; padding:0; cursor:pointer; display:flex; align-items:center; gap:5px; font-family:var(--font-display); font-size:12px; font-weight:700; letter-spacing:.06em; line-height:16px; text-transform:uppercase; color:var(--grey-placeholder); }
.gallery-tabs button[data-active="true"]{ color:var(--white); }
.gallery-tabs button .tri{ width:0; height:0; border-style:solid; border-width:4px 0 4px 6px; border-color:transparent transparent transparent var(--white); opacity:0; flex-shrink:0; }
.gallery-tabs button[data-active="true"] .tri{ opacity:1; }
.gallery-grid{ display:flex; flex-wrap:wrap; width:100%; }
.gallery-grid img{ width:33.333%; height:134px; object-fit:cover; cursor:pointer; }
.gallery-grid img[hidden]{ display:none; }

.lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.94); z-index:1000; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .25s; }
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox img{ max-width:88vw; max-height:82vh; object-fit:contain; }
.lightbox-close{ position:absolute; top:16px; right:20px; background:none; border:none; color:var(--white); font-size:28px; line-height:1; opacity:.7; cursor:pointer; }
.lightbox-close:hover{ opacity:1; }

/* =========================================================
   LOST SOULS CLUB  (artboard "05 Lost Souls Club")
   ========================================================= */
.lostsouls{ background:var(--black); color:var(--white); position:relative; overflow:hidden; }
.lostsouls-pattern{ position:absolute; inset:0; background-image:url('../img/p-lostsouls-pattern.png'); background-repeat:repeat; background-size:340px; opacity:.55; pointer-events:none; }
.lostsouls-inner{ position:relative; }
.ls-headline{ margin:0; padding:36px 20px 0; font-family:var(--font-gothic); font-size:34px; line-height:105%; }
.ls-tagline{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:26px 20px 0; }
.ls-tagline .script{ font-family:var(--font-script); font-size:38px; font-weight:600; line-height:100%; }
.ls-tagline .maltese{ font-family:var(--font-mono-terminal); font-size:16px; letter-spacing:.3em; line-height:20px; text-transform:uppercase; }
.ls-tagline .sub{ font-family:var(--font-display); font-size:15px; font-weight:700; letter-spacing:.08em; line-height:18px; text-transform:uppercase; }
.ls-body{ display:flex; flex-direction:column; gap:14px; padding:28px 20px 44px; }
.ls-body p{ margin:0; font-family:var(--font-display); font-size:14px; line-height:150%; text-align:justify; }

/* =========================================================
   SOCIETY COLLECTION  (artboard "06 Society Collection")
   ========================================================= */
.shop{ background:var(--cream); color:var(--navy); }
.shop-banner{ height:190px; }
.shop-banner img{ width:100%; height:100%; object-fit:cover; }
.shop-terroir{ display:flex; flex-direction:column; gap:10px; padding:26px 20px 0; }
.shop-terroir .label{ font-family:var(--font-mono-body); font-size:18px; font-weight:700; letter-spacing:.2em; line-height:22px; text-transform:uppercase; }
.shop-terroir p{ margin:0; font-family:var(--font-mono-body); font-size:12px; font-style:italic; line-height:160%; }
.shop-body{ display:flex; flex-direction:column; gap:12px; padding:18px 20px 0; }
.shop-body p{ margin:0; font-family:var(--font-mono-body); font-size:12px; font-style:italic; line-height:160%; text-transform:uppercase; }
.shop-body p.bold{ font-weight:700; }
.shop-partners{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:8px; padding:24px 20px 0; }
.shop-partners .find{ font-family:var(--font-mono-body); font-size:12px; font-weight:700; letter-spacing:.1em; line-height:16px; text-transform:uppercase; }
.shop-partners .name{ font-family:var(--font-display); font-size:15px; font-weight:700; letter-spacing:.1em; line-height:18px; }
.shop-partners .amp{ font-family:var(--font-mono-body); font-size:12px; font-weight:700; line-height:16px; }
.shop-partners .script{ font-family:var(--font-script); font-size:19px; font-weight:600; line-height:24px; }
.shop-title{ margin:0; text-align:center; padding:18px 20px 24px; font-family:var(--font-display); font-size:38px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.shop-grid{ display:flex; flex-wrap:wrap; gap:6px; padding:0 20px 40px; }
.shop-grid img{ width:calc(50% - 3px); height:160px; object-fit:cover; }

/* =========================================================
   MEET ME AT SOCIETY  (artboard "07 Meet Me at Society")
   ========================================================= */
.board{ background:var(--maroon); color:var(--green-neon); font-family:var(--font-mono-terminal); }
.board-sticker{ width:100%; height:66px; object-fit:cover; opacity:.9; }
.board-terminal{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; justify-content:space-between; padding:16px 20px 0; }
.board-terminal .line{ font-family:var(--font-mono-terminal); font-size:18px; line-height:22px; }
.board-actions{ display:flex; flex-direction:column; gap:6px; }
.board-actions button{ background:var(--green-neon); border:none; border-radius:14px; padding:4px 14px; font-family:var(--font-mono-terminal); font-size:15px; line-height:18px; color:var(--black); text-align:center; cursor:pointer; }
.board-pixel-title{ display:flex; flex-direction:column; gap:6px; padding:22px 20px 0; font-family:var(--font-pixel); color:var(--green-neon); }
.board-pixel-title .l1{ font-size:26px; line-height:130%; }
.board-pixel-title .l2{ font-size:34px; line-height:130%; }
.board-inbox-header{ padding:26px 20px 0; text-align:center; }
.board-inbox-header .bar{ margin:0; font-family:var(--font-mono-terminal); font-size:14px; line-height:18px; white-space:nowrap; overflow-x:hidden; }
.board-inbox-header .title{ margin:0; font-family:var(--font-mono-terminal); font-size:22px; letter-spacing:.3em; line-height:28px; }
.board-messages{ padding:14px 20px 40px; }
.board-msg{ border-bottom:1px solid rgba(57,255,106,.25); padding:10px 0; display:flex; flex-direction:column; gap:2px; }
.board-msg.new-msg{ animation:flashRow 1.6s ease; }
@keyframes flashRow{ 0%{ background:rgba(57,255,106,.25);} 100%{ background:transparent;} }
.board-msg .meta{ display:flex; gap:10px; font-family:var(--font-mono-terminal); font-size:14px; line-height:18px; color:rgba(57,255,106,.65); }
.board-msg .subject{ font-family:var(--font-mono-terminal); font-size:16px; line-height:20px; color:var(--green-neon); }

/* ---------- modal (used by login / post-a-message) ---------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.75); display:flex; align-items:center; justify-content:center; z-index:999; opacity:0; pointer-events:none; transition:opacity .2s; padding:20px; }
.modal-overlay.open{ opacity:1; pointer-events:auto; }
.modal{ background:var(--black); color:var(--white); border:1px solid rgba(255,255,255,.15); max-width:360px; width:100%; padding:24px; position:relative; }
.board .modal{ background:var(--maroon); color:var(--green-neon); border-color:rgba(57,255,106,.35); font-family:var(--font-mono-terminal); }
.modal-close{ position:absolute; top:10px; right:12px; background:none; border:none; color:inherit; font-size:20px; opacity:.6; cursor:pointer; }
.modal-close:hover{ opacity:1; }
.modal h3{ margin:0 0 16px; font-family:var(--font-display); font-size:18px; }
.board .modal h3{ font-family:var(--font-mono-terminal); font-size:20px; }
.field{ margin-bottom:12px; }
.field label{ display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; opacity:.7; margin-bottom:4px; }
.field input{ width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.2); color:inherit; padding:.6em .7em; font-family:inherit; font-size:14px; }
.field input:focus{ outline:none; border-color:var(--green-neon); }
.modal button[type="submit"]{ width:100%; margin-top:4px; padding:.7em; border:none; background:var(--white); color:var(--black); font-weight:700; letter-spacing:.05em; text-transform:uppercase; font-size:13px; cursor:pointer; }
.board .modal button[type="submit"]{ background:var(--green-neon); color:var(--black); font-family:var(--font-mono-terminal); }
.form-msg{ font-size:12px; margin-top:10px; opacity:.8; display:none; }
.form-msg.show{ display:block; }
.form-msg.error{ color:#ff9a7f; }

.toast{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(16px); background:var(--white); color:var(--black); padding:.8em 1.2em; font-size:13px; font-weight:600; z-index:1100; opacity:0; pointer-events:none; transition:all .25s; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* =========================================================
   RESPONSIVE — tablet (≥700px) and desktop (≥1100px)

   Paper only designed the 402px phone screen. Everything below
   adapts that same system — same fonts, colors, copy, images —
   into layouts suited to wider viewports. Under 700px the site
   is unchanged from the Paper mockups.
   ========================================================= */

/* ---------- shared nav: stacked list → horizontal bar ---------- */
@media (min-width:700px){
  .mini-nav{ padding:22px 40px; gap:28px; border-bottom:1px solid rgba(128,128,128,.15); }
  .mini-nav a{ font-size:11px; }
}
@media (min-width:1100px){
  .mini-nav{ padding:26px 64px; gap:36px; }
  .mini-nav a{ font-size:12px; }
}

/* ---------- home ---------- */
@media (min-width:700px){
  .page.home{ max-width:100%; }
  .home-logo-row{ padding-top:76px; }
  .home-logo{ font-size:56px; }
  .home-address{ font-size:16px; }
  .home-nav{ flex-direction:row; flex-wrap:wrap; justify-content:center; gap:40px; padding:52px 32px 0; }
  .home-nav a, .home-nav span{ font-size:16px; }
  .home-sub{ flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:64px; padding:60px 32px 100px; }
}
@media (min-width:1100px){
  .home-logo-row{ padding-top:96px; }
  .home-logo{ font-size:76px; }
  .home-address{ font-size:18px; }
  .home-nav{ gap:56px; padding-top:64px; }
  .home-nav a, .home-nav span{ font-size:19px; }
  .home-sub{ gap:88px; padding:76px 32px 128px; }
  .home-sub-lostsouls .script{ font-size:34px; }
  .home-sub-shop .script{ font-size:32px; }
  .home-sub-board .title{ font-size:25px; }
  .home-sub-item .caps{ font-size:13px; }
}

/* ---------- about: editorial two-column at desktop ---------- */
@media (min-width:700px){
  .page.about{ max-width:100%; }
  .about-collage{ height:220px; }
  .about-headline{ padding:32px 40px 0; font-size:72px; }
  .about-body{ padding:32px 40px 56px; max-width:760px; }
  .about-body p{ font-size:15px; }
}
@media (min-width:1100px){
  .about-collage{ height:300px; }
  .about-headline{ padding:48px 64px 0; font-size:104px; }
  .about-body{ display:block; columns:2; column-gap:56px; padding:48px 64px 80px; max-width:none; }
  .about-body p{ margin-bottom:15px; break-inside:avoid; }
}

/* ---------- events: card grid at wider widths ---------- */
@media (min-width:700px){
  .page.events{ max-width:100%; }
  .events-header{ padding:32px 40px 0; }
  .events-header .logo{ font-size:32px; }
  .events-header h1{ font-size:44px; }
  .events-tabs{ padding:28px 40px 0; }
  .events-tabs button{ font-size:17px; }
  .events-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; padding:28px 40px 56px; }
  .event-card{ height:260px; }
}
@media (min-width:1100px){
  .events-header{ padding:40px 64px 0; }
  .events-header .logo{ font-size:38px; }
  .events-header h1{ font-size:54px; }
  .events-tabs{ padding:32px 64px 0; }
  .events-cards{ grid-template-columns:repeat(3,1fr); gap:20px; padding:32px 64px 72px; }
  .event-card{ height:300px; }
  .event-card .label{ font-size:13px; padding:18px; }
}

/* ---------- gallery: more columns as it widens ---------- */
@media (min-width:700px){
  .page.gallery{ max-width:100%; }
  .gallery-header{ padding:32px 40px 0; }
  .gallery-header .logo{ font-size:28px; }
  .gallery-header h1{ font-size:32px; }
  .gallery-tabs{ padding:20px 40px 24px; gap:22px; }
  .gallery-tabs button{ font-size:13px; }
  .gallery-grid img{ width:20%; height:170px; }
}
@media (min-width:1100px){
  .gallery-header{ padding:44px 64px 0; }
  .gallery-header .logo{ font-size:34px; }
  .gallery-header h1{ font-size:40px; }
  .gallery-tabs{ padding:24px 64px 28px; }
  .gallery-grid img{ width:16.666%; height:200px; }
}

/* ---------- lost souls club ---------- */
@media (min-width:700px){
  .page.lostsouls{ max-width:100%; }
  .ls-headline{ padding:52px 40px 0; font-size:48px; max-width:820px; }
  .ls-tagline{ padding:32px 40px 0; }
  .ls-tagline .script{ font-size:48px; }
  .ls-tagline .maltese{ font-size:18px; }
  .ls-tagline .sub{ font-size:16px; }
  .ls-body{ padding:36px 40px 64px; max-width:760px; }
  .ls-body p{ font-size:15px; }
}
@media (min-width:1100px){
  .ls-headline{ padding:72px 64px 0; font-size:64px; max-width:1000px; }
  .ls-tagline{ padding:40px 64px 0; }
  .ls-tagline .script{ font-size:60px; }
  .ls-body{ display:block; columns:2; column-gap:56px; padding:48px 64px 88px; max-width:none; }
  .ls-body p{ margin-bottom:15px; break-inside:avoid; }
}

/* ---------- society collection (shop) ---------- */
@media (min-width:700px){
  .page.shop{ max-width:100%; }
  .shop-banner{ height:280px; }
  .shop-terroir{ padding:36px 40px 0; max-width:640px; }
  .shop-body{ padding:20px 40px 0; max-width:640px; }
  .shop-partners{ padding:32px 40px 0; }
  .shop-title{ padding:24px 40px 32px; font-size:48px; }
  .shop-grid{ gap:10px; padding:0 40px 56px; }
  .shop-grid img{ width:calc(33.333% - 7px); height:200px; }
}
@media (min-width:1100px){
  .shop-banner{ height:360px; }
  .shop-terroir{ padding:48px 64px 0; }
  .shop-terroir .label{ font-size:22px; }
  .shop-body{ padding:24px 64px 0; }
  .shop-partners{ padding:40px 64px 0; }
  .shop-title{ padding:32px 64px 40px; font-size:60px; }
  .shop-grid{ gap:12px; padding:0 64px 72px; }
  .shop-grid img{ width:calc(25% - 9px); height:220px; }
}

/* ---------- meet me at society (board) ---------- */
@media (min-width:700px){
  .page.board{ max-width:100%; }
  .board-terminal{ padding:22px 40px 0; }
  .board-terminal .line{ font-size:22px; }
  .board-actions{ flex-direction:row; }
  .board-actions button{ font-size:16px; padding:6px 18px; }
  .board-pixel-title{ padding:30px 40px 0; }
  .board-pixel-title .l1{ font-size:32px; }
  .board-pixel-title .l2{ font-size:42px; }
  .board-inbox-header .title{ font-size:26px; }
  .board-messages{ padding:20px 40px 56px; max-width:900px; margin:0 auto; }
  .board-msg{ display:grid; grid-template-columns:110px 80px 170px 1fr; align-items:baseline; gap:0 20px; padding:12px 0; }
  .board-msg .meta{ display:contents; }
  .board-msg .subject{ font-size:17px; }
}
@media (min-width:1100px){
  .board-terminal{ padding:26px 64px 0; }
  .board-pixel-title{ padding:36px 64px 0; }
  .board-pixel-title .l1{ font-size:38px; }
  .board-pixel-title .l2{ font-size:50px; }
  .board-messages{ padding:24px 64px 72px; max-width:1040px; }
  .board-msg{ grid-template-columns:120px 90px 190px 1fr; }
}