/* ── Theme: Toran ─────────────────────────────────────────────────────────
   Named for the ornamental garland hung over a Hindu doorway. Three
   materials, each with its own texture:
     soft greys   the ground: a felt/flannel nap (two SVG noise layers under
                  gentle light), with soft, rounded, shadowed cards
     browns       the navbar and footer: denim, built from two twill
                  gradients and horizontal slub noise, finished with a
                  double row of ochre topstitching
     nickel       the ornament: polished oxidised metal like German-silver
                  temple work. A metallic gradient, bevels, and a touch of
                  patina (green-grey) and oxide (brown) in the recesses.
   Signature: a nickel toran strip, a repeating border of hanging lotus petals
   and beads, hangs from the navbar and rises from the footer. On page load
   it drops into place.
   Type: Rozha One (display, single weight, so headings are set to 400)
   for headings and brand; Hind 300/400/600 for body and UI.
   Motion: the toran drop, a content fade-up, the title rule drawing in with
   one sheen, and sheens on nickel hovers. All of it is switched off by the
   prefers-reduced-motion rule in base.css, and nothing rests hidden.
   No headshot (THEMES['toran']['headshot'] is false). */
[data-fe-theme="toran"] {
  /* soft greys */
  --fe-ground:           #e3e1dd;
  --fe-card:             #eeece9;
  --fe-rule:             #cfccc7;
  --fe-muted:            #5d5650;
  --fe-ink:              #2a2622;
  /* denim browns */
  --fe-denim:            #3e2c22;
  --fe-denim-hi:         #5a4132;
  --fe-thread:           #b8894a;
  --fe-brown:            #6a4a35;
  /* nickel */
  --fe-nickel-light:     #e9ebeb;
  --fe-nickel-mid:       #b4b8ba;
  --fe-nickel-dark:      #6e7477;
  --fe-nickel-recess:    #3f4447;
  --fe-band-text:        #c4c7c8;
  /* oxidation */
  --fe-patina:           rgba(94, 102, 80, 0.32);
  --fe-oxide:            rgba(107, 90, 69, 0.22);

  --fe-metal: linear-gradient(180deg, #f3f4f4 0%, #cfd2d3 42%, #9fa4a7 56%, #dfe1e2 100%);
  --fe-ease:  cubic-bezier(0.2, 0.7, 0.2, 1);

  --bs-body-bg:          var(--fe-ground);
  --bs-body-color:       var(--fe-ink);
  --bs-emphasis-color:   #1c1916;
  --bs-heading-color:    var(--fe-ink);
  --bs-secondary-color:  var(--fe-muted);
  --bs-secondary-rgb:    93, 86, 80;
  --bs-border-color:     var(--fe-rule);
  --bs-primary:          var(--fe-denim);
  --bs-primary-rgb:      62, 44, 34;
  --bs-link-color:       var(--fe-brown);
  --bs-link-color-rgb:   106, 74, 53;
  --bs-link-hover-color: var(--fe-ink);
  --bs-link-hover-color-rgb: 42, 38, 34;

  --fe-accent:           var(--fe-brown);
  --fe-font-body:        'Hind', 'Segoe UI', sans-serif;
  --fe-font-heading:     'Rozha One', Georgia, serif;
  --fe-font-brand:       var(--fe-font-heading);
}
[data-fe-theme="toran"] ::selection { background: rgba(184, 137, 74, 0.3); }

/* Ground: felt nap over soft light, grey on grey */
[data-fe-theme="toran"] body {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .24 0 0 0 0 .2 0 0 0 0 .17 .12 0 0 0 0'/%3E%3C/filter%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.3' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 .2 0 0 -.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(255, 255, 255, 0.55), transparent 70%),
    radial-gradient(ellipse 70% 60% at 100% 100%, rgba(62, 44, 34, 0.06), transparent 70%),
    var(--fe-ground);
  background-attachment: fixed;
  font-size: 1.0625rem; line-height: 1.75;
}
[data-fe-theme="toran"] main { padding: 3.5rem 0 4.25rem; }

