/*
Theme Name: whispering_cat-2026
*/

/* ===================== GLOBAL BASE SETTINGS ================================================== */

/* 0 Modern Minimal Reset */
*, *::before, *::after {
    box-sizing: border-box; /* Makes padding/borders easier to calculate */
}

body {
    margin: 0; /* Removes that default 8px browser margin */
    -webkit-font-smoothing: antialiased; /* Makes text crisper */
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%; /* Prevents images from blowing out your 100ch column */
}

/* Neutralise the default WP yellow highlight on image captions */
mark {
    background: transparent;
    color: inherit;
    padding: 0;
}

/* Style the Gallery/Thumbnail captions specifically */
.wp-block-gallery .wp-element-caption,
.gallery-caption {
    font-family: Calibri, Carlito, sans-serif;
    font-size: 1.1rem;      /* Micro-type scale */
    text-transform: uppercase;
    letter-spacing: 0.08em; /* Essential for readability with uppercase */
    color: #888;            /* Quiet grey */
    text-align: left;
    margin-top: 0.6rem;
}



/* 1 Global styling */
html {
      
    font-family: Calibri, Carlito, sans-serif;
    font-size: 100%; /* set base size of rem unit */
    
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.6;
    background-color: #f0f0f0; /* The "Wings" color */
    color: #333;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
   /* margin: 2rem auto; */
}

h1 {

    font-size:2.0rem;
}

h1.page_title, h1.cpt-label {   /* page titles should match logo brand colour */

    color:#888;
}

h2 {

    font-size:1.8rem;
}

/* Global Link Reset  - this clears default link styles across the site */
a {
  color: #666; /* Your preferred grey */
  text-decoration: none;
  transition: color 0.2s ease; /* Smooth "Photo-Pop" transition */
}

/* Remove 'Visited' purple styling */
a:visited {
  color: #666; 
}

/* Clear Hover State: Crucial for usability once underlines are gone */
a:hover {
  color: #1a1a1a; /* Darken slightly on hover so the user knows it's interactive */
  text-decoration: none; 
}

/* ==========================================================================
   Comments & Feedback Form Custom Layout
   ========================================================================== */

/* 1. Form Container & Heading */
#respond {
    margin-top: 5rem;
    padding-top: 3rem;
    border-top: 1px solid #eaeaea; /* Discrete separator line below the essay */
}

#respond h3 {
    font-family: Calibri, Carlito, sans-serif;
    color: #888888;                 /* Exact match for your .page_title branding */
    font-size: 1.6rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 2rem;
}

/* 2. Style the Text Inputs and Large Textarea Box */
#respond input[type="text"],
#respond input[type="email"],
#respond input[type="url"],
#respond textarea {
    font-family: Calibri, Carlito, sans-serif;
    font-size: 1.4rem;
    color: #333333;
    background-color: #fafafa;      /* Soft off-white to drop harsh contrast */
    border: 1px solid #dddddd;      /* Subtle border frame */
    padding: 0.8rem 1rem;
    width: 100%;                     /* Fills the track width nicely */
    max-width: 600px;               /* Caps short inputs to a readable width */
    box-sizing: border-box;
    transition: all 0.2s ease;
}

/* Enforce a stable height for the main comment message block */
#respond textarea {
    max-width: 100%;                /* Allows the message field to hit full 100ch width */
    height: 160px;
}

/* 3. Subtle Focus State when a user clicks into a field */
#respond input:focus,
#respond textarea:focus {
    background-color: #ffffff;
    border-color: #888888;          /* Accent borders shift to your branding grey */
    outline: none;
}

/* 4. Form Labels and Checkboxes Alignment */
#respond .comment-form-author label,
#respond .comment-form-email label,
#respond .comment-form-url label {
    display: block;
    font-family: Calibri, Carlito, sans-serif;
    font-size: 1.2rem;
    color: #666666;
    margin-bottom: 0.4rem;
    margin-top: 1.2rem;
}

/* Keep the cookie save checkbox line grouped horizontally */
#respond .comment-form-cookies-consent {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 1.5rem;
    font-family: Calibri, Carlito, sans-serif;
    font-size: 1.2rem;
    color: #666666;
}

