/* =========================================================================
   Revision hub — the front door. Same editorial language as the apps:
   warm paper, deep ink, each subject in its own accent.
   ========================================================================= */

:root {
  --paper: #f6f1e8;
  --paper-deep: #ece5d4;
  --ink: #1a1715;
  --ink-soft: #4a443e;
  --ink-mute: #8a8278;
  --rule: #d6cdb9;
  --rule-soft: #e6dfcd;

  --maths: #6b1f2a;        /* oxblood */
  --maths-soft: #f0d8d8;
  --physics: #1d3a8a;      /* cobalt */
  --physics-soft: #d8e0f0;

  --display: 'Fraunces', 'Times New Roman', serif;
  --body: 'Source Serif 4', Georgia, serif;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

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

html, body { height: 100%; }

body {
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

.hub {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: 0 auto;
  padding: 9vh 24px 60px;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* Masthead */
.hub-masthead { text-align: center; margin-bottom: 7vh; }

.hub-rule-above {
  width: 64px;
  border-top: 2px solid var(--ink);
  margin: 0 auto 26px;
}

.hub-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(44px, 8vw, 72px);
  letter-spacing: 0.26em;
  text-indent: 0.26em;   /* visually centre despite tracking */
  text-transform: uppercase;
}

.hub-sub {
  margin-top: 14px;
  font-size: 14.5px;
  color: var(--ink-mute);
  font-style: italic;
}

/* Subject cards */
.hub-subjects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (max-width: 640px) {
  .hub-subjects { grid-template-columns: 1fr; }
}

.subject-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--card-accent);
  border-radius: 10px;
  padding: 34px 32px 28px;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.subject-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -18px rgba(20, 10, 0, 0.35);
}

.subject-maths { --card-accent: var(--maths); --card-soft: var(--maths-soft); }
.subject-physics { --card-accent: var(--physics); --card-soft: var(--physics-soft); }

.subject-glyph {
  font-family: var(--display);
  font-size: 44px;
  font-weight: 600;
  color: var(--paper);
  background: var(--card-accent);
  width: 76px;
  height: 76px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.subject-name {
  font-family: var(--display);
  font-size: 27px;
  font-weight: 600;
  margin-bottom: 4px;
}

.subject-course {
  font-size: 13px;
  color: var(--ink-mute);
  margin-bottom: 18px;
}

.subject-stats {
  border-top: 1px solid var(--rule-soft);
  padding-top: 14px;
  min-height: 64px;
}

.subject-stat-line {
  font-size: 14.5px;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.subject-stat-line strong { color: var(--card-accent); }
.subject-stat-fresh { font-style: italic; color: var(--ink-mute); }

.subject-go {
  margin-top: 18px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  color: var(--card-accent);
}
.subject-go .arrow { transition: transform 180ms var(--ease); display: inline-block; }
.subject-card:hover .subject-go .arrow { transform: translateX(5px); }

/* Footer */
.hub-foot {
  margin-top: auto;
  padding-top: 7vh;
  text-align: center;
  font-size: 13px;
  font-style: italic;
  color: var(--ink-mute);
}