/* Helekt: a calm, Nordic-light site. Two typefaces: Inter (Display cut for headings) and Lora for reading text. Both self-hosted. */
@font-face{font-family:"Inter";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/inter-400.woff) format("woff")}
@font-face{font-family:"Inter";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/inter-500.woff) format("woff")}
@font-face{font-family:"Inter";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/inter-600.woff) format("woff")}
@font-face{font-family:"Inter Display";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/inter-display-600.woff) format("woff")}
@font-face{font-family:"Inter Display";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/inter-display-700.woff) format("woff")}
@font-face{font-family:"Lora";font-weight:400 700;font-style:normal;font-display:swap;src:url(fonts/lora.woff) format("woff")}
@font-face{font-family:"Lora";font-weight:400 700;font-style:italic;font-display:swap;src:url(fonts/lora-italic.woff) format("woff")}

:root{
  --snow:#f3f5f6;      /* page */
  --paper:#ffffff;     /* cards on the shelf */
  --ink:#15212b;       /* text */
  --muted:#52616c;     /* secondary text */
  --rule:#d5dce0;      /* hairlines */
  --fjord:#2e4756;     /* dark panels */
  --birch:#e3d4bc;     /* shelf wood */
  --birch-deep:#c9b390;
  --lingon:#a3283b;    /* the one accent */
  --focus:#a3283b;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Inter Display","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:"Lora",Georgia,"Times New Roman",serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --snow:#0f171e;--paper:#1a2630;--ink:#e8edf0;--muted:#9aa8b2;--rule:#26343e;--fjord:#1d2f3b;
    --birch:#cdbb9c;--birch-deep:#a99673;--lingon:#e0667a;--focus:#e0667a;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--snow);color:var(--ink);font:400 1.0625rem/1.7 var(--serif);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:3px}
::selection{background:var(--birch);color:#15212b}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--snow);padding:.6rem 1rem;font:600 .9rem var(--sans);z-index:10}
.skip:focus{left:1rem;top:1rem}

/* language: both versions are in the page, one is shown */
html:not([data-l]) .sv,html[data-l="en"] .sv,html[data-l="sv"] .en{display:none!important}

.wrap{width:min(1120px,100% - clamp(2.5rem,8vw,5rem));margin-inline:auto}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;padding:1.4rem 0}
.mark{display:inline-flex;align-items:flex-end;text-decoration:none;line-height:0}
.mark img{height:3.3rem;width:auto;display:block}
@media (max-width:520px){.mark img{height:2.4rem}}
.mark i{display:inline-block;width:.34em;height:.34em;margin-left:.08em;border-radius:50%;background:var(--lingon)}
.nav{display:flex;align-items:center;gap:.4rem 1.6rem;flex-wrap:wrap;font:500 .95rem var(--sans)}
.nav a{text-decoration:none;padding:.3rem 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--lingon)}
.lang{display:inline-flex;border:1px solid var(--rule);border-radius:6px;overflow:hidden;margin-left:.4rem}
.lang button{font:600 .8rem var(--sans);letter-spacing:.04em;border:0;background:transparent;color:var(--muted);padding:.38rem .65rem;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--snow)}

/* hero */
.hero{padding:clamp(2.5rem,7vw,5.5rem) 0 clamp(2rem,5vw,3.5rem)}
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;text-wrap:balance}
h1{font-size:clamp(2.6rem,7.2vw,5.4rem);line-height:1.02;letter-spacing:-.04em;max-width:15ch}
.lede{font-size:clamp(1.12rem,2vw,1.3rem);line-height:1.6;max-width:52ch;margin:1.6rem 0 0;color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem;margin-top:2rem}
.btn{display:inline-flex;align-items:center;font:600 .98rem var(--sans);padding:.85rem 1.35rem;border-radius:6px;background:var(--ink);color:var(--snow);text-decoration:none;border:2px solid var(--ink)}
.btn:hover{background:transparent;color:var(--ink)}
.btn.small{padding:.5rem .9rem;font-size:.88rem}
.link{font:600 .98rem var(--sans);text-decoration:underline;text-decoration-color:var(--lingon);text-decoration-thickness:3px;text-underline-offset:.28em}
.link:hover{text-decoration-thickness:5px}

