/*
 * Overrides and additions on top of the ported main.css.
 *
 * main.css is the compiled Jekyll stylesheet: one minified line, no source.
 * Treat it as fixed. Everything this theme decides for itself lives here.
 *
 * House rules, because main.css breaks all of them and the difference should
 * stay visible:
 *
 *   - No pixel measurements except hairline borders and outlines. Sizes come
 *     from rem, em, ch, percentages and clamp(), so the page follows the
 *     reader's font size and works at any zoom.
 *   - Mobile first. The narrow layout is the plain one; wider layouts come
 *     from intrinsic sizing (auto-fit, minmax, min()) rather than breakpoints,
 *     so there is no width at which the design falls apart.
 *   - Plain selectors. Ghost's own card stylesheet used to force a specificity
 *     contest; package.json now excludes the cards this theme styles itself,
 *     so a single class is enough.
 */

:root {
    /* From the logo: the navy of the wordmark, the blue of the wave, the
       green of the figures. The cream ground is main.css's. */
    --tekme-navy: #14507f;
    --tekme-river: #2e86c8;
    --tekme-meadow: #3f9e5a;
    --tekme-ground: #faf4e8;
    --tekme-surface: #fff;
    /*
     * A line drawn in sand with a stick, lit from the left.
     *
     * Read across it: flat sand, then the near wall falling away into shadow,
     * the floor of the channel, then the far wall turned up into the light,
     * then the ridge the stick pushed aside, then flat sand again. Every stop
     * is a translucent tone over whatever the page is, so the groove is a
     * relief in the surface rather than a stripe laid on top of it.
     */
    --tekme-groove: linear-gradient(90deg,
        rgb(150 125 80 / 0%) 0%,
        rgb(150 125 80 / 6%) 18%,
        rgb(150 125 80 / 13%) 34%,
        rgb(150 125 80 / 7%) 48%,
        rgb(255 252 244 / 55%) 66%,
        rgb(255 252 244 / 80%) 78%,
        rgb(255 252 244 / 0%) 100%);
    --tekme-ink: #23211d;
    --tekme-muted: #5f5a52;
    --tekme-line: #e6dcc8;

    /* A fluid scale. Every step grows with the viewport between two bounds,
       so nothing needs a breakpoint to stay in proportion. */
    /* Step 0 is the reading size, and every other step is set against it.
       It sits a little above where it was set for Roboto: Georgia's x-height
       is about 0.48 of its em against Roboto's 0.53, so the same nominal size
       reads roughly a tenth smaller. The bump buys that back. */
    --tekme-step--1: clamp(0.88rem, 0.85rem + 0.15vw, 1rem);
    --tekme-step-0: clamp(1.08rem, 1.03rem + 0.22vw, 1.25rem);
    --tekme-step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.55rem);
    --tekme-step-2: clamp(1.7rem, 1.4rem + 1.5vw, 2.8rem);
    --tekme-step-3: clamp(2.2rem, 1.5rem + 3.5vw, 4.5rem);

    --tekme-gap-xs: 0.5rem;
    --tekme-gap-s: 1rem;
    --tekme-gap-m: 1.75rem;
    --tekme-gap-l: clamp(2.5rem, 6vw, 4.5rem);

    /* The reading measure, and the page's own width. */
    --tekme-measure: 65ch;
    --tekme-content: 64rem;
    --tekme-gutter: clamp(1rem, 4vw, 2.5rem);
}


/* ==========================================================================
   Menu bar
   ========================================================================== */

/*
 * The ported main.css puts the menu in `position: fixed` with no z-index, so
 * anything positioned later in the document paints over it — Ghost's gallery
 * cards did exactly that. Give the nav its own layer.
 */
nav {
    z-index: 100;
    display: flex;
    align-items: center;
    min-height: var(--tekme-bar, 3.5rem);
}

/* main.css offsets the body by the bar's old fixed height; the bar is now
   sized by its contents, so the offset follows the same variable. */
body {
    margin-top: var(--tekme-bar, 3.5rem);
}


