/* enclave.us.com - Enclave's own look (bhclipping/ui/theme.py): near-black warm greys so
   the footage brings the colour, ember for the one main action, amber for the small marks,
   square corners and the 45-degree notch on what matters. */
:root {
  --ground: #0C0A09; --bar: #12100E; --raised: #181513; --control: #1F1B18; --lift: #342D29;
  --line: #211D1A; --line2: #2E2824; --line3: #3F3732;
  --text: #F5F1EC; --text2: #ADA59D; --muted: #918880; --faint: #635A53;
  --brand: #C55100; --brand-hover: #D45900; --brand-pressed: #A84500; --amber: #FF9A1F; --rec: #E8352B;
  --display: "Bahnschrift", "DIN Alternate", "D-DIN", "Barlow", "Segoe UI", system-ui, sans-serif;
  --body: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--ground); color: var(--text); font: 16px/1.6 var(--body);
       -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body { overflow-x: hidden; }
a { color: inherit; }
/* height: auto - an img's height="" would otherwise stay put while the width
   shrinks to fit, squashing the picture sideways. */
img { display: block; max-width: 100%; height: auto; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

/* ---------------------------------------------------------------- the bar */
.top { position: sticky; top: 0; z-index: 10; height: 64px; background: var(--bar);
       border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; height: 100%; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 28px; height: 28px; }
.wordmark { font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: .8px; }
.tag { font-family: var(--display); font-size: 12px; color: var(--muted); padding-top: 3px; }
.top nav { margin-left: auto; display: flex; align-items: center; }
.top nav a.link { color: var(--text2); text-decoration: none; font-weight: 600; font-size: 14px;
                  padding: 0 12px; line-height: 62px; border-bottom: 2px solid transparent; }
.top nav a.link:hover { color: var(--text); border-bottom-color: var(--amber); }
.top nav .button { margin-left: 14px; }

/* ---------------------------------------------------------------- buttons */
.button { --notch: 9px; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px;
          background: var(--brand); color: #fff; font-weight: 600; font-size: 15px; text-decoration: none;
          clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%); }
.button:hover { background: var(--brand-hover); }
.button:active { background: var(--brand-pressed); }
.button:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.button svg { width: 18px; height: 18px; flex: none; }
.button.big { --notch: 14px; height: 58px; padding: 0 28px; font-size: 17px; }
.button.small { --notch: 7px; height: 36px; padding: 0 15px; font-size: 14px; }
.button .size { font-family: var(--display); font-size: 12px; font-weight: 700; background: rgba(0,0,0,.28);
                padding: 2px 8px; margin-left: 4px; }

/* ---------------------------------------------------------------- hero */
.hero { padding: 76px 0 0; }
.eyebrow { font-family: var(--display); font-size: 14px; color: var(--muted); letter-spacing: .4px; }
.hero h1 { font-family: var(--display); font-weight: 600; font-size: clamp(40px, 6.4vw, 68px); line-height: 1.02;
           letter-spacing: -.5px; margin: 10px 0 22px; max-width: 11.5em; }
.lede { font-size: 19px; color: var(--text2); max-width: 34em; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin-top: 34px; }
.facts { color: var(--muted); font-size: 14px; }
.facts b { font-family: var(--display); color: var(--text2); font-weight: 600; }
kbd { font-family: var(--display); font-size: .82em; font-weight: 600; color: var(--text); background: var(--control);
      border-bottom: 2px solid var(--lift); padding: 1px 7px; white-space: nowrap; }

.shot { --notch: 22px; margin-top: 56px; background: var(--line2); padding: 1px;
        clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%); }
.shot img { width: 100%; height: auto; clip-path: polygon(0 0, calc(100% - var(--notch) + 1px) 0, 100% calc(var(--notch) - 1px), 100% 100%, 0 100%); }
figcaption { font-size: 13px; color: var(--muted); margin-top: 12px; }

/* Click a picture: it opens as big as the screen allows; click again (or Esc) to put it back. */
.shot img { cursor: zoom-in; }
.shot img:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.zoomed { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
          padding: 4vh 3vw 7vh; background: rgba(8, 7, 6, .94); cursor: zoom-out;
          opacity: 0; transition: opacity .15s ease; }
.zoomed.open { opacity: 1; }
.zoomed img { width: auto; height: auto; max-width: 100%; max-height: 100%;
              clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.zoomed p { position: absolute; left: 0; right: 0; bottom: 2.4vh; text-align: center;
            color: var(--muted); font-size: 13px; }
body.zooming { overflow: hidden; }

/* ---------------------------------------------------------------- keys */
.keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line);
        border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 72px; }
.keys > div { background: var(--ground); padding: 26px 28px; display: flex; align-items: center; gap: 16px; }
.keys .cap { font-family: var(--display); font-size: 17px; font-weight: 600; background: var(--control);
             border-bottom: 2px solid var(--lift); padding: 6px 12px; white-space: nowrap; }
.keys span:last-child { color: var(--text2); font-size: 15px; line-height: 1.35; }

/* ---------------------------------------------------------------- sections */
section.part { padding: 96px 0 0; }
.part-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 30px; }
h2 { font-family: var(--display); font-weight: 600; font-size: 34px; line-height: 1.1; }
.part-head .aside { color: var(--muted); font-size: 15px; }

.squares { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 56px; }
.squares li { position: relative; padding-left: 20px; color: var(--text2); font-size: 15.5px; }
.squares li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 6px; height: 6px;
                      background: var(--amber); }
.squares li b { color: var(--text); font-weight: 600; }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.pair .shot { margin-top: 0; }

/* What's new: as the app shows it */
.notes { max-width: 760px; }
.notes h3 { font-family: var(--display); font-weight: 600; font-size: 19px; margin: 26px 0 10px; }
.notes h3:first-child { margin-top: 0; }
.notes ul { list-style: none; }
.notes li { position: relative; padding-left: 20px; color: var(--text2); margin: 7px 0; }
.notes li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 5px; height: 5px;
                    background: var(--amber); }
.notes li b { color: var(--text); font-weight: 600; }
.released { color: var(--muted); font-size: 14px; margin-top: 6px; }

/* Help */
.help { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line);
        border: 1px solid var(--line); }
.help > div { background: var(--ground); padding: 26px 28px 30px; }
.help h3 { font-family: var(--display); font-weight: 600; font-size: 18px; margin-bottom: 8px; }
.help p { color: var(--text2); font-size: 15px; }
.help p + p { margin-top: 8px; }

/* The last word */
.again { margin-top: 110px; padding: 64px 0; background: var(--bar); border-top: 1px solid var(--line); }
.again .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 40px; }
.again h2 { font-size: 30px; }
.again .facts { flex-basis: 100%; }
footer { padding: 26px 0 40px; color: var(--muted); font-size: 13px; background: var(--bar); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
footer a { text-decoration: none; color: var(--text2); }
footer a:hover { color: var(--text); }
footer .right { margin-left: auto; }

/* ---------------------------------------------------------------- narrow */
@media (max-width: 860px) {
  .wrap { padding: 0 20px; }
  .top nav a.link { display: none; }
  .hero { padding-top: 48px; }
  .keys, .help, .pair, .squares { grid-template-columns: 1fr; }
  .squares { gap: 14px; }
  section.part { padding-top: 72px; }
  .part-head { flex-direction: column; gap: 4px; }
  footer .right { margin-left: 0; }
}