@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 500; font-display: swap;
             src: url("fonts/fraunces-roman.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300 500; font-display: swap;
             src: url("fonts/fraunces-italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 500; font-display: swap;
             src: url("fonts/inter-var.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
             src: url("fonts/plex-mono-400.woff2") format("woff2"); }

:root {



  --cream:    #f5f0e8;
  --warm-light: #c4a882;
  --warm-mid: #7a5c3a;
  --line:     #d9cfc0;

  --line-dark: #4b3622;
  --brown:    #3d2010;
  --espresso: #1a0f08;


  --t-held: 40px;

  --veil-side: rgba(26, 15, 8, .82);





  --veil-top:      rgba(26, 15, 8, .62);
  --veil-top-out:  rgba(26, 15, 8, .18);
  --veil-corner:   rgba(26, 15, 8, .75);
  --veil-corner-out: rgba(26, 15, 8, .66);


  --red-ink: #b63230;


  --display: Fraunces, Georgia, "Times New Roman", serif;
  --sans:    Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;


  --t-h1:  46px;
  --t-h2:  32px;
  --t-h3:  21px;
  --t-note:  14px;
  --t-body:  16px;
  --t-label: 12px;

  --t-source: 10px;

  --t-name:  20.8cqw;   
  --lh-name: calc(var(--unit) * 3);   
  --t-label-l: 16px;
  --t-brand:   18px;
  --t-deck:  18px;

  --measure: calc(5 * 66px + 4 * 24px);   


  --measure-held: 589px;


  --measure-wide: calc(7 * 66px + 6 * 24px);


  --icon: var(--unit);



  --unit: 24px;

  --lh-source: var(--unit);
  --lh-label:  var(--unit);
  --lh-note:   var(--unit);
  --lh-body:   var(--unit);
  --lh-brand:  var(--unit);
  --lh-deck:   var(--unit);

  --lh-h3: var(--unit);
  --lh-h2: calc(var(--unit) * 2);
  --lh-h1: calc(var(--unit) * 2);
  --lh-held: calc(var(--unit) * 2);



  --rung: calc(var(--unit) * 2);



  --rule-pad:    calc(var(--unit) - 1px);   

  --gap-line:    var(--unit);
  --gap-block:   var(--rung);
  --gap-section: calc(var(--unit) * 4);



  
  --s-2: 8px;  --s-4: 16px;  --s-5: 24px;  --s-6: 32px;



  --wrap:   1120px;
  --pad:      24px;
  --cols:        2;
  --gutter:   20px;


  --tap:  calc(var(--unit) * 2);   
  --fast: .18s;

  --bar-h: calc(var(--tap) + var(--unit));



  --print-paper: #fff;
  --print-ink:   #000;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;

  padding-bottom: var(--bar-h);
  background: var(--cream);
  color: var(--brown);
  font: 300 var(--t-body)/var(--lh-body) var(--sans);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }


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

.skip { position: absolute; left: -9999px; top: 0; z-index: 100;
        background: var(--espresso); color: var(--cream);
        padding: var(--gap-line) var(--s-4); }
.skip:focus { left: 0; }

.page-title { position: absolute; left: -9999px; top: 0; }




.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad);
        display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
        column-gap: var(--gutter); row-gap: 0; }   
.wrap:where(:not(.bar-in)) > * { grid-column: 1 / -1; }   







.top-in { padding-block: var(--gap-line); }
.top-in > * { justify-self: start; }
.mark { display: inline-flex; align-items: center; min-height: var(--tap);
        font: 400 var(--t-brand)/var(--lh-brand) var(--display); letter-spacing: .01em;
        color: var(--cream); text-decoration: none; }
.nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-4); }


.nav a { display: inline-flex; align-items: center; min-height: var(--tap);
         font: 500 var(--t-note)/var(--lh-note) var(--sans); letter-spacing: .12em; text-transform: uppercase;
         color: var(--cream); text-decoration: none; white-space: nowrap;
         text-underline-offset: 6px; transition: text-decoration-color var(--fast) ease; }
