/* DaedalCAD website. The colours are the app's own: the dark build plate, its grid, the cream text
   and the orange of the plate's edge and ruler. One family, Archivo, wide and slanted for the
   headings (like the logo), normal width for reading. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/fonts/archivo-latin-wdth-italic.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/fonts/archivo-latin-ext-wdth-italic.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --plate: #12151a;    /* the app's background */
  --panel: #1b2028;    /* its panels and fields */
  --line: #343c48;     /* borders */
  --grid: rgba(153, 165, 179, 0.09);
  --grid-major: rgba(153, 165, 179, 0.17);
  --bone: #ece6da;     /* text */
  --steel: #a3aebb;    /* quieter text */
  --signal: #e87400;   /* the orange of the plate edge, the ruler and the logo */
  --signal-bright: #ff8a1a;

  --measure: 66ch;
  --gutter: clamp(16px, 4vw, 48px);
  --wide: 1240px;
  color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--plate);
  color: var(--bone);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  font-stretch: 100%;
}

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

a { color: var(--signal-bright); text-underline-offset: 0.18em; }
a:hover { color: var(--bone); }

:focus-visible { outline: 2px solid var(--signal-bright); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  background: var(--signal);
  color: var(--plate);
  padding: 8px 14px;
  font-weight: 700;
  z-index: 10;
}
.skip:focus { top: 12px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- type ---- */

h1, h2 {
  font-style: italic;
  font-weight: 800;
  font-stretch: 125%;
  line-height: 1.04;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 3.2vw + 0.8rem, 3.6rem); }
h2 { font-size: clamp(1.75rem, 2.6vw + 0.6rem, 2.75rem); }
h3 {
  font-size: 1.25rem;
  font-weight: 750;
  font-stretch: 112%;
  line-height: 1.2;
  margin: 0;
}
p { margin: 0; }

/* ---- header ---- */

.top {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  flex-wrap: wrap;
}
.brand img { height: 46px; width: auto; }
.top nav { display: flex; gap: 6px 26px; flex-wrap: wrap; }
.top nav a {
  color: var(--bone);
  text-decoration: none;
  font-weight: 600;
  font-stretch: 108%;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.top nav a:hover { color: var(--bone); border-bottom-color: var(--signal); }

/* ---- hero: the build plate ---- */

.hero {
  position: relative;
  margin-top: 8px;
  /* full width, but the content lines up with the header and the sections */
  --inset: max(var(--gutter), calc((100% - var(--wide)) / 2 + var(--gutter)));
  padding: 64px var(--inset) 80px;
  border-top: 1.5px solid var(--signal);
  background-color: var(--plate);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: -1px -1px;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: center;
  overflow: hidden;
}
.hero::after {
  /* the plate fades out toward the sections below */
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 140px;
  background: linear-gradient(transparent, var(--plate));
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }

/* The ruler along the plate's edge, numbered every 20 mm like the app's. */
.ruler {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  height: 26px;
  display: flex;
  max-width: none !important;
  padding-left: 0;
  background-image:
    linear-gradient(90deg, var(--signal) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 116, 0, 0.55) 1px, transparent 1px);
  background-size: 100px 9px, 20px 5px;
  background-repeat: repeat-x;
  background-position: -1px 0, -1px 0;
  color: var(--signal);
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 100%;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  white-space: nowrap;
}
.ruler span { flex: 0 0 100px; padding: 9px 0 0 4px; }

.hero-text { display: grid; gap: 24px; width: 100%; }
.lede { color: var(--bone); font-size: 1.15rem; max-width: 52ch; }
.fine { color: var(--steel); font-size: 0.9rem; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button {
  display: inline-block;
  padding: 13px 22px 12px;
  border: 1.5px solid var(--bone);
  border-radius: 4px;
  color: var(--bone);
  font-weight: 700;
  font-stretch: 110%;
  text-decoration: none;
  line-height: 1.2;
  background: rgba(18, 21, 26, 0.6);
}
.button:hover { border-color: var(--signal-bright); color: var(--bone); }
.button.primary { background: var(--signal); border-color: var(--signal); color: #12151a; }
.button.primary:hover { background: var(--signal-bright); border-color: var(--signal-bright); color: #12151a; }

.shot { margin: 0; display: grid; gap: 12px; }
.shot img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8), 0 0 0 6px rgba(18, 21, 26, 0.7);
}
.shot figcaption { color: var(--steel); font-size: 0.9rem; max-width: 60ch; }

/* ---- features: read like a drawing's parts list ---- */

.features, .download, .community {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 56px var(--gutter);
}
.features > h2 { max-width: 22ch; }
.intro { color: var(--steel); max-width: var(--measure); margin: 20px 0 48px; font-size: 1.1rem; }

.group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
  gap: 24px 48px;
  padding: 32px 0;
  border-top: 1px solid var(--line);
}
.group:last-child { border-bottom: 1px solid var(--line); }
.group-head { display: grid; gap: 8px; align-content: start; }
.group-head p { color: var(--steel); max-width: 30ch; }
.group dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 36px;
}
.group dt { font-weight: 700; font-stretch: 106%; margin-bottom: 2px; }
.group dd { margin: 0; color: var(--steel); }

