/* Wallcraft Anthology Colour Explorer */
.colour-explorer-hero{padding:150px 0 54px;position:relative;overflow:hidden;background:linear-gradient(135deg,#f6f2eb 0%,#eee9df 100%)}
.colour-explorer-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:end}
.colour-explorer-hero .display{font-size:clamp(4rem,8vw,7.9rem);max-width:900px}
.colour-explorer-hero .display em{color:var(--violet);font-weight:400}
.colour-explorer-intro{padding-bottom:18px}
.spectrum-line{height:18px;margin-top:46px;background:linear-gradient(90deg,#b83f56 0 9%,#d96f45 9% 18%,#efb634 18% 27%,#d9cf4b 27% 36%,#7da55f 36% 45%,#3e9f8a 45% 54%,#3295ba 54% 63%,#456f9d 63% 72%,#766aa4 72% 81%,#b096a4 81% 90%,#aaa79e 90%)}

.colour-browser-section{padding:80px 0 100px}
.colour-browser-heading{display:grid;grid-template-columns:1fr .72fr;gap:60px;align-items:end;margin-bottom:34px}
.colour-browser-heading .h2{font-size:clamp(3rem,5.3vw,5.6rem)}
.colour-browser-heading p{margin:0 0 14px;color:var(--muted);max-width:620px}

.family-filter{display:flex;gap:10px;overflow:auto;padding:4px 2px 18px;scrollbar-width:thin;margin-bottom:22px}
.family-filter-btn{flex:0 0 auto;min-width:118px;border:1px solid var(--line);background:var(--cream);border-radius:18px;padding:8px;text-align:left;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.family-filter-btn:hover,.family-filter-btn:focus-visible{transform:translateY(-2px);box-shadow:0 12px 30px rgba(20,20,18,.08);outline:none}
.family-filter-btn[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.family-filter-btn strong{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;padding:8px 5px 4px}
.family-mini-palette{display:grid;grid-template-columns:repeat(5,1fr);height:28px;overflow:hidden;border-radius:11px}
.family-mini-palette i{display:block}

.swatch-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.colour-swatch{position:relative;aspect-ratio:1.05/1;border:0;border-radius:15px;overflow:hidden;padding:0;background:var(--swatch);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);transition:transform .26s var(--ease),box-shadow .26s var(--ease);min-width:0}
.colour-swatch:hover,.colour-swatch:focus-visible{transform:translateY(-4px) scale(1.015);box-shadow:0 16px 32px rgba(20,20,18,.14);outline:none;z-index:2}
.colour-swatch[aria-pressed="true"]{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--ink),0 16px 32px rgba(20,20,18,.12)}
.colour-swatch-label{position:absolute;left:7px;right:7px;bottom:7px;border-radius:10px;padding:7px 8px;background:rgba(251,248,242,.88);backdrop-filter:blur(7px);color:var(--ink);font-size:.68rem;line-height:1.2;text-align:left;opacity:0;transform:translateY(8px);transition:.2s}
.colour-swatch-label strong{display:block;font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.colour-swatch-label span{display:block;color:#666;margin-top:2px}
.colour-swatch:hover .colour-swatch-label,.colour-swatch:focus-visible .colour-swatch-label,.colour-swatch[aria-pressed="true"] .colour-swatch-label{opacity:1;transform:none}
.swatch-empty{grid-column:1/-1;padding:44px;border:1px dashed var(--line);border-radius:24px;text-align:center;color:var(--muted)}

.selected-colour-section{padding:96px 0;background:#eae5dc;scroll-margin-top:92px;outline:none}
.selected-colour-section:focus-visible{outline:none}
.selected-colour-kicker{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:20px}
.selection-status{font-size:.82rem;color:var(--muted)}
.selected-colour-grid{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:28px;align-items:stretch}
.room-visualizer-card,.selected-colour-panel{background:var(--cream);border:1px solid var(--line);border-radius:32px;overflow:hidden;box-shadow:0 20px 54px rgba(20,20,18,.08)}
.room-canvas-wrap{aspect-ratio:1/1;background:#ddd;overflow:hidden;position:relative}
.room-preview{--wall-colour:#EADBDE;isolation:isolate;background:#d9d7d4}
.room-preview>img,.room-preview>span{position:absolute;inset:0;width:100%;height:100%;display:block}
.room-photo-fallback{z-index:0;object-fit:cover}
.room-wall-base{z-index:1;background-color:var(--wall-colour);transition:background-color .35s ease}
.room-wall-luminance{z-index:2;object-fit:cover;mix-blend-mode:luminosity;pointer-events:none}
.room-foreground{z-index:3;object-fit:cover;pointer-events:none}
.fandeck-source-status{min-height:1.1em;margin:10px 0 16px;font-size:.76rem;color:var(--muted)}
.fandeck-source-status.is-warning{color:#87532d}
.room-caption{display:flex;justify-content:space-between;gap:16px;padding:15px 18px;color:var(--muted);font-size:.76rem;border-top:1px solid var(--line)}
.room-caption span:first-child{font-weight:800;color:var(--ink);text-transform:uppercase;letter-spacing:.12em}

.selected-colour-panel{padding:28px;display:flex;flex-direction:column}
.selected-swatch-large{height:170px;border-radius:22px;background:#eadbde;margin-bottom:26px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:background-color .45s ease}
.selected-heading-row{display:flex;justify-content:space-between;align-items:end;gap:24px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.selected-heading-row h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(2.5rem,4.2vw,4.8rem);line-height:.95;font-weight:400;margin:.12em 0 .08em}
.selected-heading-row p{margin:0;color:var(--muted);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.selected-hex{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.9rem;background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 12px;white-space:nowrap}

.harmony-block{padding-top:28px}
.harmony-block+.harmony-block{margin-top:8px;border-top:1px solid var(--line)}
.harmony-heading{display:grid;grid-template-columns:.7fr 1fr;gap:22px;align-items:end;margin-bottom:14px}
.harmony-heading h3{font-family:Georgia,"Times New Roman",serif;font-size:1.9rem;font-weight:400;margin:.15em 0 0}
.harmony-heading p{font-size:.86rem;color:var(--muted);margin:0}
.harmony-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.harmony-chip{border:1px solid var(--line);border-radius:16px;background:#fff;padding:6px;text-align:left;transition:transform .2s,box-shadow .2s}
.harmony-chip:hover,.harmony-chip:focus-visible{transform:translateY(-2px);box-shadow:0 10px 22px rgba(20,20,18,.08);outline:none}
.harmony-chip-colour{display:block;height:72px;border-radius:11px;background:var(--harmony);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.harmony-chip-meta{display:flex;justify-content:space-between;gap:8px;padding:7px 3px 1px;font-size:.68rem;color:var(--muted)}
.harmony-chip-meta strong{color:var(--ink);font-weight:700}
.palette-help{font-size:.78rem;color:var(--muted);margin:24px 0 0}

.colour-note-section{padding:80px 0 110px}
.colour-note{display:grid;grid-template-columns:.45fr 1.2fr auto;gap:34px;align-items:start;padding-top:26px;border-top:1px solid var(--line)}
.colour-note p{margin:0;color:var(--muted);max-width:850px}

@media(max-width:1080px){
  .colour-explorer-hero-grid{grid-template-columns:1fr;gap:24px}
  .colour-browser-heading{grid-template-columns:1fr;gap:16px}
  .swatch-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .selected-colour-grid{grid-template-columns:1fr 1fr}
  .harmony-heading{grid-template-columns:1fr}
  .colour-note{grid-template-columns:1fr 2fr}.colour-note .btn{grid-column:2;justify-self:start}
}

@media(max-width:780px){
  .colour-explorer-hero{padding:118px 0 38px}
  .colour-explorer-hero .display{font-size:clamp(3.4rem,16vw,5.8rem)}
  .spectrum-line{height:12px;margin-top:30px}
  .colour-browser-section{padding:58px 0 72px}
  .family-filter{margin-inline:-14px;padding-inline:14px}
  .family-filter-btn{min-width:105px}
  .swatch-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .colour-swatch{border-radius:12px;aspect-ratio:1/1.05}
  .colour-swatch-label{opacity:1;transform:none;padding:6px;font-size:.61rem;left:5px;right:5px;bottom:5px;background:rgba(251,248,242,.82)}
  .colour-swatch-label strong{font-size:.65rem}
  .selected-colour-section{padding:62px 0;scroll-margin-top:74px}
  .selected-colour-grid{grid-template-columns:1fr;gap:16px}
  .room-visualizer-card,.selected-colour-panel{border-radius:24px}
  .selected-colour-panel{padding:20px}
  .selected-swatch-large{height:112px;border-radius:18px}
  .selected-heading-row{align-items:start;flex-direction:column;gap:12px}
  .harmony-grid{grid-template-columns:repeat(3,1fr)}
  .harmony-chip-colour{height:64px}
  .harmony-chip-meta{display:block}.harmony-chip-meta span{display:block;margin-top:2px}
  .room-caption{display:grid;gap:4px}
  .colour-note{grid-template-columns:1fr;gap:18px}.colour-note .btn{grid-column:auto}
}

@media(max-width:480px){
  .swatch-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .family-filter-btn{min-width:94px}
  .selected-colour-kicker{display:grid}
  .harmony-chip-colour{height:54px}
  .harmony-chip{padding:5px}
  .harmony-chip-meta{font-size:.59rem}
}

@media(prefers-reduced-motion:reduce){
  .colour-swatch,.selected-swatch-large,.harmony-chip,.room-wall-base{transition:none!important}
}