/* -------------------- CSS BY CHRISTINA CARRASQUILLA 2026 -------------------- */

/* ---------------------------------------- CSS RESET ---------------------------------------- */
/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* -------------------- HTML5 display-role reset for older browsers -------------------- */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ---------------------------------------- ROOT VARIABLES ---------------------------------------- */
:root {
	--ASU-blue: #00a3e0;
    --ASU-gray1:#191919;
    --ASU-gray5: #d0d0d0;
    --ASU-gold: #ffc627;
    --ASU-white: #FFFFFF;
    --ASU-black: #000000; 
}
/* ---------------------------------------- GLOBAL STYLES ----------------------------------------*/
/* -------------------- BODY - HTML -------------------- */
* {
    box-sizing:border-box;
}
body {
    display: grid;
    grid-template-columns: 1fr;
    position: relative;
    font-family: Arial, Helvetica, “Nimbus Sans L”, “Liberation Sans”, FreeSans, sans-serif;
    min-width:337px;
    background-color:var(--ASU-white);
    background-image:
        linear-gradient(rgba(120, 120, 120, 0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 120, 120, 0.10) 1px, transparent 1px);
    background-size: 24px 24px;
    background-position: top left;
}
html, body {
    overflow-x: hidden;
    max-width: 100%;
}
/* -------------------- SR-ONLY -------------------- */
.sr-only {
    position: absolute;
    transform: translateY(-100%);
    background:var(--ASU-gold);
    padding: 1rem;
    position: absolute;
    transition: transform 0.3s;
    font-size:1rem;
    color:var(--ASU-black);
}
.sr-only:focus {
    transform: translateY(0%);
    outline:.25rem solid var(--ASU-white);
}
/* -------------------- HEADER -------------------- */
header {
    background-color: var(--ASU-black);
    color:var(--ASU-white);
    padding-bottom: 2rem;
}
/* -------------------- NAV -------------------- */
nav {
    position: relative;
    background-color:rgba(255,255,255,.65)
}
nav label {
    cursor: pointer;
    display: inline-block;
    padding: 2rem 0 0;
    user-select: none;
}
nav label span {
    background-color: var(--ASU-gray1);
    display: block;
    height: 0.25rem;
    position: relative;
    transition: background-color 0.3s ease-out;
    width: 2rem;
}
nav label span::before, nav label span::after {
    background: var(--ASU-gray1);
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
    transition: all 0.2s ease-out;
}
nav label span::before {
    top: 0.75rem;
}
nav label span::after {
    top: -0.75rem;
}
nav input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
nav ul {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.25rem;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s ease;
    list-style:none;
}
nav input:checked ~ ul {
    max-height: 500px;
}
nav input:checked ~ label span {
    background: transparent;
}
nav input:checked ~ label span::before {
    transform: rotate(-45deg);
    top: 0;
}
nav input:checked ~ label span::after {
    transform: rotate(45deg);
    top: 0;
}
nav li {
    font-size: 1em;
    line-height:2;
}
nav li a {
    color: var(--ASU-gray1);
    font-size: 1.25em;
    line-height: inherit;
    text-decoration: none;
    display: inline-block;
    position: relative;
    width: 90%;
    padding: 0.5rem 0.5rem 0.75rem;
}
nav li a::after {
    content: "";
    position: absolute;
    left: 0.5rem;
    bottom: 0.2rem;
    width: calc(100% - 1rem);
    height: .5rem;
    background-color: var(--ASU-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}
nav li a:hover::after, nav li a:focus-visible::after {
    transform: scaleX(1);
}
nav li a#active::after, nav li a.active::after {
    transform: scaleX(1);
}
nav li a:focus-visible {
    outline: .5rem solid var(--ASU-gold);
    outline-offset: 4px;
}
nav li a:hover, main a:hover, #contact a:hover {
    transform: none;
}
nav svg, main svg {
    display:inline;
    position:relative;
    top:.75rem;
}
#back-to-top {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    display: inline-block;
    border-radius:1rem;
    text-decoration: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    background-color:var(--ASU-white);
}
#back-to-top.show {
    opacity: 1;
    pointer-events: auto;
}
#back-to-top:hover {
    background-color:var(--ASU-gold);
}

