/* ================================================================
   news.css: the journal (route news) and the projects' photographic tiles
   (contract, case studies, each project and case study). Loaded after room.css,
   before art.css; reads art.css tokens with fallbacks so it stands on its own.
   ================================================================ */

/* ---------------------------------------------------------------- the journal */
.nw {
  --nw-ink: var(--art-ink, #121212);
  --nw-soft: var(--art-ink-soft, #4b4843);
  --nw-hair: var(--art-hair, rgba(18, 18, 18, .14));
  --nw-green: var(--art-green, #134e3a);
  --nw-serif: var(--art-serif, 'Fraunces', Georgia, serif);
  --nw-sans: var(--art-sans, 'Inter', system-ui, sans-serif);
  padding-top: clamp(40px, 5vw, 80px);
  padding-bottom: clamp(64px, 8vw, 128px);
  color: var(--nw-ink);
}
.nw a { color: inherit; }

/* the masthead of the journal: the title left, the topics right on the same baseline */
.nw-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 48px;
  padding-bottom: clamp(24px, 3vw, 40px); border-bottom: 1px solid var(--nw-ink);
  margin-bottom: clamp(32px, 4vw, 56px);
}
.nw-head .kicker { margin: 0 0 16px; }
.nw-head h1 {
  margin: 0; font-family: var(--nw-serif) !important; font-weight: 400 !important;
  font-size: var(--art-fs-h1, clamp(40px, 5.2vw, 84px)) !important; line-height: 1 !important;
  letter-spacing: var(--art-track-display, -.028em); color: var(--nw-ink); text-transform: none !important;
}
.nw-sub { margin: 20px 0 0; max-width: 46ch; font-size: var(--art-fs-lede, 18px); line-height: 1.5; color: var(--nw-soft); }

.nw-filter { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.nw-chip {
  appearance: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--nw-hair); background: transparent; color: var(--nw-ink); cursor: pointer; border-radius: 0;
  font: 500 14px/1 var(--nw-sans); letter-spacing: 0; text-transform: none;
  transition: background-color var(--art-calm, .35s) ease, border-color var(--art-calm, .35s) ease, color var(--art-calm, .35s) ease;
}
.nw-chip:hover { border-color: var(--nw-ink); }
.nw-chip[aria-pressed="true"] { background: var(--nw-ink); border-color: var(--nw-ink); color: var(--art-cream, #f7f3ea); }
.nw-n { font-size: 12px; font-variant-numeric: tabular-nums; opacity: .72; }

/* the lead story: the photograph hangs like a work, the label beside it */
.nw-lead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.nw-lead.no-photo { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
.nw-lead-photo {
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--art-mat, #fbf9f4); box-shadow: 0 0 0 1px rgba(18, 18, 18, .06), 0 30px 60px -40px rgba(18, 18, 18, .35);
}
.nw-lead-photo .pimg, .nw-thumb .pimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nw-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 0 0 20px; }
.nw-topic {
  margin: 0; font: 500 var(--art-fs-label, 11.5px)/1.2 var(--nw-sans); letter-spacing: var(--art-track-label, .16em);
  text-transform: uppercase; color: var(--nw-green);
}
.nw-meta time { font-size: 14px; color: var(--nw-soft); }
.nw-lead h2 {
  margin: 0; font-family: var(--nw-serif) !important; font-weight: 400 !important; text-transform: none !important;
  font-size: var(--art-fs-h2, clamp(30px, 3.4vw, 54px)) !important; line-height: 1.06 !important; letter-spacing: -.022em;
}
.nw-lead h2 a, .nw-item h3 a { text-decoration: none; }
.nw-lead h2 a:hover, .nw-item h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.nw-lead-text { margin: 20px 0 32px; max-width: 46ch; font-size: var(--art-fs-lede, 18px); line-height: 1.55; color: var(--nw-ink); }

.nw .art-thread { margin: clamp(40px, 5vw, 72px) 0 clamp(8px, 2vw, 24px); }

/* the list: a month heading, then entries as rows of date, story and a small photograph */
.nw-group { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 0 clamp(24px, 3vw, 48px); padding-top: clamp(32px, 4vw, 56px); }
.nw-month {
  margin: 0; padding-top: 28px; align-self: start; position: sticky; top: calc(var(--header-h, 100px) + 24px);
  font-family: var(--nw-serif) !important; font-weight: 400 !important; font-size: var(--art-fs-h3, clamp(21px, 1.7vw, 26px)) !important;
  letter-spacing: -.01em; text-transform: none !important; line-height: 1.2;
}
.nw-items { list-style: none; margin: 0; padding: 0; }
.nw-item {
  display: grid; grid-template-columns: 112px minmax(0, 1fr) 200px; gap: 8px clamp(20px, 2.4vw, 40px);
  padding: 28px 0 32px; border-top: 1px solid var(--nw-hair);
}
.nw-item:not(.has-photo) { grid-template-columns: 112px minmax(0, 1fr); }
.nw-item::before, .nw-item::marker { content: none; }
.nw-when { margin: 0; padding-top: 2px; font-size: 14px; line-height: 1.4; color: var(--nw-soft); font-variant-numeric: tabular-nums; }
.nw-body .nw-topic { margin-bottom: 10px; }
.nw-item h3 {
  margin: 0 0 10px; font-family: var(--nw-serif) !important; font-weight: 400 !important; text-transform: none !important;
  font-size: clamp(22px, 1.9vw, 28px) !important; line-height: 1.15; letter-spacing: -.015em;
}
.nw-body > p:not(.nw-topic) { margin: 0 0 14px; max-width: 58ch; font-size: 16px; line-height: 1.6; color: var(--nw-ink); }
.nw-link {
  display: inline-flex; align-items: center; min-height: 44px; font: 500 14px/1.3 var(--nw-sans);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
}
.nw-link:hover { text-decoration-thickness: 2px; }
.nw-thumb { position: relative; display: block; align-self: start; aspect-ratio: 4 / 3; overflow: hidden; background: var(--art-mat, #fbf9f4); }
.nw-none { padding: 48px 0; color: var(--nw-soft); }

/* the close: a quiet pointer to the letter in the footer */
.nw-next {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 8px clamp(24px, 3vw, 48px);
  margin-top: clamp(48px, 6vw, 96px); padding-top: 28px; border-top: 1px solid var(--nw-ink);
}
.nw-next .kicker { margin: 4px 0 0; }
.nw-next-t { margin: 0 0 8px; font-family: var(--nw-serif); font-size: clamp(22px, 2vw, 30px); line-height: 1.25; letter-spacing: -.012em; max-width: 30ch; }
.nw-next .arrow-link { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 1080px) {
  .nw-head { grid-template-columns: minmax(0, 1fr); }
  .nw-filter { justify-content: flex-start; }
  .nw-group { grid-template-columns: minmax(0, 1fr); }
  .nw-month { position: static; padding-top: 0; margin-bottom: 8px; }
  .nw-next { grid-template-columns: minmax(0, 1fr); }
  .nw-next .arrow-link { grid-column: 1; }
}
@media (max-width: 760px) {
  .nw-lead { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .nw-item, .nw-item:not(.has-photo) { grid-template-columns: minmax(0, 1fr) 104px; gap: 4px 16px; padding: 24px 0; }
  .nw-when { grid-column: 1 / -1; }
  .nw-body { grid-column: 1; grid-row: 2; }
  .nw-thumb { grid-column: 2; grid-row: 2; }
  .nw-item:not(.has-photo) .nw-body { grid-column: 1 / -1; }
  .nw-filter { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 2px 16px; scrollbar-width: none; }
  .nw-filter::-webkit-scrollbar { display: none; }
  .nw-chip { flex: none; }
}

/* ---------------------------------------------------------------- projects: photographic tiles
   A project, case study or specified piece hangs as a photograph with its label beneath, on the
   wall, never white words over a picture. (The house's tile rules used to collapse the window to
   no height when the label was set for a dark ground, so the photographs never showed.) */
#page :is(.card-grid, .tile-row) > a.tile.pj-tile {
  display: grid !important; grid-template-columns: minmax(0, 1fr) 44px; grid-template-rows: auto auto;
  column-gap: 16px; align-items: start;
  aspect-ratio: auto !important; height: auto !important; overflow: visible !important;
  background: transparent !important; border-radius: 0 !important; text-decoration: none; color: var(--art-ink, #121212);
}
#page :is(.card-grid, .tile-row) > a.tile.pj-tile > .art {
  position: relative !important; inset: auto !important; grid-column: 1 / -1; grid-row: 1;
  width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--art-mat, #fbf9f4) !important; transform: none !important;
  -webkit-mask-image: none !important; mask-image: none !important; clip-path: none !important;
}
#page :is(.card-grid, .tile-row) > a.tile.pj-tile > .art::after { content: none !important; display: none !important; }
#page :is(.card-grid, .tile-row) > a.tile.pj-tile > .art > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#page :is(.card-grid, .tile-row) > a.tile.pj-tile > .art > .pimg {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover;
  transition: transform var(--art-slow, .9s) var(--art-ease, ease);
}
#page :is(.card-grid, .tile-row) > a.tile.pj-tile:hover > .art > .pimg { transform: scale(1.025); }
#page :is(.card-grid, .tile-row) > a.tile.pj-tile > .label,
#page :is(.card-grid, .tile-row) > a.tile.pj-tile > .label.on-dark {
  position: static !important; grid-column: 1; grid-row: 2; margin: 16px 0 0 !important; z-index: auto;
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--art-serif, Georgia, serif) !important; font-weight: 400 !important; text-transform: none !important;
  font-size: clamp(20px, 1.6vw, 24px) !important; line-height: 1.2 !important; letter-spacing: -.012em !important;
  color: var(--art-ink, #121212) !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important;
}
#page :is(.card-grid, .tile-row) > a.tile.pj-tile > .label small {
  order: -1; font: 500 var(--art-fs-label, 11.5px)/1.3 var(--art-sans, Inter, sans-serif); letter-spacing: var(--art-track-label, .16em);
  text-transform: uppercase; color: var(--art-ink-soft, #4b4843);
}
#page :is(.card-grid, .tile-row) > a.tile.pj-tile > .plus {
  position: static !important; grid-column: 2; grid-row: 2; align-self: end; margin-top: 16px;
  width: 44px !important; height: 44px !important; display: grid !important; place-items: center;
  border: 1px solid var(--art-ink, #121212); background: transparent !important; color: var(--art-ink, #121212) !important;
  font: 400 20px/1 var(--art-sans, Inter, sans-serif); transform: none !important; border-radius: 0 !important;
  transition: background-color var(--art-calm, .35s) ease, color var(--art-calm, .35s) ease;
}
#page :is(.card-grid, .tile-row) > a.tile.pj-tile:hover > .plus { background: var(--art-ink, #121212) !important; color: var(--art-cream, #f7f3ea) !important; }
#page :is(.card-grid, .tile-row) > a.tile.pj-tile::before, #page :is(.card-grid, .tile-row) > a.tile.pj-tile::after { content: none !important; display: none !important; }
#page .tile-row:has(> a.tile.pj-tile) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px) clamp(16px, 2vw, 32px); }
#page .card-grid:has(> a.tile.pj-tile) { gap: clamp(40px, 5vw, 72px) clamp(20px, 3vw, 48px) !important; }
@media (max-width: 860px) {
  #page .tile-row:has(> a.tile.pj-tile) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  #page .tile-row:has(> a.tile.pj-tile), #page .card-grid[style*="1fr 1fr"]:has(> a.tile.pj-tile) { grid-template-columns: minmax(0, 1fr) !important; }
}

/* the section links beside project tiles keep a full tap target */
#page section:has(.pj-tile) .section-head .arrow-link { display: inline-flex; align-items: center; min-height: 44px; }
#page :is(.card-grid, .tile-row) > a.tile.pj-tile > .plus { align-self: center !important; }
/* the tile hangs on the wall, not on a painted field: no field colour is left for anything to read */
#page a.tile.pj-tile.fv-field { --fv-f: transparent !important; }

/* ---------------------------------------------------------------- the newsroom (route press)
   An editorial lead release with one large photograph, releases under a dateline, a fact sheet,
   a media kit and one contact. Space separates every part: no rules, no dividers. */
.px { --px-gap: clamp(72px, 9vw, 144px); }
.px .kicker { margin: 0 0 14px; }
.px-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 48px;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.px-head h1 {
  margin: 0; font-family: var(--nw-serif) !important; font-weight: 400 !important; text-transform: none !important;
  font-size: var(--art-fs-h1, clamp(44px, 5.6vw, 92px)) !important; line-height: 1 !important; letter-spacing: var(--art-track-display, -.028em);
}
.px-nav { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.px-nav a {
  display: inline-flex; align-items: center; min-height: 44px; font: 500 15px/1 var(--nw-sans); color: var(--nw-ink);
  text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 0 1px no-repeat;
  transition: background-size var(--art-calm, .35s) ease;
}
.px-nav a:hover, .px-nav a:focus-visible { background-size: 100% 1px; }

/* dateline: house topic, city, date */
.px-dateline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 0 0 18px; font: 400 14px/1.3 var(--nw-sans); color: var(--nw-soft); }
.px-topic { font: 500 var(--art-fs-label, 11.5px)/1.2 var(--nw-sans); letter-spacing: var(--art-track-label, .16em); text-transform: uppercase; color: var(--nw-green); }
.px-dateline time { font-variant-numeric: tabular-nums; }

/* the lead: the photograph hangs large, the release beside it */
.px-lead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 80px); align-items: center; scroll-margin-top: calc(var(--header-h, 100px) + 24px); }
.px-lead-photo, .px-thumb {
  position: relative; margin: 0; overflow: hidden; background: var(--art-mat, #fbf9f4);
  box-shadow: 0 0 0 1px rgba(18, 18, 18, .06), 0 30px 60px -40px rgba(18, 18, 18, .35);
}
.px-lead-photo { aspect-ratio: 5 / 4; }
.px-thumb { aspect-ratio: 4 / 3; }
.px-lead-photo .pimg, .px-thumb .pimg { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover; transform: none !important; }
.px-lead h2, .px-item h3 {
  margin: 0; font-family: var(--nw-serif) !important; font-weight: 400 !important; text-transform: none !important; color: var(--nw-ink);
}
.px-lead h2 { font-size: clamp(30px, 3.2vw, 50px) !important; line-height: 1.08 !important; letter-spacing: -.022em; text-wrap: balance; }
.px-item h3 { font-size: clamp(23px, 2vw, 31px) !important; line-height: 1.15 !important; letter-spacing: -.015em; text-wrap: balance; }
.px-stand { margin: 18px 0 0; max-width: 48ch; font-size: var(--art-fs-lede, 18px); line-height: 1.55; color: var(--nw-ink); text-wrap: pretty; }

/* the full release opens in place */
.px-full { margin-top: 26px; }
.px-full > summary {
  display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; list-style: none;
  font: 500 15px/1.3 var(--nw-sans); color: var(--nw-ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
}
.px-full > summary::-webkit-details-marker { display: none; }
.px-full > summary:hover { text-decoration-thickness: 2px; }
.px-full .px-close, .px-full[open] .px-open { display: none; }
.px-full[open] .px-close { display: inline; }
.px-full-body { padding-top: 18px; max-width: 62ch; }
.px-full-body p { margin: 0 0 16px; font: 400 16.5px/1.7 var(--nw-sans); color: var(--nw-ink); text-wrap: pretty; }
.px-full-body b { font-weight: 600; }
.px-links { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 22px !important; }
.px-links .arrow-link { display: inline-flex; align-items: center; min-height: 44px; }
.px-ends { color: var(--nw-soft) !important; font-size: 14.5px !important; }

/* more releases: photograph left, release right, space between */
.px-h {
  margin: 0; font-family: var(--nw-serif) !important; font-weight: 400 !important; text-transform: none !important;
  font-size: var(--art-fs-h2, clamp(30px, 3vw, 46px)) !important; line-height: 1.08 !important; letter-spacing: -.02em; color: var(--nw-ink);
}
.px-list { margin-top: var(--px-gap); }
.px-list > .px-h { margin-bottom: clamp(32px, 4vw, 56px); }
.px-items { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(48px, 6vw, 88px); }
.px-item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 3.4vw, 64px); align-items: start; }
.px-item::marker { content: none; }

/* fact sheet: four figures large, then the profile */
.px-facts, .px-kit, .px-contact { margin-top: var(--px-gap); scroll-margin-top: calc(var(--header-h, 100px) + 24px); }
.px-sec-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 56px); }
.px-sec-sub { margin: 16px 0 0; max-width: 54ch; font-size: 17px; line-height: 1.6; color: var(--nw-soft); }
.px-figures { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px clamp(20px, 3vw, 48px); }
.px-figures dt { font-family: var(--nw-serif); font-weight: 400; font-size: clamp(30px, 3.2vw, 50px); line-height: 1.04; letter-spacing: -.022em; color: var(--nw-green); }
.px-figures dd { margin: 12px 0 0; max-width: 26ch; font: 400 15.5px/1.55 var(--nw-sans); color: var(--nw-ink); }
.px-profile { margin: clamp(44px, 5vw, 72px) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px clamp(20px, 3vw, 48px); }
.px-profile dt { font: 500 var(--art-fs-label, 11.5px)/1.3 var(--nw-sans); letter-spacing: var(--art-track-label, .16em); text-transform: uppercase; color: var(--nw-soft); }
.px-profile dd { margin: 10px 0 0; font: 400 16px/1.55 var(--nw-sans); color: var(--nw-ink); }