/* the shelf: our apps stand on it, like the one inside Photo Mirror */
.shelf-scene{padding:0 0 clamp(3rem,7vw,5rem)}
.shelf{display:flex;align-items:flex-end;gap:clamp(1rem,3vw,2rem);padding:0 clamp(1rem,3vw,2rem);flex-wrap:wrap}
.thing{display:block;text-decoration:none;background:var(--paper);border:1px solid var(--rule);border-radius:10px;padding:1.35rem 1.5rem 1.4rem;width:min(100%,25rem);animation:set .75s cubic-bezier(.2,.8,.2,1) both .25s}
.thing:hover{border-color:var(--ink)}
.thing .row{display:flex;align-items:center;gap:1rem}
.thing svg{width:3.5rem;height:3.5rem;flex:none}
.thing h2{font-size:1.5rem;letter-spacing:-.025em}
.thing p{margin:.9rem 0 0;font-size:1rem;line-height:1.55}
.thing small{display:block;margin-top:.8rem;font:500 .85rem/1.4 var(--sans);color:var(--muted)}
.thing.empty{background:transparent;border:2px dashed var(--birch-deep);width:min(100%,16rem);animation-delay:.45s;color:var(--muted);cursor:default}
.thing.empty:hover{border-color:var(--birch-deep)}
.thing.empty p{margin:0;font-style:italic}
.plank{position:relative;height:1.35rem;background:linear-gradient(var(--birch),var(--birch-deep));border-radius:3px;box-shadow:0 16px 18px -12px rgb(21 33 43 / .35)}
.plank::before{content:"";position:absolute;inset:0;border-radius:3px;background:repeating-linear-gradient(90deg,transparent 0 90px,rgb(110 80 40 / .07) 90px 91px,transparent 91px 210px)}
.plank::after{content:"";position:absolute;left:8%;right:8%;top:100%;height:.75rem;background:linear-gradient(90deg,var(--birch-deep) 0 14px,transparent 14px calc(100% - 14px),var(--birch-deep) calc(100% - 14px));opacity:.85}
@keyframes set{from{opacity:0;transform:translateY(-16px)}}

/* sections */
.sec{padding:clamp(3.25rem,8vw,6rem) 0;border-top:1px solid var(--rule)}
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.3fr);gap:1.5rem clamp(2rem,6vw,5rem)}
.sec h2{font-size:clamp(1.55rem,3vw,2.1rem);line-height:1.1;letter-spacing:-.03em}
.sec .sub{margin:1rem 0 0;color:var(--muted);max-width:34ch}
.rows{list-style:none;margin:0;padding:0}
.rows li{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:.4rem 2rem;padding:1.35rem 0;border-top:1px solid var(--rule)}
.rows li:first-child{border-top:0;padding-top:0}
.rows h3{font:600 1.1rem/1.4 var(--sans);letter-spacing:-.01em}
.rows p{margin:0;max-width:56ch}

.big{list-style:none;margin:0;padding:0}
.big li{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:.5rem 3rem;align-items:baseline;padding:clamp(1.25rem,3vw,2rem) 0;border-top:1px solid var(--rule)}
.big li:first-child{border-top:0;padding-top:0}
.big b{font:500 clamp(1.9rem,4.2vw,3.1rem)/1.12 var(--serif);letter-spacing:-.015em}
.big span{color:var(--muted);max-width:40ch}

.about-text{font:500 clamp(1.4rem,2.8vw,2rem)/1.4 var(--serif);margin:0;max-width:34ch;letter-spacing:-.01em}
.facts{margin:2.2rem 0 0;padding:0}
.facts div{display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr);gap:1.5rem;padding:.9rem 0;border-top:1px solid var(--rule);font-size:1rem}
.facts dt{font:600 .92rem var(--sans);color:var(--muted)}
.facts dd{margin:0}

