/* Inspiration. Prefix .in- */
.in-head { padding: 26px 0 18px; }
.in-head h1 { font-size: 52px; }
.in-search { display: flex; justify-content: center; gap: 14px; margin: 0 auto 22px; width: min(760px, 100%); }
.in-search .inw { flex: 1; }
.in-search .in { height: 46px; border-radius: 999px; padding-left: 46px; }
.in-search .ic-wrap { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--ink-2); display: inline-flex; pointer-events: none; }
.in-saved { height: 46px; padding: 0 20px; flex: none; }
.in-saved .ic { color: var(--rose); }
.in-saved.on { background: var(--rose); color: #fff; }
.in-saved.on .ic { color: #fff; fill: currentColor; }
.in-cats { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.in-cats .chip { padding: 0 24px; height: 40px; }
.in-sels { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.in-sel { display: inline-flex; align-items: center; height: 42px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0 12px 0 16px; font-size: 14px; gap: 6px; background: #fff; min-width: 200px; }
.in-sel span { color: var(--ink); }
.in-sel select { border: 0; outline: 0; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A4A52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 4px center; appearance: none; padding: 0 28px 0 4px; flex: 1; font-size: 14px; color: var(--ink-2); }

/* the 3 + 3 + 2 editorial grid: heights follow the mockup per row (container-relative) */
.in-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px 14px; container-type: inline-size; }
.in-tile { display: block; }
.in-tile .ph { border-radius: 4px; }
.in-tile .ph img { width: 100%; height: 100%; object-fit: cover; }
.in-tile .heart { color: var(--rose); }
.in-tile .cap { margin-top: 12px; }
.in-tile .cap h3 { font-size: 20px; }
.in-tile .cap .eye { display: block; margin-top: 5px; font-size: 10.5px; }
.in-tile.r1 { grid-column: span 4; } .in-tile.r1 .ph { height: 36.1cqw; }
.in-tile.r2a { grid-column: span 5; } .in-tile.r2b { grid-column: span 3; } .in-tile.r2c { grid-column: span 4; }
.in-tile.r2a .ph, .in-tile.r2b .ph, .in-tile.r2c .ph { height: 29.6cqw; }
.in-tile.r3 { grid-column: span 6; } .in-tile.r3 .ph { height: 24.3cqw; }
.in-empty { grid-column: 1 / -1; text-align: center; padding: 48px 20px; color: var(--ink-2); border: 1px dashed var(--line); border-radius: var(--r); }
.in-more { display: flex; justify-content: center; margin: 30px 0 40px; }
.in-more .btn { padding: 0 28px; }

.in-journal { padding: 10px 0 36px; }
.in-journal .sec-h { margin-bottom: 18px; }
.in-journal .sec-h h2 { font-size: 32px; }
.in-jgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.in-j { display: flex; gap: 16px; padding: 0 24px; border-left: 1px solid var(--line); }
.in-j:first-child { padding-left: 0; border-left: 0; }
.in-j .ph { width: 112px; height: 120px; flex: none; border-radius: 4px; }
.in-j h3 { font-size: 19px; line-height: 1.2; }
.in-j .eye { display: block; margin-top: 10px; font-size: 10.5px; }
.in-cta { background: var(--cream); padding: 22px 28px; }
.in-cta h3 { font-size: 24px; }
.in-cta .lnk { font-size: 15px; }
.in-cta .lnk .ic { width: 16px; height: 16px; }

@media (max-width: 1080px) {
  .in-head h1 { font-size: 40px; }
  .in-jgrid { grid-template-columns: 1fr; gap: 16px; }
  .in-j { padding: 0; border: 0; }
}
@media (max-width: 820px) {
  .in-head { padding-top: 10px; }
  .in-head h1 { font-size: 34px; }
  .in-search { flex-direction: column; }
  .in-saved { width: 100%; }
  .in-cats { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .in-cats .chip { flex: none; }
  .in-sels { flex-direction: column; }
  .in-sel { min-width: 0; width: 100%; }
  .in-grid { grid-template-columns: 1fr; gap: 22px; }
  .in-tile.r1, .in-tile.r2a, .in-tile.r2b, .in-tile.r2c, .in-tile.r3 { grid-column: 1 / -1; }
  .in-tile .ph, .in-tile.r1 .ph, .in-tile.r2a .ph, .in-tile.r2b .ph, .in-tile.r2c .ph, .in-tile.r3 .ph { height: auto; aspect-ratio: 4 / 3; }
  .in-cta { padding: 20px; }
}