/* =========================================================
Rackhaus CSS v0.1
Strength. Data Storage. Sausage Technology.
========================================================= */

/* =========================================================
Colour Palette
========================================================= */

:root {


--paper: #e7dfcc;
--paper-dark: #d8ceb8;

--ink: #2a2723;
--ink-soft: #4b4740;

--steel: #555149;
--steel-dark: #3a3732;

--accent: #6b2d1f;
--accent-hover: #8b3c28;

--blueprint-bg: #223344;
--blueprint-text: #f0f0f0;


}

/* =========================================================
Global
========================================================= */

* {
  box-sizing: border-box;
  }

body {


margin: 0;
padding: 0;

background:
    radial-gradient(
        circle at center,
        #ece5d4 0%,
        #e7dfcc 70%,
        #ddd2bc 100%
    ) ;

color: var(--ink);

font-family: Georgia, serif;
line-height: 1.6;


}

/* =========================================================
Layout Container
========================================================= */

.container {


max-width: 1100px;

margin: 0 auto;

padding: 2rem;


}

/* =========================================================
Typography
========================================================= */

h1,
h2,
h3,
h4 {


color: var(--ink);

line-height: 1.2;


}

h1 {
    font-size: 3rem;
    margin-top: 0;
    margin-bottom: 0.2rem;
}

h2 {


font-size: 2rem;


}

p {


color: var(--ink-soft);


}

a {


color: var(--accent);
text-decoration: none;


}

a:hover {


color: var(--accent-hover);
text-decoration: underline;


}

/* =========================================================
Hero / Landing Layout
========================================================= */

.hero {


min-height: 100vh;

display: flex;

align-items: center;


}

.hero-content {

    display: flex !important;

    align-items: center;

    gap: 3rem;

}

.hero-logo {
    flex: 0 0 45%;
}

.hero-logo img {
    max-width: 100%;
    height: auto;
    display: block;
}

.hero-text {

    flex: 1;

}
.tagline {
    font-style: italic;
    color: var(--steel);

    margin-top: 0;
    margin-bottom: 1.5rem;
}

/* =========================================================
Sections
========================================================= */

.section {


margin-top: 4rem;
margin-bottom: 4rem;


}

/* =========================================================
Engineer Notes
========================================================= */

.engineer-note {


background: var(--blueprint-bg);

color: var(--blueprint-text);

padding: 1.5rem;

margin: 2rem 0;

border-left: 6px solid var(--accent);

border-radius: 4px;


}

.engineer-note h3 {


color: white;

margin-top: 0;


}

.engineer-note p {


color: var(--blueprint-text);


}

/* =========================================================
Cards / Workshop Notes
========================================================= */

.workshop-note {


background: rgba(255,255,255,0.35);

border: 1px solid var(--border, #9d9483);

padding: 1.5rem;

margin: 2rem 0;

border-radius: 6px;


}

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

footer {


margin-top: 6rem;

padding-top: 2rem;

border-top: 1px solid #c4b8a0;

font-size: 0.9rem;

color: var(--steel);


}

/* =========================================================
Mobile Layout
========================================================= */

@media (max-width: 800px) {


.container {

    padding: 1rem;
}

.hero {

    min-height: auto;

    padding-top: 2rem;
    padding-bottom: 2rem;
}

.hero-content {

    flex-direction: column;

    text-align: center;
}

.hero-logo {

    flex: auto;

    max-width: 350px;
}

h1 {

    font-size: 2.2rem;
}

h2 {

    font-size: 1.6rem;
}


}