/*
 * Avloryn Publications — design system
 * ------------------------------------
 * One stylesheet, used by BOTH the static publisher site and the OJS child theme.
 * Keeping it in one place is the only way the publisher pages and the journal stay
 * recognisably the same thing after OJS is upgraded a few times.
 *
 * Decisions locked with the owner:
 *   layout  — "C hybrid": calm hero, no sidebar, a four-cell commitments strip
 *   accent  — slate teal, ONE accent on ink and warm white
 *   naming  — ELDEVOR leads on journal pages; Avloryn Publications leads on publisher pages
 */

:root{
  --ink:#111111;          /* body text                     */
  --strong:#000000;
  --muted:#6B6B6B;        /* secondary text                */
  --paper:#FCFCFA;        /* page background, warm white   */
  --card:#FFFFFF;
  --rule:#E6E4DF;         /* hairlines                     */
  --accent:#17414A;       /* slate teal — the ONE accent   */
  --accent-soft:#EDF3F4;  /* its tint, for callouts        */
  --danger:#B3261E;

  --measure:74ch;         /* readable line length          */
  /* ⚠ The container is wide; PROSE is not. `p{max-width:var(--measure)}` holds paragraphs at 74ch
     however wide this grows, which is what makes widening safe — a 1500px line of text is
     unreadable no matter how modern it looks. At 1600px the old 1120px left a 288px empty margin
     while avloryn.com sat at 24px. */
  --wrap:min(1800px, 94vw);
  --gut:48px;
}

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

