/* ============================================================ Singla Lab — design system Editorial-scientific, in two themes. Light is warm terracotta paper with an indigo primary opposite it; dark is the same palette turned over, warm and low rather than blue-black. Every colour comes from the token block, so a theme is a matter of redefining tokens rather than hunting literals through the stylesheet. Two rules keep that true: nothing below names a colour directly, and any pair that has to stay legible together is defined as a pair — --indigo with --on-primary, --band with --on-band. ============================================================ */ /* ---------- Tokens ---------- */ :root { color-scheme: light; /* surfaces */ --paper: #F9EBDE; --paper-2: #F4E2D2; --surface: #FFFBF6; --ink: #1C1713; --ink-2: #4C4239; --ink-3: #6C6053; --ink-4: #8D7F70; --rule: #E7D6C4; --rule-2: #F1E3D5; /* brand */ --indigo: #173F8A; --indigo-lit: #2563C9; --indigo-dk: #10306D; --indigo-soft: #EAEDF6; --saffron: #A94C15; --saffron-soft: #F8DBBB; --teal: #1C7364; --teal-soft: #E0F0EC; --on-primary: #FFFBF6; /* the dark bands — quote strip, footer, ink sections */ --band: #1C1713; --on-band: #F1EAE2; --on-band-2: #A08F7F; --band-rule: #332B24; --band-lit: #8FB4EE; /* chips and pills; the fills come from the -soft tokens above */ --tag-ink: #1B4A9E; --tag-bd: #DAE5F6; --warm-ink: #8F440F; --warm-bd: #F0D6B8; --teal-ink: #14604F; --teal-ink-b: #0F4E40; --teal-bd: #D2E8E3; /* incidental */ --sh: 74,52,32; /* shadow tint */ --dot: rgba(74,52,32,.085); /* the dot grid */ --hdr-bg: rgba(249,235,222,.85); --wash: rgba(255,251,246,.75); /* row hover */ --press: rgba(74,52,32,.055); /* nav hover */ --sel: #F7D9B8; --card-bd: #C9D6EC; /* card hover border */ --glow-1: rgba(37,99,201,.09); --glow-2: rgba(169,76,21,.11); --img-mat: #fff; /* behind figures and gallery plates */ /* type */ --f-display: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif; --f-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; /* Devanagari: Tiro is cut from the traditional calligraphic models, so the shirorekha and the stroke contrast read the way a printed shloka should. */ --f-sa: 'Tiro Devanagari Hindi', 'Noto Serif Devanagari', 'Sanskrit Text', 'Nirmala UI', var(--f-display), serif; /* metrics */ --wrap: 1180px; --wrap-wide: 1400px; --gut: clamp(1.25rem, 4vw, 3rem); --r: 14px; --r-sm: 9px; --shadow-1: 0 1px 2px rgba(var(--sh),.05), 0 1px 3px rgba(var(--sh),.04); --shadow-2: 0 2px 4px rgba(var(--sh),.04), 0 12px 28px -12px rgba(var(--sh),.16); --shadow-3: 0 4px 8px rgba(var(--sh),.05), 0 24px 48px -20px rgba(23,63,138,.28); --ease: cubic-bezier(.22,.61,.36,1); } /* ---------- Dark ---------- Not the light theme inverted: the ground stays warm, and the blues and greens are lifted rather than darkened, since a colour that reads well on paper goes muddy on a dark ground. --paper is lighter than --band here, so the quote strip and footer still recede the way they do in light. There is deliberately no prefers-color-scheme block. A three-line script in reads the stored choice, falls back to the system preference, and stamps data-theme before first paint — so this one rule covers both cases and the values live in exactly one place. Without JavaScript the site stays light, which is the design it was drawn in. */ :root[data-theme='dark'] { color-scheme: dark; --paper: #17120E; --paper-2: #1F1913; --surface: #221B15; --ink: #F6EEE4; --ink-2: #D6C8B8; --ink-3: #AC9E8E; --ink-4: #8E8170; --rule: #3A3027; --rule-2: #2C241D; --indigo: #8FB4EE; --indigo-lit: #A9C6F5; --indigo-dk: #C3D8F8; --indigo-soft: #1E2739; --saffron: #E0904F; --saffron-soft: #3A2515; --teal: #5EC4AD; --teal-soft: #143029; --on-primary: #17120E; --band: #100C09; --on-band: #E8DFD4; --on-band-2: #91836F; --band-rule: #262019; --band-lit: #8FB4EE; --tag-ink: #A9C6F5; --tag-bd: #2C3A52; --warm-ink: #F0AE78; --warm-bd: #4A3120; --teal-ink: #7FD6C0; --teal-ink-b: #9BE3CF; --teal-bd: #1D4239; --sh: 0,0,0; --dot: rgba(246,238,228,.055); --hdr-bg: rgba(23,18,14,.86); --wash: rgba(246,238,228,.045); --press: rgba(246,238,228,.06); --sel: #4A3120; --card-bd: #3C4B66; --glow-1: rgba(143,180,238,.07); --glow-2: rgba(224,144,79,.06); --img-mat: #EFE7DD; --shadow-3: 0 4px 8px rgba(0,0,0,.4), 0 24px 48px -20px rgba(0,0,0,.7); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-sans); font-size: 17px; line-height: 1.65; font-feature-settings: 'kern' 1, 'liga' 1, 'cv05' 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, svg { max-width: 100%; display: block; } img { height: auto; } /* [hidden] is only a UA default, so any explicit display beats it. The year blocks are grid, which is exactly that case -- filtering left them standing and empty. */ [hidden] { display: none !important; } a { color: var(--indigo-lit); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -.018em; line-height: 1.15; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } ul { margin: 0; padding: 0; list-style: none; } hr { border: 0; border-top: 1px solid var(--rule); margin: 0; } :focus-visible { outline: 2px solid var(--indigo-lit); outline-offset: 3px; border-radius: 3px; } ::selection { background: var(--sel); color: var(--ink); } /* ---------- Layout ---------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); } .wrap-wide { width: 100%; max-width: var(--wrap-wide); margin-inline: auto; padding-inline: var(--gut); } .section { padding-block: clamp(3.5rem, 8vw, 6.5rem); } .section-tight { padding-block: clamp(2.5rem, 5vw, 4rem); } .section-alt { background: var(--paper-2); } .section-ink { background: var(--band); color: var(--on-band); } .skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--ink); color: var(--on-primary); padding: .7rem 1.1rem; border-radius: 0 0 8px 0; } .skip:focus { left: 0; } /* ---------- Typography ---------- */ .eyebrow { font-family: var(--f-mono); font-size: .69rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 1rem; display: flex; align-items: center; gap: .7rem; } .eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--saffron); flex: none; } .eyebrow-plain::before { display: none; } .display { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.6rem, 6.4vw, 4.6rem); line-height: 1.04; letter-spacing: -.028em; } .h1 { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.08; letter-spacing: -.024em; } .h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.14; letter-spacing: -.02em; } .h3 { font-size: clamp(1.12rem, 1.8vw, 1.32rem); font-weight: 600; letter-spacing: -.012em; } .h4 { font-size: 1rem; font-weight: 600; } .lede { font-size: clamp(1.08rem, 1.7vw, 1.3rem); line-height: 1.6; color: var(--ink-2); } .muted { color: var(--ink-3); } .small { font-size: .875rem; } .xsmall { font-size: .8rem; } .mono { font-family: var(--f-mono); } .measure { max-width: 66ch; } .measure-sm { max-width: 52ch; } .serif-em { font-family: var(--f-display); font-style: italic; } /* ---------- Header ---------- */ .hdr { position: sticky; top: 0; z-index: 60; background: var(--hdr-bg); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid transparent; transition: border-color .25s var(--ease), background .25s var(--ease); } .hdr.is-stuck { border-bottom-color: var(--rule); } .hdr-in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 68px; } /* the nav takes the slack so the two buttons stay pinned to the right */ .hdr-in .nav { margin-left: auto; } .hdr-in .theme-toggle { margin-left: -.4rem; } /* The mark is drawn with literal colours because it doubles as the favicon, so the inline copy is re-pointed at the tokens here. */ :root[data-theme='dark'] .brand .lg-bg { fill: var(--indigo-soft); } :root[data-theme='dark'] .brand .lg-ring, :root[data-theme='dark'] .brand .lg-int { stroke: var(--indigo); } :root[data-theme='dark'] .brand .lg-dot { fill: var(--saffron); } /* Photographs were lit for a white page. On the dark ground they glare, so they come down a little; alumni already run greyscale until hover. */ :root[data-theme='dark'] .person-img img, :root[data-theme='dark'] .pi-photo img, :root[data-theme='dark'] .vid-thumb img { filter: brightness(.9) contrast(1.02); } :root[data-theme='dark'] .person:hover .person-img img, :root[data-theme='dark'] .pi-photo:hover img, :root[data-theme='dark'] .vid:hover .vid-thumb img { filter: none; } .brand { display: flex; align-items: center; gap: .68rem; color: var(--ink); } .brand:hover { text-decoration: none; } .brand svg { width: 34px; height: 34px; flex: none; } .brand-txt { display: flex; flex-direction: column; line-height: 1.1; } .brand-name { font-family: var(--f-display); font-size: 1.12rem; letter-spacing: -.015em; } .brand-sub { font-family: var(--f-mono); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); } .nav { display: flex; align-items: center; gap: .1rem; } .nav a { position: relative; color: var(--ink-2); font-size: .875rem; font-weight: 450; padding: .5rem .62rem; border-radius: 7px; transition: color .18s var(--ease), background .18s var(--ease); } .nav a:hover { color: var(--ink); background: var(--press); text-decoration: none; } .nav a[aria-current='page'] { color: var(--indigo); font-weight: 550; } .nav a[aria-current='page']::after { content: ''; position: absolute; left: .62rem; right: .62rem; bottom: .18rem; height: 2px; border-radius: 2px; background: var(--saffron); } /* ---------- Theme toggle ---------- Sits between the nav and the burger and stays visible at every width -- it is not a navigation item, so it does not belong inside the menu. */ .theme-toggle { flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; cursor: pointer; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); color: var(--ink-2); transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); } .theme-toggle:hover { color: var(--ink); border-color: var(--ink-4); background: var(--paper-2); } .theme-toggle svg { width: 18px; height: 18px; grid-area: 1 / 1; } /* show the theme you would be switching *to*, which is the one you cannot see */ .theme-toggle .ic-sun { display: none; } :root[data-theme='dark'] .theme-toggle .ic-sun { display: block; } :root[data-theme='dark'] .theme-toggle .ic-moon { display: none; } .nav-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--rule); background: var(--surface); border-radius: 10px; cursor: pointer; align-items: center; justify-content: center; color: var(--ink); } .nav-toggle svg { width: 19px; height: 19px; } .nav-toggle .ic-x { display: none; } .nav-toggle[aria-expanded='true'] .ic-x { display: block; } .nav-toggle[aria-expanded='true'] .ic-menu { display: none; } @media (max-width: 1040px) { .nav-toggle { display: flex; } /* the nav goes fixed here, so it leaves the flex row and space-between strands the toggle mid-header; this walks it back beside the burger */ .hdr-in { gap: .6rem; } .hdr-in .theme-toggle { margin-left: auto; margin-right: 0; } .nav { position: fixed; inset: 68px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); border-bottom: 1px solid var(--rule); padding: .75rem var(--gut) 1.5rem; box-shadow: var(--shadow-2); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .2s var(--ease), transform .2s var(--ease); max-height: calc(100dvh - 68px); overflow-y: auto; } .nav.is-open { opacity: 1; transform: none; pointer-events: auto; } .nav a { padding: .8rem .3rem; font-size: 1rem; border-bottom: 1px solid var(--rule-2); border-radius: 0; } .nav a:hover { background: transparent; } .nav a[aria-current='page']::after { left: .3rem; right: auto; width: 18px; bottom: .5rem; } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--f-sans); font-size: .875rem; font-weight: 550; padding: .68rem 1.15rem; border-radius: 999px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); cursor: pointer; transition: all .2s var(--ease); white-space: nowrap; } .btn:hover { text-decoration: none; border-color: var(--ink-4); transform: translateY(-1px); box-shadow: var(--shadow-1); } .btn svg { width: 15px; height: 15px; } .btn-primary { background: var(--indigo); border-color: var(--indigo); color: var(--on-primary); } .btn-primary:hover { background: var(--indigo-dk); border-color: var(--indigo-dk); box-shadow: var(--shadow-3); } .btn-ghost { background: transparent; border-color: transparent; color: var(--indigo-lit); padding-inline: .4rem; } .btn-ghost:hover { background: var(--indigo-soft); border-color: transparent; transform: none; box-shadow: none; } .btn-sm { font-size: .8rem; padding: .48rem .85rem; } .btn-arrow svg { transition: transform .22s var(--ease); } .btn-arrow:hover svg { transform: translateX(3px); } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 7vw, 5rem); } .hero::before { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(760px 460px at 78% 8%, var(--glow-1), transparent 65%), radial-gradient(620px 420px at 8% 96%, var(--glow-2), transparent 62%); pointer-events: none; } .hero .wrap { position: relative; z-index: 1; } .hero-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; } } .hero h1 .accent { color: var(--indigo); font-style: italic; } .hero-sub { margin-top: 1.4rem; max-width: 54ch; } .hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; } .hero-art { position: relative; } .hero-art svg { width: 100%; height: auto; } /* dotted paper texture */ .dotgrid { position: relative; } .dotgrid::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 0); background-size: 26px 26px; mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); } .dotgrid > * { position: relative; z-index: 1; } /* ---------- Stat strip ---------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--rule); } @media (max-width: 700px) { .stats { grid-template-columns: repeat(2, 1fr); } } .stat { padding: 1.6rem 1.2rem; border-right: 1px solid var(--rule); } .stat:last-child { border-right: 0; } @media (max-width: 700px) { .stat:nth-child(2n) { border-right: 0; } .stat:nth-child(-n+2) { border-bottom: 1px solid var(--rule); } } .stat-v { font-family: var(--f-display); font-size: clamp(1.9rem, 3.6vw, 2.6rem); line-height: 1; color: var(--indigo); } .stat-l { font-size: .78rem; color: var(--ink-3); margin-top: .45rem; letter-spacing: .01em; } /* ---------- Section head ---------- */ .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(2rem, 4vw, 3rem); } .sec-head .measure { margin: 0; } @media (max-width: 720px) { .sec-head { flex-direction: column; align-items: flex-start; gap: 1.2rem; } } /* ---------- Cards ---------- */ .card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: 1.5rem; transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease); } .card-link:hover { border-color: var(--card-bd); box-shadow: var(--shadow-2); transform: translateY(-2px); text-decoration: none; } .grid { display: grid; gap: 1.1rem; } .g2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0,1fr)); } @media (max-width: 980px) { .g4 { grid-template-columns: repeat(3, minmax(0,1fr)); } } @media (max-width: 860px) { .g3 { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .g2 { grid-template-columns: 1fr; } } /* ---------- Research (home teasers + full page) ---------- */ .rsrch-list { display: grid; gap: 0; border-top: 1px solid var(--rule); } .rsrch-row { display: grid; grid-template-columns: 4.5rem minmax(0,1fr) 12rem; gap: clamp(1rem, 3vw, 2.5rem); align-items: start; padding-block: clamp(1.6rem, 3vw, 2.4rem); border-bottom: 1px solid var(--rule); transition: background .22s var(--ease); } .rsrch-row:hover { background: var(--wash); } @media (max-width: 860px) { .rsrch-row { grid-template-columns: 3rem minmax(0,1fr); } .rsrch-art { display: none; } } .rsrch-num { font-family: var(--f-mono); font-size: .82rem; color: var(--saffron); padding-top: .35rem; letter-spacing: .04em; } .rsrch-kicker { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .5rem; } .rsrch-title { font-family: var(--f-display); font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.2; margin-bottom: .6rem; } .rsrch-art { width: 100%; } .rsrch-art svg { width: 100%; height: auto; } .area { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.85fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; padding-block: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--rule); } .area:last-child { border-bottom: 0; } @media (max-width: 900px) { .area { grid-template-columns: 1fr; } } .area-fig { /* a bare
carries the UA's 1em/40px margin, which was quietly costing the graphic 80px of its column at every width */ margin: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; position: sticky; top: 92px; } @media (max-width: 900px) { .area-fig { position: static; } } .area-fig img { width: 100%; height: auto; background: var(--img-mat); } .area-fig figcaption { padding: .8rem 1rem; font-size: .78rem; color: var(--ink-3); border-top: 1px solid var(--rule-2); } .area-fig .svg-holder { padding: 1.4rem; background: linear-gradient(180deg, var(--surface), var(--paper-2)); } .tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.3rem; } .tag { font-family: var(--f-mono); font-size: .69rem; letter-spacing: .04em; padding: .32rem .6rem; border-radius: 999px; background: var(--indigo-soft); color: var(--tag-ink); border: 1px solid var(--tag-bd); } .tag-warm { background: var(--saffron-soft); color: var(--warm-ink); border-color: var(--warm-bd); } .tag-teal { background: var(--teal-soft); color: var(--teal-ink); border-color: var(--teal-bd); } /* ---------- Earlier threads (a disclosure, so it works without JS) ---------- */ .past { border-top: 1px solid var(--rule); } .past-tab { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .7rem; padding: 1.25rem 0 1.15rem; font-family: var(--f-mono); font-size: .84rem; letter-spacing: .02em; color: var(--ink-2); } .past-tab::-webkit-details-marker { display: none; } .past-tab:hover { color: var(--indigo); } .past-tab:focus-visible { outline: 2px solid var(--indigo-lit); outline-offset: 4px; border-radius: 4px; } .past-tab-n { font-size: .7rem; line-height: 1; color: var(--ink-3); padding: .3rem .5rem; border: 1px solid var(--rule); border-radius: 999px; } .past-tab-c { margin-left: auto; width: 17px; height: 17px; color: var(--ink-3); } .past-tab-c svg { width: 100%; height: 100%; transform: rotate(90deg); transition: transform .22s var(--ease); } .past[open] .past-tab-c svg { transform: rotate(-90deg); } .past[open] .past-tab { color: var(--ink); } .past-body { padding-bottom: 1rem; border-top: 1px solid var(--rule-2); padding-top: 1.4rem; } .past-body .area { opacity: .92; } .past-body .area:last-child { border-bottom: 0; } /* ---------- People ---------- */ .pi-card { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; } @media (max-width: 780px) { .pi-card { grid-template-columns: 1fr; } } .pi-photo { position: relative; isolation: isolate; } /* The circle is masked by this wrapper rather than by the image's own radius, so the photo can drift up on hover the way a person card's does without the circle growing with it. It cannot go on .pi-photo itself: the saffron arc below hangs 10px outside that box and overflow would cut it off. */ .pi-photo-c { position: relative; z-index: 1; overflow: hidden; border-radius: 50%; border: 1px solid var(--rule); aspect-ratio: 1; } .pi-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease), filter .4s var(--ease); } .pi-photo:hover img { transform: scale(1.045); } /* saffron arc swung around the lower right of the circle */ .pi-photo::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid transparent; border-right-color: var(--saffron); border-bottom-color: var(--saffron); transform: rotate(-8deg); z-index: 0; } /* Education, under the PI bio. Ruled rows rather than bullets, so it reads as a record. The institution sits under its degree by default and moves out to the right edge only past 960px, where the widest of the three pairs (measured at 567px against a 640px column) still clears in one line — below that the rows would break unevenly, one inline and two stacked. flex-wrap stays on as the safety valve for larger text sizes. */ .pi-ed { margin-top: 1.9rem; max-width: 40rem; } .pi-ed .eyebrow { margin-bottom: .6rem; } .pi-ed ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-2); } .pi-ed li { display: flex; flex-wrap: wrap; gap: .12rem 1.6rem; padding: .62rem 0; border-bottom: 1px solid var(--rule-2); } .pi-ed-d { flex: 1 0 100%; font-size: .9rem; color: var(--ink-2); } .pi-ed-o { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .02em; color: var(--ink-3); } @media (min-width: 960px) { .pi-ed li { align-items: baseline; justify-content: space-between; } .pi-ed-d { flex: 0 1 auto; } } /* compact PI strip — the full profile lives on the home page. The photo column matches a person card, so the PI reads as a peer. */ .pi-mini { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem); align-items: center; } .pi-mini .h2 { margin-top: .15rem; font-size: clamp(1.45rem, 2.4vw, 1.85rem); } .pi-line { font-size: .84rem; color: var(--ink-2); line-height: 1.4; margin: 0; } .pi-line + .pi-line { color: var(--ink-3); font-size: .8rem; } @media (max-width: 620px) { .pi-mini { grid-template-columns: 160px minmax(0, 1fr); gap: 1.1rem; } } /* Tight text clusters: little air inside a card, more between cards. */ .people { display: grid; gap: 2rem 1.1rem; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .people-sm { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); } /* two up on phones — one 335px circle per row is not a people grid */ @media (max-width: 620px) { .people { gap: 1.6rem .9rem; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); } .people-sm { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } } .person { text-align: left; } .person-img { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--paper-2); border: 1px solid var(--rule); margin-bottom: .65rem; } .person-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease), filter .4s var(--ease); } .person:hover .person-img img { transform: scale(1.045); } .person-init { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-display); font-size: 1.9rem; color: var(--indigo); background: linear-gradient(150deg, var(--indigo-soft), var(--surface)); letter-spacing: .02em; } .person-name { font-size: .95rem; font-weight: 600; line-height: 1.25; margin: 0; } /* names that link out to the person's own page keep the ink colour until hover */ .person-name a, .namelist a { color: inherit; text-decoration: none; } .person-name a:hover, .person-name a:focus-visible, .namelist a:hover, .namelist a:focus-visible { color: var(--indigo-lit); text-decoration: underline; text-underline-offset: 3px; } .person-role { font-size: .8rem; color: var(--ink-2); line-height: 1.32; margin: .12rem 0 0; } .person-dept { font-size: .76rem; color: var(--ink-3); line-height: 1.32; margin: 0; } .person-note { font-size: .74rem; color: var(--ink-3); font-style: italic; line-height: 1.32; margin: .1rem 0 0; } .person-mail { font-family: var(--f-mono); font-size: .7rem; line-height: 1.3; margin-top: .25rem; display: inline-block; word-break: break-all; } .is-alum .person-img img { filter: grayscale(1) contrast(1.02); } .is-alum .person:hover .person-img img { filter: grayscale(0); } /* higher specificity than the blanket dark-photo rule above, so alumni keep their greyscale instead of inheriting the general brightness trim */ :root[data-theme='dark'] .is-alum .person-img img { filter: grayscale(1) brightness(.92) contrast(1.02); } :root[data-theme='dark'] .is-alum .person:hover .person-img img { filter: grayscale(0) brightness(.95); } /* compact name-only list */ .namelist { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: .1rem 1.5rem; } .namelist li { padding: .55rem 0; border-bottom: 1px solid var(--rule-2); font-size: .9rem; display: flex; justify-content: space-between; gap: 1rem; } .namelist li span { color: var(--ink-3); font-size: .8rem; white-space: nowrap; } /* ---------- Publications ---------- */ .filters { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 2rem; } .chip { font-family: var(--f-sans); font-size: .8rem; font-weight: 500; padding: .42rem .85rem; border-radius: 999px; cursor: pointer; border: 1px solid var(--rule); background: var(--surface); color: var(--ink-2); transition: all .18s var(--ease); } .chip:hover { border-color: var(--ink-4); color: var(--ink); } .chip[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--on-primary); } .pub-year { display: grid; grid-template-columns: 5.5rem minmax(0,1fr); gap: clamp(1rem,3vw,2rem); padding-block: 1.6rem; border-top: 1px solid var(--rule); } @media (max-width: 700px) { .pub-year { grid-template-columns: 1fr; gap: .6rem; } } .pub-year-n { font-family: var(--f-mono); font-size: .95rem; color: var(--ink-3); position: sticky; top: 90px; align-self: start; padding-top: .35rem; } @media (max-width: 700px) { .pub-year-n { position: static; font-size: .82rem; letter-spacing: .1em; } } .pub { padding-block: .95rem; border-bottom: 1px solid var(--rule-2); } .pub:last-child { border-bottom: 0; } /* One entry should read as one block. The global p margin was pushing the three lines a full em apart, so each carries its own spacing here. */ .pub-t { font-size: 1.03rem; font-weight: 550; line-height: 1.38; letter-spacing: -.008em; margin: 0; } /* The title is the link, so it keeps the ink colour -- 37 blue headings in a row is a wall, not a list -- and the arrow does the signalling instead. */ .pub-t a { color: var(--ink); } .pub-t a::after { content: '\2197'; font-size: .78em; margin-left: .28em; color: var(--ink-4); vertical-align: .06em; } .pub-t a:hover, .pub-t a:focus-visible { color: var(--indigo-lit); } .pub-t a:hover::after, .pub-t a:focus-visible::after { color: var(--indigo-lit); } .pub-a { font-size: .87rem; color: var(--ink-2); line-height: 1.42; margin: .16rem 0 0; } .pub-v { font-size: .85rem; color: var(--ink-3); line-height: 1.42; margin: .08rem 0 0; } .pub-v em { color: var(--ink-2); font-style: italic; } .pub-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .42rem; } .pill { font-family: var(--f-mono); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; padding: .22rem .5rem; border-radius: 5px; background: var(--paper-2); color: var(--ink-3); border: 1px solid var(--rule); } .pill-journal { background: var(--indigo-soft); color: var(--tag-ink); border-color: var(--tag-bd); } .pill-preprint { background: var(--saffron-soft); color: var(--warm-ink); border-color: var(--warm-bd); } .pill-conference { background: var(--teal-soft); color: var(--teal-ink); border-color: var(--teal-bd); } /* Press coverage. Teal, not saffron -- saffron is the accent and reads as a warning next to warm paper; and not indigo, which is what a link looks like. */ /* A few papers carry a drawn summary. It sits beside the entry once there is room for a second column, and below it otherwise -- never above, so the entry always opens on its title. */ .pub-fig { margin: .75rem 0 .15rem; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--surface); overflow: hidden; } .pub-fig svg { display: block; width: 100%; height: auto; } /* The prose that goes with the drawing. It is last in the entry so that it runs down the column the figure's height leaves open, rather than pushing the pills away from the title. */ .pub-sum { margin: .6rem 0 0; font-size: .875rem; line-height: 1.6; color: var(--ink-2); } .pub-sum b { font-family: var(--f-mono); font-size: .68rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); margin-right: .4rem; } @media (min-width: 900px) { .pub-wide { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 1.6rem; align-items: start; } .pub-wide .pub-fig { margin: .15rem 0 0; } } .pub-hl { margin-top: .4rem; font-size: .82rem; color: var(--teal-ink); background: var(--teal-soft); border-left: 2px solid var(--teal); padding: .45rem .7rem; border-radius: 0 6px 6px 0; } .pub-hl b { font-weight: 650; color: var(--teal-ink-b); } .pub-hl a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--teal); } .pub-hl a:hover { text-decoration-color: currentColor; } /* ---------- Timeline / news ---------- */ .tl { position: relative; padding-left: 1.75rem; } .tl::before { content: ''; position: absolute; left: 5px; top: .6rem; bottom: .6rem; width: 1px; background: var(--rule); } .tl-item { position: relative; padding-bottom: 2.4rem; } .tl-item:last-child { padding-bottom: 0; } .tl-item::before { content: ''; position: absolute; left: -1.75rem; top: .45rem; width: 11px; height: 11px; border-radius: 50%; background: var(--surface); border: 2px solid var(--indigo); } .tl-item:first-child::before { background: var(--saffron); border-color: var(--saffron); box-shadow: 0 0 0 4px var(--saffron-soft); } .tl-date { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .06em; color: var(--ink-3); text-transform: uppercase; } .tl-title { font-size: 1.1rem; font-weight: 600; margin: .3rem 0 .4rem; letter-spacing: -.01em; } .tl-body { color: var(--ink-2); font-size: .94rem; max-width: 62ch; } .tl-img { margin-top: 1rem; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--rule); max-width: 460px; } .tl-img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; } /* ---------- Projects ---------- */ .proj { border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); padding: 1.5rem 1.6rem; display: grid; gap: .7rem; transition: box-shadow .22s var(--ease), border-color .22s var(--ease); } .proj:hover { box-shadow: var(--shadow-2); border-color: var(--card-bd); } .proj-top { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .agency { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-primary); background: var(--indigo); padding: .26rem .55rem; border-radius: 5px; } .role { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .06em; color: var(--ink-3); } .proj-t { font-size: 1.06rem; font-weight: 550; line-height: 1.38; letter-spacing: -.01em; } .proj-p { font-size: .86rem; color: var(--ink-3); } .proj-s { font-size: .92rem; color: var(--ink-2); } .status { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); } .status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); } .status-done { color: var(--ink-3); } .status-done::before { background: var(--ink-4); } /* ---------- Teaching ---------- */ .term { display: grid; grid-template-columns: 11rem minmax(0,1fr); gap: 1.5rem; padding-block: 1.15rem; border-top: 1px solid var(--rule); align-items: baseline; } @media (max-width: 640px) { .term { grid-template-columns: 1fr; gap: .5rem; } } .term-l { font-family: var(--f-mono); font-size: .82rem; color: var(--ink-3); letter-spacing: .02em; } .term-now { color: var(--saffron); } .course { display: flex; align-items: baseline; gap: .7rem; padding-block: .3rem; flex-wrap: wrap; } .course-c { font-family: var(--f-mono); font-size: .8rem; color: var(--indigo); background: var(--indigo-soft); padding: .16rem .45rem; border-radius: 5px; } .course-n { font-size: 1rem; font-weight: 500; } .course-note { font-size: .78rem; color: var(--ink-3); font-style: italic; } /* a term row whose course has a page of its own */ a.course-link { color: inherit; text-decoration: none; border-radius: var(--r-sm); } a.course-link:hover { text-decoration: none; } a.course-link:hover .course-n { color: var(--indigo-lit); } .course-go { display: inline-flex; opacity: 0; transform: translateX(-4px); transition: all .2s var(--ease); } .course-go svg { width: 15px; height: 15px; color: var(--indigo-lit); } a.course-link:hover .course-go, a.course-link:focus-visible .course-go { opacity: 1; transform: none; } /* ---------- Course pages ---------- */ /* the card grid is split by semester, so each block carries its own heading */ .crs-group { margin-top: 2.4rem; } .crs-group:first-of-type { margin-top: 1.4rem; } .crs-group-t { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; font-family: var(--f-mono); font-size: .84rem; letter-spacing: .02em; color: var(--ink); padding-bottom: .7rem; border-bottom: 1px solid var(--rule); } .crs-group-n { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); } .crs-group-now { color: var(--saffron); } .crs-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); margin-top: 1.2rem; } .crs-card { display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); color: var(--ink); text-decoration: none; overflow: hidden; transition: all .22s var(--ease); } .crs-card-in { display: flex; flex-direction: column; gap: .35rem; padding: 1.2rem 1.5rem 1.5rem; } .crs-card:hover { text-decoration: none; border-color: var(--ink-4); transform: translateY(-2px); box-shadow: var(--shadow-2); } .crs-card .crs-code { align-self: flex-start; margin-bottom: .5rem; } /* The card's picture. Drawn rather than photographed, and built from the same tokens as everything else, so it follows the theme instead of sitting on it. */ .crs-thumb { display: block; position: relative; aspect-ratio: 16 / 9; background: linear-gradient(150deg, var(--paper-2), var(--surface) 70%); border-bottom: 1px solid var(--rule); overflow: hidden; } .crs-thumb svg { width: 100%; height: 100%; display: block; } /* a hairline of the brand along the top edge, warmer on the self-paced card */ .crs-thumb::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--indigo); opacity: .55; } .crs-card-alt .crs-thumb::after { background: var(--teal); } .crs-card:hover .crs-thumb::after { opacity: 1; } @media (prefers-reduced-motion: no-preference) { .crs-thumb svg { transition: transform .3s var(--ease); } .crs-card:hover .crs-thumb svg { transform: scale(1.03); } } .crs-card-n { font-family: var(--f-display); font-size: 1.28rem; letter-spacing: -.015em; } .crs-card-t { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .04em; color: var(--ink-3); } .crs-card-b { font-size: .87rem; color: var(--ink-2); margin-top: .5rem; } .crs-card-alt { background: var(--paper-2); } .crs-card-alt .crs-code { background: var(--teal-soft); color: var(--teal-ink); } .crs-code { display: inline-block; font-family: var(--f-mono); font-size: .82rem; font-weight: 500; color: var(--indigo); background: var(--indigo-soft); border: 1px solid var(--tag-bd); padding: .25rem .6rem; border-radius: 7px; letter-spacing: .02em; } .crs-head { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; margin-top: .7rem; } .crs-now { color: var(--saffron); } .crs-jump { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 2rem; } .crs-jump a { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .03em; padding: .35rem .7rem; border-radius: 999px; color: var(--ink-2); border: 1px solid var(--rule); background: var(--surface); text-decoration: none; } .crs-jump a:hover { text-decoration: none; border-color: var(--ink-4); color: var(--ink); } /* the verse that opens each course */ .verse { margin-top: 2.2rem; padding: 1.5rem 0 1.5rem 1.6rem; border-left: 2px solid var(--saffron); max-width: 46rem; } .verse-sa { font-family: var(--f-sa); font-size: 1.28rem; line-height: 1.95; color: var(--ink); } .verse-tl { font-size: .84rem; font-style: italic; color: var(--ink-3); margin-top: .6rem; } .verse-en { font-size: .9rem; color: var(--ink-2); margin-top: .7rem; } /* who / when / where */ .crs-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); overflow: hidden; margin-top: 1.2rem; } .crs-cell { padding: 1.1rem 1.3rem; border-right: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); } .crs-k { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .crs-v { font-size: .9rem; color: var(--ink-2); line-height: 1.55; margin-top: .35rem; } .crs-list { margin-top: 1.1rem; display: grid; gap: .55rem; } .crs-list li { position: relative; padding-left: 1.15rem; font-size: .94rem; color: var(--ink-2); max-width: 68ch; } .crs-list li::before { content: ''; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-4); } .crs-list-lg li { font-size: 1rem; } .crs-cols { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .55rem 2rem; } .crs-refs { display: grid; gap: 2.2rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 1.2rem; } /* schedule */ .tbl-wrap { margin-top: 1.2rem; overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); } .tbl-wrap:focus-visible { outline: 2px solid var(--indigo-lit); outline-offset: 2px; } .tbl { border-collapse: collapse; width: 100%; min-width: 640px; font-size: .89rem; } .tbl th, .tbl td { text-align: left; vertical-align: top; padding: .85rem 1rem; border-bottom: 1px solid var(--rule-2); } .tbl thead th { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; background: var(--paper-2); border-bottom: 1px solid var(--rule); white-space: nowrap; } .tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-bottom: 0; } .tbl tbody tr:hover { background: var(--paper); } .tbl tbody th { font-family: var(--f-mono); font-weight: 400; color: var(--ink-3); width: 3.2rem; } .tbl td:nth-child(2) { color: var(--ink); font-weight: 500; min-width: 13rem; } .tbl-none { color: var(--ink-3); } .tbl a { text-underline-offset: 3px; } /* evaluation */ .ev { margin-top: 1.2rem; display: grid; gap: .1rem; max-width: 40rem; } .ev-row { display: flex; align-items: baseline; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--rule-2); } .ev-row:last-child { border-bottom: 0; } .ev-w { font-family: var(--f-mono); font-size: 1.05rem; color: var(--indigo); min-width: 3.4rem; } .ev-l { font-size: .95rem; color: var(--ink); } .ev-n { display: block; font-size: .8rem; color: var(--ink-3); margin-top: .1rem; } /* self-learning */ .sl-card { padding: 1.9rem 2rem 2rem; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); max-width: 46rem; } /* ---------- Reading / recommended ---------- */ .shelf { padding-block: 1.6rem; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 14rem minmax(0,1fr); gap: 1.5rem; } @media (max-width: 760px) { .shelf { grid-template-columns: 1fr; gap: .7rem; } } .shelf-t { font-family: var(--f-display); font-size: 1.12rem; color: var(--ink); } .shelf-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: .1rem 1.5rem; } .shelf-items li { padding: .5rem 0; border-bottom: 1px solid var(--rule-2); font-size: .93rem; display: flex; gap: .6rem; align-items: baseline; } .shelf-items li::before { content: '—'; color: var(--ink-4); flex: none; } .chipwrap { display: flex; flex-wrap: wrap; gap: .5rem; } .chipwrap span { font-size: .87rem; padding: .45rem .85rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--rule); color: var(--ink-2); } .linklist { display: grid; gap: .6rem; } .linkrow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); transition: all .2s var(--ease); } .linkrow:hover { text-decoration: none; border-color: var(--indigo-lit); transform: translateX(3px); box-shadow: var(--shadow-1); } .linkrow-t { font-weight: 550; font-size: .97rem; } .linkrow-m { font-size: .82rem; color: var(--ink-3); margin-top: .1rem; } .linkrow svg { width: 17px; height: 17px; color: var(--ink-4); flex: none; } /* ---------- Video cards ---------- */ .vids { display: grid; gap: 1.4rem 1.1rem; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); } .vid { display: grid; gap: .1rem; color: var(--ink); } .vid:hover { text-decoration: none; } .vid-thumb { display: block; position: relative; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--paper-2); margin-bottom: .6rem; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .vid-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; } .vid:hover .vid-thumb { border-color: var(--indigo-lit); box-shadow: var(--shadow-2); } /* the play badge only appears once, over the image, so it needs its own ground */ .vid-play { position: absolute; inset: auto .55rem .55rem auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(28,23,19,.72); color: #fff; backdrop-filter: saturate(140%) blur(2px); transition: background .2s var(--ease), transform .2s var(--ease); } .vid-play svg { width: 15px; height: 15px; margin-left: 1px; } .vid:hover .vid-play { background: var(--indigo); transform: scale(1.08); } .vid-t { font-weight: 550; font-size: .95rem; line-height: 1.35; } .vid:hover .vid-t { color: var(--indigo-lit); } .vid-m { font-size: .8rem; color: var(--ink-3); line-height: 1.35; margin-top: .18rem; } @media (max-width: 560px) { .vids { grid-template-columns: 1fr; gap: 1.3rem; } } .pcard { display: grid; gap: .5rem; padding: 1.5rem; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); } .pcard-t { font-family: var(--f-display); font-size: 1.3rem; } .pcard-m { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em; color: var(--saffron); text-transform: uppercase; } .pcard-b { font-size: .91rem; color: var(--ink-2); } /* ---------- Gallery ---------- */ .gal { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; } @media (max-width: 900px) { .gal { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 560px) { .gal { grid-template-columns: 1fr; } } .gal figure { margin: 0; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; background: var(--surface); transition: box-shadow .25s var(--ease), transform .25s var(--ease); } .gal figure:hover { box-shadow: var(--shadow-2); transform: translateY(-3px); } .gal .wide { grid-column: span 2; } @media (max-width: 560px) { .gal .wide { grid-column: span 1; } } .gal img { width: 100%; aspect-ratio: 16/10; object-fit: contain; background: var(--img-mat); padding: .5rem; } .gal .photo img { object-fit: cover; padding: 0; } .gal figcaption { padding: .9rem 1.1rem; } .gal-t { font-size: .93rem; font-weight: 600; } .gal-c { font-size: .82rem; color: var(--ink-3); margin-top: .18rem; } /* ---------- Join / contact ---------- */ .join-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.8fr); gap: clamp(2rem,5vw,4rem); align-items: start; } @media (max-width: 900px) { .join-grid { grid-template-columns: 1fr; } } .route { border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); padding: 1.5rem 1.6rem; margin-bottom: 1rem; } .route-open { border-left: 3px solid var(--teal); } .route-closed { border-left: 3px solid var(--ink-4); opacity: .82; } .route-badge { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--f-mono); font-size: .67rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .55rem; } .route-open .route-badge { color: var(--teal); } .route-closed .route-badge { color: var(--ink-3); } .route-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .subject-line { font-family: var(--f-mono); font-size: .8rem; background: var(--paper-2); border: 1px dashed var(--rule); border-radius: var(--r-sm); padding: .7rem .9rem; margin: .9rem 0; color: var(--ink-2); word-break: break-word; } .contact-box { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: 1.6rem; } .contact-row { display: flex; gap: .85rem; padding-block: .85rem; border-bottom: 1px solid var(--rule-2); align-items: flex-start; } .contact-row:last-child { border-bottom: 0; } .contact-row svg { width: 17px; height: 17px; color: var(--indigo); flex: none; margin-top: .22rem; } .contact-k { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); } .contact-v { font-size: .95rem; margin-top: .1rem; } /* ---------- Quote band ---------- */ .quote-band { background: var(--band); color: var(--on-band); } /* one line, all the way down -- the size follows the viewport so it never wraps */ .quote-band .q { font-family: var(--f-display); font-style: italic; font-size: min(2.4rem, 4vw); line-height: 1.3; letter-spacing: -.015em; white-space: nowrap; } /* Devanagari sets to its own rhythm -- let it wrap and give it more leading */ .quote-band .q-sa { font-family: var(--f-sa); font-style: normal; white-space: normal; font-size: clamp(1.35rem, 3.2vw, 2.15rem); line-height: 1.8; letter-spacing: 0; max-width: 26ch; } .quote-band .attr { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-band-2); margin-top: 1.4rem; } /* ---------- Partner marquee ---------- */ .partners { display: flex; flex-wrap: wrap; gap: .55rem 1.9rem; align-items: center; } .partners li { font-size: .87rem; color: var(--ink-3); display: flex; align-items: center; gap: 1.9rem; } .partners li::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--rule); } .partners li:last-child::after { display: none; } /* ---------- CTA band ---------- */ .cta-band { border: 1px solid var(--rule); border-radius: var(--r); background: linear-gradient(140deg, var(--surface) 0%, var(--indigo-soft) 55%, var(--saffron-soft) 130%); padding: clamp(1.2rem, 2.6vw, 1.8rem) clamp(1.3rem, 3vw, 2.1rem); display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; } .cta-band .h3 { font-family: var(--f-display); font-weight: 400; letter-spacing: -.015em; } .cta-band p { margin: .15rem 0 0; } /* ---------- Footer ---------- */ .ftr { background: var(--band); color: var(--on-band); padding-block: clamp(3rem,6vw,4.5rem) 2rem; margin-top: 0; } .ftr a { color: var(--on-band); } .ftr a:hover { color: var(--on-primary); } .ftr-grid { display: grid; grid-template-columns: minmax(0,1.4fr) repeat(3, minmax(0,1fr)); gap: 2.5rem; } @media (max-width: 900px) { .ftr-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } } @media (max-width: 520px) { .ftr-grid { grid-template-columns: 1fr; } } .ftr .brand { color: var(--on-primary); } .ftr .brand-sub { color: var(--on-band-2); } /* full ∫LAB lockup */ .ftr-logo { display: inline-block; width: 210px; max-width: 70%; } .ftr-logo svg { width: 100%; height: auto; } .ftr-logo:hover { text-decoration: none; } .lg-int { stroke: var(--indigo); } .lg-word { fill: var(--ink); } .lg-sub { fill: var(--ink-3); } .ftr .lg-int { stroke: var(--band-lit); } .ftr .lg-word { fill: var(--surface); } .ftr .lg-sub { fill: var(--on-band-2); } .ftr-h { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-band-2); margin-bottom: .9rem; } .ftr-l li { padding-block: .3rem; font-size: .89rem; } .ftr-bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--band-rule); display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; font-size: .8rem; color: var(--on-band-2); } .sanskrit-line { font-family: var(--f-sa); font-size: 1.34rem; color: var(--on-band); letter-spacing: .01em; line-height: 1.7; } .sanskrit-tr { font-size: .82rem; color: var(--on-band-2); font-style: italic; margin-top: .35rem; } /* ---------- Reveal on scroll ---------- */ .rv { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .rv.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ---------- SVG art helpers ---------- */ .art-stroke { stroke: var(--indigo); fill: none; } .spin-slow { animation: spin 46s linear infinite; transform-origin: 50% 50%; } .spin-rev { animation: spin 62s linear infinite reverse; transform-origin: 50% 50%; } @keyframes spin { to { transform: rotate(360deg); } } .pulse-o { animation: pulseO 4.5s var(--ease) infinite; transform-origin: 50% 50%; } @keyframes pulseO { 0%,100% { opacity:.35; } 50% { opacity:.9; } } .sweep { animation: sweep 7s var(--ease) infinite; } @keyframes sweep { 0% { transform: translateY(-6%); opacity:0; } 12% { opacity:.85; } 88% { opacity:.85; } 100% { transform: translateY(106%); opacity:0; } } .dash-run { stroke-dasharray: 5 7; animation: dashrun 3.4s linear infinite; } @keyframes dashrun { to { stroke-dashoffset: -48; } } .trace { stroke-dasharray: 340; stroke-dashoffset: 340; animation: trace 5.5s var(--ease) infinite; } @keyframes trace { 0% { stroke-dashoffset: 340; } 45%,70% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -340; } } /* hero scanning beam — px here are SVG user units (transform-box: view-box is the SVG default) */ .hero-scan { animation: heroScan 8.5s cubic-bezier(.45,0,.55,1) infinite; } @keyframes heroScan { 0% { transform: translateY(70px); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateY(620px); opacity: 0; } } .spin-tetra { transform-origin: 212px 104px; animation: spin 54s linear infinite; } /* ---------- Print ---------- */ @media print { .hdr, .nav, .cta-band, .hero-art, .ftr { display: none !important; } body { background: #fff; font-size: 11pt; } .section { padding-block: 1rem; } a { color: #000; text-decoration: none; } }