/* ----------------------------------------------------
   FINDING MY STORY
   Prototype 0.2
----------------------------------------------------- */

:root {

    --paper: #fcfcfa;

    --ink: #323640;
    --steel: #5C6373;

    --content-width: 760px;

    --space-xs: .4rem;
    --space-s: .8rem;
    --space-m: 1.6rem;
    --space-l: 3rem;
    --space-xl: 6rem;

--transition:340ms cubic-bezier(.22,.61,.36,1);

--line:#D9DDE2;

}

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

html {
    scrollbar-gutter: stable;
    overflow-x: hidden;
}

/* Belt-and-braces: never allow the full-bleed sections to create
   a sliver of horizontal scroll (the left/right "wobble"). */
body {
    overflow-x: hidden;
}

body{

    margin:0;

    background:var(--paper);

    color:var(--ink);

    font-family:
        Helvetica,
        Arial,
        sans-serif;

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;

}

.page{

    max-width:var(--content-width);

    margin:0 auto;

    padding:2.5rem;

}

.top-nav{

    display:flex;

    justify-content:flex-end;

    gap:2rem;

    margin-bottom:3.2rem;

}

.top-nav a{

    text-decoration:none;

    color:var(--steel);

    font-size:.95rem;

    transition:color var(--transition);

}

.top-nav a:hover{

    color:var(--ink);

}

.hero{

    display:flex;
    flex-direction:column;

    margin-bottom:2.5rem;

}

.hero h1{

    margin:0;

    font-size:3rem;

    font-weight:700;

    letter-spacing:-.02em;

    color:var(--ink);

}

.hero h2{

    margin:.25rem 0 0;

    font-size:2rem;

    font-weight:300;

    letter-spacing:-.03em;

    color:var(--ink);

}

.cursor{

    display:inline-block;

    width:2px;

    height:1em;

    background:var(--ink);

    margin-left:6px;

    animation:blink 1.4s infinite;

}

@keyframes blink{

    0%,45%{opacity:1;}

    46%,100%{opacity:0;}

}

.thought-line,
.animated-line{

    margin-top:1.4rem;

    min-height:1.5rem;

    color:var(--ink);

    font-size:1rem;

    /* Wrap within the column instead of clipping; the extra line-height
       gives wrapped rows and their dots room to breathe. */
    line-height:1.9;

}

/* Character separators */

.thought-dot{

    display:inline-block;

    width:7px;
    height:7px;

    /* Spacing sits only on the right of the dot; the gap before it comes from
       the previous chunk's right margin, so a wrapped line starts flush with
       the dot rather than an indenting space. */
    margin:0 .55rem 0 0;

    border-radius:50%;

    background:var(--steel);

    vertical-align:middle;

    position:relative;

    top:-1px;

}

.cv-dot{

    margin:0;
    top:0;

}

#thoughts,
#jobTitles{

    display:inline;

}

/* One word + its leading dot; never breaks internally, so the line
   only ever wraps before a dot. */
.tl-word{

    display:inline-block;

    white-space:nowrap;

    /* Provides the gap before the following dot; because it's a right margin it
       stays on the line above when the next chunk wraps. */
    margin-right:.55rem;

}

.cursor{

    width:2px;

    height:1.1em;

    background:var(--ink);

    margin-left:4px;

    display:inline-block;

    position:relative;

    top:4px;

    animation:blink .9s infinite;

}

.standfirst{

    margin-top:1.6rem;

    max-width:34rem;

    line-height:1.75;

    color:var(--steel);

    font-size:1.1rem;

}

/* The "Turning complex ideas…" tagline — a consistent brand line in every
   page's header, sitting above the animated line. Heavier weight than a
   normal standfirst so it reads as a tagline. (On mobile it becomes the
   black strapline strip — see the mobile @media block below.) */
.hero-strap{
    font-weight:600;
}

.chapters{

}

/*================================================

COMPONENT : CHAPTER ACCORDION
Version 1.0

================================================*/

/* ==========================================================
   ACCORDION PROTOTYPE
   Version 2.0
========================================================== */



/* ==========================================================
   CHAPTER
========================================================== */

