:root{color-scheme:light;--ink:#201e1c;--muted:#615a54;--border:#e4dfd9;--paper:#fcfaf7;--rust:#8a3c26;font-family:"Instrument Sans",Arial,sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}
body{margin:0}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid var(--rust);outline-offset:4px}
.wrap{width:calc(100% - 72px);max-width:1320px;margin-inline:auto}
.skip{position:absolute;z-index:2;left:12px;top:8px;padding:12px;background:white;transform:translateY(-180%)}
.skip:focus{transform:none}
.announcement{background:#25221f;color:#fff;text-align:center;padding:9px 16px;font-size:12px;letter-spacing:.09em}
.site-header{background:#fff;border-bottom:1px solid var(--border)}
.header-inner,.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:74px}
.brand{font-size:clamp(21px,3vw,28px);font-weight:800;letter-spacing:-.055em;white-space:nowrap}
nav{display:flex;align-items:center;gap:clamp(14px,2.8vw,40px);font-size:14px}
nav a{padding:10px 0}
nav a:hover{text-decoration:underline;text-underline-offset:5px}
.hero{background:#e0d8ce}
.banner,.banner picture,.banner img{display:block;width:100%}
.banner{max-width:1920px;margin:auto}
.banner img{height:auto}
.catalog{padding-block:clamp(32px,5vw,68px)}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:25px}
h1,h2,p{margin:0}
h1{font-size:clamp(32px,4vw,54px);line-height:1.05;letter-spacing:-.06em}
.browse{flex:none;background:var(--ink);color:white;padding:12px 16px;font-size:14px;font-weight:700;border-radius:4px}
.browse:hover{background:var(--rust)}
.browse span,.product-link span{margin-left:4px}
.grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.card,.product{height:100%}
.product{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.product:hover{border-color:#a78a79}
.product-photo{position:relative;aspect-ratio:1.15;background:#fff;padding:18px;border-bottom:1px solid #f0ede9}
.product-photo img{position:absolute;inset:0;padding:18px;display:block;width:100%;height:100%;object-fit:contain}
.product-info{display:flex;flex-direction:column;flex:1;padding:16px;gap:8px}
.category{color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
h2{font-size:17px;line-height:1.25;letter-spacing:-.02em}
.desc{font-size:13px;line-height:1.45;color:var(--muted);margin-bottom:4px}
.price{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:baseline}
.price strong{color:var(--rust);font-size:18px}
.price del{font-size:12px;color:var(--muted)}
.product-link{margin-top:4px;font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.price-note{margin-top:18px;color:var(--muted);font-size:12px;line-height:1.5}
footer{border-top:1px solid var(--border);background:#eee8df}
.footer-inner{min-height:96px}
@media(max-width:850px){.wrap{width:calc(100% - 40px)}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.wrap{width:calc(100% - 28px)}.header-inner{flex-direction:column;justify-content:center;gap:2px;padding-top:12px}.banner img{aspect-ratio:1.18}.grid{gap:10px}.product-info{padding:11px}.product-photo img{padding:12px}.footer-inner{min-height:76px}.footer-inner .brand{font-size:18px}.footer-inner nav{gap:12px}}

.banner {
  position: relative;
  container-type: inline-size;
}
.banner-copy {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: .45cqw;
  padding: .6cqw .85cqw;
  color: #201e1c;
  line-height: 1.25;
  font-size: 1.5cqw;
}
.banner-copy strong { font-size: 2.25cqw; }
.banner-copy-home {
  top: 12%;
  left: 2.9%;
  width: 27%;
  height: 21%;
  background: linear-gradient(105deg, #d7d1c7, #e6e3e0);
}
.banner-copy-tech {
  top: 12%;
  left: 53.9%;
  width: 25%;
  height: 32.5%;
  background: linear-gradient(105deg, #dbd6cf, #e8dfd5);
}
.banner-action {
  margin-top: .35cqw;
  padding: .45cqw 1.25cqw;
  background: #fff;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-weight: 700;
}
@media (max-width: 600px) {
  .banner-copy-tech { display: none; }
  .banner-copy-home {
    top: 12%;
    left: 5.5%;
    width: 54.8%;
    height: 21%;
    gap: .8cqw;
    padding: 1.4cqw 2cqw;
    background: linear-gradient(105deg, #d2c9bd, #e4e2df);
    font-size: 3.3cqw;
  }
  .banner-copy-home strong { font-size: 4.6cqw; }
  .header-inner nav { gap: clamp(6px, 3.4vw, 16px); font-size: 13px; }
  .section-head { gap: 10px; }
  .section-head h1 { font-size: clamp(24px, 7vw, 32px); }
  .browse { padding-inline: 10px; font-size: 12px; }
}

.banner-copy-tech {
  height: auto;
  min-height: 32.5%;
  gap: .5cqw;
  padding: .85cqw;
  font-size: 1.12cqw;
  line-height: 1.4;
}
.banner-copy-tech strong {
  font-size: 1.9cqw;
  line-height: 1.22;
}
.banner-accent { color: #bd251e; }
.banner-copy-tech .banner-action {
  background: #bd251e;
  border-color: #bd251e;
  color: #fff;
  border-radius: 4px;
}