/* ==========================================================================
   Text
   --------------------------------------------------------------------------
   The headings are Amatic, which the theme carries as a file. The text under
   them is a serif — a school's prose reads as an institution's rather than as
   a feed, and the screens it is read on now have the resolution for it.

   No web font for the text: this is a list of faces already on the machine,
   one per platform, and whichever of them the reader has is the one they get.
   Georgia and Palatino are on Windows and Apple, Noto Serif is Android's,
   Liberation and DejaVu are the Linux ones, and `ui-serif` picks up whatever
   the system itself calls its serif. Nothing is downloaded, so nothing is
   delayed and there is no layout shift while a font arrives.

   main.css sets the body to Roboto 100, which was thin to the point of grey.
   The front page already overrode it section by section; this puts every page
   on the same footing.
   ========================================================================== */

body {
    font-family: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino,
                 "Noto Serif", "Liberation Serif", "DejaVu Serif", ui-serif,
                 "Times New Roman", serif;
    font-weight: 400;
    font-size: var(--tekme-step-0);
    line-height: 1.6;
}


/* ==========================================================================
   The edges of the column
   --------------------------------------------------------------------------
   A column of dense prose holds its own shape — /tekme/ needs nothing. A page
   of headings and cards does not: it reads as things scattered on a surface
   rather than as a page with a width.

   So the column is bounded, but nothing is stacked on anything: no raised
   panel, no drop shadow, no second colour. The page keeps its one sand tone
   and the boundary is drawn into it — a line raked down each side, the width
   of a stick rather than of a rule, its walls falling into shade and rising
   into light.

   Both grooves are lit from the same side, so they are identical rather than
   mirrored. Mirroring would light the page from two directions at once, which
   is what makes an emboss read as a sticker.

   The rake belongs to the margin, not to the column: each band sits wholly
   outside the column's edge, in the space between the text and the side of
   the window.

   So it is drawn no wider than that space is: --room is what the window has
   left over once the column has taken its width, and the band is the smaller
   of a stick's width and that. On a phone the column is the whole screen,
   --room is nought, and there is no rake at all — which is right, because
   there is no margin to rake. Between the two it narrows rather than
   appearing all at once, and it can never push the page sideways, because it
   is never wider than the space already there.
   ========================================================================== */

.home-sections,
.content-section {
    position: relative;
}

/* Each column states its own width so the margin beside it can be worked out.
   main.css caps a section at 50em; the front page uses the theme's own. */
.home-sections::before {
    --column: var(--tekme-content);
}

.content-section::before {
    --column: 50em;
}

/*
 * Carried by a layer of its own rather than by the column's background, so
 * that it can sit outside the column and be masked. The mask rounds the ends:
 * a stroke drawn by hand starts and stops in the sand, so each band fades out
 * over the last stretch instead of ending square. Out of flow, so it is not a
 * grid item, and out of the way of the pointer.
 */
