:root{
  --ground:#dcd5c6; --paper:#fbf8f0; --ink:#33302a; --muted:#8a8070;
  --hand:'Caveat','Bradley Hand',cursive;
  --type:'Special Elite','Courier New',monospace;
  --ser:'Cormorant Garamond',Georgia,serif;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{background:var(--ground);color:var(--ink);font-family:var(--ser);
  -webkit-font-smoothing:antialiased;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23l)' opacity='.5'/%3E%3C/svg%3E");
  background-blend-mode:soft-light;background-attachment:fixed}

/* ---------- shelf ---------- */
.shelf header{text-align:center;padding:76px 24px 8px}
.shelf header h1{font-family:var(--hand);font-size:clamp(52px,9vw,98px);margin:0;font-weight:700}
.shelf header p{font-family:var(--type);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);margin:14px 0 0}
.shelfgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;
  max-width:1080px;margin:52px auto 110px;padding:0 28px}
.tc{display:block;background:var(--paper);text-decoration:none;color:inherit;position:relative;
  box-shadow:0 12px 30px rgba(70,60,45,.26);transition:transform .22s ease,box-shadow .22s ease}
.tc:hover{transform:translateY(-6px);box-shadow:0 20px 42px rgba(70,60,45,.34)}
.tcband{display:block;height:24px}
.tcimg{display:block;padding:12px 12px 0}
.tcimg img{display:block;width:100%;height:190px;object-fit:cover;object-position:50% 40%}
.tcstamp{position:absolute;top:44px;right:-14px;line-height:0;
  filter:drop-shadow(1px 2px 3px rgba(70,55,35,.35))}
.tcname{display:block;font-family:var(--hand);font-size:34px;text-align:center;
  margin-top:12px;line-height:1}
