/* ---------------------------------------------------------------------------
   shared shell: the nav, the platform dropdown, the footer, and the type for
   the plain content pages. the landing page loads this on top of its own
   inline styles (which own the particle narrative), so everything here is
   namespaced away from .hero-* / .panel-* to keep the two from colliding.
   --------------------------------------------------------------------------- */

:root {
  --ink:    #3d2817;   /* headings, wordmark */
  --muted:  #5e4430;   /* body copy */
  --line:   rgba(61, 40, 23, 0.22);
  --paper:  #fffdf8;   /* the warm card fill used across the site */
  --tab:    #9e948b;   /* opaque equivalent of the frame's translucent brown */
  --tab-on: #645345;
  --sans: "DM Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
}

/* ---- nav ---------------------------------------------------------------- */
/* the row itself only lays out its children; where the row *sits* is the
   page's business, because the landing page hangs it inside the frame and the
   content pages run it across the top of the document */
.nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  font-family: var(--sans);
}
.nav-logo {
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
}
.nav-links { display: flex; align-items: center; gap: 1.4rem; }

/* a nav entry that owns a dropdown. the panel is a child so the pointer never
   crosses dead space on its way down, which is what makes hover menus feel
   broken; :focus-within opens the same panel from the keyboard. */
.nav-item { position: relative; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0;
  font-size: 17px;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  opacity: 0.72;
  transition: opacity 0.15s ease;
  cursor: pointer;
}
.nav-link:hover,
.nav-link:focus-visible,
.nav-item[data-open] > .nav-link { opacity: 1; }
.nav-caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.7;
  transition: transform 0.18s ease;
}
.nav-item:hover .nav-caret,
.nav-item:focus-within .nav-caret,
.nav-item[data-open] .nav-caret { transform: rotate(-180deg); }

