/* THE MARK A. BRADFORD COLLECTION — EDITION ONE
   BUILD 001B.1 — FOUNDATION */

:root {
  --color-bg: #f7f4ee;
  --color-paper: #fffdf9;
  --color-ink: #181816;
  --color-muted: #6f6a62;
  --color-line: #d9d2c7;
  --color-accent: #a45b31;
  --color-dark: #161513;
  --color-white: #ffffff;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-sans: Inter, Arial, sans-serif;
  --page-max: 1320px;
  --reading-max: 700px;
  --gutter: clamp(28px, 6vw, 96px);
  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;
  --space-9: 8rem;
  --space-10: 10rem;
  --transition-fast: 180ms ease;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0}
img,picture,video,canvas,svg{display:block;max-width:100%}
button,input,textarea,select{font:inherit}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;border-spacing:0}

html,body{min-height:100%}
body{
  background:var(--color-bg);
  color:var(--color-ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.68;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased
}
main{display:block}
::selection{background:rgba(164,91,49,.18);color:var(--color-ink)}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:300;
  letter-spacing:-.035em;
  color:inherit
}
h1{font-size:clamp(3.8rem,8vw,8.4rem);line-height:.84}
h2{font-size:clamp(3rem,5vw,5.6rem);line-height:.94}
h3{font-size:clamp(2rem,3vw,3rem);line-height:1}
p,li,dd{overflow-wrap:anywhere}
p+p{margin-top:1.2rem}
strong{font-weight:600}

.eyebrow{
  color:var(--color-accent);
  font-size:.65rem;
  font-weight:600;
  letter-spacing:.18em;
  line-height:1.4;
  text-transform:uppercase
}
.eyebrow--light{color:#efaa77}
.lead{font-family:var(--font-display);font-size:clamp(1.45rem,2vw,1.9rem);line-height:1.35}
.copy,.prose{width:100%;max-width:var(--reading-max)}
.copy--muted,.prose--muted{color:var(--color-muted)}

.site-shell{
  width:min(var(--page-max),calc(100% - (var(--gutter)*2)));
  margin-inline:auto
}
.section{padding-block:clamp(80px,10vw,150px)}
.section--compact{padding-block:clamp(56px,7vw,100px)}
.section--dark{background:var(--color-dark);color:var(--color-white)}
.section--paper{background:var(--color-paper)}
.section--stone{background:#e9dfd1}

.grid{display:grid;gap:clamp(24px,3vw,48px)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(56px,8vw,120px);
  align-items:start
}
.grid>*,
.split>*{min-width:0}

.media-fill{width:100%;height:100%;object-fit:cover}
.media-contain{width:100%;height:100%;object-fit:contain}

.skip-link{
  position:fixed;
  top:-80px;
  left:20px;
  z-index:1000;
  padding:12px 16px;
  background:var(--color-white);
  color:var(--color-ink);
  border:1px solid var(--color-line);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:top var(--transition-fast)
}
.skip-link:focus{top:20px}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:4px}

@media(max-width:1100px){
  .split{grid-template-columns:1fr}
  .grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  :root{--gutter:22px}
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .section{padding-block:72px}
  .section--compact{padding-block:52px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important
  }
}