/* Subhojit For Sale — editorial skin.
   Loaded after the compiled stylesheet. Routes, hashes, and query strings
   are untouched so existing lead links keep working. */

:root {
  --wheat: #fff6e9;
  --onyx: #0a171d;
  --oceanic: #003f47;
  --nectarine: #ffbd76;
  --ink: #0a171d;
  --ink-soft: #3c4946;
  --muted: #5e6b67;
  --rule: rgba(10, 23, 29, 0.14);
  --stock: #f3eada;
  --paper: #fff6e9;

  --black: #fff6e9;
  --black-rich: #f3eada;
  --charcoal: #fffdf8;
  --graphite: rgba(10, 23, 29, 0.14);
  --slate: rgba(10, 23, 29, 0.22);
  --ash: #5e6b67;
  --silver: #24312e;
  --mist: #3c4946;
  --ivory: #0a171d;
  --cream: #0a171d;
  --white: #fffdf8;
  --accent: #003f47;
  --accent-light: #0a171d;
  --accent-glow: rgba(0, 63, 71, 0.08);

  color-scheme: light;
}

html {
  background: var(--wheat);
}

body {
  background: var(--wheat);
  color: var(--onyx);
}

::selection {
  background: var(--nectarine);
  color: var(--onyx);
}

::-webkit-scrollbar-track {
  background: var(--wheat);
}

::-webkit-scrollbar-thumb {
  background: rgba(10, 23, 29, 0.28);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--oceanic);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--onyx);
  font-weight: 500;
}

p {
  color: var(--ink-soft);
}

.label {
  color: var(--oceanic);
  letter-spacing: 0.16em;
}

/* Italic stays italic. It is no longer a second ink. */
h1[style*="italic"],
h2[style*="italic"],
h3[style*="italic"],
h1 span[style*="italic"],
h2 span[style*="italic"],
h3 span[style*="italic"] {
  color: var(--onyx) !important;
}

.grain-overlay {
  opacity: 0.045;
  mix-blend-mode: multiply;
}