#respond .comment-form-cookies-consent input {
    margin: 0;
}

/* 5. The Submit Button: Clean & Disciplined Block */
#respond input[type="submit"] {
    display: inline-block;
    font-family: Calibri, Carlito, sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ffffff;
    background-color: #888888;      /* Clean grey block matching titles */
    border: none;
    padding: 1rem 2.5rem;
    margin-top: 2rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#respond input[type="submit"]:hover {
    background-color: #333333;      /* Snaps to crisp dark charcoal on hover */
}

/* ========================== /comment form ========================= */


/* ==========================================================================
   Comments List & Replies Stream Layout (CSS Grid Stabilization)
   ========================================================================== */

/* 1. Base List Clean Up */
.commentlist, 
ol.commentlist {
    list-style: none;
    padding-left: 0 !important;
    margin-top: 4rem;
    margin-bottom: 4rem;
}

.commentlist li {
    margin-bottom: 3.5rem;
    width: 100%;
}

/* 2. Stabilize the Row Using an Explicit 2-Column Grid Matrix */
.commentlist li .comment-body,
.comment-body {
    display: grid !important;
    grid-template-columns: 60px 1fr; /* Avatar is 60px wide, text fills the track */
    grid-template-areas: 
        "avatar author"
        "avatar date"
        "avatar content"
        "avatar reply";
    column-gap: 2.5rem;
    row-gap: 0.3rem;
    align-items: start;
    width: 100%;
    font-family: Calibri, Carlito, sans-serif;
}

/* 3. Explicitly Bind the Elements to Their Matrix Areas */
.commentlist .avatar,
.comment-author img {
    grid-area: avatar;
    display: block !important;
    flex-shrink: 0;
    width: 60px !important;
    height: 60px !important;
    object-fit: cover;
    filter: grayscale(100%);
    background: #fafafa;
    border: 1px solid #eaeaea;
    margin: 0 !important;
}

/* Force the Author Name and 'says:' string to span together */
.comment-author {
    grid-area: author;
    margin: 0 !important;
    font-size: 1.4rem;
    font-weight: 600;
    color: #333333;
}

.comment-author cite {
    font-style: normal;
}

/* Map the Timestamp Row */
.commentmetadata,
.comment-meta {
    grid-area: date;
    margin: 0 !important;
    margin-bottom: 0.8rem !important;
    font-size: 1.1rem !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888888;
}

.commentmetadata a {
    color: #888888;
    text-decoration: none;
}

/* Group All Paragraph Elements Under the Content Column Area */
/* This catches your signatures, multi-line notes, and text segments safely */
.commentlist p {
    grid-column: 2 / -1; /* Forces ALL paragraphs to stack strictly in column 2 */
    font-size: 1.5rem;
    line-height: 1.5;
    color: #444444;
    margin-top: 0;
    margin-bottom: 1.2rem;
}

/* Map the Action Reply Link Button */
.commentlist .reply {
    grid-column: 2 / -1; /* Stays locked below the text elements column */
    margin-top: 0.5rem;
}

.commentlist .reply a {
    display: inline-block;
    font-size: 1.1rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #888888;
    text-decoration: none;
    border-bottom: 1px solid #cccccc;
    padding-bottom: 0.1rem;
    transition: all 0.2s ease;
}

.commentlist .reply a:hover {
    color: #000000;
    border-bottom-color: #000000;
}
/* ==========================================================================
   Visual Distinction for Author Replies (Targeted User Workaround)
   ========================================================================== */

/* 1. Reset all general list item backgrounds to stay crisp white */
.commentlist li .comment-body {
    background-color: transparent;
    border: none;
    padding: 0;
}

/* 2. Target ONLY your specific user account replies for the grey card tint */
.commentlist li.byuser .comment-body,
.commentlist li.comment-author-david .comment-body {
    background-color: #f8f8f8 !important; /* Soft gallery-grey card background */
    border: 1px solid #eeeeee !important;  /* Clean, faint structural frame line */
    padding: 2rem !important;             /* Internal cushion padding around text */
    margin-top: 1.5rem !important;
    margin-bottom: 2.5rem !important;
    box-sizing: border-box !important;
}

