@font-face{
	font-family:'FS Siena1';
	src:url('https://marten.se/wp-content/themes/marten/assets/fonts/fs-siena/FSSiena-ExtraLight.woff') format('woff');
	font-weight:200;font-style:normal;
}

@font-face{
	font-family:'FS Siena1';
	src:url('https://marten.se/wp-content/themes/marten/assets/fonts/fs-siena/dexter-font-01.woff2') format('woff2');
	font-weight:300;
	font-style:normal;
}
@font-face{
	font-family:'FS Siena1';
	src:url('https://marten.se/wp-content/themes/marten/assets/fonts/fs-siena/dexter-font-05.woff2') format('woff2');
	font-weight:500;
	font-style:normal;
}
@font-face{
    font-family:'FS Siena1';
    src:url('https://marten.se/wp-content/themes/marten/assets/fonts/fs-siena/dexter-font-03.woff2') format('woff2');
    font-weight:400;
    font-style:normal;
}
@font-face{
    font-family:'FS Siena1';
    src:url('https://marten.se/wp-content/themes/marten/assets/fonts/fs-siena/dexter-font-07.woff2') format('woff2');
    font-weight:600;
    font-style:normal;
}

:root{
  --dg:#1c2526;
  --mg:#ccd4c5;
  --lg:#e2e6df;
  --ice:#eff2f7;
  --brick:#c26d55;
  --ft:'FS Siena1',Georgia,serif;
  --mx:80px;
  --page-mx:max(var(--mx), calc((100vw - 1920px) / 2));
  --col:720px;
}

body{
	overflow-x:hidden;
}
html{scroll-behavior:smooth;
	scrollbar-gutter:stable;
}

.mji-wrap{
	font-size:16px;
	background:#ffffff;
	color:var(--dg);
	font-family:var(--ft);
	font-weight:300;
	margin:0;
	margin-top: var(--nav-hh);
}
.mji-wrap a:hover{
	text-decoration: none;
}
footer#colophon,
.blog footer#colophon{
	margin-top: 0;
}

/* shared with the article template — do not fork */
.mj-eyebrow{
	font-size:13px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--brick);display:inline-block;text-decoration:none;transition:opacity .2s;
	line-height: 1.1;
}
a.mj-eyebrow:hover{opacity:0.7;}

.mji-section-label{
	font-size:12px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--brick);display:block;margin-bottom:26px;
	line-height: 1.1;
}

/* ═════════ 1 · MASTHEAD ═════════ */
/* masthead sits on white, not dark green. The nav above is already an 80px dark
   band, so a dark masthead read as one heavy slab and made the step into the ice
   recency band abrupt. Split horizontally — title left, orientation right — rather
   than stacked, which halves the height without cutting a word. */
.mji-masthead{background:var(--ice);padding:80px var(--page-mx) 68px;position:relative;}
.mji-masthead-inner{max-width:1920px;margin:0 auto;display:grid;grid-template-columns:max-content 1fr;gap:0 96px;align-items:start;}
.mji-masthead h1{font-size:clamp(34px,3.4vw,48px);font-weight:200;line-height:1.02;letter-spacing:-0.025em;color:var(--dg);padding-top:0;}
.mji-masthead-inner{grid-template-columns:minmax(auto,3fr) 5fr;}
.mji-masthead-kicker{
	display:block;font-size:12px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--brick);margin-bottom:22px;
	line-height: 1.1;
}
.mji-masthead-text{max-width:640px;}
.mji-masthead-text p:first-child{font-size:22px;font-weight:200;line-height:1.5;color:var(--dg);margin-bottom:1.1em;}
.mji-masthead p{font-size:18px;font-weight:300;line-height:1.7;color:rgba(28,37,38,0.72);margin-bottom:1em;}
.mji-masthead p:last-of-type{margin-bottom:0;}

/* ═════════ 2 · RECENT — narrow band, one to three posts ═════════ */
/* masthead is dark green with ice text, continuous with the dark nav above it, so
   the top of the page reads as one band. Ice then carries recency and the featured
   pins; white carries reviews and the library; light green appears once, at the
   onward step. */
.mji-recent{background:var(--ice);border-top:1px solid rgba(28,37,38,0.12);border-bottom:1px solid rgba(28,37,38,0.12);}
/* horizontal padding belongs on the section, not on the max-width element — putting
   both on .mji-recent-inner meant the padding ate into the 1920px cap above 1920,
   collapsing the band to 400px at 3440. Every other section follows this pattern. */
