/* =========================================================
   CHAGDALI.COM — SITE STYLESHEET  (loaded as /style2.css)

   PART 1  = design-reference/styles.css ported VERBATIM.
   PART 2  = the ONE fix the port needs to work with this site's
             PHP output (see "THE PICTURE FIX").
   PART 3  = selectors for pages/features the static mockup never
             had (buy button, mini-views, canvas mockups...).

   Filename is versioned on purpose: changing the <link href> in
   includes/layout_top.php to a NEW name defeats any browser or CDN
   cache. Bump to style3.css for the next revision; never reuse a
   filename that was ever live.
   ========================================================= */

/* ---------------------------------------------------------
   PART 1 — DESIGN REFERENCE, VERBATIM
   --------------------------------------------------------- */

@font-face{font-family:'IBM Plex Serif';src:url('/fonts/IBMPlexSerif-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Serif';src:url('/fonts/IBMPlexSerif-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'IBM Plex Serif';src:url('/fonts/IBMPlexSerif-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
/* The site also ships a true Bold cut and preloads it in
   layout_top.php. Declared so 700 resolves to a real file instead
   of a synthesised bold. The design itself only ever uses 600. */
@font-face{font-family:'IBM Plex Serif';src:url('/fonts/IBMPlexSerif-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --color-bg:#ffffff;
  --mount-bg:#FAF9F9;
  --color-text:#201e1d;
  --color-neutral-800:#4a4744;
  --color-neutral-700:#6b6866;
  --color-neutral-600:#8a8683;
  --color-divider:#e3e1e0;
  --color-accent:#0088b0;
  --color-accent-600:#00728f;
  --color-accent-700:#005e75;
  --shadow-sm:0 1px 3px rgba(20,18,16,.08);
  --font-heading:'IBM Plex Serif',Georgia,'Times New Roman',serif;
  --font-body:'IBM Plex Serif',Georgia,'Times New Roman',serif;
  --space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:40px;
  --gutter:clamp(18px,4vw,40px);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-heading);font-weight:600;line-height:1.08;margin:0}
p{margin:0 0 var(--space-4)}
a{color:var(--color-accent);text-decoration:none}
a:hover{color:var(--color-accent-600)}
img{max-width:100%;display:block}
.wrap{max-width:1560px;margin:0 auto;padding:0 var(--gutter)}
.wrap-narrow{max-width:1100px;margin:0 auto;padding:0 var(--gutter)}

/* header */
.site-header{padding:var(--space-3) 0 0}
.lang-rail{display:flex;justify-content:flex-end;gap:var(--space-2);font-size:11px;letter-spacing:.1em;text-transform:uppercase;line-height:1;margin-bottom:var(--space-3);color:var(--color-neutral-700)}
.lang-rail a{color:inherit}
.lang-rail a.active{color:var(--color-accent)}
.brand-row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.brand{font-family:var(--font-heading);font-weight:600;font-size:clamp(23px,3.1vw,38px);letter-spacing:-.03em;color:var(--color-text)}
.primary-nav{display:flex;align-items:baseline;gap:clamp(9px,1.6vw,20px);flex-wrap:wrap;padding-bottom:6px}
.primary-nav a{font-family:var(--font-heading); font-size:clamp(13px,3vw,16px);white-space:nowrap;color:var(--color-text)}
.primary-nav a:hover,.primary-nav a.active{color:var(--color-accent)}
.dateline{margin-top:var(--space-3);border-top:1px solid var(--color-divider);border-bottom:1px solid var(--color-divider);padding:7px 0;display:flex;flex-wrap:wrap;column-gap:var(--space-4);row-gap:1px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;line-height:1.75}
.dateline span.muted{color:var(--color-neutral-700)}
.breadcrumb{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-neutral-700);margin:var(--space-4) 0}
.breadcrumb a{color:var(--color-neutral-700)}
.breadcrumb a:hover{color:var(--color-accent)}

/* buttons */
.btn{display:inline-block;font-family:var(--font-heading);font-weight:600;font-size:15px;padding:12px 22px;border-radius:2px;border:1px solid transparent;cursor:pointer}
.btn-primary{background:var(--color-accent);color:#fff}
.btn-primary:hover{background:var(--color-accent-600);color:#fff}
.btn-secondary{background:transparent;border-color:var(--color-divider);color:var(--color-text)}
.btn-secondary:hover{border-color:var(--color-accent);color:var(--color-accent)}
.btn-block{display:block;text-align:center}

/* sections */
.section{padding:calc(var(--space-8) * 1.8) 0 0}
.section-kicker{font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent-700);margin:11px 0;}
.section-title{font-size:clamp(26px,3vw,40px);margin:0 0 var(--space-3)}
.section-lede{max-width:62ch;color:var(--color-neutral-800);margin-bottom:var(--space-6)}

/* masonry wall */
.wall{columns:320px 5;column-gap:var(--space-6)}
.wall.wall-compact{columns:300px 4}
.tile{display:block;break-inside:avoid;margin:0 0 var(--space-6);color:inherit}
.mount{background:var(--mount-bg);padding:14px;display:flex;align-items:center;justify-content:center;transition:box-shadow .18s ease}
.mount img{max-width:100%;max-height:100%;width:auto;box-shadow:var(--shadow-sm);object-fit:contain}
.mount.placeholder{background:var(--mount-bg);color:var(--color-neutral-600);font-size:12px;text-align:center;padding:var(--space-4)}
.tile-meta{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-2);margin-top:var(--space-2)}
.tile-title{font-family:var(--font-heading);font-size:15px}
.tile-tag{color:var(--color-neutral-700);font-size:10px;letter-spacing:.1em;text-transform:uppercase}

/* theme / collection cards */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-8)}
.theme-num{display:block;font-family:var(--font-heading);font-weight:600;font-size:52px;color:var(--color-accent-700);margin-bottom:var(--space-2)}
.theme-card h3{font-size:22px;margin:0 0 6px}
.theme-card p{color:var(--color-neutral-800);margin:0}

