/* Plot Photography: News (layout C, locked 2026-10-05). The listing (home.php, category.php) and a news item (single.php).
   Ported from pages/_news-base.css, pages/_src-news.html and pages/_src-news-item.html. Loaded on News screens only
   (inc/news.php). A post's body is core blocks: the .ps-story rules give them the mockup's column and rhythm; the
   ps-intro / ps-frame / ps-quote / ps-ready classes (set on the blocks) give the approved photo-story pieces. */

html{scroll-padding-top:112px}

/* ---------- shared: breadcrumb, topics, labels, the stretched title link ---------- */
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 10px;font-size:15px;color:var(--text-muted)}
.crumbs li+li::before{content:"/";margin-right:10px;opacity:.6}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline;text-decoration-color:var(--accent)}
.topic{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--rule);
  font-size:15px;line-height:1;color:var(--text);text-decoration:none;white-space:nowrap}
a.topic:hover{border-color:var(--text)}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:16px;color:var(--text-muted)}
[data-item][hidden]{display:none!important}

/* the topics: a quiet row of words; the current one gets a thin glow underline */
.tf{display:flex;flex-wrap:wrap;gap:0 30px}
.tf a{display:inline-flex;align-items:center;min-height:44px;font-size:18px;color:var(--text-muted);text-decoration:none;
  background:linear-gradient(var(--accent),var(--accent)) 0 calc(100% - 7px)/0 1px no-repeat;
  transition:background-size var(--dur-ui) var(--ease-settle),color var(--dur-ui) var(--ease-settle)}
.tf a:hover{color:var(--text)}
.tf a[aria-current]{color:var(--text);background-size:100% 1px}
.tf-empty{font-size:var(--fs-lead);color:var(--text-muted)}
.stretch{position:relative}
.stretch h2 a,.stretch h3 a{text-decoration:none}
.stretch h2 a::after,.stretch h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.stretch:hover h2 a,.stretch:hover h3 a,.stretch a:focus-visible{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.14em}
.stretch a:focus-visible{outline:none}
.stretch:has(a:focus-visible){outline:2px solid var(--focus);outline-offset:6px;border-radius:4px}
[data-lift] .in,[data-drift] > picture,[data-drift] > img{will-change:transform}
@media (max-width:760px){
  .tf{flex-wrap:nowrap;overflow-x:auto;gap:0 24px;margin-right:calc(-1 * var(--grid-margin));padding-right:var(--grid-margin);scrollbar-width:none}
  .tf::-webkit-scrollbar{display:none}
  .tf a{flex:none;font-size:17px}
}

/* ==================================================================================================================
   THE LISTING: the cover, then a big typographic list with one photo beside it that follows the scroll
   ================================================================================================================== */
.ix-top{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:max(min(94svh,980px),620px);
  padding:128px 0 clamp(44px,4.6vw,76px);overflow:hidden;background:var(--surface)}
