/* The One Earth curtain on the project pages: same design as the home page intro (index.html #intro,
   Tailwind there), written as plain CSS because project pages do not load Tailwind.
   Motion and every exit live in project-page.js (playCurtain / openPage). */
.oe-curtain{ position:fixed; inset:0; z-index:150; overflow:hidden; background:#14211D; }
.oe-curtain__panel{ position:absolute; left:0; right:0; height:50%; overflow:hidden; will-change:transform; }
.oe-curtain__panel--top{ top:0; }
.oe-curtain__panel--bottom{ bottom:0; }
.oe-curtain__panel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; will-change:transform; transform-origin:center center; }
.oe-curtain__panel--top img{ object-position:center bottom; filter:brightness(.66) contrast(1.06) saturate(.85); }
.oe-curtain__panel--bottom img{ object-position:center top; filter:brightness(.7) contrast(1.08) saturate(1.15) hue-rotate(-4deg); }
.oe-curtain__panel--top::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, transparent, rgba(20,33,29,.5)); }
.oe-curtain__panel--bottom::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, transparent, rgba(20,33,29,.5)); }
.oe-curtain__seam{ position:absolute; left:50%; top:50%; width:0; height:1px; transform:translate(-50%,-50%); background:linear-gradient(90deg, transparent, #B39677, transparent); box-shadow:0 0 0 0 rgba(179,150,119,0); }
.oe-curtain__center{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; width:calc(100vw - 32px); max-width:max-content; text-align:center; }
.oe-curtain__monogram{ margin-bottom:16px; }
.oe-curtain__ring{ stroke-dasharray:170; stroke-dashoffset:170; }
.oe-curtain__letters{ opacity:0; }
.oe-curtain__coords{ margin:0; opacity:0; color:rgba(213,200,186,.7); font:400 11px/1.6 "Space Mono",monospace; letter-spacing:.18em; }
.oe-curtain__skip{
  position:fixed; z-index:151; right:28px; bottom:calc(28px + env(safe-area-inset-bottom,0px)); min-height:44px; padding:0 4px;
  border:0; background:transparent; color:rgba(213,200,186,.6); font:400 12px/1 "Plus Jakarta Sans",sans-serif; letter-spacing:.08em; cursor:pointer; opacity:0;
}
.oe-curtain__skip span{ padding-bottom:2px; border-bottom:1px solid transparent; transition:border-color .25s ease, color .25s ease; }
.oe-curtain__skip:hover, .oe-curtain__skip:focus-visible{ color:#D5C8BA; }
.oe-curtain__skip:hover span, .oe-curtain__skip:focus-visible span{ border-color:#B39677; }
.oe-curtain__skip:focus-visible{ outline:1px solid #B39677; outline-offset:4px; }

/* While the curtain plays the nav stays hidden; project-page.js removes html.oe-curtain-on when it opens.
   No !important here, so nothing can stop the nav coming back once the class is removed.
   Failsafe: an inline timer in each page's <head> (it can never be a stale cached file) removes the
   class and the curtain after 6 s if project-page.js has not opened the page by then. */
html.oe-curtain-on .site-nav{ opacity:0; visibility:hidden; }
@media (prefers-reduced-motion:reduce){ .oe-curtain, .oe-curtain__skip{ display:none; } html.oe-curtain-on .site-nav{ opacity:1; visibility:visible; } }