/* two-up rows (studio, prints, collections index) that stack on narrow screens */
.split{display:flex;flex-wrap:wrap;gap:var(--space-8);align-items:center}
.split > *{flex:1 1 320px;min-width:280px}
.split figure{margin:0}
.split img{width:100%;height:auto;box-shadow:var(--shadow-sm)}

/* faq / list */
.qa{display:grid;gap:var(--space-6);max-width:68ch}
.qa h2,.qa h3{font-size:19px;margin-bottom:4px}
.qa p{margin:0;color:var(--color-neutral-800)}

/* forms */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--space-4)}
.field label{font-size:13px;color:var(--color-neutral-800)}
.input{font-family:var(--font-body);font-size:15px;padding:10px 12px;border:1px solid var(--color-divider);border-radius:2px;background:#fff;color:var(--color-text)}
.input:focus{outline:2px solid var(--color-accent);outline-offset:1px;border-color:var(--color-accent)}
textarea.input{min-height:120px;resize:vertical}

/* pager */
.pager{display:flex;align-items:baseline;gap:var(--space-4);border-top:1px solid var(--color-divider);padding-top:var(--space-3);font-size:14px}
.pager .current{font-family:var(--font-heading);font-weight:600}
.pager .disabled{color:var(--color-neutral-600)}

/* footer */
.site-footer{margin:calc(var(--space-8)*2.4) 0 0;padding:0 0 var(--space-8)}
.footer-inner{border-top:1px solid var(--color-divider);padding-top:var(--space-4);display:flex;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap;font-size:13px}
.footer-links{display:flex;gap:var(--space-4);flex-wrap:wrap}
.footer-links a{color:var(--color-text)}
.footer-links a:hover{color:var(--color-accent)}
.footer-meta{display:flex;align-items:center;gap:var(--space-4);color:var(--color-neutral-700)}

/* artwork detail */
.art-layout{display:flex;flex-wrap:wrap;gap:calc(var(--space-8)*1.5);align-items:flex-start}
.art-media{flex:1 1 54%;min-width:300px}
.art-info{flex:1 1 32%;min-width:280px}
.art-figcaption{margin-top:var(--space-3);font-size:12px;display:flex;gap:var(--space-4);flex-wrap:wrap;color:var(--color-neutral-700)}
.views-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);margin-top:var(--space-4)}
.views-grid img{box-shadow:var(--shadow-sm)}
.share-row{display:flex;gap:var(--space-3);font-size:13px;margin-top:var(--space-4)}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-4);margin-top:var(--space-4)}

