/* FROM70 */



/* ==========================================================================

   CSS Variables

   ========================================================================== */



:root {

  /* Colors */

  --color-bg:        #F5F0E8;       /* 古紙のようなオフホワイト */

  --color-bg-dark:   #1A1612;       /* ディープブラウンブラック */

  --color-ink:       #1A1612;       /* メインテキスト */

  --color-ink-light: #5C5248;       /* サブテキスト */

  --color-ink-muted: #9C9288;       /* ミュートテキスト */

  --color-accent:    #C8392B;       /* 70年代レッド */

  --color-accent-2:  #D4854A;       /* テラコッタオレンジ */

  --color-rule:      #C8B99A;       /* 罫線 */

  --color-surface:   #EDE7D9;       /* カード背景 */



  /* Typography */

  --font-display:    'Playfair Display', 'Noto Serif JP', Georgia, serif;

  --font-body:       'EB Garamond', 'Noto Serif JP', Georgia, serif;

  --font-ui:         'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', sans-serif;

  --font-mono:       'IBM Plex Mono', 'Courier New', monospace;



  /* Spacing */

  --space-xs:   0.25rem;

  --space-sm:   0.5rem;

  --space-md:   1rem;

  --space-lg:   2rem;

  --space-xl:   4rem;

  --space-2xl:  8rem;



  /* Layout */

  --container-max:     1200px;

  --content-max:       720px;

  --sidebar-width:     280px;

  --gap:               3rem;



  /* Effects */

  --shadow-sm:  0 1px 3px rgba(26,22,18,0.08);

  --shadow-md:  0 4px 16px rgba(26,22,18,0.12);

  --shadow-lg:  0 8px 32px rgba(26,22,18,0.16);

  --transition: 0.25s ease;

  --radius:     2px;

}



/* ==========================================================================

   Google Fonts Import

   ========================================================================== */



@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Zen+Kaku+Gothic+New:wght@300;400;500&family=IBM+Plex+Mono:wght@400;500&display=swap');



/* ==========================================================================

   Reset & Base

   ========================================================================== */



*, *::before, *::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



html {

  font-size: 17px;

  scroll-behavior: smooth;

  -webkit-text-size-adjust: 100%;

}



