/*
Theme Name: itdeok
Template: generatepress
Version: 0.2.0
Description: Magazine-style child theme for the IT덕 auto-blog (dark, ember accents).
Text Domain: itdeok
*/

/* ==========================================================================
   0. Fonts — Instrument Serif (OFL, assets/fonts/), Latin glyphs only:
   English kickers, numerals and a Latin-only wordmark. Korean stays in Pretendard.
   ========================================================================== */
@font-face {
	font-family: 'Instrument Serif';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(assets/fonts/instrument-serif-latin-400-normal.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Instrument Serif';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(assets/fonts/instrument-serif-latin-400-italic.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Instrument Serif';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(assets/fonts/instrument-serif-latin-ext-400-normal.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Instrument Serif';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(assets/fonts/instrument-serif-latin-ext-400-italic.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
	--void: #0a0a0b;
	--surface: #111113;
	--raised: #18181b;
	--text: #f3efe8;
	--muted: #a7a29b;
	--faint: #8c8780;
	--line: rgba(255, 255, 255, .09);
	--line-strong: rgba(255, 255, 255, .2);
	--ember: #ff5a1f;
	--ember-light: #ffa06a;
	--ember-deep: #c93f0e;
	--ember-glow: rgba(255, 90, 31, .55);
	--radius: 4px;

	--sans: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
	--serif: 'Instrument Serif', 'Iowan Old Style', 'Times New Roman', serif;
	--fs-h1: clamp(2.125rem, 1.4rem + 3.2vw, 4rem);
	--fs-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
	--fs-h3: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
	--fs-body: clamp(1rem, .96rem + .2vw, 1.0625rem);
	--fs-prose: clamp(1.0625rem, 1rem + .25vw, 1.125rem);
	--section: clamp(56px, 7vw, 100px);
	--gutter: clamp(20px, 4.5vw, 64px);
	--header-h: 72px;
	--ease-out: cubic-bezier(.2, .7, .2, 1);

	/* GeneratePress paints body, links, header, menu, containers, inputs and its search with
	   these globals (inline CSS, printed before this file); mapped onto the dark palette so none
	   of its light defaults show through anywhere this file does not restyle explicitly. */
	--contrast: var(--text);
	--contrast-2: var(--muted);
	--contrast-3: var(--faint);
	--base: var(--raised);
	--base-2: var(--void);
	--base-3: var(--surface);
	--accent: var(--ember-light);
	--gp-search-modal-bg-color: var(--surface);
	--gp-search-modal-text-color: var(--text);
	--gp-search-modal-overlay-bg-color: rgba(0, 0, 0, .6);

	color-scheme: dark;
}

/* ==========================================================================
   2. Base
   ========================================================================== */
html {
	background-color: var(--void);
	scrollbar-color: #2c2c31 var(--void);
}

body,
button,
input,
select,
textarea {
	font-family: var(--sans);
}

body {
	background-color: var(--void);
	color: var(--text);
	font-size: var(--fs-body);
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Korean: break between words, but never let a long token overflow. */
	word-break: keep-all;
	overflow-wrap: break-word;
}

/* Film grain: textured dark instead of flat black (wannabe). Fixed, click-through. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: .045;
	mix-blend-mode: screen;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection {
	background: var(--ember);
	color: var(--void);
}

:focus-visible {
	outline: 2px solid var(--ember);
	outline-offset: 3px;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--text);
	font-weight: 700;
	letter-spacing: -0.025em;
}

img,
video,
iframe,
embed,
object {
	max-width: 100%;
}

img {
	height: auto;
}

hr {
	background-color: var(--line);
}

/* Buttons: the ember pill (wannabe .btn--signal). The menu toggle is a <button> too; it keeps its own look. */
button:not(.menu-toggle),
html input[type="button"],
input[type="reset"],
input[type="submit"],
a.button,
a.wp-block-button__link:not(.has-background) {
	border: 1px solid rgba(255, 130, 74, .6);
	border-radius: 999px;
	background-color: var(--ember);
	background-image: linear-gradient(180deg, #ff824a 0%, var(--ember) 55%, #e64c14 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 30px -14px var(--ember-glow);
	color: var(--void);
	font-weight: 600;
	transition: border-color .25s var(--ease-out), box-shadow .35s var(--ease-out), background-color .25s var(--ease-out);
}

button:not(.menu-toggle):hover,
button:not(.menu-toggle):focus,
html input[type="button"]:hover,
html input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
a.button:hover,
a.button:focus,
a.wp-block-button__link:not(.has-background):hover,
a.wp-block-button__link:not(.has-background):focus {
	border-color: var(--ember-light);
	background-color: var(--ember);
	background-image: linear-gradient(180deg, #ffa06a 0%, #ff6a30 55%, var(--ember) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 14px 40px -10px var(--ember-glow);
	color: var(--void);
}

.wp-block-search__button {
	white-space: nowrap;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background-color: var(--raised);
	color: var(--text);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
	border-color: var(--ember);
	background-color: var(--raised);
	box-shadow: 0 0 0 3px rgba(255, 90, 31, .15);
	color: var(--text);
	outline: 0;
}

::placeholder {
	color: var(--faint);
	opacity: 1;
}

/* ==========================================================================
   3. Shared patterns: kicker, label, date
   ========================================================================== */

/* English kicker: serif italic, warm accent. Latin text only. */
.itdeok-kicker {
	font-family: var(--serif);
	font-size: 1.125rem;
	font-style: italic;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .01em;
	color: var(--ember-light);
}

/* Label (wannabe .label): small tracked caps after a short ember dash. Category badges,
   section titles, widget titles, post meta. */
.itdeok-badge,
.itdeok-section__title,
.itdeok-related__title,
.widget-title,
.entry-header .cat-links,
.entry-content .itdeok-sources__title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--muted);
}

.itdeok-badge::before,
.itdeok-section__title::before,
.itdeok-related__title::before,
.widget-title::before,
.entry-header .cat-links::before,
.entry-content .itdeok-sources__title::before {
	content: "";
	flex: none;
	width: 14px;
	height: 1px;
	background: var(--ember);
	box-shadow: 0 0 8px var(--ember-glow);
}

.itdeok-badge {
	position: relative;
	z-index: 1; /* above the card's stretched link */
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s;
}

.itdeok-badge:hover,
.itdeok-badge:focus {
	color: var(--text);
}

.itdeok-date {
	font-size: 13px;
	line-height: 1;
	color: var(--faint);
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   4. Header — one row: logo left, menu + search right (GP nav-float-right)
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: transparent;
	border-bottom: 1px solid var(--line);
}

/* Blurred backdrop on a pseudo-element, so the header itself carries no filter. */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(10, 10, 11, .9);
	-webkit-backdrop-filter: blur(16px) saturate(1.2);
	backdrop-filter: blur(16px) saturate(1.2);
	pointer-events: none;
}

.admin-bar .site-header {
	top: 32px;
}

/* Logo, content and footer share one left edge: the gutter, then a 1200px column. */
body .site.grid-container,
body .inside-header.grid-container,
body .inside-site-info.grid-container {
	max-width: calc(1200px + 2 * var(--gutter));
	padding-right: var(--gutter);
	padding-left: var(--gutter);
}

.inside-header {
	gap: 24px;
	min-height: var(--header-h);
	padding-top: 0;
	padding-bottom: 0;
}

.site-branding {
	display: flex;
	align-items: baseline;
	gap: 16px;
	min-width: 0;
}

.main-title,
.site-title {
	font-size: 24px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.03em;
	white-space: nowrap;
}

.main-title a,
.main-title a:hover {
	color: var(--text);
	text-decoration: none;
}

/* "IT덕." — the dot is decoration only; the site name stays as set in WordPress. */
.main-title a::after {
	content: ".";
	color: var(--ember);
	text-shadow: 0 0 12px var(--ember-glow);
}

.site-description {
	position: relative;
	padding-left: 17px;
	font-size: 13px;
	line-height: 1.2;
	color: var(--faint);
	white-space: nowrap;
}

.site-description::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 1px;
	height: 12px;
	margin-top: -6px;
	background: var(--line-strong);
}