.mji-recent{padding:0 var(--page-mx);}
.mji-recent-inner{max-width:1920px;margin:0 auto;padding:44px 0 48px;}
.mji-recent-list{display:grid;grid-template-columns:repeat(3,1fr);gap:0 56px;}
.mji-recent-list[data-count="1"]{grid-template-columns:1fr;}
.mji-recent-list[data-count="2"]{grid-template-columns:repeat(2,1fr);}
/* the divider sits in the grid gap as a pseudo-element rather than as padding plus
   a border on the item — padding would narrow the first column and, because the
   media box is locked to 16:9, make its image shorter than its neighbour's. */
.mji-recent-item{display:flex;flex-direction:column;gap:12px;text-decoration:none;position:relative;}
.mji-recent-item + .mji-recent-item::before{content:"";position:absolute;left:-28px;top:0;bottom:0;width:1px;background:rgba(28,37,38,0.12);}
.mji-recent-item h2{font-size:clamp(21px,1.9vw,27px);font-weight:200;line-height:1.15;letter-spacing:-0.01em;color:var(--dg);transition:color .25s;}
.mji-recent-item:hover h2{color:var(--brick);}
.mji-meta{
	font-size:12px;font-weight:400;letter-spacing:0.08em;text-transform:uppercase;color:rgba(28,37,38,0.5);
	line-height: 1.1;
}

.mji-recent-media{aspect-ratio:16/9;overflow:hidden;background:var(--mg);margin-bottom:18px;}
.mji-recent-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.65s ease;}
.mji-recent-item:hover .mji-recent-media img{transform:scale(1.03);}

/* ═════════ 3 · REVIEWS BY MODEL ═════════ */
.mji-reviews{background:#ffffff;padding:104px var(--page-mx) 96px;}
.mji-reviews-inner{max-width:1920px;margin:0 auto;}
.mji-reviews-head{max-width:var(--col);margin-bottom:64px;}
.mji-reviews-head h2{font-size:clamp(30px,3vw,42px);font-weight:200;line-height:1.06;letter-spacing:-0.02em;margin-bottom:20px;}
.mji-reviews-head p{font-size:17px;line-height:1.7;color:rgba(28,37,38,0.72);}
.mji-model{display:grid;grid-template-columns:280px 1fr;gap:0 64px;padding:36px 0;border-top:1px solid rgba(28,37,38,0.12);}
.mji-model:last-child{border-bottom:1px solid rgba(28,37,38,0.12);}
.mji-model-name{font-size:23px;font-weight:300;letter-spacing:-0.01em;line-height:1.2;}
.mji-model-name a{color:var(--dg);text-decoration:none;transition:color .25s;}
.mji-model-name a:hover{color:var(--brick);}
.mji-model-count{display:inline-block;font-size:12px;font-weight:400;letter-spacing:0.08em;text-transform:uppercase;color:rgba(28,37,38,0.45);margin-top:8px;text-decoration:none;transition:color .25s;}
a.mji-model-count:hover{color:var(--brick);}
.mji-review-list{display:flex;flex-direction:column;}
.mji-review{display:grid;grid-template-columns:96px 1fr 260px;gap:0 26px;align-items:center;padding:12px 0;text-decoration:none;border-bottom:1px solid rgba(28,37,38,0.08);}
.mji-review-thumb{width:96px;aspect-ratio:3/2;overflow:hidden;background:var(--ice);display:block;}
.mji-review-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.65s ease;}
.mji-review:hover .mji-review-thumb img{transform:scale(1.03);}
.mji-review:last-child{border-bottom:0;}
.mji-review-title{font-size:18px;font-weight:300;line-height:1.35;color:var(--dg);transition:color .25s;}
.mji-review:hover .mji-review-title{color:var(--brick);}
.mji-review-source{font-size:13px;font-weight:400;letter-spacing:0.04em;color:rgba(28,37,38,0.55);text-align:right;}

/* mobile only: each model group collapses so the reviews block can be scanned by
   model name without scrolling through every review. Desktop stays fully open — it
   has the room and this block carries the journal's organic search value, so hiding
   it there would cut against the reason it exists. Details are in the DOM either
   way; the collapse is presentational and enhanced in JS. */
/* the toggle button is transparent on desktop — it wraps the model name but adds
   nothing visually and does nothing, since collapse is bound only below 767. The
   chevron is hidden until then. */
