:root{
  --bg: #E9E4D8;
  --paper: #f8efe3;
  --ink: #231b18;
  --ink-strong: #1a130f;
  --muted: #77655a;
  --burgundy: #7d2127;
  --brick: #a14b39;
  --blue: #d8e3ee;
  --lavender: #c9b7d1;
  --brown: #4d3123;
  --border: rgba(34,24,18,0.12);
  --panel: rgba(252,244,230,0.96);
  --home-bg: #080806;
  --home-canvas: #11100d;
  --home-panel: #f0e8d6;
  --home-panel-dark: #1f1b14;
  --home-ink: #f3ece1;
  --home-muted: #9b958c;
  --home-border: rgba(255,255,255,0.12);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Georgia, 'Times New Roman', serif;
  color:var(--ink-strong);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* Homepage canvas styles */
.home-canvas{height:100vh;overflow:hidden;position:relative;background:var(--home-canvas);}
.home-canvas::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.06) 0.6px, transparent 0.6px), radial-gradient(rgba(255,255,255,0.03) 0.6px, transparent 0.6px);background-size:8px 8px, 24px 24px;opacity:0.08;pointer-events:none;}
.home-canvas::after{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 50% 12%, rgba(255,255,255,0.04), transparent 18%), radial-gradient(circle at 50% 88%, rgba(0,0,0,0.22), transparent 28%);opacity:0.12;pointer-events:none}
.home-canvas .brand-mark{position:absolute;left:28px;top:22px;display:flex;flex-direction:column;gap:4px;font-family:Georgia, 'Times New Roman', serif;letter-spacing:0.18em;text-transform:lowercase;line-height:1.05;z-index:120}
.home-canvas .brand-mark span{font-size:14px;font-weight:400;color:rgba(236,229,217,0.94)}
.home-canvas .brand-mark small{font-size:10px;color:rgba(236,229,217,0.48);letter-spacing:0.24em}
.canvas{position:relative;width:100%;height:100vh;overflow:hidden}
.obj{position:absolute;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:22px 20px;min-width:200px;max-width:280px;background:var(--home-panel);border:1px solid var(--home-border);box-shadow:0 18px 38px rgba(0,0,0,0.28);transform-origin:center center;transition:transform .32s ease,box-shadow .24s ease,opacity .4s ease,background .25s ease,border-color .25s ease;transform:translate3d(var(--tx,0),var(--ty,0),0) rotate(var(--rot,0deg)) scale(var(--scale,1));color:var(--home-ink);cursor:pointer;outline:none}
button.obj{border:none;background:none;padding:0;text-align:left}
.obj.people{width:220px;min-height:150px;border-color:rgba(255,255,255,0.1);background:#1f1c15;color:#f3eee5}
.obj.map-anchor{width:248px;min-height:150px;border-color:rgba(255,255,255,0.12);background:#efe4d0;color:#1f1a0f}
.obj.project{width:236px;min-height:160px;border-color:rgba(255,255,255,0.08);background:#1e1b15;color:#f1e8df}
.obj.library{width:216px;min-height:160px;border-color:rgba(0,0,0,0.16);background:#efe5d4;color:#1f1a12}
.obj.grant{width:190px;min-height:132px;border-color:rgba(255,255,255,0.1);background:#4b1118;color:#f4ebe5}
.obj.join{width:186px;min-height:120px;border-color:rgba(255,255,255,0.08);background:#151310;color:#f6efe7}
.obj .frag{font-family:'Playfair Display',serif;font-size:26px;line-height:1.08;color:inherit;letter-spacing:-0.03em;text-transform:none}
.obj .sub{font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;font-size:12px;color:var(--home-muted);text-transform:none;letter-spacing:0.05em;opacity:0.92;transition:opacity .28s ease,transform .28s ease}
.obj .meta{font-family:SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono',monospace;font-size:10px;color:var(--muted);letter-spacing:0.16em;text-transform:uppercase;opacity:0.8;transition:opacity .28s ease}
.obj.project::before{content:'';position:absolute;top:18px;right:16px;width:42px;height:30px;background:rgba(255,255,255,0.88);border:1px solid rgba(34,24,18,0.1);transform:rotate(-6deg);pointer-events:none}
.obj.library::before{content:'';position:absolute;bottom:16px;right:12px;width:34px;height:30px;background:linear-gradient(135deg, rgba(255,255,255,0.92), rgba(233,228,216,0.5));border:1px solid rgba(34,24,18,0.08);transform:rotate(-4deg);pointer-events:none}
.obj.join .frag{font-size:24px}
.obj:hover{box-shadow:0 24px 42px rgba(0,0,0,0.34);border-color:rgba(255,255,255,0.14);z-index:220;transform:translate3d(var(--tx,0),var(--ty,0),0) rotate(calc(var(--rot,0deg) + 0.9deg)) scale(1.03);}
.obj.hover{z-index:240;--scale:1.03}

@keyframes floaty{0%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-3px) rotate(0.2deg)}100%{transform:translateY(0) rotate(0deg)}}

.custom-cursor{position:fixed;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,0.96);border:1px solid rgba(34,24,18,0.18);pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:background .12s ease,transform .08s ease,box-shadow .18s ease;box-shadow:0 0 0 1px rgba(34,24,18,0.12)}
body.hovering-clickable .custom-cursor{background:rgba(125,33,39,0.95);transform:scale(1.15);box-shadow:0 0 0 4px rgba(125,33,39,0.18)}

.obj:focus{outline:none;box-shadow:0 16px 54px rgba(125,33,39,0.16)}

@media(max-width:900px){
  .obj{padding:14px}
  .obj.map-anchor{width:220px}
  .obj.people{width:204px}
  .obj.project{width:208px}
  .obj.library{width:192px}
  .obj.grant{width:168px}
  .obj.join{width:160px}
}
@media(max-width:600px){
  .home-canvas{overflow:auto}
  .home-canvas .brand-mark{left:12px;top:10px}
  .canvas{position:static;height:auto;padding:24px 12px 40px;display:flex;flex-direction:column;align-items:center;gap:16px;overflow:visible}
  .obj{position:relative;left:auto;top:auto;transform:none;margin:0;width:min(92vw, 320px);max-width:100%;min-width:auto}
  .obj.map-anchor{width:100%}
}

.site-header{
  display:flex;justify-content:space-between;align-items:center;padding:28px 40px;border-bottom:1px solid #e9e6e0;background:linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%);
}
.brand h1{font-family: 'Playfair Display', serif;font-size:28px;margin:0;letter-spacing:0.02em}
.brand .tag{font-size:12px;color:var(--muted);margin-top:4px}
.top-nav button{background:transparent;border:0;padding:8px 12px;font-size:13px;color:var(--ink);cursor:pointer}
.map-stage{display:grid;grid-template-columns:1fr;gap:24px;padding:36px 48px}
.filters{display:flex;gap:12px;align-items:center;margin-top:6px}
.filters select,.filters input{padding:8px;border:1px solid #e8e4dd;background:var(--paper)}
.filters button{padding:8px 12px;border:1px solid #e8e4dd;background:transparent;cursor:pointer}
.intro{max-width:680px}
.intro h2{font-family:'Playfair Display', serif;font-size:64px;margin:0 0 8px 0;letter-spacing:-0.02em}
.intro .meta{font-size:13px;color:var(--muted);margin-top:8px}
.map-container{background:var(--paper);border:1px solid #e6e2db;padding:40px;border-radius:2px;box-shadow:0 4px 18px rgba(0,0,0,0.04)}
svg{width:100%;height:70vh;display:block}
.node{cursor:pointer;transform-origin:center center;transition:transform .28s ease,opacity .28s ease}
.node circle{fill:#111;stroke:#fff;stroke-width:2}
.node .initials{fill:#fff;font-size:11px;font-weight:600;dominant-baseline:middle;text-anchor:middle;font-family:Inter,Arial}
.node .dot{fill:#2b2b2b}
.link{stroke:#2b2b2b;stroke-opacity:0.06;stroke-width:1.2}
.muted{opacity:.12}
#human-map [tabindex]{outline:none}
.node:focus circle{stroke:#7b0f0f;stroke-width:2.4}
.node:focus{transform:scale(1.06)}
.node:focus .initials{fill:#fff}

.focus-visible{box-shadow:0 0 0 3px rgba(123,15,15,0.12);outline:none}

.nodename{font-size:12px;fill:#111;font-family:Inter,Arial;pointer-events:none}
.node:hover .nodename{opacity:1;transform:translateY(0px)}
.node .nodename{transform:translateY(-6px)}
#profile-root{position:fixed;right:36px;top:120px;max-width:380px;z-index:60}
.profile-card{background:var(--paper);padding:22px;border:1px solid #e6e2db;box-shadow:0 8px 30px rgba(0,0,0,0.06);transform:translateY(10px);opacity:0;transition:opacity .36s ease,transform .36s ease}
.profile-card.show{opacity:1;transform:none}
.profile-card h3{font-family:'Playfair Display',serif;margin:0 0 6px 0;font-size:20px}
.profile-card .meta{font-size:12px;color:var(--muted);margin-bottom:10px}
.profile-section{font-size:13px;color:var(--ink);margin:10px 0}
.pill-list{font-size:12px;color:var(--muted);letter-spacing:0.04em}
.close-btn{background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:13px}
@media(max-width:800px){
  .intro h2{font-size:40px}
  svg{height:60vh}
  #profile-root{position:fixed;left:12px;right:12px;top:auto;bottom:12px}
}

/* Constellations panel */
.constellations-panel{
  position:fixed;left:24px;top:120px;width:320px;max-height:70vh;overflow:auto;background:var(--paper);border:1px solid #e6e2db;padding:18px;box-shadow:0 12px 40px rgba(0,0,0,0.06);z-index:70;transform:translateX(-8px);}
.constellations-panel.hidden{display:none}
.constellations-panel h4{margin:0 0 8px 0;font-family:'Playfair Display',serif}
.constellation-list{list-style:none;padding:0;margin:8px 0}
.constellation-list li{padding:8px 6px;border-bottom:1px dashed #efeae3;display:flex;justify-content:space-between;align-items:center}
.constellation-list button{background:transparent;border:0;color:var(--muted);cursor:pointer}
.constellation-create{display:flex;gap:8px;margin-top:10px}
.constellation-create input{flex:1;padding:8px;border:1px solid #e8e4dd}

/* Directory editorial view */
.directory-panel{position:fixed;left:50%;top:80px;transform:translateX(-50%);width:92%;max-width:1100px;background:transparent;z-index:65;padding:20px 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dir-card{background:var(--paper);padding:18px;border:1px solid #e6e2db;box-shadow:0 8px 30px rgba(0,0,0,0.04);display:flex;flex-direction:column;gap:10px}
.dir-head{display:flex;gap:12px;align-items:center}
.dir-initial{width:56px;height:56px;border-radius:2px;background:#111;color:#fff;display:grid;place-items:center;font-weight:700}
.dir-title{font-family:'Playfair Display',serif;font-size:18px}
.dir-meta{font-size:12px;color:var(--muted)}
.dir-blurb{font-size:13px;color:var(--ink);line-height:1.3}

/* Projects */
.projects-panel{position:fixed;right:24px;top:120px;width:420px;max-height:72vh;overflow:auto;background:var(--paper);border:1px solid #e6e2db;padding:18px;box-shadow:0 12px 40px rgba(0,0,0,0.06);z-index:70}
.project-card{padding:12px;border-bottom:1px solid #efeae3}
.project-card h5{margin:0 0 6px 0;font-family:'Playfair Display',serif}
.project-meta{font-size:12px;color:var(--muted)}


@media(max-width:1000px){
  .directory-panel{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .directory-panel{grid-template-columns:1fr;left:12px;transform:none;top:100px;width:calc(100% - 24px)}
  .constellations-panel{left:12px}
}
/* =====================================================
   HUMAN MAP — INTRO
   ===================================================== */

.human-intro {
  min-height: calc(100vh - 90px);
  position: relative;
  overflow: hidden;
  padding: 70px 5vw 40px;
  background: #0b0a09;
  color: #e8e1d5;
}

.human-intro-number {
  position: absolute;
  top: 38px;
  left: 5vw;

  font-family: monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;

  opacity: 0.55;
}

.human-intro-content {
  max-width: 900px;
  margin-top: 100px;
}

.human-kicker {
  margin: 0 0 28px;

  font-family: monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;

  color: #aaa095;
}

.human-intro h1 {
  margin: 0;

  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(70px, 11vw, 170px);
  font-weight: 400;
  line-height: 0.78;
  letter-spacing: -0.07em;

  color: #eee7dc;
}

.human-description {
  max-width: 570px;
  margin: 55px 0 45px;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  line-height: 1.45;

  color: #aaa095;
}

.human-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.human-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;

  min-width: 245px;
  padding: 17px 19px;

  border: 1px solid #eee7dc;

  color: #eee7dc;
  text-decoration: none;

  font-family: monospace;
  font-size: 11px;
  letter-spacing: 0.12em;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

.human-button:hover {
  background: #eee7dc;
  color: #0b0a09;
  transform: translateY(-3px);
}

.human-button.secondary {
  border-color: #625c55;
  color: #aaa095;
}

.human-button.secondary:hover {
  background: #aaa095;
  color: #0b0a09;
  border-color: #aaa095;
}

.human-button span {
  font-size: 16px;
}

.human-intro-footer {
  position: absolute;
  bottom: 30px;
  left: 5vw;

  font-family: monospace;
  font-size: 9px;
  letter-spacing: 0.18em;

  color: #625c55;
}


/* subtle grain */

.human-intro::after {
  content: "";
  position: absolute;
  inset: 0;

  pointer-events: none;

  opacity: 0.055;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}


/* mobile */

@media (max-width: 700px) {

  .human-intro {
    padding: 55px 25px 35px;
  }

  .human-intro-number {
    left: 25px;
  }

  .human-intro-content {
    margin-top: 80px;
  }

  .human-intro h1 {
    font-size: 72px;
  }

  .human-description {
    font-size: 17px;
    margin-top: 45px;
  }

  .human-actions {
    flex-direction: column;
  }

  .human-button {
    width: 100%;
    box-sizing: border-box;
  }

  .human-intro-footer {
    left: 25px;
  }

}
/* =========================================================
   WINDERVALE — MAPPING LANDING PAGE
   ========================================================= */

.mapping-page {
  margin: 0;
  min-height: 100vh;
  background: #050507;
  color: #eeeef5;
  font-family: "Courier New", Courier, monospace;
  overflow-x: hidden;
}


/* HEADER */

.mapping-header {
  height: 98px;
  width: 100%;
  box-sizing: border-box;

  display: flex;
  align-items: center;

  padding: 0 48px;

  border-bottom: 1px solid rgba(230, 230, 255, 0.18);
}


.mapping-logo {
  color: #eeeef5;
  text-decoration: none;

  font-size: 20px;
  letter-spacing: 1px;
}


.mapping-nav {
  display: flex;
  gap: 42px;

  margin-left: auto;
}


.mapping-nav a {
  color: #eeeef5;
  text-decoration: none;

  font-size: 16px;
  letter-spacing: 0.5px;

  transition: opacity 0.25s ease;
}


.mapping-nav a:hover {
  opacity: 0.5;
}


.mapping-cross {
  margin-left: 65px;

  color: #eeeef5;

  font-size: 28px;
  font-weight: 100;

  transform: rotate(45deg);
}


/* MAIN */

.mapping-hero {
  position: relative;

  min-height: calc(100vh - 98px);

  display: flex;
  align-items: center;

  padding: 60px 48px 100px;

  box-sizing: border-box;
}


.mapping-content {
  margin-top: -70px;
}


.mapping-index {
  margin-bottom: 58px;

  font-size: 18px;
  letter-spacing: 1px;

  color: #d8d8e5;
}


.mapping-content h1 {
  margin: 0 0 55px 0;

  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;

  font-size: clamp(100px, 12vw, 190px);
  line-height: 0.75;

  font-weight: 300;
  letter-spacing: -9px;

  color: #e8e8f5;

  text-transform: lowercase;
}


.mapping-description {
  margin: 0 0 36px 0;

  font-size: 20px;
  line-height: 1.7;

  letter-spacing: 0.5px;

  color: #dedee8;
}


/* BUTTONS */

.mapping-actions {
  display: flex;
  gap: 20px;
}


.mapping-button {
  width: 375px;
  height: 84px;

  box-sizing: border-box;

  padding: 0 40px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border: 1px solid rgba(230, 230, 255, 0.75);

  color: #eeeef5;
  text-decoration: none;

  font-size: 18px;
  letter-spacing: 1px;

  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}


.mapping-button:hover {
  background: #eeeef5;
  color: #050507;
  border-color: #eeeef5;
}


.mapping-button span:last-child {
  font-size: 28px;
}


/* RIGHT SIDE DOT FIELD */

.mapping-dots {
  position: absolute;

  right: 47px;
  top: 55px;
  bottom: 45px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  font-size: 20px;

  color: rgba(230, 230, 255, 0.65);
}


.mapping-dot-active {
  font-size: 30px;
  color: #eeeef5;

  transform: rotate(45deg);
}


/* FOOTER */

.mapping-footer {
  position: absolute;

  left: 48px;
  right: 48px;
  bottom: 25px;

  display: flex;
  justify-content: space-between;

  font-size: 15px;
  letter-spacing: 0.5px;

  color: #aaaaba;
}


/* MOBILE */

@media (max-width: 800px) {

  .mapping-header {
    padding: 0 22px;
    height: 78px;
  }

  .mapping-nav {
    display: none;
  }

  .mapping-cross {
    margin-left: auto;
  }

  .mapping-hero {
    padding: 0 24px;
  }

  .mapping-content h1 {
    font-size: 22vw;
    letter-spacing: -5px;
  }

  .mapping-description {
    font-size: 16px;
  }

  .mapping-actions {
    flex-direction: column;
  }

  .mapping-button {
    width: 100%;
    max-width: 420px;
  }

  .mapping-dots {
    display: none;
  }

  .mapping-footer {
    left: 24px;
    right: 24px;

    font-size: 11px;
  }

  .mapping-footer span:last-child {
    display: none;
  }

}
/* =========================================================
   PROFILE CREATION
   ========================================================= */

.profile-create-page {
  margin: 0;
  min-height: 100vh;

  background: #050507;
  color: #eeeef5;

  font-family: "Courier New", Courier, monospace;
}


.profile-create {
  width: min(1100px, calc(100% - 96px));

  margin: 0 auto;

  padding: 100px 0 160px;

  display: grid;
  grid-template-columns: 0.8fr 1.2fr;

  gap: 100px;
}


.profile-create-intro {
  position: sticky;
  top: 100px;

  height: fit-content;
}


.profile-create-intro h1 {
  margin: 35px 0;

  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;

  font-size: clamp(70px, 8vw, 125px);

  line-height: 0.8;

  font-weight: 300;

  letter-spacing: -6px;

  text-transform: lowercase;
}


.profile-create-intro p {
  font-size: 17px;

  line-height: 1.7;

  color: #bdbdc9;
}


/* FORM */

.profile-form {
  display: flex;

  flex-direction: column;

  gap: 55px;
}


.form-section {
  display: flex;

  flex-direction: column;

  gap: 15px;
}


.form-section > label {
  font-size: 15px;

  letter-spacing: 1px;

  text-transform: lowercase;

  color: #aaaab8;
}


.profile-form input[type="text"],
.profile-form textarea {
  width: 100%;

  box-sizing: border-box;

  padding: 18px 0;

  border: none;

  border-bottom: 1px solid rgba(230, 230, 255, 0.4);

  outline: none;

  background: transparent;

  color: #eeeef5;

  font-family: inherit;

  font-size: 19px;
}


.profile-form textarea {
  resize: vertical;

  min-height: 130px;

  line-height: 1.6;
}


.profile-form input::placeholder,
.profile-form textarea::placeholder {
  color: #666675;
}


.profile-form input:focus,
.profile-form textarea:focus {
  border-bottom-color: #eeeef5;
}


/* DISCIPLINES */

.checkbox-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 12px;
}


.checkbox-grid label {
  display: flex;

  align-items: center;

  gap: 12px;

  padding: 15px;

  border: 1px solid rgba(230, 230, 255, 0.2);

  cursor: pointer;

  color: #c9c9d4;

  transition: 0.25s ease;
}


.checkbox-grid label:hover {
  border-color: rgba(230, 230, 255, 0.7);

  color: #eeeef5;
}


.checkbox-grid input {
  accent-color: #eeeef5;
}


/* SUBMIT */

.profile-submit {
  margin-top: 20px;

  width: 100%;

  height: 82px;

  padding: 0 35px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border: 1px solid #eeeef5;

  background: transparent;

  color: #eeeef5;

  font-family: inherit;

  font-size: 17px;

  letter-spacing: 1px;

  cursor: pointer;

  transition: 0.3s ease;
}


.profile-submit:hover {
  background: #eeeef5;

  color: #050507;
}


.profile-submit span:last-child {
  font-size: 28px;
}


/* MOBILE */

@media (max-width: 800px) {

  .profile-create {
    width: calc(100% - 48px);

    padding-top: 70px;

    display: block;
  }

  .profile-create-intro {
    position: static;

    margin-bottom: 80px;
  }

  .profile-create-intro h1 {
    font-size: 20vw;

    letter-spacing: -4px;
  }

  .checkbox-grid {
    grid-template-columns: 1fr;
  }

}
/* =========================================================
   HUMAN MAP
   ========================================================= */

.human-map-page {
  margin: 0;

  min-height: 100vh;

  background: #050507;

  color: #eeeef5;

  font-family: "Courier New", Courier, monospace;
}


.human-map-main {
  position: relative;

  min-height: calc(100vh - 98px);

  overflow: hidden;
}


.human-map-heading {
  position: absolute;

  top: 55px;
  left: 48px;

  z-index: 5;
}


.human-map-heading h1 {
  margin: 25px 0 10px;

  font-family:
    "Arial Narrow",
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 80px;

  line-height: 0.8;

  font-weight: 300;

  letter-spacing: -5px;

  text-transform: lowercase;
}


.human-map-heading p {
  margin: 0;

  color: #888894;

  font-size: 15px;

  letter-spacing: 1px;
}


/* MAP */

.map-field {

  position: absolute;

  inset: 0;

  overflow: hidden;

  background:

    radial-gradient(
      circle at center,
      rgba(255,255,255,0.035),
      transparent 45%
    );

}


/* faint grid */

.map-field::before {

  content: "";

  position: absolute;

  inset: 0;

  background-image:

    linear-gradient(
      rgba(255,255,255,0.035) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,0.035) 1px,
      transparent 1px
    );

  background-size: 90px 90px;

  pointer-events: none;

}


/* PERSON */

.map-person {

  position: absolute;

  transform: translate(-50%, -50%);

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 7px;

  background: transparent;

  border: none;

  color: #eeeef5;

  cursor: pointer;

  font-family: inherit;

  padding: 10px;

}


.map-person-dot {

  width: 13px;

  height: 13px;

  border-radius: 50%;

  border: 1px solid #eeeef5;

  background: #050507;

  transition: 0.3s ease;

}


.map-person-name {

  font-size: 14px;

  white-space: nowrap;

  letter-spacing: 0.5px;

  opacity: 0.75;

  transition: 0.3s ease;

}


.map-person-meta {

  font-size: 11px;

  color: #777784;

  opacity: 0;

  transition: 0.3s ease;

}


.map-person:hover .map-person-dot {

  transform: scale(1.8);

  background: #eeeef5;

}


.map-person:hover .map-person-name {

  opacity: 1;

}


.map-person:hover .map-person-meta {

  opacity: 1;

}


/* PROFILE PANEL */

.person-profile {

  position: absolute;

  z-index: 20;

  right: 40px;

  top: 40px;

  bottom: 40px;

  width: 420px;

  box-sizing: border-box;

  padding: 45px;

  background: #eeeef5;

  color: #050507;

  border: 1px solid #eeeef5;

  overflow-y: auto;

}


.person-profile.hidden {

  display: none;

}


.profile-close {

  position: absolute;

  top: 20px;

  right: 20px;

  border: none;

  background: none;

  color: inherit;

  font-family: inherit;

  font-size: 14px;

  cursor: pointer;

}


.profile-number {

  margin-bottom: 55px;

  font-size: 12px;

  letter-spacing: 2px;

  text-transform: uppercase;

}


.person-profile h2 {

  margin: 0 0 15px;

  font-family:
    "Arial Narrow",
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 65px;

  line-height: 0.85;

  font-weight: 300;

  letter-spacing: -4px;

}


.profile-meta {

  padding-bottom: 35px;

  border-bottom: 1px solid rgba(0,0,0,0.2);

  font-size: 13px;

  letter-spacing: 1px;

  text-transform: lowercase;

}


.profile-description {

  margin: 35px 0;

  font-family: Georgia, serif;

  font-size: 20px;

  line-height: 1.5;

}


.profile-interests {

  margin-top: 70px;

}


.profile-interests > div {

  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: 1px;

  opacity: 0.55;

}


.profile-interests p {

  font-size: 15px;

  line-height: 1.8;

}


/* MOBILE */

@media (max-width: 800px) {

  .human-map-heading {

    left: 24px;

    top: 35px;

  }


  .human-map-heading h1 {

    font-size: 60px;

  }


  .person-profile {

    left: 15px;

    right: 15px;

    top: 15px;

    bottom: 15px;

    width: auto;

  }

}
/* =========================================================
   CREATE PROFILE — FINAL VISUAL STYLE
   ========================================================= */

.profile-page {
  margin: 0;
  min-height: 100vh;
  background: #050507;
  color: #eeeef5;
  font-family: "Courier New", monospace;
}


/* PAGE LAYOUT */

.profile-create {
  width: min(1200px, calc(100% - 96px));
  margin: 0 auto;

  min-height: calc(100vh - 100px);

  padding: 110px 0 140px;

  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 120px;
}


/* LEFT SIDE */

.profile-intro {
  position: sticky;
  top: 100px;
  height: fit-content;
}

.profile-intro .eyebrow {
  font-size: 12px;
  letter-spacing: 2px;
  color: #777784;
  margin-bottom: 55px;
}

.profile-intro h1 {
  margin: 0 0 45px;

  font-family:
    "Arial Narrow",
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: clamp(75px, 8vw, 135px);

  line-height: 0.78;

  font-weight: 300;

  letter-spacing: -7px;

  text-transform: lowercase;
}

.profile-intro > p:last-child {
  max-width: 390px;

  margin: 0;

  color: #a4a4b0;

  font-size: 16px;

  line-height: 1.7;
}


/* FORM */

#profile-form {
  display: flex;
  flex-direction: column;
  gap: 52px;
}


.form-field {
  display: flex;
  flex-direction: column;
  gap: 14px;
}


.form-field label {
  font-size: 12px;

  letter-spacing: 2px;

  color: #858591;
}


.form-field input,
.form-field textarea {

  width: 100%;

  box-sizing: border-box;

  border: 0;

  border-bottom: 1px solid rgba(238, 238, 245, 0.28);

  outline: none;

  background: transparent;

  color: #eeeef5;

  font-family: "Courier New", monospace;

  font-size: 18px;

  padding: 14px 0;

  transition: border-color 0.3s ease;

}


.form-field textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.6;
}


.form-field input:focus,
.form-field textarea:focus {
  border-bottom-color: #eeeef5;
}


.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #555561;
}


.form-field small {
  color: #555561;
  font-size: 11px;
}


/* SUBMIT */

.profile-submit {

  margin-top: 20px;

  width: 100%;

  height: 78px;

  border: 1px solid rgba(238, 238, 245, 0.75);

  background: transparent;

  color: #eeeef5;

  font-family: "Courier New", monospace;

  font-size: 14px;

  letter-spacing: 2px;

  cursor: pointer;

  transition:
    background 0.3s ease,
    color 0.3s ease;

}


.profile-submit:hover {

  background: #eeeef5;

  color: #050507;

}


/* =========================================================
   PROFILE VIEW
   ========================================================= */

.person-page {

  width: min(1100px, calc(100% - 96px));

  margin: 0 auto;

  padding: 110px 0 160px;

}


/* TOP */

.person-header {

  padding-bottom: 70px;

  border-bottom: 1px solid rgba(238, 238, 245, 0.2);

}


.person-label {

  margin: 0 0 55px;

  font-size: 12px;

  letter-spacing: 2px;

  color: #777784;

}


.person-header h1 {

  margin: 0;

  font-family:
    "Arial Narrow",
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: clamp(90px, 13vw, 190px);

  line-height: 0.75;

  font-weight: 300;

  letter-spacing: -9px;

  text-transform: lowercase;
}


.person-meta {

  margin-top: 35px;

  color: #8d8d99;

  font-size: 14px;

  letter-spacing: 1px;
}


/* PROFILE CONTENT */

.person-body {

  max-width: 750px;

  margin-top: 90px;

  display: flex;

  flex-direction: column;

  gap: 70px;

}


.person-body section {

  border-top: 1px solid rgba(238, 238, 245, 0.15);

  padding-top: 18px;

}


.person-section-title {

  margin: 0 0 22px;

  font-size: 11px;

  letter-spacing: 2px;

  color: #777784;
}


.person-body section > p:last-child {

  margin: 0;

  font-size: 19px;

  line-height: 1.7;

  color: #d2d2dc;

}


.person-body section:first-child > p:last-child {

  font-family: Georgia, serif;

  font-size: 25px;

  line-height: 1.55;

  color: #eeeef5;

}


/* ACTIONS */

.person-actions {

  margin-top: 110px;

  display: flex;

  gap: 15px;

}


.person-actions a {

  display: flex;

  align-items: center;

  justify-content: center;

  min-width: 230px;

  height: 62px;

  padding: 0 25px;

  box-sizing: border-box;

  border: 1px solid rgba(238, 238, 245, 0.65);

  color: #eeeef5;

  text-decoration: none;

  font-size: 12px;

  letter-spacing: 1px;

  transition: 0.3s ease;

}


.person-actions a:hover {

  background: #eeeef5;

  color: #050507;

}


/* EMPTY PROFILE */

.person-empty {

  padding-top: 150px;

}


.person-empty p {

  font-size: 15px;

  color: #777784;

}


.person-empty a {

  display: inline-block;

  margin-top: 30px;

  color: #eeeef5;

  text-decoration: none;

  border-bottom: 1px solid #eeeef5;

  padding-bottom: 8px;

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {

  .profile-create {

    width: calc(100% - 48px);

    display: block;

    padding-top: 70px;

  }


  .profile-intro {

    position: static;

    margin-bottom: 90px;

  }


  .profile-intro h1 {

    font-size: 20vw;

    letter-spacing: -5px;

  }


  .person-page {

    width: calc(100% - 48px);

    padding-top: 70px;

  }


  .person-header h1 {

    font-size: 20vw;

    letter-spacing: -5px;

  }


  .person-actions {

    flex-direction: column;

  }


  .person-actions a {

    width: 100%;

  }

}
/* =========================================================
   PERSON VIEW — FORCE DARK THEME
   ========================================================= */

html:has(.person-view-page),
body.person-view-page {
  background: #050507 !important;
  color: #eeeef5 !important;
}

body.person-view-page {
  min-height: 100vh;
  margin: 0;
  font-family: "Courier New", monospace;
}

body.person-view-page .site-header {
  background: #050507 !important;
  color: #eeeef5 !important;
  border-bottom: 1px solid rgba(238, 238, 245, 0.18);
}

body.person-view-page .brand a,
body.person-view-page .top-nav a {
  color: #eeeef5 !important;
}

body.person-view-page .person-page {
  background: #050507 !important;
  color: #eeeef5 !important;
}

body.person-view-page .person-header,
body.person-view-page .person-body section {
  background: transparent !important;
}

body.person-view-page .person-header h1,
body.person-view-page .person-body section > p:last-child {
  color: #eeeef5 !important;
}

body.person-view-page .person-meta,
body.person-view-page .person-section-title,
body.person-view-page .person-label {
  color: #858591 !important;
}
/* ========================================
   WINDERVALE ADMIN
======================================== */

.admin-page {
    min-height: 100vh;
    padding: 70px 5vw 120px;
    background: #050505;
    color: #e8e6ed;
}

.admin-header {
    max-width: 900px;
    margin-bottom: 100px;
}

.admin-label {
    font-family: monospace;
    font-size: 12px;
    letter-spacing: 0.25em;
    margin-bottom: 50px;
    opacity: 0.6;
}

.admin-header h1 {
    font-size: clamp(70px, 12vw, 170px);
    line-height: 0.8;
    letter-spacing: -0.07em;
    font-weight: 400;
    margin: 0 0 45px;
}

.admin-header p {
    max-width: 500px;
    font-family: monospace;
    font-size: 15px;
    line-height: 1.7;
    opacity: 0.6;
}


/* SECTIONS */

.admin-section {
    max-width: 1100px;
    margin-bottom: 100px;
}

.admin-section-header {
    display: flex;
    align-items: baseline;
    gap: 25px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding-bottom: 18px;
    margin-bottom: 35px;
}

.admin-section-header span {
    font-family: monospace;
    font-size: 12px;
    opacity: 0.45;
}

.admin-section-header h2 {
    font-family: monospace;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.18em;
}


/* CARDS */

.admin-card {
    border: 1px solid rgba(255,255,255,0.16);
    padding: 35px;
    margin-bottom: 18px;
    background: rgba(255,255,255,0.025);
    transition: border-color 0.25s ease;
}

.admin-card:hover {
    border-color: rgba(255,255,255,0.4);
}

.admin-card-number {
    font-family: monospace;
    font-size: 10px;
    letter-spacing: 0.2em;
    opacity: 0.4;
    margin-bottom: 25px;
}

.admin-card h3 {
    font-size: 38px;
    font-weight: 400;
    letter-spacing: -0.03em;
    margin: 0 0 10px;
}

.admin-card-meta {
    font-family: monospace;
    font-size: 13px;
    opacity: 0.55;
    margin-bottom: 25px;
}

.admin-card p {
    max-width: 650px;
    font-family: monospace;
    font-size: 14px;
    line-height: 1.7;
    opacity: 0.7;
}

.admin-arrow {
    font-size: 25px;
    margin: 20px 0;
    opacity: 0.5;
}


/* BUTTONS */

.admin-actions {
    display: flex;
    gap: 12px;
    margin-top: 30px;
}

.admin-actions button {
    border: 1px solid rgba(255,255,255,0.35);
    background: transparent;
    color: #e8e6ed;
    padding: 13px 22px;
    font-family: monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.admin-actions button:hover {
    background: #e8e6ed;
    color: #050505;
}

.admin-actions .admin-reject {
    opacity: 0.55;
}

.admin-loading,
.admin-empty {
    font-family: monospace;
    font-size: 13px;
    opacity: 0.45;
    padding: 30px 0;
}


/* MOBILE */

@media (max-width: 700px) {

    .admin-page {
        padding: 45px 25px 80px;
    }

    .admin-header {
        margin-bottom: 70px;
    }

    .admin-card {
        padding: 25px;
    }

    .admin-card h3 {
        font-size: 30px;
    }

    .admin-actions {
        flex-direction: column;
    }

    .admin-actions button {
        width: 100%;
    }

}
/* =========================================================
   OBSCURA / MIRARY
   Dark Editorial Archive System
   ========================================================= */

:root {
  --black: #080807;
  --black-soft: #0d0c0b;
  --paper: #e8e3d8;
  --paper-dim: #aaa59a;
  --line: rgba(232, 227, 216, 0.18);
  --line-soft: rgba(232, 227, 216, 0.08);

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}


/* ---------------------------------------------------------
   BASE
   --------------------------------------------------------- */

* {
  box-sizing: border-box;
}

html {
  background: var(--black);
  color: var(--paper);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: -0.01em;
  overflow-x: hidden;
}


/* ---------------------------------------------------------
   FILM GRAIN
   --------------------------------------------------------- */

body::before {
  content: "";
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;

  pointer-events: none;
  z-index: 9999;

  opacity: 0.065;

  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.8'/%3E%3C/svg%3E");

  animation: grain 0.25s steps(2) infinite;
}

@keyframes grain {
  0% {
    transform: translate(0, 0);
  }

  20% {
    transform: translate(-2%, 1%);
  }

  40% {
    transform: translate(1%, -2%);
  }

  60% {
    transform: translate(2%, 2%);
  }

  80% {
    transform: translate(-1%, -1%);
  }

  100% {
    transform: translate(0, 0);
  }
}


/* ---------------------------------------------------------
   OPTIONAL VIGNETTE
   --------------------------------------------------------- */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;

  background:
    radial-gradient(
      circle at center,
      transparent 45%,
      rgba(0, 0, 0, 0.28) 100%
    );
}


/* ---------------------------------------------------------
   PAGE
   --------------------------------------------------------- */

.obscura {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(100, 75, 50, 0.055),
      transparent 45%
    ),
    var(--black);
}


/* ---------------------------------------------------------
   NAVIGATION
   --------------------------------------------------------- */

.obscura-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  height: 72px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 4vw;

  border-bottom: 1px solid var(--line-soft);

  background: rgba(8, 8, 7, 0.72);
  backdrop-filter: blur(12px);

  z-index: 100;
}

.obscura-logo {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: 0.02em;
}

.obscura-nav-links {
  display: flex;
  gap: 28px;
}

.obscura-nav-links a {
  color: var(--paper-dim);
  text-decoration: none;

  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;

  transition:
    color 300ms var(--ease);
}

.obscura-nav-links a:hover {
  color: var(--paper);
}


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.obscura-hero {
  min-height: 100vh;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  padding:
    140px
    6vw
    8vh;

  position: relative;
}

.obscura-hero::before {
  content: "";

  position: absolute;
  top: 20%;
  left: 50%;

  width: 1px;
  height: 45%;

  background: linear-gradient(
    to bottom,
    transparent,
    var(--line),
    transparent
  );
}

.obscura-eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--paper-dim);

  margin-bottom: 28px;
}

.obscura-title {
  max-width: 1000px;

  font-family: var(--serif);
  font-weight: 400;

  font-size: clamp(72px, 12vw, 190px);
  line-height: 0.78;

  letter-spacing: -0.055em;

  margin: 0;
}

.obscura-title em {
  font-style: italic;
}

.obscura-subtitle {
  max-width: 420px;

  margin-top: 45px;

  color: var(--paper-dim);

  font-size: 12px;
  line-height: 1.7;
}


/* ---------------------------------------------------------
   ARCHIVE HEADER
   --------------------------------------------------------- */

.archive-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  padding: 80px 6vw 25px;

  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.archive-header h2 {
  margin: 0;

  font-family: var(--serif);
  font-weight: 400;

  font-size: clamp(42px, 6vw, 80px);
  line-height: 0.9;
}

.archive-header span {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--paper-dim);
}


/* ---------------------------------------------------------
   ARCHIVE GRID
   --------------------------------------------------------- */

.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  border-bottom: 1px solid var(--line);
}

.archive-card {
  position: relative;

  min-height: 460px;

  padding: 28px;

  border-right: 1px solid var(--line);

  overflow: hidden;

  transition:
    background 500ms var(--ease);
}

.archive-card:last-child {
  border-right: none;
}

.archive-card:hover {
  background: #0e0d0b;
}


/* ---------------------------------------------------------
   CARD IMAGE
   --------------------------------------------------------- */

.archive-image {
  width: 100%;
  height: 280px;

  overflow: hidden;

  margin-bottom: 25px;

  background: #111;
}

.archive-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    grayscale(100%)
    contrast(1.08)
    brightness(0.78);

  transform: scale(1.02);

  transition:
    transform 900ms var(--ease),
    filter 900ms var(--ease);
}

.archive-card:hover .archive-image img {
  transform: scale(1.07);

  filter:
    grayscale(70%)
    contrast(1.05)
    brightness(0.9);
}


/* ---------------------------------------------------------
   CARD TEXT
   --------------------------------------------------------- */

.archive-meta {
  display: flex;
  justify-content: space-between;

  margin-bottom: 12px;

  color: var(--paper-dim);

  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.archive-card h3 {
  margin: 0;

  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;

  line-height: 0.95;
}

.archive-card p {
  max-width: 320px;

  margin-top: 15px;

  color: var(--paper-dim);

  font-size: 11px;
  line-height: 1.6;
}


/* ---------------------------------------------------------
   LARGE EDITORIAL FEATURE
   --------------------------------------------------------- */

.archive-feature {
  min-height: 80vh;

  display: grid;
  grid-template-columns: 1fr 1fr;

  border-bottom: 1px solid var(--line);
}

.archive-feature-image {
  min-height: 600px;

  overflow: hidden;

  border-right: 1px solid var(--line);
}

.archive-feature-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    grayscale(100%)
    contrast(1.1)
    brightness(0.7);

  transition: filter 800ms var(--ease);
}

.archive-feature:hover img {
  filter:
    grayscale(65%)
    contrast(1.05)
    brightness(0.82);
}

.archive-feature-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding: 55px;
}

.archive-feature-content h2 {
  margin: 30px 0 0;

  font-family: var(--serif);
  font-size: clamp(55px, 7vw, 110px);

  line-height: 0.82;

  font-weight: 400;
  letter-spacing: -0.045em;
}

.archive-feature-content h2 em {
  font-style: italic;
}

.archive-feature-content p {
  max-width: 380px;

  color: var(--paper-dim);

  font-size: 12px;
  line-height: 1.8;
}


/* ---------------------------------------------------------
   TEXT / ESSAY VIEW
   --------------------------------------------------------- */

.obscura-reading {
  max-width: 850px;

  margin: 0 auto;

  padding:
    180px
    30px
    160px;
}

.obscura-reading .category {
  text-align: center;

  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.3em;

  color: var(--paper-dim);
}

.obscura-reading h1 {
  margin: 35px 0 80px;

  text-align: center;

  font-family: var(--serif);
  font-weight: 400;

  font-size: clamp(60px, 9vw, 120px);

  line-height: 0.82;
  letter-spacing: -0.05em;
}

.obscura-reading h1 em {
  font-style: italic;
}

.obscura-reading .body {
  max-width: 620px;
  margin: auto;
}

.obscura-reading .body p {
  font-family: var(--serif);

  font-size: 21px;
  line-height: 1.65;

  color: #d7d1c5;

  margin-bottom: 32px;
}

.obscura-reading .body p:first-child::first-letter {
  float: left;

  font-size: 80px;
  line-height: 0.72;

  padding-right: 8px;
}


/* ---------------------------------------------------------
   QUOTE
   --------------------------------------------------------- */

.obscura-quote {
  margin: 100px 0;

  padding: 45px 0;

  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);

  text-align: center;
}

.obscura-quote p {
  max-width: 700px;
  margin: auto;

  font-family: var(--serif);

  font-size: clamp(30px, 4vw, 55px);
  line-height: 0.95;

  font-style: italic;
}


/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

.obscura-footer {
  min-height: 300px;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  padding: 35px 6vw;

  border-top: 1px solid var(--line);
}

.obscura-footer .mark {
  font-family: var(--serif);
  font-size: 32px;
}

.obscura-footer small {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--paper-dim);
}


/* ---------------------------------------------------------
   LINKS
   --------------------------------------------------------- */

.obscura-link {
  position: relative;

  color: var(--paper);

  text-decoration: none;
}

.obscura-link::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -4px;

  width: 100%;
  height: 1px;

  background: var(--paper);

  transform: scaleX(0);
  transform-origin: right;

  transition: transform 450ms var(--ease);
}

.obscura-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}


/* ---------------------------------------------------------
   CUSTOM SCROLLBAR
   --------------------------------------------------------- */

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: var(--black);
}

::-webkit-scrollbar-thumb {
  background: #35332e;
}

::-webkit-scrollbar-thumb:hover {
  background: #555047;
}


/* ---------------------------------------------------------
   SELECTION
   --------------------------------------------------------- */

::selection {
  background: var(--paper);
  color: var(--black);
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 800px) {

  .obscura-nav {
    height: 60px;
    padding: 0 20px;
  }

  .obscura-nav-links {
    gap: 14px;
  }

  .obscura-nav-links a {
    font-size: 8px;
  }

  .obscura-hero {
    padding:
      120px
      22px
      50px;
  }

  .obscura-hero::before {
    display: none;
  }

  .obscura-title {
    font-size: clamp(65px, 20vw, 120px);
  }

  .archive-header {
    padding: 55px 22px 20px;

    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .archive-grid {
    grid-template-columns: 1fr;
  }

  .archive-card {
    border-right: none;
    border-bottom: 1px solid var(--line);

    min-height: auto;
  }

  .archive-feature {
    grid-template-columns: 1fr;
  }

  .archive-feature-image {
    min-height: 450px;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .archive-feature-content {
    padding: 35px 22px 60px;
  }

  .obscura-reading {
    padding:
      130px
      22px
      100px;
  }

  .obscura-reading .body p {
    font-size: 19px;
  }

  .obscura-footer {
    min-height: 220px;
    padding: 25px 22px;
  }
}
:root {
  --black: #000000;
  --white: #ffffff;
  --grey: #8a8a8a;
  --dark-grey: #222222;
  --line: rgba(255, 255, 255, 0.18);
  --line-soft: rgba(255, 255, 255, 0.10);

  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}


/* =========================================================
   BASE
   ========================================================= */

* {
  box-sizing: border-box;
}

html {
  background: #000;
  color: #fff;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #000;
  color: #fff;

  font-family: var(--sans);
  font-weight: 400;

  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}


/* =========================================================
   FILM GRAIN
   ========================================================= */

body::before {
  content: "";

  position: fixed;
  inset: -50%;

  width: 200%;
  height: 200%;

  pointer-events: none;
  z-index: 9999;

  opacity: 0.055;

  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");

  animation: grain 0.25s steps(2) infinite;
}

@keyframes grain {

  0% {
    transform: translate(0, 0);
  }

  20% {
    transform: translate(-2%, 1%);
  }

  40% {
    transform: translate(1%, -2%);
  }

  60% {
    transform: translate(2%, 2%);
  }

  80% {
    transform: translate(-1%, -1%);
  }

  100% {
    transform: translate(0, 0);
  }
}


/* =========================================================
   GLOBAL VIGNETTE
   ========================================================= */

body::after {
  content: "";

  position: fixed;
  inset: 0;

  pointer-events: none;
  z-index: 9998;

  background:
    radial-gradient(
      ellipse at center,
      transparent 55%,
      rgba(0, 0, 0, 0.32)
    );
}


/* =========================================================
   MAIN
   ========================================================= */

.obscura {
  min-height: 100vh;
  background: #000;
}


/* =========================================================
   NAV
   ========================================================= */

.obscura-nav {

  position: fixed;

  top: 0;
  left: 0;
  right: 0;

  height: 70px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 4vw;

  border-bottom: 1px solid var(--line-soft);

  background: rgba(0, 0, 0, 0.82);

  backdrop-filter: blur(10px);

  z-index: 100;
}

.obscura-logo {

  font-family: var(--sans);

  font-size: 13px;
  font-weight: 500;

  letter-spacing: 0.02em;
}

.obscura-nav-links {

  display: flex;
  gap: 30px;
}

.obscura-nav-links a {

  color: #fff;

  text-decoration: none;

  font-size: 9px;
  font-weight: 400;

  text-transform: uppercase;
  letter-spacing: 0.18em;

  opacity: 0.65;

  transition:
    opacity 300ms ease;
}

.obscura-nav-links a:hover {
  opacity: 1;
}


/* =========================================================
   HERO
   ========================================================= */

.obscura-hero {

  min-height: 100vh;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  padding:
    150px
    5vw
    8vh;

  position: relative;
}

.obscura-eyebrow {

  margin-bottom: 28px;

  font-size: 9px;

  text-transform: uppercase;
  letter-spacing: 0.25em;

  color: #fff;

  opacity: 0.55;
}


/* THE BIG TITLE */

.obscura-title {

  max-width: 1200px;

  margin: 0;

  font-family: var(--sans);

  font-size: clamp(
    72px,
    12vw,
    190px
  );

  font-weight: 400;

  line-height: 0.82;

  letter-spacing: -0.075em;

  color: #fff;
}

.obscura-title em {
  font-style: normal;
}


/* DESCRIPTION */

.obscura-subtitle {

  max-width: 390px;

  margin-top: 42px;

  color: #fff;

  opacity: 0.55;

  font-size: 11px;

  line-height: 1.7;
}


/* =========================================================
   SECTION HEADER
   ========================================================= */

.archive-header {

  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  padding:
    70px
    5vw
    25px;

  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.archive-header h2 {

  margin: 0;

  font-family: var(--sans);

  font-size: clamp(
    45px,
    6vw,
    85px
  );

  font-weight: 400;

  letter-spacing: -0.06em;

  line-height: 0.9;
}

.archive-header span {

  font-size: 8px;

  text-transform: uppercase;

  letter-spacing: 0.2em;

  opacity: 0.5;
}


/* =========================================================
   GRID
   ========================================================= */

.archive-grid {

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  border-bottom: 1px solid var(--line);
}

.archive-card {

  min-height: 500px;

  padding: 25px;

  border-right: 1px solid var(--line);

  transition:
    background 500ms var(--ease);
}

.archive-card:last-child {
  border-right: none;
}

.archive-card:hover {
  background: #080808;
}


/* =========================================================
   IMAGE
   ========================================================= */

.archive-image {

  width: 100%;
  height: 300px;

  overflow: hidden;

  margin-bottom: 25px;

  background: #111;
}

.archive-image img {

  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    grayscale(100%)
    contrast(1.1)
    brightness(0.75);

  transform: scale(1.01);

  transition:
    transform 900ms var(--ease),
    filter 900ms var(--ease);
}

.archive-card:hover .archive-image img {

  transform: scale(1.06);

  filter:
    grayscale(40%)
    contrast(1.05)
    brightness(0.9);
}


/* =========================================================
   CARD INFORMATION
   ========================================================= */

.archive-meta {

  display: flex;

  justify-content: space-between;

  margin-bottom: 14px;

  font-size: 8px;

  text-transform: uppercase;

  letter-spacing: 0.18em;

  opacity: 0.5;
}

.archive-card h3 {

  margin: 0;

  font-family: var(--sans);

  font-size: 28px;

  font-weight: 400;

  letter-spacing: -0.045em;

  line-height: 1;
}

.archive-card p {

  max-width: 330px;

  margin-top: 15px;

  font-size: 11px;

  line-height: 1.65;

  opacity: 0.5;
}


/* =========================================================
   FEATURE
   ========================================================= */

.archive-feature {

  display: grid;

  grid-template-columns: 1fr 1fr;

  min-height: 85vh;

  border-bottom: 1px solid var(--line);
}

.archive-feature-image {

  min-height: 650px;

  overflow: hidden;

  border-right: 1px solid var(--line);
}

.archive-feature-image img {

  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    grayscale(100%)
    contrast(1.1)
    brightness(0.7);

  transition:
    filter 800ms ease;
}

.archive-feature:hover img {

  filter:
    grayscale(30%)
    contrast(1.05)
    brightness(0.85);
}

.archive-feature-content {

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  padding: 55px;
}

.archive-feature-content h2 {

  margin: 25px 0 0;

  font-family: var(--sans);

  font-size: clamp(
    55px,
    7vw,
    115px
  );

  font-weight: 400;

  letter-spacing: -0.07em;

  line-height: 0.82;
}

.archive-feature-content p {

  max-width: 400px;

  font-size: 12px;

  line-height: 1.8;

  opacity: 0.55;
}


/* =========================================================
   READING PAGE
   ========================================================= */

.obscura-reading {

  max-width: 850px;

  margin: auto;

  padding:
    180px
    30px
    150px;
}

.obscura-reading .category {

  text-align: center;

  font-size: 8px;

  text-transform: uppercase;

  letter-spacing: 0.3em;

  opacity: 0.5;
}

.obscura-reading h1 {

  margin:
    40px 0
    90px;

  text-align: center;

  font-family: var(--sans);

  font-size:
    clamp(60px, 9vw, 125px);

  font-weight: 400;

  letter-spacing: -0.075em;

  line-height: 0.8;
}

.obscura-reading .body {

  max-width: 620px;

  margin: auto;
}

.obscura-reading .body p {

  font-family: var(--serif);

  font-size: 20px;

  line-height: 1.7;

  color: #fff;

  margin-bottom: 35px;
}


/* =========================================================
   QUOTE
   ========================================================= */

.obscura-quote {

  margin:
    110px 0;

  padding:
    50px 0;

  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);

  text-align: center;
}

.obscura-quote p {

  max-width: 720px;

  margin: auto;

  font-family: var(--serif);

  font-size:
    clamp(30px, 4vw, 55px);

  line-height: 0.95;

  font-style: italic;

  color: #fff;
}


/* =========================================================
   FOOTER
   ========================================================= */

.obscura-footer {

  min-height: 280px;

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  padding:
    30px 5vw;

  border-top: 1px solid var(--line);
}

.obscura-footer .mark {

  font-size: 13px;

  font-weight: 500;

  letter-spacing: 0.02em;
}

.obscura-footer small {

  font-size: 8px;

  text-transform: uppercase;

  letter-spacing: 0.2em;

  opacity: 0.5;
}


/* =========================================================
   LINKS
   ========================================================= */

.obscura-link {

  color: #fff;

  text-decoration: none;

  position: relative;
}

.obscura-link::after {

  content: "";

  position: absolute;

  left: 0;
  bottom: -4px;

  width: 100%;
  height: 1px;

  background: #fff;

  transform:
    scaleX(0);

  transform-origin: right;

  transition:
    transform 450ms var(--ease);
}

.obscura-link:hover::after {

  transform:
    scaleX(1);

  transform-origin: left;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: #000;
}

::-webkit-scrollbar-thumb {
  background: #333;
}


/* =========================================================
   SELECTION
   ========================================================= */

::selection {

  background: #fff;
  color: #000;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {

  .obscura-nav {
    height: 60px;
    padding: 0 20px;
  }

  .obscura-nav-links {
    gap: 15px;
  }

  .obscura-nav-links a {
    font-size: 7px;
  }

  .obscura-hero {
    padding:
      120px 20px 50px;
  }

  .obscura-title {
    font-size: 20vw;
    letter-spacing: -0.08em;
  }

  .archive-header {
    padding: 55px 20px 20px;

    flex-direction: column;

    align-items: flex-start;

    gap: 20px;
  }

  .archive-grid {
    grid-template-columns: 1fr;
  }

  .archive-card {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .archive-feature {
    grid-template-columns: 1fr;
  }

  .archive-feature-image {
    min-height: 450px;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .archive-feature-content {
    padding:
      35px 20px 60px;
  }

  .obscura-reading {
    padding:
      130px 20px 100px;
  }

  .obscura-reading .body p {
    font-size: 18px;
  }

  .obscura-footer {
    min-height: 200px;
    padding: 25px 20px;
  }
}
/* =========================================================
   HUMAN MAP
   ========================================================= */

.human-map-page {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: #050505;
  color: #f5f3f0;
  overflow-x: hidden;
}


/* HEADER */

.mapping-header {
  position: relative;
  z-index: 20;

  width: 100%;
  min-height: 110px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 60px;

  box-sizing: border-box;

  border-bottom: 1px solid rgba(245, 243, 240, 0.16);
}


.mapping-logo {
  color: #f5f3f0;
  text-decoration: none;

  font-family: "Courier New", monospace;
  font-size: 22px;
  letter-spacing: 1px;
}


.mapping-nav {
  display: flex;
  align-items: center;
  gap: 48px;
}


.mapping-nav a {
  color: #f5f3f0;
  text-decoration: none;

  font-family: "Courier New", monospace;
  font-size: 17px;

  transition: opacity 0.2s ease;
}


.mapping-nav a:hover {
  opacity: 0.5;
}


/* MAIN */

.human-map-main {
  position: relative;

  min-height: calc(100vh - 110px);

  overflow: hidden;
}


/* HEADING */

.human-map-heading {
  position: relative;
  z-index: 5;

  padding: 70px 60px 0;
}


.mapping-index {
  margin-bottom: 65px;

  font-family: "Courier New", monospace;
  font-size: 17px;
  letter-spacing: 1px;
}


.human-map-heading h1 {
  margin: 0;

  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(100px, 13vw, 210px);
  font-weight: 400;
  line-height: 0.8;
  letter-spacing: -9px;
}


.human-map-heading p {
  margin: 55px 0 0;

  max-width: 650px;

  font-family: "Courier New", monospace;
  font-size: 22px;
  line-height: 1.9;
  letter-spacing: 1px;
}


/* MAP FIELD */

.map-field {
  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(245, 243, 240, 0.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(245, 243, 240, 0.045) 1px,
      transparent 1px
    );

  background-size: 115px 115px;
}


/* PERSON */

.map-person {
  position: absolute;

  transform: translate(-50%, -50%);

  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 0;

  background: none;
  border: none;

  color: #f5f3f0;

  cursor: pointer;

  pointer-events: auto;

  font-family: "Courier New", monospace;

  white-space: nowrap;
}


.map-person-dot {
  display: block;

  width: 17px;
  height: 17px;

  margin-bottom: 10px;

  border: 1px solid #f5f3f0;
  border-radius: 50%;

  transition:
    background 0.2s ease,
    transform 0.2s ease;
}


.map-person:hover .map-person-dot {
  background: #f5f3f0;
  transform: scale(1.2);
}


.map-person-name {
  display: block;

  font-size: 16px;
  letter-spacing: 1px;
}


.map-person-meta {
  display: block;

  margin-top: 4px;

  font-size: 12px;

  opacity: 0.55;
}


/* PROFILE PANEL */

.person-profile {
  position: fixed;

  z-index: 100;

  top: 145px;
  right: 50px;

  width: min(540px, calc(100vw - 100px));
  max-height: calc(100vh - 190px);

  box-sizing: border-box;

  overflow-y: auto;

  padding: 55px;

  background: #f0f0f4;
  color: #090909;

  border: 1px solid rgba(0, 0, 0, 0.15);
}


.person-profile.hidden {
  display: none;
}


.profile-close {
  position: absolute;

  top: 25px;
  right: 28px;

  border: 0;
  background: transparent;

  color: #111;

  font-family: "Courier New", monospace;
  font-size: 15px;

  cursor: pointer;
}


.profile-content {
  width: 100%;
}


.profile-number,
.person-label {
  font-family: "Courier New", monospace;
  font-size: 13px;
  letter-spacing: 2px;
}


.person-profile h2 {
  margin: 55px 0 15px;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 70px;
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -4px;
}


.profile-meta {
  font-family: "Courier New", monospace;
  font-size: 15px;
}


.profile-description {
  margin-top: 45px;

  padding-top: 30px;

  border-top: 1px solid rgba(0, 0, 0, 0.2);

  font-family: "Courier New", monospace;
  font-size: 17px;
  line-height: 1.7;
}


.profile-interests {
  margin-top: 45px;
}


.profile-interests > div {
  margin-bottom: 15px;

  font-family: "Courier New", monospace;
  font-size: 12px;
  letter-spacing: 2px;
  opacity: 0.55;
}


.profile-interests p {
  margin: 0;

  font-family: "Courier New", monospace;
  font-size: 16px;
  line-height: 1.7;
}


/* FOOTER */

.map-footer {
  position: absolute;

  z-index: 10;

  left: 60px;
  right: 60px;
  bottom: 28px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  pointer-events: none;

  font-family: "Courier New", monospace;
  font-size: 14px;
  letter-spacing: 1px;

  opacity: 0.75;
}


.map-footer span:last-child {
  text-align: right;
}


/* MOBILE */

@media (max-width: 800px) {

  .mapping-header {
    min-height: 85px;
    padding: 0 25px;
  }

  .mapping-nav {
    gap: 16px;
  }

  .mapping-nav a {
    font-size: 12px;
  }

  .human-map-heading {
    padding: 45px 25px 0;
  }

  .mapping-index {
    margin-bottom: 45px;
  }

  .human-map-heading h1 {
    font-size: 25vw;
    letter-spacing: -5px;
  }

  .human-map-heading p {
    margin-top: 40px;
    font-size: 16px;
  }

  .map-footer {
    left: 25px;
    right: 25px;

    font-size: 10px;
  }

  .person-profile {
    top: 100px;
    right: 20px;
    left: 20px;

    width: auto;

    max-height: calc(100vh - 120px);

    padding: 40px 30px;
  }

  .person-profile h2 {
    font-size: 55px;
  }

}
/* human map bottom boxes fix */

.map-actions {
  position: absolute !important;

  left: 60px !important;
  right: 60px !important;
  bottom: 100px !important;

  display: grid !important;
  grid-template-columns: 1fr 1fr !important;

  gap: 24px !important;

  z-index: 20 !important;
}

.map-action {
  min-height: 105px !important;

  box-sizing: border-box !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  padding: 0 28px !important;

  border: 1px solid rgba(255, 255, 255, 0.45) !important;

  color: white !important;
  text-decoration: none !important;

  font-family: "Courier New", monospace !important;
  font-size: 16px !important;
}

.map-action:hover {
  background: white !important;
  color: black !important;
}


/* smaller screens */

@media (max-width: 800px) {

  .map-actions {
    left: 25px !important;
    right: 25px !important;
    bottom: 80px !important;

    grid-template-columns: 1fr !important;

    gap: 12px !important;
  }

  .map-action {
    min-height: 75px !important;
  }

}
/* human map bottom boxes fix */

.map-actions {
  position: absolute !important;

  left: 60px !important;
  right: 60px !important;
  bottom: 100px !important;

  display: grid !important;
  grid-template-columns: 1fr 1fr !important;

  gap: 24px !important;

  z-index: 20 !important;
}

.map-action {
  min-height: 105px !important;

  box-sizing: border-box !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  padding: 0 28px !important;

  border: 1px solid rgba(255, 255, 255, 0.45) !important;

  color: white !important;
  text-decoration: none !important;

  font-family: "Courier New", monospace !important;
  font-size: 16px !important;
}

.map-action:hover {
  background: white !important;
  color: black !important;
}

@media (max-width: 800px) {

  .map-actions {
    left: 25px !important;
    right: 25px !important;
    bottom: 80px !important;

    grid-template-columns: 1fr !important;

    gap: 12px !important;
  }

  .map-action {
    min-height: 75px !important;
  }

}
/* ========================================
   join / waitlist
   ======================================== */

.join-page {
  background: #000;
  color: #f5f5f5;
  min-height: 100vh;
}

.join-main {
  min-height: calc(100vh - 90px);
  padding: 80px 60px 60px;
  box-sizing: border-box;
}

.join-index {
  font-family: "Courier New", monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: lowercase;
  opacity: 0.55;
  margin-bottom: 55px;
}

.join-intro {
  max-width: 900px;
}

.join-intro h1 {
  margin: 0;

  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(64px, 9vw, 140px);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -4px;
}

.join-intro p {
  max-width: 560px;

  margin: 45px 0 0;

  font-family: "Courier New", monospace;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.3px;
}


/* form */

.join-form-section {
  max-width: 900px;

  margin-top: 120px;

  border-top: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);

  padding: 45px 0 55px;
}

.join-form-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;

  gap: 30px;

  margin-bottom: 55px;
}

.join-form-heading p {
  margin: 0;

  font-family: "Courier New", monospace;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: lowercase;
}

.join-form-heading span {
  font-family: "Courier New", monospace;
  font-size: 11px;
  opacity: 0.45;
}


/* fields */

.join-field {
  display: grid;
  grid-template-columns: 230px 1fr;

  border-top: 1px solid rgba(255, 255, 255, 0.18);

  min-height: 80px;
}

.join-field label {
  padding: 27px 20px 27px 0;

  font-family: "Courier New", monospace;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: lowercase;

  opacity: 0.65;
}

.join-field input,
.join-field select,
.join-field textarea {
  width: 100%;

  box-sizing: border-box;

  border: 0;
  outline: 0;

  background: transparent;

  color: #f5f5f5;

  font-family: "Courier New", monospace;
  font-size: 14px;

  padding: 27px 0;

  resize: vertical;
}

.join-field input::placeholder,
.join-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.join-field select {
  appearance: none;
  cursor: pointer;
}

.join-field select option {
  background: #000;
  color: #fff;
}

.join-field textarea {
  min-height: 130px;
  line-height: 1.7;
}


/* submit */

.join-submit {
  margin-top: 35px;

  width: 100%;
  min-height: 78px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 25px;

  border: 1px solid rgba(255, 255, 255, 0.55);

  background: transparent;

  color: #f5f5f5;

  font-family: "Courier New", monospace;
  font-size: 13px;
  letter-spacing: 1px;

  cursor: pointer;

  transition:
    background 0.25s ease,
    color 0.25s ease;
}

.join-submit:hover {
  background: #fff;
  color: #000;
}


/* success */

.waitlist-success {
  padding: 45px 0 10px;
}

.waitlist-success p {
  margin: 0 0 12px;

  font-family: "Playfair Display", Georgia, serif;
  font-size: 42px;
  font-weight: 400;
}

.waitlist-success span {
  font-family: "Courier New", monospace;
  font-size: 12px;
  opacity: 0.55;
}

.hidden {
  display: none !important;
}


/* footer */

.join-footer {
  max-width: 900px;

  display: flex;
  justify-content: space-between;

  margin-top: 35px;

  font-family: "Courier New", monospace;
  font-size: 10px;

  letter-spacing: 1px;

  opacity: 0.35;
}


/* mobile */

@media (max-width: 700px) {

  .join-main {
    padding: 55px 25px 40px;
  }

  .join-intro h1 {
    font-size: clamp(58px, 17vw, 100px);
    letter-spacing: -2px;
  }

  .join-intro p {
    font-size: 13px;
    line-height: 1.7;
  }

  .join-form-section {
    margin-top: 80px;
  }

  .join-form-heading {
    display: block;
  }

  .join-form-heading span {
    display: block;
    margin-top: 12px;
  }

  .join-field {
    display: block;
  }

  .join-field label {
    display: block;
    padding: 22px 0 0;
  }

  .join-field input,
  .join-field select,
  .join-field textarea {
    padding: 15px 0 22px;
  }

  .join-footer {
    display: block;
  }

  .join-footer span {
    display: block;
    margin-bottom: 8px;
  }

}
/* =========================================
   HUMAN MAP
   ========================================= */

.human-map-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;

  display: flex;
  align-items: center;

  padding: 0 60px;

  z-index: 1000;

  pointer-events: none;
}

.human-map-header .mapping-logo {
  pointer-events: auto;

  color: #eeeeee;
  text-decoration: none;

  font-family: monospace;
  font-size: 18px;
  letter-spacing: 0.08em;
}


/* remove all old map-page heading material */

.human-map-page .mapping-nav,
.mapping-page .mapping-nav,
.human-map-page .mapping-cross {
  display: none !important;
}


/* actual map */

#map-field {
  position: fixed;

  inset: 0;

  width: 100vw;
  height: 100vh;

  margin: 0;
  padding: 0;

  overflow: hidden;

  background: #050505;
}


/* canvas */

.network-canvas {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  cursor: crosshair;
}


/* hide the old map title/content if they still exist */

.human-map-heading,
.mapping-content,
.mapping-index,
.mapping-description,
.mapping-actions,
.mapping-dots {
  display: none !important;
}


/* profile popup */

.person-profile.hidden {
  display: none !important;
}

.person-profile {
  position: fixed;

  right: 60px;
  bottom: 60px;

  width: 320px;

  padding: 28px;

  background: rgba(8, 8, 8, 0.92);

  border: 1px solid rgba(255,255,255,0.25);

  color: #eeeeee;

  z-index: 2000;
}

.person-profile h2 {
  margin: 12px 0 4px;

  font-family: monospace;
  font-size: 24px;
  font-weight: 400;
}

.person-profile p {
  font-family: monospace;
}

.profile-close {
  position: absolute;

  top: 15px;
  right: 18px;

  background: none;
  border: none;

  color: #eeeeee;

  font-family: monospace;

  cursor: pointer;
}
/* =========================================================
   WINDERVALE HUMAN MAP — VISUAL OVERRIDE
   This overrides the old constellation/grid styling.
   ========================================================= */

body.human-map-page {
    margin: 0;
    padding: 0;

    min-height: 100vh;

    background:
        radial-gradient(
            ellipse at 50% 45%,
            rgba(255,255,255,0.035),
            transparent 55%
        ),
        #080706;

    color: #eee8dd;

    overflow: hidden;

    font-family:
        "Courier New",
        Courier,
        monospace;
}


/* ---------------------------------------------------------
   MAP FIELD
   --------------------------------------------------------- */

body.human-map-page .human-map-main {
    position: relative;

    width: 100vw;
    height: 100vh;

    min-height: 100vh;

    overflow: hidden;

    background: transparent;
}


body.human-map-page .map-field {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    pointer-events: auto;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(255,255,255,0.025),
            transparent 52%
        );
}


/* remove the old technical grid */

body.human-map-page .map-field::before {
    display: none !important;
}


/* ---------------------------------------------------------
   SUBTLE PAPER / GRAIN
   --------------------------------------------------------- */

body.human-map-page .map-field::after {

    content: "";

    position: absolute;

    inset: -50%;

    pointer-events: none;

    opacity: 0.16;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");

    transform: rotate(4deg);

    mix-blend-mode: screen;
}


/* ---------------------------------------------------------
   PERSON WORLD
   --------------------------------------------------------- */

body.human-map-page .person-world {

    position: absolute;

    width: 1px;
    height: 1px;

    transform: translate(-50%, -50%);

    z-index: 5;
}


/* ---------------------------------------------------------
   PERSON
   --------------------------------------------------------- */

body.human-map-page .map-person {

    position: absolute;

    left: 0;
    top: 0;

    transform:
        translate(-50%, -50%);

    z-index: 20;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-width: 120px;

    padding: 14px 18px;

    border: 0;

    background: transparent;

    color: #eee8dd;

    cursor: pointer;

    font-family:
        "Courier New",
        Courier,
        monospace;

    transition:
        transform 0.35s ease,
        opacity 0.35s ease;
}


body.human-map-page .map-person:hover {

    transform:
        translate(-50%, -50%)
        scale(1.08);

}


/* ---------------------------------------------------------
   PERSON CIRCLE
   --------------------------------------------------------- */

body.human-map-page .map-person-dot {

    display: block;

    width: 24px;
    height: 24px;

    margin: 0;

    border: 1px solid rgba(238,232,221,0.9);

    border-radius: 50%;

    background: rgba(8,7,6,0.8);

    box-shadow:
        0 0 0 1px rgba(238,232,221,0.08),
        0 0 30px rgba(238,232,221,0.05);

    transition:
        transform 0.4s ease,
        background 0.4s ease,
        box-shadow 0.4s ease;
}


body.human-map-page .map-person:hover .map-person-dot {

    transform: scale(1.35);

    background: #eee8dd;

    box-shadow:
        0 0 0 8px rgba(238,232,221,0.035),
        0 0 40px rgba(238,232,221,0.12);

}


/* ---------------------------------------------------------
   NAME
   --------------------------------------------------------- */

body.human-map-page .map-person-name {

    display: block;

    color: #eee8dd;

    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size: 15px;

    line-height: 1.1;

    letter-spacing: 0.08em;

    white-space: nowrap;

    opacity: 0.88;

    transition:
        opacity 0.3s ease;
}


body.human-map-page .map-person:hover .map-person-name {

    opacity: 1;

}


/* ---------------------------------------------------------
   LOCATION
   --------------------------------------------------------- */

body.human-map-page .map-person-meta {

    display: block;

    margin: 0;

    color: rgba(238,232,221,0.42);

    font-size: 11px;

    letter-spacing: 0.12em;

    opacity: 1;
}


/* ---------------------------------------------------------
   FRAGMENTS
   --------------------------------------------------------- */

body.human-map-page .map-fragment {

    position: absolute;

    left: 0;
    top: 0;

    transform:
        translate(
            var(--fragment-x),
            var(--fragment-y)
        )
        rotate(var(--fragment-rotation, 0deg));

    z-index: 8;

    padding: 4px 7px;

    border: 0;

    background: transparent;

    color: rgba(238,232,221,0.58);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 13px;

    font-style: italic;

    letter-spacing: 0.025em;

    white-space: nowrap;

    cursor: pointer;

    transition:
        color 0.35s ease,
        opacity 0.35s ease,
        transform 0.35s ease;
}


body.human-map-page .map-fragment:hover {

    color: #eee8dd;

    transform:
        translate(
            var(--fragment-x),
            var(--fragment-y)
        )
        rotate(var(--fragment-rotation, 0deg))
        scale(1.08);

}


/* Different fragment types */

body.human-map-page .map-fragment[data-kind="discipline"] {

    font-family:
        "Courier New",
        monospace;

    font-style: normal;

    text-transform: lowercase;

    letter-spacing: 0.08em;

}


body.human-map-page .map-fragment[data-kind="interest"] {

    font-family:
        Georgia,
        serif;

    font-style: italic;

}


body.human-map-page .map-fragment[data-kind="looking"] {

    opacity: 0.42;

}


body.human-map-page .map-fragment[data-kind="offer"] {

    opacity: 0.62;

}


/* ---------------------------------------------------------
   CONNECTION LINES
   --------------------------------------------------------- */

body.human-map-page .map-lines {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 3;

    overflow: visible;

    pointer-events: none;
}


body.human-map-page .world-line {

    stroke:
        rgba(238,232,221,0.17);

    stroke-width:
        0.08;

    vector-effect:
        non-scaling-stroke;

    fill: none;
}


/* ---------------------------------------------------------
   LITTLE IMPERFECT MARK
   --------------------------------------------------------- */

body.human-map-page .world-marker {

    position: absolute;

    left: 0;
    top: 0;

    transform:
        translate(-50%, -50%)
        translate(38px, -32px);

    z-index: 12;

    color:
        rgba(238,232,221,0.42);

    font-family:
        Georgia,
        serif;

    font-size: 18px;

    pointer-events: none;

}


/* ---------------------------------------------------------
   REMOVE OLD HEADING / FOOTER / NAV FROM MAP
   --------------------------------------------------------- */

body.human-map-page .mapping-header,
body.human-map-page .human-map-heading,
body.human-map-page .mapping-nav,
body.human-map-page .mapping-index,
body.human-map-page .mapping-footer,
body.human-map-page .map-footer {

    display: none !important;

}


/* ---------------------------------------------------------
   LOGO
   --------------------------------------------------------- */

body.human-map-page .human-map-logo {

    position: fixed;

    left: 48px;
    top: 38px;

    z-index: 100;

    color:
        rgba(238,232,221,0.82);

    text-decoration: none;

    font-family:
        "Courier New",
        monospace;

    font-size: 17px;

    letter-spacing: 0.08em;
}


/* ---------------------------------------------------------
   PROFILE PANEL
   --------------------------------------------------------- */

body.human-map-page .person-profile {

    position: fixed;

    z-index: 200;

    top: 32px;
    right: 32px;

    width: min(
        500px,
        calc(100vw - 64px)
    );

    max-height:
        calc(100vh - 64px);

    box-sizing: border-box;

    overflow-y: auto;

    padding: 48px;

    background:
        rgba(235,230,220,0.97);

    color: #11100e;

    border:
        1px solid rgba(17,16,14,0.18);

    box-shadow:
        0 30px 100px rgba(0,0,0,0.35);

}


body.human-map-page .person-profile.hidden {

    display: none !important;

}


body.human-map-page .profile-close {

    position: absolute;

    top: 22px;
    right: 24px;

    border: 0;

    background: transparent;

    color: #11100e;

    font-family:
        "Courier New",
        monospace;

    font-size: 13px;

    cursor: pointer;

}


body.human-map-page .profile-number {

    font-family:
        "Courier New",
        monospace;

    font-size: 11px;

    letter-spacing: 0.16em;

    opacity: 0.55;

}


body.human-map-page .person-profile h2 {

    margin:
        55px 0 14px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(48px, 7vw, 78px);

    font-weight: 400;

    line-height: 0.9;

    letter-spacing:
        -0.045em;

}


body.human-map-page .profile-meta {

    padding-bottom: 25px;

    border-bottom:
        1px solid rgba(17,16,14,0.18);

    font-family:
        "Courier New",
        monospace;

    font-size: 12px;

    letter-spacing: 0.08em;

}


body.human-map-page .profile-description {

    margin-top: 32px;

    font-family:
        Georgia,
        serif;

    font-size: 18px;

    line-height: 1.55;

}


body.human-map-page .profile-interests {

    margin-top: 38px;

}


body.human-map-page .profile-interests > div {

    margin-bottom: 10px;

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;

    letter-spacing: 0.14em;

    opacity: 0.5;

}


body.human-map-page .profile-interests p {

    margin: 0;

    font-family:
        Georgia,
        serif;

    font-size: 15px;

    line-height: 1.6;

}


body.human-map-page .request-introduction {

    width: 100%;

    margin-top: 42px;

    padding: 17px 20px;

    border:
        1px solid #11100e;

    background: transparent;

    color: #11100e;

    font-family:
        "Courier New",
        monospace;

    font-size: 11px;

    letter-spacing: 0.08em;

    cursor: pointer;

}


body.human-map-page .request-introduction:hover {

    background: #11100e;

    color: #eee8dd;

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 800px) {

    body.human-map-page .human-map-logo {

        left: 22px;
        top: 24px;

        font-size: 14px;

    }


    body.human-map-page .map-person-name {

        font-size: 12px;

    }


    body.human-map-page .map-person-meta {

        font-size: 9px;

    }


    body.human-map-page .map-fragment {

        font-size: 10px;

    }


    body.human-map-page .person-profile {

        top: 16px;
        right: 16px;

        width:
            calc(100vw - 32px);

        max-height:
            calc(100vh - 32px);

        padding: 32px;

    }

}
/* ============================================================
   WINDERVALE — HUMAN MAPPING
   CHARCOAL / GRAPHITE / ARCHIVAL VISUAL SYSTEM
   ============================================================ */


/* ============================================================
   RESET
   ============================================================ */

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    overflow: hidden;
    background: #171615;
    color: #e8e2d7;

    font-family:
        Georgia,
        "Times New Roman",
        serif;
}


/* ============================================================
   CHARCOAL FIELD
   ============================================================ */

.map-field {

    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;

    overflow: hidden;

    background:

        /* warm charcoal glow */
        radial-gradient(
            ellipse at 48% 42%,
            rgba(82, 70, 60, 0.18) 0%,
            rgba(34, 31, 29, 0.10) 38%,
            transparent 72%
        ),

        /* faint cool graphite */
        radial-gradient(
            ellipse at 88% 18%,
            rgba(55, 67, 67, 0.12),
            transparent 45%
        ),

        /* deep charcoal */
        #171615;
}


/* ============================================================
   CHARCOAL GRAIN
   ============================================================ */

.map-field::before {

    content: "";

    position: absolute;
    inset: -30%;

    z-index: 1;

    pointer-events: none;

    opacity: 0.30;

    background-image:

        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.75'/%3E%3C/svg%3E");

    mix-blend-mode: screen;

    transform: rotate(1deg);
}


/* ============================================================
   SECONDARY FINE GRAIN
   ============================================================ */

.map-field::after {

    content: "";

    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    opacity: 0.12;

    background:

        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.018) 0px,
            rgba(255,255,255,0.018) 1px,
            transparent 1px,
            transparent 4px
        );
}


/* ============================================================
   LOGO
   ============================================================ */

.human-map-logo {

    position: fixed;

    top: 32px;
    left: 42px;

    z-index: 100;

    color: #e8e2d7;

    text-decoration: none;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 18px;

    letter-spacing: 0.08em;

    opacity: 0.92;

    transition:
        color 0.3s ease,
        opacity 0.3s ease;
}

.human-map-logo:hover {

    color: #b6c7bd;

    opacity: 1;
}


/* ============================================================
   SMALL ARCHIVAL HEADER
   ============================================================ */

.map-field > .mapping-network {

    z-index: 4;
}


/* ============================================================
   MAP PEOPLE
   ============================================================ */

.map-person {

    position: absolute;

    transform:
        translate(-50%, -50%);

    z-index: 20;

    border: 0;

    padding: 0;

    margin: 0;

    background: transparent;

    color: #e8e2d7;

    cursor: pointer;

    text-align: center;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    transition:
        transform 0.5s cubic-bezier(.2,.8,.2,1),
        opacity 0.5s ease;
}


.map-person:hover {

    transform:
        translate(-50%, -50%)
        scale(1.06);
}


/* ============================================================
   PERSON MARK
   ============================================================ */

.map-person-dot {

    position: relative;

    display: block;

    width: 13px;
    height: 13px;

    margin:
        0 auto 15px;

    border:
        1px solid
        rgba(218, 210, 197, 0.78);

    border-radius: 50%;

    background:
        rgba(218, 210, 197, 0.04);

    box-shadow:

        0 0 0 1px
        rgba(190, 170, 145, 0.08),

        0 0 22px
        rgba(190, 170, 145, 0.05);

    transition:
        background 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.35s ease;
}


.map-person:hover .map-person-dot {

    background:
        #c7a889;

    border-color:
        #d7b99a;

    box-shadow:

        0 0 0 6px
        rgba(199, 168, 137, 0.06),

        0 0 24px
        rgba(199, 168, 137, 0.22);

    transform:
        scale(1.15);
}


/* ============================================================
   PERSON NAME
   ============================================================ */

.map-person-name {

    display: block;

    white-space: nowrap;

    font-size: 17px;

    line-height: 1.15;

    letter-spacing: 0.035em;

    color:
        rgba(232, 226, 215, 0.90);

    transition:
        color 0.3s ease;
}


.map-person:hover .map-person-name {

    color:
        #d8c3a9;
}


/* ============================================================
   PERSON LOCATION
   ============================================================ */

.map-person-meta {

    display: block;

    margin-top: 7px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 8px;

    line-height: 1;

    letter-spacing: 0.19em;

    text-transform: uppercase;

    color:
        rgba(205, 199, 189, 0.32);
}


/* ============================================================
   SVG / HAND DRAWN ELEMENTS
   ============================================================ */

.mapping-network {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    z-index: 3;

    opacity: 0.42;
}


/* ============================================================
   PROFILE PANEL
   ============================================================ */

.person-profile {

    position: fixed;

    top: 0;
    right: 0;

    width: min(570px, 94vw);
    height: 100vh;

    z-index: 300;

    overflow-y: auto;

    padding:
        92px 68px 70px;

    color: #e8e2d7;

    background:

        radial-gradient(
            ellipse at 25% 20%,
            rgba(95, 79, 65, 0.14),
            transparent 55%
        ),

        #1a1917;

    border-left:
        1px solid
        rgba(221, 211, 196, 0.14);

    box-shadow:
        -35px 0 100px
        rgba(0, 0, 0, 0.48);

    transform:
        translateX(0);

    opacity: 1;

    transition:
        transform 0.55s cubic-bezier(.2,.75,.2,1),
        opacity 0.4s ease;
}


.person-profile::before {

    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.20;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}


.person-profile.hidden {

    transform:
        translateX(100%);

    opacity: 0;

    pointer-events: none;
}


/* ============================================================
   CLOSE
   ============================================================ */

.profile-close {

    position: absolute;

    top: 30px;
    right: 34px;

    padding: 8px;

    border: 0;

    background: transparent;

    color:
        rgba(232, 226, 215, 0.48);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 9px;

    letter-spacing: 0.16em;

    text-transform: lowercase;

    cursor: pointer;

    transition:
        color 0.3s ease;
}


.profile-close:hover {

    color:
        #d7b99a;
}


/* ============================================================
   PROFILE IDENTIFIER
   ============================================================ */

.profile-number {

    margin-bottom: 52px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 8px;

    letter-spacing: 0.22em;

    color:
        rgba(191, 177, 160, 0.42);
}


/* ============================================================
   PROFILE NAME
   ============================================================ */

.profile-heading h2 {

    margin: 0;

    max-width: 440px;

    font-size: 43px;

    line-height: 0.98;

    font-weight: normal;

    letter-spacing: -0.025em;

    color:
        #ece5d9;
}


.profile-meta {

    margin-top: 15px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 9px;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    color:
        rgba(190, 194, 187, 0.42);
}


/* ============================================================
   DESCRIPTION
   ============================================================ */

.profile-description {

    margin-top: 40px;

    font-size: 19px;

    line-height: 1.65;

    color:
        rgba(232, 226, 215, 0.72);
}


/* ============================================================
   INFORMATION SECTIONS
   ============================================================ */

.profile-interests {

    position: relative;

    margin-top: 42px;

    padding-top: 17px;

    border-top:
        1px solid
        rgba(215, 204, 188, 0.12);
}


.profile-label {

    margin-bottom: 13px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 8px;

    letter-spacing: 0.20em;

    text-transform: uppercase;

    color:
        rgba(201, 190, 174, 0.40);
}


.profile-interests p {

    margin: 0;

    max-width: 420px;

    font-size: 17px;

    line-height: 1.6;

    color:
        rgba(232, 226, 215, 0.72);
}


/* ============================================================
   WHY YOU ARE SEEING THEM
   ============================================================ */

.profile-reasons {

    margin-top: 45px;

    padding-top: 17px;

    border-top:
        1px solid
        rgba(215, 204, 188, 0.12);
}


.profile-reasons li {

    margin-bottom: 9px;

    color:
        rgba(214, 207, 195, 0.60);
}


/* ============================================================
   REQUEST
   ============================================================ */

.request-introduction {

    position: relative;

    margin-top: 54px;

    padding:
        14px 19px;

    border:
        1px solid
        rgba(199, 168, 137, 0.52);

    background:
        rgba(199, 168, 137, 0.03);

    color:
        #d4b694;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 8px;

    letter-spacing: 0.19em;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        background 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease;
}


.request-introduction:hover {

    background:
        #c7a889;

    color:
        #171615;

    border-color:
        #c7a889;
}


.request-introduction:disabled {

    opacity: 0.42;

    cursor: default;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 700px) {

    .human-map-logo {

        top: 22px;
        left: 23px;

        font-size: 16px;
    }


    .map-person-name {

        font-size: 14px;
    }


    .map-person-meta {

        font-size: 7px;
    }


    .person-profile {

        width: 100%;

        padding:
            78px 28px 55px;
    }


    .profile-heading h2 {

        font-size: 35px;
    }


    .profile-description {

        font-size: 17px;
    }
}
/* =========================================================
   WINDERVALE — PAGE SCROLL FIX
   Keep homepage / human map behaviour intact.
   Allow normal scrolling on content pages.
   ========================================================= */

/* Normal document scrolling */
html,
body {
    min-height: 100%;
}

/* Content pages */
.profile-create-page,
.join-page,
.library-page,
.projects-page,
.grants-page,
.profile-page {
    min-height: 100vh;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Make sure the main content is allowed to grow */
.profile-create,
.join-main,
.library-main,
.projects-main,
.grants-main,
.profile-main {
    height: auto;
    min-height: 100vh;
}

/* =========================================================
   IMPORTANT:
   The homepage remains a fixed canvas.
   The human map remains a fixed visual field.
   ========================================================= */

#canvas {
    height: 100vh;
    overflow: hidden;
}

/* Human map intentionally stays full-screen */
.human-map-page {
    overflow: hidden;
}

.human-map-main {
    overflow: hidden;
}

#map-field {
    overflow: hidden;
}
/* =========================================================
   WINDERVALE HOMEPAGE — FINAL VISUAL LAYER
   DESIGN ONLY
   DO NOT REMOVE / CHANGE HOMEPAGE JAVASCRIPT
   ========================================================= */


/* ---------------------------------------------------------
   HOMEPAGE BODY
   Only applies to the page containing #canvas
   --------------------------------------------------------- */

body:has(#canvas) {
    margin: 0;
    padding: 0;
    background: #000;
    color: #f2eee7;
    overflow: hidden;
}


/* ---------------------------------------------------------
   BLACK CANVAS
   --------------------------------------------------------- */

#canvas {
    position: relative;
    width: 100vw;
    height: 100vh;
    min-height: 100vh;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(255,255,255,0.025),
            transparent 42%
        ),
        #000;

    isolation: isolate;
}


