Template:ShortStory/styles.css

.story-card {
    max-width: 980px;
    margin: 0 auto;
    padding: 16px;
    border: 1px solid #c8ccd1;
    border-radius: 12px;
    background: #fff
}

.story-header {
    margin-bottom: 14px
}

.story-title {
    font-size: 1.75em;
    line-height: 1.15;
    font-weight: 700
}

.story-byline {
    margin-top: 6px;
    color: #54595d
}

.story-logline {
    margin-top: 10px;
    font-size: 1.05em
}

.story-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px
}

.story-field {
    flex: 1 1 240px;
    min-width: 240px;
    padding: 10px;
    border: 1px solid #eaecf0;
    border-radius: 10px;
    background: #f8f9fa
}

.story-field-full {
    flex: 1 1 100%;
    min-width: 0
}

.story-label {
    font-size: .85em;
    color: #54595d;
    margin-bottom: 6px
}

.story-value {
    font-size: 1em
}

.story-link {
    margin-top: 6px
}

.story-link:first-child {
    margin-top: 0
}

.story-chip {
    display: inline-block;
    margin: 0 6px 6px 0;
    padding: 2px 10px;
    border: 1px solid #c8ccd1;
    border-radius: 999px;
    background: #fff;
    font-size: .9em;
    line-height: 1.6;
    color: #202122
}

.story-badge {
    display: inline-block;
    vertical-align: middle;
    padding: 1px 8px;
    border: 1px solid #c8ccd1;
    border-radius: 999px;
    font-size: .78em;
    line-height: 1.6;
    background: #fff;
    color: #202122
}

.story-badge-free {
    border-color: #a3d3ff
}

.story-badge-paid {
    border-color: #f2c2c2
}

.story-section {
    margin-top: 18px
}

.story-section-title {
    font-size: 1.2em;
    font-weight: 700;
    margin-bottom: 6px
}

.story-section-body {
    line-height: 1.55
}

@media (max-width:640px) {
    .story-card {
        padding: 12px;
        border-radius: 10px
    }

    .story-field {
        flex: 1 1 100%;
        min-width: 0
    }

    .story-title {
        font-size: 1.5em
    }
}