/* Type: Rozha One has one weight; never let Bootstrap's 500 faux-bold it */
[data-fe-theme="toran"] :is(h1, h2, h3, h4, h5, h6) {
  font-weight: 400; letter-spacing: 0.005em; line-height: 1.2;
}
[data-fe-theme="toran"] .lead {
  font-weight: 300; font-size: 1.35rem; line-height: 1.55; color: #3d3630;
}
[data-fe-theme="toran"] .section-label {
  font-weight: 600; font-size: 0.72rem; letter-spacing: 0.2em;
}
/* a small nickel lozenge leads each label */
[data-fe-theme="toran"] .section-label::before {
  content: "";
  display: inline-block; width: 0.5em; height: 0.5em;
  margin-right: 0.7em; vertical-align: 0.12em;
  background: var(--fe-metal);
  box-shadow: 0 0 0 0.5px var(--fe-nickel-recess);
  transform: rotate(45deg);
}

/* Page title over an ornate nickel rule: a bar with a row of beads beneath,
   flecked with patina. It draws in, then one sheen crosses the bar. */
[data-fe-theme="toran"] .page-title {
  position: relative;
  font-size: clamp(2.4rem, 1.7rem + 3vw, 3.5rem); line-height: 1.08;
  border-bottom: 0; padding-bottom: 1.3rem; margin-bottom: 1.75rem;
}
[data-fe-theme="toran"] .page-title::after,
[data-fe-theme="toran"] .page-title::before {
  content: "";
  position: absolute; left: 0; right: 0;
  pointer-events: none;
}
[data-fe-theme="toran"] .page-title::after {
  bottom: 0; height: 9px;
  background:
    radial-gradient(ellipse 12% 100% at 18% 30%, var(--fe-patina), transparent),
    radial-gradient(ellipse 9% 100% at 63% 40%, var(--fe-oxide), transparent),
    radial-gradient(ellipse 6% 100% at 88% 20%, var(--fe-patina), transparent),
    var(--fe-metal) top / 100% 3px no-repeat,
    radial-gradient(circle, var(--fe-nickel-light) 0 0.7px, var(--fe-nickel-mid) 1.3px, var(--fe-nickel-recess) 2.1px, transparent 2.5px) 0 3px / 8px 6px repeat-x;
  transform-origin: left;
  animation: toran-draw 0.9s 0.25s cubic-bezier(0.65, 0, 0.35, 1) both;
}
[data-fe-theme="toran"] .page-title::before {
  bottom: 6px; height: 3px; z-index: 1;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.95) 50%, transparent 60%) no-repeat;
  background-size: 40% 100%;
  background-position: -60% 0;
  animation: toran-sheen 1.1s 1.1s ease-in-out both;
}

/* Content arrives once, quietly; the toran above is the moment */
[data-fe-theme="toran"] main .container-page {
  animation: toran-rise 0.6s 0.2s var(--fe-ease) both;
}

@keyframes toran-hang {
  0%   { transform: translateY(-10px) scaleY(0.4); opacity: 0; }
  70%  { transform: translateY(1px) scaleY(1.04); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes toran-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes toran-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes toran-sheen {
  from { background-position: -60% 0; }
  to   { background-position: 160% 0; }
}

/* Denim band: warp and weft twill, slub streaks, worn edges.
   Shared by the navbar and footer. */
[data-fe-theme="toran"] :is(.navbar, footer) {
  position: relative;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.015 .5' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .93 0 0 0 0 .85 .45 0 0 0 -.18'/%3E%3C/filter%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .22 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(117deg, rgba(255, 235, 215, 0.075) 0 1.5px, transparent 1.5px 4px),
    repeating-linear-gradient(27deg, rgba(0, 0, 0, 0.14) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, var(--fe-denim-hi) -40%, var(--fe-denim) 60%);
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.35);
}
/* Double topstitching in ochre thread, set in from the hem */
[data-fe-theme="toran"] :is(.navbar, footer)::after {
  content: "";
  position: absolute; left: 0; right: 0; height: 6px;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, var(--fe-thread) 0 6px, transparent 6px 10px) top / 100% 1.5px no-repeat,
    repeating-linear-gradient(90deg, var(--fe-thread) 0 6px, transparent 6px 10px) 5px bottom / 100% 1.5px no-repeat;
  opacity: 0.75;
}
[data-fe-theme="toran"] .navbar::after { bottom: 5px; }
[data-fe-theme="toran"] footer::after  { top: 5px; }

