@charset "UTF-8";
/* ==========================================================================
   NEST — the journal
   Same shape language as the rest of the site: one softened corner, the blue
   diagonal, a hairline between rows. The list is the property grid's quieter
   sibling — the photography carries the catalog, the words carry this.
   ========================================================================== */

.journal { padding-block-start: calc(var(--header-h) + clamp(2.5rem, 5vw, 5rem)); }
.journal__head { max-width: 70ch; }

/* --------------------------------------------------------------------------
   CATEGORY FILTER
   -------------------------------------------------------------------------- */
.jfilter {
  display: flex; flex-wrap: wrap; gap: .45rem;
  margin-block-start: clamp(1.8rem, 3vw, 2.6rem);
}
.jfilter__opt {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .95rem;
  font-family: var(--font-display);
  font-size: .92rem;
  color: var(--silver-200);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  border-end-end-radius: 12px;
  transition: color var(--dur) var(--ease-inout), box-shadow var(--dur) var(--ease-inout);
}
.jfilter__opt::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(104deg, #4d8ad0, var(--blue-600));
  transform: translateX(-110%) skewX(-18deg);
  transition: transform var(--dur) var(--ease-out);
}
.jfilter__opt:hover, .jfilter__opt:focus-visible { color: var(--white); box-shadow: none; }
.jfilter__opt:hover::before, .jfilter__opt:focus-visible::before { transform: translateX(0) skewX(-18deg); }
.jfilter__opt.is-on { color: var(--white); box-shadow: none; }
.jfilter__opt.is-on::before { transform: translateX(0) skewX(-18deg); }
.jfilter__n { font-size: .76rem; opacity: .7; font-family: var(--font-latin); }

/* --------------------------------------------------------------------------
   THE LIST
   -------------------------------------------------------------------------- */
.posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.8rem);
  margin-block-start: clamp(2.2rem, 4vw, 3.2rem);
}
@media (max-width: 1000px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .posts { grid-template-columns: 1fr; } }

.post__link { display: flex; flex-direction: column; height: 100%; }

.post__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--slate-700);
  border-end-end-radius: 20px;
}
.post__img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.88) brightness(.92); transition: transform 1.1s var(--ease-out), filter var(--dur-slow) var(--ease-inout); }
.post__link:hover .post__img,
.post__link:focus-visible .post__img { transform: scale(1.06); filter: saturate(1) brightness(1); }

/* no picture yet: the monogram stands in rather than a grey box */
.post__img--empty {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  background: linear-gradient(140deg, var(--slate-700), var(--ink));
}
.post__mark { width: 46px; height: auto; opacity: .22; color: var(--silver-200); }

.post__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,13,15,.5), transparent 52%);
}

.post__cat {
  position: absolute;
  inset-block-start: .85rem; inset-inline-start: .85rem;
  padding: .32rem .7rem;
  font-family: var(--font-display);
  font-size: .74rem; letter-spacing: .1em;
  color: var(--white);
  background: rgba(20,23,25,.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-end-end-radius: 10px;
  transition: background var(--dur) var(--ease-inout);
}
.post__link:hover .post__cat { background: var(--blue-500); }

.post__body {
  display: flex; flex-direction: column;
  flex: 1;
  padding-block-start: clamp(.9rem, 1.6vw, 1.2rem);
}

.post__meta {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-latin);
  font-size: .8rem; letter-spacing: .07em;
  color: var(--silver-300);
}
.section--bone .post__meta { color: var(--bone-mute); }
.post__dot { width: 3px; height: 3px; background: currentColor; opacity: .55; }

.post__title {
  margin-block-start: .55rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.08rem, 1.5vw, 1.34rem);
  line-height: 1.32;
  color: var(--white);
  transition: color var(--dur) var(--ease-inout);
}
.section--bone .post__title { color: var(--bone-ink); }
.post__link:hover .post__title { color: var(--blue-300); }
.section--bone .post__link:hover .post__title { color: var(--blue-500); }

.post__excerpt {
  display: block;
  margin-block-start: .55rem;
  font-size: .93rem; line-height: 1.7;
  color: var(--silver-300);
}
.section--bone .post__excerpt { color: var(--bone-mute); }

.post__more {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-block-start: auto;
  padding-block-start: 1rem;
  font-family: var(--font-display);
  font-size: .9rem;
  color: var(--blue-300);
}
.post__more .btn__icon {
  width: 15px; height: 15px;
  transition: transform var(--dur) var(--ease-out);
}
.post__link:hover .post__more .btn__icon { transform: rotate(90deg); }

/* --- the lead article runs wide, picture beside the words --- */
.post--lead { grid-column: 1 / -1; }
.post--lead .post__link { flex-direction: row; align-items: stretch; gap: clamp(1.2rem, 2.6vw, 2.6rem); }
.post--lead .post__media { flex: 0 0 58%; aspect-ratio: 16 / 9; border-end-end-radius: 26px; }
.post--lead .post__body { justify-content: center; padding-block-start: 0; }
.post--lead .post__title { font-size: clamp(1.5rem, 2.9vw, 2.5rem); line-height: 1.14; margin-block-start: .8rem; }
.post--lead .post__excerpt { font-size: 1rem; margin-block-start: .9rem; max-width: 56ch; }
.post--lead .post__more { margin-block-start: 1.4rem; padding-block-start: 0; }
@media (max-width: 880px) {
  .post--lead .post__link { flex-direction: column; }
  .post--lead .post__media { flex: none; }
  .post--lead .post__body { padding-block-start: clamp(.9rem, 1.6vw, 1.2rem); }
}

.posts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .posts--3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px)  { .posts--3 { grid-template-columns: 1fr; } }