.mji-model-toggle{display:inline;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:default!important;}
.mji-model-chevron{display:none;}
@media(max-width:767px){
  .mji-model-name{width:100%;}
  .mji-model-name button.mji-model-toggle{display:flex;justify-content:space-between;align-items:center;
    width:100%;background:none;border:0;padding:0;margin:0;cursor:pointer!important;font:inherit;color:var(--dg);
    text-align:left;letter-spacing:-0.01em;}
  .mji-model-chevron{display:block;flex:none;width:15px;height:15px;margin-left:16px;color:var(--brick);}
  .mji-model-chevron .mji-pm-v{transition:opacity .3s ease, transform .3s ease;transform-origin:center;}
  .mji-model[data-open="true"] .mji-pm-v{opacity:0;transform:scaleY(0);}
  .mji-model[data-open="false"] .mji-review-list{display:none;}
  .mji-model[data-open="true"] .mji-review-list{animation:mji-rise .4s cubic-bezier(0.22,1,0.36,1) both;}
}

/* ═════════ 4 · FEATURED — manual pins ═════════ */
.mji-featured{background:var(--ice);padding:96px var(--page-mx);}
.mji-featured-inner{max-width:1920px;margin:0 auto;}
.mji-featured-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;}
.mji-feature{text-decoration:none;display:flex;flex-direction:column;}
.mji-feature-media{aspect-ratio:4/3;overflow:hidden;background:var(--mg);margin-bottom:26px;}
.mji-feature-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.65s ease;}
.mji-feature:hover .mji-feature-media img{transform:scale(1.03);}
.mji-feature .mj-eyebrow{margin-bottom:14px;}
.mji-feature h3{font-size:clamp(22px,2vw,29px);font-weight:200;line-height:1.14;letter-spacing:-0.01em;color:var(--dg);margin-bottom:14px;transition:color .25s;}
.mji-feature:hover h3{color:var(--brick);}
.mji-feature p{font-size:16px;line-height:1.65;color:rgba(28,37,38,0.7);margin-bottom:16px;}

/* ═════════ 5 · LIBRARY ═════════ */
.mji-library{background:#ffffff;padding:104px var(--page-mx) 112px;}
.mji-library-inner{max-width:1920px;margin:0 auto;}
.mji-library-head{max-width:var(--col);margin-bottom:44px;}
.mji-library-head h2{font-size:clamp(30px,3vw,42px);font-weight:200;line-height:1.06;letter-spacing:-0.02em;margin-bottom:20px;}
.mji-library-head p{font-size:17px;line-height:1.7;color:rgba(28,37,38,0.72);}
/* filter language matches the representatives page — text buttons, brick underline
   that scales in from the left, horizontal scroll rather than wrap at narrow widths */
.mji-filters{display:flex;flex-wrap:wrap;justify-content:flex-start;border-bottom:1px solid rgba(28,37,38,0.12);margin-bottom:8px;}
.mji-filter{
	background:none;border:none;cursor:pointer;font-family:var(--ft);font-weight:500;font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(28,37,38,0.6);padding:22px 22px;position:relative;transition:color .25s;white-space:nowrap;
}
.mji-filter:first-child{padding-left:0;}
.mji-filter:hover{color:rgba(28,37,38,0.85);}
.mji-filter.is-active{color:var(--dg);}
.mji-filter::after{content:"";position:absolute;left:22px;right:22px;bottom:0;height:1px;background:var(--brick);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(0.22,1,0.36,1);}
.mji-filter:first-child::after{left:0;}
.mji-filter:hover::after,.mji-filter.is-active::after{transform:scaleX(1);}
.mji-filter-count{margin-left:7px;font-size:10px;letter-spacing:0.08em;color:rgba(28,37,38,0.35);}
/* top-aligned: a card is only as tall as its own content, so opening one does not
   stretch its neighbours. Titles get a two-line floor to keep the closed row
   reading level. */
.mji-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0 48px;align-items:start;}
.mji-card{display:flex;flex-direction:column;padding:26px 0;text-decoration:none;border-bottom:1px solid rgba(28,37,38,0.1);}
.mji-card .mj-eyebrow{margin-bottom:10px;}
.mji-card h3{margin-bottom:10px;min-height:calc(1.28em * 2);}
.mji-card h3{font-size:19px;font-weight:300;line-height:1.28;letter-spacing:0;color:var(--dg);transition:color .25s;}
.mji-card:hover h3{color:var(--brick);}
.mji-card .mj-eyebrow{font-size:11px;letter-spacing:0.16em;}
.mji-card-foot{padding-top:8px;}
.mji-card.is-hidden{display:none;}
.mji-more{margin-top:56px;text-align:center;}
.mji-more button{
	font-family:var(--ft);font-size:14px;font-weight:400;letter-spacing:0.14em;text-transform:uppercase;color:var(--dg);background:transparent;border:1px solid rgba(28,37,38,0.25);padding:16px 44px;cursor:pointer;transition:background .3s,color .3s;
	line-height: 1.1;
}
.mji-more button:hover{background:var(--dg);color:var(--ice);}
.mji-empty{padding:64px 0;font-size:17px;color:rgba(28,37,38,0.55);display:none;}
.mji-empty.is-on{display:block;}

