/* ==========================================================================
   Journal of Corporate and Financial Laws
   Centre for Corporate Law, Governance and Financial Laws, NLU Delhi

   One stylesheet. No build step, no framework, no JavaScript.

   The palette follows National Law University Delhi house style, so that JCFL
   sits alongside the NLUD Journal of Legal Studies rather than apart from it:
   maroon #5F1D25 and gold #9E6B22 on warm paper. Display type is Cormorant
   Garamond, self-hosted; the sans is the system stack, used only for the small
   tracked labels.
   ========================================================================== */

@import url('fonts.css');

:root {
  /* Paper */
  --paper:       #fcfbf9;
  --paper-alt:   #f4f0e8;
  --paper-deep:  #ece5d8;

  /* Ink */
  --ink:         #201c1a;
  --ink-mute:    #554d49;
  --ink-faint:   #6a615c;

  /* Maroon, NLU Delhi */
  --maroon:      #5f1d25;
  --maroon-deep: #3d1218;
  --maroon-dark: #2a0d11;
  --maroon-soft: #7d3039;

  /* Gold */
  --gold:        #9e6b22;
  --gold-bright: #c08f3c;
  --gold-pale:   #e3cfa4;
  /* The house gold is only safe at display sizes -- at 11px label size it
     reaches 4.43:1 on paper, short of AA. This darker gold is used wherever
     the colour carries actual text; --gold stays for rules and decoration. */
  --gold-ink:    #8b5d20;

  --rule:        #ddd4c4;
  --rule-soft:   #ebe4d7;

  --serif: 'Cormorant Garamond', 'Palatino Linotype', 'Book Antiqua',
           Palatino, Georgia, 'Times New Roman', serif;
  --sans:  system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial,
           sans-serif;

  --page:    64rem;
  --measure: 36rem;
  --gutter:  1.75rem;
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  /* Cormorant runs small on the body, so it is set a notch larger than a
     default serif would be. */
  font-size: 1.25rem;
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 { margin: 0; line-height: 1.14; font-weight: 600; color: var(--maroon-deep); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--maroon);
  text-decoration: underline;
  text-decoration-color: var(--gold-pale);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}
a:hover { color: var(--gold-ink); text-decoration-color: var(--gold-ink); }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ------------------------------------------------------------- helpers -- */

.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }

/* The small tracked label that sits above a heading. Sans, never serif --
   this is the one place the sans appears. */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 0.9rem;
}

.lede { font-size: 1.4375rem; line-height: 1.5; color: var(--ink-mute); }
.muted { color: var(--ink-mute); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--maroon); color: #fff; padding: 0.75rem 1.25rem;
  font-family: var(--sans); font-size: 0.875rem; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------ masthead -- */

.institution {
  background: var(--maroon-deep);
  color: #e8dcc8;
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.65rem var(--gutter);
}

.masthead { padding: 2.5rem 0 1.6rem; text-align: center; }

.masthead__seal { width: 76px; margin: 0 auto 1.1rem; }

.masthead__centre {
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 0.7rem;
}

/* The masthead title is deliberately large. Harvard sets its wordmark at
   60px and Yale its lead article at 52px; a timid masthead is the single
   clearest sign of an amateur journal site. */
