@font-face { font-family: "Archivo Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 89%; ascent-override: 98%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Serif Fallback"; src: local("Georgia"), local("Times New Roman"); size-adjust: 88%; }
/* ideasofaman.com - projects page */
.projects-page { background: var(--ice-light, #FDF3E4); color: var(--merlot, #9E4433); }
.projects-hero { padding: 140px 0 32px; }
.projects-hero h1 { font: 300 clamp(36px, 5vw, 72px)/1.02 Archivo, "Archivo Fallback", sans-serif; letter-spacing: -0.01em; margin: 0 0 12px; }
.projects-hero h1 em { font-family: "Instrument Serif", "Serif Fallback", Georgia, serif; font-style: italic; font-weight: 400; color: rgb(158 68 51 / .7); }
.filters-old { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 32px; font: 400 14px/1 Archivo, "Archivo Fallback", sans-serif; }
.filters label { display: flex; align-items: center; gap: 8px; }
.filters select { font: 400 14px/1 Archivo, "Archivo Fallback", sans-serif; color: var(--merlot); background: #fff; border: 1px solid rgb(158 68 51 / .25); border-radius: 999px; padding: 10px 14px; }
.filters .clear { font: 400 14px/1 Archivo, "Archivo Fallback", sans-serif; background: none; border: 0; color: var(--merlot); text-decoration: underline; cursor: pointer; padding: 10px; }
.projects-list { padding: 24px 0 120px; }
.project { display: grid; grid-template-columns: 1.1fr 2fr; gap: 40px; padding: 48px 0; border-top: 1px solid rgb(158 68 51 / .15); align-items: start; }
.project:target { scroll-margin-top: 100px; }
.project .cover { aspect-ratio: 9/16; max-width: 360px; border-radius: 16px; overflow: hidden; position: relative; background: rgb(158 68 51 / .08); }
.project .cover video, .project .cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.project h2 { font: 300 clamp(28px, 3vw, 44px)/1.08 Archivo, "Archivo Fallback", sans-serif; margin: 0 0 8px; }
.project .meta { font: 400 12px/1 Archivo, "Archivo Fallback", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--ice, #D8A38F); margin: 0 0 16px; }
.project .blurb { font: 300 17px/1.55 Archivo, "Archivo Fallback", sans-serif; max-width: 560px; margin: 0 0 16px; }
.project .tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.project .tags li { font: 400 12px/1 Archivo, "Archivo Fallback", sans-serif; border: 1px solid rgb(158 68 51 / .25); border-radius: 999px; padding: 8px 12px; }
.project .links { display: flex; gap: 16px; font: 400 14px/1 Archivo, "Archivo Fallback", sans-serif; margin-bottom: 24px; }
.project .links a { color: var(--merlot); }
.project .reels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.project .reels .reel { aspect-ratio: 9/16; border-radius: 12px; overflow: hidden; position: relative; background: rgb(158 68 51 / .08); display: block; color: #fff; }
.project .reels .reel video, .project .reels .reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.project .reels .cap { position: absolute; left: 10px; right: 10px; bottom: 10px; font: 400 12px/1.2 Archivo, "Archivo Fallback", sans-serif; text-shadow: 0 1px 8px rgb(0 0 0 / .6); pointer-events: none; }
.project .cover.has-player { cursor: pointer; }
.project .cover .play, .project .reels .play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgb(255 255 255 / .9); color: var(--merlot, #9E4433);
  display: grid; place-items: center; opacity: 0; transition: opacity .2s;
}
.project .play svg { width: 20px; height: 20px; fill: currentColor; margin-left: 3px; }
.project .cover:hover .play, .project .reel:hover .play { opacity: 1; }
.project .is-sound .play, .project .is-sound .cap { display: none; }
.project .is-sound video { object-fit: contain; background: #000; }
@media (hover: none) { .project .play { opacity: 1; } }

/* Service tabs */
.project .tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.project .tab { font: 400 13px/1 Archivo, "Archivo Fallback", sans-serif; color: var(--merlot); background: rgb(255 255 255 / .35); border: 1px solid rgb(158 68 51 / .25); border-radius: 999px; padding: 9px 14px; cursor: pointer; transition: background .15s, color .15s; }
.project .tab:hover { background: rgb(255 255 255 / .7); }
.project .tab.is-on { background: var(--merlot, #9E4433); color: var(--ice-light, #FDF3E4); border-color: var(--merlot, #9E4433); }
.project .panel { min-height: 200px; }
.project .imgs { columns: 3; column-gap: 12px; }
.project .imgs figure { margin: 0 0 12px; break-inside: avoid; border-radius: 12px; overflow: hidden; background: rgb(158 68 51 / .08); }
.project .imgs img, .project .social img { display: block; width: 100%; height: auto; }
.project .social figure { margin: 0; max-width: 760px; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 40px rgb(158 68 51 / .18); }
@media (max-width: 1023px) { .project .imgs { columns: 2; } }
.project[hidden] { display: none; }
@media (max-width: 1023px) { .project { grid-template-columns: 1fr; } .project .reels { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 599px) { .projects-hero { padding-top: 110px; } .project .reels { grid-template-columns: repeat(2, 1fr); } }

/* Static pills, not clickable */
.pill-rows { display: grid; gap: 14px; margin-top: 32px; }
.pill-row { display: flex; align-items: flex-start; gap: 14px; }
.pill-label { font: 400 12px/28px Archivo, "Archivo Fallback", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--ice, #D8A38F); min-width: 88px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pills li { font: 400 13px/1 Archivo, "Archivo Fallback", sans-serif; color: var(--merlot); border: 1px solid rgb(158 68 51 / .25); border-radius: 999px; padding: 8px 14px; background: rgb(255 255 255 / .35); }
/* captions sit above the video (the player adds the video after them, which hid every caption) */
.project .reels .cap, .project .reel .who { z-index: 2; }

/* per-block tile ratio + columns, and the live button */
.project .reels { grid-template-columns: repeat(var(--tile-cols, 4), 1fr); }
.project .reels .reel { aspect-ratio: var(--tile-ar, 9/16); }
.project .reels .reel .tile-link { position: absolute; inset: 0; display: block; }
.project .live-btn {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px;
  font: 400 13px/1 Archivo, "Archivo Fallback", sans-serif; letter-spacing: .04em;
  color: var(--ice-light, #FDF3E4); background: var(--merlot, #9E4433);
  border: 1px solid var(--merlot, #9E4433); border-radius: 999px; padding: 11px 18px;
  text-decoration: none; transition: opacity .15s;
}
.project .live-btn:hover { opacity: .82; }
@media (max-width: 760px) { .project .reels { grid-template-columns: repeat(2, 1fr); } }

/* a service opens on its first row; the rest folds in */
.project .reels.is-clipped > *:nth-child(n+5) { display: none; }
.project .more-btn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font: 400 13px/1 Archivo, "Archivo Fallback", sans-serif; letter-spacing: .03em;
  color: var(--merlot, #9E4433); background: transparent;
  border: 1px solid rgb(158 68 51 / .28); border-radius: 999px; padding: 10px 16px;
  cursor: pointer; transition: background .15s;
}
.project .more-btn:hover { background: rgb(255 255 255 / .55); }

/* the project list now sits on merlot in the alternating run - same anatomy, ice ink */
.on-merlot .project { border-top-color: rgb(253 243 228 / .18); }
.on-merlot .project h2,
.on-merlot .project .blurb { color: var(--ice-light, #FDF3E4); }
.on-merlot .project .meta { color: var(--ice, #D8A38F); }
.on-merlot .project .tags li { border-color: rgb(253 243 228 / .3); color: var(--ice-light, #FDF3E4); }
.on-merlot .project .links a { color: var(--ice-light, #FDF3E4); }
.on-merlot .project .tab { color: var(--ice-light, #FDF3E4); background: rgb(253 243 228 / .08); border-color: rgb(253 243 228 / .3); }
.on-merlot .project .tab:hover { background: rgb(253 243 228 / .16); }
.on-merlot .project .tab.is-on { background: var(--ice-light, #FDF3E4); color: var(--merlot, #9E4433); border-color: var(--ice-light, #FDF3E4); }
.on-merlot .project .cover,
.on-merlot .project .reels .reel { background: rgb(253 243 228 / .08); }
.on-merlot .project .live-btn { background: var(--ice-light, #FDF3E4); color: var(--merlot, #9E4433); border-color: var(--ice-light, #FDF3E4); }
.on-merlot .project .more-btn { color: var(--ice-light, #FDF3E4); border-color: rgb(253 243 228 / .3); }
.on-merlot .project .more-btn:hover { background: rgb(253 243 228 / .12); }
.on-merlot .fold-toggle { color: var(--ice-light, #FDF3E4); }

/* on the ice-light ground the ice meta label washed out (1.7:1) - use merlot ink there */
.on-light .project .meta { color: rgb(158 68 51 / .62); }

/* the heading accent was merlot ink; on a merlot ground it disappeared */
.on-merlot.projects-hero h1 em { color: rgb(253 243 228 / .72); }

/* phones: the big cover column is dropped; the tabs and the grid carry the project.
   Desktop is unchanged. Hidden means no layout box, so the clip never downloads either. */
@media (max-width: 760px) {
  .project { grid-template-columns: minmax(0, 1fr); }
  .project > .cover { display: none; }
}