/* library hover reveal — the image fades in over the card's own text, anchored to
   the card band. A white panel covers the band edge to edge, masking the card's own
   text completely; the image sits inset 12px within that panel, so it has a margin
   without anything showing around it. Insetting the panel itself left slivers of
   text visible at the edges. Nothing in the grid moves. */
.mji-card{position:relative;}
.mji-card-reveal{position:absolute;top:0;bottom:0;left:0;right:0;z-index:5;pointer-events:none;
  background:#ffffff;opacity:0;transition:opacity .4s ease;}
.mji-card-reveal img{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);
  object-fit:cover;display:block;background:var(--ice);
  transform:scale(1.03);transition:transform .8s cubic-bezier(0.16,1,0.3,1);}
.mji-card:hover .mji-card-reveal{opacity:1;}
.mji-card:hover .mji-card-reveal img{transform:scale(1);}
@media(max-width:1024px),(hover:none){.mji-card-reveal{display:none;}}

/* filter refresh — cards rise and fade when the filter changes, matching the
   representatives page (reps-rise): 14px, .5s, staggered 40ms and capped so a long
   list settles rather than cascades. Applied via a class toggled in JS, not on
   :hover, so it fires once per filter change. */
@keyframes mji-rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.mji-grid.is-refreshing .mji-card:not(.is-hidden){
  animation:mji-rise .5s cubic-bezier(0.22,1,0.36,1) both;
  animation-delay:calc(min(var(--i,0),10) * 40ms);}
@media(prefers-reduced-motion:reduce){
  .mji-grid.is-refreshing .mji-card:not(.is-hidden){animation:none;}}

/* ═════════ 6 · ONWARD ═════════ */
/* onward step uses the homepage dual-cta language — small caps, centred, on light
   green — rather than the article template's large display link. An index has no
   subject, so the step is page-level and should read as the site's closing device.
   The rule under the label is present at rest, so it reads as a link before hover. */
.mji-onward{background:var(--lg);border-top:1px solid rgba(28,37,38,0.12);}
.mji-onward-inner{
	max-width:1920px;margin:0 auto;padding:96px var(--page-mx);display:flex;justify-content:center;
	line-height: 1.1;
}
/* matches the homepage dual-cta: no underline at rest, line scales in on hover */
.mji-onward a{font-family:var(--ft);font-size:13px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--dg);text-decoration:none;position:relative;padding-bottom:3px;}
.mji-onward a::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--dg);transform:scaleX(0);transform-origin:left;transition:transform .3s ease;}
.mji-onward a:hover::after{transform:scaleX(1);}

/* ═════════ SAFARI GRID SIZING ═════════
   Grid and flex children default to min-width:auto, so a track can refuse to shrink
   below its content's intrinsic width. Safari sizes tracks to an image's natural
   width (768px here) where Chrome resolves it as zero, which pushed the recency and
   featured rows past the viewport — and body overflow-x:hidden then clipped them
   rather than scrolling. min-width:0 lets the tracks shrink as intended. */
.mji-masthead-inner > *,
.mji-recent-list > *,
.mji-featured-grid > *,
.mji-grid > *,
.mji-model > *,
.mji-review > *,
.mji-review-list > *{min-width:0;}
.mji-recent-media,
.mji-feature-media,
.mji-review-thumb{min-width:0;max-width:100%;}
.mji-recent-media img,
.mji-feature-media img,
.mji-review-thumb img,
.mji-card-reveal img{max-width:100%;}