/* 3. Keep paragraph tracking aligned inside the shaded card matrix */
.commentlist li.byuser p,
.commentlist li.comment-author-david p {
    grid-column: 2 / -1;
}





/* ==========================================================================
   /End Comments List & Replies Stream Layout
   ========================================================================== */

/*  Archive page listings - make excerpt and posted date smaller the link title */
/* The Excerpt: Smaller than body text */
.entry-summary {
  font-size: 1.1rem; /* Body is 1.6rem, so this is a clear step down */
  color: #555;      /* Soft grey to let the title pop */
  line-height: 1.5;
  margin-top: 0.5rem;
}

/* The Date: Even smaller 'micro-typography' */
.post-meta {
  font-size: 0.8rem;     /* Technical spec size */
  text-transform: uppercase;
  letter-spacing: 0.05em; /* Spacing out small caps makes them very readable */
  color: #888;           /* Lightest grey for secondary info */
  display: block;        /* Puts it on its own line */
  margin-bottom: 0.2rem;
}

/* Add breathing room above the pagination at bottom of page on archive pages and position left and right */

/* Target the specific class from your HTML */
.archive-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4rem; /* The breathing room you wanted */
  width: 100%;      /* Ensures it fills the 100ch track */
}

/* Optional: ensure the links themselves are clean */
.archive-nav a {
  text-decoration: none;
  font-family: Calibri, Carlito, sans-serif;
  font-size: 1.4rem;
}







/* ================================ /GLOBAL BASE STYLING ======================================= */


/* ================================= THE MASTER GRID ======================= */

/* 1  (The 3-Column Wings) */
.master-site-grid {
    display: grid;
    grid-template-columns: 1fr min(100ch, 100%) 1fr;
}

/* 2. THE WINGS (Column 1 and 3 */


/* 3. THE STAGING AREA (Column 2) */
.master-site-grid > * {
    grid-column: 2;
    background-color: #fff; /* The "Content" color */
    padding: 2rem 4rem;    /* Breathing room for text */
}

/* ================================= /THE MASTER GRID ======================= */



/* ======================== HEADER Styling (The Final Reset) ============================ */

/* 1. Force the Header to be its own 3-column Grid */
#header {
    display: grid !important;
    /* We RE-STATE the wings here because this element is outside the main wrapper */
    grid-template-columns: 1fr min(100ch, 100%) 1fr !important;
    width: 100%;
    background-color: #ffffff;
    border-bottom: 5px solid #ccc;
}

/* 2. Lock the content into the center track (Track 2) */
.header-staging-area {
    grid-column: 2 !important; 
    display: grid;
    grid-template-areas: 
        "logo search"
        "menu menu";
    grid-template-columns: 1fr auto;
    align-items: end; 
    padding: 2.5rem 0 0.5rem;
    width: 100%;
}

/* 3. The Logo Block */
#logo-block {
    grid-area: logo;
    display: flex;
    flex-direction: column;
    width: 370px;
    height: 120px;
    background-image: url('../../uploads/2012/04/catlogo_small.gif');
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 75px; 
    justify-content: center;
}

.title-dm { margin: 0; font-size: 2.8rem; line-height: 0.9; color: #333; }
.title-dm span { display: block; font-size: 2.4rem; color: #888; margin-top: 10px; }

/* 4. The Search Block (Snapped to the right edge of the 100ch) */
#search-block {
    grid-area: search;
    padding-bottom: 8px;
    justify-self: end; /* This now pulls it back to the edge of the 100ch track */
}

/* 5. The Menu Row */
.tabmenu {
    grid-area: menu;
    margin-top: 1.5rem;
}

.tabmenu ul {
    display: flex;
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
    gap: 2.5rem;           
}

.tabmenu a {
    text-decoration: none;
    color: #333;
    font-size: 1.3rem;
    text-transform: uppercase;
}

.tabmenu a:hover {
    text-decoration: none;
    color: #333;
    font-size: 1.3rem;
    text-transform: uppercase;
    background-color: #f0f0f0;
}

/* ==========================================================================
   Header Search Block & RSS Alignment Layout
   ========================================================================== */

/* 1. Force all elements inside the block to line up horizontally */
#search-block .search-inner {
    display: flex !important;
    align-items: center !important;
    gap: 0.8rem !important;          /* Consistent, disciplined spacing between components */
    font-family: Calibri, Carlito, sans-serif !important;
}