/* ---------------------------------------------------------
   VERY SUBTLE FILM / PAPER GRAIN
   --------------------------------------------------------- */

#canvas::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    z-index: 0;

    opacity: 0.16;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='.55'/%3E%3C/svg%3E");

    mix-blend-mode: screen;
}


/* ---------------------------------------------------------
   SOFT EDGE VIGNETTE
   --------------------------------------------------------- */

#canvas::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    z-index: 1;

    background:
        radial-gradient(
            ellipse at center,
            transparent 48%,
            rgba(0,0,0,0.42) 100%
        );
}


/* ---------------------------------------------------------
   WINDERVALE LABS
   --------------------------------------------------------- */

#canvas .site-mark {
    position: absolute;

    top: 28px;
    left: 34px;

    z-index: 500;

    display: flex;
    align-items: center;
    gap: 24px;

    pointer-events: auto;
}


#canvas .site-name {
    color: rgba(245,240,232,0.86);

    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size: 11px;

    letter-spacing: 0.22em;

    text-transform: lowercase;

    white-space: nowrap;
}


/* ---------------------------------------------------------
   LOGIN
   --------------------------------------------------------- */

#canvas .login-link {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 7px 11px;

    color: rgba(245,240,232,0.58);

    border: 1px solid rgba(245,240,232,0.22);

    text-decoration: none;

    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size: 8px;

    letter-spacing: 0.18em;

    transition:
        color 220ms ease,
        border-color 220ms ease,
        background 220ms ease,
        transform 220ms ease;
}


