/* ================= the site on a phone =================
   One set of rules for every page when the screen is taller than wide (html.portrait, set by main.js), loaded last.
   Melker, 2026-10-14, on his iPhone: "the whole site is amateurish on mobile. Look over the design properly". What was wrong:
   text and buttons ran into the screen's edge, the sheet frame's letters sat in the text, every page had its own margins and
   sizes, the menu floated over whatever scrolled under it. The rules here: one side margin (--gut) everywhere, a solid bar for
   the logo and menu, no sheet frame, one type scale. Sizes are checked at 430 x 720 (an iPhone with the browser's bars showing),
   390 x 664 and 375 x 553. */
.portrait{--gut:20px;--bar:56px}

/* ---- the bar: logo left, menu right, on the page's own colour; the tagline under the logo is left out (the pages say it) */
.portrait .top{top:0;left:0;right:0;height:var(--bar);padding:0 var(--gut);background:var(--bar-bg,var(--bg-e));box-shadow:0 1px 0 rgba(242,236,223,.08)}
.portrait .top::before{display:none!important}
.portrait.view-lab .top{--bar-bg:var(--lab)}
.portrait.view-about .top{--bar-bg:var(--about)}
.portrait .logo{height:18px}
.portrait .nav{padding:4px;gap:2px}
.portrait .nav a{font-size:15px;padding:8px 12px 9px}
.portrait .langs{margin-left:2px;padding-left:5px}
.portrait .langs button{font-size:12px;padding:7px 7px 8px}
.portrait .both,.portrait .sheetframe,.portrait .i-rail{display:none}

/* ---- type: one scale for every page */
.portrait .kicker,.portrait .i-kick{font-size:12px;letter-spacing:.2em}
.portrait .lead,.portrait .about-lead{font-size:19px;line-height:1.3;max-width:none}
.portrait .lead.small,.portrait .about-p{font-size:18px;line-height:1.3}

/* ---- the landing page: the hero starts under the bar, at the side margin */
.portrait .i-hero .i-stage{padding:calc(var(--bar) + 20px) var(--gut) max(56px,8svh)}
.portrait .i-team{max-width:none;padding:0 var(--gut)}
.portrait .i-tline,.portrait .i-under{padding:0 var(--gut)}

/* ---- the start screen */
.portrait .t-engine{left:var(--gut)} .portrait .t-lab{right:var(--gut)}
.portrait .title{max-width:calc(100vw - 2 * var(--gut))}

/* ---- Motorn and Labbet: the model keeps the top, the page scrolls up over it at the side margin */
.portrait .panel-in,.portrait.tone-e .engine .panel-in,.portrait.tone-e .lab .panel-in{margin:42svh 0 0;padding:8px var(--gut) 14vh}
.portrait .panel .kicker{margin-bottom:12px}
.portrait .panel h2{font-size:clamp(34px,9.8vw,46px);line-height:1;margin-bottom:16px}
.portrait .panel .btn.big{font-size:17px;padding:15px 22px 12px}
.portrait .panel h3{font-size:22px;margin:48px 0 16px}
.portrait.tone-e .steps li{padding:14px 16px 15px 54px;font-size:17px;line-height:1.25}
.portrait.tone-e .engine .steps li::after,.portrait.tone-e .lab .steps li::after{left:16px;top:16px}
.portrait .steps b{font-size:17px}
.portrait .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.portrait .card span{padding:9px 11px 11px}
.portrait .feature-text{padding:14px 16px 4px}
.portrait .prices li{padding:16px 16px 15px}
.portrait .brief{padding:20px 16px 22px}
.portrait .opts{gap:7px}
.portrait .opt{font-size:16px;padding:8px 12px 10px}
.portrait .cta{margin-top:40px}

/* ---- Om oss */
.portrait .about-in{padding:calc(var(--bar) + 40px) var(--gut) 10vh}
.portrait .about-h{font-size:clamp(46px,13vw,62px);margin-bottom:18px}
.portrait .about-lead{margin-bottom:28px}
.portrait .about h2{margin:72px 0 20px;font-size:28px}
.portrait .door{padding:18px 54px 20px 20px;font-size:18px}
.portrait .door b{font-size:30px}
.portrait .logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 22px}
.portrait .logos img{max-height:34px}
.portrait .quotes{columns:1}
.portrait .quotes figure{padding:20px 20px 18px;margin-bottom:14px;border-radius:18px}
.portrait .quotes blockquote{font-size:19px;line-height:1.25;margin-bottom:16px}
.portrait .awards{gap:24px 34px}
.portrait .awards img{max-height:62px;max-width:180px}
.portrait .contact dl{grid-template-columns:1fr;gap:22px}
.portrait .contact dd{font-size:19px}
.portrait .contact .btn.big{font-size:17px;padding:15px 20px 12px;max-width:100%}
.portrait .policy{font-size:17px}
.portrait .foot{margin-top:64px;font-size:16px}

