/* ============================================================
   DESIGN TOKENS
   ------------------------------------------------------------
   Palette pulled directly from the exhibition's own Twine
   stylesheet (archive paper, terracotta accent, warm ink) so
   the website and the interactive story read as one visual
   system, not two disconnected artifacts.
   ============================================================ */

:root{
    --paper: #f4f1ea;
    --paper-rose: #f7eeec;
    --paper-sage: #eef1ea;
    --ink: #221d17;
    --muted: #6b6152;
    --accent: #b3262c;
    --accent-soft: #e0b5ac;
    --line: #d8cdbc;
}

body{
    margin:0;
    font-family:"Source Serif 4", serif;
    background:var(--paper);
    color:var(--ink);
}

h1, h2, h3, h4, nav a, .process-num, .center-text.eyebrow{
    font-family:"Space Grotesk", sans-serif;
}

.hero{
    position:relative;
    height:280px;
    background:
    linear-gradient(
        to bottom,
        rgba(244,241,234,0) 45%,
        rgba(244,241,234,0.2) 65%,
        rgba(244,241,234,0.6) 80%,
        rgba(244,241,234,0.9) 92%,
        var(--paper) 100%
    ),
    url("images/pride.png") center/cover no-repeat;
}

.title-section{
    text-align:center;
    margin-top:-70px;
    margin-bottom:25px;
    position:relative;
    z-index:2;
    color:var(--ink);
}

.title-section h1{
    font-size:clamp(2.6rem, 6vw, 4.4rem);
    font-family:"Space Grotesk", sans-serif;
    font-weight:500;
    margin:0;
    display:inline-block;
    position:relative;
    transition:.3s;
    color:var(--ink);
}

.title-section p{
    font-size:1.35rem;
    font-family:"Space Grotesk", sans-serif;
    font-weight:300;
    margin-top:12px;
    color:var(--muted);
    transition:.3s;
}

nav{
    display:flex;
    justify-content:center;
    gap:15px;
    margin:20px 0 40px;
    flex-wrap:wrap;
}

nav a{
    text-decoration:none;
    color:var(--ink);
    padding:10px 18px;
    border:1px solid var(--line);
    border-radius:25px;
    font-size:.95rem;
    letter-spacing:.02em;
    transition:.25s;
}

nav a:hover{
    color:var(--paper);
    background:var(--accent);
    border-color:var(--accent);
}

a{
    text-decoration:none;
    color:var(--accent);
    position:relative;
    transition:.2s;
}

a:hover{
    opacity:.7;
}

h2{
    display:inline-block;
    position:relative;
    color:var(--ink);
    font-size:2.2rem;
    font-weight:500;
    padding-bottom:.3em;
    border-bottom:3px solid var(--accent);
    margin-bottom:.6em;
}

/* ============================================================
   MAIN LAYOUT
   ------------------------------------------------------------
   Widened from 900px to 1300px so the site actually uses
   desktop screen space instead of sitting as a narrow column
   in the middle of the page. Prose paragraphs are capped
   separately below for readability, while cards/grids are
   free to use the full width.
   ============================================================ */

main{
    max-width:1300px;
    margin:auto;
    display:flex;
    flex-direction:column;
    gap:90px;
    padding:0 50px 60px;
}

@media (max-width: 900px){
    main{
        padding:0 20px 60px;
        gap:60px;
    }
}

.box{
    background:#fffdf8;
    border-radius:6px;
    padding:45px 65px;
    border:1px solid var(--line);
}

#sez2{
    background:var(--paper-rose);
}

#sez3{
    background:var(--paper-sage);
}

@media (max-width: 700px){
    .box{
        padding:30px 25px;
    }
}

/* Prose now spans the full width of the card (no more capped
   reading width), and is justified for a cleaner, more
   "printed page" look. hyphens:auto softens the uneven word
   spacing that justified text can create in English. */
.box > p,
.box > ul,
.box > ol{
    text-align:justify;
    hyphens:auto;
}

.box p{
    font-size: 1.25rem;
    line-height: 1.8;
    text-align:justify;
    hyphens:auto;
}

.box > img{
    width:100%;
    max-width:500px;
    display:block;
    margin:25px auto;
    border-radius:15px;
}

.box img.large-img{
    display:block;
    width:80%;
    max-width:750px;
    margin:30px auto;
}

.info-box{
    background:var(--paper-sage);
    border-left:4px solid var(--accent);
    border-radius:2px;
    padding:40px;
    margin:60px 0;
}

.info-box h3{
    margin-top:0;
    margin-bottom:15px;
    font-size:1.4rem;
    color:var(--ink);
}

.info-box p{
    margin:0;
    font-size:1.2rem;
    line-height:1.8;
    text-align:justify;
    hyphens:auto;
}

.box ul{
    padding-left:30px;
}

.box li{
    font-size:1.25rem;
    line-height:1.8;
    margin-bottom:12px;
}

/* ============================================================
   PROCESS TRACK
   ------------------------------------------------------------
   Numbered steps are justified here: this genuinely is a
   sequence the team followed, not a decorative 01/02/03 applied
   to unordered content.
   ============================================================ */