.ix-cover{position:absolute;inset:0;z-index:-2;overflow:hidden}
.ix-cover picture{display:block;width:100%;height:100%}
.ix-cover img{width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.ix-top::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(21,18,15,.62) 0%,rgba(21,18,15,0) 20%,rgba(21,18,15,0) 40%,rgba(21,18,15,.34) 52%,rgba(21,18,15,.68) 64%,rgba(21,18,15,.86) 76%,rgba(21,18,15,.93) 88%,var(--plot-night) 100%)}
.ix-top .wrap{width:100%}
.ix-top .crumbs ol{color:rgba(243,238,230,.82)}
.ix-head{margin-top:clamp(18px,2vw,28px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px var(--grid-gutter);align-items:end}
.ix-top h1{grid-column:1 / span 7;font-size:clamp(4.5rem,1.6rem + 10vw,12rem);letter-spacing:-.055em;line-height:.84;margin-left:-.04em}
.ix-side{grid-column:9 / span 4}
.ix-side .dek,.ps-side .dek{font-size:var(--fs-lead);line-height:1.45;color:rgba(243,238,230,.9);text-wrap:balance}
.ix-filter{padding:clamp(36px,3.6vw,52px) 0 clamp(48px,5vw,80px)}
.ix-body .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 var(--grid-gutter);align-items:start}
.ix-list{grid-column:1 / span 7;list-style:none;margin:0;padding:0}
.ix-row{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:10px 28px;padding:clamp(30px,3vw,44px) 0;border-top:1px solid var(--rule)}
.ix-row:last-child{border-bottom:1px solid var(--rule)}
.ix-date{grid-column:1;grid-row:1;padding-top:.6em;font-size:16px;color:var(--text-muted);white-space:nowrap}
.ix-row h2{grid-column:2;font-size:clamp(1.6rem,1.05rem + 1.55vw,2.6rem);letter-spacing:-.03em;line-height:1.06;transition:color var(--dur-ui) var(--ease-settle)}
.ix-topic{grid-column:2;font-size:16px;color:var(--text-muted)}
.ix-list.live .ix-row h2{color:#8f877b}
.ix-list.live .ix-row.on h2,.ix-list.live .ix-row:hover h2{color:var(--text)}
.ix-thumb{display:none}
.ix-pane{grid-column:9 / span 4;position:sticky;top:112px;aspect-ratio:4/5;max-height:calc(100svh - 144px);border-radius:4px;overflow:hidden;background:var(--surface)}
.ix-pane img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(100% 0 0 0)}
.ix-pane > :first-child img,.ix-pane > img:first-child{clip-path:none}
.ix-body .tf-empty{grid-column:1 / span 7}
.ix-end{padding:clamp(80px,8vw,128px) 0}
.ix-end .row{display:flex;align-items:center;justify-content:space-between;gap:24px}
.ix-end .pg{font-size:17px;color:var(--text-muted)}
.ix-end .pg-links{display:flex;flex-wrap:wrap;gap:16px 32px}
@media (max-width:1000px){ .ix-side{grid-column:8 / span 5} }
@media (max-width:900px){
  .ix-head{grid-template-columns:1fr}
  .ix-top h1,.ix-side{grid-column:1}
  .ix-list{grid-column:1 / -1}
  .ix-pane{display:none}
  .ix-row{grid-template-columns:minmax(0,1fr) 96px;gap:8px 20px}
  .ix-date{grid-column:1;grid-row:1;padding-top:0}
  .ix-row h2{grid-column:1;grid-row:2}
  .ix-topic{grid-column:1;grid-row:3}
  .ix-thumb{display:block;grid-column:2;grid-row:1 / span 3;align-self:start;aspect-ratio:4/5;border-radius:4px;overflow:hidden;background:var(--surface)}
  .ix-thumb picture{display:block;width:100%;height:100%}
  .ix-thumb img{width:100%;height:100%;object-fit:cover}
}
@media (max-width:760px){
  .ix-end .row{flex-direction:column;align-items:flex-start}
  .ix-top{min-height:max(84svh,560px);padding-top:100px}
  .ix-cover img{object-position:50% 50%}
  .ix-top::before{background:linear-gradient(180deg,rgba(21,18,15,.6) 0%,rgba(21,18,15,0) 18%,rgba(21,18,15,0) 30%,rgba(21,18,15,.42) 42%,rgba(21,18,15,.78) 54%,rgba(21,18,15,.9) 68%,rgba(21,18,15,.94) 86%,var(--plot-night) 100%)}
  .ix-top h1{font-size:clamp(4.5rem,22vw,6.5rem)}
  .ix-head{gap:18px}
  .ix-row{grid-template-columns:minmax(0,1fr) 88px;padding:24px 0}
  .ix-row h2{font-size:clamp(1.3rem,1.05rem + 1.2vw,1.6rem);line-height:1.12}
  .ix-date,.ix-topic{font-size:15px}
}

/* ==================================================================================================================
   A NEWS ITEM: the photo story. The cover, then one centred column (grid columns 3 to 10) on the dark ground.
   ================================================================================================================== */
.ps-top{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:max(min(96svh,1000px),640px);
  padding:128px 0 clamp(44px,4.6vw,76px);overflow:hidden;background:var(--surface)}
.ps-cover{position:absolute;inset:0;z-index:-2;overflow:hidden}
.ps-cover picture{display:block;width:100%;height:100%}
.ps-cover img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.ps-top::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(21,18,15,.62) 0%,rgba(21,18,15,0) 20%,rgba(21,18,15,0) 34%,rgba(21,18,15,.4) 46%,rgba(21,18,15,.76) 56%,rgba(21,18,15,.88) 66%,rgba(21,18,15,.93) 84%,var(--plot-night) 100%)}
.ps-top .wrap{width:100%}
.ps-head{margin-top:clamp(18px,2vw,28px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px var(--grid-gutter);align-items:end}
.ps-title{grid-column:1 / span 8}
.ps-top h1{font-size:clamp(2.75rem,1.4rem + 4.4vw,6rem);letter-spacing:var(--track-display);line-height:.98}
.ps-side{grid-column:9 / span 4;padding-bottom:.5em}
.ps-kicker{margin-bottom:clamp(14px,1.4vw,20px);font-size:16px;line-height:1.4;color:rgba(243,238,230,.88)}
.ps-kicker a{color:var(--accent);text-decoration:none}
.ps-kicker a:hover{text-decoration:underline}
.ps-kicker > *:not(:last-child)::after{content:"";display:inline-block;width:22px;height:1px;margin:0 12px;background:currentColor;opacity:.55;vertical-align:middle}
.ps-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gutter)}
.ps-grid > *{grid-column:3 / span 8;min-width:0}
.ps-crumbs{padding-top:clamp(28px,2.8vw,40px)}

