:root{--ink:#16130f;--paper:#f4efe8;--ember:#e2562b;--stone:#6b635a;--sand:#e8e0d4}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{font-family:Inter,"Helvetica Neue",Arial,sans-serif;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}

.stage{position:fixed;inset:0;height:100vh;height:100dvh;display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);grid-template-rows:100%;align-items:center;overflow:hidden}
.mast{grid-column:1;grid-row:1;align-self:end;justify-self:start;display:block;height:96%;width:auto;aspect-ratio:220/1000;max-width:100%;overflow:visible;margin-left:clamp(0px,6vw,120px)}

.copy{grid-column:2;grid-row:1;text-align:right;justify-self:end;max-width:44rem;padding:0 max(5vw,env(safe-area-inset-right)) 0 2vw;display:flex;flex-direction:column;align-items:flex-end;gap:min(2.6vh,1.4rem)}
.brand{color:var(--ember);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:clamp(.7rem,min(1.1vw,1.8vh),.95rem)}
h1{font-size:clamp(1.5rem,min(5.2vw,8.5vh),5rem);line-height:1.02;letter-spacing:-.035em;font-weight:700}
h1 em{font-style:normal;color:var(--ember)}
.lead{color:var(--stone);font-size:clamp(.85rem,min(1.6vw,2.6vh),1.3rem);line-height:1.5;max-width:34em}
ul{list-style:none;font-weight:600;font-size:clamp(.8rem,min(1.3vw,2.2vh),1.05rem);line-height:1.9}
li{white-space:nowrap}
li::after{content:"";display:inline-block;width:.45em;height:.45em;margin-left:.7em;border-radius:50%;background:var(--ember);vertical-align:.1em}
.btn{display:inline-block;white-space:nowrap;background:var(--ink);color:var(--paper);padding:.9em 1.7em;border-radius:999px;font-weight:600;font-size:clamp(.8rem,min(1.2vw,2vh),1rem);text-decoration:none;transition:background .2s}
.btn:hover{background:var(--ember)}

/* discreet demo links, bottom-right */
.demos{position:fixed;right:max(5vw,env(safe-area-inset-right));bottom:max(2.4vh,env(safe-area-inset-bottom));display:flex;gap:.5em;font-size:clamp(.68rem,min(1vw,1.6vh),.82rem)}
.demos a{color:var(--stone);text-decoration:none;padding:.35em .9em;border:1px solid var(--sand);border-radius:999px;opacity:.75;transition:opacity .2s,color .2s,border-color .2s}
.demos a:hover,.demos a:focus-visible{opacity:1;color:var(--ink);border-color:var(--stone)}

/* phones in portrait: narrower mast, tighter type */
@media (max-aspect-ratio:3/4){
  .stage{grid-template-columns:minmax(0,36fr) minmax(0,64fr)}
  .mast{width:100%;height:auto;max-height:94%;margin-left:-2vw}
  .birds{display:none}
  .copy{padding-left:0;padding-top:14vh;gap:1.6vh}
  h1{font-size:clamp(1.4rem,7.4vw,3.4rem)}
  .lead{font-size:clamp(.82rem,3.6vw,1.15rem)}
  ul{font-size:clamp(.76rem,3.2vw,1rem);line-height:1.7}
  .btn{font-size:clamp(.78rem,3.4vw,1rem)}
  .demos{font-size:.7rem}
}
/* very short screens (landscape phones): drop the list */
@media (max-height:460px){ul{display:none}}