/* TTM Check-In — the scrapbook journal layout (single-checkin.php).
   Ported from sample/checkin/ttm-checkin-journal.html. This page does not load main.css. */
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400 600;font-display:swap;src:url(../fonts/fraunces-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400 600;font-display:swap;src:url(../fonts/fraunces-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/fraunces-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/fraunces-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:italic;font-weight:400 700;font-display:swap;src:url(../fonts/instrumentsans-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:italic;font-weight:400 700;font-display:swap;src:url(../fonts/instrumentsans-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/instrumentsans-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/instrumentsans-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Kalam';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/kalam-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* =====================================================================
   TTM CHECK-IN — picture-first, scroll-choreographed resort feature
   ===================================================================== */
:root{
  --display:"Fraunces",Georgia,serif;
  --sans:"Instrument Sans",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --lagoon:#0097B7;--lagoon-lt:#7FDCEF;
  --ink:#06181E;--paper:#FBFDFE;
  --ease:cubic-bezier(.32,.72,.22,1);
  --swing:cubic-bezier(.16,1,.3,1);
  --pad:clamp(20px,4vw,64px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-size:1rem;line-height:1.6;background:var(--ink);color:var(--paper);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
body.lock{overflow:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer}
::selection{background:rgba(127,220,239,.3)}
:focus-visible{outline:2px solid var(--lagoon-lt);outline-offset:4px;border-radius:8px}
.wrap{max-width:1320px;margin:0 auto;padding:0 var(--pad)}

/* ---------- intro: the ticket ----------
   The overlay is the abyss colour with the TTM Check-In ticket laid on it,
   the same die-cut used on the print edition's cover. Everything cut out of
   the card — the wordmark and the hairline rule — is a real hole punched by
   an SVG mask, so what shows through is the hero photograph itself sitting
   underneath, not a second copy. Scaling the card widens those holes until
   the screen is the photograph.
   The group's fade is the only visible exit. By the time .gone lands the
   layer is already transparent, so that transition is just cleanup. */
#intro{position:fixed;inset:0;z-index:300;background:transparent;
  transition:opacity .25s linear,visibility .25s}
#intro.gone{opacity:0;visibility:hidden;pointer-events:none}
#intro svg{position:absolute;inset:0;width:100%;height:100%;display:block}
#intro .sheet{transition:opacity .7s cubic-bezier(.4,0,.6,1)}
#intro.blown .sheet{opacity:0}
#intro .field{fill:#041217}
#intro .stock{fill:#f5f4f2}
/* The rule is a die-cut on the printed card. Punching it here would show a
   hairline of photograph, which disappears wherever the picture is bright —
   so it is drawn in the abyss ink instead, which is exactly what the die-cut
   reads as while the card is sitting on the abyss. */
#intro .rule{fill:none;stroke:#041217;stroke-width:1.8}
/* .cut (the holes, inside the mask) and .card (the cream stock) carry an
   identical transform so the die-cut stays registered to the card on every
   frame. The origin is the stem of the second T — the thickest hole nearest
   the middle — so the photograph opens out of the centre of the screen. */
/* --rest is the card's size at rest. The artwork is laid out for a wide
   frame, so on a phone it is stepped up rather than left as a stamp adrift
   in the middle of a tall screen. */
#intro{--rest:1}
@media(max-width:760px){#intro{--rest:1.42}}
#intro .cut,#intro .card{transform-box:view-box;transform-origin:603.12px 313.26px;
  opacity:0;transform:scale(calc(var(--rest) * .945));
  transition:transform .55s cubic-bezier(.16,.84,.3,1),opacity .5s linear}
#intro.in .cut,#intro.in .card{opacity:1;transform:scale(var(--rest))}
#intro.zoom .cut,#intro.zoom .card{transform:scale(58);
  transition:transform 1.8s cubic-bezier(.55,0,.85,.35)}
/* The card itself dissolves in the first half-second of the opening, just as
   its edges leave the frame — past that point the cream would simply be a
   white screen. What carries on growing is the die-cut, so the rest of the
   sequence is the photograph widening out of the wordmark, as before. */
#intro.zoom .card{opacity:0;
  transition:transform 1.8s cubic-bezier(.55,0,.85,.35),
             opacity .44s cubic-bezier(.3,0,.5,1) .04s}
#intro .hint{position:absolute;left:0;right:0;bottom:12vh;text-align:center;
  font-size:.62rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.34);opacity:0;transition:opacity .6s var(--ease)}
#intro.in .hint{opacity:1}
#intro.zoom .hint{opacity:0;transition:opacity .4s var(--ease)}
#intro .hint i{display:block;width:26px;height:1px;background:rgba(255,255,255,.3);
  margin:14px auto 0;position:relative;overflow:hidden}
#intro .hint i::after{content:"";position:absolute;inset:0;background:var(--lagoon-lt);
  animation:trickle 1.8s var(--ease) infinite}

/* ---------- chrome ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:120;padding:clamp(14px,2vw,22px) 0;
  transition:transform .5s var(--ease),background-color .4s var(--ease)}
header.hide{transform:translateY(-110%)}
header.solid{background:rgba(6,24,30,.72);backdrop-filter:blur(16px) saturate(170%);
  -webkit-backdrop-filter:blur(16px) saturate(170%)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:baseline;gap:.7rem;font-family:var(--display);font-weight:550;
  font-size:1rem;letter-spacing:-.01em}
.brand span{font-family:var(--sans);font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.55);padding-left:.7rem;border-left:1px solid rgba(255,255,255,.22)}
.navlinks{display:flex;gap:28px}
.navlinks a{font-size:.8rem;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.66);
  position:relative;transition:color .25s var(--ease)}
.navlinks a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;
  background:var(--lagoon-lt);transition:right .35s var(--ease)}
.navlinks a:hover{color:#fff}
.navlinks a:hover::after{right:0}
@media(max-width:860px){.navlinks{display:none}}
#bar{position:fixed;top:0;left:0;height:2px;width:0;z-index:130;background:var(--lagoon-lt)}

/* ---------- hero ---------- */
.hero{position:relative;height:100vh;height:100dvh;overflow:hidden;display:flex;align-items:flex-end}
.hero .layer{position:absolute;inset:-8% 0;will-change:transform;
  background:linear-gradient(135deg,#0A2E38,#127E9A 62%,#2FBEDF)}
.hero .layer img{width:100%;height:100%;object-fit:cover}
.hero .layer img.img-failed{opacity:0}
.hero .scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,24,30,.55) 0%,rgba(6,24,30,.12) 35%,rgba(6,24,30,.9) 100%)}
.hero .inner{position:relative;z-index:3;width:100%;padding-bottom:clamp(34px,6vh,70px)}
.eyebrow{display:inline-flex;align-items:center;gap:11px;font-size:.64rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--lagoon-lt);margin-bottom:1.2rem}
.eyebrow::before{content:"";width:34px;height:1px;background:currentColor;opacity:.6}
h1.big{font-family:var(--display);font-optical-sizing:auto;font-weight:500;letter-spacing:-.04em;
  line-height:.94;font-size:clamp(2.6rem,8.4vw,7.4rem);max-width:14ch}
.hero .meta{display:flex;flex-wrap:wrap;gap:12px 34px;margin-top:1.6rem;padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.18)}
.hero .meta div{font-size:.84rem;color:rgba(255,255,255,.8)}
.hero .meta b{display:block;font-size:.62rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-bottom:4px}
.scrollcue{position:absolute;right:var(--pad);bottom:clamp(34px,6vh,70px);z-index:3;display:flex;
  align-items:center;gap:10px;font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.5)}
.scrollcue i{display:block;width:1px;height:46px;background:rgba(255,255,255,.3);position:relative;overflow:hidden}
.scrollcue i::after{content:"";position:absolute;inset:0;background:var(--lagoon-lt);
  animation:trickle 2.2s var(--ease) infinite}
@keyframes trickle{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@media(max-width:700px){.scrollcue{display:none}}

/* word-mask reveal */
.rt{display:inline-block;overflow:hidden;vertical-align:bottom}
.rt > i{display:inline-block;font-style:inherit;transform:translateY(105%);transition:transform .95s var(--swing)}
.in .rt > i{transform:translateY(0)}
.fade{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--swing)}
.fade.in{opacity:1;transform:none}

