<style>
  .co-display, .co-display * { box-sizing: border-box; }
  .co-display { --co-paper: #fff; --co-ink: #000; width: 100%; height: 100%; padding: 14px 20px 10px; color: var(--co-ink); background: var(--co-paper); font-family: Arial, Helvetica, sans-serif; display: flex; flex-direction: column; line-height: 1.2; }
  .co-display--night { --co-paper: #000; --co-ink: #fff; }
  .co-display p, .co-display h1, .co-display figure { margin: 0; }
  .co-masthead { position: relative; padding-right: 60px; display: flex; width: 100%; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 4px 16px; flex-wrap: wrap; font: 10px/1.3 'Courier New', monospace; letter-spacing: 1.4px; }
  .co-date { position: absolute; top: 0; right: 0; width: 44px; height: 44px; border: 1px solid currentColor; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; letter-spacing: 0; white-space: nowrap; }
  .co-date-month { font-size: 9px; line-height: 1; }
  .co-date-day { font-size: 21px; line-height: 1; font-weight: 700; }
  .co-identity { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'name coordinates' 'place coordinates'; gap: 2px 12px; padding: 7px 60px 6px 0; }
  .co-location { grid-area: place; text-align: center; font: 10px/1.35 'Courier New', monospace; letter-spacing: .6px; text-transform: uppercase; }
  .co-display h1 { grid-area: name; font: 700 36px/1.12 'Courier New', monospace; letter-spacing: -1.5px; }
  .co-coordinate { grid-area: coordinates; align-self: center; font: 9px/1.3 'Courier New', monospace; text-align: right; }
  .co-identity--long { grid-template-areas: 'name name' 'place place' 'coordinates coordinates'; }
  .co-identity--long .co-coordinate { text-align: left; align-self: start; }
  .co-content { display: grid; grid-template-columns: minmax(0, 1.95fr) minmax(0, 1fr); gap: 18px; flex: 1; min-height: 0; }
  .co-terrain { display: flex; flex-direction: column; min-width: 0; min-height: 0; justify-content: flex-end; }
  .co-art { width: 100%; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
  .co-art svg { display: block; width: 100%; height: 100%; }
  .co-terrain-caption { font: 8.5px/1.3 'Courier New', monospace; padding-top: 3px; text-align: center; }
  .co-details { padding: 5px 0 0 3px; display: flex; flex-direction: column; min-height: 0; justify-content: space-between; gap: 10px; }
  .co-label { font: 10px/1.3 'Courier New', monospace; text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 5px !important; }
  .co-fact { font-size: 13px; line-height: 1.4; }
  .co-altitude { font: 700 20px/1.2 'Courier New', monospace; letter-spacing: -.7px; white-space: nowrap; }
  .co-scope { font-size: 10px; line-height: 1.3; margin-top: 3px !important; }
  .co-cup { font-size: 15px; line-height: 1.3; font-weight: 600; }
  .co-qualifier { font-size: 10px; line-height: 1.35; margin-top: 5px !important; }
  .co-cup-description { display: none; }
  .co-footer { display: flex; justify-content: space-between; gap: 14px; border-top: 1px solid currentColor; margin-top: 7px; padding-top: 5px; font-size: 8.5px; line-height: 1.35; }
  .co-credit { max-width: 76%; }
  .co-number { font-family: 'Courier New', monospace; font-size: 11px; white-space: nowrap; text-align: right; }
  .co-status { font-size: 9px; font-weight: 700; margin-top: 3px !important; }
  .screen--v2 .co-display { padding: 22px 28px 16px; }
  .screen--v2 .co-masthead { font-size: 12px; letter-spacing: 1.7px; }
  .screen--v2 .co-date { width: 52px; height: 52px; }
  .screen--v2 .co-date-month { font-size: 11px; }
  .screen--v2 .co-date-day { font-size: 26px; }
  .screen--v2 .co-identity { padding: 10px 68px 8px 0; gap: 3px 16px; }
  .screen--v2 .co-location { font-size: 12px; letter-spacing: .8px; }
  .screen--v2 .co-display h1 { font-size: 52px; letter-spacing: -2px; }
  .screen--v2 .co-coordinate { font-size: 11px; }
  .screen--v2 .co-content { display: flex; flex-direction: column; gap: 8px; }
  .screen--v2 .co-terrain { flex: 1; }
  .screen--v2 .co-art svg { max-height: none; }
  .screen--v2 .co-terrain-caption { font-size: 10px; padding-top: 4px; line-height: 1.3; }
  .screen--v2 .co-details { flex: none; display: grid; grid-template-columns: 1.2fr .9fr 1.2fr; padding: 5px 0 0; gap: 22px; border-top: 1px solid currentColor; }
  .screen--v2 .co-label { font-size: 10px; margin-bottom: 5px !important; }
  .screen--v2 .co-fact { font-size: 14px; line-height: 1.3; }
  .screen--v2 .co-altitude { font-size: 24px; }
  .screen--v2 .co-scope { font-size: 11px; line-height: 1.4; margin-top: 4px !important; }
  .screen--v2 .co-cup { font-size: 18px; line-height: 1.3; }
  .screen--v2 .co-cup-description { display: none; }
  .screen--v2 .co-qualifier { font-size: 10px; line-height: 1.3; margin-top: 4px !important; }
  .screen--v2 .co-footer { font-size: 9px; line-height: 1.3; margin-top: 8px; padding-top: 6px; }
  .screen--v2 .co-number { font-size: 14px; }
  @media (max-width: 700px) { .co-display { padding: 16px 18px 12px; } .co-identity { padding: 8px 60px 4px 0; } .co-display h1 { font-size: 36px; } .co-coordinate { font-size: 9px; } .co-content { gap: 14px; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } .co-details { padding-left: 6px; gap: 6px; } .co-label { font-size: 9px; letter-spacing: 1px; } .co-fact { font-size: 11.5px; } .co-altitude { font-size: 17px; } .co-cup { font-size: 13.5px; } .co-scope, .co-qualifier { font-size: 9px; } .co-footer { margin-top: 8px; } }
</style>
<div class="layout co-display co-display--{{ display_theme | escape }}" data-origin="{{ origin_id | escape }}" data-date="{{ calendar_date | escape }}" data-terrain="{{ terrain_status | escape }}" data-theme="{{ display_theme | escape }}">
  <header class="co-masthead">
    <span>COFFEE ORIGIN OF THE DAY</span>
    <span class="co-date" aria-label="{{ date_label | escape }} · Pacific">
      <span class="co-date-month">{{ calendar_date | date: "%b" | upcase | escape }}</span>
      <span class="co-date-day">{{ calendar_date | date: "%d" | plus: 0 }}</span>
    </span>
  </header>
  <div class="co-identity{% if origin_name.size > 17 %} co-identity--long{% endif %}">
    <p class="co-location">{{ country | escape }} / {{ country_code | escape }} / {{ area_label | escape }}</p>
    <h1>{{ origin_name | escape }}</h1>
    <p class="co-coordinate">{{ coordinate_label | escape }} / WINDOW CENTRE</p>
  </div>
  <div class="co-content">
    <figure class="co-terrain">
      <div class="co-art">{{ terrain_svg }}</div>
      <figcaption class="co-terrain-caption">{{ terrain_caption | escape }} · {{ terrain_detail | escape }}</figcaption>
    </figure>
    <aside class="co-details">
      <section>
        <p class="co-label">The land</p>
        <p class="co-fact">{{ geography | escape }}</p>
      </section>
      <section>
        <p class="co-label">Coffee growing elevation</p>
        <p class="co-altitude">{{ growing_elevation | escape }}</p>
        <p class="co-scope">{{ growing_elevation_scope | escape }}</p>
      </section>
      <section>
        <p class="co-label">In the cup</p>
        <p class="co-cup">{{ cup_keywords | join: ' / ' | escape }}</p>
        <p class="co-scope">{{ cup_scope | escape }}</p>
        <p class="co-cup-description">{{ cup_description | escape }}</p>
        <p class="co-qualifier">{{ cup_qualification | escape }}</p>
      </section>
    </aside>
  </div>
  <footer class="co-footer">
    <div class="co-credit">Coffee: {{ source_label | escape }}. Terrain: {{ terrain_attribution | escape }}.<br>{{ terrain_caution | escape }}{% if coordinate_source_label != '' %} Coords: {{ coordinate_source_label | escape }}.{% endif %}</div>
    <div class="co-number">FIELDNOTE {{ collection_index | escape }} / {{ collection_total | escape }}{% if content_status == 'starter-fallback' %}<p class="co-status">STARTER CACHE</p>{% endif %}</div>
  </footer>
</div>
