/* Actually Good Prints - gallery wall */
:root{
  --paper:#f7f1ec; --wall:#efe7e0; --ink:#35322d; --soft:#7b736a;
  --teal:#3e7a6e; --clay:#c87f55; --line:#e2d7cd;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:ui-sans-serif,"Segoe UI",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
     font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--teal)}
img{max-width:100%;height:auto;display:block}
.top{display:flex;align-items:center;gap:24px;padding:26px 32px;flex-wrap:wrap}
.wordmark img{width:min(300px,54vw);height:auto}
.wordmark.text{font-family:var(--serif);font-size:26px;letter-spacing:.04em;
  text-transform:uppercase;text-decoration:none;display:flex;gap:.4em}
.wordmark.text span:nth-child(1){color:var(--teal)}
.wordmark.text span:nth-child(2){color:var(--clay)}
.wordmark.text span:nth-child(3){color:var(--ink)}
.top nav{margin-left:auto}
.top nav a{font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;border:1px solid var(--teal);padding:9px 18px;border-radius:2px}
.top nav a:hover{background:var(--teal);color:var(--paper)}
main{max-width:1560px;margin:0 auto;padding:8px 32px 64px}
.hero{max-width:680px;margin:18px 0 46px}
.hero h1{font-family:var(--serif);font-size:clamp(34px,5vw,52px);line-height:1.1;
  margin:0 0 14px;font-weight:600}
.hero p{color:var(--soft);font-size:19px;margin:0}
/* auto-fill alone settles at six across the 1560px container; an explicit
   column count here made cards shrink as the window grew past the breakpoint */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px}
.card{text-decoration:none;color:inherit;display:block}
.card .mat{background:var(--wall);padding:7px;
  box-shadow:0 1px 2px rgba(0,0,0,.10),0 14px 26px -18px rgba(0,0,0,.55);
  transition:transform .15s ease,box-shadow .15s ease}
.card:hover .mat{transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(0,0,0,.12),0 20px 34px -20px rgba(0,0,0,.6)}
.card img{border:1px solid var(--line)}
.card h2{font-family:var(--serif);font-size:15px;font-weight:600;line-height:1.32;
  margin:10px 0 2px}
.card .price{color:var(--soft);font-size:12.5px;margin:0}
.piece{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,1fr);
  max-width:1240px;
  gap:46px;align-items:start}
@media(max-width:880px){.piece{grid-template-columns:1fr;gap:30px}}
.piece figure{margin:0}
.piece .cover{background:var(--wall);padding:14px}
.piece .cover img{border:1px solid var(--ink)}
.piece h1{font-family:var(--serif);font-size:clamp(27px,3.4vw,38px);line-height:1.18;
  margin:0 0 18px;font-weight:600}
.buy{display:inline-block;background:var(--teal);color:var(--paper);
  text-decoration:none;padding:15px 30px;font-size:16px;letter-spacing:.02em;
  border-radius:2px;margin:6px 0 8px}
.buy:hover{background:#33685e}
.meta{color:var(--soft);font-size:14px;margin:0 0 22px}
.desc p{margin:0 0 15px}
details.full{margin:4px 0 6px}
details.full summary{cursor:pointer;color:var(--teal);font-size:15px;
  list-style:none;padding:6px 0}
details.full summary::-webkit-details-marker{display:none}
details.full summary::after{content:" +";font-weight:600}
details.full[open] summary::after{content:" ‘2"}
details.full .desc{padding-top:6px}
details.full h3{font-family:var(--sans);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--soft);margin:22px 0 8px;font-weight:600}
details.full p{font-size:15.5px}
.rooms{margin-top:52px}
.rooms h2,.more h2{font-family:var(--serif);font-size:24px;font-weight:600;
  margin:0 0 20px}
.rooms .grid{grid-template-columns:repeat(4,1fr);gap:16px}
@media(min-width:1500px){.rooms .grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:820px){.rooms .grid{grid-template-columns:repeat(2,1fr)}}
.rooms img{border:1px solid var(--line)}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin:26px 0 0;padding:0;list-style:none}
.tags li{background:var(--wall);color:var(--soft);font-size:13px;padding:4px 10px}
.more{margin-top:70px;border-top:1px solid var(--line);padding-top:36px}
.pager{display:flex;gap:10px;align-items:center;justify-content:center;
  margin:52px 0 10px;font-size:15px}
.pager a,.pager span{padding:9px 15px;text-decoration:none;border:1px solid var(--line)}
.pager .here{background:var(--teal);color:var(--paper);border-color:var(--teal)}
.pager .off{color:var(--soft);opacity:.5}
.foot{border-top:1px solid var(--line);margin-top:70px;padding:30px 32px 60px;
  color:var(--soft);font-size:15px;text-align:center}
.foot .fine{font-size:13px;opacity:.75}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}