/* Tatterlark — a catalog cover in olive, chalk and cream. */
:root {
  --cream:#faf6ee;
  --sand:#eae1d3;
  --ink:#322e29;
  --muted:#736b61;
  --olive:#626747;
  --line:#d9d1c5;
  --white:#fff;
  --serif:Baskerville,'Iowan Old Style','Palatino Linotype',Georgia,serif;
  --sans:Arial,Helvetica,sans-serif;
  --gutter:clamp(22px,5vw,72px)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:25px
}

body {
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font:16px/1.75 var(--sans)
}

h1,h2,h3,p,figure,dl {
  margin:0
}

h1,h2,h3 {
  font-family:var(--serif);
  font-weight:400;
  line-height:1.12
}

h1 {
  font-size:clamp(36px,4vw,55px);
  letter-spacing:-.035em
}

h2 {
  font-size:clamp(29px,3vw,41px);
  letter-spacing:-.025em
}

h3 {
  font-size:27px
}

p+p {
  margin-top:1em
}

a {
  color:inherit;
  text-underline-offset:5px;
  text-decoration-thickness:1px
}

a:hover {
  color:var(--olive)
}

a,button {
  touch-action:manipulation
}

img {
  display:block;
  max-width:100%;
  height:auto
}

figure {
  min-width:0
}

button,input,textarea,select {
  font:inherit;
  color:inherit
}

:focus-visible {
  outline:2px solid var(--olive);
  outline-offset:5px
}

.site-header,main,.footer {
  width:min(1240px,calc(100% - 2*var(--gutter)));
  margin-inline:auto
}

.eyebrow {
  font-size:10px;
  line-height:1.6;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--olive)
}

.reference {
  font-size:11px;
  letter-spacing:.06em;
  color:var(--muted)
}

.fine {
  font-size:13px;
  color:var(--muted);
  line-height:1.8
}

.text-link {
  display:inline-block;
  font-size:14px;
  padding:7px 0
}

.button {
  display:inline-block;
  background:var(--olive);
  border:1px solid var(--olive);
  color:white;
  text-decoration:none;
  padding:12px 20px;
  font-size:13px;
  line-height:1.5;
  cursor:pointer
}

.button:hover {
  color:white;
  background:#484e32;
  border-color:#484e32
}

.button.secondary {
  color:var(--olive);
  background:transparent
}

.button.secondary:hover {
  background:#f2f0e6
}

.button:disabled {
  opacity:.6;
  cursor:wait
}

.skip {
  position:fixed;
  left:15px;
  top:-100px;
  z-index:10;
  background:var(--olive);
  color:white;
  padding:10px 15px
}

.skip:focus {
  top:10px
}

figcaption {
  font-size:12px;
  line-height:1.6;
  color:var(--muted);
  padding-top:14px
}

.brand-row {
  display:grid;
  grid-template-columns:1fr 1.2fr 1fr;
  gap:30px;
  align-items:center;
  padding-block:30px 25px
}

.header-note {
  font-size:8px;
  letter-spacing:.14em;
  line-height:1.8;
  color:var(--muted)
}

.wordmark {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none
}

.wordmark>span {
  font:italic 46px/1 var(--serif);
  letter-spacing:-.045em
}

.wordmark img {
  width:24px;
  height:34px
}

.header-inquiry {
  font-size:12px;
  justify-self:end;
  text-decoration:none;
  border-bottom:1px solid var(--olive);
  padding-bottom:6px;
  display:flex;
  gap:22px
}

.site-header>nav {
  display:flex;
  justify-content:center;
  gap:55px;
  border-block:1px solid var(--line);
  padding-block:13px
}

.site-header nav a {
  font-size:13px;
  text-decoration:none;
  padding-block:4px;
  border-bottom:1px solid transparent
}

.site-header nav a[aria-current] {
  border-bottom-color:var(--olive);
  color:var(--olive)
}

.menu-toggle {
  display:none
}

.page-intro {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px 80px;
  padding-block:40px 35px;
  align-items:end
}

.page-intro>.eyebrow {
  grid-column:1/-1
}

.page-intro>p:last-child {
  font-size:15px;
  line-height:1.85;
  max-width:560px
}