/* 2. Style the inline 'Search' strong label text */
#search-block .search-inner strong {
    font-size: 1.3rem !important;
    color: #888888 !important;       /* Exact match for your page title branding gray */
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

/* 3. Style the Text Entry Field Field box */
#search-block #s {
    font-family: Calibri, Carlito, sans-serif !important;
    font-size: 1.3rem !important;
    color: #333333 !important;
    background-color: #fafafa !important; /* Soft off-white to blend into the track */
    border: 1px solid #dddddd !important; /* Minimalist, clean frame border line */
    padding: 0.4rem 0.8rem !important;
    height: 32px !important;              /* Tight, elegant header block height scale */
    box-sizing: border-box !important;
    transition: border-color 0.2s ease;
}

/* Input Focus State when clicked */
#search-block #s:focus {
    border-color: #888888 !important; /* Accent border shifts to your header gray */
    outline: none !important;
}

/* 4. Style the 'Go' Submission Action Button */
#search-block #searchsubmit {
    font-family: Calibri, Carlito, sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #ffffff !important;
    background-color: #888888 !important; /* Solid branding gray block button */
    border: none !important;
    padding: 0 1.5rem !important;
    height: 32px !important;              /* Matches text field height perfectly */
    cursor: pointer !important;
    transition: background-color 0.2s ease;
}

/* Button Hover State */
#search-block #searchsubmit:hover {
    background-color: #333333 !important; /* Charcoal black snap on hover */
}

/* 5. Discipline the RSS Feed Button Alignment */
#search-block .search-inner a {
    display: flex !important;
    align-items: center !important;
    margin-left: 0.4rem !important;       /* Generates a clean gap before the icon */
}

#search-block .search-inner img {
    width: 20px !important;               /* Force a tight, standard desktop icon scale */
    height: auto !important;
    display: block !important;
    margin: 0 !important;                 /* Kills any legacy layout margins */
}


/* ======================== /HEADER Styling ============================ */




/* ======================== FOOTER Styling ============================ */

/* 1. Full-Bleed Container with its own Wings */
.site-footer {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 1fr min(100ch, 100%) 1fr !important;
    background-color: #555;
    color: #eee;
    width: 100%;
    border-top: 5px solid #ccc;
}

/* 2. The Centered Staging Area (Column 2) */
.footer-staging-area {
    grid-column: 2 !important;
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Forces content to the left edge of the 100ch track */
    text-align: left;
    font-size: 1.2rem;
}

/* 3. Footer Menu List */
.site-footer ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 !important;
    margin: 1rem 0 !important;
    list-style: none !important;
}

.site-footer li {
    margin-bottom: 0.8rem;
}

/* 4. Links & Copyright */
.site-footer a { 
    color: #fff; 
    text-decoration: none; 
}

#copyright { 
    width: 100%;
    border-top: 3px solid #666; 
    margin-top: 1rem; 
    padding-top: 1rem;
    text-align: left;
}

/* ======================== /FOOTER Styling ============================ */





/* =================== Specific page tweaks ======================= */


/* ================= HOME PAGE =========================================== */



/* ==========================================================================
   SITE NEWS CONTAINER (TABULAR ARCHITECTURE)
   ========================================================================== */

/* 1. Global Block Overrides: Clear Borders, Backgrounds, and Margins */
.wp-block-table.news-table,
.wp-block-table.news-table table,
.wp-block-table.news-table tr,
.wp-block-table.news-table td {
    border: none !important;
    background: none !important;
    background-color: transparent !important;
    padding: 0.5rem 0 !important;
}
.wp-block-table.news-table {
    width: 100% !important;
    margin: 1.5rem 0 -2.5rem 0 !important; /* Negative bottom margin pulls up the lower block */
    border-collapse: collapse !important;
}


