/* Sierra Connect Media design tokens
   Canvas is true black per brief. The photographs supply all chroma.
   --accent and --focus are the two exact hex values sampled from the logo.
   Accent appears in two places only: active nav, progress hairline.
   Focus (brand green) appears only on keyboard focus, so the two never
   read as the same signal. Neither is ever used as a fill. */
:root{
  --bg:#000000;
  --text:#EDEFF2;
  --muted:#9A9EA5;      /* prose, captions, lifted for legibility */
  --nav-rest:#8C9198;   /* nav at rest */
  --hover:#FFFFFF;
  --accent:#567FC0;     /* Sierra Blue, sampled from logo. Hairline, rules. */
  --accent-nav:#8FB0DC; /* same hue lifted for text on black (9.4:1) */
  --focus:#40B754;      /* Sierra Green, sampled from logo. Focus ring only. */
  --divider:rgba(237,239,242,0.12);
  --rail:290px;
  --pad:44px;
  --fade:250ms;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:400;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
}

/* Jost is the display face: geometric, wide-tracked, closer to the
   reference site's character than Inter, which reads as a UI default.
   Inter stays for long-form prose, where it is the more readable of the two. */
.wordmark,.nav,.counter,.caption,.prose h1,.prose .label,.field label,.submit{
  font-family:'Jost','Futura','Century Gothic','Inter',sans-serif;
}

a{color:inherit;text-decoration:none}

:focus-visible{
  outline:1px solid var(--focus);
  outline-offset:3px;
}

.skip{
  position:absolute;left:-9999px;top:0;
  padding:10px 14px;background:#111;color:var(--text);z-index:99;
}
.skip:focus{left:8px;top:8px}

/* ---------- frame ---------- */
.layout{
  display:grid;
  grid-template-columns:var(--rail) 1fr;
  height:100vh;
  height:100dvh;
}

/* ---------- nav rail ---------- */
.rail{
  padding:var(--pad) 16px var(--pad) var(--pad);
  overflow-y:auto;
  scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none}

.wordmark{
  font-size:19px;
  font-weight:500;
  letter-spacing:0.13em;
  text-transform:uppercase;
  line-height:1.4;
  color:var(--text);
  display:block;
  margin-bottom:52px;
}
.wordmark .wm1{display:block;white-space:nowrap}
.wordmark .wm2{display:block;color:var(--muted);font-weight:300}

/* logo variants */
.wordmark--mark img{
  display:block;
  width:104px;height:auto;
  margin-bottom:18px;
}
.wordmark--lockup{margin-bottom:44px}
.wordmark--lockup img{display:block;width:190px;height:auto}

.nav{display:block}
.nav a,.nav button{
  display:block;
  width:100%;
  text-align:left;
  font:inherit;
  font-family:'Jost','Futura','Century Gothic','Inter',sans-serif;
  font-size:13px;
  font-weight:400;
  letter-spacing:0.13em;
  text-transform:uppercase;
  line-height:31px;
  color:var(--nav-rest);
  background:none;
  border:0;
  cursor:pointer;
  transition:color 150ms ease;
}
.nav a:hover,.nav button:hover{color:var(--hover)}
.nav a.is-active{color:var(--accent-nav);font-weight:500}

.nav-group{margin-bottom:34px}

/* sub-tier */
.subtier{
  overflow:hidden;
  max-height:0;
  transition:max-height 240ms ease;
}
.subtier.is-open{max-height:280px}
.subtier a{padding-left:14px;font-size:12px;line-height:29px}
.tier-toggle::after{
  content:' +';
  color:var(--muted);
}
.tier-toggle[aria-expanded="true"]::after{content:' \2212'}

/* ---------- stage ----------
   The photograph is the page. It fills the stage edge to edge with no
   margin; caption and counter sit on a scrim over the bottom of it. */
.stage{
  position:relative;
  padding:0;
  min-width:0;
  height:100vh;
  height:100dvh;
  overflow:hidden;
}

.viewer{
  position:absolute;
  inset:0;
  cursor:none;
}

.viewer img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  opacity:1;
  transition:opacity var(--fade) ease;
}
.viewer.is-swapping img{opacity:0}

/* floor plans and other flat artwork must not be cropped */
.stage--contain .viewer{padding:var(--pad) var(--pad) 90px}
.stage--contain .viewer img{object-fit:contain}

/* ---------- meta row ---------- */
.meta{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:2;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  padding:130px var(--pad) 30px;
  pointer-events:none;
  background:linear-gradient(to top,
    rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.80) 26%,
    rgba(0,0,0,0.45) 58%, rgba(0,0,0,0) 100%);
}
.meta a{pointer-events:auto}
/* the note sits on photography, so it needs more weight than prose grey */
.meta .note{color:rgba(237,239,242,0.88)}

.caption{
  font-size:14px;
  line-height:1.5;
  color:var(--text);
  letter-spacing:0.09em;
  text-transform:uppercase;
  font-weight:500;
  max-width:62ch;
}
.caption strong{font-weight:500;color:var(--text)}

/* craft note: the standard this frame was shot to */
.note{
  font-size:13px;
  line-height:1.65;
  color:var(--muted);
  letter-spacing:0.01em;
  max-width:58ch;
  margin-top:9px;
}
.meta-text{min-width:0}

.counter{
  font-size:12px;
  color:var(--muted);
  letter-spacing:0.13em;
  text-transform:uppercase;
  white-space:nowrap;
  display:flex;
  gap:22px;
  align-items:center;
}
.counter a{transition:color 150ms ease}
.counter a:hover{color:var(--hover)}
.counter .is-off{visibility:hidden}

