/* ==========================================
   hallengreen.dk — Main Stylesheet
   "The house": a CV you walk through
   ========================================== */

/* --- Tokens --- */
:root,
:root[data-theme="night"] {
  color-scheme: dark;
  --bg: #0d1122;
  --surface: #141a30;
  --surface-2: #1b2240;
  --line: #262e52;
  --text: #ece5d8;
  --muted: #9aa1b8;
  --accent: #ffb84d;
  --accent-ink: #1a1206;
  --accent-soft: rgba(255, 184, 77, 0.12);
  --on: #7fdcab;
  --link: #ffc977;

  /* house */
  --sky-top: #070b1c;
  --sky-bottom: #1d2850;
  --hill: #101a2a;
  --ground: #0f1914;
  --roof: #4a2f36;
  --brick: #5a3a37;
  --struct: #d9cbb4;
  --dark-fill: #050816;
  --dark-opacity: 0.84;
  --bulb-off: #5d6278;
  --window-glass: #1b2a52;
}

:root[data-theme="day"] {
  color-scheme: light;
  --bg: #f3eee4;
  --surface: #fffaf1;
  --surface-2: #ece4d5;
  --line: #ddd2bf;
  --text: #1f1b16;
  --muted: #6a6256;
  --accent: #b55f00;
  --accent-ink: #fff8ec;
  --accent-soft: rgba(214, 128, 20, 0.12);
  --on: #2c8a57;
  --link: #9a4f00;

  --sky-top: #7cc2ef;
  --sky-bottom: #d9effa;
  --hill: #8fbf7a;
  --ground: #6fa25b;
  --roof: #9c4f3e;
  --brick: #a8574a;
  --struct: #efe4d0;
  --dark-fill: #1b2440;
  --dark-opacity: 0.3;
  --bulb-off: #b9b4a8;
  --window-glass: #a8d8f2;
}

/* --- Base --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 16.5px;
  line-height: 1.65;
  transition: background-color 0.5s, color 0.5s;
  overflow-x: hidden;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--accent);
}

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

h1, h2, h3 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.mono,
.room-id,
.tile-id,
.job-period,
.logbook,
.eyebrow,
.brand {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

.muted { color: var(--muted); }
.small { font-size: 0.8rem; }

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 8px 14px;
  border-radius: 8px;
  z-index: 10;
}

.skip-link:focus { top: 12px; }

/* --- Layout --- */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.house-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

.content {
  padding: 40px 16px 24px;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  overflow-x: clip;
}

@media (min-width: 1080px) {
  .layout {
    grid-template-columns: minmax(480px, 47fr) minmax(0, 53fr);
  }

  .house-panel {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 22px 26px;
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }

  .house-frame {
    flex: 1 1 auto;
    min-height: 0;
  }

  .content {
    padding: 72px 56px 32px;
    margin: 0;
  }
}

/* --- House panel --- */
.panel-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.brand {
  font-size: 0.85rem;
  color: var(--accent);
}

.panel-hint {
  font-size: 0.78rem;
  color: var(--muted);
}

.house-frame {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(var(--sky-top), var(--sky-bottom));
  border: 1px solid var(--line);
  aspect-ratio: 760 / 620;
}

@media (min-width: 1080px) {
  .house-frame { aspect-ratio: auto; }
}

#house {
  display: block;
  width: 100%;
  height: 100%;
}

/* outside */
#house .hill { fill: var(--hill); transition: fill .6s; }
#house .ground { fill: var(--ground); transition: fill .6s; }
#house .bush { fill: var(--hill); filter: brightness(0.8); }
#house .roof { fill: var(--roof); transition: fill .6s; }
#house .brick { fill: var(--brick); }
#house .struct { fill: var(--struct); transition: fill .6s; }
#house .shingles line { stroke: rgba(0, 0, 0, 0.22); stroke-width: 2; }
#house .stars circle { fill: #fff; }
#house .stars,
#house .moon,
#house .sun { transition: opacity .8s; }
:root[data-theme="day"] #house .stars,
:root[data-theme="day"] #house .moon { opacity: 0; }
:root[data-theme="night"] #house .sun,
:root:not([data-theme]) #house .sun { opacity: 0; }

