/* Styles for the generated print pages (prints/*.html).
   Hand-rolled, palette lifted from index.html so the pages read as the same shop.
   The build script (tools/build-product-pages.py) never touches this file. */

:root{
  --butter:#FFE08F;
  --butter-deep:#EFC15B;
  --butter-wash:#FFF6DC;
  --cream:#FFFDF6;
  --powder:#C5DEF0;
  --powder-wash:#ECF4FA;
  --ink:#1F2730;
  --ink-soft:#5C6670;
  --shadow:0 10px 30px rgba(31,39,48,.09);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Karla',sans-serif;color:var(--ink);background:var(--cream);line-height:1.6}
h1,h2,h3{font-family:'Cormorant Garamond',serif;font-weight:600;line-height:1.1}
.hand{font-family:'Caveat',cursive}
.mono{font-family:'Space Mono',monospace}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2.5px solid var(--ink);outline-offset:2px;border-radius:3px}

/* ---------- chrome ---------- */
.announce{background:var(--ink);color:var(--cream);text-align:center;padding:9px 16px;font-size:.8rem;letter-spacing:.05em}
.announce .mono{color:var(--butter)}
nav{background:rgba(255,253,246,.93);border-bottom:1px solid rgba(31,39,48,.12)}
.nav-inner{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:20px;padding:12px 24px}
.brand{font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:700;text-decoration:none;display:flex;align-items:center;gap:10px}
.brand img{width:34px;height:34px}
.nav-back{margin-left:auto;font-size:.86rem;text-decoration:none;border-bottom:1.5px solid var(--ink);padding-bottom:1px}

/* ---------- layout ---------- */
main{max-width:1080px;margin:0 auto;padding:34px 24px 60px}
.crumbs{font-family:'Space Mono',monospace;font-size:.7rem;letter-spacing:.05em;color:var(--ink-soft);margin-bottom:22px}
.crumbs a{text-decoration:none;border-bottom:1px solid rgba(31,39,48,.3)}
.product{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}

.shot{border:1.5px solid var(--ink);border-radius:12px;overflow:hidden;background:var(--cream);box-shadow:var(--shadow)}
/* height:auto is required — the width/height attributes on the img are presentational
   hints, so without it the page keeps the attribute height and the art stretches. */
.shot img{width:100%;height:auto}
.shot.contain img{background:var(--butter-wash);padding:26px}

.badge{display:inline-block;background:var(--cream);border:1.5px solid var(--ink);font-family:'Space Mono',monospace;font-size:.62rem;padding:4px 10px;letter-spacing:.05em;margin-bottom:14px}
h1{font-size:clamp(2rem,4.4vw,2.9rem);margin-bottom:6px}
.quote{font-family:'Caveat',cursive;font-size:1.45rem;color:var(--ink);margin-bottom:14px}
.meta{font-size:.86rem;color:var(--ink-soft);margin-bottom:24px}
.blurb{margin-bottom:24px}

.sizes{width:100%;border-collapse:collapse;margin-bottom:22px}
.sizes th{text-align:left;font-family:'Space Mono',monospace;font-size:.66rem;letter-spacing:.06em;color:var(--ink-soft);font-weight:400;padding-bottom:8px}
.sizes td{border-top:1px solid rgba(31,39,48,.16);padding:11px 0}
.sizes td:last-child{text-align:right;font-family:'Space Mono',monospace;font-weight:700}
.sizes .dims{color:var(--ink-soft);font-size:.82rem}

.cta{display:inline-block;background:var(--butter);border:1.5px solid var(--ink);border-radius:99px;
     padding:14px 30px;font-weight:700;text-decoration:none;box-shadow:4px 4px 0 var(--ink);
     transition:transform .12s ease,box-shadow .12s ease}
.cta:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.postage{font-size:.8rem;color:var(--ink-soft);margin-top:12px}

.facts{list-style:none;margin-top:30px;padding-top:22px;border-top:1px solid rgba(31,39,48,.16)}
.facts li{position:relative;padding-left:20px;font-size:.9rem;margin-bottom:7px}
.facts li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--butter-deep)}

/* ---------- more prints ---------- */
.more{margin-top:64px;padding-top:34px;border-top:1.5px solid var(--ink)}
.more h2{font-size:1.7rem;margin-bottom:18px}
.more-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.more-card{text-decoration:none;display:block}
.more-card img{border:1.5px solid var(--ink);border-radius:10px;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.more-card span{display:block;font-size:.84rem;margin-top:8px}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--cream);padding:34px 24px;margin-top:60px}
.foot-inner{max-width:1080px;margin:0 auto;display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;font-size:.84rem}
footer a{text-decoration:none;border-bottom:1px solid rgba(255,253,246,.4)}
.foot-inner .spacer{margin-left:auto}

@media (max-width:820px){
  .product{grid-template-columns:1fr;gap:28px}
  .more-grid{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}