/*
=========================================================
 MODEMAND MAGASIN
 REN CSS — FÆLLES FUNDAMENT
 ---------------------------------------------------------
 - Ingen Designrunde 2
 - Ingen Designrunde 3
 - Ingen gamle Designrunde 4-overrides
 - Header, desktop-nav, mobilmenu og footer defineres én gang
 - Breakpoints:
     1) max-width: 1050px  = tablet
     2) max-width: 700px   = mobil
     3) max-width: 390px   = små mobiler
     4) max-width: 365px   = ekstra små mobiler
=========================================================
*/

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Montserrat:wght@400;500;600;700&display=swap');


/* =========================================================
   1. DESIGNTOKENS
========================================================= */

:root{
  --paper:#F6F1E9;
  --paper-2:#EFE6DA;
  --sand:#E4D4BE;

  --brown:#3B2A22;
  --brown-soft:#705B4E;
  --brown-light:#806A58;

  --ink:#2D2520;
  --white:#FFFDFC;

  --line:rgba(59,42,34,.16);
  --line-light:rgba(59,42,34,.10);

  --serif:"DM Serif Display", Georgia, serif;
  --sans:"Montserrat", Arial, sans-serif;

  --max:1240px;
  --gutter:clamp(22px,4vw,64px);
}


/* =========================================================
   2. RESET / BASICS
========================================================= */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{
  display:block;
  max-width:100%;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input{
  font:inherit;
}

p,
h1,
h2,
h3{
  margin:0;
}

.wrap{
  width:min(calc(100% - (var(--gutter) * 2)), var(--max));
  margin-inline:auto;
}


/* =========================================================
   3. ACCESSIBILITY
========================================================= */

.skip{
  position:absolute;
  left:16px;
  top:-60px;
  z-index:999;
  padding:10px 14px;
  background:var(--brown);
  color:#fff;
}

.skip:focus{
  top:16px;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}


/* =========================================================
   4. TYPOGRAPHY
========================================================= */

h1,
h2,
h3{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.08;
  color:var(--brown);
}

h1{
  max-width:520px;
  font-size:clamp(40px,4vw,56px);
  letter-spacing:0;
}

h2{
  font-size:clamp(30px,2.8vw,40px);
  letter-spacing:0;
}

h3{
  font-size:clamp(22px,1.8vw,28px);
}

.eyebrow{
  margin-bottom:12px;
  color:#786354;
  font-family:var(--sans);
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  line-height:1.35;
  text-transform:uppercase;
}

.link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  width:max-content;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  line-height:1.3;
  text-transform:uppercase;
  border-bottom:1px solid currentColor;
  padding-bottom:3px;
}

.link:hover{
  opacity:.65;
}


/* =========================================================
   5. HEADER — FÆLLES FUNDAMENT
========================================================= */

header{
  position:relative;
  z-index:20;
  background:var(--paper);
}

.top{
  min-height:32px;
  padding:0 var(--gutter);
  border-bottom:1px solid var(--line);

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;

  color:var(--brown-soft);
  font-size:9px;
  font-weight:600;
  letter-spacing:.16em;
  line-height:1;
  text-transform:uppercase;
}

.brand{
  position:relative;

  width:min(calc(100% - (var(--gutter) * 2)), var(--max));
  min-height:92px;
  margin-inline:auto;

  display:flex;
  align-items:center;
  justify-content:center;
}

