/* Opening the Eyes of the Heart case study. Ink on paper: Void #231f20 on white and the brand's Argent #e7eae5 (kept in
   --light), with Moss #5e5a2e; values from the brand guidelines PDF. Cormorant Garamond (the delivered font system) for copy, IBM Plex Mono for the
   XD's section index. */

body.case-opening-the-eyes-of-the-heart main { margin-inline: calc(-1 * max(var(--gutter), env(safe-area-inset-left, 0px))); }
.oe {
  --void: #231f20; --light: #e7eae5; --moss: #5e5a2e; --paper: #fff;
  --pad: clamp(18px, 4.7vw, 90px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --serif: "Cormorant Garamond", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  background: var(--paper); color: var(--void);
  font: 400 clamp(17px, 1.3vw, 24px)/1.45 var(--serif);
  color-scheme: light;
}
.oe figure { margin: 0; }
.oe img { display: block; width: 100%; height: auto; }
.oe p { margin: 0; }
.oe h3 { margin: 0; font-weight: 400; }
.oe :focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; }
.oe button { font: inherit; color: inherit; }
.oe-sec { position: relative; scroll-margin-top: 0; }
.oe svg { display: block; overflow: visible; }
.oe-missing { display: block; min-height: 60px; }
.oe-kicker { font: 600 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px !important; }

/* Reveal */
.oe-js .oe .rv { opacity: 0; transform: translateY(24px); transition: opacity 1.1s var(--ease), transform 1.2s var(--ease); }
.oe-js .oe .rv.in { opacity: 1; transform: none; }