.page-intro h1 {
  max-width:600px
}

.cover-gallery {
  padding-bottom:55px
}

.triptych {
  display:grid;
  grid-template-columns:1fr 1.15fr 1fr;
  gap:28px;
  align-items:start
}

.triptych figure:nth-child(1),.triptych figure:nth-child(3) {
  padding-top:42px
}

.triptych img {
  width:100%;
  aspect-ratio:2/3;
  object-fit:cover
}

.triptych figcaption>a {
  display:block;
  color:var(--ink);
  font:22px/1.2 var(--serif);
  text-decoration:none
}

.triptych figcaption>span {
  display:block;
  font-size:11px;
  margin-top:7px
}

.triptych a:hover img,.collection-photo:hover img {
  opacity:.9
}

.cover-caption {
  display:flex;
  justify-content:space-between;
  gap:25px;
  align-items:center;
  margin-top:28px;
  border-top:1px solid var(--line);
  padding-top:24px
}

.cover-caption>span {
  font-size:11px;
  color:var(--muted)
}

.section-header {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px;
  align-items:start;
  margin-bottom:30px
}

.section-header>.eyebrow {
  padding-top:7px
}

.routes {
  border-top:1px solid var(--ink);
  padding-block:38px 55px
}

.route-links {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:45px
}

.route {
  display:grid;
  grid-template-columns:140px 1fr;
  gap:28px;
  text-decoration:none;
  border-top:1px solid var(--line);
  padding-top:25px
}

.route>img {
  width:140px;
  height:220px;
  object-fit:cover
}

.route h3 {
  font-size:31px;
  margin-top:13px
}

.route .eyebrow {
  font-size:8px;
  letter-spacing:.1em
}

.route p {
  font-size:13px;
  color:var(--muted);
  margin-top:14px;
  max-width:280px
}

.route-action {
  display:inline-block;
  font-size:12px;
  margin-top:20px;
  border-bottom:1px solid var(--line)
}

.route:hover .route-action {
  border-color:var(--olive)
}

.choosing {
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:90px;
  background:var(--sand);
  padding:40px 45px;
  margin-bottom:50px
}

.choosing h2 {
  margin-top:20px
}

.choosing>div>p:last-child {
  font-size:14px;
  color:var(--muted);
  max-width:300px;
  margin-top:25px
}

.checklist {
  padding:0;
  margin:0;
  list-style:none
}

.checklist li {
  display:grid;
  grid-template-columns:30px 1fr;
  gap:20px;
  padding:18px 0;
  border-top:1px solid #cfc5b5
}

.checklist li:first-child {
  padding-top:0;
  border-top:0
}

.checklist li>span {
  font-size:10px;
  color:var(--olive);
  padding-top:6px
}

.checklist h3 {
  font-size:24px
}

.checklist p {
  font-size:13px;
  color:var(--muted);
  line-height:1.8;
  margin-top:7px
}

.inquiry-process {
  padding-bottom:50px
}

.inquiry-process ol {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  list-style:none;
  margin:30px 0 22px;
  padding:0;
  border-top:1px solid var(--line)
}

.inquiry-process li {
  padding:24px 26px 0 0
}

.inquiry-process li+li {
  border-left:1px solid var(--line);
  padding-left:26px
}

.inquiry-process li>span {
  font:italic 35px var(--serif);
  color:var(--olive)
}

.inquiry-process h3 {
  font-size:24px;
  margin:16px 0 12px
}

.inquiry-process li p {
  font-size:14px;
  color:var(--muted)
}

.inquiry-disclaimer {
  font-size:12px;
  color:var(--muted)
}

.detail-closing {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:75px;
  border-top:1px solid var(--ink);
  padding-block:40px 55px;
  align-items:center
}

.detail-closing figure img {
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover
}

.detail-closing h2 {
  margin-top:20px
}

.detail-closing nav {
  display:grid;
  margin-top:25px
}

.detail-closing nav a {
  font:23px var(--serif);
  text-decoration:none;
  border-top:1px solid var(--line);
  padding-block:17px
}

.detail-closing nav a span {
  display:block;
  font:12px/1.6 var(--sans);
  color:var(--muted);
  margin-top:8px
}

