/* DL DIGITAL, Plotter identity on screen. Pens and type from the brand kit
   (~/Documents/DL_Digital_Templates/AGENTS.md). Pen 2 is spent once: the plate's last square. */

@font-face { font-family: "Geologica"; font-weight: 300; font-display: swap; src: url("/fonts/Geologica-Light.ttf") format("truetype"); }
@font-face { font-family: "Geologica"; font-weight: 400; font-display: swap; src: url("/fonts/Geologica-Regular.ttf") format("truetype"); }
@font-face { font-family: "Geologica"; font-weight: 600; font-display: swap; src: url("/fonts/Geologica-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Azeret Mono"; font-weight: 400; font-display: swap; src: url("/fonts/AzeretMono-Regular.ttf") format("truetype"); }
@font-face { font-family: "Azeret Mono"; font-weight: 500; font-display: swap; src: url("/fonts/AzeretMono-Medium.ttf") format("truetype"); }

:root {
  color-scheme: light dark;
  --ground: #F3F1EA;      /* paper */
  --ink: #161512;         /* pen 1 */
  --note: #6E6C64;        /* grey */
  --hair: rgba(22, 21, 18, 0.16);
  --pen2: #1E6B48;
  --wm-pen: 1.119px;
  --mk-pen: 1.092px;
  --sans: "Geologica", system-ui, sans-serif;
  --mono: "Azeret Mono", ui-monospace, monospace;
  --pad: 24px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #151A17;    /* night */
    --ink: #F3F1EA;       /* paper lines on night */
    --note: #AEB5AF;      /* mist */
    --hair: rgba(243, 241, 234, 0.18);
    --wm-pen: 1.030px;
    --mk-pen: 1.005px;
    --plot-pen: 0.92px;   /* paper on night reads heavier: the kit draws it 8% thinner */
  }
}
@media (min-width: 720px) { :root { --pad: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

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

.skip { position: absolute; left: var(--pad); top: -100px; padding: 8px 12px; background: var(--ink); color: var(--ground); font: 400 13px/1 var(--mono); }
.skip:focus { top: 8px; }

/* the grid: a label column and a value column, as in the documents */
.bar, main, .foot { max-width: 1040px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-top: 24px; padding-bottom: 16px; position: relative;
}
.bar::after { content: ""; position: absolute; left: var(--pad); right: var(--pad); bottom: 0; border-bottom: 1px solid var(--ink); }
.home { display: inline-flex; padding: 13px 0; margin: -7px 0; text-decoration: none; }   /* a 44 px tap target that takes 30 px */
.wm { display: block; }   /* drawn at its screen size: cap 12 px, the pen for that cap */
.wm path { stroke-width: var(--wm-pen); }
.bar nav { display: flex; gap: 20px; }
.bar nav a, .label, .caption, .meta, .foot {
  font-family: var(--mono); font-size: 13px; line-height: 1.5; letter-spacing: 0.08em; text-transform: uppercase;
}
.bar nav a { text-decoration: none; padding: 10px 0; }
.bar nav a:hover { text-decoration: underline; }

.hero { padding: 40px 0 48px; }
.plate { color: var(--ink); max-width: 520px; }
.plot { display: block; width: 100%; height: auto; }
.plot path { vector-effect: non-scaling-stroke; stroke-width: var(--plot-pen, 1px); }
.plot .p2 { fill: var(--pen2); }
.caption { color: var(--note); margin-top: 12px; text-transform: none; letter-spacing: 0; }
h1 {
  font-weight: 300; font-size: clamp(34px, 7.4vw, 56px); line-height: 1.1; letter-spacing: -0.01em;
  margin-top: 32px; max-width: 16ch; text-wrap: balance;
}
.hero.small .plate { max-width: 400px; }
@media (min-width: 720px) { .hero.small { padding-bottom: 16px; } }   /* the 404 fits a laptop screen */
.nw { white-space: nowrap; }   /* the home plate's scale, so its squares read as squares */
/* wide screens: the plate turns a quarter, its settled edge to the right, and the type sits
   beside it, as on the kit's title slide (plate-fixed-slide) */
@media (min-width: 960px) {
  /* rows: space, headline, lead, the seed line on the plate's foot (as on the title slide) */
  .hero:not(.small) { display: grid; grid-template-columns: 400px 1fr; grid-template-rows: 1fr auto auto 1fr; column-gap: 56px; padding: 56px 0; }
  .hero:not(.small) .plate { grid-column: 1; grid-row: 1 / 5; }
  .hero:not(.small) .plot { transform: rotate(-90deg); }
  .hero:not(.small) .caption { grid-column: 2; grid-row: 4; align-self: end; margin-top: 24px; margin-bottom: -5px; }   /* baseline on the foot */
  .hero:not(.small) h1 { grid-column: 2; grid-row: 2; margin-top: 0; font-size: 48px; }
  .hero:not(.small) .lead { grid-column: 2; grid-row: 3; }
}
/* the narrow two-column hero: "Software and video," must fit its column on one line, or the
   headline runs to four lines and the text column grows past the plate's foot */
@media (min-width: 960px) and (max-width: 1139px) {
  .hero:not(.small) h1 { font-size: 40px; }
  .hero:not(.small) .lead { font-size: 21px; }
}
.lead { font-weight: 300; font-size: clamp(19px, 3.4vw, 23px); line-height: 1.42; margin-top: 20px; max-width: 34ch; text-wrap: balance; }

.row { position: relative; padding: 28px 0 36px; display: grid; gap: 12px; }
.row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; border-top: 1px solid var(--hair); }
.label { color: var(--ink); font-weight: 500; }   /* the kit's strong label, so it outranks the meta lines */
.value p { max-width: 33em; text-wrap: pretty; }   /* about 64 characters a line; rules run the full row */
.value > p + p { margin-top: 14px; }
@media (max-width: 719px) {
  .label { margin-bottom: 8px; }
  .bar { row-gap: 4px; }
  .bar nav { margin-top: -8px; }   /* the wrapped nav stays with the wordmark */
  .bar nav a { padding: 12.25px 0; }   /* 44 px tall */
}
@media (min-width: 720px) {
  .row { grid-template-columns: 180px 1fr; gap: 24px; }
  .label { padding-top: 4px; }
  #projects .label { padding-top: 0; }     /* its first line is the 13 px mono meta, the label's own size */
  #contact .label { padding-top: 17px; }   /* on the email's baseline */
  .bar { min-height: 80px; }               /* the same header height with or without the nav (404) */
}

h3 { font-weight: 600; font-size: 18px; line-height: 1.35; }
.services li + li, .projects li + li { margin-top: 24px; }
.services p, .projects p { margin-top: 4px; }
.projects li + li { padding-top: 24px; border-top: 1px solid var(--hair); }
.meta { color: var(--note); letter-spacing: 0.06em; margin-bottom: 4px; }
.projects .meta { margin-top: 0; }
/* review builds only (build.py --review): projects Dario has not yet kept */
.review .candidate h3::after {
  content: "candidate"; margin-left: 10px; padding: 1px 6px; vertical-align: 3px;
  font: 400 11px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px dashed var(--note); color: var(--note);
}
/* link rows: tall tap targets whose padding does not add to the spacing around them */
.links { display: flex; flex-wrap: wrap; gap: 0 20px; margin-bottom: -9px; }
.value > p.links, .projects p.links { margin-top: 3px; }
.links a { display: inline-block; padding: 9px 0; }
.mail { font-weight: 300; font-size: clamp(22px, 5vw, 30px); line-height: 1.3; margin-bottom: 4px; }
.mail { margin-top: -8px; }   /* cancels the link's tap padding, as the link rows do */
.mail a { display: inline-block; padding: 8px 0; }
.value > p.mail + p { margin-top: 0; }

.foot { padding-top: 24px; padding-bottom: 40px; color: var(--note); position: relative; text-transform: none; letter-spacing: 0; }
.foot::before { content: ""; position: absolute; left: var(--pad); right: var(--pad); top: 0; border-top: 1px solid var(--ink); }
.foot p + p { margin-top: 6px; }