/* marcomiraglia.com — shared site stylesheet ────────────────────────────────────────────── One file, one source of truth. Every page links to /assets/site.css. Density toggle: tightens spacing and type. */ :root { --bg: #f1ede2; --paper: #e9e3d1; --ink: #1c1a16; --ink-soft: #62594b; --ink-faint: #9a9080; --rule: rgba(28,26,22,0.18); --accent: oklch(0.5 0.14 28); --serif: "Newsreader", Georgia, serif; --mono: "JetBrains Mono", ui-monospace, monospace; --maxw: 1320px; --gutter: 20px; --pad-section: 20px; --fs-body: 15px; --fs-h2: 22px; --fs-h1: clamp(34px, 4.6vw, 64px); --lh-body: 1.45; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; scroll-padding-top: 72px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--serif); font-size: var(--fs-body); line-height: var(--lh-body); text-wrap: pretty; } a { color: inherit; text-decoration: none; } img, svg, video { display: block; max-width: 100%; } ::selection { background: var(--ink); color: var(--bg); } .skip { position: absolute; left: -9999px; } .skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--ink); color: var(--bg); padding: 8px 12px; font-family: var(--mono); } /* ───────────── Topbar (shared header) ───────────── */ .topbar { border-bottom: 1px solid var(--rule); background: var(--bg); position: sticky; top: 0; z-index: 50; } .topbar-inner { max-width: var(--maxw); margin: 0 auto; padding: 14px var(--gutter); display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; } .nav-row { flex: 1 1 auto; justify-content: flex-end; } .wordmark { font-family: var(--serif); font-size: 22px; line-height: 1; letter-spacing: -0.01em; } .wordmark em { font-style: italic; color: var(--ink-soft); font-weight: 400; } .nav-row { display: flex; gap: 22px; flex-wrap: wrap; text-transform: lowercase; color: var(--ink-soft); } .nav-row a { transition: color .15s; padding-bottom: 2px; } .nav-row a:hover, .nav-row a[aria-current="page"] { color: var(--ink); border-bottom: 1px solid var(--ink); } .nav-row .sep { color: var(--ink-faint); } .status { justify-self: end; color: var(--ink-soft); text-transform: lowercase; } .status .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: oklch(0.65 0.15 145); margin-right: 6px; vertical-align: 1px; } /* ───────────── Page chrome ───────────── */ .shell { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } /* Hero / page header used across all pages */ .pagehead { max-width: var(--maxw); margin: 0 auto; padding: 48px var(--gutter); display: grid; grid-template-columns: 9fr 3fr; gap: 32px; align-items: end; border-bottom: 1px solid var(--rule); } .pagehead h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -0.015em; max-width: 22ch; } .pagehead h1 em { font-style: italic; color: var(--ink-soft); } .pagehead h1 .red { color: var(--accent); font-style: italic; } .pagehead .side { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); line-height: 1.6; text-align: right; } .pagehead .side b { display: block; color: var(--ink); font-weight: 500; } /* Bio strip */ .biostrip { max-width: var(--maxw); margin: 0 auto; padding: 24px var(--gutter) 32px; display: grid; grid-template-columns: 1fr 2.4fr 1fr; gap: 32px; border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: 12px; line-height: 1.7; color: var(--ink-soft); } .biostrip p { margin: 0; font-family: var(--serif); font-size: 19px; line-height: 1.5; color: var(--ink); max-width: 64ch; } .biostrip p em { font-style: italic; color: var(--ink-soft); } .biostrip .tags { display: flex; flex-direction: column; gap: 4px; } .biostrip .tags b { color: var(--ink); font-weight: 500; } /* Two-column section row (sidebar + body), shared by every page */ .section { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } .section-row { display: grid; grid-template-columns: 1fr 3fr; border-bottom: 1px solid var(--rule); } .section-side { padding: var(--pad-section) 24px var(--pad-section) 0; border-right: 1px solid var(--rule); } .section-side h2 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -0.01em; margin: 0; } .section-side h2 em { font-style: italic; color: var(--ink-soft); } .section-side .meta { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); margin-bottom: 14px; } .section-side p { margin: 12px 0 0; font-family: var(--mono); font-size: 12px; line-height: 1.7; color: var(--ink-soft); } .section-side p a { color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 1px; } .section-body { padding: 8px 0 8px 28px; } /* ───────────── Index list (rows of entries) ───────────── */ .idx { display: flex; flex-direction: column; } .idx a { display: grid; grid-template-columns: 56px 1fr 140px 28px; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: 13px; color: var(--ink-soft); transition: background .15s, color .15s; } .idx a:last-child { border-bottom: none; } .idx a:hover { background: rgba(28,26,22,0.04); color: var(--ink); } .idx a .yr { color: var(--ink); font-weight: 500; } .idx a .ttl { font-family: var(--serif); font-size: 22px; line-height: 1.1; color: var(--ink); letter-spacing: -0.005em; } .idx a .ttl em { font-style: italic; color: var(--ink-soft); } .idx a .ttl .red { color: var(--accent); font-style: italic; } .idx a .arr { text-align: right; } .idx a.featured { background: var(--paper); padding-left: 14px; padding-right: 14px; } .idx a.featured .ttl { font-size: 26px; } /* Compact rows used in Vision section (title + short tagline) */ .idx a.row-cs { grid-template-columns: 1fr auto; gap: 24px; padding: 14px 0; align-items: baseline; } .idx a.row-cs .ttl { font-family: var(--serif); font-size: 22px; line-height: 1.1; color: var(--ink); } .idx a.row-cs .cs { font-family: var(--mono); font-size: 13px; color: var(--ink-soft); text-align: right; } .idx a.row-cs .cs em { font-style: italic; } /* Past / closed projects */ .past-projects { margin-top: 12px; padding-top: 0; border-top: 0; } .past-title { font-family: var(--serif); font-size: 18px; font-weight: 400; color: var(--ink-soft); margin: 0 0 12px; letter-spacing: -0.005em; } .past-title em { font-style: italic; color: var(--ink); } .idx a.past { opacity: 0.7; background: transparent; padding-top: 10px; padding-bottom: 10px; } .idx a.past:hover { opacity: 1; background: rgba(28,26,22,0.04); } .idx a.past .ttl { font-size: 18px; color: var(--ink-soft); } .idx a.past .ttl em { color: var(--ink-soft); } .idx a.past .yr { color: var(--ink-soft); } /* ───────────── Photography mosaic ───────────── */ .mosaic { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 110px; gap: 6px; } .mosaic .cell { background: var(--paper); position: relative; overflow: hidden; border: 1px solid var(--rule); } .mosaic .cell.s2x1 { grid-column: span 2; } .mosaic .cell.s1x2 { grid-row: span 2; } .mosaic .cell.s2x2 { grid-column: span 2; grid-row: span 2; } .mosaic .cell.s3x2 { grid-column: span 3; grid-row: span 2; } .mosaic .cell svg { width: 100%; height: 100%; } .mosaic .cell .lbl { position: absolute; left: 8px; bottom: 6px; font-family: var(--mono); font-size: 10px; color: var(--ink-soft); letter-spacing: 0.05em; background: rgba(241,237,226,0.85); padding: 2px 6px; } /* ───────────── Books shelf ───────────── */ .shelf { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; padding-top: 6px; } #silver .shelf { grid-template-columns: repeat(4, 1fr); } .vol { aspect-ratio: 3/4.5; background: var(--paper); padding: 14px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--rule); } .vol.dark { background: var(--ink); color: var(--bg); border-color: var(--ink); } .vol .yr { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; opacity: 0.7; } .vol .ttl { font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.15; } .vol .ed { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; opacity: 0.7; } /* 3D book mockup: front cover (img), back cover (::after), spine (::before). transform-style: preserve-3d on the parent lets the three faces compose in 3D space. */ .vol.cover-img { --book-thickness: 22px; padding: 0; border: 0; background: transparent; overflow: visible; position: relative; transform-style: preserve-3d; transform: perspective(900px); transition: transform .6s cubic-bezier(.2,.8,.2,1); will-change: transform; } .vol.cover-img:hover { z-index: 2; } .vol.cover-img img { width: 100%; height: 100%; object-fit: cover; display: block; box-shadow: 0 4px 12px rgba(0,0,0,.18); transition: opacity .15s, box-shadow .3s; } .vol.cover-img:hover img { box-shadow: 0 18px 28px rgba(0,0,0,.32); } /* Spine — perpendicular slab on the left, extending backward */ .vol.cover-img::before { content: ''; position: absolute; top: 0; right: 100%; width: var(--book-thickness); height: 100%; transform-origin: 100% 50%; transform: rotateY(-90deg); background: repeating-linear-gradient(180deg, rgba(0,0,0,.07) 0 1px, transparent 1px 3px), linear-gradient(90deg, #4a4135 0%, #5e5443 50%, #3d362c 100%); pointer-events: none; } /* Back of the book — slightly darker than the cover */ .vol.cover-img::after { content: ''; position: absolute; inset: 0; transform: translateZ(calc(var(--book-thickness) * -1)); background: repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 1px, transparent 1px 2px), var(--book-back, #4a4135); pointer-events: none; } /* Top / right / bottom edges — book pages (lighter, cream colored) */ .vol.cover-img .edge { position: absolute; background-color: var(--book-pages, #e8dec3); background-image: repeating-linear-gradient(var(--edge-angle, 0deg), rgba(0,0,0,.08) 0 1px, transparent 1px 2px); pointer-events: none; } .vol.cover-img .edge.top { left: 0; right: 0; top: 0; height: var(--book-thickness); transform-origin: 50% 0; transform: rotateX(-90deg); --edge-angle: 90deg; } .vol.cover-img .edge.bottom { left: 0; right: 0; bottom: 0; height: var(--book-thickness); transform-origin: 50% 100%; transform: rotateX(90deg); --edge-angle: 90deg; } .vol.cover-img .edge.right { top: 0; bottom: 0; right: 0; width: var(--book-thickness); transform-origin: 100% 50%; transform: rotateY(-90deg); --edge-angle: 0deg; } /* ───────────── Passions ───────────── */ .cluster { display: flex; flex-wrap: wrap; gap: 8px 10px; padding-top: 4px; } .chip { font-family: var(--mono); font-size: 12px; padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink-soft); background: var(--bg); transition: all .15s; } .chip:hover { color: var(--ink); border-color: var(--ink); } .chip.accent { background: var(--ink); color: var(--bg); border-color: var(--ink); } .now { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 24px; padding-top: 12px; } .now-card { padding: 14px 0; } .now-card h4 { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); margin: 0 0 8px; font-weight: 500; } .now-card p { margin: 0; font-family: var(--serif); font-size: 17px; line-height: 1.3; } .now-card p em { font-style: italic; color: var(--ink-soft); } .now-card small { display: block; margin-top: 6px; font-family: var(--mono); font-size: 11px; color: var(--ink-soft); } /* ───────────── Long-form body (about, case studies) ───────────── */ .prose { font-family: var(--serif); font-size: 19px; line-height: 1.6; max-width: 64ch; color: var(--ink); } .prose p { margin: 0 0 1.1em; } .prose p em { font-style: italic; color: var(--ink-soft); } .prose h3 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 24px; line-height: 1.2; margin: 2em 0 0.6em; color: var(--ink); } .prose ul { padding-left: 1.2em; } .prose ul li { margin-bottom: 0.4em; } .prose blockquote { margin: 1.6em 0; padding-left: 24px; border-left: 2px solid var(--accent); font-style: italic; color: var(--ink-soft); } /* Project hero image / cover */ .cover { aspect-ratio: 16/9; background: var(--paper); border: 1px solid var(--rule); overflow: hidden; margin: 32px 0; position: relative; } .cover svg { width: 100%; height: 100%; } .cover .cap { position: absolute; left: 12px; bottom: 10px; font-family: var(--mono); font-size: 10px; color: var(--ink-soft); background: rgba(241,237,226,0.85); padding: 3px 8px; letter-spacing: 0.05em; } /* Project gallery grid (case study) */ .gallery { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 120px; gap: 8px; margin: 32px 0; } .gallery .g { background: var(--paper); border: 1px solid var(--rule); position: relative; overflow: hidden; } .gallery .g.w2 { grid-column: span 2; } .gallery .g.w3 { grid-column: span 3; } .gallery .g.w4 { grid-column: span 4; } .gallery .g.h2 { grid-row: span 2; } .gallery .g svg { width: 100%; height: 100%; } .gallery .g .lbl { position: absolute; left: 8px; bottom: 6px; font-family: var(--mono); font-size: 10px; color: var(--ink-soft); background: rgba(241,237,226,0.85); padding: 2px 6px; } /* Project meta table */ .facts { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; font-size: 13px; line-height: 1.4; font-family: var(--mono); margin: 8px 0; } .facts dt { color: var(--ink-soft); padding: 8px 0; border-top: 1px solid var(--rule); white-space: nowrap; } .facts dd { margin: 0; padding: 8px 0; border-top: 1px solid var(--rule); color: var(--ink); min-width: 0; word-break: break-word; } .facts dt:last-of-type, .facts dd:last-of-type { border-bottom: 1px solid var(--rule); } /* Next/prev project navigation */ .pager { max-width: var(--maxw); margin: 0 auto; padding: 40px var(--gutter); border-top: 1px solid var(--rule); display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .pager a { display: flex; flex-direction: column; gap: 6px; padding: 16px 0; } .pager a:last-child { text-align: right; align-items: flex-end; } .pager a:only-child { text-align: left; align-items: flex-start; } .pager .lbl { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); } .pager .ttl { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--ink); } /* ───────────── Footer ───────────── */ footer.site { max-width: var(--maxw); margin: 0 auto; padding: 60px var(--gutter) 24px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 12px; color: var(--ink-soft); } footer.site h3 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 28px; color: var(--ink); margin: 0 0 8px; line-height: 1; } footer.site h4 { text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; margin: 0 0 12px; color: var(--ink); font-weight: 500; } footer.site a { display: block; padding: 4px 0; } footer.site a:hover { color: var(--ink); } footer.site .sig { grid-column: 1 / -1; display: flex; justify-content: space-between; padding-top: 28px; border-top: 1px solid var(--rule); color: var(--ink-faint); } /* ───────────── Responsive ───────────── */ @media (max-width: 900px) { .topbar-inner { grid-template-columns: 1fr; gap: 8px; } .pagehead, .biostrip, .section-row { grid-template-columns: 1fr; } .section-side { border-right: 0; border-bottom: 0; padding: 24px 0 12px; } .section-body { padding: 16px 0; } .mosaic { grid-template-columns: repeat(3, 1fr); } .gallery { grid-template-columns: repeat(3, 1fr); } .shelf { grid-template-columns: repeat(2, 1fr); } #silver .shelf { grid-template-columns: repeat(3, 1fr); } .now { grid-template-columns: 1fr 1fr; } footer.site { grid-template-columns: 1fr 1fr; } .idx a { grid-template-columns: 56px 1fr 28px; } .idx a > :nth-child(3) { display: none; } } @media (max-width: 600px) { :root { --gutter: 14px; } .topbar-inner { gap: 12px; padding: 12px var(--gutter); } .nav-row { gap: 10px; flex-wrap: nowrap; font-size: 11px; } .nav-row a { white-space: nowrap; } .nav-row .sep { display: none; } .pagehead { padding: 32px var(--gutter); } .pagehead h1 { font-size: clamp(28px, 8vw, 40px); } .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 90px; } .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 100px; } .shelf { grid-template-columns: repeat(2, 1fr); gap: 10px; } #silver .shelf { grid-template-columns: repeat(3, 1fr); } footer.site { grid-template-columns: 1fr; gap: 24px; padding: 40px var(--gutter) 20px; } footer.site .sig { flex-direction: column; gap: 6px; padding-top: 20px; } .pager { padding: 24px var(--gutter); } .pager .ttl { font-size: 18px; } } @media (max-width: 380px) { .nav-row { gap: 8px; font-size: 10px; } }