/* =========================================================
   PART 2 — THE PICTURE FIX  (this is the masonry bug)

   The design mockup writes:      .mount > img
   This site's pictureTag() writes: .mount > picture > source + img

   So <picture> — not <img> — is the flex item inside .mount.
   Part 1's ".mount img{max-height:100%}" then has nothing to
   resolve against, because <picture> has no definite height, and
   the image renders at its intrinsic size: it overflows the mount,
   or collapses to nothing. That is the whole cause of the empty /
   oversized / bottom-aligned tiles — not the aspect-ratio, which
   the design does set inline on every .mount and which the PHP
   must keep setting.

   Fix: make <picture> a full-size flex box of its own, so the
   image's percentage max-height has a definite height to resolve
   against. Everything else stays exactly as Part 1 defines it.
   ========================================================= */
.mount > picture{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
}
.mount > picture > img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}

/* =========================================================
   PART 3 — EXTENSIONS (no equivalent in the mockup)
   Built from Part 1's variables and spacing scale only.
   ========================================================= */

/* nav.php emits class="brand site-logo"; .brand does the styling.
   Alias kept so any older markup targeting .site-logo still works. */
.site-logo{font-family:var(--font-heading)}

/* nav.php wraps the five language links in a <span class="lang-switch">
   inside .lang-rail, so that span needs to be a flex row too. */
.lang-switch{display:flex;gap:var(--space-2)}


/* Homepage: bullet list under the hero intro. */
.plain-list{margin:0 0 var(--space-6);padding-left:1.2em;color:var(--color-neutral-800)}
.plain-list li{margin-bottom:4px}

/* Homepage hero (design index.html §1 uses inline styles for these;
   named classes here so the PHP stays free of inline style soup). */
.hero-title{font-size:clamp(30px,4vw,52px);max-width:22ch}
.hero-split{margin-top:var(--space-6);align-items:flex-start}
.hero-media{flex:1 1 56%}
.hero-aside{flex:1 1 30%}
.hero-lede{font-size:19px;line-height:1.55}
.hero-caption a{font-family:var(--font-heading);font-weight:600}

/* Homepage "How a Painting Is Built" — the design gives its three
   paragraphs distinct sizes; named so the PHP loop can apply them. */
.prose-lead{font-size:18px;line-height:1.6;max-width:70ch}
.prose-body{color:var(--color-neutral-800);max-width:70ch}
.prose-pull{font-style:italic;font-size:19px;max-width:50ch;color:var(--color-neutral-800)}

/* Homepage "Fine Art Prints" — the format list on the right. */
.spec-list p{border-bottom:1px solid var(--color-divider);padding-bottom:var(--space-2)}
.spec-list p:last-child{border-bottom:none;padding-bottom:0}

/* Inline "→" links styled like the design's heading-weight links. */
.more-link,.see-all{font-family:var(--font-heading);font-weight:600}

/* Contact form: the design lays the fields out as a responsive
   two-column grid with the message and submit spanning full width. */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-6);margin-top:var(--space-8);max-width:900px}
.field-full{grid-column:1 / -1}

.empty{color:var(--color-neutral-800)}

/* Collections index: each collection is a .split row (text + cover).
   The design writes these as inline styles on an <a class="split">;
   named here so collections.php stays free of style attributes. */
.collection-rows{display:grid;gap:calc(var(--space-8) * 1.2)}
.collection-row{text-decoration:none;color:inherit}
.collection-row-title{font-size:clamp(24px,2.6vw,34px)}
.collection-row p{color:var(--color-neutral-800)}
.collection-row .tile-tag{margin:0}

/* ---- artwork.php furniture the mockup's example never showed ---- */
.art-name{color:var(--color-accent)}
.art-figure{margin:0;background:var(--mount-bg);padding:14px}
.art-figure a{display:block}
.art-image{width:100%;height:auto;display:block}
.art-meta{font-size:12px;color:var(--color-neutral-700);margin:var(--space-3) 0 var(--space-6)}
.mini-desc{font-size:18px;line-height:1.5;color:var(--color-neutral-800);margin-bottom:var(--space-4)}
.main-desc{color:var(--color-neutral-800)}

