/* ============================================================
   ATRIUM — shared editorial layout
   Used by Contact, Join, Privacy and Terms. Same system as the
   About and Events pages: small type, open space, a short title
   on the left, content in a centred column, notes on the right.
   Each page picks its own texture with a body class.
   ============================================================ */
:root{
  --deep:#001c24;
  --deeper:#00141a;
  --mint:#9fd3af;
  --paper:#eaf3ec;
  --muted:rgba(234,243,236,.58);
  --rule:rgba(159,211,175,.22);
  --gut:clamp(20px,5vw,84px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --display:"owners-xwide","Helvetica Neue",Arial,sans-serif;
  --body:"owners-wide","Helvetica Neue",Arial,sans-serif;
  --small:clamp(11px,.86vw,13px);
}
*{box-sizing:border-box}
html{background:var(--deep);color:var(--paper);font-family:var(--body);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background-color:var(--deep);overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,textarea{font:inherit;color:inherit}
::selection{background:var(--mint);color:var(--deep)}

/* ---------- TEXTURE ----------
   ::before = a scan held inside the navy (luminosity),
   ::after  = a paper layer rebalanced around mid-grey (soft-light),
   so both add texture without shifting the colour. */
.ed-page::before,.ed-page::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none}
.ed-page::before{background:var(--tex-base) center/cover no-repeat;opacity:var(--tex-base-opacity,.1);mix-blend-mode:luminosity}
.ed-page::after{background:var(--tex-paper) center/cover no-repeat;opacity:var(--tex-paper-opacity,.5);mix-blend-mode:soft-light}
.ed-page--contact{--tex-base:url('img/texture-chalk.jpg');--tex-base-opacity:.14;--tex-paper:url('img/texture-paper-fiber.jpg');--tex-paper-opacity:.5}
.ed-page--join{--tex-base:url('img/texture-floral.jpg');--tex-base-opacity:.16;--tex-paper:url('img/texture-paper-blue.jpg');--tex-paper-opacity:.6}
.ed-page--legal{--tex-base:url('img/texture-grain.jpg');--tex-base-opacity:.1;--tex-paper:url('img/texture-paper-fiber.jpg');--tex-paper-opacity:.35}

.ed-page .site-header{position:fixed;top:0;left:0;right:0;background:linear-gradient(var(--deep),rgba(0,28,36,0))}
.ed-main{position:relative;z-index:1}

/* ---------- TYPE ---------- */
.heading{margin:0;color:var(--mint);font-family:var(--display);font-size:clamp(20px,1.9vw,28px);font-weight:700;line-height:1;text-transform:uppercase}
.tag{margin:0;color:var(--mint);font-size:var(--small);font-weight:700;letter-spacing:.06em;line-height:1.4;text-transform:uppercase}
.copy{margin:0;color:var(--paper);font-size:var(--small);line-height:1.6;letter-spacing:.02em;text-transform:uppercase}
.copy--muted{color:var(--muted)}
.copy + .copy{margin-top:1.2em}
.ed-link{color:var(--mint);border-bottom:1px solid var(--rule);padding-bottom:2px;transition:border-color .2s ease}
.ed-link:hover,.ed-link:focus-visible{border-color:var(--mint);outline:0}

/* ---------- LAYOUT: title left, content centre, notes right ---------- */
.ed{
  display:grid;grid-template-columns:1fr minmax(0,500px) 1fr;gap:clamp(24px,3vw,56px);
  align-items:start;min-height:calc(100svh - 120px);
  padding:clamp(150px,22vh,230px) var(--gut) clamp(110px,14vw,200px);
}
.ed__title{justify-self:end;text-align:right;position:sticky;top:120px}
.ed__title .tag{margin-top:10px;color:var(--muted);font-weight:400}
.ed__body{min-width:0}
.ed__notes{max-width:260px;position:sticky;top:120px}
.ed__notes > * + *{margin-top:22px}

/* ---------- FORM (contact) ---------- */
.form{display:grid;gap:26px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.field{display:grid;gap:8px}
.field span{color:var(--mint);font-size:var(--small);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.field input,.field textarea{
  width:100%;border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:8px 0 10px;
  background:transparent;color:var(--paper);font-size:14px;line-height:1.5;outline:none;
  transition:border-color .25s ease;
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--mint)}
.form-trap{position:absolute;overflow:hidden;clip:rect(0 0 0 0);width:1px;height:1px;margin:-1px;padding:0;border:0}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.btn{
  display:inline-flex;align-items:center;gap:12px;padding:12px 16px;border:0;cursor:pointer;
  background:var(--mint);color:var(--deep);font-size:var(--small);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  transition:background .3s ease,opacity .3s ease;
}
.btn span{transition:transform .3s var(--ease)}
.btn:hover,.btn:focus-visible{background:var(--paper);outline:0}
.btn:hover span,.btn:focus-visible span{transform:translateX(4px)}
.btn:disabled{opacity:.5;cursor:wait}
.form-status{margin:0;color:var(--muted);font-size:var(--small);letter-spacing:.02em;line-height:1.5;text-transform:uppercase}
.form-status.success{color:var(--mint)}
.form-status.error{color:#e6b77c}
.form-status a{text-decoration:underline}

/* ---------- SIGNUP (join): Flodesk draws the form inside this box ---------- */
.signup{min-height:260px}

/* ---------- FLODESK FORM: restyled to match the contact form ----------
   Flodesk injects its own styles; these overrides (scoped to .signup)
   strip its box and big headline and reuse the site's field + button. */
.signup [class*="__container"],.signup [class*="__wrapper"],.signup form{background:transparent!important;box-shadow:none!important}
.signup form{padding:0!important;text-align:left!important;max-width:none!important}
.signup [data-ff-el="root"],.signup [class*="__container"],.signup [class*="__wrapper"]{margin:0!important;padding:0!important;max-width:none!important;width:100%!important}
.signup [class*="__title"],.signup [class*="__subtitle"]{display:none!important}
.signup [class*="__fields"]{text-align:left!important}
.signup [class*="__field"]{margin:0!important}
.signup .fd-form-group{margin:0 0 26px!important}
.signup input[class*="__control"]{
  background:transparent!important;border:0!important;border-bottom:1px solid var(--rule)!important;border-radius:0!important;
  padding:26px 0 10px!important;height:auto!important;color:var(--paper)!important;
  font-family:var(--body)!important;font-size:14px!important;line-height:1.5!important;box-shadow:none!important;
}
.signup input[class*="__control"]:focus{border-bottom-color:var(--mint)!important;outline:0!important}
.signup label[class*="__label"]{
  padding:0!important;border:0!important;top:0!important;left:0!important;transform:none!important;
  color:var(--mint)!important;font-family:var(--body)!important;font-size:var(--small)!important;font-weight:700!important;
  letter-spacing:.06em!important;text-transform:uppercase!important;
}
.signup label[class*="__label"] span{font:inherit!important;color:inherit!important;letter-spacing:inherit!important;text-transform:inherit!important}
.signup [class*="__footer"]{text-align:left!important;margin:0!important}
.signup button[class*="__button"]{
  display:inline-flex!important;width:auto!important;min-width:0!important;margin:0!important;padding:12px 16px!important;
  border:0!important;border-radius:0!important;background:var(--mint)!important;color:var(--deep)!important;
  font-family:var(--body)!important;font-size:var(--small)!important;font-weight:700!important;letter-spacing:.06em!important;
  text-transform:uppercase!important;line-height:1.2!important;transition:background .3s ease!important;
}
.signup button[class*="__button"] *{font:inherit!important;color:inherit!important;letter-spacing:inherit!important}
.signup button[class*="__button"]:hover,.signup button[class*="__button"]:focus-visible{background:var(--paper)!important}
.signup [class*="__privacy-policy"]{margin-top:16px!important;text-align:left!important}
.signup [class*="__privacy-policy"],.signup [class*="__privacy-policy"] a{color:var(--muted)!important;font-family:var(--body)!important;font-size:var(--small)!important;letter-spacing:.02em!important;text-transform:uppercase!important}
.signup [class*="__success"],.signup [class*="__error"]{text-align:left!important;color:var(--mint)!important;font-family:var(--body)!important;font-size:var(--small)!important;letter-spacing:.04em!important;text-transform:uppercase!important}
.signup [class*="__success"] *,.signup [class*="__error"] *{font:inherit!important;color:inherit!important;text-align:left!important}
/* Thank-you message after signup: big, in the display face like the page title. */
.signup [class*="__success"] [class*="__success-message"]{font-family:var(--display)!important;font-weight:700!important;font-size:clamp(30px,3.6vw,56px)!important;line-height:1!important;letter-spacing:0!important;text-transform:uppercase!important;color:var(--mint)!important}

/* ---------- LEGAL ---------- */
.legal section + section{margin-top:clamp(28px,3vw,40px)}
.legal h2{margin:0 0 10px;color:var(--mint);font-size:var(--small);font-weight:700;letter-spacing:.06em;line-height:1.4;text-transform:uppercase}
.legal p,.legal li{margin:0;color:var(--paper);font-size:14px;line-height:1.75}
.legal p + p{margin-top:12px}
.legal .lede{color:var(--paper);font-size:15px}
.legal ul{margin:10px 0 0;padding-left:20px}
.legal a{color:var(--mint)}

/* ---------- LARGER PAGES (Contact, Join) ----------
   These pages carry more weight than the legal pages: a proper intro,
   bigger fields, and real content around the form. */
.lg-intro{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,120px);align-items:end;
  padding:clamp(160px,24vh,250px) var(--gut) clamp(60px,8vw,110px);
}
.lg-title{margin:0;color:var(--mint);font-family:var(--display);font-size:clamp(30px,3.6vw,56px);font-weight:700;line-height:1;text-transform:uppercase}
.lg-lede{margin:0;max-width:34ch;color:var(--paper);font-size:clamp(16px,1.35vw,20px);line-height:1.5}
.lg-lede + .lg-lede{margin-top:14px;color:var(--muted);font-size:clamp(14px,1.05vw,16px)}
/* Join: the signup form sits centred on the title + lede block, spanning
   only that height (no reserved space pushing it above the title). */
@media(min-width:901px){
  .ed-page--join .lg-intro{align-items:center}
  .ed-page--join .signup{min-height:0}
}

.lg-split{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,8vw,140px);align-items:start;
  margin:0 var(--gut);padding:clamp(48px,5vw,80px) 0 clamp(110px,14vw,200px);border-top:1px solid var(--rule);
}
.lg-aside{display:grid;gap:clamp(36px,4vw,56px);position:sticky;top:120px}
.lg-aside .tag{margin-bottom:16px}

.topics{display:flex;flex-wrap:wrap;gap:10px}
.topic{
  padding:10px 14px;border:1px solid var(--rule);background:transparent;color:var(--paper);cursor:pointer;
  font-size:var(--small);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.topic:hover,.topic:focus-visible{border-color:var(--mint);outline:0}
.topic[aria-pressed="true"]{background:var(--mint);border-color:var(--mint);color:var(--deep)}

.direct{margin:0;display:grid;gap:14px}
.direct div{display:grid;grid-template-columns:90px 1fr;gap:16px;align-items:baseline}
.direct dt{color:var(--muted);font-size:var(--small);letter-spacing:.06em;text-transform:uppercase}
.direct dd{margin:0;color:var(--paper);font-size:clamp(15px,1.2vw,18px)}
.direct a{border-bottom:1px solid var(--rule);transition:border-color .2s ease,color .2s ease}
.direct a:hover,.direct a:focus-visible{border-color:var(--mint);color:var(--mint);outline:0}

/* Bigger form fields on these pages. */
.lg-page .form{gap:34px}
.lg-page .form__row{gap:34px}
.lg-page .field span{font-size:12px}
.lg-page .field input,.lg-page .field textarea{padding:12px 0 14px;font-size:clamp(16px,1.3vw,19px)}
.lg-page .field textarea{min-height:200px}
.lg-page .btn,.lg-page .signup button[class*="__button"]{padding:16px 22px!important;font-size:13px!important}
.lg-page .signup input[class*="__control"]{padding:30px 0 14px!important;font-size:clamp(16px,1.3vw,19px)!important}
.lg-page .signup label[class*="__label"]{font-size:12px!important}

/* Join: three things subscribers get. */
.perks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px);margin:0 var(--gut);padding:clamp(40px,4vw,64px) 0 clamp(80px,9vw,140px);border-top:1px solid var(--rule)}
.perk h2{margin:0 0 12px;color:var(--mint);font-family:var(--display);font-size:clamp(15px,1.3vw,19px);font-weight:700;line-height:1.15;text-transform:uppercase}
.perk p{margin:0;max-width:32ch;color:var(--muted);font-size:clamp(14px,1.05vw,16px);line-height:1.55}

