@font-face {
  font-family: 'Barlow Condensed';
  src: url('fonts/barlow-condensed-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nunito Sans';
  src: url('fonts/nunito-sans.woff2') format('woff2');
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --lavender: #d9d0ee;
  --cream: #fff6e6;
  --apricot: #f5a187;
  --plum: #412f45;
  --coral: #d9522e;
  --photo-paper: #fff9ee;
  --display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --body: 'Nunito Sans', 'Trebuchet MS', sans-serif;
  --gutter: clamp(1.125rem, 4.5vw, 4rem);
  --frame: clamp(.45rem, 1vw, .875rem);
  --photo-shadow: 0 12px 23px rgb(65 47 69 / 18%);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--lavender);
  color: var(--plum);
  font: 600 1rem/1.5 var(--body);
}

h1, p, figure { margin: 0; }
a { color: inherit; }
a, button { -webkit-tap-highlight-color: rgb(65 47 69 / 16%); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--plum); outline-offset: 5px; }

.wrap {
  width: min(100% - 2 * var(--gutter), 75rem);
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  z-index: 4;
  inset: 1rem auto auto 1rem;
  translate: 0 -200%;
  padding: .625rem .875rem;
  background: var(--photo-paper);
}

.skip-link:focus { translate: 0; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .125rem 1.25rem;
  padding-block: clamp(.7rem, 2vw, 1.5rem);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 44px;
  font: 800 clamp(1.55rem, 3.4vw, 2.85rem)/1 var(--display);
  letter-spacing: -.018em;
  text-decoration: none;
}

.wordmark-rays {
  display: inline-flex;
  flex: 0 0 clamp(.95rem, 2.1vw, 1.65rem);
  color: var(--coral);
  transform: rotate(-52deg);
}

.wordmark-rays svg, .hero-rays svg, .product-rays svg { width: 100%; }

.site-header nav {
  display: flex;
  gap: 0 clamp(.9rem, 3vw, 2.75rem);
  flex-wrap: wrap;
}

.site-header nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 750;
  text-decoration: none;
}

.site-header nav a:hover { text-decoration: underline; text-underline-offset: .24em; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(1.1rem, 4vw, 3.75rem);
  align-items: start;
  padding-block: clamp(1.45rem, 4vw, 3.6rem) clamp(3.7rem, 7vw, 6.2rem);
}

.hero-photos {
  position: relative;
  padding: 0 0 10% 2%;
}

.photo-frame {
  padding: var(--frame);
  background: var(--photo-paper);
  box-shadow: var(--photo-shadow);
}

picture { display: block; overflow: hidden; }

picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-portrait {
  width: 87%;
  transform: rotate(-3deg);
}

.hero-portrait picture { aspect-ratio: 1 / 1.035; }
.hero-portrait img { object-position: 53% 50%; }

.hero-woodland {
  position: absolute;
  inset: auto -1% 0 auto;
  width: 46%;
  transform: rotate(5deg);
}

.hero-woodland picture { aspect-ratio: .98; }
.hero-woodland img { object-position: 53% 54%; }

.hero-text {
  position: relative;
  margin-top: clamp(.35rem, 2.3vw, 2.05rem);
  padding-bottom: clamp(2.7rem, 6vw, 5.5rem);
}

.hero h1 {
  position: relative;
  z-index: 1;
  font: 800 clamp(3.45rem, 9vw, 8.2rem)/.81 var(--display);
  letter-spacing: -.026em;
}

.hero h1 span { display: block; width: fit-content; }
.hero h1 span:nth-child(2) { margin-inline-start: .28em; }
.hero h1 span:nth-child(3) { margin-inline-start: .57em; }

.hero-rays {
  position: absolute;
  inset: 40% 0 auto auto;
  width: clamp(2rem, 5vw, 4.5rem);
  color: var(--coral);
  transform: rotate(12deg);
}

.hero-paw {
  position: absolute;
  inset: auto 9% 0 auto;
  width: clamp(2.8rem, 7vw, 5.9rem);
  height: auto;
  transform: rotate(16deg);
}

.paper-band { position: relative; background: var(--paper); }

.paper-edge {
  position: absolute;
  inset: auto 0 calc(100% - 1px);
  display: block;
  width: 100%;
  height: clamp(15px, 2.2vw, 31px);
  color: var(--paper);
  pointer-events: none;
}

.treats {
  --paper: var(--cream);
  padding-block: clamp(1.6rem, 4.4vw, 3.5rem) clamp(3.9rem, 7vw, 6rem);
}

.treats-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.09fr) minmax(0, .91fr);
  grid-template-areas: 'ears origin' 'strips paws';
  align-items: center;
  gap: clamp(1.7rem, 4.4vw, 4rem) clamp(2.25rem, 7vw, 6.5rem);
}

.pig-ears { grid-area: ears; }
.pork-strips { grid-area: strips; }
.paws-bones { grid-area: paws; }

.product {
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(.6rem, 1.2vw, .875rem);
}