/* the body: core blocks down the column */
.ps-story > :first-child{margin-top:clamp(56px,6vw,96px)}
.ps-story > p,.ps-story > ul,.ps-story > ol{margin:24px 0 0;font-size:var(--fs-body);line-height:1.65;color:var(--text-muted);max-width:60ch}
.ps-story > ul,.ps-story > ol{padding-left:1.2em}
.ps-story > ul li + li,.ps-story > ol li + li{margin-top:8px}
.ps-story a{color:var(--text)}
.ps-story > h2,.ps-story > .wp-block-heading:is(h2){margin:clamp(72px,7vw,112px) 0 0;max-width:24ch;font-size:clamp(1.6rem,1.2rem + 1.2vw,2.4rem);letter-spacing:-.03em;line-height:1.06}
.ps-story > h3{margin:48px 0 0;font-size:clamp(1.3rem,1.1rem + .5vw,1.6rem);letter-spacing:-.02em;line-height:1.1}
.ps-story > h2 + p,.ps-story > h3 + p{margin-top:16px}
.ps-story > .wp-block-image{margin:clamp(72px,7vw,112px) 0 0}
.ps-story > .wp-block-image + h2,.ps-story > .wp-block-image + .wp-block-heading{margin-top:clamp(28px,2.8vw,40px)}
.ps-story .wp-block-image img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:4px;background:var(--surface)}
.ps-story .wp-block-image picture{display:block}
.ps-story .wp-block-image figcaption{margin-top:12px;font-size:15px;line-height:1.45;color:var(--text-muted);max-width:60ch;text-wrap:balance}
/* the intro: the first line large in the display face, the second a quieter lead */
.ps-story > p.ps-intro{font-family:var(--font-display);font-weight:500;font-size:clamp(1.45rem,1.1rem + 1.2vw,2.25rem);line-height:1.3;letter-spacing:-.015em;color:var(--text);max-width:none}
.ps-story > p.ps-intro + p.ps-intro{font-family:var(--font-text);font-weight:400;font-size:var(--fs-lead);line-height:1.5;letter-spacing:0;color:var(--text-muted);max-width:36em}
/* a tip: photo, heading, paragraph */
.ps-story > .ps-frame{margin:clamp(96px,10vw,152px) 0 0}
.ps-frame .wp-block-image{margin:0}
.ps-frame h2{margin:clamp(28px,2.8vw,40px) 0 0;max-width:24ch;font-size:clamp(1.6rem,1.2rem + 1.2vw,2.4rem);letter-spacing:-.03em;line-height:1.06}
.ps-frame p{margin-top:16px;font-size:var(--fs-body);line-height:1.65;color:var(--text-muted);max-width:60ch}
/* the pull quote */
.ps-story > .ps-quote,.ps-story > .wp-block-quote{margin:clamp(96px,10vw,152px) 0 0;padding:0;border:0}
.ps-story > .ps-quote p,.ps-story > .wp-block-quote p{max-width:18ch;font-family:var(--font-display);font-weight:600;font-size:clamp(2.1rem,1.2rem + 3vw,4rem);line-height:1.04;letter-spacing:-.04em;color:var(--text);text-wrap:balance}
.ps-story > .wp-block-quote cite{display:block;margin-top:18px;font-size:16px;font-style:normal;color:var(--text-muted)}
/* "Getting ready for your shoot": rooms in two columns, ticked lists */
.ps-story > .ps-ready{margin:clamp(96px,10vw,152px) 0 0}
.ps-ready h2{max-width:20ch;font-size:clamp(2rem,1.3rem + 2.2vw,3.2rem);letter-spacing:-.035em;line-height:1.02}
.ps-ready p,.ps-ready-lede{margin-top:16px;font-size:var(--fs-lead);line-height:1.45;color:var(--text-muted);text-wrap:balance}
.ps-rooms{margin-top:clamp(40px,4vw,56px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,3.6vw,52px) var(--grid-gutter)}
.ps-room{padding-top:22px;border-top:1px solid var(--rule)}
.ps-room h3{font-size:clamp(1.3rem,1.1rem + .5vw,1.6rem);letter-spacing:-.02em;line-height:1.1}
.ps-room ul{list-style:none;margin:16px 0 0;padding:0}
.ps-room li{position:relative;padding-left:30px;font-size:var(--fs-body);line-height:1.55;color:var(--text-muted)}
.ps-room li + li{margin-top:10px}
.ps-room li::before{content:"";position:absolute;left:3px;top:.42em;width:11px;height:6px;border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(-45deg)}
/* WordPress wraps a group's inner blocks in a flow layout: keep the column's own spacing */
/* a classic theme wraps a group's blocks in .wp-block-group__inner-container: let them lay out as the group's own children (the rooms grid) */
.ps-story .wp-block-group__inner-container{display:contents}
.ps-story .wp-block-group > *,.ps-story .wp-block-group__inner-container > *{margin-block-start:0}
.ps-story .ps-frame h2{margin-top:clamp(28px,2.8vw,40px)}
.ps-story .ps-frame p{margin-top:16px}
.ps-story .ps-ready p{margin-top:16px}
.ps-story .ps-rooms{margin-top:clamp(40px,4vw,56px)}
.ps-story .ps-room ul{margin-top:16px}