/* rooms */
#house .wall-living { fill: #e9d6b4; }
#house .wall-hall { fill: #c8d8cc; }
#house .wall-study { fill: #d9c9e0; }
#house .wall-office { fill: #bfd2e2; }
#house .wall-lab { fill: #c4bdb0; }
#house .floor-wood { fill: #8f6240; }
#house .furn { fill: #7a5236; }
#house .furn-line { stroke: #5b3d29; stroke-width: 3; stroke-linecap: round; }
#house .furn-line.thick { stroke-width: 4; }
#house .shelf { stroke: #5b3d29; stroke-width: 3; }
#house .stairs { fill: #9a6b45; stroke: #6d4a2f; stroke-width: 1.5; }
#house .rail { stroke: #5b3d29; stroke-width: 3; stroke-linecap: round; }
#house .rail-thin { stroke: #5b3d29; stroke-width: 2; }
#house .ladder line { stroke: #6d4a2f; stroke-width: 3; stroke-linecap: round; }
#house .frame-paper { fill: #fbf6e9; stroke: #5b3d29; stroke-width: 2; }
#house .frame-thick { stroke-width: 3; }
#house .ink { fill: none; stroke: #6a6256; stroke-width: 1.6; stroke-linejoin: round; }
#house .cap { fill: #22252e; }
#house .tassel { stroke: #e2b13c; stroke-width: 1.5; }
#house .device { fill: #3a3f4d; }
#house .lamp-arm { fill: none; stroke: #3a3f4d; stroke-width: 2; }
#house .screen { fill: #0e121b; }
#house .code line { stroke: #ffb84d; stroke-width: 2; stroke-linecap: round; opacity: .85; }
#house .code line:nth-child(2n) { stroke: #7fdcab; }
#house .graph { fill: none; stroke: #7fdcab; stroke-width: 1.8; stroke-linejoin: round; }
#house .mug { fill: #c2553f; }
#house .window { fill: var(--window-glass); stroke: #5b3d29; stroke-width: 3; }
#house .window-bar { stroke: #5b3d29; stroke-width: 2; }
#house .pot { fill: #b5663f; }
#house .leaf { fill: #4f8f6a; }
#house .chair { fill: #3a3f4d; }
#house .pitch { fill: #2f7d4a; }
#house .pitch-line { stroke: rgba(255, 255, 255, .7); stroke-width: 1; }
#house .weight { fill: #2a2d36; }
#house .couch { fill: #3f7a8c; }
#house .rug { fill: #c2553f; }
#house .coat { fill: #3f5a8c; }
#house .rack { fill: #1c212d; stroke: #3a4152; stroke-width: 1.5; }
#house .rack-unit { fill: #2a3142; }
#house .rack-slot { stroke: #11141c; stroke-width: 2; }
#house .pcb { fill: #2f7d4a; }
#house .cable { fill: none; stroke: #3f5a8c; stroke-width: 2; }
#house .cable-2 { stroke: #c2553f; }
#house .post { fill: #6d4a2f; stroke: #6d4a2f; stroke-width: 4; }
#house .deck { fill: #8f6240; }
#house .mailbox { fill: #c2553f; }
#house .flag-pole { stroke: #3a3f4d; stroke-width: 1.5; }
#house .flag { fill: #ffb84d; }

#house .led { animation: blink 1.6s steps(2, jump-none) infinite; }
#house .led-g { fill: #7fdcab; }
#house .led-a { fill: #ffb84d; }

@keyframes blink {
  50% { opacity: 0.2; }
}

/* lighting */
#house .dark {
  fill: var(--dark-fill);
  opacity: var(--dark-opacity);
  transition: opacity .7s ease;
  pointer-events: none;
}

#house .dark.on { opacity: 0; }

#house .glow,
#house .halo {
  opacity: 0;
  transition: opacity .7s ease;
  pointer-events: none;
}

#house .glow.on,
#house .halo.on { opacity: 1; }

:root[data-theme="day"] #house .glow.on { opacity: .45; }