.masthead__title {
  font-size: clamp(2.6rem, 6.4vw, 4.25rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: 0.005em;
  color: var(--maroon-deep);
}

.masthead__meta {
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 1.1rem 0 0;
}

.masthead__rule { width: 4rem; height: 1px; background: var(--gold); border: 0; margin: 1.15rem auto 0; }

/* Compact variant for the interior pages. */
.masthead--compact { padding: 1.4rem 0 1.15rem; }
.masthead--compact .masthead__inner {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; text-align: left;
}
.masthead--compact .masthead__seal { width: 50px; margin: 0; }
.masthead--compact .masthead__title { font-size: 1.6rem; line-height: 1.1; }
.masthead--compact .masthead__centre { margin: 0 0 0.2rem; }
.masthead--compact a { text-decoration: none; }

/* ----------------------------------------------------------------- nav -- */

.nav { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

.nav__list {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: var(--page);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2.5rem;
}

/* JLS sets its nav in the display serif rather than a sans. Following that
   keeps the two NLUD journals visually related. */
.nav__list a {
  display: block;
  padding: 0.8rem 0;
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--maroon);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.nav__list a:hover { color: var(--gold-ink); }
.nav__list a[aria-current="page"] { color: var(--gold-ink); border-bottom-color: var(--gold); }

/* ---------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  min-height: min(34rem, 72vh);
  display: flex;
  align-items: flex-end;
  background: var(--maroon-dark) center 42% / cover no-repeat;
  background-image: url('../img/nlud-campus.jpg');
  overflow: hidden;
}

/* The tint lives here, not in the photograph, so the image stays a real
   photograph and the brand colour stays adjustable.

   Strong at the foot where the type sits, easing to nothing at the very top so
   the sky and the dome stay clean. The side wash is kept light -- it is there
   to seat the text column, not to tint the whole photograph. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(38, 12, 16, 0.92) 0%,
      rgba(38, 12, 16, 0.72) 28%,
      rgba(38, 12, 16, 0.42) 52%,
      rgba(38, 12, 16, 0.12) 78%,
      rgba(38, 12, 16, 0) 100%),
    linear-gradient(to right, rgba(38, 12, 16, 0.30) 0%, rgba(38, 12, 16, 0) 48%);
}

.hero__inner { position: relative; z-index: 1; width: 100%; padding: 3.5rem 0 2.6rem; }

/* Legibility over the photograph comes from the shadow rather than a heavier
   overlay -- it darkens only the pixels touching each glyph, so the image
   stays open and there is no visible block behind the text. */
.hero__eyebrow, .hero__title, .hero__text {
  text-shadow: 0 2px 16px rgba(18, 5, 7, 0.85), 0 1px 4px rgba(18, 5, 7, 0.7);
}

/* Homepage-only: a solid badge, not photo-dependent text, so it stays
   legible no matter what part of the hero photograph sits behind it. */
.hero__institution {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fdfaf4;
  background: var(--maroon-deep);
  border: 1px solid rgba(253, 250, 244, 0.35);
  padding: 0.45rem 0.9rem;
  margin: 0 0 1.1rem;
}

.hero__eyebrow {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* Paler than --gold-pale: at 11px this sits highest in the hero, where the
     scrim is lightest, so it needs the extra luminance to clear AA. */
  color: #f6ecd8;
  margin: 0 0 1rem;
}

.hero__title {
  font-size: clamp(1.85rem, 3.9vw, 2.9rem);
  font-weight: 600;
  line-height: 1.12;
  color: #fdfaf4;
  max-width: 22ch;
  margin: 0 0 1rem;
}

.hero__text { color: #ead9c4; max-width: 44ch; font-size: 1.1875rem; line-height: 1.55; margin: 0 0 1.6rem; }

.hero__credit {
  position: absolute; right: var(--gutter); bottom: 0.55rem; z-index: 2;
  font-family: var(--sans); font-size: 0.625rem; letter-spacing: 0.06em;
  color: rgba(255, 245, 230, 0.5);
}
.hero__credit a { color: inherit; text-decoration-color: rgba(255,245,230,0.3); }
.hero__credit a:hover { color: rgba(255, 245, 230, 0.85); }

/* -------------------------------------------------------------- layout -- */

.section { padding: 4rem 0; }
.section + .section { border-top: 1px solid var(--rule-soft); }
.section--alt { background: var(--paper-alt); border-top: 1px solid var(--rule); }
.section--alt + .section { border-top: 1px solid var(--rule); }

.section__head { margin-bottom: 2.25rem; }

.section__title { font-size: clamp(1.85rem, 3.4vw, 2.5rem); font-weight: 600; }

.prose { max-width: var(--measure); }
.prose h3 { font-size: 1.5rem; margin: 2.1rem 0 0.65rem; }
.prose ul, .prose ol { margin: 0 0 1em; padding-left: 1.2rem; }
.prose li { margin-bottom: 0.35em; }

.split { display: grid; gap: 3.5rem; grid-template-columns: minmax(0, 1fr) 16rem; align-items: start; }

@media (max-width: 48rem) {
  .split { grid-template-columns: 1fr; gap: 2.5rem; }
  .section { padding: 3rem 0; }
}

/* ------------------------------------------------------- current issue -- */

.issue { border: 1px solid var(--rule); background: #fff; padding: 2.5rem; }

.issue__number { font-size: 2rem; margin: 0 0 0.3rem; }

.issue__status {
  font-family: var(--sans); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--gold-ink); margin: 0 0 1.6rem;
}

.issue__note { max-width: var(--measure); color: var(--ink-mute); }

/* ------------------------------------------------------------ contents --
   One .toc__item per published article. See README.md.                    */

.toc { list-style: none; margin: 0; padding: 0; }

.toc__item { padding: 1.9rem 0; border-top: 1px solid var(--rule-soft); }
.toc__item:first-child { border-top: 0; padding-top: 0; }

.toc__kicker {
  font-family: var(--sans); font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--gold-ink); margin: 0 0 0.55rem;
}

/* The title carries the entry. Yale sets these at 24px, Harvard at 28px. */
.toc__title { font-size: 1.75rem; line-height: 1.22; margin: 0 0 0.4rem; max-width: 40rem; }
.toc__title a { text-decoration: none; color: var(--maroon-deep); }
.toc__title a:hover { color: var(--gold-ink); }

.toc__author { font-style: italic; font-size: 1.1875rem; color: var(--maroon-soft); margin: 0 0 0.5rem; }

.toc__meta {
  font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0;
}

/* --------------------------------------------------------------- lists -- */

.subjects { columns: 2; column-gap: 3rem; list-style: none; margin: 0; padding: 0; max-width: 44rem; }
.subjects li {
  break-inside: avoid; padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule-soft); font-size: 1.125rem;
}
@media (max-width: 34rem) { .subjects { columns: 1; } }

/* Faculty entries carry a portrait; every other tier is names only. */
.people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2.5rem;
  margin: 0 0 1rem;
}

