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

   The Michael Baastrup Chang Archive
   archive.css

   Version:
   1.0

   Status:
   Working Draft

   Based on:
   Archive Blueprint v1.0
   Master HTML v1.0

   Purpose:
   Canonical stylesheet for The Michael Baastrup Chang Archive.

   This stylesheet establishes the typographic and spatial language
   of the archive. It prioritises readability, documentation and
   long-term maintainability over visual novelty.

   The visual design draws inspiration from museum publications,
   scholarly catalogues and archival documentation rather than
   contemporary web design trends.

   Copyright © Michael Baastrup Chang

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


/* ==========================================================================
   1. CSS VARIABLES
=========================================================================== */

:root {

    /* ----------------------------------------------------------
       Page
    ---------------------------------------------------------- */

    --page-width: 750px;

    --page-margin: 60px;

    --page-padding: 20px;


    /* ----------------------------------------------------------
       Typography
    ---------------------------------------------------------- */

    --font-body: "adobe-kis-caption", sans-serif;

    --font-heading: "adobe-kis", sans-serif;

    --font-editorial: "gesta", sans-serif;

    /* ----------------------------------------------------------
       Font Sizes
    ---------------------------------------------------------- */

    --text-size: 1.4rem;

    --small-text: 0.95rem;

    --caption-size: 1.1rem;

    --h1-size: 2.4rem;

    --h2-size: 1.1rem;

    --h3-size: 1.1rem;

    --h4-size: 1.85rem;


    /* ----------------------------------------------------------
       Line Heights
    ---------------------------------------------------------- */

    --line-height: 1.45;

    --heading-line-height: 1.15;


    /* ----------------------------------------------------------
       Colours
    ---------------------------------------------------------- */

    --background: #ffffff;

    --text-colour: #3f3f3f;

    --heading-colour: #000000;

    --secondary-colour: #666666;

    --border-colour: #dddddd;

    --link-colour: #3f3f3f;
  
    --accent-colour: #4b4b4b;


    /* ----------------------------------------------------------
       Spacing
    ---------------------------------------------------------- */

    --space-xs: 0.5rem;

    --space-s: 1rem;

    --space-m: 2rem;

    --space-l: 3rem;

    --space-xl: 5rem;

}



/* ==========================================================================
   2. GLOBAL RESET
=========================================================================== */

*,
*::before,
*::after {

    box-sizing: border-box;

}

html {

    font-size: 100%;

    scroll-behavior: smooth;

}

body {

    margin: 0;

    padding: 0;

}



/* ==========================================================================
   3. PAGE
=========================================================================== */

body {

    font-family: var(--font-body);

    font-size: var(--text-size);

    line-height: var(--line-height);

    color: var(--text-colour);

    background: var(--background);

    margin: 0;

    text-rendering: optimizeLegibility;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}

/* ==========================================================================
   4. PAGE CONTAINER
=========================================================================== */

.page-container {

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

    margin-left: auto;

    margin-right: auto;

    padding-left: var(--page-padding);

    padding-right: var(--page-padding);

}

/* ==========================================================================
   5. TYPOGRAPHY
=========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {

    font-family: var(--font-heading);

    color: var(--heading-colour);

    line-height: var(--heading-line-height);

    margin-top: 0;

}

h1 {

    font-size: var(--h1-size);

    font-weight: 600;

    margin-bottom: 0.45em;

    margin-top: 1.5em;

}

h2 {

    font-size: var(--h2-size);

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    margin-top: var(--space-l);

    margin-bottom: var(--space-s);

}

h3 {

    font-family: var(--font-editorial);

    font-size: var(--h3-size);

    font-style: italic;

    font-weight: 400;

    margin-top: var(--space-l);

}

h4 {

    font-size: var(--h4-size);

    font-weight: 400;

    margin-top: var(--space-l);

    margin-bottom: var(--space-s);

}

p {

    margin-top: 0;

    margin-bottom: 1.1em;

}

strong {

    font-weight: 600;

}

em {

    color: #555555;

}



/* ==========================================================================
   6. LINKS
=========================================================================== */

