/* schuleit.dk — shared styles for the front page, /3d-printing/ and /tools/.
   PharmaWise (/pharmawise/) has its own styles. */

    /* ---- Colours: change these to restyle the whole page ---- */
    :root {
      --bg: #f6f8f6;
      --ink: #15201d;
      --muted: #5f6c68;
      --line: #d9e0dc;
      --accent: #0f6e56;
      --accent-ink: #ffffff;
      --tag-bg: #e6efeb;
      color-scheme: light dark;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --bg: #101614;
        --ink: #e9eeeb;
        --muted: #9aa8a2;
        --line: #26302c;
        --accent: #4fc39e;
        --accent-ink: #0b1411;
        --tag-bg: #1a2622;
      }
    }

    * { box-sizing: border-box; }
    html, body { margin: 0; }
    body {
      background: var(--bg);
      color: var(--ink);
      font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
      font-size: 17px;
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; }
    a:focus-visible, .button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

    .wrap {
      max-width: 1200px;
      margin: 0 auto;
      padding-block: 64px 48px;
      padding-inline: 20px;
    }

    /* ---- Header ---- */
    header {
      position: relative;
      padding-block: 28px 24px;
      min-height: 236px;
      display: grid;
      align-content: center;
    }
    header > * { position: relative; }
    .grid-bg {
      position: absolute;
      inset: 0 0 0 auto;
      width: 62%;
      height: 100%;
      pointer-events: none;
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%);
              mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%);
    }
    .grid-bg svg { width: 100%; height: 100%; display: block; }
    .grid-bg .cubes { stroke: var(--accent); stroke-width: 1.4; fill: none; opacity: .75; }
    .grid-bg .lit-top { fill: var(--ink); }
    .grid-bg .lit-l { fill: var(--ink); opacity: .78; }
    .grid-bg .lit-r { fill: var(--ink); opacity: .55; }
    @media (max-width: 640px) {
      header { min-height: 0; padding-block: 150px 8px; }
      .grid-bg { width: 100%; height: 150px; inset: 0 0 auto 0;
        -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
                mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); }
    }
    header h1 {
      font-family: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
      font-weight: 700;
      font-size: clamp(2.4rem, 7vw, 3.6rem);
      line-height: 1;
      letter-spacing: -0.02em;
      margin: 0 0 18px;
      text-wrap: balance;
    }
    header h1 .sub {
      display: block;
      font-weight: 500;
      font-size: 0.5em;
      letter-spacing: 0;
      color: var(--accent);
      margin-top: 8px;
    }
    header p {
      margin: 0;
      max-width: 34em;
      color: var(--muted);
      font-size: 1.1rem;
    }
    header .lead { color: var(--ink); font-size: 1.2rem; margin-bottom: 8px; }
    header .bio { font-size: 1rem; }

    /* ---- Sections ---- */
    section { margin-top: 64px; }
    section h2 {
      font-family: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
      font-weight: 700;
      font-size: clamp(1.7rem, 3.2vw, 2.1rem);
      line-height: 1.1;
      letter-spacing: -0.01em;
      margin: 0 0 6px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--line);
    }
    .apps {
      list-style: none;
      margin: 0;
      padding: 0;
      border-top: 1px solid var(--line);
    }
    .note + .apps { border-top: 0; }
    .app {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 6px 24px;
      align-items: start;
      padding-block: 26px;
      border-bottom: 1px solid var(--line);
    }
    .app.has-thumb { grid-template-columns: 300px 1fr auto; }
    .thumb {
      grid-column: 1;
      grid-row: 1 / span 3;
      margin: 0;
      width: 300px;
      max-width: 100%;
      aspect-ratio: 1200 / 694;
      overflow: hidden;
      border-radius: 6px;
      border: 1px solid var(--line);
      background: var(--tag-bg);
    }
    .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
    .thumb-logo { display: grid; place-items: center; padding: 8% 10%; background: var(--tag-bg); }
    .pw-logo { width: 100%; height: auto; }
    .pw-logo .pw-green { fill: #18814b; }
    .pw-logo .pw-ink { fill: var(--ink); }
    @media (prefers-color-scheme: dark) { .pw-logo .pw-green { fill: #3fae76; } }
    .app.has-thumb h3, .app.has-thumb p, .app.has-thumb .tags { grid-column: 2; }
    .app.has-thumb .button { grid-column: 3; }
    .app h3 {
      font-family: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
      font-weight: 500;
      font-size: 1.5rem;
      line-height: 1.15;
      margin: 0;
    }
    .app h3 a { text-decoration: none; }
    .app h3 a:hover { color: var(--accent); }
    .app p { margin: 0; color: var(--muted); grid-column: 1; max-width: 62ch; }
    .tags {
      grid-column: 1;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 4px;
    }
    .tag {
      font-size: 0.78rem;
      font-weight: 500;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--muted);
      background: var(--tag-bg);
      border-radius: 4px;
      padding: 3px 8px;
    }
    .button {
      grid-column: 2;
      grid-row: 1 / span 3;
      align-self: center;
      white-space: nowrap;
      text-decoration: none;
      font-weight: 500;
      font-size: 0.95rem;
      color: var(--accent-ink);
      background: var(--accent);
      border-radius: 6px;
      padding: 10px 16px;
    }
    .button:hover { filter: brightness(1.08); }
    .soon { background: transparent; color: var(--ink); border: 1px solid var(--line); }
    a.soon:hover { color: var(--accent); border-color: var(--accent); filter: none; }

    @media (max-width: 640px) {
      .app, .app.has-thumb { grid-template-columns: 1fr; }
      .thumb { grid-row: auto; width: 100%; margin-bottom: 6px; }
      .app.has-thumb h3, .app.has-thumb p, .app.has-thumb .tags, .app .button, .app.has-thumb .button {
        grid-column: 1; grid-row: auto;
      }
      .button { justify-self: start; margin-top: 10px; }
    }

    /* ---- MakerWorld ---- */
    .maker {
      display: grid;
      grid-template-columns: 72px 1fr auto;
      gap: 6px 20px;
      align-items: center;
      padding-block: 26px 22px;
    }
    .avatar {
      grid-row: 1 / span 2;
      width: 72px; height: 72px;
      border-radius: 50%;
      object-fit: cover;
      border: 1px solid var(--line);
    }
    .maker h3 {
      font-family: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
      font-weight: 500;
      font-size: 1.35rem;
      line-height: 1.15;
      margin: 0;
      align-self: end;
    }
    .maker h3 a { text-decoration: none; }
    .maker h3 a:hover { color: var(--accent); }
    .maker .stats { margin: 0; color: var(--muted); align-self: start; font-size: 0.95rem; }
    .maker .button { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
    .models {
      list-style: none;
      margin: 0 0 22px;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }
    .models a {
      display: block;
      text-decoration: none;
      color: inherit;
    }
    .models figure { margin: 0; }
    .models img {
      display: block;
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      border-radius: 6px;
      border: 1px solid var(--line);
      background: var(--tag-bg);
    }
    .models figcaption { margin-top: 8px; font-size: 0.9rem; line-height: 1.35; }
    .models a:hover figcaption { color: var(--accent); }
    .models .dl { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 2px; font-variant-numeric: tabular-nums; }
    @media (max-width: 640px) {
      .maker { grid-template-columns: 56px 1fr; }
      .avatar { width: 56px; height: 56px; }
      .maker .button { grid-column: 1 / -1; grid-row: auto; justify-self: start; margin-top: 8px; }
      .models { grid-template-columns: repeat(2, 1fr); }
    }

    .kit {
      list-style: none;
      margin: 0 0 22px;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .kit li {
      display: grid;
      gap: 12px;
      align-content: start;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
    }
    .kit .yt {
      display: grid;
      place-items: center;
      width: 64px; height: 64px;
      border-radius: 6px;
      background: var(--tag-bg);
      color: #ff0033;
    }
    .kit .yt svg { width: 32px; height: 32px; }
    .kit .clip {
      position: relative;
      display: block;
      width: 140px;
      max-width: 100%;
      aspect-ratio: 16 / 9;
      margin-top: 8px;
      border-radius: 6px;
      overflow: hidden;
      background: var(--tag-bg);
    }
    .kit .clip img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
    .kit .clip svg {
      position: absolute;
      left: 50%; top: 50%;
      width: 28px; height: 28px;
      transform: translate(-50%, -50%);
      color: #fff;
      filter: drop-shadow(0 1px 4px rgba(0,0,0,.6));
      transition: color .15s;
    }
    .kit .clip:hover svg { color: #ff0033; }
    .kit img {
      width: 64px; height: 64px;
      object-fit: cover;
      border-radius: 6px;
      background: var(--tag-bg);
    }
    .kit img.pad { object-fit: contain; padding: 12px; box-sizing: border-box; }
    .kit strong a { text-decoration: none; }
    .kit strong a:hover { color: var(--accent); }
    .kit div { display: grid; gap: 3px; }
    .kit .label {
      justify-self: start;
      margin-bottom: 2px;
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      background: var(--tag-bg);
      border-radius: 4px;
      padding: 2px 7px;
    }
    .kit strong { font-weight: 500; font-size: 1rem; line-height: 1.3; }
    .kit .sub { color: var(--muted); font-size: 0.88rem; line-height: 1.4; }
    .kit .sub a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
    .kit .sub a:hover { color: var(--accent); }
    @media (max-width: 720px) { .kit { grid-template-columns: 1fr; } }

    /* ---- Access request ---- */
    .note {
      margin: 0 0 18px;
      color: var(--muted);
      font-size: 0.95rem;
      max-width: 75ch;
    }
    .models + .note { margin: 2px 0 0; }
    .note a { text-decoration: underline; text-underline-offset: 3px; }
    .note a:hover { color: var(--accent); }

    /* ---- Footer ---- */
    footer {
      margin-top: 48px;
      color: var(--muted);
      font-size: 0.95rem;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 22px;
    }
    footer a {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      text-decoration: none;
    }
    footer a:hover { color: var(--accent); }
    footer svg { width: 18px; height: 18px; flex: none; }

    /* ---- Site nav ---- */
    .topnav {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 6px 22px;
      margin: -28px 0 8px;
      font-size: 0.95rem;
    }
    .topnav a { text-decoration: none; color: var(--muted); }
    .topnav a:hover { color: var(--accent); }
    .topnav a[aria-current="page"] { color: var(--ink); }
    .topnav .home {
      font-family: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
      font-weight: 700;
      font-size: 1.05rem;
      color: var(--ink);
      margin-right: auto;
    }
    @media (max-width: 640px) { .topnav { margin-top: -40px; gap: 4px 16px; } .topnav .home { flex-basis: 100%; } }

    /* ---- Sub-page header: the front-page hero, shorter ---- */
    header.page-head { min-height: 170px; }
    header.page-head h1 { font-size: clamp(2.1rem, 5.5vw, 3rem); margin-bottom: 12px; }
    @media (max-width: 640px) { header.page-head { padding-block: 120px 4px; } header.page-head .grid-bg { height: 120px; } }

    /* ---- Front page: three doors ---- */
    .doors {
      list-style: none;
      margin: 56px 0 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }
    .doors a {
      display: grid;
      grid-template-rows: auto 1fr;
      height: 100%;
      text-decoration: none;
      color: inherit;
      border: 1px solid var(--line);
      border-radius: 10px;
      overflow: hidden;
      transition: border-color .15s, transform .15s;
    }
    .doors a:hover { border-color: var(--accent); }
    .doors a:hover .go { color: var(--accent); }
    .doors .pic {
      aspect-ratio: 16 / 10;
      background: var(--tag-bg);
      border-bottom: 1px solid var(--line);
      overflow: hidden;
      display: grid;
      place-items: center;
    }
    .doors .pic img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
    .doors .pic .pw-logo { width: 72%; height: auto; }
    .doors .body { display: grid; gap: 8px; align-content: start; padding: 18px 20px 20px; }
    .doors h2 {
      font-family: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
      font-weight: 700;
      font-size: 1.6rem;
      line-height: 1.1;
      margin: 0;
    }
    .doors p { margin: 0; color: var(--muted); }
    .doors .fact {
      font-size: 0.8rem;
      font-weight: 500;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--accent);
      font-variant-numeric: tabular-nums;
    }
    .doors .go { margin-top: 6px; font-weight: 500; color: var(--ink); }
    @media (prefers-reduced-motion: no-preference) { .doors a:hover { transform: translateY(-2px); } }
    @media (max-width: 860px) { .doors { grid-template-columns: 1fr; } .doors .pic { aspect-ratio: 16 / 8; } }

    /* First block on a sub-page sits closer to the page title */
    section.first { margin-top: 28px; }
    /* On the front page the hero already says @Schuleit; the nav keeps only the section links */
    .topnav .home[aria-current="page"] { display: none; }
    .topnav:has(.home[aria-current="page"]) { justify-content: flex-end; }

    /* ---- 3D printing: contact sheet of the remaining designs, ranked ---- */
    .sheet-head {
      font-family: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
      font-weight: 500;
      font-size: 1.35rem;
      margin: 40px 0 4px;
    }
    .sheet-sub { margin: 0 0 16px; color: var(--muted); font-size: 0.95rem; }
    .sheet {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 16px 12px;
    }
    .sheet a { display: grid; gap: 6px; align-content: start; text-decoration: none; color: var(--ink); }
    .sheet .pic {
      position: relative;
      aspect-ratio: 4 / 3;
      border-radius: 6px;
      overflow: hidden;
      border: 1px solid var(--line);
      background: var(--tag-bg);
    }
    .sheet img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .sheet .r {
      position: absolute;
      top: 5px; left: 5px;
      font-size: 0.7rem;
      font-weight: 500;
      padding: 1px 6px;
      border-radius: 4px;
      background: rgba(16, 22, 20, .78);
      color: #e9eeeb;
      font-variant-numeric: tabular-nums;
    }
    .sheet .t {
      font-size: 0.8rem;
      line-height: 1.3;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .sheet .n { font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
    .sheet a:hover .t { color: var(--accent); }
    .sheet a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
    @media (prefers-reduced-motion: no-preference) {
      .sheet img { transition: transform .2s; }
      .sheet a:hover img { transform: scale(1.04); }
    }
    .sheet-note { margin: 14px 0 26px; color: var(--muted); font-size: 0.85rem; }
    @media (max-width: 1000px) { .sheet { grid-template-columns: repeat(4, 1fr); } }
    @media (max-width: 560px) { .sheet { grid-template-columns: repeat(2, 1fr); } }