/* Shivraj Singh Art Gallery — foundation
   The tokens below are the first draft's; v2.css remaps them to the black,
   white and grey of the gallery. Artwork supplies the colour; the page stays
   quiet. */

:root {
  --green-900: #0d241c;
  --green-800: #123328;
  --green-700: #1b4332;
  --green-600: #245c44;
  --green-050: #eef2ed;

  --gold-600: #9d7826;
  --gold-500: #b8912f;
  --gold-400: #c8a24a;
  --gold-300: #ddbd74;
  --gold-100: #f0e3c4;

  --ivory-000: #fdfbf6;
  --ivory-100: #f7f2e7;
  --ivory-200: #efe8d8;
  --ivory-300: #e3d9c4;

  --ink-900: #17140f;
  --ink-700: #3a352c;
  --ink-500: #6b6355;
  --ink-300: #9a9384;

  --black: #0a0a0a;
  --rule: rgba(23, 20, 15, 0.14);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: "Gill Sans MT", "Segoe UI", Corbel, system-ui, -apple-system, sans-serif;
  --deva: "Nirmala UI", "Noto Sans Devanagari", "Mangal", sans-serif;

  --shell: 1220px;
  /* 16px on a phone, so the header tools sit close to the edge while still
     lining up with the page content below them. */
  --gut: clamp(16px, 4vw, 44px);

  /* One diameter for both round badges at the foot of the page — WhatsApp on
     the left, the studio desk on the right — so they always match. */
  --badge: clamp(56px, 4.6vw, 68px);

  --shadow-frame: 0 2px 4px rgba(23, 20, 15, 0.08), 0 18px 38px rgba(23, 20, 15, 0.14);
  --shadow-lift: 0 1px 2px rgba(23, 20, 15, 0.1), 0 10px 26px rgba(23, 20, 15, 0.1);
}

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

/* The scrollbar gutter is always reserved, so a page that gains or loses its
   scrollbar never shifts sideways. Note that overflow is never taken off the
   document: doing so removes the scrollport the sticky header depends on. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--ivory-100);
  color: var(--ink-900);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

/* A painting is never distorted. Where a box has a fixed height the canvas is
   contained inside it; thumbnails that deliberately crop set `cover` for
   themselves, which also preserves the ratio. */
img { object-fit: contain; }

a { color: var(--green-700); text-decoration-color: var(--gold-400); text-underline-offset: 3px; }
a:hover { color: var(--green-600); }

:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0.005em;
  margin: 0 0 0.5em;
  line-height: 1.16;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.35rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

hr.rule {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-400), transparent);
  margin: clamp(30px, 5vw, 56px) 0;
}

/* ---------- type helpers ---------- */

.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin: 0 0 0.9em;
  display: block;
}

.lede {
  font-size: clamp(1.06rem, 1.9vw, 1.28rem);
  color: var(--ink-700);
  max-width: 60ch;
}

.meta {
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--ink-500);
}

.hi { font-family: var(--deva); font-size: 0.95em; }

.small { font-size: 0.86rem; color: var(--ink-500); }

.center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ---------- layout ---------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.shell--narrow { max-width: 820px; }

/* ---------- one scroll ----------
   The chapters stand one under the next in ordinary flow. Nothing hides them
   and nothing swaps them: wheeling down from the hero arrives at the commission
   counter of its own accord. The margin keeps a heading clear of the ribbon
   when a link is followed to it. */
.chapter {
  scroll-margin-top: calc(var(--hdr-h, 84px) + 6px);
}

/* Anything else worth linking to inside a chapter is held clear as well. */
.chapter [id] { scroll-margin-top: calc(var(--hdr-h, 84px) + 6px); }

/* Stages are given room to breathe. */
section { padding-block: clamp(64px, 8vw, 120px); }

.band-ivory { background: var(--ivory-000); }

.grid { display: grid; gap: clamp(20px, 3vw, 34px); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .g3 { grid-template-columns: minmax(0, 1fr); }
}

.stack > * + * { margin-top: 1.1em; }

/* ---------- draft notice ---------- */

.draftbar {
  background: repeating-linear-gradient(
    135deg, #3c2f10, #3c2f10 12px, #4a3a14 12px, #4a3a14 24px
  );
  color: var(--gold-100);
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 7px var(--gut);
}

.draftbar strong { color: #fff; letter-spacing: 0.14em; }

/* ---------- sticky header ---------- */

/* ---------- the ribbon ----------
   Sticky, never fixed and never hidden: the scrollport is left alone, so the
   bar cannot be lost to an overflow rule on a parent. It crosses to its solid
   ground a short way down the page. */
.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background-color: var(--green-900);
  border-bottom: 1px solid transparent;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.scrolled .masthead {
  background-color: var(--green-900);
  border-bottom-color: rgba(200, 162, 74, 0.34);
  box-shadow: 0 10px 30px rgba(8, 26, 20, 0.34);
}

@media (prefers-reduced-motion: reduce) {
  .masthead { transition: none; }
}

/* Three parts to the bar: the lockup at the left, the links in the middle, the
   tools hard against the right edge. The right gutter is tighter than the page
   gutter so the cluster reads as the end of the bar rather than floating in
   from it. */
/* The bar runs the whole window rather than the content shell, so the tools
   really do end at the right edge instead of stopping at the text column. */
.masthead__in {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 74px;
  max-width: none;
  padding-block: 10px;
  padding-left: clamp(14px, 2vw, 24px);
  padding-right: clamp(12px, 1.4vw, 16px);
}

.brandlock {
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  flex: 0 0 auto;
  overflow: visible; /* nothing here may clip the marks */
}

/* Both marks are white artwork on black. Screen blending drops the black
   ground so they sit on the green band without a visible rectangle. */
.brandlock img.mono {
  width: 42px;
  height: 42px;
  object-fit: contain;
  flex: 0 0 auto;
  mix-blend-mode: screen;
}

/* The script wordmark is a file of its own, the owner's artwork, so it is
   shown whole rather than through a crop window that would clip its
   strokes. */
.wordmark {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  overflow: visible;
}

.wordmark img {
  height: 38px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  mix-blend-mode: screen;
}

.brandlock__fallback {
  display: none;
  font-family: var(--serif);
  color: var(--ivory-000);
  font-size: 1.2rem;
  letter-spacing: 0.02em;
}

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 26px);
}