a {

    color: var(--link-colour);

    text-decoration: underline;

    text-decoration-thickness: 1px;

    text-underline-offset: 2px;

}

a:hover,
a:focus {

    color: #000000;

}



/* ==========================================================================
   7. LISTS
=========================================================================== */

ul,
ol {

    margin: 1.2em 0;

    padding-left: 1.4em;

}

li {

    margin-bottom: 0.45em;

}

dl {

    margin: 0;

}

dt {

    font-family: var(--font-heading);

    font-weight: 600;

}

dd {

    margin: 0 0 1em 0;

}



/* ==========================================================================
   8. BLOCKQUOTES
=========================================================================== */

blockquote,
q {

    display: block;

    font-family: var(--font-editorial);

    font-size: 0.95em;

    font-style: italic;

    margin: 1.5em 0;

    padding-left: 1.5em;

}

/* ==========================================================================
   9. SITE HEADER
=========================================================================== */

.site-header {

    margin-top: var(--page-margin);

    margin-bottom: var(--space-s);

}

.site-identity {

    margin-bottom: var(--space-l);

}

.site-title {

    font-family: var(--font-editorial);
  
    font-size: 1.15rem;

    font-style: normal;

    color: var(--secondary-colour);

    margin: 0;

}

.site-title a {

    text-decoration: none;

    color: inherit;

}

.site-description {

    font-family: var(--font-editorial);

    font-size: 1.15rem;

    font-style: italic;

    color: var(--secondary-colour);

    margin-top: 0.2rem;

}



/* ==========================================================================
   10. PRIMARY NAVIGATION
=========================================================================== */

.site-header nav {

    margin-top: 1rem;

    padding-top: 1rem;

    padding-bottom: 1rem;

    border-top: 1px solid var(--border-colour);

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

}

.site-header nav ul {

    display: flex;

    flex-wrap: wrap;

    gap: 1.2rem;

    list-style: none;

    padding: 0;

    margin: 0;

}

.site-header nav li {

    margin: 0;

}

.site-header nav a {

    font-family: var(--font-editorial);

    font-size: 1.15rem;

    font-style: normal;

    text-decoration: none;

    color: var(--secondary-colour);

}

.site-header nav a:hover,
.site-header nav a:focus {

    color: var(--heading-colour);

    text-decoration: underline;

}



/* ==========================================================================
   11. MAIN CONTENT
=========================================================================== */

main {

    display: block;

}

.archive-record {

    width: 100%;

    margin-top: var(--page-margin);

}




/* ==========================================================================
   12. ARTICLE
=========================================================================== */

.archive-entry {

    display: block;

}

.article-header {

    margin-bottom: var(--space-l);

}

.article-header h1 {

    margin-bottom: 0.4rem;

}

.article-metadata {

    font-family: var(--font-editorial);

    font-style: italic;

    font-size:0.9rem;
  
    color: var(--secondary-colour);


}

.article-metadata p {

    margin: 0.15rem 0;

}



/* ==========================================================================
   13. SUMMARY
=========================================================================== */

.summary {

    margin-bottom: var(--space-l);

}

.summary p {

    max-width: 100%;

}



/* ==========================================================================
   14. CANONICAL METADATA
=========================================================================== */

.article-metadata-block {

    margin: var(--space-l) 0;

}

.article-metadata-block dl {

    display: grid;

    grid-template-columns: 180px 1fr;

    column-gap: 2rem;

    row-gap: 0.75rem;

}

.article-metadata-block dt {

    font-family: var(--font-heading);

    font-weight: 600;

    color: var(--heading-colour);

}

.article-metadata-block dd {

    margin: 0;

}



/* ==========================================================================
   15. SECTION SPACING
=========================================================================== */

.archive-entry section {

    margin-bottom: var(--space-l);

}



