/* PETER FLEMMING / LIGHT PREVIEW / CONSOLIDATED CSS, NOVEMBER 2026
   Replace pfnet-preview-light/assets/preview.css with this file.
   Edit ONLY --site-font below to change the font across the site.
   External fonts require internet access while previewing; other assets remain local.
*/

/* 00 / FREE FONTS (SIL Open Font License) / choose one under --site-font
   Google Fonts is used for this temporary preview only.
   Once the design is chosen, the selected font can be self-hosted.
*/
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=Instrument+Sans:wght@400;500;600;700&display=swap');


/* 01 / Colour system */
/* CHANGE THIS ONE SETTING TO TRY DIFFERENT FONTS:
   --site-font: 'Instrument Sans', Arial, sans-serif;   Refined, contemporary (default)
   --site-font: 'DM Sans', Arial, sans-serif;           Understated, editorial
   --site-font: 'IBM Plex Sans', Arial, sans-serif;     Distinctive, technical
   (Use only one --site-font line at a time.)
*/
:root {
--site-font: 'IBM Plex Sans', Arial, sans-serif;
--bg: #e8e7e1;
--surface: #f1f0eb;
--surface-soft: #e0dfd7;
--fg: #262b2b;
--muted: #626967;
--accent: #826a28;
--accent-hover: #61511e;
--line: #d1d0c7;
--nav: #e8e7e1;
--card: #ebeae4;
--thumbborder: #cac9bf;
--content-width: 1240px;
--body-width: 910px;
}

/* 02 / Basic typography and surfaces */
html { font-size: 16px; scroll-behavior: auto; background: var(--bg); }
*, *::before, *::after { box-sizing: border-box; }
body { margin:0; color:var(--fg); background:var(--bg); font-family: var(--site-font); font-size: .96rem; line-height:1.55; overflow-wrap:break-word; }
body, .pure-g [class*="pure-u"] { font-family: var(--site-font); }
p { margin: 0 0 1.15em; }
h1,h2,h3,h4,h5,h6 { color:var(--fg); line-height:1.23; font-weight:500; letter-spacing:-.015em; }
h1 {font-size:2.1rem;} h2 {font-size:1.75rem;} h3 {font-size:1.22rem;} h4 {font-size:1.04rem;} h5 {font-size:.92rem;}
small,.text-muted {color:var(--muted) !important;}
hr {background:var(--line);color:var(--line);height:1px;border:0;margin:1.4rem 0;}
a, a:link, a:visited {color:var(--accent);text-decoration:none;font-weight:500;}
a:hover, a:focus-visible, a:active {color:var(--accent-hover);text-decoration:underline;}
:focus-visible {outline:2px solid var(--accent);outline-offset:3px;}
blockquote {border-left:2px solid var(--accent); padding-left:1.1rem; margin:1.2rem 0; background:transparent;}
pre,code {color:var(--fg);background:var(--surface-soft);}
img {max-width:100%;border-radius:0;}

/* 03 / Navigation. Remains on-screen rather than hiding on scroll. */
.navbar.navbar-default.navbar-fixed-top, #hideme { top:0 !important; background:var(--nav); border:0; border-bottom:1px solid var(--line); min-height:64px; box-shadow:none; }
.navbar .container {max-width:1288px;width:100%;padding:0 24px;}
.navbar-header {padding-left:0;}
.navbar-brand, .navbar-default .navbar-brand, .navbar-default .navbar-brand:visited {font-size:1.3rem; font-weight:600; letter-spacing:.015em; color:var(--fg); height:auto; padding:20px 0; line-height:24px;position:relative;}
.navbar-brand::after {content:"";height:2px;width:29px;background:var(--accent);position:absolute;bottom:9px;left:0;}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {color:var(--accent);background:transparent;text-decoration:none;}
.navbar-nav {padding-right:0;margin:0;}
.navbar-default .navbar-nav > li > a {font-size:.86rem;line-height:24px;padding:20px 15px;color:var(--muted);font-weight:500;}
.navbar-default .navbar-nav > li > a:hover,.navbar-default .navbar-nav > li > a:focus {color:var(--fg);background:transparent;text-decoration:none;}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {color:var(--accent);background:transparent;box-shadow:inset 0 -2px 0 var(--accent);}
.navbar-default .navbar-toggle {border:1px solid var(--line); margin-top:13px;margin-bottom:13px;}
.navbar-default .navbar-toggle .icon-bar {background:var(--fg);}
.navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus {background:var(--surface-soft);}
.navbar-default .navbar-collapse {border-color:var(--line); box-shadow:none;}