#canvas .login-link:hover {
    color: #050505;

    background: #eee8df;

    border-color: #eee8df;

    transform: translateY(-2px);
}


/* ---------------------------------------------------------
   OBJECTS / PAPER PIECES
   --------------------------------------------------------- */

#canvas .obj {
    position: absolute;

    z-index: 20;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    justify-content: space-between;

    gap: 28px;

    box-sizing: border-box;

    padding: 25px 24px;

    border: 1px solid rgba(30,25,20,0.16);

    border-radius: 0;

    outline: none;

    cursor: pointer;

    text-align: left;

    transform:
        translate3d(
            var(--tx, 0),
            var(--ty, 0),
            0
        )
        rotate(var(--rot, 0deg))
        scale(var(--scale, 1));

    transform-origin: center center;

    transition:
        transform 360ms cubic-bezier(.2,.8,.2,1),
        box-shadow 300ms ease,
        filter 300ms ease;

    box-shadow:
        0 22px 55px rgba(0,0,0,0.55);

    overflow: visible;
}


/* ---------------------------------------------------------
   PAPER TEXTURE
   --------------------------------------------------------- */

#canvas .obj::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.22;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)' opacity='.22'/%3E%3C/svg%3E");

    mix-blend-mode: multiply;
}


/* ---------------------------------------------------------
   HUMAN MAP — LARGEST / MAIN PIECE
   --------------------------------------------------------- */

