/* =========================================================
   FONTS
   ========================================================= */

   @font-face {font-family: BaWueSansWeb; font-style: normal; font-weight: 400; src:url("../fonts/BaWueSansWeb-Regular.woff2") format("woff2");}
   @font-face {font-family: BaWueSansWeb; font-style: normal; font-weight: 700; src:url("../fonts/BaWueSansWeb-Bold.woff2") format("woff2");}
   @font-face {font-family: BaWueSerifWeb; font-style: italic; font-weight: 400; src:url("../fonts/BaWueSerifWeb-Regular.woff2") format("woff2");}
   @font-face {font-family: BaWueSerifWeb; font-style: italic; font-weight: 700; src:url("../fonts/BaWueSerifWeb-Bold.woff2") format("woff2");}
   @font-face {font-family: JetBrainsMono-Regular; font-style: italic; font-weight: 400; src:url("../fonts/JetBrainsMono-Regular.woff2") format("woff2");}
   @font-face {font-family: JetBrainsMono-Bold; font-style: italic; font-weight: 700; src:url("../fonts/JetBrainsMono-Bold.woff2") format("woff2");}
	
/* =========================================================
   TOKENS
   ========================================================= */
:root{
   --color-accent:      #fffc00;
   --color-accent-ink:  #2a2623;
   --color-ink:         #2a2623;
   --color-ink-soft:    #55504c;
   --color-paper:       #ffffff;
   --color-surface:     #f1eeed;
   --color-line:        #e2ddd0;
   --color-line-dark:   #4a443f;

   --font-display: BaWueSerifWeb, Georgia, "Times New Roman", serif;
   --font-body:    BaWueSansWeb, "Open sans", Helvetica, Arial, sans-serif;
   --font-mono:    "JetBrainsMono-Regular",ui-monospace, monospace;

   --fs-h1:   clamp(2.1rem, 1.35rem + 3.3vw, 3.75rem);
   --fs-h2:   clamp(1.45rem, 1.2rem + 1.1vw, 2.1rem);
   --fs-h3:   clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
   --fs-lead: clamp(1.05rem, 0.98rem + 0.4vw, 1.2rem);
   --fs-lead-authors: clamp(0.96rem, 0.98rem + 0.4vw, 1.2rem);
   --fs-body: clamp(1rem, 0.96rem + 0.15vw, 1.0625rem);
   --fs-small: 0.875rem;
   --fs-eyebrow: clamp(0.82rem, 0.6335rem + 0.7955vw, 1.2rem);

   --space-1: 0.5rem;
   --space-2: 1rem;
   --space-3: 1.75rem;
   --space-4: clamp(2.5rem, 2rem + 2vw, 4.5rem);
   --space-5: clamp(4rem, 3rem + 4vw, 7rem);

   --radius: 6px;
   --max-w: 1120px;

   --focus-ring: 0 0 0 2px var(--color-paper), 0 0 0 5px var(--color-ink);
  }

  @media (prefers-reduced-motion: no-preference){
    html{ scroll-behavior: smooth; }
  }
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  }

/* =========================================================
   RESET / BASE
   ========================================================= */
  *,*::before,*::after{ box-sizing: border-box; }
  html{ -webkit-text-size-adjust: 100%; }
  body{
    margin:0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--color-ink);
    background: var(--color-paper);
  }
  img, svg{ display:block; }
  a{ color: inherit; }
  h1,h2,h3,p,ul,ol,dl,figure{ margin: 0; }
  ul{ padding: 0; list-style: none; }
  ol{ padding: 1rem; }

  .icon{ width:1.2em; height:1.2em; flex-shrink:0; stroke: currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }

  :focus{ outline: none; }
  :focus-visible{ outline: 3px solid var(--color-ink); outline-offset: 3px; border-radius: 2px; }
  .on-dark :focus-visible, .btn-accent:focus-visible{ outline-color: var(--color-accent); box-shadow: var(--focus-ring); outline-offset: 2px; }

  .container{
    width: min(100% - 2.5rem, var(--max-w));
    margin-inline: auto;
  }

  .skip-link{
    position: fixed; z-index: 1000; top: -100%; left: var(--space-2);
    background: var(--color-accent); color: var(--color-accent-ink);
    padding: 0.75rem 1.25rem; font-weight: 700; text-decoration: none;
    border-radius: 0 0 var(--radius) var(--radius);
    transition: top 0.15s ease;
  }
  .skip-link:focus{ top: 0; }

