/* From the jobsite: an index of real jobs and one page per job.
   Same paper, ink and hairlines as the rest of the site. The photos are
   the evidence, so they are never cropped on the job page, and the text
   sits in one comfortable column. */

/* ---------- shared ---------- */
.journal-label { font-size: var(--step--2); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.6; color: var(--fg-2); }
.journal-label span { font-weight: 500; letter-spacing: .06em; color: var(--fg-3); }

.journal-link { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; font-size: var(--step--1); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.journal-link:hover { text-decoration-thickness: 2px; }

.journal-section-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .4rem 2rem; }
.journal-section-head > p { max-width: 28rem; font-size: var(--step--1); line-height: 1.55; color: var(--fg-2); }

/* ---------- index: intro ---------- */
.journal-intro { padding-top: clamp(2rem, 1.4rem + 3vw, 4rem); padding-bottom: clamp(1.75rem, 1.2rem + 2.4vw, 3rem); }
.journal-intro__row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.25rem clamp(2rem, 5vw, 4.5rem); align-items: end; margin-top: 1.2rem; }
.journal-intro h1 { font-size: var(--step-5); line-height: 1; letter-spacing: -.045em; }
.journal-intro h1 em { font-style: normal; font-weight: 500; color: var(--fg-2); }
.journal-intro__row p { max-width: 32rem; font-size: var(--step-1); line-height: 1.6; color: var(--fg-2); }
.journal-intro__row .journal-count { margin-top: .9rem; font-size: var(--step--2); color: var(--fg-3); }

/* ---------- index: featured job ---------- */
.journal-first { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); background: var(--paper-2); background-clip: content-box; }
.journal-first__photo { display: block; overflow: hidden; aspect-ratio: 5 / 4; background: var(--paper-3); }
.journal-first__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; transition: transform .5s ease; }
.journal-first:hover .journal-first__photo img { transform: scale(1.02); }
.journal-first__copy { align-self: center; padding: clamp(1.5rem, 1rem + 2.6vw, 3.5rem); }
.journal-first h2 { font-size: var(--step-4); line-height: 1.06; margin: .9rem 0 1rem; }
.journal-first h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.journal-first__copy > p:not(.journal-label) { font-size: var(--step-0); line-height: 1.65; color: var(--fg-2); margin-bottom: .6rem; }

/* ---------- index: browse by type ---------- */
.journal-browse {
  display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1rem; padding-bottom: 1rem;
  /* hairlines across the content only, not into the gutters */
  background:
    linear-gradient(var(--rule-thin), var(--rule-thin)) center top / calc(100% - 2 * var(--gutter)) 1px no-repeat,
    linear-gradient(var(--rule-thin), var(--rule-thin)) center bottom / calc(100% - 2 * var(--gutter)) 1px no-repeat;
}
.journal-browse > div { display: flex; flex-wrap: wrap; gap: .5rem; }
.journal-browse a { display: inline-flex; align-items: center; gap: .7rem; min-height: 44px; padding: .45rem .95rem; border: 1px solid var(--rule-mid); background: var(--paper); font-size: var(--step--1); font-weight: 600; transition: background .15s, color .15s, border-color .15s; }
.journal-browse a span { font-size: var(--step--2); font-variant-numeric: tabular-nums; color: var(--fg-3); }
.journal-browse a:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.journal-browse a:hover span { color: var(--on-ink-2); }

/* ---------- index: one section per type of work ---------- */
.journal-category { padding-top: clamp(2.5rem, 1.8rem + 3vw, 4.25rem); scroll-margin-top: 88px; }
.journal-category .journal-section-head { padding-bottom: .9rem; border-bottom: 1.5px solid var(--ink); }
.journal-category .journal-section-head h2 { font-size: var(--step-3); }

/* ---------- job card ----------
   In the index list it is a row: photo, story, total.
   In the related grid it is a card: photo on top. */
.job-card { min-width: 0; }
.job-card__image { grid-area: img; display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper-3); }
.job-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.job-card:hover .job-card__image img { transform: scale(1.035); }
.job-card__meta { grid-area: meta; }
.job-card__price { grid-area: price; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.job-card__price small { font-size: var(--step--2); font-weight: 500; letter-spacing: .02em; color: var(--fg-3); }
.job-card h3 { grid-area: title; }
.job-card h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.job-card__desc { grid-area: desc; max-width: 38rem; line-height: 1.6; color: var(--fg-2); }
.job-card__link { grid-area: link; align-self: start; }

.journal-list .job-card {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto 1fr;
  grid-template-areas: "img meta price" "img title price" "img desc price" "img link price";
  column-gap: clamp(1.25rem, 3vw, 2.75rem);
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--rule-thin);
}
.journal-list .job-card:last-child { border-bottom: 0; }
.journal-list .job-card h3 { font-size: var(--step-2); margin: .35rem 0 .55rem; }
.journal-list .job-card__desc { font-size: var(--step-0); }
.journal-list .job-card__link { margin-top: .35rem; }
.journal-list .job-card__price { text-align: right; font-size: var(--step-2); padding-top: .15rem; }
.journal-list .job-card__price small { display: block; margin-top: .35rem; }

