/* The look of the three documents at kahveee.com. One sheet of paper on the table the game is played on. */

:root {
    --wood: #251809;
    --wood-deep: #16100a;
    --paper: #f6eeda;
    --paper-edge: #e4d6b4;
    --ink: #3a2c1a;
    --ink-soft: #6f5e46;
    --ink-heading: #2f2618;
    --accent: #8a4a16;
    --rule: #ded0ad;
}

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0 16px 72px;
    background: var(--wood-deep);
    background-image: radial-gradient(ellipse at 50% 0%, #3f2a13 0%, var(--wood) 42%, var(--wood-deep) 100%);
    background-attachment: fixed;
    color: var(--ink);
    font-family: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 17px;
    line-height: 1.68;
}

.sheet {
    max-width: 47rem;
    margin: 0 auto;
    padding: 56px clamp(20px, 5vw, 64px) 64px;
    background: var(--paper);
    border: 1px solid var(--paper-edge);
    border-radius: 2px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

.masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 40px;
}

.wordmark {
    font-family: "Young Serif", Georgia, serif;
    font-size: 15px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
}

/* Which of the two documents on this page is the one being read. The attribute is set before the first
   paint by the script in the head, so neither language is ever seen and then taken away. */
:root[data-lang="tr"] article[lang="en"],
:root[data-lang="en"] article[lang="tr"] {
    display: none;
}

.langbar {
    display: flex;
    flex: none;
    gap: 4px;
}

.langbar button {
    appearance: none;
    -webkit-appearance: none;
    padding: 5px 13px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: 999px;
    cursor: pointer;
}

.langbar button:hover {
    color: var(--ink-heading);
    border-color: var(--ink-soft);
}

/* A switch inside a sentence: the note that says which text governs. */
.linkish {
    appearance: none;
    -webkit-appearance: none;
    padding: 0;
    font: inherit;
    color: var(--accent);
    background: none;
    border: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.langbar button[aria-pressed="true"] {
    color: var(--paper);
    background: var(--accent);
    border-color: var(--accent);
    cursor: default;
}

h1 {
    margin: 0 0 8px;
    font-family: "Young Serif", Georgia, serif;
    font-weight: 400;
    font-size: clamp(30px, 6vw, 40px);
    line-height: 1.18;
    color: var(--ink-heading);
}

h2 {
    margin: 44px 0 12px;
    font-family: "Young Serif", Georgia, serif;
    font-weight: 400;
    font-size: clamp(20px, 3.6vw, 24px);
    line-height: 1.3;
    color: var(--ink-heading);
}

h3 {
    margin: 28px 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: var(--ink-heading);
}

p,
ul,
ol,
table {
    margin: 0 0 16px;
}

ul,
ol {
    padding-left: 22px;
}

li {
    margin-bottom: 8px;
}

li > ul,
li > ol {
    margin-top: 8px;
}

a {
    color: var(--accent);
    text-underline-offset: 3px;
}

strong {
    color: var(--ink-heading);
}

.dateline {
    margin: 0 0 36px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--rule);
    color: var(--ink-soft);
    font-size: 15px;
}

.lede {
    font-size: 19px;
    line-height: 1.6;
}

.note {
    margin: 24px 0;
    padding: 18px 22px;
    background: rgba(138, 74, 22, 0.07);
    border-left: 3px solid var(--accent);
    border-radius: 0 2px 2px 0;
}

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

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}

th,
td {
    padding: 10px 12px 10px 0;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--rule);
}

th {
    font-weight: 700;
    color: var(--ink-heading);
}

tbody tr:last-child th,
tbody tr:last-child td {
    border-bottom: none;
}

footer {
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid var(--rule);
    color: var(--ink-soft);
    font-size: 15px;
}

footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin-bottom: 16px;
}

footer p {
    margin-bottom: 0;
}

@media (max-width: 480px) {
    body {
        padding: 0 10px 40px;
        font-size: 16px;
    }

    .sheet {
        padding: 36px 20px 44px;
    }

    .masthead {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        margin-bottom: 32px;
    }
}

@media print {
    .langbar {
        display: none;
    }

    body {
        background: #fff;
        padding: 0;
    }

    .sheet {
        max-width: none;
        border: none;
        box-shadow: none;
        padding: 0;
    }
}