.ps-end{margin-top:clamp(96px,10vw,160px);padding-top:28px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.ps-end p{font-size:var(--fs-lead);line-height:1.45}
.ps-end a{white-space:nowrap}
.ps-end .tags{display:flex;align-items:center;gap:12px;font-size:16px;color:var(--text-muted)}
.ps-more{padding:clamp(96px,10vw,160px) 0 clamp(80px,9vw,144px)}
.ps-more-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:clamp(28px,3vw,44px)}
.ps-more h2.h{font-size:var(--fs-h2);letter-spacing:-.03em;line-height:var(--lh-heading)}
.ps-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px var(--grid-gutter)}
.ps-more .ps-grid > .ps-cards,.ps-more .ps-grid > .ps-more-head{grid-column:3 / span 8}
.ps-card{position:relative}
.ps-card .ph{aspect-ratio:3/2;border-radius:4px;overflow:hidden;background:var(--surface)}
.ps-card .ph picture{display:block;width:100%;height:100%}
.ps-card .ph img{width:100%;height:100%;object-fit:cover}
.ps-card .meta{margin-top:18px;gap:0;font-size:15px;line-height:1.4;color:var(--text-muted)}
.ps-card .meta > *:not(:last-child)::after{content:"";display:inline-block;width:16px;height:1px;margin:0 10px;background:currentColor;opacity:.55;vertical-align:middle}
.ps-card h3{margin-top:10px;font-size:clamp(1.2rem,1rem + .5vw,1.45rem);letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
.ps-card h3 a{text-decoration:none;text-underline-offset:.18em;text-decoration-thickness:1px}
.ps-card h3 a::after{content:"";position:absolute;inset:0}
.ps-card:hover h3 a,.ps-card h3 a:focus-visible{text-decoration:underline}

@media (max-width:1000px){
  .ps-side{grid-column:1 / span 8}
  .ps-title{grid-column:1 / -1}
  .ps-grid > *,.ps-more .ps-grid > .ps-cards,.ps-more .ps-grid > .ps-more-head{grid-column:2 / span 10}
}
@media (max-width:760px){
  .ps-kicker > span:last-child{display:none}
  .ps-kicker > time:not(:last-child)::after{display:none}
  .ps-top{padding-top:100px;min-height:max(86svh,560px)}
  .ps-head{grid-template-columns:1fr;gap:18px}
  .ps-title,.ps-side{grid-column:1}
  .ps-cover img{object-position:56% 50%}
  .ps-top::before{background:linear-gradient(180deg,rgba(21,18,15,.6) 0%,rgba(21,18,15,0) 16%,rgba(21,18,15,0) 26%,rgba(21,18,15,.42) 38%,rgba(21,18,15,.78) 50%,rgba(21,18,15,.9) 64%,rgba(21,18,15,.94) 86%,var(--plot-night) 100%)}
  .ps-grid > *,.ps-more .ps-grid > .ps-cards,.ps-more .ps-grid > .ps-more-head{grid-column:1 / -1}
  .ps-story > .ps-frame,.ps-story > .ps-quote,.ps-story > .wp-block-quote,.ps-story > .ps-ready{margin-top:80px}
  .ps-story > .wp-block-image,.ps-story > h2{margin-top:64px}
  .ps-frame h2,.ps-story .ps-frame h2{margin-top:22px}
  .ps-frame p,.ps-story .ps-frame p{margin-top:12px}
  .ps-rooms{grid-template-columns:1fr}
  .ps-more-head{flex-direction:column;align-items:flex-start}
  .ps-cards{grid-template-columns:1fr;gap:44px}
}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }