/* ------------------------------------------------------------------
   jawali.in: one drawing sheet, printed, no motion.
   Light mode: ink on vellum. Dark mode: a blueprint (white lines on
   Prussian blue). All colours live here; nothing else is hard-coded.

   Line weights, as on a real sheet:
     heavy  2px   sheet border, title block outline
     medium 1px   dimension line, bubbles, internal title block rules
     thin   1px   chain-line gridlines (lighter colour)
   ------------------------------------------------------------------ */

:root {
  --bg: #f1ece1;                          /* vellum */
  --fg: #1a232c;                          /* ink */
  --muted: #5d6874;
  --heavy: #1a232c;                       /* border and title block outline */
  --rule: #a9a394;                        /* internal title block rules */
  --gridline: rgba(26, 35, 44, 0.42);     /* chain-line gridlines */
  --accent: #1d4b94;                      /* links only */
  --focus: #1d4b94;

  --inset: clamp(16px, 3vw, 36px);        /* sheet margin from the viewport */
  --pad: clamp(44px, 7vw, 96px);          /* horizontal content margin inside the sheet (clears the row bubbles) */
  --pad-y: clamp(48px, 8vh, 80px);        /* vertical content margin inside the sheet */

  --sans: "IBM Plex Sans", "Helvetica Neue", Arial, ui-sans-serif, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c1c31;                        /* Prussian blue */
    --fg: #e8eef7;
    --muted: #a3b4cc;
    --heavy: #e8eef7;
    --rule: #5a7397;
    --gridline: rgba(232, 238, 247, 0.4);
    --accent: #9cc8ff;
    --focus: #ffd27a;
  }
}

/* ---------- base ---------- */

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

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

