/* Composition follows the latest mockup. Side-note text lives in index.html. */

/* =========================================================
   ROOT & GLOBALS
   ========================================================= */
:root {
    --paper:#dedfe0;
    --ink:#F1F2F1;
    --muted:#707475;
    --accent:#E9C493;
    --left:10.8vw;
    --right:8vw
}

* {
    box-sizing:border-box
}

body {
    margin:0;
    color:var(--ink);
    font-family:Arial,Helvetica,sans-serif;
    background:radial-gradient(ellipse at 68% 24%,#162431 0,transparent 58%),radial-gradient(ellipse at 16% 51%,#162431 0,transparent 64%),#162431;
    -webkit-font-smoothing:antialiased
}

::selection {
    background:var(--accent);
    color:white
}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */
.micro {
    font-family:Consolas,'Liberation Mono',monospace;
    font-size:clamp(8px,.76vw,11px);
    font-weight:400;
    line-height:1.7;
    letter-spacing:.22em
}

/* =========================================================
   MASTHEAD & RV MONOGRAM
   ========================================================= */
.masthead {
    position:absolute;
    left:7.6vw;
    top:4.4vh;
    z-index:3
}

.masthead p {
    margin:14px 0 0
}

.monogram {
    width:48px;
    height:43px;
    display:block;
    overflow:visible
}

.monogram path {
    fill:none;
    stroke:var(--ink);
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round
}

/* =========================================================
   ANALOG CLOCK
   ========================================================= */
.clock {
    position:fixed;
    right:3.2vw;
    top:4.1vh;
    width:11.7vw;
    max-width:180px;
    min-width:90px;
    z-index:10
}

.clock svg {
    display:block;
    width:100%;
    overflow:visible
}

.clock-face {
    fill:#162431;
    fill-opacity: 1;
    stroke:#FFFFFF;
    stroke-width:.35
}

.ticks {
    stroke:#FFFFFF;
    stroke-width:.35
}

.clock-numbers {
    font-size:7.5px;
    text-anchor:middle;
    fill:var(--ink)
}

.hand {
    stroke:var(--ink);
    stroke-linecap:round;
    transform-origin:50px 50px
}

.hour {
    stroke-width:1.8
}

.minute {
    stroke-width:1.2
}

.second {
    stroke:var(--accent);
    stroke-width:.5
}

.clock-pin {
    fill:var(--ink)
}

.clock-location {
    position: fixed;
    top: calc(4.1vh + 12vw);
    right: 3.2vw;
    width: 11.7vw;
    max-width: 180px;
    min-width: 90px;

    margin-top: -50px;

    font-size: clamp(8px, .76vw, 11px);
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-align: center;

    color: var(--ink);
    z-index: 10;
}

/* =========================================================
   LEFT SIDE RAIL
   ========================================================= */
.rail {
    position:absolute;
    left:2.9vw;
    top:4vh;
    height:91vh;
    display:flex;
    align-items:center;
    gap:20px;
    font-size:clamp(7px,.76vw,11px);
    writing-mode:vertical-rl;
    z-index:2
}

.rail span {
    transform:rotate(180deg);
    padding:2px 0
}

.rail i {
    width:1px;
    background:#85898a;
    flex:1
}

.rail i:first-child {
    flex:2.7
}

.rail i:nth-child(3) {
    flex:3.6
}

/* =========================================================
   HERO
   ========================================================= */
main {
    position:relative;
    height:100vh;
    isolation:isolate
}

.hero {
    position:absolute;
    left:var(--left);
    right:var(--right);
    top:30.3vh
}

.title-wrap {
    animation:arrive 1.4s ease both
}

h1 {
    margin:0;
    font-size:13.8vw;
    font-weight:400;
    letter-spacing:-.025em;
    line-height:.98;
    white-space:nowrap
}

.accent {
    color:transparent;
    position:relative;
    display:inline-block;
    width:.19em
}

.accent:after {
    content:'';
    position:absolute;
    width:.135em;
    height:.135em;
    border-radius:50%;
    background:var(--accent);
    left:.025em;
    bottom:.15em
}

.title-caption {
    font-size:clamp(9px,.98vw,14px);
    color:var(--muted);
    letter-spacing:.22em;
    margin:2.6vh 0 0;
    line-height:1.7
}

/* =========================================================
   INTERESTS / CATEGORIES
   ========================================================= */
.interests {
    position:absolute;
    left:11.7vw;
    top:max(61.6vh,calc(31.6vh + 13.53vw + 11vh));
    right:var(--right)
}

.category-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:3vw;
    width:44vw
}