body{
  background:var(--paper);
  color:var(--ink);
  font:400 17px/1.65 Inter,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
/* ⚠ This reset exists for the nav and the wordmark, where a link should NOT look like one.
   Its cost is that the DEFAULT for any new link is invisible — a link added in prose inherits the
   surrounding colour and has no underline, so it works and nobody can tell it is there. That has
   already happened once ("visit the journal" read as plain grey text). Content links are styled
   below, and test-site.mjs fails if a link in prose is indistinguishable from its surroundings. */
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ── masthead ─────────────────────────────────────────────────────────────
   The two-line lockup. Read straight down it says the registered title, which
   is what keeps the brand loud and the DOAJ title-match intact. See §11a.     */
header{border-bottom:1px solid var(--rule)}
/* ⚠ flex-wrap is the safety net, not the plan. Adding the logo to the wordmark pushed the header
   16px past the viewport at 1180px on every page — the nav had no room left. Wrapping means the
   nav drops to a second line instead of forcing the page to scroll sideways, whatever is added
   to the header later. The tightened gap below is what actually keeps it on one line. */
.hd{display:flex;align-items:baseline;gap:18px;padding:22px 0;flex-wrap:wrap}
.hd > *{min-width:0}
@media(max-width:1240px){ nav{gap:22px} }
@media(max-width:1040px){ nav{gap:16px;font-size:13.5px} }
.mark{font:600 21px/1 Inter;letter-spacing:.16em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:11px;text-decoration:none}
/* The mark is 220x188 with the transparent margin trimmed off, so height alone sets its size and
   width:auto keeps the aspect ratio. ⚠ Both attributes stay on the <img> to reserve the space —
   without them the wordmark jumps sideways as the logo loads. */
.mark img{height:26px;width:auto;display:block}
@media(max-width:600px){.mark img{height:21px}}
.fmark{height:30px;width:auto;display:block;margin-bottom:12px;opacity:.85}
.sub{font:400 14px/1 Inter;color:var(--muted)}
nav{margin-left:auto;display:flex;gap:30px;align-items:center;font:500 14.5px/1 Inter}
nav a{color:var(--muted)}
nav a.on,nav a:hover{color:var(--ink)}

/* ── type ─────────────────────────────────────────────────────────────── */
h1{font:300 62px/1.06 Newsreader,Georgia,serif;letter-spacing:-.015em}
h2{font:400 30px/1.3 Newsreader,Georgia,serif}
h3{font:400 22px/1.35 Newsreader,Georgia,serif}
p{max-width:var(--measure)}
/* ⚠ 30ch was set when the container was 1120px and made a punchy lead. Against the wider layout and
   74ch body text it read as a thin ribbon above a wide column. A lead should be narrower than the
   body, not a different shape from it. */
.tag{font:400 21px/1.55 Newsreader,Georgia,serif;color:var(--muted);max-width:52ch;margin-top:24px}
.tag b{color:var(--accent);font-weight:400}
.lbl{font:600 12px/1 Inter;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.rule{height:1px;background:var(--rule);margin-top:18px}

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn{display:inline-block;background:var(--accent);color:#fff;font:500 15px/1 Inter;
     padding:14px 24px;border-radius:3px}
.btn-sm{padding:10px 18px;font-size:14px}
.btn-ghost{color:var(--ink);border-bottom:1px solid var(--rule);padding-bottom:3px;
           font:500 15px/1 Inter}
.cta{display:flex;gap:26px;align-items:center;margin-top:40px;flex-wrap:wrap}

/* ── commitments strip ────────────────────────────────────────────────────
   The same four cells on the publisher, the family and the journal. Saying the
   identical thing at every level is the only claim a new publisher can prove.  */
.strip{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.strip .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
/* the open-access badge — the single thing a reader should register first */
.oa{display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;
  font:600 12.5px/1 Inter;letter-spacing:.17em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);
  border:1px solid var(--accent);border-radius:999px;padding:9px 16px}
.oa b{font-weight:600}
.oa::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.strip .cell{padding:26px 0}
.strip .cell + .cell{border-left:1px solid var(--rule);padding-left:28px}
.strip .k{font:600 12px/1 Inter;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.strip .v{font:400 14.5px/1.5 Inter;color:var(--muted);margin-top:8px}

/* ── article list ─────────────────────────────────────────────────────── */
.art{padding:26px 0;border-bottom:1px solid var(--rule);display:flex;gap:40px;align-items:baseline}
.art .kind{font:500 12px/1 Inter;letter-spacing:.1em;text-transform:uppercase;
           color:var(--accent);white-space:nowrap;width:130px}
.art h3{flex:1}
.art .meta{font:400 13.5px/1 Inter;color:var(--muted);white-space:nowrap}

/* ── callout ──────────────────────────────────────────────────────────── */
.note{background:var(--accent-soft);border-left:3px solid var(--accent);padding:32px 36px}
.note.warn{background:#FDF3F2;border-left-color:var(--danger)}
.note .lbl{color:var(--accent)}
.note.warn .lbl{color:var(--danger)}

.cols{columns:3;column-gap:44px;margin-top:22px}
.cols div{break-inside:avoid;font:400 15.5px/2.0 Inter;color:var(--muted)}

footer{border-top:1px solid var(--rule);margin-top:96px;padding:40px 0 72px;
       font:400 14.5px/1.7 Inter;color:var(--muted)}
footer .pb{color:var(--ink);font-weight:500}

/* ── responsive ───────────────────────────────────────────────────────────
   A journal is read on phones more than anyone plans for. The strip stacks to
   two, then one; the hero shrinks rather than overflowing.                    */
@media (max-width:900px){
  :root{--gut:28px}
  h1{font-size:44px}
  .strip .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip .cell:nth-child(3){border-left:none;padding-left:0}
  .strip .cell{border-top:1px solid var(--rule)}
  .strip .cell:nth-child(-n+2){border-top:none}
  nav{gap:18px;font-size:13.5px}
  .art{flex-wrap:wrap;gap:10px}
  .art .kind{width:auto}
  .cols{columns:2}
}
@media (max-width:560px){
  h1{font-size:34px}
  .tag{font-size:18px}
  .strip .wrap{grid-template-columns:1fr}
  .strip .cell + .cell{border-left:none;padding-left:0}
  .cols{columns:1}
  .hd{flex-wrap:wrap;gap:10px}
  nav{margin-left:0;width:100%;flex-wrap:wrap}
}

/* ══ static publisher site ═══════════════════════════════════════════════
   Added for site/dist. The tokens and shared components above are unchanged —
   the OJS child theme depends on them.                                      */

.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;
      padding:12px 18px;z-index:99;font:500 15px/1 Inter}
.skip:focus{left:0}

header .mark{color:var(--ink)}
main{display:block}

.hero{padding:110px 48px 20px}
.hero.narrow h1{font-size:52px}
.sec{margin-top:76px}
.lede{font:400 16.5px/1.6 Inter;color:var(--muted);max-width:62ch;margin-top:12px}

/* prose pages — About, Ethics, Policies, Independence, Contact */
/* ⚠ A wide container plus a 74ch reading column leaves the right half of a text page empty, which
   looks worse than the narrow layout it replaced. The container stays wide — the header, the
   commitments strip and the journal cards use it — but the READING column is centred inside it.
   Widening a page is only an improvement if something occupies the width. */
.prose{max-width:82ch;margin-inline:auto}
.hero.narrow{max-width:82ch;margin-inline:auto}
.prose h2{font:400 27px/1.3 Newsreader,Georgia,serif;margin-top:44px}
.prose h2:first-child{margin-top:0}
.prose h3{margin-bottom:8px}
.prose p{font:400 17px/1.75 Inter;color:var(--muted);margin-top:14px;max-width:74ch}
.prose ul{margin:14px 0 0 22px;max-width:74ch}
.prose li{font:400 17px/1.75 Inter;color:var(--muted);margin-top:10px}
.prose strong{color:var(--ink);font-weight:500}
.prose a{color:var(--accent);border-bottom:1px solid var(--rule)}
.prose a:hover{border-bottom-color:var(--accent)}

/* journal family block */
.famhead{display:flex;align-items:baseline;gap:16px;margin-top:34px;flex-wrap:wrap}
.fammark{font:600 20px/1 Inter;letter-spacing:.16em;text-transform:uppercase}
.famsub{font:400 14px/1 Inter;color:var(--muted)}
.famlink{margin-left:auto;font:500 14.5px/1 Inter;color:var(--accent)}

.jcard{display:flex;gap:20px;align-items:baseline;border:1px solid var(--rule);
       border-radius:4px;padding:30px 32px;margin-top:22px;background:var(--card);flex-wrap:wrap}
.jcard-main{flex:1;min-width:0}
.jtitle{font:400 25px/1.3 Newsreader,Georgia,serif}
/* the title is what a reader actually aims at */
.jtitle a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:3px}
.jtitle a:hover{border-bottom-color:var(--accent);color:var(--accent)}
.jmeta{font:400 15px/1.6 Inter;color:var(--muted);margin-top:8px;max-width:none}
.jcard-side{text-align:right;white-space:nowrap}
.jstate{font:500 13px/1 Inter;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.jurl{font:400 13.5px/1.4 Inter;color:var(--muted);margin-top:9px;white-space:normal;max-width:24ch}
.jurl a{color:var(--accent);border-bottom:1px solid var(--accent);padding-bottom:1px;white-space:nowrap}
.jurl a:hover{color:var(--ink);border-bottom-color:var(--ink)}

.dashed{border:1px dashed var(--rule);border-radius:4px;padding:22px 32px;margin-top:14px;
        font:400 15.5px/1.6 Inter;color:var(--muted);max-width:none}

.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 56px;margin-top:30px}
.grid2 h3{font:400 21px/1.35 Newsreader,Georgia,serif}
.grid2 p{font:400 16px/1.65 Inter;color:var(--muted);margin-top:10px}

.note p{font:400 17px/1.65 Inter;margin-top:14px;max-width:72ch}
.notelink{color:var(--accent);border-bottom:1px solid var(--accent);padding-bottom:2px;
          font:500 15px/1 Inter}

@media (max-width:900px){
  .hero{padding:64px 28px 16px}
  .hero.narrow h1,.hero h1{font-size:40px}
  .grid2{grid-template-columns:1fr;gap:30px}
  .jcard{flex-direction:column;align-items:flex-start}
  .jcard-side{text-align:left}
  .jurl{max-width:none}
  .famlink{margin-left:0;width:100%}
}
@media (max-width:560px){
  .hero.narrow h1,.hero h1{font-size:32px}
  .prose p,.prose li{font-size:16px}
  .dashed{padding:18px 20px}
}

/* A journal title, a DOI or a URL can be one long unbroken string. Without this a single
   78-character word pushed the page 605px wide at 320px — found by the worst-case test, not by eye. */
h1,h2,h3,.jtitle,.mark,.fammark,.jurl,.prose p,.prose li,.tag,.jmeta{overflow-wrap:break-word}
.jurl,.jmeta{word-break:break-word}

/* The real cause of the 605px blow-out, found by diagnosing rather than guessing:
   `align-items:flex-start` sizes a flex item to its CONTENT, so an unbreakable 78-character title
   made .jcard-main 864px wide inside a 320px screen. min-width:0 alone cannot fix that — the item
   has to be told to take the container's width, and the text told it may break anywhere. */
.jcard-main,.jcard-side{min-width:0;max-width:100%}
.jtitle,.jmeta,.jurl{overflow-wrap:anywhere}
@media (max-width:900px){
  .jcard > *{width:100%}
  .jcard-side{white-space:normal}   /* nowrap survived the earlier media query and overflowed too */
}

/* ── mobile fixes, found by looking at a 390px screenshot rather than trusting the media queries ──
   1. "AVLORYN PUBLICATIONS" at 21px with .16em tracking filled the whole 390px width and shoved the
      nav onto two cramped lines.
   2. The 1-column strip lost the divider between cells 1 and 2: the :nth-child(-n+2) rule that hides
      the top border was written for the TWO-column layout and was never revisited for one column.
   3. Seven nav items need to be legible, not merely present.                                        */
@media (max-width:560px){
  .mark{font-size:15px;letter-spacing:.11em}
  .hd{gap:6px;padding:18px 0}
  nav{gap:14px 16px;font-size:13.5px;margin-top:2px}
  .strip .cell:nth-child(-n+2){border-top:1px solid var(--rule)}  /* undo the 2-col rule */
  .strip .cell:first-child{border-top:none}                        /* only the first is borderless */
  .strip .cell{padding:20px 0}
}
@media (max-width:400px){
  .mark{font-size:13.5px;letter-spacing:.09em}
  nav{gap:12px 14px;font-size:13px}
}

/* ── policy index ─────────────────────────────────────────────────────── */
.pollist{margin-top:26px;border-top:1px solid var(--rule)}
.polrow{display:block;padding:20px 0;border-bottom:1px solid var(--rule)}
.polrow:hover .polname{color:var(--accent)}
.polname{font:400 21px/1.35 Newsreader,Georgia,serif}
.poldesc{font:400 15.5px/1.6 Inter;color:var(--muted);margin-top:6px;max-width:74ch}

/* ── generated policy prose: tables, lists, code ──────────────────────── */
.prose ol{margin:14px 0 0 22px;max-width:74ch}
.prose ol li{font:400 17px/1.75 Inter;color:var(--muted);margin-top:10px}
.prose code{font:400 15px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--accent-soft);padding:2px 6px;border-radius:3px;color:var(--ink)}
.prose h3{font:400 22px/1.35 Newsreader,Georgia,serif;margin-top:32px}
.prose h4{font:500 16px/1.4 Inter;margin-top:26px}
/* A wide table must scroll inside its own box — never push the page sideways. */
.tablewrap{overflow-x:auto;margin-top:20px;-webkit-overflow-scrolling:touch}
.prose table{border-collapse:collapse;min-width:100%;font:400 15.5px/1.5 Inter}
.prose th{text-align:left;font:600 11.5px/1.3 Inter;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);padding:12px 18px 12px 0;border-bottom:1px solid var(--rule);white-space:nowrap}
.prose td{padding:14px 18px 14px 0;border-bottom:1px solid var(--rule);color:var(--muted);
  vertical-align:top;min-width:8ch}