.brand > a{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.brand-name{
  display:inline-flex;
  align-items:baseline;

  font-family:var(--serif);
  font-size:clamp(36px,3.7vw,52px);
  font-weight:400;
  line-height:.85;
  letter-spacing:0;
  white-space:nowrap;
}

.logo-mode{
  color:var(--brown);
}

.logo-mand{
  margin-left:.055em;
  color:var(--brown-light);
}

.brand small{
  margin-top:10px;

  color:var(--brown-soft);
  font-family:var(--sans);
  font-size:8px;
  font-weight:700;
  letter-spacing:.20em;
  line-height:1;
  text-transform:uppercase;
}


/* =========================================================
   6. MENU-BUTTON
   Hidden on desktop, shown only on mobile.
========================================================= */

.toggle{
  display:none;

  border:1px solid rgba(59,42,34,.24);
  background:transparent;
  color:var(--brown);

  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  line-height:1;
  cursor:pointer;
}


/* =========================================================
   7. DESKTOP NAVIGATION
========================================================= */

nav{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.navin{
  width:min(calc(100% - (var(--gutter) * 2)), var(--max));
  min-height:48px;
  margin-inline:auto;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(20px,3vw,42px);
}

.navin a{
  display:block;
  white-space:nowrap;

  color:var(--brown);
  font-size:10px;
  font-weight:700;
  letter-spacing:.11em;
  line-height:1;
  text-transform:uppercase;
}

.navin a:hover{
  color:#9A806B;
}


/* =========================================================
   8. HERO
========================================================= */

.hero{
  padding:34px 0 52px;
}

.hero-grid{
  display:grid;
  grid-template-columns:58fr 42fr;
  gap:0;
  align-items:center;
}

.hero-copy{
  min-width:0;
  padding:60px 70px 60px 0;
}

.hero-copy h1{
  max-width:520px;
}

.lead{
  max-width:590px;
  margin-top:22px;

  color:#4D4038;
  font-size:16px;
  line-height:1.78;
}

.actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:22px;
  margin-top:30px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:44px;
  padding:12px 20px;

  border:1px solid transparent;

  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  line-height:1;
  text-transform:uppercase;
}

.btn.dark{
  background:var(--brown);
  color:#fff;
}

.btn.dark:hover{
  background:#564036;
}

.btn.light{
  background:var(--paper);
  color:var(--brown);
}


/* Hero visual / temporary editorial artwork */

.visual{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;
  overflow:hidden;

  display:flex;
  flex-direction:column;
  justify-content:space-between;

  padding:25px;

  background:
    linear-gradient(145deg,rgba(255,255,255,.18),transparent 48%),
    linear-gradient(120deg,#B9A38D 0%,#8C735F 52%,#5D4A3D 100%);

  color:#fff;
}

.visual::before{
  content:"";
  position:absolute;
  inset:8% 12% 8% 18%;

  border:1px solid rgba(255,255,255,.35);
  transform:rotate(-3deg);
}

.visual::after{
  content:"";
  position:absolute;

  width:58%;
  height:72%;
  right:8%;
  bottom:-12%;

  background:rgba(246,241,233,.18);
  border-radius:50% 50% 0 0;
  transform:rotate(8deg);
}

.visual b,
.visual span{
  position:relative;
  z-index:2;
  font-family:var(--sans);
}

.visual b{
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  line-height:1.4;
}

.visual span{
  font-size:9px;
  font-weight:700;
  letter-spacing:.20em;
}

/* MODEMAND – Hero-billede */

.hero .visual.hero-photo {
    position: relative;
    overflow: hidden;
}

/* Fjern gamle dekorative elementer */
.hero .visual.hero-photo::before,
.hero .visual.hero-photo::after {
    content: none !important;
}

/* Billedet */
.hero .visual.hero-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
/* =========================================================
   9. INTRO
========================================================= */

.intro{
  padding:76px 0 82px;
  background:var(--white);
}

.two{
  display:grid;
  grid-template-columns:minmax(280px,480px) minmax(0,1fr);
  gap:70px;
  align-items:center;
}

.intro .two > div{
  order:2;
  justify-self:end;
  max-width:560px;
}

.intro .two > p{
  order:1;
  max-width:500px;

  color:#493B34;
  font-size:16px;
  line-height:1.82;
}


/* =========================================================
   10. GENERAL SECTIONS
========================================================= */

.section,
.category{
  padding:60px 0;
}

.heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:38px;
}

.heading > div{
  min-width:0;
}

.heading .link,
.heading .note{
  flex:0 0 auto;
  margin-bottom:5px;
}

.note{
  color:var(--brown-soft);
  font-family:var(--sans);
  font-size:9px;
  font-weight:700;
  letter-spacing:.16em;
  line-height:1.4;
  text-transform:uppercase;
}


/* =========================================================
   TREND RADAR
   ========================================================= */

#trends{
    background:var(--off);
}

#trends .wrap{
    padding-top:60px;
    padding-bottom:48px;
}


/* ---------- Overskrift ---------- */

#trends .heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:40px;
    margin-bottom:30px;
}

#trends .heading > div:first-child{
    max-width:760px;
}

#trends .eyebrow{
    margin:0 0 12px;
}

#trends .heading h2{
    margin:0 0 6px;
    font-family:var(--serif);
    font-size:clamp(32px,3vw,42px);
    line-height:1.08;
    font-weight:400;
    color:var(--brown);
}

#trends .heading p:not(.eyebrow){
    margin:0;
    max-width:680px;
    font-family:var(--sans);
    font-size:15px;
    line-height:1.65;
    color:var(--brown2);
}

#trends .heading > .link{
    flex:0 0 auto;
    margin-bottom:5px;
}


/* ---------- Trend-grid ---------- */

.trendgrid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}


/* ---------- Trend-kort ---------- */

.trend-card{
    position:relative;
    min-width:0;
    padding:28px 26px 26px;
}

.trend-card + .trend-card{
    border-left:1px solid var(--line);
}


/* ---------- Nummer ---------- */

