:root { --coal: #101311; --charcoal: #171c19; --paper: #e6d7ae; --paper-light: #f2e8cc; --brass: #b98d47; --brass-light: #e3bd73; --ink: #151510; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--coal); color: var(--paper-light); font-family: "Palatino Linotype", "Book Antiqua", Georgia, serif; }
a { color: inherit; }
.site-header { align-items: center; background: rgba(16,19,17,.92); border-bottom: 1px solid rgba(227,189,115,.22); display: grid; grid-template-columns: 1fr auto 1fr; min-height: 76px; padding: 0 5vw; position: sticky; top: 0; z-index: 10; }
.wordmark,.footer-mark { align-items: center; display: flex; font-weight: 700; gap: .65rem; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.wordmark-mark,.footer-mark > span { align-items: center; background: var(--brass); border-radius: 50%; color: var(--ink); display: inline-flex; font-size: .95rem; height: 1.9rem; justify-content: center; width: 1.9rem; }
nav { display: flex; gap: 1.8rem; }
nav a,.header-link { color: #d8d1bd; font-family: "Courier New", monospace; font-size: .7rem; letter-spacing: .13em; text-decoration: none; text-transform: uppercase; }
nav a:hover,.header-link:hover,.work-copy a:hover { color: var(--brass-light); }.header-link { justify-self: end; }
.hero { background: var(--coal); isolation: isolate; min-height: min(780px,calc(100vh - 76px)); overflow: hidden; padding: clamp(4rem,10vw,9rem) 5vw 4rem; position: relative; }
.hero-art { inset: 0; opacity: .5; position: absolute; z-index: -3; }.hero-art::after { background: linear-gradient(90deg,var(--coal) 5%,rgba(16,19,17,.84) 42%,rgba(16,19,17,.25) 100%),linear-gradient(0deg,var(--coal) 0%,transparent 45%); content: ""; inset: 0; position: absolute; }.hero-art img { height: 100%; object-fit: cover; object-position: 58% center; width: 100%; }
.hero-grain { background-image: radial-gradient(rgba(255,255,255,.16) .55px,transparent .55px); background-size: 4px 4px; inset: 0; mix-blend-mode: soft-light; opacity: .28; pointer-events: none; position: absolute; z-index: -1; }
.hero-copy { max-width: 58rem; }.eyebrow,.section-kicker { color: var(--brass-light); font-family: "Courier New", monospace; font-size: .72rem; font-weight: 700; letter-spacing: .14em; margin: 0 0 1.25rem; text-transform: uppercase; }
.hero h1 { font-size: clamp(3.2rem,7vw,7.2rem); font-weight: 400; letter-spacing: -.055em; line-height: .89; margin: 0; max-width: 13ch; text-wrap: balance; }.hero h1 em { color: var(--brass-light); font-weight: 400; }
.hero-intro { color: #e8dfc3; font-size: clamp(1.08rem,1.5vw,1.32rem); line-height: 1.55; margin: 2rem 0; max-width: 36rem; }.button { display: inline-flex; font-family: "Courier New", monospace; font-size: .75rem; font-weight: 700; gap: .8rem; letter-spacing: .08em; padding: 1rem 1.25rem; text-decoration: none; text-transform: uppercase; transition: background .2s ease,color .2s ease; }.button-primary { background: var(--brass-light); color: var(--ink); }.button-primary:hover { background: var(--paper-light); }
.makers-plate { background: #e9dbb8; bottom: 3.5rem; box-shadow: 0 20px 55px rgba(0,0,0,.45); color: var(--ink); padding: .65rem .65rem .85rem; position: absolute; right: 5vw; transform: rotate(3deg); width: clamp(148px,15vw,202px); }.makers-plate p,.makers-plate span { display: block; font-family: "Courier New", monospace; font-size: .52rem; letter-spacing: .08em; margin: .4rem .15rem; text-align: center; text-transform: uppercase; }.seal-wrap { background: #fff; border: 1px solid rgba(16,19,17,.35); height: 132px; overflow: hidden; }.seal-wrap img { display: block; height: 100%; mix-blend-mode: multiply; object-fit: cover; width: 100%; }.hero-note { bottom: 1.5rem; color: #c6b98e; font-family: "Courier New", monospace; font-size: .61rem; left: 5vw; letter-spacing: .12em; margin: 0; position: absolute; text-transform: uppercase; }
.intro-band { background: var(--paper); color: var(--ink); display: grid; gap: 2rem; grid-template-columns: minmax(140px,.6fr) minmax(0,2fr); padding: clamp(3.5rem,7vw,7rem) 16vw; position: relative; }.intro-band::before { background: linear-gradient(90deg,transparent,rgba(88,54,21,.2),transparent); content: ""; height: 1px; left: 16vw; position: absolute; right: 16vw; top: 2rem; }.section-kicker { color: #6f4822; line-height: 1.5; }.intro-band > p:last-child { font-size: clamp(1.35rem,2.25vw,2.15rem); line-height: 1.28; margin: 0; }.intro-band strong { color: #7d4c21; font-weight: 700; }
.works-section { background: var(--charcoal); padding: clamp(4.5rem,8vw,8rem) 5vw; }.section-heading { margin: 0 auto 4rem; max-width: 1140px; }.section-heading h2,.shelf-copy h2,.stories-copy h2 { color: var(--paper-light); font-size: clamp(2.6rem,5vw,5.1rem); font-weight: 400; letter-spacing: -.05em; line-height: .95; margin: 0; }.section-heading > p:last-child { color: #b7ae96; font-size: 1.08rem; margin: 1.2rem 0 0; }.work-list { margin: auto; max-width: 1140px; }
.work-card { align-items: stretch; border-top: 1px solid rgba(227,189,115,.28); display: grid; grid-template-columns: 70px minmax(0,1.1fr) minmax(300px,.9fr); min-height: 400px; padding: 1.25rem 0; }.work-card:last-child { border-bottom: 1px solid rgba(227,189,115,.28); }.work-number { color: var(--brass); font-family: "Courier New", monospace; font-size: .75rem; padding-top: .3rem; }.work-copy { align-self: center; padding: 2.5rem 2.5rem 2.5rem 0; }.work-kind { color: var(--brass-light); font-family: "Courier New", monospace; font-size: .68rem; letter-spacing: .1em; margin: 0 0 1rem; text-transform: uppercase; }.work-copy h3 { font-size: clamp(2rem,3.4vw,3.65rem); font-weight: 400; letter-spacing: -.045em; line-height: .95; margin: 0; }.work-copy > p:not(.work-kind) { color: #c8c1ae; font-size: 1.03rem; line-height: 1.55; margin: 1.45rem 0; max-width: 35rem; }.work-copy a { color: var(--paper-light); font-family: "Courier New", monospace; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.work-image-wrap { min-height: 350px; overflow: hidden; position: relative; }.work-image { height: 100%; object-fit: cover; transition: transform .6s ease; width: 100%; }.work-card:hover .work-image { transform: scale(1.04); }.work-card-lathmar .work-image { object-position: center; }.work-card-wizards .work-image { object-position: center; opacity: .8; }.work-card-africa .work-image { filter: sepia(.18) contrast(1.05); object-position: center; }.work-image-wrap::after { background: linear-gradient(0deg,rgba(0,0,0,.65),transparent 45%); content: ""; inset: 0; pointer-events: none; position: absolute; }.image-label { bottom: .85rem; color: var(--paper-light); font-family: "Courier New", monospace; font-size: .56rem; left: 1rem; letter-spacing: .08em; position: absolute; text-transform: uppercase; z-index: 1; }.sprite { bottom: -18%; filter: drop-shadow(0 14px 14px rgba(0,0,0,.45)); height: auto; position: absolute; width: 55%; z-index: 1; }.sprite-red { left: -10%; }.sprite-hydra { right: -12%; transform: rotate(-8deg); }
.free-shelf { align-items: center; background: #9b713a; color: var(--ink); display: grid; gap: clamp(2rem,6vw,7rem); grid-template-columns: .8fr 1.2fr .65fr; min-height: 480px; overflow: hidden; padding: clamp(4rem,8vw,7rem) 10vw; position: relative; }.free-shelf::before { background: repeating-linear-gradient(90deg,rgba(76,45,17,.1) 0 2px,transparent 2px 12px); content: ""; inset: 0; opacity: .4; position: absolute; }.free-shelf > * { position: relative; }.shelf-rune { align-items: center; border: 2px solid var(--ink); border-radius: 50%; display: flex; font-family: "Courier New", monospace; font-size: clamp(2.4rem,5vw,5.5rem); font-weight: 700; height: clamp(150px,18vw,245px); justify-content: center; letter-spacing: -.12em; transform: rotate(-10deg); width: clamp(150px,18vw,245px); }.shelf-copy .eyebrow { color: #4a2c14; }.shelf-copy h2 { color: var(--ink); }.shelf-copy > p:not(.eyebrow) { font-size: 1.1rem; line-height: 1.58; max-width: 32rem; }.coming-soon { border-bottom: 1px solid rgba(21,21,16,.55); display: inline-block; font-family: "Courier New", monospace; font-size: .66rem; font-weight: 700; letter-spacing: .1em; padding-bottom: .4rem; text-transform: uppercase; }.shelf-index { display: grid; font-family: "Courier New", monospace; font-size: .66rem; gap: .6rem; letter-spacing: .08em; text-transform: uppercase; }
.stories-section { align-items: center; background: #101e1a; display: grid; gap: 4rem; grid-template-columns: .8fr 1.2fr; min-height: 500px; overflow: hidden; padding: clamp(4.5rem,9vw,8rem) 15vw; position: relative; }.stories-section::after { border: 1px solid rgba(112,165,107,.5); border-radius: 50%; content: ""; height: 32rem; left: -18rem; position: absolute; top: -12rem; width: 32rem; }.story-orbit { align-items: center; animation: slow-spin 25s linear infinite; border: 1px solid rgba(227,189,115,.65); border-radius: 50%; color: var(--brass-light); display: flex; font-family: "Courier New", monospace; font-size: .58rem; height: 15rem; justify-content: center; letter-spacing: .12em; position: relative; text-transform: uppercase; width: 15rem; }.story-orbit span { position: absolute; }.story-orbit span:nth-child(1) { top: 1rem; }.story-orbit span:nth-child(2) { right: .5rem; transform: rotate(90deg); }.story-orbit span:nth-child(3) { bottom: 1rem; transform: rotate(180deg); }.story-orbit span:nth-child(4) { left: .5rem; transform: rotate(-90deg); }.stories-copy { position: relative; z-index: 1; }.stories-copy > p:not(.eyebrow) { color: #d0c9b6; font-size: 1.1rem; line-height: 1.6; max-width: 34rem; }
footer { align-items: end; background: #0a0c0b; border-top: 1px solid rgba(227,189,115,.22); display: grid; gap: 2rem; grid-template-columns: 1fr auto 1fr; padding: 4rem 5vw 3rem; }.footer-mark { align-items: flex-start; font-size: .7rem; }.footer-mark p { line-height: 1.5; margin: .25rem 0 0; }.imprint { text-align: center; }.imprint .eyebrow { margin-bottom: .85rem; }address { color: #d7cfb8; font-size: .9rem; font-style: normal; line-height: 1.6; }.footer-end { color: #a99f86; font-family: "Courier New", monospace; font-size: .62rem; justify-self: end; letter-spacing: .08em; line-height: 1.6; margin: 0; text-align: right; text-transform: uppercase; }
@keyframes slow-spin { to { transform: rotate(360deg); } }
@media (max-width: 840px) { .site-header { grid-template-columns: 1fr auto; padding: 0 1.3rem; }nav { display: none; }.hero { min-height: 720px; padding: 5.5rem 1.4rem 3.5rem; }.hero-art img { object-position: 65% center; }.hero-art::after { background: linear-gradient(90deg,rgba(16,19,17,.92),rgba(16,19,17,.54)),linear-gradient(0deg,var(--coal),transparent 55%); }.makers-plate { bottom: 4.5rem; right: 1.4rem; }.intro-band { grid-template-columns: 1fr; padding: 4rem 1.4rem; }.intro-band::before { left: 1.4rem; right: 1.4rem; }.works-section { padding: 4.5rem 1.4rem; }.work-card { grid-template-columns: 42px 1fr; }.work-image-wrap { grid-column: 2; min-height: 280px; }.work-copy { padding: 2rem 0; }.free-shelf,.stories-section { grid-template-columns: 1fr; padding: 4.5rem 1.4rem; }.shelf-index { grid-template-columns: 1fr 1fr; }footer { grid-template-columns: 1fr; padding: 3rem 1.4rem; }.imprint { text-align: left; }.footer-end { justify-self: start; text-align: left; } }
@media (max-width: 480px) { .header-link { display: none; }.site-header { grid-template-columns: 1fr; }.wordmark { justify-self: center; }.hero { min-height: 760px; }.hero h1 { font-size: 3.15rem; }.makers-plate { transform: rotate(2deg) scale(.88); transform-origin: bottom right; }.work-card { grid-template-columns: 1fr; }.work-number { margin-top: .4rem; }.work-image-wrap { grid-column: auto; }.story-orbit { height: 11rem; width: 11rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.story-orbit { animation: none; }.work-image { transition: none; } }

.hero-seal { bottom: 3.5rem; filter: drop-shadow(0 18px 20px rgba(0,0,0,.5)); height: auto; position: absolute; right: 5vw; transform: rotate(3deg); width: clamp(150px,17vw,235px); }
.footer-imprint-link { color: var(--brass-light); font-family: "Courier New", monospace; font-size: .67rem; font-weight: 700; justify-self: center; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }.footer-imprint-link:hover { color: var(--paper-light); }
.imprint-page { background: radial-gradient(circle at 84% 16%, rgba(185,141,71,.18), transparent 25rem), #101311; min-height: 100vh; }.imprint-page .site-header { position: relative; }.imprint-sheet { margin: clamp(4rem,9vw,9rem) auto; max-width: 820px; padding: 0 1.5rem; }.imprint-sheet-inner { background: #e6d7ae; box-shadow: 18px 18px 0 rgba(185,141,71,.15); color: var(--ink); padding: clamp(2.5rem,7vw,6rem); position: relative; }.imprint-sheet-inner::before { border: 1px solid rgba(90,54,20,.35); content: ""; inset: .65rem; pointer-events: none; position: absolute; }.imprint-sheet-inner > * { position: relative; }.imprint-sheet h1 { font-size: clamp(3rem,7vw,6rem); font-weight: 400; letter-spacing: -.06em; line-height: .9; margin: 0 0 2.5rem; }.imprint-sheet address { color: var(--ink); font-size: clamp(1.1rem,2vw,1.4rem); line-height: 1.75; }.imprint-back { border-bottom: 1px solid rgba(21,21,16,.6); display: inline-block; font-family: "Courier New", monospace; font-size: .68rem; font-weight: 700; letter-spacing: .1em; margin-top: 3rem; padding-bottom: .35rem; text-decoration: none; text-transform: uppercase; }.imprint-back:hover { color: #7d4c21; }
@media (max-width: 840px) { .hero-seal { bottom: 4.5rem; right: 1.4rem; } }.imprint-page .site-header nav { display: flex; }@media (max-width: 620px) { .imprint-page .site-header nav { display: none; }.imprint-sheet { margin: 2rem auto; }.imprint-sheet-inner { box-shadow: none; } }
@media (max-width: 480px) { .hero-seal { transform: rotate(2deg) scale(.88); transform-origin: bottom right; } }