.nav-drop {
  position: absolute;
  top: 100%;
  left: -0.9rem;
  z-index: 30;
  width: 320px;
  padding: 0.5rem;
  /* the 10px bridge keeps the panel under the pointer while it travels from
     the label to the first item */
  margin-top: 10px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 14px 34px rgba(61, 40, 23, 0.13);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.nav-drop::before {           /* the bridge itself, invisible */
  content: "";
  position: absolute;
  left: 0; right: 0; top: -10px;
  height: 10px;
}
.nav-item:hover > .nav-drop,
.nav-item:focus-within > .nav-drop,
.nav-item[data-open] > .nav-drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-drop a {
  display: block;
  padding: 0.6rem 0.7rem;
  border-radius: 9px;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.15s ease;
}
.nav-drop a:hover, .nav-drop a:focus-visible { background: rgba(61, 40, 23, 0.06); }
.nav-drop strong {
  display: block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}
.nav-drop span {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
  line-height: 1.45;
  color: var(--muted);
}

/* right-hand cluster, shared with the landing page's hero tab */
.nav-actions { display: flex; align-items: center; gap: 1rem; }
.nav-login {
  font-size: 17px;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  opacity: 0.72;
  transition: opacity 0.15s ease;
}
.nav-login:hover { opacity: 1; }
.nav-cta {
  padding: 0.7rem 1.2rem 0.6rem;
  border-radius: 10px;
  background: var(--tab);
  color: #fdf6ec;
  font-size: 17px;
  line-height: 1;
  text-decoration: none;
  transition: background 0.15s ease;
}
.nav-cta:hover { background: var(--tab-on); }

/* below the fold of a phone the dropdown has nowhere to hang, so the platform
   entry becomes a plain list under its label and the row wraps */
@media (max-width: 700px) {
  /* a wordmark, a dropdown entry, a log-in and a tab want more width than a
     phone has, so they collapse into the button below. these rules still
     matter: without the script the originals stay put, and this is the layout
     they fall back to. */
  .nav { flex-wrap: wrap; gap: 0.75rem 0.9rem; }
  .page-nav .nav-logo { font-size: 20px; }
  .page-nav .nav-actions { order: 2; }
  .page-nav .nav-links { order: 3; width: 100%; }
  .nav-links, .nav-actions { gap: 0.85rem; }
  .nav-login, .nav-cta, .nav-link { font-size: 15px; }
  .nav-cta { padding: 0.55rem 0.85rem 0.45rem; }
  /* an anchored panel has nowhere to hang on a phone: at these widths it would
     start past the middle of the screen and run off the right edge. it drops
     into flow under its label instead, capped to the viewport. */
  .nav-drop {
    position: static;
    width: min(320px, calc(100vw - 5rem));
    margin-top: 0.4rem;
    box-shadow: none;
  }
  .nav-item:not([data-open]) > .nav-drop { display: none; }
  .nav-drop span { display: none; }   /* labels only, the blurbs are on the pages */
}

/* ---- footer ------------------------------------------------------------- */
/* opaque, and above the landing page's fixed canvas (z-index 2), so it covers
   the animation rather than letting particles show through the columns */
.site-footer {
  position: relative;
  z-index: 3;
  background: #fff;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  color: var(--muted);
}
.site-footer-in {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem 4rem;
  max-width: 1080px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 2.5rem;
}
.footer-brand { flex: 1 1 240px; }
.footer-brand .nav-logo { display: inline-block; margin-bottom: 0.6rem; }
.footer-tag {
  max-width: 30ch;
  font-family: var(--serif);
  font-size: 17px;
  font-style: italic;
  line-height: 1.5;
}
.footer-col .footer-h {
  margin-bottom: 0.7rem;
  font-family: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.6;
}
.footer-col ul { list-style: none; }
.footer-col li + li { margin-top: 0.35rem; }
.footer-col a {
  font-size: 16px;
  color: var(--ink);
  text-decoration: none;
  opacity: 0.78;
  transition: opacity 0.15s ease;
}
.footer-col a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.site-footer-base {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.5rem 2.5rem;
  font-size: 14px;
  opacity: 0.7;
}

/* ---- content pages ------------------------------------------------------ */
/* the landing page never uses these; they style the plain pages behind the
   platform tab, which carry no canvas and no scroll narrative */
.page {
  font-family: var(--sans);
  color: var(--muted);
  background: #fff;
}
.page-nav {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.4rem 1.5rem;
}
.page-main { max-width: 760px; margin: 0 auto; padding: 3rem 1.5rem 5rem; }
.page-wide { max-width: 1080px; }
.crumbs {
  margin-bottom: 1.6rem;
  font-size: 14px;
  opacity: 0.7;
}
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* the title and its lede sit inside the same rounded outline the landing page
   draws around its hero, so the content pages carry the frame motif too. the
   breadcrumb stays outside it: it is a pointer to the page, not part of it. */
.page-head {
  margin-bottom: 2.8rem;
  padding: 2rem 2.2rem 2.1rem;
  border: 2px solid rgba(61, 40, 23, 0.5);   /* same translucent brown as the hero frame */
  border-radius: 16px;
}
.page-head h1 { margin-bottom: 0.9rem; }
.page-head .page-lede { margin-bottom: 0; }
@media (max-width: 700px) {
  .page-head { padding: 1.4rem 1.3rem 1.5rem; margin-bottom: 2rem; border-radius: 14px; }
}

.page h1 {
  margin-bottom: 1.1rem;
  font-family: var(--serif);
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 300;
  line-height: 1.12;
  color: var(--ink);
  text-wrap: balance;
}
.page h1 em { font-style: italic; font-weight: 500; }
.page-lede {
  max-width: 34em;
  margin-bottom: 2.8rem;
  font-family: var(--serif);
  font-size: clamp(19px, 2.2vw, 23px);
  font-style: italic;
  line-height: 1.5;
}
.page h2 {
  margin: 2.6rem 0 0.7rem;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}
.page h3 {
  margin: 1.8rem 0 0.4rem;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
}
.page p { margin-bottom: 1rem; line-height: 1.65; }
.page ul.marks { margin: 0 0 1rem 1.1rem; }
.page ul.marks li { margin-bottom: 0.45rem; line-height: 1.6; }
.page a { color: var(--ink); text-underline-offset: 3px; }

/* the three-up on the platform overview, and anywhere else a page needs cards */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin: 2rem 0 1rem;
  list-style: none;
}
.cards li { margin: 0; }
.cards a {
  display: block;
  height: 100%;
  padding: 1.2rem 1.3rem 1.3rem;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.cards a:hover { border-color: rgba(61, 40, 23, 0.55); transform: translateY(-2px); }
.cards strong {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
}
.cards span { display: block; font-size: 16px; line-height: 1.55; color: var(--muted); }

.page-cta {
  margin-top: 3rem;
  padding: 1.6rem 1.5rem;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
}
.page-cta p { margin-bottom: 1rem; }
.page-cta .nav-cta { display: inline-block; }

/* ---- contact form ------------------------------------------------------- */
/* same outline-on-warm-paper as .cards and .page-cta, so the form reads as
   part of the site rather than a browser default dropped into it */
.form { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 2.2rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } }

.field { display: block; }
.field-l {
  display: block;
  margin-bottom: 0.45rem;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.field-opt { font-weight: 400; font-size: 14px; color: var(--muted); opacity: 0.75; }
.field-i {
  display: block;
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  font-family: var(--sans);
  font-size: 16px;          /* 16px or iOS zooms the page on focus */
  line-height: 1.5;
  color: var(--ink);
  resize: vertical;
}
.field-i:focus-visible {
  outline: none;
  border-color: rgba(61, 40, 23, 0.65);
  box-shadow: 0 0 0 3px rgba(158, 148, 139, 0.22);
}
/* the honeypot: off-screen rather than display:none, which some bots skip */
.field-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.btn-send {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1;
  padding: 0.85rem 1.6rem;
  border: none;
  border-radius: 10px 10px 10px 4px;   /* the tab's asymmetry, mirrored */
  background: var(--tab);
  color: #fdf6ec;
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn-send:hover { background: var(--tab-on); }
.btn-send:disabled { opacity: 0.55; cursor: default; }

.form-note { font-family: var(--sans); font-size: 15px; color: var(--muted); margin: 0; }
.form-note--bad { color: #a31621; }
.form-alt { margin-top: 1.6rem; font-size: 15px; color: var(--muted); }

/* ---- mobile navigation drawer ------------------------------------------- */
/* built by scripts/nav.js, which sets data-navmenu on <html> once it has run.
   every rule that hides something is gated on that flag, so a browser without
   the script keeps the nav it already had rather than losing it to a button
   that will never appear. */
.navmenu-btn { display: none; }

/* above the breakpoint the row carries everything itself, so neither the
   drawer nor its scrim may render whatever state they were left in. this is
   the authority rather than the script's listener: a window can grow while the
   drawer is open, and a listener that misses that would strand it on screen. */
@media (min-width: 701px) {
  .navdrawer, .navdrawer-scrim { display: none; }
}

@media (max-width: 700px) {
  [data-navmenu] .navmenu-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 46px;
    height: 46px;
    padding: 0 8px;
    border: none;
    background: none;
    cursor: pointer;
  }
  [data-navmenu] .navmenu-btn span {
    display: block;
    height: 2px;
    border-radius: 1px;
    background: var(--ink);
  }
  /* the auto margin lived on .nav-actions, which is hidden now, so the button
     inherits the job of pushing itself to the end of the row. the landing page
     needs none of this: its button joins a cluster already pinned to the
     frame's top-right corner. */
  [data-navmenu] .page-nav .navmenu-btn { margin-left: auto; }

  /* what the button replaces */
  [data-navmenu] .page-nav .nav-links,
  [data-navmenu] .page-nav .nav-actions,
  [data-navmenu] .hero-brand .nav-links,
  [data-navmenu] .hero-login,
  [data-navmenu] .cta-tab { display: none; }

  .navdrawer-scrim {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(61, 40, 23, 0.34);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
  }
  [data-navmenu-open] .navdrawer-scrim { opacity: 1; pointer-events: auto; }

  .navdrawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    width: min(320px, 84vw);
    padding: 1rem 1.1rem 2rem;
    background: var(--paper);
    border-left: 1.5px solid var(--line);
    box-shadow: -18px 0 44px rgba(61, 40, 23, 0.18);
    font-family: var(--sans);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* slid off rather than display:none, or there is nothing to animate;
       visibility keeps it out of the tab order while it is off screen */
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.26s;
  }
  [data-navmenu-open] .navdrawer { visibility: visible; transform: translateX(0); }
  /* the page behind must not scroll under the drawer */
  [data-navmenu-open] body { overflow: hidden; }

  .navdrawer-close {
    position: relative;
    align-self: flex-end;
    width: 42px;
    height: 42px;
    margin-bottom: 0.5rem;
    border: none;
    background: none;
    cursor: pointer;
  }
  .navdrawer-close span {
    position: absolute;
    top: 50%;
    left: 9px;
    width: 24px;
    height: 2px;
    border-radius: 1px;
    background: var(--ink);
  }
  .navdrawer-close span:nth-child(1) { transform: rotate(45deg); }
  .navdrawer-close span:nth-child(2) { transform: rotate(-45deg); }

  .navdrawer a {
    padding: 0.72rem 0.7rem;
    border-radius: 9px;
    font-size: 17px;
    line-height: 1.3;
    color: var(--ink);
    text-decoration: none;
  }
  .navdrawer a:hover, .navdrawer a:focus-visible { background: rgba(61, 40, 23, 0.06); }
  .navdrawer-lead { font-weight: 500; }
  .navdrawer-sub {
    padding-left: 1.5rem !important;   /* reads as a child of Platform */
    font-size: 15.5px !important;
    color: var(--muted) !important;
  }
  /* grouped under the platform links rather than pinned to the foot: with six
     items a bottom pin left a screen-height hole down the middle of the
     drawer, which reads as a mistake rather than as a footer */
  .navdrawer-item { margin-top: 0.7rem; border-top: 1px solid var(--line); padding-top: 1.1rem !important; }
  .navdrawer-cta {
    margin-top: 0.5rem;
    background: var(--tab);
    color: #fdf6ec !important;
    text-align: center;
    border-radius: 10px 10px 10px 4px;
  }
  .navdrawer-cta:hover, .navdrawer-cta:focus-visible { background: var(--tab-on) !important; }
}