.trend-number{
    display:block;
    margin:0 0 15px;
    font-family:var(--sans);
    font-size:14px;
    line-height:1;
    font-weight:500;
    color:var(--brown);
}


/* ---------- Kategori-label ---------- */

.trend-label{
    display:block;
    margin:0 0 5px;
    font-family:var(--sans);
    font-size:13px;
    line-height:1.3;
    font-weight:500;
    letter-spacing:.02em;
    text-transform:uppercase;
    color:var(--brown2);
}


/* ---------- Trendtitel ---------- */

.trend-card h3{
    margin:0 0 11px;
    font-family:var(--serif);
    font-size:26px;
    line-height:1.08;
    font-weight:400;
    color:var(--brown);
}


/* ---------- Beskrivelse ---------- */

.trend-card p{
    margin:0;
    max-width:250px;
    font-family:var(--sans);
    font-size:15px;
    line-height:1.55;
    color:var(--brown2);
}


/* ---------- Link ---------- */

.trend-link{
    display:inline-block;
    margin-top:12px;
    font-family:var(--sans);
    font-size:13px;
    line-height:1.3;
    font-weight:500;
    color:var(--brown);
    text-decoration:none;
    border-bottom:1px solid transparent;
    transition:border-color .2s ease;
}

.trend-link:hover{
    border-bottom-color:currentColor;
}


/* =========================================================
   STIL – SEKS STILUNIVERSER
========================================================= */

.style-universes{
  padding-top:68px;
  padding-bottom:76px;
  background:var(--white);
}

.style-universes-heading{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(320px, 460px);
  gap:70px;
  align-items:end;
  margin-bottom:30px;
}

.style-universes-heading h2{
  margin:6px 0 0;
}

.style-universes-intro{
  margin:0 0 5px;
  max-width:460px;
  font-size:15px;
  line-height:1.7;
}


/* GRID */

.style-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}


/* KORT */

.style-card{
  position:relative;
  min-width:0;
  min-height:245px;
  padding:30px 30px 28px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}


/* lodrette skillelinjer */

.style-card:not(:nth-child(3n + 1)){
  border-left:1px solid var(--line);
}


/* vandret linje mellem række 1 og 2 */

.style-card:nth-child(n + 4){
  border-top:1px solid var(--line);
}


  /* Nummer-cirkler i stiluniverser */
.style-card .style-number{
  display:flex !important;
  align-items:center;
  justify-content:center;

  width:32px;
  height:32px;
  min-width:32px;
  min-height:32px;

  margin:0 0 22px 0;

  border-radius:50%;
  background:#EFE6DA !important;
  color:#3B2A22 !important;

  font-family:var(--sans);
  font-size:10px;
  font-weight:700;
  line-height:1;

  padding:0;
  }


/* OVERSKRIFT */

.style-card h3{
  margin:0 0 10px;
  font-size:clamp(23px, 2vw, 29px);
  line-height:1.08;
}


/* BESKRIVELSE */

.style-card p{
  margin:0;
  max-width:340px;
  font-size:14px;
  line-height:1.65;
}


/* LINK */

.style-card .link{
  margin-top:auto;
  padding-top:28px;
  font-family:var(--sans);
  font-size:10px;
  font-weight:700;
  line-height:1;
  letter-spacing:.10em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--brown);
  border-bottom:1px solid currentColor;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:900px){

  .style-universes{
    padding-top:56px;
    padding-bottom:62px;
  }

  .style-universes-heading{
    grid-template-columns:1fr;
    gap:18px;
    margin-bottom:26px;
  }

  .style-universes-intro{
    max-width:600px;
  }

  .style-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .style-card{
    min-height:225px;
    padding:27px 25px 25px;
  }

  /* nulstil desktop-linjer */
  .style-card:not(:nth-child(3n + 1)){
    border-left:0;
  }

  .style-card:nth-child(n + 4){
    border-top:0;
  }

  /* tablet: 2 kolonner */
  .style-card:nth-child(even){
    border-left:1px solid var(--line);
  }

  .style-card:nth-child(n + 3){
    border-top:1px solid var(--line);
  }
}


/* =========================================================
   MOBIL – 360 / 375 PX
========================================================= */