.main-navigation,
.main-navigation ul ul {
	background-color: transparent;
}

.main-navigation ul ul {
	background-color: var(--raised);
}

.main-navigation .main-nav > ul {
	gap: 2px;
}

/* Menu items: pills (wannabe nav). Current item: light text on a raised pill, no accent colour. */
.main-navigation .main-nav ul li a {
	padding-right: 16px;
	padding-left: 16px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	line-height: 40px;
	letter-spacing: -0.01em;
	color: #dcd7cf;
	transition: color .2s, background-color .2s;
}

.main-navigation .menu-bar-item > a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-left: 6px;
	padding: 0;
	border-radius: 999px;
	line-height: 1;
	transition: color .2s, background-color .2s;
}

/* The mobile "메뉴" toggle and the search icon (GP paints them in --contrast). */
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items,
button.menu-toggle:hover,
button.menu-toggle:focus {
	color: var(--text);
}

.main-navigation .menu-bar-items {
	color: var(--muted);
}

.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a,
.main-navigation .menu-bar-item:hover > a,
.main-navigation .menu-bar-item.sfHover > a,
.main-navigation .menu-bar-item > a:focus {
	color: var(--text);
	background-color: var(--raised);
}

.main-navigation .menu-bar-items .search-item.active > a,
.main-navigation .main-nav ul li.search-item.active > a {
	color: var(--text);
	background-color: var(--raised);
}

/* Header search (GP navigation search): the opened field is a pill over the menu, vertically
   centred in the header, with the close icon sitting inside its right end. */
