/* Approved generated illustration design, 2026-11-10. Home and filtered catalogue. */
:root{--oat:#f0e8db;--milk:#faf5eb;--yellow:#d5b570;--yellow-hover:#c8a35b;--brown:#59483c;--green:#59483c;--gradient-accent:linear-gradient(135deg,#e8cc92,#d5b570);--gradient-dark:linear-gradient(110deg,#272320,#342b25 70%,#43362c);--drawing-gold:#d8bd7e66}
body{background:var(--oat)}
.hero{min-height:420px;background:radial-gradient(ellipse at 80% 50%,#65513b45,transparent 55%),var(--gradient-dark);padding-bottom:62px}
.hero-content{max-width:61%;padding-top:38px}.hero h2{font-size:clamp(32px,3.3vw,48px);max-width:600px;line-height:1.45}.hero-summary{font-size:14px;line-height:1.9}.hero-kicker{color:#d9bf87}.hero-category{color:#c4b49d}.hero-scope{color:#e4d6c0}.included-check{background:#d1b774;color:#33291f}.hero-checked{color:#b4a596}
.hero-room{--room-ink:#e8d8ba;position:absolute;right:4%;top:8px;width:43%;height:360px;display:flex;align-items:center;justify-content:center;flex-direction:column;color:var(--room-ink);pointer-events:none}
.hero-room svg{width:100%;height:100%;overflow:visible}.room-wash{opacity:.035}.room-architecture{opacity:.55}.room-sofa{fill:#77634744}.room-gold{stroke:#d5b570}.room-caption{font:700 13px/1.5 var(--round);color:#c9b794;letter-spacing:.12em;margin-top:-15px;transform:rotate(-4deg)}
[data-category]{--poster-a:#f8f1e6;--poster-b:#e9dcc6;--poster-ink:#45392f}
.title-card .card-media.type-poster{display:grid;grid-template-rows:auto minmax(0,1fr) 70px auto;align-items:start;gap:10px;height:270px;aspect-ratio:auto;padding:20px 21px;border:1px solid #9e896b40;border-radius:12px;background:linear-gradient(140deg,#fbf6ed,#eee3d0);box-shadow:0 2px 0 #775e3210;transition:transform .2s ease,box-shadow .2s ease}
.title-card .card-media.type-poster.tone-1{background:linear-gradient(140deg,#f4ecdD,#e5d8c0)}
.title-card .card-media.type-poster.tone-2{background:linear-gradient(140deg,#faf5eb,#efe7d9)}
.type-poster::before,.type-poster::after{display:none}
.poster-top{font-size:10px;color:#7a6652;letter-spacing:.03em}.poster-top>span:last-child:not(.poster-new){display:none}.poster-new{border:0;background:#dac28a77;padding:2px 6px;color:#594830;border-radius:3px}
.poster-title{align-self:start;font:700 clamp(18px,8cqi,25px)/1.55 var(--round);-webkit-line-clamp:3;letter-spacing:.01em;color:#45392f}
.poster-medium .poster-title{font-size:clamp(17px,7.3cqi,22px);-webkit-line-clamp:3}.poster-long .poster-title{font-size:clamp(14px,6.4cqi,18px);-webkit-line-clamp:4}
.poster-illustration{display:block;width:120px;height:76px;justify-self:end;align-self:end;color:#80684e;transform:rotate(-5deg)}.poster-illustration svg{display:block;width:100%;height:100%}.tone-1 .poster-illustration{transform:rotate(3deg)}
.poster-bottom{font-size:10px;opacity:1;color:#80684e}.poster-bottom>span{font-size:17px}
.card-media:hover .poster-title{text-decoration:none}.title-card .card-media:hover{transform:translateY(-3px);box-shadow:0 7px 18px #5e463717}
.card-body{padding-top:11px}.card-scope{font-size:11px;font-weight:500}.card-summary{font-size:12px;margin-top:5px}.card-footer{padding-top:1px}.card-check{font-size:9px;color:#8b7a69}
.rank-card .poster-top{padding-left:0}.rank-card .card-media{border-radius:12px}.dark-shelf{background:#e4d8c5;color:#392e26;margin-top:22px}.dark-shelf .section-heading p,.dark-shelf .section-eyebrow,.rank-card .card-scope,.rank-card .card-summary{color:#715e4b}.dark-shelf .rail-nav{border-color:#9a8467;color:#45392f}.dark-shelf .see-all{color:#59483c}.dark-shelf .title-rail{scrollbar-color:#ac9679 transparent}.dark-shelf .section-eyebrow{display:none}
.section-heading p{font-size:12px}.section-heading h2{font-size:25px}.hero-controls{gap:9px}.hero-controls .hero-arrow{border-color:#d1b98b40}.hero-dots button[aria-pressed=true]::before{background:#d5b570}
.preview-prime{display:flex;gap:12px;align-items:center;justify-content:center;padding-top:24px;padding-bottom:28px;font-size:12px;color:var(--muted);border-top:1px solid #c5b8a955}.preview-prime>span{font-size:10px;border:1px solid var(--line);padding:1px 5px;border-radius:3px}.preview-prime a{text-decoration:underline;text-underline-offset:4px}.site-footer p:empty{display:none}.site-footer .affiliate-disclosure{font-size:11px}
@media(min-width:1600px){.hero-room{right:8%;max-width:540px}.hero-content{max-width:60%}}
@media(max-width:1050px){.hero-room{width:44%;right:1%;top:35px;height:300px}.hero-content{max-width:63%}.hero h2{font-size:34px}.room-caption{font-size:11px}}
@media(max-width:700px){
 .hero{min-height:390px;padding-bottom:55px}.hero-content{max-width:none;padding-top:24px;padding-bottom:0}.hero-kicker{margin-bottom:12px;font-size:11px}.hero-category{font-size:9px;margin-bottom:8px}.hero h2{font-size:28px;min-height:2.9em;max-width:100%;line-height:1.45}.hero-summary{font-size:12px;margin-top:12px;max-width:72%;min-height:3.6em}.hero-scope{font-size:11px;margin-top:10px}.hero-actions{position:relative;margin-top:14px}.hero-checked{font-size:9px;margin-top:10px}
 .hero-room{right:2px;top:auto;bottom:117px;width:128px;height:107px;opacity:.9}.hero-room .room-caption{display:none}.hero-room .room-architecture{opacity:.4}.hero-room svg{stroke-width:3.3}.hero-room .room-wash{opacity:.04}
 .title-card .card-media.type-poster{height:245px;padding:13px 12px 12px;grid-template-rows:20px minmax(0,1fr) 65px 17px;gap:7px;border-radius:9px}.poster-top{font-size:8px;letter-spacing:0;min-height:0}.poster-new{font-size:8px;padding:1px 4px}.poster-title{font-size:18px;line-height:1.5;-webkit-line-clamp:4}.poster-medium .poster-title{font-size:16px;-webkit-line-clamp:4}.poster-long .poster-title{font-size:13px;-webkit-line-clamp:5}.poster-illustration{height:64px;width:98px}.poster-bottom{font-size:9px}.card-scope{font-size:10px}.card-summary{font-size:11px}.card-check{font-size:9px}.section-heading h2{font-size:20px}.section-heading p{font-size:10px}.hero-controls{bottom:3px}
 .preview-prime{gap:9px;padding-top:20px;padding-bottom:20px;font-size:11px}.dark-shelf .section-heading h2{font-size:22px}
}
@media(max-width:359px){.title-card .card-media.type-poster{height:260px}.poster-title{font-size:16px}.poster-medium .poster-title{font-size:14px}.poster-long .poster-title{font-size:12px}.hero-room{width:100px;height:90px;bottom:121px}.hero-summary{max-width:70%}}
@media(prefers-reduced-motion:reduce){.title-card .card-media.type-poster{transition:none}.title-card .card-media:hover{transform:none}}

/* v3: generated illustrations and explicit shared card tracks */
.hero-room{height:340px;top:24px;right:5%;width:40%}
.hero-generated{width:100%;height:100%;object-fit:contain}
.room-caption{margin-top:4px;font-size:12px}
.title-card .card-media.type-poster{height:300px;padding:16px;grid-template-rows:20px 88px 120px 18px;gap:6px;align-content:start;background:#f8f1e6}
.title-card .card-media.type-poster.tone-1,.title-card .card-media.type-poster.tone-2{background:#f8f1e6}
.poster-top{height:20px;min-height:20px;align-items:center;line-height:1.2;letter-spacing:0}
.poster-top>span:first-child{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.poster-title,.poster-medium .poster-title,.poster-long .poster-title{font-size:19px;line-height:1.5;height:88px;max-height:88px;align-self:start;-webkit-line-clamp:3;text-wrap:pretty}
.poster-illustration,.tone-1 .poster-illustration{width:100%;height:120px;display:flex;align-items:center;justify-content:center;justify-self:center;align-self:center;transform:none}
.poster-illustration img{display:block;width:160px;height:160px;max-width:none;object-fit:contain;flex-shrink:0}
.poster-bottom{height:18px;line-height:18px;align-items:center}
.card-body{display:grid;grid-template-rows:34px 40px 44px;gap:4px;padding-top:10px}
.card-scope{line-height:1.6;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.card-summary{margin:0;min-height:0;line-height:1.65;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.card-footer{padding:0;align-self:end;align-items:center;flex-wrap:nowrap}
@media(max-width:1050px){.hero-room{height:280px;top:70px;right:2%;width:42%}}
@media(max-width:700px){
 .hero-room{top:auto;bottom:132px;width:135px;height:104px;right:8px;opacity:1}
 .title-card .card-media.type-poster{height:270px;padding:12px;grid-template-rows:20px 84px 106px 18px;gap:6px}
 .poster-title,.poster-medium .poster-title,.poster-long .poster-title{font-size:14px;line-height:1.5;height:84px;max-height:84px;-webkit-line-clamp:4}
 .poster-illustration,.tone-1 .poster-illustration{height:106px;width:100%;transform:none}
 .poster-illustration img{width:140px;height:140px}
 .poster-top{font-size:8px;min-height:20px;height:20px}
 .card-body{grid-template-rows:32px 38px 44px;gap:3px}
 .card-footer{flex-wrap:nowrap}.card-check{font-size:8px}.card-watch{font-size:10px}
}
@media(max-width:359px){.poster-title,.poster-medium .poster-title,.poster-long .poster-title{font-size:13px}.hero-room{width:105px;height:86px;right:4px;bottom:134px}.poster-illustration img{width:125px;height:125px}}
.title-card .card-media.type-poster{grid-template-columns:minmax(0,1fr)}
.title-card .card-media.type-poster>*{min-width:0;max-width:100%}

/* Work introductions share the approved home palette and illustrations. */
.work-page .breadcrumbs{font-size:11px;color:#8b7764;padding-top:17px;padding-bottom:17px}
.work-page .work-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.48fr);gap:40px;min-height:340px;align-items:center;padding-top:36px;padding-bottom:38px;background:radial-gradient(ellipse at 85% 45%,#785b3e40,transparent 55%),var(--gradient-dark)}
.work-page .work-intro{min-width:0;max-width:820px}
.work-page .work-intro>.section-eyebrow{color:#d9bf87;font-size:11px}
.work-page .work-intro h1{font-size:clamp(28px,3.3vw,45px);line-height:1.5;text-wrap:pretty}
.work-page .work-summary{font-size:15px;line-height:1.9;color:#e6d7c3;margin-top:14px}
.work-page .work-scope{font-size:13px;color:#ead8b5;margin-top:20px}
.work-page .work-scope>span{color:#d5b570}
.work-page .work-actions{margin-top:20px;gap:10px;flex-wrap:wrap}
.work-page .work-checked{font-size:10px;color:#c2b09b;margin-top:15px}
.work-page .work-watch-note{font-size:10px;color:#ae9a85;margin-top:5px}
.work-page .work-illustration{grid-column:2;grid-row:1;border:0;padding:0;background:none;display:flex;justify-content:center;align-items:center;min-width:0}
.work-page .work-illustration img{width:320px;height:280px;object-fit:contain;max-width:100%;border-radius:0}
.work-page .work-content{gap:56px;padding-top:42px;padding-bottom:20px;grid-template-columns:minmax(0,1fr) 280px}
.work-page .prose-block{margin-bottom:30px}.work-page .prose-block h2{font-size:26px;color:#45392f;line-height:1.5}
.work-page .prose-block>p:not(.section-eyebrow){font-size:14px;line-height:1.9;color:#6b5949}
.work-page .prose-block>.section-eyebrow{font-size:10px;color:#8a7052}
.work-page .availability-facts{border:1px solid #c5ae8b66;border-radius:10px;background:#f8f1e6;padding:4px 20px;margin:22px 0}
.work-page .availability-facts>div{border-color:#c5ae8b55;padding:14px 0;font-size:12px;grid-template-columns:125px minmax(0,1fr)}
.work-page .availability-facts>div:last-child{border-bottom:0}
.work-page .prose-block>p.small-note{font-size:11px;line-height:1.8;color:#8b7764}
.work-page .small-guide{background:#e8ddc9;border:1px solid #c5ae8b55;border-radius:12px;padding:22px;display:block}
.work-page .guide-illustration{display:block;width:150px;height:100px;object-fit:contain;margin:0 auto 14px}
.work-page .small-guide h2{font-size:24px;line-height:1.5;color:#45392f}.work-page .small-guide p{font-size:12px;line-height:1.9;color:#79634d}
.work-page .small-guide .text-link{font-size:12px}.work-page .story-link{border-color:#c5ae8b66}.work-page .story-link strong{font-size:17px;line-height:1.6}
.work-page .related-section{padding-top:18px;padding-bottom:44px}.work-page .related-section .section-eyebrow{color:#8a7052;font-size:10px}
.work-page .related-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.work-page .related-grid .card-check{font-size:9px}.work-page .related-grid .card-footer{gap:4px}
@media(max-width:1050px) and (min-width:701px){.work-page .work-hero{grid-template-columns:minmax(0,1fr) 230px;gap:20px}.work-page .work-illustration img{height:230px}.work-page .work-content{grid-template-columns:minmax(0,1fr) 230px;gap:28px}.work-page .related-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
@media(max-width:700px){
 .work-page .breadcrumbs{font-size:10px;padding-top:12px;padding-bottom:12px}
 .work-page .work-hero{display:grid;grid-template-columns:minmax(0,1fr) 102px;gap:10px 14px;min-height:0;padding-top:24px;padding-bottom:26px}
 .work-page .work-intro{display:contents}.work-page .work-intro>.section-eyebrow{grid-column:1/-1;grid-row:1;margin:0;font-size:10px}
 .work-page .work-intro h1{grid-column:1/-1;grid-row:2;font-size:27px;line-height:1.5;margin:0}
 .work-page .work-summary{grid-column:1;grid-row:3;font-size:12px;line-height:1.8;margin:0;align-self:end}
 .work-page .work-scope{grid-column:1;grid-row:4;font-size:11px;line-height:1.8;margin:0;align-self:start}
 .work-page .work-illustration{grid-column:2;grid-row:3/5;align-self:center;width:102px;height:105px}
 .work-page .work-illustration img{width:126px;max-width:none;height:126px}
 .work-page .work-actions{grid-column:1/-1;grid-row:5;display:flex;gap:8px;margin:4px 0 0}
 .work-page .work-actions .button{font-size:12px;padding:11px 14px}
 .work-page .work-checked{grid-column:1/-1;grid-row:6;font-size:9px;margin:2px 0 0}
 .work-page .work-watch-note{grid-column:1/-1;grid-row:7;font-size:9px;margin:-6px 0 0}
 .work-page .work-content{display:block;padding-top:26px;padding-bottom:10px}
 .work-page .prose-block h2{font-size:22px}.work-page .prose-block>p:not(.section-eyebrow){font-size:13px;line-height:1.9}
 .work-page .availability-facts{padding:3px 14px;margin:18px 0}.work-page .availability-facts>div{grid-template-columns:95px minmax(0,1fr);font-size:11px;gap:10px;padding:12px 0}
 .work-page .small-guide{display:grid;grid-template-columns:94px minmax(0,1fr);gap:8px 15px;padding:18px;margin-top:22px}
 .work-page .guide-illustration{grid-column:1;grid-row:1/4;width:100%;height:110px;margin:0;align-self:center}
 .work-page .small-guide h2{grid-column:2;font-size:20px}.work-page .small-guide p{grid-column:2;font-size:11px;margin:0}.work-page .small-guide .text-link{grid-column:2;font-size:11px}
 .work-page .related-section{padding-top:24px;padding-bottom:30px}.work-page .related-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}.work-page .related-grid .card-check{font-size:8px}.work-page .related-grid .card-watch{font-size:10px}.work-page .related-section .see-all{font-size:10px}
}
@media(max-width:359px){.work-page .work-intro h1{font-size:24px}.work-page .work-hero{grid-template-columns:minmax(0,1fr) 88px;gap:10px}.work-page .work-illustration{width:88px}.work-page .work-illustration img{width:112px;height:112px}.work-page .work-actions .button{font-size:11px;padding:10px 12px}.work-page .availability-facts>div{grid-template-columns:84px minmax(0,1fr);font-size:10px}}
.work-page .work-illustration img{box-shadow:none;aspect-ratio:auto}

/* Catalog cards with a compact genre icon and a shared watch band. */
.title-card {
  --card-paper: #fbf4e9;
  --card-ink: #33271e;
  --card-band: #483429;
  background: linear-gradient(145deg, var(--card-paper), #f4e8d4);
  border: 1px solid #a991735e;
  border-radius: 12px;
  box-shadow: 0 2px 0 #775e3210;
  overflow: hidden;
}
.title-card .card-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 26px 66px 36px 16px;
  gap: 4px;
  padding: 11px 13px 9px;
  color: var(--card-ink);
}
.title-card .card-intro:focus-visible { outline-offset: -3px; }
.title-card .card-intro:hover .card-name { text-decoration: underline; text-underline-offset: 3px; }
.title-card .card-genre {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: #65513f;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}
.title-card .card-genre img {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  object-fit: contain;
  border-radius: 5px;
  mix-blend-mode: multiply;
}
.title-card .poster-new { margin-left: auto; white-space: nowrap; }
.title-card .card-name {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  align-self: start;
  margin: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  font: 700 16px/22px var(--round);
}
.title-card .card-summary {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  align-self: start;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  color: #665244;
  font-size: 11px;
  line-height: 18px;
}
.title-card .card-more { color: #68503c; font-size: 10px; line-height: 16px; }
.title-card .watch-band {
  display: grid;
  grid-template-rows: 32px auto 44px;
  gap: 4px;
  margin-top: auto;
  padding: 7px 13px 10px;
  background: var(--card-band);
  color: #fff0d7;
}
.title-card .watch-band .card-scope {
  align-self: center;
  margin: 0;
  color: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 16px;
}
.title-card .watch-band .card-check {
  color: #e2cbb1;
  font-size: 10px;
  line-height: 14px;
}
.title-card .watch-band .card-watch {
  width: 100%;
  margin: 0;
  padding: 0 2px;
  border-radius: 7px;
  background: var(--gradient-accent);
  color: #2d2117;
  font-size: 12px;
  font-weight: 700;
}
.title-card .watch-band .card-watch:hover { background: var(--yellow-hover); }
.title-card .watch-band .card-watch:focus-visible { outline-color: #fff0d7; }
@media (max-width:700px) {
  .rank-card { display: grid; align-items: stretch; }
  .title-card .card-intro {
    flex: 0 0 auto;
    height: 115px;
    grid-template-rows: 22px max-content minmax(0, max-content) 13px;
    align-content: space-between;
    gap: 2px;
    padding: 5px 8px;
  }
  .title-card .card-genre { gap: 3px; font-size: 10px; }
  .title-card .card-genre img { flex-basis: 22px; width: 22px; height: 22px; }
  .title-card .poster-new { padding-inline: 3px; }
  .title-card .card-name { font-size: 14px; line-height: 16px; }
  .title-card .card-summary { max-height: 100%; line-height: 16px; }
  .title-card .card-more { line-height: 13px; }
  .title-card .watch-band { padding: 6px 8px 8px; gap: 3px; }
  .title-card .watch-band .card-scope { font-size: 12px; }
  .title-card .watch-band .card-watch { font-size: 11px; }
}