body {

  font-family: var(--font-body);

  font-size: 1rem;

  line-height: 1.8;

  color: var(--color-ink);

  background-color: var(--color-bg);

  background-image:

    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



img, video {

  max-width: 100%;

  height: auto;

  display: block;

}



a {

  color: inherit;

  text-decoration: none;

  transition: color var(--transition), opacity var(--transition);

}



a:hover {

  color: var(--color-accent);

}



ul, ol {

  list-style: none;

}



/* ==========================================================================

   Container

   ========================================================================== */



.container {

  width: 100%;

  max-width: var(--container-max);

  margin-inline: auto;

  padding-inline: var(--space-lg);

}



/* ==========================================================================

   Header

   ========================================================================== */



.site-header {

  position: sticky;

  top: 0;

  z-index: 100;

  background-color: var(--color-bg-dark);

  border-bottom: 3px solid var(--color-accent);

}



.site-header .container {

  display: flex;

  align-items: center;

  justify-content: space-between;

  height: 64px;

  gap: var(--space-lg);

}



.site-branding {

  display: flex;

  align-items: baseline;

  gap: 0.6rem;

}



.site-title {

  font-family: var(--font-display);

  font-size: 1.6rem;

  font-weight: 700;

  font-style: italic;

  color: var(--color-bg);

  letter-spacing: 0.02em;

  line-height: 1;

}



.site-title span {

  color: var(--color-accent);

}



.site-description {

  font-family: var(--font-ui);

  font-size: 0.6rem;

  font-weight: 300;

  color: var(--color-ink-muted);

  letter-spacing: 0.15em;

  text-transform: uppercase;

  color: rgba(245,240,232,0.45);

}



/* Navigation */

.main-navigation {

  display: flex;

  align-items: center;

}



.main-navigation ul {

  display: flex;

  gap: var(--space-lg);

}



.main-navigation a {

  font-family: var(--font-ui);

  font-size: 0.75rem;

  font-weight: 400;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: rgba(245,240,232,0.75);

  padding-bottom: 2px;

  border-bottom: 1px solid transparent;

  transition: color var(--transition), border-color var(--transition);

}



.main-navigation a:hover,

.main-navigation .current-menu-item a {

  color: var(--color-bg);

  border-color: var(--color-accent);

}



/* ==========================================================================

   Post Hero / Header

   ========================================================================== */



.post-hero {

  background-color: var(--color-bg-dark);

  padding-block: var(--space-xl) calc(var(--space-xl) + 1.5rem);

  position: relative;

  overflow: hidden;

}



/* 装飾的な背景要素 */

.post-hero::before {

  content: '';

  position: absolute;

  top: 0; right: 0;

  width: 40%;

  height: 100%;

  background:

    repeating-linear-gradient(

      -45deg,

      transparent,

      transparent 3px,

      rgba(200,57,43,0.05) 3px,

      rgba(200,57,43,0.05) 4px

    );

  pointer-events: none;

}



.post-hero::after {

  content: '';

  position: absolute;

  bottom: 0; left: 0;

  width: 100%;

  height: 3px;

  background: linear-gradient(

    to right,

    var(--color-accent) 0%,

    var(--color-accent-2) 40%,

    transparent 100%

  );

}



.post-hero .container {

  position: relative;

  z-index: 1;

}



.post-label {

  display: inline-block;

  font-family: var(--font-ui);

  font-size: 0.65rem;

  font-weight: 500;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  color: var(--color-accent);

  background-color: rgba(200,57,43,0.12);

  border: 1px solid rgba(200,57,43,0.3);

  padding: 0.3em 0.8em;

  margin-bottom: var(--space-md);

}



.entry-title {

  font-family: var(--font-display);

  font-size: clamp(2rem, 5vw, 3.2rem);

  font-weight: 700;

  line-height: 1.2;

  color: var(--color-bg);

  letter-spacing: -0.01em;

  max-width: 820px;

  margin-bottom: var(--space-md);

}



.entry-meta {

  display: flex;

  align-items: center;

  gap: var(--space-md);

}



.entry-meta time {

  font-family: var(--font-mono);

  font-size: 0.75rem;

  color: rgba(245,240,232,0.45);

  letter-spacing: 0.05em;

}



/* ==========================================================================

   Post Layout

   ========================================================================== */



.post-layout-wrapper {

  display: grid;

  grid-template-columns: 1fr var(--sidebar-width);

  gap: var(--gap);

  align-items: start;

  padding-top: var(--space-xl);

  padding-bottom: var(--space-2xl);

}



.post-main-content {

  min-width: 0;

}



/* ==========================================================================

   Post Thumbnail

   ========================================================================== */



.post-thumbnail {

  width: 100%;

  aspect-ratio: 16 / 9;

  overflow: hidden;

  margin-bottom: var(--space-xl);

  position: relative;

}



.post-thumbnail::after {

  content: '';

  position: absolute;

  inset: 0;

  border: 1px solid rgba(26,22,18,0.08);

  pointer-events: none;

}



.post-thumbnail img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.6s ease;

}



.post-thumbnail:hover img {

  transform: scale(1.02);

}



/* ==========================================================================

   Entry Content

   ========================================================================== */



.entry-content {

  font-family: var(--font-body);

  font-size: 1.05rem;

  line-height: 1.85;

  color: var(--color-ink);

}



/* 見出し */

.entry-content h2 {

  font-family: var(--font-display);

  font-size: 1.55rem;

  font-weight: 700;

  line-height: 1.3;

  color: var(--color-ink);

  margin-top: var(--space-xl);

  margin-bottom: var(--space-md);

  padding-left: var(--space-md);

  border-left: 3px solid var(--color-accent);

}



.entry-content h3 {

  font-family: var(--font-display);

  font-size: 1.25rem;

  font-weight: 700;

  line-height: 1.4;

  margin-top: var(--space-lg);

  margin-bottom: var(--space-sm);

  color: var(--color-ink);

}



