/* TSC — Journal
   Loaded after site.css on every journal page. Uses only site.css tokens and a few
   of its components (.rail, .display, .lede, .gfig, .swap/.sw, .faq, .jump, .band,
   .btn, .ctarow, .rv), so it keeps working when site.css changes around it.

   Listing: the article card grid, after The Cool Republic's blog — portrait image,
   a small line of meta, the title, two lines of excerpt, and a lot of air.
   Article: one reading column, one image per idea, every image credited. */

/* ---------------------------------------------------------------- listing */
.jl-head .lede{margin-top:clamp(18px,2.2vw,26px)}

.jgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(20px,2.4vw,36px);row-gap:clamp(48px,6vw,80px);
  margin-top:clamp(44px,5.4vw,72px)}

/* the whole card is one link: the title's link stretches over it */
.jcard{position:relative;display:flex;flex-direction:column}
.jcard__media{position:relative;aspect-ratio:4/5;overflow:hidden;background:#e6e1d7;
  margin-bottom:clamp(18px,2vw,24px)}
.jcard__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.jcard:hover .jcard__media img{transform:scale(1.03)}
.jcard__meta{display:flex;align-items:center;gap:12px;font-size:10.5px;letter-spacing:.26em;
  text-transform:uppercase;opacity:.72;margin-bottom:12px;font-weight:400}
.jcard__meta i{display:block;width:18px;height:1px;background:currentColor;opacity:.5}
.jcard__title{font-family:'Cormorant',Georgia,serif;font-weight:300;
  font-size:clamp(24px,2.1vw,30px);line-height:1.14;letter-spacing:.004em;text-wrap:balance}
/* the underline draws in under the title on hover, like the site's text links */
.jcard__title a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
  padding-bottom:2px;transition:background-size .7s var(--ease)}
.jcard:hover .jcard__title a{background-size:100% 1px}
.jcard__title a::after{content:'';position:absolute;inset:0;z-index:1}
.jcard__title a:focus-visible{outline:none}
.jcard:has(a:focus-visible){outline:2px solid var(--brass);outline-offset:8px}
.jcard__excerpt{margin-top:12px;font-size:14.5px;line-height:1.65;opacity:.78;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* a post that is written but not out yet: shown, not clickable */
.jcard--soon .jcard__media img{filter:saturate(.7);opacity:.6}
.jcard--soon:hover .jcard__media img{transform:none}
.jcard__soon{position:absolute;left:14px;top:14px;z-index:2;background:var(--bone);
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;padding:7px 11px;font-weight:400}

/* ---------------------------------------------------------------- article head */
.jhead{text-align:center;max-width:min(1000px,100%);margin-inline:auto}
.jhead h1{font-size:clamp(40px,5.8vw,82px);max-width:min(20ch,100%);margin-inline:auto;text-wrap:balance}
.jhead .lede{text-wrap:balance}
/* the category at the end of the rail: a label, so it reads like one */
.rail .jcat{opacity:.72;text-transform:uppercase;letter-spacing:.3em;font-size:10.5px;white-space:nowrap}
.jhead .lede{max-width:min(40ch,100%);margin:clamp(18px,2.2vw,26px) auto 0}
.jmeta{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px 16px;
  margin-top:clamp(22px,2.6vw,30px);font-size:10.5px;letter-spacing:.26em;
  text-transform:uppercase;opacity:.66;font-weight:400}
.jmeta i{display:block;width:18px;height:1px;background:currentColor;opacity:.5}

.jhero{margin-top:clamp(40px,5vw,64px)}
.jhero img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#e6e1d7}

/* ---------------------------------------------------------------- article body */
.jbody{max-width:680px;margin:clamp(48px,6vw,84px) auto 0}
.jbody p{font-size:clamp(16px,1.12vw,17.5px);line-height:1.82;text-wrap:pretty}
.jbody p+p{margin-top:1.15em}
.jbody .lede{font-size:clamp(22px,2.2vw,29px);line-height:1.36}
.jbody .lede+p{margin-top:1.3em}
.jbody h2{font-family:'Cormorant',Georgia,serif;font-weight:300;
  font-size:clamp(29px,3vw,42px);line-height:1.1;letter-spacing:.004em;
  margin-bottom:clamp(16px,2vw,22px);text-wrap:balance}
.jbody strong{font-weight:500}
.jbody p a,.jbody figcaption a,.jbody .faq__a a{text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:var(--hair-strong);transition:text-decoration-color .35s var(--ease)}
.jbody p a:hover,.jbody figcaption a:hover,.jbody .faq__a a:hover{text-decoration-color:currentColor}

.jsec{margin-top:clamp(64px,8vw,112px)}
.jbody .gfig{margin-top:clamp(26px,3.2vw,38px)}
.jbody .gfig img{height:auto;background:#e6e1d7}

/* one idea: a brass number over a hairline, the heading, the words, one picture */
.jlook{margin-top:clamp(56px,7vw,96px);padding-top:clamp(26px,3vw,36px);
  border-top:1px solid var(--hair)}
.jbody .jlook__n{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--brass);
  margin-bottom:14px;font-weight:400}

/* the pieces: bold name, then a sentence or three, as prose */
.jpieces p+p{margin-top:1em}
/* four details as a 2x2 set, each with its own credit */
.jquad{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,18px);margin-top:clamp(26px,3.2vw,38px)}
.jbody .jquad .gfig{margin-top:0}
.jquad img{aspect-ratio:4/5;object-fit:cover}
.jquad figcaption{font-size:11.5px;margin-top:8px}

