/* Journal: the index (featured story, topics, list, this month) and the articles (readable measure, plants strip, next). */

/* ---------- index ---------- */
.jr { padding-block-end: clamp(64px, 10vh, 120px); }
.feat { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: center; color: var(--encre); text-decoration: none; }
.feat__img { display: block; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; background: #e7e4dc; }
.feat__img img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 1.1s var(--ease-reveal); }
.feat:hover .feat__img img { transform: scale(1.03); }
.feat__txt { display: grid; gap: 16px; }
.feat__k, .row__k, .ar__k, .next__k { font: 500 14px/1.2 var(--font-text); color: var(--zellige); }
.feat__t { font: 400 clamp(36px, 3.6vw, 58px)/1.02 var(--font-serif); letter-spacing: -.025em; }
.feat__d { font: 400 17px/1.55 var(--font-text); color: color-mix(in oklab, var(--encre) 76%, var(--chaux)); }
.feat__m, .row__m, .next__m { font: 400 13px/1.3 var(--font-text); opacity: .6; }
.feat:hover .feat__t, .row:hover .row__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.feat:focus-visible, .row:focus-visible, .next:focus-visible { outline: 2px solid var(--zellige); outline-offset: 6px; border-radius: 8px; }

.jr__bar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-block: clamp(64px, 11vh, 120px) 8px; padding-block-end: 18px; border-block-end: 1px solid rgba(18,20,18,.15); }
.topics { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.topics button { all: unset; cursor: pointer; padding-block: 6px; font: 400 clamp(19px, 1.5vw, 22px)/1 var(--font-serif); color: rgba(18,20,18,.55); transition: color .25s; }
.topics button:hover { color: var(--encre); }
.topics button[aria-pressed="true"] { color: var(--encre); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; }
.topics button:focus-visible { outline: 2px solid var(--zellige); outline-offset: 4px; border-radius: 4px; }
.list { list-style: none; margin: 0; padding: 0; }
.list > li { border-block-end: 1px solid rgba(18,20,18,.12); }
.list > li[hidden] { display: none; }
.row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: center; padding-block: 24px; color: var(--encre); text-decoration: none; }
.row__img { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #e7e4dc; }
.row__img img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 1.1s var(--ease-reveal); }
.row:hover .row__img img { transform: scale(1.04); }
.row__img .art__date { inset-block-start: 8px; inset-inline-start: 8px; min-inline-size: 46px; padding: 7px 8px 6px; }
.row__img .art__date b { font-size: 24px; }
.row__txt { display: grid; gap: 8px; max-inline-size: 46em; }
.row__t { font: 400 clamp(26px, 2.4vw, 36px)/1.1 var(--font-serif); letter-spacing: -.02em; }
.row__d { font: 400 16px/1.5 var(--font-text); color: color-mix(in oklab, var(--encre) 74%, var(--chaux)); }
.list__none { padding-block: 32px; font: 400 17px/1.5 var(--font-text); } .list__none .link-btn { color: var(--zellige); }

