/* =================================================================
   Four Go East — shared stylesheet (Concept 3 · Travel Journal)
   ================================================================= */

:root{
  --paper:#f6efe0;
  --paper-edge:#e8ddc4;
  --paper-dark:#dccfb1;
  --ink:#2a241a;
  --ink-soft:#5a4f3d;
  --red-stamp:#a93828;
  --green-stamp:#3d6a4a;
  --blue-pen:#23437a;
  --tape:#f5e597cc;
  --tape-blue:#a5c6e0cc;
  --tape-pink:#f0b4b4cc;
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Crimson Pro",serif;
  font-size:18px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(at 10% 0%,rgba(255,255,255,.5),transparent 50%),
    radial-gradient(at 90% 100%,rgba(190,170,130,.18),transparent 50%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.15  0 0 0 0 0.12  0 0 0 0 0.08  0 0 0 0 0.05'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.hand{font-family:"Caveat",cursive}
.typed{font-family:"Special Elite",monospace;letter-spacing:.02em}
.container{max-width:1180px;margin:0 auto;padding:0 30px}

/* ---------- NAV ---------- */
nav.site{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 30px;border-bottom:2px dashed var(--paper-dark);
  max-width:1180px;margin:0 auto
}
nav.site .brand{display:flex;align-items:center;gap:14px}
nav.site .brand-stamp{
  border:2px solid var(--red-stamp);color:var(--red-stamp);
  padding:4px 12px;font-family:"Special Elite",monospace;font-size:13px;
  letter-spacing:.15em;text-transform:uppercase;
  transform:rotate(-3deg);font-weight:bold
}
nav.site .brand h1{
  font-family:"Caveat",cursive;font-size:34px;font-weight:700;
  color:var(--ink);line-height:1
}
nav.site .navlinks{display:flex;gap:30px}
nav.site .navlinks a{
  font-family:"Caveat",cursive;font-size:22px;color:var(--ink-soft);
  transition:color .2s;position:relative
}
nav.site .navlinks a:hover{color:var(--red-stamp)}
nav.site .navlinks a.active{color:var(--red-stamp)}
nav.site .navlinks a::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;
  background:var(--red-stamp);transform:scaleX(0);transform-origin:left;
  transition:transform .25s
}
nav.site .navlinks a:hover::after,
nav.site .navlinks a.active::after{transform:scaleX(1)}

/* ---------- PAGE HEADER (handwritten title block) ---------- */
.pagetop{padding:36px 0 10px;text-align:center}
.dateline{
  font-family:"Special Elite",monospace;font-size:13px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px
}
.title-block{position:relative;display:inline-block;padding:20px 60px;max-width:900px}
.title-block .tape{
  position:absolute;background:var(--tape);width:90px;height:24px;
  box-shadow:0 1px 4px rgba(0,0,0,.08)
}
.title-block .tape.t1{top:-10px;left:30px;transform:rotate(-8deg)}
.title-block .tape.t2{top:-6px;right:30px;transform:rotate(7deg);background:var(--tape-blue)}
h2.titlemark{
  font-family:"Caveat",cursive;font-weight:700;font-size:96px;line-height:.95;color:var(--ink)
}
h2.titlemark .ink{color:var(--red-stamp);font-style:italic}
h2.titlemark .arrow{display:inline-block;color:var(--green-stamp);transform:translateY(-6px)}
.sub{font-family:"Caveat",cursive;font-size:30px;color:var(--ink-soft);margin-top:8px}

/* ---------- POLAROIDS ---------- */
.polaroid{
  background:#fff;padding:14px 14px 50px;
  box-shadow:0 8px 24px rgba(60,40,10,.18),0 2px 6px rgba(60,40,10,.12)
}
.polaroid img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.polaroid .cap{
  font-family:"Caveat",cursive;font-size:22px;color:var(--ink);
  text-align:center;margin-top:10px
}
.pin{
  position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  width:14px;height:14px;
  background:radial-gradient(circle at 30% 30%,#e8615f,#a93828);
  border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,.3)
}

/* ---------- JOURNAL ENTRY CARDS ---------- */
.entry{
  position:relative;background:#fff;padding:16px 16px 22px;
  box-shadow:0 6px 18px rgba(60,40,10,.14);transition:transform .25s ease
}
.entry:hover{transform:rotate(0) translateY(-4px) scale(1.02);z-index:5}
.entry .tape-strip{
  position:absolute;top:-10px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:90px;height:22px;background:var(--tape);box-shadow:0 1px 4px rgba(0,0,0,.08)
}
.entry .entry-img{width:100%;aspect-ratio:4/3;object-fit:cover}
.entry-meta{
  margin-top:14px;display:flex;justify-content:space-between;align-items:center;
  font-family:"Special Elite",monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft)
}
.entry h4{
  font-family:"Caveat",cursive;font-size:34px;line-height:1.05;color:var(--ink);
  margin:10px 0 6px;font-weight:700
}
.entry h4 em{color:var(--red-stamp);font-style:italic}
.entry p{
  font-family:"Crimson Pro",serif;font-style:italic;font-size:17px;
  color:var(--ink-soft);line-height:1.4
}
.entry .stamp-tag{
  position:absolute;top:24px;right:14px;
  border:2px solid var(--green-stamp);color:var(--green-stamp);padding:3px 8px;
  font-family:"Special Elite",monospace;font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;transform:rotate(8deg);background:rgba(255,255,255,.7)
}
.read-more{
  margin-top:12px;display:inline-block;font-family:"Caveat",cursive;
  font-size:22px;color:var(--blue-pen);border-bottom:1.5px solid var(--blue-pen);padding-bottom:1px
}