/* 2. Left-Hand Data Cell: Scaled Up Custom Metadata Date Stamp */
.wp-block-table.news-table td:first-child {
    width: 150px !important;
    min-width: 150px !important;
    font-family: var(--wp--preset--font-family--humanist, sans-serif) !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #555555 !important;
    vertical-align: baseline !important;
}

/* 3. Right-Hand Data Cell: Scaled Up Humanist Free-Text News Updates */
.wp-block-table.news-table td:last-child {
    font-size: 1.3rem !important;
    line-height: 1.6 !important;
    color: #111111 !important;
    vertical-align: baseline !important;
}

/* 4. Layout Responsiveness: Smooth Degradation on Mobile Screen Footprints */
@media (max-width: 600px) {
    .wp-block-table.news-table td {
        display: block !important;
        width: 100% !important;
    }
    .wp-block-table.news-table td:first-child {
        margin-bottom: 0.35rem !important;
    }
}


/* ==========================================================================
   Home Page Query Loop Index Layout
   ========================================================================== */

/* 1. Global Container: Establish vertical flex for the main loop container list */
.wp-block-post-template {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}

/* 2. List Entries: Convert rows into a 2-column layout grid on the homepage */
.home .wp-block-post-template > li {
    display: grid !important;
    grid-template-columns: 90px 1fr; /* Left thumbnail column 90px, right fills track */
    grid-template-areas: 
        "thumb title"
        "thumb date"
        "thumb excerpt";
    column-gap: 2rem;
    row-gap: 0.2rem;                 /* Tightened internal text line stacking */
    align-items: start;
    
    /* Strict Row Spacing: Compressed to bring rows into clean visual proportion */
    margin-top: 0 !important;
    margin-bottom: 2.2rem !important; 
    padding-bottom: 0 !important;
    width: 100%;
}

/* 3. Grid Component Assignments */
.home .wp-block-post-featured-image {
    grid-area: thumb;
    flex-shrink: 0;
    width: 90px !important;
    height: 90px !important;
    margin: 0 !important;
}

.home .wp-block-post-featured-image img {
    width: 90px !important;
    height: 90px !important;
    object-fit: cover;
    filter: grayscale(100%);         /* Keeps the monochrome palette unified */
    display: block;
}

.home .wp-block-post-title {
    grid-area: title;
    margin: 0 !important;
    font-size: 1.5rem !important; 
    line-height: 1.2;
}

.home .wp-block-post-date {
    grid-area: date;
    margin: 0 !important;
    font-size: 1.1rem !important;
    color: #888; 
}

/* 4. Handle the excerpt box and zero out native paragraph bottom-bleed margins */
.home .wp-block-post-excerpt {
    grid-area: excerpt;
    margin: 0 !important;
    margin-top: 0.3rem !important;
}

.home .wp-block-post-excerpt p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;     /* Stops native paragraph margins from inflating the gap */
    line-height: 1.4;
}


/* ================= /HOME PAGE =========================================== */

/* ================ PHOTO OF THE DAY ======================= */

/* ==========================================================================
   Photo of the Day Stream - Exhibition Grid Refactor
   ========================================================================== */

/* ==========================================================================
   Photo of the Day Stream - CSS Grid Multi-Row Fix
   ========================================================================== */

/* 1. Turn the entire main page stream into a precise layout track */
#post-5386 .entry {
    display: grid !important;
    grid-template-columns: 100%; /* Spans the full width of your centered 100ch track */
    row-gap: 0;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. Format the loose Text Paragraphs inside the stream */
#post-5386 .entry p {
    font-family: Calibri, Carlito, sans-serif !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}

/* ==========================================================================
   Photo of the Day Stream - Typography Refinement
   ========================================================================== */

/* Format the Date line (e.g., '5 May 2026') */
#post-5386 .entry p:not(:has(strong)) {
    font-size: 1.1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    
    /* THE FIX: Darkened from #b0b0b0 to a clean charcoal grey */
    color: #666666 !important;        
    
    margin-top: 5.5rem !important;    /* Expanded breathing room before a new card begins */
    margin-bottom: 0.4rem !important;
}

