@charset "utf-8";
/* ===========================================================================
   DETROIT INSTITUTE OF ARTS — an unofficial concept redesign
   Iron Digital MI · built to DESIGN_SYSTEM.md v1.0 · A2 B2 C4 D2 E3

   THE CONCEPT: the collection is the site. The real dia.org leads with one
   blue, a notice bar, and the art hidden behind a database link; this concept
   hangs the paintings on the homepage and paints the rooms the way museums
   actually do — a different wall color for every wing. The client asked for
   an array of colors, and a museum is the one client whose array is already
   institutional practice: gallery walls in oxblood, umber, forest and plum.

     paper (circulation)  #F3F3F1 — gallery white, deliberately NEUTRAL: the
                          warm-cream family is fingerprint element one and
                          stays out of this building
     green   #1E4636  Dutch & Flemish       white text 10.13
     oxblood #6E1A1A  Baroque & Romantic    white text 11.01
     umber   #4A3A21  American              white text 10.48
     THE MUSEUM'S OWN BLUE, sampled from dia.org and given the institutional
     lane outright — chrome, links, buttons, focus, one band:
       #0065A3 brand   5.58 on paper · white on it 5.93
       #00558C deep    7.06 on paper (AAA) — body-copy links
       #0076BF logo    4.35 — UNDER AA, so it is artwork only, never text
       #8FC4F5 light   5.7–7.2 on all four walls
     The wing that WAS prussian moved to umber: their blue sat 1.82:1 from it,
     same hue family, and the institution's voice would have muddied a gallery.
     plum    #46224A  Modern                white text 12.66
     ochre   #C89B3C  the Walk              ink text 6.69
     ink #191C1F on paper 15.4 · link #14508F on paper 7.34

   Five grounds all doing structural work is also the answer to the ledger's
   five-for-five watch item: the "different kind of thing" job is done by
   POLYCHROME this time, not by one dark inversion band.

   THE EXPRESSIVE CHANNEL — ninth in the series — IS TYPE-AS-IMAGE (§2.5).
   Museums own the poster tradition, so the display type behaves like the
   poster: enormous, hand-broken, allowed to overlap the image plane and crop
   at the section edge. It is SET, not merely enlarged.

   THE TEXTURAL SIGNATURE IS THE GALLERY LABEL. Every caption on the site is a
   wall label — title in italic, artist with dates, medium, accession number —
   and every artwork is matted. First viewport: the hero carries one.

   THE INTERACTION SIGNATURE: THE ROOM DIMS. Point at a work and the rest of
   the room steps back — opacity only, color untouched (the standing rule:
   nothing drains color). Touch and keyboard get it via :focus-within.

   MOTION: full budget (B2·C4) — the Walk is a horizontal band you drive
   yourself, the film is authored media, entrances are two decided reveals,
   and nothing hijacks scroll.
   =========================================================================== */

:root {
  --paper: #F3F3F1;
  --panel: #FBFBFA;
  --ink: #191C1F;
  --ink-2: #4A4F55;
  --line: #C9CBC9;
  --white: #FAFAF9;
  --link: #00558C;   /* the museum's blue, darkened to clear AAA on paper */

  --green: #1E4636;
  --oxblood: #6E1A1A;
  --umber: #4A3A21;
  --plum: #46224A;
  --ochre: #C89B3C;

  /* THE MUSEUM'S OWN BLUE — sampled from dia.org, not approximated.
     The walls are the art's rooms; this is the institution speaking. */
  --dia: #0065A3;        /* brand blue: UI, grounds, buttons        */
  --dia-deep: #00558C;   /* AAA on paper: body-copy links           */
  --dia-logo: #0076BF;   /* the logo's own blue — 4.35, ARTWORK ONLY */
  --dia-lt: #8FC4F5;     /* links and marks on the dark walls        */

  --f-d: 'Young Serif', Georgia, serif;
  --f-t: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ratio 1.45, five steps, and a poster size above the scale for the channel */
  --t-1: 0.8125rem;
  --t0: 1.0625rem;
  --t1: 1.5rem;
  --t2: clamp(1.9rem, 1.3rem + 2.4vw, 2.6rem);
  --t3: clamp(2.6rem, 1.7rem + 4vw, 4rem);
  --poster: clamp(3.4rem, 1.4rem + 9vw, 7.75rem);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 144px;

  --ease: cubic-bezier(.23, .72, .26, 1);
  --fast: 150ms; --mid: 280ms;
  --edge: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink);
       font-family: var(--f-t); font-size: var(--t0); line-height: 1.6;
       font-variant-numeric: lining-nums; }