.accordion{

    border-bottom:1px solid var(--line);

    padding:1.5rem 0 1.8rem 0;

    /* small gap above the header when a chapter is scrolled to the top */
    scroll-margin-top:16px;

}
.accordion:last-child{

    border-bottom:none;
    padding-bottom:1.2rem;

}


/* ==========================================================
   LAYOUT
========================================================== */

.accordion-grid{

    display:grid;

    grid-template-columns:32px 1fr;

    column-gap:1rem;

    align-items:start;

}


/* ==========================================================
   TOGGLE
========================================================== */

.accordion-toggle{

    background:none;
    border:none;

    padding:0px 0 0;

    margin:0;

    display:flex;
    justify-content:center;
    align-items:flex-start;

    cursor:pointer;

}


/* ==========================================================
   ICON
========================================================== */

/* ==========================================================
   ICON & TITLE
========================================================== */

.accordion-icon{

    width:20px;
    height:20px;

    display:block;

    color:var(--steel);

    transform-origin:center center;

    transition:
        transform 260ms cubic-bezier(.22,1,.36,1),
        color var(--transition);

}



.accordion:hover .accordion-icon,
.accordion:hover .accordion-title{

    color:var(--ink);

}

.accordion.open .accordion-icon{

    color:var(--ink);

    transform:rotate(45deg);

}




/* ==========================================================
   MAIN COLUMN
========================================================== */

.accordion-main{

    min-width:0;

}


/* ==========================================================
   TITLE
========================================================== */

.accordion-title{

    font-size:1.30rem;

    font-weight:300;

    letter-spacing:-0.03em;

    line-height:1.15;

    margin:0;

}


/* ==========================================================
   CONTENT
========================================================== */

.accordion-content{

    overflow:hidden;

    max-height:0;

    opacity:0;

    transform:translateY(-6px);

    transition:
        max-height 600ms cubic-bezier(.22,1,.36,1),
        opacity 250ms ease,
        transform 600ms cubic-bezier(.22,1,.36,1);

}

.accordion.open .accordion-content{

    max-height:320px;

    opacity:1;

    transform:translateY(0);

}


/* ==========================================================
   RULE
========================================================== */

.accordion-rule{

    height:1px;

    background:var(--line);

    margin:1.5rem 0 2.2rem;

}


/* ==========================================================
   PARAGRAPH
========================================================== */

.body-copy{

    font-size:1rem;

    line-height:1.8;

    color:var(--steel);

    max-width:32rem;

}

.role ul {

    font-size: 1rem;
    line-height: 1.8;
    color: var(--steel);

    max-width: 32rem;

    margin: 1rem 0 0;
    padding-left: 2.5rem;

}

.role li {
    margin-bottom: .35rem;
}


@media (max-width:700px){

    .page{

        padding:1.5rem;

    }

    /* Tighten the vertical run between the intro and the first chapter —
       on small screens the typewriter's reserved height plus the hero
       margin made this gap oversized. */
    .hero{

        margin-bottom:1.1rem;

    }

    .thought-line,
    .animated-line{

        line-height:1.55;
        margin-top:.6rem;

    }

    .chapters .accordion:first-child{

        padding-top:.8rem;

    }

    /* Scale the header down so it keeps the desktop proportions
       instead of wrapping awkwardly beside the avatar.
       (The .hero-branding / .hero-avatar mobile overrides live in the
       final @media block, so they beat the later base definitions.) */
    .hero h1{

        font-size:2rem;
        line-height:1.1;

    }

    .hero h2{

        font-size:1.4rem;
        margin:.2rem 0 0;

    }

    /* Tighter icon column → wider text column and less empty
       space on the left when a chapter is expanded. */
    .accordion-grid{

        grid-template-columns:20px 1fr;
        column-gap:.5rem;

    }

    .accordion-icon{

        width:16px;
        height:16px;
        margin-top:3px;

    }

    .standfirst{

        font-size:1rem;
        margin-top:1.1rem;

    }

}
/* ==========================================================
   PAGE HEADER
========================================================== */

.page-header{

    margin:0rem 0 4rem;

}

.page-header h1{

    margin:0;

    font-size:3rem;

    font-weight:700;

    letter-spacing:-.02em;

}

