@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&display=swap");

/* =========================================================
   BENCEFALO · TYPOGRAPHY SYSTEM
   Canonical type scale and font roles · v80
   Display: Angle Fairy
   Editorial body: Newsreader
   UI: Inter
   ========================================================= */

:root{
  --font-display:"AngleFairy",Georgia,serif;
  --font-body:"Newsreader",Georgia,"Times New Roman",serif;
  --font-ui:"Inter",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* Legacy aliases now point to the canonical system */
  --display:var(--font-display);
  --serif:var(--font-display);
  --ui:var(--font-ui);

  /* Editorial hierarchy */
  --type-display:clamp(3.625rem,6.2vw,6rem);   /* 58–96 */
  --type-h1:clamp(3rem,4.8vw,4.5rem);          /* 48–72 */
  --type-h2:clamp(2.5rem,4vw,3.75rem);         /* 40–60 */
  --type-h3:clamp(1.875rem,2.6vw,2.375rem);    /* 30–38 */
  --type-h4:clamp(1.5rem,2vw,1.75rem);         /* 24–28 */
  --type-h5:1.375rem;                           /* 22 */
  --type-h6:1.125rem;                           /* 18 */

  /* Reading + interface */
  --type-lead:clamp(1.0625rem,1.4vw,1.25rem);  /* 17–20 */
  --type-body:1.0625rem;                        /* 17 */
  --type-card:1rem;                             /* 16 */
  --type-ui:0.875rem;                           /* 14 */
  --type-subnav:0.8125rem;                      /* 13 */
  --type-caption:0.75rem;                       /* 12 */
  --type-micro:0.6875rem;                       /* 11 */
  --type-eyebrow:0.75rem;                       /* 12 */

  --lh-display:.92;
  --lh-h1:.96;
  --lh-h2:1;
  --lh-h3:1.08;
  --lh-h4:1.12;
  --lh-body:1.72;
  --lh-lead:1.62;
  --lh-ui:1.45;

  --measure-body:68ch;
  --measure-lead:58ch;
}

/* Base */
html{font-size:16px}
body{
  font-family:var(--font-ui)!important;
  font-size:1rem;
  line-height:var(--lh-body);
  font-synthesis:none;
  text-rendering:optimizeLegibility;
}
button,input,select,textarea,label,nav,.nav,.navlinks,.nav-menu,.tb-nav,.sidebar,.tabs,.toolbar,.footer-links{
  font-family:var(--font-ui)!important;
}
button,input,select,textarea{font-size:0.9375rem;line-height:1.4}

/* Angle Fairy is the only display face */
h1,h2,h3,h4,h5,h6,
.section-title,.qtitle,.modal-title,.dialog-title,
.daily-reading h3,.step-card h3,.service-card h3,
.brandword,.footer-brand-title,.faq-list summary{
  font-family:var(--font-display)!important;
  font-weight:400!important;
  font-style:normal!important;
  font-synthesis:none!important;
}
h1{font-size:var(--type-h1)!important;line-height:var(--lh-h1)!important;letter-spacing:-.018em}
h2,.section-title{font-size:var(--type-h2)!important;line-height:var(--lh-h2)!important;letter-spacing:-.012em}
h3{font-size:var(--type-h3)!important;line-height:var(--lh-h3)!important}
h4{font-size:var(--type-h4)!important;line-height:var(--lh-h4)!important}
h5{font-size:var(--type-h5)!important;line-height:1.18!important}
h6{font-size:var(--type-h6)!important;line-height:1.2!important}

/* Hero / editorial display */
.hero h1,.hero-title,.display-title{
  font-family:var(--font-display)!important;
  font-size:var(--type-display)!important;
  font-weight:400!important;
  line-height:var(--lh-display)!important;
  letter-spacing:-.02em!important;
}

/* Editorial body: Newsreader */
p,.lead,.section-lead,.qlead,.story-copy,
.article,.article p,.copy,.description,.card-description,
.review-card>p,.testimonial-card .quote,
.terms-modal-card p,.modal-card p,.dialog p{
  font-family:var(--font-body)!important;
  font-optical-sizing:auto;
  font-weight:400;
}
p{
  font-size:var(--type-body);
  line-height:var(--lh-body);
}
.lead,.section-lead,.qlead,.hero-copy>p{
  font-family:var(--font-body)!important;
  font-optical-sizing:auto;
  font-size:var(--type-lead)!important;
  font-weight:400!important;
  line-height:var(--lh-lead)!important;
  max-width:var(--measure-lead);
}
.story-copy p,.article p{max-width:var(--measure-body)}