.nav a:hover { text-decoration: underline; }

.top-solid { background: var(--cream); }
.top-solid .mark { color: var(--espresso); }
.top-solid .nav a { color: var(--brown); }
.nav a[aria-current] { text-decoration: underline; text-underline-offset: 6px; }






.hero { position: relative; display: flex; flex-direction: column;
        min-height: calc(100svh - var(--bar-h)); padding-bottom: var(--gap-line);
        background: var(--espresso); overflow: hidden; }

.top, .hero-text { position: relative; z-index: 1; }

.hero-img { position: absolute; inset: 0; width: 100%; height: 100%;
            object-fit: cover; object-position: center 42%; opacity: .90; }

.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
               background:
                 linear-gradient(to bottom, var(--veil-top) 0%, var(--veil-top) 20%,
                                 var(--veil-top-out) 36%, transparent 56%); }

.hero-text::before { content: ""; position: absolute; z-index: -1;
  inset: -88px -50vw -40px -50vw;
  background: linear-gradient(to top, var(--veil-corner) 0%, var(--veil-corner) 72%,
                              var(--veil-corner-out) 90%, transparent 100%); }

.hero-text { margin-top: auto; }




.lede-h { color: var(--cream); }




.hero-block .label + h1 { margin-top: 0; }

.hero-lede { margin: var(--gap-line) 0 0;
             font: 400 var(--t-h3)/var(--lh-h3) var(--display); color: var(--cream); }




.act { display: grid; grid-template-columns: minmax(0, max-content); gap: var(--gap-line); }
.hero-act { margin-top: var(--gap-line); }



.panel { background: var(--cream); padding-block: var(--gap-block); }



.panel-in { row-gap: var(--gap-line); }


.prose > * { max-width: var(--measure); }



.label, h4, .hours dt, .slot span {
  font: 400 var(--t-label)/var(--lh-label) var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--warm-mid); }
.label { margin: 0; }


.label.on-photo { color: var(--cream); font-size: var(--t-label-l); }

.label + :is(h1, h2, h3, p, dl, ul, ol) { margin-top: var(--gap-line); }


h1 { margin: 0; font: 300 var(--t-h1)/var(--lh-h1) var(--display); letter-spacing: -.02em;
     color: var(--espresso); }


h3, .quote p { margin: 0; font: 300 var(--t-h3)/var(--lh-h3) var(--display); }
h3 { color: var(--espresso); }

h4 { margin: 0; }


h2 { margin: 0; font: 300 var(--t-h2)/var(--lh-h2) var(--display); letter-spacing: -.02em;
     color: var(--espresso); }






.quote cite { display: block; margin-top: var(--gap-line); font-style: normal;
              font-size: var(--t-note); }
.quote cite::before { content: "\2014\00a0"; }






.slot, .dark-fig img { width: 100%; height: auto; object-fit: cover; }





.crew-set { grid-column: 1 / -1;
            display: grid; grid-auto-flow: column; grid-auto-columns: 280px; gap: var(--s-4);
            margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad);
            overflow-x: auto; overscroll-behavior-inline: contain;
            scroll-snap-type: x proximity; scroll-padding-inline: var(--pad); }

.cfig { margin: 0; position: relative; scroll-snap-align: start;
        aspect-ratio: 3 / 4; background: var(--brown); container-type: inline-size;
        display: grid; align-content: end; }

.cfig .slot { position: absolute; inset: 0; width: 100%; height: 100%;
              aspect-ratio: auto; padding: 0; background: none; object-fit: cover; }

.cfig::after { content: ""; position: absolute; inset: 0; pointer-events: none;
               background: linear-gradient(180deg,
                 transparent 0%, transparent 48%,
                 color-mix(in srgb, var(--espresso) 70%, transparent) 78%,
                 color-mix(in srgb, var(--espresso) 90%, transparent) 100%); }
