/* The Exit Society — Circle pages.
   Deliberately reuses the tokens and typography of the main site. No separate
   visual identity. Shared by circle.html and the function-rendered private page. */

:root{
  --cream:#F4EFE6;
  --cream-2:#EEE8DE;
  --ink:#171512;
  --bronze:#A9824C;
  --bronze-soft:rgba(169,130,76,0.35);
  --stone:#B7AA98;
  --serif:'Cormorant Garamond', 'Times New Roman', serif;
  --sans:'Jost', 'Helvetica Neue', Arial, sans-serif;
  --edge: clamp(24px, 6vw, 80px);
  color-scheme: light;
}

*{box-sizing:border-box;}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-weight:300;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; display:block;}
a{color:inherit;}
::selection{background:var(--bronze-soft); color:var(--ink);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

/* ---------- Header / footer ---------- */
.circle-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--edge);
  border-bottom:1px solid var(--bronze-soft);
}
.circle-header img{height:33px; width:auto;}
.back{
  font-size:11.5px; letter-spacing:0.2em; text-transform:uppercase; font-weight:500;
  text-decoration:none; color:var(--ink); padding-bottom:3px;
  border-bottom:1px solid transparent; transition:border-color .4s ease, color .4s ease;
}
.back:hover{color:var(--bronze); border-bottom-color:var(--bronze);}

.circle-footer{
  padding:34px var(--edge) 44px; border-top:1px solid var(--bronze-soft);
  display:flex; flex-wrap:wrap; gap:14px 24px; justify-content:space-between;
  font-size:12px; color:var(--stone); letter-spacing:0.06em;
}
.circle-footer a{color:var(--stone); text-decoration:none;}
.circle-footer a:hover{color:var(--bronze);}

/* ---------- Shared type ---------- */
.eyebrow{
  font-family:var(--sans); font-size:12px; letter-spacing:0.32em; text-transform:uppercase;
  color:var(--bronze); font-weight:500; margin:0 0 22px 0;
}
h1,h2{font-family:var(--serif); font-weight:400; margin:0; text-wrap:balance;}
h1{font-size:clamp(28px,3.8vw,44px); line-height:1.2; margin-bottom:34px;}
h2{font-size:clamp(22px,2.6vw,30px); line-height:1.35; margin-bottom:30px;}

.body-copy{
  font-family:var(--sans); font-weight:300;
  font-size:clamp(15.5px,1.5vw,17px); line-height:1.85; color:#3c382f; max-width:62ch;
}
.body-copy p{margin:0 0 20px 0;}
.body-copy p:last-child{margin-bottom:0;}

.hairline{height:1px; background:var(--bronze-soft); margin:clamp(60px,8vw,96px) 0;}

.btn{
  display:inline-block; font-family:var(--sans); font-size:12px; font-weight:500;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--ink);
  background:none; border:1px solid var(--ink); padding:17px 40px; cursor:pointer;
  text-decoration:none; transition:background .45s ease, color .45s ease;
}
.btn:hover{background:var(--ink); color:var(--cream);}
.btn:disabled{opacity:.5; cursor:default;}

/* honeypot: reachable by bots, invisible to people */
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

/* ---------- Access screen ---------- */
.access-main{
  min-height:calc(100vh - 210px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:clamp(70px,12vh,130px) var(--edge);
}
.access-main .eyebrow{margin-bottom:26px;}
.access-main h1{max-width:26ch; margin-bottom:26px;}
.access-lead{
  font-family:var(--sans); font-weight:300; font-size:clamp(15px,1.5vw,16.5px);
  line-height:1.8; color:#4a4638; max-width:46ch; margin:0 0 10px 0;
}
.access-note{
  font-size:12px; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--bronze); font-weight:500; margin:26px 0 44px 0;
}
.access-form{display:flex; flex-direction:column; align-items:center; gap:22px; width:100%;}
.access-form input[type=text]{
  font-family:var(--sans); font-weight:300; font-size:16px; letter-spacing:0.22em;
  text-align:center; text-transform:uppercase;
  width:min(320px, 100%); padding:14px 10px;
  background:none; border:none; border-bottom:1px solid var(--bronze-soft);
  color:var(--ink); outline:none; transition:border-color .4s ease;
}
.access-form input[type=text]::placeholder{letter-spacing:0.18em; text-transform:none; color:var(--stone);}
.access-form input[type=text]:focus{border-bottom-color:var(--bronze);}
.access-error{
  font-size:13.5px; line-height:1.7; color:#8a3d2e; max-width:44ch; margin:0;
}