/* 04 / Main content and consistent margins */
.wrapper {max-width:var(--content-width);margin:0 auto;padding:0;}
.wrapper.padding {padding:99px 22px 50px;}
section#body {min-height:calc(100vh - 110px);}
.item {width:100%;max-width:var(--body-width);}
.item p,.item ul,.item ol {line-height:1.6;}
.item .title {margin:24px 0 5px;font-size:1.85rem;font-weight:600;}
.item .subtitle {font-size:1.15rem;line-height:1.4;margin:0 0 9px;color:var(--muted);}
.item .date {margin:0 0 19px;font-size:1.05rem;color:var(--muted);font-weight:400;}
.item > small {display:block;margin:12px 0 4px;}
.file-list,.video-title {margin:1.4rem 0 .45rem;font-weight:600;}
.video-description {max-width:var(--body-width);margin-bottom:1.8rem;line-height:1.55;}
.video-responsive {border-radius:0;}
.pdf_list {width:auto;max-width:38px;max-height:48px;margin:5px 7px 8px 0;}
.table,table {max-width:100%;} td {border-color:var(--line);}

/* 05 / Responsive grids, rectangular images, always-visible captions */
.pure-g {display:flex;flex-wrap:wrap;align-items:flex-start;margin:0 -9px;letter-spacing:normal;}
.pure-g > [class*="pure-u"] {width:33.333333% !important;min-width:0; flex:0 0 33.333333%;}
.grid-pad,.grid-pad-sq {padding:9px;}
.overlay-container {width:100%;position:relative;}
.overlay-container img.pure-img {display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--surface-soft);border:1px solid var(--thumbborder);}
.overlay,.overlay-2 {position:static;opacity:1;display:block;width:auto;min-height:2.2rem;background:transparent;color:var(--fg);text-align:left;padding:10px 2px 15px;font-size:.93rem;line-height:1.35;pointer-events:auto;transition:none;}
.overlay-container:hover .overlay, .overlay-container:hover .overlay-2 {opacity:1;}
.overlay a, .overlay a:link, .overlay a:visited, .overlay-2 a, .overlay-2 a:link, .overlay-2 a:visited,
a.list-item, a.list-item:link, a.list-item:visited {color:var(--fg);font-weight:500;text-decoration:none;}
.overlay a:hover,.overlay a:focus-visible,.overlay-2 a:hover,.overlay-2 a:focus-visible,a.list-item:hover,a.list-item:focus-visible {color:var(--accent);text-decoration:none;}
.overlay strong {font-weight:600;}
.overlay h4 {font-size:.97rem;line-height:1.3;margin:0 0 .3rem;font-weight:600;}
.overlay h5 {font-size:.82rem;color:var(--muted);line-height:1.4;margin:0;font-weight:400;}
.overlay p {font-size:.82rem;color:var(--muted);}
.overlay-container > a:first-child {display:block;}
.overlay-container > a:first-child img {transition:opacity .16s ease;}
.overlay-container > a:first-child:hover img {opacity:.84;}
.related {font-size:1.25rem;margin:37px 0 16px;padding:0 0 10px;border-bottom:1px solid var(--line);}

/* 06 / Galleries: retain existing lightSlider functionality */
.grav-lightslider {max-width:100%;margin:0 0 18px;}
.grav-lightslider img {display:block;width:auto;height:auto;max-width:100%;max-height:74vh;margin:auto;object-fit:contain;border:0;border-radius:0;}
.lSSlideOuter {max-width:100%;}
.lSSlideOuter .lSPager.lSGallery img {height:100%;object-fit:cover;}
.lSSlideOuter .lSPager.lSpg>li a {background:var(--muted);}
.lSSlideOuter .lSPager.lSpg>li.active a,.lSSlideOuter .lSPager.lSpg>li:hover a {background:var(--accent);}
.lSAction > a {background-color:rgba(25,25,25,.55);border-radius:50%;}

/* 07 / Footer */
footer,.footer {background:transparent;color:var(--muted);border-top:1px solid var(--line);font-size:.76rem;}
footer a,footer a:visited {color:var(--muted);}

