/* Save as: style.css */
:root{
  --ink:#1c1816; --wood:#2a1e18; --moss:#2f3a2d; --sage:#708063;
  --rose:#9b5f6a; --gold:#b79a5a;
  --paper:#f3ecd9; --paper-2:#efe3c8;
  --radius:18px; --gap:18px;
  --serif:"EB Garamond", Georgia, "Times New Roman", serif;
  --type:"Special Elite", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--serif);
  color:#1c1816;
  background:
    linear-gradient(rgba(10,8,7,.75), rgba(10,8,7,.85)),
    url("https://olivesstoriespng.carrd.co/assets/images/image01.jpg?v=52462d99");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed; inset:0;
  opacity:.12;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-decoration-thickness:2px}

.wrap{max-width:1100px;margin:0 auto;padding:28px 18px 70px}
.page{
  position:relative;
  background:linear-gradient(180deg,#f3ecd9,#efe3c8);
  border-radius:26px;
  box-shadow:0 25px 70px rgba(0,0,0,.35);
  overflow:hidden;
  border:1px solid rgba(20,17,15,.25);
}
.page::before{
  content:"";
  position:absolute; inset:0;
  opacity:.25;
  background-image:radial-gradient(rgba(20,17,15,.22) 0.9px, transparent 1px);
  background-size:18px 18px;
}

.tape{
  position:absolute;width:150px;height:44px;top:14px;left:16px;
  background:rgba(183,154,90,.25);
  border:1px dashed rgba(20,17,15,.28);
  box-shadow:0 10px 18px rgba(0,0,0,.15);
  transform:rotate(-7deg);
  border-radius:10px;
  mix-blend-mode:multiply;
  opacity:.85;
}
.tape.t2{width:170px;top:20px;right:20px;left:auto;transform:rotate(9deg);background:rgba(126,139,116,.28)}
.tape.t3{width:130px;bottom:16px;left:34px;top:auto;transform:rotate(-12deg);background:rgba(155,95,106,.22)}

header{
  position:relative;z-index:1;
  padding:34px 26px 18px;
  display:flex;gap:18px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;
}
.brand{display:flex;flex-direction:column;gap:6px;min-width:260px}
.brand h1{margin:0;font-weight:600;letter-spacing:.3px;font-size:clamp(28px,4vw,40px);line-height:1.05}
.brand .subtitle{font-family:var(--type);font-size:14px;opacity:.86}

nav{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-end;max-width:520px}
.tab{
  font-family:var(--type);font-size:13px;
  padding:10px 12px;border-radius:12px;
  border:1px solid rgba(20,17,15,.25);
  background:rgba(243,236,217,.65);
  box-shadow:0 10px 22px rgba(0,0,0,.10);
  position:relative;
}
.tab::after{
  content:"";position:absolute;inset:-6px -6px auto auto;
  width:10px;height:10px;border-radius:999px;
  background:rgba(155,95,106,.45);
  border:1px solid rgba(20,17,15,.25);
  transform:rotate(12deg);
}
.tab:hover{transform:translateY(-1px)}

main{
  padding:0 26px 18px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:var(--gap);
  position:relative;z-index:1;
}
@media (max-width:900px){
  main{grid-template-columns:1fr}
  nav{justify-content:flex-start}
}

.card{
  position:relative;
  border-radius:var(--radius);
  background:rgba(243,236,217,.82);
  border:1px solid rgba(20,17,15,.22);
  box-shadow:0 14px 30px rgba(0,0,0,.16);
  overflow:hidden;
  padding:16px 16px 14px;
}
.card::before{
  content:"";
  position:absolute;left:0;top:0;right:0;height:18px;
  opacity:.35;
  background:linear-gradient(135deg, transparent 75%, rgba(20,17,15,.25) 76%) 0 0 / 18px 18px repeat-x;
}
.label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.label h2{margin:0;font-size:18px;font-weight:600;letter-spacing:.2px}
.chip{
  font-family:var(--type);font-size:12px;
  padding:7px 10px;border-radius:999px;
  background:rgba(47,58,45,.10);
  border:1px solid rgba(47,58,45,.25);
  white-space:nowrap;
}
.text{font-size:16px;line-height:1.55;margin:0;opacity:.92}
.divider{height:1px;background:rgba(20,17,15,.18);margin:12px 0}

.list{margin:0;padding-left:18px;line-height:1.55}
.list li{margin:6px 0}

.now-playing{display:grid;gap:10px}
.track{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px;border-radius:14px;
  background:rgba(20,17,15,.05);
  border:1px dashed rgba(20,17,15,.22);
}
.track strong{font-weight:600}
.mini{font-family:var(--type);font-size:12px;opacity:.8;white-space:nowrap}
.hint{font-family:var(--type);font-size:12px;opacity:.78}

.polaroids{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:10px}
.polaroid{
  position:relative;
  background:#fffefb;
  border-radius:12px;
  border:1px solid rgba(20,17,15,.22);
  box-shadow:0 14px 24px rgba(0,0,0,.18);
  padding:10px 10px 12px;
  transform:rotate(-2deg);
}
.polaroid:nth-child(2){transform:rotate(2.3deg)}
.polaroid img{
  width:100%;height:140px;object-fit:cover;
  border-radius:10px;border:1px solid rgba(20,17,15,.16);
  display:block;background:rgba(20,17,15,.06);
}
.polaroid .cap{margin-top:8px;font-family:var(--type);font-size:12px;opacity:.8}

form{display:grid;gap:10px}
input,textarea{
  font:inherit;padding:10px 12px;border-radius:12px;
  border:1px solid rgba(20,17,15,.25);
  background:rgba(255,255,255,.65);
  outline:none;
}
textarea{min-height:90px;resize:vertical}
button{
  font-family:var(--type);font-size:13px;
  padding:10px 12px;border-radius:12px;
  border:1px solid rgba(20,17,15,.3);
  background:rgba(183,154,90,.25);
  cursor:pointer;
  box-shadow:0 10px 18px rgba(0,0,0,.12);
}
button:hover{transform:translateY(-1px)}

.sticker{
  position:absolute;z-index:5;
  pointer-events:none;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.20));
  opacity:.95;
}
.s1{top:90px;right:800px;left:auto;bottom:auto;width:120px;transform:rotate(6deg)}
.s2{top:135px;right:12px;left:auto;bottom:auto;width:140px;transform:rotate(9deg)}
.s3{top:450px;right:-20px;width:170px;transform:rotate(-10deg)}
.s4{bottom:40px;left:8px;width:160px;transform:rotate(7deg)}
.sticker.taped::before{
  content:"";position:absolute;width:60%;height:20px;left:20%;top:-10px;
  background:rgba(243,236,217,.55);
  border:1px dashed rgba(20,17,15,.25);
  border-radius:10px;
  transform:rotate(-2deg);
  box-shadow:0 10px 16px rgba(0,0,0,.12);
  mix-blend-mode:multiply;
}