/* ---------- statement ---------- */
.statement{padding:clamp(80px,16vh,190px) 0}
.statement p{font-family:var(--display);font-optical-sizing:auto;font-weight:400;letter-spacing:-.028em;
  line-height:1.2;font-size:clamp(1.4rem,3.6vw,2.9rem);max-width:22ch}
.statement .sub{font-family:var(--sans);font-size:1rem;line-height:1.75;color:rgba(251,253,254,.6);
  max-width:52ch;margin-top:2rem;letter-spacing:0}

/* day / night crossfade */
.daynight{position:relative;height:min(84vh,760px);overflow:hidden;border-radius:4px;
  background:linear-gradient(135deg,#0A2E38,#127E9A 62%,#2FBEDF)}
.daynight img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 1.1s var(--ease)}
.daynight img.night{opacity:0}
.daynight.is-night img.day{opacity:0}
.daynight.is-night img.night{opacity:1}
.dnswitch{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:4;display:flex;gap:2px;
  background:rgba(6,24,30,.42);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:4px;
  backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.dnswitch button{border:0;background:none;color:rgba(255,255,255,.7);font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:9px 20px;border-radius:999px;transition:.25s var(--ease)}
.dnswitch button.on{background:rgba(255,255,255,.92);color:var(--ink)}
.dnswitch button:active{transform:scale(.94);transition-duration:100ms}

/* ---------- marquee ---------- */
.marq{overflow:hidden;padding:clamp(30px,6vh,64px) 0;border-top:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1)}
.marq .track{display:flex;gap:3rem;width:max-content;animation:slide 38s linear infinite}
.marq span{font-family:var(--display);font-weight:400;font-style:italic;letter-spacing:-.02em;
  font-size:clamp(1.5rem,4vw,3.2rem);color:rgba(251,253,254,.22);white-space:nowrap}
.marq span em{font-style:normal;color:var(--lagoon-lt);opacity:.5}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- section heads ---------- */
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:clamp(60px,12vh,130px) 0 clamp(26px,4vh,46px)}
.shead .no{font-family:var(--display);font-style:italic;font-weight:400;font-size:.95rem;
  color:var(--lagoon-lt);display:block;margin-bottom:.6rem}
.shead h2{font-family:var(--display);font-optical-sizing:auto;font-weight:500;letter-spacing:-.035em;
  line-height:.98;font-size:clamp(2rem,6vw,4.6rem)}
.shead p{font-size:.95rem;color:rgba(251,253,254,.55);max-width:34ch;line-height:1.65}
.mini{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--lagoon-lt);margin-top:1rem}
.mini svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.mini:hover svg{transform:translateX(4px)}

/* ---------- villas: sticky stack ---------- */
.stack{padding-bottom:clamp(40px,8vh,110px)}
.vcard{position:sticky;top:12vh;margin-bottom:6vh;border-radius:6px;overflow:hidden;
  transform-origin:center top;will-change:transform}
.vcard .pic{position:relative;height:min(78vh,720px);overflow:hidden;
  background:linear-gradient(135deg,#0A2E38,#127E9A 62%,#2FBEDF)}
.vcard .pic img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.4s var(--ease)}
.vcard.in .pic img{transform:scale(1)}
.vcard .pic::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,24,30,.1) 0%,rgba(6,24,30,.22) 48%,rgba(6,24,30,.88) 100%)}
.vcard .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(24px,4vw,48px);
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px}
.vcard .cap h3{font-family:var(--display);font-optical-sizing:auto;font-weight:500;letter-spacing:-.032em;
  line-height:1;font-size:clamp(1.7rem,4.4vw,3.4rem);max-width:13ch}
.vcard .cap p{font-size:.94rem;line-height:1.7;color:rgba(251,253,254,.72);max-width:46ch}
.vcard .idx{position:absolute;top:clamp(20px,3vw,36px);left:clamp(20px,4vw,48px);z-index:2;
  font-family:var(--display);font-style:italic;font-size:.9rem;color:rgba(255,255,255,.65)}

/* ---------- dining: drag rail ---------- */
.rail{display:flex;gap:clamp(12px,1.6vw,22px);overflow-x:auto;scroll-snap-type:x proximity;
  padding:0 var(--pad) clamp(40px,8vh,90px);scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.rail.dragging{cursor:grabbing;scroll-snap-type:none}
.rail.dragging *{pointer-events:none}
.dish{flex:0 0 clamp(280px,32vw,440px);scroll-snap-align:start}
.dish .pic{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:4px;
  background:linear-gradient(135deg,#0A2E38,#127E9A 62%,#2FBEDF)}
.dish .pic img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.dish:hover .pic img{transform:scale(1.045)}
.dish h3{font-family:var(--display);font-weight:500;letter-spacing:-.022em;font-size:1.35rem;margin-top:1.1rem}
.dish p{font-size:.88rem;line-height:1.65;color:rgba(251,253,254,.55);margin-top:.5rem}
.draghint{display:flex;align-items:center;gap:10px;padding:0 var(--pad) 1.2rem;font-size:.62rem;
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(251,253,254,.38)}
.draghint i{width:30px;height:1px;background:currentColor;display:block}

/* ---------- experiences: pinned crossfade ---------- */
.pinwrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:start}
@media(max-width:900px){.pinwrap{grid-template-columns:1fr}}
.pinvis{position:sticky;top:12vh;height:min(74vh,660px);border-radius:6px;overflow:hidden;
  background:linear-gradient(135deg,#0A2E38,#127E9A 62%,#2FBEDF)}
@media(max-width:900px){.pinvis{height:46vh;top:9vh}}
.pinvis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transform:scale(1.07);transition:opacity 1s var(--ease),transform 1.6s var(--ease)}
.pinvis img.on{opacity:1;transform:scale(1)}
.pinvis::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,24,30,0) 55%,rgba(6,24,30,.6) 100%)}
.exp{padding:clamp(30px,10vh,110px) 0;border-bottom:1px solid rgba(255,255,255,.1);opacity:.32;
  transition:opacity .6s var(--ease)}
.exp.active{opacity:1}
.exp:last-child{border-bottom:0}
.exp .n{font-family:var(--display);font-style:italic;font-size:.85rem;color:var(--lagoon-lt)}
.exp h3{font-family:var(--display);font-optical-sizing:auto;font-weight:500;letter-spacing:-.03em;
  line-height:1.04;font-size:clamp(1.6rem,3.6vw,2.7rem);margin-top:.5rem}
.exp p{font-size:.98rem;line-height:1.75;color:rgba(251,253,254,.62);margin-top:1rem;max-width:44ch}

/* ---------- parallax break ---------- */
.break{position:relative;height:min(90vh,820px);overflow:hidden;margin:clamp(40px,8vh,110px) 0}
.break .layer{position:absolute;inset:-12% 0;will-change:transform;
  background:linear-gradient(135deg,#0A2E38,#127E9A 62%,#2FBEDF)}
.break img{width:100%;height:100%;object-fit:cover}
.break .quote{position:absolute;inset:0;z-index:2;display:grid;place-items:center;text-align:center;
  padding:var(--pad);background:rgba(6,24,30,.42)}
.break .quote p{font-family:var(--display);font-style:italic;font-weight:400;letter-spacing:-.025em;
  line-height:1.18;font-size:clamp(1.5rem,4.4vw,3.4rem);max-width:19ch}

/* ---------- facts ---------- */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.12);border-radius:4px;overflow:hidden;margin-bottom:clamp(40px,8vh,100px)}
@media(max-width:700px){.facts{grid-template-columns:1fr}}
.fact{background:var(--ink);padding:clamp(24px,3.4vw,40px)}
.fact .k{font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(251,253,254,.4)}
.fact .v{font-family:var(--display);font-optical-sizing:auto;font-weight:500;letter-spacing:-.028em;
  font-size:clamp(1.3rem,2.6vw,2rem);margin-top:.5rem;line-height:1.1}

