/* ===== Ink & Archive — shared design system ===== */

@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&display=swap');

:root{
  --bg: #ECE7E4;
  --card: #FFFFFF;
  --heading: #173F35;
  --heading-dark: #102F28;
  --text: #23242A;
  --muted: #6B6A66;
  --border: #D9D3CC;
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.55;
}

h1, h2, h3, .serif{
  font-family: 'Libre Caslon Display', 'Libre Caslon Text', serif;
  font-weight: 400;
  margin: 0;
  color: var(--text);
}

a{ color: var(--heading); }

/* ---------- shared editorial typography hierarchy ---------- */
/* One canonical treatment for section-level labels and titles across the site. */
.section-eyebrow{
  margin: 0 0 8px;
  color: var(--muted);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(0.68rem, 0.62vw, 0.76rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.section-title{
  margin: 0;
  color: var(--heading);
  font-family: 'Libre Caslon Display', 'Libre Caslon Text', serif;
  font-size: clamp(1.65rem, 2.15vw, 2.35rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.018em;
}

@media (max-width: 700px){
  .section-eyebrow{
    font-size: 0.66rem;
    letter-spacing: 0.145em;
  }
  .section-title{
    font-size: clamp(1.5rem, 7vw, 1.9rem);
  }
}

.wrap{
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- nav ---------- */

nav.site-nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
}

.logo{
  font-family: 'Libre Caslon Display', serif;
  font-size: 1.5rem;
  color: var(--heading);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.nav-links{
  display: flex;
  gap: clamp(24px, 1.7vw, 42px);
  font-size: clamp(0.95rem, 0.72vw, 1.12rem);
}

.nav-links a{
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.nav-links a:hover{ border-bottom-color: var(--text); }


/* ---------- large-screen masthead ---------- */
@media (min-width: 1600px){
  nav.site-nav{
    width: min(88vw, 1900px);
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

/* ---------- buttons / inputs ---------- */

.field{
  font-family: inherit;
  font-size: 0.95rem;
  padding: 12px 16px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 3px;
}

.field:focus{
  outline: none;
  border-color: var(--heading);
}

.btn{
  font-family: inherit;
  font-size: 0.95rem;
  padding: 12px 20px;
  background: var(--heading);
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.btn:hover{ background: var(--heading-dark); }

/* ---------- footer ---------- */

footer{
  border-top: 1px solid var(--border);
  padding: 30px 0 50px;
  margin-top: 60px;
  font-size: 0.88rem;
  color: var(--muted);
}


/* ---------- responsive foundations ---------- */
html{ -webkit-text-size-adjust: 100%; }
body{ overflow-x: hidden; }
img{ max-width: 100%; }

.field,
.btn{
  min-height: 44px;
}

@media (max-width: 900px){
  .wrap{
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 640px){
  .wrap{
    padding-left: 16px;
    padding-right: 16px;
  }

  nav.site-nav{
    flex-wrap: wrap;
    gap: 14px;
    padding: 18px 0 14px;
  }

  .logo{
    font-size: 1.55rem;
    line-height: 1.1;
  }

  .nav-links{
    width: 100%;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.88rem;
  }

  .nav-links a{
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 4px 0;
  }

  .field,
  .btn{
    width: 100%;
    font-size: 16px; /* prevents iOS zoom on focus */
  }

  footer{
    margin-top: 36px;
    padding: 24px 0 36px;
    font-size: 0.8rem;
  }
}

@media (max-width: 380px){
  .wrap{
    padding-left: 13px;
    padding-right: 13px;
  }

  .nav-links{
    font-size: 0.82rem;
  }
}


/* ===== V2 navigation and discovery ===== */

.logo{
  font-size: clamp(1.9rem, 1.65vw, 2.65rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
}

.nav-toggle{
  display: none;
  width: 44px;
  height: 44px;
  padding: 9px;
  background: transparent;
  border: 0;
  color: var(--text);
  cursor: pointer;
}

.nav-toggle span{
  display: block;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  margin: 6px 0;
  transition: transform 160ms ease, opacity 160ms ease;
}

.nav-open .nav-toggle span:nth-child(1){
  transform: translateY(7.5px) rotate(45deg);
}
.nav-open .nav-toggle span:nth-child(2){
  opacity: 0;
}
.nav-open .nav-toggle span:nth-child(3){
  transform: translateY(-7.5px) rotate(-45deg);
}

.inline-link{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}

.inline-link:hover{
  color: var(--heading);
  border-bottom-color: var(--heading);
}

@media (max-width: 700px){
  nav.site-nav{
    position: relative;
    flex-wrap: nowrap;
    gap: 12px;
    padding: 17px 0;
  }

  .nav-toggle{
    display: block;
    margin-left: auto;
    flex: 0 0 auto;
  }

  .nav-links{
    position: absolute;
    z-index: 50;
    top: calc(100% + 1px);
    left: -16px;
    right: -16px;
    display: none;
    width: auto;
    padding: 10px 16px 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 20px rgba(35,36,42,0.06);
    flex-direction: column;
    gap: 0;
    font-size: 0.98rem;
  }

  .nav-open .nav-links{
    display: flex;
  }

  .nav-links a{
    width: 100%;
    min-height: 46px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
  }

  .nav-links a:last-child{
    border-bottom: 0;
  }

  .logo{
    font-size: 1.58rem;
  }
}

@media (max-width: 380px){
  .nav-links{
    left: -13px;
    right: -13px;
    padding-left: 13px;
    padding-right: 13px;
  }
}


/* ===== illustrated archive footer ===== */
.archive-footer{
  --footer-green: var(--heading-dark, #102F28);
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: clamp(54px, 6vw, 100px);
  padding: 0;
  border-top: 0;
  color: #f7f0e5;
  background: transparent;
  font-size: 1rem;
}

.archive-footer__main{
  position: relative;
  width: 100%;
  min-height: 310px;
  padding: clamp(42px, 4.5vw, 74px) max(5vw, 28px) clamp(50px, 5vw, 80px);
  background: var(--footer-green);
  display: grid;
  grid-template-columns: minmax(240px, 1.25fr) minmax(130px, .55fr) minmax(130px, .55fr) minmax(250px, .95fr) minmax(260px, 1fr);
  gap: clamp(28px, 3vw, 62px);
  align-items: start;
  overflow: visible;
}

.archive-footer__brand,
.archive-footer__nav,
.archive-footer__quote,
.archive-footer__art{
  min-width: 0;
}

.archive-footer__logo{
  display: inline-block;
  color: #fffaf1;
  font-family: 'Libre Caslon Display', 'Libre Caslon Text', serif;
  font-size: clamp(2rem, 2.2vw, 3.15rem);
  line-height: .98;
  text-decoration: none;
  letter-spacing: -0.035em;
}

.archive-footer__tagline{
  margin: 18px 0 0;
  color: #fffaf1;
  font-family: 'Libre Caslon Text', serif;
  font-style: italic;
  font-size: clamp(1.05rem, 1.2vw, 1.45rem);
  line-height: 1.35;
}

.archive-footer__manifesto{
  margin: clamp(30px, 3.2vw, 52px) 0 0;
  color: rgba(255,250,241,.9);
  font-size: .9rem;
  line-height: 1.65;
}

.archive-footer__nav{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.archive-footer__nav h3{
  margin: 0 0 12px;
  color: #fffaf1;
  font-family: 'Libre Caslon Display', serif;
  font-size: clamp(1.2rem, 1.2vw, 1.55rem);
  font-weight: 400;
}

.archive-footer__nav a{
  width: fit-content;
  color: rgba(255,250,241,.9);
  text-decoration: none;
  font-size: .92rem;
  line-height: 1.45;
  border-bottom: 1px solid transparent;
}

.archive-footer__nav a:hover{
  color: #fff;
  border-bottom-color: rgba(255,255,255,.65);
}

.archive-footer__quote{
  margin: 0;
  padding-left: clamp(20px, 2vw, 34px);
  border-left: 1px solid rgba(255,250,241,.35);
  color: #fffaf1;
}

.archive-footer__quote p{
  margin: 0 0 16px;
  font-family: 'Libre Caslon Text', serif;
  font-style: italic;
  font-size: clamp(1.05rem, 1.25vw, 1.5rem);
  line-height: 1.35;
}

.archive-footer__quote cite{
  font-style: normal;
  color: rgba(255,250,241,.72);
  font-size: .78rem;
}

.archive-footer__art{
  position: relative;
  align-self: end;
  justify-self: end;
  width: min(100%, 560px);
  margin-bottom: clamp(-100px, -5.5vw, -66px);
  overflow: hidden;
  isolation: isolate;
}

.archive-footer__art img{
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

/* the source crop contains old mockup text in its upper-left corner; hide it cleanly */
.archive-footer__art-mask{
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 45%;
  height: 43%;
  background: var(--footer-green);
  pointer-events: none;
}

.archive-footer__bottom{
  width: 100%;
  min-height: 112px;
  padding: 48px max(5vw, 28px) 28px;
  background: var(--bg);
  color: var(--muted);
}

.archive-footer__bottom p{
  width: min(90vw, 1600px);
  margin: 0 auto;
  font-size: .8rem;
}

@media (min-width: 1900px){
  .archive-footer__main{
    padding-left: 6vw;
    padding-right: 6vw;
    grid-template-columns: minmax(300px, 1.35fr) minmax(160px, .55fr) minmax(160px, .55fr) minmax(300px, .95fr) minmax(330px, 1fr);
  }

  .archive-footer__art{
    width: min(100%, 720px);
  }
}

@media (max-width: 1250px){
  .archive-footer__main{
    grid-template-columns: minmax(260px, 1.25fr) minmax(150px, .65fr) minmax(150px, .65fr) minmax(260px, 1fr);
    padding-bottom: 64px;
  }

  .archive-footer__art{
    grid-column: 4;
    width: min(100%, 460px);
    margin-top: 12px;
    margin-bottom: -76px;
  }

  .archive-footer__quote{
    grid-column: 4;
  }
}

@media (max-width: 920px){
  .archive-footer__main{
    grid-template-columns: 1.2fr .8fr .8fr;
    gap: 34px 28px;
    padding-left: 28px;
    padding-right: 28px;
  }

  .archive-footer__quote{
    grid-column: 1 / 3;
    grid-row: 2;
  }

  .archive-footer__art{
    grid-column: 3;
    grid-row: 2;
    width: min(100%, 380px);
    margin-top: 0;
    margin-bottom: -72px;
  }
}

@media (max-width: 700px){
  .archive-footer{
    margin-top: 48px;
  }

  .archive-footer__main{
    grid-template-columns: 1fr 1fr;
    gap: 36px 24px;
    padding: 40px 20px 30px;
  }

  .archive-footer__brand{
    grid-column: 1 / -1;
  }

  .archive-footer__manifesto{
    margin-top: 24px;
  }

  .archive-footer__quote{
    grid-column: 1 / -1;
    grid-row: auto;
    padding-left: 0;
    padding-top: 22px;
    border-left: 0;
    border-top: 1px solid rgba(255,250,241,.28);
  }

  .archive-footer__art{
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: end;
    width: min(88vw, 400px);
    margin-top: -6px;
    margin-bottom: -72px;
  }

  .archive-footer__bottom{
    min-height: 120px;
    padding: 76px 20px 24px;
  }

  .archive-footer__bottom p{
    width: 100%;
  }
}

@media (max-width: 440px){
  .archive-footer__main{
    grid-template-columns: 1fr;
    gap: 30px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .archive-footer__brand,
  .archive-footer__nav,
  .archive-footer__quote,
  .archive-footer__art{
    grid-column: 1;
  }

  .archive-footer__nav{
    gap: 8px;
  }

  .archive-footer__nav h3{
    margin-bottom: 6px;
  }

  .archive-footer__art{
    width: min(92vw, 360px);
    justify-self: center;
  }

  .archive-footer__bottom{
    padding-left: 16px;
    padding-right: 16px;
  }
}


/* ===== footer refinement: artist strip, prominent cat, socials ===== */

.archive-footer__artists{
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.archive-footer__artists-inner{
  width: min(88vw, 1900px);
  margin: 0 auto;
  padding: 18px 0 20px;
}

.archive-footer__artists-label{
  display: block;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: .67rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.archive-footer__artist-links{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 36px);
  min-width: 0;
}

.archive-footer__artist-links a{
  color: var(--text);
  text-decoration: none;
  font-family: 'Libre Caslon Text', serif;
  font-size: clamp(.9rem, .9vw, 1.12rem);
  white-space: nowrap;
}

.archive-footer__artist-links a:hover{
  color: var(--heading);
}

.archive-footer__artist-more{
  margin-left: auto;
}

/* Let the illustration behave like the visual anchor in the reference. */
.archive-footer__art{
  width: clamp(520px, 31vw, 780px) !important;
  max-width: none !important;
  margin-left: clamp(-120px, -5vw, -48px);
  margin-bottom: clamp(-112px, -5.8vw, -72px) !important;
  overflow: visible !important;
  z-index: 3;
}

.archive-footer__art img{
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: sepia(.12) contrast(1.04);
}

/* New cat asset is genuinely transparent, so the old masking hack is no longer needed. */
.archive-footer__art-mask{
  display: none !important;
}

.archive-footer__bottom{
  position: relative;
  z-index: 1;
}

.archive-footer__bottom-inner{
  width: min(88vw, 1900px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.archive-footer__bottom-inner > p{
  width: auto;
  margin: 0;
}

.archive-footer__socials{
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  font-size: .76rem;
}

.archive-footer__socials > span{
  margin-right: 3px;
}

.archive-footer__socials a{
  width: 27px;
  height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--heading);
  text-decoration: none;
  border-radius: 50%;
}

.archive-footer__socials a:hover{
  background: rgba(23,63,53,.08);
}

.archive-footer__socials svg{
  width: 18px;
  height: 18px;
  fill: currentColor;
}

@media (min-width: 1900px){
  .archive-footer__art{
    width: clamp(650px, 30vw, 900px) !important;
    margin-left: clamp(-170px, -6vw, -80px);
    margin-bottom: -122px !important;
  }
}

@media (max-width: 1250px){
  .archive-footer__art{
    width: clamp(430px, 38vw, 560px) !important;
    margin-left: -70px;
    margin-bottom: -88px !important;
  }

  .archive-footer__artist-links{
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .archive-footer__artist-links::-webkit-scrollbar{
    display: none;
  }

  .archive-footer__artist-more{
    margin-left: 0;
    padding-right: 8px;
  }
}

@media (max-width: 920px){
  .archive-footer__art{
    width: min(55vw, 470px) !important;
    margin-left: -40px;
    margin-bottom: -82px !important;
  }

  .archive-footer__artists-inner{
    width: calc(100% - 40px);
  }

  .archive-footer__bottom-inner{
    width: calc(100% - 40px);
  }
}

@media (max-width: 700px){
  .archive-footer__artists-inner{
    width: calc(100% - 32px);
    padding: 16px 0 17px;
  }

  .archive-footer__artist-links{
    gap: 22px;
  }

  .archive-footer__artist-links a{
    font-size: .92rem;
  }

  .archive-footer__art{
    width: min(92vw, 500px) !important;
    margin-left: 0;
    margin-bottom: -82px !important;
    justify-self: center !important;
  }

  .archive-footer__bottom{
    padding-top: 92px !important;
  }

  .archive-footer__bottom-inner{
    width: calc(100% - 32px);
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

@media (max-width: 440px){
  .archive-footer__art{
    width: min(96vw, 430px) !important;
    margin-bottom: -70px !important;
  }

  .archive-footer__socials{
    width: 100%;
    flex-wrap: wrap;
  }
}


/* ===== Clean footer layout refinement ===== */

/* Artist rail: align with the same content width as the site and distribute names. */
.archive-footer__artists-inner{
  width: min(86vw, 1540px) !important;
  margin-inline: auto !important;
  padding: 20px 0 22px !important;
}
.archive-footer__artists-label{
  margin: 0 0 13px !important;
  font-size: .66rem !important;
  letter-spacing: .16em !important;
}
.archive-footer__artist-links{
  display: grid !important;
  grid-template-columns: repeat(11, max-content) !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  width: 100% !important;
  overflow: visible !important;
  padding: 0 !important;
}
.archive-footer__artist-links a{
  font-size: clamp(.88rem, .86vw, 1.05rem) !important;
  line-height: 1.2 !important;
}
.archive-footer__artist-more{
  margin-left: 0 !important;
}

/* Bottom rail: same clean alignment as the artist rail. */
.archive-footer__bottom-inner{
  width: min(86vw, 1540px) !important;
  margin-inline: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 28px !important;
}

/* Socials: restrained, consistent icon geometry. */
.archive-footer__socials{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  font-size: .72rem !important;
  color: var(--muted) !important;
}
.archive-footer__socials > span{
  margin-right: 8px !important;
}
.archive-footer__socials a{
  width: 25px !important;
  height: 25px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--heading) !important;
  opacity: .92;
}
.archive-footer__socials a:hover{
  background: transparent !important;
  opacity: .62;
}
.archive-footer__socials svg{
  display: block !important;
  width: 17px !important;
  height: 17px !important;
  fill: currentColor !important;
}

/* Keep the cat prominent without forcing the footer columns out of alignment. */
.archive-footer__art{
  width: clamp(520px, 30vw, 760px) !important;
  max-width: none !important;
  justify-self: end !important;
  margin-left: clamp(-110px, -4.5vw, -52px) !important;
  margin-bottom: clamp(-112px, -5.5vw, -74px) !important;
}
.archive-footer__art img{
  width:100% !important;
  height:auto !important;
  display:block !important;
}

/* Tablet: artist names become a clean scroll rail rather than compressing. */
@media (max-width: 1180px){
  .archive-footer__artists-inner,
  .archive-footer__bottom-inner{
    width: calc(100% - 64px) !important;
  }
  .archive-footer__artist-links{
    display:flex !important;
    justify-content:flex-start !important;
    gap:32px !important;
    overflow-x:auto !important;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
  }
  .archive-footer__artist-links::-webkit-scrollbar{display:none}
  .archive-footer__artist-links a{flex:0 0 auto}
  .archive-footer__art{
    width:clamp(430px, 39vw, 560px) !important;
    margin-left:-58px !important;
  }
}

/* Mobile: preserve generous spacing and make both rails easy to scan. */
@media (max-width: 700px){
  .archive-footer__artists-inner,
  .archive-footer__bottom-inner{
    width:calc(100% - 32px) !important;
  }
  .archive-footer__artists-inner{
    padding:17px 0 18px !important;
  }
  .archive-footer__artist-links{
    gap:26px !important;
  }
  .archive-footer__bottom-inner{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:17px !important;
  }
  .archive-footer__socials{
    justify-content:flex-start !important;
  }
  .archive-footer__art{
    width:min(94vw, 500px) !important;
    margin-left:0 !important;
    justify-self:center !important;
  }
}


/* ===== Homepage: Explore by collection ===== */
.home-collections{
  width: min(86vw, 1540px);
  margin: clamp(64px, 7vw, 112px) auto;
}

.home-collections__header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  margin-bottom:24px;
}



.home-collections__all{
  flex:0 0 auto;
  margin-bottom:4px;
  color:var(--heading);
  font-size:.78rem;
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:2px;
}

.home-collections__grid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:clamp(10px, 1vw, 18px);
}

.home-collection-card{
  min-width:0;
  min-height:330px;
  display:flex;
  flex-direction:column;
  color:var(--text);
  text-decoration:none;
  background:rgba(255,255,255,.18);
  border:1px solid var(--border);
  overflow:hidden;
  transition:transform .2s ease, border-color .2s ease;
}

.home-collection-card:hover{
  transform:translateY(-3px);
  border-color:rgba(23,63,53,.28);
}

.home-collection-card__image{
  width:100%;
  aspect-ratio:1.18 / 1;
  flex:0 0 auto;
  background:
    linear-gradient(135deg, rgba(23,63,53,.035), rgba(23,63,53,.012)),
    rgba(255,255,255,.24);
  border-bottom:1px solid var(--border);
}

.home-collection-card__body{
  min-height:150px;
  display:flex;
  flex:1;
  flex-direction:column;
  padding:18px 18px 15px;
}

.home-collection-card h3{
  margin:0 0 10px;
  color:var(--heading);
  font-family:'Libre Caslon Text', serif;
  font-size:clamp(1.02rem, 1.15vw, 1.32rem);
  font-weight:400;
  line-height:1.08;
}

.home-collection-card p{
  margin:0;
  color:var(--muted);
  font-size:.76rem;
  line-height:1.35;
}

.home-collection-card__arrow{
  margin-top:auto;
  padding-top:15px;
  color:var(--heading);
  font-size:1.15rem;
  line-height:1;
}

.home-collection-card--accent{
  background:var(--heading);
  border-color:var(--heading);
}

.home-collection-card--accent .home-collection-card__image{
  background:rgba(255,255,255,.035);
  border-color:rgba(255,255,255,.16);
}

.home-collection-card--accent h3,
.home-collection-card--accent p,
.home-collection-card--accent .home-collection-card__arrow{
  color:var(--bg);
}

@media (max-width:1200px){
  .home-collections__grid{
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:18px;
  }
  .home-collection-card{
    min-height:360px;
  }
}

@media (max-width:760px){
  .home-collections{
    width:calc(100% - 32px);
    margin:56px auto;
  }
  .home-collections__header{
    align-items:flex-start;
    margin-bottom:20px;
  }
  .home-collections__all{
    margin-top:24px;
  }
  .home-collections__grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:12px;
  }
  .home-collection-card{
    min-height:300px;
  }
  .home-collection-card__body{
    min-height:140px;
    padding:15px 14px 13px;
  }
}

@media (max-width:430px){
  .home-collections__header{
    display:block;
  }
  .home-collections__all{
    display:inline-block;
    margin-top:14px;
  }
  .home-collection-card{
    min-height:270px;
  }
  .home-collection-card h3{
    font-size:1rem;
  }
  .home-collection-card p{
    font-size:.7rem;
  }
}


/* ===== Collection card artwork system: test with 3 real artworks ===== */

.home-collection-card{
  position:relative;
  isolation:isolate;
}

/* Base image support */
.home-collection-card__image{
  position:relative;
  overflow:hidden;
}
.home-collection-card__image img{
  display:block;
  width:100%;
  height:100%;
}

/* Full-bleed mode:
   artwork visually continues through the whole card; content gets a soft paper field
   for readability rather than a hard image/text split. */
.home-collection-card--fullbleed .home-collection-card__image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  aspect-ratio:auto;
  border:0;
  z-index:0;
}
.home-collection-card--fullbleed .home-collection-card__image img{
  object-fit:cover;
}
.home-collection-card--fullbleed .home-collection-card__body{
  position:relative;
  z-index:1;
  margin-top:auto;
  min-height:47%;
  justify-content:flex-start;
  background:linear-gradient(
    to bottom,
    rgba(244,239,230,.88) 0%,
    rgba(244,239,230,.96) 22%,
    rgba(244,239,230,.985) 100%
  );
}
.home-collection-card--fullbleed .home-collection-card__arrow{
  margin-top:auto;
}

/* Japanese print: keep the samurai as the focal point on responsive crops. */
.home-collection-card[href*="japanese-prints"] .home-collection-card__image img{
  object-position:50% 22%;
}

/* Space & Science: use the supplied dark engraving as the complete visual field,
   with a dark lower veil so the card reads like the reference. */
.home-collection-card--accent.home-collection-card--fullbleed .home-collection-card__body{
  background:linear-gradient(
    to bottom,
    rgba(23,63,53,.70) 0%,
    rgba(23,63,53,.93) 28%,
    rgba(23,63,53,.99) 100%
  );
}
.home-collection-card[href*="space-science"] .home-collection-card__image img{
  object-position:50% 18%;
  filter:sepia(.08) saturate(.82) contrast(1.02);
}

/* Editorial illustration mode:
   preserve the whole vintage plate and let its long vertical subject visually
   travel behind the lower card instead of chopping it at the image boundary. */
.home-collection-card--editorial{
  background:#f2ede4;
}
.home-collection-card--editorial .home-collection-card__image{
  position:absolute;
  inset:0;
  height:100%;
  width:100%;
  aspect-ratio:auto;
  border:0;
  z-index:0;
  background:#f2ede4;
}
.home-collection-card--editorial .home-collection-card__image img{
  object-fit:cover;
  object-position:50% 42%;
  opacity:.98;
}
.home-collection-card--editorial .home-collection-card__body{
  position:relative;
  z-index:1;
  margin-top:auto;
  min-height:46%;
  background:linear-gradient(
    90deg,
    rgba(244,239,230,.98) 0%,
    rgba(244,239,230,.94) 56%,
    rgba(244,239,230,.35) 78%,
    rgba(244,239,230,.08) 100%
  );
}
.home-collection-card--editorial .home-collection-card__body h3,
.home-collection-card--editorial .home-collection-card__body p{
  max-width:72%;
}
.home-collection-card--editorial .home-collection-card__arrow{
  margin-top:auto;
}

/* At three-column tablet widths, keep the compositions readable. */
@media (max-width:1200px){
  .home-collection-card--fullbleed .home-collection-card__body,
  .home-collection-card--editorial .home-collection-card__body{
    min-height:44%;
  }
  .home-collection-card--editorial .home-collection-card__body h3,
  .home-collection-card--editorial .home-collection-card__body p{
    max-width:68%;
  }
}

/* On two-column mobile cards, preserve focal subjects and increase the text veil
   instead of relying on desktop crops. */
@media (max-width:760px){
  .home-collection-card--fullbleed .home-collection-card__body,
  .home-collection-card--editorial .home-collection-card__body{
    min-height:50%;
  }
  .home-collection-card[href*="japanese-prints"] .home-collection-card__image img{
    object-position:50% 18%;
  }
  .home-collection-card[href*="space-science"] .home-collection-card__image img{
    object-position:50% 12%;
  }
  .home-collection-card--editorial .home-collection-card__image img{
    object-position:56% 35%;
  }
  .home-collection-card--editorial .home-collection-card__body{
    background:linear-gradient(
      to bottom,
      rgba(244,239,230,.84) 0%,
      rgba(244,239,230,.97) 25%,
      rgba(244,239,230,.99) 100%
    );
  }
  .home-collection-card--editorial .home-collection-card__body h3,
  .home-collection-card--editorial .home-collection-card__body p{
    max-width:100%;
  }
}


/* ===== Collection cards v2: proportionate, art-directed, responsive ===== */
.home-collections__grid{
  align-items:stretch;
}

.home-collection-card{
  min-height:0 !important;
  aspect-ratio: .64 / 1;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  background:#f4efe7;
}

.home-collection-card__image,
.home-collection-card--fullbleed .home-collection-card__image,
.home-collection-card--editorial .home-collection-card__image{
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:1.28 / 1 !important;
  flex:0 0 auto;
  overflow:hidden;
  border:0 !important;
  border-bottom:1px solid var(--border) !important;
  background:#eee8dd;
  z-index:auto !important;
}

.home-collection-card__image img,
.home-collection-card--fullbleed .home-collection-card__image img,
.home-collection-card--editorial .home-collection-card__image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  opacity:1 !important;
  filter:none !important;
}

.home-collection-card__body,
.home-collection-card--fullbleed .home-collection-card__body,
.home-collection-card--editorial .home-collection-card__body{
  position:relative !important;
  z-index:2;
  margin:0 !important;
  min-height:0 !important;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:16px 17px 14px;
  background:#f4efe7 !important;
}

.home-collection-card h3{
  margin:0 0 9px;
  font-size:clamp(1rem, 1.05vw, 1.25rem);
}

.home-collection-card p{
  font-size:.74rem;
  line-height:1.32;
}

.home-collection-card__arrow{
  margin-top:auto;
  padding-top:10px;
}

/* Individual focal crops for the four conventional image cards. */
.home-collection-card--botanical .home-collection-card__image img{
  object-position:50% 32%;
}
.home-collection-card--japanese .home-collection-card__image img{
  object-position:50% 38%;
}
.home-collection-card--vintage .home-collection-card__image img{
  object-position:50% 20%;
}
.home-collection-card--fine .home-collection-card__image img{
  object-position:50% 66%;
}
.home-collection-card--oddities .home-collection-card__image img{
  object-position:47% 53%;
}

/* Space & Science is the one intentional full-art card. */
.home-collection-card--space{
  background:#173f35;
  border-color:#173f35;
}
.home-collection-card--space .home-collection-card__image{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  aspect-ratio:auto !important;
  border:0 !important;
  z-index:0 !important;
}
.home-collection-card--space .home-collection-card__image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 34%;
  filter:sepia(.12) saturate(.72) brightness(.72) contrast(1.05) !important;
}
.home-collection-card--space::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(
    to bottom,
    rgba(10,42,35,.06) 0%,
    rgba(10,42,35,.18) 38%,
    rgba(10,42,35,.74) 66%,
    rgba(10,42,35,.94) 100%
  );
  pointer-events:none;
}
.home-collection-card--space .home-collection-card__body{
  margin-top:auto !important;
  flex:0 0 48%;
  justify-content:flex-start;
  background:transparent !important;
  color:#f6f0e7;
}
.home-collection-card--space h3,
.home-collection-card--space p,
.home-collection-card--space .home-collection-card__arrow{
  color:#f6f0e7 !important;
}

/* Desktop cards should feel compact like the reference, not tall poster columns. */
@media (min-width:1201px){
  .home-collection-card{
    aspect-ratio:.66 / 1;
  }
}

/* 3-column tablet layout gets slightly wider cards. */
@media (max-width:1200px){
  .home-collection-card{
    aspect-ratio:.72 / 1;
    min-height:0 !important;
  }
  .home-collection-card__image,
  .home-collection-card--fullbleed .home-collection-card__image,
  .home-collection-card--editorial .home-collection-card__image{
    aspect-ratio:1.35 / 1 !important;
  }
}

/* Two-column mobile: avoid extremely tall cards and preserve readable art. */
@media (max-width:760px){
  .home-collection-card{
    aspect-ratio:.74 / 1;
    min-height:0 !important;
  }
  .home-collection-card__image,
  .home-collection-card--fullbleed .home-collection-card__image,
  .home-collection-card--editorial .home-collection-card__image{
    aspect-ratio:1.22 / 1 !important;
  }
  .home-collection-card__body,
  .home-collection-card--fullbleed .home-collection-card__body,
  .home-collection-card--editorial .home-collection-card__body{
    padding:13px 13px 12px;
  }
  .home-collection-card--space .home-collection-card__body{
    flex-basis:52%;
  }
}

@media (max-width:430px){
  .home-collection-card{
    aspect-ratio:.70 / 1;
    min-height:0 !important;
  }
}


/* ===== Collection row alignment fix =====
   Keep the collection section optically centered and give both sides
   identical gutters at every desktop width. */
.home-collections{
  width: min(100% - 64px, 1540px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (min-width: 1600px){
  .home-collections{
    width: min(100% - 120px, 1540px) !important;
  }
}

@media (max-width: 1200px){
  .home-collections{
    width: calc(100% - 56px) !important;
  }
}

@media (max-width: 760px){
  .home-collections{
    width: calc(100% - 32px) !important;
  }
}

/* ===== Homepage rabbit hole feature ===== */
.home-rabbit-hole{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  background: #f2ede4;
  border-top: 1px solid rgba(23,63,53,.12);
  border-bottom: 1px solid rgba(23,63,53,.12);
}

.home-rabbit-hole__inner{
  position: relative;
  width: min(calc(100% - 96px), 1540px);
  min-height: 390px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 150px minmax(330px, .92fr) minmax(440px, 1.5fr) minmax(210px, .62fr);
  gap: 28px;
  align-items: center;
  isolation: isolate;
}

.home-rabbit-hole__small-art{
  width: clamp(90px, 8vw, 132px);
  max-height: 175px;
  object-fit: contain;
  justify-self: center;
  opacity: .94;
}

.home-rabbit-hole__copy{
  position: relative;
  z-index: 3;
  align-self: center;
  padding: 56px 0;
}

.home-rabbit-hole__copy .section-eyebrow{
  margin-bottom: 12px;
}

.home-rabbit-hole__copy .section-title{
  font-size: clamp(2rem, 2.8vw, 3.15rem);
}

.home-rabbit-hole__description{
  max-width: 520px;
  margin: 18px 0 24px;
  color: #4e504d;
  font-family: 'Libre Caslon Text', serif;
  font-size: clamp(.94rem, 1vw, 1.08rem);
  line-height: 1.58;
}

.home-rabbit-hole__button{
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-height: 50px;
  padding: 12px 22px;
  border: 1px solid var(--heading-dark);
  border-radius: 3px;
  background: var(--heading-dark);
  color: #f8f3eb;
  font-size: .92rem;
  text-decoration: none;
  transition: transform .18s ease, background .18s ease;
}

.home-rabbit-hole__button:hover{
  background: var(--heading);
  transform: translateY(-1px);
}

.home-rabbit-hole__hero-art{
  position: relative;
  z-index: 1;
  align-self: stretch;
  min-width: 0;
  pointer-events: none;
}

.home-rabbit-hole__hero-art img{
  position: absolute;
  width: clamp(700px, 61vw, 1160px);
  max-width: none;
  height: auto;
  left: 48%;
  bottom: -42%;
  transform: translateX(-50%);
  display: block;
}

.home-rabbit-hole__quote{
  position: relative;
  z-index: 3;
  align-self: start;
  margin: 0;
  padding: 70px 0 30px 8px;
  color: #38433f;
}

.home-rabbit-hole__quote p{
  margin: 0 0 18px;
  font-family: 'Libre Caslon Text', serif;
  font-size: clamp(.96rem, 1.15vw, 1.22rem);
  font-style: italic;
  line-height: 1.55;
}

.home-rabbit-hole__quote cite{
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: .76rem;
  font-style: normal;
  color: var(--muted);
}

@media (max-width: 1180px){
  .home-rabbit-hole__inner{
    width: min(calc(100% - 56px), 1100px);
    min-height: 430px;
    grid-template-columns: 110px minmax(300px, .95fr) minmax(330px, 1.2fr);
    gap: 24px;
  }
  .home-rabbit-hole__quote{
    position: absolute;
    z-index: 4;
    right: 0;
    top: 0;
    width: 210px;
    padding-top: 48px;
  }
  .home-rabbit-hole__hero-art img{
    width: clamp(650px, 72vw, 900px);
    left: 55%;
    bottom: -27%;
  }
}

@media (max-width: 820px){
  .home-rabbit-hole__inner{
    width: calc(100% - 40px);
    min-height: 610px;
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-rows: auto 290px;
    gap: 0 20px;
    align-items: start;
  }
  .home-rabbit-hole__small-art{
    grid-column: 1;
    grid-row: 1;
    width: 78px;
    margin-top: 54px;
  }
  .home-rabbit-hole__copy{
    grid-column: 2;
    grid-row: 1;
    padding: 48px 0 30px;
  }
  .home-rabbit-hole__description{
    max-width: 500px;
  }
  .home-rabbit-hole__hero-art{
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .home-rabbit-hole__hero-art img{
    width: min(820px, 125vw);
    left: 53%;
    bottom: -46%;
  }
  .home-rabbit-hole__quote{
    right: 4px;
    top: auto;
    bottom: 30px;
    width: min(230px, 36vw);
    padding: 0;
  }
}

@media (max-width: 560px){
  .home-rabbit-hole__inner{
    width: calc(100% - 32px);
    min-height: 650px;
    display: block;
  }
  .home-rabbit-hole__small-art{
    position: absolute;
    width: 64px;
    top: 42px;
    right: 0;
    margin: 0;
  }
  .home-rabbit-hole__copy{
    width: calc(100% - 74px);
    padding: 42px 0 24px;
  }
  .home-rabbit-hole__copy .section-title{
    font-size: clamp(1.85rem, 9vw, 2.45rem);
  }
  .home-rabbit-hole__description{
    margin-top: 14px;
    font-size: .92rem;
  }
  .home-rabbit-hole__button{
    min-height: 46px;
    padding: 10px 17px;
    font-size: .86rem;
  }
  .home-rabbit-hole__hero-art{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 330px;
  }
  .home-rabbit-hole__hero-art img{
    width: 720px;
    left: 50%;
    bottom: -34%;
  }
  .home-rabbit-hole__quote{
    left: 0;
    right: auto;
    bottom: 22px;
    width: 48%;
    padding: 0;
  }
  .home-rabbit-hole__quote p{
    font-size: .84rem;
    line-height: 1.45;
    margin-bottom: 10px;
  }
  .home-rabbit-hole__quote cite{
    font-size: .68rem;
  }
}

/* ===== Rabbit hole: keep the octopus dramatic without swallowing the quote ===== */
@media (min-width: 1181px){
  .home-rabbit-hole__inner{
    /* Give the quote a little more breathing room while keeping the artwork dominant. */
    grid-template-columns: 150px minmax(330px, .92fr) minmax(420px, 1.38fr) minmax(245px, .72fr);
  }

  .home-rabbit-hole__hero-art img{
    /* Slightly smaller and pulled left. It still deliberately spills out of its column. */
    width: clamp(680px, 53vw, 1000px);
    left: 42%;
    bottom: -38%;
  }

  .home-rabbit-hole__quote{
    z-index: 4;
    padding-left: 24px;
  }

  /* A soft paper-coloured fade protects the quote instead of hard-cropping the octopus. */
  .home-rabbit-hole__quote::before{
    content: "";
    position: absolute;
    z-index: -1;
    top: 34px;
    right: -36px;
    bottom: 18px;
    left: -46px;
    background: linear-gradient(90deg,
      rgba(242,237,228,0) 0%,
      rgba(242,237,228,.82) 22%,
      #f2ede4 42%,
      #f2ede4 100%);
    pointer-events: none;
  }
}


/* ===== Rabbit hole variant: Cats with important business ===== */
.home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__small-art{
  width: clamp(96px, 8.5vw, 140px);
  max-height: 190px;
}

.home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__hero-art img{
  width: clamp(470px, 39vw, 720px);
  left: 47%;
  bottom: -27%;
}

@media (max-width: 1180px){
  .home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__hero-art img{
    width: clamp(470px, 54vw, 650px);
    left: 54%;
    bottom: -20%;
  }
}

@media (max-width: 820px){
  .home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__hero-art img{
    width: min(590px, 90vw);
    left: 58%;
    bottom: -28%;
  }
}

@media (max-width: 560px){
  .home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__small-art{
    width: 68px;
  }

  .home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__hero-art img{
    width: 500px;
    left: 61%;
    bottom: -24%;
  }
}


/* ===== Cats rabbit hole: responsive layout repair =====
   Keeps the same rabbit-hole structure, but prevents the large illustration
   from entering the copy/quote columns and lets the composition reflow cleanly. */

.home-rabbit-hole__inner--cats-with-important-business{
  grid-template-columns:
    clamp(90px, 8vw, 132px)
    minmax(330px, .95fr)
    minmax(380px, 1.28fr)
    minmax(230px, .72fr);
  gap: clamp(22px, 2vw, 34px);
}

.home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__copy{
  z-index: 4;
}

.home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__hero-art{
  position: relative;
  z-index: 1;
  align-self: stretch;
  min-width: 0;
  overflow: visible;
}

.home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__hero-art img{
  position: absolute;
  width: min(100%, 680px);
  max-width: 100%;
  height: auto;
  left: 50%;
  bottom: -8%;
  transform: translateX(-50%);
}

.home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__quote{
  position: relative;
  z-index: 5;
  width: auto;
  right: auto;
  top: auto;
  bottom: auto;
  padding: 70px 0 30px 8px;
}

/* The sea rabbit hole uses a protective paper fade. The cat composition
   no longer overlaps the quote, so it does not need that fade. */
.home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__quote::before{
  display: none;
}

/* Mid-size desktop / laptop */
@media (max-width: 1180px){
  .home-rabbit-hole__inner--cats-with-important-business{
    width: min(calc(100% - 56px), 1100px);
    min-height: 500px;
    grid-template-columns: 90px minmax(280px, .95fr) minmax(330px, 1.15fr);
    grid-template-rows: auto auto;
    gap: 0 24px;
    align-items: center;
  }

  .home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__small-art{
    grid-column: 1;
    grid-row: 1;
    width: 78px;
    margin: 0;
  }

  .home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__copy{
    grid-column: 2;
    grid-row: 1;
    padding: 48px 0 34px;
  }

  .home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__hero-art{
    grid-column: 3;
    grid-row: 1 / 3;
    min-height: 500px;
  }

  .home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__hero-art img{
    width: min(100%, 590px);
    max-width: 100%;
    left: 50%;
    bottom: 0;
  }

  .home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__quote{
    grid-column: 1 / 3;
    grid-row: 2;
    position: relative;
    width: min(430px, 100%);
    margin: 0 0 36px 0;
    padding: 0 0 0 114px;
  }
}

/* Tablet: copy first, illustration becomes its own visual row, quote follows.
   Nothing is absolutely laid over text. */
@media (max-width: 820px){
  .home-rabbit-hole__inner--cats-with-important-business{
    width: calc(100% - 40px);
    min-height: 0;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 0 18px;
    padding: 42px 0 34px;
  }

  .home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__small-art{
    grid-column: 1;
    grid-row: 1;
    position: static;
    width: 68px;
    margin: 8px 0 0;
    align-self: start;
  }

  .home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__copy{
    grid-column: 2;
    grid-row: 1;
    width: auto;
    padding: 0 0 30px;
  }

  .home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__hero-art{
    grid-column: 1 / -1;
    grid-row: 2;
    position: relative;
    height: auto;
    min-height: 360px;
    overflow: hidden;
  }

  .home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__hero-art img{
    position: absolute;
    width: min(620px, 94vw);
    max-width: none;
    left: 50%;
    bottom: -8%;
    transform: translateX(-50%);
  }

  .home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__quote{
    grid-column: 1 / -1;
    grid-row: 3;
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: min(520px, 88%);
    margin: 18px 0 0;
    padding: 0;
  }
}

/* Phone: keep the little cat beside the heading, then stack art and quote. */
@media (max-width: 560px){
  .home-rabbit-hole__inner--cats-with-important-business{
    width: calc(100% - 32px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px;
    grid-template-rows: auto auto auto;
    gap: 0 12px;
    padding: 38px 0 28px;
  }

  .home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__copy{
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    padding: 0 72px 28px 0;
  }

  .home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__small-art{
    grid-column: 2;
    grid-row: 1;
    position: absolute;
    top: 52px;
    right: 0;
    width: 62px;
    margin: 0;
  }

  .home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__copy .section-title{
    font-size: clamp(2rem, 9.5vw, 2.65rem);
    line-height: 1.03;
  }

  .home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__description{
    max-width: none;
    margin-right: -72px;
  }

  .home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__hero-art{
    grid-column: 1 / -1;
    grid-row: 2;
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    height: 315px;
    min-height: 0;
    overflow: hidden;
  }

  .home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__hero-art img{
    position: absolute;
    width: 520px;
    max-width: none;
    left: 52%;
    bottom: -5%;
    transform: translateX(-50%);
  }

  .home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__quote{
    grid-column: 1 / -1;
    grid-row: 3;
    position: relative;
    width: 100%;
    margin: 20px 0 8px;
    padding: 0;
  }

  .home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__quote p{
    max-width: 360px;
    font-size: .9rem;
    line-height: 1.5;
  }
}

@media (max-width: 390px){
  .home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__copy{
    padding-right: 60px;
  }

  .home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__description{
    margin-right: -60px;
  }

  .home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__small-art{
    width: 54px;
  }

  .home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__hero-art{
    height: 285px;
  }

  .home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__hero-art img{
    width: 470px;
  }
}


/* ===== Cats rabbit hole: preserve the complete large illustration on narrow screens ===== */

/* Tablet and narrow browser windows:
   stop treating the illustration as a crop. Give it a natural-height row
   and scale the complete image inside the available width. */
@media (max-width: 820px){
  .home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__hero-art{
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 8px 0 0;
  }

  .home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__hero-art img{
    position: relative !important;
    width: min(100%, 620px) !important;
    max-width: 100% !important;
    height: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    object-fit: contain !important;
    display: block;
  }
}

/* Phone */
@media (max-width: 560px){
  .home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__hero-art{
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding-top: 12px;
  }

  .home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__hero-art img{
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
  }
}

@media (max-width: 390px){
  .home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__hero-art{
    height: auto !important;
  }

  .home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__hero-art img{
    width: 100% !important;
  }
}


/* ===== Mobile polish: artist rail + rabbit-hole spacing ===== */
@media (max-width: 700px){
  .archive-footer__artist-links{
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 28px !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 2px 18px 8px 0 !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .archive-footer__artist-links::-webkit-scrollbar{ display:none; }
  .archive-footer__artist-links a{
    flex: 0 0 auto !important;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  .archive-footer__artists-inner{
    overflow: hidden;
  }
}

@media (max-width: 560px){
  .home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__copy{
    padding-right: 78px;
    padding-bottom: 34px;
  }
  .home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__small-art{
    top: 42px;
    right: 2px;
    width: 66px;
  }
  .home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__description{
    margin-right: -78px;
    margin-top: 26px;
  }
}

@media (max-width: 390px){
  .home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__copy{
    padding-right: 68px;
  }
  .home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__small-art{
    top: 44px;
    width: 58px;
  }
  .home-rabbit-hole__inner--cats-with-important-business .home-rabbit-hole__description{
    margin-right: -68px;
    margin-top: 24px;
  }
}