body {
  margin: 0;
  padding: var(--inset);
  min-height: 100svh;
  background: var(--bg);
  color: var(--fg);
  font: 400 15px/1.6 var(--mono);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { color: var(--fg); }
a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.nowrap { white-space: nowrap; }

/* ---------- the sheet ---------- */

.sheet {
  position: relative;
  min-height: calc(100svh - 2 * var(--inset));
  border: 2px solid var(--heavy);
  display: grid;
  grid-template-rows: 1fr auto;
}

/* Wide sheets: hero on the left, title block in the bottom-right corner beside it. */
@media (min-width: 960px) {
  .sheet {
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr;
    align-items: end;
  }
  .hero { grid-column: 1; align-self: center; }
  .block { grid-column: 1; }
  .title-block { grid-column: 2; }
}

/* ---------- gridlines ---------- */

/* Column lines A/B/C and row lines 1/2/3: chain lines (long dash, short dash) with the
   bubble at the end of each line, just inside the border. */
.marks { position: absolute; inset: 0; pointer-events: none; }
/* Narrow sheets stack the title block under the drawing: confine the marks to the drawing
   area (grid row 1) so row lines 1/2/3 are spaced above the title block, not through it. */
@media (max-width: 959.98px) {
  .marks { grid-row: 1 / 2; grid-column: 1 / -1; }  /* explicit end lines: "auto" would mean the sheet edge */
}
.marks svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.marks line {
  stroke: var(--gridline);
  stroke-width: 1;
  stroke-dasharray: 14 3 2 3;
  vector-effect: non-scaling-stroke;
}

.bubble {
  position: absolute;
  z-index: 2;
  width: 24px;
  height: 24px;
  border: 1px solid var(--fg);
  border-radius: 50%;
  background: var(--bg);
  color: var(--fg);
  font: 500 11px/22px var(--mono);
  text-align: center;
}
.bubble.top  { top: 10px;  left: var(--p); transform: translateX(-50%); }
.bubble.side { left: 10px; top: var(--p);  transform: translateY(-50%); }

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

.hero {
  position: relative;
  z-index: 1;
  align-self: center;
  padding: var(--pad-y) var(--pad);
  max-width: 100%;
}

/* Text is masked against the gridlines, as a CAD background mask would. */
.name,
.lede {
  background: var(--bg);
  padding: 0 0.4rem;
  margin-left: -0.4rem;
}

.name {
  display: inline-block;      /* shrink-wraps to the widest line so the dimension matches it */
  max-width: 100%;
}

h1 {
  margin: 0;
  font: 600 clamp(56px, 11vw, 124px)/0.98 var(--sans);
  letter-spacing: -0.02em;
}
h1 span { display: block; }

/* Dimension under the name: extension lines, a dimension line with filled arrowheads,
   and the dimension text above the line (ISO placement). */
.dim {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 18px 0 0;
  padding-bottom: 6px;
  color: var(--fg);
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dim::before,
.dim::after {                               /* extension lines, past the dimension line by 6px */
  content: "";
  position: absolute;
  top: -4px;
  bottom: 0;
  width: 1px;
  background: currentColor;
}
.dim::before { left: 0; }
.dim::after  { right: 0; }
.dim-text { padding: 0 10px 5px; text-align: center; line-height: 1.45; white-space: normal; text-wrap: balance; }
.dim-line {
  position: relative;
  width: 100%;
  height: 1px;
  background: currentColor;
}
.dim-line::before,
.dim-line::after {                          /* filled arrowheads, 9px long */
  content: "";
  position: absolute;
  top: -2.5px;
  width: 0;
  height: 0;
  border-top: 2.5px solid transparent;
  border-bottom: 2.5px solid transparent;
}
.dim-line::before { left: 0;  border-right: 9px solid currentColor; }
.dim-line::after  { right: 0; border-left: 9px solid currentColor; }

/* Stacked layouts: size the name off the viewport so it is as wide as the one-line dimension
   note ("CIVIL ENGINEER / ENTREPRENEUR"). Below ~360px the note balances onto two lines. */
@media (max-width: 959.98px) {
  .sheet { grid-template-columns: minmax(0, 1fr); }   /* never let content widen the sheet */
  h1 { font-size: clamp(56px, 21vw, 124px); }
  .dim { font-size: 11px; }
}

.lede {
  margin-top: clamp(28px, 4vw, 44px);
  width: fit-content;
  max-width: 44ch;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.65;
}

/* Social marks (LinkedIn, X): ink-coloured, on the sheet colour so gridlines break around them. */
.social {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 0 -6px;
  width: fit-content;
  background: var(--bg);
  line-height: 0;
}
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 6px;
  color: var(--fg);
}
.social a:hover { color: var(--accent); }
.social svg { display: block; }

/* ---------- optional sections (templates in index.html) ---------- */

.block {
  position: relative;
  z-index: 1;
  padding: 0 var(--pad) calc(var(--pad) * 0.8);
  max-width: 72ch;
}
.block h2 {
  margin: 0 0 16px;
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}
.block p { margin: 0 0 1em; }

.list { list-style: none; margin: 0; padding: 0; }
.list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
}
.list li:last-child { border-bottom: 1px solid var(--rule); }
.list li span { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; white-space: nowrap; }

/* ---------- title block (the footer) ---------- */

.title-block {
  position: relative;
  z-index: 1;
  margin: 0;
  justify-self: end;
  align-self: end;
  width: min(100%, 400px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 2px solid var(--heavy);     /* heavy outline; the sheet border closes the other sides */
  background: var(--bg);
  font: 400 13px/1.4 var(--mono);
}
.title-block > div {
  min-width: 0;
  padding: 9px 14px 10px;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.title-block > div:nth-child(-n + 2) { border-top: 0; }   /* first row: the heavy top line is enough */
.title-block > div:nth-child(odd)    { border-left: 0; }  /* first column: the outline is enough */
.title-block .wide { grid-column: 1 / -1; }
.title-block dt {
  margin: 0 0 2px;
  font-size: 10px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}
.title-block dd {
  margin: 0;
  overflow-wrap: anywhere;
}

@media (min-width: 960px) {
  .title-block { border-left: 2px solid var(--heavy); }
}