#canvas .obj.people {
    width: 330px;
    min-width: 330px;
    min-height: 205px;

    padding: 31px 29px;

    background:
        linear-gradient(
            135deg,
            #eee8dc,
            #dcd4c6
        );

    color: #171512;

    border-color: rgba(255,255,255,0.2);

    box-shadow:
        0 28px 70px rgba(0,0,0,0.58);
}


#canvas .obj.people .frag {
    font-family:
        "Arial Narrow",
        "Helvetica Neue",
        Arial,
        sans-serif;

    font-size: 43px;

    font-weight: 400;

    line-height: 0.88;

    letter-spacing: -0.055em;

    text-transform: lowercase;
}


#canvas .obj.people .sub {
    color: rgba(23,21,18,0.62);
}


/* ---------------------------------------------------------
   OBSCURA LIBRARY
   --------------------------------------------------------- */

#canvas .obj.library {
    width: 270px;
    min-width: 270px;
    min-height: 180px;

    background:
        #f4eee3;

    color: #181613;

    box-shadow:
        0 25px 60px rgba(0,0,0,0.55);
}


#canvas .obj.library .frag {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 31px;

    font-weight: 400;

    line-height: 0.94;

    letter-spacing: -0.045em;
}


#canvas .obj.library .sub {
    color: rgba(24,22,19,0.54);
}


