@import url('./fonts/fonts.css');

/* ==========================================================================
   Cocoyellow Village — shared stylesheet
   Nothing here loads from another origin. See privacy.html.
   ========================================================================== */

:root {
  --jungle-deep: #1b3a2f;
  --jungle-mid:  #2d5240;
  --olive:       #6B8F5A;
  --gold:        #E8C56A;
  --rose:        #E2B3A4;
  --linen:       #F4EFE5;
  --oat:         #E9DCCB;
  --paper:       #FCF7EB;
  --clay:        #B8916A;
  --ink:         #3E4548;
  --ink-soft:    #5a4f3c;

  --serif:  'Cormorant Garamond', 'Lora', Georgia, serif;
  --body:   'Lora', Georgia, 'Times New Roman', serif;
}

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

html { background: var(--linen); }

body {
  min-height: 100vh;
  font-family: var(--body);
  color: var(--ink);
  background: var(--linen);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Paper grain — inline SVG, no asset request. Sits under everything. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body > * { position: relative; z-index: 1; }

a { color: var(--jungle-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--jungle-mid); }

/* --- Hero painting (home only) ------------------------------------------ */
.hero {
  position: relative;
  width: min(100%, calc(85vh * 1.1));
  aspect-ratio: 11 / 10;
  max-height: 85vh;
  min-height: 420px;
  margin: 0 auto;
  overflow: hidden;
  background-color: #c5b48a;
  border-radius: 8px;
  border: 1px solid rgba(62, 69, 72, 0.14);
  box-shadow: 0 16px 48px rgba(46, 36, 22, 0.16), 0 2px 8px rgba(46, 36, 22, 0.08);
}

.hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}

/* The slow breath. A ~40s near-imperceptible drift so the village breathes.
   The painting itself moving, so nothing is regenerated and the watercolor
   cannot degrade. Starts at scale(1.02) so the pan never reveals the
   container edge. Whatever image sits here inherits this, including the
   waking version when it lands. Disabled under reduced-motion below. */
@keyframes hero-breathe {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.07) translate3d(-1.1%, -0.9%, 0); }
}
.hero > img {
  transform-origin: 55% 45%;
  animation: hero-breathe 42s ease-in-out infinite alternate;
  will-change: transform;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(20, 26, 18, 0.42) 0%,
    rgba(20, 26, 18, 0.18) 22%,
    rgba(20, 26, 18, 0) 50%,
    rgba(20, 26, 18, 0) 100%);
  pointer-events: none;
}

.hero-head {
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 16px;
}
.hero-mark {
  flex: none;
  width: 66px;
  height: auto;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4));
}
.wordmark {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--linen);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 14px rgba(0, 0, 0, 0.25);
  margin: 0;
}

/* --- Interior page header ------------------------------------------------
   Quiet. A mark and the name, on linen. No nav bar anywhere on this site. */
.pagehead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 46px 20px 8px;
  text-align: center;
}
.pagehead img { width: 52px; height: auto; }
.pagehead a {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  color: var(--jungle-deep);
  text-decoration: none;
}
.pagehead a:hover { text-decoration: underline; }

/* --- Content ------------------------------------------------------------- */
.content {
  max-width: 600px;
  margin: 0 auto;
  padding: 56px 28px 40px;
  text-align: center;
}

/* Long-form reading measure — stories, privacy, about */
.prose {
  max-width: 620px;
  margin: 0 auto;
  padding: 30px 28px 56px;
  text-align: left;
}
.prose p {
  font-size: 1.05rem;
  line-height: 1.85;
  margin: 0 0 1.35em;
}
.prose p em { font-style: italic; }
.prose h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--jungle-deep);
  letter-spacing: 0.01em;
  margin: 2.4em 0 0.7em;
}
.prose h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.18rem;
  color: var(--jungle-mid);
  margin: 2em 0 0.5em;
}
.prose ul { padding-left: 1.2em; margin: 0 0 1.4em; }
.prose li { line-height: 1.8; margin-bottom: 0.5em; }
.prose hr {
  border: 0;
  border-top: 1px solid rgba(27, 58, 47, 0.18);
  margin: 2.6em auto;
  width: 42%;
}
.prose .small { font-size: 0.92rem; color: var(--ink-soft); }

.pagetitle {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.2;
  color: var(--jungle-deep);
  text-align: center;
  margin: 26px 0 6px;
}
.pagesub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jungle-mid);
  text-align: center;
  margin: 0 0 8px;
}

/* --- The threshold ------------------------------------------------------
   One sensory line between the sign and the room. Weather, present tense.
   If a line could open any tropical-fiction site, it's the wrong line. */
