/* EPCOT Festival of the Arts 2027, card 861.
   An artist's studio: linen canvas, charcoal line, and a paint box of sage, ochre, cadmium and
   alizarin. The canvas is a paint by number of the whole run, the number in each cell is that
   day's crowd score and the paint is its color. The gallery wall hangs each year's run as a canvas
   sized by its days. Dark mode is the studio after hours. Motion is limited to hover color. */

.fax {
    --linen: #f6f1e7;
    --linen2: #ece4d3;
    --card: #fffdf8;
    --ink: #24211d;
    --ink2: #5d564c;
    --line: #3a342c;
    --accent: #b8362f;
    --accent2: #1e5f74;
    --gold: #b8892b;
    --wood: #8a5a33;
    --rule: color-mix(in srgb, var(--ink) 18%, transparent);
    --p-quiet: #cfe8d6;
    --p-moderate: #f0d27a;
    --p-busy: #f2a25c;
    --p-packed: #e0707a;
    --p-none: #fffdf8;
    --p-ink: #24211d;
    --radius: 12px;
    --display: var(--font-display, "Bricolage Grotesque", system-ui, sans-serif);
    --body: var(--font-text, "Hanken Grotesk", system-ui, sans-serif);
    background: var(--linen);
    color: var(--ink);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.55;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .fax {
        --linen: #17151a; --linen2: #110f13; --card: #211e24; --ink: #f1ece2; --ink2: #c3bbae; --line: #d9d0c1;
        --accent: #ff8a7f; --accent2: #7cc6db; --gold: #e2b65a; --wood: #6b4a2e;
        --p-quiet: #3f6f52; --p-moderate: #8a7a2a; --p-busy: #a5501c; --p-packed: #5e1a28; --p-none: #211e24; --p-ink: #f1ece2;
    }
}
:root[data-theme="dark"] .fax {
    --linen: #17151a; --linen2: #110f13; --card: #211e24; --ink: #f1ece2; --ink2: #c3bbae; --line: #d9d0c1;
    --accent: #ff8a7f; --accent2: #7cc6db; --gold: #e2b65a; --wood: #6b4a2e;
    --p-quiet: #3f6f52; --p-moderate: #8a7a2a; --p-busy: #a5501c; --p-packed: #5e1a28; --p-none: #211e24; --p-ink: #f1ece2;
}

.fax *, .fax *::before, .fax *::after { box-sizing: border-box; }
.fax-wrap { max-width: 1160px; margin-inline: auto; padding-inline: 16px; }
.fax h1, .fax h2, .fax h3 { font-family: var(--display); letter-spacing: -.02em; }
.fax h3 { line-height: 1.15; }
.fax :where(a) { color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.fax :where(a):focus-visible, .fax summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--gold); border-radius: 6px; }
.fax-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Hero */
.fax-hero { padding: 40px 0 18px; background: linear-gradient(180deg, var(--linen2), var(--linen)); border-bottom: 2px solid var(--rule); }
.fax-hero-in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 40px; align-items: center; }
.fax-kick { display: inline-block; margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent2); }
.fax h1 { font-size: clamp(38px, 5.4vw, 72px); line-height: .98; margin: 14px 0 18px; font-weight: 800; }
.fax-dek { margin: -6px 0 18px; font-family: var(--display); color: var(--ink2); font-size: clamp(19px, 2.2vw, 28px); letter-spacing: -.01em; line-height: 1.15; font-weight: 600; }
.fax-answer { margin: 0; font-size: 18.5px; max-width: 660px; background: var(--card); border: 2px solid var(--line); border-radius: 4px; padding: 18px 20px; box-shadow: 6px 6px 0 var(--p-moderate); }
.fax-by { margin: 16px 0 0; font-size: 14.5px; color: var(--ink2); }

/* The framed photo with a museum placard */
.fax-photo { margin: 0; }
.fax-frame { padding: 14px; background: var(--gold); border: 1px solid var(--line); box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--line) 25%, transparent), 0 14px 28px -14px rgba(0,0,0,.45); }
.fax-frame img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 40%; border: 6px solid #f3ead2; }
.fax-placard { margin: 14px auto 0; max-width: 260px; background: var(--card); border: 1px solid var(--rule); padding: 8px 12px; font-size: 12.5px; color: var(--ink2); display: grid; gap: 2px; }
.fax-placard b { color: var(--ink); font-size: 13.5px; }
.fax-placard a { color: inherit; }

