/* Layout: lab log. Wordmark hero, then a filterable grid of "experiments" (each with an ID, type and status), then about. */
:root {
  --bg: #F3F5F8;
  --surface: #FFFFFF;
  --fg: #121722;
  --muted: #5B6476;
  --line: #DCE1EA;
  --accent: #2459F0;
  --accent-soft: #E3EAFE;
  --ok: #0F8A5F;
  --ok-soft: #DDF3EA;
  --wip: #A15C00;
  --wip-soft: #FBEBD3;
  --display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0C0F15; --surface: #141923; --fg: #E8ECF3; --muted: #8B95A8; --line: #252C3A;
    --accent: #7FA2FF; --accent-soft: #1A2647; --ok: #4FD39C; --ok-soft: #10291F; --wip: #F2B45A; --wip-soft: #2E2210;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0C0F15; --surface: #141923; --fg: #E8ECF3; --muted: #8B95A8; --line: #252C3A;
  --accent: #7FA2FF; --accent-soft: #1A2647; --ok: #4FD39C; --ok-soft: #10291F; --wip: #F2B45A; --wip-soft: #2E2210;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body { background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 1rem; line-height: 1.6; }
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 40px); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px; border-bottom: 1px solid var(--line); }
.brand { font-family: var(--display); font-weight: 700; font-size: 0.95rem; text-decoration: none; letter-spacing: -0.01em; }
.brand b { color: var(--accent); font-weight: 800; }
.nav { display: flex; gap: 20px; font-size: 0.92rem; }
.nav a { text-decoration: none; color: var(--muted); }
.nav a:hover { color: var(--fg); }

/* Hero */
.hero { padding-block: clamp(48px, 9vw, 104px) clamp(40px, 6vw, 72px); display: grid; gap: 28px; }
.eyebrow { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }
.wordmark { font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem, 10.5vw, 7.4rem); line-height: 0.92; letter-spacing: -0.045em; margin: 0; overflow-wrap: anywhere; }
.wordmark .tender { font-weight: 500; letter-spacing: -0.04em; }
.wordmark .storm { color: var(--accent); display: inline-block; }
.wordmark .lab { display: inline-block; font-family: var(--mono); font-weight: 500; font-size: 0.22em; letter-spacing: 0.04em; vertical-align: top; margin-left: 0.4em; margin-top: 0.5em; padding: 0.25em 0.6em; border: 1.5px solid currentColor; border-radius: 999px; }
.lede { max-width: 54ch; font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--muted); margin: 0; }
.lede strong { color: var(--fg); font-weight: 600; }
.stats { display: flex; flex-wrap: wrap; gap: 8px 28px; font-family: var(--mono); font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.stats span b { color: var(--fg); font-weight: 500; }

@media (prefers-reduced-motion: no-preference) {
  .storm { animation: flash 2.4s ease-out 0.4s 1 both; }
  @keyframes flash {
    0% { opacity: 1; } 6% { opacity: 0.25; } 9% { opacity: 1; text-shadow: 0 0 28px var(--accent); }
    13% { opacity: 0.4; } 16% { opacity: 1; } 40% { text-shadow: 0 0 0 transparent; } 100% { opacity: 1; }
  }
}

/* Section heads */
section { padding-block: 48px; border-top: 1px solid var(--line); }
.head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 24px; margin-bottom: 28px; }
h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filters button { font: 500 0.85rem var(--body); color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.filters button:hover { color: var(--fg); border-color: var(--muted); }
.filters button[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* Grid of experiments */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; min-width: 0; transition: transform .18s ease, border-color .18s ease; }
a.card { text-decoration: none; }
a.card:hover { transform: translateY(-3px); border-color: var(--accent); }
.thumb { aspect-ratio: 16 / 10; max-width: 100%; position: relative; border-bottom: 1px solid var(--line); }
.thumb canvas { display: block; width: 100%; height: 100%; }
.thumb.empty { display: grid; place-items: center; background: repeating-linear-gradient(-45deg, transparent 0 10px, var(--line) 10px 11px); color: var(--muted); font-family: var(--mono); font-size: 0.8rem; }
.body { padding: 18px 20px 20px; display: grid; gap: 8px; flex: 1; align-content: start; }
.meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--mono); font-size: 0.74rem; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.card h3 { font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; margin: 0; }
.card p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.pill { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.wip { background: var(--wip-soft); color: var(--wip); }
.pill.idea { background: var(--accent-soft); color: var(--accent); }
.cta { margin-top: 6px; font-weight: 600; font-size: 0.92rem; color: var(--accent); }
.card.placeholder { border-style: dashed; background: transparent; }

/* About + footer */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; }
.about p { margin: 0 0 14px; max-width: 60ch; }
.log { font-family: var(--mono); font-size: 0.85rem; display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; }
.log li { display: grid; grid-template-columns: 6.5em 1fr; gap: 12px; color: var(--muted); }
.log li span:last-child { color: var(--fg); }
footer { padding-block: 32px 48px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 0.85rem; color: var(--muted); }