.month { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.month__head { display: grid; gap: 14px; }
.month__list { list-style: none; margin: 0; padding: 0; display: grid; }
.month__list li { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding-block: 20px; border-block-start: 1px solid rgba(18,20,18,.14); }
.month__list li:first-child { padding-block-start: 0; border: 0; }
.month__list svg { inline-size: 26px; block-size: 26px; fill: none; stroke: var(--zellige); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.month__list b { font: 400 24px/1.2 var(--font-serif); }
.month__list p { margin: 6px 0 0; font: 400 16px/1.55 var(--font-text); opacity: .8; }
.month__list a { color: var(--zellige); font-weight: 500; }

/* ---------- article ---------- */
.ar { --measure: 680px; }
.ar__head { display: grid; gap: 18px; justify-items: center; text-align: center; padding: clamp(16px, 4vh, 48px) clamp(20px, 3.4vw, 48px) clamp(32px, 5vh, 56px); }
.ar__head .crumbs { justify-content: center; }
.ar__t { margin: 0; max-inline-size: 15em; font: 400 clamp(44px, 5.6vw, 92px)/1 var(--font-serif); letter-spacing: -.035em; font-variation-settings: "opsz" 72; text-wrap: balance; }
.ar__lede { margin: 0; max-inline-size: 34em; font: 400 clamp(18px, 1.45vw, 22px)/1.5 var(--font-text); color: color-mix(in oklab, var(--encre) 76%, var(--chaux)); text-wrap: pretty; }
.ar__m { margin: 0; font: 400 14px/1.3 var(--font-text); opacity: .6; }
.ar__hero { margin: 0 clamp(20px, 3.4vw, 48px); aspect-ratio: 21 / 9; border-radius: 12px; overflow: hidden; background: #e7e4dc; }
.ar__hero img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.prose { box-sizing: content-box; max-inline-size: var(--measure); margin-inline: auto; padding: clamp(48px, 8vh, 88px) clamp(20px, 3.4vw, 48px) clamp(40px, 6vh, 72px); font: 400 18px/1.7 var(--font-text); color: color-mix(in oklab, var(--encre) 88%, var(--chaux)); }
.prose > * { margin: 0; }
.prose > * + * { margin-block-start: 1.1em; }
.prose h2 { margin-block-start: 2.2em; font: 400 clamp(28px, 2.4vw, 36px)/1.15 var(--font-serif); letter-spacing: -.02em; color: var(--encre); text-wrap: balance; }
.prose h2 + * { margin-block-start: .7em; }
.prose strong { font-weight: 600; color: var(--encre); }
.prose ul, .prose ol { padding-inline-start: 1.2em; }
.prose li + li { margin-block-start: .55em; }
.prose li::marker { color: var(--zellige); }
.prose a { color: var(--zellige); }
.key { padding: 22px 26px; border-radius: 12px; background: var(--menthe); font-size: 16px; line-height: 1.55; }
.key__t { margin: 0 0 10px; font: 400 22px/1.2 var(--font-serif); color: var(--encre); }
.key ul { margin: 0; padding-inline-start: 1.1em; }
.prose > .key + h2 { margin-block-start: 1.8em; }
.plan { list-style: none; padding: 0 !important; border-block-start: 1px solid rgba(18,20,18,.14); }
.plan li { display: grid; grid-template-columns: 90px 1fr; gap: 16px; margin: 0 !important; padding-block: 14px; border-block-end: 1px solid rgba(18,20,18,.14); }
.plan time { font: 400 20px/1.4 var(--font-serif); color: var(--encre); }

.ar__plants { display: grid; gap: 28px; padding-block: clamp(48px, 8vh, 88px); border-block-start: 1px solid rgba(18,20,18,.12); }
.ar__plants .grid-p { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 40px 14px; }
.ar__plants .grid-p:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ar__plants .prod__meta h3 { font-size: 21px; }
.ar__plants .prod { grid-template-columns: minmax(0, 1fr); } .ar__plants .prod__buy { justify-items: start; padding: 0; }

.next { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: clamp(24px, 4vw, 64px); padding: clamp(48px, 8vh, 88px) clamp(20px, 3.4vw, 48px); background: var(--menthe); color: var(--encre); text-decoration: none; }
.next__img { display: block; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; }
.next__img img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 1.1s var(--ease-reveal); }
.next:hover .next__img img { transform: scale(1.03); }
.next__txt { display: grid; gap: 14px; }
.next__t { font: 400 clamp(32px, 3.4vw, 54px)/1.05 var(--font-serif); letter-spacing: -.025em; }
.next:hover .next__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; }

/* ---------- workshop ---------- */
.ev { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(20px, 3vw, 48px); align-items: center; max-inline-size: 1100px; margin: 0 auto clamp(32px, 5vh, 56px); padding: clamp(22px, 2.6vw, 36px); border-radius: 16px; background: #fff; box-shadow: 0 1px 0 rgba(18,20,18,.06), 0 20px 50px -30px rgba(18,20,18,.35); box-sizing: border-box; inline-size: calc(100% - 2 * clamp(20px, 3.4vw, 48px)); }
.ev__date { display: grid; justify-items: center; padding: 14px 18px; border-radius: 12px; background: var(--zellige); color: #f6f6f2; }
.ev__date b { font: 400 54px/.9 var(--font-serif); } .ev__date span { font: 500 14px/1.2 var(--font-text); }
.ev__txt { display: grid; gap: 12px; }
.ev__t { margin: 0; font: 400 clamp(24px, 2.2vw, 32px)/1.15 var(--font-serif); letter-spacing: -.015em; }
.ev__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font: 400 15px/1.45 var(--font-text); }
.ev__facts li { display: flex; gap: 10px; align-items: flex-start; }
.ev__facts svg { inline-size: 18px; block-size: 18px; margin-block-start: 2px; flex: none; fill: none; stroke: var(--zellige); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ev__facts a { color: var(--zellige); }
.ev__seats { display: grid; gap: 12px; justify-items: start; }
.ev__left { margin: 0; font: 500 15px/1.2 var(--font-text); }
.ev__dots { display: grid; grid-template-columns: repeat(12, 10px); gap: 5px; }
.ev__dots i { inline-size: 10px; block-size: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--zellige); }
.ev__dots i.is-t { background: rgba(18,20,18,.2); box-shadow: none; }
.ev__dots i.is-m { background: var(--zellige); }

.signup { max-inline-size: var(--measure); margin: 0 auto clamp(56px, 9vh, 96px); padding: clamp(24px, 3vw, 40px); border-radius: 16px; background: #fff; box-shadow: 0 1px 0 rgba(18,20,18,.06), 0 20px 50px -30px rgba(18,20,18,.35); scroll-margin-top: 24px; }
@media (max-width: 760px) { .signup { margin-inline: 20px; } }
.signup__in, .signup__form, .signup__done, .signup__full { display: grid; gap: 20px; }
.signup [hidden] { display: none; }
.signup__left { margin: -8px 0 0; font: 500 15px/1.3 var(--font-text); color: var(--zellige); }
.signup fieldset { border: 0; margin: 0; padding: 0; } .signup legend { padding: 0; margin-block-end: 10px; }
.signup__form .b { justify-self: start; }
.signup__done { justify-items: start; outline: none; animation: doneIn .5s cubic-bezier(.16,1,.3,1); }
.signup__done > svg { inline-size: 44px; block-size: 44px; padding: 10px; border-radius: 50%; background: var(--menthe); fill: none; stroke: var(--zellige); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; box-sizing: border-box; }
@keyframes doneIn { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .signup__done { animation: none; } }
.signup__acts { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 1100px) { .ar__plants .grid-p { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .feat, .month, .next { grid-template-columns: minmax(0, 1fr); }
  .row { grid-template-columns: 120px minmax(0, 1fr); align-items: start; padding-block: 18px; }
  .row__d { display: none; }
  .row__t { font-size: 24px; }
  .ar__hero { aspect-ratio: 4 / 3; }
  .ar__plants .grid-p, .ar__plants .grid-p:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev { grid-template-columns: auto minmax(0, 1fr); }
  .ev__seats { grid-column: 1 / -1; }
  .ev__date { align-self: start; }
  .ev__date b { font-size: 40px; }
}
@media (max-width: 600px) { .prose { font-size: 17px; } .plan li { grid-template-columns: 72px 1fr; } .ev__dots { grid-template-columns: repeat(12, 9px); } }
@media (max-width: 900px) { .ar__head { padding-block-start: 20px; } }

/* right-to-left: phone numbers and e-mail addresses are typed left to right */
[dir="rtl"] input[type="tel"], [dir="rtl"] input[type="email"] { direction: ltr; text-align: right; }