/* ============================================================================
 * Shell: base typography, site header and footer.
 *
 * Ported verbatim from fotos.uklsh.de app/assets/stylesheets/landing.css:
 * lines 7-38 (base reset, body, paper grain, link reset), 39-240 (container
 * and header), 758-823 (footer). ADR-016.
 *
 * The landing page styles those sections sit among (hero, gallery, newsletter)
 * are not ported: this application has no landing page.
 * ==========================================================================*/

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* paper-grain so flat backgrounds feel printed, not digital */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: var(--grain-op);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: var(--grain-blend);
}

::selection { background: var(--moss); color: var(--bg); }

img { display: block; max-width: 100%; height: auto; }
a   { color: inherit; text-decoration: none; }


.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* ---------- type helpers ---------- */
.eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--moss-bright);
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
  margin: 0;
}
.eyebrow::before {
  content: "";
  width: 2.2em;
  height: 1px;
  background: var(--moss);
}

.label {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}

.display {
  font-weight: 300;
  font-size: clamp(3rem, 9vw, 7.5rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.display em { font-style: italic; font-weight: 400; color: var(--moss-bright); }

h2.section-title {
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.05;
  font-weight: 300;
  margin-bottom: 1.4rem;
  max-width: 22ch;
}
h2.section-title em { font-style: italic; color: var(--moss-bright); }

.lede {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 42ch;
}

.prose p { max-width: 38rem; margin: 0 0 1.15em; color: var(--ink-soft); }
.prose p:last-child { margin-bottom: 0; }
.prose em     { color: var(--ink); font-style: italic; }
.prose strong { color: var(--ink); font-weight: 500; }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-rule);
  transition: background .4s ease, border-color .4s ease;
  color: var(--nav-ink);
}
.site-header.is-scrolled {
  background: var(--nav-bg-scrolled);
  border-bottom-color: var(--nav-rule-strong);
}
/* navbar keeps a constant total height via min-height; logo overhangs it */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-block: 0.75rem;
  min-height: 80px;
}

/* Below the width where the navigation moves to its own row, the header is
   deliberately tight: it is already taking a second row of the screen, so it
   should not also spend a large gap between the rows and full padding around
   them. */
@media (max-width: 879px) {
  .header-inner {
    row-gap: 0.25rem;
    padding-block: 0.5rem;
    min-height: 0;
  }
}
.brand {
  display: flex;
  align-items: center;
  color: var(--nav-ink);
  line-height: 1;
}
.brand img.logo {
  width: auto;
  margin-right: 1rem;
  /* Mobile: one small size, whether or not the page is scrolled. The header is
     already taking a second row for the navigation there, so a mark that grows
     would cost screen height for nothing. */
  height: 48px;
  display: block;
  filter: drop-shadow(0 8px 22px rgba(20, 40, 56, 0.32));
}

/* Wider screens: the reference behaviour. The mark is large at rest and
   deliberately overhangs the header band into the content area, then shrinks to
   fit the header once the page is scrolled and the header sticks. */
@media (min-width: 880px) {
  .brand img.logo {
    height: 152px;
    margin-bottom: -80px;
    transition: height .35s cubic-bezier(.2,.7,.2,1), margin-bottom .35s cubic-bezier(.2,.7,.2,1);
  }

  .site-header.is-scrolled .brand img.logo {
    height: 64px;
    margin-bottom: 0;
  }
}
.brand-text {
  display: none;
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.25;
  color: var(--nav-ink-soft);
  padding-left: 0.9rem;
  border-left: 1px solid var(--nav-rule);
  max-width: 16rem;
}
.brand-text strong { display: block; font-style: normal; color: var(--nav-ink); font-weight: 400; letter-spacing: 0.02em; }
@media (min-width: 1080px) { .brand-text { display: block; } }

.header-nav {
  display: none;
  gap: 1.8rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nav-ink-soft);
}
.header-nav a { transition: color .2s ease, border-color .2s ease; padding-bottom: 0.25rem; border-bottom: 1px solid transparent; }
.header-nav a:hover { color: var(--nav-ink); border-bottom-color: var(--nav-ink); }

/* The navigation is the only route to the tasks and the invitations, so it is
   never hidden outright. Below the breakpoint where it does not fit beside the
   logo, it moves to its own full-width row under it rather than disappearing. */
.header-nav {
  display: flex;
  order: 10;
  flex: 1 0 100%;
  justify-content: flex-start;
  gap: 1.4rem;
  padding-top: 0;
}
@media (min-width: 880px) {
  .header-nav {
    order: 0;
    flex: 0 1 auto;
    gap: 1.8rem;
  }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.header-cta {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--nav-ink);
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--nav-rule);
  border-radius: 999px;
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.header-cta:hover {
  border-color: var(--nav-ink);
  color: var(--nav-cta-hover-ink);
  background: var(--nav-ink);
}
.header-cta .arrow { display: inline-block; margin-left: 0.4em; transition: transform .25s ease; }
.header-cta:hover .arrow { transform: translateX(3px); }

/* ---------- active nav link ---------- */
/* ADR-010: the current page is marked, not just coloured, so it is perceivable
   without relying on colour alone. */
.header-nav a.is-active {
  color: var(--nav-ink);
  border-bottom-color: var(--nav-ink);
  font-weight: 500;
}

/* ---------- account button ---------- */
/* The account menu reuses the CTA pill, but as a button rather than a link.
   Its resting state needs AA contrast against the header band: the plain
   nav-ink text measured 3.00:1, so it gets a filled treatment instead. */
.account-menu .header-cta {
  background: var(--nav-ink);
  color: var(--nav-cta-hover-ink);
  border-color: var(--nav-ink);
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.85rem;
}

.account-menu .header-cta:hover {
  background: var(--nav-ink-soft);
  border-color: var(--nav-ink-soft);
  color: var(--nav-cta-hover-ink);
}

/* theme-toggle button: same chip style as the CTA but only an icon */
.theme-toggle {
  appearance: none;
  background: transparent;
  color: var(--nav-ink);
  border: 1px solid var(--nav-rule);
  border-radius: 999px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.theme-toggle:hover {
  border-color: var(--nav-ink);
  color: var(--nav-cta-hover-ink);
  background: var(--nav-ink);
}
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }


.site-footer { padding-block: 3.5rem 3rem; border-top: 1px solid var(--rule); background: var(--bg-elev); }
.footer-inner { display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 720px) { .footer-inner { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.footer-brand {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.24rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.footer-brand img.logo {
  /* Half the previous size, so the footer mark supports the text rather than
     dominating it. */
  height: 80px;
  width: auto;
  flex: none;
  filter: drop-shadow(0 8px 24px rgba(38, 40, 25, 0.18));
}
.footer-brand-text { display: flex; flex-direction: column; gap: 0.5rem; flex: 1 1 60%; }
.footer-brand em { font-style: italic; color: var(--moss-bright); }
.footer-brand small {
  display: block;
  font-family: var(--sans);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 0.1rem;
}
.footer-links {
  flex: 1 1 40%;
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  color: var(--ink-mute);
}
.footer-links a { transition: color .2s ease; }
.footer-links a:hover { color: var(--moss-bright); }
/* Logout is a button_to (real form) so it works without JS — make it look like
   the adjacent text links. */
.footer-links form.button_to { display: inline; margin: 0; }
.footer-links form.button_to button {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  transition: color .2s ease;
}
.footer-links form.button_to button:hover { color: var(--moss-bright); }
.footer-copy {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 2.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule-soft);
}