/* ---------- SECTION LABEL ---------- */
.section-label{display:flex;align-items:center;gap:20px;margin-bottom:40px}
.section-label h3{font-family:"Caveat",cursive;font-size:54px;color:var(--ink)}
.section-label h3 em{font-style:italic;color:var(--red-stamp)}
.section-label .doodle{
  flex:1;height:2px;
  background:repeating-linear-gradient(to right,var(--ink-soft) 0 6px,transparent 6px 12px);
  opacity:.4
}

/* ---------- STAMPS ---------- */
.stamp-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.stamp{
  width:130px;height:130px;display:grid;place-items:center;
  font-family:"Special Elite",monospace;
  border:2.5px solid var(--red-stamp);color:var(--red-stamp);
  text-transform:uppercase;letter-spacing:.1em;
  font-size:13px;text-align:center;padding:6px;line-height:1.2;
  position:relative;background:rgba(255,255,255,.4)
}
.stamp:nth-child(odd){transform:rotate(-4deg);border-color:var(--green-stamp);color:var(--green-stamp)}
.stamp:nth-child(3n){transform:rotate(5deg);border-color:var(--blue-pen);color:var(--blue-pen)}
.stamp b{display:block;font-size:18px;letter-spacing:.04em;margin-bottom:4px;font-weight:bold}

/* ---------- POSTCARD ---------- */
.postcard{padding:80px 0;border-top:2px dashed var(--paper-dark)}
.pc-wrap{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  max-width:980px;margin:0 auto;background:#fff;
  box-shadow:0 18px 50px rgba(60,40,10,.2);transform:rotate(-1deg)
}
.pc-front{padding:36px 30px;border-right:2px dashed var(--paper-dark);position:relative}
.pc-front h3{font-family:"Caveat",cursive;font-size:48px;margin-bottom:8px;line-height:1}
.pc-front h3 em{color:var(--red-stamp);font-style:italic}
.pc-front p{
  font-family:"Crimson Pro",serif;font-style:italic;color:var(--ink-soft);
  font-size:17px;line-height:1.45;margin-bottom:18px
}
.pc-front input{
  width:100%;background:transparent;border:none;
  border-bottom:2px dashed var(--paper-dark);padding:14px 0 8px;
  font-family:"Caveat",cursive;font-size:24px;color:var(--blue-pen);
  outline:none;margin-bottom:8px
}
.pc-front input::placeholder{color:#a99c7e}
.pc-front button{
  margin-top:14px;background:var(--red-stamp);color:#fff;border:none;padding:12px 24px;
  font-family:"Special Elite",monospace;font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  cursor:pointer;transform:rotate(-2deg);box-shadow:0 4px 10px rgba(169,56,40,.3)
}
.pc-back{padding:30px;position:relative}
.pc-stamp-box{
  position:absolute;top:24px;right:24px;width:90px;height:110px;
  border:2px solid var(--red-stamp);display:grid;place-items:center;text-align:center;
  font-family:"Special Elite",monospace;font-size:10px;color:var(--red-stamp);
  transform:rotate(3deg);padding:6px;letter-spacing:.1em;line-height:1.2
}
.pc-stamp-box span{
  font-family:"Caveat",cursive;font-size:30px;display:block;color:var(--red-stamp);
  line-height:1;margin-bottom:4px
}
.pc-postmark{
  position:absolute;top:140px;right:18px;width:120px;height:120px;
  border:2px solid var(--ink-soft);border-radius:50%;display:grid;place-items:center;
  opacity:.5;transform:rotate(-12deg);font-family:"Special Elite",monospace;
  font-size:11px;color:var(--ink-soft);letter-spacing:.12em;text-align:center
}
.pc-address{font-family:"Caveat",cursive;font-size:24px;color:var(--ink);margin-top:80px}
.pc-address div{margin-bottom:6px;border-bottom:1.5px dashed var(--paper-dark);padding-bottom:6px}

/* ---------- TAG CHIPS ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  font-family:"Caveat",cursive;font-size:20px;color:var(--ink);
  border:1.5px dashed var(--paper-dark);padding:3px 14px;border-radius:100px;
  background:rgba(255,255,255,.4);transition:all .2s;cursor:pointer
}
.chip:hover,.chip.active{
  background:var(--red-stamp);color:#fff;border-color:var(--red-stamp);
  transform:rotate(-2deg)
}

/* ---------- FOOTER ---------- */
footer.site{
  padding:50px 0 60px;border-top:2px dashed var(--paper-dark);
  text-align:center;color:var(--ink-soft)
}
footer.site p{font-family:"Caveat",cursive;font-size:24px;margin-bottom:6px}
footer.site .typed{font-size:12px}
footer.site .foot-links{
  margin:18px 0;display:flex;justify-content:center;gap:24px;flex-wrap:wrap;
  font-family:"Caveat",cursive;font-size:20px
}
footer.site .foot-links a{color:var(--ink-soft)}
footer.site .foot-links a:hover{color:var(--red-stamp)}

/* ---------- BREADCRUMB ---------- */
.breadcrumb{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
  font-family:"Caveat",cursive;font-size:22px;color:var(--ink-soft);justify-content:center
}
.breadcrumb a{color:var(--blue-pen);border-bottom:1.5px solid var(--blue-pen)}
.breadcrumb .sep{color:var(--ink-soft)}

/* ---------- MOBILE ---------- */
@media (max-width:880px){
  .container{padding:0 18px}
  h2.titlemark{font-size:56px}
  .pc-wrap{grid-template-columns:1fr}
  .pc-front{border-right:none;border-bottom:2px dashed var(--paper-dark)}
  nav.site .navlinks{display:none}
  .section-label h3{font-size:36px}
}