@media (max-width:600px){

  .style-universes{
    padding-top:46px;
    padding-bottom:52px;
  }

  .style-universes-heading{
    gap:14px;
    margin-bottom:22px;
  }

  .style-universes-heading h2{
    font-size:clamp(30px, 10vw, 38px);
  }

  .style-universes-intro{
    font-size:14px;
    line-height:1.6;
  }

  .style-grid{
    grid-template-columns:1fr;
  }

  .style-card{
    min-height:0;
    padding:25px 0 24px;
  }

  /* fjern alle lodrette linjer */
  .style-card:nth-child(even),
  .style-card:not(:nth-child(3n + 1)){
    border-left:0;
  }

  /* alle kort efter det første får toplinje */
  .style-card:nth-child(n + 2){
    border-top:1px solid var(--line);
  }

  /* Nummer-cirkler i stiluniverser */
.style-card .style-number{
  display:flex !important;
  align-items:center;
  justify-content:center;

  width:32px;
  height:32px;
  min-width:32px;
  min-height:32px;

  margin:0 0 22px 0;

  border-radius:50%;
  background:#D9C3A7 !important;
  color:#3B2A22 !important;

  font-family:var(--sans);
  font-size:10px;
  font-weight:700;
  line-height:1;

  padding:0;
  }

  .style-card h3{
    margin-bottom:8px;
    font-size:25px;
  }

  .style-card p{
    max-width:none;
    font-size:14px;
    line-height:1.6;
  }

  .style-card .link{
    margin-top:20px;
    padding-top:0;
  }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1000px){

    #trends .wrap{
        padding-top:60px;
        padding-bottom:60px;
    }

    #trends .heading{
        margin-bottom:30px;
    }

    .trendgrid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .trend-card{
        padding:30px 26px;
    }

    /* Fjern desktop-skillelinjer */
    .trend-card + .trend-card{
        border-left:0;
    }

    /* Lodret skillelinje mellem kolonner */
    .trend-card:nth-child(even){
        border-left:1px solid var(--line);
    }

    /* Vandret skillelinje mellem rækker */
    .trend-card:nth-child(n+3){
        border-top:1px solid var(--line);
    }

    .trend-card p{
        max-width:320px;
    }
}


/* =========================================================
   MOBIL ≤ 700 PX
   ========================================================= */

@media (max-width:700px){

    #trends .wrap{
        padding-top:48px;
        padding-bottom:48px;
    }

    #trends .heading{
        display:block;
        margin-bottom:26px;
    }

    #trends .heading h2{
        font-size:32px;
        line-height:1.08;
        margin-bottom:8px;
    }

    #trends .heading p:not(.eyebrow){
        font-size:14px;
        line-height:1.6;
    }

    #trends .heading > .link{
        display:inline-block;
        margin-top:18px;
        margin-bottom:0;
    }


    /* Ét trendkort pr. række */

    .trendgrid{
        display:block;
    }

    .trend-card{
        display:grid;
        grid-template-columns:36px minmax(0,1fr);
        column-gap:12px;
        padding:24px 0;
        border-left:0 !important;
    }

    .trend-card + .trend-card{
        border-top:1px solid var(--line);
    }


    /* Nummer i venstre kolonne */

    .trend-number{
        grid-column:1;
        grid-row:1 / span 4;
        margin:3px 0 0;
        font-size:12px;
    }


    /* Indhold i højre kolonne */

    .trend-label,
    .trend-card h3,
    .trend-card p,
    .trend-link{
        grid-column:2;
    }

    .trend-label{
        margin-bottom:4px;
        font-size:11px;
    }

    .trend-card h3{
        margin-bottom:10px;
        font-size:24px;
    }

    .trend-card p{
        max-width:none;
        font-size:14px;
        line-height:1.6;
    }

    .trend-link{
        margin-top:13px;
        font-size:12px;
    }
}


/* =========================================================
   SMÅ MOBILER ≤ 390 PX
   ========================================================= */

@media (max-width:390px){

    #trends .wrap{
        padding-top:42px;
        padding-bottom:42px;
    }

    #trends .heading{
        margin-bottom:22px;
    }

    #trends .heading h2{
        font-size:29px;
    }

    .trend-card{
        grid-template-columns:31px minmax(0,1fr);
        column-gap:10px;
        padding:22px 0;
    }

    .trend-card h3{
        font-size:22px;
    }
}


/* =========================================================
   MEGET SMÅ MOBILER ≤ 365 PX
   ========================================================= */

@media (max-width:365px){

    #trends .heading h2{
        font-size:27px;
    }

    .trend-card{
        grid-template-columns:28px minmax(0,1fr);
        column-gap:8px;
    }

    .trend-number{
        font-size:11px;
    }

    .trend-card h3{
        font-size:21px;
    }

    .trend-card p{
        font-size:13.5px;
    }
}

/* =========================================================
   12. FEATURE / UGENTLIGT
========================================================= */

.feature{
  padding:0;
  background:var(--brown);
  color:#E2D1BF;
}

.featuregrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:500px;
}