/* ---------- closing ---------- */
.closing{position:relative;min-height:min(92vh,860px);display:grid;place-items:center;overflow:hidden;text-align:center}
.closing .layer{position:absolute;inset:-10% 0;background:linear-gradient(135deg,#0A2E38,#127E9A 62%,#2FBEDF)}
.closing img{width:100%;height:100%;object-fit:cover}
.closing::after{content:"";position:absolute;inset:0;background:rgba(6,24,30,.6)}
.closing .inner{position:relative;z-index:3;padding:var(--pad)}
.closing h2{font-family:var(--display);font-optical-sizing:auto;font-weight:500;letter-spacing:-.038em;
  line-height:.98;font-size:clamp(2rem,6.4vw,5rem);max-width:15ch;margin:0 auto}
.btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:2.2rem}
.btn{display:inline-flex;align-items:center;gap:9px;font-size:.84rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:17px 32px;border-radius:999px;border:1px solid transparent;
  background:var(--paper);color:var(--ink);transition:transform .25s var(--ease),filter .25s var(--ease)}
.btn:hover{transform:translateY(-2px);filter:brightness(.95)}
.btn:active{transform:scale(.97);transition-duration:100ms}
.btn.ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.34);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn.ghost:hover{background:rgba(255,255,255,.16)}

footer{padding:clamp(28px,5vh,52px) 0;border-top:1px solid rgba(255,255,255,.1)}
.frow{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;font-size:.78rem;color:rgba(251,253,254,.45)}
.frow a:hover{color:var(--lagoon-lt)}