.collection-introduction {
  display:flex;
  gap:55px;
  justify-content:space-between;
  border-block:1px solid var(--line);
  padding-block:20px;
  margin-bottom:35px
}

.collection-routes {
  display:grid;
  gap:10px;
  flex-shrink:0;
  font-size:13px
}

.sample-note {
  font-size:12px;
  color:var(--muted);
  line-height:1.8;
  max-width:540px
}

.collection-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:55px 50px;
  padding-bottom:65px;
  scroll-margin-top:25px
}

.collection-entry {
  min-width:0;
  background:white;
  padding:20px;
  scroll-margin-top:25px
}

.collection-photo {
  display:block;
  background:var(--cream)
}

.collection-photo img {
  width:100%;
  aspect-ratio:2/3;
  object-fit:cover
}

.collection-label {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  margin-top:23px
}

.collection-entry h2 {
  font-size:34px;
  margin-top:13px;
  max-width:450px
}

.collection-entry h2 a {
  text-decoration:none
}

.collection-entry>p {
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
  max-width:440px;
  margin:15px 0 10px
}

.breadcrumbs {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--muted);
  padding-block:28px 22px
}

.product-heading {
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:35px;
  align-items:end;
  padding-block:25px 35px
}

.product-heading h1 {
  font-size:clamp(35px,3.7vw,53px);
  max-width:800px;
  margin-top:18px
}

.product-reference {
  font-size:9px;
  line-height:1.8;
  color:var(--muted);
  letter-spacing:.09em;
  white-space:nowrap;
  flex-shrink:0
}

.product-reference strong {
  display:block;
  font-size:13px;
  color:var(--olive);
  font-weight:400;
  margin-top:6px
}

.product-record {
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:50px;
  align-items:start
}

.product-record figure img {
  width:100%;
  aspect-ratio:2/3;
  object-fit:cover
}

.garment-particulars {
  padding:30px;
  background:white;
  min-width:0
}

.garment-particulars h2 {
  font-size:29px;
  margin-top:18px
}

.garment-particulars dl {
  margin-top:25px
}

.garment-particulars dl>div {
  display:grid;
  grid-template-columns:125px 1fr;
  gap:15px;
  padding:14px 0;
  border-top:1px solid var(--line);
  font-size:12px;
  line-height:1.8
}

.garment-particulars dt {
  color:var(--muted)
}

.garment-particulars dd {
  margin:0;
  overflow-wrap:anywhere
}

.product-actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:25px
}

.product-actions .button {
  text-align:center;
  font-size:12px;
  padding-inline:12px
}

.garment-particulars>.fine {
  margin-top:20px;
  font-size:12px
}

.design-story {
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:60px;
  padding-block:35px;
  margin-top:35px;
  border-block:1px solid var(--line)
}

.design-story h2 {
  font-size:32px
}

.product-description {
  font-size:15px;
  line-height:1.9
}

.back-link {
  display:inline-block;
  font-size:13px;
  margin-block:25px 55px
}

.care-layout {
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:90px;
  align-items:start;
  padding-block:5px 60px
}

.care-prose h2 {
  font-size:29px;
  margin:32px 0 15px
}

.care-prose h2:first-child {
  margin-top:0
}

.care-prose p {
  font-size:15px;
  line-height:1.9
}

.terms {
  background:white;
  padding:30px;
  border-top:3px solid var(--olive)
}

.terms h2 {
  font-size:31px;
  margin-top:18px
}

.terms dt {
  font-size:14px;
  margin-top:24px
}

.terms dd {
  margin:8px 0 0;
  font-size:12px;
  color:var(--muted);
  overflow-wrap:anywhere
}

.terms>a {
  font-size:12px;
  display:inline-block;
  margin-top:30px
}

.faq-layout {
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:90px;
  padding-block:5px 65px
}

.faq details {
  border-top:1px solid var(--line)
}

.faq details:last-child {
  border-bottom:1px solid var(--line)
}

.faq summary {
  font:25px/1.4 var(--serif);
  padding:22px 25px 22px 0;
  cursor:pointer
}

.faq details p {
  font-size:14px;
  color:var(--muted);
  padding:0 25px 24px 0
}