.home-sections::before,
.content-section::before {
    /* A scrollbar is inside 100vw but outside the page, so a stick's width is
       kept back from --room rather than spent to the last pixel. */
    --room: max(0px, (100vw - var(--column) - 2.5rem) / 2);
    --rake: min(1.9rem, var(--room));
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline: calc(-1 * var(--rake));
    z-index: -1;
    pointer-events: none;
    background-image: var(--tekme-groove), var(--tekme-groove);
    background-size: var(--rake) 100%;
    background-position: left center, right center;
    background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(180deg,
        transparent 0, #000 5rem, #000 calc(100% - 5rem), transparent 100%);
    mask-image: linear-gradient(180deg,
        transparent 0, #000 5rem, #000 calc(100% - 5rem), transparent 100%);
}

/* main.css gives a section side padding and no vertical padding at all, so
   the column's edges ran from the first element to the last with nothing
   above or below them — plainest on /docs/, where that is a file card flush
   against the end of a groove. The front page block already set this; the
   inner pages now match it. */
.content-section {
    padding-block: var(--tekme-gap-l);
}

/*
 * Ghost still ships its own CSS for the cards package.json does not exclude —
 * file, audio, button — and each of those hardcodes a sans stack on the card's
 * own container. A declaration on the element beats anything inherited, and
 * cards.min.css is injected after this file, so `inherit` has to be said out
 * loud and said from a more specific selector than theirs. `/docs/` is where
 * it showed: thirty-eight download rows in a different typeface to the page.
 */
.kg-card.kg-file-card a.kg-file-card-container,
.kg-card.kg-audio-card,
.kg-card.kg-button-card a.kg-btn,
.kg-card.kg-product-card .kg-product-card-container {
    font-family: inherit;
}

nav .menu {
    flex: 1;
}

/* The bar is fixed, so a link to a heading — the menu's own Kontaktai item is
   one — would otherwise land it underneath the bar. */
h1[id],
h2[id],
h3[id] {
    scroll-margin-block-start: calc(var(--tekme-bar, 3.5rem) + 1rem);
}

/*
 * Taken out of the menu's flow so main.css's `text-align: center` keeps
 * centring the links on the bar rather than on what is left beside the logo.
 *
 * Stretched to the bar's height instead of centred with `translateY(-50%)`: a
 * transform would make this a stacking context, and the logo's blend mode
 * would then have nothing behind it to blend with.
 */
nav .brand {
    position: absolute;
    /* The menu is a flex item that fills the bar, so its box lies over the
       mark and swallowed the click: the logo was a link to the front page
       everywhere, but only reachable on a phone, where the menu collapses.
       A layer of its own puts it back in front. */
    z-index: 1;
    inset-block: 0;
    inset-inline-start: var(--tekme-gap-s);
    display: flex;
    align-items: center;
    padding: 0;
    background: none;
}

nav .brand:hover {
    background: none;
}

/* The logo is a JPEG on white, so it would show a white card against the
   cream bar. Multiplying drops the white and keeps the ink. A transparent
   PNG or an SVG would make this unnecessary. */
nav .brand img {
    display: block;
    block-size: 2.6rem;
    inline-size: auto;
    mix-blend-mode: multiply;
}

/* Below main.css's own menu breakpoint the collapsed menu puts "Meniu" at the
   start of the bar, so the mark moves to the other end. */
@media (max-width: 48em) {
    nav .brand {
        inset-inline-start: auto;
        inset-inline-end: var(--tekme-gap-s);
    }
}


/* ==========================================================================
   Front page masthead (home.hbs)
   --------------------------------------------------------------------------
   Its own full-width band, so it needs none of the negative-margin tricks
   that a section inside a centred column would.
   ========================================================================== */

/*
 * main.css makes the body a column flexbox. A flex item with `margin-inline:
 * auto` does not stretch to its container, so both of the front page's
 * top-level blocks state a definite width instead of relying on stretch —
 * otherwise they size to their own content and the page scrolls sideways.
 * border-box keeps the gutters inside that width.
 */
.masthead,
.masthead *,
.home-sections,
.home-sections * {
    box-sizing: border-box;
}

.masthead,
.home-sections {
    inline-size: 100%;
}

.masthead {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tekme-gap-m);
    padding: var(--tekme-gap-l) var(--tekme-gutter);
    text-align: center;
    background: linear-gradient(180deg,
        var(--tekme-surface) 0%,
        var(--tekme-ground) 100%);
}

/* The logo is the page's h1 — its alt text carries the school's name, so no
   second copy of the name is needed underneath. */
.masthead-brand {
    margin: 0;
    padding: 0;
    border: 0;
    inline-size: min(82%, 30rem);
}

/* Multiplied for the same reason as the one in the menu bar: the file is a
   JPEG on white, which would otherwise sit in a white box on the cream. */
.masthead-brand img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    mix-blend-mode: multiply;
}

/*
 * The cross-fading words. Every word occupies the same grid cell, so the
 * block is as tall as the tallest of them and nothing shifts as they change.
 */
.masthead-words {
    display: grid;
    margin: 0;
    font-family: "AmaticBold", Georgia, Times, serif;
    font-size: var(--tekme-step-3);
    line-height: 1;
    color: var(--tekme-navy);
}

.masthead-words > span {
    grid-area: 1 / 1;
    min-inline-size: 0;
    opacity: 0;
    transition: opacity 0.7s ease-in-out;
}

.masthead-words > span.is-current {
    opacity: 1;
}

.masthead-lede {
    max-inline-size: var(--tekme-measure);
    margin: 0;
    font-size: var(--tekme-step-1);
    font-weight: 400;
    line-height: 1.4;
    color: var(--tekme-muted);
}

.masthead-cta {
    padding: 0.7em 2em;
    border-radius: 0.2em;
    background: var(--tekme-navy);
    color: var(--tekme-surface);
    font-size: var(--tekme-step-0);
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease;
}

