.pen-section-title { margin: 0 0 18px; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; color: var(--ink); }
.pen-showcase {
  position: relative;
  height: 570px;
  margin: 0 0 36px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 12px;
  background: #111;
  color: #fff;
  touch-action: pan-y pinch-zoom;
  cursor: grab;
}
.pen-showcase.is-dragging { cursor: grabbing; user-select: none; }
.pen-showcase:focus-visible { outline-color: #bd9b70; outline-offset: 5px; }
.pen-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
  pointer-events: none;
}
.pen-showcase-heading { position: absolute; top: 36px; left: 44px; z-index: 2; }
.pen-showcase-heading > p:not(.pen-tagline) { color: #cfb38d; font-size: 10px; letter-spacing: .22em; font-weight: 600; }
.pen-showcase-heading .pen-tagline { font-size: 15px; font-weight: 400; color: #c6c1bb; margin-top: 10px; line-height: 1.5; }
.pen-slides, .pen-slide { position: absolute; inset: 0; }
.pen-copy { position: absolute; left: 44px; top: 151px; width: 36%; z-index: 2; }
.pen-brand { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #cfb38d; }
.pen-copy h3 { font-size: clamp(34px, 4.4vw, 56px); font-weight: 600; letter-spacing: -.04em; line-height: 1.05; margin: 13px 0 18px; max-width: 390px; text-wrap: balance; }
.pen-description { color: #b9b5b0; font-size: 13px; line-height: 1.8; max-width: 270px; }
.pen-consult {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  margin-top: 24px;
  padding: 12px 16px;
  min-height: 44px;
  border: 1px solid #c6a16c80;
  border-radius: 5px;
  color: #f3e4d1;
  background: #161411a6;
  font-size: 12px;
  transition: background .2s, border-color .2s;
}
.pen-consult:hover { background: #3a2e20; border-color: #cfb38d; }
.pen-consult svg { width: 16px; height: 16px; }
.pen-showcase a:focus-visible, .pen-showcase button:focus-visible { outline-color: #e4c290; }
.pen-portrait { position: absolute; left: 70%; bottom: 31%; width: 35%; height: 70%; transform: translateX(-50%); pointer-events: none; }
.pen-portrait::after { content: ''; position: absolute; width: 90px; height: 14px; left: 50%; bottom: 1%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, #000a, transparent 70%); z-index: -1; }
.pen-portrait img { width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.pen-controls { position: absolute; bottom: 25px; left: 44px; right: 32px; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.pen-drag-hint { display: flex; align-items: center; gap: 9px; color: #bcb3a9; font-size: 11px; }
.pen-drag-hint svg { width: 21px; height: 21px; stroke-width: 1; }
.pen-pagination { display: flex; gap: 2px; }
.pen-pagination button { width: 26px; min-height: 36px; display: grid; place-items: center; padding: 0; }
.pen-pagination button::after { content: ''; width: 18px; height: 2px; background: #9f8a6a66; transition: background .2s; }
.pen-pagination button[aria-current=true]::after { background: #f2d5a5; }
.pen-navigation { display: flex; align-items: center; gap: 12px; }
.pen-arrow { width: 44px; height: 44px; border: 1px solid #c6a16c66; border-radius: 50%; display: grid; place-items: center; color: #f5e8d7; background: #12100e94; transition: background .2s, border-color .2s; }
.pen-arrow:hover { background: #493123; border-color: #d3b48c; }
.pen-arrow svg { width: 18px; height: 18px; stroke-width: 1.2; }
.pen-count { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; color: #d5c3ad; }
.pen-count > span { color: #978677; margin-left: 3px; }
.pen-playback { width: 36px; height: 36px; padding: 0; flex-shrink: 0; border: 1px solid #c6a16c66; border-radius: 50%; color: #f5e8d7; background: #12100e94; display: grid; place-items: center; font: 13px/1 Arial,sans-serif; }
.pen-playback:hover { background: #493123; border-color: #d3b48c; }
.pen-playback:disabled { opacity: .55; cursor: default; }

@media (max-width: 1000px) and (min-width: 601px) {
  .pen-section-title { font-size: 21px; }
  .pen-showcase { height: 510px; }
  .pen-showcase-heading { left: 30px; top: 30px; }
  .pen-copy { left: 30px; top: 130px; width: 37%; }
  .pen-copy h3 { font-size: 39px; }
  .pen-description { font-size: 12px; max-width: 230px; }
  .pen-controls { left: 30px; right: 25px; }
  .pen-pagination { display: none; }
}
@media (max-width: 600px) {
  .pen-section-title { font-size: 20px; margin-bottom: 14px; }
  .pen-showcase { height: 700px; margin-bottom: 18px; border-radius: 7px; }
  .pen-scene { inset: auto auto 70px 50%; width: 760px; max-width: none; height: 380px; transform: translateX(-70%); mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 95%, transparent); }
  .pen-showcase-heading { left: 23px; right: 23px; top: 25px; }
  .pen-showcase-heading > p:not(.pen-tagline) { font-size: 9px; letter-spacing: .2em; }
  .pen-showcase-heading .pen-tagline { font-size: 13px; margin-top: 8px; }
  .pen-copy { top: 104px; left: 23px; right: 23px; width: auto; }
  .pen-brand { font-size: 10px; }
  .pen-copy h3 { font-size: 32px; line-height: 1.08; margin: 10px 0 0; max-width: 290px; }
  .pen-description { display: none; }
  .pen-consult { font-size: 11px; margin-top: 16px; padding: 9px 12px; min-height: 40px; gap: 17px; }
  .pen-portrait { left: 50%; bottom: 168px; width: 220px; height: 280px; }
  .pen-portrait::after { width: 65px; }
  .pen-controls { left: 23px; right: 20px; bottom: 22px; gap: 10px; }
  .pen-drag-hint { font-size: 10px; gap: 6px; flex: 1; min-width: 0; max-width: 124px; line-height: 1.5; }
  .pen-drag-hint > span { min-width: 0; }
  .pen-pagination { display: none; }
  .pen-navigation { gap: 6px; flex-shrink: 0; }
  .pen-playback { width: 32px; height: 32px; font-size: 12px; }
  .pen-count { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .pen-showcase a, .pen-showcase button, .pen-pagination button::after { transition: none; }
}