.prose td strong{color:var(--ink)}
.prose .note{margin-top:22px}
.prose .note p{color:var(--ink)}
.prose .rule{margin:34px 0}

/* ── header: eight nav items no longer fit beside the wordmark on a tablet ──
   Adding "Editorial Team" pushed the nav to 548px, which overflowed a 768px screen by 21px. The
   wrap breakpoint was set at 560px when the nav had seven shorter items; it has to follow the nav,
   not a number chosen once. Caught by the build test, not by looking. */
@media (max-width:1024px){
  .hd{flex-wrap:wrap;row-gap:10px}
  nav{margin-left:0;width:100%;gap:16px 20px;flex-wrap:wrap}
}

/* ⚠ Nav items were breaking mid-label at 1440px — "For / Authors", "Editorial / Team" — and the
   wordmark split across two lines. The overflow test passed, because wrapping is how the browser
   AVOIDS overflow: a test can prove nothing sticks out, it cannot tell you the result looks broken.
   Found by looking at a screenshot. Labels must not break; the nav wraps as a whole or not at all. */
.mark{white-space:nowrap}
nav a{white-space:nowrap}

/* number ranges and limits stay whole — see md-to-html.mjs */
.nb{white-space:nowrap}

/* ── editorial board cards ─────────────────────────────────────────────── */
/* ⚠ The grid shares the reading column with the prose above it. At full container width the cards
   stretched to ~570px each while carrying four short lines, so the page read as a narrow centred
   introduction followed by a wide loose grid — two different pages stacked. One measure, one page. */
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
  gap:38px 44px;max-width:82ch;margin-inline:auto}
