*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#fff;color:#374047;font-family:Arial,Helvetica,sans-serif;font-weight:400}
body{font-size:17px;line-height:1.35}
a{color:inherit;text-decoration:none}
.site{width:86%;max-width:1400px;margin:0 auto}
.header{height:52px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ececec}
.brand{display:flex;align-items:center;height:100%;overflow:hidden}
.brand img{display:block;width:170px;height:auto;max-height:28px;object-fit:contain;object-position:left center}
.nav{display:flex;align-items:center;gap:20px;font-size:16px;color:#30363a}
.nav a:hover{text-decoration:underline}
.ig-link img{width:14px;height:14px;display:block;object-fit:contain}
.footer{padding:14px 0 20px;text-align:center;font-size:15px;color:#5b6367}
.footer-nav{display:flex;justify-content:center;gap:25px;margin-bottom:4px}
.footer-email{margin-bottom:2px;color:#78909a}
.footer-ig{width:13px;height:13px;margin:0 auto 10px;display:block}
.footer-copy{font-size:12px;text-align:right;color:#7a8083}

/* HOME — layout and normal document scrolling are intentionally preserved */
.home-hero{position:relative;margin-top:0;overflow:hidden;aspect-ratio:1.85 / 1;width:100vw;margin-left:calc(50% - 50vw)}
.home-hero-parallax{position:absolute;inset:0;overflow:hidden}
.home-hero-parallax img{display:block;width:100%;height:auto;position:absolute;left:0;top:0;will-change:transform}
@media (prefers-reduced-motion: reduce){.home-hero-parallax img{transform:none!important;will-change:auto}}
.hero-title{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;text-align:center;color:#fff;text-transform:uppercase;line-height:1}
.hero-title .main{font-size:63px;font-weight:400;letter-spacing:.2px}
.hero-title .sub{font-size:30px;margin-top:5px;letter-spacing:.2px}
.home-tagline{text-align:center;padding:40px 10px 48px;font-size:28px;line-height:1.05}
.home-tagline .second{font-size:34px}
.home-feature{position:relative;overflow:hidden;width:100vw;margin-left:calc(50% - 50vw)}
.home-feature:before{content:"";position:absolute;inset:0;background-image:url('assets/001 Home page/background on bottom.jpeg');background-size:cover;background-position:center;opacity:.15}
.home-feature-inner{position:relative;width:86%;max-width:1400px;margin:0 auto;padding:28px 0 31px}
.home-feature-image{display:block;width:67%;height:auto;margin:0 auto}
.home-feature-caption{font-size:11px;text-align:center;margin:2px auto 0;color:#596065;width:97%}

/* ARTWORK — three columns and the PDF order are preserved */
.artwork-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:16px;padding:26px 0 40px;align-items:start}
.artwork-col{min-width:0}
.work-card{min-width:0;margin:0 0 25px}
.work-card img{display:block;width:100%;height:auto;object-fit:contain}
.work-card .desc{font-size:14px;line-height:1.23;margin-top:5px;color:#4a4a4a}
.artwork-contact{position:relative;text-align:center;width:100vw;margin-left:calc(50% - 50vw);padding:52px 10px 54px;margin-top:0;overflow:hidden}
.artwork-contact:before{content:"";position:absolute;inset:0;background-image:url('assets/003 Work page/artwork page background picture.jpg');background-size:cover;background-position:center;opacity:.22}
.artwork-contact>*{position:relative}
.artwork-contact strong{display:block;font-size:17px;font-weight:400;margin-bottom:1px;color:#4b5256}
.artwork-contact div{font-size:15px;color:#4b5256}

/* ABOUT */
.about-text{padding:27px 0 36px;font-size:16px;line-height:1.38}
.about-text p{margin:0 0 10px}
.about-blue{background:#e9efff;width:100vw;margin-left:calc(50% - 50vw);padding:43px max(11.3vw, 184px);display:grid;grid-template-columns:1.6fr .9fr 1.7fr;gap:11px;margin-bottom:0}
.about-blue img{width:100%;height:214px;object-fit:cover;display:block}
.classes-title{text-align:center;font-size:22px;font-weight:700;margin-top:4px}
.classes-sub{text-align:center;font-size:20px;margin:2px auto 8px;max-width:83.333%}
.classes-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;align-items:start;padding:0 5.4%}
.classes-grid img{width:100%;height:154px;object-fit:cover;display:block}
.class-contact{text-align:center;font-size:13px;margin-top:3px;color:#7b9099}.class-contact strong{font-weight:700}

@media (max-width:800px){
 .site{width:90%}
 .header{height:48px}
 .brand img{width:150px;max-height:25px}
 .nav{gap:13px;font-size:15px}
 .hero-title .main{font-size:53px}.hero-title .sub{font-size:26px}
 .home-tagline{font-size:25px;padding:30px 5px 35px}.home-tagline .second{font-size:31px}
 .home-feature-inner{padding:22px 0 25px}.home-feature-image{width:78%}
 .artwork-grid{column-gap:12px;padding-top:22px}.work-card{margin-bottom:19px}.work-card .desc{font-size:14px}
 .about-text{font-size:16px;padding-top:22px}.about-blue{padding:28px 11.3vw;gap:8px}.about-blue img{height:150px}.classes-title{font-size:20px}.classes-sub{font-size:18px}.classes-grid{gap:6px;padding:0 5%}.classes-grid img{height:110px}.class-contact{font-size:13px}
}
@media (max-width:520px){
 .site{width:92%}
 .header{height:44px}
 .brand img{width:125px;max-height:22px}
 .nav{gap:10px;font-size:14px}
 .hero-title .main{font-size:38px}.hero-title .sub{font-size:21px}
 .home-tagline{font-size:20px;padding:25px 5px 29px}.home-tagline .second{font-size:26px}
 .home-feature-inner{padding:17px 0 20px}.home-feature-image{width:94%}
 .home-feature-caption{font-size:10px}
 .artwork-grid{grid-template-columns:1fr;column-gap:0;padding-top:18px}.work-card{margin-bottom:17px}.work-card .desc{font-size:14px}
 .about-text{font-size:14px;padding-top:18px;padding-bottom:22px}.about-blue{padding:16px 4vw;gap:5px}.about-blue img{height:90px}.classes-title{font-size:17px}.classes-sub{font-size:15px;max-width:90%}.classes-grid{grid-template-columns:repeat(3,1fr);gap:5px;padding:0 4%}.classes-grid img{height:95px}.class-contact{font-size:12px}
 .footer{font-size:13px}.footer-copy{font-size:11px}
}

/* 2026-09-17 final refinement pass — preserve approved parallax JS */
/* Site-wide lettering: +3px from the previously approved version */
body{font-size:20px}
.nav{font-size:19px;color:#2f3437}
.footer{font-size:18px}
.footer-copy{font-size:15px}
.home-tagline{font-size:31px}
.home-tagline .second{font-size:37px}
.home-feature-caption{font-size:14px}
.work-card .desc{font-size:17px;line-height:1.23;color:#92989b}
.artwork-contact strong{font-size:25px;color:#7f888c}
.artwork-contact div{font-size:23px;color:#7f888c}
.about-text{font-size:18px;color:#7f888c}
.classes-title{font-size:25px}
.classes-sub{font-size:23px}
.class-contact{font-size:16px;color:#7f888c}

/* Instagram marks slightly larger in both header and footer */
.ig-link img{width:19px;height:19px}
.footer-ig{width:18px;height:18px}

/* HOME title refinements. Reclaimed line +3px more; WEAVING ART sized to match its visual width. */
.hero-title .sub{font-size:36px}
.hero-title .main{font-size:78px}

/* Shorter parallax viewing window; parallax movement itself is unchanged. */
.home-hero{aspect-ratio:2.25 / 1}

/* Bottom statement +3px more than the site-wide increase */
.home-tagline{font-size:34px}
.home-tagline .second{font-size:40px}

/* Enlarge the lower Index artwork substantially and match caption colour to footer email */
.home-feature-image{width:100%}
.home-feature-caption{color:#78909a}

/* Artwork captions deliberately lighter than the purchase/contact copy */
.work-card .desc{color:#9aa0a3}

/* ABOUT spacing and image widths: upper trio and lower six share the same content width */
.about-text{padding-bottom:50px}
.about-blue{padding-left:5.4%;padding-right:5.4%;grid-template-columns:1.6fr .9fr 1.7fr;gap:11px}
.classes-grid{padding-left:5.4%;padding-right:5.4%}

/* Navigation labels a little darker everywhere */
.nav,.footer-nav{color:#343a3e}

@media (max-width:800px){
 body{font-size:20px}
 .nav{font-size:18px}
 .hero-title .sub{font-size:32px}
 .hero-title .main{font-size:69px}
 .home-tagline{font-size:31px;padding:30px 5px 35px}
 .home-tagline .second{font-size:37px}
 .home-feature-image{width:100%}
 .work-card .desc{font-size:17px;color:#9aa0a3}
 .artwork-contact strong{font-size:25px}.artwork-contact div{font-size:23px}
 .about-text{font-size:18px;padding-bottom:42px;color:#7f888c}
 .about-blue{padding-left:5%;padding-right:5%}
 .classes-title{font-size:23px}.classes-sub{font-size:21px}.class-contact{font-size:16px}
 .footer{font-size:18px}.footer-copy{font-size:15px}
 .ig-link img{width:19px;height:19px}.footer-ig{width:18px;height:18px}
}
@media (max-width:520px){
 body{font-size:20px}
 .nav{font-size:17px}
 .hero-title .sub{font-size:27px}
 .hero-title .main{font-size:58px}
 .home-tagline{font-size:26px;padding:25px 5px 29px}
 .home-tagline .second{font-size:32px}
 .home-feature-image{width:100%}
 .home-feature-caption{font-size:13px;color:#78909a}
 .work-card .desc{font-size:17px;color:#9aa0a3}
 .artwork-contact strong{font-size:22px}.artwork-contact div{font-size:20px}
 .about-text{font-size:16px;padding-bottom:32px;color:#7f888c}
 .about-blue{padding-left:4%;padding-right:4%}
 .classes-title{font-size:20px}.classes-sub{font-size:18px}.class-contact{font-size:15px}
 .footer{font-size:16px}.footer-copy{font-size:14px}
 .ig-link img{width:18px;height:18px}.footer-ig{width:17px;height:17px}
}

/* 2026-09-17 final mobile/header alignment refinements */
/* Brand +2px; nav labels -1px; right-side header items sit slightly lower to align optically with brand lettering. */
.brand img{width:182px;max-height:30px}
.nav{font-size:18px;transform:translateY(2px)}

/* Keep the Index overlay phrases on one line each; scale them down fluidly on narrow screens instead of wrapping/cropping. */
.hero-title .main,.hero-title .sub{white-space:nowrap}
.home-tagline>div{white-space:nowrap}

@media (max-width:800px){
 .brand img{width:162px;max-height:27px}
 .nav{font-size:17px;transform:translateY(2px)}
 .hero-title .main{font-size:clamp(34px,9.8vw,69px)}
 .hero-title .sub{font-size:clamp(17px,4.7vw,32px)}
 .home-tagline{font-size:clamp(19px,4.6vw,31px)}
 .home-tagline .second{font-size:clamp(22px,5.35vw,37px)}
}
@media (max-width:520px){
 .brand img{width:137px;max-height:24px}
 .nav{font-size:16px;transform:translateY(2px)}
 .hero-title .main{font-size:clamp(30px,9.8vw,51px)}
 .hero-title .sub{font-size:clamp(15px,4.65vw,24px)}
 .home-tagline{font-size:clamp(17px,4.6vw,24px);padding-left:2px;padding-right:2px}
 .home-tagline .second{font-size:clamp(20px,5.3vw,28px)}
}

/* 2026-09-17 reference-image refinements */
/* Header: larger left brand, smaller right labels; Instagram remains unchanged. */
.brand img{width:215px;max-height:36px}
.nav{font-size:15px}

/* Footer: return to the smaller, quieter proportions and colours of the reference. */
.footer{font-size:15px;color:#374047;padding:14px 0 20px}
.footer-nav{color:#374047}
.footer-email{color:#78909a}
.footer-copy{font-size:12px;color:#7a8083}

/* Artwork: captions two sizes smaller; contact copy darker for stronger contrast. */
.work-card .desc{font-size:15px;color:#9aa0a3}
.artwork-contact strong,.artwork-contact div{color:#59656b}

/* About: taller upper image windows; both rows use the same visual span. */
.about-blue{padding-left:5.4%;padding-right:5.4%}
.about-blue img{height:350px}
.classes-grid{padding-left:0;padding-right:0}

@media (max-width:800px){
 .brand img{width:190px;max-height:32px}
 .nav{font-size:14px}
 .footer{font-size:14px}.footer-copy{font-size:12px}
 .work-card .desc{font-size:15px}
 .about-blue img{height:240px}
 .classes-grid{padding-left:0;padding-right:0}
}
@media (max-width:520px){
 .brand img{width:155px;max-height:27px}
 .nav{font-size:13px}
 .footer{font-size:13px}.footer-copy{font-size:11px}
 .work-card .desc{font-size:15px}
 .about-blue img{height:120px}
 .classes-grid{padding-left:0;padding-right:0}
}

/* 2026-09-17 final three refinements */
/* Make the two Index tagline lines share the same visual width. */
.home-tagline{display:flex;flex-direction:column;align-items:center}
.home-tagline>div{width:min(92vw,760px);text-align:center}
.home-tagline .second{font-size:1em;letter-spacing:.045em}

@media (max-width:520px){
  /* Centre the copyright line in every page footer. */
  .footer-copy{text-align:center;width:100%}

  /* Square mobile hero window while retaining the existing parallax movement. */
  .home-hero{aspect-ratio:1 / 1}
  .home-hero-parallax img{width:100%;height:125%;object-fit:cover;object-position:center top}

  /* Keep both tagline lines aligned and fluid on narrow screens. */
  .home-tagline>div{width:94vw}
  .home-tagline,.home-tagline .second{font-size:clamp(17px,4.6vw,24px)}
}

/* 2026-09-17 VISIBLE TAGLINE FIX — only this two-line statement is changed.
   Each line is given its own responsive size so their rendered widths align. */
.home-tagline > div{
  width:auto;
  max-width:96vw;
  white-space:nowrap;
  text-align:center;
}
.home-tagline > div:first-child{
  font-size:34px;
  letter-spacing:0;
}
.home-tagline .second{
  font-size:45px;
  letter-spacing:0;
}
@media (max-width:800px){
  .home-tagline > div:first-child{font-size:clamp(20px,4.25vw,34px)}
  .home-tagline .second{font-size:clamp(26px,5.63vw,45px)}
}
@media (max-width:520px){
  .home-tagline > div:first-child{font-size:clamp(17px,4.25vw,22px)}
  .home-tagline .second{font-size:clamp(22px,5.63vw,29px)}
}

/* 2026-09-17 HERO TITLE VISIBLE WIDTH MATCH — only the two hero title lines. */
.hero-title .main,
.hero-title .sub{
  display:block;
  width:max-content;
  max-width:96vw;
  margin-left:auto;
  margin-right:auto;
  white-space:nowrap;
  letter-spacing:0;
}
/* WEAVING ART: one visible size larger than the approved version. */
.hero-title .main{font-size:84px}
/* Independently sized so RECLAIMED YARNS & STORYTELLING visually shares the same left/right edges. */
.hero-title .sub{font-size:38.5px;margin-top:5px}

@media (max-width:800px){
  .hero-title .main{font-size:clamp(36px,10.5vw,84px)}
  .hero-title .sub{font-size:clamp(16.5px,4.81vw,38.5px)}
}
@media (max-width:520px){
  .hero-title .main{font-size:clamp(31px,10.5vw,54.6px)}
  .hero-title .sub{font-size:clamp(14.2px,4.81vw,25px)}
}


/* Exact visible edge alignment for the two hero lines.
   The subtitle keeps its own responsive font size, then is horizontally scaled
   to the measured rendered width of WEAVING ART at every viewport width. */
.hero-title .sub{transform-origin:center center;will-change:transform}


/* 2026-09-17 HERO NATURAL PROPORTIONS — remove horizontal scaling and reduce subtitle by 2px. */
.hero-title .sub{transform:none !important;will-change:auto;font-size:36.5px}
@media (max-width:800px){
  .hero-title .sub{font-size:clamp(14.5px,4.56vw,36.5px)}
}
@media (max-width:520px){
  .hero-title .sub{font-size:clamp(12.2px,4.43vw,23px)}
}

/* 2026-09-17 FINAL HERO SUBTITLE WIDTH — natural proportions, reduced to visually match WEAVING ART edges. */
.hero-title .sub{font-size:34px !important;transform:none !important;will-change:auto}
@media (max-width:900px){
  .hero-title .sub{font-size:clamp(13.5px,4.25vw,34px) !important}
}
@media (max-width:560px){
  .hero-title .sub{font-size:clamp(11.5px,4.12vw,21.4px) !important}
}