.journal__empty { padding-block: clamp(2.5rem, 6vw, 5rem); max-width: 58ch; }
.journal__empty .about__cta-btns { margin-block-start: 2rem; }

/* --------------------------------------------------------------------------
   THE ARTICLE
   -------------------------------------------------------------------------- */
.art-hero {
  position: relative;
  min-height: clamp(400px, 56vh, 640px);
  display: grid; align-items: end;
  background: var(--slate-900);
  overflow: hidden;
}
.art-hero--plain {
  min-height: 0;
  padding-block-end: clamp(2rem, 4vw, 3.4rem);
  background: var(--ink);
}
.art-hero__media { position: absolute; inset: 0; }
.art-hero__img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(.78); }
.art-hero__head {
  position: relative; z-index: 2;
  max-width: 72ch;
  padding-block: calc(var(--header-h) + 2rem) clamp(2.2rem, 4.5vw, 3.6rem);
}
.art__title { font-size: clamp(1.9rem, 4.1vw, 3.6rem); line-height: 1.06; }
/* the overshooting diagonal is the property page's move; a headline of prose
   is long enough that it would read as an underline instead */
.art__title::after { display: none; }

.art__meta {
  display: flex; align-items: center; gap: .6rem;
  margin-block-start: clamp(1rem, 1.8vw, 1.4rem);
  font-family: var(--font-latin);
  font-size: .88rem; letter-spacing: .08em;
  color: var(--silver-200);
}

/* breadcrumbs */
.crumbs {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-display);
  font-size: .82rem; letter-spacing: .1em;
  color: var(--silver-300);
}
.crumbs a { transition: color var(--dur-fast) var(--ease-inout); }
.crumbs a:hover { color: var(--blue-300); }
.crumbs__sep { width: 14px; height: 1px; background: var(--slate-400); transform: skewX(-38deg); }

.art__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 980px) { .art__grid { grid-template-columns: 1fr; } }

.art__body { max-width: 74ch; }
.art__body h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.3vw, 2rem);
  line-height: 1.2;
  color: var(--bone-ink);
  margin-block: clamp(2rem, 3.4vw, 2.8rem) .9rem;
}
.art__body h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  color: var(--bone-ink);
  margin-block: clamp(1.6rem, 2.6vw, 2.2rem) .7rem;
}
.art__body ul, .art__body ol { margin-block: 1.1rem; display: grid; gap: .5rem; }
.art__body ul li { position: relative; padding-inline-start: 1.5rem; }
.art__body ul li::before {
  content: ""; position: absolute;
  inset-inline-start: .2rem; inset-block-start: .72em;
  width: 10px; height: 2px;
  background: var(--blue-400);
  transform: skewX(-38deg);
}
.art__body ol { counter-reset: art; }
.art__body ol li { position: relative; padding-inline-start: 2rem; counter-increment: art; }
.art__body ol li::before {
  content: counter(art, decimal-leading-zero);
  position: absolute; inset-inline-start: 0; inset-block-start: .1em;
  font-family: var(--font-latin);
  font-size: .82em;
  color: var(--blue-500);
}
.art__body blockquote {
  margin-block: clamp(1.6rem, 2.6vw, 2.2rem);
  padding-inline-start: clamp(1rem, 1.8vw, 1.5rem);
  border-inline-start: 2px solid var(--blue-400);
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.6;
  color: var(--bone-ink);
}
.art__body img { border-end-end-radius: 20px; margin-block: clamp(1.4rem, 2.4vw, 2rem); }
.art__body a:not(.btn) {
  color: var(--blue-500);
  box-shadow: inset 0 -1px 0 rgba(44,90,144,.4);
  transition: box-shadow var(--dur) var(--ease-inout);
}
.art__body a:not(.btn):hover { box-shadow: inset 0 -2px 0 var(--blue-500); }

.art__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-block-start: clamp(2rem, 3.4vw, 2.8rem); }
.art__tag {
  padding: .35rem .75rem;
  font-size: .84rem;
  color: var(--bone-mute);
  box-shadow: inset 0 0 0 1px var(--bone-line);
  border-end-end-radius: 10px;
  transition: color var(--dur) var(--ease-inout), box-shadow var(--dur) var(--ease-inout);
}
.art__tag:hover { color: var(--blue-500); box-shadow: inset 0 0 0 1px rgba(44,90,144,.4); }

/* --- the aside --- */
.art__side { position: sticky; inset-block-start: calc(var(--header-h) + 1.5rem); display: grid; gap: 1rem; }
@media (max-width: 980px) { .art__side { position: static; } }

.art__card {
  padding: clamp(1.3rem, 2.2vw, 1.8rem);
  background: var(--ink);
  border-end-end-radius: 22px;
}
.art__card .label { color: var(--silver-200); }
.art__cardtext {
  margin-block: 1rem 1.4rem;
  font-size: .93rem; line-height: 1.7;
  color: var(--silver-300);
}
.art__card .btn { width: 100%; justify-content: center; }

.art__share { display: flex; align-items: center; gap: .55rem; }
.art__sharek { font-size: .78rem; letter-spacing: .12em; color: var(--bone-mute); margin-inline-end: .2rem; }
.art__share a {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  color: var(--bone-mute);
  box-shadow: inset 0 0 0 1px var(--bone-line);
  border-end-end-radius: 11px;
  transition: color var(--dur) var(--ease-inout), background var(--dur) var(--ease-inout), box-shadow var(--dur) var(--ease-inout);
}
.art__share a svg { width: 17px; height: 17px; }
.art__share a:hover { color: var(--white); background: var(--blue-500); box-shadow: none; }

.art__pages { margin-block-start: 2rem; font-family: var(--font-display); }