/* Haverae Pack 04.2 — final pixel polish */

:root{
  --polish-accent:#b98770;
  --polish-shadow:0 18px 55px rgba(36,28,22,.085);
}

/* Subtle material depth without changing the palette */
body{
  background:
    radial-gradient(circle at 14% 5%,rgba(255,255,255,.44),transparent 26rem),
    radial-gradient(circle at 88% 18%,rgba(198,160,136,.055),transparent 30rem),
    var(--paper);
}
.page-shell{position:relative}
.page-shell::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.18;
  background-image:
    repeating-radial-gradient(circle at 0 0,rgba(30,25,20,.055) 0 1px,transparent 1px 4px);
  background-size:5px 5px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.28),transparent 70%);
}

/* Header */
.site-header{min-height:92px}
.site-header.is-scrolled{min-height:76px}
.wordmark{font-size:32px}
.main-nav{gap:36px}
.main-nav a{
  font-size:15px;
  line-height:1;
  letter-spacing:.005em;
}
.main-nav a::after{bottom:-9px}

/* Hero */
.home-hero{
  margin-top:20px;
  margin-bottom:64px;
}
.hero-copy{padding-top:64px}
.home-hero h1{
  line-height:.9;
  margin-bottom:30px;
}
.hero-lede{
  max-width:640px;
  font-size:18px;
  line-height:1.62;
}
.hero-proof{
  padding-top:48px;
  gap:40px;
}
.hero-proof span{font-size:11.5px}
.hero-art{
  box-shadow:0 30px 90px rgba(46,37,30,.13);
}
.hero-art::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.15),transparent 35%,rgba(21,18,15,.07));
}
.art-card{
  border:1px solid rgba(255,255,255,.22);
}
.art-card strong{letter-spacing:-.02em}

/* Buttons */
.primary-action{
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 8px 24px rgba(31,25,21,.08);
}
.secondary-action{border-bottom-color:rgba(23,21,18,.55)}
.about-action{
  background:rgba(255,255,255,.12);
  box-shadow:0 8px 30px rgba(44,34,27,.04);
}

/* Seamless marquee with intentional fades at viewport edges */
.marquee{
  position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
.marquee-track{animation-duration:34s}
.marquee-group{gap:27px;padding-top:16px;padding-bottom:16px}
.marquee span{font-size:10.5px}

/* Global vertical rhythm */
.section-block{padding-top:100px;padding-bottom:100px}
.section-heading{margin-bottom:36px}
.section-heading h2{line-height:.98}
.section-heading>p{font-size:14px;line-height:1.5}

/* Category cards */
.category-grid{gap:20px}
.category-card{
  min-height:405px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
}
.category-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(145deg,rgba(255,255,255,.12),transparent 42%,rgba(34,28,23,.025));
}
.category-card:hover{
  transform:translateY(-8px) scale(1.006);
  box-shadow:var(--polish-shadow),inset 0 1px 0 rgba(255,255,255,.30);
}
.category-number{
  font-size:23px;
  color:rgba(23,21,18,.82);
}
.category-copy h3{
  font-size:35px;
  line-height:1.02;
  margin-bottom:10px;
}
.category-copy p{
  font-size:13px;
  line-height:1.48;
  max-width:275px;
}
.round-arrow{
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(4px);
}

/* More intentional card variations */
.visual-1 .visual-line{opacity:.72}
.visual-2 .piece-c{box-shadow:0 0 0 7px rgba(255,255,255,.08)}
.visual-3 .piece-a{box-shadow:0 13px 28px rgba(63,45,35,.055)}
.visual-4 .piece-c{opacity:.72}
.visual-5 .piece-c{box-shadow:0 0 0 9px rgba(255,255,255,.08)}
.visual-6 .visual-line{opacity:.75}

/* Editorial dark block */
.editorial-break{
  margin-top:4px;
  padding:66px 68px;
  box-shadow:0 28px 85px rgba(28,23,19,.13);
}
.editorial-break h2{
  line-height:.97;
  max-width:650px;
}
.editorial-copy p{line-height:1.55}

/* Guide section: lighter and easier to scan */
.guides-section{padding-top:96px;padding-bottom:104px}
.guide-grid{gap:24px}
.guide-card{
  padding-top:12px;
  transition:transform .3s ease;
}
.guide-card:hover{transform:translateY(-2px)}
.guide-visual{
  height:228px;
  border-radius:21px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.23);
}
.guide-copy{padding-top:20px}
.guide-copy h3{
  font-size:clamp(27px,1.78vw,30px);
  line-height:1.08;
  letter-spacing:-.031em;
  margin-bottom:11px;
  text-wrap:balance;
}
.guide-copy p{
  font-size:12.5px;
  line-height:1.5;
  -webkit-line-clamp:2;
}
.guide-category{
  font-size:8.5px;
  letter-spacing:.16em;
}
.guide-open{
  background:rgba(248,245,239,.9);
  box-shadow:0 7px 20px rgba(38,30,24,.08);
}
.guide-card:hover .guide-open{transform:translateY(-1px)}

