/* ENMAG18 English Magazine — 9.0.0
   Clean rewrite: one rule per selector, mobile rules grouped at the end.
   No layered "vX.Y.Z fixes" patches — if something needs to change, edit
   the rule directly instead of appending an override further down. */

/* ---------- RESET / BASE ---------- */
html{scroll-behavior:auto}
body.enmag18-page{margin:0!important;background:#fff!important;color:#0b0b0b!important;font-family:Arial,Helvetica,sans-serif!important;overflow-x:hidden}
body.enmag18-page #page,body.enmag18-page .site,body.enmag18-page .site-content{max-width:none!important;margin:0!important;padding:0!important}
#enmag18-root,#enmag18-root *{box-sizing:border-box}
#enmag18-root{width:100%;overflow-x:hidden}
#enmag18-root a{color:inherit;text-decoration:none}
#enmag18-root img{display:block;max-width:100%}

.enmag18-shell{max-width:1400px;margin:0 auto;padding:0 42px 70px}
.enmag18-page{margin:0 0 64px}
.enmag18-photo-page{margin-bottom:70px}
.enmag18-figure{margin:0;min-width:0}
.enmag18-photo-credit{display:block;margin-top:3px;font-family:Arial,Helvetica,sans-serif;font-size:7px;line-height:1.2;letter-spacing:.025em;font-weight:400;color:#777;text-transform:none}
.enmag18-photo-credit-dark{color:#bdbdbd}

/* ---------- MENU ---------- */
.enmag18-topbar{max-width:1400px;margin:0 auto;padding:24px 42px 18px;display:flex;justify-content:flex-end;background:#fff;position:relative;z-index:5}
.enmag18-menu{display:flex;justify-content:flex-end;gap:14px 20px;flex-wrap:wrap;max-width:960px}
.enmag18-menu a{font-size:10px;letter-spacing:.16em;font-weight:700;white-space:nowrap}

/* ---------- 01 HERO ---------- */
.enmag18-intro{margin-bottom:0}
.enmag18-hero{height:680px;margin-bottom:0;position:relative;background:#e8e8e8 center/cover no-repeat;overflow:hidden}
.enmag18-hero.has-image{background-image:var(--hero);filter:grayscale(100%)}
.enmag18-hero-copy{position:absolute;left:6%;top:9%;max-width:380px;z-index:2;color:#fff}
.enmag18-hero-copy h1{margin:0;font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(26px,2.8vw,42px);line-height:1.08;letter-spacing:-.03em;text-shadow:0 1px 5px rgba(0,0,0,.18);color:#fff!important}
.enmag18-hero-copy p{margin:12px 0 0;font-size:11px;letter-spacing:.24em;font-weight:700}
.enmag18-hero-credit{position:absolute;left:8px;bottom:5px;z-index:3;margin:0;color:rgba(255,255,255,.72);text-shadow:0 1px 2px rgba(0,0,0,.35)}

/* ---------- 02 STRIPES / JOURNEY / LOGO / ABOUT ---------- */
.enmag18-intro-layout-page{margin-top:40px;margin-bottom:92px}
.enmag18-intro-layout{
  width:100%;
  max-width:1280px;
  min-width:0;
  margin:0;
  display:grid;
  grid-template-columns:minmax(400px,.85fr) minmax(0,.7fr) minmax(160px,.55fr);
  grid-template-rows:210px minmax(0,1fr);
  grid-template-areas:
    "stripes journey logo"
    "stripes journey about";
  column-gap:clamp(18px,1.8vw,28px);
  row-gap:24px;
  align-items:start;
}
.enmag18-stripes-panel{grid-area:stripes;min-width:0;height:433px;position:relative;overflow:hidden;box-sizing:border-box;border:15px solid #111;background:#fff}
.enmag18-stripes-figure{height:100%;display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden}
.enmag18-stripes-panel img{width:100%;height:100%;object-fit:contain;filter:grayscale(100%)}
/* Location caption, rotated to run bottom-to-top in the white margin to the
   left of the photo, as in the reference layout. */
.enmag18-stripes-location{position:absolute;left:-10px;bottom:0;margin:0;transform:rotate(-90deg);transform-origin:left bottom;white-space:nowrap;font-size:10px;letter-spacing:.22em;font-weight:700;color:#333}
.enmag18-journey-panel{grid-area:journey;min-width:0;align-self:start;padding-top:10px;background:#fff;position:relative;z-index:1;isolation:isolate}
.enmag18-right-text{width:100%;max-width:280px;font-family:Georgia,'Times New Roman',serif}
.enmag18-right-text p{font-size:11px;line-height:1.52;margin:0 0 13px}
.enmag18-right-text p:first-child{font-size:clamp(21px,1.8vw,30px);font-weight:700;line-height:1.08;text-transform:uppercase;margin:0 0 18px;padding-top:16px;position:relative}
.enmag18-right-text p:first-child::before{content:'';position:absolute;top:0;left:0;width:56px;height:1px;background:#111}
.enmag18-right-text p:nth-child(2){padding-top:18px;position:relative}
.enmag18-right-text p:nth-child(2)::before{content:'';position:absolute;top:0;left:0;width:56px;height:1px;background:#111}
.enmag18-logo-panel{grid-area:logo;min-width:0;height:210px;align-self:start;padding-top:36px;border-left:1px solid #ddd;padding-left:32px}
.enmag18-logo-figure{height:calc(100% - 36px);display:grid;grid-template-rows:minmax(0,1fr) auto;align-items:start}
.enmag18-logo-panel img{width:88%;height:150px;max-width:192px;margin:0 auto;object-fit:contain;filter:grayscale(100%)}
.enmag18-about-panel{grid-area:about;min-width:0;align-self:start;position:relative;padding-left:32px}
.enmag18-about-panel::before{content:'';position:absolute;top:-226px;bottom:0;left:0;width:1px;background:#ddd}
.enmag18-copy{width:100%;max-width:300px;margin-top:-13px}
.enmag18-copy h2{font-family:Georgia,'Times New Roman',serif;font-size:34px;font-weight:400;line-height:1;letter-spacing:-.03em;margin:0;padding:22px 0 20px;position:relative}
.enmag18-copy h2::before{content:'';position:absolute;top:0;left:0;width:100%;max-width:230px;height:1px;background:#111}
.enmag18-copy h2::after{content:'';position:absolute;bottom:0;left:0;width:100%;max-width:230px;height:1px;background:#111}
.enmag18-copy p{font-size:11px;line-height:1.48;margin:0 0 9px}

/* ---------- MASTHEAD BAR (above the stripes/journey/logo/about grid) ---------- */
.enmag18-masthead{display:flex;align-items:center;gap:24px;margin-bottom:36px}
.enmag18-masthead-brand{display:flex;align-items:center;gap:10px;font-family:Georgia,'Times New Roman',serif;font-size:14px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.enmag18-masthead-brand img{width:22px;height:22px;object-fit:contain}
.enmag18-masthead-rule{flex:1 1 auto;height:1px;background:#ccc}
.enmag18-masthead-meta{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.18em;font-weight:700;white-space:nowrap;color:#333}
.enmag18-masthead-dot{color:#999}

/* ---------- 03 SOLARIS (featured) ---------- */
.enmag18-articles{margin-top:0;position:relative}
.enmag18-featured{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:16px;align-items:start;margin:0;position:relative}
.enmag18-featured-image{display:block;width:100%;max-width:780px;aspect-ratio:780/461;height:auto;min-width:0;position:relative;background:#000;z-index:1}
/* One single pinstripe graphic living BEHIND the photo (not a border around
   it): it is larger than the photo itself and peeks out from under it on
   the top, bottom and left only — the photo fully covers it on the right,
   so nothing shows there. Same line weight/spacing/colour as before. */
/* One cohesive graphic layer of thin vertical lines, sitting fully
   behind the image (lower z-index) and confined to roughly the left
   third of it — protruding slightly above, below, and to the left of
   the photo, with zero reveal on the right or toward the text column.
   Absolutely positioned so it never participates in the grid/flex
   layout and cannot affect any element's size or position. */
.enmag18-featured-image::before{content:'';position:absolute;top:-28px;bottom:-28px;left:-40px;width:38%;max-width:320px;background:repeating-linear-gradient(90deg,#ddd,#ddd 1px,transparent 1px,transparent 7px);pointer-events:none;z-index:0}
.enmag18-featured-image img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;background:#000}
.enmag18-featured-image .enmag18-photo-credit{position:absolute;left:8px;bottom:6px;margin:0;color:rgba(255,255,255,.72);text-shadow:0 1px 2px rgba(0,0,0,.35);z-index:2}
.enmag18-featured-copy{padding-top:48px;max-width:420px;position:relative;z-index:1}
.enmag18-kicker{font-size:10px!important;letter-spacing:.21em;font-weight:700;margin-bottom:0!important;padding-bottom:20px;position:relative}
.enmag18-kicker::after{content:'';position:absolute;bottom:0;left:0;width:36px;height:1px;background:#111}
.enmag18-featured-copy h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(38px,4vw,62px);line-height:.98;letter-spacing:-.04em;margin:20px 0 24px;padding-bottom:24px;position:relative}
.enmag18-featured-copy h2::after{content:'';position:absolute;bottom:0;left:0;width:36px;height:1px;background:#111}
.enmag18-featured-copy p{font-size:13px;line-height:1.62;margin:0}

/* ---------- THREE AUTOMATIC ARTICLES ---------- */
.enmag18-latest-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:70px 0 58px;align-items:stretch}
.enmag18-small-story{min-width:0;height:100%}
.enmag18-small-story>a{display:grid;grid-template-rows:auto 58px 1fr;height:100%}
.enmag18-small-story-media{min-width:0}
.enmag18-small-story-media img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(100%)}
.enmag18-small-story h3{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:26px;line-height:1.02;margin:15px 0 8px;letter-spacing:-.025em;overflow:hidden}
.enmag18-small-story p{font-size:12px;line-height:1.5;margin:0;max-width:94%;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- EDITORIAL LINE (its own standalone "page") ---------- */
.enmag18-editorial-line{font-family:Georgia,'Times New Roman',serif;font-size:clamp(20px,2.1vw,32px);line-height:1.15;letter-spacing:-.02em;max-width:820px;margin:160px auto;text-align:center;position:relative;padding-top:40px}
.enmag18-editorial-line::before{content:'';position:absolute;top:0;left:0;width:56px;height:1px;background:#111}
.enmag18-editorial-line p{margin:0}
.enmag18-editorial-line p:last-child{margin-top:19px}
/* Very subtle, purely decorative tonal transition painted into the existing
   empty space between the quote and the recommendations below it. Anchored
   to the quote itself (top:100%) so it always sits exactly in that gap no
   matter how tall the content above the quote is; sized to cover exactly
   that margin plus the recommendation grid's own top padding, fading back
   to white right where the recommendation photos begin — so nothing below
   is tinted. Purely a background layer: adds no height, moves nothing.*/
.enmag18-editorial-line::after{content:'';position:absolute;top:100%;left:50%;width:100vw;transform:translateX(-50%);height:204px;background:linear-gradient(to bottom,#fff 0%,#fff 45%,#f7f7f7 75%,#f2f2f2 90%,#fff 100%);pointer-events:none}

/* ---------- EVENT / BOOK / FILM ---------- */
.enmag18-selection-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:40px;align-items:start;max-width:1180px;margin:10px 0 0;position:relative}
.enmag18-event-card{min-width:0}
.enmag18-event-card .enmag18-media-wrap{background:#ededed}
.enmag18-event-card .enmag18-media-wrap img{display:block;width:100%;height:auto;filter:grayscale(100%)}
.enmag18-selection-stack{display:grid;gap:22px}
.enmag18-stack-card{display:grid;grid-template-columns:minmax(96px,27%) minmax(0,1fr);gap:26px;align-items:start}
.enmag18-stack-media-column{min-width:0}
.enmag18-stack-card .enmag18-media-wrap{background:#fff}
.enmag18-stack-card .enmag18-media-wrap img{display:block;width:100%;height:auto;filter:grayscale(100%)}
.enmag18-media-wrap{position:relative;background:#ededed;overflow:hidden}
.enmag18-selection-copy{padding-top:14px;min-width:0}
.enmag18-stack-card .enmag18-selection-copy{padding-top:0}
.enmag18-selection-label{font-size:10px!important;line-height:1!important;letter-spacing:.22em!important;font-weight:700!important;text-transform:uppercase!important;margin:0 0 10px!important}
.enmag18-selection-copy h2{font-family:Georgia,'Times New Roman',serif;font-size:32px;font-weight:400;line-height:1;letter-spacing:-.03em;margin:0 0 12px}
.enmag18-selection-copy p{font-size:12px;line-height:1.5;margin:0}
.enmag18-stack-card .enmag18-selection-copy p:not(.enmag18-selection-label){display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- MAGAZINE (black rectangle + white panel) ---------- */
.enmag18-magazine{display:grid;grid-template-columns:calc(56% - 19px) 1fr;min-height:420px;max-width:none;width:100%;margin:0 0 36px}
.enmag18-magazine-left{position:relative;min-height:420px;background:#050505;overflow:hidden;display:grid;place-items:center}
.enmag18-magazine-left-content{max-width:72%;max-height:72%;margin:0;position:relative}
.enmag18-magazine-left-image{display:grid;justify-items:center}
.enmag18-magazine-left-image img{max-width:100%;max-height:95px;width:auto;height:auto;object-fit:contain;filter:grayscale(100%)}
.enmag18-magazine-left-text{font-family:Georgia,'Times New Roman',serif;font-size:clamp(12px,1.05vw,16px);line-height:1.18;color:#fff;text-align:center}
.enmag18-magazine-left-text p{margin:0 0 14px}
.enmag18-magazine-white{background:#fff;padding:8% 9% 7%;display:flex;flex-direction:column;justify-content:flex-start;min-width:0}
.enmag18-magazine-text{font-family:Georgia,'Times New Roman',serif;font-size:clamp(11px,.95vw,15px);line-height:1.25;letter-spacing:-.015em;position:relative;padding:50px 0 0}
.enmag18-magazine-text::before{content:'';position:absolute;top:0;left:0;width:36px;height:1px;background:#111}
.enmag18-magazine-text::after{content:'ABOUT';position:absolute;top:14px;left:0;font-family:Georgia,'Times New Roman',serif;font-size:10px;letter-spacing:.22em;font-weight:700;text-transform:uppercase;color:#111}
.enmag18-magazine-text p{margin:0 0 14px}
.enmag18-socials{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:16px;margin-top:auto;padding-top:22px}
.enmag18-socials-icons{display:flex;gap:10px;align-items:center}
.enmag18-socials-icons a{width:30px;height:30px;border:1px solid #111;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700}
.enmag18-socials .enmag18-issn-link{display:inline-block;width:auto;height:auto;border:none;border-radius:0;padding:0;background:none;font-size:10px;letter-spacing:.06em;font-weight:700;white-space:nowrap;margin-left:auto}

/* ---------- FINAL PHOTOGRAPHY (large + small photo + colophon) ---------- */
.enmag18-photo-page{display:grid;grid-template-columns:1fr 1fr;min-height:600px;margin-top:38px}
.enmag18-photo-left{position:relative;background:#050505;overflow:hidden}
.enmag18-photo-left img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%)}
.enmag18-photo-left .enmag18-photo-credit{position:absolute;left:8px;bottom:6px;margin:0}
.enmag18-photo-right-col{background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:40% 10% 8%}
.enmag18-photo-right{padding:0;background:transparent;display:block;width:100%}
.enmag18-photo-right img{width:68%;max-height:420px;object-fit:contain;filter:grayscale(100%);margin:0 auto}
.enmag18-photo-right .enmag18-photo-credit{justify-self:center;width:68%;margin:3px auto 0}
.enmag18-colophon{width:68%;margin:20px auto 0;font-family:Arial,Helvetica,sans-serif;font-size:10px;line-height:1.65;letter-spacing:.01em;color:#555;text-align:center}
.enmag18-colophon p{margin:0 0 6px}

.enmag18-copyright{max-width:1400px;margin:0 auto;padding:0 0 2px;text-align:left;font-family:Georgia,'Times New Roman',serif;font-size:11px;letter-spacing:.02em;line-height:1.5;color:#999}

/* ================= RESPONSIVE ================= */

@media(max-width:1050px){
 .enmag18-topbar,.enmag18-shell{padding-left:28px;padding-right:28px}
 .enmag18-hero{height:58vw;min-height:480px}
 .enmag18-intro-layout{grid-template-columns:minmax(340px,.85fr) minmax(0,.7fr) minmax(140px,.5fr);grid-template-rows:200px minmax(0,1fr);column-gap:24px;row-gap:22px}
 .enmag18-stripes-panel{height:453px}
 .enmag18-logo-panel{height:210px;padding-top:36px}
 .enmag18-logo-figure{height:calc(100% - 36px)}
 .enmag18-logo-panel img{height:150px}
 .enmag18-featured{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:32px}
 .enmag18-featured-image{max-width:520px;aspect-ratio:780/461;height:auto}
 .enmag18-selection-grid{gap:30px}
 .enmag18-stack-card{grid-template-columns:32% 1fr}
 .enmag18-magazine{min-height:0}
 .enmag18-magazine-left{min-height:150px}
 .enmag18-photo-page{min-height:540px}
 .enmag18-masthead{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:28px}
 .enmag18-masthead-rule{display:none}
 .enmag18-masthead-meta{order:1}
}

@media(max-width:760px){
 .enmag18-topbar{padding:16px 18px 14px;overflow-x:auto;justify-content:flex-start}
 .enmag18-menu{flex-wrap:nowrap;justify-content:flex-start;gap:18px}
 .enmag18-shell{padding:0 18px 42px}
 .enmag18-page{margin-bottom:56px}
 .enmag18-hero{height:72vh;min-height:520px}
 .enmag18-hero-copy{left:5%;top:6%;max-width:80%}
 .enmag18-hero-copy h1{font-size:clamp(30px,9vw,46px)}
 .enmag18-intro-layout-page{margin-top:38px}
 .enmag18-masthead{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:28px}
 .enmag18-masthead-rule{display:none}
 .enmag18-masthead-meta{order:1}
 .enmag18-intro-layout{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"stripes" "journey" "logo" "about";height:auto;gap:30px}
 .enmag18-stripes-panel{height:70vw;min-height:280px;overflow:hidden;border-width:10px}
 .enmag18-stripes-figure{height:100%;display:block;overflow:hidden}
 .enmag18-stripes-panel img{width:100%;height:100%;object-fit:contain;filter:grayscale(100%);background:#fff}
 .enmag18-right-text{max-width:none}
 .enmag18-right-text p:first-child{font-size:28px}
 .enmag18-logo-panel{height:auto;padding-top:0;justify-self:center;width:min(72%,280px)}
 .enmag18-about-panel::before{display:none}
 .enmag18-logo-figure{height:auto;display:block}
 .enmag18-logo-panel img{height:auto;width:100%;max-width:240px;aspect-ratio:1/1;object-fit:contain;margin:0 auto}
 .enmag18-copy{max-width:none;margin-top:20px}
 .enmag18-featured{grid-template-columns:1fr;gap:22px}
 .enmag18-featured-image::before{display:none}
 .enmag18-featured-image{width:100%;max-width:none;height:62vw;min-height:280px;margin-top:0}
 .enmag18-featured-copy{padding:0 7%;max-width:none}
 .enmag18-latest-three{grid-template-columns:1fr;gap:34px;margin:44px 0 52px}
 .enmag18-small-story>a{display:grid;grid-template-columns:42% 1fr;grid-template-rows:auto 1fr;column-gap:18px;height:auto}
 .enmag18-small-story-media{grid-row:1/3}
 .enmag18-small-story-media img{height:100%;min-height:150px;aspect-ratio:auto;object-fit:cover}
 .enmag18-small-story h3{margin-top:0;height:auto;overflow:visible}
 .enmag18-small-story p{font-size:12px;-webkit-line-clamp:5}
 .enmag18-editorial-line{text-align:center;margin:80px 6%;font-size:27px}
 .enmag18-selection-grid{grid-template-columns:1fr;gap:42px;margin-top:20px}
 .enmag18-selection-stack{gap:34px}
 .enmag18-stack-card{grid-template-columns:38% 1fr;gap:18px}
 .enmag18-selection-copy h2{font-size:29px}
 .enmag18-socials{flex-direction:row;flex-wrap:wrap}
 .enmag18-magazine{grid-template-columns:1fr;min-height:0;margin:0 0 30px}
 .enmag18-magazine-left{min-height:44vw}
 .enmag18-magazine-left-content{max-width:76%;max-height:76%}
 .enmag18-magazine-left-image img{max-height:80px}
 .enmag18-magazine-white{min-height:220px;padding:11% 9% 9%}
 .enmag18-magazine-text{font-size:15px}
 .enmag18-photo-page{grid-template-columns:1fr;min-height:0}
 .enmag18-photo-left{height:70vh;min-height:460px}
 .enmag18-photo-right-col{padding:14% 10% 8%;min-height:52vh}
 .enmag18-photo-right img{width:66%;max-height:44vh}
 .enmag18-photo-right .enmag18-photo-credit{width:66%}
 .enmag18-colophon{width:80%}
 .enmag18-copyright{padding:0 0 4px}
}