/* =============================================================
   Ryan J. Mattana — portfolio stylesheet
   Aesthetic: newsprint minimalism / aerospace line-art
   -------------------------------------------------------------
   Aged-paper background, ink text. Photos render in full colour.
   Jost for display type, Inter for body, Fira Code for technical
   labels and callouts.
   ============================================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Jost:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap");

:root {
    /* Newsprint palette ----------------------------------- */
    --newsprint:    #faf7ee;   /* page background — aged paper */
    --newsprint-2:  #f6f2e6;   /* recessed panels / chips */
    --black:        #faf7ee;   /* legacy alias for the page background */
    --ink:          #101114;   /* primary text */
    --steel:        #3d4046;   /* secondary text */
    --slate:        #6b6f76;   /* tertiary text */
    --slate-soft:   #9aa0a6;   /* muted / inactive nav */
    --line:         rgba(16, 17, 20, 0.10);
    --line-strong:  rgba(16, 17, 20, 0.22);
    --line-dark:    rgba(16, 17, 20, 0.10);
    --paper:        #101114;   /* legacy alias: now the text color */
    --paper-soft:   #f6f2e6;
    --bone:         #6b6f76;
    --wash:         #faf7ee;

    /* Typography ----------------------------------------- */
    --font-sans:    "Inter", ui-sans-serif, system-ui, -apple-system,
                    BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: "Jost", "Inter", ui-sans-serif, system-ui, sans-serif;
    --font-mono:    "Fira Code", ui-monospace, "SF Mono", Menlo, Consolas,
                    "Liberation Mono", monospace;

    /* Layout --------------------------------------------- */
    --max:          1180px;
    --gutter:       clamp(20px, 5vw, 72px);
    --radius:       2px;
    --radius-sm:    2px;
    --radius-lg:    3px;
    --shadow-glow:  none;
    --shadow-soft:  none;
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 40px;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 300;
    color: var(--ink);
    background: var(--newsprint);
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* The old starfield canvas is retired in the light theme. */
.starfield { display: none !important; }

img { max-width: 100%; display: block; }

a {
    color: var(--ink);
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

::selection { background: var(--ink); color: #fff; }

/* =============================================================
   Shared primitives
   ============================================================= */

.wrap {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.mono {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--slate-soft);
    font-weight: 400;
}

.rule {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 0;
}

/* Thin aerospace hairline with a tick at each end — used as a divider. */
.hairline {
    position: relative;
    height: 1px;
    background: var(--line);
    margin: 56px 0;
}
.hairline::before,
.hairline::after {
    content: "";
    position: absolute;
    top: -3px;
    width: 1px;
    height: 7px;
    background: var(--line-strong);
}
.hairline::before { left: 0; }
.hairline::after  { right: 0; }

/* =============================================================
   Header — centered name, nav row beneath
   ============================================================= */

.site-header {
    padding: clamp(40px, 6vw, 72px) var(--gutter) 0;
    text-align: center;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    justify-content: center;
}

.brand-mark {
    width: 22px;
    height: 22px;
    opacity: 0.5;
}

.brand-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 3.4vw, 2.15rem);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink);
    line-height: 1.1;
}

.brand-sub {
    display: block;
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--slate-soft);
}

.nav-links {
    margin: clamp(28px, 4vw, 46px) 0 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(20px, 4vw, 56px);
}

.nav-links a {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.19em;
    text-transform: uppercase;
    color: var(--slate-soft);
    padding-bottom: 4px;
    border-bottom: 1px solid transparent;
}

.nav-links a:hover { color: var(--steel); }

.nav-links a.is-active {
    color: var(--ink);
    font-weight: 500;
}

/* Legacy theme toggle is hidden — the site is one deliberate palette now. */
.theme-toggle { display: none !important; }

/* =============================================================
   Page scaffolding
   ============================================================= */

main {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: clamp(48px, 7vw, 88px) var(--gutter) 0;
}

.page-head {
    margin-bottom: clamp(36px, 5vw, 60px);
}

.page-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.9rem, 4.4vw, 2.9rem);
    letter-spacing: 0.02em;
    line-height: 1.15;
    margin: 10px 0 0;
    color: var(--ink);
}

.page-intro {
    max-width: 62ch;
    margin: 18px 0 0;
    font-size: 1.02rem;
    color: var(--steel);
}

.section {
    margin: 0 0 clamp(56px, 8vw, 96px);
}

.section-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.28rem;
    letter-spacing: 0.06em;
    margin: 0 0 6px;
    color: var(--ink);
}

