/* Simple Studio journal as a magazine (Nati 26.10: Italian home-décor magazine look).
   Only pages with <body class="mag"> use it: the journal index and the articles. Text and data stay as they are;
   this file changes the typography, the rhythm and the inserts (material cards, palette, still-life photos). */
body.mag {
  --mag-paper: #FBFAF7; --mag-ink: #1E1915; --mag-soft: #5F534B; --mag-rule: #E4DED6; --mag-accent: #7A2E22;
  --mag-serif: "Frank Ruhl Libre", Georgia, serif; --mag-latin: "Bodoni Moda", Georgia, serif;
  background: var(--mag-paper);
}
/* the issue line above every journal title */
body.mag .lp-hero-content::before { content: "N° 01 · סתיו 2026"; display: block; font-family: var(--mag-latin); font-size: 0.9rem; color: var(--mag-soft); letter-spacing: 0.04em; margin-bottom: 14px; }
body.mag.en .lp-hero-content::before { content: "N° 01 · Autumn 2026"; }
body.mag .lp-hero h1, body.mag .post-hero h1 { font-family: var(--mag-serif); font-weight: 300; font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.06; letter-spacing: -0.01em; color: var(--mag-ink); }
body.mag .lp-hero .eyebrow { letter-spacing: 0.24em; font-size: 0.78rem; color: var(--mag-accent); }

/* the article */
body.mag .post-meta { border-block: 1px solid var(--mag-ink); padding: 10px 0; gap: 18px; }
body.mag .post-chip { border: 0; padding: 0; letter-spacing: 0.22em; font-size: 0.74rem; color: var(--mag-accent); background: none; }
body.mag .post-body { max-width: 680px; margin-inline: auto; font-family: Heebo, Arial, sans-serif; font-weight: 300; font-size: 1.12rem; line-height: 1.85; color: var(--mag-ink); }
body.mag .post-body > p:first-of-type::first-letter { font-family: var(--mag-serif); float: right; font-size: 4.4em; line-height: 0.82; padding: 6px 0 0 12px; color: var(--mag-accent); }
body.en.mag .post-body > p:first-of-type::first-letter { float: none; font-size: inherit; padding: 0; color: inherit; }
body.mag .post-body h2 { font-family: var(--mag-serif); font-weight: 400; font-size: clamp(1.7rem, 3.2vw, 2.3rem); line-height: 1.2; margin: 3.4rem 0 0.8rem; color: var(--mag-ink); }
body.mag .post-body h3 { font-family: var(--mag-serif); font-weight: 400; font-size: 1.35rem; margin: 2.2rem 0 0.4rem; color: var(--mag-ink); }
/* photos run wider than the text column */
body.mag .post-body figure { margin: 3rem calc(50% - min(48vw, 560px)); }
body.mag .post-body figure img { width: 100%; height: auto; display: block; }
body.mag .post-body figcaption { display: flex; justify-content: space-between; gap: 12px; font-size: 0.8rem; letter-spacing: 0.06em; color: var(--mag-soft); padding: 8px 0; border-bottom: 1px solid var(--mag-rule); }
/* pull quote: full width, between two rules */
body.mag .post-body blockquote { margin: 3.4rem calc(50% - min(46vw, 460px)); border: 0; border-block: 1px solid var(--mag-ink); padding: 26px 8px; text-align: center; font-family: var(--mag-serif); font-weight: 300; font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.35; color: var(--mag-ink); }
body.mag .post-body blockquote p { margin: 0; }
body.mag .journal-links h2 { font-family: var(--mag-serif); font-weight: 400; border-top: 1px solid var(--mag-ink); padding-top: 18px; }

