:root {
    --paper: #f3ead6;
    --paper-dark: #e8dcc5;

    --ink: #171717;
    --muted: #6f685d;

    --line: #27231f;
    --line-light: #a89d8b;

    --accent: #8d2118;
    --today: #d7c49b;
}


* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    min-height: 100%;
}


body {
    background: var(--paper);
    color: var(--ink);

    font-family:
        Georgia,
        "Times New Roman",
        serif;
}


.page {
    width: min(1050px, calc(100% - 40px));

    margin: 0 auto;

    padding: 70px 0;
}


/* ============================================================
   Header
   ============================================================ */

.site-header {
    text-align: center;

    margin-bottom: 60px;
}


.eyebrow {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;

    letter-spacing: 0.25em;

    color: var(--muted);

    margin-bottom: 16px;
}


h1 {
    margin: 0;

    font-size: clamp(42px, 8vw, 76px);

    line-height: 0.95;

    letter-spacing: 0.04em;
}


/* ============================================================
   Common
   ============================================================ */

.label {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;

    font-weight: bold;

    letter-spacing: 0.18em;

    color: var(--muted);

    margin-bottom: 14px;
}


/* ============================================================
   Current date
   ============================================================ */

.current-date {
    display: grid;

    grid-template-columns: 1fr 1.5fr;

    border-top: 2px solid var(--line);
    border-bottom: 2px solid var(--line);

    margin-bottom: 50px;
}


.gregorian-date,
.kirk-date {
    padding: 35px;
}


.gregorian-date {
    border-right: 1px solid var(--line);
}


#gregorian-date {
    font-size: 27px;
}


#gregorian-time {
    margin-top: 8px;

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

    font-size: 14px;

    color: var(--muted);
}


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


.kirk-long-date {
    font-size: 28px;

    line-height: 1.2;
}


.kirk-short-date {
    margin-top: 12px;

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

    font-size: 14px;

    letter-spacing: 0.08em;

    color: var(--muted);
}


.kirk-week-day {
    margin-top: 20px;

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

    font-size: 12px;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.special-day {
    font-size: clamp(30px, 6vw, 52px);

    line-height: 1.05;

    color: var(--accent);
}


/* ============================================================
   Kirk Clock
   ============================================================ */

.kirk-clock {
    text-align: center;

    padding: 30px 0 60px;
}


.clock {
    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size: clamp(65px, 14vw, 130px);

    line-height: 1;

    letter-spacing: 0.04em;

    margin-top: 10px;
}


.clock-explanation {
    margin-top: 15px;

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

    font-size: 12px;

    letter-spacing: 0.08em;

    color: var(--muted);
}


/* ============================================================
   Calendar heading
   ============================================================ */

.calendar-section {
    margin-top: 20px;
}


.calendar-heading {
    display: flex;

    align-items: baseline;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 20px;
}


.calendar-heading h2 {
    margin: 0;

    font-size: 28px;

    font-weight: normal;
}

/* ============================================================
   Calendar navigation
   ============================================================ */

.calendar-heading {
    display: grid;

    grid-template-columns: 55px 1fr 55px;

    align-items: center;

    gap: 15px;

    margin-bottom: 15px;
}


.calendar-title-block {
    text-align: center;
}


.calendar-heading h2 {
    margin: 0;

    font-size: 28px;

    font-weight: normal;
}


.calendar-nav {
    width: 55px;
    height: 55px;

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

    background: transparent;

    color: var(--ink);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 27px;

    cursor: pointer;

    transition:
        background 0.15s,
        color 0.15s;
}


.calendar-nav:hover {
    background: var(--ink);

    color: var(--paper);
}


.calendar-year-controls {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    margin-bottom: 25px;

    padding-bottom: 15px;

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


#calendar-year {
    min-width: 170px;

    text-align: center;

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

    font-size: 11px;

    font-weight: bold;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.year-nav {
    border: none;

    background: transparent;

    color: var(--muted);

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

    font-size: 10px;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    cursor: pointer;
}


.year-nav:hover {
    color: var(--accent);
}


/* ============================================================
   Calendar
   ============================================================ */

.calendar {
    border-top: 2px solid var(--line);

    border-bottom: 2px solid var(--line);
}


.weekday-header,
.calendar-grid {
    display: grid;

    grid-template-columns:
        repeat(10, minmax(0, 1fr));
}


.weekday-header {
    border-bottom: 1px solid var(--line);
}


.weekday {
    padding: 12px 6px;

    text-align: center;

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

    font-size: 10px;

    font-weight: bold;

    letter-spacing: 0.05em;

    color: var(--muted);
}


.calendar-cell {
    min-height: 105px;

    padding: 14px;

    border-right: 1px solid var(--line-light);

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

    position: relative;
}


.calendar-cell:nth-child(10n) {
    border-right: none;
}


.calendar-cell:nth-last-child(-n + 10) {
    border-bottom: none;
}


.day-number {
    font-size: 28px;

    line-height: 1;
}


.calendar-gregorian-date {
    position: absolute;

    right: 12px;
    bottom: 10px;

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

    font-size: 10px;

    color: var(--muted);
}


/* Today's date */

.calendar-cell.today {
    background: var(--today);
}


.calendar-cell.today::before {
    content: "TODAY";

    position: absolute;

    top: 8px;
    right: 10px;

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

    font-size: 8px;

    font-weight: bold;

    letter-spacing: 0.08em;

    color: var(--accent);
}


.calendar-cell.today .day-number {
    color: var(--accent);
}


/* ============================================================
   Special days
   ============================================================ */

.special-days-section {
    margin-top: 45px;

    padding-top: 30px;

    border-top: 2px solid var(--line);
}


.special-days {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(150px, 1fr));

    border-top: 1px solid var(--line);
}


.special-day-card {
    padding: 20px 15px;

    border-right: 1px solid var(--line-light);

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


.special-day-card:last-child {
    border-right: none;
}


.special-day-number {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;

    font-weight: bold;

    color: var(--muted);

    margin-bottom: 9px;
}


.special-day-name {
    font-size: 18px;

    line-height: 1.1;
}


.special-day-gregorian {
    margin-top: 10px;

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

    font-size: 10px;

    color: var(--muted);
}


.special-day-card.today {
    background: var(--today);

    color: var(--accent);
}


/* ============================================================
   Error
   ============================================================ */

.error-message {
    margin-top: 30px;

    padding: 15px;

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

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

    color: var(--accent);
}


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

@media (max-width: 750px) {

    .page {
        width: min(
            100% - 24px,
            1050px
        );

        padding: 40px 0;
    }


    .site-header {
        margin-bottom: 40px;
    }


    .current-date {
        grid-template-columns: 1fr;
    }


    .gregorian-date {
        border-right: none;

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

        text-align: center;
    }


    .gregorian-date,
    .kirk-date {
        padding: 28px 18px;
    }


    .kirk-long-date {
        font-size: 23px;
    }


    .calendar {
        overflow-x: auto;
    }


    .weekday-header,
    .calendar-grid {
        min-width: 700px;
    }


    .calendar-cell {
        min-height: 90px;
    }


    .special-days {
        grid-template-columns: 1fr 1fr;
    }

	.calendar-heading {
		grid-template-columns: 45px 1fr 45px;

		gap: 8px;
	}


	.calendar-nav {
		width: 45px;
		height: 45px;

		font-size: 22px;
	}


	.calendar-heading h2 {
		font-size: 22px;
	}


	.calendar-year-controls {
		gap: 10px;
	}


	.year-nav {
		font-size: 9px;
	}

}

/* ============================================================
   Date Converter
   ============================================================ */

.converter-section {
    margin-top: 60px;

    padding-top: 35px;

    border-top: 2px solid var(--line);
}


.converter {
    display: grid;

    grid-template-columns:
        1fr 0.8fr 1fr;

    gap: 0;

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


.converter-panel {
    padding: 28px;

    border-right: 1px solid var(--line);
}


.converter-panel:last-child {
    border-right: none;
}


.converter-panel h3 {
    margin: 0 0 20px;

    font-size: 24px;

    font-weight: normal;
}


.converter-panel label {
    display: block;

    margin-bottom: 7px;

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

    font-size: 10px;

    font-weight: bold;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    color: var(--muted);
}


.converter-panel input,
.converter-panel select {
    width: 100%;

    height: 42px;

    padding: 8px 10px;

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

    background: var(--paper);

    color: var(--ink);

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

    font-size: 14px;
}


.converter-panel input:focus,
.converter-panel select:focus {
    outline: 2px solid var(--accent);

    outline-offset: -2px;
}


.convert-button {
    width: 100%;

    margin-top: 15px;

    min-height: 42px;

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

    background: var(--ink);

    color: var(--paper);

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

    font-size: 11px;

    font-weight: bold;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    cursor: pointer;
}


.convert-button:hover {
    background: var(--accent);
}


.converter-result {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-width: 0;

    padding: 20px;

    text-align: center;
}


.converter-arrow {
    margin-bottom: 15px;

    font-size: 26px;

    color: var(--muted);
}


.converter-result-text {
    font-size: 18px;

    line-height: 1.3;
}


.kirk-input-row {
    display: grid;

    grid-template-columns: 1fr 85px;

    gap: 8px;

    margin-bottom: 8px;
}


.kirk-regular-inputs {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 8px;

    margin-bottom: 8px;
}


.special-day-input {
    margin-bottom: 0;
}


.converter-error {
    margin-top: 15px;

    padding: 12px;

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

    color: var(--accent);

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

    font-size: 12px;
}


@media (max-width: 800px) {

    .converter {
        grid-template-columns: 1fr;
    }


    .converter-panel {
        border-right: none;

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


    .converter-panel:last-child {
        border-bottom: none;
    }


    .converter-result {
        min-height: 110px;

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

/* ============================================================
   Time Converter
   ============================================================ */

.time-converter-section {
    margin-top: 55px;

    padding-top: 35px;

    border-top: 2px solid var(--line);
}


.time-converter {
    display: grid;

    grid-template-columns:
        1fr 0.8fr 1fr;

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


.time-converter-panel {
    padding: 28px;

    border-right: 1px solid var(--line);
}


.time-converter-panel:last-child {
    border-right: none;
}


.time-converter-panel h3 {
    margin: 0 0 20px;

    font-size: 24px;

    font-weight: normal;
}


.time-converter-panel input {
    width: 100%;

    height: 42px;

    padding: 8px 10px;

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

    background: var(--paper);

    color: var(--ink);

    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size: 18px;

    letter-spacing: 0.05em;
}


.time-converter-panel input:focus {
    outline: 2px solid var(--accent);

    outline-offset: -2px;
}


.time-input-row {
    display: grid;

    grid-template-columns: 1fr 60px;

    gap: 8px;
}


.secondary-button {
    border: 1px solid var(--line);

    background: transparent;

    color: var(--ink);

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

    font-size: 10px;

    font-weight: bold;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    cursor: pointer;
}


.secondary-button:hover {
    background: var(--paper-dark);
}


.time-converter-result {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 20px;

    text-align: center;
}


.time-converter-note {
    margin-top: 14px;

    text-align: center;

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

    font-size: 10px;

    line-height: 1.6;

    letter-spacing: 0.05em;

    color: var(--muted);
}


@media (max-width: 800px) {

    .time-converter {
        grid-template-columns: 1fr;
    }


    .time-converter-panel {
        border-right: none;

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


    .time-converter-panel:last-child {
        border-bottom: none;
    }


    .time-converter-result {
        min-height: 100px;

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

/* ============================================================
   About the Kirk Calendar
   ============================================================ */

.about-section {
    margin-top: 70px;

    padding-top: 45px;

    border-top: 2px solid var(--line);
}


.about-intro {
    max-width: 760px;

    margin-bottom: 45px;
}


.about-intro h2,
.special-days-about h2,
.leap-year-about h2 {
    margin: 0 0 18px;

    font-size: 32px;

    font-weight: normal;
}


.about-intro p,
.about-card p,
.special-days-intro,
.special-about-card p,
.leap-year-about p {
    font-size: 16px;

    line-height: 1.65;

    color: var(--ink);
}


.about-intro p:last-child,
.about-card p:last-of-type,
.special-about-card p:last-child,
.leap-year-about p:last-child {
    margin-bottom: 0;
}


/* ============================================================
   General information cards
   ============================================================ */

.about-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

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

    border-left: 1px solid var(--line);
}


.about-card {
    padding: 28px;

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

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


.about-card h3 {
    margin: 0 0 16px;

    font-size: 24px;

    font-weight: normal;
}


.about-formula {
    margin-top: 20px;

    padding-top: 14px;

    border-top: 1px solid var(--line-light);

    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size: 12px;

    line-height: 1.7;

    color: var(--muted);
}


.about-example {
    margin-top: 20px;

    padding: 14px;

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

    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size: 13px;

    line-height: 1.6;

    text-align: center;
}


/* ============================================================
   Days Outside the Months
   ============================================================ */

.special-days-about {
    margin-top: 55px;
}


.special-days-intro {
    max-width: 760px;

    margin-bottom: 28px;
}


.special-day-about-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

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

    border-left: 1px solid var(--line);
}


.special-about-card {
    min-height: 210px;

    padding: 25px;

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

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

    position: relative;
}


.special-about-number {
    margin-bottom: 18px;

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

    font-size: 10px;

    font-weight: bold;

    letter-spacing: 0.12em;

    color: var(--muted);
}


.special-about-card h3 {
    margin: 0;

    font-size: 21px;

    line-height: 1.15;

    font-weight: normal;
}


.special-about-card p {
    margin-top: 15px;
}


.leap-day-card {
    background: var(--paper-dark);
}


/* ============================================================
   Leap years
   ============================================================ */

.leap-year-about {
    max-width: 760px;

    margin-top: 55px;

    padding-top: 35px;

    border-top: 1px solid var(--line-light);
}


.leap-year-about .about-formula {
    display: inline-block;
}


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

@media (max-width: 800px) {

    .about-grid {
        grid-template-columns: 1fr;
    }


    .special-day-about-grid {
        grid-template-columns: 1fr 1fr;
    }
}


@media (max-width: 550px) {

    .special-day-about-grid {
        grid-template-columns: 1fr;
    }


    .about-intro h2,
    .special-days-about h2,
    .leap-year-about h2 {
        font-size: 28px;
    }


    .about-card,
    .special-about-card {
        padding: 22px;
    }
}