/* little archival registration mark */

#canvas .obj.library::before {
    content: "OBS / 01";

    position: absolute;

    right: 17px;
    top: 16px;

    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size: 7px;

    letter-spacing: 0.16em;

    color: rgba(24,22,19,0.42);

    pointer-events: none;
}


/* ---------------------------------------------------------
   GRANTS
   --------------------------------------------------------- */

#canvas .obj.grant {
    width: 245px;
    min-width: 245px;
    min-height: 165px;

    background:
        #171513;

    color: #eee8df;

    border-color:
        rgba(238,232,223,0.18);

    box-shadow:
        0 26px 60px rgba(0,0,0,0.62);
}


#canvas .obj.grant .frag {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 34px;

    line-height: 0.92;

    letter-spacing: -0.045em;
}


#canvas .obj.grant .sub {
    color: rgba(238,232,223,0.54);
}


/* tiny grant notation */

#canvas .obj.grant::before {
    content: "OPEN CALL / 2026";

    position: absolute;

    right: 18px;
    top: 17px;

    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size: 7px;

    letter-spacing: 0.13em;

    color: rgba(238,232,223,0.35);

    pointer-events: none;
}


/* ---------------------------------------------------------
   JOIN
   --------------------------------------------------------- */

#canvas .obj.join {
    width: 225px;
    min-width: 225px;
    min-height: 145px;

    background:
        #eee8dc;

    color: #171512;

    box-shadow:
        0 25px 60px rgba(0,0,0,0.58);
}


#canvas .obj.join .frag {
    font-family:
        "Arial Narrow",
        "Helvetica Neue",
        Arial,
        sans-serif;

    font-size: 37px;

    font-weight: 400;

    line-height: 0.9;

    letter-spacing: -0.05em;

    text-transform: lowercase;
}


#canvas .obj.join .sub {
    color: rgba(23,21,18,0.58);
}


/* ---------------------------------------------------------
   YOUR PROFILE
   --------------------------------------------------------- */

#canvas .obj.profile {
    width: 230px;
    min-width: 230px;
    min-height: 150px;

    background:
        #0d0c0b;

    color: #eee8df;

    border:
        1px solid rgba(238,232,223,0.23);

    box-shadow:
        0 25px 65px rgba(0,0,0,0.65);
}


#canvas .obj.profile .frag {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 31px;

    line-height: 0.95;

    letter-spacing: -0.04em;
}


#canvas .obj.profile .sub {
    color: rgba(238,232,223,0.5);
}


/* ---------------------------------------------------------
   REMOVE PROJECTS VISUALLY
   KEEP THE HTML + JS UNTOUCHED
   --------------------------------------------------------- */

#canvas .obj.project {
    display: none !important;
}


/* ---------------------------------------------------------
   OBJECT TYPOGRAPHY
   --------------------------------------------------------- */

#canvas .obj .frag {
    position: relative;

    z-index: 2;

    margin: 0;

    font-weight: 400;
}


#canvas .obj .sub {
    position: relative;

    z-index: 2;

    max-width: 210px;

    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size: 9px;

    line-height: 1.55;

    letter-spacing: 0.08em;

    text-transform: none;
}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

#canvas .obj:hover {
    z-index: 300;

    filter: brightness(1.035);

    transform:
        translate3d(
            var(--tx, 0),
            var(--ty, 0),
            0
        )
        rotate(
            calc(
                var(--rot, 0deg) + 1deg
            )
        )
        scale(1.035);

    box-shadow:
        0 34px 80px rgba(0,0,0,0.68);
}


/* ---------------------------------------------------------
   FOCUS
   --------------------------------------------------------- */

#canvas .obj:focus-visible {
    outline:
        1px solid
        rgba(238,232,223,0.75);

    outline-offset: 7px;
}


/* ---------------------------------------------------------
   SMALL WHIMSICAL FLOATING MARKS
   --------------------------------------------------------- */

#canvas .obj.people::before {
    content: "✳";

    position: absolute;

    right: -27px;
    top: -29px;

    font-size: 23px;

    color: rgba(238,232,223,0.55);

    transform: rotate(14deg);

    pointer-events: none;
}


