/* ============================================================
   Øiom Capital Management — mobile & iOS layer
   Loaded AFTER each page's inline <style>, so equal-specificity
   rules here win. Keeps the desktop design untouched.
   ============================================================ */

/* ---------- Safari / iOS baseline ---------- */

html{
  /* Stop iOS Safari inflating text in landscape */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  -webkit-tap-highlight-color:rgba(198,161,91,0.18);
}

/* Safari needs the prefixed properties for these two effects */
nav{
  -webkit-backdrop-filter:blur(6px);
}
.chart-grid{
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 20%, black 40%, transparent 90%);
}

img{
  max-width:100%;
  height:auto;
}

/* Long unbroken strings (org.nr, e-mail, coordinates) must never
   force a horizontal scrollbar on a 320px screen. */
.footer-inner span,
.contact-row .v,
.nav-coords span{
  overflow-wrap:anywhere;
}

/* Hidden on desktop — revealed in the mobile nav block below. */
.nav-toggle{display:none;}


/* ============================================================
   MOBILE NAVIGATION  (≤880px: the desktop link row stops fitting)
   ============================================================ */
@media (max-width:880px){

  .nav-inner{
    position:relative;
    padding:12px 20px;
  }

  .wordmark{
    font-size:16px;
    gap:8px;
    letter-spacing:0.03em;
    /* Grow the hit area to ~44px without making the bar taller */
    padding:12px 0;
    margin:-12px 0;
  }
  .wordmark .glyph{width:18px;height:18px;}
  .wordmark .glyph::before{height:11px;}

  /* ---- toggle button (44px tap target) ---- */
  .nav-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    width:44px;
    height:44px;
    margin-right:-11px; /* optically align the bars with the 20px gutter */
    padding:0;
    background:none;
    border:0;
    color:var(--paper);
    cursor:pointer;
  }
  .nav-toggle-bars{
    position:relative;
    display:block;
    width:22px;
    height:1.5px;
    background:currentColor;
  }
  .nav-toggle-bars::before,
  .nav-toggle-bars::after{
    content:'';
    position:absolute;
    left:0;
    display:block;
    width:22px;
    height:1.5px;
    background:currentColor;
    transition:transform 0.2s ease;
  }
  .nav-toggle-bars::before{top:-7px;}
  .nav-toggle-bars::after{top:7px;}

  .nav-toggle[aria-expanded="true"]{color:var(--brass);}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent;}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{transform:translateY(7px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{transform:translateY(-7px) rotate(-45deg);}

  /* ---- collapsible panel ----
     Taken out of flow so .nav-inner's space-between puts the
     wordmark left and the toggle right. */
  .nav-right{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:0 20px;
    /* Fully opaque: the page text behind must not bleed through */
    background:var(--navy-deep);
    border-bottom:1px solid var(--line);
    max-height:0;
    overflow:hidden;
    visibility:hidden;
    /* visibility flips back only once the collapse has finished,
       which keeps the links out of the tab order while closed */
    transition:max-height 0.28s ease, visibility 0s linear 0.28s;
  }
  .nav-right.is-open{
    max-height:78vh;
    overflow-y:auto;
    visibility:visible;
    transition:max-height 0.28s ease, visibility 0s;
  }

  .nav-links{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    font-size:13.5px;
  }
  .nav-links a{
    display:block;
    padding:16px 0;          /* ~48px tall tap targets */
    border-bottom:1px solid var(--line);
  }
  .nav-links a.active{
    color:var(--brass);
    border-bottom-color:var(--brass);
  }

  /* The coordinates are hidden in the desktop bar below 720px —
     bring them back as the panel's footer line. */
  .nav-coords{
    display:flex;
    flex-direction:column;
    gap:5px;
    padding:16px 0 20px;
    font-size:11.5px;
  }
}


/* ============================================================
   PHONE LAYOUT  (≤600px)
   ============================================================ */
@media (max-width:600px){

  .wrap{padding:0 20px;}

  section{padding:52px 0;}
  .section-head{margin-bottom:32px;}

  /* The decorative chart grid is heavy at phone scale */
  .chart-grid{background-size:44px 44px;opacity:0.28;}

  /* ---- headings ---- */
  h1{font-size:clamp(40px, 11.5vw, 56px);}
  h2{font-size:clamp(27px, 8vw, 34px);}

  .page-header{padding:36px 0 22px;}
  .page-header h1{font-size:clamp(36px, 10vw, 48px);}
  .page-header p{margin-top:14px;font-size:16px;}

  .eyebrow{margin-bottom:20px;letter-spacing:0.12em;}

  /* ---- hero ---- */
  .hero{padding:32px 0 40px;gap:34px;}
  .hero-sub{margin-top:18px;font-size:16.5px;}
  .hero-meta{margin-top:28px;gap:24px;padding-top:20px;}

  /* Full-width CTA — much easier to hit with a thumb */
  .cta{
    display:flex;
    width:100%;
    margin-top:28px;
    padding:17px 24px;
    justify-content:center;
  }

  /* Compass is decorative: shrink it so it doesn't cost a
     full screen of scrolling */
  .instrument{max-width:290px;}

  /* ---- cards ---- */
  .bearing-card{padding:28px 22px 30px;}
  .bearing-deg{margin-bottom:16px;}
  .bearing-card h3{font-size:22px;margin-bottom:12px;}

  .board-card{padding:28px 22px 30px;}
  .board-photo{width:76px;height:76px;margin-bottom:18px;}
  .board-name{font-size:21px;}

  /* ---- about ---- */
  .about-grid{gap:30px;}
  .about-lede{font-size:20px;}

  /* ---- prosjekter ---- */
  .project-head{padding:22px;gap:14px;}
  .project-id{gap:11px;}
  .project-id h3{font-size:22px;}
  .project-body{padding:24px 22px;}
  .project-stat{padding:20px 22px;}
  .project-product{padding:22px;}
  .disclaimer{margin-top:22px;line-height:1.6;}

  /* ---- kontakt / panel ---- */
  .contact{gap:32px;}
  .panel{padding:26px 22px;}
  .contact-row{gap:18px;padding:14px 0;}

  /* ---- footer: stack instead of squeezing three columns ---- */
  footer{padding:24px 0 34px;}
  .footer-inner{
    flex-direction:column;
    align-items:flex-start;
    gap:11px;
    line-height:1.6;
  }
  /* The e-mail link is the only tappable thing down here */
  .footer-inner a{
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }
}


/* ---------- very narrow phones (iPhone SE, 320px) ---------- */
@media (max-width:360px){
  .wrap{padding:0 16px;}
  .nav-inner{padding:12px 16px;}
  .nav-right{padding:0 16px;}
  .wordmark{font-size:15px;}
  .bearing-card,
  .board-card{padding:24px 18px 26px;}
  .project-head,
  .project-product{padding:18px;}
  .project-body,
  .project-stat{padding:20px 18px;}
}


/* ============================================================
   LANDSCAPE PHONES — the viewport is short, so reclaim height
   ============================================================ */
@media (max-height:500px) and (orientation:landscape){
  nav{position:static;}          /* a sticky bar eats too much of a 430px-tall screen */
  .hero{min-height:auto;padding:28px 0 32px;}
  section{padding:40px 0;}
  .nav-right.is-open{max-height:none;}
}