.entry-content h4 {

  font-family: var(--font-ui);

  font-size: 0.9rem;

  font-weight: 500;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  margin-top: var(--space-lg);

  margin-bottom: var(--space-sm);

  color: var(--color-ink-light);

}



/* 段落 */

.entry-content p {

  margin-bottom: 1.6em;

}



/* リード文 */

.entry-content > p:first-of-type {

  font-size: 1.15rem;

  line-height: 1.9;

  color: var(--color-ink-light);

}



/* リンク */

.entry-content a {

  color: var(--color-accent);

  border-bottom: 1px solid rgba(200,57,43,0.3);

  padding-bottom: 1px;

  transition: border-color var(--transition);

}



.entry-content a:hover {

  border-color: var(--color-accent);

}



/* 引用 */

.entry-content blockquote {

  margin-block: var(--space-lg);

  padding: var(--space-lg) var(--space-lg) var(--space-lg) calc(var(--space-lg) + var(--space-md));

  background-color: var(--color-surface);

  border-left: 4px solid var(--color-accent-2);

  position: relative;

}



.entry-content blockquote::before {

  content: '\201C';

  font-family: var(--font-display);

  font-size: 4rem;

  color: var(--color-accent-2);

  opacity: 0.3;

  position: absolute;

  top: -0.2em;

  left: 0.2em;

  line-height: 1;

}



.entry-content blockquote p {

  font-style: italic;

  font-size: 1.05rem;

  color: var(--color-ink-light);

  margin-bottom: 0;

}



.entry-content blockquote cite {

  display: block;

  margin-top: var(--space-sm);

  font-family: var(--font-ui);

  font-size: 0.75rem;

  font-style: normal;

  letter-spacing: 0.05em;

  color: var(--color-ink-muted);

}



/* リスト */

.entry-content ul,

.entry-content ol {

  list-style: none;

  margin-bottom: 1.6em;

  padding-left: 0;

}



.entry-content ul li {

  padding-left: 1.4em;

  position: relative;

  margin-bottom: 0.5em;

}



.entry-content ul li::before {

  content: '—';

  position: absolute;

  left: 0;

  color: var(--color-accent);

  font-weight: 700;

}



.entry-content ol {

  counter-reset: ol-counter;

}



.entry-content ol li {

  counter-increment: ol-counter;

  padding-left: 2.2em;

  position: relative;

  margin-bottom: 0.5em;

}



.entry-content ol li::before {

  content: counter(ol-counter, decimal-leading-zero);

  position: absolute;

  left: 0;

  font-family: var(--font-mono);

  font-size: 0.75rem;

  color: var(--color-accent);

  top: 0.2em;

}



/* 水平線 */

.entry-content hr {

  border: none;

  border-top: 1px solid var(--color-rule);

  margin-block: var(--space-xl);

  position: relative;

}



.entry-content hr::after {

  content: '✦';

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  background: var(--color-bg);

  padding-inline: var(--space-sm);

  color: var(--color-rule);

  font-size: 0.8rem;

}



/* コード */

.entry-content code {

  font-family: var(--font-mono);

  font-size: 0.85em;

  background-color: var(--color-surface);

  border: 1px solid var(--color-rule);

  padding: 0.15em 0.4em;

  border-radius: var(--radius);

  color: var(--color-accent);

}



.entry-content pre {

  background-color: var(--color-bg-dark);

  border-radius: var(--radius);

  padding: var(--space-lg);

  overflow-x: auto;

  margin-bottom: 1.6em;

}



.entry-content pre code {

  background: none;

  border: none;

  padding: 0;

  color: rgba(245,240,232,0.85);

  font-size: 0.85rem;

}



/* テーブル */

.entry-content table {

  width: 100%;

  border-collapse: collapse;

  margin-bottom: 1.6em;

  font-size: 0.9rem;

}