.masthead-cta:hover {
    background: var(--tekme-river);
}

/*
 * The school's logo and the Cambridge mark, side by side.
 *
 * No breakpoint: the two are flex items with widths of their own, so they sit
 * in a row while the row has space for both and the mark drops below the logo
 * when it does not — which on a phone is every time.
 *
 * The gap is small because the mark brings its own separation: the clear
 * space Cambridge require is padding on the mark itself, so a wide gap here
 * would only push the pair apart until the row no longer fits them.
 */
.masthead-identity {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--tekme-gap-s);
    inline-size: 100%;
}

/*
 * The Cambridge English Preparation Centre mark.
 *
 * Everything here comes off one number, --mark, the width the logo is drawn
 * at. Cambridge measure the clear space around the logo in units of the teal
 * block's height: its full height to the left and right, half of it above and
 * below. In the supplied file that block is 122px of a 519×288 image, so the
 * side clear space is 122/519 of the logo's width and the top and bottom are
 * half that. Both are written as fractions of --mark, so a replacement file
 * of any size is spaced correctly as long as the artwork is theirs, unaltered.
 *
 * The size is bounded by their rule that the school's logo be at least 20%
 * the larger, measured on the artwork rather than on the box around it: the
 * school's file is 1254×1254 with 996 of that width inked, so its visible
 * width is 0.79 of the box, while this file is inked edge to edge. The two
 * bounds below keep the school's mark between 1.3 and 1.7 times the larger
 * from a 280px phone to a desktop — inside the rule with room to spare, and
 * as large as that leaves it.
 *
 * No `mix-blend-mode` here, unlike the school's logo beside it: the file is
 * already transparent, and multiplying it against the cream would shift the
 * teal, which their terms do not allow.
 */
.masthead-accreditation {
    --mark: min(18rem, 45vw);
    margin: 0;
    padding-inline: calc(var(--mark) * 0.235);
    padding-block: calc(var(--mark) * 0.118);
}

.masthead-accreditation img {
    display: block;
    inline-size: var(--mark);
    block-size: auto;
}

/* Partner and accreditation marks. Hidden until at least one is set in
   Settings → Design, so the band never shows an empty row. */
.masthead-partners {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--tekme-gap-m);
    margin: 0;
    padding: 0;
    list-style: none;
}

.masthead-partners:empty {
    display: none;
}

.masthead-partners img {
    display: block;
    block-size: clamp(2rem, 7vw, 3.25rem);
    inline-size: auto;
    mix-blend-mode: multiply;
}


/* ==========================================================================
   Front page sections
   --------------------------------------------------------------------------
   One column of content. The track sizing is the only layout rule that
   changes with width, and it changes on its own: `auto-fit` fits as many
   whole tracks as the container allows, which is one until there is room for
   two. Everything spans the full row except the bookmark cards, which take a
   track each and so pair up exactly when there is room.
   ========================================================================== */

.home-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: var(--tekme-gap-s) var(--tekme-gap-m);
    max-inline-size: var(--tekme-content);
    margin-inline: auto;
    padding: var(--tekme-gap-l) var(--tekme-gutter);
    color: var(--tekme-ink);
    /* main.css sets the body to Roboto 100, too light to read at body size.
       The front page carries most of the school's text now. */
    font-weight: 400;
    font-size: var(--tekme-step-0);
    line-height: 1.65;
}

/* `min-inline-size: 0` lets a track shrink past its contents' intrinsic
   width, which is what stops a long unbroken line from widening the grid. */
.home-sections > * {
    grid-column: 1 / -1;
    min-inline-size: 0;
    margin: 0;
}

.home-sections p {
    max-inline-size: var(--tekme-measure);
}

.home-sections h2 {
    margin-block-start: var(--tekme-gap-m);
    padding-block-start: var(--tekme-gap-s);
    border-top: 1px solid var(--tekme-line);
    font-size: var(--tekme-step-2);
    line-height: 1.1;
    color: var(--tekme-navy);
    text-wrap: balance;
}

/* The first heading opens the page rather than separating two sections. */
.home-sections > h2:first-child {
    margin-block-start: 0;
    padding-block-start: 0;
    border-top: 0;
}

.home-sections h3 {
    margin-block-start: var(--tekme-gap-s);
    font-size: var(--tekme-step-1);
    line-height: 1.2;
    color: var(--tekme-navy);
}

/* A bookmark card is a section of its own and spans the row — unless it has
   another one directly beside it, in which case the two take a track each
   and pair up as soon as the grid has room for a second column. Mokykla
   beside Darželis on a wide screen, stacked on a narrow one, with no
   breakpoint deciding it. */
.home-sections > .kg-bookmark-card:has(+ .kg-bookmark-card),
.home-sections > .kg-bookmark-card + .kg-bookmark-card {
    grid-column: auto;
}

.home-sections :focus-visible,
nav :focus-visible {
    outline: 2px solid var(--tekme-river);
    outline-offset: 0.15em;
}

/* Lists. The projects list is the one whose items are links, and it gets
   columns; anything else is a plain line-per-item list, which is what the
   front page's monthly rates want. */
.home-sections ul {
    display: grid;
    gap: 0.35em;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * A list whose every item is nothing but a link is a menu, not prose, and is
 * set as cards in columns. `> li > a:only-child` is what draws that line: a
 * list that mentions a link inside a sentence stays prose.
 */
.home-sections ul:has(> li > a:only-child) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.home-sections ul:has(> li > a:only-child) li {
    border: 1px solid var(--tekme-line);
    border-inline-start: 0.2em solid var(--tekme-river);
    border-radius: 0.15em;
    background: var(--tekme-surface);
    transition: border-color 0.15s ease;
}

.home-sections ul:has(> li > a:only-child) li:hover {
    border-color: var(--tekme-river);
}

.home-sections ul:has(> li > a:only-child) a {
    display: block;
    padding: 0.8em 1.1em;
    border: 0;
    color: var(--tekme-navy);
    font-weight: 500;
    text-decoration: none;
}

/* Uploaded images — the price table is one. Scoped to the image card rather
   than to `figure`, because every Ghost card is a figure: a looser selector
   here also caught the bookmark thumbnails and reset their height. */
.home-sections .kg-image-card img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    border: 1px solid var(--tekme-line);
    border-radius: 0.15em;
}

/* A caption is a credit line, not body text — the map's ODbL attribution is
   the first of them. Same treatment as on the inner pages. */
.home-sections figcaption {
    margin-block-start: 0.4em;
    font-size: .85em;
    color: var(--tekme-muted);
    text-align: end;
}

.home-sections figcaption a {
    color: inherit;
}


/*
 * main.css pins the inner pages at a flat `1rem`: `.article` is `font-size: 0`
 * — the old inline-block whitespace trick — and `.article-row` sets 1rem back
 * in rem, so nothing the body says reaches the text. The reading size is
 * restored here, the same step the front page sections use.
 */
.content-section {
    font-size: var(--tekme-step-0);
}

/*
 * A page whose content is a run of bookmark cards — /projektai/ is the one —
 * lays them out in columns the way the front page does, and for the same
 * reason: the cards are a menu, and a menu of seven full-width banners is a
 * scroll. Only such a page becomes a grid, so the prose pages are untouched.
 */
.content-section:has(.kg-bookmark-card) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: var(--tekme-gap-s) var(--tekme-gap-m);
}

.content-section:has(.kg-bookmark-card) > * {
    grid-column: 1 / -1;
    min-inline-size: 0;
}

.content-section:has(.kg-bookmark-card) > .kg-bookmark-card {
    grid-column: auto;
}


/* ==========================================================================
   Cards this theme styles itself
   --------------------------------------------------------------------------
   package.json excludes `bookmark`, `callout` and `header` from Ghost's card
   assets, so these rules are the only ones in play and plain classes are
   enough. They are deliberately not scoped to the front page: a bookmark card
   dropped onto any page should look like this one.
   ========================================================================== */

.kg-bookmark-card {
    margin-block: var(--tekme-gap-xs);
}