.page-header h2{

    margin:.4rem 0 2rem;

    font-size:2rem;

    font-weight:300;

    letter-spacing:-0.03em;

}

.page-rule{

    height:1px;

    background:var(--line);

    margin:1.75rem 0;

}

/* ==========================================================
   CV
========================================================== */

.cv-meta{

    display:flex;
    align-items:center;
    gap:.55rem;

    margin:0 0 1.5rem;

    color:var(--steel);

    font-size:.95rem;

}



.cv-item p{

    max-width:34rem;

    line-height:1.8;

    color:var(--steel);

}

.top-nav .active{

    color:var(--ink);

    pointer-events:none;

}

.role h2 {
    font-size: 1.3rem;   /* around 40px */
    font-weight: 300;
    line-height: 1.1;
    margin: 0 0 0.8rem;
}

.role {
    padding: 3rem 0;
    border-top: 1px solid var(--line);
}

.role:first-child {
    border-top: none;
}

/* ==========================================================
   CONTACT
========================================================== */

.contact-intro{

    max-width:34rem;

    line-height:1.8;

    color:var(--steel);

    margin:0;

}

.contact-item h3{

    display:flex;
    align-items:center;
    gap:.55rem;

    margin:0 0 .5rem;

    font-size:1.2rem;

    font-weight:400;

}

.contact-item p{

    margin:0;

    color:var(--steel);

}

/* Heading icon — a circular steel badge (echoing the round avatar) with a white
   glyph. Steel is the same grey the accordion plus signs use. */
.contact-icon{

    width:32px;
    height:32px;
    padding:7px;
    flex-shrink:0;

    background:var(--steel);
    color:#fff;
    border-radius:50%;

}

.contact-item a{

    color:var(--ink);
    text-decoration:none;
    overflow-wrap:anywhere;

}

.contact-item a:hover{

    text-decoration:underline;

}
.story-panel{
    max-height:0;
    overflow:hidden;
    opacity:0;
    /* overflow snaps back to hidden immediately when closing */
    transition:max-height .6s ease, opacity .6s ease, overflow 0s 0s;
}
.story-panel.open{
    max-height:5000px;
    opacity:1;
    /* wait until the expand finishes, then allow the slideshow to break out */
    overflow:visible;
    transition:max-height .6s ease, opacity .6s ease, overflow 0s .6s;
}
.story-content {
    max-width: 700px;
    margin: 0 auto;
}
.story-content h3 {
    font-size: 1.3rem;
    font-weight: 500;
    margin-bottom: 24px;
     margin-top: 0;
}
.story-content p {
    color: #3f3f3f;
    line-height: 1.8;
}
.story-wide model-viewer {
    width: 100%;
    height: 700px;
}
.story-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #3f3f3f;

    margin-top: 2rem;
    margin-bottom: 0.5rem;
}
.story-scene {
    width: 100%;
    height: 500px;
    background: #111;
    border: 1px solid #333;
}

/* Fallback still shown behind the 3D canvas — visible if WebGL can't render the
   live model (e.g. Firefox on Android). The canvas covers it when the model
   renders, and it doubles as a loading placeholder. */
#auckland-scene{
    background-image:url('images/model-placeholder.jpg');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}
.hero-branding{
    display:flex;
    align-items:flex-start;
    gap: 20px;
}

.hero-avatar{
    width:95px;
    height:95px;
    border-radius:50%;
    object-fit:cover;
    border:1px solid #666;
}

.hero-text{
    display:flex;
    flex-direction:column;
}
.story-image{
    width:100%;
    height:auto;
    display:block;
    margin:24px 0 28px;
    border-radius:4px;
}

/* Portrait floated beside the text — modest on desktop, full width on mobile. */
.story-portrait{
    float:right;
    width:40%;
    max-width:300px;
    height:auto;
    margin:4px 0 14px 26px;
    border-radius:4px;
}

@media (max-width:700px){
    .story-portrait{
        float:none;
        width:100%;
        max-width:none;
        margin:16px 0 20px;
    }
}

/* Project showcase: full-width teaser image + a call-to-action button. */
.project-media{
    display:block;
    margin:4px 0 22px;
}