/* media kit: each mark on its own cream mat */
.px-kit-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.px-kit-i { display: flex; flex-direction: column; gap: 10px; }
.px-kit-i::marker { content: none; }
.px-kit-art { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--art-mat, #fbf9f4); box-shadow: 0 0 0 1px rgba(18, 18, 18, .06); }
.px-kit-art img { width: 46%; height: auto; }
.px-kit-t { margin-top: 8px; font-family: var(--nw-serif); font-size: 21px; line-height: 1.2; letter-spacing: -.01em; color: var(--nw-ink); }
.px-kit-i .arrow-link { display: inline-flex; align-items: center; min-height: 44px; align-self: flex-start; }
.px-kit-i--dark .px-kit-art { background: var(--nw-green); box-shadow: none; }
.px-kit-req { justify-content: flex-end; }
.px-kit-req p { margin: 0; max-width: 34ch; font: 400 15.5px/1.55 var(--nw-sans); color: var(--nw-soft); }

/* contact */
.px-contact { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px clamp(24px, 4vw, 80px); align-items: end; }
.px-contact-act { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.px-mail { font: 400 18px/1.3 var(--nw-sans); color: var(--nw-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; min-height: 44px; display: inline-flex; align-items: center; }
.px-contact-act .arrow-link { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 1080px) {
  .px-head, .px-contact { grid-template-columns: minmax(0, 1fr); }
  .px-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px-kit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .px-lead, .px-item { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .px-lead-photo { aspect-ratio: 4 / 3; }
  .px-nav { gap: 0 22px; }
  .px-kit-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) { .px-figures { grid-template-columns: minmax(0, 1fr); } }