.product-rays {
  position: absolute;
  inset: -.85rem auto auto -.15rem;
  width: clamp(1.5rem, 4vw, 3.2rem);
  color: var(--coral);
  transform: rotate(-55deg);
  pointer-events: none;
}

.product picture {
  width: 100%;
  border: clamp(4px, .7vw, 8px) solid var(--photo-paper);
  box-shadow: 0 8px 18px rgb(65 47 69 / 11%);
}

.pig-ears picture { aspect-ratio: 1.55; border-radius: 2% 5% 3% 4%; transform: rotate(-2deg); }
.pig-ears img { object-position: 52% 46%; }
.pork-strips picture { width: 94%; aspect-ratio: 1.67; border-radius: 3% 4% 4% 3%; transform: rotate(1.5deg); }
.pork-strips img { object-position: 37% 53%; scale: 1.08; transform-origin: 40% 50%; }
.paws-bones { align-self: end; }
.paws-bones picture { width: 92%; aspect-ratio: 1.24; border-radius: 5% 3% 6% 4%; transform: rotate(-2.5deg); }
.paws-bones img { object-position: 51% 58%; }

.product figcaption {
  padding: .24em .85em .32em;
  background: var(--lavender);
  font: 800 clamp(1.65rem, 3.1vw, 2.65rem)/1 var(--display);
  clip-path: polygon(5% 8%, 21% 2%, 45% 6%, 76% 2%, 96% 9%, 100% 21%, 97% 37%, 100% 55%, 97% 70%, 99% 84%, 93% 94%, 56% 98%, 36% 94%, 8% 99%, 1% 88%, 4% 70%, 0 56%, 3% 39%, 0 23%);
}

.pork-origin {
  position: relative;
  grid-area: origin;
  align-self: start;
  max-width: 28rem;
  margin-top: clamp(1rem, 3vw, 2.65rem);
  font-size: clamp(1.12rem, 2.6vw, 2rem);
  font-weight: 750;
  line-height: 1.26;
}

.origin-arrow {
  position: absolute;
  inset: .15em auto auto -2.7em;
  width: 2.6em;
  color: var(--coral);
  transform: rotate(-5deg);
}

.story {
  --paper: var(--apricot);
  padding-block: clamp(2rem, 4.2vw, 4rem) clamp(3.45rem, 6vw, 5.65rem);
}

.story-layout {
  display: grid;
  grid-template-columns: minmax(0, .89fr) minmax(0, 1.11fr);
  gap: clamp(2.1rem, 6vw, 6.2rem);
  align-items: center;
  max-width: 64rem;
}

.story-photo {
  position: relative;
  width: 93%;
  margin-inline: auto;
  transform: rotate(-3.5deg);
}

.story-photo picture { aspect-ratio: 1.05; }
.story-photo img { scale: 1.85; transform-origin: 54% 37%; }

.story-heart {
  position: absolute;
  inset: -1.35rem auto auto -1.4rem;
  width: clamp(2.65rem, 6vw, 4.75rem);
  color: var(--photo-paper);
  transform: rotate(6deg);
}

.story-copy { font-size: clamp(1.15rem, 2.7vw, 2rem); line-height: 1.34; font-weight: 700; }
.story-underline { display: block; width: 4.4em; margin-block: .42em .52em; color: var(--photo-paper); }
.made-in { font-size: .83em; }

.site-footer { --paper: var(--lavender); padding-block: 1rem 1.5rem; }

.contacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: .2rem clamp(1rem, 4vw, 4rem);
}

.contacts a, .contacts button {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  min-height: 44px;
  font: 800 clamp(1.03rem, 2.1vw, 1.5rem)/1.25 var(--body);
  text-decoration: underline;
  text-decoration-thickness: .075em;
  text-underline-offset: .23em;
}

.contacts button {
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.contacts a:hover, .contacts button:hover { text-decoration-thickness: .12em; }
.phone { min-width: 12ch; text-align: center; }

@media (max-width: 680px) {
  .site-header { align-items: flex-start; }
  .site-header nav { flex-basis: 100%; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-top: .9rem; }
  .hero-photos { width: min(100%, 32rem); margin-inline: auto; padding-inline: 3%; }
  .hero-portrait { width: 88%; }
  .hero-woodland { width: 44%; inset-inline-end: 3%; }
  .hero-text { width: min(100%, 28rem); margin: 0 auto; padding: 0 0 0 4%; }
  .hero h1 { font-size: clamp(3.45rem, 13vw, 6.7rem); }
  .hero-paw { inset: auto 10% 0 auto; }
  .hero-rays { inset-inline-end: 13%; }

  .treats-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'ears' 'origin' 'strips' 'paws'; gap: 1.55rem; }
  .product { width: min(100%, 31rem); margin-inline: auto; }
  .pork-origin { margin: 0 auto .3rem; text-align: center; }
  .origin-arrow { display: none; }
  .story-layout { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
  .story-photo { width: min(85%, 24rem); }
  .story-copy { max-width: 32rem; margin-inline: auto; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}