.wall-views,.canvas-views,.formats{margin-top:var(--space-6)}
.wall-views h2,.canvas-views h2,.formats h2{font-size:19px;margin-bottom:var(--space-2)}
.wall-views-cta,.formats-intro{font-size:13px;color:var(--color-neutral-700);margin-bottom:var(--space-3)}
.wall-views-more{margin-top:var(--space-4)}
.wall-views-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3)}
.wall-views-grid > a,.wall-views-grid > picture,.wall-views-grid > img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--mount-bg)}
.wall-views-grid picture{width:100%;height:100%}
.wall-views-grid img{width:100%;height:100%;object-fit:cover}
.canvas-views-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3);max-width:520px}
.canvas-views-grid img{width:100%;height:auto;display:block;box-shadow:var(--shadow-sm)}
@media (max-width:640px){.wall-views-grid{grid-template-columns:repeat(2,1fr)}}

.pictorem-mediums{color:var(--color-neutral-800);margin-bottom:var(--space-6)}
.pictorem-mediums .sep{margin:0 5px;color:var(--color-neutral-600)}
.intro-link,.wall-link{color:var(--color-accent)}
.intro-link:hover,.wall-link:hover{color:var(--color-accent-600)}
.medium{color:var(--color-neutral-800)}

.buy-links{margin-top:var(--space-6)}
.buy-btn{display:block;width:100%;text-align:center;padding:12px 22px;font-family:var(--font-heading);font-weight:600;font-size:16px;border:none;border-radius:2px;background:var(--color-accent);color:#fff}
.buy-btn:hover{background:var(--color-accent-600);color:#fff}
.shipping-note{text-align:center;margin-top:var(--space-3);font-size:13.5px;color:#2f8f1e}
.inquire-link{text-align:center;margin-top:var(--space-4);font-size:15px}
.inquire-link a{color:var(--color-neutral-800)}
.share-links{text-align:center;margin-top:var(--space-3);font-size:13px;color:var(--color-neutral-700)}
.share-links .share-label{margin-right:4px}
.share-links a{color:var(--color-neutral-700)}
.share-links .sep{margin:0 6px;color:var(--color-neutral-600)}

.related{margin-top:var(--space-8);border-top:1px solid var(--color-divider);padding-top:var(--space-4)}
.related + .related{margin-top:var(--space-6)}
.related h2{font-size:18px;margin-bottom:var(--space-3)}
.related-list{list-style:none;margin:0;padding:0}
.related-list li{margin:0;line-height:1.8}
.related-list a{color:var(--color-neutral-800)}

.visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Still-needed odds and ends that have no design-reference rule:
   the about page's small print, the 404 link list, and the contact
   form's honeypot + AJAX response line. */
.legal{font-size:13px;color:var(--color-neutral-700);margin-top:var(--space-6);border-top:1px solid var(--color-divider);padding-top:var(--space-4)}
.notfound-links{list-style:none;padding:0;margin:var(--space-4) 0 0}
.notfound-links li{margin-bottom:var(--space-2)}
.response-area{min-height:40px;display:flex;align-items:center;font-size:14px;margin-bottom:var(--space-3)}
.response-area.success{color:#2ea44f}
.response-area.error{color:#cb2431}
.honeypot{position:absolute;left:-9999px;opacity:0}

/* =========================================================
   HONESTY NOTE
   This file is layout and style only. No prose from the
   claude-design bundle was carried into the PHP templates or the
   database: that bundle's own copy used "palette knife",
   "brushwork" and "museum-quality", which fail
   includes/honesty_rules.php (H3, H11). Any new copy must still
   pass admin/lint.php's engine self-test and
   admin/audit_honesty.php before it ships.
   ========================================================= */

/* Artwork-page section headings: the design renders these at a fixed
   22px rather than the fluid .section-title scale, so this narrows it
   back down where .section-title is reused inside the artwork columns. */
.art-h2{font-size:22px;margin-top:var(--space-8);margin-bottom:var(--space-2)}
.related .art-h2{margin-top:0}