/* reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}
html{scroll-behavior:smooth}
body{font-family:'Lora',Georgia,serif;font-size:1rem;line-height:1.6;color:#2C3E50;background:#F0F0F0;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{cursor:pointer;background:transparent;border:none;font:inherit;color:inherit}

/* variables */
:root{
  --color-primary:#C0392B;
  --color-primary-dark:#A93226;
  --color-white:#F0F0F0;
  --color-gold:#F1C40F;
  --color-nav-hover:#D35400;
  --color-dark:#1A1A1A;
  --color-text:#2C3E50;
  --color-text-light:#ECF0F1;
  --color-border:#BDC3C7;
  --font-heading:'Montserrat Black','Impact',sans-serif;
  --font-body:'Lora',Georgia,serif;
  --container-width:1280px;
  --spacing:2rem;
  --header-height:4rem;
  --transition:0.3s ease;
}

/* skip link */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:1000;
  padding:0.5rem 1rem;background:var(--color-primary);color:#fff;font-family:var(--font-body);
}
.skip-link:focus{left:0;top:0;outline:2px solid var(--color-gold)}

/* container */
.container{width:100%;max-width:var(--container-width);margin:0 auto;padding:0 1.5rem}

/* header */
.header{
  position:sticky;top:0;z-index:100;
  background:var(--color-white);border-bottom:1px solid var(--color-border);
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
}
.header__inner{
  display:flex;align-items:center;justify-content:space-between;
  height:var(--header-height);
}
.header__brand{
  font-family:var(--font-heading);font-size:1.5rem;letter-spacing:0.05em;
  color:var(--color-primary);text-transform:uppercase;
  padding:0.5rem 0;
  position:relative;
}
.header__brand::after{
  content:'';display:block;width:100%;height:3px;background:var(--color-gold);
  margin-top:2px;border-radius:2px;
}
.header__nav .nav-list{
  display:flex;gap:0.5rem;
}
.header__nav .nav-list a{
  display:block;padding:0.5rem 1rem;
  font-family:var(--font-heading);font-size:0.875rem;text-transform:uppercase;
  color:var(--color-text);transition:background var(--transition),color var(--transition);
  border-radius:4px;
}
.header__nav .nav-list a:hover,
.header__nav .nav-list a:focus-visible{
  background:var(--color-nav-hover);color:#fff;
}
.header__nav .nav-list a[aria-current="page"]{
  background:var(--color-primary);color:#fff;
}
.header__toggle{
  display:none;width:2rem;height:2rem;position:relative;
  background:transparent;
}
.header__toggle-icon,
.header__toggle-icon::before,
.header__toggle-icon::after{
  display:block;width:100%;height:2px;background:var(--color-text);
  transition:transform var(--transition);
}
.header__toggle-icon{position:relative;}
.header__toggle-icon::before{content:'';position:absolute;top:-6px;}
.header__toggle-icon::after{content:'';position:absolute;top:6px;}
[data-nav-toggle][aria-expanded="true"] .header__toggle-icon{
  transform:rotate(45deg);
}
[data-nav-toggle][aria-expanded="true"] .header__toggle-icon::before{
  top:0;transform:rotate(0);
}
[data-nav-toggle][aria-expanded="true"] .header__toggle-icon::after{
  top:0;transform:rotate(90deg);
}

/* footer */
.footer{
  background:var(--color-dark);color:var(--color-text-light);
  padding:2rem 0;margin-top:4rem;
  border-top:4px solid var(--color-primary);
}
.footer__inner{text-align:center;}
.footer__brand{
  font-family:var(--font-heading);font-size:1.25rem;color:var(--color-gold);
  margin-bottom:1rem;letter-spacing:0.05em;
}
.footer__info p{margin:0.25rem 0;font-size:0.875rem;}
.footer__legal{
  margin-top:0.75rem;display:flex;justify-content:center;gap:0.5rem;flex-wrap:wrap;
}
.footer__legal a{color:var(--color-gold);transition:color var(--transition);}
.footer__legal a:hover{color:var(--color-white);}
.footer__sep{color:var(--color-border);}
.footer__note{
  margin-top:1rem;font-size:0.75rem;color:var(--color-border);
  max-width:600px;margin-left:auto;margin-right:auto;
}