/* ---------- Private page ---------- */
.circle-main{
  max-width:820px; margin:0 auto;
  padding:clamp(60px,9vh,100px) var(--edge) clamp(80px,12vh,130px);
}

/* ---------- Form ---------- */
form{
  display:grid; grid-template-columns:1fr 1fr; gap:34px clamp(26px,3.4vw,48px);
  margin-top:52px;
}
.field{display:flex; flex-direction:column;}
.field.full{grid-column:1 / -1;}
.field label{
  font-family:var(--sans); font-size:11.5px; letter-spacing:0.18em; text-transform:uppercase;
  font-weight:500; color:var(--ink); margin-bottom:10px;
}
.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field input[type=date],
.field textarea{
  font-family:var(--sans); font-weight:300; font-size:15.5px; color:var(--ink);
  background:none; border:none; border-bottom:1px solid var(--bronze-soft);
  padding:10px 2px; outline:none; transition:border-color .4s ease;
}
.field input:focus, .field textarea:focus{border-bottom-color:var(--bronze);}
.field input::placeholder, .field textarea::placeholder{color:var(--stone);}
.field textarea{resize:vertical; line-height:1.8; min-height:120px;}
.field input[type=file]{
  font-family:var(--sans); font-weight:300; font-size:14px; color:#4a4638;
  padding:10px 0; border:none;
}
.field input[type=file]::file-selector-button{
  font-family:var(--sans); font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink); background:none; border:1px solid var(--bronze-soft);
  padding:10px 20px; margin-right:16px; cursor:pointer; transition:border-color .4s ease;
}
.field input[type=file]::file-selector-button:hover{border-color:var(--bronze);}

.help{font-size:12.5px; line-height:1.7; color:#6b6558; margin:9px 0 0 0;}
.error-inline{color:#8a3d2e;}

fieldset.choice{border:none; padding:0; margin:0;}
fieldset.choice legend{
  font-family:var(--sans); font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase;
  font-weight:500; color:var(--ink); margin-bottom:16px; padding:0; max-width:60ch; line-height:1.7;
}
.radio-row{display:flex; flex-wrap:wrap; gap:14px 34px;}
.radio-row label{
  display:flex; align-items:center; gap:9px; margin:0;
  font-size:14.5px; letter-spacing:0; text-transform:none; font-weight:300; color:#3c382f;
}
.radio-row input[type=radio]{accent-color:var(--bronze); width:15px; height:15px;}

.field.check label{
  display:flex; align-items:flex-start; gap:12px; margin:0;
  font-size:14px; letter-spacing:0; text-transform:none; font-weight:300;
  color:#3c382f; line-height:1.75;
}
.field.check input[type=checkbox]{accent-color:var(--bronze); width:16px; height:16px; margin-top:2px; flex:0 0 auto;}
.field.check label > span{flex:1 1 auto;}
.field.check a{color:var(--bronze); text-decoration:underline; text-underline-offset:3px;}

.form-submit-row{
  grid-column:1 / -1; display:flex; flex-direction:column; gap:22px; align-items:flex-start;
  margin-top:14px; padding-top:30px; border-top:1px solid var(--bronze-soft);
}
.consent-text{font-size:12.5px; line-height:1.75; color:#6b6558; max-width:58ch; margin:0;}
.form-error{
  font-family:var(--sans); font-weight:300; font-size:14px; line-height:1.75; color:#8a3d2e;
  max-width:52ch; margin:0;
}

.thank-you{padding:10px 0 0 0;}
.thank-you h2{margin-bottom:22px;}

@media (max-width:720px){
  form{grid-template-columns:1fr;}
  .circle-footer{flex-direction:column; align-items:flex-start;}
}
@media (max-width:560px){
  .circle-header img{height:27px;}
}