/* Harvey Tailor — an evening atelier: black barathea ground, ivory chalk, a champagne-gold signature. Single dark theme by design. */
:root{
  color-scheme:dark;
  --night:#0B0C0E;
  --coal:#141619;
  --ivory:#EEEAE2;
  --mute:#8F8B84;
  --hair:#272829;
  --gold:#CDAC70;
  --display:"Bodoni Moda","Didot","Times New Roman",serif;
  --mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --body:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--night)}
body{margin:0;background:var(--night);color:var(--ivory);font-family:var(--body);font-size:15px;line-height:1.9;letter-spacing:.03em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--night)}
a{color:inherit}
img{display:block;max-width:100%}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:400;text-wrap:balance}
.wrap{max-width:1280px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.label{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}
.it{font-family:var(--display);font-style:italic}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px}

/* header */
.site{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:20;transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
.site.solid{background:rgba(11,12,14,.88);backdrop-filter:blur(12px);border-color:var(--hair)}
.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px}
.site .brand img{height:30px;width:auto}
.menu{display:flex;gap:28px}
.menu a{font-size:11px;letter-spacing:.26em;text-transform:uppercase;text-decoration:none;color:var(--mute);transition:color .2s}
.menu a:hover,.menu a[aria-current]{color:var(--ivory)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:14px 30px;border:1px solid var(--ivory);color:var(--ivory);background:none;font-family:var(--body);font-size:11px;letter-spacing:.28em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.btn:hover{background:var(--ivory);color:var(--night)}
.btn.gold{border-color:var(--gold);color:var(--gold)}
.btn.gold:hover{background:var(--gold);color:var(--night)}
.site .btn{padding:9px 18px}
@media (max-width:980px){.menu{display:none}}

/* section heads */
.sec{padding-block:120px}
.sec.line{border-top:1px solid var(--hair)}
.head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 40px;margin-bottom:52px}
.head h2{font-family:var(--display);font-size:clamp(40px,6vw,84px);line-height:.95;text-transform:uppercase;margin-top:18px}
.head h2 em{text-transform:none;color:var(--gold)}
.head p{max-width:30em;color:var(--mute)}
@media (max-width:760px){.sec{padding-block:80px}.head{margin-bottom:36px}}

/* marquee of mill logos */
.marquee{border-block:1px solid var(--hair);overflow:hidden;padding-block:30px;background:var(--night);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .track{display:flex;align-items:center;width:max-content;animation:slide 60s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee img{height:44px;width:auto;margin-inline:44px;opacity:.82}
.marquee img.tall{height:62px}
@keyframes slide{to{transform:translateX(-50%)}}

/* contact */
.contact{background:var(--coal)}
.contact .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:end;padding-block:120px}
.contact h2{font-family:var(--display);font-size:clamp(52px,8vw,120px);line-height:.9;text-transform:uppercase;margin-top:18px}
.contact h2 em{color:var(--gold);text-transform:none}
.contact .lead{font-family:var(--mincho);font-size:17px;letter-spacing:.1em;margin-top:28px;color:var(--mute)}
dl.info{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px 32px;border-top:1px solid var(--ivory);padding-top:28px}
dl.info dt{font-size:10.5px;letter-spacing:.3em;color:var(--mute);text-transform:uppercase;padding-top:5px}
dl.info dd{margin:0;min-width:0;overflow-wrap:anywhere}
.mail-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.mail-row span{font-family:var(--display);font-size:21px;user-select:all}
.copy{padding:7px 14px}
@media (max-width:860px){.contact .wrap{grid-template-columns:1fr;gap:48px;padding-block:88px}}

footer{padding-block:40px 48px;border-top:1px solid var(--hair);font-size:11px;letter-spacing:.2em;color:var(--mute);text-transform:uppercase}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px}
footer img{height:28px;width:auto}

/* scroll reveal (see reveal.js) */
.rv{transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--rv-d,0s),transform 1s cubic-bezier(.2,.7,.2,1) var(--rv-d,0s)}
.rv-pre{opacity:0;transform:translateY(22px)}
.label{position:relative}
@keyframes fade{from{opacity:.0001;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}