.cfig figcaption { position: relative; z-index: 1; padding: var(--gap-line); }

.cname { margin: 0; font: 300 var(--t-name)/var(--lh-name) var(--display); letter-spacing: -.02em;
         color: var(--cream); }

.cfig cite { display: block; font: 400 var(--t-source)/var(--lh-source) var(--mono); letter-spacing: .12em;
             text-transform: uppercase;
             color: color-mix(in srgb, var(--cream) 65%, transparent); }
.cfig blockquote { margin: var(--gap-line) 0 0; }

.cfig blockquote p { margin: 0; font: 400 var(--t-note)/var(--lh-note) var(--display);
                     color: color-mix(in srgb, var(--cream) 85%, transparent); }

#crew .panel-in { row-gap: var(--gap-block); }






.vcol { min-width: 0; margin: 0; }



.v-state { font: 300 var(--t-deck)/var(--lh-deck) var(--display); color: var(--espresso);
           margin-top: var(--gap-line); }


#visit { padding-bottom: 0; }
.v-front { margin-top: var(--gap-line); margin-inline: calc(var(--pad) * -1); }

.v-front .slot { aspect-ratio: 3 / 2; max-height: calc(100svh - var(--bar-h)); }

.v-where p { margin: 0; max-width: var(--measure); font-size: var(--t-body); line-height: var(--lh-body); }


.v-where .label { margin-top: var(--gap-line); }

.amen { list-style: none; margin: var(--gap-line) 0 0; padding: 0;
        columns: 140px; column-gap: var(--gutter); }

.amen li { font-size: var(--t-note); line-height: var(--lh-note); color: var(--warm-mid);
           break-inside: avoid; }



.hours { margin: 0; }
.hours dt { margin: 0; }
.hours dd + dt { margin-top: var(--gap-line); padding-top: var(--rule-pad);
                 border-top: 1px solid var(--line); }
.hours dd { margin: 0; font-size: var(--t-body);
            font-variant-numeric: tabular-nums; }

.hours dd.await { font-size: var(--t-note); font-style: italic; color: var(--warm-mid);
                  font-variant-numeric: normal; }



.more { margin: 0; font-size: var(--t-body); }

.more a { display: inline-flex; align-items: center; min-height: var(--tap);
          color: var(--brown); }



.visit-act { margin-top: var(--gap-line); }


.btn { display: inline-flex; align-items: center; justify-content: center;
       min-height: var(--tap); padding-inline: var(--s-6);

       font: 400 var(--t-note)/var(--lh-note) var(--sans); letter-spacing: .12em; text-transform: uppercase;
       text-decoration: none; white-space: nowrap; transition: opacity var(--fast) ease; }
.btn:hover { opacity: .85; }

.btn.solid { background: var(--espresso); color: var(--cream); }
.btn.ghost { border: 1px solid var(--brown); color: var(--brown); }

.btn.invert { background: var(--cream); color: var(--espresso); }

.btn.outline-invert { border: 1px solid var(--cream); color: var(--cream); }




.tight { padding-block: var(--gap-line); }
.notes-top { padding-block: var(--gap-block) var(--gap-line); }
.notes-foot { padding-block: var(--gap-line) var(--gap-block); }

.sources-block { max-width: var(--measure-wide); }
.band .prose { row-gap: var(--gap-line); }

.credit, .foot p { margin: 0; max-width: var(--measure); font-size: var(--t-note); }
.credit { color: var(--warm-mid); }




.credit b { font-weight: 500; color: var(--brown); }



.sub { margin-top: var(--gap-block); }

.items { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--gap-line); }
.items li { font-size: var(--t-body); }

.item { font-weight: 500; }

.desc { font-weight: 300; }

.items b { font-weight: 500; }


.grp { min-width: 0; display: grid; gap: 0; align-content: start; }
.grp + .grp { margin-top: var(--gap-line); }

