:root {
  --sand: #F4EFE6;
  --limestone: #E8E1D5;
  --olive: #303B32;
  --pine: #41584A;
  --bronze: #98836A;
  --sea: #A9B7BA;
  --ink-soft: #5E6A60;
  --line: #DDD5C6;
  --warn: #9A5B3C;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --fade: 1.8s;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--sand); color: var(--olive); font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--pine); outline-offset: 3px; border-radius: 6px; }

/* ---------- brand ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 36px; height: 36px; mix-blend-mode: multiply; }
.brand span { font: 500 30px/1 var(--serif); letter-spacing: .01em; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; padding: 0 24px; border-radius: 99px; border: 1px solid transparent;
  font: 500 15px var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.btn svg { width: 16px; height: 16px; }
.btn.primary { background: var(--olive); color: var(--sand); }
.btn.primary:hover { background: var(--pine); }
.btn.quiet { border-color: rgba(48,59,50,.25); background: rgba(244,239,230,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.btn.quiet:hover { border-color: var(--olive); }
.btn.block { width: 100%; }

.eyebrow { font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bronze); }

/* ---------- slideshow ---------- */
.slideshow { position: absolute; inset: 0; overflow: hidden; background: var(--limestone); }
.slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--x, 50%) var(--y, 50%);
  opacity: 0; transition: opacity var(--fade) ease;
}
.slide.prev { opacity: 1; z-index: 1; }
.slide.on { opacity: 1; z-index: 2; }
.slide.on, .slide.prev { animation: drift var(--drift, 9s) linear forwards; }
@keyframes drift { from { transform: scale(1.07); } to { transform: scale(1); } }

.dots { display: flex; align-items: center; gap: 8px; }
.dot { position: relative; width: 28px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; }
.dot::before, .dot i { content: ""; position: absolute; left: 0; top: 8px; height: 2px; border-radius: 2px; }
.dot::before { right: 0; background: rgba(48,59,50,.2); }
.dot i { width: 0; background: var(--olive); }
.dot.on i { animation: fill var(--interval, 7s) linear forwards; }
.dot.seen i { width: 100%; }
.paused .dot.on i { animation-play-state: paused; }
@keyframes fill { to { width: 100%; } }
.pause { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(48,59,50,.25); background: rgba(244,239,230,.55); display: grid; place-items: center; cursor: pointer; color: var(--olive); }
.pause svg { width: 12px; height: 12px; }

@media (prefers-reduced-motion: reduce) {
  .slide.on, .slide.prev { animation: none; }
  :root { --fade: 1.2s; }
}

/* ---------- homepage ---------- */
.home { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; }
.home .veil {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(244,239,230,.94) 0%, rgba(244,239,230,.78) 34%, rgba(244,239,230,0) 66%),
    linear-gradient(0deg, rgba(244,239,230,.55) 0%, rgba(244,239,230,0) 26%);
}
.home header, .home main, .home footer { position: relative; z-index: 4; }
.home header { display: flex; justify-content: space-between; align-items: center; padding: 28px 48px; }
.home main { align-self: center; padding: 0 48px; max-width: 640px; }
.home h1 { margin: 14px 0 18px; font: 400 clamp(56px, 8vw, 104px)/.95 var(--serif); letter-spacing: -.01em; }
.home h1 em { font-style: italic; color: var(--pine); }
.home p.lede { margin: 0 0 32px; max-width: 440px; font-size: 18px; color: var(--ink-soft); }
.home .ctas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.home .note { font: 13px var(--mono); color: var(--ink-soft); }
.home footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px 48px 28px; font: 12px var(--mono); color: var(--ink-soft); }
.home footer .controls { display: flex; align-items: center; gap: 14px; }

/* ---------- sign in ---------- */
.signin { display: grid; grid-template-columns: minmax(360px, 520px) 1fr; min-height: 100vh; min-height: 100svh; }
.signin .panel { display: flex; flex-direction: column; padding: 32px 48px; background: var(--sand); }
.signin .form { margin: auto 0; max-width: 380px; width: 100%; padding: 40px 0; }
.signin h1 { margin: 12px 0 10px; font: 400 52px/1 var(--serif); }
.signin .form > p { margin: 0 0 28px; color: var(--ink-soft); }
.signin .fine { margin-top: 18px; font-size: 13px; color: var(--ink-soft); }
.signin .fine li { margin-bottom: 6px; }
.signin .fine ul { padding-left: 18px; margin: 0; }
.signin .back { font: 13px var(--mono); color: var(--ink-soft); text-decoration: none; }
.signin .back:hover { color: var(--olive); }
.signin .photo { position: relative; min-height: 280px; }
.signin .photo .dots-wrap { position: absolute; z-index: 4; right: 24px; bottom: 20px; display: flex; gap: 12px; align-items: center; padding: 6px 10px; border-radius: 99px; background: rgba(244,239,230,.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

.alert { display: none; margin: 0 0 22px; padding: 12px 14px; border-radius: 10px; font-size: 14px; }
.alert.show { display: block; }
.alert.ok { background: #E4EAE3; color: var(--pine); }
.alert.warn { background: #F1E5DA; color: var(--warn); }

.divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; font: 12px var(--mono); color: var(--bronze); text-transform: uppercase; letter-spacing: .1em; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .home .veil { background: linear-gradient(0deg, rgba(244,239,230,.97) 0%, rgba(244,239,230,.9) 38%, rgba(244,239,230,0) 64%, rgba(244,239,230,0) 86%, rgba(244,239,230,.5) 100%); }
  .home header { padding: 18px 16px; }
  .home header .btn { height: 38px; padding: 0 16px; font-size: 14px; }
  .home main { align-self: end; padding: 0 16px 8px; }
  .home p.lede { font-size: 16px; margin-bottom: 24px; }
  .home footer { padding: 16px 16px 22px; }
  .home footer .copy { display: none; }
  .signin { grid-template-columns: 1fr; grid-template-rows: 34vh auto; }
  .signin .photo { order: -1; min-height: 0; }
  .signin .panel { padding: 22px 16px 32px; }
  .signin .panel > .brand { display: none; }
  .signin .form { padding: 8px 0 24px; }
  .signin h1 { font-size: 42px; }
}