.kg-bookmark-container {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    border: 1px solid var(--tekme-line);
    border-radius: 0.2em;
    background: var(--tekme-surface);
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.kg-bookmark-container:hover {
    border-color: var(--tekme-river);
    box-shadow: 0 0.4em 1.4em rgb(20 80 127 / 13%);
}

/* The ratio shapes a card-width thumbnail; the cap keeps a full-width card
   from turning its picture into a billboard. Together they give every
   bookmark the same banner height whatever track it lands in. */
.kg-bookmark-thumbnail {
    order: -1;
    aspect-ratio: 16 / 9;
    max-block-size: 15rem;
    background: var(--tekme-ground);
}

/* Two classes deep on purpose: the inner pages' own `.content-section img`
   rule is equally specific and sits later in this file, so a bookmark card on
   such a page took `block-size: auto` from it and stood in its thumbnail box
   at its own proportions, with the box's fill showing under it. */
.kg-bookmark-card .kg-bookmark-thumbnail img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.kg-bookmark-content {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    padding: 1.2em 1.4em 1.5em;
}

.kg-bookmark-title {
    font-family: "AmaticBold", Georgia, Times, serif;
    font-size: var(--tekme-step-2);
    line-height: 1;
    color: var(--tekme-navy);
}

/* Clamped so that a card quoting a long sentence from its page does not set
   the height of every card beside it. */
.kg-bookmark-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    color: var(--tekme-muted);
}

/* Ghost emits these three for link previews it fetched metadata for. They are
   noise on a card pointing at a page of this same site, but a theme has to
   style them rather than leave them to fall back to nothing. */
.kg-bookmark-metadata {
    display: flex;
    align-items: center;
    gap: 0.4em;
    font-size: var(--tekme-step--1);
    color: var(--tekme-muted);
}

.kg-bookmark-icon {
    block-size: 1.2em;
    inline-size: 1.2em;
}

.kg-bookmark-author,
.kg-bookmark-publisher {
    display: none;
}

/* The callout card carries the facts strip. */
.kg-callout-card {
    padding: 1.1em 1.4em;
    border-radius: 0.2em;
    background: var(--tekme-navy);
}

.kg-callout-emoji {
    display: none;
}

.kg-callout-text {
    color: var(--tekme-surface);
    text-align: center;
    text-wrap: balance;
    line-height: 1.6;
}


/* ==========================================================================
   Tables
   --------------------------------------------------------------------------
   Ghost 5 has no table card, but its markdown card runs markdown-it, which
   turns a pipe table into real <table> markup — so the fee tables stay
   editable in the admin as markdown rather than as raw HTML.
   `renderMarkdownNode` returns `type: 'inner'`, meaning the card emits no
   wrapper element of its own: the table lands straight in the content and
   there is nothing around it to make scrollable. So the table is its own
   scroll container, which is what `display: block` here is for. Without it a
   five-column table sets the width of the whole page on a phone.
   ========================================================================== */

/*
 * Set the way a journal would: booktabs. No vertical rules, no fills, no
 * banding — three horizontal rules only, heavy above and below the table and
 * light under the header, with space and alignment doing the rest of the
 * work. Rules run the width of the table and stop there, so the outermost
 * cells carry no outer padding.
 */
.home-sections table,
.content-section table {
    display: block;
    overflow-x: auto;
    max-inline-size: 100%;
    margin-block: 2em;
    border-collapse: collapse;
    font-size: var(--tekme-step--1);
    font-variant-numeric: tabular-nums;
    line-height: 1.45;
}

.home-sections th,
.home-sections td,
.content-section th,
.content-section td {
    padding: 0.55em 1.4em;
    border: 0;
    text-align: start;
    vertical-align: baseline;
}

.home-sections th:first-child,
.home-sections td:first-child,
.content-section th:first-child,
.content-section td:first-child {
    padding-inline-start: 0;
}

.home-sections th:last-child,
.home-sections td:last-child,
.content-section th:last-child,
.content-section td:last-child {
    padding-inline-end: 0;
}

/* \toprule and \midrule. Column headings stay on one line — that is what
   pushes a wide table into its scroll rather than crushing the columns. */
.home-sections thead th,
.content-section thead th {
    border-block-start: 2px solid var(--tekme-ink);
    border-block-end: 1px solid var(--tekme-ink);
    padding-block: 0.5em;
    font-weight: 600;
    white-space: nowrap;
}

/* \bottomrule */
.home-sections tbody tr:last-child td,
.content-section tbody tr:last-child td {
    border-block-end: 2px solid var(--tekme-ink);
}

