:root {
  --ink: #14251e;
  --paper: #fff;
  --tint: #f4f2eb;
  --line: #d8ded7;
  --dim: #4d5d53;
  --dark: #10231c;
  --gold: #e7b238;
  --serif: Georgia, "Times New Roman", serif;
  --mono: Georgia, "Times New Roman", serif;
  font: 16px/1.5 var(--serif);
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
body, figure { margin: 0; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .52; cursor: default; }
:focus-visible { outline: 2px solid #a57612; outline-offset: 4px; }
[hidden] { display: none !important; }
.wrap { width: min(1376px, calc(100% - 112px)); margin-inline: auto; }
.skip { position: absolute; left: 12px; top: 12px; z-index: 5; background: white; padding: 10px; transform: translateY(-160%); }
.skip:focus { transform: none; }
.bar { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); }
.brand { font-size: 17px; font-weight:400; letter-spacing: .18em; text-decoration: none; }
.brand span { margin-left: 5px; color: #86600d; }
nav { display: flex; gap: clamp(18px, 4vw, 56px); font-size: 14px; }
nav a, .text-link { text-decoration: none; }
nav a:hover, .text-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.outline, .primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid currentColor;
  border-radius: 0;
  padding: 10px 15px;
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  font-size: .9rem;
  font-weight:400;
}
.primary { background: var(--ink); border-color: var(--ink); color: #fff; padding: 13px 17px; }
.primary:hover { background: #30483b; }
.outline:hover { background: var(--tint); }
#count { color: var(--dim); font: 400 12px var(--mono); }

.hero { display: grid; grid-template-columns: 1fr .92fr; align-items: center; gap: 30px; padding-block: clamp(36px, 6vw, 96px) 40px; }
.eyebrow, .browser, .mock-bottom, .art figcaption, .number {
  font: 400 11px/1.5 var(--mono);
  letter-spacing: .12em;
}
.eyebrow span { display: inline-block; width: 24px; height: 1px; margin: 0 8px 3px 0; background: var(--gold); }
h1, h2 { font-family: var(--serif); font-weight: 400; line-height: .98; letter-spacing: -.065em; }
.hero h1 { font-size: clamp(54px, 6.9vw, 108px); margin: 19px 0 25px; }
.hero h1 em { display: block; font-weight: 400; }
.hero h1 em { color: #4d674d; }
.lead { max-width: 49ch; color: var(--dim); font-size: clamp(16px, 1.5vw, 20px); }
.hero .lead { margin: 0 0 25px; }
.hero-links { display: flex; flex-wrap: wrap; gap: 15px 20px; align-items: center; }
.text-link { font-size: 14px; }
.art img { display: block; width: 100%; height: auto; max-height: 570px; object-fit: contain; }
.art figcaption { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; color: var(--dim); }

.journey { background: var(--dark); color: #fffdf4; }
.journey ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 21px 0; list-style: none; margin-block: 0; font-size: 14px; }
.journey b { color: #efc977; margin-right: 6px; font: 400 11px var(--mono); }
.journey a { text-decoration: none; }
.journey a:hover { text-decoration: underline; text-underline-offset: 5px; }

.section h2 { font-size: clamp(46px, 6.6vw, 94px); margin: 14px 0 28px; }
.section { padding-block: clamp(45px, 7vw, 108px); scroll-margin-top: 10px; }
.section + .section { border-top: 1px solid var(--line); }
.studio { display: grid; grid-template-columns: 1fr 1.35fr; gap: 24px; }
.studio form { background: var(--tint); padding: clamp(18px, 3vw, 36px); }
label { display: block; font-weight:400; margin-bottom: 14px; }
input, textarea, select { display: block; width: 100%; margin-top: 4px; padding: 10px; border: 1px solid #a9b2a6; border-radius: 0; background: #fff; color: var(--ink); }
textarea { min-height: 89px; resize: vertical; }
.small { font-size: .875rem; color: var(--dim); }
.mock { --m-bg: #f0ded1; --m-fg: #44281b; --m-accent: #f8bc76; display: flex; flex-direction: column; background: var(--m-bg); color: var(--m-fg); overflow-wrap: anywhere; }
.mock.tech { --m-bg: #1a2638; --m-fg: #e8f2ff; --m-accent: #9acbff; }
.mock.organic { --m-bg: #e5ebda; --m-fg: #263520; --m-accent: #cae49c; }
.browser, .mock-bottom { display: flex; justify-content: space-between; gap: 10px; padding: 13px 18px; background: var(--m-fg); color: var(--m-bg); }
.mock-body { padding: clamp(18px, 4vw, 54px); flex: 1; }
.mock h3 { font: 400 clamp(30px, 4.1vw, 64px)/1.02 var(--serif); margin: 13px 0; letter-spacing: -.04em; }
.tech h3 { font-family: var(--serif); }
.mock-cta { display: inline-block; background: var(--m-accent); padding: 8px 13px; color: #181a16; font-weight:400; }
.references { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; font-size: 14px; }
.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.product { display: flex; flex-direction: column; gap: 10px; padding: 19px; border: 1px solid var(--line); }
.product h3, .product p { margin: 0; }
.product h3 { font: 400 clamp(25px, 2.5vw, 34px)/1.08 var(--serif); letter-spacing: -.035em; }
.product .description { flex: 1; color: var(--dim); }
.number { color: #76560e; }
.price { font-size: 23px; font-weight:400; }
.order-history { list-style: none; margin: 24px 0 0; padding: 0; }
.order-history li { border-top: 1px solid var(--line); padding: 16px 0; }
.order-history li:last-child { border-bottom: 1px solid var(--line); }
.order-history p { margin: 5px 0 0; }
.order-history time { font: 400 12px var(--mono); color: var(--dim); }
.credits { display: flex; flex-wrap: wrap; gap: 5px 13px; font-size: 11px; }
.credits a { text-underline-offset: 3px; }
footer.bar { border-top: 1px solid var(--line); border-bottom: 0; font-size: 13px; color: var(--dim); }

dialog { border: 1px solid var(--line); background: var(--paper); color: var(--ink); width: min(490px, calc(100% - 30px)); max-height: 90dvh; padding: 22px; }
dialog::backdrop { background: #10231cb0; }
.cart-head, .total, .item { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cart-head h2 { margin: 0; font-size: 34px; }
.item, .total { border-top: 1px solid var(--line); padding: 12px 0; }
.item button { padding: 5px 8px; }
.total { margin-top: 12px; }
.notice { background: #eee9d5; padding: 12px; }

@media (max-width: 950px) {
  .wrap { width: calc(100% - 52px); }
  .products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 670px) {
  .wrap { width: calc(100% - 36px); }
  .bar { min-height: 64px; }
  nav { display: none; }
  .hero, .studio { grid-template-columns: 1fr; }
  .hero { gap: 26px; }
  .hero h1 { font-size: clamp(43px, 10.9vw, 66px); }
  .art img { max-height: 410px; }
  .journey ol { grid-template-columns: repeat(2, 1fr); }
  footer.bar { flex-wrap: wrap; padding-block: 14px; }
}
@media (max-width: 470px) {
  .products { grid-template-columns: 1fr; }
}

/* A title page, followed by chapters. */
:root { --paper: #fbf9f2; --ink: #272b23; --line: #d6cfc1; --dark: #292e26; }
html { scroll-behavior: smooth; }
body { overflow-x: clip; }
.opening {
  background: #eeeadf;
  border-bottom: 1px solid #4c4e40;
  overflow: clip;
}
.opening .hero { min-height: min(76svh, 760px); }
.hero h1 em { color: #58634b; }
.art {
  background: #fff;
  border: 1px solid #8f8b7a;
  padding: clamp(8px, 1.8vw, 24px);
  box-shadow: 8px 8px 0 #dcd4c2;
}
.art figcaption { color: #4e5146; }
.chapter-heading { border-top: 1px solid #8f8b7a; padding-top: 17px; }
.section + .section { border-top: 0; }
.index-trigger {
  border: 0;
  padding: 10px;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight:400;
}
.index-trigger span { margin-right: 5px; }
#site-index {
  width: min(760px, 100%);
  max-width: 100%;
  height: 100dvh;
  max-height: none;
  margin: 0 0 0 auto;
  border: 0;
  padding: 0;
  background: var(--dark);
  color: #fbf9f2;
}
#site-index .outline { color: inherit; }
#site-index .outline:hover { background: #464c40; }
.index-inner { padding: 25px 0 45px; }
.index-inner h2 { font-size: clamp(56px, 9vw, 95px); margin: 35px 0 26px; }
#site-index nav { display: grid; gap: 0; }
#site-index nav a {
  display: grid;
  grid-template-columns: 2.4rem 1fr auto;
  align-items: center;
  gap: 8px;
  border-top: 1px solid #76796a;
  padding: 15px 0;
  font: 400 clamp(23px, 4vw, 42px)/1.1 var(--serif);
}
#site-index nav a:last-child { border-bottom: 1px solid #76796a; }
#site-index nav span, #site-index nav b { color: #eac480; font: 400 13px var(--mono); }
.product { position: relative; background: #f4efe2; border-color: #bdb4a0; }
.product:nth-child(even) { background: #e9ecdf; }
.product h3 { min-height: 2.2em; }
.product details { flex: 1; border-top: 1px solid #bdb4a0; padding: 9px 0; }
.product summary { cursor: pointer; font-weight:400; font-size: 14px; }
.product details p { padding-top: 9px; }
#cart, #order { box-shadow: 8px 8px 0 #0002; }
#studio:focus, #catalog:focus, #orders:focus { outline-offset: 6px; }

@media (prefers-reduced-motion: no-preference) {
  [data-enter="left"] { --entry-x: -40px; --entry-y: 14px; }
  [data-enter="right"] { --entry-x: 40px; --entry-y: 14px; }
  [data-enter="up"] { --entry-x: 0; --entry-y: 26px; }
  [data-enter].arrived { animation: enter-chapter 720ms cubic-bezier(.22, 1, .36, 1) both; }
  .hero .art.arrived { animation-delay: 85ms; }
  .product details[open] p { animation: enter-details 300ms ease-out both; }
  #site-index[open] { animation: index-in 460ms cubic-bezier(.22, 1, .36, 1) both; }
  #cart[open] { animation: cart-in 350ms cubic-bezier(.22, 1, .36, 1) both; }
  #order[open] { animation: order-in 350ms cubic-bezier(.22, 1, .36, 1) both; }
  @keyframes enter-chapter {
    from { opacity: .15; transform: translate(var(--entry-x), var(--entry-y)); }
    to { opacity: 1; transform: none; }
  }
  @keyframes enter-details { from { opacity: .15; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
  @keyframes index-in { from { transform: translateX(100%); } to { transform: none; } }
  @keyframes cart-in { from { opacity: .4; transform: translateX(30px); } to { opacity: 1; transform: none; } }
  @keyframes order-in { from { opacity: .4; transform: translateY(24px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (max-width: 670px) {
  .opening .hero { min-height: auto; }
  .product h3 { min-height: auto; }
}
@media (max-width: 360px) {
  header.bar { gap: 6px; }
  .index-trigger, header .outline { padding-inline: 6px; }
}

.masthead { position: sticky; top: 0; z-index: 10; background: #eae6da; border-bottom: 1px solid #c9c1b0; }
.masthead .bar { border: 0; min-height: 62px; }
.masthead-links { margin-left: auto; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; }
.masthead .brand { border: 1px solid #8c7659; padding: 6px 14px; font: italic 25px/1.2 var(--serif); letter-spacing: .01em; text-transform: lowercase; }
main { position: relative; background: #231f19; }
main > .wrap:has(#checkout-result:not([hidden])) { background: var(--paper); padding-block: 1px; }
.chapter-anchor { scroll-margin-top: 62px; }
.chapter-anchor:focus { outline: none; }
.sheet { position: relative; isolation: isolate; }
.sheet-paper { background: #e9e6dc; }
.sheet-catalog .sheet-paper { background: #354235; color: #fbf8ed; }
.sheet-orders .sheet-paper { background: #eeece2; }
.sheet-shade { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.sheet .section { width: min(1150px, calc(100% - 112px)); padding-block: clamp(58px, 9vw, 136px); }
.chapter-heading { position: relative; padding: 5px 0 20px min(23vw, 225px); border: 0; }
.chapter-heading h2 { font-size: clamp(40px, 6vw, 86px); margin-top: 10px; }
.chapter-number { position: absolute; left: 0; top: 2px; font: italic 400 clamp(52px, 8.5vw, 113px)/1 var(--serif); color: #775b40; }
.sheet-catalog .chapter-number { color: #e3bd81; }
.sheet-catalog .lead { color: #efeadd; }
.sheet-catalog .product { color: var(--ink); }
footer.bar { position: relative; }
#site-index { width: 100%; margin: 0; background: #211f1a; }
.index-inner { width: min(1150px, calc(100% - 112px)); }
.index-inner h2 { font-size: 12px; font-family: var(--mono); letter-spacing: .18em; text-transform: uppercase; margin: 52px 0 12px; }
#site-index nav :is(a, button) {
  display: grid; grid-template-columns: 3.7rem 1fr auto; align-items: baseline; gap: 12px;
  width: 100%; padding: 16px 0; border: 0; border-top: 1px solid #645d4f;
  background: none; color: inherit; text-align: left; text-decoration: none;
  font: 400 clamp(27px, 4.8vw, 64px)/1.1 var(--serif);
}
#site-index nav :is(a, button):hover { color: #eac480; }
#site-index nav a:last-child { border-bottom: 1px solid #645d4f; }
#site-index nav span { font: italic 21px var(--serif); }
#site-index nav small { color: #d4cbbc; font: 13px/1.4 var(--serif); }

@media (prefers-reduced-motion: no-preference) {
  .sheet:not(.sheet-orders) { position: sticky; top: var(--sheet-top, auto); }
  .sheet-paper, .sheet-shade {
    transform-origin: center bottom;
    transform: perspective(2400px) rotateX(var(--sheet-tilt, 0deg)) scale(var(--sheet-scale, 1));
  }
  .sheet-shade { background: #15100b; opacity: var(--sheet-shade, 0); }
  #site-index[open] { animation-name: index-overlay-in; }
  @keyframes index-overlay-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 670px) {
  .masthead-links { display: none; }
  .masthead .brand { font-size: 20px; padding-inline: 8px; }
  .sheet .section, .index-inner { width: calc(100% - 36px); }
  .chapter-heading { padding-left: 64px; }
  .chapter-number { font-size: 46px; }
  #site-index nav :is(a, button) { grid-template-columns: 2rem 1fr; }
  #site-index nav small { display: none; }
}

/* Keep the final controls above the point where the next sheet enters. */
@media (prefers-reduced-motion: no-preference) {
  .sheet-studio .section, .sheet-catalog .section {
    padding-bottom: max(190px, 26svh);
  }
}


/* ANANASIK V2 — an inspiration-first, progressive website design journey. */
:root{--paper:#f5f3eb;--ink:#242820;--dark:#242d25;--line:#d7d3c7;--serif:Georgia,"Times New Roman",serif}

main{background:#17231c}
.sheet-studio .sheet-paper{background:#f4f2ea}
.sheet-catalog .sheet-paper{background:#314036}
.section .chapter-heading .lead{max-width:670px}
.wizard .chapter-heading{padding-bottom:32px}
.wizard .chapter-heading h2{margin-bottom:20px}
.wizard .lead{font-size:clamp(15px,1.4vw,19px)}
.wizard-progress{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0 47px;border-top:1px solid #b8b5a9;padding-top:13px}
.wizard-progress span{font:400 12px/1.5 var(--mono);letter-spacing:.06em;color:#929486}
.wizard-progress span.is-active{color:#25492f}
.wizard-progress span.is-done{color:#61826a}
.wizard-progress span.is-done:before{content:"✓ ";color:#4e9d61}
.wizard-step{scroll-margin-top:95px}
.wizard-next{margin-top:45px;padding-top:45px;border-top:1px solid #bcbcb0}
.step-top{display:flex;justify-content:space-between;align-items:end;gap:22px;margin-bottom:24px}
.step-top h3{font:400 clamp(30px,3.8vw,54px)/1.05 var(--serif);letter-spacing:-.055em;margin:13px 0 0}
.step-top p.small{max-width:260px}
.wizard .text-link{border:0;padding:0;background:transparent;color:#526849;text-decoration:underline;text-underline-offset:4px;white-space:nowrap;cursor:pointer}
.style-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.style-card{display:block;width:100%;padding:0;border:1px solid #d0cdc3;background:#fff;text-align:left;color:var(--ink);border-radius:5px;overflow:hidden;transition:border-color .17s,box-shadow .17s,transform .17s;box-shadow:0 9px 20px #20281c0a}
.style-card:hover,.style-card:focus-visible{transform:translateY(-3px);box-shadow:0 15px 30px #20281c23;border-color:#768e69}
.style-card[aria-pressed=true]{border:3px solid #527d54;box-shadow:0 12px 30px #365a3433}
.style-visual{height:clamp(172px,18vw,260px);position:relative;overflow:hidden;isolation:isolate;padding:16px 18px;display:flex;flex-direction:column;justify-content:space-between}
.style-visual:before,.style-visual:after{content:"";position:absolute;z-index:-1;pointer-events:none}
.visual-nav{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2;font:400 9px/1.2 var(--serif);letter-spacing:.09em}
.visual-nav span:last-child{font-weight:600;letter-spacing:.025em}
.visual-body{position:relative;z-index:2;max-width:79%;display:flex;flex-direction:column;align-items:flex-start}
.visual-body small{font:400 9px/1.4 var(--mono);letter-spacing:.1em;opacity:.85}
.visual-body strong{display:block;font:600 clamp(19px,2.5vw,42px)/1.01 var(--serif);letter-spacing:-.05em;margin:7px 0 11px}
.visual-body i{display:inline-block;font:400 9px/1.2 var(--serif);font-style:normal;border:1px solid currentColor;padding:8px 12px}
.style-caption{padding:15px 16px 17px;display:flex;justify-content:space-between;align-items:center;gap:7px}
.style-caption strong{display:block;font:400 16px/1.35 var(--serif)}
.style-caption small{display:block;font:12px/1.45 var(--serif);color:#69746b;margin-top:4px}
.style-select{font:400 11px var(--mono);color:#446e47;white-space:nowrap}
.style-card[aria-pressed=true] .style-select{color:#226a36}
.style--minimal .style-visual{background:#fbfaf6;color:#191c19}
.style--minimal .visual-body strong{font-family:var(--serif);font-weight:400;letter-spacing:-.09em;font-size:clamp(25px,3.7vw,50px)}
.style--minimal .style-visual:after{width:100px;height:100px;border:2px solid #222;right:30px;top:57px;border-radius:50%}
.style--luxury .style-visual{background:radial-gradient(circle at 75% 62%,#705b3c 0%,#1e231e 38%,#0d1412 79%);color:#e7ddc6}
.style--luxury .style-visual:before{width:90px;height:160px;border:1px solid #b79d63;border-radius:50% 50% 10% 10%;right:17%;bottom:0;box-shadow:0 0 0 15px #b59b5b12,inset 0 0 25px #c2a77d40}
.style--luxury .visual-body strong{font-size:clamp(22px,2.8vw,42px)}
.style--corporate .style-visual{background:linear-gradient(155deg,#d9e5e7 0%,#acc4ca 56%,#607b86 100%);color:#1c3542}
.style--corporate .style-visual:after{width:37%;height:80%;right:6%;bottom:-11%;background:repeating-linear-gradient(90deg,#ffffff99 0 2px,transparent 3px 17px),repeating-linear-gradient(0deg,#263e4e77 0 3px,transparent 4px 22px);transform:skew(-14deg);clip-path:polygon(20% 0,100% 0,80% 100%,0 100%)}
.style--corporate .visual-body strong{font-family:var(--serif);font-weight:400}
.style--editorial .style-visual{background:#efe5d4;color:#442d28}
.style--editorial .style-visual:after{width:45%;height:69%;right:5%;top:21%;background:radial-gradient(ellipse at 40% 45%,#5d6e51 0%,#aa9f80 42%,#76513f 78%);clip-path:polygon(12% 0,92% 6%,100% 95%,0 100%);transform:rotate(-6deg)}
.style--editorial .visual-body strong{font-weight:400;font-style:italic}
.style--bold .style-visual{background:#fe6639;color:#421c69}
.style--bold .style-visual:before{width:210px;height:210px;right:-25px;bottom:-55px;border-radius:50%;background:#8735db;box-shadow:-70px -30px 0 #fac83d}
.style--bold .visual-body strong{font-family:var(--serif);font-weight:400;font-size:clamp(23px,3vw,49px);text-transform:uppercase;font-style:italic}
.style--organic .style-visual{background:#e8eedc;color:#3e533d}
.style--organic .style-visual:before{width:145px;height:190px;right:18px;top:48px;background:#879b5f;border-radius:75% 3% 67% 7%;transform:rotate(-25deg)}
.style--organic .style-visual:after{width:130px;height:140px;right:2px;bottom:-15px;border:2px solid #f5f1d4;border-radius:4% 80% 2% 70%;transform:rotate(22deg)}
.style--tech .style-visual{background:linear-gradient(127deg,#0d1426,#193963);color:#def6fc}
.style--tech .style-visual:before{inset:0;background-image:linear-gradient(#4cb2f51a 1px,transparent 1px),linear-gradient(90deg,#4cb2f51a 1px,transparent 1px);background-size:24px 24px;transform:perspective(180px) rotateX(30deg) scale(1.5)}
.style--tech .style-visual:after{width:120px;height:120px;right:8%;bottom:12%;border:2px solid #69cfff;border-radius:50%;box-shadow:0 0 22px #45b7f7,0 0 42px #5083ed80,inset 0 0 25px #3a73da}
.style--tech .visual-body strong{font-family:var(--serif);font-weight:400;letter-spacing:-.075em}
.style--events .style-visual{background:#4d1533;color:#ffd9c9}
.style--events .style-visual:before{width:120px;height:190px;right:14%;top:15%;border-radius:50%;background:linear-gradient(22deg,#ffbd68,#e65a89,#a238c5);transform:rotate(20deg);filter:blur(2px)}
.style--events .visual-body strong{font-family:var(--serif);font-weight:400;text-transform:uppercase;letter-spacing:-.06em}
.style--product .style-visual{background:#e4ede7;color:#284c40}
.style--product .style-visual:before{width:120px;height:150px;right:12%;top:21%;border-radius:17px 17px 45px 45px;background:linear-gradient(100deg,#a7885b,#e1bd85 38%,#9d7555);box-shadow:15px 15px 0 #354c3b22;transform:rotate(-12deg)}
.style--product .style-visual:after{width:45px;height:12px;right:25%;top:17%;background:#b99a70;border-radius:10px}
.style--product .visual-body strong{font-family:var(--serif);font-weight:400;letter-spacing:-.07em}
.site-types{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.type-card{padding:21px 18px;background:#fff;border:1px solid #d7d3c9;text-align:left;min-height:167px;display:flex;flex-direction:column;gap:8px;transition:all .2s}
.type-card:hover,.type-card:focus-visible{border-color:#557d59;transform:translateY(-2px)}
.type-card[aria-pressed=true]{border:2px solid #507d51;background:#e9efe3}
.type-card .type-symbol{font-size:26px}
.type-card strong{font:400 18px/1.2 var(--serif)}
.type-card small{color:#667369;line-height:1.3}
.type-card .type-price{margin-top:auto;font:400 17px/1.2 var(--serif)}
.brief-layout{display:grid;grid-template-columns:1.13fr .87fr;gap:20px}
.brief-layout #brief{background:#eae7dc;border:1px solid #d3ccbb;padding:clamp(18px,3vw,35px)}
.brief-layout label{font-size:14px}
.brief-layout input,.brief-layout textarea{padding:13px 14px;border-radius:4px;max-width:100%}
.brief-layout textarea{min-height:140px}
.voice-row{display:flex;align-items:center;gap:10px;margin:4px 0 15px;flex-wrap:wrap}
.voice-row .outline{border-radius:40px}
.voice-row .small{max-width:300px}
.optional{font-size:11px;color:#69786b;font-weight:400}
.upload-box{padding:14px;border:1px dashed #9da995;background:#f9f8f1}
.upload-box input{border:0;padding:0;margin:10px 0;font-size:12px;background:transparent}
.upload-box .small{display:block}
.image-thumb{margin:-6px 0 15px}.image-thumb img{width:100px;height:90px;object-fit:cover;border:1px solid var(--line)}
.brief-side{background:#2e3c32;color:#f6f4e8;padding:30px;min-height:340px;display:flex;flex-direction:column}
.brief-side>p{color:#d5ddd4}
.selected-summary{font:400 clamp(25px,3vw,42px)/1.08 var(--serif);margin-top:24px}
.brief-decoration{display:flex;align-items:center;gap:25px;margin-top:auto;border-top:1px solid #899b7e;padding-top:18px;font-size:60px;color:#cedca9}
.brief-decoration span{font:400 11px/1.6 var(--mono);letter-spacing:.15em;color:#cedca9}
.preview-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(250px,.7fr);gap:18px}
.preview-layout .mock{min-height:450px;box-shadow:0 14px 32px #24382713}
.preview-layout .mock-body{position:relative;overflow:hidden}
.preview-layout .mock-accent{position:absolute;width:150px;height:150px;right:18px;top:21%;border-radius:55% 4% 64% 12%;border:2px solid currentColor;opacity:.32;transform:rotate(18deg)}
.preview-layout .mock h3{position:relative;max-width:570px;font-size:clamp(36px,5vw,69px)}
.preview-layout .mock p{position:relative;max-width:430px}
.preview-aside{background:#fcfaf3;border:1px solid #d7d3c9;padding:27px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.preview-aside h4{font:400 33px/1.1 var(--serif);margin:8px 0}
.preview-aside p{font-size:14px}
.preview-aside button{width:100%;margin-top:8px}
.preview-aside .outline{border-color:#888}
.preview-layout .mock.minimal{--m-bg:#fdfdf7;--m-fg:#171e18;--m-accent:#ddf088}
.preview-layout .mock.luxury{--m-bg:#1b201b;--m-fg:#efdec6;--m-accent:#bfa070}
.preview-layout .mock.corporate{--m-bg:#cedfe3;--m-fg:#193644;--m-accent:#acc7ce}
.preview-layout .mock.editorial{--m-bg:#f0ded1;--m-fg:#44281b;--m-accent:#f8bc76}
.preview-layout .mock.bold{--m-bg:#e86139;--m-fg:#40226c;--m-accent:#f4ca40}
.preview-layout .mock.organic{--m-bg:#e5ebda;--m-fg:#263520;--m-accent:#cae49c}
.preview-layout .mock.tech{--m-bg:#1a2638;--m-fg:#e8f2ff;--m-accent:#9acbff}
.preview-layout .mock.events{--m-bg:#4d1533;--m-fg:#ffe7d4;--m-accent:#ffad77}
.preview-layout .mock.product{--m-bg:#e2ece6;--m-fg:#355444;--m-accent:#eec58e}
.preview-layout .mock.bold h3,.preview-layout .mock.tech h3,.preview-layout .mock.minimal h3,.preview-layout .mock.product h3,.preview-layout .mock.events h3{font-family:var(--serif);font-weight:400;letter-spacing:-.065em}
.references{margin-top:32px;padding-top:18px;border-top:1px solid #c5c8bb}
.references .small{flex-basis:100%}
.cart-bonus{margin-top:15px;background:#e7eddd;border:1px solid #bdc7b3;padding:12px;font-size:13px}
.cart-discount{font-size:13px;color:#32734e;font-weight:400}
@media(max-width:1050px){.style-grid{gap:13px}.style-caption{padding:12px}.style-caption strong{font-size:14px}.site-types{grid-template-columns:repeat(2,1fr)}}
@media(max-width:780px){.style-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.style-visual{height:clamp(155px,26vw,240px)}.brief-layout,.preview-layout{grid-template-columns:1fr}.brief-side{min-height:230px}.preview-layout .mock{min-height:340px}.step-top{align-items:start;flex-direction:column;gap:10px}}
@media(max-width:530px){.style-grid{gap:9px}.style-visual{padding:10px;height:165px}.visual-body{max-width:82%}.visual-body strong{font-size:22px!important}.visual-nav{font-size:8px}.visual-nav span:last-child{display:none}.style-caption{padding:9px;align-items:start;flex-direction:column}.style-caption strong{font-size:12px}.style-caption small{font-size:10px}.style-select{font-size:10px}.site-types{grid-template-columns:1fr 1fr;gap:8px}.type-card{padding:14px;min-height:154px}.type-card strong{font-size:14px}.type-card small{font-size:11px}.wizard-progress{font-size:10px}.wizard-progress span{font-size:10px}.preview-aside{padding:18px}.wizard .chapter-heading{padding-bottom:15px}}

/* Optional reference image is rendered only in the visitor's local browser. */
.mock-user-image{position:absolute;right:0;top:0;width:39%;height:100%;object-fit:cover;z-index:0;opacity:.86;mask-image:linear-gradient(to right,transparent 0%,#000 30%);-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 30%)}
.mock-body>small,.mock-body>h3,.mock-body>p,.mock-body>.mock-cta{position:relative;z-index:2}
.preview-layout .mock-body:has(.mock-user-image)>h3,.preview-layout .mock-body:has(.mock-user-image)>p{max-width:65%}
@media(max-width:530px){.mock-user-image{width:42%;opacity:.32}.preview-layout .mock-body:has(.mock-user-image)>h3,.preview-layout .mock-body:has(.mock-user-image)>p{max-width:100%}}


/* Restored cinematic chapter stack. Each new chapter rises over the preceding sheet
   while the previous chapter tilts backwards, scales down and darkens. */
@media (prefers-reduced-motion: no-preference) {
  .sheet:not(.sheet-orders) {
    position: -webkit-sticky;
    position: sticky;
    top: var(--sheet-top, 0px);
    will-change: auto;
  }
  .sheet-paper {
    position: relative;
    backface-visibility: hidden;
    transform-origin: center top;
    transform: perspective(1700px) translate3d(0, var(--sheet-y, 0px), 0)
               rotateX(var(--sheet-tilt, 0deg)) scale(var(--sheet-scale, 1));
  }
  .sheet-shade {
    backface-visibility: hidden;
    transform-origin: center top;
    transform: perspective(1700px) translate3d(0, var(--sheet-y, 0px), 0)
               rotateX(var(--sheet-tilt, 0deg)) scale(var(--sheet-scale, 1));
    display: block;
  }
  .sheet:not(.sheet-orders) .sheet-paper {
    box-shadow: 0 22px 55px #0b170e2a;
  }
  /* The mosaic appears as a sequence rather than nine static squares. */
  .style-card {
    opacity: 0;
    transform: translate3d(0, 38px, 0);
    transition: opacity 620ms ease, transform 760ms cubic-bezier(.2,.9,.2,1),
                box-shadow 250ms ease, border-color 250ms ease;
    transition-delay: var(--card-delay, 0ms);
  }
  .style-card.is-visible {opacity:1;transform:translate3d(0,0,0)}
  .style-card.is-visible:hover,
  .style-card.is-visible:focus-visible {transform:translate3d(0,-7px,0)}
  .style-card .style-visual:before,
  .style-card .style-visual:after {
    transition: transform 650ms cubic-bezier(.2,.8,.2,1),filter 650ms ease;
  }
  .style-card:hover .style-visual:before,
  .style-card:hover .style-visual:after {filter:brightness(1.14)}
}
@media (prefers-reduced-motion: reduce) {
  .sheet,.sheet-paper,.sheet-shade {position:relative;transform:none!important;}
  .sheet-shade {display:none}
  .style-card {opacity:1;transform:none}
}
/* Mobile Safari must retain scroll height and keep long chapters readable. */
@media (max-width:670px) {
  .sheet:not(.sheet-orders) {top:var(--sheet-top,0px)}
  .sheet-paper {overflow:visible}
  .sheet .section {padding-top:clamp(38px,8vw,70px)}
}


/* ANANASIK STUDIO PORTFOLIO — verified public projects, premium editorial presentation */
.sheet-portfolio .sheet-paper{background:#1c2821;color:#f4f2e8}
.sheet-portfolio .section{width:min(1280px,calc(100% - 112px))}
.sheet-portfolio .chapter-heading{padding-bottom:clamp(34px,5.5vw,88px)}
.sheet-portfolio .chapter-heading h2{font-size:clamp(54px,8vw,117px);margin-bottom:23px}
.sheet-portfolio .chapter-heading h2 em{font-weight:400;color:#d1b98b}
.sheet-portfolio .chapter-heading .lead{color:#d3d7ca;max-width:590px}
.sheet-portfolio .chapter-number{color:#c0a174}
.sheet-portfolio .eyebrow{color:#e1c18f}
.portfolio-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0 24px;border-top:1px solid #687265}
.portfolio-heading>span:last-child{font:400 12px var(--mono);letter-spacing:.15em;color:#b6baaa}
.sheet-portfolio [hidden]{display:none!important}
/* Clean screenshots; captions and navigation stay outside the images. */
.portfolio-feature{scroll-margin-top:90px;display:flex;position:relative;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;border-radius:16px}
.portfolio-feature::-webkit-scrollbar{display:none}
.portfolio-card{min-width:0;text-decoration:none;display:flex;flex-direction:column;color:inherit;background:transparent}
.portfolio-thumb{aspect-ratio:3/2;overflow:hidden;border-radius:12px;background:#e7e7e3}
.portfolio-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.portfolio-card-copy{padding:15px 2px 6px;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.portfolio-card-copy h4{margin:0;font:500 14px/1.4 var(--serif);letter-spacing:-.015em}
.portfolio-card-copy>span{font:400 11px/1.5 var(--serif);color:#bac3bb;overflow-wrap:anywhere;text-align:right}
.portfolio-card--featured{flex:0 0 88%;scroll-snap-align:start}
.portfolio-card--featured:last-child{margin-right:12%}
.portfolio-card--featured .portfolio-thumb{border-radius:16px}
.portfolio-card--featured .portfolio-card-copy h4{font-size:16px}
.portfolio-card:focus-visible,.portfolio-feature:focus-visible{outline:2px solid #e1e9c3;outline-offset:5px}
.portfolio-controls{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:22px 0 80px}
.portfolio-controls>span{font:400 12px var(--serif);color:#bac3bb;margin-right:12px;font-variant-numeric:tabular-nums}
.portfolio-controls button{width:42px;height:42px;border:1px solid #ffffff26;border-radius:50%;background:#ffffff0a;color:#f4f2e8;font-size:20px;cursor:pointer;transition:background .2s}
.portfolio-controls button:hover:not(:disabled){background:#ffffff20}
.portfolio-controls button:disabled{opacity:.3;cursor:default}
.portfolio-heading--catalog{align-items:end;padding-top:23px}
.portfolio-heading--catalog h3{font:400 clamp(32px,4vw,58px)/1.05 var(--serif);letter-spacing:-.04em;margin:8px 0 0}
.portfolio-heading--catalog h3 span{color:#d0ba8f;font-style:italic}
.portfolio-heading--catalog>.small{color:#b6beae;white-space:nowrap}
.portfolio-filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 24px}
.portfolio-filter{padding:10px 18px;background:transparent;border:1px solid #738473;color:#e4e6dc;font:400 12px/1.2 var(--serif);border-radius:999px}
.portfolio-filter:hover,.portfolio-filter[aria-pressed=true]{background:#e6edc9;color:#23382d;border-color:#e6edc9}
.portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px}
.portfolio-fallback{display:grid;place-items:center;height:100%;color:#737773;font:400 12px var(--serif)}
.portfolio-disclaimer{font-size:12px;line-height:1.7;color:#b6c2b4;max-width:800px;margin:28px 0 0}
.portfolio-cta{margin-top:clamp(65px,8vw,125px);padding:clamp(27px,4vw,56px);border:1px solid #829081;background:#2f4133;display:flex;align-items:end;justify-content:space-between;gap:22px}
.portfolio-cta h3{font:400 clamp(36px,5vw,66px)/1 var(--serif);letter-spacing:-.05em;margin:14px 0}
.portfolio-cta p{color:#d5ddce;margin:0}
.portfolio-cta .primary{background:#e1e9c3;color:#203227;border-color:#e1e9c3;white-space:nowrap}
.portfolio-cta .primary:hover{background:#fff}
.order-records{margin-top:45px;border-top:1px solid #748576;color:#d2dacd}
.order-records>summary{padding:20px 0;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;list-style:none}
.order-records>summary::-webkit-details-marker{display:none}
.order-records>summary span{font-size:24px}
.order-records[open]>summary span{transform:rotate(45deg)}
.order-records-body{padding:12px 0 25px}
.order-records-body h3{font:400 27px var(--serif);margin:0 0 10px}
.order-records-body p{color:#c2cbbc}
.order-records .order-history{color:#f0efea}
@media(max-width:780px){
 .sheet-portfolio .section{width:calc(100% - 52px)}
 .portfolio-card-copy{flex-direction:column;gap:4px}
 .portfolio-heading--catalog{align-items:start}
 .portfolio-cta{align-items:start;flex-direction:column}
}
@media(max-width:530px){
 .sheet-portfolio .section{width:calc(100% - 36px)}
 .sheet-portfolio .chapter-heading h2{font-size:clamp(44px,11vw,70px)}
 .portfolio-feature{gap:12px;border-radius:10px}
 .portfolio-card--featured{flex-basis:94%}
 .portfolio-card--featured:last-child{margin-right:6%}
 .portfolio-card--featured .portfolio-thumb{border-radius:10px}
 .portfolio-grid{grid-template-columns:1fr;gap:28px}
 .portfolio-controls{margin:18px 0 52px}
 .portfolio-heading--catalog{flex-direction:column;align-items:start}
 .portfolio-filter{padding:9px 13px;font-size:11px}
 .portfolio-filters{gap:7px}
 .portfolio-cta .primary{white-space:normal}
}

/* Language control stays available on small screens as well as desktop. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.language-picker{flex:0 0 auto;margin:0}
.language-picker select{width:64px;min-height:42px;padding:8px 4px;border:1px solid #a9aa9d;border-radius:0;background:transparent;color:inherit;font:600 12px var(--serif);cursor:pointer}
@media(max-width:780px){
 .masthead .bar{gap:8px;flex-wrap:wrap;padding-block:8px}
 .masthead .brand{margin-right:auto}
 .masthead .index-trigger,.masthead #open-cart{padding:8px;font-size:12px}
}
@media(max-width:390px){
 .masthead .brand{font-size:21px;padding:5px}
 .language-picker select{width:53px}
 .masthead .bar{gap:5px}
}


/* Warm paper palette: lighten the existing ivory toward white by 70%.
   All interface typography uses the portfolio heading's Georgia family. */
:root{--paper:#faf9f5;--tint:#f5f2ec;--ink:#37312d;--dim:#686058;--line:#d9d2c8;--dark:#eee9e1;--gold:#8b6e4e;font-family:var(--serif)}
body,main,.sheet-paper,.sheet-studio .sheet-paper,.sheet-catalog .sheet-paper,.sheet-portfolio .sheet-paper,.sheet-orders .sheet-paper,.opening{background:var(--paper);color:var(--ink)}
.masthead{background:#faf9f5f5;border-color:var(--line)}
.opening{border-color:var(--line)}
.hero h1 em,.sheet-portfolio .chapter-heading h2 em{color:#80684f}
.hero .lead,.sheet-catalog .lead,.sheet-portfolio .chapter-heading .lead{color:var(--dim)}
.journey{background:#f0ece5;color:var(--ink);border-bottom:1px solid var(--line)}
.journey b,.chapter-number,.sheet-catalog .chapter-number,.sheet-portfolio .chapter-number,.sheet-portfolio .eyebrow{color:#80684f}
.art{border-color:var(--line);box-shadow:6px 6px 0 #eee9e0}
.art figcaption{color:var(--dim)}
.primary,.portfolio-cta .primary{background:#6d5947;border-color:#6d5947;color:#fffdf9;font-weight:400}
.primary:hover,.portfolio-cta .primary:hover{background:#574637;color:#fffdf9}
.outline:hover{background:#eee8df}
:focus-visible,.portfolio-card:focus-visible,.portfolio-feature:focus-visible{outline-color:#80684f}
input,textarea,select{border-color:#bdb3a6;background:#fffdfa}
.product,.product:nth-child(even),.brief-layout #brief,.preview-aside,.portfolio-cta{background:#f3efe8;border-color:var(--line);color:var(--ink)}
.product details{border-color:var(--line)}
.wizard-progress{border-color:var(--line)}
.wizard-progress span{color:var(--dim)}
.wizard-progress span.is-active,.wizard-progress span.is-done,.wizard-progress span.is-done:before,.wizard .text-link{color:#735b43}
.style-card{background:#fffdf9;border-color:var(--line);box-shadow:0 9px 20px #40342908}
.style-card:hover,.style-card:focus-visible{border-color:#a78c70;box-shadow:0 15px 30px #40342916}
.style-card[aria-pressed=true]{border-color:#8b6e4e;box-shadow:0 12px 30px #40342916}
.style-caption small,.type-card small,.optional{color:var(--dim)}
.style-select,.style-card[aria-pressed=true] .style-select{color:#735b43}
.type-card{background:#fffdf9;border-color:var(--line)}
.type-card:hover,.type-card:focus-visible,.type-card[aria-pressed=true]{border-color:#8b6e4e}
.type-card[aria-pressed=true]{background:#eee7dc}
.upload-box{background:#fcfaf6;border-color:#b4a48e}
.brief-side{background:#eee8df;color:var(--ink)}
.brief-side>p{color:var(--dim)}
.brief-decoration,.brief-decoration span{color:#80684f;border-color:#c5b8a6}
.references,.wizard-next{border-color:var(--line)}
.cart-bonus,.notice{background:#f1ece3;border-color:var(--line)}
.cart-discount{color:#735b43}
dialog::backdrop{background:#3e352d66}
#site-index{background:var(--paper);color:var(--ink)}
#site-index .outline:hover{background:#eee8df}
#site-index nav :is(a,button),#site-index nav a:last-child{border-color:var(--line)}
#site-index nav :is(a,button):hover,#site-index nav span,#site-index nav b{color:#80684f}
#site-index nav small{color:var(--dim)}
.portfolio-heading,.order-records{border-color:var(--line)}
.portfolio-heading>span:last-child,.portfolio-heading--catalog>.small,.portfolio-card-copy>span,.portfolio-controls>span,.portfolio-disclaimer,.portfolio-cta p,.order-records,.order-records-body p,.order-records .order-history{color:var(--dim)}
.portfolio-heading--catalog h3 span{color:#80684f}
.portfolio-controls button{background:#f0ebe3;border-color:#cec3b4;color:#514437}
.portfolio-controls button:hover:not(:disabled){background:#e6ddcf}
.portfolio-filter{border-color:#bdb09f;color:#514437}
.portfolio-filter:hover,.portfolio-filter[aria-pressed=true]{background:#e9dfd0;color:#493b2d;border-color:#b49b7b}
.portfolio-thumb{background:#eee9e1}
.portfolio-fallback{color:var(--dim)}
.language-picker select{border-color:#bdb3a6}
/* A relaxed editorial rhythm, without heavy sans-serif or monospace labels. */
h1,h2,.step-top h3,.portfolio-cta h3{letter-spacing:-.045em}
.lead{line-height:1.55}
.eyebrow,.number,.wizard-progress span,.style-select,.portfolio-heading>span:last-child{font-weight:400;letter-spacing:.08em}
.style-caption strong,.type-card strong,.portfolio-card-copy h4{font-weight:400}
.style-caption strong{font-size:18px}
.style-caption small,.style-select,.portfolio-card-copy>span,.portfolio-controls>span{font-size:13px}
.portfolio-card-copy h4{font-size:17px}
.portfolio-card--featured .portfolio-card-copy h4{font-size:19px}
.portfolio-filter{font-size:14px}
.style--minimal .visual-body strong,.style--corporate .visual-body strong,.style--bold .visual-body strong,.style--tech .visual-body strong,.style--events .visual-body strong,.style--product .visual-body strong{letter-spacing:-.045em}
@media(prefers-reduced-motion:no-preference){
 .sheet-shade{background:#6a5847;opacity:calc(var(--sheet-shade,0) * .3)}
 .sheet:not(.sheet-orders) .sheet-paper{box-shadow:0 16px 40px #57463712}
}
@media(max-width:530px){
 .style-caption strong{font-size:15px}
 .style-caption small,.style-select{font-size:12px}
 .wizard-progress span{font-size:11px;letter-spacing:.02em}
}

.product h3{overflow-wrap:anywhere;hyphens:auto;font-size:clamp(23px,2.2vw,31px)}

/* Decorative brand contours stay behind content and never capture input. */
.opening,.sheet-studio .sheet-paper,.sheet-catalog .sheet-paper,.sheet-portfolio .sheet-paper{position:relative;isolation:isolate}
.opening::before,.sheet-studio .sheet-paper::before,.sheet-catalog .sheet-paper::before,.sheet-portfolio .sheet-paper::before{
 content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background-image:url('/assets/pineapple-outline.png');background-repeat:repeat-y;
 background-size:460px 460px;background-position:right -100px top 38px;opacity:.13;
}
.opening::before{background-repeat:no-repeat;background-size:540px 540px;background-position:left -180px bottom -90px}
.sheet-studio .sheet-paper::before{background-position:right -180px top 60px}
.sheet-catalog .sheet-paper::before{background-position:left -180px top 40px}
.sheet-portfolio .sheet-paper::before{background-size:560px 560px;background-position:right -220px top 40px}
@media(max-width:670px){
 .opening::before,.sheet-studio .sheet-paper::before,.sheet-catalog .sheet-paper::before,.sheet-portfolio .sheet-paper::before{background-size:320px 320px;opacity:.09;background-position:right -190px top 30px}
 .opening::before,.sheet-catalog .sheet-paper::before{background-position:left -190px top 70px}
}