/*
 * Ezequiel shared editorial design system
 * Inspired by the spatial rhythm, rule work, and typographic hierarchy of
 * MIT Engineering while remaining an original implementation for these sites.
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    color-scheme: light;
    --ds-paper: #fffcf0;
    --ds-base-50: #f2f0e5;
    --ds-base-100: #e6e4d9;
    --ds-base-150: #dad8ce;
    --ds-base-200: #cecdc3;
    --ds-base-300: #b7b5ac;
    --ds-base-500: #878580;
    --ds-base-600: #6f6e69;
    --ds-base-700: #575653;
    --ds-base-800: #403e3c;
    --ds-base-850: #343331;
    --ds-base-900: #282726;
    --ds-base-950: #1c1b1a;
    --ds-black: #100f0f;
    --ds-red-600: #af3029;
    --ds-red-400: #d14d41;

    --ds-bg: var(--ds-paper);
    --ds-bg-tint: var(--ds-base-50);
    --ds-surface: var(--ds-paper);
    --ds-text: var(--ds-black);
    --ds-text-strong: var(--ds-black);
    --ds-muted: var(--ds-base-600);
    --ds-faint: var(--ds-base-300);
    --ds-line: var(--ds-base-200);
    --ds-line-soft: var(--ds-base-100);
    --ds-accent: var(--ds-red-600);
    --ds-accent-hover: var(--ds-red-400);
    --ds-selection: rgba(175, 48, 41, 0.2);

    --ds-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --ds-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --ds-mono: "SFMono-Regular", "Roboto Mono", Consolas, monospace;
    --ds-rail: 80px;
    --ds-gutter: clamp(15px, 2.05vw, 40px);
    --ds-space-xs: clamp(10px, 0.41vw + 8px, 15px);
    --ds-space-sm: clamp(20px, 1.63vw + 12px, 40px);
    --ds-space-md: clamp(30px, 2.45vw + 18px, 60px);
    --ds-space-lg: clamp(60px, 4.9vw + 30px, 120px);
    --ds-display-xl: clamp(2.75rem, 4.4vw + 1rem, 5rem);
    --ds-display-lg: clamp(2.25rem, 2vw + 1.4rem, 3.45rem);
    --ds-display-md: clamp(1.75rem, 1.15vw + 1.35rem, 2.5rem);
    --ds-body-lg: clamp(1.05rem, 0.5vw + 0.9rem, 1.375rem);
    --ds-body: clamp(1rem, 0.16vw + 0.96rem, 1.125rem);
    --ds-small: clamp(0.75rem, 0.33vw + 0.67rem, 1rem);
    --ds-content: 850px;
    --ds-wide: 1200px;

    /* Compatibility aliases used by both existing codebases. */
    --background: var(--ds-bg);
    --surface: var(--ds-surface);
    --text: var(--ds-text);
    --secondary: var(--ds-muted);
    --separator: var(--ds-line);
    --fill: var(--ds-bg-tint);
    --blue: var(--ds-accent);
    --header: color-mix(in srgb, var(--ds-bg) 94%, transparent);
    --focus: var(--ds-accent);
    --bg: var(--ds-bg);
    --bg-elevated: var(--ds-surface);
    --bg-subtle: var(--ds-bg-tint);
    --bg-tint: var(--ds-bg-tint);
    --text-secondary: var(--ds-muted);
    --text-tertiary: var(--ds-faint);
    --accent: var(--ds-accent);
    --accent-soft: color-mix(in srgb, var(--ds-accent) 10%, var(--ds-bg));
    --accent-border: color-mix(in srgb, var(--ds-accent) 45%, var(--ds-line));
    --border: var(--ds-line);
    --border-strong: var(--ds-base-700);
    --card-surface: var(--ds-bg-tint);
    --code-bg: var(--ds-bg-tint);
    --code-block-bg: var(--ds-base-50);
    --code-block-border: var(--ds-line);
    --code-block-text: var(--ds-text);
    --selection: var(--ds-selection);
    --font-sans: var(--ds-sans);
    --font-serif: Georgia, "Times New Roman", serif;
    --font-mono: var(--ds-mono);
    --content-width: var(--ds-content);
    --wide-width: var(--ds-wide);
    --container-gutter: calc(var(--ds-gutter) * 2);
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --radius-xl: 0;
    --radius-pill: 999px;
    --shadow-soft: none;
    --shadow-lift: none;
}