/* ---------- motion off ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important}
  .rt > i,.fade{transform:none!important;opacity:1!important;transition:none!important}
  .vcard{position:static!important;margin-bottom:3vh}
  .pinvis{position:static!important;height:52vh}
  .pinvis img{opacity:1!important;transform:none!important}
  .pinvis img:not(.on){display:none}
  .exp{opacity:1!important}
  .hero .layer,.break .layer,.closing .layer{transform:none!important}
  .marq .track{animation:none!important}
}

/* Travel journal: paper, ink, keepsakes, and physical photo motion. */
:root{--paper:#f4f0e6;--ink:#193d4b;--lagoon:#087ca0;--lagoon-lt:#087ca0}
body{background-color:var(--paper);color:var(--ink);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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23766544' opacity='.075' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");}
body::before{content:'';position:fixed;left:clamp(9px,2vw,30px);top:0;bottom:0;width:2px;background:#be665a33;z-index:5;pointer-events:none}
header{color:var(--ink);background:#f4f0e6ed;border-bottom:1px solid #193d4b20}
header.solid{background:#f4f0e6f5;backdrop-filter:none}
.brand span,.navlinks a{color:var(--ink)}.navlinks a:hover{color:var(--lagoon)}
.hero{margin:18px;min-height:680px;height:calc(100svh - 36px);border:12px solid #fffdf7;box-shadow:0 8px 22px #26372e25;color:#fffdf7}
.hero .scrim{background:linear-gradient(0deg,#102e3690,transparent 70%)}
.hero .inner{padding-bottom:40px}.hero .eyebrow{color:#fffdf7}.hero .meta{border-top:1px solid #193d4b55;margin-top:20px;padding-top:14px}
.hero .meta div,.hero .meta b{color:var(--ink)}
h1.big{font-size:clamp(2.2rem,5.5vw,5.5rem);max-width:18ch}
.hero .inner{width:auto;background:var(--paper);color:var(--ink);padding:28px 40px;margin:0 30px 30px;transform:rotate(-2deg);box-shadow:3px 8px 14px #102e3630}
.hero .eyebrow{color:var(--lagoon);margin-bottom:14px}.scrollcue{color:white}
.hero .inner::before,.daynight::before,.vcard::before,.dish::before{content:'';position:absolute;width:100px;height:32px;background:#c9ba8ab3;left:40%;top:-16px;transform:rotate(-5deg);z-index:7;box-shadow:0 1px 2px #193d4b18;clip-path:polygon(3% 0,97% 3%,100% 90%,1% 100%);pointer-events:none}
.statement{position:relative;background:repeating-linear-gradient(transparent 0 31px,#64849124 31px 32px);margin-top:70px;margin-bottom:50px;padding-top:55px;padding-bottom:55px}
.statement .sub,.shead p,.dish p,.exp p,.frow{color:#425b61}.statement p{max-width:30ch}
.daynight{overflow:visible;border:12px solid #fffdf7;border-bottom-width:42px;transform:rotate(1deg);box-shadow:4px 10px 18px #26372e20}
.daynight img{border-radius:0}.dnswitch{z-index:8}.dnswitch button{min-height:44px;color:white}.dnswitch button.on{color:var(--ink)}
.marq{border:0;background:#dbe6df;transform:rotate(-1deg);margin-top:70px}.marq span{color:#335e68}.marq span em{opacity:1}
.shead{padding-left:var(--pad);padding-right:var(--pad)}.shead .no,.exp .n{color:var(--lagoon)}
.stack{perspective:1600px}.vcard{border:12px solid #fffdf7;border-bottom-width:0;border-radius:0;overflow:visible;background:#fffdf7;box-shadow:3px 9px 22px #26372e26;transform-origin:8% 50%}
.vcard .pic{height:min(62vh,600px);clip-path:inset(0 0 100% 0);transform:rotateX(9deg);transform-origin:center top;transition:clip-path .9s var(--swing),transform 1s var(--swing)}
.vcard.in .pic{clip-path:inset(0);transform:none}.vcard .pic::after{display:none}.vcard .cap{position:relative;padding:22px 16px 28px;color:var(--ink)}.vcard .cap h3{font-size:clamp(1.5rem,3vw,2.6rem);max-width:20ch}.vcard .cap p{color:#425b61}.vcard .idx{background:var(--paper);color:var(--lagoon);padding:6px 15px;transform:rotate(-5deg)}
.draghint{color:var(--ink);font-size:14px;text-transform:none;letter-spacing:0}.rail{padding-top:28px;perspective:1200px;scroll-snap-type:x mandatory;touch-action:pan-x pan-y}
.dish{position:relative;background:#fffdf7;padding:12px 12px 24px;box-shadow:3px 7px 14px #26372e25;transform-origin:left center;will-change:transform}.dish:nth-child(even){--tilt:2deg}.dish:nth-child(odd){--tilt:-2deg}.dish.fade{transform:translateY(36px) rotate(5deg)}.dish.fade.in{transform:perspective(1000px) rotateY(var(--turn,0deg)) rotate(var(--tilt));transition:opacity .6s,transform .12s linear}.dish .pic{border-radius:0}.dish h3,.dish p,.dish .mini{margin-left:8px;margin-right:8px}
.railnav{display:flex;justify-content:flex-end;gap:12px;padding:0 var(--pad) 24px}.railnav button{border:1px solid #193d4b55;color:var(--ink);background:#fffdf7;padding:10px 18px;min-height:44px;box-shadow:2px 3px 0 #193d4b20;transform:rotate(-2deg)}.railnav button:active{transform:translateY(2px)}
.pinvis{border:12px solid #fffdf7;border-bottom-width:40px;border-radius:0;box-shadow:4px 9px 18px #26372e25;perspective:1000px}.pinvis img{transform:translateY(-8%) rotate(-7deg);transform-origin:50% 0;clip-path:inset(0 0 100% 0);transition:opacity .35s,transform .8s var(--swing),clip-path .8s var(--swing)}.pinvis img.on{transform:none;clip-path:inset(0)}.pinvis::after{inset:6px auto auto 50%;width:24px;height:45px;background:none;border:3px solid #708080;border-radius:12px;transform:translateX(-50%) rotate(8deg);box-shadow:1px 2px 2px #193d4b40}
.exp{border-color:#193d4b22}.break{margin-left:var(--pad);margin-right:var(--pad);border:12px solid #fffdf7;transform:rotate(-1deg);color:#fffdf7}.break .quote{background:#102e3640}
.facts{background:#193d4b;border:2px solid var(--ink);border-radius:0;transform:rotate(-1deg)}.fact{background:var(--paper)}.fact .k{color:#a34436}.closing{color:#fffdf7;margin:18px;border:12px solid #fffdf7}.closing .btn{color:var(--ink)}.closing .ghost{background:var(--paper)}footer{border-color:#193d4b30}
#intro{background:#e8e2d5;perspective:1200px;overflow:hidden;cursor:pointer}
#intro .field{fill:transparent}#intro .sheet{mask:none;transform-origin:28% 70%;transition:transform 1.15s cubic-bezier(.45,.02,.65,1),opacity .9s .2s;filter:drop-shadow(8px 14px 12px #193d4b40)}
#intro .stock{fill:#fffdf7}#intro .rule{stroke:#193d4b}#intro .cut{display:none}#intro.in .card{transform:rotate(-7deg) scale(var(--rest));transform-origin:50% 50%}
#intro.zoom .sheet{transform:translate3d(55%,-75%,280px) rotate(-28deg) rotateY(-65deg);opacity:0}#intro.zoom .card{opacity:1;transform:rotate(-7deg) scale(var(--rest));transition:none}
#intro .hint{color:var(--ink);font-size:14px;letter-spacing:.04em;text-transform:none}#intro .hint i{background:var(--lagoon)}
.journal-note{font:italic 21px var(--display);color:var(--lagoon);padding:16px 0 0;text-align:right;transform:rotate(-3deg)}
@media(max-width:700px){.hero{margin:8px;border-width:7px;min-height:620px;height:calc(100svh - 16px)}.hero .inner{padding:22px 18px;margin:0 12px 30px}.hero .meta{gap:12px}.hero .meta div{font-size:13px}.vcard{border-width:7px}.vcard .cap{padding:18px 10px}.vcard .cap p{font-size:14px}.shead h2{font-size:2.4rem}.dish{flex-basis:82vw}.pinvis{top:9vh}.statement{margin-top:40px}.hero .eyebrow{font-size:10px}.break{border-width:7px}.closing{margin:8px;border-width:7px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}.vcard .pic{clip-path:none;transform:none}.dish.fade.in{transform:none}.pinvis img{clip-path:none}.hero .inner{transform:none}}


.island-map{padding-bottom:70px;scroll-margin-top:80px}.island-map .shead{padding-top:30px;padding-left:0;padding-right:0}.island-map h2{font-size:clamp(2rem,4.5vw,4rem)}
.map-print{position:relative;background:#fffdf7;padding:14px;box-shadow:4px 9px 22px #26372e25}.map-print::before{content:'';position:absolute;top:-13px;left:45%;width:110px;height:30px;background:#c9ba8ab3;transform:rotate(-4deg);z-index:2;pointer-events:none}
.map-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 4px 20px}.map-toolbar p{font:italic 20px var(--display)}.map-toolbar>div{display:flex;gap:8px;align-items:center}.map-toolbar button{min-width:44px;min-height:44px;padding:6px 12px;border:1px solid #193d4b40;background:var(--paper);color:var(--ink);font-size:17px}.map-toolbar output{font-size:13px;min-width:40px;text-align:center}
.map-window{width:100%;max-height:72vh;overflow:auto;background:#125f73;overscroll-behavior:contain;scrollbar-color:#94bdb9 #125f73}.map-art{position:relative;width:100%;min-width:850px;isolation:isolate}.map-art>img{width:100%;height:auto;max-width:none}.map-pin{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;border:0;padding:0;display:grid;place-items:center;background:transparent;color:var(--ink);z-index:1}.map-pin span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#fffdf7;border:2px solid #087ca0;box-shadow:0 2px 4px #193d4b50;font-size:12px;font-weight:700;transition:transform .2s,background .2s}.map-pin:hover,.map-pin:focus-visible,.map-pin[aria-pressed=true]{z-index:3}.map-pin:hover span,.map-pin:focus-visible span{transform:scale(1.25)}.map-pin[aria-pressed=true] span{background:#a34436;border-color:#fffdf7;color:white;transform:scale(1.25)}
.map-caption{padding:24px 12px 14px;min-height:135px}.map-caption>span{font:italic 16px var(--display);color:#a34436}.map-caption h3{font:500 clamp(21px,3vw,30px) var(--display);margin:4px 0}.map-caption p{font-size:14px;color:#425b61}.map-directory{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 20px;margin-top:28px}.map-directory button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;min-height:48px;padding:9px 8px;border:0;background:transparent;color:var(--ink);font-size:14px;line-height:1.4}.map-directory span{font:italic 16px var(--display);color:#087ca0;min-width:25px}.map-directory button:hover,.map-directory button[aria-pressed=true]{background:#dbe6df}.map-toolbar button:active{transform:translateY(2px)}
@media(max-width:700px){.map-toolbar{align-items:flex-start;flex-direction:column;gap:10px}.map-print{padding:8px}.map-directory{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.map-directory button{font-size:13px;gap:6px}.map-window{height:60vh;max-height:520px}.map-caption{padding:18px 8px}.island-map .shead p{max-width:100%}}

.map-pin::after{content:attr(aria-label);position:absolute;bottom:39px;left:50%;transform:translateX(-50%) translateY(4px);background:#fffdf7;color:var(--ink);padding:7px 11px;box-shadow:2px 3px 7px #193d4b30;font-size:13px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}.map-pin:hover::after,.map-pin:focus-visible::after,.map-pin[aria-pressed=true]::after{opacity:1;transform:translateX(-50%) translateY(0)}.map-toolbar button:disabled{opacity:.4;cursor:default}

#intro .ticket-peel{position:absolute;left:50%;top:48%;width:min(710px,82vw);transform:translate(-50%,-50%) rotate(-7deg);transform-origin:15% 85%;opacity:0;transition:transform 1.15s cubic-bezier(.45,.02,.65,1),opacity .4s;filter:drop-shadow(8px 14px 12px #193d4b40)}
#intro.in .ticket-peel{opacity:1}#intro .ticket-art{width:100%;height:auto;display:block}
#intro.zoom .ticket-peel{transform:translate(20%,-170%) rotate(-28deg) rotateY(-65deg);opacity:0;transition:transform 1.15s cubic-bezier(.45,.02,.65,1),opacity .9s .2s}

/* Keep rotated keepsakes inside their page and tall cards readable. */
.hero .inner{max-width:calc(100% - 80px);min-width:0;transform-origin:center bottom}
.hero .meta>div,.shead>div,.pinwrap>*,.map-directory li{min-width:0}
.shead h2,.vcard .cap h3,.exp h3,.map-caption h3{overflow-wrap:break-word}
.journal-note{width:calc(100% - var(--pad)*2);max-width:1192px;margin:12px auto 0;padding:12px 8px 16px;transform:rotate(-1deg);overflow-wrap:break-word}
.marq{margin-left:16px;margin-right:16px}
.vcard .cap{align-items:flex-start}.vcard .cap p{flex:1 1 280px}
.daynight{height:min(72svh,700px)}
.map-print,.map-window{min-width:0;max-width:100%}
.map-toolbar>div{flex-wrap:wrap}.map-directory button{overflow-wrap:anywhere}
@media(max-width:900px),(max-height:760px){
.vcard{position:relative;top:auto;transform:none!important;margin-bottom:48px}
.vcard .pic{height:auto;aspect-ratio:4/3}
.pinvis{position:relative;top:auto;height:auto;aspect-ratio:4/3}
.exp{opacity:1;padding:32px 0}
.hero .inner{max-width:calc(100% - 40px);margin-left:20px;margin-right:20px}
}
@media(max-width:700px){
.hero .inner{max-width:calc(100% - 36px);margin-left:18px;margin-right:18px;transform:rotate(-1deg)}
.hero .meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
.hero .meta div{overflow-wrap:break-word}
.hero{min-height:660px}
.vcard .cap{display:block}.vcard .cap p{margin-top:14px}
.daynight{height:auto;aspect-ratio:4/5;transform:rotate(.5deg)}
.break{transform:rotate(-.5deg)}
.rail{padding-left:30px;padding-right:30px;padding-top:38px}
.dish{flex-basis:calc(100vw - 76px);--tilt:-1deg}.dish:nth-child(even){--tilt:1deg}
.railnav{flex-wrap:wrap}.railnav button{font-size:13px;padding:10px 12px}
}

/* Gallery gestures belong to the rail, not native image drag-and-drop. */
.rail img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
.rail{user-select:none;-webkit-user-select:none}

.map-stage{position:relative;isolation:isolate}
.map-print::before{width:19px;height:19px;top:-8px;left:50%;border-radius:50%;background:#e43d44;clip-path:none;transform:translateX(-50%);box-shadow:inset -3px -4px 0 #a3242c,2px 5px 4px #193d4b45}
.map-print::after{content:'';position:absolute;top:-5px;left:calc(50% - 5px);width:5px;height:5px;border-radius:50%;background:#ffffff85;z-index:3;pointer-events:none}
.map-window{scrollbar-width:none;cursor:grab}.map-window::-webkit-scrollbar{display:none}
.map-controls{position:absolute;right:16px;top:16px;z-index:10;display:flex;flex-direction:column;align-items:center;gap:12px}
.map-controls button{display:grid;place-items:center;width:52px;height:52px;border:0;color:#102a32;background:#fbfdfd;font-size:25px;font-weight:600;line-height:1;touch-action:manipulation}
.map-zoom-buttons{border:1px solid #ccd4d7;border-radius:27px;overflow:hidden;box-shadow:0 2px 7px #193d4b26}
.map-zoom-buttons button+button{border-top:1px solid #dbe1e3}.map-controls button:hover{background:#edf3f3}.map-controls button:active{background:#dce8e8}
.map-controls #map-reset{border:1px solid #ccd4d7;border-radius:50%;color:#607d88;box-shadow:0 2px 7px #193d4b26}
.map-controls button:disabled{color:#a8b5ba;cursor:default}.map-zoom-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:700px){.map-controls{top:12px;right:12px}.map-controls button{width:46px;height:46px}}

/* Let vertical touch gestures go directly to the document. */
.rail{touch-action:pan-y pinch-zoom;overflow-y:hidden;overscroll-behavior-y:auto;scroll-snap-type:x proximity}
.rail.dragging{scroll-snap-type:none}

/* The pin's steel shaft projects from under its red head into the paper. */
.map-pin-needle{position:absolute;top:5px;left:calc(50% - 3px);width:3px;height:19px;background:#859398;transform:rotate(24deg);transform-origin:top center;border-radius:0 0 2px 2px;box-shadow:2px 2px 2px #193d4b35;z-index:1;pointer-events:none}
.map-pin-needle::after{content:'';position:absolute;bottom:-3px;left:0;border-left:1.5px solid transparent;border-right:1.5px solid transparent;border-top:4px solid #61757b}
.map-print::before{z-index:3}.map-print::after{z-index:4}

#experiences .pinvis::after{inset:-20px auto auto 50%;width:48px;height:64px;border:0;border-radius:0;background:url('../images/checkin/blue-paperclip.svg') center/contain no-repeat;transform:translateX(-50%) rotate(-28deg);box-shadow:none;filter:drop-shadow(1px 2px 1px #193d4b30);z-index:5}

#experiences .pinvis{overflow:visible}

/* Motion direction: peel the cover, place the prints, then let the reader lead. */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-soft:cubic-bezier(.33,1,.68,1);--t-press:140ms;--t-hover:180ms;--t-reveal:700ms}
#intro{background:transparent;transition:opacity .15s,visibility .15s}
#intro::before{content:'';position:absolute;inset:0;background:#e8e2d5;opacity:1;transition:opacity 440ms var(--ease-out);pointer-events:none}
#intro.zoom::before{opacity:0}
#intro .ticket-peel{opacity:1;transform:translate(-50%,-50%) rotate(-7deg);transition:transform 760ms cubic-bezier(.32,.02,.5,1),opacity 300ms}
#intro.zoom .ticket-peel{transform:translate(10%,-145%) rotate(-23deg) rotateY(-55deg);opacity:0;transition:transform 760ms cubic-bezier(.32,.02,.5,1),opacity 300ms ease 430ms}
#intro .hint{transition:opacity 220ms ease}#intro.zoom .hint{opacity:0}
.rt{padding-bottom:.08em;margin-bottom:-.08em}.rt>i{transition:transform 640ms var(--ease-out)}
.fade{transform:translateY(18px);transition:opacity 520ms ease,transform 700ms var(--ease-out)}
.hero .eyebrow{transition-delay:60ms}.hero .meta{transition-delay:160ms}
.vcard .pic{clip-path:inset(0);transform:translateY(16px) rotateX(3deg);opacity:.35;transition:opacity 550ms ease,transform 800ms var(--ease-out)}.vcard.in .pic{opacity:1;transform:none}
.vcard .pic img{transform:scale(1.025);transition:transform 1s var(--ease-soft)}.vcard.in .pic img{transform:scale(1)}
.dish.fade{transform:translateY(22px) rotate(3deg)}.dish.fade.in{transition:opacity 500ms ease,transform 200ms var(--ease-out)}.rail.dragging .dish.fade.in{transition:opacity 500ms ease,transform 70ms linear}
.dish:hover .pic img{transform:none}.dish .pic img{transition:none}
.pinvis img{clip-path:inset(0);transform:translateY(-10px) rotate(-1.2deg) scale(1.015);opacity:0;transition:opacity 380ms ease,transform 650ms var(--ease-out)}.pinvis img.on{opacity:1;transform:none}
.daynight img{transition:opacity 650ms ease}
.journal-enter{opacity:1}.js .journal-enter{opacity:0;translate:0 20px;transition:opacity 650ms ease,translate 800ms var(--ease-out)}.js .journal-enter.in{opacity:1;translate:0 0}
.marq .track{animation-duration:65s}.marq:hover .track{animation-play-state:paused}
button,.mini{transition:transform var(--t-press) var(--ease-out),background-color var(--t-hover) ease,color var(--t-hover) ease}
.map-controls button:active{transform:scale(.95)}.map-directory button:active{transform:translateX(2px)}
html:not(.js) .fade,html:not(.js) .rt>i,html:not(.js) .vcard .pic{opacity:1;transform:none;clip-path:none}html:not(.js) #intro{display:none}html:not(.js) body.lock{overflow:auto}
@media(prefers-reduced-motion:reduce){
#intro{display:none}.js .journal-enter{opacity:1;translate:none;transition:none}.vcard .pic{opacity:1;transform:none}.pinvis img{transform:none}.rt>i,.fade{transition:none!important}button,.mini{transition:none}.hero .meta,.hero .eyebrow{transition-delay:0ms}
}

.stack{perspective:none}.vcard{transform-origin:center center}

/* One clip, two aligned layers: rear wire behind the print, inner wire above it. */
#experiences .pinvis{isolation:isolate}
#experiences .pinvis img{z-index:1}
#experiences .pinvis::before,#experiences .pinvis::after{content:'';position:absolute;inset:-29px auto auto 50%;width:38px;height:83px;border:0;border-radius:0;transform:translateX(-50%) rotate(12deg);transform-origin:50% 30%;box-shadow:none;pointer-events:none;background-position:center;background-size:contain;background-repeat:no-repeat}
#experiences .pinvis::before{z-index:0;background-image:url('../images/checkin/journal-clip-back.svg');filter:drop-shadow(1px 2px 1px #193d4b30)}
#experiences .pinvis::after{z-index:2;background-image:url('../images/checkin/journal-clip-front.svg');clip-path:none;filter:drop-shadow(1px 2px 1px #193d4b38)}


/* A single-column story needs one shared containing block for the sticky photo. */
@media(max-width:900px){
#experiences .pinwrap{display:block}
#experiences .pinvis{position:sticky;top:76px;height:clamp(220px,40svh,360px);aspect-ratio:auto;z-index:10;margin-bottom:28px;background:#fffdf7;border-bottom-width:20px;box-shadow:0 10px 18px #26372e25}
#experiences .exp{min-height:44svh;padding:32px 0;scroll-margin-top:calc(76px + 40svh + 28px)}
}
@media(max-width:900px) and (max-height:500px){#experiences .pinvis{top:60px;height:120px}}

@media(max-width:900px){
#experiences .explist{height:max(300px,calc(60svh - 120px));overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;position:relative;scroll-behavior:smooth}
#experiences .explist::-webkit-scrollbar{display:none}
#experiences .exp{min-height:100%;padding:20px 0 30px;scroll-snap-align:start;scroll-margin-top:0;border:0;opacity:var(--text-opacity,1);transform:translateY(var(--text-shift,0px));transition:none}
#experiences .exp:focus-within{opacity:1}
#experiences .pinvis{margin-bottom:12px}
}
@media(prefers-reduced-motion:reduce){#experiences .explist{scroll-behavior:auto;scroll-snap-type:y proximity}#experiences .exp{opacity:1!important;transform:none!important}}

/* Mobile villa prints stack again, with room left for their captions. */
@media(max-width:900px) and (prefers-reduced-motion:no-preference){
#villas .vcard{position:sticky;top:82px;margin-bottom:40px;transform-origin:center top}
#villas .vcard .pic{height:clamp(150px,34svh,320px);aspect-ratio:auto}
#villas .vcard .cap{padding:18px 12px 22px}
#villas .vcard .cap h3{font-size:clamp(1.4rem,5vw,2rem)}
#villas .vcard .cap p{font-size:14px;line-height:1.6;margin-top:12px}
#villas .stack{padding-bottom:64px}
}
@media(max-width:900px) and (max-height:500px){#villas .vcard{position:relative;top:auto}}

/* Let page scrolling continue at map edges and keep short screens readable. */
.map-window{overscroll-behavior-y:auto}
@media(max-width:900px) and (max-height:500px){
#experiences .explist{height:auto;overflow:visible;scroll-snap-type:none}
#experiences .exp{min-height:0;opacity:1;transform:none;padding:24px 0}
}

/* Journal edition: annotations, collected prints and tactile chapter leaves. */
:root{--hand:'Caveat',cursive;--paper:#e9e3d3;--ink:#243f48}
body{background-color:#dcd5c3}main{max-width:1600px;margin:auto;background-color:var(--paper);box-shadow:-10px 0 24px #213a4320,10px 0 24px #213a4318;background-image:linear-gradient(90deg,#203a4312,transparent 5%,transparent 98%,#203a430a)}
.journal-note,.shead .no,.exp .n,.vcard .idx,.fact .v,.draghint,.scrollcue{font-family:var(--hand);font-style:normal}
.journal-note{font-size:27px;line-height:1.2}.shead .no{font-size:24px}.vcard .idx{font-size:25px}.exp .n{font-size:23px}.draghint{font-size:22px;font-weight:500}.fact .v{font-size:30px}
.hero{margin-top:0;border-top-width:68px}.hero .inner{background:#f2ede0;box-shadow:3px 7px 12px #1b303335}.hero .eyebrow{font:22px var(--hand);letter-spacing:0;text-transform:none}.hero .eyebrow::before{display:none}.hero .meta b{font-size:10px}.hero .meta div{font-family:var(--hand);font-size:21px}
.statement{background-color:#f2ede0;max-width:1100px;width:calc(100% - var(--pad)*2);box-shadow:3px 5px 10px #193d4b18;transform:rotate(-.5deg)}.statement::after{content:'a note from the island';position:absolute;right:24px;bottom:8px;font:23px var(--hand);color:#087ca0;transform:rotate(-3deg)}
.hero .inner::before,.daynight::before,.vcard::before,.dish::before{background-color:#e2d3acc4;background-image:linear-gradient(176deg,#ffffff55,transparent 55%,#1b2a3010);clip-path:polygon(3% 0,97% 3%,99% 15%,96% 28%,100% 45%,97% 61%,100% 80%,96% 100%,2% 96%,4% 78%,0 62%,3% 42%,0 23%)}
.vcard:nth-child(2)::before,.dish:nth-child(even)::before{background-color:#8cc6d68a;transform:rotate(5deg)}.vcard:nth-child(3)::before,.dish:nth-child(3n)::before{background-color:#c6877a75;transform:rotate(-9deg)}
.vcard .cap h3,.dish h3{font-family:var(--hand);font-weight:600}.vcard .cap h3{font-size:clamp(28px,3.3vw,44px)}.dish h3{font-size:30px}.vcard .cap p,.dish p{color:#384f55}
#dining{background:#dfd6c055;padding-bottom:12px}.marq{background:#d7e1d7}.marq span{font-family:var(--hand);font-style:normal}
#experiences .pinvis{box-shadow:3px 8px 14px #213a4330,7px 8px 0 3px #faf6eb,10px 11px 0 3px #213a4320,13px 14px 0 3px #e4dac3}
#experiences .pinvis img{border:0}.facts{background:#213a43}.fact{background:#f2ede0}.map-print{background:#faf6eb}.map-caption>span{font:22px var(--hand)}
.journal-tabs{position:fixed;right:0;top:32%;z-index:110;display:flex;flex-direction:column;gap:6px;align-items:flex-end}.journal-tabs a{min-width:65px;min-height:44px;padding:8px 12px;background:#f5f0e3;color:#334b52;font:22px var(--hand);box-shadow:-2px 2px 5px #193d4b20;border-radius:3px 0 0 3px;transform:translateX(8px);transition:transform 180ms,background-color 180ms}.journal-tabs a[aria-current],.journal-tabs a:hover,.journal-tabs a:focus-visible{transform:translateX(0);background:#d9e8e8;color:#0073b2}
.journal-folio{font:20px var(--hand);color:#496169;margin-left:auto}
@media(min-width:1100px){main{padding-right:30px}.journal-tabs a{min-width:76px;padding-right:16px}}
@media(max-width:700px){.journal-tabs{top:auto;bottom:12px;right:50%;transform:translateX(50%);flex-direction:row;gap:4px}.journal-tabs a{min-width:56px;padding:7px 10px;transform:none;border-radius:2px;font-size:20px;box-shadow:0 2px 6px #193d4b25}.journal-tabs a[aria-current]{transform:translateY(-4px)}footer{padding-bottom:85px}.hero .meta div{font-size:18px}.hero .eyebrow{font-size:20px}.hero .inner{padding:20px 16px}.hero{min-height:730px}.statement{padding-bottom:65px}.vcard .cap h3{font-size:28px!important}.journal-note{font-size:24px}.shead .no{font-size:23px}.map-directory button{font-size:13px}}
@media(prefers-reduced-motion:reduce){.journal-tabs a{transition:none}.statement{transform:none}}

.journal-signoff{max-width:1600px;margin:0 auto;padding:100px var(--pad) 50px;background-color:var(--paper);border:0;display:flex;flex-direction:column;align-items:center;gap:34px;background-image:repeating-linear-gradient(90deg,transparent 0 5px,#6d604008 5px 6px)}
.checkin-stamp{display:block;width:min(620px,80%);height:auto;transform:rotate(-11deg);opacity:.8;margin:20px 0 30px}
.signoff-link{font:clamp(18px,2.4vw,27px) var(--sans);color:#60777d;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px}.signoff-link:hover{color:#0073b2}.signoff-credit{font-size:12px;color:#60777d}
@media(max-width:700px){.journal-signoff{padding:65px 24px 100px;gap:22px}.checkin-stamp{width:92%;margin:12px 0 24px}}

#villas .vcard:last-child .cap{padding-bottom:12px}
.residence-note{display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:0 24px 24px;color:var(--ink);background:#fffdf7}
.residence-note svg{width:110px;height:82px;flex:0 0 110px;overflow:visible}.residence-note path{fill:none;stroke:#b34437;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.residence-note p{font:clamp(24px,3vw,35px)/1.25 var(--hand);transform:rotate(-3deg)}
@media(max-width:700px){.residence-note{gap:10px;padding:0 12px 18px}.residence-note svg{width:65px;height:62px;flex-basis:65px}.residence-note p{font-size:25px}#villas .vcard:last-child .pic{height:clamp(140px,28svh,260px)}}

.dish .oak-rating{position:relative;display:inline-block;margin:22px 10px 2px;padding:3px 18px 9px;font:30px/1.2 var(--hand);color:var(--ink);transform:rotate(-5deg)}.oak-rating svg{position:absolute;inset:-3px 0 0;width:100%;height:100%;overflow:visible;pointer-events:none}.oak-rating path{fill:none;stroke:#b34437;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

#experiences .castaway-favourite{display:flex;align-items:center;gap:9px;margin:12px 0 6px;font:28px/1.15 var(--hand);color:#b34437;transform:rotate(-3deg);transform-origin:left center}.castaway-favourite svg{width:30px;height:30px;flex:none}.castaway-favourite path{fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}

/* Handwritten navigation, with native scrolling kept under the reader's control. */
html{scrollbar-width:thin;scrollbar-color:#0073b2 #e9e3d3;scroll-padding-top:85px}
html::-webkit-scrollbar{width:10px}html::-webkit-scrollbar-track{background:#e9e3d3}html::-webkit-scrollbar-thumb{background:#0073b2;border:2px solid #e9e3d3;border-radius:2px}html::-webkit-scrollbar-thumb:hover{background:#005984}
.journal-scroll{display:flex;align-items:center;gap:14px;background:#f2ede0;color:#405e65;padding:8px 16px;transform:rotate(-3deg);font:28px/1 var(--hand);text-transform:none;letter-spacing:0;font-weight:400;bottom:28px}
.journal-scroll svg,.chapter-turn svg{width:60px;height:50px;flex:none;overflow:visible}.journal-scroll path,.chapter-turn path{fill:none;stroke:#b34437;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.chapter-turn{max-width:1320px;margin:10px auto 40px;padding:12px var(--pad);display:flex;justify-content:flex-end}.chapter-turn a{display:flex;align-items:center;gap:14px;font:28px/1.2 var(--hand);color:#496169;transform:rotate(-3deg);min-height:48px}.chapter-turn a:hover,.journal-scroll:hover{color:#0073b2}.chapter-turn a:active{transform:rotate(-3deg) translateY(2px)}
@media(max-width:700px){.journal-scroll{display:flex;bottom:12px;right:20px;font-size:24px;padding:4px 12px}.journal-scroll svg{width:38px;height:34px}.hero .inner{margin-bottom:75px}.chapter-turn{margin-bottom:28px}.chapter-turn a{font-size:25px}}

/* Inset the note's text and keep its signature in the document flow. */
#journal-intro{padding:clamp(28px,4vw,56px) clamp(24px,4vw,56px) 26px}
#journal-intro p{max-width:100%;overflow-wrap:break-word}
#journal-intro .sub{max-width:58ch}
#journal-intro::after{position:relative;display:block;right:auto;bottom:auto;margin:24px 0 0;text-align:right;transform:rotate(-2deg)}
@media(max-width:700px){#journal-intro{padding:28px 24px 24px}#journal-intro p:first-child{font-size:clamp(23px,6vw,30px);line-height:1.25}#journal-intro::after{font-size:22px}}

/* Island-view selector: handwritten tabs on paper rather than a glass switch. */
#dn .dnswitch{bottom:18px;gap:10px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
#dn .dnswitch button{position:relative;min-width:92px;min-height:46px;padding:8px 18px;background:#f2ede0;color:#496169;border:0;border-radius:1px;box-shadow:2px 3px 5px #193d4b25;font:26px/1.1 var(--hand);text-transform:none;letter-spacing:0;transform:rotate(-3deg);transition:transform 140ms var(--ease-out),color 180ms ease,background-color 180ms ease}
#dn .dnswitch button:nth-child(2){transform:rotate(3deg)}
#dn .dnswitch button::after{content:'';position:absolute;inset:5px 7px;border:2px solid #b34437;border-radius:48% 52% 46% 54%;transform:rotate(-7deg);opacity:0;pointer-events:none;transition:opacity 180ms ease}
#dn .dnswitch button.on{background:#fffaf0;color:#243f48}#dn .dnswitch button.on::after{opacity:1}
#dn .dnswitch button:hover{color:#0073b2}#dn .dnswitch button:active{transform:rotate(0deg) translateY(2px)}
@media(prefers-reduced-motion:reduce){#dn .dnswitch button,#dn .dnswitch button::after{transition:none}}

/* Map tools are small paper slips, matching the island-view tabs. */
.map-controls{gap:12px}.map-zoom-buttons{border:0;border-radius:1px;overflow:visible;background:#f2ede0;box-shadow:2px 3px 6px #193d4b30;transform:rotate(-3deg)}
.map-controls .map-zoom-buttons button{background:#f2ede0;color:#243f48;font:32px/1 var(--hand);border-radius:0}
.map-controls .map-zoom-buttons button+button{border-top:1px dashed #49616940}
.map-controls #map-reset{position:relative;background:#f2ede0;border:0;border-radius:1px;color:#496169;box-shadow:2px 3px 6px #193d4b30;transform:rotate(4deg)}
.map-controls #map-reset::after{content:'';position:absolute;inset:5px;border:1.5px solid #b34437;border-radius:48% 52% 46% 54%;transform:rotate(-7deg);pointer-events:none}
.map-controls button:hover:not(:disabled){background:#fffaf0;color:#0073b2}.map-controls button:disabled{color:#a8b5ba;opacity:.65}.map-controls #map-reset:active{transform:rotate(1deg) translateY(2px)}

/* A standalone linked wordmark replaces the navigation bar. */
header.logo-header,header.logo-header.solid{position:absolute;top:18px;left:var(--pad);right:auto;padding:0;border:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;z-index:120;transition:none}
header.logo-header.hide{transform:none}
.production-logo{display:inline-flex;align-items:center;min-height:44px}.production-logo img{display:block;width:150px;height:auto;max-height:56px;object-fit:contain}.production-logo:hover{opacity:.8}
@media(max-width:700px){header.logo-header,header.logo-header.solid{top:16px;left:24px}.production-logo img{width:125px;max-height:44px}}

.journal-reels{padding-top:65px;padding-bottom:24px;scroll-margin-top:30px}.films-heading{margin-bottom:35px}.films-heading h2{font:500 clamp(30px,4vw,48px)/1.1 var(--hand);color:var(--ink)}.films-heading p{font-size:15px;color:#496169;margin-top:10px}
.reel-postcards{display:flex;justify-content:center;align-items:flex-start;gap:clamp(18px,3vw,42px);padding:24px 16px 35px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}.reel-postcards::-webkit-scrollbar{display:none}
.reel-postcard{position:relative;flex:0 0 auto;width:min(30%,339px);min-width:0;padding:12px 12px 18px;background:#fffdf7;box-shadow:3px 7px 13px #193d4b25;transform:rotate(-2deg);scroll-snap-align:center}.reel-postcard:nth-child(2){transform:rotate(2deg);margin-top:14px}.reel-postcard:nth-child(3){transform:rotate(-1deg)}
.reel-postcard::before{content:'';position:absolute;top:-13px;left:calc(50% - 47px);width:94px;height:29px;z-index:2;background:#e2d3acb8;transform:rotate(-5deg);clip-path:polygon(3% 0,98% 3%,96% 23%,100% 49%,97% 74%,99% 100%,1% 96%,3% 72%,0 42%);pointer-events:none}.reel-postcard:nth-child(2)::before{background:#8cc6d68a;transform:rotate(5deg)}.reel-postcard:nth-child(3)::before{background:#c6877a75}
.reel-frame{position:relative;aspect-ratio:9/16;max-height:560px;background:#193d4b;overflow:hidden}.reel-frame video{display:block;width:100%;height:100%;object-fit:contain;background:#193d4b}.reel-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-3deg);display:grid;place-items:center;width:60px;height:54px;background:#f2ede0;border:0;border-radius:2px;box-shadow:2px 3px 8px #193d4b40;color:#0073b2}.reel-play svg{width:30px;height:30px;fill:currentColor}.reel-play::after{content:'';position:absolute;inset:4px;border:1.5px solid #b34437;border-radius:48% 52% 46% 54%;pointer-events:none}.reel-play:hover{background:#fffaf0}.reel-play:active{transform:translate(-50%,-50%) scale(.95)}.reel-play[hidden]{display:none}
.reel-postcard h3{font:500 clamp(24px,2.3vw,30px)/1.15 var(--hand);margin:15px 3px 0;color:var(--ink)}.reel-error{font-size:13px;color:#9f342e;margin-top:10px}.film-swipe{font:24px var(--hand);color:#496169;text-align:right;padding-right:16px}
@media(max-width:700px){.journal-reels{padding:42px 0 15px}.films-heading{padding:0 var(--pad);margin-bottom:15px}.films-heading h2{font-size:34px;max-width:19ch}.reel-postcards{justify-content:flex-start;padding:24px 28px 35px;gap:26px;scroll-padding-inline:28px}.reel-postcard{width:calc(min(560px,65svh) * .5625 + 24px);max-width:calc(100vw - 76px)}.reel-frame{max-height:min(560px,65svh)}.film-swipe{padding-right:28px}}
@media(prefers-reduced-motion:reduce){.reel-postcard,.reel-postcard:nth-child(2),.reel-postcard:nth-child(3){transform:none}}

.journal-tabs{top:22%}
@media(max-width:700px){.journal-tabs{top:auto;bottom:10px;left:12px;right:12px;transform:none;max-width:calc(100vw - 24px);overflow-x:auto;overflow-y:hidden;align-items:center;justify-content:flex-start;padding:7px 3px 6px;scrollbar-width:none;scroll-padding-inline:3px}.journal-tabs::-webkit-scrollbar{display:none}.journal-tabs a{flex:0 0 auto;white-space:nowrap}}




:root{--display:'Fraunces',Georgia,serif;--sans:'Instrument Sans',Arial,sans-serif;--hand:'Kalam',cursive}
body{font-weight:500}
h1.big,.shead h2,.exp h3{font-weight:500}
.journal-note,.shead .no,.exp .n,.vcard .idx,.fact .v,.draghint,.scrollcue,.films-heading h2,.reel-postcard h3,.reel-postcard h3,.vcard .cap h3,.dish h3,.journal-tabs a{font-weight:400}
.residence-note p,.castaway-favourite,.oak-rating,.journal-note{line-height:1.4}
.journal-tabs a{font-size:20px}.journal-note{font-size:24px}.films-heading h2{line-height:1.25}
@media(max-width:700px){.journal-tabs a{font-size:18px}.films-heading h2{font-size:30px}.residence-note p{font-size:22px}}

/* Keep essential navigation readable; script is reserved for personal annotations. */
.journal-tabs a{font:500 15px/1.4 var(--sans)}
.films-heading h2{font-family:var(--display);font-size:clamp(28px,3.4vw,44px);font-weight:500;line-height:1.2}
.vcard .cap h3,.dish h3,.reel-postcard h3{font-family:var(--display);font-weight:500}
#dn .dnswitch button{font:500 18px/1.3 var(--sans)}.map-controls .map-zoom-buttons button{font:500 26px/1 var(--sans)}
@media(max-width:700px){.journal-tabs a{font-size:14px}.reel-postcard h3{font-size:22px}.vcard .cap h3{font-size:26px!important}}

/* A clear, pen-written accent paired with the original editorial typography. */
body{font-weight:400}.journal-note,.residence-note p,.castaway-favourite,.oak-rating,.shead .no{font-weight:400;line-height:1.4}
.journal-note{font-size:23px}.shead .no{font-size:21px}.journal-scroll,.chapter-turn a{font-size:24px}.castaway-favourite{font-size:24px!important}
/* Compact chapter tabs and a readable activity print caption. */
.activity-caption{display:none}
#dining .shead{margin-bottom:20px;padding-bottom:0}
#dining .draghint{padding-bottom:0;margin-bottom:8px}
#dining .railnav{margin-top:0;margin-bottom:0}
#dining .rail{padding-top:20px}
@media(max-width:700px){
html{scroll-padding-bottom:76px}
.journal-tabs{left:8px;right:8px;bottom:calc(6px + env(safe-area-inset-bottom));max-width:none;gap:0;padding:0 3px;background:#f5f0e3;box-shadow:0 2px 8px #193d4b20}
.journal-tabs a{flex:1 0 auto;min-width:0;min-height:44px;padding:12px 6px;font-size:13px;line-height:20px;background:transparent;box-shadow:none;border-radius:0;transform:none}
.journal-tabs a[aria-current],.journal-tabs a:hover,.journal-tabs a:focus-visible{transform:none;box-shadow:inset 0 -3px #0073b2}
.hero .journal-scroll{bottom:74px}.hero .inner{margin-bottom:135px}
#dining .shead{gap:14px;margin-bottom:16px}
#dining .draghint{font-size:18px}
#dining .railnav{padding-top:0;padding-bottom:0}
}
@media(max-width:900px) and (min-height:501px){
#experiences .shead{margin-bottom:32px;gap:12px;padding-top:40px}
#experiences .pinvis{top:20px;border-bottom-width:56px;height:clamp(260px,44svh,400px)}
.activity-caption{display:flex;align-items:center;gap:6px;position:absolute;top:100%;left:0;right:0;height:56px;z-index:3;color:var(--ink)}
.activity-caption strong{flex:1;font:500 17px/1.2 var(--sans)}
.activity-caption small{font:13px var(--sans);white-space:nowrap}
.activity-caption button{width:36px;min-height:44px;flex:none;border:0;background:transparent;color:#0073b2;font:24px var(--sans);cursor:pointer}
.activity-caption button:disabled{opacity:.3;cursor:default}
#experiences .explist{height:max(320px,calc(56svh - 100px));scroll-padding-bottom:0}
#experiences .exp{padding:16px 0 80px}
#experiences .exp .n{display:none}
}
/* Theme additions (WordPress version) */
.signoff-more{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin:-12px 0 0;font:16px var(--sans)}
.signoff-more a{color:#405e65;text-decoration:underline;text-underline-offset:5px}
.signoff-more a:hover{color:#0073b2}
/* Breathing room between Things to do and the island map */
#experiences+.island-map{margin-top:clamp(72px,9vw,150px)}
/* Dining: gentler tilt (was ±2°, entrance 5°), and the words sit level —
   only the paper is askew. The handwritten rating keeps its own slant. */
.dish:nth-child(odd){--tilt:-.75deg}
.dish:nth-child(even){--tilt:.75deg}
.dish.fade{transform:translateY(28px) rotate(1.5deg)}
.dish h3,.dish>p:not(.oak-rating){transform:rotate(calc(var(--tilt,0deg)*-1));transform-origin:left center}
@media(max-width:700px){.dish:nth-child(odd){--tilt:-.5deg}.dish:nth-child(even){--tilt:.5deg}.dish.fade{transform:translateY(22px) rotate(1deg)}}
@media(prefers-reduced-motion:reduce){.dish h3,.dish>p:not(.oak-rating){transform:none}}

/* Paper texture on the journal page itself (it was flat cream; only the outer
   margin had grain). Three tiled SVG noise layers in warm brown: fine tooth,
   faint horizontal fibres, and soft blotches of tone (radial gradients that fade out
   before the tile edge, so there are no seams) so the paper isn't perfectly even. */
:root{--paper-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .40 0 0 0 0 .33 0 0 0 0 .22 1.6 0 0 0 -.62'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");--paper-fibre:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.01 .25' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .26 1.5 0 0 0 -.8'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23f)' opacity='.14'/%3E%3C/svg%3E");--paper-mottle:radial-gradient(ellipse 38% 26% at 28% 36%,#7d6a4614,transparent 72%),radial-gradient(ellipse 30% 22% at 74% 72%,#7d6a460f,transparent 72%),radial-gradient(ellipse 26% 18% at 58% 12%,#ffffff26,transparent 70%)}
main{background-image:var(--paper-grain),var(--paper-fibre),var(--paper-mottle),linear-gradient(90deg,#203a4312,transparent 5%,transparent 98%,#203a430a);background-size:auto,auto,1400px 1700px,auto}
.journal-signoff{background-image:var(--paper-grain),var(--paper-fibre),var(--paper-mottle),repeating-linear-gradient(90deg,transparent 0 5px,#6d604008 5px 6px);background-size:auto,auto,1400px 1700px,auto}