:root {
      --bg: #F4F1ED;
      --bg2: #EDE8E1;
      --card: #E9E3DA;
      --ink: #0A1612;
      --muted: rgba(10, 22, 18, .64);
      --line: rgba(10, 22, 18, .16);
      --accent: #0A1612;
      --on-accent: #F4F1ED;
      --clay: #8C6444;
      --neon: #0B7A3B;
      --ok: #1F6B3B;
      --wait: #8A5A33;
      --no: #A33B2D;
      --shade: rgba(10, 22, 18, .06);
      --glass: rgba(10, 22, 18, .03);
      --sage: #7E9A8A;
      --hero: radial-gradient(circle at 70% 30%, #E6DFD5 0%, #F4F1ED 72%);
      --hov: #8C6444;
      --hov-ink: #F4F1ED;
      box-sizing: border-box;
      padding-top: env(safe-area-inset-top, 0px);
      padding-bottom: env(safe-area-inset-bottom, 0px)
    }

    @media (prefers-color-scheme:dark) {
      :root:not([data-theme="light"]) {
        --bg: #0A1612;
        --bg2: #13211C;
        --card: #1D2B26;
        --ink: #FDFDFD;
        --muted: rgba(253, 253, 253, .64);
        --line: rgba(255, 255, 255, .14);
        --accent: #FDFDFD;
        --on-accent: #0A1612;
        --clay: #B98D6B;
        --neon: #00FF66;
        --ok: #3DDC84;
        --wait: #E0B889;
        --no: #FF9D8F;
        --shade: rgba(255, 255, 255, .05);
        --glass: rgba(255, 255, 255, .03);
        --sage: #4F6B5E;
        --hero: radial-gradient(circle at 70% 30%, #1a2e28 0%, #0a1612 100%);
        --hov: #00FF66;
        --hov-ink: #0A1612;
      }
    }

    :root[data-theme="dark"] {
      --bg: #0A1612;
      --bg2: #13211C;
      --card: #1D2B26;
      --ink: #FDFDFD;
      --muted: rgba(253, 253, 253, .64);
      --line: rgba(255, 255, 255, .14);
      --accent: #FDFDFD;
      --on-accent: #0A1612;
      --clay: #B98D6B;
      --neon: #00FF66;
      --ok: #3DDC84;
      --wait: #E0B889;
      --no: #FF9D8F;
      --shade: rgba(255, 255, 255, .05);
      --glass: rgba(255, 255, 255, .03);
      --sage: #4F6B5E;
      --hero: radial-gradient(circle at 70% 30%, #1a2e28 0%, #0a1612 100%);
      --hov: #00FF66;
      --hov-ink: #0A1612;
    }

    html {
      scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 80px)
    }

    * {
      box-sizing: border-box;
      -webkit-font-smoothing: antialiased
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      font: 400 15px/1.6 Inter, system-ui, sans-serif;
      overflow-x: hidden
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0 0 auto;
      height: env(safe-area-inset-top, 0px);
      background: var(--bg);
      z-index: 60
    }

    body::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 9999;
      opacity: .045;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")
    }

    h1,
    h2,
    h3 {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-weight: 300;
      margin: 0;
      letter-spacing: 0
    }

    button {
      font: inherit;
      color: inherit;
      cursor: pointer
    }

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

    @keyframes pulse {

      0%,
      100% {
        opacity: 1;
        transform: scale(1)
      }

      50% {
        opacity: .4;
        transform: scale(1.2)
      }
    }

    @keyframes float {

      0%,
      100% {
        transform: translateY(0)
      }

      50% {
        transform: translateY(-12px)
      }
    }

    .skip {
      position: absolute;
      left: -999px
    }

    .skip:focus {
      left: 12px;
      top: 12px;
      z-index: 70;
      background: var(--ink);
      color: var(--bg);
      padding: 8px 12px;
      border-radius: 8px
    }

    .muted {
      color: var(--muted)
    }

    .small {
      font-size: 13px
    }

    /* header and nav */
    header {
      position: sticky;
      top: env(safe-area-inset-top, 0px);
      z-index: 50;
      display: flex;
      align-items: center;
      gap: 28px;
      padding: 18px 40px;
      background: color-mix(in srgb, var(--bg) 88%, transparent);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: .5px solid var(--line);
      flex-wrap: wrap
    }

    .brand {
      font: 500 1.4rem 'Cormorant Garamond', serif;
      letter-spacing: .18em;
      text-transform: uppercase;
      background: none;
      border: 0;
      padding: 0;
      color: var(--ink)
    }

    nav {
      display: flex;
      gap: 28px;
      align-items: center;
      margin-left: auto
    }

    nav>button,
    .ddt {
      background: none;
      border: 0;
      padding: 6px 0;
      color: var(--ink);
      opacity: .78;
      font-size: .85rem;
      letter-spacing: .05em;
      transition: .3s
    }

    nav button:hover,
    nav button[aria-current="true"] {
      opacity: 1;
      color: var(--clay)
    }

    nav button[hidden] {
      display: none
    }

    header label {
      font: .62rem 'Space Mono', monospace;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--muted)
    }

    .dd {
      position: relative
    }

    .ddm {
      display: none;
      position: absolute;
      top: calc(100% + 14px);
      right: 0;
      min-width: 220px;
      background: var(--bg2);
      border: .5px solid var(--line);
      border-radius: 14px;
      padding: 8px;
      backdrop-filter: blur(16px)
    }

    .dd.open .ddm {
      display: block
    }

    .ddm button {
      display: block;
      width: 100%;
      text-align: left;
      background: none;
      border: 0;
      padding: 10px 14px;
      border-radius: 8px;
      font-size: .85rem;
      opacity: .85
    }

    .ddm button:hover {
      background: var(--shade)
    }

    /* views */
    .view {
      display: none;
      padding: 32px 40px
    }

    .view.on {
      display: block
    }

    #home {
      padding: 0
    }

    .row {
      display: flex;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap
    }

    .ph {
      font-size: clamp(2.6rem, 6vw, 4.5rem);
      line-height: 1;
      font-weight: 300
    }

    .sec {
      font-size: 2rem;
      margin: 36px 0 8px
    }

    .sub {
      font-size: 1.3rem;
      margin: 18px 0 4px
    }

    .narrow {
      max-width: 680px
    }

    #dash,
    #wins,
    #reports {
      max-width: 1100px
    }

    /* buttons, chips, forms */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: transparent;
      color: var(--ink);
      border: .5px solid var(--line);
      padding: 9px 20px;
      border-radius: 100px;
      font: 400 .7rem 'Space Mono', monospace;
      letter-spacing: .08em;
      transition: .3s
    }

    .btn:hover {
      border-color: var(--ink)
    }

    .btn.primary {
      background: var(--accent);
      color: var(--on-accent);
      border-color: var(--accent);
      padding: 13px 30px;
      min-height: 44px;
      font-weight: 700
    }

    .btn.primary:hover {
      background: var(--hov);
      border-color: var(--hov);
      color: var(--hov-ink);
      transform: scale(1.02)
    }

    .btn[aria-pressed="true"] {
      border-color: var(--clay);
      color: var(--clay)
    }

    .btn:disabled {
      opacity: .4;
      cursor: not-allowed;
      transform: none
    }

    .chip {
      font: .68rem 'Space Mono', monospace;
      letter-spacing: .08em;
      padding: 6px 16px;
      border-radius: 100px;
      border: .5px solid var(--line);
      background: none;
      transition: .3s
    }

    .chip:hover {
      border-color: var(--ink)
    }

    .chip[aria-pressed="true"] {
      background: var(--clay);
      border-color: var(--clay);
      color: var(--bg)
    }

    .fld {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 20px
    }

    .fld label,
    label[for] {
      font: .6rem 'Space Mono', monospace;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--muted)
    }

    .fld input,
    .fld select,
    .fld textarea,
    textarea {
      width: 100%;
      background: var(--glass);
      border: .5px solid var(--line);
      border-radius: 10px;
      padding: 14px 18px;
      color: var(--ink);
      font: 300 .9rem Inter, sans-serif;
      outline: none;
      transition: .3s
    }

    .fld input:focus,
    .fld select:focus,
    .fld textarea:focus,
    textarea:focus {
      border-color: var(--clay);
      outline: none
    }

    textarea {
      min-height: 96px;
      resize: vertical
    }

    select option {
      background: var(--bg2);
      color: var(--ink)
    }

    .g2 {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 0 18px
    }

    .err {
      color: var(--no);
      min-height: 22px;
      font-size: 13px
    }

    .steps {
      display: flex;
      gap: 20px;
      list-style: none;
      padding: 0;
      margin: 0 0 28px;
      flex-wrap: wrap
    }

    .steps li {
      font: .62rem 'Space Mono', monospace;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--muted);
      padding-bottom: 8px;
      border-bottom: 1px solid var(--line)
    }

    .steps li.cur {
      color: var(--ink);
      border-color: var(--clay)
    }

    .steps li.dn {
      border-color: var(--sage)
    }

    /* hero */
    .hero {
      position: relative;
      overflow: hidden;
      min-height: 80vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 110px 60px 60px;
      background: var(--hero)
    }

    .hero h1 {
      font-size: clamp(3.4rem, 10vw, 7.5rem);
      line-height: .92;
      max-width: 11ch;
      position: relative;
      margin: 0 0 28px
    }

    .hero h1 em {
      font-style: italic;
      color: var(--clay)
    }

    .lead {
      font: 300 1.1rem/1.7 Inter, sans-serif;
      max-width: 420px;
      margin: 0 0 36px;
      position: relative;
      color: var(--muted)
    }

    .status {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      align-self: flex-start;
      position: relative;
      margin-bottom: 36px;
      padding: 10px 22px;
      border-radius: 100px;
      background: color-mix(in srgb, var(--neon) 7%, transparent);
      border: 1px solid color-mix(in srgb, var(--neon) 30%, transparent);
      font: .66rem 'Space Mono', monospace;
      letter-spacing: .08em;
      text-transform: uppercase
    }

    .status i {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--neon);
      box-shadow: 0 0 10px var(--neon);
      animation: pulse 2s infinite
    }

    .roots {
      position: absolute;
      right: -30px;
      top: 40px;
      width: min(55%, 620px);
      stroke: var(--clay);
      fill: none;
      stroke-width: 1.5;
      opacity: .45;
      animation: float 9s ease-in-out infinite
    }

    .band {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 32px;
      border-top: .5px solid var(--line);
      padding: 48px 60px
    }

    .band h3 {
      font-size: 1.8rem;
      margin-bottom: 4px
    }

    .prose {
      max-width: 62ch
    }

    .prose h1 {
      font-size: clamp(2.6rem, 6vw, 4.5rem);
      margin-bottom: 20px
    }

    .prose p {
      font: 300 1.15rem/1.75 'Cormorant Garamond', Georgia, serif;
      font-size: 1.35rem
    }

    /* calendar */
    .cal-head {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 20px
    }

    .cal-head h1 {
      font-size: clamp(2.6rem, 6vw, 4.5rem);
      line-height: 1
    }

    .cal-head .muted.small {
      font: .65rem 'Space Mono', monospace;
      text-transform: uppercase;
      letter-spacing: .1em
    }

    .scroll {
      overflow-x: auto
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(96px, 1fr));
      border-top: .5px solid var(--line);
      border-left: .5px solid var(--line);
      min-width: 700px
    }

    .dow {
      padding: 8px;
      font: .6rem 'Space Mono', monospace;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--muted);
      border-right: .5px solid var(--line);
      border-bottom: .5px solid var(--line)
    }

    .day {
      min-height: 92px;
      padding: 6px;
      border-right: .5px solid var(--line);
      border-bottom: .5px solid var(--line);
      display: flex;
      flex-direction: column;
      gap: 3px
    }

    .day.out {
      background: var(--shade);
      opacity: .5
    }

    .day b {
      font-weight: 400;
      font-size: 12px;
      color: var(--muted)
    }

    .win {
      display: block;
      width: 100%;
      text-align: left;
      font-size: 12px;
      padding: 3px 8px;
      border-radius: 100px;
      border: .5px solid transparent;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .t-EXHIBITION {
      background: var(--clay);
      color: var(--bg)
    }

    .t-SALON {
      background: var(--card);
      color: var(--ink);
      border-color: var(--line)
    }

    .t-RESIDENCY {
      background: color-mix(in srgb, var(--neon) 14%, transparent);
      color: var(--neon);
      border-color: color-mix(in srgb, var(--neon) 40%, transparent)
    }

    .t-CALL {
      background: transparent;
      border: .5px dashed var(--ink);
      color: var(--ink)
    }

    .drawer {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: min(440px, 100%);
      background: var(--bg2);
      border-left: .5px solid var(--line);
      padding: calc(28px + env(safe-area-inset-top, 0px)) 28px 28px;
      transform: translateX(102%);
      transition: transform .3s cubic-bezier(.22, .61, .36, 1);
      z-index: 80;
      overflow: auto
    }

    .drawer.on {
      transform: none
    }

    .drawer h2 {
      font-size: 2.4rem;
      line-height: 1.05;
      margin: 10px 0 12px
    }

    .roles label {
      display: flex;
      gap: 10px;
      padding: 10px 0;
      border-bottom: .5px solid var(--line);
      align-items: center;
      font: inherit;
      text-transform: none;
      letter-spacing: 0;
      color: var(--ink)
    }

    .meter {
      height: 4px;
      background: var(--shade);
      border-radius: 9px;
      overflow: hidden;
      margin: 6px 0
    }

    .meter i {
      display: block;
      height: 100%;
      background: var(--clay)
    }

    /* review */
    .rv {
      display: grid;
      grid-template-columns: 300px minmax(0, 1fr) 340px;
      border: .5px solid var(--line);
      border-radius: 16px;
      overflow: hidden;
      background: var(--glass);
      min-height: 70vh
    }

    .rv>section {
      padding: 18px;
      min-width: 0
    }

    .rv>section+section {
      border-left: .5px solid var(--line)
    }

    .q {
      display: flex;
      flex-direction: column;
      gap: 2px
    }

    .card {
      display: flex;
      gap: 10px;
      padding: 10px;
      border-radius: 10px;
      border: .5px solid transparent;
      background: none;
      text-align: left;
      width: 100%
    }

    .card[aria-current="true"] {
      background: var(--shade);
      border-color: var(--line)
    }

    .thumb {
      width: 44px;
      height: 44px;
      border-radius: 8px;
      flex: none
    }

    .dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-right: 6px;
      border: 1.5px solid currentColor
    }

    .s-pending {
      color: var(--wait)
    }

    .s-confirmed {
      color: var(--ok)
    }

    .s-confirmed .dot {
      background: currentColor
    }

    .s-waitlisted {
      color: var(--muted)
    }

    .s-declined {
      color: var(--no)
    }

    .stage {
      aspect-ratio: 4/3;
      border-radius: 12px;
      position: relative;
      overflow: hidden;
      margin-bottom: 10px
    }

    .stage .nav {
      position: absolute;
      bottom: 10px;
      right: 10px;
      display: flex;
      gap: 6px
    }

    .stage .nav button {
      border: 0;
      background: rgba(0, 0, 0, .5);
      color: #fff;
      border-radius: 99px;
      width: 32px;
      height: 32px
    }

    .view h2.title {
      font-size: 2.2rem;
      line-height: 1.1
    }

    .meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 18px;
      margin: 6px 0 14px;
      font: .65rem 'Space Mono', monospace;
      text-transform: uppercase;
      letter-spacing: .08em
    }

    .stmt {
      font: 300 1.35rem/1.6 'Cormorant Garamond', Georgia, serif;
      max-width: 62ch;
      margin: 0
    }

    .crit {
      margin: 12px 0
    }

    .crit .scale {
      display: flex;
      gap: 6px;
      margin-top: 5px
    }

    .crit .scale button {
      flex: 1;
      padding: 7px 0;
      border-radius: 8px;
      border: .5px solid var(--line);
      background: none
    }

    .crit .scale button[aria-pressed="true"] {
      background: var(--accent);
      color: var(--on-accent);
      border-color: var(--accent)
    }

    .actions {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-top: 12px
    }

    .banner {
      padding: 14px 18px;
      border: .5px solid var(--line);
      border-radius: 16px;
      background: var(--glass);
      margin: 14px 0
    }

    .note {
      background: var(--shade);
      padding: 10px 12px;
      border-radius: 10px;
      margin-top: 6px
    }

    .item {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 0;
      border-bottom: .5px solid var(--line)
    }

    details>summary {
      cursor: pointer;
      padding: 2px 0
    }

    .wgrid {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
      gap: 28px;
      margin-top: 16px
    }

    /* artists */
    .agrid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
      gap: 24px
    }

    .acard {
      background: none;
      border: 0;
      text-align: left;
      padding: 0;
      transition: transform .4s cubic-bezier(.2, 1, .3, 1)
    }

    .acard:hover {
      transform: translateY(-8px)
    }

    .cover {
      aspect-ratio: 4/5;
      border-radius: 16px;
      margin-bottom: 10px
    }

    .aname {
      font: 300 1.7rem 'Cormorant Garamond', serif
    }

    .prof {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 48px;
      margin-top: 24px
    }

    .xl {
      padding-left: 18px
    }

    .gal {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px
    }

    .tile {
      margin: 0
    }

    /* tables */
    .tbl {
      border-collapse: collapse;
      min-width: 560px;
      width: 100%
    }

    .tbl th,
    .tbl td {
      text-align: left;
      padding: 10px;
      border-bottom: .5px solid var(--line);
      font-size: 14px
    }

    .tbl th {
      font: .6rem 'Space Mono', monospace;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--muted);
      font-weight: 400
    }

    /* footer */
    footer {
      display: block;
      padding: 60px 40px;
      margin-top: 60px;
      border-top: .5px solid var(--line);
      background: var(--bg)
    }

    .fnl {
      background: var(--card);
      border: .5px solid var(--line);
      border-radius: 20px;
      padding: 40px;
      margin-bottom: 56px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: center;
      position: relative;
      overflow: hidden
    }

    .fnl::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--clay), transparent)
    }

    .fnl h3 {
      font-size: 2.4rem;
      line-height: 1.05;
      margin-bottom: 6px
    }

    .nl {
      display: flex;
      border: .5px solid var(--line);
      border-radius: 100px;
      overflow: hidden;
      transition: .3s
    }

    .nl:focus-within {
      border-color: var(--clay)
    }

    .nl input {
      flex: 1;
      min-width: 0;
      background: transparent;
      border: 0;
      padding: 14px 24px;
      color: var(--ink);
      font: 300 .9rem Inter, sans-serif;
      outline: none
    }

    .nl .btn.primary {
      border-radius: 0;
      padding: 0 26px
    }

    .fnl label.row {
      font: 300 .8rem Inter, sans-serif;
      text-transform: none;
      letter-spacing: 0;
      color: var(--muted);
      align-items: flex-start;
      margin-top: 10px
    }

    .fcols {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      gap: 40px;
      padding-bottom: 40px;
      border-bottom: .5px solid var(--line)
    }

    .fcols h4 {
      font: 400 .62rem 'Space Mono', monospace;
      text-transform: uppercase;
      letter-spacing: .12em;
      color: var(--clay);
      margin: 0 0 12px
    }

    footer .lk {
      display: block;
      background: none;
      border: 0;
      padding: 4px 0;
      color: var(--ink);
      opacity: .75;
      text-align: left;
      font-size: .9rem;
      transition: .3s
    }

    footer .lk:hover {
      opacity: 1;
      color: var(--clay)
    }

    .legal {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      padding-top: 22px;
      font: .62rem 'Space Mono', monospace;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--muted)
    }

    /* toast, documents */
    .toast {
      position: fixed;
      left: 50%;
      bottom: calc(20px + env(safe-area-inset-bottom, 0px));
      transform: translate(-50%, 20px);
      background: var(--card);
      color: var(--ink);
      border: .5px solid var(--line);
      padding: 12px 22px;
      border-radius: 100px;
      opacity: 0;
      transition: .25s;
      z-index: 90;
      pointer-events: none;
      max-width: 90vw;
      box-shadow: 0 8px 30px rgba(0, 0, 0, .25)
    }

    .toast.on {
      opacity: 1;
      transform: translate(-50%, 0)
    }

    .sheet {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .6);
      overflow: auto;
      padding: calc(20px + env(safe-area-inset-top, 0px)) 16px 20px;
      z-index: 100
    }

    .sheet[hidden] {
      display: none
    }

    .paper {
      background: #fff;
      color: #0A1612;
      max-width: 720px;
      margin: auto;
      padding: 36px;
      border-radius: 6px
    }

    .paper .tbl td,
    .paper .tbl th {
      border-color: #ddd
    }

    @media (max-width:1000px) {
      .rv {
        grid-template-columns: 1fr
      }

      .rv>section+section {
        border-left: 0;
        border-top: .5px solid var(--line)
      }
    }

    @media (max-width:900px) {
      header {
        padding: 14px 20px;
        gap: 12px
      }

      nav {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        margin: 8px 0 0
      }

      header>label {
        display: none
      }

      .ddm {
        position: static;
        display: block;
        background: none;
        border: 0;
        padding: 0 0 0 8px
      }

      .ddt {
        pointer-events: none;
        color: var(--clay);
        font: .62rem 'Space Mono', monospace;
        text-transform: uppercase;
        letter-spacing: .1em
      }

      .view {
        padding: 24px 20px
      }

      .hero {
        padding: 90px 20px 40px;
        min-height: 70vh
      }

      .band {
        padding: 32px 20px
      }

      footer {
        padding: 40px 20px
      }

      .fnl,
      .fcols,
      .wgrid,
      .prof {
        grid-template-columns: 1fr
      }

      .fnl {
        padding: 28px
      }
    }

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

    @media print {
      body>*:not(#sheet) {
        display: none !important
      }

      body::after,
      body::before {
        display: none
      }

      .sheet {
        position: static;
        background: none;
        padding: 0
      }

      .noprint {
        display: none !important
      }
    }

    .mono {
      font: .65rem 'Space Mono', monospace;
      text-transform: uppercase;
      letter-spacing: .12em;
      color: var(--clay);
      margin-bottom: 10px
    }

    .lead2 {
      font: 300 1.35rem/1.6 'Cormorant Garamond', Georgia, serif;
      max-width: 56ch;
      color: var(--muted);
      margin: 10px 0 0
    }

    .sgrid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 28px
    }

    .scard {
      background: none;
      border: 0;
      padding: 0;
      text-align: left;
      transition: transform .4s cubic-bezier(.2, 1, .3, 1)
    }

    .scard:hover:not(:disabled) {
      transform: translateY(-8px)
    }

    .scard:disabled {
      opacity: .55;
      cursor: default
    }

    .scard .cover {
      aspect-ratio: 3/4
    }

    .scard h3 {
      font-size: 1.8rem;
      line-height: 1.1;
      margin: 6px 0 4px
    }

    .crumb {
      font: .62rem 'Space Mono', monospace;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--muted);
      margin-bottom: 28px
    }

    .crumb button {
      background: none;
      border: 0;
      padding: 0;
      color: inherit;
      font: inherit;
      text-transform: inherit;
      letter-spacing: inherit
    }

    .crumb button:hover {
      color: var(--clay)
    }

    .art {
      max-width: 760px;
      margin: 0 auto
    }

    .byline {
      display: flex;
      gap: 10px 28px;
      flex-wrap: wrap;
      margin: 18px 0 28px;
      font: .62rem 'Space Mono', monospace;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--muted)
    }

    .sp {
      font: 300 1.45rem/1.75 'Cormorant Garamond', Georgia, serif;
      margin: 0 0 1.2em
    }

    .sp.first::first-letter {
      font-size: 4.4rem;
      float: left;
      line-height: .85;
      padding: 6px 12px 0 0;
      color: var(--clay)
    }

    .pq {
      margin: 2em 0;
      padding: 0 0 0 24px;
      border-left: 1px solid var(--clay);
      font: italic 300 2rem/1.3 'Cormorant Garamond', Georgia, serif
    }

    .pq cite {
      display: block;
      margin-top: 10px;
      font: normal .62rem 'Space Mono', monospace;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--muted)
    }

    .artisan {
      padding: 22px;
      border: .5px solid var(--line);
      border-radius: 16px;
      background: var(--glass);
      margin: 36px 0
    }

    .artisan h3 {
      font-size: 1.8rem
    }

    .abt {
      max-width: 1100px
    }

    .abt .ph {
      font-size: clamp(3rem, 9vw, 6.5rem);
      line-height: .95;
      margin-bottom: 20px
    }

    .pillars {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 32px;
      margin: 48px 0
    }

    .pillars h3 {
      font-size: 1.9rem;
      margin-bottom: 6px
    }

    .manifesto {
      margin: 56px 0;
      padding: 56px 40px;
      border-radius: 20px;
      background: var(--card);
      position: relative;
      overflow: hidden
    }

    .manifesto::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--clay), transparent)
    }

    .manifesto blockquote {
      margin: 0;
      max-width: 24ch;
      font: italic 300 clamp(1.9rem, 4.4vw, 3.2rem)/1.2 'Cormorant Garamond', Georgia, serif
    }

    .sanct {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 24px
    }

    .sanct>div {
      border: .5px solid var(--line);
      border-radius: 16px;
      padding: 24px;
      background: var(--glass)
    }

    .sanct h3 {
      font-size: 1.8rem;
      margin-bottom: 6px
    }

    .narr {
      padding: 56px 60px;
      border-top: .5px solid var(--line)
    }

    @media (max-width:900px) {
      .narr {
        padding: 36px 20px
      }

      .manifesto {
        padding: 36px 24px
      }
    }

    .ecard {
      display: grid;
      grid-template-columns: 120px 1fr auto;
      gap: 28px;
      padding: 28px 0;
      border-bottom: .5px solid var(--line);
      align-items: start
    }

    .ecard h3 {
      font-size: 2rem;
      line-height: 1.1;
      margin: 4px 0 6px
    }

    .when {
      font: .65rem 'Space Mono', monospace;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--clay)
    }

    .ethumb {
      width: 120px;
      height: 120px;
      border-radius: 12px;
      overflow: hidden;
      padding: 0;
      border: 0;
      background: none;
      transition: transform .4s cubic-bezier(.2, 1, .3, 1)
    }

    .ethumb:hover {
      transform: scale(1.04)
    }

    .ethumb>* {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
    }

    .pill {
      display: inline-block;
      padding: 6px 14px;
      border: .5px solid var(--line);
      border-radius: 4px;
      background: var(--glass);
      font: .62rem 'Space Mono', monospace;
      text-transform: uppercase;
      letter-spacing: .08em;
      margin: 10px 8px 0 0
    }

    .pill.ok {
      color: var(--neon);
      border-color: color-mix(in srgb, var(--neon) 40%, transparent)
    }

    .mgal {
      columns: 3 220px;
      column-gap: 14px
    }

    .mitem {
      break-inside: avoid;
      margin: 0 0 14px;
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      cursor: zoom-in;
      border: 0;
      padding: 0;
      display: block;
      width: 100%;
      background: none
    }

    .mitem>.m {
      width: 100%;
      display: block;
      transition: transform .5s
    }

    .mitem:hover>.m {
      transform: scale(1.04)
    }

    .mitem .bd {
      position: absolute;
      left: 10px;
      top: 10px;
      background: rgba(0, 0, 0, .55);
      color: #fff;
      font: .58rem 'Space Mono', monospace;
      text-transform: uppercase;
      letter-spacing: .1em;
      padding: 4px 10px;
      border-radius: 100px
    }

    .mitem .cp {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 22px 12px 10px;
      background: linear-gradient(transparent, rgba(0, 0, 0, .65));
      color: #fff;
      font-size: .78rem;
      text-align: left;
      opacity: 0;
      transition: .3s
    }

    .mitem:hover .cp,
    .mitem:focus-visible .cp {
      opacity: 1
    }

    .lb {
      position: fixed;
      inset: 0;
      z-index: 110;
      background: rgba(5, 10, 8, .95);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      padding: calc(20px + env(safe-area-inset-top, 0px)) 20px calc(20px + env(safe-area-inset-bottom, 0px));
      color: #E6E9E0
    }

    .lb[hidden] {
      display: none
    }

    .lbs {
      width: min(1000px, 92vw);
      aspect-ratio: 16/10;
      border-radius: 12px;
      overflow: hidden;
      background: #000;
      position: relative
    }

    .lbs>* {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block
    }

    .lbb {
      position: absolute;
      top: calc(14px + env(safe-area-inset-top, 0px));
      right: 16px;
      display: flex;
      gap: 8px
    }

    .lb .btn {
      color: #E6E9E0;
      border-color: rgba(255, 255, 255, .3)
    }

    .exth {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
      gap: 48px;
      margin: 24px 0 36px
    }

    @media (max-width:900px) {
      .ecard {
        grid-template-columns: 90px 1fr
      }

      .ecard>.row {
        grid-column: 1/-1
      }

      .ethumb {
        width: 90px;
        height: 90px
      }

      .exth {
        grid-template-columns: 1fr
      }
    }

    #about {
      padding: 0
    }

    .ab-bc {
      padding: 26px 60px 0;
      margin: 0
    }

    .ab-hero {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: end;
      padding: 50px 60px 80px;
      background: radial-gradient(circle at 30% 50%, color-mix(in srgb, var(--card) 75%, var(--bg)) 0%, var(--bg) 100%)
    }

    .ab-hero h1 {
      font-size: clamp(3.4rem, 9vw, 5.5rem);
      line-height: .93;
      margin: 0 0 22px
    }

    .ab-hero h1 em,
    .ab-clay {
      color: var(--clay);
      font-style: italic
    }

    .ab-hero p {
      max-width: 460px;
      font-weight: 300;
      line-height: 1.8;
      color: var(--muted);
      margin: 0
    }

    .ab-arch {
      height: 460px;
      position: relative
    }

    .ab-arch>div {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 78%;
      height: 100%;
      border-radius: 500px 500px 0 0;
      overflow: hidden;
      background: linear-gradient(170deg, #2c4d40, #13211C 70%)
    }

    .ab-arch svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      stroke: #B98D6B;
      fill: none;
      stroke-width: 1.4;
      opacity: .6
    }

    .ab-arch span {
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, var(--bg) 0%, transparent 45%)
    }

    .ab-mission {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 80px;
      padding: 90px 60px
    }

    .ab-stick {
      position: sticky;
      top: 110px;
      align-self: start
    }

    .ab-stick h2 {
      font-size: 2.8rem;
      line-height: 1.1
    }

    .ab-q {
      font: italic 300 1.7rem/1.4 'Cormorant Garamond', Georgia, serif;
      color: var(--clay);
      margin: 0 0 32px
    }

    .ab-mission p.b {
      font-weight: 300;
      line-height: 1.85;
      color: var(--muted);
      margin: 0 0 20px
    }

    .ab-prin {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      margin: 0 60px;
      padding: 60px 0 90px;
      border-top: .5px solid var(--line)
    }

    .ab-prin>div {
      padding: 36px;
      border-right: .5px solid var(--line)
    }

    .ab-prin>div:first-child {
      padding-left: 0
    }

    .ab-prin>div:last-child {
      border-right: 0;
      padding-right: 0
    }

    .ab-prin h3 {
      font-size: 1.7rem;
      margin: 0 0 12px
    }

    .ab-prin p {
      font-size: .88rem;
      line-height: 1.7;
      color: var(--muted);
      margin: 0
    }

    .ab-cta {
      text-align: center;
      padding: 70px 60px;
      border-top: .5px solid var(--line)
    }

    .ab-cta h2 {
      font-size: 2.8rem;
      margin-bottom: 18px
    }

    .ab-cta p {
      max-width: 420px;
      margin: 0 auto 32px;
      font-weight: 300;
      color: var(--muted)
    }

    .btn.sq {
      border-radius: 3px;
      padding: 15px 36px
    }

    .btn.clay {
      background: var(--clay);
      border-color: var(--clay);
      color: var(--bg);
      font-weight: 700
    }

    .btn.clay:hover {
      background: var(--hov);
      border-color: var(--hov);
      color: var(--hov-ink)
    }

    .btn.sq:not(.clay):hover {
      border-color: var(--clay)
    }

    @media (max-width:900px) {
      .ab-bc {
        padding: 20px 20px 0
      }

      .ab-hero {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 32px 20px 48px
      }

      .ab-arch {
        height: 300px
      }

      .ab-mission {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 56px 20px
      }

      .ab-stick {
        position: static
      }

      .ab-prin {
        grid-template-columns: 1fr;
        margin: 0 20px;
        padding: 32px 0 56px
      }

      .ab-prin>div {
        padding: 24px 0;
        border-right: 0;
        border-bottom: .5px solid var(--line)
      }

      .ab-prin>div:last-child {
        border-bottom: 0
      }

      .ab-cta {
        padding: 56px 20px
      }
    }

    /* signature neon #00FF66: fills, glows, live indicators and key selections in both themes */
    :root {
      --neon-fill: #00FF66;
      --hov: #00FF66;
      --hov-ink: #0A1612
    }

    @media (prefers-color-scheme:dark) {
      :root:not([data-theme="light"]) {
        --ok: #00FF66
      }
    }

    :root[data-theme="dark"] {
      --ok: #00FF66
    }

    :focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: 3px;
      box-shadow: 0 0 0 6px color-mix(in srgb, var(--neon-fill) 65%, transparent)
    }

    nav>button[aria-current="true"],
    .ddm button[aria-current="true"] {
      opacity: 1;
      color: var(--ink);
      box-shadow: inset 0 -2px 0 var(--neon-fill)
    }

    .btn.primary:hover {
      box-shadow: 0 0 28px color-mix(in srgb, var(--neon-fill) 50%, transparent)
    }

    .status {
      background: color-mix(in srgb, var(--neon-fill) 10%, transparent);
      border-color: color-mix(in srgb, var(--neon-fill) 50%, transparent)
    }

    .status i {
      background: var(--neon-fill);
      box-shadow: 0 0 10px var(--neon-fill)
    }

    .pill.ok {
      background: color-mix(in srgb, var(--neon-fill) 22%, transparent)
    }

    .t-RESIDENCY {
      background: color-mix(in srgb, var(--neon-fill) 24%, transparent)
    }

    .meter i {
      background: var(--neon-fill)
    }

    .s-confirmed .dot {
      background: var(--neon-fill);
      border-color: var(--neon-fill)
    }

    .crit .scale button[aria-pressed="true"] {
      background: var(--neon-fill);
      border-color: var(--neon-fill);
      color: #0A1612
    }

    .card[aria-current="true"] {
      box-shadow: inset 3px 0 0 var(--neon-fill)
    }

    .steps li.cur {
      border-color: var(--neon-fill)
    }

    .nl:focus-within {
      border-color: var(--neon-fill)
    }

    .toast::before {
      content: "";
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--neon-fill);
      margin-right: 10px;
      box-shadow: 0 0 8px var(--neon-fill)
    }

    .acard:hover .aname {
      color: var(--clay)
    }

    /* article layout benchmarked on the template's story screen */
    #story {
      padding: 0
    }

    .sh {
      height: min(90vh, 820px);
      min-height: 520px;
      width: 100%;
      position: relative;
      display: flex;
      align-items: flex-end;
      overflow: hidden;
      background: #0A1612;
      color: #FDFDFD
    }

    .sh .bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: brightness(.6) grayscale(.2)
    }

    .sh::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(10, 22, 18, .85) 0%, transparent 60%)
    }

    .shc {
      padding: 60px;
      max-width: 900px;
      position: relative;
      z-index: 2
    }

    .shc h1 {
      font-size: clamp(3.2rem, 9vw, 6rem);
      line-height: .95;
      margin: 0 0 24px;
      color: #FDFDFD
    }

    .shc h1 span {
      color: #B98D6B
    }

    .shc .mono {
      color: #FDFDFD;
      opacity: .8;
      margin: 0
    }

    .sbody {
      background: #F4F1ED;
      color: #0A1612;
      padding: 110px 60px
    }

    .sinner {
      max-width: 800px;
      margin: 0 auto
    }

    .sprose {
      font: 300 1.6rem/1.4 'Cormorant Garamond', Georgia, serif
    }

    .sprose p {
      margin: 0 0 40px
    }

    .sprose .slead {
      font-style: italic;
      font-size: 2rem;
      line-height: 1.3
    }

    .spq {
      font-size: clamp(1.6rem, 4vw, 3rem);
      color: #9C7050;
      margin: 80px -100px;
      font-style: italic;
      border-left: 1px solid #9C7050;
      padding-left: 60px;
      line-height: 1.1
    }

    .spq cite {
      display: block;
      margin-top: 14px;
      font: normal .62rem 'Space Mono', monospace;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: #6A5845
    }

    .sinline {
      margin: 80px 0;
      width: 100%;
      height: clamp(260px, 50vw, 600px)
    }

    .sbody .artisan {
      border-color: rgba(0, 0, 0, .15);
      background: rgba(0, 0, 0, .03)
    }

    .sbody .artisan h3 {
      color: #0A1612
    }

    .sbody .mono,
    .sexp .mono {
      color: #6A5845;
      opacity: 1
    }

    .sbody .btn {
      color: #0A1612;
      border-color: rgba(0, 0, 0, .28)
    }

    .sbody .btn:hover {
      border-color: #0A1612
    }

    .sexp {
      background: #F4F1ED;
      color: #0A1612;
      padding: 80px 60px 140px;
      border-top: .5px solid rgba(0, 0, 0, .1)
    }

    .sscr {
      overflow-x: auto;
      display: flex;
      gap: 40px;
      padding: 40px 0;
      scrollbar-width: none
    }

    .scard2 {
      min-width: 380px;
      height: 480px;
      border: 0;
      border-left: .5px solid rgba(0, 0, 0, .12);
      background: none;
      padding: 30px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      text-align: left;
      transition: .4s;
      color: #0A1612
    }

    .scard2:hover:not(:disabled) {
      background: #E8E4DF
    }

    .scard2:disabled {
      opacity: .55;
      cursor: default
    }

    .scard2 h3 {
      font-size: 2.2rem;
      line-height: 1.1
    }

    @media (max-width:900px) {
      .shc {
        padding: 90px 20px 40px
      }

      .sbody {
        padding: 44px 20px
      }

      .spq {
        margin: 40px 0;
        font-size: 1.6rem;
        padding-left: 24px
      }

      .sprose {
        font-size: 1.45rem
      }

      .sexp {
        padding: 50px 20px 80px
      }

      .scard2 {
        min-width: 280px;
        height: 360px
      }
    }

    /* stories landing page benchmarked on the template's narratives screen */
    #stories {
      padding: 0
    }

    .nv-hero {
      padding: 90px 60px 80px;
      background: radial-gradient(circle at 40% 60%, color-mix(in srgb, var(--card) 75%, var(--bg)) 0%, var(--bg) 100%)
    }

    .nv-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: end
    }

    .nv-hero h1 {
      font-size: clamp(3.4rem, 9vw, 6rem);
      line-height: .92;
      margin: 0 0 24px
    }

    .nv-hero h1 em {
      color: var(--clay);
      font-style: italic
    }

    .lead3 {
      color: var(--muted);
      max-width: 440px;
      font-weight: 300;
      line-height: 1.7;
      margin: 0 0 40px
    }

    .nv-mono {
      font: .6rem 'Space Mono', monospace;
      text-transform: uppercase;
      letter-spacing: .1em;
      opacity: .5
    }

    .btn-read {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 16px 32px;
      background: transparent;
      border: .5px solid var(--clay);
      color: var(--clay);
      font: .72rem 'Space Mono', monospace;
      letter-spacing: .15em;
      text-transform: uppercase;
      border-radius: 3px;
      transition: all .35s ease
    }

    .btn-read:hover {
      background: var(--clay);
      color: var(--bg);
      transform: translateX(4px)
    }

    .btn-read svg {
      transition: transform .3s
    }

    .btn-read:hover svg {
      transform: translateX(5px)
    }

    .btn-ghost {
      padding: 14px 24px;
      background: transparent;
      border: .5px solid var(--line);
      color: var(--ink);
      font: .7rem 'Space Mono', monospace;
      border-radius: 3px;
      transition: .3s
    }

    .btn-ghost:hover {
      border-color: var(--clay)
    }

    .nv-feat {
      display: flex;
      gap: 20px;
      padding: 20px;
      border: .5px solid var(--line);
      border-radius: 12px;
      background: var(--glass);
      text-align: left;
      width: 100%;
      transition: .3s;
      margin-bottom: 6px
    }

    .nv-feat:hover {
      border-color: var(--clay)
    }

    .nv-feat h4 {
      font: 300 1.3rem/1.2 'Cormorant Garamond', serif;
      margin: 0 0 8px
    }

    .nv-feat p {
      font-size: .78rem;
      color: var(--muted);
      margin: 0
    }

    .nv-th {
      flex: none;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .nv-prac {
      padding: 80px 60px
    }

    .nv-cards {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px
    }

    .nv-card {
      padding: 32px;
      border: .5px solid var(--line);
      border-radius: 16px;
      background: var(--glass);
      text-align: left;
      transition: .4s;
      color: var(--ink)
    }

    .nv-card:hover,
    .nv-card[aria-pressed="true"] {
      background: var(--card);
      border-color: var(--clay)
    }

    .nv-card h3 {
      font-size: 1.5rem;
      margin-bottom: 10px
    }

    .nv-card p {
      font-size: .78rem;
      color: var(--muted);
      margin: 0
    }

    .nv-list {
      padding: 0 60px 100px
    }

    .nv-row {
      display: flex;
      gap: 40px;
      padding: 32px 0;
      border: 0;
      border-bottom: .5px solid var(--line);
      align-items: center;
      width: 100%;
      background: none;
      text-align: left;
      transition: padding-left .3s;
      color: var(--ink)
    }

    .nv-row:hover:not(:disabled) {
      padding-left: 16px
    }

    .nv-row:disabled {
      opacity: .6;
      cursor: default
    }

    @media (max-width:900px) {
      .nv-hero {
        padding: 48px 20px
      }

      .nv-grid {
        grid-template-columns: 1fr;
        gap: 40px
      }

      .nv-prac {
        padding: 48px 20px
      }

      .nv-cards {
        grid-template-columns: 1fr 1fr
      }

      .nv-list {
        padding: 0 20px 60px
      }

      .nv-row {
        gap: 16px;
        flex-wrap: wrap
      }

      .nv-row>.nv-th {
        display: none
      }
    }

    @media (max-width:560px) {
      .nv-cards {
        grid-template-columns: 1fr
      }
    }

    /* join / registration benchmarked on the template's register screen */
    #join {
      padding: 0
    }

    .rg {
      min-height: 80vh;
      background: radial-gradient(circle at 30% 50%, color-mix(in srgb, var(--card) 60%, var(--bg)) 0%, var(--bg) 100%)
    }

    .rg-panel {
      max-width: 700px;
      margin: 0 auto;
      padding: 70px 36px 90px
    }

    .rg-head {
      margin-bottom: 44px
    }

    .rg-head h1 {
      font-size: clamp(2.4rem, 6vw, 3.4rem);
      line-height: 1.05
    }

    .rg-head h1 em {
      color: var(--clay);
      font-style: italic
    }

    .reg-steps {
      display: flex;
      margin-bottom: 50px
    }

    .reg-step {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      position: relative;
      background: none;
      border: 0;
      padding: 0;
      color: var(--ink)
    }

    .reg-step::before {
      content: "";
      position: absolute;
      top: 14px;
      left: 50%;
      width: 100%;
      height: 1px;
      background: var(--line);
      z-index: 0
    }

    .reg-step:last-child::before {
      display: none
    }

    .reg-step:disabled {
      cursor: default
    }

    .reg-step-dot {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--card);
      border: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: center;
      font: .6rem 'Space Mono', monospace;
      z-index: 1;
      transition: .4s
    }

    .reg-step.active .reg-step-dot {
      background: var(--clay);
      border-color: var(--clay);
      color: var(--bg);
      box-shadow: 0 0 20px color-mix(in srgb, var(--clay) 40%, transparent)
    }

    .reg-step.done .reg-step-dot {
      background: var(--neon-fill);
      border-color: var(--neon-fill);
      color: #0A1612
    }

    .reg-step-label {
      font: .55rem 'Space Mono', monospace;
      text-transform: uppercase;
      opacity: .5
    }

    .reg-step.active .reg-step-label {
      opacity: 1;
      color: var(--clay)
    }

    .reg-form h2 {
      font-size: 2.8rem;
      line-height: 1.05;
      margin-bottom: 8px
    }

    .reg-form h2 span {
      color: var(--clay)
    }

    .rsub {
      font-size: .9rem;
      margin: 0 0 36px;
      font-weight: 300;
      color: var(--muted)
    }

    .igrid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px
    }

    .ichip {
      padding: 12px 16px;
      border: .5px solid var(--line);
      border-radius: 8px;
      background: var(--glass);
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: .8rem;
      opacity: .75;
      text-align: left;
      color: var(--ink);
      transition: .3s;
      user-select: none
    }

    .ichip:hover {
      border-color: var(--clay)
    }

    .ichip.selected {
      border-color: var(--neon-fill);
      background: color-mix(in srgb, var(--neon-fill) 10%, transparent);
      opacity: 1
    }

    .ichip.selected::before {
      content: '\2713';
      font-size: .7rem
    }

    .reg-nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 40px;
      padding-top: 30px;
      border-top: .5px solid var(--line)
    }

    .btn.clay {
      padding: 13px 30px;
      min-height: 44px
    }

    .reg-success {
      text-align: center;
      padding: 60px 0
    }

    .reg-success h2 {
      font-size: 3rem;
      margin: 10px 0 16px
    }

    @media (max-width:560px) {
      .rg-panel {
        padding: 36px 20px 60px
      }

      .reg-step-label {
        display: none
      }

      .igrid {
        grid-template-columns: 1fr
      }

      .reg-nav {
        flex-direction: column;
        gap: 12px;
        align-items: stretch
      }

      .reg-nav .btn,
      .reg-nav .row {
        width: 100%
      }

      .reg-form h2 {
        font-size: 2.2rem
      }
    }

    /* experiences, programme and contact in the template's calendar / booking language */
    #exp,
    #cal,
    #contact {
      padding: 0
    }

    .parch {
      --bg: #F4F1ED;
      --bg2: #EDE8E1;
      --card: #E9E3DA;
      --ink: #0A1612;
      --muted: rgba(10, 22, 18, .62);
      --line: rgba(10, 22, 18, .14);
      --accent: #0A1612;
      --on-accent: #F4F1ED;
      --clay: #8C6444;
      --neon: #0B7A3B;
      --ok: #1F6B3B;
      --wait: #8A5A33;
      --no: #A33B2D;
      --shade: rgba(10, 22, 18, .06);
      --glass: rgba(10, 22, 18, .03);
      background: var(--bg);
      color: var(--ink)
    }

    .page-header {
      padding: 90px 60px 70px;
      text-align: center;
      background: var(--bg)
    }

    .page-header h1 {
      font-size: clamp(3rem, 8vw, 5rem);
      margin-bottom: 20px
    }

    .page-header h1 em {
      font-style: italic;
      color: var(--clay)
    }

    .page-header p {
      max-width: 600px;
      margin: 0 auto;
      font-weight: 300;
      color: var(--muted)
    }

    .booking-container {
      padding: 90px 60px;
      min-height: 60vh
    }

    .xdark {
      padding: 70px 60px 90px;
      background: var(--bg)
    }

    .filter-bar {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 60px;
      padding-bottom: 20px;
      border-bottom: 1px solid var(--line)
    }

    .filter-tags {
      display: flex;
      gap: 6px 24px;
      flex-wrap: wrap
    }

    .filter-tags .chip,
    .ftag {
      border: 0;
      background: none;
      padding: 6px 0;
      border-radius: 0;
      font: .7rem 'Space Mono', monospace;
      text-transform: uppercase;
      letter-spacing: .1em;
      opacity: .7;
      color: inherit;
      transition: .3s
    }

    .filter-tags .chip:hover,
    .ftag:hover {
      opacity: 1;
      border: 0
    }

    .filter-tags .chip[aria-pressed="true"],
    .ftag[aria-pressed="true"] {
      background: none;
      color: var(--clay);
      font-weight: 700;
      opacity: 1;
      box-shadow: none
    }

    .calendar-nav {
      display: flex;
      justify-content: center;
      gap: 30px;
      margin-bottom: 60px;
      border-bottom: .5px solid var(--line);
      padding-bottom: 20px;
      overflow-x: auto
    }

    .calendar-nav .ftag[aria-pressed="true"] {
      box-shadow: inset 0 -2px 0 var(--neon-fill)
    }

    .xgrid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px
    }

    .xbk {
      border-bottom: .5px solid var(--line);
      padding-bottom: 40px;
      transition: transform .4s ease
    }

    .xbk:hover {
      transform: translateY(-10px)
    }

    .xi {
      width: 100%;
      aspect-ratio: 4/5;
      overflow: hidden;
      margin-bottom: 25px;
      background: #ddd;
      border: 0;
      padding: 0;
      display: block;
      cursor: pointer
    }

    .xi>* {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      aspect-ratio: auto !important;
      transition: .6s
    }

    .xi:hover>* {
      transform: scale(1.05)
    }

    .xm {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 15px
    }

    .xt {
      font-size: 2.2rem;
      line-height: 1.1;
      margin-bottom: 15px
    }

    .tbadge {
      display: inline-block;
      padding: 4px 12px;
      border: .5px solid var(--ink);
      border-radius: 100px;
      font: .65rem 'Space Mono', monospace;
      text-transform: uppercase;
      letter-spacing: .1em;
      margin: 0 8px 20px 0
    }

    .tbadge.ok {
      background: var(--neon-fill);
      border-color: var(--neon-fill);
      color: #0A1612
    }

    .xd {
      margin: 0 0 30px;
      font-size: .9rem;
      color: var(--muted)
    }

    .rcta {
      width: 100%;
      padding: 15px;
      background: #0A1612;
      color: #FDFDFD;
      border: 0;
      font: .75rem 'Space Mono', monospace;
      letter-spacing: .2em;
      text-transform: uppercase;
      transition: .3s;
      min-height: 44px
    }

    .rcta:hover {
      background: var(--clay)
    }

    .xgrid2 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 50px 40px
    }

    .xcard2 {
      transition: transform .4s cubic-bezier(.2, 1, .3, 1)
    }

    .xcard2:hover {
      transform: translateY(-10px)
    }

    .arch2 {
      width: 100%;
      aspect-ratio: 4/5;
      border-radius: 500px 500px 0 0;
      overflow: hidden;
      position: relative;
      background: var(--card);
      margin-bottom: 25px;
      border: 0;
      padding: 0;
      display: block;
      cursor: pointer
    }

    .arch2>* {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      aspect-ratio: auto !important;
      filter: grayscale(.3);
      transition: .6s
    }

    .arch2:hover>* {
      filter: grayscale(0);
      transform: scale(1.05)
    }

    .arch2::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(10, 22, 18, .6), transparent 50%);
      pointer-events: none
    }

    .xmeta2 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: .5px solid var(--line);
      padding-top: 15px
    }

    .btn-book {
      margin-top: 20px;
      width: 100%;
      padding: 15px;
      border: .5px solid var(--line);
      background: transparent;
      color: var(--ink);
      font: .7rem 'Space Mono', monospace;
      letter-spacing: .2em;
      min-height: 44px;
      transition: .3s
    }

    .btn-book:hover {
      background: var(--clay);
      border-color: var(--clay);
      color: var(--bg)
    }

    .xpriv {
      max-width: 720px;
      margin: 70px auto 0;
      padding: 28px;
      border: .5px solid var(--clay);
      border-radius: 12px
    }

    .mlab {
      font: 300 1.7rem 'Cormorant Garamond', serif;
      min-width: 170px;
      text-align: center
    }

    .ct-wrap {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 80px;
      max-width: 1100px;
      margin: 0 auto;
      padding: 70px 60px 90px
    }

    .ct-card {
      border: .5px solid var(--line);
      border-radius: 16px;
      padding: 26px;
      background: var(--glass);
      margin-bottom: 16px
    }

    .ct-card.clay {
      border-color: var(--clay)
    }

    .ct-card h3 {
      font-size: 1.6rem;
      margin: 6px 0
    }

    @media (max-width:900px) {
      .page-header {
        padding: 56px 20px 40px
      }

      .booking-container,
      .xdark {
        padding: 48px 20px
      }

      .xgrid,
      .xgrid2 {
        grid-template-columns: 1fr 1fr;
        gap: 28px
      }

      .ct-wrap {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 40px 20px 60px
      }
    }

    @media (max-width:560px) {

      .xgrid,
      .xgrid2 {
        grid-template-columns: 1fr
      }
    }

    /* home, profile, dashboard, archive, waitlist, countdown and directory in the template's layouts */
    .dk {
      --bg: #0A1612;
      --bg2: #13211C;
      --card: #1D2B26;
      --ink: #FDFDFD;
      --muted: rgba(253, 253, 253, .64);
      --line: rgba(255, 255, 255, .14);
      --accent: #FDFDFD;
      --on-accent: #0A1612;
      --clay: #B98D6B;
      --neon: #00FF66;
      --ok: #00FF66;
      --wait: #E0B889;
      --no: #FF9D8F;
      --shade: rgba(255, 255, 255, .05);
      --glass: rgba(255, 255, 255, .03);
      background: var(--bg);
      color: var(--ink)
    }

    #home,
    #archive,
    #waitlist,
    #countdown,
    #artists,
    #profile {
      padding: 0
    }

    .hp-hero {
      min-height: calc(100vh - 80px);
      display: grid;
      grid-template-columns: 1fr 1fr;
      padding: 70px 60px 60px;
      background: var(--hero);
      position: relative;
      overflow: hidden
    }

    .hp-text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-right: 60px
    }

    .hp-text h1 {
      font-size: clamp(3.6rem, 9vw, 7rem);
      line-height: .9;
      margin-bottom: 24px
    }

    .hp-text h1 em {
      color: var(--clay);
      font-style: italic
    }

    .hp-arch {
      width: 80%;
      height: 90%;
      max-height: 640px;
      margin-left: auto;
      align-self: end;
      border-radius: 500px 500px 0 0;
      overflow: hidden;
      position: relative;
      background: linear-gradient(170deg, #2c4d40, #13211C 70%);
      box-shadow: 0 40px 100px rgba(0, 0, 0, .35)
    }

    .hp-arch svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      stroke: #B98D6B;
      fill: none;
      stroke-width: 1.4;
      opacity: .6
    }

    .hp-arch::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, var(--bg), transparent 40%)
    }

    .ed {
      background: #F4F1ED;
      color: #0A1612;
      padding: 120px 60px
    }

    .ed-head {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      margin-bottom: 80px;
      align-items: end
    }

    .ed-head h2 {
      font-size: clamp(2.8rem, 6vw, 4rem);
      max-width: 420px
    }

    .ed-head h2 em {
      color: #8C6444;
      font-style: italic
    }

    .ed .mono {
      color: #6A5845;
      opacity: 1
    }

    .mod-grid {
      display: grid;
      grid-template-columns: 1.3fr 1fr;
      gap: 20px;
      margin-bottom: 80px
    }

    .mod-grid>div {
      height: 420px
    }

    .mod-grid>div:last-child {
      margin-top: 60px
    }

    .mk {
      background: #050a09;
      color: #FDFDFD;
      padding: 120px 60px;
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: 60px
    }

    .gs {
      padding: 30px;
      background: var(--card);
      border-radius: 20px;
      border: 1px solid var(--line)
    }

    .gs h3 {
      font-size: 1.8rem;
      margin: 10px 0
    }

    .gs p {
      font-size: .85rem;
      color: var(--muted);
      margin: 0 0 18px
    }

    .nft-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px
    }

    .wk {
      background: var(--glass);
      border: .5px solid var(--line);
      border-radius: 24px;
      overflow: hidden;
      transition: .4s;
      text-align: left;
      padding: 0;
      color: var(--ink)
    }

    .wk:hover {
      border-color: var(--clay);
      transform: translateY(-8px)
    }

    .wk .im {
      aspect-ratio: 3/4
    }

    .wk .in {
      padding: 20px
    }

    .wk h4 {
      font: 300 1.4rem 'Cormorant Garamond', serif;
      margin: 8px 0 14px
    }

    .pf {
      display: grid;
      grid-template-columns: 350px 1fr;
      gap: 60px;
      padding: 50px 60px 80px
    }

    .mcard {
      background: var(--card);
      border: .5px solid var(--line);
      border-radius: 24px;
      padding: 36px;
      margin-bottom: 24px;
      text-align: center
    }

    .avc {
      width: 130px;
      height: 130px;
      border-radius: 50%;
      border: 1px solid var(--clay);
      margin: 0 auto 22px;
      padding: 5px;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .avc>span {
      border-radius: 50% !important;
      width: 100% !important;
      height: 100% !important
    }

    .vh {
      margin-bottom: 40px;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      border-bottom: .5px solid var(--line);
      padding-bottom: 30px;
      gap: 12px;
      flex-wrap: wrap
    }

    .vh h1 {
      font-size: clamp(2.6rem, 6vw, 4rem)
    }

    .vh h1 span {
      color: var(--clay)
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-bottom: 60px
    }

    .stb {
      background: var(--glass);
      padding: 25px;
      border-radius: 16px;
      border: .5px solid var(--line)
    }

    .stb .v {
      font: 300 2.5rem 'Cormorant Garamond', serif;
      margin-top: 10px
    }

    .pwgrid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
      gap: 20px;
      margin-bottom: 60px
    }

    .pw {
      background: var(--glass);
      border: .5px solid var(--line);
      border-radius: 20px;
      overflow: hidden;
      transition: .4s
    }

    .pw:hover {
      border-color: var(--clay);
      transform: translateY(-5px)
    }

    .pw .stage {
      border-radius: 0;
      margin: 0;
      aspect-ratio: 1/1
    }

    .pw .in {
      padding: 18px
    }

    .rstat {
      display: inline-flex;
      align-items: center;
      padding: 6px 12px;
      border-radius: 100px;
      font: .6rem 'Space Mono', monospace;
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-top: 10px
    }

    .rs-avail {
      background: color-mix(in srgb, var(--neon-fill) 16%, transparent);
      color: var(--neon)
    }

    .rs-no {
      background: color-mix(in srgb, var(--clay) 16%, transparent);
      color: var(--clay)
    }

    .logi {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 0;
      border-bottom: .5px solid var(--line);
      gap: 12px
    }

    .logi:last-child {
      border-bottom: 0
    }

    #dash {
      max-width: none;
      padding: 0
    }

    .mbd {
      padding: 50px 60px 80px;
      max-width: 1440px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 320px 1fr;
      gap: 60px
    }

    .mbm {
      background: var(--card);
      border: .5px solid var(--line);
      border-radius: 24px;
      padding: 32px;
      margin-bottom: 24px
    }

    .mbexp {
      background: var(--glass);
      border: .5px solid var(--line);
      border-radius: 20px;
      padding: 26px;
      display: flex;
      gap: 24px;
      margin-bottom: 16px;
      transition: .4s cubic-bezier(.2, 1, .3, 1)
    }

    .mbexp:hover {
      border-color: var(--clay)
    }

    .edb {
      min-width: 60px;
      text-align: center;
      border-right: .5px solid var(--line);
      padding-right: 20px
    }

    .edb h3 {
      font-size: 2rem;
      color: var(--clay);
      line-height: 1
    }

    .vgrid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 20px;
      align-items: start
    }

    .vcard {
      background: var(--glass);
      border: .5px solid var(--line);
      border-radius: 16px;
      padding: 24px
    }

    .vcard>h3.vt {
      font: .62rem 'Space Mono', monospace;
      text-transform: uppercase;
      letter-spacing: .12em;
      color: var(--clay);
      margin: 0 0 14px
    }

    .mbh {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin: 0 0 22px;
      gap: 12px;
      flex-wrap: wrap
    }

    .mbh h2 {
      font-size: clamp(2.2rem, 5vw, 3rem)
    }

    .mbh h2 em {
      color: var(--clay);
      font-style: italic
    }

    .ar-head {
      padding: 70px 60px 40px
    }

    .ar-head h1 {
      font-size: clamp(3rem, 8vw, 5rem)
    }

    .ar-head h1 em {
      color: var(--clay);
      font-style: italic
    }

    .ar-feat {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 60px;
      padding: 40px 60px 70px;
      align-items: center
    }

    .ar-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px 36px;
      padding: 0 60px 120px
    }

    .ar-card {
      border: 0;
      background: none;
      text-align: left;
      border-top: .5px solid var(--line);
      padding: 24px 0 0;
      transition: transform .4s;
      color: var(--ink)
    }

    .ar-card:hover:not(:disabled) {
      transform: translateY(-8px)
    }

    .ar-card:disabled {
      opacity: .55;
      cursor: default
    }

    .ar-card h3 {
      font-size: 1.9rem;
      line-height: 1.1;
      margin: 10px 0
    }

    .btn-read.dark {
      border-color: #0A1612;
      color: #0A1612
    }

    .btn-read.dark:hover {
      background: #0A1612;
      color: #F4F1ED
    }

    .wl {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      max-width: 1200px;
      margin: 0 auto;
      padding: 80px 60px
    }

    .wl h1 {
      font-size: clamp(3rem, 7vw, 5rem);
      line-height: .95
    }

    .wl h1 em {
      color: var(--clay);
      font-style: italic
    }

    .wlb {
      display: flex;
      gap: 16px;
      padding: 18px 0;
      border-bottom: .5px solid var(--line)
    }

    .wlb i {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--neon-fill);
      margin-top: 8px;
      flex: none;
      box-shadow: 0 0 10px var(--neon-fill)
    }

    .wls {
      display: flex;
      gap: 40px;
      margin-top: 36px
    }

    .wls b {
      display: block;
      font: 300 3rem 'Cormorant Garamond', serif;
      line-height: 1
    }

    .cd {
      min-height: 80vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 90px 24px;
      position: relative;
      overflow: hidden
    }

    .cd::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 40%, rgba(0, 255, 102, .13), transparent 60%)
    }

    .cd::after {
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 4px);
      pointer-events: none
    }

    .cd>* {
      position: relative;
      z-index: 1
    }

    .cd h1 {
      font-size: clamp(3.4rem, 10vw, 7rem);
      line-height: .92;
      margin: 14px 0 26px
    }

    .cd h1 em {
      color: var(--clay);
      font-style: italic
    }

    .cdt {
      display: flex;
      gap: clamp(14px, 4vw, 48px);
      margin: 40px 0
    }

    .cdt>div {
      min-width: 60px
    }

    .cdt b {
      display: block;
      font: 300 clamp(2.6rem, 8vw, 5rem) 'Cormorant Garamond', serif;
      line-height: 1
    }

    .tx {
      font: .72rem/1.9 'Space Mono', monospace;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .08em
    }

    .lib-hero {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 60px;
      padding: 70px 60px;
      align-items: center
    }

    .lib-hero h1 {
      font-size: clamp(3rem, 8vw, 5.5rem);
      line-height: .95
    }

    .lib-hero h1 em {
      color: var(--clay);
      font-style: italic
    }

    .fbp {
      position: sticky;
      top: var(--hh, 72px);
      z-index: 40;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
      padding: 20px 60px;
      background: var(--bg);
      border-top: .5px solid var(--line);
      border-bottom: .5px solid var(--line)
    }

    .lib-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 50px 36px;
      padding: 60px 60px 120px
    }

    .lcard {
      border: 0;
      background: none;
      text-align: left;
      padding: 0;
      transition: transform .4s;
      color: var(--ink)
    }

    .lcard:hover {
      transform: translateY(-8px)
    }

    .lcard.large {
      grid-column: span 2
    }

    .lcard .cover {
      aspect-ratio: 4/5;
      border-radius: 0;
      margin-bottom: 16px
    }

    .lcard.large .cover {
      aspect-ratio: 16/10
    }

    .lcard h2 {
      font-size: 1.9rem;
      margin: 8px 0
    }

    @media (max-width:900px) {
      .hp-hero {
        grid-template-columns: 1fr;
        padding: 48px 20px;
        min-height: auto
      }

      .hp-text {
        padding-right: 0
      }

      .hp-arch {
        width: 100%;
        height: 340px;
        margin-top: 36px
      }

      .ed,
      .mk {
        padding: 56px 20px
      }

      .ed-head,
      .mod-grid {
        grid-template-columns: 1fr
      }

      .mod-grid>div:last-child {
        margin-top: 0
      }

      .mk {
        grid-template-columns: 1fr
      }

      .nft-grid {
        grid-template-columns: 1fr 1fr
      }

      .pf {
        grid-template-columns: 1fr;
        padding: 32px 20px 56px;
        gap: 32px
      }

      .stats {
        grid-template-columns: 1fr
      }

      .mbd {
        grid-template-columns: 1fr;
        padding: 32px 20px 56px;
        gap: 32px
      }

      .ar-head,
      .ar-feat,
      .ar-grid {
        padding-left: 20px;
        padding-right: 20px
      }

      .ar-feat {
        grid-template-columns: 1fr
      }

      .ar-grid {
        grid-template-columns: 1fr 1fr
      }

      .wl {
        grid-template-columns: 1fr;
        padding: 40px 20px;
        gap: 40px
      }

      .lib-hero {
        grid-template-columns: 1fr;
        padding: 40px 20px
      }

      .fbp {
        padding: 16px 20px
      }

      .lib-grid {
        grid-template-columns: 1fr 1fr;
        padding: 36px 20px 70px
      }

      .lcard.large {
        grid-column: auto
      }
    }

    @media (max-width:560px) {

      .ar-grid,
      .lib-grid,
      .nft-grid {
        grid-template-columns: 1fr
      }
    }
/* --- Blade navigation/anchors: preserve the original button styling --- */
a {
  color: inherit;
  text-decoration: none
}

nav>a {
  background: none;
  border: 0;
  padding: 6px 0;
  color: var(--ink);
  opacity: .78;
  font-size: .85rem;
  letter-spacing: .05em;
  transition: .3s;
  cursor: pointer
}

nav a:hover,
nav a[aria-current="true"] {
  opacity: 1;
  color: var(--clay)
}

nav>a[aria-current="true"] {
  opacity: 1;
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--neon-fill)
}

nav a[hidden] {
  display: none
}

.ddm a {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: .85rem;
  opacity: .85;
  cursor: pointer
}

.ddm a:hover {
  background: var(--shade)
}

.ddm a[aria-current="true"] {
  opacity: 1;
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--neon-fill)
}

a.btn,
.scard2,
.wk,
.acard {
  cursor: pointer
}