img { max-width: 100%; height: auto; }
video, svg { max-width: 100%; }
::selection { background: var(--dia); color: var(--white); }
:root { accent-color: var(--dia); caret-color: var(--dia); }

a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 3px solid var(--dia); outline-offset: 3px; }
.wall :where(a, button, [tabindex]):focus-visible { outline-color: var(--white); }
.wall a:not(.btn):not(.wing) { color: var(--dia-lt); }

/* ============================================================== TYPE ROLES */
.d { font-family: var(--f-d); font-weight: 400; line-height: 1.02;
     letter-spacing: -0.012em; margin: 0; text-wrap: balance; }
.d--poster { font-size: var(--poster); line-height: .96; letter-spacing: -0.018em; }
.d--1 { font-size: var(--t3); }
.d--2 { font-size: var(--t2); }
.d--3 { font-size: var(--t1); line-height: 1.15; }
.lead { font-size: var(--t1); line-height: 1.45; font-weight: 400; text-wrap: pretty; }
.note { font-size: var(--t-1); line-height: 1.55; color: var(--ink-2); }
.wall .note { color: inherit; opacity: .82; }
.prose { max-width: 62ch; }
.prose p { margin: 0 0 1em; text-wrap: pretty; }
.prose p:last-child { margin-bottom: 0; }
.k { font-size: .75rem; font-weight: 600; text-transform: uppercase;
     letter-spacing: .1em; color: var(--ink-2); }
.wall .k { color: inherit; opacity: .85; }

/* ================================================================ LAYOUT */
.shell { width: min(100% - var(--s5) * 2, var(--edge)); margin-inline: auto; }
.band { padding-block: var(--s9); }
.band--tight { padding-block: var(--s7); }
.skip { position: absolute; left: -9999px; background: var(--ink); color: var(--white);
        padding: var(--s3) var(--s5); z-index: 90; }
.skip:focus { left: var(--s4); top: var(--s4); }

/* the walls — color doing the structural work §3.3 promises */
.wall { color: var(--white); }
.wall a { color: inherit; }
.wall--green { background: var(--green); }
.wall--oxblood { background: var(--oxblood); }
.wall--umber { background: var(--umber); }
.wall--plum { background: var(--plum); }
.strip--dia { background: var(--dia); color: var(--white); }
.strip--dia a:not(.btn) { color: var(--white); }
.strip--dia .note, .strip--dia .k { color: var(--white); opacity: .9; }
.strip--dia .btn { background: var(--white); border-color: var(--white); color: var(--dia); }
.strip--dia .btn:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.strip--ochre { background: var(--ochre); color: var(--ink); }
.strip--ochre a { color: var(--ink); text-decoration-thickness: 2px; }
/* the ochre strip holds INK — the gray secondary would sit at 3.2:1 there */
.strip--ochre .note { color: var(--ink); }

/* ================================================================== MAST */
/* THE DISCLOSURE BAR sits above everything and is deliberately NOT in the
   museum's blue — it is a system message, not the museum's voice. It exists
   because the real mark is on this page. */
.disclose { background: var(--ink); color: var(--white); }
.disclose__in { display: flex; flex-wrap: wrap; gap: 4px var(--s4);
                align-items: center; padding-block: var(--s2);
                font-size: .78rem; line-height: 1.4; }
.disclose b { letter-spacing: .04em; text-transform: uppercase; font-size: .72rem; }
.disclose a { color: var(--dia-lt); }

.mast { background: var(--panel); border-bottom: 4px solid var(--dia); }
.logo { display: block; width: 168px; height: auto; }
@media (max-width: 620px) { .logo { width: 132px; } }
.mast__in { display: flex; align-items: center; gap: var(--s3) var(--s6);
            padding-block: var(--s3); flex-wrap: wrap; }
.wordmark { display: inline-flex; flex-direction: column; justify-content: center;
            gap: 4px; min-height: 44px; text-decoration: none; color: var(--ink); }
.stamp { display: inline-block; font-size: .62rem; font-weight: 600;
         letter-spacing: .1em; text-transform: uppercase; color: var(--oxblood); }
