:root {
  --cream:#faf7f2;
  --beige:#e5d1c3;
  --blush:#f0e4db;
  --ink:#171514;
  --muted:#736c67;
  --line:#e9e0d8}

* {
  box-sizing:border-box}

html {
  scroll-behavior:smooth}

body {
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'DM Sans',sans-serif}

button,a {
  font:inherit}

button {
  cursor:pointer}

a {
  color:inherit;
  text-decoration:none}

.announcement {
  text-align:center;
  background:#e8d7cc;
  font-size:11px;
  letter-spacing:1.3px;
  padding:11px}

.header {
  height:95px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 6%;
  border-bottom:1px solid var(--line);
  background:var(--cream);
  position:sticky;
  top:0;
  z-index:20}

.brand img {
  width:175px;
  height:68px;
  object-fit:contain;
  mix-blend-mode:multiply}

.icon-btn {
  background:none;
  border:0;
  font-size:26px;
  width:45px;
  height:45px}

.hamb {
  display:flex;
  flex-direction:column;
  gap:6px;
  width:24px}

.hamb i {
  height:1.5px;
  background:var(--ink);
  width:24px}

.hamb i:nth-child(2) {
  width:17px}

.cart-trigger {
  justify-self:end;
  position:relative}

.cart-trigger span {
  font-size:10px;
  background:var(--ink);
  color:white;
  border-radius:100px;
  position:absolute;
  top:1px;
  right:-3px;
  min-width:18px;
  padding:3px}

.overlay {
  position:fixed;
  inset:0;
  background:#0007;
  z-index:30}

.overlay[hidden] {
  display:none}

.drawer {
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  width:min(390px,90vw);
  padding:30px;
  background:var(--cream);
  z-index:40;
  transform:translateX(-105%);
  transition:transform .3s;
  display:flex;
  flex-direction:column;
  box-shadow:5px 0 30px #0001}

.drawer.open {
  transform:translateX(0)}

.cart-drawer {
  left:auto;
  right:0;
  transform:translateX(105%)}

.cart-drawer.open {
  transform:translateX(0)}

.drawer-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  letter-spacing:2px;
  font-size:13px;
  padding-bottom:24px;
  border-bottom:1px solid var(--line)}

.close-btn {
  font-size:31px;
  border:0;
  background:none}

.drawer nav {
  display:flex;
  flex-direction:column;
  padding:24px 0;
  gap:25px}

.drawer nav a {
  font-size:16px}

.drawer nav a:hover,.text-link:hover {
  color:#a87e6d}

.drawer>p {
  margin-top:auto;
  font-family:Italiana,serif;
  font-size:24px;
  color:var(--muted)}

.hero {
  min-height:550px;
  display:grid;
  grid-template-columns:1.1fr .9fr}

.hero-copy {
  padding:100px 8% 65px 12%;
  display:flex;
  flex-direction:column;
  align-items:flex-start}

.eyebrow {
  font-size:11px;
  letter-spacing:3px;
  font-weight:700;
  color:#9a7d6e}

.hero h1,.section h2,.about h2 {
  font-family:Italiana,serif;
  font-weight:400;
  line-height:1.1}

.hero h1 {
  font-size:clamp(50px,6vw,92px);
  margin:22px 0}

.hero h1 em,.about h2 em {
  font-weight:400;
  color:#b08e7e}

.hero p,.section-head p,.about p,.contact p {
  line-height:1.9;
  color:var(--muted);
  max-width:470px;
  font-size:14px}

.btn {
  display:inline-flex;
  gap:24px;
  justify-content:center;
  align-items:center;
  padding:17px 25px;
  font-size:12px;
  letter-spacing:1px;
  border:1px solid var(--ink);
  margin-top:25px}

.btn-dark {
  background:var(--ink);
  color:white}

.btn:hover {
  opacity:.82}

.hero-foot {
  font-size:10px;
  letter-spacing:2px;
  color:var(--muted);
  margin-top:auto;
  padding-top:55px}

.hero-art {
  background:#e9d8cc;
  min-height:500px;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  position:relative;
  overflow:hidden}

.art-circle {
  border:1px solid #bea99c;
  border-radius:50%;
  width:330px;
  height:330px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transform:rotate(-9deg)}

.art-circle span {
  font:110px Italiana,serif;
  letter-spacing:-10px}

.art-circle small {
  font-size:11px;
  letter-spacing:7px;
  text-transform:uppercase}

.art-caption {
  position:absolute;
  bottom:34px;
  right:30px;
  font:22px Italiana,serif}

.benefits {
  display:flex;
  justify-content:space-around;
  gap:20px;
  padding:22px;
  background:#f2e9e2;
  font-size:11px;
  letter-spacing:1px;
  text-align:center}

.section {
  padding:95px 7%}

.section-head {
  text-align:center;
  margin-bottom:45px}

.section-head h2 {
  font-size:clamp(43px,5vw,66px);
  margin:15px 0}

.section-head p {
  margin:auto}

.category-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px}

.category-card {
  min-height:400px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:30px;
  background:#eadbd0;
  overflow:hidden}

.category-card.mug {
  background:#e9e8e1}

.category-art {
  height:250px;
  display:flex;
  align-items:center;
  justify-content:center}

.shirt-art {
  position:relative;
  font:80px Italiana,serif}

.shirt-art span {
  display:block;
  background:#faf7f2;
  padding:50px 70px;
  clip-path:polygon(20% 0,35% 0,40% 9%,60% 9%,65% 0,80% 0,100% 20%,86% 40%,79% 33%,79% 100%,21% 100%,21% 33%,14% 40%,0 20%);
  font-size:33px;
  letter-spacing:3px}

.shirt-art {
  font-size:0}

.mug-art {
  font-size:130px;
  filter:grayscale(1)}

.category-card small {
  font-size:10px;
  letter-spacing:2px}

.category-card h3 {
  font:42px Italiana,serif;
  margin:10px 0}

.category-card div>span {
  font-size:12px}

.products {
  background:#fffdf9}

.filters {
  display:flex;
  justify-content:center;
  gap:12px;
  margin-bottom:32px;
  flex-wrap:wrap}

.filter {
  background:transparent;
  border:1px solid var(--line);
  padding:10px 22px;
  font-size:12px}

.filter.active {
  background:var(--ink);
  color:white}

.product-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px}

.product-card {
  min-width:0}

.product-visual {
  height:270px;
  background:#eee5dc;
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative}

.product-visual.mug-visual {
  background:#e7e6e0}

.product-visual .shape {
  font-size:105px;
  filter:grayscale(1)}

.product-visual .mock-shirt {
  width:160px;
  height:175px;
  background:#f9f6f0;
  clip-path:polygon(22% 0,37% 0,42% 8%,58% 8%,63% 0,78% 0,100% 20%,85% 38%,78% 32%,78% 100%,22% 100%,22% 32%,15% 38%,0 20%);
  display:grid;
  place-items:center;
  font:21px Italiana,serif;
  letter-spacing:2px}

.product-visual .mock-shirt.black {
  background:#292727;
  color:white}

.product-info {
  padding:18px 0}

.product-info small {
  color:var(--muted);
  font-size:10px;
  letter-spacing:1.5px}

.product-info h3 {
  font-size:14px;
  font-weight:500;
  margin:10px 0}

.product-info strong {
  font-size:14px}

.add-btn {
  display:block;
  width:100%;
  background:none;
  border:1px solid var(--ink);
  padding:12px;
  margin-top:15px;
  font-size:11px}

.add-btn:hover {
  background:var(--ink);
  color:white}

.about {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8%;
  align-items:center;
  background:#eee2d9;
  padding:100px 10%}

.about-symbol {
  font:clamp(100px,18vw,260px) Italiana,serif;
  text-align:center;
  letter-spacing:-15px}

.about-symbol span {
  font:55px 'DM Sans',sans-serif;
  color:#b59280;
  vertical-align:middle}

.about h2 {
  font-size:clamp(42px,5vw,70px);
  margin:20px 0}

.text-link {
  font-size:13px;
  text-decoration:underline;
  text-underline-offset:7px;
  display:inline-block;
  margin-top:15px}

.contact {
  text-align:center}

.contact h2 {
  font:clamp(50px,6vw,85px) Italiana,serif;
  margin:20px 0}

.contact p {
  margin:auto}

footer {
  border-top:1px solid var(--line);
  padding:35px 7%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  color:var(--muted);
  font-size:12px}

footer strong {
  font:33px Italiana,serif;
  color:var(--ink)}

footer strong small {
  display:block;
  font:8px 'DM Sans',sans-serif;
  letter-spacing:3px}

.cart-items {
  flex:1;
  overflow:auto;
  padding:20px 0}

.cart-row {
  border-bottom:1px solid var(--line);
  padding:16px 0;
  display:flex;
  justify-content:space-between;
  gap:10px}

.cart-row strong {
  font-size:13px}

.cart-row small {
  display:block;
  color:var(--muted);
  margin:7px 0}

.qty {
  display:flex;
  gap:12px;
  align-items:center}

.qty button {
  border:1px solid var(--line);
  background:none;
  width:28px;
  height:28px}

.remove {
  background:none;
  border:0;
  text-decoration:underline;
  font-size:11px;
  color:var(--muted)}

.cart-bottom {
  border-top:1px solid var(--line);
  padding-top:20px}

.cart-total {
  display:flex;
  justify-content:space-between}

.full {
  width:100%}

.cart-bottom small {
  display:block;
  text-align:center;
  margin-top:12px;
  color:var(--muted)}

@media(max-width:900px) {
  .product-grid {
  grid-template-columns:repeat(2,1fr)}

.hero-copy {
  padding:70px 8%}

.art-circle {
  width:260px;
  height:260px}

.art-circle span {
  font-size:85px}

}

@media(max-width:650px) {
  .header {
  height:75px;
  padding:0 18px}

.brand img {
  width:140px;
  height:55px}

.hero {
  grid-template-columns:1fr}

.hero-copy {
  padding:65px 7% 50px}

.hero-art {
  min-height:320px}

.art-circle {
  width:235px;
  height:235px}

.hero-foot {
  padding-top:35px}

.benefits {
  flex-direction:column;
  gap:13px}

.section {
  padding:65px 5%}

.category-grid {
  grid-template-columns:1fr}

.category-card {
  min-height:340px}

.category-art {
  height:200px}

.product-grid {
  gap:12px}

.product-visual {
  height:210px}

.product-visual .mock-shirt {
  transform:scale(.75)}

.product-visual .shape {
  font-size:75px}

.about {
  grid-template-columns:1fr;
  padding:70px 8%}

.about-symbol {
  font-size:150px}

footer {
  flex-direction:column;
  text-align:center}

}