/* Minnesota Winter: the artifact.
   A found object, not AppZoo: a winter field bulletin run off on a spirit duplicator, in ditto purple
   on cold white stock, typed on a typewriter, headed in condensed gothic. It knows nothing of the Zoo.
   Its one nod is its title, set in the cabinet's title type (Ultra).
   Scope: everything here sits under [data-artifact="mn-winter"], and nothing reaches the cabinet around it.
   The palette is the artifact's own, defined once at the scope root (the one place literals are allowed). */

[data-artifact="mn-winter"] {
  --mw-stock: #f7f6f2;          /* cold white duplicator stock */
  --mw-ink: #1f1a2e;            /* typed text: near-black with a purple cast */
  --mw-ditto: #4a3889;          /* spirit-duplicator purple: rules, heads, the one loud thing */
  --mw-ditto-strong: #362868;
  --mw-on-ditto: #f7f6f2;
  --mw-ditto-faint: #e6e2f1;    /* tinted boxes */
  --mw-muted: #4f4a60;
  --mw-rule: #b9b2d4;
  --mw-danger: #8f1d2c;
  --mw-focus: #4a3889;
  --mw-graphite: #55505c;       /* pencil in the margin */
  --mw-type: "Courier Prime", "Courier New", Courier, monospace;
  --mw-head: "Archivo Narrow", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --mw-title: "Ultra", Georgia, serif; /* the nod: AppZoo's title type */

  box-sizing: border-box;
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding: 56px 56px 48px 96px;
  background: var(--mw-stock);
  color: var(--mw-ink);
  font: 400 17px/1.6 var(--mw-type);
  box-shadow: 0 1px 0 rgba(31, 26, 46, .08), 0 14px 32px -18px rgba(31, 26, 46, .45);
}
:root[data-theme="dark"] [data-artifact="mn-winter"] {
  --mw-stock: #17151f; --mw-ink: #ebe8f3; --mw-ditto: #b9a8f2; --mw-ditto-strong: #d4c9fa; --mw-on-ditto: #17151f;
  --mw-ditto-faint: #25213a; --mw-muted: #b8b3c7; --mw-rule: #4a4366; --mw-danger: #ff9aa6; --mw-focus: #b9a8f2; --mw-graphite: #a9a3b4;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) [data-artifact="mn-winter"] {
    --mw-stock: #17151f; --mw-ink: #ebe8f3; --mw-ditto: #b9a8f2; --mw-ditto-strong: #d4c9fa; --mw-on-ditto: #17151f;
    --mw-ditto-faint: #25213a; --mw-muted: #b8b3c7; --mw-rule: #4a4366; --mw-danger: #ff9aa6; --mw-focus: #b9a8f2; --mw-graphite: #a9a3b4;
  }
}
[data-artifact="mn-winter"] *, [data-artifact="mn-winter"] *::before, [data-artifact="mn-winter"] *::after { box-sizing: border-box; }