.project-media img{
    width:100%;
    height:auto;
    display:block;
    border-radius:4px;
}

.project-button{
    display:inline-flex;
    align-items:center;
    gap:.5rem;

    margin-top:1.25rem;
    padding:.7rem 1.3rem;

    background:var(--steel);
    color:var(--paper);
    border-radius:999px;

    font-size:.95rem;
    text-decoration:none;

    transition:background var(--transition);
}

.project-button:hover{
    background:var(--ink);
}

.project-button svg{
    flex-shrink:0;
}

.story-wide{
    width:100dvw;
    margin-left:50%;
    transform:translateX(-50%);
}

.story-prototype{
    margin:24px 0 28px;
}

.story-prototype-frame{
    /* Sized to the phone device; capped and centred so it's never full-width
       (leaves margin either side to scroll past on mobile) and needs no grey
       backdrop — the transparent device floats on the page. */
    display:block;
    width:min(510px, 94%);
    height:855px;
    margin:0 auto;
    border:0;
}

/* ----------------------------------------------------------
   SHORTHAND SHOWCASE — capped live preview that expands to a
   full-screen reading overlay (keeps the huge story out of the
   page flow and avoids any mobile scroll-trap).
---------------------------------------------------------- */
.story-showcase-wide{
    /* Full-bleed breakout WITHOUT a transform, so the full-screen overlay
       (position:fixed on the child) still resolves against the viewport. */
    width:100vw;
    margin-left:calc(50% - 50vw);
}
.story-showcase{
    position:relative;
    width:min(1200px, calc(100dvw - 48px));
    aspect-ratio:780 / 400;   /* matches the cropped cover banner */
    margin:24px auto 32px;
    overflow:hidden;
    border-radius:6px;
    background:#111;
}
.story-showcase picture{
    display:block;
    width:100%;
    height:100%;
}
.story-showcase-cover{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:top center;
}
.story-showcase-frame{
    display:none;                 /* only shown full-screen; preview is the static cover */
    width:100%;
    height:100%;
    border:0;
}
.story-showcase-fade{
    position:absolute;
    left:0; right:0; bottom:0;
    height:45%;
    background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.55));
    pointer-events:none;
}
.story-showcase-open{
    position:absolute;
    left:50%; bottom:22px;
    transform:translateX(-50%);
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.7rem 1.3rem;
    background:var(--steel); color:var(--paper);
    border:0; border-radius:999px;
    font-size:.95rem; font-family:inherit; cursor:pointer;
    white-space:nowrap;
    transition:background var(--transition);
}
.story-showcase-open:hover{ background:var(--ink); }
.story-showcase-open svg{ flex-shrink:0; }
.story-showcase-close{ display:none; }

/* Full-screen reading mode */
.story-showcase.is-fullscreen{
    position:fixed; inset:0;
    width:100vw; height:100dvh;
    aspect-ratio:auto;
    max-height:none;
    margin:0; border:0; border-radius:0;
    z-index:9999;
    overflow:hidden;              /* the iframe scrolls its own content */
    background:var(--paper);
}
.story-showcase.is-fullscreen .story-showcase-cover{
    display:none;
}
.story-showcase.is-fullscreen .story-showcase-frame{
    display:block;
    pointer-events:auto;          /* allow native scroll + interaction */
}
.story-showcase.is-fullscreen .story-showcase-fade,
.story-showcase.is-fullscreen .story-showcase-open{ display:none; }
.story-showcase.is-fullscreen .story-showcase-close{
    display:inline-flex; align-items:center; justify-content:center;
    position:fixed; top:16px; right:16px;
    width:44px; height:44px;
    border:0; border-radius:50%;
    background:var(--ink); color:var(--paper);
    cursor:pointer; z-index:10000;
}

.story-slideshow{
    position:relative;

    width:min(1200px, calc(100dvw - 48px));
    aspect-ratio:16 / 9;

    margin:24px auto 32px;

    overflow:hidden;
    border-radius:4px;
    /* No dark backdrop behind the embed, so nothing can show as an edge line. */
    background:transparent;
}