.navigation-search {
	background-color: var(--void);
}

.navigation-search input[type="search"] {
	height: 44px;
	margin: calc((var(--header-h) - 44px) / 2) 0;
	padding: 0 56px 0 20px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background-color: var(--raised);
	box-shadow: none;
	color: var(--text);
	font-size: 16px; /* 16px+ keeps iOS from zooming in on focus */
	opacity: 1;
}

.navigation-search input[type="search"]:focus,
.navigation-search input[type="search"]:active {
	border-color: var(--ember);
	background-color: var(--raised);
	box-shadow: 0 0 0 3px rgba(255, 90, 31, .15);
	color: var(--text);
	outline: 0;
}

/* ==========================================================================
   5. Containers (GP "separate containers") and sidebar widgets
   ========================================================================== */
.separate-containers .site-main {
	margin-top: clamp(28px, 4vw, 48px);
	margin-bottom: var(--section);
}

.separate-containers.right-sidebar .site-main {
	margin-right: clamp(28px, 3.5vw, 48px);
}

.separate-containers .inside-right-sidebar {
	margin-top: clamp(28px, 4vw, 48px);
	margin-bottom: var(--section);
}

.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.sidebar .widget {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background-color: var(--surface);
}

.widget-area .widget {
	padding: 24px;
}

.sidebar .widget {
	margin-bottom: 16px;
	font-size: 15px;
	color: var(--muted);
}

.widget-title {
	display: flex;
	margin: 0 0 18px;
	padding: 0;
	border: 0;
}

.widget .search-form {
	gap: 8px;
}

/* the field (inside its <label>) fills the row next to the icon button */
.widget .search-form label {
	flex: 1 1 auto;
	min-width: 0;
}

.search-form .search-field {
	height: 44px;
	padding: 0 14px;
	font-size: 15px;
}

.search-form .search-submit,
.widget .search-form button.search-submit {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	font-size: 16px;
	line-height: 1;
}

/* Lists: hairlines between rows, no bullets. */
.sidebar .widget ul li {
	margin: 0;
	padding: 11px 0;
	border-top: 1px solid var(--line);
	line-height: 1.5;
}

.sidebar .widget ul li:first-child {
	padding-top: 0;
	border-top: 0;
}

.sidebar .widget ul li:last-child {
	padding-bottom: 0;
}

.sidebar .widget a {
	color: var(--text);
	text-decoration: none;
	transition: color .2s;
}

.sidebar .widget a:hover,
.sidebar .widget a:focus {
	color: var(--ember-light);
}

/* Category counts: the "(n)" text node sits right, in serif numerals; the link stays in Pretendard. */
.sidebar .widget_categories li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-family: var(--serif);
	font-size: 16px;
	font-style: italic;
	color: var(--faint);
}

.sidebar .widget_categories li a {
	font-family: var(--sans);
	font-size: 15px;
	font-style: normal;
}

.tagcloud {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sidebar .tagcloud a {
	display: inline-block;
	padding: 5px 12px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	font-size: 13px !important; /* the tag cloud widget sets inline sizes */
	line-height: 1.5;
	color: var(--muted);
	transition: color .2s, border-color .2s;
}

.sidebar .tagcloud a:hover,
.sidebar .tagcloud a:focus {
	border-color: var(--ember);
	color: var(--text);
}

/* GP 3.x underlines links by default; the pager (/page/2/, archives) follows the rest of the chrome */
.separate-containers .paging-navigation {
	padding: 0;
	border: 0;
	background: none;
}

.paging-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.paging-navigation .nav-links > * {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	color: var(--muted);
	text-decoration: none;
}

.paging-navigation .nav-links .current {
	border-color: var(--line-strong);
	background: var(--raised);
	color: var(--text);
}

.paging-navigation .nav-links .dots {
	border-color: transparent;
}

.paging-navigation a:hover,
.paging-navigation a:focus {
	border-color: var(--line-strong);
	color: var(--text);
}

/* ==========================================================================
   6. Home: hero
   ========================================================================== */
.site-main .itdeok-hero {
	margin-bottom: var(--section);
}

.itdeok-hero {
	position: relative;
	isolation: isolate;
}

.itdeok-hero__media {
	position: relative;
	aspect-ratio: 1200 / 630;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--surface);
}

.itdeok-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px var(--line);
	pointer-events: none;
}

/* With a featured image: the pipeline image already shows the title, so the copy sits below it
   and the image fades into the page under the copy. */