.fax-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; padding-bottom: 8px; }
.fax-tabs a { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 14.5px; padding: 7px 13px; border: 2px solid var(--line); border-radius: 999px; background: var(--card); }
.fax-tabs a:hover { background: var(--ink); color: var(--linen); }

/* Sections */
.fax-sec { padding: 60px 0; }
.fax-alt { background: var(--linen2); }
.fax h2 { font-size: clamp(29px, 4vw, 44px); margin: 0 0 10px; line-height: 1.06; font-weight: 800; max-width: 920px; }
.fax-lede { max-width: 760px; margin: 0 0 24px; font-size: 18px; color: var(--ink2); }
.fax-src { font-size: 15px; color: var(--ink2); max-width: 900px; margin: 18px 0 0; }

/* Palette key, paint wells */
.fax-palette { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 0; margin: 0 0 18px; font-size: 14px; font-weight: 600; }
.fax-palette li { display: inline-flex; align-items: center; gap: 8px; }
.fax-palette i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); background: var(--p-none); box-shadow: inset 0 -4px 0 rgba(0,0,0,.08); }
.fax-palette .quiet i { background: var(--p-quiet); }
.fax-palette .moderate i { background: var(--p-moderate); }
.fax-palette .busy i { background: var(--p-busy); }
.fax-palette .packed i { background: var(--p-packed); }

/* The paint by number canvas on its easel */
.fax-easel { position: relative; background: var(--wood); padding: 14px; border-radius: 6px; box-shadow: 0 18px 30px -18px rgba(0,0,0,.5); max-width: 860px; margin-bottom: 48px; }
.fax-easel::before { content: ""; position: absolute; left: -14px; right: -14px; bottom: -16px; height: 18px; background: var(--wood); border-radius: 3px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.18); }
.fax-easel::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: -46px; height: 30px; background: linear-gradient(var(--wood), var(--wood)) left / 14px 100% no-repeat, linear-gradient(var(--wood), var(--wood)) right / 14px 100% no-repeat; }
.fax-flag.is-partial { color: var(--ink2); }
tr.is-partial .fax-wk b { border-style: dashed; }
@media (min-width: 1100px) {
    .fax-studio { display: grid; grid-template-columns: minmax(0, 860px) minmax(0, 1fr); gap: 36px; align-items: start; }
    .fax-studio .fax-marks { flex-direction: column; gap: 12px; margin-top: 8px; padding: 18px 20px; background: var(--card); border: 1px solid var(--rule); border-left: 6px solid var(--accent2); }
    .fax-studio .fax-marks::before { content: "Marked on the canvas"; font-family: var(--display); font-weight: 800; font-size: 17px; color: var(--ink); }
    .fax-studio .fax-marks li { align-items: baseline; flex-wrap: wrap; }
}
.fax-grid { width: 100%; border-collapse: collapse; table-layout: fixed; background: var(--card); }
.fax-grid th { font-family: var(--display); font-size: 13px; font-weight: 700; color: var(--ink2); padding: 8px 0; border-bottom: 2px solid var(--line); }
.fax-grid th abbr { text-decoration: none; }
.fax-grid th.fax-wk { width: 23%; text-align: left; padding-left: 12px; }
.fax-grid td { border: 1.5px solid var(--line); vertical-align: top; height: 78px; padding: 0; position: relative; }
.fax-off { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--rule) 6px 7px); border-color: var(--rule) !important; }
.fax-cell { background: var(--p-none); color: var(--p-ink); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.fax-cell.quiet { background: var(--p-quiet); }
.fax-cell.moderate { background: var(--p-moderate); }
.fax-cell.busy { background: var(--p-busy); }
.fax-cell.packed { background: var(--p-packed); }
.fax-date { position: absolute; top: 4px; left: 6px; font-size: 11.5px; font-weight: 700; opacity: .75; white-space: nowrap; }
.fax-cell b { display: grid; place-content: center; height: 100%; padding-top: 6px; font-family: var(--display); font-size: 26px; font-weight: 800; }
.fax-cell em { position: absolute; left: 4px; right: 4px; bottom: 4px; font-style: normal; font-size: 10px; font-weight: 700; line-height: 1.1; color: var(--p-ink); }
.fax-cell.is-marked::after { content: ""; position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent2); }
.fax-cell.is-today { outline: 3px solid var(--accent); outline-offset: -4px; }
.fax-grid tbody th.fax-wk { background: var(--card); padding: 8px 10px 8px 12px; border: 1.5px solid var(--line); border-left-width: 3px; vertical-align: middle; text-align: left; font-family: var(--body); font-weight: 400; color: var(--ink); }
.fax-wk small { display: block; font-size: 12.5px; color: var(--ink2); font-weight: 600; line-height: 1.2; }
.fax-wk b { display: inline-block; font-family: var(--display); font-size: 24px; line-height: 1; margin-top: 4px; padding: 2px 8px; border-radius: 4px; background: var(--p-none); border: 1.5px solid var(--line); }
.fax-wk.quiet b { background: var(--p-quiet); }
.fax-wk.moderate b { background: var(--p-moderate); }
.fax-wk.busy b { background: var(--p-busy); }
.fax-wk.packed b { background: var(--p-packed); }
.fax-flag { display: block; margin-top: 6px; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent2); }
.fax-flag.is-busy { color: var(--accent); }

