:root{
  --dark:#1a1410;
  --cream:#f7f3ee;
  --gold:#c8a96e;
  --muted:#b9afa2;
  --line:rgba(200,169,110,.22);
  font-family:'DM Sans',sans-serif;
  color:var(--cream);
  background:var(--dark);
  font-synthesis:none}
*{
  box-sizing:border-box}
body{
  margin:0}
a{
  color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:6px}
::selection{
  background:var(--gold);
  color:var(--dark)}
.skip{
  position:absolute;
  top:-100px;
  left:24px;
  z-index:10}
.skip:focus{
  top:24px;
  background:var(--dark);
  padding:12px}
.shell{
  width:min(1120px,calc(100% - 112px));
  margin:auto}
.wordmark{
  font-family:'Cormorant Garamond',serif;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--gold);
  text-decoration:none}
.wordmark span{
  color:var(--cream)}
.entrance{
  min-height:100svh;
  display:grid;
  grid-template-rows:1fr auto;
  padding:40px 0 52px}
.identity{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:65px 24px 0}
.identity h1{
  font-size:40px;
  margin:0 0 24px}
.identity p{
  font-size:15px;
  font-weight:300;
  line-height:1.8;
  color:var(--muted);
  margin:0}
.annotation{
  justify-self:end;
  margin:0 0 0 auto;
  width:240px;
  font-size:13px;
  line-height:1.9;
  color:var(--gold);
  font-weight:300}
.annotation::before{
  content:'';
  display:block;
  width:32px;
  height:1px;
  background:var(--line);
  margin-bottom:18px}
.chapter{
  border-top:1px solid var(--line);
  padding:125px 0 140px}
.eyebrow{
  font-size:10px;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--gold);
  line-height:1.8;
  margin:0 0 38px;
  font-weight:500}
h2,h1.display{
  font-family:'Cormorant Garamond',serif;
  font-weight:400;
  letter-spacing:-.025em;
  line-height:1.08;
  text-wrap:balance;
  margin:0}
h2{
  font-size:clamp(36px,4.6vw,62px)}
.prose{
  font-size:16px;
  font-weight:300;
  line-height:1.95;
  color:var(--muted);
  max-width:540px;
  text-wrap:pretty}
.prose p{
  margin:0 0 24px}
.prose p:last-child{
  margin-bottom:0}
.philosophy{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:start}
.philosophy .eyebrow{
  grid-column:1/-1;
  margin-bottom:-30px}
.industrial-entry h2{
  max-width:800px}
.industrial-entry .detail{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  margin-top:45px}
.detail .prose{
  grid-column:2}
.text-link{
  display:inline-flex;
  gap:24px;
  align-items:center;
  text-decoration:none;
  font-size:12px;
  letter-spacing:.035em;
  min-height:44px;
  border-bottom:1px solid var(--gold);
  padding:9px 0;
  color:var(--cream);
  margin-top:25px;
  transition:color .2s,gap .2s}
.text-link:hover{
  color:var(--gold);
  gap:32px}
.text-link span{
  color:var(--gold)}
.existing{
  max-width:700px;
  margin-left:auto}
.existing .prose{
  margin-top:36px}
.closing{
  padding-bottom:100px}
.closing h2{
  max-width:680px}
.closing .prose{
  margin-top:28px}
.invited{
  margin-top:55px;
  font-size:12px;
  line-height:1.8;
  color:var(--muted)}
footer{
  border-top:1px solid var(--line);
  padding:30px 0}
.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px}
footer .wordmark{
  font-size:19px}
footer nav{
  display:flex;
  flex-wrap:wrap;
  gap:12px 28px}
footer nav a{
  font-size:11px;
  line-height:2;
  text-decoration:none;
  color:var(--muted);
  padding:8px 0}
footer a:hover{
  color:var(--gold)}
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding-top:30px}
.topbar .wordmark{
  font-size:24px}
.topbar a.back{
  font-size:11px;
  text-decoration:none;
  color:var(--muted);
  padding:12px 0}
.industrial-hero{
  padding:120px 0 110px}
.display{
  font-size:clamp(44px,6vw,80px);
  max-width:900px}
.industrial-hero .prose{
  margin:40px 0 0 auto;
  max-width:560px}
.editorial{
  padding:85px 0;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px}
.editorial h2{
  font-size:clamp(32px,3.4vw,46px)}
.editorial .eyebrow{
  grid-column:1/-1;
  margin-bottom:-68px}
.editorial.lead{
  display:block;
  padding:90px 0}
.editorial.lead h2{
  max-width:800px}
.contact{
  max-width:700px;
  margin:100px auto}
.contact .prose{
  margin-top:32px}
form{
  margin-top:50px}
label{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin:28px 0 10px}
input,textarea{
  width:100%;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:transparent;
  color:var(--cream);
  font:inherit;
  padding:12px 0;
  font-size:16px}