.section-lede {
    max-width: 60ch;
    margin: 0 0 30px;
    color: var(--slate);
    font-size: 0.95rem;
}

.section-head {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding-bottom: 14px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--line);
}

.section-head .mono { margin-left: auto; white-space: nowrap; }

/* =============================================================
   HOME — portrait left, intro right
   ============================================================= */

.home-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
    gap: clamp(36px, 6vw, 84px);
    align-items: start;
    padding-bottom: clamp(60px, 9vw, 110px);
}

.portrait {
    position: relative;
}

.portrait img {
    width: 100%;
    height: auto;
}

/* Faint corner registration marks around the portrait — drafting-table feel */
.portrait::before,
.portrait::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border: 1px solid var(--line-strong);
    pointer-events: none;
}
.portrait::before {
    top: -9px; left: -9px;
    border-right: 0; border-bottom: 0;
}
.portrait::after {
    bottom: -9px; right: -9px;
    border-left: 0; border-top: 0;
}

.portrait-caption {
    margin-top: 14px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.home-copy p {
    font-size: clamp(1.02rem, 1.5vw, 1.17rem);
    line-height: 1.75;
    color: var(--steel);
    margin: 0 0 1.35em;
    max-width: 46ch;
}

.home-copy p:first-child { margin-top: -0.35em; }

.home-copy strong {
    font-weight: 500;
    color: var(--ink);
}

.social-row {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 34px;
}

.social-row a {
    display: inline-flex;
    color: var(--slate-soft);
}

.social-row a:hover { color: var(--ink); }

.social-row svg {
    width: 21px;
    height: 21px;
    fill: currentColor;
}

.home-facts {
    margin-top: 44px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 28px;
}

.home-fact .mono { display: block; margin-bottom: 3px; }
.home-fact span.val {
    font-size: 0.92rem;
    color: var(--steel);
}

/* Thin flight-path line drawn under the home block */
.flightline {
    display: block;
    width: 100%;
    height: 46px;
    margin-top: -10px;
    opacity: 0.5;
}
.flightline path,
.flightline line {
    fill: none;
    stroke: var(--line-strong);
    stroke-width: 1;
}
.flightline .dash { stroke-dasharray: 3 6; }

/* =============================================================
   Cards — projects, playground, experience
   ============================================================= */

.card-list {
    display: grid;
    gap: 0;
}

.entry {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    gap: clamp(20px, 4vw, 48px);
    padding: 34px 0;
    border-top: 1px solid var(--line);
}

.entry:last-child { border-bottom: 1px solid var(--line); }

.entry-aside .mono { display: block; }
.entry-aside .code {
    color: var(--ink);
    font-weight: 500;
}
.entry-aside .dates { margin-top: 8px; }
.entry-aside .place { margin-top: 4px; }

.entry-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.24rem;
    letter-spacing: 0.01em;
    margin: 0;
    color: var(--ink);
}

.entry-subtitle {
    margin: 4px 0 0;
    font-size: 0.93rem;
    color: var(--slate);
}

.entry-summary {
    margin: 14px 0 0;
    max-width: 66ch;
    color: var(--steel);
    font-size: 0.98rem;
}

.entry-bullets {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    max-width: 72ch;
}

.entry-bullets li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 9px;
    font-size: 0.95rem;
    color: var(--steel);
}

.entry-bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 9px;
    height: 1px;
    background: var(--line-strong);
}

/* Metric strip */
.metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 22px 0 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.metric {
    flex: 1 1 140px;
    padding: 14px 20px 14px 0;
}

.metric + .metric {
    padding-left: 20px;
    border-left: 1px solid var(--line);
}

.metric .value {
    display: block;
    font-family: var(--font-display);
    font-size: 1.32rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.2;
}

.metric .label {
    display: block;
    margin-top: 2px;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--slate-soft);
}

/* Tags */
.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 18px;
}

.tag {
    font-family: var(--font-mono);
    font-size: 0.63rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--slate);
    border: 1px solid var(--line);
    padding: 4px 9px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

/* Action links */
.entry-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 20px;
    align-items: center;
}

.link-btn {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--steel);
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 2px;
    background: none;
    border-left: 0; border-right: 0; border-top: 0;
    cursor: pointer;
    font-weight: 400;
}

.link-btn:hover { color: var(--ink); border-color: var(--ink); }