.nav { display: flex; flex-wrap: wrap; gap: 0 var(--s5); margin-left: auto; }
.nav a { display: inline-flex; align-items: center; min-height: 44px;
         color: var(--ink); text-decoration: none; font-weight: 500; font-size: var(--t-1); }
.nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
.nav a[aria-current="page"] { text-decoration: underline;
  text-decoration-thickness: 3px; text-underline-offset: 7px;
  text-decoration-color: var(--dia); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
       min-height: 50px; padding: var(--s3) var(--s6); border: 2px solid var(--ink);
       background: var(--ink); color: var(--white); font: inherit; font-weight: 600;
       text-decoration: none; cursor: pointer; transition: background var(--fast) var(--ease); }
.btn:hover { background: var(--dia); border-color: var(--dia); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--white); }
.wall .btn { background: var(--white); border-color: var(--white); color: var(--ink); }
.wall .btn--ghost { background: transparent; color: var(--white); border-color: var(--white); }
.wall .btn--ghost:hover { background: var(--white); color: var(--ink); }

/* ============================================================== THE LABEL
   The textural signature. A museum wall label: title italic, artist and
   dates, medium, accession right-aligned in the corner like a catalog. */
.label { background: var(--panel); color: var(--ink); border: 1px solid var(--line);
         border-left: 4px solid var(--ink);
         padding: var(--s3) var(--s4); max-width: 40ch; font-size: var(--t-1);
         line-height: 1.5; }
.label__title { font-family: var(--f-d); font-style: italic; font-size: 1rem;
                line-height: 1.25; display: block; }
.label__artist { font-weight: 600; display: block; margin-top: 2px; }
.label__meta { display: flex; justify-content: space-between; gap: var(--s3);
               color: var(--ink-2); margin-top: 2px; flex-wrap: wrap; }
.label--green { border-left-color: var(--green); }
.label--oxblood { border-left-color: var(--oxblood); }
.label--umber { border-left-color: var(--umber); }
.label--plum { border-left-color: var(--plum); }

/* the mat: every reproduction sits on white with a hairline — the treatment
   that replaces grading, which the art does not get */
.mat { background: #fff; padding: clamp(8px, 1.6vw, 18px); border: 1px solid var(--line);
       box-shadow: 0 1px 0 rgba(25,28,31,.14); }
.mat img { display: block; }

/* ================================================================== HERO */
.hero { position: relative; padding-top: var(--s7); }
.hero__band { display: block; width: 100%; border-block: 2px solid var(--ink); }
.hero__poster { margin: 0 0 -0.12em; position: relative; z-index: 2; }
.hero__poster .d--poster { max-width: 12ch; }
.hero__lede { display: flex; gap: var(--s6); justify-content: space-between;
              align-items: flex-end; flex-wrap: wrap; margin-block: var(--s5); }
.hero__label { position: absolute; right: var(--s5); bottom: var(--s5); z-index: 3; }
@media (max-width: 720px) { .hero__label { position: static; margin-top: var(--s3); } }

/* ============================================================== THE WALK
   A horizontal century of paintings. Driven by the visitor — native scroll,
   snap, buttons — never by hijacking the wheel. */
.walk { padding-block: var(--s7); }
.walk__rail { display: flex; gap: var(--s6); overflow-x: auto; padding: var(--s4) var(--s5) var(--s5);
              scroll-snap-type: x proximity; scrollbar-width: thin; }
.walk__item { flex: 0 0 auto; scroll-snap-align: center; width: min(64vw, 330px); }
.walk__item img { display: block; }
.walk__year { font-family: var(--f-d); font-size: var(--t1); display: block;
              margin-bottom: var(--s2); }
.walk__ctl { display: flex; gap: var(--s2); align-items: center; }
.walk__btn { min-width: 48px; min-height: 48px; border: 2px solid var(--ink);
             background: transparent; color: var(--ink); font: inherit; font-weight: 700;
             cursor: pointer; }
.walk__btn:hover { background: var(--ink); color: var(--ochre); }

/* ============================================================ THE WINGS */
.wings { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
.wing { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s5);
        color: var(--white); text-decoration: none; min-height: 100%; }
.wing:hover .wing__go, .wing:focus-visible .wing__go { text-decoration: underline; }
.wing img { display: block; }
.wing__go { margin-top: auto; font-weight: 600; }