/* Three-hole punch down the left margin. */
[data-artifact="mn-winter"] .mw-punch { position: absolute; left: 32px; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-around; padding: 80px 0; pointer-events: none; }
[data-artifact="mn-winter"] .mw-punch span { width: 22px; height: 22px; border-radius: 50%; background: var(--mw-hole, #e9e4d8); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .25); }
:root[data-theme="dark"] [data-artifact="mn-winter"] .mw-punch span { background: #0c0b10; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) [data-artifact="mn-winter"] .mw-punch span { background: #0c0b10; } }

/* Text basics, reset inside the sheet. */
[data-artifact="mn-winter"] p { margin: 0 0 14px; max-width: 68ch; }
[data-artifact="mn-winter"] .mw-kicker, [data-artifact="mn-winter"] .mw-part, [data-artifact="mn-winter"] .mw-foot, [data-artifact="mn-winter"] .mw-contents { max-width: none; }
[data-artifact="mn-winter"] a { color: var(--mw-ditto); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
[data-artifact="mn-winter"] a:hover { color: var(--mw-ditto-strong); text-decoration-thickness: 2px; }
[data-artifact="mn-winter"] :focus-visible { outline: 3px solid var(--mw-focus); outline-offset: 2px; box-shadow: none; }

/* Masthead. */
[data-artifact="mn-winter"] .mw-mast { border-top: 6px solid var(--mw-ditto); border-bottom: 2px solid var(--mw-ditto); padding: 14px 0 16px; margin-bottom: 36px; }
[data-artifact="mn-winter"] .mw-kicker { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 6px; font: 700 13px/1.3 var(--mw-head); letter-spacing: .14em; text-transform: uppercase; color: var(--mw-ditto); }
[data-artifact="mn-winter"] .mw-title { margin: 0; font: 400 clamp(34px, 6vw, 60px)/1.02 var(--mw-title); color: var(--mw-ditto); }
[data-artifact="mn-winter"] .mw-contents { margin: 10px 0 0; font: 400 15px/1.5 var(--mw-type); color: var(--mw-muted); }

/* Numbered sections. */
[data-artifact="mn-winter"] .mw-part { margin: 44px 0 6px; padding-top: 10px; border-top: 2px solid var(--mw-ditto); font: 700 15px/1.3 var(--mw-head); letter-spacing: .16em; text-transform: uppercase; color: var(--mw-ditto); }
[data-artifact="mn-winter"] .mw-sec { margin: 26px 0 0; scroll-margin-top: 24px; }
[data-artifact="mn-winter"] .mw-sec > h2, [data-artifact="mn-winter"] .mw-form h2 { display: flex; align-items: baseline; gap: 12px; margin: 0 0 10px; font: 700 24px/1.15 var(--mw-head); text-transform: uppercase; letter-spacing: .03em; color: var(--mw-ink); }
[data-artifact="mn-winter"] .mw-no { flex: none; min-width: 2.2em; font: 700 15px/1 var(--mw-type); color: var(--mw-ditto); }
[data-artifact="mn-winter"] .mw-sec ul { margin: 0; padding: 0; list-style: none; max-width: 68ch; }
[data-artifact="mn-winter"] .mw-sec li { position: relative; padding-left: 28px; margin-bottom: 8px; }
[data-artifact="mn-winter"] .mw-sec li::before { content: "\2014"; position: absolute; left: 0; color: var(--mw-ditto); }

/* The two forms, side by side: wind chill (the one people came for) wider. */
[data-artifact="mn-winter"] .mw-forms { display: grid; grid-template-columns: 3fr 2fr; gap: 28px; align-items: start; }
[data-artifact="mn-winter"] .mw-form { border: 2px solid var(--mw-ditto); padding: 18px 20px 16px; scroll-margin-top: 24px; }
[data-artifact="mn-winter"] .mw-form-id { margin: 0 0 4px; font: 700 12px/1.3 var(--mw-head); letter-spacing: .16em; text-transform: uppercase; color: var(--mw-ditto); }
[data-artifact="mn-winter"] .mw-form-desc { font-size: 15px; }
[data-artifact="mn-winter"] .mw-fields { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; margin: 6px 0 14px; }
[data-artifact="mn-winter"] .mw-field { display: grid; gap: 4px; flex: 1 1 140px; min-width: 0; }
[data-artifact="mn-winter"] .mw-field-label { font: 700 12px/1.3 var(--mw-head); letter-spacing: .12em; text-transform: uppercase; color: var(--mw-muted); }
[data-artifact="mn-winter"] .mw-input { width: 100%; min-height: 44px; padding: 6px 4px 4px; border: 0; border-bottom: 2px solid var(--mw-ink); border-radius: 0; background: transparent; color: var(--mw-ink); font: 700 20px/1.2 var(--mw-type); }
[data-artifact="mn-winter"] select.mw-input { appearance: none; padding-right: 26px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 13px) 55%, calc(100% - 8px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
[data-artifact="mn-winter"] select.mw-input option { background: var(--mw-stock); color: var(--mw-ink); }
[data-artifact="mn-winter"] .mw-btn { min-height: 44px; padding: 8px 16px; border: 2px solid var(--mw-ditto); border-radius: 0; background: transparent; color: var(--mw-ditto); font: 700 15px/1.2 var(--mw-head); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
[data-artifact="mn-winter"] .mw-btn:hover { background: var(--mw-ditto-faint); }
[data-artifact="mn-winter"] .mw-btn-fill { background: var(--mw-ditto); color: var(--mw-on-ditto); }
[data-artifact="mn-winter"] .mw-btn-fill:hover { background: var(--mw-ditto-strong); border-color: var(--mw-ditto-strong); }

/* Results: a typed slip in a tinted box. */
[data-artifact="mn-winter"] .mw-result { margin: 0 0 14px; padding: 12px 14px; background: var(--mw-ditto-faint); border-left: 6px solid var(--mw-ditto); }
[data-artifact="mn-winter"] .mw-result-label { margin: 0 0 2px; font: 700 12px/1.3 var(--mw-head); letter-spacing: .12em; text-transform: uppercase; color: var(--mw-muted); }
[data-artifact="mn-winter"] .mw-result-value { margin: 0 0 6px; font: 700 clamp(34px, 5vw, 46px)/1.05 var(--mw-type); letter-spacing: -.02em; }
[data-artifact="mn-winter"] .mw-result-text { margin: 0; font-size: 15px; }
[data-artifact="mn-winter"] .mw-level { display: inline-block; margin-right: 6px; padding: 0 6px; border: 2px solid var(--mw-danger); color: var(--mw-danger); font: 700 13px/1.5 var(--mw-head); letter-spacing: .12em; text-transform: uppercase; transform: rotate(-2deg); }
[data-artifact="mn-winter"] .mw-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--mw-muted); }

/* Ice: the one number in a marginal box beside the warning. */
[data-artifact="mn-winter"] .mw-callout { display: grid; grid-template-columns: 11rem 1fr; gap: 22px; align-items: start; margin-top: 6px; }
[data-artifact="mn-winter"] .mw-fig { margin: 0; padding: 10px 12px; border: 2px solid var(--mw-ditto); }
[data-artifact="mn-winter"] .mw-fig-value { margin: 0; font: 700 40px/1 var(--mw-type); color: var(--mw-ditto); }
[data-artifact="mn-winter"] .mw-fig-value small { font-size: 20px; }
[data-artifact="mn-winter"] .mw-fig figcaption { margin-top: 6px; font-size: 13px; line-height: 1.45; }

/* Food: a typed glossary with dotted leaders. */
[data-artifact="mn-winter"] .mw-terms { margin: 0; max-width: 74ch; }
[data-artifact="mn-winter"] .mw-terms div { padding: 8px 0; border-bottom: 1px dashed var(--mw-rule); }
[data-artifact="mn-winter"] .mw-terms dt { font: 700 16px/1.3 var(--mw-head); letter-spacing: .08em; text-transform: uppercase; color: var(--mw-ditto); }
[data-artifact="mn-winter"] .mw-terms dd { margin: 2px 0 0; }

/* Records: a ruled table of two. */
[data-artifact="mn-winter"] .mw-records { width: 100%; max-width: 74ch; border-collapse: collapse; }
[data-artifact="mn-winter"] .mw-records th, [data-artifact="mn-winter"] .mw-records td { padding: 10px 12px 10px 0; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--mw-rule); }
[data-artifact="mn-winter"] .mw-records th { width: 9.5rem; font: 700 30px/1.05 var(--mw-type); color: var(--mw-ditto); white-space: nowrap; }
[data-artifact="mn-winter"] .mw-records td { font-size: 15px; }

[data-artifact="mn-winter"] .mw-foot { margin-top: 40px; padding-top: 10px; border-top: 2px solid var(--mw-ditto); font: 700 12px/1.4 var(--mw-head); letter-spacing: .14em; text-transform: uppercase; color: var(--mw-muted); }

/* Mystery: things the sheet carries that it never explains. Never on the useful information itself. */
[data-artifact="mn-winter"] .mw-has-margin { position: relative; }
[data-artifact="mn-winter"] .mw-pencil { position: absolute; right: 0; top: -4px; margin: 0; max-width: none; font: 500 22px/1 "Caveat", "Segoe Print", cursive; color: var(--mw-graphite); transform: rotate(-4deg); }
[data-artifact="mn-winter"] .mw-foot { display: flex; justify-content: flex-end; }
@media (max-width: 40rem) { [data-artifact="mn-winter"] .mw-pencil { position: static; display: block; margin: -4px 0 8px; } }

@media (max-width: 56rem) {
  [data-artifact="mn-winter"] .mw-forms { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  [data-artifact="mn-winter"] { padding: 32px 18px 28px; font-size: 16px; }
  [data-artifact="mn-winter"] .mw-punch { display: none; }
  [data-artifact="mn-winter"] .mw-callout { grid-template-columns: 1fr; }
  [data-artifact="mn-winter"] .mw-records th { width: auto; font-size: 24px; }
  [data-artifact="mn-winter"] .mw-sec > h2, [data-artifact="mn-winter"] .mw-form h2 { font-size: 21px; }
}