@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');
:root{--ink:#151311;--paper:#f6f2e9;--gold:#c7a77b;--line:#dcd4c6;--serif:"Instrument Serif",Georgia,serif;--sans:"DM Sans",Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--sans)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img{display:block;width:100%}
p,h1,h2,h3,figure{margin:0}
:focus-visible{outline:2px solid #ad7741;outline-offset:5px}
.skip{position:fixed;top:0;left:1rem;z-index:5;background:var(--paper);padding:1rem;transform:translateY(-120%)}
.skip:focus{transform:none}
.header{height:76px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:0 5.5%;color:var(--paper);background:var(--ink);border-bottom:1px solid #ffffff25}
.brand{display:inline-flex;gap:11px;align-items:center;justify-self:start;font-family:Georgia,serif;font-size:24px;letter-spacing:.11em;font-style:italic}
.brand img{width:30px}
nav{display:flex;gap:clamp(18px,3.5vw,54px);justify-content:center}
nav a,.header-link{font-size:13px;white-space:nowrap}
nav a:hover,.header-link:hover,footer a:hover{color:var(--gold)}
.header-link{justify-self:end}
.header-link span{margin-left:8px;color:var(--gold)}
.hero{position:relative;min-height:660px;display:grid;grid-template-columns:55% 45%;padding:0 5.5%;background:#171411;color:var(--paper);overflow:hidden}
.hero-copy{z-index:1;align-self:center;padding:58px 0 116px}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.19em;line-height:1.5}
.eyebrow span{display:inline-block;width:23px;height:1px;background:currentColor;vertical-align:middle;margin-right:9px}
.hero .eyebrow,.signature .eyebrow{color:var(--gold)}
h1,h2,h3{font-family:var(--serif);font-weight:400}
h1{font-size:clamp(75px,9.8vw,165px);line-height:.86;letter-spacing:-.035em;margin:25px 0 28px}
h1 em,.signature em{color:var(--gold);font-weight:400}
.intro{max-width:370px;line-height:1.65;color:#ddd1c1}
.primary{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;background:var(--paper);color:var(--ink);padding:15px 19px;margin-top:26px;font-weight:700;font-size:13px}
.primary:hover{background:#e3c6a0}
.campaign{position:relative;min-height:100%;background:#605044;isolation:isolate}
.campaign img{height:100%;position:absolute;object-fit:cover;object-position:center 44%}
.campaign::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#171411 0%,transparent 25%),linear-gradient(0deg,#171411 1%,transparent 31%);pointer-events:none}
.campaign figcaption{position:absolute;z-index:1;right:19px;bottom:70px;letter-spacing:.16em;font-size:10px}
.hero-foot{position:absolute;bottom:0;left:5.5%;right:5.5%;border-top:1px solid #e2d4bd44;display:flex;justify-content:space-between;padding:17px 0;color:#d6c5ad;font-size:10px;letter-spacing:.16em}
.collection{padding:76px 5.5% 87px}
.collection-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:30px}
.collection-head h2,.signature h2{font-size:clamp(47px,6vw,90px);line-height:.95;margin-top:10px}
.collection-head .eyebrow,.card-copy .eyebrow{color:#775732}
.collection-head>p,.card-copy>p:last-child{color:#665b51;font-size:14px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
article{scroll-margin-top:24px}
.card-image{position:relative;border:0;padding:0;display:block;width:100%;aspect-ratio:1.15;overflow:hidden;cursor:pointer;background:#e7dbca}
.card-image img{height:100%;object-fit:cover;transition:transform .3s ease}
.card-image:hover img{transform:scale(1.045)}
.card-image.women img{object-position:center 43%}
.card-image.kids img{object-fit:contain}
.card-image span{position:absolute;right:12px;bottom:12px;background:var(--paper);display:grid;place-items:center;width:41px;height:41px;font-size:18px}
.card-copy{padding:19px 0 17px;border-bottom:1px solid var(--line)}
.card-copy h3{font-size:clamp(27px,3vw,43px);line-height:1.05;margin:6px 0 7px}
.signature{display:grid;grid-template-columns:1fr 1fr;background:#211c17;color:var(--paper)}
.signature img{height:100%;max-height:480px;object-fit:cover;object-position:center}
.signature div{align-self:center;padding:55px 12%}
.signature div>p:last-child{max-width:370px;line-height:1.65;margin-top:22px;color:#ddd1c1}
footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;padding:28px 5.5%;background:var(--ink);color:var(--paper);font-size:12px}
dialog{padding:0;width:min(880px,calc(100% - 28px));border:0;background:var(--paper);color:var(--ink);max-height:calc(100% - 28px)}
dialog::backdrop{background:#000a}
.modal-grid{display:grid;grid-template-columns:1fr 1fr}
.modal-grid>img{align-self:center;object-fit:contain;max-height:530px}
.modal-copy{position:relative;padding:50px 28px 28px}
.modal-copy h2{font-size:clamp(38px,5vw,64px);line-height:1;margin:10px 0 15px}
.modal-copy p{margin:0 0 15px;line-height:1.5}
.close{position:absolute;right:10px;top:7px;border:0;background:transparent;cursor:pointer;font-size:32px;width:44px;height:44px}
.availability{font-size:11px;letter-spacing:.14em;font-weight:700;border-top:1px solid var(--line);padding-top:16px;margin-top:18px!important}
summary{cursor:pointer;font-weight:700}
details p{font-size:13px;margin:10px 0!important}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:7px 5px;border-bottom:1px solid var(--line)}
@media(max-width:720px){
.header{grid-template-columns:1fr auto;height:63px}
.header-link{display:none}
.brand{font-size:20px}
.brand img{width:25px}
.hero{padding:0;display:flex;flex-direction:column;min-height:0}
.hero-copy{width:100%;padding:48px 5.5% 27px}
h1{font-size:clamp(64px,13vw,102px);margin:20px 0}
.campaign{height:440px}
.campaign img{object-position:center 45%}
.campaign::after{background:linear-gradient(180deg,#171411 0%,transparent 18%),linear-gradient(0deg,#171411 0%,transparent 22%)}
.campaign figcaption{bottom:54px}
.collection{padding-top:48px;padding-bottom:55px}
.collection-head{display:block}
.collection-head>p{margin-top:12px}
.cards{grid-template-columns:1fr}
.card-image{aspect-ratio:1.4}
.signature{grid-template-columns:1fr}
.signature img{max-height:320px}
.signature div{padding:38px 5.5% 48px}
.modal-grid{grid-template-columns:1fr}
.modal-grid>img{max-height:290px}
.modal-copy{position:static;padding:22px}
.close{background:var(--paper)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
.campaign img{object-position:center 8%}
.header-link span,.primary span,.card-image span{font-size:0}
.header-link span::after,.primary span::after,.card-image span::after{content:"";display:inline-block;width:8px;height:8px;border-top:1px solid;border-right:1px solid;transform:translate(-1px,0)}
@media(max-width:720px){.campaign img{object-position:center 12%}}
.editions-link{position:absolute;z-index:2;left:5.5%;bottom:74px;color:var(--gold);font-size:13px;border-bottom:1px solid #c7a77b80;padding-bottom:5px}
.editions-link span{display:inline-block;width:7px;height:7px;border-right:1px solid;border-top:1px solid;margin:0 2px 2px 9px}
.editions{padding:72px 5.5% 83px;background:#181512;color:var(--paper)}
.editions-head{margin-bottom:30px}
.editions-head .eyebrow{color:var(--gold)}
.editions-head h2{font-size:clamp(47px,6vw,90px);line-height:.95;margin-top:10px}
.edition-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.edition-image{aspect-ratio:1;background:#27211c}
.edition-image img{object-fit:contain}
.edition-copy{padding:18px 0;border-bottom:1px solid #c7a77b55}
.edition-copy h3{font-size:clamp(32px,4vw,52px);line-height:1.1;margin-bottom:8px}
.edition-copy p{color:#ded0bd;font-size:14px}
@media(max-width:720px){
  .editions-link{position:static;align-self:flex-start;margin:-9px 5.5% 12px;order:0}
  .campaign{order:1}
  .hero-foot{z-index:1}
  .editions{padding-top:48px;padding-bottom:56px}
  .edition-grid{grid-template-columns:1fr;gap:25px}
}
#product-artwork{text-decoration:underline;text-underline-offset:3px;font-weight:700;font-size:14px}
.edition-image span{color:var(--ink)}
@media(max-width:720px){#streetwear .edition-image{aspect-ratio:1.5}}
.color-options{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.color-options button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:transparent;padding:6px 8px;min-height:34px;font-size:11px;cursor:pointer}
.color-options button[aria-pressed="true"]{border-color:#775732;background:#ece3d4}
.color-options button::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--swatch);border:1px solid #0003}
[data-kids-color="charcoal"]{--swatch:#353433}
[data-kids-color="oatmeal"]{--swatch:#c3a789}
[data-kids-color="forest"]{--swatch:#2e4231}
[data-kids-color="navy"]{--swatch:#242d49}
.kids-gallery{padding:0 5.5% 76px}
.kids-gallery h2{font-size:clamp(42px,5.2vw,74px);line-height:1;margin-bottom:24px}
.kids-gallery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.kids-gallery img{aspect-ratio:1;object-fit:contain;background:#ede0d2}
.kids-gallery figcaption{padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
@media(max-width:720px){.kids-gallery{padding-bottom:48px}.kids-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr);
  gap: clamp(22px, 5vw, 80px);
  padding: clamp(48px, 7vw, 105px) 5.5%;
  scroll-margin-top: 80px;
}
.about h2 { font-size: clamp(42px, 6vw, 86px); line-height: 1; }
.about-copy { max-width: 66ch; font-size: 17px; line-height: 1.65; }
.about-copy p + p { margin-top: 1em; }
.about-copy h3 {
  margin: 28px 0 10px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.1;
}
@media (max-width: 720px) {
  .about { grid-template-columns: 1fr; }
}
.plus-size { padding: 0 5.5% clamp(48px, 7vw, 84px); scroll-margin-top: 24px; }
.plus-size h2 { font-size: clamp(42px, 5.2vw, 74px); line-height: 1; }
.plus-size > p { max-width: 68ch; margin: 12px 0 24px; }
.plus-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.plus-grid img { display: block; width: 100%; height: auto; background: #d1c4b6; }
.plus-copy { padding: 16px 0 20px; }
.plus-copy h3 { font-size: clamp(28px, 3vw, 44px); line-height: 1.1; }
.plus-copy p { margin: 8px 0 12px; }
.plus-copy summary { cursor: pointer; }
.plus-copy th, .plus-copy td { white-space: nowrap; }
.plus-copy .table-wrap { overflow-x: auto; }
@media (max-width: 720px) {
  .plus-grid { grid-template-columns: 1fr; }
  .header nav { flex-wrap: wrap; justify-content: flex-end; gap: 4px 11px; }
  .header nav a { white-space: nowrap; }
}

.accessory-art {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  background: #bbab9c;
}
.accessory-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.accessory-list {
  display: grid;
  gap: 10px;
  list-style: none;
  padding: 0;
}
.accessory-list span {
  display: block;
  font-size: 0.875em;
}
@media (min-width: 721px) {
  .header nav { gap: clamp(10px, 2vw, 32px); }
}

.tee-art { display: block; }
.tee-art img { display: block; width: 100%; height: auto; }
@media (min-width: 721px) and (max-width: 980px) {
  .header nav { flex-wrap: wrap; gap: 6px 14px; }
}

.designer .editions-head p { margin-top: 12px; }
.designer-group { margin: 32px 0 16px; font-size: clamp(23px, 3vw, 34px); }
.designer-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 255px), 1fr)); }
.designer-art { display: block; background: #211b17; }
.designer-art img { display: block; width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: contain; }
.designer .edition-copy h4 { margin: 0; font-size: clamp(20px, 2.4vw, 30px); }
@media (min-width: 721px) and (max-width: 1120px) {
  .header nav { flex-wrap: wrap; gap: 6px 14px; }
}

.film-link {
  display: table;
  margin-top: 1.1rem;
  text-underline-offset: 0.25em;
}
.collection-film video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #1b1512;
}

.color-options button::before{flex:none}

.cards{grid-template-columns:repeat(4,minmax(0,1fr))}
.men-colorways{grid-column:span 2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.card-image.men{background:#282522}
.card-image.men img{object-fit:contain}
@media(max-width:1050px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .cards{grid-template-columns:1fr}
  .men-colorways{grid-column:auto;gap:10px}
  .men-colorways h3{font-size:23px}
}

.cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.men-colorways{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1050px){.men-colorways{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.cards{grid-template-columns:1fr}}

.kids-tonal figure { max-width: 1240px; }
.kids-tonal img { aspect-ratio: auto; height: auto; }

.eveningwear-art img { aspect-ratio: auto; }
@media (min-width: 1000px) {
  .eveningwear-grid { grid-template-columns: 1fr 1fr 2fr; }
}

.tailoring-pair { max-width: 1050px; }
.tailoring-pair .designer-art img { aspect-ratio: 3 / 2; }

#contact a{text-decoration:underline;text-underline-offset:3px}