.nav a {
  font-family: var(--sans);
  font-size: 0.83rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ivory-200);
  text-decoration: none;
  padding: 10px 2px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}

.nav a:hover { color: #fff; border-bottom-color: var(--gold-400); }
.nav a[aria-current="page"] { color: var(--gold-300); border-bottom-color: var(--gold-400); }

/* margin-left:auto at every width, so the cluster never comes to rest beside
   the lockup when the links are few or hidden. */
.hdr-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  margin-left: auto;
  margin-right: 0;
}

/* WhatsApp is no longer an icon in the ribbon at any width: it is the round
   badge at the foot of the page, beside the studio desk. See `.wa-dock`. */

.navtoggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(200, 162, 74, 0.5);
  border-radius: 2px;
  width: 44px;
  height: 44px;
  color: var(--ivory-000);
  font-size: 1.15rem;
  cursor: pointer;
}

@media (max-width: 1040px) {
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--green-900);
    border-bottom: 1px solid rgba(200, 162, 74, 0.34);
    padding: 6px var(--gut) 16px;
  }
  .nav.open { display: flex; }
  .nav a {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .navtoggle { display: grid; place-items: center; order: 3; }
  .wordmark img { height: 30px; }

  /* The nav leaves the flow at this width; the cluster still claims the free
     space and sits flush against the right edge, and the open menu hangs from
     the bar itself rather than floating up inside it when the row is tall. */
  .masthead__in { gap: 10px; position: relative; }
}


@media (max-width: 520px) {
  .wordmark img { height: 24px; }
  .brandlock { gap: 9px; }
  .brandlock img.mono { width: 36px; height: 36px; }
}

/* Only on the narrowest phones is there genuinely no room for the script, and
   only there does the typed name stand in for it. */
@media (max-width: 400px) {
  .wordmark { display: none; }
  .brandlock__fallback { display: block; font-size: 1.05rem; }
}

/* ---------- footer ---------- */

.colophon {
  background: var(--black);
  color: #cfc9bd;
  padding-block: clamp(40px, 6vw, 68px) 26px;
  font-size: 0.94rem;
}

.colophon h3 {
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: 0.9em;
}

.colophon a { color: #e6e0d4; text-decoration: none; }
.colophon a:hover { color: var(--gold-300); text-decoration: underline; }

.colophon__top {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: clamp(22px, 3vw, 40px);
  align-items: start;
}

@media (max-width: 900px) { .colophon__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .colophon__top { grid-template-columns: 1fr; } }

/* The footer band is already black, so the full lockup — monogram, script and
   printed tagline — sits on it untouched. */
.colophon__mark { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.colophon__mark img.word { max-width: 280px; width: 100%; }
.colophon__mark img.mono { width: 56px; }

.colophon__links { list-style: none; margin: 0; padding: 0; }
.colophon__links li { margin-bottom: 7px; }

/* The foot of the page is given clearance so the two fixed docks cannot sit on
   the credits when you reach the very bottom. */
.colophon__base {
  margin-top: clamp(28px, 4vw, 46px);
  padding-top: 18px;
  padding-bottom: 62px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: #8f887c;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 26px;
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  background: none;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.btn--gold { background: var(--gold-500); color: #21180a; border-color: var(--gold-500); }
.btn--gold:hover { background: var(--gold-400); border-color: var(--gold-300); color: #21180a; }

.btn--green { background: var(--green-700); color: var(--ivory-000); border-color: var(--green-700); }
.btn--green:hover { background: var(--green-600); color: #fff; }

.btn--ghost { border-color: var(--ink-900); color: var(--ink-900); }
.btn--ghost:hover { background: var(--ink-900); color: var(--ivory-000); }

.btn--ghost-light { border-color: var(--gold-300); color: var(--gold-100); }
.btn--ghost-light:hover { background: var(--gold-300); color: #21180a; }

.btn--wa { background: #1d7a49; color: #fff; border-color: #1d7a49; }
.btn--wa:hover { background: #17633b; color: #fff; }

.btn--sm { min-height: 40px; padding: 9px 16px; font-size: 0.74rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

.btn__hi { font-family: var(--deva); text-transform: none; letter-spacing: 0.02em; opacity: 0.85; }

.btnrow { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- framed artwork ---------- */

.plate {
  background: var(--ivory-000);
  padding: clamp(10px, 1.4vw, 18px);
  border: 1px solid var(--ivory-300);
  box-shadow: var(--shadow-frame);
}

.plate img { width: 100%; height: auto; }

.tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid var(--gold-500);
  color: var(--gold-600);
  border-radius: 2px;
  padding: 3px 7px;
  white-space: nowrap;
}

.tag--sample { background: #fff5d9; border-color: #c79a1f; color: #6d4f00; font-weight: 700; }

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