/* -------------------- .WRAPPER -------------------- */
.wrapper {
    width: 90%;
    max-width: 1080px;
    margin: 0 auto;
}
/* -------------------- #QUOTE -------------------- */
#quote {
    padding:2rem 0;
}
/* -------------------- MAIN -------------------- */
main section {
    padding:2rem 0;
}
.gray {
    background-color: rgba(208,208,208,.35);
}
.card section, .card div, .leadership section  {
    background-color: var(--ASU-blue);
    margin: .5rem;
    border-radius: .5rem;
    color:var(--ASU-gray1);
    padding: 1rem;
}
.gold {
    background-color:var(--ASU-gold);
}
main a strong {
    position:relative;
    top:.75rem;
}
table {
    margin: 1rem auto;
    border-collapse:collapse;
}
th {
    font-weight: bold;
}
th, td {
    padding:.5rem 1rem;
    border:1px solid var(--ASU-gray1);
}
/* -------------------- FOOTER -------------------- */
footer {
    background-color: var(--ASU-blue);
    color: var(--ASU-black);
    padding: 1rem 0;
}
footer div div {
    margin-top:3rem;
}
footer a {
    margin: 1.5rem 0;
}
a[href="mailto:christina.carrasquilla@asu.edu"]  {
    margin: 1.5rem 0;
    max-width: 20rem;
}
/* -------------------- #CONTACT -------------------- */
#contact svg:hover {
    fill: var(--ASU-gold);
}
#contact a {
    background-color: transparent;
    padding: 0;
    display: inline-block;
}
/* -------------------- ELEMENTS -------------------- */
h1, h2, h3, h4, table caption {
    font-family: Arial;
    font-weight:700;
}
h1 {
    font-size:2em;
    padding: 3rem 0;
    letter-spacing:-1px;
}
h1 span {
    font-size:.85em;
    font-weight:normal;
}
h2 {
    font-size: 1.5em;
    padding: 1rem 0;
    line-height:1.25;
    letter-spacing:-.75px;
}
h3, h4, table caption {
    font-size: 1.25em;
    padding: 1rem 0;
    font-weight:600;
}
p {
    line-height: 1.5;
    font-size: 1em;
    color: var(--ASU-gray1);
    padding-bottom:.5rem;
}
ul {
    list-style:disc;
    margin-left:3rem;
}
ol {
    list-style:decimal;
    margin:1rem 0 1rem 1rem;
}
ul, iframe {
    padding: 1rem 0;
}
li {
    line-height: 1.5;
    font-size: 1em;
    color: var(--ASU-gray1);
}
q {
    display: block;
    font-size: 1.5em;
    line-height: 1.5;
    padding: 1rem 0;
    color: var(--ASU-gray1);
}
i {
    font-style:italic;
}
dl {
    background-color:var(--ASU-black);
    color:var(--ASU-white);
    padding:.5rem;
    border-radius:.25rem;
    line-height:1.25;
}
dt {
    font-weight:bold;
    padding-right:.5rem;
}
small {
    font-size:.75em;
    margin:2rem 0;
}
small a {
    color:var(--ASU-white);
}
small a:visited {
    color:var(--ASU-gray1);
}
.cta {
    display:inline-block;
    background-color:var(--ASU-white);
    color:var(--ASU-black);
    text-decoration:none;
    border-radius: .5rem;
    padding:.5rem;
    margin-top:.5rem;
    font-weight:bold;
}
.cta svg {
    top:0;
}
.cta:hover {
    background-color:var(--ASU-gold);
}
strong {
    font-weight:bold;
}
.highlight {
    font-weight:600;
    background-color:var(--ASU-gold);
    border-radius:.2rem;
    color:var(--ASU-gray1);
    padding:.25em 0;
    line-height:2;
}
.activates {
    font-weight:bold;
    font-style:italic;
}
svg {
    max-width: 100%;
    height: auto;
    display: block;
}
.hide {
    visibility:hidden;
    height:1px;
}
/* -------------------- READ -------------------- */
menu {
    background-color:var(--ASU-blue);
    list-style:none;
    display:grid;
    grid-template-columns:1fr;
    gap:.5rem;
    padding:.5rem;
    border-radius:.5rem 0 0 .5rem;
    position:fixed;
    bottom:4rem;
    right:0;
}
.reading-tools li {
    padding:0 .5rem 1rem .5rem;
}
.reading-tools a {
    text-decoration: none;
    cursor: pointer;
}
.reading-tools path:hover{
    fill:var(--ASU-black);
}
#paper-title {
    font-size:2em;
    line-height:1.5;
}
article a {
    color:var(--ASU-blue);
}
article a:hover {
    color:var(--ASU-gold);
}
article a:visited {
    color:var(--ASU-blue);
} 
/* -------------------- LISTEN -------------------- */
#tagline {
    font-weight:400;
}
.season {
    display:grid;
    grid-template-columns:1fr;
    gap:1rem;
}
.season section {
    border:1px solid var(--ASU-gray1);
    border-radius:1rem;
    background-color: rgba(208,208,208,.35);
    padding:1rem;
}
.date {
    text-transform:uppercase;
    font-size:1em;
    color:var(--ASU-blue);
    font-weight:600;
}
/* -------------------- LISTEN -------------------- */
.details {
    display:flex;
    gap:1rem;
}
/* ---------------------------------------- MEDIA QUERY FOR SMALL STYLES---------------------------------------- */
@media screen and (min-width:550px) {
    .card, .leadership {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 1rem;
    }
    .card section:last-child:nth-child(odd) {
        grid-column: span 2;
    }
    footer .wrapper {
        display: grid;
        grid-template-columns: 2fr 1fr;
    }
    #contact {
        text-align: right;
    }
}
/* ---------------------------------------- MEDIA QUERY FOR MEDIUM STYLES---------------------------------------- */
@media screen and (min-width:730px) {
    nav ul {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        overflow:visible;
        position:relative;
        bottom:3rem;
    }
    label, label span, input {
        visibility:hidden;
        height:0;
    }
    dl {
        display:flex;
    }
}
/* ---------------------------------------- MEDIA QUERY FOR LARGE STYLES ---------------------------------------- */
@media screen and (min-width:900px) {
    header .wrapper {
        display:flex;
    }
    header svg {
        padding-right: 1rem;
    }
    .card {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .card section:last-child:nth-child(odd) {
        grid-column: span 1;
    }
    .leadership {
        grid-template-columns:1fr 1fr 1fr 1fr;
    }
    .design-areas {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:1rem;
    }
    .design-areas section {
        background-color:rgba(208,208,208,.35);
        border:1px solid var(--ASU-gray1);
        border-radius:.5rem;
        padding:1rem;
    }
    .case-study section {
        background-color:rgba(255,255,255,.65);
    }
    .season {
    display:grid;
    grid-template-columns:1fr 1fr;
}
}
/* ---------------------------------------- MEDIA QUERY FOR PRINT ---------------------------------------- */
@media print {
    header, nav, main section:first-of-type, #back-to-top, footer, .sr-only {
        display: none;
    }
    html, body {
        overflow:visible !important;
    }
    body {
        background: none !important;
        margin: 0.5in;
        display:block;
        font-size: 12pt;
        line-height: 1.5;
        color: black;
        font-family:'Times New Roman', Times, serif;
    }
    .wrapper {
        width: 100%;
        max-width: none;
    }
}