/* =========================================================
   HEADER
   ========================================================= */
  .site-header{
    position: sticky; top:0; z-index: 100;
    background: var(--color-accent); color: var(--color-ink);
    box-shadow:0 0 20px rgb(0 0 0 / 25%);
  }
  .site-header__top{
    padding-top: 1rem; padding-bottom: 0;
  }
  .site-logo{ display:inline-block; text-decoration:none; width:100%; }
  .site-logo img{ width: 100%; max-width: 400px; height:auto; }

  @media (max-width: 680px){ .site-logo img{ width: 100%; max-width: 290px; height:auto; } }

  .site-header__bar{
    display:flex; align-items:center; justify-content:space-between;
    gap: 1.5rem; 
    padding-block: 0.85rem;
    flex-wrap: wrap
  }
  .masthead{
    display:flex; flex-direction:column; gap: 0.1rem;
    text-decoration:none; color: inherit;
  }
  .masthead__issn{
    font-family: var(--font-mono); font-size: 0.9rem; letter-spacing: 0.06em;
    color: var(--color-ink-soft); text-transform: uppercase;
  }
  .masthead__title{
    font-family: var(--font-display); font-weight:600; font-size: 1.6rem; line-height:1.65;
  }
  @media (max-width: 680px){ .masthead__title{ font-size: 1.25rem; line-height:1.3; } }

  .site-nav{
    display:none; align-items:center; justify-content:center;
    width: 2.5rem; height: 2.5rem;
    background: transparent; border: 1.5px solid var(--color-ink); border-radius: var(--radius);
    color: var(--color-ink); cursor:pointer;
  }
  .site-header nav ul{
    list-style: none; display: flex; gap: 1.6rem;
    margin: 0; padding: 0; flex-wrap: wrap;
    font-size: 0.82rem;
    font-weight:600;
  }
  .site-header nav a{
    text-decoration: none; font-size: 0.82rem;
    letter-spacing: 0.04em; text-transform: uppercase; color: #2a2623;
    padding: 0.3rem 0; border-bottom: 2px solid transparent;
  }
  .site-header nav a:hover{ border-bottom-color: #2a2623; }
  .site-header nav a.is-active{ border-bottom-color: var(--color-ink); font-weight:700; }

  
/* =========================================================
   HERO
   ========================================================= */
  .hero{
    background: var(--color-ink); color: var(--color-paper);
       background-image:
      linear-gradient(120deg, transparent 55%, rgba(255,252,0,0.08) 55%),
      linear-gradient(120deg, transparent 62%, rgba(255,252,0,0.06) 62%);
    padding-block: var(--space-5) var(--space-4);
    position: relative;
  }
   .eyebrow{
    display:inline-flex; align-items:center; gap:0.5rem;
    font-family: var(--font-mono); font-size: var(--fs-eyebrow);
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--color-accent); margin-bottom: var(--space-2);
  }
  .eyebrow::before{ content:""; width: 1.6rem; height:2px; background: var(--color-accent); }
  @media (max-width: 480px){ .eyebrow::before{ width: 1rem; } }

  .hero h1{
    font-family: var(--font-display); font-weight:600; font-size: var(--fs-h1);
    line-height:1.08; letter-spacing: -0.01em;
  }
  .hero__authors{
    margin-top: var(--space-3); font-size: var(fs-lead-authors); color: #d7d2d1;
  }
  .hero__authors sup{ color: var(--color-accent); font-weight:700; margin-right:0.05em; }
  .hero__actions{ display:flex; flex-wrap:wrap; gap: 0.9rem; margin-top: var(--space-3); }

  .btn{
    display:inline-flex; align-items:center; gap:0.55rem;
    font-family: var(--font-body); font-weight:700; font-size: var(--fs-small);
    padding: 0.85rem 1.3rem; border-radius: var(--radius);
    text-decoration:none; border: 1.5px solid transparent; cursor:pointer;
    transition: transform 0.15s ease, background 0.15s ease;
  }
  .btn:hover{ transform: translateY(-2px); }
  .btn-accent{ background: var(--color-accent); color: var(--color-accent-ink); }
  .btn-accent:hover{ background:#e8e500; }
  .btn-outline{ background:transparent; color: var(--color-paper); border-color: var(--color-line-dark); }
  .btn-outline:hover{ border-color: var(--color-accent); color: var(--color-accent); }

/* =========================================================
   SECTIONS
   ========================================================= */
  section{ padding-block: var(--space-4); scroll-margin-top: var(--header-h, 160px); }
  #main{ scroll-margin-top: var(--header-h, 160px); }
  section + section{ border-top: 1px solid var(--color-line); }
  .section--surface{ background: var(--color-surface); }

  .section-head{
    display:flex; align-items:baseline; gap: var(--space-2);
    margin-bottom: var(--space-3);
  }
  .section-head h2{
    font-family: var(--font-display); font-weight:600; font-size: var(--fs-h2);
  }
  .section-head__icon{
    display:inline-flex; align-items:center; justify-content:center;
    width: 2.4rem; height:2.4rem; border-radius: 50%;
    background: var(--color-ink); color: var(--color-accent);
    flex-shrink:0;
  }
  .section-head__icon .icon{ width:1.2rem; height:1.2rem; }

  .prose{ max-width: 100%; color: var(--color-ink-soft); }
  .prose + .prose{ margin-top: var(--space-2); }

  /* Authors */
  .authors-grid{
    display:grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-4);
    align-items:start;
  }
  .affil-list{ display:flex; flex-direction:column; gap: 0.85rem;}
  .affil-list li{ display:flex; gap:0.75rem; font-size: var(--fs-small); color: var(--color-ink-soft);}
  .affil-list .affil-num{
    font-family: var(--font-mono); font-weight:700; color: var(--color-ink);
    background: var(--color-accent); border-radius: 4px;
    min-width: 1.6rem; height:1.6rem; display:inline-flex; align-items:center; justify-content:center;
    font-size: 0.72rem; flex-shrink:0;
  }
  .contact-card{
    background: var(--color-ink); color: var(--color-paper);
    border-radius: var(--radius); padding: var(--space-3);
  }
  .contact-card__eyebrow{ font-family: var(--font-mono); font-size: 0.7rem; letter-spacing:0.08em; text-transform:uppercase; color: var(--color-accent); }
  .contact-card h3{ font-family: var(--font-display); font-size: 1.2rem; margin-top:0.35rem; margin-bottom:1rem; }
  .contact-list{ display:flex; flex-direction:column; gap: 0.75rem; }
  .contact-list a, .contact-list span{
    display:flex; align-items:center; gap:0.6rem; font-size: var(--fs-small);
    text-decoration:none; color: var(--color-paper);
  }
  .contact-list a:hover{ color: var(--color-accent); }
  .contact-list .icon{ color: var(--color-accent); }
  
  .contact-list .authlocation{ display:flex; }
  .contact-list .authlocation__inline{ display:inline; }

  @media (max-width: 860px){ .authors-grid{ grid-template-columns: 1fr; } }

  /* Keywords as specimen-style tags */
  .keyword-list{ display:flex; flex-wrap:wrap; gap: 0.65rem; }
  .keyword-tag{
    font-family: var(--font-mono); font-size: 0.8rem;
    border: 1.5px dashed var(--color-ink); border-radius: 4px;
    padding: 0.5rem 0.85rem; background: var(--color-paper);
    display:inline-flex; align-items:center; gap:0.5rem;
  }
  .keyword-tag .icon{ width:1rem; height:1rem; color: var(--color-ink-soft); }

  /* Downloads */
  .downloads-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: var(--space-3); }
  .doc-card{
    display:flex; flex-direction:column; gap: 1rem;
    background: var(--color-paper); border: 1px solid var(--color-line);
    border-radius: var(--radius); padding: var(--space-3);
    text-decoration:none; color: var(--color-ink);
    transition: border-color 0.15s ease, transform 0.15s ease;
  }
  .doc-card:hover{ border-color: var(--color-ink); transform: translateY(-3px); }
  .doc-card__icon{
    width: 3rem; height:3rem; border-radius:50%;
    background: var(--color-accent); color: var(--color-accent-ink);
    display:flex; align-items:center; justify-content:center;
  }
  .doc-card h3{ font-family: var(--font-display); font-size: 1.15rem; font-weight:600; }
  .doc-card p{ color: var(--color-ink-soft); font-size: var(--fs-small); }
  .doc-card__cta{ margin-top:auto; display:flex; align-items:center; gap:0.4rem; font-weight:700; font-size: var(--fs-small); }

  .doi-box{
    display:flex; flex-direction:column; gap: 1rem;
    background: var(--color-paper); border: 1px solid var(--color-line);
    border-radius: var(--radius); padding: var(--space-3);
    text-decoration:none; color: var(--color-ink);
  }
   .doi-box__icon{
    width: 3rem; height:3rem; border-radius:50%;
    background: var(--color-accent); color: var(--color-accent-ink);
    display:flex; align-items:center; justify-content:center;
  }
  .doi-box h3{ font-family: var(--font-display); font-size: 1.15rem; font-weight:600; }
  .doi-box p{ color: var(--color-ink-soft); font-size: var(--fs-small); }
  .doi-box__value{ margin-top:auto; display:flex; align-items:center; gap:0.4rem; color: #BF1C0D; font-weight:700; font-size: var(--fs-small); }

  /* License */
  .license-box{
    display:flex; gap: var(--space-3); align-items:flex-start;
    background: var(--color-paper); border: 1px solid var(--color-line);
    border-radius: var(--radius); padding: var(--space-3);
    max-width: 100%;
  }
  .cc-badge{
    flex-shrink:0; width:3rem; height:3rem; border-radius:50%;
    border: 1.5px solid var(--color-ink); display:flex; align-items:center; justify-content:center;
    font-family: var(--font-mono); font-weight:700; font-size:0.75rem;
  }
  .license-box p{ color: var(--color-ink-soft); font-size: var(--fs-small); }
  .license-box a{ font-weight:700; text-decoration: underline; text-decoration-color: var(--color-paper); text-underline-offset:2px; }
  .license-box a:hover{ text-decoration: underline; text-decoration-color: var(--color-ink); text-underline-offset:2px; }

/* =========================================================
   FOOTER
   ========================================================= */
  .site-footer{
    background: var(--color-ink);
    color: #d7d2d1;
    padding-block: var(--space-4);
    font-size: var(--fs-small);
  }
  .site-footer__grid{
    display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4);
  }
  .site-footer__col p{ margin: 0 0 0.6rem; line-height:1.55; }
  .site-footer__heading{
    display:block; font-family: var(--font-mono); font-size: 0.9rem;
    letter-spacing:0.08em; text-transform:uppercase; color: var(--color-accent);
    margin-bottom: 0.75rem;
  }
  .site-footer address{ font-style:normal; }
  .footer-line{
    display:flex; align-items:flex-start; gap:0.55rem; margin-bottom:0.6rem;
    text-decoration:none; color:#d7d2d1; line-height:1.5;
  }
  .footer-line .icon{ width:1.05em; height:1.05em; margin-top:0.15em; color: var(--color-accent); flex-shrink:0; }
  .footer-line__text{ display:inline; }
  a.footer-line:hover{ color: var(--color-accent); }
  a.footer-line:hover .icon{ color: var(--color-accent); }
  .footer-line--link{ font-weight:700; color: var(--color-paper); }
  .footer-note{ margin-top:0.75rem; }
 
  .site-footer a{ color: var(--color-paper); text-decoration:none; }
  .site-footer a:hover{ color: var(--color-accent); }
 
  @media (max-width: 780px){
    .site-footer__grid{ grid-template-columns: 1fr; gap: var(--space-3); }
    .site-footer__col{ padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-line-dark); }
    .site-footer__col:last-child{ border-bottom:none; padding-bottom:0; }
  }
 
  .visually-hidden{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  
  .back-to-top{
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60;
    width: 3.1rem; height: 3.1rem; border-radius: 50%;
    background: var(--color-accent); color: var(--color-accent-ink);
    border: none; cursor: pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 12px 28px rgba(20,18,16,0.35), 0 3px 8px rgba(20,18,16,0.25);
    opacity: 0; visibility: hidden; transform: translateY(14px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s, background 0.15s ease;
  }
  .back-to-top.is-visible{ opacity:1; visibility:visible; transform: translateY(0); }
  .back-to-top:hover{ background:#e8e500; }
  .back-to-top .icon{ width:1.5rem; height:1.5rem; stroke-width:2.25; }
 
  @media (prefers-reduced-motion: reduce){
    .back-to-top{ transition: opacity 0.01ms, visibility 0.01ms; }
  }
  @media (max-width: 480px){
    .back-to-top{ right: 1rem; bottom: 1rem; width: 2.75rem; height: 2.75rem; }
  }