/* inserts (used where an article talks about materials) */
.mag-label { font-size: 0.74rem; letter-spacing: 0.24em; color: var(--mag-soft); margin: 0 0 10px; }
.mag-materials { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 2.6rem calc(50% - min(48vw, 560px)); }
.mag-materials .sw { display: block; width: 100%; aspect-ratio: 1; height: auto; border: 1px solid rgba(30,25,21,.12); }
.mag-materials h4 { font-family: var(--mag-serif); font-weight: 400; font-size: 1.15rem; margin: 10px 0 2px; }
.mag-materials p { font-size: 0.86rem; line-height: 1.55; color: var(--mag-soft); margin: 0; }
.mag-oak { background: repeating-linear-gradient(92deg, rgba(120,84,46,.10) 0 2px, transparent 2px 9px), repeating-linear-gradient(88deg, rgba(255,240,215,.18) 0 1px, transparent 1px 23px), linear-gradient(180deg, #CFAE84, #BE9A6C); }
.mag-plaster { background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.55), transparent 55%), radial-gradient(ellipse at 75% 70%, rgba(150,130,105,.18), transparent 60%), #E6DED1; }
.mag-light { background: linear-gradient(180deg, #2A2420 0 58%, #F3D9A4 58% 61%, rgba(243,217,164,.35) 61% 72%, #2A2420 72%); }
.mag-ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--mag-rule); margin: 1.6rem 0 0.6rem; }
.mag-ladder div { padding: 14px 12px; border-inline-start: 1px solid var(--mag-rule); }
.mag-ladder div:first-child { border-inline-start: 0; }
.mag-ladder b { display: block; font-family: var(--mag-serif); font-weight: 400; font-size: 1.05rem; }
.mag-ladder span { font-size: 0.82rem; color: var(--mag-soft); }
.mag-ladder i { display: block; height: 5px; margin-top: 10px; background: var(--mag-accent); }
.mag-chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 2.4rem calc(50% - min(48vw, 560px)) 0; }
.mag-chips div { aspect-ratio: 3 / 4; display: flex; flex-direction: column; justify-content: flex-end; padding: 10px; color: #fff; font-size: 0.8rem; line-height: 1.35; }
.mag-chips div.lt { color: #1E1915; }
.mag-chips b { font-family: var(--mag-serif); font-weight: 400; font-size: 1.05rem; }
.mag-chips code { font: 400 0.7rem "Courier New", monospace; opacity: .85; direction: ltr; unicode-bidi: embed; }
.mag-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin: 2.6rem calc(50% - min(48vw, 560px)); }
.mag-duo figure { margin: 0 !important; }
.mag-duo img { aspect-ratio: 4 / 5; object-fit: cover; }

/* journal index: a cover story, then the rest */
body.mag .post-grid { gap: 28px; }
body.mag .post-card { background: transparent; border: 0; border-radius: 0; }
body.mag .post-card:hover { transform: none; }
body.mag .post-card-img { border-radius: 0; }
body.mag .post-card-body { padding: 14px 0 0; }
body.mag .post-card-title { font-family: var(--mag-serif); font-weight: 400; font-size: 1.35rem; line-height: 1.3; color: var(--mag-ink); }
body.mag .post-card:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: center; border-bottom: 1px solid var(--mag-ink); padding-bottom: 28px; }
body.mag .post-card:first-child .post-card-img { aspect-ratio: 16 / 10; height: auto; }
body.mag .post-card:first-child .post-card-title { font-size: clamp(1.8rem, 3.4vw, 2.8rem); font-weight: 300; line-height: 1.15; }

@media (max-width: 760px) {
  body.mag .post-body figure, body.mag .post-body blockquote, .mag-materials, .mag-chips, .mag-duo { margin-inline: 0; }
  .mag-materials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mag-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mag-ladder div:nth-child(3) { border-inline-start: 0; }
  .mag-ladder div:nth-child(n+3) { border-top: 1px solid var(--mag-rule); }
  .mag-chips div { aspect-ratio: auto; height: 130px; padding: 6px; font-size: 0.7rem; }
  .mag-duo { grid-template-columns: 1fr; }
  .mag-duo img { aspect-ratio: 4 / 3; }
  body.mag .post-card:first-child { grid-template-columns: 1fr; gap: 14px; }
}

/* Material swatches for every article's board (27.10: the trends inserts are the baseline for all articles). */
.mag-stone { background: radial-gradient(circle at 22% 30%, rgba(150,120,85,.28) 0 2px, transparent 3px), radial-gradient(circle at 70% 64%, rgba(150,120,85,.22) 0 3px, transparent 4px), radial-gradient(circle at 46% 82%, rgba(150,120,85,.2) 0 2px, transparent 3px), linear-gradient(170deg, #E3D5BF, #D3C1A5); background-size: 37px 41px, 53px 47px, 29px 31px, auto; }
.mag-zellige { background: linear-gradient(135deg, rgba(255,255,255,.45), transparent 45%), linear-gradient(90deg, transparent 49%, #D9CDB8 49% 51%, transparent 51%), linear-gradient(0deg, transparent 49%, #D9CDB8 49% 51%, transparent 51%), radial-gradient(ellipse at 30% 30%, #F4ECDD, #E6D9C3); }
.mag-zellige-olive { background: linear-gradient(135deg, rgba(255,255,255,.35), transparent 45%), linear-gradient(90deg, transparent 49%, #4F5136 49% 51%, transparent 51%), linear-gradient(0deg, transparent 49%, #4F5136 49% 51%, transparent 51%), radial-gradient(ellipse at 30% 30%, #8A8A5E, #66673F); }
.mag-brass { background: repeating-linear-gradient(90deg, rgba(255,240,200,.18) 0 1px, transparent 1px 4px), linear-gradient(160deg, #C9A86A, #A8864E 55%, #8C6E3C); }
.mag-linen { background: repeating-linear-gradient(0deg, rgba(120,100,70,.10) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(120,100,70,.10) 0 1px, transparent 1px 3px), #D8CAB2; }
.mag-felt { background: repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 2px, transparent 2px 14px), #B86B4B; }
.mag-felt-sand { background: repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 2px, transparent 2px 14px), #D6C5A8; }
.mag-terracotta { background: radial-gradient(ellipse at 30% 25%, rgba(255,220,190,.35), transparent 55%), #B86B4B; }
.mag-sage { background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.25), transparent 60%), #9AA58C; }
.mag-kraft { background: repeating-linear-gradient(95deg, rgba(90,60,30,.08) 0 1px, transparent 1px 6px), #B38B5D; }
.mag-lacquer { background: linear-gradient(160deg, #F4EFE6, #E7E0D3); }
/* Accessibility (27.10, axe AA): the hex code on a palette chip takes the chip's own text colour, with no inherited code pill. */
.mag-chips code { background: none; padding: 0; border: 0; color: inherit; opacity: 1; }