.desc { display: block; margin-top: 0;
        font-size: var(--t-note); line-height: var(--lh-note); color: var(--warm-mid); }


.bean-copy + .bean-copy { margin-top: var(--gap-line); }
.bean-copy p { margin: var(--gap-line) 0 0; max-width: var(--measure);
               font-size: var(--t-body); line-height: var(--lh-body); }


.sources { margin: 0; display: grid; gap: var(--gap-line); }
.sources > div { display: flex; flex-wrap: wrap; gap: var(--gap-line) var(--s-2); }
.sources dt, .sources dd { margin: 0; font-size: var(--t-note); line-height: var(--lh-note); }

.band .sources dt { color: var(--espresso); }
.band .sources dd, .band .prose p { color: var(--brown); }

.band .prose p { font-size: var(--t-note); }


.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
       background: var(--espresso); }

.bar-in { display: flex; align-items: center; justify-content: space-between;
          gap: var(--s-4); min-height: var(--bar-h); }


.bar .state { font-size: var(--t-note); color: var(--cream); }



.foot { background: var(--espresso); color: var(--line); padding-block: var(--gap-block); }

.foot p + p { margin-top: var(--gap-line); }
.foot a { display: inline-flex; align-items: center; min-height: var(--tap);
          color: var(--cream); }


.foot-act { display: flex; align-items: center; gap: 0; }
.foot-act a { justify-content: center; min-width: var(--tap); }
.foot-act svg { display: block; width: var(--icon); height: var(--icon); }


.mock-flag { color: var(--warm-light); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; }
}


.held { background: var(--espresso); min-height: 85svh; padding-block: var(--gap-section);
        display: grid; place-items: center; }

.held blockquote { margin: 0; text-align: center; max-width: var(--measure-held); }


.held p { margin: 0; text-indent: -.42em;
          font: 300 var(--t-held)/var(--lh-held) var(--display); color: var(--cream); }

.held cite { display: block; margin-top: var(--gap-line); font-style: normal;
             font: 400 var(--t-label)/var(--lh-label) var(--mono); letter-spacing: .14em;
             text-transform: uppercase; color: color-mix(in srgb, var(--cream) 55%, transparent); }




.panel.dark { background: var(--espresso); padding-block: var(--gap-block); }




.panel.band { background: var(--line); }

.band .label { color: var(--espresso); }



.dark-in, .dark-out { row-gap: var(--gap-line); }
.dark-out { margin-top: var(--gap-block); }


.label-l { font-size: var(--t-label); line-height: var(--lh-label); }
.dark .label { color: var(--warm-light); }
.dark h2 { color: var(--cream); margin: 0; align-self: start; }


.deck { margin: 0; font: 300 var(--t-deck)/var(--lh-deck) var(--display); color: var(--cream); }

.dark-fig { margin-top: var(--gap-block); }



.dark-fig img { aspect-ratio: 3 / 2; }
.dark-quote { margin: 0; }
.dark-quote p { color: var(--cream); }

.dark-quote cite { color: var(--warm-light); }