.category h2 {
    margin:0;
    font-size:clamp(10px,.98vw,15px);
    font-weight:500;
    letter-spacing:.12em;
    transition:transform .5s ease
}

.category h2:after {
    content:'';
    display:block;
    width:16px;
    height:1px;
    background:var(--ink);
    margin-top:14px;
    transition:width .5s ease
}

.category:hover h2,.category:focus-within h2 {
    transform:translateY(-2px)
}

.category:hover h2:after,.category:focus-within h2:after {
    width:24px
}

.category {
    animation:arrive 1.3s ease both;
    animation-delay:.15s
}

.category:nth-child(2) {
    animation-delay:.22s
}

.category:nth-child(3) {
    animation-delay:.29s
}

.category:nth-child(4) {
    animation-delay:.36s
}

.project-content:empty {
    display:none
}

.project-content {
    font-size:14px;
    line-height:1.6;
    margin-top:20px
}

.project-content img {
    width:100%;
    height:auto
}

.project-content a {
    color:inherit;
    text-underline-offset:4px
}

/* =========================================================
   DECORATIVE THREAD / LINE
   ========================================================= */
.thread {
    position:absolute;
    bottom:10vh;
    left:0;
    width:100%;
    height:20vh;
    pointer-events:none;
    z-index:-1;
    animation:drift 22s ease-in-out infinite alternate
}

.thread path {
    fill:none;
    stroke:#aeb2b4;
    stroke-width:1;
    vector-effect:non-scaling-stroke
}

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

/* =========================================================
   ANIMATIONS
   ========================================================= */
@keyframes arrive {
    from {
        opacity:0;
        transform:translateY(7px)
    }
    to {
        opacity:1;
        transform:translateY(0)
    }
}

@keyframes drift {
    from {
        transform:translateY(-3px)
    }
    to {
        transform:translateY(3px)
    }
}

/* Short desktop windows retain the whole composition without clipping text. */

/* =========================================================
   RESPONSIVE — SHORT DESKTOP WINDOWS
   ========================================================= */
@media(min-width:701px) and (max-height:650px) {
    .hero {
        top:29vh
    }
    h1 {
        font-size:min(13.8vw,24vh)
    }
    .title-caption {
        margin-top:3vh
    }
    .interests {
        top:70vh
    }
    .thread {
        bottom:2vh;
        height:17vh
    }
    .masthead {
        top:4vh
    }
    .monogram {
        height:32px;
        width:38px
    }
    .masthead p {
        margin-top:5px
    }
    .clock {
        width:min(11.7vw,23vh)
    }
}

/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */
@media(max-width:700px) {
    :root {
        --left:12vw;
        --right:6vw
    }
    .masthead {
        top:28px;
        left:12vw
    }
    .monogram {
        width:38px;
        height:35px
    }
    .masthead p {
        font-size:8px;
        margin-top:12px
    }
    .clock {
        top:24px;
        right:5vw;
        width:23vw
    }
    .rail {
        left:5vw;
        top:28px;
        height:calc(100% - 60px);
        gap:16px;
        font-size:7px
    }
    body {
        position:relative
    }
    main {
        height:auto;
        min-height:max(100svh,720px);
        padding-top:260px;
        padding-bottom:245px
    }
    .hero {
        position:relative;
        top:auto;
        left:auto;
        right:auto;
        margin:0 var(--right) 0 var(--left)
    }
    h1 {
        font-size:13.5vw;
        letter-spacing:-.035em
    }
    .title-caption {
        font-size:8px;
        letter-spacing:.14em;
        line-height:1.9;
        margin-top:25px;
        max-width:290px
    }
    .interests {
        position:relative;
        top:auto;
        left:auto;
        right:auto;
        margin:55px var(--right) 0 var(--left)
    }
    .category-grid {
        width:100%;
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:10px
    }
    .category h2 {
        font-size:9px;
        letter-spacing:.12em
    }
    .category h2:after {
        margin-top:16px;
        width:14px
    }
    .thread {
        bottom:55px;
        height:130px
    }
    .project-content {
        font-size:11px;
        overflow-wrap:anywhere
    }
    .clock-location {
        right: 5vw;
        width: 23vw;
        min-width: 0;
        max-width: none;
        margin-top: 50px;
        text-align: center;
    }
}

/* =========================================================
   ACCESSIBILITY — REDUCED MOTION
   ========================================================= */
@media(prefers-reduced-motion:reduce) {
    *,*:before,*:after {
        animation:none!important;
        transition:none!important
    }
}