/* markdown's pipe tables cannot mark a row header, so the first column is
   made to read as one — and pinned, so that a table wide enough to scroll
   sideways still says which row is which. The ground colour is the page's
   own, so the column reads as unfilled while still being opaque enough to
   hide the cells sliding under it. */
.home-sections tbody td:first-child,
.content-section tbody td:first-child {
    font-weight: 600;
}

.home-sections th:first-child,
.home-sections td:first-child,
.content-section th:first-child,
.content-section td:first-child {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    background: var(--tekme-ground);
}


/* ==========================================================================
   Inner pages
   ========================================================================== */

/*
 * Ghost renders uploaded PDFs as file cards. The Jekyll site rendered them
 * via _includes/pdf_link.html as a thumbnail + title row. These rules pull
 * Ghost's default card back toward the old look, so that a document a teacher
 * drag-drops matches the ones that were ported.
 */
.content-section .kg-file-card {
    margin: 0 0 0.8em;
}

.content-section .kg-file-card-container {
    display: flex;
    align-items: center;
    gap: 0.8em;
    padding: 0.7em 1em;
    border: 1px solid #d7d7d7;
    border-radius: 0.25em;
    background: var(--tekme-surface);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, background .15s ease;
}

.content-section .kg-file-card-container:hover {
    border-color: #83a0be;
    background: #f7fbff;
}

.content-section .kg-file-card-title {
    font-weight: 600;
    line-height: 1.3;
}

.content-section .kg-file-card-caption {
    display: none;
}

.content-section .kg-file-card-metadata {
    font-size: .8em;
    color: #7e7e7e;
}

.content-section .kg-file-card-filesize::before {
    content: " · ";
}

/* Ghost's editor offers wide/full image widths; themes must style them. */
.content-section .kg-width-wide {
    max-inline-size: 65rem;
    margin-inline: auto;
}

.content-section .kg-width-full {
    max-inline-size: 100%;
}

/* Keep in-content images from blowing past the column. */
.content-section img {
    max-inline-size: 100%;
    block-size: auto;
}

/*
 * Ghost writes an embed's own width and height onto the iframe — the video on
 * /sodas/ carries width="560" — which scrolls the whole page sideways on a
 * phone. The embed card is a video in every use on this site, so it gets the
 * ratio; the bare rule is a floor for any other iframe.
 */
.content-section iframe {
    max-inline-size: 100%;
}

.content-section .kg-embed-card iframe {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 9;
}

/* Ghost wraps images in figures; the old CSS had no rules for these. */
.content-section figure {
    margin-block: 1.5em;
}

.content-section figcaption {
    font-size: .85em;
    color: #7e7e7e;
    text-align: end;
}


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

/*
 * main.css gives the footer a fixed 36px box, which is one line's worth. On a
 * phone the line wraps and everything past the first line falls outside the
 * tint. The band takes its content's height instead, and pads symmetrically —
 * main.css pads only the top, which the fixed height used to hide.
 */
body footer {
    block-size: auto;
    padding-block: 0.5rem;
}

body footer p {
    padding-block-start: 0;
    line-height: 1.6;
}


/* ==========================================================================
   Lightbox (assets/js/lightbox-cards.js)
   ========================================================================== */

.tekme-zoomable {
    cursor: zoom-in;
}

.tekme-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgb(0 0 0 / 85%);
    align-items: center;
    justify-content: center;
}

.tekme-lightbox.is-open {
    display: flex;
}

.tekme-lightbox img {
    max-inline-size: 90vw;
    max-block-size: 85vh;
    border-radius: 0.25em;
    touch-action: pan-y;
}

.tekme-lightbox button {
    position: absolute;
    background: none;
    border: 0;
    color: #fff;
    cursor: pointer;
    font-size: 3rem;
    line-height: 1;
    padding: .25em .5em;
    opacity: .75;
}

.tekme-lightbox button:hover {
    opacity: 1;
}

.tekme-lightbox-close {
    inset-block-start: 0;
    inset-inline-end: 0;
}

.tekme-lightbox-prev {
    inset-inline-start: 0;
}

.tekme-lightbox-next {
    inset-inline-end: 0;
}

.tekme-lightbox-caption {
    position: absolute;
    inset-block-end: 1rem;
    inline-size: 100%;
    text-align: center;
    color: #fff;
    opacity: .75;
    font-size: .9em;
}


/* ==========================================================================
   Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}