/* imaginaryrepublic.com — shared by /hire, /work and /work/mythoscope (card 20261019-2012; @icarus HR1 66:2, HR2 67:2, WK1 68:2,
   WK2 68:55, IR-Website file; @jace OK 10/28). The header is header.css (the home page loads only that). Tokens are the live site's. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Inter:wght@400;500;600&display=swap');
:root{--night:#160305;--cream:#efe2d2;--gold:#e8c170;--mute:#8a7a5a;--sand:#b9a38c;--dim:#8c7462;--ink:#2a0e12;
  --card:rgba(28,10,13,.72);--line:rgba(232,193,112,.22);--serif:"Cormorant Garamond",Georgia,serif;--sans:"Inter",system-ui,sans-serif}

/* the pages */
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--night)}
body.irp{min-height:100vh;color:var(--cream);font-family:var(--serif);-webkit-font-smoothing:antialiased;
  background:radial-gradient(ellipse 100% 70% at 50% 100%,#5a1420 0%,#370e15 50%,#260a0f 75%,#140709 100%) fixed,var(--night)}
.irp main{width:100%;max-width:1280px;margin:0 auto;padding:0 96px 80px}
.irp a{color:inherit}
.eyebrow{font:600 12px var(--sans);letter-spacing:1.92px;color:var(--gold);text-transform:uppercase}
.hero{display:flex;flex-direction:column;gap:24px;padding-top:120px}
.hero h1{font:400 96px/1 var(--serif);color:var(--cream)}
.hero h1 em{color:var(--gold)}
.lede{font:italic 400 26px/36px var(--serif);max-width:780px}
.proof{display:flex;flex-wrap:wrap;gap:6px 14px;list-style:none;font:500 12px var(--sans);letter-spacing:1.2px;color:var(--sand);text-transform:uppercase}
.proof li+li::before{content:"·";margin-right:14px;font:400 13px var(--sans);color:var(--dim)}
.btn{display:inline-flex;align-items:center;justify-content:center;height:56px;min-width:220px;padding:0 24px;border-radius:28px;
  background:var(--gold);color:var(--ink);font:600 17px var(--sans);text-decoration:none}
.btn:hover,.btn:focus-visible{background:#f0cf8a;outline:none}
.btn.line{background:none;border:1px solid rgba(232,193,112,.55);color:var(--cream);min-width:0}
.btn.line:hover,.btn.line:focus-visible{background:rgba(232,193,112,.12)}
.link{display:inline-flex;align-items:center;min-height:44px;font:500 15px var(--sans);color:var(--gold);text-decoration:none}
.link:hover,.link:focus-visible{text-decoration:underline;text-underline-offset:4px;outline:none}

/* /hire: two families of offers (HR1) */
.families{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding-top:120px;align-items:start}
.family{display:flex;flex-direction:column;gap:16px}
.family .sub{font:italic 400 24px var(--serif);color:var(--sand)}
.offer{display:flex;flex-direction:column;gap:10px;padding:28px 28px 20px;background:var(--card);border:1px solid var(--line);border-radius:16px}
.offer .n{font:600 12px var(--sans);letter-spacing:1.44px;color:var(--gold)}
.offer h3{font:500 34px var(--serif)}
.offer p{font:400 16px/25px var(--sans)}
.offer .for{font:italic 400 19px var(--serif);color:var(--sand)}
.start{display:flex;flex-direction:column;align-items:center;gap:22px;padding-top:140px;text-align:center}
.start .line{font:italic 400 34px/44px var(--serif);max-width:760px}
.start .mail{font:400 15px var(--sans);color:var(--sand)}
.start .mail a{display:inline-block;padding:13px 0;color:var(--gold);text-decoration:none}   /* 44 tall, HR2 */
.start .fine{font:400 13px var(--sans);color:var(--dim)}

/* /work: products 2 × 2 (WK1) */
.products{display:grid;grid-template-columns:1fr 1fr;gap:32px 8px;padding-top:90px}
.product{display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:18px;background:rgba(28,10,13,.45);border:1px solid rgba(232,193,112,.14);color:var(--sand)}
.product.live{background:rgba(28,10,13,.8);border-color:rgba(232,193,112,.35);color:var(--cream)}
.product .still{aspect-ratio:492/277;border-radius:10px;border:1px solid rgba(232,193,112,.12);background:#1a0b0e;overflow:hidden}
.product .still img{display:block;width:100%;height:100%;object-fit:cover}
.product .name{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.product h2{font:500 36px var(--serif)}
.chip{padding:4px 10px;border:1px solid rgba(140,116,98,.6);border-radius:12px;font:600 12px var(--sans);letter-spacing:1.2px;text-transform:uppercase}
.product.live .chip{border-color:rgba(232,193,112,.6);color:var(--gold)}
.product p{font:400 16px var(--sans)}
.close{display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:110px;padding-top:48px;border-top:1px solid rgba(232,193,112,.18);text-align:center}
.close p{font:italic 400 28px/38px var(--serif);max-width:760px}

/* /work/mythoscope (WK2) */
.story .hero{padding-top:90px;gap:22px}
.story .hero h1{font-size:64px;line-height:70px;max-width:980px}
.story .body{font:400 18px/29px var(--sans);max-width:760px}
.film{margin-top:56px;aspect-ratio:16/9;border-radius:16px;border:1px solid rgba(232,193,112,.2);overflow:hidden}
.film img{display:block;width:100%;height:100%;object-fit:cover}
.did{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;padding-top:72px}
.did div{display:flex;flex-direction:column;gap:10px}
.did p{font:italic 400 22px/30px var(--serif);color:var(--sand);max-width:330px}
.links{display:flex;flex-wrap:wrap;gap:16px;padding-top:56px}
.links .btn{height:52px;min-width:0;font-size:16px}

footer.irf{padding:64px 16px 40px;text-align:center;font:400 12px var(--sans);color:var(--mute)}
footer.irf a{color:inherit;text-underline-offset:3px}

/* phone (HR2: one column; H1 54 over two lines, lede 21/29, offer names 28, Book a call full width; no text under 12, taps 44+) */
@media (max-width:900px){ .families,.products{grid-template-columns:1fr} .did{grid-template-columns:1fr;gap:24px} }
@media (max-width:700px){
  .irp main{padding:0 16px 56px}
  .hero{padding-top:56px;gap:18px} .hero h1{font-size:54px;line-height:56px} .lede{font-size:21px;line-height:29px}
  .families{padding-top:64px;gap:48px} .offer{padding:22px 20px 14px} .offer h3{font-size:28px}
  .start{padding-top:80px} .start .line{font-size:26px;line-height:34px} .start .btn,.close .btn{width:100%}
  .products{padding-top:56px;gap:20px} .product h2{font-size:30px}
  .story .hero{padding-top:56px} .story .hero h1{font-size:40px;line-height:46px} .story .body{font-size:17px;line-height:27px}
  .film{margin-top:36px} .did{padding-top:48px} .links{padding-top:40px} .links .btn{flex:1 1 100%}
  .close{margin-top:72px} .close p{font-size:23px;line-height:32px}
}