/* --------------------------------------------------------------------------
   Hamed Sadeghi — personal academic website
   Design, code and content copyright (c) 2026 Hamed Sadeghi. All rights reserved.
   Original: http://sharif.edu/~hsadeghi/

   Not licensed for reuse, redistribution or derivative works without written
   permission. Reading this file is expected — it was sent to your browser so it
   could be used. Republishing it is not.

   build-id: hs-geotech-2026-6f3ad1
   -------------------------------------------------------------------------- */
/* =============================================================================
   base.css — design tokens, fonts, reset and typography
   -----------------------------------------------------------------------------
   Everything here is deliberately expressed in rem so that a single change to
   the root font-size rescales the entire site.  That is how the layout stretches
   from a 320 px phone to a 6K television without a single extra media query in
   the component files.

   Spacing, type sizes and motion live in custom properties at the top.  Colour
   lives in theme.css, which defines the light and dark schemes side by side.

   The Latin typography is Caladea for headings and Carlito for text and UI,
   both self-hosted from assets/vendor/.  The Persian face is BZar, pinned by
   farsi.css, which loads last.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Web fonts
   There are none here, and no `@import` either.  Every face lives in
   `assets/vendor/fonts.css`, which each page links directly, and every file it
   references is stored in this repository.  The site makes no external requests
   of any kind — see README §9.
   -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* --- Palette ---------------------------------------------------------------
     The colours are NOT here.  Both schemes — light and dark — live together in
     theme.css so you can see a value and its counterpart side by side.  That
     file is loaded before this one; everything below just consumes the tokens.
     -------------------------------------------------------------------------- */

  /* --- Type stacks ---
     `--f-farsi` is listed here for completeness only.  It is applied, and
     enforced, by farsi.css; nothing else may set it. */
  --f-body:   "Carlito", "Calibri", -apple-system, BlinkMacSystemFont, "Segoe UI",
              Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-serif:  "Caladea", "Cambria", Georgia, "Times New Roman", serif;
  --f-drop:   "Caladea", "Cambria", Georgia, "Times New Roman", serif;
  --f-ui:     var(--f-body);
  --f-farsi:  "BZar", "Segoe UI", Tahoma, Arial, Helvetica, Verdana, sans-serif;

  /* --- Type scale ---
     The old scale topped out at 13px body / 28px title, which is where the site
     read as dated more than anywhere else.  The new one is a 1.2 ratio starting
     from a comfortable 16px body, with a fluid display size for the hero. */
  --t-xs:   0.75rem;    /* 12px — captions, meta               */
  --t-sm:   0.8125rem;  /* 13px — secondary lines              */
  --t-base: 1rem;       /* 16px — body copy                    */
  --t-md:   1.0625rem;  /* 17px — lead paragraphs              */
  --t-lg:   1.25rem;    /* 20px — h3, section titles           */
  --t-xl:   1.5rem;     /* 24px — h2                           */
  --t-2xl:  1.875rem;   /* 30px — page titles                  */
  --t-3xl:  2.25rem;    /* 36px — section headers              */
  --t-display: clamp(2.25rem, 1.4rem + 3.2vw, 3.75rem);  /* hero name */

  /* --- Layout metrics --- */
  --w-page:    75rem;     /* 1200px content shell            */
  --w-main:    40rem;     /* 640px article column            */
  --w-aside:   27.3125rem;/* 437px sidebar column            */
  --gap:       1.25rem;   /* 20px column gutter              */
  --pad:       0.625rem;  /* 10px inner padding              */
  --bar-h:     4rem;      /* 64px header                     */

  /* --- Corner radii ---
     The original theme used a single 6px radius everywhere.  The refresh keeps
     that for small controls and gives larger surfaces a softer corner, which is
     most of what reads as "current" in a layout. */
  --radius-sm: 0.375rem;  /* 6px  — chips, small controls    */
  --radius:    0.625rem;  /* 10px — buttons, inputs          */
  --radius-lg: 1rem;      /* 16px — cards, panels            */
  --radius-xl: 1.5rem;    /* 24px — the hero panel           */
  --radius-full: 999px;   /*        pills                    */

  /* --- Vertical rhythm ---
     A spacing scale, so padding and gaps are chosen from a fixed set rather
     than invented per component. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.25rem;
  --space-7: 3.5rem;
  --space-8: 5rem;

  /* --- Motion ---
     One easing curve and two durations for the whole site, so interactions feel
     like they belong to the same object. */
  --ease:      cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur:       0.2s;
  --dur-slow:  0.4s;
}

/* -----------------------------------------------------------------------------
   3. Fluid root scaling — the whole "phone to 6K" story in four rules.
   Below 1600px the root stays at the classic 16px so the design is pixel-for-
   pixel what it always was.  Above that it grows with the viewport, capped so
   text never becomes absurd on an ultra-wide panel.
   -------------------------------------------------------------------------- */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar-h) + 1.5rem);
}

@media (min-width: 100rem)  { html { font-size: clamp(16px, 1vw, 34px); } }  /* ≥1600px */
@media (min-width: 240rem)  { html { font-size: 34px; } }                    /* ≥3840px */

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

/* -----------------------------------------------------------------------------
   4. Reset — modern and short.  The original shipped a 90-line element list;
   three rules do the same job.
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, blockquote, dl, dd {
  margin: 0;
  padding: 0;
}

ul[class], ol[class] { list-style: none; }

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

button, input, select, textarea { font: inherit; color: inherit; }

abbr[title] { border-bottom: thin solid; cursor: help; text-decoration: none; }

/* -----------------------------------------------------------------------------
   5. Document defaults
   -------------------------------------------------------------------------- */
body {
  background: var(--c-page);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.6;
  text-align: left;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

/* Headings are the serif; body copy and UI are the sans.  Weight 600 rather
   than bold — Source Serif's 700 is heavy enough to shout at these sizes. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-serif);
  font-weight: 600;
  letter-spacing: -0.011em;
  text-wrap: balance;
}
h1 { font-size: var(--t-2xl); line-height: 1.15; }
h2 { font-size: var(--t-xl);  line-height: 1.2; }
h3 { font-size: var(--t-lg);  line-height: 1.3; }
h4, h5, h6 { font-size: var(--t-md); line-height: 1.4; }
small { font-size: var(--t-xs); line-height: 1.6; }

p { text-wrap: pretty; }

a {
  color: var(--c-link);
  text-decoration: none;
  outline: none;
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--c-link-hover); }

/* Visible focus ring for keyboard users only — the original had none at all. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

hr {
  height: 0;
  border: 0;
  border-bottom: 1px solid var(--c-rule);
  border-top: 1px solid var(--c-hairline-hi);
  color: var(--c-rule);
  background: var(--c-rule);
}

/* Screen-reader-only helper, used for the SEO alias block and skip link. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -3rem;
  z-index: 100;
  background: var(--c-surface);
  color: var(--c-ink);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.3);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 0.5rem; }