@font-face{font-family:"Source Serif 4";font-style:normal;font-display:swap;font-weight:400;src:url(/_astro/source-serif-4-latin-400-normal.DJ5YJwmz.woff2)format("woff2"),url(/_astro/source-serif-4-latin-400-normal.C1O10bxN.woff)format("woff")}@font-face{font-family:"Source Serif 4";font-style:italic;font-display:swap;font-weight:400;src:url(/_astro/source-serif-4-latin-400-italic.0j97Jm6B.woff2)format("woff2"),url(/_astro/source-serif-4-latin-400-italic.DZulBB6l.woff)format("woff")}@font-face{font-family:"Source Serif 4";font-style:normal;font-display:swap;font-weight:600;src:url(/_astro/source-serif-4-latin-600-normal.DouSKlru.woff2)format("woff2"),url(/_astro/source-serif-4-latin-600-normal.DeJomR3S.woff)format("woff")}@font-face{font-family:"Source Serif 4";font-style:normal;font-display:swap;font-weight:700;src:url(/_astro/source-serif-4-latin-700-normal.CGGdTIBe.woff2)format("woff2"),url(/_astro/source-serif-4-latin-700-normal.C30JPKlG.woff)format("woff")}@font-face{font-family:La Belle Aurore;font-style:normal;font-display:swap;font-weight:400;src:url(/_astro/la-belle-aurore-latin-400-normal.D1eTpURF.woff2)format("woff2"),url(/_astro/la-belle-aurore-latin-400-normal.CQ9B_fxW.woff)format("woff")}:root{--paper:#f3efe4;--sheet:#fbf8f2;--ink:#241e18;--muted:#5c534a;--line:#ddd4c4;--red:#8e2e2b;--red-ink:#fff;--serif:"Source Serif 4", Georgia, "Iowan Old Style", serif;--hand:"La Belle Aurore", cursive;color-scheme:light}*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--serif);color:var(--ink);background-color:var(--paper);background-image:url(/images/paper-grain.jpg);background-position:50%;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;margin:0;font-size:1.0625rem;line-height:1.6}img{max-width:100%;height:auto}h1,h2,h3,p{text-wrap:pretty}h1,h2,h3{letter-spacing:-.02em;scroll-margin-top:1rem;font-weight:650;line-height:1.12}a{color:inherit}:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.skip{background:var(--ink);color:var(--sheet);z-index:5;padding:.55rem .8rem;position:absolute;top:-4rem;left:1rem}.skip:focus{top:.75rem}.sr{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.frame{width:min(72rem,100% - 2rem);margin-inline:auto}.column{width:min(42.5rem,100%);margin-inline:auto}.site-header{border-bottom:1px solid var(--line);background:#fbf8f2eb;position:static}.header-bar{flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;padding:.7rem 0 .8rem;display:flex}.brand{font-family:var(--hand);color:var(--ink);-webkit-text-stroke:.35px currentColor;font-size:2.35rem;line-height:.9;text-decoration:none}.primary-nav{flex-wrap:wrap;align-items:center;gap:.35rem .95rem;margin-left:auto;display:flex}.primary-nav a{white-space:nowrap;font-size:1rem;text-decoration:none}.primary-nav a[aria-current=page]{text-underline-offset:.22em;text-decoration:underline}.nav-subscribe{background:var(--red);color:var(--red-ink);border-radius:2px;padding:.35rem .75rem;text-decoration:none}.nav-subscribe[aria-current=page]{text-underline-offset:.18em;text-decoration:underline}.joined{width:min(72rem,100% - 2rem);margin:.75rem auto 0}main{padding-bottom:3rem}.page,.page-top{padding-top:1.4rem}.stage{min-height:calc(100svh - 10.6rem);position:relative;overflow:clip}.collage{position:absolute;inset:0}.pile{position:absolute}.pile .shot{aspect-ratio:auto;object-fit:cover;width:100%;height:100%}.pile-a{width:86%;height:62%;top:0;left:-8%}.pile-b{width:70%;height:46%;top:7%;left:auto;right:-8%}.pile-c{width:38%;height:30%;top:32%;left:4%}.stage-copy{z-index:5;position:absolute;bottom:.55rem;left:.6rem;right:.6rem}.paper-card{background:#fbf8f2f2;padding:.85rem .9rem .75rem;box-shadow:0 12px 28px #32241429}.paper-card h1{max-width:16ch;font-size:clamp(1.65rem,6vw,2.5rem);line-height:1.05}.paper-card .lede{margin-top:.35rem;font-size:.98rem;line-height:1.35}.paper-card .hand-line{margin-top:.2rem;font-size:1.35rem}.paper-card .offer{margin-top:.4rem;font-size:.95rem;line-height:1.35}.paper-card .signup{margin-top:.45rem}.paper-card .signup-note{font-size:.9rem}.stage-credits{color:var(--muted);margin:.45rem 0 0;font-size:.75rem}.bit{z-index:4;object-fit:cover;position:absolute;box-shadow:0 8px 16px #3c281433}.bit-packet{width:5.6rem;height:3.8rem;top:5%;right:3%;transform:rotate(8deg)}.bit-card{width:3.6rem;height:5rem;top:14%;left:2%;transform:rotate(-9deg)}.banner{width:100%;position:relative}.banner-shot{object-fit:cover;object-position:center 42%;width:100%;height:min(62vh,40rem);display:block}.banner-copy{position:absolute;bottom:.9rem;left:0;right:0}.banner-card{background:#fbf8f2f0;max-width:min(34rem,100% - 2rem);padding:.8rem 1rem .95rem;display:inline-block;box-shadow:0 10px 22px #46301c24}.banner-card h1{font-size:clamp(2rem,5vw,3.15rem)}.banner-card .lede{margin-top:.35rem}.banner-credit{background:#fbf8f2e6;margin:0;padding:.12rem .4rem;font-size:.75rem;position:absolute;bottom:.55rem;right:.7rem}.banner-credit a{color:inherit}.origin-tuck{z-index:2;width:min(15rem,46vw);margin:-6.5rem 7vw 0 auto;position:relative}.story-stage{margin-top:.6rem;position:relative}.bit-story{z-index:3;width:3.5rem;height:4.8rem;top:10%;right:7%;transform:rotate(7deg)}.bit-credit{z-index:3;color:var(--muted);background:#fbf8f2e6;padding:.08rem .3rem;font-size:.72rem;position:absolute;top:calc(10% + 5.1rem);right:7%}h1{max-width:14ch;margin:0;font-size:clamp(2.1rem,5vw,3.5rem)}.lede{max-width:36rem;margin:.85rem 0 0;font-size:1.15rem}.fiction{color:var(--muted);margin:.7rem 0 0;font-style:italic}.hand-line,.hand-sign{font-family:var(--hand);color:var(--ink);-webkit-text-stroke:.35px currentColor;line-height:1.15}.hand-line{margin:.35rem 0 0;font-size:1.55rem}.hand-sign{margin:.8rem 0 0;font-size:1.7rem}.offer{max-width:38rem;margin:.8rem 0 0}.button{font:inherit;color:var(--red-ink);background:var(--red);cursor:pointer;border:0;border-radius:2px;padding:.75rem .95rem;font-weight:650;text-decoration:none;display:inline-block}.section-action{margin:1rem 0 0}.ways{margin:.4rem 0 0;padding:0;list-style:none}.ways li{border-top:1px solid var(--line);max-width:36rem;padding:.85rem 0}.ways a{font-weight:650}.soft-line{margin:.85rem 0 0}.story-hand{width:min(36rem,100%);font-size:clamp(1.45rem,2.6vw,1.85rem);line-height:1.2}.eyebrow{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin:0 0 .35rem;font-size:.78rem}.fine{color:var(--muted);font-size:.95rem}.photo-note{margin-top:.45rem;display:block}.dev-mark{border:1px solid var(--red);color:var(--red);background:var(--sheet);font-family:var(--serif);letter-spacing:.04em;text-transform:uppercase;vertical-align:middle;-webkit-text-stroke:0;margin-left:.35rem;padding:.05rem .35rem;font-size:.68rem;font-weight:650;line-height:1.4;display:inline-block}.books-intro{width:min(42.5rem,100%)}.book-spread{grid-template-columns:9.4rem minmax(0,1fr);grid-template-areas:"cover head""tuck tuck""copy copy";align-items:start;gap:.85rem .9rem;margin-top:1.3rem;display:grid}.book-text{display:contents}.cover-large{grid-area:cover}.book-heading{grid-area:head;align-self:center}.book-tuck{grid-area:tuck}.book-copy{grid-area:copy}.cover-large{width:100%;margin:0;position:relative}.cover-large .slot-inner{aspect-ratio:2/3}.cover-large .slot-inner p{font-size:clamp(1.45rem,2vw,1.85rem)}.cover-large .tape{top:-.65rem;left:22%}.book-tuck{grid-template-columns:9.5rem minmax(0,1fr);align-items:end;gap:.65rem;margin-top:.3rem;display:grid}.book-photo{width:min(16rem,100%);margin:0}.book-photo .shot{aspect-ratio:3/2;max-height:none}.book-hand{margin:0}.pull{border:0;max-width:16em;margin:1.15rem 0 1.3rem;padding:0;font-size:clamp(1.55rem,2.2vw,2.05rem);font-weight:650;line-height:1.25}.story-form{gap:.9rem;margin-top:1.2rem;display:grid}.story-form label,.story-form legend{gap:.35rem;display:grid}.story-form fieldset{border:0;margin:0;padding:0}.story-form input[type=text],.story-form input[type=email],.story-form textarea{font:inherit;color:var(--ink);background:var(--sheet);border:1px solid #cfc4b2;border-radius:2px;width:100%;padding:.7rem .8rem}.choice-row{flex-wrap:wrap;gap:.4rem 1.2rem;display:flex}.choice-row label{flex-direction:row;align-items:center;gap:.4rem;display:flex}.slot-copy{color:var(--muted);font-style:italic}.teaser{margin-top:1rem}.signup{flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:1rem;display:flex}.signup input[type=email],.interest-select select{font:inherit;color:var(--ink);background:var(--sheet);border:1px solid #cfc4b2;border-radius:2px;padding:.7rem .8rem}.signup input[type=email]{flex:12rem;min-width:0}.signup button{font:inherit;color:var(--red-ink);background:var(--red);cursor:pointer;border:0;border-radius:2px;padding:.75rem .95rem;font-weight:650}.signup-note,.signup-status{color:var(--muted);flex:100%;margin:.15rem 0 0;font-size:.98rem}.interest-select{flex:100%;gap:.35rem;display:grid}.interest-select select{width:100%}.print,.polaroid{background:var(--sheet);transform:rotate(var(--tilt,-1deg));position:relative;box-shadow:0 1px #281e140d,0 12px 22px #46301c1a}.print{padding:.55rem .55rem .7rem}.polaroid{padding:.45rem .45rem .7rem}.print.pile{position:absolute}.shot{aspect-ratio:4/5;object-fit:cover;background:#e4dccb;width:100%;display:block}.print.wide .shot,.story-lead .shot{aspect-ratio:4/3;object-fit:cover;max-height:78vh}.story-lead .print.wide .shot{max-height:min(52vh,30rem)}.print.archive{width:min(28rem,100%)}.print.archive .shot{aspect-ratio:4/3}.tape{z-index:2;pointer-events:none;width:5.1rem;height:auto;position:absolute;top:-.55rem;left:18%;transform:rotate(-7deg)}.tape.right{left:auto;right:14%;transform:rotate(6deg)}.hand-note{font-family:var(--hand);color:var(--ink);-webkit-text-stroke:.4px currentColor;background:#f7f4ec url(/images/lined-paper.jpg) 50%/cover;width:min(14rem,100%);margin:0;padding:1.15rem 1rem 1.3rem;font-size:1.85rem;line-height:1.15;transform:rotate(-1.8deg);box-shadow:0 8px 16px #3c281414}.hand-note.story-hand{width:min(36rem,100%);padding:1.15rem 1.1rem 1.3rem;font-size:clamp(1.55rem,2.4vw,2rem);line-height:1.28}.hand-note.book-hand{width:min(18rem,100%);font-size:clamp(1.7rem,2.4vw,2.05rem);line-height:1.2}.print-caption,.scrap-credit,.photo-slot figcaption{color:var(--muted);margin:.4rem 0 0;font-size:.82rem}.scrap-credit a,.print-caption{color:inherit}.polaroid-link{color:inherit;text-decoration:none;display:block}.polaroid h2,.polaroid h3{margin:.55rem .15rem 0;font-size:1.28rem}.polaroid .entry-meta{color:var(--muted);margin:.3rem .15rem 0;font-size:.92rem}.polaroid .entry-dek{color:var(--muted);-webkit-line-clamp:3;-webkit-box-orient:vertical;margin:.35rem .15rem 0;display:-webkit-box;overflow:hidden}.polaroid-link:hover h2,.polaroid-link:hover h3{text-underline-offset:.12em;text-decoration:underline}.shelf,.note-block,.book-note,.signup-block,.more{margin-top:2.6rem}.shelf h2,.note-block h2,.book-note h2,.page h2,.page-top h2,.story-end h2,.more h2{margin:0 0 .9rem;font-size:1.55rem}.grid{grid-template-columns:1fr;align-items:start;gap:1.5rem 1.25rem;display:grid}.letter p,.book-note p{margin:0 0 .9rem}.story{padding-top:.4rem}.story-lead{width:min(100% - 2rem,78rem);margin:.6rem auto 0}.story-head h1{max-width:none}.story-cat{color:var(--muted);margin:1.2rem 0 .55rem}.story-cat a{color:inherit}.prose{margin-top:1.2rem;font-size:1.125rem;line-height:1.7}.prose p{margin:0 0 1em}.prose a{text-underline-offset:.15em}.story-end{border-top:1px solid var(--line);margin-top:2rem;padding-top:1.25rem}.signoff{margin-top:1.2rem}.posted,.working{color:var(--muted)}.more-series ul,.series-strip{margin:0;padding:0;list-style:none}.more-series ul{flex-wrap:wrap;gap:.4rem 1rem;display:flex}.series-row{border-top:1px solid var(--line);padding:.9rem 0}.series-row h2{margin:0 0 .25rem;font-size:1.35rem}.series-row p{margin:.2rem 0}.empty{color:var(--muted)}.about-top{align-items:start;gap:1.4rem;display:grid}.photo-slot{background:var(--sheet);width:min(16rem,100%);margin:0;padding:.5rem .5rem .75rem;transform:rotate(-1.1deg);box-shadow:0 10px 18px #46301c1a}.photo-slot.cover-large{width:100%}.slot-inner{aspect-ratio:4/5;text-align:center;background:#e8e0d2 url(/images/paper-grain.jpg) 50%/cover;place-items:center;padding:1rem;display:grid}.slot-inner p{font-family:var(--hand);-webkit-text-stroke:.4px currentColor;margin:0;font-size:1.7rem;line-height:1.15}.book-lead{width:min(40rem,100%);margin-top:.4rem}.origin-lead{margin:1.2rem 0}.site-footer{border-top:1px solid var(--line);margin-top:3rem;padding:1.5rem 0 2rem}.footer-grid{gap:.9rem;display:grid}.footer-brand{font-family:var(--hand);margin:0;font-size:1.8rem;font-weight:400;line-height:1}.footer-line,.footer-legal{color:var(--muted);margin:.3rem 0 0}.footer-nav{flex-wrap:wrap;gap:.4rem 1rem;display:flex}.footer-nav a{text-decoration:none}.footer-legal{flex-wrap:wrap;gap:.4rem 1rem;display:flex}.footer-legal a{color:var(--ink)}.column>h2{margin-top:2rem}.credits-list{gap:1.6rem;margin-top:1.4rem;display:grid}.credit-item{border-top:1px solid var(--line);gap:.7rem;padding-top:1rem;display:grid}.credit-item img{aspect-ratio:4/3;object-fit:cover;background:var(--sheet);width:min(16rem,100%)}.credit-item h2{margin:0;font-size:1.25rem}.credit-item p{margin:.2rem 0}.dedication,.epigraph{margin:1.4rem 0 0}.dedication blockquote,.epigraph blockquote{margin:0;font-size:1.2rem;line-height:1.4}.dedication figcaption,.epigraph figcaption{color:var(--muted);margin-top:.4rem}@media (width<=899px){.brand{font-size:2rem}.header-bar{gap:.3rem .75rem;padding-top:.55rem}.primary-nav{flex:100%;gap:.28rem .7rem;margin-left:0}.primary-nav a{font-size:.95rem}}@media (width>=740px){.frame{width:min(76rem,100% - 3rem)}.about-top{grid-template-columns:16rem minmax(0,1fr);gap:2rem;width:min(100%,58rem);margin-inline:auto}.book-spread{grid-template-columns:minmax(18rem,22rem) minmax(0,1fr);grid-template-areas:"cover text""tuck text";gap:1.2rem 2.4rem}.book-text{grid-area:text;display:block}.cover-large{grid-area:cover}.book-tuck{z-index:1;grid-area:tuck;grid-template-columns:10.5rem minmax(0,1fr);align-items:end;margin-top:-2.8rem;position:relative}.book-heading,.book-copy{grid-area:auto}}@media (width>=900px){.stage{min-height:calc(100svh - 5.2rem)}.pile-a{width:54%;height:86%;top:3%;left:20%}.pile-b{width:42%;height:62%;top:8%;left:auto;right:-1%}.pile-c{width:24%;height:38%;top:auto;bottom:4%;left:36%}.stage-copy{width:min(34rem,100% - 3rem);margin:6vh 0 0 4vw;position:relative;bottom:auto;left:auto;right:auto}.paper-card h1{font-size:clamp(2.2rem,3.4vw,3.15rem)}.bit-packet{width:7rem;height:4.6rem;top:10%;right:6%}.bit-card{width:4.4rem;height:6rem;inset:auto 18% 10% auto}.banner-shot{height:min(72vh,46rem)}}@media (width>=1100px){.grid{grid-template-columns:1fr 1fr}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.print,.polaroid,.hand-note,.photo-slot,.bit{transform:none}}

/* 3am-site build additions */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
/* Facebook post pictures: never crop text-heavy illustrations */
.shot.fb-shot{object-position:50% 30%}
.shot.fb-shot.fit-contain{object-fit:contain;background:#fbf8f2}
.story-lead .print.fb-print{margin:0 auto;width:fit-content;max-width:100%}
.story-lead .print.fb-print .shot{aspect-ratio:auto;height:auto;max-height:min(80vh,44rem);object-fit:contain;background:#fbf8f2}
/* picture credits: one small line at the very bottom */
.page-credits{color:var(--muted);font-size:.78rem;line-height:1.5;margin:0 auto;padding:.4rem 0 1.2rem}
.page-credits a{color:inherit}
/* mobile */
@media (max-width:640px){
 .shelf .polaroid .shot{aspect-ratio:4/3}
 .prose{overflow-wrap:anywhere}
 .story-lead .print.fb-print .shot{max-height:none}
 .review-pair{grid-template-columns:1fr!important}
 .review-toc{columns:1}
 .origin-tuck{margin-right:1.2rem}
 main{overflow-x:clip}
}
/* image review page */
.review-item{border-top:1px solid var(--line);padding:1.2rem 0}
.review-item h2{font-size:1.2rem;margin:0 0 .2rem}
.review-meta{color:var(--muted);font-size:.9rem;margin:0 0 .7rem}
.review-pair{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
.review-pair figure{margin:0;background:var(--sheet);padding:.45rem;box-shadow:0 1px #281e140d,0 8px 16px #46301c14}
.review-pair img{width:100%;height:auto;display:block;max-height:28rem;object-fit:contain;background:#e4dccb}
.review-pair figcaption{font-size:.88rem;margin-top:.4rem}
.review-pair .in-use{outline:3px solid var(--red)}
.review-badge{display:inline-block;background:var(--red);color:#fff;font-size:.75rem;padding:.05rem .4rem;border-radius:3px;margin-left:.3rem}
.review-none{display:flex;align-items:center;justify-content:center;min-height:8rem;color:var(--muted);font-size:.9rem;text-align:center;background:#efe9dc}
.review-toc{columns:2;font-size:.9rem}
/* About: real photos in the frames (23 Oct) */
.photo-slot .about-photo{display:block;width:100%;height:auto}
.portrait-slot .about-photo{aspect-ratio:auto;object-fit:contain}
.photo-slot.team-slot{width:min(100%,46rem);margin-inline:auto;justify-self:center;transform:rotate(.6deg)}
.team-slot .about-photo{aspect-ratio:4/3;object-fit:cover}

/* kopitiam.css: "Kopitiam warm" theme for 3am Stories.
   Load AFTER Base.css. Only overrides colours, surfaces and small accents.
   Layout, image sizes and the collage stay exactly as they are. */

:root{
  --paper:#efe3cf;          /* warm cream, like an old marble table top */
  --sheet:#fbf3e6;          /* cream card stock */
  --ink:#261c15;            /* was #241e18, a touch warmer */
  --muted:#5f5146;          /* was #5c534a, a touch warmer */
  --line:#d8c5a6;
  --red:#6b3f24;            /* kopi brown: buttons, signup, Subscribe pill */
  --red-ink:#fff;
  --kopi-dark:#57321c;      /* hover/pressed brown */
  --green:#2f5f4b;          /* kopitiam tile green */
  --green-2:#3f7560;
  --grout:#f3e8d4;
  --sheet-a:rgba(251,243,230,.95);

  /* mosaic tile band, reused by header, footer and menu sheet */
  --mosaic:
    linear-gradient(90deg, transparent 0 5px, var(--grout) 0) 0 0/6px 6px,
    linear-gradient(180deg, transparent 0 5px, var(--grout) 0) 0 0/6px 6px,
    linear-gradient(90deg, rgba(255,255,255,.08) 0 18px, transparent 0 30px, rgba(0,0,0,.07) 0 36px, transparent 0) 0 0/41px 6px,
    linear-gradient(90deg, transparent 0 11px, rgba(255,255,255,.07) 0 17px, transparent 0) 0 6px/29px 6px repeat-x,
    conic-gradient(var(--green) 25%, var(--green-2) 0 50%, var(--green) 0 75%, var(--green-2) 0) 0 0/12px 12px;
}

/* cream marble: soft clouds and faint veins over the existing paper grain */
body{
  background-color:var(--paper);
  background-image:
    radial-gradient(60% 38% at 18% 12%, rgba(255,251,242,.70), transparent 70%),
    radial-gradient(48% 30% at 82% 26%, rgba(255,250,240,.55), transparent 72%),
    radial-gradient(70% 26% at 30% 62%, rgba(200,172,132,.16), transparent 70%),
    radial-gradient(40% 46% at 90% 84%, rgba(255,249,238,.50), transparent 70%),
    linear-gradient(112deg, transparent 0 36%, rgba(160,128,92,.07) 38%, transparent 41% 60%, rgba(160,128,92,.05) 61.5%, transparent 63.5%),
    linear-gradient(58deg, transparent 0 20%, rgba(160,128,92,.05) 22%, transparent 24.5%),
    linear-gradient(rgba(239,227,207,.55), rgba(239,227,207,.55)),
    url(/images/paper-grain.jpg);
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  background-attachment:fixed;
}

::selection{background:#d9e6dc;color:var(--ink)}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* header: cream with a thin row of green kopitiam tiles underneath */
.site-header{position:relative;background:var(--sheet-a);border-bottom:0}
.site-header::after{
  content:"";position:absolute;left:0;right:0;bottom:-12px;height:12px;
  background:var(--mosaic);
  border-top:1px solid var(--grout);border-bottom:1px solid rgba(47,95,75,.35);
  box-shadow:0 2px 3px rgba(60,40,20,.12);
  pointer-events:none;z-index:3;
}
.brand{color:var(--ink)}
.primary-nav a:hover{color:var(--green)}
.primary-nav a[aria-current=page]{text-decoration-color:var(--green);text-decoration-thickness:2px}

/* kopi brown buttons, slightly softer corners, a little press */
.nav-subscribe,.button,.signup button{border-radius:4px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
.button:hover,.signup button:hover,.nav-subscribe:hover{background:var(--kopi-dark)}
.button:active,.signup button:active{transform:translateY(1px);box-shadow:none}

/* cards and paper pieces: cream instead of white */
.paper-card{background:rgba(251,243,230,.96);box-shadow:0 12px 28px rgba(70,42,20,.18)}
.banner-card{background:rgba(251,243,230,.95)}
.banner-credit,.bit-credit{background:rgba(251,243,230,.92)}
.hand-note{background-color:#f8efdf}
.shot{background:#e6d7bd}
.shot.fb-shot.fit-contain,
.story-lead .print.fb-print .shot{background:var(--sheet)}
.print,.polaroid{box-shadow:0 1px 0 rgba(60,36,16,.06),0 12px 22px rgba(80,48,22,.13)}
.photo-slot{box-shadow:0 10px 18px rgba(80,48,22,.13)}
.slot-inner{background-color:#eadcc4}
.story-form input[type=text],.story-form input[type=email],.story-form textarea,
.signup input[type=email],.interest-select select{border-color:#c9b390;background:#fffaf1}

/* small green accents */
.eyebrow{color:var(--green);font-weight:600}
.story-cat a,.prose a{text-decoration-color:var(--green-2)}
.ways a{text-decoration-color:var(--green-2);text-underline-offset:.15em}
.polaroid-link:hover h2,.polaroid-link:hover h3{text-decoration-color:var(--green)}
.shelf>h2::before,.note-block>h2::before,.more>h2::before{
  content:"";display:inline-block;width:.62em;height:.62em;margin-right:.45em;vertical-align:.06em;
  background:conic-gradient(var(--green) 25%, var(--green-2) 0 50%, var(--green) 0 75%, var(--green-2) 0) 0 0/50% 50%;
  outline:1.5px solid var(--grout);outline-offset:-1.5px;
  border-radius:1px;transform:rotate(-4deg);
}
.dev-mark{border-color:var(--green);color:var(--green)}

/* footer: same tile row on top, softer */
.site-footer{position:relative;border-top:0}
.site-footer::before{
  content:"";position:absolute;left:0;right:0;top:0;height:6px;
  background:var(--mosaic);opacity:.85;
}

/* mobile-menu.css: phone header (760px and under) with a Menu button and a full width sheet.
   Load AFTER Base.css (and after kopitiam.css if used). Desktop is untouched. */

.menu-toggle,.menu-sheet{display:none}

@media (max-width:760px){
  /* undo the old phone header rules (<=899px wrap row, <=640px swipe row, sticky Subscribe, fade shadow) */
  .header-bar{flex-wrap:nowrap;align-items:center;gap:.55rem;padding:.55rem 0 .7rem}
  .brand{font-size:1.8rem;flex:0 0 auto;white-space:nowrap}
  .primary-nav{
    flex:0 0 auto;flex-wrap:nowrap;gap:0;margin-left:0;padding-bottom:0;
    overflow:visible;-webkit-mask-image:none;mask-image:none;order:2;
  }
  .primary-nav .nav-subscribe{
    position:static;margin-left:0;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18);
    min-height:44px;display:inline-flex;align-items:center;padding:.4rem .85rem;font-size:1rem;
  }

  /* with JS: keep only Subscribe in the bar, the rest lives in the sheet */
  .has-js .primary-nav a:not(.nav-subscribe){display:none}
  .has-js .menu-toggle{
    display:inline-flex;align-items:center;gap:.5rem;order:1;margin-left:auto;
    min-height:44px;padding:.4rem .8rem;
    font:inherit;font-size:1rem;font-weight:600;color:var(--ink);
    background:transparent;border:1.5px solid currentColor;border-radius:4px;cursor:pointer;
  }
  .menu-toggle .menu-icon,.menu-toggle .menu-icon::before,.menu-toggle .menu-icon::after{
    display:block;width:1.05rem;height:2px;background:currentColor;border-radius:1px;
  }
  .menu-toggle .menu-icon{position:relative}
  .menu-toggle .menu-icon::before,.menu-toggle .menu-icon::after{content:"";position:absolute;left:0}
  .menu-toggle .menu-icon::before{top:-5px}
  .menu-toggle .menu-icon::after{top:5px;width:.75rem}

  /* without JS: links simply wrap onto a second row so nothing is lost */
  html:not(.has-js) .header-bar{flex-wrap:wrap}
  html:not(.has-js) .primary-nav{flex:100%;flex-wrap:wrap;gap:.3rem .9rem}

  /* the sheet */
  .menu-sheet{display:block;position:fixed;inset:0;z-index:60;background:rgba(38,28,21,.48)}
  .menu-sheet[hidden]{display:none}
  .menu-panel{
    position:relative;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain;
    background:var(--sheet,#fbf3e6);color:var(--ink);
    padding:.55rem 1rem calc(1.4rem + 12px);
    box-shadow:0 18px 36px rgba(40,24,10,.28);
  }
  .menu-panel::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:12px;
    background:var(--mosaic, #2f5f4b);
  }
  .menu-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:3.4rem}
  .menu-head .brand{font-size:1.8rem}
  .menu-close{
    min-height:48px;min-width:48px;padding:.4rem .9rem;
    font:inherit;font-size:1rem;font-weight:600;color:var(--ink);
    background:transparent;border:1.5px solid currentColor;border-radius:4px;cursor:pointer;
  }
  .menu-list{list-style:none;margin:.4rem 0 0;padding:0}
  .menu-list li{border-top:1px solid var(--line)}
  .menu-list a{
    display:flex;align-items:center;min-height:52px;padding:.3rem .15rem;
    font-size:1.3rem;font-weight:600;text-decoration:none;color:var(--ink);
  }
  .menu-list a[aria-current=page]{color:var(--green,#2f5f4b)}
  .menu-list a[aria-current=page]::after{
    content:"";width:.55rem;height:.55rem;margin-left:.6rem;border-radius:1px;
    background:var(--green,#2f5f4b);transform:rotate(45deg);
  }
  .menu-list li.menu-cta{border-top:0;margin-top:1rem}
  .menu-list .menu-cta a{
    justify-content:center;min-height:52px;border-radius:4px;
    background:var(--red);color:var(--red-ink);font-size:1.15rem;
    box-shadow:inset 0 -2px 0 rgba(0,0,0,.18);
  }
  .menu-list .menu-cta a[aria-current=page]::after{background:var(--red-ink)}
  html.menu-open,html.menu-open body{overflow:hidden}
}

/* small phones (iPhone SE, older Androids): keep the bar on one row without overlap */
@media (max-width:380px){
  .header-bar{gap:.4rem}
  .brand,.menu-head .brand{font-size:1.5rem}
  .has-js .menu-toggle{padding:.4rem .6rem;gap:.35rem}
  .primary-nav .nav-subscribe{padding:.4rem .65rem}
}
@media (max-width:340px){
  .has-js .menu-toggle .menu-icon{display:none}
}

@media (max-width:760px) and (prefers-reduced-motion:no-preference){
  .menu-sheet:not([hidden]) .menu-panel{animation:menu-drop .18s ease-out}
  @keyframes menu-drop{from{transform:translateY(-12px);opacity:.6}to{transform:none;opacity:1}}
}

/* kopitiam-full.css: the rest of design round 1, option 2 "Kopitiam warm".
   Home hero: taped photo collage on a green kopitiam tile wall, copy on a marble table with a cup of kopi.
   Site-wide: marble table panels, tile wall behind page banners, taped prints. Mobile first. */

/* ---------- home hero ---------- */
.stage.kopi-hero{min-height:0;overflow:clip;display:block;position:relative}
.kopi-hero .k-wall{
  position:relative;
  background:#3f6b55 url(/images/kopitiam/kopi-tiles.jpg) center/640px auto repeat;
  box-shadow:inset 0 10px 18px -10px rgba(20,30,20,.45);
  padding:0 0 1.5rem;
}
.kopi-hero .k-collage{position:relative;z-index:3;width:100%;aspect-ratio:375/262;margin-inline:auto}
.k-print{
  position:absolute;margin:0;background:#f6efe2;padding:4px 4px 5px;
  box-shadow:0 1px 0 rgba(60,36,16,.08),0 8px 16px rgba(30,20,10,.32);
  transform:rotate(var(--r,0deg));
}
.k-print img{display:block;width:100%;height:100%;object-fit:cover;background:#e6d7bd}
.k-hdb{left:-1.5%;top:-2%;width:31%;height:40%;--r:-6deg;z-index:2}
.k-shop{left:-.5%;top:43%;width:33%;height:47%;--r:3deg;z-index:3}
.k-corridor{left:26%;top:-3%;width:52%;height:95%;--r:-.8deg;z-index:4;padding:5px 5px 6px}
.k-packets{right:-1.5%;top:-3%;width:26%;height:42%;--r:9deg;z-index:5}
.k-skyline{right:-3%;top:44%;width:28%;height:40%;--r:2.5deg;z-index:3}
.k-skyline img{filter:grayscale(1) sepia(.18) contrast(1.05)}
.k-hdb img{object-position:60% 40%}
.k-shop img{object-position:62% 50%}
.k-corridor img{object-position:28% 50%}

/* masking tape */
.k-tape{position:absolute;z-index:2;width:38%;max-width:5.4rem;height:.95rem;
  background:linear-gradient(90deg,rgba(255,255,255,.18),rgba(255,255,255,0) 30%,rgba(255,255,255,.12) 70%,rgba(255,255,255,0)),rgba(232,222,196,.86);
  box-shadow:0 1px 2px rgba(60,40,20,.18);
  clip-path:polygon(2% 8%,10% 0,22% 10%,36% 2%,52% 9%,66% 0,80% 8%,92% 1%,100% 10%,98% 92%,88% 100%,74% 91%,60% 100%,44% 92%,30% 100%,16% 91%,4% 100%,0 88%)}
.k-tape-top{top:-.3rem;left:31%;transform:rotate(-3deg)}
.k-tape-bottom{bottom:-.55rem;left:40%;transform:rotate(2deg)}
.k-tape-corner{top:-.4rem;right:-.6rem;transform:rotate(32deg);width:3.4rem}

/* marble table under the copy */
.kopi-hero .k-table{
  position:relative;z-index:2;margin-top:-2.6rem;padding:2.9rem 0 1.8rem;
  background:
    url(/images/kopitiam/kopi-cup.webp) right 0 top 2.3rem/10rem auto no-repeat,
    linear-gradient(180deg,rgba(255,250,240,.25),rgba(255,250,240,0) 40%),
    #eee6d8 url(/images/kopitiam/kopi-marble-plain.jpg) center/cover no-repeat;
  border-radius:50% 50% 0 0/1.6rem 1.6rem 0 0;
  box-shadow:0 -6px 14px -6px rgba(30,20,10,.35);
}
.kopi-hero .stage-copy{position:relative;inset:auto;width:auto;margin:0;padding:0 1rem;z-index:2}
.kopi-hero .paper-card{background:none;box-shadow:none;padding:0;max-width:38rem}
.kopi-hero .paper-card h1{max-width:min(12.5ch,100% - 6.8rem);font-size:clamp(1.75rem,7.4vw,3.3rem);line-height:1.06}
.kopi-hero .paper-card .lede{max-width:22rem;font-size:1.02rem;line-height:1.38;margin-top:.5rem}
.kopi-hero .paper-card .hand-line{font-size:1.45rem;margin-top:.35rem}
.kopi-hero .paper-card .offer{font-size:.98rem;line-height:1.4;margin-top:.45rem}
.kopi-hero .signup input[type=email]{background:#fffaf1e6}
.kopi-hero .signup-note{color:#55483d}

@media (width>=600px){
  .kopi-hero .k-collage{width:min(100%,46rem)}
  .kopi-hero .k-table{background-size:13rem auto,auto,cover;background-position:right 0 top 2rem,0 0,center}
  .kopi-hero .stage-copy{padding:0 2rem}
  .kopi-hero .paper-card h1{max-width:min(13ch,100% - 11rem)}
}
@media (width>=900px){
  .kopi-hero .k-wall{padding:0 0 2.4rem}
  .kopi-hero .k-collage{width:min(100% - 3rem,68rem);aspect-ratio:68/27}
  .k-print{padding:6px 6px 8px}
  .k-hdb{left:2%;top:4%;width:23%;height:46%;--r:-5deg}
  .k-shop{left:4%;top:50%;width:25%;height:46%;--r:2.5deg}
  .k-corridor{left:28%;top:-1%;width:42%;height:97%;padding:8px 8px 10px}
  .k-packets{right:5%;top:1%;width:21%;height:42%;--r:7deg}
  .k-skyline{right:2%;top:50%;width:24%;height:44%;--r:2deg}
  .k-tape{height:1.2rem;max-width:6.6rem}
  .kopi-hero .k-table{
    margin-top:-4rem;padding:4.6rem 0 3rem;
    background:linear-gradient(90deg,rgba(255,250,240,.35),rgba(255,250,240,0) 55%),#eee6d8 url(/images/kopitiam/kopi-marble.jpg) right top/cover no-repeat;
    border-radius:50% 50% 0 0/3rem 3rem 0 0;
  }
  .kopi-hero .stage-copy{width:min(72rem,100% - 3rem);margin-inline:auto;padding:0}
  .kopi-hero .paper-card{max-width:40rem}
  .kopi-hero .paper-card h1{max-width:15ch;font-size:clamp(2.5rem,3.6vw,3.4rem)}
  .kopi-hero .paper-card .lede{max-width:34rem;font-size:1.15rem}
  .kopi-hero .paper-card .offer{max-width:34rem;font-size:1.05rem}
  .kopi-hero .signup{max-width:34rem}
}
@media (width>=1400px){.kopi-hero .k-table{background-size:cover;background-position:right 30%}}

/* ---------- site-wide option 2 touches ---------- */
/* marble table panels for signup and note blocks */
.signup-block,.story-end,.letter.note-block{
  background:linear-gradient(rgba(250,245,235,.6),rgba(250,245,235,.6)),#efe7da url(/images/kopitiam/kopi-marble-plain.jpg) center/cover;
  border-radius:6px;padding:1.2rem 1.1rem 1.3rem;
  box-shadow:0 1px 0 rgba(60,36,16,.06),0 10px 22px rgba(80,48,22,.12);
}
@media (width>=740px){.signup-block,.story-end,.letter.note-block{padding:1.6rem 1.8rem 1.8rem}}

/* page banners sit on the green tile wall */
.banner{background:#3f6b55 url(/images/kopitiam/kopi-tiles.jpg) center/640px auto repeat}
.banner-card{background:linear-gradient(rgba(250,245,235,.6),rgba(250,245,235,.6)),#efe7da url(/images/kopitiam/kopi-marble-plain.jpg) center/cover;box-shadow:0 10px 22px rgba(20,30,20,.28)}

/* footer: a proper band of wall tiles */
.site-footer::before{height:14px;opacity:1;background:#3f6b55 url(/images/kopitiam/kopi-tiles.jpg) center/320px auto repeat;box-shadow:0 1px 0 var(--grout) inset}

/* respect reduced motion: nothing animates here, keep tilts */

/* keep tilted prints from causing sideways scroll at any width */
.kopi-hero,.kopi-hero .k-wall{overflow-x:clip}
main#content{overflow-x:clip}


/* ---------- polish r1 (Shernice, 23 Oct): table edge + warmth. Appended last so it only overrides what it names. ---------- */
/* 3. Photos-to-table: a straight marble table edge (no dome), its top edge tucked under the bottom row of photos. */
.kopi-hero .k-wall{padding-bottom:.45rem}            /* was 1.5rem of bare tile under the photos; the table edge now rises ~17px into the bottom prints */
.kopi-hero .k-table{
  border-radius:0;
  box-shadow:
    inset 0 2px 0 rgba(255,252,244,.85),              /* polished lip catching the light */
    inset 0 3px 0 -1px rgba(150,120,90,.18),           /* thin bevel just below the lip */
    0 -2px 0 rgba(50,38,26,.28),                       /* dark line where the table edge meets the wall */
    0 -10px 16px -8px rgba(20,30,20,.5);               /* soft shadow on the tiles behind the table */
}
/* warm contact shadow the bottom photos cast on the marble */
.kopi-hero .k-table::before{
  content:"";position:absolute;inset:0 0 auto;height:1.8rem;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,rgba(70,45,22,.11),rgba(70,45,22,0));
}

/* 4. Warmth: lamp-light on the tile wall, warmer paper, deeper layered shadows, softer tape. */
.kopi-hero .k-wall::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(255,214,150,.20),rgba(255,214,150,0) 60%),
    linear-gradient(180deg,rgba(20,28,20,.10),rgba(20,28,20,0) 30%);
  mix-blend-mode:soft-light;
}
.k-print{
  background:#f5ecdc;
  box-shadow:
    0 1px 1px rgba(60,36,16,.18),
    0 4px 6px -1px rgba(40,24,10,.22),
    0 14px 22px -6px rgba(30,18,8,.42);
}
.k-print:not(.k-skyline) img{filter:sepia(.1) saturate(.96) contrast(1.02)}
.k-hdb{--r:-7deg}
.k-shop{--r:4deg}
.k-corridor{--r:-1.4deg}
.k-tape{
  background:
    linear-gradient(90deg,rgba(255,255,255,.22),rgba(255,255,255,0) 30%,rgba(255,255,255,.14) 70%,rgba(255,255,255,0)),
    rgba(236,222,186,.78);
  box-shadow:0 1px 1.5px rgba(60,40,20,.22);
}
@media (width>=900px){
  .kopi-hero .k-wall{padding-bottom:1.6rem}          /* was 2.4rem: bottom prints now overlap the table edge by ~15px */
  .k-hdb{--r:-6deg}
  .k-shop{--r:3.2deg}
  .kopi-hero .k-table::before{height:3.2rem}
}
/* Top-row tape was clipped by the top of the tile wall (just under the header).
   Drop the collage ~10px and seat the tape a little lower so the full strip shows; top prints still start at the wall's top edge. */
.kopi-hero .k-wall{padding-top:.6rem}
.k-tape-top{top:-.15rem}
/* AA safety: small note text sits on the darker marble veins; one step darker keeps it >= 4.5:1 everywhere */
.kopi-hero .signup-note{color:#463a30}

@media (min-width:600px) and (max-width:899px){.kopi-hero .k-tape-top{top:.15rem}}