/* Oxford Cloth Market — site styles.
   Layout: Drake's-style editorial pages on handmade cream paper; the centered
   badge hangs over the hero and docks into the header on scroll. */
:root{
  --paper:#F2EADB; --paper-deep:#E9DEC8; --ink:#3E1A1C; --ink-soft:#6B4A44;
  --oxblood:#4A1E21; --orange:#E8863F;
  --orange-text:#A8501A; /* orange for small text on paper: 4.6:1 contrast (WCAG AA) */
  --cream:#FBF5EA; --footer-text:#F3E7D3; --rule:rgba(62,26,28,.22);
  --serif:"Libre Caslon Text",Georgia,"Times New Roman",serif;
  --sans:"Jost","Gill Sans","Helvetica Neue",Arial,sans-serif;
  --gutter:max(16px,env(safe-area-inset-left,0px));
  --gutter-r:max(16px,env(safe-area-inset-right,0px));
  --header-h:72px;
  color-scheme:light;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
img{max-width:100%}
[hidden]{display:none!important}
body{margin:0;background-color:var(--paper);color:var(--ink);font-family:var(--serif);font-size:16px;line-height:1.6;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .25  0 0 0 0 .15  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='3' seed='3'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .38  0 0 0 0 .22  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>");}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}
a{color:inherit}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
main,section[id]{scroll-margin-top:calc(var(--header-h) + 24px)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--gutter);top:-200px;z-index:100;background:var(--oxblood);color:var(--footer-text);padding:10px 16px;font-family:var(--sans);font-size:14px}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 8px)}
.label{font-family:var(--sans);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.ulink{font-family:var(--sans);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.ulink:hover{color:var(--orange)}

/* Header */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--paper);border-bottom:1px solid var(--rule)}
.hdr-in{position:relative;height:var(--header-h);display:grid;grid-template-columns:1fr 200px 1fr;align-items:center;padding-left:var(--gutter);padding-right:var(--gutter-r);max-width:1440px;margin:0 auto}
.nav{display:flex;gap:clamp(14px,2vw,30px);list-style:none;margin:0;padding:0;font-family:var(--sans);font-size:14px;letter-spacing:.03em}
.nav a{text-decoration:none;padding-block:6px;border-bottom:1px solid transparent}
.nav a:hover{border-color:var(--ink)}
.nav.r{justify-content:flex-end}
/* The badge shrinks with transform only (compositor work, no layout on scroll). */
.badge{position:absolute;left:50%;top:10px;width:156px;height:156px;border-radius:50%;
  transform:translateX(-50%);transform-origin:50% 0;transition:transform .35s ease;filter:drop-shadow(0 3px 6px rgba(40,15,10,.25))}
