/* Shelf archive — the `#sh-*` responsive rules. The shared chrome media queries (header/drawer/search/footer) ship in homepage.css; this file adds only the archive-body breakpoints. Enqueued on section-term archives. */ /* Load More is hidden by default; archive.js adds .is-shown only while more cards remain (see the #sh-more rules below). When the last cards are shown the class is removed and the button hides — matching the reference's `` gate. */ @media (max-width: 1024px) { :is(#sh-lead-meta, .twm-id--sh-lead-meta) { border-top: 0 !important; padding-top: 0 !important; } :is(#sh-lead-copy, .twm-id--sh-lead-copy) { border-bottom: 1px solid var(--twm-ink) !important; } :is(#sh-lead-note, .twm-id--sh-lead-note) { margin-bottom: 44px !important; } :is(#sh-tools, .twm-anchor--sh-tools) { flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 18px !important; } :is(#sh-chips, .twm-anchor--sh-chips) { display: none !important; } :is(#sh-sub-drop, .twm-anchor--sh-sub-drop) { display: block !important; flex: none !important; } :is(#sh-tools, .twm-anchor--sh-tools) > div:last-of-type { flex: none !important; margin-left: 0 !important; gap: 20px !important; flex-wrap: nowrap !important; } :is(#sh-hubs-row, .twm-anchor--sh-hubs-row) { grid-auto-columns: calc((100% - 36px) / 3) !important; gap: 0 18px !important; } :is(#sh-title-row, .twm-anchor--sh-title-row) { flex-direction: column !important; align-items: flex-start !important; gap: 22px !important; } :is(#sh-title-row, .twm-anchor--sh-title-row) p { max-width: 600px !important; } :is(#sh-head, .twm-anchor--sh-head), :is(#sh-lead, .twm-anchor--sh-lead), :is(#sh-grid-wrap, .twm-anchor--sh-grid-wrap), :is(#sh-more, .twm-anchor--sh-more), :is(#sh-hubs, .twm-anchor--sh-hubs) { padding-left: 24px !important; padding-right: 24px !important; max-width: none !important; } :is(#sh-head, .twm-anchor--sh-head) { padding-top: 150px !important; } :is(#sh-lead, .twm-anchor--sh-lead), :is(#sh-hubs, .twm-anchor--sh-hubs), :is(#sh-grid-wrap, .twm-anchor--sh-grid-wrap) { padding-top: 56px !important; } :is(#sh-title, .twm-anchor--sh-title) { font-size: 30px !important; line-height: 40px !important; letter-spacing: 1px !important; } :is(#sh-lead, .twm-anchor--sh-lead) { grid-template-columns: 1fr !important; gap: 28px !important; } :is(#sh-lead-img, .twm-id--sh-lead-img) { aspect-ratio: 4/5 !important; } :is(#sh-grid, .twm-anchor--sh-grid) { grid-template-columns: repeat(2, 1fr) !important; gap: 36px 20px !important; } } @media (max-width: 640px) { :is(#sh-tools, .twm-anchor--sh-tools) { gap: 16px !important; } :is(#sh-tools, .twm-anchor--sh-tools) > div:last-of-type { gap: 16px !important; } :is(#sh-tools, .twm-anchor--sh-tools) > div:last-of-type > span { display: none !important; } :is(#sh-hubs-head, .twm-anchor--sh-hubs-head) { flex-wrap: nowrap !important; gap: 16px !important; } :is(#sh-hubs-head, .twm-anchor--sh-hubs-head) h2 { font-size: 22px !important; line-height: 30px !important; letter-spacing: 0.5px !important; } :is(#sh-hubs-actions, .twm-anchor--sh-hubs-actions) { flex: none !important; gap: 10px !important; } :is(#sh-hubs-actions, .twm-anchor--sh-hubs-actions) > a { display: none !important; } :is(#sh-hubs-all, .twm-aid--sh-hubs-all .wp-block-button__link) { display: block !important; } :is(#sh-hubs-row, .twm-anchor--sh-hubs-row) { grid-auto-columns: calc((100% - 18px) / 2) !important; gap: 0 18px !important; } :is(#sh-title-row, .twm-anchor--sh-title-row) { flex-direction: column !important; align-items: flex-start !important; gap: 18px !important; } :is(#sh-title-row, .twm-anchor--sh-title-row) p { max-width: 600px !important; } :is(#sh-head, .twm-anchor--sh-head), :is(#sh-lead, .twm-anchor--sh-lead), :is(#sh-grid-wrap, .twm-anchor--sh-grid-wrap), :is(#sh-more, .twm-anchor--sh-more), :is(#sh-hubs, .twm-anchor--sh-hubs) { padding-left: 18px !important; padding-right: 18px !important; } :is(#sh-head, .twm-anchor--sh-head) { padding-top: 128px !important; } :is(#sh-lead, .twm-anchor--sh-lead), :is(#sh-hubs, .twm-anchor--sh-hubs), :is(#sh-grid-wrap, .twm-anchor--sh-grid-wrap) { padding-top: 44px !important; } :is(#sh-title, .twm-anchor--sh-title) { font-size: 22px !important; line-height: 30px !important; letter-spacing: 0.5px !important; } :is(#sh-lead-title, .twm-id--sh-lead-title) { font-size: 30px !important; line-height: 40px !important; letter-spacing: 1px !important; } :is(#sh-grid, .twm-anchor--sh-grid) { grid-template-columns: 1fr !important; gap: 32px !important; } :is(#sh-grid, .twm-anchor--sh-grid) [data-card-img] { aspect-ratio: 4/5 !important; } } /* ---- base geometry (core-block build) ---- */ :is(#sh-head, .twm-anchor--sh-head) { max-width: 1360px; box-sizing: border-box; margin: 0 auto; padding: 206px 80px 0; } .sh-crumb { display: flex; align-items: baseline; gap: 8px; font-family: 'proxima-nova', var(--font-sans); font-weight: 400; font-size: 12px; line-height: 16.8px; letter-spacing: 2px; text-transform: uppercase; color: var(--twm-secondary); } .sh-crumb :is(p, h1) { margin: 0; font: inherit; letter-spacing: inherit; color: inherit; } .sh-crumb a { color: var(--twm-secondary); text-decoration: none; } .sh-crumb .twm-slash { opacity: 0.6; } .sh-crumb .sh-crumb-here { color: var(--text-body); } :is(#sh-title-row, .twm-anchor--sh-title-row) { margin-top: 22px; display: flex; align-items: flex-end; justify-content: space-between; gap: 64px; } :is(#sh-title, .twm-anchor--sh-title) { margin: 0; max-width: 640px; font-family: var(--font-headline); font-weight: 400; font-size: 48px; line-height: 60px; letter-spacing: 1.5px; text-wrap: pretty; } .sh-dek { margin: 0; max-width: 420px; font-family: var(--font-soft); font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: 0.2px; color: var(--twm-secondary); text-wrap: pretty; } :is(#sh-lead, .twm-anchor--sh-lead) { max-width: 1360px; box-sizing: border-box; margin: 0 auto; padding: 80px 80px 0; display: grid; grid-template-columns: minmax(0,7fr) minmax(0,4fr); gap: 64px; align-items: end; } :is(#sh-lead, .twm-anchor--sh-lead) > .wp-block-query, :is(#sh-lead, .twm-anchor--sh-lead) .wp-block-post-template, :is(#sh-lead, .twm-anchor--sh-lead) li.wp-block-post { display: contents; } :is(#sh-lead-img, .twm-id--sh-lead-img) { position: relative; display: block; aspect-ratio: 3/4; background-color: var(--surface-band); } :is(#sh-lead-img, .twm-id--sh-lead-img) figure.wp-block-post-featured-image { position: absolute; inset: 0; margin: 0; } :is(#sh-lead-img, .twm-id--sh-lead-img) figure.wp-block-post-featured-image a { display: block; position: static; } :is(#sh-lead-img, .twm-id--sh-lead-img) img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; } :is(#sh-lead-copy, .twm-id--sh-lead-copy) { display: block; padding-bottom: 6px; } :is(#sh-lead-meta, .twm-id--sh-lead-meta) { display: flex; align-items: baseline; gap: 8px; border-top: 1px solid var(--twm-ink); padding-top: 16px; font-family: 'proxima-nova', var(--font-sans); font-weight: 400; font-size: 12px; line-height: 16.8px; letter-spacing: 2px; text-transform: uppercase; } :is(#sh-lead-meta, .twm-id--sh-lead-meta) :is(p, div, time, a) { margin: 0; font: inherit; letter-spacing: inherit; color: inherit; text-decoration: none; } :is(#sh-lead-meta, .twm-id--sh-lead-meta) .twm-slash { opacity: 0.6; } :is(#sh-lead-meta, .twm-id--sh-lead-meta) .wp-block-post-date { color: var(--twm-secondary); } :is(#sh-lead-title, .twm-id--sh-lead-title) { margin: 22px 0 0; font-family: var(--font-headline); font-weight: 400; font-size: 48px; line-height: 60px; letter-spacing: 1.5px; text-wrap: pretty; } :is(#sh-lead-title, .twm-id--sh-lead-title) a { color: var(--text-body); text-decoration: none; } :is(#sh-lead-note, .twm-id--sh-lead-note), :is(#sh-lead-note, .twm-id--sh-lead-note) p { margin: 0; font-family: var(--font-soft); font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: 0.2px; color: var(--twm-secondary); text-wrap: pretty; } :is(#sh-lead-note, .twm-id--sh-lead-note) { margin-top: 20px; } :is(#sh-hubs, .twm-anchor--sh-hubs) { max-width: 1360px; box-sizing: border-box; margin: 0 auto; padding: 80px 80px 0; } :is(#sh-hubs-head, .twm-anchor--sh-hubs-head) { display: flex; align-items: center; justify-content: space-between; gap: 24px; } :is(#sh-hubs-head, .twm-anchor--sh-hubs-head) h2 { margin: 0; font-family: var(--font-headline); font-style: italic; font-weight: 400; font-size: 30px; line-height: 40px; letter-spacing: 1px; } :is(#sh-hubs-actions, .twm-anchor--sh-hubs-actions) { display: flex; align-items: center; gap: 22px; margin-top: 0; } :is(#sh-hubs-nav, .twm-anchor--sh-hubs-nav) { display: flex; align-items: center; gap: 10px; margin: 0; } :is(#sh-hubs-nav, .twm-anchor--sh-hubs-nav) .wp-block-buttons, :is(#sh-hubs-nav, .twm-anchor--sh-hubs-nav) .wp-block-button { margin: 0; display: contents; } :is(#sh-hubs-actions, .twm-anchor--sh-hubs-actions) .sh-arrow .wp-block-button__link, .sh-arrow .wp-block-button__link { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 0; background: none; border: 1px solid var(--twm-hairline); color: var(--text-body); font-size: 0; line-height: 0; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; } /* Chevron is absolutely centred so it can't be shrunk to 0 by the link's flex layout (the button label text node is the other flex item). Matches the reference's 8×13 inline SVG. */ .sh-arrow .wp-block-button__link::before { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 13px; transform: translate(-50%, -50%); background: currentColor; -webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; } .sh-arrow--next .wp-block-button__link::before { transform: translate(-50%, -50%) scaleX(-1); } .sh-arrow .wp-block-button__link:hover { background: var(--twm-ink); border-color: var(--twm-ink); color: var(--twm-white); } :is(#sh-hubs-actions, .twm-anchor--sh-hubs-actions) .wp-block-buttons, :is(#sh-hubs-actions, .twm-anchor--sh-hubs-actions) .wp-block-button { margin: 0; } :is(#sh-hubs-actions, .twm-anchor--sh-hubs-actions) .wp-block-button__link { display: inline-block; border-radius: 0; background: none; font-family: 'proxima-nova', var(--font-sans); font-weight: 400; font-size: 12px; line-height: 16.8px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-body); text-decoration: none; border: 1px solid var(--twm-hairline); padding: 12px 22px; white-space: nowrap; transition: background .2s ease, border-color .2s ease, color .2s ease; } :is(#sh-hubs-actions, .twm-anchor--sh-hubs-actions) .wp-block-button__link:hover { background: var(--twm-ink); border-color: var(--twm-ink); color: var(--twm-white); } :is(#sh-hubs-row, .twm-anchor--sh-hubs-row) { margin-top: 28px; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 84px) / 4); gap: 0 28px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } a.sh-hub-card { display: block; scroll-snap-align: start; text-decoration: none; color: var(--text-body); margin: 0; padding: 0; font-size: inherit; transition: opacity .2s ease; } a.sh-hub-card [data-hub-img] { display: block; margin: 0; aspect-ratio: 4/5; background: var(--surface-band); } a.sh-hub-card .sh-hub-name { display: block; margin: 16px 0 0; font-family: var(--font-headline); font-weight: 400; font-size: 22px; line-height: 30px; letter-spacing: 0.5px; text-wrap: pretty; } a.sh-hub-card .sh-hub-count { display: block; margin: 8px 0 0; font-family: 'proxima-nova', var(--font-sans); font-weight: 400; font-size: 12px; line-height: 16.8px; letter-spacing: 2px; text-transform: uppercase; color: var(--twm-secondary); } :is(#sh-grid-wrap, .twm-anchor--sh-grid-wrap) { max-width: 1360px; box-sizing: border-box; margin: 0 auto; padding: 80px 80px 0; } :is(#sh-tools, .twm-anchor--sh-tools) { display: flex; align-items: center; gap: 24px; } :is(#sh-chips, .twm-anchor--sh-chips) { margin: 0; flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 26px; } :is(#sh-chips, .twm-anchor--sh-chips) a { font-family: 'proxima-nova', var(--font-sans); font-weight: 400; font-size: 12px; line-height: 16.8px; letter-spacing: 2px; text-transform: uppercase; color: var(--twm-secondary); text-decoration: none; cursor: pointer; border-bottom: 1px solid transparent; padding-bottom: 3px; } :is(#sh-chips, .twm-anchor--sh-chips) a { transition: color .2s ease; } :is(#sh-chips, .twm-anchor--sh-chips) a:hover { color: rgb(153,153,153); } :is(#sh-chips, .twm-anchor--sh-chips) a.is-active { color: var(--text-body); border-bottom-color: var(--twm-ink); } .sh-right { display: flex; align-items: center; gap: 22px; margin-left: auto; } .sh-drop { position: relative; margin: 0; } .sh-drop-toggle, .sh-drop-toggle p { display: flex; align-items: center; gap: 10px; margin: 0; font-family: 'proxima-nova', var(--font-sans); font-weight: 400; font-size: 12px; line-height: 16.8px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-body); text-decoration: none; cursor: pointer; white-space: nowrap; } .sh-drop-toggle p { max-width: 200px; overflow: hidden; text-overflow: ellipsis; } .sh-drop-toggle p::after { content: ""; flex: none; display: block; width: 9px; height: 6px; background: currentColor; -webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; } .sh-panel { display: none; position: absolute; top: calc(100% + 14px); z-index: 15; width: 260px; max-width: calc(100vw - 36px); max-height: min(56vh, 340px); overflow-y: auto; background: var(--twm-white); border: 1px solid var(--twm-hairline); padding: 6px 0; margin: 0; } .sh-panel.is-open { display: block; } .sh-panel--left { left: 0; right: auto; } .sh-panel--right { left: auto; right: 0; } .sh-panel a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 18px; font-family: 'proxima-nova', var(--font-sans); font-weight: 400; font-size: 12px; line-height: 16.8px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; color: var(--twm-secondary); } .sh-panel a.is-active, .sh-panel a:first-child { color: var(--text-body); } .sh-panel .sh-place-count { color: var(--twm-secondary); } .sh-panel-search { padding: 10px 18px 12px; border-bottom: 1px solid var(--twm-hairline); } .sh-panel-search form.wp-block-search { margin: 0; display: flex; } .sh-panel-search .wp-block-search__inside-wrapper { flex: 1; border: 0; padding: 0; } .sh-panel-search input.wp-block-search__input { width: 100%; box-sizing: border-box; border: 0; outline: none; background: transparent; padding: 0; font-family: var(--font-soft); font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: 0.2px; color: var(--text-body); } .sh-panel p { margin: 0; } .sh-count, .sh-count p { margin: 0; font-family: 'proxima-nova', var(--font-sans); font-weight: 400; font-size: 12px; line-height: 16.8px; letter-spacing: 2px; text-transform: uppercase; color: var(--twm-secondary); white-space: nowrap; } :is(#sh-sub-drop, .twm-anchor--sh-sub-drop) { display: none; position: relative; } :is(#sh-grid, .twm-anchor--sh-grid) { margin-top: 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px 28px; } :is(#sh-grid, .twm-anchor--sh-grid) > .wp-block-query, :is(#sh-grid, .twm-anchor--sh-grid) .wp-block-post-template { display: contents; } :is(#sh-grid, .twm-anchor--sh-grid) li.wp-block-post { display: block; list-style: none; margin: 0; padding: 0; } :is(#sh-grid, .twm-anchor--sh-grid) li.wp-block-post > .sh-card { display: block; } .sh-card-media { position: relative; display: block; aspect-ratio: 2/3; background: var(--surface-band); } .sh-card-media figure.wp-block-post-featured-image { position: absolute; inset: 0; margin: 0; } .sh-card-media figure.wp-block-post-featured-image a { display: block; position: static; } .sh-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; } .sh-card-kicker { display: flex; align-items: baseline; gap: 8px; margin-top: 18px; font-family: 'proxima-nova', var(--font-sans); font-weight: 400; font-size: 12px; line-height: 16.8px; letter-spacing: 2px; text-transform: uppercase; } .sh-card-kicker :is(p, div, time, a) { margin: 0; font: inherit; letter-spacing: inherit; color: inherit; text-decoration: none; } .sh-card-kicker .twm-slash { opacity: 0.6; } .sh-card-kicker .wp-block-post-date { color: var(--twm-secondary); } .sh-card-geo { display: none; } :is(#sh-grid, .twm-anchor--sh-grid) h3.wp-block-post-title { margin: 12px 0 0; font-family: var(--font-headline); font-weight: 400; font-size: 22px; line-height: 30px; letter-spacing: 0.5px; text-wrap: pretty; } :is(#sh-grid, .twm-anchor--sh-grid) h3.wp-block-post-title a { color: var(--text-body); text-decoration: none; } :is(#sh-more, .twm-anchor--sh-more) { width: min(1360px, 100vw); box-sizing: border-box; margin: 0 auto; padding: 48px 80px 0; display: none; justify-content: center; } :is(#sh-more, .twm-anchor--sh-more).is-shown { display: flex; } :is(#sh-more, .twm-anchor--sh-more) .wp-block-button { margin: 0; } :is(#sh-more, .twm-anchor--sh-more) .wp-block-button__link { display: inline-block; border-radius: 0; background: none; font-family: 'proxima-nova', var(--font-sans); font-weight: 400; font-size: 12px; line-height: 16.8px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-body); text-decoration: none; border: 1px solid var(--twm-hairline); padding: 13px 26px; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; } :is(#sh-more, .twm-anchor--sh-more) .wp-block-button__link:hover { background: var(--twm-ink); border-color: var(--twm-ink); color: var(--twm-white); } /* mobile sub-filter dropdown (replaces the chip row ≤1024) + the rail's mobile View All (≤640) */ :is(#sh-sub-drop, .twm-anchor--sh-sub-drop) { display: none; } .sh-drop--sub .sh-drop-toggle p { max-width: 150px; } .sh-drop--sub .sh-panel a { display: block; } .sh-drop--sub .sh-panel .wp-block-tag-cloud { margin: 0; } /* Mobile-only "View All Collections" (matches the reference #sh-hubs-all). Hidden on desktop — !important beats core's .wp-block-buttons.is-layout-flex; the ≤1024 query re-shows it. This is why the desktop shelf shows exactly one View All (the one in #sh-hubs-actions). */ .twm-aid--sh-hubs-all { display: none !important; margin: 0; } .twm-aid--sh-hubs-all .wp-block-button { margin: 0; width: 100%; } :is(#sh-hubs-all, .twm-aid--sh-hubs-all .wp-block-button__link) { display: block; margin-top: 24px; text-align: center; font-family: 'proxima-nova', var(--font-sans); font-weight: 400; font-size: 12px; line-height: 16.8px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-body); text-decoration: none; background: none; border: 1px solid var(--twm-hairline); border-radius: 0; padding: 14px 22px; transition: background .2s ease, border-color .2s ease, color .2s ease; } :is(#sh-hubs-all, .twm-aid--sh-hubs-all .wp-block-button__link):hover { background: var(--twm-ink); border-color: var(--twm-ink); color: var(--twm-white); } @media (max-width: 1024px) { :is(#sh-chips, .twm-anchor--sh-chips) { display: none !important; } :is(#sh-sub-drop, .twm-anchor--sh-sub-drop) { display: block !important; flex: none !important; } } @media (max-width: 640px) { :is(#sh-hubs-actions, .twm-anchor--sh-hubs-actions) > .sh-viewall { display: none !important; } .twm-aid--sh-hubs-all { display: block !important; } }