/* 08 / Tablet and mobile */
@media (max-width:980px) {
 .pure-g > [class*="pure-u"] {width:50% !important;flex-basis:50%;}
 .wrapper.padding {padding-top:91px;}
}
@media (max-width:767px) {
 .navbar .container {padding:0 17px;}
 .navbar-brand,.navbar-default .navbar-brand {font-size:1.15rem;padding:18px 0;}
 .navbar-default .navbar-nav > li > a {padding:11px 15px;line-height:20px;color:var(--fg);}
 .navbar-default .navbar-nav > .active > a {box-shadow:inset 3px 0 0 var(--accent);}
 .navbar-collapse {max-height:calc(100vh - 62px);overflow:auto;}
 .wrapper.padding {padding:83px 14px 28px;}
 .grid-pad,.grid-pad-sq {padding:8px 5px;}
 .pure-g {margin:0 -5px;}
 .pure-g > [class*="pure-u"] {width:100% !important;flex-basis:100%;}
 .overlay,.overlay-2 {padding:8px 2px 14px;}
 .item .title {font-size:1.6rem;}
 .item .date {font-size:1rem;}
 .grav-lightslider img {max-height:60vh;}
}
@media (prefers-reduced-motion:reduce) {
 *, *::before, *::after {animation-duration:.01ms!important;transition-duration:.01ms!important;}
}

/* 09 / Minimal-description trial, November 2026
   This section is a reversible visual preview. The original descriptions
   remain intact in the HTML; comment out this section to display them.

   Navigation: keep about.html on disk for preservation, but remove its
   visible navigation entry site-wide.
*/
.navbar-nav > li:has(> a[href$="about.html"]) { display: none !important; }

/* Grid cards: show the artwork title, not the medium/description underneath.
   This affects main indexes and the related-work grids.
*/
.overlay > em, .overlay-2 > em { display: none !important; }

/* Individual works: show the original first, short medium/type line after
   the date, but hide later descriptive paragraphs, materials and long quotes.
   Media (including audio inside paragraphs), galleries, related-project links,
   and separate video captions remain accessible. No text is deleted.
*/
body[data-page-type="detail"] .date ~ p:not(:has(audio,video,img,iframe,object,embed)) { display: none !important; }
body[data-page-type="detail"] .date + p { display: block !important; }
body[data-page-type="detail"] .date ~ em { display: none !important; }
body[data-page-type="detail"] .date ~ blockquote:not(.instagram-media) { display: none !important; }
body[data-page-type="detail"] .date ~ ul:not(.lSPager):not(.lSGallery),
body[data-page-type="detail"] .date ~ ol { display: none !important; }

/* 10 / Centre individual project pages on wide screens.
   Keep their content left-aligned inside the centred 910px column.
   Project index grids, navigation, and mobile layouts are unchanged.
*/
body[data-page-type="detail"] .item {
  margin-left: auto;
  margin-right: auto;
}

/* 11 / Video text visibility trial (CSS only)
   Hide the headings and descriptions beneath embedded videos.
   The original text remains in every HTML page.
   To reverse, delete or comment out these two declarations.
*/
.video-title,
.video-description {
  display: none !important;
}

/* 12 / PHOTO CREDITS: make the photographer credits considerably smaller.
   The existing <small> credit labels are direct children of .item.
   Credits are retained in the source HTML and remain selectable.
*/
:root {
  --title-grey: #444c49;         /* subtle softening, formerly #262b2b */
  --photo-credit-size: 0.66rem; /* approximately 10.6px at normal zoom */
}
body[data-page-type="detail"] .item > small {
  font-size: var(--photo-credit-size) !important;
  line-height: 1.4;
  font-weight: 400;
  color: var(--muted) !important;
}

/* 13 / SOFTER GREY: main titles, headings, and bold text.
   Keep standard text and yellow link accent unchanged.
   Override the old heading colour without changing spacing or sizes.
*/
h1, h2, h3, h4, h5, h6,
strong, b,
.item .title, .item .title strong,
.overlay h4, .overlay-2 h4, .overlay strong, .overlay-2 strong,
.related, .file-list,
.navbar-brand, .navbar-default .navbar-brand,
.navbar-default .navbar-brand:visited {
  color: var(--title-grey);
}


/* Video spacing: keep separate videos visually distinct */
.item .video-responsive ~ .video-responsive { margin-top: 3rem !important; }