.journal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.75rem 1.75rem; }
.journal-grid .job-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "img img" "meta meta" "title title" "desc desc" "link price"; align-content: start; align-items: center; column-gap: 1rem; }
.journal-grid .job-card__image { margin-bottom: 1rem; }
.journal-grid .job-card__price { font-size: var(--step-0); text-align: right; }
.journal-grid .job-card__price small { margin-left: .3rem; }
.journal-grid .job-card h3 { font-size: var(--step-1); line-height: 1.2; margin: .5rem 0 .55rem; }
.journal-grid .job-card__desc { font-size: var(--step--1); }

/* ---------- call panel ---------- */
.journal-call { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.75rem 3rem; align-items: center; margin: clamp(3rem, 6vw, 4.5rem) 0; padding: clamp(1.5rem, 1rem + 2.6vw, 3.25rem); background: var(--paper-3); }
.journal-call > div { min-width: 0; }
.journal-call h2 { font-size: var(--step-4); line-height: 1.06; margin: .8rem 0 1rem; }
.journal-call p:not(.journal-label) { max-width: 34rem; color: var(--fg-2); }
.journal-call__actions { display: flex; flex-direction: column; align-items: stretch; gap: .35rem; text-align: center; }
.journal-call__actions .journal-link { justify-content: center; }
.journal-call__actions > p:not(.journal-label) { margin-inline: auto; font-size: var(--step--1); color: var(--fg-3); }
.journal-call .btn { white-space: normal; }

/* ---------- job page: header ---------- */
.story-header { padding-top: clamp(1.25rem, 1rem + 1.4vw, 2.25rem); padding-bottom: clamp(1.5rem, 1.1rem + 2vw, 2.5rem); }
.story-header > .journal-label { margin: clamp(1.25rem, 1rem + 1.5vw, 2.25rem) 0 .8rem; }
.story-header h1 { max-width: 24ch; font-size: clamp(2.05rem, 1.35rem + 3vw, 3.9rem); line-height: 1.05; letter-spacing: -.04em; }
.story-deck { max-width: 40rem; margin-top: 1.1rem; font-size: var(--step-1); line-height: 1.55; color: var(--fg-2); }
.story-byline { display: flex; align-items: center; gap: .85rem; max-width: 48rem; margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--rule-thin); font-size: var(--step--1); line-height: 1.45; }
.story-byline time { font-size: var(--step--2); color: var(--fg-3); }
.story-avatar { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--rule-mid); border-radius: 50%; font-weight: 800; }
.story-photo-count { margin-left: auto; font-size: var(--step--2); color: var(--fg-3); white-space: nowrap; }

/* ---------- job page: photos, side by side at their own shape ---------- */
.story-photos { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); gap: clamp(.75rem, 1.6vw, 1.25rem); align-items: start; }
.story-photos--2 { --cols: 2; }
.story-photos--3 { --cols: 3; }
.story-photos--4 { --cols: 2; max-width: 64rem; }
.story-photos--1.story-photos--landscape { max-width: 56rem; }
.story-photos--1.story-photos--portrait { max-width: 30rem; }
.story-photos--2.story-photos--portrait { max-width: 54rem; }
.story-photos figure { min-width: 0; }
.story-photos a { display: block; position: relative; overflow: hidden; background: var(--paper-3); }
.story-photos img { width: 100%; height: auto; transition: transform .45s ease; }
.story-photos a:hover img { transform: scale(1.02); }
.story-photos a::after { content: '↗'; position: absolute; right: .7rem; bottom: .7rem; padding: .1rem .55rem; background: var(--paper); font-size: 1.05rem; line-height: 1.5; opacity: 0; transition: opacity .2s; }
.story-photos a:hover::after, .story-photos a:focus-visible::after { opacity: 1; }
.story-photos figcaption { padding-top: .6rem; font-size: var(--step--1); line-height: 1.5; color: var(--fg-2); }

/* ---------- job page: the story, with the facts beside it ---------- */
.story-main { display: grid; grid-template-columns: minmax(0, 40rem) minmax(15rem, 19rem); grid-template-areas: "body facts"; justify-content: space-between; align-items: start; gap: 2rem clamp(2.5rem, 6vw, 6rem); padding-top: clamp(2.25rem, 1.6rem + 3vw, 4rem); }

