/* Wake Up Somewhere: shared fixes layered over each page's own styles.
   Loaded after the page's <style>, so these rules win where they overlap. */

/* Readable small text: the old gray (#8a8174) was 3.3:1 on cream; this is about 5.5:1 */
:root { --muted: #665e52; }
[hidden] { display: none !important; }

/* Custom cursor only for a mouse or trackpad with motion allowed (head script adds .cc).
   Everyone else keeps the normal pointer. */
html:not(.cc) .cursor-dot,
html:not(.cc) .cursor-ring,
html:not(.cc) .cursor-trail { display: none !important; }
html.cc, html.cc * { cursor: none !important; }

/* Keyboard focus that can be seen */
:focus-visible { outline: 2px solid var(--accent, #8b3a2b); outline-offset: 3px; }
html.theme-dark :focus-visible, .news :focus-visible, .site-menu :focus-visible { outline-color: var(--accent-2, #c08560); }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10002;
  background: var(--ink, #1a1814); color: var(--bg, #f3eee5);
  padding: 12px 16px; font: 500 13px/1 "Inter", system-ui, sans-serif; letter-spacing: 0.08em;
}
.skip-link:focus { left: 16px; top: 16px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* Logo: the locked wordmark, drawn as outlines so it always matches the logo files */
/* (drawn once in assets/logo.svg; the full stop's color comes from --logo-dot) */
.logo svg { display: block; height: 1em; width: auto; overflow: visible; }
.logo { --logo-dot: var(--accent, #8b3a2b); }
html.theme-dark .logo { --logo-dot: var(--accent-2, #c08560); }
nav.top .logo { font-size: 24px !important; line-height: 1; display: inline-flex; align-items: center; --logo-dot: currentColor; } /* the nav blends over photos, so one color */
footer.compact .logo { font-size: 30px !important; line-height: 1; display: inline-flex; align-items: center; color: var(--ink); }
html.theme-dark footer.compact .logo { color: var(--bg); }
footer.compact { align-items: center; }
footer.compact .foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
footer.compact .foot-links a:hover, footer.compact > a:hover { color: var(--ink); }
html.theme-dark footer.compact .foot-links a:hover { color: var(--bg); }

/* Phone menu */
.menu-btn {
  display: none; margin-left: auto; padding: 10px 0 10px 12px;
  background: none; border: 0; color: inherit; font: inherit;
  letter-spacing: inherit; text-transform: inherit; cursor: pointer;
}
.site-menu {
  position: fixed; inset: 0; z-index: 10001; overflow-y: auto;
  background: #1a1814; color: #f3eee5;
  padding: 22px 20px 40px; display: flex; flex-direction: column;
}
.site-menu .menu-head { display: flex; align-items: center; justify-content: space-between; }
.site-menu .menu-head .logo { font-size: 24px; color: #f3eee5; }
.site-menu .menu-head .logo { --logo-dot: #c08560; }
.site-menu .menu-close {
  background: none; border: 0; color: #f3eee5; padding: 10px 0 10px 12px; cursor: pointer;
  font: 400 12px/1 "Inter", system-ui, sans-serif; letter-spacing: 0.18em; text-transform: uppercase;
}
.site-menu ul { list-style: none; margin: 12vh 0 0; padding: 0; display: grid; gap: 6px; }
.site-menu ul a {
  font-family: "Fraunces", "Times New Roman", serif; font-style: italic; font-weight: 300;
  font-size: clamp(40px, 12vw, 64px); line-height: 1.1; letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144, "SOFT" 100; color: #f3eee5; text-decoration: none;
}
.site-menu ul a[aria-current="page"] { color: #c08560; }
.site-menu .menu-foot { margin-top: auto; padding-top: 40px; display: grid; gap: 10px;
  font: 400 12px/1.6 "Inter", system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: #b9b0a1; }
.site-menu .menu-foot a { color: #f3eee5; text-decoration: none; }
html.menu-open, html.menu-open body { overflow: hidden; }

@media (max-width: 760px) {
  nav.top { left: 0 !important; right: 0 !important; padding: 18px 20px !important; gap: 16px !important; justify-content: flex-start !important; }
  nav.top .links, nav.top .back { display: none !important; }
  nav.top .logo { margin-right: 0 !important; }
  .menu-btn { display: inline-flex; }
  .section-tag, .progress, .scroll-cue { display: none !important; }
}

/* Home page closing wordmark: two lines for the longer name */
.foot-logo { flex-direction: column; font-size: clamp(56px, 12.5vw, 220px) !important; line-height: 0.92 !important; max-width: 100%; }
.foot-logo .line { display: flex; overflow: hidden; padding-bottom: 0.08em; }
.foot-logo .ch.dot { color: var(--accent); }
.news .form-status { position: relative; z-index: 1; color: var(--bg); }
.news .fineprint a, .fineprint a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Phones: nothing may be wider than the screen */
@media (max-width: 900px) {
  .hero > *, .intro > * { min-width: 0; }
  .hero .stats { flex-wrap: wrap; gap: 22px 34px; }                 /* stays page figures wrap */
  .post.from-left, .post.from-right { transform: translateY(40px); } /* home journal cards rise instead of sliding in from the side */
  .post.in { transform: none; }
  .booking .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .booking .row > div { min-width: 0; }
}
@media (max-width: 700px) {
  /* home footer: two even link columns, with "Find us" (the long email) on its own row */
  .foot-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 40px 24px !important; }
  .foot-cols > div:last-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .hero h1 { overflow-wrap: break-word; }
  .hero .stats { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* stays page: a neat 2 x 2 */
  .booking { padding: 24px; }
  .booking .row { margin-left: -24px; margin-right: -24px; }
  .booking .contact { margin: 0 -24px; }
  .booking .row > div, .booking .contact > div { padding: 14px 24px; }
}

/* Forms: one status line under each form */
.form-status { margin-top: 14px; min-height: 1.4em; font-size: 13px; letter-spacing: 0.04em; text-transform: none; }
.form-status.ok { color: inherit; }
.form-status.err { color: #c0563f; }
.form-note { margin-top: 12px; font-size: 12px; letter-spacing: 0.04em; text-transform: none; opacity: 0.8; }
.form-note a { text-decoration: underline; text-underline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }   /* a thank-you message that receives focus after sending */

/* Stay page: the "Request the room" panel is now a real form */
.booking .row input, .booking .row select {
  width: 100%; background: transparent; border: 0; border-radius: 0; padding: 0; color: var(--ink);
  font-family: var(--f-display, "Fraunces", serif); font-style: italic; font-size: 18px; line-height: 1.3;
}
.booking .row input::-webkit-calendar-picker-indicator { opacity: 0.5; }
.booking .contact { display: grid; gap: 1px; margin: 0 -32px; background: var(--line); border-bottom: 1px solid var(--line); }
.booking .contact > div { background: rgba(255,253,247,0.6); padding: 16px 32px; }
.booking .contact label { display: block; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.booking .contact input, .booking .contact textarea {
  width: 100%; background: transparent; border: 0; padding: 0; color: var(--ink);
  font-family: var(--f-body, "Inter", sans-serif); font-size: 15px; line-height: 1.5; resize: vertical;
}
.booking .contact textarea { min-height: 64px; }

/* Submit page: a link field replaces the upload box that didn't work */
.submit .photo-link input { width: 100%; }
/* Submit page: each section's rule now sits above its question (a fieldset border ran through the heading) */
form.submit legend { float: left; width: 100%; padding: 0; }
form.submit legend + * { clear: both; }

/* Respect "reduce motion": no drifting, sliding or autoplaying movement */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal, .stay, .post, .card, .ed, .entry, .pcard, .rel, .mcard, .issue, .perk, .stop,
  .word-mask > span, .foot-logo .ch, .stay-img, .post-img, .featured-img img,
  .hero-inner, .hero-img, [data-parallax], .marquee-track, #newsHead {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
  .manifesto-text .w { opacity: 1 !important; }
}

/* Private preview only: a small note so nobody mistakes sample content for the real thing */
.preview-note {
  position: fixed; left: 16px; bottom: 16px; z-index: 10003; max-width: min(360px, calc(100vw - 32px));
  display: flex; gap: 12px; align-items: flex-start;
  background: #1a1814; color: #f3eee5; border-radius: 12px; padding: 12px 14px;
  font: 400 12px/1.5 "Inter", system-ui, sans-serif; box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}
.preview-note b { font-weight: 600; color: #e7c3a5; }
.preview-note button { background: none; border: 0; color: #f3eee5; font-size: 16px; line-height: 1; padding: 0 2px; cursor: pointer; }