#canvas .obj.grant::after {
    content: "";

    position: absolute;

    right: -36px;
    bottom: -32px;

    width: 42px;
    height: 42px;

    border:
        1px solid
        rgba(238,232,223,0.28);

    border-radius: 50%;

    opacity: 0.7;

    pointer-events: none;
}


#canvas .obj.join::before {
    content: "—  ·  —";

    position: absolute;

    left: -34px;
    bottom: -24px;

    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size: 10px;

    letter-spacing: 0.2em;

    color: rgba(238,232,223,0.45);

    transform: rotate(-8deg);

    pointer-events: none;
}


#canvas .obj.profile::before {
    content: "◇";

    position: absolute;

    right: -24px;
    top: -22px;

    font-size: 19px;

    color: rgba(238,232,223,0.5);

    transform: rotate(12deg);

    pointer-events: none;
}


/* ---------------------------------------------------------
   CUSTOM CURSOR
   --------------------------------------------------------- */

#canvas .custom-cursor {
    position: fixed;

    width: 14px;
    height: 14px;

    border-radius: 50%;

    background: #f2eee7;

    border: none;

    pointer-events: none;

    z-index: 9999;

    transform:
        translate(-50%, -50%);

    box-shadow:
        0 0 0 1px rgba(0,0,0,0.5);

    transition:
        transform 120ms ease,
        background 160ms ease,
        box-shadow 160ms ease;
}


#canvas body.hovering-clickable .custom-cursor,
body.hovering-clickable #canvas .custom-cursor {
    background: #bcae9b;

    transform:
        translate(-50%, -50%)
        scale(1.25);

    box-shadow:
        0 0 0 5px rgba(188,174,155,0.13);
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 900px) {

    #canvas .site-mark {
        top: 20px;
        left: 20px;
    }

    #canvas .obj.people {
        width: 275px;
        min-width: 275px;
    }

    #canvas .obj.library {
        width: 225px;
        min-width: 225px;
    }

    #canvas .obj.grant {
        width: 205px;
        min-width: 205px;
    }

    #canvas .obj.join {
        width: 190px;
        min-width: 190px;
    }

    #canvas .obj.profile {
        width: 195px;
        min-width: 195px;
    }

}


@media (max-width: 600px) {

    body:has(#canvas) {
        overflow-y: auto;
    }

    #canvas {
        height: 100vh;
        min-height: 700px;
        overflow: hidden;
    }

    #canvas .site-mark {
        left: 16px;
        top: 17px;

        gap: 13px;
    }

    #canvas .site-name {
        font-size: 8px;
    }

    #canvas .login-link {
        font-size: 7px;
        padding: 6px 8px;
    }

    #canvas .obj.people {
        width: 245px;
        min-width: 245px;
        min-height: 170px;
    }

    #canvas .obj.people .frag {
        font-size: 34px;
    }

    #canvas .obj.library {
        width: 205px;
        min-width: 205px;
    }

    #canvas .obj.grant {
        width: 185px;
        min-width: 185px;
    }

    #canvas .obj.join {
        width: 175px;
        min-width: 175px;
    }

    #canvas .obj.profile {
        width: 180px;
        min-width: 180px;
    }

}

/* ============================================================
   WINDERVALE / PROFILE STATUS
   Y2K DIGITAL FIELD INTERFACE
   ISOLATED PAGE STYLES
   ============================================================ */


/* ------------------------------------------------------------
   FONTS
   ------------------------------------------------------------ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&family=Syne:wght@400;500;600;700;800&display=swap');


/* ------------------------------------------------------------
   PAGE RESET
   ------------------------------------------------------------ */

body.profile-status-page {

    margin: 0;

    min-height: 100vh;
    height: auto;

    overflow-x: hidden;
    overflow-y: auto;

    background: #050505;
    color: #f4f4f4;

    font-family:
        "Space Grotesk",
        Arial,
        sans-serif;
}


/* ------------------------------------------------------------
   GRAIN / DIGITAL NOISE
   ------------------------------------------------------------ */

body.profile-status-page::before {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 9999;

    opacity: 0.075;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.8'/%3E%3C/svg%3E");

    mix-blend-mode: screen;
}


/* ------------------------------------------------------------
   BACKGROUND DIGITAL SHAPES
   ------------------------------------------------------------ */

body.profile-status-page::after {

    content: "";

    position: fixed;

    width: 520px;
    height: 520px;

    right: -210px;
    top: 80px;

    pointer-events: none;

    opacity: 0.12;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.35) 0,
            rgba(255,255,255,0.08) 30%,
            transparent 68%
        );

    filter: blur(30px);
}


/* ============================================================
   HEADER
   ============================================================ */

.profile-status-page .site-header {

    position: relative;

    z-index: 20;

    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 24px 34px;

    background: #050505;

    border-bottom: 0;
}


/* ------------------------------------------------------------
   BRAND
   ------------------------------------------------------------ */

.profile-status-page .brand {

    font-family:
        "Syne",
        Arial,
        sans-serif;

    font-size: 17px;

    font-weight: 700;

    letter-spacing: -0.06em;

    text-transform: lowercase;
}


.profile-status-page .brand a {

    color: #ffffff;

    text-decoration: none;

    transition:
        transform 160ms ease,
        opacity 160ms ease;

    display: inline-block;
}


.profile-status-page .brand a:hover {

    transform: translateX(3px);

    opacity: 0.65;
}


/* ------------------------------------------------------------
   NAV
   ------------------------------------------------------------ */

.profile-status-page .top-nav {

    display: flex;

    align-items: center;

    gap: 18px;
}


.profile-status-page .top-nav a {

    position: relative;

    color: #ffffff;

    text-decoration: none;

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 0.08em;

    padding: 7px 9px;

    transition:
        background 150ms ease,
        color 150ms ease,
        transform 150ms ease;
}


.profile-status-page .top-nav a:hover {

    background: #ffffff;

    color: #050505;

    transform:
        translateY(-2px)
        rotate(-1deg);
}


/* ============================================================
   MAIN
   ============================================================ */

.profile-status-page .profile-status {

    position: relative;

    width: min(1240px, 91vw);

    margin: 0 auto;

    padding:
        100px
        0
        150px;

    min-height: auto;
}


/* ============================================================
   INTRO
   ============================================================ */

.profile-status-page .profile-status-intro {

    position: relative;

    margin-bottom: 85px;

    z-index: 3;
}


/* ------------------------------------------------------------
   EYEBROW
   ------------------------------------------------------------ */

.profile-status-page .eyebrow {

    display: inline-block;

    margin: 0 0 25px;

    padding: 7px 11px;

    background: #ffffff;

    color: #050505;

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 0.1em;

    transform:
        rotate(-1.5deg);
}


/* ============================================================
   HUGE TITLE
   ============================================================ */

.profile-status-page .profile-status-intro h1 {

    margin: 0;

    max-width: 900px;

    font-family:
        "Syne",
        Arial,
        sans-serif;

    font-size:
        clamp(
            72px,
            13vw,
            178px
        );

    font-weight: 800;

    line-height: 0.78;

    letter-spacing: -0.095em;

    text-transform: uppercase;

    color: #f5f5f5;

    transform:
        scaleX(0.94);

    transform-origin: left center;
}


/* ============================================================
   DECORATIVE DIGITAL MARK
   ============================================================ */

.profile-status-page .profile-status-intro::after {

    content: "001 / FIELD ACCESS / PROFILE";

    position: absolute;

    right: 0;
    bottom: 7px;

    padding: 10px 13px;

    background: #111111;

    color: #777777;

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 8px;

    letter-spacing: 0.08em;

    transform:
        rotate(2deg);
}


/* ============================================================
   PROFILE CONTENT
   ============================================================ */

.profile-status-page .profile-status-content {

    position: relative;

    z-index: 5;

    width: 100%;
}


/* ============================================================
   PROFILE CARD
   ============================================================ */

.profile-status-page .profile-status-card {

    position: relative;

    width: min(920px, 100%);

    margin-left: auto;

    margin-right: auto;

    padding: 42px 44px 48px;

    background: #101010;

    color: #ffffff;

    border: 0;

    box-shadow:
        14px 14px 0 #ffffff,
        -5px -5px 0 #181818;

    transform:
        rotate(-0.7deg);
}


/* ------------------------------------------------------------
   CARD DECORATIVE CORNERS
   ------------------------------------------------------------ */

.profile-status-page .profile-status-card::before {

    content: "";

    position: absolute;

    width: 38px;
    height: 38px;

    left: -12px;
    top: -12px;

    background: #ffffff;

    clip-path:
        polygon(
            0 0,
            100% 0,
            100% 10px,
            10px 10px,
            10px 100%,
            0 100%
        );
}


.profile-status-page .profile-status-card::after {

    content: "WV / 00";

    position: absolute;

    right: 18px;
    top: 17px;

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 8px;

    color: #666666;

    letter-spacing: 0.1em;
}


/* ============================================================
   PROFILE NUMBER
   ============================================================ */

.profile-status-page .profile-status-number {

    display: inline-block;

    padding: 6px 8px;

    background: #ffffff;

    color: #050505;

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 0.04em;

    margin-bottom: 42px;

    transform:
        rotate(1deg);
}


/* ============================================================
   PERSON
   ============================================================ */

.profile-status-page .profile-status-person {

    position: relative;

    padding-right: 80px;
}


.profile-status-page .profile-status-person h2 {

    margin: 0;

    font-family:
        "Space Grotesk",
        Arial,
        sans-serif;

    font-size:
        clamp(
            42px,
            7vw,
            82px
        );

    font-weight: 600;

    line-height: 0.9;

    letter-spacing: -0.075em;

    text-transform: uppercase;

    word-break: break-word;
}


.profile-status-page .profile-status-location {

    margin: 22px 0 0;

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 10px;

    line-height: 1.6;

    color: #a4a4a4;

    text-transform: uppercase;

    letter-spacing: 0.05em;
}


.profile-status-page .profile-status-disciplines {

    display: inline-block;

    margin-top: 20px;

    padding: 8px 11px;

    background: #1e1e1e;

    color: #ffffff;

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 9px;

    line-height: 1.5;

    text-transform: uppercase;
}


/* ============================================================
   DIVIDER
   ------------------------------------------------------------
   NOT A THIN LINE:
   chunky digital block instead.
   ============================================================ */

.profile-status-page .profile-status-divider {

    width: 100%;

    height: 9px;

    margin: 42px 0;

    background:
        repeating-linear-gradient(
            90deg,
            #ffffff 0,
            #ffffff 38px,
            #101010 38px,
            #101010 48px
        );
}


/* ============================================================
   STATE
   ============================================================ */

.profile-status-page .profile-status-state {

    position: relative;

    padding: 34px;

    background: #181818;

    box-shadow:
        inset 0 0 0 2px #2a2a2a;
}


/* ------------------------------------------------------------
   STATUS LABEL
   ------------------------------------------------------------ */

.profile-status-page .profile-status-label {

    margin: 0 0 15px;

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 0.14em;

    color: #777777;

    text-transform: uppercase;
}


/* ------------------------------------------------------------
   STATUS TITLE
   ------------------------------------------------------------ */

.profile-status-page .profile-status-state h3 {

    margin: 0;

    font-family:
        "Syne",
        Arial,
        sans-serif;

    font-size:
        clamp(
            38px,
            6vw,
            72px
        );

    font-weight: 800;

    line-height: 0.85;

    letter-spacing: -0.075em;

    text-transform: uppercase;

    color: #ffffff;
}


/* ------------------------------------------------------------
   DESCRIPTION
   ------------------------------------------------------------ */

.profile-status-page .profile-status-description {

    max-width: 650px;

    margin: 24px 0 0;

    font-family:
        "Space Grotesk",
        Arial,
        sans-serif;

    font-size: 15px;

    line-height: 1.55;

    color: #b8b8b8;
}


/* ============================================================
   ACTIONS
   ============================================================ */

.profile-status-page .profile-status-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 34px;
}


/* ============================================================
   BUTTONS
   ============================================================ */

.profile-status-page .profile-status-button {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 48px;

    padding:
        0 20px;

    background: #ffffff;

    color: #050505;

    text-decoration: none;

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    box-shadow:
        5px 5px 0 #555555;

    transition:
        transform 120ms ease,
        box-shadow 120ms ease,
        background 120ms ease;
}


.profile-status-page .profile-status-button:hover {

    transform:
        translate(
            3px,
            3px
        );

    box-shadow:
        2px 2px 0 #555555;

    background: #dddddd;
}


/* ------------------------------------------------------------
   SECONDARY BUTTON
   ------------------------------------------------------------ */

.profile-status-page .profile-status-button.secondary {

    background: #222222;

    color: #ffffff;

    box-shadow:
        5px 5px 0 #777777;
}


.profile-status-page .profile-status-button.secondary:hover {

    background: #333333;
}


/* ============================================================
   EMPTY PROFILE
   ============================================================ */