/* Make every guide visual feel a bit more composed */
.guide-style-1 .guide-visual{background-image:linear-gradient(150deg,rgba(255,255,255,.12),transparent 55%)}
.guide-style-2 .guide-visual{background-image:linear-gradient(20deg,rgba(31,27,23,.035),transparent 55%)}
.guide-style-3 .guide-visual{background-image:linear-gradient(160deg,rgba(255,255,255,.11),transparent 52%)}
.guide-style-4 .guide-visual{background-image:linear-gradient(20deg,rgba(255,255,255,.10),transparent 58%)}
.guide-style-5 .guide-visual{background-image:linear-gradient(145deg,rgba(31,27,23,.035),transparent 55%)}
.guide-style-6 .guide-visual{background-image:linear-gradient(160deg,rgba(255,255,255,.10),transparent 60%)}

/* Closing CTA */
.closing-cta{
  padding-top:64px;
  padding-bottom:64px;
  margin-bottom:58px;
}
.closing-cta h2{
  line-height:.94;
  max-width:760px;
}
.about-action{
  min-width:250px;
  height:68px;
}

/* Category pages */
.category-hero{
  min-height:445px;
  padding:56px 60px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.category-hero h1{
  line-height:.91;
  margin-top:26px;
  margin-bottom:18px;
}
.category-hero-art{
  background:rgba(255,255,255,.055);
  backdrop-filter:blur(2px);
}

/* Article reading refinement */
.article-hero{padding-top:78px}
.article-hero h1{
  line-height:.96;
  max-width:940px;
}
.article-lede{line-height:1.58}
.article-placeholder{box-shadow:var(--polish-shadow)}
.prose{
  line-height:1.78;
  color:#322e2a;
}
.prose h2{
  line-height:1.1;
  margin-top:62px;
}
.prose p{max-width:710px}

/* About */
.about-hero{
  padding-top:88px;
  padding-bottom:62px;
}
.about-hero h1{
  line-height:.93;
  max-width:1030px;
}
.about-grid{gap:20px}
.about-card{
  min-height:410px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
.about-card h2{
  font-size:44px;
  line-height:1;
}
.about-statement{
  padding-top:70px;
  padding-bottom:70px;
  margin-bottom:64px;
}
.about-statement strong{line-height:.94}

/* Legal pages */
.legal{
  padding-top:84px;
  padding-bottom:84px;
}
.legal-head{margin-bottom:48px}
.legal h1{margin-bottom:20px}
.legal-intro{line-height:1.55}
.legal-sections section{padding-top:30px;padding-bottom:30px}
.legal-sections h2{
  line-height:1.04;
  margin-bottom:10px;
}

/* Footer */
.site-footer{
  padding-top:54px;
}
.footer-top{gap:58px}
.footer-wordmark{font-size:29px}
.footer-column strong{font-size:12px}
.footer-column a{font-size:13px}
.footer-bottom{
  margin-top:52px;
  padding-top:17px;
}

/* Improve focus/accessibility without ruining the look */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--polish-accent);
  outline-offset:4px;
  border-radius:4px;
}

/* Wide desktop polish */
@media(min-width:1450px){
  .home-hero,.site-header,.section-block,.editorial-break,.closing-cta,.site-footer,.article-page,.about-statement,.category-hero{
    width:min(1320px,calc(100% - 64px));
  }
  .home-hero{grid-template-columns:minmax(0,1.03fr) minmax(430px,.73fr)}
  .main-nav{gap:38px}
  .guide-copy h3{font-size:30px}
}

/* Tablet/mobile */
@media(max-width:1050px){
  .main-nav a{font-size:14px}
  .guide-copy h3{font-size:29px}
}
@media(max-width:820px){
  .site-header{min-height:74px}
  .wordmark{font-size:29px}
  .section-block{padding-top:76px;padding-bottom:76px}
  .editorial-break{padding:38px}
  .guide-visual{height:225px}
  .closing-cta{padding-top:52px;padding-bottom:52px}
}
@media(max-width:560px){
  .page-shell::before{opacity:.10}
  .home-hero{margin-bottom:48px}
  .hero-proof{gap:8px}
  .marquee{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
  }
  .category-card{min-height:365px}
  .guide-copy h3{font-size:28px}
  .guide-copy p{-webkit-line-clamp:3}
  .about-card{min-height:330px}
  .footer-column a{font-size:12px}
}