.entry-content th {

  font-family: var(--font-ui);

  font-size: 0.7rem;

  font-weight: 500;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  text-align: left;

  padding: 0.6em var(--space-md);

  background-color: var(--color-bg-dark);

  color: var(--color-bg);

  border-bottom: 2px solid var(--color-accent);

}



.entry-content td {

  padding: 0.7em var(--space-md);

  border-bottom: 1px solid var(--color-rule);

  vertical-align: top;

}



.entry-content tr:last-child td {

  border-bottom: none;

}



.entry-content tr:nth-child(even) td {

  background-color: var(--color-surface);

}



/* 画像キャプション */

.entry-content figure {

  margin-bottom: 1.6em;

}



.entry-content figcaption {

  font-family: var(--font-ui);

  font-size: 0.75rem;

  color: var(--color-ink-muted);

  padding-top: var(--space-sm);

  border-top: 1px solid var(--color-rule);

  margin-top: var(--space-sm);

  font-style: italic;

}



/* ==========================================================================

   Author Box

   ========================================================================== */



.author-box {

  margin-top: var(--space-xl);

  padding-top: var(--space-xl);

  border-top: 1px solid var(--color-rule);

  position: relative;

}



.author-box::before {

  content: 'AUTHOR';

  position: absolute;

  top: -0.6em;

  left: 0;

  font-family: var(--font-mono);

  font-size: 0.65rem;

  letter-spacing: 0.2em;

  color: var(--color-accent);

  background: var(--color-bg);

  padding-right: var(--space-sm);

}



.author-inner {

  display: flex;

  gap: var(--space-lg);

  align-items: flex-start;

  padding: var(--space-lg);

  background-color: var(--color-surface);

  border: 1px solid var(--color-rule);

}



.author-avatar {

  flex-shrink: 0;

}



.author-avatar img {

  width: 80px;

  height: 80px;

  border-radius: 50%;

  border: 2px solid var(--color-rule);

  filter: sepia(20%);

}



.author-info {

  flex: 1;

}



.author-label {

  display: block;

  font-family: var(--font-ui);

  font-size: 0.65rem;

  font-weight: 500;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  color: var(--color-ink-muted);

  margin-bottom: 0.3em;

}



.author-name {

  font-family: var(--font-display);

  font-size: 1.1rem;

  font-weight: 700;

  margin-bottom: 0.5em;

  color: var(--color-ink);

}



.author-description {

  font-size: 0.9rem;

  line-height: 1.7;

  color: var(--color-ink-light);

  margin-bottom: var(--space-sm);

}



.author-link {

  display: inline-flex;

  align-items: center;

  gap: 0.4em;

  font-family: var(--font-ui);

  font-size: 0.75rem;

  font-weight: 500;

  letter-spacing: 0.08em;

  color: var(--color-accent);

  text-decoration: none;

  border-bottom: 1px solid rgba(200,57,43,0.3);

  padding-bottom: 1px;

  transition: border-color var(--transition);

}



.author-link:hover {

  border-color: var(--color-accent);

  color: var(--color-accent);

}



.author-link::after {

  content: '→';

  transition: transform var(--transition);

}



.author-link:hover::after {

  transform: translateX(3px);

}



/* ==========================================================================

   Entry Footer / Tags

   ========================================================================== */



.entry-footer {

  margin-top: var(--space-lg);

  padding-top: var(--space-lg);

  border-top: 1px solid var(--color-rule);

}



.post-tags {

  display: flex;

  flex-wrap: wrap;

  gap: var(--space-sm);

  align-items: center;

}



.post-tags a {

  font-family: var(--font-ui);

  font-size: 0.7rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: var(--color-ink-light);

  background-color: transparent;

  border: 1px solid var(--color-rule);

  padding: 0.25em 0.75em;

  border-radius: var(--radius);

  transition:

    color var(--transition),

    border-color var(--transition),

    background-color var(--transition);

}



.post-tags a:hover {

  color: var(--color-accent);

  border-color: var(--color-accent);

  background-color: rgba(200,57,43,0.05);

}



/* ==========================================================================

   Sidebar

   ========================================================================== */



