body { margin: 0; }

  /* Layout: full-bleed sunset hero. On desktop every text block sits at the position it has in the
     original layout (percent of hero). Below 760px they stack. Type is Barlow for now, standing in
     for Avenir Next; swap the two font variables to change it everywhere. */
  :root {
    --ink: #4a5361;
    --paper: #ffffff;
    --ember: #ef7a2a;
    --gold: #fcd13d;
    --deep: #111d27;
    --kelp: #23474f;
    --tide: #155a9b;
    --shallows: #429fe2;
    --font-cond: "Barlow Condensed", "Arial Narrow", sans-serif;
    --font-reg: "Barlow", "Helvetica Neue", Arial, sans-serif;
    color-scheme: dark;
  }
  * { box-sizing: border-box; }
  body {
    background: var(--deep);
    color: var(--paper);
    font-family: var(--font-reg);
  }
  a { color: inherit; text-decoration: none; }
  a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

  .hero {
    position: relative;
    min-height: clamp(470px, 45.6vw, 780px);
    background-color: #2b3f55;
    background-image: url("assets/hero-sunset-flipped.jpg");
    background-size: cover;
    background-position: 50% 62%;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
  }
  .hero > * { position: absolute; margin: 0; }

  /* Avenir Next Condensed Medium */
  .nav {
    left: 8.3%; top: 6.4%;
    display: flex; flex-wrap: wrap; gap: 8px 2.5vw;
    font-family: var(--font-cond);
    font-weight: 500;
    font-size: 2.2vw;
    line-height: 1.2;
  }
  .nav a:hover { color: var(--gold); }

  .menu-dots {
    right: 3.5%; top: 6.4%;
    display: grid; grid-template-columns: repeat(3, 3px); gap: 7px;
    opacity: 0.55;
  }
  .menu-dots i { width: 3px; height: 3px; border-radius: 50%; background: #fff; display: block; }

  .brand { left: 7%; top: 22.5%; text-shadow: none; line-height: 0; }
  .brand svg { display: block; width: 24.7vw; height: auto; fill: var(--ink); }

  /* Avenir Next Condensed Demi Bold */
  .tagline {
    left: 72.7%; top: 48.3%;
    font-family: var(--font-cond);
    font-weight: 600;
    font-size: 2.4vw;
    line-height: 1.46;
    white-space: nowrap;
  }

  /* Keyword: Avenir Next Condensed Heavy. Rest of the line: Avenir Next Regular. */
  .pillars {
    left: 72.7%; top: 71.3%;
    list-style: none; padding: 0;
    font-family: var(--font-reg);
    font-weight: 400;
    font-size: 1.75vw;
    line-height: 1.76;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
  .pillars b {
    font-family: var(--font-cond);
    font-weight:700;
    font-size: 1.14em;
    letter-spacing: 0.005em;
  }

  /* Avenir Next Condensed Heavy */
  .program {
    left: 8.2%; top: 78.5%;
    font-family: var(--font-cond);
    font-weight:700;
    font-size: 2.8vw;
    line-height: 1.1;
    white-space: nowrap;
  }

  .rule { height: clamp(18px, 2.2vw, 26px); background: linear-gradient(90deg, var(--ember) 0%, #f5a52f 62%, var(--gold) 100%); }

  .panel {
    min-height: clamp(520px, 62vw, 1000px);
    background: linear-gradient(100deg, var(--deep) 0%, var(--kelp) 20%, var(--tide) 56%, #2f84cf 84%, var(--shallows) 100%);
  }
  .panel div { min-height: 1px; }

  .signoff {
    background: linear-gradient(90deg, var(--ember) 0%, #f5a52f 62%, var(--gold) 100%);
    color: var(--deep);
    padding-block: clamp(32px, 5vw, 72px);
    padding-left: max(clamp(20px, 7vw, 100px), env(safe-area-inset-left, 0px));
    padding-right: max(clamp(20px, 7vw, 100px), env(safe-area-inset-right, 0px));
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 28px 48px;
  }
  .signoff > * { min-width: 0; }
  .signoff .logo { margin: 0 0 14px; line-height: 0; }
  .signoff .logo svg { display: block; width: clamp(210px, 22vw, 340px); height: auto; fill: var(--deep); }
  .signoff .line {
    margin: 0;
    font-family: var(--font-cond);
    font-weight: 600;
    font-size: clamp(20px, 1.9vw, 27px);
    letter-spacing: 0.02em;
  }
  .signoff .meta {
    margin: 10px 0 0;
    font-family: var(--font-reg);
    font-weight: 400;
    font-size: clamp(16px, 1.45vw, 21px);
    letter-spacing: 0.02em;
  }
  .signoff .contact {
    font-family: var(--font-reg);
    font-style: normal;
    font-weight: 400;
    font-size: clamp(16px, 1.45vw, 21px);
    line-height: 1.5;
    letter-spacing: 0.02em;
  }
  .signoff .contact .label {
    display: block;
    font-family: var(--font-cond);
    font-weight:700;
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 0.14em;
    opacity: 0.75;
  }
  .signoff .contact a { overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
  .signoff a:focus-visible { outline-color: var(--deep); }

  @media (max-width: 760px) {
    .hero {
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 30px;
      background-position: 56% 70%;
      padding-block: 20px 32px;
      padding-left: max(20px, env(safe-area-inset-left, 0px));
      padding-right: max(20px, env(safe-area-inset-right, 0px));
    }
    .hero::before {
      content: "";
      position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(8,16,24,0) 30%, rgba(8,16,24,0.62) 100%);
      pointer-events: none;
    }
    .hero > * { position: relative; left: auto; top: auto; }
    .nav { font-size: 22px; gap: 8px 22px; }
    .brand svg { width: min(270px, 70vw); }
    .tagline { font-size: 26px; }
    .pillars { font-size: 20px; }
    .program { font-size: 4.8vw; }
    .menu-dots { position: absolute; right: max(20px, env(safe-area-inset-right, 0px)); left: auto; top: 26px; }
  }
  @media (prefers-reduced-motion: no-preference) {
    .hero { animation: dawn 1.1s ease-out both; }
    @keyframes dawn { from { filter: brightness(0.82); } to { filter: brightness(1); } }
  }

/* ---- Panel content (added 2026-11-12 from agreed copy, site-copy-v2) ---- */
.panel{min-height:0;padding-block:clamp(48px,6vw,96px)}
.col{max-width:880px;margin-left:8.2%;margin-right:max(20px,6%)}
.sec{padding-block:clamp(36px,4.5vw,64px);border-top:1px solid rgba(255,255,255,.18)}
.sec:first-child{border-top:0;padding-top:0}
.sh{margin:0 0 14px;font-family:var(--font-cond);font-weight:700;font-size:clamp(46px,6vw,84px);line-height:1}
.lead{margin:0 0 22px;font-family:var(--font-cond);font-weight:600;font-size:clamp(25px,2.7vw,36px);line-height:1.2}
.sec p,.sec li{font-family:var(--font-reg);font-size:clamp(17px,1.45vw,20px);line-height:1.6;margin:0 0 16px}
.sec .lead{font-size:clamp(25px,2.7vw,36px);line-height:1.2}
.big{font-family:var(--font-cond)!important;font-weight:700;font-size:clamp(30px,3.6vw,48px)!important;line-height:1.05!important;color:var(--gold);margin-top:10px!important}
.sub{margin:36px 0 18px;font-family:var(--font-cond);font-weight:700;font-size:clamp(30px,3.4vw,44px);line-height:1}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.work-card{background:rgba(8,16,24,.38);border:1px solid rgba(255,255,255,.2);padding:22px 22px 8px;border-radius:3px}
.work-card[hidden]{display:none}
.work-card h3{margin:6px 0 10px;font-family:var(--font-cond);font-weight:700;font-size:28px;line-height:1.05}
.work-card p{font-size:17px!important;line-height:1.5!important}
.tag{font-family:var(--font-cond);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:14px;color:var(--gold)}
.steps{margin:0 0 20px;padding-left:1.3em}
.steps li b,.places li b{font-family:var(--font-cond);font-weight:700;font-size:1.12em}
.places{list-style:none;padding:0;margin:0 0 20px}
.places li b{display:inline-block;min-width:6.5em;color:var(--gold)}
.person{display:flex;flex-direction:column;gap:2px;font-size:20px}
.person span{font-family:var(--font-cond);font-weight:600;letter-spacing:.06em;color:var(--gold)}
.fine,.meta.fine{font-size:14px!important;opacity:.85}
.more{margin-top:24px!important}
.btn{display:inline-block;font-family:var(--font-cond);font-weight:700;font-size:22px;letter-spacing:.04em;text-transform:uppercase;color:var(--deep);padding:11px 26px;border-radius:2px;background:linear-gradient(90deg,var(--ember) 0%,#f5a52f 62%,var(--gold) 100%)}
.btn:hover{filter:brightness(1.08)}
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.doors>div{background:rgba(8,16,24,.38);border:1px solid rgba(255,255,255,.2);padding:22px;border-radius:3px;display:flex;flex-direction:column;align-items:flex-start}
.doors h3{margin:0 0 10px;font-family:var(--font-cond);font-weight:700;font-size:32px;text-transform:uppercase}
.doors p{flex:1}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 26px}
.filters button{font-family:var(--font-cond);font-weight:600;font-size:19px;letter-spacing:.04em;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.55);padding:7px 16px;border-radius:2px;cursor:pointer}
.filters button[aria-pressed="true"]{background:#fff;color:var(--deep)}
.back a{font-family:var(--font-cond);font-weight:600;font-size:20px}
.back a:hover{color:var(--gold)}
.slim{background:var(--deep);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px max(20px,8.2%)}
.slimlogo{font-family:"Cochin","Cormorant Garamond",Georgia,serif;font-style:italic;font-size:28px}
.nav2{display:flex;gap:22px;font-family:var(--font-cond);font-weight:500;font-size:22px}
.nav2 a:hover{color:var(--gold)}
html{scroll-behavior:smooth}
@media(max-width:760px){
  .col{margin-inline:20px}
  .cards,.doors{grid-template-columns:1fr}
  .places li b{display:block}
}

/* ---- Footer rearranged 2026-11-12: logo left, text right ---- */
.signoff{align-items:center}
.so-right{display:flex;align-items:center;gap:22px;margin-left:auto}
.so-right .qr{display:block;background:#fff;padding:6px;border-radius:2px;width:108px;height:108px}
.so-right .contact{display:flex;flex-direction:column;gap:2px;text-align:left}
.so-right .contact .org{font-family:var(--font-cond);font-weight:700;font-size:clamp(20px,1.9vw,27px);letter-spacing:.02em}
.so-right .contact a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
@media(max-width:760px){.so-right{margin-left:0;flex-wrap:wrap}}
.doors .give{flex:0 0 auto;font-size:16px!important;line-height:1.5!important;margin-bottom:22px;color:#fff}
.doors .give b{font-family:var(--font-cond);font-weight:700;letter-spacing:.04em;color:var(--gold)}
.fig{margin:28px 0 8px;padding:0}
.fig img{display:block;width:100%;max-width:880px;height:auto;border-radius:3px;border:1px solid rgba(255,255,255,.25)}
.fig figcaption{font-size:14px;opacity:.85;margin-top:10px}
.cardlink{margin:0 0 16px!important}
.cardlink a,.work-card h3 a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.cardlink a{font-family:var(--font-cond);font-weight:600;letter-spacing:.04em;color:var(--gold);font-size:19px}
.work-card h3 a:hover,.cardlink a:hover{color:var(--gold)}
.shifts{margin:0 0 20px;padding-left:1.3em}
.shifts li b{font-family:var(--font-cond);font-weight:700;font-size:1.08em}