.link-list {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.link-list li { margin-bottom: 6px; }

.link-list a {
    font-size: 0.9rem;
    color: var(--steel);
    border-bottom: 1px solid var(--line);
    padding-bottom: 1px;
}
.link-list a:hover { color: var(--ink); border-color: var(--ink); }

/* =============================================================
   Grids — competencies, playground, interests, facts
   ============================================================= */

.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}

.grid-3 > * {
    background: var(--newsprint);
    padding: 26px 24px;
}

.tile-icon {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--slate-soft);
    margin-bottom: 12px;
}

.tile-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.06rem;
    margin: 0 0 8px;
    color: var(--ink);
}

.tile-body {
    font-size: 0.92rem;
    color: var(--steel);
    margin: 0 0 16px;
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chip {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    color: var(--slate);
    background: var(--paper-soft);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.fact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px 32px;
}

.fact .mono { display: block; margin-bottom: 4px; }
.fact strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.02rem;
    color: var(--ink);
}
.fact span {
    font-size: 0.9rem;
    color: var(--slate);
}

.plain-list {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 2;
    column-gap: 40px;
}

.plain-list li {
    break-inside: avoid;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.94rem;
    color: var(--steel);
}

/* Interest rows that open the media panel */
.interest-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    cursor: default;
}

.interest-row[data-media] { cursor: pointer; }
.interest-row[data-media]:hover .interest-label { color: var(--ink); }

.interest-label {
    font-size: 0.97rem;
    color: var(--steel);
}

/* =============================================================
   Contact
   ============================================================= */

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin-bottom: 44px;
}

.contact-cell {
    background: var(--newsprint);
    padding: 26px 24px;
}

.contact-cell .mono { display: block; margin-bottom: 8px; }

.contact-cell a,
.contact-cell span.val {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 400;
    color: var(--ink);
    word-break: break-word;
}

.contact-cell a { border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; }
.contact-cell a:hover { border-color: var(--ink); }

/* =============================================================
   Footer
   ============================================================= */

.site-footer {
    margin-top: clamp(60px, 9vw, 110px);
    border-top: 1px solid var(--line);
    padding: 32px var(--gutter) 48px;
}

.footer-inner {
    max-width: var(--max);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

.footer-links a,
.site-footer .tag,
.site-footer span {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--slate-soft);
}

.footer-links a:hover { color: var(--ink); }

/* =============================================================
   Media preview panel (shared) — restyled light
   ============================================================= */

.media-panel {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: min(420px, calc(100vw - 48px));
    max-height: min(72vh, 620px);
    overflow-y: auto;
    background: var(--newsprint);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: 22px 22px 24px;
    box-shadow: 0 18px 50px rgba(16, 17, 20, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
    z-index: 60;
}

.media-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.panel-kicker {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--slate-soft);
}

.media-panel h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.1rem;
    margin: 6px 0 6px;
    color: var(--ink);
}

.media-panel p {
    font-size: 0.9rem;
    color: var(--steel);
    margin: 0 0 16px;
}

.panel-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.panel-grid figure { margin: 0; }

.panel-grid img {
    width: 100%;
    height: 108px;
    object-fit: cover;
    border: 1px solid var(--line);
    transition: opacity 0.25s ease;
}

.panel-grid figure:hover img { opacity: 0.88; }

.panel-grid figcaption {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.06em;
    color: var(--slate-soft);
    margin-top: 5px;
    line-height: 1.4;
}

.panel-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: 0;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--slate-soft);
    cursor: pointer;
}
.panel-close:hover { color: var(--ink); }

/* =============================================================
   Fade-in on scroll
   ============================================================= */

.fade-in {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .fade-in { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

/* =============================================================
   Responsive
   ============================================================= */

@media (max-width: 880px) {
    .home-grid { grid-template-columns: 1fr; }
    .portrait { max-width: 380px; }
    .entry { grid-template-columns: 1fr; gap: 14px; }
    .entry-aside { display: flex; flex-wrap: wrap; gap: 6px 18px; }
    .entry-aside .dates,
    .entry-aside .place { margin-top: 0; }
    .plain-list { columns: 1; }
    .metric + .metric { padding-left: 0; border-left: 0; }
    .metric { flex: 1 1 100%; padding: 10px 0; border-top: 1px solid var(--line); }
    .metric:first-child { border-top: 0; }
}

@media (max-width: 620px) {
    .nav-links { gap: 16px; }
    .nav-links a { font-size: 0.78rem; letter-spacing: 0.14em; }
    .home-facts { grid-template-columns: 1fr; }
    .media-panel { right: 12px; left: 12px; bottom: 12px; width: auto; }
    .footer-inner { justify-content: flex-start; }
}