.itdeok-hero--image .itdeok-hero__media {
	-webkit-mask-image: linear-gradient(180deg, #000 42%, rgba(0, 0, 0, .35) 70%, transparent 88%);
	mask-image: linear-gradient(180deg, #000 42%, rgba(0, 0, 0, .35) 70%, transparent 88%);
}

.itdeok-hero__body {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.itdeok-hero--image .itdeok-hero__body {
	margin-top: clamp(-48px, -3.5vw, -20px);
	padding: 0 clamp(0px, 2.5vw, 32px);
}

.itdeok-hero__eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
}

.itdeok-hero__title {
	margin: 2px 0 0;
	font-size: var(--fs-h1);
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.035em;
}

.itdeok-hero__title a {
	color: var(--text);
	text-decoration: none;
	transition: color .25s;
}

/* Whole hero is the link target; the badge sits above it. */
.itdeok-hero__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.itdeok-hero:hover .itdeok-hero__title a {
	color: var(--ember-light);
}

.itdeok-hero:focus-within {
	outline: 2px solid var(--ember);
	outline-offset: 6px;
}

.itdeok-hero__title a:focus {
	outline: none;
}

.itdeok-hero__excerpt {
	display: -webkit-box;
	max-width: 44em;
	margin: 0;
	overflow: hidden;
	font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
	line-height: 1.65;
	color: var(--muted);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/* Without an image: a surface panel, the site name as a faint watermark, the copy on top. */
.itdeok-hero--placeholder {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(340px, 36vw, 460px);
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: radial-gradient(70% 90% at 88% 8%, rgba(255, 90, 31, .1), transparent 62%), var(--surface);
}

.itdeok-hero--placeholder .itdeok-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	aspect-ratio: auto;
	background: none;
}

.itdeok-hero--placeholder .itdeok-hero__media::after {
	display: none;
}

.itdeok-hero--placeholder .itdeok-hero__body {
	padding: clamp(96px, 12vw, 150px) clamp(20px, 3.5vw, 44px) clamp(24px, 3vw, 40px);
}

.itdeok-hero .itdeok-media__ph {
	align-items: flex-start;
	justify-content: flex-end;
	padding: 4% 5% 0 0;
	font-size: clamp(88px, 15vw, 200px);
}

/* ==========================================================================
   7. Home: sections, grid, cards
   ========================================================================== */
.site-main .itdeok-section {
	margin-bottom: clamp(48px, 5.5vw, 80px);
}

.site-main .itdeok-section:last-child {
	margin-bottom: 0;
}

.itdeok-section__head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}

.itdeok-section__title {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--text);
}

.itdeok-more {
	flex: none;
	margin-left: auto;
	font-size: 14px;
	font-weight: 600;
	color: var(--muted);
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s;
}

.itdeok-more:hover,
.itdeok-more:focus {
	color: var(--text);
}

.itdeok-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.itdeok-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
	padding: 20px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	transition: border-color .25s var(--ease-out), background-color .25s var(--ease-out);
}

.itdeok-card:hover {
	border-color: var(--line-strong);
	background: var(--raised);
}

.itdeok-card:focus-within {
	outline: 2px solid var(--ember);
	outline-offset: 2px;
}

.itdeok-card__media {
	position: relative;
	aspect-ratio: 600 / 340;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--raised);
}

.itdeok-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px var(--line);
	pointer-events: none;
}

.itdeok-media__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s var(--ease-out);
}

.itdeok-card:hover .itdeok-media__img {
	transform: scale(1.03);
}

/* Placeholder wordmark (no featured image): the site name / initials, barely there.
   Pretendard for Hangul; Instrument Serif only when the mark is Latin (functions.php). */
.itdeok-media__ph {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(80% 100% at 85% 10%, rgba(255, 90, 31, .08), transparent 60%);
	font-family: var(--sans);
	font-size: 40px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	color: rgba(243, 239, 232, .08);
	white-space: nowrap;
}

.itdeok-media__ph--serif {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.01em;
}

.itdeok-media__ph::after {
	content: ".";
	color: var(--ember);
	opacity: .45;
}

.itdeok-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
}

.itdeok-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
}

