/* dejoiy.com/why-dejoiy/ — the story, set on DEJOIY's own stationery. */
.dyw {
	--ink: #121212;
	--paper: #F3F2EE;
	--sheet: #FFFDF7;
	--lime: #D4FF3A;
	--sky: #9FD8FF;
	--pink: #FF9BCB;
	--orange: #FF7A1A;
	--soft: #4A4A46;
	--ease: cubic-bezier(.22, 1, .36, 1);
	background: var(--paper);
	color: var(--ink);
	font-family: "DM Sans", system-ui, sans-serif;
	overflow-x: clip;
}
.dyw h1, .dyw h2, .dyw h3 { font-family: "Bricolage Grotesque", "DM Sans", sans-serif; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.dyw p { margin: 0; }
.dyw a { color: inherit; }

/* hero: YOU + JOY over a stack of folders */
.dyw-hero { background: var(--ink); color: var(--paper); padding: clamp(40px, 7vw, 96px) 16px 0; }
.dyw-hero-top { max-width: 1240px; margin: 0 auto; display: grid; gap: 20px 48px; grid-template-columns: 1fr; }
.dyw-eq { font-size: clamp(64px, 15vw, 220px); line-height: .9; letter-spacing: -.045em; color: var(--paper); }
.dyw-you { color: var(--lime); display: inline-block; transition: transform .45s var(--ease); }
.dyw-you.is-new { transform: translateY(-6px) rotate(-2deg); }
.dyw-hero-line { font-size: clamp(19px, 2vw, 24px); line-height: 1.4; max-width: 34ch; color: var(--paper); }
.dyw-try { display: grid; gap: 8px; max-width: 360px; }
.dyw-try label { font-size: 15px; color: #CFCDC6; }
.dyw-try input {
	font: 600 20px/1.2 "DM Sans", sans-serif; color: var(--ink); background: var(--paper);
	border: 2px solid var(--paper); border-radius: 14px; padding: 14px 16px; min-height: 52px;
	transition: border-color .2s, transform .2s var(--ease);
}
.dyw-try input:focus { outline: none; border-color: var(--lime); transform: translateY(-2px); }
@media (min-width: 900px) {
	.dyw-hero-top { grid-template-columns: 1fr 360px; align-items: end; }
	.dyw-eq { grid-column: 1 / -1; }
}

.dyw-folders { max-width: 1240px; margin: clamp(40px, 6vw, 72px) auto 0; display: flex; flex-direction: column; }
.dyw-folder {
	position: relative; display: block; text-decoration: none; background: var(--f); color: var(--ink);
	border-radius: 18px 18px 0 0; margin-top: -14px; padding: 18px 22px 30px;
	transition: transform .35s var(--ease);
}
.dyw-folder:first-child { margin-top: 0; }
.dyw-tab { font: 800 clamp(20px, 2.4vw, 28px)/1.1 "Bricolage Grotesque", sans-serif; letter-spacing: -.01em; }
a.dyw-folder:hover, a.dyw-folder:focus-visible { transform: translateY(-8px); }
a.dyw-folder:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
.dyw-folder-open { padding: 28px 22px 40px; display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; }
.dyw-folder-open p { font-size: 18px; color: var(--ink); }
@media (min-width: 900px) {
	.dyw-folders { flex-direction: row; align-items: flex-end; flex-wrap: wrap; }
	.dyw-folder { margin-top: 0; flex: 1 1 0; margin-left: -12px; padding-bottom: 72px; border-radius: 22px 22px 0 0; }
	.dyw-folder:first-child { margin-left: 0; }
	.dyw-folder:nth-child(1) { padding-bottom: 40px; }
	.dyw-folder:nth-child(2) { padding-bottom: 56px; }
	.dyw-folder:nth-child(3) { padding-bottom: 72px; }
	.dyw-folder:nth-child(4) { padding-bottom: 88px; }
	.dyw-folder:nth-child(5) { padding-bottom: 104px; }
	.dyw-folder-open { flex: 0 0 100%; margin: -16px 0 0; border-radius: 22px 22px 0 0; padding: 36px 40px 48px; }
}

.dyw-btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px;
	border-radius: 999px; background: var(--ink); color: var(--lime) !important; text-decoration: none;
	font: 700 17px/1 "DM Sans", sans-serif; border: 2px solid var(--ink);
	transition: transform .2s var(--ease), background .2s, color .2s;
}
.dyw-btn:hover { transform: translateY(-2px); }
.dyw-btn:active { transform: translateY(1px) scale(.98); }
.dyw-btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.dyw-btn-line { background: transparent; color: var(--ink) !important; }
.dyw-btn-line:hover { background: var(--ink); color: var(--lime) !important; }

/* intro */
.dyw-intro { padding: clamp(56px, 8vw, 112px) 0; }
.dyw-intro-row { display: grid; gap: 20px 56px; }
.dyw-h2 { font-size: clamp(36px, 5.4vw, 72px); line-height: 1; }
.dyw-note { font-size: clamp(19px, 1.8vw, 23px); line-height: 1.5; max-width: 44ch; }
.dyw-facts { margin: clamp(40px, 5vw, 64px) 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.dyw-facts div { background: var(--sheet); border-radius: 20px; padding: 22px 20px; }
.dyw-facts div:nth-child(1) { background: var(--lime); }
.dyw-facts div:nth-child(4) { background: var(--sky); }
.dyw-facts dt { font: 800 clamp(30px, 4vw, 52px)/1 "Bricolage Grotesque", sans-serif; letter-spacing: -.03em; }
.dyw-facts dd { margin: 10px 0 0; font-size: 16px; }
@media (min-width: 900px) {
	.dyw-intro-row { grid-template-columns: 1fr 1fr; align-items: end; }
	.dyw-facts { grid-template-columns: repeat(4, 1fr); }
	.dyw-facts div { padding: 32px 28px; min-height: 180px; display: flex; flex-direction: column; justify-content: space-between; }
}

/* coloured fields holding paper sheets */
.dyw-field { padding: clamp(56px, 8vw, 112px) 16px; }
.dyw-lime { background: var(--lime); }
.dyw-pink { background: var(--pink); }
.dyw-orange { background: var(--orange); }
.dyw-sheet, .dyw-menu {
	max-width: 760px; margin: 0 auto; background: var(--sheet); color: var(--ink);
	padding: clamp(32px, 6vw, 72px) clamp(22px, 6vw, 80px);
	border-radius: 6px;
	/* scalloped top edge, like a page torn from a pad */
	-webkit-mask: radial-gradient(circle 9px at 50% 0, #0000 98%, #000) 50% 0 / 26px 100% repeat-x; /* taste-skill-ignore: mask shape for the scalloped edge, not a fill */
	mask: radial-gradient(circle 9px at 50% 0, #0000 98%, #000) 50% 0 / 26px 100% repeat-x; /* taste-skill-ignore */
}
.dyw-sheet-h { font-size: clamp(34px, 4.6vw, 60px); line-height: 1; margin-bottom: clamp(24px, 3vw, 40px) !important; }
.dyw-sheet p { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.6; }
.dyw-sheet p + p { margin-top: 1.1em; }
.dyw-sheet mark { background: var(--lime); color: var(--ink); padding: 0 .2em; border-radius: 4px; }
.dyw-sign { font: 800 28px/1.1 "Bricolage Grotesque", sans-serif !important; margin-top: 1.6em !important; }
.dyw-sign span { display: block; font: 500 16px/1.4 "DM Sans", sans-serif; margin-top: 6px; color: var(--soft); }
.dyw-stub {
	max-width: 760px; margin: 10px auto 0; background: var(--ink); color: var(--paper); border-radius: 6px;
	padding: 20px clamp(22px, 6vw, 80px); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px;
	font-size: 17px;
}
.dyw .dyw-stub a { color: var(--lime); font-weight: 700; text-decoration: none; }
.dyw .dyw-stub a:hover { text-decoration: underline; }
.dyw-team { margin-top: 2em !important; font-size: 16px !important; color: var(--soft); }

/* six worlds: a plate + an index */
.dyw-worlds { max-width: 1240px; margin: 0 auto; padding: clamp(56px, 8vw, 112px) 16px; display: grid; gap: 32px 64px; }
.dyw-plate { display: none; }
.dyw-index { list-style: none; margin: 28px 0 0; padding: 0; }
.dyw-index li + li { margin-top: 4px; }
.dyw-index-item {
	all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 14px; width: 100%;
	min-height: 56px; padding: 8px 14px; border-radius: 14px;
	font: 800 clamp(28px, 3.4vw, 44px)/1.05 "Bricolage Grotesque", sans-serif; letter-spacing: -.02em;
	transition: background .25s, transform .25s var(--ease);
}
.dyw-index-item:hover { transform: translateX(6px); }
.dyw-index-item:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.dyw-index-item.is-on { background: var(--w); }
.dyw-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--w); flex: none; border: 2px solid var(--ink); }
.dyw-index-body { padding: 12px 14px 22px 46px; font-size: 18px; line-height: 1.55; }
.dyw-index-body p + p { margin-top: 6px; }
.dyw-index-title { font: 800 22px/1.2 "Bricolage Grotesque", sans-serif; }
.dyw-index-img { width: 100%; max-width: 320px; aspect-ratio: 1; object-fit: cover; border-radius: 18px; margin-bottom: 14px; display: block; }
.dyw-cell {
	display: inline-flex; align-items: center; min-height: 48px; margin-top: 14px; padding: 0 20px;
	background: var(--ink); color: var(--paper) !important; border-radius: 999px; text-decoration: none; font-weight: 700;
	transition: transform .2s var(--ease);
}
.dyw-cell:hover { transform: translateY(-2px); }
.dyw-cell:active { transform: scale(.97); }
@media (min-width: 900px) {
	.dyw-worlds { grid-template-columns: 1fr 1fr; align-items: center; }
	.dyw-plate { display: block; position: relative; aspect-ratio: 1; border-radius: 28px; overflow: hidden; background: var(--ink); }
	.dyw-plate-img { position: absolute; inset: 0; margin: 0; background: var(--w); opacity: 0; transform: scale(1.04); transition: opacity .5s var(--ease), transform .9s var(--ease); }
	.dyw-plate-img.is-on { opacity: 1; transform: scale(1); }
	.dyw-plate-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
	.dyw-plate-img .dyw-plate-art { object-fit: contain; padding: 12%; }
	.dyw-index-img { display: none; }
}

/* menu card */
.dyw-menu { max-width: 880px; }
.dyw-menu-note { font-size: 19px; margin: -20px 0 32px !important; }
.dyw-menu-group + .dyw-menu-group { margin-top: 36px; }
.dyw-menu-group h3 { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 8px; }
.dyw-menu-item { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; }
.dyw-menu-item + .dyw-menu-item { border-top: 2px dotted #CFCDC6; }
.dyw-menu-name { font-size: 19px; font-weight: 700; }
.dyw-menu-name small { display: block; font-size: 16px; font-weight: 400; color: var(--soft); margin-top: 3px; }
.dyw-menu-val { font: 800 20px/1.2 "Bricolage Grotesque", sans-serif; text-align: right; flex: none; max-width: 45%; }
.dyw-menu-end { margin-top: 40px !important; font-size: 17px; line-height: 1.6; text-align: center; }
.dyw-menu-end a { font-weight: 700; }

/* close */
.dyw-close { padding: clamp(56px, 8vw, 112px) 16px; }
.dyw-close-row { max-width: 1240px; margin: 0 auto; display: grid; gap: 12px; }
.dyw-tile { border-radius: 28px; overflow: hidden; }
.dyw-tile-main { background: var(--lime); padding: clamp(32px, 5vw, 64px); display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.dyw-tile-main p { font-size: 20px; line-height: 1.5; max-width: 36ch; }
.dyw-close-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.dyw-tile-photo, .dyw-tile-flat { display: none; }
@media (min-width: 900px) {
	.dyw-close-row { grid-template-columns: 1fr 2fr 1fr; min-height: 420px; }
	.dyw-tile-photo, .dyw-tile-flat { display: block; }
	.dyw-tile-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
	.dyw-tile-flat { background: var(--pink); display: grid; place-items: center; }
	.dyw-tile-flat img { width: 80%; height: auto; }
}

/* motion: parts of each section rise in turn */
.dyw-js [data-why-reveal] > *, .dyw-js .dyw-folder { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 75ms); }
.dyw-js [data-why-reveal].is-in > *, .dyw-js .is-in .dyw-folder, .dyw-js .dyw-folders.is-in .dyw-folder { opacity: 1; transform: none; }
.dyw-js a.dyw-folder:hover { transform: translateY(-8px); transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
	.dyw *, .dyw *::before { transition: none !important; animation: none !important; }
	.dyw-js [data-why-reveal] > *, .dyw-js .dyw-folder { opacity: 1; transform: none; }
}