.person__photo {
  width: 100%;
  max-width: 13rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border: 1px solid var(--rule);
  margin-bottom: 1rem;
  background: var(--paper-alt);
}

.person__name { font-size: 1.375rem; margin: 0 0 0.2rem; }

.person__role {
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-faint);
  margin: 0;
}

.board { margin: 0 0 2.75rem; }
.board__tier {
  font-family: var(--sans); font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.19em; text-transform: uppercase; color: var(--gold-ink);
  padding-bottom: 0.55rem; border-bottom: 1px solid var(--rule); margin: 0 0 0.9rem;
}
.board__list { list-style: none; margin: 0; padding: 0; }
.board__list li { padding: 0.55rem 0; border-bottom: 1px solid var(--rule-soft); }
.board__list li:last-child { border-bottom: 0; }
.board__name { display: block; font-size: 1.1875rem; }
.board__role {
  display: block; font-family: var(--sans); font-size: 0.8125rem;
  color: var(--ink-faint); line-height: 1.5;
}

/* --------------------------------------------------------------- aside -- */

.facts { border-top: 2px solid var(--maroon); padding-top: 1.15rem; }
.facts dl { margin: 0; }
.facts dt {
  font-family: var(--sans); font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint);
  margin-top: 1.2rem;
}
.facts dt:first-child { margin-top: 0; }
.facts dd { margin: 0.2rem 0 0; font-size: 1.0625rem; line-height: 1.45; }

/* ------------------------------------------------------------- buttons -- */

.btn {
  display: inline-block;
  font-family: var(--sans); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  padding: 0.85rem 1.6rem;
  border: 1px solid var(--maroon); color: var(--maroon);
  text-decoration: none; background: transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: var(--maroon); color: var(--paper); }
.btn--solid { background: var(--maroon); color: var(--paper); }
.btn--solid:hover { background: var(--maroon-deep); border-color: var(--maroon-deep); color: #fff; }

.btn--light { border-color: var(--gold-pale); color: #fdf6e9; }
.btn--light:hover { background: var(--gold-pale); color: var(--maroon-deep); }

.btn + .btn { margin-left: 0.65rem; }

@media (max-width: 32rem) {
  .btn { display: block; text-align: center; }
  .btn + .btn { margin: 0.65rem 0 0; }
}

/* --------------------------------------------------------------- table -- */

.table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; }
.table th, .table td {
  text-align: left; padding: 0.8rem 1rem 0.8rem 0;
  border-bottom: 1px solid var(--rule-soft); vertical-align: top;
}
.table th {
  font-family: var(--sans); font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-faint);
  border-bottom: 1px solid var(--rule);
}
.table td:last-child, .table th:last-child { padding-right: 0; }

/* -------------------------------------------------------------- footer -- */

.footer { background: var(--maroon-deep); color: #d8c7ae; padding: 3.5rem 0 2rem; font-size: 1.0625rem; }
.footer a { color: #f2e7d5; text-decoration-color: rgba(224, 191, 132, 0.5); }
.footer a:hover { color: #fff; text-decoration-color: var(--gold-pale); }

.footer__grid { display: grid; gap: 2.75rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

.footer__title {
  font-family: var(--sans); font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--gold-pale); margin: 0 0 0.9rem;
}

.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: 0.35rem; }

.footer__bottom {
  margin-top: 3rem; padding-top: 1.3rem;
  border-top: 1px solid rgba(224, 191, 132, 0.22);
  font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.05em;
  color: #a89684;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; justify-content: space-between;
}
.footer__bottom p { margin: 0; }

/* --------------------------------------------------------------- print -- */

@media print {
  .nav, .footer, .institution, .btn, .hero { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding: 1rem 0; border: 0; }
  a { text-decoration: none; color: #000; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}