@media (min-width: 820px) {
  :root { --pad: 32px; --cols: 12; --gutter: 24px;
          --t-h1: 118px; --t-h2: 80px; --t-h3: 30px; --t-brand: 21px; --t-deck: 21px;

          --lh-h3: calc(var(--unit) * 2);
          --lh-h2: calc(var(--unit) * 4);
          --lh-h1: calc(var(--unit) * 5);
          --lh-held: calc(var(--unit) * 4);

          --t-held: 88px;


          --content: calc(var(--wrap) - 2 * var(--pad));
          --col:     calc((var(--content) - (var(--cols) - 1) * var(--gutter)) / var(--cols));

          --span-9:  calc(9 * var(--col) + 8 * var(--gutter)); }

  .nav { gap: var(--s-5); }
  
  .top-in > * { grid-row: 1; }
  .top-in > .mark { grid-column: 1 / 5; }
  .top-in > .nav { grid-column: 5 / 8; }

  .hero { gap: var(--gap-block); padding-bottom: var(--gap-block); }
  .hero-block .label + h1 { margin-top: var(--gap-line); }
  .hero-lede { margin-top: var(--gap-block); }

  .act { display: flex; flex-wrap: wrap; }
  .act .btn { flex: 0 1 auto; }
  .hero-act { margin-top: var(--gap-block); }
  .hero-block { max-width: var(--span-9); }

  .hero::after { background:
                   linear-gradient(100deg,
                                   var(--veil-side)      0%,
                                   var(--veil-top)      38%,
                                   var(--veil-top-out)  68%,
                                   transparent         100%); }
  .hero-text::before { display: none; }

  .dark-in h2   { grid-column: 1 / 7; }
  .dark-in .deck { grid-column: 9 / 13; align-self: start; }

  .label-l { font-size: var(--t-label-l); }
  .dark-fig img { aspect-ratio: 21 / 9; }
  .dark-quote { grid-column: 1 / 11; }



  #visit .panel-head { grid-row: 1; }


  .vcol { align-self: start; }
  .v-state { grid-column: 1 / 5; grid-row: 2; font-weight: 300; font-size: var(--t-h3); line-height: var(--lh-h3); font-family: var(--display); margin-top: 0; }
  .v-hours { grid-column: 1 / 5; grid-row: 3; }
  .v-where { grid-column: 1 / 5; grid-row: 4; }

  #visit { padding-bottom: var(--gap-block); }
  .v-front { grid-column: 5 / 13; grid-row: 2 / span 3; margin: 0; align-self: start; }
  .v-front .slot { aspect-ratio: 4 / 3; }



  .crew-set { grid-auto-flow: row; grid-auto-columns: auto;
              grid-template-columns: subgrid; column-gap: normal;   
              margin-inline: 0; padding-inline: 0;
              overflow: visible; scroll-snap-type: none; }
  .crew-set > .cfig { grid-column: span 4; }


  #crew .panel-in { row-gap: var(--gap-block); }

  .g-1 { grid-column: 1 / 5; }
  .g-2 { grid-column: 5 / 9; }
  .g-3 { grid-column: 9 / 13; }

  .bean-copy { grid-column: 1 / 9; }

  .visit-act { margin: 0; }


  .foot .wrap::before { content: ""; display: block; height: 1px;
                        background: var(--line-dark); margin-bottom: calc(var(--gap-block) - 1px); }
}


@media (min-width: 820px) and (max-height: 743px) {
  .hero { gap: var(--gap-line); padding-bottom: var(--gap-line); }
}



@media print {

  :root { --print-h1: 42px; }
  body { background: var(--print-paper); color: var(--print-ink); padding-bottom: 0; }

  .top, .bar, .hero::after { display: none; }
  .hero { display: block; min-height: 0; padding-bottom: 0; background: none; }
  .hero-img { position: static; height: auto; opacity: 1; }
  .hero-text { margin-top: var(--gap-line); }
  .label.on-photo, .lede-h { color: var(--print-ink); }
  .lede-h { font-size: var(--print-h1); max-width: none; }

  .foot { background: none; color: var(--print-ink); }
  .foot a, .mock-flag { color: var(--print-ink); }


  .slot, .cfig { background: none; border: 1px solid var(--print-ink); }
  .slot span { color: var(--print-ink); }

  .held { background: none; min-height: 0; padding-block: var(--gap-block); }
  .held p, .held cite { color: var(--print-ink); }

  .crew-set { grid-auto-flow: row; grid-auto-columns: auto;
              grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter);
              margin-inline: 0; padding-inline: 0; overflow: visible; }
  .cfig::after { display: none; }
  .cname, .cfig cite, .cfig blockquote p { color: var(--print-ink); }
}