/* Masthead sits on the paper, including after scroll. */
header {
  background: rgba(255, 246, 233, 0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(10, 23, 29, 0.08) !important;
}

header img {
  height: 52px !important;
}

/* Cream logo, knocked out to ink on the paper pages. */
header img[src*="logo-light"],
main img[src*="logo-light"] {
  filter: brightness(0) saturate(100%) !important;
}

/* The intro film stays a dark room. The mark stays light on it. */
body:has([aria-label="Skip intro"]) header {
  background: transparent !important;
  border-bottom-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body:has([aria-label="Skip intro"]) header img {
  filter: none !important;
}

[aria-label="Skip intro"] .label {
  color: var(--wheat) !important;
}

/* The short rule under the hero wordmark. */
div[style*="max-width:120px"][style*="height:1px"],
div[style*="max-width: 120px"][style*="height: 1px"] {
  display: none !important;
}

/* The scroll cue, including the line under the word. */
div[style*="bottom:3rem"][style*="left:50%"],
div[style*="bottom: 3rem"][style*="left: 50%"] {
  display: none !important;
}

/* Gold glow behind the hero. */
div[style*="rgba(200, 149, 108"] {
  opacity: 0 !important;
}

/* Client-coloured ticks on the old work cards. */
div[style*="height:2px"][style*="left:0"][style*="right:0"] {
  display: none !important;
}

.btn-primary,
.btn-outline {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 0;
  padding: 0.9rem 1.35rem;
  box-shadow: none;
}

.btn-primary {
  background: var(--oceanic);
  color: var(--wheat);
}

.btn-primary:hover {
  background: var(--onyx);
  color: var(--wheat);
  transform: none;
  box-shadow: none;
}

.btn-outline {
  color: var(--onyx);
  border: 1px solid rgba(10, 23, 29, 0.28);
  background: transparent;
}

.btn-outline:hover {
  border-color: var(--oceanic);
  color: var(--oceanic);
  transform: none;
}

/* Homepage index: the work is a plate, then the name. */
a[href^="/work/#"] > div {
  background: transparent !important;
  border: none !important;
  min-height: 0 !important;
  padding: 0 0 2.25rem !important;
}

a[href^="/work/#"] > div::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 1.15rem;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

a[href="/work/#bses"] > div::before {
  background-image: url("/images/work/bses/hero.jpg?v=2");
}

a[href="/work/#iica"] > div::before {
  background-image: url("/images/work/iica/hero.jpg?v=2");
}

a[href="/work/#itrhd"] > div::before {
  background-image: url("/images/work/itrhd/hero.jpg?v=2");
}

a[href="/work/#aios-times"] > div::before {
  background-image: url("/images/work/aios-times/hero.jpg?v=2");
}

a[href="/work/#kahaani-koncerti"] > div::before {
  background-image: url("/images/work/kahaani-koncerti/hero.jpg?v=2");
}

a[href="/work/#supportact"] > div::before {
  background-image: url("/images/work/supportact/hero.jpg?v=2");
}

/* Discipline pills become a caption line. */
span[style*="border:1px solid var(--slate)"] {
  border: none !important;
  padding: 0 !important;
  color: var(--muted) !important;
}

span[style*="border:1px solid var(--slate)"] + span[style*="border:1px solid var(--slate)"]::before {
  content: "·";
  margin: 0 0.45rem 0 0.15rem;
  color: var(--nectarine);
}

/* Work index: pictures and names, without the card chrome. */
a[href^="/work/"] > div[style*="var(--charcoal)"] {
  background: transparent !important;
  border-color: transparent !important;
}

a[href^="/work/"] div[style*="2 / 1"] {
  aspect-ratio: 4 / 3 !important;
  border-bottom: none !important;
  background: transparent !important;
}

/* Labels that sit on photographs were written for a light ink. */
span[style*="rgba(10, 10, 10, 0.75)"],
span[style*="rgba(10, 10, 10, 0.85)"] {
  color: var(--wheat) !important;
  background: rgba(10, 23, 29, 0.72) !important;
  border-color: transparent !important;
}

/* Spreads sit on the paper. */
button[aria-label^="Open"] {
  background: transparent !important;
  border: none !important;
}

/* Publishing chapters: picture first, essay column second. */
@media (min-width: 960px) {
  div[style*="minmax(300px, 1fr)"][style*="align-items:start"],
  div[style*="minmax(300px, 1fr)"][style*="align-items: start"] {
    grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.72fr) !important;
    gap: 3.5rem !important;
    align-items: start !important;
  }
}

input,
textarea,
select {
  color: var(--onyx);
  caret-color: var(--oceanic);
}

input::placeholder,
textarea::placeholder {
  color: #8d8478;
}

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

/* Mobile menu is the other night. */
div[style*="rgba(10, 10, 10, 0.97)"] {
  background: var(--onyx) !important;
}

div[style*="rgba(10, 10, 10, 0.97)"] a span {
  color: var(--wheat) !important;
}

div[style*="rgba(10, 10, 10, 0.97)"] .label {
  color: var(--nectarine) !important;
}

/* Image viewer stays dark, so its type has to be light. */
div[style*="rgba(6,6,6,0.96)"],
div[style*="rgba(6, 6, 6, 0.96)"] {
  background: rgba(10, 23, 29, 0.96) !important;
}

div[style*="rgba(6,6,6,0.96)"] .label,
div[style*="rgba(6, 6, 6, 0.96)"] .label,
div[style*="rgba(6,6,6,0.96)"] p,
div[style*="rgba(6, 6, 6, 0.96)"] p,
div[style*="rgba(6,6,6,0.96)"] button,
div[style*="rgba(6, 6, 6, 0.96)"] button {
  color: var(--wheat) !important;
  border-color: rgba(255, 246, 233, 0.35) !important;
}

/* The close of the site is the one dark chapter. */
footer {
  background: var(--onyx) !important;
  color: var(--wheat) !important;
  border-top: none !important;
}

footer .label {
  color: var(--nectarine) !important;
}

footer h2,
footer h2 span,
footer h2 span[style*="italic"] {
  color: var(--wheat) !important;
}

footer h2 span[style*="italic"] {
  color: var(--nectarine) !important;
}

footer p,
footer a,
footer span {
  color: #e7e0d4 !important;
}

footer div[style*="var(--graphite)"] {
  border-color: rgba(255, 246, 233, 0.16) !important;
}

footer .btn-primary {
  background: var(--nectarine) !important;
  color: var(--onyx) !important;
}

footer .btn-primary:hover {
  background: var(--wheat) !important;
  color: var(--onyx) !important;
}

footer img {
  filter: none !important;
  height: 52px !important;
}