.profile-status-page .profile-status-card
    .profile-status-state:has(
      h3
    ) {
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {

    .profile-status-page .site-header {

        padding:
            20px 22px;
    }


    .profile-status-page .top-nav {

        gap: 4px;
    }


    .profile-status-page .top-nav a {

        padding:
            6px 5px;

        font-size: 8px;
    }


    .profile-status-page .profile-status {

        width: 88vw;

        padding:
            75px 0
            120px;
    }


    .profile-status-page .profile-status-intro {

        margin-bottom: 65px;
    }


    .profile-status-page .profile-status-intro h1 {

        font-size:
            clamp(
                62px,
                16vw,
                120px
            );
    }


    .profile-status-page .profile-status-intro::after {

        position: relative;

        display: inline-block;

        right: auto;

        bottom: auto;

        margin-top: 32px;
    }


    .profile-status-page .profile-status-card {

        padding:
            32px 28px 36px;

        box-shadow:
            9px 9px 0 #ffffff;
    }


    .profile-status-page .profile-status-person {

        padding-right: 0;
    }


    .profile-status-page .profile-status-state {

        padding: 26px 22px;
    }

}


@media (max-width: 600px) {

    .profile-status-page .site-header {

        align-items: flex-start;

        gap: 18px;

        flex-direction: column;
    }


    .profile-status-page .top-nav {

        flex-wrap: wrap;

        gap: 4px;
    }


    .profile-status-page .profile-status {

        width: 86vw;

        padding-top: 55px;
    }


    .profile-status-page .profile-status-intro h1 {

        font-size: 64px;

        line-height: 0.82;
    }


    .profile-status-page .profile-status-card {

        padding:
            27px 21px 30px;

        transform:
            rotate(-0.35deg);
    }


    .profile-status-page .profile-status-number {

        margin-bottom: 30px;
    }


    .profile-status-page .profile-status-person h2 {

        font-size: 43px;
    }


    .profile-status-page .profile-status-state h3 {

        font-size: 42px;
    }


    .profile-status-page .profile-status-description {

        font-size: 14px;
    }


    .profile-status-page .profile-status-actions {

        flex-direction: column;
    }


    .profile-status-page .profile-status-button {

        width: 100%;

        box-sizing: border-box;
    }

}

/* ============================================================
   PROFILE CHOICE
   WINDERVALE — Y2K TECH / ARCHIVAL INTERFACE
   ============================================================ */

.profile-choice-page {
    min-height: 100vh;
    width: 100%;
    position: relative;
    overflow-x: hidden;
    background: transparent;
    color: #f4f1e8;
}


/* ============================================================
   HEADER
   ============================================================ */

.profile-choice-page .site-mark {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 26px 32px;
    box-sizing: border-box;

    display: flex;
    justify-content: space-between;
    align-items: center;

    z-index: 20;
    pointer-events: none;
}

.profile-choice-page .site-name {
    pointer-events: auto;

    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size: 12px;
    letter-spacing: 0.28em;
    text-transform: lowercase;

    color: #f4f1e8;
}


/* ============================================================
   BACK
   ============================================================ */

.profile-choice-page .login-link {
    pointer-events: auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 82px;
    height: 34px;
    padding: 0 16px;

    box-sizing: border-box;

    color: #f4f1e8;
    text-decoration: none;

    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size: 10px;
    letter-spacing: 0.18em;

    border: 1px solid rgba(244, 241, 232, 0.55);

    background:
        rgba(10, 10, 9, 0.45);

    transition:
        background 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}

.profile-choice-page .login-link:hover {
    background: #f4f1e8;
    color: #11110f;
    transform: translateY(-2px);
}


/* ============================================================
   MAIN CHOICE AREA
   ============================================================ */

.profile-choice {
    min-height: 100vh;
    width: 100%;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    padding:
        140px
        32px
        100px;

    text-align: center;

    position: relative;
}


/* ============================================================
   SMALL SYSTEM LABEL
   ============================================================ */

.profile-choice-label {
    margin: 0 0 24px;

    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size: 10px;
    line-height: 1;

    letter-spacing: 0.35em;

    color: rgba(244, 241, 232, 0.58);

    text-transform: uppercase;
}


/* ============================================================
   TITLE
   ============================================================ */

.profile-choice h1 {
    margin: 0;

    max-width: 900px;

    font-family:
        Impact,
        "Arial Black",
        Arial,
        sans-serif;

    font-size:
        clamp(58px, 10vw, 150px);

    line-height: 0.82;

    font-weight: 900;

    letter-spacing: -0.055em;

    text-transform: uppercase;

    color: #f4f1e8;

    text-shadow:
        3px 3px 0 rgba(244, 241, 232, 0.08);
}


/* ============================================================
   DESCRIPTION
   ============================================================ */

.profile-choice-description {
    max-width: 560px;

    margin:
        38px
        0
        48px;

    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size: 13px;

    line-height: 1.8;

    letter-spacing: 0.025em;

    color:
        rgba(244, 241, 232, 0.68);
}


/* ============================================================
   BUTTON AREA
   ============================================================ */

.profile-choice-actions {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 14px;

    flex-wrap: wrap;
}


/* ============================================================
   BUTTONS
   ============================================================ */

.profile-choice-button {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 190px;
    height: 54px;

    padding: 0 28px;

    box-sizing: border-box;

    color: #11110f;

    background: #f4f1e8;

    text-decoration: none;

    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.22em;

    text-transform: uppercase;

    border: 1px solid #f4f1e8;

    transition:
        transform 180ms ease,
        background 180ms ease,
        color 180ms ease,
        box-shadow 180ms ease;
}


.profile-choice-button:hover {
    transform:
        translate(-3px, -3px);

    background: #11110f;

    color: #f4f1e8;

    box-shadow:
        5px 5px 0 #f4f1e8;
}


/* ============================================================
   SECONDARY BUTTON
   ============================================================ */

.profile-choice-button.secondary {
    color: #f4f1e8;

    background:
        rgba(244, 241, 232, 0.035);

    border:
        1px solid
        rgba(244, 241, 232, 0.6);
}


.profile-choice-button.secondary:hover {
    background: #f4f1e8;

    color: #11110f;

    box-shadow:
        5px 5px 0 rgba(244, 241, 232, 0.85);
}


/* ============================================================
   Y2K / TECH DECORATION
   ============================================================ */

.profile-choice::before {
    content: "WV / 001";

    position: absolute;

    top: 50%;
    left: 28px;

    transform:
        translateY(-50%)
        rotate(-90deg);

    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size: 9px;

    letter-spacing: 0.28em;

    color:
        rgba(244, 241, 232, 0.32);
}


.profile-choice::after {
    content: "FIELD ACCESS";

    position: absolute;

    right: 28px;
    bottom: 32px;

    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size: 9px;

    letter-spacing: 0.24em;

    color:
        rgba(244, 241, 232, 0.32);
}


/* ============================================================
   SMALL SCREEN
   ============================================================ */

@media (max-width: 700px) {

    .profile-choice-page .site-mark {
        padding: 20px;
    }


    .profile-choice {
        padding:
            120px
            24px
            90px;
    }


    .profile-choice h1 {
        font-size:
            clamp(52px, 17vw, 100px);
    }


    .profile-choice-description {
        max-width: 420px;

        font-size: 12px;

        margin-top: 30px;
        margin-bottom: 38px;
    }


    .profile-choice-actions {
        width: 100%;

        flex-direction: column;
    }


    .profile-choice-button {
        width: min(100%, 320px);
    }


    .profile-choice::before {
        display: none;
    }


    .profile-choice::after {
        right: 20px;
        bottom: 22px;
    }

}

/* ============================================================
   WINDERVALE — GRANTS
   Y2K / DIGITAL EDITORIAL / HUMAN TECH
   ============================================================ */


/* ============================================================
   PAGE
   ============================================================ */

.grants-page {
    background: #000 !important;
    color: #f5f5f5 !important;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}


/* subtle grain — NOT scanlines */

.grants-page::before {
    content: "";
    position: fixed;
    inset: 0;

    pointer-events: none;

    z-index: 9999;

    opacity: 0.055;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");

    mix-blend-mode: screen;
}


/* ============================================================
   HEADER
   ============================================================ */

.grants-page .grants-header {
    position: relative;

    z-index: 30;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 26px 34px;

    border: none !important;

    background: transparent !important;
}


.grants-page .grants-brand {
    font-family:
        "Arial Narrow",
        Arial,
        sans-serif;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: -0.04em;

    text-transform: lowercase;
}


.grants-page .grants-brand a {
    color: #fff !important;
    text-decoration: none;
}


.grants-page .grants-nav {
    display: flex;

    align-items: center;

    gap: 20px;
}


.grants-page .grants-nav a {
    color: rgba(255,255,255,0.55) !important;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    letter-spacing: 0.08em;

    text-decoration: none;

    transition:
        color 160ms ease,
        transform 160ms ease;
}


.grants-page .grants-nav a:hover {
    color: #fff !important;

    transform:
        translateY(-2px);
}


/* ============================================================
   MAIN
   ============================================================ */

.grants-page .grants-main {
    position: relative;

    width: min(1240px, 88vw);

    margin: 0 auto;

    padding:
        70px 0 140px;
}


/* ============================================================
   RANDOM DIGITAL MARKS
   ============================================================ */

.grants-page .grant-doodle {
    position: absolute;

    pointer-events: none;

    color: rgba(255,255,255,0.5);

    z-index: 2;
}


.grants-page .doodle-star {
    top: 120px;
    right: 18%;

    font-family:
        Arial,
        sans-serif;

    font-size: 25px;

    transform:
        rotate(13deg);
}


.grants-page .doodle-orbit {
    top: 470px;
    right: 4%;

    width: 95px;
    height: 42px;

    border: 0 !important;

    border-radius: 50%;

    background:
        transparent;

    box-shadow:
        inset 0 0 0 1px
        rgba(255,255,255,0.28);

    transform:
        rotate(-18deg);
}


.grants-page .doodle-orbit::after {
    content: "";

    position: absolute;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #fff;

    top: 1px;
    right: 12px;

    box-shadow:
        0 0 12px
        rgba(255,255,255,0.7);
}


.grants-page .doodle-cross {
    left: 1%;

    top: 620px;

    font-family:
        "Courier New",
        monospace;

    font-size: 22px;

    opacity: 0.6;
}


.grants-page .doodle-line {
    display: none;
}


/* ============================================================
   INTRO
   ============================================================ */

.grants-page .grants-intro {
    position: relative;

    z-index: 5;

    min-height: 650px;

    max-width: 1050px;
}


/* tiny digital label */

.grants-page .grants-kicker {
    margin: 0 0 42px;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    letter-spacing: 0.16em;

    color:
        rgba(255,255,255,0.4);
}


/* ============================================================
   GIANT TITLE
   ============================================================ */

.grants-page .grants-title {
    margin: 0;

    font-family:
        "Arial Narrow",
        "Helvetica Neue",
        Arial,
        sans-serif;

    font-size:
        clamp(95px, 17vw, 225px);

    font-weight: 700;

    line-height: 0.72;

    letter-spacing:
        -0.095em;

    text-transform: lowercase;

    color: #fff !important;
}


.grants-page .grants-title span {
    display: block;

    width: max-content;
}


/* make the second word drift */

.grants-page .grants-title span:nth-child(2) {
    margin-left:
        clamp(55px, 10vw, 150px);

    font-style: italic;

    font-weight: 400;

    letter-spacing:
        -0.09em;
}


/* ============================================================
   INTRO COPY
   ============================================================ */

.grants-page .grants-intro-copy {
    max-width: 520px;

    margin:
        65px 0 0
        clamp(40px, 12vw, 180px);

    font-family:
        Georgia,
        serif;

    font-size: 18px;

    line-height: 1.55;

    color:
        rgba(255,255,255,0.65);
}


/* ============================================================
   DIGITAL NOTE
   ============================================================ */

.grants-page .grant-note {
    position: absolute;

    top: 115px;
    right: 0;

    width: 190px;

    padding: 17px;

    background:
        #111;

    color: #fff;

    border: none !important;

    transform:
        rotate(4deg);

    box-shadow:
        18px 20px 0
        rgba(255,255,255,0.035);

    z-index: 10;
}


.grants-page .grant-note::before {
    content: "";

    position: absolute;

    top: -5px;
    left: 38%;

    width: 45px;
    height: 8px;

    background:
        rgba(255,255,255,0.16);

    transform:
        rotate(-4deg);
}


.grants-page .grant-note-label {
    font-family:
        "Courier New",
        monospace;

    font-size: 8px;

    letter-spacing: 0.13em;

    color:
        rgba(255,255,255,0.4);
}


.grants-page .grant-note-text {
    margin-top: 17px;

    font-family:
        Georgia,
        serif;

    font-size: 14px;

    line-height: 1.45;

    font-style: italic;

    color:
        rgba(255,255,255,0.85);
}


/* ============================================================
   DIVIDER
   NOT A LINE — DIGITAL TEXT MARKER
   ============================================================ */

.grants-page .grant-divider {
    display: flex;

    align-items: center;

    margin:
        50px 0 110px;

    padding-left:
        clamp(20px, 10vw, 150px);

    gap: 14px;
}


.grants-page .grant-divider::before {
    content: "↓";

    width: auto;

    height: auto;

    background: none !important;

    font-family:
        "Courier New",
        monospace;

    font-size: 14px;

    color:
        rgba(255,255,255,0.45);
}


.grants-page .grant-divider span {
    font-family:
        "Courier New",
        monospace;

    font-size: 8px;

    letter-spacing: 0.16em;

    color:
        rgba(255,255,255,0.4);
}


/* ============================================================
   EXPLANATION
   ============================================================ */

.grants-page .grant-explanation {
    position: relative;

    z-index: 5;

    display: grid;

    grid-template-columns:
        minmax(260px, 0.8fr)
        minmax(0, 1.2fr);

    gap: 100px;

    padding:
        80px
        clamp(20px, 6vw, 100px);

    border: none !important;

    background:
        #080808;

    border-radius:
        0 35px 0 35px;

    box-shadow:
        35px 35px 0
        rgba(255,255,255,0.025);
}


.grants-page .grant-section-label {
    font-family:
        "Courier New",
        monospace;

    font-size: 8px;

    letter-spacing: 0.14em;

    color:
        rgba(255,255,255,0.38);
}


.grants-page .grant-explanation h2 {
    margin:
        28px 0 0;

    font-family:
        "Arial Narrow",
        "Helvetica Neue",
        Arial,
        sans-serif;

    font-size:
        clamp(52px, 7vw, 92px);

    font-weight: 700;

    line-height: 0.8;

    letter-spacing:
        -0.085em;

    text-transform: lowercase;
}


.grants-page .grant-explanation-copy {
    max-width: 610px;

    font-family:
        Georgia,
        serif;

    font-size: 17px;

    line-height: 1.75;

    color:
        rgba(255,255,255,0.66);
}


.grants-page .grant-explanation-copy p {
    margin:
        0 0 25px;
}


/* ============================================================
   PROCESS
   ============================================================ */

.grants-page .grant-process {
    position: relative;

    margin-top: 150px;

    z-index: 5;
}


.grants-page .grant-process-heading {
    display: flex;

    align-items: baseline;

    justify-content: space-between;

    margin-bottom: 60px;
}


.grants-page .grant-process-heading h2 {
    margin: 0;

    font-family:
        "Arial Narrow",
        Arial,
        sans-serif;

    font-size:
        clamp(50px, 7vw, 90px);

    font-weight: 700;

    letter-spacing:
        -0.085em;

    text-transform: lowercase;
}


.grants-page .grant-process-heading span {
    font-family:
        "Courier New",
        monospace;

    font-size: 8px;

    letter-spacing: 0.12em;

    color:
        rgba(255,255,255,0.3);
}


/* ============================================================
   STEPS
   NO GRID OF BORING CARDS
   ============================================================ */

.grants-page .grant-steps {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 45px;
}


.grants-page .grant-step {
    position: relative;

    min-height: 240px;

    padding: 0;

    border: none !important;

    background:
        transparent !important;

    box-shadow: none !important;
}


.grants-page .grant-step::after {
    content: "↗";

    position: absolute;

    right: 0;
    top: 0;

    font-family:
        "Courier New",
        monospace;

    font-size: 14px;

    color:
        rgba(255,255,255,0.3);
}


.grants-page .grant-step:nth-child(2) {
    transform:
        translateY(45px);
}


.grants-page .grant-step:nth-child(3) {
    transform:
        translateY(-10px);
}


.grants-page .grant-step-number {
    font-family:
        "Courier New",
        monospace;

    font-size: 8px;

    letter-spacing: 0.12em;

    color:
        rgba(255,255,255,0.35);
}


.grants-page .grant-step h3 {
    margin:
        55px 0 18px;

    font-family:
        Georgia,
        serif;

    font-size: 29px;

    font-weight: 400;

    font-style: italic;

    letter-spacing:
        -0.045em;
}


.grants-page .grant-step p {
    max-width: 245px;

    margin: 0;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    line-height: 1.75;

    color:
        rgba(255,255,255,0.48);
}


/* ============================================================
   CURRENT STATE
   ============================================================ */

.grants-page .grants-current {
    position: relative;

    margin-top: 180px;

    padding:
        80px
        clamp(30px, 7vw, 100px);

    border: none !important;

    background:
        #0a0a0a;

    overflow: hidden;

    transform:
        rotate(-0.7deg);
}


/* giant background number */

.grants-page .grants-current::after {
    content: "00";

    position: absolute;

    right: -15px;
    bottom: -70px;

    font-family:
        "Arial Narrow",
        Arial,
        sans-serif;

    font-size:
        clamp(180px, 28vw, 360px);

    font-weight: 700;

    line-height: 1;

    letter-spacing:
        -0.12em;

    color:
        rgba(255,255,255,0.025);

    pointer-events: none;
}


.grants-page .grants-current::before {
    content: "FIELD STATUS / 00";

    position: absolute;

    top: 28px;
    left: 35px;

    padding: 0;

    background: transparent !important;

    font-family:
        "Courier New",
        monospace;

    font-size: 8px;

    letter-spacing: 0.14em;

    color:
        rgba(255,255,255,0.32);
}


.grants-page .grants-current h2 {
    position: relative;

    z-index: 2;

    margin: 0;

    font-family:
        "Arial Narrow",
        Arial,
        sans-serif;

    font-size:
        clamp(50px, 8vw, 105px);

    font-weight: 700;

    line-height: 0.78;

    letter-spacing:
        -0.09em;

    text-transform: lowercase;
}


.grants-page .grants-current p {
    position: relative;

    z-index: 2;

    max-width: 590px;

    margin:
        45px 0 0
        clamp(0px, 5vw, 75px);

    font-family:
        Georgia,
        serif;

    font-size: 17px;

    line-height: 1.7;

    color:
        rgba(255,255,255,0.58);
}


/* ============================================================
   FOOTER
   ============================================================ */

.grants-page .grants-footer {
    display: flex;

    justify-content: space-between;

    gap: 30px;

    margin-top: 130px;

    padding-top: 0;

    border: none !important;

    font-family:
        "Courier New",
        monospace;

    font-size: 8px;

    letter-spacing: 0.12em;

    color:
        rgba(255,255,255,0.3);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 850px) {

    .grants-page .grants-header {
        padding:
            22px 20px;
    }


    .grants-page .grants-nav {
        gap: 10px;
    }


    .grants-page .grants-nav a {
        font-size: 7px;
    }


    .grants-page .grants-main {
        width: 89vw;

        padding-top: 45px;
    }


    .grants-page .grant-note {
        position: relative;

        top: auto;
        right: auto;

        margin:
            70px 0 0 auto;
    }


    .grants-page .grant-explanation {
        grid-template-columns: 1fr;

        gap: 50px;

        padding:
            55px 30px;
    }


    .grants-page .grant-steps {
        grid-template-columns: 1fr;

        gap: 70px;
    }


    .grants-page .grant-step:nth-child(2),
    .grants-page .grant-step:nth-child(3) {
        transform: none;
    }


    .grants-page .grants-current {
        padding:
            65px 30px;
    }


    .grants-page .grants-footer {
        flex-direction: column;

        gap: 12px;
    }

}
/* ============================================================
   ADMIN — RESTORE PAGE SCROLL
============================================================ */

html,
body {
    min-height: 100%;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
}

.admin-page,
.admin-container,
.admin-main,
.admin-panel {
    min-height: 100vh;
    height: auto;
    overflow-y: visible;
}
/* =========================================================
   WINDERVALE — CLEAN EDITORIAL HOMEPAGE
   No glow / no gradients / no overlap / no grid
   ========================================================= */

:root {
  --wv-black: #0d0d0c;
  --wv-paper: #f4f1e8;
  --wv-paper-2: #e9e5da;
  --wv-red: #b94f43;
  --wv-dark-card: #171716;
  --wv-white: #f4f1e8;
  --wv-muted: #858078;
}


/* ---------- PAGE ---------- */

body {
  background: var(--wv-black) !important;
  color: var(--wv-white);
}


/* remove any existing grid/background pattern */

#canvas {
  background: var(--wv-black) !important;
  background-image: none !important;
  box-shadow: none !important;
}


/* remove glow / filters / shadows from canvas objects */

#canvas .obj {
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}


/* =========================================================
   CARDS
   ========================================================= */

#canvas .obj.human-map,
#canvas .obj.obscura,
#canvas .obj.grants,
#canvas .obj.join,
#canvas .obj.profile {
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  overflow: hidden;
}


/* =========================================================
   HUMAN MAP
   ========================================================= */

#canvas .obj.human-map {
  width: 390px !important;
  min-width: 390px !important;

  height: 390px !important;
  min-height: 390px !important;

  background: var(--wv-paper) !important;
  color: #111 !important;

  /*
     Left side of the composition.
     Plenty of empty space around it.
  */
}


/* =========================================================
   OBSCURA
   ========================================================= */

#canvas .obj.obscura {
  width: 330px !important;
  min-width: 330px !important;

  height: 250px !important;
  min-height: 250px !important;

  background: var(--wv-paper-2) !important;
  color: #111 !important;
}


/* =========================================================
   GRANTS
   ========================================================= */

#canvas .obj.grants {
  width: 300px !important;
  min-width: 300px !important;

  height: 220px !important;
  min-height: 220px !important;

  background: var(--wv-red) !important;
  color: var(--wv-white) !important;
}


/* =========================================================
   JOIN
   ========================================================= */

#canvas .obj.join {
  width: 300px !important;
  min-width: 300px !important;

  height: 220px !important;
  min-height: 220px !important;

  background: var(--wv-paper) !important;
  color: #111 !important;
}


/* =========================================================
   PROFILE
   ========================================================= */

#canvas .obj.profile {
  width: 320px !important;
  min-width: 320px !important;

  height: 220px !important;
  min-height: 220px !important;

  background: var(--wv-dark-card) !important;
  color: var(--wv-white) !important;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

#canvas .obj h1,
#canvas .obj h2,
#canvas .obj h3 {
  text-shadow: none !important;
  filter: none !important;
}


/* Human Map */

#canvas .obj.human-map .frag {
  color: #111 !important;
}


/* Obscura */

#canvas .obj.obscura .frag {
  color: #111 !important;
}


/* Grants */

#canvas .obj.grants .frag {
  color: var(--wv-white) !important;
}


/* Join */

#canvas .obj.join .frag {
  color: #111 !important;
}


/* Profile */

#canvas .obj.profile .frag {
  color: var(--wv-white) !important;
}


/* =========================================================
   REMOVE DECORATIVE EFFECTS
   ========================================================= */

#canvas .obj::before,
#canvas .obj::after {
  box-shadow: none !important;
  filter: none !important;
}


/* remove paper-tab glow/effects if present */

.paper-tab {
  box-shadow: none !important;
  filter: none !important;
}


/* =========================================================
   DESKTOP SPACING
   ========================================================= */

@media (min-width: 1000px) {

  #canvas .obj.human-map {
    margin: 0 !important;
  }

  #canvas .obj.obscura {
    margin: 0 !important;
  }

  #canvas .obj.grants {
    margin: 0 !important;
  }

  #canvas .obj.join {
    margin: 0 !important;
  }

  #canvas .obj.profile {
    margin: 0 !important;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  #canvas .obj.human-map,
  #canvas .obj.obscura,
  #canvas .obj.grants,
  #canvas .obj.join,
  #canvas .obj.profile {
    position: relative !important;

    width: min(88vw, 390px) !important;
    min-width: 0 !important;

    margin: 20px auto !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    transform: none !important;
  }

  #canvas {
    height: auto !important;
    min-height: 100vh;
  }

}

/* ============================================================
   WINDERVALE — PROJECTS EXPERIENCE
   ============================================================ */

.projects-page {
    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(85, 63, 48, 0.18),
            transparent 42%
        ),
        #171412;

    color: #ddd5c8;
    min-height: 100vh;
    overflow-x: hidden;
}


/* ------------------------------------------------------------
   HOME MARK
   ------------------------------------------------------------ */

.projects-home {
    position: fixed;
    top: 28px;
    left: 32px;

    z-index: 100;

    color: #ddd5c8;
    text-decoration: none;

    font-size: 11px;
    letter-spacing: 0.22em;
    font-weight: 500;

    mix-blend-mode: difference;

    transition:
        opacity 0.3s ease,
        letter-spacing 0.3s ease;
}

.projects-home:hover {
    opacity: 0.55;
    letter-spacing: 0.3em;
}


/* ------------------------------------------------------------
   EXPERIENCE
   ------------------------------------------------------------ */

.projects-experience {
    width: 100%;
    position: relative;
}


/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */

.projects-hero {
    min-height: 100vh;

    padding:
        15vh
        9vw
        12vh;

    display: flex;
    flex-direction: column;
    justify-content: center;

    position: relative;

    border-bottom: 1px solid rgba(221, 213, 200, 0.18);
}

.projects-eyebrow,
.projects-section-number {
    font-family: monospace;

    font-size: 10px;
    letter-spacing: 0.18em;

    color: rgba(221, 213, 200, 0.48);
}

.projects-eyebrow {
    margin-bottom: 55px;
}