.widget-area {

  position: sticky;

  top: calc(64px + var(--space-lg));

}



.widget {

  margin-bottom: var(--space-lg);

  padding: var(--space-lg);

  background-color: var(--color-surface);

  border: 1px solid var(--color-rule);

  position: relative;

}



.widget-title {

  font-family: var(--font-ui);

  font-size: 0.65rem;

  font-weight: 500;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  color: var(--color-ink-muted);

  margin-bottom: var(--space-md);

  padding-bottom: var(--space-sm);

  border-bottom: 1px solid var(--color-rule);

}



.widget ul li {

  padding-block: 0.4em;

  border-bottom: 1px solid rgba(200,185,154,0.4);

}



.widget ul li:last-child {

  border-bottom: none;

}



.widget ul li a {

  font-size: 0.9rem;

  color: var(--color-ink-light);

  transition: color var(--transition);

}



.widget ul li a:hover {

  color: var(--color-accent);

}



/* ==========================================================================

   Related Posts (content-related.php)

   ========================================================================== */



.related-posts {

  background-color: var(--color-surface);

  padding-block: var(--space-xl);

  border-top: 3px solid var(--color-bg-dark);

}



.related-posts .container {

  max-width: var(--container-max);

}



.related-posts-heading {

  font-family: var(--font-ui);

  font-size: 0.65rem;

  font-weight: 500;

  letter-spacing: 0.25em;

  text-transform: uppercase;

  color: var(--color-ink-muted);

  margin-bottom: var(--space-lg);

  position: relative;

  padding-bottom: var(--space-sm);

}



.related-posts-heading::after {

  content: '';

  position: absolute;

  bottom: 0; left: 0;

  width: 2rem;

  height: 1px;

  background: var(--color-accent);

}



.related-posts-grid {

  display: grid;

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

  gap: var(--space-lg);

}



.related-post-card {

  display: flex;

  flex-direction: column;

  background: var(--color-bg);

  border: 1px solid var(--color-rule);

  overflow: hidden;

  transition: box-shadow var(--transition);

}



.related-post-card:hover {

  box-shadow: var(--shadow-md);

}



.related-post-thumbnail {

  aspect-ratio: 3 / 2;

  overflow: hidden;

}



.related-post-thumbnail img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.5s ease;

  filter: sepia(10%);

}



.related-post-card:hover .related-post-thumbnail img {

  transform: scale(1.04);

}



.related-post-content {

  padding: var(--space-md);

  flex: 1;

}



.related-post-label {

  font-family: var(--font-ui);

  font-size: 0.6rem;

  letter-spacing: 0.15em;

  text-transform: uppercase;

  color: var(--color-accent);

  display: block;

  margin-bottom: 0.4em;

}



.related-post-title {

  font-family: var(--font-display);

  font-size: 0.95rem;

  font-weight: 700;

  line-height: 1.4;

  color: var(--color-ink);

}



/* ==========================================================================

   Footer

   ========================================================================== */



.site-footer {

  background-color: var(--color-bg-dark);

  color: rgba(245,240,232,0.6);

  padding-block: var(--space-xl);

  border-top: 3px solid var(--color-accent);

}



.site-footer .container {

  display: grid;

  grid-template-columns: 1fr 2fr;

  gap: var(--space-xl);

}



.footer-brand .site-title {

  font-size: 1.4rem;

  margin-bottom: var(--space-sm);

}



.footer-description {

  font-family: var(--font-ui);

  font-size: 0.8rem;

  line-height: 1.7;

  color: rgba(245,240,232,0.4);

}



.footer-nav-group {

  display: grid;

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

  gap: var(--space-lg);

}



.footer-nav-title {

  font-family: var(--font-ui);

  font-size: 0.6rem;

  font-weight: 500;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  color: var(--color-accent);

  margin-bottom: var(--space-sm);

}



.footer-nav-list li {

  margin-bottom: 0.4em;

}



.footer-nav-list a {

  font-family: var(--font-ui);

  font-size: 0.8rem;

  color: rgba(245,240,232,0.5);

  transition: color var(--transition);

}