html.dark-mode {
    color-scheme: dark;
    --ds-bg: var(--ds-black);
    --ds-bg-tint: var(--ds-base-950);
    --ds-surface: var(--ds-base-950);
    --ds-text: var(--ds-base-200);
    --ds-text-strong: var(--ds-paper);
    --ds-muted: var(--ds-base-500);
    --ds-faint: var(--ds-base-700);
    --ds-line: var(--ds-base-800);
    --ds-line-soft: var(--ds-base-850);
    --ds-accent: var(--ds-red-400);
    --ds-accent-hover: #e8705f;
    --ds-selection: rgba(209, 77, 65, 0.27);
    --code-block-bg: var(--ds-black);
}

html {
    min-width: 320px;
    background: var(--ds-bg);
    color: var(--ds-text);
    font-family: var(--ds-sans);
    font-size: 16px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--ds-bg);
    color: var(--ds-text);
    font-family: var(--ds-sans);
}

body > header,
body > main,
body > footer {
    margin-left: var(--ds-rail);
}

::selection {
    background: var(--ds-selection);
}

a {
    color: inherit;
    text-decoration-color: var(--ds-line);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.17em;
}

a:hover {
    color: var(--ds-text-strong);
    text-decoration-color: currentColor;
}

button,
input,
textarea,
select {
    font: inherit;
}

:focus-visible {
    outline: 2px solid var(--ds-accent);
    outline-offset: 4px;
}

img,
video {
    max-width: 100%;
}

.shell,
.page-content {
    width: min(calc(100% - (var(--ds-gutter) * 2)), var(--ds-wide));
    margin-inline: auto;
}

.page-content:not(.page-content-wide) {
    max-width: var(--ds-content);
}

.site-rail {
    position: fixed;
    z-index: 30;
    inset: 0 auto 0 0;
    width: var(--ds-rail);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
    border-right: 1px solid var(--ds-line);
    background: var(--ds-bg);
    color: var(--ds-text-strong);
}

.site-rail-label {
    margin: 0;
    padding-left: 21px;
    font-family: var(--ds-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    line-height: var(--ds-rail);
    text-transform: uppercase;
    white-space: nowrap;
    transform: rotate(90deg);
    transform-origin: 0 0;
}

.site-rail-mark {
    width: var(--ds-rail);
    height: var(--ds-rail);
    display: grid;
    place-items: center;
    background: var(--ds-accent);
    color: #fff;
    font-family: var(--ds-mono);
    font-size: 1.1rem;
}

.site-rail-mark::before {
    content: "E";
}

/* Shared masthead */
header,
.site-header {
    position: relative;
    z-index: 20;
    width: auto;
    max-width: none;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    padding: 0 var(--ds-gutter);
    border-bottom: 1px solid var(--ds-line);
    background: var(--ds-bg-tint);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.masthead,
header > .title-row,
header > .tab-bar,
header > .site-search {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

.title-row {
    min-height: 126px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-gutter);
    padding: var(--ds-space-sm) 0;
    border-bottom: 1px solid var(--ds-line);
}

.large-title,
.brand {
    color: var(--ds-text-strong);
    font-family: var(--ds-display);
    font-size: var(--ds-display-md);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1;
    text-decoration: none;
}

.large-title a,
.brand {
    color: inherit;
    text-decoration: none;
}

.large-subtitle {
    max-width: 50rem;
    margin: 10px 0 0;
    color: var(--ds-muted);
    font-family: var(--ds-mono);
    font-size: var(--ds-small);
    letter-spacing: 0.025em;
    line-height: 1.35;
    text-transform: uppercase;
}

#theme-toggle {
    width: 46px;
    height: 46px;
    display: inline-grid;
    flex: 0 0 46px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--ds-line);
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    color: var(--ds-text-strong);
    cursor: pointer;
}