.faq-layout aside {
  padding:28px;
  background:var(--sand);
  align-self:start
}

.faq-layout aside h2 {
  font-size:32px;
  margin-top:20px
}

.faq-layout aside p:not(.eyebrow) {
  font-size:14px;
  margin-top:20px;
  color:var(--muted)
}

.faq-layout aside>a {
  font-size:13px;
  display:inline-block;
  margin-top:25px
}

.contact-layout {
  display:grid;
  grid-template-columns:1fr 1.6fr;
  gap:90px;
  padding-block:5px 65px;
  align-items:start
}

.contact-note>p[data-business-email] {
  font-size:17px;
  margin-top:16px;
  overflow-wrap:anywhere
}

.contact-note .fine {
  font-size:12px
}

.contact-guidance {
  border-top:1px solid var(--line);
  margin-top:30px;
  padding-top:26px
}

.contact-guidance h2 {
  font-size:31px
}

.contact-guidance ul {
  padding-left:18px;
  margin-top:22px;
  font-size:14px;
  color:var(--muted)
}

.contact-guidance li {
  margin-bottom:14px
}

.contact-guidance>p {
  font-size:13px;
  color:var(--muted);
  margin-top:22px
}

form {
  background:white;
  padding:30px;
  min-width:0
}

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

label {
  display:block;
  font-size:13px;
  margin-bottom:8px
}

label span {
  font-size:11px;
  color:var(--muted)
}

input,select,textarea {
  display:block;
  width:100%;
  min-width:0;
  border:1px solid #ada597;
  border-radius:0;
  background:white;
  padding:11px 12px;
  margin-bottom:24px;
  line-height:1.5
}

textarea {
  resize:vertical
}

form>.fine {
  margin-bottom:24px
}

.form-status {
  font-size:13px;
  color:var(--muted);
  margin-top:20px;
  padding-left:14px;
  border-left:2px solid var(--line)
}

.form-status.error {
  color:#8c352b;
  border-color:#8c352b
}

dialog {
  width:calc(100% - 40px);
  max-width:520px;
  background:var(--cream);
  color:var(--ink);
  border:1px solid var(--line);
  border-top:4px solid var(--olive);
  padding:40px
}

dialog::backdrop {
  background:rgba(50,46,41,.58)
}

dialog h2 {
  margin-block:18px
}

dialog>p:not(.eyebrow) {
  font-size:15px
}

dialog .button {
  margin-top:25px
}

.dialog-close {
  position:absolute;
  right:12px;
  top:8px;
  background:none;
  border:0;
  font-size:30px;
  cursor:pointer
}

.policy-prose {
  max-width:780px;
  margin-inline:auto;
  padding-block:5px 65px
}

.policy-prose h2 {
  font-size:29px;
  margin:30px 0 15px
}

.policy-prose h2:first-child {
  margin-top:0
}

.policy-prose p,.policy-prose li {
  font-size:15px;
  line-height:1.9
}

.policy-prose li {
  margin-bottom:14px
}

.footer {
  display:grid;
  grid-template-columns:1fr .7fr 1.6fr;
  gap:55px;
  border-top:1px solid var(--ink);
  padding-block:35px
}

.footer-identity>a {
  font:italic 38px var(--serif);
  text-decoration:none;
  letter-spacing:-.03em
}

.footer-identity>p {
  font-size:12px;
  color:var(--muted);
  margin-top:15px
}

.footer-identity>span {
  display:block;
  font-size:10px;
  line-height:1.8;
  color:var(--muted);
  margin-top:26px
}

.footer>nav {
  display:grid;
  align-content:start;
  gap:9px
}

.footer nav a {
  font-size:12px;
  text-decoration:none
}

.legal p {
  font-size:12px;
  line-height:1.8;
  color:var(--muted);
  margin:0 0 9px;
  overflow-wrap:anywhere
}

.legal .sample-footer {
  font-size:10px;
  margin-top:20px
}