.tcwhen{display:block;font-family:var(--type);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);text-align:center;margin-top:6px}
.tccount{display:block;font-family:var(--type);font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#b0a695;text-align:center;margin:5px 0 20px}
.tc.soon{box-shadow:0 6px 18px rgba(70,60,45,.16);opacity:.92}
.tc.soon:hover{transform:none;box-shadow:0 6px 18px rgba(70,60,45,.16)}
.soonbox{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;height:190px;background:#f3efe4;border:1.5px dashed #cbc0a9}
.soontag{font-family:var(--type);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:#a1957f}

/* ---------- trip page ---------- */
.back{position:fixed;top:20px;left:20px;z-index:30;text-decoration:none;
  font-family:var(--type);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:#4a443a;background:rgba(255,255,255,.78);border:1px solid rgba(80,70,55,.2);
  padding:9px 15px;backdrop-filter:blur(6px)}
.back:hover{background:#fff}
.page{max-width:1140px;margin:34px auto 80px;padding:20px;
  box-shadow:0 22px 50px rgba(70,60,45,.34)}
.card{position:relative;background:var(--paper);padding:56px 44px 66px}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)' opacity='.3'/%3E%3C/svg%3E");
  mix-blend-mode:multiply}
.titleblock{position:relative;text-align:center;z-index:2}
.tstamp{position:absolute;top:-14px;right:6px;line-height:0;
  filter:drop-shadow(1px 2px 3px rgba(70,55,35,.35))}
.card h1{font-family:var(--hand);font-size:clamp(54px,9vw,104px);margin:0;line-height:.95}
.sub{font-family:var(--type);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);margin:14px 0 0}
.rule{width:110px;height:1px;background:#cabfa8;margin:24px auto 0}
.intro{max-width:520px;margin:26px auto 0;font-family:var(--hand);font-size:26px;
  line-height:1.45;color:#57503f}

.spread{position:relative;z-index:2;display:grid;grid-template-columns:repeat(6,1fr);
  grid-auto-rows:6px;column-gap:22px;row-gap:0;grid-auto-flow:row dense;margin-top:56px}
.slot{margin:0;grid-column:span var(--sp);transform:rotate(var(--rot));
  transition:transform .28s cubic-bezier(.2,.8,.3,1)}
.slot:hover{transform:rotate(0deg) scale(1.02);z-index:9}
.inner{position:relative}
.ph{position:relative;background:#fff;padding:9px;cursor:zoom-in;
  box-shadow:0 1px 2px rgba(70,55,35,.2),0 10px 24px rgba(70,55,35,.26)}
.ph img{display:block;width:100%;height:auto}
.cap{display:block;text-align:center;font-family:var(--hand);font-size:23px;
  color:#5d5544;margin-top:10px;line-height:1.25;padding:0 2px;
  overflow-wrap:break-word;position:relative;z-index:9}
/* a captioned tile sits above its neighbours so the words are never painted over */
.slot.hascap{z-index:6}

.tp{position:absolute;z-index:5;height:28px;opacity:.82;transform:rotate(var(--tr));
  box-shadow:0 1px 2px rgba(0,0,0,.12);clip-path:polygon(3% 0,97% 4%,100% 96%,0 100%)}
.torn{position:absolute;z-index:4;
  clip-path:polygon(0% 0%,100% 0%,92% 9%,97% 17%,86% 24%,90% 33%,78% 39%,83% 48%,70% 53%,74% 62%,60% 66%,63% 75%,48% 78%,50% 87%,33% 89%,34% 97%,16% 97%,0% 100%);
  filter:drop-shadow(1px 2px 2px rgba(70,55,35,.28))}
.dec{position:absolute;z-index:6;line-height:0;
  filter:drop-shadow(1px 2px 3px rgba(70,55,35,.35))}
.stk{position:absolute;z-index:7;line-height:0;pointer-events:none;
  filter:drop-shadow(1px 2px 3px rgba(70,55,35,.34))}

.blk{grid-column:span 2;display:flex;align-items:center;justify-content:center}
.blk.wide3{grid-column:span 3}
.blk.four{grid-column:span 4}
.quote{margin:0;max-width:620px;text-align:center;padding:10px 26px}
.quote p{font-family:var(--hand);font-size:36px;line-height:1.3;color:#463f31;margin:0}
.quote p::before{content:"\201C"} .quote p::after{content:"\201D"}
.note{text-align:center;font-family:var(--hand);font-size:28px;color:#5c5443;
  transform:rotate(-.8deg);padding:8px 18px;line-height:1.35;max-width:560px}
.note.long{font-size:24px}
.stub{width:100%;background:#eee2c8;padding:15px 17px;transform:rotate(2deg);
  box-shadow:0 2px 4px rgba(70,55,35,.22),0 10px 22px rgba(70,55,35,.22);
  border-left:3px dashed rgba(120,100,60,.4)}
.stub b{display:block;font-family:var(--type);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:#8a7a55}
.stub span{display:block;font-family:var(--hand);font-size:23px;color:#4a4232;margin-top:4px;line-height:1.25}
.stub em{display:block;font-family:var(--hand);font-size:20px;color:#6d6250;font-style:normal;
  margin-top:7px;padding-top:7px;border-top:1px dashed rgba(120,100,60,.35)}

.lb{position:fixed;inset:0;z-index:60;background:rgba(20,18,15,.94);display:none;
  align-items:center;justify-content:center;padding:36px;cursor:zoom-out}
.lb.on{display:flex}
.lb img{max-width:100%;max-height:100%;background:#fff;padding:10px;
  box-shadow:0 30px 80px rgba(0,0,0,.7)}

@media (max-width:900px){
  body{overflow-x:hidden}
  .shelfgrid{grid-template-columns:repeat(2,1fr);gap:24px;padding:0 18px}
  .page{margin:0;padding:14px}
  .card{padding:74px 16px 54px}
  .intro{font-size:21px}
  .spread{grid-template-columns:repeat(2,1fr);column-gap:14px;margin-top:38px}
  .slot{grid-column:span 1;transform:rotate(calc(var(--rot) * .6))}
  .slot.big{grid-column:span 2}
  .blk,.blk.four{grid-column:span 2}
  .quote p{font-size:26px} .note{font-size:22px} .cap{font-size:19px}
  .tstamp{top:-8px;right:0;transform:scale(.8)}
  .torn{transform:scale(.8)}
}
@media (max-width:520px){ .shelfgrid{grid-template-columns:1fr} }