.process-track{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:0;
    margin:40px 0;
    border-top:1px solid var(--line);
}

.process-step{
    padding:28px 24px 0 0;
    border-right:1px solid var(--line);
}

.process-step:last-child{
    border-right:none;
}

.process-num{
    display:block;
    font-size:.95rem;
    color:var(--accent);
    letter-spacing:.08em;
    margin-bottom:10px;
}

.process-step h4{
    font-family:"Space Grotesk", sans-serif;
    font-size:1.15rem;
    font-weight:500;
    margin:0 0 10px 0;
    color:var(--ink);
}

.process-step p{
    font-size:1rem;
    line-height:1.6;
    color:var(--muted);
    text-align:left;
    hyphens:auto;
}

@media (max-width: 900px){
    .process-track{
        grid-template-columns:1fr;
        border-top:none;
    }
    .process-step{
        padding:20px 0;
        border-right:none;
        border-top:1px solid var(--line);
    }
}

.design-row{
    display:flex;
    align-items:center;
    gap:50px;
    margin:40px 0;
}

@media (max-width: 700px){
    .design-row{
        flex-direction:column;
        align-items:flex-start;
    }
}

.webapp-img{
    width:200px;
    max-width:200px;
    height:auto;
    flex-shrink:0;
    display:block;
    margin:0;
    border-radius:4px;
    border:1px solid var(--line);
}

.design-text{
    flex:1;
}

.design-text p{
    font-size:1.25rem;
    line-height:1.8;
    margin-top:0;
    text-align:justify;
    hyphens:auto;
}

.viewer-3d{
    width:70%;
    max-width:820px;
    height:420px;
    margin:40px auto 90px auto;
    display:block;
    border-radius:6px;
    border:1px solid var(--line);
    background:#ffffff;
}

/* ============================================================
   BENCHMARK GRID
   ------------------------------------------------------------
   Previously four full-width horizontal cards stacked in a
   single column. Now arranged as a responsive grid (2 columns
   on wide screens, 1 on narrow ones), each card rebuilt as a
   vertical card (image on top, text below) since that reads
   better at grid-column width than a cramped horizontal row.
   ============================================================ */

.benchmark-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap:30px;
}

.benchmark-card{
    display:flex;
    flex-direction:column;
    gap:15px;
    padding:25px;
    background:var(--paper);
    border-radius:4px;
    border:1px solid var(--line);
}

.benchmark-card img{
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:15px;
}

.benchmark-text h3{
    margin-top:0;
    margin-bottom:15px;
    color:var(--ink);
    font-size:1.6rem;
}

.benchmark-text p{
    margin:0 0 12px 0;
    font-size:1.15rem;
    line-height:1.75;
    text-align:justify;
    hyphens:auto;
}

.benchmark-text p:last-child{
    margin-bottom:0;
}

.qr-code{
    width:110px;
    margin:19px auto 8px;
}

/* ============================================================
   PROCESS GALLERY (team section)
   ============================================================ */

.process-gallery{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap:30px;
    margin:30px 0;
}

.process-gallery img{
    width:100%;
    aspect-ratio: 4 / 3;
    object-fit:cover;
    border-radius:4px;
    border:1px solid var(--line);
}

.process-gallery figcaption{
    text-align:center;
    font-size:0.95rem;
    opacity:0.75;
    margin-top:0.6rem;
}

.team-container{
    display:flex;
    justify-content:center;
    gap:50px;
    margin-top:40px;
    flex-wrap:wrap;
}

.team-member{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.team-member img{
    width:180px;
    height:180px;
    object-fit:cover;
    border-radius:4px;
    border:1px solid var(--line);
    transition:.3s;
    filter:grayscale(.15);
}

.team-member img:hover{
    filter:grayscale(0);
}

.team-member img:hover{
    transform:scale(1.05);
}

.team-member a{
    margin-top:10px;
    text-decoration:none;
    color:var(--ink);
    border:none;
    padding:0;
    font-size:1.2rem;
}

.team-member strong{
    font-weight:bold;
}

.center-text{
    text-align:center;
}

footer{
    padding:30px;
    text-align:center;
    background:var(--paper-sage);
    font-family:"Space Grotesk", sans-serif;
    font-size:.9rem;
    color:var(--muted);
    margin-bottom:8px;
}

/* ============================================================
   SIGNATURE BAR
   ------------------------------------------------------------
   The one deliberate use of the rainbow in the whole site,
   deployed once, in the same exact stops used by the Twine's
   fixed progress bar — so the website and the interactive
   story read as two parts of a single visual system, rather
   than the flag being sprinkled as a generic decoration.
   ============================================================ */

body::after{
    content:"";
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height:8px;
    z-index:999;
    pointer-events:none;
    background:linear-gradient(
        90deg,
        #e4572e 0%, #e4572e 16.6%,
        #f3a712 16.6%, #f3a712 33.2%,
        #f6e042 33.2%, #f6e042 49.8%,
        #2e933c 49.8%, #2e933c 66.4%,
        #1b6ca8 66.4%, #1b6ca8 83%,
        #6a4c93 83%, #6a4c93 100%
    );
}