/* Signature: the toran hangs from the navbar and rises from the footer */
[data-fe-theme="toran"] :is(.navbar, footer)::before {
  content: "";
  position: absolute; left: 0; right: 0; height: 24px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='24' viewBox='0 0 44 24'%3E%3Cdefs%3E%3ClinearGradient id='m' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f1f2f2'/%3E%3Cstop offset='.4' stop-color='%23bcc0c2'/%3E%3Cstop offset='.62' stop-color='%237c8285'/%3E%3Cstop offset='1' stop-color='%23c9cccd'/%3E%3C/linearGradient%3E%3ClinearGradient id='p' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23eef0f0'/%3E%3Cstop offset='.45' stop-color='%23b1b5b7'/%3E%3Cstop offset='.7' stop-color='%2373797c'/%3E%3Cstop offset='1' stop-color='%23a9aeb0'/%3E%3C/linearGradient%3E%3Cfilter id='o' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .37 0 0 0 0 .4 0 0 0 0 .31 0 0 0 1.6 -.82'/%3E%3CfeComposite in2='SourceGraphic' operator='in' result='c'/%3E%3CfeMerge%3E%3CfeMergeNode in='SourceGraphic'/%3E%3CfeMergeNode in='c'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23o)' stroke='%233f4447' stroke-width='.7'%3E%3Crect x='-1' y='.5' width='46' height='5' fill='url(%23m)'/%3E%3Cpath d='M13 5.5C13 12 18 15 22 22C26 15 31 12 31 5.5Z' fill='url(%23p)'/%3E%3Cpath d='M16 6.5C16.5 11 19.5 14 22 18.5C24.5 14 27.5 11 28 6.5M22 8V16' fill='none' stroke='%235a6063' stroke-width='.5'/%3E%3Cpath d='M0 5.5V9M44 5.5V9' fill='none' stroke-width='.6'/%3E%3Ccircle cx='0' cy='11' r='2.2' fill='url(%23m)'/%3E%3Ccircle cx='44' cy='11' r='2.2' fill='url(%23m)'/%3E%3Ccircle cx='0' cy='15.5' r='1.3' fill='url(%23m)'/%3E%3Ccircle cx='44' cy='15.5' r='1.3' fill='url(%23m)'/%3E%3Ccircle cx='22' cy='3' r='1.1' fill='%23e9ebeb'/%3E%3Ccircle cx='0' cy='3' r='1.1' fill='%23e9ebeb'/%3E%3Ccircle cx='44' cy='3' r='1.1' fill='%23e9ebeb'/%3E%3C/g%3E%3C/svg%3E") center top / 44px 24px repeat-x;
  filter: drop-shadow(0 2px 1.5px rgba(42, 38, 34, 0.3));
}
[data-fe-theme="toran"] .navbar::before {
  top: 100%;
  transform-origin: top;
  animation: toran-hang 0.9s 0.1s var(--fe-ease) both;
}
[data-fe-theme="toran"] footer::before {
  bottom: 100%;
  transform: scaleY(-1);
  filter: drop-shadow(0 -2px 1.5px rgba(42, 38, 34, 0.25));
}

