/*
Theme Name: 3Wallpapers Studio
Description: A wallpaper gallery for iPhone, iPad, and Mac.
Version: 1.2.0
Requires at least: 6.6
Requires PHP: 7.4
Author: 3Wallpapers
Text Domain: trois-studio
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/
:root {
  --paper: #fbfaf7;
  --blue: #183644;
  --cream: #fbf5e9;
  --ink: #262520;
  --muted: #615e55;
  --edge: #d9d7ce;
  --field: #e8edeb;
  --mat: #d1cfbf;
  --accent: #b14029;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --frame: min(1430px, 93%);
}
* { box-sizing: border-box; }
html { color-scheme: light; }
body { font: 400 1rem/1.55 var(--sans); color: var(--ink); background: var(--paper); margin: 0; }
button, input { font: inherit; }
a { color: inherit; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
a, input, summary, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
img { height: auto; max-width: 100%; }
figure, h1, h2, h3, p, ul, dl, fieldset { margin: 0; }
h1, h2, h3 { font-weight: 500; color: var(--ink); }
.frame { width: var(--frame); margin-inline: auto; }
.skip-link, .screen-reader-text, .visually-hidden {
  position: absolute; height: 1px; width: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link:focus { clip-path: none; white-space: normal; height: auto; width: auto; top: 10px; left: 12px; padding: 12px 18px; background: var(--ink); color: var(--paper); z-index: 20; }
.tw-icon { flex: none; vertical-align: middle; }
.site-head { background: var(--paper); }
.head-inner { min-height: 79px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.brand, .custom-logo-link { display: inline-flex; align-items: center; gap: 9px; width: max-content; max-width: 100%; text-decoration: none; }
.brand { gap: 3px; }
.brand span { font-size: 1.52rem; font-weight: 690; letter-spacing: -.073em; }
.brand svg { display: block; width: 34px; height: 34px; }
.custom-logo-link img { max-height: 42px; max-width: 170px; width: auto; }
.top-nav { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 40px); }
.top-nav a, .site-search summary { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; gap: 8px; text-decoration: none; font-size: .94rem; font-weight: 550; }
.top-nav a:hover, .top-nav a[aria-current], .site-search summary:hover { color: var(--accent); }
.site-search { position: relative; justify-self: end; z-index: 5; }
.site-search summary { cursor: pointer; list-style: none; }
.site-search summary::-webkit-details-marker { display: none; }
.site-search[open] summary { color: var(--accent); }
.search-sheet { position: absolute; right: 0; top: calc(100% + 8px); width: min(380px, 88vw); padding: 22px; border: 1px solid var(--edge); background: var(--paper); }
.search-form { display: flex; align-items: end; max-width: 470px; gap: 6px; }
.search-form label { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.search-form label span { font-size: .85rem; margin-bottom: 6px; }
.search-form input, .search-form button { min-height: 47px; border-radius: 3px; border: 1px solid var(--muted); }
.search-form input { padding: 9px 12px; width: 100%; color: var(--ink); background: white; }
.search-form button { width: 47px; flex: none; color: white; background: var(--ink); border-color: var(--ink); cursor: pointer; }
/* One spread: the broad print, its colophon, and the facing page in Prussian blue. */
.hero { display: grid; grid-template-columns: minmax(0,1.58fr) minmax(0,1fr); margin-block: 6px 0; }
.hero-copy { grid-area: 1/2; min-width: 0; padding: clamp(24px,4.5vw,75px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: clamp(20px,2.8vw,45px); background: var(--blue); color: var(--cream); border-radius: 0 5px 5px 0; }
.hero h1 { color: inherit; font: 400 clamp(3rem,5.65vw,6.1rem)/.95 var(--serif); letter-spacing: -.068em; }
.hero h1 em { color: #eed1a7; font-weight: 400; }
.hero-intro { margin-top: clamp(14px,1.55vw,25px); font-size: clamp(1rem,1.32vw,1.25rem); line-height: 1.52; max-width: 31ch; }
.section-note { color: var(--muted); font-size: .94rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 47px; background: var(--ink); color: white; border-radius: 3px; padding: 10px 18px; font-size: .94rem; font-weight: 600; text-decoration: none; }
.button:hover, .search-form button:hover { background: #413d35; }
.hero .button { background: var(--cream); color: var(--blue); }
.hero .button:hover { background: #eed1a7; }
.hero-art { min-width: 0; grid-area: 1/1; display: flex; flex-direction: column; background: #eeece3; border-radius: 5px 0 0 5px; overflow: hidden; }
.print-stage { position: relative; min-width: 0; width: 100%; aspect-ratio: 1.6; flex: 1 0 auto; background: #dbd9cc; }
.print-stage picture { display: contents; }
.print-stage img { position: absolute; inset: 0; display: block; margin: auto; width: 100%; height: 100%; object-fit: cover; object-position: 38% 44%; }
.cover-caption { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px clamp(12px,1.35vw,24px); }
.plate-caption { min-width: 0; display: flex; flex-direction: column; justify-content: center; min-height: 44px; text-decoration: none; line-height: 1.25; }
.plate-caption > span { font-size: clamp(.9rem,1.1vw,1.08rem); font-weight: 580; letter-spacing: -.022em; }
.plate-caption small { margin-top: 2px; font-size: .83rem; color: var(--muted); }
.plate-caption .tw-icon { width: 12px; height: 12px; margin-left: 2px; }
.plate-caption:hover > span, .text-link:hover { text-decoration: underline; }
.cover-preview { display: flex; align-items: center; padding: 0; border: 0; min-width: 0; gap: 2px; }
.cover-preview label { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 3px; color: var(--muted); cursor: pointer; }
.cover-preview label:hover { background: #e4e0d2; }
.cover-preview input:checked + label { color: var(--cream); background: var(--blue); }
.cover-preview input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }
.hero-art:has(#cover-iphone:checked) .print-stage img, .hero-art:has(#cover-ipad:checked) .print-stage img { width: auto; height: 87%; border-radius: 8px; border: 3px solid var(--ink); }
.hero-art:has(#cover-iphone:checked) .print-stage img { aspect-ratio: 1320 / 2868; }
.hero-art:has(#cover-ipad:checked) .print-stage img { aspect-ratio: 2064 / 2752; }
@supports not selector(:has(*)) { .cover-preview { display: none; } }
.gallery-section { padding-block: clamp(42px,4.8vw,80px); }
.topic-section { padding-bottom: 0; }
.studio-intro { margin-top: 8px; }
.topic-shelf { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(12px,1.55vw,24px); }
.topic-cover { display: block; min-width: 0; text-decoration: none; }
.topic-cover img { display: block; width: 100%; aspect-ratio: 8 / 5; object-fit: cover; border-radius: 3px; background: var(--field); }
.topic-cover h3 { font: 400 clamp(1.35rem,2vw,2rem)/1.05 var(--serif); letter-spacing: -.04em; margin: 11px 0 3px; }
.topic-cover span { color: var(--muted); font-size: .85rem; }
.topic-cover:hover h3, .topic-cover:focus-visible h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
@media (max-width: 680px) {
  .topic-shelf { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 21px; }
}
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: clamp(17px,1.8vw,30px); }
.section-heading h2, .format-layout h2, .archive-links h2, .empty-state h2, .source-note h2 { font: 400 clamp(2.15rem,3.7vw,3.85rem)/1.02 var(--serif); letter-spacing: -.055em; }
.text-link { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; text-decoration: none; font-size: .94rem; font-weight: 570; }
.works-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 34px clamp(14px,2vw,30px); }
.work-card { min-width: 0; }
.work-card a { display: block; text-decoration: none; }
.work-image { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; background: var(--field); }
.work-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .36s ease; }
.work-card a:hover .work-image img, .work-card a:focus-visible .work-image img { transform: scale(1.035); }
.work-card a:hover h3, .work-card a:hover h2 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.work-letter { display: grid; place-items: center; font: italic 400 clamp(3rem,6vw,6.5rem)/1 var(--serif); color: var(--accent); }
.work-info { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 13px 0 0; }
.work-info h2, .work-info h3 { font: 400 clamp(1.24rem,1.8vw,1.65rem)/1.12 var(--serif); letter-spacing: -.033em; overflow-wrap: anywhere; }
.work-info p { margin-top: 5px; color: var(--muted); font-size: .83rem; }
.work-info > .tw-icon { width: 16px; height: 16px; margin-top: 5px; }
.device-strip { background: var(--field); }
.format-layout { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); align-items: center; gap: 8%; padding-block: clamp(36px,4.5vw,72px); }
.format-layout p, .archive-links p { color: var(--muted); margin-top: 11px; max-width: 38ch; }
.device-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.device-list a { display: flex; flex-direction: column; align-items: flex-start; text-decoration: none; }
.device-list a > svg:first-child { width: 40px; height: 40px; color: var(--blue); stroke-width: 1.2; margin-bottom: 12px; }
.device-list a > svg:last-child { display: none; }
.device-list span { font-size: 1.22rem; font-weight: 570; line-height: 1.25; letter-spacing: -.04em; }
.device-list small { color: var(--muted); }
.device-list a:hover span { color: var(--accent); text-decoration: underline; }
.archive-band { background: #efe7d8; }
.archive-links { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 6%; align-items: start; padding-block: clamp(40px,4.8vw,80px); }
.category-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.category-links a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: .24em; }
.filters a { display: inline-flex; align-items: center; gap: 7px; border-radius: 3px; padding: 9px 15px; min-height: 44px; text-decoration: none; font-size: .94rem; }
.filters a:hover { background: var(--field); }
.historical-next { margin-top: 14px; }
.site-foot { background: var(--field); }
.foot-inner { display: grid; grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr); align-items: start; gap: 20px; padding-block: 34px; }
.foot-inner p { margin-top: 6px; font-size: .88rem; color: var(--muted); }
.foot-inner ul { margin: 0; padding: 0; list-style: none; }
.footer-service-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 18px; }
.footer-topics summary { width: max-content; max-width: 100%; margin-inline-start: auto; min-height: 44px; padding-block: 10px; cursor: pointer; font-size: .94rem; font-weight: 565; }
.footer-topic-links { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,145px),1fr)); gap: 0 12px; }
.footer-nav a { overflow-wrap: anywhere; }
.foot-inner nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: .9rem; }
.catalog-page .works-grid { margin-bottom: clamp(34px,4vw,64px); }
.catalog-page, .detail-page, .prose-page { padding-block: clamp(35px, 4.5vw, 70px) clamp(55px, 7vw, 100px); min-height: 60vh; }
.page-intro { margin-bottom: clamp(23px, 3.5vw, 50px); }
.page-intro h1, .detail-copy h1 { font: 400 clamp(2.8rem, 5.6vw, 6.2rem)/1.02 var(--serif); letter-spacing: -.06em; overflow-wrap: anywhere; text-wrap: balance; }
.page-intro > p:not(.crumb), .detail-intro { max-width: 58ch; margin-top: 18px; color: var(--muted); font-size: 1.08rem; }
.crumb { display: flex; align-items: baseline; gap: 10px; margin-bottom: 22px; color: var(--muted); font-size: .86rem; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 28px; }
.filters a[aria-current] { color: white; background: var(--ink); border-color: var(--ink); }
.empty-state { max-width: 570px; padding-block: 35px; }
.empty-state p { margin: 12px 0; }
.pagination, .page-links { margin-top: 32px; }
.nav-links { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.page-numbers { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; padding: 4px 9px; }
.page-numbers.current { border-radius: 4px; background: var(--ink); color: white; }
.detail-trail { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.detail-trail .crumb { margin-bottom: 0; }
.detail-jump { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: .91rem; font-weight: 560; }
#download-title { scroll-margin-top: 20px; }
.detail-layout { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); align-items: start; gap: clamp(30px, 5vw, 80px); }
.detail-art { display: grid; place-items: center; background: var(--field); border-radius: 3px; overflow: hidden; }
.detail-art:empty { display: none; }
.detail-art img { display: block; max-height: 70vh; width: 100%; object-fit: contain; }
.detail-copy .section-note { margin-bottom: 13px; }
.detail-copy h1 { font-size: clamp(2.5rem, 4.3vw, 4.8rem); }
.download-panel { margin-top: 25px; padding: 18px clamp(14px,2vw,25px); background: var(--field); border-radius: 4px; }
.download-heading { font-size: 1.08rem; font-weight: 620; margin: 0 0 7px; letter-spacing: -.025em; }
.download-list { list-style: none; padding: 0; }
.download-list a { background: var(--paper); border-radius: 3px; padding: 0 12px; display: flex; gap: 12px; align-items: center; min-height: 52px; text-decoration: none; }
.download-list li + li { margin-top: 4px; }
.download-list a:hover { color: var(--accent); background: var(--mat); }
.download-list span { font-weight: 550; }
.download-list small { color: var(--muted); margin-left: auto; }
.detail-copy .text-link { margin-top: 10px; }
.detail-notes { display: flex; flex-wrap: wrap; align-items: start; gap: 8%; padding-top: clamp(40px, 5vw, 80px); }
.detail-notes .prose { flex: 1 1 48%; min-width: 0; }
.source-note { flex: 1 1 40%; min-width: min(100%,260px); }
.source-note h2 { font-size: clamp(2rem,3vw,3rem); }
.detail-notes { max-width: 980px; }
.detail-notes .source-note:only-child { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: 14px; }
.detail-notes .source-note:only-child dl { margin: 0; }
.related-works { margin-top: clamp(36px,5vw,80px); padding-block-end: 0; border-top: 1px solid var(--edge); }
.source-note dl { margin-top: 16px; }
.source-note dl > div { display: grid; grid-template-columns: minmax(75px,.35fr) 1fr; gap: 12px; padding: 8px 0; }
.source-note dt { font-size: .87rem; color: var(--muted); }
.source-note dd { margin: 0; overflow-wrap: anywhere; }
.prose-page > article, .prose-page > #comments { max-width: 780px; margin-inline: auto; }
.post-byline, .post-tax { color: var(--muted); font-size: .9rem; }
.prose-page .page-intro .button { margin-top: 20px; }
.prose { line-height: 1.72; overflow-wrap: break-word; }
.prose > * + * { margin-top: 1.25em; }
.prose h2, .prose h3 { font-weight: 550; line-height: 1.2; letter-spacing: -.035em; }
.prose h2 { font-size: 1.85rem; margin-top: 1.4em; }
.prose h3 { font-size: 1.35rem; }
.prose figure, .prose iframe, .prose img, .prose .wp-caption { max-width: 100%; }
.prose img { height: auto; }
.prose table { display: block; max-width: 100%; overflow-x: auto; }
.prose pre { white-space: pre-wrap; }
.prose .aligncenter { display: block; margin-inline: auto; }
.prose .alignleft { float: left; margin: 0 1.2em 1em 0; }
.prose .alignright { float: right; margin: 0 0 1em 1.2em; }
.archive-post-foot { clear: both; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--edge); }
.archive-post-foot .text-link { margin-top: 10px; }
.comments-area { max-width: 780px; margin: 28px auto; }
.comments-area textarea, .comments-area input { max-width: 100%; }
@media (max-width: 960px) {
  .head-inner { gap: 15px; }
  .hero-copy { padding: clamp(24px,3vw,36px); }
  .hero h1 { font-size: clamp(2.75rem,5.9vw,4.3rem); }
  .cover-preview { gap: 0; }
  .format-layout { gap: 5%; }
}
@media (max-width: 760px) {
  :root { --frame: min(calc(100% - 32px), 680px); }
  .head-inner { grid-template-columns: 1fr auto; gap: 0; padding-top: 7px; }
  .top-nav { grid-column: 1/-1; grid-row: 2; justify-content: space-between; gap: 5px; }
  .site-search { grid-column: 2; grid-row: 1; }
  .brand span { font-size: 1.37rem; }
  .brand svg { width: 30px; height: 30px; }
  .hero { grid-template-columns: 1fr; margin-top: 4px; }
  .hero-art { grid-area: 1/1; border-radius: 4px 4px 0 0; }
  .hero-copy { grid-area: 2/1; border-radius: 0 0 4px 4px; gap: 15px; padding: 20px clamp(17px,4.5vw,28px); }
  .hero h1 { font-size: clamp(2.55rem,7.8vw,4.1rem); line-height: 1.03; letter-spacing: -.059em; }
  .hero h1 br { display: none; }
  .hero-intro { max-width: 43ch; margin-top: 8px; line-height: 1.42; }
  .hero .button { padding: 6px 13px; min-height: 44px; }
  .cover-caption { padding: 6px 12px; }
  .format-layout, .archive-links { grid-template-columns: 1fr; gap: 24px; }
  .device-list { gap: 13px; }
  .detail-layout { grid-template-columns: 1fr; gap: 23px; }
  .detail-copy { max-width: 600px; }
  .detail-art img { max-height: 52vh; }
}
@media (max-width: 620px) {
  .hero h1 br { display: inline; }
  .plate-caption .tw-icon { display: none; }
  .works-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 25px 13px; }
  .work-info { padding-top: 8px; gap: 4px; }
  .work-info > .tw-icon { display: none; }
  .work-info p { font-size: .82rem; }
  .gallery-section .works-grid > .work-card:first-child:nth-last-child(3) { grid-column: 1/-1; }
  .gallery-section .works-grid > .work-card:first-child:nth-last-child(3) .work-image { aspect-ratio: 1.58; }
  .section-heading { align-items: center; }
  .section-heading h2 { font-size: clamp(2rem,7.8vw,2.8rem); }
  .section-heading .text-link { font-size: .88rem; gap: 5px; flex-shrink: 0; }
  .foot-inner { grid-template-columns: 1fr; gap: 12px; }
  .footer-service-links { justify-content: flex-start; }
  .footer-topics summary { margin-inline-start: 0; }
  .filters { gap: 2px; }
  .filters a { padding-inline: 9px; }
  .filters a svg { width: 17px; }
}
@media (max-width: 365px) {
  .plate-caption > span { font-size: .88rem; }
  .cover-caption { padding-inline: 7px; }
  .hero h1 { font-size: 2.27rem; }
  .hero-intro { font-size: 1rem; }
  .category-links { gap: 2px 12px; }
}
/* The prints settle into place as they enter the viewport. Content remains visible
   throughout; the cover and its controls never wait for an animation. */
@keyframes print-arrival {
  from { transform: translateY(10px); opacity: .92; }
  to { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .works-grid .work-card, .device-list a { animation: print-arrival linear both; animation-timeline: view(); animation-range: entry 0% entry 65%; }
  }
  .button .tw-icon, .text-link .tw-icon { transition: transform .18s ease; }
  .button:hover .tw-icon, .text-link:hover .tw-icon { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}