/* Format the Title line (e.g., 'Loading', 'Engine') */
#post-5386 .entry p strong {
    /* THE FIX: Shrunk from 2.2rem to 1.4rem so it never competes with the page title */
    font-size: 1.6rem !important;
    font-weight: 600 !important;
    
    /* THE FIX: Darkened to your signature logo branding grey */
    color: #666666 !important;       
    
    display: block;
    margin-bottom: 1.5rem !important; 
}


/* 3. Style and Frame the Image Blocks (Updated Border Matrix) */
#post-5386 .entry figure.wp-block-image {
    background-color: #ffffff;
    border: 1px solid #e2e2e2;        /* Marginally deeper grey frame line for stability */
    
    /* THE FIX: Expand the white mat border to push the photo inward */
    padding: 5rem 6rem;               /* 5rem top/bottom, 6rem left/right for an elegant layout */
    
    margin: 0 0 1rem 0 !important;   
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 6px 25px rgba(0,0,0,0.01); 
}

#post-5386 .entry figure.wp-block-image img {
    width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 !important;
}



/* ================ /PHOTO OF THE DAY ======================= */

/* ===================== OTHER GALLERIES ====================*/

/* ==========================================================================
   WHISPERING CAT 2026 - MASTER CORE PORTFOLIO ENGINE
   ========================================================================== */

/* 1. Target headings inside the 100ch main track */
.entry-content h2, 
h2.wp-block-heading {
    font-family: 'Calibri', 'Carlito', sans-serif !important;
    color: #888 !important; /* Crisp slate grey page title match */
    font-size: 1.3rem !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    margin: 4rem 0 2rem 0 !important;
    border-bottom: 1px solid #e5e5e5 !important;
    padding-bottom: 0.5rem !important;
    clear: both;
}

/* 2. Transform ONLY true gallery blocks into master 4-column grids */
.wp-block-gallery, 
ul.blocks-gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* Strict 4 columns */
    gap: 1.75rem !important; /* Balanced uniform grid spacing */
    padding: 0 !important;
    margin: 0 0 3.5rem 0 !important;
    list-style-type: none !important;
}

/* 3. Wrap gallery slots into premium white matted frame blocks */
.wp-block-gallery .wp-block-image, 
.wp-block-gallery .blocks-gallery-item,
ul.blocks-gallery-grid .blocks-gallery-item {
    background: #ffffff !important;
    border: 1px solid #e2e2e2 !important; /* Thin grey border line */
    padding: 1.25rem !important; /* Balanced museum matting scale */
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 4. Enforce strict 1:1 square aspect ratios and Muted Slate Tint states */
.wp-block-gallery img,
ul.blocks-gallery-grid .blocks-gallery-item img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important; /* Enforces strict 1:1 square aspect ratios */
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    filter: saturate(45%) contrast(105%) brightness(95%) !important; /* Calming Muted Saturation */
    transition: filter 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* 5. Fluid interaction states: reveal color on hover */
.wp-block-gallery .wp-block-image:hover img, 
.wp-block-gallery .blocks-gallery-item:hover img,
ul.blocks-gallery-grid .blocks-gallery-item:hover img {
    filter: grayscale(0%) contrast(100%) saturate(100%) brightness(100%) !important;
}

/* 6. Text Layer Overlay (Strictly locked inside true Gallery containers) */
.wp-block-gallery figcaption,
.wp-block-gallery .wp-block-image figcaption,
ul.blocks-gallery-grid .blocks-gallery-item figcaption {
    position: absolute !important;
    display: flex !important;
    left: 1.25rem !important;
    right: 1.25rem !important;
    bottom: 1.25rem !important;
    height: 40% !important;
    align-items: flex-end !important; /* Pins text lines just above the photo floor */
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 0 1rem 1rem 1rem !important;
    margin: 0 !important;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0) 100%) !important;
    font-family: 'Calibri', 'Carlito', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    color: #ffffff !important; /* Sharp white text for maximum legibility */
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    line-height: 1.3 !important;
    text-align: center !important;
    pointer-events: none !important; 
    word-wrap: break-word !important;
}