.footer-nav-list a:hover {

  color: var(--color-bg);

}



.footer-bottom {

  margin-top: var(--space-xl);

  padding-top: var(--space-lg);

  border-top: 1px solid rgba(245,240,232,0.08);

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.footer-copyright {

  font-family: var(--font-mono);

  font-size: 0.7rem;

  color: rgba(245,240,232,0.3);

  letter-spacing: 0.05em;

}



/* ==========================================================================

   WordPress Alignments

   ========================================================================== */



.alignleft {

  float: left;

  margin-right: var(--space-lg);

  margin-bottom: var(--space-md);

}



.alignright {

  float: right;

  margin-left: var(--space-lg);

  margin-bottom: var(--space-md);

}



.aligncenter {

  display: block;

  margin-inline: auto;

  margin-bottom: var(--space-md);

}



.alignwide {

  margin-inline: calc(var(--space-lg) * -1);

}



.alignfull {

  margin-inline: calc(50% - 50vw);

  width: 100vw;

}



/* ==========================================================================

   WordPress Gallery

   ========================================================================== */



.gallery {

  display: grid;

  gap: var(--space-sm);

  margin-bottom: 1.6em;

}



.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }

.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }

.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }



.gallery-item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



/* ==========================================================================

   Pagination

   ========================================================================== */



.navigation.pagination {

  margin-top: var(--space-xl);

  display: flex;

  justify-content: center;

  gap: var(--space-sm);

}



.page-numbers {

  font-family: var(--font-mono);

  font-size: 0.8rem;

  width: 2.4em;

  height: 2.4em;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border: 1px solid var(--color-rule);

  color: var(--color-ink-light);

  transition:

    color var(--transition),

    background-color var(--transition),

    border-color var(--transition);

}



.page-numbers:hover,

.page-numbers.current {

  background-color: var(--color-bg-dark);

  color: var(--color-bg);

  border-color: var(--color-bg-dark);

}



/* ==========================================================================

   Utilities

   ========================================================================== */



.screen-reader-text {

  position: absolute;

  width: 1px;

  height: 1px;

  overflow: hidden;

  clip: rect(0,0,0,0);

  white-space: nowrap;

}



.skip-link {

  position: absolute;

  top: -100%;

  left: 0;

  padding: 0.5em 1em;

  background: var(--color-accent);

  color: var(--color-bg);

  font-family: var(--font-ui);

  font-size: 0.85rem;

  z-index: 999;

}



.skip-link:focus {

  top: 0;

}



/* ==========================================================================

   Responsive

   ========================================================================== */



@media (max-width: 1024px) {

  :root {

    --sidebar-width: 240px;

    --gap: 2rem;

  }

}



@media (max-width: 768px) {

  html { font-size: 16px; }



  .post-layout-wrapper {

    grid-template-columns: 1fr;

  }



  .widget-area {

    position: static;

  }



  .main-navigation {

    display: none; /* モバイルメニューは別途実装 */

  }



  .related-posts-grid {

    grid-template-columns: 1fr;

  }



  .site-footer .container {

    grid-template-columns: 1fr;

  }



  .footer-nav-group {

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

  }



  .alignleft,

  .alignright {

    float: none;

    margin-inline: 0;

  }

}



@media (max-width: 480px) {

  .container {

    padding-inline: var(--space-md);

  }



  .entry-title {

    font-size: 1.8rem;

  }



  .author-inner {

    flex-direction: column;

  }



  .footer-nav-group {

    grid-template-columns: 1fr;

  }



  .footer-bottom {

    flex-direction: column;

    gap: var(--space-sm);

    text-align: center;

  }

}



/* ==========================================================================

   Print

   ========================================================================== */



@media print {

  .site-header,

  .site-footer,

  .widget-area,

  .related-posts,

  .author-link {

    display: none;

  }



  body {

    background: #fff;

    color: #000;

    font-size: 12pt;

  }



  .post-layout-wrapper {

    grid-template-columns: 1fr;

  }



  .entry-title {

    font-size: 24pt;

  }

}