.fax-marks { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14.5px; color: var(--ink2); max-width: 860px; }
.fax-marks li { display: inline-flex; align-items: center; gap: 7px; }
.fax-marks li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent2); flex: none; }
.fax-marks b { color: var(--ink); white-space: nowrap; }

/* Gallery wall of runs, canvases sized by days */
.fax-wall { padding: 18px 20px 20px; background: var(--card); border: 1px solid var(--rule); max-width: 960px; --lab: 56px; }
.fax-axis { position: relative; height: 22px; margin-left: var(--lab); border-bottom: 2px solid var(--line); }
.fax-axis span { position: absolute; left: var(--x); bottom: 4px; transform: translateX(-50%); font-size: 12.5px; font-weight: 700; color: var(--ink2); white-space: nowrap; }
.fax-axis em { position: absolute; left: var(--mar); right: 0; bottom: 4px; padding-left: 6px; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); text-align: left; }
.fax-axis span::after { content: ""; position: absolute; left: 50%; top: 100%; height: 6px; width: 2px; background: var(--line); }
.fax-wall ol { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 12px; background: linear-gradient(90deg, transparent calc(var(--lab) + (100% - var(--lab)) * var(--marf, .881)), color-mix(in srgb, var(--accent) 10%, transparent) 0); }
.fax-wall li { display: grid; grid-template-columns: var(--lab) 1fr; align-items: center; }
.fax-wall strong { font-family: var(--display); font-size: 18px; }
.fax-track { position: relative; height: 50px; }
.fax-canvas { position: absolute; left: var(--x); width: var(--w); top: 0; bottom: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 12px; line-height: 38px; background: var(--linen2); border: 6px solid var(--gold); box-shadow: 0 8px 14px -8px rgba(0,0,0,.45); overflow: hidden; white-space: nowrap; }
.fax-canvas b { font-family: var(--display); font-size: 19px; }
.fax-canvas span { font-size: 13.5px; color: var(--ink2); font-weight: 600; }
.fax-wall .is-now .fax-canvas { background: var(--p-moderate); }
.fax-wall .is-now .fax-canvas b, .fax-wall .is-now .fax-canvas span { color: var(--p-ink); }

/* Confirmed, hung and draped */
.fax-gallery { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; align-items: start; }
.fax-gallery h3 { margin: 0 0 12px; font-size: 21px; }
.fax-gallery ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fax-gallery li { display: grid; gap: 1px; padding: 10px 14px; }
.fax-hung ul { gap: 0; background: var(--card); border: 1px solid var(--rule); border-left: 6px solid var(--gold); }
.fax-hung li + li { border-top: 1px solid var(--rule); }
.fax-hung li b::before { content: "\2713"; color: var(--accent2); margin-right: 8px; }
.fax-gallery li b { font-size: 16px; }
.fax-gallery li span { font-size: 14.5px; color: var(--ink2); }
.fax-draped li { background: var(--linen2); border: 2px dashed var(--ink2); border-left: 6px solid var(--ink2); }
.fax-draped li em { justify-self: start; margin-top: 4px; font-style: normal; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }

/* Playbill */
.fax-playbill { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 24px; align-items: start; }
.fax-pb-cover { background: #17140f; color: #fff6d8; padding: 26px 22px; border: 3px solid #f2c94c; text-align: center; }
.fax-pb-cover small { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #f2c94c; font-weight: 700; }
.fax-pb-cover h3 { margin: 10px 0 8px; font-size: 27px; color: #fff6d8; }
.fax-pb-cover p { margin: 0; font-size: 15px; }
.fax-pb-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.fax-pb-facts li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: baseline; border-bottom: 1px solid var(--rule); padding-bottom: 10px; }
.fax-pb-facts b { font-family: var(--display); font-size: 22px; color: var(--accent); line-height: 1.05; }

/* Paint tubes, the menu timeline */
.fax-tubes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 960px; }
.fax-tubes li { position: relative; display: grid; gap: 2px; padding: 14px 16px 14px 34px; background: var(--card); border: 2px solid var(--line); border-radius: 4px 22px 22px 4px; }
.fax-tubes li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 18px; background: var(--gold); border-right: 2px solid var(--line); }
.fax-tubes li.is-now::before { background: var(--linen2); }
.fax-tubes li:last-child::before { background: var(--accent2); }
.fax-tubes li.is-now { border-style: dashed; }
.fax-tubes small { font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent2); }
.fax-tubes b { font-size: 16.5px; }
.fax-tubes span { font-size: 14.5px; color: var(--ink2); }