/* ---- a closer look: the 2D editor and the Sculpt window ---- */

.closer { max-width: var(--wide); margin: 0 auto; padding: 56px var(--gutter); display: grid; gap: 64px; }
.feature {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px;
  align-items: center;
}
.feature.flip .feature-shot { order: 2; }
.feature-shot { margin: 0; }
.feature-shot img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.8);
}
.feature-text { display: grid; gap: 14px; }
.feature-text h3 { font-size: 1.6rem; font-style: italic; font-weight: 800; font-stretch: 120%; }
.feature-text p { font-size: 1.1rem; max-width: 46ch; }
.feature-text ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.feature-text li { position: relative; padding-left: 22px; color: var(--steel); max-width: 52ch; }
.feature-text li::before {
  /* a node, like the ones on the 2D editor's outlines */
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--signal);
  border-radius: 50%;
}

/* ---- download: a title block ---- */

.download h2 { margin-bottom: 28px; }
.titleblock {
  width: 100%;
  border-collapse: collapse;
  border: 2px solid var(--bone);
  font-size: 1rem;
  margin-bottom: 28px;
}
.titleblock th, .titleblock td {
  border: 1px solid var(--line);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}
.titleblock th {
  width: 1%;
  white-space: nowrap;
  color: var(--steel);
  font-weight: 500;
  font-size: 0.85rem;
  padding-top: 12px;
}
.titleblock td { font-weight: 650; }
body[data-release="no"] .titleblock td.needs-release::after { content: "on GitHub"; color: var(--steel); font-weight: 500; }

.options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.option {
  display: grid;
  gap: 6px;
  padding: 22px 24px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--bone);
  text-decoration: none;
}
.option:first-child { border-color: var(--signal); }
.option:hover { border-color: var(--signal-bright); color: var(--bone); }
.option strong { font-size: 1.2rem; font-stretch: 112%; }
.option span { color: var(--steel); }
.option em { font-style: normal; color: var(--steel); font-size: 0.875rem; }
.option em:empty { display: none; }
.note { color: var(--steel); max-width: var(--measure); margin-top: 10px; font-size: 0.95rem; }
.note b { color: var(--bone); font-weight: 650; }

/* ---- community and footer ---- */

.community { display: grid; gap: 20px; justify-items: start; }
.community p { max-width: 54ch; font-size: 1.1rem; }

.bottom {
  max-width: calc(var(--wide) - 2 * var(--gutter));
  margin: 24px var(--gutter) 0;
  padding: 28px 0 48px;
  border-top: 1px solid var(--line);
  color: var(--steel);
  font-size: 0.875rem;
  display: grid;
  gap: 8px;
}

/* ---- the 404 page ---- */

.lost { max-width: var(--wide); margin: 0 auto; padding: 96px var(--gutter); display: grid; gap: 20px; justify-items: start; }
.lost p { color: var(--steel); max-width: 50ch; }

/* ---- narrow screens ---- */

@media (min-width: 1288px) { .bottom { margin-inline: auto; } }
@media (max-width: 980px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-top: 56px; gap: 40px; }
  .hero-text { justify-self: start; }
  .group { grid-template-columns: minmax(0, 1fr); }
  .feature { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .feature.flip .feature-shot { order: 0; }
}
@media (max-width: 640px) {
  .group dl, .options { grid-template-columns: minmax(0, 1fr); }
  .titleblock, .titleblock tbody, .titleblock tr { display: block; }
  .titleblock tr { display: grid; grid-template-columns: auto 1fr; }
  .titleblock th, .titleblock td { display: block; }
  .titleblock th { width: auto; }
  .brand img { height: 38px; }
  .top nav { gap: 6px 18px; }
}