:root {
  --paper: #251f28;
  --surface: #302831;
  --raised: #3d333e;
  --ink: #f2eade;
  --muted: #c5b9c5;
  --brass: #c9ab80;
  --lilac: #d0afdf;
  --line: #534650;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1rem/1.75 Arial, Helvetica, sans-serif; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1,h2,h3,p { margin-top: 0; }
h1,h2,h3 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; line-height: 1.12; }
h1,h2 { letter-spacing: -.035em; }
h2 em { color: var(--lilac); font-weight: 400; }
a:focus-visible,summary:focus-visible { outline: 2px solid var(--lilac); outline-offset: 7px; }
.skip { position: absolute; top: -100px; background: var(--ink); color: var(--paper); padding: 15px; z-index: 5; }
.skip:focus { top: 0; }
header { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 28px 6%; border-bottom: 1px solid var(--line); background: var(--paper); }
.brand { width: 152px; flex-shrink: 0; }
nav { display: flex; gap: 32px; }
nav a,.availability-link { text-decoration: none; font-size: .875rem; }
nav a:hover,.availability-link:hover { color: var(--lilac); }
.availability-link { color: var(--brass); border-bottom: 1px solid var(--brass); padding: 8px 0; }
.hero { display: grid; grid-template-columns: 46% 54%; max-width: 1800px; margin: auto; padding: 38px 3% 38px 6%; }
.hero-copy { padding: 50px 12% 50px 0; align-self: center; }
.eyebrow { color: var(--brass); font-size: .75rem; letter-spacing: .19em; line-height: 1.65; font-weight: 500; margin-bottom: 26px; }
h1 { font-size: clamp(3.5rem, 6.5vw, 7rem); margin-bottom: 32px; line-height: 1.03; }
h1 em { color: var(--lilac); font-weight: 400; }
.intro { max-width: 350px; font-size: 1.0625rem; color: var(--muted); margin-bottom: 36px; }
.button { display: inline-flex; gap: 35px; align-items: center; border: 1px solid var(--brass); color: var(--ink); padding: 14px 23px; text-decoration: none; font-size: .875rem; transition: background .2s, color .2s; }
.button:hover { background: var(--brass); color: var(--paper); }
.button span { color: var(--brass); font-size: 22px; }
.button:hover span { color: var(--paper); }
.hero-note { font-size: .8125rem; color: var(--muted); margin: 28px 0 0; }
.hero-photo { min-height: 660px; position: relative; border: 1px solid #655046; overflow: hidden; }
.hero-photo>img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 50% 43%; }
.hero-photo figcaption { position: absolute; bottom: 20px; left: 20px; right: 20px; padding: 13px 14px; text-align: center; background: #251f28e8; border: 1px solid #c9ab8055; font-size: .75rem; letter-spacing: .14em; }
.collection-note { display: flex; justify-content: space-around; gap: 20px; padding: 23px 6%; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--brass); font-size: .8125rem; letter-spacing: .04em; }
.section { padding: 100px 6%; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 45px; }
.section-heading .eyebrow { margin-bottom: 18px; }
h2 { font-size: clamp(2.4rem,4vw,4rem); margin-bottom: 0; }
.section-heading>p { max-width: 355px; color: var(--muted); margin-bottom: 3px; }
.collection { background: var(--surface); }
.sets { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.sets article>img { width: 100%; height: auto; padding: 0; border: 1px solid #68585e; }
.sets article:nth-child(2)>img { border-color: #72584d; }
.set-caption { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 25px; }
h3 { font-size: 1.875rem; margin: 0; }
.set-caption span { font-size: .875rem; white-space: nowrap; color: var(--brass); }
.set-caption strong { font-weight: 500; }
.sets article>p { color: var(--muted); font-size: 1rem; margin: 10px 0 0; }
.pieces { border-top: 1px solid var(--line); background: #211d20; }
.pieces-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 42px 27px; }
.pieces-grid img { width: 100%; aspect-ratio: 1.35; object-fit: cover; border: 1px solid #5b4234; }
.pieces-grid h3 { font-size: 1.65rem; margin-top: 23px; }
.pieces-grid h3 span { font-family: Arial,sans-serif; font-size: .75rem; color: var(--brass); margin-right: 12px; vertical-align: middle; }
.pieces-grid p { font-size: 1rem; color: var(--muted); margin: 12px 0 0; }
.details { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 8%; background: #463848; }
.detail-photo { border: 1px solid #887367; padding: 12px; }
.detail-photo img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.detail-copy>p:not(.eyebrow) { max-width: 435px; margin-top: 26px; color: #dfd4df; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 28px; font-size: .8125rem; color: #e1c69e; }
.detail-tags span { border-bottom: 1px solid #9a7f80; padding-bottom: 5px; }
.packaging { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.7fr); align-items: center; gap: 6%; background: #211d20; border-bottom: 1px solid var(--line); }
.packaging-copy h2 { margin-bottom: 28px; }
.packaging-copy>p:not(.eyebrow) { color: var(--muted); max-width: 390px; }
.packaging-photos { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.packaging-photos figure:nth-child(2) { margin-top: 42px; }
/* Frame the original photographs closely while keeping each complete box visible. */
.packaging-frame { aspect-ratio: .9; overflow: hidden; border: 1px solid #796674; }
.packaging-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 54% center; }
.packaging-photos figure:nth-child(2) img { object-position: 56% center; }
.packaging-photos figcaption { padding-top: 16px; font-family: Georgia, 'Times New Roman', serif; font-size: 1.375rem; line-height: 1.4; }
.packaging-photos figcaption span { display: block; margin-top: 7px; font: .75rem/1.6 Arial, Helvetica, sans-serif; letter-spacing: .12em; color: var(--brass); }
@media(max-width:1000px) { .packaging { grid-template-columns: 1fr; gap: 30px; } .packaging-copy>p:not(.eyebrow) { max-width: 620px; } .packaging-copy h2 br { display: none; } .packaging-copy h2 em::before { content: ' '; } }
@media(max-width:580px) { .packaging-photos { grid-template-columns: 1fr; gap: 32px; } .packaging-photos figure:nth-child(2) { margin-top: 0; } }
.family { background: var(--paper); }
.family .section-heading>p { max-width: 320px; }
.dog-gallery { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; align-items: start; }
.dog-photo { padding: 8px; border: 1px solid var(--line); background: #30282f; }
.dog-photo img { width: 100%; height: auto; aspect-ratio: .8; object-fit: cover; object-position: center; }
.dog-photo-1,.dog-photo-2 { grid-column: span 2; }
.dog-photo-1 img,.dog-photo-2 img { aspect-ratio: 1.16; object-position: 50% 36%; }
.dog-photo-4,.dog-photo-6,.dog-photo-8,.dog-photo-10 { margin-top: 35px; }
.dog-photo-7 img { object-fit: contain; background: #241f25; }
.dog-photo-8 img { object-position: 50% 50%; }
.dog-photo-10 img { object-position: 50% 37%; }
.sizing { display: grid; grid-template-columns: 1fr 1fr; gap: 10%; border-top: 1px solid var(--line); background: var(--surface); }
.sizing>div>p:last-child { max-width: 420px; color: var(--muted); margin-top: 25px; }
.size-guides { min-width: 0; }
details { border-bottom: 1px solid #75616f; }
summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; font-size: 1.0625rem; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary span { color: var(--brass); font-size: 25px; font-weight: 300; }
details[open] summary span { transform: rotate(45deg); }
table { border-collapse: collapse; width: 100%; font-size: .875rem; text-align: left; margin: 10px 0 22px; }
caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
th,td { padding: 11px 14px; border-bottom: 1px solid var(--line); }
thead th { font-weight: 500; color: var(--brass); background: #3f333e; }
tbody th { font-weight: 500; }
.size-note { font-size: .875rem; line-height: 1.8; }
.table-wrap { overflow-x: auto; }
.availability { text-align: center; background: #382d3d; border-top: 1px solid #7b626f; border-bottom: 1px solid #7b626f; }
.availability h2 { margin-bottom: 25px; }
.availability>p:not(.eyebrow) { max-width: 580px; margin-left: auto; margin-right: auto; color: #ddd0df; }
.availability .rrp-note { font-size: .8125rem; color: var(--muted); margin-top: 30px; }
footer { padding: 42px 6%; display: flex; align-items: center; justify-content: space-between; gap: 30px; background: #211b24; }
footer img { width: 140px; }
footer p,footer span { font-size: .8125rem; color: var(--muted); margin: 0; }
@media(min-width:1700px) { .hero-photo { min-height: 800px; } .section { padding-left: max(6%,calc((100vw - 1600px)/2)); padding-right: max(6%,calc((100vw - 1600px)/2)); } }
@media(max-width:1000px) { header { gap: 20px; } nav { gap: 22px; } .hero-photo { min-height: 590px; } .hero-copy { padding-right: 8%; } h1 { font-size: 4rem; } .set-caption { display: block; } .set-caption span { display: block; margin-top: 12px; } .dog-gallery { gap: 16px; } }
@media(max-width:800px) { header { padding: 22px 6%; flex-wrap: wrap; } .brand { width: 138px; } nav { order: 3; width: 100%; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding-top: 18px; } .hero { padding: 30px 5%; gap: 20px; grid-template-columns: 46% 54%; } .hero-copy { padding-right: 10%; } .hero-photo { min-height: 550px; margin-right: 20px; } h1 { font-size: clamp(2.8rem,6vw,4rem); } .hero-photo figcaption { left: 10px; right: 10px; padding: 10px; font-size: .75rem; letter-spacing: .07em; } .button { gap: 15px; padding: 12px 16px; } .section { padding: 70px 6%; } .section-heading { display: block; } .section-heading>p { margin-top: 24px; max-width: 480px; } .details { gap: 6%; } .pieces-grid { gap: 30px 18px; } .pieces-grid h3 { font-size: 1.4rem; } .pieces-grid h3 span { display: block; margin-bottom: 10px; } .dog-gallery { grid-template-columns: 1fr 1fr; gap: 20px; } .dog-photo-1,.dog-photo-2 { grid-column: auto; } .dog-photo-1 img,.dog-photo-2 img { aspect-ratio: .8; } .dog-photo:nth-child(even) { margin-top: 30px; } .sizing { gap: 6%; } footer { flex-wrap: wrap; } }
@media(max-width:580px) { nav a { font-size: .8125rem; } .hero { grid-template-columns: 1fr; padding: 0 6% 26px; gap: 0; } .hero-copy { padding: 45px 0 40px; } h1 { font-size: clamp(3.6rem,14vw,5rem); } .hero-photo { min-height: 475px; margin-right: 0; } .hero-photo>img { object-position: 50% 40%; } .hero .eyebrow { margin-bottom: 22px; } .hero-note { margin-top: 22px; } .collection-note { flex-wrap: wrap; gap: 7px 20px; padding: 20px 6%; } .collection-note span:last-child { flex-basis: 100%; text-align: center; } .sets { grid-template-columns: 1fr; gap: 42px; } .section { padding: 60px 6%; } .section-heading { margin-bottom: 30px; } h2 { font-size: 2.6rem; } h3 { font-size: 1.7rem; } .set-caption { display: flex; } .set-caption span { margin-top: 0; } .pieces-grid { grid-template-columns: 1fr 1fr; gap: 32px 16px; } .pieces-grid img { aspect-ratio: 1.08; } .pieces-grid h3 { font-size: 1.4rem; } .pieces-grid p { font-size: .9375rem; } .details,.sizing { grid-template-columns: 1fr; gap: 35px; } .detail-copy { order: -1; } .dog-gallery { gap: 14px; } .dog-photo { padding: 4px; } .dog-photo img { aspect-ratio: .72; } .dog-photo-2 { grid-column: 1/-1; margin-top: 0; } .dog-photo-2 img { aspect-ratio: 1.1; } .dog-photo-10 { grid-column: 1/-1; max-width: 80%; justify-self: center; margin-top: 0; } .dog-photo-10 img { aspect-ratio: .85; } .dog-photo-8 { margin-top: 0!important; } .dog-photo-9 { margin-top: 25px; } summary { padding: 22px 0; } footer { display: block; } footer p { margin: 25px 0 10px; } }
@media(max-width:360px) { nav { gap: 10px; } nav a { font-size: .75rem; } .set-caption { display: block; } .set-caption span { margin-top: 10px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } .button { transition: none; } }
/* Keep the supplied dog portraits fully visible, including both dogs in paired photographs. */
.dog-photo img { object-fit: contain; background: #241f25; }
.wholesale>p:not(.eyebrow) { max-width: 680px; }
.trade-details { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); max-width: 1100px; margin: 46px auto 38px; text-align: left; border-top: 1px solid #796674; border-bottom: 1px solid #796674; }
.trade-details>div { padding: 30px 28px; }
.trade-details>div+div { border-left: 1px solid #796674; }
.trade-details h3 { font-size: 1.5rem; color: var(--ink); margin-bottom: 15px; }
.trade-details p { font-size: 1rem; line-height: 1.7; color: #ddd0df; margin: 0; }
.trade-enquiry { font-size: 1rem; }
.trade-form { max-width: 900px; margin: 48px auto 0; padding: 40px; text-align: left; background: var(--paper); border: 1px solid #796674; }
.form-heading h3 { font-size: 2rem; margin-bottom: 18px; }
.form-heading p { max-width: 680px; color: var(--muted); }
.form-heading .form-hint { font-size: .875rem; }
.trade-form fieldset { border: 0; padding: 0; margin: 26px 0 0; min-width: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.form-field label { display: block; margin-bottom: 8px; font-size: .9375rem; }
.form-field label span,.form-field small { color: var(--muted); font-size: .875rem; }
.form-field small { display: block; margin-top: 7px; }
.form-field input,.form-field select,.form-field textarea { display: block; width: 100%; min-width: 0; padding: 13px 14px; border: 1px solid #887789; border-radius: 0; background: var(--surface); color: var(--ink); font: inherit; line-height: 1.5; }
.form-field input,.form-field select { min-height: 52px; }
.form-field select { color-scheme: dark; }
.form-field select option { background: #302831; color: #f2eade; }
.form-field textarea { resize: vertical; }
.form-field textarea::placeholder { color: var(--muted); opacity: 1; }
.form-field :is(input,select,textarea):focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.form-wide { grid-column: 1/-1; }
.form-privacy { color: var(--muted); font-size: .875rem; margin: 26px 0 20px; }
.trade-form .button { appearance: none; background: var(--brass); color: var(--paper); font: inherit; cursor: pointer; }
.trade-form .button span { color: inherit; }
.trade-form .button:hover:not(:disabled) { background: #dfc49e; color: var(--paper); }
.trade-form .button:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.trade-form .button:disabled { opacity: .65; cursor: default; }
.form-status { margin: 24px 0 0; font-size: 1rem; }
.form-status:empty { display: none; }
.form-status.is-error { color: #ffc9bf; }
.form-status.is-success { color: #dfedc9; }
.form-trap,.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media(max-width:580px) { .trade-form { padding: 26px 20px; margin-top: 32px; } .form-grid { grid-template-columns: 1fr; gap: 22px; } .form-heading h3 { font-size: 1.7rem; } .trade-form .button { width: 100%; justify-content: center; } }
.wholesale .button { margin: 5px 0 8px; }
@media(max-width:800px) { .trade-details>div { padding: 26px 18px; } .trade-details h3 { font-size: 1.35rem; } }
@media(max-width:580px) { .trade-details { grid-template-columns: 1fr; margin: 32px auto; } .trade-details>div { padding: 25px 0; } .trade-details>div+div { border-left: 0; border-top: 1px solid #796674; } }