#house .cord { stroke: #3a3f4d; stroke-width: 1.5; }
#house .shade { fill: #3a3f4d; }
#house .bulb { fill: var(--bulb-off); transition: fill .3s; }
#house .bulb.on { fill: #ffe6b0; }

#house .sensor {
  fill: #f2efe8;
  stroke: #9aa1b8;
  stroke-width: 1;
  transition: fill .15s;
}

#house .sensor.trip { fill: #ff5f4d; }

/* door */
#house .door-closed,
#house .door-open polygon { fill: #3f5a8c; }
#house .knob { fill: #ffb84d; }
#house .door-open { opacity: 0; transition: opacity .2s; }
#house .door-closed { transition: opacity .2s; }
#house .door.open .door-open { opacity: 1; }
#house .door.open .door-closed { opacity: 0; }

/* person */
#house .person line {
  stroke-width: 6;
  stroke-linecap: round;
}

#house .leg line { stroke: #2b3550; }
#house .leg-back line { stroke: #222a40; }
#house .arm line { stroke: #e8b48f; stroke-width: 5; }
#house .arm-back line { stroke: #d39e7a; }
#house .shirt { fill: #e0863a; }
#house .skin { fill: #f0c19c; }
#house .hair { fill: #5a3b26; }
#house .eye { fill: #1f1b16; }
#house .shoe { fill: #1f1b16; }

/* room hit areas */
#house .hit {
  cursor: pointer;
  outline: none;
}

#house .hit polygon,
#house .hit rect {
  fill: transparent;
  stroke: transparent;
  stroke-width: 2;
  stroke-dasharray: 6 5;
  transition: stroke .2s;
}

#house .hit:hover polygon,
#house .hit:hover rect,
#house .hit:focus-visible polygon,
#house .hit:focus-visible rect {
  stroke: var(--accent);
}

/* tiles */
.tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 520px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  font: inherit;
  min-width: 0;
}

button.tile {
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}

button.tile:hover {
  border-color: var(--accent);
}

.tile-id {
  font-size: 0.68rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tile-state {
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tile.is-on {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

/* logbook */
.logbook {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 0.72rem;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.logbook-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.66rem;
}

.yaml-toggle {
  font: inherit;
  text-transform: none;
  letter-spacing: 0;
  color: var(--link);
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 8px;
  cursor: pointer;
}

.yaml-toggle[aria-expanded="true"] {
  border-color: var(--accent);
}

#logbook {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 5.6em;
  overflow: hidden;
}

#logbook li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  white-space: nowrap;
  animation: log-in .35s ease;
}

#logbook li:nth-child(n + 2) { opacity: .7; }
#logbook li:nth-child(n + 4) { opacity: .4; }
#logbook .t { color: var(--muted); }
#logbook .e { overflow: hidden; text-overflow: ellipsis; }
#logbook .s { color: var(--accent); }
#logbook .s.off { color: var(--muted); }

@keyframes log-in {
  from { transform: translateY(-4px); opacity: 0; }
}

#yaml {
  margin-top: 8px;
  max-height: 34vh;
  overflow: auto;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text);
  border-top: 1px dashed var(--line);
  padding-top: 8px;
}

/* --- Content --- */
.hero {
  padding-bottom: 32px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 18px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--on);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--on) 22%, transparent);
}

.hero h1 {
  font-size: clamp(2.5rem, 7vw, 4.2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 20px;
}

.lede {
  font-size: 1.12rem;
  max-width: 34em;
  margin-bottom: 20px;
}

.chips,
.tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chips li {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.78rem;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
}

.hint {
  margin-top: 26px;
  font-size: 0.9rem;
  color: var(--muted);
  padding-left: 12px;
  border-left: 2px solid var(--accent);
}

.toc {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 520px) {
  .toc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.toc a {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  transition: border-color .2s, background-color .2s;
}

.toc a span {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--muted);
}

.toc a:hover,
.toc a.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* rooms (sections) */
.room {
  position: relative;
  padding: 40px 0 28px;
  border-top: 1px solid var(--line);
  scroll-margin-top: 12px;
}

.room::before {
  content: "";
  position: absolute;
  left: -200px;
  top: -110px;
  width: 420px;
  height: 340px;
  background: radial-gradient(closest-side, var(--accent-soft), transparent);
  opacity: 0;
  transition: opacity .8s;
  pointer-events: none;
}

.room.is-lit::before { opacity: 1; }

.room-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  position: relative;
}