@media (max-width: 720px) {
  .about { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .nav { gap: 14px; }
}
@media (max-width: 420px) { .nav a:nth-child(3) { display: none; } }
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Skull stamped in place of the O in STORM */
.wordmark .o-skull { --skull-o: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1136 1184%22%3E%3Cpath fill=%22%23000%22 fill-rule=%22evenodd%22 d=%22M485.04,1179.75 C484.34,1177.41 482.19,1172.35 480.25,1168.50 C474.14,1156.37 472.94,1151.66 471.99,1136.00 C471.26,1124.07 470.55,1119.81 468.00,1112.00 C465.44,1104.15 464.75,1099.98 464.04,1088.00 C462.25,1057.99 455.06,1049.49 430.16,1047.90 C420.40,1047.27 415.33,1046.39 408.05,1044.06 C402.37,1042.24 394.38,1040.60 388.05,1039.96 C375.31,1038.68 371.79,1037.20 355.26,1026.14 C338.28,1014.79 337.08,1013.58 325.36,995.92 C309.31,971.77 304.61,957.44 304.55,932.50 C304.49,911.40 304.14,912.78 315.66,888.80 C327.55,864.05 327.57,864.76 314.18,843.50 C310.03,836.90 304.67,828.85 302.28,825.60 C289.23,807.86 268.67,759.75 264.00,736.00 C262.97,730.77 260.98,722.90 259.56,718.50 C258.12,714.01 256.56,705.89 256.00,700.00 C255.33,692.94 253.95,686.38 251.78,680.00 C248.56,670.50 248.56,670.50 248.24,603.64 C247.97,546.70 248.15,535.56 249.46,528.56 C252.20,513.93 251.34,509.88 244.69,506.24 C241.74,504.63 234.38,504.46 145.98,504.00 C34.08,503.41 45.44,505.14 26.29,485.81 C20.12,479.59 13.25,472.16 11.00,469.31 C8.76,466.45 5.36,463.15 3.46,461.98 C-1.46,458.93 -2.10,404.94 2.75,401.33 C4.26,400.20 7.29,395.73 9.48,391.39 C17.09,376.29 34.31,361.34 51.24,355.15 C58.50,352.50 58.50,352.50 146.50,352.00 C248.18,351.42 241.26,352.22 246.58,340.50 C247.09,339.39 247.73,304.49 248.02,262.00 C248.55,185.50 248.55,185.50 254.54,168.00 C262.13,145.82 265.53,139.84 278.77,125.40 C284.67,118.96 292.43,109.39 296.01,104.15 C301.85,95.60 303.55,93.90 312.30,87.89 C317.68,84.19 328.47,75.15 336.29,67.78 C352.85,52.17 352.86,52.17 368.83,43.55 C375.55,39.93 384.25,34.68 388.16,31.89 C399.29,23.95 406.32,20.52 423.00,14.93 C441.97,8.58 446.32,6.60 449.44,2.89 C453.31,-1.71 898.63,-1.67 902.93,2.92 C904.71,4.83 907.71,6.40 911.58,7.45 C944.20,16.29 970.21,27.29 987.29,39.47 C991.58,42.53 1000.55,47.98 1007.24,51.59 C1021.49,59.28 1023.38,60.53 1032.00,68.03 C1035.58,71.14 1043.22,76.86 1049.00,80.74 C1057.22,86.26 1064.27,92.53 1081.50,109.65 C1110.39,138.36 1115.14,143.62 1119.57,151.71 C1126.17,163.76 1129.10,167.90 1132.59,170.05 C1138.38,173.63 1137.89,458.49 1132.08,462.33 C1121.74,469.17 1118.56,485.44 1124.02,503.62 C1126.84,513.01 1127.38,516.62 1127.98,530.00 C1128.70,546.13 1129.55,549.47 1133.90,553.41 C1137.21,556.40 1137.21,651.60 1133.90,654.59 C1129.55,658.53 1128.71,661.87 1127.91,678.50 C1127.25,692.24 1126.72,695.81 1124.15,703.75 C1122.50,708.84 1120.67,716.13 1120.08,719.95 C1116.73,741.50 1081.16,820.48 1064.59,843.16 C1051.20,861.48 1051.01,866.38 1062.87,886.47 C1071.14,900.47 1071.50,902.56 1071.50,936.00 C1071.50,970.53 1072.31,967.42 1057.64,989.50 C1038.04,1018.99 1016.99,1035.19 992.00,1040.01 C986.77,1041.02 978.67,1043.06 974.00,1044.55 C966.91,1046.81 962.85,1047.37 949.49,1047.97 C926.46,1048.99 923.73,1050.67 919.93,1066.18 C918.80,1070.75 916.75,1077.88 915.37,1082.00 C913.45,1087.75 912.65,1092.89 911.98,1104.00 C911.26,1115.81 910.53,1120.26 908.05,1128.00 C906.13,1133.97 904.63,1141.40 904.01,1148.00 C902.98,1159.06 903.33,1158.13 892.74,1178.25 L889.71,1184.00L688.01,1184.00 C486.32,1184.00 486.32,1184.00 485.04,1179.75 Z M817.90,1110.94 C827.28,1108.78 830.52,1104.04 832.07,1090.26 C832.61,1085.44 834.40,1077.19 836.04,1071.93 C837.81,1066.24 839.42,1058.12 840.01,1051.93 C840.61,1045.60 842.18,1037.76 844.00,1032.00 C845.85,1026.16 847.39,1018.41 848.01,1011.89 C849.82,992.67 857.79,976.88 868.49,971.27 C885.16,962.53 896.00,960.71 935.50,960.06 C976.75,959.37 976.88,959.35 983.89,953.44 C996.54,942.78 993.63,927.42 975.09,907.01 C963.77,894.55 958.73,886.95 954.79,876.40 C952.79,871.03 950.52,767.86 951.02,705.08 C951.15,687.96 974.26,671.21 989.65,677.06 C1003.26,682.23 1007.25,691.92 1008.14,721.92 C1009.14,755.57 1011.73,762.20 1020.47,753.46 C1026.72,747.21 1037.26,720.50 1039.98,704.00 C1040.57,700.42 1042.37,693.23 1043.98,688.00 C1045.58,682.77 1047.40,675.58 1048.00,672.00 C1048.61,668.42 1050.54,661.00 1052.30,655.50 C1057.27,639.97 1057.28,568.07 1052.31,552.50 C1050.56,547.00 1048.43,538.67 1047.57,534.00 C1044.66,518.05 1038.01,508.51 1027.72,505.52 C1016.98,502.40 350.82,503.84 344.51,507.00 C338.70,509.91 334.18,515.44 330.83,523.72 C328.50,529.50 328.50,529.50 328.50,604.00 L328.50,678.50L337.37,704.50 C347.17,733.20 350.27,740.21 355.53,745.46 C363.88,753.81 366.82,747.23 368.01,717.50 C368.81,697.49 369.47,694.21 374.13,687.37 C387.36,667.90 410.65,670.84 422.24,693.45 C424.54,697.94 425.14,866.48 422.89,877.03 C421.35,884.27 417.32,890.02 404.00,904.00 C385.21,923.72 382.41,930.78 388.35,943.50 C395.66,959.15 396.47,959.38 445.50,960.03 C490.47,960.63 490.99,960.71 505.00,968.97 C519.45,977.48 524.90,984.90 528.02,1000.27 C529.05,1005.35 531.07,1013.10 532.50,1017.50 C534.49,1023.63 535.31,1028.89 536.00,1040.00 C536.74,1051.86 537.46,1056.23 539.99,1064.00 C542.35,1071.29 543.27,1076.44 543.94,1086.15 C545.15,1103.69 547.86,1108.60 557.65,1110.89 C563.16,1112.19 812.29,1112.23 817.90,1110.94 Z M626.00,907.67 C606.20,902.23 596.55,879.82 603.89,856.35 C605.81,850.22 607.40,842.32 608.01,835.92 C608.55,830.16 610.14,821.92 611.55,817.50 C612.96,813.10 615.02,805.00 616.13,799.50 C620.53,777.73 630.72,768.70 651.00,768.60 C675.16,768.48 687.10,786.73 678.40,810.50 C673.68,823.38 672.93,826.44 671.94,836.77 C671.34,843.03 669.79,850.64 667.98,856.23 C666.16,861.85 664.62,869.40 664.03,875.67 C663.50,881.31 662.35,887.63 661.48,889.71 C656.60,901.43 637.84,910.93 626.00,907.67 Z M737.88,907.64 C723.24,903.63 714.03,889.56 712.01,868.10 C711.40,861.60 709.95,854.11 708.45,849.65 C707.07,845.52 705.09,837.72 704.06,832.32 C703.03,826.92 700.71,818.90 698.91,814.50 C692.91,799.84 694.51,791.00 705.28,779.31 C718.98,764.45 748.98,764.45 756.67,779.32 C760.75,787.21 767.02,809.71 767.99,819.93 C768.63,826.66 770.14,833.92 772.24,840.43 C776.01,852.09 777.10,879.97 774.11,888.44 C769.77,900.75 750.32,911.06 737.88,907.64 Z M538.00,787.91 C536.08,787.43 529.06,785.92 522.41,784.56 C500.56,780.10 491.26,774.93 474.12,757.69 C460.28,743.77 458.96,741.87 448.46,720.79 C438.64,701.06 438.59,700.85 439.79,676.90 C441.66,639.47 458.47,625.76 489.50,636.37 C495.87,638.55 500.45,639.28 512.00,640.00 C524.04,640.75 528.11,641.44 536.00,644.05 C545.33,647.15 545.97,647.22 572.00,648.02 C597.58,648.80 598.81,648.93 607.58,651.80 C612.57,653.43 618.64,655.07 621.08,655.45 C645.04,659.16 653.24,671.53 649.04,697.62 C645.39,720.23 645.42,720.16 620.15,758.34 C615.72,765.03 588.92,779.29 574.74,782.50 C544.86,789.26 543.91,789.40 538.00,787.91 Z M818.50,786.37 C812.45,785.02 804.58,783.25 801.00,782.44 C785.27,778.86 770.77,769.12 754.76,751.39 C733.90,728.30 728.58,713.92 728.53,680.50 C728.49,654.67 728.41,655.05 739.62,632.98 C749.48,613.58 752.27,610.60 774.33,595.85 C801.51,577.67 806.27,576.03 832.00,576.03 C855.11,576.03 868.63,580.23 891.63,594.55 C907.93,604.70 924.76,627.89 933.12,651.74 C936.32,660.86 938.41,703.12 936.03,710.50 C933.73,717.64 918.04,747.77 913.90,753.00 C906.10,762.87 878.11,779.06 863.00,782.45 C829.43,789.98 833.18,789.65 818.50,786.37 Z M961.27,207.36 C967.93,204.74 972.03,203.72 976.00,203.72 C979.97,203.72 984.07,204.74 990.73,207.36 C1009.59,214.80 1014.47,211.47 1016.02,190.13 C1017.03,176.24 1017.74,174.02 1024.70,163.00 C1035.74,145.52 1033.76,138.80 1016.73,135.97 C1003.20,133.73 998.16,130.06 990.38,116.79 C979.70,98.59 972.30,98.59 961.62,116.79 C953.58,130.50 948.53,134.01 934.02,136.00 C914.07,138.73 912.25,145.87 927.12,163.02 C937.88,175.41 938.41,176.81 937.57,190.17 C936.27,210.82 941.98,214.97 961.27,207.36 Z%22/%3E%3C/svg%3E"); display: inline-block; position: relative; width: 0.925em; height: 0.75em; vertical-align: baseline; }
.wordmark .o-skull::after {
  content: ""; position: absolute; left: -0.339em; bottom: -0.125em; width: 1.333em; height: 1.39em;
  background: var(--fg); transform: rotate(11deg);
  -webkit-mask: var(--skull-o) center / contain no-repeat; mask: var(--skull-o) center / contain no-repeat;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Demo-merke og passordlåste prosjekter */
.pill.demo { background: var(--accent-soft); color: var(--accent); }
.cta .lock { width: 0.95em; height: 0.95em; vertical-align: -0.1em; margin-right: 0.35em; fill: none; stroke: currentColor; stroke-width: 1.6; }
#pw-dialog { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--fg); padding: 24px; width: min(92vw, 380px); }
#pw-dialog::backdrop { background: rgba(8, 10, 16, 0.55); }
#pw-dialog form { display: grid; gap: 10px; }
#pw-dialog h3 { font-family: var(--display); font-size: 1.1rem; letter-spacing: -0.02em; margin: 0; }
#pw-dialog p { margin: 0; color: var(--muted); font-size: 0.95rem; }
#pw-dialog label { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
#pw-dialog input { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); }
#pw-dialog .pw-error { color: #D64545; font-weight: 600; }
#pw-dialog .pw-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
#pw-dialog button { font: 600 0.92rem var(--body); padding: 9px 18px; border-radius: 999px; border: 1px solid var(--fg); background: var(--fg); color: var(--bg); cursor: pointer; }
#pw-dialog button.pw-secondary { background: transparent; color: var(--fg); border-color: var(--line); }
#pw-dialog button:disabled { opacity: 0.6; cursor: wait; }

/* Kontakt */
.kontakt { display: grid; gap: 14px; margin-top: 18px; max-width: 60ch; }
.felt-rad { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.felt { display: grid; gap: 6px; min-width: 0; }
.felt label { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.felt label span { text-transform: none; letter-spacing: 0; }
.felt input, .felt select, .felt textarea { font: inherit; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; width: 100%; }
.felt textarea { resize: vertical; min-height: 120px; }
.felt input:focus, .felt select:focus, .felt textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.kontakt-bunn { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
#k-send, #epost-kopier { font: 600 0.92rem var(--body); border-radius: 999px; cursor: pointer; }
#k-send { padding: 10px 22px; border: 1px solid var(--fg); background: var(--fg); color: var(--bg); }
#k-send:disabled { opacity: 0.6; cursor: wait; }
#k-status { margin: 0; font-size: 0.92rem; }
#k-status.ok { color: var(--ok); }
#k-status.feil { color: #D64545; font-weight: 600; }
.epost-direkte { margin-top: 18px; color: var(--muted); font-size: 0.95rem; }
.epost-direkte a { color: var(--fg); font-weight: 600; overflow-wrap: anywhere; }
#epost-kopier { margin-left: 6px; padding: 4px 12px; font-size: 0.8rem; background: transparent; color: var(--fg); border: 1px solid var(--line); }
#epost-kopier:hover { border-color: var(--muted); }
.hjelp-lenke { color: var(--accent); font-weight: 600; text-decoration: none; }
.hjelp-lenke:hover { text-decoration: underline; }