.threshold {
  max-width: 540px;
  margin: 0 auto 14px;
  padding: 0 28px;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.12rem, 1.9vw, 1.32rem);
  line-height: 1.55;
  color: var(--jungle-mid);
}
.threshold + .content,
.threshold + .stories,
.threshold + .residents { padding-top: 18px; }

/* --- The slow reveal ----------------------------------------------------
   Text arrives rather than dumps — eyes adjusting to shade after bright sun.
   Fully disabled under prefers-reduced-motion (see the bottom of this file). */
@keyframes arrive {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pagesub,
.pagetitle,
.threshold,
.pretitle,
.lede {
  animation: arrive 1100ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.pagesub,  .pretitle { animation-delay: 120ms; }
.pagetitle, .lede    { animation-delay: 380ms; }
.threshold           { animation-delay: 760ms; }

.pretitle {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--jungle-mid);
  margin: 0 0 20px;
}

.lede {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  line-height: 1.3;
  color: var(--jungle-deep);
  margin: 0 0 22px;
}

.body {
  font-size: clamp(1rem, 1.3vw, 1.08rem);
  line-height: 1.82;
  color: var(--ink);
  margin: 0 0 14px;
}
.body + .body { margin-bottom: 32px; }

.ask {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.4vw, 1.18rem);
  color: var(--jungle-deep);
  margin: 0 0 14px;
}

/* --- Featured vignette --------------------------------------------------- */
.feature {
  max-width: 420px;
  margin: 4px auto 36px;
  background: #fafaf0;
  padding: 12px 12px 38px;
  box-shadow: 0 12px 30px rgba(46, 36, 22, 0.16), 0 2px 4px rgba(46, 36, 22, 0.09);
  transform: rotate(-1.2deg);
  transition: transform 400ms ease;
}
.feature:hover { transform: rotate(0deg) translateY(-3px); }
.feature img { width: 100%; height: auto; display: block; border-radius: 2px; }
.feature figcaption {
  margin: 14px 4px 0;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

/* --- The Village Post ---------------------------------------------------- */
.postbox {
  max-width: 440px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid rgba(74, 63, 44, 0.18);
  border-radius: 2px;
  padding: 22px 20px;
  box-shadow: 0 1px 0 rgba(74, 63, 44, 0.04);
  text-align: center;
}

.postbtn {
  display: inline-block;
  border: 0;
  background: var(--jungle-deep);
  color: var(--linen);
  font-family: var(--serif);
  font-size: 1rem;
  font-style: italic;
  letter-spacing: 0.04em;
  padding: 11px 24px;
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  transition: background 240ms ease, transform 120ms ease;
}
.postbtn:hover { background: var(--jungle-mid); color: var(--linen); }
.postbtn:active { transform: translateY(1px); }

.postnote {
  margin: 14px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.94rem;
  color: var(--ink-soft);
}

/* --- Gallery ------------------------------------------------------------- */
.gallery {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 28px 72px;
  display: grid;
  grid-template-columns: 1.9fr 1fr;
  gap: 36px;
  align-items: center;
}

.postcard {
  background: #fafaf0;
  padding: 10px 10px 34px;
  box-shadow: 0 10px 28px rgba(46, 36, 22, 0.18), 0 2px 4px rgba(46, 36, 22, 0.1);
  width: 100%;
  margin: 0 auto;
  transition: transform 400ms ease;
}
.postcard:nth-child(1) { transform: rotate(-2.0deg); }
.postcard:nth-child(2) { transform: rotate(1.4deg); }
.postcard:hover { transform: rotate(0deg) translateY(-3px); }
.postcard img { width: 100%; height: auto; display: block; }
.postcard figcaption {
  margin: 12px 4px 0;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

/* --- Stories index ------------------------------------------------------- */
.stories { max-width: 680px; margin: 0 auto; padding: 10px 28px 60px; }

.story {
  display: block;
  padding: 26px 0;
  border-bottom: 1px solid rgba(27, 58, 47, 0.14);
  text-decoration: none;
  color: inherit;
}
.story:last-child { border-bottom: 0; }
.story h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--jungle-deep);
  margin: 0 0 6px;
}
.story:hover h2 { text-decoration: underline; text-underline-offset: 4px; }
.story .when {
  font-family: var(--serif);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 8px;
}
.story p.scene {
  font-size: 0.99rem;
  line-height: 1.75;
  color: var(--ink);
  margin: 0;
}
.story.soon { opacity: 0.55; }
.story.soon h2 { text-decoration: none; }