/* Eyebrows / category labels
   Official treatment for “LECTURAS DE TAROT · TALLER BRUJO” */
.eyebrow,.kicker,.overline,.section-label{
  font-family:var(--font-ui)!important;
  font-size:var(--type-eyebrow)!important;
  font-weight:300!important;
  line-height:1.35!important;
  letter-spacing:.20em!important;
  text-transform:uppercase!important;
}

/* Navigation */
.navlinks,.navlinks>a,.navlinks>button,.nav-trigger,.tb-nav .navlinks{
  font-family:var(--font-ui)!important;
  font-size:var(--type-ui)!important;
  font-weight:600!important;
  line-height:1.2!important;
}
.nav-menu,.nav-menu a,.nav-menu button,.nav-submenu,.nav-submenu a,
.tarot-subnav-button,.nav-menu-head{
  font-family:var(--font-ui)!important;
  font-size:var(--type-subnav)!important;
}
.nav-menu small,.tarot-subnav-button small{
  font-family:var(--font-ui)!important;
  font-size:var(--type-micro)!important;
  line-height:1.45!important;
}

/* Buttons */
.btn,.outline,.button,button[type="submit"],input[type="submit"]{
  font-family:var(--font-ui)!important;
  font-size:.9375rem!important;
  font-weight:700!important;
  line-height:1.2!important;
}
.mini,.btn.small,.outline.mini{font-size:var(--type-subnav)!important}

/* Cards */
.card p,.service-card p,.step-card p,.category-card p,.item p,.row p{
  font-family:var(--font-body)!important;
  font-size:var(--type-card)!important;
  line-height:1.65!important;
}
.card h3,.service-card h3,.step-card h3,.category-card h3{
  font-size:var(--type-h3)!important;
}

/* Statistics */
.stat-card strong,.fact strong,.metric,.rownum,.stat-value{
  font-family:var(--font-ui)!important;
  font-size:2.125rem!important;
  font-weight:800!important;
  line-height:1.05!important;
  letter-spacing:-.025em!important;
}
.stat-card small,.fact small,.stat-label{
  font-family:var(--font-ui)!important;
  font-size:var(--type-subnav)!important;
  font-weight:400!important;
  line-height:1.45!important;
}

/* Reviews */
.review-card>p,.testimonial-card .quote{
  font-family:var(--font-body)!important;
  font-size:1.0625rem!important;
  font-weight:400!important;
  line-height:1.70!important;
}
.review-person strong,.quote-person strong{
  font-family:var(--font-ui)!important;
  font-size:var(--type-ui)!important;
  font-weight:600!important;
  line-height:1.3!important;
}
.review-person small,.quote-person small{
  font-family:var(--font-ui)!important;
  font-size:var(--type-micro)!important;
  font-weight:500!important;
  line-height:1.4!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
}

/* FAQ / accordions */
.faq-list summary,.programme summary{
  font-family:var(--font-display)!important;
  font-size:1.625rem!important;
  font-weight:400!important;
  line-height:1.18!important;
}
.faq-answer p,.programme details p{
  font-family:var(--font-body)!important;
  font-size:1rem!important;
  line-height:1.72!important;
}

/* Modals */
.terms-modal-card h2,.modal-card h2,.dialog h2,.modal-title{
  font-family:var(--font-display)!important;
  font-size:2.125rem!important;
  font-weight:400!important;
  line-height:1.08!important;
}
.terms-modal-card p,.modal-card p,.dialog p{
  font-family:var(--font-body)!important;
  font-size:1rem!important;
  line-height:1.68!important;
}
.terms-modal-card .eyebrow,.modal-card .eyebrow{font-size:var(--type-micro)!important}

/* Forms */
.field label,.form-field label,.question legend{
  font-family:var(--font-ui)!important;
  font-size:var(--type-subnav)!important;
  font-weight:500!important;
  line-height:1.4!important;
}
input,textarea,select{
  font-family:var(--font-ui)!important;
  font-size:.9375rem!important;
  font-weight:400!important;
}
::placeholder{font-family:var(--font-ui);font-weight:400}
.help,.hint,.helper,.validation,.field small{
  font-family:var(--font-ui)!important;
  font-size:var(--type-caption)!important;
  line-height:1.45!important;
}
.notice,.loading,.toast,.status,.badge,.chip,.pill{
  font-family:var(--font-ui)!important;
}