/* ==========================================================================
   16. HORIZONTAL DIVIDERS
=========================================================================== */

hr {

    border: none;

    border-top: 1px solid var(--border-colour);

    margin: var(--space-l) 0;

}



/* ==========================================================================
   17. SKIP LINK
=========================================================================== */

.skip-link {

    position: absolute;

    left: -9999px;

}

.skip-link:focus {

    left: 1rem;

    top: 1rem;

    background: white;

    border: 1px solid var(--border-colour);

    padding: 0.5rem 1rem;

    z-index: 1000;

}

/* ==========================================================================
   18. DESCRIPTION
=========================================================================== */

.description {

    margin-bottom: var(--space-l);

}

.description p {

    max-width: 100%;

}



/* ==========================================================================
   19. PHYSICAL DESCRIPTION
=========================================================================== */

.physical-description {

    margin-bottom: var(--space-l);

}

.physical-description dl {

    display: grid;

    grid-template-columns: 180px 1fr;

    column-gap: 2rem;

    row-gap: 0.75rem;

}

.physical-description dt {

    font-family: var(--font-heading);

    font-weight: 600;

    color: var(--heading-colour);

}

.physical-description dd {

    margin: 0;

}



/* ==========================================================================
   20. MEDIA DOCUMENTATION
=========================================================================== */

.media-documentation {

    margin: var(--space-l) 0;

}

figure {

    margin: 0 0 var(--space-l) 0;

}

img {

    display: block;

    width: 100%;

    height: auto;

}

figcaption {

    margin-top: 0.8rem;

    font-size: var(--caption-size);

    line-height: 1.45;

    color: var(--secondary-colour);

}



/* ==========================================================================
   21. RELATED RECORDS
=========================================================================== */

.related-records ul {

    list-style: none;

    padding: 0;

    margin: 0;

}

.related-records li {

    padding: 0.45rem 0;

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

}

.related-records li:last-child {

    border-bottom: none;

}

.related-records a {

    text-decoration: none;

    display: block;

}

.related-records a:hover {

    text-decoration: underline;

}



/* ==========================================================================
   22. NOTES
=========================================================================== */

.notes {

    margin-top: var(--space-l);

}

.notes p {

    color: var(--secondary-colour);

}



/* ==========================================================================
23. RECORD METADATA
=========================================================================== */

.record-metadata {

    margin-top: var(--space-m);

    padding-top: var(--space-s);

    border-top: 1px solid var(--border-colour);

}

.record-metadata dl {

    display: grid;

    grid-template-columns: 180px 1fr;

    column-gap: 2rem;

    row-gap: 0.5rem;

}

.record-metadata dt {

    font-family: var(--font-heading);

    font-size: 1.15rem;

    font-weight: 400;

    color: var(--secondary-colour);

}

.record-metadata dd {

    margin: 0;

    font-family: var(--font-editorial);

    font-size: 1.15rem;

    color: var(--secondary-colour);

}



/* ==========================================================================
   24. ARTICLE FOOTER
=========================================================================== */

.article-footer {

    margin-top: calc(var(--space-m) * 1.5);

    padding-top: var(--space-m);

}

.archive-note {

    font-family: var(--font-editorial);

    font-style: italic;

    font-size:0.9rem;

    color:var(--secondary-colour);

}

.archive-note p {

    margin: 0;

}



/* ==========================================================================
   25. SITE FOOTER
=========================================================================== */

.site-footer {

    margin-top: calc(var(--space-l) * 2);

    padding-top: var(--space-l);

    border-top: 1px solid var(--border-colour);
  
    font-family: var(--font-editorial);

    font-style: italic;

    font-size:0.9rem;

    color: var(--secondary-colour);

}

.site-footer p {

    margin: 0.35rem 0;

}



/* ==========================================================================
   26. TIME ELEMENTS
=========================================================================== */

time {

    white-space: nowrap;

}



/* ==========================================================================
   27. EMPHASIS
=========================================================================== */