/* --- Who lives here ------------------------------------------------------------ */
.residents { max-width: 620px; margin: 0 auto; padding: 10px 28px 60px; }
.who { padding: 22px 0; border-bottom: 1px solid rgba(27, 58, 47, 0.12); }
.who:last-child { border-bottom: 0; }
.who h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.32rem;
  color: var(--jungle-deep);
  margin: 0 0 4px;
}
.who p { margin: 0; line-height: 1.8; font-size: 1.02rem; }
.who .local {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
}

/* --- Footer -------------------------------------------------------------- */
.footer {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.98rem;
  color: var(--jungle-deep);
  letter-spacing: 0.08em;
  padding: 40px 16px 48px;
  border-top: 1px solid rgba(27, 58, 47, 0.22);
}
.footer-logo {
  display: block;
  width: min(210px, 62vw);
  height: auto;
  margin: 0 auto 20px;
}
.footer-line { margin: 0; }

.footnav {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 20px;
  font-style: normal;
  font-family: var(--serif);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
}
.footnav a { color: var(--jungle-deep); text-decoration: none; }
.footnav a:hover { text-decoration: underline; text-underline-offset: 4px; }

.fineprint {
  margin: 16px 0 0;
  font-family: var(--serif);
  font-style: normal;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.fineprint a { color: var(--ink-soft); }

/* --- Social -------------------------------------------------------------- */
.social {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 0 0 22px;
}
.social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: var(--linen);
  background: var(--jungle-mid);
  border: 1px solid var(--jungle-deep);
  transition: color 200ms ease, background 200ms ease, transform 160ms ease;
}
.social a:hover { color: var(--linen); background: var(--jungle-deep); transform: translateY(-2px); }
.social svg { width: 18px; height: 18px; }

/* --- Sound toggle -------------------------------------------------------- */
.sound {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 10;
  background: rgba(251, 245, 228, 0.85);
  border: 1px solid rgba(74, 63, 44, 0.18);
  border-radius: 999px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--jungle-mid);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 200ms ease;
}
.sound:hover { background: rgba(251, 245, 228, 0.98); }
.sound svg { width: 15px; height: 15px; }

/* --- Tablet -------------------------------------------------------------- */
@media (max-width: 880px) {
  .gallery { gap: 26px; padding: 4px 24px 56px; }
}

/* --- Mobile -------------------------------------------------------------- */
@media (max-width: 640px) {
  .hero { min-height: 320px; max-height: 72vh; aspect-ratio: 1 / 1; }
  .hero-head { top: 20px; gap: 9px; }
  .hero-mark { width: 48px; }
  .wordmark { font-size: 1.5rem; }
  .content { padding: 40px 22px 28px; }
  .prose { padding: 24px 22px 44px; }
  .pagehead { padding: 32px 20px 4px; }
  .gallery {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 4px 22px 48px;
    justify-items: center;
  }
  .postcard:nth-child(1) { max-width: 440px; transform: rotate(-1.6deg); }
  .postcard:nth-child(2) { max-width: 260px; transform: rotate(1.0deg); }
  .footnav { gap: 6px 14px; font-size: 0.9rem; }
}

/* --- Motion ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .feature, .postcard { transform: none !important; }
  .pagesub, .pagetitle, .threshold, .pretitle, .lede {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .hero > img {
    animation: none !important;
    transform: none !important;
    will-change: auto;
  }
}

/* --- Village Post signup form -------------------------------------------- */
.postform {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.postinput {
  width: 100%;
  min-width: 0;
  font-family: var(--body);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--linen);
  border: 1px solid rgba(74, 63, 44, 0.28);
  border-radius: 2px;
  padding: 11px 14px;
  transition: border-color 200ms ease;
}
.postinput::placeholder {
  color: var(--ink-soft);
  opacity: 0.65;
  font-style: italic;
}
.postinput:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 1px;
  border-color: var(--olive);
}
.postinput:disabled { opacity: 0.55; }

.postform .postbtn {
  align-self: center;
  min-width: 190px;
}
.postform .postbtn:disabled {
  opacity: 0.7;
  cursor: default;
  transform: none;
}

.poststatus {
  margin: 12px 0 0;
  min-height: 1.3em;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.94rem;
  color: var(--ink-soft);
  opacity: 0;
  transition: opacity 260ms ease;
}
.poststatus.show { opacity: 1; }
.poststatus.error { color: #8c4a3f; }

@media (prefers-reduced-motion: reduce) {
  .postinput, .poststatus { transition: none; }
}