/* Navbar: nickel brand and links on denim */
[data-fe-theme="toran"] .navbar {
  padding-block: 0.85rem 1.1rem;
  --bs-navbar-color: var(--fe-band-text);
  --bs-navbar-hover-color: #ffffff;
  --bs-navbar-active-color: #ffffff;
  --bs-navbar-brand-color: var(--fe-nickel-light);
  --bs-navbar-brand-hover-color: #ffffff;
  --bs-navbar-toggler-border-color: rgba(196, 199, 200, 0.5);
  /* stroke colour is --fe-band-text; data URIs can't read custom properties */
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(196,199,200,.95)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
[data-fe-theme="toran"] .navbar-brand {
  font-size: 1.65rem; letter-spacing: 0.01em;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  [data-fe-theme="toran"] .navbar-brand {
    background: linear-gradient(180deg, #f6f7f7 15%, #c3c7c9 48%, #8b9194 60%, #e2e4e5 92%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }
}
[data-fe-theme="toran"] .navbar .nav-link {
  letter-spacing: 0.03em;
  transition: color 0.2s ease;
}
[data-fe-theme="toran"] .navbar .nav-link.active { font-weight: 600; }
[data-fe-theme="toran"] .theme-btn { border-color: var(--fe-nickel-dark); }

/* Footer: the same denim; text and motto in nickel */
[data-fe-theme="toran"] footer {
  padding-top: 1.35rem !important;
  --bs-secondary-rgb: 196, 199, 200;
}
[data-fe-theme="toran"] footer a { text-decoration: none; transition: color 0.2s ease; }
[data-fe-theme="toran"] footer a:hover { color: #ffffff !important; }
[data-fe-theme="toran"] .footer-motto { color: #d9dcdd !important; }

/* Cards: soft grey felt, rounded, diffuse shadow. On hover they lift and a
   nickel band unfurls from the centre of the top edge. */
[data-fe-theme="toran"] .card {
  position: relative; overflow: hidden;
  background: var(--fe-card);
  border: 1px solid rgba(42, 38, 34, 0.07);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(62, 44, 34, 0.06), 0 12px 28px -14px rgba(62, 44, 34, 0.22);
}
[data-fe-theme="toran"] .project-card {
  transition: transform 0.3s var(--fe-ease), box-shadow 0.3s var(--fe-ease);
}
[data-fe-theme="toran"] .project-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background:
    radial-gradient(ellipse 15% 100% at 30% 50%, var(--fe-patina), transparent),
    var(--fe-metal);
  box-shadow: 0 1px 0 rgba(63, 68, 71, 0.35);
  transform: scaleX(0);
  transition: transform 0.45s var(--fe-ease);
}
[data-fe-theme="toran"] .project-card .icon-accent { transition: transform 0.3s var(--fe-ease); }
[data-fe-theme="toran"] .project-card:is(:hover, :focus-visible) {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(62, 44, 34, 0.07), 0 18px 34px -14px rgba(62, 44, 34, 0.3);
}
[data-fe-theme="toran"] .project-card:is(:hover, :focus-visible)::before { transform: scaleX(1); }
[data-fe-theme="toran"] .project-card:is(:hover, :focus-visible) .icon-accent { transform: translateX(3px); }
[data-fe-theme="toran"] .icon-accent { color: var(--fe-nickel-dark); }

/* hr: a nickel mandala between two fading hairlines */
[data-fe-theme="toran"] hr {
  height: 28px; border: 0; opacity: 1;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cdefs%3E%3ClinearGradient id='m' gradientUnits='userSpaceOnUse' x1='4' y1='4' x2='24' y2='24'%3E%3Cstop offset='0' stop-color='%23eef0f0'/%3E%3Cstop offset='.45' stop-color='%23b1b5b7'/%3E%3Cstop offset='.7' stop-color='%2373797c'/%3E%3Cstop offset='1' stop-color='%23a9aeb0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23m)' stroke='%233f4447' stroke-width='.6'%3E%3Cellipse cx='14' cy='6' rx='2.6' ry='5'/%3E%3Cellipse cx='14' cy='6' rx='2.6' ry='5' transform='rotate(45 14 14)'/%3E%3Cellipse cx='14' cy='6' rx='2.6' ry='5' transform='rotate(90 14 14)'/%3E%3Cellipse cx='14' cy='6' rx='2.6' ry='5' transform='rotate(135 14 14)'/%3E%3Cellipse cx='14' cy='6' rx='2.6' ry='5' transform='rotate(180 14 14)'/%3E%3Cellipse cx='14' cy='6' rx='2.6' ry='5' transform='rotate(225 14 14)'/%3E%3Cellipse cx='14' cy='6' rx='2.6' ry='5' transform='rotate(270 14 14)'/%3E%3Cellipse cx='14' cy='6' rx='2.6' ry='5' transform='rotate(315 14 14)'/%3E%3Ccircle cx='14' cy='14' r='4.6'/%3E%3Ccircle cx='14' cy='14' r='2' fill='%23eef0f0'/%3E%3C/g%3E%3C/svg%3E") center / 28px no-repeat,
    linear-gradient(90deg, transparent, var(--fe-nickel-mid) 25%, var(--fe-nickel-dark) calc(50% - 22px), transparent calc(50% - 22px),
                    transparent calc(50% + 22px), var(--fe-nickel-dark) calc(50% + 22px), var(--fe-nickel-mid) 75%, transparent) center / 100% 1px no-repeat;
}

[data-fe-theme="toran"] .breadcrumb {
  --bs-breadcrumb-divider: "◆";
  --bs-breadcrumb-divider-color: var(--fe-nickel-dark);
  --bs-breadcrumb-item-active-color: var(--fe-muted);
  font-size: 0.92rem;
}
/* Bootstrap floats the divider, so centre the small glyph with line-height */
[data-fe-theme="toran"] .breadcrumb-item + .breadcrumb-item::before {
  font-size: 0.6em; line-height: 2.9;
}

/* Buttons: outline buttons are nickel plate with a bevel, a little patina,
   and a sheen that crosses on hover; primary buttons are denim */
[data-fe-theme="toran"] .btn-outline-secondary {
  --bs-btn-color: var(--fe-ink); --bs-btn-border-color: var(--fe-nickel-dark);
  --bs-btn-hover-color: #1c1916; --bs-btn-hover-bg: #cfd2d3; --bs-btn-hover-border-color: var(--fe-nickel-recess);
  --bs-btn-active-color: #1c1916; --bs-btn-active-bg: #b4b8ba; --bs-btn-active-border-color: var(--fe-nickel-recess);
  --fe-bevel: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(63, 68, 71, 0.35), 0 1px 2px rgba(42, 38, 34, 0.2);
  border-radius: 6px; font-weight: 600; letter-spacing: 0.04em;
  background:
    linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.8) 50%, transparent 65%) 160% 0 / 250% 100% no-repeat,
    radial-gradient(ellipse at 88% 95%, var(--fe-patina), transparent 55%),
    radial-gradient(ellipse at 8% 10%, var(--fe-oxide), transparent 50%),
    var(--fe-metal);
  box-shadow: var(--fe-bevel);
  transition: background-position 0.6s var(--fe-ease), border-color 0.2s ease;
}
[data-fe-theme="toran"] .btn-outline-secondary:is(:hover, :focus-visible) {
  background-position: -60% 0, 0 0, 0 0, 0 0;
}
[data-fe-theme="toran"] .btn-outline-secondary:focus-visible {
  box-shadow: var(--fe-bevel), 0 0 0 0.25rem rgba(110, 116, 119, 0.5);
}
[data-fe-theme="toran"] .btn-primary {
  --bs-btn-bg: var(--fe-denim); --bs-btn-border-color: var(--fe-denim);
  --bs-btn-color: var(--fe-nickel-light); --bs-btn-hover-color: #ffffff; --bs-btn-active-color: #ffffff;
  --bs-btn-hover-bg: var(--fe-denim-hi); --bs-btn-hover-border-color: var(--fe-denim-hi);
  --bs-btn-active-bg: #2e2018; --bs-btn-active-border-color: #2e2018;
  --bs-btn-focus-shadow-rgb: 106, 74, 53;
  border-radius: 6px; font-weight: 600; letter-spacing: 0.04em;
}

/* Body links: brown over a faint underline; a nickel line sweeps in on hover */
[data-fe-theme="toran"] main a:not(.btn, .card) {
  color: var(--fe-brown); font-weight: 600;
  text-decoration: none; padding-bottom: 1px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background:
    linear-gradient(var(--fe-nickel-dark), var(--fe-nickel-dark)) left bottom / 0% 2px no-repeat,
    linear-gradient(rgba(106, 74, 53, 0.4), rgba(106, 74, 53, 0.4)) left bottom / 100% 1px no-repeat;
  transition: background-size 0.3s var(--fe-ease), color 0.2s ease;
}
[data-fe-theme="toran"] main a:not(.btn, .card):is(:hover, :focus-visible) {
  color: var(--fe-ink);
  background-size: 100% 2px, 100% 1px;
}

[data-fe-theme="toran"] .dropdown-menu {
  --bs-dropdown-bg: var(--fe-card);
  --bs-dropdown-border-color: var(--fe-nickel-mid);
  --bs-dropdown-link-color: var(--fe-ink);
  --bs-dropdown-link-hover-bg: #e2dfdb;
  --bs-dropdown-link-hover-color: #1c1916;
  --bs-dropdown-link-active-bg: var(--fe-denim);
  border-radius: 10px;
}