/* PBN v2 — PAINT theme "The Material of Colour"
   Ivory + charcoal + terracotta/ochre/sage/mineral. Fraunces + Inter. */
:root{
  --ivory:#F5F1E8; --stone:#DDD7CB; --charcoal:#242320; --black:#161614;
  --terracotta:#B8614B; --ochre:#C49A58; --sage:#819481; --mineral:#718895;
  --ink:#242320; --muted:#6f685c; --line:#e2dccf; --maxw:1200px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--ivory); color:var(--ink);
  font-family:'Inter',system-ui,sans-serif; font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block; background:var(--stone)}
a{color:inherit; text-decoration:none}
h1,h2,h3,.serif{font-family:'Fraunces',Georgia,serif}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 26px}
.muted{color:var(--muted)} .muted.small{font-size:.82rem}
.kicker{font-family:'Inter',sans-serif; text-transform:uppercase; letter-spacing:.16em; font-size:.68rem; font-weight:600; color:var(--terracotta)}
.btn{display:inline-block; background:var(--charcoal); color:var(--ivory); font-weight:500; padding:13px 24px; border-radius:2px; font-size:.9rem; transition:background .2s}
.btn:hover{background:#000}
.btn.ghost{background:transparent; color:inherit; border:1px solid currentColor}
.dot{opacity:.5; margin:0 2px}

/* masthead */
.masthead-top{background:var(--charcoal); background-image:linear-gradient(rgba(22,22,20,.82),rgba(22,22,20,.9)),url('/assets/img/plaster3.jpg'); background-size:cover; background-position:center; color:var(--ivory)}
.masthead-row{display:flex; align-items:center; justify-content:space-between; padding:20px 26px; gap:20px}
.brand{display:flex; align-items:center; gap:14px; color:var(--ivory)}
.brand-mark{width:30px; height:30px; border-radius:50%; background:radial-gradient(circle at 34% 32%, #d87a5f, var(--terracotta) 60%, #8c4231); flex:0 0 30px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.brand-name{font-family:'Fraunces',serif; font-weight:600; font-size:1.3rem; letter-spacing:.01em; display:block; line-height:1}
.brand-tag{display:block; font-size:.68rem; color:#b8b0a1; letter-spacing:.06em; margin-top:5px; text-transform:uppercase}
.search{display:flex; align-items:center; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:3px; overflow:hidden}
.search input{background:transparent; border:0; color:var(--ivory); font-size:.84rem; padding:9px 12px; width:230px; outline:none}
.search input::placeholder{color:#b0a897}
.search button{background:var(--terracotta); color:#fff; border:0; padding:9px 13px; font-size:1rem; cursor:pointer}
.search.big{max-width:520px; margin-top:14px; background:#fff; border-color:var(--line)}
.search.big input{color:var(--ink); width:100%} .search.big button{font-weight:600; font-size:.85rem; padding:11px 18px}
.mainnav{background:var(--black); border-bottom:1px solid #000}
.navrow{display:flex; gap:2px; flex-wrap:wrap; padding:0 26px}
.mainnav a{font-size:.74rem; text-transform:uppercase; letter-spacing:.12em; color:#cbc4b6; padding:13px 15px; border-bottom:2px solid transparent; margin-bottom:-1px; font-weight:500}
.mainnav a:hover{color:#fff; border-color:var(--terracotta)}
.mainnav .nav-home{color:#fff}

/* hero */
main{padding-bottom:60px}
.hero{position:relative; background-size:cover; background-position:center; color:var(--ivory); padding:92px 0 0}
.hero-inner{max-width:var(--maxw); padding:0 26px 120px}
.hero-kicker{color:var(--ochre); text-transform:uppercase; letter-spacing:.2em; font-size:.74rem; font-weight:600}
.hero-title{font-size:4.2rem; line-height:1.02; margin:.3em 0 .35em; font-weight:600; letter-spacing:-.01em; max-width:14ch}
.hero-statement{font-size:1.2rem; max-width:52ch; color:#efe9dd; margin:0 0 1.6em}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap}
.hero-swatches{position:absolute; left:0; right:0; bottom:0; display:flex; height:16px}
.hero-swatches a{flex:1; display:block}

/* bands */
.band{margin:52px 0}
.band-head{display:flex; align-items:baseline; justify-content:space-between; border-bottom:1px solid var(--charcoal); padding-bottom:12px; margin-bottom:26px}
.band-head h2{font-size:1.7rem; font-weight:600; margin:0; letter-spacing:-.01em}
.more{font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--terracotta); font-weight:600}
.grid{display:grid; gap:28px}
.grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)}
.empty{color:var(--muted); padding:40px 0}
.div-h{font-family:'Fraunces',serif; font-size:1.3rem; border-bottom:1px solid var(--charcoal); padding-bottom:8px; margin:30px 0 16px}

/* article cards */
.card{background:#fff; border:1px solid var(--line)}
.card-img{display:block; aspect-ratio:3/2; overflow:hidden; background:var(--stone)}
.card-img img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease}
.card:hover .card-img img{transform:scale(1.04)}
.card-body{padding:18px 20px 20px}
.card-title{font-size:1.28rem; line-height:1.2; margin:.4rem 0 .45rem; font-weight:600}
.card-title a:hover{color:var(--terracotta)}
.card-dek{color:#5b5347; font-size:.96rem; margin:0 0 .8rem}
.card-meta{font-size:.78rem; color:var(--muted); display:flex; align-items:center; gap:7px}
.card-meta .arrow{margin-left:auto; color:var(--terracotta)}

/* category cards */
.catgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.catcard{position:relative; padding:24px 22px 46px; min-height:150px; display:flex; flex-direction:column; border-radius:2px; overflow:hidden}
.cat-name{font-family:'Fraunces',serif; font-size:1.3rem; font-weight:600; line-height:1.1}
.cat-blurb{font-size:.84rem; margin-top:8px; opacity:.85; max-width:30ch}
.cat-arrow{position:absolute; right:20px; bottom:16px; font-size:1.2rem}
.catcard:hover{filter:brightness(1.04)}

/* color swatches */
.swatchrow{display:grid; grid-template-columns:repeat(6,1fr); gap:16px}
.colorcard{display:block}
.cc-swatch{display:block; aspect-ratio:1/1; border-radius:2px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.cc-info{display:flex; flex-direction:column; padding:8px 2px 0}
.cc-name{font-family:'Fraunces',serif; font-size:.98rem; font-weight:600}
.cc-code{font-size:.72rem; color:var(--muted); letter-spacing:.04em}
.colorcard:hover .cc-name{color:var(--terracotta)}

/* product (chip) cards */
.prodgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.prodcard{display:block; background:#fff; border:1px solid var(--line)}
.pc-chip{display:flex; align-items:flex-end; justify-content:flex-end; aspect-ratio:4/3; padding:12px}
.pc-finish{font-size:.64rem; text-transform:uppercase; letter-spacing:.12em; background:rgba(0,0,0,.14); padding:3px 8px; border-radius:2px}
.pc-body{display:block; padding:14px 16px 18px}
.pc-name{display:block; font-family:'Fraunces',serif; font-size:1.12rem; font-weight:600; line-height:1.15; margin:.25rem 0}
.pc-use{display:block; font-size:.82rem; color:var(--muted)}
.prodcard:hover .pc-name{color:var(--terracotta)}

/* family blocks */
.familygrid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.familyblock{display:flex; flex-direction:column; justify-content:flex-end; min-height:120px; padding:18px; border-radius:2px}
.fb-name{font-family:'Fraunces',serif; font-size:1.2rem; font-weight:600}
.fb-count{font-size:.74rem; opacity:.8; text-transform:uppercase; letter-spacing:.08em}

/* finishes */
.finishrow{display:grid; grid-template-columns:repeat(6,1fr); gap:14px}
.finishcard{display:block}
.fin-swatch{display:block; aspect-ratio:1/1; background-size:cover; background-position:center; border-radius:2px}
.fin-name{display:block; text-align:center; font-family:'Fraunces',serif; font-weight:600; margin-top:8px; font-size:.95rem}
.finishlist{display:flex; flex-direction:column; gap:4px}
.finishrow-item{display:flex; gap:26px; align-items:center; padding:22px 0; border-bottom:1px solid var(--line)}
.fi-swatch{width:150px; height:110px; flex:0 0 150px; background-size:cover; background-position:center; border-radius:2px}
.fi-copy h2{margin:0 0 6px; font-size:1.4rem}
.fi-copy p{margin:0; color:#5b5347; max-width:60ch}

/* story cards */
.storygrid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.storygrid.wide{grid-template-columns:repeat(2,1fr)}
.storycard{display:block; background:#fff; border:1px solid var(--line)}
.sc-palette{display:flex; height:120px}
.sc-palette span{flex:1}
.sc-body{display:block; padding:16px 18px 20px}
.sc-title{display:block; font-family:'Fraunces',serif; font-size:1.25rem; font-weight:600; margin:.3rem 0}
.sc-dek{display:block; font-size:.9rem; color:var(--muted)}
.storycard:hover .sc-title{color:var(--terracotta)}

/* material divider */
.material-divider{background-size:cover; background-position:center; background-attachment:fixed; padding:70px 0; margin:56px 0; text-align:center}
.material-divider h2{color:var(--ivory); font-size:1.9rem; font-weight:600; margin:0; max-width:24ch; margin:0 auto; line-height:1.2; text-shadow:0 1px 10px rgba(0,0,0,.3)}

/* explore tiles */
.explore-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.ex-tile{display:flex; align-items:center; justify-content:space-between; background:#fff; border:1px solid var(--line); padding:16px 18px; font-family:'Fraunces',serif; font-size:1rem; font-weight:600}
.ex-tile span{color:var(--terracotta)}
.ex-tile:hover{border-color:var(--charcoal); background:#fbf9f4}

/* product detail */
.prod-hero{padding:48px 40px; border-radius:2px; margin:6px 0 30px}
.prod-hero h1{font-size:2.8rem; font-weight:600; margin:.2em 0 .15em; letter-spacing:-.01em}
.prod-tag{font-size:1.1rem; opacity:.9; margin:0; max-width:50ch}
.prod-body,.colour-body{display:grid; grid-template-columns:1fr 320px; gap:40px}
.pb-main .block{margin-bottom:30px}
.block h2{font-size:1.3rem; font-weight:600; border-bottom:1px solid var(--charcoal); padding-bottom:8px; margin:0 0 14px}
.prose{font-size:1.05rem; line-height:1.75} .prose p{margin:0 0 1rem}
.tick{list-style:none; margin:0; padding:0}
.tick li{padding:8px 0 8px 24px; position:relative; border-bottom:1px solid var(--line)}
.tick li:before{content:""; width:7px; height:7px; background:var(--terracotta); position:absolute; left:0; top:15px; border-radius:50%}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{background:var(--stone); border-radius:2px; padding:5px 12px; font-size:.82rem}
.side-box{background:#fff; border:1px solid var(--line); padding:18px 20px; margin-bottom:20px}
.side-h{font-family:'Fraunces',serif; font-size:1.05rem; font-weight:600; border-bottom:1px solid var(--charcoal); padding-bottom:8px; margin:0 0 12px}
.spec{width:100%; border-collapse:collapse}
.spec th{text-align:left; font-weight:500; color:var(--muted); font-size:.82rem; padding:8px 0; border-bottom:1px solid var(--line); width:42%; vertical-align:top}
.spec td{text-align:right; padding:8px 0; border-bottom:1px solid var(--line); font-size:.88rem}
.pairrow{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.pair span{display:block; aspect-ratio:1/1; border-radius:2px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.pair em{display:block; font-style:normal; font-size:.7rem; color:var(--muted); margin-top:4px; line-height:1.2}
.pair:hover em{color:var(--terracotta)}

/* colour detail */
.colour-hero{min-height:360px; display:flex; align-items:flex-end; padding:0 0 40px; margin-bottom:34px}
.colour-hero h1{font-size:3.4rem; font-weight:600; margin:.1em 0}
.colour-hex{font-family:'Inter',sans-serif; letter-spacing:.1em; font-size:.9rem; opacity:.8; margin:0}
.colour-body{margin-top:0}

/* section / article */
.sec-head{border-bottom:1px solid var(--charcoal); padding-bottom:16px; margin-bottom:28px}
.sec-head h1{font-size:2.5rem; font-weight:600; margin:.25rem 0}
.sec-dek{color:#5b5347; max-width:64ch; margin:0; font-size:1.05rem}
.crumbs{font-size:.8rem; color:var(--muted); margin-bottom:16px}
.crumbs a:hover{color:var(--terracotta)}
.article{max-width:800px}
.art-head h1{font-size:2.6rem; line-height:1.1; font-weight:600; margin:.3rem 0 .4rem; letter-spacing:-.01em}
.art-dek{font-size:1.2rem; color:#4f473c; margin:0 0 1rem}
.art-meta{font-size:.84rem; color:var(--muted); display:flex; gap:8px; align-items:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:12px 0; margin-bottom:24px}
.art-hero{margin:0 0 26px}
.art-hero img{width:100%; aspect-ratio:16/9; object-fit:cover}
.art-body{font-size:1.12rem; line-height:1.8}
.art-body p{margin:0 0 1.15rem}
.art-body h2{font-family:'Fraunces',serif; font-size:1.5rem; font-weight:600; margin:2rem 0 .7rem}

/* guide steps */
.materials{background:#fff; border:1px solid var(--line); padding:20px 24px; margin:24px 0}
.materials h3{font-family:'Fraunces',serif; margin:0 0 10px; font-size:1.1rem}
.steps{margin-top:20px}
.step{display:flex; gap:20px; padding:22px 0; border-top:1px solid var(--line)}
.step-n{font-family:'Fraunces',serif; font-size:1.8rem; font-weight:600; color:var(--terracotta); flex:0 0 54px; line-height:1}
.step-copy h3{margin:0 0 6px; font-size:1.2rem; font-weight:600}
.step-copy p{margin:0; color:#4f473c}

/* colour story palette */
.story-palette{display:flex; margin:0 0 28px; border-radius:2px; overflow:hidden; min-height:150px}
.sp-col{flex:1; display:flex; flex-direction:column; justify-content:flex-end; padding:14px}
.spc-name{font-family:'Fraunces',serif; font-weight:600; font-size:1rem}
.spc-meta{font-size:.68rem; opacity:.85; letter-spacing:.04em}

/* lists */
.hl-list{list-style:none; margin:0; padding:0}
.hl-list li{border-bottom:1px solid var(--line); padding:9px 0}
.hl-list a{font-family:'Fraunces',serif; font-weight:600}
.hl-list a:hover{color:var(--terracotta)}

/* footer */
.site-footer{background:var(--charcoal); color:#cbc4b6; margin-top:50px}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:30px; padding:48px 26px 28px}
.foot-brand .brand-name{color:#fff; font-family:'Fraunces',serif; font-size:1.3rem; font-weight:600}
.foot-nav h4{font-family:'Inter',sans-serif; text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; color:var(--ochre); margin:0 0 12px}
.foot-nav a{display:block; font-size:.9rem; color:#b8b0a1; padding:4px 0}
.foot-nav a:hover{color:#fff}
.foot-legal{border-top:1px solid #3a382f; padding:16px 26px; font-size:.78rem; color:#8a8273}

/* responsive */
@media(max-width:1000px){
  .grid-3,.grid-4,.catgrid,.prodgrid,.familygrid,.explore-grid{grid-template-columns:repeat(2,1fr)}
  .swatchrow,.finishrow{grid-template-columns:repeat(4,1fr)}
  .prod-body,.colour-body{grid-template-columns:1fr}
  .storygrid,.storygrid.wide{grid-template-columns:1fr 1fr}
  .hero-title{font-size:3rem}
  .material-divider{background-attachment:scroll}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  body{font-size:16px}
  .grid-3,.grid-4,.catgrid,.prodgrid,.familygrid,.explore-grid,.storygrid,.storygrid.wide{grid-template-columns:1fr}
  .swatchrow,.finishrow{grid-template-columns:repeat(3,1fr)}
  .search input{width:150px}
  .hero{padding-top:56px} .hero-title{font-size:2.4rem} .hero-inner{padding-bottom:90px}
  .fi-swatch{width:90px; height:80px; flex-basis:90px}
  .foot-grid{grid-template-columns:1fr}
  .prod-hero{padding:32px 24px} .prod-hero h1{font-size:2rem}
}

/* ===== FASE 2 — pagina xfsearch (articolo + commento + blocco link) ===== */
.xfs{display:grid;grid-template-columns:1fr;gap:2rem;max-width:860px}
.xfs-article{background:#fff;border:1px solid var(--line);border-radius:10px;padding:1.6rem 1.8rem}
.xfs-head .kicker{color:var(--terracotta)}
.xfs-head h1{font-family:'Fraunces',Georgia,serif;font-weight:600;line-height:1.1;margin:.3rem 0 .5rem;color:var(--charcoal)}
.xfs-byline{color:var(--muted);font-size:.9rem;margin:0 0 1.1rem}
.xfs-media{margin:0 0 1.2rem;border-radius:8px;overflow:hidden}
.xfs-media img{width:100%;height:auto;display:block}
.xfs-body p{font-family:'Inter',system-ui,sans-serif;font-size:1.04rem;line-height:1.72;margin:0 0 1.1rem;color:var(--ink)}
.xfs-comments{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.xfs-comments h3{font-family:'Fraunces',serif;font-size:1rem;color:var(--muted);margin:0 0 .8rem}
.xcom{background:var(--ivory);border:1px solid var(--line);border-radius:8px;padding:.9rem 1.1rem}
.xcom-who{font-weight:700;color:var(--charcoal);margin-right:.6rem}
.xcom-when{color:var(--muted);font-size:.82rem}
.xcom-text{margin:.4rem 0 0;color:var(--ink)}
.xnet{background:var(--ivory);border:1px solid var(--line);border-radius:10px;padding:1.1rem 1.3rem}
.xnet h4{font-family:'Fraunces',serif;font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 0 .7rem}
.xnet-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem .9rem}
.xnet-list li{font-size:.82rem;line-height:1.5}
.xnet-list a{color:var(--ochre);text-decoration:none}
.xnet-list a:hover{color:var(--terracotta);text-decoration:underline}