.itdeok-card__title {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	font-size: var(--fs-h3);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.015em;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.itdeok-card__title a {
	color: var(--text);
	text-decoration: none;
	transition: color .2s;
}

.itdeok-card__title a:focus {
	outline: none;
}

/* Whole card is the link target. */
.itdeok-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.itdeok-card:hover .itdeok-card__title a {
	color: var(--ember-light);
}

.itdeok-card__excerpt {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	font-size: 15px;
	line-height: 1.65;
	color: var(--muted);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/* Three-up rows (category sections, related posts): smaller cards. */
.itdeok-grid--category,
.itdeok-grid--related {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.itdeok-grid--category .itdeok-card,
.itdeok-grid--related .itdeok-card {
	gap: 16px;
	padding: 16px;
}

.itdeok-grid--category .itdeok-card__body,
.itdeok-grid--related .itdeok-card__body {
	gap: 10px;
}

/* category sections: the section title already names the category */
.itdeok-grid--category .itdeok-badge {
	display: none;
}

/* too narrow for label and date on one line: stack them, the same in every card of the row */
.itdeok-grid--category .itdeok-card__meta,
.itdeok-grid--related .itdeok-card__meta {
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.itdeok-grid--category .itdeok-card__title,
.itdeok-grid--related .itdeok-card__title {
	font-size: 17px;
	line-height: 1.45;
}

.itdeok-grid--category .itdeok-media__ph,
.itdeok-grid--related .itdeok-media__ph {
	font-size: 30px;
}

.itdeok-empty {
	padding: 72px 24px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	text-align: center;
	color: var(--muted);
}

.itdeok-empty p {
	margin: 0;
}

/* Link to /page/2/ under the home sections: ghost pill (wannabe .btn--ghost). */
.itdeok-all-posts {
	margin: clamp(40px, 5vw, 64px) 0 0;
	text-align: center;
}

.itdeok-all-posts__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 48px;
	padding: 0 24px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: rgba(255, 255, 255, .02);
	color: var(--text);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .25s, color .25s, border-color .25s;
}

.itdeok-all-posts__link:hover,
.itdeok-all-posts__link:focus {
	border-color: var(--text);
	background: var(--text);
	color: var(--void);
}

/* ==========================================================================
   8. Posts, pages, archives
   ========================================================================== */
.single .inside-article,
.page .inside-article {
	padding: clamp(24px, 4vw, 56px);
}

/* Reading column: at most 760px. */
.single .entry-header,
.single .entry-content,
.single footer.entry-meta,
.single .itdeok-related,
.page .entry-header,
.page .entry-content {
	max-width: 760px;
	margin-right: auto;
	margin-left: auto;
}

.inside-article > .featured-image {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius);
}

.inside-article > .featured-image::after,
.post-image a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px var(--line);
	pointer-events: none;
}

.separate-containers .inside-article > .featured-image {
	margin-bottom: clamp(28px, 3.5vw, 44px);
}

.single .entry-header .entry-title,
.page .entry-header .entry-title {
	font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.03em;
}

.entry-title a {
	color: var(--text);
	text-decoration: none;
	transition: color .2s;
}

.entry-title a:hover,
.entry-title a:focus {
	color: var(--ember-light);
}

/* Meta: one label row — category label, then the date. */
.entry-meta {
	font-size: 13px;
	color: var(--faint);
}

.entry-header .entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	margin-top: 18px;
	line-height: 1.5;
}

.entry-header .cat-links {
	display: inline-flex;
}

.entry-meta a {
	color: var(--muted);
	text-decoration: none;
	transition: color .2s;
}

.entry-meta a:hover,
.entry-meta a:focus {
	color: var(--text);
}

.entry-meta .posted-on {
	font-variant-numeric: tabular-nums;
}

/* Date only: the byline carries an untranslated "by" label. */
.entry-meta .byline {
	display: none;
}

/* Footer meta: tags as pills, then previous / next. */
footer.entry-meta {
	display: grid;
	gap: 18px;
	margin-top: 2.5em;
	padding-top: 22px;
	border-top: 1px solid var(--line);
	font-size: 14px;
}

footer.entry-meta .gp-icon {
	display: none;
}

footer.entry-meta .tags-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 0; /* hides the ", " separators between the pills */
}

footer.entry-meta .tags-links a {
	display: inline-block;
	padding: 5px 12px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	font-size: 13px;
	line-height: 1.5;
}

footer.entry-meta .tags-links a:hover,
footer.entry-meta .tags-links a:focus {
	border-color: var(--ember);
	color: var(--text);
}

.site-main .post-navigation {
	margin: 0;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
}

.post-navigation .nav-previous a::before {
	content: "← ";
	color: var(--faint);
}

.post-navigation .nav-next a::after {
	content: " →";
	color: var(--faint);
}

.post-navigation a {
	color: var(--text);
}

.post-navigation a:hover,
.post-navigation a:focus {
	color: var(--ember-light);
}

/* Archive / search / paged lists: header, image, summary as a horizontal card. */
.archive .page-header,
.search .page-header,
.blog .page-header {
	padding: 0 0 8px;
	border: 0;
	background: none;
}

.page-header .page-title {
	font-size: var(--fs-h2);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -0.03em;
}

.page-header .taxonomy-description {
	margin-top: 10px;
	color: var(--muted);
}

.site-main > article .entry-summary {
	color: var(--muted);
	font-size: 15px;
	line-height: 1.65;
}

.post-image a {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--radius);
	line-height: 0;
}

.post-image img {
	display: block;
}

.archive .site-main > article .inside-article,
.search .site-main > article .inside-article,
.blog .site-main > article .inside-article {
	padding: clamp(20px, 2.5vw, 32px);
}

.entry-content {
	font-size: var(--fs-prose);
	line-height: 1.8;
	color: var(--text);
}

.entry-content h2 {
	margin: 2.2em 0 .6em;
	font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem);
	line-height: 1.35;
	letter-spacing: -0.02em;
}