.projects-hero h1 {
    margin: 0;

    max-width: 900px;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: clamp(70px, 11vw, 170px);

    line-height: 0.79;
    font-weight: 400;

    letter-spacing: -0.055em;

    text-transform: uppercase;
}

.projects-intro {
    max-width: 390px;

    margin:
        70px
        0
        45px
        24vw;

    font-size: 14px;
    line-height: 1.7;

    color: rgba(221, 213, 200, 0.66);
}


/* ------------------------------------------------------------
   SUBMIT BUTTON
   ------------------------------------------------------------ */

.projects-submit {
    width: fit-content;

    margin-left: 24vw;

    display: flex;
    gap: 55px;
    align-items: center;

    padding: 15px 0;

    color: #ddd5c8;
    text-decoration: none;

    border-top: 1px solid rgba(221, 213, 200, 0.45);
    border-bottom: 1px solid rgba(221, 213, 200, 0.45);

    font-family: monospace;
    font-size: 11px;
    letter-spacing: 0.14em;

    transition:
        padding 0.35s ease,
        gap 0.35s ease,
        color 0.35s ease;
}

.projects-submit:hover {
    padding-left: 18px;
    padding-right: 18px;
    gap: 75px;
    color: #b68a72;
}


/* ------------------------------------------------------------
   EXPLANATION
   ------------------------------------------------------------ */

.projects-explanation {
    padding: 130px 9vw;

    border-bottom: 1px solid rgba(221, 213, 200, 0.15);
}

.projects-explanation-content {
    display: grid;

    grid-template-columns:
        minmax(300px, 1fr)
        minmax(280px, 0.7fr);

    gap: 12vw;

    margin-top: 100px;
}

.projects-explanation h2,
.projects-category-intro h2,
.projects-process h2,
.creator-control-layout h2,
.selected-heading h2,
.projects-final h2 {
    margin: 0;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-weight: 400;

    font-size: clamp(50px, 7vw, 105px);

    line-height: 0.85;

    letter-spacing: -0.045em;
}

.projects-explanation-text {
    max-width: 460px;

    padding-top: 12px;
}

.projects-explanation-text p,
.category-description,
.projects-category-intro p,
.process-step p,
.creator-control-text p,
.collaboration-text p {
    font-size: 14px;
    line-height: 1.75;

    color: rgba(221, 213, 200, 0.63);
}


/* ------------------------------------------------------------
   CATEGORIES
   ------------------------------------------------------------ */

.projects-categories {
    padding: 130px 9vw 170px;

    border-bottom: 1px solid rgba(221, 213, 200, 0.15);
}

.projects-category-intro {
    display: grid;

    grid-template-columns:
        1fr
        0.6fr;

    gap: 12vw;

    margin:
        100px
        0
        110px;
}

.projects-category-intro p {
    max-width: 360px;
}


/* ------------------------------------------------------------
   CATEGORY GRID
   ------------------------------------------------------------ */

.project-category-grid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    border-top: 1px solid rgba(221, 213, 200, 0.22);
}

.project-category {
    position: relative;

    min-height: 310px;

    padding: 28px;

    color: #ddd5c8;
    text-decoration: none;

    border-bottom: 1px solid rgba(221, 213, 200, 0.22);

    transition:
        background 0.45s ease,
        color 0.45s ease;
}

.project-category:nth-child(odd) {
    border-right: 1px solid rgba(221, 213, 200, 0.22);
}

.project-category:hover {
    background: #ddd5c8;
    color: #171412;
}

.category-number {
    position: absolute;

    top: 27px;
    left: 28px;

    font-family: monospace;

    font-size: 10px;
    letter-spacing: 0.15em;

    opacity: 0.55;
}

.category-name {
    display: block;

    margin-top: 70px;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: clamp(42px, 6vw, 82px);

    line-height: 0.85;

    letter-spacing: -0.045em;
}

.category-description {
    display: block;

    max-width: 270px;

    margin-top: 35px;
}

.project-category:hover .category-description {
    color: rgba(23, 20, 18, 0.62);
}

.category-arrow {
    position: absolute;

    right: 28px;
    bottom: 25px;

    font-size: 20px;

    transition:
        transform 0.35s ease;
}

.project-category:hover .category-arrow {
    transform:
        translate(7px, -7px);
}


/* ------------------------------------------------------------
   PROCESS
   ------------------------------------------------------------ */

.projects-process {
    padding: 140px 9vw;

    border-bottom: 1px solid rgba(221, 213, 200, 0.15);
}

.projects-process > h2 {
    margin-top: 90px;
    margin-bottom: 110px;
}

.projects-process-list {
    border-top: 1px solid rgba(221, 213, 200, 0.2);
}

.process-step {
    display: grid;

    grid-template-columns: 100px 1fr;

    gap: 40px;

    padding: 40px 0;

    border-bottom: 1px solid rgba(221, 213, 200, 0.16);
}

.process-number {
    font-family: monospace;

    font-size: 11px;

    opacity: 0.45;
}

.process-step h3 {
    margin: 0 0 12px;

    font-family: monospace;

    font-size: 13px;
    letter-spacing: 0.15em;
}


/* ------------------------------------------------------------
   CREATOR CONTROL
   ------------------------------------------------------------ */

.projects-creator-control {
    padding: 140px 9vw;

    border-bottom: 1px solid rgba(221, 213, 200, 0.15);
}

.creator-control-layout {
    display: grid;

    grid-template-columns:
        1fr
        0.7fr;

    gap: 12vw;

    margin-top: 100px;
}

.creator-control-text {
    max-width: 450px;
}

.creator-options {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin: 45px 0;
}

.creator-options span {
    padding: 8px 12px;

    border: 1px solid rgba(221, 213, 200, 0.3);

    font-family: monospace;

    font-size: 9px;
    letter-spacing: 0.12em;
}

.creator-note {
    font-size: 11px !important;

    opacity: 0.45;
}


/* ------------------------------------------------------------
   COLLABORATION
   ------------------------------------------------------------ */

.projects-collaboration {
    padding: 150px 9vw;

    border-bottom: 1px solid rgba(221, 213, 200, 0.15);
}

.collaboration-layout {
    display: grid;

    grid-template-columns:
        1fr
        0.6fr;

    gap: 12vw;

    margin-top: 100px;
}

.collaboration-statement {
    display: flex;
    flex-direction: column;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: clamp(48px, 7vw, 100px);

    line-height: 0.82;

    letter-spacing: -0.05em;
}

.collaboration-statement span:nth-child(2) {
    margin-left: 8vw;
}

.collaboration-statement span:nth-child(3) {
    margin-left: 2vw;
}

.collaboration-text {
    max-width: 420px;
}


/* ------------------------------------------------------------
   SELECTED WORK
   ------------------------------------------------------------ */

.projects-selected {
    padding: 140px 9vw;

    border-bottom: 1px solid rgba(221, 213, 200, 0.15);
}

.selected-heading {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    margin:
        100px
        0
        80px;
}

.selected-heading span {
    max-width: 180px;

    font-family: monospace;

    font-size: 9px;
    line-height: 1.6;

    letter-spacing: 0.14em;

    opacity: 0.4;
}


/* ------------------------------------------------------------
   EXISTING PROJECT CARDS
   ------------------------------------------------------------ */

#projects-root {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 1px;

    background: rgba(221, 213, 200, 0.2);
}

#projects-root > h4 {
    display: none;
}

.project-card {
    min-height: 330px;

    padding: 35px;

    background: #171412;

    position: relative;

    transition:
        background 0.4s ease;
}

.project-card:hover {
    background: #211c18;
}

.project-card h5 {
    margin: 55px 0 20px;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 34px;

    line-height: 0.95;

    font-weight: 400;

    letter-spacing: -0.035em;
}

.project-meta {
    font-family: monospace;

    font-size: 9px;

    letter-spacing: 0.12em;

    opacity: 0.45;
}

.project-card > div:not(.project-meta) {
    max-width: 330px;

    margin-top: 30px;

    font-size: 12px;

    line-height: 1.65;

    opacity: 0.6;
}

.project-card button {
    position: absolute;

    right: 30px;
    bottom: 28px;

    background: none;

    border: 0;

    border-bottom: 1px solid currentColor;

    color: inherit;

    padding: 5px 0;

    font-family: monospace;

    font-size: 9px;

    letter-spacing: 0.15em;

    cursor: pointer;
}


/* ------------------------------------------------------------
   FINAL CTA
   ------------------------------------------------------------ */

.projects-final {
    min-height: 90vh;

    padding: 140px 9vw;

    display: flex;
    flex-direction: column;
    justify-content: center;

    position: relative;
}

.projects-final-small {
    font-family: monospace;

    font-size: 10px;

    letter-spacing: 0.18em;

    opacity: 0.4;

    margin-bottom: 55px;
}

.projects-final h2 {
    max-width: 900px;
}

.projects-final-button {
    width: fit-content;

    margin-top: 80px;

    padding: 16px 22px;

    border: 1px solid rgba(221, 213, 200, 0.45);

    color: #ddd5c8;

    text-decoration: none;

    font-family: monospace;

    font-size: 10px;

    letter-spacing: 0.15em;

    transition:
        background 0.35s ease,
        color 0.35s ease;
}

.projects-final-button:hover {
    background: #ddd5c8;
    color: #171412;
}


/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 800px) {

    .projects-home {
        top: 20px;
        left: 20px;
    }

    .projects-hero,
    .projects-explanation,
    .projects-categories,
    .projects-process,
    .projects-creator-control,
    .projects-collaboration,
    .projects-selected,
    .projects-final {
        padding-left: 7vw;
        padding-right: 7vw;
    }

    .projects-hero h1 {
        font-size: 18vw;
    }

    .projects-intro,
    .projects-submit {
        margin-left: 0;
    }

    .projects-explanation-content,
    .projects-category-intro,
    .creator-control-layout,
    .collaboration-layout {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .project-category-grid,
    #projects-root {
        grid-template-columns: 1fr;
    }

    .project-category:nth-child(odd) {
        border-right: 0;
    }

    .project-category {
        min-height: 260px;
    }

    .selected-heading {
        display: block;
    }

    .selected-heading span {
        display: block;
        margin-top: 30px;
    }

    .process-step {
        grid-template-columns: 50px 1fr;
    }
}
/* ============================================================
   PROJECT CARD — EDITORIAL VERSION
   ============================================================ */

.project-card {
    min-height: 430px;
    padding: 30px;

    position: relative;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.project-card::before {
    content: '';

    position: absolute;

    width: 180px;
    height: 180px;

    right: -60px;
    top: -60px;

    border: 1px solid rgba(221, 213, 200, 0.12);

    border-radius: 50%;

    transition:
        transform 0.6s ease,
        border-color 0.6s ease;
}

.project-card:hover::before {
    transform: scale(1.8);

    border-color:
        rgba(182, 138, 114, 0.25);
}

.project-card-number {
    font-family: monospace;

    font-size: 9px;

    letter-spacing: 0.15em;

    opacity: 0.35;
}

.project-card-type {
    margin-top: 28px;

    font-family: monospace;

    font-size: 9px;

    letter-spacing: 0.18em;

    color: #b68a72;
}

.project-card-title {
    max-width: 520px;

    margin:
        45px
        0
        0;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(34px, 4vw, 62px);

    line-height: 0.88;

    font-weight: 400;

    letter-spacing: -0.045em;
}

.project-card-description {
    max-width: 390px;

    margin-top: 30px;

    font-size: 12px;

    line-height: 1.7;

    color:
        rgba(221, 213, 200, 0.58);
}

.project-card-meta {
    margin-top: auto;

    padding-top: 35px;

    font-family: monospace;

    font-size: 9px;

    letter-spacing: 0.12em;

    opacity: 0.42;
}

.project-card-looking {
    margin-top: 18px;

    display: flex;
    flex-direction: column;

    gap: 7px;
}

.project-card-looking-label {
    font-family: monospace;

    font-size: 8px;

    letter-spacing: 0.16em;

    opacity: 0.3;
}

.project-card-looking-value {
    font-size: 10px;

    color:
        rgba(221, 213, 200, 0.55);
}

.project-card-open {
    position: absolute;

    right: 30px;
    bottom: 28px;

    border: 0;

    background: none;

    color: inherit;

    font-family: monospace;

    font-size: 9px;

    letter-spacing: 0.15em;

    cursor: pointer;
}

.project-card-open span {
    display: inline-block;

    margin-left: 8px;

    transition:
        transform 0.3s ease;
}

.project-card:hover .project-card-open span {
    transform:
        translate(5px, -5px);
}

/* ============================================================
   WINDERVALE — SUBMIT WORK
   Soft editorial pink / black
   ============================================================ */

.submit-page {
    margin: 0;
    background: #f4c7d7;
    color: #090909;
    font-family: Arial, Helvetica, sans-serif;
    min-height: 100vh;
}


/* ============================================================
   HOME MARK
   ============================================================ */

.submit-home {
    position: fixed;
    top: 28px;
    left: 32px;

    z-index: 20;

    color: #090909;
    text-decoration: none;

    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.08em;

    transition: opacity 0.2s ease;
}

.submit-home:hover {
    opacity: 0.55;
}


/* ============================================================
   MAIN
   ============================================================ */

.submit-experience {
    width: 100%;
    max-width: 1500px;

    margin: 0 auto;

    padding: 130px 7vw 120px;
}


/* ============================================================
   HERO
   ============================================================ */

.submit-hero {
    min-height: 75vh;

    display: flex;
    flex-direction: column;
    justify-content: center;

    border-bottom: 2px solid #090909;

    padding-bottom: 90px;
}


.submit-eyebrow {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.14em;

    margin-bottom: 35px;
}


.submit-hero h1 {
    margin: 0;

    max-width: 900px;

    font-family: "Arial Black", Arial, Helvetica, sans-serif;

    font-size: clamp(70px, 11vw, 170px);
    line-height: 0.82;

    letter-spacing: -0.075em;

    text-transform: uppercase;
}


.submit-intro {
    max-width: 620px;

    margin-top: 55px;

    font-size: 18px;
    line-height: 1.45;
    font-weight: 600;
}


/* ============================================================
   SECTION NUMBERS
   ============================================================ */

.submit-section-number {
    margin-bottom: 55px;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 0.14em;

    border-top: 2px solid #090909;

    padding-top: 14px;
}


/* ============================================================
   SECTIONS
   ============================================================ */

.submit-section {
    padding: 110px 0;

    border-bottom: 2px solid #090909;
}


/* ============================================================
   TWO COLUMN LAYOUT
   ============================================================ */

.submit-layout {
    display: grid;

    grid-template-columns:
        minmax(280px, 0.8fr)
        minmax(300px, 1fr);

    gap: 10vw;
}


.submit-layout h2 {
    margin: 0;

    font-family: "Arial Black", Arial, Helvetica, sans-serif;

    font-size: clamp(48px, 6vw, 90px);
    line-height: 0.88;

    letter-spacing: -0.065em;

    text-transform: uppercase;
}


.submit-text {
    max-width: 620px;

    font-size: 17px;
    line-height: 1.55;
    font-weight: 600;
}


.submit-text p {
    margin: 0 0 28px;
}


/* ============================================================
   IMPORTANT NOTICE
   ============================================================ */

.submit-notice {
    margin-top: 45px;

    padding: 25px;

    border: 2px solid #090909;

    background: rgba(255,255,255,0.16);
}


.submit-notice strong {
    display: block;

    margin-bottom: 10px;

    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.08em;
}


/* ============================================================
   FORM
   ============================================================ */

.submit-form {
    width: 100%;
}


.form-group {
    margin-bottom: 45px;
}


.form-group label {
    display: block;

    margin-bottom: 12px;

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 0.1em;
    text-transform: uppercase;
}


.form-group small {
    display: block;

    margin-top: 8px;

    font-size: 12px;
    line-height: 1.4;
    font-weight: 600;
}


/* ============================================================
   INPUTS
   ============================================================ */

.submit-form input,
.submit-form textarea,
.submit-form select {

    width: 100%;

    box-sizing: border-box;

    border: 0;
    border-bottom: 2px solid #090909;

    border-radius: 0;

    background: transparent;

    color: #090909;

    padding: 13px 2px;

    font-family: inherit;

    font-size: 17px;
    font-weight: 600;

    outline: none;

    transition:
        background 0.2s ease,
        padding 0.2s ease;
}


.submit-form textarea {
    min-height: 130px;

    resize: vertical;
}


.submit-form select {
    cursor: pointer;
}


.submit-form input:focus,
.submit-form textarea:focus,
.submit-form select:focus {
    background: rgba(255,255,255,0.18);

    padding-left: 10px;
}


/* ============================================================
   RADIO / CHECKBOX OPTIONS
   ============================================================ */

.form-options {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}


.form-option {
    position: relative;
}


.form-option input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.form-option label {
    display: block;

    padding: 13px 18px;

    border: 2px solid #090909;

    cursor: pointer;

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 0.06em;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


.form-option label:hover {
    background: rgba(255,255,255,0.2);
}


.form-option input:checked + label {
    background: #090909;

    color: #f4c7d7;
}


/* ============================================================
   VERIFICATION BLOCK
   ============================================================ */

.submit-verification {
    margin-top: 35px;

    border: 2px solid #090909;

    padding: 28px;

    background: rgba(255,255,255,0.12);
}


.submit-verification-title {
    margin-bottom: 12px;

    font-size: 13px;
    font-weight: 900;

    letter-spacing: 0.08em;
}


.submit-verification p {
    margin: 0;

    max-width: 650px;

    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
}


/* ============================================================
   SUBMIT BUTTON
   ============================================================ */

.submit-button {
    display: inline-flex;

    align-items: center;
    justify-content: space-between;

    gap: 40px;

    min-width: 250px;

    padding: 18px 22px;

    border: 2px solid #090909;

    background: #090909;

    color: #f4c7d7;

    text-decoration: none;

    font-size: 13px;
    font-weight: 900;

    letter-spacing: 0.08em;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


.submit-button:hover {
    background: transparent;

    color: #090909;

    transform: translateY(-3px);
}


/* ============================================================
   FOOTNOTE
   ============================================================ */

.submit-footnote {
    max-width: 600px;

    margin-top: 30px;

    font-size: 11px;
    line-height: 1.5;

    font-weight: 600;

    opacity: 0.75;
}


/* ============================================================
   FINAL STATEMENT
   ============================================================ */

.submit-final {
    padding: 140px 0 80px;
}


.submit-final h2 {
    margin: 0;

    font-family: "Arial Black", Arial, Helvetica, sans-serif;

    font-size: clamp(55px, 9vw, 130px);

    line-height: 0.82;

    letter-spacing: -0.07em;

    text-transform: uppercase;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 800px) {

    .submit-home {
        top: 20px;
        left: 20px;
    }


    .submit-experience {
        padding:
            100px 22px 70px;
    }


    .submit-hero {
        min-height: 65vh;

        padding-bottom: 60px;
    }


    .submit-hero h1 {
        font-size: clamp(
            58px,
            17vw,
            100px
        );
    }


    .submit-intro {
        font-size: 16px;
    }


    .submit-section {
        padding: 75px 0;
    }


    .submit-layout {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .submit-layout h2 {
        font-size: 55px;
    }


    .submit-form input,
    .submit-form textarea,
    .submit-form select {
        font-size: 16px;
    }


    .submit-button {
        width: 100%;
    }


    .submit-final {
        padding-top: 90px;
    }

}