/* control panel */
.control-panel{
  display:flex;align-items:center;justify-content:space-between;
  padding:0.5rem 1rem;margin:1rem 0;
  background:var(--color-white);border:1px solid var(--color-border);
  border-radius:4px;font-size:0.875rem;color:var(--color-text);
  font-family:var(--font-body);
}
.control-panel__path::before{content:'📍 ';}
.control-panel__path{font-weight:bold;}

/* filter group */
.filter-group{display:flex;gap:0.5rem;flex-wrap:wrap;margin:0.5rem 0;}
.filter-btn{
  padding:0.3rem 0.8rem;border:1px solid var(--color-border);
  border-radius:999px;background:var(--color-white);color:var(--color-text);
  font-size:0.8rem;font-family:var(--font-body);transition:all var(--transition);
}
.filter-btn:hover,.filter-btn:focus-visible{background:var(--color-primary);color:#fff;border-color:var(--color-primary);}
.filter-btn[data-active]{background:var(--color-primary);color:#fff;border-color:var(--color-primary);}

/* breadcrumb */
.breadcrumb{
  display:flex;flex-wrap:wrap;gap:0.25rem;align-items:center;
  padding:0.5rem 0;margin:0.5rem 0;font-size:0.875rem;
  font-family:var(--font-body);color:var(--color-text);
}
.breadcrumb a{color:var(--color-primary);transition:color var(--transition);}
.breadcrumb a:hover{color:var(--color-gold);}
.breadcrumb span{color:var(--color-border);}

/* card */
.card{
  background:var(--color-white);border:1px solid var(--color-border);
  border-radius:8px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,0.04);
  transition:box-shadow var(--transition),transform var(--transition);
}
.card:hover{box-shadow:0 4px 12px rgba(0,0,0,0.08);transform:translateY(-2px);}
.card__img{width:100%;padding-top:56.25%;background:#e0e0e0;position:relative;overflow:hidden;}
.card__body{padding:1rem;}
.card__body h3{font-family:var(--font-heading);font-size:1.125rem;margin-bottom:0.5rem;}
.card__body p{font-size:0.9rem;color:#555;}

/* button */
.btn{
  display:inline-flex;align-items:center;gap:0.5rem;
  padding:0.5rem 1.25rem;border-radius:999px;
  font-family:var(--font-heading);font-size:0.875rem;text-transform:uppercase;
  transition:all var(--transition);
}
.btn--primary{background:var(--color-primary);color:#fff;}
.btn--primary:hover{background:var(--color-primary-dark);}
.btn--gold{background:var(--color-gold);color:var(--color-dark);}
.btn--gold:hover{background:#d4ac0d;}

/* img-wrapper */
.img-wrapper{
  position:relative;overflow:hidden;background:var(--color-border);
}
.img-wrapper::before{content:attr(data-alt);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:0.8rem;color:#666;}

/* section number */
.section-number{
  font-family:var(--font-heading);font-size:3rem;line-height:1;color:var(--color-primary);
  display:block;margin-bottom:0.5rem;opacity:0.3;letter-spacing:-0.02em;
}

/* focus-visible */
:focus-visible{outline:2px solid var(--color-gold);outline-offset:2px;}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important;scroll-behavior:auto;}
}

/* responsive */
@media(max-width:767px){
  .header__toggle{display:block;}
  .header__nav{
    position:absolute;top:var(--header-height);left:0;right:0;
    background:var(--color-white);border-bottom:1px solid var(--color-border);
    max-height:0;overflow:hidden;transition:max-height var(--transition);
  }
  .header__nav[data-open]{max-height:400px;}
  .header__nav .nav-list{flex-direction:column;padding:0.5rem 1rem;}
  .header__nav .nav-list a{padding:0.75rem 1rem;border-radius:0;}
  .footer__legal{flex-direction:column;gap:0.25rem;}
  .control-panel{flex-direction:column;align-items:flex-start;gap:0.5rem;}
}
@media(min-width:768px)and (max-width:1024px){
  .container{padding:0 2rem;}
}