/* Join: drifting strip of photos (same as the About page). */
.strip{overflow:hidden;cursor:grab;touch-action:pan-y;padding-bottom:clamp(110px,14vw,200px)}
.strip.is-dragging{cursor:grabbing}
.strip__track{display:flex;gap:16px;width:max-content;will-change:transform}
.strip__item{flex:0 0 auto;width:clamp(240px,30.8vw,460px);aspect-ratio:4/3;overflow:hidden;background:var(--deeper)}
.strip__item img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.04);pointer-events:none;user-select:none;-webkit-user-drag:none}

/* Footer: styled in footer.css (shared by every page). */

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  .ed{grid-template-columns:1fr;gap:28px;padding-top:130px;min-height:0}
  .ed__title,.ed__notes{position:static;justify-self:start;text-align:left}
  .ed__notes{max-width:500px}
  .ed__body{max-width:560px}
  .ed__body{order:1}
}
@media(max-width:900px){
  .lg-intro{grid-template-columns:1fr;gap:28px;padding-top:130px}
  .lg-split{grid-template-columns:1fr;gap:48px}
  .lg-aside{position:static}
  .perks{grid-template-columns:1fr;gap:32px}
}
@media(max-width:620px){
  :root{--small:12px}
  .form__row{grid-template-columns:1fr}
  .btn,.signup button[class*="__button"]{width:100%!important;justify-content:space-between}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}