/* signature: position hairline instead of carousel dots */
.progress{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:3;
  height:2px;
  background:rgba(237,239,242,0.14);
}
.progress-fill{
  position:absolute;
  left:0;top:0;height:2px;
  background:var(--accent);
  transition:width 250ms ease;
}

/* ---------- directional cursor ---------- */
.dcursor{
  position:fixed;
  top:0;left:0;
  z-index:50;
  pointer-events:none;
  font-size:10px;
  letter-spacing:0.12em;
  color:var(--hover);
  mix-blend-mode:difference;
  transform:translate(-50%,-50%);
  opacity:0;
  transition:opacity 150ms ease;
}
.dcursor.is-visible{opacity:1}

/* ---------- text routes ---------- */
.stage--text{
  padding:var(--pad);
  overflow-y:auto;
  height:100vh;
  height:100dvh;
  scrollbar-width:none;
}
.stage--text::-webkit-scrollbar{display:none}

.prose{
  max-width:66ch;
  padding-bottom:70px;
}
.prose h1{
  font-size:22px;
  font-weight:500;
  letter-spacing:0.13em;
  text-transform:uppercase;
  margin-bottom:42px;
  color:var(--text);
}
.prose p{
  font-size:17px;
  line-height:1.75;
  color:var(--muted);
  margin-bottom:24px;
}
.prose p strong{color:var(--text);font-weight:500}
.prose a{
  color:var(--text);
  border-bottom:1px solid var(--divider);
  transition:border-color 150ms ease;
}
.prose a:hover{border-color:var(--accent-nav)}
.prose .lede{color:var(--text);font-size:19px;line-height:1.65}
.prose .quote{
  color:var(--text);
  font-size:19px;
  line-height:1.65;
  margin:38px 0;
  padding-left:24px;
  border-left:2px solid var(--accent);
}
.prose .attrib{
  display:block;
  margin-top:14px;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.prose ul{list-style:none;margin-bottom:24px}
.prose li{
  font-size:17px;
  line-height:1.95;
  color:var(--muted);
}
.prose .dl{
  font-size:17px;
  line-height:1.75;
  color:var(--muted);
  margin-bottom:8px;
}
.prose .label{
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--accent-nav);
  margin:46px 0 16px;
}

/* ---------- form ----------
   Per the spec's escape hatch: hairline fields, no fills, no radius,
   and the submit is a letterspaced lowercase text link, not a button. */
.form{margin-top:34px;max-width:64ch}
.field{margin-bottom:22px}
.field label{
  display:block;
  font-size:10px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px;
}
.field input,.field textarea{
  width:100%;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--divider);
  border-radius:0;
  padding:8px 0;
  color:var(--text);
  font:inherit;
  font-size:15px;
  transition:border-color 150ms ease;
}
.field input:focus,.field textarea:focus{
  outline:none;
  border-bottom-color:var(--accent);
}
.field textarea{resize:vertical;min-height:90px}
.field input::placeholder,.field textarea::placeholder{color:#4A4D52}

.checks{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:4px}
.checks label{
  display:flex;align-items:center;gap:8px;
  font-size:13px;letter-spacing:0.02em;text-transform:none;
  color:var(--muted);cursor:pointer;margin:0;
}
.checks input{width:auto;accent-color:var(--accent)}

.hp{position:absolute;left:-9999px}

.submit{
  background:none;border:0;padding:0;
  font:inherit;font-size:12px;letter-spacing:0.12em;
  color:var(--text);cursor:pointer;
  border-bottom:1px solid var(--accent);
  padding-bottom:3px;
  transition:color 150ms ease;
}
.submit:hover{color:var(--hover)}
.submit[disabled]{color:var(--muted);cursor:default}

.form-status{
  font-size:13px;line-height:1.6;color:var(--muted);margin-top:18px;
}
.form-status.is-error{color:#E0736B}
.form-note{font-size:10px;color:var(--muted);margin-top:10px;opacity:0.8}

/* ---------- mobile ---------- */
.railtop{display:none}

@media (max-width:900px){
  :root{--pad:22px}
  body{overflow:auto}
  .layout{grid-template-columns:1fr;height:auto}

  .railtop{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px var(--pad);
    border-bottom:1px solid var(--divider);
    position:sticky;top:0;z-index:20;
    background:var(--bg);
  }
  .railtop .wordmark{margin:0;font-size:15px}
  .railtop .wordmark--mark img{width:58px;margin-bottom:7px}
  .menu-btn{
    background:none;border:0;color:var(--muted);
    font-family:'Jost','Inter',sans-serif;
    font-size:12px;letter-spacing:0.14em;text-transform:uppercase;cursor:pointer;
  }

  .rail{
    padding:18px var(--pad) 26px;
    border-bottom:1px solid var(--divider);
    display:none;
  }
  .rail.is-open{display:block}
  .rail > .wordmark{display:none}
  .nav a,.nav button{font-size:14px;line-height:36px}
  .subtier a{font-size:13px;line-height:33px}

  .stage{height:auto;min-height:0}
  .viewer{position:relative;inset:auto;cursor:pointer}
  .viewer img{height:auto;max-height:70vh;object-fit:cover}
  .stage--contain .viewer{padding:0}
  .stage--contain .viewer img{object-fit:contain;max-height:60vh}

  .meta{
    position:relative;
    padding:16px var(--pad) 26px;
    background:none;
    flex-direction:column;align-items:flex-start;gap:12px;
  }
  .progress{position:relative}
  .caption{font-size:13px}
  .note{font-size:14px}
  .counter .is-off{display:none}

  .dcursor{display:none}
  .stage--text{display:block;overflow:visible;height:auto;padding:26px var(--pad) 50px}
  .prose h1{font-size:19px;margin-bottom:30px}
  .prose p,.prose li,.prose .dl{font-size:16px}
  .prose .lede,.prose .quote{font-size:17px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}