:root{
  --accent:#184a4a;                 /* deep teal / blue-green — the main text accent */
  --accent-soft:rgba(24,74,74,.5);  /* link underline */
  --ok:#3d8f63;                     /* "unlocked" confirm green */
  --ink:#232019;
  /* type: swap these two to try pairings */
  --font-head:"Fraunces", Georgia, serif;
  --font-body:"General Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; overflow:hidden; background:#e7e1d6; }
body{ font-family:var(--font-body); color:var(--ink); -webkit-font-smoothing:antialiased; }

#gl{ position:fixed; inset:0; width:100vw; height:100vh; display:block; touch-action:none; }

/* right-side sparse copy */
.meta{
  position:fixed; right:5.5%; top:26%;
  text-align:right; z-index:3;
  display:flex; flex-direction:column; align-items:flex-end; gap:22px;
  pointer-events:none;
}
.meta .line{ margin:0; color:var(--accent); font-family:var(--font-head); font-weight:400; font-size:clamp(26px,3vw,44px); line-height:1.05; }
.meta .line.soft{ font-size:clamp(20px,2.2vw,32px); }
#gate{ pointer-events:auto; margin-top:4px; display:flex; align-items:center; gap:10px; justify-content:flex-end; transition:opacity .5s ease; }
#gate.gone{ opacity:0; pointer-events:none; }

/* password box — sparse, underline only */
#gate input[type=password]{
  font-family:var(--font-head); font-size:clamp(16px,1.6vw,22px); text-align:left;
  background:transparent; border:0; border-bottom:2px solid rgba(35,32,25,.5);
  padding:4px 2px; width:160px; color:var(--ink); outline:none;
}
#gate input[type=password]::placeholder{ color:rgba(35,32,25,.4); }
#gate input[type=password]:focus{ border-bottom-color:var(--accent); }
.pwmsg{ color:var(--accent); font-size:14px; }
.unlocked{ color:var(--ok); font-size:clamp(16px,1.6vw,22px); }

/* local dev reveal toggle */
.gatebtn{
  font:inherit; font-size:clamp(15px,1.5vw,20px); color:var(--accent);
  background:transparent; border:2px solid var(--accent); border-radius:2px;
  padding:7px 20px; cursor:pointer;
}
.gatebtn:hover{ background:var(--accent); color:#fff; }
.gatebtn.unlocked{ border-color:var(--ok); color:var(--ok); }

.no-webgl::after{ content:"this wall needs WebGL"; position:fixed; inset:0; display:grid; place-items:center; color:#8a8168; }

/* soft wall caption, bottom-left — only after reveal (fades in with the about block) */
.house{ position:fixed; left:26px; bottom:20px; margin:0; z-index:3; pointer-events:none;
  font-family:var(--font-head); font-style:italic; font-size:14px; color:#8f866f;
  opacity:0; transition:opacity .5s ease .1s; }
.house[hidden]{ display:none; }
.house.show{ opacity:.85; }

/* about + links — staggered in on reveal; pinned bottom-right so it stays clear of the wall */
.about{ position:fixed; right:5.5%; bottom:8%; top:auto; z-index:3;
        display:flex; flex-direction:column; align-items:flex-end; gap:9px; max-width:300px; pointer-events:auto; }
.about[hidden]{ display:none; }
.about > *{ margin:0; opacity:0; transform:translateY(8px); transition:opacity .32s ease, transform .32s ease; }
.about.show > *{ opacity:1; transform:none; }
.about.show > *:nth-child(1){ transition-delay:.02s; }
.about.show > *:nth-child(2){ transition-delay:.10s; }
.about.show > *:nth-child(3){ transition-delay:.18s; }
.about.show > *:nth-child(4){ transition-delay:.26s; }
.about-lead{ color:var(--accent); font-family:var(--font-head); font-size:19px; }
.about-body{ color:#5f5748; font-size:13.5px; line-height:1.55; text-align:right; }
.about-link{ color:var(--accent); text-decoration:none; font-size:15px; border-bottom:1px solid var(--accent-soft); padding-bottom:1px; }
.about-link:hover{ border-bottom-color:var(--accent); }

/* dev panel */
.devpanel{
  position:fixed; top:14px; left:14px; z-index:20; width:250px;
  background:rgba(251,249,244,.96); border:1px solid #ddd6c8; border-radius:10px;
  box-shadow:0 10px 30px rgba(40,30,20,.18); font-size:12px; display:none;
}
.devpanel.show{ display:block; }
.dev-head{ display:flex; justify-content:space-between; align-items:center; padding:8px 12px; border-bottom:1px solid #ece5d6; font-weight:600; }
.dev-btns button{ border:0; background:transparent; cursor:pointer; font-size:15px; width:22px; }
.dev-body{ padding:10px 12px; display:flex; flex-direction:column; gap:8px; }
.devpanel.min .dev-body{ display:none; }
.dev-hint,.dev-sel{ color:#847c69; }
.devpanel label{ display:flex; flex-direction:column; gap:2px; color:#6b6353; }
.devpanel input[type=range]{ width:100%; }
.dev-row{ display:flex; gap:8px; }
.dev-row button{ flex:1; font:inherit; padding:6px; border:1px solid #cfc7b6; border-radius:6px; background:#fff; cursor:pointer; }
#dev-out{ width:100%; height:120px; font:11px ui-monospace,Menlo,monospace; border:1px solid #ddd6c8; border-radius:6px; padding:6px; resize:vertical; }

/* mobile: header on top, images in the middle, about/links pinned below — all left-aligned */
@media (max-width:760px){
  .meta{ position:fixed; right:0; left:0; top:calc(env(safe-area-inset-top,0px) + 6.5vh);
         align-items:flex-start; text-align:left; gap:14px; padding:0 17px; }
  #gate{ justify-content:flex-start; }
  #gate input[type=password]{ text-align:left; }
  .about{ position:fixed; left:0; right:0; margin:0; z-index:5;
          top:68vh; bottom:auto;   /* midway between the bottom of the photos and the bottom of the page */
          align-items:flex-start; text-align:left; padding:0 17px; gap:6px; }
  .about-lead{ font-size:17px; }
  .about-body{ font-size:12px; line-height:1.45; text-align:left; max-width:none; }
  .about-link{ font-size:14px; }
  .house{ display:none; }   /* the about block owns the bottom on mobile */
}

/* phone held sideways: copy on the LEFT (flush-left like portrait), scaled-up wall on the right */
@media (orientation:landscape) and (max-height:560px){
  .meta{ right:auto; left:20px; top:9vh;
         align-items:flex-start; text-align:left; gap:12px; }
  .meta .line{ font-size:clamp(22px,5vh,34px); }
  .meta .line.soft{ font-size:clamp(16px,3.4vh,24px); max-width:33vw; }
  #gate{ justify-content:flex-start; }
  #gate input[type=password]{ text-align:left; }
  .about{ position:fixed; left:20px; right:auto; bottom:9vh;   /* same inset as north pt's top:9vh */
          top:auto; margin-top:0; z-index:5;
          align-items:flex-start; text-align:left; max-width:31vw; gap:5px; }
  .about-lead{ text-align:left; }
  .about-body{ text-align:left; font-size:12px; line-height:1.4; max-width:31vw; }
  .about-link{ text-align:left; }
  .house{ display:block; left:auto; right:20px; bottom:12px; top:auto; font-size:13px; }
}