/* =============================================================== THE FILM */
.film { position: relative; border: 2px solid rgba(250,250,249,.35); margin: 0; }
.film video { display: block; width: 100%; height: auto; background: #000; }
.film__btn { position: absolute; left: var(--s4); bottom: var(--s4); min-height: 44px;
             min-width: 44px; padding: var(--s2) var(--s4); background: var(--white);
             color: var(--ink); border: 0; font: inherit; font-weight: 600; cursor: pointer; }

/* ============================================================ COLLECTION
   The salon wall: a room you pan. Implemented as a NATIVE two-axis scroller
   with a large canvas inside — wheel, touch, keyboard and scrollbars all work
   before a single line of script; the script only adds grab-drag. The grid
   below is the same fifteen works, so the wall is never the only door in
   (§1.3 canvas: "needs a way home"). */
.salon { position: relative; height: min(72vh, 640px); overflow: auto;
         background: var(--panel);
         border: 2px solid var(--ink); cursor: grab; }
.salon.is-dragging { cursor: grabbing; user-select: none; }
.salon__canvas { position: relative; width: 2600px; height: 1310px;
  /* picture-rail lines: the one place a ruled texture is earned — it is
     literally how salon walls hang */
  background-image: linear-gradient(180deg, transparent 0 118px, var(--line) 118px 119px, transparent 119px 100%);
  background-size: 100% 437px; }
.salon__hint { position: absolute; left: var(--s4); top: var(--s4); z-index: 4; }
.piece { position: absolute; display: block; text-decoration: none; color: var(--ink); }
.piece .mat { transition: box-shadow var(--fast) var(--ease); }
.piece:hover .mat, .piece:focus-visible .mat { box-shadow: 0 4px 18px rgba(25,28,31,.3); }
.piece figcaption { margin-top: var(--s2); font-size: .78rem; line-height: 1.35;
                    max-width: 30ch; }

/* the room dims — pointer and keyboard both */
.dims:hover > .piece:not(:hover),
.dims:focus-within > .piece:not(:focus-visible) { opacity: .55; }
.dims > .piece { transition: opacity var(--mid) var(--ease); }
.gridwall.dims:hover > .gcell:not(:hover),
.gridwall.dims:focus-within > .gcell:not(:focus-within) { opacity: .55; }
.gridwall > .gcell { transition: opacity var(--mid) var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .dims > .piece, .gridwall > .gcell { transition: none; }
}

.gridwall { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
            gap: var(--s6) var(--s5); align-items: start; }
.gcell a { text-decoration: none; color: inherit; display: block; }
.gcell .label { max-width: none; margin-top: var(--s2); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip { min-height: 44px; padding: var(--s2) var(--s4); border: 2px solid var(--ink);
        background: transparent; font: inherit; font-weight: 600; cursor: pointer; color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.chip .dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; }
.chip[aria-pressed="true"] { background: var(--dia); border-color: var(--dia); color: var(--white); }

/* ============================================================== ART PAGE */
.artpage { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
           gap: var(--s7); align-items: start; padding-block: var(--s7); }
.artpage__side { position: sticky; top: var(--s5); display: grid; gap: var(--s5); }
.zoombox { overflow: hidden; cursor: zoom-in; }
.zoombox.is-zoomed { cursor: zoom-out; }
.zoombox img { transition: transform var(--mid) var(--ease); transform-origin: 50% 50%; }
.zoombox.is-zoomed img { transform: scale(2.35); }
@media (prefers-reduced-motion: reduce) { .zoombox img { transition: none; } }
.pn { display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.pn a { display: inline-flex; align-items: center; min-height: 44px; }

/* ================================================================= TOUR */
.tourlist { display: grid; gap: var(--s4); }
.touritem { display: grid; grid-template-columns: 84px 1fr auto; gap: var(--s4);
            align-items: center; background: var(--panel); border: 1px solid var(--line);
            padding: var(--s3); }
.touritem img { display: block; }
.addbtn { min-height: 48px; padding: var(--s2) var(--s5); border: 2px solid var(--ink);
          background: transparent; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.addbtn[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.wall .addbtn { border-color: var(--white); color: var(--white); }
.wall .addbtn[aria-pressed="true"] { background: var(--white); color: var(--ink); }

/* ================================================================ TABLES */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { text-align: left; padding: var(--s3) var(--s4) var(--s3) 0;
                   border-bottom: 1px solid var(--line); vertical-align: baseline; }
.tbl thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .09em;
                color: var(--ink-2); border-bottom: 2px solid var(--ink); }
.scroller { overflow-x: auto; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); align-items: start; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }

.foot { border-top: 2px solid var(--ink); padding-block: var(--s8); }
.foot__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
              gap: var(--s6); }
.foot h2 { font-size: var(--t-1); font-weight: 600; color: var(--ink-2); margin: 0 0 var(--s3); }
.foot ul { list-style: none; margin: 0; padding: 0; }
/* block, not flex: a flex list item turns the text around a <br> into separate
   anonymous flex items and they stop sharing a baseline */
.foot li { min-height: 38px; padding-block: 5px; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; }
.disclaim { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); }

/* =============================================================== REVEALS
   Two decided entrances, opted into by script; blocked script = complete page */
.js .reveal { opacity: 0; translate: 0 14px;
  transition: opacity 460ms var(--ease), translate 460ms var(--ease); }
.js .reveal.is-in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; translate: 0 0; transition: none; }
}