.entry-content h3 {
	margin: 1.8em 0 .5em;
	font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem);
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: -0.01em;
}

.entry-content > :first-child {
	margin-top: 0;
}

.entry-content p,
.entry-content ul,
.entry-content ol {
	margin-bottom: 1.4em;
}

.entry-content li {
	margin-bottom: .4em;
}

.entry-content li::marker {
	color: var(--ember-light);
}

.entry-content strong {
	font-weight: 700;
}

.entry-content a {
	color: var(--ember-light);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
	overflow-wrap: anywhere;
	transition: color .2s;
}

.entry-content a:hover,
.entry-content a:focus {
	color: var(--text);
}

.entry-content blockquote {
	margin: 0 0 1.4em;
	padding: 2px 0 2px 22px;
	border-left: 2px solid var(--ember);
	background: none;
	color: var(--muted);
	font-size: 1.05em;
	font-style: normal;
}

.entry-content table {
	width: 100%;
	margin-bottom: 1.6em;
	border: 0; /* cells draw the grid */
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.6;
}

.entry-content th,
.entry-content td {
	padding: 10px 12px;
	border: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

.entry-content th {
	background: var(--raised);
	font-weight: 700;
}

.entry-content code {
	padding: .12em .4em;
	border-radius: var(--radius);
	background: var(--raised);
	font-size: .88em;
}

.entry-content pre {
	max-width: 100%;
	padding: 16px 18px;
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--raised);
	color: var(--text);
	font-size: 14px;
	line-height: 1.65;
}

.entry-content pre code {
	padding: 0;
	background: none;
}

.entry-content img {
	border-radius: var(--radius);
}

.entry-content hr {
	height: 1px;
	margin: 2.4em 0;
	border: 0;
	background: var(--line);
}

.entry-content figcaption,
.entry-content .wp-element-caption {
	font-size: 14px;
	color: var(--faint);
}

/* 출처 (pipeline sources, tagged in functions.php): a label over a quiet list. */
.entry-content .itdeok-sources__title {
	display: flex;
	margin: 2.6em 0 1.1em;
	padding-top: 1.6em;
	border-top: 1px solid var(--line);
}

.entry-content .itdeok-sources {
	margin-bottom: 1.4em;
	padding-left: 1.1em;
	font-size: 15px;
	line-height: 1.7;
	color: var(--muted);
}

.entry-content .itdeok-sources li::marker {
	color: var(--faint);
}

.entry-content .itdeok-sources a {
	color: var(--muted);
	text-decoration-color: var(--line-strong);
}

.entry-content .itdeok-sources a:hover,
.entry-content .itdeok-sources a:focus {
	color: var(--ember-light);
	text-decoration-color: currentColor;
}

.entry-content .ai-disclosure {
	font-size: 14px;
	color: var(--faint);
}

/* no synthetic italics on Hangul */
.entry-content .ai-disclosure em {
	font-style: normal;
}

/* AdSense slots (mu-plugin techblog-adsense.php), only printed when configured.
   Scoped to the article body: the sidebar widget card already pads its unit. */
.entry-content .techblog-ad {
	margin: 24px 0;
	background: none;
}

/* Contact form (mu-plugin techblog-contact.php, [techblog_contact]): label over a full-width field. */
.techblog-contact {
	display: grid;
	gap: 18px;
	max-width: 560px;
	margin-bottom: 1.4em;
}

.entry-content .techblog-contact__row {
	display: grid;
	gap: 8px;
	margin: 0;
}

.techblog-contact__row label {
	font-size: 14px;
	font-weight: 600;
	color: var(--muted);
}

.techblog-contact__row input,
.techblog-contact__row select,
.techblog-contact__row textarea {
	width: 100%;
	padding: 12px 14px;
	font-size: 16px; /* 16px+ keeps iOS from zooming in on focus */
}

.techblog-contact__row select {
	height: 48px;
	padding-top: 0;
	padding-bottom: 0;
}

.techblog-contact__submit {
	justify-self: start;
	height: 48px;
	padding: 0 28px;
	font-size: 15px;
}

.entry-content .techblog-contact__notice {
	padding: 12px 16px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--raised);
	font-size: 15px;
}

.entry-content .techblog-contact__notice--error {
	border-color: rgba(255, 90, 31, .5);
	color: var(--ember-light);
}

/* Search with no results, 404 */
.no-results .entry-content p,
.error404 .entry-content p {
	color: var(--muted);
}

.no-results .search-form,
.error404 .site-main .search-form {
	display: flex;
	gap: 8px;
	max-width: 480px;
}

.no-results .search-form label,
.error404 .site-main .search-form label {
	flex: 1 1 auto;
	min-width: 0;
}

.no-results .search-field,
.error404 .site-main .search-field {
	width: 100%;
}