/* Campus + admin */
.page-head h1,.admin-shell .page-head h1{
  font-size:3.25rem!important;
  line-height:.98!important;
}
#campus h2,.admin-shell h2{font-size:2.5rem!important;line-height:1.02!important}
#campus h3,.admin-shell h3{font-size:1.875rem!important;line-height:1.08!important}
.sidebar button,.tabs button{
  font-family:var(--font-ui)!important;
  font-size:var(--type-ui)!important;
  font-weight:500!important;
}
.table{
  font-family:var(--font-ui)!important;
  font-size:var(--type-ui)!important;
  line-height:1.45!important;
}
.table th{
  font-size:var(--type-caption)!important;
  font-weight:600!important;
  letter-spacing:.04em!important;
}
.status,.badge{font-size:var(--type-micro)!important;font-weight:500!important}

/* Legal / dense reading */
.article .eyebrow,p.eyebrow{
  font-family:var(--font-ui)!important;
  font-size:var(--type-eyebrow)!important;
  font-weight:300!important;
  line-height:1.35!important;
  letter-spacing:.20em!important;
  text-transform:uppercase!important;
}
.article h1{font-size:3.25rem!important}
.article h2{
  font-family:var(--font-display)!important;
  font-size:2rem!important;
  line-height:1.12!important;
  font-weight:400!important;
}
.article p{font-size:1rem!important;line-height:1.72!important}

/* Footer */
.footer-brand-title,.footer .brandword{
  font-family:var(--font-display)!important;
  font-size:1.875rem!important;
  font-weight:400!important;
}
.footer-brand p{
  font-family:var(--font-body)!important;
  font-size:.875rem!important;
  line-height:1.65!important;
}
.footer-col>strong{
  font-family:var(--font-ui)!important;
  font-size:var(--type-caption)!important;
  font-weight:600!important;
  line-height:1.35!important;
}
.footer-col a,.footer-col button,.footer-links a{
  font-family:var(--font-ui)!important;
  font-size:var(--type-caption)!important;
  font-weight:400!important;
  line-height:1.5!important;
}
.footer-bottom,.footer-bottom span,.footer .muted{
  font-family:var(--font-ui)!important;
  font-size:var(--type-micro)!important;
  line-height:1.5!important;
}

/* Utility text */
small,.small,.meta,.metadata,.caption{
  font-family:var(--font-ui)!important;
}
small,.small{font-size:var(--type-caption)}
.meta,.metadata,.caption{font-size:var(--type-caption);line-height:1.5}

/* Responsive type scale */
@media(max-width:680px){
  :root{
    --type-display:clamp(3.625rem,15.8vw,4.25rem); /* 58–68 */
    --type-h1:clamp(3rem,13vw,3.375rem);           /* 48–54 */
    --type-h2:clamp(2.5rem,11vw,2.875rem);         /* 40–46 */
    --type-h3:clamp(1.875rem,8vw,2.125rem);        /* 30–34 */
    --type-h4:clamp(1.5rem,6.5vw,1.625rem);        /* 24–26 */
    --type-lead:1.0625rem;
    --type-body:1rem;
    --type-eyebrow:.6875rem;
  }
  p{font-size:1rem}
  .page-head h1,.admin-shell .page-head h1{font-size:3rem!important}
  #campus h2,.admin-shell h2{font-size:2.25rem!important}
  #campus h3,.admin-shell h3{font-size:1.75rem!important}
  .review-card>p,.testimonial-card .quote{font-size:1rem!important}
  .stat-card strong,.fact strong,.metric,.rownum,.stat-value{font-size:1.75rem!important}
  .stat-card small,.fact small,.stat-label{font-size:var(--type-caption)!important}
  .faq-list summary,.programme summary{font-size:1.375rem!important}
  .terms-modal-card h2,.modal-card h2,.dialog h2,.modal-title{font-size:1.875rem!important}
  .article h1{font-size:3rem!important}
  .article h2{font-size:1.75rem!important}
}