.story-facts { grid-area: facts; position: sticky; top: 6.5rem; padding-top: 1rem; border-top: 1.5px solid var(--ink); }
.story-facts dl { margin-top: .4rem; }
.story-facts dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--rule-thin); }
.story-facts dt { font-size: var(--step--1); color: var(--fg-2); }
.story-facts dd { font-size: var(--step--1); font-weight: 650; text-align: right; }
.story-facts .story-facts__price dd { font-size: var(--step-3); font-weight: 800; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.price-note { margin-top: .9rem; font-size: var(--step--2); line-height: 1.6; color: var(--fg-2); }
.story-facts__links { display: flex; flex-direction: column; margin-top: 1rem; padding-top: .4rem; border-top: 1px solid var(--rule-thin); }
.story-facts__links a { display: flex; align-items: center; min-height: 40px; font-size: var(--step--1); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.story-facts__links a:hover { text-decoration-thickness: 2px; }

.story-body { grid-area: body; min-width: 0; }
.story-body > .journal-label { margin-bottom: .4rem; }
.story-body h2 { font-size: var(--step-3); line-height: 1.1; margin: 2.4rem 0 .85rem; }
.story-body > .journal-label + h2 { margin-top: 0; }
.story-body > p:not(.journal-label) { max-width: 38rem; margin-bottom: 1.15rem; font-size: clamp(1.06rem, 1rem + .25vw, 1.18rem); line-height: 1.7; color: var(--fg); }
.story-body > p.story-lead { font-size: var(--step-1); line-height: 1.6; }
.story-benefit { margin-top: 2.5rem; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border-left: 3px solid var(--ink); background: var(--paper-2); }
.story-body .story-benefit h2 { margin: 0 0 .6rem; font-size: var(--step-2); line-height: 1.15; }
.story-benefit p { line-height: 1.65; color: var(--fg-2); }

/* ---------- job page: more jobs ---------- */
.journal-related { padding-top: clamp(3rem, 2rem + 4vw, 5rem); padding-bottom: clamp(3rem, 2rem + 4vw, 5rem); }
.journal-related .journal-section-head { align-items: end; margin-bottom: 1.75rem; }
.journal-related .journal-section-head h2 { font-size: var(--step-4); margin-top: .5rem; }

/* ---------- header fit on this page ---------- */
@media (min-width: 901px) and (max-width: 1180px) { .hd__book { display: none; } }

/* ---------- tablet ---------- */
@media (max-width: 900px) {
  .journal-list .job-card { grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr) auto; }
  .story-main { grid-template-columns: minmax(0, 1fr) minmax(13rem, 16rem); gap: 2rem 2.5rem; }
  .journal-grid { gap: 2.25rem 1.25rem; }
}

/* ---------- phone ---------- */
@media (max-width: 700px) {
  .journal-intro__row { grid-template-columns: 1fr; }
  .journal-first { grid-template-columns: 1fr; }
  .journal-first__photo { aspect-ratio: 4 / 3; }
  .journal-first__copy { padding: 1.4rem 1.25rem 1.5rem; }
  .journal-browse { gap: .6rem; }

  .journal-list .job-card { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: none; grid-template-areas: "img img" "meta meta" "title title" "desc desc" "link price"; align-items: center; column-gap: 1rem; padding: 1.6rem 0; }
  .journal-list .job-card__image { aspect-ratio: 3 / 2; margin-bottom: .95rem; }
  .journal-list .job-card__price { font-size: var(--step-0); padding-top: .35rem; }
  .journal-list .job-card__price small { display: inline; margin: 0 0 0 .3rem; }
  .journal-list .job-card h3 { font-size: var(--step-2); }

  .journal-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .journal-grid .job-card__image { aspect-ratio: 3 / 2; }

  .journal-call { grid-template-columns: 1fr; }
  .journal-call .btn { width: 100%; }

  .story-byline { flex-wrap: wrap; }

  /* several photos become a swipeable strip; the next one peeks in */
  .story-photos:not(.story-photos--1) { display: flex; max-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .story-photos::-webkit-scrollbar { display: none; }
  .story-photos:not(.story-photos--1) figure { flex: 0 0 86%; scroll-snap-align: start; }
  .story-photos--portrait:not(.story-photos--1) figure { flex-basis: 74%; }
  .story-photos--1.story-photos--portrait { max-width: none; }

  .story-main { grid-template-columns: 1fr; grid-template-areas: "facts" "body"; padding-top: 1.75rem; }
  .story-facts { position: static; padding: 1.1rem 1.2rem .6rem; border-top: 0; background: var(--paper-2); }
  .story-body h2 { margin-top: 2rem; }
  .story-benefit { margin-top: 2rem; }

  .journal-related .journal-section-head { display: block; }
}
@media (max-width: 600px) { .tel__n { white-space: nowrap; font-size: .78rem; } }

@media (prefers-reduced-motion: reduce) {
  .job-card__image img, .journal-first__photo img, .story-photos img { transition: none; }
  .job-card:hover .job-card__image img, .journal-first:hover .journal-first__photo img, .story-photos a:hover img { transform: none; }
}