/* ==========================================================================
   9. Related posts (inside .inside-article)
   ========================================================================== */
.itdeok-related {
	margin-top: clamp(40px, 5vw, 64px);
	padding-top: 22px;
	border-top: 1px solid var(--line);
}

.itdeok-related__head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 20px;
}

.itdeok-related__title {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--text);
}

/* ==========================================================================
   10. Footer
   ========================================================================== */
.site-info {
	border-top: 1px solid var(--line);
	background-color: var(--void);
	color: var(--faint);
	font-size: 14px;
	text-align: left;
}

.inside-site-info {
	padding-top: 28px;
	padding-bottom: 36px;
}

.copyright-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	width: 100%;
}

.itdeok-footer-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.itdeok-footer-menu li {
	margin: 0;
}

.itdeok-footer-menu a {
	color: var(--muted);
	text-decoration: none;
	transition: color .2s;
}

.itdeok-footer-menu a:hover,
.itdeok-footer-menu a:focus {
	color: var(--text);
}

.footer-widgets {
	border-top: 1px solid var(--line);
	background-color: var(--void);
}

a.generate-back-to-top {
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background-color: var(--raised);
	color: var(--text);
}

a.generate-back-to-top:hover,
a.generate-back-to-top:focus {
	border-color: var(--text);
	background-color: var(--text);
	color: var(--void);
}

/* ==========================================================================
   11. Responsive
   ========================================================================== */
@media (max-width: 1100px) {
	.site-description {
		display: none;
	}

	.main-navigation .main-nav ul li a {
		padding-right: 12px;
		padding-left: 12px;
	}
}

@media (max-width: 1024px) {
	.main-navigation .main-nav ul li a {
		padding-right: 10px;
		padding-left: 10px;
		font-size: 14px;
	}

	.main-navigation .menu-bar-item > a {
		margin-left: 2px;
	}
}

@media (min-width: 769px) {
	/* the search field drops over the menu at full header height */
	.nav-float-right #site-navigation .inside-navigation {
		min-height: var(--header-h);
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	/* the sidebar stays beside the content: archive rows stack image over text */
	.archive .site-main > article .inside-article,
	.search .site-main > article .inside-article,
	.blog .site-main > article .inside-article {
		display: block;
	}
}

@media (min-width: 1025px) {
	.archive .site-main > article .inside-article:has(> .post-image),
	.search .site-main > article .inside-article:has(> .post-image),
	.blog .site-main > article .inside-article:has(> .post-image) {
		display: grid;
		grid-template-areas:
			"media header"
			"media summary"
			"media footer";
		grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
		grid-template-rows: auto auto 1fr;
		column-gap: 28px;
		align-items: start;
	}

	.site-main > article .inside-article > .entry-header {
		grid-area: header;
	}

	.site-main > article .inside-article > .post-image {
		grid-area: media;
		margin: 0;
	}

	.site-main > article .inside-article > .entry-summary {
		grid-area: summary;
	}

	.site-main > article .inside-article > footer.entry-meta {
		grid-area: footer;
		align-self: end;
	}
}

.archive .site-main > article .entry-title,
.search .site-main > article .entry-title,
.blog .site-main > article .entry-title {
	font-size: var(--fs-h3);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.015em;
}