@media(max-width:1100px) {
  .brand-row {
    gap:20px
  }

  .header-note {
    font-size:7px
  }

  .header-inquiry {
    font-size:11px;
    gap:12px
  }

  .wordmark>span {
    font-size:41px
  }

  .page-intro {
    gap:18px 50px
  }

  .triptych {
    gap:22px
  }

  .triptych figcaption>a {
    font-size:20px
  }

  .route-links {
    gap:30px
  }

  .route {
    grid-template-columns:110px 1fr;
    gap:22px
  }

  .route>img {
    width:110px;
    height:200px
  }

  .route h3 {
    font-size:29px
  }

  .choosing {
    gap:50px;
    padding:35px
  }

  .detail-closing {
    gap:45px
  }

  .collection-grid {
    gap:40px 35px
  }

  .product-record {
    gap:35px
  }

  .garment-particulars {
    padding:25px
  }

  .garment-particulars dl>div {
    grid-template-columns:1fr;
    gap:4px
  }

  .product-actions {
    grid-template-columns:1fr
  }

  .care-layout,.faq-layout,.contact-layout {
    gap:50px
  }

  .footer {
    gap:35px
  }

}

@media(max-width:800px) {
  .brand-row {
    grid-template-columns:1fr auto;
    padding-block:24px 18px;
    gap:20px
  }

  .header-note {
    display:none
  }

  .wordmark {
    justify-content:start
  }

  .wordmark>span {
    font-size:41px
  }

  .header-inquiry {
    grid-column:1/-1;
    grid-row:2;
    justify-self:start;
    font-size:12px;
    gap:30px
  }

  .js .menu-toggle {
    display:block;
    grid-column:2;
    grid-row:1;
    background:transparent;
    border:1px solid var(--line);
    padding:8px 12px;
    font-size:12px
  }

  .site-header>nav {
    gap:25px;
    justify-content:space-between
  }

  .js .site-header>nav {
    display:none
  }

  .js .site-header>nav.open {
    display:flex
  }

  .page-intro {
    gap:20px 30px;
    padding-block:30px
  }

  .page-intro h1 {
    font-size:43px
  }

  .page-intro>p:last-child {
    font-size:14px
  }

  .triptych {
    gap:18px
  }

  .triptych figure:nth-child(1),.triptych figure:nth-child(3) {
    padding-top:30px
  }

  .triptych figcaption>a {
    font-size:18px
  }

  .triptych figcaption>span {
    font-size:10px
  }

  .cover-caption>span {
    font-size:10px;
    max-width:260px
  }

  .cover-caption .button {
    font-size:12px;
    padding:11px 16px
  }

  .section-header {
    gap:25px
  }

  .route-links {
    gap:25px
  }

  .route {
    grid-template-columns:85px 1fr;
    gap:18px
  }

  .route>img {
    width:85px;
    height:160px
  }

  .route h3 {
    font-size:27px
  }

  .route p {
    font-size:12px
  }

  .route .eyebrow {
    font-size:7px
  }

  .route-action {
    font-size:11px;
    margin-top:15px
  }

  .choosing {
    gap:35px;
    padding:30px;
    grid-template-columns:1fr 1.2fr
  }

  .choosing h2 {
    font-size:33px
  }

  .choosing>div>p:last-child {
    font-size:13px
  }

  .checklist {
    font-size:13px
  }

  .checklist h3 {
    font-size:23px
  }

  .checklist li {
    gap:12px
  }

  .inquiry-process li {
    padding-right:20px
  }

  .inquiry-process li+li {
    padding-left:20px
  }

  .inquiry-process h3 {
    font-size:23px
  }

  .inquiry-process li p {
    font-size:13px
  }

  .detail-closing {
    gap:30px
  }

  .detail-closing h2 {
    font-size:34px
  }

  .detail-closing nav a {
    font-size:22px
  }

  .collection-grid {
    gap:35px 25px
  }

  .collection-entry {
    padding:16px
  }

  .collection-entry h2 {
    font-size:29px
  }

  .collection-entry>p {
    font-size:13px
  }

  .collection-label {
    gap:15px
  }

  .collection-label .eyebrow {
    font-size:9px
  }

  .collection-introduction {
    gap:35px
  }

  .collection-routes {
    font-size:12px
  }

  .product-record {
    gap:25px
  }

  .product-heading h1 {
    font-size:39px
  }

  .garment-particulars {
    padding:22px
  }

  .garment-particulars h2 {
    font-size:27px
  }

  .garment-particulars dl>div {
    font-size:11px
  }

  .design-story {
    gap:35px
  }

  .design-story h2 {
    font-size:30px
  }

  .care-layout {
    grid-template-columns:1.3fr 1fr;
    gap:30px
  }

  .terms {
    padding:22px
  }

  .terms h2 {
    font-size:28px
  }

  .faq-layout {
    grid-template-columns:1.5fr 1fr;
    gap:30px
  }

  .faq-layout aside {
    padding:22px
  }

  .faq-layout aside h2 {
    font-size:29px
  }

  .faq summary {
    font-size:24px
  }

  .contact-layout {
    gap:35px;
    grid-template-columns:1fr 1.5fr
  }

  .field-pair {
    grid-template-columns:1fr;
    gap:0
  }

  form {
    padding:24px
  }

  .contact-guidance h2 {
    font-size:28px
  }

  .footer {
    grid-template-columns:1fr 1fr;
    gap:30px
  }

  .legal {
    grid-column:1/-1
  }

  .footer-identity>span {
    margin-top:20px
  }

}