.say{background:var(--fjord);color:#f3f5f6;border-top:0}
.say .sub{color:#c3cfd6}
.mail{display:inline-block;margin-top:1.5rem;font:700 clamp(1.55rem,5.4vw,3.8rem)/1.08 var(--display);letter-spacing:-.04em;text-decoration:none;border-bottom:.09em solid var(--lingon);padding-bottom:.08em;overflow-wrap:anywhere}
.say .mail{border-bottom-color:#f08d9d}
.mail:hover{border-bottom-width:.16em}

.foot{padding:2rem 0 2.5rem;font:400 .9rem/1.6 var(--sans);color:var(--muted)}
.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem}
.foot nav{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem}
.foot a{text-decoration:none;border-bottom:1px solid var(--rule)}
.foot a:hover{color:var(--ink);border-bottom-color:var(--lingon)}
.say + .foot{background:var(--fjord);color:#b5c3cb}
.say + .foot a{border-bottom-color:#46606f}
.say + .foot a:hover{color:#fff}

/* Photo Mirror page */
.pm-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:2.5rem clamp(2rem,5vw,4rem);align-items:center;padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(3rem,7vw,5rem)}
.pm-hero h1{font-size:clamp(2.4rem,6vw,4.4rem);display:flex;align-items:center;gap:1rem;max-width:none}
.pm-hero h1 svg{width:.85em;height:.85em;flex:none}
.tag{font:600 clamp(1.25rem,2.6vw,1.7rem)/1.25 var(--display);letter-spacing:-.025em;margin:1.2rem 0 0}
.stage{background:linear-gradient(var(--birch),var(--birch-deep));padding:clamp(.9rem,2.4vw,1.6rem);border-radius:4px;box-shadow:0 22px 30px -22px rgb(21 33 43 / .55)}
.frame{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 0 rgb(0 0 0 / .08),0 14px 30px -14px rgb(0 0 0 / .45)}
.frame .bar{height:1.6rem;background:#e6e9ec;display:flex;align-items:center;gap:.4rem;padding:0 .8rem}
.frame .bar i{width:.6rem;height:.6rem;border-radius:50%;background:#b7c0c7}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem clamp(1.5rem,4vw,3rem)}
.steps li{border-top:3px solid var(--ink);padding-top:1.1rem}
.steps .n{display:block;font:700 2.6rem/1 var(--display);letter-spacing:-.04em;color:var(--lingon);margin-bottom:.7rem}
.steps h3{font:600 1.15rem/1.35 var(--sans);margin-bottom:.35rem}
.steps p{margin:0}
.feat{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(2rem,5vw,4rem)}
.feat li{padding:1.15rem 0;border-top:1px solid var(--rule)}
.feat b{display:block;font:600 1.02rem/1.4 var(--sans);margin-bottom:.15rem}
.feat span{color:var(--muted)}
.prints{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.5vw,1.75rem)}
.prints figure{margin:0}
.prints .mat{background:#f7f3ea;padding:clamp(.5rem,1.2vw,.8rem);border:1px solid var(--birch-deep);box-shadow:0 14px 22px -16px rgb(21 33 43 / .6)}
.prints img{width:100%;aspect-ratio:16/9;object-fit:cover}
.prints figcaption{font:400 .92rem/1.5 var(--sans);color:var(--muted);margin-top:.8rem}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:34rem;font-size:1rem}
th,td{text-align:left;vertical-align:top;padding:.95rem 1.2rem .95rem 0;border-top:1px solid var(--rule)}
thead th{font:600 1.05rem var(--sans);border-top:0;border-bottom:3px solid var(--ink)}
tbody th{font:600 .92rem var(--sans);color:var(--muted);width:23%}
.get{list-style:none;margin:0;padding:0}
.get li{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 0;border-top:1px solid var(--rule)}
.get li:first-child{border-top:0;padding-top:0}
.get .who b{display:block;font:600 1.05rem var(--sans)}
.get .who span{font:400 .9rem var(--sans);color:var(--muted)}
.get .state{font:500 .88rem var(--sans);color:var(--muted);border:1px dashed var(--birch-deep);border-radius:999px;padding:.3rem .85rem;white-space:nowrap}
.get li.live .state{display:none}
.note{font:400 .95rem/1.55 var(--sans);color:var(--muted);margin:1.4rem 0 0;max-width:60ch}
.faq{margin:0;padding:0}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;font:600 1.05rem/1.4 var(--sans);padding:1.1rem 2.5rem 1.1rem 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.3rem;top:.9rem;font:400 1.6rem/1 var(--sans);color:var(--lingon);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0 0 1.2rem;max-width:62ch}
.prose p{margin:0 0 1rem;max-width:60ch}
.prose p:last-child{margin-bottom:0}

@media (max-width:860px){
  .cols,.pm-hero{grid-template-columns:minmax(0,1fr)}
  .big li{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr)}
  .prints{grid-template-columns:minmax(0,1fr)}
  .feat{grid-template-columns:minmax(0,1fr)}
  .rows li,.facts div{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .thing{animation:none}
  .faq summary::after{transition:none}
}
[hidden]{display:none!important}