/* Hero: the script, written in */
.oe-hero { min-height: 100svh; display: grid; place-content: center; justify-items: center; text-align: center; gap: clamp(20px, 3vw, 44px); padding: clamp(80px, 12vh, 140px) var(--pad) clamp(28px, 4vw, 56px); position: relative; }
.oe-hero-logo { margin: 0; width: min(80vw, 1100px); font-size: 1em; }
.oe-pl { width: 100%; height: auto; }
.oe-hero-line { font: italic 300 clamp(22px, 2.6vw, 44px)/1.2 var(--serif); }
.oe-meta { width: min(1440px, 100%); text-align: left; margin-top: clamp(28px, 6vh, 80px) !important; --line: #e6e6e1; }
.oe-js .oe-hero .oe-pl { clip-path: inset(-20% 100% -20% 0); animation: oe-write 2.6s .2s cubic-bezier(.45, .05, .35, 1) forwards; }
.oe-js .oe-hero-line { opacity: 0; animation: oe-fade 1.2s 2.4s forwards; }
@keyframes oe-write { to { clip-path: inset(-20% -2% -20% 0); } }
@keyframes oe-fade { to { opacity: 1; } }

/* Section index, as on every XD board (top right) */
.oe-index { position: fixed; z-index: 16; right: clamp(14px, 3vw, 56px); top: clamp(14px, 2.4vw, 40px); color: #fff; mix-blend-mode: difference; opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.oe.chrome-on .oe-index { opacity: 1; visibility: visible; }
.oe-index ol { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(10px, 1.6vw, 28px); }
.oe-index a { color: inherit; text-decoration: none; font: 400 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .7; transition: opacity .2s; }
.oe-index a:hover, .oe-index a.on { opacity: 1; font-weight: 600; }

/* Overview */
.oe-overview { max-width: 1060px; margin: 0 auto; padding: clamp(80px, 12vw, 200px) var(--pad); display: grid; gap: 1em; text-align: center; font: italic 400 clamp(20px, 1.9vw, 34px)/1.4 var(--serif); }

/* Boards: art centred, a serif caption across the foot, as in the XD */
.oe-board { min-height: min(56.25vw, 100svh); display: grid; grid-template-rows: 1fr auto; align-items: center; justify-items: center; padding: clamp(56px, 7vw, 110px) var(--pad) clamp(28px, 3.4vw, 56px); border-top: 1px solid #ecece8; }
.oe-cap { max-width: 1500px; justify-self: stretch; font-size: clamp(16px, 1.3vw, 24px); line-height: 1.4; border-top: 1px solid #e3e3de; padding-top: 16px; }
.oe-cap b { font-weight: 500; letter-spacing: .04em; text-transform: uppercase; font-size: .86em; }
.oe-pl-board .oe-pl { width: min(76vw, 1000px); }
.oe-js .oe-pl-board .oe-draw { clip-path: inset(-20% 100% -20% 0); transition: clip-path 2.4s cubic-bezier(.45, .05, .35, 1); }
.oe-js .oe-pl-board.run .oe-draw { clip-path: inset(-20% -2% -20% 0); }
.oe-sl { width: min(40vw, 380px); height: auto; }

/* Openness / Inhibition */
.oe-oo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 100px); align-items: center; padding: clamp(64px, 9vw, 150px) var(--pad); min-height: min(56.25vw, 100svh); box-sizing: border-box; }
.oe-oo-words { display: grid; gap: 10px; align-content: center; }
.oe-oo-btn { justify-self: start; border: 0; background: none; padding: 0; cursor: pointer; font: italic 400 clamp(26px, 2.5vw, 44px) var(--serif); letter-spacing: .02em; text-transform: uppercase; opacity: .35; transition: opacity .4s; }
.oe-oo-btn[aria-pressed="true"], .oe-oo-btn:hover { opacity: 1; }
.oe-def { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 6px; font-size: clamp(16px, 1.2vw, 21px); opacity: .35; transition: opacity .4s; max-width: 40ch; }
.oe-def li::before { content: "⁎ "; }
.oe-oo[data-o="open"] .oe-def-open, .oe-oo[data-o="inhibit"] .oe-def-inhibit { opacity: 1; }
.oe-oo-stage { position: relative; aspect-ratio: 1.5; }
.oe-o { position: absolute; inset: 8%; background: var(--void); -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
.oe-o-inhibit { opacity: 0; transform: scale(.82) rotate(-18deg); }
.oe-oo[data-o="inhibit"] .oe-o-open { opacity: 0; transform: scale(1.12) rotate(14deg); }
.oe-oo[data-o="inhibit"] .oe-o-inhibit { opacity: 1; transform: none; }

/* Colourways */
.oe-ways { background: var(--bg); color: var(--fg); padding: clamp(56px, 7vw, 110px) var(--pad); transition: background .6s var(--ease), color .6s var(--ease); }
.oe-ways-row { display: grid; grid-template-columns: 1fr auto; gap: clamp(24px, 6vw, 120px); align-items: center; max-width: 1400px; margin: 0 auto; }
.oe-ways-pl { width: 100%; height: auto; }
.oe-ways-bm { width: clamp(70px, 9vw, 150px); height: auto; }
.oe-ways-ui { display: flex; flex-wrap: wrap; gap: 8px; max-width: 1400px; margin: clamp(32px, 4vw, 64px) auto 0; }
.oe-ways-ui button { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 999px; border: 1px solid currentColor; background: none; cursor: pointer; font: 400 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.oe-ways-ui button i { width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px var(--g), 0 0 0 4px currentColor; }
.oe-ways-ui button[aria-checked="true"] { background: var(--fg); color: var(--bg); opacity: 1; }

/* Marks */
.oe-marks { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: #e8e8e3; border-block: 1px solid #e8e8e3; }
.oe-markcard { background: var(--paper); grid-column: span 2; display: grid; grid-template-rows: auto 1fr; }
.oe-markcard:nth-child(4), .oe-markcard:nth-child(5) { grid-column: span 3; }
.oe-markcard-art { aspect-ratio: 1.3; display: grid; place-items: center; padding: 14%; }
.oe-mk { width: 100%; height: 100%; max-height: 220px; }
.oe-markcard figcaption { padding: 0 clamp(18px, 2vw, 32px) clamp(22px, 2.4vw, 36px); font-size: clamp(15px, 1.05vw, 19px); line-height: 1.45; }
.oe-markcard figcaption b { font-weight: 500; text-transform: uppercase; letter-spacing: .04em; font-size: .9em; }
.oe-markcard:hover .oe-mk { transform: scale(1.06); }
.oe-mk { transition: transform .9s var(--ease); }
.oe-js .oe-spin .oe-mk { animation: oe-spin 40s linear infinite; }
@keyframes oe-spin { to { transform: rotate(360deg); } }

/* Icons: the seven journeys */
.oe-icons-intro { max-width: 760px; margin: 0 auto; text-align: center; padding: clamp(80px, 10vw, 170px) var(--pad) clamp(28px, 4vw, 60px); font-size: clamp(18px, 1.5vw, 26px); }
.oe-journeys { padding: 0 var(--pad) clamp(64px, 9vw, 150px); max-width: 1600px; margin: 0 auto; }
.oe-journeys-tabs { display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(6px, 1vw, 16px); border-bottom: 1px solid #e3e3de; padding-bottom: 14px; }
.oe-journeys-tabs button { border: 0; background: none; cursor: pointer; display: grid; justify-items: center; gap: 10px; padding: 8px 4px; opacity: .35; transition: opacity .35s; }
.oe-journeys-tabs button img { height: clamp(36px, 4.4vw, 76px); width: auto; transition: transform .5s var(--ease); }
.oe-journeys-tabs button span { font: 400 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.oe-journeys-tabs button[aria-selected="true"], .oe-journeys-tabs button:hover { opacity: 1; }
.oe-journeys-tabs button[aria-selected="true"] img { transform: scale(1.12); }
.oe-journey[hidden] { display: none; }
.oe-journey { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(28px, 5vw, 100px); align-items: center; padding-top: clamp(32px, 5vw, 80px); min-height: clamp(380px, 38vw, 640px); }
.oe-journey-art { display: grid; place-items: center; }
.oe-journey-art img { width: auto; max-width: 80%; max-height: clamp(260px, 30vw, 520px); }
.oe-journey-text { display: grid; gap: .8em; }
.oe-journey-text h3 { font: italic 400 clamp(26px, 2.4vw, 42px)/1.15 var(--serif); }
.oe-journey-text h3 span { font-style: normal; font-weight: 500; }
.oe-js .oe-journey:not([hidden]) .oe-journey-art img { animation: oe-ink 1.4s var(--ease); }
.oe-js .oe-journey:not([hidden]) .oe-journey-text { animation: oe-rise .9s .15s var(--ease) both; }
@keyframes oe-ink { from { opacity: 0; transform: scale(.9) rotate(-8deg); filter: blur(6px); } }
@keyframes oe-rise { from { opacity: 0; transform: translateY(18px); } }
.oe-journeys-bar { height: 1px; background: #e3e3de; margin-top: 28px; }
.oe-journeys-bar i { display: block; height: 100%; background: var(--void); transform: scaleX(var(--t, 0)); transform-origin: 0 50%; }

/* Pattern: the snakeskin, slowly shedding */
.oe-pattern { height: min(56vw, 86svh); background: var(--void); -webkit-mask: var(--src) 50% var(--py, 0px) / max(1500px, 160%) auto repeat; mask: var(--src) 50% var(--py, 0px) / max(1500px, 160%) auto repeat; margin: clamp(40px, 6vw, 90px) var(--pad) 0; }

/* Application */
.oe-site { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 5vw, 100px); align-items: center; padding: clamp(72px, 10vw, 170px) var(--pad); background: var(--light); }
.oe-browser { border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 40px 80px -40px rgba(29, 29, 29, .45); }
.oe-browser-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #f6f6f3; border-bottom: 1px solid #e3e3de; }
.oe-browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d6d6d0; }
.oe-browser-bar span { margin-left: 10px; font: 400 11px var(--mono); color: #8a8a84; }
.oe-browser-view { height: clamp(320px, 38vw, 640px); overflow: hidden; }
.oe-browser-view img { transform: translateY(var(--pan, 0px)); }
.oe-site-copy { display: grid; gap: 16px; }
.oe-site-quote { font: italic 400 clamp(30px, 3.2vw, 56px)/1.1 var(--serif); }
.oe-bleed { overflow: hidden; }
.oe-bleed img, [data-zoom] img { transform: scale(var(--z, 1)); }
.oe-two { display: grid; grid-template-columns: 1fr 1fr; }
.oe-two figure { overflow: hidden; }
.oe-two img { height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.oe-two figure:hover img { transform: scale(1.04); }
.oe-ig { display: grid; grid-template-columns: 720fr 1200fr; background: var(--light); }
.oe-ig-copy { align-self: center; padding: var(--pad); display: grid; gap: 14px; }
.oe-ig-handle { font: italic 400 clamp(26px, 2.6vw, 44px) var(--serif); }
.oe-ig img { height: 100%; object-fit: cover; }
.oe-end { min-height: min(56.25vw, 90svh); display: grid; place-content: center; justify-items: center; gap: clamp(20px, 3vw, 40px); padding: var(--pad); }
.oe-end-mark { width: clamp(90px, 11vw, 180px); height: auto; }
.oe-js .oe-end-mark { animation: oe-spin 50s linear infinite; }
.oe-end-t { font: italic 300 clamp(48px, 7vw, 120px)/1 var(--serif); }

@media (max-width: 900px) {
  .oe-index { display: none; }
  .oe-oo { grid-template-columns: 1fr; }
  .oe-oo-stage { order: -1; max-width: 420px; justify-self: center; width: 100%; }
  .oe-marks { grid-template-columns: 1fr 1fr; }
  .oe-markcard, .oe-markcard:nth-child(4), .oe-markcard:nth-child(5) { grid-column: span 1; }
  .oe-markcard:nth-child(5) { grid-column: 1 / -1; }
  .oe-journeys-tabs { grid-template-columns: repeat(7, minmax(48px, 1fr)); overflow-x: auto; }
  .oe-journeys-tabs button span { font-size: 9px; }
  .oe-journey { grid-template-columns: 1fr; min-height: 0; }
  .oe-journey-art img { max-height: 220px; }
  .oe-site, .oe-ig { grid-template-columns: 1fr; }
  .oe-ways-row { grid-template-columns: 1fr; justify-items: center; }
  .oe-two { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .oe *, .oe *::before, .oe *::after { animation: none !important; transition: none !important; }
  .oe-js .oe .rv, .oe-js .oe-hero-line { opacity: 1; transform: none; }
  .oe-js .oe-hero .oe-pl, .oe-js .oe-pl-board .oe-draw { clip-path: none; }
}

/* Ink artwork drawn through a mask, so its colour follows currentColor */
.oe-ink { display: block; background: currentColor; -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
.oe-mk { width: auto; height: 100%; max-width: 100%; }
.oe-markcard-art .oe-ink { height: clamp(90px, 12vw, 200px); width: auto; max-width: 100%; }
.oe-markcard-art .oe-mk-bm2 { height: clamp(60px, 7vw, 120px); }
.oe-ways-bm { width: clamp(70px, 9vw, 150px); }
.oe-end-mark { width: clamp(90px, 11vw, 180px); }
.oe-hero-line { text-wrap: balance; }
@media (max-width: 900px) { .oe-hero-logo { width: 92vw; } }