.story-slideshow iframe{
    position:absolute;
    /* Overfill by 1px so the container's background can't peek as a hairline
       at the iframe edge; .story-slideshow's overflow:hidden clips the excess. */
    inset:-1px;
    width:calc(100% + 2px);
    height:calc(100% + 2px);
    border:0;
    display:block;
}

/* Motion-graphic video: same full-bleed footprint as the slideshow. Click to
   play; the file only downloads on play (preload="none"). */
.story-video{
    position:relative;
    width:min(1200px, calc(100dvw - 48px));
    aspect-ratio:16 / 9;
    margin:24px auto 32px;
    overflow:hidden;
    border-radius:4px;
    background:#000;
}

.story-video-el{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

/* Self-contained interactive (e.g. the Shahed drone graphic): sits in the text
   column, height auto-sized to the widget's content via postMessage. */
.story-widget{
    width:100%;
    margin:24px 0 28px;
}

.story-widget-frame{
    width:100%;
    /* Fallback height before the widget reports its own; it then auto-sizes. */
    height:440px;
    border:0;
    display:block;
}

/* 3D scene: same full-bleed footprint as the slideshow */
.story-stage{
    position:relative;
    width:min(1200px, calc(100dvw - 48px));
    aspect-ratio:16 / 9;
    margin:24px auto 32px;
    overflow:hidden;
    border-radius:4px;
    background:#111;
}

.story-stage .story-scene{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
}

/* "Drag to explore" hint over the 3D scene */
.scene-hint{
    position:absolute;
    left:50%;
    bottom:18px;
    transform:translateX(-50%);

    display:flex;
    align-items:center;
    gap:8px;

    padding:8px 14px;

    background:rgba(0,0,0,.55);
    color:#fff;
    border-radius:999px;

    font-family:Helvetica,Arial,sans-serif;
    font-size:.85rem;
    white-space:nowrap;

    pointer-events:none;
    opacity:0;
    animation:sceneHintIn .5s ease .8s forwards;
    transition:opacity .5s ease;

    z-index:2;
}

.scene-hint.hide{
    opacity:0;
    animation:none;
}

.scene-hint svg{
    display:block;
    animation:sceneHintNudge 1.8s ease-in-out infinite;
}

@keyframes sceneHintIn{
    to{ opacity:1; }
}

@keyframes sceneHintNudge{
    0%,100%{ transform:translateX(-3px); }
    50%{ transform:translateX(3px); }
}

@media (prefers-reduced-motion: reduce){
    .scene-hint svg{ animation:none; }
}

@media (max-width:700px){

    .story-wide,
    .story-showcase-wide{
        width:100%;
        margin-left:0;
        transform:none;
    }

    .story-slideshow,
    .story-stage,
    .story-video,
    .story-showcase{
        width:100%;
        margin:20px 0 28px;
        border-radius:0;
    }

    /* Mobile uses a deeper, portrait crop of the cover. */
    .story-showcase{
        aspect-ratio:1386 / 1766;
    }

    /* ---- Mobile masthead ----
       The nav sits on the off-white strip at the top; below it, the avatar,
       name and tagline sit in a full-bleed dark hero block with off-white
       text and an off-white avatar stroke. Placed in this final @media block
       so it beats the later base .hero-branding / .hero-avatar definitions. */
    .top-nav{
        margin-bottom:.85rem;
    }

    .hero-branding{
        align-items:center;
        gap:14px;
        background:var(--ink);
        margin:0 -1.5rem 0;            /* full-bleed dark hero block (black strip sits flush below) */
        padding:.8rem 1.5rem;
    }

    .hero h1,
    .hero h2{
        color:var(--paper);
    }

    .hero-avatar{
        width:66px;
        height:66px;
        border-color:var(--paper);
    }

    /* Standfirst becomes a solid-black strapline strip along the bottom of
       the masthead. Flex order places it between the grey block and the
       animated line; the font scales with the viewport to stay one line. */
    .hero-strap{
        background:#000;
        color:var(--paper);
        max-width:none;
        margin:0 -1.5rem 1rem;         /* flush under the grey block, full-bleed */
        padding:.7rem 1.5rem;
        font-size:clamp(11px, 3.3vw, 14px);
        font-weight:600;
        line-height:1.35;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

}