/* 7. Clean mobile responsive adaptation */
@media screen and (max-width: 768px) {
    .wp-block-gallery, 
    ul.blocks-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1.25rem !important;
    }
}
/* ===================== /END OF PORTFOLIO ENGINE ====================*/

/* ===================== /END OF MASTER GALLERY REGISTRY ====================*/


/* ================= ARCHIVE PAGES  (review and article )=========================================== */

/* Force all archive thumbnail images to render in black and white */
.archive-thumbnail img {
    filter: grayscale(100%);
    transition: filter 0.3s ease; /* Smooth transition if you want a hover effect */
}

/* Optional: Let them reveal their original color on hover */
.archive-thumbnail a:hover img {
    filter: grayscale(0%);
}



/* Align the thumbnail and text columns */
.archive-item {
    display: flex;
    align-items: flex-start; /* Keeps text aligned to top of image */
    gap: 3rem;               /* Strict spacing between image and content */
    margin-bottom: 5rem;     /* Vertical space between list entries */
    width: 100%;
}

/* Force the thumbnail column to remain stable */
.archive-thumbnail {
    flex-shrink: 0;          /* Prevents text from pushing the image narrow */
    width: 130px;            /* Your 'by eye' thumbnail width boundary */
}

.archive-thumbnail img {
    width: 100%;
    height: 130px;
    object-fit: cover;       /* Crops any aspect ratio into a clean square */
    margin: 0 !important;    /* Neutralises any global image margins */
}

/* Let the text wrap cleanly into the rest of the 100ch track */
.archive-content {
    flex-grow: 1;
}

.archive-item h2.entry-title {
    margin-top: 0;         /* Snaps the title flush with the top of the image */
    margin-bottom: 0.5rem;  /* Keeps a clean gap above the summary */
}

.archive-item .post-meta {
    margin-top: 0.8rem;    /* Generates a clean gap under the excerpt text */
}


/* Zero out the top margin specifically inside your archive list items */
.archive-item .archive-content h2.entry-title {
    margin-top: 0;
    margin-bottom: 0.6rem; /* Keeps a disciplined gap above the summary */
    line-height: 1.2;
}

/* Reduce the gap between the title and the excerpt block */
.archive-item .entry-title {
    margin-bottom: 0.2rem; /* Pulls the excerpt up slightly */
}

/* Zero out the browser's default top margin on the excerpt paragraph */
.archive-item .entry-summary p {
    margin-top: 0;
    margin-bottom: 0.8rem; /* Keeps a disciplined gap above the date */
}


/* Mobile Responsive Shift */
@media (max-width: 600px) {
    .archive-item {
        flex-direction: column; /* Stack them vertically on mobile screen widths */
        gap: 1.5rem;
    }
    
    .archive-thumbnail,
    .archive-thumbnail img {
        width: 100%;
        height: auto;           /* Restores natural photo height on mobile */
    }
}

/* Placeholder box for testing layout proportions */
.placeholder-box {
    width: 130px;
    height: 130px;
    background-color: #eaeaea; /* Light grey gallery card */
    border: 1px solid #ddd;
}



/* ================= /ARCHIVE PAGEs =========================================== */



/* ============= RESPONSIVE DESIGN ADJUSTMENTS ======================= */

/* Update the breakpoint to be wider to catch that 'weird' range */
@media (max-width: 900px) { 
    .tabmenu ul {
        flex-direction: column; /* Snap to vertical list earlier */
        gap: 0.8rem;
    }

    .tabmenu a {
        font-size: 1.4rem;
        padding: 0.4rem 0;
    }

    /* Ensure the RSS icon stays small in this new range */
    .tabmenu img[src*="rss"] {
        width: 20px !important;
    }
}

/* Ensure that above 900px, the menu has enough room to be a single line */
@media (min-width: 901px) {
    .tabmenu ul {
        flex-direction: row;
        flex-wrap: nowrap; /* Force it to stay on one line */
    }
}

/* ========================== /RESPONSIVE ADJUSTMENTS ============================== */