/* =============================================================
All selectors scoped to .sw-portfolio — zero theme bleed
============================================================= */
/* ── TOKENS ──────────────────────────────────────────────── */
.sw-portfolio {
–sw-bg: #FBF5E8; /* warm parchment */
–sw-bg2: #F2E9D6; /* slightly deeper parchment */
–sw-ink: #111111; /* near-black */
–sw-gold: #BA9521; /* sugar-words.com primary */
–sw-pop: #D4A800; /* brighter pop accent */
–sw-rust: #B5451A; /* warm rust */
–sw-cream: #FFFEF8; /* card / about bg */
–sw-white: #FFFFFF;
–sw-serif: ‘Playfair Display’, Georgia, serif;
–sw-display:’Bebas Neue’, ‘Arial Black’, sans-serif;
–sw-body: ‘Vollkorn’, Georgia, serif;
–sw-border: 3px solid var(–sw-ink);
–sw-shadow: 5px 5px 0 var(–sw-ink);
–sw-ease: 0.24s cubic-bezier(.4,0,.2,1);
}
/* ── SCOPED RESET ────────────────────────────────────────── */
.sw-portfolio *,
.sw-portfolio *::before,
.sw-portfolio *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.sw-portfolio {
font-family: var(–sw-body);
font-size: 16px;
color: var(–sw-ink);
background: var(–sw-bg);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
.sw-portfolio h1,
.sw-portfolio h2,
.sw-portfolio h3,
.sw-portfolio h4 {
font-family: var(–sw-serif);
font-weight: 900;
line-height: 1.05;
color: var(–sw-ink);
}
.sw-portfolio p { line-height: 1.75; }
.sw-portfolio a { color: var(–sw-gold); text-decoration: none; }
.sw-portfolio a:hover { text-decoration: underline; }
.sw-portfolio img { display: block; max-width: 100%; }
.sw-portfolio ul { list-style: none; }
/* ── LAYOUT ──────────────────────────────────────────────── */
.sw-wrap {
max-width: 1160px;
margin: 0 auto;
padding: 0 24px;
}
.sw-rule {
border: none;
border-top: var(–sw-border);
}
.sw-rule-dot {
border: none;
border-top: 2px dotted var(–sw-gold);
opacity: .45;
}
/* ── TAGS ─────────────────────────────────────────────────── */
.sw-tag {
display: inline-block;
background: var(–sw-ink);
color: var(–sw-white);
font-family: var(–sw-display);
font-size: .68rem;
letter-spacing: .12em;
padding: 3px 10px 2px;
margin: 2px 2px 2px 0;
}
.sw-tag-line {
background: transparent;
color: var(–sw-ink);
border: 2px solid var(–sw-ink);
}
/* ── SCROLL ANIMATION ────────────────────────────────────── */
.sw-anim {
opacity: 0;
transform: translateY(24px);
transition: opacity .6s var(–sw-ease), transform .6s var(–sw-ease);
}
.sw-anim.sw-in { opacity: 1; transform: none; }
.sw-stagger > *:nth-child(1) { transition-delay: .05s; }
.sw-stagger > *:nth-child(2) { transition-delay: .15s; }
.sw-stagger > *:nth-child(3) { transition-delay: .25s; }
.sw-stagger > *:nth-child(4) { transition-delay: .35s; }
.sw-stagger > *:nth-child(5) { transition-delay: .45s; }
/* ╔══════════════════════════════════════════════════════╗
║ NAV ║
╚══════════════════════════════════════════════════════╝ */
.sw-nav {
position: sticky;
top: 0;
z-index: 300;
background: var(–sw-ink);
}
.sw-nav-inner {
display: flex;
align-items: stretch;
min-height: 52px;
}
.sw-nav-logo {
display: flex;
align-items: center;
padding: 0 20px;
font-family: var(–sw-serif);
font-style: italic;
font-size: 1.1rem;
color: var(–sw-white) !important;
text-decoration: none !important;
border-right: 1px solid rgba(255,255,255,.12);
white-space: nowrap;
letter-spacing: -.01em;
flex-shrink: 0;
}
.sw-nav-links {
display: flex;
margin-left: auto;
}
.sw-nav-links li {
border-left: 1px solid rgba(255,255,255,.1);
}
.sw-nav-links a {
display: flex;
align-items: center;
gap: 7px;
padding: 0 20px;
height: 100%;
font-family: var(–sw-display);
font-size: .9rem;
letter-spacing: .12em;
color: rgba(255,255,255,.65) !important;
text-decoration: none !important;
transition: background var(–sw-ease), color var(–sw-ease);
position: relative;
}
.sw-nav-links a:hover {
background: var(–sw-gold);
color: var(–sw-white) !important;
text-decoration: none !important;
}
.sw-nav-num {
font-family: var(–sw-body);
font-size: .6rem;
color: var(–sw-gold);
opacity: .8;
line-height: 1;
}
.sw-nav-links a:hover .sw-nav-num { color: var(–sw-white); opacity: .6; }
/* mobile nav */
.sw-nav-toggle {
display: none;
margin-left: auto;
align-items: center;
padding: 0 16px;
background: none;
border: none;
cursor: pointer;
color: var(–sw-white);
font-family: var(–sw-display);
font-size: 1rem;
letter-spacing: .1em;
}
.sw-nav-drawer {
display: none;
flex-direction: column;
background: var(–sw-ink);
border-top: 1px solid rgba(255,255,255,.1);
}
.sw-nav-drawer.sw-open { display: flex; }
.sw-nav-drawer a {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 20px;
font-family: var(–sw-display);
font-size: 1.1rem;
letter-spacing: .12em;
color: rgba(255,255,255,.8) !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(255,255,255,.08);
transition: background var(–sw-ease);
}
.sw-nav-drawer a:hover { background: var(–sw-gold); color: var(–sw-white) !important; }
/* ╔══════════════════════════════════════════════════════╗
║ MARQUEE ANNOUNCEMENT STRIP ║
╚══════════════════════════════════════════════════════╝ */
.sw-marquee-bar {
background: var(–sw-gold);
border-bottom: var(–sw-border);
overflow: hidden;
padding: 8px 0;
white-space: nowrap;
}
.sw-marquee-track {
display: inline-flex;
gap: 0;
animation: sw-marquee 22s linear infinite;
will-change: transform;
}
.sw-marquee-bar:hover .sw-marquee-track { animation-play-state: paused; }
.sw-marquee-item {
display: inline-flex;
align-items: center;
gap: 16px;
padding: 0 24px;
font-family: var(–sw-display);
font-size: .85rem;
letter-spacing: .18em;
color: var(–sw-white);
}
.sw-marquee-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: rgba(255,255,255,.55);
flex-shrink: 0;
display: inline-block;
}
@keyframes sw-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ╔══════════════════════════════════════════════════════╗
║ HERO ║
╚══════════════════════════════════════════════════════╝ */
.sw-hero {
border-bottom: var(–sw-border);
background: var(–sw-bg);
position: relative;
}
/* ── headline banner ────────────────────────────────── */
.sw-hero-nameplate {
border-bottom: var(–sw-border);
padding: 28px 0 20px;
display: flex;
align-items: flex-end;
gap: 16px;
flex-wrap: wrap;
}
.sw-hero-name-first {
font-family: var(–sw-serif);
font-style: italic;
font-weight: 900;
font-size: clamp(2rem, 4.5vw, 4rem);
line-height: .9;
color: var(–sw-ink);
letter-spacing: -.03em;
}
.sw-hero-name-last {
font-family: var(–sw-display);
font-size: clamp(2rem, 4.5vw, 4rem);
line-height: .9;
color: var(–sw-gold);
letter-spacing: .06em;
}
.sw-hero-name-role {
display: flex;
flex-direction: column;
gap: 4px;
padding-bottom: 8px;
margin-left: auto;
text-align: right;
}
.sw-hero-name-role span {
font-family: var(–sw-display);
font-size: .78rem;
letter-spacing: .22em;
color: var(–sw-ink);
opacity: .5;
text-transform: uppercase;
}
/* ── two-column body ────────────────────────────────── */
.sw-hero-body {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 480px;
}
/* left column */
.sw-hero-left {
border-right: var(–sw-border);
padding: 40px 36px 40px 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.sw-hero-tagline {
font-family: var(–sw-serif);
font-style: italic;
font-size: clamp(1.6rem, 3vw, 2.6rem);
line-height: 1.2;
color: var(–sw-ink);
max-width: 460px;
}
.sw-hero-tagline strong {
font-style: normal;
color: var(–sw-rust);
}
.sw-hero-sub {
font-family: var(–sw-body);
font-size: 1rem;
line-height: 1.7;
color: var(–sw-ink);
opacity: .75;
max-width: 380px;
margin-top: 20px;
}
.sw-hero-disciplines {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 28px;
}
.sw-hero-cta {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(–sw-ink);
color: var(–sw-white) !important;
text-decoration: none !important;
padding: 14px 24px;
font-family: var(–sw-display);
font-size: .9rem;
letter-spacing: .14em;
border: var(–sw-border);
box-shadow: var(–sw-shadow);
transition: transform var(–sw-ease), box-shadow var(–sw-ease), background var(–sw-ease);
margin-top: 32px;
align-self: flex-start;
}
.sw-hero-cta:hover {
transform: translate(-3px,-3px);
box-shadow: 8px 8px 0 var(–sw-gold);
background: var(–sw-rust);
text-decoration: none !important;
}
/* right column */
.sw-hero-right {
padding: 36px 0 36px 40px;
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 28px;
}
/* pop art composition */
.sw-pop-stage {
position: relative;
width: 100%;
max-width: 380px;
}
/* halftone backdrop */
.sw-halftone-bg {
position: absolute;
bottom: -16px; right: -16px;
width: 200px; height: 200px;
background-image: radial-gradient(circle, var(–sw-gold) 2px, transparent 2px);
background-size: 14px 14px;
opacity: .5;
z-index: 0;
pointer-events: none;
}
/* photo frame */
.sw-pop-frame {
position: relative;
z-index: 2;
border: var(–sw-border);
box-shadow: var(–sw-shadow);
overflow: hidden;
width: 220px;
height: 280px;
background: var(–sw-pop); /* duotone base color */
display: block;
}
.sw-pop-frame img {
width: 100%; height: 100%;
object-fit: cover;
object-position: top center;
filter: grayscale(1) contrast(1.5) brightness(1.15);
mix-blend-mode: multiply;
display: block;
}
/* starburst badges */
.sw-burst {
position: absolute;
z-index: 3;
}
.sw-burst-1 {
top: -20px; right: 40px;
}
.sw-burst-2 {
bottom: -20px; right: -20px;
}
/* speech bubble */
.sw-speech {
position: relative;
z-index: 4;
background: var(–sw-cream);
border: var(–sw-border);
box-shadow: var(–sw-shadow);
padding: 14px 16px;
max-width: 240px;
font-family: var(–sw-serif);
font-style: italic;
font-size: .88rem;
color: var(–sw-rust);
line-height: 1.55;
animation: sw-float 3.8s ease-in-out infinite;
}
.sw-speech::before {
content: ”;
position: absolute;
top: 100%;
left: 20px;
width: 0; height: 0;
border-left: 10px solid transparent;
border-right: 3px solid transparent;
border-top: 12px solid var(–sw-ink);
}
.sw-speech::after {
content: ”;
position: absolute;
top: calc(100% – 3px);
left: 22px;
width: 0; height: 0;
border-left: 8px solid transparent;
border-right: 2px solid transparent;
border-top: 10px solid var(–sw-cream);
}
@keyframes sw-float {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
/* hero icons strip */
.sw-hero-icons {
display: flex;
gap: 0;
border-top: var(–sw-border);
width: 100%;
}
.sw-hero-icon-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 16px 10px;
border-right: var(–sw-border);
transition: background var(–sw-ease);
}
.sw-hero-icon-item:last-child { border-right: none; }
.sw-hero-icon-item:hover { background: var(–sw-gold); }
.sw-hero-icon-item:hover svg { color: var(–sw-white); }
.sw-hero-icon-item:hover .sw-icon-label { color: var(–sw-white); }
.sw-hero-icon-item svg { color: var(–sw-gold); transition: color var(–sw-ease); }
.sw-icon-label {
font-family: var(–sw-display);
font-size: .65rem;
letter-spacing: .14em;
color: var(–sw-ink);
opacity: .55;
text-transform: uppercase;
transition: color var(–sw-ease), opacity var(–sw-ease);
}
.sw-hero-icon-item:hover .sw-icon-label { opacity: 1; }
/* hero type block */
.sw-hero-type-block {
position: relative;
z-index: 2;
border: var(–sw-border);
box-shadow: var(–sw-shadow);
background: var(–sw-ink);
padding: 28px 32px 24px;
width: 220px;
display: flex;
flex-direction: column;
gap: 2px;
}
.sw-type-line {
display: block;
font-family: var(–sw-display);
font-size: 2.8rem;
letter-spacing: .06em;
line-height: 1;
color: var(–sw-white);
}
.sw-type-line-accent { color: var(–sw-gold); }
.sw-type-op {
display: block;
font-family: var(–sw-body);
font-style: italic;
font-size: 1.4rem;
color: rgba(255,255,255,.3);
line-height: 1.2;
}
/* ╔══════════════════════════════════════════════════════╗
║ ABOUT ║
╚══════════════════════════════════════════════════════╝ */
.sw-about {
background: var(–sw-cream);
padding: 88px 0;
position: relative;
overflow: hidden;
border-bottom: var(–sw-border);
}
.sw-about::before {
content: ‘ABOUT’;
position: absolute;
right: -10px; top: 50%;
transform: translateY(-50%);
font-family: var(–sw-display);
font-size: clamp(8rem, 18vw, 18rem);
color: var(–sw-gold);
opacity: .05;
line-height: 1;
user-select: none;
pointer-events: none;
white-space: nowrap;
}
.sw-about-inner {
display: grid;
grid-template-columns: 1fr 1.7fr;
gap: 72px;
align-items: center;
}
.sw-about-aside {
position: relative;
}
.sw-about-img-frame {
width: 100%;
aspect-ratio: 4/5;
border: var(–sw-border);
box-shadow: var(–sw-shadow);
overflow: hidden;
background: var(–sw-pop);
}
.sw-about-img-frame img {
width: 100%; height: 100%;
object-fit: cover;
object-position: top center;
filter: grayscale(1) contrast(1.4) brightness(1.15);
mix-blend-mode: multiply;
}
.sw-about-label {
position: absolute;
bottom: -14px; right: -14px;
background: var(–sw-gold);
border: var(–sw-border);
padding: 10px 14px;
font-family: var(–sw-display);
font-size: .72rem;
letter-spacing: .14em;
color: var(–sw-white);
box-shadow: 3px 3px 0 var(–sw-ink);
}
.sw-about-eyebrow {
display: block;
font-family: var(–sw-display);
font-size: .72rem;
letter-spacing: .2em;
color: var(–sw-gold);
margin-bottom: 12px;
}
.sw-about-body h2 {
font-size: clamp(2.2rem, 4vw, 3.4rem);
font-style: italic;
margin-bottom: 24px;
}
.sw-about-body p {
font-size: 1rem;
color: var(–sw-ink);
max-width: 520px;
}
.sw-about-body p + p { margin-top: 14px; }
.sw-about-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
margin-top: 40px;
border: var(–sw-border);
}
.sw-stat {
padding: 18px 16px;
border-right: var(–sw-border);
text-align: center;
}
.sw-stat:last-child { border-right: none; }
.sw-stat-num {
display: block;
font-family: var(–sw-display);
font-size: 2.6rem;
color: var(–sw-gold);
line-height: 1;
}
.sw-stat-lbl {
display: block;
font-family: var(–sw-display);
font-size: .6rem;
letter-spacing: .12em;
color: var(–sw-ink);
opacity: .5;
margin-top: 4px;
}
/* ╔══════════════════════════════════════════════════════╗
║ WORK ║
╚══════════════════════════════════════════════════════╝ */
.sw-work {
padding: 88px 0;
background: var(–sw-bg);
border-bottom: var(–sw-border);
}
.sw-section-head { margin-bottom: 48px; }
.sw-section-eye {
display: block;
font-family: var(–sw-display);
font-size: .72rem;
letter-spacing: .22em;
color: var(–sw-gold);
margin-bottom: 8px;
}
.sw-section-head h2 {
font-size: clamp(2.6rem, 4.5vw, 4.2rem);
font-style: italic;
}
.sw-work .sw-section-head h2 {
font-size: clamp(3.8rem, 8vw, 8rem);
}
.sw-work-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: 24px;
}
.sw-card {
background: var(–sw-cream);
border: var(–sw-border);
box-shadow: var(–sw-shadow);
overflow: hidden;
transition: transform var(–sw-ease), box-shadow var(–sw-ease);
will-change: transform;
}
.sw-card:hover {
transform: translate(-3px,-3px);
box-shadow: 8px 8px 0 var(–sw-gold);
}
.sw-card-img {
width: 100%; height: 200px;
object-fit: cover; display: block;
border-bottom: var(–sw-border);
transition: filter var(–sw-ease);
}
.sw-card:hover .sw-card-img { filter: saturate(1.2); }
.sw-card-body { padding: 20px 20px 22px; }
.sw-card h3 {
font-size: 1.15rem; font-style: italic; margin-bottom: 8px;
}
.sw-card p {
font-size: .88rem; opacity: .8; margin-bottom: 14px;
}
.sw-card-tags { margin-bottom: 12px; }
.sw-card-link {
display: inline-flex;
align-items: center; gap: 6px;
font-family: var(–sw-display);
font-size: .72rem; letter-spacing: .1em;
color: var(–sw-ink) !important;
text-decoration: none !important;
padding: 7px 14px;
border: 2px solid var(–sw-ink);
transition: background var(–sw-ease), color var(–sw-ease);
}
.sw-card-link:hover {
background: var(–sw-ink);
color: var(–sw-white) !important;
text-decoration: none !important;
}
.sw-card-link svg { transition: transform var(–sw-ease); }
.sw-card-link:hover svg { transform: translateX(4px); }
/* featured */
.sw-card-feat {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 1fr 1fr;
}
.sw-card-feat .sw-card-img {
height: 100%;
border-bottom: none;
border-right: var(–sw-border);
min-height: 260px;
}
/* ╔══════════════════════════════════════════════════════╗
║ WRITING ║
╚══════════════════════════════════════════════════════╝ */
.sw-writing {
padding: 88px 0;
background: var(–sw-bg2);
border-bottom: var(–sw-border);
}
.sw-article-list { border-top: var(–sw-border); }
.sw-article {
display: grid;
grid-template-columns: 64px 1fr auto;
gap: 16px 28px;
align-items: start;
padding: 24px 0;
border-bottom: var(–sw-border);
}
.sw-article-num {
font-family: var(–sw-display);
font-size: 3.2rem;
color: var(–sw-gold);
opacity: .25;
line-height: 1;
user-select: none;
}
.sw-article-meta {
display: flex; align-items: center;
gap: 8px; margin-bottom: 8px; flex-wrap: wrap;
}
.sw-article-date {
font-family: var(–sw-display);
font-size: .65rem; letter-spacing: .12em;
color: var(–sw-ink); opacity: .4;
}
.sw-article h3 {
font-size: 1.12rem; font-style: italic;
margin-bottom: 6px; line-height: 1.25;
}
.sw-article p { font-size: .88rem; opacity: .72; }
.sw-article-btn {
display: inline-flex;
align-items: center; gap: 6px;
padding: 9px 16px;
border: var(–sw-border);
font-family: var(–sw-display);
font-size: .72rem; letter-spacing: .12em;
color: var(–sw-ink) !important;
text-decoration: none !important;
white-space: nowrap; margin-top: 2px;
transition: background var(–sw-ease), color var(–sw-ease), box-shadow var(–sw-ease);
}
.sw-article-btn:hover {
background: var(–sw-ink);
color: var(–sw-white) !important;
box-shadow: 3px 3px 0 var(–sw-gold);
text-decoration: none !important;
}
/* ╔══════════════════════════════════════════════════════╗
║ CONTACT ║
╚══════════════════════════════════════════════════════╝ */
.sw-contact {
padding: 96px 0 80px;
background: var(–sw-ink);
text-align: center;
position: relative;
overflow: hidden;
}
.sw-contact::before {
content: ‘HELLO’;
position: absolute;
bottom: -30px; left: 50%;
transform: translateX(-50%);
font-family: var(–sw-display);
font-size: clamp(6rem, 20vw, 18rem);
color: rgba(186,149,33,.1);
white-space: nowrap;
pointer-events: none; line-height: 1;
}
.sw-contact h2 {
font-size: clamp(2.8rem, 5.5vw, 5rem);
font-style: italic; color: var(–sw-white); margin-bottom: 16px;
}
.sw-contact-sub {
font-size: 1rem; color: var(–sw-white); opacity: .65;
max-width: 420px; margin: 0 auto 44px;
}
.sw-contact-btns {
display: flex; gap: 14px;
justify-content: center; flex-wrap: wrap; margin-bottom: 52px;
}
.sw-btn-solid {
display: inline-flex; align-items: center; gap: 8px;
background: var(–sw-gold);
color: var(–sw-white) !important; text-decoration: none !important;
padding: 14px 28px; font-family: var(–sw-display);
font-size: .88rem; letter-spacing: .12em;
border: 2px solid var(–sw-gold);
box-shadow: 4px 4px 0 rgba(186,149,33,.4);
transition: transform var(–sw-ease), box-shadow var(–sw-ease);
}
.sw-btn-solid:hover {
transform: translate(-2px,-2px);
box-shadow: 6px 6px 0 rgba(186,149,33,.4);
text-decoration: none !important;
}
.sw-btn-outline {
display: inline-flex; align-items: center; gap: 8px;
background: transparent;
color: var(–sw-white) !important; text-decoration: none !important;
padding: 14px 28px; font-family: var(–sw-display);
font-size: .88rem; letter-spacing: .12em;
border: 2px solid rgba(255,255,255,.3);
transition: border-color var(–sw-ease), background var(–sw-ease);
}
.sw-btn-outline:hover {
border-color: var(–sw-white);
background: rgba(255,255,255,.08);
text-decoration: none !important;
}
.sw-socials {
display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.sw-social {
display: flex; align-items: center; justify-content: center;
width: 46px; height: 46px;
border: 2px solid rgba(186,149,33,.35);
color: var(–sw-white) !important; text-decoration: none !important;
transition: border-color var(–sw-ease), transform var(–sw-ease), background var(–sw-ease);
}
.sw-social:hover {
border-color: var(–sw-gold);
transform: translateY(-3px);
background: rgba(186,149,33,.15);
text-decoration: none !important;
}
/* ── FOOTER ───────────────────────────────────────────────── */
.sw-footer {
background: #0A0A0A;
padding: 20px 0;
text-align: center;
}
.sw-footer p {
font-family: var(–sw-display);
font-size: .72rem; letter-spacing: .1em;
color: var(–sw-cream); opacity: .3;
}
/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 860px) {
.sw-nav-links { display: none; }
.sw-nav-toggle { display: flex; }
.sw-hero-nameplate { flex-direction: column; align-items: flex-start; }
.sw-hero-body { grid-template-columns: 1fr; }
.sw-hero-left { border-right: none; border-bottom: var(–sw-border); padding: 32px 0; }
.sw-hero-right { padding: 32px 0; }
.sw-about-inner { grid-template-columns: 1fr; }
.sw-about-aside { max-width: 260px; }
.sw-card-feat { grid-template-columns: 1fr; }
.sw-card-feat .sw-card-img {
height: 200px; border-right: none; border-bottom: var(–sw-border);
}
}
@media (max-width: 580px) {
.sw-hero-name-first,
.sw-hero-name-last { font-size: clamp(3.2rem, 12vw, 4.5rem); }
.sw-about-stats { grid-template-columns: 1fr; }
.sw-stat { border-right: none; border-bottom: var(–sw-border); }
.sw-stat:last-child { border-bottom: none; }
.sw-article {
grid-template-columns: 40px 1fr;
grid-template-rows: auto auto;
}
.sw-article-num { font-size: 2.4rem; }
.sw-article-btn { grid-column: 2; }
}
WEBSITE COPY
B2B STRATEGY
THOUGHT LEADERSHIP
REPORTAGE
BIOTECH
LEGAL TECH
OIL & GAS AI
HIGHER EDUCATION
ARTS & CULTURE
CREATIVE ESSAYS
WEBSITE COPY
B2B STRATEGY
THOUGHT LEADERSHIP
REPORTAGE
BIOTECH
LEGAL TECH
OIL & GAS AI
HIGHER EDUCATION
ARTS & CULTURE
CREATIVE ESSAYS
Lipi
Gandhi
Strategy and copy across six industries.
Website copy, B2B thought leadership, reportage, and essays
for sectors that tend to overcomplicate things.
Website Copy
Thought Leadership
Reportage
Creative Essays
B2B Strategy
Most briefs ask for words. The useful ones ask for thinking.
Copy
Strategy
Editorial
B2B
Culture
ABOUT
A business person’s vision. A storyteller’s hand.
I work across industries that don’t usually share a masthead: scientific
visualization, oil and gas AI, business education, legal tech, arts and
culture. What connects them is the same thing that connects economics
and poetry: someone is trying to convince someone else of something.
My job is to make that argument land.
5+
Industries
100+
Published
4+
Years
SELECTED PROJECTS
My Work
Website Copy
Science / Biotech
Quorumetrix Studio: Website Copy
Website copy for a scientific visualization studio. EM microscopy,
connectomics, 3D rendering: translated into language that gets
research scientists to book a discovery call.
Visit Site
Technical Writing
Oil & Gas AI
ML Use Cases for Subsurface Teams
Content strategy and creation on machine learning applications in
subsurface geoscience: pore pressure prediction, synthetic logs,
and earth modeling. Written for audiences that range from reservoir
engineers to C-suite.
Ask for Document
Infographic
Higher Education
ISB: Riding the Wave
Multiple carousels for ISB Executive Education on research. Example: Why Indian subsidiaries
outperform their parent companies on P/B ratios. Covers macro
tailwinds, cost of capital, and middle-class growth.
View Carousel
Content Marketing
Legal Tech
40+ Articles for Cacti Global
B2B content on CLM, contract abstraction, AI in legal, and
Talent-as-a-Service. Written for Cacti Global before their
acquisition by Execo in July 2024. Archived via Wayback Machine.
View Archive
PUBLISHED PIECES
Writing
01
2026
Reportage
Rice Business
What Leadership Really Looks Like: WILC 2026
Coverage of the 26th Women in Leadership Conference at Rice Business:
600 attendees, 15 sponsors. Published on the admissions blog for
prospective MBA students.
Read
02
2024
Opinion
Rice Business
Is There Room for an Artist in the Boardroom?
An opinion piece for Rice Business School’s admissions blog. The
argument: artistic thinking, specifically comfort with ambiguity and
the lateral leap, strengthens business leadership.
Read
03
Longitude
Reportage
Arts & Culture
The Keepers of What Remains: Art Conservation
A field report from inside the MFAH conservation studio for Longitude.
The work is part chemistry, part detective work.
Read
04
Nov 2025
Essay
Sugar Words
The Wisdom Is the Kid Who Asks Too Many Whys
A personal essay on the inner voice that never stops asking why.
Published on Sugar Words. The argument is that it’s a feature,
not a flaw.
Read
/* ================================================================
SUGAR-WORDS PORTFOLIO — All JS in IIFE. Zero globals. Vanilla only.
================================================================ */
(function () {
‘use strict’;
function ready(fn) {
document.readyState === ‘loading’
? document.addEventListener(‘DOMContentLoaded’, fn) : fn();
}
ready(function () {
var root = document.querySelector(‘.sw-portfolio’);
if (!root) return;
/* 1. Scroll animations */
var els = root.querySelectorAll(‘.sw-anim’);
if (‘IntersectionObserver’ in window) {
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (e) {
if (e.isIntersecting) { e.target.classList.add(‘sw-in’); io.unobserve(e.target); }
});
}, { threshold: 0.1, rootMargin: ‘0px 0px -32px 0px’ });
els.forEach(function (el) { io.observe(el); });
} else {
els.forEach(function (el) { el.classList.add(‘sw-in’); });
}
/* 2. Smooth scroll for portfolio anchor links */
root.querySelectorAll(‘a[href^=”#sw-“]’).forEach(function (a) {
a.addEventListener(‘click’, function (e) {
var target = document.getElementById(a.getAttribute(‘href’).slice(1));
if (!target) return;
e.preventDefault();
/* close mobile drawer if open */
var drawer = root.querySelector(‘.sw-nav-drawer’);
var toggle = root.querySelector(‘.sw-nav-toggle’);
if (drawer) drawer.classList.remove(‘sw-open’);
if (toggle) toggle.setAttribute(‘aria-expanded’, ‘false’);
var navH = (root.querySelector(‘.sw-nav’) || {}).offsetHeight || 0;
window.scrollTo({
top: target.getBoundingClientRect().top + window.pageYOffset – navH – 10,
behavior: ‘smooth’
});
});
});
/* 3. Mobile nav toggle */
var toggle = root.querySelector(‘.sw-nav-toggle’);
var drawer = root.querySelector(‘.sw-nav-drawer’);
if (toggle && drawer) {
toggle.addEventListener(‘click’, function () {
var open = drawer.classList.toggle(‘sw-open’);
toggle.setAttribute(‘aria-expanded’, open ? ‘true’ : ‘false’);
toggle.textContent = open ? ‘CLOSE’ : ‘MENU’;
});
}
/* 4. Card 3D tilt */
root.querySelectorAll(‘.sw-card’).forEach(function (card) {
card.addEventListener(‘mousemove’, function (e) {
var r = card.getBoundingClientRect();
var tX = ((e.clientY – r.top) / r.height – 0.5) * 4;
var tY = ((e.clientX – r.left) / r.width – 0.5) * -4;
card.style.transform =
‘translate(-3px,-3px) perspective(700px) rotateX(‘+tX+’deg) rotateY(‘+tY+’deg)’;
});
card.addEventListener(‘mouseleave’, function () { card.style.transform = ”; });
});
/* 5. Active nav highlight on scroll */
var sectionIds = [‘sw-about’,’sw-work’,’sw-writing’,’sw-contact’];
var navAs = root.querySelectorAll(‘.sw-nav-links a, .sw-nav-drawer a’);
function updateActive() {
var mid = window.pageYOffset + window.innerHeight * 0.35;
var cur = ”;
sectionIds.forEach(function (id) {
var el = document.getElementById(id);
if (el && el.offsetTop <= mid) cur = id;
});
navAs.forEach(function (a) {
var isActive = a.getAttribute('href') === '#' + cur;
a.style.color = isActive ? '' : ''; /* handled by hover CSS; clear any inline */
a.style.background = isActive ? 'rgba(186,149,33,.18)' : '';
});
}
window.addEventListener('scroll', updateActive, { passive: true });
updateActive();
});
})();