.type {

    font-weight: 600;

    letter-spacing: 0.03em;

}

.date {

    color: var(--secondary-colour);

}



/* ==========================================================================
   28. IMAGE LINKS
=========================================================================== */

figure a {

    display: block;

}

figure a:hover img {

    opacity: 0.95;

}



/* ==========================================================================
   29. HIDDEN ELEMENTS
=========================================================================== */

[hidden] {

    display: none !important;

}


/* ==========================================================================
   30. ACCESSIBILITY
=========================================================================== */

/*
   Visible keyboard focus.
*/

:focus {

    outline: 2px solid #000;

    outline-offset: 3px;

}

:focus:not(:focus-visible) {

    outline: none;

}

:focus-visible {

    outline: 2px solid #000;

    outline-offset: 3px;

}



/* ==========================================================================
   31. UTILITY CLASSES
=========================================================================== */

.text-centre {

    text-align: center;

}

.text-right {

    text-align: right;

}

.small-text {

    font-size: var(--small-text);

}

.secondary-text {

    color: var(--secondary-colour);

}

.visually-hidden {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;

}



/* ==========================================================================
   32. RESPONSIVE LAYOUT
=========================================================================== */

@media (max-width:900px){

    body{

        font-size:1.15rem;

    }

    .archive-record{

        margin:40px auto;

        padding:0 24px;

    }

}



@media (max-width:700px) {

    :root {

        --text-size: 1.05rem;

        --small-text: 0.88rem;

        --caption-size: 0.82rem;

        --h1-size: 1.9rem;

        --h2-size: 0.95rem;

        --h3-size: 0.90rem;

        --h4-size: 1.55rem;

    }

}



@media (max-width:480px) {

    :root {

        --text-size: 1rem;

        --small-text: 0.85rem;

        --caption-size: 0.8rem;

        --h1-size: 1.7rem;

        --h2-size: 0.92rem;

        --h3-size: 0.88rem;

        --h4-size: 1.45rem;

    }

}



/* ==========================================================================
   33. PRINT
=========================================================================== */

@media print {

    body {

        max-width: none;

        margin: 0;

        padding: 0;

        font-size: 11pt;

        line-height: 1.45;

        color: #000;

        background: #fff;

    }

    .skip-link,

    .site-header nav,

    .site-footer {

        display: none;

    }

    a {

        color: #000;

        text-decoration: none;

    }

    img {

        max-width: 100%;

        page-break-inside: avoid;

    }

    figure {

        page-break-inside: avoid;

    }

    h1,
    h2,
    h3,
    h4 {

        page-break-after: avoid;

    }

    section {

        page-break-inside: avoid;

    }

}



/* ==========================================================================
   34. REDUCED MOTION
=========================================================================== */

@media (prefers-reduced-motion: reduce) {

    * {

        scroll-behavior: auto;

        transition: none !important;

        animation: none !important;

    }

}

/* ==========================================================
   35. MOBILE HEADER / NAVIGATION / FOOTER ALIGNMENT
========================================================== */

@media (max-width: 767px) {

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

    .site-header nav ul {
        justify-content: center;
    }

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

}



/* ==========================================================================
   36. FUTURE EXPANSION
=========================================================================== */

/*

Reserved for future archive modules.

Examples:

    Timeline

    Publications

    Essays

    Exhibition Records

    Artist Records

    Search

    Collections

    Digital Assets

Maintain the existing section numbering.

Append new sections below.

*/



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

   End of archive.css

   Version:
   1.0

   Status:
   Approved Reference Stylesheet

   This stylesheet forms part of the technical framework of
   The Michael Baastrup Chang Archive.

   Together with Archive Blueprint v1.0 and Master HTML v1.0,
   it establishes the archive's visual language and long-term
   maintainability.

   The stylesheet is intended to evolve through versioned
   revisions while preserving backwards compatibility whenever
   practical.

   Copyright © Michael Baastrup Chang

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