.archive .site-main > article footer.entry-meta,
.search .site-main > article footer.entry-meta,
.blog .site-main > article footer.entry-meta {
	margin-top: 1.2em;
	padding-top: 0;
	border-top: 0;
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

@media (max-width: 768px) {
	:root {
		--header-h: 64px;
	}

	body .site.grid-container {
		padding-right: 0;
		padding-left: 0;
	}

	.inside-header {
		gap: 12px;
	}

	.main-title,
	.site-title {
		font-size: 22px;
	}

	/* Mobile row: logo, then the search icon and the "메뉴" pill. GP keeps the toggle's label as
	   screen-reader text in this inline position; it is shown here. */
	.mobile-menu-control-wrapper {
		gap: 6px;
	}

	.mobile-menu-control-wrapper .menu-toggle,
	.mobile-menu-control-wrapper .menu-toggle:hover,
	.mobile-menu-control-wrapper .menu-toggle:focus {
		background-color: transparent;
	}

	.mobile-menu-control-wrapper .menu-toggle {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		height: 40px;
		padding: 0 16px;
		border: 1px solid var(--line-strong);
		border-radius: 999px;
		color: var(--text);
		font-size: 14px;
		font-weight: 600;
		line-height: 1;
	}

	.mobile-menu-control-wrapper .menu-toggle[aria-expanded="true"] {
		border-color: var(--text);
	}

	.mobile-menu-control-wrapper .menu-toggle .screen-reader-text {
		position: static !important;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		clip-path: none;
		white-space: nowrap;
	}

	.main-navigation .menu-bar-item > a {
		margin-left: 0;
	}

	/* Opened menu: a full-width list under the header row. */
	.has-inline-mobile-toggle #site-navigation.toggled {
		margin-top: 0;
		padding-bottom: 12px;
		background-color: transparent;
	}

	.main-navigation.toggled .main-nav ul li a {
		padding: 14px 0;
		border-bottom: 1px solid var(--line);
		border-radius: 0;
		font-size: 17px;
		line-height: 1.4;
	}

	.main-navigation.toggled .main-nav ul li:not([class*="current-menu-"]):hover > a,
	.main-navigation.toggled .main-nav ul li[class*="current-menu-"] > a {
		background-color: transparent;
		color: var(--ember-light);
	}

	/* Search field: a row of its own under the logo row. GP rings it with an auto outline here
	   (it has no border by default); ours has a border and an ember focus state instead. */
	.navigation-search input[type="search"] {
		margin: 4px 0 16px;
		padding-right: 20px;
	}

	.has-inline-mobile-toggle #site-navigation.has-active-search .navigation-search input {
		outline: 0;
	}

	/* Home blocks and widgets keep the gutter; the article goes full-bleed for reading width. */
	.site-main > .itdeok-hero,
	.site-main > .itdeok-section,
	.site-main > .itdeok-empty,
	.site-main > .itdeok-all-posts,
	.site-main > .page-header,
	.site-main > .paging-navigation,
	.sidebar .widget {
		margin-right: var(--gutter);
		margin-left: var(--gutter);
	}

	.separate-containers .inside-article,
	.separate-containers .comments-area,
	.separate-containers .page-header,
	.separate-containers .paging-navigation {
		border-right: 0;
		border-left: 0;
		border-radius: 0;
	}

	.separate-containers .inside-article,
	.single .inside-article,
	.page .inside-article {
		padding: 28px var(--gutter);
	}

	/* GP zeroes .site-main's bottom margin (!important) below 768px; the sidebar keeps the gap */
	.separate-containers .inside-right-sidebar {
		margin-top: 48px;
		margin-bottom: 48px;
	}

	/* posts, pages and the no-results box start right under the header line */
	.single.separate-containers .site-main,
	.page.separate-containers .site-main,
	.search-no-results.separate-containers .site-main {
		margin-top: 0;
	}

	.single.separate-containers .inside-article,
	.page.separate-containers .inside-article,
	.search-no-results.separate-containers .inside-article {
		border-top: 0;
	}

	/* a table wider than the screen scrolls inside its own box, not the page */
	.entry-content table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}

	.site-main .itdeok-hero {
		margin-bottom: 56px;
	}

	.itdeok-hero--image .itdeok-hero__body {
		margin-top: -12px;
		padding: 0;
	}

	.itdeok-hero__body {
		gap: 12px;
	}

	.itdeok-hero__excerpt {
		-webkit-line-clamp: 3;
	}

	.site-main .itdeok-section {
		margin-bottom: 44px;
	}

	.itdeok-grid,
	.itdeok-grid--category,
	.itdeok-grid--related {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.itdeok-card {
		gap: 16px;
		padding: 16px;
	}

	/* compact cards become thumbnail rows */
	.itdeok-grid--category .itdeok-card--compact,
	.itdeok-grid--related .itdeok-card--compact {
		display: grid;
		grid-template-columns: 120px minmax(0, 1fr);
		align-items: center;
		gap: 14px;
		padding: 12px;
	}

	.itdeok-grid--category .itdeok-card--compact .itdeok-card__body,
	.itdeok-grid--related .itdeok-card--compact .itdeok-card__body {
		gap: 8px;
	}

	.itdeok-grid--category .itdeok-card--compact .itdeok-card__title,
	.itdeok-grid--related .itdeok-card--compact .itdeok-card__title {
		font-size: 15.5px;
		line-height: 1.45;
	}

	.itdeok-card--compact .itdeok-badge {
		gap: 8px;
		font-size: 11px;
		letter-spacing: .12em;
	}

	.itdeok-card--compact .itdeok-badge::before {
		width: 10px;
	}

	.itdeok-card--compact .itdeok-date {
		font-size: 12px;
	}

	.itdeok-grid--category .itdeok-media__ph,
	.itdeok-grid--related .itdeok-media__ph {
		font-size: 20px;
	}

	.copyright-bar {
		flex-direction: column-reverse;
		justify-content: center;
		text-align: center;
	}

	.itdeok-footer-menu {
		justify-content: center;
	}

}

@media (max-width: 600px) {
	/* the admin bar scrolls away at this width */
	.admin-bar .site-header {
		top: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.itdeok-card,
	.itdeok-media__img,
	.itdeok-hero__title a {
		transition: none;
	}

	.itdeok-card:hover .itdeok-media__img {
		transform: none;
	}
}

@media print {
	body::before,
	.site-header::before {
		display: none;
	}

	.site-header {
		position: static;
	}
}