@media(max-width:560px) {
  .site-header,main,.footer {
    width:calc(100% - 40px)
  }

  .brand-row {
    padding-top:22px
  }

  .wordmark>span {
    font-size:38px
  }

  .wordmark img {
    width:22px;
    height:30px
  }

  .header-inquiry {
    font-size:12px
  }

  .site-header>nav {
    gap:15px
  }

  .site-header nav a {
    font-size:12px
  }

  .page-intro {
    grid-template-columns:1fr;
    gap:18px;
    padding-block:28px
  }

  .page-intro>.eyebrow {
    font-size:9px
  }

  .page-intro h1 {
    font-size:39px
  }

  .page-intro>p:last-child {
    font-size:14px;
    line-height:1.85
  }

  .triptych {
    gap:12px;
    grid-template-columns:1fr 1.15fr 1fr
  }

  .triptych figure:nth-child(1),.triptych figure:nth-child(3) {
    padding-top:20px
  }

  .triptych figcaption {
    padding-top:12px
  }

  .triptych figcaption>a {
    font-size:16px;
    line-height:1.25
  }

  .triptych figcaption>span {
    font-size:10px;
    line-height:1.6
  }

  .cover-caption {
    display:block;
    margin-top:24px;
    padding-top:20px
  }

  .cover-caption>span {
    display:block;
    max-width:none;
    font-size:10px
  }

  .cover-caption .button {
    margin-top:18px;
    font-size:13px
  }

  .cover-gallery {
    padding-bottom:35px
  }

  .section-header {
    grid-template-columns:1fr;
    gap:16px;
    margin-bottom:25px
  }

  .section-header h2 {
    font-size:35px
  }

  .routes {
    padding-block:28px 35px
  }

  .route-links {
    grid-template-columns:1fr;
    gap:27px
  }

  .route {
    grid-template-columns:100px 1fr;
    gap:22px;
    padding-top:22px
  }

  .route>img {
    width:100px;
    height:185px
  }

  .route .eyebrow {
    font-size:8px
  }

  .route h3 {
    font-size:29px;
    margin-top:12px
  }

  .route p {
    font-size:12px;
    margin-top:12px
  }

  .route-action {
    font-size:11px
  }

  .choosing {
    grid-template-columns:1fr;
    gap:25px;
    padding:25px;
    margin-bottom:35px
  }

  .choosing h2 {
    font-size:35px
  }

  .choosing>div>p:last-child {
    max-width:none;
    font-size:14px;
    margin-top:20px
  }

  .checklist h3 {
    font-size:25px
  }

  .checklist p {
    font-size:13px
  }

  .checklist li:first-child {
    padding-top:18px;
    border-top:1px solid #cfc5b5
  }

  .inquiry-process {
    padding-bottom:35px
  }

  .inquiry-process ol {
    grid-template-columns:1fr;
    margin-top:20px
  }

  .inquiry-process li,.inquiry-process li+li {
    padding:22px 0;
    border-left:0
  }

  .inquiry-process li+li {
    border-top:1px solid var(--line)
  }

  .inquiry-process li>span {
    font-size:31px;
    float:left;
    margin-right:18px
  }

  .inquiry-process h3 {
    font-size:26px;
    margin:5px 0 15px
  }

  .inquiry-process li p {
    font-size:14px;
    margin-left:32px
  }

  .inquiry-disclaimer {
    font-size:12px
  }

  .detail-closing {
    grid-template-columns:1fr;
    gap:25px;
    padding-block:28px 40px
  }

  .detail-closing h2 {
    font-size:36px
  }

  .detail-closing nav a {
    font-size:24px
  }

  .detail-closing nav a span {
    font-size:12px
  }

  .collection-introduction {
    display:block;
    padding-block:18px;
    margin-bottom:25px
  }

  .collection-routes {
    font-size:13px
  }

  .sample-note {
    font-size:12px;
    margin-top:20px
  }

  .collection-grid {
    grid-template-columns:1fr;
    gap:30px;
    padding-bottom:40px
  }

  .collection-entry {
    padding:18px
  }

  .collection-entry h2 {
    font-size:33px
  }

  .collection-entry>p {
    font-size:14px
  }

  .collection-label .eyebrow {
    font-size:10px
  }

  .breadcrumbs {
    font-size:11px;
    padding-block:23px 20px
  }

  .product-heading {
    display:block;
    padding-block:22px 28px
  }

  .product-heading h1 {
    font-size:39px;
    margin-top:15px
  }

  .product-reference {
    display:block;
    margin-top:22px;
    font-size:9px
  }

  .product-reference br {
    display:none
  }

  .product-reference strong {
    display:inline-block;
    font-size:12px;
    margin:0 0 0 20px
  }

  .product-record {
    grid-template-columns:1fr;
    gap:25px
  }

  .garment-particulars {
    padding:25px
  }

  .garment-particulars h2 {
    font-size:31px
  }

  .garment-particulars dl>div {
    grid-template-columns:1fr;
    gap:5px;
    font-size:13px
  }

  .product-actions {
    gap:10px
  }

  .product-actions .button {
    font-size:13px;
    padding-block:12px
  }

  .garment-particulars>.fine {
    font-size:12px
  }

  .design-story {
    grid-template-columns:1fr;
    gap:20px;
    margin-top:30px;
    padding-block:28px
  }

  .design-story h2 {
    font-size:33px
  }

  .product-description {
    font-size:15px
  }

  .back-link {
    font-size:12px;
    margin-bottom:40px
  }

  .care-layout,.faq-layout,.contact-layout {
    grid-template-columns:1fr;
    gap:30px;
    padding-bottom:40px
  }

  .care-prose h2 {
    font-size:29px
  }

  .care-prose p {
    font-size:15px
  }

  .terms {
    padding:25px
  }

  .terms h2 {
    font-size:31px
  }

  .terms dd {
    font-size:12px
  }

  .faq summary {
    font-size:25px
  }

  .faq details p {
    font-size:14px;
    padding-right:10px
  }

  .faq-layout aside {
    padding:25px
  }

  .faq-layout aside h2 {
    font-size:32px
  }

  .contact-layout form {
    order:1
  }

  .contact-layout aside {
    order:2
  }

  .contact-guidance h2 {
    font-size:31px
  }

  .contact-note>p[data-business-email] {
    font-size:17px
  }

  .contact-guidance ul {
    font-size:14px
  }

  form {
    padding:22px
  }

  .field-pair {
    grid-template-columns:1fr;
    gap:0
  }

  label {
    font-size:13px
  }

  form>.fine {
    font-size:12px
  }

  .form-status {
    font-size:12px
  }

  .policy-prose {
    padding-bottom:40px
  }

  .policy-prose h2 {
    font-size:28px
  }

  .policy-prose p,.policy-prose li {
    font-size:15px
  }

  .footer {
    grid-template-columns:1fr 1fr;
    gap:25px 20px;
    padding-block:28px
  }

  .footer-identity>a {
    font-size:35px
  }

  .footer-identity>p {
    font-size:11px
  }

  .footer-identity>span {
    font-size:9px
  }

  .footer nav a {
    font-size:12px
  }

  .legal p {
    font-size:12px
  }

  dialog {
    padding:34px 26px
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  * {
    transition:none!important
  }

}