.room-bulb {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--muted);
  transition: background-color .4s, border-color .4s, box-shadow .4s;
}

.room.is-lit .room-bulb {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 14px 3px color-mix(in srgb, var(--accent) 55%, transparent);
}

.room-id {
  font-size: 0.72rem;
  color: var(--muted);
}

.room h2 {
  font-size: 2rem;
}

.room > p,
.room > .card,
.room > div > p {
  position: relative;
}

#about p + p {
  margin-top: 1em;
}

/* cards */
.card {
  display: block;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  color: var(--text);
}

.card h3 {
  font-size: 1.18rem;
  margin-bottom: 4px;
}

a.card {
  text-decoration: none;
  transition: border-color .2s, transform .2s;
}

a.card:hover {
  border-color: var(--accent);
  color: var(--text);
  transform: translateY(-2px);
}

.state-on {
  display: inline-block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.7rem;
  color: var(--on);
  border: 1px solid color-mix(in srgb, var(--on) 50%, transparent);
  border-radius: 999px;
  padding: 0 8px;
  margin-top: 6px;
  vertical-align: middle;
}

/* timeline */
.timeline {
  list-style: none;
  position: relative;
  border-left: 2px solid var(--line);
  margin-left: 6px;
}

.job {
  position: relative;
  padding: 0 0 30px 24px;
}

.job::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--muted);
}

.job.is-current::before {
  background: var(--on);
  border-color: var(--on);
}

.job h3 {
  font-size: 1.25rem;
}

.job-period {
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 4px;
}

.job-period .state-on {
  margin: 0 0 0 6px;
}

.job-company {
  color: var(--muted);
  margin-bottom: 8px;
}

.job ul,
.edu ul {
  padding-left: 1.1em;
}

.job li + li {
  margin-top: 4px;
}

/* certifications */
.cert-grid {
  display: grid;
  gap: 12px;
}

.cert {
  display: flex;
  gap: 18px;
  align-items: center;
}

.cert img {
  flex: none;
  width: 88px;
  height: 88px;
}

@media (max-width: 420px) {
  .cert { flex-direction: column; align-items: flex-start; }
}

/* projects */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.project {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project p {
  font-size: 0.94rem;
}

.project .links {
  margin-top: auto;
  display: flex;
  gap: 14px;
  font-weight: 500;
}

.featured {
  grid-column: 1 / -1;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background:
    radial-gradient(ellipse 80% 120% at 0 0, var(--accent-soft), transparent 60%),
    var(--surface);
}

.project-kicker {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem !important;
  color: var(--accent);
}

.tags li {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--muted);
}

/* education */
.edu-list {
  display: grid;
  gap: 12px;
}

.edu .tags {
  margin-top: 10px;
}

/* contact */
#contact {
  padding-bottom: 40px;
}

.contact-lede {
  color: var(--muted);
  margin-bottom: 6px;
}

.mail {
  display: inline-block;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.4rem, 4.5vw, 2rem);
  font-weight: 600;
  text-decoration: none;
  color: var(--accent);
  border-bottom: 2px solid currentColor;
  overflow-wrap: anywhere;
}

.contact-links {
  list-style: none;
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.contact-links a {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
}

.contact-links a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.footer-copy {
  margin-top: 48px;
  font-size: 0.8rem;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Small screens: the house scrolls away, so keep it light --- */
.hint-narrow { display: none; }

@media (max-width: 1079px) {
  .hint-wide { display: none; }
  .hint-narrow { display: inline; }
  .panel-hint { display: none; }
}

@media (max-width: 700px) {
  .logbook { display: none; }
  .tile { padding: 8px 10px; }
}

/* --- Current role: summary, themes, technologies --- */
.job-summary {
  font-size: 1.02rem;
  margin-bottom: 18px;
  max-width: 38em;
}

.job-tech-label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 22px 0 8px;
}