/*
Theme Name: Teeth In The Margin
Theme URI: https://example.com/teeth-in-the-margin
Author: Custom theme for Maena Lindström
Description: A dark literary WordPress theme for short fiction, folklore notes, diary entries, and an author sidebar. Designed for Teeth In The Margin.
Version: 1.0.7
Requires at least: 6.2
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: teeth-in-the-margin
Tags: blog, one-column, two-columns, custom-menu, custom-logo, featured-images, theme-options, translation-ready
*/

:root {
  --tim-bg: #080a0b;
  --tim-panel: #0d1011;
  --tim-panel-soft: #111516;
  --tim-ink: #d9d0c0;
  --tim-muted: #a49b8e;
  --tim-gold: #a68b62;
  --tim-gold-soft: #756246;
  --tim-line: rgba(166,139,98,.34);
  --tim-shadow: rgba(0,0,0,.58);
  --tim-serif: Georgia, 'Times New Roman', Times, serif;
  --tim-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --tim-max: 1420px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--tim-ink);
  background:
    radial-gradient(circle at 20% 0%, rgba(34,47,50,.22), transparent 33rem),
    linear-gradient(180deg, #090b0c 0%, #07090a 100%);
  font-family: var(--tim-serif);
  font-size: 18px;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}
body:before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  z-index: 9999;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--tim-gold); text-decoration: none; }
a:hover, a:focus { color: #d7c29b; }
button, input, textarea, select { font: inherit; }
.screen-reader-text { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.site-shell { max-width: var(--tim-max); margin: 0 auto; border-left: 1px solid var(--tim-line); border-right: 1px solid var(--tim-line); background: rgba(7,9,10,.8); box-shadow: 0 0 80px var(--tim-shadow); }
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(6,8,9,.94); border-bottom: 1px solid var(--tim-line); backdrop-filter: blur(10px); }
.site-header__inner { min-height: 76px; padding: 0 30px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.site-branding { min-width: 0; }
.site-title { margin:0; font-size: clamp(1rem, 2vw, 1.5rem); letter-spacing:.24em; text-transform:uppercase; font-weight:500; }
.site-title a { color:#d9cdb8; }
.site-description { display:none; }
.custom-logo { max-height: 48px; width:auto; }

.menu-toggle { display:none; border:1px solid var(--tim-line); background:transparent; color:var(--tim-ink); padding:.5rem .7rem; cursor:pointer; }
.primary-menu { list-style:none; display:flex; align-items:center; gap:2rem; padding:0; margin:0; }
.primary-menu a { color:#c9bba2; text-transform:uppercase; letter-spacing:.16em; font-size:.82rem; }
.primary-menu a:hover { color:#fff0cf; }

.front-grid { display:grid; grid-template-columns:minmax(0, 3fr) minmax(280px, 1fr); align-items:start; }
.front-main { min-width:0; border-right:1px solid var(--tim-line); }
.hero { position:relative; min-height:650px; border-bottom:1px solid var(--tim-line); overflow:hidden; isolation:isolate; background:#080b0c; }
/* A blurred cover layer fills the frame while the real image can stay fully visible. */
.hero:before { content:''; position:absolute; inset:-24px; z-index:0; background-image:var(--tim-hero-bg); background-size:cover; background-position:center; filter:blur(18px) saturate(.7) brightness(.45); transform:scale(1.06); opacity:.72; }
.hero__image { position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:var(--tim-hero-fit, cover); object-position:center center; filter:saturate(.78) brightness(.68) contrast(1.04); }
.hero:after { content:''; position:absolute; inset:0; z-index:2; background:linear-gradient(90deg, rgba(2,5,6,.92) 0%, rgba(4,7,8,.58) 42%, rgba(2,4,5,.14) 100%), linear-gradient(0deg, rgba(2,4,5,.66), transparent 42%); }
.hero__content { position:relative; z-index:3; min-height:650px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:70px clamp(30px, 7vw, 95px); max-width:650px; }
.hero__title { margin:0; color:#ded1bb; text-transform:uppercase; letter-spacing:.18em; font-size:clamp(3.3rem, 7vw, 6.3rem); line-height:.9; font-weight:400; text-shadow:0 4px 22px rgba(0,0,0,.55); }
.hero__ornament { color:var(--tim-gold); font-size:1.5rem; margin:1.7rem 0 .8rem; letter-spacing:.4em; }
.hero__subtitle { margin:0; color:#c7bda9; font-style:italic; font-size:clamp(1rem, 1.6vw, 1.35rem); max-width:34ch; }

.content-band { padding:36px; border-bottom:1px solid var(--tim-line); }
.home-features { display:grid; grid-template-columns:1fr 1fr; gap:36px; }
.feature-card { min-width:0; }
.section-kicker { color:#bca47e; text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; text-align:center; margin:0 0 18px; }
.feature-media { display:block; width:100%; overflow:hidden; border:1px solid var(--tim-line); background:radial-gradient(circle at center, #151a1c 0%, #080b0c 72%); }
.feature-media img { display:block; width:100%; height:auto; filter:saturate(.75) brightness(.76); transition:transform .4s ease, filter .4s ease; }
.feature-card:hover .feature-media img { transform:scale(1.025); filter:saturate(.86) brightness(.8); }
.feature-title { margin:20px 0 12px; color:#d5c3a3; text-align:center; text-transform:uppercase; letter-spacing:.08em; font-weight:400; line-height:1.25; font-size:clamp(1.3rem, 2.1vw, 2rem); }
.feature-excerpt { color:#aaa091; text-align:center; max-width:40ch; margin:0 auto 18px; }
.tim-button { display:inline-block; border:1px solid var(--tim-gold-soft); color:#cbb892; background:rgba(166,139,98,.05); text-transform:uppercase; letter-spacing:.14em; font-size:.74rem; padding:.72rem 1.15rem; transition:.2s ease; }
.tim-button:hover { background:rgba(166,139,98,.14); color:#f3dfb8; border-color:var(--tim-gold); }
.feature-cta { text-align:center; }


.home-diary { margin-top:44px; padding-top:36px; border-top:1px solid var(--tim-line); }
.diary-feature { min-width:0; }
.diary-feature__grid { display:grid; grid-template-columns:minmax(230px, .9fr) minmax(0, 1.1fr); gap:30px; align-items:start; }
.diary-feature__media { display:block; width:100%; overflow:hidden; border:1px solid var(--tim-line); background:radial-gradient(circle at center, #151a1c 0%, #080b0c 72%); }
.diary-feature__media img { display:block; width:100%; height:auto; filter:saturate(.72) brightness(.78); transition:transform .4s ease, filter .4s ease; }
.diary-feature:hover .diary-feature__media img { transform:scale(1.02); filter:saturate(.84) brightness(.82); }
.diary-feature__body { display:flex; flex-direction:column; justify-content:center; padding:8px 4px; }
.diary-date { margin:0 0 .55rem; color:#8e806c; font-size:.76rem; text-transform:uppercase; letter-spacing:.14em; }
.diary-title { margin:.15rem 0 .9rem; text-align:left; }
.diary-excerpt { max-width:52ch; margin:0 0 1.2rem; text-align:left; }
.diary-cta { text-align:left; }

.maena-sidebar { position:sticky; top:76px; min-height:calc(100vh - 76px); padding:34px 26px 40px; background:linear-gradient(180deg, rgba(15,18,19,.96), rgba(7,9,10,.98)); }
.sidebar-heading { margin:0 0 22px; text-align:center; color:#bda57e; text-transform:uppercase; letter-spacing:.14em; font-size:.88rem; font-weight:400; }
.sidebar-heading:before, .sidebar-heading:after { content:'—'; color:var(--tim-gold-soft); margin:0 .7em; }
.maena-portrait { width:100%; overflow:hidden; border:1px solid var(--tim-line); margin-bottom:22px; background:radial-gradient(circle at center, #171b1c 0%, #080a0b 76%); }
.maena-portrait img { display:block; width:100%; height:auto; filter:saturate(.82) brightness(.82) contrast(1.02); }
.maena-name { color:#d3c19f; text-transform:uppercase; letter-spacing:.09em; font-weight:400; font-size:1.45rem; margin:.4rem 0 .9rem; }
.maena-copy { color:#aaa091; font-size:.96rem; line-height:1.65; }
.maena-copy p { margin:.7em 0; }
.sidebar-divider { height:1px; background:var(--tim-line); margin:28px 0; position:relative; }
.sidebar-divider:after { content:'✦'; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:var(--tim-panel); padding:0 .55rem; color:var(--tim-gold-soft); }
.sidebar-note { color:#9d9384; font-style:italic; font-size:.9rem; }
.sidebar-links { list-style:none; margin:0; padding:0; }
.sidebar-links li { border-bottom:1px solid rgba(166,139,98,.16); }
.sidebar-links a { display:block; padding:.7rem 0; color:#b7aa95; }
.sidebar-links a:before { content:'›'; color:var(--tim-gold); margin-right:.55em; }

.site-footer { border-top:1px solid var(--tim-line); padding:28px 24px 34px; text-align:center; color:#786e61; background:#060809; }
.footer-mark { color:#917851; font-size:1.65rem; }
.footer-quote { text-transform:uppercase; letter-spacing:.16em; font-size:.7rem; color:#8f806b; margin:.4rem 0 .3rem; }
.footer-copy { font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; }

.content-wrap { max-width:860px; padding:70px 34px 90px; margin:0 auto; }
.entry-header { margin-bottom:2rem; text-align:center; }
.entry-kicker { text-transform:uppercase; letter-spacing:.15em; font-size:.74rem; color:#9d8764; }
.entry-title { color:#dac7a4; font-size:clamp(2.4rem, 6vw, 5rem); font-weight:400; line-height:.98; margin:.4rem 0 1rem; }
.entry-meta { color:#82796c; font-size:.86rem; }
.entry-featured { margin:0 0 2.4rem; border:1px solid var(--tim-line); background:#090c0d; overflow:hidden; }
.entry-featured img { width:100%; height:auto; }
.entry-content { color:#c0b8aa; font-size:1.08rem; }
.entry-content > * { max-width:760px; margin-left:auto; margin-right:auto; }
.entry-content h2, .entry-content h3 { color:#d3c19f; font-weight:400; }
.entry-content blockquote { border-left:1px solid var(--tim-gold); padding-left:1.5rem; color:#b7ab99; font-style:italic; }
.entry-content hr { border:0; border-top:1px solid var(--tim-line); margin:3rem auto; }

.archive-header { text-align:center; padding:70px 30px 20px; }
.archive-title { text-transform:uppercase; letter-spacing:.12em; color:#d5c3a3; font-weight:400; font-size:clamp(2rem, 5vw, 4rem); margin:0; }
.archive-description { color:#948b7d; max-width:60ch; margin:1rem auto 0; }
.post-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px; max-width:1100px; padding:35px 30px 80px; margin:0 auto; }
.post-card { border:1px solid var(--tim-line); background:rgba(14,17,18,.7); padding:0 0 22px; }
.post-card__image { display:block; width:100%; overflow:hidden; background:radial-gradient(circle at center, #151a1c 0%, #080b0c 72%); }
.post-card__image img { display:block; width:100%; height:auto; filter:saturate(.78) brightness(.78); }
.post-card__body { padding:20px 22px 0; }
.post-card__title { margin:0 0 .6rem; font-weight:400; color:#d0bea0; }
.post-card__excerpt { color:#9f9688; font-size:.95rem; }
.navigation.pagination { max-width:1100px; margin:0 auto 80px; padding:0 30px; }
.nav-links { display:flex; gap:.6rem; flex-wrap:wrap; }
.page-numbers { border:1px solid var(--tim-line); padding:.45rem .75rem; color:#a99676; }
.page-numbers.current { background:rgba(166,139,98,.12); color:#e4d2af; }

.not-found { text-align:center; padding:120px 30px; }
.not-found h1 { color:#d1bd99; font-weight:400; font-size:clamp(3rem, 8vw, 7rem); margin:0; }

@media (max-width: 1050px) {
  .front-grid { grid-template-columns:1fr; }
  .front-main { border-right:0; }
  .maena-sidebar { position:relative; top:auto; min-height:0; border-top:1px solid var(--tim-line); display:grid; grid-template-columns:minmax(220px, .7fr) 1fr; gap:28px; align-items:start; }
  .maena-sidebar .sidebar-heading, .maena-sidebar .sidebar-divider, .maena-sidebar .sidebar-links { grid-column:1/-1; }
}

@media (max-width: 760px) {
  body { font-size:16px; }
  .site-header__inner { min-height:68px; padding:0 18px; }
  .menu-toggle { display:block; }
  .main-navigation { position:relative; }
  .primary-menu { display:none; position:absolute; right:0; top:48px; min-width:230px; padding:16px; flex-direction:column; align-items:stretch; gap:0; background:#0b0e0f; border:1px solid var(--tim-line); box-shadow:0 20px 40px rgba(0,0,0,.45); }
  .primary-menu.is-open { display:flex; }
  .primary-menu a { display:block; padding:.8rem .5rem; }
  .hero, .hero__content { min-height:540px; }
  .hero__content { padding:55px 25px; }
  .hero__title { font-size:clamp(2.7rem, 17vw, 4.9rem); }
  .content-band { padding:28px 20px; }
  .home-features { grid-template-columns:1fr; gap:45px; }
  .diary-feature__grid { grid-template-columns:1fr; gap:22px; }
  .diary-feature__body { padding:0; }
  .diary-title, .diary-excerpt, .diary-cta, .diary-date { text-align:center; }
  .diary-excerpt { margin-left:auto; margin-right:auto; }
  .maena-sidebar { display:block; padding:30px 22px 38px; }
  .maena-portrait { max-width:360px; margin-left:auto; margin-right:auto; }
  .post-grid { grid-template-columns:1fr; padding-left:20px; padding-right:20px; }
  .content-wrap { padding-left:22px; padding-right:22px; }
}


/* About page */
.about-page { max-width: 1040px; }
.about-page__header { margin-bottom: 3rem; }
.about-page__ornament { color: var(--tim-gold); letter-spacing: .4em; margin-top: 1rem; }
.about-page__grid {
  display: grid;
  grid-template-columns: minmax(250px, .78fr) minmax(0, 1.22fr);
  gap: clamp(34px, 6vw, 72px);
  align-items: start;
}
.about-page__portrait {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--tim-line);
  background: #0a0d0e;
  box-shadow: 0 24px 60px rgba(0,0,0,.34);
}
.about-page__portrait img {
  width: 100%;
  height: auto;
  filter: saturate(.82) brightness(.86) contrast(1.02);
}
.about-page__content { padding-top: .15rem; }
.about-page__content h2 {
  margin-top: 0;
  color: #d3c19f;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 400;
}
.about-page__content > p:first-of-type { font-size: 1.12em; color: #c9bdab; }

@media (max-width: 760px) {
  .about-page__grid { grid-template-columns: 1fr; }
  .about-page__portrait { max-width: 430px; width: 100%; margin: 0 auto; }
}