/* ═════════ RESPONSIVE ═════════ */
@media(max-width:1400px){
  .mji-masthead-inner{gap:0 64px;}
  .mji-model{grid-template-columns:220px 1fr;gap:0 40px;}
  .mji-grid{grid-template-columns:repeat(3,1fr);gap:0 40px;}
  .mji-recent-list{gap:0 40px;}
  .mji-recent-item + .mji-recent-item::before{left:-20px;}
  .mji-featured-grid{gap:36px;}
  .mji-feature p{font-size:15px;}
}
@media(max-width:1180px){
  .mji-masthead-inner{grid-template-columns:1fr;gap:20px;}
  .mji-masthead-text{max-width:720px;}
  /* two columns from here down to 768. Three across is too tight for a 16:9 image
     with a label, title and date beneath it; three items in two columns would leave
     an orphan, so the first spans the full width and the other two sit beneath it.
     In the recency band that also puts the newest post in the largest slot. */
  .mji-recent-list,
  .mji-recent-list[data-count="1"],
  .mji-recent-list[data-count="2"],
  .mji-recent-list[data-count="3"]{grid-template-columns:1fr 1fr;gap:32px 40px;}
  .mji-recent-item + .mji-recent-item::before{display:none;}
  .mji-recent-item:first-child{grid-column:1 / -1;padding-bottom:32px;
    border-bottom:1px solid rgba(28,37,38,0.12);}
  .mji-recent-item:first-child .mji-recent-media{aspect-ratio:21/9;}
  .mji-recent-item:first-child h2{font-size:30px;}
  .mji-recent-item:nth-child(3)::before{display:block;left:-20px;}
  .mji-recent-media{margin-bottom:14px;}

  .mji-featured-grid{grid-template-columns:1fr 1fr;gap:36px 40px;}
  .mji-feature:first-child{grid-column:1 / -1;}
  .mji-feature:first-child .mji-feature-media{aspect-ratio:21/9;}
  .mji-feature:first-child p{max-width:620px;}
  .mji-feature h3{font-size:22px;}
  .mji-feature p{font-size:15px;}
}
@media(max-width:1024px){
  :root{--mx:32px;}
  .mji-masthead{padding:56px var(--mx) 48px;}
  .mji-masthead-inner{grid-template-columns:1fr;gap:24px;}
  .mji-reviews{padding:80px var(--mx) 72px;}
  .mji-model{grid-template-columns:1fr;gap:20px;}
  .mji-featured{padding:80px var(--mx);}
  /* two columns as above; all three pins stay visible */
  .mji-featured-grid{gap:32px 32px;}
  .mji-feature-media{margin-bottom:18px;}
  .mji-recent-item:first-child h2{font-size:27px;}
  .mji-library{padding:80px var(--mx) 88px;}
  .mji-grid{grid-template-columns:repeat(2,1fr);gap:0 32px;}
  .mji-onward-inner{padding:56px var(--mx);}
}
@media(max-width:767px){
  :root{--mx:32px;}
  .mji-masthead{padding:44px var(--mx) 40px;}
  .mji-masthead p{font-size:17px;}
  .mji-recent-inner{padding:32px 0 36px;}
  .mji-recent-list,
  .mji-recent-list[data-count="1"],
  .mji-recent-list[data-count="2"],
  .mji-recent-list[data-count="3"]{grid-template-columns:1fr;gap:0;}
  .mji-recent-item{padding:20px 0;border-bottom:1px solid rgba(28,37,38,0.12);}
  .mji-recent-item:first-child{grid-column:auto;padding-top:0;padding-bottom:20px;}
  .mji-recent-item:first-child .mji-recent-media{aspect-ratio:16/9;}
  .mji-recent-item:first-child h2{font-size:22px;}
  .mji-recent-item:nth-child(3)::before{display:none;}
  .mji-recent-item:last-child{border-bottom:0;padding-bottom:0;}
  .mji-reviews{padding:64px var(--mx) 56px;}
  .mji-reviews-head{margin-bottom:40px;}
  .mji-review{grid-template-columns:84px 1fr;grid-template-areas:"thumb title" "thumb source";
    gap:4px 18px;padding:14px 0;align-items:start;}
  .mji-review-thumb{width:84px;grid-area:thumb;align-self:center;}
  .mji-review-title{grid-area:title;}
  .mji-review-source{grid-area:source;text-align:left;}
  .mji-featured{padding:64px var(--mx);}
  .mji-featured-grid{grid-template-columns:1fr;gap:44px;}
  .mji-feature:first-child{grid-column:auto;}
  .mji-feature:first-child .mji-feature-media{aspect-ratio:4/3;}
  .mji-feature h3{font-size:24px;}
  .mji-feature p{font-size:16px;}
  .mji-library{padding:64px var(--mx) 72px;}
  .mji-filters{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);
    scrollbar-width:none;}
  .mji-filters::-webkit-scrollbar{display:none;}
  .mji-filter{padding:26px 18px;}
  .mji-filter::after{left:18px;right:18px;}
  .mji-grid{grid-template-columns:1fr;gap:0;}
  .mji-card{padding:22px 0;}
  .mji-card h3{font-size:20px;}
  .mji-onward-inner{padding:48px var(--mx);}
}