:root { --color-rust: #B5532D; --color-olive: #7B7A56; --color-ink: #1B1B1B; --color-accent: #D97A4A; --color-paper: #F4F1EA; --color-white: #F7F8FA; --color-gold: #D8A25A; --font-display: "Oxanium", sans-serif; --font-sans: "IBM Plex Sans", sans-serif; --font-mono: "Oxygen Mono", monospace; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-3xl: 3rem; } @layer base { * { box-sizing: border-box; } body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-sans); font-size: 18px; line-height: 1.65; } h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; overflow-wrap: anywhere; } h1 { font-size: clamp(2.5rem,6vw,5.5rem); margin: 0 0 1.5rem; letter-spacing: -.045em; } h2 { font-size: clamp(2rem,4vw,3.5rem); letter-spacing: -.035em; } h3 { font-size: 1.6rem; } p { margin: 0 0 1.25rem; } a { color: inherit; text-underline-offset: .22em; } a:hover { color: var(--color-rust); } button,input,select,textarea { font: inherit; } button,input[type=submit],summary { cursor: pointer; } input,textarea,select { max-width: 100%; border: 1px solid var(--color-ink); padding: .7rem; background: var(--color-white); color: var(--color-ink); } :focus-visible { outline: 3px solid var(--color-rust); outline-offset: 4px; } img,video { max-width: 100%; height: auto; } iframe { max-width: 100%; } figure { margin: 0 0 2rem; } table { border-collapse: collapse; } th,td { padding: .6rem; border: 1px solid var(--color-olive); } blockquote { margin-inline: 0; border-left: 4px solid var(--color-rust); padding: 1rem 1.5rem; font-size: 1.4rem; } code,pre { font-family: var(--font-mono); } pre { overflow-x: auto; padding: 1rem; background: var(--color-white); } } @layer components { .container { width: min(1280px, calc(100% - 64px)); margin-inline: auto; } .section { padding-block: clamp(3rem,7vw,6rem); } .meta { font-family: var(--font-mono); font-size: .75rem; line-height: 1.6; letter-spacing: .055em; text-transform: uppercase; } .skip-link,.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } .skip-link:focus { position: fixed; z-index: 999999; top: 1rem; left: 1rem; clip: auto; width: auto; height: auto; padding: 1rem; background: var(--color-paper); } .site-header { border-block: 6px solid var(--color-rust); border-bottom: 1px solid var(--color-ink); } .header-row { display: flex; align-items: center; gap: 2rem; padding-block: 1.6rem; flex-wrap: wrap; } .brand { display: grid; margin-right: auto; text-decoration: none; } .brand > span:last-child { font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; line-height: 1.2; letter-spacing: -.05em; } .brand-dot { color: var(--color-rust); } .site-navigation { position: relative; } .site-navigation summary { display: flex; gap: 2rem; list-style: none; border: 1px solid var(--color-ink); padding: .5rem 1rem; font-family: var(--font-mono); font-size: .85rem; } .site-navigation summary::-webkit-details-marker { display: none; } .site-navigation nav { position: absolute; z-index: 30; right: 0; top: calc(100% + .5rem); min-width: 250px; padding: 1.25rem; background: var(--color-paper); border: 1px solid var(--color-ink); } .menu { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; } .menu a { text-decoration: none; } .menu .sub-menu { margin-top: .5rem; padding-left: 1rem; list-style: none; } .archive-link { color: var(--color-rust); font-weight: 700; } .hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 4rem; align-items: center; padding-block: clamp(4rem,8vw,8rem); } .hero .intro { max-width: 38rem; font-size: 1.25rem; } .hero-mark { aspect-ratio: 1; border: 1px solid var(--color-rust); display: flex; flex-direction: column; justify-content: center; padding: 2rem; background: var(--color-rust); color: var(--color-paper); } .hero-mark strong { font-family: var(--font-display); font-weight: 700; line-height: .9; font-size: clamp(7rem,18vw,15rem); letter-spacing: -.09em; } .hero-mark span { border-top: 1px solid currentColor; margin-top: 2rem; padding-top: 1rem; } .actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2rem; } .button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .8rem 1.2rem; border: 1px solid var(--color-ink); text-decoration: none; font-size: .95rem; font-weight: 600; } .button-primary { background: var(--color-ink); color: var(--color-paper); } .button:hover { background: var(--color-rust); color: var(--color-paper); border-color: var(--color-rust); } .section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; border-top: 1px solid currentColor; padding-top: 1.5rem; margin-bottom: 2rem; } .section-heading h2 { margin: 0; } .card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2rem; } .content-card { min-width: 0; border-bottom: 1px solid var(--color-olive); padding-bottom: 1.5rem; } .content-card .card-image { display: block; margin-bottom: 1.25rem; } .content-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .content-card h2,.content-card h3 { font-size: 1.65rem; margin: .5rem 0 1rem; } .content-card h2 a,.content-card h3 a { text-decoration: none; } .content-card .meta { margin-bottom: .5rem; } .archive-band { background: var(--color-ink); color: var(--color-paper); } .archive-band a:hover { color: var(--color-gold); } .archive-band .button { border-color: var(--color-paper); color: var(--color-paper); } .archive-band .button:hover { background: var(--color-paper); color: var(--color-ink); } .archive-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-bottom: 3rem; } .archive-intro h2 { margin-top: .6rem; } .taxonomy-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 2rem; } .taxonomy-group { border-top: 3px solid var(--color-olive); padding-top: 1rem; min-width: 0; } .taxonomy-group h3 { font-size: 1.4rem; margin-top: 0; } .term-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; font-size: 1rem; } .term-list small { font-family: var(--font-mono); margin-left: .5rem; } .empty-state { border-left: 3px solid var(--color-olive); padding: .6rem 1.2rem; } .space-band { background: var(--color-olive); color: var(--color-ink); } .space-band p { max-width: 42rem; } .page-heading { max-width: 1000px; padding-block: 4rem 2rem; } .reading { max-width: 800px; margin-inline: auto; } .entry-content { overflow-wrap: anywhere; } .entry-content > * { margin-bottom: 1.5rem; } .entry-content .alignwide { width: min(1120px,calc(100vw - 64px)); max-width: none; margin-left: 50%; transform: translateX(-50%); } .entry-content .alignfull { width: calc(100vw - 64px); max-width: none; margin-left: 50%; transform: translateX(-50%); } .pagination { margin-block: 3rem; } .nav-links { display: flex; gap: .8rem; flex-wrap: wrap; } .page-numbers { display: inline-block; padding: .5rem .9rem; border: 1px solid currentColor; } .page-numbers.current { background: var(--color-ink); color: var(--color-paper); } .search-form { display: flex; align-items: end; gap: .75rem; flex-wrap: wrap; margin-block: 1.5rem; } .search-form label { display: grid; gap: .4rem; flex: 1; min-width: min(100%,200px); } .search-form input { width: 100%; } .site-footer { background: var(--color-ink); color: var(--color-paper); padding-block: 4rem 1.5rem; } .site-footer a:hover { color: var(--color-gold); } .footer-top { display: flex; justify-content: space-between; gap: 3rem; padding-bottom: 3rem; } .footer-top h2 { margin: .5rem 0; } .footer-top .menu { grid-template-columns: 1fr 1fr; gap: 1rem 3rem; } .footer-bottom { border-top: 1px solid var(--color-olive); padding-top: 1.5rem; display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; } @media (min-width: 1180px) { .header-row { flex-wrap: nowrap; } } @media (max-width: 800px) { .container { width: calc(100% - 36px); } .hero,.archive-intro { grid-template-columns: 1fr; gap: 2rem; } .hero-mark { max-width: 420px; } .hero-mark strong { font-size: 10rem; } .card-grid { grid-template-columns: 1fr; } .taxonomy-grid { grid-template-columns: 1fr 1fr; } .footer-top,.footer-bottom,.section-heading { flex-direction: column; gap: 1rem; } .header-row { gap: 1rem; } .brand { width: 100%; } .site-navigation nav { left: 0; right: auto; } .archive-link { margin-left: auto; } .entry-content .alignwide,.entry-content .alignfull { width: calc(100vw - 36px); } } @media (max-width: 420px) { .taxonomy-grid { grid-template-columns: 1fr; } .hero-mark strong { font-size: 8rem; } } } body.okc-site { font-family: var(--font-sans); color: var(--color-ink); background: var(--color-paper); font-size: 18px; line-height: 1.65; } .okc-site h1,.okc-site h2,.okc-site h3,.okc-site h4,.okc-site h5,.okc-site h6 { color: inherit; font-family: var(--font-display); font-weight: 600; line-height: 1.12; } .okc-site h1 { font-size: clamp(2.5rem,6vw,5.5rem); } .okc-site h2 { font-size: clamp(2rem,4vw,3.5rem); } .okc-site h3 { font-size: 1.6rem; } .okc-site .content-card h2 { font-size: 1.65rem; } .okc-site .taxonomy-group h3 { font-size: 1.4rem; } .okc-site .archive-band a,.okc-site .site-footer a { color: var(--color-paper); } .okc-site .archive-band a:hover,.okc-site .site-footer a:hover { color: var(--color-gold); } .okc-site .button-primary { background: var(--color-ink); color: var(--color-paper); } .okc-site .header-row { position: relative; flex-wrap: nowrap; gap: 1.5rem; } .okc-site .brand { width: 230px; flex: 0 0 230px; gap: .65rem; margin-right: auto; } .okc-site .brand img { display: block; width: 100%; height: auto; object-fit: contain; } .okc-site .brand .brand-house { display: none; } .okc-site .brand-caption { font-size: .57rem; letter-spacing: .025em; } .okc-site .desktop-navigation .menu { display: flex; align-items: center; gap: 1.25rem; font-size: .95rem; font-weight: 500; } .okc-site .desktop-navigation .menu > li { position: relative; } .okc-site .desktop-navigation .sub-menu { position: absolute; z-index: 40; display: none; min-width: 220px; margin: 0; padding: 1rem; background: var(--color-paper); border: 1px solid var(--color-ink); list-style: none; } .okc-site .desktop-navigation li:hover > .sub-menu,.okc-site .desktop-navigation li:focus-within > .sub-menu { display: block; } .okc-site .desktop-navigation .menu a { display: block; padding-block: .6rem; color: var(--color-ink); } .okc-site .desktop-navigation .menu a:hover,.okc-site .desktop-navigation .current-menu-item > a { color: var(--color-rust); text-decoration: underline; } .okc-site .mobile-navigation { display: none; } .okc-site .archive-link { padding: .65rem .85rem; border: 1px solid var(--color-rust); white-space: nowrap; } .okc-site .footer-wordmark { display: block; width: min(100%,320px); height: auto; margin-bottom: 1.5rem; } .okc-site .footer-identity { max-width: 480px; } .okc-site .footer-top .menu a { display: inline-block; padding-block: .4rem; } .okc-site .footer-radio { display: flex; align-items: center; gap: 1.5rem; border-top: 1px solid var(--color-olive); padding-block: 1.5rem; } .okc-site .footer-radio > a { display: block; background: var(--color-paper); padding: .9rem 1.2rem; } .okc-site .radio-wordmark { display: block; width: 160px; height: auto; } .okc-site .centenary-mark { background: transparent; color: var(--color-ink); border: 0; } .okc-site .centenary-logo { width: 100%; max-height: 440px; object-fit: contain; } .okc-site .space-band .button { color: var(--color-ink); } .okc-site .space-band .button-primary { color: var(--color-paper); } .okc-site .button:hover { color: var(--color-paper); } @media (max-width: 1150px) { .okc-site .desktop-navigation { display: none; } .okc-site .mobile-navigation { display: block; position: static; } .okc-site .site-navigation nav { left: 0; right: 0; top: calc(100% - 1px); max-height: 70vh; overflow-y: auto; width: 100%; min-width: 0; border: 1px solid var(--color-ink); padding: 1.5rem; } .okc-site .site-navigation .menu { gap: 0; } .okc-site .site-navigation .menu > li > a { display: block; padding-block: .75rem; border-bottom: 1px solid var(--color-olive); color: var(--color-ink); } .okc-site .menu-indicator::before { content: '+'; } .okc-site .site-navigation[open] .menu-indicator::before { content: '−'; } .okc-site .mobile-search { margin-top: 1.5rem; } } @media (max-width: 600px) { .okc-site .header-row { gap: .75rem; padding-block: 1rem; } .okc-site .brand { width: 56px; flex-basis: 56px; } .okc-site .brand .brand-wordmark,.okc-site .brand-caption { display: none; } .okc-site .brand .brand-house { display: block; max-height: 64px; } .okc-site .site-navigation summary { min-height: 48px; align-items: center; padding: .5rem .8rem; gap: 1rem; } .okc-site .archive-link { margin-left: 0; min-height: 48px; display: flex; align-items: center; } .okc-site .footer-radio { align-items: flex-start; flex-direction: column; gap: .8rem; } .okc-site .footer-top .menu { gap: .5rem 2rem; } .okc-site .centenary-mark { max-width: 320px; padding: .5rem; } } .okc-site .container { width: min(1280px, calc(100% - 64px)); max-width: 1280px; margin-inline: auto; } @media (max-width: 800px) { .okc-site .container { width: calc(100% - 36px); } } .okc-site .century-intro { display: grid; grid-template-columns: 1fr 1.4fr; gap: 4rem; padding-bottom: 3rem; } .okc-site .century-intro h2 { margin: 0; } .okc-site .period-navigation ol { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); list-style: none; padding: 0; margin: 0 0 4rem; border-top: 1px solid var(--color-ink); } .okc-site .period-navigation a { display: grid; gap: .5rem; padding: 1.4rem .5rem; border-bottom: 3px solid var(--color-olive); text-decoration: none; font-family: var(--font-display); font-weight: 600; color: var(--color-ink); } .okc-site .period-navigation a:hover { border-color: var(--color-rust); color: var(--color-rust); } .okc-site .century-chapter { display: grid; grid-template-columns: 1fr 1.4fr; gap: 4rem; padding-block: 4rem; border-top: 1px solid var(--color-olive); scroll-margin-top: 4rem; } .okc-site .century-chapter h2 { margin: .5rem 0 2rem; font-size: clamp(2rem,3.5vw,3rem); } .okc-site .period-records { border-left: 3px solid var(--color-rust); padding-left: 1.5rem; margin-top: 2rem; } .okc-site .period-records h3 { font-size: 1.1rem; } .okc-site .period-records li { margin-block: .6rem; } .okc-site .sources-note { border-top: 1px solid var(--color-olive); padding-block: 2rem 4rem; font-size: .95rem; } .okc-site .sources-note h2 { font-size: 1.4rem; } .okc-site .sources-note p { max-width: 800px; } .okc-site .archive-guide { border-block: 1px solid var(--color-olive); padding-block: 1rem; } .okc-site .archive-guide summary { font-weight: 600; } .okc-site .archive-guide[open] summary { margin-bottom: 1rem; } .okc-site .archive-filters { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1.25rem; padding: 2rem; margin-block: 2rem; background: var(--color-white); border: 1px solid var(--color-olive); } .okc-site .archive-filters label { display: grid; gap: .5rem; font-size: .9rem; font-weight: 600; min-width: 0; } .okc-site .archive-filters input,.okc-site .archive-filters select { width: 100%; min-height: 48px; min-width: 0; background: var(--color-paper); color: var(--color-ink); border: 1px solid var(--color-olive); border-radius: 0; padding: .7rem; font-size: 1rem; } .okc-site .archive-search,.okc-site .filter-actions { grid-column: 1 / -1; } .okc-site .filter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; } .okc-site .archive-results > .meta { margin-block: 2rem; } .okc-site .pagination ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; } .okc-site .record-details { border-top: 1px solid var(--color-olive); padding-block: 2rem; } .okc-site .record-details h2 { font-size: 1.5rem; } .okc-site .record-details dl { display: grid; grid-template-columns: 150px 1fr; gap: .7rem 1.5rem; } .okc-site .record-details dt { font-weight: 600; } .okc-site .record-details dd { margin: 0; overflow-wrap: anywhere; } @media (max-width: 800px) { .okc-site .century-intro,.okc-site .century-chapter { grid-template-columns: 1fr; gap: 1.5rem; } .okc-site .period-navigation ol { grid-template-columns: 1fr 1fr; gap: .6rem; } .okc-site .archive-filters { grid-template-columns: 1fr 1fr; padding: 1.25rem; } } @media (max-width: 480px) { .okc-site .archive-filters { grid-template-columns: 1fr; } .okc-site .record-details dl { grid-template-columns: 1fr; gap: .3rem; } .okc-site .record-details dd { margin-bottom: 1rem; } } .okc-site .program-navigation { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 2rem; } .okc-site .program-navigation a { color: var(--color-ink); } .okc-site .program-navigation .button-primary { color: var(--color-paper); } .okc-site .event-date { color: var(--color-rust); font-size: .9rem; font-weight: 600; } .okc-site .project-card { background: var(--color-white); padding: 1.5rem; border-top: 3px solid var(--color-olive); } .okc-site .project-more { display: inline-block; padding-block: .5rem; font-weight: 600; } .okc-site .program-archive-link { margin-top: 3rem; border-top: 1px solid var(--color-olive); padding-top: 1.5rem; } .okc-site .editor-note { padding: 1rem; border-left: 3px solid var(--color-rust); background: var(--color-white); font-size: .9rem; margin-bottom: 2rem; } .okc-site .native-centenary-content { padding-bottom: 4rem; } .okc-site .native-centenary-content > h2 { font-size: clamp(2rem,3.5vw,3rem); } .okc-site .native-centenary-content > p { max-width: 800px; } .okc-site .native-centenary-content .wp-block-button__link { border-radius: 0; background: var(--color-ink); color: var(--color-paper); font-family: var(--font-sans); padding: .8rem 1.2rem; } .okc-site .native-centenary-content .wp-block-button__link:hover { background: var(--color-rust); } .okc-site .native-centenary-content .century-chapter > .wp-block-group { min-width: 0; } .okc-site .content-card h2 a,.okc-site .content-card h3 a { font: inherit; color: inherit; } .okc-site .content-card h2 a:hover,.okc-site .content-card h3 a:hover { color: var(--color-rust); } .okc-site .info-hero { gap: 3rem; padding-block: 4rem; } .okc-site .info-hero-photo { margin: 0; } .okc-site .info-hero-photo img { display: block; width: 100%; height: auto; border-bottom: 6px solid var(--color-rust); } .okc-site .info-brand-mark { display: grid; justify-items: center; gap: 2rem; padding: 3rem; background: var(--color-gold); } .okc-site .info-house-logo { display: block; width: min(100%,180px); max-height: 210px; object-fit: contain; } .okc-site .info-navigation ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; padding: 1rem 0 2rem; border-bottom: 1px solid var(--color-olive); } .okc-site .info-navigation a { display: inline-block; padding-block: .6rem; font-weight: 600; color: var(--color-ink); } .okc-site .info-navigation a:hover { color: var(--color-rust); } .okc-site .info-layout { display: grid; grid-template-columns: minmax(0,3fr) minmax(220px,1fr); align-items: start; gap: 3rem; padding-block: 3rem 5rem; } .okc-site .info-content { min-width: 0; } .okc-site .info-section { scroll-margin-top: 4rem; margin: 0 0 3rem; padding-top: 1rem; } .okc-site .info-section > h2 { font-size: clamp(1.8rem,3vw,2.8rem); margin: 0 0 1.5rem; } .okc-site .info-section p,.okc-site .info-section li { overflow-wrap: anywhere; } .okc-site .info-section li { margin-bottom: .6rem; } .okc-site .info-section .wp-block-details { border-block: 1px solid var(--color-olive); padding-block: 1rem; } .okc-site .info-section .wp-block-details summary { cursor: pointer; padding-block: .5rem; font-weight: 600; } .okc-site .info-section .wp-block-details[open] summary { margin-bottom: 1rem; } .okc-site .info-contact { position: sticky; top: 3rem; border-top: 3px solid var(--color-rust); padding: 1.5rem; background: var(--color-white); overflow-wrap: anywhere; } .okc-site .info-contact h2 { font-size: 1.6rem; } .okc-site .info-contact address { font-style: normal; margin-bottom: 1.25rem; } .okc-site .info-contact .button { margin-bottom: 1.5rem; color: var(--color-paper); } .okc-site .info-content .wp-block-gallery.has-nested-images { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; } .okc-site .info-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { display: block; width: 100%; max-width: none; margin: 0; } .okc-site .info-content .wp-block-gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .okc-site .info-content .wp-block-gallery a { display: block; } .okc-site .info-content .wp-block-button__link { border-radius: 0; background: var(--color-ink); color: var(--color-paper); font-family: var(--font-sans); } .okc-site .info-content .wp-block-button__link:hover { background: var(--color-rust); } @media (max-width: 900px) { .okc-site .info-layout { grid-template-columns: 1fr; gap: 2rem; } .okc-site .info-contact { position: static; } .okc-site .info-content .wp-block-gallery.has-nested-images { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width: 600px) { .okc-site .info-hero { padding-block: 3rem; gap: 2rem; } .okc-site .info-navigation ul { gap: .25rem 1rem; } .okc-site .info-layout { padding-block: 2rem 3rem; } .okc-site .info-brand-mark { padding: 2rem; } } @media (max-width: 420px) { .okc-site .info-content .wp-block-gallery.has-nested-images { grid-template-columns: 1fr; } } :root{ --color-rust:#B5532D; --color-olive:#7B7A56; --color-ink:#1B1B1B; --color-accent:#D97A4A; --color-paper:#F4F1EA; --color-white:#F7F8FA; --color-brown:#8B7355; --color-gold:#D8A25A; --line:rgba(27,27,27,.28); --line-light:rgba(247,248,250,.25); --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2rem; --space-5:3rem; --space-6:4.5rem; --space-7:6.5rem; --reading:760px; } html{scroll-behavior:smooth} body.okc-site{ margin:0; background:var(--color-paper); color:var(--color-ink); font-family:var(--font-sans); font-size:18px; line-height:1.62; -webkit-font-smoothing:antialiased; } .okc-site h1,.okc-site h2,.okc-site h3,.okc-site h4{ margin-top:0; font-family:var(--font-display); font-weight:600; letter-spacing:-.025em; } .okc-site h1{font-size:clamp(2.8rem,6.2vw,5.4rem);line-height:.98} .okc-site h2{font-size:clamp(2rem,3.8vw,3.35rem);line-height:1.03} .okc-site h3{font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.12} .okc-site p{max-width:72ch} .okc-site .meta{font-family:var(--font-mono);font-size:.72rem;line-height:1.45;letter-spacing:.07em;text-transform:uppercase} .okc-site .container{width:min(1280px,calc(100% - 80px));max-width:1280px;margin-inline:auto} .okc-site .section{padding-block:clamp(4rem,8vw,7rem)} .okc-site a{text-underline-offset:.22em;text-decoration-thickness:1px} .okc-site :focus-visible{outline:2px solid var(--color-rust);outline-offset:4px} .okc-site .site-header{ position:relative; z-index:50; background:rgba(244,241,234,.97); border-top:4px solid var(--color-rust); border-bottom:1px solid var(--line); } .okc-site .header-row{ min-height:86px; display:grid; grid-template-columns:210px auto 1fr auto; align-items:center; gap:clamp(1rem,2.5vw,2.5rem); padding-block:.75rem; } .okc-site .brand{width:210px;display:block;margin:0} .okc-site .brand-wordmark{display:block;width:100%;height:auto} .okc-site .brand-house{display:none} .okc-site .header-context{white-space:nowrap;color:var(--color-brown)} .okc-site .desktop-navigation{justify-self:end} .okc-site .desktop-navigation .menu{ display:flex; align-items:center; gap:clamp(.8rem,1.5vw,1.4rem); font-size:.88rem; font-weight:500; } .okc-site .desktop-navigation .menu a{ padding:.55rem 0; color:var(--color-ink); text-decoration:none; border-bottom:1px solid transparent; } .okc-site .desktop-navigation .menu a:hover, .okc-site .desktop-navigation .current-menu-item>a{ color:var(--color-rust); border-bottom-color:currentColor; text-decoration:none; } .okc-site .archive-link{ color:var(--color-rust); padding:.55rem 0; border:0; border-bottom:1px solid var(--color-rust); text-decoration:none; white-space:nowrap; } .okc-site .mobile-navigation{display:none} .okc-site .section-heading{ display:grid; grid-template-columns:1fr auto; align-items:end; gap:2rem; border-top:1px solid var(--line); padding-top:1.2rem; margin-bottom:2.25rem; } .okc-site .section-heading h2{margin:.2rem 0 0} .okc-site .section-heading>a{ font-family:var(--font-mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:.2rem; } .okc-site .button, .okc-site .wp-block-button__link{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:.68rem 1rem; border:1px solid currentColor; border-radius:2px!important; background:transparent; color:var(--color-ink); font-family:var(--font-mono); font-size:.74rem; line-height:1.2; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; } .okc-site .button-primary, .okc-site .wp-block-button__link{ background:var(--color-ink); border-color:var(--color-ink); color:var(--color-paper); } .okc-site .button:hover, .okc-site .wp-block-button__link:hover{ background:var(--color-rust); border-color:var(--color-rust); color:var(--color-paper); } .okc-site .card-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.4rem,2.4vw,2.5rem); } .okc-site .content-card, .okc-site .project-card{ display:flex; flex-direction:column; min-width:0; padding:0 0 1.4rem; background:transparent; border:0; border-top:1px solid var(--line); } .okc-site .content-card .card-image{ order:-1; display:block; margin:0 0 1.2rem; overflow:hidden; background:#ddd8ce; } .okc-site .content-card img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .25s ease; } .okc-site .content-card:hover img{transform:scale(1.015)} .okc-site .content-card .meta{margin:.9rem 0 .35rem;color:var(--color-brown)} .okc-site .content-card h2,.okc-site .content-card h3{ margin:.25rem 0 .75rem; font-size:clamp(1.25rem,1.8vw,1.65rem); line-height:1.08; } .okc-site .content-card h2 a,.okc-site .content-card h3 a{text-decoration:none} .okc-site .content-card>p:not(.meta){font-size:.94rem;line-height:1.5;margin-bottom:.75rem} .okc-site .project-more{ margin-top:auto; width:max-content; font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; text-decoration:none; border-bottom:1px solid currentColor; } .okc-site blockquote{ position:relative; margin:2.5rem 0; padding:2rem 0 0; border:0; border-top:1px solid var(--line); font-size:clamp(1.3rem,2.2vw,1.7rem); line-height:1.4; } .okc-site blockquote:before{ content:"“"; position:absolute; top:.25rem; left:0; color:var(--color-rust); font-family:var(--font-display); font-size:1.7rem; } .okc-site .archive-band{background:var(--color-ink);color:var(--color-paper)} .okc-site .archive-band .meta{color:var(--color-gold)} .okc-site .taxonomy-group{border-top:1px solid var(--line-light);padding-top:1rem} .okc-site .term-list a{text-decoration:none} .okc-site .archive-filters{ background:transparent; border:1px solid var(--line); border-radius:0; } .okc-site .archive-filters input,.okc-site .archive-filters select{ border:1px solid var(--line); background:var(--color-white); } .okc-site .site-footer{ margin-top:0; padding:4.5rem 0 1.5rem; background:var(--color-ink); color:var(--color-paper); } .okc-site .footer-grid{ display:grid; grid-template-columns:minmax(260px,1.5fr) 1fr 1fr; gap:clamp(2rem,5vw,6rem); padding-bottom:3.5rem; } .okc-site .footer-wordmark{width:min(100%,300px);margin:0 0 1.5rem} .okc-site .footer-identity p{font-size:.95rem;line-height:1.55;color:#d8d8d4} .okc-site .footer-navigation .menu{display:grid;grid-template-columns:1fr;gap:.55rem} .okc-site .footer-navigation a, .okc-site .footer-links a{ color:var(--color-paper); text-decoration:none; } .okc-site .footer-navigation a:hover, .okc-site .footer-links a:hover{color:var(--color-gold)} .okc-site .footer-links{display:grid;align-content:start;gap:.65rem} .okc-site .footer-bottom{ display:flex; justify-content:space-between; gap:2rem; padding-top:1.4rem; border-top:1px solid var(--line-light); color:#aaa9a5; } .okc-site .footer-bottom p{margin:0} .okc-site .reading{max-width:var(--reading)} .okc-site .entry-content>p{max-width:var(--reading)} .okc-site .entry-content figcaption{ margin-top:.55rem; font-family:var(--font-mono); font-size:.72rem; line-height:1.45; color:var(--color-brown); } .okc-site .page-heading{padding-block:clamp(3rem,7vw,6rem) 2.5rem} @media(max-width:1120px){ .okc-site .header-row{grid-template-columns:190px 1fr auto;min-height:78px} .okc-site .brand{width:190px} .okc-site .header-context{display:none} .okc-site .desktop-navigation{display:none} .okc-site .archive-link{display:none} .okc-site .mobile-navigation{display:block;justify-self:end;position:static} .okc-site .mobile-navigation summary{ min-height:44px; display:flex; align-items:center; gap:.8rem; padding:.55rem .8rem; border:1px solid var(--line); list-style:none; font-family:var(--font-mono); font-size:.75rem; text-transform:uppercase; } .okc-site .mobile-navigation summary::-webkit-details-marker{display:none} .okc-site .mobile-navigation nav{ position:absolute; top:100%; left:0; right:0; width:100%; max-height:75vh; overflow:auto; padding:1.5rem max(40px,calc((100vw - 1280px)/2)); background:var(--color-paper); border-bottom:1px solid var(--line); } .okc-site .mobile-navigation .menu{display:grid;gap:0} .okc-site .mobile-navigation .menu a, .okc-site .mobile-archive-link{ display:block; padding:.8rem 0; border-bottom:1px solid var(--line); color:var(--color-ink); text-decoration:none; } .okc-site .mobile-archive-link{color:var(--color-rust)} } @media(max-width:800px){ .okc-site .container{width:calc(100% - 40px)} .okc-site .section{padding-block:3.75rem} .okc-site .card-grid{grid-template-columns:1fr 1fr} .okc-site .footer-grid{grid-template-columns:1fr 1fr} .okc-site .footer-identity{grid-column:1/-1} .okc-site .footer-bottom{flex-direction:column;gap:.5rem} .okc-site .section-heading{grid-template-columns:1fr;gap:.7rem} } @media(max-width:560px){ body.okc-site{font-size:16.5px} .okc-site .container{width:calc(100% - 32px)} .okc-site .header-row{grid-template-columns:56px 1fr auto;min-height:70px} .okc-site .brand{width:56px} .okc-site .brand-wordmark{display:none} .okc-site .brand-house{display:block;width:52px;height:52px;object-fit:contain} .okc-site .card-grid{grid-template-columns:1fr} .okc-site .footer-grid{grid-template-columns:1fr} .okc-site .footer-identity{grid-column:auto} .okc-site .mobile-navigation nav{padding-inline:16px} } .okc-site .home-hero{ border-bottom:1px solid var(--line); } .okc-site .home-hero-grid{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(420px,1.14fr); min-height:min(760px,82vh); } .okc-site .home-hero-copy{ display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(4rem,8vw,7rem) clamp(2rem,5vw,5rem) clamp(4rem,7vw,6rem) 0; } .okc-site .home-hero-copy .meta{color:var(--color-rust);margin-bottom:1.2rem} .okc-site .home-hero-copy h1{ max-width:8ch; margin-bottom:1.6rem; } .okc-site .home-hero-lead{ max-width:34rem; margin-bottom:2rem; font-size:clamp(1.1rem,1.8vw,1.35rem); line-height:1.5; } .okc-site .home-hero-links{ display:flex; flex-wrap:wrap; gap:1.5rem; margin-top:.5rem; } .okc-site .home-hero-links a, .okc-site .text-link{ width:max-content; max-width:100%; font-family:var(--font-mono); font-size:.75rem; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:.2rem; } .okc-site .home-hero-image{ margin:0; min-height:540px; overflow:hidden; background:#d9d4ca; } .okc-site .home-hero-image img{ display:block; width:100%; height:100%; min-height:540px; object-fit:cover; } .okc-site .home-today{padding-bottom:0} .okc-site .home-today-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr); gap:clamp(3rem,7vw,7rem); align-items:start; } .okc-site .home-today-copy{ padding-top:1rem; } .okc-site .home-today-copy .meta{ color:var(--color-rust); margin-bottom:1rem; } .okc-site .home-today-copy h2{max-width:11ch;margin-bottom:2rem} .okc-site .home-today-copy p{max-width:36rem} .okc-site .home-today-image{margin:0} .okc-site .home-today-image img{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; } .okc-site .home-facts{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:clamp(3rem,5vw,5rem); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .okc-site .home-facts>div{ display:grid; gap:.35rem; padding:1.5rem 1.5rem 1.5rem 0; border-right:1px solid var(--line); } .okc-site .home-facts>div:not(:first-child){padding-left:1.5rem} .okc-site .home-facts>div:last-child{border-right:0} .okc-site .home-facts strong{ font-family:var(--font-display); font-size:clamp(2.1rem,4.5vw,4rem); line-height:1; font-weight:600; letter-spacing:-.045em; color:var(--color-rust); } .okc-site .home-facts .meta{ color:var(--color-brown); text-transform:none; letter-spacing:.02em; } .okc-site .home-century{ background:#e9e4da; border-block:1px solid var(--line); } .okc-site .home-century-intro{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem,7vw,7rem); margin-bottom:clamp(3rem,5vw,5rem); } .okc-site .home-century-intro .meta{color:var(--color-rust)} .okc-site .home-century-intro h2{max-width:11ch} .okc-site .home-century-intro p{max-width:38rem} .okc-site .home-periods{ list-style:none; padding:0; margin:0; border-top:1px solid var(--color-ink); } .okc-site .home-periods li{border-bottom:1px solid var(--line)} .okc-site .home-periods a{ display:grid; grid-template-columns:minmax(140px,.28fr) 1fr auto; align-items:center; gap:2rem; padding:1.2rem 0; color:var(--color-ink); text-decoration:none; } .okc-site .home-periods a:after{ content:"↗"; font-family:var(--font-mono); font-size:.8rem; color:var(--color-rust); } .okc-site .home-periods a:hover{color:var(--color-rust)} .okc-site .period-years{ font-family:var(--font-mono); font-size:.77rem; letter-spacing:.04em; } .okc-site .archive-band .archive-intro{ grid-template-columns:1fr .9fr; align-items:end; } .okc-site .archive-band .archive-intro h2{ max-width:13ch; margin-bottom:0; } .okc-site .archive-band .archive-intro p{ color:#d6d4cf; } .okc-site .section-intro{ max-width:48rem; margin:-.75rem 0 2.5rem; color:#55514b; } .okc-site .home-space{ background:var(--color-olive); color:var(--color-ink); } .okc-site .home-space-grid{ display:grid; grid-template-columns:minmax(0,1.18fr) minmax(320px,.82fr); align-items:stretch; } .okc-site .home-space figure{margin:0} .okc-site .home-space figure img{ display:block; width:100%; height:100%; min-height:500px; object-fit:cover; } .okc-site .home-space-copy{ display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(2rem,5vw,5rem); background:rgba(244,241,234,.9); } .okc-site .home-space-copy .meta{color:var(--color-brown);margin-bottom:1rem} .okc-site .home-space-copy h2{max-width:9ch;margin-bottom:1.5rem} .okc-site .home-space-copy p{max-width:31rem} .okc-site .home-radio{ background:#dfd0c8; border-bottom:1px solid var(--line); } .okc-site .home-radio-grid{ display:grid; grid-template-columns:1fr minmax(360px,.72fr); gap:clamp(3rem,8vw,8rem); align-items:center; } .okc-site .home-radio-copy{padding-block:1rem} .okc-site .home-radio-copy>.meta{color:var(--color-rust);margin-bottom:1.5rem} .okc-site .home-radio-logo{max-width:520px;margin-bottom:2rem} .okc-site .radio-home-wordmark{display:block;width:100%;height:auto} .okc-site .home-radio-copy p{ max-width:38rem; font-size:1.08rem; } .okc-site .home-radio figure{margin:0} .okc-site .home-radio figure img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; filter:grayscale(100%); } @media(max-width:980px){ .okc-site .home-hero-grid, .okc-site .home-today-grid, .okc-site .home-century-intro, .okc-site .home-space-grid, .okc-site .home-radio-grid{ grid-template-columns:1fr; } .okc-site .home-hero-grid{min-height:0} .okc-site .home-hero-copy{padding-right:0} .okc-site .home-hero-copy h1{max-width:12ch} .okc-site .home-hero-image{min-height:0} .okc-site .home-hero-image img{min-height:0;aspect-ratio:16/9} .okc-site .home-today-image{order:-1} .okc-site .home-space figure img{min-height:0;aspect-ratio:16/10} .okc-site .home-radio-grid{gap:2.5rem} .okc-site .home-radio figure{max-width:560px} } @media(max-width:650px){ .okc-site .home-facts{grid-template-columns:1fr} .okc-site .home-facts>div, .okc-site .home-facts>div:not(:first-child){ padding:1.2rem 0; border-right:0; border-bottom:1px solid var(--line); } .okc-site .home-facts>div:last-child{border-bottom:0} .okc-site .home-periods a{ grid-template-columns:1fr auto; gap:.4rem 1rem; } .okc-site .home-periods .period-years{grid-column:1/-1} .okc-site .home-space-copy{padding:2rem 1.5rem} } .okc-site .centenary-page-hero{ padding-block:clamp(4rem,8vw,7rem); border-bottom:1px solid var(--line); } .okc-site .centenary-page-hero-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.48fr); gap:clamp(3rem,8vw,8rem); align-items:center; } .okc-site .centenary-page-hero .meta{color:var(--color-rust);margin-bottom:1rem} .okc-site .centenary-page-hero h1{max-width:10ch;margin-bottom:1.5rem} .okc-site .centenary-page-hero .intro{max-width:39rem;font-size:clamp(1.08rem,1.7vw,1.3rem)} .okc-site .centenary-page-mark{display:flex;align-items:center;justify-content:center} .okc-site .centenary-page-mark .centenary-logo{width:min(100%,360px);max-height:none} .okc-site .period-navigation{padding-top:2rem} .okc-site .period-navigation ol{ margin:0; grid-template-columns:repeat(5,minmax(0,1fr)); } .okc-site .period-navigation a{ min-height:88px; padding:1rem .75rem; border-bottom:1px solid var(--line); } .okc-site .native-centenary-content{ padding-top:clamp(3rem,6vw,5rem); padding-bottom:clamp(4rem,7vw,7rem); } .okc-site .native-centenary-content>h2{ max-width:12ch; margin-bottom:1.5rem; } .okc-site .native-centenary-content>p{ max-width:var(--reading); margin-bottom:4rem; font-size:1.08rem; } .okc-site .native-centenary-content .century-chapter{ display:grid; grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr); gap:clamp(2rem,6vw,6rem); padding-block:clamp(3.5rem,7vw,6rem); border-top:1px solid var(--line); } .okc-site .native-centenary-content .century-chapter>.wp-block-group:first-child{ position:sticky; top:2rem; align-self:start; } .okc-site .native-centenary-content .century-chapter>.wp-block-group:first-child>p:first-child{ margin:0 0 .6rem; font-family:var(--font-mono); font-size:.75rem; letter-spacing:.05em; color:var(--color-rust); } .okc-site .native-centenary-content .century-chapter h2{ font-size:clamp(2rem,3.4vw,3rem); margin-bottom:1.4rem; } .okc-site .native-centenary-content .century-chapter>.wp-block-group:nth-child(2)>p{ max-width:var(--reading); } .okc-site .period-records{ margin-top:2.5rem; padding:1.25rem 0 0; border:0; border-top:1px solid var(--line); } .okc-site .period-records h3{ margin-bottom:.75rem; font-family:var(--font-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; } .okc-site .period-records ul{list-style:none;margin:0;padding:0} .okc-site .period-records li{padding:.55rem 0;border-bottom:1px solid var(--line)} .okc-site .period-records a{text-decoration:none} .okc-site .archive-guide{ margin-bottom:2rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .okc-site .archive-guide summary{ padding:1rem 0; font-family:var(--font-mono); font-size:.76rem; letter-spacing:.04em; text-transform:uppercase; } .okc-site .archive-guide>p{max-width:var(--reading)} .okc-site .taxonomy-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1.5rem,3vw,3rem); padding-block:2rem; } .okc-site .taxonomy-group h3{ margin-bottom:1rem; font-family:var(--font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; } .okc-site .term-list li{ display:flex; justify-content:space-between; gap:1rem; padding:.3rem 0; border-bottom:1px solid rgba(255,255,255,.1); } .okc-site .archive-guide .term-list li{border-bottom-color:var(--line)} .okc-site .term-list small{opacity:.65} .okc-site .archive-meta-line{ margin:.25rem 0!important; color:var(--color-brown); text-transform:none; letter-spacing:.015em; } .okc-site .archive-meta-line span{ display:inline-block; min-width:3.5rem; color:var(--color-ink); } .okc-site .archive-meta-line a{text-decoration:none} .okc-site .archive-taxonomy-page .taxonomy-description{max-width:var(--reading)} .okc-site .archive-results .content-card{padding-top:0} .okc-site .archive-record-header{ max-width:980px; padding-bottom:clamp(2.5rem,5vw,4rem); border-bottom:1px solid var(--line); } .okc-site .archive-record-header>.meta{color:var(--color-rust);margin-bottom:1rem} .okc-site .archive-record-header h1{max-width:13ch;margin-bottom:2rem} .okc-site .archive-record-taxonomy{display:grid;gap:.1rem} .okc-site .archive-record-featured{ margin:3rem 0; max-width:1100px; } .okc-site .archive-record-featured img{display:block;width:100%;height:auto} .okc-site .archive-record-featured figcaption{ margin-top:.6rem; font-family:var(--font-mono); font-size:.72rem; color:var(--color-brown); } .okc-site .archive-record-layout{ display:grid; grid-template-columns:minmax(0,var(--reading)) minmax(220px,320px); gap:clamp(3rem,7vw,7rem); align-items:start; padding-block:clamp(3rem,6vw,5rem); } .okc-site .archive-record-sidebar{ border-top:1px solid var(--line); } .okc-site .archive-record-sidebar .record-details{ padding:1.25rem 0; border-top:0; border-bottom:1px solid var(--line); } .okc-site .archive-record-sidebar .record-details h2{ font-family:var(--font-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; } .okc-site .archive-record-sidebar .record-details dl{grid-template-columns:1fr} .okc-site .archive-record-sidebar .record-details dt{ font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--color-brown); } .okc-site .archive-record-sidebar .record-details dd{margin-bottom:.9rem} .okc-site .archive-related{ padding-top:3rem; border-top:1px solid var(--line); } .okc-site .archive-back{margin-top:3rem} @media(max-width:900px){ .okc-site .centenary-page-hero-grid, .okc-site .native-centenary-content .century-chapter, .okc-site .archive-record-layout{grid-template-columns:1fr} .okc-site .centenary-page-mark{justify-content:flex-start} .okc-site .centenary-page-mark .centenary-logo{width:min(70vw,300px)} .okc-site .native-centenary-content .century-chapter>.wp-block-group:first-child{position:static} .okc-site .taxonomy-grid{grid-template-columns:1fr 1fr} } @media(max-width:650px){ .okc-site .period-navigation{overflow-x:auto;padding-bottom:.5rem} .okc-site .period-navigation ol{ display:flex; width:max-content; min-width:100%; } .okc-site .period-navigation li{width:145px;flex:0 0 145px} .okc-site .period-navigation a{min-height:76px} .okc-site .taxonomy-grid{grid-template-columns:1fr} } .okc-site .program-page .page-heading{max-width:900px} .okc-site .program-navigation{ display:flex; flex-wrap:wrap; gap:1.25rem; margin:0 0 2rem; padding:1rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .okc-site .program-tab{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; color:var(--color-brown); } .okc-site .program-tab:hover, .okc-site .program-tab.is-active{ color:var(--color-rust); } .okc-site .program-tab.is-active{font-weight:700} .okc-site .listing-count{margin-bottom:1.5rem;color:var(--color-brown)} .okc-site .program-empty{ max-width:760px; padding:2.5rem 0 3rem; border-bottom:1px solid var(--line); } .okc-site .program-empty h2{max-width:12ch} .okc-site .program-archive-link{margin-top:4rem;padding-top:1.5rem;border-top:1px solid var(--line)} .okc-site .project-card{padding-top:1rem} .okc-site .project-card .card-image{margin-top:-1rem} .okc-site .project-card .project-more{margin-top:auto} .okc-site .program-page+.site-footer, .okc-site .info-page+.site-footer{margin-top:0} .okc-site .info-page .info-hero{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(400px,1.08fr); align-items:end; gap:clamp(3rem,7vw,7rem); padding-block:clamp(4rem,7vw,6rem); } .okc-site .info-page .info-hero>div:first-child{padding-bottom:1rem} .okc-site .info-page .info-hero .meta{color:var(--color-rust);margin-bottom:1rem} .okc-site .info-page .info-hero h1{max-width:10ch} .okc-site .info-page .info-hero .intro{max-width:36rem;font-size:clamp(1.05rem,1.8vw,1.28rem)} .okc-site .info-page .actions{margin-top:2rem} .okc-site .info-hero-photo img{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; border:0; } .okc-site .info-brand-mark{ min-height:380px; background:var(--color-gold); border:0; } .okc-site .info-navigation ul{ padding:1rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .okc-site .info-navigation a{ padding:.35rem 0; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; } .okc-site .info-layout{ grid-template-columns:minmax(0,1fr) minmax(240px,300px); gap:clamp(3rem,7vw,7rem); padding-block:4rem 6rem; } .okc-site .info-content{max-width:850px} .okc-site .info-section{ margin:0 0 4.5rem; padding-top:0; scroll-margin-top:2rem; } .okc-site .info-section>h2{ max-width:14ch; padding-top:1rem; border-top:1px solid var(--line); } .okc-site .info-section h3{margin-top:2.5rem} .okc-site .info-section p, .okc-site .info-section li{max-width:70ch} .okc-site .info-section ul{padding-left:1.2rem} .okc-site .info-section .wp-block-details{ margin-top:1.5rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .okc-site .info-section .wp-block-details summary{ font-family:var(--font-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; } .okc-site .info-contact{ position:sticky; top:2rem; padding:1.25rem 0; background:transparent; border-top:2px solid var(--color-rust); } .okc-site .info-contact h2{font-size:1.35rem} .okc-site .info-contact p, .okc-site .info-contact address{font-size:.92rem} .okc-site .info-content .wp-block-gallery.has-nested-images{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; } .okc-site .info-content .wp-block-gallery img{aspect-ratio:4/3} .okc-site .editor-note{ margin-bottom:2rem; padding:.8rem 1rem; border-left:2px solid var(--color-rust); background:#ece7dc; } .okc-site .radio-page{background:#dfd0c8} .okc-site .radio-page-hero{ padding-block:clamp(4rem,8vw,7rem); border-bottom:1px solid var(--line); } .okc-site .radio-page-hero-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.7fr); gap:clamp(3rem,8vw,8rem); align-items:center; } .okc-site .radio-page-hero .meta{color:var(--color-rust);margin-bottom:1.5rem} .okc-site .radio-page-logo{max-width:580px;margin-bottom:2rem} .okc-site .radio-page-wordmark{display:block;width:100%;height:auto} .okc-site .radio-page-hero .intro{max-width:32rem;font-size:1.15rem} .okc-site .radio-page-hero figure{margin:0} .okc-site .radio-page-hero figure img{ display:block; width:100%; aspect-ratio:1; object-fit:cover; filter:grayscale(100%); } .okc-site .radio-info-layout{padding-block:4rem 6rem} .okc-site .radio-info-layout .info-section>h2{border-top-color:rgba(27,27,27,.35)} .okc-site .radio-info-layout .info-contact{background:transparent} .okc-site .single-dogadjaji .page-heading, .okc-site .single-projekti .page-heading{max-width:950px} .okc-site .single-dogadjaji article>img, .okc-site .single-projekti article>img{ display:block; width:100%; max-width:1100px; height:auto; margin-bottom:3rem; } .okc-site .record-details{ margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--line); } @media(max-width:900px){ .okc-site .info-page .info-hero, .okc-site .radio-page-hero-grid{grid-template-columns:1fr} .okc-site .info-layout{grid-template-columns:1fr} .okc-site .info-contact{position:static} .okc-site .info-hero-photo{order:-1} .okc-site .info-brand-mark{min-height:280px} .okc-site .radio-page-hero figure{max-width:560px} } @media(max-width:600px){ .okc-site .program-navigation{display:grid;gap:.65rem} .okc-site .info-content .wp-block-gallery.has-nested-images{grid-template-columns:1fr} .okc-site .info-page .info-hero{padding-block:3rem} .okc-site .info-navigation ul{display:grid;grid-template-columns:1fr 1fr;gap:.35rem 1rem} } :root{ --font-display:"IBM Plex Sans Condensed","Arial Narrow",sans-serif; --font-accent:"Oxanium",sans-serif; --font-sans:"IBM Plex Sans",sans-serif; --font-mono:"Oxygen Mono",monospace; --color-paper:#F2EEE6; --color-ink:#171717; --color-rust:#B24F2D; --color-olive:#77775B; --color-gold:#C99749; --rule:rgba(23,23,23,.38); --rule-soft:rgba(23,23,23,.18); } body.okc-site{ background:var(--color-paper); color:var(--color-ink); font-family:var(--font-sans); font-size:17.5px; line-height:1.58; } .okc-site h1, .okc-site h2, .okc-site h3, .okc-site h4, .okc-site h5, .okc-site h6{ font-family:var(--font-display); font-weight:700; letter-spacing:-.035em; text-wrap:balance; } .okc-site h1{ font-size:clamp(3.4rem,8vw,7.4rem); line-height:.88; letter-spacing:-.06em; } .okc-site h2{ font-size:clamp(2.5rem,5.2vw,4.8rem); line-height:.92; letter-spacing:-.05em; } .okc-site h3{ font-size:clamp(1.45rem,2.2vw,2rem); line-height:1; } .okc-site .meta, .okc-site time, .okc-site .period-years{ font-family:var(--font-mono); letter-spacing:.025em; } .okc-site .meta{ font-size:.68rem; line-height:1.45; text-transform:uppercase; } .okc-site .brand, .okc-site .desktop-navigation, .okc-site .mobile-navigation summary, .okc-site .archive-link{ font-family:var(--font-accent); } .okc-site .section{ padding-block:clamp(4.5rem,8.5vw,8rem); } .okc-site .section-heading{ align-items:end; border-top:2px solid var(--color-ink); padding-top:.85rem; margin-bottom:2.6rem; } .okc-site .section-heading .meta{ color:var(--color-rust); margin-bottom:.5rem; } .okc-site .section-heading>a{ font-size:.68rem; color:var(--color-ink); } .okc-site .site-header{ border-top:7px solid var(--color-rust); border-bottom:1px solid var(--color-ink); background:var(--color-paper); } .okc-site .header-row{ min-height:78px; padding-block:.7rem; } .okc-site .brand{ width:245px; flex-basis:245px; } .okc-site .desktop-navigation .menu{ gap:1.45rem; font-size:.82rem; text-transform:uppercase; letter-spacing:.015em; } .okc-site .desktop-navigation .menu a{ padding:.35rem 0; border-bottom:0; } .okc-site .desktop-navigation .menu a:hover, .okc-site .desktop-navigation .current-menu-item>a{ color:var(--color-rust); text-decoration:none; box-shadow:inset 0 -2px 0 currentColor; } .okc-site .archive-link{ border:0; border-left:1px solid var(--color-ink); padding:.45rem 0 .45rem 1rem; color:var(--color-rust); font-size:.76rem; text-transform:uppercase; letter-spacing:.02em; } .okc-site .card-grid{ gap:clamp(1rem,2vw,1.8rem); } .okc-site .content-card, .okc-site .project-card{ border-top:2px solid var(--color-ink); border-bottom:0; padding-top:.8rem; padding-bottom:2rem; } .okc-site .content-card .card-image{ margin:0 0 1rem; } .okc-site .content-card img{ aspect-ratio:4/3; object-fit:cover; filter:saturate(.92) contrast(1.02); } .okc-site .content-card h2, .okc-site .content-card h3{ font-family:var(--font-display); font-size:clamp(1.55rem,2.3vw,2.2rem); line-height:.96; margin:.35rem 0 .7rem; } .okc-site .content-card>p:not(.meta){ font-size:.9rem; line-height:1.45; } .okc-site .content-card .meta{ color:var(--color-rust); } .okc-site .archive-band{ background:#171717; color:#F2EEE6; } .okc-site .archive-band .meta{ color:var(--color-gold); } .okc-site .archive-band h2{ color:#F2EEE6; } .okc-site .taxonomy-group{ border-top:2px solid rgba(242,238,230,.65); } .okc-site .taxonomy-group h3{ font-family:var(--font-display); font-size:1.5rem; letter-spacing:-.03em; } .okc-site .term-list li{ padding:.42rem 0; } .okc-site .period-years, .okc-site .event-date time, .okc-site .home-facts strong{ font-variant-numeric:tabular-nums; } .okc-site .home-periods a{ padding:1.4rem 0; border-bottom:1px solid var(--rule); } .okc-site .home-periods .period-years{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.8rem,3.2vw,3rem); line-height:.9; letter-spacing:-.045em; color:var(--color-rust); } .okc-site .home-periods a>span:last-of-type{ font-family:var(--font-display); font-size:clamp(1.35rem,2.1vw,1.9rem); line-height:1; font-weight:600; } .okc-site .home-hero{ border-bottom:2px solid var(--color-ink); } .okc-site .home-hero-copy{ position:relative; padding-top:clamp(4rem,8vw,7rem); } .okc-site .home-hero-copy:before{ content:"1926—2026"; display:block; margin-bottom:1.1rem; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em; color:var(--color-rust); } .okc-site .home-hero-copy>.meta:first-child{ display:none; } .okc-site .home-hero-copy h1{ max-width:7ch; text-transform:uppercase; } .okc-site .home-hero-lead{ font-size:clamp(1.08rem,1.7vw,1.3rem); line-height:1.45; max-width:31rem; } .okc-site .home-hero-links{ border-top:1px solid var(--color-ink); padding-top:.9rem; gap:2rem; } .okc-site .home-hero-links a, .okc-site .text-link{ font-size:.68rem; } .okc-site .home-today-copy h2{ max-width:9ch; } .okc-site .home-facts{ border-top:2px solid var(--color-ink); border-bottom:1px solid var(--color-ink); } .okc-site .home-facts strong{ font-family:var(--font-display); font-size:clamp(2.6rem,5.8vw,5.3rem); color:var(--color-ink); } .okc-site .home-facts .meta{ color:var(--color-rust); } .okc-site .home-space{ background:var(--color-olive); } .okc-site .home-space-copy{ background:rgba(242,238,230,.94); } .okc-site .home-radio{ background:#D8CEC8; } .okc-site .home-radio figure img{ filter:grayscale(100%) contrast(1.08); } .okc-site .site-footer{ border-top:7px solid var(--color-rust); background:#111; } .okc-site .footer-bottom{ border-top:1px solid rgba(242,238,230,.35); } .okc-site .display-year{ font-family:var(--font-display); font-weight:700; font-size:clamp(4.5rem,14vw,12rem); line-height:.78; letter-spacing:-.07em; } .okc-site .editorial-kicker{ font-family:var(--font-accent); text-transform:uppercase; letter-spacing:.02em; } .okc-site .hard-rule{ border-top:4px solid var(--color-ink); } .okc-site .rust-panel{ background:var(--color-rust); color:var(--color-paper); } @media(max-width:800px){ body.okc-site{font-size:16.5px} .okc-site .section{padding-block:3.75rem} .okc-site .home-hero-copy h1{max-width:9ch} .okc-site .content-card, .okc-site .project-card{padding-bottom:1.5rem} } @media(max-width:560px){ .okc-site h1{font-size:clamp(3rem,17vw,5rem)} .okc-site h2{font-size:clamp(2.25rem,12vw,3.7rem)} .okc-site .site-header{border-top-width:5px} .okc-site .archive-link{display:none} .okc-site .home-periods .period-years{font-size:2rem} } .okc-site .home-hero-compact .home-hero-grid{ min-height:0; grid-template-columns:minmax(0,.82fr) minmax(420px,1.18fr); } .okc-site .home-hero-compact .home-hero-copy{ padding:clamp(3rem,5.5vw,5rem) clamp(2rem,4vw,4rem) clamp(3rem,5vw,4.5rem) 0; justify-content:center; } .okc-site .home-hero-compact .home-hero-copy:before{margin-bottom:.7rem} .okc-site .home-hero-compact h1{ font-size:clamp(3.2rem,6.4vw,6.2rem); max-width:8ch; } .okc-site .home-hero-compact .home-hero-image, .okc-site .home-hero-compact .home-hero-image img{ min-height:0; } .okc-site .home-hero-compact .home-hero-image img{ height:100%; aspect-ratio:16/10; object-fit:cover; } .okc-site .home-hero-compact .home-hero-links{ margin-top:1.5rem; } .okc-site .home-program{ padding-top:clamp(3.2rem,5vw,4.5rem); padding-bottom:clamp(4rem,7vw,6rem); } .okc-site .home-program .program-heading{ margin-bottom:.75rem; } .okc-site .home-program-status{ margin-bottom:1rem; color:var(--color-rust); } .okc-site .event-index{ border-top:3px solid var(--color-ink); } .okc-site .event-index-item{ border-bottom:1px solid var(--color-ink); } .okc-site .event-index-link{ display:grid; grid-template-columns:110px minmax(0,1fr) minmax(160px,250px) 28px; gap:clamp(1rem,2.5vw,2.5rem); align-items:center; min-height:138px; padding:.8rem 0; color:var(--color-ink); text-decoration:none; } .okc-site .event-index-date{ align-self:stretch; display:flex; flex-direction:column; justify-content:center; border-right:1px solid var(--rule); } .okc-site .event-index-date strong{ font-family:var(--font-display); font-size:clamp(3.4rem,5.5vw,5.5rem); line-height:.72; letter-spacing:-.07em; font-weight:700; } .okc-site .event-index-date span{ margin-top:.5rem; font-family:var(--font-mono); font-size:.72rem; color:var(--color-rust); } .okc-site .event-index-copy .meta{ margin:0 0 .4rem; color:var(--color-rust); } .okc-site .event-index-copy h3{ margin:0; max-width:22ch; font-size:clamp(1.6rem,2.8vw,2.8rem); line-height:.9; } .okc-site .event-index-image{ height:110px; overflow:hidden; } .okc-site .event-index-image img{ display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.88) contrast(1.04); transition:transform .2s ease,filter .2s ease; } .okc-site .event-index-arrow{ font-family:var(--font-mono); font-size:1rem; } .okc-site .event-index-link:hover{ color:var(--color-rust); } .okc-site .event-index-link:hover .event-index-image img{ transform:scale(1.025); filter:saturate(1) contrast(1.04); } .okc-site .home-today-compact{ padding-top:clamp(4rem,6vw,5.5rem); } .okc-site .home-today-compact .home-today-grid{ grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr); gap:clamp(2.5rem,7vw,7rem); border-top:3px solid var(--color-ink); padding-top:1.25rem; } .okc-site .home-today-compact .home-today-copy{ padding-top:0; } .okc-site .home-today-compact .home-today-copy h2{ max-width:8ch; margin-bottom:0; } .okc-site .home-today-text{ max-width:720px; } .okc-site .home-today-text p:first-child{ font-size:clamp(1.15rem,1.8vw,1.35rem); line-height:1.45; } .okc-site .home-century{ overflow:hidden; padding-top:clamp(3.2rem,5vw,4.5rem); background:#E7E0D5; } .okc-site .century-display{ margin:0 0 clamp(3rem,6vw,5rem); font-family:var(--font-display); font-weight:700; font-size:clamp(5rem,15vw,13rem); line-height:.7; letter-spacing:-.085em; white-space:nowrap; color:var(--color-rust); transform:translateX(-.025em); } .okc-site .home-century-intro{ border-top:3px solid var(--color-ink); padding-top:1rem; } .okc-site .home-projects .section-intro{ max-width:640px; margin-bottom:2.2rem; } .okc-site .project-index{ border-top:3px solid var(--color-ink); } .okc-site .project-index-item{ border-bottom:1px solid var(--color-ink); } .okc-site .project-index-item>a{ display:grid; grid-template-columns:110px minmax(180px,.75fr) minmax(260px,1.25fr) 28px; gap:clamp(1rem,2.5vw,2.5rem); align-items:start; padding:1.15rem 0; color:var(--color-ink); text-decoration:none; } .okc-site .project-index-year{ color:var(--color-rust); padding-top:.25rem; } .okc-site .project-index-title{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.45rem,2.2vw,2.1rem); line-height:.94; } .okc-site .project-index-excerpt{ font-size:.9rem; line-height:1.45; max-width:56ch; } .okc-site .project-index-arrow{ font-family:var(--font-mono); } .okc-site .project-index-item>a:hover{ color:var(--color-rust); } .okc-site .space-index{ display:grid; grid-template-columns:1fr 1fr; gap:0; list-style:none; margin:1.5rem 0 2rem; padding:0; border-top:1px solid var(--color-ink); } .okc-site .space-index li{ padding:.55rem 0; border-bottom:1px solid var(--rule); font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; } .okc-site .space-index li:nth-child(odd){ border-right:1px solid var(--rule); padding-right:1rem; } .okc-site .space-index li:nth-child(even){ padding-left:1rem; } .okc-site .radio-formats{ margin:1.5rem 0; padding:1rem 0; border-top:1px solid var(--color-ink); border-bottom:1px solid var(--color-ink); line-height:1.8; color:var(--color-rust); } @media(max-width:900px){ .okc-site .home-hero-compact .home-hero-grid, .okc-site .home-today-compact .home-today-grid{ grid-template-columns:1fr; } .okc-site .home-hero-compact .home-hero-copy{ padding-right:0; } .okc-site .event-index-link{ grid-template-columns:88px 1fr 26px; } .okc-site .event-index-image{ display:none; } .okc-site .project-index-item>a{ grid-template-columns:90px 1fr 26px; } .okc-site .project-index-excerpt{ grid-column:2/3; } } @media(max-width:600px){ .okc-site .home-program{padding-top:2.8rem} .okc-site .event-index-link{ grid-template-columns:68px 1fr 20px; min-height:104px; gap:.8rem; } .okc-site .event-index-date strong{ font-size:3.15rem; } .okc-site .event-index-copy h3{ font-size:1.55rem; } .okc-site .century-display{ font-size:21vw; margin-bottom:2.5rem; } .okc-site .project-index-item>a{ grid-template-columns:1fr 20px; gap:.55rem 1rem; } .okc-site .project-index-year{ grid-column:1/-1; } .okc-site .project-index-title{ grid-column:1/2; } .okc-site .project-index-excerpt{ grid-column:1/-1; } .okc-site .project-index-arrow{ grid-column:2/3; grid-row:2/3; } .okc-site .space-index{ grid-template-columns:1fr; } .okc-site .space-index li:nth-child(odd), .okc-site .space-index li:nth-child(even){ border-right:0; padding-left:0; padding-right:0; } } .okc-site .program-page-redesign{ padding-top:0; } .okc-site .program-masthead{ display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.55fr); gap:clamp(2rem,6vw,6rem); align-items:end; max-width:none; padding-block:clamp(4rem,7vw,6rem) 2rem; border-bottom:3px solid var(--color-ink); } .okc-site .program-masthead>.meta, .okc-site .program-masthead>h1{ grid-column:1/2; } .okc-site .program-masthead>h1{ margin:0; text-transform:uppercase; } .okc-site .program-masthead-note{ grid-column:2/3; grid-row:1/3; align-self:end; } .okc-site .program-masthead-note p{ margin:0; max-width:34rem; font-size:1.05rem; } .okc-site .program-navigation{ position:sticky; top:0; z-index:20; background:rgba(242,238,230,.96); margin:0 0 1.5rem; padding:.8rem 0; border-bottom:1px solid var(--color-ink); } .okc-site .program-list-header{ display:flex; justify-content:space-between; gap:2rem; margin-bottom:.75rem; } .okc-site .program-page-redesign .event-index{ margin-bottom:2rem; } .okc-site .program-page-redesign .event-index-link{ grid-template-columns:120px minmax(0,1fr) minmax(180px,300px) 30px; min-height:150px; } .okc-site .program-page-redesign .event-index-date strong{ font-size:clamp(3.7rem,6vw,6.2rem); } .okc-site .program-archive-link{ margin-top:5rem; padding-top:2rem; border-top:4px solid var(--color-ink); overflow:hidden; } .okc-site .program-archive-link .display-year{ display:block; color:var(--color-rust); margin-bottom:1rem; } .okc-site .centenary-page-hero-redesign{ border-bottom:0; padding-bottom:2rem; } .okc-site .centenary-page-hero-redesign .centenary-page-hero-grid{ grid-template-columns:minmax(0,1fr) minmax(260px,.42fr); align-items:end; } .okc-site .centenary-page-hero-redesign h1{ text-transform:uppercase; max-width:8ch; } .okc-site .centenary-page-mark{ align-self:end; } .okc-site .period-navigation{ position:sticky; top:0; z-index:25; background:rgba(242,238,230,.97); padding-top:0; border-top:1px solid var(--color-ink); border-bottom:1px solid var(--color-ink); } .okc-site .period-navigation ol{ border:0; } .okc-site .period-navigation a{ border:0; border-right:1px solid var(--rule); min-height:66px; } .okc-site .period-navigation li:last-child a{ border-right:0; } .okc-site .centenary-scroll-label{ width:min(1280px,calc(100% - 64px)); margin:clamp(4rem,7vw,6rem) auto 0; overflow:hidden; font-family:var(--font-display); font-size:clamp(5rem,15vw,13rem); line-height:.72; letter-spacing:-.085em; font-weight:700; color:var(--color-rust); white-space:nowrap; } .okc-site .centenary-exhibition{ padding-top:2rem; } .okc-site .centenary-exhibition .century-chapter{ grid-template-columns:minmax(230px,.58fr) minmax(0,1.42fr); gap:clamp(2.5rem,7vw,7rem); padding-block:clamp(4.5rem,9vw,8rem); border-top:3px solid var(--color-ink); } .okc-site .centenary-exhibition .century-chapter>.wp-block-group:first-child{ top:5.5rem; } .okc-site .centenary-exhibition .century-chapter>.wp-block-group:first-child>p:first-child{ font-family:var(--font-display); font-size:clamp(2.8rem,5vw,5rem); line-height:.8; font-weight:700; letter-spacing:-.06em; color:var(--color-rust); } .okc-site .centenary-exhibition .century-chapter h2{ font-size:clamp(2.6rem,5vw,4.8rem); line-height:.9; } .okc-site .centenary-exhibition .century-chapter>.wp-block-group:nth-child(2)>p:first-of-type{ font-size:clamp(1.15rem,1.7vw,1.35rem); line-height:1.45; } .okc-site .centenary-exhibition figure{ margin-block:2.5rem; } .okc-site .centenary-exhibition figure img{ width:100%; height:auto; } .okc-site .period-records{ margin-top:3rem; border-top:2px solid var(--color-rust); } .okc-site .period-records li{ display:grid; grid-template-columns:1fr auto; gap:1rem; } .okc-site .period-records li:after{ content:"↗"; font-family:var(--font-mono); color:var(--color-rust); } .okc-site .archive-page-redesign{ background:var(--color-paper); } .okc-site .archive-masthead{ padding-block:clamp(4rem,8vw,7rem); background:#171717; color:#F2EEE6; } .okc-site .archive-masthead .meta{ color:var(--color-gold); } .okc-site .archive-masthead h1{ margin:0 0 2rem; max-width:9ch; text-transform:uppercase; } .okc-site .archive-masthead-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.6fr); gap:clamp(2rem,7vw,7rem); align-items:end; border-top:1px solid rgba(242,238,230,.4); padding-top:1.2rem; } .okc-site .archive-lead{ font-size:clamp(1.3rem,2.3vw,2rem); line-height:1.25; max-width:40rem; } .okc-site .archive-entryways{ background:#171717; color:#F2EEE6; padding-bottom:clamp(3rem,6vw,5rem); } .okc-site .archive-entryways>.container{ border-top:1px solid rgba(242,238,230,.28); padding-top:1rem; } .okc-site .archive-entryways .taxonomy-grid{ padding-block:1.2rem 0; } .okc-site .archive-browser-section{ padding-top:3rem; } .okc-site .archive-guide{ margin-bottom:1.5rem; } .okc-site .archive-filters{ display:grid; grid-template-columns:minmax(220px,1.4fr) repeat(3,minmax(150px,.7fr)); gap:1rem; align-items:end; padding:1.2rem 0; border:0; border-top:2px solid var(--color-ink); border-bottom:1px solid var(--color-ink); } .okc-site .archive-filters label{ display:grid; gap:.35rem; font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; } .okc-site .archive-filters input, .okc-site .archive-filters select{ border-radius:0; background:transparent; border:1px solid var(--color-ink); } .okc-site .filter-actions{ display:flex; gap:.8rem; align-items:center; grid-column:1/-1; } .okc-site .archive-results>p.meta{ margin:1.25rem 0; color:var(--color-rust); } .okc-site .archive-catalog{ border-top:3px solid var(--color-ink); } .okc-site .archive-catalog-item{ border-bottom:1px solid var(--color-ink); } .okc-site .archive-catalog-link{ display:grid; grid-template-columns:minmax(170px,.55fr) minmax(0,1.35fr) minmax(160px,280px) 28px; gap:clamp(1rem,2.5vw,2.5rem); align-items:start; padding:1rem 0; color:var(--color-ink); text-decoration:none; } .okc-site .archive-catalog-meta{ display:grid; gap:.45rem; } .okc-site .archive-catalog-period{ font-family:var(--font-display); font-size:clamp(1.55rem,2.5vw,2.4rem); line-height:.9; font-weight:700; color:var(--color-rust); } .okc-site .archive-catalog-copy h2{ margin:0 0 .55rem; font-size:clamp(1.55rem,2.6vw,2.5rem); line-height:.95; } .okc-site .archive-catalog-copy p{ margin:0; max-width:60ch; font-size:.9rem; line-height:1.45; } .okc-site .archive-catalog-image{ height:130px; overflow:hidden; } .okc-site .archive-catalog-image img{ display:block; width:100%; height:100%; object-fit:cover; filter:grayscale(100%) contrast(1.06); } .okc-site .archive-catalog-arrow{ font-family:var(--font-mono); } .okc-site .archive-catalog-link:hover{ color:var(--color-rust); } .okc-site .archive-catalog-link:hover .archive-catalog-image img{ filter:grayscale(0) contrast(1.03); } .okc-site .archive-record-header{ border-top:4px solid var(--color-ink); padding-top:1rem; } .okc-site .archive-record-header h1{ text-transform:none; } .okc-site .archive-record-taxonomy{ border-top:1px solid var(--rule); padding-top:1rem; } @media(max-width:980px){ .okc-site .program-masthead, .okc-site .archive-masthead-grid{ grid-template-columns:1fr; } .okc-site .program-masthead-note{ grid-column:1; grid-row:auto; } .okc-site .archive-filters{ grid-template-columns:1fr 1fr; } .okc-site .archive-catalog-link{ grid-template-columns:150px 1fr 26px; } .okc-site .archive-catalog-image{ display:none; } .okc-site .centenary-exhibition .century-chapter{ grid-template-columns:1fr; } .okc-site .centenary-exhibition .century-chapter>.wp-block-group:first-child{ position:static; } } @media(max-width:650px){ .okc-site .program-page-redesign .event-index-link{ grid-template-columns:68px 1fr 20px; min-height:105px; } .okc-site .program-list-header{ flex-direction:column; gap:.25rem; } .okc-site .archive-filters{ grid-template-columns:1fr; } .okc-site .archive-catalog-link{ grid-template-columns:1fr 20px; gap:.6rem 1rem; } .okc-site .archive-catalog-meta{ grid-column:1/-1; } .okc-site .archive-catalog-copy{ grid-column:1/2; } .okc-site .archive-catalog-arrow{ grid-column:2/3; grid-row:2/3; } .okc-site .centenary-scroll-label{ width:calc(100% - 36px); font-size:21vw; } .okc-site .period-navigation{ top:0; } } .okc-site .projects-masthead{ padding-block:clamp(4rem,8vw,7rem); border-bottom:3px solid var(--color-ink); } .okc-site .projects-masthead h1{ margin:0 0 2rem; text-transform:uppercase; } .okc-site .projects-masthead-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.58fr); gap:clamp(2rem,7vw,7rem); align-items:end; border-top:1px solid var(--rule); padding-top:1rem; } .okc-site .projects-lead{ max-width:40rem; font-size:clamp(1.3rem,2.4vw,2rem); line-height:1.25; } .okc-site .projects-index-section{ padding-top:3rem; } .okc-site .project-index-featured{ margin-bottom:0; } .okc-site .project-index-centenary>a{ background:var(--color-rust); color:var(--color-paper); padding-inline:1rem; } .okc-site .project-index-centenary>a:hover{ color:var(--color-paper); } .okc-site .projects-reports{ background:#E7E0D5; } .okc-site .project-single-header{ display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.58fr); gap:clamp(2rem,7vw,7rem); align-items:end; padding-block:clamp(4rem,8vw,7rem) 2rem; border-bottom:3px solid var(--color-ink); } .okc-site .project-single-header h1{ margin-bottom:0; max-width:10ch; } .okc-site .project-single-lead{ font-size:clamp(1.2rem,2vw,1.6rem); line-height:1.35; } .okc-site .project-single-image{ padding-top:2rem; } .okc-site .project-single-image img{ width:100%; max-height:70vh; object-fit:cover; } .okc-site .project-single-layout{ display:grid; grid-template-columns:minmax(0,760px) minmax(220px,320px); gap:clamp(3rem,7vw,7rem); padding-block:clamp(3rem,6vw,5rem); } .okc-site .project-single-side{ border-top:2px solid var(--color-rust); padding-top:1rem; } .okc-site .space-hero{ position:relative; min-height:min(78vh,760px); overflow:hidden; background:#111; } .okc-site .space-hero-image{ position:absolute; inset:0; margin:0; } .okc-site .space-hero-image img{ width:100%; height:100%; object-fit:cover; filter:contrast(1.04) saturate(.9); } .okc-site .space-hero:after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.05) 55%); pointer-events:none; } .okc-site .space-hero-overlay{ position:relative; z-index:2; min-height:min(78vh,760px); display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:clamp(2rem,5vw,4rem); color:#fff; } .okc-site .space-hero-overlay .meta{ margin-bottom:1rem; } .okc-site .space-address{ font-family:var(--font-display); font-size:clamp(4rem,12vw,10rem); line-height:.72; letter-spacing:-.08em; font-weight:700; } .okc-site .space-intro{ display:grid; grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr); gap:clamp(2.5rem,7vw,7rem); } .okc-site .space-intro h1{ max-width:8ch; margin-bottom:0; } .okc-site .space-intro-copy{ max-width:720px; } .okc-site .space-intro-copy p:first-child{ font-size:clamp(1.2rem,2vw,1.5rem); line-height:1.4; } .okc-site .space-index-nav{ display:grid; grid-template-columns:repeat(6,1fr); border-top:3px solid var(--color-ink); border-bottom:1px solid var(--color-ink); } .okc-site .space-index-nav a{ padding:.8rem .5rem; text-align:center; text-decoration:none; font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; border-right:1px solid var(--rule); } .okc-site .space-index-nav a:last-child{ border-right:0; } .okc-site .space-index-nav a:hover{ background:var(--color-rust); color:var(--color-paper); } .okc-site .space-content-layout{ display:grid; grid-template-columns:minmax(0,1fr) minmax(230px,300px); gap:clamp(3rem,7vw,7rem); padding-block:4rem 6rem; } .okc-site .space-content{ max-width:900px; } .okc-site .space-content .info-section{ margin-bottom:5rem; } .okc-site .space-content .info-section>h2{ border-top:3px solid var(--color-ink); padding-top:1rem; max-width:12ch; } .okc-site .space-content .wp-block-gallery{ gap:.65rem; } .okc-site .space-content .wp-block-gallery img{ aspect-ratio:4/3; object-fit:cover; } .okc-site .space-contact{ position:sticky; top:2rem; align-self:start; border-top:3px solid var(--color-rust); padding-top:1rem; } .okc-site .space-contact address{ font-style:normal; margin-bottom:1rem; } .okc-site .radio-page-redesign{ background:#111; color:#f0ece4; } .okc-site .radio-page-redesign .site-footer{ border-top-color:#f0ece4; } .okc-site .radio-masthead{ padding-block:clamp(4rem,8vw,7rem); } .okc-site .radio-masthead-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(320px,.65fr); gap:clamp(3rem,8vw,8rem); align-items:end; } .okc-site .radio-masthead-copy .meta{ color:var(--color-rust); margin-bottom:1.5rem; } .okc-site .radio-page-redesign .radio-page-wordmark{ filter:invert(1); max-width:720px; } .okc-site .radio-lead{ max-width:34rem; font-size:clamp(1.2rem,2vw,1.6rem); line-height:1.4; } .okc-site .radio-external{ display:inline-block; margin-top:1.5rem; padding-top:.7rem; border-top:1px solid currentColor; font-family:var(--font-mono); font-size:.72rem; text-decoration:none; } .okc-site .radio-masthead figure{ margin:0; } .okc-site .radio-masthead figure img{ width:100%; aspect-ratio:1; object-fit:cover; filter:grayscale(100%) contrast(1.12); } .okc-site .radio-formats-section{ border-top:1px solid rgba(240,236,228,.35); border-bottom:1px solid rgba(240,236,228,.35); padding-block:1rem 2rem; } .okc-site .radio-format-index{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:2px solid #f0ece4; } .okc-site .radio-format-index span{ padding:1rem 0; border-bottom:1px solid rgba(240,236,228,.35); font-family:var(--font-display); font-size:clamp(1.25rem,2vw,1.8rem); } .okc-site .radio-content-layout{ display:grid; grid-template-columns:minmax(0,760px) minmax(220px,300px); gap:clamp(3rem,7vw,7rem); padding-block:4rem 6rem; } .okc-site .radio-content .info-section>h2{ border-top:2px solid rgba(240,236,228,.55); padding-top:1rem; } .okc-site .radio-content a{ color:inherit; } .okc-site .radio-side{ align-self:start; position:sticky; top:2rem; border-top:3px solid var(--color-rust); padding-top:1rem; } .okc-site .radio-button{ border-color:#f0ece4; color:#f0ece4; } .okc-site .radio-end{ overflow:hidden; padding-bottom:4rem; } .okc-site .radio-end-word{ font-family:var(--font-display); font-size:clamp(3.8rem,10vw,9rem); line-height:.78; letter-spacing:-.07em; color:var(--color-rust); white-space:nowrap; } .okc-site a, .okc-site button, .okc-site img{ transition:color .18s ease,background-color .18s ease,border-color .18s ease,opacity .18s ease,transform .18s ease,filter .18s ease; } .okc-site .text-link{ text-transform:uppercase; letter-spacing:.02em; font-family:var(--font-mono); } .okc-site ::selection{ background:var(--color-rust); color:var(--color-paper); } .okc-site .button{ border-radius:0; } .okc-site .page-numbers{ border-radius:0; } .okc-site .entry-content p{ max-width:72ch; } .okc-site .entry-content h2, .okc-site .entry-content h3{ scroll-margin-top:5rem; } @media(prefers-reduced-motion:reduce){ .okc-site a, .okc-site button, .okc-site img{ transition:none!important; } } @media(max-width:980px){ .okc-site .projects-masthead-grid, .okc-site .project-single-header, .okc-site .project-single-layout, .okc-site .space-intro, .okc-site .space-content-layout, .okc-site .radio-masthead-grid, .okc-site .radio-content-layout{ grid-template-columns:1fr; } .okc-site .space-contact, .okc-site .radio-side{ position:static; } .okc-site .space-index-nav{ grid-template-columns:repeat(3,1fr); } .okc-site .radio-format-index{ grid-template-columns:1fr 1fr; } } @media(max-width:600px){ .okc-site .space-hero, .okc-site .space-hero-overlay{ min-height:66vh; } .okc-site .space-address{ font-size:18vw; } .okc-site .space-index-nav{ grid-template-columns:1fr 1fr; } .okc-site .radio-format-index{ grid-template-columns:1fr; } .okc-site .radio-end-word{ font-size:18vw; } } .okc-site .site-header{ border-top:7px solid var(--color-rust); border-bottom:0; background:rgba(242,238,230,.98); } .okc-site .header-row{ min-height:74px; padding-block:.65rem; } .okc-site .brand{ width:235px; flex-basis:235px; } .okc-site .archive-link{ margin-left:.4rem; } .okc-site .house-strip{ border-top:1px solid var(--color-ink); border-bottom:1px solid var(--color-ink); } .okc-site .house-strip-inner{ display:grid; grid-template-columns:1.25fr 1fr auto auto; gap:1.25rem; align-items:center; min-height:34px; font-family:var(--font-mono); font-size:.62rem; line-height:1.2; letter-spacing:.035em; text-transform:uppercase; } .okc-site .house-strip-inner a{ text-decoration:none; } .okc-site .house-strip-inner a:hover{ color:var(--color-rust); } .okc-site .desktop-navigation .menu{ gap:1.25rem; font-size:.78rem; font-weight:600; } .okc-site .desktop-navigation .menu a{ position:relative; text-decoration:none!important; } .okc-site .desktop-navigation .menu>li>a:after{ content:""; position:absolute; left:0; right:100%; bottom:.25rem; height:2px; background:var(--color-rust); transition:right .18s ease; } .okc-site .desktop-navigation .menu>li>a:hover:after, .okc-site .desktop-navigation .current-menu-item>a:after{ right:0; } @media(max-width:1150px){ .okc-site .mobile-navigation>nav{ padding:0!important; background:var(--color-paper); } .okc-site .mobile-menu-head{ padding:1rem 1.25rem; border-bottom:2px solid var(--color-ink); color:var(--color-rust); } .okc-site .mobile-navigation .menu{ display:block; } .okc-site .mobile-navigation .menu>li>a{ display:flex!important; align-items:center; justify-content:space-between; min-height:62px; padding:.7rem 1.25rem!important; border-bottom:1px solid var(--color-ink)!important; font-family:var(--font-display); font-size:clamp(1.5rem,4vw,2.2rem); font-weight:700; line-height:.95; letter-spacing:-.035em; } .okc-site .mobile-navigation .menu>li>a:after{ content:"↗"; font-family:var(--font-mono); font-size:.72rem; color:var(--color-rust); } .okc-site .mobile-menu-utility{ display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--color-ink); } .okc-site .mobile-menu-utility a{ padding:1rem 1.25rem; font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; text-decoration:none; } .okc-site .mobile-menu-utility a:first-child{ border-right:1px solid var(--color-ink); } .okc-site .mobile-search{ margin:0; padding:1rem 1.25rem; } } .okc-site .site-footer{ padding-top:0; border-top:7px solid var(--color-rust); background:#111; color:#f0ece4; } .okc-site .footer-poster{ padding-block:clamp(3rem,7vw,6rem) 3rem; overflow:hidden; } .okc-site .footer-years{ margin:0 0 clamp(3rem,5vw,4.5rem); font-family:var(--font-display); font-size:clamp(5rem,15vw,13rem); line-height:.68; letter-spacing:-.085em; font-weight:700; color:var(--color-rust); white-space:nowrap; } .okc-site .footer-poster-grid{ display:grid; grid-template-columns:minmax(280px,1.25fr) minmax(180px,.6fr) minmax(180px,.6fr); gap:clamp(2rem,7vw,7rem); padding-top:1.25rem; border-top:1px solid rgba(240,236,228,.4); } .okc-site .footer-wordmark{ width:min(100%,360px); margin-bottom:1.5rem; } .okc-site .footer-navigation>.meta, .okc-site .footer-links>.meta{ color:var(--color-rust); margin-bottom:1rem; } .okc-site .footer-navigation .menu{ display:grid; gap:.2rem; } .okc-site .footer-navigation .menu a, .okc-site .footer-links a{ display:block; padding:.3rem 0; text-decoration:none; } .okc-site .footer-links{ display:block; } .okc-site .footer-bottom{ min-height:54px; align-items:center; padding-top:0; border-top:1px solid rgba(240,236,228,.35); } .okc-site .footer-bottom p{ margin:0; } .okc-site main>section+section:not(.archive-band):not(.home-century):not(.home-space):not(.home-radio){ position:relative; } .okc-site .section-heading{ border-top-width:3px; } .okc-site .page-heading>.meta:first-child, .okc-site .projects-masthead>.container>.meta:first-child, .okc-site .archive-masthead>.container>.meta:first-child{ color:var(--color-rust); } .okc-site .pagination{ padding-top:1rem; border-top:1px solid var(--rule); } .okc-site .page-numbers{ min-width:42px; min-height:42px; display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:.7rem; } .okc-site a:focus-visible, .okc-site button:focus-visible, .okc-site summary:focus-visible, .okc-site input:focus-visible, .okc-site select:focus-visible{ outline:3px solid var(--color-rust); outline-offset:3px; } .okc-site .site-footer a:focus-visible, .okc-site .radio-page-redesign a:focus-visible, .okc-site .archive-masthead a:focus-visible{ outline-color:var(--color-gold); } .okc-site button, .okc-site .button, .okc-site summary{ min-height:44px; } .okc-site img{ background:#ddd8cf; } @media(max-width:800px){ .okc-site .house-strip-inner{ grid-template-columns:1fr auto; min-height:38px; } .okc-site .house-strip-inner span:nth-child(2), .okc-site .house-strip-inner a:last-child{ display:none; } .okc-site .footer-poster-grid{ grid-template-columns:1fr 1fr; } .okc-site .footer-identity{ grid-column:1/-1; } } @media(max-width:560px){ .okc-site .house-strip-inner{ font-size:.58rem; } .okc-site .footer-years{ font-size:21vw; } .okc-site .footer-poster-grid{ grid-template-columns:1fr; } .okc-site .footer-identity{ grid-column:auto; } .okc-site .footer-bottom{ align-items:flex-start; padding-block:1rem; } } .okc-site .program-single-header{ display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.58fr); gap:clamp(2rem,7vw,7rem); align-items:end; padding-block:clamp(4rem,8vw,7rem) 2rem; border-bottom:3px solid var(--color-ink); } .okc-site .program-single-header h1{ margin-bottom:0; max-width:11ch; } .okc-site .program-single-lead{ font-size:clamp(1.2rem,2vw,1.6rem); line-height:1.35; } .okc-site .program-single-image{ padding-top:2rem; } .okc-site .program-single-image img{ width:100%; max-height:72vh; object-fit:cover; } .okc-site .program-single-layout{ display:grid; grid-template-columns:minmax(0,760px) minmax(220px,320px); gap:clamp(3rem,7vw,7rem); padding-block:clamp(3rem,6vw,5rem); } .okc-site .program-single-side{ align-self:start; position:sticky; top:2rem; border-top:3px solid var(--color-rust); padding-top:1rem; } .okc-site .program-related, .okc-site .project-related{ border-top:1px solid var(--rule-soft); } .okc-site .discovery-band{ margin-top:clamp(3rem,7vw,7rem); padding-block:clamp(3rem,6vw,5rem); background:#171717; color:#f2eee6; } .okc-site .discovery-head{ display:grid; grid-template-columns:180px 1fr; gap:2rem; align-items:end; margin-bottom:2rem; } .okc-site .discovery-head .meta{ color:var(--color-gold); } .okc-site .discovery-head h2{ margin:0; color:#f2eee6; } .okc-site .discovery-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid rgba(242,238,230,.55); } .okc-site .discovery-item{ position:relative; display:grid; grid-template-rows:auto auto 1fr; gap:.7rem; min-height:230px; padding:1.2rem 2.4rem 1.4rem 0; border-right:1px solid rgba(242,238,230,.3); border-bottom:1px solid rgba(242,238,230,.3); color:#f2eee6; text-decoration:none; } .okc-site .discovery-item:not(:first-child){ padding-left:1.2rem; } .okc-site .discovery-item:last-child{ border-right:0; } .okc-site .discovery-item .meta{ color:var(--color-gold); } .okc-site .discovery-item strong{ display:block; font-family:var(--font-display); font-size:clamp(1.8rem,3vw,3rem); line-height:.9; letter-spacing:-.045em; } .okc-site .discovery-item>span:last-of-type{ align-self:end; max-width:34ch; font-size:.9rem; line-height:1.45; } .okc-site .discovery-item i{ position:absolute; top:1.25rem; right:1rem; font-family:var(--font-mono); font-size:.8rem; font-style:normal; color:var(--color-rust); } .okc-site .discovery-item:hover{ color:#f2eee6; background:rgba(255,255,255,.035); } .okc-site .discovery-item:hover strong{ color:var(--color-rust); } .okc-site .archive-related{ margin-top:clamp(4rem,7vw,6rem); } .okc-site .archive-back{ margin-top:2rem; } @media(max-width:980px){ .okc-site .program-single-header, .okc-site .program-single-layout{ grid-template-columns:1fr; } .okc-site .program-single-side{ position:static; } .okc-site .discovery-grid{ grid-template-columns:1fr; } .okc-site .discovery-item, .okc-site .discovery-item:not(:first-child){ min-height:0; padding:1.1rem 2.5rem 1.2rem 0; border-right:0; } .okc-site .discovery-head{ grid-template-columns:1fr; gap:.3rem; } } html,body{max-width:100%;overflow-x:clip} .okc-site main,.okc-site section,.okc-site article,.okc-site .container>*{min-width:0} .okc-site img{max-width:100%} .okc-site .program-navigation, .okc-site .period-navigation ol, .okc-site .space-index-nav{ scrollbar-width:thin; } @media(max-width:760px){ .okc-site .program-navigation{ display:flex; overflow-x:auto; gap:0; padding:.55rem 0; white-space:nowrap; -webkit-overflow-scrolling:touch; } .okc-site .program-navigation .program-tab{ flex:0 0 auto; } .okc-site .period-navigation{ position:static; overflow:hidden; } .okc-site .period-navigation ol{ display:flex; overflow-x:auto; margin-bottom:2.5rem; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; } .okc-site .period-navigation li{ flex:0 0 auto; min-width:145px; scroll-snap-align:start; } .okc-site .period-navigation a{ min-height:58px; padding:.8rem .9rem; border-right:1px solid var(--rule); } .okc-site .space-index-nav{ display:flex; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; } .okc-site .space-index-nav a{ flex:0 0 auto; min-width:132px; border-bottom:0; } .okc-site .program-single-side, .okc-site .project-single-side, .okc-site .space-contact, .okc-site .radio-side{ position:static!important; } .okc-site .event-index-link{ overflow:hidden; } .okc-site .event-index-copy h3, .okc-site .project-index-title, .okc-site .archive-catalog-copy h2{ overflow-wrap:anywhere; } } @media(max-width:480px){ .okc-site .header-row{ min-height:64px; } .okc-site .mobile-navigation{ margin-left:auto; } .okc-site .archive-link{ display:none; } .okc-site .house-strip-inner a{ justify-self:end; } .okc-site .home-hero-links{ gap:.8rem 1.2rem; flex-wrap:wrap; } .okc-site .home-facts{ grid-template-columns:1fr; } .okc-site .home-facts>div{ border-right:0; border-bottom:1px solid var(--rule); } .okc-site .home-facts>div:last-child{ border-bottom:0; } .okc-site .archive-masthead h1, .okc-site .projects-masthead h1{ font-size:clamp(3rem,16vw,4.8rem); } .okc-site .discovery-item, .okc-site .discovery-item:not(:first-child){ padding-left:0; } } @supports(content-visibility:auto){ .okc-site .home-projects, .okc-site .home-space, .okc-site .home-radio, .okc-site .projects-reports, .okc-site .archive-browser-section{ content-visibility:auto; contain-intrinsic-size:1px 900px; } } .okc-site .home-archive-live{ margin-top:clamp(3rem,6vw,5rem); border-top:1px solid rgba(242,238,230,.42); } .okc-site .home-archive-live-head{ display:grid; grid-template-columns:160px minmax(0,1fr) auto; gap:1.5rem; align-items:end; padding:1rem 0; } .okc-site .home-archive-live-head .meta{ color:var(--color-gold); margin:0; } .okc-site .home-archive-live-head h3{ margin:0; color:#f2eee6; font-size:clamp(1.6rem,2.7vw,2.5rem); } .okc-site .home-archive-live-head>a{ font-family:var(--font-mono); font-size:.68rem; text-decoration:none; } .okc-site .home-archive-records{ border-top:2px solid #f2eee6; } .okc-site .home-archive-record{ border-bottom:1px solid rgba(242,238,230,.35); } .okc-site .home-archive-record>a{ display:grid; grid-template-columns:165px minmax(0,1fr) minmax(120px,220px) 26px; gap:clamp(1rem,2.3vw,2rem); align-items:center; min-height:112px; padding:.8rem 0; color:#f2eee6; text-decoration:none; } .okc-site .home-archive-record-meta{ display:grid; gap:.3rem; } .okc-site .home-archive-record-meta strong{ font-family:var(--font-display); font-size:clamp(1.3rem,2vw,1.9rem); line-height:.9; color:var(--color-gold); } .okc-site .home-archive-record-meta small{ font-family:var(--font-mono); font-size:.62rem; text-transform:uppercase; } .okc-site .home-archive-record-title{ font-family:var(--font-display); font-size:clamp(1.45rem,2.4vw,2.2rem); line-height:.95; font-weight:700; } .okc-site .home-archive-record-image{ display:block; height:88px; overflow:hidden; } .okc-site .home-archive-record-image img{ width:100%; height:100%; object-fit:cover; filter:grayscale(100%) contrast(1.08); } .okc-site .home-archive-record-arrow{ font-family:var(--font-mono); color:var(--color-rust); } .okc-site .home-archive-record>a:hover .home-archive-record-title{ color:var(--color-gold); } .okc-site .home-archive-record>a:hover img{ filter:grayscale(0) contrast(1.03); } @media(max-width:820px){ .okc-site .home-archive-live-head{ grid-template-columns:1fr auto; } .okc-site .home-archive-live-head .meta{ grid-column:1/-1; } .okc-site .home-archive-record>a{ grid-template-columns:125px 1fr 24px; } .okc-site .home-archive-record-image{ display:none; } } @media(max-width:560px){ .okc-site .home-archive-live-head{ grid-template-columns:1fr; gap:.45rem; } .okc-site .home-archive-record>a{ grid-template-columns:1fr 20px; gap:.6rem 1rem; align-items:start; padding:1rem 0; } .okc-site .home-archive-record-meta{ grid-column:1/-1; } .okc-site .home-archive-record-title{ grid-column:1/2; } .okc-site .home-archive-record-arrow{ grid-column:2/3; grid-row:2/3; } } .okc-site .home-hero-image, .okc-site .home-space figure, .okc-site .home-radio figure, .okc-site .event-index-image, .okc-site .archive-catalog-image, .okc-site .home-archive-record-image, .okc-site .project-single-image, .okc-site .program-single-image{ overflow:hidden; } .okc-site .home-hero-image img, .okc-site .home-space figure img, .okc-site .home-radio figure img, .okc-site .project-single-image img, .okc-site .program-single-image img{ transition:transform .45s cubic-bezier(.2,.7,.2,1),filter .3s ease; } @media(hover:hover) and (pointer:fine){ .okc-site .home-hero-image:hover img, .okc-site .home-space figure:hover img, .okc-site .home-radio figure:hover img{ transform:scale(1.018); } .okc-site .project-single-image:hover img, .okc-site .program-single-image:hover img{ transform:scale(1.008); } .okc-site .space-content .wp-block-gallery figure{ overflow:hidden; } .okc-site .space-content .wp-block-gallery figure img{ transition:transform .35s ease,filter .35s ease; } .okc-site .space-content .wp-block-gallery figure:hover img{ transform:scale(1.025); filter:contrast(1.04); } } @media(prefers-reduced-motion:no-preference){ @supports(animation-timeline:view()){ .okc-site .home-program .section-heading, .okc-site .home-today-grid, .okc-site .home-facts, .okc-site .home-century-intro, .okc-site .home-periods, .okc-site .archive-intro, .okc-site .home-archive-live, .okc-site .home-projects>.section-heading, .okc-site .home-projects>.section-intro, .okc-site .home-projects>.project-index, .okc-site .home-space-grid, .okc-site .home-radio-grid, .okc-site .projects-masthead-grid, .okc-site .archive-masthead-grid, .okc-site .program-masthead-note, .okc-site .centenary-exhibition .century-chapter{ animation-name:okc-enter; animation-duration:1ms; animation-fill-mode:both; animation-timing-function:linear; animation-timeline:view(); animation-range:entry 0% cover 24%; } .okc-site .home-hero-image, .okc-site .space-hero-image, .okc-site .radio-masthead figure{ animation-name:okc-image-enter; animation-duration:1ms; animation-fill-mode:both; animation-timing-function:linear; animation-timeline:view(); animation-range:entry 0% cover 28%; } } } @keyframes okc-enter{ from{opacity:.25;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} } @keyframes okc-image-enter{ from{opacity:.55;clip-path:inset(5% 0 0 0)} to{opacity:1;clip-path:inset(0)} } .okc-site .home-century, .okc-site .archive-band, .okc-site .home-space, .okc-site .home-radio{ border-top:7px solid var(--color-ink); } .okc-site .archive-band{ border-top-color:var(--color-gold); } .okc-site .home-space{ border-top-color:#55553f; } .okc-site .home-radio{ border-top-color:#111; } @media(hover:hover) and (pointer:fine){ .okc-site .event-index-link .event-index-arrow, .okc-site .project-index-item .project-index-arrow, .okc-site .archive-catalog-arrow, .okc-site .home-archive-record-arrow, .okc-site .discovery-item i{ transition:transform .18s ease; } .okc-site .event-index-link:hover .event-index-arrow, .okc-site .project-index-item>a:hover .project-index-arrow, .okc-site .archive-catalog-link:hover .archive-catalog-arrow, .okc-site .home-archive-record>a:hover .home-archive-record-arrow, .okc-site .discovery-item:hover i{ transform:translate(3px,-3px); } } @media(prefers-reduced-motion:reduce){ .okc-site *, .okc-site *:before, .okc-site *:after{ scroll-behavior:auto!important; animation-duration:.001ms!important; animation-iteration-count:1!important; } } .okc-site .about-masthead{ padding-block:clamp(4rem,8vw,7rem); border-bottom:3px solid var(--color-ink); } .okc-site .about-masthead h1{ margin:0 0 2rem; text-transform:uppercase; } .okc-site .about-masthead-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.58fr); gap:clamp(2rem,7vw,7rem); align-items:end; border-top:1px solid var(--rule); padding-top:1rem; } .okc-site .about-lead{ font-size:clamp(1.3rem,2.4vw,2rem); line-height:1.25; max-width:42rem; } .okc-site .about-local-nav{ display:flex; overflow-x:auto; white-space:nowrap; border-top:1px solid var(--color-ink); border-bottom:1px solid var(--color-ink); scrollbar-width:thin; } .okc-site .about-local-nav a{ flex:0 0 auto; padding:.8rem 1rem; border-right:1px solid var(--rule); font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; text-decoration:none; } .okc-site .about-local-nav a:hover{ background:var(--color-rust); color:var(--color-paper); } .okc-site .about-content-layout{ display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,300px); gap:clamp(3rem,7vw,7rem); padding-block:4rem 6rem; } .okc-site .about-content{ max-width:900px; } .okc-site .about-content .info-section{ margin-bottom:5rem; } .okc-site .about-content .info-section>h2{ border-top:3px solid var(--color-ink); padding-top:1rem; max-width:12ch; } .okc-site .about-content h3{ margin-top:2.5rem; } .okc-site .about-content details{ border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:1rem 0; } .okc-site .about-content details>summary{ font-family:var(--font-display); font-size:1.25rem; font-weight:700; } .okc-site .about-content details[open]>summary{ margin-bottom:1.5rem; color:var(--color-rust); } .okc-site .about-side{ position:sticky; top:2rem; align-self:start; border-top:3px solid var(--color-rust); padding-top:1rem; } .okc-site .about-side a{ display:block; padding:.65rem 0; border-bottom:1px solid var(--rule); font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; text-decoration:none; } .okc-site .search-masthead{ padding-block:clamp(4rem,8vw,7rem) 3rem; border-bottom:3px solid var(--color-ink); } .okc-site .search-masthead h1{ margin:0 0 2rem; max-width:12ch; } .okc-site .search-masthead-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.55fr); gap:clamp(2rem,7vw,7rem); align-items:end; border-top:1px solid var(--rule); padding-top:1rem; } .okc-site .search-masthead .search-form{ margin:0; } .okc-site .search-results-head{ margin-bottom:1rem; } .okc-site .search-index{ border-top:3px solid var(--color-ink); } .okc-site .search-index-item{ border-bottom:1px solid var(--color-ink); } .okc-site .search-index-item>a{ position:relative; display:grid; grid-template-columns:140px minmax(220px,.8fr) minmax(0,1.2fr) 24px; gap:clamp(1rem,2.5vw,2.5rem); align-items:start; padding:1rem 0; text-decoration:none; } .okc-site .search-index-item .meta{ color:var(--color-rust); } .okc-site .search-index-item strong{ font-family:var(--font-display); font-size:clamp(1.5rem,2.4vw,2.2rem); line-height:.95; } .okc-site .search-index-item> a > span:nth-of-type(2){ font-size:.9rem; line-height:1.45; } .okc-site .search-index-item i{ font-family:var(--font-mono); font-style:normal; color:var(--color-rust); } .okc-site .search-index-item>a:hover strong{ color:var(--color-rust); } .okc-site .search-empty{ max-width:900px; } .okc-site .error-masthead{ padding-block:clamp(4rem,9vw,8rem); overflow:hidden; } .okc-site .error-code{ font-family:var(--font-display); font-size:clamp(8rem,24vw,22rem); line-height:.62; letter-spacing:-.09em; font-weight:700; color:var(--color-rust); } .okc-site .error-masthead h1{ max-width:9ch; margin-top:1rem; } .okc-site .error-lead{ max-width:44rem; font-size:clamp(1.1rem,1.8vw,1.4rem); } .okc-site .error-search{ max-width:680px; padding-top:1rem; border-top:2px solid var(--color-ink); } .okc-site .error-search .search-form{ margin-bottom:0; } @media(max-width:900px){ .okc-site .about-masthead-grid, .okc-site .about-content-layout, .okc-site .search-masthead-grid{ grid-template-columns:1fr; } .okc-site .about-side{ position:static; } .okc-site .search-index-item>a{ grid-template-columns:110px 1fr 24px; } .okc-site .search-index-item> a > span:nth-of-type(2){ grid-column:2/3; } } @media(max-width:600px){ .okc-site .about-local-nav{ width:100%; } .okc-site .search-index-item>a{ grid-template-columns:1fr 20px; gap:.6rem 1rem; } .okc-site .search-index-item .meta{ grid-column:1/-1; } .okc-site .search-index-item strong{ grid-column:1/2; } .okc-site .search-index-item> a > span:nth-of-type(2){ grid-column:1/-1; } .okc-site .search-index-item i{ grid-column:2/3; grid-row:2/3; } .okc-site .error-code{ font-size:32vw; } } .okc-site .brand{ width:clamp(220px,18vw,280px); flex-basis:clamp(220px,18vw,280px); } .okc-site .brand-wordmark{ display:block!important; width:100%; height:auto; } .okc-site .brand-house{display:none!important} .okc-site .about-interface{ padding-block:clamp(2rem,4vw,3.5rem) clamp(5rem,8vw,7rem); } .okc-site .about-tabs{ display:flex; overflow-x:auto; border-top:3px solid var(--color-ink); border-bottom:1px solid var(--color-ink); white-space:nowrap; scrollbar-width:thin; } .okc-site .about-tabs button{ flex:1 0 auto; min-height:58px; padding:.8rem 1.15rem; border:0; border-right:1px solid var(--rule); background:transparent; color:var(--color-ink); font-family:var(--font-mono); font-size:.68rem; letter-spacing:.03em; text-transform:uppercase; } .okc-site .about-tabs button:last-child{border-right:0} .okc-site .about-tabs button:hover, .okc-site .about-tabs button.is-active, .okc-site .about-tabs button[aria-selected="true"]{ background:var(--color-rust); color:var(--color-paper); } .okc-site .about-deck{ display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,290px); gap:clamp(2.5rem,6vw,6rem); align-items:start; padding-top:2rem; } .okc-site .about-panel-deck{ max-width:none; min-height:470px; } .okc-site .about-panel-deck>.info-section{ margin:0; padding:clamp(1.5rem,3vw,2.5rem) 0 1rem; border-top:0; } .okc-site .about-panel-deck>.info-section[hidden]{ display:none!important; } .okc-site .about-panel-deck>.info-section.is-active{ display:block; animation:about-panel-in .24s ease both; } .okc-site .about-panel-deck>.info-section>h2{ margin:0 0 clamp(1.5rem,3vw,2.5rem); padding:0 0 .8rem; max-width:none; border-top:0; border-bottom:3px solid var(--color-ink); font-size:clamp(2.5rem,5vw,4.8rem); } .okc-site .about-panel-deck>.info-section>p:first-of-type{ font-size:clamp(1.1rem,1.6vw,1.28rem); line-height:1.5; } .okc-site .about-panel-deck ul{ columns:2; column-gap:3rem; padding-left:1.2rem; } .okc-site .about-panel-deck li{ break-inside:avoid; margin-bottom:.65rem; } .okc-site .about-panel-deck details{ max-height:min(62vh,620px); overflow:auto; padding-right:1rem; } .okc-site .about-deck-side{ position:sticky; top:2rem; padding-top:1rem; border-top:3px solid var(--color-rust); } .okc-site .about-deck-mark{ width:92px; margin:1.2rem 0 1.5rem; } .okc-site .about-house-mark{ display:block; width:100%; height:auto; } .okc-site .about-deck-side>p:not(.meta){ font-size:.88rem; line-height:1.5; } .okc-site .about-deck-links{ border-top:1px solid var(--rule); margin-top:1.5rem; } .okc-site .about-deck-links a{ display:block; padding:.65rem 0; border-bottom:1px solid var(--rule); font-family:var(--font-mono); font-size:.67rem; text-transform:uppercase; text-decoration:none; } .okc-site .about-deck-controls{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; margin-top:2rem; padding-top:1rem; border-top:1px solid var(--color-ink); } .okc-site .about-deck-controls button{ border:0; background:transparent; padding:.5rem 0; font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; } .okc-site .about-deck-controls button:first-child{text-align:left} .okc-site .about-deck-controls button:last-child{text-align:right} .okc-site .about-deck-controls button:disabled{opacity:.3;cursor:default} @keyframes about-panel-in{ from{opacity:.2;transform:translateX(18px)} to{opacity:1;transform:translateX(0)} } .okc-site .site-footer-signature{ position:relative; overflow:hidden; padding:0; border-top:7px solid var(--color-rust); background:#111; color:#f2eee6; isolation:isolate; } .okc-site .footer-signature-bg{ position:absolute; inset:0; z-index:-2; } .okc-site .footer-signature-bg:after{ content:""; position:absolute; inset:0; background:rgba(17,17,17,.89); } .okc-site .footer-history-image{ width:100%; height:100%; object-fit:cover; object-position:center 45%; filter:grayscale(100%) contrast(1.08); opacity:.42; } .okc-site .footer-signature-main{ display:grid; grid-template-columns:minmax(300px,1.15fr) minmax(280px,.8fr) minmax(190px,.55fr); gap:clamp(2.5rem,7vw,7rem); align-items:start; padding-block:clamp(3.5rem,7vw,6rem); } .okc-site .footer-signature-identity{ max-width:430px; } .okc-site .footer-signature-identity .footer-wordmark{ width:min(100%,390px); margin-bottom:1.5rem; } .okc-site .footer-bilingual{ font-family:var(--font-display); font-size:clamp(1rem,1.4vw,1.25rem); font-weight:600; line-height:1.25; } .okc-site .footer-bilingual span{ font-family:var(--font-sans); font-size:.78em; font-weight:400; opacity:.68; } .okc-site .footer-signature-identity>p:not(.footer-bilingual){ font-size:.82rem; line-height:1.5; margin-bottom:1rem; } .okc-site .footer-signature-links{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; border-top:1px solid rgba(242,238,230,.35); padding-top:1rem; } .okc-site .footer-signature-links .meta{ color:var(--color-rust); margin-bottom:.7rem; } .okc-site .footer-signature-links a{ display:block; padding:.35rem 0; font-size:.82rem; text-decoration:none; } .okc-site .footer-signature-years{ align-self:end; display:grid; gap:.15rem; justify-items:end; font-family:var(--font-display); font-size:clamp(3.2rem,6vw,6.5rem); font-weight:700; line-height:.7; letter-spacing:-.06em; color:var(--color-rust); } .okc-site .footer-signature-years i{ font-family:var(--font-mono); font-size:.16em; font-style:normal; color:#f2eee6; opacity:.55; } .okc-site .site-footer-signature .footer-bottom{ position:relative; min-height:52px; border-top:1px solid rgba(242,238,230,.25); color:rgba(242,238,230,.72); } @media(max-width:1150px){ .okc-site .brand{ width:210px; flex-basis:210px; } } @media(max-width:900px){ .okc-site .about-deck{ grid-template-columns:1fr; } .okc-site .about-deck-side{ position:static; display:grid; grid-template-columns:100px 1fr; gap:0 1.5rem; } .okc-site .about-deck-side>.meta, .okc-site .about-deck-links{ grid-column:1/-1; } .okc-site .footer-signature-main{ grid-template-columns:1fr 1fr; } .okc-site .footer-signature-identity{ grid-column:1/-1; } .okc-site .footer-signature-years{ align-self:start; } } @media(max-width:600px){ .okc-site .brand{ width:165px; flex-basis:165px; } .okc-site .brand .brand-wordmark{ display:block!important; } .okc-site .about-tabs button{ flex:0 0 auto; min-width:118px; } .okc-site .about-panel-deck{ min-height:0; } .okc-site .about-panel-deck ul{ columns:1; } .okc-site .about-deck-side{ grid-template-columns:78px 1fr; } .okc-site .footer-signature-main{ grid-template-columns:1fr; gap:2.5rem; } .okc-site .footer-signature-identity{ grid-column:auto; } .okc-site .footer-signature-links{ grid-template-columns:1fr 1fr; } .okc-site .footer-signature-years{ justify-items:start; grid-template-columns:auto auto auto; align-items:center; gap:.4rem; font-size:16vw; } .okc-site .footer-signature-years i{ font-size:.2em; } } @media(prefers-reduced-motion:reduce){ .okc-site .about-panel-deck>.info-section.is-active{ animation:none; } }