.bm{display:flex;gap:18px;align-items:flex-start;min-width:0}
.bm-photo{width:88px;height:88px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  background:var(--card);border:1px solid var(--rule)}
.bm-body{min-width:0}
/* ⚠ Below the name, not above it. Above, the label pushed the Editor-in-Chief's NAME down while the
   photograph stayed put, so in a row of three the names sat at different heights. The first line of
   every card is now the name — which is also what a reader is looking for. */
/* Every card carries a role, so a reader can tell who does what — and so every card has the same
   number of lines above the affiliation, which is what keeps a row of three aligned. */
.bm-role{font:600 11px/1 Inter;letter-spacing:.17em;text-transform:uppercase;
  color:var(--muted);margin:0 0 6px}
.bm-role.bm-eic{color:var(--accent)}
.bm-name{font:400 19px/1.3 Newsreader,Georgia,serif;margin:0 0 5px}
.bm-role + .bm-aff{margin-top:0}
.bm-aff{font:400 14px/1.6 Inter;color:var(--muted);margin:0}
.bm-cl{font:500 11.5px/1.5 Inter;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);margin:9px 0 0}
.bm-orcid{font:400 13px/1.5 Inter;margin:7px 0 0}
.bm-orcid a{color:var(--muted);border-bottom:1px solid var(--rule);padding-bottom:1px}
.bm-orcid a:hover{color:var(--accent);border-bottom-color:var(--accent)}
/* ⚠ Stated plainly rather than left blank. A missing ORCID with no explanation reads as an
   incomplete record; naming it as in progress is accurate and does not invite a guess. */
.bm-pending{color:var(--muted);opacity:.75;font-style:italic}
@media(max-width:560px){ .bm-photo{width:66px;height:66px} }