@font-face {
  font-family: 'UGG Sans';
  src: local('UGG Sans Bold'),
       local('UGGSans-Bold'),
       url('assets/UGGSans-Bold-Font.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
  --cream: #FFF7EA;
  --brown: #806031;
  --brown-dark: #6b501f;
  --ink: #1a1712;
  --white: #ffffff;
  --border: #d8c9a8;
  --max-w: 1160px;
  --font-heading: 'UGG Sans', 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Design System: 4-Level Spacing Tokens */
  --space-xs: 18px; /* Small element gaps */
  --space-sm: 32px; /* Standard heading & component spacing */
  --space-md: 56px; /* Major blocks, cards & section paddings */
  --space-lg: 80px; /* Major section bottom spacing */
}

*{ box-sizing: border-box; margin:0; padding:0; }

html{
  scroll-behavior: smooth;
  overflow-y: scroll;
}

body{
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }

.wrap{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, .heading-font{
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--brown);
  line-height: 1.05;
  letter-spacing: 0;
}

a{ color: inherit; text-decoration: none; }

/* Button */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--brown);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  padding: 16px 36px;
  border-radius: 999px;
  border: 2px solid var(--brown);
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
}
.btn:hover{
  background: var(--brown-dark);
  border-color: var(--brown-dark);
  transform: scale(1.03);
}
.btn:active{
  transform: scale(0.99);
}
.btn .btn-arrow{
  display: block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.btn:hover .btn-arrow{
  transform: translateX(4px);
}
.btn:focus-visible{ outline: 3px solid var(--ink); outline-offset: 2px; }

.btn-outline{
  background: var(--cream);
  color: var(--brown);
  border: 2px solid var(--cream);
}
.btn-outline:hover{
  background: var(--white);
  color: var(--brown-dark);
  border-color: var(--white);
  transform: scale(1.03);
}

/* Header */
header{
  padding: var(--space-sm) 0;
}
header .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.logo{ display: flex; align-items: center; }
.logo-svg{
  height: 46px;
  width: auto;
  display: block;
}

/* Hero */
.hero{
  padding: var(--space-md) 0 var(--space-lg);
}
.eyebrow{
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--brown);
  font-size: clamp(1.25rem, 2.5vw, 1.55rem);
  letter-spacing: 0;
  margin-bottom: 0;
  padding-bottom: var(--space-sm);
}
.hero h1{
  font-size: clamp(2.9rem, 7.2vw, 5.2rem);
  line-height: 0.98;
  margin-top: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.hero .subhead{
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  margin-bottom: var(--space-sm);
}
.hero p{
  max-width: 620px;
  font-size: 1.05rem;
  margin-bottom: 10px;
}
.hero .lead-copy{
  margin-top: var(--space-xs);
  margin-bottom: var(--space-sm);
  font-weight: 500;
  font-size: 1.1rem;
  max-width: 700px;
}

/* Photo blocks */
.photo{
  border-radius: 28px;
  overflow: hidden;
  margin: var(--space-md) 0;
  aspect-ratio: 4 / 3;
  width: 100%;
}
.photo img{
  width:100%;
  height:100%;
  object-fit: cover;
  transition: transform 0.6s ease, filter 0.6s ease;
}
.photo:hover img{
  transform: scale(1.04);
  filter: brightness(1.03);
}

/* Info card */
.info-card{
  border: 2px solid var(--brown);
  border-radius: 24px;
  background: var(--white);
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: var(--space-md) 0 20px;
  overflow: hidden;
}
.info-card > div{
  padding: var(--space-sm) 28px;
  text-align: center;
}
.info-card > div:first-child{
  border-right: 2px solid var(--brown);
}
.info-card h3{
  font-size: 1.1rem;
  letter-spacing: 0;
  margin-bottom: var(--space-xs);
}
.info-card .value{
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--ink);
}
.info-card .value small{
  display:block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brown);
  margin-top: 4px;
}