.badge img{width:100%;height:100%;display:block}
.scrolled .badge,.menu-open .badge{transform:translate(-50%,-3px) scale(.3718);filter:none} /* 156px -> 58px, top 10px -> 7px */
.hdr .m-only{display:none}
.iconbtn{background:none;border:0;color:var(--ink);padding:8px;cursor:pointer;display:inline-flex}
.iconbtn svg{width:24px;height:24px}
.drawer{border-top:1px solid var(--rule);background:var(--paper);padding-block:8px 20px;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.drawer ul{list-style:none;margin:0;padding:0}
.drawer a{display:block;padding:14px 0;border-bottom:1px solid var(--rule);text-decoration:none;font-size:22px}

/* Hero */
.hero{position:relative;height:clamp(520px,82vh,820px);overflow:hidden;display:flex;align-items:flex-end;justify-content:center;text-align:center;color:var(--cream)}
.hero-cap{position:relative;padding-block:0 56px;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.hero h1{font-weight:400;font-size:clamp(26px,3.2vw,40px);line-height:1.2;margin:0 0 14px;text-wrap:balance}
.hero .links{display:flex;gap:22px;justify-content:center}

/* Photo frames: tone shows while the image loads; gradient keeps overlaid text legible. */
.ph{position:absolute;inset:0;background:var(--tone,#5a4636)}
.ph::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(20,8,6,.55) 100%)}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph picture{display:block;width:100%;height:100%}
.hero .ph{--tone:radial-gradient(120% 90% at 50% 30%,#8a6b4a 0%,#5c4431 55%,#2f2219 100%);background:var(--tone)}

/* Two-up blocks */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:4px}
.tile{position:relative;aspect-ratio:4/5;max-height:760px;width:100%;color:var(--cream);display:flex;align-items:flex-end;overflow:hidden}
.tile .copy{position:relative;z-index:2;padding:0 28px 28px;max-width:600px}
.tile p{margin:0 0 12px;font-size:17px;line-height:1.45;min-width:0}

/* Editorial features */
.feature{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:48px;padding-block:72px;padding-left:var(--gutter);padding-right:var(--gutter-r);max-width:1440px;margin:0 auto}
.feature .img{position:relative;aspect-ratio:4/5;max-height:720px;width:100%;overflow:hidden}
.feature .txt{max-width:540px;justify-self:center;min-width:0}
.feature.flip .img{order:-1}
.kicker{color:var(--orange-text);margin:0 0 14px}
.feature h2{font-weight:400;font-size:clamp(24px,2.4vw,32px);line-height:1.2;margin:0 0 16px;text-wrap:balance}
.feature p{margin:0 0 22px;color:var(--ink-soft);font-size:17px}

/* Product in focus */
.focus{position:relative;padding-block:64px 72px;color:var(--cream);overflow:hidden}
.focus .ph{--tone:linear-gradient(180deg,#53613f 0%,#3d4a30 50%,#2a3322 100%);background:var(--tone)}
.focus .ph::before{background:rgba(18,32,32,.42)}
.focus-in{position:relative;z-index:2;max-width:1440px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.focus h2{font-weight:400;font-size:clamp(28px,3vw,40px);margin:0 0 28px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.card{text-decoration:none;display:flex;flex-direction:column;gap:12px}
.card .shot{position:relative;aspect-ratio:4/5;background:var(--paper-deep);border:1px solid rgba(251,245,234,.4);overflow:hidden}
.card .shot img{width:100%;height:100%;object-fit:cover;display:block}
.card h3{font-weight:400;font-size:18px;line-height:1.3;margin:0}
.card .meta{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--sans);font-size:14px;font-variant-numeric:tabular-nums}
.card:hover h3{text-decoration:underline;text-underline-offset:4px}

/* Pop-ups */
.popups{background:var(--orange);color:var(--oxblood);padding-block:64px}
.popups :focus-visible{outline-color:var(--oxblood)}
.popups-in{max-width:1440px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter-r);display:grid;grid-template-columns:1fr 1.4fr;gap:48px}
.popups .eyebrow{margin:0 0 12px}
.popups h2{font-weight:400;font-size:clamp(28px,3vw,40px);margin:0 0 12px}
.popups p{margin:0;font-size:18px;max-width:420px}
.events{list-style:none;margin:0;padding:0;border-top:1px solid rgba(74,30,33,.35)}
.events li{display:grid;grid-template-columns:110px 1fr auto;gap:20px;align-items:center;padding-block:22px;border-bottom:1px solid rgba(74,30,33,.35)}
.events .none{display:block;font-size:18px}
.date{font-family:var(--sans);line-height:1.1}
.date b{display:block;font-family:var(--serif);font-weight:400;font-size:40px}
.events h3{font-weight:400;font-size:22px;margin:0}
.events .where{font-family:var(--sans);font-size:14px}

/* Instagram strip */
.ig{text-align:center;padding-block:56px;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.ig h2{font-weight:400;font-size:28px;margin:0 0 6px}
.ig p{margin:0 0 18px;color:var(--ink-soft)}

/* Footer */
.ftr{background:var(--oxblood);color:var(--footer-text);padding-block:64px 28px}
.ftr :focus-visible{outline-color:var(--footer-text)}
.ftr-in{max-width:1440px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.ftr-top{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:40px}
.ftr h2{font-weight:400;font-size:26px;margin:0 0 18px}
.nl{display:flex;border-bottom:1px solid rgba(243,231,211,.6);max-width:440px}
.nl input{flex:1;min-width:0;background:none;border:0;color:inherit;font:15px var(--sans);padding:12px 0}
.nl input::placeholder{color:rgba(243,231,211,.65)}
.nl button{background:none;border:0;color:inherit;cursor:pointer;font-size:22px;padding:0 4px}
.nl-msg{font-family:var(--sans);font-size:14px;margin:10px 0 0;min-height:1.4em}
.nl-msg a{color:inherit}
.ftr details summary{list-style:none;font-size:20px;cursor:default;margin-bottom:12px}
.ftr details summary::-webkit-details-marker{display:none}
.ftr ul{list-style:none;margin:0;padding:0;font-family:var(--sans);font-size:15px;display:grid;gap:10px}
.ftr ul a{text-decoration:none}.ftr ul a:hover{text-decoration:underline}
.sign{text-align:center;margin:64px 0 40px}
.sign p{font-size:clamp(24px,3vw,36px);margin:0 0 28px;text-wrap:balance}
.sign img{width:150px;height:150px}
.legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--sans);font-size:13px;border-top:1px solid rgba(243,231,211,.2);padding-top:20px}

/* Clothing page */
.shop-intro{text-align:center;padding-block:132px 8px;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.shop-intro h1{font-weight:400;font-size:clamp(34px,4vw,52px);line-height:1.1;margin:0 0 12px}
.shop-intro p{margin:0 auto;max-width:540px;color:var(--ink-soft);font-size:17px;text-wrap:balance}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin:30px auto 0;padding-block:16px;border-block:1px solid var(--rule);max-width:1440px}
.chips a{font-family:var(--sans);font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;text-decoration:none;padding-bottom:3px;border-bottom:1px solid transparent}
.chips a:hover{color:var(--orange-text)}
.chips a[aria-current="true"]{border-color:var(--ink)}
.chips .n{margin-left:6px;color:var(--ink-soft);font-weight:400;font-variant-numeric:tabular-nums}
.rack{max-width:1440px;margin:0 auto;padding-block:40px 32px;padding-left:var(--gutter);padding-right:var(--gutter-r);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 24px}
.item{display:flex;flex-direction:column;gap:10px;text-decoration:none;min-width:0}
.item .shot{aspect-ratio:3/4;background:var(--paper-deep);overflow:hidden}
.item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.item:hover img{transform:scale(1.03)}
.item h2{font-weight:400;font-size:17px;line-height:1.3;margin:4px 0 0;text-wrap:balance}
.item .meta{display:flex;justify-content:space-between;gap:12px;font-family:var(--sans);font-size:14px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.item .meta b{font-weight:500;color:var(--ink)}
.item .ulink{align-self:flex-start}
.item:hover .ulink{color:var(--orange-text)}
.empty{text-align:center;padding-block:24px 40px;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.empty h2{font-weight:400;font-size:26px;margin:0 0 8px}
.empty p{margin:0 0 16px;color:var(--ink-soft)}
.note{text-align:center;font-family:var(--sans);font-size:13px;color:var(--ink-soft);padding-block:0 64px;padding-left:var(--gutter);padding-right:var(--gutter-r)}

/* Not-found page */
.notfound{text-align:center;padding-block:150px 96px;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.notfound h1{font-weight:400;font-size:clamp(34px,4vw,52px);line-height:1.1;margin:0 0 12px}
.notfound p{margin:0 auto 24px;max-width:480px;color:var(--ink-soft);font-size:17px}
.notfound .links{display:flex;gap:22px;justify-content:center;flex-wrap:wrap}

@media (max-width:1100px){.rack{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Phone */
@media (max-width:900px){
  :root{--header-h:64px}
  .nav{display:none}.hdr .m-only{display:inline-flex}
  .hdr-in{grid-template-columns:1fr auto 1fr}
  .hdr-in .right{justify-self:end;display:flex}
  .badge{width:104px;height:104px;top:8px}
  .scrolled .badge,.menu-open .badge{transform:translate(-50%,-1px) scale(.4808)} /* 104px -> 50px, top 8px -> 7px */
  .hero{height:auto;aspect-ratio:9/15;max-height:760px}
  .hero-cap{padding-bottom:40px}
  .duo{grid-template-columns:1fr}
  .feature{grid-template-columns:1fr;gap:28px;padding-block:44px}
  .feature.flip .img{order:0}
  .feature .txt{justify-self:start}
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px}
  .card h3{font-size:16px}
  .popups-in{grid-template-columns:1fr;gap:28px}
  .events li{grid-template-columns:72px 1fr;gap:14px}
  .events li .ulink{grid-column:2}
  .date b{font-size:32px}
  .ftr-top{grid-template-columns:1fr;gap:8px}
  .ftr-top>div:first-child{margin-bottom:28px}
  .ftr details{border-top:1px solid rgba(243,231,211,.2);padding-block:14px}
  .ftr details summary{cursor:pointer;margin:0;display:flex;justify-content:space-between}
  .ftr details summary::after{content:"+";font-family:var(--sans)}
  .ftr details[open] summary::after{content:"–"}
  .ftr details[open] ul{margin-top:14px}
  .shop-intro{padding-top:84px}
  .rack{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 14px;padding-top:28px}
  .item h2{font-size:15px}
  .chips{gap:10px 18px}
  .notfound{padding-top:110px}
}
@media (prefers-reduced-motion:reduce){.badge,.item img{transition:none}}