#theme-toggle:hover {
    border-color: var(--ds-text-strong);
    background: transparent;
}

#theme-toggle .theme-icon {
    width: 18px;
    height: 18px;
    display: block;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}

#theme-toggle .sun-icon,
#theme-toggle .moon-icon {
    font-family: var(--ds-mono);
    font-size: 0.85rem;
    line-height: 1;
}

.tab-bar,
.nav {
    min-height: 58px;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    margin: 0;
}

.tab-bar ul,
.nav-links {
    width: 100%;
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tab-bar li,
.nav-links a {
    display: flex;
    align-items: stretch;
}

.tab-bar a,
.nav-links a {
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 clamp(15px, 1.5vw, 28px);
    border: 0;
    border-right: 1px solid var(--ds-line);
    border-radius: 0;
    background: transparent;
    color: var(--ds-muted);
    font-family: var(--ds-mono);
    font-size: var(--ds-small);
    font-weight: 400;
    letter-spacing: 0.035em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
}

.tab-bar li:first-child a,
.nav-links a:first-child {
    border-left: 1px solid var(--ds-line);
}

.tab-bar a:hover,
.tab-bar a.selected,
.nav-links a:hover {
    border-color: var(--ds-line);
    background: var(--ds-bg);
    color: var(--ds-text-strong);
    text-decoration: none;
}

.tab-bar a.selected {
    box-shadow: inset 0 -4px 0 var(--ds-accent);
}

.site-search {
    position: relative;
    margin-top: 0;
    padding: var(--ds-space-xs) 0;
    border-top: 1px solid var(--ds-line);
}

.site-search-shell,
.search {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--ds-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.site-search-shell:focus-within,
.site-search.search-open .site-search-shell,
.search:focus-within {
    border-color: var(--ds-text-strong);
    background: transparent;
    box-shadow: none;
}

.site-search input,
.search input {
    color: var(--ds-text-strong);
    font-family: var(--ds-sans);
}

.site-search-shortcut,
.site-search-status,
.site-search-icon,
.search svg {
    color: var(--ds-muted);
}

/* Shared content rhythm */
main {
    width: auto;
    flex: 1;
}

.page-content {
    padding-top: var(--ds-space-lg);
    padding-bottom: var(--ds-space-lg);
}

.page-content > h1,
.page-content > h2,
.hero h1,
.story h2,
.catalog h2 {
    color: var(--ds-text-strong);
    font-family: var(--ds-display);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 1.05;
}

.page-content > h1,
.hero h1 {
    max-width: 13ch;
    font-size: var(--ds-display-xl);
}

.page-content > h2,
.story h2,
.catalog h2 {
    font-size: var(--ds-display-lg);
}

.eyebrow,
.year-divider,
#item-page-date,
.item-date,
.card-year,
.tag-page-count,
.about-summary-label,
.about-degree-period,
.about-teaching-period,
.about-certification-issuer,
.stat-label {
    color: var(--ds-muted);
    font-family: var(--ds-mono);
    font-size: var(--ds-small);
    font-weight: 400;
    letter-spacing: 0.035em;
    line-height: 1.35;
    text-transform: uppercase;
}

.divider,
.year-divider {
    border-color: var(--ds-line);
}

/* ezequiel.app */
.site-header .masthead {
    width: 100%;
}

.site-header .nav {
    justify-content: flex-end;
}

.site-header .nav-links {
    justify-content: flex-end;
}

.hero {
    padding: var(--ds-space-lg) 0;
    border-bottom: 1px solid var(--ds-line);
}

.hero-copy {
    max-width: 1060px;
}

.hero-title {
    align-items: flex-end;
    gap: var(--ds-gutter);
}

.memoji {
    width: clamp(72px, 8vw, 112px);
    height: clamp(72px, 8vw, 112px);
    border-radius: 0;
    filter: grayscale(1) contrast(1.08);
}

.hero-lead {
    max-width: 36em;
    margin-top: var(--ds-space-sm);
    color: var(--ds-text);
    font-size: var(--ds-body-lg);
    line-height: 1.45;
}

.hero-actions {
    margin-top: var(--ds-space-sm);
    gap: var(--ds-space-sm);
}

.plain-link,
.text-link {
    color: var(--ds-text-strong);
    font-family: var(--ds-mono);
    font-size: var(--ds-small);
    font-weight: 400;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.camera-roll {
    width: min(calc(100% - (var(--ds-gutter) * 2)), var(--ds-wide));
    padding: var(--ds-space-sm) 0 var(--ds-space-lg);
}

.photo-grid {
    gap: 1px;
    padding: 1px;
    background: var(--ds-line);
}

.photo-card {
    height: clamp(260px, 29vw, 480px);
    border-radius: 0;
    background: var(--ds-bg-tint);
}

.photo-card img {
    filter: saturate(0.82) contrast(1.04);
}

.story {
    gap: var(--ds-space-lg);
    padding-block: var(--ds-space-lg);
    border-color: var(--ds-line);
}

.story-copy > p {
    color: var(--ds-text);
    font-size: var(--ds-body-lg);
    line-height: 1.5;
}

.catalog {
    padding: var(--ds-space-lg) 0;
}

.catalog-heading {
    margin-bottom: var(--ds-space-sm);
    padding-bottom: var(--ds-space-sm);
    border-bottom: 1px solid var(--ds-line);
}

.catalog-heading > div > p:last-child {
    color: var(--ds-muted);
    font-size: var(--ds-body);
}

.app-list {
    column-gap: 0;
    border-left: 1px solid var(--ds-line);
}

.app-row {
    min-height: 142px;
    padding: var(--ds-space-xs);
    border-top: 0;
    border-right: 1px solid var(--ds-line);
    border-bottom: 1px solid var(--ds-line);
}

.app-row:nth-child(-n + 2) {
    border-top: 1px solid var(--ds-line);
}

.app-row > img {
    border-radius: 18%;
    box-shadow: none;
}

.app-details h3 {
    color: var(--ds-text-strong);
    font-family: var(--ds-display);
    font-size: 1.1rem;
}

.app-details p {
    color: var(--ds-muted);
}

.app-actions > a:not(.get) {
    color: var(--ds-accent);
    font-family: var(--ds-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
}

.get {
    min-width: 64px;
    min-height: 36px;
    border-color: var(--ds-text-strong);
    border-radius: 999px;
    color: var(--ds-text-strong);
    font-family: var(--ds-mono);
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
}

.get:hover {
    border-color: var(--ds-accent);
    background: var(--ds-accent);
    color: #fff;
}

/* ezefranca.com lists, cards, and long-form pages */
#item-list,
.entry-list,
.blog-list,
.projects-list {
    border-top: 1px solid var(--ds-line);
}

#item-list > li,
.entry-row,
.news-entry,
.news-line {
    border-color: var(--ds-line);
}

.item-title,
.news-title,
.blog-list h3 {
    font-family: var(--ds-display);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.description,
.news-description,
.blog-description {
    color: var(--ds-muted);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--ds-line);
    border-left: 1px solid var(--ds-line);
}

.project-entry,
.card,
.about-page .about-intro-card,
.about-page .about-section-card,
.about-page .about-summary-card,
.about-page .about-degree-card {
    border: 0;
    border-right: 1px solid var(--ds-line);
    border-bottom: 1px solid var(--ds-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.project-entry,
.card {
    min-height: 270px;
    padding: var(--ds-space-sm);
}

.project-entry:hover,
.card:hover,
.about-page .about-intro-card:hover,
.about-page .about-section-card:hover {
    transform: none;
    border-color: var(--ds-line);
    background: var(--ds-bg-tint);
    box-shadow: none;
}

.card-title,
.about-summary-title,
.about-degree-title,
.about-certification-title {
    color: var(--ds-text-strong);
    font-family: var(--ds-display);
    font-weight: 600;
    letter-spacing: -0.025em;
}

.card-title a,
.card-year,
.card-description,
.about-page .about-intro-copy,
.about-page .about-intro-copy p,
.about-page .content-inner,
.about-page .content-inner p,
.about-page .content-inner li,
.about-page .content-inner td,
.about-page .content-inner th,
.about-page .supervisors,
.about-page .cv-detail {
    font-family: var(--ds-sans) !important;
}

.card-title a {
    color: var(--ds-text-strong);
}

.card-year,
.card-description,
.card-disabled .card-title,
.card-disabled .card-title a,
.card-disabled .card-year,
.card-disabled .card-description {
    color: var(--ds-muted);
}

.card-icon {
    border-color: var(--ds-line);
    border-radius: 12px;
    background: var(--ds-bg-tint);
    opacity: 1;
}

.card-description,
.about-summary-copy,
.about-degree-context,
.about-certification-copy {
    color: var(--ds-muted);
    line-height: 1.5;
}

.card-emoji,
.card-icon {
    font-size: 2rem;
}

.card-link,
.card-link-secondary,
.about-degree-links a,
.about-summary-links a,
.about-certification-link {
    border: 0;
    border-bottom: 1px solid var(--ds-line);
    border-radius: 0;
    background: transparent;
    color: var(--ds-text-strong);
    font-family: var(--ds-mono);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.card-link:hover,
.card-link-secondary:hover,
.about-degree-links a:hover,
.about-summary-links a:hover,
.about-certification-link:hover {
    border-color: var(--ds-accent);
    background: transparent;
    color: var(--ds-accent);
}

.tag,
.all-tags a,
.tagsHome a {
    border-color: var(--ds-line);
    border-radius: 999px;
    background: transparent !important;
    color: var(--ds-muted) !important;
    font-family: var(--ds-mono);
    font-size: 0.72rem;
    font-weight: 400;
    text-transform: uppercase;
}

.tag:hover,
.all-tags a:hover,
.tagsHome a:hover {
    border-color: var(--ds-accent);
    color: var(--ds-accent) !important;
}

.segmented-control {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 0;
    border: 1px solid var(--ds-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.segmented-control label {
    min-height: 52px;
    border-right: 1px solid var(--ds-line);
    border-radius: 0;
    color: var(--ds-muted);
    font-family: var(--ds-mono);
    font-size: var(--ds-small);
    font-weight: 400;
    text-transform: uppercase;
}

.segmented-control label:nth-of-type(4) {
    border-right: 0;
}

.segmented-control input:checked + label {
    background: var(--ds-text-strong);
    color: var(--ds-bg);
}

.seg-slider {
    display: none;
}

.wrap-collapsible,
.wrap-collapsible-news,
.about-page .wrap-collapsible {
    border: 0;
    border-top: 1px solid var(--ds-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.lbl-toggle,
.lbl-toggle-year,
.about-page .lbl-toggle {
    min-height: 62px;
    padding: var(--ds-space-xs) 0;
    border-radius: 0;
    background: transparent;
    color: var(--ds-text-strong);
    font-family: var(--ds-mono);
    font-size: var(--ds-small);
    font-weight: 400;
    text-transform: uppercase;
}

.collapsible-content,
.about-page .collapsible-content {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

#item-page-content {
    max-width: var(--ds-content);
}

#item-page-content > p,
#item-page-content > ul,
#item-page-content > ol,
#page.page-content > p,
#page.page-content > ul,
#page.page-content > ol {
    color: var(--ds-text);
    font-family: var(--ds-sans) !important;
    font-size: var(--ds-body);
    line-height: 1.65;
}

#item-page-content h2,
#item-page-content h3,
#item-page-content h4,
#page.page-content h2,
#page.page-content h3 {
    color: var(--ds-text-strong);
    font-family: var(--ds-display);
    letter-spacing: -0.025em;
}

#item-page-content h2,
#page.page-content h2 {
    margin-top: var(--ds-space-lg);
    padding-top: var(--ds-space-xs);
    border-top: 1px solid var(--ds-line);
}

#item-page-content blockquote {
    margin-left: 0;
    padding: var(--ds-space-sm);
    border: 0;
    border-left: 5px solid var(--ds-accent);
    border-radius: 0;
    background: var(--ds-bg-tint);
}

#item-page-content pre,
#item-page-content table,
#item-page-content iframe,
#item-page-content video,
.content-gallery,
.hobby-gallery {
    border-color: var(--ds-line);
    border-radius: 0;
    box-shadow: none;
}

.post-navigation,
.post-comments {
    border-color: var(--ds-line);
}

/* Shared footer */
footer {
    width: auto;
    padding: var(--ds-space-md) var(--ds-gutter);
    border-top: 1px solid var(--ds-line);
    background: var(--ds-bg-tint);
    color: var(--ds-muted);
}

.footer-inner,
#footer-content {
    width: 100%;
    max-width: none;
    margin: 0;
}

.footer-note,
.footer-credits,
.footer-inner,
footer a {
    font-family: var(--ds-mono);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
}

.social-icon {
    border: 1px solid var(--ds-line);
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
}

@media (max-width: 900px) {
    :root {
        --ds-rail: 0px;
    }

    body > header,
    body > main,
    body > footer {
        margin-left: 0;
    }

    .site-rail {
        display: none;
    }

    header,
    .site-header {
        padding-inline: var(--ds-gutter);
    }

    .title-row {
        min-height: 108px;
    }

    .story {
        gap: var(--ds-space-sm);
    }
}

@media (max-width: 760px) {
    .shell,
    .page-content,
    .camera-roll {
        width: min(calc(100% - (var(--ds-gutter) * 2)), 680px);
    }

    .tab-bar,
    .nav {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .tab-bar::-webkit-scrollbar,
    .nav::-webkit-scrollbar {
        display: none;
    }

    .tab-bar ul,
    .nav-links {
        width: max-content;
        min-width: 100%;
    }

    .tab-bar a,
    .nav-links a {
        white-space: nowrap;
    }

    .site-header .nav-links a:first-child,
    header .tab-bar li:first-child {
        display: flex;
    }

    .photo-grid {
        background: transparent;
    }

    .photo-card,
    .photo-card-wide {
        border: 1px solid var(--ds-line);
    }

    .app-list,
    .card-grid {
        grid-template-columns: 1fr;
    }

    .app-row:nth-child(2) {
        border-top: 0;
    }

    .segmented-control {
        grid-template-columns: repeat(2, 1fr);
    }

    .segmented-control label:nth-of-type(2) {
        border-right: 0;
    }

    .segmented-control label:nth-of-type(-n + 2) {
        border-bottom: 1px solid var(--ds-line);
    }
}

@media (max-width: 520px) {
    .title-row {
        min-height: 94px;
    }

    .large-subtitle {
        max-width: 20rem;
    }

    .hero-title {
        align-items: flex-start;
        flex-direction: column-reverse;
    }

    .memoji {
        width: 72px;
        height: 72px;
    }

    .app-row {
        min-height: 124px;
    }

    #footer-content,
    .footer-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--ds-space-xs);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}