/* FAQ */
.fax-faq { display: grid; gap: 10px; max-width: 900px; counter-reset: fq; }
.fax-faq details { counter-increment: fq; position: relative; background: var(--card); border: 1px solid var(--rule); border-left: 6px solid var(--gold); padding: 4px 18px 4px 56px; }
.fax-faq details::before { content: counter(fq, decimal-leading-zero); position: absolute; left: 14px; top: 13px; font-family: var(--display); font-weight: 800; font-size: 17px; color: var(--gold); }
.fax-faq summary { cursor: pointer; list-style: none; padding: 10px 0; }
.fax-faq summary::-webkit-details-marker { display: none; }
.fax-faq summary h3 { display: inline; margin: 0; font-size: 18.5px; }
.fax-faq summary::after { content: "+"; float: right; font-weight: 800; font-size: 22px; line-height: 1; color: var(--accent); }
.fax-faq details[open] summary::after { content: "\2212"; }
.fax-faq p { margin: 0 0 14px; }

/* Plan links, a two column index */
.fax-plan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; max-width: 960px; border-top: 2px solid var(--line); }
.fax-plan a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 13px 2px; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
.fax-plan a b { line-height: 1.25; }
.fax-plan a span { font-size: 14px; color: var(--ink2); text-align: right; }
.fax-plan a:hover b { color: var(--accent); }

@media (max-width: 960px) {
    .fax-hero-in { grid-template-columns: 1fr; gap: 28px; }
    .fax-photo { max-width: 340px; }
    .fax-frame img { aspect-ratio: 4 / 3; }
    .fax-gallery, .fax-playbill { grid-template-columns: 1fr; }
    .fax-tubes { grid-template-columns: 1fr; max-width: 520px; }
}
@media (max-width: 720px) {
    .fax { font-size: 16.5px; }
    .fax-sec { padding: 44px 0; }
    .fax-easel { padding: 6px; margin-inline: -6px; }
    .fax-grid th { font-size: 12px; }
    .fax-grid th.fax-wk { width: 21%; padding-left: 6px; }
    .fax-grid td { height: 52px; }
    .fax-date { top: 2px; left: 3px; font-size: 11px; opacity: 1; color: var(--p-ink); }
    .fax-tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
    .fax-easel { margin-bottom: 40px; }
    .fax-easel::before { left: -6px; right: -6px; }
    .fax-tabs a { flex: none; }
    .fax-plan { grid-template-columns: 1fr; }
    .fax-plan a { flex-direction: column; gap: 2px; }
    .fax-plan a span { text-align: left; }
    .fax-cell b { font-size: 18px; padding-top: 8px; }
    .fax-cell em { display: none; }
    .fax-cell.is-marked::after { top: auto; bottom: 3px; right: 3px; width: 7px; height: 7px; }
    .fax-grid tbody th.fax-wk { padding: 4px 4px 4px 6px; }
    .fax-wk small { font-size: 11px; }
    .fax-wk b { font-size: 16px; padding: 1px 5px; }
    .fax-flag { font-size: 10.5px; letter-spacing: .02em; }
    .fax-wall { padding: 14px 10px 14px; --lab: 44px; }
    .fax-wall strong { font-size: 15px; }
    .fax-axis span { font-size: 10.5px; }
    .fax-track { height: 40px; }
    .fax-canvas { border-width: 4px; padding: 0 6px; line-height: 32px; }
    .fax-canvas b { font-size: 15px; }
    .fax-canvas span { font-size: 11px; }
    .fax-canvas .fax-from, .fax-to { display: none; }
    .fax-photo { max-width: none; }
    .fax-frame { padding: 8px; }
    .fax-frame img { aspect-ratio: 5 / 2; border-width: 3px; object-position: 50% 45%; }
    .fax-placard { margin: 8px auto 0; }
    .fax-pb-facts li { grid-template-columns: 84px 1fr; }
    .fax-pb-facts b { font-size: 18px; }
}