/* Shared base styles for every SIB Kaban page. */
html, body { background:#f3efe6; color:#111; -webkit-font-smoothing:antialiased; }
/* Stable gutter so locking scroll (modal) doesn't shift the layout. */
html { overflow-x: clip; scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  font-family: Inter, system-ui, sans-serif;
  /* Gentle fade on first load — also hides Tailwind's first-paint styling pass. */
  animation: sib-page-in .45s ease-out;
}
.font-display { font-family: "Playfair Display", Georgia, serif; }

.wrap { max-width:1440px; margin:0 auto; padding:0 1.25rem; }
@media (min-width:640px) { .wrap { padding:0 2.5rem; } }
@media (min-width:1024px) { .wrap { padding:0 3.5rem; } }

/* Anchored sections clear the fixed header. */
[id] { scroll-margin-top: 6rem; }

.eyebrow { font-size:12px; letter-spacing:0.22em; text-transform:uppercase; font-weight:500; }

.display-xl {
  font-family:"Playfair Display",Georgia,serif;
  font-weight:400; line-height:1; letter-spacing:-0.015em;
  font-size:clamp(2.5rem,7vw,7.5rem);
}
.display-lg {
  font-family:"Playfair Display",Georgia,serif;
  font-weight:400; line-height:1.08; letter-spacing:-0.01em;
  font-size:clamp(2rem,4.5vw,4.5rem);
}

.btn-primary {
  display:inline-flex; align-items:center; gap:.5rem;
  border-radius:9999px; background:#111; color:#f3efe6;
  padding:.75rem 1.5rem; font-size:12px;
  letter-spacing:0.14em; text-transform:uppercase;
  transition:background-color .25s ease, color .25s ease, transform .25s ease;
}
.btn-primary:hover { background:#2b2b2b; }

.btn-ghost {
  display:inline-flex; align-items:center; gap:.5rem;
  border-radius:9999px; border:1px solid rgba(17,17,17,.3); color:#111;
  padding:.75rem 1.5rem; font-size:12px;
  letter-spacing:0.14em; text-transform:uppercase;
  transition:background-color .25s ease, color .25s ease, border-color .25s ease; background:transparent;
}
.btn-ghost:hover { background:#111; color:#f3efe6; }

.btn-primary:active, .btn-ghost:active { transform: scale(0.97); }

.link-u { position:relative; display:inline-block; }
.link-u::after {
  content:""; position:absolute; left:0; bottom:-2px;
  height:1px; width:100%; background:currentColor;
  transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.link-u:hover::after, .link-u.on::after { transform:scaleX(1); }

/* ---- Header ----
   Dark text by default (solid). Pages with a dark hero add .hero-mode to <body>
   to flip the header to light text while it's over the hero. */
#hdr {
  background:rgba(243,239,230,.95); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(17,17,17,.1); color:#111;
  transition: background-color .35s ease, border-color .35s ease, color .35s ease, backdrop-filter .35s ease;
  /* Held in place while the page underneath crossfades. */
  view-transition-name: site-header;
}
#hdr .lang-btn {
  border:1px solid rgba(17,17,17,.3); color:#111; background:transparent;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
#hdr .lang-btn:hover { background:#111; color:#f3efe6; }
#hdr .cta { background:#111; color:#f3efe6; }
#hdr .cta:hover { background:#2b2b2b; }

body.hero-mode #hdr:not(.solid) {
  background:transparent; backdrop-filter:none; border-bottom-color:transparent; color:#f3efe6;
}
body.hero-mode #hdr:not(.solid) .cta { background:#f3efe6; color:#111; }
body.hero-mode #hdr:not(.solid) .cta:hover { background:#fff; }
body.hero-mode #hdr:not(.solid) .lang-btn { border-color:rgba(243,239,230,.4); color:#f3efe6; }
body.hero-mode #hdr:not(.solid) .lang-btn:hover { background:#f3efe6; color:#111; }

/* ---- Phone / tablet menu ---- */
.menu-btn {
  width: 2.5rem; height: 2.5rem; border-radius: 999px; position: relative;
  border: 1px solid currentColor; border-color: rgba(17,17,17,.3);
}
.menu-btn span {
  position: absolute; left: 50%; width: 1rem; height: 1.5px; margin-left: -.5rem; background: currentColor;
  transition: transform .3s cubic-bezier(.4,0,.2,1), top .3s cubic-bezier(.4,0,.2,1);
}
.menu-btn span:first-child { top: calc(50% - 3.5px); }
.menu-btn span:last-child { top: calc(50% + 2.5px); }
#hdr.menu-open .menu-btn span:first-child { top: calc(50% - .75px); transform: rotate(45deg); }
#hdr.menu-open .menu-btn span:last-child { top: calc(50% - .75px); transform: rotate(-45deg); }
body.hero-mode #hdr:not(.solid):not(.menu-open) .menu-btn { border-color: rgba(243,239,230,.4); }

.mnav {
  position: fixed; left: 0; right: 0; top: 4rem; bottom: 0; overflow-y: auto;
  background: #f3efe6; color: #111;
  visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity .25s ease, transform .3s cubic-bezier(.16,1,.3,1), visibility 0s linear .3s;
}
@media (min-width:768px) { .mnav { top: 5rem; } }
#hdr.menu-open .mnav { visibility: visible; opacity: 1; transform: none; transition: opacity .25s ease, transform .35s cubic-bezier(.16,1,.3,1); }
.mnav-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 0; border-bottom: 1px solid rgba(17,17,17,.1);
  font-family: "Playfair Display", Georgia, serif; font-size: 1.75rem; line-height: 1.2;
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s ease, transform .4s cubic-bezier(.16,1,.3,1), color .2s ease;
}
#hdr.menu-open .mnav-link { opacity: 1; transform: none; transition-delay: calc(var(--i) * 35ms); }
.mnav-link span:last-child { font-family: Inter, system-ui, sans-serif; font-size: 1rem; color: #a3a3a3; }
.mnav-link.on { color: #c84b31; }
.mnav-link.on span:last-child { color: #c84b31; }
/* The open menu always sits on a solid header, even over a dark hero. */
body.hero-mode #hdr.menu-open { background: #f3efe6; color: #111; border-bottom-color: rgba(17,17,17,.1); }
body.hero-mode #hdr.menu-open .lang-btn { border-color: rgba(17,17,17,.3); color: #111; }

/* ---- Navigation loading bar (only appears when a page is slow to load) ---- */
#nav-bar {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2.5px;
  background: #c84b31;
  z-index: 9999;
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
  opacity: 0;
}
#nav-bar.loading {
  opacity: 1;
  transform: scaleX(0.7);
  transition: transform 2s cubic-bezier(0.1, 0.6, 0.2, 1);
}
#nav-bar.done {
  opacity: 0;
  transform: scaleX(1);
  transition: transform .2s ease-out, opacity .3s ease .15s;
}

/* ---- Scroll reveal (pair with SIB.reveal) ---- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);
}
.reveal.in { opacity: 1; transform: none; }

/* ---- Entrance for content that was just shown (SIB.enter) ---- */
.sib-enter { animation: sib-enter .45s cubic-bezier(.16,1,.3,1) both; }

@keyframes sib-page-in { from { opacity: 0; } }
@keyframes sib-enter   { from { opacity: 0; transform: translateY(10px); } }

/* ---- Page transitions (View Transitions API, driven by router.js) ---- */
html.vt-page::view-transition-old(root) {
  animation: vt-fade-out .18s cubic-bezier(.4,0,1,1) both;
}
html.vt-page::view-transition-new(root) {
  animation: vt-fade-in .42s cubic-bezier(.16,1,.3,1) .05s both;
}
::view-transition-group(site-header) {
  animation-duration: .35s;
  animation-timing-function: cubic-bezier(.4,0,.2,1);
}
@keyframes vt-fade-out { to   { opacity: 0; } }
@keyframes vt-fade-in  { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body, .sib-enter { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Print — used by the bulletin page */
@media print {
  #hdr, footer, .no-print { display:none !important; }
  body { background:#fff; color:#000; }
}