/* ============================================================= RESPONSIVE */
@media (max-width: 980px) {
  .wings { grid-template-columns: 1fr 1fr; }
  .artpage { grid-template-columns: 1fr; }
  .artpage__side { position: static; }
  .two { grid-template-columns: 1fr; }
  .trio { grid-template-columns: 1fr; }
}
@media (min-width: 560px) and (max-width: 980px) {
  .trio { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .wings { grid-template-columns: 1fr; }
  .shell { width: min(100% - var(--s4) * 2, var(--edge)); }
  .band { padding-block: var(--s8); }
}

/* ========================================================= HIGH CONTRAST */
@media (forced-colors: active) {
  .chip[aria-pressed="true"], .addbtn[aria-pressed="true"] {
    outline: 3px solid CanvasText; outline-offset: -6px; }
  .dims:hover > .piece:not(:hover), .dims:focus-within > .piece:not(:focus-visible),
  .gridwall.dims:hover > .gcell:not(:hover) { opacity: 1; }  /* dimming is color; HCM keeps everything lit */
  .salon__canvas { background-image: none; }
  .label { border-left-width: 4px; }
}

@media print {
  .mast, .foot, .nav, .btn, .chips, .film, .walk__ctl, .skip { display: none !important; }
  body { background: #fff; }
  .wall, .strip--ochre { background: #fff !important; color: #000 !important; }
}

/* ---------- Built by Iron Digital MI ----------
   currentColor throughout so the line inherits whatever the footer already is.
   The mark itself is never recolored. */
.id-by { margin: 1.6em 0 0; }
.id-by a { display: inline-flex; align-items: center; gap: .6em;
  color: inherit; text-decoration: none; font-size: .8125rem; line-height: 1.3; }
.id-by a:hover span, .id-by a:focus-visible span { text-decoration: underline; }
.id-by img { width: 26px; height: 26px; display: block; flex: 0 0 auto; }
.id-by b { font-weight: 700; }

/* September UI refinement */
.hero__poster{font-size:clamp(44px,6.2vw,88px);line-height:1.02;margin-bottom:20px}.hero__lede{padding-block:0 24px;align-items:center}.hero__band{max-height:430px;object-fit:cover;object-position:center}.mast .logo{width:140px}@media(max-width:620px){.hero__lede{display:grid;gap:16px}.hero__lede .lead{font-size:16px}.hero__band{height:280px;object-fit:cover}}

.hero__poster{font-size:clamp(44px,5.2vw,72px)}.hero__lede .lead{font-size:18px;line-height:1.6}.hero__lede{margin-top:0}
@media(max-width:620px){.mast__in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;padding-block:12px}.mast .logo{width:110px}.stamp{max-width:170px;line-height:1.4}.mast .nav{grid-column:1/-1;grid-row:2;flex-wrap:nowrap;width:100%;overflow-x:auto;gap:16px;margin:0}.mast .nav a{white-space:nowrap;font-size:14px}.mast__in>.btn{font-size:14px;padding-inline:12px!important}.hero__lede .lead{font-size:16px}.hero__lede{gap:12px}.hero__poster{line-height:1.05}}