/* Guestbook now lives at the bottom of the homepage */
.bottom{
  padding:0 26px 26px;
  position:relative;z-index:1;
}
footer{
  padding:0 26px 30px;
  opacity:.85;
  position:relative;z-index:1;
}
.footer-box{
  border-radius:var(--radius);
  padding:14px 16px;
  background:rgba(20,17,15,.05);
  border:1px solid rgba(20,17,15,.18);
  font-family:var(--type);
  font-size:12px;
  display:flex;flex-wrap:wrap;gap:10px;
  justify-content:space-between;align-items:center;
}

/* =========================
   MAILTO GUESTBOOK
   ========================= */

/* =========================
   MAILTO GUESTBOOK
   ========================= */

.guestbook-mail{
  text-align: center;
  padding: 14px 6px 6px;
}

.mail-link{
  pointer-events: auto;
  position: relative;
  z-index: 10;
  display: inline-block;
  margin-top: 10px;
  font-family: var(--type);
  font-size: 14px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(20,17,15,.35);
  background: rgba(243,236,217,.65);
  box-shadow: 0 12px 22px rgba(0,0,0,.14);
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}

.mail-link:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 30px rgba(0,0,0,.18);
}

.review-thumb{
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(20,17,15,.18);
  box-shadow: 0 12px 18px rgba(0,0,0,.10);
  display: block;
  background: rgba(20,17,15,.06);
  margin: 10px 0 12px;
}

.review-thumb.taped{
  position: relative;
}

/* =========================
   BOOK THUMBNAILS
   ========================= */

.book-thumb{
  width: 100%;
  height: 210px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(20,17,15,.18);
  box-shadow: 0 12px 18px rgba(0,0,0,.10);
  display: block;
  background: rgba(20,17,15,.06);
  margin: 10px 0 12px;
}

/* Optional: “book card” feel when links wrap a whole card */
a.card{
  color: inherit;
  text-decoration: none;
}
a.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(0,0,0,.22);
}

/* Custom cursor */
body{
  cursor: url("https://cur.cursors-4u.net/food/images5/foo516.png") 16 16, auto;
}

/* Optional: different cursor when hovering links/buttons */
a, button, .tab, .mail-link{
  cursor: url("https://cur.cursors-4u.net/food/images5/foo516.png") 16 16, pointer;
}