/* ISO 3098-style CAD lettering. See ../fonts/osifont-license.txt. */
@font-face {
   font-family: "OSI Technical";
   src: url("../fonts/osifont-lgpl3fe.woff") format("woff");
   font-display: swap;
   font-style: normal;
   font-weight: 400;
}

:root {
   --paper: #cfba9b;
   --paper-light: #eadbbf;
   --paper-edge: #ad9c7e;
   --paper-raised: #ecddc2;
   --paper-rgb: 207, 186, 155;
   --table: #343b36;
   --ink: #303532;
   --ink-strong: #202624;
   --ink-soft: #4f5753;
   --forest: #35423f;
   --forest-dark: #222b28;
   --leaf: #607f96;
   --signal: #7898af;
   --rust: #3f6681;
   --blue: #456984;
   --blueprint-rgb: 69, 105, 132;
   --grid-minor: rgba(54, 77, 82, 0.068);
   --grid-major: rgba(54, 77, 82, 0.128);
   --paper-tonal-layers:
      radial-gradient(ellipse 38% 25% at 10% 12%, rgba(86, 62, 40, 0.045), transparent 74%),
      radial-gradient(ellipse 30% 22% at 89% 30%, rgba(91, 65, 42, 0.035), transparent 76%),
      radial-gradient(ellipse 46% 28% at 44% 88%, rgba(238, 222, 194, 0.055), transparent 78%),
      linear-gradient(132deg, rgba(241, 222, 190, 0.055), transparent 36%, rgba(75, 50, 33, 0.028) 76%, rgba(235, 217, 188, 0.02));
   --line: #9ca39c;
   --line-dark: #626b66;
   --font-body: "Bahnschrift", "Arial Narrow", Arial, sans-serif;
   --font-engineering: "OSI Technical", "Arial Narrow", Arial, sans-serif;
   --font-drafting: "OSI Technical", "Arial Narrow", Arial, sans-serif;
   --page-width: 1280px;
   --header-height: 76px;
   --sheet-margin: clamp(6px, 1.15vw, 16px);
   --paper-grain-position: 0 0;
   --sheet-shadow: 7px 9px 18px rgba(12, 18, 14, 0.24), 2px 3px 5px rgba(12, 18, 14, 0.17);
}

* {
   box-sizing: border-box;
}

html {
   min-width: 320px;
   color-scheme: light;
   overflow-x: hidden;
   background-color: var(--table);
   background-image:
      linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 42%),
      linear-gradient(315deg, rgba(0, 0, 0, 0.045), transparent 50%);
   scroll-behavior: smooth;
   scrollbar-gutter: stable;
}

body {
   position: relative;
   isolation: isolate;
   width: 100%;
   max-width: none;
   min-height: 100vh;
   margin: 0;
   border: 0;
   border-radius: 0;
   color: var(--ink);
   background-color: var(--paper);
   background-image:
      var(--paper-tonal-layers),
      linear-gradient(var(--grid-major) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
      linear-gradient(var(--grid-minor) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
   background-position: center, center, center, 0 0, -1px -1px, -1px -1px, -1px -1px, -1px -1px;
   background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 120px 120px, 120px 120px, 24px 24px, 24px 24px;
   box-shadow: none;
   font-family: var(--font-body);
   font-synthesis: none;
   font-weight: 400;
   font-variant-numeric: lining-nums tabular-nums;
   line-height: 1.55;
}

body::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 60;
   pointer-events: none;
   background-image: url("../images/textures/drafting-paper-fiber-v2.webp");
   background-position: var(--paper-grain-position);
   background-size: 2048px 2048px;
   mix-blend-mode: multiply;
   opacity: 0.34;
}

body::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 59;
   border-top: 1px solid rgba(255, 255, 255, 0.55);
   border-left: 1px solid rgba(255, 255, 255, 0.34);
   background:
      radial-gradient(ellipse 18% 12% at 8% 62%, rgba(94, 70, 37, 0.035), transparent 72%),
      radial-gradient(ellipse 22% 15% at 77% 13%, rgba(103, 76, 38, 0.03), transparent 75%),
      linear-gradient(128deg, rgba(255, 248, 228, 0.075), transparent 39%),
      linear-gradient(308deg, rgba(74, 58, 35, 0.035), transparent 46%);
   pointer-events: none;
}

body[data-current-page="projects"] {
   --paper-grain-position: -173px -89px;
   --sheet-shadow: 8px 10px 19px rgba(12, 18, 14, 0.235), 2px 3px 5px rgba(12, 18, 14, 0.17);
}

body[data-current-page="about"] {
   --paper-grain-position: -311px -157px;
}

body[data-current-page="contact"] {
   --paper-grain-position: -487px -233px;
   --sheet-shadow: 7px 10px 20px rgba(12, 18, 14, 0.23), 2px 3px 5px rgba(12, 18, 14, 0.16);
}

a {
   color: inherit;
   text-decoration: none;
}

img,
video,
canvas,
model-viewer {
   display: block;
   max-width: 100%;
}

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

button {
   cursor: pointer;
}

h1,
h2,
h3,
p,
figure {
   margin-top: 0;
}

h1,
h2,
h3 {
   color: var(--ink-strong);
   font-family: var(--font-engineering);
   line-height: 1;
   font-weight: 400;
   letter-spacing: 0;
   text-shadow: 0.24px 0.18px 0 rgba(20, 40, 32, 0.2);
}

ul,
ol {
   margin-top: 0;
}

::selection {
   color: var(--paper-raised);
   background: var(--forest);
}

.hidden-field,
[hidden] {
   display: none !important;
}

@media (prefers-reduced-motion: reduce) {
   html {
      scroll-behavior: auto;
   }

   *,
   *::before,
   *::after {
      scroll-behavior: auto !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
   }
}