textarea{
  min-height:130px;
  resize:vertical}
button{
  background:none;
  color:var(--cream);
  border:0;
  border-bottom:1px solid var(--gold);
  font:inherit;
  font-size:13px;
  padding:14px 0;
  cursor:pointer;
  min-height:44px}
button:hover{
  color:var(--gold)}
.form-note{
  font-size:12px;
  line-height:1.8;
  color:var(--muted);
  margin:25px 0}
.form-status{
  line-height:1.8;
  color:var(--gold)}
.hidden{
  display:none}
.compact{
  max-width:680px;
  margin:100px auto;
  min-height:55vh}
.compact h2{
  font-size:32px;
  margin-top:45px}
.compact .prose{
  max-width:680px;
  margin-top:25px}
@media(min-width:900px){
  .entrance .identity{
  transform:translateY(20px)}
}
@media(max-width:760px){
  .shell{
  width:calc(100% - 48px)}
.entrance{
  padding-top:24px;
  padding-bottom:36px;
  min-height:100svh}
.identity{
  padding-top:0}
.identity h1{
  font-size:36px}
.identity p{
  font-size:13px}
.annotation{
  width:195px;
  font-size:12px}
.chapter{
  padding:78px 0 86px}
.philosophy,.industrial-entry .detail,.editorial{
  grid-template-columns:1fr;
  gap:28px}
.philosophy .eyebrow,.editorial .eyebrow{
  grid-column:auto;
  margin-bottom:0}
.detail .prose{
  grid-column:auto}
.industrial-entry .detail{
  margin-top:30px}
.prose{
  font-size:15px;
  line-height:1.9}
.eyebrow{
  margin-bottom:25px}
.footer-inner{
  align-items:flex-start;
  flex-direction:column}
.industrial-hero{
  padding:85px 0 70px}
.industrial-hero .prose{
  margin-top:35px}
.editorial{
  padding:60px 0}
.editorial.lead{
  padding:65px 0}
.contact,.compact{
  margin:65px auto}
.existing .prose{
  margin-top:28px}
}
@media(prefers-reduced-motion:reduce){
  *{
  scroll-behavior:auto!important;
  transition:none!important}
}


/* The standalone editorial statement does not use the two-column row spacing. */
.editorial.lead .eyebrow { margin: 0 0 32px; }

/* Original Cortex sweep shared by all header, footer and access-page wordmarks. */
.identity h1 { position:relative; display:inline-block; font-size:40px; }
.wordmark {
    display:inline-block;
    background: linear-gradient(
      100deg,
      #8a6322 0%,
      #8a6322 38%,
      #f0d49c 48%,
      #fff6e0 50%,
      #f0d49c 52%,
      #8a6322 62%,
      #8a6322 100%
    );
    background-size: 260% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: sweep 4.5s ease-in-out 1.1s infinite;
}
.identity { animation: rise 1.1s cubic-bezier(.16,1,.3,1) .15s both; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes sweep {
    0%   { background-position: 130% 0; }
    45%  { background-position: -30% 0; }
    100% { background-position: -30% 0; }
  }

/* Reuse the same entrance rhythm once for editorial sections. Content is visible without JS. */
.reveal-in { animation: rise 1.1s cubic-bezier(.16,1,.3,1) both; }
.invitation-note { margin-top:18px; font-size:11px; line-height:1.8; color:var(--muted); }
body { padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }
.entrance { padding-top:max(40px,env(safe-area-inset-top)); padding-bottom:max(52px,env(safe-area-inset-bottom)); }
footer { padding-bottom:max(30px,env(safe-area-inset-bottom)); }
.questions section { margin-top:60px; }
.questions h2 { margin-bottom:24px; }
.questions details { border-top:1px solid var(--line); padding:18px 0; }
.questions summary { cursor:pointer; font-size:17px; line-height:1.6; }
.questions details .prose { margin-top:16px; }
summary:focus-visible { outline:2px solid var(--gold); outline-offset:6px; }
@media(prefers-reduced-motion:reduce) {
 .identity,.wordmark,.reveal-in { animation:none; }
 .wordmark { background-position:0 0; }
}

/* A subordinate thought within the Principle, not another homepage chapter. */
.breadth { grid-column:1/-1; max-width:660px; }
.breadth h3 { font-family:'Cormorant Garamond',serif; font-size:25px; font-weight:400; line-height:1.3; margin:0 0 14px; color:var(--cream); }
.breadth p { font-size:14px; font-weight:300; line-height:1.9; color:var(--muted); margin:0; }
@media(max-width:760px) { .breadth { margin-top:18px; } .breadth h3 { font-size:23px; } }


.wordmark:hover, footer .wordmark:hover { color:transparent; }