.featurepic{
  position:relative;
  min-height:500px;
  overflow:hidden;

  display:flex;
  align-items:flex-end;

  padding:28px;

  background:
    linear-gradient(135deg,rgba(255,255,255,.08),transparent 50%),
    linear-gradient(145deg,#8B7765,#40332C);
}

.featurepic::before{
  content:"";
  position:absolute;
  inset:11%;

  border:1px solid rgba(255,255,255,.28);
  transform:rotate(-4deg);
}

.featurepic::after{
  content:"";
  position:absolute;

  width:60%;
  height:78%;
  left:22%;
  bottom:-24%;

  border-radius:50%;
  background:rgba(246,241,233,.13);
}

.featurepic span{
  position:relative;
  z-index:2;

  color:#fff;
  font-size:9px;
  font-weight:700;
  letter-spacing:.20em;
}

.feature article{
  display:flex;
  flex-direction:column;
  justify-content:center;

  padding:60px clamp(35px,6vw,85px);
}

.feature h2{
  max-width:550px;
  color:#E2D1BF;
}

.feature .eyebrow{
  color:#BCA48E;
}

.feature article > p:not(.eyebrow){
  max-width:530px;
  margin-top:22px;

  color:#D7C5B3;
  font-size:16px;
  line-height:1.82;
}

.feature ol{
  margin:22px 0 30px;
  padding-left:20px;

  color:#D4C1AE;
  font-size:15px;
  line-height:1.8;
}

.feature li + li{
  margin-top:5px;
}


/* =========================================================
   13. MODEMANDS UDVALG / FUND
========================================================= */

.sand{
  background:var(--paper-2);
}

.fundgrid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.fundgrid article{
  background:var(--white);
  border:1px solid var(--line-light);
}

.prod{
  position:relative;
  aspect-ratio:4 / 3;
  overflow:hidden;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
    linear-gradient(135deg,#D9C7B2,#B8A18B);

  color:rgba(59,42,34,.62);
}

.prod::after{
  content:"";
  position:absolute;
  inset:9%;
  border:1px solid rgba(59,42,34,.18);
}

.prod b{
  position:absolute;
  z-index:2;
  top:14px;
  left:16px;

  font-size:10px;
  letter-spacing:.12em;
}

.prod small{
  position:relative;
  z-index:2;

  font-size:8px;
  font-weight:700;
  letter-spacing:.12em;
}

.pad{
  padding:22px 22px 25px;
}

.pad h3{
  margin-bottom:11px;
  color:#3F3028;
}

.pad > p:not(.eyebrow){
  margin-bottom:18px;
  color:#4F423A;
  font-size:14px;
  line-height:1.72;
}


/* =========================================================
   14. MODEMAND'S PICKS
========================================================= */

.picks{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
  gap:28px;
}

.pickmain{
  background:var(--white);
  border:1px solid var(--line);
}

.pickpic{
  position:relative;
  aspect-ratio:16 / 9;
  overflow:hidden;

  display:flex;
  align-items:flex-end;

  padding:22px;

  background:
    linear-gradient(135deg,rgba(255,255,255,.15),transparent 50%),
    linear-gradient(140deg,#B5A08B,#705A4A);
}

.pickpic::after{
  content:"";
  position:absolute;
  inset:10%;
  border:1px solid rgba(255,255,255,.30);
}

.pickpic span{
  position:relative;
  z-index:2;

  color:#fff;
  font-size:9px;
  font-weight:700;
  letter-spacing:.18em;
}

.picklist{
  border-top:1px solid var(--line);
}

.picklist a{
  display:grid;
  grid-template-columns:35px 1fr auto;
  gap:14px;
  align-items:center;

  min-height:78px;

  border-bottom:1px solid var(--line);
}

.picklist a > span{
  color:#9A806B;
  font-size:10px;
  font-weight:600;
  letter-spacing:.10em;
}

.picklist strong{
  color:#3F3028;
  font-family:var(--serif);
  font-size:23px;
  font-weight:400;
  line-height:1.1;
}

.picklist em{
  color:var(--brown-soft);
  font-size:9px;
  font-style:normal;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.picklist a:hover strong{
  color:#9A806B;
}


/* =========================================================
   15. KATEGORIER / TØJ / SKO / ACCESSORIES
========================================================= */

.category{
  background:var(--white);
}

.catgrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
}

.catgrid a{
  position:relative;

  min-height:175px;
  padding:25px 28px 25px 0;

  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
}

.catgrid a:nth-child(3n+2),
.catgrid a:nth-child(3n+3){
  padding-left:28px;
}

.catgrid a:nth-child(3n){
  border-right:0;
}

.catgrid span{
  width:24px;
  height:24px;
  margin-bottom:24px;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#806A58;
  font-size:18px;
  font-weight:400;
  line-height:1;
}

.catgrid h3{
  margin-bottom:9px;
  color:#3F3028;
}

.catgrid p{
  max-width:300px;
  color:#51433B;
  font-size:14px;
  line-height:1.72;
}

.catgrid a:hover h3{
  color:#9A806B;
}


/* =========================================================
   16. GUIDES
========================================================= */

.guidegrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.guidegrid article{
  background:var(--white);
  border:1px solid var(--line);
}

.guidepic{
  position:relative;
  aspect-ratio:4 / 2.45;
  overflow:hidden;

  display:flex;
  align-items:flex-end;

  padding:20px;

  background:linear-gradient(140deg,#D1BFA9,#8C7664);
}

.guidepic::after{
  content:"";
  position:absolute;
  inset:10%;
  border:1px solid rgba(255,255,255,.32);
}

.guidepic span{
  position:relative;
  z-index:2;

  color:#fff;
  font-size:9px;
  font-weight:700;
  letter-spacing:.17em;
}

.guidegrid h3{
  font-size:25px;
}


/* =========================================================
   17. FILOSOFI
========================================================= */

.philosophy{
  padding:82px 0;
  background:var(--brown);
  color:#E2D1BF;
}

.philosophy-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(260px,.65fr);
  gap:80px;
  align-items:end;
}

.philosophy h2{
  max-width:720px;
  color:#E2D1BF;
  font-size:clamp(32px,3.3vw,42px);
  letter-spacing:0;
}

.philosophy h2 em{
  color:#BFA894;
  font-style:normal;
}

.philosophy-grid > div:last-child p{
  max-width:390px;
  color:#D8C8B8;
  font-size:16px;
  line-height:1.82;
}

.philosophy-grid span{
  display:block;
  margin-top:25px;

  color:#CDB8A4;
  font-size:9px;
  font-weight:700;
  letter-spacing:.20em;
}


/* =========================================================
   18. NEWSLETTER
========================================================= */

.newsletter{
  padding:68px 0;
  background:var(--paper-2);
}

.newsletterin{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}

.newsletter h2{
  margin-bottom:10px;
}

.newsletter p:not(.eyebrow){
  color:#625249;
  font-size:14px;
}

.newsletter .btn{
  flex:0 0 auto;
}

/* =========================================================
   19. SEARCH FOUNDATION
========================================================= */

.search{
  padding-top:52px;
  padding-bottom:58px;
}

.search .eyebrow{
  margin-bottom:12px;
}

.search h2{
  margin-bottom:28px;
  font-size:clamp(30px, 3vw, 38px);
  line-height:1.05;
}

.search-box{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  max-width:760px;
}

.search-box input{
  min-width:0;
  height:48px;
  padding:0 16px;
  border:1px solid var(--line);
  background:var(--white);
  color:var(--ink);
  font:500 13px/1 var(--sans);
  outline:none;
}

.search-box input:focus{
  border-color:var(--brown-soft);
}

.search-box button{
  height:48px;
  padding:0 22px;
  border:1px solid var(--brown);
  background:var(--brown);
  color:#fff;
  font:700 10px/1 var(--sans);
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
}

.search-box button:hover{
  background:#564036;
}

/* =========================================================
   20. FOOTER
========================================================= */

footer{
  background:#2C211C;
  color:#fff;
}

.foot{
  display:grid;
  grid-template-columns:1.5fr repeat(3,1fr);
  gap:50px;
  padding:58px 0 50px;
}

.foot strong,
.footer-logo{
  display:inline-flex;
  align-items:baseline;

  font-family:var(--serif);
  font-size:30px;
  font-weight:400;
  line-height:.9;
  white-space:nowrap;
}

/*
 If the current PHP still outputs plain <strong>MODEMAND</strong>,
 the gradient provides the same two-tone visual treatment.
 If the PHP later uses .footer-logo with .logo-mode/.logo-mand,
 those spans take precedence.
 */
.foot > div:first-child > strong{
  color:transparent;
  background:linear-gradient(
    90deg,
    #E2D1BF 0%,
    #E2D1BF 47%,
    #A58D79 53%,
    #A58D79 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
}

.footer-logo .logo-mode{
  color:#E2D1BF;
}

.footer-logo .logo-mand{
  margin-left:.055em;
  color:#A58D79;
}

.foot > div:first-child p{
  margin-top:12px;
  color:rgba(255,255,255,.58);
  font-size:11px;
}

.foot h3{
  margin-bottom:16px;

  color:#D4C0AC;
  font-family:var(--sans);
  font-size:9px;
  font-weight:700;
  letter-spacing:.17em;
  text-transform:uppercase;
}

.foot a{
  display:block;
  width:max-content;
  margin:0 0 8px;

  color:rgba(255,255,255,.72);
  font-size:11px;
}

.foot a:hover{
  color:#fff;
}

.bottom{
  min-height:52px;

  border-top:1px solid rgba(255,255,255,.14);

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;

  color:rgba(255,255,255,.45);
  font-size:8px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
}


/* =========================================================
   21. TABLET — MAX 1050 PX
========================================================= */

@media (max-width:1050px){

  :root{
    --gutter:28px;
  }

  .hero-grid{
    grid-template-columns:1fr;
    gap:36px;
  }

  .hero-copy{
    max-width:720px;
    padding:45px 0 0;
  }

  .visual{
    width:min(100%,520px);
    justify-self:center;
  }

  .trendgrid{
    grid-template-columns:repeat(2,1fr);
  }

  .trendgrid article:nth-child(2){
    border-right:0;
  }

  .trendgrid article:nth-child(3),
  .trendgrid article:nth-child(4){
    border-top:1px solid var(--line);
  }

  .fundgrid{
    grid-template-columns:repeat(2,1fr);
  }

  .picks{
    grid-template-columns:1fr;
  }

  .catgrid{
    grid-template-columns:repeat(2,1fr);
  }

  .catgrid a:nth-child(3n){
    border-right:1px solid var(--line);
  }

  .catgrid a:nth-child(2n){
    border-right:0;
  }

  .catgrid a:nth-child(3n+2),
  .catgrid a:nth-child(3n+3){
    padding-left:0;
  }

  .catgrid a:nth-child(2n+2){
    padding-left:28px;
  }

  .guidegrid{
    grid-template-columns:1fr 1fr;
  }

  .philosophy-grid{
    grid-template-columns:1fr;
    gap:40px;
  }

  .foot{
    grid-template-columns:1.3fr 1fr 1fr;
  }

  .foot > div:last-child{
    grid-column:2 / 4;
  }
}


/* =========================================================
   22. MOBILE — MAX 700 PX
========================================================= */

@media (max-width:700px){

  :root{
    --gutter:20px;
  }

  body{
    font-size:14px;
  }

  .top{
    min-height:28px;
    font-size:7px;
    letter-spacing:.11em;
  }

  .top div:last-child{
    display:none;
  }

  /*
   Header geometry:
   logo is centered independently;
   MENU is anchored to the right.
  */
  .brand{
    width:calc(100% - 40px);
    min-height:76px;
    padding-right:58px;
  }

  .brand > a{
    position:absolute;
    left:50%;
    transform:translateX(-50%);

    max-width:calc(100% - 78px);
  }

  .brand-name{
    font-size:clamp(28px,8.6vw,36px);
    line-height:.86;
    letter-spacing:-.012em;
  }

  .brand small{
    margin-top:7px;
    font-size:6px;
    letter-spacing:.16em;
  }

  .toggle{
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);

    width:52px;
    min-width:52px;
    height:32px;
    padding:0 6px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(59,42,34,.24);
    background:rgba(246,241,233,.96);
    color:var(--brown);

    font-size:8px;
    letter-spacing:.10em;
    line-height:1;
    z-index:3;
  }

  /*
   Desktop nav is hidden.
   The JS in index.php toggles .open on nav.
  */
  nav{
    display:none;
  }

  nav.open{
    display:block;
  }

  .navin{
    width:calc(100% - 40px);
    min-height:0;
    padding:6px 0 10px;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
  }

  .navin a{
    min-height:40px;

    display:flex;
    align-items:center;

    padding:9px 4px;

    border-bottom:1px solid var(--line);

    font-size:8px;
    letter-spacing:.10em;
  }

  .navin a:nth-child(odd){
    border-right:1px solid var(--line);
    padding-right:12px;
  }

  .navin a:nth-child(even){
    padding-left:12px;
  }

  .navin a:last-child{
    grid-column:1 / -1;

    justify-content:center;

    border-right:0;

    padding-left:0;
    padding-right:0;
  }


  /* ---------- Mobile typography ---------- */

  h1{
    max-width:none;
    font-size:40px;
  }

  h2{
    font-size:32px;
  }

  h3{
    font-size:23px;
  }


  /* ---------- Mobile hero ---------- */

  .hero{
    padding:24px 0 30px;
  }

  .hero-grid{
    min-height:0;
    gap:28px;
  }

  .hero-copy{
    padding:8px 0;
  }

  .lead{
    margin-top:17px;
    font-size:16px;
  }

  .actions{
    margin-top:23px;
    gap:16px;
  }

  .visual{
    width:100%;
    min-height:300px;
    aspect-ratio:1 / 1;
  }


  /* ---------- Mobile intro ---------- */

  .intro{
    padding:55px 0;
  }

  .two,
  .intro .two{
    grid-template-columns:1fr;
    gap:22px;
  }

  .intro .two > div,
  .intro .two > p{
    order:initial;
    justify-self:auto;
    max-width:none;
  }

  .two > p,
  .intro .two > p{
    font-size:14px;
  }


  /* ---------- Mobile sections ---------- */

  .section,
  .category{
    padding:54px 0;
  }

  .heading{
    display:block;
    margin-bottom:28px;
  }

  .heading .link,
  .heading .note{
    margin-top:18px;
    margin-bottom:0;
  }


  /* ---------- Mobile trends ---------- */

  .trendgrid{
    grid-template-columns:1fr;
  }

  .trendgrid article,
  .trendgrid article + article{
    padding:22px 0;
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .trendgrid article:last-child{
    border-bottom:0;
  }

  .trendgrid article:nth-child(3),
  .trendgrid article:nth-child(4){
    border-top:0;
  }

  .trendgrid article p:last-child{
    font-size:15px;
  }


  /* ---------- Mobile feature ---------- */

  .featuregrid{
    grid-template-columns:1fr;
  }

  .featurepic{
    min-height:300px;
  }

  .feature article{
    padding:48px var(--gutter) 55px;
  }


  /* ---------- Mobile funds ---------- */

  .fundgrid{
    grid-template-columns:1fr;
  }

  .fundgrid .pad > p:not(.eyebrow){
    font-size:15px;
  }


  /* ---------- Mobile picks ---------- */

  .picks{
    gap:20px;
  }

  .picklist a{
    grid-template-columns:30px 1fr;
  }

  .picklist strong{
    font-size:20px;
  }

  .picklist em{
    display:none;
  }


  /* ---------- Mobile categories / guides ---------- */

  .catgrid,
  .guidegrid{
    grid-template-columns:1fr;
  }

  .catgrid a,
  .catgrid a:nth-child(2n),
  .catgrid a:nth-child(3n),
  .catgrid a:nth-child(3n+2),
  .catgrid a:nth-child(3n+3){
    padding:22px 0;
    border-right:0;
  }

  .catgrid a:last-child{
    border-bottom:0;
  }

  .catgrid p{
    font-size:15px;
  }

  .guidegrid{
    gap:18px;
  }


  /* ---------- Mobile philosophy ---------- */

  .philosophy{
    padding:65px 0;
  }

  .philosophy-grid{
    gap:30px;
  }


  /* ---------- Mobile newsletter ---------- */

  .newsletterin{
    display:block;
  }

  .newsletter .btn{
    margin-top:24px;
  }


  /* ---------- Mobile footer ---------- */

  .foot{
    grid-template-columns:1fr 1fr;
    gap:35px 25px;
    padding:48px 0 40px;
  }

  .foot > div:first-child{
    grid-column:1 / -1;
  }

  .foot > div:last-child{
    grid-column:auto;
  }

  .bottom{
    min-height:60px;

    align-items:flex-start;
    justify-content:center;
    flex-direction:column;

    gap:5px;
    padding:12px 0;
  }

  .footer-logo,
  .foot strong{
    font-size:28px;
  }
}


/* =========================================================
   23. SMALL MOBILES — MAX 390 PX
========================================================= */

@media (max-width:390px){

  :root{
    --gutter:18px;
  }

  .brand{
    width:calc(100% - 36px);
    padding-right:55px;
  }

  .brand > a{
    max-width:calc(100% - 72px);
  }

  .brand-name{
    font-size:29px;
  }

  .brand small{
    font-size:5.5px;
    letter-spacing:.13em;
  }

  .toggle{
    width:49px;
    min-width:49px;
    height:30px;
    font-size:7px;
  }

  .navin{
    width:calc(100% - 36px);
  }

  h1{
    font-size:36px;
  }

  h2{
    font-size:30px;
  }

  .hero-copy{
    padding-top:4px;
  }

  .lead{
    font-size:15px;
  }

  .actions{
    gap:13px;
  }

  .btn{
    min-height:42px;
    padding:11px 15px;
    font-size:9px;
  }

  .visual{
    min-height:0;
  }
}


/* =========================================================
   24. EXTRA SMALL MOBILES — MAX 365 PX
========================================================= */

@media (max-width:365px){

  .brand{
    padding-right:53px;
  }

  .brand > a{
    max-width:calc(100% - 68px);
  }

  .brand-name{
    font-size:27px;
  }

  .brand small{
    font-size:5.2px;
  }

  .toggle{
    width:47px;
    min-width:47px;
    height:29px;
    font-size:6.8px;
  }

  h1{
    font-size:34px;
  }

  h2{
    font-size:29px;
  }

  .lead{
    font-size:14px;
  }

  .navin a{
    font-size:7.5px;
  }
}


/* =========================================================
   25. ANCHOR TARGET
========================================================= */

.anchor-target{
  position:relative;
  display:block;
  height:0;
  scroll-margin-top:20px;
}