.jbody .jpull{font-family:'Cormorant',Georgia,serif;font-weight:300;font-size:clamp(26px,3vw,38px);
  line-height:1.2;margin-block:clamp(40px,5vw,64px);padding-left:clamp(18px,2vw,26px);
  border-left:1px solid var(--brass)}

/* in the reading column the two palettes stack, so each runs in a single row */
.jbody .swap{margin-top:clamp(26px,3.2vw,38px);grid-template-columns:1fr}
.jbody .swgrid{grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:clamp(12px,1.6vw,18px)}

/* the one quiet ask in the middle of the article */
.jcta{margin-top:clamp(56px,7vw,96px);padding:clamp(26px,3vw,38px);background:#FBF9F5;
  box-shadow:inset 0 0 0 1px var(--hair-strong)}
.jbody .jcta__k{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--brass);
  font-weight:400}
.jbody .jcta__t{font-family:'Cormorant',Georgia,serif;font-weight:300;font-size:clamp(24px,2.4vw,32px);
  line-height:1.2;margin-top:12px}
.jbody .jcta p.jcta__p{font-size:15px;line-height:1.7;opacity:.8;margin-top:10px}
.jcta .ctarow{margin-top:clamp(20px,2.4vw,26px)}

.jbody .faq{margin-top:clamp(20px,2.4vw,28px)}
.jbody .faq__a p{font-size:15.5px;line-height:1.72}
.jbody .offer{font-size:13.5px;line-height:1.6}

/* who wrote it, and where to send it */
.jabout{margin-top:clamp(64px,8vw,104px);padding-block:clamp(26px,3vw,36px);
  border-block:1px solid var(--hair);display:grid;grid-template-columns:auto 1fr;
  gap:clamp(18px,2.4vw,30px);align-items:center}
.jabout img{width:clamp(78px,8vw,100px)}
.jbody .jabout p{font-size:14.5px;line-height:1.7;opacity:.84}
.jshare{margin-top:clamp(26px,3vw,36px);display:flex;align-items:center;gap:14px 18px;
  flex-wrap:wrap}
.jshare__k{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;opacity:.6;
  font-weight:400}
.jshare .jump{margin-top:0}
.jshare .jump button{display:inline-flex;align-items:center;gap:10px;padding:11px 18px;
  border-radius:999px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  box-shadow:inset 0 0 0 1px var(--hair-strong);
  transition:background .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease)}
.jshare .jump button:hover{background:var(--spruce);color:var(--bone);box-shadow:none}

.band p{text-wrap:balance}

.jmore{margin-top:clamp(84px,11vw,150px)}

/* the mobile menu styles every link as a big serif line, which also caught the small
   WhatsApp and Instagram links at its foot and ran them off the screen. Same bug on the
   live site (checked 24 Sep 2026); this keeps them in the foot's own small caps. */
.menu .menu__foot a{font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;
  opacity:1;transform:none}
/* and the floating WhatsApp button stepped aside while the menu is open, not over its links */
body.menu-open .wa{opacity:0;pointer-events:none}

/* footer column titles are h2 here (h4 on the main site) so headings never skip a level;
   same look as .ftr__col h4 */
.ftr__col h2{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;opacity:.5;
  font-weight:400;margin-bottom:16px;font-family:inherit;line-height:inherit}
.jmore .jgrid{margin-top:0}

/* ---------------------------------------------------------------- responsive */
@media (max-width:899px){
  .jgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:599px){
  .jgrid{grid-template-columns:1fr}
  .jabout{grid-template-columns:1fr}
  .jhero img{aspect-ratio:4/3}
  /* the byline takes its own line, so no rule is left hanging at the end of one */
  .jmeta span:first-child{flex-basis:100%}
  .jmeta i:first-of-type{display:none}
}

/* ---------------------------------------------------------------- phones (10 Oct 2026)
   Twelve tall photo cards made the journal a very long scroll on a phone. The newest story keeps
   its large photo; every other card, and the "more from the journal" cards under a post, become a
   compact row: a small photo on the left, the words beside it. */
@media (max-width:599px){
  .jgrid{row-gap:0}
  .jgrid>.jcard:first-child{margin-bottom:26px}
  .jgrid>.jcard:not(:first-child),.jmore .jgrid>.jcard{display:grid;grid-template-columns:104px minmax(0,1fr);
    grid-template-rows:auto auto 1fr;column-gap:16px;padding-block:18px;border-top:1px solid var(--hair)}
  .jgrid>.jcard:not(:first-child) .jcard__media,.jmore .jgrid>.jcard .jcard__media{grid-column:1;grid-row:1 / span 3;margin-bottom:0}
  .jgrid>.jcard:not(:first-child)>:not(.jcard__media),.jmore .jgrid>.jcard>:not(.jcard__media){grid-column:2}
  .jgrid>.jcard:not(:first-child) .jcard__meta,.jmore .jgrid>.jcard .jcard__meta{margin-bottom:8px;letter-spacing:.18em;font-size:10px;flex-wrap:wrap;row-gap:4px}
  .jgrid>.jcard:not(:first-child) .jcard__title,.jmore .jgrid>.jcard .jcard__title{font-size:21px}
  .jgrid>.jcard:not(:first-child) .jcard__excerpt,.jmore .jgrid>.jcard .jcard__excerpt{margin-top:8px;font-size:13.5px;line-height:1.55}
  .jmore .jgrid>.jcard:first-child{margin-bottom:0}
  /* the date drops under the topic on a narrow row: no dash left hanging */
  .jgrid>.jcard:not(:first-child) .jcard__meta i,.jmore .jgrid>.jcard .jcard__meta i{display:none}
  .jgrid>.jcard:not(:first-child) .jcard__meta,.jmore .jgrid>.jcard .jcard__meta{column-gap:10px}
}