/* ---- a case: a bar with the close button at the top (it used to sit on the third film), then name, what it is, the one-line
   result, the tags and figures, the story. The two columns of the wide layout are opened so their parts can be put in that order. */
.portrait .sheet-x{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:flex-end;gap:10px;width:100%;height:52px;
  padding:0 var(--gut) 3px;border-radius:0;background:var(--sheet);box-shadow:0 1px 0 rgba(242,236,223,.08);font-size:28px}
.portrait .sheet-x::before{content:"Stäng";font:800 16px/1 "Darker Grotesque",sans-serif;padding-top:4px}
html[lang=en].portrait .sheet-x::before{content:"Close"}
.portrait .sheet-x:hover{background:var(--sheet);color:var(--paper)}
.portrait .filmbar{padding-left:var(--gut);padding-right:var(--gut)}
.portrait .sheet-body{display:flex;flex-direction:column;padding:26px var(--gut) 0}
.portrait .sheet-meta,.portrait .sheet-story{display:contents}
.portrait .sheet .kicker{order:1;margin-bottom:8px}
.portrait .sheet h2{order:2;font-size:38px;margin-top:0}
.portrait .sheet .sub{order:3;font-size:19px;margin:8px 0 18px}
.portrait .sheet .intro{order:4;font-size:23px;line-height:1.12;margin:0 0 20px}
.portrait .sheet .chips{order:5;gap:7px}
.portrait .sheet .chips li{font-size:14px;padding:5px 11px 6px}
.portrait .sheet .stats{order:6;padding-top:24px}
.portrait .sheet .sections{order:7}
.portrait .sheet .bts{order:8}
.portrait .sheet .quote{order:9}
.portrait .sheet .thanks{order:10}
.portrait .sheet-story h3{margin-top:32px}
.portrait .sheet-nav{padding:30px var(--gut) 40px}

/* ---- the start screen's titles a size smaller, so the drawings get room between the bar and the words */
.portrait .t-engine,.portrait .t-lab{--u:12.4vw}
.portrait .title .row{gap:10px 16px}
/* ---- the clients on the landing page large enough to read */
.portrait .i-track{gap:40px;padding-right:40px}
.portrait .i-track img{height:28px;opacity:.75}
/* ---- a picture or film opened large: the arrows under it, not on it */
.portrait .lb-nav{top:auto;bottom:max(64px,8vh);translate:none;width:44px;height:44px}
.portrait .lb-nav.prev{left:var(--gut)}.portrait .lb-nav.next{right:var(--gut)}
.portrait .lightbox p{bottom:max(24px,3vh);padding:0 70px;font-size:15px;line-height:1.25}
.portrait .lb-x{top:12px;right:var(--gut)}
/* the start screen has room for the drawing or the one-line descriptions, not both: the landing page's last scene says the same
   two lines just before, so on a phone they are left out here and the drawings get the room */
.portrait .title .tag{display:none}

/* ================= a phone held sideways (wide but short): the wide layout, with the phone's bar and tighter sizes =================
   Without these the landing page's words ran into the logo, the menu floated over Om oss, and a case put its text in a column
   a few words wide. Checked at 844 x 390. */
@media (orientation:landscape) and (max-height:560px){
  html:not(.portrait){--bar:52px}
  html:not(.portrait) .top{top:0;left:0;right:0;height:var(--bar);padding:0 24px;background:var(--bar-bg,var(--bg-e));box-shadow:0 1px 0 rgba(242,236,223,.08)}
  html:not(.portrait) .top::before{display:none}
  html:not(.portrait).view-lab .top{--bar-bg:var(--lab)}
  html:not(.portrait).view-about .top{--bar-bg:var(--about)}
  html:not(.portrait) .logo{height:18px}
  html:not(.portrait) .nav a,html:not(.portrait) .nav .reel{font-size:15px;padding:7px 11px 8px}
  html:not(.portrait) .both,html:not(.portrait) .sheetframe,html:not(.portrait) .i-hint,html:not(.portrait).view-home .dlabels{display:none}
  /* the landing page */
  html:not(.portrait) .i-copy{top:calc(50% + var(--bar) / 2);translate:0 -50%}
  html:not(.portrait) .i-kick{margin-bottom:10px}
  html:not(.portrait) .i-h{font-size:min(5vw,9.5vh)}
  html:not(.portrait) .i-lead{margin:10px 0 14px;font-size:16px}
  html:not(.portrait) .i-slot{top:calc(50% + var(--bar) / 2 - 43vw * 9 / 32)}
  /* the pages beside the models, Om oss */
  html:not(.portrait) .panel-in{padding-top:calc(var(--bar) + 24px)}
  html:not(.portrait) .about-in{padding-top:calc(var(--bar) + 36px)}
  html:not(.portrait) .about-h{font-size:min(9vw,16vh)}
  /* a case: one column, as wide as reads well */
  html:not(.portrait) .sheet{width:min(100%,720px)}
  html:not(.portrait) .sheet-body{grid-template-columns:minmax(0,1fr)}
  html:not(.portrait) .sheet-meta{position:static}
}