/* badita.org — shared editorial stylesheet Paper + ink. One display serif, one sans, one mono. Per-page accent set via --accent on . */ :root { --paper: #FAF7F0; --paper-deep: #F2EDE2; --ink: #0E0E10; --ink-soft: #3A3A3D; --ink-mute: #8A8A8E; --rule: #D8D2C4; --rule-deep: #A8A294; --accent: #993C1D; /* home default; pages override */ --serif: "Newsreader", "GT Sectra", "Tiempos Headline", Georgia, "Times New Roman", serif; --sans: "Inter", "Söhne", "Untitled Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --mono: "JetBrains Mono", "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --col: 640px; --gutter: clamp(1.25rem, 4vw, 2rem); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 18px; line-height: 1.55; font-weight: 400; font-feature-settings: "ss01", "cv11", "kern"; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media (max-width: 720px) { body { font-size: 16px; line-height: 1.55; } } ::selection { background: var(--accent); color: var(--paper); } a { color: var(--ink); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 100% 0.5px; background-position: 0 100%; background-repeat: no-repeat; transition: color 120ms ease, background-size 120ms ease, opacity 120ms ease; } a:hover { color: var(--accent); } a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } p { margin: 0 0 1.1em 0; text-wrap: pretty; } h1, h2, h3, h4, h5 { margin: 0; font-weight: 500; letter-spacing: -0.015em; text-wrap: balance; } h1 { font-family: var(--serif); letter-spacing: -0.025em; line-height: 1.02; font-weight: 500; } h2 { font-family: var(--serif); font-weight: 500; } h3 { font-family: var(--sans); font-weight: 500; } hr { border: 0; border-top: 0.5px solid var(--rule); margin: 0; } img { max-width: 100%; height: auto; display: block; } /* skip link */ .skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper); padding: 8px 12px; font-family: var(--sans); font-size: 14px; z-index: 999; } .skip:focus { left: 12px; top: 12px; } /* ---------- Layout ---------- */ .wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); } .read { max-width: var(--col); margin: 0 auto; padding: 0 var(--gutter); } .read-wide { max-width: 880px; margin: 0 auto; padding: 0 var(--gutter); } /* ---------- Nav ---------- */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: saturate(180%) blur(8px); -webkit-backdrop-filter: saturate(180%) blur(8px); border-bottom: 0.5px solid var(--rule); } .nav-inner { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding: 14px var(--gutter); max-width: 1200px; margin: 0 auto; } .brand { font-family: var(--serif); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; background: none; } .brand .dot { color: var(--accent); } .nav-links { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; font-size: 13px; letter-spacing: 0.04em; } .nav-links a { background: none; color: var(--ink-soft); } .nav-links a:hover { color: var(--ink); } .nav-links a.is-active { color: var(--ink); } @media (max-width: 720px) { .nav-links { gap: 0.9rem; font-size: 12px; } .nav-links .opt { display: none; } } /* ---------- Hero ---------- */ .hero { padding: clamp(5rem, 12vw, 9rem) 0 clamp(3.5rem, 9vw, 6rem); border-bottom: 0.5px solid var(--rule); } .hero-grid { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; } .kicker { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); display: flex; align-items: center; gap: 0.75rem; } .kicker .seg { color: var(--ink-soft); } .kicker .div { color: var(--rule-deep); } .hero h1 { font-size: clamp(2.6rem, 7.5vw, 5.4rem); margin: 1.6rem 0 1.2rem; max-width: 16ch; } .hero h1 .dia { color: var(--accent); } .hero-lede { font-family: var(--serif); font-size: clamp(1.2rem, 2.1vw, 1.45rem); line-height: 1.4; max-width: 32rem; color: var(--ink-soft); font-weight: 400; } .hero-proof { margin-top: 2.2rem; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); } .hero-proof span + span::before { content: "·"; margin: 0 0.75rem; color: var(--rule-deep); } .cta-row { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; } .btn { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.85rem 1.2rem; font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: 0.01em; border: 0.5px solid var(--ink); background: var(--ink); color: var(--paper); border-radius: 0; } .btn:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); } .btn .arr { display: inline-block; transition: transform 200ms ease; } .btn:hover .arr { transform: translateX(3px); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); } .btn--ghost:hover { background: var(--ink); color: var(--paper); } /* ---------- Section structure ---------- */ section.block { padding: clamp(4rem, 9vw, 7rem) 0; border-bottom: 0.5px solid var(--rule); } .block-head { max-width: 1200px; margin: 0 auto 3rem; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr; gap: 0.8rem; } @media (min-width: 880px) { .block-head { grid-template-columns: 240px 1fr; gap: 3rem; } } .block-head .label { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); padding-top: 0.55rem; } .block-head .label::before { content: ""; display: inline-block; width: 24px; height: 0.5px; background: var(--rule-deep); vertical-align: middle; margin-right: 12px; position: relative; top: -3px; } .block-head h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); max-width: 22ch; } .block-head .h-dek { font-family: var(--serif); color: var(--ink-soft); font-size: 1.1rem; margin-top: 0.6rem; max-width: 38ch; } /* ---------- Work strip ---------- */ .work-grid { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr; gap: 0; border-top: 0.5px solid var(--rule); } @media (min-width: 760px) { .work-grid { grid-template-columns: repeat(2, 1fr); } } .work-card { display: grid; grid-template-columns: 1fr; padding: 2rem 0; gap: 0.7rem; border-bottom: 0.5px solid var(--rule); text-decoration: none; background: none; color: var(--ink); position: relative; } @media (min-width: 760px) { .work-card { padding: 2.4rem 2rem; } .work-card:nth-child(odd) { border-right: 0.5px solid var(--rule); padding-left: 0; } .work-card:nth-child(even) { padding-right: 0; } } .work-card .row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; } .work-card .thread { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); } .work-card .num { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); letter-spacing: 0.1em; } .work-card .title { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.05; font-weight: 500; letter-spacing: -0.02em; margin: 0.2rem 0 0.3rem; } .work-card .desc { color: var(--ink-soft); font-size: 1rem; line-height: 1.5; max-width: 42ch; } .work-card .metric { margin-top: 1.4rem; font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 2.4rem); line-height: 1; font-weight: 500; letter-spacing: -0.02em; } .work-card .metric small { display: block; margin-top: 0.4rem; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); } .work-card:hover .title { color: var(--accent); } .work-card .more { margin-top: 1.4rem; font-family: var(--sans); font-size: 13px; color: var(--ink-soft); letter-spacing: 0.04em; } .work-card:hover .more { color: var(--accent); } /* ---------- Writing list ---------- */ .writing-list { list-style: none; margin: 0; padding: 0; max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter); } .writing-list li { display: grid; grid-template-columns: 80px 1fr 80px; gap: 1.5rem; align-items: baseline; padding: 1.6rem 0; border-top: 0.5px solid var(--rule); } .writing-list li:last-child { border-bottom: 0.5px solid var(--rule); } .writing-list .year { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); letter-spacing: 0.06em; } .writing-list .read-len { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); text-align: right; letter-spacing: 0.04em; } .writing-list .ti { font-family: var(--serif); font-size: clamp(1.25rem, 2.2vw, 1.55rem); line-height: 1.2; } .writing-list .ti a { background: none; } .writing-list .ti a:hover { color: var(--accent); } .writing-list .dek { display: block; margin-top: 0.4rem; font-family: var(--sans); font-size: 0.95rem; color: var(--ink-soft); } @media (max-width: 720px) { .writing-list li { grid-template-columns: 1fr; gap: 0.4rem; } .writing-list .read-len { text-align: left; } } /* ---------- Speaking ---------- */ .talks { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr; gap: 0; border-top: 0.5px solid var(--rule); } @media (min-width: 760px) { .talks { grid-template-columns: repeat(3, 1fr); } } .talk { padding: 2rem 0; border-bottom: 0.5px solid var(--rule); background: none; color: var(--ink); } @media (min-width: 760px) { .talk { padding: 2rem 1.6rem; border-bottom: 0; border-right: 0.5px solid var(--rule); } .talk:last-child { border-right: 0; padding-right: 0; } .talk:first-child { padding-left: 0; } } .talk .stage { aspect-ratio: 16 / 10; background: var(--paper-deep); position: relative; overflow: hidden; margin-bottom: 1.2rem; border: 0.5px solid var(--rule); } .talk .stage .frame { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; color: var(--ink-mute); letter-spacing: 0.14em; text-transform: uppercase; } .talk .stage svg { position: absolute; inset: 0; width: 100%; height: 100%; } .talk .meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 0.55rem; } .talk .ti { font-family: var(--serif); font-size: 1.25rem; line-height: 1.25; margin: 0 0 0.45rem; } .talk .where { font-size: 14px; color: var(--ink-soft); } .talks-more { max-width: 1200px; margin: 2rem auto 0; padding: 0 var(--gutter); font-family: var(--sans); font-size: 12px; letter-spacing: 0.1em; color: var(--ink-soft); text-transform: uppercase; line-height: 1.8; } .talks-more a { background: none; color: var(--ink-soft); } .talks-more a:hover { color: var(--accent); } .talks-more .sep { color: var(--rule-deep); margin: 0 0.6rem; } /* ---------- Press strip ---------- */ .press-row { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2rem 2.4rem; font-family: var(--serif); font-weight: 500; font-size: clamp(1.15rem, 2vw, 1.5rem); color: var(--ink-soft); letter-spacing: -0.01em; padding-bottom: 3rem; border-bottom: 0.5px solid var(--rule); } .press-row .outlet { white-space: nowrap; } .press-row .outlet em { font-style: italic; } .pullquote { max-width: 880px; margin: 4rem auto 0; padding: 0 var(--gutter); text-align: left; } .pullquote q { font-family: var(--serif); font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.25; letter-spacing: -0.015em; quotes: "\201C" "\201D"; display: block; text-wrap: balance; } .pullquote q::before { content: open-quote; color: var(--accent); margin-right: 0.04em; } .pullquote q::after { content: close-quote; color: var(--accent); margin-left: 0.04em; } .pullquote cite { display: block; margin-top: 1.5rem; font-family: var(--sans); font-style: normal; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); } .pullquote .more { display: inline-block; margin-top: 2.4rem; font-family: var(--sans); font-size: 13px; letter-spacing: 0.04em; color: var(--ink); } /* ---------- Now block ---------- */ .now { background: var(--paper-deep); } .now-inner { max-width: 900px; margin: 0 auto; padding: 0 var(--gutter); } .now-inner h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 1.5rem; } .now-inner .date { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 2rem; } .now-inner p { font-family: var(--serif); font-size: 1.15rem; line-height: 1.55; } /* ---------- Footer ---------- */ footer.foot { background: var(--ink); color: var(--paper); padding: 4.5rem 0 2.5rem; } footer.foot a { color: var(--paper); opacity: 0.85; } footer.foot a:hover { color: var(--paper); opacity: 1; } .foot-grid { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr; gap: 2.5rem; } @media (min-width: 760px) { .foot-grid { grid-template-columns: 1fr 1.2fr 1fr; } } .foot-grid h4 { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 1.2rem; } .foot-grid ul { list-style: none; padding: 0; margin: 0; } .foot-grid li { margin-bottom: 0.55rem; font-size: 15px; } .foot-grid .sub { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); display: block; margin-top: 2px; letter-spacing: 0.04em; } .foot-bottom { max-width: 1200px; margin: 3rem auto 0; padding: 2rem var(--gutter) 0; border-top: 0.5px solid #2a2a2c; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-family: var(--mono); font-size: 12px; color: var(--ink-mute); letter-spacing: 0.06em; } /* ---------- Generic page chrome (case studies, /press, etc.) ---------- */ .page-hero { padding: clamp(4rem, 10vw, 7rem) 0 clamp(2.5rem, 6vw, 4rem); border-bottom: 0.5px solid var(--rule); } .page-hero .wrap-hero { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); } .page-hero .crumb { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 1.5rem; } .page-hero .crumb a { background: none; color: var(--ink-soft); } .page-hero .crumb .thread { color: var(--accent); margin-left: 0.6rem; } .page-hero h1 { font-size: clamp(2.4rem, 6.2vw, 4.6rem); max-width: 22ch; margin-bottom: 1.5rem; } .page-hero .dek { font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.4rem); color: var(--ink-soft); max-width: 40rem; line-height: 1.4; } .glance { border-top: 0.5px solid var(--rule); border-bottom: 0.5px solid var(--rule); background: var(--paper-deep); } .glance-grid { max-width: 1200px; margin: 0 auto; padding: 1.6rem var(--gutter); display: grid; grid-template-columns: 1fr; gap: 1.2rem; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-soft); } @media (min-width: 760px) { .glance-grid { grid-template-columns: repeat(4, 1fr); } } .glance-grid .k { display: block; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 0.35rem; } .glance-grid .v { color: var(--ink); } article.long { padding: clamp(3rem, 7vw, 5rem) 0; } article.long .read p, article.long .read ul, article.long .read ol { font-size: 1.125rem; line-height: 1.65; } article.long .read h2 { margin-top: 3rem; margin-bottom: 1rem; font-size: clamp(1.6rem, 3vw, 2.2rem); } article.long .read h3 { margin-top: 2.2rem; margin-bottom: 0.6rem; font-family: var(--sans); font-size: 1.1rem; font-weight: 500; letter-spacing: 0.02em; color: var(--ink); } article.long .read blockquote { margin: 2.5rem 0; padding: 1.4rem 1.6rem; border-left: 2px solid var(--accent); background: var(--paper-deep); font-family: var(--serif); font-size: 1.2rem; line-height: 1.4; } article.long .read blockquote cite { display: block; margin-top: 0.8rem; font-style: normal; font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); } article.long .read ul { padding-left: 1.4rem; } article.long .read li { margin-bottom: 0.5rem; } article.long .read a { color: var(--accent); } article.long .read a:hover { color: var(--ink); } /* Receipts (stat strip on case studies) */ .receipts { max-width: 1200px; margin: 4rem auto 0; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 0.5px solid var(--rule-deep); border-bottom: 0.5px solid var(--rule-deep); } @media (min-width: 760px) { .receipts { grid-template-columns: repeat(4, 1fr); } } .receipts .r { padding: 1.8rem 1.2rem; border-right: 0.5px solid var(--rule); border-bottom: 0.5px solid var(--rule); } .receipts .r:last-child { border-right: 0; } @media (min-width: 760px) { .receipts .r:nth-child(4n) { border-right: 0; } .receipts .r:nth-last-child(-n+4) { border-bottom: 0; } } .receipts .n { font-family: var(--serif); font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1; letter-spacing: -0.025em; } .receipts .l { display: block; margin-top: 0.5rem; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); } .receipts .src { display: block; margin-top: 0.4rem; font-family: var(--mono); font-size: 10px; color: var(--ink-mute); } /* Tables (for press inventory, workshops) */ .tbl { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .tbl th, .tbl td { padding: 0.85rem 0.6rem; text-align: left; vertical-align: top; border-bottom: 0.5px solid var(--rule); } .tbl th { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); border-bottom: 0.5px solid var(--rule-deep); } .tbl td.num { font-family: var(--mono); font-size: 0.9rem; } .tbl tr:hover td { background: color-mix(in srgb, var(--paper-deep) 70%, transparent); } .tbl .ti { font-family: var(--serif); font-size: 1.05rem; font-weight: 500; } .tbl .date { font-family: var(--mono); font-size: 0.85rem; color: var(--ink-mute); white-space: nowrap; } .tbl .out { color: var(--ink); } /* Service cards (/hire) */ .svc-grid { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr; gap: 0; border-top: 0.5px solid var(--rule); } @media (min-width: 880px) { .svc-grid { grid-template-columns: 1fr 1fr; } } .svc { padding: 2.4rem 0; border-bottom: 0.5px solid var(--rule); display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 880px) { .svc { padding: 2.4rem 2rem; } .svc:nth-child(odd) { padding-left: 0; border-right: 0.5px solid var(--rule); } .svc:nth-child(even) { padding-right: 0; } } .svc .num { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); letter-spacing: 0.06em; } .svc h3 { font-family: var(--serif); font-size: 1.6rem; font-weight: 500; line-height: 1.15; letter-spacing: -0.015em; } .svc p { font-family: var(--sans); font-size: 0.98rem; line-height: 1.55; color: var(--ink-soft); margin: 0; } .svc .specs { margin-top: 0.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; } .svc .specs .k { color: var(--ink-mute); text-transform: uppercase; font-size: 10px; letter-spacing: 0.18em; display: block; margin-bottom: 0.25rem; } .svc .specs .v { color: var(--ink); font-size: 13px; } .svc .ref { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); margin-top: 0.3rem; } .svc .ref strong { color: var(--ink-soft); font-weight: 400; } .svc .book { margin-top: 0.7rem; align-self: start; font-family: var(--sans); font-size: 13px; letter-spacing: 0.04em; background: none; color: var(--accent); } /* Bio copy boxes */ .bio-box { max-width: 880px; margin: 0 auto 2rem; padding: 1.4rem 1.6rem; border: 0.5px solid var(--rule); background: var(--paper-deep); position: relative; } .bio-box .head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 0.9rem; } .bio-box .copy-btn { background: none; border: 0.5px solid var(--ink-soft); color: var(--ink); font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 10px; cursor: pointer; } .bio-box .copy-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } .bio-box p { font-family: var(--serif); font-size: 1.05rem; line-height: 1.55; margin: 0; } /* Print */ @media print { .nav, .now, footer.foot, .skip, .cta-row .btn { display: none !important; } body { background: white; color: black; font-size: 11pt; } .hero { padding: 0; } .hero h1 { font-size: 28pt; } a { color: black; text-decoration: underline; } section.block { padding: 1rem 0; border: 0; page-break-inside: avoid; } } /* reduce motion */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* ===== Diary-style folio breadcrumbs ===== */ .folio { font-family: var(--serif, "Newsreader", Georgia, serif); font-style: italic; font-size: 14px; line-height: 1.5; color: var(--ink-mute); letter-spacing: 0.01em; max-width: 760px; margin: 2.6rem auto 0; padding: 0 1.5rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.55em; } .folio::before { content: "~"; font-style: normal; font-family: var(--serif); color: var(--rule-deep); font-size: 18px; margin-right: 0.2em; transform: translateY(-1px); } .folio .mark { font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--rule-deep); margin-right: 0.4em; } .folio a { color: var(--ink-soft); text-decoration: none; border-bottom: 0.5px dashed var(--rule-deep); padding-bottom: 1px; transition: color 180ms ease, border-color 180ms ease; } .folio a:hover { color: var(--ink); border-bottom-color: var(--ink); } .folio .conn { font-style: italic; opacity: 0.55; } .folio .here { font-style: normal; color: var(--ink); border-bottom: 0.5px solid currentColor; padding-bottom: 1px; } .folio .arrow { opacity: 0.4; font-style: normal; font-family: var(--serif); } @media (max-width: 640px) { .folio { font-size: 13px; gap: 0.4em; margin-top: 1.8rem; } } @media print { .folio { display: none; } }