/* Workshop section */
.workshop{
  padding: 0;
}
.workshop h2{
  font-size: clamp(2.9rem, 7.2vw, 5.2rem);
  line-height: 0.98;
  margin-bottom: var(--space-sm);
}
.workshop .subhead{
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--brown);
  font-size: clamp(1.25rem, 2.5vw, 1.55rem);
  letter-spacing: 0;
  margin-bottom: var(--space-sm);
}
.workshop p{
  max-width: 680px;
  font-size: 1.05rem;
}

/* CTA box */
.cta-box{
  background: var(--brown);
  border-radius: 28px;
  padding: 64px 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: var(--space-md) 0;
  color: var(--cream);
}
.cta-box .date{
  font-weight: 600;
  margin-bottom: 14px;
  font-size: 1rem;
  text-align: center;
  width: 100%;
}
.cta-box h3{
  color: var(--cream);
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  line-height: 1.1;
  margin-bottom: var(--space-sm);
  letter-spacing: 0;
  text-align: center;
  width: 100%;
  max-width: 780px;
}

.workshop .photo:last-child{
  margin-bottom: var(--space-md);
}

/* Footer */
footer{
  padding: var(--space-sm) 0 var(--space-md);
}
footer .divider{
  width: 100%;
  border-top: 1.5px solid var(--brown);
  margin-bottom: var(--space-sm);
}
footer .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 0.95rem;
  font-weight: 600;
}
footer .foot-logo{
  order: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
footer .foot-logo .logo-svg{ height: 34px; }
footer .foot-left{ order: 1; }
footer .foot-right{ order: 3; text-align: right; }

/* Back to Top Button */
.back-to-top{
  position: fixed;
  bottom: 60px;
  right: 60px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--brown);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.9);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.25s ease;
  border: 2px solid var(--brown);
}
.back-to-top.visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.back-to-top:hover{
  background: var(--brown-dark);
  border-color: var(--brown-dark);
  transform: scale(1.08);
}
.back-to-top svg{
  transition: transform 0.25s ease;
}
.back-to-top:hover svg{
  transform: translateY(-3px);
}

/* Responsive */
@media (max-width: 720px){
  header{ padding: var(--space-xs) 0; }
  header .wrap{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .info-card{ grid-template-columns: 1fr; }
  .info-card > div:first-child{
    border-right: none;
    border-bottom: 2px solid var(--brown);
  }
  footer .wrap{ flex-direction: column; text-align: center; gap: 12px; }
  footer .foot-left{ order: 1; text-align: center; }
  footer .foot-right{ order: 2; text-align: center; }
  footer .foot-logo{ order: 3; margin-top: 4px; }
  .photo{ border-radius: 20px; aspect-ratio: 3 / 4; }
  .cta-box{ padding: 48px 24px; }
  .cta-box h3{ font-size: clamp(1.45rem, 5.5vw, 1.85rem); line-height: 1.15; }
  .btn{ padding: 13px 22px; font-size: 0.95rem; }
  .logo-svg{ height: 34px; }
  .back-to-top{ bottom: 44px; right: 20px; width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; transition: none !important; }
  .photo:hover img{ transform: none; filter: none; }
  .back-to-top:hover svg{ transform: none; }
  .preloader{ opacity: 0 !important; visibility: hidden !important; display: none !important; }
}

/* Circular Preloader & Loading Animation */
.preloader {
  position: fixed;
  inset: 0;
  background: var(--cream);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s;
}

.preloader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.circular-loader-wrapper {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-ring {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  width: 100px;
  height: 100px;
}

.progress-ring-bg {
  fill: transparent;
  stroke: rgba(128, 96, 49, 0.15);
}

.progress-ring-circle {
  fill: transparent;
  stroke: var(--brown);
  stroke-linecap: round;
  stroke-dasharray: 263.89;
  stroke-dashoffset: 263.89;
  transition: stroke-dashoffset 0.15s ease-out;
}

.logo-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preloader-logo {
  height: 26px;
  width: auto;
  animation: preloaderPulse 1.6s ease-in-out infinite alternate;
}

@keyframes preloaderPulse {
  0% { transform: scale(0.96); opacity: 0.85; }
  100% { transform: scale(1.04); opacity: 1; }
}